@m11g/library 0.0.2 → 0.0.3

package/src/components/AppTabs.vue

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

package/src/components/CenterWrapper.vue

@@ -1,50 +0,0 @@
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    size?: "full" | "md" | "lg" | "sm";
-    top?: boolean;
-  }>(),
-  {
-    top: false,
-    size: "lg",
-  },
-);
-</script>
-
-<template>
-  <div class="notch" :class="{ top }">
-    <div class="wrapper" :class="`wrapper-${size}`">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="css" scoped>
-.notch {
-  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
-
-  &.top {
-    padding-block-start: env(safe-area-inset-top);
-  }
-}
-
-.wrapper-sm {
-  --wrapper-size: var(--container-size-sm);
-}
-
-.wrapper-md {
-  --wrapper-size: var(--container-size-md);
-}
-
-.wrapper-lg {
-  --wrapper-size: var(--container-size-lg);
-}
-
-.wrapper {
-  /* stylelint-disable-next-line length-zero-no-unit */
-  --zero: 0px;
-
-  padding-inline: var(--gutter);
-  margin-inline: max(var(--zero), ((100% - var(--wrapper-size)) / 2));
-}
-</style>

package/src/components/ClickableWrapper.vue

@@ -1,48 +0,0 @@
-<script lang="ts" setup>
-import { ref, type Ref } from "vue";
-import { useRouter, type RouteLocationRaw } from "vue-router";
-
-const props = withDefaults(
-  defineProps<{
-    to: RouteLocationRaw;
-    tag?: "div" | "li";
-  }>(),
-  {
-    tag: "li",
-  },
-);
-
-const down: Ref<number | null> = ref(null);
-
-const router = useRouter();
-
-const mouseDown = (event: MouseEvent) => {
-  const target = event.target as Element;
-  if (target.nodeName.toUpperCase() === "A" || target.parentNode?.nodeName.toUpperCase() === "A") {
-    down.value = null;
-  } else {
-    down.value = +new Date();
-  }
-};
-const mouseUp = async () => {
-  if (!down.value) {
-    return;
-  }
-  const up = +new Date();
-  if (up - down.value < 200) {
-    await router.push(props.to);
-  }
-};
-</script>
-
-<template>
-  <component :is="tag" class="item" @mousedown.left="mouseDown" @mouseup.left="mouseUp">
-    <slot />
-  </component>
-</template>
-
-<style lang="css" scoped>
-.item {
-  cursor: pointer;
-}
-</style>

package/src/components/Forms/AppForm.vue

@@ -1,61 +0,0 @@
-<script lang="ts" setup>
-import type { FormErrors } from "vee-validate";
-import AppButton from "@/components/AppButton.vue";
-import AppNotification from "@/components/AppNotification.vue";
-import { computed, ref } from "vue";
-
-const props = defineProps<{
-  buttonTitle: string;
-  successText: string;
-  status: "idle" | "pending" | "success" | "error";
-  errors: FormErrors<Record<string, string>>;
-}>();
-
-const emit = defineEmits<{
-  (event: "submit-form"): void;
-}>();
-
-const errorList = computed(() => {
-  return Object.values(props.errors);
-});
-
-const touched = ref(false);
-
-const submit = () => {
-  touched.value = true;
-  emit("submit-form");
-};
-</script>
-
-<template>
-  <app-notification v-if="status === 'success'" :title="successText" variant="success" />
-  <form v-else method="post" novalidate @submit.prevent="submit">
-    <slot />
-    <div aria-live="assertive">
-      <app-notification
-        v-if="errorList.length && touched"
-        variant="warning"
-        title="Het formulier is niet correct ingevuld"
-      >
-        <ul>
-          <li v-for="error in errors" :key="error">
-            {{ error }}
-          </li>
-        </ul>
-      </app-notification>
-    </div>
-    <app-button :title="buttonTitle" type="submit" :disabled="status === 'pending'" />
-  </form>
-</template>
-
-<style lang="css" scoped>
-ul {
-  padding-inline-start: 0;
-  margin: 0;
-  list-style: none outside;
-}
-
-[aria-live="assertive"]:not(:empty) {
-  margin-block-start: var(--spacing-4);
-}
-</style>

