eco-vue-js 0.11.4 → 0.11.6

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, useTemplateRef, computed, toRef, watch, nextTick, createBlock, openBlock, mergeProps, unref, withModifiers, createSlots, withCtx, createCommentVNode, createElementBlock, renderSlot, resolveDynamicComponent, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass } from 'vue';
+import { defineComponent, ref, useTemplateRef, computed, toRef, watch, nextTick, createBlock, openBlock, mergeProps, unref, withModifiers, createSlots, withCtx, createElementVNode, createCommentVNode, createElementBlock, renderSlot, resolveDynamicComponent, toDisplayString, Fragment, renderList, normalizeClass } from 'vue';
 import _sfc_main$1 from '../Input/WInputSuggest.vue.js';
 import { ApiError } from '../../utils/api.js';
 import { useIsMobile } from '../../utils/mobile.js';
@@ -7,15 +7,16 @@ import { debounce } from '../../utils/utils.js';
 import _sfc_main$2 from './components/SelectOption.vue.js';
 import _sfc_main$3 from './components/SelectOptionPrefix.vue.js';
 
-const _hoisted_1 = {
+const _hoisted_1 = { class: "max-h-80" };
+const _hoisted_2 = {
   key: 1,
   class: "text-description w-option flex items-center"
 };
-const _hoisted_2 = {
+const _hoisted_3 = {
   key: 1,
   class: "w-select-option first:-pt--w-select-option-padding last:-pb--w-select-option-padding"
 };
-const _hoisted_3 = { class: "w-option flex cursor-default select-none items-center" };
+const _hoisted_4 = { class: "w-option flex cursor-default select-none items-center" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "WSelect",
@@ -81,8 +82,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     savedText: {},
     topText: { type: Boolean },
     parentElement: {},
-    maxHeight: {},
-    maxWidth: {},
     horizontalAlign: {},
     top: { type: Boolean },
     bottom: { type: Boolean },
@@ -321,82 +320,84 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128)) : createCommentVNode("", true)
         ]),
         content: withCtx(() => [
-          hasCreateOption.value ? (openBlock(), createBlock(_sfc_main$2, {
-            key: 0,
-            "is-selected": false,
-            "is-cursor": cursor.value === optionsFiltered.value.length,
-            loading: (loadingCreate.value || loadingOptionIndex.value === optionsFiltered.value.length) && _ctx.loading,
-            scroll: isCursorLocked.value,
-            "hide-option-icon": _ctx.hideOptionIcon,
-            disabled: !search.value || isModelValueSearch.value,
-            class: "first:-pt--w-select-option-padding last:-pb--w-select-option-padding",
-            onSelect: _cache[0] || (_cache[0] = ($event) => create(search.value)),
-            onMouseenter: _cache[1] || (_cache[1] = ($event) => setCursor(optionsFiltered.value.length))
-          }, {
-            prefix: withCtx(() => _cache[6] || (_cache[6] = [
-              createElementVNode("div", { class: "w-option flex items-center pr-2" }, " Create: ", -1)
-            ])),
-            default: withCtx(() => [
-              search.value && !isModelValueSearch.value ? renderSlot(_ctx.$slots, "option", {
-                key: 0,
-                option: void 0,
-                search: search.value,
-                selected: false,
-                model: false,
-                index: void 0,
-                skeleton: false
-              }, () => [
-                (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), mergeProps(_ctx.optionComponentProps, {
-                  option: null,
-                  search: search.value,
-                  selected: false,
-                  model: false
-                }), null, 16, ["search"]))
-              ]) : (openBlock(), createElementBlock("div", _hoisted_1, " Start typing.. "))
-            ]),
-            _: 3
-          }, 8, ["is-cursor", "loading", "scroll", "hide-option-icon", "disabled"])) : createCommentVNode("", true),
-          !optionsFiltered.value.length && !isModelValueSearch.value && (!_ctx.createOption || optionsWithCreated.value.length) ? (openBlock(), createElementBlock("div", _hoisted_2, [
-            createElementVNode("div", _hoisted_3, toDisplayString(!search.value && _ctx.emptyStub ? _ctx.emptyStub : search.value ? "No match" : "Nothing to show"), 1)
-          ])) : createCommentVNode("", true),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(optionsFiltered.value, (option, index) => {
-            return openBlock(), createBlock(_sfc_main$2, {
-              key: _ctx.valueGetter(option),
-              "is-selected": _ctx.modelValue.includes(_ctx.valueGetter(option)),
-              "is-cursor": index === cursor.value,
-              loading: loadingOptionIndex.value === index && _ctx.loading,
+          createElementVNode("div", _hoisted_1, [
+            hasCreateOption.value ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              "is-selected": false,
+              "is-cursor": cursor.value === optionsFiltered.value.length,
+              loading: (loadingCreate.value || loadingOptionIndex.value === optionsFiltered.value.length) && _ctx.loading,
               scroll: isCursorLocked.value,
               "hide-option-icon": _ctx.hideOptionIcon,
+              disabled: !search.value || isModelValueSearch.value,
               class: "first:-pt--w-select-option-padding last:-pb--w-select-option-padding",
-              onSelect: ($event) => {
-                select(_ctx.valueGetter(option));
-                setLoadingOptionIndex(index);
-              },
-              onUnselect: ($event) => {
-                unselect(_ctx.valueGetter(option));
-                setLoadingOptionIndex(index);
-              },
-              onMouseenter: ($event) => setCursor(index)
+              onSelect: _cache[0] || (_cache[0] = ($event) => create(search.value)),
+              onMouseenter: _cache[1] || (_cache[1] = ($event) => setCursor(optionsFiltered.value.length))
             }, {
-              default: withCtx(({ selected }) => [
-                renderSlot(_ctx.$slots, "option", {
-                  option,
-                  selected,
+              prefix: withCtx(() => _cache[6] || (_cache[6] = [
+                createElementVNode("div", { class: "w-option flex items-center pr-2" }, " Create: ", -1)
+              ])),
+              default: withCtx(() => [
+                search.value && !isModelValueSearch.value ? renderSlot(_ctx.$slots, "option", {
+                  key: 0,
+                  option: void 0,
+                  search: search.value,
+                  selected: false,
                   model: false,
-                  index,
-                  skeleton: false,
-                  search: search.value
+                  index: void 0,
+                  skeleton: false
                 }, () => [
-                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), mergeProps({ ref_for: true }, _ctx.optionComponentProps, {
-                    option,
-                    selected,
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), mergeProps(_ctx.optionComponentProps, {
+                    option: null,
+                    search: search.value,
+                    selected: false,
                     model: false
-                  }), null, 16, ["option", "selected"]))
-                ])
+                  }), null, 16, ["search"]))
+                ]) : (openBlock(), createElementBlock("div", _hoisted_2, " Start typing.. "))
               ]),
-              _: 2
-            }, 1032, ["is-selected", "is-cursor", "loading", "scroll", "hide-option-icon", "onSelect", "onUnselect", "onMouseenter"]);
-          }), 128))
+              _: 3
+            }, 8, ["is-cursor", "loading", "scroll", "hide-option-icon", "disabled"])) : createCommentVNode("", true),
+            !optionsFiltered.value.length && !isModelValueSearch.value && (!_ctx.createOption || optionsWithCreated.value.length) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, toDisplayString(!search.value && _ctx.emptyStub ? _ctx.emptyStub : search.value ? "No match" : "Nothing to show"), 1)
+            ])) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(optionsFiltered.value, (option, index) => {
+              return openBlock(), createBlock(_sfc_main$2, {
+                key: _ctx.valueGetter(option),
+                "is-selected": _ctx.modelValue.includes(_ctx.valueGetter(option)),
+                "is-cursor": index === cursor.value,
+                loading: loadingOptionIndex.value === index && _ctx.loading,
+                scroll: isCursorLocked.value,
+                "hide-option-icon": _ctx.hideOptionIcon,
+                class: "first:-pt--w-select-option-padding last:-pb--w-select-option-padding",
+                onSelect: ($event) => {
+                  select(_ctx.valueGetter(option));
+                  setLoadingOptionIndex(index);
+                },
+                onUnselect: ($event) => {
+                  unselect(_ctx.valueGetter(option));
+                  setLoadingOptionIndex(index);
+                },
+                onMouseenter: ($event) => setCursor(index)
+              }, {
+                default: withCtx(({ selected }) => [
+                  renderSlot(_ctx.$slots, "option", {
+                    option,
+                    selected,
+                    model: false,
+                    index,
+                    skeleton: false,
+                    search: search.value
+                  }, () => [
+                    (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), mergeProps({ ref_for: true }, _ctx.optionComponentProps, {
+                      option,
+                      selected,
+                      model: false
+                    }), null, 16, ["option", "selected"]))
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["is-selected", "is-cursor", "loading", "scroll", "hide-option-icon", "onSelect", "onUnselect", "onMouseenter"]);
+            }), 128))
+          ])
         ]),
         _: 2
       }, [

package/dist/components/Select/WSelectAsync.vue.d.ts

@@ -3,7 +3,7 @@ declare const _default: <Model extends number | string, Data extends DefaultData
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onSelect?: ((item: Model) => any) | undefined;
         readonly onBlur?: ((value: FocusEvent) => any) | undefined;
-        readonly onFocus?: ((value: FocusEvent) => any) | undefined;
+        readonly onFocus?: ((value: FocusEvent | undefined) => any) | undefined;
         readonly "onUpdate:model-value"?: ((value: Model[]) => any) | undefined;
         readonly onUnselect?: ((item: Model) => any) | undefined;
         readonly "onInit-model"?: (() => any) | undefined;
@@ -30,7 +30,7 @@ declare const _default: <Model extends number | string, Data extends DefaultData
         (e: "unselect", item: Model): void;
         (e: "update:model-value", value: Model[]): void;
         (e: "init-model"): void;
-        (e: "focus", value: FocusEvent): void;
+        (e: "focus", value: FocusEvent | undefined): void;
         (e: "blur", value: FocusEvent): void;
     };
 }>) => import('vue').VNode & {

package/dist/components/Select/WSelectAsync.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WSelectAsync.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/WSelectAsync.vue"],"names":[],"mappings":"AA8HA;AAyTA,OAAO,KAAK,EAAC,gBAAgB,EAAE,qBAAqB,EAA8B,iBAAiB,EAAC,MAAM,SAAS,CAAA;yBAYlG,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,WAAW,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,EACzI,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;WAmhBO,mBAAmB,CAAC;;;;;;;4RAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;;;2BA1YrB,MAAM,KAAG,IAAI;MA0Y8B,GAAG,IAAI;WACpE,GAAG;;gBAxWD,MAAM,IAAI;mBACP,MAAM,IAAI;gBACb,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;iBACrC,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;;gBAHrD,MAAM,IAAI;mBACP,MAAM,IAAI;gBACb,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;iBACrC,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;;;YA/JzD,QAAQ,QAAQ,KAAK,GAAG,IAAI;YAC5B,UAAU,QAAQ,KAAK,GAAG,IAAI;YAC9B,oBAAoB,SAAS,KAAK,EAAE,GAAG,IAAI;YAC3C,YAAY,GAAG,IAAI;YACnB,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,MAAM,SAAS,UAAU,GAAG,IAAI;;EAmgBlC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA9hBzE,wBA8hB4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"WSelectAsync.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/WSelectAsync.vue"],"names":[],"mappings":"AA+HA;AA0TA,OAAO,KAAK,EAAC,gBAAgB,EAAE,qBAAqB,EAA8B,iBAAiB,EAAC,MAAM,SAAS,CAAA;yBAYlG,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,WAAW,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,EACzI,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;WAshBO,mBAAmB,CAAC;;;;;;;4RAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;;;2BA7YrB,MAAM,KAAG,IAAI;MA6Y8B,GAAG,IAAI;WACpE,GAAG;;gBA3WD,MAAM,IAAI;mBACP,MAAM,IAAI;gBACb,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;iBACrC,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;;gBAHrD,MAAM,IAAI;mBACP,MAAM,IAAI;gBACb,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;iBACrC,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;;;YA/JzD,QAAQ,QAAQ,KAAK,GAAG,IAAI;YAC5B,UAAU,QAAQ,KAAK,GAAG,IAAI;YAC9B,oBAAoB,SAAS,KAAK,EAAE,GAAG,IAAI;YAC3C,YAAY,GAAG,IAAI;YACnB,OAAO,SAAS,UAAU,GAAG,SAAS,GAAG,IAAI;YAC7C,MAAM,SAAS,UAAU,GAAG,IAAI;;EAsgBlC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAjiBzE,wBAiiB4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -74,8 +74,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     savedText: {},
     topText: { type: Boolean },
     parentElement: {},
