@vonage/vivid-vue 3.2.0 → 3.2.1

package/dist/index.es.js

@@ -1,7 +1,7 @@
 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 B, registerCheckbox as V, registerCombobox as T, registerDataGrid as K, 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 } 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 w, registerButton as S, registerCalendar as x, registerCalendarEvent as N, registerCard as B, registerCheckbox as V, 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";
 const p = r("vvd3");
-function ct(t) {
+function mt(t) {
   p.value = t;
 }
 const a = m.startsWith("2");
@@ -11,7 +11,7 @@ function l(t, o) {
     o(p.value);
   }), s;
 }
-const pt = d({
+const vt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -114,7 +114,7 @@ const pt = d({
       ]
     );
   }
-}), mt = d({
+}), yt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -258,7 +258,7 @@ const pt = d({
       ]
     );
   }
-}), vt = d({
+}), ft = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -367,21 +367,21 @@ const pt = d({
     );
   }
 });
-function dt(t, o) {
+function ht(t, o) {
   return o.forEach((s) => {
     var e;
     s.data || (s.data = {}), s.data.attrs = { ...(e = s.data) == null ? void 0 : e.attrs, slot: t };
   }), o;
 }
-function lt(t, o) {
+function ut(t, o) {
   return o.forEach((s) => {
     s.props || (s.props = {}), s.props = { ...s.props, slot: t };
   }), o;
 }
 function h(t, o) {
-  return o ? a ? dt(t, o) : lt(t, o()) : null;
+  return o ? a ? ht(t, o) : ut(t, o()) : null;
 }
-const yt = d({
+const $t = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -508,7 +508,7 @@ const yt = d({
       ]
     );
   }
-}), ft = d({
+}), kt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -632,7 +632,7 @@ const yt = d({
       []
     );
   }
-}), $t = d({
+}), gt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -758,7 +758,7 @@ const yt = d({
       ]
     );
   }
-}), kt = d({
+}), bt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -840,7 +840,7 @@ const yt = d({
       ]
     );
   }
-}), gt = d({
+}), Ct = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -972,7 +972,7 @@ const yt = d({
       []
     );
   }
-}), bt = d({
+}), wt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -1202,7 +1202,7 @@ const yt = d({
       []
     );
   }
-}), Ct = d({
+}), St = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1358,7 +1358,7 @@ const yt = d({
       ]
     );
   }
-}), wt = d({
+}), xt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1484,7 +1484,7 @@ const yt = d({
       []
     );
   }
-}), St = d({
+}), Nt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1624,7 +1624,7 @@ const yt = d({
       ]
     );
   }
-}), xt = d({
+}), Bt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -1779,7 +1779,7 @@ const yt = d({
       []
     );
   }
-}), Nt = d({
+}), Vt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -1890,7 +1890,7 @@ const yt = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("combobox", T), e = r(null);
+    const s = l("combobox", K), e = r(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1993,7 +1993,7 @@ const yt = d({
       ]
     );
   }
-}), Bt = d({
+}), Kt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2037,7 +2037,7 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("data-grid", K), e = r(null);
+    const s = l("data-grid", T), e = r(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -2080,7 +2080,7 @@ const yt = d({
       ]
     );
   }
-}), Vt = d({
+}), Tt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2139,7 +2139,12 @@ const yt = d({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Emitted when the dialog is closed
+     * @type {unknown}
+     */
+    "close"
   ],
   setup(t, o) {
     const s = l("dialog", I), e = r(null);
@@ -2186,7 +2191,8 @@ const yt = d({
           blur: (t) => this.$emit("blur", t),
           keydown: (t) => this.$emit("keydown", t),
           keyup: (t) => this.$emit("keyup", t),
-          input: (t) => this.$emit("input", t)
+          input: (t) => this.$emit("input", t),
+          close: (t) => this.$emit("close", t)
         }
       },
       [
@@ -2219,7 +2225,8 @@ const yt = d({
         onBlur: (t) => this.$emit("blur", t),
         onKeydown: (t) => this.$emit("keydown", t),
         onKeyup: (t) => this.$emit("keyup", t),
-        onInput: (t) => this.$emit("input", t)
+        onInput: (t) => this.$emit("input", t),
+        onClose: (t) => this.$emit("close", t)
       },
       [
         // @slot graphic Use the graphic slot in order to replace the icon.
@@ -2233,7 +2240,7 @@ const yt = d({
       ]
     );
   }
-}), Tt = d({
+}), It = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2326,7 +2333,7 @@ const yt = d({
       []
     );
   }
-}), Kt = d({
+}), qt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -2532,7 +2539,7 @@ const yt = d({
       []
     );
   }
-}), It = d({
+}), zt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2638,7 +2645,7 @@ const yt = d({
       ]
     );
   }
-}), qt = d({
+}), Ft = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2749,7 +2756,7 @@ const yt = d({
       ]
     );
   }
