@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/time-picker/locale/zh_TW.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: '請選擇時間',
+};
+
+export default locale;

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

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

package/src/components/time-picker/style/index.less

@@ -0,0 +1,246 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@timepicker-prefix-cls: ~'@{ant-prefix}-time-picker';
+@timepicker-item-height: 32px;
+
+.@{timepicker-prefix-cls}-panel {
+  .reset-component;
+
+  position: absolute;
+  z-index: @zindex-picker;
+  font-family: @font-family;
+
+  &-inner {
+    position: relative;
+    left: -2px;
+    font-size: @font-size-base;
+    text-align: left;
+    list-style: none;
+    background-color: @component-background;
+    background-clip: padding-box;
+    border-radius: @border-radius-base;
+    outline: none;
+    box-shadow: @box-shadow-base;
+  }
+
+  &-input {
+    width: 100%;
+    max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
+    margin: 0;
+    padding: 0;
+    line-height: normal;
+    border: 0;
+    outline: 0;
+    cursor: auto;
+
+    .placeholder;
+
+    &-wrap {
+      position: relative;
+      padding: 7px 2px 7px @control-padding-horizontal;
+      border-bottom: @border-width-base @border-style-base @border-color-split;
+    }
+
+    &-invalid {
+      border-color: @error-color;
+    }
+  }
+
+  &-narrow &-input-wrap {
+    max-width: @time-picker-panel-column-width * 2;
+  }
+
+  &-select {
+    position: relative; // Fix chrome weird render bug
+    float: left;
+    width: @time-picker-panel-column-width;
+    max-height: @timepicker-item-height * 6;
+    overflow: hidden;
+    font-size: @font-size-base;
+    border-left: @border-width-base @border-style-base @border-color-split;
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    &:first-child {
+      margin-left: 0;
+      border-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    &:only-child {
+      width: 100%;
+    }
+
+    ul {
+      // use fixed width instead of 100%
+      // to fix strange render bug in safari: https://github.com/ant-design/ant-design/issues/17842
+      width: @time-picker-panel-column-width;
+      margin: 0;
+      padding: 0 0 @timepicker-item-height * 5;
+      list-style: none;
+    }
+
+    li {
+      width: 100%;
+      height: @timepicker-item-height;
+      margin: 0;
+      padding: 0 0 0 @control-padding-horizontal;
+      line-height: @timepicker-item-height;
+      text-align: left;
+      list-style: none;
+      cursor: pointer;
+      transition: all 0.3s;
+      user-select: none;
+
+      &:focus {
+        color: @primary-color;
+        font-weight: 600;
+        outline: none;
+      }
+    }
+
+    li:hover {
+      background: @item-hover-bg;
+    }
+
+    li&-option-selected {
+      font-weight: 600;
+      background: @time-picker-selected-bg;
+      &:hover {
+        background: @time-picker-selected-bg;
+      }
+    }
+
+    li&-option-disabled {
+      color: @btn-disable-color;
+      &:hover {
+        background: transparent;
+        cursor: not-allowed;
+      }
+      &:focus {
+        color: @btn-disable-color;
+        font-weight: inherit;
+      }
+    }
+  }
+
+  &-combobox {
+    .clearfix;
+  }
+
+  &-addon {
+    padding: 8px;
+    border-top: @border-width-base @border-style-base @border-color-split;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+    animation-name: antSlideDownIn;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
+    animation-name: antSlideUpIn;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+    animation-name: antSlideDownOut;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
+    animation-name: antSlideUpOut;
+  }
+}
+
+.@{timepicker-prefix-cls} {
+  .reset-component;
+
+  position: relative;
+  display: inline-block;
+  width: 128px;
+  outline: none;
+  cursor: text;
+  transition: opacity 0.3s;
+
+  &-input {
+    .input;
+    &[disabled] {
+      .disabled;
+    }
+  }
+
+  &-open {
+    opacity: 0;
+  }
+
+  &-icon,
+  &-clear {
+    position: absolute;
+    top: 50%;
+    right: @control-padding-horizontal - 1px;
+    z-index: 1;
+    width: 14px;
+    height: 14px;
+    margin-top: -7px;
+    color: @disabled-color;
+    line-height: 14px;
+    transition: all 0.3s @ease-in-out;
+    user-select: none;
+    .@{timepicker-prefix-cls}-clock-icon {
+      display: block;
+      color: @disabled-color;
+      line-height: 1;
+    }
+  }
+
+  &-clear {
+    z-index: 2;
+    background: @input-bg;
+    opacity: 0;
+    pointer-events: none;
+    &:hover {
+      color: @text-color-secondary;
+    }
+  }
+  &:hover &-clear {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &-large &-input {
+    .input-lg;
+  }
+
+  &-small &-input {
+    .input-sm;
+  }
+
+  &-small &-icon,
+  &-small &-clear {
+    right: @control-padding-horizontal-sm - 1px;
+  }
+}
+
+// Fix cursor height in safari
+// https://stackoverflow.com/q/3843408/3040605
+// https://browserstrangeness.github.io/css_hacks.html#safari
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .@{ant-prefix}-input {
+      line-height: @line-height-base;
+    }
+  }
+}

