xianniu-ui 0.1.3 → 0.1.4

package/packages/date/main.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="xn-date">
+    <template v-if="mode === 'range'">
+      <el-date-picker
+        :value="value"
+        :type="type"
+        align="right"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :placeholder="placeholder"
+        :start-placeholder="startPlaceholder"
+        :end-placeholder="endPlaceholder"
+        :picker-options="pickerOpts"
+        :format="format ? format : _format.format"
+        :value-format="valueFormat ? valueFormat : _format.valueFormat"
+        :style="styles"
+        :default-time="defaultTime"
+        :disabled="disabled"
+        :readonly="readonly"
+        :clearable="clearable"
+        @input="onChange"
+      />
+    </template>
+    <template v-if="mode === 'group'">
+      <div class="xn-date-group">
+        <el-date-picker
+          v-model="startTime"
+          class="xn-date-group--item"
+          :type="type"
+          v-bind="$attrs"
+          v-on="$listeners"
+          placeholder="开始日期"
+          :disabled="disabled"
+          :readonly="readonly"
+          :clearable="clearable"
+          :format="format ? format : _format.format"
+          :value-format="valueFormat ? valueFormat : _format.valueFormat"
+          :picker-options="groupPickerOptions"
+          @change="onChangeStart"
+        />
+        <span class="xn-date-group--separator">-</span>
+        <el-date-picker
+          v-model="endTime"
+          class="xn-date-group--item"
+          :type="type"
+          v-bind="$attrs"
+          v-on="$listeners"
+          placeholder="结束日期"
+          :disabled="disabled"
+          :readonly="readonly"
+          :clearable="clearable"
+          :picker-options="groupEndPickerOptions"
+          :format="format ? format : _format.format"
+          :value-format="valueFormat ? valueFormat : _format.valueFormat"
+          @change="onChangeEnd"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "XnDate",
+  model: {
+    prop: "value",
+    event: "on-change",
+  },
+  props: {
+    /**
+     * 显示类型
+     * https://element.eleme.cn/#/zh-CN/component/datetime-picker
+     * year/month/date/week/ datetime/datetimerange/daterange
+     */
+    type: {
+      type: String,
+      default: "daterange",
+    },
+    placeholder: {
+      type: String,
+      default: "请选择",
+    },
+    value: {
+      type: [String, Array],
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    // 显示的格式
+    format: {
+      type: String,
+      default: "",
+    },
+    // 值的格式
+    valueFormat: {
+      type: String,
+      default: "",
+    },
+    // 开启快捷选项
+    isShortcut: {
+      type: Boolean,
+      default: false,
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 1,
+    },
+    startPlaceholder: {
+      type: String,
+      default: "开始日期",
+    },
+    endPlaceholder: {
+      type: String,
+      default: "结束日期",
+    },
+    defaultTime: {
+      type: [String, Array],
+      default: null,
+    },
+    isDisabledBefore: {
+      type: Boolean,
+      default: false,
+    },
+    mode: {
+      type: String,
+      default: "range",
+      validator: (val) => {
+        return ["range", "group"].indexOf(val) !== -1;
+      },
+    },
+  },
+  data() {
+    return {
+      startTime: "",
+      endTime: "",
+      groupPickerOptions: {
+        disabledDate: (time) => {
+          if (this.endTime !== "" && this.endTime != null) {
+            // return time.getTime() > new Date(this.endTime);
+          } else {
+            return time.getTime() < new Date(this.endTime);
+          }
+        },
+      },
+      groupEndPickerOptions: {
+        disabledDate: (time) => {
+          if (this.startTime !== "") {
+            return (
+              time.getTime() <=
+              new Date(this.startTime).getTime() - 3600 * 1000 * 24
+            );
+          }
+        },
+      },
+      pickerOptionsDate: {
+        disabledDate: (time) => {
+          return this.isDisabledBefore
+            ? time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
+            : false;
+        },
+      },
+      pickerOptionsPlug: {
+        shortcuts: [
+          {
+            text: "昨天",
+            onClick(picker) {
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24);
+              picker.$emit("pick", [start, start]);
+            },
+          },
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近六个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近十二个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    value: {
+      handler(n) {
+        if (this.mode === "group") {
+          if (Array.isArray(n) && n.length) {
+            this.startTime = n[0];
+            this.endTime = n[1];
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    pickerOpts() {
+      var obj = {};
+      if (this.isShortcut) {
+        obj = Object.assign(obj, this.pickerOptionsPlug);
+      }
+      if (this.isDisabledBefore) {
+        obj = Object.assign(obj, this.pickerOptionsDate);
+      }
+      return obj;
+    },
+    styles() {
+      const _isRange = this.isRange(this.type);
+      return {
+        width: _isRange ? "100%" : "auto",
+      };
+    },
+    _format() {
+      const obj = {};
+      switch (this.type) {
+        case "date":
+          obj.format = "yyyy-MM-dd";
+          obj.valueFormat = "yyyy-MM-dd HH:mm:ss";
+          break;
+        case "week":
+          obj.format = "yyyy 第 WW 周";
+          obj.valueFormat = "yyyy-MM-dd";
+          break;
+        case "month":
+          obj.format = "yyyy-MM";
+          obj.valueFormat = "yyyy-MM";
+          break;
+        case "year":
+          obj.format = "yyyy";
+          obj.valueFormat = "yyyy";
+          break;
+        case "dates":
+          obj.format = "yyyy-MM-dd";
+          obj.valueFormat = "yyyy-MM-dd";
+          break;
+        case "datetime":
+          obj.format = "yyyy-MM-dd HH:mm:ss";
+          obj.valueFormat = "yyyy-MM-dd HH:mm:ss";
+          break;
+        case "datetimerange":
+          obj.format = "yyyy-MM-dd HH:mm:ss";
+          obj.valueFormat = "yyyy-MM-dd HH:mm:ss";
+          break;
+        case "daterange":
+          obj.format = "yyyy-MM-dd";
+          obj.valueFormat = "yyyy-MM-dd HH:mm:ss";
+          break;
+        case "monthrange":
+          obj.format = "yyyy-MM";
+          obj.valueFormat = "yyyy-MM";
+          break;
+      }
+      return obj;
+    },
+    isRange() {
+      return (type) => {
+        return ["datetimerange", "daterange", "monthrange"].includes(type);
+      };
+    },
+  },
+  methods: {
+    handleTime() {
+      const sUnix = this.$dayjs(this.startTime).unix();
+      const eUnix = this.$dayjs(this.endTime).unix();
+      if (sUnix > eUnix) {
+        this.endTime = "";
+      }
+    },
+    onChangeStart() {
+      if (this.mode === "group") {
+        if (this.startTime && this.endTime) {
+          this.handleTime();
+          this.$emit("on-change", [this.startTime, this.endTime]);
+        }
+      }
+    },
+    onChangeEnd() {
+      if (this.mode === "group") {
+        if (this.startTime && this.endTime) {
+          this.$emit("on-change", [this.startTime, this.endTime]);
+        }
+      }
+    },
+    onChange(value) {
+      if (
+        this.type === "datetimerange" ||
+        this.type === "daterange" ||
+        this.type === "monthrange"
+      ) {
+        const start = value && value.length ? value[0] : "";
+        const end = value && value.length ? value[1] : "";
+        this.$emit("on-format", { value, start: start || "", end: end || "" });
+      } else {
+        this.$emit("on-format", { value });
+      }
+      this.$emit("on-change", value || "");
+    },
+  },
+};
+</script>

package/packages/dialog/!main.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :before-close="onBeforeClose"
+    :width="$attrs.width ? $attrs.width : _width"
+  >
+    <slot />
+    <span slot="footer" class="text-right">
+      <slot name="footer">
+        <el-button @click="onClose">取消</el-button>
+        <el-button
+          v-if="$attrs['show-confirm']"
+          type="primary"
+          @click="onConfirm"
+          >{{ $attrs["confirm-text"] || "提交" }}</el-button
+        >
+      </slot>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "XnDialog",
+  inheritAttrs: false,
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    beforeClose: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  created() {
+    console.log(this);
+  },
+  computed: {
+    _width() {
+      const arr = [
+        { label: "mini", value: "320px" },
+        { label: "small", value: "560px" },
+        { label: "medium", value: "720px" },
+        { label: "large", value: "960px" },
+      ];
+
+      var width = "";
+      arr.forEach((item) => {
+        if (item.label === this.$attrs.size || this.size) {
+          width = item.value;
+        }
+      });
+      return width;
+    },
+    dialogVisible: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        console.log('val: ', val);
+        this.$emit("on-visible", val);
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onClose() {
+      this.$emit("update:show", false);
+    },
+    onBeforeClose(){
+      if(this.beforeClose && typeof beforeClose === 'function'){
+        return this.beforeClose()
+      }else{
+        return this.onClose()
+      }
+    },
+    onConfirm() {
+      this.$emit("on-confirm");
+    },
+  },
+};
+</script>
+
+<style>
+</style>

package/packages/dialog/main.vue

@@ -2,15 +2,15 @@
   <el-dialog
     :title="title"
     :visible="show"
-    :width="width ? width : styleWidth"
+    :width="width ? width : _width"
     :before-close="beforeClose"
-    :show-close="false"
-    :append-to-body="appendToBody"
     :top="top"
+    v-bind="$attrs"
+    v-on="$listeners"
     @open="$emit('on-open')"
     @opened="$emit('on-opened')"
   >
-    <template #title>
+    <!-- <template #title>
       <div class="flex align-items-center justify-content-between">
         <div>
           <span class="el-dialog__title">{{ title }}</span>
@@ -22,15 +22,17 @@
           </div>
         </div>
       </div>
-    </template>
+    </template> -->
     <slot />
-
     <span slot="footer">
       <slot name="footer">
         <el-button @click="onClose">取消</el-button>
-        <el-button v-if="showConfirm" type="primary" @click="onConfirm">{{
-          confirmText
-        }}</el-button>
+        <el-button
+          v-if="$attrs['show-confirm'] !== false"
+          type="primary"
+          @click="onConfirm"
+          >{{ $attrs["confirm-text"] || "提交" }}</el-button
+        >
       </slot>
     </span>
   </el-dialog>
@@ -39,85 +41,63 @@
 <script>
 // 320 560 720 960
 export default {
-  name: 'XnDialog',
+  name: "XnDialog",
+  inheritAttrs: false,
   props: {
     beforeClose: {
       type: Function,
-      default: null
+      default: () => {},
     },
     top: {
       type: String,
-      default: '15vh'
+      default: "15vh",
     },
     title: {
       type: String,
-      default: ''
+      default: "",
     },
     width: {
       type: String,
-      default: ''
+      default: "",
     },
     show: {
       type: Boolean,
-      default: false
-    },
-    showConfirm: {
-      type: Boolean,
-      default: true
-    },
-    appendToBody: {
-      type: Boolean,
-      default: false
-    },
-    confirmText: {
-      type: String,
-      default: '确认'
-    },
-    drag: {
-      type: Boolean,
-      default: false
+      default: false,
     },
     size: {
       type: String,
-      default: 'small'
-    }
+      default: "small",
+    },
   },
   computed: {
-    styleWidth() {
+    _width() {
       const arr = [
-        { label: 'mini', value: '320px' },
-        { label: 'small', value: '560px' },
-        { label: 'medium', value: '720px' },
-        { label: 'large', value: '960px' }
-      ]
+        { label: "mini", value: "320px" },
+        { label: "small", value: "560px" },
+        { label: "medium", value: "720px" },
+        { label: "large", value: "960px" },
+      ];
 
-      var width = ''
-      arr.forEach(item => {
+      var width = "";
+      arr.forEach((item) => {
         if (item.label === this.size) {
-          width = item.value
+          width = item.value;
         }
-      })
-      return width
-    }
+      });
+      return width;
+    },
   },
 
   methods: {
     onClose() {
-      console.log(this.beforeClose);
-      if(this.beforeClose && typeof this.beforeClose === 'function'){
-        this.beforeClose()
-        return
-      }
-      this.$emit('update:show',false)
+      this.beforeClose();
     },
-
     onConfirm() {
-      this.$emit('on-confirm')
-    }
-  }
-}
+      this.$emit("on-confirm");
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
 </style>

package/packages/drawer/index.js

@@ -0,0 +1,7 @@
+import XnDrawer from './main.vue'
+
+XnDrawer.install = function (Vue) {
+  Vue.component(XnDrawer.name, XnDrawer)
+}
+
+export default XnDrawer

package/packages/drawer/main.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-drawer
+    :title="title"
+    :visible.sync="show"
+    direction="rtl"
+    :size="size"
+    custom-class="drawer-body"
+    :before-close="beforeClose"
+    v-bind="$attrs"
+    v-on="$listeners"
+    @open="$emit('on-open')"
+    @opened="$emit('on-opened')"
+  >
+    <div class="drawer-content">
+      <slot />
+    </div>
+    <div class="drawer-footer" :class="`text-${align}`">
+      <slot name="footer">
+        <el-button @click="onClose">关闭</el-button>
+      </slot>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: "XnDrawer",
+  props: {
+    show: Boolean,
+    title: {
+      type: String,
+      default: "",
+    },
+    size: {
+      type: String,
+      default: "70%",
+    },
+    beforeClose: {
+      type: Function,
+      default: () => {},
+    },
+    align: {
+      type: String,
+      default: "left",
+      validator: (val)=>{
+        return ['left','center','right'].includes(val)
+      }
+    },
+  },
+  methods: {
+    onClose() {
+      this.beforeClose();
+    },
+  },
+};
+</script>
+
+<style scope lang="scss">
+/* 解决弹出层双滚动条 */
+.drawer-body {
+  .el-drawer__body {
+    overflow: hidden;
+  }
+}
+</style>

package/packages/empty/index.js

@@ -0,0 +1,7 @@
+import XnEmpty from './main.vue'
+
+XnEmpty.install = function (Vue) {
+  Vue.component(XnEmpty.name, XnEmpty)
+}
+
+export default XnEmpty

package/packages/empty/main.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="xn-empty">
+    <el-empty v-bind="$attrs" v-on="$listeners" :image-size="size" :description="desc" :image="image">
+     <slot name="default"></slot>
+     <slot name="image"></slot>
+     <slot name="description"></slot>
+    </el-empty>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "XnEmpty",
+  props: {
+    size: {
+      type: Number,
+      default: 80,
+    },
+    image: {
+      type: String,
+      default: "",
+    },
+    desc: {
+      type: String,
+      default: "暂无数据",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>