vdesign-ui 0.2.6 → 0.2.8

package/dist/components/popover/style.less

@@ -0,0 +1,346 @@
+@prefix: ~"vd-popover";
+
+// == 默认的 vue-popover 样式
+.vd-popper {
+  width: auto;
+  background-color: #fafafa;
+  color: #212121;
+  text-align: center;
+  padding: 2px;
+  display: inline-block;
+  border-radius: 3px;
+  position: absolute;
+  font-size: 14px;
+  font-weight: normal;
+  border: 1px #ebebeb solid;
+  z-index: 20000;
+  box-shadow: rgb(58, 58, 58) 0 0 6px 0;
+}
+
+.vd-popper .vd-popper__arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+}
+
+.vd-popper[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+
+.vd-popper[x-placement^="top"] .vd-popper__arrow {
+  border-width: 5px 5px 0 5px;
+  border-color: #fafafa transparent transparent transparent;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.vd-popper[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.vd-popper[x-placement^="bottom"] .vd-popper__arrow {
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #fafafa transparent;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.vd-popper[x-placement^="right"] {
+  margin-left: 5px;
+}
+
+.vd-popper[x-placement^="right"] .vd-popper__arrow {
+  border-width: 5px 5px 5px 0;
+  border-color: transparent #fafafa transparent transparent;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.vd-popper[x-placement^="left"] {
+  margin-right: 5px;
+}
+
+.vd-popper[x-placement^="left"] .vd-popper__arrow {
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent #fafafa;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// ===
+
+.@{prefix} {
+
+  // 覆盖部分默认的样式
+  .vd-popper {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    white-space: nowrap;
+    padding-inline-start: var(--spacing-popover-primary-padding_left);
+    padding-inline-end: var(--spacing-popover-primary-padding_right);
+    height: var(--height-popover-primary);
+    font-size: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+    color: var(--color-popover-primary-text);
+    background-color: var(--color-popover-primary-bg);
+    border-radius: var(--radius-popover-primary);
+    border: none;
+    box-shadow: none;
+    animation: vd-ani-popper 0.2s linear forwards;
+}
+
+  &-icon {
+
+    &.vd-iconfont {
+      color: inherit;
+      outline: none;
+      border: none;
+      background: none;
+      font-size: var(--icon-popover-primary);
+      margin-inline-end: var(--spacing-popover-primary-margin_y);
+    }
+  }
+
+  &-close {
+
+    &.vd-iconfont {
+      color: var(--color-popover-primary-text);
+      outline: none;
+      border: none;
+      background: none;
+      font-size: var(--icon-popover-primary);
+      margin-inline-start: var(--spacing-popover-primary-margin_y);
+    }
+
+    &--hot {
+      position: absolute;
+      inset-inline-end: 0;
+      height: var(--height-popover-primary);
+      width: calc(var(--height-popover-primary) * 1.2);
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+  }
+
+  .vd-popper__arrow {
+    display: block;
+    background-color: var(--color-popover-primary-bg);
+    width: 12px;
+    height: 12px;
+    // border-radius: 4px;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  // 设置一个 popper 的外边距
+  .vd-popper[x-placement^="top"] {
+    margin-bottom: calc(var(--icon-popover-primary) * .5) !important;
+  }
+
+  .vd-popper[x-placement^="bottom"] {
+    margin-top: calc(var(--icon-popover-primary) * .5) !important;
+  }
+
+  .vd-popper[x-placement^="left"] {
+    margin-right: calc(var(--icon-popover-primary) * .5) !important;
+  }
+
+  .vd-popper[x-placement^="right"] {
+    margin-left: calc(var(--icon-popover-primary) * .5) !important;
+  }
+
+  // 覆盖原有的默认三角形背景色样式
+  .vd-popper[x-placement^="top"] .vd-popper__arrow {
+    bottom: -4px;
+    border-color: var(--color-popover-primary-bg) transparent transparent transparent;
+  }
+
+  .vd-popper[x-placement^="bottom"] .vd-popper__arrow {
+    top: -4px;
+    border-color: transparent transparent var(--color-popover-primary-bg) transparent;
+    // transform: rotate(180deg);
+  }
+
+  .vd-popper[x-placement^="right"] .vd-popper__arrow {
+    border-color: transparent var(--color-popover-primary-bg) transparent transparent;
+    // transform: rotate(90deg);
+    left: -4px;
+  }
+
+  .vd-popper[x-placement^="left"] .vd-popper__arrow {
+    border-color: transparent transparent transparent var(--color-popover-primary-bg);
+    // transform: rotate(-90deg);
+    right: -4px;
+  }
+
+  // 加上过渡效果
+  .vd-popover-fade-enter,
+  .vd-popover-fade-leave-to {
+    opacity: 0;
+  }
+
+  .vd-popover-fade-enter-active,
+  .vd-popover-fade-leave-active {
+    transition: opacity 0.3s;
+  }
+
+  // secondary 模式样式
+  .vd-popover-secondary {
+    font-size: var(--en-single-f-b-r-fontSize);
+    font-weight: var(--en-single-f-b-r-fontWeight);
+    padding-inline-start: var(--spacing-popover-secondary-padding_left);
+    padding-inline-end: var(--spacing-popover-secondary-padding_right);
+    height: var(--height-popover-secondary);
+    color: var(--color-popover-secondary-text);
+    background-color: var(--color-popover-secondary-bg);
+    border-radius: var(--radius-popover-secondary);    
+
+    &[x-placement^="top"] .vd-popper__arrow {
+      border-color: var(--color-popover-secondary-bg) transparent transparent transparent;
+    }
+
+    &[x-placement^="bottom"] .vd-popper__arrow {
+      border-color: transparent transparent var(--color-popover-secondary-bg) transparent;
+    }
+
+    &[x-placement^="right"] .vd-popper__arrow {
+      border-color: transparent var(--color-popover-secondary-bg) transparent transparent;
+    }
+
+    &[x-placement^="left"] .vd-popper__arrow {
+      border-color: transparent transparent transparent var(--color-popover-secondary-bg);
+    }
+
+    .vd-popover-icon {
+
+      &.vd-iconfont {
+        margin-block-end: -2px;
+        color: inherit;
+        outline: none;
+        border: none;
+        background: none;
+        font-size: var(--icon-popover-secondary);
+        margin-inline-end: var(--spacing-popover-secondary-margin_y);
+        margin-block-start: -1px;
+      }
+    }
+
+    .vd-popover-close {
+
+      &.vd-iconfont {
+        margin-block-end: -2px;
+        color: var(--color-popover-secondary-text);
+        outline: none;
+        border: none;
+        background: none;
+        font-size: var(--icon-popover-secondary);
+        margin-inline-start: var(--spacing-popover-secondary-margin_y);
+        margin-block-start: -1px;
+      }
+
+      &--hot {
+        position: absolute;
+        inset-inline-end: 0;
+        height: var(--height-popover-secondary);
+        width: calc(var(--height-popover-secondary) * 1.2);
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+    }
+
+    .vd-popper__arrow {
+      background-color: var(--color-popover-secondary-bg);
+    }
+  }
+
+  // custom 模式样式
+  .vd-popover-custom {
+    font-size: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+    padding-inline-start: var(--spacing-popover-custom-padding_left);
+    padding-inline-end: var(--spacing-popover-custom-padding_right);
+    height: var(--height-popover-custom);
+    color: var(--color-popover-custom-text);
+    background-color: var(--color-popover-custom-bg);
+    border-radius: var(--radius-popover-custom);    
+
+    &[x-placement^="top"] .vd-popper__arrow {
+      border-color: var(--color-popover-custom-bg) transparent transparent transparent;
+    }
+
+    &[x-placement^="bottom"] .vd-popper__arrow {
+      border-color: transparent transparent var(--color-popover-custom-bg) transparent;
+    }
+
+    &[x-placement^="right"] .vd-popper__arrow {
+      border-color: transparent var(--color-popover-custom-bg) transparent transparent;
+    }
+
+    &[x-placement^="left"] .vd-popper__arrow {
+      border-color: transparent transparent transparent var(--color-popover-custom-bg);
+    }
+
+    .vd-popover-icon {
+
+      &.vd-iconfont {
+        color: inherit;
+        outline: none;
+        border: none;
+        background: none;
+        font-size: var(--icon-popover-custom);
+        margin-inline-end: var(--spacing-popover-custom-margin_y);
+      }
+    }
+
+    .vd-popover-close {
+
+      &.vd-iconfont {
+        color: var(--color-popover-custom-text);
+        outline: none;
+        border: none;
+        background: none;
+        font-size: var(--icon-popover-custom);
+        margin-inline-start: var(--spacing-popover-custom-margin_y);
+      }
+
+      &--hot {
+        position: absolute;
+        inset-inline-end: 0;
+        height: var(--height-popover-custom);
+        width: calc(var(--height-popover-custom) * 1.2);
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+    }
+
+    .vd-popper__arrow {
+      background-color: var(--color-popover-custom-bg);
+    }
+  }
+}
+
+@keyframes vd-ani-popper {
+  0% {
+    opacity: 0;
+    transform: scale(.5);
+  }
+
+  80% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/components/popover/vue-popover.vue

@@ -0,0 +1,314 @@
+<template>
+  <component :is="tagName" :class="{ 'vd-popper-active': showPopper }">
+    <transition :name="transition" :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass"
+      @after-leave="doDestroy">
+      <span ref="popper" :class="rootClass" v-show="!disabled && showPopper">
+        <slot>{{ content }}</slot>
+      </span>
+    </transition>
+    <slot name="reference"></slot>
+  </component>
+</template>
+
+<script>
+// vue2 依赖 popper1.0，后期如果 vue3 则可升级 popper2.0
+import Popper from 'popper.js';
+
+function on(element, event, handler) {
+  if (element && event && handler) {
+    element.addEventListener(event, handler, false);
+  }
+}
+
+function off(element, event, handler) {
+  if (element && event) {
+    element.removeEventListener(event, handler, false);
+  }
+}
+
+export default {
+  // 定义了组件接收的属性，包括各种配置选项和默认值
+  props: {
+    tagName: {
+      type: String,
+      default: 'div',
+    },
+    trigger: {
+      type: String,
+      default: 'click',
+      validator: value => ['clickToOpen', 'click', 'clickToToggle', 'hover', 'focus'].includes(value)
+    },
+    delayOnMouseOver: {
+      type: Number,
+      default: 10,
+    },
+    delayOnMouseOut: {
+      type: Number,
+      default: 10,
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    content: String,
+    enterActiveClass: String,
+    leaveActiveClass: String,
+    boundariesSelector: String,
+    reference: {},
+    forceShow: {
+      type: Boolean,
+      default: false
+    },
+    dataValue: {
+      default: null,
+    },
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+    visibleArrow: {
+      type: Boolean,
+      default: true
+    },
+    transition: {
+      type: String,
+      default: ''
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: false
+    },
+    preventDefault: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    rootClass: {
+      type: String,
+      default: ''
+    }
+  },
+  // 定义组件的内部状态，包括 referenceElm, popperJS, showPopper 等
+  data() {
+    return {
+      referenceElm: null,
+      popperJS: null,
+      showPopper: false,
+      currentPlacement: '',
+      popperOptions: {
+        placement: 'bottom',
+        computeStyle: {
+          gpuAcceleration: false
+        }
+      }
+    };
+  },
+  // 监听 showPopper、forceShow 和 disabled
+  watch: {
+    showPopper(value) {
+      if (value) {
+        this.$emit('show', this);
+        if (this.popperJS) {
+          this.popperJS.enableEventListeners();
+        }
+        this.updatePopper();
+      } else {
+        if (this.popperJS) {
+          this.popperJS.disableEventListeners();
+        }
+        this.$emit('hide', this);
+      }
+    },
+
+    forceShow: {
+      handler(value) {
+        this[value ? 'doShow' : 'doClose']();
+      },
+      immediate: true
+    },
+
+    disabled(value) {
+      if (value) {
+        this.showPopper = false;
+      }
+    }
+  },
+  // 初始化 popperOptions
+  created() {
+    this.appendedArrow = false;
+    this.appendedToBody = false;
+    this.popperOptions = Object.assign(this.popperOptions, this.options);
+  },
+  // 设置事件监听器
+  mounted() {
+    this.referenceElm = this.reference || this.$slots.reference[0].elm;
+    this.popper = this.$slots.default[0].elm;
+
+    // eventMap 事件映射优化
+    const eventMap = {
+      clickToOpen: [
+        { element: this.referenceElm, event: 'click', handler: this.doShow },
+        { element: document, event: 'click', handler: this.handleDocumentClick },
+        { element: document, event: 'touchstart', handler: this.handleDocumentClick }
+      ],
+      click: [
+        { element: this.referenceElm, event: 'click', handler: this.doToggle },
+        { element: document, event: 'click', handler: this.handleDocumentClick },
+        { element: document, event: 'touchstart', handler: this.handleDocumentClick }
+      ],
+      hover: [
+        { element: this.referenceElm, event: 'mouseover', handler: this.onMouseOver },
+        { element: this.referenceElm, event: 'mouseout', handler: this.onMouseOut },
+        { element: this.popper, event: 'mouseover', handler: this.onMouseOver },
+        { element: this.popper, event: 'mouseout', handler: this.onMouseOut }
+      ],
+      focus: [
+        { element: this.referenceElm, event: 'focus', handler: this.onMouseOver },
+        { element: this.referenceElm, event: 'blur', handler: this.onMouseOut },
+        { element: this.popper, event: 'focus', handler: this.onMouseOver },
+        { element: this.popper, event: 'blur', handler: this.onMouseOut }
+      ]
+    };
+    // 事件监听器设置,为 referenceElm 和 popper 元素分别添加相应的事件监听器
+    eventMap[this.trigger].forEach(({ element, event, handler }) => {
+      on(element, event, handler);
+    });
+
+  },
+  // 用于显示、隐藏、销毁 popper，以及处理鼠标和键盘事件
+  methods: {
+    // 切换 Popper 的显示状态
+    doToggle(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation();
+      }
+      if (this.preventDefault) {
+        event.preventDefault();
+      }
+      if (!this.forceShow) {
+        this.showPopper = !this.showPopper;
+      }
+    },
+    // 显示 Popper
+    doShow() {
+      this.showPopper = true;
+    },
+    // 隐藏 Popper
+    doClose() {
+      this.showPopper = false;
+    },
+    // 销毁 Popper 实例
+    doDestroy() {
+      if (this.showPopper) {
+        return;
+      }
+      if (this.popperJS) {
+        this.popperJS.destroy();
+        this.popperJS = null;
+      }
+      if (this.appendedToBody) {
+        this.appendedToBody = false;
+        document.body.removeChild(this.popper.parentElement);
+      }
+    },
+    // 创建 Popper 实例，并附加箭头和其他配置
+    createPopper() {
+      this.$nextTick(() => {
+        if (this.visibleArrow) {
+          this.appendArrow(this.popper);
+        }
+        if (this.appendToBody && !this.appendedToBody) {
+          this.appendedToBody = true;
+          document.body.appendChild(this.popper.parentElement);
+        }
+        if (this.popperJS && this.popperJS.destroy) {
+          this.popperJS.destroy();
+        }
+        if (this.boundariesSelector) {
+          const boundariesElement = document.querySelector(this.boundariesSelector);
+          if (boundariesElement) {
+            Object.assign(this.popperOptions.modifiers = this.popperOptions.modifiers || {}, {
+              preventOverflow: { boundariesElement }
+            });
+          }
+        }
+        this.popperOptions.onCreate = () => {
+          this.$emit('created', this);
+          this.$nextTick(this.updatePopper);
+        };
+        this.popperJS = new Popper(this.referenceElm, this.popper, this.popperOptions);
+      });
+    },
+    // 移除事件监听器并销毁 Popper
+    destroyPopper() {
+      off(this.referenceElm, 'click', this.doToggle);
+      off(this.referenceElm, 'mouseup', this.doClose);
+      off(this.referenceElm, 'mousedown', this.doShow);
+      off(this.referenceElm, 'focus', this.doShow);
+      off(this.referenceElm, 'blur', this.doClose);
+      off(this.referenceElm, 'mouseout', this.onMouseOut);
+      off(this.referenceElm, 'mouseover', this.onMouseOver);
+      off(document, 'click', this.handleDocumentClick);
+      this.showPopper = false;
+      this.doDestroy();
+    },
+    // 向 Popper 添加箭头
+    appendArrow(element) {
+      if (this.appendedArrow) {
+        return;
+      }
+      this.appendedArrow = true;
+      const arrow = document.createElement('div');
+      arrow.setAttribute('x-arrow', '');
+      arrow.className = 'vd-popper__arrow';
+      element.appendChild(arrow);
+    },
+    // 更新 Popper 实例的位置
+    updatePopper() {
+      this.popperJS ? this.popperJS.scheduleUpdate() : this.createPopper();
+    },
+    // 处理鼠标悬停事件
+    onMouseOver() {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => {
+        this.showPopper = true;
+      }, this.delayOnMouseOver);
+    },
+
+    onMouseOut() {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => {
+        this.showPopper = false;
+      }, this.delayOnMouseOut);
+    },
+    // 处理文档点击事件，判断是否需要隐藏 Popper
+    handleDocumentClick(e) {
+      if (!this.$el || !this.referenceElm ||
+        this.elementContains(this.$el, e.target) ||
+        this.elementContains(this.referenceElm, e.target) ||
+        !this.popper || this.elementContains(this.popper, e.target)
+      ) {
+        return;
+      }
+      this.$emit('documentClick', this);
+      if (this.forceShow) {
+        return;
+      }
+      this.showPopper = false;
+    },
+    // 判断一个元素是否包含另一个元素
+    elementContains(elm, otherElm) {
+      return elm.contains?.(otherElm) || false;
+    }
+  },
+  // 在组件销毁时移除所有事件监听器和 Popper 实例
+  destroyed() {
+    this.destroyPopper();
+  }
+}
+</script>

package/dist/components/popup/index.js

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