@aleph-alpha/settings-kit 0.0.0-stage → 1.0.0

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
+};

package/dist/index-BynIH0EE.js

@@ -0,0 +1,92 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderSlot, createElementVNode, normalizeStyle, unref, normalizeClass, withDirectives, mergeProps, isRef, vModelText, createVNode, mergeDefaults } from "vue";
+import { UiInput } from "@aleph-alpha/ui-library";
+import { N as useControlModel, I as useSettingsLocale, O as useName, P as useA11yAttrs, Q as skBaseControlDefaults } from "./SkLayoutPage-DGbCpQFm.js";
+const _hoisted_1 = { class: "flex items-center gap-2" };
+const _hoisted_2 = ["id", "name", "disabled", "required"];
+const _hoisted_3 = { class: "flex flex-col grow gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkColorControl",
+    inheritAttrs: false
+  },
+  __name: "SkColorControl",
+  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, "#000000");
+    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 hexA11yAttrs = computed(() => ({
+      ...a11yAttrs.value,
+      "aria-label": a11yAttrs.value["aria-label"] ? message("color.hexValue", { label: a11yAttrs.value["aria-label"] }) : message("color.hexValueDefault"),
+      "aria-labelledby": void 0
+    }));
+    function onChange(event) {
+      emit("change", event.target.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "label"),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("label", {
+            class: normalizeClass(["ui-focus-ring-within size-9 shrink-0 cursor-pointer rounded-full border border-input self-start", { "pointer-events-none opacity-50": __props.disabled }]),
+            style: normalizeStyle({ backgroundColor: unref(model) })
+          }, [
+            withDirectives(createElementVNode("input", mergeProps({
+              id: __props.id,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null)
+            }, unref(a11yAttrs), {
+              type: "color",
+              name: `${unref(controlName)}-color`,
+              disabled: __props.disabled,
+              required: __props.required,
+              class: "sr-only",
+              onChange
+            }), null, 16, _hoisted_2), [
+              [vModelText, unref(model)]
+            ])
+          ], 6),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(unref(UiInput), mergeProps({
+              modelValue: unref(model),
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(model) ? model.value = $event : null)
+            }, hexA11yAttrs.value, {
+              class: "grow",
+              name: `${unref(controlName)}-input`,
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              onChange
+            }), null, 16, ["modelValue", "name", "placeholder", "disabled"]),
+            renderSlot(_ctx.$slots, "error")
+          ])
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as SkColorControl
+};

package/dist/index-C-WLhRod.js

@@ -0,0 +1,100 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderSlot, createVNode, unref, withCtx, mergeProps, renderList, createBlock, createTextVNode, toDisplayString, mergeDefaults } from "vue";
+import { UiSelect, UiSelectTrigger, UiSelectValue, UiSelectContent, UiSelectItem } from "@aleph-alpha/ui-library";
+import { I as useSettingsLocale, N as useControlModel, O as useName, P as useA11yAttrs, Q as skBaseControlDefaults } from "./SkLayoutPage-DGbCpQFm.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkSelectControl",
+    inheritAttrs: false
+  },
+  __name: "SkSelectControl",
+  props: /* @__PURE__ */ mergeDefaults({
+    options: {},
+    modelValue: {},
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {}
+  }, {
+    ...skBaseControlDefaults,
+    options: () => []
+  }),
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { resolveText } = useSettingsLocale();
+    const resolvedOptions = computed(
+      () => props.options.map((option) => ({
+        value: option.value,
+        label: resolveText(option.label),
+        disabled: option.disabled
+      }))
+    );
+    const model = useControlModel(props, emit);
+    function pick(next) {
+      const value = Array.isArray(next) ? next[0] : next;
+      model.value = value;
+      emit("change", value);
+    }
+    const controlName = useName(props?.name ?? props?.id);
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-errormessage"
+    ]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "label"),
+        createVNode(unref(UiSelect), {
+          "model-value": unref(model),
+          name: unref(controlName),
+          disabled: __props.disabled,
+          required: __props.required,
+          "onUpdate:modelValue": pick
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(UiSelectTrigger), mergeProps({ id: __props.id }, unref(a11yAttrs), {
+              class: "w-full",
+              disabled: __props.disabled
+            }), {
+              default: withCtx(() => [
+                createVNode(unref(UiSelectValue), { placeholder: __props.placeholder }, null, 8, ["placeholder"])
+              ]),
+              _: 1
+            }, 16, ["id", "disabled"]),
+            createVNode(unref(UiSelectContent), null, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedOptions.value, (option) => {
+                  return openBlock(), createBlock(unref(UiSelectItem), {
+                    key: option.value,
+                    value: option.value,
+                    disabled: option.disabled
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(option.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["value", "disabled"]);
+                }), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "name", "disabled", "required"]),
+        renderSlot(_ctx.$slots, "error")
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as SkSelectControl
+};

package/dist/index-CFMv8jSO.js

@@ -0,0 +1,4 @@
+import { M as _sfc_main } from "./SkLayoutPage-DGbCpQFm.js";
+export {
+  _sfc_main as SkCheckboxControl
+};