@alaarab/ogrid-vue-radix 2.7.0 → 2.7.2

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import _ from "./ColumnChooser.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                              */
+var u = /* @__PURE__ */ e(_, [["__scopeId", "data-v-9d3085bf"]]);
+export {
+  u as default
+};

package/dist/esm/ColumnChooser/ColumnChooser.vue?vue&type=style&index=0&scoped=9d3085bf&lang.css

@@ -0,0 +1 @@
+.container[data-v-9d3085bf]{display:inline-flex;position:relative}.trigger-button[data-v-9d3085bf]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);cursor:pointer;color:var(--ogrid-fg,#000000de);border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.trigger-button[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg,#0000000a);border-color:var(--ogrid-fg-muted,#00000080)}.trigger-button[aria-expanded=true][data-v-9d3085bf]{border-color:var(--ogrid-accent,#0078d4)}.button-icon[data-v-9d3085bf]{font-size:16px;line-height:1}.chevron[data-v-9d3085bf]{color:var(--ogrid-fg-muted,#00000080);font-size:12px}.dropdown[data-v-9d3085bf]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);z-index:50;border-radius:6px;flex-direction:column;min-width:220px;padding:0;display:flex;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 4px 16px #0000001f}.header[data-v-9d3085bf]{border-bottom:1px solid var(--ogrid-border,#0000001f);color:var(--ogrid-fg,#000000de);background:var(--ogrid-header-bg,#0000000a);padding:8px 12px;font-size:13px;font-weight:600}.options-list[data-v-9d3085bf]{max-height:320px;padding:0;overflow-y:auto}.option-item[data-v-9d3085bf]{align-items:center;gap:8px;min-height:32px;padding:4px 12px;display:flex}.option-item[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg,#0000000a)}.checkbox-input[data-v-9d3085bf]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);cursor:pointer;border-radius:3px;flex-shrink:0;width:16px;height:16px}.checkbox-input[data-v-9d3085bf]:checked{background:var(--ogrid-accent,#0078d4);border-color:var(--ogrid-accent,#0078d4)}.checkbox-input[data-v-9d3085bf]:disabled{opacity:.5;cursor:not-allowed}.checkbox-label[data-v-9d3085bf]{cursor:pointer;color:var(--ogrid-fg,#000000de);-webkit-user-select:none;user-select:none;font-size:13px}.actions[data-v-9d3085bf]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-9d3085bf]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:12px}.clear-button[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.select-all-button[data-v-9d3085bf]{background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:6px 16px;font-size:12px;font-weight:600}.select-all-button[data-v-9d3085bf]:hover{opacity:.85}

package/dist/esm/ColumnChooser/ColumnChooser.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,97 @@
+import { useColumnChooserState as I } from "@alaarab/ogrid-vue";
+import { Fragment as V, Transition as S, computed as f, createElementBlock as c, createElementVNode as s, createVNode as i, defineComponent as A, normalizeClass as M, openBlock as m, renderList as N, toDisplayString as o, unref as l, withCtx as r, withModifiers as d } from "vue";
+import { Menu as w, MenuButton as B, MenuItems as $ } from "@headlessui/vue";
+var q = {
+  class: "chevron",
+  "aria-hidden": ""
+}, E = { class: "header" }, z = { class: "options-list" }, D = ["aria-checked", "aria-disabled"], F = [
+  "id",
+  "checked",
+  "disabled",
+  "onChange"
+], L = ["for"], T = { class: "actions" }, J = /* @__PURE__ */ A({
+  __name: "ColumnChooser",
+  props: {
+    columns: {},
+    visibleColumns: {},
+    onVisibilityChange: {},
+    className: { default: "" }
+  },
+  setup(a) {
+    const u = a, { open: k, setOpen: g, handleCheckboxChange: y, handleSelectAll: C, handleClearAll: p, visibleCount: b, totalCount: h } = I({
+      columns: f(() => u.columns),
+      visibleColumns: f(() => u.visibleColumns),
+      onVisibilityChange: u.onVisibilityChange
+    }), x = (v) => (e) => {
+      const n = e.target;
+      y(v)(n.checked);
+    };
+    return (v, e) => (m(), c("div", { class: M(["container", a.className]) }, [i(l(w), null, {
+      default: r(({ open: n }) => [i(l(B), {
+        class: "trigger-button",
+        "aria-expanded": n,
+        "aria-haspopup": "listbox",
+        onClick: e[0] || (e[0] = (t) => l(g)(!l(k)))
+      }, {
+        default: r(() => [
+          e[5] || (e[5] = s("span", {
+            class: "button-icon",
+            "aria-hidden": ""
+          }, "⚙", -1)),
+          s("span", null, "Column Visibility (" + o(l(b)) + " of " + o(l(h)) + ")", 1),
+          s("span", q, o(n ? "▲" : "▼"), 1)
+        ]),
+        _: 2
+      }, 1032, ["aria-expanded"]), i(S, {
+        "enter-active-class": "transition duration-100 ease-out",
+        "enter-from-class": "opacity-0 scale-95",
+        "enter-to-class": "opacity-100 scale-100",
+        "leave-active-class": "transition duration-75 ease-in",
+        "leave-from-class": "opacity-100 scale-100",
+        "leave-to-class": "opacity-0 scale-95"
+      }, {
+        default: r(() => [i(l($), { class: "dropdown" }, {
+          default: r(() => [
+            s("div", E, "Select Columns (" + o(l(b)) + " of " + o(l(h)) + ")", 1),
+            s("div", z, [(m(!0), c(V, null, N(a.columns, (t) => (m(), c("div", {
+              key: t.columnId,
+              class: "option-item",
+              role: "menuitemcheckbox",
+              "aria-checked": a.visibleColumns.has(t.columnId),
+              "aria-disabled": t.required === !0
+            }, [s("input", {
+              id: `col-${t.columnId}`,
+              type: "checkbox",
+              checked: a.visibleColumns.has(t.columnId),
+              disabled: t.required === !0,
+              class: "checkbox-input",
+              onClick: e[1] || (e[1] = d(() => {
+              }, ["stop"])),
+              onChange: (_) => x(t.columnId)(_)
+            }, null, 40, F), s("label", {
+              for: `col-${t.columnId}`,
+              class: "checkbox-label",
+              onClick: e[2] || (e[2] = d(() => {
+              }, ["stop"]))
+            }, o(t.name), 9, L)], 8, D))), 128))]),
+            s("div", T, [s("button", {
+              type: "button",
+              class: "clear-button",
+              onClick: e[3] || (e[3] = d((...t) => l(p) && l(p)(...t), ["stop"]))
+            }, " Clear All "), s("button", {
+              type: "button",
+              class: "select-all-button",
+              onClick: e[4] || (e[4] = d((...t) => l(C) && l(C)(...t), ["stop"]))
+            }, " Select All ")])
+          ]),
+          _: 1
+        })]),
+        _: 1
+      })]),
+      _: 1
+    })], 2));
+  }
+});
+export {
+  J as default
+};

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./ColumnHeaderFilter.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                   */
+var u = /* @__PURE__ */ e(t, [["__scopeId", "data-v-7b7a41e5"]]);
+export {
+  u as default
+};

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.module.css

@@ -1,26 +1,15 @@
 .column-header {
   display: flex;
   align-items: center;
-  gap: 4px;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
+  gap: 2px;
   flex: 1;
   min-width: 0;
-  overflow: hidden;
+  box-sizing: border-box;
 }
 
 .column-name {
-  display: block;
+  flex: 1;
   min-width: 0;
-  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -29,14 +18,6 @@
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
 
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
 .filter-icon {
   display: flex;
   align-items: center;
@@ -84,9 +65,6 @@
 }
 
 .popover-content {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
   z-index: 1000;
   min-width: 280px;
   max-width: 320px;
@@ -95,8 +73,6 @@
   .popover-content {
     min-width: calc(100vw - 24px);
     max-width: calc(100vw - 24px);
-    right: auto;
-    left: 0;
   }
 }
 .popover-content {

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue?vue&type=style&index=0&scoped=7b7a41e5&lang.css

@@ -0,0 +1 @@
+.column-header[data-v-7b7a41e5]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-7b7a41e5]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-7b7a41e5]{width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-7b7a41e5]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-7b7a41e5]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-7b7a41e5]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-7b7a41e5]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-7b7a41e5]{background:var(--ogrid-accent,#0078d4);border:1px solid var(--ogrid-bg,#fff);border-radius:50%;width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-7b7a41e5]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-7b7a41e5]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-7b7a41e5]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);color:var(--ogrid-fg,#000000de);border-radius:8px;overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-7b7a41e5]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-7b7a41e5]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-7b7a41e5]{border:1px solid var(--ogrid-border,#0000001f);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);border-radius:4px;padding:6px 10px;font-size:14px}.search-input[data-v-7b7a41e5]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-7b7a41e5]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-7b7a41e5]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-7b7a41e5]{color:var(--ogrid-accent,#0078d4);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-7b7a41e5]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-7b7a41e5]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-7b7a41e5]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-7b7a41e5]{min-height:44px}}.popover-option[data-v-7b7a41e5]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-7b7a41e5]{border:1px solid var(--ogrid-border,#0000001f);cursor:pointer;border-radius:3px;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-7b7a41e5]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-7b7a41e5]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-7b7a41e5]{min-height:44px;padding:10px 16px}}.clear-button[data-v-7b7a41e5]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-7b7a41e5]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-7b7a41e5]{background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-7b7a41e5]{min-height:44px;padding:10px 20px}}.apply-button[data-v-7b7a41e5]:hover{opacity:.85}.loading-container[data-v-7b7a41e5],.no-results[data-v-7b7a41e5]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,189 @@
+import I from "./TextFilterPopover.js";
+import z from "./MultiSelectFilterPopover.js";
+import E from "./PeopleFilterPopover.js";
+import { useColumnHeaderFilterState as H } from "@alaarab/ogrid-vue";
+import { Teleport as M, createBlock as p, createCommentVNode as u, createElementBlock as s, createElementVNode as n, createTextVNode as y, defineComponent as $, normalizeClass as w, normalizeStyle as K, openBlock as r, toDisplayString as C, unref as e, withModifiers as j } from "vue";
+var q = ["title"], G = [
+  "aria-label",
+  "aria-expanded",
+  "title"
+], J = {
+  key: 0,
+  class: "filter-badge"
+}, Q = { class: "popover-header" }, W = { key: 3 }, X = { style: {
+  padding: "8px 12px",
+  display: "flex",
+  "flex-direction": "column",
+  gap: "6px"
+} }, Y = { style: {
+  display: "flex",
+  "align-items": "center",
+  gap: "6px",
+  "font-size": "12px"
+} }, Z = ["value"], _ = { style: {
+  display: "flex",
+  "align-items": "center",
+  gap: "6px",
+  "font-size": "12px"
+} }, ee = ["value"], te = { class: "popover-actions" }, le = ["disabled"], se = /* @__PURE__ */ $({
+  __name: "ColumnHeaderFilter",
+  props: {
+    columnKey: {},
+    columnName: {},
+    filterType: {},
+    isSorted: {
+      type: Boolean,
+      default: !1
+    },
+    isSortedDescending: {
+      type: Boolean,
+      default: !1
+    },
+    onSort: {},
+    selectedValues: {},
+    onFilterChange: {},
+    options: { default: () => [] },
+    isLoadingOptions: {
+      type: Boolean,
+      default: !1
+    },
+    textValue: { default: "" },
+    onTextChange: {},
+    selectedUser: {},
+    onUserChange: {},
+    peopleSearch: {},
+    dateValue: {},
+    onDateChange: {}
+  },
+  setup(l) {
+    const a = l, { headerRef: v, popoverRef: x, isFilterOpen: c, hasActiveFilter: g, tempSelected: S, tempTextValue: T, searchText: F, filteredOptions: k, peopleSearchText: V, peopleSuggestions: b, isPeopleLoading: D, peopleInputRef: U, tempDateFrom: h, tempDateTo: m, setTempTextValue: A, setSearchText: O, setPeopleSearchText: L, setTempDateFrom: N, setTempDateTo: P, popoverPosition: f, handlers: o } = H({
+      filterType: a.filterType,
+      isSorted: a.isSorted,
+      isSortedDescending: a.isSortedDescending,
+      onSort: a.onSort,
+      selectedValues: a.selectedValues,
+      onFilterChange: a.onFilterChange,
+      options: a.options,
+      isLoadingOptions: a.isLoadingOptions,
+      textValue: a.textValue,
+      onTextChange: a.onTextChange,
+      selectedUser: a.selectedUser,
+      onUserChange: a.onUserChange,
+      peopleSearch: a.peopleSearch,
+      dateValue: a.dateValue,
+      onDateChange: a.onDateChange
+    }), R = (d) => {
+      v.value = d;
+    }, B = (d) => {
+      x.value = d;
+    };
+    return (d, t) => (r(), s("div", {
+      class: "column-header",
+      ref: R
+    }, [
+      n("span", {
+        class: "column-name",
+        title: l.columnName,
+        "data-header-label": ""
+      }, C(l.columnName), 9, q),
+      l.filterType !== "none" ? (r(), s("button", {
+        key: 0,
+        class: w([
+          "filter-icon",
+          { "filter-active": e(g) },
+          { "filter-open": e(c) }
+        ]),
+        onClick: t[0] || (t[0] = (...i) => e(o).handleFilterIconClick && e(o).handleFilterIconClick(...i)),
+        "aria-label": `Filter ${l.columnName}`,
+        "aria-expanded": e(c),
+        "aria-haspopup": "dialog",
+        title: `Filter ${l.columnName}`
+      }, [t[6] || (t[6] = n("span", { "aria-hidden": "" }, "▼", -1)), e(g) ? (r(), s("span", J)) : u("", !0)], 10, G)) : u("", !0),
+      (r(), p(M, { to: "body" }, [e(c) && l.filterType !== "none" ? (r(), s("div", {
+        key: 0,
+        ref: B,
+        class: "popover-content",
+        style: K(e(f) ? {
+          position: "fixed",
+          top: e(f).top + "px",
+          left: e(f).left + "px"
+        } : {}),
+        onClick: t[5] || (t[5] = j(() => {
+        }, ["stop"]))
+      }, [n("div", Q, "Filter: " + C(l.columnName), 1), l.filterType === "text" ? (r(), p(I, {
+        key: 0,
+        value: e(T) ?? "",
+        onValueChange: e(A),
+        onApply: e(o).handleTextApply,
+        onClear: e(o).handleTextClear
+      }, null, 8, [
+        "value",
+        "onValueChange",
+        "onApply",
+        "onClear"
+      ])) : l.filterType === "multiSelect" ? (r(), p(z, {
+        key: 1,
+        searchText: e(F),
+        onSearchChange: e(O),
+        options: l.options,
+        filteredOptions: e(k),
+        selected: e(S),
+        onOptionToggle: e(o).handleCheckboxChange,
+        onSelectAll: e(o).handleSelectAll,
+        onClearSelection: e(o).handleClearSelection,
+        onApply: e(o).handleApplyMultiSelect,
+        isLoading: l.isLoadingOptions
+      }, null, 8, [
+        "searchText",
+        "onSearchChange",
+        "options",
+        "filteredOptions",
+        "selected",
+        "onOptionToggle",
+        "onSelectAll",
+        "onClearSelection",
+        "onApply",
+        "isLoading"
+      ])) : l.filterType === "people" ? (r(), p(E, {
+        key: 2,
+        selectedUser: l.selectedUser,
+        searchText: e(V),
+        onSearchChange: e(L),
+        suggestions: e(b),
+        isLoading: e(D),
+        onUserSelect: e(o).handleUserSelect,
+        onClearUser: e(o).handleClearUser,
+        inputRef: e(U)
+      }, null, 8, [
+        "selectedUser",
+        "searchText",
+        "onSearchChange",
+        "suggestions",
+        "isLoading",
+        "onUserSelect",
+        "onClearUser",
+        "inputRef"
+      ])) : l.filterType === "date" ? (r(), s("div", W, [n("div", X, [n("label", Y, [t[7] || (t[7] = y(" From: ", -1)), n("input", {
+        type: "date",
+        value: e(h),
+        onInput: t[1] || (t[1] = (i) => e(N)(i.target.value)),
+        style: { flex: "1" }
+      }, null, 40, Z)]), n("label", _, [t[8] || (t[8] = y(" To: ", -1)), n("input", {
+        type: "date",
+        value: e(m),
+        onInput: t[2] || (t[2] = (i) => e(P)(i.target.value)),
+        style: { flex: "1" }
+      }, null, 40, ee)])]), n("div", te, [n("button", {
+        class: "clear-button",
+        onClick: t[3] || (t[3] = (...i) => e(o).handleDateClear && e(o).handleDateClear(...i)),
+        disabled: !e(h) && !e(m)
+      }, " Clear ", 8, le), n("button", {
+        class: "apply-button",
+        onClick: t[4] || (t[4] = (...i) => e(o).handleDateApply && e(o).handleDateApply(...i))
+      }, " Apply ")])])) : u("", !0)], 4)) : u("", !0)]))
+    ]));
+  }
+});
+export {
+  se as default
+};

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./MultiSelectFilterPopover.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                         */
+var p = /* @__PURE__ */ e(t, [["__scopeId", "data-v-b40a6834"]]);
+export {
+  p as default
+};

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.vue?vue&type=style&index=0&scoped=b40a6834&lang.css

@@ -0,0 +1 @@
+.column-header[data-v-b40a6834]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-b40a6834]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-b40a6834]{width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-b40a6834]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-b40a6834]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-b40a6834]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-b40a6834]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-b40a6834]{background:var(--ogrid-accent,#0078d4);border:1px solid var(--ogrid-bg,#fff);border-radius:50%;width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-b40a6834]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-b40a6834]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-b40a6834]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);color:var(--ogrid-fg,#000000de);border-radius:8px;overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-b40a6834]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-b40a6834]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-b40a6834]{border:1px solid var(--ogrid-border,#0000001f);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);border-radius:4px;padding:6px 10px;font-size:14px}.search-input[data-v-b40a6834]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-b40a6834]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-b40a6834]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-b40a6834]{color:var(--ogrid-accent,#0078d4);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-b40a6834]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-b40a6834]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-b40a6834]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-b40a6834]{min-height:44px}}.popover-option[data-v-b40a6834]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-b40a6834]{border:1px solid var(--ogrid-border,#0000001f);cursor:pointer;border-radius:3px;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-b40a6834]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-b40a6834]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-b40a6834]{min-height:44px;padding:10px 16px}}.clear-button[data-v-b40a6834]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-b40a6834]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-b40a6834]{background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-b40a6834]{min-height:44px;padding:10px 20px}}.apply-button[data-v-b40a6834]:hover{opacity:.85}.loading-container[data-v-b40a6834],.no-results[data-v-b40a6834]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,68 @@
+import { Fragment as r, createElementBlock as o, createElementVNode as l, defineComponent as c, openBlock as i, renderList as u, toDisplayString as a } from "vue";
+var d = { class: "popover-search" }, v = ["value"], p = { class: "result-count" }, y = { class: "select-all-row" }, h = { class: "popover-options" }, g = {
+  key: 0,
+  class: "loading-container"
+}, f = {
+  key: 1,
+  class: "no-results"
+}, C = ["checked", "onChange"], b = { style: {
+  "margin-left": "8px",
+  cursor: "pointer",
+  "font-size": "13px"
+} }, k = { class: "popover-actions" }, x = /* @__PURE__ */ c({
+  __name: "MultiSelectFilterPopover",
+  props: {
+    searchText: {},
+    onSearchChange: { type: Function },
+    options: {},
+    filteredOptions: {},
+    selected: {},
+    onOptionToggle: { type: Function },
+    onSelectAll: { type: Function },
+    onClearSelection: { type: Function },
+    onApply: { type: Function },
+    isLoading: { type: Boolean }
+  },
+  setup(e) {
+    return (S, n) => (i(), o("div", null, [
+      l("div", d, [l("input", {
+        type: "text",
+        class: "search-input",
+        placeholder: "Search...",
+        value: e.searchText,
+        onInput: n[0] || (n[0] = (t) => e.onSearchChange(t.target.value)),
+        autocomplete: "off"
+      }, null, 40, v), l("div", p, a(e.filteredOptions.length) + " of " + a(e.options.length) + " options ", 1)]),
+      l("div", y, [l("button", {
+        type: "button",
+        class: "select-all-button",
+        onClick: n[1] || (n[1] = (...t) => e.onSelectAll && e.onSelectAll(...t))
+      }, " Select All (" + a(e.filteredOptions.length) + ") ", 1), l("button", {
+        type: "button",
+        class: "select-all-button",
+        onClick: n[2] || (n[2] = (...t) => e.onClearSelection && e.onClearSelection(...t))
+      }, " Clear ")]),
+      l("div", h, [e.isLoading ? (i(), o("div", g, "Loading...")) : e.filteredOptions.length === 0 ? (i(), o("div", f, " No options found ")) : (i(!0), o(r, { key: 2 }, u(e.filteredOptions, (t) => (i(), o("div", {
+        key: t,
+        class: "popover-option"
+      }, [l("input", {
+        type: "checkbox",
+        checked: e.selected.has(t),
+        onChange: (s) => e.onOptionToggle(t, s.target.checked),
+        class: "filter-checkbox"
+      }, null, 40, C), l("label", b, a(t), 1)]))), 128))]),
+      l("div", k, [l("button", {
+        type: "button",
+        class: "clear-button",
+        onClick: n[3] || (n[3] = (...t) => e.onClearSelection && e.onClearSelection(...t))
+      }, " Clear "), l("button", {
+        type: "button",
+        class: "apply-button",
+        onClick: n[4] || (n[4] = (...t) => e.onApply && e.onApply(...t))
+      }, " Apply ")])
+    ]));
+  }
+});
+export {
+  x as default
+};

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./PeopleFilterPopover.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                    */
+var o = /* @__PURE__ */ e(t, [["__scopeId", "data-v-58ce6f63"]]);
+export {
+  o as default
+};

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.vue?vue&type=style&index=0&scoped=58ce6f63&lang.css

@@ -0,0 +1 @@
+.column-header[data-v-58ce6f63]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-58ce6f63]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-58ce6f63]{width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-58ce6f63]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-58ce6f63]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-58ce6f63]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-58ce6f63]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-58ce6f63]{background:var(--ogrid-accent,#0078d4);border:1px solid var(--ogrid-bg,#fff);border-radius:50%;width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-58ce6f63]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-58ce6f63]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-58ce6f63]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);color:var(--ogrid-fg,#000000de);border-radius:8px;overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-58ce6f63]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-58ce6f63]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-58ce6f63]{border:1px solid var(--ogrid-border,#0000001f);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);border-radius:4px;padding:6px 10px;font-size:14px}.search-input[data-v-58ce6f63]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-58ce6f63]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-58ce6f63]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-58ce6f63]{color:var(--ogrid-accent,#0078d4);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-58ce6f63]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-58ce6f63]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-58ce6f63]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-58ce6f63]{min-height:44px}}.popover-option[data-v-58ce6f63]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-58ce6f63]{border:1px solid var(--ogrid-border,#0000001f);cursor:pointer;border-radius:3px;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-58ce6f63]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-58ce6f63]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-58ce6f63]{min-height:44px;padding:10px 16px}}.clear-button[data-v-58ce6f63]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-58ce6f63]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-58ce6f63]{background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-58ce6f63]{min-height:44px;padding:10px 20px}}.apply-button[data-v-58ce6f63]:hover{opacity:.85}.loading-container[data-v-58ce6f63],.no-results[data-v-58ce6f63]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}.selected-user-section[data-v-58ce6f63]{border-bottom:1px solid var(--ogrid-border,#e0e0e0);padding:8px 12px}.selected-user-label[data-v-58ce6f63]{color:var(--ogrid-muted,#666);margin-bottom:4px;font-size:11px}.selected-user[data-v-58ce6f63]{justify-content:space-between;align-items:center;gap:8px;display:flex}.user-info[data-v-58ce6f63]{align-items:center;gap:8px;min-width:0;display:flex}.user-text[data-v-58ce6f63]{min-width:0;font-size:13px}.user-text .user-secondary[data-v-58ce6f63]{color:var(--ogrid-muted,#666);font-size:12px}.remove-user-button[data-v-58ce6f63]{cursor:pointer;color:var(--ogrid-muted,#666);background:0 0;border:none;flex-shrink:0;padding:4px}.remove-user-button[data-v-58ce6f63]:hover{color:var(--ogrid-fg,#333)}.native-input-wrapper[data-v-58ce6f63]{border:1px solid var(--ogrid-border,#d1d1d1);background:var(--ogrid-bg,#fff);box-sizing:border-box;border-radius:4px;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 12px;display:flex}.native-input-wrapper[data-v-58ce6f63]:focus-within{border-color:var(--ogrid-primary,#06c);outline:none}.native-input[data-v-58ce6f63]{min-width:0;color:var(--ogrid-fg,#242424);background:0 0;border:none;outline:none;flex:1;padding:0;font-family:inherit;font-size:14px}.native-input[data-v-58ce6f63]::placeholder{color:var(--ogrid-muted,#707070)}.person-option[data-v-58ce6f63]{cursor:pointer;padding:8px 12px}.person-option[data-v-58ce6f63]:hover{background:var(--ogrid-bg-hover,#f5f5f5)}

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,104 @@
+import { Fragment as u, createCommentVNode as d, createElementBlock as r, createElementVNode as t, defineComponent as h, openBlock as i, renderList as y, toDisplayString as o, withKeys as g } from "vue";
+var m = {
+  key: 0,
+  class: "selected-user-section"
+}, f = { class: "selected-user" }, b = { class: "user-info" }, k = ["src"], p = {
+  key: 1,
+  class: "user-avatar",
+  style: {
+    width: "32px",
+    height: "32px",
+    "border-radius": "50%",
+    background: "var(--ogrid-border, #e0e0e0)",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+    "font-size": "12px"
+  }
+}, x = { class: "user-text" }, U = { class: "user-secondary" }, C = { class: "popover-search" }, w = { class: "native-input-wrapper" }, S = ["value"], F = { class: "popover-options" }, N = {
+  key: 0,
+  class: "loading-container"
+}, T = {
+  key: 1,
+  class: "no-results"
+}, K = ["onClick", "onKeydown"], P = { class: "user-info" }, _ = ["src"], B = {
+  key: 1,
+  style: {
+    width: "32px",
+    height: "32px",
+    "border-radius": "50%",
+    background: "var(--ogrid-border, #e0e0e0)",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+    "font-size": "12px"
+  }
+}, L = { class: "user-text" }, R = { class: "user-secondary" }, j = {
+  key: 3,
+  class: "no-results"
+}, z = {
+  key: 1,
+  class: "popover-actions"
+}, I = /* @__PURE__ */ h({
+  __name: "PeopleFilterPopover",
+  props: {
+    selectedUser: {},
+    searchText: {},
+    onSearchChange: { type: Function },
+    suggestions: {},
+    isLoading: { type: Boolean },
+    onUserSelect: { type: Function },
+    onClearUser: { type: Function },
+    inputRef: {}
+  },
+  setup(e) {
+    const l = (n) => n.displayName?.charAt(0) ?? "?", c = (n) => n.id ?? n.email ?? n.displayName ?? "";
+    return (n, a) => (i(), r("div", null, [
+      e.selectedUser ? (i(), r("div", m, [a[3] || (a[3] = t("div", { class: "selected-user-label" }, "Currently filtered by:", -1)), t("div", f, [t("div", b, [e.selectedUser.photo ? (i(), r("img", {
+        key: 0,
+        src: e.selectedUser.photo,
+        alt: "",
+        width: "32",
+        height: "32",
+        style: { "border-radius": "50%" }
+      }, null, 8, k)) : (i(), r("span", p, o(l(e.selectedUser)), 1)), t("div", x, [t("div", null, o(e.selectedUser.displayName), 1), t("div", U, o(e.selectedUser.email), 1)])]), t("button", {
+        type: "button",
+        class: "remove-user-button",
+        onClick: a[0] || (a[0] = (...s) => e.onClearUser && e.onClearUser(...s)),
+        "aria-label": "Remove filter"
+      }, " ✕ ")])])) : d("", !0),
+      t("div", C, [t("div", w, [t("input", {
+        ref: e.inputRef,
+        type: "text",
+        class: "native-input",
+        placeholder: "Search for a person...",
+        value: e.searchText,
+        onInput: a[1] || (a[1] = (s) => e.onSearchChange(s.target.value)),
+        autocomplete: "off"
+      }, null, 40, S)])]),
+      t("div", F, [e.isLoading && e.searchText.trim() ? (i(), r("div", N, " Searching... ")) : e.suggestions.length === 0 && e.searchText.trim() ? (i(), r("div", T, " No results found ")) : e.searchText.trim() ? (i(!0), r(u, { key: 2 }, y(e.suggestions, (s) => (i(), r("div", {
+        key: c(s),
+        class: "person-option",
+        onClick: (v) => e.onUserSelect(s),
+        onKeydown: g((v) => e.onUserSelect(s), ["enter"]),
+        role: "button",
+        tabindex: "0"
+      }, [t("div", P, [s.photo ? (i(), r("img", {
+        key: 0,
+        src: s.photo,
+        alt: "",
+        width: "32",
+        height: "32",
+        style: { "border-radius": "50%" }
+      }, null, 8, _)) : (i(), r("span", B, o(l(s)), 1)), t("div", L, [t("div", null, o(s.displayName), 1), t("div", R, o(s.email), 1)])])], 40, K))), 128)) : (i(), r("div", j, "Type to search..."))]),
+      e.selectedUser ? (i(), r("div", z, [t("button", {
+        type: "button",
+        class: "clear-button",
+        onClick: a[2] || (a[2] = (...s) => e.onClearUser && e.onClearUser(...s))
+      }, " Clear Filter ")])) : d("", !0)
+    ]));
+  }
+});
+export {
+  I as default
+};

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -0,0 +1,7 @@
+import e from "./TextFilterPopover.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                  */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+var o = /* @__PURE__ */ t(e, [["__scopeId", "data-v-0baa080d"]]);
+export {
+  o as default
+};

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.vue?vue&type=style&index=0&scoped=0baa080d&lang.css

@@ -0,0 +1 @@
+.column-header[data-v-0baa080d]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-0baa080d]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-0baa080d]{width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-0baa080d]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-0baa080d]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-0baa080d]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-0baa080d]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-0baa080d]{background:var(--ogrid-accent,#0078d4);border:1px solid var(--ogrid-bg,#fff);border-radius:50%;width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-0baa080d]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-0baa080d]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-0baa080d]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);color:var(--ogrid-fg,#000000de);border-radius:8px;overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-0baa080d]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-0baa080d]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-0baa080d]{border:1px solid var(--ogrid-border,#0000001f);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);border-radius:4px;padding:6px 10px;font-size:14px}.search-input[data-v-0baa080d]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-0baa080d]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-0baa080d]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-0baa080d]{color:var(--ogrid-accent,#0078d4);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-0baa080d]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-0baa080d]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-0baa080d]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-0baa080d]{min-height:44px}}.popover-option[data-v-0baa080d]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-0baa080d]{border:1px solid var(--ogrid-border,#0000001f);cursor:pointer;border-radius:3px;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-0baa080d]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-0baa080d]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-0baa080d]{min-height:44px;padding:10px 16px}}.clear-button[data-v-0baa080d]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-0baa080d]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-0baa080d]{background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-0baa080d]{min-height:44px;padding:10px 20px}}.apply-button[data-v-0baa080d]:hover{opacity:.85}.loading-container[data-v-0baa080d],.no-results[data-v-0baa080d]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import { createElementBlock as r, createElementVNode as o, defineComponent as p, openBlock as i } from "vue";
+var s = { class: "popover-search" }, v = ["value"], d = { class: "popover-actions" }, y = ["disabled"], C = /* @__PURE__ */ p({
+  __name: "TextFilterPopover",
+  props: {
+    value: {},
+    onValueChange: { type: Function },
+    onApply: { type: Function },
+    onClear: { type: Function }
+  },
+  setup(e) {
+    const a = e, u = (l) => {
+      l.key === "Enter" && (l.preventDefault(), a.onApply());
+    };
+    return (l, t) => (i(), r("div", null, [o("div", s, [o("input", {
+      type: "text",
+      class: "search-input",
+      placeholder: "Enter search term...",
+      value: e.value,
+      onInput: t[0] || (t[0] = (n) => e.onValueChange(n.target.value)),
+      onKeydown: u,
+      autocomplete: "off"
+    }, null, 40, v)]), o("div", d, [o("button", {
+      type: "button",
+      class: "clear-button",
+      onClick: t[1] || (t[1] = (...n) => e.onClear && e.onClear(...n)),
+      disabled: !e.value
+    }, " Clear ", 8, y), o("button", {
+      type: "button",
+      class: "apply-button",
+      onClick: t[2] || (t[2] = (...n) => e.onApply && e.onApply(...n))
+    }, " Apply ")])]));
+  }
+});
+export {
+  C as default
+};