fix: textarea default class and refactor (#15)

warp-ds · Apr 20, 2023 · e64455d · e64455d
1 parent 8ee04d2
commit e64455d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 35 deletions.
diff --git a/components/button/w-button.vue b/components/button/w-button.vue
@@ -11,7 +11,7 @@ export default { name: 'wButton' }
 
 <script setup>
 import { computed, useAttrs } from 'vue'
-import { button } from '@warp-ds/component-classes';
+import { button as ccButton } from '@warp-ds/component-classes';
 
 const buttonTypes = [ 
  'primary',
@@ -38,21 +38,21 @@ const props = defineProps({
 })
 
 const buttonClass = computed(() => ({
- [button.buttonSecondary]: props.secondary && !props.quiet || !buttonTypes.find(b => !!props[b]),
+ [ccButton.buttonSecondary]: props.secondary && !props.quiet || !buttonTypes.find(b => !!props[b]),
  // primary buttons
- [button.buttonPrimary]: props.primary && !props.negative,
- [button.buttonDestructive]: props.primary && props.negative,
+ [ccButton.buttonPrimary]: props.primary && !props.negative,
+ [ccButton.buttonDestructive]: props.primary && props.negative,
  // quiet
- [button.buttonFlat]: (props.secondary || (!props.negative && !props.utility)) && props.quiet,
- [button.buttonDestructiveFlat]: props.negative && props.quiet,
- [button.buttonUtilityFlat]: props.utility && props.quiet,
+ [ccButton.buttonFlat]: (props.secondary || (!props.negative && !props.utility)) && props.quiet,
+ [ccButton.buttonDestructiveFlat]: props.negative && props.quiet,
+ [ccButton.buttonUtilityFlat]: props.utility && props.quiet,
  // others
- [button.buttonSmall]: props.small,
- [button.buttonUtility]: props.utility && !props.quiet,
- [button.buttonLink]: props.link,
- [button.buttonPill]: props.pill,
- [button.buttonInProgress]: props.loading,
- [button.buttonIsDisabled]: props.disabled,
+ [ccButton.buttonSmall]: props.small,
+ [ccButton.buttonUtility]: props.utility && !props.quiet,
+ [ccButton.buttonLink]: props.link,
+ [ccButton.buttonPill]: props.pill,
+ [ccButton.buttonInProgress]: props.loading,
+ [ccButton.buttonIsDisabled]: props.disabled,
  ['inline-block']: !!props.href
 }))
 

diff --git a/components/forms/w-field.vue b/components/forms/w-field.vue
@@ -1,9 +1,9 @@
 <template>
- <component :is="as" :class="{[input.wrapper]: true, [input.invalid]: hasErrorMessage, [$attrs.class || '']: true}" :role="role" v-bind="wrapperAria">
- <component :is="labelType" v-if="label" :class="{[l.label]: true, [l.labelValid]: !hasErrorMessage, [l.labelInvalid]: hasErrorMessage}" :id="labelId" :for="labelFor" :role="valueOrUndefined(labelLevel, 'heading')" :aria-level="valueOrUndefined(labelLevel, labelLevel)">{{ label }}<span v-if="optional" :class="l.optional"> (valgfritt)</span></component>
+ <component :is="as" :class="{[ccInput.wrapper]: true, [ccInput.invalid]: hasErrorMessage, [$attrs.class || '']: true}" :role="role" v-bind="wrapperAria">
+ <component :is="labelType" v-if="label" :class="{[ccLabel.label]: true, [ccLabel.labelValid]: !hasErrorMessage, [ccLabel.labelInvalid]: hasErrorMessage}" :id="labelId" :for="labelFor" :role="valueOrUndefined(labelLevel, 'heading')" :aria-level="valueOrUndefined(labelLevel, labelLevel)">{{ label }}<span v-if="optional" :class="ccLabel.optional"> (valgfritt)</span></component>
  <slot :triggerValidation="triggerValidation" :labelFor="id" :labelId="labelId" :aria="aria" />
  <slot name="control" :form="collector" />
- <div :class="{[h.helpText]: true, [h.helpTextInvalid]: hasErrorMessage}" v-if="hint || hasErrorMessage">
+ <div :class="{[ccHelpText.helpText]: true, [ccHelpText.helpTextInvalid]: hasErrorMessage}" v-if="hint || hasErrorMessage">
  <span :id="hintId" v-if="hint" v-html="hint" />
  <span v-if="hint && hasErrorMessage">, </span>
  <span :id="errorId" v-if="hasErrorMessage">{{ validationMsg }}</span>
@@ -13,7 +13,7 @@
 
 <script>
 import { computed } from 'vue';
-import { input, label as l, helpText as h} from '@warp-ds/component-classes';
+import { input as ccInput, label as ccLabel, helpText as ccHelpText} from '@warp-ds/component-classes';
 import { createValidation } from './validation';
 import { id } from '#util';
 import { modelProps } from 'create-v-model';
@@ -66,7 +66,7 @@ export default {
  }))
  const wrapperAria = computed(() => valueOrUndefined(isFieldset.value, aria.value))
 