package/src/components/Forms/FormErrorMessage.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  errorMessage?: string;
-}>();
-</script>
-
-<template>
-  <div aria-live="assertive">
-    {{ errorMessage }}
-  </div>
-</template>
-
-<style lang="css" scoped>
-span {
-  display: block;
-}
-</style>

package/src/components/Forms/FormField.vue

@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import FormErrorMessage from "./FormErrorMessage.vue";
-
-defineProps<{
-  id: string;
-  title: string;
-  errorMessage?: string;
-}>();
-</script>
-
-<template>
-  <div>
-    <label :for="id" class="label">
-      {{ title }}
-    </label>
-    <slot />
-    <form-error-message :error-message="errorMessage" class="error-message" />
-  </div>
-</template>
-
-<style lang="css" scoped>
-label {
-  margin-block-end: var(--spacing-xxs);
-  font-weight: var(--font-weight-bold);
-}
-
-.error-message {
-  margin-block-start: var(--spacing-xxs);
-}
-</style>

package/src/components/Forms/FormFieldset.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    title: string;
-    columns?: number;
-  }>(),
-  {
-    columns: 1,
-  },
-);
-</script>
-
-<template>
-  <fieldset>
-    <legend>
-      {{ title }}
-    </legend>
-    <slot />
-  </fieldset>
-</template>
-
-<style lang="css" scoped>
-fieldset {
-  display: grid;
-  grid-template-columns: repeat(v-bind(columns), 1fr);
-  gap: var(--gutter);
-}
-</style>

package/src/components/Forms/RadioGroup.vue

