eco-vue-js 0.8.18 → 0.8.20

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

@@ -1,4 +1,4 @@
-import { defineComponent, inject, watch, openBlock, createElementBlock, createVNode, Transition, withCtx, unref, createCommentVNode, createBlock, normalizeClass, renderSlot, markRaw } from 'vue';
+import { defineComponent, ref, inject, watch, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, createVNode, Transition, withCtx, unref, createCommentVNode, createBlock, renderSlot, normalizeProps, guardReactiveProps, markRaw } from 'vue';
 import _sfc_main$1 from '../Checkbox/WCheckbox.vue.js';
 import _sfc_main$2 from '../Button/WButtonMore.vue.js';
 import _sfc_main$3 from '../Button/WButtonMoreItem.vue.js';
@@ -6,11 +6,14 @@ 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';
 
-const _hoisted_1 = { class: "grid relative w-full sm:flex sm-not:group-even:bg-gray-50 sm-not:dark:group-even:bg-primary-darkest/25 sm-not:pt-2" };
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 0,
   class: "bg-primary-default dark:bg-primary-dark w-2 h-full hidden sm-not:block absolute left-0 top-0"
 };
+const _hoisted_2 = {
+  key: 0,
+  class: "absolute top-0 -z-[1] left-full h-full w-[calc(var(--actions-bar-width)+var(--inner-margin))] bg-default dark:bg-default-dark sm-not:hidden"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WListCard",
   props: {
@@ -18,11 +21,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hideMore: { type: Boolean },
     mobile: { type: Boolean },
     moreBottom: { type: Boolean },
-    alignTop: { type: Boolean }
+    alignTop: { type: Boolean },
+    hasBorder: { type: Boolean },
+    cardClass: {},
+    allowOpen: { type: Boolean }
   },
   emits: ["update:selected", "update:selected-hover"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
+    const isOpen = ref(false);
+    const toggle = () => {
+      isOpen.value = !isOpen.value;
+    };
     const {
       allowSelect,
       allowSelectRange,
@@ -49,54 +59,106 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateSelected
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(Transition, {
-          "enter-active-class": "transition-transform duration-200",
-          "leave-active-class": "transition-transform duration-200",
-          "enter-from-class": "-translate-x-2",
-          "leave-to-class": "-translate-x-2"
-        }, {
-          default: withCtx(() => [
-            _ctx.mobile && unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }),
-        unref(allowSelect) && !_ctx.mobile ? (openBlock(), createBlock(_sfc_main$1, {
-          key: 0,
-          "model-value": unref(selectedBetween) ? null : unref(selected) ?? false,
-          disabled: _ctx.disabled,
-          "allow-shift": unref(allowSelectRange),
-          "align-top": _ctx.alignTop,
-          class: normalizeClass(["sm:w-list-row-item sm-not:hidden", {
-            "opacity-50": unref(allowSelectHover)
-          }]),
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(allowSelectHover) ? unref(updateSelectedRange)?.() : unref(updateSelected)?.($event)),
-          "onUpdateShift:modelValue": _cache[1] || (_cache[1] = ($event) => unref(updateSelectedRange)?.()),
-          onMouseover: _cache[2] || (_cache[2] = ($event) => unref(allowSelectHover) ? unref(updateSelectedRangeHover)?.() : void 0)
-        }, null, 8, ["model-value", "disabled", "allow-shift", "align-top", "class"])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default", { toggle: unref(updateSelected) }),
-        !_ctx.hideMore ? (openBlock(), createBlock(_sfc_main$2, {
-          key: 1,
-          class: normalizeClass(["sm-not:absolute sm-not:right-0 sm-not:-mx--inner-margin sm-not:bottom-0 sm-not:items-start sm:w-list-row-item flex pl-4", {
-            "sm-not:top-5": !_ctx.moreBottom,
-            "sm-not:top-12": _ctx.moreBottom,
-            "items-start pt-2": _ctx.alignTop,
-            "items-center": !_ctx.alignTop
-          }]),
-          disabled: _ctx.disabled
-        }, {
-          default: withCtx(() => [
-            unref(allowSelect) && _ctx.mobile ? (openBlock(), createBlock(_sfc_main$3, {
-              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)
-      ]);
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: normalizeClass(["relative w-full grid sm:flex isolate sm:mt-4 first:mt-0 sm-not:group-even:bg-gray-50 sm-not:dark:group-even:bg-primary-darkest/25 sm-not:pt-2 sm-not:-px--inner-margin", {
+            [_ctx.cardClass ?? ""]: true,
+            "w-ripple-trigger-has": _ctx.allowOpen
+          }])
+        }, [
+          createVNode(Transition, {
+            "enter-active-class": "transition-transform duration-200",
+            "leave-active-class": "transition-transform duration-200",
+            "enter-from-class": "-translate-x-2",
+            "leave-to-class": "-translate-x-2"
+          }, {
+            default: withCtx(() => [
+              _ctx.mobile && unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }),
+          !_ctx.mobile ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["sticky z-[1] left-inner sm-not:hidden bg-default dark:bg-default-dark", {
+              "width-16": unref(allowSelect),
+              "width-4": !unref(allowSelect)
+            }])
+          }, [
+            _cache[4] || (_cache[4] = createElementVNode("div", { class: "absolute top-0 -z-[1] right-full h-full w-[calc(var(--nav-bar-width)+var(--inner-margin))] bg-default dark:bg-default-dark" }, null, -1)),
+            createElementVNode("div", {
+              class: normalizeClass(["h-full", {
+                "sm:border sm:border-r-0 border-gray-300 dark:border-gray-700 sm:rounded-tl-3xl": _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
+              }])
+            }, [
+              unref(allowSelect) ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                "model-value": unref(selectedBetween) ? null : unref(selected) ?? false,
+                disabled: _ctx.disabled,
+                "allow-shift": unref(allowSelectRange),
+                "align-top": _ctx.alignTop,
+                class: normalizeClass(["px-4 h-full", {
+                  "opacity-50": unref(allowSelectHover)
+                }]),
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(allowSelectHover) ? unref(updateSelectedRange)?.() : unref(updateSelected)?.($event)),
+                "onUpdateShift:modelValue": _cache[1] || (_cache[1] = ($event) => unref(updateSelectedRange)?.()),
+                onMouseover: _cache[2] || (_cache[2] = ($event) => unref(allowSelectHover) ? unref(updateSelectedRangeHover)?.() : void 0)
+              }, null, 8, ["model-value", "disabled", "allow-shift", "align-top", "class"])) : createCommentVNode("", true)
+            ], 2)
+          ], 2)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ toggle, isOpen: isOpen.value }))),
+          createElementVNode("div", {
+            class: normalizeClass(["sm:sticky sm:z-[1] sm:right-inner sm:bg-default sm:dark:bg-default-dark", {
+              "width-14": !_ctx.hideMore,
+              "width-4": _ctx.hideMore
+            }])
+          }, [
+            !_ctx.mobile ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(["h-full", {
+                "sm:border sm:border-l-0 border-gray-300 dark:border-gray-700 sm:rounded-tr-3xl": _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.allowOpen
+              }])
+            }, [
+              !_ctx.hideMore ? (openBlock(), createBlock(_sfc_main$2, {
+                key: 0,
+                class: normalizeClass(["sm-not:absolute sm-not:right-0 sm-not:bottom-0 flex px-4 sm:h-full", {
+                  "sm-not:top-5": !_ctx.moreBottom,
+                  "sm-not:top-10": _ctx.moreBottom,
+                  "items-start pt-2": _ctx.alignTop,
+                  "items-center": !_ctx.alignTop
+                }]),
+                disabled: _ctx.disabled
+              }, {
+                default: withCtx(() => [
+                  unref(allowSelect) && _ctx.mobile ? (openBlock(), createBlock(_sfc_main$3, {
+                    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),
+        _ctx.$slots.expansion ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          isOpen.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["sm:sticky sm:w-inner sm:left-inner", {
+              "sm:px-5 sm:border sm:border-t-0 border-gray-300 dark:border-gray-700 sm:rounded-b-3xl": _ctx.hasBorder
+            }])
+          }, [
+            renderSlot(_ctx.$slots, "expansion")
+          ], 2)) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true)
+      ], 64);
     };
   }
 });

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":"AA0DA,iBAAS,cAAc;;yBAkEM,GAAG;uBACL,GAAG;uBACF,GAAG;;;WASjB,OAAO,IAA6B;EAEjD;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;iBApGN,MAAM,GAAG,MAAM;eACjB,OAAO;;iBADL,MAAM,GAAG,MAAM;eACjB,OAAO;iGAyGlB,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":"AAuDA,iBAAS,cAAc;;yBA8DM,GAAG;uBACL,GAAG;uBACF,GAAG;;;WASjB,OAAO,IAA6B;EAEjD;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;iBAhGN,MAAM,GAAG,MAAM;eACjB,OAAO;;iBADL,MAAM,GAAG,MAAM;eACjB,OAAO;iGAqGlB,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,11 +1,10 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, createBlock, renderSlot, createTextVNode, toDisplayString, createVNode, withCtx } from 'vue';
+import { defineComponent, openBlock, createElementBlock, createBlock, renderSlot, createElementVNode, createTextVNode, toDisplayString, createVNode, withCtx } from 'vue';
 import WSkeleton from '../Skeleton/WSkeleton.vue.js';
 import _sfc_main$1 from '../Tooltip/WTooltip.vue.js';
 
