@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-455p0jbk.js

@@ -0,0 +1,241 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setHidden
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/command/command.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function CommandRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getVisibleItems = function() {
+      return allItems.filter((item) => item.getAttribute("aria-hidden") !== "true");
+    }, updateActiveItem = function() {
+      const visible = getVisibleItems();
+      const activeIdx = state.activeIndex.peek();
+      for (const item of allItems) {
+        item.setAttribute("aria-selected", "false");
+      }
+      if (visible.length > 0 && activeIdx >= 0 && activeIdx < visible.length) {
+        visible[activeIdx]?.setAttribute("aria-selected", "true");
+      }
+    }, runFilter = function() {
+      const search = state.inputValue.peek();
+      let visibleCount = 0;
+      for (const item of allItems) {
+        const value = item.getAttribute("data-value") ?? "";
+        const text = item.textContent ?? "";
+        const keywords = item.getAttribute("data-keywords") ?? "";
+        const searchable = `${value} ${text} ${keywords}`;
+        const matches = search === "" || filterFn(searchable, search);
+        setHidden(item, !matches);
+        if (matches)
+          visibleCount++;
+      }
+      for (const [groupEl, group] of groups) {
+        const hasVisible = group.items.some((item) => item.getAttribute("aria-hidden") !== "true");
+        setHidden(group.heading, !hasVisible);
+        if (!hasVisible) {
+          groupEl.style.display = "none";
+        } else {
+          groupEl.style.display = "";
+        }
+      }
+      setHidden(empty, visibleCount > 0);
+      state.activeIndex.value = 0;
+      updateActiveItem();
+    }, createItem = function(value, label, keywords) {
+      const item = (() => {
+        const __el4 = __element("div");
+        __el4.setAttribute("role", "option");
+        {
+          const __v = value;
+          if (__v != null && __v !== false)
+            __el4.setAttribute("data-value", __v === true ? "" : __v);
+        }
+        __el4.setAttribute("aria-selected", "false");
+        {
+          const __v = keywords && keywords.length > 0 ? keywords.join(" ") : undefined;
+          if (__v != null && __v !== false)
+            __el4.setAttribute("data-keywords", __v === true ? "" : __v);
+        }
+        __on(__el4, "click", () => {
+          onSelect?.(value);
+        });
+        __enterChildren(__el4);
+        __insert(__el4, label ?? value);
+        __exitChildren();
+        return __el4;
+      })();
+      allItems.push(item);
+      updateActiveItem();
+      return item;
+    }, Item = function(value, label, keywords) {
+      return createItem(value, label, keywords);
+    }, Group = function(label) {
+      const headingId = uniqueId("command-group");
+      const heading = (() => {
+        const __el5 = __element("div");
+        {
+          const __v = headingId;
+          if (__v != null && __v !== false)
+            __el5.setAttribute("id", __v === true ? "" : __v);
+        }
+        __enterChildren(__el5);
+        __insert(__el5, label);
+        __exitChildren();
+        return __el5;
+      })();
+      const el = (() => {
+        const __el6 = __element("div");
+        __el6.setAttribute("role", "group");
+        {
+          const __v = headingId;
+          if (__v != null && __v !== false)
+            __el6.setAttribute("aria-labelledby", __v === true ? "" : __v);
+        }
+        __enterChildren(__el6);
+        __insert(__el6, heading);
+        __exitChildren();
+        return __el6;
+      })();
+      const groupItems = [];
+      groups.set(el, { heading, items: groupItems });
+      return {
+        el,
+        Item: (value, itemLabel, keywords) => {
+          const item = createItem(value, itemLabel, keywords);
+          groupItems.push(item);
+          return item;
+        }
+      };
+    }, Separator = function() {
+      return (() => {
+        const __el7 = __element("hr");
+        __el7.setAttribute("role", "separator");
+        return __el7;
+      })();
+    };
+    const { filter: customFilter, onSelect, onInputChange, placeholder, ...attrs } = options;
+    const listId = uniqueId("command-list");
+    const state = {
+      inputValue: signal(""),
+      activeIndex: signal(0)
+    };
+    const allItems = [];
+    const groups = new Map;
+    const defaultFilter = (value, search) => {
+      return value.toLowerCase().includes(search.toLowerCase());
+    };
+    const filterFn = customFilter ?? defaultFilter;
+    const input = (() => {
+      const __el0 = __element("input");
+      __el0.setAttribute("type", "text");
+      __el0.setAttribute("role", "combobox");
+      __el0.setAttribute("aria-autocomplete", "list");
+      __el0.setAttribute("aria-expanded", "true");
+      {
+        const __v = listId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = placeholder;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("placeholder", __v === true ? "" : __v);
+      }
+      __on(__el0, "input", () => {
+        state.inputValue.value = input.value;
+        onInputChange?.(input.value);
+        runFilter();
+      });
+      __on(__el0, "keydown", (event) => {
+        const visible = getVisibleItems();
+        if (isKey(event, Keys.ArrowDown)) {
+          event.preventDefault();
+          const next = Math.min(state.activeIndex.peek() + 1, visible.length - 1);
+          state.activeIndex.value = next;
+          updateActiveItem();
+          return;
+        }
+        if (isKey(event, Keys.ArrowUp)) {
+          event.preventDefault();
+          const prev = Math.max(state.activeIndex.peek() - 1, 0);
+          state.activeIndex.value = prev;
+          updateActiveItem();
+          return;
+        }
+        if (isKey(event, Keys.Enter)) {
+          event.preventDefault();
+          const active = visible[state.activeIndex.peek()];
+          if (active) {
+            const val = active.getAttribute("data-value");
+            if (val !== null) {
+              onSelect?.(val);
+            }
+          }
+          return;
+        }
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          input.value = "";
+          state.inputValue.value = "";
+          onInputChange?.("");
+          runFilter();
+        }
+      });
+      return __el0;
+    })();
+    const list = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "listbox");
+      {
+        const __v = listId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      return __el1;
+    })();
+    const empty = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("aria-hidden", "true");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el2;
+    })();
+    const root = (() => {
+      const __el3 = __element("div");
+      __enterChildren(__el3);
+      __insert(__el3, input);
+      __insert(__el3, list);
+      __insert(__el3, empty);
+      __exitChildren();
+      return __el3;
+    })();
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, input, list, empty, state, Item, Group, Separator };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Command = {
+  Root: CommandRoot
+};
+
+export { Command };