package/src/components/tooltip/Tooltip.jsx

@@ -0,0 +1,219 @@
+import { cloneElement } from '../_util/vnode';
+import VcTooltip from '../vc-tooltip';
+import getPlacements from './placements';
+import PropTypes from '../_util/vue-types';
+import {
+  hasProp,
+  getComponentFromProp,
+  getClass,
+  getStyle,
+  isValidElement,
+  getListeners,
+} from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+import abstractTooltipProps from './abstractTooltipProps';
+
+const splitObject = (obj, keys) => {
+  const picked = {};
+  const omitted = { ...obj };
+  keys.forEach(key => {
+    if (obj && key in obj) {
+      picked[key] = obj[key];
+      delete omitted[key];
+    }
+  });
+  return { picked, omitted };
+};
+const props = abstractTooltipProps();
+export default {
+  name: 'ATooltip',
+  model: {
+    prop: 'visible',
+    event: 'visibleChange',
+  },
+  props: {
+    ...props,
+    title: PropTypes.any,
+  },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  data() {
+    return {
+      sVisible: !!this.$props.visible || !!this.$props.defaultVisible,
+    };
+  },
+  watch: {
+    visible(val) {
+      this.sVisible = val;
+    },
+  },
+  methods: {
+    onVisibleChange(visible) {
+      if (!hasProp(this, 'visible')) {
+        this.sVisible = this.isNoTitle() ? false : visible;
+      }
+      if (!this.isNoTitle()) {
+        this.$emit('visibleChange', visible);
+      }
+    },
+
+    getPopupDomNode() {
+      return this.$refs.tooltip.getPopupDomNode();
+    },
+
+    getPlacements() {
+      const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = this.$props;
+      return (
+        builtinPlacements ||
+        getPlacements({
+          arrowPointAtCenter,
+          verticalArrowShift: 8,
+          autoAdjustOverflow,
+        })
+      );
+    },
+
+    // Fix Tooltip won't hide at disabled button
+    // mouse events don't trigger at disabled button in Chrome
+    // https://github.com/react-component/tooltip/issues/18
+    getDisabledCompatibleChildren(ele) {
+      const options = (ele.componentOptions && ele.componentOptions.Ctor.options) || {};
+
+      if (
+        ((options.__ANT_BUTTON === true ||
+          options.__ANT_SWITCH === true ||
+          options.__ANT_CHECKBOX === true) &&
+          (ele.componentOptions.propsData.disabled ||
+            ele.componentOptions.propsData.disabled === '')) ||
+        (ele.tag === 'button' &&
+          ele.data &&
+          ele.data.attrs &&
+          ele.data.attrs.disabled !== undefined)
+      ) {
+        // Pick some layout related style properties up to span
+        // Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
+        const { picked, omitted } = splitObject(getStyle(ele), [
+          'position',
+          'left',
+          'right',
+          'top',
+          'bottom',
+          'float',
+          'display',
+          'zIndex',
+        ]);
+        const spanStyle = {
+          display: 'inline-block', // default inline-block is important
+          ...picked,
+          cursor: 'not-allowed',
+          width: ele.componentOptions.propsData.block ? '100%' : null,
+        };
+        const buttonStyle = {
+          ...omitted,
+          pointerEvents: 'none',
+        };
+        const spanCls = getClass(ele);
+        const child = cloneElement(ele, {
+          style: buttonStyle,
+          class: null,
+        });
+        return (
+          <span style={spanStyle} class={spanCls}>
+            {child}
+          </span>
+        );
+      }
+      return ele;
+    },
+
+    isNoTitle() {
+      const title = getComponentFromProp(this, 'title');
+      return !title && title !== 0;
+    },
+
+    getOverlay() {
+      const title = getComponentFromProp(this, 'title');
+      if (title === 0) {
+        return title;
+      }
+      return title || '';
+    },
+
+    // 动态设置动画点
+    onPopupAlign(domNode, align) {
+      const placements = this.getPlacements();
+      // 当前返回的位置
+      const placement = Object.keys(placements).filter(
+        key =>
+          placements[key].points[0] === align.points[0] &&
+          placements[key].points[1] === align.points[1],
+      )[0];
+      if (!placement) {
+        return;
+      }
+      // 根据当前坐标设置动画点
+      const rect = domNode.getBoundingClientRect();
+      const transformOrigin = {
+        top: '50%',
+        left: '50%',
+      };
+      if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
+        transformOrigin.top = `${rect.height - align.offset[1]}px`;
+      } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
+        transformOrigin.top = `${-align.offset[1]}px`;
+      }
+      if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
+        transformOrigin.left = `${rect.width - align.offset[0]}px`;
+      } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
+        transformOrigin.left = `${-align.offset[0]}px`;
+      }
+      domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
+    },
+  },
+
+  render() {
+    const { $props, $data, $slots } = this;
+    const { prefixCls: customizePrefixCls, openClassName, getPopupContainer } = $props;
+    const { getPopupContainer: getContextPopupContainer } = this.configProvider;
+    const getPrefixCls = this.configProvider.getPrefixCls;
+    const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
+    let children = ($slots.default || []).filter(c => c.tag || c.text.trim() !== '');
+    children = children.length === 1 ? children[0] : children;
+    let sVisible = $data.sVisible;
+    // Hide tooltip when there is no title
+    if (!hasProp(this, 'visible') && this.isNoTitle()) {
+      sVisible = false;
+    }
+    if (!children) {
+      return null;
+    }
+    const child = this.getDisabledCompatibleChildren(
+      isValidElement(children) ? children : <span>{children}</span>,
+    );
+    const childCls = {
+      [openClassName || `${prefixCls}-open`]: true,
+    };
+    const tooltipProps = {
+      props: {
+        ...$props,
+        prefixCls,
+        getTooltipContainer: getPopupContainer || getContextPopupContainer,
+        builtinPlacements: this.getPlacements(),
+        overlay: this.getOverlay(),
+        visible: sVisible,
+      },
+      ref: 'tooltip',
+      on: {
+        ...getListeners(this),
+        visibleChange: this.onVisibleChange,
+        popupAlign: this.onPopupAlign,
+      },
+    };
+    return (
+      <VcTooltip {...tooltipProps}>
+        {sVisible ? cloneElement(child, { class: childCls }) : child}
+      </VcTooltip>
+    );
+  },
+};

