misp-ui-library-test 0.0.1

package/src/packages/popover/src/main.vue

@@ -0,0 +1,452 @@
+<template>
+  <span>
+    <span class="ui-popover__reference-wrapper" ref="wrapper">
+      <slot name="reference"></slot>
+    </span>
+    <transition :name="transition" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
+      <div
+        class="ui-popover ui-popper"
+        :class="[popperClass, content && 'ui-popover--plain']"
+        ref="popper"
+        v-show="!disabled && showPopper"
+        :style="{ width: width + 'px' }"
+        role="tooltip"
+        :id="tooltipId"
+        :aria-hidden="disabled || !showPopper ? 'true' : 'false'"
+      >
+        <div class="ui-popover__title" v-if="title" v-text="title"></div>
+        <slot>{{ content }}</slot>
+      </div>
+    </transition>
+  </span>
+</template>
+
+<script>
+import Popper from '../../../utils/popper/index.js'
+import { on, off, addClass, removeClass } from '../../../utils/dom/index.js'
+import { random } from '../../../utils/lodash/index.js'
+
+const generateId = () => random(0, 10000)
+
+/**
+ * UiPopper 组件
+ * 用于创建浮动层（如 Tooltip, Popover），支持多种触发方式（点击、悬停、聚焦、手动）。
+ * 基于 Popper.js进行定位，并处理无障碍访问（ARIA）属性。
+ *
+ * @component
+ * @example
+ * <ui-popper content="Hello World">
+ *   <template #reference>
+ *     <button>Hover me</button>
+ *   </template>
+ * </ui-popper>
+ */
+export default {
+  name: 'UiPopper',
+  directives: {},
+  mixins: [Popper],
+  props: {
+    /**
+     * 弹窗展示状态
+     * @type {boolean}
+     */
+    visible: { type: Boolean, default: undefined },
+    /**
+     * 触发方式
+     * - click: 点击触发
+     * - focus: 聚焦触发
+     * - hover: 悬停触发
+     * - manual: 手动控制（通过 visible 属性或方法）
+     * @type {'click' | 'focus' | 'hover' | 'manual'}
+     * @default 'click'
+     */
+    trigger: {
+      type: String,
+      default: 'click',
+      validator: (value) => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1,
+    },
+    /**
+     * 延迟显示的时间（毫秒）
+     * @type {number}
+     * @default 0
+     */
+    openDelay: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * 延迟隐藏的时间（毫秒）
+     * @type {number}
+     * @default 200
+     */
+    closeDelay: {
+      type: Number,
+      default: 200,
+    },
+    /**
+     * 标题文本
+     * @type {string}
+     */
+    title: String,
+    /**
+     * 是否禁用 Popover
+     * @type {boolean}
+     */
+    disabled: Boolean,
+    /**
+     * 显示的内容字符串。如果使用了默认插槽，此属性将被忽略。
+     * @type {string}
+     */
+    content: String,
+    /**
+     * 触发参考元素。可以是 DOM 元素或 Vue 组件实例。
+     * 如果未提供，将自动使用默认插槽中的第一个子元素。
+     * @type {HTMLElement | VueComponent}
+     */
+    reference: {},
+    /**
+     * 自定义 Popper 的类名
+     * @type {string}
+     */
+    popperClass: String,
+    /**
+     * Popper 的宽度
+     * @type {number | string}
+     */
+    width: {},
+    /**
+     * 是否显示箭头
+     * @type {boolean}
+     * @default true
+     */
+    visibleArrow: {
+      default: true,
+    },
+    /**
+     * 箭头的偏移量
+     * @type {number}
+     * @default 0
+     */
+    arrowOffset: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * 过渡动画名称
+     * @type {string}
+     * @default 'fade-in-linear'
+     */
+    transition: {
+      type: String,
+      default: 'fade-in-linear',
+    },
+    /**
+     * Tab 索引，用于键盘导航。
+     * 如果设置为负数，元素将无法通过 Tab 键聚焦。
+     * @type {number}
+     * @default 0
+     */
+    tabindex: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  computed: {
+    /**
+     * 生成唯一的 Tooltip ID，用于 ARIA 关联
+     * @returns {string}
+     */
+    tooltipId() {
+      return `ui-popover-${generateId()}`
+    },
+  },
+  watch: {
+    /**
+     * 监听外部 visible 属性变化，同步到内部 showPopper
+     * @param {boolean} val - 新的 visible 值
+     */
+    visible: {
+      handler(val) {
+        const isControlled = this.$props.hasOwnProperty('visible')
+        if (isControlled) {
+          if (val !== this.showPopper) {
+            this.showPopper = val
+          }
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+    /**
+     * 监听显示状态变化，发射相应的事件
+     * @param {boolean} val - 当前的显示状态
+     */
+    showPopper(val) {
+      // 1. 处理禁用状态
+      if (this.disabled) {
+        if (val) {
+          // 如果试图在禁用状态下显示，强制关闭
+          this.showPopper = false
+          // 如果是受控模式，通知父组件
+          if (this.$props.hasOwnProperty('visible')) {
+            this.$emit('update:visible', false)
+          }
+        }
+        return
+      }
+
+      // 2. 发射业务事件
+      if (val) {
+        this.$emit('show')
+        // 重要：当显示时，需要确保 Popper 实例已创建并更新位置
+        // 通常 Popper mixin 会在 watch showPopper 中处理这个，但为了保险，可以手动调用
+        this.$nextTick(() => {
+          if (typeof this.updatePopper === 'function') {
+            this.updatePopper()
+          }
+        })
+      } else {
+        this.$emit('hide')
+      }
+
+      // 3. 处理受控模式的双向绑定
+      if (this.$props.hasOwnProperty('visible')) {
+        // 只有当内部状态与外部不一致时才发射，避免死循环
+        // 但由于 Vue 的单向数据流，通常直接发射即可，父组件更新后 watch visible 会再次同步
+        this.$emit('update:visible', val)
+      }
+    },
+  },
+
+  mounted() {
+    // 初始化逻辑
+    const isControlled = this.$props.hasOwnProperty('visible')
+    if (isControlled) {
+      this.showPopper = !!this.visible
+    }
+
+    let reference = (this.referenceElm = this.reference || this.$refs.reference)
+    const popper = this.popper || this.$refs.popper
+
+    if (!reference && this.$refs.wrapper.children) {
+      reference = this.referenceElm = this.$refs.wrapper.children[0]
+    }
+    // 可访问性
+    if (reference) {
+      addClass(reference, 'ui-popover__reference')
+      reference.setAttribute('aria-describedby', this.tooltipId)
+      reference.setAttribute('tabindex', this.tabindex) // tab序列
+      popper.setAttribute('tabindex', 0)
+
+      if (this.trigger !== 'click') {
+        on(reference, 'focusin', () => {
+          this.handleFocus()
+          const instance = reference.__vue__
+          if (instance && typeof instance.focus === 'function') {
+            instance.focus()
+          }
+        })
+        on(popper, 'focusin', this.handleFocus)
+        on(reference, 'focusout', this.handleBlur)
+        on(popper, 'focusout', this.handleBlur)
+      }
+      on(reference, 'keydown', this.handleKeydown)
+      on(reference, 'click', this.handleClick)
+    }
+    if (this.trigger === 'click') {
+      on(reference, 'click', this.doToggle)
+      on(document, 'click', this.handleDocumentClick)
+    } else if (this.trigger === 'hover') {
+      on(reference, 'mouseenter', this.handleMouseEnter)
+      on(popper, 'mouseenter', this.handleMouseEnter)
+      on(reference, 'mouseleave', this.handleMouseLeave)
+      on(popper, 'mouseleave', this.handleMouseLeave)
+    } else if (this.trigger === 'focus') {
+      if (this.tabindex < 0) {
+        console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key')
+      }
+      if (reference.querySelector('input, textarea')) {
+        on(reference, 'focusin', this.doShow)
+        on(reference, 'focusout', this.doClose)
+      } else {
+        on(reference, 'mousedown', this.doShow)
+        on(reference, 'mouseup', this.doClose)
+      }
+    }
+  },
+
+  beforeDestroy() {
+    this.cleanup()
+  },
+
+  deactivated() {
+    this.cleanup()
+  },
+
+  methods: {
+    /**
+     * 切换显示/隐藏状态
+     */
+    doToggle() {
+      this.setShowPopper(!this.showPopper)
+    },
+    /**
+     * 显示 Popover
+     */
+    doShow() {
+      this.setShowPopper(true)
+    },
+    /**
+     * 隐藏 Popover
+     */
+    doClose() {
+      this.setShowPopper(false)
+    },
+
+    /**
+     * 统一的设置显示状态方法
+     * 处理受控与非受控模式的逻辑
+     * @param {boolean} val
+     */
+    setShowPopper(val) {
+      if (this.disabled && val === true) return
+
+      // 调整组件受控判断逻辑，父组件没有传入 visible 属性时，默认为非受控模式 undefined
+      // const isControlled = this.$props.hasOwnProperty('visible')
+      const isControlled = this.visible !== undefined
+
+      if (isControlled) {
+        // 受控模式：只发射事件，不直接改状态
+        // 父组件收到事件更新 visible -> watch visible 触发 -> 更新 showPopper
+        this.$emit('update:visible', val)
+      } else {
+        // 非受控模式：直接改状态
+        this.showPopper = val
+      }
+    },
+
+    /**
+     * 处理焦点事件
+     * 添加 focusing 类并根据触发类型显示 Popover
+     */
+    handleFocus() {
+      addClass(this.referenceElm, 'focusing')
+      if (this.trigger === 'click' || this.trigger === 'focus') {
+        this.setShowPopper(true)
+      }
+    },
+    /**
+     * 处理点击事件
+     * 移除 focusing 类
+     */
+    handleClick() {
+      removeClass(this.referenceElm, 'focusing')
+    },
+    /**
+     * 处理失焦事件
+     * 移除 focusing 类并根据触发类型隐藏 Popover
+     */
+    handleBlur() {
+      removeClass(this.referenceElm, 'focusing')
+      if (this.trigger === 'click' || this.trigger === 'focus') {
+        this.setShowPopper(false)
+      }
+    },
+    /**
+     * 处理鼠标进入事件
+     * 清除之前的定时器，并根据 openDelay 设置显示定时器
+     */
+    handleMouseEnter() {
+      clearTimeout(this._timer)
+      if (this.openDelay) {
+        this._timer = setTimeout(() => {
+          this.setShowPopper(true)
+        }, this.openDelay)
+      } else {
+        this.setShowPopper(true)
+      }
+    },
+
+    /**
+     * 处理键盘按键事件
+     * 按下 ESC 键时关闭 Popover
+     * @param {KeyboardEvent} ev - 键盘事件对象
+     */
+    handleKeydown(ev) {
+      if (ev.keyCode === 27 && this.trigger !== 'manual') {
+        // esc
+        this.setShowPopper(false)
+      }
+    },
+    /**
+     * 处理鼠标离开事件
+     * 清除之前的定时器，并根据 closeDelay 设置隐藏定时器
+     */
+    handleMouseLeave() {
+      clearTimeout(this._timer)
+      if (this.closeDelay) {
+        this._timer = setTimeout(() => {
+          this.setShowPopper(false)
+        }, this.closeDelay)
+      } else {
+        this.setShowPopper(false)
+      }
+    },
+
+    /**
+     * 处理文档点击事件
+     * 如果点击区域不在参考元素或 Popper 内部，则关闭 Popover
+     * @param {MouseEvent} e - 鼠标事件对象
+     */
+    handleDocumentClick(e) {
+      let reference = this.reference || this.$refs.reference
+      const popper = this.popper || this.$refs.popper
+
+      if (!reference && this.$refs.wrapper.children) {
+        reference = this.referenceElm = this.$refs.wrapper.children[0]
+      }
+      if (!this.$el || !reference || this.$el.contains(e.target) || reference.contains(e.target) || !popper || popper.contains(e.target)) return
+      this.setShowPopper(false)
+    },
+    /**
+     * 过渡动画进入完成后的回调
+     * 发射 'after-enter' 事件
+     */
+    handleAfterEnter() {
+      this.$emit('after-enter')
+    },
+    /**
+     * 过渡动画离开完成后的回调
+     * 发射 'after-leave' 事件并销毁 Popper 实例
+     */
+    handleAfterLeave() {
+      this.$emit('after-leave')
+      this.doDestroy()
+    },
+    /**
+     * 清理定时器
+     */
+    cleanup() {
+      if (this.openDelay || this.closeDelay) {
+        clearTimeout(this._timer)
+      }
+    },
+  },
+
+  destroyed() {
+    const reference = this.reference
+
+    off(reference, 'click', this.doToggle)
+    off(reference, 'mouseup', this.doClose)
+    off(reference, 'mousedown', this.doShow)
+    off(reference, 'focusin', this.doShow)
+    off(reference, 'focusout', this.doClose)
+    off(reference, 'mousedown', this.doShow)
+    off(reference, 'mouseup', this.doClose)
+    off(reference, 'mouseleave', this.handleMouseLeave)
+    off(reference, 'mouseenter', this.handleMouseEnter)
+    off(document, 'click', this.handleDocumentClick)
+  },
+}
+</script>

package/src/packages/progress/index.js

@@ -0,0 +1,12 @@
+/**
+ * Progress 进度条组件
+ */
+
+import UiProgress from './src/main.vue'
+
+// 自动安装
+UiProgress.install = function(Vue) {
+  Vue.component(UiProgress.name, UiProgress)
+}
+
+export default UiProgress

package/src/packages/progress/src/main.vue

@@ -0,0 +1,236 @@
+<template>
+  <div
+    class="ui-progress"
+    :class="[
+      'ui-progress--' + type,
+      status ? 'is-' + status : '',
+      {
+        'ui-progress--without-text': !showText,
+        'ui-progress--text-inside': textInside,
+      }
+    ]"
+    role="progressbar"
+    :aria-valuenow="percentage"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    <div class="ui-progress-bar" v-if="type === 'line'">
+      <div class="ui-progress-bar__outer" :style="{height: strokeWidth + 'px', backgroundColor: defineBackColor}">
+        <div class="ui-progress-bar__inner" :style="barStyle">
+          <div class="ui-progress-bar__innerText" :style="{color: textColor}" v-if="showText && textInside">{{content}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="ui-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
+      <svg viewBox="0 0 100 100">
+        <path
+          class="ui-progress-circle__track"
+          :d="trackPath"
+          :stroke="defineBackColor"
+          :stroke-width="relativeStrokeWidth"
+          fill="none"
+          :style="trailPathStyle"></path>
+        <path
+          class="ui-progress-circle__path"
+          :d="trackPath"
+          :stroke="stroke"
+          fill="none"
+          :stroke-linecap="strokeLinecap"
+          :stroke-width="percentage ? relativeStrokeWidth : 0"
+          :style="circlePathStyle"></path>
+      </svg>
+    </div>
+    <div
+      class="ui-progress__text"
+      v-if="showText && !textInside"
+      :style="{fontSize: progressTextSize + 'px', color: textColor}"
+    >
+      <template v-if="!status">{{content}}</template>
+      <i v-else :class="iconClass"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiProgress',
+  props: {
+    type: {
+      type: String,
+      default: 'line',
+      validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1
+    },
+    percentage: {
+      type: Number,
+      default: 0,
+      required: true,
+      validator: val => val >= 0 && val <= 100
+    },
+    status: {
+      type: String,
+      validator: val => ['success', 'exception', 'warning'].indexOf(val) > -1
+    },
+    strokeWidth: {
+      type: Number,
+      default: 6
+    },
+    strokeLinecap: {
+      type: String,
+      default: 'round'
+    },
+    textInside: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 126
+    },
+    showText: {
+      type: Boolean,
+      default: true
+    },
+    color: {
+      type: [String, Array, Function],
+      default: ''
+    },
+    defineBackColor: {
+      type: [String, Array, Function],
+      default: '#ebeef5'
+    },
+    textColor: {
+      type: [String, Array, Function],
+      default: '#606266'
+    },
+    format: Function
+  },
+  computed: {
+    barStyle() {
+      const style = {};
+      style.width = this.percentage + '%';
+      style.backgroundColor = this.getCurrentColor(this.percentage);
+      return style;
+    },
+    relativeStrokeWidth() {
+      return (this.strokeWidth / this.width * 100).toFixed(1);
+    },
+    radius() {
+      if (this.type === 'circle' || this.type === 'dashboard') {
+        return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
+      } else {
+        return 0;
+      }
+    },
+    trackPath() {
+      const radius = this.radius;
+      const isDashboard = this.type === 'dashboard';
+      return `
+        M 50 50
+        m 0 ${isDashboard ? '' : '-'}${radius}
+        a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
+        a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
+        `;
+    },
+    perimeter() {
+      return 2 * Math.PI * this.radius;
+    },
+    rate() {
+      return this.type === 'dashboard' ? 0.75 : 1;
+    },
+    strokeDashoffset() {
+      const offset = -1 * this.perimeter * (1 - this.rate) / 2;
+      return `${offset}px`;
+    },
+    trailPathStyle() {
+      return {
+        strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
+        strokeDashoffset: this.strokeDashoffset
+      };
+    },
+    circlePathStyle() {
+      return {
+        strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
+        strokeDashoffset: this.strokeDashoffset,
+        transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
+      };
+    },
+    stroke() {
+      let ret;
+      if (this.color) {
+        ret = this.getCurrentColor(this.percentage);
+      } else {
+        switch (this.status) {
+          case 'success':
+            ret = '#13ce66';
+            break;
+          case 'exception':
+            ret = '#ff4949';
+            break;
+          case 'warning':
+            ret = '#e6a23c';
+            break;
+          default:
+            ret = '#20a0ff';
+        }
+      }
+      return ret;
+    },
+    iconClass() {
+      if (this.status === 'warning') {
+        return 'icon-warning';
+      }
+      if (this.type === 'line') {
+        return this.status === 'success' ? 'icon-circle-check' : 'icon-circle-close';
+      } else {
+        return this.status === 'success' ? 'icon-check' : 'icon-close';
+      }
+    },
+    progressTextSize() {
+      return this.type === 'line'
+        ? 12 + this.strokeWidth * 0.4
+        : this.width * 0.111111 + 2 ;
+    },
+    content() {
+      if (typeof this.format === 'function') {
+        return this.format(this.percentage) || '';
+      } else {
+        return `${this.percentage}%`;
+      }
+    }
+  },
+  methods: {
+    getCurrentColor(percentage) {
+      if (typeof this.color === 'function') {
+        return this.color(percentage);
+      } else if (typeof this.color === 'string') {
+        return this.color;
+      } else {
+        return this.getLevelColor(percentage);
+      }
+    },
+    getLevelColor(percentage) {
+      const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage);
+
+      for (let i = 0; i < colorArray.length; i++) {
+        if (colorArray[i].percentage > percentage) {
+          return colorArray[i].color;
+        }
+      }
+      return colorArray[colorArray.length - 1].color;
+    },
+    getColorArray() {
+      const color = this.color;
+      const span = 100 / color.length;
+      return color.map((seriesColor, index) => {
+        if (typeof seriesColor === 'string') {
+          return {
+            color: seriesColor,
+            percentage: (index + 1) * span
+          };
+        }
+        return seriesColor;
+      });
+    }
+  }
+};
+</script>