-const _hoisted_1 = { class: "flex items-center sm:h-16" };
-const _hoisted_2 = { class: "w-full relative" };
-const _hoisted_3 = { class: "absolute top-0 w-full truncate" };
-const _hoisted_4 = { class: "min-w-[12rem] max-w-xl overflow-hidden" };
+const _hoisted_1 = { class: "grid grid-cols-1 items-center sm:h-16 sm:pr-6" };
+const _hoisted_2 = { class: "truncate" };
+const _hoisted_3 = { class: "min-w-[12rem] max-w-xl overflow-hidden" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WListCardField",
   props: {
@@ -15,27 +14,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          _ctx.skeleton ? (openBlock(), createBlock(WSkeleton, { key: 0 })) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
-            _cache[0] || (_cache[0] = createTextVNode("   ")),
-            createElementVNode("div", _hoisted_3, [
-              renderSlot(_ctx.$slots, "inner", {}, () => [
-                createTextVNode(toDisplayString(_ctx.modelValue), 1)
-              ]),
-              createVNode(_sfc_main$1, {
-                "no-touch": "",
-                "overflow-only": ""
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("div", _hoisted_4, [
-                    renderSlot(_ctx.$slots, "inner", {}, () => [
-                      createTextVNode(toDisplayString(_ctx.modelValue), 1)
-                    ])
+        _ctx.skeleton ? (openBlock(), createBlock(WSkeleton, { key: 0 })) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
+          createElementVNode("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "inner", {}, () => [
+              createTextVNode(toDisplayString(_ctx.modelValue), 1)
+            ]),
+            createVNode(_sfc_main$1, {
+              "no-touch": "",
+              "overflow-only": ""
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_3, [
+                  renderSlot(_ctx.$slots, "inner", {}, () => [
+                    createTextVNode(toDisplayString(_ctx.modelValue), 1)
                   ])
-                ]),
-                _: 3
-              })
-            ])
+                ])
+              ]),
+              _: 3
+            })
           ])
         ])
       ]);

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

