@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/button/style/mixin.less

@@ -0,0 +1,357 @@
+// mixins for button
+// ------------------------
+.button-size(@height; @padding; @font-size; @border-radius) {
+  height: @height;
+  padding: @padding;
+  font-size: @font-size;
+  border-radius: @border-radius;
+}
+
+.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
+  &-disabled,
+  &.disabled,
+  &[disabled] {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      .button-color(@color; @background; @border);
+
+      text-shadow: none;
+      box-shadow: none;
+    }
+  }
+}
+
+.button-variant-primary(@color; @background) {
+  .button-color(@color; @background; @background);
+
+  text-shadow: @btn-text-shadow;
+  box-shadow: @btn-primary-shadow;
+
+  &:hover,
+  &:focus {
+    .button-color(
+      @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
+    );
+  }
+
+  &:active,
+  &.active {
+    .button-color(
+      @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
+    );
+  }
+
+  .button-disabled();
+}
+
+.button-variant-other(@color; @background; @border) {
+  .button-color(@color; @background; @border);
+
+  &:hover,
+  &:focus {
+    .button-color(
+      ~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
+        `
+    );
+  }
+  &:active,
+  &.active {
+    .button-color(
+      ~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
+        `
+    );
+  }
+  .button-disabled();
+}
+.button-variant-ghost(@color; @border: @color) {
+  .button-color(@color; transparent; @border);
+  text-shadow: none;
+  &:hover,
+  &:focus {
+    & when (@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+    }
+    & when not(@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+    }
+  }
+  &:active,
+  &.active {
+    & when (@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+    }
+    & when not(@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+    }
+  }
+  .button-disabled();
+}
+.button-color(@color; @background; @border) {
+  color: @color;
+  background-color: @background;
+  border-color: @border;
+  // a inside Button which only work in Chrome
+  // http://stackoverflow.com/a/17253457
+  > a:only-child {
+    color: currentColor;
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: transparent;
+      content: '';
+    }
+  }
+}
+.button-group-base(@btnClassName) {
+  position: relative;
+  display: inline-flex;
+  > .@{btnClassName},
+  > span > .@{btnClassName} {
+    position: relative;
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 2;
+    }
+    &:disabled {
+      z-index: 0;
+    }
+  }
+  > .@{btnClassName}-icon-only {
+    font-size: @font-size-base;
+  }
+  // size
+  &-lg > .@{btnClassName},
+  &-lg > span > .@{btnClassName} {
+    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
+    line-height: @btn-height-lg - 2px;
+  }
+  &-lg > .@{btnClassName}.@{btnClassName}-icon-only {
+    .square(@btn-height-lg);
+    padding-right: 0;
+    padding-left: 0;
+  }
+  &-sm > .@{btnClassName},
+  &-sm > span > .@{btnClassName} {
+    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
+    line-height: @btn-height-sm - 2px;
+    > .@{iconfont-css-prefix} {
+      font-size: @font-size-base;
+    }
+  }
+  &-sm > .@{btnClassName}.@{btnClassName}-icon-only {
+    .square(@btn-height-sm);
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+// Base styles of buttons
+// --------------------------------------------------
+.btn() {
+  position: relative;
+  display: inline-block;
+  font-weight: @btn-font-weight;
+  white-space: nowrap;
+  text-align: center;
+  background-image: none;
+  border: @btn-border-width @btn-border-style transparent;
+  box-shadow: @btn-shadow;
+  cursor: pointer;
+  transition: all 0.3s @ease-in-out;
+  user-select: none;
+  touch-action: manipulation;
+  .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
+  > .@{iconfont-css-prefix} {
+    line-height: 1;
+  }
+  &,
+  &:active,
+  &:focus {
+    outline: 0;
+  }
+  &:not([disabled]):hover {
+    text-decoration: none;
+  }
+  &:not([disabled]):active {
+    outline: 0;
+    box-shadow: none;
+  }
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    > * {
+      pointer-events: none;
+    }
+  }
+  &-lg {
+    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
+  }
+  &-sm {
+    .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
+  }
+}
+// primary button style
+.btn-primary() {
+  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
+}
+// default button style
+.btn-default() {
+  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    text-decoration: none;
+    background: @btn-default-bg;
+  }
+}
+// ghost button style
+.btn-ghost() {
+  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+}
+// dashed button style
+.btn-dashed() {
+  .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
+  border-style: dashed;
+}
+// danger button style
+.btn-danger() {
+  .button-variant-primary(@btn-danger-color, @btn-danger-bg);
+}
+// link button style
+.btn-link() {
+  .button-variant-other(@link-color, transparent, transparent);
+  box-shadow: none;
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+  .button-disabled(@disabled-color; transparent; transparent);
+}
+// round button
+.btn-round(@btnClassName: btn) {
+  .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base; @btn-circle-size);
+  &.@{btnClassName}-lg {
+    .button-size(
+      @btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg
+    );
+  }
+  &.@{btnClassName}-sm {
+    .button-size(
+      @btn-circle-size-sm; 0 @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm
+    );
+  }
+}
+// square button: the content only contains icon
+.btn-square(@btnClassName: btn) {
+  .square(@btn-square-size);
+  .button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius-base);
+  &.@{btnClassName}-lg {
+    .square(@btn-square-size-lg);
+    .button-size(@btn-square-size-lg; 0; @btn-font-size-lg + 2px; @btn-border-radius-base);
+  }
+  &.@{btnClassName}-sm {
+    .square(@btn-square-size-sm);
+    .button-size(@btn-square-size-sm; 0; @font-size-base; @btn-border-radius-base);
+  }
+}
+// circle button: the content only contains icon
+.btn-circle(@btnClassName: btn) {
+  min-width: @btn-height-base;
+  padding-right: 0;
+  padding-left: 0;
+  text-align: center;
+  border-radius: 50%;
+  &.@{btnClassName}-lg {
+    min-width: @btn-height-lg;
+    border-radius: 50%;
+  }
+  &.@{btnClassName}-sm {
+    min-width: @btn-height-sm;
+    border-radius: 50%;
+  }
+}
+// Horizontal button groups style
+// --------------------------------------------------
+.btn-group(@btnClassName: btn) {
+  .button-group-base(@btnClassName);
+  .@{btnClassName} + .@{btnClassName},
+  .@{btnClassName} + &,
+  span + .@{btnClassName},
+  .@{btnClassName} + span,
+  > span + span,
+  & + .@{btnClassName},
+  & + & {
+    margin-left: -1px;
+  }
+  .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
+    border-left-color: transparent;
+  }
+  .@{btnClassName} {
+    border-radius: 0;
+  }
+  > .@{btnClassName}:first-child,
+  > span:first-child > .@{btnClassName} {
+    margin-left: 0;
+  }
+  > .@{btnClassName}:only-child {
+    border-radius: @btn-border-radius-base;
+  }
+  > span:only-child > .@{btnClassName} {
+    border-radius: @btn-border-radius-base;
+  }
+  > .@{btnClassName}:first-child:not(:last-child),
+  > span:first-child:not(:last-child) > .@{btnClassName} {
+    border-top-left-radius: @btn-border-radius-base;
+    border-bottom-left-radius: @btn-border-radius-base;
+  }
+  > .@{btnClassName}:last-child:not(:first-child),
+  > span:last-child:not(:first-child) > .@{btnClassName} {
+    border-top-right-radius: @btn-border-radius-base;
+    border-bottom-right-radius: @btn-border-radius-base;
+  }
+  &-sm {
+    > .@{btnClassName}:only-child {
+      border-radius: @btn-border-radius-sm;
+    }
+    > span:only-child > .@{btnClassName} {
+      border-radius: @btn-border-radius-sm;
+    }
+    > .@{btnClassName}:first-child:not(:last-child),
+    > span:first-child:not(:last-child) > .@{btnClassName} {
+      border-top-left-radius: @btn-border-radius-sm;
+      border-bottom-left-radius: @btn-border-radius-sm;
+    }
+    > .@{btnClassName}:last-child:not(:first-child),
+    > span:last-child:not(:first-child) > .@{btnClassName} {
+      border-top-right-radius: @btn-border-radius-sm;
+      border-bottom-right-radius: @btn-border-radius-sm;
+    }
+  }
+  & > & {
+    float: left;
+  }
+  & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
+    border-radius: 0;
+  }
+  & > &:first-child:not(:last-child) {
+    > .@{btnClassName}:last-child {
+      padding-right: 8px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
+    padding-left: 8px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

package/src/components/calendar/locale/en_US.js

@@ -0,0 +1,2 @@
+import en_US from '../../date-picker/locale/en_US';
+export default en_US;

package/src/components/config-provider/__tests__/index.test.js

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import ConfigProvider from '..';
+import Button from '../../button';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('ConfigProvider', () => {
+  mountTest({
+    render() {
+      return (
+        <ConfigProvider>
+          <div />
+        </ConfigProvider>
+      );
+    },
+  });
+
+  it('Content Security Policy', () => {
+    const csp = { nonce: 'test-antd' };
+    const wrapper = mount({
+      render() {
+        return (
+          <ConfigProvider csp={csp}>
+            <Button />
+          </ConfigProvider>
+        );
+      },
+    });
+    expect(wrapper.find({ name: 'Wave' }).vm.csp).toBe(csp);
+  });
+
+  it('autoInsertSpaceInButton', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <ConfigProvider autoInsertSpaceInButton={false}>
+            <Button>确定</Button>
+          </ConfigProvider>
+        );
+      },
+    });
+
+    expect(wrapper.find({ name: 'AButton' }).text()).toBe('确定');
+  });
+});

