srcdev-nuxt-forms 2.0.2 → 2.0.4

package/.playground/composables/useZodValidation.ts

@@ -1,120 +0,0 @@
-import { z, ZodError } from 'zod';
-import type { IFormFieldStateObj, ApiErrorResponse } from '@/types/types.forms';
-
-const useZodValidation = (formSchema: any) => {
-  const zodFormControl = reactive({
-    errorCount: 0,
-    displayLoader: false,
-    submitDisabled: false,
-    submitAttempted: false,
-    submitSuccessful: false,
-    formIsValid: false,
-    isPending: false,
-    isDisabled: false,
-    previousState: {} as Record<string, any>,
-  });
-
-  type formSchema = z.infer<typeof formSchema>;
-  const zodErrorObj = ref<z.ZodFormattedError<formSchema> | null>(null);
-
-  const resetPreviousValues = () => {
-    for (const [field] of Object.entries(formSchema.shape)) {
-      const previousValue = {
-        value: null,
-        message: '',
-      };
-
-      zodFormControl.previousState[field] = previousValue;
-    }
-  };
-
-  const initZodForm = () => {
-    resetPreviousValues();
-  };
-
-  const getErrorCount = (zodErrorObj: Ref<z.ZodFormattedError<formSchema> | null>) => {
-    const zodCountErrors = zodErrorObj.value ?? [];
-    // @ts-ignore
-    delete zodCountErrors._errors;
-    const errorCount = Object.keys(zodCountErrors ?? []).length;
-    return errorCount;
-  };
-
-  const transformErrorMessages = (errors: any) => {
-    const apiErrors = ref({}) as any;
-    for (const [key, value] of Object.entries(errors)) {
-      const fieldPath = key.split('.').map((key: string) => key.charAt(0).toLowerCase() + key.slice(1));
-      apiErrors.value[fieldPath.join('.')] = value;
-    }
-
-    return apiErrors.value;
-  };
-
-  const updatePreviousValue = async (field: string, message: string, state: Record<string, any>) => {
-    const previousValue = {
-      value: state[field],
-      message: message,
-    };
-    zodFormControl.previousState[field] = previousValue;
-  };
-
-  const pushCustomErrors = async (apiErrorResponse: ApiErrorResponse, state: Record<string, any>) => {
-    const apiErrors = transformErrorMessages(apiErrorResponse.data.errors);
-
-    // 1: Create a ZodError object to hold the issues
-    const zodError = new ZodError([]);
-
-    // 2: Reset previous state values
-    resetPreviousValues();
-
-    // 3: Add issues to the ZodError object
-    for (const [path, message] of Object.entries(apiErrors)) {
-      zodError.addIssue({
-        path: path.split('.'),
-        message: message as string,
-        code: z.ZodIssueCode.custom,
-      });
-      await updatePreviousValue(path, message as string, state);
-    }
-
-    zodErrorObj.value = zodError.format();
-    zodFormControl.errorCount = getErrorCount(zodErrorObj);
-    zodFormControl.formIsValid = zodFormControl.errorCount === 0;
-    zodFormControl.displayLoader = false;
-    zodFormControl.submitAttempted = true;
-    return zodErrorObj.value;
-  };
-
-  const doZodValidate = async (state: Record<string, any>) => {
-    const valid = formSchema.safeParse(toRaw(state));
-    if (!valid.success) {
-      zodErrorObj.value = valid.error.format();
-    } else {
-      zodErrorObj.value = null;
-    }
-
-    zodFormControl.errorCount = getErrorCount(zodErrorObj);
-    zodFormControl.formIsValid = valid.success;
-
-    return valid.success;
-  };
-
-  const fieldMaxLength = (name: string) => {
-    const fieldSchema = formSchema.shape[name];
-    if (fieldSchema instanceof z.ZodString) {
-      return fieldSchema._def.checks.find((check) => check.kind === 'max')?.value || null;
-    }
-    return null;
-  };
-
-  return {
-    initZodForm,
-    zodFormControl,
-    zodErrorObj,
-    pushCustomErrors,
-    doZodValidate,
-    fieldMaxLength,
-  };
-};
-
-export default useZodValidation;

package/.playground/layouts/default.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="page-layout">
-    <div>
-      <h1><NuxtLink to="/">Home</NuxtLink></h1>
-      <ul class="flex-group">
-        <li>
-          <NuxtLink to="/typography" class="link-normal">Typography</NuxtLink>
-        </li>
-        <li>
-          <NuxtLink to="/forms/examples/material/text-fields" class="link-normal">Material UI text fields</NuxtLink>
-        </li>
-        <li>
-          <NuxtLink to="/forms/examples/buttons" class="link-normal">Buttons</NuxtLink>
-        </li>
-      </ul>
-    </div>
-
-    <div class="page-layout-content">
-      <slot name="layout-content"></slot>
-    </div>
-
-    <NavFooter />
-  </div>
-</template>
-
-<script setup lang="ts">
-useHead({
-  bodyAttrs: {
-    class: 'body-default',
-    id: 'body',
-  },
-  // link: [
-  //   {
-  //     rel: 'preconnect',
-  //     href: 'https://fonts.googleapis.com',
-  //   },
-  //   {
-  //     rel: 'preconnect',
-  //     href: 'https://fonts.gstatic.com',
-  //     crossorigin: 'use-credentials',
-  //   },
-  //   {
-  //     href: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
-  //     rel: 'stylesheet',
-  //   },
-  // ],
-});
-</script>
-
-<style lang="css">
-.page-layout {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-}
-
-.page-layout-content {
-  container: content / inline-size;
-}
-
-.flex-group {
-  align-items: flex-start;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  margin-bottom: 32px;
-}
-
-ul.flex-group {
-  list-style-type: none;
-  padding: 0;
-}
-</style>

