feat(BaseTextarea): update class bindings, fix color focus

shuriken-ui · Feb 22, 2024 · 6e955ff · 6e955ff
1 parent ee8bc1c
commit 6e955ff
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/.playground/pages/tests/form/textarea.vue b/.playground/pages/tests/form/textarea.vue
@@ -27,31 +27,31 @@ const value = ref('')
             label="Rounded: none"
             rounded="none"
             placeholder="Write a message..."
-            rows="1"
+            rows="3"
             autogrow
           />
           <BaseTextarea
             v-model="fields.second"
             label="Rounded: sm"
             rounded="sm"
             placeholder="Write a message..."
-            rows="1"
+            rows="3"
             autogrow
           />
           <BaseTextarea
             v-model="fields.third"
             label="Rounded: md"
             rounded="md"
             placeholder="Write a message..."
-            rows="1"
+            rows="3"
             autogrow
           />
           <BaseTextarea
             v-model="fields.fourth"
             label="Rounded: lg"
             rounded="lg"
             placeholder="Write a message..."
-            rows="1"
+            rows="3"
             autogrow
           />
         </div>

diff --git a/components/form/BaseTextarea.vue b/components/form/BaseTextarea.vue
@@ -162,10 +162,10 @@ const id = useNinjaId(() => props.id)
 
 const radiuses = {
   none: '',
-  sm: 'nui-textarea-rounded',
-  md: 'nui-textarea-smooth',
-  lg: 'nui-textarea-curved',
-  full: 'nui-textarea-full',
+  sm: 'nui-textarea-rounded-sm',
+  md: 'nui-textarea-rounded-md',
+  lg: 'nui-textarea-rounded-lg',
+  full: 'nui-textarea-rounded-lg',
 } as Record<string, string>
 
 const sizes = {
@@ -237,14 +237,15 @@ defineExpose({
       props.labelFloat && 'nui-textarea-label-float',
       !props.resize && 'nui-textarea-not-resize',
       props.addon && 'nui-has-addon',
+      props.colorFocus && 'nui-textarea-focus',
       props.classes?.wrapper,
     ]"
   >
     <label
       v-if="props.label && !props.labelFloat"
       :for="id"
       class="nui-textarea-label"
-      :class="props.classes.label"
+      :class="props.classes?.label"
     >
       {{ props.label }}
     </label>
@@ -256,10 +257,7 @@ defineExpose({
         v-model.lazy="modelValue"
         v-bind="$attrs"
         class="nui-textarea"
-        :class="[
-          props.colorFocus && 'nui-textarea-focus',
-          props.classes.textarea,
-        ]"
+        :class="[props.classes?.textarea]"
         :name="props.name"
         :placeholder="props.placeholder"
         :readonly="props.readonly"
@@ -275,7 +273,7 @@ defineExpose({
         class="nui-textarea"
         :class="[
           props.colorFocus && 'nui-textarea-focus',
-          props.classes.textarea,
+          props.classes?.textarea,
         ]"
         :name="props.name"
         :placeholder="props.placeholder"
@@ -287,7 +285,7 @@ defineExpose({
         v-if="props.label && props.labelFloat"
         class="nui-label-float"
         :for="id"
-        :class="props.classes.label"
+        :class="props.classes?.label"
       >
         <slot name="label">{{ props.label }}</slot>
       </label>
@@ -299,7 +297,7 @@ defineExpose({
       <div
         v-if="props.addon"
         class="nui-textarea-addon"
-        :class="props.classes.addon"
+        :class="props.classes?.addon"
       >
         <slot name="addon"></slot>
       </div>