@m11g/library 0.0.2 → 0.0.3

package/src/components/Forms/TextareaField.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { useField } from "vee-validate";
-import { toRefs, useId } from "vue";
-import FormField from "./FormField.vue";
-
-const props = defineProps<{
-  title: string;
-  name: string;
-  placeholder?: string;
-}>();
-
-const id = useId();
-const { name } = toRefs(props);
-
-// we don't provide any rules here because we are using form-level validation
-// https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
-const { value, handleBlur, handleChange, errorMessage } = useField<string>(name, undefined, {
-  validateOnValueUpdate: false,
-});
-
-const validationListeners = {
-  blur: (event: InputEvent) => handleBlur(event, true),
-  change: handleChange,
-  input: (event: InputEvent) => handleChange(event, !!errorMessage.value),
-};
-</script>
-
-<template>
-  <form-field :id :title :name :error-message>
-    <textarea :id :value :name :placeholder v-on="validationListeners" />
-  </form-field>
-</template>

package/src/components/ScrollSpy.vue

@@ -1,111 +0,0 @@
-<script lang="ts" setup>
-import useTheme from "@/composables/useTheme";
-import { computed, useId } from "vue";
-
-defineProps<{
-  pages: {
-    id: string;
-    title: string;
-  }[];
-}>();
-
-const id = useId();
-
-const anchor = computed(() => {
-  return `--${id}`;
-});
-
-const { colors} = useTheme()
-</script>
-
-<template>
-  <div class="content">
-    <div>
-      <section v-for="page in pages" :key="page.title">
-        <span :id="page.id" />
-        <h2>{{ page.title }}</h2>
-        <slot :name="page.id" />
-      </section>
-    </div>
-    <nav>
-      <ol>
-        <li v-for="item in pages" :id="`link-${item.title}`" :key="item.title">
-          <a :href="`#${item.id}`">
-            {{ item.title }}
-          </a>
-        </li>
-      </ol>
-    </nav>
-  </div>
-</template>
-
-<style lang="css" scoped>
-.content {
-  position: relative;
-  display: grid;
-  gap: var(--gutter);
-  align-items: start;
-
-  @media (--md) {
-    grid-template-columns: auto 12rem;
-  }
-}
-
-span {
-  display: block;
-  translate: 0 calc(var(--spacing-4) * -1);
-}
-
-nav {
-  position: sticky;
-  inset-block-start: var(--spacing-4);
-  display: none;
-  order: -1;
-  background: var(--color-bg-panel);
-  scroll-target-group: auto;
-
-  @media (--md) {
-    display: block;
-    order: 1;
-  }
-}
-
-ol {
-  padding: 0;
-  margin: 0;
-  list-style: none outside;
-
-  &::before {
-    position: absolute;
-    inset-block-start: anchor(top);
-    inset-inline-start: 0;
-    display: block;
-    inline-size: 0.25em;
-    /* stylelint-disable-next-line declaration-property-value-no-unknown */
-    block-size: anchor-size(block);
-    position-anchor: v-bind(anchor);
-    content: "";
-    background: v-bind(colors.solid);
-    transition:
-      top var(--transition),
-      height var(--transition);
-  }
-}
-
-a {
-  display: block;
-  padding-block: var(--spacing-1);
-  padding-inline-start: var(--spacing-3);
-  text-decoration: none;
-  border-inline-start: 0.25em solid v-bind(colors.subtle);
-
-  &:target-current {
-    anchor-name: v-bind(anchor);
-    color: v-bind(colors.solid);
-  }
-
-  &:hover {
-    border-color: v-bind(colors.solid);
-  }
-}
-</style>

package/src/components/SummaryDetails.vue

