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

package/dist/components/VvCombobox/index.d.ts

@@ -1,3 +1,4 @@
+import type { PropType } from 'vue';
 export declare const VvComboboxEvents: string[];
 export declare const VvComboboxProps: {
     /**
@@ -12,9 +13,37 @@ export declare const VvComboboxProps: {
      */
     label: StringConstructor;
     /**
-     * Label of "no results" options
+     * Label for no search results
      */
-    labelNoResults: {
+    noResultsLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for selected option hint
+     */
+    selectedLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for deselect button
+     */
+    deselectLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for select option hint
+     */
+    pressToSelectLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for deselected option hint
+     */
+    pressToDeselectLabel: {
         type: StringConstructor;
         default: string;
     };
@@ -29,7 +58,10 @@ export declare const VvComboboxProps: {
     /**
      * On searchable select is the input search placeholder
      */
-    searchPlaceholder: StringConstructor;
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * The input search debounce time in ms
      */
@@ -56,6 +88,91 @@ export declare const VvComboboxProps: {
      * Show native select
      */
     native: BooleanConstructor;
+    /**
+     * Show badges
+     */
+    badges: BooleanConstructor;
+    /**
+     * Badge modifiers
+     */
+    badgeModifiers: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    /**
+     * Set dropdown width to the same as the trigger
+     */
+    triggerWidth: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    /**
+     * Dropdown modifiers
+     */
+    dropdownModifiers: {
+        type: PropType<string | string[]>;
+    };
+    /**
+     * Open dropdown on focus
+     */
+    autoOpen: BooleanConstructor;
+    /**
+     * Close dropdown on select (not multiple)
+     */
+    autoClose: BooleanConstructor;
+    placement: {
+        type: PropType<import("../../constants").Side | import("../../constants").Placement>;
+        default: import("../../constants").Side;
+        validator: (value: never) => boolean;
+    };
+    transitionName: {
+        type: StringConstructor;
+    };
+    offset: {
+        type: PropType<string | import("@floating-ui/core").OffsetOptions | undefined>;
+        default: number;
+    };
+    shift: {
+        type: PropType<boolean | Partial<import("@floating-ui/core").ShiftOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        }> | undefined>;
+        default: boolean;
+    };
+    flip: {
+        type: PropType<boolean | Partial<import("@floating-ui/core").FlipOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        }> | undefined>;
+        default: boolean;
+    };
+    size: {
+        type: PropType<boolean | Partial<Omit<import("@floating-ui/core").SizeOptions, "apply"> & {
+            apply(args: Omit<import("@floating-ui/core").MiddlewareArguments, "elements"> & {
+                elements: import("@floating-ui/dom").Elements;
+            } & {
+                availableWidth: number;
+                availableHeight: number;
+            }): void | Promise<void>;
+        } & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        }> | undefined>;
+        default: () => {
+            padding: number;
+        };
+    };
+    autoPlacement: {
+        type: PropType<boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & Omit<import("@floating-ui/core").DetectOverflowOptions, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        }> | undefined>;
+        default: boolean;
+    };
+    arrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocusFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     unselectable: {
         type: BooleanConstructor;
         default: boolean;
@@ -65,25 +182,29 @@ export declare const VvComboboxProps: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     iconPosition: {
-        type: import("vue").PropType<import("@/props").IconPosition>;
-        validation: (value: import("@/props").IconPosition) => boolean;
-        default: "right";
+        type: PropType<import("../../constants").Position>;
+        default: import("../../constants").Position;
+        validation: (value: import("../../constants").Position) => boolean;
     };
     options: {
-        type: import("vue").PropType<(string | import("../../types/generic").Option)[]>;
+        type: PropType<(string | import("../../types/generic").Option)[]>;
         default: () => never[];
     };
     labelKey: {
         type: (StringConstructor | FunctionConstructor)[];
-        default: string;
+        default: string; /**
+         * Label for select option hint
+         */
     };
     valueKey: {
         type: (StringConstructor | FunctionConstructor)[];
         default: string;
-    }; /**
-     * The input search debounce time in ms
-     */
-    modifiers: import("vue").PropType<string | string[]>;
+    };
+    disabledKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    modifiers: PropType<string | string[]>;
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
@@ -100,9 +221,9 @@ export declare const VvComboboxProps: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 };

package/dist/components/VvDialog/VvDialog.es.js

