@vonage/vivid-vue 3.19.1 → 3.20.0

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 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";
+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";
 const m = d("vvd3");
 function ke(e) {
   m.value = e;
@@ -1138,7 +1138,7 @@ const Ce = u({
       []
     );
   }
-}), Be = u({
+}), Te = u({
   name: "VButton",
   props: {
     /**
@@ -1369,7 +1369,7 @@ const Ce = u({
       []
     );
   }
-}), Te = u({
+}), Be = u({
   name: "VCalendar",
   props: {
     /**
@@ -1721,7 +1721,7 @@ const Ce = u({
     "input"
   ],
   setup(e, o) {
-    const l = h("card", B), i = d(null);
+    const l = h("card", T), i = d(null);
     return o.expose({}), { componentName: l, element: i };
   },
   render() {
@@ -1910,7 +1910,7 @@ const Ce = u({
     "update:modelValue"
   ],
   setup(e, o) {
-    const l = h("checkbox", T), i = d(null);
+    const l = h("checkbox", B), i = d(null);
     return o.expose({}), { componentName: l, element: i };
   },
   render() {
@@ -2584,6 +2584,18 @@ const Ce = u({
     event: "update:modelValue"
   } : void 0,
   props: {
+    /**
+     * The helper text for the form element.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * The error text for the form element.
+     */
+    errorText: { type: String, default: void 0 },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -2592,17 +2604,17 @@ const Ce = u({
       default: void 0
     },
     /**
-     * The label text of the date-picker.
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
-    label: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
     /**
-     * The helper-text text of the date-picker.
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
      */
-    helperText: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
     /**
-     * The error-text text of the date-picker.
+     * Require the field to be completed prior to form submission.
      */
-    errorText: { type: String, default: void 0 },
+    required: { type: Boolean, default: void 0 },
     /**
      * The earliest accepted date of the date-picker.
      */
@@ -2612,13 +2624,13 @@ const Ce = u({
      */
     max: { type: String, default: void 0 },
     /**
-     * The currently selected date of the date-picker.
+     * The initial value of the date-picker.
      */
     modelValue: { type: String, default: void 0 },
     /**
-     * Whether the date-picker is disabled.
+     * The current value of the date-picker.
      */
-    disabled: { type: Boolean, default: void 0 },
+    currentValue: { type: String, default: void 0 },
     /**
      * Whether the date-picker is readonly.
      */
@@ -2663,7 +2675,16 @@ const Ce = u({
   ],
   setup(e, o) {
     const l = h("date-picker", K), i = d(null);
-    return o.expose({}), { componentName: l, element: i };
+    return o.expose({
+      validate() {
+        var t;
+        return (t = i.value) == null ? void 0 : t.validate();
+      },
+      _presentationValueChanged() {
+        var t;
+        return (t = i.value) == null ? void 0 : t._presentationValueChanged();
+      }
+    }), { componentName: l, element: i };
   },
   render() {
     return r ? s(
@@ -2671,14 +2692,17 @@ const Ce = u({
       {
         ref: "element",
         attrs: {
-          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-          ...this.label !== void 0 ? { label: this.label } : {},
           ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+          ...this.label !== void 0 ? { label: this.label } : {},
           ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+          ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+          ...this.name !== void 0 ? { name: this.name } : {},
+          ...this.required !== void 0 ? { required: this.required } : {},
           ...this.min !== void 0 ? { min: this.min } : {},
           ...this.max !== void 0 ? { max: this.max } : {},
           ...this.modelValue !== void 0 ? { value: this.modelValue } : {},
-          ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+          ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
           ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
         },
         class: "vvd-component",
@@ -2699,14 +2723,17 @@ const Ce = u({
       {
         ref: "element",
         class: "vvd-component",
-        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.label !== void 0 ? { label: this.label } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
         ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.name !== void 0 ? { name: this.name } : {},
+        ...this.required !== void 0 ? { required: this.required } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
         ...this.max !== void 0 ? { max: this.max } : {},
         ...this.modelValue !== void 0 ? { value: this.modelValue } : {},
-        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.currentValue !== void 0 ? { "current-value": this.currentValue } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         onClick: (e) => this.$emit("click", e),
         onFocus: (e) => this.$emit("focus", e),
@@ -3253,7 +3280,10 @@ const Ce = u({
           input: (e) => this.$emit("input", e)
         }
       },
-      []
+      [
+        // @slot icon Slot to add an icon to fab.
+        a("icon", this.$slots.icon)
+      ]
     ) : s(
       this.componentName,
       {
@@ -3285,7 +3315,10 @@ const Ce = u({
         onKeyup: (e) => this.$emit("keyup", e),
         onInput: (e) => this.$emit("input", e)
       },
-      []
+      [
+        // @slot icon Slot to add an icon to fab.
+        a("icon", this.$slots.icon)
+      ]
     );
   }
 }), Ge = u({
@@ -4417,6 +4450,10 @@ const Ce = u({
      * The label for the form element.
      */
     label: { type: String, default: void 0 },
+    /**
+     * The error text for the form element.
+     */
+    errorText: { type: String, default: void 0 },
     /**
      * A decorative icon the custom element should have.
      * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
@@ -4555,25 +4592,23 @@ const Ce = u({
         return (t = i.value) == null ? void 0 : t.validate();
       },
       /**
-       * Increments the value using the step value
+       * Selects all the text in the number field
        */
+      select() {
+        var t;
+        return (t = i.value) == null ? void 0 : t.select();
+      },
+      stepChanged(t, n) {
+        var p;
+        return (p = i.value) == null ? void 0 : p.stepChanged(t, n);
+      },
       stepUp() {
         var t;
         return (t = i.value) == null ? void 0 : t.stepUp();
       },
-      /**
-       * Decrements the value using the step value
-       */
       stepDown() {
         var t;
         return (t = i.value) == null ? void 0 : t.stepDown();
-      },
-      /**
-       * Selects all the text in the number field
-       */
-      select() {
-        var t;
-        return (t = i.value) == null ? void 0 : t.select();
       }
     }), { componentName: l, element: i };
   },
@@ -4587,6 +4622,7 @@ const Ce = u({
           ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
           ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
           ...this.label !== void 0 ? { label: this.label } : {},
+          ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
           ...this.icon !== void 0 ? { icon: this.icon } : {},
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -4632,6 +4668,7 @@ const Ce = u({
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -6252,7 +6289,10 @@ const Ce = u({
           input: (e) => this.$emit("input", e)
         }
       },
-      []
+      [
+        // @slot icon Slot to add an icon to tab.
+        a("icon", this.$slots.icon)
+      ]
     ) : s(
       this.componentName,
       {
@@ -6274,7 +6314,10 @@ const Ce = u({
         onKeyup: (e) => this.$emit("keyup", e),
         onInput: (e) => this.$emit("input", e)
       },
-      []
+      [
+        // @slot icon Slot to add an icon to tab.
+        a("icon", this.$slots.icon)
+      ]
     );
   }
 }), ui = u({
@@ -7580,8 +7623,8 @@ export {
   xe as VBanner,
   Ve as VBreadcrumb,
   Ne as VBreadcrumbItem,
-  Be as VButton,
-  Te as VCalendar,
+  Te as VButton,
+  Be as VCalendar,
   ze as VCalendarEvent,
   Ke as VCard,
   Me as VCheckbox,