eco-vue-js 0.10.71 → 0.10.73

package/dist/assets/icons/sax/IconLock.svg.js

@@ -0,0 +1,31 @@
+import { createElementBlock, openBlock, createElementVNode } from 'vue';
+
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+
+function render(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      stroke: "currentcolor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.5",
+      d: "M6 10V8c0-3.31 1-6 6-6s6 2.69 6 6v2m-6 8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
+    }, null, -1),
+    createElementVNode("path", {
+      stroke: "currentcolor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.5",
+      d: "M17 22H7c-4 0-5-1-5-5v-2c0-4 1-5 5-5h10c4 0 5 1 5 5v2c0 4-1 5-5 5"
+    }, null, -1)
+  ])))
+}
+const IconLock = { render: render };
+
+export { IconLock as default, render };

package/dist/assets/icons/sax/IconLockOff.svg.js

@@ -0,0 +1,31 @@
+import { createElementBlock, openBlock, createElementVNode } from 'vue';
+
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+
+function render(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      stroke: "currentcolor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.5",
+      d: "M17 22H7c-4 0-5-1-5-5v-2c0-4 1-5 5-5h10c4 0 5 1 5 5v2c0 4-1 5-5 5M6 10V8c0-3.31 1-6 6-6 2.74 0 4.37.74 5.22 2"
+    }, null, -1),
+    createElementVNode("path", {
+      stroke: "currentcolor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "1.5",
+      d: "M12 18.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
+    }, null, -1)
+  ])))
+}
+const IconLockOff = { render: render };
+
+export { IconLockOff as default, render };

package/dist/assets/icons/sax/IconNegativeInfo.svg.js

@@ -4,7 +4,8 @@ const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "20",
   height: "20",
