@king-design/vue 2.0.0-beta.0

package/components/datepicker/basepicker.js

@@ -0,0 +1,341 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { __decorate } from "tslib";
+/**
+ * The base hook for handling value of Datepicker and Timepicker
+ */
+
+import { useInstance } from 'intact-vue-next';
+import { useState, watchState } from '../../hooks/useState';
+import dayjs from './dayjs';
+import { findValueIndex } from './helpers';
+import { isEqualArray, last, bind } from '../utils';
+import { BaseSelect } from '../select/base';
+
+var typeDefs = _extends({}, BaseSelect.typeDefs, {
+  value: [String, Array, Date, Number, dayjs.Dayjs],
+  range: Boolean,
+  format: String,
+  valueFormat: String,
+  showFormat: String,
+  min: [String, Date, Number, dayjs.Dayjs],
+  max: [String, Date, Number, dayjs.Dayjs],
+  disabledDate: Function
+});
+
+var defaults = function defaults() {
+  return _extends({}, BaseSelect.defaults(), {
+    filterable: true
+  });
+};
+
+var events = _extends({}, BaseSelect.events, {
+  selecting: true
+});
+
+export var BasePicker = /*#__PURE__*/function (_BaseSelect) {
+  _inheritsLoose(BasePicker, _BaseSelect);
+
+  function BasePicker() {
+    return _BaseSelect.apply(this, arguments) || this;
+  }
+
+  var _proto = BasePicker.prototype;
+
+  _proto.resetKeywords = function resetKeywords(keywords) {
+    var _this$get = this.get(),
+        multiple = _this$get.multiple,
+        range = _this$get.range;
+
+    var dayjsValue = this.value.getDayjsValue();
+    var getShowString = this.formats.getShowString;
+    var value = last(dayjsValue);
+    keywords.set(multiple ? '' : !range ? value ? getShowString(value) : '' : value ? [getShowString(value[0]), getShowString(value[1])].join(' ~ ') : '');
+  };
+
+  return BasePicker;
+}(BaseSelect);
+BasePicker.typeDefs = typeDefs;
+BasePicker.defaults = defaults;
+BasePicker.events = events;
+
+__decorate([bind], BasePicker.prototype, "resetKeywords", null);
+
+export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInput, getEqualType, updateStateValue) {
+  var createDateByValueFormat = _ref.createDateByValueFormat,
+      createDateByShowFormat = _ref.createDateByShowFormat,
+      getShowString = _ref.getShowString,
+      getValueString = _ref.getValueString;
+  var isDisabled = _ref2.isDisabled,
+      minDate = _ref2.minDate;
+  // Normalize the value to multipe values, no matter it's multipe or not
+  var value = useState([]);
+  var instance = useInstance();
+  var dayjsValue = [];
+  instance.watch('value', function (newValue, oldValue) {
+    if (isEqualArray(newValue, oldValue)) return;
+    dayjsValue = convertToDayjs(newValue);
+    updateStateValue(dayjsValue, value); // should update keywords
+
+    instance.resetKeywords(instance.input.keywords);
+  });
+  watchState(instance.input.keywords, function (v) {
+    var _instance$get = instance.get(),
+        range = _instance$get.range,
+        multiple = _instance$get.multiple;
+
+    if (!multiple && v === '') return instance.set('value', null);
+
+    if (range) {
+      var _context;
+
+      var _v$split$map = _mapInstanceProperty(_context = v.split(/\s*~\s*/)).call(_context, function (s) {
+        return _trimInstanceProperty(s).call(s);
+      }),
+          start = _v$split$map[0],
+          end = _v$split$map[1];
+
+      if (start && end) {
+        var startDate = createDateByShowFormat(start);
+
+        if (!isValidDate(startDate)) {
+          return;
+        }
+
+        var endDate = createDateByShowFormat(end);
+
+        if (!isValidDate(endDate)) {
+          return;
+        }
+
+        if (endDate.isAfter(startDate)) {
+          updateValueOnInput([startDate, endDate]);
+        }
+      }
+    } else {
+      var date = createDateByShowFormat(v);
+
+      if (isValidDate(date)) {
+        updateValueOnInput(date);
+      }
+    }
+  });
+
+  function convertToDayjs(v) {
+    if (!v || Array.isArray(v) && !v.length) return [];
+
+    var _instance$get2 = instance.get(),
+        multiple = _instance$get2.multiple;
+
+    if (!multiple) {
+      v = [v];
+    }
+
+    return _mapInstanceProperty(v).call(v, function (value) {
+      if (Array.isArray(value)) {
+        // range
+        return _mapInstanceProperty(value).call(value, createDateByValueFormat);
+      }
+
+      return createDateByValueFormat(value);
+    });
+  }
+
+  function convertToValueString(v) {
+    var results = _mapInstanceProperty(v).call(v, function (value) {
+      if (Array.isArray(value)) {
+        return _mapInstanceProperty(value).call(value, getValueString);
+      }
+
+      return getValueString(value);
+    });
+
+    if (!instance.get('multiple')) {
+      return results[0] || null;
+    }
+
+    return results;
+  }
+
+  function format() {
+    var results = _mapInstanceProperty(dayjsValue).call(dayjsValue, function (value) {
+      if (Array.isArray(value)) {
+        return _mapInstanceProperty(value).call(value, getShowString).join(' ~ ');
+      }
+
+      return getShowString(value);
+    });
+
+    if (!instance.get('multiple')) {
+      return results[0];
+    }
+
+    return results;
+  }
+
+  function setSingleDate(v, fromInput) {
+    var _instance$get3 = instance.get(),
+        range = _instance$get3.range;
+
+    value.set([v]);
+
+    if (fromInput || shouldUpdateValue(v)) {
+      updateValue();
+    }
+  }
+
+  function addMultipeDate(v, fromInput) {
+    var _instance$get4 = instance.get(),
+        range = _instance$get4.range;
+
+    var _value = value.value;
+    _value = !_value ? [] : _sliceInstanceProperty(_value).call(_value);
+
+    if (range && v.length === 2) {
+      // pop the last value firstly, if it only has the start date 
+      var lastValue = last(_value);
+
+      if (lastValue && lastValue.length < 2) {
+        _value.pop();
+      }
+    }
+
+    var _shouldUpdateValue = true;
+
+    if (fromInput || shouldUpdateValue(v)) {
+      // if select the date/year/month, then toggle the value.
+      // if from input, treat the value as the final value
+      var index = findValueIndex(_value, v, getEqualType());
+
+      if (index > -1) {
+        _spliceInstanceProperty(_value).call(_value, index, 1);
+      } else {
+        _value.push(v);
+      }
+    } else {
+      // select the datetime, only push the value,
+      // and unique the array on click confrim button
+      _value.push(v);
+
+      _shouldUpdateValue = false;
+    }
+
+    value.set(_value);
+
+    if (_shouldUpdateValue) {
+      updateValue();
+    }
+  }
+
+  function setValue(v, fromInput) {
+    var multiple = instance.get('multiple');
+
+    if (multiple) {
+      addMultipeDate(v, fromInput);
+    } else {
+      setSingleDate(v, fromInput);
+    }
+  }
+
+  function updateValue() {
+    var _value = value.value;
+    var valueStr = convertToValueString(_value);
+    instance.set('value', valueStr);
+    instance.resetKeywords(instance.input.keywords);
+  }
+
+  function onConfirm() {
+    // unique
+    if (!instance.get('multiple')) {
+      instance.hide();
+    } else {
+      unique();
+      panel.reset();
+    }
+
+    updateValue();
+  }
+
+  function unique() {
+    var _value = value.value;
+    var map = {};
+    var results = [];
+
+    _value.forEach(function (value) {
+      var key;
+
+      if (Array.isArray(value)) {
+        key = _mapInstanceProperty(value).call(value, getValueString).join(' ~ ');
+      } else {
+        key = getValueString(value);
+      }
+
+      if (!map[key]) {
+        map[key] = true;
+        results.push(value);
+      }
+    });
+
+    value.set(results);
+  }
+
+  function isValidDate(date) {
+    return date.isValid() && !isDisabled(date, getEqualType());
+  }
+
+  function onChangeTime(date, flag) {
+    var _context2;
+
+    var _instance$get5 = instance.get(),
+        range = _instance$get5.range;
+
+    var values = _sliceInstanceProperty(_context2 = value.value).call(_context2);
+
+    var lastIndex = values.length - 1;
+    var _value = date;
+
+    if (range) {
+      var _context3;
+
+      _value = _sliceInstanceProperty(_context3 = values[lastIndex]).call(_context3);
+      _value[flag] = date;
+      instance.trigger('selecting', _value);
+    }
+
+    values[lastIndex] = _value;
+    value.set(values);
+  }
+
+  function getTimeValue(flag) {
+    var _value = value.value;
+    if (!_value.length) return null;
+
+    var _instance$get6 = instance.get(),
+        range = _instance$get6.range,
+        min = _instance$get6.min;
+
+    var lastValue = last(_value);
+    return range ? lastValue[flag] : lastValue;
+  }
+
+  function getDayjsValue() {
+    return dayjsValue;
+  }
+
+  return {
+    value: value,
+    format: format,
+    onConfirm: onConfirm,
+    onChangeTime: onChangeTime,
+    getTimeValue: getTimeValue,
+    setValue: setValue,
+    convertToDayjs: convertToDayjs,
+    getDayjsValue: getDayjsValue
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/calendar.d.ts

@@ -0,0 +1,81 @@
+import { Component } from 'intact-vue-next';
+import { Dayjs } from 'dayjs';
+import type { Datepicker } from './index';
+import { StateValue } from './basepicker';
+import { PanelFlags } from './usePanel';
+export interface DatepickerCalendarProps {
+    value: StateValue;
+    type?: 'date' | 'year' | 'month';
+    flag: PanelFlags;
+}
+export interface DatepickerCalendarEvents {
+    change: [Dayjs, PanelFlags];
+}
+export declare class DatepickerCalendar extends Component<DatepickerCalendarProps, DatepickerCalendarEvents> {
+    static template: string | import("intact").Template<any>;
+    static defaults: () => Partial<DatepickerCalendarProps>;
+    type: import("../../hooks/useState").State<Required<"date" | "month" | "year" | undefined>>;
+    datepicker: Datepicker;
+    showDate: {
+        date: import("../../hooks/useState").State<Dayjs>;
+        getDateLabel: () => {
+            value: string;
+            onClick(e: import("../../hooks/useDocumentClick").IgnoreClickEvent): void;
+        }[];
+        prevMonth: () => void;
+        nextMonth: () => void;
+        prevYear: () => void;
+        nextYear: () => void;
+        nextTenYears: () => void;
+        prevTenYears: () => void;
+    };
+    status: {
+        isActive: (date: Dayjs, type: "date" | "month" | "year" | undefined) => boolean;
+        isInRange: (date: Dayjs, type: "date" | "month" | "year" | undefined) => boolean;
+        isDisabled: (value: Dayjs, type?: import("dayjs").OpUnitType) => boolean;
+    };
+    days: {
+        getDays: (now: Dayjs) => {
+            isExceed: boolean;
+            isActive: boolean;
+            isToday: boolean;
+            isDisabled: boolean;
+            isHover: boolean;
+            isInRange: boolean;
+            label: number;
+            value: Dayjs;
+        }[];
+        onClick: (value: Dayjs) => void;
+    };
+    years: {
+        getYearRange: () => number[];
+        getYearLabel: () => string;
+        getYears: (now: Dayjs) => {
+            isExceed: boolean;
+            isActive: boolean;
+            isToday: boolean;
+            isDisabled: boolean;
+            isHover: boolean;
+            isInRange: boolean;
+            label: number;
+            value: Dayjs;
+        }[];
+        onClick: (date: Dayjs) => void;
+    };
+    months: {
+        getMonths: (now: Dayjs) => {
+            isActive: boolean;
+            isToday: boolean;
+            isDisabled: boolean;
+            isHover: boolean;
+            isInRange: boolean;
+            label: string;
+            value: Dayjs;
+        }[];
+        onClick: (date: Dayjs) => void;
+    };
+    triggerChange(value: Dayjs): void;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/calendar.js

@@ -0,0 +1,66 @@
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, inject } from 'intact-vue-next';
+import template from './calendar.vdt';
+import { useDays } from './useDays';
+import { useState } from '../../hooks/useState';
+import { DATEPICKER } from './constants';
+import { useShowDate } from './useShowDate';
+import { bind } from '../utils';
+import { useYears } from './useYears';
+import { useMonths } from './useMonths';
+import { useStatus } from './useStatus';
+
+var defaults = function defaults() {
+  return {
+    type: 'date'
+  };
+};
+
+export var DatepickerCalendar = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(DatepickerCalendar, _Component);
+
+  function DatepickerCalendar() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.type = useType(_assertThisInitialized(_this));
+    _this.datepicker = inject(DATEPICKER);
+    _this.showDate = useShowDate(_this.datepicker.panel);
+    _this.status = useStatus(_this.datepicker.focusDate.focusDate);
+    _this.days = useDays(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
+    _this.years = useYears(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
+    _this.months = useMonths(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
+    return _this;
+  }
+
+  var _proto = DatepickerCalendar.prototype;
+
+  _proto.triggerChange = function triggerChange(value) {
+    this.trigger('change', value, this.get('flag'));
+  };
+
+  return DatepickerCalendar;
+}(Component);
+DatepickerCalendar.template = template;
+DatepickerCalendar.defaults = defaults;
+
+__decorate([bind], DatepickerCalendar.prototype, "triggerChange", null);
+
+function useType(instance) {
+  var type = useState('date');
+  instance.on('$receive:type', function (v) {
+    type.set(v);
+  });
+  return type;
+}
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/calendar.vdt.js

@@ -0,0 +1,128 @@
+import { map as _$ma, createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { Transition } from 'intact';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { _$ } from '../../i18n';
+import { makeCalendarStyles } from './styles';
+import { getNowDate } from './helpers';
+var _$tmp0 = {
+  'className': 'ion-ios-arrow-left',
+  'size': 'small'
+};
+var _$tmp1 = {
+  'className': 'ion-ios-arrow-left',
+  'size': 'small'
+};
+var _$tmp2 = {
+  'className': 'ion-ios-arrow-left',
+  'size': 'small'
+};
+var _$tmp3 = {
+  'className': 'ion-ios-arrow-right',
+  'size': 'small'
+};
+var _$tmp4 = {
+  'className': 'ion-ios-arrow-right',
+  'size': 'small'
+};
+var _$tmp5 = {
+  'className': 'ion-ios-arrow-right',
+  'size': 'small'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var type = this.type.value;
+  var isYear = type === 'year';
+  var isYearOrMonth = isYear || type === 'month';
+  var classNameObj = (_classNameObj = {
+    'k-datepicker-calendar': true
+  }, _classNameObj[makeCalendarStyles()] = true, _classNameObj);
+  var now = getNowDate();
+  var _this$datepicker$focu = this.datepicker.focusDate,
+      focusDate = _this$datepicker$focu.focusDate,
+      resetFocusDate = _this$datepicker$focu.reset;
+
+  var getItems = function getItems(data, onClick) {
+    return _$ma(data, function ($value, $key) {
+      return _$ce(2, 'div', _$ce(2, 'div', $value.label, 0, 'k-value'), 2, _$cn({
+        "k-calendar-item": true,
+        "k-exceed": $value.isExceed,
+        "k-active": $value.isActive,
+        "k-today": $value.isToday,
+        "k-disabled": $value.isDisabled,
+        "k-hover": $value.isHover,
+        "k-in-range": $value.isInRange
+      }), {
+        'ev-click': !$value.isDisabled ? function (e) {
+          e._ignore = true;
+          onClick($value.value);
+        } : null,
+        'ev-mouseenter': function evMouseenter() {
+          return focusDate.set($value.value);
+        }
+      });
+    }, $this);
+  };
+
+  var _this$days = this.days,
+      getDays = _this$days.getDays,
+      onClickDay = _this$days.onClick;
+  var _this$showDate = this.showDate,
+      getDateLabel = _this$showDate.getDateLabel,
+      prevMonth = _this$showDate.prevMonth,
+      nextMonth = _this$showDate.nextMonth,
+      prevYear = _this$showDate.prevYear,
+      nextYear = _this$showDate.nextYear,
+      prevTenYears = _this$showDate.prevTenYears,
+      nextTenYears = _this$showDate.nextTenYears;
+  return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', [_$cc(Button, {
+    'icon': true,
+    'type': 'none',
+    'size': 'small',
+    'className': 'k-prev',
+    'tagName': 'div',
+    'ev-click': isYear ? prevTenYears : prevYear,
+    'children': [_$cc(Icon, _$tmp0), _$cc(Icon, _$tmp1)]
+  }), !isYearOrMonth ? _$cc(Button, {
+    'icon': true,
+    'type': 'none',
+    'size': 'small',
+    'className': 'k-prev',
+    'tagName': 'div',
+    'ev-click': prevMonth,
+    'children': _$cc(Icon, _$tmp2)
+  }) : undefined], 0, 'k-left-btns'), _$ce(2, 'div', !isYear ? _$ma(getDateLabel(), function ($value, $key) {
+    return _$ce(2, 'span', $value.value, 0, 'k-month-value', {
+      'ev-click': $value.onClick
+    });
+  }, $this) : _$ce(2, 'span', this.years.getYearLabel(), 0, 'k-month-value'), 0, 'k-month-values'), _$ce(2, 'div', [!isYearOrMonth ? _$cc(Button, {
+    'icon': true,
+    'type': 'none',
+    'size': 'small',
+    'className': 'k-next',
+    'tagName': 'div',
+    'ev-click': nextMonth,
+    'children': _$cc(Icon, _$tmp3)
+  }) : undefined, _$cc(Button, {
+    'icon': true,
+    'type': 'none',
+    'size': 'small',
+    'className': 'k-next',
+    'tagName': 'div',
+    'ev-click': isYear ? nextTenYears : nextYear,
+    'children': [_$cc(Icon, _$tmp4), _$cc(Icon, _$tmp5)]
+  })], 0, 'k-right-btns')], 4, 'k-datepicker-month'), !isYearOrMonth ? [_$ce(2, 'div', _$ma([_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')], function ($value, $key) {
+    return _$ce(2, 'div', $value, 0, 'k-weekday');
+  }, $this), 4, 'k-weekdays'), _$ce(2, 'div', getItems(getDays(now), onClickDay), 0, 'k-days', {
+    'ev-mouseleave': resetFocusDate
+  })] : _$ce(2, 'div', isYear ? getItems(this.years.getYears(now), this.years.onClick) : getItems(this.months.getMonths(now), this.months.onClick), 0, 'k-years', {
+    'ev-mouseleave': resetFocusDate
+  })], 0, _$cn(classNameObj));
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const DATEPICKER = "Datepicker";
+export declare const hours: {
+    label: string;
+    value: number;
+}[];
+export declare const minutes: {
+    label: string;
+    value: number;
+}[];
+export declare const seconds: {
+    label: string;
+    value: number;
+}[];
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/constants.js

