srcdev-nuxt-forms 0.2.0 → 1.0.0

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>

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

@@ -0,0 +1,125 @@
+<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>
+
+    <InputTextCore
+      v-model="modelValue"
+      v-model:isDirty="isDirty"
+      v-model:isActive="isActive"
+      :type
+      :maxlength
+      :id
+      :name
+      :placeholder
+      :label
+      :errorMessage
+      :fieldHasError
+      :required
+      :styleClassPassthrough
+      :theme
+    >
+      <template v-if="hasLeftSlot" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="hasRightSlot" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputTextCore>
+    <InputError :errorMessage="errorMessage" :fieldHasError :id :isDetached="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../../c12/prop-validators';
+const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  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 slots = useSlots();
+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 testDirty = () => {
+  const watchValue = modelValue.value ?? '';
+
+  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>
+
+<style lang="css">
+.input-text-with-label {
+  .input-text-label {
+    display: block;
+    margin-block: 8px;
+  }
+}
+</style>

package/components/forms/input-textarea/InputTextareaCore.vue

@@ -1,36 +1,41 @@
 <template>
-  <div class="input-textarea-wrapper" :class="[{ 'has-left-content': hasLeftContent }, { 'has-right-content': hasRightContent }]">
-    <span v-if="hasLeftContent" class="left-content">
+  <div
+    class="input-textarea-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>
 
     <textarea
+      :maxlength
+      :placeholder
       :id
       :name
-      :pattern="componentValidation.pattern"
-      :maxlength="componentValidation.maxlength"
       :required
-      :class="['input-textarea-core', 'text-normal', styleClassPassthrough, { active: isFocused }, { dirty: fieldIsDirty }, { error: fieldHasError }]"
-      v-model="<string>modelValue.data[name]"
+      :class="['input-text-core', 'text-normal', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      v-model="modelValue"
       ref="inputField"
-      :placeholder="c12.placeholder"
       :aria-invalid="fieldHasError"
       :aria-describedby="`${id}-error-message`"
-      @focusin="updateFocus(name, true)"
-      @focusout="updateFocus(name, false)"
+      @focusin="updateFocus(true)"
+      @focusout="updateFocus(false)"
     ></textarea>
 
-    <span v-if="hasRightContent" class="right-content">
+    <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';
-
-const props = defineProps({
+import propValidators from '../c12/prop-validators';
+const { maxlength, id, name, placeholder, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
   id: {
     type: String,
     required: true,
@@ -39,132 +44,118 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  validation: {
+  placeholder: {
     type: String,
-    default: null,
+    default: '',
   },
-  required: {
+  fieldHasError: {
     type: Boolean,
-    value: false,
+    default: false,
   },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
+  required: {
+    type: Boolean,
+    default: false,
   },
   styleClassPassthrough: {
-    type: String,
-    default: '',
+    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) => {
-  console.log(`textarea | updateFocus: ${name} ${isFocused}`);
-  modelValue.value.focusedField = isFocused ? name : '';
-};
-
-const isFocused = computed(() => {
-  return modelValue.value.focusedField == name.value;
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
 });
 
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-
-const validatorLocale = toRef(useRuntimeConfig().public.validatorLocale);
-
-const componentValidation = validationConfig[validatorLocale.value][props.validation];
-const inputField = ref<HTMLInputElement | null>(null);
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+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 { 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;
-
-  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 inputField = ref<HTMLInputElement | null>(null);
 
-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);
-};
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 
 onMounted(() => {
-  isValid();
+  updateElementClasses(['deep-bristol', 'deep-london', 'deep-bath']);
 });
 </script>
 
 <style lang="css">
 .input-textarea-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);
 
-    .left-content {
+  &: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);
+    }
+  }
+
+  &.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;
+    }
+  }
 }
 </style>

package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="input-textarea-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
+    <label :for="id" class="input-textarea-label body-normal-semibold">{{ label }}</label>
+
+    <InputTextareaCore v-model="modelValue" v-model:isDirty="isDirty" v-model:isActive="isActive" :maxlength :id :name :placeholder :label :fieldHasError :required :styleClassPassthrough :theme>
+      <template v-if="hasLeftSlot" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="hasRightSlot" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputTextareaCore>
+    <InputError :errorMessage :fieldHasError :id :isDetached="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme } = 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);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? '';
+
+  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>
+
+<style lang="css">
+.input-textarea-with-label {
+  .input-textarea-label {
+    display: block;
+    margin-block: 8px;
+  }
+}
+</style>

package/components/scaffolding/footer/NavFooter.vue

@@ -0,0 +1,62 @@
+<template>
+  <footer>
+    <ul class="footer-list">
+      <li class="footer-item">
+        <Icon name="material-symbols-light:mail-rounded" class="icon" />
+        <span class="text">email@address.com</span>
+      </li>
+      <li class="footer-item">
+        <Icon name="ph:building-office-light" class="icon" />
+        <span class="text">Company number: 12345678</span>
+      </li>
+      <li class="footer-item">
+        <Icon name="material-symbols:call" class="icon" />
+        <span class="text">+44 (0) 1223 123 123</span>
+      </li>
+      <li class="footer-item">
+        <Icon name="material-symbols:location-on" class="icon" />
+        <span class="text">Some address, City, Postcode</span>
+      </li>
+    </ul>
+  </footer>
+</template>
+<script setup lang="ts"></script>
+
+<style lang="css">
+footer {
+  display: none;
+  padding: 1rem;
+  text-align: center;
+  background: white;
+  margin-bottom: 50px;
+
+  .footer-list {
+    display: inline-grid;
+    gap: 10px;
+    grid-template-columns: 280px 456px;
+    margin-inline: auto;
+    padding: 0;
+  }
+
+  .footer-item {
+    list-style-type: none;
+    gap: 10px;
+    display: grid;
+    grid-template-columns: 40px auto;
+    align-items: center;
+
+    .icon {
+      display: block;
+      font-size: 30px;
+      text-align: center;
+      min-width: 40px;
+    }
+    .text {
+      font-family: 'Poppins', Sans-serif;
+      font-family: var(--font-family);
+      font-size: var(--step-1);
+      text-align: start;
+    }
+  }
+}
+</style>