-    maxHeight: {},
-    maxWidth: {},
     horizontalAlign: {},
     top: { type: Boolean },
     bottom: { type: Boolean },
@@ -265,6 +263,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "value-getter": _ctx.valueGetter,
             "loading-create": loadingCreate.value,
             search: search.value,
+            class: "max-h-80",
             onSelect: select,
             onUnselect: unselect,
             "onCreate:option": _cache[1] || (_cache[1] = ($event) => create(search.value)),

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

@@ -71,8 +71,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     savedText: {},
     topText: { type: Boolean },
     parentElement: {},
-    maxHeight: {},
-    maxWidth: {},
     horizontalAlign: {},
     top: { type: Boolean },
     bottom: { type: Boolean },

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

@@ -67,8 +67,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     savedText: {},
     topText: { type: Boolean },
     parentElement: {},
-    maxHeight: {},
-    maxWidth: {},
     horizontalAlign: {},
     top: { type: Boolean },
     bottom: { type: Boolean },

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

@@ -67,8 +67,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     savedText: {},
     topText: { type: Boolean },
     parentElement: {},
-    maxHeight: {},
-    maxWidth: {},
     horizontalAlign: {},
     top: { type: Boolean },
     bottom: { type: Boolean },

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

@@ -41,7 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const firstItem = ref();
     const lastItem = ref();
     const count = ref(0);
