eco-vue-js 0.8.18 → 0.8.19

package/dist/components/Button/WButtonSelection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WButtonSelection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Button/WButtonSelection.vue"],"names":[],"mappings":"AAiLA,iBAAS,cAAc;;;;;YA2KM,GAAG;;;;YACL,GAAG;;;WAShB,OAAO,IAA6B;EAEjD;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAjQT,MAAM;qBACG,MAAM;;;;;;YADf,MAAM;qBACG,MAAM;;;;WADf,MAAM;oBACG,MAAM;6EA2QzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WButtonSelection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Button/WButtonSelection.vue"],"names":[],"mappings":"AAiLA,iBAAS,cAAc;;;;;YA8KM,GAAG;;;;YACL,GAAG;;;WAShB,OAAO,IAA6B;EAEjD;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YApQT,MAAM;qBACG,MAAM;;;;;;YADf,MAAM;qBACG,MAAM;;;;WADf,MAAM;oBACG,MAAM;6EA8QzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/Button/WButtonSelection.vue.js

@@ -8,7 +8,7 @@ import { HorizontalAlign } from '../../utils/HorizontalAlign.js';
 import _sfc_main$3 from '../ClickOutside/WClickOutside.vue.js';
 import { wInfiniteListSelection } from '../InfiniteList/models/injection.js';
 