@@ -1 +1 @@
-{"version":3,"file":"WListHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WListHeader.vue"],"names":[],"mappings":"AAwEA,iBAAS,cAAc;;yBA4EM,GAAG;;;WASlB,OAAO,IAA6B;EAEjD;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;kBAzHL,OAAO;eACV,OAAO;eACP,OAAO;YACV,MAAM;gBACF,OAAO,GAAG,IAAI;iBACb,MAAM;;;;kBALL,OAAO;eACV,OAAO;eACP,OAAO;YACV,MAAM;gBACF,OAAO,GAAG,IAAI;iBACb,MAAM;;;kFA6HnB,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":"WListHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WListHeader.vue"],"names":[],"mappings":"AAsFA,iBAAS,cAAc;;yBAsIM,GAAG;;;WASlB,OAAO,IAA6B;EAEjD;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;kBAnLL,OAAO;eACV,OAAO;eACP,OAAO;YACV,MAAM;gBACF,OAAO,GAAG,IAAI;iBACb,MAAM;;;;kBALL,OAAO;eACV,OAAO;eACP,OAAO;YACV,MAAM;gBACF,OAAO,GAAG,IAAI;iBACb,MAAM;;;kFAuLnB,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/WListHeader.vue.js

@@ -1,15 +1,10 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, createBlock, createCommentVNode, renderSlot } from 'vue';
+import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, createBlock, createCommentVNode, renderSlot } from 'vue';
 import _sfc_main$1 from '../Checkbox/WCheckbox.vue.js';
 
