misp-ui-library-test 0.0.1

package/src/packages/loading/index.js

@@ -0,0 +1,17 @@
+/**
+ * Loading 加载组件
+ */
+
+import UiLoading from './src/main.vue'
+import UiLoadingDirective from './src/directive'
+import UiLoadingService from './src/service'
+
+// 自动安装
+UiLoading.install = function(Vue) {
+  Vue.component(UiLoading.name, UiLoading)
+  Vue.directive('loading', UiLoadingDirective)
+  Vue.use(UiLoadingService)
+}
+
+export default UiLoading
+export { UiLoadingDirective, UiLoadingService }

package/src/packages/loading/src/directive.js

@@ -0,0 +1,54 @@
+/**
+ * Loading 指令
+ */
+
+import UiLoading from './main.vue'
+
+/**
+ * 创建加载实例
+ */
+function createLoading(el, binding) {
+  const loadingComponent = new (el._vue || el.ownerDocument.defaultView.Vue)({
+    render(h) {
+      return h(UiLoading, {
+        props: {
+          visible: binding.value !== false,
+          fullscreen: binding.modifiers.fullscreen || false,
+          text: binding.arg || '',
+          lock: binding.modifiers.lock || false
+        }
+      })
+    }
+  })
+
+  const dom = loadingComponent.$mount()
+  el.appendChild(dom.$el)
+
+  return loadingComponent
+}
+
+/**
+ * Loading 指令配置
+ */
+export default {
+  inserted(el, binding) {
+    const loading = createLoading(el, binding)
+    el.uiLoadingInstance = loading
+  },
+
+  update(el, binding) {
+    const instance = el.uiLoadingInstance
+    if (instance) {
+      instance.$el.style.display = binding.value === false ? 'none' : ''
+    }
+  },
+
+  unbind(el) {
+    const instance = el.uiLoadingInstance
+    if (instance) {
+      instance.$destroy()
+      instance.$el.remove()
+      delete el.uiLoadingInstance
+    }
+  }
+}

package/src/packages/loading/src/main.vue

@@ -0,0 +1,38 @@
+<template>
+  <transition name="ui-loading-fade">
+    <div v-if="visible" class="ui-loading" :class="{ 'is-fullscreen': fullscreen }">
+      <div class="ui-loading__mask"></div>
+      <div class="ui-loading__spinner">
+        <svg class="ui-loading__circular" viewBox="25 25 50 50">
+          <circle class="ui-loading__path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"></circle>
+        </svg>
+        <div v-if="text" class="ui-loading__text">{{ text }}</div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'UiLoading',
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    lock: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>

package/src/packages/loading/src/service.js

@@ -0,0 +1,63 @@
+/**
+ * Loading 服务
+ */
+
+import UiLoading from './main.vue'
+import Vue from 'vue'
+
+/**
+ * 创建加载实例
+ * @param {Object} options 配置项
+ * @param {Boolean} options.fullscreen 是否全屏
+ * @param {String} options.text 加载提示文字
+ * @param {Boolean} options.lock 是否锁定页面
+ * @param {Element} options.target 目标元素
+ * @param {Boolean} options.visible 是否可见
+ */
+function createLoadingComponent(options = {}) {
+  const mountingDom = document.createElement('div')
+
+  const instance = new Vue({
+    render(h) {
+      return h(UiLoading, {
+        props: {
+          visible: options.visible !== false,
+          fullscreen: options.fullscreen || false,
+          text: options.text || '',
+          lock: options.lock || false
+        }
+      })
+    }
+  })
+
+  instance.$mount(mountingDom)
+
+  const target = options.target || document.body
+  target.appendChild(mountingDom)
+
+  return {
+    $el: mountingDom,
+    instance,
+    close() {
+      instance.$destroy()
+      mountingDom.remove()
+    }
+  }
+}
+
+/**
+ * Loading 服务函数
+ * @param {Object} options 配置项
+ */
+function Loading(options = {}) {
+  return createLoadingComponent(options)
+}
+
+/**
+ * 安装到 Vue
+ */
+Loading.install = function(Vue) {
+  Vue.prototype.$loading = Loading
+}
+
+export default Loading

