srcdev-nuxt-forms 0.1.0 → 1.0.0

package/pages/index.vue

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

package/pages/limit-text.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="wrapper">
+    <div class="text-wrapper">
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+    </div>
+    <div class="text-wrapper">
+      <p>Nisi harum impedit, expedita eius doloremque dicta obcaecati tempora dolorem eum fuga deserunt minus facere error mollitia pariatur cum tempore, reiciendis molestiae?</p>
+    </div>
+    <div class="text-wrapper">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi harum impedit, expedita eius doloremque dicta obcaecati tempora dolorem eum fuga deserunt minus facere error mollitia pariatur cum
+        tempore, reiciendis molestiae?
+      </p>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+<style lang="css">
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+}
+
+.text-wrapper {
+  max-height: 100px;
+  width: 200px;
+  padding: 20px;
+  outline: 1px solid black;
+
+  p {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+}
+</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/api/places/list.get.ts

@@ -0,0 +1,23 @@
+import cities from '../../data/places/cities.json';
+import countries from '../../data/places/countries.json';
+
+export default defineEventHandler(async (event) => {
+  const sleep = async (ms: number) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  };
+
+  const query = getQuery(event);
+
+  let timeout = 0;
+  if (typeof query.delay !== 'undefined') {
+    timeout = Number(query.delay);
+  }
+
+  await sleep(timeout);
+
+  if (query.category === 'cities') {
+    return cities;
+  } else if (query.category === 'countries') {
+    return countries;
+  }
+});

package/server/api/textFields.post.ts

@@ -0,0 +1,37 @@
+import { createError } from 'h3';
+
+export default defineEventHandler(async (event: any) => {
+  const body = await readBody<{ emailAddress: string; password: string; username: string }>(event);
+
+  const { emailAddress, password, username } = body;
+
+  let throwError = false;
+
+  if (emailAddress === 'test@test.com') {
+    throwError = true;
+  }
+
+  const response = {
+    status: 200,
+    statusText: 'success',
+  };
+
+  // set some other response status cde
+  // setResponseStatus(event, 202)
+
+  // Throw some server side errors
+  if (throwError) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'error',
+      data: {
+        errors: {
+          emailAddress: 'Email address already registered',
+          username: 'Username already registered',
+          password: ['Password is too weak', 'Password is too short'],
+        },
+      },
+    });
+  }
+  return response;
+});

package/server/api/utils/index.get.ts

@@ -0,0 +1,20 @@
+import title from '../../data/utils/title.json';
+
+export default defineEventHandler(async (event) => {
+  const sleep = async (ms: number) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  };
+
+  const query = getQuery(event);
+
+  let timeout = 0;
+  if (typeof query.delay !== 'undefined') {
+    timeout = Number(query.delay);
+  }
+
+  await sleep(timeout);
+
+  if (query.category === 'title') {
+    return title;
+  }
+});

package/server/data/places/cities.json

@@ -0,0 +1,43 @@
+{
+  "data": [
+    {
+      "id": "bradford-on-avon",
+      "name": "cities",
+      "value": "cities-2",
+      "label": "Bradford on Avon"
+    },
+    {
+      "id": "bath",
+      "name": "cities",
+      "value": "cities-12",
+      "label": "Bath"
+    },
+    {
+      "id": "bristol",
+      "name": "cities",
+      "value": "cities-23",
+      "label": "Bristol"
+    },
+    {
+      "id": "london",
+      "name": "cities",
+      "value": "cities-42",
+      "label": "London"
+    },
+    {
+      "id": "sunderland",
+      "name": "cities",
+      "value": "cities-56",
+      "label": "Sunderland"
+    },
+    {
+      "id": "penzance",
+      "name": "cities",
+      "value": "cities-09",
+      "label": "Penzance"
+    }
+  ],
+  "total": 6,
+  "skip": 0,
+  "limit": 10
+}

package/server/data/places/countries.json