-    const isModelValueSearch = computed(() => props.search && props.modelValue.includes(props.search));
+    const isModelValueSearch = computed(() => !!props.search && props.modelValue.includes(props.search));
     const setLoadingOption = (value) => {
       loadingOption.value = value;
     };

package/dist/components/Tooltip/WTooltipContainer.vue.d.ts

@@ -4,8 +4,6 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         $: import('vue').ComponentInternalInstance;
         $data: {};
         $props: {
-            readonly maxHeight: number;
-            readonly maxWidth: number;
             readonly horizontalAlign: HorizontalAlign;
             readonly top?: boolean | undefined;
             readonly bottom?: boolean | undefined;

package/dist/components/Tooltip/WTooltipContainer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WTooltipContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/WTooltipContainer.vue"],"names":[],"mappings":"AAgDA;AAmFA,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA2L6zf,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;AAT1+f,wBAOG"}
+{"version":3,"file":"WTooltipContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/WTooltipContainer.vue"],"names":[],"mappings":"AA8CA;AAiFA,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAuL8sgB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;AAT33gB,wBAOG"}

package/dist/components/Tooltip/WTooltipContainer.vue.js

@@ -36,8 +36,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: dropdownKey.value,
             "parent-element": unref(tooltipMeta).parent,
             "horizontal-align": unref(tooltipMeta).left ? unref(HorizontalAlign).LEFT_CENTER : unref(tooltipMeta).right ? unref(HorizontalAlign).RIGHT_CENTER : unref(HorizontalAlign).CENTER,
