@aleph-alpha/settings-kit 0.1.0 → 1.0.0

package/dist/core/utils/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/core/utils/consts.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAWxB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;EAKhB,CAAC;AAEX,mDAAmD;AACnD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;AAEnE,8CAA8C;AAC9C,MAAM,MAAM,SAAS,GAAG;IACtB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyOa,CAAC"}

package/dist/core/utils/kitMessages.d.ts

@@ -0,0 +1,165 @@
+import type { LocalizedText } from '../types';
+/**
+ * All wording the kit shows by itself. Placeholders use `{name}`.
+ * An application can replace any entry with `provideSettingsLocale`.
+ */
+export declare const kitMessages: {
+    'constraint.required': {
+        en: string;
+        de: string;
+    };
+    'constraint.maxLength': {
+        en: string;
+        de: string;
+    };
+    'constraint.pattern': {
+        en: string;
+        de: string;
+    };
+    'constraint.enum': {
+        en: string;
+        de: string;
+    };
+    'constraint.format.hex': {
+        en: string;
+        de: string;
+    };
+    'constraint.format.email': {
+        en: string;
+        de: string;
+    };
+    'constraint.format.phone': {
+        en: string;
+        de: string;
+    };
+    'constraint.mimeTypes': {
+        en: string;
+        de: string;
+    };
+    'constraint.invalid': {
+        en: string;
+        de: string;
+    };
+    'field.inheritLabel': {
+        en: string;
+        de: string;
+    };
+    'field.inheritLabelDefault': {
+        en: string;
+        de: string;
+    };
+    'text.charCount': {
+        en: string;
+        de: string;
+    };
+    'control.unsupported': {
+        en: string;
+        de: string;
+    };
+    'control.unsupportedNamed': {
+        en: string;
+        de: string;
+    };
+    'file.upload': {
+        en: string;
+        de: string;
+    };
+    'file.preview': {
+        en: string;
+        de: string;
+    };
+    'file.previewDefault': {
+        en: string;
+        de: string;
+    };
+    'file.readError': {
+        en: string;
+        de: string;
+    };
+    'color.hexValue': {
+        en: string;
+        de: string;
+    };
+    'color.hexValueDefault': {
+        en: string;
+        de: string;
+    };
+    'tel.countryCode': {
+        en: string;
+        de: string;
+    };
+    'tel.search': {
+        en: string;
+        de: string;
+    };
+    'tel.searchCountry': {
+        en: string;
+        de: string;
+    };
+    'tel.countryCodes': {
+        en: string;
+        de: string;
+    };
+    'period.unitAria': {
+        en: string;
+        de: string;
+    };
+    'period.unit.d': {
+        en: string;
+        de: string;
+    };
+    'period.unit.w': {
+        en: string;
+        de: string;
+    };
+    'period.unit.m': {
+        en: string;
+        de: string;
+    };
+    'period.unit.y': {
+        en: string;
+        de: string;
+    };
+    'shell.title': {
+        en: string;
+        de: string;
+    };
+    'shell.back': {
+        en: string;
+        de: string;
+    };
+    'shell.toggleSidebar': {
+        en: string;
+        de: string;
+    };
+    'shell.navigation': {
+        en: string;
+        de: string;
+    };
+    'shell.layout': {
+        en: string;
+        de: string;
+    };
+    'shell.focusLayout': {
+        en: string;
+        de: string;
+    };
+    'shell.sidebarLayout': {
+        en: string;
+        de: string;
+    };
+    'shell.pageHasErrors': {
+        en: string;
+        de: string;
+    };
+};
+export type KitMessageKey = keyof typeof kitMessages;
+/** Replacement wording per message key. */
+export type KitMessageOverrides = Partial<Record<KitMessageKey, LocalizedText>>;
+/** Copies `base`, then adds each non-empty text of `override`. An empty text counts as missing. */
+export declare function mergeLocalizedText(base: LocalizedText | undefined, override: LocalizedText | undefined): LocalizedText;
+/** Replaces each `{name}` in `template` with `params.name`. */
+export declare function formatMessage(template: string, params?: Record<string, string | number>): string;
+/** Kit wording for `key`. Overrides win over the built-in catalog. */
+export declare function resolveKitMessage(key: KitMessageKey, locale?: string, fallbackLocale?: string, overrides?: KitMessageOverrides, params?: Record<string, string | number>): string;
+//# sourceMappingURL=kitMessages.d.ts.map

