@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/primitives/progress/Progress.vue.js

@@ -0,0 +1,66 @@
+import { defineComponent as b, useAttrs as y, computed as h, openBlock as t, createElementBlock as n, normalizeStyle as d, unref as o, normalizeClass as i, createElementVNode as m, toDisplayString as c, createCommentVNode as v, mergeProps as x } from "vue";
+const w = {
+  key: 0,
+  class: "mb-2 flex justify-between gap-3 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, k = {
+  key: 0,
+  "data-ui-progress-value": "",
+  class: "tabular-nums"
+}, L = ["aria-valuenow", "aria-valuemax", "aria-label", "data-tone", "data-indeterminate"], C = /* @__PURE__ */ b({
+  inheritAttrs: !1,
+  __name: "Progress",
+  props: {
+    value: { default: 0 },
+    max: { default: 100 },
+    label: {},
+    valueLabel: {},
+    tone: { default: "primary" },
+    size: { default: "md" },
+    indeterminate: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const l = y(), f = () => Object.fromEntries(Object.entries(l).filter(([r]) => r !== "class" && r !== "style")), a = e, s = {
+      primary: "bg-[var(--ui-primary)]",
+      success: "bg-[var(--ui-success)]",
+      warning: "bg-[var(--ui-warning)]",
+      danger: "bg-[var(--ui-danger)]"
+    }, g = {
+      primary: "bg-[var(--ui-primary-soft)]",
+      success: "bg-[var(--ui-success-soft)]",
+      warning: "bg-[var(--ui-warning-soft)]",
+      danger: "bg-[var(--ui-danger-soft)]"
+    }, u = h(() => a.max <= 0 ? 0 : Math.min(100, Math.max(0, a.value / a.max * 100)));
+    return (r, z) => (t(), n("div", {
+      class: i(o(l).class),
+      style: d(o(l).style),
+      "data-syno-pkg-land-ui": ""
+    }, [
+      e.label || e.valueLabel ? (t(), n("div", w, [
+        m("span", null, c(e.label), 1),
+        e.valueLabel !== void 0 || !e.indeterminate ? (t(), n("span", k, c(e.valueLabel ?? `${Math.round(u.value)}%`), 1)) : v("", !0)
+      ])) : v("", !0),
+      m("div", x({
+        class: ["overflow-hidden rounded-full", g[e.tone], e.size === "sm" ? "h-1" : "h-1.5"],
+        role: "progressbar",
+        "aria-valuenow": e.indeterminate ? void 0 : a.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": a.max,
+        "aria-label": e.label,
+        "data-tone": e.tone,
+        "data-indeterminate": e.indeterminate ? "" : void 0
+      }, f()), [
+        e.indeterminate ? (t(), n("div", {
+          key: 0,
+          class: i(["ui-progress-indeterminate h-full rounded-full", s[e.tone]])
+        }, null, 2)) : (t(), n("div", {
+          key: 1,
+          class: i(["h-full rounded-full transition-[width] duration-[var(--ui-motion-normal)]", s[e.tone]]),
+          style: d({ width: `${u.value}%` })
+        }, null, 6))
+      ], 16, L)
+    ], 6));
+  }
+});
+export {
+  C as default
+};

package/dist/modules/components/primitives/progress/Progress2.vue.js

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

package/dist/modules/components/primitives/radio-group/RadioGroup.vue.js