-            "max-height": unref(tooltipMeta)?.maxHeight ?? 120,
-            "max-width": unref(tooltipMeta).left || unref(tooltipMeta).right ? 400 : 240,
             top: unref(tooltipMeta).top,
             bottom: unref(tooltipMeta).bottom,
             "emit-update": "",
@@ -62,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, 1032, ["tooltip-meta", "is-top", "is-left", "is-right"])
             ]),
             _: 1
-          }, 8, ["parent-element", "horizontal-align", "max-height", "max-width", "top", "bottom", "onUpdate:rect"])) : createCommentVNode("", true)
+          }, 8, ["parent-element", "horizontal-align", "top", "bottom", "onUpdate:rect"])) : createCommentVNode("", true)
         ]),
         _: 1
       });

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.11.4",
+  "version": "0.11.6",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.2.3",
     "@tanstack/eslint-plugin-query": "5.83.1",

package/tailwind-base/plugins/default.ts

@@ -35,16 +35,22 @@ const pluginDefault = plugin(function ({matchUtilities, addVariant, addUtilities
   
   addBase({
     '*': {
-      '--w-left-inner': 'calc(var(--nav-bar-width) + var(--inner-margin))',
-      '--w-right-inner': 'calc(var(--actions-bar-width) + var(--inner-margin))',
-      '--w-width-inner': 'calc(100vw - var(--actions-bar-width) - var(--nav-bar-width) - var(--inner-margin) - var(--inner-margin) - var(--scroll-bar-width))',
-      '--w-height-inner': 'calc(100vh - var(--header-height) - var(--infinite-list-header-height, 0px) - var(--scroll-bar-width))',
+      '--w-left-inner': 'calc(var(--nav-bar-width, 0px) + var(--inner-margin, 0px))',
+      '--w-right-inner': 'calc(var(--actions-bar-width, 0px) + var(--inner-margin, 0px) + var(--scroll-bar-width, 0px))',
+      '--w-width-inner': 'calc(100vw - var(--w-left-inner, 0px) - var(--w-right-inner, 0px))',
+
+      '--w-top-inner': 'calc(var(--header-height, 0px) + var(--infinite-list-header-height, 0px))',
+      '--w-bottom-inner': 'var(--scroll-bar-width, 0px)',
+      '--w-height-inner': 'calc(100vh - var(--w-top-inner, 0px) - var(--w-bottom-inner, 0px))',
     },
     '.w-modal-wrapper *': {
-      '--w-left-inner': 'var(--w-modal-wrapper-padding)',
-      '--w-right-inner': 'var(--w-modal-wrapper-padding)',
-      '--w-width-inner': 'calc(var(--w-modal-wrapper-width, 35rem) - var(--w-modal-wrapper-padding) - var(--w-modal-wrapper-padding) - var(--scroll-bar-width))',
-      '--w-height-inner': 'calc(var(--w-modal-content-height) - var(--w-modal-header-height) - var(--w-modal-footer-height) - var(--infinite-list-header-height, 0px) - var(--scroll-bar-width))',
+      '--w-left-inner': 'var(--w-modal-wrapper-padding, 0px)',
+      '--w-right-inner': 'calc(var(--w-modal-wrapper-padding, 0px) + var(--scroll-bar-width, 0px)))',
+      '--w-width-inner': 'calc(var(--w-modal-wrapper-width, 35rem) - var(--w-left-inner, 0px) - var(--w-left-inner, 0px))',
+
+      '--w-top-inner': 'calc(var(--w-modal-header-height, 0px) + var(--infinite-list-header-height, 0px))',
+      '--w-bottom-inner': 'calc(var(--w-modal-footer-height, 0px) + var(--scroll-bar-width, 0px))',
+      '--w-height-inner': 'calc(var(--w-modal-content-height, 0px) - var(--w-top-inner, 0px) - var(--w-bottom-inner, 0px))',
     },
   })