@opentiny/vue-checkbox - npm Package Compare versions

Comparing version 3.8.3 to 3.9.0

lib/index.js

@@ -88,3 +88,3 @@ function _extends() {
 });
-var version = "3.7.0";
+var version = "3.9.0";
 Checkbox.model = {
@@ -91,0 +91,0 @@ prop: "modelValue",

lib/mobile-first.js

 import { renderless, api } from "@opentiny/vue-renderless/checkbox/vue";
 import { defineComponent, props, setup as _setup } from "@opentiny/vue-common";
-import { IconHalfselect, IconCheckedSur, IconCheck } from "@opentiny/vue-icon";
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, createBlock, normalizeClass, createCommentVNode, withDirectives, withModifiers, vModelCheckbox, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { iconHalfselect, iconCheckedSur, iconCheck } from "@opentiny/vue-icon";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createBlock, createCommentVNode, withDirectives, withModifiers, vModelCheckbox, renderSlot, createTextVNode, toDisplayString } from "vue";
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
@@ -52,9 +52,9 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   inheritAttrs: false,
-  props: [].concat(props, ["modelValue", "text", "events", "label", "indeterminate", "disabled", "checked", "name", "trueLabel", "falseLabel", "id", "controls", "size", "border", "validateEvent"]),
+  emits: ["update:modelValue", "change", "complete"],
+  props: [].concat(props, ["modelValue", "text", "events", "label", "indeterminate", "disabled", "checked", "name", "trueLabel", "falseLabel", "id", "controls", "size", "border", "validateEvent", "customClass"]),
   components: {
-    IconHalfselect: IconHalfselect(),
-    IconCheckedSur: IconCheckedSur(),
-    IconCheck: IconCheck()
+    IconHalfselect: iconHalfselect(),
+    IconCheckedSur: iconCheckedSur(),
+    IconCheck: iconCheck()
   },
