tide-design-system 2.4.7 → 2.5.2

package/src/stories/TideAccordionItem.stories.ts

@@ -1,35 +1,42 @@
-import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideAccordionItem from '@/components/TideAccordionItem.vue';
-import { argTypeBooleanUnrequired, dataTrack, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
 type Args = InstanceType<typeof TideAccordionItem>['$props'] & {
-  handleToggle: string;
+  vModel: boolean;
 };
 
 const render = (args: Args, context: StoryContext) => ({
   components: { TideAccordionItem },
   methods: {
     doSomething,
-    handleToggle: () => {
-      action('TideAccordionItem toggled')({});
-      context.updateArgs({ ...args, isExpanded: context.args.isExpanded !== true });
+    handleIsExpandedChange: (value: boolean) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const isExpanded = ref(args.vModel);
 
-      try {
-        const callback = eval(args.handleToggle);
+    watch(isExpanded, () => {
+      args.vModel = isExpanded.value;
+    });
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "toggle" control.');
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        isExpanded.value = newValue;
       }
-    },
+    );
+
+    return {
+      args,
+      isExpanded,
+    };
   },
-  setup: () => ({ args }),
-  template: `<TideAccordionItem @toggle="handleToggle" v-bind="args">{{ args.default }}</TideAccordionItem>`,
+  template: `<TideAccordionItem v-bind="args" v-model="isExpanded" @update:modelValue="handleIsExpandedChange">{{ args.default }}</TideAccordionItem>`,
 });
 
 export default {
@@ -43,17 +50,6 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    handleToggle: {
-      control: 'text',
-      description: 'JS code or function to execute on toggle event',
-      isEmit: true,
-      name: 'toggle',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(isExpanded: boolean) => void' },
-      },
-    },
     hasBottomDivider: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to include bottom divider',
@@ -62,10 +58,6 @@ export default {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to include bottom divider',
     },
-    isExpanded: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether body content should be displayed',
-    },
     isOptional: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to show "(optional)" indicator after label',
@@ -78,17 +70,24 @@ export default {
         type: { summary: 'string' },
       },
     },
-    toggle: disabledArgType,
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
+      },
+    },
   },
   args: {
     dataTrack: '',
     default: 'Lorem Ipsum',
-    handleToggle: 'doSomething',
     hasBottomDivider: undefined,
     hasTopDivider: undefined,
-    isExpanded: undefined,
     isOptional: undefined,
     label: 'Demo',
+    vModel: true,
   },
   component: TideAccordionItem,
   parameters,

package/src/stories/TideButtonSegmented.stories.ts

@@ -1,13 +1,13 @@
-import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideButtonSegmented from '@/components/TideButtonSegmented.vue';
-import { change, disabledArgType, doSomething, getLabelsFromOptions, parameters } from '@/utilities/storybook';
+import { doSomething, getLabelsFromOptions, parameters } from '@/utilities/storybook';
 
 import type { Tab } from '@/types/Tab';
 import type { StoryContext } from '@storybook/vue3';
 
 type Args = InstanceType<typeof TideButtonSegmented>['$props'] & {
-  handleChange: string;
+  vModel: number;
 };
 
 const options = {
@@ -36,23 +36,30 @@ const render = (args: Args, context: StoryContext) => ({
   components: { TideButtonSegmented },
   methods: {
     doSomething,
-    handleChange: (index: number) => {
-      action(`Current tab ${index}`)(index);
-      context.updateArgs({ ...args, activeTab: index });
+    handleIndexChange: (value: number) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const currentIndex = ref(args.vModel);
 
-      try {
-        const callback = eval(args.handleChange);
+    watch(currentIndex, () => {
+      args.vModel = currentIndex.value;
+    });
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "change" control.');
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        currentIndex.value = newValue;
       }
-    },
+    );
+
+    return {
+      args,
+      currentIndex,
+    };
   },
-  setup: () => ({ args }),
-  template: '<TideButtonSegmented @change="handleChange" class="tide-display-inline-flex" v-bind="args" />',
+  template: '<TideButtonSegmented v-bind="args" v-model="currentIndex" @update:modelValue="handleIndexChange" />',
 });
 
 export default {
@@ -69,15 +76,6 @@ export default {
         defaultValue: { summary: 'None' },
       },
     },
-    change: disabledArgType,
-    handleChange: {
-      ...change,
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(tabIndex: number) => void' },
-      },
-    },
     tabs: {
       control: 'object',
       description: 'Sets label and callback for each tab',
@@ -87,11 +85,21 @@ export default {
         type: { summary: 'Tab[]' },
       },
     },
+    vModel: {
+      control: 'number',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<number>' },
+      },
+    },
   },
   args: {
     activeTab: undefined,
     handleChange: 'doSomething',
     tabs,
+    vModel: 0,
   },
   component: TideButtonSegmented,
   parameters,

package/src/stories/TideChipFilter.stories.ts

