eco-vue-js 0.10.5 → 0.10.7

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

@@ -18,7 +18,6 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<{
     disabled: boolean | undefined;
-    hideMore: boolean | undefined;
     mobile: boolean | undefined;
     alignTop: boolean | undefined;
     hasBorder: boolean | undefined;
@@ -27,16 +26,16 @@ declare const __VLS_component: import('vue').DefineComponent<{
     allowOpen: boolean | undefined;
     disableMore: boolean | undefined;
     formName: string | undefined;
-    card: boolean | undefined;
+    card: boolean;
     to: LinkProps["to"] | undefined;
-}, {
-    updateSelected: ((value: boolean) => void) | undefined;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:selected": (value: boolean) => any;
-    "update:selected-hover": (value: boolean) => any;
+    selected: boolean;
+    allowSelect: boolean;
+    allowSelectHover: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "toggle:selected": () => any;
+    "hover:selected": () => any;
 }, string, import('vue').PublicProps, Readonly<{
     disabled: boolean | undefined;
-    hideMore: boolean | undefined;
     mobile: boolean | undefined;
     alignTop: boolean | undefined;
     hasBorder: boolean | undefined;
@@ -45,11 +44,14 @@ declare const __VLS_component: import('vue').DefineComponent<{
     allowOpen: boolean | undefined;
     disableMore: boolean | undefined;
     formName: string | undefined;
-    card: boolean | undefined;
+    card: boolean;
     to: LinkProps["to"] | undefined;
+    selected: boolean;
+    allowSelect: boolean;
+    allowSelectHover: boolean;
 }> & Readonly<{
-    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
-    "onUpdate:selected-hover"?: ((value: boolean) => any) | undefined;
+    "onToggle:selected"?: (() => any) | undefined;
+    "onHover:selected"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"WListCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WListCard.vue"],"names":[],"mappings":"AAyPA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AA4F5C,iBAAS,cAAc;;;;;;YAscO,GAAG;sBACN,GAAG;sBACH,GAAG;2BACE,GAAG;;;;;WAUrB,OAAO,IAA6B;EAEjD;AAiCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;cA/jBT,OAAO,GAAG,SAAS;cACnB,OAAO,GAAG,SAAS;YACrB,OAAO,GAAG,SAAS;cACjB,OAAO,GAAG,SAAS;eAClB,OAAO,GAAG,SAAS;eACnB,MAAM,GAAG,SAAS;sBACX,MAAM,GAAG,SAAS;eACzB,OAAO,GAAG,SAAS;iBACjB,OAAO,GAAG,SAAS;cACtB,MAAM,GAAG,SAAS;UACtB,OAAO,GAAG,SAAS;QACrB,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS;;;;;;;cAXrB,OAAO,GAAG,SAAS;cACnB,OAAO,GAAG,SAAS;YACrB,OAAO,GAAG,SAAS;cACjB,OAAO,GAAG,SAAS;eAClB,OAAO,GAAG,SAAS;eACnB,MAAM,GAAG,SAAS;sBACX,MAAM,GAAG,SAAS;eACzB,OAAO,GAAG,SAAS;iBACjB,OAAO,GAAG,SAAS;cACtB,MAAM,GAAG,SAAS;UACtB,OAAO,GAAG,SAAS;QACrB,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS;;;;kFA+jB/B,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":"WListCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WListCard.vue"],"names":[],"mappings":"AA8OA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AA8D5C,iBAAS,cAAc;;;;;;YAwZO,GAAG;sBACN,GAAG;sBACH,GAAG;2BACE,GAAG;;;;;WAUrB,OAAO,IAA6B;EAEjD;AA2BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;cA9eT,OAAO,GAAG,SAAS;YACrB,OAAO,GAAG,SAAS;cACjB,OAAO,GAAG,SAAS;eAClB,OAAO,GAAG,SAAS;eACnB,MAAM,GAAG,SAAS;sBACX,MAAM,GAAG,SAAS;eACzB,OAAO,GAAG,SAAS;iBACjB,OAAO,GAAG,SAAS;cACtB,MAAM,GAAG,SAAS;UACtB,OAAO;QACT,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS;cAErB,OAAO;iBACJ,OAAO;sBACF,OAAO;;;;;cAdf,OAAO,GAAG,SAAS;YACrB,OAAO,GAAG,SAAS;cACjB,OAAO,GAAG,SAAS;eAClB,OAAO,GAAG,SAAS;eACnB,MAAM,GAAG,SAAS;sBACX,MAAM,GAAG,SAAS;eACzB,OAAO,GAAG,SAAS;iBACjB,OAAO,GAAG,SAAS;cACtB,MAAM,GAAG,SAAS;UACtB,OAAO;QACT,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS;cAErB,OAAO;iBACJ,OAAO;sBACF,OAAO;;;;kFA0ezB,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/WListCard.vue.js

@@ -1,23 +1,34 @@
-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 { defineComponent, useTemplateRef, ref, computed, createElementBlock, openBlock, Fragment, createElementVNode, createCommentVNode, mergeProps, createVNode, createBlock, Transition, withCtx, normalizeClass, resolveDynamicComponent, renderSlot, normalizeStyle, unref, 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$4 from '../Button/WButtonMore.vue.js';
+import _sfc_main$5 from '../Button/WButtonMoreItem.vue.js';
 import _sfc_main$1 from '../Checkbox/WCheckbox.vue.js';
 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 _sfc_main$3 from './components/ListCardAction.vue.js';
 import { AREA_SELECT, AREA_MORE } from './types.js';
 
 const _hoisted_1 = {
   key: 0,
   class: "bg-primary-default dark:bg-primary-dark @sm:hidden absolute left-0 top-0 h-full w-2"
 };
+const _hoisted_2 = {
+  key: 1,
+  class: "bg-primary-default/10 dark:bg-primary-dark/10 rounded-inherit pointer-events-none absolute inset-0"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "bg-primary-default/10 dark:bg-primary-dark/10 rounded-inherit pointer-events-none absolute inset-0"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "bg-primary-default/10 dark:bg-primary-dark/10 rounded-inherit pointer-events-none absolute inset-0"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WListCard",
   props: {
     disabled: { type: Boolean },
-    hideMore: { type: Boolean },
     mobile: { type: Boolean },
     alignTop: { type: Boolean },
     hasBorder: { type: Boolean },
@@ -27,53 +38,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disableMore: { type: Boolean },
     formName: {},
     card: { type: Boolean },
-    to: {}
+    to: {},
+    selected: { type: Boolean },
+    allowSelect: { type: Boolean },
+    allowSelectHover: { type: Boolean }
   },
-  emits: ["update:selected", "update:selected-hover"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const emit = __emit;
+  emits: ["toggle:selected", "hover:selected"],
+  setup(__props) {
+    const props = __props;
     const formRef = useTemplateRef("form");
     const isOpen = ref(false);
     const toggle = () => {
       isOpen.value = !isOpen.value;
     };
     const validate = (...args) => formRef.value?.validate(...args);
-    const {
-      allowSelect,
-      allowSelectRange,
-      allowSelectHover
-    } = inject(wInfiniteListSelection, {});
-    const {
-      selected,
-      selectedBetween,
-      updateSelected,
-      updateSelectedRange,
-      updateSelectedRangeHover
-    } = inject(wInfiniteListSelectionItem, {});
-    if (selected) {
-      watch(selected, (value) => {
-        emit("update:selected", value);
-      }, { immediate: true });
-    }
-    if (allowSelectHover) {
-      watch(allowSelectHover, (value) => {
-        emit("update:selected-hover", value);
-      }, { immediate: true });
-    }
-    __expose({
-      updateSelected
-    });
+    const isActionShown = computed(() => props.allowOpen || props.to !== void 0 || props.allowSelectHover);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
-          class: normalizeClass(["relative isolate", {
+        createElementVNode("div", mergeProps(_ctx.allowSelect ? { "onMouseover": () => _ctx.$emit("hover:selected") } : void 0, {
+          class: ["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,
+            "w-ripple-trigger-has": isActionShown.value,
+            "sm-not:dark:even:bg-primary-darkest/25 sm-not:even:bg-gray-50 grid grid-cols-1": _ctx.card,
             "flex": !_ctx.card,
             "-mb-px": !_ctx.card && isOpen.value
-          }])
-        }, [
+          }]
+        }), [
           createVNode(Transition, {
             "enter-active-class": "transition-transform duration-200",
             "leave-active-class": "transition-transform duration-200",
@@ -81,85 +71,83 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "leave-to-class": "-translate-x-2"
           }, {
             default: withCtx(() => [
-              _ctx.mobile && unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true)
+              _ctx.mobile && _ctx.selected ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true)
             ]),
             _: 1
           }),
           !_ctx.card ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: normalizeClass(["left-inner bg-default dark:bg-default-dark @not-lg:hidden sticky z-[1]", {
-              "width-16": unref(allowSelect),
-              "width-4": !unref(allowSelect)
+              "width-16": _ctx.allowSelect,
+              "width-4": !_ctx.allowSelect
             }])
           }, [
-            _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)),
+            _cache[3] || (_cache[3] = 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 rounded-l-[--w-list-rounded,unset]", {
-                "border border-r-0 border-gray-300 dark:border-gray-700": _ctx.hasBorder,
+                "border border-r-0": _ctx.hasBorder,
+                "border-gray-300 dark:border-gray-700": _ctx.hasBorder && !_ctx.selected,
+                "border-primary-default dark:border-primary-dark": _ctx.hasBorder && _ctx.selected,
                 "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
+                "w-ripple-has-only w-ripple-hover w-ripple-opacity-[0.04]": isActionShown.value
               }])
             }, [
-              unref(allowSelect) ? (openBlock(), createBlock(_sfc_main$1, {
+              _ctx.allowSelect ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,
-                "model-value": unref(selectedBetween) ? null : unref(selected) ?? false,
+                "model-value": _ctx.selected,
                 disabled: _ctx.disabled,
-                "allow-shift": unref(allowSelectRange),
                 "align-top": _ctx.alignTop,
                 class: normalizeClass(["h-full px-4", {
-                  "opacity-50": unref(allowSelectHover),
+                  "opacity-50": _ctx.allowSelectHover,
                   "pt-3": _ctx.alignTop
                 }]),
-                "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)
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggle:selected"))
+              }, null, 8, ["model-value", "disabled", "align-top", "class"])) : createCommentVNode("", true),
+              _ctx.selected ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)
             ], 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", {
               [_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,
-              "border": _ctx.card && _ctx.hasBorder,
+              "grid grid-cols-[--w-list-grid-cols] [grid-template-areas:--w-list-grid-areas] sm:rounded-[--w-list-rounded,unset]": _ctx.card,
+              "sm:border-y": _ctx.hasBorder,
+              "border-gray-300 dark:border-gray-700": _ctx.hasBorder && !_ctx.selected,
+              "border-primary-default dark:border-primary-dark": _ctx.hasBorder && _ctx.selected,
+              "sm:border": _ctx.card && _ctx.hasBorder,
               "border-b-transparent dark:border-b-transparent": !_ctx.card && _ctx.hasBorder && isOpen.value
             }]
           }), {
             default: withCtx(() => [
-              unref(allowSelect) && _ctx.card ? (openBlock(), createBlock(_sfc_main$1, {
+              _ctx.allowSelect && _ctx.card ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,
-                "model-value": unref(selectedBetween) ? null : unref(selected) ?? false,
+                "model-value": _ctx.selected,
                 disabled: _ctx.disabled,
-                "allow-shift": unref(allowSelectRange),
                 class: normalizeClass(["justify-end self-start", {
-                  "opacity-50": unref(allowSelectHover)
+                  "opacity-50": _ctx.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),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("toggle:selected"))
+              }, null, 8, ["model-value", "disabled", "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,
+              isActionShown.value ? (openBlock(), createBlock(_sfc_main$3, normalizeProps(mergeProps(
+                { key: 1 },
+                _ctx.allowSelectHover ? { tag: "button", card: _ctx.card, onClick: () => _ctx.$emit("toggle:selected") } : _ctx.to ? { tag: markRaw(unref(RouterLink)), card: _ctx.card, class: "z-[-1]", props: { to: _ctx.to } } : { tag: "button", card: _ctx.card, class: "z-[-1]", onClick: toggle }
+              )), null, 16)) : createCommentVNode("", true),
+              _ctx.selected ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true),
+              _ctx.card && _ctx.$slots.more ? (openBlock(), createBlock(_sfc_main$4, {
+                key: 3,
                 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, {
+                  _ctx.allowSelect ? (openBlock(), createBlock(_sfc_main$5, {
                     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)))
+                    text: _ctx.selected ? "Unselect" : "Select",
+                    icon: _ctx.selected ? markRaw(unref(IconMinusCircle)) : markRaw(unref(IconAddCircle)),
+                    onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("toggle:selected"))
                   }, null, 8, ["text", "icon"])) : createCommentVNode("", true),
                   renderSlot(_ctx.$slots, "more")
                 ]),
@@ -171,20 +159,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           !_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
+              "width-14": _ctx.$slots.more,
+              "width-4": !_ctx.$slots.more
             }])
           }, [
-            _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)),
+            _cache[4] || (_cache[4] = 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 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-tr-[--w-list-rounded,unset] border border-l-0": _ctx.hasBorder,
+                "border-gray-300 dark:border-gray-700": _ctx.hasBorder && !_ctx.selected,
+                "border-primary-default dark:border-primary-dark": _ctx.hasBorder && _ctx.selected,
                 "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
+                "w-ripple-has-only w-ripple-hover w-ripple-opacity-[0.04]": isActionShown.value
               }])
             }, [
-              !_ctx.hideMore ? (openBlock(), createBlock(_sfc_main$3, {
+              _ctx.$slots.more ? (openBlock(), createBlock(_sfc_main$4, {
                 key: 0,
                 class: normalizeClass(["flex h-full px-4", {
                   "items-start pt-3": _ctx.alignTop,
@@ -196,15 +186,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "more")
                 ]),
                 _: 3
-              }, 8, ["class", "disabled"])) : createCommentVNode("", true)
+              }, 8, ["class", "disabled"])) : createCommentVNode("", true),
+              _ctx.selected ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true)
             ], 2)
           ], 2)) : createCommentVNode("", true)
