wave-ui 3.0.4 → 3.1.0

package/dist/wave-ui.es.js

@@ -729,7 +729,7 @@ const j = class {
         if (!he) {
           he = !0;
           const i = Be("$waveui"), { config: o } = i, r = document.querySelector(o.on) || document.body;
-          r.classList.add("w-app"), o.colors[o.theme], o.theme === "auto" ? Ae(i) : i.switchTheme(o.theme, !0), Me(i), Te(r, a, i), t._context.mixins.find((d) => d.mounted && delete d.mounted);
+          r.classList.add("w-app"), o.theme === "auto" ? Ae(i) : i.switchTheme(o.theme, !0), Me(i), Te(r, a, i), t._context.mixins.find((d) => d.mounted && delete d.mounted);
         }
       }
     }), new j(t, l), te(j, q, !0);
@@ -3417,7 +3417,10 @@ const El = {
       }));
     },
     applySelectionOnItems(e) {
-      this.isMultipleSelect || this.listItems.forEach((t) => t._selected = !1), this.checkSelection(e).forEach((t) => this.listItems.find((l) => l._value === t)._selected = !0);
+      this.isMultipleSelect || this.listItems.forEach((t) => t._selected = !1), this.checkSelection(e).forEach((t) => {
+        const l = this.listItems.find((a) => a._value === t);
+        l && (l._selected = !0);
+      });
     }
   },
   created() {
@@ -4501,7 +4504,7 @@ const Ci = {
 }, Bi = /* @__PURE__ */ v(Ci, [["render", _i]]), Si = ["for"], $i = ["aria-expanded", "aria-owns", "aria-activedescendant"], Vi = {
   key: 1,
   class: "w-select__selection-slot"
-}, Ii = ["value", "id", "placeholder", "disabled", "required", "tabindex"], Ri = ["value", "name"], Li = ["for"], xi = ["for"];
+}, Ii = ["contenteditable", "id", "disabled", "tabindex", "innerHTML"], Ri = ["value", "name"], Li = ["for"], xi = ["for"];
 function Ti(e, t, l, a, n, i) {
   const o = $("w-icon"), r = $("w-list"), d = $("w-menu");
   return s(), g(I(e.formRegister ? "w-form-element" : "div"), _({ ref: "formEl" }, e.formRegister && { validators: e.validators, inputValue: i.selectionString, disabled: e.isDisabled, readonly: e.isReadonly }, {
@@ -4559,23 +4562,20 @@ function Ti(e, t, l, a, n, i) {
                 item: l.multiple ? e.inputValue : e.inputValue[0]
               })
             ])) : c("", !0),
-            w("input", {
-              class: "w-select__selection",
+            w("div", {
+              class: f(["w-select__selection", { "w-select__selection--placeholder": !e.$slots.selection && !i.selectionString && l.placeholder }]),
               ref: "selection-input",
-              type: "text",
-              value: e.$slots.selection ? "" : i.selectionString,
+              contenteditable: e.isDisabled || e.isReadonly ? "false" : "true",
               onFocus: t[1] || (t[1] = (y) => !e.isDisabled && !e.isReadonly && i.onFocus(y)),
               onBlur: t[2] || (t[2] = (...y) => i.onBlur && i.onBlur(...y)),
               onKeydown: t[3] || (t[3] = (y) => !e.isDisabled && !e.isReadonly && i.onKeydown(y)),
               id: `w-select--${e._.uid}`,
-              placeholder: !e.$slots.selection && l.placeholder || null,
               disabled: e.isDisabled || null,
               readonly: "",
               "aria-readonly": "true",
-              required: e.required || null,
               tabindex: e.tabindex || null,
-              autocomplete: "off"
-            }, null, 40, Ii),
+              innerHTML: e.$slots.selection ? "" : i.selectionString || l.placeholder
+            }, null, 42, Ii),
             (s(!0), u(C, null, x(e.inputValue.length ? e.inputValue : [{}], (y, S) => (s(), u("input", {
               key: S,
               type: "hidden",
@@ -4695,7 +4695,8 @@ const Oi = {
     noUnselect: { type: Boolean },
     menuProps: { type: Object },
     dark: { type: Boolean },
-    light: { type: Boolean }
+    light: { type: Boolean },
+    fitToContent: { type: Boolean }
   },
   emits: ["input", "update:modelValue", "focus", "blur", "item-click", "item-select", "click:inner-icon-left", "click:inner-icon-right"],
   data: () => ({
@@ -4732,6 +4733,7 @@ const Oi = {
         "w-select--dark": this.dark,
         "w-select--light": this.light,
         "w-select--disabled": this.isDisabled,
+        "w-select--fit-to-content": this.fitToContent,
         "w-select--readonly": this.isReadonly,
         [`w-select--${this.hasValue ? "filled" : "empty"}`]: !0,
         "w-select--focused": (this.isFocused || this.showMenu) && !this.isReadonly,
@@ -4758,13 +4760,13 @@ const Oi = {
   },
   methods: {
     onFocus(e) {
-      this.isFocused = !0, this.$emit("focus", e);
+      return this.isFocused = !0, this.$emit("focus", e), !1;
     },
     onBlur(e) {
       this.isFocused = !1, this.$emit("blur", e);
     },
     onKeydown(e) {
-      if ([13, 27, 38, 40].includes(e.keyCode) && e.preventDefault(), e.keyCode === 27)
+      if (e.preventDefault(), [13, 27, 38, 40].includes(e.keyCode) && e.preventDefault(), e.keyCode === 27)
         this.closeMenu();
       else if (e.keyCode === 13)
         this.openMenu();
@@ -4797,7 +4799,7 @@ const Oi = {
       this.$emit("update:modelValue", e), this.$emit("input", e);
     },
     checkSelection(e) {
-      console.log(e), e = Array.isArray(e) ? e : e !== void 0 ? [e] : [];
+      e = Array.isArray(e) ? e : e !== void 0 ? [e] : [];
       const t = this.selectItems.map((l) => l.value);
       return e.map((l) => {
         let a = l;
@@ -6885,6 +6887,7 @@ const Ga = {
     counts: { type: Boolean },
     itemIconKey: { type: String, default: "icon" },
     iconColor: { type: String },
+    itemLabelKey: { type: String, default: "label" },
     itemIconColorKey: { type: String, default: "iconColor" },
     itemRouteKey: { type: String, default: "route" },
     itemDisabledKey: { type: String, default: "disabled" },
@@ -6914,7 +6917,7 @@ const Ga = {
         this.currentDepthItems.push({
           originalItem: l,
           _uid: this.depth.toString() + (a + 1),
-          label: l.label,
+          label: l[this.itemLabelKey],
           children: !!l.children,
           branch: l.branch,
           route: l[this.itemRouteKey],