@conduction/nextcloud-vue 2.62.0 → 2.63.0

package/dist/esm/components/CnDataTable/CnDataTable.vue3.js

@@ -1,4 +1,4 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, createVNode, Fragment, renderList, normalizeStyle, withKeys, renderSlot, createTextVNode, withModifiers, createBlock } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createVNode, normalizeStyle, withKeys, withModifiers, renderSlot, createTextVNode } from 'vue';
 
 const _hoisted_1 = {
   key: 0,
@@ -9,62 +9,68 @@ const _hoisted_3 = {
   key: 0,
   class: "cn-data-table__count"
 };
-const _hoisted_4 = {
-  key: 1,
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = ["aria-label", "onClick"];
+const _hoisted_6 = {
+  key: 3,
   class: "cn-table-loading",
   "data-testid": "cn-object-list-loading"
 };
-const _hoisted_5 = ["tabindex", "role", "aria-label"];
-const _hoisted_6 = { key: 0 };
-const _hoisted_7 = {
+const _hoisted_7 = ["tabindex", "role", "aria-label"];
+const _hoisted_8 = { key: 0 };
+const _hoisted_9 = {
   key: 0,
   class: "cn-table-col--checkbox"
 };
-const _hoisted_8 = {
+const _hoisted_10 = {
   key: 1,
   class: "cn-table-col--icon"
 };
-const _hoisted_9 = ["tabindex", "aria-sort", "title", "onClick", "onKeydown"];
-const _hoisted_10 = {
+const _hoisted_11 = ["tabindex", "aria-sort", "data-filtered", "title", "onClick", "onKeydown"];
+const _hoisted_12 = {
   key: 0,
   class: "cn-table-sort-indicator"
 };
-const _hoisted_11 = {
+const _hoisted_13 = {
   key: 1,
   class: "cn-table-sort-badge"
 };
-const _hoisted_12 = {
+const _hoisted_14 = ["aria-label", "aria-expanded", "onClick"];
+const _hoisted_15 = {
   key: 2,
   class: "cn-table-col--actions"
 };
-const _hoisted_13 = {
+const _hoisted_16 = {
   key: 0,
   class: "cn-table-empty",
   "data-testid": "cn-object-list-empty"
 };
-const _hoisted_14 = ["colspan"];
-const _hoisted_15 = ["data-testid-row-id", "onClick", "onAuxclick", "onContextmenu"];
-const _hoisted_16 = {
+const _hoisted_17 = ["colspan"];
+const _hoisted_18 = ["data-testid-row-id", "onClick", "onAuxclick", "onContextmenu"];
+const _hoisted_19 = {
   key: 1,
   class: "cn-table-col--icon"
 };
-const _hoisted_17 = ["href", "aria-label", "onClick"];
-const _hoisted_18 = {
+const _hoisted_20 = ["href", "aria-label", "onClick"];
+const _hoisted_21 = {
   key: 2,
   class: "cn-table-row-indicators",
   "data-testid": "cn-row-indicators"
 };
-const _hoisted_19 = ["title", "data-testid"];
-const _hoisted_20 = { class: "hidden-visually" };
-const _hoisted_21 = {
-  key: 3,
+const _hoisted_22 = ["title", "data-testid"];
+const _hoisted_23 = { class: "hidden-visually" };
+const _hoisted_24 = {
+  key: 5,
   class: "cn-data-table__footer"
 };
-const _hoisted_22 = ["href"];
+const _hoisted_25 = ["href"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnColumnFilterPopover = resolveComponent("CnColumnFilterPopover");
   const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
   const _component_NcCheckboxRadioSwitch = resolveComponent("NcCheckboxRadioSwitch");
+  const _component_FilterIcon = resolveComponent("FilterIcon");
+  const _component_FilterOutline = resolveComponent("FilterOutline");
   const _component_CnIcon = resolveComponent("CnIcon");
   const _component_CnLockIndicator = resolveComponent("CnLockIndicator");
   const _component_CnCellRenderer = resolveComponent("CnCellRenderer");
@@ -85,8 +91,44 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             : createCommentVNode("v-if", true)
         ]))
       : createCommentVNode("v-if", true),
+    (!$options.isLoading && $options.activeColumnFilterChips.length > 0)
+      ? (openBlock(), createElementBlock("ul", {
+          key: 1,
+          class: "cn-data-table__filter-chips",
+          "aria-label": $options.activeFiltersLabel,
+          "data-testid": "cn-table-filter-chips"
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($options.activeColumnFilterChips, (chip) => {
+            return (openBlock(), createElementBlock("li", {
+              key: chip.key,
+              class: "cn-data-table__filter-chip"
+            }, [
+              createElementVNode("span", null, toDisplayString(chip.text), 1 /* TEXT */),
+              createElementVNode("button", {
+                type: "button",
+                class: "cn-data-table__filter-chip-remove",
+                "aria-label": chip.removeLabel,
+                "data-testid": "cn-table-filter-chip-remove",
+                onClick: $event => ($options.clearColumnFilter(chip.col))
+              }, " × ", 8 /* PROPS */, _hoisted_5)
+            ]))
+          }), 128 /* KEYED_FRAGMENT */))
+        ], 8 /* PROPS */, _hoisted_4))
+      : createCommentVNode("v-if", true),
+    ($options.openFilterColumn)
+      ? (openBlock(), createBlock(_component_CnColumnFilterPopover, {
+          key: $data.openFilterKey,
+          def: $options.filterDefFor($options.openFilterColumn),
+          state: $options.columnFilterStateFor($options.openFilterColumn),
+          label: $options.translateLabel($options.openFilterColumn.label),
+          anchorRect: $data.filterAnchorRect,
+          register: $props.filterRegister,
+          onApply: _cache[0] || (_cache[0] = (state) => $options.applyColumnFilter($options.openFilterColumn, state)),
+          onClose: $options.closeColumnFilter
+        }, null, 8 /* PROPS */, ["def", "state", "label", "anchorRect", "register", "onClose"]))
+      : createCommentVNode("v-if", true),
     ($options.isLoading)
-      ? (openBlock(), createElementBlock("div", _hoisted_4, [
+      ? (openBlock(), createElementBlock("div", _hoisted_6, [
           createVNode(_component_NcLoadingIcon, {
             size: 32,
             "aria-hidden": "true"
@@ -94,7 +136,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("p", null, toDisplayString($props.loadingText), 1 /* TEXT */)
         ]))
       : (openBlock(), createElementBlock("div", {
-          key: 2,
+          key: 4,
           ref: "scrollEl",
           class: "cn-data-table__scroll",
           tabindex: $data.isScrollable ? 0 : undefined,
@@ -106,10 +148,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "data-testid": "cn-object-list-table"
           }, [
             (!$props.hideHeader)
-              ? (openBlock(), createElementBlock("thead", _hoisted_6, [
+              ? (openBlock(), createElementBlock("thead", _hoisted_8, [
                   createElementVNode("tr", null, [
                     ($props.selectable)
-                      ? (openBlock(), createElementBlock("th", _hoisted_7, [
+                      ? (openBlock(), createElementBlock("th", _hoisted_9, [
                           createVNode(_component_NcCheckboxRadioSwitch, {
                             modelValue: $options.allSelected,
                             indeterminate: $options.someSelected && !$options.allSelected,
@@ -119,7 +161,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         ]))
                       : createCommentVNode("v-if", true),
                     ($props.rowIcon)
-                      ? (openBlock(), createElementBlock("th", _hoisted_8))
+                      ? (openBlock(), createElementBlock("th", _hoisted_10))
                       : createCommentVNode("v-if", true),
                     (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectiveColumns, (col) => {
                       return (openBlock(), createElementBlock("th", {
@@ -131,6 +173,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         style: normalizeStyle(col.width ? { width: col.width } : {}),
                         tabindex: col.sortable ? 0 : null,
                         "aria-sort": $options.ariaSortFor(col),
+                        "data-filtered": $options.isColumnFiltered(col) ? 'true' : null,
                         title: $options.translateLabel(col.description) || null,
                         onClick: $event => (col.sortable ? $options.onHeaderClick(col.key, $event) : null),
                         onKeydown: withKeys($event => (col.sortable ? $options.onHeaderKeydown(col.key, $event) : null), ["enter"])
@@ -139,15 +182,40 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           class: normalizeClass(col.description ? 'cn-table-header--described' : '')
                         }, toDisplayString($options.translateLabel(col.label)), 3 /* TEXT, CLASS */),
                         (col.sortable && $options.sortKeyIndex(col.key) !== -1)
-                          ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString($options.effectiveSortKeys[$options.sortKeyIndex(col.key)].order === 'asc' ? '▲' : '▼'), 1 /* TEXT */))
+                          ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString($options.effectiveSortKeys[$options.sortKeyIndex(col.key)].order === 'asc' ? '▲' : '▼'), 1 /* TEXT */))
                           : createCommentVNode("v-if", true),
                         (col.sortable && $options.sortBadgeFor(col.key) !== null)
-                          ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString($options.sortBadgeFor(col.key)), 1 /* TEXT */))
+                          ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString($options.sortBadgeFor(col.key)), 1 /* TEXT */))
+                          : createCommentVNode("v-if", true),
+                        ($options.filterDefFor(col))
+                          ? (openBlock(), createElementBlock("button", {
+                              key: 2,
+                              ref_for: true,
+                              ref: 'filterButton-' + col.key,
+                              type: "button",
+                              class: normalizeClass(["cn-table-header__filter", { 'cn-table-header__filter--active': $options.isColumnFiltered(col) }]),
+                              "aria-label": $options.filterButtonLabel(col),
+                              "aria-haspopup": "dialog",
+                              "aria-expanded": $data.openFilterKey === col.key ? 'true' : 'false',
+                              "data-testid": "cn-table-header-filter",
+                              onClick: withModifiers($event => ($options.toggleColumnFilter(col, $event)), ["stop"]),
+                              onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(() => {}, ["stop"]), ["enter"]))
+                            }, [
+                              ($options.isColumnFiltered(col))
+                                ? (openBlock(), createBlock(_component_FilterIcon, {
+                                    key: 0,
+                                    size: 16
+                                  }))
+                                : (openBlock(), createBlock(_component_FilterOutline, {
+                                    key: 1,
+                                    size: 16
+                                  }))
+                            ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_14))
                           : createCommentVNode("v-if", true)
-                      ], 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_9))
+                      ], 46 /* CLASS, STYLE, PROPS, NEED_HYDRATION */, _hoisted_11))
                     }), 128 /* KEYED_FRAGMENT */)),
                     (_ctx.$slots['row-actions'])
-                      ? (openBlock(), createElementBlock("th", _hoisted_12, [
+                      ? (openBlock(), createElementBlock("th", _hoisted_15, [
                           renderSlot(_ctx.$slots, "actions-header")
                         ]))
                       : createCommentVNode("v-if", true)
@@ -156,12 +224,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               : createCommentVNode("v-if", true),
             createElementVNode("tbody", null, [
               ($options.effectiveRows.length === 0)
-                ? (openBlock(), createElementBlock("tr", _hoisted_13, [
+                ? (openBlock(), createElementBlock("tr", _hoisted_16, [
                     createElementVNode("td", { colspan: $options.totalColumns }, [
                       renderSlot(_ctx.$slots, "empty", {}, () => [
                         createTextVNode(toDisplayString($options.translateLabel($props.emptyText)), 1 /* TEXT */)
                       ])
-                    ], 8 /* PROPS */, _hoisted_14)
+                    ], 8 /* PROPS */, _hoisted_17)
                   ]))
                 : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList($options.effectiveRows, (row) => {
                     return (openBlock(), createElementBlock("tr", {
@@ -173,7 +241,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 						]]),
                       "data-testid": "cn-object-row",
                       "data-testid-row-id": row[$props.rowKey],
-                      onMousedown: _cache[5] || (_cache[5] = (...args) => ($options.onRowMouseDown && $options.onRowMouseDown(...args))),
+                      onMousedown: _cache[7] || (_cache[7] = (...args) => ($options.onRowMouseDown && $options.onRowMouseDown(...args))),
                       onClick: $event => ($options.onRowClick(row, $event)),
                       onAuxclick: $event => ($options.onRowAuxClick(row, $event)),
                       onContextmenu: $event => ($options.onRowContextMenu(row, $event))
@@ -182,8 +250,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         ? (openBlock(), createElementBlock("td", {
                             key: 0,
                             class: "cn-table-col--checkbox",
-                            onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
-                            onAuxclick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+                            onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+                            onAuxclick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
                           }, [
                             createVNode(_component_NcCheckboxRadioSwitch, {
                               modelValue: $options.isSelected(row),
@@ -193,7 +261,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           ], 32 /* NEED_HYDRATION */))
                         : createCommentVNode("v-if", true),
                       ($props.rowIcon)
-                        ? (openBlock(), createElementBlock("td", _hoisted_16, [
+                        ? (openBlock(), createElementBlock("td", _hoisted_19, [
                             createVNode(_component_CnIcon, {
                               name: $options.getRowIcon(row),
                               size: 20
@@ -205,7 +273,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           key: col.key,
                           class: normalizeClass([col.class || '', col.cellClass || '', $props.cellClass ? $props.cellClass(row, col) : '']),
                           style: normalizeStyle(col.width ? { maxWidth: col.width } : {}),
-                          onMouseenter: _cache[2] || (_cache[2] = (...args) => ($options.titleWhenClipped && $options.titleWhenClipped(...args)))
+                          onMouseenter: _cache[4] || (_cache[4] = (...args) => ($options.titleWhenClipped && $options.titleWhenClipped(...args)))
                         }, [
                           (colIndex === 0 && $options.rowLinks[String(row[$props.rowKey])])
                             ? (openBlock(), createElementBlock("a", {
@@ -216,7 +284,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 draggable: "false",
                                 "data-testid": "cn-row-link",
                                 onClick: $event => ($options.onRowLinkClick(row, $event))
-                              }, null, 8 /* PROPS */, _hoisted_17))
+                              }, null, 8 /* PROPS */, _hoisted_20))
                             : createCommentVNode("v-if", true),
                           (colIndex === 0)
                             ? (openBlock(), createBlock(_component_CnLockIndicator, {
@@ -226,7 +294,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               }, null, 8 /* PROPS */, ["object"]))
                             : createCommentVNode("v-if", true),
                           (colIndex === 0 && $options.indicatorsFor(row).shown.length > 0)
-                            ? (openBlock(), createElementBlock("span", _hoisted_18, [
+                            ? (openBlock(), createElementBlock("span", _hoisted_21, [
                                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.indicatorsFor(row).shown, (indicator) => {
                                   return (openBlock(), createElementBlock("span", {
                                     key: indicator.id || indicator.field,
@@ -238,8 +306,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                       name: indicator.icon || 'InformationOutline',
                                       size: 16
                                     }, null, 8 /* PROPS */, ["name"]),
-                                    createElementVNode("span", _hoisted_20, toDisplayString(indicator.text), 1 /* TEXT */)
-                                  ], 8 /* PROPS */, _hoisted_19))
+                                    createElementVNode("span", _hoisted_23, toDisplayString(indicator.text), 1 /* TEXT */)
+                                  ], 8 /* PROPS */, _hoisted_22))
                                 }), 128 /* KEYED_FRAGMENT */))
                               ]))
                             : createCommentVNode("v-if", true),
@@ -265,19 +333,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         ? (openBlock(), createElementBlock("td", {
                             key: 2,
                             class: normalizeClass(["cn-table-col--actions", [$props.cellClass ? $props.cellClass(row, { key: 'actions' }) : '']]),
-                            onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
-                            onAuxclick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+                            onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"])),
+                            onAuxclick: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"]))
                           }, [
                             renderSlot(_ctx.$slots, "row-actions", { row: row })
                           ], 34 /* CLASS, NEED_HYDRATION */))
                         : createCommentVNode("v-if", true)
-                    ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_15))
+                    ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_18))
                   }), 128 /* KEYED_FRAGMENT */))
             ])
           ], 2 /* CLASS */)
-        ], 8 /* PROPS */, _hoisted_5)),
+        ], 8 /* PROPS */, _hoisted_7)),
     (_ctx.$slots.footer || ($props.viewAllRoute && $options.totalRowCount > $options.effectiveRows.length))
-      ? (openBlock(), createElementBlock("div", _hoisted_21, [
+      ? (openBlock(), createElementBlock("div", _hoisted_24, [
           renderSlot(_ctx.$slots, "footer", {
             total: $options.totalRowCount,
             shown: $options.effectiveRows.length
@@ -287,13 +355,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   key: 0,
                   class: "cn-data-table__view-all",
                   href: $options.viewAllHref,
-                  onClick: _cache[6] || (_cache[6] = (...args) => ($options.onViewAll && $options.onViewAll(...args)))
-                }, toDisplayString($props.viewAllLabel), 9 /* TEXT, PROPS */, _hoisted_22))
+                  onClick: _cache[8] || (_cache[8] = (...args) => ($options.onViewAll && $options.onViewAll(...args)))
+                }, toDisplayString($props.viewAllLabel), 9 /* TEXT, PROPS */, _hoisted_25))
               : (openBlock(), createElementBlock("button", {
                   key: 1,
                   type: "button",
                   class: "cn-data-table__view-all",
-                  onClick: _cache[7] || (_cache[7] = (...args) => ($options.onViewAll && $options.onViewAll(...args)))
+                  onClick: _cache[9] || (_cache[9] = (...args) => ($options.onViewAll && $options.onViewAll(...args)))
                 }, toDisplayString($props.viewAllLabel), 1 /* TEXT */))
           ])
         ]))