-        ], 2),
+        ], 16),
         _ctx.$slots.expansion ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           isOpen.value ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(["w-inner left-inner sticky col-span-full", {
-              "border-gray-300 dark:border-gray-700": _ctx.hasBorder,
+            class: normalizeClass(["sm:w-inner sm:left-inner col-span-full sm:sticky", {
+              "border-gray-300 dark:border-gray-700": _ctx.hasBorder && !_ctx.selected,
+              "border-primary-default dark:border-primary-dark": _ctx.hasBorder && _ctx.selected,
               "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
             }])

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":"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"}
+{"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;WA6MxD,mBAAmB,CAAC;;;gBAzMpB,MAAM;eACP,KAAK;kBACF,SAAS,CAAC,KAAK,CAAC,EAAE;mBACjB,OAAO;sBACJ,OAAO;oBACT,MAAM;oBACN,UAAU,GAAG,SAAS;KAmMmD,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAhCiB,GAAG;;cAhK3B,cAAc,SAAS,MAAM,KAAG,IAAI;;;;YAqME,OAAO,CAAC,OAAO,WAAW,CAAC;;AAvNvE,wBAuN4E;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

@@ -40,7 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }), {
         default: withCtx(() => [
           (openBlock(), createBlock(resolveDynamicComponent(_ctx.disabled ? "div" : "button"), {
-            class: normalizeClass(["group flex size-full gap-2", {
+            class: normalizeClass(["group flex size-full gap-2 overflow-clip", {
               "cursor-pointer": !_ctx.disabled,
               [_ctx.itemClass ?? ""]: true,
               "items-center whitespace-nowrap font-semibold": !_ctx.itemClass

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

@@ -1,5 +1,5 @@
 import { FieldConfig, ListFields } from '../types';
-import { ListMode } from '../use/useListConfig';
+import { ListMode } from '../../../utils/utils';
 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;
@@ -10,7 +10,8 @@ declare const _default: <Data extends DefaultData, QueryParams>(__VLS_props: Non
         fieldConfigMap: Record<string, FieldConfig>;
         mode: ListMode;
         queryParams: QueryParams;
-        hasSaved?: boolean;
+        hasSaved: boolean;
+        mobile: boolean;
         disabled?: boolean;
     }> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;

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":"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"}
+{"version":3,"file":"HeaderSettings.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/components/HeaderSettings.vue"],"names":[],"mappings":"AAyLA,OAAO,KAAK,EAAC,WAAW,EAAa,UAAU,EAAC,MAAM,UAAU,CAAA;AAChE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAA;yBAmB1B,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;WAgYxD,mBAAmB,CAAC;;;;;gBA5XpB,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;wBACrB,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC;cACrC,QAAQ;qBACD,WAAW;kBACd,OAAO;gBACT,OAAO;mBACJ,OAAO;KAsXmE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;YAnXP,yBAAyB,SAAS,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,IAAI;YACpE,aAAa,SAAS,QAAQ,GAAG,IAAI;YACrC,aAAa,GAAG,IAAI;;;;;YAsXkB,OAAO,CAAC,OAAO,WAAW,CAAC;;AA1YvE,wBA0Y4E;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,21 +1,9 @@
-import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, Fragment, renderList, normalizeClass, markRaw } from 'vue';
+import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, createCommentVNode, 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 '../../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';
@@ -23,10 +11,17 @@ import { listModeList, listModeIconMap } from '../use/useListConfig.js';
 
 const _hoisted_1 = { class: "p-4" };
 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 _hoisted_3 = {
+  key: 0,
+  class: "flex flex-col gap-4"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "mx-4 h-full border-r border-solid border-gray-200 dark:border-gray-700"
+};
+const _hoisted_5 = { class: "grid grid-cols-1" };
+const _hoisted_6 = { class: "flex justify-end" };
+const _hoisted_7 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "HeaderSettings",
   props: {
@@ -35,6 +30,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     mode: {},
     queryParams: {},
     hasSaved: { type: Boolean },
+    mobile: { type: Boolean },
     disabled: { type: Boolean }
   },
   emits: ["update:field-config-map", "update:mode", "click:reset"],
@@ -108,7 +104,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createElementVNode("div", _hoisted_1, [
                 createElementVNode("div", _hoisted_2, [
-                  createElementVNode("div", _hoisted_3, [
+                  !_ctx.mobile ? (openBlock(), createElementBlock("div", _hoisted_3, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(unref(listModeList), (item) => {
                       return openBlock(), createBlock(_sfc_main$3, {
                         key: item,
@@ -117,9 +113,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         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, [
+                  ])) : createCommentVNode("", true),
+                  !_ctx.mobile ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true),
+                  createElementVNode("div", _hoisted_5, [
                     createVNode(_sfc_main$4, { fields: _ctx.fields }, {
                       default: withCtx(({ field, nested, first, last }) => [
                         createVNode(_sfc_main$5, {
@@ -139,8 +135,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, 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, [
+                _cache[4] || (_cache[4] = createElementVNode("div", { class: "my-4 border-b border-solid border-gray-200 dark:border-gray-700" }, null, -1)),
+                createElementVNode("div", _hoisted_6, [
                   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,
@@ -148,7 +144,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }]),
                     disabled: !_ctx.hasSaved,
                     onClick: _cache[2] || (_cache[2] = ($event) => _ctx.hasSaved && _ctx.$emit("click:reset"))
-                  }, " Reset ", 10, _hoisted_6)
+                  }, " Reset ", 10, _hoisted_7)
                 ])
               ])
             ]),

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

@@ -1,6 +1,6 @@
 import { FieldConfig, ListFields } from '../types';
 import { OrderItem } from '../../../utils/order';
-import { ListMode } from '../use/useListConfig';
+import { ListMode } from '../../../utils/utils';
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderSort.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/components/HeaderSort.vue"],"names":[],"mappings":"AAoFA,OAAO,KAAK,EAAC,WAAW,EAAa,UAAU,EAAC,MAAM,UAAU,CAAA;AAChE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAc5C,OAAO,EAAC,KAAK,QAAQ,EAAC,MAAM,sBAAsB,CAAA;yBAGjC,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;WAyLxD,mBAAmB,CAAC;;;;;kBAnLlB,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE;gBACzB,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;qBACxB,WAAW;mBACb,OAAO;KAgLmE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;YA7KP,yBAAyB,SAAS,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,IAAI;YACpE,aAAa,SAAS,QAAQ,GAAG,IAAI;YACrC,aAAa,GAAG,IAAI;;;;;YAgLkB,OAAO,CAAC,OAAO,WAAW,CAAC;;AAnMvE,wBAmM4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"HeaderSort.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/components/HeaderSort.vue"],"names":[],"mappings":"AAmFA,OAAO,KAAK,EAAC,WAAW,EAAa,UAAU,EAAC,MAAM,UAAU,CAAA;AAChE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAA;yBAe1B,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;WAyLxD,mBAAmB,CAAC;;;;;kBAnLlB,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE;gBACzB,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;qBACxB,WAAW;mBACb,OAAO;KAgLmE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;YA7KP,yBAAyB,SAAS,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,IAAI;YACpE,aAAa,SAAS,QAAQ,GAAG,IAAI;YACrC,aAAa,GAAG,IAAI;;;;;YAgLkB,OAAO,CAAC,OAAO,WAAW,CAAC;;AAnMvE,wBAmM4E;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/HeaderSort.vue.js

@@ -3,20 +3,7 @@ import _sfc_main$4 from '../../Button/WButtonSelectionAction.vue.js';
 import _sfc_main$2 from '../../ClickOutside/WClickOutside.vue.js';
 import _sfc_main$1 from '../../DropdownMenu/WDropdownMenu.vue.js';
 import IconSort from '../../../assets/icons/default/IconSort.svg.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 '../use/useListConfig.js';
 import _sfc_main$3 from './HeaderSortItem.vue.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

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

@@ -0,0 +1,23 @@
+import { Component } from 'vue';
+declare const _default: <Props>(__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 onClick?: ((value: MouseEvent) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & {
+        tag: Component | keyof HTMLElementTagNameMap;
+        props?: Props;
+        card: boolean;
+    }> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (e: "click", value: MouseEvent) => 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=ListCardAction.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListCardAction.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/components/ListCardAction.vue"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,KAAK,CAAA;yBAGjB,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;WAqGxD,mBAAmB,CAAC;;;aAjGvB,SAAS,GAAG,MAAM,qBAAqB;gBACpC,KAAK;cACP,OAAO;KA+FwE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;cA5FP,OAAO,SAAS,UAAU,KAAG,IAAI;;;;YAiGK,OAAO,CAAC,OAAO,WAAW,CAAC;;AA/GvE,wBA+G4E;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/ListCardAction.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent, createBlock, openBlock, resolveDynamicComponent, mergeProps } from 'vue';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ListCardAction",
+  props: {
+    tag: {},
+    props: {},
+    card: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps(_ctx.props, {
+        class: ["w-ripple w-ripple-hover w-ripple-has w-ripple-opacity-[0.04] absolute inset-0 cursor-pointer", {
+          "w-ripple-rounded-[--w-list-rounded,unset] rounded-[--w-list-rounded,unset]": _ctx.card
+        }],
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      }), null, 16, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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

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

@@ -1,3 +1,4 @@
+import { ListMode } from '../../utils/utils';
 import { Component, Raw } from 'vue';
 export type FieldComponent<Data> = Component<{
     item: Data;
@@ -98,5 +99,9 @@ export type CardAreas<Fields extends ListFields<any, any>, Length extends number
 })[];
 type GridColValue = 'auto' | '1fr' | `${number}rem`;
 export type GridCol = GridColValue | `minmax(${GridColValue}, ${GridColValue})`;
+export type ListConfig<Fields extends ListFields<any, any>> = {
+    fields: FieldConfigMap<Fields>;
+    mode: ListMode;
+};
 export {};
 //# sourceMappingURL=types.d.ts.map