vdesign-ui 0.1.18 → 0.1.19

package/dist/components/overlay/index.vue

@@ -1,161 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-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

@@ -1,60 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-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

@@ -1,99 +0,0 @@
-<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>