@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/button/button.jsx

@@ -0,0 +1,186 @@
+import Wave from '../_util/wave';
+import Icon from '../icon';
+import buttonTypes from './buttonTypes';
+import { filterEmpty, getListeners, getComponentFromProp } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+
+const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
+const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
+const props = buttonTypes();
+export default {
+  name: 'AButton',
+  inheritAttrs: false,
+  __ANT_BUTTON: true,
+  props,
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  data() {
+    return {
+      sizeMap: {
+        large: 'lg',
+        small: 'sm',
+      },
+      sLoading: !!this.loading,
+      hasTwoCNChar: false,
+    };
+  },
+  computed: {
+    classes() {
+      const {
+        prefixCls: customizePrefixCls,
+        type,
+        shape,
+        size,
+        hasTwoCNChar,
+        sLoading,
+        ghost,
+        block,
+        icon,
+        $slots,
+      } = this;
+      const getPrefixCls = this.configProvider.getPrefixCls;
+      const prefixCls = getPrefixCls('btn', customizePrefixCls);
+      const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
+
+      // large => lg
+      // small => sm
+      let sizeCls = '';
+      switch (size) {
+        case 'large':
+          sizeCls = 'lg';
+          break;
+        case 'small':
+          sizeCls = 'sm';
+          break;
+        default:
+          break;
+      }
+      const iconType = sLoading ? 'loading' : icon;
+      const children = filterEmpty($slots.default);
+      return {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-${type}`]: type,
+        [`${prefixCls}-${shape}`]: shape,
+        [`${prefixCls}-${sizeCls}`]: sizeCls,
+        [`${prefixCls}-icon-only`]: children.length === 0 && iconType,
+        [`${prefixCls}-loading`]: sLoading,
+        [`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
+        [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
+        [`${prefixCls}-block`]: block,
+      };
+    },
+  },
+  watch: {
+    loading(val, preVal) {
+      if (preVal && typeof preVal !== 'boolean') {
+        clearTimeout(this.delayTimeout);
+      }
+      if (val && typeof val !== 'boolean' && val.delay) {
+        this.delayTimeout = setTimeout(() => {
+          this.sLoading = !!val;
+        }, val.delay);
+      } else {
+        this.sLoading = !!val;
+      }
+    },
+  },
+  mounted() {
+    this.fixTwoCNChar();
+  },
+  updated() {
+    this.fixTwoCNChar();
+  },
+  beforeDestroy() {
+    // if (this.timeout) {
+    //   clearTimeout(this.timeout)
+    // }
+    if (this.delayTimeout) {
+      clearTimeout(this.delayTimeout);
+    }
+  },
+  methods: {
+    fixTwoCNChar() {
+      // Fix for HOC usage like <FormatMessage />
+      const node = this.$refs.buttonNode;
+      if (!node) {
+        return;
+      }
+      const buttonText = node.textContent;
+      if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
+        if (!this.hasTwoCNChar) {
+          this.hasTwoCNChar = true;
+        }
+      } else if (this.hasTwoCNChar) {
+        this.hasTwoCNChar = false;
+      }
+    },
+    handleClick(event) {
+      const { sLoading } = this.$data;
+      if (sLoading) {
+        return;
+      }
+      this.$emit('click', event);
+    },
+    insertSpace(child, needInserted) {
+      const SPACE = needInserted ? ' ' : '';
+      if (typeof child.text === 'string') {
+        let text = child.text.trim();
+        if (isTwoCNChar(text)) {
+          text = text.split('').join(SPACE);
+        }
+        return <span>{text}</span>;
+      }
+      return child;
+    },
+    isNeedInserted() {
+      const { $slots, type } = this;
+      const icon = getComponentFromProp(this, 'icon');
+      return $slots.default && $slots.default.length === 1 && !icon && type !== 'link';
+    },
+  },
+  render() {
+    const { type, htmlType, classes, disabled, handleClick, sLoading, $slots, $attrs } = this;
+    const icon = getComponentFromProp(this, 'icon');
+    const buttonProps = {
+      attrs: {
+        ...$attrs,
+        disabled,
+      },
+      class: classes,
+      on: {
+        ...getListeners(this),
+        click: handleClick,
+      },
+    };
+    const iconType = sLoading ? 'loading' : icon;
+    const iconNode = iconType ? <Icon type={iconType} /> : null;
+    const children = filterEmpty($slots.default);
+    const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
+    const kids = children.map(child =>
+      this.insertSpace(child, this.isNeedInserted() && autoInsertSpace),
+    );
+
+    if ($attrs.href !== undefined) {
+      return (
+        <a {...buttonProps} ref="buttonNode">
+          {iconNode}
+          {kids}
+        </a>
+      );
+    }
+
+    const buttonNode = (
+      <button {...buttonProps} ref="buttonNode" type={htmlType || 'button'}>
+        {iconNode}
+        {kids}
+      </button>
+    );
+
+    if (type === 'link') {
+      return buttonNode;
+    }
+
+    return <Wave>{buttonNode}</Wave>;
+  },
+};

