@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/primitives/select/Select.vue.js

@@ -0,0 +1,272 @@
+import { defineComponent as te, ref as b, useTemplateRef as V, computed as g, reactive as ae, watchEffect as oe, watch as N, openBlock as l, createElementBlock as s, mergeProps as P, unref as e, createVNode as u, withCtx as n, toDisplayString as d, withDirectives as re, createElementVNode as L, vModelText as le, createCommentVNode as x, createBlock as v, Fragment as U, renderList as B, createTextVNode as O, normalizeClass as ne } from "vue";
+import { useGroupDisabled as ue } from "../../../composables/formGroup.js";
+import { useLocalizedDefaults as ie } from "../../../i18n/text.js";
+import { useFormControl as se } from "../../../composables/formControl.js";
+import { useFloating as de, FLOATING_SIZE_CLASS as ce, coarsePointer as pe } from "../popover/floating.js";
+import { ChevronDown as fe, Check as me } from "@lucide/vue";
+import { SelectRoot_default as ve } from "../../../vendor/reka-ui/dist/Select/SelectRoot.js";
+import { SelectContent_default as he } from "../../../vendor/reka-ui/dist/Select/SelectContent.js";
+import { SelectGroup_default as be } from "../../../vendor/reka-ui/dist/Select/SelectGroup.js";
+import { SelectIcon_default as ge } from "../../../vendor/reka-ui/dist/Select/SelectIcon.js";
+import { SelectItem_default as xe } from "../../../vendor/reka-ui/dist/Select/SelectItem.js";
+import { SelectItemIndicator_default as ye } from "../../../vendor/reka-ui/dist/Select/SelectItemIndicator.js";
+import { SelectItemText_default as we } from "../../../vendor/reka-ui/dist/Select/SelectItemText.js";
+import { SelectLabel_default as ke } from "../../../vendor/reka-ui/dist/Select/SelectLabel.js";
+import { SelectPortal_default as _e } from "../../../vendor/reka-ui/dist/Select/SelectPortal.js";
+import { SelectTrigger_default as Se } from "../../../vendor/reka-ui/dist/Select/SelectTrigger.js";
+import { SelectValue_default as Te } from "../../../vendor/reka-ui/dist/Select/SelectValue.js";
+import { SelectViewport_default as Ve } from "../../../vendor/reka-ui/dist/Select/SelectViewport.js";
+import { flattenGroups as K, normalizeOptions as Pe } from "./internal/options.js";
+import { useSelectSearch as Ce } from "./internal/useSelectSearch.js";
+import { useOverlayMotion as Ee, useOverlayLayer as Ie, keepEscapeForIme as ze } from "../popover/overlay.js";
+import { usePhoneSurface as De, accessibleName as Fe } from "../../../composables/phoneSurface.js";
+import Ae from "./internal/SelectSheet.vue.js";
+const qe = {
+  key: 0,
+  class: "block max-w-full truncate"
+}, Ne = {
+  key: 1,
+  class: "block max-w-full truncate"
+}, Le = {
+  key: 2,
+  class: "block max-w-full truncate"
+}, Ue = {
+  key: 0,
+  class: "mb-1 border-b border-[var(--ui-border-subtle)] pb-1"
+}, Be = ["placeholder", "aria-label"], Oe = {
+  key: 1,
+  class: "px-2 py-2 text-[length:var(--ui-font-size-control)] text-[var(--ui-text-muted)]",
+  "aria-live": "polite"
+}, Ke = { class: "min-w-0 truncate" }, Ge = {
+  key: 0,
+  class: "px-2 py-2 text-[length:var(--ui-font-size-control)] text-[var(--ui-text-muted)]",
+  "aria-live": "polite"
+}, pt = /* @__PURE__ */ te({
+  inheritAttrs: !1,
+  __name: "Select",
+  props: {
+    modelValue: {},
+    options: { default: () => [] },
+    placeholder: {},
+    disabled: { type: Boolean, default: !1 },
+    search: { type: [Boolean, Function], default: !1 },
+    minSearchChar: { default: 1 },
+    caseSensitive: { type: Boolean, default: !1 },
+    searchPlaceholder: {},
+    notFoundText: {},
+    loadingText: {},
+    motion: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(G, { emit: $ }) {
+    const C = G, y = ue(() => o.disabled), o = ie(C, { placeholder: "Select…", searchPlaceholder: "Search…", notFoundText: "No results", loadingText: "Loading…" }), E = $, c = b(""), i = b(!1), w = V("searchInput"), k = V("trigger"), I = V("viewport"), _ = g(() => o.search !== !1), p = b(!1), { groups: h, searching: z } = Ce({
+      options: () => o.options,
+      search: () => o.search,
+      query: c,
+      minSearchChar: () => o.minSearchChar,
+      caseSensitive: () => o.caseSensitive
+    }), S = ae(/* @__PURE__ */ new Map());
+    oe(() => {
+      for (const t of K(Pe(o.options))) S.set(t.value, t.label);
+      for (const t of K(h.value)) S.set(t.value, t.label);
+    });
+    const D = g(() => o.modelValue ? S.get(o.modelValue) ?? "" : "");
+    function M() {
+      const t = I.value?.$el;
+      return t ? Array.from(t.querySelectorAll('[role="option"]')).filter(
+        (r) => r.getAttribute("aria-disabled") !== "true"
+      ) : [];
+    }
+    function j(t) {
+      if (t.key === "Escape" || t.key === "Tab" || (t.stopPropagation(), t.key !== "ArrowDown" && t.key !== "ArrowUp" && t.key !== "Enter")) return;
+      const r = M();
+      if (r.length) {
+        if (t.preventDefault(), t.key === "Enter") {
+          p.value = !0;
+          const [a] = r;
+          a.focus(), a.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: !0, cancelable: !0 }));
+          return;
+        }
+        p.value = !0, r.at(t.key === "ArrowDown" ? 0 : -1)?.focus();
+      }
+    }
+    function R(t) {
+      !_.value || p.value || pe() || t.target !== w.value && w.value?.focus();
+    }
+    N(i, (t) => {
+      p.value = !1, t || (c.value = "");
+    });
+    const f = De({ list: !0 }), T = g(() => i.value && f.value === "popover"), Z = g(() => i.value && f.value === "sheet"), F = b("");
+    N(Z, (t) => {
+      t && (F.value = Fe(k.value?.$el) || o.placeholder);
+    });
+    function H(t) {
+      f.value === "sheet" && t.pointerType === "touch" && t.preventDefault();
+    }
+    function J() {
+      f.value === "sheet" && !y.value && (i.value = !0);
+    }
+    function Q(t) {
+      q(t), E("update:modelValue", t), i.value = !1;
+    }
+    const W = de(() => k.value?.$el, () => T.value), X = Ee(() => C.motion), Y = Ie(() => T.value, () => {
+      i.value = !1;
+    }), { controlAttrs: A, wrapperAttrs: ee, changed: q } = se({ value: () => o.modelValue, disabled: () => y.value });
+    return (t, r) => (l(), s("div", P(e(ee)(), {
+      class: "w-full min-w-[min(100%,8rem)]",
+      "data-syno-pkg-land-ui": ""
+    }), [
+      u(e(ve), {
+        required: e(A)()["aria-required"] === !0,
+        open: T.value,
+        "model-value": e(o).modelValue,
+        disabled: e(y),
+        "onUpdate:open": r[2] || (r[2] = (a) => i.value = a),
+        "onUpdate:modelValue": r[3] || (r[3] = (a) => {
+          e(q)(a), E("update:modelValue", String(a ?? ""));
+        })
+      }, {
+        default: n(() => [
+          u(e(Se), P({
+            ref_key: "trigger",
+            ref: k
+          }, e(A)(), {
+            onPointerupCapture: H,
+            onClick: J,
+            class: "flex h-[var(--ui-control-md)] w-full min-w-0 items-center justify-between gap-2 rounded-[var(--ui-radius-control)] border border-[var(--ui-border)] bg-[var(--ui-surface)] px-3 text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none transition-[border-color,box-shadow,background-color] duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] enabled:hover:not-focus:border-[var(--ui-control-border-hover)] aria-[invalid=true]:border-[var(--ui-danger)] aria-[invalid=true]:enabled:hover:not-focus:border-[var(--ui-danger)] focus:border-[var(--ui-primary)] focus:shadow-[var(--ui-shadow-focus)] disabled:cursor-default disabled:bg-[var(--ui-surface-subtle)] disabled:text-[var(--ui-text-disabled)]"
+          }), {
+            default: n(() => [
+              u(e(Te), {
+                class: "min-w-0 truncate text-left",
+                placeholder: e(o).placeholder
+              }, {
+                default: n(({ selectedLabel: a }) => [
+                  D.value ? (l(), s("span", qe, d(D.value), 1)) : a.length ? (l(), s("span", Ne, d(a.join(", ")), 1)) : (l(), s("span", Le, d(e(o).placeholder), 1))
+                ]),
+                _: 1
+              }, 8, ["placeholder"]),
+              u(e(ge), { class: "flex shrink-0 items-center text-[var(--ui-text-muted)]" }, {
+                default: n(() => [
+                  u(e(fe), {
+                    class: "size-4",
+                    "aria-hidden": "true"
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 16),
+          u(e(_e), null, {
+            default: n(() => [
+              u(e(he), P({ "data-ui-popup": "" }, { ...e(W), ...e(Y) }, {
+                "data-ui-popup-motion": e(X)() === "none" ? "none" : void 0,
+                position: "popper",
+                "side-offset": 4,
+                class: ["z-[1450] min-w-[min(var(--reka-select-trigger-width),var(--reka-popper-available-width))] overflow-hidden rounded-[var(--ui-radius-popover)] border border-[var(--ui-border-floating)] bg-[var(--ui-surface-raised)] p-1 shadow-[var(--ui-shadow-menu)]", e(ce)],
+                "data-syno-pkg-land-ui": "",
+                onEscapeKeyDown: e(ze),
+                onFocusin: R,
+                onPointerdown: r[1] || (r[1] = (a) => p.value = !0)
+              }), {
+                default: n(() => [
+                  _.value ? (l(), s("div", Ue, [
+                    re(L("input", {
+                      ref_key: "searchInput",
+                      ref: w,
+                      "onUpdate:modelValue": r[0] || (r[0] = (a) => c.value = a),
+                      type: "text",
+                      placeholder: e(o).searchPlaceholder,
+                      "aria-label": e(o).searchPlaceholder,
+                      class: "h-7 w-full rounded-[var(--ui-radius-control)] border border-[var(--ui-border)] bg-[var(--ui-surface)] px-2 text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none props.placeholder:text-[var(--ui-text-muted)] focus:border-[var(--ui-primary)]",
+                      "data-syno-pkg-land-ui-select-search": "",
+                      onKeydown: j
+                    }, null, 40, Be), [
+                      [le, c.value]
+                    ])
+                  ])) : x("", !0),
+                  e(z) ? (l(), s("div", Oe, d(e(o).loadingText), 1)) : (l(), v(e(Ve), {
+                    key: 2,
+                    ref_key: "viewport",
+                    ref: I
+                  }, {
+                    default: n(() => [
+                      (l(!0), s(U, null, B(e(h), (a) => (l(), v(e(be), {
+                        key: a.key
+                      }, {
+                        default: n(() => [
+                          a.label ? (l(), v(e(ke), {
+                            key: 0,
+                            class: "px-2 py-1 text-[length:var(--ui-font-size-sm)] font-semibold text-[var(--ui-text-muted)]"
+                          }, {
+                            default: n(() => [
+                              O(d(a.label), 1)
+                            ]),
+                            _: 2
+                          }, 1024)) : x("", !0),
+                          (l(!0), s(U, null, B(a.options, (m) => (l(), v(e(xe), {
+                            key: m.value,
+                            value: m.value,
+                            "text-value": m.label,
+                            disabled: m.disabled,
+                            class: ne(["relative flex h-[var(--ui-menu-row-height)] select-none items-center rounded-[var(--ui-radius-inner)] py-1 pr-8 text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none data-[highlighted]:bg-[var(--ui-neutral-soft)] data-[state=checked]:bg-[var(--ui-surface-selected)] data-[disabled]:opacity-40", a.label && a.indent ? "pl-4" : "pl-2"])
+                          }, {
+                            default: n(() => [
+                              L("span", Ke, [
+                                u(e(we), null, {
+                                  default: n(() => [
+                                    O(d(m.label), 1)
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              u(e(ye), { class: "absolute right-2 inline-flex items-center text-[var(--ui-primary)]" }, {
+                                default: n(() => [
+                                  u(e(me), {
+                                    class: "size-4",
+                                    "aria-hidden": "true"
+                                  })
+                                ]),
+                                _: 1
+                              })
+                            ]),
+                            _: 2
+                          }, 1032, ["value", "text-value", "disabled", "class"]))), 128))
+                        ]),
+                        _: 2
+                      }, 1024))), 128)),
+                      e(h).length ? x("", !0) : (l(), s("div", Ge, d(e(o).notFoundText), 1))
+                    ]),
+                    _: 1
+                  }, 512))
+                ]),
+                _: 1
+              }, 16, ["data-ui-popup-motion", "onEscapeKeyDown", "class"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["required", "open", "model-value", "disabled"]),
+      e(f) === "sheet" ? (l(), v(Ae, {
+        key: 0,
+        open: i.value,
+        "onUpdate:open": r[4] || (r[4] = (a) => i.value = a),
+        query: c.value,
+        "onUpdate:query": r[5] || (r[5] = (a) => c.value = a),
+        title: F.value,
+        groups: e(h),
+        value: e(o).modelValue,
+        search: _.value,
+        "search-placeholder": e(o).searchPlaceholder,
+        loading: e(z),
+        "loading-text": e(o).loadingText,
+        "not-found-text": e(o).notFoundText,
+        onPick: Q
+      }, null, 8, ["open", "query", "title", "groups", "value", "search", "search-placeholder", "loading", "loading-text", "not-found-text"])) : x("", !0)
+    ], 16));
+  }
+});
+export {
+  pt as default
+};

package/dist/modules/components/primitives/select/Select2.vue.js

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