srcdev-nuxt-forms 0.1.0 → 1.0.0

package/components/forms/input-range/variants/InputRangeDefault.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="input-range-with-label" :data-form-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
+    <label class="input-range-label body-normal-bold" :for="id">{{ label }}</label>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+
+    <InputRangeCore v-model="modelValue" :id :name :min :max :step :theme :required :size :weight :fieldHasError>
+      <template v-if="hasDataList" #datalist>
+        <slot name="datalist"></slot>
+      </template>
+      <template v-if="hasLeftContent" #left>
+        <InputButtonCore
+          type="button"
+          @click.stop.prevent="updateRange(-step, Number(modelValue) > min)"
+          :readonly="Number(modelValue) === min"
+          :is-pending="false"
+          buttonText="Step down"
+          theme="ghost"
+          size="x-small"
+        >
+          <template #iconOnly>
+            <slot name="left"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+      <template v-if="hasRightContent" #right>
+        <InputButtonCore
+          type="button"
+          @click.stop.prevent="updateRange(step, Number(modelValue) < max)"
+          :readonly="Number(modelValue) === max"
+          :is-pending="false"
+          buttonText="Step up"
+          theme="ghost"
+          size="x-small"
+        >
+          <template #iconOnly>
+            <slot name="right"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+    </InputRangeCore>
+    <InputError :errorMessage :fieldHasError :id :isDetached="true" :styleClassPassthrough="['mbe-20']" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+const { id, name, label, required, min, max, step, theme, size, weight, styleClassPassthrough, errorMessage, fieldHasError } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  min: {
+    type: Number,
+    required: true,
+  },
+  max: {
+    type: Number,
+    required: true,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  deepCssClassPassthrough: {
+    type: String,
+    default: '',
+  },
+});
+
+const slots = useSlots();
+const hasDescription = computed(() => slots.description !== undefined);
+const hasDataList = computed(() => slots.datalist !== undefined);
+const hasLeftContent = computed(() => slots.left !== undefined);
+const hasRightContent = computed(() => slots.right !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel<number | readonly number[]>();
+
+const updateRange = (step: number, withinRangeLimit: boolean) => {
+  if (withinRangeLimit) {
+    modelValue.value = (Number(modelValue.value) + step) as number;
+  }
+};
+</script>
+
+<style lang="css">
+.input-range-with-label {
+  .input-range-label {
+    display: block;
+    margin-block: 8px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .label-description {
+    font-family: var(--font-family);
+    font-size: 16px;
+    margin-top: 12px;
+  }
+}
+</style>

package/components/forms/input-text/InputTextCore.vue

@@ -1,49 +1,57 @@
 <template>
-  <div class="input-text-wrapper" :class="[{ 'has-left-content': hasLeftContent }]">
-    <template v-if="hasLeftContent">
-      <span class="left-content">
-        <slot name="left"></slot>
-      </span>
-    </template>
+  <div
+    class="input-text-wrapper"
+    :data-form-theme="formTheme"
+    :class="[{ dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
+  >
+    <span v-if="hasLeftSlot" class="slot left-slot">
+      <slot name="left"></slot>
+    </span>
 
     <input
       :type
-      :placeholder="c12.placeholder"
+      :placeholder
       :id
       :name
-      :pattern="componentValidation.pattern"
-      :maxlength="componentValidation.maxlength"
       :required
-      :class="['input-text', 'text-normal', styleClassPassthrough, { active: isFocused }, { dirty: isDirty }, { error: fieldHasError() }]"
-      v-model="modelValue.data[name]"
+      :maxlength
+      :class="['input-text-core', 'text-normal', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      v-model="modelValue"
       ref="inputField"
-      :readonly="isPending"
-      @focusin="updateFocus(name, true)"
-      @focusout="updateFocus(name, false)"
+      :aria-invalid="fieldHasError"
+      :aria-describedby="`${id}-error-message`"
+      :pattern="inputPattern"
+      :inputmode
+      @focusin="updateFocus(true)"
+      @focusout="updateFocus(false)"
     />
 
-    <template v-if="hasRightContent">
-      <span class="right-content">
-        <slot name="right"></slot>
-      </span>
-    </template>
+    <span v-if="hasRightSlot" class="slot right-slot">
+      <slot name="right"></slot>
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { InpuTextC12, IFormData } from '@/types/types.forms';
-import { validationConfig } from '@/components/forms/c12/validation-patterns';
+import propValidators from '../c12/prop-validators';
 
-const props = defineProps({
+const { type, inputmode, maxlength, id, name, placeholder, required, fieldHasError, styleClassPassthrough, theme } = defineProps({
   type: {
-    // type: String as PropType<"text" | "password" | "tel" | "number" | "email" | "url">, // This breaks props setup in unit tests
-    type: String,
+    type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
+    default: 'text',
     validator(value: string) {
-      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
+      return propValidators.inputTypesText.includes(value);
     },
   },
+  inputmode: {
+    type: String as PropType<'text' | 'email' | 'tel' | 'url' | 'search' | 'numeric' | 'none' | 'decimal'>,
+    default: 'text',
+  },
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
   id: {
-    // type: String as PropType<string>,
     type: String,
     required: true,
   },
@@ -51,101 +59,155 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  validation: {
-    type: String,
-    default: null,
-  },
   required: {
     type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
+    default: false,
   },
-  styleClassPassthrough: {
+  placeholder: {
     type: String,
     default: '',
   },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
 });
 
 const slots = useSlots();
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
-
-const modelValue = defineModel() as Ref<IFormData>;
-
-const updateFocus = (name: string, isFocused: boolean) => {
-  modelValue.value.focusedField = isFocused ? name : '';
-};
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
 
-const isPending = computed(() => {
-  return modelValue.value.isPending;
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
 });
 
-const isFocused = computed(() => {
-  return modelValue.value.focusedField == name.value;
-});
-
-const isDirty = computed(() => {
-  return modelValue.value.dirtyFields[name.value];
-});
+const modelValue = defineModel();
+const isDirty = defineModel('isDirty');
+const isActive = defineModel('isActive');
 
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
+const inputPattern = computed(() => {
+  return inputmode === 'numeric' ? '[0-9]+' : undefined;
 });
 
-const validatorLocale = toRef(useRuntimeConfig().public.validatorLocale);
-
-const componentValidation = validationConfig[validatorLocale.value][props.validation];
-const inputField = ref<HTMLInputElement | null>(null);
-
-const { hasCustomError, removeCustomError } = useErrorMessage(name.value, modelValue);
-
-const fieldHasError = () => {
-  const hasApiErrorMessage = hasCustomError();
-  const inputBad = !inputField.value?.validity.valid;
-
-  if (modelValue.value.isPending) {
-    modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
-    return hasApiErrorMessage ? hasApiErrorMessage : inputBad;
-  }
-  return false;
+const updateFocus = (isFocused: boolean) => {
+  isActive.value = isFocused;
 };
 
-watchEffect(() => {
-  console.log('watchEffect()');
-  modelValue.value.dirtyFields[name.value] = modelValue.value.data[name.value] !== '';
+const inputField = ref<HTMLInputElement | null>(null);
 
-  modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
-  if (hasCustomError()) {
-    removeCustomError(inputField.value?.validity.valid);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+// TODO: Move this to a utility function to allow removeEventListener on unmounted
+// Leaving like this could lead to memory leaks
+const validateInput = () => {
+  if (inputField.value !== null) {
+    inputField.value.addEventListener('beforeinput', (event: any) => {
+      let beforeValue = modelValue.value;
+      event.target.addEventListener(
+        'input',
+        () => {
+          if (inputField.value !== null && inputField.value.validity.patternMismatch) {
+            inputField.value.value = beforeValue as string;
+            console.log('you did some bad chars');
+          }
+        },
+        { once: true }
+      );
+    });
   }
-});
-
-const isValid = () => {
-  setTimeout(() => {
-    modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
-  }, 0);
 };
 
 onMounted(() => {
-  isValid();
+  updateElementClasses(['deep-bristol', 'deep-london', 'deep-bath']);
+  if (inputmode === 'numeric') validateInput();
 });
 </script>
 
 <style lang="css">
 .input-text-wrapper {
+  --_gutter: 12px;
+  --_border-width: var(--input-border-width-thin);
+  --_outline-width: var(--input-border-width-thin);
+
   display: flex;
   align-items: center;
 
-  &.has-left-content {
-    margin-left: var(--_gutter);
+  background-color: var(--theme-form-input-bg);
+  border-radius: var(--input-border-width-default);
+  border: var(--_border-width) solid var(--theme-form-input-border);
+
+  &:focus-within {
+    border: var(--_border-width) solid var(--theme-form-input-border-focus);
+    outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
+    box-shadow: var(--theme-form-focus-box-shadow);
+  }
+
+  .slot {
+    display: inline-block;
+    padding-inline: 8px;
 
-    .left-content {
+    .icon {
+      color: var(--theme-form-input-text);
+    }
+  }
+
+  &.has-left-slot {
+    .left-slot {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &.has-right-slot {
+    .right-slot {
       display: flex;
       align-items: center;
     }
   }
+
+  .input-text-core {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    flex-grow: 1;
+
+    color: var(--theme-form-input-text);
+    font-family: var(--font-family);
+    font-size: var(--theme-form-button-font-size-normal);
+    line-height: var(--line-height);
+    padding: 8px 12px;
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      font-style: italic;
+      font-weight: 400;
+    }
+  }
+}
+
+input:autofill,
+input:-webkit-autofill-strong-password,
+input:-webkit-autofill-strong-password-viewable,
+input:-webkit-autofill-and-obscured {
+  background-color: var(--theme-form-input-bg) !important;
+  background-image: none !important;
+  color: var(--_input-text-color) !important;
+  -webkit-box-shadow: 0 0 0px 1000px var(--theme-form-input-bg) inset;
+  /* -webkit-text-fill-color: black; */
+  transition: background-color 5000s ease-in-out 0s;
 }
 </style>

package/components/forms/input-text/variants/material/InputPasswordWithLabel.vue

@@ -0,0 +1,99 @@
+<template>
+  <InputTextWithLabel v-model="modelValue" :data-form-theme="formTheme" :type="inputType" :maxlength :id :name :placeholder :label :errorMessage :fieldHasError :required :styleClassPassthrough :theme>
+    <template #right>
+      <InputButtonCore
+        type="button"
+        @click.stop.prevent="toggleDisplayPassword"
+        :is-pending="false"
+        :buttonText
+        theme="ghost"
+        size="x-small"
+        @focusin="updateFocus(name, true)"
+        @focusout="updateFocus(name, false)"
+      >
+        <template #iconOnly>
+          <Icon v-if="displayPassword" name="radix-icons:eye-none" class="icon" />
+          <Icon v-else name="radix-icons:eye-open" class="icon" />
+        </template>
+      </InputButtonCore>
+    </template>
+  </InputTextWithLabel>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../../c12/prop-validators';
+
+const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
+  type: {
+    type: String,
+    default: 'password',
+  },
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+});
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel();
+
+const updateFocus = (name: string, isFocused: boolean) => {
+  // console.log('updateFocus', name, isFocused);
+  // modelValue.value.focusedField = isFocused ? name : '';
+};
+
+const inputType = ref(type);
+
+const displayPassword = ref(false);
+const buttonText = computed(() => {
+  inputType.value = displayPassword.value ? 'text' : 'password';
+  return displayPassword.value ? 'Hide password' : 'Show password';
+});
+const toggleDisplayPassword = () => {
+  displayPassword.value = !displayPassword.value;
+};
+</script>
+
+<style lang="css"></style>

package/components/forms/input-text/variants/material/InputTextAsNumberWithLabel.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
+    <label :for="id" class="input-text-label body-normal-bold">{{ label }}</label>
+    <template v-if="hasDescription">
+      <slot name="description"></slot>
+    </template>
+
+    <InputTextCore
+      v-model="modelValue"
+      v-model:isDirty="isDirty"
+      v-model:isActive="isActive"
+      type="text"
+      :maxlength
+      :id
+      :name
+      :placeholder
+      :label
+      :errorMessage
+      :fieldHasError
+      :required
+      :styleClassPassthrough
+      :theme
+      inputmode="numeric"
+    >
+      <template v-if="hasLeftSlot" #left>
+        <InputButtonCore type="button" @click.stop.prevent="updateValue(-step, Number(modelValue) > min)" :is-pending="false" buttonText="Step down" theme="ghost" size="x-small">
+          <template #iconOnly>
+            <slot name="left"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+      <template v-if="hasRightSlot" #right>
+        <InputButtonCore type="button" @click.stop.prevent="updateValue(step, Number(modelValue) < max)" :is-pending="false" buttonText="Step up" theme="ghost" size="x-small">
+          <template #iconOnly>
+            <slot name="right"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+    </InputTextCore>
+    <InputError :errorMessage="errorMessage" :fieldHasError :id :isDetached="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../../c12/prop-validators';
+const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, step, min, max } = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  min: {
+    type: Number,
+    required: true,
+  },
+  max: {
+    type: Number,
+    required: true,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const slots = useSlots();
+const hasDescription = computed(() => slots.description !== undefined);
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel();
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const minLength = computed(() => `${max.toString().length + 3}ch`);
+
+const updateValue = (step: number, withinRangeLimit: boolean) => {
+  if (withinRangeLimit) {
+    modelValue.value = (Number(modelValue.value) + step) as number;
+  }
+};
+
+onMounted(() => {
+  updateElementClasses(['input-text-as-number']);
+});
+</script>
+
+<style lang="css">
+.input-text-as-number {
+  .input-text-wrapper {
+    width: fit-content;
+    .input-text-core.input-text-as-number {
+      flex-grow: initial;
+      text-align: center;
+      width: v-bind(minLength);
+    }
+  }
+}
+</style>