package/src/packages/main/index.js

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

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

@@ -0,0 +1,12 @@
+<template>
+  <main class="ui-main">
+    <slot></slot>
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'UiMain',
+  componentName: 'UiMain'
+};
+</script>

package/src/packages/menu/index.js

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

package/src/packages/menu/src/main.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="ui-menu"
+    :class="[
+      mode === 'horizontal' ? 'ui-menu--horizontal' : 'ui-menu--vertical',
+      backgroundColor ? '' : 'ui-menu--dark',
+      collapse ? 'is-collapse' : ''
+    ]"
+    role="menu"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiMenu',
+
+  componentName: 'UiMenu',
+
+  props: {
+    mode: {
+      type: String,
+      default: 'vertical',
+      validator: val => ['vertical', 'horizontal'].indexOf(val) > -1
+    },
+    defaultActive: String,
+    defaultOpeneds: Array,
+    uniqueOpened: Boolean,
+    router: Boolean,
+    menuTrigger: {
+      type: String,
+      default: 'hover',
+      validator: val => ['hover', 'click'].indexOf(val) > -1
+    },
+    collapse: Boolean,
+    backgroundColor: String,
+    textColor: String,
+    activeTextColor: String
+  },
+
+  data() {
+    return {
+      openedMenus: [],
+      items: {},
+      submenus: {}
+    };
+  },
+
+  provide() {
+    return {
+      rootMenu: this
+    };
+  },
+
+  watch: {
+    defaultOpeneds(val) {
+      this.openedMenus = val;
+    }
+  },
+
+  methods: {
+    addMenuItem(item) {
+      this.items[item.index] = item;
+    },
+    removeMenuItem(item) {
+      delete this.items[item.index];
+    },
+    addSubmenu(submenu) {
+      this.submenus[submenu.index] = submenu;
+    },
+    removeSubmenu(submenu) {
+      delete this.submenus[submenu.index];
+    },
+    openMenu(index, indexPath) {
+      const openedMenus = this.openedMenus;
+      if (this.uniqueOpened) {
+        this.openedMenus = [index];
+      } else {
+        const i = openedMenus.indexOf(index);
+        if (i === -1) {
+          this.openedMenus = [...openedMenus, index];
+        }
+      }
+    },
+    closeMenu(index) {
+      const i = this.openedMenus.indexOf(index);
+      if (i > -1) {
+        this.openedMenus.splice(i, 1);
+      }
+    },
+    handleMenuItemClick(data) {
+      if (this.mode === 'horizontal') {
+        this.openedMenus = [];
+      }
+      if (this.router) {
+        this.routeToMenu(data.index);
+      }
+      this.$emit('select', data.index, data.indexPath);
+    },
+    routeToMenu(path) {
+      // router 模式下的路由跳转逻辑
+    },
+    open(index) {
+      const indexPath = this.submenus[index] ? this.submenus[index].indexPath : [];
+      this.openMenu(index, indexPath);
+    },
+    close(index) {
+      this.closeMenu(index);
+    }
+  },
+
+  created() {
+    this.openedMenus = this.defaultOpeneds || [];
+  }
+};
+</script>

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

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

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

