fix(textfield/textarea): clean up classes

.github/workflows/i18n.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Install pnpm and dependencies
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
           run_install: true
       - name: Validate extracted messages
         run: pnpm messages:compile

.github/workflows/lint.pr.yaml

@@ -15,7 +15,7 @@ jobs:
     - name: Install pnpm and dependencies
       uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 9
         run_install: true
     - name: Lint
       run: pnpm lint:check

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Install pnpm and dependencies
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
           run_install: true
       - name: Build
         run: pnpm build

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     - name: Install pnpm and dependencies
       uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 9
         run_install: true
     - name: Test
       run: pnpm test

components/forms/w-textarea.vue

@@ -1,13 +1,15 @@
 <template>
   <w-field v-bind="{ ...$attrs, ...$props }" #default="{ triggerValidation, aria, hasValidationErrors }">
-    <div :class="wrapperClass">
+    <div :class="[ccInput.wrapper]">
       <textarea         
-        :class="[
-          inputClasses,
-          {
-            [ccInput.invalid]: hasValidationErrors,
-          }
-        ]"
+        :class="{
+          [`${ccInput.base} ${ccInput.textArea}`]: true,
+          [ccInput.placeholder]: !!p.placeholder,
+          [ccInput.default]: !hasValidationErrors && !p.disabled && !p.readOnly,
+          [ccInput.invalid]: hasValidationErrors && !p.disabled && !p.readOnly,
+          [ccInput.disabled]: !hasValidationErrors && p.disabled && !p.readOnly,
+          [ccInput.readOnly]: !hasValidationErrors && !p.disabled && p.readOnly,
+        }"
         :disabled="disabled"
         :readOnly="readOnly"
         v-bind="{ ...aria, ...$attrs, class: '' }" v-model="model" :id="id" @blur="triggerValidation" 
@@ -17,22 +19,13 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
 import { input as ccInput } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model';
 import { default as wField, fieldProps } from './w-field.vue';
 
 const p = defineProps(fieldProps);
 const emit = defineEmits(['update:modelValue']);
 const model = createModel({ props: p, emit });
-
-const wrapperClass = ccInput.wrapper;
-const inputClasses = computed(() => ({
-  [`${ccInput.default} ${ccInput.textArea}`]: true,
-  [ccInput.disabled]: p.disabled,
-  [ccInput.readOnly]: p.readOnly,
-  [ccInput.placeholder]: !!p.placeholder,
-}));
 </script>
 
 <script>

components/forms/w-textfield.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useSlots } from 'vue';
+import { ref, useSlots } from 'vue';
 import { input as ccInput } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model';
 import { setupMask } from './w-input-mask.js';
@@ -24,18 +24,7 @@ const slots = useSlots();
 const model = createModel({ props: p, emit });
 const inputEl = ref(null);
 if (p.mask) setupMask({ props: p, emit, inputEl });
-const inputClasses = computed(() => ({
-  [ccInput.default]: true,
-  [ccInput.disabled]: p.disabled,
-  [ccInput.readOnly]: p.readOnly,
-  [ccInput.placeholder]: !!p.placeholder,
-  [ccInput.suffix]: slots.suffix,
-  [ccInput.prefix]: slots.prefix,
-}));
 
-const inputWithPrefixStyle = computed(() => (
-  slots.prefix ? 'padding-left: var(--w-prefix-width, 40px);' : undefined
-))
 </script>
 
 <template>
@@ -47,12 +36,16 @@ const inputWithPrefixStyle = computed(() => (
         :id="id"
         ref="inputEl"
         :type="type"
-        :class="[
-          inputClasses,
-          {
-            [ccInput.invalid]: hasValidationErrors,
-          }
-        ]"
+        :class="{
+          [ccInput.base]: true,
+          [ccInput.default]: !hasValidationErrors && !p.disabled && !p.readOnly,
+          [ccInput.invalid]: hasValidationErrors && !p.disabled && !p.readOnly,
+          [ccInput.disabled]: !hasValidationErrors && p.disabled && !p.readOnly, 
+          [ccInput.readOnly]: !hasValidationErrors && !p.disabled && p.readOnly,
+          [ccInput.placeholder]: !!p.placeholder,
+          [ccInput.suffix]: slots.suffix,
+          [ccInput.prefix]: slots.prefix
+        }"
         :autocomplete="autocomplete"
         :disabled="disabled"
         :placeholder="placeholder"
@@ -65,19 +58,22 @@ const inputWithPrefixStyle = computed(() => (
         ref="inputEl"
         v-model="model"
         :type="type"
-        :class="[
-          inputClasses,
-          {
-            [ccInput.invalid]: hasValidationErrors,
-          }
-        ]"
+        :class="{
+          [ccInput.base]: true,
+          [ccInput.default]: !hasValidationErrors && !p.disabled && !p.readOnly,
+          [ccInput.invalid]: hasValidationErrors && !p.disabled && !p.readOnly,
+          [ccInput.disabled]: !hasValidationErrors && p.disabled && !p.readOnly,
+          [ccInput.readOnly]: !hasValidationErrors && !p.disabled && p.readOnly,
+          [ccInput.placeholder]: !!p.placeholder,
+          [ccInput.suffix]: slots.suffix,
+          [ccInput.prefix]: slots.prefix
+        }"
         :autocomplete="autocomplete"
         :disabled="disabled"
         :placeholder="placeholder"
         :readOnly="readOnly"
         v-bind="{ ...aria, ...$attrs, class: '' }"
         @blur="triggerValidation"
-        :style="inputWithPrefixStyle"
         >
       <slot name="suffix" :inputElement="inputEl" />
     </div>

package.json

@@ -52,9 +52,9 @@
   "dependencies": {
     "@lingui/core": "^4.7.0",
     "@warp-ds/core": "^1.1.1",
-    "@warp-ds/css": "1.9.3",
+    "@warp-ds/css": "1.9.6",
     "@warp-ds/icons": "2.0.0",
-    "@warp-ds/uno": "1.10.2",
+    "@warp-ds/uno": "1.12.0",
     "create-v-model": "^2.2.0",
     "dom-focus-lock": "^1.1.0",
     "element-collapse": "^1.1.0",