srcdev-nuxt-forms 0.2.0 → 1.0.1

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

@@ -1,29 +1,54 @@
 <template>
-  <div class="input-range-with-label" :class="[styleClassPassthrough, `theme-${theme}`, { error: fieldHasError }]">
-    <label class="input-range-label" :for="id">{{ c12.label }}</label>
+  <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 :id :name :required :c12 v-model="modelValue" :theme :size :weight :min :max :step>
+
+    <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>
-        <slot name="left"></slot>
+        <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>
-        <slot name="right"></slot>
+        <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';
 
-import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
-// import { validationConfig } from '@/components/forms/c12/validation-patterns';
-
-const props = defineProps({
+const { id, name, label, required, min, max, step, theme, size, weight, styleClassPassthrough, errorMessage, fieldHasError } = defineProps({
   id: {
-    // type: String as PropType<string>,
     type: String,
     required: true,
   },
@@ -31,30 +56,38 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  required: {
-    type: Boolean,
-    value: false,
+  label: {
+    type: String,
+    required: true,
   },
   min: {
     type: Number,
-    default: 0,
+    required: true,
   },
   max: {
     type: Number,
-    default: 100,
+    required: true,
   },
   step: {
     type: Number,
     default: 1,
   },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  styleClassPassthrough: {
+  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',
@@ -76,45 +109,41 @@ const props = defineProps({
       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 modelValue = defineModel() as Ref<IFormData>;
-
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
 });
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[name.value].isValid;
-});
-</script>
 
-<style lang="css">
-.input-range-with-label {
-  --_form-theme: var(--theme-form-primary);
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-outline-width-thin);
-  --_label-padding-inline: 10px;
-
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-  }
+const modelValue = defineModel<number | readonly number[]>();
 
-  &.error {
-    --_form-theme: var(--theme-error);
+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 {
-    color: var(--_form-theme);
     display: block;
-    font-family: var(--font-family);
-    font-size: 18px;
-    font-weight: 500;
-    margin-bottom: 12px;
+    margin-block: 8px;
 
     &:hover {
       cursor: pointer;
@@ -125,7 +154,6 @@ const fieldHasError = computed(() => {
     font-family: var(--font-family);
     font-size: 16px;
     margin-top: 12px;
-    color: var(--theme-form-secondary);
   }
 }
 </style>

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

@@ -1,48 +1,56 @@
 <template>
-  <div class="input-text-wrapper" :class="[{ 'has-left-content': hasLeftContent }, { 'has-right-content': hasRightContent }]">
-    <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-core', 'text-normal', styleClassPassthrough, { active: isFocused }, { dirty: fieldIsDirty }, { error: fieldHasError }]"
-      v-model="modelValue.data[name]"
+      :maxlength
+      :class="['input-text-core', 'text-normal', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      v-model="modelValue"
       ref="inputField"
       :aria-invalid="fieldHasError"
       :aria-describedby="`${id}-error-message`"
-      @focusin="updateFocus(name, true)"
-      @focusout="updateFocus(name, false)"
+      :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, IFormFieldC12, 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,
+    type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
+    default: 'text',
     validator(value: string) {
       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,
     required: true,
@@ -51,131 +59,155 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  validation: {
-    type: String,
-    default: null,
-  },
   required: {
     type: Boolean,
-    value: false,
+    default: false,
   },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  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 hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
 
-const updateFocus = (name: string, isFocused: boolean) => {
-  modelValue.value.focusedField = isFocused ? name : '';
-};
-
-const isFocused = computed(() => {
-  return modelValue.value.focusedField == name.value;
-});
-
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
 });
 
-const validatorLocale = toRef(useRuntimeConfig().public.validatorLocale);
-
-const componentValidation = validationConfig[validatorLocale.value][props.validation];
-const inputField = ref<HTMLInputElement | null>(null);
+const modelValue = defineModel();
+const isDirty = defineModel('isDirty');
+const isActive = defineModel('isActive');
 
-const fieldIsDirty = computed(() => {
-  return modelValue.value!.formFieldsC12[name.value].isDirty;
-});
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[name.value].isValid;
+const inputPattern = computed(() => {
+  return inputmode === 'numeric' ? '[0-9]+' : undefined;
 });
 
-// const { fieldHasError } = useFormControl(name.value);
-
-const formFieldC12 = <IFormFieldC12>{
-  label: props.c12.label,
-  placeholder: props.c12.placeholder,
-  errorMessage: props.c12.errorMessage,
-  useCustomError: false,
-  customErrors: {},
-  isValid: false,
-  isDirty: false,
-  type: 'string',
-  previousValue: null,
+const updateFocus = (isFocused: boolean) => {
+  isActive.value = isFocused;
 };
-modelValue.value!.formFieldsC12[name.value] = formFieldC12;
-
-const { initFormFieldsC12 } = useFormControl();
-initFormFieldsC12(props.name, formFieldC12);
-
-const fieldValue = computed(() => {
-  return modelValue.value.data[name.value];
-});
 
-watch(fieldValue, () => {
-  if (!modelValue.value!.formFieldsC12[name.value].isDirty) {
-    modelValue.value!.formFieldsC12[name.value].isDirty = modelValue.value.data[name.value] !== '';
-  }
-  modelValue.value!.formFieldsC12[name.value].isValid = inputField.value?.validity.valid ?? false;
-  modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
+const inputField = ref<HTMLInputElement | null>(null);
 
-  if (modelValue.value!.formFieldsC12[name.value].useCustomError && modelValue.value.data[props.name] === modelValue.value.formFieldsC12[props.name].previousValue) {
-    modelValue.value!.validityState[name.value] = false;
-    modelValue.value!.formFieldsC12[name.value].isValid = false;
-    modelValue.value.displayErrorMessages = true;
+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;
-    modelValue.value!.formFieldsC12[name.value].isValid = inputField.value?.validity.valid ?? false;
-    if (!modelValue.value!.formFieldsC12[name.value].isDirty) {
-      modelValue.value!.formFieldsC12[name.value].isDirty = modelValue.value.data[name.value] !== '';
-    }
-  }, 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;
-  display: grid;
-  grid-template-columns: 1fr;
 
-  &.has-left-content {
-    grid-template-columns: auto 1fr;
-    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;
+
+    .icon {
+      color: var(--theme-form-input-text);
+    }
+  }
 
-    .left-content {
+  &.has-left-slot {
+    .left-slot {
       display: flex;
       align-items: center;
     }
   }
 
-  &.has-right-content {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    /* display: flex; */
-    margin-right: var(--_gutter);
-
-    .right-content {
+  &.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>