@varlet/ui 3.2.1 → 3.2.3

package/es/switch/Switch.mjs

@@ -38,14 +38,14 @@ function __render__(_ctx, _cache) {
   return _withDirectives((_openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.n())
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.variant, _ctx.n("--variant")]))
     },
     [
       _createElementVNode(
         "div",
         {
           ref: "switchRef",
-          class: _normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")])),
+          class: _normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")], [_ctx.isActive, _ctx.n("block--active")])),
           style: _normalizeStyle(_ctx.styleComputed.switch),
           onClick: _cache[2] || (_cache[2] = (...args) => _ctx.switchActive && _ctx.switchActive(...args))
         },
@@ -54,16 +54,14 @@ function __render__(_ctx, _cache) {
             "div",
             {
               style: _normalizeStyle(_ctx.styleComputed.track),
-              class: _normalizeClass(
-                _ctx.classes(_ctx.n("track"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("track--active")], [_ctx.errorMessage, _ctx.n("track--error")])
-              )
+              class: _normalizeClass(_ctx.classes(_ctx.n("track"), [_ctx.isActive, _ctx.n("track--active")], [_ctx.errorMessage && !_ctx.variant, _ctx.n("track--error")]))
             },
             null,
             6
             /* CLASS, STYLE */
           ),
           _withDirectives((_openBlock(), _createElementBlock("div", {
-            class: _normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("ripple--active")])),
+            class: _normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.isActive, _ctx.n("ripple--active")])),
             style: _normalizeStyle(_ctx.styleComputed.ripple),
             tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
             onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
@@ -77,8 +75,9 @@ function __render__(_ctx, _cache) {
                   _ctx.classes(
                     _ctx.n("handle"),
                     _ctx.n("$-elevation--2"),
-                    [_ctx.modelValue === _ctx.activeValue, _ctx.n("handle--active")],
-                    [_ctx.errorMessage, _ctx.n("handle--error")]
+                    [_ctx.isActive, _ctx.n("handle--active")],
+                    [_ctx.errorMessage && !_ctx.variant, _ctx.n("handle--error")],
+                    [_ctx.hovering, _ctx.n("handle--hover")]
                   )
                 )
               },
