misp-ui-library-test 0.0.1

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

@@ -0,0 +1,255 @@
+<template>
+  <div class="ui-pagination" :class="{ 'is-background': background, 'ui-pagination--small': small }">
+    <div class="ui-pagination__sizes" v-if="layout.includes('sizes')">
+      <ui-select v-model="internalPageSize" size="medium" @change="handleSizeChange" :disabled="disabled">
+        <ui-option
+          v-for="size in pageSizes"
+          :key="size"
+          :value="size"
+          :label="size + (t('components.pagination.pagesize') || ' 条/页')"
+        />
+      </ui-select>
+    </div>
+
+    <button
+      type="button"
+      class="btn-prev"
+      :disabled="disabled || internalCurrentPage <= 1"
+      @click="prev"
+    >
+      <span v-if="prevText">{{ prevText }}</span>
+      <i v-else class="ui-icon-arrow-left"></i>
+    </button>
+
+    <ul class="ui-pager" v-if="layout.includes('pager')">
+      <li
+        v-for="page in pages"
+        :key="page"
+        :class="{ active: page === internalCurrentPage }"
+        :disabled="page === '...'"
+        @click="handlePageClick(page)"
+      >
+        {{ page }}
+      </li>
+    </ul>
+
+    <button
+      type="button"
+      class="btn-next"
+      :disabled="disabled || internalCurrentPage === internalPageCount || internalPageCount === 0"
+      @click="next"
+    >
+      <span v-if="nextText">{{ nextText }}</span>
+      <i v-else class="ui-icon-arrow-right"></i>
+    </button>
+
+    <span class="ui-pagination__total" v-if="layout.includes('total') && typeof total === 'number'">
+      {{ t('components.pagination.total', { total }) || ('共 ' + total + ' 条') }}
+    </span>
+
+    <span class="ui-pagination__jump" v-if="layout.includes('jumper')">
+      {{ t('components.pagination.goto') || '前往' }}
+      <input
+        type="number"
+        class="ui-pagination__editor"
+        :value="userInput !== null ? userInput : internalCurrentPage"
+        :disabled="disabled"
+        @input="handleInput($event.target.value)"
+        @change="handleChange($event.target.value)"
+        @keyup.enter="handleChange($event.target.value)"
+        min="1"
+        :max="internalPageCount"
+      />
+      {{ t('components.pagination.pageClassifier') || '页' }}
+    </span>
+  </div>
+</template>
+
+<script>
+import locale from '../../../mixins/locale';
+
+export default {
+  name: 'UiPagination',
+  componentName: 'UiPagination',
+  mixins: [locale],
+
+  props: {
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    small: Boolean,
+    total: Number,
+    pageCount: Number,
+    pagerCount: {
+      type: Number,
+      validator(value) {
+        return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
+      },
+      default: 7
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    layout: {
+      default: 'prev, pager, next, jumper, ->, total'
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 40, 50, 100];
+      }
+    },
+    background: Boolean,
+    disabled: Boolean,
+    hideOnSinglePage: Boolean,
+    prevText: String,
+    nextText: String
+  },
+
+  data() {
+    return {
+      internalCurrentPage: 1,
+      internalPageSize: 0,
+      userInput: null
+    };
+  },
+
+  watch: {
+    currentPage: {
+      immediate: true,
+      handler(val) {
+        this.internalCurrentPage = this.getValidCurrentPage(val);
+      }
+    },
+    pageSize: {
+      immediate: true,
+      handler(val) {
+        this.internalPageSize = isNaN(val) ? 10 : val;
+      }
+    },
+    internalCurrentPage: {
+      immediate: true,
+      handler(newVal) {
+        this.$emit('update:currentPage', newVal);
+      }
+    }
+  },
+
+  computed: {
+    internalPageCount() {
+      if (typeof this.total === 'number') {
+        return Math.max(1, Math.ceil(this.total / this.internalPageSize));
+      } else if (typeof this.pageCount === 'number') {
+        return Math.max(1, this.pageCount);
+      }
+      return null;
+    },
+    pages() {
+      const pages = [];
+      const pageCount = this.internalPageCount || 1;
+      const pagerCount = this.pagerCount;
+      const current = this.internalCurrentPage;
+
+      if (pageCount <= pagerCount) {
+        for (let i = 1; i <= pageCount; i++) {
+          pages.push(i);
+        }
+      } else {
+        const left = Math.floor(pagerCount / 2);
+        let start = current - left;
+        let end = current + left;
+
+        if (start < 1) {
+          start = 1;
+          end = pagerCount;
+        }
+        if (end > pageCount) {
+          end = pageCount;
+          start = pageCount - pagerCount + 1;
+        }
+
+        if (start > 1) {
+          pages.push(1);
+          if (start > 2) {
+            pages.push('...');
+          }
+        }
+
+        for (let i = start; i <= end; i++) {
+          pages.push(i);
+        }
+
+        if (end < pageCount) {
+          if (end < pageCount - 1) {
+            pages.push('...');
+          }
+          pages.push(pageCount);
+        }
+      }
+
+      return pages;
+    }
+  },
+
+  methods: {
+    handlePageClick(page) {
+      if (page === '...' || page === this.internalCurrentPage) return;
+      this.internalCurrentPage = page;
+      this.$emit('current-change', page);
+    },
+    prev() {
+      if (this.disabled) return;
+      const newVal = this.internalCurrentPage - 1;
+      this.internalCurrentPage = this.getValidCurrentPage(newVal);
+      this.$emit('prev-click', this.internalCurrentPage);
+      this.$emit('current-change', this.internalCurrentPage);
+    },
+    next() {
+      if (this.disabled) return;
+      const newVal = this.internalCurrentPage + 1;
+      this.internalCurrentPage = this.getValidCurrentPage(newVal);
+      this.$emit('next-click', this.internalCurrentPage);
+      this.$emit('current-change', this.internalCurrentPage);
+    },
+    getValidCurrentPage(value) {
+      value = parseInt(value, 10);
+      const havePageCount = typeof this.internalPageCount === 'number';
+
+      let resetValue;
+      if (!havePageCount) {
+        if (isNaN(value) || value < 1) resetValue = 1;
+      } else {
+        if (value < 1) {
+          resetValue = 1;
+        } else if (value > this.internalPageCount) {
+          resetValue = this.internalPageCount;
+        }
+      }
+
+      if (resetValue === undefined && isNaN(value)) {
+        resetValue = 1;
+      } else if (resetValue === 0) {
+        resetValue = 1;
+      }
+
+      return resetValue === undefined ? value : resetValue;
+    },
+    handleInput(value) {
+      this.userInput = value;
+    },
+    handleChange(value) {
+      this.internalCurrentPage = this.getValidCurrentPage(value);
+      this.$emit('current-change', this.internalCurrentPage);
+      this.userInput = null;
+    },
+    handleSizeChange(val) {
+      this.internalPageSize = val;
+      this.$emit('update:pageSize', val);
+      this.$emit('size-change', val);
+    }
+  }
+};
+</script>
+