package/dist/core/utils/kitMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kitMessages.d.ts","sourceRoot":"","sources":["../../../src/core/utils/kitMessages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFiB,CAAC;AAE1C,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAC;AAErD,2CAA2C;AAC3C,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;AAEhF,mGAAmG;AACnG,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,QAAQ,EAAE,aAAa,GAAG,SAAS,GAClC,aAAa,CAMf;AAED,+DAA+D;AAC/D,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC3C,MAAM,CAIR;AAED,sEAAsE;AACtE,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,aAAa,EAClB,MAAM,CAAC,EAAE,MAAM,EACf,cAAc,CAAC,EAAE,MAAM,EACvB,SAAS,CAAC,EAAE,mBAAmB,EAC/B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GACvC,MAAM,CAMR"}

package/dist/core/utils/localizedText.d.ts

@@ -0,0 +1,10 @@
+import type { LocalizedText } from '../types';
+/** Locale the kit falls back to when neither `locale` nor `fallbackLocale` has the text. */
+export declare const DEFAULT_LOCALE = "en";
+/**
+ * Resolves localized text. The first non-empty translation wins, in this
+ * order: `locale`, `fallbackLocale`, `DEFAULT_LOCALE`, any translation.
+ * Returns `''` only when the text has no translation at all.
+ */
+export declare function resolveLocalizedText(text: LocalizedText, locale?: string, fallbackLocale?: string): string;
+//# sourceMappingURL=localizedText.d.ts.map

package/dist/core/utils/localizedText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localizedText.d.ts","sourceRoot":"","sources":["../../../src/core/utils/localizedText.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,4FAA4F;AAC5F,eAAO,MAAM,cAAc,OAAO,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,EACnB,MAAM,GAAE,MAAuB,EAC/B,cAAc,CAAC,EAAE,MAAM,GACtB,MAAM,CAMR"}

package/dist/core/utils/useName.d.ts

@@ -0,0 +1,7 @@
+import type { ComputedRef } from 'vue';
+/**
+ * Resolves a control's form name, falling back to its id and then to a
+ * random value stable for the component instance.
+ */
+export declare function useName(name?: string): ComputedRef<string>;
+//# sourceMappingURL=useName.d.ts.map

package/dist/core/utils/useName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useName.d.ts","sourceRoot":"","sources":["../../../src/core/utils/useName.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAGvC;;;GAGG;AACH,wBAAgB,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAM1D"}

package/dist/core/validate/constraints.d.ts

@@ -0,0 +1,20 @@
+import type { SettingField, StandardSchemaV1 } from '../types';
+import type { KitMessageOverrides } from '../utils/kitMessages';
+/** Names of the constraints a field's value violates, checked while editing. */
+export declare function checkFieldConstraints(field: SettingField, value: unknown): string[];
+/**
+ * Message for a violated constraint, in the admin's language. Wording the
+ * owning application declared on `field.errors` wins over the generic
+ * kit wording; a plain fallback covers unknown constraints. `messages`
+ * replaces generic wording per key.
+ */
+export declare function resolveConstraintMessage(field: SettingField | undefined, constraint: string | undefined, locale: string, options?: {
+    fallbackLocale?: string;
+    messages?: KitMessageOverrides;
+}): string;
+/**
+ * The built-in constraint validator for one field, as a Standard Schema.
+ * Interchangeable with any external validator (zod, valibot, ...).
+ */
+export declare function createConstraintValidator(field: SettingField, locale?: string): StandardSchemaV1;
+//# sourceMappingURL=constraints.d.ts.map

