@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/input/ClearableLabeledInput.jsx

@@ -0,0 +1,182 @@
+import classNames from 'classnames';
+import Icon from '../icon';
+import { getInputClassName } from './Input';
+import PropTypes from '../_util/vue-types';
+import { cloneElement } from '../_util/vnode';
+import { getComponentFromProp } from '../_util/props-util';
+
+export function hasPrefixSuffix(instance) {
+  return !!(
+    getComponentFromProp(instance, 'prefix') ||
+    getComponentFromProp(instance, 'suffix') ||
+    instance.$props.allowClear
+  );
+}
+
+const ClearableInputType = ['text', 'input'];
+
+const ClearableLabeledInput = {
+  props: {
+    prefixCls: PropTypes.string,
+    inputType: PropTypes.oneOf(ClearableInputType),
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    allowClear: PropTypes.bool,
+    element: PropTypes.any,
+    handleReset: PropTypes.func,
+    disabled: PropTypes.bool,
+    size: PropTypes.oneOf(['small', 'large', 'default']),
+    suffix: PropTypes.any,
+    prefix: PropTypes.any,
+    addonBefore: PropTypes.any,
+    addonAfter: PropTypes.any,
+    className: PropTypes.string,
+    readOnly: PropTypes.bool,
+  },
+  methods: {
+    renderClearIcon(prefixCls) {
+      const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.$props;
+      if (
+        !allowClear ||
+        disabled ||
+        readOnly ||
+        value === undefined ||
+        value === null ||
+        value === ''
+      ) {
+        return null;
+      }
+      const className =
+        inputType === ClearableInputType[0]
+          ? `${prefixCls}-textarea-clear-icon`
+          : `${prefixCls}-clear-icon`;
+      return (
+        <Icon
+          type="close-circle"
+          theme="filled"
+          onClick={handleReset}
+          class={className}
+          role="button"
+        />
+      );
+    },
+
+    renderSuffix(prefixCls) {
+      const { suffix, allowClear } = this.$props;
+      if (suffix || allowClear) {
+        return (
+          <span class={`${prefixCls}-suffix`}>
+            {this.renderClearIcon(prefixCls)}
+            {suffix}
+          </span>
+        );
+      }
+      return null;
+    },
+
+    renderLabeledIcon(prefixCls, element) {
+      const props = this.$props;
+      const suffix = this.renderSuffix(prefixCls);
+      if (!hasPrefixSuffix(this)) {
+        return cloneElement(element, {
+          props: { value: props.value },
+        });
+      }
+
+      const prefix = props.prefix ? (
+        <span class={`${prefixCls}-prefix`}>{props.prefix}</span>
+      ) : null;
+
+      const affixWrapperCls = classNames(props.className, `${prefixCls}-affix-wrapper`, {
+        [`${prefixCls}-affix-wrapper-sm`]: props.size === 'small',
+        [`${prefixCls}-affix-wrapper-lg`]: props.size === 'large',
+        [`${prefixCls}-affix-wrapper-input-with-clear-btn`]:
+          props.suffix && props.allowClear && this.$props.value,
+      });
+
+      return (
+        <span class={affixWrapperCls} style={props.style}>
+          {prefix}
+          {cloneElement(element, {
+            style: null,
+            props: { value: props.value },
+            class: getInputClassName(prefixCls, props.size, props.disabled),
+          })}
+          {suffix}
+        </span>
+      );
+    },
+
+    renderInputWithLabel(prefixCls, labeledElement) {
+      const { addonBefore, addonAfter, style, size, className } = this.$props;
+      // Not wrap when there is not addons
+      if (!addonBefore && !addonAfter) {
+        return labeledElement;
+      }
+
+      const wrapperClassName = `${prefixCls}-group`;
+      const addonClassName = `${wrapperClassName}-addon`;
+      const addonBeforeNode = addonBefore ? (
+        <span class={addonClassName}>{addonBefore}</span>
+      ) : null;
+      const addonAfterNode = addonAfter ? <span class={addonClassName}>{addonAfter}</span> : null;
+
+      const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, {
+        [wrapperClassName]: addonBefore || addonAfter,
+      });
+
+      const mergedGroupClassName = classNames(className, `${prefixCls}-group-wrapper`, {
+        [`${prefixCls}-group-wrapper-sm`]: size === 'small',
+        [`${prefixCls}-group-wrapper-lg`]: size === 'large',
+      });
+
+      // Need another wrapper for changing display:table to display:inline-block
+      // and put style prop in wrapper
+      return (
+        <span class={mergedGroupClassName} style={style}>
+          <span class={mergedWrapperClassName}>
+            {addonBeforeNode}
+            {cloneElement(labeledElement, { style: null })}
+            {addonAfterNode}
+          </span>
+        </span>
+      );
+    },
+
+    renderTextAreaWithClearIcon(prefixCls, element) {
+      const { value, allowClear, className, style } = this.$props;
+      if (!allowClear) {
+        return cloneElement(element, {
+          props: { value },
+        });
+      }
+      const affixWrapperCls = classNames(
+        className,
+        `${prefixCls}-affix-wrapper`,
+        `${prefixCls}-affix-wrapper-textarea-with-clear-btn`,
+      );
+      return (
+        <span class={affixWrapperCls} style={style}>
+          {cloneElement(element, {
+            style: null,
+            props: { value },
+          })}
+          {this.renderClearIcon(prefixCls)}
+        </span>
+      );
+    },
+
+    renderClearableLabeledInput() {
+      const { prefixCls, inputType, element } = this.$props;
+      if (inputType === ClearableInputType[0]) {
+        return this.renderTextAreaWithClearIcon(prefixCls, element);
+      }
+      return this.renderInputWithLabel(prefixCls, this.renderLabeledIcon(prefixCls, element));
+    },
+  },
+  render() {
+    return this.renderClearableLabeledInput();
+  },
+};
+
+export default ClearableLabeledInput;