-  fill: "none"
+  fill: "none",
+  viewBox: "0 0 24 24"
 };
 
 function render(_ctx, _cache) {
@@ -13,8 +14,8 @@ function render(_ctx, _cache) {
       stroke: "currentcolor",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      "stroke-width": "1.25",
-      d: "M10 6.67v4.16m0 7.5A8.36 8.36 0 0 0 18.33 10 8.36 8.36 0 0 0 10 1.67 8.36 8.36 0 0 0 1.67 10 8.36 8.36 0 0 0 10 18.33M10 14v.05"
+      "stroke-width": "1.5",
+      d: "M12 8v5m0 3.8v.06M12 22a10.03 10.03 0 0 0 10-10A10.03 10.03 0 0 0 12 2 10.03 10.03 0 0 0 2 12a10.03 10.03 0 0 0 10 10"
     }, null, -1)
   ])))
 }

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":"AA+RA;AAocA,OAAO,KAAK,EAAC,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAC,MAAM,SAAS,CAAA;AAC5J,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AAczC,OAAO,EAAuB,QAAQ,EAAC,MAAM,eAAe,CAAA;yBAW3C,IAAI,SAAS,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,SAAS,SAAS,OAAO,EAAE,EAC3I,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAs0BO,mBAAmB,CAAC;;;;;;;;;gBAl0BlB,MAAM;gBACN,MAAM;oBACF,cAAc,CAAC,IAAI,CAAC;oBACpB,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC;qBACnC,WAAW;uBACT,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC;6BACxC,MAAM;wBACX,MAAM;eACf,aAAa,CAAC,WAAW,CAAC,EAAE;mBACxB,aAAa,CAAC,WAAW,CAAC,EAAE;iBAC9B,eAAe,CAAC,WAAW,CAAC,EAAE;eAChC,aAAa,CAAC,IAAI,CAAC,EAAE;yBACX,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO;oBAC5B,MAAM;2BACC,MAAM;6BACJ,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;oBACvD,OAAO;mBACR,MAAM;0BACC,cAAc,CAAC,MAAM,CAAC;sBAC1B,QAAQ;mBACX,OAAO;sBACJ,OAAO;mBACV,OAAO;qBACL,OAAO;yBACH,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,SAAS;kBACzC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;qBAC1B,WAAW;mBACb,SAAS,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;iBAC1C,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS;oBACxC,OAAO;2BACA,OAAO;oBACd,OAAO;mBAmyByE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;YAvEiB,GAAG;2BACC,GAAG;;;;;YACP,GAAG;uBACF,GAAG;;;YA5tB1B,cAAc,SAAS,QAAQ,GAAG,IAAI;YACtC,cAAc,SAAS,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;YACpD,qBAAqB,SAAS,WAAW,GAAG,IAAI;YAChD,cAAc,SAAS,MAAM,GAAG,SAAS,GAAG,IAAI;;EAiyBlD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAj1BzE,wBAi1B4E;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":"AAoTA;AAqeA,OAAO,KAAK,EAAC,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAC,MAAM,SAAS,CAAA;AAC5J,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AAczC,OAAO,EAAuB,QAAQ,EAAC,MAAM,eAAe,CAAA;yBAW3C,IAAI,SAAS,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,SAAS,SAAS,OAAO,EAAE,EAC3I,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAq4BO,mBAAmB,CAAC;;;;;;;;;gBAj4BlB,MAAM;gBACN,MAAM;oBACF,cAAc,CAAC,IAAI,CAAC;oBACpB,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC;qBACnC,WAAW;uBACT,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC;6BACxC,MAAM;wBACX,MAAM;eACf,aAAa,CAAC,WAAW,CAAC,EAAE;mBACxB,aAAa,CAAC,WAAW,CAAC,EAAE;iBAC9B,eAAe,CAAC,WAAW,CAAC,EAAE;eAChC,aAAa,CAAC,IAAI,CAAC,EAAE;yBACX,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO;oBAC5B,MAAM;2BACC,MAAM;6BACJ,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;oBACvD,OAAO;mBACR,MAAM;0BACC,cAAc,CAAC,MAAM,CAAC;sBAC1B,QAAQ;mBACX,OAAO;sBACJ,OAAO;mBACV,OAAO;qBACL,OAAO;yBACH,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,SAAS;kBACzC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;qBAC1B,WAAW;mBACb,SAAS,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;iBAC1C,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS;oBACxC,OAAO;2BACA,OAAO;oBACd,OAAO;mBAk2ByE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;YA3EiB,GAAG;2BACC,GAAG;;;;;YACP,GAAG;uBACF,GAAG;;;YAvxB1B,cAAc,SAAS,QAAQ,GAAG,IAAI;YACtC,cAAc,SAAS,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;YACpD,qBAAqB,SAAS,WAAW,GAAG,IAAI;YAChD,cAAc,SAAS,MAAM,GAAG,SAAS,GAAG,IAAI;;EAg2BlD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAh5BzE,wBAg5B4E;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, toRef, watch, createElementBlock, openBlock, normalizeClass, unref, createVNode, normalizeStyle, createSlots, withCtx, renderSlot, createCommentVNode, createBlock, resolveDynamicComponent, Fragment, renderList, mergeProps, markRaw, isRef } from 'vue';
+import { defineComponent, ref, computed, toRef, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createVNode, createSlots, withCtx, renderSlot, createCommentVNode, createBlock, resolveDynamicComponent, Fragment, renderList, mergeProps, markRaw, isRef, nextTick } from 'vue';
 import _sfc_main$4 from '../Button/WButtonSelection.vue.js';
 import _sfc_main$5 from '../Button/WButtonSelectionAction.vue.js';
 import _sfc_main$1 from '../InfiniteList/WInfiniteList.vue.js';
@@ -15,7 +15,7 @@ import _sfc_main$9 from './components/HeaderFieldNested.vue.js';
 import _sfc_main$7 from './components/HeaderSettings.vue.js';
 import _sfc_main$6 from './components/HeaderSort.vue.js';
 import _sfc_main$3 from './components/ListCardFieldNested.vue.js';
-import { filterFields, useListConfig } from './use/useListConfig.js';
+import { filterFields, useListConfig, getFieldVariable, getFieldStylesWidth, getFieldStylesFixed, sortFields } from './use/useListConfig.js';
 
 const _hoisted_1 = {
   key: 1,
@@ -105,6 +105,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return [];
     });
+    const stylesWidth = ref({});
+    const stylesFixed = ref({});
     const updateOrdering = (value) => {
       const ordering2 = encodeOrdering(value);
       if (props.queryParams instanceof Object && "ordering" in props.queryParams && ordering2 === props.queryParams.ordering) return;
@@ -118,22 +120,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
       return props.queryParams;
     };