package/.playground/nuxt.config.ts

@@ -1,27 +0,0 @@
-export default defineNuxtConfig({
-  devtools: { enabled: true },
-  extends: ['..'],
-  app: {
-    head: {
-      htmlAttrs: {
-        lang: 'en',
-      },
-      titleTemplate: '%s - Website name',
-      meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
-    },
-    pageTransition: {
-      name: 'page',
-      mode: 'out-in',
-    },
-    layoutTransition: {
-      name: 'layout',
-      mode: 'out-in',
-    },
-  },
-  components: [
-    {
-      path: './components',
-      pathPrefix: false,
-    },
-  ],
-});

package/.playground/pages/forms/examples/buttons/index.vue

@@ -1,155 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <div>
-          <h1>Example buttons</h1>
-          <p>Primary submit</p>
-
-          <p>Themes switcher</p>
-          <ul class="flex-group">
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('primary')" :is-pending="false" button-text="Primary" theme="primary" size="normal" />
-            </li>
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('secondary')" :is-pending="false" button-text="Secondary" theme="secondary" size="normal" />
-            </li>
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('tertiary')" :is-pending="false" button-text="Tertiary" theme="tertiary" size="normal" />
-            </li>
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('warning')" :is-pending="false" button-text="Warning" theme="warning" size="normal" />
-            </li>
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('success')" :is-pending="false" button-text="Success" theme="success" size="normal" />
-            </li>
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('error')" :is-pending="false" button-text="Error" theme="error" size="normal" />
-            </li>
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('ghost')" :is-pending="false" button-text="Ghost" theme="ghost" size="normal" />
-            </li>
-          </ul>
-
-          <FormWrapper width="medium">
-            <template #default>
-              <form @submit.prevent="submitForm">
-                <div class="flex-group">
-                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small" />
-
-                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small" />
-
-                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal" />
-                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium" />
-                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large" />
-                </div>
-
-                <div class="flex-group">
-                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="x-small" />
-                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="small" />
-                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="normal" />
-                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="medium" />
-                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="large" />
-                </div>
-                <div class="flex-group">
-                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small">
-                    <template #iconOnly>
-                      <Icon name="radix-icons:eye-none" class="icon" />
-                    </template>
-                  </InputButtonCore>
-
-                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small">
-                    <template #iconOnly>
-                      <Icon name="radix-icons:eye-none" class="icon" />
-                    </template>
-                  </InputButtonCore>
-
-                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal">
-                    <template #iconOnly>
-                      <Icon name="radix-icons:eye-none" class="icon" />
-                    </template>
-                  </InputButtonCore>
-
-                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium">
-                    <template #iconOnly>
-                      <Icon name="radix-icons:eye-none" class="icon" />
-                    </template>
-                  </InputButtonCore>
-
-                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large">
-                    <template #iconOnly>
-                      <Icon name="radix-icons:eye-none" class="icon" />
-                    </template>
-                  </InputButtonCore>
-                </div>
-              </form>
-            </template>
-          </FormWrapper>
-        </div>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IFieldsInitialState, IOptionsConfig } from '@/types/types.forms';
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: 'Homepage',
-  meta: [{ name: 'description', content: 'Homepage' }],
-  bodyAttrs: {
-    class: '',
-  },
-});
-
-const theme = ref('primary');
-
-const swapTheme = (newTheme: string) => {
-  theme.value = newTheme;
-};
-
-/*
- * Setup forms
- */
-const fieldsInitialState = ref<IFieldsInitialState>({
-  emailAddress: '',
-  username: '',
-  password: '',
-});
-
-// Setup formData
-const { formData, initFormData, getErrorCount, updateErrorMessages, formIsValid, submitDisabled, useApiErrors } = useFormControl();
-await initFormData(fieldsInitialState);
-
-const submitForm = async () => {
-  await getErrorCount(true);
-
-  if (formIsValid.value) {
-    formData.value.isPending = true;
-    console.log('Form is good - post it!');
-    // await useSleep(2000);
-    // formData.value.isPending = false;
-  } else {
-    console.warn('Form has errors');
-  }
-};
-</script>
-
-<style lang="css">
-.flex-group {
-  align-items: flex-start;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  margin-bottom: 32px;
-}
-
-ul.flex-group {
-  list-style-type: none;
-  padding: 0;
-}
-</style>

package/.playground/pages/forms/examples/material/cssbattle.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-    <i a></i>
-    <i b></i>
-    <i c></i>
-  </div>
-</template>
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: 'CSS Battle',
-  meta: [{ name: 'description', content: 'CSS Battle' }],
-  bodyAttrs: {
-    class: '',
-  },
-});
-</script>
-
-<style scoped lang="css">
-html * {
-  margin: 0;
-  padding: 0;
-}
-div {
-  height: 300px;
-  width: 400px;
-  background: #0b2429;
-  display: grid;
-  grid-template-areas: stack;
-  place-content: center;
-
-  i {
-    grid-area: stack;
-    margin: auto;
-  }
-
-  i[a] {
-    background: #998235;
-    height: 300px;
-    width: 90px;
-  }
-
-  i[b] {
-    background: #0b2429;
-    height: 130px;
-    width: 100%;
-  }
-
-  i[c] {
-    background: #f3ac3c;
-    height: 90px;
-    width: 130px;
-    border-radius: 50px;
-    outline: 10px solid #0b2429;
-  }
-}
-</style>