package/src/packages/popconfirm/index.js

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

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

@@ -0,0 +1,89 @@
+<template>
+  <ui-tooltip
+    v-model="visible"
+    :trigger="trigger"
+    :placement="placement"
+    :show-arrow="false"
+  >
+    <div slot="content" class="ui-popconfirm">
+      <div class="ui-popconfirm__title">{{ title }}</div>
+      <div class="ui-popconfirm__actions">
+        <ui-button
+          size="mini"
+          :type="cancelButtonType"
+          @click="handleCancel"
+        >
+          {{ cancelButtonText }}
+        </ui-button>
+        <ui-button
+          size="mini"
+          :type="confirmButtonType"
+          @click="handleConfirm"
+        >
+          {{ confirmButtonText }}
+        </ui-button>
+      </div>
+    </div>
+    <slot></slot>
+  </ui-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'UiPopconfirm',
+
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    confirmButtonText: {
+      type: String,
+      default: '确定'
+    },
+    cancelButtonText: {
+      type: String,
+      default: '取消'
+    },
+    confirmButtonType: {
+      type: String,
+      default: 'primary'
+    },
+    cancelButtonType: {
+      type: String,
+      default: 'text'
+    },
+    trigger: {
+      type: String,
+      default: 'click',
+      validator: value => ['click', 'focus', 'hover'].indexOf(value) > -1
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    },
+    disabled: Boolean,
+    showAfter: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      visible: false
+    };
+  },
+
+  methods: {
+    handleConfirm() {
+      this.$emit('confirm');
+      this.visible = false;
+    },
+    handleCancel() {
+      this.$emit('cancel');
+      this.visible = false;
+    }
+  }
+};
+</script>

package/src/packages/popover/index.js

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