@volverjs/ui-vue 0.0.3-beta.4 → 0.0.3

package/dist/components/VvButton/VvButton.es.js

@@ -1,135 +1,252 @@
-import { defineComponent as I, unref as d, openBlock as g, createBlock as P, mergeProps as A, createCommentVNode as w, resolveDynamicComponent as E, withCtx as G, renderSlot as k, createElementBlock as O, toDisplayString as F, Fragment as j, createTextVNode as q } from "vue";
-import { nanoid as U } from "nanoid";
-import { iconExists as $, Icon as z, addIcon as H } from "@iconify/vue";
-const M = "ds", J = {
+import { defineComponent as E, unref as c, openBlock as b, createBlock as B, mergeProps as C, createCommentVNode as I, resolveDynamicComponent as Q, withCtx as T, renderSlot as w, createElementBlock as L, toDisplayString as F, Fragment as X, createTextVNode as Z } from "vue";
+import { iconExists as j, Icon as ee, addIcon as te } from "@iconify/vue";
+const oe = {
+  /**
+   * Color
+   */
   color: String,
+  /**
+   * Width
+   */
   width: {
     type: [String, Number]
   },
+  /**
+   * Height
+   */
   height: {
     type: [String, Number]
   },
+  /**
+   * Icon name
+   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   name: {
     type: String,
     required: !0
   },
+  /**
+   * By default 'vv'
+   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   provider: {
     type: String
   },
+  /**
+   * The name of icon set.
+   * Icon default options prefix: simple | normal | detailed
+   */
   prefix: {
     type: String,
     default: "normal"
   },
+  /**
+   * Url remote SVG icon
+   */
   src: String,
+  /**
+   * Horizontal flip
+   */
   horizontalFlip: Boolean,
+  /**
+   * Vertical flip
+   */
   verticalFlip: Boolean,
+  /**
+   * String alternative to "horizontalFlip" and "verticalFlip".
+   * Example: https://docs.iconify.design/icon-components/vue/transform.html
+   */
   flip: String,
+  /**
+   * Icon render mode
+   * 'style' = 'bg' or 'mask', depending on icon content
+   * 'bg' = span with style using `background`
+   * 'mask' = span with style using `mask`
+   * 'svg' = svg
+   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+   */
   mode: String,
+  /**
+   * Toggles inline or block mode
+   * Example https://docs.iconify.design/icon-components/vue/inline.html
+   */
   inline: Boolean,
+  /**
+   * rotates icon
+   * Example https://docs.iconify.design/icon-components/vue/transform.html
+   */
   rotate: [Number, String],
+  /**
+   * A callback that is called when icon data has been loaded
+   */
   onLoad: Function,
+  /**
+   * SVG icon string
+   */
   svg: String,
+  /**
+   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+   * @values string | Array<string>
+   */
   modifiers: {
     type: [String, Array]
   }
-}, X = {
+}, re = {
   name: "VvIcon"
-}, B = /* @__PURE__ */ I({
-  ...X,
-  props: J,
-  setup(t) {
-    const r = t, o = ref(!0), { modifiers: m } = toRefs(r), i = inject(M), { bemCssClasses: u } = useBemModifiers("vv-icon", {
-      modifiers: m
-    }), f = computed(() => r.provider || (i == null ? void 0 : i.provider)), b = computed(() => {
-      const e = r.name ?? "", n = `@${f.value}:${r.prefix}:${r.name}`;
-      return $(e) ? e : $(n) ? n : (i == null ? void 0 : i.iconsCollections.find((c) => {
-        const p = `@${f.value}:${c.prefix}:${e}`;
-        if ($(p))
-          return p;
-      })) || e;
+}, q = /* @__PURE__ */ E({
+  ...re,
+  props: oe,
+  setup(e) {
+    const l = e, s = ref(!0), n = useVolver(), { modifiers: d } = toRefs(l), k = useBemModifiers("vv-icon", d), m = computed(() => l.provider || (n == null ? void 0 : n.provider)), _ = computed(() => {
+      const t = l.name ?? "", o = `@${m.value}:${l.prefix}:${l.name}`;
+      return j(t) ? t : j(o) ? o : (n == null ? void 0 : n.iconsCollections.find(
+        (u) => {
+          const g = `@${m.value}:${u.prefix}:${t}`;
+          if (j(g))
+            return g;
+        }
+      )) || t;
     });
-    function a(e) {
-      let n = null;
+    function y(t) {
+      let o = null;
       if (typeof window > "u") {
-        const { JSDOM: y } = require("jsdom");
-        n = new y().window;
+        const { JSDOM: h } = require("jsdom");
+        o = new h().window;
       }
-      return (n ? new n.DOMParser() : new window.DOMParser()).parseFromString(e, "text/html").querySelector("svg");
+      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "text/html").querySelector("svg");
     }
-    function s(e) {
-      const n = a(e), c = (n == null ? void 0 : n.innerHTML.trim()) || "";
-      n && c && H(`@${f.value}:${r.prefix}:${r.name}`, {
-        body: c,
-        height: n.viewBox.baseVal.height,
-        width: n.viewBox.baseVal.width
+    function a(t) {
+      const o = y(t), u = (o == null ? void 0 : o.innerHTML.trim()) || "";
+      o && u && te(`@${m.value}:${l.prefix}:${l.name}`, {
+        body: u,
+        // Set height and width from svg content
+        height: o.viewBox.baseVal.height,
+        width: o.viewBox.baseVal.width
       });
     }
-    return i && (r.src && !$(`@${f.value}:${r.prefix}:${r.name}`) ? (o.value = !1, i.fetchIcon(r.src).then((e) => {
-      e && (s(e), o.value = !0);
-    }).catch((e) => {
-      throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
-    })) : r.svg && s(r.svg)), (e, n) => d(o) ? (g(), P(d(z), A({
+    return n && (l.src && !j(`@${m.value}:${l.prefix}:${l.name}`) ? (s.value = !1, n.fetchIcon(l.src).then((t) => {
+      t && (a(t), s.value = !0);
+    }).catch((t) => {
+      throw new Error(`During fetch icon: ${t == null ? void 0 : t.message}`);
+    })) : l.svg && a(l.svg)), (t, o) => c(s) ? (b(), B(c(ee), C({
       key: 0,
-      class: d(u)
+      class: c(k)
     }, {
-      inline: e.inline,
-      width: e.width,
-      height: e.height,
-      horizontalFlip: e.horizontalFlip,
-      verticalFlip: e.verticalFlip,
-      flip: e.flip,
-      rotate: e.rotate,
-      color: e.color,
-      onLoad: e.onLoad,
-      icon: d(b)
-    }), null, 16, ["class"])) : w("", !0);
+      inline: t.inline,
+      width: t.width,
+      height: t.height,
+      horizontalFlip: t.horizontalFlip,
+      verticalFlip: t.verticalFlip,
+      flip: t.flip,
+      rotate: t.rotate,
+      color: t.color,
+      onLoad: t.onLoad,
+      icon: c(_)
+    }), null, 16, ["class"])) : I("", !0);
   }
-}), x = {
+});
+var p = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(p || {}), G = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(G || {}), M = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(M || {});
+const ne = Symbol.for("buttonGroup"), ae = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, K = {
+}, le = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, Q = {
+};
+M.before;
+const se = {
+  /**
+   * If true the input will be unselectable
+   */
   unselectable: { type: Boolean, default: !0 }
-}, W = "VV_BUTTON_GROUP";
-var S = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(S || {}), D = /* @__PURE__ */ ((t) => (t.button = "button", t.submit = "submit", t.reset = "reset", t))(D || {}), v = /* @__PURE__ */ ((t) => (t.nuxtLink = "nuxt-link", t.routerLink = "router-link", t.a = "a", t.button = "button", t))(v || {}), N = /* @__PURE__ */ ((t) => (t._blank = "_blank", t._self = "_self", t._parent = "_parent", t._top = "_top", t))(N || {});
-const Y = ["update:modelValue"], Z = {
-  ...K,
-  ...x,
-  ...Q,
-  icon: {
-    type: [String, Object],
-    default: ""
-  },
+}, ie = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+p.bottom;
+var R = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(R || {}), v = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(v || {}), z = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(z || {});
+const ue = ["update:modelValue"], ce = {
+  ...ie,
+  ...le,
+  ...ae,
+  ...se,
+  /**
+   * Button icon
+   */
+  icon: [String, Object],
+  /**
+   * Button icon position
+   */
   iconPosition: {
     type: String,
-    default: "left",
-    validator: (t) => t in S
+    default: p.left,
+    validator: (e) => Object.values(p).includes(e)
   },
+  /**
+   * Button label
+   */
   label: [String, Number],
+  /**
+   * Loading status
+   */
   loading: Boolean,
+  /**
+   * Loading icon
+   */
   loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  /**
+   * Loading label
+   */
   loadingLabel: {
     type: String,
     default: "Loading..."
   },
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
   to: {
     type: [String, Object]
   },
+  /**
+   * Link href
+   */
   href: String,
+  /**
+   * Link target
+   */
   target: {
     type: String,
-    validator: (t) => t in N
+    validator: (e) => Object.values(z).includes(e)
   },
   active: Boolean,
+  /**
+   * Button pressed mode
+   */
   pressed: Boolean,
+  /**
+   * Link rel
+   */
   rel: {
     type: String,
     default: "noopener noreferrer"
   },
+  /**
+   * Button type
+   */
   type: {
     type: String,
     default: "button",
-    validator: (t) => t in D
+    validator: (e) => Object.values(R).includes(e)
   },
   toggle: {
     type: Boolean,
@@ -137,167 +254,191 @@ const Y = ["update:modelValue"], Z = {
   },
   modelValue: String
 };
-function T(t, r) {
-  var _;
-  const { group: o, isInGroup: m, getGroupOrLocalRef: i } = useInjectedGroupState(W), {
-    iconPosition: u,
-    icon: f,
-    label: b,
+function de(e, l) {
+  var S;
+  const { group: s, isInGroup: n, getGroupOrLocalRef: d } = useInjectedGroupState(ne), {
+    id: k,
+    iconPosition: m,
+    icon: _,
+    label: y,
     pressed: a,
-    modifiers: s
-  } = toRefs(t), e = i("modelValue", t, r), n = i("disabled", t), c = i("toggle", t), p = i(
+    modifiers: t
+  } = toRefs(e), o = d("modelValue", e, l), u = d("disabled", e), g = d("toggle", e), O = d(
     "unselectable",
-    t
-  ), h = ((_ = o == null ? void 0 : o.value) == null ? void 0 : _.multiple) ?? ref(!1), y = computed(() => {
-    var V;
-    const L = s != null && s.value ? Array.isArray(s.value) ? s.value : [s.value] : [], C = (V = o == null ? void 0 : o.value.itemModifiers) != null && V.value ? Array.isArray(o.value.itemModifiers.value) ? o.value.itemModifiers.value : [o.value.itemModifiers.value] : [];
-    return [...L, ...C];
+    e
+  ), h = ((S = s == null ? void 0 : s.value) == null ? void 0 : S.multiple) ?? ref(!1), f = computed(() => {
+    var i;
+    const $ = t != null && t.value ? Array.isArray(t.value) ? t.value : [t.value] : [], V = (i = s == null ? void 0 : s.value.itemModifiers) != null && i.value ? Array.isArray(s.value.itemModifiers.value) ? s.value.itemModifiers.value : [s.value.itemModifiers.value] : [];
+    return [...$, ...V];
   });
   return {
-    group: o,
-    isInGroup: m,
-    modelValue: e,
-    disabled: n,
-    toggle: c,
-    unselectable: p,
+    // group props
+    group: s,
+    isInGroup: n,
+    modelValue: o,
+    disabled: u,
+    toggle: g,
+    unselectable: O,
     multiple: h,
-    modifiers: y,
+    // local props
+    id: k,
+    modifiers: f,
     pressed: a,
-    iconPosition: u,
-    icon: f,
-    label: b
+    iconPosition: m,
+    icon: _,
+    label: y
   };
 }
-const ee = {
+const fe = {
   key: 1,
   class: "vv-button__label"
-}, te = {
+}, ve = {
   key: 1,
   class: "vv-button__label"
-}, oe = {
+}, pe = {
   name: "VvButton"
-}, ie = /* @__PURE__ */ I({
-  ...oe,
-  props: Z,
-  emits: Y,
-  setup(t, { emit: r }) {
-    const o = t, m = useAttrs(), i = useSlots(), u = (m == null ? void 0 : m.name) || U(), {
-      modifiers: f,
-      iconPosition: b,
+}, be = /* @__PURE__ */ E({
+  ...pe,
+  props: ce,
+  emits: ue,
+  setup(e, { expose: l, emit: s }) {
+    const n = e, d = useAttrs(), k = useSlots(), {
+      id: m,
+      modifiers: _,
+      iconPosition: y,
       icon: a,
-      label: s,
-      modelValue: e,
-      disabled: n,
-      toggle: c,
-      unselectable: p
-    } = T(o, r), h = inject(M), y = computed(() => {
+      label: t,
+      modelValue: o,
+      disabled: u,
+      toggle: g,
+      unselectable: O
+    } = de(n, s), h = useUniqueId(m), f = computed(() => (d == null ? void 0 : d.name) || h.value), S = useVolver(), $ = ref(null);
+    l({ $el: $ });
+    const {
+      reference: V,
+      bus: i,
+      aria: P
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => $.value,
+      (r) => {
+        V && (V.value = r);
+      }
+    );
+    const { role: U } = useInjectedDropdownAction(), N = computed(() => {
       switch (!0) {
-        case n.value:
+        case u.value:
           return v.button;
-        case o.to !== void 0:
-          return h != null && h.nuxt ? v.nuxtLink : v.routerLink;
-        case o.href !== void 0:
+        case n.to !== void 0:
+          return S != null && S.nuxt ? v.nuxtLink : v.routerLink;
+        case n.href !== void 0:
           return v.a;
         default:
           return v.button;
       }
-    }), _ = computed(() => c.value ? Array.isArray(e.value) ? contains(u, e.value) : equals(u, e.value) : o.pressed), { bemCssClasses: L } = useBemModifiers("vv-button", {
-      modifiers: f,
-      active: o.active,
-      pressed: _,
-      disabled: n,
-      reverse: computed(
-        () => [S.right, S.bottom].includes(
-          b.value
-        )
-      ),
-      column: computed(
-        () => [S.top, S.bottom].includes(
-          b.value
-        )
-      ),
-      iconOnly: computed(
-        () => (a == null ? void 0 : a.value) && !(s != null && s.value) && !i.default
-      )
-    }), C = computed(
+    }), A = computed(() => g.value ? Array.isArray(o.value) ? contains(f.value, o.value) : equals(f.value, o.value) : n.pressed), J = useBemModifiers(
+      "vv-button",
+      _,
+      computed(() => ({
+        active: n.active,
+        pressed: A.value,
+        disabled: u.value,
+        reverse: [p.right, p.bottom].includes(y.value),
+        column: [p.top, p.bottom].includes(y.value),
+        iconOnly: Boolean((a == null ? void 0 : a.value) && !(t != null && t.value) && !k.default)
+      }))
+    ), H = computed(
       () => typeof (a == null ? void 0 : a.value) == "string" ? { name: a == null ? void 0 : a.value } : a == null ? void 0 : a.value
-    ), V = computed(() => {
-      const l = {
-        class: L.value,
-        "aria-pressed": _.value ? !0 : void 0
+    ), K = computed(() => {
+      const r = {
+        ...P == null ? void 0 : P.value,
+        "aria-pressed": A.value ? !0 : void 0,
+        class: J.value,
+        role: U
       };
-      switch (y.value) {
+      switch (N.value) {
         case v.a:
           return {
-            ...l,
-            role: "button",
-            href: o.href,
-            target: o.target,
-            rel: o.rel
+            ...r,
+            role: r.role ?? "button",
+            href: n.href,
+            target: n.target,
+            rel: n.rel
           };
         case v.routerLink:
         case v.nuxtLink:
           return {
-            ...l,
-            role: "button",
-            to: o.to,
-            target: o.target
+            ...r,
+            role: r.role ?? "button",
+            to: n.to,
+            target: n.target
           };
         default:
           return {
-            ...l,
-            type: o.type,
-            disabled: n.value
+            ...r,
+            type: n.type,
+            disabled: u.value
           };
       }
-    }), R = () => {
-      if (c.value) {
-        if (Array.isArray(e.value)) {
-          if (contains(u, e.value)) {
-            p.value && (e.value = e.value.filter(
-              (l) => l !== u
+    }), W = (r) => {
+      if (i == null || i.emit("click", r), g.value) {
+        if (Array.isArray(o.value)) {
+          if (contains(f.value, o.value)) {
+            O.value && (o.value = o.value.filter(
+              (D) => D !== f.value
             ));
             return;
           }
-          e.value.push(u);
+          o.value.push(f.value);
           return;
         }
-        if (equals(u, e.value) && p.value) {
-          e.value = void 0;
+        if (equals(f, o.value) && O.value) {
+          o.value = void 0;
           return;
         }
-        e.value = u;
+        o.value = f.value;
       }
+    }, Y = (r) => {
+      i == null || i.emit("mouseover", r);
+    }, x = (r) => {
+      i == null || i.emit("mouseleave", r);
     };
-    return (l, ne) => (g(), P(E(d(y)), A(d(V), { onClickPassive: R }), {
-      default: G(() => [
-        k(l.$slots, "default", {}, () => [
-          l.loading ? k(l.$slots, "loading", { key: 0 }, () => [
-            l.loadingIcon ? (g(), P(B, {
+    return (r, D) => (b(), B(Q(c(N)), C(c(K), {
+      id: c(h),
+      ref_key: "$el",
+      ref: $,
+      onClickPassive: W,
+      onMouseoverPassive: Y,
+      onMouseleavePassive: x
+    }), {
+      default: T(() => [
+        w(r.$slots, "default", {}, () => [
+          r.loading ? w(r.$slots, "loading", { key: 0 }, () => [
+            r.loadingIcon ? (b(), B(q, {
               key: 0,
               class: "vv-button__loading-icon",
-              name: l.loadingIcon
-            }, null, 8, ["name"])) : w("", !0),
-            l.loadingLabel ? (g(), O("span", ee, F(l.loadingLabel), 1)) : w("", !0)
-          ]) : (g(), O(j, { key: 1 }, [
-            k(l.$slots, "before"),
-            d(a) ? (g(), P(B, A({
+              name: r.loadingIcon
+            }, null, 8, ["name"])) : I("", !0),
+            r.loadingLabel ? (b(), L("span", fe, F(r.loadingLabel), 1)) : I("", !0)
+          ]) : (b(), L(X, { key: 1 }, [
+            w(r.$slots, "before"),
+            c(a) ? (b(), B(q, C({
               key: 0,
               class: "vv-button__icon"
-            }, d(C)), null, 16)) : w("", !0),
-            d(s) ? (g(), O("span", te, [
-              k(l.$slots, "label", {}, () => [
-                q(F(d(s)), 1)
+            }, c(H)), null, 16)) : I("", !0),
+            c(t) ? (b(), L("span", ve, [
+              w(r.$slots, "label", {}, () => [
+                Z(F(c(t)), 1)
               ])
-            ])) : w("", !0),
-            k(l.$slots, "after")
+            ])) : I("", !0),
+            w(r.$slots, "after")
           ], 64))
         ])
       ]),
       _: 3
-    }, 16));
+    }, 16, ["id"]));
   }
 });
 export {
-  ie as default
+  be as default
 };