@@ -1,83 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  title: string;
-  /**
-   * The **`open`** property of the HTMLDetailsElement interface is a boolean value reflecting the open HTML attribute, indicating whether the <details>'s contents (not counting the <summary>) is to be shown to the user.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/open)
-   */
-  open?: boolean;
-  /**
-   * The **`name`** property of the HTMLDetailsElement interface reflects the name attribute of <details> elements. It enables multiple <details> elements to be connected together, where only one for the <details> elements can be open at once. This allows developers to easily create UI features such as accordions without scripting.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/name)
-   */
-  name?: string;
-}>();
-</script>
-
-<template>
-  <details :open :name>
-    <summary>{{ title }}</summary>
-    <slot />
-  </details>
-</template>
-
-<style lang="css">
-details {
-  cursor: pointer;
-  border-block-end: 2px solid var(--color-black);
-
-  &:first-of-type {
-    border-block-start: 2px solid var(--color-black);
-  }
-
-  &::details-content {
-    block-size: 0;
-    overflow: clip;
-    border-block-start: 1px solid var(--color-black);
-    opacity: 0;
-    transition:
-      padding var(--transition),
-      opacity var(--transition),
-      height var(--transition),
-      content-visibility var(--transition) allow-discrete;
-  }
-
-  &[open]::details-content {
-    block-size: max-content;
-    padding-block: var(--spacing-2) var(--spacing-4);
-    opacity: 1;
-  }
-
-  ::marker {
-    inline-size: 2em;
-    block-size: 1em;
-    aspect-ratio: 1;
-    content: "";
-    background-color: var(--color-black);
-
-    /* border-shape:
-    shape(
-      from 96.34% 44.96%,
-      curve by 0% 10.11% with 4.88% 2.79% / 4.88% 7.32%,
-      line by -74.99% 42.84%,
-      curve by -17.69% 0% with -4.88% 2.79% / -12.81% 2.79%,
-      smooth by 0% -10.11% with -4.88% -7.32%,
-      line to 69.82% 50%,
-      line to 3.7% 12.2%,
-      curve by 0% -10.11% with -4.88% -2.79%/-4.88% -7.32%,
-      smooth by 17.69% 0% with 12.81% -2.79%,
-      line by 74.99% 42.84%,
-      close
-    ); */
-  }
-}
-
-summary {
-  padding-block: var(--spacing-2);
-
-  /* display: flex; */
-}
-
-</style>

package/src/composables/useTheme.ts

@@ -1,20 +0,0 @@
-import type { Theme } from '@/types/Theme';
-import { ref } from 'vue';
-
-export default (theme: Theme = 'primary') => {
-
-  const colors = ref({
-    emphasized: `var(--color-${theme}-emphasized)`,
-    contrast: `var(--color-${theme}-contrast)`,
-    fg: `var(--color-${theme}-fg)`,
-    subtle: `var(--color-${theme}-subtle)`,
-    muted: `var(--color-${theme}-muted)`,
-    solid: `var(--color-${theme}-solid)`,
-    focusRing: `var(--color-${theme}-focus-ring)`,
-    border: `var(--color-${theme}-border)`,
-  })
-
-  return {
-    colors
-  }
-}

package/src/index.ts

@@ -1,47 +0,0 @@
-
-import AppButton from '@/components/AppButton.vue'
-import AppNotification from '@/components/AppNotification.vue'
-import AppTabs from '@/components/AppTabs.vue'
-import AppCarousel from '@/components/AppCarousel.vue'
-// import AppPagination from '@/components/AppPagination.vue'
-import CenterWrapper from '@/components/CenterWrapper.vue'
-import ScrollSpy from '@/components/ScrollSpy.vue'
-import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
-import AppDialog from '@/components/AppDialog.vue'
-import AppPopover from '@/components/AppPopover.vue'
-import ClickableWrapper from '@/components/ClickableWrapper.vue'
-import SummaryDetails from '@/components/SummaryDetails.vue'
-import AppForm from '@/components/Forms/AppForm.vue';
-import FormField from '@/components/Forms/FormField.vue';
-import RadioGroup from '@/components/Forms/RadioGroup.vue';
-import SelectField from '@/components/Forms/SelectField.vue';
-import TextareaField from '@/components/Forms/TextareaField.vue';
-import FormErrorMessage from '@/components/Forms/FormErrorMessage.vue';
-import FormFieldset from '@/components/Forms/FormFieldset.vue';
-import SearchField from '@/components/Forms/SearchField.vue';
-import TextField from '@/components/Forms/TextField.vue';
-
-export {
-  AppButton,
-  AppNotification,
-  AppTabs,
-  AppCarousel,
-  // AppPagination,
-  CenterWrapper,
-  ScrollSpy,
-  AppBreadcrumb,
-  AppDialog,
-  AppPopover,
-  ClickableWrapper,
-  SummaryDetails,
-
-  AppForm,
-  FormField,
-  RadioGroup,
-  SelectField,
-  TextareaField,
-  FormErrorMessage,
-  FormFieldset,
-  SearchField,
-  TextField,
-}