-const _hoisted_1 = { class: "grid grid-cols-[1fr,auto] h-12 pb-3 w-full" };
+const _hoisted_1 = { class: "grid grid-cols-[1fr,auto] h-12 pb-3 w-full sm:sticky sm:left-inner sm:w-inner" };
 const _hoisted_2 = { class: "flex" };
 const _hoisted_3 = {
   key: 0,

package/dist/components/Expansion/WExpansion.vue.d.ts

@@ -9,10 +9,14 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<{
     isOpen?: boolean;
     isShown?: boolean;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:visible": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<{
     isOpen?: boolean;
     isShown?: boolean;
-}> & Readonly<{}>, {
+}> & Readonly<{
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+}>, {
     isOpen: boolean;
     isShown: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/Expansion/WExpansion.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WExpansion.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Expansion/WExpansion.vue"],"names":[],"mappings":"AAgEA,iBAAS,cAAc;;yBAkDO,GAAG;;;WASnB,OAAO,IAA6B;EAEjD;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aA5FR,OAAO;cACN,OAAO;;aADR,OAAO;cACN,OAAO;;YADR,OAAO;aACN,OAAO;6EAkGnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WExpansion.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Expansion/WExpansion.vue"],"names":[],"mappings":"AA2EA,iBAAS,cAAc;;yBAyFO,GAAG;;;WASnB,OAAO,IAA6B;EAEjD;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aA5IR,OAAO;cACN,OAAO;;;;aADR,OAAO;cACN,OAAO;;;;YADR,OAAO;aACN,OAAO;6EAqJnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAgBpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/Expansion/WExpansion.vue.js

@@ -11,6 +11,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     isOpen: { type: Boolean, default: true },
     isShown: { type: Boolean, default: true }
   },
+  emits: ["update:visible"],
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Transition, {
@@ -19,7 +20,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "enter-to-class": "grid-rows-[1fr]",
         "leave-active-class": "transition-[grid-template-rows] overflow-hidden grid",
         "leave-from-class": "grid-rows-[1fr]",
-        "leave-to-class": "grid-rows-[0fr]"
+        "leave-to-class": "grid-rows-[0fr]",
+        onBeforeEnter: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:visible", true)),
+        onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:visible", false))
       }, {
         default: withCtx(() => [
           (openBlock(), createBlock(KeepAlive, null, [

package/dist/components/FormAsync/WFormAsyncInput.vue.js

@@ -28,6 +28,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/FormAsync/WFormAsyncSelect.vue.js

@@ -37,6 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/FormAsync/WFormAsyncSelectInfiniteSingle.vue.js

@@ -43,6 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/FormAsync/WFormAsyncSelectSingle.vue.js

@@ -38,6 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/FormAsync/WFormAsyncSelectStringified.vue.js

@@ -38,6 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/InfiniteList/components/InfiniteListPage.vue.js

@@ -207,12 +207,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: normalizeClass(_ctx.pageClass)
           }, [
             hasData.value && unref(data)?.results ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.transition ? TransitionGroup : _sfc_main$3), normalizeProps(mergeProps({ key: 0 }, _ctx.transition ? {
-              ["enter-active-class"]: "transition-[grid-template-rows] overflow-hidden grid",
-              ["enter-from-class"]: "grid-rows-[0fr]",
-              ["enter-to-class"]: "grid-rows-[1fr]",
-              ["leave-active-class"]: "transition-[grid-template-rows] overflow-hidden grid",
-              ["leave-from-class"]: "grid-rows-[1fr]",
-              ["leave-to-class"]: "grid-rows-[0fr]",
+              "enter-active-class": "transition-[grid-template-rows] overflow-hidden grid",
+              "enter-from-class": "grid-rows-[0fr]",
+              "enter-to-class": "grid-rows-[1fr]",
+              "leave-active-class": "transition-[grid-template-rows] overflow-hidden grid",
+              "leave-from-class": "grid-rows-[1fr]",
+              "leave-to-class": "grid-rows-[0fr]",
               css: !_ctx.resetting
             } : void 0)), {
               default: withCtx(() => [

package/dist/components/Input/WInput.vue.js

@@ -26,6 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: { default: "off" },
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },
@@ -54,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const input = ref();
     const isSecureVisible = ref(false);
     const updateModelValue = (value) => {
-      if (props.loading || props.disabled || props.readonly) return;
+      if (props.loading || props.disabled || props.readonly || props.unclickable) return;
       if (props.type === "number") {
         emit("update:modelValue", typeof value === "string" && value.length ? Number.parseFloat(value) : void 0);
       } else {
@@ -95,14 +96,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateModelValue(value);
     };
     const clearValue = () => {
-      if (props.disabled || props.readonly) return;
+      if (props.disabled || props.readonly || props.unclickable) return;
       if (typeof props.modelValue === "string") updateModelValue("");
       else updateModelValue(void 0);
       input.value?.focus();
       emit("click:clear");
     };
     const focus = () => {
-      if (props.disabled || props.readonly) return;
+      if (props.disabled || props.readonly || props.unclickable) return;
       input.value?.focus();
     };
     const blur = () => {
@@ -208,7 +209,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           fn: withCtx(({ id, setFocused, focused }) => [
             createElementVNode("div", {
               class: normalizeClass(["relative border border-solid rounded-xl bg-default dark:bg-default-dark transition-colors duration-75 overflow-hidden min-h-11 grid grid-cols-[auto,1fr,auto]", {
-                "focus-within:border-primary-default dark:focus-within:border-primary-dark": !_ctx.disabled && !_ctx.readonly,
+                "focus-within:border-primary-default dark:focus-within:border-primary-dark": !_ctx.disabled && !_ctx.readonly && !_ctx.unclickable,
                 "cursor-text": !_ctx.disabled,
                 "border-negative dark:border-negative-dark": _ctx.errorMessage,
                 "border-gray-300 dark:border-gray-700": !_ctx.disabled,
@@ -250,7 +251,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     type: _ctx.type ?? "text",
                     name: _ctx.name,
                     disabled: _ctx.disabled,
-                    readonly: _ctx.readonly,
+                    readonly: _ctx.readonly || _ctx.unclickable,
                     autocomplete: _ctx.autocomplete,
                     size: _ctx.size || void 0,
                     spellcheck: _ctx.spellcheck ? "true" : "false",
@@ -284,7 +285,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 loading: _ctx.loading,
                 "allow-clear": _ctx.allowClear && _ctx.modelValue !== "",
                 disabled: _ctx.disabled || _ctx.disabledActions,
-                readonly: _ctx.readonly,
+                readonly: _ctx.readonly || _ctx.unclickable,
                 "text-secure": _ctx.textSecure,
                 "is-secure-visible": isSecureVisible.value,
                 "allow-paste": _ctx.allowPaste,

package/dist/components/Input/WInputAsync.vue.js

@@ -26,6 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/Input/WInputDate.vue.js

@@ -24,6 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/Input/WInputOptions.vue.js

@@ -29,6 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/Input/WInputSuggest.vue.js

@@ -25,6 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },
@@ -111,7 +112,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               ...props,
               title: unclickable ? _ctx.mobileTitle ?? _ctx.title : _ctx.title,
-              readonly: _ctx.readonly || unclickable,
+              unclickable,
               description: void 0
             }, {
               class: {

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

@@ -14,6 +14,7 @@ export interface InputProps<Type extends InputType> extends Omit<FieldWrapperPro
     autocomplete?: 'off' | string;
     autofocus?: boolean;
     readonly?: boolean;
+    unclickable?: boolean;
     disabledActions?: boolean;
     loading?: boolean;
     spellcheck?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iCAAiC,CAAA;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,KAAK,CAAA;AAClC,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAA;AAE5D,MAAM,WAAW,UAAU,CAAC,IAAI,SAAS,SAAS,CAAE,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC;IAC/F,UAAU,CAAC,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,SAAS,CAAA;IAClE,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,IAAI,SAAS,SAAS,CAAE,SAAQ,UAAU,CAAC,IAAI,CAAC;IAC/E,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAA;CACrC;AAED,MAAM,WAAW,iBAAiB,CAAC,IAAI,SAAS,SAAS,CAAE,SAAQ,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,CAAC,CAAC;IAC5J,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,iBAAiB,CAAC,IAAI,SAAS,SAAS,EAAE,MAAM,CAAE,SAAQ,iBAAiB,CAAC,IAAI,CAAC;IAChG,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;IAChF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC,CAAA;CACnF;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;IACnF,UAAU,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iCAAiC,CAAA;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,KAAK,CAAA;AAClC,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAA;AAE5D,MAAM,WAAW,UAAU,CAAC,IAAI,SAAS,SAAS,CAAE,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC;IAC/F,UAAU,CAAC,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,SAAS,CAAA;IAClE,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,IAAI,SAAS,SAAS,CAAE,SAAQ,UAAU,CAAC,IAAI,CAAC;IAC/E,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAA;CACrC;AAED,MAAM,WAAW,iBAAiB,CAAC,IAAI,SAAS,SAAS,CAAE,SAAQ,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,CAAC,CAAC;IAC5J,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,iBAAiB,CAAC,IAAI,SAAS,SAAS,EAAE,MAAM,CAAE,SAAQ,iBAAiB,CAAC,IAAI,CAAC;IAChG,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;IAChF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC,CAAA;CACnF;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;IACnF,UAAU,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;CACf"}

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

@@ -1,19 +1,23 @@
-import { BulkComponent, ListField, MenuComponent } from './types';
+import { BulkComponent, FieldComponent, ListField, MenuComponent } from './types';
 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:header-padding"?: ((value: number) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:header-padding"> & {
         count?: number;
         fields: ListField<Data, QueryParams>[];
+        expansion?: FieldComponent<Data>;
         useQueryFn: UseQueryPaginated<Data, QueryParams>;
         queryParams: QueryParams;
         bulkDisableMessage?: string;
         selectionTitle: string;
         bulk?: BulkComponent<QueryParams>[];
+        bulkMore?: BulkComponent<QueryParams>[];
         menu: MenuComponent<Data>[];
         readonlyGetter?: (item: Data) => boolean;
         cardClass?: string;
         selectAllTextGetter: (isUnselect: boolean, count: number) => string;
+        hasBorder?: boolean;
+        moreBottom?: boolean;
     }> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

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

@@ -1 +1 @@
-{"version":3,"file":"WList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WList.vue"],"names":[],"mappings":"AA4MA,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAE,aAAa,EAAC,MAAM,SAAS,CAAA;yBAOnD,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;WAkaxD,mBAAmB,CAAC;;;gBA1ZpB,MAAM;gBACN,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE;oBAC1B,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC;qBACnC,WAAW;6BACH,MAAM;wBACX,MAAM;eACf,aAAa,CAAC,WAAW,CAAC,EAAE;cAC7B,aAAa,CAAC,IAAI,CAAC,EAAE;yBACV,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO;oBAC5B,MAAM;6BACG,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;KAgZkB,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;cA7YP,uBAAuB,SAAS,MAAM,KAAG,IAAI;;;;YAkZP,OAAO,CAAC,OAAO,WAAW,CAAC;;AA5avE,wBA4a4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"WList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/List/WList.vue"],"names":[],"mappings":"AAmQA,OAAO,KAAK,EAAC,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAC,MAAM,SAAS,CAAA;yBAOnE,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;WA2hBxD,mBAAmB,CAAC;;;gBAnhBpB,MAAM;gBACN,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE;oBAC1B,cAAc,CAAC,IAAI,CAAC;oBACpB,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC;qBACnC,WAAW;6BACH,MAAM;wBACX,MAAM;eACf,aAAa,CAAC,WAAW,CAAC,EAAE;mBACxB,aAAa,CAAC,WAAW,CAAC,EAAE;cACjC,aAAa,CAAC,IAAI,CAAC,EAAE;yBACV,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO;oBAC5B,MAAM;6BACG,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;oBACvD,OAAO;qBACN,OAAO;KAqgBiE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;cAlgBP,uBAAuB,SAAS,MAAM,KAAG,IAAI;;;;YAugBP,OAAO,CAAC,OAAO,WAAW,CAAC;;AAriBvE,wBAqiB4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, resolveDynamicComponent, normalizeClass, createCommentVNode, createVNode } from 'vue';
+import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createSlots, createElementBlock, Fragment, renderList, resolveDynamicComponent, normalizeClass, createCommentVNode, createVNode } from 'vue';
 import _sfc_main$1 from '../InfiniteList/WInfiniteList.vue.js';
 import { getIsMobile } from '../../utils/mobile.js';
 import { useSelected, getPosition } from '../../utils/useSelected.js';
@@ -14,15 +14,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     count: {},
     fields: {},
+    expansion: {},
     useQueryFn: {},
     queryParams: {},
     bulkDisableMessage: {},
     selectionTitle: {},
     bulk: {},
+    bulkMore: {},
     menu: {},
     readonlyGetter: { type: Function },
     cardClass: {},
-    selectAllTextGetter: { type: Function }
+    selectAllTextGetter: { type: Function },
+    hasBorder: { type: Boolean },
+    moreBottom: { type: Boolean }
   },
   emits: ["update:header-padding"],
   setup(__props) {
@@ -78,8 +82,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "skeleton-length": _ctx.count ?? listCount.value,
         "header-margin": unref(isMobile) ? 0 : 24,
         "hide-page-title": "",
-        transition: "",
-        "page-class": "grid sm:gap-4",
         "allow-select": allowSelect.value,
         "allow-select-range": "",
         selected: unref(selected),
@@ -90,16 +92,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onSelect: unref(setSelected),
         onSelectReverse: unref(setSelectedReverse),
         onSelectRange: unref(setSelectedRange),
-        "onUpdate:headerPadding": _cache[3] || (_cache[3] = ($event) => _ctx.$emit("update:header-padding", $event)),
-        "onUpdate:count": _cache[4] || (_cache[4] = ($event) => listCount.value = $event)
+        "onUpdate:headerPadding": _cache[4] || (_cache[4] = ($event) => _ctx.$emit("update:header-padding", $event)),
+        "onUpdate:count": _cache[5] || (_cache[5] = ($event) => listCount.value = $event)
       }, {
         header: withCtx(({ selectAllValue }) => [
           allowSelect.value ? (openBlock(), createBlock(_sfc_main$2, {
             key: 0,
             title: _ctx.selectionTitle,
             "disable-message": _ctx.bulkDisableMessage,
-            "onUpdate:selectionCount": _cache[1] || (_cache[1] = ($event) => selectionCount.value = $event)
-          }, {
+            "onUpdate:selectionCount": _cache[2] || (_cache[2] = ($event) => selectionCount.value = $event)
+          }, createSlots({
             default: withCtx(({ disableMessage, cssClass }) => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.bulk, (item, index) => {
                 return openBlock(), createBlock(resolveDynamicComponent(item), {
@@ -112,8 +114,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 40, ["selection-count", "disable-message", "class"]);
               }), 128))
             ]),
-            _: 1
-          }, 8, ["title", "disable-message"])) : createCommentVNode("", true),
+            _: 2
+          }, [
+            _ctx.bulkMore ? {
+              name: "more",
+              fn: withCtx((scope) => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.bulkMore, (item, index) => {
+                  return openBlock(), createBlock(resolveDynamicComponent(item), {
+                    key: index,
+                    "selection-count": selectionCount.value,
+                    "query-params-getter": getQueryParamsBulk,
+                    "disable-message": scope?.disableMessage,
+                    class: normalizeClass(scope?.cssClass),
+                    "onClear:selected": _cache[1] || (_cache[1] = ($event) => unref(setSelected)([]))
+                  }, null, 40, ["selection-count", "disable-message", "class"]);
+                }), 128))
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["title", "disable-message"])) : createCommentVNode("", true),
           !unref(isMobile) ? (openBlock(), createBlock(_sfc_main$3, {
             key: 1,
             class: "sm-not:hidden",
@@ -122,18 +141,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "tooltip-text": _ctx.selectAllTextGetter(selectAllValue !== true, _ctx.count ?? listCount.value),
             count: _ctx.count ?? listCount.value,
             selection: selectAllValue,
-            "onToggle:selection": _cache[2] || (_cache[2] = ($event) => $event ? unref(setSelectedReverse)([]) : unref(setSelected)([]))
+            "onToggle:selection": _cache[3] || (_cache[3] = ($event) => $event ? unref(setSelectedReverse)([]) : unref(setSelected)([]))
           }, {
             default: withCtx(() => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fields, (field, index) => {
-                return openBlock(), createBlock(_sfc_main$4, {
-                  key: index,
-                  title: typeof field.title === "string" ? field.title : field.title(_ctx.queryParams),
-                  field: field.field,
-                  class: normalizeClass([field.cssClass, index === _ctx.fields.length - 1 ? "z-[1]" : void 0]),
-                  ordering: ordering.value,
-                  disabled: !field.field
-                }, null, 8, ["title", "field", "class", "ordering", "disabled"]);
+                return openBlock(), createElementBlock(Fragment, { key: index }, [
+                  field.visibleGetter?.(_ctx.queryParams) ?? true ? (openBlock(), createBlock(_sfc_main$4, {
+                    key: 0,
+                    title: typeof field.title === "string" ? field.title : field.title(_ctx.queryParams),
+                    field: typeof field.field === "string" ? field.field : field.field?.(_ctx.queryParams),
+                    class: normalizeClass([field.cssClass, index === _ctx.fields.length - 1 ? "z-[1]" : void 0]),
+                    ordering: ordering.value,
+                    disabled: !field.field
+                  }, null, 8, ["title", "field", "class", "ordering", "disabled"])) : createCommentVNode("", true)
+                ], 64);
               }), 128))
             ]),
             _: 2
@@ -143,8 +164,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$5, {
             disabled: skeleton,
             mobile: unref(isMobile),
-            class: normalizeClass(_ctx.cardClass)
-          }, {
+            "card-class": _ctx.cardClass,
+            "has-border": _ctx.hasBorder,
+            "more-bottom": _ctx.moreBottom,
+            "allow-open": _ctx.fields.some((item2) => item2.allowOpen) && !skeleton
+          }, createSlots({
+            default: withCtx(({ toggle, isOpen }) => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fields, (field, index) => {
+                return openBlock(), createElementBlock(Fragment, { key: index }, [
+                  field.visibleGetter?.(_ctx.queryParams) ?? true ? (openBlock(), createBlock(resolveDynamicComponent(field.component), {
+                    key: 0,
+                    item,
+                    readonly: _ctx.readonlyGetter?.(item),
+                    skeleton,
+                    mobile: unref(isMobile),
+                    class: normalizeClass({
+                      [field.cssClass ?? ""]: true,
+                      "cursor-pointer w-ripple w-ripple-hover w-ripple-has w-ripple-opacity-[0.04]": field.allowOpen && !skeleton,
+                      "sm:border-y border-gray-300 dark:border-gray-700": _ctx.hasBorder,
+                      "sm:border-b-[transparent] sm:dark:border-b-[transparent]": _ctx.hasBorder && isOpen
+                    }),
+                    "onUpdate:item": setter,
+                    "onDelete:item": ($event) => {
+                      setter();
+                      refetch();
+                    },
+                    onClick: ($event) => field.allowOpen && !skeleton && toggle()
+                  }, null, 40, ["item", "readonly", "skeleton", "mobile", "class", "onUpdate:item", "onDelete:item", "onClick"])) : createCommentVNode("", true)
+                ], 64);
+              }), 128))
+            ]),
             more: withCtx(() => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menu, (menuItem, menuIndex) => {
                 return openBlock(), createBlock(resolveDynamicComponent(menuItem), {
@@ -159,24 +208,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 40, ["item", "readonly", "onUpdate:item", "onDelete:item"]);
               }), 128))
             ]),
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fields, (field, index) => {
-                return openBlock(), createBlock(resolveDynamicComponent(field.component), {
-                  key: index,
+            _: 2
+          }, [
+            _ctx.expansion ? {
+              name: "expansion",
+              fn: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(_ctx.expansion), {
                   item,
                   readonly: _ctx.readonlyGetter?.(item),
-                  class: normalizeClass(field.cssClass),
                   skeleton,
+                  mobile: unref(isMobile),
                   "onUpdate:item": setter,
                   "onDelete:item": ($event) => {
                     setter();
                     refetch();
                   }
-                }, null, 40, ["item", "readonly", "class", "skeleton", "onUpdate:item", "onDelete:item"]);
-              }), 128))
-            ]),
-            _: 2
-          }, 1032, ["disabled", "mobile", "class"])
+                }, null, 40, ["item", "readonly", "skeleton", "mobile", "onUpdate:item", "onDelete:item"]))
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["disabled", "mobile", "card-class", "has-border", "more-bottom", "allow-open"])
         ]),
         _: 1
       }, 8, ["use-query-fn", "query-params", "skeleton-length", "header-margin", "allow-select", "selected", "reverse", "selected-range", "count", "onSelect", "onSelectReverse", "onSelectRange"]);

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

