@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/tooltip/abstractTooltipProps.js

@@ -0,0 +1,34 @@
+import PropTypes from '../_util/vue-types';
+const triggerType = PropTypes.oneOf(['hover', 'focus', 'click', 'contextmenu']);
+export default () => ({
+  trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]).def('hover'),
+  visible: PropTypes.bool,
+  defaultVisible: PropTypes.bool,
+  placement: PropTypes.oneOf([
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'topLeft',
+    'topRight',
+    'bottomLeft',
+    'bottomRight',
+    'leftTop',
+    'leftBottom',
+    'rightTop',
+    'rightBottom',
+  ]).def('top'),
+  transitionName: PropTypes.string.def('zoom-big-fast'),
+  // onVisibleChange: PropTypes.func,
+  overlayStyle: PropTypes.object.def(() => ({})),
+  overlayClassName: PropTypes.string,
+  prefixCls: PropTypes.string,
+  mouseEnterDelay: PropTypes.number.def(0.1),
+  mouseLeaveDelay: PropTypes.number.def(0.1),
+  getPopupContainer: PropTypes.func,
+  arrowPointAtCenter: PropTypes.bool.def(false),
+  autoAdjustOverflow: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).def(true),
+  destroyTooltipOnHide: PropTypes.bool.def(false),
+  align: PropTypes.object.def(() => ({})),
+  builtinPlacements: PropTypes.object,
+});

package/src/components/tooltip/index.js

@@ -0,0 +1,10 @@
+import ToolTip from './Tooltip';
+import Base from '../base';
+
+/* istanbul ignore next */
+ToolTip.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(ToolTip.name, ToolTip);
+};
+
+export default ToolTip;

package/src/components/tooltip/placements.js

@@ -0,0 +1,96 @@
+import { placements as rcPlacements } from '../vc-tooltip/placements';
+
+const autoAdjustOverflowEnabled = {
+  adjustX: 1,
+  adjustY: 1,
+};
+
+const autoAdjustOverflowDisabled = {
+  adjustX: 0,
+  adjustY: 0,
+};
+
+const targetOffset = [0, 0];
+
+export function getOverflowOptions(autoAdjustOverflow) {
+  if (typeof autoAdjustOverflow === 'boolean') {
+    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
+  }
+  return {
+    ...autoAdjustOverflowDisabled,
+    ...autoAdjustOverflow,
+  };
+}
+
+export default function getPlacements(config) {
+  const {
+    arrowWidth = 5,
+    horizontalArrowShift = 16,
+    verticalArrowShift = 12,
+    autoAdjustOverflow = true,
+  } = config;
+  const placementMap = {
+    left: {
+      points: ['cr', 'cl'],
+      offset: [-4, 0],
+    },
+    right: {
+      points: ['cl', 'cr'],
+      offset: [4, 0],
+    },
+    top: {
+      points: ['bc', 'tc'],
+      offset: [0, -4],
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      offset: [0, 4],
+    },
+    topLeft: {
+      points: ['bl', 'tc'],
+      offset: [-(horizontalArrowShift + arrowWidth), -4],
+    },
+    leftTop: {
+      points: ['tr', 'cl'],
+      offset: [-4, -(verticalArrowShift + arrowWidth)],
+    },
+    topRight: {
+      points: ['br', 'tc'],
+      offset: [horizontalArrowShift + arrowWidth, -4],
+    },
+    rightTop: {
+      points: ['tl', 'cr'],
+      offset: [4, -(verticalArrowShift + arrowWidth)],
+    },
+    bottomRight: {
+      points: ['tr', 'bc'],
+      offset: [horizontalArrowShift + arrowWidth, 4],
+    },
+    rightBottom: {
+      points: ['bl', 'cr'],
+      offset: [4, verticalArrowShift + arrowWidth],
+    },
+    bottomLeft: {
+      points: ['tl', 'bc'],
+      offset: [-(horizontalArrowShift + arrowWidth), 4],
+    },
+    leftBottom: {
+      points: ['br', 'cl'],
+      offset: [-4, verticalArrowShift + arrowWidth],
+    },
+  };
+  Object.keys(placementMap).forEach(key => {
+    placementMap[key] = config.arrowPointAtCenter
+      ? {
+          ...placementMap[key],
+          overflow: getOverflowOptions(autoAdjustOverflow),
+          targetOffset,
+        }
+      : {
+          ...rcPlacements[key],
+          overflow: getOverflowOptions(autoAdjustOverflow),
+        };
+    placementMap[key].ignoreShake = true;
+  });
+  return placementMap;
+}

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

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

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