@@ -136,31 +135,33 @@ const __sfc__ = defineComponent({
     const { bindForm, form } = useForm();
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
     const { hovering, handleHovering } = useHoverOverlay();
+    const isActive = computed(() => props2.modelValue === props2.activeValue);
     const styleComputed = computed(() => {
-      const { size, modelValue, color, closeColor, loadingColor, activeValue } = props2;
+      const { size, color, closeColor, loadingColor, variant } = props2;
       return {
         handle: {
           width: multiplySizeUnit(size),
           height: multiplySizeUnit(size),
-          backgroundColor: modelValue === activeValue ? color : closeColor,
+          backgroundColor: isActive.value ? color : closeColor,
           color: loadingColor
         },
         ripple: {
-          left: modelValue === activeValue ? multiplySizeUnit(size, 0.5) : `-${multiplySizeUnit(size, 0.5)}`,
-          color: modelValue === activeValue ? color : closeColor || "currentColor",
+          left: isActive.value ? multiplySizeUnit(size, 0.5) : `-${multiplySizeUnit(size, variant ? 1 / 3 : 0.5)}`,
+          color: isActive.value ? color : closeColor || "currentColor",
           width: multiplySizeUnit(size, 2),
           height: multiplySizeUnit(size, 2)
         },
         track: {
-          height: multiplySizeUnit(size, 0.72),
-          width: multiplySizeUnit(size, 1.9),
+          width: multiplySizeUnit(size, variant ? 13 / 6 : 1.9),
+          height: multiplySizeUnit(size, variant ? 4 / 3 : 0.72),
           borderRadius: multiplySizeUnit(size, 2 / 3),
-          filter: modelValue === activeValue || (errorMessage == null ? void 0 : errorMessage.value) ? void 0 : "brightness(.6)",
-          backgroundColor: modelValue === activeValue ? color : closeColor
+          filter: isActive.value || (errorMessage == null ? void 0 : errorMessage.value) ? void 0 : `brightness(${variant ? 1 : 0.6})`,
+          backgroundColor: isActive.value ? color : closeColor,
+          borderWidth: variant && !isActive.value ? multiplySizeUnit(size, 1 / 12) : void 0
         },
         switch: {
-          height: multiplySizeUnit(size, 1.2),
-          width: multiplySizeUnit(size, 2)
+          width: multiplySizeUnit(size, variant ? 13 / 6 : 2),
+          height: multiplySizeUnit(size, variant ? 4 / 3 : 1.2)
         }
       };
     });
@@ -207,7 +208,6 @@ const __sfc__ = defineComponent({
         disabled,
         loading,
         readonly,
-        modelValue,
         activeValue,
         inactiveValue,
         lazyChange,
@@ -221,7 +221,7 @@ const __sfc__ = defineComponent({
       if (loading || readonly || (form == null ? void 0 : form.readonly.value)) {
         return;
       }
-      const newValue = modelValue === activeValue ? inactiveValue : activeValue;
+      const newValue = isActive.value ? inactiveValue : activeValue;
       if (lazyChange) {
         call(onBeforeChange, newValue, (value) => {
           call(updateModelValue, value);
@@ -244,6 +244,7 @@ const __sfc__ = defineComponent({
       resetValidation();
     }
     return {
+      isActive,
       switchRef,
       hovering,
       isFocusing,

package/es/switch/props.mjs

@@ -17,6 +17,7 @@ const props = {
   loadingColor: String,
   closeColor: String,
   size: [String, Number],
+  variant: Boolean,
   rules: Array,
   ripple: {
     type: Boolean,

package/es/switch/switch.css

@@ -1 +1 @@
-:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: #fff; --switch-handle-color: #fff; --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger); --switch-disabled-opacity: var(--opacity-disabled);}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center; height: 24px; width: 40px; transition: filter 0.25s;}.var-switch--disabled { filter: opacity(var(--switch-disabled-opacity)); cursor: not-allowed;}.var-switch__track { background-color: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(var(--switch-disabled-opacity)); height: 14.4px; width: 38px; border-radius: calc(20px * 2 / 3);}.var-switch__track--active { background-color: var(--switch-track-active-background);}.var-switch__track--error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; outline: none; transition: 0.3s var(--cubic-bezier); width: 40px; height: 40px; left: -10px;}.var-switch__ripple--active { left: 10px;}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s; width: 20px; height: 20px;}.var-switch__handle--active { background-color: var(--switch-handle-active-background);}.var-switch__handle--error { background-color: var(--switch-handle-error-background) !important;}.var-switch__loading { display: inline-block; width: 16px; height: 16px; animation: circle 1.8s linear infinite;}.var-switch__loading svg { display: block; width: 100%; height: 100%;}.var-switch__loading svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}
+:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: var(--color-on-primary); --switch-handle-color: var(--color-primary); --switch-handle-active-color: var(--color-on-primary); --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger); --switch-disabled-opacity: var(--opacity-disabled); --switch-variant-width: 52px; --switch-variant-height: 32px; --switch-variant-track-border-color: #888; --switch-variant-track-background: var(--color-surface-container-highest); --switch-variant-handle-width: 24px; --switch-variant-handle-height: 24px; --switch-variant-handle-color: var(--color-on-primary); --switch-variant-handle-active-color: var(--color-primary); --switch-variant-handle-background: #888; --switch-variant-handle-active-background: var(--color-on-primary);}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center; height: 24px; width: 40px; transition: filter 0.25s;}.var-switch--disabled { filter: opacity(var(--switch-disabled-opacity)); cursor: not-allowed;}.var-switch__track { background-color: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(var(--switch-disabled-opacity)); height: 14.4px; width: 38px; border-radius: calc(20px * 2 / 3);}.var-switch__track--active { background-color: var(--switch-track-active-background);}.var-switch__track--error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; outline: none; transition: 0.3s var(--cubic-bezier); width: 40px; height: 40px; left: -10px;}.var-switch__ripple--active { left: 10px;}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s; width: 20px; height: 20px; outline: none;}.var-switch__handle--active { background-color: var(--switch-handle-active-background); color: var(--switch-handle-active-color);}.var-switch__handle--error { background-color: var(--switch-handle-error-background) !important;}.var-switch--variant .var-switch__block { width: var(--switch-variant-width); height: var(--switch-variant-height);}.var-switch--variant .var-switch__block:active .var-switch__handle { transform: scale(1.16666667);}.var-switch--variant .var-switch__track { width: 100%; height: 100%; border-radius: calc(var(--switch-variant-height) / 2); background-color: var(--switch-variant-track-background); border: 2px solid var(--switch-variant-track-border-color); filter: none;}.var-switch--variant .var-switch__track--active { background-color: var(--switch-track-active-background); border: none;}.var-switch--variant .var-switch__ripple { left: -4px;}.var-switch--variant .var-switch__ripple--active { left: 16px;}.var-switch--variant .var-switch__handle { width: var(--switch-variant-handle-width); height: var(--switch-variant-handle-height); color: var(--switch-variant-handle-color); transform: scale(0.66666667); background-color: var(--switch-variant-handle-background); transition: transform 0.2s;}.var-switch--variant .var-switch__handle--active { color: var(--switch-variant-handle-active-color); background-color: var(--switch-variant-handle-active-background); transform: none;}.var-switch--variant .var-switch--disabled:active .var-switch__handle { transform: none;}.var-switch__loading { display: inline-block; width: 16px; height: 16px; animation: circle 1.8s linear infinite;}.var-switch__loading svg { display: block; width: 100%; height: 100%;}.var-switch__loading svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}

package/es/themes/dark/switch.mjs

@@ -4,10 +4,21 @@ var stdin_default = {
   "--switch-track-active-background": "var(--color-primary)",
   "--switch-track-error-background": "var(--color-danger)",
   "--switch-ripple-color": "var(--color-primary)",
-  "--switch-handle-color": "#fff",
+  "--switch-handle-color": "var(--color-on-primary)",
+  "--switch-handle-active-color": "var(--color-on-primary)",
   "--switch-handle-active-background": "var(--color-primary)",
   "--switch-handle-error-background": "var(--color-danger)",
-  "--switch-disabled-opacity": "var(--opacity-disabled)"
+  "--switch-disabled-opacity": "var(--opacity-disabled)",
+  "--switch-variant-width": "52px",
+  "--switch-variant-height": "32px",
+  "--switch-variant-track-background": "var(--color-surface-container-highest)",
+  "--switch-variant-handle-width": "24px",
+  "--switch-variant-handle-height": "24px",
+  "--switch-variant-track-border-color": "rgb(255, 255, 255, .7)",
+  "--switch-variant-handle-background": "rgb(255, 255, 255, .7)",
+  "--switch-variant-handle-color": "var(--color-primary)",
+  "--switch-variant-handle-active-color": "var(--color-primary)",
+  "--switch-variant-handle-active-background": "var(--color-on-primary)"
 };
 export {
   stdin_default as default

package/es/themes/index.mjs

@@ -1,16 +1,7 @@
 import dark from "./dark/index.mjs";
 import md3Light from "./md3-light/index.mjs";
 import md3Dark from "./md3-dark/index.mjs";
-function toViewport(theme, options = {}) {
-  const { viewportWidth = 375, viewportUnit = "vmin", unitPrecision = 6 } = options;
-  return Object.entries(theme).reduce((target, [key, value]) => {
-    target[key] = value.includes("px") ? value.replace(
-      /(\d+(\.\d+)?)px/g,
-      (_, p1) => `${Number((p1 / viewportWidth * 100).toFixed(unitPrecision))}${viewportUnit}`
-    ) : value;
-    return target;
-  }, {});
-}
+import { toViewport } from "./toViewport.mjs";
 const Themes = { dark, md3Light, md3Dark, toViewport };
 const _ThemesComponent = null;
 var stdin_default = Themes;

package/es/themes/md3-dark/switch.mjs

@@ -4,10 +4,21 @@ var stdin_default = {
   "--switch-track-active-background": "var(--color-primary)",
   "--switch-track-error-background": "var(--color-danger)",
   "--switch-ripple-color": "var(--color-primary)",
-  "--switch-handle-color": "var(--color-on-primary)",
+  "--switch-handle-color": "var(--color-primary)",
+  "--switch-handle-active-color": "var(--color-on-primary)",
   "--switch-handle-active-background": "var(--color-primary)",
   "--switch-handle-error-background": "var(--color-danger)",
-  "--switch-disabled-opacity": "var(--opacity-disabled)"
+  "--switch-disabled-opacity": "var(--opacity-disabled)",
+  "--switch-variant-width": "52px",
+  "--switch-variant-height": "32px",
+  "--switch-variant-track-background": "var(--color-surface-container-highest)",
+  "--switch-variant-handle-width": "24px",
+  "--switch-variant-handle-height": "24px",
+  "--switch-variant-track-border-color": "#938F99",
+  "--switch-variant-handle-color": "var(--color-on-primary)",
+  "--switch-variant-handle-active-color": "var(--color-primary)",
+  "--switch-variant-handle-background": "#938F99",
+  "--switch-variant-handle-active-background": "var(--color-on-primary)"
 };
 export {
   stdin_default as default

package/es/themes/md3-light/switch.mjs

@@ -4,10 +4,21 @@ var stdin_default = {
   "--switch-track-active-background": "var(--color-primary)",
   "--switch-track-error-background": "var(--color-danger)",
   "--switch-ripple-color": "var(--color-primary)",
-  "--switch-handle-color": "#fff",
+  "--switch-handle-color": "var(--color-primary)",
+  "--switch-handle-active-color": "var(--color-on-primary)",
   "--switch-handle-active-background": "var(--color-primary)",
   "--switch-handle-error-background": "var(--color-danger)",
-  "--switch-disabled-opacity": "var(--opacity-disabled)"
+  "--switch-disabled-opacity": "var(--opacity-disabled)",
+  "--switch-variant-width": "52px",
+  "--switch-variant-height": "32px",
+  "--switch-variant-track-background": "var(--color-surface-container-highest)",
+  "--switch-variant-handle-width": "24px",
+  "--switch-variant-handle-height": "24px",
+  "--switch-variant-track-border-color": "#79747E",
+  "--switch-variant-handle-color": "var(--color-on-primary)",
+  "--switch-variant-handle-active-color": "var(--color-primary)",
+  "--switch-variant-handle-background": "#79747E",
+  "--switch-variant-handle-active-background": "var(--color-on-primary)"
 };
 export {
   stdin_default as default

package/es/themes/toViewport.d.ts

@@ -0,0 +1,3 @@
+import { Themes } from '../../types'
+
+declare const toViewport: Themes['toViewport']

package/es/themes/toViewport.mjs

@@ -0,0 +1,13 @@
+function toViewport(theme, options = {}) {
+  const { viewportWidth = 375, viewportUnit = "vmin", unitPrecision = 6 } = options;
+  return Object.entries(theme).reduce((target, [key, value]) => {
+    target[key] = value.includes("px") ? value.replace(
+      /(\d+(\.\d+)?)px/g,
+      (_, p1) => `${Number((p1 / viewportWidth * 100).toFixed(unitPrecision))}${viewportUnit}`
+    ) : value;
+    return target;
+  }, {});
+}
+export {
+  toViewport
+};