chore: added story for Textarea

frappe · Sep 12, 2024 · 4b8bf70 · 4b8bf70
1 parent b13318d
commit 4b8bf70
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 72 deletions.
diff --git a/src/components/Textarea.story.vue b/src/components/Textarea.story.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import Textarea from './Textarea.vue'
+const state = reactive({
+	size: 'sm',
+	placeholder: 'Placeholder',
+	disabled: false,
+	modelValue: '',
+	label: 'Label',
+})
+const sizes = ['sm', 'md', 'lg', 'xl']
+const variants = ['subtle', 'outline']
+</script>
+
+<template>
+	<Story :layout="{ type: 'grid', width: 500 }">
+		<Variant v-for="type in variants" :key="type" :title="`${type} variant`">
+			<Textarea :variant="type" v-bind="state" />
+		</Variant>
+
+		<template #controls>
+			<HstSelect v-model="state.size" :options="sizes" title="Size" />
+		</template>
+	</Story>
+</template>
diff --git a/src/components/Textarea.vue b/src/components/Textarea.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="space-y-1.5">
-    <label class="block" :class="labelClasses" v-if="label" :for="id">
-      {{ label }}
-    </label>
-    <textarea
-      :placeholder="placeholder"
-      :class="inputClasses"
-      :disabled="disabled"
-      :id="id"
-      :value="modelValue"
-      :rows="rows"
-      @input="handleChange"
-      @change="handleChange"
-      v-bind="attrs"
-    />
-  </div>
+	<div class="space-y-1.5">
+		<label class="block" :class="labelClasses" v-if="label" :for="id">
+			{{ label }}
+		</label>
+		<textarea
+			:placeholder="placeholder"
+			:class="inputClasses"
+			:disabled="disabled"
+			:id="id"
+			:value="modelValue"
+			:rows="rows"
+			@input="handleChange"
+			@change="handleChange"
+			v-bind="attrs"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -23,83 +23,83 @@ import type { TextInputTypes } from './types/TextInput'
 import debounce from '../utils/debounce'
 
 interface TextareaProps {
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  variant?: 'subtle' | 'outline'
-  placeholder?: string
-  disabled?: boolean
-  id?: string
-  modelValue?: string
-  debounce?: number
-  rows?: number
-  label?: string
+	size?: 'sm' | 'md' | 'lg' | 'xl'
+	variant?: 'subtle' | 'outline'
+	placeholder?: string
+	disabled?: boolean
+	id?: string
+	modelValue?: string
+	debounce?: number
+	rows?: number
+	label?: string
 }
 
 const props = withDefaults(defineProps<TextareaProps>(), {
-  type: 'text',
-  size: 'sm',
-  variant: 'subtle',
-  rows: 3,
+	type: 'text',
+	size: 'sm',
+	variant: 'subtle',
+	rows: 3,
 })
 
 const emit = defineEmits(['update:modelValue'])
 const attrs = useAttrs()
 
 const inputClasses = computed(() => {
-  let sizeClasses = {
-    sm: 'text-base rounded',
-    md: 'text-base rounded',
-    lg: 'text-lg rounded-md',
-    xl: 'text-xl rounded-md',
-  }[props.size]
+	let sizeClasses = {
+		sm: 'text-base rounded',
+		md: 'text-base rounded',
+		lg: 'text-lg rounded-md',
+		xl: 'text-xl rounded-md',
+	}[props.size]
 
-  let paddingClasses = {
-    sm: ['py-1.5 px-2'],
-    md: ['py-1.5 px-2.5'],
-    lg: ['py-1.5 px-3'],
-    xl: ['py-1.5 px-3'],
-  }[props.size]
-  
-  let variant = props.disabled ? 'disabled' : props.variant
-  let variantClasses = {
-    subtle:
-      'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
-    outline:
-      'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
-    disabled: [
-      'border bg-gray-50 placeholder-gray-400',
-      props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
-    ],
-  }[variant]
+	let paddingClasses = {
+		sm: ['py-1.5 px-2'],
+		md: ['py-1.5 px-2.5'],
+		lg: ['py-1.5 px-3'],
+		xl: ['py-1.5 px-3'],
+	}[props.size]
 
-  return [
-    sizeClasses,
-    paddingClasses,
-    variantClasses,
-    props.disabled ? 'text-gray-600' : 'text-gray-800',
-    'transition-colors w-full block',
-  ]
+	let variant = props.disabled ? 'disabled' : props.variant
+	let variantClasses = {
+		subtle:
+			'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+		outline:
+			'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+		disabled: [
+			'border bg-gray-50 placeholder-gray-400',
+			props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
+		],
+	}[variant]
+
+	return [
+		sizeClasses,
+		paddingClasses,
+		variantClasses,
+		props.disabled ? 'text-gray-600' : 'text-gray-800',
+		'transition-colors w-full block',
+	]
 })
 
 const labelClasses = computed(() => {
-  return [
-    {
-      sm: 'text-xs',
-      md: 'text-base',
-      lg: 'text-lg',
-      xl: 'text-xl',
-    }[props.size],
-    'text-gray-600',
-  ]
+	return [
+		{
+			sm: 'text-xs',
+			md: 'text-base',
+			lg: 'text-lg',
+			xl: 'text-xl',
+		}[props.size],
+		'text-gray-600',
+	]
 })
 
 let emitChange = (value: string) => {
-  emit('update:modelValue', value)
+	emit('update:modelValue', value)
 }
 if (props.debounce) {
-  emitChange = debounce(emitChange, props.debounce)
+	emitChange = debounce(emitChange, props.debounce)
 }
 
 let handleChange = (e: Event) => {
-  emitChange((e.target as HTMLInputElement).value)
+	emitChange((e.target as HTMLInputElement).value)
 }
 </script>