@@ -1,158 +1,249 @@
-import { defineComponent as y, unref as i, openBlock as f, createBlock as V, mergeProps as w, createCommentVNode as _, Transition as b, toHandlers as D, withCtx as k, withDirectives as B, createElementVNode as u, createElementBlock as $, renderSlot as S, createTextVNode as F, toDisplayString as N, withModifiers as E, createVNode as I, vShow as P } from "vue";
-import { iconExists as p, Icon as M, addIcon as z } from "@iconify/vue";
-const O = "ds", L = {
+import { defineComponent as _, unref as a, openBlock as g, createBlock as V, mergeProps as S, createCommentVNode as y, Transition as D, toHandlers as N, withCtx as k, withDirectives as E, createElementVNode as f, createElementBlock as B, renderSlot as b, createTextVNode as F, toDisplayString as j, createVNode as I, vShow as z } from "vue";
+import { iconExists as p, Icon as M, addIcon as L } from "@iconify/vue";
+const T = {
+  /**
+   * 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]
   }
 }, q = {
   name: "VvIcon"
-}, T = /* @__PURE__ */ y({
+}, A = /* @__PURE__ */ _({
   ...q,
-  props: L,
-  setup(v) {
-    const t = v, r = ref(!0), { modifiers: a } = toRefs(t), n = inject(O), { bemCssClasses: c } = useBemModifiers("vv-icon", {
-      modifiers: a
-    }), s = computed(() => t.provider || (n == null ? void 0 : n.provider)), g = computed(() => {
-      const e = t.name ?? "", o = `@${s.value}:${t.prefix}:${t.name}`;
-      return p(e) ? e : p(o) ? o : (n == null ? void 0 : n.iconsCollections.find((l) => {
-        const h = `@${s.value}:${l.prefix}:${e}`;
-        if (p(h))
-          return h;
-      })) || e;
+  props: T,
+  setup(e) {
+    const r = e, i = ref(!0), n = useVolver(), { modifiers: d } = toRefs(r), u = useBemModifiers("vv-icon", d), s = computed(() => r.provider || (n == null ? void 0 : n.provider)), v = computed(() => {
+      const t = r.name ?? "", o = `@${s.value}:${r.prefix}:${r.name}`;
+      return p(t) ? t : p(o) ? o : (n == null ? void 0 : n.iconsCollections.find(
+        (l) => {
+          const h = `@${s.value}:${l.prefix}:${t}`;
+          if (p(h))
+            return h;
+        }
+      )) || t;
     });
-    function m(e) {
+    function m(t) {
       let o = null;
       if (typeof window > "u") {
-        const { JSDOM: C } = require("jsdom");
-        o = new C().window;
+        const { JSDOM: O } = require("jsdom");
+        o = new O().window;
       }
-      return (o ? new o.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 d(e) {
-      const o = m(e), l = (o == null ? void 0 : o.innerHTML.trim()) || "";
-      o && l && z(`@${s.value}:${t.prefix}:${t.name}`, {
+    function c(t) {
+      const o = m(t), l = (o == null ? void 0 : o.innerHTML.trim()) || "";
+      o && l && L(`@${s.value}:${r.prefix}:${r.name}`, {
         body: l,
+        // Set height and width from svg content
         height: o.viewBox.baseVal.height,
         width: o.viewBox.baseVal.width
       });
     }
-    return n && (t.src && !p(`@${s.value}:${t.prefix}:${t.name}`) ? (r.value = !1, n.fetchIcon(t.src).then((e) => {
-      e && (d(e), r.value = !0);
-    }).catch((e) => {
-      throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
-    })) : t.svg && d(t.svg)), (e, o) => i(r) ? (f(), V(i(M), w({
+    return n && (r.src && !p(`@${s.value}:${r.prefix}:${r.name}`) ? (i.value = !1, n.fetchIcon(r.src).then((t) => {
+      t && (c(t), i.value = !0);
+    }).catch((t) => {
+      throw new Error(`During fetch icon: ${t == null ? void 0 : t.message}`);
+    })) : r.svg && c(r.svg)), (t, o) => a(i) ? (g(), V(a(M), S({
       key: 0,
-      class: i(c)
+      class: a(u)
     }, {
-      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: i(g)
-    }), null, 16, ["class"])) : _("", !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: a(v)
+    }), null, 16, ["class"])) : y("", !0);
   }
-}), A = ["open", "close", "update:modelValue"], H = {
-  id: { type: String, required: !0 },
+});
+var w = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(w || {}), C = /* @__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))(C || {}), $ = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))($ || {});
+$.before;
+const H = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+w.bottom;
+const P = ["open", "close", "update:modelValue"], W = {
+  ...H,
+  /**
+   * Dialog title
+   */
   title: String,
+  /**
+   * Show / hide dialog programmatically
+   */
   modelValue: Boolean,
+  /**
+   * Dialog transition
+   */
   transition: { type: String, default: "fade-block" },
+  /**
+   * Dialog size
+   */
   size: String,
+  /**
+   * Close dialog on click outside
+   */
   autoClose: { type: Boolean, default: !0 }
-}, R = {
+}, J = {
   key: 0,
   class: "vv-dialog__header"
-}, W = ["onClick"], j = { class: "vv-dialog__content" }, J = {
+}, K = { class: "vv-dialog__content" }, R = {
   key: 1,
   class: "vv-dialog__footer"
-}, X = {
+}, G = {
   name: "VvDialog"
-}, U = /* @__PURE__ */ y({
-  ...X,
-  props: H,
-  emits: A,
-  setup(v, { emit: t }) {
-    const r = v, a = useVModel(r, "modelValue", t), n = ref(!0), c = ref(null), s = computed(() => {
-      const { id: o } = r;
+}, Y = /* @__PURE__ */ _({
+  ...G,
+  props: W,
+  emits: P,
+  setup(e, { emit: r }) {
+    const i = e, n = useVModel(i, "modelValue", r), d = ref(!0), u = ref(null), s = computed(() => {
+      const { id: o } = i;
       return {
         id: o,
-        open: n.value
+        open: d.value
       };
-    }), g = computed(() => r.size ? ["vv-dialog", `vv-dialog--${r.size}`] : "vv-dialog"), m = computed(() => `vv-dialog--${r.transition}`), d = {
+    }), v = computed(() => i.size ? ["vv-dialog", `vv-dialog--${i.size}`] : "vv-dialog"), m = computed(() => `vv-dialog--${i.transition}`), c = {
       "before-enter": () => {
-        n.value = !0, t("open");
+        d.value = !0, r("open");
       },
       "after-leave": () => {
-        n.value = !1, t("close");
+        d.value = !1, r("close");
       }
     };
-    onClickOutside(c, () => {
-      r.autoClose && (a.value = !1);
+    onClickOutside(u, () => {
+      i.autoClose && (n.value = !1);
     });
-    function e() {
-      a.value = !1;
+    function t() {
+      n.value = !1;
     }
-    return (o, l) => (f(), V(b, w({ name: i(m) }, D(d)), {
+    return onKeyStroke("Escape", (o) => {
+      n.value && (o.preventDefault(), t());
+    }), (o, l) => (g(), V(D, S({ name: a(m) }, N(c)), {
       default: k(() => [
-        B(u("dialog", w(i(s), { class: i(g) }), [
-          u("article", {
+        E(f("dialog", S(a(s), { class: a(v) }), [
+          f("article", {
             ref_key: "modalWrapper",
-            ref: c,
+            ref: u,
             class: "vv-dialog__wrapper"
           }, [
-            o.$slots.header || o.title ? (f(), $("header", R, [
-              S(o.$slots, "header", {}, () => [
-                F(N(o.title) + " ", 1),
-                u("button", {
+            o.$slots.header || o.title ? (g(), B("header", J, [
+              b(o.$slots, "header", {}, () => [
+                F(j(o.title) + " ", 1),
+                f("button", {
                   type: "button",
                   "aria-label": "Close",
                   class: "vv-dialog__close",
-                  onClick: E(e, ["prevent"])
+                  onClickPassive: t
                 }, [
-                  I(T, { name: "close" })
-                ], 8, W)
+                  I(A, { name: "close" })
+                ], 32)
               ])
-            ])) : _("", !0),
-            u("div", j, [
-              S(o.$slots, "default")
+            ])) : y("", !0),
+            f("div", K, [
+              b(o.$slots, "default")
             ]),
-            o.$slots.footer ? (f(), $("footer", J, [
-              S(o.$slots, "footer")
-            ])) : _("", !0)
+            o.$slots.footer ? (g(), B("footer", R, [
+              b(o.$slots, "footer")
+            ])) : y("", !0)
           ], 512)
         ], 16), [
-          [P, i(a)]
+          [z, a(n)]
         ])
       ]),
       _: 3
@@ -160,5 +251,5 @@ const O = "ds", L = {
   }
 });
 export {
-  U as default
+  Y as default
 };

package/dist/components/VvDialog/VvDialog.umd.js

@@ -1 +1 @@
-(function(e,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue"],i):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDialog=i(e.vue,e.vue$1))})(this,function(e,i){"use strict";const h="ds",S={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},w={name:"VvIcon"},_=e.defineComponent({...w,props:S,setup(p){const n=p,s=ref(!0),{modifiers:c}=toRefs(n),r=inject(h),{bemCssClasses:d}=useBemModifiers("vv-icon",{modifiers:c}),l=computed(()=>n.provider||(r==null?void 0:r.provider)),m=computed(()=>{const o=n.name??"",t=`@${l.value}:${n.prefix}:${n.name}`;return i.iconExists(o)?o:i.iconExists(t)?t:(r==null?void 0:r.iconsCollections.find(a=>{const u=`@${l.value}:${a.prefix}:${o}`;if(i.iconExists(u))return u}))||o});function g(o){let t=null;if(typeof window>"u"){const{JSDOM:E}=require("jsdom");t=new E().window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(o,"text/html").querySelector("svg")}function f(o){const t=g(o),a=(t==null?void 0:t.innerHTML.trim())||"";t&&a&&i.addIcon(`@${l.value}:${n.prefix}:${n.name}`,{body:a,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return r&&(n.src&&!i.iconExists(`@${l.value}:${n.prefix}:${n.name}`)?(s.value=!1,r.fetchIcon(n.src).then(o=>{o&&(f(o),s.value=!0)}).catch(o=>{throw new Error(`During fetch icon: ${o==null?void 0:o.message}`)})):n.svg&&f(n.svg)),(o,t)=>e.unref(s)?(e.openBlock(),e.createBlock(e.unref(i.Icon),e.mergeProps({key:0,class:e.unref(d)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:o.rotate,color:o.color,onLoad:o.onLoad,icon:e.unref(m)}),null,16,["class"])):e.createCommentVNode("",!0)}}),v=["open","close","update:modelValue"],y={id:{type:String,required:!0},title:String,modelValue:Boolean,transition:{type:String,default:"fade-block"},size:String,autoClose:{type:Boolean,default:!0}},V={key:0,class:"vv-dialog__header"},$=["onClick"],C={class:"vv-dialog__content"},k={key:1,class:"vv-dialog__footer"},B={name:"VvDialog"};return e.defineComponent({...B,props:y,emits:v,setup(p,{emit:n}){const s=p,c=useVModel(s,"modelValue",n),r=ref(!0),d=ref(null),l=computed(()=>{const{id:t}=s;return{id:t,open:r.value}}),m=computed(()=>s.size?["vv-dialog",`vv-dialog--${s.size}`]:"vv-dialog"),g=computed(()=>`vv-dialog--${s.transition}`),f={"before-enter":()=>{r.value=!0,n("open")},"after-leave":()=>{r.value=!1,n("close")}};onClickOutside(d,()=>{s.autoClose&&(c.value=!1)});function o(){c.value=!1}return(t,a)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(g)},e.toHandlers(f)),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(l),{class:e.unref(m)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:d,class:"vv-dialog__wrapper"},[t.$slots.header||t.title?(e.openBlock(),e.createElementBlock("header",V,[e.renderSlot(t.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(t.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":"Close",class:"vv-dialog__close",onClick:e.withModifiers(o,["prevent"])},[e.createVNode(_,{name:"close"})],8,$)])])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("footer",k,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16),[[e.vShow,e.unref(c)]])]),_:3},16,["name"]))}})});
+(function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDialog=s(e.vue,e.vue$1))})(this,function(e,s){"use strict";const b={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},v={name:"VvIcon"},w=e.defineComponent({...v,props:b,setup(t){const r=t,a=ref(!0),i=useVolver(),{modifiers:d}=toRefs(r),f=useBemModifiers("vv-icon",d),l=computed(()=>r.provider||(i==null?void 0:i.provider)),g=computed(()=>{const o=r.name??"",n=`@${l.value}:${r.prefix}:${r.name}`;return s.iconExists(o)?o:s.iconExists(n)?n:(i==null?void 0:i.iconsCollections.find(c=>{const y=`@${l.value}:${c.prefix}:${o}`;if(s.iconExists(y))return y}))||o});function h(o){let n=null;if(typeof window>"u"){const{JSDOM:k}=require("jsdom");n=new k().window}return(n?new n.DOMParser:new window.DOMParser).parseFromString(o,"text/html").querySelector("svg")}function p(o){const n=h(o),c=(n==null?void 0:n.innerHTML.trim())||"";n&&c&&s.addIcon(`@${l.value}:${r.prefix}:${r.name}`,{body:c,height:n.viewBox.baseVal.height,width:n.viewBox.baseVal.width})}return i&&(r.src&&!s.iconExists(`@${l.value}:${r.prefix}:${r.name}`)?(a.value=!1,i.fetchIcon(r.src).then(o=>{o&&(p(o),a.value=!0)}).catch(o=>{throw new Error(`During fetch icon: ${o==null?void 0:o.message}`)})):r.svg&&p(r.svg)),(o,n)=>e.unref(a)?(e.openBlock(),e.createBlock(e.unref(s.Icon),e.mergeProps({key:0,class:e.unref(f)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:o.rotate,color:o.color,onLoad:o.onLoad,icon:e.unref(g)}),null,16,["class"])):e.createCommentVNode("",!0)}});var u=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(u||{}),S=(t=>(t.topStart="top-start",t.topEnd="top-end",t.bottomStart="bottom-start",t.bottomEnd="bottom-end",t.leftStart="left-start",t.leftEnd="left-end",t.rightStart="right-start",t.rightEnd="right-end",t))(S||{}),m=(t=>(t.before="before",t.after="after",t))(m||{});m.before;const B={id:[String,Number]};u.bottom;const V=["open","close","update:modelValue"],_={...B,title:String,modelValue:Boolean,transition:{type:String,default:"fade-block"},size:String,autoClose:{type:Boolean,default:!0}},E={key:0,class:"vv-dialog__header"},$={class:"vv-dialog__content"},C={key:1,class:"vv-dialog__footer"},N={name:"VvDialog"};return e.defineComponent({...N,props:_,emits:V,setup(t,{emit:r}){const a=t,i=useVModel(a,"modelValue",r),d=ref(!0),f=ref(null),l=computed(()=>{const{id:n}=a;return{id:n,open:d.value}}),g=computed(()=>a.size?["vv-dialog",`vv-dialog--${a.size}`]:"vv-dialog"),h=computed(()=>`vv-dialog--${a.transition}`),p={"before-enter":()=>{d.value=!0,r("open")},"after-leave":()=>{d.value=!1,r("close")}};onClickOutside(f,()=>{a.autoClose&&(i.value=!1)});function o(){i.value=!1}return onKeyStroke("Escape",n=>{i.value&&(n.preventDefault(),o())}),(n,c)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(h)},e.toHandlers(p)),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(l),{class:e.unref(g)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:f,class:"vv-dialog__wrapper"},[n.$slots.header||n.title?(e.openBlock(),e.createElementBlock("header",E,[e.renderSlot(n.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(n.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":"Close",class:"vv-dialog__close",onClickPassive:o},[e.createVNode(w,{name:"close"})],32)])])):e.createCommentVNode("",!0),e.createElementVNode("div",$,[e.renderSlot(n.$slots,"default")]),n.$slots.footer?(e.openBlock(),e.createElementBlock("footer",C,[e.renderSlot(n.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16),[[e.vShow,e.unref(i)]])]),_:3},16,["name"]))}})});

package/dist/components/VvDialog/VvDialog.vue.d.ts

@@ -1,8 +1,4 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    id: {
-        type: StringConstructor;
-        required: boolean;
-    };
     title: StringConstructor;
     modelValue: BooleanConstructor;
     transition: {
@@ -14,11 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        required: boolean;
-    };
     title: StringConstructor;
     modelValue: BooleanConstructor;
     transition: {
@@ -30,12 +23,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;
-    transition: string;
     autoClose: boolean;
+    transition: string;
 }>, {
     header: (_: {}) => any;
     default: (_: {}) => any;

package/dist/components/VvDialog/index.d.ts

@@ -1,18 +1,30 @@
 export declare const VvDialogEvents: string[];
 export declare const VvDialogProps: {
-    id: {
-        type: StringConstructor;
-        required: boolean;
-    };
+    /**
+     * Dialog title
+     */
     title: StringConstructor;
+    /**
+     * Show / hide dialog programmatically
+     */
     modelValue: BooleanConstructor;
+    /**
+     * Dialog transition
+     */
     transition: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Dialog size
+     */
     size: StringConstructor;
+    /**
+     * Close dialog on click outside
+     */
     autoClose: {
         type: BooleanConstructor;
         default: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 };