package/src/components/config-provider/configConsumerProps.jsx

@@ -0,0 +1,9 @@
+import defaultRenderEmpty from './renderEmpty';
+
+export const ConfigConsumerProps = {
+  getPrefixCls: (suffixCls, customizePrefixCls) => {
+    if (customizePrefixCls) return customizePrefixCls;
+    return `ant-${suffixCls}`;
+  },
+  renderEmpty: defaultRenderEmpty,
+};

package/src/components/config-provider/index.jsx

@@ -0,0 +1,91 @@
+import Vue from 'vue';
+import PropTypes from '../_util/vue-types';
+import { filterEmpty, getComponentFromProp } from '../_util/props-util';
+import defaultRenderEmpty from './renderEmpty';
+import Base from '../base';
+import LocaleProvider, { ANT_MARK } from '../locale-provider';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+
+function getWatch(keys = []) {
+  const watch = {};
+  keys.forEach(k => {
+    watch[k] = function(value) {
+      this._proxyVm._data[k] = value;
+    };
+  });
+  return watch;
+}
+
+const ConfigProvider = {
+  name: 'AConfigProvider',
+  props: {
+    getPopupContainer: PropTypes.func,
+    prefixCls: PropTypes.string,
+    renderEmpty: PropTypes.func,
+    csp: PropTypes.object,
+    autoInsertSpaceInButton: PropTypes.bool,
+    locale: PropTypes.object,
+    pageHeader: PropTypes.object,
+    transformCellText: PropTypes.func,
+  },
+  provide() {
+    const _self = this;
+    this._proxyVm = new Vue({
+      data() {
+        return {
+          ..._self.$props,
+          getPrefixCls: _self.getPrefixCls,
+          renderEmpty: _self.renderEmptyComponent,
+        };
+      },
+    });
+    return {
+      configProvider: this._proxyVm._data,
+    };
+  },
+  watch: {
+    ...getWatch([
+      'prefixCls',
+      'csp',
+      'autoInsertSpaceInButton',
+      'locale',
+      'pageHeader',
+      'transformCellText',
+    ]),
+  },
+  methods: {
+    renderEmptyComponent(h, name) {
+      const renderEmpty =
+        getComponentFromProp(this, 'renderEmpty', {}, false) || defaultRenderEmpty;
+      return renderEmpty(h, name);
+    },
+    getPrefixCls(suffixCls, customizePrefixCls) {
+      const { prefixCls = 'ant' } = this.$props;
+      if (customizePrefixCls) return customizePrefixCls;
+      return suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
+    },
+    renderProvider(legacyLocale) {
+      return (
+        <LocaleProvider locale={this.locale || legacyLocale} _ANT_MARK__={ANT_MARK}>
+          {this.$slots.default ? filterEmpty(this.$slots.default)[0] : null}
+        </LocaleProvider>
+      );
+    },
+  },
+
+  render() {
+    return (
+      <LocaleReceiver
+        scopedSlots={{ default: (_, __, legacyLocale) => this.renderProvider(legacyLocale) }}
+      />
+    );
+  },
+};
+
+/* istanbul ignore next */
+ConfigProvider.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(ConfigProvider.name, ConfigProvider);
+};
+
+export default ConfigProvider;

