@m11g/library 0.0.0

package/src/components/AppCarousel.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import useTheme from "@/composables/useTheme";
+import { computed } from "vue";
+
+const props = defineProps<{
+  items: string[];
+}>();
+
+const total = computed(() => {
+  return props.items.length;
+});
+
+const { colors } = useTheme()
+</script>
+
+<template>
+  <div class="wrapper">
+    <ul>
+      <li v-for="item in items" :key="item">
+        <slot :name="item" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.wrapper {
+  position: relative;
+
+  @supports (scroll-marker-group: after) {
+    margin-block-end: var(--spacing-12);
+  }
+}
+
+ul {
+  display: grid;
+  grid-template-columns: repeat(v-bind(total), 100%);
+  gap: var(--spacing-2);
+  padding-inline-start: 0;
+  margin-block-end: var(--spacing-4);
+  list-style: none;
+  scroll-snap-type: x mandatory;
+  scrollbar-color: var(--chakra-colors-gray-400) transparent;
+  scrollbar-width: thin;
+
+  @supports (scroll-marker-group: after) {
+    margin-block-end: var(--spacing-2);
+  }
+
+  &::scroll-button(*) {
+    position: absolute;
+    inset-block-start: 50%;
+    display: none;
+    inline-size: 1.5em;
+    aspect-ratio: 0.571;
+    margin-block-start: calc(var(--spacing-8) * -1);
+    cursor: pointer;
+    content: "";
+    background-color: var(--chakra-colors-gray-900);
+    border: 1px solid var(--chakra-colors-gray-300);
+    opacity: 0.7;
+    clip-path:
+      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
+      );
+    transition: opacity var(--transition);
+  }
+
+  &::scroll-button(*):hover,
+  &::scroll-button(*):focus {
+    opacity: 1;
+  }
+
+  &::scroll-button(*):active {
+    translate: 0 1px;
+  }
+
+  &::scroll-button(*):disabled {
+    opacity: 0.2;
+  }
+
+  &::scroll-button(left) {
+    inset-inline-start: 1em;
+    rotate: 180deg;
+  }
+
+  &::scroll-button(right) {
+    inset-inline-end: 1em;
+  }
+
+  &:has(> li:nth-child(2)) {
+    overflow-x: scroll;
+    scroll-behavior: smooth;
+    scroll-marker-group: after;
+
+    &::scroll-button(left),
+    &::scroll-button(right) {
+      display: block;
+    }
+  }
+
+  &::scroll-marker-group {
+    display: flex;
+    gap: var(--spacing-2);
+    place-content: center;
+  }
+}
+
+li {
+  scroll-snap-align: center;
+
+  &::scroll-marker {
+    display: block;
+    inline-size: 0.5em;
+    block-size: 0.5em;
+    aspect-ratio: 1;
+    content: "";
+    background-color: var(--color-white);
+    border: 3px solid var(--color-white);
+    border-radius: 50%;
+    transition:
+      border var(--transition),
+      background var(--transition);
+  }
+
+  &::scroll-marker:target-current,
+  &::scroll-marker:hover {
+    background-color: v-bind(colors.solid);
+  }
+
+  &::scroll-marker:target-current {
+    border-color: v-bind(colors.solid);
+  }
+}
+</style>