package/src/components/button/buttonTypes.js

@@ -0,0 +1,13 @@
+import PropTypes from '../_util/vue-types';
+export default () => ({
+  prefixCls: PropTypes.string,
+  type: PropTypes.string,
+  htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).def('button'),
+  icon: PropTypes.any,
+  shape: PropTypes.oneOf(['circle', 'circle-outline', 'round']),
+  size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
+  loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  disabled: PropTypes.bool,
+  ghost: PropTypes.bool,
+  block: PropTypes.bool,
+});

package/src/components/button/index.js

@@ -0,0 +1,14 @@
+import Button from './button';
+import ButtonGroup from './button-group';
+import Base from '../base';
+
+Button.Group = ButtonGroup;
+
+/* istanbul ignore next */
+Button.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(Button.name, Button);
+  Vue.component(ButtonGroup.name, ButtonGroup);
+};
+
+export default Button;

package/src/components/button/style/index.js

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

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

@@ -0,0 +1,224 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './mixin';
+
+@btn-prefix-cls: ~'@{ant-prefix}-btn';
+
+// for compatible
+@btn-ghost-color: @text-color;
+@btn-ghost-bg: transparent;
+@btn-ghost-border: @border-color-base;
+
+// Button styles
+// -----------------------------
+.@{btn-prefix-cls} {
+  // Fixing https://github.com/ant-design/ant-design/issues/12978
+  // Fixing https://github.com/ant-design/ant-design/issues/20058
+  // Fixing https://github.com/ant-design/ant-design/issues/19972
+  // Fixing https://github.com/ant-design/ant-design/issues/12978
+  // Fixing https://github.com/ant-design/ant-design/issues/18107
+  // Fixing https://github.com/ant-design/ant-design/issues/13214
+  // It is a render problem of chrome, which is only happened in the codesandbox demo
+  // 0.001px solution works and I don't why
+  line-height: @line-height-base - 0.001;
+  .btn;
+  .btn-default;
+
+  // Make sure that the target of Button's click event always be `button`
+  // Ref: https://github.com/ant-design/ant-design/issues/7034
+  > i,
+  > span {
+    display: inline-block;
+    transition: margin-left 0.3s @ease-in-out;
+    pointer-events: none;
+  }
+
+  &-primary {
+    .btn-primary;
+
+    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
+      border-right-color: @btn-group-border;
+      border-left-color: @btn-group-border;
+
+      &:disabled {
+        border-color: @btn-default-border;
+      }
+    }
+
+    .@{btn-prefix-cls}-group &:first-child {
+      &:not(:last-child) {
+        border-right-color: @btn-group-border;
+        &[disabled] {
+          border-right-color: @btn-default-border;
+        }
+      }
+    }
+
+    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
+    .@{btn-prefix-cls}-group & + & {
+      border-left-color: @btn-group-border;
+      &[disabled] {
+        border-left-color: @btn-default-border;
+      }
+    }
+  }
+
+  &-ghost {
+    .btn-ghost;
+  }
+
+  &-dashed {
+    .btn-dashed;
+  }
+
+  &-danger {
+    .btn-danger;
+  }
+
+  &-link {
+    .btn-link;
+  }
+
+  &-icon-only {
+    .btn-square(@btn-prefix-cls);
+
+    > i {
+      vertical-align: middle;
+    }
+  }
+
+  &-round {
+    .btn-round(@btn-prefix-cls);
+    &.@{btn-prefix-cls}-icon-only {
+      width: auto;
+    }
+  }
+
+  &-circle,
+  &-circle-outline {
+    .btn-circle(@btn-prefix-cls);
+  }
+
+  &::before {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+    z-index: 1;
+    display: none;
+    background: @component-background;
+    border-radius: inherit;
+    opacity: 0.35;
+    transition: opacity 0.2s;
+    content: '';
+    pointer-events: none;
+  }
+
+  .@{iconfont-css-prefix} {
+    transition: margin-left 0.3s @ease-in-out;
+
+    // Follow icon blur under windows. Change the render.
+    // https://github.com/ant-design/ant-design/issues/13924
+    &.@{iconfont-css-prefix}-plus,
+    &.@{iconfont-css-prefix}-minus {
+      > svg {
+        shape-rendering: optimizeSpeed;
+      }
+    }
+  }
+
+  &&-loading {
+    position: relative;
+    &:not([disabled]) {
+      pointer-events: none;
+    }
+  }
+
+  &&-loading::before {
+    display: block;
+  }
+
+  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
+    padding-left: 29px;
+    .@{iconfont-css-prefix}:not(:last-child) {
+      margin-left: -14px;
+    }
+  }
+
+  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
+    padding-left: 24px;
+    .@{iconfont-css-prefix} {
+      margin-left: -17px;
+    }
+  }
+
+  &-group {
+    .btn-group(@btn-prefix-cls);
+  }
+
+  // http://stackoverflow.com/a/21281554/3040605
+  &:focus > span,
+  &:active > span {
+    position: relative;
+  }
+
+  // To ensure that a space will be placed between character and `Icon`.
+  > .@{iconfont-css-prefix} + span,
+  > span + .@{iconfont-css-prefix} {
+    margin-left: 8px;
+  }
+
+  &-background-ghost {
+    color: @component-background;
+    background: transparent !important;
+    border-color: @component-background;
+  }
+
+  &-background-ghost&-primary {
+    .button-variant-ghost(@btn-primary-bg);
+  }
+
+  &-background-ghost&-danger {
+    .button-variant-ghost(@btn-danger-border);
+  }
+
+  &-background-ghost&-link {
+    .button-variant-ghost(@link-color; transparent);
+
+    color: @component-background;
+  }
+
+  &-two-chinese-chars::first-letter {
+    letter-spacing: 0.34em;
+  }
+
+  &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
+    margin-right: -0.34em;
+    letter-spacing: 0.34em;
+  }
+
+  &-block {
+    width: 100%;
+  }
+
+  // https://github.com/ant-design/ant-design/issues/12681
+  &:empty {
+    vertical-align: top;
+  }
+}
+
+a.@{btn-prefix-cls} {
+  // Fixing https://github.com/ant-design/ant-design/issues/12978
+  // It is a render problem of chrome, which is only happened in the codesandbox demo
+  // 0.1px for padding-top solution works and I don't why
+  padding-top: 0.1px;
+  line-height: @btn-height-base - 2px;
+
+  &-lg {
+    line-height: @btn-height-lg - 2px;
+  }
+  &-sm {
+    line-height: @btn-height-sm - 2px;
+  }
+}