		import Tooltip from '../plugins/tooltip';
		import utils from '../utils/utils';

		const TooltipControl = {
		init(el, vnode) {
		export default {
		inserted(el, binding, vnode) {
		let attr = vnode.data;
		@@ -14,22 +15,9 @@ if (!attr.attrs.content && !attr.attrs['ref-el']) return;
		param.content = vnode.context.$el.querySelector(`[tmpl=${ref}]`);
		if (param.content) {
		param.content.style.display = "none";
		}
		param.html = true;
		}
		if (attr.attrs.placement) {
		param.placement = attr.attrs.placement;
		}
		if (attr.attrs.theme) {
		param.theme = attr.attrs.theme;
		}
		if (attr.attrs.delay) {
		param.delay = attr.attrs.delay;
		}
		if (attr.attrs.trigger) {
		param.trigger = attr.attrs.trigger;
		}
		// param.boundariesElement = document.body;
		param = utils.initParam(param, attr.attrs, ['placement', 'theme', 'delay', 'trigger']);
		el.tooltip = new Tooltip(el, param);
		},
		destroy(el) {
		unbind(el) {
		let attr = el;
		@@ -41,17 +29,1 @@ if (attr.tooltip) {
		}

		export default {
		inserted(el, binding, vnode) {
		TooltipControl.init(el, vnode);
		log('inserted')
		},
		update(el, binding, vnode) {
		// TooltipControl.destroy(el);
		// TooltipControl.init(el, vnode);
		// log('update')
		},
		unbind(el) {
		TooltipControl.destroy(el);
		log('unbind')
		}
		}

index.js

		@@ -17,3 +17,3 @@ // es6 polyfill
		// import Collapse from './components/collapse';
		// import DatePicker from './components/date-picker';
		import Datetime from './components/datetime';
		// import Dropdown from './components/dropdown';
		@@ -51,3 +51,3 @@ import Form from './components/form';
		import { Button, ButtonGroup } from './components/button';
		// import { Select, Option, OptionGroup } from './components/select';
		import Select from './components/select';
		// import locale from './locale';
		@@ -85,3 +85,5 @@
		// DropdownMenu: Dropdown.Menu,
		iForm: Form,
		DatePicker: Datetime.DatePicker,
		DateRangePicker: Datetime.DateRangePicker,
		hForm: Form,
		Form,
		@@ -116,3 +118,4 @@ FormItem: Form.Item,
		TimelineItem: Timeline.Item,
		// iSelect: Select,
		hSelect: Select,
		Select,
		// Slider,
		@@ -153,5 +156,5 @@ // Spin,
		if (install.installed) return;
		if (opts) {
		// if (opts) {

		}
		// }

		@@ -158,0 +161,0 @@ Object.keys(components).forEach((key) => {

package.json

		{
		"name": "heyui",
		"version": "0.0.9",
		"version": "0.0.10",
		"description": "A UI components Library.",
		@@ -12,2 +12,3 @@ "main": "index.js",
		"keywords": [
		"heyui",
		"vue",
		@@ -17,9 +18,8 @@ "ui",
		],
		"author": {
		"name": "vvpvvp"
		},
		"license": "The MIT License",
		"license": "MIT",
		"dependencies": {
		"hey-utils": "^0.0.10",
		"popper.js": "^1.0.8"
		"popper.js": "^1.0.8",
		"hey-log": "0.0.4",
		"hey-utils": "0.0.11",
		"manba": "0.0.16"
		},
		@@ -43,2 +43,2 @@ "devDependencies": {
		]
		}
		}

plugins/message/index.js

		@@ -13,3 +13,3 @@ import Notify from '../base/notify';
		info: 'info',
		success: 'check',
		success: 'success',
		warn: 'warn',
		@@ -16,0 +16,0 @@ error: 'error',

plugins/notice/index.js

		@@ -14,3 +14,3 @@ import Notify from '../base/notify';
		info: 'info',
		success: 'check',
		success: 'success',
		warn: 'warn',
		@@ -17,0 +17,0 @@ error: 'error'

284

plugins/tooltip/index.js

		@@ -1,282 +0,12 @@
		import Popper from 'popper.js';
		import utils from '../../utils/utils';
		import Pop from '../pop';

		const DEFAULT_OPTIONS = {
		container: false,
		delay: 0,
		html: false,
		placement: 'top',
		content: '',
		trigger: 'hover focus',
		offset: 0,
		};

		/**
		* Create a new Tooltip.js instance
		* @class Tooltip
		* @param {HTMLElement} reference - The reference element used to position the tooltip
		* @param {Object} options
		* @param {String} options.placement=bottom
		* Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -end),
		* left(-start, -end)`
		*
		* @param {HTMLElement} reference - The DOM node used as reference of the tooltip (it can be a jQuery element).
		* @param {Object} options - Configuration of the tooltip
		* @param {HTMLElement\|String\|false} options.container=false - Append the tooltip to a specific element.
		* @param {Number\|Object} options.delay=0
		* Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type.
		* If a number is supplied, delay is applied to both hide/show.
		* Object structure is: `{ show: 500, hide: 100 }`
		* @param {Boolean} options.html=false - Insert HTML into the tooltip. If false, the content will inserted with `innerText`.
		* @param {String\|PlacementFunction} options.placement='top' - One of the allowed placements, or a function returning one of them.
		* @param {String} options.template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
		* Base HTML to used when creating the tooltip.
		* The tooltip's `content` will be injected into the `.tooltip-inner` or `.tooltip__inner`.
		* `.tooltip-arrow` or `.tooltip__arrow` will become the tooltip's arrow.
		* The outermost wrapper element should have the `.tooltip` class.
		* @param {String\|HTMLElement\|ContentFunction} options.content='' - Default content value if `content` attribute isn't present.
		* @param {String} options.trigger='hover focus'
		* How tooltip is triggered - click \| hover \| focus \| manual.
		* You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.
		* @param {HTMLElement} options.boundariesElement
		* The element used as boundaries for the tooltip. For more information refer to Popper.js'
		* [boundariesElement docs](https://popper.js.org/popper-documentation.html)
		* @param {Number\|String} options.offset=0 - Offset of the tooltip relative to its reference. For more information refer to Popper.js'
		* [offset docs](https://popper.js.org/popper-documentation.html)
		* @return {Object} instance - The generated tooltip instance
		*/
		class Tooltip {

		constructor(reference, options) {
		options = utils.extend({}, DEFAULT_OPTIONS, options);

		// reference.jquery && (reference = reference[0]);
		this.reference = reference;

		options.template = `<div class="h-tooltip${options.theme ? (' h-tooltip-' + options.theme) : ''}" role="tooltip"><div class="h-tooltip-arrow"></div><div class="h-tooltip-inner"></div></div>`;
		this.options = options;

		const events = typeof options.trigger === 'string' ? options.trigger.split(' ').filter((trigger) => {
		return ['click', 'hover', 'focus'].indexOf(trigger) !== -1;
		}) : [];

		this._isOpen = false;

		this.arrowSelector = '.h-tooltip-arrow, .h-tooltip__arrow';
		this.innerSelector = '.h-tooltip-inner, .h-tooltip__inner';
		this._events = [];

		this._setEventListeners(reference, events, options);
		class Tooltip extends Pop {
		constructor(el, param) {
		param.template = `<div class="h-tooltip${param.theme ? (' h-tooltip-' + param.theme) : ''}" role="tooltip"><div class="h-tooltip-arrow"></div><div class="h-tooltip-inner"></div></div>`;
		param.arrowSelector = '.h-tooltip-arrow, .h-tooltip__arrow';
		param.innerSelector = '.h-tooltip-inner, .h-tooltip__inner';
		super(el, param);
		}

		show() {
		this._show(this.reference, this.options);
		}

		hide() {
		this._hide();
		}

		dispose() {
		this._dispose();
		}
		toggle() {
		if (this._isOpen) {
		return this.hide();
		} else {
		return this.show();
		}
		}
		// show = () => this._show(this.reference, this.options);

		// hide = () => this._hide();
		// dispose = () => this._dispose();
		// toggle = () => {
		// if (this._isOpen) {
		// return this.hide();
		// } else {
		// return this.show();
		// }
		// }

		_create(reference, template, content, allowHtml) {
		const tooltipGenerator = window.document.createElement('div');
		tooltipGenerator.innerHTML = template;
		const tooltipNode = tooltipGenerator.childNodes[0];

		tooltipNode.id = `tooltip_${Math.random().toString(36).substr(2, 10)}`;

		tooltipNode.setAttribute('aria-hidden', 'false');

		const contentNode = tooltipGenerator.querySelector(this.innerSelector);
		if (content.nodeType === 1) {
		allowHtml && contentNode.appendChild(content);
		content.style.display = "block";
		} else if (Popper.Utils.isFunction(content)) {
		const contentText = content.call(reference);
		allowHtml ? (contentNode.innerHTML = contentText) : (contentNode.innerText = contentText);
		} else {
		allowHtml ? (contentNode.innerHTML = content) : (contentNode.innerText = content);
		}

		return tooltipNode;
		}

		_show(reference, options) {
		if (this._isOpen) { return this; }
		this._isOpen = true;

		if (this._tooltipNode) {
		this._tooltipNode.style.display = '';
		this._tooltipNode.setAttribute('aria-hidden', 'false');
		this.popperInstance.update();
		return this;
		}

		const content = reference.getAttribute('content') \|\| options.content;

		if (!content) { return this; }

		const tooltipNode = this._create(reference, options.template, content, options.html);

		tooltipNode.setAttribute('aria-describedby', tooltipNode.id);

		const container = this._findContainer(options.container, reference);

		this._append(tooltipNode, container);

		const popperOptions = {
		placement: options.placement,
		arrowElement: this.arrowSelector,
		};

		if (options.boundariesElement) {
		popperOptions.boundariesElement = options.boundariesElement;
		}

		this.popperInstance = new Popper(reference, tooltipNode, popperOptions);

		this._tooltipNode = tooltipNode;

		return this;
		}


		_hide() {
		if (!this._isOpen) { return this; }

		this._isOpen = false;
		this._tooltipNode.style.display = 'none';
		this._tooltipNode.setAttribute('aria-hidden', 'true');

		return this;
		}

		_dispose() {
		if (this._tooltipNode) {
		this._hide();

		this.popperInstance.destroy();

		this._events.forEach(({ func, event }) => {
		this._tooltipNode.removeEventListener(event, func);
		});
		this._events = [];
		this._tooltipNode.parentNode.removeChild(this._tooltipNode);
		this._tooltipNode = null;
		}
		return this;
		}

		_findContainer(container, reference) {
		if (typeof container === 'string') {
		container = window.document.querySelector(container);
		} else if (container === false) {
		container = reference.parentNode;
		}
		return container;
		}
		_append(tooltipNode, container) {
		container.appendChild(tooltipNode);
		}

		_setEventListeners(reference, events, options) {
		const directEvents = [];
		const oppositeEvents = [];

		events.forEach((event) => {
		switch (event) {
		case 'hover':
		directEvents.push('mouseenter');
		oppositeEvents.push('mouseleave');
		case 'focus':
		directEvents.push('focus');
		oppositeEvents.push('blur');
		case 'click':
		directEvents.push('click');
		oppositeEvents.push('click');
		}
		});

		directEvents.forEach((event) => {
		const func = (evt) => {
		if (this._isOpen === true) { return; }
		evt.usedByTooltip = true;
		this._scheduleShow(reference, options.delay, options, evt);
		};
		this._events.push({ event, func });
		reference.addEventListener(event, func);
		});

		oppositeEvents.forEach((event) => {
		const func = (evt) => {
		if (evt.usedByTooltip === true) { return; }
		this._scheduleHide(reference, options.delay, options, evt);
		};
		this._events.push({ event, func });
		reference.addEventListener(event, func);
		});
		}

		_scheduleShow(reference, delay, options) {
		const computedDelay = (delay && delay.show) \|\| delay \|\| 0;
		window.setTimeout(() => this._show(reference, options), computedDelay);
		}

		_scheduleHide(reference, delay, options, evt) {
		const computedDelay = (delay && delay.hide) \|\| delay \|\| 0;
		window.setTimeout(() => {
		if (this._isOpen === false) { return; }
		if (!document.body.contains(this._tooltipNode)) { return; }
		if (evt.type === 'mouseleave') {
		const isSet = this._setTooltipNodeEvent(evt, reference, delay, options);
		if (isSet) { return; }
		}

		this._hide(reference, options);
		}, computedDelay);
		}

		_setTooltipNodeEvent(evt, reference, delay, options) {
		const relatedreference = evt.relatedreference \|\| evt.toElement;

		const callback = (evt2) => {
		const relatedreference2 = evt2.relatedreference \|\| evt2.toElement;

		this._tooltipNode.removeEventListener(evt.type, callback);

		if (!reference.contains(relatedreference2)) {
		this._scheduleHide(reference, options.delay, options, evt2);
		}
		};

		if (this._tooltipNode.contains(relatedreference)) {
		this._tooltipNode.addEventListener(evt.type, callback);
		return true;
		}

		return false;
		}
		}

		export default Tooltip;

README.md

		@@ -15,5 +15,5 @@ # HeyUI
		import Vue from 'vue'
		import Element from 'heyui'
		import HeyUI from 'heyui'

		Vue.use(Element)
		Vue.use(HeyUI)
		```
		@@ -20,0 +20,0 @@

utils/utils.js

		@@ -90,3 +90,46 @@ import Utils from 'hey-utils';
		return false;
		},
		initParam(param, paramFrom, array) {
		if (this.isArray(array) && this.isObject(param) && this.isObject(param)) {
		for (let a of array) {
		if (paramFrom[a]) param[a] = paramFrom[a];
		}
		}
		return param;
		},
		toggleValue(list, value) {
		if (!this.isArray(list)) return ;
		if (list.includes(value)) {
		list.splice(list.indexOf(value), 1);
		} else {
		list.push(value);
		}
		},
		padLeft(str, size){
		var s = "00000" + str;
		return s.substr(s.length-size);
		},
		toggleValueByKey(list, key, value) {
		if (!this.isArray(list)) return ;
		let index = -1;
		for (let l of list) {
		if (this.isNull(l[key])) {
		continue;
		}
		index = list.indexOf(l);
		break;
		}
		if (index > -1) {
		list.splice(index, 1);
		} else {
		list.push(value);
		}
		},
		numList(start, end, step){
		let data = [];
		for(let i = start; i < end; i = i + step){
		data.push(i);
		}
		return data;
		}
		});

themes/components/alert.less

themes/components/button.less

themes/components/date-picker.less

themes/components/input.less

themes/components/radio.less

components/checkbox/checkbox.vue