srcdev-nuxt-components 9.3.6 → 9.3.8

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

@@ -1,259 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="content" :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 />
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <LayoutGridByCols>
-            <template #item-0>
-              <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>
-          </LayoutGridByCols>
-
-          <LayoutGridByCols>
-            <template #item-0>
-              <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>
-          </LayoutGridByCols>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-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)}`;
-});
-</script>
-
-<style lang="css">
-.buttons-examples-page {
-  .page-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

@@ -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>