eco-vue-js 0.10.3 → 0.10.5

package/dist/components/List/WListCard.vue.js

@@ -1,4 +1,5 @@
-import { defineComponent, useTemplateRef, ref, inject, watch, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, createVNode, Transition, withCtx, unref, createCommentVNode, createBlock, resolveDynamicComponent, mergeProps, renderSlot, normalizeProps, guardReactiveProps, markRaw } from 'vue';
+import { defineComponent, useTemplateRef, ref, inject, watch, createElementBlock, openBlock, Fragment, createElementVNode, createCommentVNode, normalizeClass, createVNode, createBlock, Transition, withCtx, unref, resolveDynamicComponent, mergeProps, renderSlot, normalizeStyle, normalizeProps, guardReactiveProps, markRaw } from 'vue';
+import { RouterLink } from 'vue-router';
 import _sfc_main$3 from '../Button/WButtonMore.vue.js';
 import _sfc_main$4 from '../Button/WButtonMoreItem.vue.js';
 import _sfc_main$1 from '../Checkbox/WCheckbox.vue.js';
@@ -6,14 +7,11 @@ import _sfc_main$2 from '../Form/WForm.vue.js';
 import IconAddCircle from '../../assets/icons/sax/IconAddCircle.svg.js';
 import IconMinusCircle from '../../assets/icons/sax/IconMinusCircle.svg.js';
 import { wInfiniteListSelection, wInfiniteListSelectionItem } from '../InfiniteList/models/injection.js';
+import { AREA_SELECT, AREA_MORE } from './types.js';
 
 const _hoisted_1 = {
   key: 0,
-  class: "bg-primary-default dark:bg-primary-dark sm-not:block absolute left-0 top-0 hidden h-full w-2"
-};
-const _hoisted_2 = {
-  key: 0,
-  class: "bg-default dark:bg-default-dark sm-not:hidden absolute left-full top-0 z-[-1] h-full w-[calc(var(--actions-bar-width)+var(--inner-margin))]"
+  class: "bg-primary-default dark:bg-primary-dark @sm:hidden absolute left-0 top-0 h-full w-2"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WListCard",
@@ -21,14 +19,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean },
     hideMore: { type: Boolean },
     mobile: { type: Boolean },
-    moreBottom: { type: Boolean },
     alignTop: { type: Boolean },
     hasBorder: { type: Boolean },
     cardClass: {},
     cardWrapperClass: {},
     allowOpen: { type: Boolean },
     disableMore: { type: Boolean },
