srcdev-nuxt-forms 0.2.0 → 1.0.0

package/pages/index.vue

@@ -27,7 +27,7 @@ useHead({
 </script>
 
 <style lang="css">
-p {
+/* p {
   color: initial;
-}
+} */
 </style>

package/pages/typography.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <h1 class="heading-3">Typography</h1>
+        <h2 class="heading-4">Headings</h2>
+        <ul>
+          <li class="heading-1">Heading 1</li>
+          <li class="heading-2">Heading 2</li>
+          <li class="heading-3">Heading 3</li>
+          <li class="heading-4">Heading 4</li>
+          <li class="heading-5">Heading 5</li>
+          <li class="heading-6">Heading 6</li>
+        </ul>
+
+        <h2 class="heading-4">Body Regular</h2>
+        <ul>
+          <li class="body-large">Body Large</li>
+          <li class="body-normal">Body Normal</li>
+          <li class="body-small">Body Small</li>
+          <li class="body-xsmall">Body X-Small</li>
+        </ul>
+
+        <h2 class="heading-4">Body Semi-Bold</h2>
+        <ul>
+          <li class="body-large-semibold">Body Large Semi-Bold</li>
+          <li class="body-normal-semibold">Body Normal Semi-Bold</li>
+          <li class="body-small-semibold">Body Small Semi-Bold</li>
+          <li class="body-xsmall-semibold">Body X-Small Semi-Bold</li>
+        </ul>
+
+        <h2 class="heading-4">Body Bold</h2>
+        <ul>
+          <li class="body-large-bold">Body Large Bold</li>
+          <li class="body-normal-bold">Body Normal Bold</li>
+          <li class="body-small-bold">Body Small Bold</li>
+          <li class="body-xsmall-bold">Body X-Small Bold</li>
+        </ul>
+
+        <h2 class="heading-4">Links</h2>
+        <ul>
+          <li class="link-large">Link Large</li>
+          <li class="link-normal">Link Normal</li>
+          <li class="link-small">Link Small</li>
+          <li class="link-xsmall">Link X-Small</li>
+        </ul>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: 'Typography Examples',
+  meta: [{ name: 'description', content: 'Typography' }],
+  bodyAttrs: {
+    class: 'typography',
+  },
+});
+</script>
+
+<style lang="css">
+.typography {
+  /* font-family: 'Poppins', Sans-serif; */
+  /* font-family: var(--font-family); */
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+
+    li {
+      background: #ffffff;
+      border-radius: 5px;
+      padding: 10px;
+      margin-block-end: 20px;
+    }
+  }
+}
+</style>

package/server/data/places/cities.json

@@ -1,5 +1,11 @@
 {
   "data": [
+    {
+      "id": "bradford-on-avon",
+      "name": "cities",
+      "value": "cities-2",
+      "label": "Bradford on Avon"
+    },
     {
       "id": "bath",
       "name": "cities",
@@ -31,7 +37,7 @@
       "label": "Penzance"
     }
   ],
-  "total": 5,
+  "total": 6,
   "skip": 0,
   "limit": 10
 }

package/types/types.forms.ts

@@ -27,6 +27,10 @@ export interface IFieldsInitialState {
   [key: string]: null | string | boolean | number | URL | object | IOptionsValueArr[];
 }
 