-const _hoisted_1 = { class: "flex text-description font-semibold" };
-const _hoisted_2 = {
-  key: 0,
-  class: "w-list-header-item width-16"
-};
-const _hoisted_3 = {
-  key: 1,
-  class: "w-list-header-item width-14"
-};
+const _hoisted_1 = { class: "flex text-description font-semibold h-12" };
+const _hoisted_2 = { class: "sticky z-[1] left-inner bg-default dark:bg-default-dark" };
+const _hoisted_3 = { class: "bg-primary-light dark:bg-primary-darkest border-y border-solid border-gray-300 dark:border-gray-700 flex flex-1" };
+const _hoisted_4 = { class: "sticky z-[1] right-inner bg-default dark:bg-default-dark" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WListHeader",
   props: {
@@ -24,19 +19,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        _ctx.allowSelect ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          _ctx.selection === void 0 || _ctx.count === 0 ? (openBlock(), createElementBlock("div", _hoisted_2)) : (openBlock(), createBlock(_sfc_main$1, {
-            key: 1,
-            disabled: _ctx.disabled,
-            "model-value": _ctx.selection,
-            "tooltip-text": _ctx.tooltipText,
-            intermediate: "",
-            class: "w-list-header-item width-16 justify-end",
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggle:selection", $event))
-          }, null, 8, ["disabled", "model-value", "tooltip-text"]))
-        ], 64)) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default"),
-        !_ctx.hideMore ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)
+        createElementVNode("div", _hoisted_2, [
+          _cache[1] || (_cache[1] = createElementVNode("div", { class: "absolute top-0 -z-[1] right-full h-full w-[calc(var(--nav-bar-width)+var(--inner-margin))] bg-default dark:bg-default-dark" }, null, -1)),
+          createElementVNode("div", {
+            class: normalizeClass(["bg-primary-light dark:bg-primary-darkest border-y border-solid border-gray-300 dark:border-gray-700 rounded-l-2xl border-l h-full", {
+              "width-16": _ctx.allowSelect,
+              "width-4": !_ctx.allowSelect
+            }])
+          }, [
+            _ctx.allowSelect && _ctx.selection !== void 0 && _ctx.count !== 0 ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              disabled: _ctx.disabled,
+              "model-value": _ctx.selection,
+              "tooltip-text": _ctx.tooltipText,
+              intermediate: "",
+              class: "w-full h-full justify-end pr-6",
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggle:selection", $event))
+            }, null, 8, ["disabled", "model-value", "tooltip-text"])) : createCommentVNode("", true)
+          ], 2)
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          _cache[2] || (_cache[2] = createElementVNode("div", { class: "absolute top-0 -z-[1] left-full h-full w-[calc(var(--actions-bar-width)+var(--inner-margin))] bg-default dark:bg-default-dark" }, null, -1)),
+          createElementVNode("div", {
+            class: normalizeClass(["bg-primary-light dark:bg-primary-darkest border-y border-solid border-gray-300 dark:border-gray-700 rounded-r-2xl border-r h-full", {
+              "width-14": !_ctx.hideMore,
+              "width-4": _ctx.hideMore
+            }])
+          }, null, 2)
+        ])
       ]);
     };
   }

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

@@ -1,17 +1,20 @@
 import { OrderItem } from '../../utils/order';
 declare const _default: <Field>(__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<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:width"?: ((value: number) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:width"> & {
         title?: string;
         field: Field;
         ordering: OrderItem<Field>[];
         disabled?: boolean;
+        allowResize?: boolean;
     }> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
         default?(_: {}): any;
     };
