@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/vc-calendar/src/util/index.js

@@ -0,0 +1,113 @@
+import moment from 'moment';
+
+const defaultDisabledTime = {
+  disabledHours() {
+    return [];
+  },
+  disabledMinutes() {
+    return [];
+  },
+  disabledSeconds() {
+    return [];
+  },
+};
+
+export function getTodayTime(value) {
+  const today = moment();
+  today.locale(value.locale()).utcOffset(value.utcOffset());
+  return today;
+}
+
+export function getTitleString(value) {
+  return value.format('LL');
+}
+
+export function getTodayTimeStr(value) {
+  const today = getTodayTime(value);
+  return getTitleString(today);
+}
+
+export function getMonthName(month) {
+  const locale = month.locale();
+  const localeData = month.localeData();
+  return localeData[locale === 'zh-cn' ? 'months' : 'monthsShort'](month);
+}
+
+export function syncTime(from, to) {
+  if (!moment.isMoment(from) || !moment.isMoment(to)) return;
+  to.hour(from.hour());
+  to.minute(from.minute());
+  to.second(from.second());
+  to.millisecond(from.millisecond());
+}
+
+export function getTimeConfig(value, disabledTime) {
+  let disabledTimeConfig = disabledTime ? disabledTime(value) : {};
+  disabledTimeConfig = {
+    ...defaultDisabledTime,
+    ...disabledTimeConfig,
+  };
+  return disabledTimeConfig;
+}
+
+export function isTimeValidByConfig(value, disabledTimeConfig) {
+  let invalidTime = false;
+  if (value) {
+    const hour = value.hour();
+    const minutes = value.minute();
+    const seconds = value.second();
+    const disabledHours = disabledTimeConfig.disabledHours();
+    if (disabledHours.indexOf(hour) === -1) {
+      const disabledMinutes = disabledTimeConfig.disabledMinutes(hour);
+      if (disabledMinutes.indexOf(minutes) === -1) {
+        const disabledSeconds = disabledTimeConfig.disabledSeconds(hour, minutes);
+        invalidTime = disabledSeconds.indexOf(seconds) !== -1;
+      } else {
+        invalidTime = true;
+      }
+    } else {
+      invalidTime = true;
+    }
+  }
+  return !invalidTime;
+}
+
+export function isTimeValid(value, disabledTime) {
+  const disabledTimeConfig = getTimeConfig(value, disabledTime);
+  return isTimeValidByConfig(value, disabledTimeConfig);
+}
+
+export function isAllowedDate(value, disabledDate, disabledTime) {
+  if (disabledDate) {
+    if (disabledDate(value)) {
+      return false;
+    }
+  }
+  if (disabledTime) {
+    if (!isTimeValid(value, disabledTime)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function formatDate(value, format) {
+  if (!value) {
+    return '';
+  }
+
+  if (Array.isArray(format)) {
+    format = format[0];
+  }
+
+  if (typeof format === 'function') {
+    const result = format(value);
+    if (typeof result === 'string') {
+      return result;
+    } else {
+      throw new Error('The function of format does not return a string');
+    }
+  }
+
+  return value.format(format);
+}

package/src/components/vc-calendar/src/util/toTime.js

@@ -0,0 +1,15 @@
+export function goStartMonth(time) {
+  return time.clone().startOf('month');
+}
+
+export function goEndMonth(time) {
+  return time.clone().endOf('month');
+}
+
+export function goTime(time, direction, unit) {
+  return time.clone().add(direction, unit);
+}
+
+export function includesTime(timeList = [], time, unit) {
+  return timeList.some(t => t.isSame(time, unit));
+}

package/src/components/vc-calendar/src/year/YearPanel.jsx

@@ -0,0 +1,167 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { getListeners } from '../../../_util/props-util';
+const ROW = 4;
+const COL = 3;
+function noop() {}
+function goYear(direction) {
+  const value = this.sValue.clone();
+  value.add(direction, 'year');
+  this.setState({
+    sValue: value,
+  });
+  // 发出 valueChange 事件，让父组件可以联动处理
+  this.__emit('valueChange', value);
+}
+
+function chooseYear(year) {
+  const value = this.sValue.clone();
+  value.year(year);
+  value.month(this.sValue.month());
+  this.sValue = value;
+  this.__emit('select', value);
+}
+
+export default {
+  mixins: [BaseMixin],
+  props: {
+    rootPrefixCls: PropTypes.string,
+    value: PropTypes.object,
+    defaultValue: PropTypes.object,
+    selectedValue: PropTypes.object,
+    locale: PropTypes.object,
+    renderFooter: PropTypes.func,
+    disabledDate: PropTypes.func,
+  },
+  data() {
+    this.nextDecade = goYear.bind(this, 10);
+    this.previousDecade = goYear.bind(this, -10);
+    return {
+      sValue: this.value || this.defaultValue,
+    };
+  },
+  watch: {
+    value(val) {
+      this.sValue = val;
+    },
+  },
+  methods: {
+    years() {
+      const value = this.sValue;
+      const currentYear = value.year();
+      const startYear = parseInt(currentYear / 10, 10) * 10;
+      const previousYear = startYear - 1;
+      const years = [];
+      let index = 0;
+      for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
+        years[rowIndex] = [];
+        for (let colIndex = 0; colIndex < COL; colIndex++) {
+          const year = previousYear + index;
+          const content = String(year);
+          years[rowIndex][colIndex] = {
+            content,
+            year,
+            title: content,
+          };
+          index++;
+        }
+      }
+      return years;
+    },
+  },
+
+  render() {
+    const { sValue: value, locale, renderFooter, $props } = this;
+    const { selectedValue } = $props;
+    const decadePanelShow = getListeners(this).decadePanelShow || noop;
+    const years = this.years();
+    const currentYear = value.year();
+    // 只有当 selectedValue 存在时才显示选中状态
+    const selectedYear = selectedValue ? selectedValue.year() : null;
+    const startYear = parseInt(currentYear / 10, 10) * 10;
+    const endYear = startYear + 9;
+    const prefixCls = `${this.rootPrefixCls}-year-panel`;
+    const { disabledDate } = $props;
+
+    const yeasEls = years.map((row, index) => {
+      const tds = row.map(yearData => {
+        let disabled = false;
+        if (disabledDate) {
+          const testValue = value.clone();
+          testValue.year(yearData.year);
+          disabled = disabledDate(testValue);
+        }
+        const classNameMap = {
+          [`${prefixCls}-cell`]: 1,
+          [`${prefixCls}-cell-disabled`]: disabled,
+          [`${prefixCls}-selected-cell`]: selectedYear !== null && yearData.year === selectedYear,
+          [`${prefixCls}-last-decade-cell`]: yearData.year < startYear,
+          [`${prefixCls}-next-decade-cell`]: yearData.year > endYear,
+        };
+        let clickHandler = noop;
+        if (yearData.year < startYear) {
+          clickHandler = this.previousDecade;
+        } else if (yearData.year > endYear) {
+          clickHandler = this.nextDecade;
+        } else {
+          clickHandler = chooseYear.bind(this, yearData.year);
+        }
+        return (
+          <td
+            role="gridcell"
+            title={yearData.title}
+            key={yearData.content}
+            onClick={disabled ? noop : clickHandler}
+            class={classNameMap}
+          >
+            <a class={`${prefixCls}-year`}>{yearData.content}</a>
+          </td>
+        );
+      });
+      return (
+        <tr key={index} role="row">
+          {tds}
+        </tr>
+      );
+    });
+    const footer = renderFooter && renderFooter('year');
+    return (
+      <div class={prefixCls}>
+        <div>
+          <div class={`${prefixCls}-header`}>
+            <a
+              class={`${prefixCls}-prev-decade-btn`}
+              role="button"
+              onClick={this.previousDecade}
+              title={locale.previousDecade}
+            />
+            <a
+              class={`${prefixCls}-decade-select`}
+              role="button"
+              onClick={decadePanelShow}
+              title={locale.decadeSelect}
+            >
+              <span class={`${prefixCls}-decade-select-content`}>
+                {startYear}-{endYear}
+              </span>
+              <span class={`${prefixCls}-decade-select-arrow`}>x</span>
+            </a>
+
+            <a
+              class={`${prefixCls}-next-decade-btn`}
+              role="button"
+              onClick={this.nextDecade}
+              title={locale.nextDecade}
+            />
+          </div>
+          <div class={`${prefixCls}-body`}>
+            <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+              <tbody class={`${prefixCls}-tbody`}>{yeasEls}</tbody>
+            </table>
+          </div>
+          {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/vc-pagination/locale/en_US.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Go to',
+  jump_to_confirm: 'confirm',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Previous Page',
+  next_page: 'Next Page',
+  prev_5: 'Previous 5 Pages',
+  next_5: 'Next 5 Pages',
+  prev_3: 'Previous 3 Pages',
+  next_3: 'Next 3 Pages',
+};

package/src/components/vc-select/DropdownMenu.jsx

@@ -0,0 +1,216 @@
+import raf from 'raf';
+import PropTypes from '../_util/vue-types';
+import Menu from '../vc-menu';
+import scrollIntoView from 'dom-scroll-into-view';
+import { getSelectKeys, preventDefaultEvent } from './util';
+import { cloneElement } from '../_util/vnode';
+import BaseMixin from '../_util/BaseMixin';
+import { getSlotOptions, getComponentFromProp, getListeners } from '../_util/props-util';
+
+export default {
+  name: 'DropdownMenu',
+  mixins: [BaseMixin],
+  props: {
+    ariaId: PropTypes.string,
+    defaultActiveFirstOption: PropTypes.bool,
+    value: PropTypes.any,
+    dropdownMenuStyle: PropTypes.object,
+    multiple: PropTypes.bool,
+    // onPopupFocus: PropTypes.func,
+    // onPopupScroll: PropTypes.func,
+    // onMenuDeSelect: PropTypes.func,
+    // onMenuSelect: PropTypes.func,
+    prefixCls: PropTypes.string,
+    menuItems: PropTypes.any,
+    inputValue: PropTypes.string,
+    visible: PropTypes.bool,
+    backfillValue: PropTypes.any,
+    firstActiveValue: PropTypes.string,
+    menuItemSelectedIcon: PropTypes.any,
+  },
+  watch: {
+    visible(val) {
+      if (!val) {
+        this.lastVisible = val;
+      } else {
+        this.$nextTick(() => {
+          this.scrollActiveItemToView();
+        });
+      }
+    },
+  },
+
+  created() {
+    this.rafInstance = null;
+    this.lastInputValue = this.$props.inputValue;
+    this.lastVisible = false;
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.scrollActiveItemToView();
+    });
+    this.lastVisible = this.$props.visible;
+  },
+  updated() {
+    const props = this.$props;
+    // if (!this.prevVisible && props.visible) {
+    //   this.$nextTick(() => {
+    //     this.scrollActiveItemToView();
+    //   });
+    // }
+    this.lastVisible = props.visible;
+    this.lastInputValue = props.inputValue;
+    this.prevVisible = this.visible;
+  },
+  beforeDestroy() {
+    if (this.rafInstance) {
+      raf.cancel(this.rafInstance);
+    }
+  },
+  methods: {
+    scrollActiveItemToView() {
+      // scroll into view
+      const itemComponent = this.firstActiveItem && this.firstActiveItem.$el;
+      const props = this.$props;
+      const { value, visible, firstActiveValue } = props;
+      if (!itemComponent || !visible) {
+        return;
+      }
+      const scrollIntoViewOpts = {
+        onlyScrollIfNeeded: true,
+      };
+      if ((!value || value.length === 0) && firstActiveValue) {
+        scrollIntoViewOpts.alignWithTop = true;
+      }
+      // Delay to scroll since current frame item position is not ready when pre view is by filter
+      // https://github.com/ant-design/ant-design/issues/11268#issuecomment-406634462
+      this.rafInstance = raf(() => {
+        scrollIntoView(itemComponent, this.$refs.menuRef.$el, scrollIntoViewOpts);
+      });
+    },
+
+    renderMenu() {
+      const props = this.$props;
+      const {
+        menuItems,
+        defaultActiveFirstOption,
+        value,
+        prefixCls,
+        multiple,
+        inputValue,
+        firstActiveValue,
+        dropdownMenuStyle,
+        backfillValue,
+        visible,
+      } = props;
+      const menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon');
+      const { menuDeselect, menuSelect, popupScroll } = getListeners(this);
+      if (menuItems && menuItems.length) {
+        const selectedKeys = getSelectKeys(menuItems, value);
+        const menuProps = {
+          props: {
+            multiple,
+            itemIcon: multiple ? menuItemSelectedIcon : null,
+            selectedKeys,
+            prefixCls: `${prefixCls}-menu`,
+          },
+          on: {},
+          style: dropdownMenuStyle,
+          ref: 'menuRef',
+          attrs: {
+            role: 'listbox',
+          },
+        };
+        if (popupScroll) {
+          menuProps.on.scroll = popupScroll;
+        }
+        if (multiple) {
+          menuProps.on.deselect = menuDeselect;
+          menuProps.on.select = menuSelect;
+        } else {
+          menuProps.on.click = menuSelect;
+        }
+        const activeKeyProps = {};
+
+        let defaultActiveFirst = defaultActiveFirstOption;
+        let clonedMenuItems = menuItems;
+        if (selectedKeys.length || firstActiveValue) {
+          if (props.visible && !this.lastVisible) {
+            activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;
+          } else if (!visible) {
+            // Do not trigger auto active since we already have selectedKeys
+            if (selectedKeys[0]) {
+              defaultActiveFirst = false;
+            }
+            activeKeyProps.activeKey = undefined;
+          }
+          let foundFirst = false;
+          // set firstActiveItem via cloning menus
+          // for scroll into view
+          const clone = item => {
+            if (
+              (!foundFirst && selectedKeys.indexOf(item.key) !== -1) ||
+              (!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1)
+            ) {
+              foundFirst = true;
+              return cloneElement(item, {
+                directives: [
+                  {
+                    name: 'ant-ref',
+                    value: ref => {
+                      this.firstActiveItem = ref;
+                    },
+                  },
+                ],
+              });
+            }
+            return item;
+          };
+
+          clonedMenuItems = menuItems.map(item => {
+            if (getSlotOptions(item).isMenuItemGroup) {
+              const children = item.componentOptions.children.map(clone);
+              return cloneElement(item, { children });
+            }
+            return clone(item);
+          });
+        } else {
+          // Clear firstActiveItem when dropdown menu items was empty
+          // Avoid `Unable to find node on an unmounted component`
+          // https://github.com/ant-design/ant-design/issues/10774
+          this.firstActiveItem = null;
+        }
+
+        // clear activeKey when inputValue change
+        const lastValue = value && value[value.length - 1];
+        if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) {
+          activeKeyProps.activeKey = '';
+        }
+        menuProps.props = { ...activeKeyProps, ...menuProps.props, defaultActiveFirst };
+        return <Menu {...menuProps}>{clonedMenuItems}</Menu>;
+      }
+      return null;
+    },
+  },
+  render() {
+    const renderMenu = this.renderMenu();
+    const { popupFocus, popupScroll } = getListeners(this);
+    return renderMenu ? (
+      <div
+        style={{
+          overflow: 'auto',
+          transform: 'translateZ(0)',
+        }}
+        id={this.$props.ariaId}
+        tabIndex="-1"
+        onFocus={popupFocus}
+        onMousedown={preventDefaultEvent}
+        onScroll={popupScroll}
+        ref="menuContainer"
+      >
+        {renderMenu}
+      </div>
+    ) : null;
+  },
+};

package/src/components/vc-select/OptGroup.jsx

@@ -0,0 +1,8 @@
+import PropTypes from '../_util/vue-types';
+export default {
+  props: {
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  },
+  isSelectOptGroup: true,
+};

package/src/components/vc-select/Option.jsx

@@ -0,0 +1,11 @@
+import PropTypes from '../_util/vue-types';
+
+export default {
+  props: {
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    disabled: PropTypes.bool,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  },
+  isSelectOption: true,
+};

package/src/components/vc-select/PropTypes.js

@@ -0,0 +1,59 @@
+import PropTypes from '../_util/vue-types';
+
+export const SelectPropTypes = {
+  defaultActiveFirstOption: PropTypes.bool,
+  multiple: PropTypes.bool,
+  filterOption: PropTypes.any,
+  // children: PropTypes.any,
+  showSearch: PropTypes.bool,
+  disabled: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  showArrow: PropTypes.bool,
+  tags: PropTypes.bool,
+  prefixCls: PropTypes.string,
+  // className: PropTypes.string,
+  transitionName: PropTypes.string,
+  optionLabelProp: PropTypes.string,
+  optionFilterProp: PropTypes.string,
+  animation: PropTypes.string,
+  choiceTransitionName: PropTypes.string,
+  open: PropTypes.bool,
+  defaultOpen: PropTypes.bool,
+  // onChange: PropTypes.func,
+  // onBlur: PropTypes.func,
+  // onFocus: PropTypes.func,
+  // onSelect: PropTypes.func,
+  // onSearch: PropTypes.func,
+  // onPopupScroll: PropTypes.func,
+  // onMouseEnter: PropTypes.func,
+  // onMouseLeave: PropTypes.func,
+  // onInputKeyDown: PropTypes.func,
+  placeholder: PropTypes.any,
+  // onDeselect: PropTypes.func,
+  labelInValue: PropTypes.bool,
+  loading: PropTypes.bool,
+  value: PropTypes.any,
+  defaultValue: PropTypes.any,
+  dropdownStyle: PropTypes.object,
+  dropdownClassName: PropTypes.string,
+  maxTagTextLength: PropTypes.number,
+  maxTagCount: PropTypes.number,
+  maxTagPlaceholder: PropTypes.any,
+  tokenSeparators: PropTypes.arrayOf(PropTypes.string),
+  getInputElement: PropTypes.func,
+  showAction: PropTypes.arrayOf(PropTypes.string),
+  autoFocus: PropTypes.bool,
+  getPopupContainer: PropTypes.func,
+  clearIcon: PropTypes.any,
+  inputIcon: PropTypes.any,
+  removeIcon: PropTypes.any,
+  menuItemSelectedIcon: PropTypes.any,
+  dropdownRender: PropTypes.func,
+  mode: PropTypes.oneOf(['multiple', 'tags']),
+  backfill: PropTypes.bool,
+  dropdownAlign: PropTypes.any,
+  dropdownMatchSelectWidth: PropTypes.bool,
+  dropdownMenuStyle: PropTypes.object,
+  notFoundContent: PropTypes.oneOfType([String, Number]),
+  tabIndex: PropTypes.oneOfType([String, Number]),
+};