@@ -0,0 +1,79 @@
+import { defineComponent as k, openBlock as i, createBlock as l, unref as r, mergeProps as y, withCtx as n, createElementBlock as o, Fragment as _, renderList as z, normalizeClass as d, createVNode as u, createElementVNode as v, resolveDynamicComponent as w, createCommentVNode as m, toDisplayString as p } from "vue";
+import { useGroupDisabled as V } from "../../../composables/formGroup.js";
+import { useFormControl as C } from "../../../composables/formControl.js";
+import { RadioGroupRoot_default as G } from "../../../vendor/reka-ui/dist/RadioGroup/RadioGroupRoot.js";
+import { RadioGroupItem_default as R } from "../../../vendor/reka-ui/dist/RadioGroup/RadioGroupItem.js";
+import { RadioGroupIndicator_default as B } from "../../../vendor/reka-ui/dist/RadioGroup/RadioGroupIndicator.js";
+const D = ["data-ui-choice-card", "data-state", "data-disabled"], q = { class: "min-w-0 flex-1 break-words" }, A = {
+  key: 0,
+  class: "ui-choice-card-icon mb-[var(--ui-space-2)] flex size-8 items-center justify-center rounded-[var(--ui-radius-control)]",
+  "data-ui-choice-card-icon": "",
+  "aria-hidden": "true"
+}, P = /* @__PURE__ */ k({
+  inheritAttrs: !1,
+  __name: "RadioGroup",
+  props: {
+    modelValue: {},
+    options: {},
+    orientation: { default: "vertical" },
+    disabled: { type: Boolean, default: !1 },
+    variant: { default: "default" }
+  },
+  emits: ["update:modelValue"],
+  setup(b, { emit: f }) {
+    const a = b, t = V(() => a.disabled), h = f, { controlAttrs: s, wrapperAttrs: g, changed: x } = C({ value: () => a.modelValue, disabled: () => t.value });
+    return (N, c) => (i(), l(r(G), y({
+      required: r(s)()["aria-required"] === !0
+    }, { ...r(g)(), ...r(s)() }, {
+      "model-value": a.modelValue,
+      disabled: r(t),
+      orientation: a.orientation,
+      class: a.variant === "card" ? a.orientation === "horizontal" ? "grid grid-cols-[repeat(auto-fit,minmax(min(100%,180px),1fr))] gap-[var(--ui-space-3)]" : "grid gap-[var(--ui-space-2)]" : a.orientation === "horizontal" ? "flex flex-wrap gap-x-[var(--ui-choice-inline-gap)] gap-y-3" : "grid gap-[var(--ui-choice-stack-gap)]",
+      "data-variant": a.variant,
+      "data-syno-pkg-land-ui": "",
+      "onUpdate:modelValue": c[0] || (c[0] = (e) => {
+        r(x)(e), h("update:modelValue", String(e ?? ""));
+      })
+    }), {
+      default: n(() => [
+        (i(!0), o(_, null, z(a.options, (e) => (i(), o("label", {
+          key: e.value,
+          class: d(["flex min-w-0 items-start gap-[var(--ui-choice-box-gap)] text-[length:var(--ui-font-size-control)] text-[var(--ui-text)]", [
+            r(t) || e.disabled ? "cursor-default text-[var(--ui-text-disabled)]" : "cursor-pointer",
+            a.variant === "card" ? "ui-choice-card relative rounded-[var(--ui-radius-panel)] border p-[var(--ui-space-3)] transition-[border-color,background-color,box-shadow] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)]" : "[@media(pointer:coarse)]:min-h-8 [@media(pointer:coarse)]:items-center"
+          ]]),
+          "data-ui-choice-card": a.variant === "card" ? "" : void 0,
+          "data-state": a.variant === "card" ? a.modelValue === e.value ? "checked" : "unchecked" : void 0,
+          "data-disabled": a.variant === "card" && (r(t) || e.disabled) ? "" : void 0
+        }, [
+          u(r(R), {
+            value: e.value,
+            disabled: e.disabled,
+            class: "group/radio mt-[var(--ui-choice-box-offset)] flex size-[var(--ui-choice-box-size)] shrink-0 items-center justify-center rounded-full border border-[var(--ui-border-strong)] aria-[invalid=true]:border-[var(--ui-danger)] bg-[var(--ui-surface)] outline-none transition-[border-color,box-shadow] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] data-[state=checked]:border-[var(--ui-primary)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:bg-[var(--ui-surface-subtle)] data-[disabled]:data-[state=checked]:opacity-50 data-[state=unchecked]:enabled:hover:border-[var(--ui-control-border-hover)] data-[state=unchecked]:enabled:active:bg-[var(--ui-control-bg-active)] data-[state=checked]:enabled:hover:border-[var(--ui-primary-hover)] data-[state=checked]:enabled:active:border-[var(--ui-primary-active)]"
+          }, {
+            default: n(() => [
+              u(r(B), { class: "size-[calc(var(--ui-choice-box-size)/2)] rounded-full bg-[var(--ui-primary)] group-data-[state=checked]/radio:group-enabled/radio:group-hover/radio:bg-[var(--ui-primary-hover)] group-data-[state=checked]/radio:group-enabled/radio:group-active/radio:bg-[var(--ui-primary-active)]" })
+            ]),
+            _: 1
+          }, 8, ["value", "disabled"]),
+          v("span", q, [
+            a.variant === "card" && e.icon ? (i(), o("span", A, [
+              (i(), l(w(e.icon), { class: "size-4" }))
+            ])) : m("", !0),
+            v("span", {
+              class: d(["block leading-[var(--ui-line-height)]", a.variant === "card" ? "font-semibold" : ""])
+            }, p(e.label), 3),
+            e.description ? (i(), o("span", {
+              key: 1,
+              class: d(["mt-0.5 block text-[length:var(--ui-font-size-sm)] leading-4", r(t) || e.disabled ? "text-[var(--ui-text-disabled)]" : "text-[var(--ui-text-secondary)]"])
+            }, p(e.description), 3)) : m("", !0)
+          ])
+        ], 10, D))), 128))
+      ]),
+      _: 1
+    }, 16, ["required", "model-value", "disabled", "orientation", "class", "data-variant"]));
+  }
+});
+export {
+  P as default
+};

