vdesign-ui 0.1.21 → 0.1.23

package/dist/components/overlay/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <transition name="vd-overlay-fade">
+    <div v-show="visible" :class="classes" :style="computedStyle" @click.stop="onClick">
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "vd-overlay",
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 1000
+    },
+    duration: {
+      type: [Number, String],
+      default: 0.3
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    overlayClass: {
+      type: String,
+      default: ''
+    },
+    overlayStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    },
+    mountNode: {
+      type: [Object, HTMLElement],
+      default: null
+    }
+  },
+  data() {
+    return {
+      visible: this.value,
+      mounted: false,
+      targetNode: null
+    };
+  },
+  mounted() {
+    this.targetNode = this.getMountNode();
+    if (this.value) {
+      this.showOverlay();
+    }
+  },
+  beforeUnmount() {
+    this.hideOverlay();
+  },
+  watch: {
+    value(newValue) {
+      if (newValue !== this.visible) {
+        this.visible = newValue;
+        if (newValue) {
+          this.showOverlay();
+        } else {
+          this.hideOverlay();
+        }
+        this.updateComputedZIndex();
+      }
+    },
+    mountNode(newNode, oldNode) {
+      if (newNode !== oldNode) {
+        this.targetNode = newNode || this.getMountNode();
+        if (this.visible) {
+          this.showOverlay();
+        }
+      }
+    }
+  },
+  computed: {
+    computedStyle() {
+      return {
+        transitionDuration: `${this.duration}s`,
+        zIndex: this.computedZIndex,
+        ...this.overlayStyle
+      };
+    },
+    computedZIndex() {
+      return this.isNested() ? this.zIndex + 1 : this.zIndex;
+    },
+    classes() {
+      return {
+        'vd-overlay': true,
+        [this.overlayClass]: this.overlayClass
+      };
+    }
+  },
+  methods: {
+    onClick() {
+      if (this.closeOnClickOverlay) {
+        this.$emit('input', false);
+      }
+    },
+    showOverlay() {
+      this.$nextTick(() => {
+        const targetNode = this.getMountNode();
+        // 检查组件是否已经挂载到正确的目标节点上
+        if (this.$el.parentNode !== targetNode) {
+          targetNode.appendChild(this.$el);
+        }
+        // 更新标志位
+        this.mounted = true;
+        this.visible = true;
+        // 执行锁定操作
+        this.lock();
+      });
+    },
+    hideOverlay() {
+      this.$nextTick(() => {
+        this.visible = false;
+        this.unlock();
+      });
+    },
+    getMountNode() {
+      if (this.mountNode instanceof HTMLElement) {
+        return this.mountNode;
+      } else if (typeof this.mountNode === 'object' && this.mountNode !== null && this.mountNode.$el instanceof HTMLElement) {
+        return this.mountNode.$el;
+      } else {
+        // 返回当前组件的父节点，确保嵌套时能够正确挂载
+        return this.$el.parentNode || document.body;
+      }
+    },
+    lock() {
+      if (this.lockScroll) {
+        document.body.classList.add('vd-overlay-hidden');
+      }
+    },
+    unlock() {
+      if (this.lockScroll && !this.value) {
+        document.body.classList.remove('vd-overlay-hidden');
+      }
+    },
+    isNested() {
+      return this.$parent && this.$parent.$options.name === 'vd-overlay';
+    },
+    updateComputedZIndex() {
+      this.$nextTick(() => {
+        this.computedZIndex;
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/overlay/style.less

@@ -0,0 +1,23 @@
+.vd-overlay-fade-enter-active,
+.vd-overlay-fade-leave-active {
+  transition-property: opacity;
+  transition-timing-function: ease;
+}
+
+.vd-overlay-fade-enter,
+.vd-overlay-fade-leave-to {
+  opacity: 0;
+}
+
+.vd-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-dialog-mask_bg);
+}
+
+.vd-overflow-hidden {
+  overflow: hidden !important;
+}

package/dist/components/pagebreak/index.js

@@ -0,0 +1,7 @@
+import PageBreak from './index.vue';
+import './style.less';
+PageBreak.install = function(Vue) {
+    Vue.component(PageBreak.name, PageBreak)
+}
+
+export default PageBreak;

package/dist/components/pagebreak/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="vd-page-break">
+    <template v-if="drop">
+      <div v-for="pageNumber in totalPages" class="vd-page-break__cell"
+        :class="{ 'vd-page-break__cell--active': pageNumber === currentPage }" :key="pageNumber"
+        @click="changePage(pageNumber)">
+      </div>
+    </template>
+
+    <div class="vd-page-break__number" v-else>
+      <span class="vd-page-break__number--active" v-html="number"></span>
+      <span class="vd-page-break__number--line">/</span>
+      <span class="vd-page-break__number--total">{{ total }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'vd-page-break',
+  props: {
+    totalPages: {
+      type: Number,
+      default: 5
+    },
+    drop: {
+      type: Boolean,
+      default: true
+    },
+    number: {
+      type: Number,
+      default: 1
+    },
+    total: {
+      type: Number,
+      default: 9
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+    }
+  },
+  computed: {
+
+  },
+  methods: {
+    changePage(pageNumber) {
+      if (pageNumber >= 1 && pageNumber <= this.totalPages) {
+        this.currentPage = pageNumber;
+        this.$emit('page-changed', pageNumber);
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/pagebreak/style.less

@@ -0,0 +1,43 @@
+@pagebreak-prefix-cls: vd-page-break;
+
+
+.@{pagebreak-prefix-cls}{
+    display: inline-flex;
+    gap: calc(var(--spacing-pagebreak-drop-margin_right) * 1px);
+    &__cell{
+        cursor: pointer;
+        width: calc(var(--width-pagebreak-drop) * 1px);
+        height: calc(var(--height-pagebreak-drop) * 1px);
+        background-color: var(--color-pagebreak-drop-default);
+        border-radius: calc(var(--radius-pagebreak-drop) * 1px);
+
+        &--active{
+            background-color: var(--color-pagebreak-drop-active);
+        }
+    }
+
+
+    &__number{
+        display: flex;
+        align-items: center;
+        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+        padding: calc(var(--spacing-pagebreak-number-padding_x) * 1px) calc(var(--spacing-pagebreak-number-padding_y) * 1px);
+        border-radius: calc(var(--radius-pagebreak-number_bg) * 1px);
+        background-color: var(--color-pagebreak-number-bg);
+
+        &--total{
+            color: var(--color-pagebreak-number-text-default);
+        }
+
+        &--active{
+            color: var(--color-pagebreak-number-text-active);
+        }
+
+        &--line{
+            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-pagebreak-number-text-default); 
+        }
+    }
+}

package/dist/components/popover/index.js

@@ -0,0 +1,8 @@
+import Popover from './index.vue';
+import './style.less';
+
+Popover.install = function (Vue) {
+  Vue.component(Popover.name, Popover);
+};
+
+export default Popover;

package/dist/components/popover/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <popper :appendToBody="true" trigger="click" :visibleArrow="true" :options="{
+    placement: placement,
+    modifiers: {
+      offset: {
+        offset: 0,
+      },
+      computeStyle: {
+        gpuAcceleration: false,
+      },
+      preventOverflow: {
+        boundariesElement: 'window',
+      },
+    },
+  }" rootClass="vd-popover" transition="vd-popover-fade" :disabled="disabled" ref="close">
+    <!-- 内容过多的时候，建议使用content插槽，便于自定义样式 -->
+    <div v-if="hasSlot" :class="'vd-popover-' + theme" ref="popperRef" class="vd-popper">
+      <slot name="content"></slot>
+      <vd-icon name="icon_btn_close" v-if="closeable" class="vd-popover-close" @click="$_close"></vd-icon>
+      <div class="vd-popover-close--hot" v-if="closeable" @click="$_close"></div>
+    </div>
+    <!-- 内容少的话，直接content属性 -->
+    <div v-else :class="'vd-popover-' + theme" ref="popperRef" class="vd-popper">
+      {{ content }}
+      <!-- <a v-if="closeable" class="vd-popover-close" href="javascript:;" @click="$_close">&#10005;</a> -->
+      <vd-icon name="icon_btn_close" v-if="closeable" class="vd-popover-close"></vd-icon>
+      <div class="vd-popover-close--hot" v-if="closeable" @click="$_close"></div>
+    </div>
+    <!-- 把外界传递的普通插槽当做具名插槽传递给子组件使用 -->
+    <slot slot="reference"></slot>
+  </popper>
+</template>
+
+<script>
+import popper from "./vue-popover";
+// 总共12个位置
+const placementArr = [
+  "top-start",
+  "top",
+  "top-end",
+  "left-start",
+  "left",
+  "left-end",
+  "right-start",
+  "right",
+  "right-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end",
+];
+export default {
+  name: "vd-popover",
+  components: { popper }, // 注册并使用 vue-popperjs 插件组件
+  props: {
+    // 12个位置
+    placement: {
+      type: String,
+      default: 'top', // 默认
+      validator(val) {
+        return placementArr.includes(val); // 位置校验函数
+      },
+    },
+    // 内容
+    content: {
+      type: String,
+      default: "",
+    },
+    // 切换模式，默认是 primary 模式 
+    theme: {
+      type: String,
+      default: "primary", // secondary
+    },
+    // 是否禁用即关掉
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // closeable
+    closeable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    hasSlot() {
+      return Boolean(this.$slots.content)
+    }
+  },
+  methods: {
+    $_close() {
+      this.$refs.close.doClose()
+      // popper.methods.handleDocumentClick 拦截该事件
+    }
+  },
+};
+</script>
+<style lang="less">
+@import './style.less';
+</style>