-  emits: ["update:modelValue", "change", "complete"],
   setup: function setup(props2, context) {
@@ -77,18 +77,15 @@ return _setup({
 var _hoisted_5 = ["aria-hidden", "disabled", "value", "name"];
-var _hoisted_6 = {
-  key: 0,
-  ref: "label",
-  class: "py-3 sm:py-0 pl-0 sm:pl-2 text-color-text-primary mr-5 flex-auto"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_icon_check = resolveComponent("icon-check");
+  var _component_icon_halfselect = resolveComponent("icon-halfselect");
   var _component_icon_checked_sur = resolveComponent("icon-checked-sur");
-  var _component_icon_halfselect = resolveComponent("icon-halfselect");
   return openBlock(), createElementBlock("label", mergeProps({
     "data-tag": "tiny-checkbox",
-    class: "inline-flex sm:items-center sm:text-xs text-sm sm:py-2 leading-5 cursor-pointer",
+    class: _ctx.m("inline-flex sm:items-center text-sm leading-5 cursor-pointer", _ctx.state.size === "medium" ? "sm:text-sm" : "sm:text-xs", {
+      "sm:py-2": _ctx.state.vertical
+    }, _ctx.customClass),
     id: _ctx.id,
     tabindex: "-1"
   }, _ctx.a(_ctx.$attrs, ["class", "style", "onClick"], true)), [createElementVNode("span", {
-    class: "relative sm:h-4 sm:w-4",
+    class: normalizeClass(["relative", _ctx.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:h-4 sm:w-4"]),
     role: _ctx.indeterminate ? "checkbox" : false,
@@ -99,16 +96,16 @@ "aria-checked": _ctx.indeterminate ? "mixed" : false
     "data-tag": "icon-check",
-    "custom-class": "sm:w-4 sm:h-4 w-5 h-5 flex-1",
-    class: normalizeClass([_ctx.state.isDisabled ? "[&_path:nth-of-type(2)]:fill-color-icon-disabled [&_path:nth-of-type(1)]:fill-color-bg-3 cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-white [&_path:nth-of-type(2)]:fill-color-none-hover"])
-  }, null, 8, ["class"])) : createCommentVNode("v-if", true), _ctx.state.isChecked ? (openBlock(), createBlock(_component_icon_checked_sur, {
+    "custom-class": ["w-5 h-5 flex-1", _ctx.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:w-4 sm:h-4"],
+    class: normalizeClass([_ctx.state.isDisabled ? "[&_path:nth-of-type(2)]:fill-color-icon-disabled [&_path:nth-of-type(1)]:fill-color-bg-3 cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-icon-inverse [&_path:nth-of-type(2)]:fill-color-none-hover"])
+  }, null, 8, ["custom-class", "class"])) : _ctx.indeterminate ? (openBlock(), createBlock(_component_icon_halfselect, {
     key: 1,
+    "data-tag": "icon-halfselect",
+    "custom-class": _ctx.m("w-5 h-5 flex-1 [&_path:nth-of-type(2)]:fill-color-icon-inverse", _ctx.state.isDisabled ? "[&_path:nth-of-type(1)]:fill-color-brand-disabled cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-brand", _ctx.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:w-4 sm:h-4")
+  }, null, 8, ["custom-class"])) : _ctx.state.isChecked ? (openBlock(), createBlock(_component_icon_checked_sur, {
+    key: 2,
     "data-tag": "icon-checked-sur",
-    "custom-class": "sm:w-4 sm:h-4 w-5 h-5",
-    class: normalizeClass(_ctx.m("flex-1 [&_path:nth-of-type(2)]:fill-white", _ctx.state.isDisabled ? "[&_path:nth-of-type(1)]:fill-color-brand-disabled cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-brand"))
-  }, null, 8, ["class"])) : createCommentVNode("v-if", true), _ctx.indeterminate ? (openBlock(), createBlock(_component_icon_halfselect, {
-    key: 2,
-    "data-tag": "icon-halfselect",
-    "custom-class": _ctx.m("sm:w-4 sm:h-4 w-5 h-5 flex-1 [&_path:nth-of-type(2)]:fill-white", _ctx.state.isDisabled ? "[&_path:nth-of-type(1)]:fill-color-brand-disabled cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-brand")
-  }, null, 8, ["custom-class"])) : createCommentVNode("v-if", true)]), _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
+    "custom-class": ["w-5 h-5", _ctx.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:w-4 sm:h-4"],
+    class: normalizeClass(_ctx.m("flex-1 [&_path:nth-of-type(2)]:fill-color-icon-inverse", _ctx.state.isDisabled ? "[&_path:nth-of-type(1)]:fill-color-brand-disabled cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-brand"))
+  }, null, 8, ["custom-class", "class"])) : createCommentVNode("v-if", true)]), _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
     key: 0,
-    class: "absolute inset-0 w-0 h-0 -z-10 opacity-0",
+    class: "absolute left-0 right-0 top-0 bottom-0 w-0 h-0 -z-10 opacity-0",
     type: "checkbox",
@@ -136,3 +133,3 @@ "aria-hidden": _ctx.indeterminate ? "true" : "false",
     key: 1,
-    class: "absolute inset-0 w-0 h-0 -z-10 opacity-0",
+    class: "absolute left-0 right-0 top-0 bottom-0 w-0 h-0 -z-10 opacity-0",
     type: "checkbox",
@@ -157,5 +154,9 @@ "aria-hidden": _ctx.indeterminate ? "true" : "false",
     }, ["stop"]))
-  }, null, 40, _hoisted_5)), [[vModelCheckbox, _ctx.state.model]])], 8, _hoisted_2), _ctx.slots.default && _ctx.slots.default() || _ctx.text || _ctx.label ? (openBlock(), createElementBlock(
+  }, null, 40, _hoisted_5)), [[vModelCheckbox, _ctx.state.model]])], 10, _hoisted_2), _ctx.slots.default && _ctx.slots.default() || _ctx.text || _ctx.label ? (openBlock(), createElementBlock(
     "span",
-    _hoisted_6,
+    {
+      key: 0,
+      ref: "label",
+      class: normalizeClass(["py-3 sm:py-0 pl-0 sm:pl-2 mr-5 flex-auto", _ctx.state.isDisabled ? "cursor-not-allowed text-color-text-disabled" : "text-color-text-primary"])
+    },
     [renderSlot(_ctx.$slots, "default", {}, function() {
@@ -168,4 +169,4 @@ return [createTextVNode(
     })],
-    512
-    /* NEED_PATCH */
+    2
+    /* CLASS */
   )) : createCommentVNode("v-if", true)], 16, _hoisted_1);
@@ -172,0 +173,0 @@ }

lib/pc.js