+export type TFieldsInitialState = {
+  [key: string]: null | string | boolean | number | URL | object | IOptionsValueArr[];
+};
+
 export interface IValidityState {
   badInput: boolean;
   customError: boolean;
@@ -92,6 +96,16 @@ export interface IFormFieldsC12 {
   [x: string]: IFormFieldC12;
 }
 
+export interface IFormFieldState {
+  isValid: boolean;
+  isDirty: boolean;
+  previousValue: null | string | boolean | number | URL | object;
+}
+
+export interface IFormFieldStateObj {
+  [x: string]: IFormFieldState;
+}
+
 export interface IFormData {
   [x: string]: string | boolean | number | URL | object;
   data: IFieldsInitialState;
@@ -112,3 +126,91 @@ export interface IFormData {
 export interface IApiErrorMessages {
   [x: string]: string;
 }
+
+// New types
+
+export interface C12nInputText {
+  type: string;
+  id: string;
+  name: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  styleClassPassthrough: string[];
+}
+
+export interface C12nMultipleCheckboxes {
+  id: string;
+  name: string;
+  label: string;
+  legend: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  styleClassPassthrough: string[];
+}
+
+export interface C12nInputCheckboxWithLabel {
+  id: string;
+  name: string;
+  required: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string | string[];
+  fieldHasError: boolean;
+  styleClassPassthrough: string[];
+}
+
+export interface C12nInputRange {
+  id: string;
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  styleClassPassthrough: string[];
+}
+
+export interface C12nInputTextCore {
+  type: string;
+  id: string;
+  name: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+}
+
+export interface InputTextWithLabel {
+  type: string;
+  id: string;
+  name: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  styleClassPassthrough: string[];
+  deepCssClassPassthrough: string[];
+}
+
+export interface ApiErrorResponse {
+  url: string;
+  statusCode: number;
+  statusMessage: string;
+  message: string;
+  stack: string;
+  data: {
+    errors: {
+      [key: string]: string | string[]; // Index signature for dynamic keys
+    };
+  };
+}

package/types/types.zodFormControl.ts

@@ -0,0 +1,21 @@
+import type { IFieldsInitialState, IFormFieldsState, IFormFieldsC12, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '@/types/types.forms';
+
+export interface IZodeFormControl {
+  [x: string]: string | boolean | number | URL | object;
+  data: IFieldsInitialState;
+  validityState: IFormFieldsState;
+  dirtyFields: IFormFieldsState;
+  focusedField: string;
+  isDisabled: boolean;
+  isPending: boolean;
+  errorCount: number;
+  errorMessages: IErrorMessagesArr;
+  formFieldsC12: IFormFieldsC12;
+  formIsValid: boolean;
+  submitAttempted: boolean;
+  submitDisabled: boolean;
+  submitSuccess: boolean;
+  displayErrorMessages: boolean;
+  displayLoader: boolean;
+  submitSuccessful: boolean;
+}

package/assets/styles/forms/utils/_a11y.css

@@ -1,5 +0,0 @@
-:where(html) {
-  --focus-visible-colour: #4169e1;
-  --focus-visible-box-shadow: 1px 1px 8px 1px var(--focus-visible-colour);
-  --focus-visible-outline: 2px solid var(--focus-visible-colour);
-}

package/assets/styles/forms/utils/index.css

@@ -1 +0,0 @@
-@import './_a11y.css';

package/components/forms/input-radio/InputRadioCore.vue

@@ -1,226 +0,0 @@
-<template>
-  <div class="input-radio-wrapper" :class="[`theme-${theme}`, size, radioAppearance, { error: fieldHasError }]">
-    <input
-      type="radio"
-      :true-value="trueValue"
-      :false-value="falseValue"
-      :id
-      :name
-      :required="props.required && !props.multipleOptions"
-      :value="trueValue"
-      :class="['input-radio-core', radioAppearance]"
-      v-model="modelValue.data[name]"
-      ref="inputField"
-    />
-    <div v-if="radioAppearance === 'with-decorator'" class="input-radio-decorator"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
-
-const props = defineProps({
-  id: {
-    // type: String as PropType<string>,
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  trueValue: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-  falseValue: {
-    type: [String, Number, Boolean],
-    default: false,
-  },
-  multipleOptions: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-  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);
-    },
-  },
-  radioAppearance: {
-    type: String as PropType<string>,
-    default: null,
-    validator(value: string) {
-      return propValidators.radioAppearance.includes(value);
-    },
-  },
-});
-
-const modelValue = defineModel() as Ref<IFormData>;
-
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-
-const inputField = ref<HTMLInputElement | null>(null);
-
-const isArray = Array.isArray(modelValue.value.data[name.value]);
-
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[name.value].isValid;
-});
-
-if (modelValue.value.formFieldsC12[name.value] === undefined) {
-  const formFieldC12 = <IFormFieldC12>{
-    label: props.c12.label,
-    placeholder: props.c12.placeholder,
-    errorMessage: props.c12.errorMessage,
-    useCustomError: false,
-    customErrors: {},
-    isValid: false,
-    isDirty: false,
-    type: isArray ? 'array' : 'string',
-    previousValue: null,
-  };
-  modelValue.value.formFieldsC12[name.value] = formFieldC12;
-}
-
-const fieldValue = computed(() => {
-  return modelValue.value.data[name.value];
-});
-
-watch(fieldValue, () => {
-  if (isArray) {
-    modelValue.value.validityState[name.value] = Object.values(modelValue.value.data[name.value] ?? []).length > 0;
-    modelValue.value!.formFieldsC12[name.value].isValid = modelValue.value.validityState[name.value];
-  } else {
-    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;
-  }
-});
-</script>
-
-<style scoped lang="css">
-.input-radio-wrapper {
-  --_radio-size: initial;
-  --_radio-border-radius: 50%;
-  --_form-theme: var(--theme-form-primary);
-  --_outline-width: var(--input-outline-width-thin);
-  --_border-width: var(--input-border-width-thin);
-  --_border-color: var(--_form-theme);
-  --_focus-colour: var(--theme-form-primary-focus);
-  --_background-colour: var(--theme-form-primary-radio-color-bg);
-  --_background: none;
-  --_decorator-size: calc(var(--_radio-size) - (var(--_border-width) * 2));
-  --_checked-color: var(--_background-colour);
-  --_box-shadow: 0 0 2px 3px transparent;
-
-  display: grid;
-  grid-template-areas: 'radio-stack';
-
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-    --_focus-colour: var(--theme-form-secondary-focus);
-    --_background-colour: var(--theme-form-secondary-radio-color-bg);
-  }
-
-  &.error {
-    --_form-theme: var(--theme-error);
-  }
-
-  /* Sizes */
-  &.x-small {
-    --_radio-size: 20px;
-  }
-  &.small {
-    --_radio-size: 24px;
-  }
-  &.normal {
-    --_radio-size: 30px;
-  }
-  &.medium {
-    --_radio-size: 40px;
-  }
-  &.large {
-    --_radio-size: 44px;
-  }
-
-  &:has(.input-radio-core.with-decorator:focus-visible) {
-    --_border-color: white;
-    --_box-shadow: 0 0 2px 3px var(--_focus-colour);
-    --_focus-colour: var(--_focus-colour);
-
-    &.theme-primary {
-      --_focus-colour: var(--theme-form-primary-focus);
-    }
-
-    &.theme-secondary {
-      --_focus-colour: var(--theme-form-secondary-focus);
-    }
-  }
-
-  &:has(.input-radio-core.with-decorator:checked) {
-    --_checked-color: hsl(from var(--_form-theme) h s 50%);
-    --_background: radial-gradient(circle, rgba(63, 94, 251, 1) 30%, rgba(63, 94, 251, 0.5550814075630253) 70%, rgba(255, 255, 255, 0.42622986694677867) 100%);
-  }
-
-  &.with-decorator {
-    border-radius: var(--_radio-border-radius);
-    border: var(--_border-width) solid var(--_border-color);
-    height: var(--_radio-size);
-    width: var(--_radio-size);
-
-    .input-radio-decorator {
-      grid-area: radio-stack;
-      height: var(--_decorator-size);
-      width: var(--_decorator-size);
-      border: var(--_border-width) solid var(--_background-colour);
-      border-radius: var(--_radio-border-radius);
-      background: var(--_checked-color);
-      /* background: rgb(0, 0, 255); */
-      background: var(--_background);
-      box-shadow: var(--_box-shadow);
-      outline-color: var(--_focus-colour);
-    }
-
-    .input-radio-core {
-      grid-area: radio-stack;
-      &.with-decorator {
-        opacity: 0;
-        appearance: none;
-        overflow: hidden;
-        height: var(--_radio-size);
-        width: var(--_radio-size);
-      }
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}
-</style>

package/components/forms/input-radio/InputRadioWithLabel.vue

@@ -1,118 +0,0 @@
-<template>
-  <div class="input-radio-with-label" :class="[styleClassPassthrough, `theme-${theme}`, { error: fieldHasError }]">
-    <InputRadioCore :id :name :required :c12 v-model="modelValue" :theme :size :trueValue :falseValue :radioAppearance />
-    <label class="input-radio-label" :for="id">{{ c12.label }}</label>
-  </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({
-  id: {
-    // type: String as PropType<string>,
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  trueValue: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-  falseValue: {
-    type: [String, Number, Boolean],
-    default: false,
-  },
-  multipleOptions: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-  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);
-    },
-  },
-  radioAppearance: {
-    type: String as PropType<string>,
-    default: null,
-    validator(value: string) {
-      return propValidators.radioAppearance.includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
-
-const modelValue = defineModel() as Ref<IFormData>;
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[name.value].isValid;
-});
-</script>
-
-<style lang="css">
-.input-radio-with-label {
-  --_form-theme: var(--theme-form-primary);
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-outline-width-thin);
-  --_radio-size: 40px;
-
-  display: flex;
-  align-items: center;
-
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-  }
-
-  &.error {
-    --_form-theme: var(--theme-error);
-  }
-
-  .input-radio-label {
-    color: var(--_form-theme);
-    font-family: var(--font-family);
-    font-size: 14px;
-    font-weight: 500;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    padding-inline: 10px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-</style>