srcdev-nuxt-components 8.0.2 → 9.0.0

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

@@ -0,0 +1,285 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1 mbe-18">Settings</h1>
+          <h2 class="page-heading-2 mbe-18">Theme Switcher</h2>
+
+          <DisplayThemeSwitch />
+        </LayoutRow>
+
+        <ContentGrid>
+          <template #slot1>
+            <div>
+              <h1>Example buttons</h1>
+              <p>Primary submit</p>
+
+              <p>Themes switcher</p>
+              <ul class="flex-group">
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="false"
+                    button-text="Default"
+                    theme="default"
+                    @click.stop.prevent="swapTheme('default')"
+                  />
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="false"
+                    button-text="Success"
+                    theme="success"
+                    @click.stop.prevent="swapTheme('success')"
+                  />
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="false"
+                    button-text="Error"
+                    theme="error"
+                    @click.stop.prevent="swapTheme('error')"
+                  />
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="false"
+                    button-text="Warning"
+                    theme="warning"
+                    @click.stop.prevent="swapTheme('warning')"
+                  />
+                </li>
+              </ul>
+
+              <p>Variants switcher</p>
+              <ul class="flex-group">
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="false"
+                    button-text="Primary"
+                    :theme
+                    variant="primary"
+                    @click.stop.prevent="swapVariant('primary')"
+                  />
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="false"
+                    button-text="Secondary"
+                    :theme
+                    variant="secondary"
+                    @click.stop.prevent="swapVariant('secondary')"
+                  />
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="false"
+                    button-text="Tertiary"
+                    :theme
+                    variant="tertiary"
+                    @click.stop.prevent="swapVariant('tertiary')"
+                  />
+                </li>
+              </ul>
+
+              <p>Pending Settings</p>
+              <ul class="flex-group">
+                <li>
+                  <p>Toggle pending state</p>
+                  <InputButtonCore
+                    type="button"
+                    :button-text="`Pending is ${isPending}`"
+                    :theme
+                    variant="primary"
+                    @click.stop.prevent="isPending = !isPending"
+                  />
+                </li>
+                <li>
+                  <p>Toggle pending effect</p>
+                  <InputButtonCore
+                    type="button"
+                    :button-text="`Pending effect is ${hasPendingEffect}`"
+                    :theme
+                    :readonly="!isPending"
+                    variant="primary"
+                    @click.stop.prevent="hasPendingEffect = !hasPendingEffect"
+                  />
+                </li>
+              </ul>
+            </div>
+          </template>
+        </ContentGrid>
+
+        <ContentGrid>
+          <template #slot1>
+            <div>
+              <h1>Example buttons</h1>
+              <p>Currently displaying {{ buttonText }}</p>
+              <ul class="flex-group">
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="isPending"
+                    :has-pending-effect="hasPendingEffect"
+                    button-text="Submit"
+                    :theme="theme"
+                    :variant="variant"
+                  />
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="isPending"
+                    :has-pending-effect="hasPendingEffect"
+                    button-text="Submit"
+                    :theme="theme"
+                    :variant="variant"
+                  >
+                    <template #left>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="isPending"
+                    :has-pending-effect="hasPendingEffect"
+                    button-text="Submit"
+                    :theme="theme"
+                    :variant="variant"
+                  >
+                    <template #right>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="isPending"
+                    :has-pending-effect="hasPendingEffect"
+                    button-text="Submit"
+                    :theme="theme"
+                    :variant="variant"
+                    true;
+                  >
+                    <template #left>
+                      <Icon name="mdi:arrow-left" class="icon" />
+                    </template>
+                    <template #right>
+                      <Icon name="mdi:arrow-right" class="icon" />
+                    </template>
+                  </InputButtonCore>
+                </li>
+                <li>
+                  <InputButtonCore
+                    type="button"
+                    :is-pending="isPending"
+                    :has-pending-effect="hasPendingEffect"
+                    button-text="Submit"
+                    :theme="theme"
+                    :variant="variant"
+                  >
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+                </li>
+              </ul>
+            </div>
+          </template>
+        </ContentGrid>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IFieldsInitialState } from "~/types/forms/types.forms";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Homepage",
+  meta: [{ name: "description", content: "Homepage" }],
+  bodyAttrs: {
+    class: "buttons-examples-page",
+  },
+});
+
+const theme = ref<"default" | "success" | "error" | "warning">("default");
+const swapTheme = (newTheme: "default" | "success" | "error" | "warning") => {
+  theme.value = newTheme;
+};
+
+const variant = ref<"primary" | "secondary" | "tertiary">("primary");
+const swapVariant = (newVariant: "primary" | "secondary" | "tertiary") => {
+  variant.value = newVariant;
+};
+
+const hasPendingEffect = ref(false);
+const isPending = ref(false);
+
+const buttonText = computed(() => {
+  return `Theme: ${theme.value.charAt(0).toUpperCase() + theme.value.slice(1)} | Variant: ${variant.value.charAt(0).toUpperCase() + variant.value.slice(1)}`;
+});
+
+/*
+ * Setup forms
+ */
+const fieldsInitialState = ref<IFieldsInitialState>({
+  emailAddress: "",
+  username: "",
+  password: "",
+});
+
+// Setup formData
+const { formData, initFormData, getErrorCount, formIsValid } = 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">
+.buttons-examples-page {
+  .layout-row {
+    .ui-content-grid {
+      --_margin-inline: 12px;
+    }
+  }
+
+  .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;
+  }
+}
+</style>

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

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <div>
+          <h1 class="header-1">Checkbox/Radio panels</h1>
+        </div>
+        <ContentGrid>
+          <template #slot1>
+            <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>
+        </ContentGrid>
+      </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

@@ -0,0 +1,60 @@
+<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>