@youcan/celeste 0.6.37 → 0.6.39

package/src/components/digit-input/stories/digit-input.stories.ts

@@ -0,0 +1,220 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import DigitInputGroup from '../digit-input-group.vue';
+import DigitInputSlot from '../digit-input-slot.vue';
+import DigitInput from '../digit-input.vue';
+
+const meta: Meta<typeof DigitInput> = {
+  title: 'Components/DigitInput',
+  component: DigitInput,
+  argTypes: {
+    modelValue: {
+      control: { type: 'object' },
+      description: 'Array of string values for each input',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Whether the input is disabled',
+    },
+    placeholder: {
+      control: { type: 'text' },
+      description: 'Placeholder character for empty slots',
+      defaultValue: '●',
+    },
+    mask: {
+      control: { type: 'boolean' },
+      description: 'Whether to mask the input (for passwords)',
+    },
+    otp: {
+      control: { type: 'boolean' },
+      description: 'Whether this is for OTP input',
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['text', 'password', 'number'],
+      description: 'Input type',
+    },
+    hasError: {
+      control: { type: 'boolean' },
+      description: 'Whether the input has an error state',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DigitInput>;
+
+export const Default: Story = {
+  args: {
+    placeholder: '●',
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['', '', '', '']);
+      return { args, value };
+    },
+    template: `
+      <DigitInput v-bind="args" v-model="value">
+        <DigitInputGroup>
+          <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
+        </DigitInputGroup>
+      </DigitInput>
+    `,
+  }),
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: '●',
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['', '', '', '', '', '']);
+      return { args, value };
+    },
+    template: `
+      <DigitInput v-bind="args" v-model="value">
+        <DigitInputGroup>
+          <DigitInputSlot v-for="(item, index) in 6" :key="index" :index="index" />
+        </DigitInputGroup>
+      </DigitInput>
+    `,
+  }),
+};
+
+export const OTPInput: Story = {
+  args: {
+    otp: true,
+    placeholder: '●',
+    type: 'number',
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['', '', '', '', '', '']);
+      return { args, value };
+    },
+    template: `
+      <DigitInput v-bind="args" v-model="value">
+        <DigitInputGroup>
+          <DigitInputSlot v-for="(item, index) in 6" :key="index" :index="index" />
+        </DigitInputGroup>
+      </DigitInput>
+    `,
+  }),
+};
+
+export const PasswordInput: Story = {
+  args: {
+    mask: true,
+    type: 'number',
+    placeholder: '●',
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['', '', '', '']);
+      return { args, value };
+    },
+    template: `
+      <DigitInput v-bind="args" v-model="value">
+        <DigitInputGroup>
+          <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
+        </DigitInputGroup>
+      </DigitInput>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: '●',
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['1', '2', '3', '']);
+      return { args, value };
+    },
+    template: `
+      <DigitInput v-bind="args" v-model="value">
+        <DigitInputGroup>
+          <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
+        </DigitInputGroup>
+      </DigitInput>
+    `,
+  }),
+};
+
+export const LongerInput: Story = {
+  args: {
+    placeholder: '●',
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['', '', '', '', '', '', '', '']);
+      return { args, value };
+    },
+    template: `
+      <DigitInput v-bind="args" v-model="value">
+        <DigitInputGroup>
+          <DigitInputSlot v-for="(item, index) in 8" :key="index" :index="index" />
+        </DigitInputGroup>
+      </DigitInput>
+    `,
+  }),
+};
+
+export const PrefilledValue: Story = {
+  args: {
+    placeholder: '●',
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['1', '2', '3', '4']);
+      return { args, value };
+    },
+    template: `
+      <DigitInput v-bind="args" v-model="value">
+        <DigitInputGroup>
+          <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
+        </DigitInputGroup>
+      </DigitInput>
+    `,
+  }),
+};
+
+export const ErrorState: Story = {
+  args: {
+    placeholder: '●',
+    hasError: true,
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['1', '2', '', '']);
+      return { args, value };
+    },
+    template: `
+      <DigitInput v-bind="args" v-model="value">
+        <DigitInputGroup>
+          <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
+        </DigitInputGroup>
+      </DigitInput>
+    `,
+  }),
+};

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './button';
 export * from './checkbox';
 export * from './combobox';
 export * from './content-divider';
+export * from './digit-input';
 export * from './dropdown';
 export * from './dropdown-menu';
 export * from './hint-text';

package/src/components/text-input/text-input-button.vue

@@ -14,6 +14,7 @@ const delegatedProps = useDelegatedProps(props, 'class');
 
 <template>
   <Button
+    tabindex="-1"
     v-bind="delegatedProps"
     size="sm"
     intent="neutral"