@vonage/vivid-vue 3.2.3 → 3.3.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { ref as r, version as m, onBeforeMount as v, defineComponent as d, h as n } from "vue";
-import { registerAccordion as y, registerAccordionItem as f, registerActionGroup as $, registerAvatar as k, registerBadge as g, registerBanner as b, registerBreadcrumb as C, registerBreadcrumbItem as w, registerButton as S, registerCalendar as x, registerCalendarEvent as N, registerCard as V, registerCheckbox as B, registerCombobox as K, registerDataGrid as T, registerDialog as I, registerDivider as q, registerFab as z, registerHeader as F, registerIcon as L, registerLayout as P, registerMenu as D, registerMenuItem as M, registerNav as O, registerNavDisclosure as A, registerNavItem as E, registerNote as H, registerNumberField as G, registerOption as R, registerPopup as W, registerProgress as j, registerProgressRing as U, registerRadio as J, registerRadioGroup as Q, registerSelect as X, registerSideDrawer as Y, registerSlider as Z, registerSwitch as _, registerTab as tt, registerTabs as et, registerTabPanel as it, registerTextArea as ot, registerTextField as st, registerTooltip as nt, registerTreeItem as at, registerTreeView as rt, registerTag as dt, registerTagGroup as lt } from "@vonage/vivid";
+import { registerAccordion as y, registerAccordionItem as f, registerActionGroup as $, registerAvatar as k, registerBadge as g, registerBanner as b, registerBreadcrumb as C, registerBreadcrumbItem as S, registerButton as w, registerCalendar as x, registerCalendarEvent as V, registerCard as N, registerCheckbox as B, registerCombobox as T, registerDataGrid as K, registerDialog as I, registerDivider as q, registerFab as z, registerHeader as F, registerIcon as P, registerLayout as L, registerMenu as D, registerMenuItem as M, registerNav as A, registerNavDisclosure as O, registerNavItem as G, registerNote as E, registerNumberField as H, registerOption as R, registerPopup as W, registerProgress as j, registerProgressRing as U, registerRadio as J, registerRadioGroup as Q, registerSelect as X, registerSideDrawer as Y, registerSlider as Z, registerSwitch as _, registerTab as tt, registerTabs as et, registerTabPanel as it, registerTextArea as ot, registerTextField as st, registerTooltip as nt, registerTreeItem as at, registerTreeView as rt, registerTag as dt, registerTagGroup as lt } from "@vonage/vivid";
 const p = r("vvd3");
 function mt(t) {
   p.value = t;
@@ -12,6 +12,7 @@ function l(t, o) {
   }), s;
 }
 const vt = d({
+  name: "VAccordion",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -115,6 +116,7 @@ const vt = d({
     );
   }
 }), yt = d({
+  name: "VAccordionItem",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -259,6 +261,7 @@ const vt = d({
     );
   }
 }), ft = d({
+  name: "VActionGroup",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -382,6 +385,7 @@ function h(t, o) {
   return o ? a ? ht(t, o) : ut(t, o()) : null;
 }
 const $t = d({
+  name: "VAvatar",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -509,6 +513,7 @@ const $t = d({
     );
   }
 }), kt = d({
+  name: "VBadge",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -633,6 +638,7 @@ const $t = d({
     );
   }
 }), gt = d({
+  name: "VBanner",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -759,6 +765,7 @@ const $t = d({
     );
   }
 }), bt = d({
+  name: "VBreadcrumb",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -841,6 +848,7 @@ const $t = d({
     );
   }
 }), Ct = d({
+  name: "VBreadcrumbItem",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -916,7 +924,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("breadcrumb-item", w), e = r(null);
+    const s = l("breadcrumb-item", S), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -972,7 +980,8 @@ const $t = d({
       []
     );
   }
-}), wt = d({
+}), St = d({
+  name: "VButton",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -1112,7 +1121,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("button", S), e = r(null);
+    const s = l("button", w), e = r(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1202,7 +1211,8 @@ const $t = d({
       []
     );
   }
-}), St = d({
+}), wt = d({
+  name: "VCalendar",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1359,6 +1369,7 @@ const $t = d({
     );
   }
 }), xt = d({
+  name: "VCalendarEvent",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1432,7 +1443,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("calendar-event", N), e = r(null);
+    const s = l("calendar-event", V), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -1484,7 +1495,8 @@ const $t = d({
       []
     );
   }
-}), Nt = d({
+}), Vt = d({
+  name: "VCard",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1554,7 +1566,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("card", V), e = r(null);
+    const s = l("card", N), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -1624,7 +1636,8 @@ const $t = d({
       ]
     );
   }
-}), Vt = d({
+}), Nt = d({
+  name: "VCheckbox",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -1780,6 +1793,7 @@ const $t = d({
     );
   }
 }), Bt = d({
+  name: "VCombobox",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -1890,7 +1904,7 @@ const $t = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("combobox", K), e = r(null);
+    const s = l("combobox", T), e = r(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1993,7 +2007,8 @@ const $t = d({
       ]
     );
   }
-}), Kt = d({
+}), Tt = d({
+  name: "VDataGrid",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2037,7 +2052,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("data-grid", T), e = r(null);
+    const s = l("data-grid", K), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -2080,7 +2095,8 @@ const $t = d({
       ]
     );
   }
-}), Tt = d({
+}), Kt = d({
+  name: "VDialog",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2241,6 +2257,7 @@ const $t = d({
     );
   }
 }), It = d({
+  name: "VDivider",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2334,6 +2351,7 @@ const $t = d({
     );
   }
 }), qt = d({
+  name: "VFab",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -2540,6 +2558,7 @@ const $t = d({
     );
   }
 }), zt = d({
+  name: "VHeader",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2646,6 +2665,7 @@ const $t = d({
     );
   }
 }), Ft = d({
+  name: "VIcon",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2704,7 +2724,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("icon", L), e = r(null);
+    const s = l("icon", P), e = r(null);
     return o.expose({
       nameChanged() {
         var i;
@@ -2756,7 +2776,8 @@ const $t = d({
       ]
     );
   }
-}), Lt = d({
+}), Pt = d({
+  name: "VLayout",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2777,6 +2798,10 @@ const $t = d({
      * sets the initial preferred spacing of a column from predefined available options
      */
     columnSpacing: { type: String, default: void 0 },
+    /**
+     * sets the initial preferred spacing of a row from predefined available options
+     */
+    rowSpacing: { type: String, default: void 0 },
     /**
      * sets the initial preferred auto-sizing from predefined available options
      */
@@ -2815,7 +2840,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("layout", P), e = r(null);
+    const s = l("layout", L), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -2828,6 +2853,7 @@ const $t = d({
           ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
           ...this.columnBasis !== void 0 ? { "column-basis": this.columnBasis } : {},
           ...this.columnSpacing !== void 0 ? { "column-spacing": this.columnSpacing } : {},
+          ...this.rowSpacing !== void 0 ? { "row-spacing": this.rowSpacing } : {},
           ...this.autoSizing !== void 0 ? { "auto-sizing": this.autoSizing } : {}
         },
         class: "vvd-root",
@@ -2850,6 +2876,7 @@ const $t = d({
         ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
         ...this.columnBasis !== void 0 ? { "column-basis": this.columnBasis } : {},
         ...this.columnSpacing !== void 0 ? { "column-spacing": this.columnSpacing } : {},
+        ...this.rowSpacing !== void 0 ? { "row-spacing": this.rowSpacing } : {},
         ...this.autoSizing !== void 0 ? { "auto-sizing": this.autoSizing } : {},
         onClick: (t) => this.$emit("click", t),
         onFocus: (t) => this.$emit("focus", t),
@@ -2864,7 +2891,8 @@ const $t = d({
       ]
     );
   }
-}), Pt = d({
+}), Lt = d({
+  name: "VMenu",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2989,6 +3017,7 @@ const $t = d({
     );
   }
 }), Dt = d({
+  name: "VMenuItem",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -3134,6 +3163,7 @@ const $t = d({
     );
   }
 }), Mt = d({
+  name: "VNav",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -3176,7 +3206,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav", O), e = r(null);
+    const s = l("nav", A), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3215,7 +3245,8 @@ const $t = d({
       ]
     );
   }
-}), Ot = d({
+}), At = d({
+  name: "VNavDisclosure",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3271,7 +3302,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav-disclosure", A), e = r(null);
+    const s = l("nav-disclosure", O), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3318,7 +3349,8 @@ const $t = d({
       ]
     );
   }
-}), At = d({
+}), Ot = d({
+  name: "VNavItem",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3405,7 +3437,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav-item", E), e = r(null);
+    const s = l("nav-item", G), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3463,7 +3495,8 @@ const $t = d({
       []
     );
   }
-}), Et = d({
+}), Gt = d({
+  name: "VNote",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3522,7 +3555,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("note", H), e = r(null);
+    const s = l("note", E), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3569,7 +3602,8 @@ const $t = d({
       ]
     );
   }
-}), Ht = d({
+}), Et = d({
+  name: "VNumberField",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -3717,7 +3751,7 @@ const $t = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("number-field", G), e = r(null);
+    const s = l("number-field", H), e = r(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -3834,7 +3868,8 @@ const $t = d({
       []
     );
   }
-}), Gt = d({
+}), Ht = d({
+  name: "VOption",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3969,6 +4004,7 @@ const $t = d({
     );
   }
 }), Rt = d({
+  name: "VPopup",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4118,6 +4154,7 @@ const $t = d({
     );
   }
 }), Wt = d({
+  name: "VProgress",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4232,6 +4269,7 @@ const $t = d({
     );
   }
 }), jt = d({
+  name: "VProgressRing",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4343,6 +4381,7 @@ const $t = d({
     );
   }
 }), Ut = d({
+  name: "VRadio",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4494,6 +4533,7 @@ const $t = d({
     );
   }
 }), Jt = d({
+  name: "VRadioGroup",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -4629,6 +4669,7 @@ const $t = d({
     );
   }
 }), Qt = d({
+  name: "VSelect",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -4840,6 +4881,7 @@ const $t = d({
     );
   }
 }), Xt = d({
+  name: "VSideDrawer",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4954,6 +4996,7 @@ const $t = d({
     );
   }
 }), Yt = d({
+  name: "VSlider",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -5145,6 +5188,7 @@ const $t = d({
     );
   }
 }), Zt = d({
+  name: "VSwitch",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5235,6 +5279,7 @@ const $t = d({
     );
   }
 }), _t = d({
+  name: "VTab",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -5350,6 +5395,7 @@ const $t = d({
     );
   }
 }), te = d({
+  name: "VTabs",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5483,6 +5529,7 @@ const $t = d({
     );
   }
 }), ee = d({
+  name: "VTabPanel",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5565,6 +5612,7 @@ const $t = d({
     );
   }
 }), ie = d({
+  name: "VTextArea",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -5645,6 +5693,7 @@ const $t = d({
     );
   }
 }), oe = d({
+  name: "VTextField",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -5896,6 +5945,7 @@ const $t = d({
     );
   }
 }), se = d({
+  name: "VTooltip",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5905,41 +5955,16 @@ const $t = d({
       default: void 0
     },
     /**
-     * adds close button to the popup
-     */
-    dismissible: { type: Boolean, default: void 0 },
-    /**
-     * adds small triangle to indicate the trigger element
-     */
-    arrow: { type: Boolean, default: void 0 },
-    /**
-     * set the color-scheme to dark
-     */
-    alternate: { type: Boolean, default: void 0 },
-    /**
-     * the placement of the popup
+     * the text of the tooltip
+     * accepts string
      */
+    text: { type: String, default: void 0 },
     placement: {
       type: String,
       default: void 0
     },
-    /**
-     * the strategy of the popup
-     */
-    strategy: { type: String, default: void 0 },
-    /**
-     * the text of the tooltip
-     * accepts string
-     */
-    text: { type: String, default: void 0 },
-    /**
-     * indicates whether the popup is open
-     */
-    open: { type: String, default: void 0 },
-    /**
-     * ID reference to element in the popup’s owner document or HTMLElement.
-     */
-    anchor: { type: [String, HTMLElement], default: void 0 }
+    open: { type: Boolean, default: void 0 },
+    anchor: { type: [String, Object], default: void 0 }
   },
   emits: [
     /**
@@ -5976,24 +6001,13 @@ const $t = d({
   setup(t, o) {
     const s = l("tooltip", nt), e = r(null);
     return o.expose({
+      anchorChanged(i, u) {
+        var c;
+        return (c = e.value) == null ? void 0 : c.anchorChanged(i, u);
+      },
       openChanged(i, u) {
         var c;
         return (c = e.value) == null ? void 0 : c.openChanged(i, u);
-      },
-      /**
-       * Updates popup's position
-       */
-      updatePosition() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.updatePosition();
-      },
-      show() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.show();
-      },
-      hide() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.hide();
       }
     }), { componentName: s, element: e };
   },
@@ -6004,12 +6018,8 @@ const $t = d({
         ref: "element",
         attrs: {
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-          ...this.dismissible !== void 0 ? { dismissible: this.dismissible } : {},
-          ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
-          ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-          ...this.placement !== void 0 ? { placement: this.placement } : {},
-          ...this.strategy !== void 0 ? { strategy: this.strategy } : {},
           ...this.text !== void 0 ? { text: this.text } : {},
+          ...this.placement !== void 0 ? { placement: this.placement } : {},
           ...this.open !== void 0 ? { open: this.open } : {}
         },
         class: "vvd-root",
@@ -6030,12 +6040,8 @@ const $t = d({
         ref: "element",
         class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.dismissible !== void 0 ? { dismissible: this.dismissible } : {},
-        ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
-        ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-        ...this.placement !== void 0 ? { placement: this.placement } : {},
-        ...this.strategy !== void 0 ? { strategy: this.strategy } : {},
         ...this.text !== void 0 ? { text: this.text } : {},
+        ...this.placement !== void 0 ? { placement: this.placement } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
         ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
         onClick: (t) => this.$emit("click", t),
@@ -6049,6 +6055,7 @@ const $t = d({
     );
   }
 }), ne = d({
+  name: "VTreeItem",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -6184,6 +6191,7 @@ const $t = d({
     );
   }
 }), ae = d({
+  name: "VTreeView",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -6275,6 +6283,7 @@ const $t = d({
     );
   }
 }), re = d({
+  name: "VTag",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -6427,6 +6436,7 @@ const $t = d({
     );
   }
 }), de = d({
+  name: "VTagGroup",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -6518,27 +6528,27 @@ export {
   gt as VBanner,
   bt as VBreadcrumb,
   Ct as VBreadcrumbItem,
-  wt as VButton,
-  St as VCalendar,
+  St as VButton,
+  wt as VCalendar,
   xt as VCalendarEvent,
-  Nt as VCard,
-  Vt as VCheckbox,
+  Vt as VCard,
+  Nt as VCheckbox,
   Bt as VCombobox,
-  Kt as VDataGrid,
-  Tt as VDialog,
+  Tt as VDataGrid,
+  Kt as VDialog,
   It as VDivider,
   qt as VFab,
   zt as VHeader,
   Ft as VIcon,
-  Lt as VLayout,
-  Pt as VMenu,
+  Pt as VLayout,
+  Lt as VMenu,
   Dt as VMenuItem,
   Mt as VNav,
-  Ot as VNavDisclosure,
-  At as VNavItem,
-  Et as VNote,
-  Ht as VNumberField,
-  Gt as VOption,
+  At as VNavDisclosure,
+  Ot as VNavItem,
+  Gt as VNote,
+  Et as VNumberField,
+  Ht as VOption,
   Rt as VPopup,
   Wt as VProgress,
   jt as VProgressRing,