-    const getFieldStyles = (label, nested) => {
-      if (isGrid.value) return nested ? void 0 : { gridArea: label };
-      if (!fieldConfigMap.value[label]?.width) return void 0;
-      const value = fieldConfigMap.value[label].width + "px";
-      return {
-        minWidth: value,
-        maxWidth: value
-      };
+    const updateStylesWidth = async () => {
+      await nextTick();
+      stylesWidth.value = getFieldStylesWidth(fieldsFiltered.value, fieldConfigMap.value);
     };
+    const updateStylesFixed = async () => {
+      await nextTick();
+      stylesFixed.value = getFieldStylesFixed(sortFields(fieldsFiltered.value, fieldConfigMap.value), fieldConfigMap.value);
+    };
+    const unwatch = watch(fieldsFiltered, async () => {
+      await Promise.all([
+        updateStylesWidth(),
+        updateStylesFixed()
+      ]);
+      if (Object.keys(stylesWidth.value).length !== 0 || Object.keys(stylesFixed.value).length !== 0) unwatch.stop();
+    }, { immediate: true });
     watch(countValue, (value) => emit("update:count", value), { immediate: true });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass({
           "w-card": unref(isGrid),
-          "w-list": !unref(isGrid)
-        })
+          "w-list": !unref(isGrid),
+          "[--w-list-right:calc(var(--w-list-padding,1rem)*2+1.25em)]": _ctx.menu,
+          "[--w-list-right:--w-list-header-rounded,1rem]": !_ctx.menu,
+          "[--w-list-left:calc(var(--w-list-padding,1rem)*2+1.25em+1px)]": allowSelect.value,
+          "[--w-list-left:--w-list-header-rounded,1rem]": !allowSelect.value
+        }),
+        style: normalizeStyle([stylesWidth.value, stylesFixed.value])
       }, [
         createVNode(_sfc_main$1, {
           "use-query-fn": _ctx.useQueryFn,
@@ -146,8 +159,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "page-class": unref(isGrid) ? "grid grid-cols-[repeat(auto-fill,minmax(var(--w-list-card-width,16rem),1fr))] gap-[--w-list-gap,0]" : "grid grid-cols-1 gap-[--w-list-gap,0]",
           style: normalizeStyle(cardStyles.value),
           class: normalizeClass(_ctx.$attrs.class),
-          "onUpdate:count": _cache[2] || (_cache[2] = ($event) => listCount.value = $event),
-          "onUpdate:error": _cache[3] || (_cache[3] = ($event) => _ctx.$emit("update:error", $event))
+          "onUpdate:count": _cache[4] || (_cache[4] = ($event) => listCount.value = $event),
+          "onUpdate:error": _cache[5] || (_cache[5] = ($event) => _ctx.$emit("update:error", $event))
         }, createSlots({
           header: withCtx(({ updateHeaderHeight, isRefetchingAll, refetchAll }) => [
             renderSlot(_ctx.$slots, "header", { count: listCount.value }),
@@ -178,15 +191,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   !_ctx.noHeaderSettings ? (openBlock(), createBlock(_sfc_main$7, {
                     key: 2,
                     "field-config-map": unref(fieldConfigMap),
-                    "onUpdate:fieldConfigMap": _cache[0] || (_cache[0] = ($event) => isRef(fieldConfigMap) ? fieldConfigMap.value = $event : null),
+                    "onUpdate:fieldConfigMap": [
+                      _cache[0] || (_cache[0] = ($event) => isRef(fieldConfigMap) ? fieldConfigMap.value = $event : null),
+                      _cache[2] || (_cache[2] = ($event) => {
+                        updateStylesWidth();
+                        updateStylesFixed();
+                      })
+                    ],
                     mode: unref(listConfig).mode,
                     fields: fieldsVisible.value,
                     "query-params": _ctx.queryParams,
                     "has-saved": unref(hasSaved),
                     mobile: unref(isMobile),
-                    "onClick:reset": unref(reset),
+                    "onClick:reset": _cache[1] || (_cache[1] = ($event) => {
+                      unref(reset)();
+                      updateStylesWidth();
+                      updateStylesFixed();
+                    }),
                     "onUpdate:mode": unref(updateMode)
-                  }, null, 8, ["field-config-map", "mode", "fields", "query-params", "has-saved", "mobile", "onClick:reset", "onUpdate:mode"])) : createCommentVNode("", true)
+                  }, null, 8, ["field-config-map", "mode", "fields", "query-params", "has-saved", "mobile", "onUpdate:mode"])) : createCommentVNode("", true)
                 ]))
               ]),
               _: 2
