@varlet/ui 2.12.2 → 2.12.3

package/es/switch/Switch.mjs

@@ -6,15 +6,23 @@ import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 import Hover from '../hover/index.mjs';
 import { props } from './props.mjs';
 import VarFormDetails from '../form-details/index.mjs';
-import VarLoading from '../loading/index.mjs';
 import Ripple from '../ripple/index.mjs';
 var {
   n,
   classes
 } = createNamespace('switch');
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+var _hoisted_1 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("svg", {
+  viewBox: "25 25 50 50"
+}, [/*#__PURE__*/_createElementVNode("circle", {
+  cx: "50",
+  cy: "50",
+  r: "20",
+  fill: "none"
+})], -1 /* HOISTED */));
+var _hoisted_2 = [_hoisted_1];
 function __render__(_ctx, _cache) {
-  var _component_var_loading = _resolveComponent("var-loading");
   var _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   var _component_var_form_details = _resolveComponent("var-form-details");
   var _directive_ripple = _resolveDirective("ripple");
@@ -36,11 +44,14 @@ function __render__(_ctx, _cache) {
   }, [_createElementVNode("div", {
     style: _normalizeStyle(_ctx.styleComputed.handle),
     class: _normalizeClass(_ctx.classes(_ctx.n('handle'), _ctx.n('$-elevation--2'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle--active')], [_ctx.errorMessage, _ctx.n('handle--error')]))
-  }, [_ctx.loading ? (_openBlock(), _createBlock(_component_var_loading, {
+  }, [_ctx.loading ? (_openBlock(), _createElementBlock("span", {
     key: 0,
-    radius: _ctx.radius,
-    color: "currentColor"
-  }, null, 8 /* PROPS */, ["radius"])) : _createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */), _createVNode(_component_var_hover_overlay, {
+    class: _normalizeClass(_ctx.n('loading')),
+    style: _normalizeStyle({
+      width: _ctx.multiplySizeUnit(_ctx.radius, 2),
+      height: _ctx.multiplySizeUnit(_ctx.radius, 2)
+    })
+  }, _hoisted_2, 6 /* CLASS, STYLE */)) : _createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */), _createVNode(_component_var_hover_overlay, {
     hovering: _ctx.hovering
   }, null, 8 /* PROPS */, ["hovering"])], 6 /* CLASS, STYLE */)), [[_directive_ripple, {
     disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
@@ -51,7 +62,6 @@ function __render__(_ctx, _cache) {
 var __sfc__ = defineComponent({
   name: 'VarSwitch',
   components: {
-    VarLoading,
     VarFormDetails,
     VarHoverOverlay
   },
@@ -112,7 +122,7 @@ var __sfc__ = defineComponent({
         }
       };
     });
-    var radius = computed(() => multiplySizeUnit(props.size || 0, 0.4));
+    var radius = computed(() => multiplySizeUnit(props.size, 0.4));
     var switchActive = event => {
       var {
         onClick,
@@ -149,6 +159,7 @@ var __sfc__ = defineComponent({
     return {
       n,
       classes,
+      multiplySizeUnit,
       switchActive,
       hovering,
       hover,

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; 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;}
+: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; 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; }}