feat(input-textarea): add rows="fill" option (#208) (#216)

close #208

Co-authored-by: Kia Ishii <kia.king.08@gmail.com>

lib/components/SInputTextarea.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
   checkColor?: Color
   placeholder?: string
   disabled?: boolean
-  rows?: number
+  rows?: number | 'fill'
   modelValue: string | null
   hideError?: boolean
   validation?: Validatable
@@ -31,7 +31,8 @@ const emit = defineEmits<{
 
 const classes = computed(() => [
   props.size ?? 'small',
-  { disabled: props.disabled }
+  { disabled: props.disabled },
+  { fill: props.rows === 'fill' }
 ])
 
 function emitInput(e: Event): void {
@@ -62,6 +63,7 @@ function emitBlur(e: FocusEvent): void {
     <textarea
       :id="name"
       class="input"
+      :class="{ fill: rows === 'fill' }"
       :placeholder="placeholder"
       :rows="rows ?? 3"
       :disabled="disabled"
@@ -73,7 +75,7 @@ function emitBlur(e: FocusEvent): void {
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SInputTextarea.mini {
   .input {
     padding: 6px 12px;
@@ -155,5 +157,9 @@ function emitBlur(e: FocusEvent): void {
   .dark &:hover:focus {
     border-color: var(--c-info);
   }
+
+  &.fill {
+    height: 100%;
+  }
 }
 </style>