@leavepulse/ui 0.78.1 → 0.78.3

package/dist/chunks/LpSelect-JFZehOkd.js

@@ -0,0 +1,515 @@
+import { defineComponent, computed, ref, useAttrs, useId, reactive, watch, nextTick, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, mergeProps, normalizeClass, createElementVNode, toDisplayString, createElementBlock, TransitionGroup, Fragment, renderList, createCommentVNode, withModifiers, createTextVNode, normalizeStyle } from "vue";
+import { _ as _sfc_main$4 } from "./IconCloseButton-COZEsa9u.js";
+import { CONTROL_SIZE } from "../components/controlSize.js";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
+import { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxInput, ComboboxViewport, ComboboxEmpty, ComboboxItem, ComboboxItemIndicator } from "reka-ui";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { useOwnField, useFieldBlur, mergeDescribedBy } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$5 } from "./OptionContent-CGb8QlHA.js";
+import { _ as _sfc_main$3 } from "./LpRollingText-B54Pje7P.js";
+import { evictOldest, fitChips, toggledValues } from "../components/select.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
+import { nodeWindow } from "../composables/realm.js";
+const _hoisted_1 = { class: "sr-only" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = { class: "truncate" };
+const _hoisted_4 = {
+  key: "lp-select-more",
+  "aria-hidden": "true",
+  class: "inline-flex shrink-0 items-center rounded-pill bg-surface-raised px-2 py-0.5 text-xs font-medium text-muted"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "size-4 shrink-0"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "ml-1 size-3 shrink-0"
+};
+const _hoisted_7 = { class: "truncate" };
+const _hoisted_8 = { class: "inline-flex px-2 py-0.5 text-xs font-medium" };
+const _hoisted_9 = { class: "flex min-w-0 items-center gap-2" };
+const _hoisted_10 = ["src"];
+const _hoisted_11 = {
+  key: 2,
+  class: "min-w-0 truncate text-muted"
+};
+const _hoisted_12 = {
+  key: 0,
+  class: "border-b border-line p-2"
+};
+const _hoisted_13 = {
+  key: 0,
+  class: "px-3 py-4 text-center text-sm italic text-muted"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpSelect",
+  props: {
+    palette: { type: [Boolean, Object], default: void 0 },
+    modelValue: {},
+    options: {},
+    placeholder: {},
+    searchPlaceholder: {},
+    searchable: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean },
+    error: {},
+    emptyText: {},
+    searchTerm: { default: void 0 },
+    loading: { type: Boolean, default: false },
+    loadingText: {},
+    size: { default: "md" },
+    selected: {},
+    labels: {}
+  },
+  emits: ["update:modelValue", "change", "update:searchTerm", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const SIZE_HEIGHT = CONTROL_SIZE;
+    const anchorHeight = computed(() => SIZE_HEIGHT[props.size]);
+    const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }));
+    const labels = useLabels(
+      "select",
+      {
+        clear: "Clear",
+        selected: "{count} selected",
+        placeholder: "Select…",
+        search: "Search…",
+        searchLabel: "Search options",
+        empty: "Nothing found",
+        loading: "Searching…"
+      },
+      () => props.labels
+    );
+    const placeholderText = computed(() => props.placeholder ?? labels.value.placeholder);
+    const searchPlaceholderText = computed(() => props.searchPlaceholder ?? labels.value.search);
+    const emptyLabel = computed(() => props.emptyText ?? labels.value.empty);
+    const loadingLabel = computed(() => props.loadingText ?? labels.value.loading);
+    const { class: rootClass, attrs: rootAttrs } = useMergedAttrs("relative", ownAttrs);
+    const emit = __emit;
+    const serverSide = computed(() => props.searchTerm !== void 0);
+    const localQuery = ref("");
+    const query = computed({
+      get: () => serverSide.value ? props.searchTerm ?? "" : localQuery.value,
+      set: (v) => {
+        if (serverSide.value) emit("update:searchTerm", v);
+        else localQuery.value = v;
+      }
+    });
+    const isOpen = ref(false);
+    function onOpenChange(open) {
+      isOpen.value = open;
+      query.value = "";
+    }
+    async function openFromKeyboard(event) {
+      if (field.value.disabled || isOpen.value || !["ArrowDown", "ArrowUp"].includes(event.key)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const trigger = event.currentTarget;
+      trigger.click();
+      await nextTick();
+      const panel = trigger.ownerDocument.getElementById(trigger.getAttribute("aria-controls") ?? "");
+      const search = panel?.querySelector("input:not([disabled])");
+      const items = panel?.querySelectorAll('[role="option"]:not([data-disabled])');
+      const selected = panel?.querySelector('[role="option"][aria-selected="true"]:not([data-disabled])');
+      const target = search ?? selected ?? (event.key === "ArrowUp" ? items?.[items.length - 1] : items?.[0]);
+      if (isOpen.value) target?.focus();
+    }
+    const LIST_KEYS = ["ArrowDown", "ArrowUp", "Home", "End", "Enter"];
+    function moveInList(event) {
+      if (props.searchable || serverSide.value || !LIST_KEYS.includes(event.key)) return;
+      const list = event.currentTarget;
+      const items = Array.from(list.querySelectorAll('[role="option"]:not([data-disabled])'));
+      if (!items.length) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const at = items.indexOf(list.ownerDocument.activeElement);
+      if (event.key === "Enter") {
+        items[at]?.click();
+        return;
+      }
+      const last = items.length - 1;
+      const next = {
+        ArrowDown: at === last ? 0 : at + 1,
+        ArrowUp: at <= 0 ? last : at - 1,
+        Home: 0,
+        End: last
+      }[event.key];
+      items[next ?? 0]?.focus();
+    }
+    const { partId, onFocusOut } = useFieldBlur((event) => emit("blur", event));
+    const triggerRef = ref(null);
+    function onListFocusOut(event) {
+      const trigger = triggerRef.value?.$el;
+      if (isOpen.value || event.relatedTarget || !trigger?.isConnected) {
+        onFocusOut(event);
+        return;
+      }
+      trigger.focus({ preventScroll: true });
+    }
+    const attrs = useAttrs();
+    const valueId = `lp-select-${useId()}-value`;
+    const valueText = computed(() => chips.value.length ? chipNames.value : displayLabel.value || placeholderText.value);
+    const triggerName = computed(
+      () => field.value.labelId ? { "aria-labelledby": `${field.value.labelId} ${valueId}`, "aria-label": void 0 } : { "aria-label": [attrs["aria-label"], valueText.value].filter(Boolean).join(", ") }
+    );
+    const EMPTY_SENTINEL = "\0__lp_empty__";
+    function encode(v) {
+      return v === "" ? EMPTY_SENTINEL : v;
+    }
+    function decode(v) {
+      return v === EMPTY_SENTINEL ? "" : v;
+    }
+    const hasEmptyOption = computed(
+      () => props.options.some((o) => o.value === "")
+    );
+    const comboModel = computed(() => {
+      const v = props.modelValue;
+      if (Array.isArray(v)) return v.map((item) => encode(item));
+      if (v === "" && !hasEmptyOption.value) return void 0;
+      return encode(v);
+    });
+    const filtered = computed(() => {
+      if (serverSide.value) return props.options;
+      const q = query.value.trim().toLowerCase();
+      if (!props.searchable || !q) return props.options;
+      return props.options.filter(
+        (o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)
+      );
+    });
+    const remembered = reactive(/* @__PURE__ */ new Map());
+    const REMEMBERED_LIMIT = 500;
+    function fromOption(o) {
+      return { label: o.label, hint: o.description, image: o.image, icon: o.icon };
+    }
+    function remember(values) {
+      for (const v of values) {
+        const o = props.options.find((x) => x.value === v);
+        if (o) remembered.set(v, fromOption(o));
+      }
+      evictOldest(remembered, new Set(values), REMEMBERED_LIMIT);
+    }
+    const modelList = computed(() => {
+      const v = props.modelValue;
+      if (Array.isArray(v)) return v;
+      return v === void 0 || v === "" && !hasEmptyOption.value ? [] : [v];
+    });
+    watch([modelList, () => props.options], ([values]) => remember(values), { immediate: true });
+    function shown(v, index) {
+      const sel = props.selected;
+      const given = Array.isArray(sel) ? sel[index] : index === 0 ? sel : void 0;
+      if (given?.label) return given;
+      const o = props.options.find((x) => x.value === v);
+      return o ? fromOption(o) : remembered.get(v);
+    }
+    const current = computed(() => {
+      if (props.multiple) return void 0;
+      const v = modelList.value[0];
+      return v === void 0 ? void 0 : shown(v, 0);
+    });
+    const chips = computed(
+      () => props.multiple ? modelList.value.flatMap((value, i) => {
+        const s = shown(value, i);
+        return s ? [{ value, ...s }] : [];
+      }) : []
+    );
+    const displayLabel = computed(() => {
+      if (props.multiple) {
+        const count = modelList.value.length;
+        return count ? labels.value.selected.replace("{count}", String(count)) : "";
+      }
+      return current.value?.label ?? "";
+    });
+    const rollKey = computed(() => {
+      const c = current.value;
+      return c ? [c.label, c.hint ?? "", c.image ?? c.icon ?? ""].join("\0") : `\0${placeholderText.value}`;
+    });
+    const chipRow = ref(null);
+    const probeRow = ref(null);
+    const fit = ref(Number.POSITIVE_INFINITY);
+    function measure() {
+      const row = chipRow.value;
+      const probe = probeRow.value;
+      if (!row || !probe) return;
+      const kids = Array.from(probe.children);
+      const more = kids.pop();
+      const gap = Number.parseFloat(nodeWindow(probe).getComputedStyle(probe).columnGap) || 0;
+      fit.value = fitChips(
+        kids.map((k) => k.offsetWidth),
+        row.clientWidth,
+        gap,
+        more?.offsetWidth ?? 0
+      );
+    }
+    useResizeObserver(chipRow, () => measure());
+    useResizeObserver(probeRow, () => measure());
+    watch(chips, () => void nextTick(measure), { flush: "post", deep: true });
+    const shownChips = computed(() => chips.value.slice(0, fit.value));
+    const hiddenCount = computed(() => modelList.value.length - shownChips.value.length);
+    const chipNames = computed(() => {
+      const names = chips.value.map((c) => c.label);
+      const unnamed = modelList.value.length - names.length;
+      if (unnamed) names.push(labels.value.selected.replace("{count}", String(unnamed)));
+      return names.join(", ");
+    });
+    const hasValue = computed(() => modelList.value.length > 0);
+    function onUpdate(value) {
+      const decoded = Array.isArray(value) ? value.map((item) => decode(item)) : decode(value);
+      remember(Array.isArray(decoded) ? decoded : [decoded]);
+      const previous = modelList.value;
+      emit("update:modelValue", decoded);
+      if (!Array.isArray(decoded)) {
+        emit("change", decoded);
+        return;
+      }
+      for (const v of toggledValues(previous, decoded)) emit("change", v);
+    }
+    function clear() {
+      if (field.value.disabled) return;
+      emit("update:modelValue", props.multiple ? [] : void 0);
+    }
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
+    usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ selected: props.multiple ? modelList.value.map((value, index) => shown(value, index)) : current.value }) });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createVNode(unref(ComboboxRoot), mergeProps({
+            "model-value": comboModel.value,
+            multiple: __props.multiple,
+            disabled: unref(field).disabled,
+            required: unref(field).required,
+            "ignore-filter": true,
+            "reset-search-term-on-select": false,
+            "reset-search-term-on-blur": false,
+            class: unref(rootClass)
+          }, unref(rootAttrs), {
+            "onUpdate:modelValue": onUpdate,
+            "onUpdate:open": onOpenChange
+          }), {
+            default: withCtx(() => [
+              createVNode(unref(ComboboxAnchor), {
+                "data-lp-field-part": unref(partId),
+                onFocusout: unref(onFocusOut),
+                class: normalizeClass([
+                  anchorHeight.value,
+                  "group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2",
+                  unref(field).disabled && "cursor-not-allowed opacity-55",
+                  unref(field).invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand focus-within:ring-ring"
+                ])
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("span", {
+                    id: valueId,
+                    hidden: ""
+                  }, toDisplayString(valueText.value), 1),
+                  createVNode(unref(ComboboxTrigger), mergeProps({
+                    ref_key: "triggerRef",
+                    ref: triggerRef,
+                    id: unref(field).id,
+                    tabindex: unref(field).disabled ? -1 : 0,
+                    onKeydown: openFromKeyboard
+                  }, triggerName.value, {
+                    "aria-invalid": unref(field).invalid || void 0,
+                    "aria-describedby": unref(mergeDescribedBy)(unref(rootAttrs)["aria-describedby"], unref(field).describedBy),
+                    class: "flex min-w-0 flex-1 items-center gap-2 outline-none"
+                  }), {
+                    default: withCtx(() => [
+                      chips.value.length ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        ref_key: "chipRow",
+                        ref: chipRow,
+                        class: "relative flex min-w-0 flex-1 items-center gap-1 overflow-hidden"
+                      }, [
+                        createElementVNode("span", _hoisted_1, toDisplayString(chipNames.value), 1),
+                        createVNode(TransitionGroup, {
+                          "enter-active-class": "animate-[chip-in_var(--duration-fast)_var(--ease-emphasized)] motion-reduce:animate-none",
+                          "leave-active-class": "animate-[chip-out_var(--duration-fast)_ease] motion-reduce:animate-none"
+                        }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(shownChips.value, (chip, i) => {
+                              return openBlock(), createElementBlock("span", {
+                                key: String(chip.value),
+                                "aria-hidden": "true",
+                                class: normalizeClass(["inline-flex max-w-40 min-w-0 items-center gap-1 rounded-pill bg-surface-raised py-0.5 pr-2 text-xs font-medium text-ink", [chip.image || chip.icon ? "pl-0.5" : "pl-2", i === shownChips.value.length - 1 ? "" : "shrink-0"]])
+                              }, [
+                                chip.image ? (openBlock(), createElementBlock("img", {
+                                  key: 0,
+                                  src: chip.image,
+                                  alt: "",
+                                  class: "size-4 shrink-0 rounded-full object-cover"
+                                }, null, 8, _hoisted_2)) : chip.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                                  key: 1,
+                                  name: chip.icon,
+                                  size: 12,
+                                  class: "ml-1 shrink-0 text-muted"
+                                }, null, 8, ["name"])) : createCommentVNode("", true),
+                                createElementVNode("span", _hoisted_3, toDisplayString(chip.label), 1)
+                              ], 2);
+                            }), 128)),
+                            hiddenCount.value ? (openBlock(), createElementBlock("span", _hoisted_4, [
+                              createVNode(_sfc_main$3, {
+                                value: `+${hiddenCount.value}`
+                              }, null, 8, ["value"])
+                            ])) : createCommentVNode("", true)
+                          ]),
+                          _: 1
+                        }),
+                        createElementVNode("span", {
+                          ref_key: "probeRow",
+                          ref: probeRow,
+                          "aria-hidden": "true",
+                          class: "pointer-events-none invisible absolute top-0 left-0 flex w-max gap-1"
+                        }, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(chips.value, (chip) => {
+                            return openBlock(), createElementBlock("span", {
+                              key: String(chip.value),
+                              class: normalizeClass(["inline-flex max-w-40 items-center gap-1 rounded-pill py-0.5 pr-2 text-xs font-medium", chip.image || chip.icon ? "pl-0.5" : "pl-2"])
+                            }, [
+                              chip.image ? (openBlock(), createElementBlock("span", _hoisted_5)) : chip.icon ? (openBlock(), createElementBlock("span", _hoisted_6)) : createCommentVNode("", true),
+                              createElementVNode("span", _hoisted_7, toDisplayString(chip.label), 1)
+                            ], 2);
+                          }), 128)),
+                          createElementVNode("span", _hoisted_8, "+" + toDisplayString(modelList.value.length), 1)
+                        ], 512)
+                      ], 512)) : (openBlock(), createBlock(_sfc_main$3, {
+                        key: 1,
+                        value: rollKey.value,
+                        align: "start",
+                        class: "min-w-0 flex-1"
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("span", _hoisted_9, [
+                            current.value?.image ? (openBlock(), createElementBlock("img", {
+                              key: 0,
+                              src: current.value.image,
+                              alt: "",
+                              class: "block size-5 shrink-0 rounded-full object-cover"
+                            }, null, 8, _hoisted_10)) : current.value?.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                              key: 1,
+                              name: current.value.icon,
+                              size: 16,
+                              class: "block shrink-0 text-muted"
+                            }, null, 8, ["name"])) : createCommentVNode("", true),
+                            createElementVNode("span", {
+                              class: normalizeClass(["min-w-0 truncate", displayLabel.value ? "" : "text-muted"])
+                            }, toDisplayString(displayLabel.value || placeholderText.value), 3),
+                            current.value?.hint ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(current.value.hint), 1)) : createCommentVNode("", true)
+                          ])
+                        ]),
+                        _: 1
+                      }, 8, ["value"]))
+                    ]),
+                    _: 1
+                  }, 16, ["id", "tabindex", "aria-invalid", "aria-describedby"]),
+                  __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createBlock(_sfc_main$4, {
+                    key: 0,
+                    inline: "",
+                    label: unref(labels).clear,
+                    onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+                    }, ["prevent"])),
+                    onClick: clear
+                  }, null, 8, ["label"])) : createCommentVNode("", true),
+                  createVNode(unref(ComboboxTrigger), {
+                    tabindex: "-1",
+                    "aria-hidden": "true",
+                    class: "group/trig flex shrink-0 items-center text-muted transition-[rotate,color] duration-200 ease-[var(--ease-emphasized)] group-hover:text-ink data-[state=open]:rotate-180"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$2, {
+                        name: "lucide:chevron-down",
+                        size: 16,
+                        class: "transition-transform duration-200 ease-[var(--ease-emphasized)] group-data-[state=closed]/trig:group-hover:translate-y-1"
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["data-lp-field-part", "onFocusout", "class"]),
+              createVNode(unref(ComboboxPortal), { to: unref(portalTo) }, {
+                default: withCtx(() => [
+                  createVNode(unref(ComboboxContent), {
+                    "data-lp-field-part": unref(partId),
+                    onFocusout: onListFocusOut,
+                    onKeydownCapture: moveInList,
+                    onInteractOutside: unref(guardOutside),
+                    onEscapeKeyDown: unref(guardOutside),
+                    position: "popper",
+                    "side-offset": 6,
+                    class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"])
+                  }, {
+                    default: withCtx(() => [
+                      __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                        createVNode(unref(ComboboxInput), {
+                          modelValue: query.value,
+                          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => query.value = $event),
+                          placeholder: searchPlaceholderText.value,
+                          "aria-label": unref(labels).searchLabel,
+                          class: "h-(--size-control-sm) w-full rounded-md border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
+                        }, null, 8, ["modelValue", "placeholder", "aria-label"])
+                      ])) : createCommentVNode("", true),
+                      createVNode(unref(ComboboxViewport), { class: "max-h-56 overflow-y-auto p-1" }, {
+                        default: withCtx(() => [
+                          __props.loading ? (openBlock(), createElementBlock("div", _hoisted_13, toDisplayString(loadingLabel.value), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                            key: 1,
+                            class: "px-3 py-4 text-center text-sm italic text-muted"
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(emptyLabel.value), 1)
+                            ]),
+                            _: 1
+                          })),
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (opt, i) => {
+                            return openBlock(), createBlock(unref(ComboboxItem), {
+                              key: String(opt.value),
+                              value: encode(opt.value),
+                              disabled: opt.disabled,
+                              style: normalizeStyle(unref(optionStagger)(i)),
+                              class: normalizeClass([unref(OPTION_ITEM), "justify-between data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"])
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_sfc_main$5, { option: opt }, null, 8, ["option"]),
+                                createVNode(unref(ComboboxItemIndicator), { class: "flex shrink-0 items-center text-brand" }, {
+                                  default: withCtx(() => [
+                                    createVNode(_sfc_main$2, {
+                                      name: "lucide:check",
+                                      size: 16
+                                    })
+                                  ]),
+                                  _: 1
+                                })
+                              ]),
+                              _: 2
+                            }, 1032, ["value", "disabled", "style", "class"]);
+                          }), 128))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["data-lp-field-part", "onInteractOutside", "onEscapeKeyDown", "class"])
+                ]),
+                _: 1
+              }, 8, ["to"])
+            ]),
+            _: 1
+          }, 16, ["model-value", "multiple", "disabled", "required", "class"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpSidebar-DDNJzb69.js → LpSidebar-CvRvVBTt.js}