package/src/components/AppDialog.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { Icon } from "@iconify/vue";
+
+defineProps<{
+  id: string;
+  title: string;
+}>();
+</script>
+
+<template>
+  <dialog :id="id" closedby="any">
+    <header>
+      <h2>{{ title }}</h2>
+      <button :commandfor="id" command="close" class="btn-close">
+        <icon icon="solar:close-circle-bold" />
+      </button>
+    </header>
+    <div class="content">
+      <slot />
+    </div>
+  </dialog>
+</template>
+
+<style lang="css">
+dialog {
+  inline-size: calc(100vw - (var(--spacing-4) * 2));
+  max-inline-size: var(--container-size-md);
+  padding: 0;
+  overscroll-behavior: contain;
+  color: var(--color-fg);
+  background-color: var(--color-bg-panel);
+  border: 0;
+  border-radius: 0.25em;
+  box-shadow: var(--shadow);
+  transition:
+    display var(--transition) allow-discrete,
+    overlay var(--transition) allow-discrete;
+  animation: dialog-hide var(--transition);
+
+  &[open] {
+    animation: dialog-show var(--transition);
+
+    &::backdrop {
+      animation: backdrop-show var(--transition);
+    }
+  }
+}
+
+::backdrop {
+  overflow: hidden;
+  overscroll-behavior: contain;
+  background-color: rgb(0 0 0 / 50%);
+  backdrop-filter: blur(0.25em);
+  animation: backdrop-hide var(--transition);
+}
+
+@scope (dialog) {
+  svg {
+    font-size: 2em;
+    cursor: pointer;
+  }
+
+  header {
+    position: sticky;
+    inset-block-start: 0;
+    display: flex;
+    gap: var(--spacing-2);
+    align-items: start;
+    justify-content: space-between;
+    padding: var(--spacing-2) var(--spacing-4) 0;
+    background-color: var(--color-panel-bg);
+  }
+
+  .content {
+    padding: var(--spacing-4);
+  }
+}
+
+@keyframes dialog-hide {
+  from {
+    opacity: 1;
+    translate: 0 0;
+  }
+
+  to {
+    opacity: 0;
+    translate: 0 -1em;
+  }
+}
+
+@keyframes dialog-show {
+  from {
+    opacity: 0;
+    translate: 0 -1em;
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes backdrop-show {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+
+  to {
+    opacity: 1;
+    backdrop-filter: blur(0.25em);
+  }
+}
+
+@keyframes backdrop-hide {
+  from {
+    opacity: 1;
+    backdrop-filter: blur(0.25em);
+  }
+
+  to {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+}
+</style>

package/src/components/AppNotification.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { Icon } from "@iconify/vue";
+import { computed, ref } from "vue";
+
+const props = defineProps<{
+  title?: string;
+  variant: "error" | "info" | "success" | "warning";
+}>();
+
+const variantIcon = computed(() => {
+  switch (props.variant) {
+    case "error":
+      return "solar:danger-triangle-bold";
+    case "info":
+      return "solar:info-circle-bold";
+    case "warning":
+      return "solar:danger-circle-bold";
+    case "success":
+    default:
+      return "solar:check-circle-bold";
+  }
+});
+
+ const colors = ref({
+    bg: `var(--color-bg-${props.variant})`,
+    fg: `var(--color-fg-${props.variant})`,
+    border: `var(--color-border-${props.variant})`,
+  })
+
+</script>
+
+<template>
+  <div class="notification" :class="variant">
+    <icon :icon="variantIcon" />
+    <div>
+      <div v-if="title" class="title">
+        {{ title }}
+      </div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.notification {
+  display: flex;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2);
+  margin-block-end: var(--spacing-4);
+  color: v-bind(colors.fg);
+  background-color: v-bind(colors.bg);
+  border: 1px solid v-bind(colors.border);
+  border-inline-start-width: 0.25em;
+}
+
+.title {
+  font-weight: var(--font-weight-bold);
+}
+
+svg {
+  --size: 1.25em;
+
+  flex: 0 0 auto;
+  inline-size: var(--size);
+  block-size: var(--size);
+  margin-block-start: 0.1em;
+}
+</style>

package/src/components/AppPagination.vue

@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+defineProps<{
+  totalPages: number;
+}>();
+
+const route = useRoute();
+
+const currentPage = computed(() => (route.query.page ? Number(route.query.page) : 1));
+</script>
+
+<template>
+  <div v-if="totalPages > 1" class="paging">
+    <router-link
+      v-if="currentPage > 1"
+      :to="{
+        query: {
+          ...route.query,
+          page: currentPage - 1,
+        },
+      }"
+    >
+      Vorige pagina
+    </router-link>
+    <span v-else>Vorige pagina</span>
+    <ul>
+      <li v-for="page in totalPages" :key="page" :class="{ current: page === currentPage }">
+        <router-link
+          :to="{
+            query: {
+              ...route.query,
+              page,
+            },
+          }"
+        >
+          {{ page }}
+        </router-link>
+      </li>
+    </ul>
+    <router-link
+      v-if="currentPage < totalPages"
+      :to="{
+        query: {
+          ...route.query,
+          page: currentPage + 1,
+        },
+      }"
+    >
+      Volgende pagina
+    </router-link>
+    <span v-else>Volgende pagina</span>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.paging {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  align-items: start;
+  justify-content: space-between;
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-heading);
+}
+
+ul {
+  @mixin list-reset;
+
+  display: flex;
+  gap: var(--spacing-2);
+  align-items: center;
+  justify-content: center;
+}
+
+li {
+  display: none;
+
+  &:first-child,
+  &:last-child {
+    display: block;
+  }
+
+  &:has(+ .current),
+  &:has(+ li + .current),
+  &.current {
+    &,
+    + li,
+    + li + li {
+      display: block;
+    }
+  }
+}
+
+span,
+a {
+  display: block;
+  padding: var(--spacing-1) var(--spacing-3);
+  text-decoration: none;
+  border: 1px solid currentcolor;
+
+  &:hover {
+    color: var(--color-black);
+    background-color: var(--color-white);
+  }
+}
+
+span {
+  display: none;
+  visibility: hidden;
+
+  @media (--md) {
+    display: block;
+  }
+}
+
+a {
+  display: block;
+}
+
+.current a {
+  color: var(--color-black);
+  background-color: var(--color-white);
+}
+</style>

