misp-ui-library-test 0.0.1

package/src/packages/color-picker/src/main.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="ui-color-picker" :class="{ 'is-focus': isFocus }">
+    <div class="ui-color-picker__trigger" @click="handleTriggerClick">
+      <div class="ui-color-picker__color" :style="{ backgroundColor: currentValue }"></div>
+      <i class="ui-color-picker__icon icon-arrow-down"></i>
+    </div>
+    <transition name="ui-zoom-in-top">
+      <div v-show="pickerVisible" class="ui-color-picker__panel" ref="colorPanel">
+        <div class="ui-color-picker__body">
+          <div class="ui-color-picker__saturation" ref="saturation">
+            <div class="ui-color-picker__saturation--white"></div>
+            <div class="ui-color-picker__saturation--black"></div>
+            <div
+              class="ui-color-picker__cursor"
+              :style="{ left: cursorLeft + 'px', top: cursorTop + 'px' }"
+            ></div>
+          </div>
+          <div class="ui-color-picker__hue" ref="hue">
+            <div class="ui-color-picker__hue--thumb" :style="{ top: hueThumbTop + 'px' }"></div>
+          </div>
+        </div>
+        <div class="ui-color-picker__options">
+          <div class="ui-color-picker__preset-colors">
+            <span
+              v-for="(color, index) in presetColors"
+              :key="index"
+              class="ui-color-picker__color-box"
+              :style="{ backgroundColor: color }"
+              @click="selectColor(color)"
+            ></span>
+          </div>
+          <div class="ui-color-picker__input-wrapper">
+            <input
+              type="text"
+              v-model="colorInput"
+              class="ui-color-picker__input"
+              @change="handleColorInputChange"
+            >
+          </div>
+        </div>
+        <div class="ui-color-picker__footer">
+          <ui-button size="small" @click="cancel">取消</ui-button>
+          <ui-button size="small" type="primary" @click="confirm">确定</ui-button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiColorPicker',
+
+  props: {
+    value: {
+      type: String,
+      default: '#000000'
+    },
+    presetColors: {
+      type: Array,
+      default: () => [
+        '#FF0000', '#FF7F00', '#FFFF00', '#00FF00',
+        '#0000FF', '#4B0082', '#9400D3', '#000000',
+        '#FFFFFF', '#808080', '#800000', '#008000'
+      ]
+    }
+  },
+
+  data() {
+    return {
+      pickerVisible: false,
+      isFocus: false,
+      currentValue: this.value,
+      colorInput: this.value,
+      hue: 0,
+      saturation: 100,
+      lightness: 50,
+      cursorLeft: 100,
+      cursorTop: 0,
+      hueThumbTop: 0
+    };
+  },
+
+  watch: {
+    value(val) {
+      this.currentValue = val;
+      this.colorInput = val;
+    },
+    pickerVisible(val) {
+      if (val) {
+        document.addEventListener('click', this.handleDocumentClick);
+        this.initColor();
+      } else {
+        document.removeEventListener('click', this.handleDocumentClick);
+      }
+    }
+  },
+
+  methods: {
+    hexToRgb(hex) {
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+      return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      } : null;
+    },
+    rgbToHex(r, g, b) {
+      return '#' + [r, g, b].map(x => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+      }).join('');
+    },
+    rgbToHsl(r, g, b) {
+      r /= 255;
+      g /= 255;
+      b /= 255;
+      const max = Math.max(r, g, b);
+      const min = Math.min(r, g, b);
+      let h, s, l = (max + min) / 2;
+
+      if (max === min) {
+        h = s = 0;
+      } else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+          case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+          case g: h = ((b - r) / d + 2) / 6; break;
+          case b: h = ((r - g) / d + 4) / 6; break;
+        }
+      }
+      return { h: h * 360, s: s * 100, l: l * 100 };
+    },
+    hslToRgb(h, s, l) {
+      h /= 360;
+      s /= 100;
+      l /= 100;
+      let r, g, b;
+
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        const hue2rgb = (p, q, t) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1/6) return p + (q - p) * 6 * t;
+          if (t < 1/2) return q;
+          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+          return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+      }
+      return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+    },
+    initColor() {
+      const rgb = this.hexToRgb(this.currentValue);
+      if (rgb) {
+        const hsl = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
+        this.hue = hsl.h;
+        this.saturation = hsl.s;
+        this.lightness = hsl.l;
+        this.updateCursor();
+      }
+    },
+    updateCursor() {
+      this.cursorLeft = (this.saturation / 100) * 100;
+      this.cursorTop = (1 - this.lightness / 100) * 100;
+      this.hueThumbTop = (this.hue / 360) * 100;
+    },
+    handleTriggerClick() {
+      this.pickerVisible = !this.pickerVisible;
+    },
+    selectColor(color) {
+      this.currentValue = color;
+      this.colorInput = color;
+      this.initColor();
+    },
+    handleColorInputChange() {
+      if (/^#[0-9A-Fa-f]{6}$/.test(this.colorInput)) {
+        this.currentValue = this.colorInput;
+        this.initColor();
+      }
+    },
+    cancel() {
+      this.currentValue = this.value;
+      this.colorInput = this.value;
+      this.pickerVisible = false;
+    },
+    confirm() {
+      this.$emit('input', this.currentValue);
+      this.$emit('change', this.currentValue);
+      this.pickerVisible = false;
+    },
+    handleDocumentClick(event) {
+      if (this.$el && !this.$el.contains(event.target)) {
+        this.pickerVisible = false;
+      }
+    }
+  }
+};
+</script>