- return { triggerValidation, validationMsg, hasErrorMessage, labelType, labelFor, labelId, hintId, errorId, aria, wrapperAria, collector, valueOrUndefined, input, l, h }
+ return { triggerValidation, validationMsg, hasErrorMessage, labelType, labelFor, labelId, hintId, errorId, aria, wrapperAria, collector, valueOrUndefined, ccInput, ccLabel, ccHelpText }
  }
 }
 </script>
diff --git a/components/forms/w-input.vue b/components/forms/w-input.vue
@@ -1,14 +1,14 @@
 <template>
  <w-field v-bind="{ ...$attrs, ...$props }" #default="{ triggerValidation, aria }">
- <div :class="[input.wrapper, inputWrapperClass]">
+ <div :class="[ccInput.wrapper, inputWrapperClass]">
  <slot name="prefix" :inputElement="inputEl" />
  <input v-if="mask" :class="inputClasses" v-bind="{ ...aria, ...$attrs, class: '' }" @blur="triggerValidation" ref="inputEl" :autocomplete="autocomplete" :id="id" :type="type">
  <input v-else 
  :class="[
  inputClasses,
  {
- [input.suffix]: $slots.suffix,
- [input.prefix]: $slots.prefix, 
+ [ccInput.suffix]: $slots.suffix,
+ [ccInput.prefix]: $slots.prefix, 
  }
  ]"
  v-bind="{ ...aria, ...$attrs, class: '' }" @blur="triggerValidation" ref="inputEl" :autocomplete="autocomplete" :id="id" :type="type" v-model="model">
@@ -19,7 +19,7 @@
 
 <script>
 import { ref, computed } from 'vue';
-import { input } from '@warp-ds/component-classes';
+import { input as ccInput } from '@warp-ds/component-classes';
 import { createModel } from 'create-v-model';
 import { setupMask } from './w-input-mask.js';
 import { default as wField, fieldProps } from './w-field.vue';
@@ -47,13 +47,13 @@ export default {
  const inputEl = ref(null)
  if (props.mask) setupMask({ props, emit, inputEl });
  const inputClasses = computed(() => ({
- [input.default]: true,
- [input.invalid]: props.invalid,
- [input.disabled]: props.disabled,
- [input.readOnly]: props.readOnly,
- [input.placeholder]: !!props.placeholder,
+ [ccInput.default]: true,
+ [ccInput.invalid]: props.invalid,
+ [ccInput.disabled]: props.disabled,
+ [ccInput.readOnly]: props.readOnly,
+ [ccInput.placeholder]: !!props.placeholder,
  }));
- return { model, inputEl, inputClasses, input }
+ return { model, inputEl, inputClasses, ccInput }
  }
 }
 </script>
diff --git a/components/forms/w-textarea.vue b/components/forms/w-textarea.vue
@@ -8,7 +8,7 @@
 
 <script>
 import { computed } from 'vue';
-import { input } from '@warp-ds/component-classes';
+import { input as ccInput } from '@warp-ds/component-classes';
 import { createModel } from 'create-v-model';
 import { default as wField, fieldProps } from './w-field.vue';
 
@@ -24,13 +24,13 @@ export default {
  placeholder: String
  },
  setup: (props, { emit }) => {
- const wrapperClass = input.wrapper;
+ const wrapperClass = ccInput.wrapper;
  const inputClasses = computed(() => ({
- [input.default]: true,
- [input.invalid]: props.invalid,
- [input.disabled]: props.disabled,
- [input.readOnly]: props.readOnly,
- [input.placeholder]: !!props.placeholder,
+ [`${ccInput.default} ${ccInput.textArea}`]: true,
+ [ccInput.invalid]: props.invalid,
+ [ccInput.disabled]: props.disabled,
+ [ccInput.readOnly]: props.readOnly,
+ [ccInput.placeholder]: !!props.placeholder,
  }));
  const model = createModel({ props, emit });
  return { model, inputClasses, wrapperClass }