bkui-vue 0.0.1-beta.423 → 0.0.1-beta.425

package/dist/index.esm.js

@@ -9900,9 +9900,13 @@ const vBkloading = {
     }
   },
   updated(el, binding) {
+    var _a, _b, _c;
     const instance = el[INSTANCE_KEY];
     const { value } = binding;
     updateOptions(value, instance.options);
+    if ((_c = (_b = (_a = instance == null ? void 0 : instance.vm) == null ? void 0 : _a.$el) == null ? void 0 : _b.parentNode) == null ? void 0 : _c.style) {
+      instance.vm.$el.parentNode.style.display = value.loading ? "" : "none";
+    }
   },
   unmounted(el) {
     var _a, _b, _c;
@@ -26332,6 +26336,228 @@ var DateTable = defineComponent({
     }, [createVNode("em", null, [cell.desc])]))]);
   }
 });
+const monthTableProps = {
+  tableDate: {
+    type: Date,
+    required: true
+  },
+  disabledDate: {
+    type: Function
+  },
+  selectionMode: {
+    type: String,
+    required: true
+  },
+  modelValue: {
+    type: [Date, String, Number, Array],
+    required: true
+  },
+  rangeState: {
+    type: Object,
+    default: () => ({
+      from: null,
+      to: null,
+      selecting: false
+    })
+  },
+  focusedDate: {
+    type: Date,
+    required: true
+  },
+  cellClass: {
+    type: Function,
+    default: () => ""
+  }
+};
+var MonthTable = defineComponent({
+  name: "MonthTable",
+  props: monthTableProps,
+  emits: ["pick", "pick-click", "change-range"],
+  setup(props2, {
+    emit
+  }) {
+    const dates = computed(() => {
+      const {
+        selectionMode,
+        modelValue,
+        rangeState
+      } = props2;
+      const rangeSelecting = selectionMode === "range" && rangeState.selecting;
+      return rangeSelecting ? [rangeState.from] : modelValue;
+    });
+    const cells = computed(() => {
+      const cells2 = [];
+      const cellTmpl = {
+        text: "",
+        selected: false,
+        disabled: false
+      };
+      const tableYear = props2.tableDate.getFullYear();
+      const selectedDays = dates.value.filter(Boolean).map((date) => clearHours(new Date(date.getFullYear(), date.getMonth(), 1)));
+      const focusedDate = clearHours(new Date(props2.focusedDate.getFullYear(), props2.focusedDate.getMonth(), 1));
+      for (let i2 = 0; i2 < 12; i2++) {
+        const cell = JSON.parse(JSON.stringify(cellTmpl));
+        cell.date = new Date(tableYear, i2, 1);
+        cell.text = tCell(i2 + 1);
+        const day = clearHours(cell.date);
+        cell.disabled = typeof props2.disabledDate === "function" && props2.disabledDate(cell.date) && props2.selectionMode === "month";
+        cell.selected = selectedDays.includes(day);
+        cell.focused = day === focusedDate;
+        cells2.push(cell);
+      }
+      return cells2;
+    });
+    const tCell = (nr) => String(nr).length > 1 ? nr : `0${nr}`;
+    const getCellCls = (cell) => [resolveClassName("date-picker-cells-cell"), {
+      [resolveClassName("date-picker-cells-cell-selected")]: cell.selected,
+      [resolveClassName("date-picker-cells-cell-disabled")]: cell.disabled,
+      [resolveClassName("date-picker-cells-cell-range")]: cell.range && !cell.start && !cell.end
+    }];
+    const handleClick = (cell) => {
+      if (cell.disabled || cell.type === "weekLabel") {
+        return;
+      }
+      const newDate = new Date(clearHours(cell.date));
+      emit("pick", newDate);
+      emit("pick-click");
+    };
+    const handleMouseMove = (cell) => {
+      if (!props2.rangeState.selecting) {
+        return;
+      }
+      if (cell.disabled) {
+        return;
+      }
+      const newDate = cell.date;
+      emit("change-range", newDate);
+    };
+    return {
+      cells,
+      getCellCls,
+      handleClick,
+      handleMouseMove
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": [resolveClassName("date-picker-cells"), resolveClassName("date-picker-cells-month")]
+    }, [this.cells.map((cell) => createVNode("span", {
+      "class": this.getCellCls(cell),
+      "onClick": () => this.handleClick(cell),
+      "onMouseenter": () => this.handleMouseMove(cell)
+    }, [createVNode("em", null, [cell.text])]))]);
+  }
+});
+const yearTableProps = {
+  tableDate: {
+    type: Date,
+    required: true
+  },
+  disabledDate: {
+    type: Function
+  },
+  selectionMode: {
+    type: String,
+    required: true
+  },
+  modelValue: {
+    type: [Date, String, Number, Array],
+    required: true
+  },
+  rangeState: {
+    type: Object,
+    default: () => ({
+      from: null,
+      to: null,
+      selecting: false
+    })
+  },
+  focusedDate: {
+    type: Date,
+    required: true
+  },
+  cellClass: {
+    type: Function,
+    default: () => ""
+  }
+};
+var YearTable = defineComponent({
+  name: "YearTable",
+  props: yearTableProps,
+  emits: ["pick", "pick-click", "change-range"],
+  setup(props2, {
+    emit
+  }) {
+    const dates = computed(() => {
+      const {
+        selectionMode,
+        modelValue,
+        rangeState
+      } = props2;
+      const rangeSelecting = selectionMode === "range" && rangeState.selecting;
+      return rangeSelecting ? [rangeState.from] : modelValue;
+    });
+    const startYear = computed(() => Math.floor(props2.tableDate.getFullYear() / 10) * 10);
+    const cells = computed(() => {
+      const cells2 = [];
+      const cellTmpl = {
+        text: "",
+        selected: false,
+        disabled: false
+      };
+      const selectedDays = dates.value.filter(Boolean).map((date) => clearHours(new Date(date.getFullYear(), 0, 1)));
+      const focusedDate = clearHours(new Date(props2.focusedDate.getFullYear(), 0, 1));
+      for (let i2 = 0; i2 < 10; i2++) {
+        const cell = JSON.parse(JSON.stringify(cellTmpl));
+        cell.date = new Date(startYear.value + i2, 0, 1);
+        cell.disabled = typeof props2.disabledDate === "function" && props2.disabledDate(cell.date) && props2.selectionMode === "year";
+        const day = clearHours(cell.date);
+        cell.selected = selectedDays.includes(day);
+        cell.focused = day === focusedDate;
+        cells2.push(cell);
+      }
+      return cells2;
+    });
+    const getCellCls = (cell) => [resolveClassName("date-picker-cells-cell"), {
+      [resolveClassName("date-picker-cells-cell-selected")]: cell.selected,
+      [resolveClassName("date-picker-cells-cell-disabled")]: cell.disabled,
+      [resolveClassName("date-picker-cells-cell-range")]: cell.range && !cell.start && !cell.end
+    }];
+    const handleClick = (cell) => {
+      if (cell.disabled || cell.type === "weekLabel") {
+        return;
+      }
+      const newDate = new Date(clearHours(cell.date));
+      emit("pick", newDate);
+      emit("pick-click");
+    };
+    const handleMouseMove = (cell) => {
+      if (!props2.rangeState.selecting) {
+        return;
+      }
+      if (cell.disabled) {
+        return;
+      }
+      const newDate = cell.date;
+      emit("change-range", newDate);
+    };
+    return {
+      cells,
+      getCellCls,
+      handleClick,
+      handleMouseMove
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": [resolveClassName("date-picker-cells"), resolveClassName("date-picker-cells-year")]
+    }, [this.cells.map((cell) => createVNode("span", {
+      "class": this.getCellCls(cell),
+      "onClick": () => this.handleClick(cell),
+      "onMouseenter": () => this.handleMouseMove(cell)
+    }, [createVNode("em", null, [cell.date.getFullYear()])]))]);
+  }
+});
 const datePickerProps = {
   type: {
     type: String,
@@ -27224,7 +27450,8 @@ var DatePanel = defineComponent({
     }, [createVNode(angleDoubleLeft, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), this.pickerTable === "date-table" ? withDirectives(createVNode("span", {
       "class": iconBtnCls("prev"),
@@ -27232,7 +27459,8 @@ var DatePanel = defineComponent({
     }, [createVNode(angleLeft, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : "", this.datePanelLabel && Object.keys(this.datePanelLabel).length > 0 ? createVNode("span", null, [withDirectives(createVNode("span", {
       "class": resolveClassName("date-picker-header-label"),
@@ -27246,7 +27474,8 @@ var DatePanel = defineComponent({
     }, [createVNode(angleDoubleRight, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), this.pickerTable === "date-table" ? withDirectives(createVNode("span", {
       "class": iconBtnCls("next"),
@@ -27254,7 +27483,8 @@ var DatePanel = defineComponent({
     }, [createVNode(angleRight, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : ""]), [[vShow, this.currentView !== "time"]]), createVNode("div", {
       "class": resolveClassName("picker-panel-content")
@@ -27269,6 +27499,24 @@ var DatePanel = defineComponent({
             "focusedDate": this.focusedDate,
             "onPick": this.panelPickerHandlers
           }, null);
+        case "year-table":
+          return createVNode(YearTable, {
+            "tableDate": this.panelDate,
+            "disabledDate": this.disabledDate,
+            "selectionMode": this.selectionMode,
+            "modelValue": this.dates,
+            "focusedDate": this.focusedDate,
+            "onPick": this.panelPickerHandlers
+          }, null);
+        case "month-table":
+          return createVNode(MonthTable, {
+            "tableDate": this.panelDate,
+            "disabledDate": this.disabledDate,
+            "selectionMode": this.selectionMode,
+            "modelValue": this.dates,
+            "focusedDate": this.focusedDate,
+            "onPick": this.panelPickerHandlers
+          }, null);
         default:
           return null;
       }
@@ -27851,7 +28099,8 @@ var DateRangePanel = defineComponent({
     }, [createVNode(angleDoubleLeft, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), this.leftPickerTable === "date-table" ? withDirectives(createVNode("span", {
       "class": iconBtnCls("prev"),
@@ -27859,7 +28108,8 @@ var DateRangePanel = defineComponent({
     }, [createVNode(angleLeft, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : "", this.leftDatePanelLabel && Object.keys(this.leftDatePanelLabel).length > 0 ? createVNode("span", null, [withDirectives(createVNode("span", {
       "class": resolveClassName("date-picker-header-label"),
@@ -27873,7 +28123,8 @@ var DateRangePanel = defineComponent({
     }, [createVNode(angleDoubleRight, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]) : "", this.splitPanels || this.leftPickerTable === "date-table" ? withDirectives(createVNode("span", {
       "class": iconBtnCls("next"),
@@ -27881,7 +28132,8 @@ var DateRangePanel = defineComponent({
     }, [createVNode(angleRight, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : ""]), [[vShow, this.currentView !== "time"]]), this.currentView !== "time" ? (() => {
       switch (this.leftPickerTable) {
@@ -27910,7 +28162,8 @@ var DateRangePanel = defineComponent({
     }, [createVNode(angleDoubleLeft, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]) : "", this.splitPanels && this.rightPickerTable === "date-table" ? withDirectives(createVNode("span", {
       "class": iconBtnCls("prev", "-double"),
@@ -27918,7 +28171,8 @@ var DateRangePanel = defineComponent({
     }, [createVNode(angleLeft, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : "", this.rightDatePanelLabel && Object.keys(this.rightDatePanelLabel).length > 0 ? createVNode("span", null, [withDirectives(createVNode("span", {
       "class": resolveClassName("date-picker-header-label"),
@@ -27942,7 +28196,8 @@ var DateRangePanel = defineComponent({
     }, [createVNode(angleDoubleRight, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), this.rightPickerTable === "date-table" ? withDirectives(createVNode("span", {
       "class": iconBtnCls("next"),
@@ -27950,7 +28205,8 @@ var DateRangePanel = defineComponent({
     }, [createVNode(angleRight, {
       "style": {
         fontSize: "20px",
-        lineHeight: 1
+        lineHeight: 1,
+        verticalAlign: "text-bottom"
       }
     }, null)]), [[vShow, this.currentView === "date"]]) : ""]), [[vShow, this.currentView !== "time"]]), this.currentView !== "time" ? (() => {
       switch (this.rightPickerTable) {
@@ -28034,6 +28290,7 @@ var Component$b = defineComponent({
       shortcut,
       onSelectionModeChange
     });
+    onSelectionModeChange(props2.type);
     function onSelectionModeChange(_type) {
       let type = _type;
       if (_type.match(/^date/)) {