-    formName: {}
+    formName: {},
+    card: { type: Boolean },
+    to: {}
   },
   emits: ["update:selected", "update:selected-hover"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -67,9 +66,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", {
-          class: normalizeClass(["sm-not:grid-cols-1 sm-not:group-even:bg-gray-50 sm-not:dark:group-even:bg-primary-darkest/25 relative isolate grid sm:flex", {
-            "w-ripple-trigger-has": _ctx.allowOpen,
-            [_ctx.cardWrapperClass ?? ""]: true
+          class: normalizeClass(["relative isolate", {
+            [_ctx.cardWrapperClass ?? ""]: true,
+            "w-ripple-trigger-has": _ctx.allowOpen || _ctx.to,
+            "dark:group-even:bg-primary-darkest/25 grid grid-cols-1 group-even:bg-gray-50": _ctx.card,
+            "flex": !_ctx.card,
+            "-mb-px": !_ctx.card && isOpen.value
           }])
         }, [
           createVNode(Transition, {
@@ -83,20 +85,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          !_ctx.mobile ? (openBlock(), createElementBlock("div", {
+          !_ctx.card ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(["left-inner sm-not:hidden bg-default dark:bg-default-dark sticky z-[1]", {
+            class: normalizeClass(["left-inner bg-default dark:bg-default-dark @not-lg:hidden sticky z-[1]", {
               "width-16": unref(allowSelect),
               "width-4": !unref(allowSelect)
             }])
           }, [
-            _cache[4] || (_cache[4] = createElementVNode("div", { class: "bg-default dark:bg-default-dark absolute right-full top-0 z-[-1] h-full w-[calc(var(--nav-bar-width)+var(--inner-margin))]" }, null, -1)),
+            _cache[8] || (_cache[8] = createElementVNode("div", { class: "bg-default dark:bg-default-dark absolute right-full top-0 z-[-1] h-full w-[calc(var(--nav-bar-width)+var(--inner-margin))]" }, null, -1)),
             createElementVNode("div", {
-              class: normalizeClass(["h-full", {
-                "border-gray-300 sm:rounded-tl-3xl sm:border sm:border-r-0 dark:border-gray-700": _ctx.hasBorder,
-                "sm:rounded-bl-3xl": _ctx.hasBorder && !isOpen.value,
-                "sm:border-b-transparent sm:dark:border-b-transparent": _ctx.hasBorder && isOpen.value,
-                "w-ripple-has-only w-ripple-hover w-ripple-opacity-[0.04]": _ctx.allowOpen
+              class: normalizeClass(["h-full rounded-l-[--w-list-rounded,unset]", {
+                "border border-r-0 border-gray-300 dark:border-gray-700": _ctx.hasBorder,
+                "rounded-bl-[unset!important]": isOpen.value,
+                "border-b-transparent dark:border-b-transparent": _ctx.hasBorder && isOpen.value,
+                "w-ripple-has-only w-ripple-hover w-ripple-opacity-[0.04]": _ctx.allowOpen || _ctx.to
               }])
             }, [
               unref(allowSelect) ? (openBlock(), createBlock(_sfc_main$1, {
@@ -116,67 +118,95 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], 2)
           ], 2)) : createCommentVNode("", true),
           (openBlock(), createBlock(resolveDynamicComponent(_ctx.formName ? _sfc_main$2 : "div"), mergeProps({ ref: "form" }, _ctx.formName ? { name: _ctx.formName } : void 0, {
-            class: ["sm-not:-px--inner-margin isolate grid sm:flex sm:flex-1", {
+            class: ["sm-not:-px--inner-margin isolate", {
               [_ctx.cardClass ?? ""]: true,
+              "flex flex-1": !_ctx.card,
+              "grid grid-cols-[--w-list-grid-cols] rounded-[--w-list-rounded,unset] [grid-template-areas:--w-list-grid-areas]": _ctx.card,
               "border-gray-300 sm:border-y dark:border-gray-700": _ctx.hasBorder,
-              "sm:border-b-transparent sm:dark:border-b-transparent": _ctx.hasBorder && isOpen.value,
-              "isolate": _ctx.allowOpen
+              "border": _ctx.card && _ctx.hasBorder,
+              "border-b-transparent dark:border-b-transparent": !_ctx.card && _ctx.hasBorder && isOpen.value
             }]
           }), {
             default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ toggle, isOpen: isOpen.value, validate }))),
-              _ctx.allowOpen ? (openBlock(), createElementBlock("button", {
+              unref(allowSelect) && _ctx.card ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,
-                class: "w-ripple w-ripple-hover w-ripple-has w-ripple-opacity-[0.04] absolute left-0 top-0 z-[-1] size-full cursor-pointer",
-                onClick: toggle
-              })) : createCommentVNode("", true)
+                "model-value": unref(selectedBetween) ? null : unref(selected) ?? false,
+                disabled: _ctx.disabled,
+                "allow-shift": unref(allowSelectRange),
+                class: normalizeClass(["justify-end self-start", {
+                  "opacity-50": unref(allowSelectHover)
+                }]),
+                style: normalizeStyle({ gridArea: unref(AREA_SELECT) }),
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(allowSelectHover) ? unref(updateSelectedRange)?.() : unref(updateSelected)?.($event)),
+                "onUpdateShift:modelValue": _cache[4] || (_cache[4] = ($event) => unref(updateSelectedRange)?.()),
+                onMouseover: _cache[5] || (_cache[5] = ($event) => unref(allowSelectHover) ? unref(updateSelectedRangeHover)?.() : void 0)
+              }, null, 8, ["model-value", "disabled", "allow-shift", "class", "style"])) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ toggle, isOpen: isOpen.value, validate }))),
+              _ctx.allowOpen || _ctx.to ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.to ? unref(RouterLink) : "button"), mergeProps({ key: 1 }, _ctx.to ? { to: _ctx.to } : void 0, {
+                class: ["w-ripple w-ripple-hover w-ripple-has w-ripple-opacity-[0.04] absolute left-0 top-0 z-[-1] size-full cursor-pointer", {
+                  "w-ripple-rounded-[--w-list-rounded,unset] rounded-[--w-list-rounded,unset]": _ctx.card
+                }],
+                onClick: _cache[6] || (_cache[6] = ($event) => _ctx.allowOpen && toggle())
+              }), null, 16, ["class"])) : createCommentVNode("", true),
+              _ctx.card ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 2,
+                class: "-mr-4 flex items-center px-4",
+                disabled: _ctx.disabled || _ctx.disableMore,
+                style: normalizeStyle({ gridArea: unref(AREA_MORE) })
+              }, {
+                default: withCtx(() => [
+                  unref(allowSelect) ? (openBlock(), createBlock(_sfc_main$4, {
+                    key: 0,
+                    text: unref(selected) ? "Unselect" : "Select",
+                    icon: unref(selected) ? markRaw(unref(IconMinusCircle)) : markRaw(unref(IconAddCircle)),
+                    onClick: _cache[7] || (_cache[7] = ($event) => unref(updateSelected)?.(!unref(selected)))
+                  }, null, 8, ["text", "icon"])) : createCommentVNode("", true),
+                  renderSlot(_ctx.$slots, "more")
+                ]),
+                _: 3
+              }, 8, ["disabled", "style"])) : createCommentVNode("", true)
             ]),
             _: 3
           }, 16, ["class"])),