package/dist/core/validate/constraints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constraints.d.ts","sourceRoot":"","sources":["../../../src/core/validate/constraints.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC/D,OAAO,KAAK,EAAiB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AA2F/E,gFAAgF;AAChF,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,OAAO,GACb,MAAM,EAAE,CAaV;AAWD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,YAAY,GAAG,SAAS,EAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,EAC9B,MAAM,EAAE,MAAM,EACd,OAAO,GAAE;IAAE,cAAc,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAA;CAAO,GACxE,MAAM,CAUR;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,YAAY,EACnB,MAAM,SAAO,GACZ,gBAAgB,CAgBlB"}

package/dist/core/validate/rules.d.ts

@@ -0,0 +1,29 @@
+import type { SettingField, SettingFieldCondition } from '../types';
+/** Rule outcome for one field. Defaults (no rules): visible and enabled. */
+export interface SettingFieldRuleState {
+    visible: boolean;
+    enabled: boolean;
+}
+/** Evaluates a rule condition against the current setting values. */
+export declare function evaluateCondition(condition: SettingFieldCondition, values: Record<string, unknown>): boolean;
+/**
+ * Applies all of a field's rules against the current values. Every rule
+ * applies: a HIDE that holds (or a SHOW that does not) hides the field;
+ * a DISABLE that holds (or an ENABLE that does not) disables it.
+ */
+export declare function evaluateFieldRules(field: SettingField, values: Record<string, unknown>): SettingFieldRuleState;
+/**
+ * Rules middleware: overlays every field's visible/enabled state from its
+ * rules and the current values, keyed by setting key. The renderer stays
+ * rule-agnostic — it only consumes the resulting states.
+ */
+export declare function evaluateRuleStates(fields: SettingField[], values: Record<string, unknown>): Record<string, SettingFieldRuleState>;
+/**
+ * Validates a definition set before use. Throws when a rule references an
+ * unknown setting key or when rules and fallbacks form a dependency cycle
+ * (A gates B gates A, or A falls back to B falls back to A). A rule may gate
+ * on its field's own value; a field may not fall back to itself. A fallback
+ * to an unknown key is allowed: it resolves to no source.
+ */
+export declare function validateFieldRules(fields: SettingField[]): void;
+//# sourceMappingURL=rules.d.ts.map

package/dist/core/validate/rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../../src/core/validate/rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,qBAAqB,EAEtB,MAAM,UAAU,CAAC;AAElB,4EAA4E;AAC5E,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AA0DD,qEAAqE;AACrE,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,qBAAqB,EAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,OAAO,CAWT;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,qBAAqB,CAYvB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,YAAY,EAAE,EACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAMvC;AAUD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAoD/D"}

package/dist/index-BQ6z6MK4.js

