@opentiny/vue-checkbox - npm Package Compare versions

Comparing version 2.8.3 to 2.9.0

lib/index.js

@@ -88,3 +88,3 @@ function _extends() {
 });
-var version = "3.7.0";
+var version = "2.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 { iconHalfselect, iconCheckedSur, iconCheck } from "@opentiny/vue-icon";
 function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
@@ -60,9 +60,9 @@ var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
   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) {
@@ -82,3 +82,5 @@ return _setup({
   return _c("label", _vm._b({
-    staticClass: "inline-flex sm:items-center sm:text-xs text-sm sm:py-2 leading-5 cursor-pointer",
+    class: _vm.m("inline-flex sm:items-center text-sm leading-5 cursor-pointer", _vm.state.size === "medium" ? "sm:text-sm" : "sm:text-xs", {
+      "sm:py-2": _vm.state.vertical
+    }, _vm.customClass),
     attrs: {
@@ -90,3 +92,3 @@ "data-tag": "tiny-checkbox",
   }, "label", _vm.a(_vm.$attrs, ["class", "style", "onClick"], true), false), [_c("span", {
-    staticClass: "relative sm:h-4 sm:w-4",
+    class: ["relative", _vm.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:h-4 sm:w-4"],
     attrs: {
@@ -102,17 +104,17 @@ "role": _vm.indeterminate ? "checkbox" : false,
   }, [!_vm.state.isChecked && !_vm.indeterminate ? _c("icon-check", {
-    class: [_vm.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"],
+    class: [_vm.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"],
     attrs: {
       "data-tag": "icon-check",
-      "custom-class": "sm:w-4 sm:h-4 w-5 h-5 flex-1"
+      "custom-class": ["w-5 h-5 flex-1", _vm.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:w-4 sm:h-4"]
     }
-  }) : _vm._e(), _vm.state.isChecked ? _c("icon-checked-sur", {
-    class: _vm.m("flex-1 [&_path:nth-of-type(2)]:fill-white", _vm.state.isDisabled ? "[&_path:nth-of-type(1)]:fill-color-brand-disabled cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-brand"),
+  }) : _vm.indeterminate ? _c("icon-halfselect", {
     attrs: {
-      "data-tag": "icon-checked-sur",
-      "custom-class": "sm:w-4 sm:h-4 w-5 h-5"
+      "data-tag": "icon-halfselect",
+      "custom-class": _vm.m("w-5 h-5 flex-1 [&_path:nth-of-type(2)]:fill-color-icon-inverse", _vm.state.isDisabled ? "[&_path:nth-of-type(1)]:fill-color-brand-disabled cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-brand", _vm.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:w-4 sm:h-4")
     }
-  }) : _vm._e(), _vm.indeterminate ? _c("icon-halfselect", {
+  }) : _vm.state.isChecked ? _c("icon-checked-sur", {
+    class: _vm.m("flex-1 [&_path:nth-of-type(2)]:fill-color-icon-inverse", _vm.state.isDisabled ? "[&_path:nth-of-type(1)]:fill-color-brand-disabled cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-brand"),
     attrs: {
-      "data-tag": "icon-halfselect",
-      "custom-class": _vm.m("sm:w-4 sm:h-4 w-5 h-5 flex-1 [&_path:nth-of-type(2)]:fill-white", _vm.state.isDisabled ? "[&_path:nth-of-type(1)]:fill-color-brand-disabled cursor-not-allowed" : "[&_path:nth-of-type(1)]:fill-color-brand")
+      "data-tag": "icon-checked-sur",
+      "custom-class": ["w-5 h-5", _vm.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:w-4 sm:h-4"]
     }
@@ -126,3 +128,3 @@ }) : _vm._e()], 1), _vm.trueLabel || _vm.falseLabel ? _c("input", {
     }],
-    staticClass: "absolute inset-0 w-0 h-0 -z-10 opacity-0",
+    staticClass: "absolute left-0 right-0 top-0 bottom-0 w-0 h-0 -z-10 opacity-0",
     attrs: {
@@ -170,3 +172,3 @@ "type": "checkbox",
     }],
-    staticClass: "absolute inset-0 w-0 h-0 -z-10 opacity-0",
+    staticClass: "absolute left-0 right-0 top-0 bottom-0 w-0 h-0 -z-10 opacity-0",
     attrs: {
@@ -208,3 +210,3 @@ "type": "checkbox",
     ref: "label",
-    staticClass: "py-3 sm:py-0 pl-0 sm:pl-2 text-color-text-primary mr-5 flex-auto"
+    class: ["py-3 sm:py-0 pl-0 sm:pl-2 mr-5 flex-auto", _vm.state.isDisabled ? "cursor-not-allowed text-color-text-disabled" : "text-color-text-primary"]
   }, [_vm._t("default", function() {
@@ -211,0 +213,0 @@ return [_vm._v(_vm._s(_vm.text || _vm.label))];

lib/pc.js

@@ -61,3 +61,3 @@ import { renderless, api } from "@opentiny/vue-renderless/checkbox/vue";
   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: {
@@ -89,2 +89,6 @@ IconHalfselect: iconHalfselect(),
       "is-checked": _vm.state.isChecked
+    }, {
+      "is-group-display-only": _vm.state.isGroupDisplayOnly
+    }, {
+      "is-display-only": _vm.state.isDisplayOnly
     }],
@@ -112,9 +116,9 @@ attrs: {
     }
-  }, [!_vm.state.isChecked && !_vm.indeterminate ? _c("icon-check", {
-    staticClass: "tiny-svg-size"
-  }) : _vm._e(), _vm.state.isChecked ? _c("icon-checked-sur", {
-    staticClass: "tiny-svg-size"
-  }) : _vm._e(), _vm.indeterminate ? _c("icon-halfselect", {
-    staticClass: "tiny-svg-size"
-  }) : _vm._e()], 1), _vm.trueLabel || _vm.falseLabel ? _c("input", {
+  }, [_vm.indeterminate ? _c("icon-halfselect", {
+    staticClass: "tiny-svg-size icon-halfselect"
+  }) : _vm.state.isChecked ? _c("icon-checked-sur", {
+    staticClass: "tiny-svg-size icon-checked-sur"
+  }) : _c("icon-check", {
+    staticClass: "tiny-svg-size icon-check"
+  })], 1), _vm.trueLabel || _vm.falseLabel ? _c("input", {
     directives: [{
@@ -205,3 +209,3 @@ name: "model",
   })]), _vm.slots.default && _vm.slots.default() || _vm.text || _vm.label ? _c("span", {
-    staticClass: "tiny-checkbox__label"
+    staticClass: "tiny-checkbox__label tiny-checkbox-display-only"
   }, [_vm._t("default", function() {
@@ -208,0 +212,0 @@ return [_vm._v(_vm._s(_vm.text || _vm.label))];

package.json

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

src/index.d.ts

@@ -46,2 +46,3 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<() => import("vue").VNode> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
     disabled: boolean;
+    displayOnly: boolean;
     events: Record<string, any>;
@@ -52,3 +53,2 @@ border: boolean;
     validateEvent: boolean;
-    displayOnly: boolean;
 } & {
@@ -73,2 +73,3 @@ name?: string | undefined;
     disabled: boolean;
+    displayOnly: boolean;
     events: Record<string, any>;
@@ -79,3 +80,2 @@ border: boolean;
     validateEvent: boolean;
-    displayOnly: boolean;
 } & {
@@ -100,2 +100,3 @@ name?: string | undefined;
     disabled: boolean;
+    displayOnly: boolean;
     events: Record<string, any>;
@@ -106,3 +107,2 @@ border: boolean;
     validateEvent: boolean;
-    displayOnly: boolean;
 } & {
@@ -125,6 +125,6 @@ name?: string | undefined;
     _constants: Record<string, any>;
+    displayOnly: boolean;
     events: Record<string, any>;
     validateEvent: boolean;
-    displayOnly: boolean;
 }, true>);
 export default _default;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34392

increased by1.75%

Lines of code

943

increased by0.75%

Dependency changes

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

• + Added@opentiny/vue-locale@2.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@2.8.3(transitive)

• - Removed@opentiny/vue-locale@2.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@~2.9.0

• Updated@opentiny/vue-renderless@~3.9.0