@@ -0,0 +1,61 @@
+<template>
+  <li
+    class="ui-menu-item"
+    :class="{
+      'is-active': isActive,
+      'is-disabled': disabled
+    }"
+    role="menuitem"
+    @click="handleClick"
+  >
+    <i class="ui-menu-item__icon" :class="icon" v-if="icon"></i>
+    <slot></slot>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'UiMenuItem',
+
+  componentName: 'UiMenuItem',
+
+  inject: ['rootMenu'],
+
+  props: {
+    index: {
+      type: String,
+      required: true
+    },
+    route: [String, Object],
+    disabled: Boolean
+  },
+
+  data() {
+    return {
+      isActive: false
+    };
+  },
+
+  props: {
+    icon: String
+  },
+
+  methods: {
+    handleClick() {
+      if (this.disabled) return;
+      this.rootMenu.handleMenuItemClick({
+        index: this.index,
+        indexPath: this.indexPath
+      });
+    }
+  },
+
+  created() {
+    this.rootMenu.addMenuItem(this);
+  },
+
+  beforeDestroy() {
+    this.rootMenu.removeMenuItem(this);
+  }
+};
+</script>

package/src/packages/message/index.js

@@ -0,0 +1,95 @@
+import MessageComponent from './src/main.vue';
+import Vue from 'vue';
+
+const MessageConstructor = Vue.extend(MessageComponent);
+
+let instance;
+let instances = [];
+let seed = 1;
+
+const Message = function(options) {
+  if (Vue.prototype.$isServer) return;
+
+  options = options || {};
+
+  if (typeof options === 'string') {
+    options = {
+      message: options
+    };
+  }
+
+  let userOnClose = options.onClose;
+  const id = 'message_' + seed++;
+
+  options.onClose = function() {
+    Message.close(id, userOnClose);
+  };
+
+  instance = new MessageConstructor({
+    propsData: options
+  });
+
+  instance.id = id;
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+  
+  let verticalOffset = options.offset || 20;
+  instances.forEach(item => {
+    // 如果 dom 还没有高度（可能是因为尚未完成布局），给定一个接近默认高度的值
+    // 这里的 16 是消息之间的间距
+    verticalOffset += (item.$el.offsetHeight || 44) + 16;
+  });
+  instance.verticalOffset = verticalOffset;
+  instance.visible = true;
+
+  // 监听组件的 close 事件
+  instance.$on('close', () => {
+    Message.close(id, userOnClose);
+  });
+
+  instances.push(instance);
+  return instance;
+};
+
+['success', 'warning', 'info', 'error'].forEach(type => {
+  Message[type] = options => {
+    if (typeof options === 'string') {
+      options = {
+        message: options
+      };
+    }
+    options.type = type;
+    return Message(options);
+  };
+});
+
+Message.close = function(id, userOnClose) {
+  let len = instances.length;
+  let index = -1;
+  let removedHeight;
+  for (let i = 0; i < len; i++) {
+    if (id === instances[i].id) {
+      index = i;
+      removedHeight = instances[i].$el.offsetHeight;
+      if (typeof userOnClose === 'function') {
+        userOnClose(instances[i]);
+      }
+      instances.splice(i, 1);
+      break;
+    }
+  }
+  if (len <= 1 || index === -1 || index > instances.length - 1) return;
+  for (let i = index; i < len - 1; i++) {
+    // 通过数据驱动更新后续消息的位置
+    instances[i].verticalOffset =
+      instances[i].verticalOffset - removedHeight - 16;
+  }
+};
+
+Message.closeAll = function() {
+  for (let i = instances.length - 1; i >= 0; i--) {
+    instances[i].close();
+  }
+};
+
+export default Message;

package/src/packages/message/src/main.vue