package/src/main.ts

@@ -1,10 +0,0 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import "./assets/css/base.css";
-
-const app = createApp(App);
-
-app.use(router);
-
-app.mount("#app");

package/src/router/index.ts

@@ -1,26 +0,0 @@
-import HomeView from "@/views/HomeView.vue";
-import { createRouter, createWebHistory } from "vue-router";
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: "/",
-      component: HomeView,
-    },
-    {
-      path: "/scroll-spy",
-      component: () => import("@/views/ScrollSpyView.vue"),
-    },
-    {
-      path: "/form",
-      component: () => import("@/views/FormView.vue"),
-    },
-    {
-      path: "/carousel",
-      component: () => import("@/views/CarouselView.vue"),
-    },
-  ],
-});
-
-export default router;

package/src/types/Theme.ts

@@ -1,11 +0,0 @@
-export type Theme = 'primary' |
-      'gray' |
-      'red' |
-      'orange' |
-      'green' |
-      'blue' |
-      'yellow' |
-      'teal' |
-      'purple' |
-      'pink' |
-      'cyan'

package/src/views/CarouselView.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import AppCarousel from "@/components/AppCarousel.vue";
-import CenterWrapper from "@/components/CenterWrapper.vue";
-
-const entries = [
-  "https://images.pexels.com/photos/8081419/pexels-photo-8081419.jpeg",
-  "https://images.pexels.com/photos/20066093/pexels-photo-20066093.jpeg",
-  "https://images.pexels.com/photos/799706/pexels-photo-799706.jpeg",
-];
-</script>
-
-<template>
-  <center-wrapper>
-    <app-carousel :items="entries">
-      <template v-for="image in entries" #[image] :key="image">
-        <img :src="image" />
-      </template>
-    </app-carousel>
-  </center-wrapper>
-</template>
-
-<style lang="css" scoped>
-img {
-  display: block;
-  margin: 0;
-}
-</style>

