fix controls

.storybook/preview.ts

@@ -1,31 +1,30 @@
 import "../styles/app.less";
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
   darkMode: {
-    classTarget: 'html',
-    stylePreview: true
+    classTarget: "html",
+    stylePreview: true,
   },
   backgrounds: {
-    default: 'light',
+    default: "light",
     values: [
       {
-        name: 'white',
-        value: '#ffffff',
+        name: "white",
+        value: "#ffffff",
       },
       {
-        name: 'light',
-        value: '#f9f8f6',
+        name: "light",
+        value: "#f9f8f6",
       },
       {
-        name: 'dark',
-        value: '#0f172a',
+        name: "dark",
+        value: "#0f172a",
       },
     ],
     grid: {
@@ -36,4 +35,4 @@ export const parameters = {
       offsetY: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
     },
   },
-}
+};

src/Button/Button.stories.ts

@@ -6,16 +6,18 @@ export default {
   component: D9Button,
   argTypes: {
     color: {
-      control: {
-        type: "select",
-        options: ["primary", "light", "dark", "danger"],
-      },
+      options: ["primary", "light", "dark", "danger"],
+      control: "inline-radio",
     },
     size: {
-      control: { type: "select", options: ["small", "medium", "large"] },
+      options: ["small", "medium", "large"],
+      control: "inline-radio",
+    },
+    icon: { options: icons, control: "select" },
+    iconPosition: {
+      options: ["left", "right"],
+      control: "inline-radio",
     },
-    icon: { control: { type: "select", options: icons } },
-    iconPosition: { control: { type: "select", options: ["left", "right"] } },
     onClick: { action: "clicked" },
   },
 };
@@ -25,7 +27,7 @@ const Template = (args: Record<string, unknown>) => ({
   setup() {
     return { args };
   },
-  template: '<d9-button v-bind="args" />',
+  template: '<D9Button v-bind="args" />',
 });
 
 export const Medium = Template.bind({});

src/Checkbox/Checkbox.stories.ts

@@ -13,7 +13,7 @@ const Template = (args: Record<string, unknown>) => ({
 
     return { args, checked };
   },
-  template: '<d9-checkbox v-bind="args" v-model="checked" />',
+  template: '<D9Checkbox v-bind="args" v-model="checked" />',
 });
 
 export const WithLabel = Template.bind({});

src/Icon/Icon.stories.ts

@@ -6,10 +6,12 @@ export default {
   component: D9Icon,
   argTypes: {
     size: {
-      control: { type: "select", options: ["xs", "1x", "2x", "3x", "4x"] },
+      options: ["xs", "1x", "2x", "3x", "4x"],
+      control: { type: "inline-radio" },
     },
     name: {
-      control: { type: "select", options: [...icons, ...brands] },
+      options: [...icons, ...brands],
+      control: { type: "select" },
     },
   },
   decorators: [
@@ -25,7 +27,7 @@ const Template = (args, { argTypes }) => ({
   setup() {
     return { args };
   },
-  template: '<d9-icon v-bind="args" />',
+  template: '<D9Icon v-bind="args" />',
 });
 
 export const Primary = Template.bind({});

src/Input/Input.stories.ts

@@ -31,7 +31,7 @@ const Template = (args) => ({
     };
   },
   components: { D9Input },
-  template: `<div><d9-input v-bind="args" /></div>`,
+  template: `<div><D9Input v-bind="args" /></div>`,
 });
 
 export const Default = Template.bind({});

src/Label/Label.stories.ts

@@ -10,7 +10,7 @@ export const Default = (args: Record<string, unknown>) => ({
   setup() {
     return { args };
   },
-  template: '<d9-label id="name" label="Your name" />',
+  template: '<D9Label id="name" label="Your name" />',
 });
 
 export const WithDescription = (args: Record<string, unknown>) => ({
@@ -19,5 +19,5 @@ export const WithDescription = (args: Record<string, unknown>) => ({
     return { args };
   },
   template:
-    '<d9-label id="name" label="Your name" description="Please use your full name." />',
+    '<D9Label id="name" label="Your name" description="Please use your full name." />',
 });

src/Select/Select.stories.ts

@@ -6,10 +6,11 @@ export default {
   component: D9Select,
   argTypes: {
     size: {
-      control: { type: "inline-radio" },
       options: ["small", "medium", "large"],
+      control: "inline-radio",
     },
-    icon: { control: { type: "select" }, options: icons },
+    icon: { options: icons, control: "select" },
+    modelValue: false,
   },
 };
 
@@ -34,7 +35,7 @@ const Template = (args) => ({
     };
   },
   components: { D9Select },
-  template: `<div><d9-select class="inline-block w-56" v-bind="{ options: people, ...args}" /></div>`,
+  template: `<div><D9Select class="inline-block w-56" v-bind="{ options: people, ...args}" /></div>`,
 });
 
 export const Default = Template.bind({});

