@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/composite/footbar/Footbar2.vue.js

@@ -0,0 +1,4 @@
+import f from "./Footbar.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/footbar/FootbarButtons.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent as l, openBlock as a, createElementBlock as m, Fragment as u, renderList as k, createBlock as n, withCtx as p, resolveDynamicComponent as f, createCommentVNode as _, createTextVNode as C, toDisplayString as x } from "vue";
+import y from "../../primitives/button/Button.vue.js";
+const h = /* @__PURE__ */ l({
+  __name: "FootbarButtons",
+  props: {
+    buttons: { default: () => [] }
+  },
+  emits: ["click-button"],
+  setup(r, { emit: o }) {
+    const c = o;
+    function s(t, i) {
+      const e = t.onClick?.(i);
+      return c("click-button", t, i), e;
+    }
+    return (t, i) => (a(!0), m(u, null, k(r.buttons, (e) => (a(), n(y, {
+      key: e.id,
+      variant: e.variant ?? "secondary",
+      size: e.size ?? "md",
+      disabled: e.disabled,
+      "data-button-id": e.id,
+      onClick: (d) => s(e, d)
+    }, {
+      default: p(() => [
+        e.icon ? (a(), n(f(e.icon), {
+          key: 0,
+          class: "size-4",
+          "aria-hidden": "true"
+        })) : _("", !0),
+        C(" " + x(e.text), 1)
+      ]),
+      _: 2
+    }, 1032, ["variant", "size", "disabled", "data-button-id", "onClick"]))), 128));
+  }
+});
+export {
+  h as default
+};

package/dist/modules/components/composite/footbar/FootbarButtons2.vue.js

@@ -0,0 +1,4 @@
+import f from "./FootbarButtons.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/footbar/types.js

@@ -0,0 +1,18 @@
+function e(o) {
+  return o.region ?? "right";
+}
+function n(o) {
+  return o.map((t, r) => ({ button: t, index: r })).filter((t) => !!t.button.text).sort((t, r) => (t.button.order ?? 0) - (r.button.order ?? 0) || t.index - r.index).map((t) => t.button);
+}
+function i(o) {
+  const t = n(o);
+  return {
+    left: t.filter((r) => e(r) === "left"),
+    center: t.filter((r) => e(r) === "center"),
+    right: t.filter((r) => e(r) === "right")
+  };
+}
+export {
+  i as groupFootbarButtons,
+  n as sortFootbarButtons
+};

package/dist/modules/components/composite/form/Form.vue.js