@@ -241,7 +264,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "hide-more": !_ctx.menu,
               count: _ctx.count ?? listCount.value,
               selection: unref(selectAllValue),
-              "onToggle:selection": _cache[1] || (_cache[1] = ($event) => $event ? unref(selectAll)() : unref(resetSelection)()),
+              "onToggle:selection": _cache[3] || (_cache[3] = ($event) => $event ? unref(selectAll)() : unref(resetSelection)()),
               "onUpdate:header": updateHeaderHeight
             }, {
               default: withCtx(() => [
@@ -249,20 +272,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   fields: fieldsFiltered.value,
                   "field-config-map": unref(fieldConfigMap)
                 }, {
-                  default: withCtx(({ field, nested }) => [
+                  default: withCtx(({ field }) => [
                     createVNode(_sfc_main$a, {
                       title: typeof field.meta.title === "string" ? field.meta.title : field.meta.title(_ctx.queryParams),
                       field: typeof field.meta.field === "string" ? field.meta.field : field.meta.field?.(_ctx.queryParams),
-                      class: normalizeClass(field.meta.cssClass),
                       ordering: ordering.value,
                       disabled: _ctx.noOrdering || !field.meta.field,
                       "allow-resize": field.meta.allowResize,
                       "item-class": field.meta.cssClassHeader,
-                      "width-style": getFieldStyles(field.meta.label, nested),
-                      "onUpdate:width": ($event) => unref(fieldConfigMap)[field.meta.label].width = $event,
+                      "style-value": unref(isGrid) ? { gridArea: field.meta.label } : {
+                        minWidth: field.meta.allowResize ? `var(${unref(getFieldVariable)("width", field.meta.label)})` : void 0,
+                        maxWidth: field.meta.allowResize ? `var(${unref(getFieldVariable)("width", field.meta.label)})` : void 0,
+                        left: unref(fieldConfigMap)[field.meta.label]?.fixed ? `var(${unref(getFieldVariable)("left", field.meta.label)})` : void 0,
+                        right: unref(fieldConfigMap)[field.meta.label]?.fixed ? `var(${unref(getFieldVariable)("right", field.meta.label)})` : void 0
+                      },
+                      "has-width": stylesWidth.value[unref(getFieldVariable)("width", field.meta.label)] !== void 0,
+                      class: normalizeClass({
+                        [field.meta.cssClass ?? ""]: true,
+                        "sticky z-[1] bg-[inherit]": !unref(isGrid) && unref(fieldConfigMap)[field.meta.label]?.fixed
+                      }),
+                      "onUpdate:width": ($event) => {
+                        unref(fieldConfigMap)[field.meta.label].width = $event;
+                        updateStylesWidth();
+                      },
                       "onSave:width": unref(save),
                       "onUpdate:ordering": updateOrdering
-                    }, null, 8, ["title", "field", "class", "ordering", "disabled", "allow-resize", "item-class", "width-style", "onUpdate:width", "onSave:width"])
+                    }, null, 8, ["title", "field", "ordering", "disabled", "allow-resize", "item-class", "style-value", "has-width", "class", "onUpdate:width", "onSave:width"])
                   ]),
                   _: 1
                 }, 8, ["fields", "field-config-map"])
@@ -298,7 +333,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "onHover:selected": ($event) => unref(hoverSelected)(position),
               "onClick:action": ($event) => _ctx.$emit("click:action", { item, setter })
             }, createSlots({
-              default: withCtx(({ validate }) => [
+              default: withCtx(({ validate, beforeClass }) => [
                 createVNode(_sfc_main$3, {
                   fields: fieldsFiltered.value,
                   "field-config-map": unref(fieldConfigMap),
@@ -317,9 +352,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         [defaultScope.field.meta.cssClass ?? ""]: true,
                         "items-center": !_ctx.alignTop,
                         "items-start": _ctx.alignTop,
-                        "pr-6": !unref(isGrid)
+                        "bg-default dark:bg-default-dark sticky z-[1]": !unref(isGrid) && unref(fieldConfigMap)[defaultScope.field.meta.label]?.fixed,
+                        ...!unref(isGrid) && unref(fieldConfigMap)[defaultScope.field.meta.label]?.fixed ? beforeClass : {}
+                      }),
+                      style: normalizeStyle(unref(isGrid) ? !defaultScope.nested ? { gridArea: defaultScope.field.meta.label } : void 0 : {
+                        minWidth: `var(${unref(getFieldVariable)("width", defaultScope.field.meta.label)})`,
+                        maxWidth: `var(${unref(getFieldVariable)("width", defaultScope.field.meta.label)})`,
+                        left: unref(fieldConfigMap)[defaultScope.field.meta.label]?.fixed ? `var(${unref(getFieldVariable)("left", defaultScope.field.meta.label)})` : void 0,
+                        right: unref(fieldConfigMap)[defaultScope.field.meta.label]?.fixed ? `var(${unref(getFieldVariable)("right", defaultScope.field.meta.label)})` : void 0
                       }),
-                      style: normalizeStyle(getFieldStyles(defaultScope.field.meta.label, defaultScope.nested)),
                       "onUpdate:item": setter,
                       "onDelete:item": ($event) => {
                         setter();
@@ -387,7 +428,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: "0"
           } : void 0
         ]), 1032, ["use-query-fn", "query-params", "query-options", "skeleton-length", "page-length", "count", "page-class", "style", "class"])
-      ], 2);
+      ], 6);
     };
   }
 });

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