-          createElementVNode("div", {
-            class: normalizeClass(["sm:right-inner sm:bg-default sm:dark:bg-default-dark sm:sticky sm:z-[1]", {
+          !_ctx.card ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(["right-inner bg-default dark:bg-default-dark sticky z-[1]", {
               "width-14": !_ctx.hideMore,
               "width-4": _ctx.hideMore
             }])
           }, [
-            !_ctx.mobile ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true),
+            _cache[9] || (_cache[9] = createElementVNode("div", { class: "bg-default dark:bg-default-dark absolute left-full top-0 z-[-1] h-full w-[calc(var(--actions-bar-width)+var(--inner-margin))]" }, null, -1)),
             createElementVNode("div", {
-              class: normalizeClass(["h-full", {
-                "border-gray-300 sm:rounded-tr-3xl sm:border sm:border-l-0 dark:border-gray-700": _ctx.hasBorder,
-                "sm:rounded-br-3xl": _ctx.hasBorder && !isOpen.value,
-                "sm:border-b-transparent sm:dark:border-b-transparent": _ctx.hasBorder && isOpen.value,
-                "w-ripple-has-only w-ripple-hover w-ripple-opacity-[0.04]": !_ctx.mobile && _ctx.allowOpen
+              class: normalizeClass(["h-full rounded-r-[--w-list-rounded,unset]", {
+                "rounded-tr-[--w-list-rounded,unset] border border-l-0 border-gray-300 dark:border-gray-700": _ctx.hasBorder,
+                "rounded-br-[unset!important]": isOpen.value,
+                "border-b-transparent dark:border-b-transparent": _ctx.hasBorder && isOpen.value,
+                "w-ripple-has-only w-ripple-hover w-ripple-opacity-[0.04]": _ctx.allowOpen || _ctx.to
               }])
             }, [
               !_ctx.hideMore ? (openBlock(), createBlock(_sfc_main$3, {
                 key: 0,
-                class: normalizeClass(["sm-not:absolute sm-not:right-0 flex h-14 px-4 sm:h-full", {
-                  "sm-not:top-5": !_ctx.moreBottom,
-                  "sm-not:top-10": _ctx.moreBottom,
+                class: normalizeClass(["flex h-full px-4", {
                   "items-start pt-3": _ctx.alignTop,
                   "items-center": !_ctx.alignTop
                 }]),
                 disabled: _ctx.disabled || _ctx.disableMore
               }, {
                 default: withCtx(() => [
-                  unref(allowSelect) && _ctx.mobile ? (openBlock(), createBlock(_sfc_main$4, {
-                    key: 0,
-                    text: unref(selected) ? "Unselect" : "Select",
-                    icon: unref(selected) ? markRaw(unref(IconMinusCircle)) : markRaw(unref(IconAddCircle)),
-                    onClick: _cache[3] || (_cache[3] = ($event) => unref(updateSelected)?.(!unref(selected)))
-                  }, null, 8, ["text", "icon"])) : createCommentVNode("", true),
                   renderSlot(_ctx.$slots, "more")
                 ]),
                 _: 3
               }, 8, ["class", "disabled"])) : createCommentVNode("", true)
             ], 2)
-          ], 2)
+          ], 2)) : createCommentVNode("", true)
         ], 2),
         _ctx.$slots.expansion ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           isOpen.value ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(["sm:w-inner sm:left-inner sm:sticky sm:-mt-px", {
-              "border-gray-300 sm:rounded-b-3xl sm:border sm:border-t-0 sm:px-5 dark:border-gray-700": _ctx.hasBorder
+            class: normalizeClass(["w-inner left-inner sticky col-span-full", {
+              "border-gray-300 dark:border-gray-700": _ctx.hasBorder,
+              "mt-[calc(var(--w-list-gap,1rem)*-1)] border border-t-0 px-5": !_ctx.card && _ctx.hasBorder,
+              "rounded-b-[--w-list-rounded,unset]": !_ctx.card
             }])
           }, [
             renderSlot(_ctx.$slots, "expansion")

package/dist/components/List/WListCardField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WListCardField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WListCardField.vue"],"names":[],"mappings":"AAkDA,iBAAS,cAAc;;yBAgDM,GAAG;uBACL,GAAG;;;WAShB,OAAO,IAA6B;EAEjD;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;iBAjFN,MAAM,GAAG,MAAM;eACjB,OAAO;gBACN,OAAO;gBACP,OAAO;;iBAHN,MAAM,GAAG,MAAM;eACjB,OAAO;gBACN,OAAO;gBACP,OAAO;iGAoFnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WListCardField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WListCardField.vue"],"names":[],"mappings":"AAiDA,iBAAS,cAAc;;yBA+CM,GAAG;uBACL,GAAG;;;WAShB,OAAO,IAA6B;EAEjD;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;iBAhFN,MAAM,GAAG,MAAM;eACjB,OAAO;gBACN,OAAO;gBACP,OAAO;;iBAHN,MAAM,GAAG,MAAM;eACjB,OAAO;gBACN,OAAO;gBACP,OAAO;iGAmFnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/List/WListCardField.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, createBlock, renderSlot, createElementVNode, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, renderSlot, createElementVNode, createTextVNode, toDisplayString } from 'vue';
 import WSkeleton from '../Skeleton/WSkeleton.vue.js';
 
 const _hoisted_1 = { class: "truncate" };
@@ -13,9 +13,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["grid grid-cols-1", {
-          "pointer-events-none": _ctx.allowOpen,
-          "sm:pr-6": !_ctx.noPadding
+        class: normalizeClass(["grid shrink-0 grid-cols-1", {
+          "pointer-events-none": _ctx.allowOpen
         }])
       }, [
         _ctx.skeleton ? (openBlock(), createBlock(WSkeleton, { key: 0 })) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [

package/dist/components/List/WListHeader.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, createBlock, createCommentVNode, renderSlot } from 'vue';
+import { defineComponent, createElementBlock, openBlock, createElementVNode, normalizeClass, createBlock, createCommentVNode, renderSlot } from 'vue';
 import _sfc_main$1 from '../Checkbox/WCheckbox.vue.js';
 
 const _hoisted_1 = { class: "flex h-12" };

package/dist/components/List/WListHeaderItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WListHeaderItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WListHeaderItem.vue"],"names":[],"mappings":"AAoHA,OAAO,EAAC,KAAK,UAAU,EAAW,MAAM,KAAK,CAAA;AAK7C,OAAO,EAAQ,KAAK,SAAS,EAAiB,MAAM,eAAe,CAAA;yBAKlD,KAAK,eACR,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAwNxD,mBAAmB,CAAC;;;gBApNpB,MAAM;eACP,KAAK;kBACF,SAAS,CAAC,KAAK,CAAC,EAAE;mBACjB,OAAO;sBACJ,OAAO;oBACT,MAAM;oBACN,UAAU,GAAG,SAAS;KA8MmD,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBA9BiB,GAAG;;cA7K3B,cAAc,SAAS,MAAM,KAAG,IAAI;;;;YAgNE,OAAO,CAAC,OAAO,WAAW,CAAC;;AAlOvE,wBAkO4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"WListHeaderItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WListHeaderItem.vue"],"names":[],"mappings":"AAiGA,OAAO,EAAC,KAAK,UAAU,EAAwC,MAAM,KAAK,CAAA;AAI1E,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,eAAe,CAAA;yBAM3B,KAAK,eACR,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA4MxD,mBAAmB,CAAC;;;gBAxMpB,MAAM;eACP,KAAK;kBACF,SAAS,CAAC,KAAK,CAAC,EAAE;mBACjB,OAAO;sBACJ,OAAO;oBACT,MAAM;oBACN,UAAU,GAAG,SAAS;KAkMmD,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAhCiB,GAAG;;cA/J3B,cAAc,SAAS,MAAM,KAAG,IAAI;;;;YAoME,OAAO,CAAC,OAAO,WAAW,CAAC;;AAtNvE,wBAsN4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/List/WListHeaderItem.vue.js

@@ -1,8 +1,7 @@
-import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, Transition, createElementBlock, createVNode, unref, createCommentVNode } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { defineComponent, useTemplateRef, toRef, ref, onMounted, createBlock, openBlock, resolveDynamicComponent, mergeProps, withCtx, unref, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, Transition, createElementBlock, createVNode } from 'vue';
 import IconBack from '../../assets/icons/default/IconBack.svg.js';
-import { Order, encodeOrdering } from '../../utils/order.js';
 import _sfc_main$1 from './components/HeaderItemResizer.vue.js';
+import { useOrdering } from './use/useOrdering.js';
 
 const _hoisted_1 = {
   key: 0,
@@ -23,45 +22,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:width"],
   setup(__props) {
     const props = __props;
-    const route = useRoute();
-    const router = useRouter();
-    const index = computed(() => props.ordering.findIndex((item) => item.field === props.field));
-    const updateQuery = (newOrdering) => {
-      const newOrderingValue = encodeOrdering(newOrdering);
-      if (route.query.ordering === newOrderingValue) return;
-      router.replace({
-        query: {
-          ...route.query,
-          ordering: newOrderingValue
-        }
-      });
-    };
-    const setOrdering = () => {
-      if (props.disabled) return;
-      const newOrdering = props.ordering.slice();
-      if (index.value === -1) {
-        newOrdering.push({ field: props.field, order: Order.ASC });
-      } else if (newOrdering[index.value].order === Order.ASC) {
-        newOrdering[index.value].order = Order.DESC;
-      } else {
-        newOrdering.splice(index.value, 1);
+    const containerRef = useTemplateRef("container");
+    const { index, setOrdering } = useOrdering(toRef(props, "ordering"), toRef(props, "field"));
+    const widthStyleInner = ref();
+    onMounted(() => {
+      if (!props.allowResize && containerRef.value instanceof HTMLDivElement) {
+        widthStyleInner.value = {
+          minWidth: containerRef.value.getBoundingClientRect().width + "px"
+        };
       }
-      updateQuery(newOrdering);
-    };
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(_ctx.allowResize ? _sfc_main$1 : "div"), mergeProps(_ctx.allowResize ? { hasStyles: _ctx.widthStyle !== void 0 } : void 0, {
-        class: "text-description select-none pr-6",
-        style: _ctx.widthStyle,
-        "onUpdate:width": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:width", $event))
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.allowResize ? _sfc_main$1 : "div"), mergeProps({ ref: "container" }, _ctx.allowResize ? { hasStyles: _ctx.widthStyle !== void 0 } : void 0, {
+        class: "text-description shrink-0 select-none overflow-hidden pr-6",
+        style: _ctx.widthStyle ?? widthStyleInner.value,
+        "onUpdate:width": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:width", $event))
       }), {
         default: withCtx(() => [
           (openBlock(), createBlock(resolveDynamicComponent(_ctx.disabled ? "div" : "button"), {
             class: normalizeClass(["group flex size-full gap-2", {
               "cursor-pointer": !_ctx.disabled,
               [_ctx.itemClass ?? ""]: true,
-              "items-center overflow-hidden whitespace-nowrap font-semibold": !_ctx.itemClass
+              "items-center whitespace-nowrap font-semibold": !_ctx.itemClass
             }]),
-            onClick: setOrdering
+            onClick: _cache[0] || (_cache[0] = ($event) => !_ctx.disabled && unref(setOrdering)())
           }, {
             default: withCtx(() => [
               createElementVNode("div", {
@@ -81,14 +65,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "leave-to-class": "opacity-0"
               }, {
                 default: withCtx(() => [
-                  index.value !== -1 ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                  unref(index) !== -1 ? (openBlock(), createElementBlock("div", _hoisted_1, [
                     createVNode(unref(IconBack), {
                       class: normalizeClass(["square-3 transition-transform", {
-                        "rotate-90": _ctx.ordering[index.value]?.order === "ASC",
-                        "-rotate-90": _ctx.ordering[index.value]?.order === "DESC"
+                        "rotate-90": _ctx.ordering[unref(index)]?.order === "ASC",
+                        "-rotate-90": _ctx.ordering[unref(index)]?.order === "DESC"
                       }])
                     }, null, 8, ["class"]),
-                    _ctx.ordering.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(index.value + 1), 1)) : createCommentVNode("", true)
+                    _ctx.ordering.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(index) + 1), 1)) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true)
                 ]),
                 _: 1

package/dist/components/List/components/HeaderFieldNested.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, unref, createBlock, withCtx, renderSlot } from 'vue';
-import { getFirstFieldLabel } from '../use/useFieldConfigMap.js';
+import { defineComponent, resolveComponent, createElementBlock, openBlock, Fragment, renderList, unref, createBlock, renderSlot, withCtx } from 'vue';
+import { getFirstFieldLabel } from '../use/useListConfig.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "HeaderFieldNested",

package/dist/components/List/components/HeaderItemResizer.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useTemplateRef, watch, onBeforeUnmount, openBlock, createElementBlock, renderSlot, createElementVNode, withModifiers, createVNode, unref } from 'vue';
+import { defineComponent, useTemplateRef, watch, onBeforeUnmount, createElementBlock, openBlock, renderSlot, createElementVNode, withModifiers, createVNode, unref } from 'vue';
 import IconDrag from '../../../assets/icons/sax/IconDrag.svg.js';
 import DOMListenerContainer from '../../../utils/DOMListenerContainer.js';
 

package/dist/components/List/components/HeaderSettings.vue.d.ts

@@ -1,11 +1,14 @@
 import { FieldConfig, ListFields } from '../types';
+import { ListMode } from '../use/useListConfig';
 declare const _default: <Data extends DefaultData, QueryParams>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:field-config-map"?: ((value: Record<string, FieldConfig>) => any) | undefined;
+        readonly "onUpdate:mode"?: ((value: ListMode) => any) | undefined;
         readonly "onClick:reset"?: (() => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:field-config-map" | "onClick:reset"> & {
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:field-config-map" | "onUpdate:mode" | "onClick:reset"> & {
         fields: ListFields<Data, QueryParams>;
         fieldConfigMap: Record<string, FieldConfig>;
+        mode: ListMode;
         queryParams: QueryParams;
         hasSaved?: boolean;
         disabled?: boolean;
@@ -15,6 +18,7 @@ declare const _default: <Data extends DefaultData, QueryParams>(__VLS_props: Non
     slots: {};
     emit: {
         (e: "update:field-config-map", value: Record<string, FieldConfig>): void;
+        (e: "update:mode", value: ListMode): void;
         (e: "click:reset"): void;
     };
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {

package/dist/components/List/components/HeaderSettings.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderSettings.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/components/HeaderSettings.vue"],"names":[],"mappings":"AAqIA,OAAO,KAAK,EAAC,WAAW,EAAa,UAAU,EAAC,MAAM,UAAU,CAAA;yBAY/C,IAAI,SAAS,WAAW,EAAE,WAAW,eACxC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAmQxD,mBAAmB,CAAC;;;;gBA/PpB,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;wBACrB,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC;qBAC9B,WAAW;mBACb,OAAO;mBACP,OAAO;KA2PmE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;YAxPP,yBAAyB,SAAS,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,IAAI;YACpE,aAAa,GAAG,IAAI;;;;;YA4PkB,OAAO,CAAC,OAAO,WAAW,CAAC;;AA7QvE,wBA6Q4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"HeaderSettings.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/components/HeaderSettings.vue"],"names":[],"mappings":"AAiLA,OAAO,KAAK,EAAC,WAAW,EAAa,UAAU,EAAC,MAAM,UAAU,CAAA;AAgBhE,OAAO,EAAC,KAAK,QAAQ,EAAgC,MAAM,sBAAsB,CAAA;yBAGhE,IAAI,SAAS,WAAW,EAAE,WAAW,eACxC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA0XxD,mBAAmB,CAAC;;;;;gBAtXpB,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;wBACrB,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC;cACrC,QAAQ;qBACD,WAAW;mBACb,OAAO;mBACP,OAAO;KAiXmE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;YA9WP,yBAAyB,SAAS,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,IAAI;YACpE,aAAa,SAAS,QAAQ,GAAG,IAAI;YACrC,aAAa,GAAG,IAAI;;;;;YAiXkB,OAAO,CAAC,OAAO,WAAW,CAAC;;AApYvE,wBAoY4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/List/components/HeaderSettings.vue.js

@@ -1,25 +1,47 @@
-import { defineComponent, ref, openBlock, createBlock, markRaw, unref, withCtx, createElementVNode, createVNode, normalizeClass } from 'vue';
-import _sfc_main$1 from '../../Button/WButtonMore.vue.js';
+import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, Fragment, renderList, normalizeClass, markRaw } from 'vue';
+import _sfc_main$6 from '../../Button/WButtonSelectionAction.vue.js';
+import _sfc_main$2 from '../../ClickOutside/WClickOutside.vue.js';
+import _sfc_main$1 from '../../DropdownMenu/WDropdownMenu.vue.js';
 import IconTableSettings from '../../../assets/icons/sax/IconTableSettings.svg.js';
-import _sfc_main$2 from './HeaderFieldNested.vue.js';
-import _sfc_main$3 from './HeaderSettingsItem.vue.js';
+import '../../Button/WButtonAction.vue.js';
+import '../../Button/WButton.vue.js';
+import '../../Button/WButtonDropdown.vue.js';
+import { HorizontalAlign } from '../../../utils/HorizontalAlign.js';
+import 'vue-router';
+import '../../../utils/supportsPassive.js';
+import '../../Dropdown/utils/DropdownStyle.js';
+import '../../../utils/Modal.js';
+import '../../Input/WInputSuggest.vue.js';
+import '../../HeaderBar/use/useHeaderPadding.js';
+import '../../Input/WInputDate.vue.js';
+import '../../Link/WLink.vue.js';
+import '@tanstack/vue-query';
+import _sfc_main$4 from './HeaderFieldNested.vue.js';
+import _sfc_main$5 from './HeaderSettingsItem.vue.js';
+import _sfc_main$3 from './HeaderSettingsModeButton.vue.js';
+import { listModeList, listModeIconMap } from '../use/useListConfig.js';
 
 const _hoisted_1 = { class: "p-4" };
-const _hoisted_2 = { class: "grid grid-cols-1" };
-const _hoisted_3 = ["disabled"];
+const _hoisted_2 = { class: "grid grid-cols-[auto,auto,auto] items-start" };
+const _hoisted_3 = { class: "flex flex-col gap-4" };
+const _hoisted_4 = { class: "grid grid-cols-1" };
+const _hoisted_5 = { class: "flex justify-end" };
+const _hoisted_6 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "HeaderSettings",
   props: {
     fields: {},
     fieldConfigMap: {},
+    mode: {},
     queryParams: {},
     hasSaved: { type: Boolean },
     disabled: { type: Boolean }
   },
-  emits: ["update:field-config-map", "click:reset"],
+  emits: ["update:field-config-map", "update:mode", "click:reset"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const isOpen = ref(false);
     const dragItem = ref(null);
     const dragItemNewOrder = ref(null);
     const getOrder = (field) => {
@@ -65,44 +87,76 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
-        icon: markRaw(unref(IconTableSettings)),
-        disabled: _ctx.disabled,
-        class: "size-full items-center"
+        "is-open": isOpen.value,
+        "max-width": 300,
+        "max-height": 300,
+        "horizontal-align": unref(HorizontalAlign).RIGHT_INNER
       }, {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            createElementVNode("div", _hoisted_2, [
-              createVNode(_sfc_main$2, { fields: _ctx.fields }, {
-                default: withCtx(({ field, nested, first, last }) => [
-                  createVNode(_sfc_main$3, {
-                    field,
-                    "field-config": _ctx.fieldConfigMap[field.label],
-                    "query-params": _ctx.queryParams,
-                    disabled: _ctx.disabled,
-                    "disabled-drag": nested,
-                    order: getOrder(field),
-                    "onDrag:start": ($event) => dragStart(field.label, $event),
-                    "onDrag:enter": ($event) => dragEnter($event, nested, first, last),
-                    "onDrag:end": drop,
-                    "onUpdate:fieldsConfigMap": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:field-config-map", { ..._ctx.fieldConfigMap, ...$event }))
-                  }, null, 8, ["field", "field-config", "query-params", "disabled", "disabled-drag", "order", "onDrag:start", "onDrag:enter"])
+        toggle: withCtx(() => [
+          createVNode(_sfc_main$6, {
+            icon: markRaw(unref(IconTableSettings)),
+            disabled: _ctx.disabled,
+            active: isOpen.value,
+            onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value)
+          }, null, 8, ["icon", "disabled", "active"])
+        ]),
+        content: withCtx(() => [
+          createVNode(_sfc_main$2, {
+            class: "bg-default dark:bg-default-dark my-2 grid grid-cols-1 overflow-hidden rounded-xl shadow-md dark:outline dark:outline-1 dark:outline-gray-800",
+            onClick: _cache[3] || (_cache[3] = ($event) => isOpen.value = false)
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1, [
+                createElementVNode("div", _hoisted_2, [
+                  createElementVNode("div", _hoisted_3, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(listModeList), (item) => {
+                      return openBlock(), createBlock(_sfc_main$3, {
+                        key: item,
+                        icon: unref(listModeIconMap)[item],
+                        active: _ctx.mode === item,
+                        onClick: ($event) => _ctx.$emit("update:mode", item)
+                      }, null, 8, ["icon", "active", "onClick"]);
+                    }), 128))
+                  ]),
+                  _cache[4] || (_cache[4] = createElementVNode("div", { class: "mx-4 h-full border-r border-solid border-gray-200 dark:border-gray-700" }, null, -1)),
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_sfc_main$4, { fields: _ctx.fields }, {
+                      default: withCtx(({ field, nested, first, last }) => [
+                        createVNode(_sfc_main$5, {
+                          field,
+                          "field-config": _ctx.fieldConfigMap[field.label],
+                          "query-params": _ctx.queryParams,
+                          disabled: _ctx.disabled,
+                          "disabled-drag": nested,
+                          order: getOrder(field),
+                          "onDrag:start": ($event) => dragStart(field.label, $event),
+                          "onDrag:enter": ($event) => dragEnter($event, nested, first, last),
+                          "onDrag:end": drop,
+                          "onUpdate:fieldsConfigMap": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:field-config-map", { ..._ctx.fieldConfigMap, ...$event }))
+                        }, null, 8, ["field", "field-config", "query-params", "disabled", "disabled-drag", "order", "onDrag:start", "onDrag:enter"])
+                      ]),
+                      _: 1
+                    }, 8, ["fields"])
+                  ])
                 ]),
-                _: 1
-              }, 8, ["fields"])
+                _cache[5] || (_cache[5] = createElementVNode("div", { class: "my-4 border-b border-solid border-gray-200 dark:border-gray-700" }, null, -1)),
+                createElementVNode("div", _hoisted_5, [
+                  createElementVNode("button", {
+                    class: normalizeClass(["relative rounded-lg bg-gray-100 px-2 py-1 dark:bg-gray-800", {
+                      "w-ripple w-ripple-hover": _ctx.hasSaved,
+                      "cursor-not-allowed opacity-50": !_ctx.hasSaved
+                    }]),
+                    disabled: !_ctx.hasSaved,
+                    onClick: _cache[2] || (_cache[2] = ($event) => _ctx.hasSaved && _ctx.$emit("click:reset"))
+                  }, " Reset ", 10, _hoisted_6)
+                ])
+              ])
             ]),
-            _cache[2] || (_cache[2] = createElementVNode("div", { class: "my-4 border-b border-solid border-gray-200 dark:border-gray-700" }, null, -1)),
-            createElementVNode("button", {
-              class: normalizeClass(["relative rounded-lg bg-gray-100 px-2 py-1 dark:bg-gray-800", {
-                "w-ripple w-ripple-hover": _ctx.hasSaved,
-                "cursor-not-allowed opacity-50": !_ctx.hasSaved
-              }]),
-              disabled: !_ctx.hasSaved,
-              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.hasSaved && _ctx.$emit("click:reset"))
-            }, " Reset ", 10, _hoisted_3)
-          ])
+            _: 1
+          })
         ]),
         _: 1
-      }, 8, ["icon", "disabled"]);
+      }, 8, ["is-open", "horizontal-align"]);
     };
   }
 });

package/dist/components/List/components/HeaderSettingsItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, openBlock, createElementBlock, normalizeClass, normalizeStyle, withModifiers, createVNode, unref, createCommentVNode, createElementVNode, toDisplayString, createBlock, resolveDynamicComponent } from 'vue';
+import { defineComponent, ref, createElementBlock, openBlock, withModifiers, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, createVNode, unref, toDisplayString, createBlock, resolveDynamicComponent } from 'vue';
 import IconDrag from '../../../assets/icons/sax/IconDrag.svg.js';
 import IconEye from '../../../assets/icons/sax/IconEye.svg.js';
 import IconEyeSlash from '../../../assets/icons/sax/IconEyeSlash.svg.js';

package/dist/components/List/components/HeaderSettingsModeButton.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: import('vue').DefineComponent<{
+    icon: SVGComponent;
+    active: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    icon: SVGComponent;
+    active: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=HeaderSettingsModeButton.vue.d.ts.map

package/dist/components/List/components/HeaderSettingsModeButton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSettingsModeButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/components/HeaderSettingsModeButton.vue"],"names":[],"mappings":";UAyBQ,YAAY;YACV,OAAO;;UADT,YAAY;YACV,OAAO;;AAuEjB,wBAMG"}

package/dist/components/List/components/HeaderSettingsModeButton.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, resolveDynamicComponent } from 'vue';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderSettingsModeButton",
+  props: {
+    icon: {},
+    active: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass(["w-ripple w-ripple-hover relative flex justify-center rounded-2xl p-4", {
+          "text-primary-default dark:text-primary-dark bg-primary-default/10 dark:bg-primary-dark/10": _ctx.active,
+          "text-description": !_ctx.active
+        }])
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { class: "square-6" }))
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/List/components/HeaderSettingsModeButton.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './HeaderSettingsModeButton.vue.js';
+
+
+
+export { _sfc_main as default };