@@ -1,40 +1,46 @@
-import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideChipFilter from '@/components/TideChipFilter.vue';
-import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
+import { dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
 type Args = InstanceType<typeof TideChipFilter>['$props'] & {
-  handleClose: string;
+  vModel: boolean;
 };
 
 const render = (args: Args, context: StoryContext) => ({
   components: { TideChipFilter },
   methods: {
     doSomething,
-    handleClick: () => {
-      action('TideChipFilter clicked')({});
-      context.updateArgs({ ...args, isActive: !args.isActive });
+    handleIsActiveChange: (value: boolean) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const isActive = ref(args.vModel);
 
-      try {
-        const callback = eval(args.handleClose);
+    watch(isActive, () => {
+      args.vModel = isActive.value;
+    });
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "click" control.');
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        isActive.value = newValue;
       }
-    },
+    );
+
+    return {
+      args,
+      isActive,
+    };
   },
-  setup: () => ({ args }),
-  template: `<TideChipFilter @click="handleClick" class="tide-display-inline-flex" v-bind="args">{{ args.default }}</TideChipFilter>`,
+  template: `<TideChipFilter v-bind="args" v-model="isActive" @update:modelValue="handleIsActiveChange">{{ args.default }}</TideChipFilter>`,
 });
 
 export default {
   argTypes: {
-    click,
     dataTrack,
     default: {
       control: 'text',
@@ -45,10 +51,6 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    isActive: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether toggle is active',
-    },
     label: {
       control: 'text',
       description: 'Chip text',
@@ -57,13 +59,21 @@ export default {
         type: { summary: 'string' },
       },
     },
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
+      },
+    },
   },
   args: {
-    click: 'doSomething',
     dataTrack: '',
     default: '',
-    isActive: undefined,
     label: 'Demo',
+    vModel: false,
   },
   component: TideChipFilter,
   parameters,

package/src/stories/TideInputCheckbox.stories.ts