-}), zt = d({
+}), Lt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2857,7 +2864,7 @@ const yt = d({
       ]
     );
   }
-}), Ft = d({
+}), Pt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2981,7 +2988,7 @@ const yt = d({
       ]
     );
   }
-}), Lt = d({
+}), Dt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -3126,7 +3133,7 @@ const yt = d({
       []
     );
   }
-}), Pt = d({
+}), Mt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -3208,7 +3215,7 @@ const yt = d({
       ]
     );
   }
-}), Dt = d({
+}), Ot = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3311,7 +3318,7 @@ const yt = d({
       ]
     );
   }
-}), Mt = d({
+}), At = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3456,7 +3463,7 @@ const yt = d({
       []
     );
   }
-}), Ot = d({
+}), Et = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3562,7 +3569,7 @@ const yt = d({
       ]
     );
   }
-}), At = d({
+}), Ht = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -3827,7 +3834,7 @@ const yt = d({
       []
     );
   }
-}), Et = d({
+}), Gt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3961,7 +3968,7 @@ const yt = d({
       []
     );
   }
-}), Ht = d({
+}), Rt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4110,7 +4117,7 @@ const yt = d({
       ]
     );
   }
-}), Gt = d({
+}), Wt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4224,7 +4231,7 @@ const yt = d({
       []
     );
   }
-}), Rt = d({
+}), jt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4335,7 +4342,7 @@ const yt = d({
       []
     );
   }
-}), Wt = d({
+}), Ut = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4486,7 +4493,7 @@ const yt = d({
       []
     );
   }
-}), jt = d({
+}), Jt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -4621,7 +4628,7 @@ const yt = d({
       ]
     );
   }
-}), Ut = d({
+}), Qt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -4832,7 +4839,7 @@ const yt = d({
       ]
     );
   }
-}), Jt = d({
+}), Xt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4946,7 +4953,7 @@ const yt = d({
       ]
     );
   }
-}), Qt = d({
+}), Yt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -5137,7 +5144,7 @@ const yt = d({
       []
     );
   }
-}), Xt = d({
+}), Zt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5227,7 +5234,7 @@ const yt = d({
       []
     );
   }
-}), Yt = d({
+}), _t = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -5342,7 +5349,7 @@ const yt = d({
       []
     );
   }
-}), Zt = d({
+}), te = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5475,7 +5482,7 @@ const yt = d({
       ]
     );
   }
-}), _t = d({
+}), ee = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5557,7 +5564,7 @@ const yt = d({
       ]
     );
   }
