@opentiny/vue-switch - npm Package Compare versions

Comparing version 2.11.0 to 2.12.0

lib/index.js

@@ -84,2 +84,6 @@ function _extends() {
     default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
@@ -98,3 +102,3 @@ });
 });
-var version = "2.11.0";
+var version = "2.12.0";
 Switch.model = {
@@ -101,0 +105,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -58,34 +58,52 @@ import { renderless, api } from "@opentiny/vue-renderless/switch/vue";
 var classes = {
-  "switch-default": "sm:w-[2.375rem] sm:h-5 inline-block align-middle transition-all duration-200 ease-in-out border border-solid border-transparent relative cursor-pointer outline-0",
-  "switch-default-mobile": "w-[2.75rem] h-[1.625rem] rounded-2xl",
-  "switch-default-mini-mobile": "w-8 h-5 sm:w-[1.875rem] sm:h-4 rounded-2xl",
-  "before-switch-default": 'before:content-[""] before:rounded-xl before:bg-white before:absolute before:cursor-pointer before:transition-all before:duration-200 before:ease-in-out before:text-center before:left-px before:top-px',
-  "before-switch-default-mobile": "sm:before:w-4 sm:before:h-4 before:w-[1.375rem] before:h-[1.375rem]",
-  "before-switch-default-mini-mobile": "before:w-4 before:h-4 sm:before:w-3 sm:before:h-3",
-  "active-before-switch-default-mobile": "active:before:w-[1.625rem] sm:active:before:w-5",
-  "active-before-switch-default-mini-mobile": "active:before:w-4.5 sm:active:before:w-[0.9375rem]",
-  "switch-true": "border-color-brand bg-color-brand before:left-4.5 active:before:left-[0.875rem] sm:before:left-4.5",
-  "switch-true-mini": "border-color-brand bg-color-brand before:left-[0.8375rem] sm:before:left-[0.9375rem] active:before:left-[0.6875rem] sm:active:before:left-[0.75rem]",
-  "switch-false": "bg-color-icon-disabled",
-  "switch-true-disabled": "bg-color-brand-disabled before:left-4.5 sm:before:left-4.5 cursor-not-allowed before:cursor-not-allowed",
-  "switch-true-disabled-mini": "bg-color-brand-disabled before:left-[0.8125rem] sm:before:left-[0.9375rem] cursor-not-allowed before:cursor-not-allowed",
-  "switch-false-disabled": "bg-color-icon-primary cursor-not-allowed before:cursor-not-allowed opacity-10",
-  "switch-false-loading": "bg-color-border-separator cursor-not-allowed before:cursor-not-allowed",
-  "switch-inner-default": "absolute transition-all duration-200 ease-in-out text-color-bg-1 flex justify-center items-center m-auto",
-  "switch-inner-default-mobile": "w-6 h-6 sm:w-4.5 sm:h-4.5 ",
-  "switch-inner-default-mobile-mini": "w-4.5 h-4.5 sm:w-3.5 sm:h-3.5",
-  "switch-inner-true": "-left-px -top-px sm:top-0",
-  "switch-inner-false": "left-5 -top-px sm:left-4.5 sm:top-0",
-  "switch-inner-true-mini": "-left-px sm:left-0",
-  "switch-inner-false-mini": "left-[0.875rem] sm:left-4",
-  "switch-inner-true-icon": "left-4.5",
-  "switch-inner-true-icon-mini": "left-[0.8125rem] sm:left-[0.875rem]",
-  "switch-inner-false-icon": "",
-  "switch-inner-false-icon-mini": "-left-[0.02rem]",
-  "switch-inner-true-loading": "left-[1.0625rem]",
-  "switch-inner-true-loading-mini": "left-3 sm:left-3.5"
+  "switch-default": "inline-block align-middle transition-all duration-200 ease-in-out rounded-full relative outline-0",
+  "switch-small": "w-10 h-6 sm:w-9 sm:h-5",
+  "switch-mini": "w-8 h-5 sm:w-7 sm:h-4",
+  "switch-medium": "w-10 h-6",
+  "switch-handle-default": 'before:content-[""] before:rounded-full before:bg-color-bg-1 before:absolute before:cursor-pointer before:transition-all before:duration-200 before:ease-in-out before:text-center before:top-0.5',
+  "switch-handle-small": "before:w-5 before:h-5 before:sm:w-4 before:sm:h-4",
+  "switch-handle-mini": "before:w-4 before:h-4 before:sm:w-3 before:sm:h-3",
+  "switch-handle-medium": "before:w-5 before:h-5",
+  "switch-true-disabled": "bg-color-brand-disabled cursor-not-allowed",
+  "switch-false-disabled": "bg-color-border-separator cursor-not-allowed",
+  "switch-true-not-disabled": "before:[&_span:nth-of-type(1)]:shadow-xsm bg-color-brand cursor-pointer",
+  "switch-false-not-disabled": "before:[&_span:nth-of-type(1)]:shadow-xsm bg-color-icon-disabled cursor-pointer",
+  "switch-handle-false-small": "before:left-0.5",
+  "switch-handle-false-medium": "before:left-0.5",
+  "switch-handle-false-mini": "before:left-0.5",
+  "switch-handle-false-small-disabled": "before:left-0.5",
+  "switch-handle-false-medium-disabled": "before:left-0.5",
+  "switch-handle-false-mini-disabled": "before:left-0.5",
+  "switch-handle-true-small": "before:left-4.5",
+  "switch-handle-true-medium": "before:left-4.5",
+  "switch-handle-true-mini": "before:left-3.5",
+  "switch-handle-true-small-disabled": "before:left-4.5",
+  "switch-handle-true-medium-disabled": "before:left-4.5",
+  "switch-handle-true-mini-disabled": "before:left-3.5",
+  "switch-inner-default": "absolute transition-all duration-200 ease-in-out text-color-bg-1 flex items-center justify-center top-0.5",
+  "switch-inner-small": "w-5 h-5 sm:w-4 sm:h-4",
+  "switch-inner-mini": "w-4 h-4 sm:w-3 sm:h-3",
+  "switch-inner-medium": "w-5 h-5",
+  "switch-inner-true-word": "left-px",
+  "switch-inner-false-small-word": "left-4.5",
+  "switch-inner-false-medium-word": "left-4.5",
+  "switch-inner-false-mini-word": "left-3.5",
+  "switch-inner-false-icon": "left-0.5",
+  "switch-inner-true-small-icon": "left-4.5",
+  "switch-inner-true-medium-icon": "left-4.5",
+  "switch-inner-true-mini-icon": "left-3.5",
+  "switch-icon-small": "w-4 h-4 sm:w-3 sm:h-3",
+  "switch-icon-medium": "w-4 h-4",
+  "switch-icon-mini": "w-3 h-3 sm:w-2 sm:h-2",
+  "switch-icon-false-disabled": "fill-color-border-separator",
+  "switch-icon-false-default": "fill-color-icon-disabled",
+  "switch-icon-true-disabled": "fill-color-brand-disabled",
+  "switch-icon-true-default": "fill-color-brand",
+  "switch-loading-small": "w-5 h-5 sm:w-4 sm:h-4",
+  "switch-loading-medium": "w-5 h-5",
+  "switch-loading-mini": "w-4 h-4 sm:w-3 sm:h-3 "
 };
 var __vue2_script = defineComponent({
   emits: ["change", "update:modelValue"],
-  props: [].concat(props, ["modelValue", "trueValue", "falseValue", "disabled", "mini", "tabindex", "types"]),
+  props: [].concat(props, ["modelValue", "trueValue", "falseValue", "disabled", "size", "tabindex", "types"]),
   setup: function setup(props2, context) {
@@ -106,3 +124,3 @@ return _setup({
   return _c("span", {
-    class: _vm.m(_vm.gcls("switch-default"), _vm.gcls("before-switch-default"), _vm.mini ? [_vm.gcls("switch-default-mini-mobile"), _vm.gcls("before-switch-default-mini-mobile"), _vm.disabled || _vm.types === "loading" ? "" : _vm.gcls("active-before-switch-default-mini-mobile")] : [_vm.gcls("switch-default-mobile"), _vm.gcls("before-switch-default-mobile"), _vm.disabled || _vm.types === "loading" ? "" : _vm.gcls("active-before-switch-default-mobile")], _vm.state.currentValue === _vm.trueValue ? _vm.disabled || _vm.types === "loading" ? _vm.gcls("switch-true-disabled" + (_vm.mini ? "-mini" : "")) : _vm.gcls("switch-true" + (_vm.mini ? "-mini" : "")) : _vm.disabled ? _vm.gcls("switch-false-disabled") : _vm.types === "loading" ? _vm.gcls("switch-false-loading") : _vm.gcls("switch-false")),
+    class: _vm.m(_vm.gcls("switch-default"), _vm.gcls("switch-" + (_vm.size ? _vm.size : "small")), _vm.gcls((_vm.state.currentValue === _vm.trueValue ? "switch-true" : "switch-false") + (_vm.disabled || _vm.types === "loading" ? "-disabled" : "-not-disabled"))),
     attrs: {
@@ -121,6 +139,27 @@ "data-tag": "tiny-switch",
   }, [_c("span", {
-    class: _vm.m(_vm.gcls("switch-inner-default"), _vm.gcls("switch-inner-default-mobile" + (_vm.mini === true ? "-mini" : "")), _vm.state.currentValue === _vm.trueValue ? _vm.types === "icon" ? _vm.gcls("switch-inner-true-icon" + (_vm.mini === true ? "-mini" : "")) : _vm.types === "loading" ? _vm.gcls("switch-inner-true-loading" + (_vm.mini === true ? "-mini" : "")) : _vm.gcls("switch-inner-true" + (_vm.mini === true ? "-mini" : "")) : _vm.types === "icon" ? _vm.gcls("switch-inner-false-icon" + (_vm.mini === true ? "-mini" : "")) : _vm.types === "loading" ? "" : _vm.gcls("switch-inner-false" + (_vm.mini === true ? "-mini" : "")))
-  }, [_vm.types === "icon" ? _c("div", [_vm.state.currentValue === _vm.trueValue ? _vm._t("open", function() {
+    class: _vm.m(_vm.gcls("switch-handle-default"), _vm.gcls("switch-handle-" + (_vm.size ? _vm.size : "small")), _vm.gcls(_vm.state.currentValue === _vm.trueValue ? "switch-handle-true-" + (_vm.size ? _vm.size : "small") + (_vm.disabled || _vm.types === "loading" ? "-disabled" : "") : "switch-handle-false-" + (_vm.size ? _vm.size : "small") + (_vm.disabled || _vm.types === "loading" ? "-disabled" : ""))),
+    attrs: {
+      "data-tag": "tiny-switch-handle"
+    }
+  }), _c("span", {
+    class: _vm.m(_vm.gcls("switch-inner-default"), _vm.gcls("switch-inner-" + (_vm.size ? _vm.size : "small")), _vm.gcls(_vm.state.currentValue === _vm.trueValue ? _vm.types === "word" ? "switch-inner-true-word" : "switch-inner-true-" + (_vm.size ? _vm.size : "small") + "-icon" : _vm.types === "word" ? "switch-inner-false-" + (_vm.size ? _vm.size : "small") + "-word" : "switch-inner-false-icon")),
+    attrs: {
+      "data-tag": "tiny-switch-inner"
+    }
+  }, [_vm.types === "word" ? _c("div", {
+    staticClass: "sm:text-xs text-sm",
+    attrs: {
+      "data-tag": "tiny-switch-word"
+    }
+  }, [_vm.state.currentValue === _vm.trueValue ? _vm._t("open", function() {
+    return [_vm._v("A")];
+  }) : _vm._e(), _vm.state.currentValue === _vm.falseValue ? _vm._t("close", function() {
+    return [_vm._v("B")];
+  }) : _vm._e()], 2) : _vm._e(), _vm.types === "icon" ? _c("div", {
+    attrs: {
+      "data-tag": "tiny-switch-icon"
+    }
+  }, [_vm.state.currentValue === _vm.trueValue ? _vm._t("open", function() {
     return [_c("svg", {
-      class: [_vm.mini === true ? "w-3 h-3 sm:w-2.5 sm:h-2.5" : "w-4 h-4 sm:w-3 sm:h-3", _vm.disabled === true ? "fill-color-brand-disabled" : "fill-color-brand"],
+      class: [_vm.gcls("switch-icon-" + (_vm.size ? _vm.size : "small")), _vm.gcls("switch-icon-true-" + (_vm.disabled ? "disabled" : "default"))],
       attrs: {
@@ -136,3 +175,3 @@ "viewBox": "0 0 24 24"
     return [_c("svg", {
-      class: [_vm.mini === true ? "w-3 h-3 sm:w-2.5 sm:h-2.5" : "w-4 h-4 sm:w-3 sm:h-3", _vm.disabled === true ? "fill-color-icon-primary" : "fill-color-icon-disabled"],
+      class: [_vm.gcls("switch-icon-" + (_vm.size ? _vm.size : "small")), _vm.gcls("switch-icon-false-" + (_vm.disabled ? "disabled" : "default"))],
       attrs: {
@@ -146,13 +185,11 @@ "viewBox": "0 0 24 24"
     })])];
-  }) : _vm._e()], 2) : _vm._e(), _vm.types === "word" ? _c("div", {
-    class: ["sm:text-xs", _vm.mini === true ? "text-xs" : "text-sm"]
+  }) : _vm._e()], 2) : _vm._e(), _vm.types === "loading" ? _c("div", {
+    attrs: {
+      "data-tag": "tiny-switch-loading"
+    }
   }, [_vm.state.currentValue === _vm.trueValue ? _vm._t("open", function() {
-    return [_vm._v("A")];
-  }) : _vm._e(), _vm.state.currentValue === _vm.falseValue ? _vm._t("close", function() {
-    return [_vm._v("B")];
-  }) : _vm._e()], 2) : _vm._e(), _vm.types === "loading" ? _c("div", [_vm.state.currentValue === _vm.trueValue ? _vm._t("open", function() {
     return [_c("svg", {
-      class: ["fill-color-brand-disabled", _vm.mini === true ? "sm:w-3 sm:h-3 w-4 h-4" : "sm:w-4 sm:h-4 w-5 h-5"],
+      class: [_vm.gcls("switch-loading-" + (_vm.size ? _vm.size : "small")), _vm.gcls("switch-icon-true-disabled")],
       attrs: {
-        "viewBox": "0 0 50 50"
+        "viewBox": "0 0 48 48"
       }
@@ -177,5 +214,5 @@ }, [_c("path", {
     return [_c("svg", {
-      class: ["fill-color-none-hover", _vm.mini === true ? "sm:w-3 sm:h-3 w-4 h-4" : "sm:w-4 sm:h-4 w-5 h-5"],
+      class: [_vm.gcls("switch-loading-" + (_vm.size ? _vm.size : "small")), _vm.gcls("switch-icon-false-disabled")],
       attrs: {
-        "viewBox": "0 0 50 50"
+        "viewBox": "0 0 48 48"
       }
@@ -198,2 +235,4 @@ }, [_c("path", {
     })], 1)])];
+  }, {
+    "dataTag": "tiny-switch-close"
   }) : _vm._e()], 2) : _vm._e()])]);
@@ -200,0 +239,0 @@ };

lib/mobile.js

@@ -59,3 +59,3 @@ import { renderless, api } from "@opentiny/vue-renderless/switch/vue";
 var __vue2_script = defineComponent({
-  props: [].concat(props, ["modelValue", "trueValue", "falseValue", "disabled"]),
+  props: [].concat(props, ["modelValue", "trueValue", "falseValue", "disabled", "loading", "mini"]),
   setup: function setup(props2, context) {
@@ -77,3 +77,3 @@ return _setup({
     attrs: {
-      "disabled": true,
+      "disabled": _vm.disabled,
       "tabindex": "0"
@@ -89,3 +89,7 @@ },
     }
-  });
+  }, [_vm.loading ? _c("div", {
+    staticClass: "tiny-mobile-switch-loading"
+  }, [_c("div", {
+    staticClass: "tiny-mobile-switch-loading-inner"
+  })]) : _vm._e()]);
 };
@@ -92,0 +96,0 @@ var staticRenderFns = [];

package.json

 {
   "name": "@opentiny/vue-switch",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "",
@@ -10,4 +10,4 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-renderless": "~3.11.0",
-    "@opentiny/vue-common": "~2.11.0"
+    "@opentiny/vue-renderless": "~3.12.0",
+    "@opentiny/vue-common": "~2.12.0"
   },
@@ -14,0 +14,0 @@ "license": "MIT",

src/index.d.ts

@@ -56,2 +56,6 @@ export declare const $constants: {
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     tiny_mode: StringConstructor;
@@ -58,0 +62,0 @@ tiny_mode_root: BooleanConstructor;

src/token.d.ts

 export declare const classes: {
     'switch-default': string;
-    'switch-default-mobile': string;
-    'switch-default-mini-mobile': string;
-    'before-switch-default': string;
-    'before-switch-default-mobile': string;
-    'before-switch-default-mini-mobile': string;
-    'active-before-switch-default-mobile': string;
-    'active-before-switch-default-mini-mobile': string;
-    'switch-true': string;
-    'switch-true-mini': string;
-    'switch-false': string;
+    'switch-small': string;
+    'switch-mini': string;
+    'switch-medium': string;
+    'switch-handle-default': string;
+    'switch-handle-small': string;
+    'switch-handle-mini': string;
+    'switch-handle-medium': string;
     'switch-true-disabled': string;
-    'switch-true-disabled-mini': string;
     'switch-false-disabled': string;
-    'switch-false-loading': string;
+    'switch-true-not-disabled': string;
+    'switch-false-not-disabled': string;
+    'switch-handle-false-small': string;
+    'switch-handle-false-medium': string;
+    'switch-handle-false-mini': string;
+    'switch-handle-false-small-disabled': string;
+    'switch-handle-false-medium-disabled': string;
+    'switch-handle-false-mini-disabled': string;
+    'switch-handle-true-small': string;
+    'switch-handle-true-medium': string;
+    'switch-handle-true-mini': string;
+    'switch-handle-true-small-disabled': string;
+    'switch-handle-true-medium-disabled': string;
+    'switch-handle-true-mini-disabled': string;
     'switch-inner-default': string;
-    'switch-inner-default-mobile': string;
-    'switch-inner-default-mobile-mini': string;
-    'switch-inner-true': string;
-    'switch-inner-false': string;
-    'switch-inner-true-mini': string;
-    'switch-inner-false-mini': string;
-    'switch-inner-true-icon': string;
-    'switch-inner-true-icon-mini': string;
+    'switch-inner-small': string;
+    'switch-inner-mini': string;
+    'switch-inner-medium': string;
+    'switch-inner-true-word': string;
+    'switch-inner-false-small-word': string;
+    'switch-inner-false-medium-word': string;
+    'switch-inner-false-mini-word': string;
     'switch-inner-false-icon': string;
-    'switch-inner-false-icon-mini': string;
-    'switch-inner-true-loading': string;
-    'switch-inner-true-loading-mini': string;
+    'switch-inner-true-small-icon': string;
+    'switch-inner-true-medium-icon': string;
+    'switch-inner-true-mini-icon': string;
+    'switch-icon-small': string;
+    'switch-icon-medium': string;
+    'switch-icon-mini': string;
+    'switch-icon-false-disabled': string;
+    'switch-icon-false-default': string;
+    'switch-icon-true-disabled': string;
+    'switch-icon-true-default': string;
+    'switch-loading-small': string;
+    'switch-loading-medium': string;
+    'switch-loading-mini': string;
 };

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

26127

increased by4.81%

Lines of code

707

increased by10.47%

Dependency changes

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

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

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

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

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

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

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

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

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

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

• Updated@opentiny/vue-common@~2.12.0

• Updated@opentiny/vue-renderless@~3.12.0