eco-vue-js 0.10.73 → 0.10.74

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

@@ -49,7 +49,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             content: withCtx(() => [
               createVNode(_sfc_main$2, {
-                class: "bg-default dark:bg-default-dark my-2 grid grid-cols-1 overflow-hidden rounded-xl shadow-md dark:outline dark:outline-1 dark:outline-gray-800",
+                class: "bg-default dark:bg-default-dark dropdown my-2 grid grid-cols-1 overflow-hidden rounded-xl shadow-md dark:outline dark:outline-1 dark:outline-gray-800",
                 onClick: _cache[1] || (_cache[1] = ($event) => isOpen.value = false)
               }, {
                 default: withCtx(() => [

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

@@ -5,7 +5,7 @@ import _sfc_main$1 from '../Tooltip/WTooltip.vue.js';
 const _hoisted_1 = ["disabled"];
 const _hoisted_2 = {
   key: 0,
-  class: "sm-not:hidden whitespace-nowrap font-normal"
+  class: "sm-not:hidden sm-not:[.dropdown_&]:block whitespace-nowrap font-normal"
 };
 const _hoisted_3 = { class: "whitespace-nowrap" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -23,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         disabled: _ctx.disabled || _ctx.disableMessage !== void 0,
-        class: normalizeClass(["disabled:text-description relative isolate flex select-none items-center justify-center bg-none no-underline outline-none disabled:cursor-not-allowed", {
+        class: normalizeClass(["disabled:text-description relative isolate flex select-none items-center bg-none no-underline outline-none disabled:cursor-not-allowed", {
           "w-ripple w-ripple-hover before:text-primary dark:before:text-primary-dark hover:text-primary dark:hover:text-primary-dark cursor-pointer": !_ctx.disabled && !_ctx.disableMessage && !_ctx.loading,
           "text-primary dark:text-primary-dark": _ctx.active,
           "text-accent": !_ctx.active,
@@ -33,7 +33,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => !_ctx.disabled && !_ctx.disableMessage && !_ctx.loading && _ctx.$emit("click"))
       }, [
         createElementVNode("div", {
-          class: normalizeClass(["-h--w-input-height sm-not:-px--inner-margin z-10 flex items-center justify-center gap-2 px-[--w-list-padding,1rem]", {
+          class: normalizeClass(["-h--w-input-height sm-not:-px--inner-margin z-10 flex items-center gap-2 px-[--w-list-padding,1rem]", {
             "opacity-0": _ctx.loading
           }])
         }, [

package/dist/components/InfiniteList/WInfiniteListWrapper.vue.d.ts

@@ -4,9 +4,11 @@ type __VLS_Props = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        header?(_: {}): any;
         header?(_: {
             updateHeaderHeight: () => void;
         }): any;
+        default?(_: {}): any;
         default?(_: {
             headerTop: number;
             headerHeight: number;

package/dist/components/InfiniteList/WInfiniteListWrapper.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WInfiniteListWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/InfiniteList/WInfiniteListWrapper.vue"],"names":[],"mappings":"AAuBA;AAyDA,KAAK,WAAW,GAAG;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAC;AAiBF,iBAAS,cAAc;WA6CT,OAAO,IAA6B;;;;YAbtB,GAAG;;;;YACF,GAAG;;;;;;;EAiB/B;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;OAOnB,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":"WInfiniteListWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/InfiniteList/WInfiniteListWrapper.vue"],"names":[],"mappings":"AAkCA;AAmGA,KAAK,WAAW,GAAG;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAC;AAwCF,iBAAS,cAAc;WAyET,OAAO,IAA6B;;wBAftB,GAAG;;;YAEH,GAAG;yBADF,GAAG;;;;YAEH,GAAG;;;;;;;EAiB/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;OAOnB,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/InfiniteList/WInfiniteListWrapper.vue.js

@@ -1,9 +1,15 @@
-import { defineComponent, inject, watch, onUnmounted, createElementBlock, openBlock, Fragment, createElementVNode, renderSlot, normalizeStyle, normalizeClass, unref, normalizeProps, guardReactiveProps } from 'vue';
+import { defineComponent, inject, ref, useTemplateRef, onMounted, onBeforeUnmount, createElementBlock, openBlock, Fragment, createElementVNode, createBlock, unref, renderSlot, normalizeStyle, withCtx, normalizeProps, guardReactiveProps } from 'vue';
 import { wIsModal } from '../Modal/models/injection.js';
-import { BASE_ZINDEX_DROPDOWN, BASE_ZINDEX_LIST_HEADER } from '../../utils/utils.js';
-import { useInfiniteListHeader } from './use/useInfiniteListHeader.js';
+import { isClientSide, BASE_ZINDEX_DROPDOWN, BASE_ZINDEX_LIST_HEADER } from '../../utils/utils.js';
+import _sfc_main$1 from './components/InfiniteListWrapper.vue.js';
+import { useHeader } from '../HeaderBar/use/useHeader.js';
 
+const _hoisted_1 = {
+  ref: "indicator",
+  class: "print:hidden"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
   __name: "WInfiniteListWrapper",
   props: {
     initIsIntersecting: { type: Boolean }
@@ -11,32 +17,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const isModal = inject(wIsModal, false);
-    const { indicator, header, headerTop, headerHeight, isIntersecting, updateHeaderHeight, updateHeaderPadding } = useInfiniteListHeader(props.initIsIntersecting);
-    if (!isModal) {
-      watch(isIntersecting, updateHeaderHeight);
-      onUnmounted(() => {
-        updateHeaderPadding(0);
+    const isIntersecting = ref(props.initIsIntersecting);
+    const indicatorRef = useTemplateRef("indicator");
+    const observerCb = (entries) => {
+      isIntersecting.value = entries.some((entry) => {
+        if (entry.target === indicatorRef.value) {
+          return entry.isIntersecting || entry.boundingClientRect.top > window.innerHeight;
+        }
       });
-    }
+    };
+    let observer = null;
+    const { headerHeight } = useHeader();
+    onMounted(() => {
+      if (!isClientSide) return;
+      if (indicatorRef.value) {
+        observer = new IntersectionObserver(observerCb, {
+          root: null,
+          rootMargin: `-${headerHeight.value}px 100% 0px 0px`,
+          threshold: 1
+        });
+        observer.observe(indicatorRef.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
-          ref_key: "indicator",
-          ref: indicator,
-          class: "print:hidden"
-        }, null, 512),
-        createElementVNode("div", {
-          ref_key: "header",
-          ref: header,
-          class: normalizeClass(["sticky print:hidden", {
-            "-top--modal-header-height bg-default dark:bg-default-dark": unref(isModal),
-            "-top--header-height": !unref(isModal)
-          }]),
-          style: normalizeStyle({ zIndex: unref(isIntersecting) ? unref(BASE_ZINDEX_DROPDOWN) : unref(BASE_ZINDEX_LIST_HEADER) })
-        }, [
-          renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({ updateHeaderHeight: unref(updateHeaderHeight) })))
-        ], 6),
-        renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ headerTop: unref(headerTop), headerHeight: unref(headerHeight) })))
+        createElementVNode("div", _hoisted_1, null, 512),
+        unref(isModal) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("div", {
+            ref: "header",
+            class: "-top--modal-header-height bg-default dark:bg-default-dark sticky print:hidden",
+            style: normalizeStyle({ zIndex: isIntersecting.value ? unref(BASE_ZINDEX_DROPDOWN) : unref(BASE_ZINDEX_LIST_HEADER) })
+          }, [
+            renderSlot(_ctx.$slots, "header")
+          ], 4),
+          renderSlot(_ctx.$slots, "default")
+        ], 64)) : (openBlock(), createBlock(_sfc_main$1, {
+          key: 1,
+          "is-intersecting": isIntersecting.value
+        }, {
+          header: withCtx((scope) => [
+            renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(scope)))
+          ]),
+          default: withCtx((scope) => [
+            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(scope)))
+          ]),
+          _: 3
+        }, 8, ["is-intersecting"]))
       ], 64);
     };
   }

package/dist/components/InfiniteList/components/InfiniteListWrapper.vue.d.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    isIntersecting: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {
+            updateHeaderHeight: () => void;
+        }): any;
+        default?(_: {
+            headerTop: number;
+            headerHeight: number;
+        }): any;
+    };
+    refs: {
+        header: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    header: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InfiniteListWrapper.vue.d.ts.map

package/dist/components/InfiniteList/components/InfiniteListWrapper.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteListWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/components/InfiniteListWrapper.vue"],"names":[],"mappings":"AAcA;AAkDA,KAAK,WAAW,GAAG;IACjB,cAAc,EAAE,OAAO,CAAA;CACxB,CAAC;AAqBF,iBAAS,cAAc;WAkCT,OAAO,IAA6B;;;;YAZtB,GAAG;;;;YACF,GAAG;;;;;;EAgB/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;OAOnB,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/InfiniteList/components/InfiniteListWrapper.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent, toRef, watch, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createElementVNode, renderSlot, normalizeStyle, unref, normalizeProps, guardReactiveProps } from 'vue';
+import { isClientSide, BASE_ZINDEX_DROPDOWN, BASE_ZINDEX_LIST_HEADER } from '../../../utils/utils.js';
+import { useInfiniteListHeader } from '../use/useInfiniteListHeader.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InfiniteListWrapper",
+  props: {
+    isIntersecting: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const isIntersectingRef = toRef(props, "isIntersecting");
+    const { header, headerTop, headerHeight, updateHeader, updateHeaderHeight, updateHeaderPadding } = useInfiniteListHeader(isIntersectingRef);
+    watch(isIntersectingRef, updateHeaderHeight);
+    onMounted(() => {
+      if (!isClientSide) return;
+      updateHeader();
+    });
+    onUnmounted(() => {
+      updateHeaderPadding(0);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          ref_key: "header",
+          ref: header,
+          class: "-top--header-height sticky print:hidden",
+          style: normalizeStyle({ zIndex: _ctx.isIntersecting ? unref(BASE_ZINDEX_DROPDOWN) : unref(BASE_ZINDEX_LIST_HEADER) })
+        }, [
+          renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({ updateHeaderHeight: unref(updateHeaderHeight) })))
+        ], 4),
+        renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ headerTop: unref(headerTop), headerHeight: unref(headerHeight) })))
+      ], 64);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/InfiniteList/components/InfiniteListWrapper.vue2.js

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

