eco-vue-js 0.3.67

package/dist/components/DatePicker/components/CalendarWeek.vue.d.ts

@@ -0,0 +1,50 @@
+import type { DateRange } from '../models/types';
+declare const _default: import("vue").DefineComponent<{
+    startOfMonth: {
+        type: import("vue").PropType<Date>;
+        required: true;
+    };
+    startOfWeek: {
+        type: import("vue").PropType<Date>;
+        required: true;
+    };
+    dateRange: {
+        type: import("vue").PropType<DateRange>;
+    };
+    isBetween: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    isHoverEnabled: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click:day": (value: Date) => void;
+    "hover:day": (value: Date) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    startOfMonth: {
+        type: import("vue").PropType<Date>;
+        required: true;
+    };
+    startOfWeek: {
+        type: import("vue").PropType<Date>;
+        required: true;
+    };
+    dateRange: {
+        type: import("vue").PropType<DateRange>;
+    };
+    isBetween: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    isHoverEnabled: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+}>> & {
+    "onClick:day"?: ((value: Date) => any) | undefined;
+    "onHover:day"?: ((value: Date) => any) | undefined;
+}, {}, {}>;
+export default _default;
+//# sourceMappingURL=CalendarWeek.vue.d.ts.map

package/dist/components/DatePicker/components/CalendarWeek.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeek.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/components/CalendarWeek.vue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+J9C,wBAAkD"}

package/dist/components/DatePicker/components/CalendarWeek.vue.js

