@karibsen/eponyme 0.1.0

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

@@ -0,0 +1,127 @@
+<script setup>
+import { computed, ref } from "vue";
+import ArrayField from "./ArrayField.vue";
+import FieldRenderer from "./FieldRenderer.vue";
+import { isFieldVisible } from "../../utils/is-field-visible";
+import { humanizeLabel } from "../../utils/humanize-label";
+import { asRecord } from "../../utils/as-record";
+import { childErrors, errorsAt, fieldPathId, joinFieldPath } from "../../utils/field-path";
+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 },
+  hideHeader: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const open = ref(true);
+const fields = computed(() => Object.entries(props.definition.options.fields));
+const basePath = computed(() => props.path || props.fieldName);
+const sectionData = computed(() => asRecord(props.modelValue));
+function fieldPath(name) {
+  return joinFieldPath(basePath.value, name);
+}
+function relativePath(name) {
+  return name;
+}
+function updateField(name, value) {
+  emit("update:modelValue", { ...sectionData.value, [name]: value });
+}
+function focusNextField(name) {
+  const index = fields.value.findIndex(([fieldName]) => fieldName === name);
+  const next = fields.value.slice(index + 1).find(([, definition]) => isFieldVisible(definition.options, sectionData.value));
+  if (next) document.getElementById(fieldPathId(fieldPath(next[0])))?.focus();
+}
+</script>
+
+<template>
+  <section :class="hideHeader ? '' : 'ep:border-t ep:border-border-ep ep:pt-5'">
+    <button
+      v-if="!hideHeader"
+      type="button"
+      class="ep:flex ep:w-full ep:cursor-pointer ep:items-start ep:justify-between ep:gap-4 ep:border-0 ep:bg-transparent ep:p-0 ep:text-left ep:text-text-ep"
+      :aria-expanded="open"
+      :aria-controls="`${fieldPathId(basePath)}-panel`"
+      @click="open = !open"
+    >
+      <span class="ep:min-w-0 ep:flex-1">
+        <span class="ep:block ep:min-w-0 ep:max-w-full ep:text-xl ep:font-semibold ep:tracking-tight ep:text-white ep:[overflow-wrap:anywhere]">
+          {{ humanizeLabel(fieldName, definition.options.label) }}
+        </span>
+        <span
+          v-if="definition.options.description"
+          class="ep:mt-1 ep:block ep:text-xs ep:leading-relaxed ep:text-muted-ep"
+        >
+          {{ definition.options.description }}
+        </span>
+      </span>
+      <span
+        class="ep:mt-1 ep:shrink-0 ep:text-lg ep:text-muted-ep ep:transition-transform"
+        :class="{ 'ep:rotate-90': open }"
+        aria-hidden="true"
+      >
+        ›
+      </span>
+    </button>
+
+    <div
+      v-if="hideHeader || open"
+      :id="`${fieldPathId(basePath)}-panel`"
+      class="ep:grid ep:gap-5"
+      :class="{ 'ep:mt-6': !hideHeader }"
+    >
+      <template
+        v-for="([sectionFieldName, sectionField]) in fields"
+        :key="sectionFieldName"
+      >
+        <div v-if="isFieldVisible(sectionField.options, sectionData)">
+          <template v-if="sectionField.type === 'array'">
+            <label
+              :for="fieldPathId(fieldPath(sectionFieldName))"
+              class="ep:mb-1.5 ep:inline-block ep:w-fit ep:text-sm ep:font-medium ep:text-text-ep"
+            >{{ humanizeLabel(sectionFieldName, sectionField.options.label) }}<span
+              v-if="sectionField.options.required"
+              class="ep:text-danger-ep"
+            > *</span></label>
+            <p
+              v-if="sectionField.options.description"
+              class="ep:mt-0 ep:mb-2 ep:text-xs ep:leading-relaxed ep:text-muted-ep"
+            >
+              {{ sectionField.options.description }}
+            </p>
+            <ArrayField
+              :field-name="sectionFieldName"
+              :path="fieldPath(sectionFieldName)"
+              :definition="sectionField"
+              :model-value="sectionData[sectionFieldName]"
+              :errors="childErrors(errors, relativePath(sectionFieldName))"
+              :disabled="disabled"
+              @update:model-value="updateField(sectionFieldName, $event)"
+            />
+            <p
+              v-for="error in errorsAt(errors, relativePath(sectionFieldName))"
+              :key="error"
+              role="alert"
+              class="ep:mt-1.5 ep:text-xs ep:text-danger-ep"
+            >
+              {{ error }}
+            </p>
+          </template>
+          <FieldRenderer
+            v-else
+            :field-name="sectionFieldName"
+            :path="fieldPath(sectionFieldName)"
+            :field="sectionField"
+            :model-value="sectionData[sectionFieldName]"
+            :errors="errorsAt(errors, relativePath(sectionFieldName))"
+            :disabled="disabled"
+            @update:model-value="updateField(sectionFieldName, $event)"
+            @enter="focusNextField(sectionFieldName)"
+          />
+        </div>
+      </template>
+    </div>
+  </section>
+</template>

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

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

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    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/SelectField.vue