@@ -0,0 +1,214 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createBlock, unref, withCtx, createVNode, ref, watch, Fragment, createElementVNode, renderSlot, toDisplayString, createCommentVNode, createTextVNode, mergeProps, mergeDefaults } from "vue";
+import { UiSpinner, UiTooltip, UiButton, UiIcon } from "@aleph-alpha/ui-library";
+import { I as useSettingsLocale, N as useControlModel, O as useName, P as useA11yAttrs, T as skDescriptionId, Q as skBaseControlDefaults } from "./SkLayoutPage-DGbCpQFm.js";
+import { U as UseFileConvertor } from "./UseFileConvertor-DN6cCXNi.js";
+import { CircleAlertIcon } from "@aleph-alpha/ui-library/icons";
+const _hoisted_1$1 = ["src", "alt"];
+const fallbackImage = "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' height='78' width='78' viewBox='24 24 102 102'%3E%3Cpath d='m34.67 106.43-5.55-13.55A19.14 19.14 0 0 0 29 57.42l5.47-13.59a33.78 33.78 0 0 1 .2 62.6Zm22.93 17.12-8.68-11.8a45.28 45.28 0 0 0 8.61-8.27L69 112.62a59.82 59.82 0 0 1-11.4 10.93Z'/%3E%3Cpath d='M82.23 75.17a60.37 60.37 0 0 0-24.64-48.39l-8.68 11.81a45.63 45.63 0 0 1 18.68 36.58 60.28 60.28 0 0 0 24.48 48.38l8.68-11.8a45.6 45.6 0 0 1-18.52-36.58Zm9.85-28.23-11.47-9.12a60.14 60.14 0 0 1 11.94-11.37l8.56 11.88a45.5 45.5 0 0 0-9.03 8.61ZM115 106.52a34.32 34.32 0 0 1-.29-62.52l6.1 13.32a19.68 19.68 0 0 0 .19 35.83Z'/%3E%3C/svg%3E";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "SkFilePlaceholder",
+  props: {
+    isDisabled: { type: Boolean },
+    preview: {},
+    label: {},
+    loading: { type: Boolean },
+    error: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { message } = useSettingsLocale();
+    const loadableSrc = /^(data:|blob:|https?:)/;
+    const previewSrc = computed(
+      () => props.preview && loadableSrc.test(props.preview) ? props.preview : fallbackImage
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["border-input rounded-xl border px-3", [__props.error ? "py-3.5" : "py-2.5", { "opacity-50": __props.isDisabled }]])
+      }, [
+        __props.loading ? (openBlock(), createBlock(unref(UiSpinner), {
+          key: 0,
+          class: "size-11"
+        })) : __props.error ? (openBlock(), createBlock(unref(UiTooltip), {
+          key: 1,
+          content: __props.error,
+          side: "top",
+          align: "center",
+          "delay-duration": 500
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(UiButton), {
+              size: "icon-lg",
+              variant: "ghost",
+              "aria-label": __props.error
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(UiIcon), {
+                  name: unref(CircleAlertIcon),
+                  class: "text-border-input-error"
+                }, null, 8, ["name"])
+              ]),
+              _: 1
+            }, 8, ["aria-label"])
+          ]),
+          _: 1
+        }, 8, ["content"])) : (openBlock(), createElementBlock("img", {
+          key: 2,
+          src: previewSrc.value,
+          alt: __props.label ? unref(message)("file.preview", { label: __props.label }) : unref(message)("file.previewDefault"),
+          width: "44",
+          height: "44",
+          class: "size-11"
+        }, null, 8, _hoisted_1$1))
+      ], 2);
+    };
+  }
+});
+const _hoisted_1 = { class: "flex items-start gap-2" };
+const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col gap-2" };
+const _hoisted_3 = { class: "flex items-start gap-2" };
+const _hoisted_4 = { class: "flex min-w-0 flex-1 flex-col" };
+const _hoisted_5 = ["for"];
+const _hoisted_6 = ["id"];
+const _hoisted_7 = { key: 0 };
+const _hoisted_8 = ["id", "name", "accept", "disabled", "required"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkFileUpload",
+    inheritAttrs: false
+  },
+  __name: "SkFileUpload",
+  props: /* @__PURE__ */ mergeDefaults({
+    modelValue: {},
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {},
+    description: {},
+    accept: {}
+  }, {
+    ...skBaseControlDefaults,
+    label: void 0,
+    description: void 0,
+    accept: ".png,.svg,image/png,image/svg+xml"
+  }),
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = useControlModel(props, emit, "");
+    const fileInput = ref();
+    const {
+      isLoading: fileIsLoading,
+      error: fileError,
+      handleConvertFile,
+      reset
+    } = UseFileConvertor();
+    const { message } = useSettingsLocale();
+    const controlName = useName(props?.name ?? props?.id);
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-errormessage"
+    ]);
+    const descriptionId = computed(
+      () => props.id && props.description ? skDescriptionId(props.id) : void 0
+    );
+    const isDisabled = computed(() => props.disabled || props.inheriting);
+    watch(
+      () => [props.inheriting, model.value],
+      ([inheriting]) => {
+        if (!inheriting) return;
+        reset();
+        if (fileInput.value) fileInput.value.value = "";
+      }
+    );
+    watch(fileError, (raw) => {
+      if (raw) console.error(raw);
+    });
+    function openPicker() {
+      if (!isDisabled.value) {
+        fileInput.value?.click();
+      }
+    }
+    async function handleFileChange(event) {
+      const file = event.target.files?.[0];
+      if (!file) return;
+      const dataUrl = await handleConvertFile(file);
+      if (dataUrl !== void 0) {
+        model.value = dataUrl;
+        emit("change", dataUrl);
+        event.target.value = "";
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          createVNode(_sfc_main$1, {
+            "is-disabled": isDisabled.value,
+            preview: unref(model),
+            label: __props.label,
+            loading: unref(fileIsLoading),
+            error: unref(fileError) ? unref(message)("file.readError") : void 0,
+            class: "shrink-0"
+          }, null, 8, ["is-disabled", "preview", "label", "loading", "error"]),
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, [
+                renderSlot(_ctx.$slots, "label", {}, () => [
+                  createElementVNode("label", {
+                    for: __props.id,
+                    class: "label-s-medium text-content-on-surface-primary font-medium"
+                  }, toDisplayString(__props.label), 9, _hoisted_5)
+                ]),
+                __props.description ? (openBlock(), createElementBlock("p", {
+                  key: 0,
+                  id: descriptionId.value,
+                  class: "label-xs-regular text-content-on-surface-muted"
+                }, toDisplayString(__props.description), 9, _hoisted_6)) : createCommentVNode("", true)
+              ]),
+              createVNode(unref(UiButton), {
+                variant: "secondary",
+                class: "ml-auto shrink-0",
+                disabled: isDisabled.value,
+                onClick: openPicker
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(message)("file.upload")), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _ctx.$slots.addons ? (openBlock(), createElementBlock("div", _hoisted_7, [
+              renderSlot(_ctx.$slots, "addons")
+            ])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("input", mergeProps({
+            id: __props.id,
+            ref_key: "fileInput",
+            ref: fileInput
+          }, unref(a11yAttrs), {
+            type: "file",
+            class: "sr-only",
+            name: unref(controlName),
+            accept: __props.accept,
+            disabled: isDisabled.value,
+            required: __props.required,
+            onChange: handleFileChange
+          }), null, 16, _hoisted_8)
+        ]),
+        renderSlot(_ctx.$slots, "error")
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as SkFileUpload
+};

