TextInputにtypeとdisabledを指定できるように修正

.gitignore

@@ -21,3 +21,4 @@ yarn-error.log*
 *.sln
 *.sw?
 
+dist/

src/components/TextInput/TextInput.stories.ts

@@ -20,6 +20,13 @@ const meta: Meta<TextInputPropsAndCustomArgs> = {
     autoExpand: false,
     baseTextareaHeight: 56,
   },
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['text', 'password', 'email', 'number', 'tel', 'date'],
+      defaultValue: 'text',
+    },
+  },
   render: (args) => ({
     components: { TextInput },
     setup() {

src/components/TextInput/TextInput.vue

@@ -4,6 +4,7 @@
     :value="modelValue"
     class="text-input is-multi-line"
     :class="{ 'has-error': error }"
+    :disabled="disabled"
     v-if="multiline"
     @input="onInput"
     @focus="$emit('focus')"
@@ -15,7 +16,8 @@
     :value="modelValue"
     class="text-input is-single-line"
     :class="{ 'has-error': error }"
-    type="text"
+    :disabled="disabled"
+    :type="type"
     @input="onInput"
     @focus="$emit('focus')"
     @blur="$emit('blur')"
@@ -49,6 +51,14 @@ export default defineComponent({
       type: Number,
       default: 56,
     },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     'update:modelValue': null,

types/components/TextInput/TextInput.vue.d.ts

@@ -19,6 +19,14 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     textarea: import("vue").Ref<HTMLElement | null>;
     onInput: (e: Event) => void;
@@ -47,12 +55,22 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    type: string;
     error: boolean;
+    disabled: boolean;
     multiline: boolean;
     modelValue: string;
     autoExpand: boolean;