vdesign-ui 0.2.4 → 0.2.6

package/dist/components/popover/style.less

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

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

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