@@ -0,0 +1,187 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
+
+@tooltip-arrow-shadow-width: 3px;
+
+@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
+  @tooltip-arrow-shadow-width * 2;
+
+@tooltip-arrow-offset-vertical: 5px; // 8 - 3px
+@tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
+
+// Base class
+.@{tooltip-prefix-cls} {
+  .reset-component;
+
+  position: absolute;
+  z-index: @zindex-tooltip;
+  display: block;
+  max-width: @tooltip-max-width;
+  visibility: visible;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-placement-top,
+  &-placement-topLeft,
+  &-placement-topRight {
+    padding-bottom: @tooltip-distance;
+  }
+
+  &-placement-right,
+  &-placement-rightTop,
+  &-placement-rightBottom {
+    padding-left: @tooltip-distance;
+  }
+
+  &-placement-bottom,
+  &-placement-bottomLeft,
+  &-placement-bottomRight {
+    padding-top: @tooltip-distance;
+  }
+
+  &-placement-left,
+  &-placement-leftTop,
+  &-placement-leftBottom {
+    padding-right: @tooltip-distance;
+  }
+
+  // Wrapper for the tooltip content
+  &-inner {
+    min-width: 30px;
+    min-height: 32px;
+    padding: 6px 8px;
+    color: @tooltip-color;
+    text-align: left;
+    text-decoration: none;
+    word-wrap: break-word;
+    background-color: @tooltip-bg;
+    border-radius: @border-radius-base;
+    box-shadow: @box-shadow-base;
+  }
+
+  // Arrows
+  &-arrow {
+    position: absolute;
+    display: block;
+    width: @tooltip-arrow-rotate-width;
+    height: @tooltip-arrow-rotate-width;
+    overflow: hidden;
+    background: transparent;
+    pointer-events: none;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      width: @tooltip-arrow-width;
+      height: @tooltip-arrow-width;
+      margin: auto;
+      background-color: @tooltip-bg;
+      content: '';
+      pointer-events: auto;
+    }
+  }
+
+  &-placement-top &-arrow,
+  &-placement-topLeft &-arrow,
+  &-placement-topRight &-arrow {
+    bottom: @tooltip-distance - @tooltip-arrow-rotate-width;
+
+    &::before {
+      box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
+      transform: translateY(-@tooltip-arrow-rotate-width / 2) rotate(45deg);
+    }
+  }
+
+  &-placement-top &-arrow {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &-placement-topLeft &-arrow {
+    left: @tooltip-arrow-offset-horizontal;
+  }
+
+  &-placement-topRight &-arrow {
+    right: @tooltip-arrow-offset-horizontal;
+  }
+
+  &-placement-right &-arrow,
+  &-placement-rightTop &-arrow,
+  &-placement-rightBottom &-arrow {
+    left: @tooltip-distance - @tooltip-arrow-rotate-width;
+
+    &::before {
+      box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
+      transform: translateX(@tooltip-arrow-rotate-width / 2) rotate(45deg);
+    }
+  }
+
+  &-placement-right &-arrow {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &-placement-rightTop &-arrow {
+    top: @tooltip-arrow-offset-vertical;
+  }
+
+  &-placement-rightBottom &-arrow {
+    bottom: @tooltip-arrow-offset-vertical;
+  }
+
+  &-placement-left &-arrow,
+  &-placement-leftTop &-arrow,
+  &-placement-leftBottom &-arrow {
+    right: @tooltip-distance - @tooltip-arrow-rotate-width;
+
+    &::before {
+      box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
+      transform: translateX(-@tooltip-arrow-rotate-width / 2) rotate(45deg);
+    }
+  }
+
+  &-placement-left &-arrow {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &-placement-leftTop &-arrow {
+    top: @tooltip-arrow-offset-vertical;
+  }
+
+  &-placement-leftBottom &-arrow {
+    bottom: @tooltip-arrow-offset-vertical;
+  }
+
+  &-placement-bottom &-arrow,
+  &-placement-bottomLeft &-arrow,
+  &-placement-bottomRight &-arrow {
+    top: @tooltip-distance - @tooltip-arrow-rotate-width;
+
+    &::before {
+      box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
+      transform: translateY(@tooltip-arrow-rotate-width / 2) rotate(45deg);
+    }
+  }
+
+  &-placement-bottom &-arrow {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &-placement-bottomLeft &-arrow {
+    left: @tooltip-arrow-offset-horizontal;
+  }
+
+  &-placement-bottomRight &-arrow {
+    right: @tooltip-arrow-offset-horizontal;
+  }
+}

package/src/components/vc-align/Align.jsx

@@ -0,0 +1,149 @@
+import PropTypes from '../_util/vue-types';
+import { alignElement, alignPoint } from 'dom-align';
+import addEventListener from '../vc-util/Dom/addEventListener';
+import { isWindow, buffer, isSamePoint, isSimilarValue, restoreFocus } from './util';
+import { cloneElement } from '../_util/vnode.js';
+import clonedeep from 'lodash/cloneDeep';
+import { getSlot, getListeners } from '../_util/props-util';
+
+function getElement(func) {
+  if (typeof func !== 'function' || !func) return null;
+  return func();
+}
+
+function getPoint(point) {
+  if (typeof point !== 'object' || !point) return null;
+  return point;
+}
+
+export default {
+  props: {
+    childrenProps: PropTypes.object,
+    align: PropTypes.object.isRequired,
+    target: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).def(() => window),
+    monitorBufferTime: PropTypes.number.def(50),
+    monitorWindowResize: PropTypes.bool.def(false),
+    disabled: PropTypes.bool.def(false),
+  },
+  data() {
+    this.aligned = false;
+    return {};
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.prevProps = { ...this.$props };
+      const props = this.$props;
+      // if parent ref not attached .... use document.getElementById
+      !this.aligned && this.forceAlign();
+      if (!props.disabled && props.monitorWindowResize) {
+        this.startMonitorWindowResize();
+      }
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      const prevProps = this.prevProps;
+      const props = this.$props;
+      let reAlign = false;
+      if (!props.disabled) {
+        const source = this.$el;
+        const sourceRect = source ? source.getBoundingClientRect() : null;
+
+        if (prevProps.disabled) {
+          reAlign = true;
+        } else {
+          const lastElement = getElement(prevProps.target);
+          const currentElement = getElement(props.target);
+          const lastPoint = getPoint(prevProps.target);
+          const currentPoint = getPoint(props.target);
+          if (isWindow(lastElement) && isWindow(currentElement)) {
+            // Skip if is window
+            reAlign = false;
+          } else if (
+            lastElement !== currentElement || // Element change
+            (lastElement && !currentElement && currentPoint) || // Change from element to point
+            (lastPoint && currentPoint && currentElement) || // Change from point to element
+            (currentPoint && !isSamePoint(lastPoint, currentPoint))
+          ) {
+            reAlign = true;
+          }
+
+          // If source element size changed
+          const preRect = this.sourceRect || {};
+          if (
+            !reAlign &&
+            source &&
+            (!isSimilarValue(preRect.width, sourceRect.width) ||
+              !isSimilarValue(preRect.height, sourceRect.height))
+          ) {
+            reAlign = true;
+          }
+        }
+        this.sourceRect = sourceRect;
+      }
+
+      if (reAlign) {
+        this.forceAlign();
+      }
+
+      if (props.monitorWindowResize && !props.disabled) {
+        this.startMonitorWindowResize();
+      } else {
+        this.stopMonitorWindowResize();
+      }
+      this.prevProps = { ...this.$props, align: clonedeep(this.$props.align) };
+    });
+  },
+  beforeDestroy() {
+    this.stopMonitorWindowResize();
+  },
+  methods: {
+    startMonitorWindowResize() {
+      if (!this.resizeHandler) {
+        this.bufferMonitor = buffer(this.forceAlign, this.$props.monitorBufferTime);
+        this.resizeHandler = addEventListener(window, 'resize', this.bufferMonitor);
+      }
+    },
+
+    stopMonitorWindowResize() {
+      if (this.resizeHandler) {
+        this.bufferMonitor.clear();
+        this.resizeHandler.remove();
+        this.resizeHandler = null;
+      }
+    },
+
+    forceAlign() {
+      const { disabled, target, align } = this.$props;
+      if (!disabled && target) {
+        const source = this.$el;
+        const listeners = getListeners(this);
+        let result;
+        const element = getElement(target);
+        const point = getPoint(target);
+
+        // IE lose focus after element realign
+        // We should record activeElement and restore later
+        const activeElement = document.activeElement;
+
+        if (element) {
+          result = alignElement(source, element, align);
+        } else if (point) {
+          result = alignPoint(source, point, align);
+        }
+        restoreFocus(activeElement, source);
+        this.aligned = true;
+        listeners.align && listeners.align(source, result);
+      }
+    },
+  },
+
+  render() {
+    const { childrenProps } = this.$props;
+    const child = getSlot(this)[0];
+    if (child && childrenProps) {
+      return cloneElement(child, { props: childrenProps });
+    }
+    return child;
+  },
+};

