@m11g/library 0.0.0

package/src/components/CenterWrapper.vue

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

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

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

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

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

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

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

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

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

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

package/src/components/Forms/TextareaField.vue

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

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