vue-devui 1.0.0-beta.8 → 1.0.0-rc.0

package/nuxt/components/Result.js

@@ -0,0 +1,3 @@
+import '../../result/style.css' 
+
+export  { Result as default } from '../../result/index.es.js'

package/nuxt/components/Row.js

@@ -0,0 +1,3 @@
+import '../../grid/style.css' 
+
+export  { Row as default } from '../../grid/index.es.js'

package/nuxt/components/Search.js

@@ -0,0 +1,3 @@
+import '../../search/style.css' 
+
+export  { Search as default } from '../../search/index.es.js'

package/nuxt/components/Select.js

@@ -0,0 +1,3 @@
+import '../../select/style.css' 
+
+export  { Select as default } from '../../select/index.es.js'

package/nuxt/components/Skeleton.js

@@ -0,0 +1,3 @@
+import '../../skeleton/style.css' 
+
+export  { Skeleton as default } from '../../skeleton/index.es.js'

package/nuxt/components/SkeletonItem.js

@@ -0,0 +1,3 @@
+import '../../skeleton/style.css' 
+
+export  { SkeletonItem as default } from '../../skeleton/index.es.js'

package/nuxt/components/Slider.js

@@ -0,0 +1,3 @@
+import '../../slider/style.css' 
+
+export  { Slider as default } from '../../slider/index.es.js'

package/nuxt/components/Splitter.js

@@ -0,0 +1,3 @@
+import '../../splitter/style.css' 
+
+export  { Splitter as default } from '../../splitter/index.es.js'

package/nuxt/components/Statistic.js

@@ -0,0 +1,3 @@
+import '../../statistic/style.css' 
+
+export  { Statistic as default } from '../../statistic/index.es.js'

package/nuxt/components/Status.js

@@ -0,0 +1,3 @@
+import '../../status/style.css' 
+
+export  { Status as default } from '../../status/index.es.js'

package/nuxt/components/StepsGuide.js

@@ -0,0 +1,3 @@
+import '../../steps-guide/style.css' 
+
+export  { StepsGuide as default } from '../../steps-guide/index.es.js'

package/nuxt/components/StickSlider.js

@@ -0,0 +1,3 @@
+import '../../date-picker/style.css' 
+
+export  { StickSlider as default } from '../../date-picker/index.es.js'

package/nuxt/components/Sticky.js

@@ -0,0 +1,2 @@
+
+export  { Sticky as default } from '../../sticky/index.es.js'

package/nuxt/components/Switch.js

@@ -0,0 +1,3 @@
+import '../../switch/style.css' 
+
+export  { Switch as default } from '../../switch/index.es.js'

package/nuxt/components/Table.js

@@ -0,0 +1,3 @@
+import '../../table/style.css' 
+
+export  { Table as default } from '../../table/index.es.js'

package/nuxt/components/Tabs.js

@@ -0,0 +1,3 @@
+import '../../tabs/style.css' 
+
+export  { Tabs as default } from '../../tabs/index.es.js'

package/nuxt/components/Tag.js

@@ -0,0 +1,3 @@
+import '../../tag/style.css' 
+
+export  { Tag as default } from '../../tag/index.es.js'

package/nuxt/components/TagInput.js

@@ -0,0 +1,3 @@
+import '../../tag-input/style.css' 
+
+export  { TagInput as default } from '../../tag-input/index.es.js'

package/nuxt/components/Textarea.js

@@ -0,0 +1,3 @@
+import '../../textarea/style.css' 
+
+export  { Textarea as default } from '../../textarea/index.es.js'

package/nuxt/components/TimeAxis.js

@@ -0,0 +1,3 @@
+import '../../time-axis/style.css' 
+
+export  { TimeAxis as default } from '../../time-axis/index.es.js'

package/nuxt/components/TimeAxisItem.js

@@ -0,0 +1,3 @@
+import '../../time-axis/style.css' 
+
+export  { TimeAxisItem as default } from '../../time-axis/index.es.js'

package/nuxt/components/TimePicker.js

@@ -0,0 +1,3 @@
+import '../../time-picker/style.css' 
+
+export  { TimePicker as default } from '../../time-picker/index.es.js'

package/nuxt/components/Tooltip.js

@@ -0,0 +1,3 @@
+import '../../tooltip/style.css' 
+
+export  { Tooltip as default } from '../../tooltip/index.es.js'

package/nuxt/components/Transfer.js

