@m11g/library 0.0.2 → 0.0.3

package/src/assets/css/variables/typography.css

@@ -1,17 +0,0 @@
-:root {
-  --font-size-base: clamp(16px, 2.75vw, 18px);
-  --scale-base: 1rem;
-  --scale-ratio: 1.1;
-  --font-size-h1: calc(var(--scale-base) * pow(var(--scale-ratio), 4));
-  --font-size-h2: calc(var(--scale-base) * pow(var(--scale-ratio), 3));
-  --font-size-h3: calc(var(--scale-base) * pow(var(--scale-ratio), 2));
-  --font-size-h4: calc(var(--scale-base) * pow(var(--scale-ratio), 1));
-  --font-size-sm: calc(var(--scale-base) * pow(var(--scale-ratio), -1));
-  --line-height: 1.5;
-  --line-height-heading: 1.1;
-  --font-family: "Domine", arial, helvetica, sans-serif;
-  --font-family-heading: "Sora", var(--font-family);
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 700;
-}

package/src/components/AppBreadcrumb.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { RouterLink, type RouteLocationRaw } from "vue-router";
-
-defineProps<{
-  pages: {
-    title: string;
-    to: RouteLocationRaw;
-  }[];
-}>();
-</script>
-
-<template>
-  <nav v-if="pages.length" aria-label="Breadcrumb" class="breadcrumb">
-    <ol>
-      <li v-for="(page, index) in pages" :key="page.title">
-        <router-link :aria-current="index === pages.length - 1 ? 'page' : undefined" :to="page.to">
-          {{ page.title }}
-        </router-link>
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<style lang="css" scoped>
-@scope (.breadcrumb) {
-  :scope {
-    margin-block-end: var(--spacing-4);
-  }
-
-  ol {
-    display: flex;
-    gap: var(--spacing-2);
-    padding: 0;
-    margin: 0;
-    list-style: none outside;
-  }
-
-  li {
-    display: flex;
-    gap: var(--spacing-2);
-    align-items: center;
-
-    &:not(:last-child)::after {
-      content: "/";
-    }
-  }
-
-  a {
-    &[aria-current="page"] {
-      color: var(--color-fg);
-
-      &:not(:hover) {
-        text-decoration: none;
-      }
-    }
-  }
-
-  svg {
-    inline-size: 1.25em;
-    translate: 0 -1px;
-  }
-}
-</style>

package/src/components/AppButton.vue

@@ -1,105 +0,0 @@
-<script lang="ts" setup>
-import useTheme from "@/composables/useTheme";
-import type { Theme } from "@/types/Theme";
-import { computed, resolveComponent } from "vue";
-import type { RouteLocationRaw } from "vue-router";
-
-const props = withDefaults(
-  defineProps<{
-    to?: RouteLocationRaw;
-    type?: "submit" | "button";
-    variant?: "primary" | "ghost" | "secondary";
-    theme?: Theme
-    title: string;
-    disabled?: boolean;
-  }>(),
-  {
-    theme: undefined,
-    to: undefined,
-    variant: "primary",
-    type: "button",
-    disabled: false,
-  },
-);
-
-const { colors } = useTheme(props.theme);
-
-const component = computed(() => {
-  if (props.to) {
-    return resolveComponent("RouterLink");
-  } else {
-    return "button";
-  }
-});
-
-</script>
-
-<template>
-  <component
-    :is="component"
-    :to
-    :class="variant"
-    :type="component === 'button' ? type : undefined"
-    :disabled
-  >
-    {{ title }}
-  </component>
-</template>
-
-<style lang="css" scoped>
-a,
-button {
-  --btn-border-radius: 0.5em;
-
-  &.primary {
-    --btn-background-color: v-bind(colors.solid);
-    --btn-background-color-hover: v-bind(colors.emphasized);
-    --btn-text-color: v-bind(colors.contrast);
-    --focus-ring-color: v-bind(colors.focusRing);
-  }
-
-  &.ghost {
-    --btn-background-color: transparant;
-    --btn-background-color-hover: v-bind(colors.subtle);
-    --btn-text-color: v-bind(colors.solid);
-    --btn-border-color: currentcolor;
-    --focus-ring-color: var(--btn-text-color);
-  }
-
-  display: inline-block;
-  inline-size: auto;
-  padding: var(--spacing-2) var(--spacing-8);
-  font-family: var(--font-family-heading);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-heading);
-  color: var(--btn-text-color);
-  text-align: center;
-  text-transform: uppercase;
-  text-decoration: none;
-  background-color: var(--btn-background-color);
-  border: 2px solid var(--btn-border-color);
-  border-radius: var(--btn-border-radius);
-  transition:
-    background-color var(--transition),
-    text-decoration var(--transition),
-    opacity var(--transition);
-
-  &:hover:not(:disabled) {
-    background-color: var(--btn-background-color-hover);
-  }
-
-  &:active:not(:disabled) {
-    padding-block: calc(var(--spacing-2) + 1px) calc(var(--spacing-2) - 1px);
-  }
-
-  &:focus-visible {
-    outline: var(--focus-ring-color) solid 2px;
-    outline-offset: 2px;
-  }
-}
-
-button:disabled {
-  opacity: 0.5;
-}
-</style>

package/src/components/AppCarousel.vue

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

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

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

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

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