@@ -0,0 +1,79 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, createBlock } from 'vue';
+import _sfc_main$1 from './CalendarDay.vue.js';
+
+const _hoisted_1 = { class: "flex" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CalendarWeek",
+  props: {
+    startOfMonth: {},
+    startOfWeek: {},
+    dateRange: {},
+    isBetween: { type: Boolean },
+    isHoverEnabled: { type: Boolean }
+  },
+  emits: ["click:day", "hover:day"],
+  setup(__props) {
+    const props = __props;
+    const days = computed(() => Array(7).fill(void 0).map((_, index) => {
+      const date = new Date(props.startOfWeek);
+      date.setDate(date.getDate() + index);
+      return date;
+    }));
+    const endOfWeek = computed(() => days.value[days.value.length - 1]);
+    const isWeekOutOfMonth = computed(() => {
+      const month = props.startOfMonth.getMonth();
+      return props.startOfWeek.getMonth() !== month || endOfWeek.value.getMonth() !== month;
+    });
+    const isBeforeTo = computed(() => {
+      if (!props.dateRange)
+        return false;
+      return props.dateRange.to > endOfWeek.value;
+    });
+    const isAfterFrom = computed(() => {
+      if (!props.dateRange)
+        return false;
+      return props.dateRange.from < props.startOfWeek;
+    });
+    const isBetweenRange = computed(() => {
+      if (props.isBetween)
+        return true;
+      return isBeforeTo.value && isAfterFrom.value;
+    });
+    const isBeforeFrom = computed(() => {
+      if (!props.dateRange)
+        return false;
+      return props.dateRange.from > endOfWeek.value;
+    });
+    const isAfterTo = computed(() => {
+      if (!props.dateRange)
+        return false;
+      return props.dateRange.to < props.startOfWeek;
+    });
+    const isEmpty = computed(() => {
+      if (props.isBetween)
+        return false;
+      if (!props.dateRange)
+        return true;
+      return isBeforeFrom.value && isBeforeTo.value || isAfterFrom.value && isAfterTo.value;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(days.value, (day, index) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key: index,
+            "start-of-month": _ctx.startOfMonth,
+            "start-of-day": day,
+            "date-range": isEmpty.value || isBetweenRange.value ? void 0 : _ctx.dateRange,
+            "is-between": isBetweenRange.value,
+            "is-week-out-of-month": isWeekOutOfMonth.value,
+            "is-hover-enabled": _ctx.isHoverEnabled,
+            "onClick:day": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:day", $event)),
+            "onHover:day": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("hover:day", $event))
+          }, null, 8, ["start-of-month", "start-of-day", "date-range", "is-between", "is-week-out-of-month", "is-hover-enabled"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/DatePicker/components/CalendarWeek.vue2.js

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

package/dist/components/DatePicker/models/types.d.ts

@@ -0,0 +1,5 @@
+export type DateRange = {
+    from: Date;
+    to: Date;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/DatePicker/models/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/models/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,IAAI,CAAA;IACV,EAAE,EAAE,IAAI,CAAA;CACT,CAAA"}

package/dist/components/Dropdown/WDropdown.vue.d.ts

@@ -0,0 +1,67 @@
+import { HorizontalAlign } from '../../utils/HorizontalAlign';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    maxHeight: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    maxWidth: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    horizontalAlign: {
+        type: import("vue").PropType<HorizontalAlign>;
+        required: true;
+    };
+    parentElement: {
+        type: import("vue").PropType<Element>;
+        required: true;
+    };
+    updateAlign: {
+        type: import("vue").PropType<boolean>;
+    };
+    emitUpdate: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {
+    update: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:rect": () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    maxHeight: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    maxWidth: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    horizontalAlign: {
+        type: import("vue").PropType<HorizontalAlign>;
+        required: true;
+    };
+    parentElement: {
+        type: import("vue").PropType<Element>;
+        required: true;
+    };
+    updateAlign: {
+        type: import("vue").PropType<boolean>;
+    };
+    emitUpdate: {
+        type: import("vue").PropType<boolean>;
+    };
+}>> & {
+    "onUpdate:rect"?: (() => any) | undefined;
+}, {}, {}>, {
+    default?(_: {
+        left: string;
+        right: string;
+        istop: boolean;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=WDropdown.vue.d.ts.map

package/dist/components/Dropdown/WDropdown.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/WDropdown.vue.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqMvD,wBAA8G;AAiB9G,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/Dropdown/WDropdown.vue.js

@@ -0,0 +1,116 @@
+import { defineComponent, ref, computed, onBeforeMount, onMounted, onBeforeUnmount, watch, toRef, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, renderSlot } from 'vue';
+import DOMListenerContainer from '../../utils/DOMListenerContainer.js';
+import { isClientSide, getAllScrollParents } from '../../utils/utils.js';
+import { horizontalGetterOrderMap, searchStyleGetter } from './utils/DropdownStyle.js';
+import { HorizontalAlign } from '../../utils/HorizontalAlign.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WDropdown",
+  props: {
+    maxHeight: {},
+    maxWidth: {},
+    horizontalAlign: {},
+    parentElement: {},
+    updateAlign: { type: Boolean },
+    emitUpdate: { type: Boolean }
+  },
+  emits: ["update:rect"],
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const dropdown = ref();
+    let parentRect = null;
+    let horizontalGetter = null;
+    let verticalGetter = null;
+    const isTop = ref(false);
+    const widthStyle = ref({});
+    const heightStyle = ref({});
+    const horizontalStyle = ref({});
+    const verticalStyle = ref({});
+    const order = computed(() => horizontalGetterOrderMap[props.horizontalAlign]);
+    const styles = computed(() => {
+      return {
+        ...widthStyle.value,
+        ...heightStyle.value,
+        ...horizontalStyle.value,
+        ...verticalStyle.value
+      };
+    });
+    const setParentRect = (updateSize = false) => {
+      const newRect = props.parentElement.getBoundingClientRect();
+      const isLeftChanged = newRect.left !== parentRect?.left;
+      const isTopChanged = newRect.top !== parentRect?.top || newRect.bottom !== parentRect?.bottom;
+      if (!horizontalGetter || isLeftChanged && props.updateAlign) {
+        horizontalGetter = searchStyleGetter(order.value, newRect, props.maxWidth);
+        if (updateSize)
+          widthStyle.value = horizontalGetter.widthStyleGetter(newRect, props.maxWidth);
+      }
+      if (!verticalGetter || isTopChanged && props.updateAlign) {
+        const order2 = horizontalGetter.verticalGetterOrder;
+        verticalGetter = searchStyleGetter(order2, newRect, props.maxHeight);
+        isTop.value = verticalGetter.isTop;
+        if (updateSize)
+          heightStyle.value = verticalGetter.heightStyleGetter(newRect, props.maxHeight);
+      }
+      if (isLeftChanged)
+        horizontalStyle.value = horizontalGetter.styleGetter(newRect);
+      if (isTopChanged)
+        verticalStyle.value = verticalGetter.styleGetter(newRect);
+      if (isLeftChanged || isTopChanged)
+        parentRect = newRect;
+    };
+    onBeforeMount(() => {
+      setParentRect(true);
+    });
+    let domListenerContainer;
+    let requestAnimationFrameId = null;
+    onMounted(() => {
+      if (!isClientSide)
+        return;
+      domListenerContainer = new DOMListenerContainer(
+        [document, window, ...getAllScrollParents(dropdown.value)],
+        ["scroll", "touchmove", "resize"],
+        () => {
+          if (requestAnimationFrameId)
+            window.cancelAnimationFrame(requestAnimationFrameId);
+          if (props.emitUpdate) {
+            emit("update:rect");
+            return;
+          }
+          requestAnimationFrameId = requestAnimationFrame(() => {
+            setParentRect();
+          });
+        }
+      );
+    });
+    onBeforeUnmount(() => {
+      domListenerContainer.destroy();
+    });
+    watch(toRef(props, "parentElement"), () => {
+      setParentRect();
+    });
+    __expose({
+      update: () => {
+        setParentRect();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "dropdown",
+        ref: dropdown,
+        style: normalizeStyle(styles.value),
+        class: normalizeClass(["fixed h-auto group/dropdown", {
+          "dropdown-top": isTop.value,
+          "w-0 flex justify-center": _ctx.horizontalAlign === unref(HorizontalAlign).CENTER
+        }])
+      }, [
+        renderSlot(_ctx.$slots, "default", {
+          left: styles.value.left,
+          right: styles.value.right,
+          istop: isTop.value
+        })
+      ], 6);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Dropdown/WDropdown.vue2.js

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

package/dist/components/Dropdown/utils/DropdownStyle.d.ts

@@ -0,0 +1,21 @@
+import { HorizontalAlign } from '../../../utils/HorizontalAlign';
+interface StyleGetter {
+    styleGetter(parentRect: DOMRect): Record<string, string>;
+    marginGetter(parentRect: DOMRect, maxHeightOrWidth: number): number;
+}
+export declare abstract class VerticalGetter implements StyleGetter {
+    abstract isTop: boolean;
+    abstract styleGetter(parentRect: DOMRect): Record<string, string>;
+    abstract marginGetter(parentRect: DOMRect, maxHeight: number): number;
+    heightStyleGetter(parentRect: DOMRect, maxHeight: number): Record<string, string>;
+}
+export declare abstract class HorizontalGetter implements StyleGetter {
+    abstract verticalGetterOrder: Array<VerticalGetter>;
+    abstract styleGetter(parentRect: DOMRect): Record<string, string>;
+    abstract marginGetter(parentRect: DOMRect, maxWidth: number): number;
+    widthStyleGetter(parentRect: DOMRect, maxWidth: number): Record<string, string>;
+}
+export declare const horizontalGetterOrderMap: Record<HorizontalAlign, HorizontalGetter[]>;
+export declare function searchStyleGetter<T extends StyleGetter>(order: Array<T>, parentRect: DOMRect, maxHeightOrWidth: number): T;
+export {};
+//# sourceMappingURL=DropdownStyle.d.ts.map

package/dist/components/Dropdown/utils/DropdownStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownStyle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/utils/DropdownStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;AAIvD,UAAU,WAAW;IACnB,WAAW,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxD,YAAY,CAAC,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,MAAM,CAAA;CACpE;AAED,8BAAsB,cAAe,YAAW,WAAW;IACzD,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IAEvB,QAAQ,CAAC,WAAW,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAEjE,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM;IAErE,iBAAiB,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;CAGlF;AAkDD,8BAAsB,gBAAiB,YAAW,WAAW;IAC3D,QAAQ,CAAC,mBAAmB,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAEnD,QAAQ,CAAC,WAAW,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAEjE,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM;IAEpE,gBAAgB,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;CAGhF;AAyFD,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,eAAe,EAAE,gBAAgB,EAAE,CAOhF,CAAA;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC,CAY1H"}

package/dist/components/Dropdown/utils/DropdownStyle.js

@@ -0,0 +1,141 @@
+import { HorizontalAlign } from '../../../utils/HorizontalAlign.js';
+
+const EDGE = 20;
+class VerticalGetter {
+  heightStyleGetter(parentRect, maxHeight) {
+    return { maxHeight: _maxHeightOrWidthGetter(this, parentRect, maxHeight) + "px" };
+  }
+}
+class BottomInner extends VerticalGetter {
+  isTop = false;
+  styleGetter(parentRect) {
+    return { top: parentRect.top + "px" };
+  }
+  marginGetter(parentRect, maxHeight) {
+    return window.innerHeight - parentRect.top - maxHeight - EDGE;
+  }
+}
+class BottomOuter extends VerticalGetter {
+  isTop = false;
+  styleGetter(parentRect) {
+    return { top: parentRect.bottom + "px" };
+  }
+  marginGetter(parentRect, maxHeight) {
+    return window.innerHeight - parentRect.bottom - maxHeight - EDGE;
+  }
+}
+class TopOuter extends VerticalGetter {
+  isTop = true;
+  styleGetter(parentRect) {
+    return { bottom: window.innerHeight - parentRect.top + "px" };
+  }
+  marginGetter(parentRect, maxHeight) {
+    return parentRect.top - maxHeight - EDGE;
+  }
+}
+class TopInner extends VerticalGetter {
+  isTop = true;
+  styleGetter(parentRect) {
+    return { bottom: window.innerHeight - parentRect.bottom + "px" };
+  }
+  marginGetter(parentRect, maxHeight) {
+    return parentRect.bottom - maxHeight - EDGE;
+  }
+}
+class HorizontalGetter {
+  widthStyleGetter(parentRect, maxWidth) {
+    return { maxWidth: _maxHeightOrWidthGetter(this, parentRect, maxWidth) + "px" };
+  }
+}
+class RightOuter extends HorizontalGetter {
+  verticalGetterOrder = [new BottomInner(), new TopInner()];
+  styleGetter(parentRect) {
+    return { left: parentRect.right + "px" };
+  }
+  marginGetter(parentRect, maxWidth) {
+    return document.documentElement.clientWidth - parentRect.right - maxWidth - EDGE;
+  }
+}
+class RightInner extends HorizontalGetter {
+  verticalGetterOrder = [new BottomOuter(), new TopOuter()];
+  styleGetter(parentRect) {
+    return { left: parentRect.left + "px" };
+  }
+  marginGetter(parentRect, maxWidth) {
+    return document.documentElement.clientWidth - parentRect.left - maxWidth - EDGE;
+  }
+}
+class Fill extends HorizontalGetter {
+  verticalGetterOrder = [new BottomOuter(), new TopOuter()];
+  styleGetter(parentRect) {
+    return {
+      left: parentRect.left + "px",
+      right: document.documentElement.clientWidth - parentRect.right + "px"
+    };
+  }
+  marginGetter() {
+    return 0;
+  }
+  widthStyleGetter(parentRect) {
+    return {};
+  }
+}
+class Center extends HorizontalGetter {
+  verticalGetterOrder = [new BottomOuter(), new TopOuter()];
+  styleGetter(parentRect) {
+    return {
+      left: parentRect.left + parentRect.width / 2 + "px"
+    };
+  }
+  marginGetter() {
+    return 0;
+  }
+  widthStyleGetter(parentRect) {
+    return {
+      width: "0px"
+    };
+  }
+}
+class LeftInner extends HorizontalGetter {
+  verticalGetterOrder = [new BottomOuter(), new TopOuter()];
+  styleGetter(parentRect) {
+    return { right: document.documentElement.clientWidth - parentRect.right + "px" };
+  }
+  marginGetter(parentRect, maxWidth) {
+    return parentRect.right - maxWidth - EDGE;
+  }
+}
+class LeftOuter extends HorizontalGetter {
+  verticalGetterOrder = [new BottomInner(), new TopInner()];
+  styleGetter(parentRect) {
+    return { right: document.documentElement.clientWidth - parentRect.left + "px" };
+  }
+  marginGetter(parentRect, maxWidth) {
+    return parentRect.left - maxWidth - EDGE;
+  }
+}
+const horizontalGetterOrderMap = {
+  [HorizontalAlign.RIGHT_OUTER]: [new RightOuter(), new LeftOuter(), new RightInner(), new LeftInner()],
+  [HorizontalAlign.RIGHT_INNER]: [new RightInner(), new LeftInner()],
+  [HorizontalAlign.FILL]: [new Fill()],
+  [HorizontalAlign.CENTER]: [new Center()],
+  [HorizontalAlign.LEFT_INNER]: [new LeftInner(), new RightInner()],
+  [HorizontalAlign.LEFT_OUTER]: [new LeftOuter(), new RightOuter(), new LeftInner(), new RightInner()]
+};
+function searchStyleGetter(order, parentRect, maxHeightOrWidth) {
+  const margins = [];
+  return order.find((item) => {
+    const margin = item.marginGetter(parentRect, maxHeightOrWidth);
+    margins.push(margin);
+    return margin >= 0;
+  }) || order[margins.indexOf(Math.max(...margins))];
+}
+function _maxHeightOrWidthGetter(getter, parentRect, maxHeightOrWidth) {
+  const margin = getter.marginGetter(parentRect, maxHeightOrWidth);
+  if (margin > 0)
+    return maxHeightOrWidth;
+  else
+    return maxHeightOrWidth + margin;
+}
+
+export { HorizontalGetter, VerticalGetter, horizontalGetterOrderMap, searchStyleGetter };

package/dist/components/DropdownMenu/WDropdownMenu.vue.d.ts

@@ -0,0 +1,72 @@
+import type { HorizontalAlign } from '../../utils/HorizontalAlign';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    isOpen: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    maxHeight: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    maxWidth: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    horizontalAlign: {
+        type: import("vue").PropType<HorizontalAlign>;
+        required: true;
+    };
+    updateAlign: {
+        type: import("vue").PropType<boolean>;
+    };
+    emitUpdate: {
+        type: import("vue").PropType<boolean>;
+    };
+    teleport: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {
+    updateDropdown: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:rect": () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    maxHeight: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    maxWidth: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    horizontalAlign: {
+        type: import("vue").PropType<HorizontalAlign>;
+        required: true;
+    };
+    updateAlign: {
+        type: import("vue").PropType<boolean>;
+    };
+    emitUpdate: {
+        type: import("vue").PropType<boolean>;
+    };
+    teleport: {
+        type: import("vue").PropType<boolean>;
+    };
+}>> & {
+    "onUpdate:rect"?: (() => any) | undefined;
+}, {}, {}>, {
+    toggle?(_: {
+        unclickable: boolean;
+    }): any;
+    content?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=WDropdownMenu.vue.d.ts.map

package/dist/components/DropdownMenu/WDropdownMenu.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WDropdownMenu.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownMenu/WDropdownMenu.vue.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsK5D,wBAA8G;AAiB9G,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/DropdownMenu/WDropdownMenu.vue.js

@@ -0,0 +1,71 @@
+import { defineComponent, ref, openBlock, createElementBlock, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, normalizeClass, createCommentVNode } from 'vue';
+import _sfc_main$1 from '../Dropdown/WDropdown.vue.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WDropdownMenu",
+  props: {
+    isOpen: { type: Boolean },
+    maxHeight: {},
+    maxWidth: {},
+    horizontalAlign: {},
+    updateAlign: { type: Boolean },
+    emitUpdate: { type: Boolean },
+    teleport: { type: Boolean }
+  },
+  emits: ["update:rect"],
+  setup(__props, { expose: __expose }) {
+    const container = ref();
+    const dropdown = ref();
+    __expose({
+      updateDropdown: () => {
+        dropdown.value?.update();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container
+      }, [
+        renderSlot(_ctx.$slots, "toggle", { unclickable: false }),
+        (openBlock(), createBlock(Teleport, {
+          to: "body",
+          disabled: !_ctx.teleport || !_ctx.isOpen
+        }, [
+          createVNode(Transition, {
+            "enter-active-class": "transition-opacity",
+            "leave-active-class": "transition-opacity",
+            "enter-from-class": "opacity-0",
+            "leave-to-class": "opacity-0"
+          }, {
+            default: withCtx(() => [
+              container.value && _ctx.isOpen ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                ref_key: "dropdown",
+                ref: dropdown,
+                "parent-element": container.value,
+                "horizontal-align": _ctx.horizontalAlign,
+                "update-align": _ctx.updateAlign,
+                "max-height": _ctx.maxHeight,
+                "max-width": _ctx.maxWidth,
+                "emit-update": _ctx.emitUpdate,
+                class: normalizeClass({
+                  "z-[2]": !_ctx.teleport,
+                  "z-30": _ctx.teleport
+                }),
+                "onUpdate:rect": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:rect"))
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "content")
+                ]),
+                _: 3
+              }, 8, ["parent-element", "horizontal-align", "update-align", "max-height", "max-width", "emit-update", "class"])) : createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 8, ["disabled"]))
+      ], 512);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/DropdownMenu/WDropdownMenu.vue2.js

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