@@ -0,0 +1,3 @@
+import '../../transfer/style.css' 
+
+export  { Transfer as default } from '../../transfer/index.es.js'

package/nuxt/components/Tree.js

@@ -0,0 +1,3 @@
+import '../../tree/style.css' 
+
+export  { Tree as default } from '../../tree/index.es.js'

package/nuxt/components/TreeSelect.js

@@ -0,0 +1,3 @@
+import '../../tree-select/style.css' 
+
+export  { TreeSelect as default } from '../../tree-select/index.es.js'

package/nuxt/components/Upload.js

@@ -0,0 +1,3 @@
+import '../../upload/style.css' 
+
+export  { Upload as default } from '../../upload/index.es.js'

package/nuxt/components/UploadStatus.js

@@ -0,0 +1,3 @@
+import '../../upload/style.css' 
+
+export  { UploadStatus as default } from '../../upload/index.es.js'

package/nuxt/components/badgeProps.js

@@ -0,0 +1,3 @@
+import '../../badge/style.css' 
+
+export  { badgeProps as default } from '../../badge/index.es.js'

package/nuxt/components/buttonProps.js

@@ -0,0 +1,3 @@
+import '../../button/style.css' 
+
+export  { buttonProps as default } from '../../button/index.es.js'

package/nuxt/components/dropdownMenuProps.js

@@ -0,0 +1,3 @@
+import '../../dropdown/style.css' 
+
+export  { dropdownMenuProps as default } from '../../dropdown/index.es.js'

package/nuxt/components/fixedOverlayProps.js

@@ -0,0 +1,3 @@
+import '../../overlay/style.css' 
+
+export  { fixedOverlayProps as default } from '../../overlay/index.es.js'

package/nuxt/components/flexibleOverlayProps.js

@@ -0,0 +1,3 @@
+import '../../overlay/style.css' 
+
+export  { flexibleOverlayProps as default } from '../../overlay/index.es.js'

package/nuxt/components/notificationProps.js

@@ -0,0 +1,3 @@
+import '../../notification/style.css' 
+
+export  { notificationProps as default } from '../../notification/index.es.js'

package/nuxt/components/overlayEmits.js

@@ -0,0 +1,3 @@
+import '../../overlay/style.css' 
+
+export  { overlayEmits as default } from '../../overlay/index.es.js'

package/nuxt/components/overlayProps.js

@@ -0,0 +1,3 @@
+import '../../overlay/style.css' 
+
+export  { overlayProps as default } from '../../overlay/index.es.js'

package/nuxt/components/popoverProps.js

@@ -0,0 +1,3 @@
+import '../../popover/style.css' 
+
+export  { popoverProps as default } from '../../popover/index.es.js'

package/nuxt/components/tooltipProps.js

@@ -0,0 +1,3 @@
+import '../../tooltip/style.css' 
+
+export  { tooltipProps as default } from '../../tooltip/index.es.js'

package/nuxt/components/uploadProps.js

@@ -0,0 +1,3 @@
+import '../../upload/style.css' 
+
+export  { uploadProps as default } from '../../upload/index.es.js'

package/nuxt/index.js

@@ -0,0 +1,13 @@
+import { join } from 'pathe'
+  import { defineNuxtModule } from '@nuxt/kit'
+  
+  export default defineNuxtModule({
+    hooks: {
+      'components:dirs'(dirs) {
+        dirs.push({
+          path: join(__dirname,'./components'),
+          prefix:'D'
+        })
+      }
+    }
+  })

package/overlay/index.es.js

@@ -17,7 +17,8 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, withDirectives, vShow, ref, reactive, toRef, isRef } from "vue";
+import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, nextTick, unref, mergeProps } from "vue";
+import { offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
 var overlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -42,9 +43,6 @@ const overlayProps = {
   visible: {
     type: Boolean
   },
-  "onUpdate:visible": {
-    type: Function
-  },
   backgroundBlock: {
     type: Boolean,
     default: false
@@ -68,29 +66,44 @@ const overlayProps = {
     default: true
   }
 };
-const overlayEmits = ["onUpdate:visible", "backdropClick"];
+const overlayEmits = ["update:visible", "backdropClick"];
 const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
   overlayStyle: {
     type: [String, Object],
     default: void 0
   }
 });