package/dist/index-BXs-0JdT.js

@@ -0,0 +1,168 @@
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, Fragment, renderSlot, createVNode, unref, withCtx, mergeProps, createElementVNode, toDisplayString, renderList, createBlock, createCommentVNode, mergeDefaults } from "vue";
+import { UiButtonGroup, UiInput, UiDropdownMenu, UiDropdownMenuTrigger, UiButton, UiIcon, UiDropdownMenuContent, UiDropdownMenuItem } from "@aleph-alpha/ui-library";
+import { ChevronDownIcon, CheckIcon } from "@aleph-alpha/ui-library/icons";
+import { N as useControlModel, I as useSettingsLocale, O as useName, P as useA11yAttrs, R as skPeriodUnits, Q as skBaseControlDefaults } from "./SkLayoutPage-DGbCpQFm.js";
+const _hoisted_1 = { class: "body-s-regular !font-medium text-content-on-surface-primary" };
+const _hoisted_2 = { class: "flex-1 body-s-regular text-content-on-surface-primary" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkPeriodControl",
+    inheritAttrs: false
+  },
+  __name: "SkPeriodControl",
+  props: /* @__PURE__ */ mergeDefaults({
+    modelValue: {},
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {}
+  }, {
+    ...skBaseControlDefaults
+  }),
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = useControlModel(props, emit, "");
+    const { message } = useSettingsLocale();
+    const unitLabel = (unit2) => message(`period.unit.${unit2}`);
+    const controlName = useName(props?.name ?? props?.id);
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-errormessage"
+    ]);
+    const unitAliases = Object.fromEntries(
+      skPeriodUnits.flatMap(({ value, label }) => [
+        [value, value],
+        [label.toLowerCase(), value],
+        [label.toLowerCase().slice(0, -1), value]
+      ])
+    );
+    function parsePeriod(value) {
+      const match = /^(\d+)[\s-]*([a-z]+)$/i.exec(value.trim());
+      const [, amountPart, unitPart] = match ?? [];
+      const unit2 = unitPart ? unitAliases[unitPart.toLowerCase()] : void 0;
+      if (!amountPart || !unit2) return void 0;
+      return { amount: amountPart, unit: unit2 };
+    }
+    function composePeriod(amount2, unit2) {
+      return amount2 ? `${amount2}${unit2}` : "";
+    }
+    const amount = ref("");
+    const unit = ref("d");
+    const composedPeriod = computed(() => composePeriod(amount.value, unit.value));
+    const selectedUnit = computed(
+      () => skPeriodUnits.find(({ value }) => value === unit.value) ?? skPeriodUnits[0]
+    );
+    watch(
+      () => model.value ?? "",
+      (value) => {
+        if (value === composedPeriod.value) return;
+        const parsed = parsePeriod(value);
+        if (parsed) {
+          amount.value = parsed.amount;
+          unit.value = parsed.unit;
+        } else {
+          amount.value = value.replace(/\D/g, "");
+        }
+      },
+      { immediate: true }
+    );
+    const amountInput = computed({
+      get: () => amount.value,
+      set: (value) => {
+        amount.value = String(value ?? "").replace(/\D/g, "");
+        model.value = composedPeriod.value;
+      }
+    });
+    function selectUnit(value) {
+      unit.value = value;
+      model.value = composedPeriod.value;
+      emit("change", composedPeriod.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "label"),
+        createVNode(unref(UiButtonGroup), { class: "w-full" }, {
+          default: withCtx(() => [
+            createVNode(unref(UiInput), mergeProps({
+              id: __props.id,
+              modelValue: amountInput.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => amountInput.value = $event)
+            }, unref(a11yAttrs), {
+              type: "text",
+              inputmode: "numeric",
+              name: unref(controlName),
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              required: __props.required,
+              onChange: _cache[1] || (_cache[1] = ($event) => emit("change", composedPeriod.value))
+            }), null, 16, ["id", "modelValue", "name", "placeholder", "disabled", "required"]),
+            createVNode(unref(UiDropdownMenu), null, {
+              default: withCtx(() => [
+                createVNode(unref(UiDropdownMenuTrigger), { "as-child": "" }, {
+                  default: withCtx(() => [
+                    createVNode(unref(UiButton), {
+                      variant: "outline",
+                      class: "rounded-md",
+                      disabled: __props.disabled,
+                      "aria-label": unref(message)("period.unitAria", { unit: unitLabel(selectedUnit.value.value) })
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("span", _hoisted_1, toDisplayString(unitLabel(selectedUnit.value.value)), 1),
+                        createVNode(unref(UiIcon), {
+                          name: unref(ChevronDownIcon),
+                          class: "shrink-0 text-content-on-surface-primary"
+                        }, null, 8, ["name"])
+                      ]),
+                      _: 1
+                    }, 8, ["disabled", "aria-label"])
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(UiDropdownMenuContent), { align: "start" }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(skPeriodUnits), (periodUnit) => {
+                      return openBlock(), createBlock(unref(UiDropdownMenuItem), {
+                        key: periodUnit.value,
+                        "text-value": unitLabel(periodUnit.value),
+                        onSelect: ($event) => selectUnit(periodUnit.value)
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("span", _hoisted_2, toDisplayString(unitLabel(periodUnit.value)), 1),
+                          periodUnit.value === unit.value ? (openBlock(), createBlock(unref(UiIcon), {
+                            key: 0,
+                            name: unref(CheckIcon),
+                            size: "s",
+                            class: "shrink-0"
+                          }, null, 8, ["name"])) : createCommentVNode("", true)
+                        ]),
+                        _: 2
+                      }, 1032, ["text-value", "onSelect"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }),
+        renderSlot(_ctx.$slots, "error")
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as SkPeriodControl
+};