package/src/components/config-provider/renderEmpty.jsx

@@ -0,0 +1,42 @@
+import PropTypes from '../_util/vue-types';
+import Empty from '../empty';
+import { ConfigConsumerProps } from './configConsumerProps';
+
+const RenderEmpty = {
+  functional: true,
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  props: {
+    componentName: PropTypes.string,
+  },
+  render(createElement, context) {
+    const { props, injections } = context;
+    function renderHtml(componentName) {
+      const getPrefixCls = injections.configProvider.getPrefixCls;
+      const prefix = getPrefixCls('empty');
+      switch (componentName) {
+        case 'Table':
+        case 'List':
+          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+
+        case 'Select':
+        case 'TreeSelect':
+        case 'Cascader':
+        case 'Transfer':
+        case 'Mentions':
+          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} class={`${prefix}-small`} />;
+
+        default:
+          return <Empty />;
+      }
+    }
+    return renderHtml(props.componentName);
+  },
+};
+
+function renderEmpty(h, componentName) {
+  return <RenderEmpty componentName={componentName} />;
+}
+
+export default renderEmpty;

package/src/components/config-provider/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/src/components/config-provider/style/index.less

@@ -0,0 +1,2 @@
+// placeholder
+@import '../../style/themes/index';

package/src/components/date-picker/InputIcon.js