package/src/components/AppPopover.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { computed, useId } from "vue";
+
+const id = useId();
+
+const anchor = computed(() => {
+  return `--${id}`;
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <button :interestfor="id" :popovertarget="id" v-bind="$attrs"><slot name="anchor" /></button>
+
+  <div :id popover="hint"><slot /></div>
+</template>
+
+<style lang="css" scoped>
+button {
+  anchor-name: v-bind(anchor);
+  interest-delay: 0s var(--transition-duration);
+}
+
+[popover] {
+  position: absolute;
+  padding: var(--spacing-1) var(--spacing-2);
+  margin: var(--spacing-2);
+  position-area: top;
+  position-anchor: v-bind(anchor);
+  position-try-fallbacks: flip-block;
+  color: rgb(250 250 250);
+  zoom: 0.9;
+  background-color: rgb(17 17 17);
+  border: 1px solid rgb(39 39 42);
+  opacity: 0;
+  transition:
+    opacity var(--transition),
+    zoom var(--transition),
+    overlay allow-discrete,
+    display allow-discrete;
+
+  &:popover-open {
+    zoom: 1;
+    opacity: 1;
+  }
+}
+
+@starting-style {
+  [popover]:popover-open {
+    zoom: 0.9;
+    opacity: 0;
+  }
+}
+</style>

package/src/components/AppTabs.vue

@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import useTheme from "@/composables/useTheme";
+import { computed, ref, useId, useTemplateRef } from "vue";
+
+const props = defineProps<{
+  tabs: {
+    id: string;
+    title: string;
+  }[];
+}>();
+
+const selectedTab = ref(0);
+
+const id = useId();
+
+const anchor = computed(() => `--${id}`);
+
+const nextTab = () => {
+  if (selectedTab.value === props.tabs.length - 1) {
+    goToTab(0);
+  } else {
+    goToTab(selectedTab.value + 1);
+  }
+};
+
+const previousTab = () => {
+  if (selectedTab.value === 0) {
+    goToTab(props.tabs.length - 1);
+  } else {
+    goToTab(selectedTab.value - 1);
+  }
+};
+
+const firstTab = () => {
+  goToTab(0);
+};
+
+const lastTab = () => {
+  goToTab(props.tabs.length - 1);
+};
+
+const tabButtons = useTemplateRef("button");
+
+const goToTab = (tab: number) => {
+  if (tabButtons.value?.length && tabButtons.value[tab]) {
+    tabButtons.value[tab].focus();
+  }
+  selectedTab.value = tab;
+};
+
+const total = computed(() => {
+  return props.tabs.length;
+});
+
+const {colors} = useTheme()
+</script>
+
+<template>
+  <div class="tabs">
+    <ul role="tablist">
+      <li v-for="(tab, index) in tabs" :key="tab.id" role="presentation">
+        <button
+          :id="`tab-${tab.id}`"
+          ref="button"
+          type="button"
+          role="tab"
+          :aria-selected="selectedTab === index"
+          :aria-controls="`panel-${tab.id}`"
+          :tabindex="selectedTab === index ? undefined : '-1'"
+          @keydown.right="nextTab"
+          @keydown.left="previousTab"
+          @keydown.home="firstTab"
+          @keydown.end="lastTab"
+          @click="selectedTab = index"
+        >
+          {{ tab.title }}
+        </button>
+      </li>
+    </ul>
+    <div class="panel">
+      <div
+        v-for="(tab, index) in tabs"
+        :id="`panel-${tab.id}`"
+        :key="tab.id"
+        :aria-labelledby="`tab-${tab.id}`"
+        role="tabpanel"
+        tabindex="0"
+        :class="{
+          active: selectedTab === index,
+        }"
+      >
+        <slot :name="tab.id" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="css">
+@scope (.tabs) {
+  :scope {
+    margin-block-end: var(--spacing-4);
+    container-type: inline-size;
+    transition:
+      height var(--transition),
+      content-visibility var(--transition) allow-discrete;
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(v-bind(total), 1fr);
+    padding: 0;
+    margin: 0 0 var(--spacing-4);
+    list-style: none outside;
+    border-block-end: 1px solid v-bind(colors.subtle);
+
+    &::before {
+      position: absolute;
+      inset-block-end: anchor(bottom);
+      inset-inline-start: anchor(left);
+      display: block;
+      /* stylelint-disable-next-line declaration-property-value-no-unknown */
+      inline-size: anchor-size(inline);
+      /* stylelint-disable-next-line declaration-property-value-no-unknown */
+      block-size: anchor-size(block);
+      position-anchor: v-bind(anchor);
+      content: "";
+      background: v-bind(colors.emphasized);
+
+      /* background: v-bind(colors.muted); */
+      transition:
+        left var(--transition),
+        width var(--transition);
+    }
+  }
+
+  [role="tab"] {
+    position: relative;
+    inline-size: 100%;
+    padding: var(--spacing-3) var(--spacing-2);
+    text-align: center;
+    transition: background var(--transition);
+
+    &:hover:not([aria-selected="true"]) {
+      color: v-bind(colors.fg);
+      background-color: v-bind(colors.subtle);
+    }
+
+    &[aria-selected="true"] {
+      anchor-name: v-bind(anchor);
+      color: v-bind(colors.fg);
+    }
+  }
+
+  [role="tabpanel"] {
+    display: none;
+    opacity: 0;
+    transition:
+      opacity var(--transition),
+      overlay allow-discrete,
+      display allow-discrete;
+
+    &.active {
+      display: block;
+      opacity: 1;
+      transition-delay: 0.1s;
+    }
+  }
+
+  @starting-style {
+    [role="tabpanel"].active {
+      opacity: 0;
+    }
+  }
+}
+
+</style>