@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/vc-time-picker/TimePicker.jsx

@@ -0,0 +1,386 @@
+import moment from 'moment';
+import classNames from 'classnames';
+import PropTypes from '../_util/vue-types';
+import BaseMixin from '../_util/BaseMixin';
+import {
+  initDefaultProps,
+  hasProp,
+  getComponentFromProp,
+  isValidElement,
+  getEvents,
+} from '../_util/props-util';
+import { cloneElement } from '../_util/vnode';
+import Trigger from '../vc-trigger';
+import Panel from './Panel';
+import placements from './placements';
+
+function noop() {}
+
+export default {
+  name: 'VcTimePicker',
+  mixins: [BaseMixin],
+  props: initDefaultProps(
+    {
+      prefixCls: PropTypes.string,
+      clearText: PropTypes.string,
+      value: PropTypes.any,
+      defaultOpenValue: {
+        type: Object,
+        default: () => {
+          return moment();
+        },
+      },
+      inputReadOnly: PropTypes.bool,
+      disabled: PropTypes.bool,
+      allowEmpty: PropTypes.bool,
+      defaultValue: PropTypes.any,
+      open: PropTypes.bool,
+      defaultOpen: PropTypes.bool,
+      align: PropTypes.object,
+      placement: PropTypes.any,
+      transitionName: PropTypes.string,
+      getPopupContainer: PropTypes.func,
+      placeholder: PropTypes.string,
+      format: PropTypes.string,
+      showHour: PropTypes.bool,
+      showMinute: PropTypes.bool,
+      showSecond: PropTypes.bool,
+      popupClassName: PropTypes.string,
+      popupStyle: PropTypes.object,
+      disabledHours: PropTypes.func,
+      disabledMinutes: PropTypes.func,
+      disabledSeconds: PropTypes.func,
+      hideDisabledOptions: PropTypes.bool,
+      // onChange: PropTypes.func,
+      // onAmPmChange: PropTypes.func,
+      // onOpen: PropTypes.func,
+      // onClose: PropTypes.func,
+      // onFocus: PropTypes.func,
+      // onBlur: PropTypes.func,
+      name: PropTypes.string,
+      autoComplete: PropTypes.string,
+      use12Hours: PropTypes.bool,
+      hourStep: PropTypes.number,
+      minuteStep: PropTypes.number,
+      secondStep: PropTypes.number,
+      focusOnOpen: PropTypes.bool,
+      // onKeyDown: PropTypes.func,
+      autoFocus: PropTypes.bool,
+      id: PropTypes.string,
+      inputIcon: PropTypes.any,
+      clearIcon: PropTypes.any,
+      addon: PropTypes.func,
+    },
+    {
+      clearText: 'clear',
+      prefixCls: 'rc-time-picker',
+      defaultOpen: false,
+      inputReadOnly: false,
+      popupClassName: '',
+      popupStyle: {},
+      align: {},
+      allowEmpty: true,
+      showHour: true,
+      showMinute: true,
+      showSecond: true,
+      disabledHours: noop,
+      disabledMinutes: noop,
+      disabledSeconds: noop,
+      hideDisabledOptions: false,
+      placement: 'bottomLeft',
+      use12Hours: false,
+      focusOnOpen: false,
+    },
+  ),
+  data() {
+    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this;
+    return {
+      sOpen: open,
+      sValue: value,
+    };
+  },
+
+  watch: {
+    value(val) {
+      this.setState({
+        sValue: val,
+      });
+    },
+    open(val) {
+      if (val !== undefined) {
+        this.setState({
+          sOpen: val,
+        });
+      }
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.autoFocus) {
+        this.focus();
+      }
+    });
+  },
+  methods: {
+    onPanelChange(value) {
+      this.setValue(value);
+    },
+
+    onAmPmChange(ampm) {
+      this.__emit('amPmChange', ampm);
+    },
+
+    onClear(event) {
+      event.stopPropagation();
+      this.setValue(null);
+      this.setOpen(false);
+    },
+
+    onVisibleChange(open) {
+      this.setOpen(open);
+    },
+
+    onEsc() {
+      this.setOpen(false);
+      this.focus();
+    },
+
+    onKeyDown(e) {
+      if (e.keyCode === 40) {
+        this.setOpen(true);
+      }
+    },
+    onKeyDown2(e) {
+      this.__emit('keydown', e);
+    },
+
+    setValue(value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({
+          sValue: value,
+        });
+      }
+      this.__emit('change', value);
+    },
+
+    getFormat() {
+      const { format, showHour, showMinute, showSecond, use12Hours } = this;
+      if (format) {
+        return format;
+      }
+
+      if (use12Hours) {
+        const fmtString = [showHour ? 'h' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : '']
+          .filter(item => !!item)
+          .join(':');
+
+        return fmtString.concat(' a');
+      }
+
+      return [showHour ? 'HH' : '', showMinute ? 'mm' : '', showSecond ? 'ss' : '']
+        .filter(item => !!item)
+        .join(':');
+    },
+
+    getPanelElement() {
+      const {
+        prefixCls,
+        placeholder,
+        disabledHours,
+        addon,
+        disabledMinutes,
+        disabledSeconds,
+        hideDisabledOptions,
+        inputReadOnly,
+        showHour,
+        showMinute,
+        showSecond,
+        defaultOpenValue,
+        clearText,
+        use12Hours,
+        focusOnOpen,
+        onKeyDown2,
+        hourStep,
+        minuteStep,
+        secondStep,
+        sValue,
+      } = this;
+      const clearIcon = getComponentFromProp(this, 'clearIcon');
+      return (
+        <Panel
+          clearText={clearText}
+          prefixCls={`${prefixCls}-panel`}
+          ref="panel"
+          value={sValue}
+          inputReadOnly={inputReadOnly}
+          onChange={this.onPanelChange}
+          onAmPmChange={this.onAmPmChange}
+          defaultOpenValue={defaultOpenValue}
+          showHour={showHour}
+          showMinute={showMinute}
+          showSecond={showSecond}
+          onEsc={this.onEsc}
+          format={this.getFormat()}
+          placeholder={placeholder}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
+          hideDisabledOptions={hideDisabledOptions}
+          use12Hours={use12Hours}
+          hourStep={hourStep}
+          minuteStep={minuteStep}
+          secondStep={secondStep}
+          focusOnOpen={focusOnOpen}
+          onKeydown={onKeyDown2}
+          clearIcon={clearIcon}
+          addon={addon}
+        />
+      );
+    },
+
+    getPopupClassName() {
+      const { showHour, showMinute, showSecond, use12Hours, prefixCls, popupClassName } = this;
+
+      let selectColumnCount = 0;
+      if (showHour) {
+        selectColumnCount += 1;
+      }
+      if (showMinute) {
+        selectColumnCount += 1;
+      }
+      if (showSecond) {
+        selectColumnCount += 1;
+      }
+      if (use12Hours) {
+        selectColumnCount += 1;
+      }
+      // Keep it for old compatibility
+      return classNames(
+        popupClassName,
+        {
+          [`${prefixCls}-panel-narrow`]: (!showHour || !showMinute || !showSecond) && !use12Hours,
+        },
+        `${prefixCls}-panel-column-${selectColumnCount}`,
+      );
+    },
+
+    setOpen(open) {
+      if (this.sOpen !== open) {
+        if (!hasProp(this, 'open')) {
+          this.setState({ sOpen: open });
+        }
+        if (open) {
+          this.__emit('open', { open });
+        } else {
+          this.__emit('close', { open });
+        }
+      }
+    },
+
+    focus() {
+      this.$refs.picker.focus();
+    },
+
+    blur() {
+      this.$refs.picker.blur();
+    },
+    onFocus(e) {
+      this.__emit('focus', e);
+    },
+    onBlur(e) {
+      this.__emit('blur', e);
+    },
+    renderClearButton() {
+      const { sValue } = this;
+      const { prefixCls, allowEmpty, clearText, disabled } = this.$props;
+      if (!allowEmpty || !sValue || disabled) {
+        return null;
+      }
+      const clearIcon = getComponentFromProp(this, 'clearIcon');
+      if (isValidElement(clearIcon)) {
+        const { click } = getEvents(clearIcon) || {};
+        return cloneElement(clearIcon, {
+          on: {
+            click: (...args) => {
+              if (click) click(...args);
+              this.onClear(...args);
+            },
+          },
+        });
+      }
+
+      return (
+        <a
+          role="button"
+          class={`${prefixCls}-clear`}
+          title={clearText}
+          onClick={this.onClear}
+          tabIndex={0}
+        >
+          {clearIcon || <i class={`${prefixCls}-clear-icon`} />}
+        </a>
+      );
+    },
+  },
+
+  render() {
+    const {
+      prefixCls,
+      placeholder,
+      placement,
+      align,
+      id,
+      disabled,
+      transitionName,
+      getPopupContainer,
+      name,
+      autoComplete,
+      autoFocus,
+      sOpen,
+      sValue,
+      onFocus,
+      onBlur,
+      popupStyle,
+    } = this;
+    const popupClassName = this.getPopupClassName();
+    const inputIcon = getComponentFromProp(this, 'inputIcon');
+    return (
+      <Trigger
+        prefixCls={`${prefixCls}-panel`}
+        popupClassName={popupClassName}
+        popupStyle={popupStyle}
+        popupAlign={align}
+        builtinPlacements={placements}
+        popupPlacement={placement}
+        action={disabled ? [] : ['click']}
+        destroyPopupOnHide
+        getPopupContainer={getPopupContainer}
+        popupTransitionName={transitionName}
+        popupVisible={sOpen}
+        onPopupVisibleChange={this.onVisibleChange}
+      >
+        <template slot="popup">{this.getPanelElement()}</template>
+        <span class={`${prefixCls}`}>
+          <input
+            class={`${prefixCls}-input`}
+            ref="picker"
+            type="text"
+            placeholder={placeholder}
+            name={name}
+            onKeydown={this.onKeyDown}
+            disabled={disabled}
+            value={(sValue && sValue.format(this.getFormat())) || ''}
+            autoComplete={autoComplete}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            autoFocus={autoFocus}
+            readOnly
+            id={id}
+          />
+          {inputIcon || <span class={`${prefixCls}-icon`} />}
+          {this.renderClearButton()}
+        </span>
+      </Trigger>
+    );
+  },
+};

