Merge pull request #184 from RitvikSardana/format-text-area

fix(formatting): format text area component
frappe · Sep 12, 2024 · fd9e7a3 · fd9e7a3
2 parents 00b92d8 + 7eb1a5f
commit fd9e7a3
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 84 deletions.
diff --git a/src/components/Textarea.story.vue b/src/components/Textarea.story.vue
@@ -2,24 +2,24 @@
 import { reactive } from 'vue'
 import Textarea from './Textarea.vue'
 const state = reactive({
-	size: 'sm',
-	placeholder: 'Placeholder',
-	disabled: false,
-	modelValue: '',
-	label: 'Label',
+  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>
+  <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 #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 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 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',
-	]
+  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>