srcdev-nuxt-components 9.3.7 → 9.3.8

package/app/pages/forms/examples/material/checkbox-radio-panels.vue

@@ -1,244 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <div>
-          <h1 class="header-1">Checkbox/Radio panels</h1>
-        </div>
-        <LayoutGridByCols>
-          <template #item-0>
-            <FormWrapper width="medium">
-              <template #default>
-                <ClientOnly>
-                  <form ref="formRef" class="form-wrapper" @submit.stop.prevent="submitForm()">
-                    <div id="aria-live-message" aria-live="assertive"></div>
-
-                    <FormField v-if="limitedTags !== null" width="wide" :has-gutter="false">
-                      <template #default>
-                        <MultipleCheckboxes
-                          v-model="state.tags"
-                          v-model:field-data="limitedTags"
-                          name="tags"
-                          legend="Choose tags (MultipleCheckboxes)"
-                          :required="true"
-                          label="Check between 3 and 8 tags"
-                          placeholder="eg. Type something here"
-                          :is-button="true"
-                          :error-message="formErrors?.tags?._errors[0] ?? ''"
-                          :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.tags)"
-                          options-layout="inline"
-                          :theme
-                          :display-as-disc="false"
-                          :display-as-lozenge="false"
-                        >
-                          <template #descriptionText>MultipleCheckboxes description: optionsLayout = 'inline'</template>
-                          <template #itemIcon>
-                            <Icon name="material-symbols:bookmark-add-outline" class="icon" />
-                          </template>
-                        </MultipleCheckboxes>
-                      </template>
-                    </FormField>
-
-                    <FormField v-if="limitedTags !== null" width="wide" :has-gutter="false">
-                      <template #default>
-                        <MultipleRadiobuttons
-                          v-model="state.tagsRadio"
-                          v-model:field-data="limitedTags"
-                          name="tagsRadio"
-                          legend="Choose tags (as radiobuttons)"
-                          :required="true"
-                          label="Check between 3 and 8 tags"
-                          placeholder="eg. Type something here"
-                          :is-button="true"
-                          :error-message="formErrors?.tagsRadio?._errors[0] ?? ''"
-                          :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.tagsRadio)"
-                          options-layout="inline"
-                          :theme
-                          direction="row-reverse"
-                          :display-as-lozenge="true"
-                        >
-                          <template #description>
-                            <p class="label-description">This is description: optionsLayout = 'inline'</p>
-                          </template>
-                          <template #checkedIcon>
-                            <Icon name="material-symbols:check-circle-rounded" class="icon" />
-                          </template>
-                        </MultipleRadiobuttons>
-                      </template>
-                    </FormField>
-
-                    <FormField width="wide" :has-gutter="false">
-                      <template #default>
-                        <InputButtonCore
-                          type="button"
-                          :is-pending="false"
-                          :readonly="zodFormControl.submitDisabled"
-                          button-text="Submit"
-                          :theme
-                          @click.stop.prevent="submitForm()"
-                        />
-                      </template>
-                    </FormField>
-                  </form>
-                </ClientOnly>
-              </template>
-            </FormWrapper>
-          </template>
-        </LayoutGridByCols>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { z } from "zod";
-import type { IFormMultipleOptions, FormUiTheme } from "~/types/forms/types.forms";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Text Field Example",
-  meta: [{ name: "description", content: "Homepage" }],
-  bodyAttrs: {
-    class: "checkbox-radio-panels-page",
-  },
-});
-
-const theme = ref<FormUiTheme>("default");
-
-/*
- * Fetch some sample data
- **/
-const { data: tagsData } = await useFetch<IFormMultipleOptions>("/api/recipes/tags");
-
-// 1st 3 items from tagsData
-const limitedTags = computed(() => {
-  if (!tagsData.value) return null;
-
-  const count = 3;
-  const tags: IFormMultipleOptions = {
-    data: tagsData.value.data.slice(0, count),
-    total: count,
-    skip: 0,
-    limit: 3,
-  };
-
-  return tags;
-});
-
-/*
- * Setup forms
- */
-const formSchema = reactive(
-  z
-    .object({
-      tags: z.array(z.string()).min(3, "Please select at least 3 tags").max(8, "Please select no more than 8 tags"),
-      tagsRadio: z.string().min(1, { error: "Please choose a tag" }),
-    })
-    .required({
-      tags: true,
-      tagsRadio: true,
-    })
-);
-
-type formSchema = z.infer<typeof formSchema>;
-const formErrors = computed<z.ZodFormattedError<formSchema> | null>(() => zodErrorObj.value);
-
-const state = reactive({
-  tags: ["pizza"],
-  tagsRadio: "italian",
-});
-
-const formRef = ref<HTMLFormElement | null>(null);
-
-const {
-  initZodForm,
-  zodFormControl,
-  zodErrorObj,
-  // formErrors,
-  pushCustomErrors,
-  doZodValidate,
-  // fieldMaxLength,
-  scrollToFirstError,
-  // scrollToFormHead,
-} = useZodValidation(formSchema, formRef);
-
-initZodForm();
-
-const submitForm = async () => {
-  zodFormControl.submitAttempted = true;
-  if (!(await doZodValidate(state))) {
-    scrollToFirstError();
-    return;
-  }
-  zodFormControl.displayLoader = true;
-  try {
-    console.log("Form valid - post it");
-    const data = await $fetch("/api/textFields", {
-      method: "post",
-      body: state,
-      async onResponse({ response }) {
-        if (response.status === 400) {
-          console.log("onResponse", response);
-          console.log(response.status);
-
-          // useApiErrors(response._data.data.errors);
-          // for (const [key, message] of Object.entries(response._data.data.errors)) {
-          //   console.log(`${key}: ${message}`);
-          //   updateErrorMessages(key, message);
-          // }
-
-          // if (error instanceof Error) {
-          await pushCustomErrors(response._data, state);
-          // zodFormControl.formIsValid = false;
-          // }
-          // zodFormControl.submitAttempted = false;
-        }
-        if (response.status === 200) {
-          zodFormControl.submitSuccessful = true;
-        }
-      },
-    });
-    console.log("3: Finished data", data);
-    // return data;
-  } catch (error) {
-    console.warn("2: An error occured posting form data", error);
-  } finally {
-    zodFormControl.displayLoader = false;
-  }
-};
-
-watch(
-  () => state,
-  () => {
-    // console.log('Watching state');
-    doZodValidate(state);
-  },
-  { deep: true }
-);
-</script>
-
-<style lang="css">
-.checkbox-radio-panels-page {
-}
-
-.flex-group {
-  align-items: flex-start;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2.4rem;
-  margin-bottom: 3.2rem;
-}
-
-ul.flex-group {
-  list-style-type: none;
-  padding: 0;
-}
-
-.header-1 {
-  font-family: var(--font-family);
-  color: var(--brand-success-text-text);
-}
-</style>

package/app/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: 5rem;
-    outline: 1rem solid #0b2429;
-  }
-}
-</style>