package/dist/modules/components/primitives/radio-group/RadioGroup2.vue.js

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

package/dist/modules/components/primitives/refresh-bar/RefreshBar.vue.js

@@ -0,0 +1,64 @@
+import { defineComponent as v, ref as w, watch as b, onBeforeUnmount as k, openBlock as n, createElementBlock as l, createCommentVNode as u, unref as a, createElementVNode as D, toDisplayString as p, createBlock as L, withCtx as x, createTextVNode as B } from "vue";
+import g from "../button/Button.vue.js";
+import { useLocalizedDefaults as C } from "../../../i18n/text.js";
+const S = {
+  class: "ui-refresh-overlay",
+  "data-syno-pkg-land-ui": ""
+}, N = {
+  key: 0,
+  class: "ui-refresh-bar",
+  "aria-hidden": "true"
+}, T = ["title"], P = /* @__PURE__ */ v({
+  __name: "RefreshBar",
+  props: {
+    busy: { type: Boolean, default: !1 },
+    stale: { default: "" },
+    delay: { default: 300 },
+    minDuration: { default: 400 },
+    staleLabel: {},
+    retryLabel: {}
+  },
+  emits: ["retry"],
+  setup(y, { emit: h }) {
+    const e = C(y, {
+      staleLabel: "Could not refresh. Showing previous data",
+      retryLabel: "Retry"
+    }), _ = h, s = w(!1);
+    let o, d = 0, m = 0;
+    function c() {
+      o !== void 0 && clearTimeout(o), o = void 0;
+    }
+    return b(() => [e.busy, e.delay, e.minDuration], ([t], r) => {
+      if (c(), t && !r?.[0] && (d = Date.now()), t === s.value) return;
+      const i = t ? d + Math.max(0, e.delay) - Date.now() : m + Math.max(0, e.minDuration) - Date.now(), f = () => {
+        o = void 0, s.value = t, t && (m = Date.now());
+      };
+      i <= 0 ? f() : o = setTimeout(f, i);
+    }, { immediate: !0 }), k(c), (t, r) => (n(), l("div", S, [
+      s.value ? (n(), l("span", N)) : u("", !0),
+      a(e).stale ? (n(), l("span", {
+        key: 1,
+        class: "ui-refresh-stale",
+        title: a(e).stale
+      }, [
+        D("span", null, p(a(e).staleLabel), 1),
+        a(e).retryLabel ? (n(), L(g, {
+          key: 0,
+          kind: "tool",
+          size: "sm",
+          variant: "ghost",
+          disabled: a(e).busy,
+          onClick: r[0] || (r[0] = (i) => _("retry"))
+        }, {
+          default: x(() => [
+            B(p(a(e).retryLabel), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : u("", !0)
+      ], 8, T)) : u("", !0)
+    ]));
+  }
+});
+export {
+  P as default
+};

package/dist/modules/components/primitives/refresh-bar/RefreshBar2.vue.js

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

package/dist/modules/components/primitives/rich-text/RichText.vue.js

@@ -0,0 +1,55 @@
+import { defineComponent as p, computed as m, h as c } from "vue";
+import { cn as _ } from "../../../lib/cn.js";
+import { DEFAULT_ALLOW_ATTRS as y, DEFAULT_LINK_TAGS as d, DEFAULT_PARSE_TAGS as g, parseRichText as A } from "./parseRichText.js";
+const T = "cursor-pointer text-[var(--ui-primary)] underline underline-offset-2", L = p({
+  name: "RichText",
+  props: {
+    /** HTML string to parse and render. */
+    text: { type: String, default: "" },
+    /** Tag allowlist; tags outside it are removed while their content is kept. */
+    parseTags: { type: Array, default: () => g },
+    /** Tags treated as clickable links, reported through `click-link`. */
+    linkTags: { type: Array, default: () => d },
+    /** Attribute allowlist. `class` and `style` are always kept. */
+    allowAttrs: { type: Array, default: () => y }
+  },
+  emits: {
+    "click-link": (r, n, s) => typeof r == "string" && typeof n == "object" && !!s
+  },
+  setup(r, { emit: n }) {
+    const s = m(
+      () => A(r.text, {
+        parseTags: r.parseTags,
+        linkTags: r.linkTags,
+        allowAttrs: r.allowAttrs
+      })
+    );
+    function o(t, i) {
+      n("click-link", t.linkId ?? "", t.attrs, i);
+    }
+    function f(t, i) {
+      const a = u(t.children, i);
+      if (t.tag === "br") return c("br", { key: i });
+      const e = { ...t.attrs };
+      return t.link && (e.onClick = (l) => o(t, l), t.tag === "a" && (e.class = _(typeof e.class == "string" ? e.class : void 0, T), e.href || (e.role = "link", e.tabindex = 0, e.onKeydown = (l) => {
+        l.key !== "Enter" && l.key !== " " || (l.preventDefault(), o(t, l));
+      }))), c(t.tag, { key: i, ...e }, a);
+    }
+    function u(t, i) {
+      return t.map(
+        (a, e) => a.type === "text" ? a.value : f(a, `${i}-${e}`)
+      );
+    }
+    return () => c(
+      "div",
+      {
+        class: "text-[length:var(--ui-font-size)] leading-[var(--ui-line-height)] text-[var(--ui-text)] [&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-6 [&_ol]:pl-6 [&_ul]:my-1 [&_ol]:my-1 [&_li]:my-0.5 [&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
+        "data-syno-pkg-land-ui": ""
+      },
+      u(s.value, "n")
+    );
+  }
+});
+export {
+  L as default
+};

package/dist/modules/components/primitives/rich-text/RichText2.vue.js

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

package/dist/modules/components/primitives/rich-text/parseRichText.js

@@ -0,0 +1,71 @@
+const d = ["br", "li", "ul", "ol", "a", "span", "b", "p"], h = ["a", "span"], p = [], T = /* @__PURE__ */ new Set(["script", "style", "template"]), A = /* @__PURE__ */ new Set(["class", "style"]), S = /* @__PURE__ */ new Set(["href", "src", "xlink:href", "formaction", "action", "poster"]), E = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+function L(n) {
+  let e = "";
+  for (const o of n) {
+    const r = o.charCodeAt(0);
+    r > 32 && r !== 127 && (e += o);
+  }
+  return e;
+}
+function w(n) {
+  const e = L(n).toLowerCase(), o = e.indexOf(":");
+  if (o === -1) return !0;
+  const r = e.slice(0, o);
+  return /^[a-z][a-z0-9+.-]*$/.test(r) ? E.has(`${r}:`) : !0;
+}
+function i(n) {
+  return new Set(n.map((e) => e.toLowerCase()));
+}
+function _(n) {
+  return n.replace(/<[^>]*>/g, "");
+}
+function m(n, e) {
+  const o = {};
+  for (const { name: r, value: s } of Array.from(n.attributes)) {
+    const t = r.toLowerCase();
+    t.startsWith("on") || t !== "link-id" && (!A.has(t) && !e.has(t) || S.has(t) && !w(s) || (o[t] = s));
+  }
+  return o;
+}
+function f(n, e, o, r) {
+  const s = [];
+  for (const t of Array.from(n.childNodes)) {
+    if (t.nodeType === t.TEXT_NODE) {
+      s.push({ type: "text", value: t.nodeValue ?? "" });
+      continue;
+    }
+    if (t.nodeType !== t.ELEMENT_NODE) continue;
+    const c = t.tagName.toLowerCase();
+    if (T.has(c)) continue;
+    const a = f(t, e, o, r);
+    if (!e.has(c)) {
+      s.push(...a);
+      continue;
+    }
+    const u = t, l = u.getAttribute("link-id") ?? void 0;
+    s.push({
+      type: "element",
+      tag: c,
+      attrs: m(u, r),
+      link: o.has(c),
+      ...l !== void 0 ? { linkId: l } : {},
+      children: a
+    });
+  }
+  return s;
+}
+function y(n, e = {}) {
+  if (!n) return [];
+  const o = i(e.parseTags ?? d), r = i(e.linkTags ?? h), s = i(e.allowAttrs ?? p);
+  if (typeof DOMParser > "u")
+    return [{ type: "text", value: _(n) }];
+  const t = new DOMParser().parseFromString(n, "text/html");
+  return f(t.body, o, r, s);
+}
+export {
+  p as DEFAULT_ALLOW_ATTRS,
+  h as DEFAULT_LINK_TAGS,
+  d as DEFAULT_PARSE_TAGS,
+  w as isSafeRichTextUrl,
+  y as parseRichText
+};