@@ -0,0 +1,131 @@
+<template>
+  <transition name="ui-message-fade" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
+    <div
+      v-if="visible"
+      class="ui-message"
+      :class="[type ? 'ui-message--' + type : '', center ? 'is-center' : '', customClass]"
+      :style="positionStyle"
+      role="alert"
+      @mouseenter="clearTimer"
+      @mouseleave="startTimer"
+    >
+      <i class="ui-message__icon" :class="iconClassComputed" v-if="showIcon"></i>
+      <p class="ui-message__content">
+        <slot>{{ message }}</slot>
+      </p>
+      <i class="ui-message__closebtn ui-icon-close" v-if="showClose" @click="close"></i>
+    </div>
+  </transition>
+</template>
+
+<script>
+const TYPE_ICON_MAP = {
+  'success': 'ui-icon-success',
+  'warning': 'ui-icon-warning',
+  'info': 'ui-icon-info',
+  'error': 'ui-icon-error'
+};
+
+export default {
+  name: 'UiMessage',
+
+  props: {
+    message: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'info',
+      validator: value => ['success', 'warning', 'info', 'error'].indexOf(value) > -1
+    },
+    iconClass: {
+      type: String,
+      default: ''
+    },
+    showClose: {
+      type: Boolean,
+      default: false
+    },
+    duration: {
+      type: Number,
+      default: 3000
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    offset: {
+      type: Number,
+      default: 20
+    },
+    zIndex: {
+      type: Number,
+      default: 2000
+    }
+  },
+
+  data() {
+    return {
+      visible: false,
+      timer: null,
+      verticalOffset: 20
+    };
+  },
+
+  computed: {
+    iconClassComputed() {
+      return this.iconClass || TYPE_ICON_MAP[this.type] || '';
+    },
+    positionStyle() {
+      return {
+        top: `${this.verticalOffset}px`,
+        zIndex: this.zIndex
+      };
+    }
+  },
+
+  mounted() {
+    this.startTimer();
+  },
+
+  beforeDestroy() {
+    this.clearTimer();
+  },
+
+  methods: {
+    startTimer() {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          if (this.visible) {
+            this.close();
+          }
+        }, this.duration);
+      }
+    },
+    clearTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+    },
+    close() {
+      this.visible = false;
+    },
+    onBeforeLeave() {
+      this.$emit('close');
+    },
+    onAfterLeave() {
+      this.$emit('closed');
+      this.$destroy();
+    }
+  }
+};
+</script>

package/src/packages/message-box/index.js

@@ -0,0 +1,75 @@
+import MessageBoxComponent from './src/main.vue';
+import Vue from 'vue';
+
+const MessageBoxConstructor = Vue.extend(MessageBoxComponent);
+
+let currentMsg;
+let instance;
+
+const MessageBox = function(options = {}) {
+  console.log('MessageBox called with options:', options);
+  if (Vue.prototype.$isServer) return;
+
+  return new Promise((resolve, reject) => {
+    const callback = action => {
+      if (action === 'confirm') {
+        if (options.showInput) {
+          resolve({ value: instance.internalValue, action });
+        } else {
+          resolve(action);
+        }
+      } else if (action === 'cancel' || action === 'close') {
+        reject(action);
+      }
+      
+      // 关闭后移除
+      instance.$nextTick(() => {
+        if (instance.$el && instance.$el.parentNode) {
+          instance.$el.parentNode.removeChild(instance.$el);
+        }
+        instance.$destroy();
+      });
+    };
+
+    instance = new MessageBoxConstructor({
+      propsData: options
+    });
+
+    instance.$mount();
+    document.body.appendChild(instance.$el);
+    
+    // 必须在挂载后设置 visible，确保触发 transition 和渲染
+    instance.visible = true;
+
+    instance.$on('close', callback);
+    instance.$on('confirm', () => {
+      // confirm 时已经通过 v-model 同步到 instance.internalValue 了
+      callback('confirm');
+    });
+    instance.$on('cancel', () => callback('cancel'));
+
+    currentMsg = instance;
+  });
+};
+
+['alert', 'confirm', 'prompt'].forEach(type => {
+  MessageBox[type] = function(message, title, options) {
+    if (typeof message === 'object') {
+      return MessageBox(message);
+    }
+    if (typeof title === 'object') {
+      options = title;
+      title = '';
+    }
+
+    return MessageBox({
+      title: title || '提示',
+      message: message,
+      showInput: type === 'prompt',
+      showCancelButton: type !== 'alert',
+      ...options
+    });
+  };
+});
+
+export default MessageBox;