package/src/components/tooltip/__tests__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./antdv-demo/docs/tooltip/demo/arrow-point-at-center.md correctly 1`] = `<div><button type="button" class="ant-btn"><span>Align edge / 边缘对齐</span></button> <button type="button" class="ant-btn"><span>Arrow points to center / 箭头指向中心</span></button></div>`;
+
+exports[`renders ./antdv-demo/docs/tooltip/demo/auto-adjust-overflow.md correctly 1`] = `<div style="overflow: hidden; position: relative; padding: 24px; border: 1px solid #e9e9e9;"><button type="button" class="ant-btn"><span>Adjust automatically / 自动调整</span></button> <br> <button type="button" class="ant-btn" style="margin-top: 10px;"><span>Ingore / 不处理</span></button></div>`;
+
+exports[`renders ./antdv-demo/docs/tooltip/demo/basic.md correctly 1`] = `
+<span class="">
+  Tooltip will show when mouse enter.
+</span>
+`;
+
+exports[`renders ./antdv-demo/docs/tooltip/demo/placement.md correctly 1`] = `
+<div id="components-a-tooltip-demo-placement">
+  <div style="margin-left: 70px; white-space: nowrap;"><button type="button" class="ant-btn"><span>TL</span></button> <button type="button" class="ant-btn"><span>Top</span></button> <button type="button" class="ant-btn"><span>TR</span></button></div>
+  <div style="width: 70px; float: left;"><button type="button" class="ant-btn"><span>LT</span></button> <button type="button" class="ant-btn"><span>Left</span></button> <button type="button" class="ant-btn"><span>LB</span></button></div>
+  <div style="width: 70px; margin-left: 304px;"><button type="button" class="ant-btn"><span>RT</span></button> <button type="button" class="ant-btn"><span>Right</span></button> <button type="button" class="ant-btn"><span>RB</span></button></div>
+  <div style="margin-left: 70px; clear: both; white-space: nowrap;"><button type="button" class="ant-btn"><span>BL</span></button> <button type="button" class="ant-btn"><span>Bottom</span></button> <button type="button" class="ant-btn"><span>BR</span></button></div>
+</div>
+`;

package/src/components/tooltip/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('tooltip');

package/src/components/tooltip/__tests__/tooltip.test.js

@@ -0,0 +1,204 @@
+import { asyncExpect } from '@/tests/utils';
+import { mount } from '@vue/test-utils';
+import Tooltip from '..';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('Tooltip', () => {
+  mountTest(Tooltip);
+  it('check `onVisibleChange` arguments', async () => {
+    const onVisibleChange = jest.fn();
+    const wrapper = mount(
+      {
+        props: ['title', 'visible'],
+        render() {
+          const props = {
+            props: {
+              title: this.title || '',
+              mouseEnterDelay: 0,
+              mouseLeaveDelay: 0,
+            },
+            on: {
+              visibleChange: onVisibleChange,
+            },
+          };
+          if (this.visible !== undefined) {
+            props.props.visible = this.visible;
+          }
+          return (
+            <Tooltip ref="tooltip" {...props}>
+              <div id="hello">Hello world!</div>
+            </Tooltip>
+          );
+        },
+      },
+      { sync: false },
+    );
+
+    let div = null;
+    let lastCount = null;
+    await asyncExpect(() => {
+      // `title` is empty.
+      div = wrapper.findAll('#hello').at(0);
+      div.trigger('mouseenter');
+    });
+    await asyncExpect(() => {
+      expect(onVisibleChange).not.toHaveBeenCalled();
+      expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false);
+    });
+    await asyncExpect(() => {
+      div.trigger('mouseleave');
+    });
+    await asyncExpect(() => {
+      expect(onVisibleChange).not.toHaveBeenCalled();
+      expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false);
+    });
+    await asyncExpect(() => {
+      // update `title` value.
+      wrapper.setProps({ title: 'Have a nice day!' });
+    });
+    await asyncExpect(() => {
+      wrapper
+        .findAll('#hello')
+        .at(0)
+        .trigger('mouseenter');
+    });
+    await asyncExpect(() => {
+      expect(onVisibleChange).toHaveBeenLastCalledWith(true);
+      expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true);
+    }, 0);
+    await asyncExpect(() => {
+      wrapper.find('#hello').trigger('mouseleave');
+    });
+    await asyncExpect(() => {
+      expect(onVisibleChange).toHaveBeenLastCalledWith(false);
+      expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false);
+    });
+    await asyncExpect(() => {
+      // add `visible` props.
+      wrapper.setProps({ visible: false });
+    });
+    await asyncExpect(() => {
+      wrapper.find('#hello').trigger('mouseenter');
+    });
+    await asyncExpect(() => {
+      expect(onVisibleChange).toHaveBeenLastCalledWith(true);
+      lastCount = onVisibleChange.mock.calls.length;
+      expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false);
+    });
+    await asyncExpect(() => {
+      // always trigger onVisibleChange
+      wrapper.trigger('mouseleave');
+    });
+    await asyncExpect(() => {
+      expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount
+      expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false);
+    });
+    await asyncExpect(() => {});
+  });
+
+  // it('should hide when mouse leave native disabled button', () => {
+  //   const onVisibleChange = jest.fn()
+  //   const wrapper = mount(
+  //     <Tooltip
+  //       title='xxxxx'
+  //       mouseEnterDelay={0}
+  //       mouseLeaveDelay={0}
+  //       onVisibleChange={onVisibleChange}
+  //     >
+  //       <button disabled>Hello world!</button>
+  //     </Tooltip>
+  //   )
+
+  //   expect(wrapper.find('span')).toHaveLength(1)
+  //   const button = wrapper.find('span').at(0)
+  //   button.dispatchEvent(new MouseEvent('mouseenter'))
+  //   expect(onVisibleChange).toBeCalledWith(true)
+  //   expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
+
+  //   button.trigger('mouseleave')
+  //   expect(onVisibleChange).toBeCalledWith(false)
+  //   expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
+  // })
+
+  // it('should hide when mouse leave antd disabled Button', () => {
+  //   const onVisibleChange = jest.fn()
+  //   const wrapper = mount(
+  //     <Tooltip
+  //       title='xxxxx'
+  //       mouseEnterDelay={0}
+  //       mouseLeaveDelay={0}
+  //       onVisibleChange={onVisibleChange}
+  //     >
+  //       <Button disabled>Hello world!</Button>
+  //     </Tooltip>
+  //   )
+
+  //   expect(wrapper.render()).toMatchSnapshot()
+  //   const button = wrapper.find('span').at(0)
+  //   button.dispatchEvent(new MouseEvent('mouseenter'))
+  //   expect(onVisibleChange).toBeCalledWith(true)
+  //   expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
+
+  //   button.trigger('mouseleave')
+  //   expect(onVisibleChange).toBeCalledWith(false)
+  //   expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
+  // })
+
+  // it('should render disabled Button style properly', () => {
+  //   const wrapper1 = mount(
+  //     <Tooltip title='xxxxx'>
+  //       <Button disabled>Hello world!</Button>
+  //     </Tooltip>
+  //   )
+  //   const wrapper2 = mount(
+  //     <Tooltip title='xxxxx'>
+  //       <Button disabled style={{ display: 'block' }}>Hello world!</Button>
+  //     </Tooltip>
+  //   )
+  //   expect(wrapper1.find('span').at(0).element.style.display).toBe('inline-block')
+  //   expect(wrapper2.find('span').at(0).element.style.display).toBe('block')
+  // })
+
+  // it('should works for arrowPointAtCenter', () => {
+  //   const arrowWidth = 5
+  //   const horizontalArrowShift = 16
+  //   const triggerWidth = 200
+
+  //   const suit = () => {
+  //     const wrapper = mount(
+  //       <Tooltip
+  //         title='xxxxx'
+  //         trigger='click'
+  //         mouseEnterDelay={0}
+  //         mouseLeaveDelay={0}
+  //         placement='bottomLeft'
+  //       >
+  //         <button style={{ width: triggerWidth }}>
+  //           Hello world!
+  //         </button>
+  //       </Tooltip>
+  //     )
+  //     wrapper.find('button').at(0).trigger('click')
+  //     const popupLeftDefault = parseInt(wrapper.instance().getPopupDomNode().style.left, 10)
+
+  //     const wrapper2 = mount(
+  //       <Tooltip
+  //         title='xxxxx'
+  //         trigger='click'
+  //         mouseEnterDelay={0}
+  //         mouseLeaveDelay={0}
+  //         placement='bottomLeft'
+  //         arrowPointAtCenter
+  //       >
+  //         <button style={{ width: triggerWidth }}>
+  //           Hello world!
+  //         </button>
+  //       </Tooltip>
+  //     )
+  //     wrapper2.find('button').at(0).trigger('click')
+  //     const popupLeftArrowPointAtCenter = parseInt(wrapper2.instance().getPopupDomNode().style.left, 10)
+  //     expect(popupLeftArrowPointAtCenter - popupLeftDefault).toBe((triggerWidth / 2) - horizontalArrowShift - arrowWidth)
+  //   }
+  //   jest.dontMock('rc-trigger', suit)
+  // })
+});