package/dist/components/InfiniteList/use/useInfiniteListHeader.d.ts

@@ -1,9 +1,9 @@
-export declare const useInfiniteListHeader: (initIsIntersecting?: boolean) => {
-    indicator: import('vue').Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
-    header: import('vue').Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
-    headerHeight: import('vue').Ref<number, number>;
-    headerTop: import('vue').Ref<number, number>;
-    isIntersecting: import('vue').Ref<boolean, boolean>;
+import { Ref } from 'vue';
+export declare const useInfiniteListHeader: (isIntersecting: Ref<boolean>) => {
+    header: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    headerHeight: Ref<number, number>;
+    headerTop: Ref<number, number>;
+    updateHeader: () => void;
     updateHeaderPadding: (value: number) => void;
     updateHeaderHeight: () => void;
 };

package/dist/components/InfiniteList/use/useInfiniteListHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInfiniteListHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/use/useInfiniteListHeader.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,qBAAqB,GAAI,4BAAyB;;;;;;;;CAqE9D,CAAA"}
+{"version":3,"file":"useInfiniteListHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/use/useInfiniteListHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,GAAG,EAAc,MAAM,KAAK,CAAA;AAOzC,eAAO,MAAM,qBAAqB,GAAI,gBAAgB,GAAG,CAAC,OAAO,CAAC;;;;;;;CAqCjE,CAAA"}

package/dist/components/InfiniteList/use/useInfiniteListHeader.js

@@ -1,26 +1,15 @@
-import { ref, inject, onMounted, onBeforeUnmount } from 'vue';
+import { ref, inject } from 'vue';
 import { useHeader } from '../../HeaderBar/use/useHeader.js';
 import { wModalHeaderHeight } from '../../Modal/models/injection.js';
-import { isClientSide } from '../../../utils/utils.js';
 import { wScrollingElement } from '../models/injection.js';
 
-const useInfiniteListHeader = (initIsIntersecting = true) => {
-  const indicator = ref();
+const useInfiniteListHeader = (isIntersecting) => {
   const header = ref();
   const headerHeight = ref(0);
   const headerTop = ref(0);
-  const isIntersecting = ref(initIsIntersecting);
-  let observer = null;
   const { updateHeaderPadding, headerHeight: headerElementHeight } = useHeader();
   const modalHeaderHeight = inject(wModalHeaderHeight, void 0);
   const scrollingElement = inject(wScrollingElement, null);
-  const observerCb = (entries) => {
-    isIntersecting.value = entries.some((entry) => {
-      if (entry.target === indicator.value) {
-        return entry.isIntersecting || entry.boundingClientRect.top > window.innerHeight;
-      }
-    });
-  };
   const updateHeader = () => {
     if (!header.value) return;
     const rect = header.value.getBoundingClientRect();
@@ -35,27 +24,11 @@ const useInfiniteListHeader = (initIsIntersecting = true) => {
       updateHeaderPadding(0);
     }
   };
-  onMounted(() => {
-    if (!isClientSide) return;
-    updateHeader();
-    if (indicator.value) {
-      observer = new IntersectionObserver(observerCb, {
-        root: null,
-        rootMargin: `-${headerElementHeight.value}px 100% 0px 0px`,
-        threshold: 1
-      });
-      observer.observe(indicator.value);
-    }
-  });
-  onBeforeUnmount(() => {
-    observer?.disconnect();
-  });
   return {
-    indicator,
     header,
     headerHeight,
     headerTop,
-    isIntersecting,
+    updateHeader,
     updateHeaderPadding,
     updateHeaderHeight
   };

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

@@ -55,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isOpen.value = !isOpen.value;
     };
     const validate = (...args) => formRef.value?.validate(...args);
-    const isActionShown = computed(() => !props.skeleton && (props.allowOpen || props.to !== void 0 || props.allowSelectHover || props.hasAction || props.selected));
+    const isActionShown = computed(() => !props.skeleton && (props.allowOpen || props.to !== void 0 || props.allowSelectHover || props.hasAction || props.selected || moreRef.value?.isOpen === true));
     const toggleMenu = (event) => {
       if (props.disabled || props.disableMore || !containerRef.value || !moreRef.value || event.ctrlKey) return;
       const containerRect = containerRef.value.getBoundingClientRect();

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(["list:last-not:pr-3 list:first-not:pl-3 grid shrink-0 grid-cols-1", {
+        class: normalizeClass(["list:pr-3 list:first-not:pl-3 grid shrink-0 grid-cols-1", {
           "pointer-events-none": _ctx.allowOpen
         }])
       }, [

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.10.73",
+  "version": "0.10.74",
   "scripts": {
     "build": "run-p type-check \"build-only {@}\" --",
     "dev": "vite build --mode development --watch",