tide-design-system 2.4.7 → 2.5.0

package/src/stories/TideSheet.stories.ts

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideButton from '@/components/TideButton.vue';
 import TideSheet from '@/components/TideSheet.vue';
@@ -17,6 +18,7 @@ type Args = InstanceType<typeof TideSheet>['$props'] & {
   default: string;
   handleBack: string;
   handleClose: string;
+  vModel: boolean;
 };
 
 const formatSnippet = (code: string, context: StoryContext) => {
@@ -59,28 +61,32 @@ const render = (args: Args, context: StoryContext) => ({
         alert('Please specify a valid handler in the "back" control.');
       }
     },
-    handleClose: () => {
-      action('Sheet closed')({});
-      context.updateArgs({ ...args, isOpen: false });
+    handleIsOpenChange: (value: boolean) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const isOpen = ref(args.vModel);
 
-      try {
-        const callback = eval(args.handleClose);
+    watch(isOpen, () => {
+      args.vModel = isOpen.value;
+    });
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "close" control.');
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        isOpen.value = newValue;
       }
-    },
-    handleOpenSheetClick: () => {
-      context.updateArgs({ ...args, isOpen: true });
-    },
+    );
+
+    return {
+      args,
+      isOpen,
+    };
   },
-  setup: () => ({ args }),
   template: `
-  <TideButton label="Open sheet" @click="handleOpenSheetClick" />
-  <TideSheet v-bind="args" @close="handleClose" @back="handleBack">
+  <TideButton label="Open sheet" @click="handleIsOpenChange(true)" />
+  <TideSheet v-bind="args" v-model="isOpen" @back="handleBack" @update:modelValue="handleIsOpenChange">
     ${args.default}
   </TideSheet>`,
 });
@@ -107,16 +113,6 @@ export default {
         type: { summary: '() => void' },
       },
     },
-    handleClose: {
-      control: 'text',
-      description: 'JS function to execute when sheet is closed',
-      name: 'close',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
     isBackButton: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether the back button is displayed',
@@ -130,13 +126,22 @@ export default {
         defaultValue: { summary: 'False' },
       },
     },
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
+      },
+    },
   },
   args: {
     default: `<div>${lineBreak}${tab}Default Slot Demo${lineBreak}</div>`,
     handleBack: 'doSomething',
     handleClose: 'doSomethingElse',
     isBackButton: undefined,
-    isOpen: false,
+    vModel: false,
   },
   component: TideSheet,
   parameters,

package/src/stories/TideSwitch.stories.ts

@@ -1,70 +1,69 @@
-import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideSwitch from '@/components/TideSwitch.vue';
-import {
-  argTypeBooleanUnrequired,
-  change,
-  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 TideSwitch>['$props'] & {
-  handleChange: string;
+  vModel: true;
 };
 
 const render = (args: Args, context: StoryContext) => ({
   components: { TideSwitch },
   methods: {
     doSomething,
-    handleChange: () => {
-      action('TideSwitch changed')();
-      context.updateArgs({ ...args, isActive: context.args.isActive !== true });
+    handleIsActiveChange: (value: boolean) => {
+      context.updateArgs({ ...args, vModel: value });
+    },
+  },
+  setup: () => {
+    const isActive = ref(args.vModel);
 
-      try {
-        const callback = eval(args.handleChange);
+    watch(isActive, () => {
+      args.vModel = isActive.value;
+    });
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "change" control.');
+    watch(
+      () => args.vModel,
+      (newValue) => {
+        isActive.value = newValue;
       }
-    },
+    );
+
+    return {
+      args,
+      isActive,
+    };
   },
-  setup: () => ({ args }),
-  template: `<TideSwitch @change="handleChange" v-bind="args" />`,
+  template: `<TideSwitch v-bind="args" v-model="isActive" @update:modelValue="handleIsActiveChange" />`,
 });
 
 export default {
   argTypes: {
-    change: disabledArgType,
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
       description: 'Determines clickability',
     },
-    handleChange: {
-      ...change,
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
     isActive: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether toggle is active',
     },
+    vModel: {
+      control: 'boolean',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref<boolean>' },
+      },
+    },
   },
   args: {
     dataTrack: '',
     disabled: undefined,
-    handleChange: 'doSomething',
-    isActive: undefined,
+    vModel: false,
   },
   component: TideSwitch,
   parameters,