@@ -0,0 +1,20 @@
+import Icon from '../icon';
+import { isValidElement } from '../_util/props-util';
+import { cloneElement } from '../_util/vnode';
+
+export default {
+  functional: true,
+  render(h, context) {
+    const { props } = context;
+    const { suffixIcon, prefixCls } = props;
+    return (
+      (suffixIcon && isValidElement(suffixIcon) ? (
+        cloneElement(suffixIcon, {
+          class: `${prefixCls}-picker-icon`,
+        })
+      ) : (
+        <span class={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
+      )) || <Icon type="calendar" class={`${prefixCls}-picker-icon`} />
+    );
+  },
+};

package/src/components/date-picker/PresetPanel.jsx

@@ -0,0 +1,102 @@
+/**
+ * PresetPanel - 预设日期范围面板组件
+ * 用于显示快捷选择的预设日期范围
+ */
+
+import PropTypes from '../_util/vue-types';
+import classNames from 'classnames';
+
+export default {
+  name: 'PresetPanel',
+  props: {
+    /**
+     * 样式前缀
+     */
+    prefixCls: PropTypes.string,
+
+    /**
+     * 预设列表
+     * @type {Array<{label: string|VNode, value: Array|Function}>}
+     */
+    presets: PropTypes.array.def([]),
+
+    /**
+     * 选中的预设索引
+     */
+    selectedIndex: PropTypes.number.def(-1),
+  },
+
+  methods: {
+    /**
+     * 获取预设的实际值
+     * @param {Object} preset - 预设项
+     * @returns {Array} 日期范围值
+     */
+    getPresetValue(preset) {
+      if (!preset) return null;
+      const { value } = preset;
+      return typeof value === 'function' ? value() : value;
+    },
+
+    /**
+     * 点击预设项
+     * @param {Object} preset - 预设项
+     * @param {number} index - 索引
+     */
+    handleClick(preset, index) {
+      const value = this.getPresetValue(preset);
+      this.$emit('select', value, preset, index);
+    },
+
+    /**
+     * 鼠标进入预设项
+     * @param {Object} preset - 预设项
+     * @param {number} index - 索引
+     */
+    handleMouseEnter(preset, index) {
+      const value = this.getPresetValue(preset);
+      this.$emit('hover', value, preset, index);
+    },
+
+    /**
+     * 鼠标离开预设项
+     */
+    handleMouseLeave() {
+      this.$emit('hover', null, null, -1);
+    },
+  },
+
+  render() {
+    const { prefixCls, presets, selectedIndex } = this;
+
+    if (!presets || presets.length === 0) {
+      return null;
+    }
+
+    const panelCls = `${prefixCls}-presets`;
+
+    return (
+      <div class={panelCls}>
+        <ul class={`${panelCls}-list`}>
+          {presets.map((preset, index) => {
+            const itemCls = classNames(`${panelCls}-item`, {
+              [`${panelCls}-item-selected`]: index === selectedIndex,
+            });
+
+            return (
+              <li
+                key={index}
+                class={itemCls}
+                onClick={() => this.handleClick(preset, index)}
+                onMouseenter={() => this.handleMouseEnter(preset, index)}
+                onMouseleave={this.handleMouseLeave}
+              >
+                {preset.label}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  },
+};