@@ -0,0 +1,121 @@
+import { defineComponent as I, useTemplateRef as k, computed as a, shallowReactive as v, provide as U, reactive as $, openBlock as z, createElementBlock as B, withModifiers as G, normalizeStyle as H, renderSlot as K } from "vue";
+import { useElementWidth as V } from "../../../composables/elementWidth.js";
+import { useProps as X } from "../../../composables/configCascade.js";
+import { DEFAULT_FIELD_WIDTH as g } from "../../../lib/fieldWidth.js";
+import { usePhone as Y } from "../../../composables/phone.js";
+import { FORM_STACK_BELOW as j, FORM_CONTEXT_KEY as q } from "./context.js";
+const J = ["data-layout-direction"], Q = "16px", ae = /* @__PURE__ */ I({
+  __name: "Form",
+  props: {
+    rules: {},
+    direction: {},
+    spacing: {},
+    fieldWidth: {},
+    validateMessageDisplayMode: {},
+    labelWidth: {}
+  },
+  emits: ["submit", "validated"],
+  setup(x, { expose: y, emit: _ }) {
+    const u = x, c = _, r = X("form", u, {
+      rules: {},
+      direction: "auto",
+      spacing: "auto",
+      fieldWidth: g,
+      validateMessageDisplayMode: "popup"
+    }), d = k("root"), f = V(d), p = a(() => r.value.direction === "vertical" || r.value.direction === "auto" && f.value > 0 && f.value < j ? "vertical" : "horizontal"), h = { none: 0, dense: 4, compact: 6, regular: 8, relaxed: 12 }, O = Y(), D = a(() => {
+      const e = r.value.spacing ?? "auto";
+      return typeof e == "number" ? `${e}px` : e === "auto" && O.value ? Q : e === "auto" ? p.value === "horizontal" ? "var(--ui-field-gap)" : "calc(var(--ui-field-gap) + 2px)" : `${h[e]}px`;
+    }), F = a(() => ({
+      display: "flex",
+      flexDirection: "column",
+      "--ui-form-gap": D.value,
+      gap: "var(--ui-form-gap)",
+      ...u.labelWidth ? { "--ui-label-column": `min(${u.labelWidth}, 40%)` } : {}
+    })), o = v([]);
+    function T(e) {
+      o.includes(e) || o.push(e);
+    }
+    function M(e) {
+      const t = o.indexOf(e);
+      t >= 0 && o.splice(t, 1);
+    }
+    const l = v([]);
+    function S(e, t) {
+      const i = e.element(), n = t.element();
+      return !i || !n || i === n ? 0 : i.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+    }
+    function E(e) {
+      l.includes(e) || (l.push(e), l.sort(S));
+    }
+    function W(e) {
+      const t = l.indexOf(e);
+      t >= 0 && l.splice(t, 1);
+    }
+    const m = () => l.filter((e) => e.active());
+    function b(e) {
+      const t = m();
+      if (t.includes(e))
+        return t.at(-1) === e ? "done" : "next";
+    }
+    function C(e) {
+      const t = m(), i = t.indexOf(e);
+      return i < 0 ? void 0 : t[i + 1]?.element() ?? void 0;
+    }
+    U(
+      q,
+      $({
+        rules: a(() => r.value.rules ?? {}),
+        // Preserve auto so every item measures its own available width. The
+        // container's resolved direction only controls its automatic spacing.
+        direction: a(() => r.value.direction),
+        spacing: a(() => r.value.spacing ?? "auto"),
+        fieldWidth: a(() => r.value.fieldWidth ?? g),
+        validateMessageDisplayMode: a(() => r.value.validateMessageDisplayMode ?? "popup"),
+        registerField: T,
+        unregisterField: M,
+        registerTextControl: E,
+        unregisterTextControl: W,
+        enterKeyHint: b,
+        nextTextControl: C
+      })
+    );
+    async function P(e = null, t = {}) {
+      const i = await Promise.all(
+        [...o].map(async (s) => ({ error: await s.validate(e) ?? void 0, field: s }))
+      ), n = i.every((s) => !s.error);
+      return !n && t.autoScroll !== !1 && i.find((s) => s.error)?.field.ensureVisible(), c("validated", { valid: n, errResults: i }), n;
+    }
+    async function R(e) {
+      const t = o.find((n) => n.prop === e);
+      if (!t) return !0;
+      const i = await t.validate(null);
+      return c("validated", { valid: !i, errResults: [{ error: i ?? void 0, field: t }] }), !i;
+    }
+    function L() {
+      for (const e of [...o]) e.resetField();
+    }
+    function N() {
+      for (const e of o) e.commit();
+    }
+    function w() {
+      return o.some((e) => e.isDirty());
+    }
+    function A(e) {
+      c("submit", e);
+    }
+    return y({ fields: o, validate: P, validateField: R, resetFields: L, commit: N, isDirty: w }), (e, t) => (z(), B("form", {
+      ref_key: "root",
+      ref: d,
+      style: H(F.value),
+      "data-ui-form": "",
+      "data-layout-direction": p.value,
+      "data-syno-pkg-land-ui": "",
+      onSubmit: G(A, ["prevent"])
+    }, [
+      K(e.$slots, "default")
+    ], 44, J));
+  }
+});
+export {
+  ae as default
+};

package/dist/modules/components/composite/form/Form2.vue.js

@@ -0,0 +1,4 @@
+import f from "./Form.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/form/FormGroup.vue.js

