vdesign-ui 0.2.5 → 0.2.6

package/dist/components/overlay/index.vue

@@ -1,184 +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>
-import { inBrowser } from '../utils/env';
-
-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
-    },
-    // 去掉了HTMLElement类型，改为Object类型
-    mountNode: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      visible: this.value,
-      mounted: false,
-      targetNode: null
-    };
-  },
-  mounted() {
-    if (inBrowser) {
-      this.targetNode = this.getMountNode();
-      if (this.value) {
-        this.showOverlay();
-      }
-    }
-    // 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;
-    //   }
-    // },
-    getMountNode() {
-      if (inBrowser) {
-        // 在客户端渲染时检查并返回 mountNode
-        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 document.body; // 默认挂载到 body
-        }
-      }
-      // 在服务端渲染时返回 null 或适当的替代值
-      return null;
-    },
-    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,67 +0,0 @@
-<template>
-  <div class="vd-page-break">
-    <template v-if="drop === 'dropdot'">
-      <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-if="drop === 'dropnum'">
-      <span class="vd-page-break__number--active" v-if="number">{{ 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: {
-    drop: {
-      type: String,
-      default: 'dropdot'
-    },
-    totalPages: {
-      type: Number,
-      default: 5
-    },
-    activePage: {
-      type: Number,
-      default: 1 // 默认显示第一页
-    },
-    total: {
-      type: Number,
-      default: 9
-    },
-    number: {
-      type: Number,
-      default: 1
-    },
-
-  },
-  data() {
-    return {
-      currentPage: this.activePage // 从外部传入的值初始化,
-    }
-  },
-  watch: {
-    activePage(newVal) {
-      this.currentPage = newVal; // 外部传入值变化时更新当前页
-    }
-  },
-  methods: {
-    changePage(pageNumber) {
-      if (pageNumber >= 1 && pageNumber <= this.totalPages) {
-        this.currentPage = pageNumber;
-        this.$emit('change', pageNumber);
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/pagebreak/style.less

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

package/dist/components/password/index.js

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

package/dist/components/password/index.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="vd-password">
-    <input type="tel" :maxlength="length" v-model="innerValue" @input="handleInput" @focus="handleFocus"
-      @blur="handleBlur" class="vd-password__input" />
-    <div class="vd-password__security">
-      <div class="vd-password__item" v-for="n in length" :key="n" :class="{ 'vd-password-is-filled': n === innerValue.length + 1 }">
-        <template v-if="mask">
-          <i v-if="n <= innerValue.length" class="mask-icon"></i>
-        </template>
-        <template v-else>
-          {{ innerValue[n - 1] }}
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "vd-password",
-  props: {
-    value: {
-      type: String,
-    },
-    length: {
-      type: Number,
-      default: 6,
-    },
-    mask: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      innerValue: this.value,
-    };
-  },
-  watch: {
-    value(val) {
-      this.innerValue = val;
-    },
-  },
-  methods: {
-    handleInput(e) {
-      this.innerValue = e.target.value.slice(0, this.length);
-      this.$emit("input", this.innerValue);
-      if (this.innerValue.length === this.length) {
-        this.$emit("complete", this.innerValue);
-      }
-    },
-    handleFocus() {
-      this.$emit("focus");
-    },
-    handleBlur() {
-      this.$emit("blur");
-    },
-  },
-};
-</script>

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,100 +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 VdIcon from '../icon';
-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,VdIcon }, // 注册并使用 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>