@@ -1,12 +1,12 @@
 import { action } from '@storybook/addon-actions';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
 import { argTypeBooleanUnrequired, dataTrack, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
 
 type Args = InstanceType<typeof TideInputCheckbox>['$props'] & {
   handleValid: string;
-  vModel: string;
+  vModel: boolean;
 };
 
 const render = (args: Args) => ({
@@ -28,13 +28,21 @@ const render = (args: Args) => ({
     },
   },
   setup() {
-    const model = ref<boolean>(false);
+    const model = ref(args.vModel);
+
+    watch(model, (v) => {
+      args.vModel = v;
+    });
+
+    watch(
+      () => args.vModel,
+      (v) => {
+        model.value = v;
+      }
+    );
 
     return {
-      args: {
-        ...args,
-        inputId: undefined, // Do not allow empty ID attribute to break the demo.
-      },
+      args,
       model,
     };
   },
@@ -109,12 +117,12 @@ export default {
       description: 'Determines whether input is required',
     },
     vModel: {
-      control: 'text',
+      control: 'boolean',
       description: 'Data binding to Vue ref',
       table: {
         category: 'Native',
         defaultValue: { summary: 'None' },
-        type: { summary: 'Ref' },
+        type: { summary: 'Ref<boolean>' },
       },
     },
     valid: disabledArgType,
@@ -130,7 +138,7 @@ export default {
     name: '',
     number: '',
     required: undefined,
-    vModel: '',
+    vModel: false,
   },
   component: TideInputCheckbox,
   parameters,

package/src/stories/TideModal.stories.ts

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { compile, h } from 'vue';
+import { compile, h, ref, watch } from 'vue';
 
 import TideButton from '@/components/TideButton.vue';
 import TideIcon from '@/components/TideIcon.vue';
@@ -26,14 +26,14 @@ type Args = InstanceType<typeof TideModal>['$props'] & {
   default: string;
   footer: string;
   handleBack: string;
-  handleChange: string;
   handleClose: string;
+  vModel: boolean;
 };
 
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
-  const argsWithValues: string[] = [`:is-open="${args.isOpen}"`];
+  const argsWithValues: string[] = [`v-model="${args.vModel}"`];
   const slotContentIndentationFixed = (args.default as string).replace(/(<\/[^>]+>)$/, `${tab}$1`);
 
   if (args.isBackButton !== undefined) argsWithValues.push(`:is-back-button="${args.isBackButton}"`);
@@ -42,7 +42,6 @@ const formatSnippet = (code: string, context: StoryContext) => {
   if (args.width !== '') argsWithValues.push(`width="${args.width}"`);
 
   if (args.handleBack !== undefined) argsWithValues.push(`@back="${args.handleBack}"`);
-  if (args.handleClose !== undefined) argsWithValues.push(`@close="${args.handleClose}"`);
 
   return (
     `<TideModal ${argsWithValues.join(' ')}>${lineBreak}` +
@@ -75,19 +74,12 @@ const render = (args: Args, context: StoryContext) => {
     }
   };
 
-  const handleClose = () => {
-    action('Modal closed')({});
-    context.updateArgs({ ...args, isOpen: false });
-    try {
-      const callback = eval(args.handleClose);
-      if (callback) callback();
-    } catch {
-      alert('Please specify a valid handler in the "close" control.');
-    }
+  const handleOpenModalClick = () => {
+    context.updateArgs({ ...args, vModel: true });
   };
 
-  const handleOpenModalClick = () => {
-    context.updateArgs({ ...args, isOpen: true });
+  const handleIsOpenChange = (value: boolean) => {
+    context.updateArgs({ ...args, vModel: value });
   };
 
   return {
@@ -96,10 +88,23 @@ const render = (args: Args, context: StoryContext) => {
       doSomething,
       doSomethingElse,
       handleBack,
-      handleClose,
+      handleIsOpenChange,
       handleOpenModalClick,
     },
     render: () => {
+      const isOpen = ref(args.vModel);
+
+      watch(isOpen, () => {
+        args.vModel = isOpen.value;
+      });
+
+      watch(
+        () => args.vModel,
+        (newValue) => {
+          isOpen.value = newValue;
+        }
+      );
+
       // Wrap compiled footer in a component with TideButton registered
       const Footer = args.footer
         ? {
@@ -119,8 +124,9 @@ const render = (args: Args, context: StoryContext) => {
           TideModal,
           {
             ...args,
-            onBack: handleBack,
-            onClose: handleClose,
+            'modelValue': isOpen.value,
+            'onBack': handleBack,
+            'onUpdate:modelValue': handleIsOpenChange,
           },
           {
             default: () => h('div', { innerHTML: args.default }),
@@ -136,7 +142,6 @@ const render = (args: Args, context: StoryContext) => {
 export default {
   argTypes: {
     back: disabledArgType,
-    close: disabledArgType,
     default: {
       control: 'text',
       description: 'Modal content',
@@ -155,7 +160,6 @@ export default {
     },
     handleBack: {
       control: 'text',
-      description: "JS function to execute when modal's back button is pressed",
       name: 'back',
       table: {
         category: 'Events',
@@ -163,16 +167,6 @@ export default {
         type: { summary: '() => void' },
       },
     },
-    handleClose: {
-      control: 'text',
-      description: 'JS function to execute when modal is closed',
-      name: 'close',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
     isBackButton: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether the back button is displayed',
@@ -187,16 +181,19 @@ export default {
         defaultValue: { summary: 'False' },
       },
     },
-    isOpen: {
-      description: 'Determines whether the Modal is displayed',
+    title: {
+      description: 'Modal title',
       table: {
-        defaultValue: { summary: 'False' },
+        defaultValue: { summary: 'None' },
       },
     },
-    title: {
-      description: 'Modal title',
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
       table: {
+        category: 'Native',
         defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
       },
     },
     width: {
@@ -210,11 +207,10 @@ export default {
     default: `Default Slot Demo`,
     footer: '<TideButton label="Footer Slot Demo" />',
     handleBack: 'doSomething',
-    handleClose: 'doSomethingElse',
     isBackButton: undefined,
     isDismissible: undefined,
-    isOpen: false,
     title: 'Modal Demo',
+    vModel: false,
     width: '',
   },
   component: TideModal,

package/src/stories/TidePagination.stories.ts

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TidePagination from '@/components/TidePagination.vue';
 import * as STANDARD_ELEMENT from '@/types/Element';
@@ -15,6 +15,7 @@ import type { StoryContext } from '@storybook/vue3';
 
 type Args = InstanceType<typeof TidePagination>['$props'] & {
   handleChange: string;
+  vModel: number;
 };
 
 const ELEMENT_BROAD = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_BROAD);
@@ -23,23 +24,30 @@ const render = (args: Args, context: StoryContext) => ({
   components: { TidePagination },
   methods: {
     doSomething,
-    handleChange: (_event: Event, index: number) => {
-      action(`Current page ${index}`)(index);
-      context.updateArgs({ ...args, pageCurrent: index });
+    handleIndexChange: (value: number) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const currentIndex = ref(args.vModel);
 
-      try {
-        const callback = eval(args.handleChange);
+    watch(currentIndex, () => {
+      args.vModel = currentIndex.value;
+    });
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "change" control.');
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        currentIndex.value = newValue;
       }
-    },
+    );
+
+    return {
+      args,
+      currentIndex,
+    };
   },
-  setup: () => ({ args }),
-  template: `<TidePagination @change="handleChange" v-bind="args" />`,
+  template: `<TidePagination v-bind="args" v-model="currentIndex" @update:modelValue="handleIndexChange" />`,
 });
 
 export default {
@@ -61,23 +69,26 @@ export default {
         type: { summary: '(pageIndex: number) => void' },
       },
     },
-    pageCurrent: {
+    pageTotal: {
       control: {
         min: 1,
         type: 'number',
       },
     },
-    pageTotal: {
-      control: {
-        min: 1,
-        type: 'number',
+    vModel: {
+      control: 'number',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<number>' },
       },
     },
   },
   args: {
     handleChange: 'doSomething',
-    pageCurrent: 1,
     pageTotal: 5,
+    vModel: 1,
   },
   component: TidePagination,
   parameters,