misp-ui-library-test 0.0.1

package/src/packages/tooltip/src/main.js

@@ -0,0 +1,367 @@
+import Vue from 'vue'
+import Popper from '../../../utils/popper/index.js'
+import { addClass, removeClass, on, off, getTextWidth, getStyle } from '../../../utils/dom/index.js'
+import { debounce } from '../../../utils/lodash/index.js'
+
+const generateId = () => Math.floor(Math.random() * 10000)
+
+/**
+ * UiTooltip 文字提示组件
+ * 常用于展示鼠标 hover 时的提示信息。
+ * @component
+ */
+export default {
+  name: 'UiTooltip',
+  mixins: [Popper],
+  props: {
+    /**
+     * 显示的内容，也可以通过 slot#content 传入 DOM
+     * @type {string}
+     */
+    content: String,
+    
+    /**
+     * 鼠标进入后是否允许操作 tooltip 内部内容
+     * @type {boolean}
+     * @default true
+     */
+    enterable: { type: Boolean, default: true },
+    
+    /**
+     * Tooltip 是否可用
+     * @type {boolean}
+     * @default false
+     */
+    disabled: Boolean,
+    
+    /**
+     * 是否手动控制 Tooltip 的显示与隐藏
+     * @type {boolean}
+     * @default false
+     */
+    manual: Boolean,
+
+    /**
+     * 是否启用文本溢出检测，在文本溢出时展示悬浮窗，不溢出时不展示，仅在配置了 content 文本且没有传入插槽时生效
+     * @type {boolean}
+     * @default false
+     */
+    overflowCheck: { type: Boolean, default: false },
+    
+    /**
+     * 主题风格
+     * @type {'dark' | 'light'}
+     * @default 'dark'
+     */
+    effect: { type: String, default: 'dark' },
+
+    /**
+     * Tooltip 的类名
+     * @type {string}
+     */
+    popperClass: String,
+    
+    /**
+     * 箭头的偏移量
+     * @type {number}
+     * @default 0
+     */
+    arrowOffset: { type: Number, default: 0 },
+    
+    /**
+     * 延迟出现的时间，单位毫秒
+     * @type {number}
+     * @default 0
+     */
+    openDelay: { type: Number, default: 0 },
+
+    /**
+     * 在多少毫秒后自动隐藏 Tooltip
+     * @type {number}
+     * @default 0
+     */
+    hideAfter: { type: Number, default: 0 },
+    
+    /**
+     * 是否显示箭头
+     * @type {boolean}
+     * @default true
+     */
+    visibleArrow: { default: true },
+    
+    /**
+     * 显示隐藏的过渡动画类名
+     * @type {string}
+     * @default 'ui-fade-in-linear'
+     */
+    transition: { type: String, default: 'ui-fade-in-linear' },
+    
+    /**
+     * popper.js 的配置项
+     * @type {object}
+     * @default { boundariesPadding: 10, gpuAcceleration: false }
+     */
+    popperOptions: { default: () => ({ boundariesPadding: 10, gpuAcceleration: false }) },
+    
+    /**
+     * 触发元素的 tabindex 属性值
+     * @type {number}
+     * @default 0
+     */
+    tabindex: { type: Number, default: 0 },
+  },
+  data: () => ({
+    /**
+     * Tooltip 的唯一 ID，用于无障碍访问
+     * @type {string}
+     */
+    tooltipId: `ui-tooltip-${generateId()}`,
+    
+    /**
+     * 延时隐藏的定时器 ID
+     * @type {number|null}
+     */
+    timeoutPending: null,
+    
+    /**
+     * 当前是否处于聚焦状态
+     * @type {boolean}
+     */
+    focusing: false,
+
+    /**
+     * 
+     */
+    onlyContent: false,
+  }),
+  computed: {
+    textOverflowWrapperStyle() {
+      return { width: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }
+    }
+  },
+  watch: {
+    /**
+     * 监听聚焦状态变化，动态添加/移除 focusing 类名
+     * @param {boolean} val - 新的聚焦状态
+     */
+    focusing(val) {
+      val ? addClass(this.referenceElm, 'focusing') : removeClass(this.referenceElm, 'focusing')
+    },
+  },
+  beforeCreate() {
+    if (this.$isServer) return
+    // 创建独立的 Vue 实例用于渲染 popper 内容，避免受父组件渲染影响
+    this.popperVM = new Vue({
+      data: { node: '' },
+      render(h) { return this.node },
+    }).$mount()
+    // 初始化防抖关闭函数
+    this.debounceClose = debounce(() => this.handleClosePopper(), 200)
+  },
+  mounted() {
+    // 获取触发元素引用
+    this.referenceElm = this.$el
+    if (this.$el.nodeType === 1) {
+      // 设置无障碍属性
+      this.$el.setAttribute('aria-describedby', this.tooltipId)
+      this.$el.setAttribute('tabindex', this.tabindex)
+      
+      // 绑定鼠标事件
+      on(this.$el, 'mouseenter', this.show)
+      on(this.$el, 'mouseleave', this.hide)
+      
+      // 绑定焦点事件
+      on(this.$el, 'focus', () => {
+        if (!this.$slots.default || !this.$slots.default.length) {
+          this.handleFocus()
+          return
+        }
+        const instance = this.$slots.default[0].componentInstance
+        if (instance && instance.focus) {
+          instance.focus()
+        } else {
+          this.handleFocus()
+        }
+      })
+      on(this.$el, 'blur', this.handleBlur)
+      on(this.$el, 'click', this.removeFocusing)
+    }
+    
+    // 如果初始值为真，则更新 popper 位置
+    this.value &&
+      this.popperVM &&
+      this.popperVM.$nextTick(() => {
+        this.value && this.updatePopper()
+      })
+  },
+  beforeDestroy() {
+    // 销毁 popper VM 实例
+    this.popperVM && this.popperVM.$destroy();
+  },
+  destroyed() {
+    // 解绑所有事件监听器
+    const reference = this.referenceElm;
+    if (reference.nodeType === 1) {
+      off(reference, 'mouseenter', this.show);
+      off(reference, 'mouseleave', this.hide);
+      off(reference, 'focus', this.handleFocus);
+      off(reference, 'blur', this.handleBlur);
+      off(reference, 'click', this.removeFocusing);
+    }
+  },
+  render(h) {
+    // 渲染 popper 气泡框内容
+    if (this.popperVM) {
+      this.popperVM.node = (
+        <transition name={this.transition} onAfterLeave={this.doDestroy}>
+          <div
+            onMouseleave={() => {
+              this.setExpectedState(false)
+              this.debounceClose()
+            }}
+            onMouseenter={() => {
+              this.setExpectedState(true)
+            }}
+            ref="popper"
+            role="tooltip"
+            id={this.tooltipId}
+            aria-hidden={this.disabled || !this.showPopper ? 'true' : 'false'}
+            v-show={!this.disabled && this.showPopper}
+            class={['ui-tooltip__popper', 'is-' + this.effect, this.popperClass]}
+          >
+            {this.$slots.content || this.content}
+          </div>
+        </transition>
+      )
+    }
+    
+    // 获取默认插槽的第一个元素作为触发元素
+    let firstElement = this.getFirstElement()
+    // 如果没有传入插槽，则以 content 文本生成一个 span 元素作为触发元素
+    if (!firstElement && this.content) {
+      this.onlyContent = true
+      firstElement = h('div', { class: 'ui-tooltip__default' }, [this.content])
+    } else {
+      this.onlyContent = false
+    }
+    
+    // 修改触发元素的类名，注入 tooltip 相关样式
+    const data = (firstElement.data = firstElement.data || {})
+    data.staticClass = this.addTooltipClass(data.staticClass)
+    
+    return firstElement
+  },
+  methods: {
+    /**
+     * 显示 Tooltip
+     */
+    show() {
+      if (this.overflowCheck && this.onlyContent) {
+        const visialWidthStr = getStyle(this.referenceElm, 'width')
+        // 可视容器宽度
+        const visialWidth = Number(visialWidthStr.replace('px', ''))
+        // 文本全量展示所需宽度
+        const contentWidth = getTextWidth(this.content, getStyle(this.referenceElm, 'font'))
+        // 文本全量宽度小于容器宽度时，不展示tooltip
+        if (visialWidth > contentWidth) return;
+      }
+
+      this.setExpectedState(true)
+      this.handleShowPopper()
+    },
+    
+    /**
+     * 隐藏 Tooltip
+     */
+    hide() {
+      this.setExpectedState(false)
+      this.debounceClose()
+    },
+    
+    /**
+     * 处理焦点获取事件
+     */
+    handleFocus() {
+      this.focusing = true
+      this.show()
+    },
+    
+    /**
+     * 处理焦点丢失事件
+     */
+    handleBlur() {
+      this.focusing = false
+      this.hide()
+    },
+    
+    /**
+     * 移除聚焦状态标记
+     */
+    removeFocusing() {
+      this.focusing = false
+    },
+    
+    /**
+     * 添加工具提示特定的类名
+     * @param {string} prev - 原有的类名字符串
+     * @returns {string} 合并后的类名字符串
+     */
+    addTooltipClass(prev) {
+      return 'ui-tooltip ' + (prev ? prev.replace('ui-tooltip', '') : '')
+    },
+    
+    /**
+     * 处理显示 Popper 的逻辑（包含延迟显示和自动隐藏）
+     */
+    handleShowPopper() {
+      if (!this.expectedState || this.manual) return
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.showPopper = true
+      }, this.openDelay)
+
+      if (this.hideAfter > 0) {
+        this.timeoutPending = setTimeout(() => {
+          this.showPopper = false
+        }, this.hideAfter)
+      }
+    },
+    
+    /**
+     * 处理关闭 Popper 的逻辑（包含防抖和状态检查）
+     */
+    handleClosePopper() {
+      if ((this.enterable && this.expectedState) || this.manual) return;
+      clearTimeout(this.timeout)
+      this.timeoutPending && clearTimeout(this.timeoutPending)
+      this.showPopper = false
+      this.disabled && this.doDestroy()
+    },
+    
+    /**
+     * 设置期望的状态（用于判断鼠标是否仍在目标区域或 tooltip 区域内）
+     * @param {boolean} expectedState - 期望的状态
+     */
+    setExpectedState(expectedState) {
+      !expectedState && clearTimeout(this.timeoutPending)
+      this.expectedState = expectedState
+    },
+    
+    /**
+     * 获取默认插槽中的第一个有效元素节点
+     * @returns {VNode|null} 第一个包含 tag 的 VNode，否则返回 null
+     */
+    getFirstElement() {
+      const slots = this.$slots.default
+      if (!Array.isArray(slots)) return null
+      let element = null
+      for (let index = 0; index < slots.length; index++) {
+        if (slots[index] && slots[index].tag) {
+          element = slots[index]
+          break
+        }
+      }
+      return element
+    },
+  },
+}