@@ -0,0 +1,20 @@
+var _context, _context2;
+
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { range, strPad } from '../utils';
+export var DATEPICKER = 'Datepicker';
+export var hours = _mapInstanceProperty(_context = range(0, 23)).call(_context, function (value) {
+  return {
+    label: strPad(value, 2),
+    value: value
+  };
+});
+export var minutes = _mapInstanceProperty(_context2 = range(0, 59)).call(_context2, function (value) {
+  return {
+    label: strPad(value, 2),
+    value: value
+  };
+});
+export var seconds = minutes;
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/dayjs.d.ts

@@ -0,0 +1,6 @@
+import dayjs, { Dayjs, OpUnitType } from 'dayjs';
+export default dayjs;
+export type { Dayjs, OpUnitType };
+
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/dayjs.js

@@ -0,0 +1,6 @@
+import dayjs, { Dayjs } from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
+export default dayjs;
+
+export {normalize} from 'intact-vue-next';

package/components/datepicker/helpers.d.ts

@@ -0,0 +1,13 @@
+import dayjs, { Dayjs, OpUnitType } from 'dayjs';
+import { StateValueItem } from './basepicker';
+export declare function getNowDate(): dayjs.Dayjs;
+export declare function clearTime(date: Date): void;
+export declare function isEqual(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
+export declare function isLT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
+export declare function isGT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
+export declare function createDate(date: string): Date;
+export declare function findValueIndex(values: StateValueItem[], value: StateValueItem, type: OpUnitType): number;
+export declare function last<T>(arr: T[]): T | undefined;
+
+
+export {normalize} from 'intact-vue-next';