@alaarab/ogrid-vue-radix 2.0.19 → 2.0.22

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.css

@@ -1,4 +1,4 @@
-.column-header[data-v-daf1f1c5] {
+.column-header[data-v-fe4323a7] {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -8,14 +8,14 @@
   position: relative;
   box-sizing: border-box;
 }
-.header-content[data-v-daf1f1c5] {
+.header-content[data-v-fe4323a7] {
   display: flex;
   align-items: center;
   flex: 1;
   min-width: 0;
   overflow: hidden;
 }
-.column-name[data-v-daf1f1c5] {
+.column-name[data-v-fe4323a7] {
   display: block;
   min-width: 0;
   max-width: 100%;
@@ -26,37 +26,14 @@
   font-size: 14px;
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
-.header-actions[data-v-daf1f1c5] {
+.header-actions[data-v-fe4323a7] {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-left: auto;
   flex-shrink: 0;
 }
-.sort-icon[data-v-daf1f1c5] {
-  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;
-  font-size: 14px;
-}
-.sort-icon[data-v-daf1f1c5]:hover {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
-.sort-icon.sort-active[data-v-daf1f1c5] {
-  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
-.filter-icon[data-v-daf1f1c5] {
+.filter-icon[data-v-fe4323a7] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -72,18 +49,18 @@
   position: relative;
   font-size: 14px;
 }
-.filter-icon[data-v-daf1f1c5]:hover {
+.filter-icon[data-v-fe4323a7]: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-daf1f1c5] {
+.filter-icon.filter-active[data-v-fe4323a7] {
   background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
   color: var(--ogrid-accent, #0078d4);
 }
-.filter-icon.filter-open[data-v-daf1f1c5] {
+.filter-icon.filter-open[data-v-fe4323a7] {
   background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
 }
-.filter-badge[data-v-daf1f1c5] {
+.filter-badge[data-v-fe4323a7] {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -93,7 +70,7 @@
   border-radius: 50%;
   border: 1px solid var(--ogrid-bg, #fff);
 }
-.popover-content[data-v-daf1f1c5] {
+.popover-content[data-v-fe4323a7] {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
@@ -107,7 +84,7 @@
   overflow: hidden;
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
-.popover-header[data-v-daf1f1c5] {
+.popover-header[data-v-fe4323a7] {
   padding: 10px 14px;
   font-size: 12px;
   font-weight: 600;
@@ -115,11 +92,11 @@
   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-daf1f1c5] {
+.popover-search[data-v-fe4323a7] {
   padding: 10px 12px;
   border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
-.search-input[data-v-daf1f1c5] {
+.search-input[data-v-fe4323a7] {
   width: 100%;
   padding: 6px 10px;
   border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
@@ -129,23 +106,23 @@
   background: var(--ogrid-bg, #fff);
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
-.search-input[data-v-daf1f1c5]:focus {
+.search-input[data-v-fe4323a7]:focus {
   outline: none;
   border-color: var(--ogrid-accent, #0078d4);
 }
-.result-count[data-v-daf1f1c5] {
+.result-count[data-v-fe4323a7] {
   margin-top: 6px;
   font-size: 11px;
   color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
 }
-.select-all-row[data-v-daf1f1c5] {
+.select-all-row[data-v-fe4323a7] {
   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-daf1f1c5] {
+.select-all-button[data-v-fe4323a7] {
   background: none;
   border: none;
   color: var(--ogrid-accent, #0078d4);
@@ -155,25 +132,25 @@
   padding: 4px 8px;
   border-radius: 4px;
 }
-.select-all-button[data-v-daf1f1c5]:hover {
+.select-all-button[data-v-fe4323a7]:hover {
   background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
 }
-.popover-options[data-v-daf1f1c5] {
+.popover-options[data-v-fe4323a7] {
   overflow-y: auto;
   max-height: 250px;
   padding: 6px 0;
 }
-.popover-option[data-v-daf1f1c5] {
+.popover-option[data-v-fe4323a7] {
   padding: 4px 12px;
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
-.popover-option[data-v-daf1f1c5]:hover {
+.popover-option[data-v-fe4323a7]:hover {
   background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
 }
-.filter-checkbox[data-v-daf1f1c5] {
+.filter-checkbox[data-v-fe4323a7] {
   width: 16px;
   height: 16px;
   border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
@@ -181,7 +158,7 @@
   cursor: pointer;
   flex-shrink: 0;
 }
-.popover-actions[data-v-daf1f1c5] {
+.popover-actions[data-v-fe4323a7] {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
@@ -189,7 +166,7 @@
   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-daf1f1c5] {
+.clear-button[data-v-fe4323a7] {
   padding: 6px 12px;
   border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   border-radius: 4px;
@@ -198,15 +175,15 @@
   font-size: 12px;
   cursor: pointer;
 }
-.clear-button[data-v-daf1f1c5]:hover {
+.clear-button[data-v-fe4323a7]: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-daf1f1c5]:disabled {
+.clear-button[data-v-fe4323a7]:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.apply-button[data-v-daf1f1c5] {
+.apply-button[data-v-fe4323a7] {
   padding: 6px 16px;
   border: none;
   border-radius: 4px;
@@ -216,11 +193,11 @@
   font-weight: 600;
   cursor: pointer;
 }
-.apply-button[data-v-daf1f1c5]:hover {
+.apply-button[data-v-fe4323a7]:hover {
   opacity: 0.85;
 }
-.loading-container[data-v-daf1f1c5],
-.no-results[data-v-daf1f1c5] {
+.loading-container[data-v-fe4323a7],
+.no-results[data-v-fe4323a7] {
   padding: 20px;
   text-align: center;
   font-size: 13px;

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

@@ -37,30 +37,6 @@
   flex-shrink: 0;
 }
 
-.sort-icon {
-  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;
-  font-size: 14px;
-}
-.sort-icon:hover {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
-.sort-icon.sort-active {
-  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
-
 .filter-icon {
   display: flex;
   align-items: center;

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

@@ -1,7 +1,7 @@
 import _sfc_main 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-daf1f1c5"]]);
+const ColumnHeaderFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fe4323a7"]]);
 export {
   ColumnHeaderFilter as default
 };

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue2.js

@@ -7,21 +7,19 @@ const _hoisted_1 = { class: "header-content" };
 const _hoisted_2 = ["title"];
 const _hoisted_3 = { class: "header-actions" };
 const _hoisted_4 = ["aria-label", "title"];
-const _hoisted_5 = { "aria-hidden": "" };
-const _hoisted_6 = ["aria-label", "title"];
-const _hoisted_7 = {
+const _hoisted_5 = {
   key: 0,
   class: "filter-badge"
 };
-const _hoisted_8 = { class: "popover-header" };
-const _hoisted_9 = { key: 3 };
-const _hoisted_10 = { style: { "padding": "8px 12px", "display": "flex", "flex-direction": "column", "gap": "6px" } };
+const _hoisted_6 = { class: "popover-header" };
+const _hoisted_7 = { key: 3 };
+const _hoisted_8 = { style: { "padding": "8px 12px", "display": "flex", "flex-direction": "column", "gap": "6px" } };
+const _hoisted_9 = { style: { "display": "flex", "align-items": "center", "gap": "6px", "font-size": "12px" } };
+const _hoisted_10 = ["value"];
 const _hoisted_11 = { style: { "display": "flex", "align-items": "center", "gap": "6px", "font-size": "12px" } };
 const _hoisted_12 = ["value"];
-const _hoisted_13 = { style: { "display": "flex", "align-items": "center", "gap": "6px", "font-size": "12px" } };
-const _hoisted_14 = ["value"];
-const _hoisted_15 = { class: "popover-actions" };
-const _hoisted_16 = ["disabled"];
+const _hoisted_13 = { class: "popover-actions" };
+const _hoisted_14 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ColumnHeaderFilter",
   props: {
@@ -90,12 +88,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const setPopoverRefEl = (el) => {
       popoverRef.value = el;
     };
-    const getSortIcon = () => {
-      if (props.isSorted) {
-        return props.isSortedDescending ? "↓" : "↑";
-      }
-      return "⇅";
-    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "column-header",
@@ -109,44 +101,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, toDisplayString(__props.columnName), 9, _hoisted_2)
         ]),
         createElementVNode("div", _hoisted_3, [
-          __props.onSort ? (openBlock(), createElementBlock("button", {
-            key: 0,
-            type: "button",
-            class: normalizeClass(["sort-icon", { "sort-active": __props.isSorted }]),
-            onClick: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => unref(handlers).handleSortClick && unref(handlers).handleSortClick(...args)),
-            "aria-label": `Sort by ${__props.columnName}`,
-            title: __props.isSorted ? __props.isSortedDescending ? "Sorted descending" : "Sorted ascending" : "Sort"
-          }, [
-            createElementVNode("span", _hoisted_5, toDisplayString(getSortIcon()), 1)
-          ], 10, _hoisted_4)) : createCommentVNode("", true),
           __props.filterType !== "none" ? (openBlock(), createElementBlock("button", {
-            key: 1,
+            key: 0,
             class: normalizeClass([
               "filter-icon",
               { "filter-active": unref(hasActiveFilter) },
               { "filter-open": unref(isFilterOpen) }
             ]),
-            onClick: _cache[1] || (_cache[1] = //@ts-ignore
+            onClick: _cache[0] || (_cache[0] = //@ts-ignore
             (...args) => unref(handlers).handleFilterIconClick && unref(handlers).handleFilterIconClick(...args)),
             "aria-label": `Filter ${__props.columnName}`,
             title: `Filter ${__props.columnName}`
           }, [
-            _cache[7] || (_cache[7] = createElementVNode("span", { "aria-hidden": "" }, "▼", -1)),
-            unref(hasActiveFilter) ? (openBlock(), createElementBlock("span", _hoisted_7)) : createCommentVNode("", true)
-          ], 10, _hoisted_6)) : createCommentVNode("", true)
+            _cache[6] || (_cache[6] = createElementVNode("span", { "aria-hidden": "" }, "▼", -1)),
+            unref(hasActiveFilter) ? (openBlock(), createElementBlock("span", _hoisted_5)) : createCommentVNode("", true)
+          ], 10, _hoisted_4)) : createCommentVNode("", true)
         ]),
         unref(isFilterOpen) && __props.filterType !== "none" ? (openBlock(), createElementBlock("div", {
           key: 0,
           ref: setPopoverRefEl,
           class: "popover-content",
-          onClick: _cache[6] || (_cache[6] = withModifiers(() => {
+          onClick: _cache[5] || (_cache[5] = withModifiers(() => {
           }, ["stop"]))
         }, [
-          createElementVNode("div", _hoisted_8, "Filter: " + toDisplayString(__props.columnName), 1),
+          createElementVNode("div", _hoisted_6, "Filter: " + toDisplayString(__props.columnName), 1),
           __props.filterType === "text" ? (openBlock(), createBlock(TextFilterPopover, {
             key: 0,
-            value: unref(tempTextValue),
+            value: unref(tempTextValue) ?? "",
             onValueChange: unref(setTempTextValue),
             onApply: unref(handlers).handleTextApply,
             onClear: unref(handlers).handleTextClear
@@ -172,37 +153,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onUserSelect: unref(handlers).handleUserSelect,
             onClearUser: unref(handlers).handleClearUser,
             inputRef: unref(peopleInputRef)
-          }, null, 8, ["selectedUser", "searchText", "onSearchChange", "suggestions", "isLoading", "onUserSelect", "onClearUser", "inputRef"])) : __props.filterType === "date" ? (openBlock(), createElementBlock("div", _hoisted_9, [
-            createElementVNode("div", _hoisted_10, [
-              createElementVNode("label", _hoisted_11, [
-                _cache[8] || (_cache[8] = createTextVNode(" From: ", -1)),
+          }, null, 8, ["selectedUser", "searchText", "onSearchChange", "suggestions", "isLoading", "onUserSelect", "onClearUser", "inputRef"])) : __props.filterType === "date" ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            createElementVNode("div", _hoisted_8, [
+              createElementVNode("label", _hoisted_9, [
+                _cache[7] || (_cache[7] = createTextVNode(" From: ", -1)),
                 createElementVNode("input", {
                   type: "date",
                   value: unref(tempDateFrom),
-                  onInput: _cache[2] || (_cache[2] = ($event) => unref(setTempDateFrom)($event.target.value)),
+                  onInput: _cache[1] || (_cache[1] = ($event) => unref(setTempDateFrom)($event.target.value)),
                   style: { "flex": "1" }
-                }, null, 40, _hoisted_12)
+                }, null, 40, _hoisted_10)
               ]),
-              createElementVNode("label", _hoisted_13, [
-                _cache[9] || (_cache[9] = createTextVNode(" To: ", -1)),
+              createElementVNode("label", _hoisted_11, [
+                _cache[8] || (_cache[8] = createTextVNode(" To: ", -1)),
                 createElementVNode("input", {
                   type: "date",
                   value: unref(tempDateTo),
-                  onInput: _cache[3] || (_cache[3] = ($event) => unref(setTempDateTo)($event.target.value)),
+                  onInput: _cache[2] || (_cache[2] = ($event) => unref(setTempDateTo)($event.target.value)),
                   style: { "flex": "1" }
-                }, null, 40, _hoisted_14)
+                }, null, 40, _hoisted_12)
               ])
             ]),
-            createElementVNode("div", _hoisted_15, [
+            createElementVNode("div", _hoisted_13, [
               createElementVNode("button", {
                 class: "clear-button",
-                onClick: _cache[4] || (_cache[4] = //@ts-ignore
+                onClick: _cache[3] || (_cache[3] = //@ts-ignore
                 (...args) => unref(handlers).handleDateClear && unref(handlers).handleDateClear(...args)),
                 disabled: !unref(tempDateFrom) && !unref(tempDateTo)
-              }, " Clear ", 8, _hoisted_16),
+              }, " Clear ", 8, _hoisted_14),
               createElementVNode("button", {
                 class: "apply-button",
-                onClick: _cache[5] || (_cache[5] = //@ts-ignore
+                onClick: _cache[4] || (_cache[4] = //@ts-ignore
                 (...args) => unref(handlers).handleDateApply && unref(handlers).handleDateApply(...args))
               }, " Apply ")
             ])

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.css

@@ -33,29 +33,6 @@
   margin-left: auto;
   flex-shrink: 0;
 }
-.sort-icon[data-v-b54ed9a8] {
-  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;
-  font-size: 14px;
-}
-.sort-icon[data-v-b54ed9a8]:hover {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
-.sort-icon.sort-active[data-v-b54ed9a8] {
-  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
 .filter-icon[data-v-b54ed9a8] {
   display: flex;
   align-items: center;

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.css

@@ -33,29 +33,6 @@
   margin-left: auto;
   flex-shrink: 0;
 }
-.sort-icon[data-v-58ce6f63] {
-  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;
-  font-size: 14px;
-}
-.sort-icon[data-v-58ce6f63]:hover {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
-.sort-icon.sort-active[data-v-58ce6f63] {
-  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
 .filter-icon[data-v-58ce6f63] {
   display: flex;
   align-items: center;

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.css

@@ -33,29 +33,6 @@
   margin-left: auto;
   flex-shrink: 0;
 }
-.sort-icon[data-v-0baa080d] {
-  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;
-  font-size: 14px;
-}
-.sort-icon[data-v-0baa080d]:hover {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
-.sort-icon.sort-active[data-v-0baa080d] {
-  background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
 .filter-icon[data-v-0baa080d] {
   display: flex;
   align-items: center;