misp-ui-library-test 0.0.1

package/src/packages/select/src/navigation-mixin.js

@@ -0,0 +1,49 @@
+export default {
+  data() {
+    return {
+      hoverOption: -1,
+    }
+  },
+  computed: {
+    optionsAllDisabled() {
+      return this.options.filter((option) => option.visible).every((option) => option.disabled)
+    },
+  },
+  watch: {
+    hoverIndex(val) {
+      if (typeof val === 'number' && val > -1) {
+        this.hoverOption = this.options[val] || {}
+      }
+      this.options.forEach((option) => {
+        option.hover = this.hoverOption === option
+      })
+    },
+  },
+  methods: {
+    navigateOptions(direction) {
+      if (!this.visible) {
+        this.visible = true
+        return
+      }
+      if (this.options.length === 0 || this.filteredOptionsCount === 0) return
+      if (!this.optionsAllDisabled) {
+        if (direction === 'next') {
+          this.hoverIndex++
+          if (this.hoverIndex === this.options.length) {
+            this.hoverIndex = 0
+          }
+        } else if (direction === 'prev') {
+          this.hoverIndex--
+          if (this.hoverIndex < 0) {
+            this.hoverIndex = this.options.length - 1
+          }
+        }
+        const option = this.options[this.hoverIndex]
+        if (option.disabled === true || option.groupDisabled === true || !option.visible) {
+          this.navigateOptions(direction)
+        }
+        this.$nextTick(() => this.scrollToOption(this.hoverOption))
+      }
+    },
+  },
+}

package/src/packages/select/src/option.vue