@@ -1,85 +0,0 @@
-<script lang="ts" setup>
-import { useField } from "vee-validate";
-import { toRefs, useId } from "vue";
-import FormErrorMessage from "./FormErrorMessage.vue";
-import useTheme from "@/composables/useTheme.ts";
-
-const props = defineProps<{
-  // type: 'directors' | 'authors'
-  name: string;
-  title: string;
-  options: {
-    value: string | number;
-    title: 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, handleChange, errorMessage } = useField<string>(name);
-
-const validationListeners = {
-  change: handleChange,
-};
-
-const { colors } = useTheme()
-
-</script>
-
-<template>
-  <fieldset>
-    <legend>{{ title }}</legend>
-    <div class="fields">
-      <div v-for="(option, index) in options" :key="option.value" class="field">
-        <input
-          :id="`${id}-${index}`"
-          type="radio"
-          :checked="value === option.value"
-          :name
-          :value="option.value"
-          v-on="validationListeners"
-        />
-        <label :for="`${id}-${index}`">
-          {{ option.title }}
-        </label>
-      </div>
-    </div>
-    <form-error-message :error-message="errorMessage" />
-  </fieldset>
-</template>
-
-<style lang="css" scoped>
-.field {
-  display: flex;
-  gap: var(--spacing-2);
-  align-items: start;
-
-  &:not(:last-child) {
-    margin-block-end: var(--spacing-1);
-  }
-}
-
-input {
-  flex: 0 0 auto;
-  inline-size: 1.25em;
-  aspect-ratio: 1;
-  padding: 0;
-  margin: 0;
-  margin-block-start: 0.1em;
-  appearance: none;
-  background: var(--color-panel-bg);
-  border: 3px solid var(--color-white);
-  border-radius: 50%;
-  transition:
-    border var(--transition),
-    background var(--transition);
-
-  &:checked {
-    background-color: v-bind(colors.solid);
-  }
-}
-</style>

package/src/components/Forms/SearchField.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { Icon } from "@iconify/vue";
-
-defineProps<{
-  placeholder?: string;
-}>();
-
-const model = defineModel<string>({
-  required: true,
-});
-</script>
-
-<template>
-  <div class="field">
-    <input v-model="model" :placeholder name="search" type="search" />
-    <icon icon="solar:minimalistic-magnifer-outline" />
-  </div>
-</template>
-
-<style lang="css" scoped>
-.field {
-  position: relative;
-}
-
-input {
-  padding-inline-end: 3rem;
-}
-
-svg {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-end: var(--spacing-4);
-  inline-size: 1.5rem;
-  block-size: auto;
-  aspect-ratio: 1;
-  translate: 0 -0.75rem;
-}
-</style>

package/src/components/Forms/SelectField.vue

@@ -1,125 +0,0 @@
-<script lang="ts" setup>
-import { useField } from "vee-validate";
-import { toRefs, useId } from "vue";
-import FormField from "./FormField.vue";
-import { Icon } from "@iconify/vue";
-import useTheme from "@/composables/useTheme.ts";
-
-const props = defineProps<{
-  // type: 'directors' | 'authors'
-  name: string;
-  title: string;
-  options: {
-    value: string | number;
-    title: 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, handleChange, errorMessage } = useField<string>(name, undefined, {
-  validateOnValueUpdate: false,
-});
-
-const validationListeners = {
-  change: handleChange,
-};
-
-const { colors } = useTheme()
-</script>
-
-<template>
-  <form-field :id :title :error-message>
-    <select :id :value :name v-on="validationListeners">
-      <button>
-        <selectedcontent />
-        <icon icon="solar:alt-arrow-down-outline" class="icon" />
-      </button>
-      <option v-for="option in options" :key="option.value" :value="option.value">
-        {{ option.title }}
-      </option>
-    </select>
-  </form-field>
-</template>
-
-<style lang="css" scoped>
-.icon {
-  transition: rotate var(--transition);
-}
-
-select {
-  appearance: base-select;
-  cursor: pointer;
-
-  &:open {
-    .icon {
-      rotate: -180deg;
-    }
-  }
-}
-
-button {
-  display: flex;
-  gap: var(--spacing-2);
-  align-items: center;
-  justify-content: space-between;
-  inline-size: 100%;
-}
-
-::checkmark {
-  display: none;
-}
-
-::picker-icon {
-  display: none;
-}
-
-::picker(select) {
-  margin-block-start: var(--spacing-1);
-  appearance: base-select;
-  border: 2px solid var(--color-white);
-  opacity: 0;
-  translate: 0 calc(-1 * var(--spacing-4));
-  transition:
-    translate var(--transition),
-    opacity var(--transition),
-    overlay var(--transition) allow-discrete,
-    display var(--transition) allow-discrete;
-}
-
-:open::picker(select) {
-  opacity: 1;
-  translate: 0 0;
-}
-
-@starting-style {
-  :open::picker(select) {
-    opacity: 0;
-    translate: 0 calc(-1 * var(--spacing-4));
-  }
-}
-
-option {
-  display: flex;
-  gap: var(--spacing-2);
-  padding: var(--spacing-2);
-  color: var(--color-fg);
-  background-color: var(--color-body-background);
-  border-inline-start: 3px solid transparent;
-
-  &:hover {
-    color: v-bind(colors.fg);
-    background-color: var(--color-primary-hover);
-  }
-
-  &:checked {
-    font-weight: var(--font-weight-bold);
-    color: v-bind(colors.fg);
-    background-color: var(--color-primary);
-  }
-}
-</style>

package/src/components/Forms/TextField.vue

@@ -1,41 +0,0 @@
-<script lang="ts" setup>
-import { useField } from "vee-validate";
-import { toRefs, useId, type InputTypeHTMLAttribute } from "vue";
-import FormField from "./FormField.vue";
-
-const props = withDefaults(
-  defineProps<{
-    type?: InputTypeHTMLAttribute;
-    autocomplete?: AutoFillField;
-    title: string;
-    name: string;
-    placeholder?: string;
-  }>(),
-  {
-    autocomplete: undefined,
-    type: "text",
-    placeholder: undefined,
-  },
-);
-
-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 :error-message>
-    <input :id :name :type :autocomplete :value :placeholder v-on="validationListeners" />
-  </form-field>
-</template>