@vonage/vivid-vue 3.18.0 → 3.19.1

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { ref as d, version as v, onBeforeMount as f, defineComponent as u, h as s } from "vue";
-import { registerAccordion as g, registerAccordionItem as y, registerActionGroup as k, registerAlert as b, registerAvatar as S, registerBadge as $, registerBanner as C, registerBreadcrumb as w, registerBreadcrumbItem as L, registerButton as x, registerCalendar as V, registerCalendarEvent as N, registerCard as T, registerCheckbox as B, registerCombobox as z, registerDataGrid as c, registerDatePicker as K, registerDialog as M, registerDivider as D, registerEmptyState as F, registerFab as q, registerHeader as P, registerIcon as O, registerLayout as A, registerMenu as R, registerMenuItem as U, registerNav as j, registerNavDisclosure as G, registerNavItem as H, registerNote as E, registerNumberField as W, registerOption as _, registerPagination as J, registerProgress as Z, registerProgressRing as X, registerRadio as Q, registerRadioGroup as Y, registerSelect as I, registerSideDrawer as ee, registerSlider as ie, registerSwitch as te, registerTab as oe, registerTabs as le, registerTabPanel as se, registerTextArea as ae, registerTextField as ne, registerToggletip as re, registerTooltip as de, registerTreeItem as ue, registerTreeView as he, registerTag as pe, registerTagGroup as me } from "@vonage/vivid";
+import { registerAccordion as g, registerAccordionItem as y, registerActionGroup as k, registerAlert as b, registerAvatar as S, registerBadge as $, registerBanner as C, registerBreadcrumb as w, registerBreadcrumbItem as L, registerButton as x, registerCalendar as V, registerCalendarEvent as N, registerCard as B, registerCheckbox as T, registerCombobox as z, registerDataGrid as c, registerDatePicker as K, registerDialog as M, registerDivider as D, registerEmptyState as F, registerFab as q, registerHeader as P, registerIcon as O, registerLayout as A, registerMenu as R, registerMenuItem as U, registerNav as j, registerNavDisclosure as G, registerNavItem as H, registerNote as E, registerNumberField as W, registerOption as _, registerPagination as J, registerProgress as Z, registerProgressRing as X, registerRadio as Q, registerRadioGroup as Y, registerSelect as I, registerSideDrawer as ee, registerSlider as ie, registerSwitch as te, registerTab as oe, registerTabs as le, registerTabPanel as se, registerTextArea as ae, registerTextField as ne, registerToggletip as re, registerTooltip as de, registerTreeItem as ue, registerTreeView as he, registerTag as pe, registerTagGroup as me } from "@vonage/vivid";
 const m = d("vvd3");
 function ke(e) {
   m.value = e;
@@ -1138,7 +1138,7 @@ const Ce = u({
       []
     );
   }
-}), Te = u({
+}), Be = u({
   name: "VButton",
   props: {
     /**
@@ -1369,7 +1369,7 @@ const Ce = u({
       []
     );
   }
-}), Be = u({
+}), Te = u({
   name: "VCalendar",
   props: {
     /**
@@ -1721,7 +1721,7 @@ const Ce = u({
     "input"
   ],
   setup(e, o) {
-    const l = h("card", T), i = d(null);
+    const l = h("card", B), i = d(null);
     return o.expose({}), { componentName: l, element: i };
   },
   render() {
@@ -1898,6 +1898,11 @@ const Ce = u({
      * @type {Event}
      */
     "input",
+    /**
+     * Emits a custom change event when the checked state changes
+     * @type {unknown}
+     */
+    "change",
     /**
      * Emits a custom change event when the checked state changes
      * @type {boolean}
@@ -1905,7 +1910,7 @@ const Ce = u({
     "update:modelValue"
   ],
   setup(e, o) {
-    const l = h("checkbox", B), i = d(null);
+    const l = h("checkbox", T), i = d(null);
     return o.expose({}), { componentName: l, element: i };
   },
   render() {
@@ -1937,7 +1942,9 @@ const Ce = u({
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
           input: (e) => this.$emit("input", e),
-          change: (e) => this.$emit("update:modelValue", e.target.checked)
+          change: (e) => {
+            this.$emit("update:modelValue", e.target.checked), this.$emit("change", e);
+          }
         }
       },
       []
@@ -1966,7 +1973,9 @@ const Ce = u({
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
         onInput: (e) => this.$emit("input", e),
-        onChange: (e) => this.$emit("update:modelValue", e.target.checked)
+        onChange: (e) => {
+          this.$emit("update:modelValue", e.target.checked), this.$emit("change", e);
+        }
       },
       []
     );
@@ -2073,6 +2082,11 @@ const Ce = u({
      * @type {Event}
      */
     "input",
+    /**
+     * Fires a custom 'change' event when the value updates
+     * @type {unknown}
+     */
+    "change",
     /**
      * Fires a custom 'change' event when the value updates
      * @type {string}
@@ -2147,7 +2161,9 @@ const Ce = u({
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
           input: (e) => this.$emit("input", e),
-          change: (e) => this.$emit("update:modelValue", e.target.value)
+          change: (e) => {
+            this.$emit("update:modelValue", e.target.value), this.$emit("change", e);
+          }
         }
       },
       [this.$slots.default]
@@ -2175,7 +2191,9 @@ const Ce = u({
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
         onInput: (e) => this.$emit("input", e),
-        onChange: (e) => this.$emit("update:modelValue", e.target.value)
+        onChange: (e) => {
+          this.$emit("update:modelValue", e.target.value), this.$emit("change", e);
+        }
       },
       [
         // @ts-ignore
@@ -2632,6 +2650,11 @@ const Ce = u({
      * @type {KeyboardEvent}
      */
     "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
     /**
      * Fires when the value of an element has been changed.
      * @type {string}
@@ -2665,7 +2688,9 @@ const Ce = u({
           blur: (e) => this.$emit("blur", e),
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
-          input: (e) => this.$emit("update:modelValue", e.target.value)
+          input: (e) => {
+            this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+          }
         }
       },
       []
@@ -2688,7 +2713,9 @@ const Ce = u({
         onBlur: (e) => this.$emit("blur", e),
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
-        onInput: (e) => this.$emit("update:modelValue", e.target.value)
+        onInput: (e) => {
+          this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+        }
       },
       []
     );
@@ -3836,6 +3863,11 @@ const Ce = u({
      * @type {unknown}
      */
     "expanded-change",
+    /**
+     * Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+     * @type {unknown}
+     */
+    "change",
     /**
      * Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
      * @type {boolean}
@@ -3870,12 +3902,16 @@ const Ce = u({
           keyup: (e) => this.$emit("keyup", e),
           input: (e) => this.$emit("input", e),
           "expanded-change": (e) => this.$emit("expanded-change", e),
-          change: (e) => this.$emit("update:modelValue", e.target.checked)
+          change: (e) => {
+            this.$emit("update:modelValue", e.target.checked), this.$emit("change", e);
+          }
         }
       },
       [
         // @slot meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-        a("meta", this.$slots.meta)
+        a("meta", this.$slots.meta),
+        // @slot submenu Assign a Menu to the `submenu` slot to add a submenu.
+        a("submenu", this.$slots.submenu)
       ]
     ) : s(
       this.componentName,
@@ -3897,11 +3933,15 @@ const Ce = u({
         onKeyup: (e) => this.$emit("keyup", e),
         onInput: (e) => this.$emit("input", e),
         onExpandedChange: (e) => this.$emit("expanded-change", e),
-        onChange: (e) => this.$emit("update:modelValue", e.target.checked)
+        onChange: (e) => {
+          this.$emit("update:modelValue", e.target.checked), this.$emit("change", e);
+        }
       },
       [
         // @slot meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-        a("meta", this.$slots.meta)
+        a("meta", this.$slots.meta),
+        // @slot submenu Assign a Menu to the `submenu` slot to add a submenu.
+        a("submenu", this.$slots.submenu)
       ]
     );
   }
@@ -4490,14 +4530,19 @@ const Ce = u({
     "keyup",
     /**
      * Fires a custom 'input' event when the value has changed
-     * @type {string}
+     * @type {unknown}
      */
-    "update:modelValue",
+    "input",
     /**
      * Fires a custom 'change' event when the value has changed
      * @type {unknown}
      */
-    "change"
+    "change",
+    /**
+     * Fires a custom 'input' event when the value has changed
+     * @type {string}
+     */
+    "update:modelValue"
   ],
   setup(e, o) {
     const l = h("number-field", W), i = d(null);
@@ -4571,7 +4616,9 @@ const Ce = u({
           blur: (e) => this.$emit("blur", e),
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
-          input: (e) => this.$emit("update:modelValue", e.target.value),
+          input: (e) => {
+            this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+          },
           change: (e) => this.$emit("change", e)
         }
       },
@@ -4611,7 +4658,9 @@ const Ce = u({
         onBlur: (e) => this.$emit("blur", e),
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
-        onInput: (e) => this.$emit("update:modelValue", e.target.value),
+        onInput: (e) => {
+          this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+        },
         onChange: (e) => this.$emit("change", e)
       },
       []
@@ -4807,7 +4856,12 @@ const Ce = u({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Fires when the page changes.
+     * @type {Event}
+     */
+    "pagination-change"
   ],
   setup(e, o) {
     const l = h("pagination", J), i = d(null);
@@ -4846,7 +4900,8 @@ const Ce = u({
           blur: (e) => this.$emit("blur", e),
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
-          input: (e) => this.$emit("input", e)
+          input: (e) => this.$emit("input", e),
+          "pagination-change": (e) => this.$emit("pagination-change", e)
         }
       },
       []
@@ -4866,7 +4921,8 @@ const Ce = u({
         onBlur: (e) => this.$emit("blur", e),
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
-        onInput: (e) => this.$emit("input", e)
+        onInput: (e) => this.$emit("input", e),
+        onPaginationChange: (e) => this.$emit("pagination-change", e)
       },
       []
     );
@@ -5330,6 +5386,11 @@ const Ce = u({
      * @type {Event}
      */
     "input",
+    /**
+     * Fires a custom 'change' event when the value changes
+     * @type {unknown}
+     */
+    "change",
     /**
      * Fires a custom 'change' event when the value changes
      * @type {string}
@@ -5362,7 +5423,9 @@ const Ce = u({
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
           input: (e) => this.$emit("input", e),
-          change: (e) => this.$emit("update:modelValue", e.target.value)
+          change: (e) => {
+            this.$emit("update:modelValue", e.target.value), this.$emit("change", e);
+          }
         }
       },
       [this.$slots.default]
@@ -5384,7 +5447,9 @@ const Ce = u({
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
         onInput: (e) => this.$emit("input", e),
-        onChange: (e) => this.$emit("update:modelValue", e.target.value)
+        onChange: (e) => {
+          this.$emit("update:modelValue", e.target.value), this.$emit("change", e);
+        }
       },
       [
         // @ts-ignore
@@ -5513,14 +5578,19 @@ const Ce = u({
     "keyup",
     /**
      * Fires a custom 'input' event when the value updates
-     * @type {string}
+     * @type {unknown}
      */
-    "update:modelValue",
+    "input",
     /**
      * Fires a custom 'change' event when the value updates
      * @type {unknown}
      */
-    "change"
+    "change",
+    /**
+     * Fires a custom 'input' event when the value updates
+     * @type {string}
+     */
+    "update:modelValue"
   ],
   setup(e, o) {
     const l = h("select", I), i = d(null);
@@ -5592,7 +5662,9 @@ const Ce = u({
           blur: (e) => this.$emit("blur", e),
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
-          input: (e) => this.$emit("update:modelValue", e.target.value),
+          input: (e) => {
+            this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+          },
           change: (e) => this.$emit("change", e)
         }
       },
@@ -5632,7 +5704,9 @@ const Ce = u({
         onBlur: (e) => this.$emit("blur", e),
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
-        onInput: (e) => this.$emit("update:modelValue", e.target.value),
+        onInput: (e) => {
+          this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+        },
         onChange: (e) => this.$emit("change", e)
       },
       [
@@ -5859,6 +5933,11 @@ const Ce = u({
      * @type {Event}
      */
     "input",
+    /**
+     * Fires a custom 'change' event when the slider value changes
+     * @type {unknown}
+     */
+    "change",
     /**
      * Fires a custom 'change' event when the slider value changes
      * @type {string}
@@ -5919,7 +5998,9 @@ const Ce = u({
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
           input: (e) => this.$emit("input", e),
-          change: (e) => this.$emit("update:modelValue", e.target.value)
+          change: (e) => {
+            this.$emit("update:modelValue", e.target.value), this.$emit("change", e);
+          }
         }
       },
       []
@@ -5947,13 +6028,19 @@ const Ce = u({
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
         onInput: (e) => this.$emit("input", e),
-        onChange: (e) => this.$emit("update:modelValue", e.target.value)
+        onChange: (e) => {
+          this.$emit("update:modelValue", e.target.value), this.$emit("change", e);
+        }
       },
       []
     );
   }
 }), ri = u({
   name: "VSwitch",
+  model: r ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5966,7 +6053,11 @@ const Ce = u({
      * Indicates the switch's label.
      */
     label: { type: String, default: void 0 },
-    connotation: { type: String, default: void 0 }
+    connotation: { type: String, default: void 0 },
+    /**
+     * The current checked state of the switch.
+     */
+    modelValue: { type: Boolean, default: void 0 }
   },
   emits: [
     /**
@@ -5998,7 +6089,17 @@ const Ce = u({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Emitted when the checked state of the switch changes.
+     * @type {Event}
+     */
+    "change",
+    /**
+     * Emitted when the checked state of the switch changes.
+     * @type {boolean}
+     */
+    "update:modelValue"
   ],
   setup(e, o) {
     const l = h("switch", te), i = d(null);
@@ -6012,7 +6113,8 @@ const Ce = u({
         attrs: {
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.label !== void 0 ? { label: this.label } : {},
-          ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
+          ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+          ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {}
         },
         class: "vvd-component",
         on: {
@@ -6021,7 +6123,10 @@ const Ce = u({
           blur: (e) => this.$emit("blur", e),
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
-          input: (e) => this.$emit("input", e)
+          input: (e) => this.$emit("input", e),
+          change: (e) => {
+            this.$emit("update:modelValue", e.target.checked), this.$emit("change", e);
+          }
         }
       },
       []
@@ -6033,12 +6138,16 @@ const Ce = u({
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
         onClick: (e) => this.$emit("click", e),
         onFocus: (e) => this.$emit("focus", e),
         onBlur: (e) => this.$emit("blur", e),
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
-        onInput: (e) => this.$emit("input", e)
+        onInput: (e) => this.$emit("input", e),
+        onChange: (e) => {
+          this.$emit("update:modelValue", e.target.checked), this.$emit("change", e);
+        }
       },
       []
     );
@@ -6437,6 +6546,11 @@ const Ce = u({
      * @type {KeyboardEvent}
      */
     "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
     /**
      * Fires when the value of an element has been changed.
      * @type {string}
@@ -6460,7 +6574,9 @@ const Ce = u({
           blur: (e) => this.$emit("blur", e),
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
-          input: (e) => this.$emit("update:modelValue", e.target.value)
+          input: (e) => {
+            this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+          }
         }
       },
       []
@@ -6475,7 +6591,9 @@ const Ce = u({
         onBlur: (e) => this.$emit("blur", e),
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
-        onInput: (e) => this.$emit("update:modelValue", e.target.value)
+        onInput: (e) => {
+          this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+        }
       },
       []
     );
@@ -6616,14 +6734,19 @@ const Ce = u({
     "keyup",
     /**
      * Fires when the value of an element has been changed.
-     * @type {string}
+     * @type {Event}
      */
-    "update:modelValue",
+    "input",
     /**
      * Fires a custom 'change' event when the value has changed
      * @type {unknown}
      */
-    "change"
+    "change",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {string}
+     */
+    "update:modelValue"
   ],
   setup(e, o) {
     const l = h("text-field", ne), i = d(null);
@@ -6683,7 +6806,9 @@ const Ce = u({
           blur: (e) => this.$emit("blur", e),
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
-          input: (e) => this.$emit("update:modelValue", e.target.value),
+          input: (e) => {
+            this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+          },
           change: (e) => this.$emit("change", e)
         }
       },
@@ -6728,7 +6853,9 @@ const Ce = u({
         onBlur: (e) => this.$emit("blur", e),
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
-        onInput: (e) => this.$emit("update:modelValue", e.target.value),
+        onInput: (e) => {
+          this.$emit("update:modelValue", e.target.value), this.$emit("input", e);
+        },
         onChange: (e) => this.$emit("change", e)
       },
       [
@@ -7453,8 +7580,8 @@ export {
   xe as VBanner,
   Ve as VBreadcrumb,
   Ne as VBreadcrumbItem,
-  Te as VButton,
-  Be as VCalendar,
+  Be as VButton,
+  Te as VCalendar,
   ze as VCalendarEvent,
   Ke as VCard,
   Me as VCheckbox,