@@ -17,93 +17,7 @@ type __VLS_Props = {
     allowSelect: boolean;
     allowSelectHover: boolean;
 };
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            toggle: () => void;
-            isOpen: boolean;
-            validate: (silent?: boolean, path?: import('../Form/models/utils').ValidatePath) => string | undefined;
-        }): any;
-        more?(_: {}): any;
-        more?(_: {}): any;
-        expansion?(_: {}): any;
-    };
-    refs: {
-        container: HTMLDivElement;
-        form: unknown;
-        more: ({
-            $: import('vue').ComponentInternalInstance;
-            $data: {};
-            $props: {
-                readonly icon?: SVGComponent | undefined;
-                readonly disabled?: boolean | undefined;
-                readonly anchor?: import('../Dropdown/types').DropdownProps["parentElement"] | undefined;
-                readonly onClose?: (() => any) | undefined;
-            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
-            $refs: {
-                [x: string]: unknown;
-            };
-            $slots: Readonly<{
-                [name: string]: import('vue').Slot<any> | undefined;
-            }>;
-            $root: import('vue').ComponentPublicInstance | null;
-            $parent: import('vue').ComponentPublicInstance | null;
-            $host: Element | null;
-            $emit: (event: "close") => void;
-            $el: HTMLButtonElement;
-            $options: import('vue').ComponentOptionsBase<Readonly<{
-                icon?: SVGComponent;
-                disabled?: boolean;
-                anchor?: import('../Dropdown/types').DropdownProps["parentElement"];
-            }> & Readonly<{
-                onClose?: (() => any) | undefined;
-            }>, {
-                open: () => void;
-                isOpen: Readonly<import('vue').Ref<boolean, boolean>>;
-            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-                close: () => any;
-            }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-                beforeCreate?: (() => void) | (() => void)[];
-                created?: (() => void) | (() => void)[];
-                beforeMount?: (() => void) | (() => void)[];
-                mounted?: (() => void) | (() => void)[];
-                beforeUpdate?: (() => void) | (() => void)[];
-                updated?: (() => void) | (() => void)[];
-                activated?: (() => void) | (() => void)[];
-                deactivated?: (() => void) | (() => void)[];
-                beforeDestroy?: (() => void) | (() => void)[];
-                beforeUnmount?: (() => void) | (() => void)[];
-                destroyed?: (() => void) | (() => void)[];
-                unmounted?: (() => void) | (() => void)[];
-                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-            };
-            $forceUpdate: () => void;
-            $nextTick: typeof import('vue').nextTick;
-            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-        } & Readonly<{}> & Omit<Readonly<{
-            icon?: SVGComponent;
-            disabled?: boolean;
-            anchor?: import('../Dropdown/types').DropdownProps["parentElement"];
-        }> & Readonly<{
-            onClose?: (() => any) | undefined;
-        }>, "isOpen" | "open"> & import('vue').ShallowUnwrapRef<{
-            open: () => void;
-            isOpen: Readonly<import('vue').Ref<boolean, boolean>>;
-        }> & {} & import('vue').ComponentCustomProperties & {} & {
-            $slots: {
-                default?(_: {}): any;
-            };
-        }) | null;
-        anchor: HTMLDivElement;
-    };
-    rootEl: any;
-};
+declare function __VLS_template(): any;
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "toggle:selected": () => any;
@@ -113,79 +27,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     "onToggle:selected"?: (() => any) | undefined;
     "onHover:selected"?: (() => any) | undefined;
     "onClick:action"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    container: HTMLDivElement;
