misp-ui-library-test 0.0.1

package/src/mixins/migrating.js

@@ -0,0 +1,46 @@
+/**
+ * @file migrating.js
+ * @description 组件迁移辅助混入，用于在开发环境下检测并警告废弃的 API 使用
+ */
+
+import { kebabCase } from '../utils/lodash/index.js';
+
+export default {
+  /**
+   * 检查当前组件使用的 props 和 events 是否存在于废弃配置中，若是则输出警告
+   * 仅在非生产环境下执行
+   */
+  mounted() {
+    if (process.env.NODE_ENV === 'production') return;
+
+    if (!this.$vnode) return;
+    const { props = {}, events = {} } = this.getMigratingConfig()
+    const { data, componentOptions } = this.$vnode
+    const definedProps = data.attrs || {}
+    const definedEvents = componentOptions.listeners || {}
+    for (let propName in definedProps) {
+      propName = kebabCase(propName)
+      if (props[propName]) {
+        console.warn(`[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`)
+      }
+    }
+    for (let eventName in definedEvents) {
+      eventName = kebabCase(eventName)
+      if (events[eventName]) {
+        console.warn(`[Element Migrating][${this.$options.name}][Event]: ${events[eventName]}`)
+      }
+    }
+  },
+  methods: {
+    /**
+     * 获取迁移配置信息
+     * @returns {Object} 配置对象，包含 props 和 events 的废弃映射
+     * @returns {Object} return.props - 废弃属性的映射表 (key: 废弃名，value: 提示文案)
+     * @returns {Object} return.events - 废弃事件的映射表 (key: 废弃名，value: 提示文案)
+     * @note 使用此混入的组件应重写此方法以返回具体的配置
+     */
+    getMigratingConfig() {
+      return { props: {}, events: {} }
+    }
+  }
+};

package/src/packages/alert/index.js

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

package/src/packages/alert/src/main.vue

@@ -0,0 +1,98 @@
+<template>
+  <transition name="ui-alert-fade">
+    <div
+      class="ui-alert"
+      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
+      v-show="visible"
+      role="alert"
+    >
+      <i class="ui-alert__icon" :class="[iconClass, isBigIcon]" v-if="showIcon"></i>
+      <div class="ui-alert__content">
+        <span class="ui-alert__title" :class="[isBoldTitle]" v-if="title || $slots.title">
+          <slot name="title">{{ title }}</slot>
+        </span>
+        <p class="ui-alert__description" v-if="$slots.default && !description"><slot></slot></p>
+        <p class="ui-alert__description" v-if="description && !$slots.default">{{ description }}</p>
+        <i class="ui-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+const TYPE_CLASSES_MAP = {
+  'success': 'icon-success',
+  'warning': 'icon-warning',
+  'error': 'icon-error'
+};
+
+export default {
+  name: 'UiAlert',
+
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'info',
+      validator: value => {
+        return ['success', 'warning', 'error', 'info'].includes(value);
+      }
+    },
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    closeText: {
+      type: String,
+      default: ''
+    },
+    showIcon: Boolean,
+    center: Boolean,
+    effect: {
+      type: String,
+      default: 'light',
+      validator: function(value) {
+        return ['light', 'dark'].indexOf(value) !== -1;
+      }
+    }
+  },
+
+  data() {
+    return {
+      visible: true
+    };
+  },
+
+  methods: {
+    close() {
+      this.visible = false;
+      this.$emit('close');
+    }
+  },
+
+  computed: {
+    typeClass() {
+      return `ui-alert--${this.type}`;
+    },
+
+    iconClass() {
+      return TYPE_CLASSES_MAP[this.type] || 'icon-info';
+    },
+
+    isBigIcon() {
+      return this.description || this.$slots.default ? 'is-big' : '';
+    },
+
+    isBoldTitle() {
+      return this.description || this.$slots.default ? 'is-bold' : '';
+    }
+  }
+};
+</script>

package/src/packages/aside/index.js

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

package/src/packages/aside/src/main.vue

@@ -0,0 +1,20 @@
+<template>
+  <aside class="ui-aside" :style="{ width }">
+    <slot></slot>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'UiAside',
+
+  componentName: 'UiAside',
+
+  props: {
+    width: {
+      type: String,
+      default: '300px'
+    }
+  }
+};
+</script>

package/src/packages/auto-grid-layout/index.js

