@karibsen/eponyme 0.1.0

package/dist/runtime/components/fields/ArrayField.vue

@@ -0,0 +1,198 @@
+<script setup>
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { computed, nextTick, ref } from "vue";
+import FieldRenderer from "./FieldRenderer.vue";
+import { getArrayItemDefaultValue, isArrayItemFieldDefinition } from "../../utils/get-field-default-value";
+import { isFieldVisible } from "../../utils/is-field-visible";
+import { asRecord } from "../../utils/as-record";
+import { errorsAt, fieldPathId, joinFieldPath } from "../../utils/field-path";
+import EPButton from "../ui/EPButton.vue";
+const props = defineProps({
+  fieldName: { type: String, required: true },
+  definition: { type: Object, required: true },
+  modelValue: { type: null, required: true },
+  path: { type: String, required: false },
+  errors: { type: Object, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const items = computed(() => Array.isArray(props.modelValue) ? props.modelValue : []);
+const isSimple = computed(() => isArrayItemFieldDefinition(props.definition.options.of));
+const objectFields = computed(() => isSimple.value ? [] : Object.entries(props.definition.options.of));
+const basePath = computed(() => props.path || props.fieldName);
+const sortableRoot = ref(null);
+const sortableItems = computed({
+  get: () => items.value,
+  set: (value) => {
+    if (!props.disabled) emit("update:modelValue", value);
+  }
+});
+useSortable(sortableRoot, sortableItems, {
+  animation: 180,
+  disabled: props.disabled,
+  draggable: ".eponyme-sortable-item",
+  handle: ".eponyme-drag-handle",
+  ghostClass: "eponyme-sortable-ghost",
+  chosenClass: "eponyme-sortable-chosen"
+});
+function itemLabel(index) {
+  return (props.definition.options.itemLabel || "Item $i").replaceAll("$i", String(index + 1));
+}
+function itemPath(index, fieldName) {
+  const path = joinFieldPath(basePath.value, index);
+  return fieldName ? joinFieldPath(path, fieldName) : path;
+}
+function itemErrorKey(index, fieldName) {
+  return fieldName ? `${index}.${fieldName}` : String(index);
+}
+async function addItem() {
+  if (props.disabled) return;
+  if (props.definition.options.maxItems !== void 0 && items.value.length >= props.definition.options.maxItems) return;
+  const index = items.value.length;
+  emit("update:modelValue", [...items.value, getArrayItemDefaultValue(props.definition.options.of)]);
+  await nextTick();
+  document.getElementById(fieldPathId(itemPath(index, objectFields.value[0]?.[0])))?.focus();
+}
+function removeItem(index) {
+  if (props.disabled) return;
+  emit("update:modelValue", items.value.filter((_, itemIndex) => itemIndex !== index));
+}
+function updateItem(index, value) {
+  if (props.disabled) return;
+  const next = [...items.value];
+  next[index] = value;
+  emit("update:modelValue", next);
+}
+function updateObjectItem(index, fieldName, value) {
+  updateItem(index, { ...asRecord(items.value[index]), [fieldName]: value });
+}
+async function handleObjectEnter(index, fieldName) {
+  const itemData = asRecord(items.value[index]);
+  const fieldIndex = objectFields.value.findIndex(([name]) => name === fieldName);
+  const nextField = objectFields.value.slice(fieldIndex + 1).find(([, definition]) => isFieldVisible(definition.options, itemData));
+  if (nextField) {
+    document.getElementById(fieldPathId(itemPath(index, nextField[0])))?.focus();
+    return;
+  }
+  await addItem();
+}
+</script>
+
+<template>
+  <div class="ep:grid ep:min-w-0 ep:max-w-full ep:gap-3">
+    <div
+      ref="sortableRoot"
+      class="ep:grid ep:gap-3"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        class="eponyme-sortable-item"
+        :class="isSimple ? 'ep:grid ep:min-w-0 ep:grid-cols-[2rem_minmax(0,1fr)_3rem] ep:items-start ep:gap-2' : 'ep:min-w-0 ep:max-w-full ep:rounded-xl ep:bg-selected-ep/30 ep:p-4'"
+      >
+        <template v-if="isSimple">
+          <button
+            type="button"
+            class="eponyme-drag-handle ep:flex ep:h-12 ep:w-8 ep:cursor-grab ep:items-center ep:justify-center ep:border-0 ep:bg-transparent ep:text-base ep:tracking-tighter ep:text-muted-ep ep:active:cursor-grabbing ep:hover:text-white"
+            :disabled="disabled"
+            :aria-label="`Move ${itemLabel(index)}`"
+            title="Drag to reorder"
+          >
+            ⠿
+          </button>
+          <div class="ep:min-w-0 ep:flex-1">
+            <FieldRenderer
+              hide-label
+              :field-name="fieldName"
+              :path="itemPath(index)"
+              :field="definition.options.of"
+              :model-value="item"
+              :errors="errorsAt(errors, itemErrorKey(index))"
+              :disabled="disabled"
+              @update:model-value="updateItem(index, $event)"
+              @enter="addItem"
+            />
+          </div>
+          <EPButton
+            icon="mingcute:close-line"
+            :disabled="disabled"
+            :aria-label="`Remove ${itemLabel(index)}`"
+            @click="removeItem(index)"
+          />
+        </template>
+
+        <template v-else>
+          <div class="ep:mb-4 ep:flex ep:items-center ep:justify-between ep:gap-3">
+            <div class="ep:flex ep:items-center ep:gap-2">
+              <button
+                type="button"
+                class="eponyme-drag-handle ep:flex ep:h-8 ep:w-7 ep:cursor-grab ep:items-center ep:justify-center ep:border-0 ep:bg-transparent ep:text-base ep:tracking-tighter ep:text-muted-ep ep:active:cursor-grabbing ep:hover:text-white"
+                :disabled="disabled"
+                :aria-label="`Move ${itemLabel(index)}`"
+                title="Drag to reorder"
+              >
+                ⠿
+              </button>
+              <span class="ep:text-xs ep:font-semibold ep:text-muted-ep">{{ itemLabel(index) }}</span>
+            </div>
+            <EPButton
+              icon="mingcute:close-line"
+              :aria-label="`Remove ${itemLabel(index)}`"
+              :disabled="disabled"
+              @click="removeItem(index)"
+            />
+          </div>
+          <div class="ep:grid ep:min-w-0 ep:gap-4">
+            <template
+              v-for="([itemFieldName, itemDefinition]) in objectFields"
+              :key="itemFieldName"
+            >
+              <FieldRenderer
+                v-if="isFieldVisible(itemDefinition.options, asRecord(item))"
+                compact
+                :field-name="itemFieldName"
+                :path="itemPath(index, itemFieldName)"
+                :field="itemDefinition"
+                :model-value="asRecord(item)[itemFieldName]"
+                :errors="errorsAt(errors, itemErrorKey(index, itemFieldName))"
+                :disabled="disabled"
+                @update:model-value="updateObjectItem(index, itemFieldName, $event)"
+                @enter="handleObjectEnter(index, itemFieldName)"
+              />
+            </template>
+          </div>
+          <p
+            v-for="error in errorsAt(errors, itemErrorKey(index))"
+            :key="error"
+            role="alert"
+            class="ep:mt-2 ep:text-xs ep:text-danger-ep"
+          >
+            {{ error }}
+          </p>
+        </template>
+      </div>
+    </div>
+
+    <div class="ep:flex ep:items-center ep:justify-between ep:gap-3">
+      <EPButton
+        size="sm"
+        class="ep:disabled:cursor-not-allowed ep:disabled:opacity-50"
+        :disabled="disabled || definition.options.maxItems !== void 0 && items.length >= definition.options.maxItems"
+        @click="addItem"
+      >
+        {{ definition.options.addLabel || "Add item" }}
+      </EPButton>
+      <span
+        v-if="definition.options.showCounter !== false && (definition.options.minItems !== void 0 || definition.options.maxItems !== void 0)"
+        class="ep:text-[11px] ep:text-muted-ep"
+      >
+        {{ items.length }}<template v-if="definition.options.maxItems !== void 0"> / {{ definition.options.maxItems }}</template>
+        items<template v-if="definition.options.minItems !== void 0"> · min {{ definition.options.minItems }}</template>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.eponyme-sortable-ghost{opacity:.25}.eponyme-sortable-chosen{cursor:grabbing}
+</style>

package/dist/runtime/components/fields/ArrayField.vue.d.ts

@@ -0,0 +1,19 @@
+import type { ArrayFieldDefinition } from '../../types/index.js';
+import type { ValidationErrors } from '../../utils/validate-eponyme-data.js';
+type __VLS_Props = {
+    fieldName: string;
+    definition: ArrayFieldDefinition;
+    modelValue: unknown;
+    /** Dotted path of this array; items extend it with their index. */
+    path?: string;
+    /** Errors of this subtree, keyed relative to this array (`0.title`, `1`). */
+    errors?: ValidationErrors;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/BooleanField.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/BooleanField.vue

@@ -0,0 +1,36 @@
+<script setup>
+import EPFormField from "../ui/EPFormField.vue";
+import EPSwitch from "../ui/EPSwitch.vue";
+defineProps({
+  id: { type: String, required: true },
+  modelValue: { type: null, required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <ClientOnly>
+      <EPSwitch
+        :id="id"
+        :model-value="Boolean(modelValue)"
+        :disabled="disabled"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+      <template #fallback>
+        <span class="ep:block ep:h-6 ep:w-11 ep:rounded-full ep:border ep:border-border-ep ep:bg-selected-ep" />
+      </template>
+    </ClientOnly>
+  </EPFormField>
+</template>

package/dist/runtime/components/fields/BooleanField.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/CheckboxGroupField.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    options: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/CheckboxGroupField.vue

@@ -0,0 +1,52 @@
+<script setup>
+import EPCheckbox from "../ui/EPCheckbox.vue";
+import EPFormField from "../ui/EPFormField.vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  modelValue: { type: null, required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  options: { type: Array, required: true },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+function checked(value) {
+  return Array.isArray(props.modelValue) && props.modelValue.includes(value);
+}
+function update(value, enabled) {
+  const current = Array.isArray(props.modelValue) ? props.modelValue.filter((item) => typeof item === "string") : [];
+  emit("update:modelValue", enabled ? [.../* @__PURE__ */ new Set([...current, value])] : current.filter((item) => item !== value));
+}
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <div class="ep:grid ep:gap-2 ep:sm:grid-cols-2">
+      <label
+        v-for="option in options"
+        :key="option.value"
+        class="ep:flex ep:cursor-pointer ep:items-center ep:gap-3 ep:rounded-xl ep:bg-selected-ep/40 ep:px-4 ep:py-3 ep:text-sm ep:text-text-ep ep:transition ep:hover:border-muted-ep"
+      >
+        <ClientOnly>
+          <EPCheckbox
+            :model-value="checked(option.value)"
+            :disabled="disabled"
+            @update:model-value="update(option.value, $event)"
+          />
+          <template #fallback>
+            <span class="ep:h-5 ep:w-5 ep:rounded-md ep:border ep:border-border-ep ep:bg-selected-ep" />
+          </template>
+        </ClientOnly>
+        {{ option.label }}
+      </label>
+    </div>
+  </EPFormField>
+</template>

package/dist/runtime/components/fields/CheckboxGroupField.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    options: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/ColorField.d.vue.ts

@@ -0,0 +1,19 @@
+import type { ColorPreset } from '../../types/index.js';
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    errors?: string[];
+    disabled?: boolean;
+    /** Overrides the module-wide palette for this field only. */
+    presets?: ReadonlyArray<string | ColorPreset>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/ColorField.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+import EPFormField from "../ui/EPFormField.vue";
+import EPColorPicker from "../ui/EPColorPicker.vue";
+import { normalizeColorPresets, useEponymeColorPresets } from "../../composables/useEponymeColorPresets";
+const props = defineProps({
+  id: { type: String, required: true },
+  modelValue: { type: null, required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false },
+  presets: { type: Array, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const globalPresets = useEponymeColorPresets();
+const presets = computed(() => props.presets ? normalizeColorPresets(props.presets) : globalPresets);
+const value = computed(() => typeof props.modelValue === "string" ? props.modelValue : "");
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <EPColorPicker
+      :id="id"
+      :model-value="value"
+      :presets="presets"
+      :disabled="disabled"
+      :invalid="Boolean(errors.length)"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </EPFormField>
+</template>

package/dist/runtime/components/fields/ColorField.vue.d.ts

@@ -0,0 +1,19 @@
+import type { ColorPreset } from '../../types/index.js';
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    errors?: string[];
+    disabled?: boolean;
+    /** Overrides the module-wide palette for this field only. */
+    presets?: ReadonlyArray<string | ColorPreset>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/DateField.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    min?: string;
+    max?: string;
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/DateField.vue

@@ -0,0 +1,39 @@
+<script setup>
+import EPFormField from "../ui/EPFormField.vue";
+import EPInputText from "../ui/EPInputText.vue";
+defineProps({
+  id: { type: String, required: true },
+  modelValue: { type: null, required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  min: { type: String, required: false },
+  max: { type: String, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <EPInputText
+      :id="id"
+      :model-value="typeof modelValue === 'string' ? modelValue : ''"
+      type="date"
+      :min="min"
+      :max="max"
+      :required="required"
+      :invalid="Boolean(errors.length)"
+      :disabled="disabled"
+      class="ep:font-sans"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </EPFormField>
+</template>

package/dist/runtime/components/fields/DateField.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    min?: string;
+    max?: string;
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/FieldRenderer.d.vue.ts

@@ -0,0 +1,24 @@
+import type { FieldDefinition } from '../../types/index.js';
+type __VLS_Props = {
+    fieldName: string;
+    field: Exclude<FieldDefinition, {
+        type: 'array' | 'section' | 'tabs';
+    }>;
+    modelValue?: unknown;
+    /** Dotted path of this field in the document; defaults to its name at the root. */
+    path?: string;
+    id?: string;
+    errors?: string[];
+    disabled?: boolean;
+    hideLabel?: boolean;
+    compact?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    enter: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onEnter?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;