wave-ui 2.34.0 → 2.35.0

package/dist/wave-ui.es.js

@@ -1502,8 +1502,8 @@ const _hoisted_4$9 = /* @__PURE__ */ createElementVNode("svg", {
 const _hoisted_5$8 = [
   _hoisted_4$9
 ];
-const _hoisted_6$5 = ["for"];
-const _hoisted_7$5 = ["for", "innerHTML"];
+const _hoisted_6$6 = ["for"];
+const _hoisted_7$6 = ["for", "innerHTML"];
 function render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister && !$options.wCheckboxes ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.isChecked, disabled: _ctx.isDisabled }, {
     valid: _ctx.valid,
@@ -1559,12 +1559,12 @@ function render$H(_ctx, _cache, $props, $setup, $data, $options) {
           for: `w-checkbox--${_ctx._.uid}`
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_6$5)) : $props.label ? (openBlock(), createElementBlock("label", {
+        ], 8, _hoisted_6$6)) : $props.label ? (openBlock(), createElementBlock("label", {
           key: 1,
           class: "w-checkbox__label w-form-el-shakable pl2",
           for: `w-checkbox--${_ctx._.uid}`,
           innerHTML: $props.label
-        }, null, 8, _hoisted_7$5)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_7$6)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -2634,16 +2634,15 @@ const _sfc_main$x = {
 };
 var wGrid = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", render$x]]);
 function render$w(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(resolveDynamicComponent($props.tag || "i"), mergeProps({
-    class: ["w-icon", $options.classes]
-  }, toHandlers(_ctx.$attrs), {
+  return openBlock(), createBlock(resolveDynamicComponent($props.tag || "i"), mergeProps({ class: "w-icon" }, toHandlers(_ctx.$attrs), {
+    class: $options.classes,
     role: "icon",
     "aria-hidden": "true",
-    style: $options.styles
+    style: $options.readIcon() && $options.styles
   }), {
     default: withCtx(() => [
-      $options.ligature ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        createTextVNode(toDisplayString($options.ligature.icon), 1)
+      $options.hasLigature ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createTextVNode(toDisplayString(_ctx.icon), 1)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 1
@@ -2676,14 +2675,12 @@ const _sfc_main$w = {
   },
   emits: [],
   data: () => ({
-    icon: ""
+    icon: "",
+    fontName: ""
   }),
   computed: {
-    ligature() {
-      if (!config.iconsLigature)
-        return false;
-      const [fontName, icon] = this.icon.split(" ");
-      return fontName === config.iconsLigature && { fontName, icon };
+    hasLigature() {
+      return config.iconsLigature === this.fontName;
     },
     forcedSize() {
       return this.size && (!isNaN(this.size) ? `${this.size}px` : this.size);
@@ -2693,7 +2690,8 @@ const _sfc_main$w = {
     },
     classes() {
       return {
-        [this.icon]: true,
+        [this.fontName]: true,
+        [!this.hasLigature && this.icon]: !this.hasLigature && this.icon,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -2707,19 +2705,20 @@ const _sfc_main$w = {
         "w-icon--rotate-90": this.rotate90a,
         "w-icon--rotate-135": this.rotate135a,
         "w-icon--flip-x": this.flipX,
-        "w-icon--flip-y": this.flipY,
-        [this.ligature && this.ligature.fontName]: this.ligature
+        "w-icon--flip-y": this.flipY
       };
     },
     styles() {
       return this.forcedSize && `font-size: ${this.forcedSize}`;
     }
   },
-  created() {
-    this.icon = this.$slots.default && this.$slots.default()[0].children;
-  },
-  updated() {
-    this.icon = this.$slots.default && this.$slots.default()[0].children;
+  methods: {
+    readIcon() {
+      const { default: slot } = this.$slots;
+      const [fontName = "", icon = ""] = typeof slot === "function" && slot()[0].children.trim().split(" ") || [];
+      this.fontName = fontName;
+      this.icon = icon;
+    }
   }
 };
 var wIcon = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", render$w]]);
@@ -2900,11 +2899,11 @@ const _hoisted_2$a = ["for"];
 const _hoisted_3$9 = ["for", "innerHTML"];
 const _hoisted_4$8 = ["id", "type", "name", "placeholder", "step", "min", "max", "minlength", "maxlength", "readonly", "aria-readonly", "disabled", "required", "tabindex"];
 const _hoisted_5$7 = ["id", "name", "multiple", "data-progress"];
-const _hoisted_6$4 = {
+const _hoisted_6$5 = {
   class: "w-input__no-file",
   key: "no-file"
 };
-const _hoisted_7$4 = /* @__PURE__ */ createTextVNode("No file");
+const _hoisted_7$5 = /* @__PURE__ */ createTextVNode("No file");
 const _hoisted_8$3 = ["for"];
 const _hoisted_9$3 = ["for", "innerHTML"];
 const _hoisted_10$3 = ["for"];
@@ -3007,10 +3006,10 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               for: `w-input--${_ctx._.uid}`
             }, {
               default: withCtx(() => [
-                !$data.inputFiles.length && $data.isFocused ? (openBlock(), createElementBlock("span", _hoisted_6$4, [
+                !$data.inputFiles.length && $data.isFocused ? (openBlock(), createElementBlock("span", _hoisted_6$5, [
                   renderSlot(_ctx.$slots, "no-file", {}, () => [
                     _ctx.$slots["no-file"] === void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      _hoisted_7$4
+                      _hoisted_7$5
                     ], 64)) : createCommentVNode("", true)
                   ])
                 ])) : createCommentVNode("", true),
@@ -4912,8 +4911,8 @@ const _hoisted_4$5 = {
   class: "w-select__selection-slot"
 };
 const _hoisted_5$5 = ["value", "id", "placeholder", "disabled", "required", "tabindex"];
-const _hoisted_6$3 = ["value", "name"];
-const _hoisted_7$3 = ["for"];
+const _hoisted_6$4 = ["value", "name"];
+const _hoisted_7$4 = ["for"];
 const _hoisted_8$2 = ["for", "innerHTML"];
 const _hoisted_9$2 = ["for"];
 const _hoisted_10$2 = ["for", "innerHTML"];
@@ -5004,7 +5003,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
                 type: "hidden",
                 value: val.value || "",
                 name: _ctx.inputName + ($props.multiple ? "[]" : "")
-              }, null, 8, _hoisted_6$3);
+              }, null, 8, _hoisted_6$4);
             }), 128)),
             $props.labelPosition === "inside" && $options.showLabelInside ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
               _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
@@ -5013,7 +5012,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
                 for: `w-select--${_ctx._.uid}`
               }, [
                 renderSlot(_ctx.$slots, "default")
-              ], 10, _hoisted_7$3)) : $props.label ? (openBlock(), createElementBlock("label", {
+              ], 10, _hoisted_7$4)) : $props.label ? (openBlock(), createElementBlock("label", {
                 key: 1,
                 class: normalizeClass(["w-select__label w-select__label--inside w-form-el-shakable", _ctx.isFocused && { [_ctx.valid === false ? "error" : $props.color]: $props.color || _ctx.valid === false }]),
                 for: `w-select--${_ctx._.uid}`,
@@ -5282,8 +5281,8 @@ const _hoisted_2$5 = ["for", "innerHTML"];
 const _hoisted_3$5 = { class: "w-slider__track-wrap" };
 const _hoisted_4$4 = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-readonly"];
 const _hoisted_5$4 = ["id", "name", "model-value", "disabled", "readonly", "aria-readonly"];
-const _hoisted_6$2 = ["for"];
-const _hoisted_7$2 = { key: 0 };
+const _hoisted_6$3 = ["for"];
+const _hoisted_7$3 = { key: 0 };
 const _hoisted_8$1 = {
   key: 0,
   class: "w-slider__step-labels"
@@ -5359,7 +5358,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               class: normalizeClass(["w-slider__thumb-label", $options.thumbClasses]),
               for: `button--${_ctx._.uid}`
             }, [
-              $props.thumbLabel === "droplet" ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
+              $props.thumbLabel === "droplet" ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
                 renderSlot(_ctx.$slots, "label", { value: _ctx.rangeValueScaled }, () => [
                   createTextVNode(toDisplayString(~~_ctx.rangeValueScaled), 1)
                 ])
@@ -5369,7 +5368,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [
                 createTextVNode(toDisplayString(~~_ctx.rangeValueScaled), 1)
               ])
-            ], 10, _hoisted_6$2)) : createCommentVNode("", true)
+            ], 10, _hoisted_6$3)) : createCommentVNode("", true)
           ], 4)
         ], 42, _hoisted_4$4),
         $props.stepLabels && $props.step ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