package/src/packages/transfer/index.js

@@ -0,0 +1,8 @@
+import Transfer from './src/main.vue';
+
+/* istanbul ignore next */
+Transfer.install = function(Vue) {
+  Vue.component(Transfer.name, Transfer);
+};
+
+export default Transfer;

package/src/packages/transfer/src/main.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="ui-transfer">
+    <transfer-panel
+      v-bind="$props"
+      ref="leftPanel"
+      :data="sourceData"
+      :title="titles[0] || leftTitle"
+      :default-checked="leftDefaultChecked"
+      :placeholder="filterPlaceholder"
+      @checked-change="onSourceCheckedChange">
+      <slot name="left-footer"></slot>
+    </transfer-panel>
+    <div class="ui-transfer__buttons">
+      <ui-button
+        type="primary"
+        :class="['ui-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
+        @click="addToLeft"
+        :disabled="rightChecked.length === 0">
+        <i class="ui-icon-arrow-left"></i>
+        <span v-if="buttonTexts[0] !== undefined">{{ buttonTexts[0] }}</span>
+      </ui-button>
+      <ui-button
+        type="primary"
+        :class="['ui-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
+        @click="addToRight"
+        :disabled="leftChecked.length === 0">
+        <span v-if="buttonTexts[1] !== undefined">{{ buttonTexts[1] }}</span>
+        <i class="ui-icon-arrow-right"></i>
+      </ui-button>
+    </div>
+    <transfer-panel
+      v-bind="$props"
+      ref="rightPanel"
+      :data="targetData"
+      :title="titles[1] || rightTitle"
+      :default-checked="rightDefaultChecked"
+      :placeholder="filterPlaceholder"
+      @checked-change="onTargetCheckedChange">
+      <slot name="right-footer"></slot>
+    </transfer-panel>
+  </div>
+</template>
+
+<script>
+  import UiButton from '../../button';
+  import TransferPanel from './transfer-panel.vue';
+
+  export default {
+    name: 'UiTransfer',
+
+    components: {
+      TransferPanel,
+      UiButton
+    },
+
+    props: {
+      data: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      titles: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      buttonTexts: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      filterPlaceholder: {
+        type: String,
+        default: '请输入搜索内容'
+      },
+      filterMethod: Function,
+      leftDefaultChecked: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      rightDefaultChecked: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      renderContent: Function,
+      value: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      format: {
+        type: Object,
+        default() {
+          return {
+            noChecked: '${total} 项',
+            hasChecked: '已选 ${checked}/${total} 项'
+          };
+        }
+      },
+      filterable: Boolean,
+      props: {
+        type: Object,
+        default() {
+          return {
+            label: 'label',
+            key: 'key',
+            disabled: 'disabled'
+          };
+        }
+      },
+      targetOrder: {
+        type: String,
+        default: 'original'
+      }
+    },
+
+    data() {
+      return {
+        leftChecked: [],
+        rightChecked: []
+      };
+    },
+
+    computed: {
+      dataObj() {
+        const key = this.props.key;
+        return this.data.reduce((o, cur) => (o[cur[key]] = cur) && o, {});
+      },
+
+      sourceData() {
+        return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);
+      },
+
+      targetData() {
+        if (this.targetOrder === 'original') {
+          return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);
+        } else {
+          return this.value.reduce((arr, cur) => {
+            const val = this.dataObj[cur];
+            if (val) {
+              arr.push(val);
+            }
+            return arr;
+          }, []);
+        }
+      },
+
+      hasButtonTexts() {
+        return this.buttonTexts.length === 2;
+      },
+
+      leftTitle() {
+        return '列表一';
+      },
+
+      rightTitle() {
+        return '列表二';
+      }
+    },
+
+    watch: {
+      value(val) {
+        this.$emit('change', val);
+      }
+    },
+
+    methods: {
+      onSourceCheckedChange(val, movedKeys) {
+        this.leftChecked = val;
+        if (movedKeys === undefined) return;
+        this.$emit('left-check-change', val, movedKeys);
+      },
+
+      onTargetCheckedChange(val, movedKeys) {
+        this.rightChecked = val;
+        if (movedKeys === undefined) return;
+        this.$emit('right-check-change', val, movedKeys);
+      },
+
+      addToLeft() {
+        let currentValue = this.value.slice();
+        this.rightChecked.forEach(item => {
+          const index = currentValue.indexOf(item);
+          if (index > -1) {
+            currentValue.splice(index, 1);
+          }
+        });
+        this.$emit('input', currentValue);
+        this.$emit('change', currentValue, 'left', this.rightChecked);
+      },
+
+      addToRight() {
+        let currentValue = this.value.slice();
+        const itemsToBeMoved = [];
+        const key = this.props.key;
+        this.data.forEach(item => {
+          const itemKey = item[key];
+          if (
+            this.leftChecked.indexOf(itemKey) > -1 &&
+            this.value.indexOf(itemKey) === -1
+          ) {
+            itemsToBeMoved.push(itemKey);
+          }
+        });
+        currentValue = this.targetOrder === 'unshift'
+          ? itemsToBeMoved.concat(currentValue)
+          : currentValue.concat(itemsToBeMoved);
+        this.$emit('input', currentValue);
+        this.$emit('change', currentValue, 'right', this.leftChecked);
+      },
+
+      clearQuery(which) {
+        if (which === 'left') {
+          this.$refs.leftPanel.query = '';
+        } else if (which === 'right') {
+          this.$refs.rightPanel.query = '';
+        }
+      }
+    }
+  };
+</script>