@@ -0,0 +1,249 @@
+<template>
+  <li
+    v-show="visible"
+    class="ui-select-dropdown__item"
+    :class="{
+      selected: itemSelected,
+      'is-disabled': disabled || groupDisabled || limitReached,
+      hover: hover,
+    }"
+    @mouseenter="hoverItem"
+    @click.stop="selectOptionClick"
+  >
+    <slot><span>{{ currentLabel }}</span></slot>
+  </li>
+</template>
+
+<script>
+import emitter from '../../../mixins/emitter.js'
+import { get, escapeRegexpString } from '../../../utils/lodash'
+
+/**
+ * UiOption 选择器选项组件
+ * 用于 UiSelect 下拉列表中的单个选项项。
+ * @component UiOption
+ */
+export default {
+  name: 'UiOption',
+  components: {},
+  mixins: [emitter],
+  props: {
+    /**
+     * 选项的值
+     * @type {*}
+     * @required
+     */
+    value: { required: true },
+    /**
+     * 选项的标签，若不设置则默认与 value 相同
+     * @type {String|Number}
+     */
+    label: [String, Number],
+    /**
+     * 是否由用户创建（用于允许创建新条目场景）
+     * @type {Boolean}
+     * @default false
+     */
+    created: Boolean,
+    /**
+     * 是否禁用该选项
+     * @type {Boolean}
+     * @default false
+     */
+    disabled: { type: Boolean, default: false },
+  },
+  data: () => ({
+    /**
+     * 选项在列表中的索引
+     * @type {Number}
+     */
+    index: -1,
+    /**
+     * 所属分组是否禁用
+     * @type {Boolean}
+     */
+    groupDisabled: false,
+    /**
+     * 选项是否可见（用于搜索过滤）
+     * @type {Boolean}
+     */
+    visible: true,
+    /**
+     * 选中状态的视觉反馈（如 Backspace 删除前的提示）
+     * @type {Boolean}
+     */
+    hitState: false,
+    /**
+     * 鼠标是否悬停
+     * @type {Boolean}
+     */
+    hover: false,
+  }),
+  inject: ['select'],
+  filters: {},
+  computed: {
+    /**
+     * 判断 value 是否为对象类型
+     * @returns {Boolean}
+     */
+    isObject() {
+      return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]'
+    },
+    /**
+     * 当前显示的标签文本
+     * @returns {String}
+     */
+    currentLabel() {
+      return this.label || (this.isObject ? '' : this.value)
+    },
+    /**
+     * 当前选项的值（用于显示或内部逻辑）
+     * @returns {*}
+     */
+    currentValue() {
+      return this.value || this.label || ''
+    },
+    /**
+     * 判断当前选项是否被选中
+     * @returns {Boolean}
+     */
+    itemSelected() {
+      if (!this.select.multiple) {
+        return this.isEqual(this.value, this.select.value)
+      } else {
+        return this.contains(this.select.value, this.value)
+      }
+    },
+    /**
+     * 判断是否达到多选上限
+     * @returns {Boolean}
+     */
+    limitReached() {
+      if (this.select.multiple) {
+        return !this.itemSelected && (this.select.value || []).length >= this.select.multipleLimit && this.select.multipleLimit > 0
+      } else {
+        return false
+      }
+    },
+  },
+  watch: {
+    /**
+     * 监听标签变化，触发父组件更新选中状态
+     */
+    currentLabel() {
+      if (!this.created && !this.select.remote) this.dispatch('UiSelect', 'setSelected')
+    },
+    /**
+     * 监听值变化，触发父组件更新选中状态
+     * @param {*} val - 新值
+     * @param {*} oldVal - 旧值
+     */
+    value(val, oldVal) {
+      const { remote, valueKey } = this.select
+      if (!this.created && !remote) {
+        if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) {
+          return
+        }
+        this.dispatch('UiSelect', 'setSelected')
+      }
+    },
+  },
+  created() {
+    // 将当前实例注册到父组件 Select 的选项列表中
+    this.select.options.push(this);
+    this.select.cachedOptions.push(this);
+    this.select.optionsCount++;
+    this.select.filteredOptionsCount++;
+    
+    // 监听来自父组件的事件
+    this.$on('queryChange', this.queryChange);
+    this.$on('handleGroupDisabled', this.handleGroupDisabled);
+  },
+  beforeDestroy() {
+    // 组件销毁时从父组件的列表中移除
+    const { selected, multiple } = this.select;
+    let selectedOptions = multiple ? selected : [selected];
+    let index = this.select.cachedOptions.indexOf(this);
+    let selectedIndex = selectedOptions.indexOf(this);
+    
+    // 如果不在选中列表中，则从缓存选项中移除
+    if (index > -1 && selectedIndex < 0) {
+      this.select.cachedOptions.splice(index, 1);
+    }
+    
+    // 通知父组件减少计数并从活动选项中移除
+    this.select.onOptionDestroy(this.select.options.indexOf(this));
+  },
+  methods: {
+    /**
+     * 比较两个值是否相等
+     * @param {*} a - 值 A
+     * @param {*} b - 值 B
+     * @returns {Boolean}
+     */
+    isEqual(a, b) {
+      if (!this.isObject) {
+        return a === b
+      } else {
+        const valueKey = this.select.valueKey
+        return get(a, valueKey) === get(b, valueKey)
+      }
+    },
+    /**
+     * 判断数组中是否包含目标值
+     * @param {Array} arr - 数组
+     * @param {*} target - 目标值
+     * @returns {Boolean}
+     */
+    contains(arr = [], target) {
+      if (!this.isObject) {
+        return arr && arr.indexOf(target) > -1
+      } else {
+        const valueKey = this.select.valueKey
+        return (
+          arr &&
+          arr.some((item) => {
+            return get(item, valueKey) === get(target, valueKey)
+          })
+        )
+      }
+    },
+    /**
+     * 处理分组禁用状态变更
+     * @param {Boolean} val - 是否禁用
+     */
+    handleGroupDisabled(val) {
+      this.groupDisabled = val
+    },
+    /**
+     * 鼠标悬停时更新父组件的 hoverIndex
+     */
+    hoverItem() {
+      if (!this.disabled && !this.groupDisabled) {
+        this.select.hoverIndex = this.select.options.indexOf(this)
+      }
+    },
+    /**
+     * 点击选项时触发选择事件
+     */
+    selectOptionClick() {
+      if (this.disabled !== true && this.groupDisabled !== true) {
+        this.dispatch('UiSelect', 'handleOptionClick', [this, true])
+      }
+    },
+    /**
+     * 处理搜索查询变化，决定选项是否可见
+     * @param {String} query - 搜索关键词
+     */
+    queryChange(query) {
+      // 如果匹配标签或为创建项，则显示
+      this.visible = new RegExp(escapeRegexpString(query), 'i').test(this.currentLabel) || this.created
+      if (!this.visible) {
+        this.select.filteredOptionsCount--
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/packages/select/src/select-dropdown.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="ui-select-dropdown ui-popper" :class="[{ 'is-multiple': $parent.multiple }, popperClass]" :style="{ minWidth: minWidth }">
+    <slot />
+  </div>
+</template>
+
+<script>
+import Popper from '../../../utils/popper/index.js'
+
+/**
+ * UiSelectDropdown 选择器下拉框组件
+ * 负责渲染 Select 的下拉弹出层，处理位置计算、宽度同步及显示隐藏逻辑。
+ * 依赖 PopperMixin 进行弹窗定位。
+ * @component UiSelectDropdown
+ */
+export default {
+  name: 'UiSelectDropdown',
+  components: {},
+  mixins: [Popper],
+  props: {
+    /**
+     * 弹出层出现的位置
+     * @type {String}
+     * @default 'bottom-start'
+     */
+    placement: { default: 'bottom-start' },
+    /**
+     * 边界内边距
+     * @type {Number}
+     * @default 0
+     */
+    boundariesPadding: { default: 0 },
+    /**
+     * Popper.js 的配置项
+     * @type {Object}
+     * @default { gpuAcceleration: false }
+     */
+    popperOptions: { default: () => ({ gpuAcceleration: false }) },
+    /**
+     * 是否显示箭头指向
+     * @type {Boolean}
+     * @default true
+     */
+    visibleArrow: { default: true },
+    /**
+     * 是否将弹出层插入到 body 元素中
+     * @type {Boolean}
+     * @default true
+     */
+    appendToBody: { type: Boolean, default: true },
+  },
+  data: () => ({
+    /**
+     * 下拉框的最小宽度，通常同步自输入框宽度
+     * @type {String}
+     */
+    minWidth: ''
+  }),
+  filters: {},
+  computed: {
+    /**
+     * 获取父组件设置的自定义类名
+     * @returns {String}
+     */
+    popperClass() {
+      return this.$parent.popperClass;
+    }
+  },
+  watch: {
+    /**
+     * 监听父组件输入框宽度的变化，同步更新下拉框最小宽度
+     */
+    '$parent.inputWidth'() {
+      this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
+    }
+  },
+  mounted() {
+    // 设置 Popper 的参考元素为父组件的 reference 输入框
+    this.referenceElm = this.$parent.$refs.reference.$el;
+    // 设置 Popper 的弹出元素为当前实例根元素
+    this.$parent.popperElm = this.popperElm = this.$el;
+    
+    // 监听更新弹窗位置事件
+    this.$on('updatePopper', () => {
+      if (this.$parent.visible) this.updatePopper();
+    });
+    
+    // 监听销毁弹窗事件
+    this.$on('destroyPopper', this.destroyPopper);
+  },
+  methods: {},
+}
+</script>
+
+<style lang="scss"> </style>

package/src/packages/select/src/utils.js

@@ -0,0 +1,5 @@
+/**
+ * 生成唯一 ID
+ */
+let id = 0
+export const generateId = () => ++id

package/src/packages/skeleton/index.js

@@ -0,0 +1,12 @@
+/**
+ * Skeleton 骨架屏组件
+ */
+
+import UiSkeleton from './src/main.vue'
+
+// 自动安装
+UiSkeleton.install = function(Vue) {
+  Vue.component(UiSkeleton.name, UiSkeleton)
+}
+
+export default UiSkeleton

package/src/packages/skeleton/src/main.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <template v-if="uiLoading">
+      <div :class="['ui-skeleton', animated ? 'is-animated' : '' ]" v-bind="$attrs">
+        <template v-for="i in count">
+          <slot v-if="loading" name="template">
+            <ui-skeleton-item
+              v-for="item in rows"
+              :key="`${i}-${item}`"
+              :class="{
+                'ui-skeleton__paragraph': item !== 1,
+                'is-first': item === 1,
+                'is-last': item === rows && rows > 1,
+              }"
+              variant="p"
+            />
+          </slot>
+        </template>
+      </div>
+    </template>
+    <template v-else>
+      <slot v-bind="$attrs"></slot>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiSkeleton',
+  props: {
+    animated: {
+      type: Boolean,
+      default: false
+    },
+    count: {
+      type: Number,
+      default: 1
+    },
+    rows: {
+      type: Number,
+      default: 4
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    throttle: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    loading: {
+      handler(loading) {
+        if (this.throttle <= 0) {
+          this.uiLoading = loading;
+          return;
+        }
+        if (loading) {
+          clearTimeout(this.timeoutHandle);
+          this.timeoutHandle = setTimeout(() => {
+            this.uiLoading = this.loading;
+          }, this.throttle);
+        } else {
+          this.uiLoading = loading;
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      uiLoading: this.throttle <= 0 ? this.loading : false
+    };
+  }
+};
+</script>

package/src/packages/skeleton-item/index.js

@@ -0,0 +1,12 @@
+/**
+ * SkeletonItem 骨架屏元素组件
+ */
+
+import UiSkeletonItem from './src/main.vue'
+
+// 自动安装
+UiSkeletonItem.install = function(Vue) {
+  Vue.component(UiSkeletonItem.name, UiSkeletonItem)
+}
+
+export default UiSkeletonItem

package/src/packages/skeleton-item/src/img-placeholder.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="ui-skeleton__image">
+    <svg viewBox="0 0 1px 1px" xmlns="http://www.w3.org/2000/svg">
+      <rect width="1" height="1" fill="#ebeef5" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiImgPlaceholder'
+};
+</script>

package/src/packages/skeleton-item/src/main.vue

@@ -0,0 +1,22 @@
+<template>
+  <div :class="['ui-skeleton__item', `ui-skeleton__${variant}`]">
+    <ui-img-placeholder v-if="variant === 'image'" />
+  </div>
+</template>
+
+<script>
+import UiImgPlaceholder from './img-placeholder.vue';
+
+export default {
+  name: 'UiSkeletonItem',
+  props: {
+    variant: {
+      type: String,
+      default: 'text'
+    }
+  },
+  components: {
+    'ui-img-placeholder': UiImgPlaceholder
+  }
+};
+</script>

package/src/packages/slider/index.js

@@ -0,0 +1,12 @@
+/**
+ * Slider 滑块组件
+ */
+
+import UiSlider from './src/main.vue'
+
+// 自动安装
+UiSlider.install = function(Vue) {
+  Vue.component(UiSlider.name, UiSlider)
+}
+
+export default UiSlider