@@ -5630,8 +5629,16 @@ var wSteps = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", render$h]]);
 const _hoisted_1$7 = ["id", "name", "checked", "disabled", "readonly", "aria-readonly", "required", "tabindex", "aria-checked"];
 const _hoisted_2$4 = ["for"];
 const _hoisted_3$4 = ["for", "innerHTML"];
-const _hoisted_4$3 = ["for"];
-const _hoisted_5$3 = ["for", "innerHTML"];
+const _hoisted_4$3 = {
+  key: 0,
+  class: "w-switch__track"
+};
+const _hoisted_5$3 = {
+  key: 1,
+  class: "w-switch__thumb"
+};
+const _hoisted_6$2 = ["for"];
+const _hoisted_7$2 = ["for", "innerHTML"];
 function render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.isOn, disabled: _ctx.isDisabled, readonly: _ctx.isReadonly }, {
     valid: _ctx.valid,
@@ -5679,7 +5686,14 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.$refs.input.focus();
           _ctx.$refs.input.click();
         })
-      }, toHandlers(_ctx.$attrs), { class: $options.inputClasses }), null, 16),
+      }, toHandlers(_ctx.$attrs), { class: $options.inputClasses }), [
+        _ctx.$slots.track ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+          renderSlot(_ctx.$slots, "track")
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.thumb ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
+          renderSlot(_ctx.$slots, "thumb")
+        ])) : createCommentVNode("", true)
+      ], 16),
       $options.hasLabel && !$props.labelOnLeft ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
           key: 0,
@@ -5687,12 +5701,12 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
           for: `w-switch--${_ctx._.uid}`
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_4$3)) : $props.label ? (openBlock(), createElementBlock("label", {
+        ], 8, _hoisted_6$2)) : $props.label ? (openBlock(), createElementBlock("label", {
           key: 1,
           class: "w-switch__label w-form-el-shakable",
           for: `w-switch--${_ctx._.uid}`,
           innerHTML: $props.label
-        }, null, 8, _hoisted_5$3)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_7$2)) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ]),
     _: 3
@@ -5732,6 +5746,8 @@ const _sfc_main$g = {
         "w-switch--disabled": this.isDisabled,
         "w-switch--readonly": this.isReadonly,
         "w-switch--ripple": this.ripple.start,
+        "w-switch--custom-thumb": this.$slots.thumb,
+        "w-switch--custom-track": this.$slots.track,
         "w-switch--rippled": this.ripple.end
       };
     },