@@ -0,0 +1,42 @@
+<script setup>
+import EPFormField from "../ui/EPFormField.vue";
+import EPSelect from "../ui/EPSelect.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 },
+  placeholder: { type: String, required: false },
+  options: { type: Array, required: true },
+  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>
+      <EPSelect
+        :id="id"
+        :model-value="typeof modelValue === 'string' ? modelValue : ''"
+        :options="options"
+        :placeholder="placeholder"
+        :required="required"
+        :invalid="Boolean(errors.length)"
+        :disabled="disabled"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+      <template #fallback>
+        <div class="ep:h-12 ep:w-full ep:rounded-xl ep:border ep:border-border-ep ep:bg-selected-ep" />
+      </template>
+    </ClientOnly>
+  </EPFormField>
+</template>

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    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/SlugField.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+    showCounter?: boolean;
+    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/SlugField.vue

@@ -0,0 +1,35 @@
+<script setup>
+import TextField from "./TextField.vue";
+import { normalizeSlug } from "../../utils/normalize-slug";
+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 },
+  placeholder: { type: String, required: false },
+  minLength: { type: Number, required: false },
+  maxLength: { type: Number, required: false },
+  showCounter: { type: Boolean, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <TextField
+    :id="id"
+    :model-value="modelValue"
+    :label="label"
+    :description="description"
+    :required="required"
+    :placeholder="placeholder"
+    :min-length="minLength"
+    :max-length="maxLength"
+    :show-counter="showCounter"
+    :errors="errors"
+    :disabled="disabled"
+    @update:model-value="emit('update:modelValue', normalizeSlug(String($event)))"
+  />
+</template>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+    showCounter?: boolean;
+    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/TabsField.d.vue.ts

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

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

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import SectionField from "./SectionField.vue";
+import { humanizeLabel } from "../../utils/humanize-label";
+import { asRecord } from "../../utils/as-record";
+import { childErrors, hasErrorsUnder, joinFieldPath } from "../../utils/field-path";
+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 tabs = computed(() => Object.entries(props.definition.options.tabs));
+const activeTab = ref(tabs.value[0]?.[0] ?? "");
+const basePath = computed(() => props.path || props.fieldName);
+const tabsData = computed(() => asRecord(props.modelValue));
+watch(tabs, (value) => {
+  if (!value.some(([name]) => name === activeTab.value)) activeTab.value = value[0]?.[0] ?? "";
+});
+function updateTab(name, value) {
+  emit("update:modelValue", { ...tabsData.value, [name]: value });
+}
+function sectionDefinition(name) {
+  return {
+    type: "section",
+    options: { fields: props.definition.options.tabs[name]?.fields ?? {} }
+  };
+}
+function tabHasErrors(name) {
+  return hasErrorsUnder(props.errors, name);
+}
+function focusTab(offset) {
+  const index = tabs.value.findIndex(([name]) => name === activeTab.value);
+  const next = tabs.value[(index + offset + tabs.value.length) % tabs.value.length];
+  if (!next) return;
+  activeTab.value = next[0];
+  document.getElementById(`tab-${basePath.value}-${next[0]}`)?.focus();
+}
+</script>
+
+<template>
+  <section class="ep:border-t ep:border-border-ep ep:pt-5">
+    <header class="ep:mb-5">
+      <h2 class="ep:m-0 ep:min-w-0 ep:max-w-full ep:text-xl ep:font-semibold ep:tracking-tight ep:text-white ep:[overflow-wrap:anywhere]">
+        {{ humanizeLabel(fieldName, definition.options.label) }}
+      </h2>
+      <p
+        v-if="definition.options.description"
+        class="ep:mt-1 ep:mb-0 ep:text-xs ep:leading-relaxed ep:text-muted-ep"
+      >
+        {{ definition.options.description }}
+      </p>
+    </header>
+
+    <div
+      role="tablist"
+      :aria-label="humanizeLabel(fieldName, definition.options.label)"
+      class="ep:mb-6 ep:flex ep:flex-wrap ep:gap-1 ep:border-b ep:border-border-ep"
+      @keydown.right.prevent="focusTab(1)"
+      @keydown.left.prevent="focusTab(-1)"
+    >
+      <button
+        v-for="([tabName, tabDefinition]) in tabs"
+        :id="`tab-${basePath}-${tabName}`"
+        :key="tabName"
+        type="button"
+        role="tab"
+        :aria-selected="activeTab === tabName"
+        :aria-controls="`panel-${basePath}-${tabName}`"
+        :tabindex="activeTab === tabName ? 0 : -1"
+        class="ep:-mb-px ep:min-w-0 ep:max-w-full ep:cursor-pointer ep:border-0 ep:border-b-2 ep:bg-transparent ep:px-4 ep:py-2.5 ep:text-left ep:text-sm ep:font-medium ep:transition ep:[overflow-wrap:anywhere]"
+        :class="activeTab === tabName ? 'ep:border-white ep:text-white' : 'ep:border-transparent ep:text-muted-ep ep:hover:text-text-ep'"
+        @click="activeTab = tabName"
+      >
+        {{ humanizeLabel(tabName, tabDefinition.label) }}<span
+          v-if="tabHasErrors(tabName)"
+          class="ep:ml-1 ep:text-danger-ep"
+          :aria-label="`${humanizeLabel(tabName, tabDefinition.label)} has errors`"
+        >•</span>
+      </button>
+    </div>
+
+    <template
+      v-for="([tabName]) in tabs"
+      :key="tabName"
+    >
+      <div
+        v-if="activeTab === tabName"
+        :id="`panel-${basePath}-${tabName}`"
+        role="tabpanel"
+        :aria-labelledby="`tab-${basePath}-${tabName}`"
+      >
+        <SectionField
+          hide-header
+          :field-name="tabName"
+          :path="joinFieldPath(basePath, tabName)"
+          :definition="sectionDefinition(tabName)"
+          :model-value="tabsData[tabName]"
+          :errors="childErrors(errors, tabName)"
+          :disabled="disabled"
+          @update:model-value="updateTab(tabName, $event)"
+        />
+      </div>
+    </template>
+  </section>
+</template>

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

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

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+    showCounter?: boolean;
+    inputType?: 'text' | 'email' | 'url';
+    errors?: string[];
+    preview?: boolean;
+    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/TextField.vue

@@ -0,0 +1,56 @@
+<script setup>
+import EPFormField from "../ui/EPFormField.vue";
+import EPInputText from "../ui/EPInputText.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 },
+  placeholder: { type: String, required: false },
+  minLength: { type: Number, required: false },
+  maxLength: { type: Number, required: false },
+  showCounter: { type: Boolean, required: false },
+  inputType: { type: String, required: false, default: "text" },
+  errors: { type: Array, required: false, default: () => [] },
+  preview: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const value = () => typeof props.modelValue === "string" ? props.modelValue : "";
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <EPInputText
+      :id="id"
+      :model-value="value()"
+      :type="inputType"
+      :placeholder="placeholder"
+      :minlength="minLength"
+      :maxlength="maxLength"
+      :required="required"
+      :invalid="Boolean(errors.length)"
+      :disabled="disabled"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+    <p
+      v-if="maxLength !== void 0 && showCounter !== false"
+      class="ep:mt-1.5 ep:mb-0 ep:text-right ep:text-[11px] ep:text-muted-ep"
+    >
+      {{ value().length }} / {{ maxLength }}
+    </p>
+    <img
+      v-if="preview && value()"
+      :src="value()"
+      :alt="label"
+      class="ep:mt-3 ep:block ep:max-h-64 ep:max-w-full ep:rounded-xl ep:border ep:border-border-ep ep:object-contain"
+    >
+  </EPFormField>
+</template>

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+    showCounter?: boolean;
+    inputType?: 'text' | 'email' | 'url';
+    errors?: string[];
+    preview?: boolean;
+    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/TextareaField.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+    showCounter?: boolean;
+    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/TextareaField.vue

@@ -0,0 +1,47 @@
+<script setup>
+import EPFormField from "../ui/EPFormField.vue";
+import EPTextarea from "../ui/EPTextarea.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 },
+  placeholder: { type: String, required: false },
+  minLength: { type: Number, required: false },
+  maxLength: { type: Number, required: false },
+  showCounter: { type: Boolean, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const value = () => typeof props.modelValue === "string" ? props.modelValue : "";
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <EPTextarea
+      :id="id"
+      :model-value="value()"
+      :placeholder="placeholder"
+      :minlength="minLength"
+      :maxlength="maxLength"
+      :required="required"
+      :disabled="disabled"
+      :invalid="Boolean(errors.length)"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+    <p
+      v-if="maxLength !== void 0 && showCounter !== false"
+      class="ep:mt-1.5 ep:mb-0 ep:text-right ep:text-[11px] ep:text-muted-ep"
+    >
+      {{ value().length }} / {{ maxLength }}
+    </p>
+  </EPFormField>
+</template>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    minLength?: number;
+    maxLength?: number;
+    showCounter?: boolean;
+    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;