package/dist/shared/chunk-4gyg71bn.js

@@ -0,0 +1,178 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/pagination/pagination-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+function generatePaginationRange(current, total, siblings) {
+  const range = [];
+  const left = Math.max(2, current - siblings);
+  const right = Math.min(total - 1, current + siblings);
+  range.push(1);
+  if (left > 2) {
+    range.push("...");
+  }
+  for (let idx = left;idx <= right; idx++) {
+    if (idx !== 1 && idx !== total) {
+      range.push(idx);
+    }
+  }
+  if (right < total - 1) {
+    range.push("...");
+  }
+  if (total > 1) {
+    range.push(total);
+  }
+  return range;
+}
+function PageButton(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    if (__props.page === __props.currentPage) {
+      const __mfResult0 = (() => {
+        const __el0 = __element("button");
+        __el0.setAttribute("type", "button");
+        __attr(__el0, "class", () => cn(__props.classes?.linkActive));
+        __el0.setAttribute("aria-current", "page");
+        __enterChildren(__el0);
+        __append(__el0, __child(() => String(__props.page)));
+        __exitChildren();
+        return __el0;
+      })();
+      __flushMountFrame();
+      return __mfResult0;
+    }
+    const __mfResult1 = (() => {
+      const __el1 = __element("button");
+      __el1.setAttribute("type", "button");
+      __attr(__el1, "class", () => cn(__props.classes?.link));
+      __on(__el1, "click", () => __props.onPageChange(__props.page));
+      __enterChildren(__el1);
+      __append(__el1, __child(() => String(__props.page)));
+      __exitChildren();
+      return __el1;
+    })();
+    __flushMountFrame();
+    return __mfResult1;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedPaginationRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const range = computed(() => generatePaginationRange(__props.currentPage, __props.totalPages, __props.siblingCount ?? 1));
+    const pageItems = [];
+    for (const page of range.value) {
+      if (page === "...") {
+        pageItems.push((() => {
+          const __el0 = __element("li");
+          __attr(__el0, "class", () => cn(__props.classes?.item));
+          __enterChildren(__el0);
+          __append(__el0, (() => {
+            const __el1 = __element("span");
+            __el1.setAttribute("aria-hidden", "true");
+            __attr(__el1, "class", () => cn(__props.classes?.ellipsis));
+            __enterChildren(__el1);
+            __append(__el1, __child(() => __props.ellipsisContent ?? "..."));
+            __exitChildren();
+            return __el1;
+          })());
+          __exitChildren();
+          return __el0;
+        })());
+      } else {
+        pageItems.push((() => {
+          const __el2 = __element("li");
+          __attr(__el2, "class", () => cn(__props.classes?.item));
+          __enterChildren(__el2);
+          __append(__el2, PageButton({ get page() {
+            return page;
+          }, get currentPage() {
+            return __props.currentPage;
+          }, get onPageChange() {
+            return __props.onPageChange;
+          }, get classes() {
+            return __props.classes;
+          } }));
+          __exitChildren();
+          return __el2;
+        })());
+      }
+    }
+    const __mfResult0 = (() => {
+      const __el3 = __element("nav");
+      __el3.setAttribute("aria-label", "Pagination");
+      __attr(__el3, "class", () => cn(__props.classes?.nav, __props.className ?? __props.class));
+      __enterChildren(__el3);
+      __append(__el3, (() => {
+        const __el4 = __element("ul");
+        __attr(__el4, "class", () => cn(__props.classes?.list));
+        __enterChildren(__el4);
+        __append(__el4, (() => {
+          const __el5 = __element("li");
+          __attr(__el5, "class", () => cn(__props.classes?.item));
+          __enterChildren(__el5);
+          __append(__el5, (() => {
+            const __el6 = __element("button");
+            __el6.setAttribute("type", "button");
+            __attr(__el6, "class", () => cn(__props.classes?.navButton));
+            {
+              const __v = { paddingLeft: "0.375rem", paddingRight: "0.625rem" };
+              if (__v != null && __v !== false)
+                __el6.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+            }
+            __el6.setAttribute("aria-label", "Previous page");
+            __attr(__el6, "disabled", () => __props.currentPage <= 1);
+            __on(__el6, "click", () => __props.onPageChange(__props.currentPage - 1));
+            __enterChildren(__el6);
+            __append(__el6, __child(() => __props.prevContent ?? "Previous"));
+            __exitChildren();
+            return __el6;
+          })());
+          __exitChildren();
+          return __el5;
+        })());
+        __insert(__el4, pageItems);
+        __append(__el4, (() => {
+          const __el7 = __element("li");
+          __attr(__el7, "class", () => cn(__props.classes?.item));
+          __enterChildren(__el7);
+          __append(__el7, (() => {
+            const __el8 = __element("button");
+            __el8.setAttribute("type", "button");
+            __attr(__el8, "class", () => cn(__props.classes?.navButton));
+            {
+              const __v = { paddingLeft: "0.625rem", paddingRight: "0.375rem" };
+              if (__v != null && __v !== false)
+                __el8.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+            }
+            __el8.setAttribute("aria-label", "Next page");
+            __attr(__el8, "disabled", () => __props.currentPage >= __props.totalPages);
+            __on(__el8, "click", () => __props.onPageChange(__props.currentPage + 1));
+            __enterChildren(__el8);
+            __append(__el8, __child(() => __props.nextContent ?? "Next"));
+            __exitChildren();
+            return __el8;
+          })());
+          __exitChildren();
+          return __el7;
+        })());
+        __exitChildren();
+        return __el4;
+      })());
+      __exitChildren();
+      return __el3;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedPagination = ComposedPaginationRoot;
+
+export { ComposedPagination };