@king-design/vue 2.0.0-beta.0

package/components/datepicker/useDisabled.js

@@ -0,0 +1,97 @@
+import { useInstance } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+import { isNullOrUndefined } from 'intact-shared';
+import { isGT, isLT, last } from './helpers';
+import { PanelFlags, PanelTypes } from './usePanel';
+export function useDisabled(_ref) {
+  var createDateByValueFormat = _ref.createDateByValueFormat;
+  var instance = useInstance();
+  var maxDate = useState(null);
+  var minDate = useState(null);
+
+  function convertToDayjs(state, v) {
+    if (isNullOrUndefined(v)) {
+      state.set(null);
+    } else {
+      state.set(createDateByValueFormat(v));
+    }
+  }
+
+  instance.on('$receive:max', function (v) {
+    convertToDayjs(maxDate, v);
+  });
+  instance.on('$receive:min', function (v) {
+    convertToDayjs(minDate, v);
+  });
+
+  function isDisabled(value, type) {
+    if (type === void 0) {
+      type = 'date';
+    }
+
+    var _instance$get = instance.get(),
+        disabledDate = _instance$get.disabledDate;
+
+    return isGT(value, maxDate.value, type) || isLT(value, minDate.value, type) || !!disabledDate && disabledDate(value);
+  }
+
+  function isDisabledTime(value, flag) {
+    if (!isDisabled(value, 'second')) {
+      if (!instance.get('range')) return false; // compare the start and the end datetime 
+
+      var anotherDatetime = instance.value.getTimeValue(flag === PanelFlags.Start ? PanelFlags.End : PanelFlags.Start);
+      if (!anotherDatetime) return false;
+
+      if (flag === PanelFlags.Start) {
+        return value.isAfter(anotherDatetime, 'second');
+      } else {
+        return value.isBefore(anotherDatetime, 'second');
+      }
+    }
+
+    return true;
+  }
+
+  function isDisabledConfirm() {
+    var lastValue = last(instance.value.value.value);
+    if (!lastValue) return true;
+
+    var _instance$get2 = instance.get(),
+        range = _instance$get2.range;
+
+    if (range && lastValue.length < 2) return true;
+    var _instance$panel = instance.panel,
+        startPanel = _instance$panel.startPanel,
+        endPanel = _instance$panel.endPanel;
+
+    if (startPanel.value === PanelTypes.Date && endPanel.value === PanelTypes.Date) {
+      return true;
+    }
+
+    var start;
+    var end;
+
+    if (range) {
+      start = lastValue[0];
+      end = lastValue[1];
+    } else {
+      start = lastValue;
+    }
+
+    if (isDisabledTime(start, PanelFlags.Start) || end && isDisabledTime(end, PanelFlags.End)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  return {
+    isDisabled: isDisabled,
+    isDisabledTime: isDisabledTime,
+    isDisabledConfirm: isDisabledConfirm,
+    maxDate: maxDate,
+    minDate: minDate
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useFocusDate.d.ts

@@ -0,0 +1,8 @@
+import { Dayjs } from 'dayjs';
+export declare function useFocusDate(): {
+    focusDate: import("../../hooks/useState").State<Dayjs | null>;
+    reset: () => void;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useFocusDate.js

@@ -0,0 +1,18 @@
+import { useInstance } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+export function useFocusDate() {
+  var instance = useInstance();
+  var focusDate = useState(null);
+
+  function reset() {
+    focusDate.set(null);
+  }
+
+  instance.on('hide', reset);
+  return {
+    focusDate: focusDate,
+    reset: reset
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useFormats.d.ts

@@ -0,0 +1,13 @@
+import dayjs, { Dayjs } from './dayjs';
+import { Value } from './basepicker';
+export declare function useFormats(): {
+    getValueFormat: () => string;
+    getShowFormat: () => string;
+    createDateByValueFormat: (value: Value) => dayjs.Dayjs;
+    createDateByShowFormat: (value: string) => dayjs.Dayjs;
+    getShowString: (value: Dayjs) => string;
+    getValueString: (value: Dayjs) => string;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useFormats.js

@@ -0,0 +1,57 @@
+import { useInstance } from 'intact-vue-next';
+import dayjs from './dayjs';
+import { isString } from 'intact-shared';
+var FORMATS = {
+  date: 'YYYY-MM-DD',
+  datetime: 'YYYY-MM-DD HH:mm:ss',
+  year: 'YYYY',
+  month: 'YYYY-MM'
+};
+export function useFormats() {
+  var instance = useInstance();
+
+  function getValueFormat() {
+    var _instance$get = instance.get(),
+        format = _instance$get.format,
+        valueFormat = _instance$get.valueFormat,
+        type = _instance$get.type;
+
+    return valueFormat || format || FORMATS[type];
+  }
+
+  function getShowFormat() {
+    var _instance$get2 = instance.get(),
+        format = _instance$get2.format,
+        showFormat = _instance$get2.showFormat,
+        type = _instance$get2.type;
+
+    return showFormat || format || FORMATS[type];
+  }
+
+  function createDateByValueFormat(value) {
+    return dayjs(value, isString(value) ? getValueFormat() : undefined);
+  }
+
+  function createDateByShowFormat(value) {
+    return dayjs(value, getShowFormat(), true); // strict parsing 
+  }
+
+  function getShowString(value) {
+    return value.format(getShowFormat());
+  }
+
+  function getValueString(value) {
+    return value.format(getValueFormat());
+  }
+
+  return {
+    getValueFormat: getValueFormat,
+    getShowFormat: getShowFormat,
+    createDateByValueFormat: createDateByValueFormat,
+    createDateByShowFormat: createDateByShowFormat,
+    getShowString: getShowString,
+    getValueString: getValueString
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useKeyboards.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'intact-vue-next';
+import { DatepickerCalendar } from './calendar';
+import { State } from '../../hooks/useState';
+import { Dayjs } from 'dayjs';
+export declare function useKeyboards(panelRef: RefObject<DatepickerCalendar>, focusDate: State<Dayjs | null>): void;
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useKeyboards.js

@@ -0,0 +1,98 @@
+import { useInstance } from 'intact-vue-next';
+import { useKeyboard } from '../../hooks/useKeyboard';
+var Direction;
+
+(function (Direction) {
+  Direction[Direction["Up"] = 0] = "Up";
+  Direction[Direction["Down"] = 1] = "Down";
+  Direction[Direction["Left"] = 2] = "Left";
+  Direction[Direction["Right"] = 3] = "Right";
+})(Direction || (Direction = {}));
+
+export function useKeyboards(panelRef, focusDate) {
+  var instance = useInstance();
+
+  var _useKeyboard = useKeyboard({
+    down: function down(e) {
+      focus(e, Direction.Down);
+    },
+    up: function up(e) {
+      focus(e, Direction.Up);
+    },
+    right: function right(e) {
+      focus(e, Direction.Right);
+    },
+    left: function left(e) {
+      focus(e, Direction.Left);
+    },
+    enter: function enter() {
+      select(focusDate.value);
+    }
+  }),
+      add = _useKeyboard[0],
+      remove = _useKeyboard[1];
+
+  instance.on('show', add);
+  instance.on('hide', remove);
+
+  function select(date) {
+    if (!date) return;
+    var calendar = panelRef.value;
+    if (!calendar) return; // maybe select time
+
+    switch (calendar.type.value) {
+      case 'date':
+        calendar.days.onClick(date);
+        break;
+
+      case 'month':
+        calendar.months.onClick(date);
+        break;
+
+      case 'year':
+        calendar.years.onClick(date);
+        break;
+    }
+  }
+
+  function focus(e, direction) {
+    var calendar = panelRef.value;
+    if (!calendar) return;
+    e.preventDefault();
+
+    if (!focusDate.value) {
+      focusDate.set(calendar.showDate.date.value);
+      return;
+    }
+
+    var type = calendar.type.value;
+    var upAndDownOffset = type === 'date' ? 7 : 4;
+    var offset;
+
+    switch (direction) {
+      case Direction.Up:
+        offset = -upAndDownOffset;
+        break;
+
+      case Direction.Down:
+        offset = upAndDownOffset;
+        break;
+
+      case Direction.Left:
+        offset = -1;
+        break;
+
+      case Direction.Right:
+        offset = 1;
+        break;
+    }
+
+    var _focusDate = focusDate.value;
+    _focusDate = _focusDate.add(offset, type === 'date' ? 'day' : type);
+    focusDate.set(_focusDate); // change panel show date
+
+    calendar.showDate.date.set(_focusDate);
+  }
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useMonths.d.ts

@@ -0,0 +1,18 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { State } from '../../hooks/useState';
+import type { useStatus } from './useStatus';
+export declare function useMonths(showDate: State<Dayjs>, status: ReturnType<typeof useStatus>, focusDate: State<Dayjs | null>): {
+    getMonths: (now: Dayjs) => {
+        isActive: boolean;
+        isToday: boolean;
+        isDisabled: boolean;
+        isHover: boolean;
+        isInRange: boolean;
+        label: string;
+        value: dayjs.Dayjs;
+    }[];
+    onClick: (date: Dayjs) => void;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useMonths.js

@@ -0,0 +1,47 @@
+import { useInstance } from 'intact-vue-next';
+import dayjs from 'dayjs';
+import { isEqual } from './helpers';
+import { _$ } from '../../i18n';
+export function useMonths(showDate, status, focusDate) {
+  var instance = useInstance();
+
+  function getMonths(now) {
+    var ret = [];
+    var start = showDate.value.toDate();
+    start.setMonth(0);
+
+    for (var i = 0; i < 12; i++) {
+      var dayjsDate = dayjs(start);
+      ret.push({
+        isActive: status.isActive(dayjsDate, 'month'),
+        isToday: dayjsDate.isSame(now, 'month'),
+        isDisabled: status.isDisabled(dayjsDate),
+        isHover: isEqual(dayjsDate, focusDate.value, 'month'),
+        isInRange: status.isInRange(dayjsDate, 'month'),
+        label: _$(i + 1 + '月'),
+        value: dayjsDate
+      });
+      start.setMonth(i + 1);
+    }
+
+    return ret;
+  }
+
+  function onClick(date) {
+    showDate.set(date);
+    var datepickerType = instance.datepicker.get('type');
+
+    if (datepickerType !== 'month' && datepickerType !== 'year') {
+      instance.type.set('date');
+    } else {
+      instance.triggerChange(date);
+    }
+  }
+
+  return {
+    getMonths: getMonths,
+    onClick: onClick
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/usePanel.d.ts

@@ -0,0 +1,21 @@
+import { DatepickerCalendar } from './calendar';
+export declare enum PanelTypes {
+    Date = 0,
+    Time = 1
+}
+export declare enum PanelFlags {
+    Start = 0,
+    End = 1
+}
+export declare function usePanel(type?: PanelTypes): {
+    startPanel: import("../../hooks/useState").State<PanelTypes>;
+    endPanel: import("../../hooks/useState").State<PanelTypes>;
+    changePanel: (type: PanelTypes, flag?: PanelFlags) => void;
+    getPanel: (flag: PanelFlags) => import("../../hooks/useState").State<PanelTypes>;
+    reset: () => void;
+    startRef: import('intact-vue-next').RefObject<DatepickerCalendar>;
+    endRef: import("intact").RefObject<DatepickerCalendar>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/usePanel.js

@@ -0,0 +1,57 @@
+import { useInstance, createRef } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+export var PanelTypes;
+
+(function (PanelTypes) {
+  PanelTypes[PanelTypes["Date"] = 0] = "Date";
+  PanelTypes[PanelTypes["Time"] = 1] = "Time";
+})(PanelTypes || (PanelTypes = {}));
+
+export var PanelFlags;
+
+(function (PanelFlags) {
+  PanelFlags[PanelFlags["Start"] = 0] = "Start";
+  PanelFlags[PanelFlags["End"] = 1] = "End";
+})(PanelFlags || (PanelFlags = {}));
+
+export function usePanel(type) {
+  if (type === void 0) {
+    type = PanelTypes.Date;
+  }
+
+  var instance = useInstance();
+  var startPanel = useState(type);
+  var endPanel = useState(type);
+  var startRef = createRef();
+  var endRef = createRef();
+
+  function changePanel(type, flag) {
+    if (flag === void 0) {
+      flag = PanelFlags.Start;
+    }
+
+    getPanel(flag).set(type);
+  }
+
+  function getPanel(flag) {
+    return flag === PanelFlags.Start ? startPanel : endPanel;
+  }
+
+  function reset() {
+    startPanel.set(type);
+    endPanel.set(type);
+  }
+
+  instance.on('show', reset);
+  return {
+    startPanel: startPanel,
+    endPanel: endPanel,
+    changePanel: changePanel,
+    getPanel: getPanel,
+    reset: reset,
+    startRef: startRef,
+    endRef: endRef
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useShowDate.d.ts

@@ -0,0 +1,19 @@
+import { Dayjs } from 'dayjs';
+import { IgnoreClickEvent } from '../../hooks/useDocumentClick';
+import { usePanel } from './usePanel';
+export declare function useShowDate(panel: ReturnType<typeof usePanel>): {
+    date: import("../../hooks/useState").State<Dayjs>;
+    getDateLabel: () => {
+        value: string;
+        onClick(e: IgnoreClickEvent): void;
+    }[];
+    prevMonth: () => void;
+    nextMonth: () => void;
+    prevYear: () => void;
+    nextYear: () => void;
+    nextTenYears: () => void;
+    prevTenYears: () => void;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useShowDate.js

@@ -0,0 +1,160 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { useInstance } from 'intact-vue-next';
+import { useState, watchState } from '../../hooks/useState';
+import { getNowDate, last } from './helpers';
+import { _$ } from '../../i18n';
+import { PanelFlags } from './usePanel';
+export function useShowDate(panel) {
+  var instance = useInstance();
+
+  var _instance$get = instance.get(),
+      flag = _instance$get.flag,
+      type = _instance$get.type;
+
+  var date = getNowDate();
+
+  if (flag === PanelFlags.End) {
+    date = getPanelShowDate(date, true);
+  }
+
+  var showDate = useState(date);
+  var anotherPanel = flag === PanelFlags.Start ? panel.endRef : panel.startRef;
+  instance.on('$receive:value', function (v) {
+    var lastValue = last(v);
+    var value;
+
+    if (Array.isArray(lastValue)) {
+      if (lastValue.length !== 2) return; // range
+
+      var _flag = instance.get('flag');
+
+      value = lastValue[_flag];
+    } else {
+      value = lastValue;
+    }
+
+    var another;
+
+    if (value && !value.isSame(showDate.value, 'month') && ( // ignore if it is in another panel
+    !(another = anotherPanel.value) || !value.isSame(another.showDate.date.value, 'month'))) {
+      showDate.set(value);
+    }
+  }); // ensure the start panel's date is before the end panel's
+
+  watchState(showDate, function (v) {
+    if (flag === PanelFlags.Start) {
+      var endPanel = anotherPanel.value;
+
+      if (endPanel) {
+        var endShowDate = endPanel.showDate.date.value.date(1);
+
+        if (v.isAfter(endShowDate, 'date') || v.isSame(endShowDate, 'date')) {
+          // maybe we are changing the year, so we must set it as the next month from show date
+          // of start panel
+          // endPanel.showDate.nextMonth();
+          endPanel.showDate.date.set(getPanelShowDate(v, true));
+        }
+      }
+    } else {
+      var startPanel = anotherPanel.value;
+
+      if (startPanel) {
+        // maybe changed to time picker
+        var startShowDate = startPanel.showDate.date.value; // set to the last date
+
+        startShowDate = startShowDate.add(1, 'month').add(-1, 'day');
+
+        if (v.isBefore(startShowDate, 'date') || v.isSame(startShowDate, 'date')) {
+          // startPanel.showDate.prevMonth();
+          startPanel.showDate.date.set(getPanelShowDate(v, false));
+        }
+      }
+    }
+  });
+
+  function getPanelShowDate(date, isEnd) {
+    switch (type) {
+      case 'year':
+        return date.add(isEnd ? 10 : -10, 'year');
+
+      case 'month':
+        return date.add(isEnd ? 1 : -1, 'year');
+        break;
+
+      default:
+        return date.add(isEnd ? 1 : -1, 'month');
+        break;
+    }
+  }
+
+  function getDateLabel() {
+    var map = {
+      MM: _$(showDate.value.get('month') + 1 + "\u6708"),
+      YYYY: _$("{n}\u5E74", {
+        n: showDate.value.get('year')
+      })
+    };
+
+    var yearMonthFormat = _$('yearMonthFormat');
+
+    if (yearMonthFormat === 'yearMonthFormat') {
+      yearMonthFormat = 'YYYY MM';
+    }
+
+    var format = yearMonthFormat.split(' ');
+    return _mapInstanceProperty(format).call(format, function (item) {
+      return {
+        value: map[item],
+        onClick: function onClick(e) {
+          e._ignore = true;
+          instance.type.set(item === 'YYYY' ? 'year' : 'month');
+        }
+      };
+    });
+  }
+
+  function setRelativeMonth(month) {
+    showDate.set(showDate.value.add(month, 'month'));
+  }
+
+  function setRelativeYear(year) {
+    showDate.set(showDate.value.add(year, 'year'));
+  }
+
+  function prevMonth() {
+    setRelativeMonth(-1);
+  }
+
+  function nextMonth() {
+    setRelativeMonth(1);
+  }
+
+  function prevYear() {
+    setRelativeYear(-1);
+  }
+
+  function nextYear() {
+    setRelativeYear(1);
+  }
+
+  function nextTenYears() {
+    setRelativeYear(10);
+  }
+
+  function prevTenYears() {
+    setRelativeYear(-10);
+  }
+
+  return {
+    date: showDate,
+    getDateLabel: getDateLabel,
+    prevMonth: prevMonth,
+    nextMonth: nextMonth,
+    prevYear: prevYear,
+    nextYear: nextYear,
+    nextTenYears: nextTenYears,
+    prevTenYears: prevTenYears
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/useStatus.d.ts

@@ -0,0 +1,11 @@
+import { State } from '../../hooks/useState';
+import { Dayjs } from 'dayjs';
+import type { DatepickerCalendarProps } from './calendar';
+export declare function useStatus(focusDate: State<Dayjs | null>): {
+    isActive: (date: Dayjs, type: DatepickerCalendarProps['type']) => boolean;
+    isInRange: (date: Dayjs, type: DatepickerCalendarProps['type']) => boolean;
+    isDisabled: (value: Dayjs, type?: import("dayjs").OpUnitType) => boolean;
+};
+
+
+export {normalize} from 'intact-vue-next';