package/src/views/FormView.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import CenterWrapper from "@/components/CenterWrapper.vue";
-import AppForm from "@/components/Forms/AppForm.vue";
-import FormFieldset from "@/components/Forms/FormFieldset.vue";
-import SelectField from "@/components/Forms/SelectField.vue";
-import TextareaField from "@/components/Forms/TextareaField.vue";
-import TextField from "@/components/Forms/TextField.vue";
-import { z } from "zod";
-import { toTypedSchema } from "@vee-validate/zod";
-import { useForm } from "vee-validate";
-import { ref, type Ref } from "vue";
-import RadioGroup from "@/components/Forms/RadioGroup.vue";
-
-const { handleSubmit, errors, values } = useForm({
-  name: "form",
-  validationSchema: toTypedSchema(
-    z.object({
-      name: z.string().min(1, "Het veld naam is verplicht"),
-      comment: z.string(),
-      email: z.email({
-        error: "Het veld email is niet correct",
-      }),
-      select: z.enum(["option 1", "option 2", "option 3", ""]).refine((val) => val !== "", {
-        error: "Het veld select is verplicht",
-      }),
-      radio: z.enum(["option 1", "option 2", "option 3", ""]).refine((val) => val !== "", {
-        error: "Het veld radio is verplicht",
-      }),
-    }),
-  ),
-  initialValues: {
-    name: "",
-    comment: "",
-    select: "",
-    email: "",
-    radio: "option 2",
-  },
-});
-
-const status: Ref<"idle" | "pending" | "success" | "error"> = ref("idle");
-
-const submit = handleSubmit(() => {
-  status.value = "pending";
-  setTimeout(() => {
-    status.value = "success";
-  }, 2000);
-});
-</script>
-
-<template>
-  <center-wrapper>
-    <app-form
-      :errors
-      button-title="Reactie plaatsen"
-      success-text="success"
-      :status
-      @submit-form="submit"
-    >
-      <form-fieldset title="Adres" :columns="3">
-        <text-field name="name" title="Name" autocomplete="name" />
-        <text-field name="email" title="Email" type="email" autocomplete="email" />
-        <select-field
-          :options="[
-            {
-              title: 'Option 1',
-              value: 'option 1',
-            },
-            {
-              title: 'Option 2',
-              value: 'option 2',
-            },
-            {
-              title: 'Option 3',
-              value: 'option 3',
-            },
-          ]"
-          name="select"
-          title="Opties"
-        />
-        <textarea-field name="comment" title="Reactie" class="comment" />
-      </form-fieldset>
-      <radio-group
-        class="options"
-        :options="[
-          {
-            title: 'Option 1',
-            value: 'option 1',
-          },
-          {
-            title: 'Option 2',
-            value: 'option 2',
-          },
-          {
-            title: 'Option 3',
-            value: 'option 3',
-          },
-        ]"
-        name="radio"
-        title="Radio opties"
-      />
-    </app-form>
-    <pre>{{ values }}</pre>
-  </center-wrapper>
-</template>
-
-<style lang="css" scoped>
-.options,
-.comment {
-  grid-column: span 3;
-}
-</style>

package/src/views/HomeView.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import SummaryDetails from "@/components/SummaryDetails.vue";
-import CenterWrapper from "@/components/CenterWrapper.vue";
-import AppNotification from "@/components/AppNotification.vue";
-import AppTabs from "@/components/AppTabs.vue";
-import AppDialog from "@/components/AppDialog.vue";
-import AppBreadcrumb from "@/components/AppBreadcrumb.vue";
-import AppPopover from "@/components/AppPopover.vue";
-import { Icon } from "@iconify/vue";
-import AppButton from "@/components/AppButton.vue";
-</script>
-
-<template>
-  <center-wrapper>
-    <app-popover>
-      <template #anchor><icon icon="solar:info-circle-bold" /></template>
-      Greetings, one and all!
-    </app-popover>
-    <app-breadcrumb
-      :pages="[
-        {
-          title: 'home',
-          to: '/',
-        },
-
-        {
-          title: 'about',
-          to: '/',
-        },
-      ]"
-    />
-    <app-dialog id="dialog" title="test">
-      <p>
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic eos, libero iste asperiores
-        quisquam inventore? Hic quaerat id recusandae, esse cumque omnis officia, debitis amet
-        obcaecati suscipit exercitationem nisi? Possimus!
-      </p>
-    </app-dialog>
-    <button commandfor="dialog" command="show-modal">Open Dialog</button>
-    <summary-details title="Hic eos, libero iste asperiores" style="margin-bottom: 1em;">
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic eos, libero iste asperiores
-      quisquam inventore? Hic quaerat id recusandae, esse cumque omnis officia, debitis amet
-      obcaecati suscipit exercitationem nisi? Possimus!
-    </summary-details>
-
-    <app-notification variant="error">error</app-notification>
-    <app-notification variant="success">success</app-notification>
-    <app-notification variant="warning">warning</app-notification>
-    <app-notification variant="info">info</app-notification>
-
-    <app-tabs
-      :tabs="[
-        {
-          id: 'apple',
-          title: 'Apple',
-        },
-        {
-          id: 'apricot',
-          title: 'Apricot',
-        },
-        {
-          id: 'advocado',
-          title: 'Avocado',
-        },
-      ]"
-    >
-      <template #advocado>
-        <p>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam voluptatum vitae fugiat
-          dolor amet rem ab tempore aspernatur, dolore nostrum laboriosam ratione sequi quidem autem
-          libero. Molestias placeat omnis explicabo. Lorem ipsum dolor sit amet consectetur
-          adipisicing elit. Asperiores veniam sint quidem, ut corporis fuga impedit, obcaecati
-          neque, dolor earum unde maiores nesciunt atque. Atque adipisci nemo temporibus optio est!
-        </p>
-      </template>
-      <template #apple>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, accusantium ullam quo
-          dolores id voluptatem dignissimos, quas rem, dolore excepturi eius? Voluptatem libero quis
-          sit! Beatae libero adipisci eius praesentium. Lorem ipsum dolor sit, amet consectetur
-          adipisicing elit. Vel facilis tempore cum modi quam dolorum eaque expedita, doloremque
-          delectus? Odio sint iste nam nobis laboriosam illo blanditiis voluptatibus alias autem?
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla delectus autem, esse
-          asperiores consectetur illum? Perferendis numquam, dicta cupiditate dolorem, rem aliquid
-          culpa perspiciatis alias quam laborum hic. Exercitationem, placeat.
-        </p>
-      </template>
-      <template #apricot>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, eum sequi assumenda
-          laudantium excepturi earum enim repudiandae, esse nobis temporibus numquam ut commodi.
-          Recusandae perferendis temporibus dicta deleniti blanditiis aliquid?
-        </p>
-      </template>
-    </app-tabs>
-
-    <app-button title="Button" />
-    <app-button title="Button" variant="ghost" />
-  </center-wrapper>
-</template>