package/src/packages/container/index.js

@@ -0,0 +1,12 @@
+/**
+ * Container 布局容器组件
+ */
+
+import UiContainer from './src/main.vue'
+
+// 自动安装
+UiContainer.install = function(Vue) {
+  Vue.component(UiContainer.name, UiContainer)
+}
+
+export default UiContainer

package/src/packages/container/src/main.vue

@@ -0,0 +1,33 @@
+<template>
+  <section class="ui-container" :class="{ 'is-vertical': isVertical }">
+    <slot></slot>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'UiContainer',
+
+  componentName: 'UiContainer',
+
+  props: {
+    direction: String
+  },
+
+  computed: {
+    isVertical() {
+      if (this.direction === 'vertical') {
+        return true;
+      } else if (this.direction === 'horizontal') {
+        return false;
+      }
+      return this.$slots && this.$slots.default
+        ? this.$slots.default.some(vnode => {
+          const tag = vnode.componentOptions && vnode.componentOptions.tag;
+          return tag === 'ui-header' || tag === 'ui-footer';
+        })
+        : false;
+    }
+  }
+};
+</script>

package/src/packages/date-picker/index.js

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

package/src/packages/date-picker/src/main.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="ui-date-picker" :class="[showClose ? 'is-focus' : '']">
+    <ui-input
+      v-model="inputValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="!editable"
+      :name="name"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @clear="handleClear"
+    >
+      <i slot="prefix" class="ui-input__icon icon-calendar"></i>
+    </ui-input>
+    <transition name="ui-zoom-in-top">
+      <div
+        v-show="pickerVisible"
+        class="ui-date-picker__panel"
+        :class="popperClass"
+        ref="picker"
+      >
+        <div class="ui-date-picker__header">
+          <button class="ui-date-picker__button" @click="prevYear">
+            <i class="icon-arrow-left"></i>
+          </button>
+          <span class="ui-date-picker__year" @click="showYearPicker = !showYearPicker">
+            {{ currentYear }}年
+          </span>
+          <span class="ui-date-picker__month" @click="showMonthPicker = !showMonthPicker">
+            {{ currentMonth + 1 }}月
+          </span>
+          <button class="ui-date-picker__button" @click="nextYear">
+            <i class="icon-arrow-right"></i>
+          </button>
+        </div>
+        <div class="ui-date-picker__body">
+          <div class="ui-date-picker__week-header">
+            <span v-for="day in weekDays" :key="day">{{ day }}</span>
+          </div>
+          <div class="ui-date-picker__content">
+            <div
+              v-for="(date, index) in calendarDates"
+              :key="index"
+              class="ui-date-picker__cell"
+              :class="{
+                'is-current-month': date.isCurrentMonth,
+                'is-today': date.isToday,
+                'is-selected': date.isSelected,
+                'is-disabled': date.isDisabled
+              }"
+              @click="handleDateClick(date)"
+            >
+              <span>{{ date.date }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="ui-date-picker__footer" v-if="showTime">
+          <ui-time-picker v-model="selectedTime" @change="handleTimeChange"></ui-time-picker>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+const WEEK_DAYS = ['日', '一', '二', '三', '四', '五', '六'];
+const formatDate = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+export default {
+  name: 'UiDatePicker',
+
+  props: {
+    value: {},
+    placeholder: {
+      type: String,
+      default: '选择日期'
+    },
+    disabled: Boolean,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    format: {
+      type: String,
+      default: 'YYYY-MM-DD'
+    },
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    popperClass: String,
+    disabledDate: Function,
+    minDate: Date,
+    maxDate: Date
+  },
+
+  data() {
+    return {
+      pickerVisible: false,
+      inputValue: '',
+      currentDate: new Date(),
+      selectedDate: null,
+      selectedTime: '',
+      showYearPicker: false,
+      showMonthPicker: false,
+      showClose: false
+    };
+  },
+
+  computed: {
+    weekDays() {
+      return WEEK_DAYS;
+    },
+    currentYear() {
+      return this.currentDate.getFullYear();
+    },
+    currentMonth() {
+      return this.currentDate.getMonth();
+    },
+    calendarDates() {
+      const year = this.currentYear;
+      const month = this.currentMonth;
+      const firstDay = new Date(year, month, 1);
+      const lastDay = new Date(year, month + 1, 0);
+      const startDate = new Date(firstDay);
+      startDate.setDate(startDate.getDate() - startDate.getDay());
+
+      const dates = [];
+      const today = new Date();
+
+      for (let i = 0; i < 42; i++) {
+        const date = new Date(startDate);
+        date.setDate(startDate.getDate() + i);
+
+        const isSelected = this.selectedDate &&
+          date.toDateString() === this.selectedDate.toDateString();
+
+        const isToday = date.toDateString() === today.toDateString();
+        const isDisabled = this.disabledDate && this.disabledDate(date);
+
+        dates.push({
+          date: date.getDate(),
+          fullDate: date,
+          isCurrentMonth: date.getMonth() === month,
+          isToday,
+          isSelected,
+          isDisabled
+        });
+      }
+
+      return dates;
+    }
+  },
+
+  watch: {
+    value(val) {
+      if (val) {
+        this.inputValue = val instanceof Date ? formatDate(val) : val;
+        this.selectedDate = val instanceof Date ? val : new Date(val);
+        this.currentDate = new Date(this.selectedDate);
+      } else {
+        this.inputValue = '';
+        this.selectedDate = null;
+      }
+    },
+    pickerVisible(val) {
+      if (val) {
+        document.addEventListener('click', this.handleDocumentClick);
+      } else {
+        document.removeEventListener('click', this.handleDocumentClick);
+      }
+    }
+  },
+
+  methods: {
+    prevYear() {
+      this.currentDate = new Date(this.currentYear - 1, this.currentMonth, 1);
+    },
+    nextYear() {
+      this.currentDate = new Date(this.currentYear + 1, this.currentMonth, 1);
+    },
+    prevMonth() {
+      this.currentDate = new Date(this.currentYear, this.currentMonth - 1, 1);
+    },
+    nextMonth() {
+      this.currentDate = new Date(this.currentYear, this.currentMonth + 1, 1);
+    },
+    handleDateClick(date) {
+      if (date.isDisabled) return;
+      this.selectedDate = date.fullDate;
+      this.inputValue = formatDate(date.fullDate);
+      this.$emit('input', this.selectedDate);
+      this.$emit('change', this.selectedDate);
+      this.pickerVisible = false;
+    },
+    handleFocus() {
+      if (this.disabled) return;
+      this.pickerVisible = true;
+      this.showClose = true;
+    },
+    handleBlur() {
+      this.showClose = false;
+    },
+    handleClear() {
+      this.inputValue = '';
+      this.selectedDate = null;
+      this.$emit('input', null);
+      this.$emit('change', null);
+    },
+    handleDocumentClick(event) {
+      if (this.$el && !this.$el.contains(event.target)) {
+        this.pickerVisible = false;
+      }
+    },
+    handleTimeChange(time) {
+      if (this.selectedDate) {
+        const [hours, minutes] = time.split(':');
+        this.selectedDate.setHours(parseInt(hours), parseInt(minutes));
+        this.$emit('input', this.selectedDate);
+        this.$emit('change', this.selectedDate);
+      }
+    }
+  },
+
+  mounted() {
+    if (this.value) {
+      this.inputValue = this.value instanceof Date
+        ? formatDate(this.value)
+        : this.value;
+      this.selectedDate = this.value instanceof Date
+        ? this.value
+        : new Date(this.value);
+    }
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleDocumentClick);
+  }
+};
+</script>