@@ -5,3 +5,3 @@ import { renderless, api } from "@opentiny/vue-renderless/checkbox/vue";
 import { iconHalfselect, iconCheckedSur, iconCheck } from "@opentiny/vue-icon";
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createBlock, createCommentVNode, withDirectives, withModifiers, vModelCheckbox, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createBlock, withDirectives, withModifiers, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
@@ -54,3 +54,3 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   emits: ["change", "update:modelValue", "complete"],
-  props: [].concat(props, ["modelValue", "text", "events", "label", "indeterminate", "disabled", "checked", "name", "trueLabel", "falseLabel", "id", "controls", "size", "border", "validateEvent"]),
+  props: [].concat(props, ["modelValue", "text", "events", "label", "indeterminate", "disabled", "checked", "name", "trueLabel", "falseLabel", "id", "controls", "size", "border", "validateEvent", "displayOnly"]),
   components: {
@@ -80,8 +80,8 @@ IconHalfselect: iconHalfselect(),
   key: 0,
-  class: "tiny-checkbox__label"
+  class: "tiny-checkbox__label tiny-checkbox-display-only"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_icon_halfselect = resolveComponent("icon-halfselect");
+  var _component_icon_checked_sur = resolveComponent("icon-checked-sur");
   var _component_icon_check = resolveComponent("icon-check");
-  var _component_icon_checked_sur = resolveComponent("icon-checked-sur");
-  var _component_icon_halfselect = resolveComponent("icon-halfselect");
   return openBlock(), createElementBlock("label", mergeProps({
@@ -94,2 +94,6 @@ class: ["tiny-checkbox", [_ctx.border && _ctx.state.checkboxSize ? "tiny-checkbox--" + _ctx.state.checkboxSize : "", {
       "is-checked": _ctx.state.isChecked
+    }, {
+      "is-group-display-only": _ctx.state.isGroupDisplayOnly
+    }, {
+      "is-display-only": _ctx.state.isDisplayOnly
     }]],
@@ -107,12 +111,12 @@ id: _ctx.id,
     "aria-checked": _ctx.indeterminate ? "mixed" : false
-  }, [createElementVNode("span", _hoisted_3, [!_ctx.state.isChecked && !_ctx.indeterminate ? (openBlock(), createBlock(_component_icon_check, {
+  }, [createElementVNode("span", _hoisted_3, [_ctx.indeterminate ? (openBlock(), createBlock(_component_icon_halfselect, {
     key: 0,
-    class: "tiny-svg-size"
-  })) : createCommentVNode("v-if", true), _ctx.state.isChecked ? (openBlock(), createBlock(_component_icon_checked_sur, {
+    class: "tiny-svg-size icon-halfselect"
+  })) : _ctx.state.isChecked ? (openBlock(), createBlock(_component_icon_checked_sur, {
     key: 1,
-    class: "tiny-svg-size"
-  })) : createCommentVNode("v-if", true), _ctx.indeterminate ? (openBlock(), createBlock(_component_icon_halfselect, {
+    class: "tiny-svg-size icon-checked-sur"
+  })) : (openBlock(), createBlock(_component_icon_check, {
     key: 2,
-    class: "tiny-svg-size"
-  })) : createCommentVNode("v-if", true)]), _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
+    class: "tiny-svg-size icon-check"
+  }))]), _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
     key: 0,
@@ -119,0 +123,0 @@ class: "tiny-checkbox__original",

package.json

 {
   "name": "@opentiny/vue-checkbox",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "description": "",
@@ -9,4 +9,4 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-common": "~3.8.3",
-    "@opentiny/vue-renderless": "~3.8.3"
+    "@opentiny/vue-common": "~3.9.0",
+    "@opentiny/vue-renderless": "~3.9.0"
   },
@@ -13,0 +13,0 @@ "license": "MIT",

src/index.d.ts

@@ -89,2 +89,3 @@ declare const _default: import("@vue/runtime-core").DefineComponent<{
     disabled: boolean;
+    displayOnly: boolean;
     events: Record<string, any>;
@@ -95,4 +96,3 @@ border: boolean;
     validateEvent: boolean;
-    displayOnly: boolean;
 }>;
 export default _default;

No alert changes

Improved metrics

Total package byte prevSize

30982

increased by1.79%

Lines of code

747

increased by0.81%

Dependency changes

• + Added@opentiny/vue-common@3.9.0(transitive)

• + Added@opentiny/vue-locale@3.9.0(transitive)

• + Added@opentiny/vue-renderless@3.9.3(transitive)

• + Added@opentiny/vue-theme@3.9.4(transitive)

• + Added@opentiny/vue-theme-mobile@3.9.0(transitive)

• - Removed@opentiny/vue-common@3.8.3(transitive)

• - Removed@opentiny/vue-locale@3.8.3(transitive)

• - Removed@opentiny/vue-renderless@3.8.4(transitive)

• - Removed@opentiny/vue-theme@3.8.5(transitive)

• - Removed@opentiny/vue-theme-mobile@3.8.3(transitive)

• Updated@opentiny/vue-common@~3.9.0

• Updated@opentiny/vue-renderless@~3.9.0