misp-ui-library-test 0.0.1

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

@@ -0,0 +1,82 @@
+<template>
+  <div class="ui-dropdown" :class="[trigger && 'ui-dropdown--' + trigger]">
+    <ui-tooltip
+      ref="tooltip"
+      v-model="visible"
+      :trigger="trigger"
+      :placement="placement"
+      :disabled="disabled"
+      :show-arrow="showArrow"
+    >
+      <template slot="content">
+        <div class="ui-dropdown__menu" ref="menu">
+          <slot name="dropdown"></slot>
+        </div>
+      </template>
+      <slot>
+        <div class="ui-dropdown__trigger">
+          <slot name="trigger"></slot>
+        </div>
+      </slot>
+    </ui-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiDropdown',
+
+  componentName: 'UiDropdown',
+
+  props: {
+    trigger: {
+      type: String,
+      default: 'hover',
+      validator: value => ['hover', 'click', 'focus', 'contextmenu'].indexOf(value) > -1
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    disabled: Boolean,
+    showArrow: {
+      type: Boolean,
+      default: true
+    },
+    hideOnClick: {
+      type: Boolean,
+      default: true
+    },
+    triggerElm: {}
+  },
+
+  data() {
+    return {
+      visible: false
+    };
+  },
+
+  provide() {
+    return {
+      dropdown: this
+    };
+  },
+
+  methods: {
+    handleItemClick(item) {
+      if (this.hideOnClick) {
+        this.visible = false;
+      }
+      this.$emit('command', item.command, item);
+    },
+    show() {
+      if (this.disabled) return;
+      this.visible = true;
+    },
+    hide() {
+      if (this.disabled) return;
+      this.visible = false;
+    }
+  }
+};
+</script>

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

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

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

@@ -0,0 +1,29 @@
+<template>
+  <li class="ui-dropdown-menu__item" :class="{
+    'is-disabled': disabled,
+    'is-divided': divided
+  }" @click="handleClick">
+    <slot></slot>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'UiDropdownMenuItem',
+
+  inject: ['dropdown'],
+
+  props: {
+    command: {},
+    disabled: Boolean,
+    divided: Boolean
+  },
+
+  methods: {
+    handleClick() {
+      if (this.disabled) return;
+      this.dropdown.handleItemClick(this);
+    }
+  }
+};
+</script>

package/src/packages/empty/index.js

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

package/src/packages/empty/src/img-empty.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg class="ui-empty__image-path" viewBox="0 0 64 64">
+    <path d="M48,20a3,3,0,0,0-3-3H33V15a5,5,0,0,0-10,0v2H11a3,3,0,0,0-3,3V48a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3ZM25,15a3,3,0,0,1,6,0v2H25ZM11,20H23v8a1,1,0,0,0,2,0V20h8v8a1,1,0,0,0,2,0V20h8a1,1,0,0,1,1,1V48a1,1,0,0,1-1,1H11a1,1,0,0,1-1-1V20A1,1,0,0,1,11,20Z" />
+    <path d="M38.88,32.36a5.53,5.53,0,0,0-3.63-1.37,5.71,5.71,0,0,0-5.59,5.65v5.37a1.62,1.62,0,0,1-1.61,1.62H28a1.62,1.62,0,0,1-1.61-1.62V36.6a5.63,5.63,0,1,0-2,4.3v-4.3a1,1,0,1,0-2,0v5a5.61,5.61,0,1,0,4-5.35V36.6a3.72,3.72,0,0,1,3.63-3.65,3.55,3.55,0,0,1,2.61,1,3.71,3.71,0,0,1,1.09,2.68v5.37A3.62,3.62,0,0,0,28,45.63h0a3.62,3.62,0,0,0,3.63,3.62h.05A3.62,3.62,0,0,0,35.3,45.63V40.2a1,1,0,0,0-2,0v5.43a1.62,1.62,0,0,1-1.61,1.62h0a1.62,1.62,0,0,1-1.61-1.62v-9a3.71,3.71,0,0,1,1.09-2.68,3.55,3.55,0,0,1,2.61-1,3.72,3.72,0,0,1,2.61,1,3.71,3.71,0,0,1,1.09,2.68V40.2a1,1,0,0,0,2,0v-3.57A5.71,5.71,0,0,0,38.88,32.36Z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'UiImgEmpty'
+};
+</script>

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="ui-empty">
+    <div class="ui-empty__image" :style="imageStyle">
+      <img v-if="image" :src="image" ondragstart="return false">
+      <slot v-else name="image">
+        <ui-img-empty />
+      </slot>
+    </div>
+    <div class="ui-empty__description">
+      <slot v-if="$slots.description" name="description"></slot>
+      <p v-else>{{ emptyDescription }}</p>
+    </div>
+    <div v-if="$slots.default" class="ui-empty__bottom">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import UiImgEmpty from './img-empty.vue';
+
+export default {
+  name: 'UiEmpty',
+  components: {
+    'ui-img-empty': UiImgEmpty
+  },
+  props: {
+    image: {
+      type: String,
+      default: ''
+    },
+    imageSize: Number,
+    description: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    emptyDescription() {
+      return this.description || 'Empty';
+    },
+    imageStyle() {
+      return {
+        width: this.imageSize ? `${this.imageSize}px` : ''
+      };
+    }
+  }
+};
+</script>

package/src/packages/footer/index.js

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

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

@@ -0,0 +1,20 @@
+<template>
+  <footer class="ui-footer" :style="{ height }">
+    <slot></slot>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'UiFooter',
+
+  componentName: 'UiFooter',
+
+  props: {
+    height: {
+      type: String,
+      default: '60px'
+    }
+  }
+};
+</script>

package/src/packages/form/index.js

@@ -0,0 +1,13 @@
+/**
+ * Form 表单组件
+ */
+
+import UiForm from './src/main.vue'
+import UiFormItem from './src/form-item.vue'
+
+UiForm.install = function(Vue) {
+  Vue.component(UiForm.name, UiForm)
+  Vue.component(UiFormItem.name, UiFormItem)
+}
+
+export default UiForm