double-ui-vue/es/drawer/index.js

基于vue框架的ui库

import { openBlock, createElementBlock, createElementVNode, defineComponent, createVNode, reactive, ref, getCurrentInstance, watch, onMounted, onBeforeUnmount, Transition, withDirectives, createTextVNode, vShow } from "vue";
var style$1 = "";
const _hoisted_1 = {
  viewBox: "0 0 16 16",
  xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
  d: "m8.027 7.074 5.387-5.388 1.078 1.078L9.104 8.15l5.388 5.388-1.078 1.077L8.027 9.23l-5.388 5.387-1.077-1.077L6.949 8.15 1.562 2.764l1.077-1.078 5.388 5.388Z",
  class: "svg-fill-grey-500"
}, null, -1);
const _hoisted_3 = [
  _hoisted_2
];
function render(_ctx, _cache) {
  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
}
var IconClose = { render };
var style = "";
const MiniLoading = defineComponent({
  name: "MiniLoading",
  props: {
    color: {
      type: String,
      default: "#fff"
    }
  },
  setup(props) {
    return () => createVNode("div", {
      "class": "d-min-loading"
    }, [createVNode("svg", {
      "class": "d-min-loading-line",
      "viewBox": "0 0 16 16",
      "xmlns": "http://www.w3.org/2000/svg"
    }, [createVNode("path", {
      "d": "M9,1 A7,7 0 0,1 15,7",
      "fill": "none",
      "stroke-width": "1",
      "stroke": props.color
    }, null)])]);
  }
});
const Drawer = defineComponent({
  name: "DDrawer",
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    focus: {
      type: Boolean,
      default: false
    },
    bottom: {
      type: Boolean,
      default: false
    },
    loadingMore: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    top: {
      type: [String, Number],
      default: ""
    },
    componentId: {
      type: String,
      default: ""
    },
    onClose: {
      type: Function,
      default: () => {
      }
    },
    onGetMore: {
      type: Function,
      default: () => {
      }
    }
  },
  setup(props, {
    emit,
    slots
  }) {
    const state = reactive({
      autoClose: false,
      scrollTop: 0,
      tabIndex: -1,
      clientWidth: 0,
      clientHeight: 0
    });
    const drawerBox = ref(null);
    const {
      proxy
    } = getCurrentInstance();
    watch(() => props.focus, (n, o) => {
      if (n === o)
        return;
      state.autoClose = n;
    }, {
      immediate: true
    });
    const onClose = () => {
      emit("close", false);
    };
    const checkPointer = (e) => {
      const {
        focus,
        show
      } = props;
      if (!focus || !show)
        return;
      if (!proxy.$el.contains(e.target))
        onClose();
    };
    onMounted(() => {
      window.addEventListener("click", checkPointer, true);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("click", checkPointer);
    });
    const contentScroll = (e) => {
      if (props.loadingMore)
        return;
      const target = e.target;
      const {
        scrollTop,
        scrollHeight
      } = target;
      const h = target.getBoundingClientRect().height;
      if (scrollTop + h === scrollHeight) {
        emit("getMore");
      }
    };
    return () => {
      const {
        show,
        top,
        componentId,
        bottom,
        loadingMore,
        loading
      } = props;
      return createVNode(Transition, {
        "name": "slideRightLeft"
      }, {
        default: () => [withDirectives(createVNode("div", {
          "class": "d-drawer-box"
        }, [createVNode("div", {
          "ref": drawerBox,
          "class": "d-drawer",
          "style": {
            top: `${top}px`,
            height: `calc(100% - ${top}px)`
          }
        }, [createVNode("div", {
          "class": "d-drawer-title"
        }, [createVNode("section", {
          "class": "d-drawer-title-content"
        }, [slots == null ? void 0 : slots.title()]), createVNode("i", {
          "class": "d-drawer-title-icon",
          "onClick": onClose
        }, [createVNode(IconClose, null, null)])]), createVNode("div", {
          "id": componentId,
          "class": ["d-drawer-content", bottom && "d-drawer-content-bottom"],
          "onScroll": contentScroll
        }, [slots == null ? void 0 : slots.content(), loadingMore && createVNode("section", {
          "class": "d-drawer-content-loading"
        }, [createVNode(MiniLoading, {
          "class": "d-loading16px-drawer"
        }, null), createVNode("span", null, [createTextVNode("\u52A0\u8F7D\u4E2D...")])])]), slots.handle && createVNode("div", {
          "class": ["d-drawer-handle", bottom && "d-drawer-handle-bottom"]
        }, [slots.handle()]), loading && createVNode("div", {
          "class": "d-drawer-loading"
        }, [createVNode("section", {
          "class": "d-drawer-loading-svg"
        }, [createVNode(MiniLoading, {
          "color": "#c3c7cb"
        }, null)])])])]), [[vShow, show]])]
      });
    };
  }
});
export { Drawer as default };