@alaarab/ogrid-vue-radix 2.4.2 → 2.5.0

package/dist/esm/ColumnChooser/ColumnChooser.css

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

package/dist/esm/ColumnChooser/ColumnChooser.vue.js

@@ -1,7 +1,7 @@
-import _sfc_main from "./ColumnChooser.vue2.js";
+import o from "./ColumnChooser.vue2.js";
 import './ColumnChooser.css';
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ColumnChooser = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b4568bb4"]]);
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const s = /* @__PURE__ */ r(o, [["__scopeId", "data-v-b4568bb4"]]);
 export {
-  ColumnChooser as default
+  s as default
 };

package/dist/esm/ColumnChooser/ColumnChooser.vue2.js

@@ -1,16 +1,10 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, toDisplayString, Transition, Fragment, renderList, createBlock } from "vue";
-import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
-import { useColumnChooserState } from "@alaarab/ogrid-vue";
-const _hoisted_1 = {
+import { defineComponent as x, computed as h, openBlock as d, createElementBlock as f, normalizeClass as _, createVNode as c, unref as e, withCtx as l, createElementVNode as s, toDisplayString as o, Transition as I, Fragment as V, renderList as S, createBlock as A } from "vue";
+import { Menu as B, MenuButton as M, MenuItems as N, MenuItem as $ } from "@headlessui/vue";
+import { useColumnChooserState as w } from "@alaarab/ogrid-vue";
+const E = {
   class: "chevron",
   "aria-hidden": ""
-};
-const _hoisted_2 = { class: "header" };
-const _hoisted_3 = { class: "options-list" };
-const _hoisted_4 = ["id", "checked", "disabled", "onChange"];
-const _hoisted_5 = ["for"];
-const _hoisted_6 = { class: "actions" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, q = { class: "header" }, z = { class: "options-list" }, D = ["id", "checked", "disabled", "onChange"], F = ["for"], L = { class: "actions" }, J = /* @__PURE__ */ x({
   __name: "ColumnChooser",
   props: {
     columns: {},
@@ -18,111 +12,105 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onVisibilityChange: {},
     className: { default: "" }
   },
-  setup(__props) {
-    const props = __props;
-    const {
-      open,
-      setOpen,
-      handleCheckboxChange: setColumnVisible,
-      handleSelectAll,
-      handleClearAll,
-      visibleCount,
-      totalCount
-    } = useColumnChooserState({
-      columns: computed(() => props.columns),
-      visibleColumns: computed(() => props.visibleColumns),
-      onVisibilityChange: props.onVisibilityChange
-    });
-    const handleCheckboxChange = (columnKey) => (e) => {
-      const target = e.target;
-      setColumnVisible(columnKey)(target.checked);
+  setup(a) {
+    const r = a, {
+      open: v,
+      setOpen: k,
+      handleCheckboxChange: g,
+      handleSelectAll: u,
+      handleClearAll: m,
+      visibleCount: C,
+      totalCount: p
+    } = w({
+      columns: h(() => r.columns),
+      visibleColumns: h(() => r.visibleColumns),
+      onVisibilityChange: r.onVisibilityChange
+    }), y = (b) => (n) => {
+      const i = n.target;
+      g(b)(i.checked);
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["container", __props.className])
-      }, [
-        createVNode(unref(Menu), null, {
-          default: withCtx(({ open: isOpen }) => [
-            createVNode(unref(MenuButton), {
-              class: "trigger-button",
-              "aria-expanded": isOpen,
-              "aria-haspopup": "listbox",
-              onClick: _cache[0] || (_cache[0] = ($event) => unref(setOpen)(!unref(open)))
-            }, {
-              default: withCtx(() => [
-                _cache[3] || (_cache[3] = createElementVNode("span", {
-                  class: "button-icon",
-                  "aria-hidden": ""
-                }, "⚙", -1)),
-                createElementVNode("span", null, "Column Visibility (" + toDisplayString(unref(visibleCount)) + " of " + toDisplayString(unref(totalCount)) + ")", 1),
-                createElementVNode("span", _hoisted_1, toDisplayString(isOpen ? "▲" : "▼"), 1)
-              ]),
-              _: 2
-            }, 1032, ["aria-expanded"]),
-            createVNode(Transition, {
-              "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: withCtx(() => [
-                createVNode(unref(MenuItems), { class: "dropdown" }, {
-                  default: withCtx(() => [
-                    createElementVNode("div", _hoisted_2, "Select Columns (" + toDisplayString(unref(visibleCount)) + " of " + toDisplayString(unref(totalCount)) + ")", 1),
-                    createElementVNode("div", _hoisted_3, [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
-                        return openBlock(), createBlock(unref(MenuItem), {
-                          key: column.columnId,
-                          as: "div",
-                          class: "option-item"
-                        }, {
-                          default: withCtx(() => [
-                            createElementVNode("input", {
-                              id: `col-${column.columnId}`,
-                              type: "checkbox",
-                              checked: __props.visibleColumns.has(column.columnId),
-                              disabled: column.required === true,
-                              class: "checkbox-input",
-                              onChange: ($event) => handleCheckboxChange(column.columnId)
-                            }, null, 40, _hoisted_4),
-                            createElementVNode("label", {
-                              for: `col-${column.columnId}`,
-                              class: "checkbox-label"
-                            }, toDisplayString(column.name), 9, _hoisted_5)
-                          ]),
-                          _: 2
-                        }, 1024);
-                      }), 128))
-                    ]),
-                    createElementVNode("div", _hoisted_6, [
-                      createElementVNode("button", {
-                        type: "button",
-                        class: "clear-button",
-                        onClick: _cache[1] || (_cache[1] = //@ts-ignore
-                        (...args) => unref(handleClearAll) && unref(handleClearAll)(...args))
-                      }, " Clear All "),
-                      createElementVNode("button", {
-                        type: "button",
-                        class: "select-all-button",
-                        onClick: _cache[2] || (_cache[2] = //@ts-ignore
-                        (...args) => unref(handleSelectAll) && unref(handleSelectAll)(...args))
-                      }, " Select All ")
-                    ])
+    return (b, n) => (d(), f("div", {
+      class: _(["container", a.className])
+    }, [
+      c(e(B), null, {
+        default: l(({ open: i }) => [
+          c(e(M), {
+            class: "trigger-button",
+            "aria-expanded": i,
+            "aria-haspopup": "listbox",
+            onClick: n[0] || (n[0] = (t) => e(k)(!e(v)))
+          }, {
+            default: l(() => [
+              n[3] || (n[3] = s("span", {
+                class: "button-icon",
+                "aria-hidden": ""
+              }, "⚙", -1)),
+              s("span", null, "Column Visibility (" + o(e(C)) + " of " + o(e(p)) + ")", 1),
+              s("span", E, o(i ? "▲" : "▼"), 1)
+            ]),
+            _: 2
+          }, 1032, ["aria-expanded"]),
+          c(I, {
+            "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: l(() => [
+              c(e(N), { class: "dropdown" }, {
+                default: l(() => [
+                  s("div", q, "Select Columns (" + o(e(C)) + " of " + o(e(p)) + ")", 1),
+                  s("div", z, [
+                    (d(!0), f(V, null, S(a.columns, (t) => (d(), A(e($), {
+                      key: t.columnId,
+                      as: "div",
+                      class: "option-item"
+                    }, {
+                      default: l(() => [
+                        s("input", {
+                          id: `col-${t.columnId}`,
+                          type: "checkbox",
+                          checked: a.visibleColumns.has(t.columnId),
+                          disabled: t.required === !0,
+                          class: "checkbox-input",
+                          onChange: (T) => y(t.columnId)
+                        }, null, 40, D),
+                        s("label", {
+                          for: `col-${t.columnId}`,
+                          class: "checkbox-label"
+                        }, o(t.name), 9, F)
+                      ]),
+                      _: 2
+                    }, 1024))), 128))
                   ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        })
-      ], 2);
-    };
+                  s("div", L, [
+                    s("button", {
+                      type: "button",
+                      class: "clear-button",
+                      onClick: n[1] || (n[1] = //@ts-ignore
+                      (...t) => e(m) && e(m)(...t))
+                    }, " Clear All "),
+                    s("button", {
+                      type: "button",
+                      class: "select-all-button",
+                      onClick: n[2] || (n[2] = //@ts-ignore
+                      (...t) => e(u) && e(u)(...t))
+                    }, " Select All ")
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ], 2));
   }
 });
 export {
-  _sfc_main as default
+  J as default
 };

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.css

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

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue.js

@@ -1,7 +1,7 @@
-import _sfc_main from "./ColumnHeaderFilter.vue2.js";
+import o from "./ColumnHeaderFilter.vue2.js";
 import './ColumnHeaderFilter.css';
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ColumnHeaderFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bc6c4b01"]]);
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bc6c4b01"]]);
 export {
-  ColumnHeaderFilter as default
+  a as default
 };