@volverjs/ui-vue 0.0.1-beta.11

package/dist/components/VvSelect/VvSelect.es.js

@@ -0,0 +1,447 @@
+import { toRefs as K, computed as S, h as W, unref as v, defineComponent as q, openBlock as j, createElementBlock as C, normalizeClass as F, createElementVNode as B, toDisplayString as N, createCommentVNode as x, Fragment as R, renderList as X, createTextVNode as T, useSlots as Y, ref as E, watch as ee, withKeys as P, withDirectives as te, vModelText as re, createVNode as $, mergeProps as ne } from "vue";
+import { toReactive as se, useFocus as le, refDebounced as oe, onClickOutside as ae } from "@vueuse/core";
+import { v4 as H } from "uuid";
+const m = {
+  equals(t, r, e) {
+    return e ? this.resolveFieldData(t, e) === this.resolveFieldData(r, e) : this.deepEquals(t, r);
+  },
+  deepEquals(t, r) {
+    if (t === r)
+      return !0;
+    if (t && r && typeof t == "object" && typeof r == "object") {
+      const e = Array.isArray(t), u = Array.isArray(r);
+      let n, s, i;
+      if (e && u) {
+        if (s = t.length, s != r.length)
+          return !1;
+        for (n = s; n-- !== 0; )
+          if (!this.deepEquals(t[n], r[n]))
+            return !1;
+        return !0;
+      }
+      if (e != u)
+        return !1;
+      const p = t instanceof Date, o = r instanceof Date;
+      if (p != o)
+        return !1;
+      if (p && o)
+        return t.getTime() == r.getTime();
+      const g = t instanceof RegExp, b = r instanceof RegExp;
+      if (g != b)
+        return !1;
+      if (g && b)
+        return t.toString() == r.toString();
+      const l = Object.keys(t);
+      if (s = l.length, s !== Object.keys(r).length)
+        return !1;
+      for (n = s; n-- !== 0; )
+        if (!Object.prototype.hasOwnProperty.call(r, l[n]))
+          return !1;
+      for (n = s; n-- !== 0; )
+        if (i = l[n], !this.deepEquals(t[i], r[i]))
+          return !1;
+      return !0;
+    }
+    return t !== t && r !== r;
+  },
+  resolveFieldData(t, r) {
+    if (t && Object.keys(t).length && r) {
+      if (r.indexOf(".") === -1)
+        return t[r];
+      {
+        const e = r.split(".");
+        let u = t;
+        for (let n = 0, s = e.length; n < s; ++n) {
+          if (t == null)
+            return null;
+          u = u[e[n]];
+        }
+        return u;
+      }
+    } else
+      return null;
+  },
+  isFunction(t) {
+    return !!(t && t.constructor && t.call && t.apply);
+  },
+  findIndexInList(t, r) {
+    let e = -1;
+    if (r) {
+      for (let u = 0; u < r.length; u++)
+        if (this.equals(r[u], t)) {
+          e = u;
+          break;
+        }
+    }
+    return e;
+  },
+  contains(t, r) {
+    if (t != null && r && r.length) {
+      for (const e of r)
+        if (this.equals(t, e))
+          return !0;
+    }
+    return !1;
+  },
+  isEmpty(t) {
+    return t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0;
+  },
+  isNotEmpty(t) {
+    return !this.isEmpty(t);
+  },
+  pickBy(t, r) {
+    return Object.fromEntries(
+      Object.entries(t).filter(([e]) => r(e))
+    );
+  },
+  removeFromList(t, r) {
+    const e = this.findIndexInList(t, r);
+    return e > -1 ? r.filter((u, n) => n !== e) : r;
+  },
+  isString(t) {
+    return typeof t == "string" || t instanceof String;
+  },
+  propsToObject(t) {
+    return Object.keys(t).reduce((r, e) => {
+      var u, n, s, i, p;
+      return this.isFunction(t[e]) ? r[e] = t[e]() : Array.isArray(t[e]) ? r[e] = t[e][0]() : (u = t[e]) != null && u.type && (Array.isArray(t[e].type) ? r[e] = ((n = t[e]) == null ? void 0 : n.default) || ((s = t[e]) == null ? void 0 : s.type[0]()) : r[e] = ((i = t[e]) == null ? void 0 : i.default) || ((p = t[e]) == null ? void 0 : p.type())), r;
+    }, {});
+  },
+  filterArray(t, r, e) {
+    return t.filter((u) => r.some((n) => typeof n == "string" ? u[e] == n : this.equals(
+      u[e],
+      n[e]
+    )));
+  },
+  kebabCase(t) {
+    var r, e;
+    if (t)
+      return (e = (r = t.match(
+        /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+      )) == null ? void 0 : r.join("-")) == null ? void 0 : e.toLowerCase();
+  }
+}, ue = {
+  valid: Boolean,
+  validLabel: [String, Array]
+}, ie = {
+  error: Boolean,
+  errorLabel: [String, Array]
+}, ce = {
+  loading: Boolean,
+  loadingLabel: String
+}, I = {
+  disabled: Boolean
+}, de = {
+  readonly: Boolean
+}, M = {
+  modifiers: [String, Array]
+}, fe = {
+  hintLabel: { type: String, default: "" }
+}, pe = {
+  ...ue,
+  ...ie,
+  ...fe,
+  ...ce,
+  ...I,
+  ...de,
+  ...M,
+  modelValue: [String, Array, Object],
+  label: String,
+  labelNoResult: { type: String, default: "No results" },
+  placeholder: String,
+  searchable: Boolean,
+  searchPlaceholder: String,
+  debounceSearch: {
+    type: [Number, String],
+    default: 0
+  },
+  options: {
+    type: Array,
+    required: !0
+  },
+  useObject: Boolean,
+  multiple: Boolean,
+  maxValues: [Number, String],
+  separator: { type: String, default: ", " },
+  labelKey: { type: String, default: "label" },
+  valueKey: { type: String, default: "value" },
+  iconLeft: String,
+  iconRight: String
+};
+function D(t) {
+  return Array.isArray(t) ? t.filter((r) => m.isString(r)).reduce((r, e) => r.length > 0 ? r + `
+` + e : e, "") : t;
+}
+function ye(t, r) {
+  return {
+    name: "HintSlot",
+    props: {
+      params: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    setup(e) {
+      const u = K(t), {
+        error: n,
+        valid: s,
+        hint: i,
+        loading: p
+      } = r, {
+        hintLabel: o,
+        modelValue: g,
+        valid: b,
+        validLabel: l,
+        error: h,
+        errorLabel: a
+      } = u, d = m.resolveFieldData(u, "loading"), y = m.resolveFieldData(
+        u,
+        "loadingLabel"
+      ), V = S(() => h.value ? !!(h.value && n || (a == null ? void 0 : a.value) && Array.isArray(a.value) && a.value.length > 0 || (a == null ? void 0 : a.value) && m.isNotEmpty(a.value)) : !1), k = S(() => !!(o && o.value || i || s || l && l.value || V.value || (d == null ? void 0 : d.value) && p || (d == null ? void 0 : d.value) && (y == null ? void 0 : y.value))), _ = S(() => {
+        const O = se({
+          hintLabel: o,
+          modelValue: g,
+          valid: b,
+          validLabel: l,
+          error: h,
+          errorLabel: a,
+          loading: d,
+          loadingLabel: y,
+          ...e.params
+        });
+        return h != null && h.value ? (n == null ? void 0 : n(O)) || D(a == null ? void 0 : a.value) || (o == null ? void 0 : o.value) : b != null && b.value ? (s == null ? void 0 : s(O)) || D(l == null ? void 0 : l.value) || (o == null ? void 0 : o.value) : d != null && d.value ? (p == null ? void 0 : p(O)) || D(y == null ? void 0 : y.value) || (o == null ? void 0 : o.value) : (i == null ? void 0 : i(O)) || D(o == null ? void 0 : o.value) || (o == null ? void 0 : o.value);
+      });
+      return {
+        hasHint: k,
+        hintContent: _
+      };
+    },
+    render() {
+      if (this.hasHint)
+        return W(
+          "pre",
+          { style: { "white-space": "pre" } },
+          this.hintContent
+        );
+    }
+  };
+}
+function Z(t, r) {
+  const e = { [`${t}`]: !0 };
+  return {
+    bemCssClasses: S(() => Object.keys(r).reduce((n, s) => {
+      const i = v(r[s]) || !1;
+      if (!i)
+        return n;
+      if (s === "modifiers") {
+        const p = Array.isArray(i) ? i : [i];
+        return {
+          ...n,
+          ...p.reduce(
+            (o, g) => ({
+              ...o,
+              [`${t}--${m.kebabCase(
+                g
+              )}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...n,
+          [`${t}--${m.kebabCase(s)}`]: i
+        };
+    }, e) || {})
+  };
+}
+const me = {
+  ...I,
+  ...M,
+  modelValue: [String, Array, Object],
+  labelNoResult: { type: String, default: "No results" },
+  options: {
+    type: Array,
+    required: !0
+  },
+  useObject: Boolean,
+  multiple: Boolean,
+  maxValues: [Number, String],
+  labelKey: { type: String, default: "label" },
+  valueKey: { type: String, default: "value" }
+}, ge = { key: 0 }, he = ["for"], ve = ["id", "type", "value", "checked", "disabled"], be = /* @__PURE__ */ q({
+  __name: "VvDropdown",
+  props: me,
+  emits: ["update:modelValue"],
+  setup(t, { emit: r }) {
+    const e = t, u = H(), { modifiers: n, disabled: s } = K(e), { bemCssClasses: i } = Z("vv-dropdown", {
+      modifiers: n,
+      disabled: s
+    });
+    function p(l) {
+      return Array.isArray(e.modelValue) ? m.contains(l, e.modelValue) || m.contains(o(l), e.modelValue) : m.equals(l, e.modelValue) || m.equals(o(l), e.modelValue);
+    }
+    function o(l) {
+      return typeof l == "string" ? l : String(l[e.valueKey]);
+    }
+    function g(l) {
+      return typeof l == "string" ? l : l[e.labelKey];
+    }
+    function b(l) {
+      var y, V;
+      const h = l.target;
+      let a = h.value;
+      if (a = (e.useObject ? (y = e.options) == null ? void 0 : y.find(
+        (k) => k[e.valueKey] == a
+      ) : null) || a, e.multiple) {
+        if (typeof e.maxValues < "u" && e.maxValues >= 0 && ((V = e.modelValue) == null ? void 0 : V.length) >= e.maxValues && (Array.isArray(e.modelValue) && !m.contains(a, e.modelValue) || e.maxValues == 0)) {
+          h.checked = !1;
+          return;
+        }
+        Array.isArray(e.modelValue) ? a = m.contains(a, e.modelValue) ? m.removeFromList(a, e.modelValue) : [...e.modelValue, a] : a = [a];
+      }
+      r("update:modelValue", a);
+    }
+    return (l, h) => {
+      var a;
+      return j(), C("ul", {
+        class: F(v(i)),
+        role: "listbox"
+      }, [
+        (a = l.options) != null && a.length ? x("", !0) : (j(), C("li", ge, [
+          B("label", null, N(l.labelNoResult), 1)
+        ])),
+        (j(!0), C(R, null, X(l.options, (d, y) => {
+          var V;
+          return j(), C("li", { key: y }, [
+            B("label", {
+              for: `dropdown-${y}-${v(u)}`
+            }, [
+              B("input", {
+                id: `dropdown-${y}-${v(u)}`,
+                type: l.multiple ? "checkbox" : "radio",
+                value: o(d),
+                checked: p(d),
+                disabled: typeof d == "object" ? (V = d.disabled) != null ? V : v(s) : v(s),
+                onInput: b
+              }, null, 40, ve),
+              T(" " + N(g(d)), 1)
+            ], 8, he)
+          ]);
+        }), 128))
+      ], 2);
+    };
+  }
+}), Ve = ["id"], Ae = {
+  key: 0,
+  for: "select"
+}, Se = ["placeholder"], ke = /* @__PURE__ */ q({
+  __name: "VvSelect",
+  props: pe,
+  emits: ["update:modelValue", "change:search"],
+  setup(t, { emit: r }) {
+    const e = t, u = Y(), n = ye(e, u), s = E(), i = E();
+    le(i, { initialValue: !0 });
+    const p = H(), o = E(""), g = oe(
+      o,
+      Number(e.debounceSearch)
+    ), b = E(!1), {
+      modifiers: l,
+      disabled: h,
+      readonly: a,
+      loading: d,
+      iconLeft: y,
+      iconRight: V,
+      valid: k,
+      error: _
+    } = K(e);
+    ee(
+      g,
+      () => r("change:search", g.value)
+    );
+    const { bemCssClasses: O } = Z("vv-select", {
+      modifiers: l,
+      disabled: h,
+      loading: d,
+      readonly: a,
+      iconLeft: y,
+      iconRight: V,
+      valid: k,
+      invalid: _,
+      dirty: S(() => m.isNotEmpty(e.modelValue))
+    }), z = S(
+      () => {
+        var c;
+        return (c = e.options) == null ? void 0 : c.every((f) => typeof f == "object");
+      }
+    ), U = S(
+      () => e.searchable ? L.value : e.options
+    ), L = S(() => {
+      var c;
+      return (c = e.options) == null ? void 0 : c.filter((f) => typeof f == "string" ? f.toLowerCase().includes(g.value.toLowerCase().trim()) : f[e.labelKey].toLowerCase().includes(g.value.toLowerCase().trim()));
+    }), G = S(() => {
+      var f, A;
+      if (e.multiple && ((f = e.modelValue) == null ? void 0 : f.length) && Array.isArray(e.modelValue))
+        return z.value ? m.filterArray(
+          e.options,
+          e.modelValue,
+          e.valueKey
+        ).map((w) => w[e.labelKey]).join(e.separator) : e.modelValue.join(e.separator);
+      const c = e.useObject ? e.modelValue : (A = e.options) == null ? void 0 : A.find(
+        (w) => typeof w == "object" ? w[e.valueKey] == e.modelValue : w == e.modelValue
+      );
+      return typeof c == "object" ? c == null ? void 0 : c[e.labelKey] : c;
+    });
+    ae(s, () => {
+      s.value.open = !1;
+    });
+    function J(c) {
+      const f = c.target;
+      b.value = f.open;
+    }
+    function Q(c) {
+      s.value && !e.multiple && (s.value.open = !1), r("update:modelValue", c);
+    }
+    return (c, f) => (j(), C("div", {
+      id: v(p),
+      class: F(v(O))
+    }, [
+      c.label ? (j(), C("label", Ae, N(c.label), 1)) : x("", !0),
+      B("details", {
+        ref_key: "dropdown",
+        ref: s,
+        role: "list",
+        class: "vv-select__wrapper",
+        onClick: f[2] || (f[2] = (A) => v(h) || v(a) ? A.preventDefault() : null),
+        onKeyup: f[3] || (f[3] = P((A) => s.value.open = !1, ["esc"])),
+        onToggle: J
+      }, [
+        B("summary", {
+          class: "vv-select__input",
+          "aria-haspopup": "listbox",
+          onKeyup: f[1] || (f[1] = P((A) => c.searchable ? A.preventDefault() : null, ["space"]))
+        }, [
+          c.searchable && b.value ? te((j(), C("input", {
+            key: 0,
+            ref_key: "inputSearch",
+            ref: i,
+            "onUpdate:modelValue": f[0] || (f[0] = (A) => o.value = A),
+            placeholder: c.searchPlaceholder
+          }, null, 8, Se)), [
+            [re, o.value]
+          ]) : (j(), C(R, { key: 1 }, [
+            T(N(v(G) || c.placeholder), 1)
+          ], 64))
+        ], 32),
+        $(be, ne({
+          ...e,
+          options: v(U)
+        }, { "onUpdate:modelValue": Q }), null, 16)
+      ], 544),
+      $(v(n), { class: "vv-select__hint" })
+    ], 10, Ve));
+  }
+});
+export {
+  ke as default
+};

package/dist/components/VvSelect/VvSelect.umd.js

@@ -0,0 +1,2 @@
+(function(t,k){typeof exports=="object"&&typeof module<"u"?module.exports=k(require("vue"),require("@vueuse/core"),require("uuid")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core","uuid"],k):(t=typeof globalThis<"u"?globalThis:t||self,t.VvSelect=k(t.vue,t.core,t.uuid))})(this,function(t,k,N){"use strict";const g={equals(r,n,e){return e?this.resolveFieldData(r,e)===this.resolveFieldData(n,e):this.deepEquals(r,n)},deepEquals(r,n){if(r===n)return!0;if(r&&n&&typeof r=="object"&&typeof n=="object"){const e=Array.isArray(r),u=Array.isArray(n);let l,s,c;if(e&&u){if(s=r.length,s!=n.length)return!1;for(l=s;l--!==0;)if(!this.deepEquals(r[l],n[l]))return!1;return!0}if(e!=u)return!1;const m=r instanceof Date,a=n instanceof Date;if(m!=a)return!1;if(m&&a)return r.getTime()==n.getTime();const h=r instanceof RegExp,b=n instanceof RegExp;if(h!=b)return!1;if(h&&b)return r.toString()==n.toString();const o=Object.keys(r);if(s=o.length,s!==Object.keys(n).length)return!1;for(l=s;l--!==0;)if(!Object.prototype.hasOwnProperty.call(n,o[l]))return!1;for(l=s;l--!==0;)if(c=o[l],!this.deepEquals(r[c],n[c]))return!1;return!0}return r!==r&&n!==n},resolveFieldData(r,n){if(r&&Object.keys(r).length&&n){if(n.indexOf(".")===-1)return r[n];{const e=n.split(".");let u=r;for(let l=0,s=e.length;l<s;++l){if(r==null)return null;u=u[e[l]]}return u}}else return null},isFunction(r){return!!(r&&r.constructor&&r.call&&r.apply)},findIndexInList(r,n){let e=-1;if(n){for(let u=0;u<n.length;u++)if(this.equals(n[u],r)){e=u;break}}return e},contains(r,n){if(r!=null&&n&&n.length){for(const e of n)if(this.equals(r,e))return!0}return!1},isEmpty(r){return r==null||r===""||Array.isArray(r)&&r.length===0||!(r instanceof Date)&&typeof r=="object"&&Object.keys(r).length===0},isNotEmpty(r){return!this.isEmpty(r)},pickBy(r,n){return Object.fromEntries(Object.entries(r).filter(([e])=>n(e)))},removeFromList(r,n){const e=this.findIndexInList(r,n);return e>-1?n.filter((u,l)=>l!==e):n},isString(r){return typeof r=="string"||r instanceof String},propsToObject(r){return Object.keys(r).reduce((n,e)=>{var u,l,s,c,m;return this.isFunction(r[e])?n[e]=r[e]():Array.isArray(r[e])?n[e]=r[e][0]():(u=r[e])!=null&&u.type&&(Array.isArray(r[e].type)?n[e]=((l=r[e])==null?void 0:l.default)||((s=r[e])==null?void 0:s.type[0]()):n[e]=((c=r[e])==null?void 0:c.default)||((m=r[e])==null?void 0:m.type())),n},{})},filterArray(r,n,e){return r.filter(u=>n.some(l=>typeof l=="string"?u[e]==l:this.equals(u[e],l[e])))},kebabCase(r){var n,e;if(r)return(e=(n=r.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:n.join("-"))==null?void 0:e.toLowerCase()}},K={valid:Boolean,validLabel:[String,Array]},q={error:Boolean,errorLabel:[String,Array]},P={loading:Boolean,loadingLabel:String},w={disabled:Boolean},$={readonly:Boolean},D={modifiers:[String,Array]},x={...K,...q,...{hintLabel:{type:String,default:""}},...P,...w,...$,...D,modelValue:[String,Array,Object],label:String,labelNoResult:{type:String,default:"No results"},placeholder:String,searchable:Boolean,searchPlaceholder:String,debounceSearch:{type:[Number,String],default:0},options:{type:Array,required:!0},useObject:Boolean,multiple:Boolean,maxValues:[Number,String],separator:{type:String,default:", "},labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"},iconLeft:String,iconRight:String};function E(r){return Array.isArray(r)?r.filter(n=>g.isString(n)).reduce((n,e)=>n.length>0?n+`
+`+e:e,""):r}function F(r,n){return{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(e){const u=t.toRefs(r),{error:l,valid:s,hint:c,loading:m}=n,{hintLabel:a,modelValue:h,valid:b,validLabel:o,error:V,errorLabel:i}=u,f=g.resolveFieldData(u,"loading"),y=g.resolveFieldData(u,"loadingLabel"),S=t.computed(()=>V.value?!!(V.value&&l||(i==null?void 0:i.value)&&Array.isArray(i.value)&&i.value.length>0||(i==null?void 0:i.value)&&g.isNotEmpty(i.value)):!1),C=t.computed(()=>!!(a&&a.value||c||s||o&&o.value||S.value||(f==null?void 0:f.value)&&m||(f==null?void 0:f.value)&&(y==null?void 0:y.value))),O=t.computed(()=>{const B=k.toReactive({hintLabel:a,modelValue:h,valid:b,validLabel:o,error:V,errorLabel:i,loading:f,loadingLabel:y,...e.params});return V!=null&&V.value?(l==null?void 0:l(B))||E(i==null?void 0:i.value)||(a==null?void 0:a.value):b!=null&&b.value?(s==null?void 0:s(B))||E(o==null?void 0:o.value)||(a==null?void 0:a.value):f!=null&&f.value?(m==null?void 0:m(B))||E(y==null?void 0:y.value)||(a==null?void 0:a.value):(c==null?void 0:c(B))||E(a==null?void 0:a.value)||(a==null?void 0:a.value)});return{hasHint:C,hintContent:O}},render(){if(this.hasHint)return t.h("pre",{style:{"white-space":"pre"}},this.hintContent)}}}function _(r,n){const e={[`${r}`]:!0};return{bemCssClasses:t.computed(()=>Object.keys(n).reduce((l,s)=>{const c=t.unref(n[s])||!1;if(!c)return l;if(s==="modifiers"){const m=Array.isArray(c)?c:[c];return{...l,...m.reduce((a,h)=>({...a,[`${r}--${g.kebabCase(h)}`]:!0}),{})}}else return{...l,[`${r}--${g.kebabCase(s)}`]:c}},e)||{})}}const R={...w,...D,modelValue:[String,Array,Object],labelNoResult:{type:String,default:"No results"},options:{type:Array,required:!0},useObject:Boolean,multiple:Boolean,maxValues:[Number,String],labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"}},T={key:0},H=["for"],I=["id","type","value","checked","disabled"],z=t.defineComponent({__name:"VvDropdown",props:R,emits:["update:modelValue"],setup(r,{emit:n}){const e=r,u=N.v4(),{modifiers:l,disabled:s}=t.toRefs(e),{bemCssClasses:c}=_("vv-dropdown",{modifiers:l,disabled:s});function m(o){return Array.isArray(e.modelValue)?g.contains(o,e.modelValue)||g.contains(a(o),e.modelValue):g.equals(o,e.modelValue)||g.equals(a(o),e.modelValue)}function a(o){return typeof o=="string"?o:String(o[e.valueKey])}function h(o){return typeof o=="string"?o:o[e.labelKey]}function b(o){var y,S;const V=o.target;let i=V.value;if(i=(e.useObject?(y=e.options)==null?void 0:y.find(C=>C[e.valueKey]==i):null)||i,e.multiple){if(typeof e.maxValues<"u"&&e.maxValues>=0&&((S=e.modelValue)==null?void 0:S.length)>=e.maxValues&&(Array.isArray(e.modelValue)&&!g.contains(i,e.modelValue)||e.maxValues==0)){V.checked=!1;return}Array.isArray(e.modelValue)?i=g.contains(i,e.modelValue)?g.removeFromList(i,e.modelValue):[...e.modelValue,i]:i=[i]}n("update:modelValue",i)}return(o,V)=>{var i;return t.openBlock(),t.createElementBlock("ul",{class:t.normalizeClass(t.unref(c)),role:"listbox"},[(i=o.options)!=null&&i.length?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("li",T,[t.createElementVNode("label",null,t.toDisplayString(o.labelNoResult),1)])),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o.options,(f,y)=>{var S;return t.openBlock(),t.createElementBlock("li",{key:y},[t.createElementVNode("label",{for:`dropdown-${y}-${t.unref(u)}`},[t.createElementVNode("input",{id:`dropdown-${y}-${t.unref(u)}`,type:o.multiple?"checkbox":"radio",value:a(f),checked:m(f),disabled:typeof f=="object"&&(S=f.disabled)!=null?S:t.unref(s),onInput:b},null,40,I),t.createTextVNode(" "+t.toDisplayString(h(f)),1)],8,H)])}),128))],2)}}}),M=["id"],Z={key:0,for:"select"},U=["placeholder"];return t.defineComponent({__name:"VvSelect",props:x,emits:["update:modelValue","change:search"],setup(r,{emit:n}){const e=r,u=t.useSlots(),l=F(e,u),s=t.ref(),c=t.ref();k.useFocus(c,{initialValue:!0});const m=N.v4(),a=t.ref(""),h=k.refDebounced(a,Number(e.debounceSearch)),b=t.ref(!1),{modifiers:o,disabled:V,readonly:i,loading:f,iconLeft:y,iconRight:S,valid:C,error:O}=t.toRefs(e);t.watch(h,()=>n("change:search",h.value));const{bemCssClasses:B}=_("vv-select",{modifiers:o,disabled:V,loading:f,readonly:i,iconLeft:y,iconRight:S,valid:C,invalid:O,dirty:t.computed(()=>g.isNotEmpty(e.modelValue))}),L=t.computed(()=>{var d;return(d=e.options)==null?void 0:d.every(p=>typeof p=="object")}),G=t.computed(()=>e.searchable?J.value:e.options),J=t.computed(()=>{var d;return(d=e.options)==null?void 0:d.filter(p=>typeof p=="string"?p.toLowerCase().includes(h.value.toLowerCase().trim()):p[e.labelKey].toLowerCase().includes(h.value.toLowerCase().trim()))}),Q=t.computed(()=>{var p,A;if(e.multiple&&((p=e.modelValue)==null?void 0:p.length)&&Array.isArray(e.modelValue))return L.value?g.filterArray(e.options,e.modelValue,e.valueKey).map(j=>j[e.labelKey]).join(e.separator):e.modelValue.join(e.separator);const d=e.useObject?e.modelValue:(A=e.options)==null?void 0:A.find(j=>typeof j=="object"?j[e.valueKey]==e.modelValue:j==e.modelValue);return typeof d=="object"?d==null?void 0:d[e.labelKey]:d});k.onClickOutside(s,()=>{s.value.open=!1});function W(d){const p=d.target;b.value=p.open}function X(d){s.value&&!e.multiple&&(s.value.open=!1),n("update:modelValue",d)}return(d,p)=>(t.openBlock(),t.createElementBlock("div",{id:t.unref(m),class:t.normalizeClass(t.unref(B))},[d.label?(t.openBlock(),t.createElementBlock("label",Z,t.toDisplayString(d.label),1)):t.createCommentVNode("",!0),t.createElementVNode("details",{ref_key:"dropdown",ref:s,role:"list",class:"vv-select__wrapper",onClick:p[2]||(p[2]=A=>t.unref(V)||t.unref(i)?A.preventDefault():null),onKeyup:p[3]||(p[3]=t.withKeys(A=>s.value.open=!1,["esc"])),onToggle:W},[t.createElementVNode("summary",{class:"vv-select__input","aria-haspopup":"listbox",onKeyup:p[1]||(p[1]=t.withKeys(A=>d.searchable?A.preventDefault():null,["space"]))},[d.searchable&&b.value?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:0,ref_key:"inputSearch",ref:c,"onUpdate:modelValue":p[0]||(p[0]=A=>a.value=A),placeholder:d.searchPlaceholder},null,8,U)),[[t.vModelText,a.value]]):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createTextVNode(t.toDisplayString(t.unref(Q)||d.placeholder),1)],64))],32),t.createVNode(z,t.mergeProps({...e,options:t.unref(G)},{"onUpdate:modelValue":X}),null,16)],544),t.createVNode(t.unref(l),{class:"vv-select__hint"})],10,M))}})});