@@ -0,0 +1,18 @@
+/**
+ * GridLayout 组件
+ * 提供可拖拽排布的 Grid 布局
+ */
+
+import UiAutoGridLayout from './src/main.vue'
+import UiGridLayout from './src/components/GridLayout.vue'
+import UiGridItem from './src/components/GridItem.vue'
+
+// 自动安装
+UiGridLayout.install = function(Vue) {
+  Vue.component(UiAutoGridLayout.name, UiAutoGridLayout)
+  Vue.component(UiGridLayout.name, UiGridLayout)
+  Vue.component(UiGridItem.name, UiGridItem)
+}
+
+export default UiAutoGridLayout
+export { UiGridLayout as GridLayout, UiGridItem as GridItem }

package/src/packages/auto-grid-layout/prop.js

@@ -0,0 +1,92 @@
+import { Layout, LayoutProp } from '../../playground/types/layout.js'
+
+/**
+ * @typedef {Object} ItemProp
+ * @property {number} x - 网格 X 坐标
+ * @property {number} y - 网格 Y 坐标
+ * @property {number} w - 网格宽度
+ * @property {number} h - 网格高度
+ * @property {string} i - 唯一标识
+ * @property {boolean} [static] - 是否静态不可移动
+ * @property {boolean} [isResizable] - 是否可调整大小
+ * @property {Element} [instance] - 元素实例
+ */
+
+/**
+ * @typedef {Object} AutoGridLayoutExtraProp
+ * @property {number} colNum - 列数
+ * @property {number} rowNum - 行数
+ * @property {ItemProp[]} children - 子项数组
+ * @property {[number, number]} margin - 边距
+ * @property {boolean} [isDraggable] - 是否可拖拽
+ * @property {boolean} [isResizable] - 是否可调整大小
+ * @property {boolean} [verticalCompact] - 是否垂直紧凑
+ * @property {boolean} [useCssTransforms] - 是否使用 CSS 变换
+ */
+/**
+ * @typedef {Omit<LayoutProp, keyof AutoGridLayoutExtraProp> & AutoGridLayoutExtraProp} AutoGridLayoutProp
+ */
+
+/**
+ * AutoGrid 类 - 自动网格布局
+ * @extends Layout
+ */
+export class AutoGridLayout extends Layout {
+    className = 'AutoGridLayout'
+    /**
+   * 创建 AutoGrid 实例
+   * @constructor
+   * @param {AutoGridLayoutProp} options - 自动网格布局配置选项
+   * @param {number} options.colNum - 列数（必须为正整数）
+   * @param {number} options.rowNum - 行数（必须为正整数）
+   * @param {ItemProp[]} [options.children=[]] - 子项数组
+   * @param {[number, number]} [options.margin=[0, 0]] - 边距，两个数字组成的数组
+   * @param {boolean} [options.isDraggable=true] - 是否可拖拽
+   * @param {boolean} [options.isResizable=true] - 是否可调整大小
+   * @param {boolean} [options.verticalCompact=true] - 是否垂直紧凑
+   * @param {boolean} [options.useCssTransforms=true] - 是否使用 CSS 变换
+   * @throws {TypeError} 当 colNum 不是正整数时抛出
+   * @throws {TypeError} 当 rowNum 不是正整数时抛出
+   * @throws {TypeError} 当 children 不是 Element 数组时抛出
+   * @throws {TypeError} 当 margin 不是两个数字组成的数组时抛出
+   */
+  constructor(options) {
+    const {
+      colNum,
+      rowNum,
+      children = [],
+      margin = [0, 0],
+      isDraggable = true,
+      isResizable = true,
+      verticalCompact = true,
+      useCssTransforms = true,
+      ...boxProp
+    } = options
+    if (!Array.isArray(children) || children.some(e => !(e.instance instanceof Element))) {
+      throw new TypeError('children 必须为 Element 数组')
+    }
+    if (!Array.isArray(margin) || margin.length !== 2 || !margin.every(v => typeof v === 'number')) {
+      throw new TypeError('margin 必须为两个数字组成的数组')
+    }
+
+    // 调用父类构造函数
+    super({ ...boxProp, children: [], margin })
+
+    // 参数校验
+    if (!colNum || typeof colNum !== 'number') {
+      throw new TypeError('colNum 必须为正整数')
+    }
+    if (typeof rowNum !== 'number') {
+      throw new TypeError('rowNum 必须为正整数')
+    }
+
+    this.colNum = colNum
+    this.rowNum = rowNum
+    this.children = children
+    this.margin = margin
+    this.isDraggable = isDraggable
+    this.isResizable = isResizable
+    this.verticalCompact = verticalCompact
+    this.useCssTransforms = useCssTransforms
+  }
+}