-}), te = d({
+}), ie = d({
   props: {
     /**
      * The success text for the form element.
@@ -5665,7 +5672,7 @@ const yt = d({
       []
     );
   }
-}), ee = d({
+}), oe = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -5910,7 +5917,7 @@ const yt = d({
       []
     );
   }
-}), ie = d({
+}), se = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -6063,7 +6070,7 @@ const yt = d({
       []
     );
   }
-}), oe = d({
+}), ne = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -6198,7 +6205,7 @@ const yt = d({
       ]
     );
   }
-}), se = d({
+}), ae = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -6289,53 +6296,289 @@ const yt = d({
       ]
     );
   }
+}), re = d({
+  props: {
+    /**
+     * A decorative icon the custom element should have.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The connotation the tag should have.
+     */
+    connotation: { type: String, default: void 0 },
+    /**
+     * The shape the tag should have.
+     */
+    shape: { type: String, default: void 0 },
+    /**
+     * The appearance the tag should have.
+     */
+    appearance: { type: String, default: void 0 },
+    /**
+     * Indicates the tag's label.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * indicates whether the tag is removable
+     */
+    removable: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is disabled
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is selectable
+     */
+    selectable: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is selected
+     */
+    selected: { type: Boolean, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input"
+  ],
+  setup(t, o) {
+    const s = l("tag", dt), e = r(null);
+    return o.expose({
+      remove() {
+        var i;
+        return (i = e.value) == null ? void 0 : i.remove();
+      },
+      handleKeydown(i) {
+        var u;
+        return (u = e.value) == null ? void 0 : u.handleKeydown(i);
+      },
+      handleClick() {
+        var i;
+        return (i = e.value) == null ? void 0 : i.handleClick();
+      }
+    }), { componentName: s, element: e };
+  },
+  render() {
+    return a ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: {
+          ...this.icon !== void 0 ? { icon: this.icon } : {},
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+          ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+          ...this.shape !== void 0 ? { shape: this.shape } : {},
+          ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+          ...this.label !== void 0 ? { label: this.label } : {},
+          ...this.removable !== void 0 ? { removable: this.removable } : {},
+          ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+          ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
+          ...this.selected !== void 0 ? { selected: this.selected } : {}
+        },
+        class: "vvd-root",
+        on: {
+          click: (t) => this.$emit("click", t),
+          focus: (t) => this.$emit("focus", t),
+          blur: (t) => this.$emit("blur", t),
+          keydown: (t) => this.$emit("keydown", t),
+          keyup: (t) => this.$emit("keyup", t),
+          input: (t) => this.$emit("input", t)
+        }
+      },
+      []
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...this.icon !== void 0 ? { icon: this.icon } : {},
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.shape !== void 0 ? { shape: this.shape } : {},
+        ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.removable !== void 0 ? { removable: this.removable } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
+        ...this.selected !== void 0 ? { selected: this.selected } : {},
+        onClick: (t) => this.$emit("click", t),
+        onFocus: (t) => this.$emit("focus", t),
+        onBlur: (t) => this.$emit("blur", t),
+        onKeydown: (t) => this.$emit("keydown", t),
+        onKeyup: (t) => this.$emit("keyup", t),
+        onInput: (t) => this.$emit("input", t)
+      },
+      []
+    );
+  }
+}), de = d({
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input"
+  ],
+  setup(t, o) {
+    const s = l("tag-group", lt), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
+  },
+  render() {
+    return a ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: { ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {} },
+        class: "vvd-root",
+        on: {
+          click: (t) => this.$emit("click", t),
+          focus: (t) => this.$emit("focus", t),
+          blur: (t) => this.$emit("blur", t),
+          keydown: (t) => this.$emit("keydown", t),
+          keyup: (t) => this.$emit("keyup", t),
+          input: (t) => this.$emit("input", t)
+        }
+      },
+      [this.$slots.default]
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        onClick: (t) => this.$emit("click", t),
+        onFocus: (t) => this.$emit("focus", t),
+        onBlur: (t) => this.$emit("blur", t),
+        onKeydown: (t) => this.$emit("keydown", t),
+        onKeyup: (t) => this.$emit("keyup", t),
+        onInput: (t) => this.$emit("input", t)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
 });
 export {
-  pt as VAccordion,
-  mt as VAccordionItem,
-  vt as VActionGroup,
-  yt as VAvatar,
-  ft as VBadge,
-  $t as VBanner,
-  kt as VBreadcrumb,
-  gt as VBreadcrumbItem,
-  bt as VButton,
-  Ct as VCalendar,
-  wt as VCalendarEvent,
-  St as VCard,
-  xt as VCheckbox,
-  Nt as VCombobox,
-  Bt as VDataGrid,
-  Vt as VDialog,
-  Tt as VDivider,
-  Kt as VFab,
-  It as VHeader,
-  qt as VIcon,
-  zt as VLayout,
-  Ft as VMenu,
-  Lt as VMenuItem,
-  Pt as VNav,
-  Dt as VNavDisclosure,
-  Mt as VNavItem,
-  Ot as VNote,
-  At as VNumberField,
-  Et as VOption,
-  Ht as VPopup,
-  Gt as VProgress,
-  Rt as VProgressRing,
-  Wt as VRadio,
-  jt as VRadioGroup,
-  Ut as VSelect,
-  Jt as VSideDrawer,
-  Qt as VSlider,
-  Xt as VSwitch,
-  Yt as VTab,
-  _t as VTabPanel,
-  Zt as VTabs,
-  te as VTextArea,
-  ee as VTextField,
-  ie as VTooltip,
-  oe as VTreeItem,
-  se as VTreeView,
-  ct as setCustomComponentPrefix
+  vt as VAccordion,
+  yt as VAccordionItem,
+  ft as VActionGroup,
+  $t as VAvatar,
+  kt as VBadge,
+  gt as VBanner,
+  bt as VBreadcrumb,
+  Ct as VBreadcrumbItem,
+  wt as VButton,
+  St as VCalendar,
+  xt as VCalendarEvent,
+  Nt as VCard,
+  Bt as VCheckbox,
+  Vt as VCombobox,
+  Kt as VDataGrid,
+  Tt as VDialog,
+  It as VDivider,
+  qt as VFab,
+  zt as VHeader,
+  Ft as VIcon,
+  Lt as VLayout,
+  Pt as VMenu,
+  Dt as VMenuItem,
+  Mt as VNav,
+  Ot as VNavDisclosure,
+  At as VNavItem,
+  Et as VNote,
+  Ht as VNumberField,
+  Gt as VOption,
+  Rt as VPopup,
+  Wt as VProgress,
+  jt as VProgressRing,
+  Ut as VRadio,
+  Jt as VRadioGroup,
+  Qt as VSelect,
+  Xt as VSideDrawer,
+  Yt as VSlider,
+  Zt as VSwitch,
+  _t as VTab,
+  ee as VTabPanel,
+  te as VTabs,
+  re as VTag,
+  de as VTagGroup,
+  ie as VTextArea,
+  oe as VTextField,
+  se as VTooltip,
+  ne as VTreeItem,
+  ae as VTreeView,
+  mt as setCustomComponentPrefix
 };