@@ -0,0 +1,25 @@
+import { defineComponent as r, computed as n, provide as s, reactive as p, openBlock as u, createElementBlock as c, normalizeStyle as m, renderSlot as f } from "vue";
+import { useFormGroup as b, FORM_GROUP_KEY as v } from "../../../composables/formGroup.js";
+const _ = ["disabled", "data-disabled"], k = /* @__PURE__ */ r({
+  __name: "FormGroup",
+  props: {
+    indent: { default: 1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(o) {
+    const e = o, t = b(), a = n(() => typeof e.indent == "number" ? `calc(${e.indent} * var(--ui-form-group-indent, 28px))` : e.indent), l = n(() => t ? `calc(${t.indent} + ${a.value})` : a.value), d = n(() => e.disabled || t?.disabled === !0);
+    return s(v, p({ disabled: d, indent: l })), (i, y) => (u(), c("fieldset", {
+      class: "m-0 min-w-0 border-0 p-0",
+      style: m({ paddingInlineStart: a.value }),
+      disabled: d.value || void 0,
+      "data-disabled": d.value || void 0,
+      "data-ui-form-group": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      f(i.$slots, "default")
+    ], 12, _));
+  }
+});
+export {
+  k as default
+};

package/dist/modules/components/composite/form/FormGroup2.vue.js

@@ -0,0 +1,4 @@
+import f from "./FormGroup.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/form/FormItem.vue.js

@@ -0,0 +1,329 @@
+import { defineComponent as Ce, useSlots as Se, useTemplateRef as $e, useId as Ie, ref as u, computed as l, onMounted as Oe, onBeforeUnmount as ze, reactive as Te, provide as We, openBlock as g, createElementBlock as h, normalizeClass as x, unref as r, normalizeStyle as N, createElementVNode as _, renderSlot as V, createTextVNode as G, toDisplayString as K, createCommentVNode as C } from "vue";
+import { useUiText as _e } from "../../../i18n/text.js";
+import { useElementWidth as qe } from "../../../composables/elementWidth.js";
+import { resolveFieldWidth as Ee } from "../../../lib/fieldWidth.js";
+import { cn as Y } from "../../../lib/cn.js";
+import { useProps as Le, isPlainObject as de } from "../../../composables/configCascade.js";
+import { useFormGroup as Ae } from "../../../composables/formGroup.js";
+import { useFormContext as je, FORM_STACK_BELOW as Re, FORM_FIELD_KEY as Pe } from "./context.js";
+import { validateWithRules as Ue, normalizeRules as ve } from "./rules.js";
+const Ne = ["data-direction", "data-inset", "data-status"], Ge = ["id", "for"], Ke = {
+  key: 0,
+  class: "ml-0.5 text-[var(--ui-danger)]",
+  "aria-hidden": "true"
+}, Ye = { class: "flex items-start gap-2" }, He = {
+  key: 0,
+  class: "flex min-h-[var(--ui-control-md)] shrink-0 items-center",
+  "data-field-after": ""
+}, Je = ["id"], Qe = ["id"], rt = /* @__PURE__ */ Ce({
+  __name: "FormItem",
+  props: {
+    modelValue: {},
+    prop: {},
+    label: { type: [String, Boolean] },
+    description: {},
+    help: {},
+    rules: {},
+    requiredMark: { type: Boolean, default: void 0 },
+    disableLabel: { type: Boolean, default: void 0 },
+    disableDescription: { type: Boolean, default: void 0 },
+    disableControl: { type: Boolean, default: void 0 },
+    disableValidation: { type: Boolean, default: void 0 },
+    validateDisabledField: { type: Boolean, default: void 0 },
+    hideValidateMessage: { type: Boolean, default: void 0 },
+    hideValidateStatusCls: { type: Boolean, default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
+    validateStatus: {},
+    validateMessageDisplayMode: {},
+    defaultValidateTrigger: {},
+    immediateValidate: { type: Boolean, default: void 0 },
+    textOnly: { type: Boolean, default: void 0 },
+    indent: {},
+    inset: { type: Boolean },
+    direction: {},
+    labelWidth: {},
+    fieldWidth: {},
+    initialValue: {}
+  },
+  emits: ["update:modelValue", "validating", "validated"],
+  setup(ce, { expose: pe, emit: fe }) {
+    const me = _e(), o = ce, q = fe, a = Le("form-item", o, {
+      label: "",
+      description: "",
+      help: "",
+      rules: [],
+      requiredMark: !1,
+      disableLabel: !1,
+      disableDescription: !1,
+      disableControl: !1,
+      disableValidation: !1,
+      validateDisabledField: !1,
+      hideValidateMessage: !1,
+      hideValidateStatusCls: !1,
+      disabled: !1,
+      validateStatus: "",
+      validateMessageDisplayMode: "form",
+      defaultValidateTrigger: "blur",
+      immediateValidate: !1,
+      textOnly: !1,
+      indent: 0,
+      inset: !1,
+      labelWidth: "var(--ui-label-column)"
+    }), f = je(), M = Ae(), H = Se(), S = $e("root"), $ = Ie(), s = {
+      control: `form-item-${$}-control`,
+      label: `form-item-${$}-label`,
+      description: `form-item-${$}-description`,
+      message: `form-item-${$}-message`
+    }, m = u(s.control), b = u([]), I = l(() => o.modelValue !== void 0), E = u(o.initialValue), L = l(() => I.value ? o.modelValue : E.value);
+    function be(e, t) {
+      if (Object.is(e, t)) return !0;
+      if (Array.isArray(e) && Array.isArray(t))
+        return e.length === t.length && e.every((i, n) => Object.is(i, t[n]));
+      if (de(e) && de(t)) {
+        const i = Object.keys(e);
+        return i.length === Object.keys(t).length && i.every((n) => Object.is(e[n], t[n]));
+      }
+      return !1;
+    }
+    const A = u(
+      o.initialValue !== void 0 ? o.initialValue : I.value ? o.modelValue : void 0
+    ), J = l(() => !be(L.value, A.value));
+    function Q(e) {
+      I.value || (E.value = e);
+    }
+    function ye(e) {
+      A.value = e;
+    }
+    function X() {
+      A.value = L.value;
+    }
+    const k = u(""), O = u(""), v = u(""), z = u(""), Z = u(!1), c = u(!1), F = l(() => o.disabled === !0 || Z.value || M?.disabled === !0), B = l(() => z.value || a.value.validateStatus || k.value), p = l(() => B.value === "error"), ge = l(() => v.value || O.value || a.value.help), T = l(() => v.value ? v.value : p.value && !a.value.hideValidateMessage && O.value || a.value.help), ee = qe(S, { observeFirst: !0 }), te = l(() => ee.value > 0 && ee.value < Re), y = l(() => {
+      const e = a.value.direction ?? f?.direction ?? "auto";
+      return e === "auto" ? te.value ? "vertical" : "horizontal" : e;
+    }), d = l(() => {
+      const e = a.value.validateMessageDisplayMode ?? "form";
+      return e === "form" ? f?.validateMessageDisplayMode ?? "popup" : e;
+    }), j = l(() => a.value.label !== !1 && (!!a.value.label || !!H.label)), R = l(() => !!a.value.description || !!H.description), ae = l(() => {
+      const e = [];
+      return R.value && e.push(s.description), T.value && e.push(s.message), e.length ? e.join(" ") : void 0;
+    }), he = l(() => {
+      const e = y.value === "vertical" ? { display: "flex", flexDirection: "column", gap: "var(--ui-space-1)" } : { display: "flex", alignItems: "flex-start", columnGap: "var(--ui-label-gap)" }, t = a.value.indent ?? 0;
+      if (t && (e.paddingLeft = typeof t == "number" ? `${t * 28}px` : t), a.value.inset && !j.value && y.value === "horizontal") {
+        const i = `calc(${a.value.labelWidth ?? "var(--ui-label-column)"} + var(--ui-label-gap))`;
+        e.paddingLeft = M ? `max(0px, calc(${i} - ${M.indent}))` : i;
+      }
+      return e;
+    }), xe = l(() => ({
+      maxWidth: Ee(o.fieldWidth ?? f?.fieldWidth, te.value && y.value === "vertical")
+    })), Ve = l(() => {
+      if (y.value === "vertical") return;
+      const e = a.value.labelWidth ?? "var(--ui-label-column)";
+      return { width: M ? `max(0px, calc(${e} - ${M.indent}))` : e };
+    }), Me = l(() => {
+      const e = p.value ? "text-[var(--ui-danger)]" : B.value === "warning" ? "text-[var(--ui-warning)]" : B.value === "success" ? "text-[var(--ui-success)]" : "text-[var(--ui-text-secondary)]";
+      return d.value === "text" ? Y("mt-1 text-[length:var(--ui-font-size-sm)] leading-4", e) : Y(
+        "absolute left-0 top-full z-[1100] mt-1 max-w-[min(100%,20rem)] rounded-[var(--ui-radius-popover)] px-3 py-2 text-[length:var(--ui-font-size-sm)] leading-4 shadow-[var(--ui-shadow-menu)]",
+        p.value ? "bg-[var(--ui-danger-hover)] text-[var(--ui-danger-foreground)]" : "bg-[var(--ui-tooltip-bg)] text-[var(--ui-tooltip-fg)]",
+        "transition-opacity duration-[var(--ui-motion-fast)]",
+        c.value ? "opacity-100" : "pointer-events-none opacity-0"
+      );
+    }), ke = { afterItem: "shrink-0 self-center" };
+    function Fe() {
+      const e = ve(a.value.rules), t = o.prop, i = t ? ve(f?.rules?.[t]) : [];
+      return [...e, ...i];
+    }
+    let P = 0;
+    async function D(e = null) {
+      if (a.value.disableValidation || F.value && !a.value.validateDisabledField) return null;
+      const t = Fe();
+      if (!t.length) return null;
+      const i = ++P;
+      k.value = "validating", q("validating");
+      const n = await Ue(L.value, t, {
+        trigger: e,
+        defaultTrigger: a.value.defaultValidateTrigger,
+        text: me
+      });
+      return i !== P || (O.value = n ?? "", k.value = n ? "error" : "success", n && d.value === "popup" && (c.value = !0), q("validated", { message: n ?? "", status: k.value })), n;
+    }
+    async function le(e = null) {
+      return !await D(e);
+    }
+    function ie() {
+      D("blur");
+    }
+    function oe() {
+      D("change");
+    }
+    function w(e) {
+      e !== void 0 && (v.value = e), c.value = !0;
+    }
+    function W() {
+      c.value = !1;
+    }
+    function Be(e, t = "error") {
+      v.value = e, z.value = t, d.value === "popup" && (c.value = !0);
+    }
+    function De() {
+      v.value = "", z.value = "", c.value = !1;
+    }
+    function ne(e) {
+      Z.value = e;
+    }
+    function se() {
+      P++, k.value = "", O.value = "", v.value = "", z.value = "", c.value = !1, o.initialValue !== void 0 && (I.value ? q("update:modelValue", o.initialValue) : E.value = o.initialValue);
+    }
+    function re() {
+      const e = S.value;
+      e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "center", behavior: "smooth" });
+    }
+    const ue = {
+      prop: o.prop ?? "",
+      validate: D,
+      resetField: se,
+      commit: X,
+      isDirty: () => J.value,
+      ensureVisible: re
+    };
+    Oe(() => {
+      f?.registerField(ue), a.value.immediateValidate && D(null);
+    }), ze(() => f?.unregisterField(ue));
+    const U = Te({
+      controlId: m,
+      defaultControlId: s.control,
+      claimControl: (e) => (b.value.push(e), b.value[0] === e),
+      isPrimaryControl: (e) => b.value[0] === e,
+      releaseControl: (e) => {
+        b.value[0] === e && (m.value = s.control), b.value = b.value.filter((t) => t !== e);
+      },
+      labelId: l(() => j.value ? s.label : void 0),
+      setControlId: (e) => {
+        m.value = e;
+      },
+      descriptionId: l(() => R.value ? s.description : void 0),
+      messageId: l(() => T.value ? s.message : void 0),
+      describedBy: ae,
+      required: l(() => a.value.requiredMark === !0),
+      disabled: F,
+      invalid: p,
+      status: B,
+      message: ge,
+      validate: le,
+      showPopup: w,
+      hidePopup: W,
+      setValue: Q,
+      setDisabled: ne,
+      onBlur: ie,
+      onChange: oe,
+      controlProps: l(() => ({
+        id: m.value,
+        "aria-describedby": ae.value,
+        "aria-invalid": p.value || void 0,
+        "aria-required": a.value.requiredMark || void 0,
+        onBlur: ie,
+        onInput: oe
+      }))
+    });
+    We(Pe, U);
+    function we() {
+      if (a.value.textOnly || F.value) return;
+      const e = [...S.value?.querySelectorAll("[id]") ?? []].find((n) => n.id === m.value);
+      if (!e) return;
+      const t = e.querySelector('[tabindex="0"], input:not([type="hidden"]):not(:disabled), button:not(:disabled)');
+      (e.matches('[role="radiogroup"], [role="grid"]') ? t : e.matches("input, button, select, textarea, [tabindex]") ? e : t)?.focus();
+    }
+    return pe({
+      validate: le,
+      resetField: se,
+      commit: X,
+      isDirty: J,
+      setInvalid: Be,
+      resetInvalid: De,
+      showPopup: w,
+      hidePopup: W,
+      setFieldValue: Q,
+      setInitValue: ye,
+      setFieldDisabled: ne,
+      ensureVisible: re
+    }), (e, t) => (g(), h("div", {
+      ref_key: "root",
+      ref: S,
+      "data-form-item": "",
+      "data-direction": y.value,
+      "data-inset": r(a).inset ? "" : void 0,
+      style: N(he.value),
+      class: x(r(Y)("min-w-0", p.value && !r(a).hideValidateStatusCls && "has-error")),
+      "data-status": B.value || void 0,
+      "data-syno-pkg-land-ui": "",
+      onMouseenter: t[1] || (t[1] = (i) => d.value === "popup" && w()),
+      onMouseleave: t[2] || (t[2] = (i) => d.value === "popup" && W()),
+      onFocusin: t[3] || (t[3] = (i) => d.value === "popup" && w()),
+      onFocusout: t[4] || (t[4] = (i) => d.value === "popup" && W())
+    }, [
+      j.value ? (g(), h("div", {
+        key: 0,
+        "data-form-label": "",
+        style: N(Ve.value),
+        class: x([
+          "min-w-0 shrink-0 break-words [word-break:keep-all] text-[length:var(--ui-font-size-control)] leading-5 text-[var(--ui-text)]",
+          y.value === "horizontal" ? "pt-[var(--ui-label-offset)] text-left" : void 0,
+          r(a).disableLabel || F.value ? "opacity-40" : void 0
+        ]),
+        onClick: t[0] || (t[0] = (i) => d.value === "popup" && p.value && w())
+      }, [
+        _("label", {
+          id: s.label,
+          for: r(a).textOnly ? void 0 : m.value,
+          onClick: we
+        }, [
+          V(e.$slots, "label", {}, () => [
+            G(K(r(a).label), 1)
+          ]),
+          r(a).requiredMark ? (g(), h("span", Ke, "*")) : C("", !0)
+        ], 8, Ge)
+      ], 6)) : C("", !0),
+      _("div", {
+        class: x(["relative min-w-0 flex-1", r(a).disableControl ? "opacity-40" : void 0])
+      }, [
+        _("div", Ye, [
+          V(e.$slots, "before"),
+          _("div", {
+            class: x(["min-w-0 flex-1", r(a).textOnly && "py-1 break-words text-[length:var(--ui-font-size-control)] leading-5 text-[var(--ui-text)]"]),
+            "data-field-control": "",
+            style: N(xe.value)
+          }, [
+            V(e.$slots, "default", { field: U })
+          ], 6),
+          e.$slots.after ? (g(), h("div", He, [
+            V(e.$slots, "after", { classes: ke })
+          ])) : C("", !0)
+        ]),
+        R.value ? (g(), h("div", {
+          key: 0,
+          id: s.description,
+          class: x([
+            "mt-1 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]",
+            r(a).disableDescription || F.value ? "opacity-40" : void 0
+          ])
+        }, [
+          V(e.$slots, "description", {}, () => [
+            G(K(r(a).description), 1)
+          ])
+        ], 10, Je)) : C("", !0),
+        T.value ? (g(), h("div", {
+          key: 1,
+          id: s.message,
+          role: "alert",
+          class: x(Me.value)
+        }, [
+          V(e.$slots, "status", { field: U }, () => [
+            G(K(T.value), 1)
+          ])
+        ], 10, Qe)) : C("", !0)
+      ], 2)
+    ], 46, Ne));
+  }
+});
+export {
+  rt as default
+};

package/dist/modules/components/composite/form/FormItem2.vue.js

@@ -0,0 +1,4 @@
+import f from "./FormItem.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/form/context.js

@@ -0,0 +1,15 @@
+import { inject as n } from "vue";
+const l = 400, o = /* @__PURE__ */ Symbol("syno-pkg-land-ui:form"), t = /* @__PURE__ */ Symbol("syno-pkg-land-ui:form-field");
+function u() {
+  return n(o, null);
+}
+function e() {
+  return n(t, null);
+}
+export {
+  o as FORM_CONTEXT_KEY,
+  t as FORM_FIELD_KEY,
+  l as FORM_STACK_BELOW,
+  u as useFormContext,
+  e as useFormField
+};

package/dist/modules/components/composite/form/rules.js

@@ -0,0 +1,101 @@
+import { translateUiText as m } from "../../../i18n/text.js";
+const u = "blur", g = {
+  string: "Value must be a string",
+  number: "Value must be a number",
+  integer: "Value must be an integer",
+  boolean: "Value must be a boolean",
+  array: "Value must be an array",
+  email: "Value must be a valid email address",
+  url: "Value must be a valid URL",
+  date: "Value must be a valid date"
+};
+function y(t) {
+  return t ? Array.isArray(t) ? [...t] : [t] : [];
+}
+function d(t, r) {
+  return t == null ? !0 : r === "array" || Array.isArray(t) ? Array.isArray(t) && t.length === 0 : typeof t == "string" ? t.trim() === "" : !1;
+}
+function b(t) {
+  if (typeof t == "string" || Array.isArray(t)) return t.length;
+  if (typeof t == "number") return t;
+  if (t instanceof Date) return t.getTime();
+}
+function l(t, r) {
+  switch (r) {
+    case "string":
+      return typeof t == "string";
+    case "number":
+      return typeof t == "number" && Number.isFinite(t);
+    case "integer":
+      return typeof t == "number" && Number.isInteger(t);
+    case "boolean":
+      return typeof t == "boolean";
+    case "array":
+      return Array.isArray(t);
+    case "email":
+      return typeof t == "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t);
+    case "url":
+      if (typeof t != "string") return !1;
+      try {
+        return new URL(t), !0;
+      } catch {
+        return !1;
+      }
+    case "date":
+      return t instanceof Date && !Number.isNaN(t.getTime());
+  }
+}
+function p(t) {
+  return typeof t == "object" && t !== null && typeof t.then == "function";
+}
+function c(t, r) {
+  return t instanceof Error ? t.message : typeof t == "string" ? t : r("Value does not match the expected format");
+}
+async function h(t, r, e) {
+  const a = t.validator ?? t.asyncValidator;
+  if (!a) return null;
+  let n = null, o = !1;
+  const f = (s) => {
+    o = !0, n = s == null ? null : c(s, e);
+  };
+  let i;
+  try {
+    i = a(t, r, f);
+  } catch (s) {
+    return o ? n : c(s, e);
+  }
+  if (p(i))
+    try {
+      const s = await i;
+      o || (n = s === !0 || s === void 0 || s === null ? null : c(s, e));
+    } catch (s) {
+      o || (n = c(s, e));
+    }
+  else !o && i !== void 0 && i !== !0 && (n = i === !1 ? t.message ?? e("Value does not match the expected format") : c(i, e));
+  return n;
+}
+async function V(t, r, e) {
+  const a = t.transform ? t.transform(r) : r;
+  if (d(a, t.type))
+    return t.required ? t.message ?? e("Value is required") : null;
+  if (t.type && !l(a, t.type)) return t.message ?? e(g[t.type]);
+  const n = b(a);
+  return t.len !== void 0 && n !== t.len ? t.message ?? e("Value must be exactly {len} characters", { len: t.len }) : t.min !== void 0 && n !== void 0 && n < t.min ? t.message ?? e("Value must be at least {min}", { min: t.min }) : t.max !== void 0 && n !== void 0 && n > t.max ? t.message ?? e("Value must be at most {max}", { max: t.max }) : t.pattern && (t.pattern.lastIndex = 0, !t.pattern.test(String(a))) ? t.message ?? e("Value does not match the expected format") : t.enum && !t.enum.includes(a) ? t.message ?? e("Value is not one of the allowed options") : h(t, a, e);
+}
+function A(t, r) {
+  return t.trigger ? Array.isArray(t.trigger) ? t.trigger : [t.trigger] : [r];
+}
+async function T(t, r, e = {}) {
+  const a = e.defaultTrigger ?? u, n = e.trigger ?? null, o = e.text ?? ((f, i) => m("en", f, i));
+  for (const f of y(r)) {
+    if (n !== null && !A(f, a).includes(n)) continue;
+    const i = await V(f, t, o);
+    if (i) return i;
+  }
+  return null;
+}
+export {
+  d as isEmptyValue,
+  y as normalizeRules,
+  T as validateWithRules
+};