src/Skeleton/Skeleton.stories.ts

@@ -5,16 +5,16 @@ export default {
   component: D9Skeleton,
   argTypes: {
     title: {
-      control: { type: "boolean" },
+      control: "boolean",
     },
     footer: {
-      control: { type: "boolean" },
+      control: "boolean",
     },
     avatar: {
-      control: { type: "boolean" },
+      control: "boolean",
     },
     lines: {
-      control: { type: "number" },
+      control: "number",
     },
   },
 };
@@ -24,7 +24,7 @@ const Template = (args: Record<string, unknown>) => ({
   setup() {
     return { args };
   },
-  template: "<d9-skeleton class='text-grey-100' v-bind='args' />",
+  template: "<D9Skeleton class='text-grey-100' v-bind='args' />",
 });
 
 export const Default = Template.bind({});
@@ -40,5 +40,5 @@ Minimal.args = {
   lines: 3,
   footer: false,
   title: true,
-  avatar: false
-}
+  avatar: false,
+};

src/Spinner/Spinner.stories.ts

@@ -10,7 +10,7 @@ const Template = (args: Record<string, unknown>) => ({
   setup() {
     return { args };
   },
-  template: "<d9-spinner class='text-grey-300' v-bind='args' />",
+  template: "<D9Spinner class='text-grey-300' v-bind='args' />",
 });
 
 export const Default = Template.bind({});

src/SplitButton/SplitButton.stories.ts

@@ -7,13 +7,14 @@ export default {
   argTypes: {
     color: {
       options: ["primary", "light", "dark", "danger"],
+      control: "inline-radio",
     },
     size: {
       options: ["small", "medium", "large"],
+      control: "inline-radio",
     },
-    icon: { options: icons, control: { type: "select" } },
-    iconPosition: { options: ["left", "right"] },
-    onClick: { action: "clicked" },
+    icon: { options: icons, control: "select" },
+    iconPosition: { options: ["left", "right"], control: "inline-radio" },
   },
 };
 

src/SplitButton/SplitButton.vue

@@ -1,12 +1,10 @@
 <template>
-  <div
-    class="relative inline-flex items-center focus:outline-none focus:ring active:ring transition duration-150 ease-in-out rounded-lg overflow-hidden"
-  >
+  <div class="relative inline-flex items-center">
     <button
       type="button"
       :aria-label="label"
       :tabindex="isDisabled ? '-1' : undefined"
-      class="relative"
+      class="relative transition duration-150 ease-in-out rounded-l-lg"
       :class="buttonClasses"
       @click="onClickMain"
     >
@@ -22,7 +20,8 @@
       </span>
     </button>
     <button
-      class="border-l-white/50 border-l"
+      type="button"
+      class="border-l-white/50 border-l transition duration-150 ease-in-out rounded-r-lg"
       :class="[buttonClasses, splitButtonClasses]"
       @click="onClickSplit"
     >

src/Switch/Switch.stories.ts

@@ -13,7 +13,7 @@ const Template = (args: Record<string, unknown>) => ({
 
     return { args, enabled };
   },
-  template: '<d9-switch v-bind="args" v-model="enabled" />',
+  template: '<D9Switch v-bind="args" v-model="enabled" />',
 });
 
 export const IsOff = Template.bind({});

src/Textarea/Textarea.stories.ts

@@ -8,7 +8,7 @@ export default {
   component: D9Textarea,
   argTypes: {
     size: {
-      control: { type: "inline-radio" },
+      control: "inline-radio",
       options: ["small", "medium", "large"],
     },
   },
@@ -22,7 +22,7 @@ const Template = (args) => ({
     };
   },
   components: { D9Textarea },
-  template: `<div><d9-textarea v-bind="args" /></div>`,
+  template: `<div><D9Textarea v-bind="args" /></div>`,
 });
 
 export const Default = Template.bind({});