vdesign-ui 0.2.6 → 0.2.7

package/dist/components/overlay/index.vue

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

@@ -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,67 @@
+<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

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

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

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

@@ -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,100 @@
+<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>