package/src/components/vc-align/index.js

@@ -0,0 +1,3 @@
+// based on vc-align 2.4.5
+import Align from './Align';
+export default Align;

package/src/components/vc-align/util.js

@@ -0,0 +1,52 @@
+import contains from '../vc-util/Dom/contains';
+export function buffer(fn, ms) {
+  let timer;
+
+  function clear() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+
+  function bufferFn() {
+    clear();
+    timer = setTimeout(fn, ms);
+  }
+
+  bufferFn.clear = clear;
+
+  return bufferFn;
+}
+
+export function isSamePoint(prev, next) {
+  if (prev === next) return true;
+  if (!prev || !next) return false;
+
+  if ('pageX' in next && 'pageY' in next) {
+    return prev.pageX === next.pageX && prev.pageY === next.pageY;
+  }
+
+  if ('clientX' in next && 'clientY' in next) {
+    return prev.clientX === next.clientX && prev.clientY === next.clientY;
+  }
+
+  return false;
+}
+
+export function isWindow(obj) {
+  return obj && typeof obj === 'object' && obj.window === obj;
+}
+
+export function isSimilarValue(val1, val2) {
+  const int1 = Math.floor(val1);
+  const int2 = Math.floor(val2);
+  return Math.abs(int1 - int2) <= 1;
+}
+
+export function restoreFocus(activeElement, container) {
+  // Focus back if is in the container
+  if (activeElement !== document.activeElement && contains(container, activeElement)) {
+    activeElement.focus();
+  }
+}