-    form: unknown;
-    more: ({
-        $: import('vue').ComponentInternalInstance;
-        $data: {};
-        $props: {
-            readonly icon?: SVGComponent | undefined;
-            readonly disabled?: boolean | undefined;
-            readonly anchor?: import('../Dropdown/types').DropdownProps["parentElement"] | undefined;
-            readonly onClose?: (() => any) | undefined;
-        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import('vue').Slot<any> | undefined;
-        }>;
-        $root: import('vue').ComponentPublicInstance | null;
-        $parent: import('vue').ComponentPublicInstance | null;
-        $host: Element | null;
-        $emit: (event: "close") => void;
-        $el: HTMLButtonElement;
-        $options: import('vue').ComponentOptionsBase<Readonly<{
-            icon?: SVGComponent;
-            disabled?: boolean;
-            anchor?: import('../Dropdown/types').DropdownProps["parentElement"];
-        }> & Readonly<{
-            onClose?: (() => any) | undefined;
-        }>, {
-            open: () => void;
-            isOpen: Readonly<import('vue').Ref<boolean, boolean>>;
-        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-            close: () => any;
-        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-            beforeCreate?: (() => void) | (() => void)[];
-            created?: (() => void) | (() => void)[];
-            beforeMount?: (() => void) | (() => void)[];
-            mounted?: (() => void) | (() => void)[];
-            beforeUpdate?: (() => void) | (() => void)[];
-            updated?: (() => void) | (() => void)[];
-            activated?: (() => void) | (() => void)[];
-            deactivated?: (() => void) | (() => void)[];
-            beforeDestroy?: (() => void) | (() => void)[];
-            beforeUnmount?: (() => void) | (() => void)[];
-            destroyed?: (() => void) | (() => void)[];
-            unmounted?: (() => void) | (() => void)[];
-            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import('vue').nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{
-        icon?: SVGComponent;
-        disabled?: boolean;
-        anchor?: import('../Dropdown/types').DropdownProps["parentElement"];
-    }> & Readonly<{
-        onClose?: (() => any) | undefined;
-    }>, "isOpen" | "open"> & import('vue').ShallowUnwrapRef<{
-        open: () => void;
-        isOpen: Readonly<import('vue').Ref<boolean, boolean>>;
-    }> & {} & import('vue').ComponentCustomProperties & {} & {
-        $slots: {
-            default?(_: {}): any;
-        };
-    }) | null;
-    anchor: HTMLDivElement;
-}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, any, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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":"AAsMA;AAgRA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAgB5C,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,WAAW,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,IAAI,EAAE,OAAO,CAAA;IACb,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IAEjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,OAAO,CAAA;CAC1B,CAAC;AAwCF,iBAAS,cAAc;WA0YT,OAAO,IAA6B;;;;;;YAjBpB,GAAG;sBACN,GAAG;sBACH,GAAG;2BACE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAhGV,GAAG,8CAA8C,GAAG,yBAC3D,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;EAkH1D;AA2BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA/II,GAAG,8CAA8C,GAAG,yBAC3D,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;OAsJzD,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,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":"AAkMA;AAAA,OAuRO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAgB5C,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,WAAW,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,IAAI,EAAE,OAAO,CAAA;IACb,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IAEjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,OAAO,CAAA;CAC1B,CAAC;AAmDF,iBAAS,cAAc,QA2YtB;AA4BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;mFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,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, useTemplateRef, ref, computed, createElementBlock, openBlock, Fragment, createElementVNode, createCommentVNode, mergeProps, createVNode, createBlock, Transition, withCtx, normalizeClass, unref, resolveDynamicComponent, 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$4 from '../Button/WButtonMore.vue.js';
 import _sfc_main$5 from '../Button/WButtonMoreItem.vue.js';
@@ -42,6 +42,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isOpen = ref(false);
     const position = ref(null);
     const anchorRef = useTemplateRef("anchor");
+    const beforeClass = computed(() => {
+      if (!isActionShown.value) return {};
+      return {
+        "w-ripple-list w-ripple-hover-list": true,
+        "w-ripple-opacity-[0.05]": !props.allowSelectHover && !props.selected && !moreRef.value?.isOpen,
+        "before:text-primary dark:before:text-primary-dark w-ripple-opacity-15": props.allowSelectHover || props.selected || moreRef.value?.isOpen,
+        "before:opacity-10": props.selected || moreRef.value?.isOpen
+      };
+    });
     const toggle = () => {
       isOpen.value = !isOpen.value;
     };
@@ -60,7 +69,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref: "container",
           class: ["relative isolate", {
             [_ctx.cardWrapperClass ?? ""]: true,
-            "w-ripple-trigger-has": isActionShown.value,
+            "w-ripple-trigger-list": 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,
@@ -81,7 +90,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }),
           !_ctx.card ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(["-left--left-inner bg-default dark:bg-default-dark @not-lg:hidden w-ripple-opacity-[0.05] sticky z-[1]", {
+            class: normalizeClass(["-left--left-inner bg-default dark:bg-default-dark @not-lg:hidden sticky z-[1]", {
               "width-[--w-list-header-rounded,1rem]": !_ctx.allowSelect
             }])
           }, [
@@ -93,10 +102,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "border-primary 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": isActionShown.value,
                 "pl-px": !_ctx.hasBorder,
-                "before:text-primary dark:before:text-primary-dark w-ripple-opacity-15": _ctx.allowSelectHover || _ctx.selected || unref(moreRef)?.isOpen,
-                "before:opacity-10": _ctx.selected || unref(moreRef)?.isOpen
+                ...beforeClass.value
               }])
             }, [
               _ctx.allowSelect ? (openBlock(), createBlock(_sfc_main$1, {
@@ -136,7 +143,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle({ gridArea: unref(AREA_SELECT) }),
                 "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 }))),
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ toggle, isOpen: isOpen.value, validate, beforeClass: beforeClass.value }))),
               isActionShown.value ? (openBlock(), createBlock(_sfc_main$3, mergeProps(
                 { key: 1 },
                 _ctx.allowSelectHover ? { tag: "button", card: _ctx.card, onClick: () => _ctx.$emit("toggle:selected") } : _ctx.hasAction ? { tag: "button", card: _ctx.card, class: "z-[-1]", onClick: () => _ctx.$emit("click:action") } : _ctx.to ? { tag: markRaw(unref(RouterLink)), card: _ctx.card, class: "z-[-1]", props: { to: _ctx.to } } : _ctx.allowOpen ? { tag: "button", card: _ctx.card, class: "z-[-1]", onClick: toggle } : { tag: "div", card: _ctx.card, class: "z-[-1]" },
@@ -173,7 +180,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 16, ["class"])),
           !_ctx.card ? (openBlock(), createElementBlock("div", {
             key: 1,
-            class: normalizeClass(["-right--right-inner bg-default dark:bg-default-dark w-ripple-opacity-[0.05] sticky z-[1]", {
+            class: normalizeClass(["-right--right-inner bg-default dark:bg-default-dark sticky z-[1]", {
               "width-[calc(var(--w-list-padding,1rem)*2+1.25em)]": _ctx.$slots.more,
               "width-[--w-list-header-rounded,1rem]": !_ctx.$slots.more
             }])
@@ -186,9 +193,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "border-primary 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": isActionShown.value,
-                "before:text-primary dark:before:text-primary-dark w-ripple-opacity-15": _ctx.allowSelectHover || _ctx.selected || unref(moreRef)?.isOpen,
-                "before:opacity-10": _ctx.selected || unref(moreRef)?.isOpen
+                ...beforeClass.value
               }])
             }, [
               _ctx.$slots.more ? (openBlock(), createBlock(_sfc_main$4, {

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

@@ -13,7 +13,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["grid shrink-0 grid-cols-1", {
+        class: normalizeClass(["list:last-not:pr-3 list:first-not:pl-3 grid shrink-0 grid-cols-1", {
           "pointer-events-none": _ctx.allowOpen
         }])
       }, [

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

@@ -1,18 +1,18 @@
-import { StyleValue } from 'vue';
 import { OrderItem } from '../../utils/order';
 declare const _default: <Field>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onSave:width"?: (() => any) | undefined;
         readonly "onUpdate:width"?: ((value: number) => any) | undefined;
+        readonly "onSave:width"?: (() => any) | undefined;
         readonly "onUpdate:ordering"?: ((value: OrderItem<Field>[]) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onSave:width" | "onUpdate:width" | "onUpdate:ordering"> & {
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:width" | "onSave:width" | "onUpdate:ordering"> & {
         title?: string;
         field: Field;
         ordering: OrderItem<Field>[];
         disabled?: boolean;
         allowResize?: boolean;
         itemClass?: string;
-        widthStyle: StyleValue | undefined;
+        styleValue: Record<string, string | undefined>;
+        hasWidth: boolean;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

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

@@ -1 +1 @@
-{"version":3,"file":"WListHeaderItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/WListHeaderItem.vue"],"names":[],"mappings":"AAyDA;AAiHA,OAAO,EAAC,KAAK,UAAU,EAA2C,MAAM,KAAK,CAAA;AAI7E,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,eAAe,CAAA;yBAIlC,KAAK,EACrB,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAqNO,mBAAmB,CAAC;;;;;gBAnNlB,MAAM;eACP,KAAK;kBACF,SAAS,CAAC,KAAK,CAAC,EAAE;mBACjB,OAAO;sBACJ,OAAO;oBACT,MAAM;oBACN,UAAU,GAAG,SAAS;mBA6M0D,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAlCmB,GAAG;;;YAxK3B,cAAc,SAAS,MAAM,GAAG,IAAI;YACpC,YAAY,GAAG,IAAI;YACnB,iBAAiB,SAAS,SAAS,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI;;EA4MrD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAhOzE,wBAgO4E;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":"AA2DA;AAyHA,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,eAAe,CAAA;yBAKlC,KAAK,EACrB,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAuNO,mBAAmB,CAAC;;;;;gBArNlB,MAAM;eACP,KAAK;kBACF,SAAS,CAAC,KAAK,CAAC,EAAE;mBACjB,OAAO;sBACJ,OAAO;oBACT,MAAM;oBACN,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;kBACpC,OAAO;mBA8M2E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAnCmB,GAAG;;;YAxK3B,cAAc,SAAS,MAAM,GAAG,IAAI;YACpC,YAAY,GAAG,IAAI;YACnB,iBAAiB,SAAS,SAAS,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI;;EA6MrD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlOzE,wBAkO4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -1,6 +1,7 @@
 import { defineComponent, useTemplateRef, computed, ref, onMounted, createBlock, openBlock, resolveDynamicComponent, mergeProps, withCtx, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, Transition, createElementBlock, createVNode, unref } from 'vue';
 import IconBack from '../../assets/icons/default/IconBack.svg.js';
 import { Order } from '../../utils/order.js';
+import _sfc_main$2 from './components/HeaderItem.vue.js';
 import _sfc_main$1 from './components/HeaderItemResizer.vue.js';
 
 const _hoisted_1 = {
@@ -17,7 +18,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean },
     allowResize: { type: Boolean },
     itemClass: {},
-    widthStyle: { type: [Boolean, null, String, Object, Array] }
+    styleValue: {},
+    hasWidth: { type: Boolean }
   },
   emits: ["update:width", "save:width", "update:ordering"],
   setup(__props, { emit: __emit }) {
@@ -45,11 +47,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(_ctx.allowResize ? _sfc_main$1 : "div"), mergeProps({ ref: "container" }, _ctx.allowResize ? { hasStyles: _ctx.widthStyle !== void 0 } : void 0, {
-        class: "text-description shrink-0 select-none overflow-hidden pr-6",
-        style: _ctx.widthStyle ?? widthStyleInner.value,
-        "onUpdate:width": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:width", $event)),
-        "onSave:width": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("save:width"))
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.allowResize ? _sfc_main$1 : _sfc_main$2), mergeProps({ ref: "container" }, _ctx.allowResize ? {
+        hasWidth: _ctx.hasWidth,
+        "onSave:width": () => _ctx.$emit("save:width")
+      } : void 0, {
+        class: "text-description last-not:pr-3 first-not:pl-3 shrink-0 select-none overflow-hidden",
+        style: [widthStyleInner.value, _ctx.styleValue],
+        "onUpdate:width": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:width", $event))
       }), {
         default: withCtx(() => [
           (openBlock(), createBlock(resolveDynamicComponent(_ctx.disabled ? "div" : "button"), {