@@ -0,0 +1,55 @@
+{
+  "data": [
+    {
+      "id": "uk",
+      "name": "countries",
+      "value": "countries-12",
+      "label": "United Kingdom"
+    },
+    {
+      "id": "france",
+      "name": "countries",
+      "value": "countries-23",
+      "label": "France"
+    },
+    {
+      "id": "spain",
+      "name": "countries",
+      "value": "countries-42",
+      "label": "Spain"
+    },
+    {
+      "id": "italy",
+      "name": "countries",
+      "value": "countries-56",
+      "label": "Italy"
+    },
+    {
+      "id": "greece",
+      "name": "countries",
+      "value": "countries-09",
+      "label": "Greece"
+    },
+    {
+      "id": "turkey",
+      "name": "countries",
+      "value": "countries-13",
+      "label": "Turkey"
+    },
+    {
+      "id": "germany",
+      "name": "countries",
+      "value": "countries-76",
+      "label": "Germany"
+    },
+    {
+      "id": "portugal",
+      "name": "countries",
+      "value": "countries-34",
+      "label": "Portugal"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/server/data/utils/title.json

@@ -0,0 +1,49 @@
+{
+  "data": [
+    {
+      "id": "mr",
+      "name": "title",
+      "value": "title-12",
+      "label": "Mr"
+    },
+    {
+      "id": "Mrs",
+      "name": "title",
+      "value": "title-23",
+      "label": "Mrs"
+    },
+    {
+      "id": "ms",
+      "name": "title",
+      "value": "title-42",
+      "label": "Ms"
+    },
+    {
+      "id": "madam",
+      "name": "title",
+      "value": "title-56",
+      "label": "Madam"
+    },
+    {
+      "id": "prof",
+      "name": "title",
+      "value": "title-09",
+      "label": "Professor"
+    },
+    {
+      "id": "sir",
+      "name": "title",
+      "value": "title-11",
+      "label": "Sir"
+    },
+    {
+      "id": "lady",
+      "name": "title",
+      "value": "title-22",
+      "label": "Lady"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/types/types.forms.ts

@@ -12,6 +12,13 @@ export interface IOptionsConfig {
   label: string;
 }
 
+export interface IFormMultipleOptions {
+  data: IOptionsConfig[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
 export interface IOptionsValueArr {
   [key: string]: string | boolean | number | URL | object;
 }
@@ -20,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;
@@ -65,10 +76,36 @@ export interface InpuTextC12 {
   errorMessage: string;
 }
 
-export interface ICustomErrorMessagesArr {
+export interface IErrorMessagesArr {
   [x: string]: ICustomErrorMessage;
 }
 
+export interface IFormFieldC12 {
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  useCustomError: boolean;
+  customErrors: null | string | string[];
+  isValid: boolean;
+  isDirty: boolean;
+  type: string;
+  previousValue: null | string | boolean | number | URL | object;
+}
+
+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;
@@ -77,8 +114,103 @@ export interface IFormData {
   focusedField: string;
   isPending: boolean;
   errorCount: number;
-  customErrorMessages: ICustomErrorMessagesArr;
+  errorMessages: IErrorMessagesArr;
+  formFieldsC12: IFormFieldsC12;
   formIsValid: boolean;
-  submitSuccess: boolean;
+  submitAttempted: boolean;
   submitDisabled: boolean;
+  submitSuccess: boolean;
+  displayErrorMessages: boolean;
+}
+
+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.places.ts

@@ -0,0 +1,8 @@
+import type { IOptionsConfig } from '@/types/types.forms';
+
+export interface IFormMultipleOptions {
+  data: IOptionsConfig[];
+  total: number;
+  skip: number;
+  limit: number;
+}

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/components/forms/input-text/variants/material/InputEmailMaterial.vue

@@ -1,72 +0,0 @@
-<template>
-  <InputTextMaterialCore type="email" :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
-    <template #input>
-      <InputTextCore :id :name type="email" :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough">
-        <template #left>
-          <Icon name="radix-icons:envelope-closed" class="icon" />
-        </template>
-      </InputTextCore>
-    </template>
-  </InputTextMaterialCore>
-</template>
-
-<script setup lang="ts">
-import type { InpuTextC12, IFormData } from '@/types/types.forms';
-
-import propValidators from '../../../c12/prop-validators';
-
-const props = defineProps({
-  size: {
-    type: String as PropType<string>,
-    default: 'normal',
-    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);
-    },
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  id: {
-    // type: String as PropType<string>,
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    default: null,
-  },
-  validation: {
-    type: String,
-    default: '',
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-});
-
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-
-const modelValue = defineModel() as Ref<IFormData>;
-</script>