@@ -6,7 +6,7 @@ import { usePersisted } from "../composables/usePersisted.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$5 } from "./LpDrawer-DXNQFpAA.js";
 import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
-import { _ as _sfc_main$3 } from "./LpInput-D0O6dpuA.js";
+import { _ as _sfc_main$3 } from "./LpInput-CbI7z5fQ.js";
 import { _ as _sfc_main$1 } from "./LpTooltip-Bz_rrq5S.js";
 import { _ as _sfc_main$4 } from "./LpSidebarNav-CE0jQS8i.js";
 const _hoisted_1 = ["data-compact", "aria-label"];

package/dist/chunks/LpSlider-C4ilCtZX.js

@@ -0,0 +1,76 @@
+import { defineComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createVNode, mergeProps } from "vue";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { _ as _sfc_main$2 } from "./SliderRail-DhPREa_R.js";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
+import { SliderRoot, SliderThumb } from "reka-ui";
+import { useOwnField, mergeDescribedBy } from "../composables/useField.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { SLIDER_GLIDE, useSliderDrag } from "../components/slider.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpSlider",
+  props: {
+    palette: { type: [Boolean, Object], default: void 0 },
+    modelValue: { default: 0 },
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    disabled: { type: Boolean },
+    error: {},
+    ariaLabel: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function onUpdate(v) {
+      if (v && v.length) emit("update:modelValue", v[0]);
+    }
+    function onCommit(v) {
+      if (v && v.length) emit("change", v[0]);
+    }
+    const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, disabled: props.disabled }));
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`,
+      () => ownAttrs()
+    );
+    const { dragging, onPointerDown } = useSliderDrag();
+    usePaletteControl({ disabled: () => field.value.disabled });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(wrapper))), {
+        default: withCtx(() => [
+          createVNode(unref(SliderRoot), mergeProps({
+            "model-value": [props.modelValue],
+            min: __props.min,
+            max: __props.max,
+            step: __props.step,
+            disabled: unref(field).disabled,
+            class: unref(rootClass)
+          }, unref(rest), {
+            "data-dragging": unref(dragging) || void 0,
+            onPointerdown: unref(onPointerDown),
+            "onUpdate:modelValue": onUpdate,
+            onValueCommit: onCommit
+          }), {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2),
+              createVNode(unref(SliderThumb), {
+                id: unref(field).id,
+                "aria-label": __props.ariaLabel,
+                "aria-labelledby": __props.ariaLabel ? void 0 : unref(field).labelId,
+                "aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
+                class: "block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
+              }, null, 8, ["id", "aria-label", "aria-labelledby", "aria-describedby"])
+            ]),
+            _: 1
+          }, 16, ["model-value", "min", "max", "step", "disabled", "class", "data-dragging", "onPointerdown"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};