misp-ui-library-test 0.0.1

package/src/packages/steps/src/main.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="ui-steps"
+    :class="[
+       !simple && 'ui-steps--' + direction,
+       simple && 'ui-steps--simple'
+     ]">
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiSteps',
+
+  props: {
+    space: [Number, String],
+    active: Number,
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: value => ['horizontal', 'vertical'].includes(value)
+    },
+    alignCenter: Boolean,
+    simple: Boolean,
+    finishStatus: {
+      type: String,
+      default: 'finish',
+      validator: value => ['finish', 'success', 'error', 'process', 'wait'].includes(value)
+    },
+    processStatus: {
+      type: String,
+      default: 'process',
+      validator: value => ['finish', 'success', 'error', 'process', 'wait'].includes(value)
+    }
+  },
+
+  data() {
+    return {
+      steps: [],
+      stepOffset: 0
+    };
+  },
+
+  watch: {
+    active(newVal, oldVal) {
+      this.$emit('change', newVal, oldVal);
+    },
+
+    steps(steps) {
+      steps.forEach((child, index) => {
+        child.index = index;
+      });
+    }
+  }
+};
+</script>

package/src/packages/submenu/index.js

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

package/src/packages/submenu/src/main.vue

@@ -0,0 +1,68 @@
+<template>
+  <li class="ui-submenu" :class="{ 'is-opened': isOpened }" role="menuitem">
+    <div class="ui-submenu__title" @click="handleClick">
+      <i class="ui-submenu__icon" :class="icon" v-if="icon"></i>
+      <slot name="title"></slot>
+      <i class="ui-submenu__arrow icon-arrow-down" :class="{ 'is-active': isOpened }"></i>
+    </div>
+    <transition name="ui-menu-collapse">
+      <ul class="ui-menu ui-menu--inline" v-show="isOpened">
+        <slot></slot>
+      </ul>
+    </transition>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'UiSubmenu',
+
+  componentName: 'UiSubmenu',
+
+  inject: ['rootMenu'],
+
+  props: {
+    index: {
+      type: String,
+      required: true
+    },
+    disabled: Boolean
+  },
+
+  data() {
+    return {
+      isOpened: false
+    };
+  },
+
+  computed: {
+    parentMenu() {
+      let parent = this.$parent;
+      while (parent.$options.name !== 'UiMenu' && parent.$options.name !== 'UiSubmenu') {
+        parent = parent.$parent;
+      }
+      return parent;
+    }
+  },
+
+  methods: {
+    handleClick() {
+      if (this.disabled) return;
+      this.isOpened = !this.isOpened;
+      if (this.isOpened) {
+        this.rootMenu.openMenu(this.index, this.indexPath);
+      } else {
+        this.rootMenu.closeMenu(this.index);
+      }
+    }
+  },
+
+  created() {
+    this.rootMenu.addSubmenu(this);
+  },
+
+  beforeDestroy() {
+    this.rootMenu.removeSubmenu(this);
+  }
+};
+</script>

package/src/packages/switch/index.js

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

package/src/packages/switch/src/main.vue

