misp-ui-library-test 0.0.1

package/src/packages/time-picker/src/time-input.vue

@@ -0,0 +1,203 @@
+<template>
+  <ui-input
+    ref="reference"
+    class="ui-time-trigger"
+    :style="inputStyleProp"
+    v-model="timeStr"
+    :readonly="readonly"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :prefix-icon="prefixIcon"
+    :size="size"
+    @change="handleTimeManualChange"
+    @focus="handleFocus"
+  >
+    <i v-if="clearable" slot="suffix" class="clear-icon ui-icon-circle-close" @mousedown.prevent @click="handleClear" />
+  </ui-input>
+</template>
+
+<script>
+import UiInput from '../../input/src/main.vue'
+
+import { getTextWidth, getStyle } from '../../../utils/dom/index.js'
+import { formatDate, parseDate, modifyDate, modifyTime } from '../../../utils/moment/index.js'
+import { isNaN } from '../../../utils/lodash/index.js'
+
+export default {
+  name: 'time-input',
+  components: { UiInput },
+  mixins: [],
+  props: {
+    value: { type: Date, default: null },
+    format: String,
+    compact: Boolean,
+    readonly: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    prefixIcon: { type: String, default: '' },
+    clearable: Boolean,
+    size: String,
+    inRange: Boolean
+  },
+  data: () => ({
+    timeStr: '',
+    labelWidth: 0,
+  }),
+  filters: {},
+  computed: {
+    timeFormat() {
+      return this.format.replace('-range', '')
+    },
+    // 新增计算属性：判断是否为时间戳模式
+    isTimestampMode() {
+      return this.timeFormat && this.timeFormat.toLowerCase().includes('timestamp')
+    },
+    inputStyleProp() {
+      if (this.compact && this.labelWidth) {
+        const prefinIconWidth = this.prefixIcon ? 20 : 0
+        const clearIconWidth = this.clearable ? 15 : 0
+        const innerPadding = this.inRange ? 12 : 28
+        return { width: `${this.labelWidth + prefinIconWidth + clearIconWidth + innerPadding}px` }
+      } else {
+        return {}
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler(time) {
+        // 修改：支持时间戳模式
+        if (this.isTimestampMode) {
+          this.timeStr = time ? String(time.getTime()) : ''
+        } else {
+          this.timeStr = time ? formatDate(time, this.timeFormat) : ''
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+    timeFormat: {
+      handler() {
+        this.labelWidthCalc()
+      },
+      immediate: true,
+      deep: true,
+    },
+    compact() {
+      this.labelWidthCalc()
+    }
+  },
+  created() {
+    this.labelWidthCalc()
+  },
+  mounted() {},
+  activated() {},
+  beforeDestroy() {},
+  methods: {
+    handleTimeManualChange(inputStr) {
+      // 修改：支持时间戳模式的清空处理
+      if (!inputStr) {
+        if (this.isTimestampMode) {
+          this.timeStr = this.value ? String(this.value.getTime()) : ''
+        } else {
+          this.timeStr = this.value ? formatDate(this.value, this.timeFormat) : ''
+        }
+        return
+      }
+
+      let newDate = null
+
+      // 修改：支持时间戳模式的解析
+      if (this.isTimestampMode) {
+        const timestamp = Number(inputStr)
+        if (!isNaN(timestamp)) {
+          newDate = new Date(timestamp)
+          // 验证日期是否有效
+          if (isNaN(newDate.getTime())) {
+            newDate = null
+          }
+        }
+      } else {
+        const parsedDate = parseDate(inputStr, this.timeFormat)
+        // 修改非法时间，恢复为原时间
+        if (!parsedDate || isNaN(parsedDate.getTime())) {
+           // 非时间戳模式下的原有逻辑
+           this.timeStr = this.value ? formatDate(this.value, this.timeFormat) : ''
+           return
+        }
+        
+        // 提取年月日时分秒
+        const year = parsedDate.getFullYear()
+        const month = parsedDate.getMonth()
+        const day = parsedDate.getDate()
+        const hours = parsedDate.getHours()
+        const minutes = parsedDate.getMinutes()
+        const seconds = parsedDate.getSeconds()
+
+        // 基准日期，从 value 中获取
+        let baseDate = this.value
+        if (!baseDate) {
+          baseDate = new Date()
+        }
+
+        // 合并时间
+        newDate = modifyTime(modifyDate(baseDate, year, month, day), hours, minutes, seconds)
+      }
+
+      // 统一处理最终结果
+      if (!newDate) {
+         // 如果解析失败，恢复原值
+         if (this.isTimestampMode) {
+            this.timeStr = this.value ? String(this.value.getTime()) : ''
+         } else {
+            this.timeStr = this.value ? formatDate(this.value, this.timeFormat) : ''
+         }
+         return
+      }
+
+      // 更新显示字符串和触发事件
+      if (this.isTimestampMode) {
+        this.timeStr = String(newDate.getTime())
+      } else {
+        this.timeStr = formatDate(newDate, this.timeFormat)
+      }
+      
+      this.$emit('input', newDate)
+    },
+    labelWidthCalc() {
+      this.$nextTick(() => {
+        const fontStyle = getStyle(this.$refs.reference?.$el?.querySelector('.ui-input__inner'), 'font')
+        if (fontStyle) {
+          let textToMeasure = ''
+          
+          // 修改：支持时间戳模式的宽度计算
+          if (this.isTimestampMode) {
+            // 使用一个较长的典型时间戳字符串来估算宽度，例如当前时间或最大安全整数时间戳
+            // 这里使用一个典型的13位时间戳作为参考
+            textToMeasure = '9999999999999' 
+          } else {
+            const maxDate = new Date(9999, 11, 31, 23, 59, 59)
+            textToMeasure = formatDate(maxDate, this.timeFormat)
+          }
+
+          if (textToMeasure) {
+            this.labelWidth = getTextWidth(textToMeasure, fontStyle)
+          } else {
+            this.labelWidth = 0
+          }
+        } else {
+          this.labelWidth = 0
+        }
+      })
+    },
+    handleFocus() {
+      this.$emit('focus', ...arguments)
+    },
+    handleClear() {
+      this.$emit('clear')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/packages/time-picker/src/time-range-input.vue

@@ -0,0 +1,170 @@
+<template>
+  <div
+    v-init="handleInit"
+    :class="[
+      'ui-time-range-input',
+      `ui-time-range-input--${size}`,
+      clearable ? 'is-clearable' : '',
+      prefixIcon ? 'is-prefixicon' : '',
+      compact ? 'is-compact' : '',
+    ]"
+  >
+    <i v-if="prefixIcon" :class="['prefix-icon', prefixIcon]" />
+    <!-- 开始时间输入 -->
+    <time-input
+      ref="startInput"
+      class="range-item start"
+      :value="startTime"
+      :format="format"
+      :compact="compact"
+      in-range
+      v-bind="startInputProps"
+      @input="handleStartChange"
+      @focus="handleFocus"
+    />
+    <!-- 分隔符 -->
+    <span class="range-separator">{{ separator }}</span>
+    <!-- 结束时间输入 -->
+    <time-input
+      ref="endInput"
+      class="range-item end"
+      :value="endTime"
+      :format="format"
+      :compact="compact"
+      in-range
+      v-bind="endInputProps"
+      @input="handleEndChange"
+      @focus="handleFocus"
+    />
+    <i v-if="clearable" class="clear-icon ui-icon-circle-close" @mousedown.prevent @click="handleClear" />
+  </div>
+</template>
+
+<script>
+import TimeInput from './time-input.vue'
+
+import init from '../../../directives/init/index.js'
+
+export default {
+  name: 'time-range-input',
+  components: {
+    TimeInput,
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    format: {
+      type: String,
+      default: 'HH:mm:ss',
+    },
+    separator: { type: String, default: '~' },
+    compact: Boolean,
+    config: { type: Object, default: () => ({}) },
+  },
+  data() {
+    return {
+      parentTriggerEl: null,
+      startTime: null,
+      endTime: null,
+    }
+  },
+  computed: {
+    startInputProps() {
+      return {
+        readonly: this.config.readonly || false,
+        disabled: this.config.disabled || false,
+        placeholder: this.config.startPlaceholder || '',
+        size: this.config.size || '',
+      }
+    },
+    endInputProps() {
+      return {
+        readonly: this.config.readonly || false,
+        disabled: this.config.disabled || false,
+        placeholder: this.config.endPlaceholder || '',
+        size: this.config.size || '',
+      }
+    },
+    size() {
+      return this.config.size || ''
+    },
+    prefixIcon() {
+      return this.config.prefixIcon || ''
+    },
+    clearable() {
+      return this.config.clearable || false
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (Array.isArray(val) && val.length >= 2) {
+          this.startTime = val[0]
+          this.endTime = val[1]
+        } else {
+          this.startTime = null
+          this.endTime = null
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  directives: { init },
+  methods: {
+    handleInit(el) {
+      if (!el) return
+      this.parentTriggerEl = el
+      el.focus = () => this.handleTriggerFocus()
+      el.blur = () => this.handleTriggerBlur()
+    },
+    handleStartChange(newDate) {
+      this.startTime = newDate
+      this.emitUpdate()
+    },
+    handleEndChange(newDate) {
+      this.endTime = newDate
+      this.emitUpdate()
+    },
+    // 协同更新
+    emitUpdate() {
+      if (this.startTime && this.endTime) {
+        // 规整 开始时间 < 结束时间
+        if (this.startTime.getTime() > this.endTime.getTime()) {
+          this.$emit('input', [this.endTime, this.startTime])
+        } else {
+          this.$emit('input', [this.startTime, this.endTime])
+        }
+      } else if (!this.startTime && !this.endTime) {
+        this.$emit('input', [])
+      }
+    },
+    handleTriggerFocus() {
+      // 获取当前被点击的具体元素
+      const focusing = document.activeElement
+      // 当前已聚焦在结束时间，跳过缺省聚焦
+      if (this.$refs.endInput && focusing && this.$refs.endInput.$el.contains(focusing)) {
+        return
+      }
+      // 否则，聚焦开始时间
+      this.$refs.startInput?.$el?.querySelector('.ui-input__inner')?.focus()
+    },
+    handleTriggerBlur() {
+      const focusing = document.activeElement
+      if (!focusing) return
+      this.parentTriggerEl.contains(focusing) && focusing.blur()
+    },
+    // focus 穿透
+    handleFocus(event) {
+      this.$emit('focus', event)
+    },
+    handleClear() {
+      this.$emit('clear')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/packages/timeline/index.js

@@ -0,0 +1,12 @@
+/**
+ * Timeline 时间线组件
+ */
+
+import UiTimeline from './src/main.vue'
+
+// 自动安装
+UiTimeline.install = function(Vue) {
+  Vue.component(UiTimeline.name, UiTimeline)
+}
+
+export default UiTimeline

package/src/packages/timeline/src/main.vue

@@ -0,0 +1,24 @@
+<template>
+  <ul class="ui-timeline" :class="{ 'is-reverse': reverse }">
+    <slot></slot>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'UiTimeline',
+
+  props: {
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  provide() {
+    return {
+      timeline: this
+    };
+  }
+};
+</script>

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

@@ -0,0 +1,12 @@
+/**
+ * TimelineItem 时间线项组件
+ */
+
+import UiTimelineItem from './src/main.vue'
+
+// 自动安装
+UiTimelineItem.install = function(Vue) {
+  Vue.component(UiTimelineItem.name, UiTimelineItem)
+}
+
+export default UiTimelineItem

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

@@ -0,0 +1,78 @@
+<template>
+  <li class="ui-timeline-item">
+    <div class="ui-timeline-item__tail"></div>
+
+    <div v-if="!$slots.dot"
+      class="ui-timeline-item__node"
+      :class="[
+        `ui-timeline-item__node--${size || ''}`,
+        `ui-timeline-item__node--${type || ''}`
+      ]"
+      :style="{
+        backgroundColor: color
+      }"
+    >
+      <i v-if="icon"
+        class="ui-timeline-item__icon"
+        :class="icon"
+      ></i>
+    </div>
+    <div v-if="$slots.dot" class="ui-timeline-item__dot">
+      <slot name="dot"></slot>
+    </div>
+
+    <div class="ui-timeline-item__wrapper">
+      <div v-if="!hideTimestamp && placement === 'top'"
+        class="ui-timeline-item__timestamp is-top">
+        {{timestamp}}
+      </div>
+
+      <div class="ui-timeline-item__content">
+        <slot></slot>
+      </div>
+
+      <div v-if="!hideTimestamp && placement === 'bottom'"
+        class="ui-timeline-item__timestamp is-bottom">
+        {{timestamp}}
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'UiTimelineItem',
+
+  inject: ['timeline'],
+
+  props: {
+    timestamp: String,
+
+    hideTimestamp: {
+      type: Boolean,
+      default: false
+    },
+
+    placement: {
+      type: String,
+      default: 'bottom',
+      validator: value => ['top', 'bottom'].includes(value)
+    },
+
+    type: {
+      type: String,
+      validator: value => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
+    },
+
+    color: String,
+
+    size: {
+      type: String,
+      default: 'normal',
+      validator: value => ['normal', 'large'].includes(value)
+    },
+
+    icon: String
+  }
+};
+</script>

package/src/packages/tooltip/index.js

@@ -0,0 +1,12 @@
+/**
+ * Tooltip 文字提示组件
+ */
+
+import UiTooltip from './src/main.js'
+
+// 自动安装
+UiTooltip.install = function(Vue) {
+  Vue.component(UiTooltip.name, UiTooltip)
+}
+
+export default UiTooltip