package/src/packages/descriptions/index.js

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

package/src/packages/descriptions/src/main.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="ui-descriptions" :class="[border ? 'is-bordered' : '', size ? 'ui-descriptions--' + size : '']">
+    <div v-if="title || $slots.title" class="ui-descriptions__header">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <table class="ui-descriptions__body">
+      <tbody>
+        <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+          <template v-for="(item, colIndex) in row">
+            <td
+              v-if="item"
+              :key="colIndex"
+              :class="['ui-descriptions__cell', labelClassName, item.className]"
+              :style="{ width: item.width }"
+            >
+              <div class="ui-descriptions__cell-content">
+                <span class="ui-descriptions__label">{{ item.label }}</span>
+                <span class="ui-descriptions__content">
+                  <slot :name="item.prop" :row="data">{{ item.content }}</slot>
+                </span>
+              </div>
+            </td>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiDescriptions',
+
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    columns: {
+      type: Number,
+      default: 3
+    },
+    title: String,
+    border: Boolean,
+    size: {
+      type: String,
+      validator: val => ['large', 'medium', 'small', 'mini', ''].includes(val)
+    },
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: val => ['horizontal', 'vertical'].includes(val)
+    },
+    labelClassName: String
+  },
+
+  computed: {
+    rows() {
+      const { columns, items } = this;
+      const rows = [];
+      let row = [];
+
+      items.forEach((item, index) => {
+        row.push(item);
+        if (row.length === columns) {
+          rows.push(row);
+          row = [];
+        }
+      });
+
+      if (row.length) {
+        rows.push(row);
+      }
+
+      return rows;
+    },
+    items() {
+      return this.$children.map(child => ({
+        label: child.label,
+        prop: child.prop,
+        content: child.content || this.data[child.prop],
+        width: child.width,
+        className: child.className,
+        labelClassName: child.labelClassName
+      }));
+    }
+  }
+};
+</script>

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

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

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="ui-descriptions-item">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiDescriptionsItem',
+
+  props: {
+    label: String,
+    span: {
+      type: Number,
+      default: 1
+    },
+    width: String,
+    labelWidth: String,
+    content: String,
+    className: String,
+    labelClassName: String
+  },
+
+  inject: ['descriptions']
+};
+</script>

package/src/packages/dialog/index.js

@@ -0,0 +1,12 @@
+/**
+ * Dialog 对话框组件
+ */
+
+import UiDialog from './src/main.vue'
+
+// 自动安装
+UiDialog.install = function(Vue) {
+  Vue.component(UiDialog.name, UiDialog)
+}
+
+export default UiDialog