@@ -1,9 +1,11 @@
 declare function __VLS_template(): {
     slots: {
         default?(_: {
-            toggle: ((value: boolean) => void) | undefined;
+            toggle: () => void;
+            isOpen: boolean;
         }): any;
         more?(_: {}): any;
+        expansion?(_: {}): any;
     };
     refs: {};
     attrs: Partial<{}>;
@@ -15,6 +17,9 @@ declare const __VLS_component: import('vue').DefineComponent<{
     mobile?: boolean;
     moreBottom?: boolean;
     alignTop?: boolean;
+    hasBorder?: boolean;
+    cardClass?: string;
+    allowOpen?: boolean;
 }, {
     updateSelected: ((value: boolean) => void) | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -26,6 +31,9 @@ declare const __VLS_component: import('vue').DefineComponent<{
     mobile?: boolean;
     moreBottom?: boolean;
     alignTop?: boolean;
+    hasBorder?: boolean;
+    cardClass?: string;
+    allowOpen?: boolean;
 }> & Readonly<{
     "onUpdate:selected"?: ((value: boolean) => any) | undefined;
     "onUpdate:selected-hover"?: ((value: boolean) => any) | undefined;

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":"AA0LA,iBAAS,cAAc;;;;YA0LO,GAAG;sBACN,GAAG;;;WAShB,OAAO,IAA6B;EAEjD;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;eAzRR,OAAO;eACP,OAAO;aACT,OAAO;iBACH,OAAO;eACT,OAAO;;;;;;;eAJP,OAAO;eACP,OAAO;aACT,OAAO;iBACH,OAAO;eACT,OAAO;;;;kFAgSlB,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":"AAqQA,iBAAS,cAAc;;;;;YAuSO,GAAG;sBACN,GAAG;2BACE,GAAG;;;WASrB,OAAO,IAA6B;EAEjD;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;eAlZR,OAAO;eACP,OAAO;aACT,OAAO;iBACH,OAAO;eACT,OAAO;gBACN,OAAO;gBACP,MAAM;gBACN,OAAO;;;;;;;eAPR,OAAO;eACP,OAAO;aACT,OAAO;iBACH,OAAO;eACT,OAAO;gBACN,OAAO;gBACP,MAAM;gBACN,OAAO;;;;kFAsZnB,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,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.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":"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;WAwJxD,mBAAmB,CAAC;gBApJpB,MAAM;eACP,KAAK;kBACF,SAAS,CAAC,KAAK,CAAC,EAAE;mBACjB,OAAO;KAiJmE,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBA1BgB,GAAG;;UA4BvB,EAAE;;;;YAGiC,OAAO,CAAC,OAAO,WAAW,CAAC;;AAlKvE,wBAkK4E;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

@@ -45,7 +45,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     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", {
+        class: normalizeClass(["pr-6 flex gap-2 select-none items-center text-description font-semibold", {
           "cursor-pointer": !_ctx.disabled
         }]),
         onClick: setOrdering

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

@@ -3,12 +3,15 @@ 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;
 };
 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;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"}

package/dist/components/Select/WSelect.vue.js

@@ -38,6 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/Select/WSelectAsync.vue.js

@@ -36,6 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/Select/WSelectAsyncSingle.vue.js

@@ -34,6 +34,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/Select/WSelectSingle.vue.js

@@ -29,6 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/dist/components/Select/WSelectStringified.vue.js

@@ -29,6 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autocomplete: {},
     autofocus: { type: Boolean },
     readonly: { type: Boolean },
+    unclickable: { type: Boolean },
     disabledActions: { type: Boolean },
     loading: { type: Boolean },
     spellcheck: { type: Boolean },

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.8.18",
+  "version": "0.8.19",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",

package/tailwind-base/plugins/default.cjs

@@ -91,6 +91,27 @@ module.exports = plugin(function ({matchUtilities, addVariant, addUtilities, add
     },
   )
 
+  addUtilities({
+    '.max-w-inner': {
+      'max-width': 'calc(100vw - var(--actions-bar-width) - var(--nav-bar-width) - var(--inner-margin) - var(--inner-margin) - var(--scroll-bar-width))',
+    },
+    '.max-w-inner-no-actions': {
+      'max-width': 'calc(100vw - var(--nav-bar-width) - var(--inner-margin) - var(--inner-margin) - var(--scroll-bar-width))',
+    },
+    '.w-inner': {
+      'width': 'calc(100vw - var(--actions-bar-width) - var(--nav-bar-width) - var(--inner-margin) - var(--inner-margin) - var(--scroll-bar-width))',
+    },
+    '.min-w-inner': {
+      'min-width': 'calc(100vw - var(--actions-bar-width) - var(--nav-bar-width) - var(--inner-margin) - var(--inner-margin) - var(--scroll-bar-width))',
+    },
+    '.left-inner': {
+      'left': 'calc(var(--nav-bar-width) + var(--inner-margin))',
+    },
+    '.right-inner': {
+      'right': 'calc(var(--actions-bar-width) + var(--inner-margin))',
+    },
+  })
+
   addVariant('supports-backdrop', '@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))')
   addVariant('supports-overlay', '@supports (overflow: overlay)')
   addVariant('supports-overlay-not', '@supports (not (overflow: overlay))')
@@ -266,7 +287,7 @@ module.exports = plugin(function ({matchUtilities, addVariant, addUtilities, add
 
   addUtilities({
     '.w-ripple': {
-      '&::before': {
+      '&::before, &-has-only::before': {
         'content': '""',
         'position': 'absolute',
         'top': '0',
@@ -294,11 +315,23 @@ module.exports = plugin(function ({matchUtilities, addVariant, addUtilities, add
       },
     },
 
+    '.w-ripple-trigger-has:has(.w-ripple-has:active)': {
+      '.w-ripple-has-only::before, &.w-ripple-has-only::before': {
+        'opacity': 'calc(var(--w-ripple-opacity, 0.10) * 2)',
+      },
+    },
+
     '.w-ripple-hover:not(:active):hover, .w-ripple-trigger:not(:active):hover .w-ripple-hover, .w-ripple-hover:not(:active):focus, .w-ripple-trigger:not(:active):focus .w-ripple-hover': {
       '& .w-ripple:not(:active)::before, &.w-ripple::before': {
         'opacity': 'var(--w-ripple-opacity, 0.10)',
       },
     },
+
+    '.w-ripple-trigger-has:has(.w-ripple-has:not(:active):hover) .w-ripple-hover, .w-ripple-trigger-has:has(.w-ripple-has:not(:active):focus) .w-ripple-hover': {
+      '& .w-ripple-has-only:not(:active)::before, &.w-ripple-has-only::before': {
+        'opacity': 'var(--w-ripple-opacity, 0.10)',
+      },
+    },
   })
 
   addUtilities({
@@ -386,39 +419,6 @@ module.exports = plugin(function ({matchUtilities, addVariant, addUtilities, add
       'padding-right': '0.75rem',
     },
 
-    '.w-list-row-item, .w-list-header-item': {
-      'padding-right': '1.5rem',
-      '&:first-child, &.first-item': {
-        'padding-left': '1rem',
-      },
-      '&:last-child': {
-        'padding-right': '1rem',
-      },
-    },
-
-    '.w-list-header-item': {
-      'height': '3rem',
-      'border-top-width': '1px',
-      'border-bottom-width': '1px',
-      'border-style': 'solid',
-      'background-color': theme('colors.primary.light'),
-      'border-color': theme('colors.gray.300'),
-      '.dark &': {
-        'background-color': theme('colors.primary.darkest'),
-        'border-color': theme('colors.gray.700'),
-      },
-      '&:first-child': {
-        'border-left-width': '1px',
-        'border-top-left-radius': '1rem',
-        'border-bottom-left-radius': '1rem',
-      },
-      '&:last-child': {
-        'border-right-width': '1px',
-        'border-top-right-radius': '1rem',
-        'border-bottom-right-radius': '1rem',
-      },
-    },
-
     '.w-skeleton': {
       'position': 'relative',
       'width': 'var(--skeleton-width,70%)',