package/src/components/vc-calendar/assets/common/Calendar.less

@@ -0,0 +1,106 @@
+.@{prefixClass} {
+  &-input-wrap {
+    position: relative;
+    padding: 6px;
+    border-bottom: 1px solid #e9e9e9;
+    &:after {
+      content: '';
+      clear: both;
+    }
+  }
+
+  &-date-input-wrap {
+    overflow: hidden;
+  }
+  &-time-picker {
+    position: absolute;
+    width: 100%;
+    top: 34px;
+    background-color: white;
+    height: 217px;
+    &-panel {
+      width: 100%;
+      position: relative;
+      .@{timePickerClass}-panel {
+        &-input-wrap {
+          display: none;
+        }
+        &-inner {
+          border: none;
+          box-shadow: none;
+        }
+        &-select {
+          width: 84px;
+          ul {
+            max-height: 217px;
+          }
+          li {
+            text-align: center;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+  &-time-picker-wrap {
+    float: left;
+    width: 100%;
+
+    .@{timePickerClass} {
+      width: 100%;
+
+      &-input {
+        padding: 0;
+        border: 1px solid transparent;
+        outline: 0;
+        height: 22px;
+      }
+
+      &-icon {
+        display: none;
+      }
+    }
+  }
+
+  &-input {
+    border: 1px solid transparent;
+    width: 100%;
+    color: #666;
+    cursor: text;
+    line-height: 1.5;
+    outline: 0;
+    height: 22px;
+
+    &-invalid {
+      border-color: red;
+    }
+  }
+
+  &-clear-btn {
+    z-index: 9999;
+    position: absolute;
+    right: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    top: 6px;
+    margin: 0;
+  }
+
+  &-clear-btn:after {
+    content: 'x';
+    font-size: 12px;
+    color: #aaa;
+    display: inline-block;
+    line-height: 1;
+    width: 20px;
+    transition: color 0.3s ease;
+  }
+
+  &-clear-btn:hover:after {
+    color: #666;
+  }
+}