-    emit: {};
+    emit: (e: "update:width", value: number) => void;
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {

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":"AAkGA,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,eAAe,CAAA;yBAGlD,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;WAyJxD,mBAAmB,CAAC;gBArJpB,MAAM;eACP,KAAK;kBACF,SAAS,CAAC,KAAK,CAAC,EAAE;mBACjB,OAAO;KAkJmE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBA1BgB,GAAG;;UA4BvB,EAAE;;;;YAGiC,OAAO,CAAC,OAAO,WAAW,CAAC;;AAnKvE,wBAmK4E;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":"AAgHA,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,eAAe,CAAA;yBAIlD,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;WAmNxD,mBAAmB,CAAC;;;gBA/MpB,MAAM;eACP,KAAK;kBACF,SAAS,CAAC,KAAK,CAAC,EAAE;mBACjB,OAAO;sBACJ,OAAO;KA2MgE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBA9BiB,GAAG;;cA1K3B,cAAc,SAAS,MAAM,KAAG,IAAI;;;;YA6ME,OAAO,CAAC,OAAO,WAAW,CAAC;;AA7NvE,wBA6N4E;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,11 +1,12 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, Transition, withCtx, unref, createCommentVNode } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, withCtx, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, Transition, createElementBlock, createVNode, unref, createCommentVNode } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 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';
 
 const _hoisted_1 = {
   key: 0,
-  class: "flex gap-1 w-7 items-center"
+  class: "flex gap-1 items-center"
 };
 const _hoisted_2 = { key: 0 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -14,8 +15,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     title: {},
     field: {},
     ordering: {},
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    allowResize: { type: Boolean }
   },
+  emits: ["update:width"],
   setup(__props) {
     const props = __props;
     const route = useRoute();
@@ -44,41 +47,53 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateQuery(newOrdering);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["w-list-header-item flex gap-2 select-none items-center text-description font-semibold h-11", {
-          "cursor-pointer": !_ctx.disabled
-        }]),
-        onClick: setOrdering
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(["whitespace-nowrap", {
-            "hover:underline": !_ctx.disabled
-          }])
-        }, [
-          renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.title), 1)
-          ])
-        ], 2),
-        createVNode(Transition, {
-          "enter-active-class": "transition-opacity",
-          "leave-active-class": "transition-opacity",
-          "enter-from-class": "opacity-0",
-          "leave-to-class": "opacity-0"
-        }, {
-          default: withCtx(() => [
-            index.value !== -1 ? (openBlock(), createElementBlock("div", _hoisted_1, [
-              createVNode(unref(IconBack), {
-                class: normalizeClass(["w-4 h-4 transition-transform", {
-                  "rotate-90": _ctx.ordering[index.value]?.order === "ASC",
-                  "-rotate-90": _ctx.ordering[index.value]?.order === "DESC"
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.allowResize ? _sfc_main$1 : "div"), {
+        class: "select-none text-description pr-6",
+        "onUpdate:width": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:width", $event))
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.disabled ? "div" : "button"), {
+            class: normalizeClass(["h-full w-full flex gap-2 group font-semibold items-center", {
+              "cursor-pointer": !_ctx.disabled
+            }]),
+            onClick: setOrdering
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(["whitespace-nowrap", {
+                  "group-hover:underline": !_ctx.disabled
                 }])
-              }, null, 8, ["class"]),
-              _ctx.ordering.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(index.value + 1), 1)) : createCommentVNode("", true)
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 2);
+              }, [
+                renderSlot(_ctx.$slots, "default", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.title), 1)
+                ])
+              ], 2),
+              !_ctx.disabled ? (openBlock(), createBlock(Transition, {
+                key: 0,
+                "enter-active-class": "transition-opacity",
+                "leave-active-class": "transition-opacity",
+                "enter-from-class": "opacity-0",
+                "leave-to-class": "opacity-0"
+              }, {
+                default: withCtx(() => [
+                  index.value !== -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"
+                      }])
+                    }, null, 8, ["class"]),
+                    _ctx.ordering.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(index.value + 1), 1)) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["class"]))
+        ]),
+        _: 3
+      }, 32);
     };
   }
 });

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

@@ -0,0 +1,20 @@
+declare const _default: <Field>(__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:width"?: ((value: number) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:width"> & {}> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?(_: {}): any;
+    };
+    emit: (e: "update:width", value: number) => void;
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
+//# sourceMappingURL=HeaderItemResizer.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderItemResizer.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/components/HeaderItemResizer.vue"],"names":[],"mappings":"yBAmFiB,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;WAwIxD,mBAAmB,CAAC;;2IAAyD,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBA7BgB,GAAG;;cAzG1B,cAAc,SAAS,MAAM,KAAG,IAAI;;;;YA2IE,OAAO,CAAC,OAAO,WAAW,CAAC;;AAlJvE,wBAkJ4E;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/HeaderItemResizer.vue.js