-const flexibleOverlayProps = __spreadValues({
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
   origin: {
     type: Object,
     require: true
   },
   position: {
-    type: Object,
-    default: () => ({
-      originX: "left",
-      originY: "top",
-      overlayX: "left",
-      overlayY: "top"
-    })
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
   }
-}, overlayProps);
-function useOverlayLogic(props) {
+};
+function useOverlayLogic(props, ctx) {
   const backgroundClass = computed(() => {
     return [
       "devui-overlay-background",
@@ -102,11 +115,11 @@ function useOverlayLogic(props) {
     return "devui-overlay";
   });
   const handleBackdropClick = (event) => {
-    var _a, _b;
+    var _a;
     event.preventDefault();
     (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
     if (props.backdropClose) {
-      (_b = props["onUpdate:visible"]) == null ? void 0 : _b.call(props, false);
+      ctx.emit("update:visible", false);
     }
   };
   const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
@@ -150,9 +163,9 @@ const FixedOverlay = defineComponent({
       overlayClass,
       handleBackdropClick,
       handleOverlayBubbleCancel
-    } = useOverlayLogic(props);
+    } = useOverlayLogic(props, ctx);
     return () => createVNode(CommonOverlay, null, {
-      default: () => [withDirectives(createVNode("div", {
+      default: () => [props.visible && createVNode("div", {
         "class": backgroundClass.value,
         "style": props.backgroundStyle,
         "onClick": handleBackdropClick
@@ -160,203 +173,134 @@ const FixedOverlay = defineComponent({
         "class": overlayClass.value,
         "style": props.overlayStyle,
         "onClick": handleOverlayBubbleCancel
-      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
+      }, [renderSlot(ctx.slots, "default")])])]
     });
   }
 });
-function isComponent(target) {
-  return !!(target == null ? void 0 : target.$el);
-}
-function getElement(element) {
-  if (element instanceof Element) {
-    return element;
+function getScrollParent(element) {
+  const overflowRegex = /(auto|scroll|hidden)/;
+  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
+      return parent;
+    }
   }
-  if (element && typeof element === "object" && element.$el instanceof Element) {
-    return element.$el;
+  return window;
+}
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
+    }
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
+    }
+    if (y && placement.includes("start")) {
+      y = 10;
+    }
+    if (y && placement.includes("end")) {
+      y = height - 14;
+    }
   }
-  return null;
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
+    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[placement.split("-")[0]];
+    Object.assign(arrowEl.style, {
+      left: x ? `${x}px` : "",
+      top: y ? `${y}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide]: "-4px"
+    });
+  };
+  const updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
+    });
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  };
+  watch(() => props.modelValue, () => {
+    const originParent = getScrollParent(props.origin);
+    if (props.modelValue && props.origin) {
+      nextTick(updatePosition);
+      originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      originParent.removeEventListener("scroll", updatePosition);
+      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    }
+  });
+  onUnmounted(() => {
+    const originParent = getScrollParent(props.origin);
+    originParent.removeEventListener("scroll", updatePosition);
+    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef };
 }
+var flexibleOverlay = "";
 const FlexibleOverlay = defineComponent({
   name: "DFlexibleOverlay",
+  inheritAttrs: false,
   props: flexibleOverlayProps,
-  emits: overlayEmits,
-  setup(props, ctx) {
-    const overlayRef = ref(null);
-    const positionedStyle = reactive({
-      position: "absolute"
-    });
-    onMounted(async () => {
-      const handleRectChange = (position, rect, origin) => {
-        const point = calculatePosition(position, rect, origin);
-        positionedStyle.left = `${point.x}px`;
-        positionedStyle.top = `${point.y}px`;
-      };
-      const locationElements = computed(() => {
-        const overlay2 = overlayRef.value;
-        const origin = getOrigin(props.origin);
-        if (!overlay2 || !origin) {
-          return;
-        }
-        return {
-          origin,
-          overlay: overlay2
-        };
-      });
-      const visibleRef = toRef(props, "visible");
-      const positionRef = toRef(props, "position");
-      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
-        if (!visible || !locationElements2) {
-          return;
-        }
-        const {
-          origin,
-          overlay: overlay2
-        } = locationElements2;
-        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
-        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
-        onInvalidate(() => {
-          unsubscriptions.forEach((fn) => fn());
-        });
-      });
-    });
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
     const {
-      backgroundClass,
-      overlayClass,
-      handleBackdropClick,
-      handleOverlayBubbleCancel
-    } = useOverlayLogic(props);
-    return () => createVNode(CommonOverlay, null, {
-      default: () => [withDirectives(createVNode("div", {
-        "style": props.backgroundStyle,
-        "class": backgroundClass.value,
-        "onClick": handleBackdropClick
-      }, [createVNode("div", {
+      arrowRef,
+      overlayRef
+    } = useOverlay(props, emit);
+    return () => {
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
-        "class": overlayClass.value,
-        "style": positionedStyle,
-        "onClick": handleOverlayBubbleCancel
-      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
-    });
+        "class": "devui-flexible-overlay"
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": "devui-flexible-overlay-arrow"
+      }, null)]);
+    };
   }
 });
-function getOrigin(origin) {
-  if (origin instanceof Element) {
-    return origin;
-  }
-  if (isRef(origin)) {
-    return getElement(origin.value);
-  }
-  if (isComponent(origin)) {
-    return getElement(origin);
-  }
-  return origin;
-}
-function calculatePosition(position, rect, origin) {
-  const originRect = getOriginRect(origin);
-  const originPoint = getOriginRelativePoint(originRect, position);
-  return getOverlayPoint(originPoint, rect, position);
-}
-function getOriginRect(origin) {
-  if (origin instanceof Element) {
-    return origin.getBoundingClientRect();
-  }
-  const width = origin.width || 0;
-  const height = origin.height || 0;
-  return {
-    top: origin.y,
-    bottom: origin.y + height,
-    left: origin.x,
-    right: origin.x + width,
-    height,
-    width
-  };
-}
-function getOverlayPoint(originPoint, rect, position) {
-  let x;
-  const {
-    width,
-    height
-  } = rect;
-  if (position.overlayX == "center") {
-    x = originPoint.x - width / 2;
-  } else {
-    x = position.overlayX == "left" ? originPoint.x : originPoint.x - width;
-  }
-  let y;
-  if (position.overlayY == "center") {
-    y = originPoint.y - height / 2;
-  } else {
-    y = position.overlayY == "top" ? originPoint.y : originPoint.y - height;
-  }
-  return {
-    x,
-    y
-  };
-}
-function getOriginRelativePoint(originRect, position) {
-  let x;
-  if (position.originX == "center") {
-    x = originRect.left + originRect.width / 2;
-  } else {
-    const startX = originRect.left;
-    const endX = originRect.right;
-    x = position.originX == "left" ? startX : endX;
-  }
-  let y;
-  if (position.originY == "center") {
-    y = originRect.top + originRect.height / 2;
-  } else {
-    y = position.originY == "top" ? originRect.top : originRect.bottom;
-  }
-  return {
-    x,
-    y
-  };
-}
-function subscribeLayoutEvent(event) {
-  window.addEventListener("scroll", event, true);
-  window.addEventListener("resize", event);
-  window.addEventListener("orientationchange", event);
-  return () => {
-    window.removeEventListener("scroll", event, true);
-    window.removeEventListener("resize", event);
-    window.removeEventListener("orientationchange", event);
-  };
-}
-function subscribeOverlayResize(overlay2, callback) {
-  if (overlay2 instanceof Element) {
-    const resizeObserver = new ResizeObserver(callback);
-    resizeObserver.observe(overlay2);
-    return () => resizeObserver.disconnect();
-  }
-  return () => {
-  };
-}
-function subscribeOriginResize(origin, callback) {
-  if (origin instanceof Element) {
-    const observer = new MutationObserver(callback);
-    observer.observe(origin, {
-      attributeFilter: ["style"]
-    });
-    return () => observer.disconnect();
-  }
-  return () => {
-  };
-}
 const inBrowser = typeof window !== "undefined";
-FlexibleOverlay.install = function(app) {
-  app.component(FlexibleOverlay.name, FlexibleOverlay);
-};
-FixedOverlay.install = function(app) {
-  app.component(FixedOverlay.name, FixedOverlay);
-};
 var index = {
   title: "Overlay \u906E\u7F69\u5C42",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(FixedOverlay);
-    app.use(FlexibleOverlay);
+    app.component(FixedOverlay.name, FixedOverlay);
+    app.component(FlexibleOverlay.name, FlexibleOverlay);
     if (inBrowser && !document.getElementById("d-overlay-anchor")) {
       const overlayAnchor = document.createElement("div");
       overlayAnchor.setAttribute("id", "d-overlay-anchor");
@@ -368,4 +312,4 @@ var index = {
     }
   }
 };
-export { FixedOverlay, FlexibleOverlay, index as default };
+export { FixedOverlay, FlexibleOverlay, index as default, fixedOverlayProps, flexibleOverlayProps, overlayEmits, overlayProps };