@@ -0,0 +1,166 @@
+<template>
+  <div :class="['ui-switch', `ui-switch--${size}`, disabled ? 'is-disabled' : '', checked ? 'is-checked' : '']" role="switch" :aria-checked="checked" :aria-disabled="disabled" @click.prevent="switchValue">
+    <input class="ui-switch__input" type="checkbox" ref="input" :checked="checked" :disabled="disabled" />
+    <span :class="['ui-switch__label', 'ui-switch__label--left', !checked ? 'is-active' : '']" v-if="inactiveIcon || inactiveText">
+      <i :class="[inactiveIcon]" v-if="inactiveIcon" :style="inactiveColorProp" />
+      <span v-if="!inactiveIcon && inactiveText" :style="inactiveColorProp">{{ inactiveText }}</span>
+    </span>
+    <span class="ui-switch__core" ref="core" :style="coreProp" />
+    <span :class="['ui-switch__label', 'ui-switch__label--right', checked ? 'is-active' : '']" v-if="activeIcon || activeText">
+      <i :class="[activeIcon]" v-if="activeIcon" :style="activeColorProp" />
+      <span v-if="!activeIcon && activeText" :style="activeColorProp">{{ activeText }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+import { getCssVar } from '../../../utils/dom/index.js'
+import { colorOpacityTrans } from '../../../utils/color.js'
+import { kebabCase } from '../../../utils/lodash/index.js'
+
+/**
+ * UiSwitch 开关组件
+ * 用于表示两种相互对立的状态间的切换，多用于触发「开/关」动作。
+ */
+export default {
+  name: 'UiSwitch',
+  props: {
+    /**
+     * 绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型
+     * @type {Boolean|String|Number}
+     */
+    value: { type: [Boolean, String, Number], default: false },
+    
+    /**
+     * 是否禁用
+     * @type {Boolean}
+     */
+    disabled: Boolean,
+    
+    /**
+     * switch 的大小
+     * @type {String}
+     */
+    size: String,
+    
+    /**
+     * switch 打开时的值
+     * @type {Boolean|String|Number}
+     */
+    activeValue: { type: [Boolean, String, Number], default: true },
+    
+    /**
+     * switch 关闭时的值
+     * @type {Boolean|String|Number}
+     */
+    inactiveValue: { type: [Boolean, String, Number], default: false },
+    
+    /**
+     * switch 打开时显示的文字
+     * @type {String}
+     */
+    activeText: String,
+    
+    /**
+     * switch 关闭时显示的文字
+     * @type {String}
+     */
+    inactiveText: String,
+    
+    /**
+     * switch 打开时显示的图标
+     * @type {String}
+     */
+    activeIcon: String,
+    
+    /**
+     * switch 关闭时显示的图标
+     * @type {String}
+     */
+    inactiveIcon: String,
+    
+    /**
+     * switch 打开时的背景色
+     * @type {String}
+     */
+    activeColor: String,
+    
+    /**
+     * switch 关闭时的背景色
+     * @type {String}
+     */
+    inactiveColor: String,
+    
+    /**
+     * switch 对应的 id 属性
+     * @type {String}
+     */
+    id: String,
+    
+    /**
+     * switch 对应的 name 属性
+     * @type {String}
+     */
+    name: { type: String, default: '' },
+  },
+  computed: {
+    /**
+     * 当前是否处于选中状态
+     * @returns {Boolean}
+     */
+    checked() {
+      return this.value === this.activeValue
+    },
+    coreProp() {
+      return {
+        backgroundColor: this.checked ? this.getColor(this.activeColor) : this.getColor(this.inactiveColor),
+        borderColor: this.checked ? this.getColor(this.activeColor) : this.getColor(this.inactiveColor),
+      }
+    },
+    activeColorProp() {
+      return { color: this.getColor(this.activeColor) }
+    },
+    inactiveColorProp() {
+      return { color: this.getColor(this.inactiveColor) }
+    },
+  },
+  watch: {
+    /**
+     * 监听 value 变化，触发 change 事件
+     * @param {Boolean|String|Number} val - 新的值
+     */
+    value(val) {
+      this.$emit('change', val)
+    },
+  },
+  methods: {
+    /**
+     * 切换开关状态值
+     * 当点击开关且未禁用时，根据当前状态切换为 activeValue 或 inactiveValue，并触发 input 和 change 事件
+     */
+    switchValue() {
+      if (this.disabled) return
+
+      const newVal = this.checked ? this.inactiveValue : this.activeValue
+      this.$emit('input', newVal)
+      this.$emit('change', newVal)
+    },
+    
+    /**
+     * 处理原生 checkbox 的 change 事件（保留方法以兼容潜在用法，当前模板主要使用 click 事件）
+     * @param {Event} event - 原生事件对象
+     */
+    handleChange(event) {
+      this.$emit('change', event.target.checked ? this.activeValue : this.inactiveValue)
+    },
+
+    getColor(colorName) {
+      let colorStr = (typeof document !== 'undefined') ? getCssVar(document.documentElement, colorName) : ''
+      if (colorStr) return `var(--${kebabCase(colorName)})`
+      else return colorOpacityTrans(colorStr)
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/packages/tab-pane/index.js

@@ -0,0 +1,12 @@
+/**
+ * TabPane 标签页面板组件
+ */
+
+import UiTabPane from './src/main.vue'
+
+// 自动安装
+UiTabPane.install = function(Vue) {
+  Vue.component(UiTabPane.name, UiTabPane)
+}
+
+export default UiTabPane

package/src/packages/tab-pane/src/main.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="ui-tab-pane"
+    v-if="(!lazy || loaded) || active"
+    v-show="active"
+    role="tabpanel"
+    :aria-hidden="!active"
+    :id="`pane-${paneName}`"
+    :aria-labelledby="`tab-${paneName}`"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiTabPane',
+
+  componentName: 'UiTabPane',
+
+  props: {
+    label: String,
+    labelContent: Function,
+    name: String,
+    closable: Boolean,
+    disabled: Boolean,
+    lazy: Boolean
+  },
+
+  inject: ['rootTabs'],
+
+  data() {
+    return {
+      index: null,
+      loaded: false
+    };
+  },
+
+  computed: {
+    isClosable() {
+      return this.closable || (this.rootTabs && this.rootTabs.closable);
+    },
+    active() {
+      const active = (this.rootTabs && this.rootTabs.currentName) === (this.name || this.index);
+      if (active) {
+        this.loaded = true;
+      }
+      return active;
+    },
+    paneName() {
+      return this.name || this.index;
+    }
+  },
+
+  watch: {
+    label() {
+      if (this.rootTabs) {
+        this.rootTabs.calcPaneInstances();
+      }
+    }
+  },
+
+  mounted() {
+    if (this.rootTabs) {
+      this.rootTabs.calcPaneInstances();
+    }
+  },
+
+  beforeDestroy() {
+    if (this.rootTabs) {
+      this.rootTabs.calcPaneInstances();
+    }
+  }
+};
+</script>

package/src/packages/table/index.js

@@ -0,0 +1,8 @@
+import UiTable from './src/main.vue'
+
+// 自动安装
+UiTable.install = function(Vue) {
+  Vue.component(UiTable.name, UiTable)
+}
+
+export default UiTable

package/src/packages/table/src/components/PagePagination.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="pagination-wrapper">
+    <ui-pagination
+      class="pagination"
+      :current-page.sync="page"
+      :page-size.sync="size"
+      :page-sizes="sizes"
+      :total="total"
+      :layout="layout"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+      background
+    />
+    <div style="clear: both" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PagePagination',
+  props: {
+    currentPage: { type: Number, default: 1 },
+    currentSize: { type: Number, default: 10 },
+    sizes: { type: Array, default: () => [10, 20, 50] },
+    total: { type: Number, default: 0 },
+    layout: { type: String, default: 'total, prev, pager, next, sizes, jumper' }
+  },
+  data: () => ({
+    page: 0,
+    size: 0
+  }),
+  watch: {
+    currentPage: {
+      handler(page) {
+        this.page = page
+      },
+      immediate: true,
+      deep: true
+    },
+    currentSize: {
+      handler(size) {
+        this.size = size
+      },
+      immediate: true,
+      deep: true
+    },
+    page: {
+      handler(newVal) {
+        this.$emit('update:current-page', newVal)
+        this.$emit('change')
+      }
+    },
+    size: {
+      handler(newVal) {
+        this.$emit('update:current-size', newVal)
+        this.$emit('change')
+      }
+    }
+  },
+  methods: {
+    handleCurrentChange(page) {
+      this.page = page
+      this.$emit('page-change', page)
+    },
+    handleSizeChange(size) {
+      this.size = size
+      this.$emit('size-change', size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination-wrapper {
+  margin-top: 10px;
+  user-select: none;
+
+  .pagination {
+    float: right;
+  }
+}
+</style>

package/src/packages/table/src/main.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="ui-table">
+    <div class="ui-table__wrapper">
+      <vxe-grid
+        ref="xGrid"
+        class="ui-table__grid"
+        border="none"
+        show-overflow
+        keep-source
+        :pager-config="false"
+        :sort-config="sortConfigProp"
+        :filter-config="filterConfigProp"
+        height="auto"
+        auto-resize
+        v-bind="mergedOptions"
+        @page-change="$emit('page-change', $event)"
+        @sort-change="handleSortFilter"
+        @filter-change="handleSortFilter"
+        @radio-change="handleRadioChange"
+        @row-dragend="rowDragendEvent"
+        v-on="$listeners"
+      >
+        <template slot="empty"><div /></template>
+        <!-- 将所有的插槽透传给 vxe-grid -->
+        <template v-for="slotName in Object.keys($scopedSlots)" #[slotName]="prop">
+          <slot :name="slotName" v-bind="prop" />
+        </template>
+      </vxe-grid>
+    </div>
+    <div v-show="!hasData && !gridOptions.loading" class="ui-table__no-data">
+      <no-data />
+    </div>
+    <page-pagination
+      v-if="pageable"
+      v-show="hasData"
+      :current-page="safePagerConfig.currentPage"
+      :current-size="safePagerConfig.pageSize"
+      :total="safePagerConfig.total"
+      :sizes="safePagerConfig.sizes"
+      @change="$emit('reload')"
+      @page-change="$emit('page-change', $event)"
+      @size-change="$emit('size-change', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import PagePagination from './components/PagePagination.vue'
+import NoData from '../../no-data/src/main.vue'
+
+const WIDTH_MAP = {
+  'large': '25%',
+  'lar-middle': '20%',
+  'middle': '15%',
+  'mid-small': '10%',
+  'small': '5%',
+  'flexible': ''
+}
+
+export default {
+  name: 'UiTable',
+  components: {
+    PagePagination,
+    NoData
+  },
+  props: {
+    gridOptions: { type: Object, default: () => ({
+      pagerConfig: { currentPage: 1, pageSize: 10, total: 0, sizes: [10, 20, 50] }
+    }) },
+    pageable: { type: Boolean, default: true },
+    customSort: { type: Boolean, default: true }
+  },
+  computed: {
+    safePagerConfig() {
+      return this.gridOptions.pagerConfig || {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        sizes: [10, 20, 50]
+      }
+    },
+    sortConfigProp() {
+      return { remote: this.customSort }
+    },
+    filterConfigProp() {
+      return { remote: this.customSort }
+    },
+    hasData() {
+      return Array.isArray(this.gridOptions.data) && this.gridOptions.data.length > 0
+    },
+    mergedOptions() {
+      const columns = this.gridOptions.columns ? this.gridOptions.columns.map(col => {
+        const newCol = { ...col }
+        if (col.widthType && WIDTH_MAP[col.widthType]) {
+          newCol.width = WIDTH_MAP[col.widthType]
+        }
+        return newCol
+      }) : []
+
+      return {
+        ...this.gridOptions,
+        columns
+      }
+    }
+  },
+  watch: {
+    'gridOptions.columns': {
+      handler(columns) {
+        if (Array.isArray(columns)) {
+          const widthPrefixColumns = JSON.parse(JSON.stringify(columns))
+          widthPrefixColumns.forEach(column => {
+            if (column.widthType && WIDTH_MAP[column.widthType]) {
+              if (column['width'] !== WIDTH_MAP[column.widthType]) {
+                column['width'] = WIDTH_MAP[column.widthType] || ''
+              }
+            }
+          })
+          // No need to mutate this.gridOptions.columns, just reload them in xGrid
+          if (this.$refs.xGrid && typeof this.$refs.xGrid.reloadColumn === 'function') {
+            this.$refs.xGrid.reloadColumn(widthPrefixColumns)
+          }
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleRadioChange({ row }) {
+      this.$emit('radio-change', row)
+    },
+    rowDragendEvent({ newRow, oldRow, dragPos }) {
+      this.$emit('row-dragend', { newRow, oldRow, dragPos })
+    },
+    handleSortFilter() {
+      const config = {
+        sort: this.$refs.xGrid.getSortColumns(),
+        filter: this.$refs.xGrid.getCheckedFilters()
+      }
+      this.$emit('sort-filter-change', config)
+    },
+    reloadData() {
+      this.$emit('reload')
+    },
+    setCheckboxRow() {
+      this.$refs.xGrid.setCheckboxRow(...arguments)
+    },
+    setRadioRow() {
+      this.$refs.xGrid.setRadioRow(...arguments)
+    }
+  }
+}
+</script>
+

package/src/packages/tabs/index.js

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