@@ -0,0 +1,66 @@
+import { defineComponent, useTemplateRef, onMounted, onBeforeUnmount, openBlock, createElementBlock, renderSlot, createElementVNode, withModifiers, createVNode, unref } from 'vue';
+import IconDrag from '../../../assets/icons/sax/IconDrag.svg.js';
+import DOMListenerContainer from '../../../utils/DOMListenerContainer.js';
+
+const _hoisted_1 = {
+  ref: "element",
+  class: "relative"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderItemResizer",
+  emits: ["update:width"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const listenerContainer = new DOMListenerContainer();
+    const elementRef = useTemplateRef("element");
+    let started = null;
+    let widthSaved = null;
+    const startDrag = (clickEvent) => {
+      if (!elementRef.value) return;
+      started = clickEvent.clientX;
+      widthSaved = elementRef.value.offsetWidth;
+      listenerContainer.addEventListener(document, "mousemove", (event) => {
+        if (started === null || widthSaved === null || !(event instanceof MouseEvent)) {
+          endDrag();
+          return;
+        }
+        emit("update:width", widthSaved + event.clientX - started);
+      });
+      listenerContainer.addEventListener(document, "mouseup", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        endDrag();
+      });
+    };
+    const endDrag = () => {
+      listenerContainer.destroy();
+      started = null;
+      widthSaved = null;
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        if (!elementRef.value) return;
+        emit("update:width", elementRef.value.offsetWidth);
+      }, 1e3);
+    });
+    onBeforeUnmount(() => {
+      listenerContainer.destroy();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "default"),
+        createElementVNode("button", {
+          class: "absolute top-0 right-1 h-full w-6 flex items-center opacity-50 hover:opacity-100 cursor-col-resize",
+          onMousedown: withModifiers(startDrag, ["stop", "prevent"]),
+          onMouseup: withModifiers(endDrag, ["stop", "prevent"]),
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop", "prevent"]))
+        }, [
+          createVNode(unref(IconDrag))
+        ], 32)
+      ], 512);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

package/dist/components/List/types.d.ts

@@ -3,12 +3,16 @@ export type FieldComponent<Data> = Component<{
     item: Data;
     skeleton?: boolean;
     readonly?: boolean;
+    mobile?: boolean;
 }>;
 export type ListField<Data, QueryParams = unknown> = {
     component: Raw<FieldComponent<Data>>;
-    title: string | ((item: QueryParams) => string);
+    title: string | ((params: QueryParams) => string);
     cssClass?: string;
-    field?: keyof Data;
+    field?: Extract<keyof Data, string> | ((params: QueryParams) => Extract<keyof Data, string>);
+    visibleGetter?: (params: QueryParams) => boolean;
+    allowOpen?: boolean;
+    allowResize?: boolean;
 };
 export type MenuComponent<Data> = Component<{
     item: Data;

package/dist/components/List/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAE,GAAG,EAAC,MAAM,KAAK,CAAA;AAEvC,MAAM,MAAM,cAAc,CAAC,IAAI,IAAI,SAAS,CAAC;IAC3C,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,IAAI;IACnD,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;IACrC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,IAAI,IAAI,SAAS,CAAC;IAC1C,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,aAAa,CAAC,WAAW,IAAI,SAAS,CAAC;IACjD,iBAAiB,EAAE,MAAM,WAAW,CAAA;IACpC,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAE,GAAG,EAAC,MAAM,KAAK,CAAA;AAEvC,MAAM,MAAM,cAAc,CAAC,IAAI,IAAI,SAAS,CAAC;IAC3C,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC,CAAA;AAEF,MAAM,MAAM,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,IAAI;IACnD,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAA;IACpC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,MAAM,IAAI,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5F,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAA;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,IAAI,IAAI,SAAS,CAAC;IAC1C,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,aAAa,CAAC,WAAW,IAAI,SAAS,CAAC;IACjD,iBAAiB,EAAE,MAAM,WAAW,CAAA;IACpC,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA"}