package/src/components/input/Group.jsx

@@ -0,0 +1,41 @@
+import PropTypes from '../_util/vue-types';
+import { filterEmpty, getListeners } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+
+export default {
+  name: 'AInputGroup',
+  props: {
+    prefixCls: PropTypes.string,
+    size: {
+      validator(value) {
+        return ['small', 'large', 'default'].includes(value);
+      },
+    },
+    compact: Boolean,
+  },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  computed: {
+    classes() {
+      const { prefixCls: customizePrefixCls, size, compact = false } = this;
+      const getPrefixCls = this.configProvider.getPrefixCls;
+      const prefixCls = getPrefixCls('input-group', customizePrefixCls);
+
+      return {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-lg`]: size === 'large',
+        [`${prefixCls}-sm`]: size === 'small',
+        [`${prefixCls}-compact`]: compact,
+      };
+    },
+  },
+  methods: {},
+  render() {
+    return (
+      <span class={this.classes} {...{ on: getListeners(this) }}>
+        {filterEmpty(this.$slots.default)}
+      </span>
+    );
+  },
+};

package/src/components/input/Input.jsx

@@ -0,0 +1,240 @@
+import classNames from 'classnames';
+import TextArea from './TextArea';
+import omit from 'omit.js';
+import inputProps from './inputProps';
+import { hasProp, getComponentFromProp, getListeners, getOptionProps } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+import ClearableLabeledInput from './ClearableLabeledInput';
+
+function noop() {}
+
+export function fixControlledValue(value) {
+  if (typeof value === 'undefined' || value === null) {
+    return '';
+  }
+  return value;
+}
+
+export function resolveOnChange(target, e, onChange) {
+  if (onChange) {
+    let event = e;
+    if (e.type === 'click') {
+      // click clear icon
+      event = Object.create(e, {
+        target: {
+          writable: true,
+        },
+        currentTarget: {
+          writable: true,
+        },
+      });
+      event.target = target;
+      event.currentTarget = target;
+      const originalInputValue = target.value;
+      // change target ref value cause e.target.value should be '' when clear input
+      target.value = '';
+      onChange(event);
+      // reset target ref value
+      target.value = originalInputValue;
+      return;
+    }
+    onChange(event);
+  }
+}
+
+export function getInputClassName(prefixCls, size, disabled) {
+  return classNames(prefixCls, {
+    [`${prefixCls}-sm`]: size === 'small',
+    [`${prefixCls}-lg`]: size === 'large',
+    [`${prefixCls}-disabled`]: disabled,
+  });
+}
+
+export default {
+  name: 'AInput',
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change.value',
+  },
+  props: {
+    ...inputProps,
+  },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  data() {
+    const props = this.$props;
+    const value = typeof props.value === 'undefined' ? props.defaultValue : props.value;
+    return {
+      stateValue: typeof value === 'undefined' ? '' : value,
+    };
+  },
+  watch: {
+    value(val) {
+      this.stateValue = val;
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.autoFocus) {
+        this.focus();
+      }
+      this.clearPasswordValueAttribute();
+    });
+  },
+  beforeDestroy() {
+    if (this.removePasswordTimeout) {
+      clearTimeout(this.removePasswordTimeout);
+    }
+  },
+  methods: {
+    onBlur(e) {
+      // fix this isssue: https://github.com/vueComponent/ant-design-vue/issues/3816
+      // reference: https://github.com/vuejs/vue/issues/5847 and https://github.com/vuejs/vue/issues/8431
+      this.$forceUpdate();
+
+      const { blur } = getListeners(this);
+      blur && blur(e);
+    },
+
+    focus() {
+      this.$refs.input.focus();
+    },
+
+    blur() {
+      this.$refs.input.blur();
+    },
+    select() {
+      this.$refs.input.select();
+    },
+
+    setValue(value, callback) {
+      if (this.stateValue === value) {
+        return;
+      }
+      if (!hasProp(this, 'value')) {
+        this.stateValue = value;
+        this.$nextTick(() => {
+          callback && callback();
+        });
+      } else {
+        // 不在严格受控
+        // https://github.com/vueComponent/ant-design-vue/issues/2207，modal 是 新 new 实例，更新队列和当前不在同一个更新队列中
+        // this.$forceUpdate();
+      }
+    },
+    onChange(e) {
+      this.$emit('change.value', e.target.value);
+      this.$emit('change', e);
+      this.$emit('input', e);
+    },
+    handleReset(e) {
+      this.setValue('', () => {
+        this.focus();
+      });
+      resolveOnChange(this.$refs.input, e, this.onChange);
+    },
+    renderInput(prefixCls) {
+      const otherProps = omit(this.$props, [
+        'prefixCls',
+        'addonBefore',
+        'addonAfter',
+        'prefix',
+        'suffix',
+        'allowClear',
+        'value',
+        'defaultValue',
+        'lazy',
+        'size',
+        'inputType',
+        'className',
+      ]);
+      const { stateValue, handleKeyDown, handleChange, size, disabled } = this;
+      const inputProps = {
+        directives: [{ name: 'ant-input' }],
+        domProps: {
+          value: fixControlledValue(stateValue),
+        },
+        attrs: { ...otherProps, ...this.$attrs },
+        on: {
+          ...getListeners(this),
+          keydown: handleKeyDown,
+          input: handleChange,
+          change: noop,
+          blur: this.onBlur,
+        },
+        class: getInputClassName(prefixCls, size, disabled),
+        ref: 'input',
+        key: 'ant-input',
+      };
+      return <input {...inputProps} />;
+    },
+    clearPasswordValueAttribute() {
+      // https://github.com/ant-design/ant-design/issues/20541
+      this.removePasswordTimeout = setTimeout(() => {
+        if (
+          this.$refs.input &&
+          this.$refs.input.getAttribute &&
+          this.$refs.input.getAttribute('type') === 'password' &&
+          this.$refs.input.hasAttribute('value')
+        ) {
+          this.$refs.input.removeAttribute('value');
+        }
+      });
+    },
+    handleChange(e) {
+      const { value, composing } = e.target;
+      // https://github.com/vueComponent/ant-design-vue/issues/2203
+      if (((e.isComposing || composing) && this.lazy) || this.stateValue === value) return;
+      this.setValue(value, this.clearPasswordValueAttribute);
+      resolveOnChange(this.$refs.input, e, this.onChange);
+    },
+    handleKeyDown(e) {
+      if (e.keyCode === 13) {
+        this.$emit('pressEnter', e);
+      }
+      this.$emit('keydown', e);
+    },
+  },
+  render() {
+    if (this.$props.type === 'textarea') {
+      const textareaProps = {
+        props: this.$props,
+        attrs: this.$attrs,
+        on: {
+          ...getListeners(this),
+          input: this.handleChange,
+          keydown: this.handleKeyDown,
+          change: noop,
+          blur: this.onBlur,
+        },
+      };
+      return <TextArea {...textareaProps} ref="input" />;
+    }
+    const { prefixCls: customizePrefixCls } = this.$props;
+    const { stateValue } = this.$data;
+    const getPrefixCls = this.configProvider.getPrefixCls;
+    const prefixCls = getPrefixCls('input', customizePrefixCls);
+    const addonAfter = getComponentFromProp(this, 'addonAfter');
+    const addonBefore = getComponentFromProp(this, 'addonBefore');
+    const suffix = getComponentFromProp(this, 'suffix');
+    const prefix = getComponentFromProp(this, 'prefix');
+    const props = {
+      props: {
+        ...getOptionProps(this),
+        prefixCls,
+        inputType: 'input',
+        value: fixControlledValue(stateValue),
+        element: this.renderInput(prefixCls),
+        handleReset: this.handleReset,
+        addonAfter,
+        addonBefore,
+        suffix,
+        prefix,
+      },
+      on: getListeners(this),
+    };
+    return <ClearableLabeledInput {...props} />;
+  },
+};

package/src/components/input/Password.jsx

@@ -0,0 +1,117 @@
+import classNames from 'classnames';
+import { getComponentFromProp, getOptionProps, getListeners } from '../_util/props-util';
+import Input from './Input';
+import Icon from '../icon';
+import inputProps from './inputProps';
+import PropTypes from '../_util/vue-types';
+import BaseMixin from '../_util/BaseMixin';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+
+const ActionMap = {
+  click: 'click',
+  hover: 'mouseover',
+};
+
+export default {
+  name: 'AInputPassword',
+  mixins: [BaseMixin],
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change.value',
+  },
+  props: {
+    ...inputProps,
+    prefixCls: PropTypes.string,
+    inputPrefixCls: PropTypes.string,
+    action: PropTypes.string.def('click'),
+    visibilityToggle: PropTypes.bool.def(true),
+  },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  methods: {
+    focus() {
+      this.$refs.input.focus();
+    },
+    blur() {
+      this.$refs.input.blur();
+    },
+    onVisibleChange() {
+      if (this.disabled) {
+        return;
+      }
+      this.setState({
+        visible: !this.visible,
+      });
+    },
+    getIcon(prefixCls) {
+      const { action } = this.$props;
+      const iconTrigger = ActionMap[action] || '';
+      const iconProps = {
+        props: {
+          type: this.visible ? 'eye' : 'eye-invisible',
+        },
+        on: {
+          [iconTrigger]: this.onVisibleChange,
+          mousedown: e => {
+            // Prevent focused state lost
+            // https://github.com/ant-design/ant-design/issues/15173
+            e.preventDefault();
+          },
+          mouseup: e => {
+            // Prevent focused state lost
+            // https://github.com/ant-design/ant-design/pull/23633/files
+            e.preventDefault();
+          },
+        },
+        class: `${prefixCls}-icon`,
+        key: 'passwordIcon',
+      };
+      return <Icon {...iconProps} />;
+    },
+  },
+  render() {
+    const {
+      prefixCls: customizePrefixCls,
+      inputPrefixCls: customizeInputPrefixCls,
+      size,
+      suffix,
+      visibilityToggle,
+      ...restProps
+    } = getOptionProps(this);
+
+    const getPrefixCls = this.configProvider.getPrefixCls;
+    const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
+    const prefixCls = getPrefixCls('input-password', customizePrefixCls);
+
+    const suffixIcon = visibilityToggle && this.getIcon(prefixCls);
+    const inputClassName = classNames(prefixCls, {
+      [`${prefixCls}-${size}`]: !!size,
+    });
+    const inputProps = {
+      props: {
+        ...restProps,
+        prefixCls: inputPrefixCls,
+        size,
+        suffix: suffixIcon,
+        prefix: getComponentFromProp(this, 'prefix'),
+        addonAfter: getComponentFromProp(this, 'addonAfter'),
+        addonBefore: getComponentFromProp(this, 'addonBefore'),
+      },
+      attrs: {
+        ...this.$attrs,
+        type: this.visible ? 'text' : 'password',
+      },
+      class: inputClassName,
+      ref: 'input',
+      on: getListeners(this),
+    };
+    return <Input {...inputProps} />;
+  },
+};