package/src/components/vc-time-picker/assets/index/Header.less

@@ -0,0 +1,22 @@
+.@{prefixClass}-panel {
+  &-input {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    cursor: auto;
+    line-height: 1.5;
+    outline: 0;
+    border: 1px solid transparent;
+
+    &-wrap {
+      box-sizing: border-box;
+      position: relative;
+      padding: 6px;
+      border-bottom: 1px solid #e9e9e9;
+    }
+
+    &-invalid {
+      border-color: red;
+    }
+  }
+}

package/src/components/vc-time-picker/assets/index/Panel.less

@@ -0,0 +1,29 @@
+.@{prefixClass}-panel {
+  z-index: 1070;
+  width: 170px;
+  position: absolute;
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &-inner {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    list-style: none;
+    font-size: 12px;
+    text-align: left;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 5px #ccc;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    line-height: 1.5;
+  }
+
+  &-narrow {
+    max-width: 113px;
+  }
+}

package/src/components/vc-time-picker/assets/index/Picker.less

@@ -0,0 +1,25 @@
+.@{prefixClass} {
+  &-input {
+    width: 100%;
+    position: relative;
+    display: inline-block;
+    padding: 4px 7px;
+    height: 28px;
+    cursor: text;
+    font-size: 12px;
+    line-height: 1.5;
+    color: #666;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
+      background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
+      box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    &[disabled] {
+      color: #ccc;
+      background: #f7f7f7;
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/vc-time-picker/assets/index/Select.less

@@ -0,0 +1,62 @@
+.@{prefixClass}-panel-select {
+  float: left;
+  font-size: 12px;
+  border: 1px solid #e9e9e9;
+  border-width: 0 1px;
+  margin-left: -1px;
+  box-sizing: border-box;
+  width: 56px;
+  max-height: 144px;
+  overflow-y: auto;
+  position: relative; // Fix chrome weird render bug
+
+  &-active {
+    overflow-y: auto;
+  }
+
+  &:first-child {
+    border-left: 0;
+    margin-left: 0;
+  }
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  ul {
+    list-style: none;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0 0 0 16px;
+    width: 100%;
+    height: 24px;
+    line-height: 24px;
+    text-align: left;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background: #edfaff;
+    }
+  }
+
+  li&-option-selected {
+    background: #f7f7f7;
+    font-weight: bold;
+  }
+
+  li&-option-disabled {
+    color: #ccc;
+    &:hover {
+      background: transparent;
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/vc-time-picker/assets/index.less

@@ -0,0 +1,44 @@
+@prefixClass: rc-time-picker;
+
+.@{prefixClass} {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+
+  &-clear {
+    position: absolute;
+    right: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    top: 3px;
+    margin: 0;
+
+    &-icon:after {
+      content: 'x';
+      font-size: 12px;
+      font-style: normal;
+      color: #aaa;
+      display: inline-block;
+      line-height: 1;
+      height: 20px;
+      width: 20px;
+      transition: color 0.3s ease;
+    }
+
+    &-icon:hover:after {
+      color: #666;
+    }
+  }
+}
+
+@import './index/Picker';
+@import './index/Panel';
+@import './index/Header';
+@import './index/Select';

package/src/components/vc-time-picker/index.js

@@ -0,0 +1,2 @@
+// based on rc-time-picker 3.7.3
+export { default } from './TimePicker';

package/src/components/vc-time-picker/placements.js

@@ -0,0 +1,35 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1,
+};
+
+const targetOffset = [0, 0];
+
+const placements = {
+  bottomLeft: {
+    points: ['tl', 'tl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -3],
+    targetOffset,
+  },
+  bottomRight: {
+    points: ['tr', 'tr'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -3],
+    targetOffset,
+  },
+  topRight: {
+    points: ['br', 'br'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 3],
+    targetOffset,
+  },
+  topLeft: {
+    points: ['bl', 'bl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 3],
+    targetOffset,
+  },
+};
+
+export default placements;

package/src/components/vc-tooltip/Content.jsx

@@ -0,0 +1,23 @@
+import PropTypes from '../_util/vue-types';
+
+export default {
+  props: {
+    prefixCls: PropTypes.string,
+    overlay: PropTypes.any,
+    trigger: PropTypes.any,
+  },
+  updated() {
+    const { trigger } = this;
+    if (trigger) {
+      trigger.forcePopupAlign();
+    }
+  },
+  render() {
+    const { overlay, prefixCls } = this;
+    return (
+      <div class={`${prefixCls}-inner`} role="tooltip">
+        {typeof overlay === 'function' ? overlay() : overlay}
+      </div>
+    );
+  },
+};