package/src/views/ScrollSpyView.vue

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import CenterWrapper from "@/components/CenterWrapper.vue";
-import ScrollSpy from "@/components/ScrollSpy.vue";
-
-const pages = [
-  {
-    id: "section-1",
-    title: "Section 1",
-  },
-
-  {
-    id: "section-2",
-    title: "Section 2",
-  },
-  {
-    id: "section-3",
-    title: "Section 3",
-  },
-  {
-    id: "section-4",
-    title: "Section 4",
-  },
-  {
-    id: "section-5",
-    title: "Section 5",
-  },
-];
-</script>
-
-<template>
-  <center-wrapper>
-    <scroll-spy :pages>
-      <template v-for="page in pages" #[page.id] :key="page.id">
-        <p>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam voluptatum vitae fugiat
-          dolor amet rem ab tempore aspernatur, dolore nostrum laboriosam ratione sequi quidem autem
-          libero. Molestias placeat omnis explicabo. Lorem ipsum dolor sit amet consectetur
-          adipisicing elit. Asperiores veniam sint quidem, ut corporis fuga impedit, obcaecati
-          neque, dolor earum unde maiores nesciunt atque. Atque adipisci nemo temporibus optio est!
-        </p>
-        <p>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam voluptatum vitae fugiat
-          dolor amet rem ab tempore aspernatur, dolore nostrum laboriosam ratione sequi quidem autem
-          libero. Molestias placeat omnis explicabo. Lorem ipsum dolor sit amet consectetur
-          adipisicing elit. Asperiores veniam sint quidem, ut corporis fuga impedit, obcaecati
-          neque, dolor earum unde maiores nesciunt atque. Atque adipisci nemo temporibus optio est!
-        </p>
-        <p>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam voluptatum vitae fugiat
-          dolor amet rem ab tempore aspernatur, dolore nostrum laboriosam ratione sequi quidem autem
-          libero. Molestias placeat omnis explicabo. Lorem ipsum dolor sit amet consectetur
-          adipisicing elit. Asperiores veniam sint quidem, ut corporis fuga impedit, obcaecati
-          neque, dolor earum unde maiores nesciunt atque. Atque adipisci nemo temporibus optio est!
-        </p>
-      </template>
-    </scroll-spy>
-  </center-wrapper>
-</template>