@m11g/library 0.0.0

package/src/components/SummaryDetails.vue

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

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

@@ -0,0 +1,48 @@
+import '@/assets/css/base.css'
+
+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

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

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

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

package/src/views/CarouselView.vue

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

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

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

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

package/theme-dark

@@ -0,0 +1,117 @@
+[data-bs-theme=dark] {
+  color-scheme: dark;
+  --bs-body-color: #ced4da;
+  --bs-body-color-rgb: 206, 212, 218;
+  --bs-body-bg: #16191d;
+  --bs-body-bg-rgb: 22, 25, 29;
+  --bs-surface-color: #dee2e6;
+  --bs-surface-color-rgb: 222, 226, 230;
+  --bs-surface-bg: #212529;
+  --bs-surface-bg-rgb: 33, 37, 41;
+  --bs-surface-bg-hover: #25292d;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-muted-color: #868e96;
+  --bs-primary: #62a1fe;
+  --bs-primary-rgb: 98, 161, 254;
+  --bs-primary-hover: #81b4fe;
+  --bs-primary-active: #91bdfe;
+  --bs-primary-subtle: #052c65;
+  --bs-primary-subtle-hover: #063272;
+  --bs-primary-subtle-active: #084298;
+  --bs-primary-emphasis: #92befe;
+  --bs-primary-emphasis-hover: #86b7fe;
+  --bs-text-on-primary: #000;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary: #a3a6a9;
+  --bs-secondary-rgb: 163, 166, 169;
+  --bs-secondary-hover: #b5b8ba;
+  --bs-secondary-active: #bfc1c3;
+  --bs-secondary-subtle: #2d2f31;
+  --bs-secondary-subtle-hover: #333537;
+  --bs-secondary-subtle-active: #44474a;
+  --bs-secondary-emphasis: #bfc1c4;
+  --bs-secondary-emphasis-hover: #b8bbbd;
+  --bs-text-on-secondary: #000;
+  --bs-secondary-border-subtle: #44474a;
+  --bs-tertiary: #e47aaf;
+  --bs-tertiary-rgb: 228, 122, 175;
+  --bs-tertiary-hover: #e995bf;
+  --bs-tertiary-active: #eca2c7;
+  --bs-tertiary-subtle: #561435;
+  --bs-tertiary-subtle-hover: #60173b;
+  --bs-tertiary-subtle-active: #801f4f;
+  --bs-tertiary-emphasis: #eda3c8;
+  --bs-tertiary-emphasis-hover: #eb99c2;
+  --bs-text-on-tertiary: #000;
+  --bs-tertiary-border-subtle: #801f4f;
+  --bs-success: #6ab190;
+  --bs-success-rgb: 106, 177, 144;
+  --bs-success-hover: #88c1a6;
+  --bs-success-active: #97c8b1;
+  --bs-success-subtle: #0a3622;
+  --bs-success-subtle-hover: #0b3d26;
+  --bs-success-subtle-active: #0f5132;
+  --bs-success-emphasis: #98c9b2;
+  --bs-success-emphasis-hover: #8cc3aa;
+  --bs-text-on-success: #000;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info: #62ddf5;
+  --bs-info-rgb: 98, 221, 245;
+  --bs-info-hover: #81e4f7;
+  --bs-info-active: #91e7f8;
+  --bs-info-subtle: #055160;
+  --bs-info-subtle-hover: #065b6c;
+  --bs-info-subtle-active: #087990;
+  --bs-info-emphasis: #92e7f8;
+  --bs-info-emphasis-hover: #86e5f8;
+  --bs-text-on-info: #000;
+  --bs-info-border-subtle: #087990;
+  --bs-warning: #ffd75e;
+  --bs-warning-rgb: 255, 215, 94;
+  --bs-warning-hover: #ffdf7e;
+  --bs-warning-active: #ffe38e;
+  --bs-warning-subtle: #664d03;
+  --bs-warning-subtle-hover: #735703;
+  --bs-warning-subtle-active: #997404;
+  --bs-warning-emphasis: #ffe38f;
+  --bs-warning-emphasis-hover: #ffe083;
+  --bs-text-on-warning: #000;
+  --bs-warning-border-subtle: #997404;
+  --bs-danger: #e87c86;
+  --bs-danger-rgb: 232, 124, 134;
+  --bs-danger-hover: #ed969e;
+  --bs-danger-active: #efa3aa;
+  --bs-danger-subtle: #58151c;
+  --bs-danger-subtle-hover: #63181f;
+  --bs-danger-subtle-active: #842029;
+  --bs-danger-emphasis: #efa4ab;
+  --bs-danger-emphasis-hover: #ee9aa2;
+  --bs-text-on-danger: #000;
+  --bs-danger-border-subtle: #842029;
+  --bs-light: #fafbfc;
+  --bs-light-rgb: 250, 251, 252;
+  --bs-light-hover: #fbfcfd;
+  --bs-light-active: #fcfcfd;
+  --bs-light-subtle: #636464;
+  --bs-light-subtle-hover: #707071;
+  --bs-light-subtle-active: #959596;
+  --bs-light-emphasis: #fcfcfd;
+  --bs-light-emphasis-hover: #fcfcfd;
+  --bs-text-on-light: #000;
+  --bs-light-border-subtle: #959596;
+  --bs-dark: #6f7174;
+  --bs-dark-rgb: 111, 113, 116;
+  --bs-dark-hover: #595a5d;
+  --bs-dark-active: #4e4f51;
+  --bs-dark-subtle: #0d0f10;
+  --bs-dark-subtle-hover: #0f1112;
+  --bs-dark-subtle-active: #141619;
+  --bs-dark-emphasis: #9b9d9f;
+  --bs-dark-emphasis-hover: #909294;
+  --bs-text-on-dark: #fff;
+  --bs-dark-border-subtle: #141619;
+  --bs-heading-color: #fff;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+}