chore: add Vue 3 example for overriding args/props

examples/vue-3-cli/src/stories/OverrideArgs.stories.js

@@ -0,0 +1,43 @@
+import OverrideArgs from './OverrideArgs.vue';
+
+// Emulate something that isn't serializable
+const icons = {
+  Primary: {
+    template: '<span>Primary Icon</span>',
+  },
+  Secondary: {
+    template: '<span>Secondary Icon</span>',
+  },
+};
+
+export default {
+  title: 'Example/Override Args',
+  component: OverrideArgs,
+  argTypes: {
+    // To show that other props are passed through
+    backgroundColor: { control: 'color' },
+    icon: {
+      control: {
+        type: 'select',
+        options: Object.keys(icons),
+      },
+      defaultValue: 'Primary',
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { OverrideArgs },
+    template: '<override-args v-bind="$props" :icon="icon" />',
+    setup(props) {
+      return {
+        icon: icons[props.icon],
+      };
+    },
+  };
+};
+
+export const TestOne = Template.bind({});
+export const TestTwo = Template.bind({});

examples/vue-3-cli/src/stories/OverrideArgs.vue

@@ -0,0 +1,41 @@
+<template>
+  <button type="button" :class="classes" :style="style">
+    <!-- You can use <component /> with `:is` when passing a component as a prop -->
+    <component :is="icon" />
+  </button>
+</template>
+
+<script lang="typescript">
+import './button.css';
+import { h, computed, reactive } from 'vue';
+
+export default {
+  name: 'override-args',
+
+  props: {
+    icon: {
+      type: Object,
+      required: true,
+    },
+
+    backgroundColor: {
+      type: String
+    },
+  },
+
+  // @ts-ignore
+  setup(props, { emit }) {
+    const classes = {
+      'storybook-button': true,
+      'storybook-button--primary': true,
+      'storybook-button--large': true,
+    };
+    const style = computed(() => ({
+      backgroundColor: props.backgroundColor,
+    }));
+
+    // Notice that `icon` prop component is still passed through even though it isn't mapped
+    return { classes, style, }
+  },
+};
+</script>