@vue-interface/tooltip 0.8.1 → 1.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Tooltip.vue.d.ts +4 -0
- package/dist/TooltipPlugin.d.ts +2 -0
- package/dist/tooltip.css +1 -0
- package/dist/tooltip.es.js +1105 -0
- package/dist/tooltip.umd.js +5 -0
- package/package.json +38 -36
- package/src/Popper.js +33 -21
- package/src/Tooltip.vue +2 -1
- package/src/TooltipPlugin.ts +73 -0
- package/tailwindcss/index.js +18 -20
- package/.eslintrc.js +0 -53
- package/babel.config.js +0 -5
- package/dist/Tooltip.common.js +0 -6496
- package/dist/Tooltip.common.js.map +0 -1
- package/dist/Tooltip.css +0 -193
- package/dist/Tooltip.css.map +0 -1
- package/dist/Tooltip.umd.js +0 -6506
- package/dist/Tooltip.umd.js.map +0 -1
- package/dist/Tooltip.umd.min.js +0 -2
- package/dist/Tooltip.umd.min.js.map +0 -1
- package/dist/demo.html +0 -10
- package/docs/.vuepress/config.js +0 -44
- package/docs/.vuepress/dist/404.html +0 -19
- package/docs/.vuepress/dist/assets/css/0.styles.275ee968.css +0 -1
- package/docs/.vuepress/dist/assets/img/search.83621669.svg +0 -1
- package/docs/.vuepress/dist/assets/js/10.5d93d289.js +0 -1
- package/docs/.vuepress/dist/assets/js/11.97ab3884.js +0 -1
- package/docs/.vuepress/dist/assets/js/2.f3d148c3.js +0 -1
- package/docs/.vuepress/dist/assets/js/3.81681fff.js +0 -1
- package/docs/.vuepress/dist/assets/js/4.82fa7382.js +0 -1
- package/docs/.vuepress/dist/assets/js/5.3dae6ad4.js +0 -1
- package/docs/.vuepress/dist/assets/js/6.6a04f815.js +0 -1
- package/docs/.vuepress/dist/assets/js/7.c033cb49.js +0 -1
- package/docs/.vuepress/dist/assets/js/8.6d6eb599.js +0 -1
- package/docs/.vuepress/dist/assets/js/9.eaefe866.js +0 -1
- package/docs/.vuepress/dist/assets/js/app.7ed065d3.js +0 -13
- package/docs/.vuepress/dist/examples/index.html +0 -21
- package/docs/.vuepress/dist/examples/test.html +0 -17
- package/docs/.vuepress/dist/index.html +0 -53
- package/docs/.vuepress/dist/options.html +0 -41
- package/docs/.vuepress/dist/tailwindcss.html +0 -85
- package/docs/README.md +0 -23
- package/docs/examples/README.md +0 -3
- package/docs/options.md +0 -46
- package/docs/tailwindcss.md +0 -76
- package/index.html +0 -50
- package/index.js +0 -5
- package/main.js +0 -8
- package/postcss.config.js +0 -1
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -17
- package/src/TooltipPlugin.js +0 -87
- package/src/css/Tooltip.css +0 -2
- package/tailwind.config.js +0 -12
- package/vue.config.js +0 -14
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en-US">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<title>Alert | Vue Interface</title>
|
|
7
|
-
<meta name="generator" content="VuePress 1.5.0">
|
|
8
|
-
|
|
9
|
-
<meta name="description" content="A collection of standalone UI components built for Vue.">
|
|
10
|
-
<link rel="preload" href="/assets/css/0.styles.275ee968.css" as="style"><link rel="preload" href="/assets/js/app.7ed065d3.js" as="script"><link rel="preload" href="/assets/js/2.f3d148c3.js" as="script"><link rel="preload" href="/assets/js/7.c033cb49.js" as="script"><link rel="prefetch" href="/assets/js/10.5d93d289.js"><link rel="prefetch" href="/assets/js/11.97ab3884.js"><link rel="prefetch" href="/assets/js/3.81681fff.js"><link rel="prefetch" href="/assets/js/4.82fa7382.js"><link rel="prefetch" href="/assets/js/5.3dae6ad4.js"><link rel="prefetch" href="/assets/js/6.6a04f815.js"><link rel="prefetch" href="/assets/js/8.6d6eb599.js"><link rel="prefetch" href="/assets/js/9.eaefe866.js">
|
|
11
|
-
<link rel="stylesheet" href="/assets/css/0.styles.275ee968.css">
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">Vue Interface</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" class="active sidebar-link">Alert</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/#basic-example" class="sidebar-link">Basic Example</a></li></ul></li><li><a href="/options.html" class="sidebar-link">Options</a></li><li><a href="/tailwindcss.html" class="sidebar-link">Tailwindcss</a></li><li><a href="/examples/" class="sidebar-link">Examples</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="alert"><a href="#alert" class="header-anchor">#</a> Alert</h1> <p></p><div class="table-of-contents"><ul><li><a href="#installation">Installation</a></li><li><a href="#basic-example">Basic Example</a></li></ul></div><p></p> <h2 id="installation"><a href="#installation" class="header-anchor">#</a> Installation</h2> <p>NPM</p> <div class="language- extra-class"><pre><code>npm i @vue-interface/alert --save
|
|
15
|
-
</code></pre></div><p>Yarn</p> <div class="language- extra-class"><pre><code>yard add @vue-interface/alert
|
|
16
|
-
</code></pre></div><p>CDN</p> <div class="language- extra-class"><pre><code>https://cdn.jsdelivr.net/npm/@vue-interface/alert@1.0.2/dist/Alert.min.js
|
|
17
|
-
</code></pre></div><h2 id="basic-example"><a href="#basic-example" class="header-anchor">#</a> Basic Example</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><!DOCTYPE html></span>
|
|
18
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
|
|
19
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
|
20
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
21
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1, shrink-to-fit=no<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
22
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>@vue-interface/alert<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
|
23
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap-reboot.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
24
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap-grid.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
25
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@vue-interface/alert@1.0.2/dist/Alert.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
26
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
|
27
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
|
28
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>@vue-interface/alert<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
|
29
|
-
|
|
30
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
31
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>alert</span><span class="token punctuation">></span></span>This is an alert.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>alert</span><span class="token punctuation">></span></span>
|
|
32
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
33
|
-
|
|
34
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
35
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@vue-interface/alert@1.0.2/dist/Alert.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
36
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
37
|
-
<span class="token keyword">const</span> vue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
38
|
-
el<span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
|
|
39
|
-
components<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
40
|
-
Alert
|
|
41
|
-
<span class="token punctuation">}</span>
|
|
42
|
-
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
43
|
-
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
44
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
|
45
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
|
46
|
-
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/options.html">
|
|
47
|
-
Options
|
|
48
|
-
</a>
|
|
49
|
-
→
|
|
50
|
-
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
51
|
-
<script src="/assets/js/app.7ed065d3.js" defer></script><script src="/assets/js/2.f3d148c3.js" defer></script><script src="/assets/js/7.c033cb49.js" defer></script>
|
|
52
|
-
</body>
|
|
53
|
-
</html>
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en-US">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<title>Options | Vue Interface</title>
|
|
7
|
-
<meta name="generator" content="VuePress 1.5.0">
|
|
8
|
-
|
|
9
|
-
<meta name="description" content="A collection of standalone UI components built for Vue.">
|
|
10
|
-
<link rel="preload" href="/assets/css/0.styles.275ee968.css" as="style"><link rel="preload" href="/assets/js/app.7ed065d3.js" as="script"><link rel="preload" href="/assets/js/2.f3d148c3.js" as="script"><link rel="preload" href="/assets/js/10.5d93d289.js" as="script"><link rel="prefetch" href="/assets/js/11.97ab3884.js"><link rel="prefetch" href="/assets/js/3.81681fff.js"><link rel="prefetch" href="/assets/js/4.82fa7382.js"><link rel="prefetch" href="/assets/js/5.3dae6ad4.js"><link rel="prefetch" href="/assets/js/6.6a04f815.js"><link rel="prefetch" href="/assets/js/7.c033cb49.js"><link rel="prefetch" href="/assets/js/8.6d6eb599.js"><link rel="prefetch" href="/assets/js/9.eaefe866.js">
|
|
11
|
-
<link rel="stylesheet" href="/assets/css/0.styles.275ee968.css">
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Vue Interface</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Alert</a></li><li><a href="/options.html" class="active sidebar-link">Options</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/options.html#dismissible" class="sidebar-link">Dismissible</a></li><li class="sidebar-sub-header"><a href="/options.html#fade" class="sidebar-link">Fade</a></li><li class="sidebar-sub-header"><a href="/options.html#heading" class="sidebar-link">Heading</a></li><li class="sidebar-sub-header"><a href="/options.html#show" class="sidebar-link">Show</a></li><li class="sidebar-sub-header"><a href="/options.html#title" class="sidebar-link">Title</a></li></ul></li><li><a href="/tailwindcss.html" class="sidebar-link">Tailwindcss</a></li><li><a href="/examples/" class="sidebar-link">Examples</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="options"><a href="#options" class="header-anchor">#</a> Options</h1> <p></p><div class="table-of-contents"><ul><li><a href="#dismissible">Dismissible</a></li><li><a href="#fade">Fade</a></li><li><a href="#heading">Heading</a></li><li><a href="#show">Show</a></li><li><a href="#title">Title</a></li></ul></div><p></p> <h2 id="dismissible"><a href="#dismissible" class="header-anchor">#</a> Dismissible</h2> <ul><li>Type: <code>boolean</code></li> <li>Default: <code>undefined</code></li></ul> <p>Can the alert be dismissed.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>alert</span> <span class="token attr-name">dismissible</span><span class="token punctuation">></span></span>
|
|
15
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Dismiss this alert.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
16
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>alert</span><span class="token punctuation">></span></span>
|
|
17
|
-
</code></pre></div><h2 id="fade"><a href="#fade" class="header-anchor">#</a> Fade</h2> <ul><li>Type: <code>boolean</code></li> <li>Default: <code>true</code></li></ul> <p>Should the alert fade when dismissed.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>alert</span> <span class="token attr-name">dismissible</span> <span class="token attr-name">:fade</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
18
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Dismiss this alert.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
19
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>alert</span><span class="token punctuation">></span></span>
|
|
20
|
-
</code></pre></div><h2 id="heading"><a href="#heading" class="header-anchor">#</a> Heading</h2> <ul><li>Type: <code>string</code></li> <li>Default: <code>undefined</code></li></ul> <p>The alert heading.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>alert</span> <span class="token attr-name">heading</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Some heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
21
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some alert content.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
22
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>alert</span><span class="token punctuation">></span></span>
|
|
23
|
-
</code></pre></div><h2 id="show"><a href="#show" class="header-anchor">#</a> Show</h2> <ul><li>Type: <code>number</code>, <code>boolean</code></li> <li>Default: <code>true</code></li></ul> <p>Alerts are visible by default. If passed a number, the alert will be shown
|
|
24
|
-
for the number of seconds that are passed.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>alert</span> <span class="token attr-name">:show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
25
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This alert is hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
26
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>alert</span><span class="token punctuation">></span></span>
|
|
27
|
-
</code></pre></div><h2 id="title"><a href="#title" class="header-anchor">#</a> Title</h2> <ul><li>Type: <code>string</code></li> <li>Default: <code>undefined</code></li></ul> <p>An alias to heading. <code>title</code> or <code>heading</code> maybe used interchangeably.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>alert</span> <span class="token attr-name">heading</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Some heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
28
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some alert content.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
29
|
-
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>alert</span><span class="token punctuation">></span></span>
|
|
30
|
-
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
31
|
-
←
|
|
32
|
-
<a href="/" class="prev router-link-active">
|
|
33
|
-
Alert
|
|
34
|
-
</a></span> <span class="next"><a href="/tailwindcss.html">
|
|
35
|
-
Tailwindcss
|
|
36
|
-
</a>
|
|
37
|
-
→
|
|
38
|
-
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
39
|
-
<script src="/assets/js/app.7ed065d3.js" defer></script><script src="/assets/js/2.f3d148c3.js" defer></script><script src="/assets/js/10.5d93d289.js" defer></script>
|
|
40
|
-
</body>
|
|
41
|
-
</html>
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en-US">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<title>Tailwindcss | Vue Interface</title>
|
|
7
|
-
<meta name="generator" content="VuePress 1.5.0">
|
|
8
|
-
|
|
9
|
-
<meta name="description" content="A collection of standalone UI components built for Vue.">
|
|
10
|
-
<link rel="preload" href="/assets/css/0.styles.275ee968.css" as="style"><link rel="preload" href="/assets/js/app.7ed065d3.js" as="script"><link rel="preload" href="/assets/js/2.f3d148c3.js" as="script"><link rel="preload" href="/assets/js/11.97ab3884.js" as="script"><link rel="prefetch" href="/assets/js/10.5d93d289.js"><link rel="prefetch" href="/assets/js/3.81681fff.js"><link rel="prefetch" href="/assets/js/4.82fa7382.js"><link rel="prefetch" href="/assets/js/5.3dae6ad4.js"><link rel="prefetch" href="/assets/js/6.6a04f815.js"><link rel="prefetch" href="/assets/js/7.c033cb49.js"><link rel="prefetch" href="/assets/js/8.6d6eb599.js"><link rel="prefetch" href="/assets/js/9.eaefe866.js">
|
|
11
|
-
<link rel="stylesheet" href="/assets/css/0.styles.275ee968.css">
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Vue Interface</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Alert</a></li><li><a href="/options.html" class="sidebar-link">Options</a></li><li><a href="/tailwindcss.html" class="active sidebar-link">Tailwindcss</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/tailwindcss.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/tailwindcss.html#theme" class="sidebar-link">Theme</a></li><li class="sidebar-sub-header"><a href="/tailwindcss.html#variations" class="sidebar-link">Variations</a></li><li class="sidebar-sub-header"><a href="/tailwindcss.html#color-api" class="sidebar-link">Color API</a></li></ul></li><li><a href="/examples/" class="sidebar-link">Examples</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="tailwindcss"><a href="#tailwindcss" class="header-anchor">#</a> Tailwindcss</h1> <p></p><div class="table-of-contents"><ul><li><a href="#installation">Installation</a></li><li><a href="#theme">Theme</a></li><li><a href="#variations">Variations</a></li><li><a href="#color-api">Color API</a></li></ul></div><p></p> <h2 id="installation"><a href="#installation" class="header-anchor">#</a> Installation</h2> <p>If you want to include Alerts in your Tailwindcss build, then intall the plugin.</p> <div class="language- extra-class"><pre><code>module.exports = {
|
|
15
|
-
plugins: [
|
|
16
|
-
require('@vue-interface/alert/tailwind')
|
|
17
|
-
]
|
|
18
|
-
};
|
|
19
|
-
</code></pre></div><h2 id="theme"><a href="#theme" class="header-anchor">#</a> Theme</h2> <p><em>These are the default values. Only override what you need.</em></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> Color <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
20
|
-
|
|
21
|
-
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
22
|
-
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
23
|
-
alert<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
24
|
-
borderRadius<span class="token operator">:</span> <span class="token string">'.25rem'</span><span class="token punctuation">,</span>
|
|
25
|
-
borderStyle<span class="token operator">:</span> <span class="token string">'solid'</span><span class="token punctuation">,</span>
|
|
26
|
-
borderWidth<span class="token operator">:</span> <span class="token string">'1px'</span><span class="token punctuation">,</span>
|
|
27
|
-
colors<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
28
|
-
<span class="token operator">...</span><span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
29
|
-
primary<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.blue.500'</span><span class="token punctuation">,</span> <span class="token string">'#9E9E9E'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
30
|
-
secondary<span class="token operator">:</span> <span class="token function">Color</span><span class="token punctuation">(</span><span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.gray.600'</span><span class="token punctuation">,</span> <span class="token string">'#718096'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token number">.05</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
31
|
-
danger<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.red.600'</span><span class="token punctuation">,</span> <span class="token string">'#E53E3E'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
32
|
-
success<span class="token operator">:</span> <span class="token function">Color</span><span class="token punctuation">(</span><span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.green.500'</span><span class="token punctuation">,</span> <span class="token string">'#48BB78'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token number">.10</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
33
|
-
warning<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.orange.500'</span><span class="token punctuation">,</span> <span class="token string">'#ED8936'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
34
|
-
info<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.teal.400'</span><span class="token punctuation">,</span> <span class="token string">'#68D391'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
35
|
-
dark<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.gray.800'</span><span class="token punctuation">,</span> <span class="token string">'#2D3748'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
36
|
-
light<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.gray.100'</span><span class="token punctuation">,</span> <span class="token string">'#F7FAFC'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
37
|
-
muted<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.white'</span><span class="token punctuation">,</span> <span class="token string">'#FFF'</span><span class="token punctuation">)</span>
|
|
38
|
-
<span class="token punctuation">}</span>
|
|
39
|
-
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
40
|
-
close<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
41
|
-
position<span class="token operator">:</span> <span class="token string">'absolute'</span><span class="token punctuation">,</span>
|
|
42
|
-
top<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
|
43
|
-
right<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
|
44
|
-
background<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
|
|
45
|
-
border<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
|
|
46
|
-
cursor<span class="token operator">:</span> <span class="token string">'pointer'</span><span class="token punctuation">,</span>
|
|
47
|
-
color<span class="token operator">:</span> <span class="token string">'inherit'</span><span class="token punctuation">,</span>
|
|
48
|
-
padding<span class="token operator">:</span> <span class="token string">'.66rem'</span><span class="token punctuation">,</span>
|
|
49
|
-
lineHeight<span class="token operator">:</span> <span class="token string">'1rem'</span><span class="token punctuation">,</span>
|
|
50
|
-
fontSize<span class="token operator">:</span> <span class="token string">'1.5rem'</span><span class="token punctuation">,</span>
|
|
51
|
-
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
52
|
-
dismissable<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
53
|
-
padding<span class="token operator">:</span> <span class="token string">'0 0 0 3em'</span>
|
|
54
|
-
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
55
|
-
fade<span class="token operator">:</span> <span class="token string">'opacity .15s linear'</span><span class="token punctuation">,</span>
|
|
56
|
-
header<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
57
|
-
display<span class="token operator">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span>
|
|
58
|
-
fontSize<span class="token operator">:</span> <span class="token string">'1.25rem'</span>
|
|
59
|
-
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
60
|
-
lineHeight<span class="token operator">:</span> <span class="token string">'1.5rem'</span><span class="token punctuation">,</span>
|
|
61
|
-
link<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
62
|
-
color<span class="token operator">:</span> <span class="token string">'currentColor'</span>
|
|
63
|
-
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
64
|
-
position<span class="token operator">:</span> <span class="token string">'relative'</span><span class="token punctuation">,</span>
|
|
65
|
-
px<span class="token operator">:</span> <span class="token string">'.5rem'</span><span class="token punctuation">,</span>
|
|
66
|
-
py<span class="token operator">:</span> <span class="token string">'1rem'</span>
|
|
67
|
-
<span class="token punctuation">}</span>
|
|
68
|
-
<span class="token punctuation">}</span>
|
|
69
|
-
<span class="token punctuation">}</span>
|
|
70
|
-
</code></pre></div><h2 id="variations"><a href="#variations" class="header-anchor">#</a> Variations</h2> <p>The colors variations allow contextual colors for alerts. These are variation
|
|
71
|
-
names are taken from Bootstrap 4 and can be used for convenience, or
|
|
72
|
-
backwards compatibility. Any color name from your theme can be used or assigned
|
|
73
|
-
to a contextual variation.</p> <p><em>Default variations:</em></p> <p><code>primary</code>, <code>secondary</code>, <code>danger</code>, <code>success</code>, <code>warning</code>, <code>info</code>, <code>dark</code>,
|
|
74
|
-
<code>light</code>, <code>muted</code></p> <h2 id="color-api"><a href="#color-api" class="header-anchor">#</a> Color API</h2> <p><code>color</code> is used to manipulate colors dynamically. <a href="https://github.com/Qix-/color#readme" target="_blank" rel="noopener noreferrer">API Docs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
75
|
-
←
|
|
76
|
-
<a href="/options.html" class="prev">
|
|
77
|
-
Options
|
|
78
|
-
</a></span> <span class="next"><a href="/examples/">
|
|
79
|
-
Examples
|
|
80
|
-
</a>
|
|
81
|
-
→
|
|
82
|
-
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
83
|
-
<script src="/assets/js/app.7ed065d3.js" defer></script><script src="/assets/js/2.f3d148c3.js" defer></script><script src="/assets/js/11.97ab3884.js" defer></script>
|
|
84
|
-
</body>
|
|
85
|
-
</html>
|
package/docs/README.md
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
# Tooltip
|
|
2
|
-
|
|
3
|
-
[[toc]]
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
NPM
|
|
8
|
-
|
|
9
|
-
npm i @vue-interface/tooltip --save
|
|
10
|
-
|
|
11
|
-
Yarn
|
|
12
|
-
|
|
13
|
-
yard add @vue-interface/tooltip
|
|
14
|
-
|
|
15
|
-
CDN
|
|
16
|
-
|
|
17
|
-
https://cdn.jsdelivr.net/npm/@vue-interface/modal@<%= pkg.version %>/dist/Modal.min.js
|
|
18
|
-
|
|
19
|
-
## Syntax
|
|
20
|
-
|
|
21
|
-
``` html
|
|
22
|
-
<div v-tooltip title="This is a tooltip"></div>
|
|
23
|
-
```
|
package/docs/examples/README.md
DELETED
package/docs/options.md
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
# Options
|
|
2
|
-
|
|
3
|
-
## Table Of Contents
|
|
4
|
-
|
|
5
|
-
[[toc]]
|
|
6
|
-
|
|
7
|
-
## Inherits
|
|
8
|
-
|
|
9
|
-
*This component inherits the following, and all options from the following are inherited:*
|
|
10
|
-
|
|
11
|
-
- [MergesClasses](/)
|
|
12
|
-
- [Variant](/)
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
## Dismissible
|
|
16
|
-
|
|
17
|
-
- Type: `boolean`
|
|
18
|
-
|
|
19
|
-
Can the alert be dismissed.
|
|
20
|
-
|
|
21
|
-
## Fade
|
|
22
|
-
|
|
23
|
-
- Type: `boolean`
|
|
24
|
-
- Default: `true`
|
|
25
|
-
|
|
26
|
-
Should the alert fade when dismissed.
|
|
27
|
-
|
|
28
|
-
## Heading
|
|
29
|
-
|
|
30
|
-
- Type: `string`
|
|
31
|
-
|
|
32
|
-
The alert heading.
|
|
33
|
-
|
|
34
|
-
## Show
|
|
35
|
-
|
|
36
|
-
- Type: `number`, `boolean`
|
|
37
|
-
- Default: `true`
|
|
38
|
-
|
|
39
|
-
Alerts are visible by default. If passed a number, the alert will be shown
|
|
40
|
-
for the number of seconds that are passed.
|
|
41
|
-
|
|
42
|
-
## Title
|
|
43
|
-
|
|
44
|
-
- Type: `string`
|
|
45
|
-
|
|
46
|
-
An alias to heading. `title` or `heading` maybe used interchangeably.
|
package/docs/tailwindcss.md
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
# Tailwindcss
|
|
2
|
-
|
|
3
|
-
[[toc]]
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
If you want to include Alerts in your Tailwindcss build, then intall the plugin.
|
|
8
|
-
|
|
9
|
-
module.exports = {
|
|
10
|
-
plugins: [
|
|
11
|
-
require('@vue-interface/alert/tailwind')
|
|
12
|
-
]
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
## Theme
|
|
16
|
-
|
|
17
|
-
*These are the default values. Only override what you need.*
|
|
18
|
-
|
|
19
|
-
``` js
|
|
20
|
-
const Color = require('color');
|
|
21
|
-
|
|
22
|
-
module.exports = {
|
|
23
|
-
theme: {
|
|
24
|
-
alert: {
|
|
25
|
-
lineHeight: '1.5em',
|
|
26
|
-
position: 'relative',
|
|
27
|
-
padding: '.5rem 1rem',
|
|
28
|
-
borderRadius: '.25rem',
|
|
29
|
-
close: {
|
|
30
|
-
position: 'absolute',
|
|
31
|
-
top: 0,
|
|
32
|
-
right: 0,
|
|
33
|
-
background: 'none',
|
|
34
|
-
border: 'none',
|
|
35
|
-
cursor: 'pointer',
|
|
36
|
-
color: 'inherit',
|
|
37
|
-
padding: '.66rem',
|
|
38
|
-
lineHeight: '1rem',
|
|
39
|
-
fontSize: '1.5rem',
|
|
40
|
-
},
|
|
41
|
-
dismissable: {
|
|
42
|
-
padding: '0 0 0 3em'
|
|
43
|
-
},
|
|
44
|
-
fade: 'opacity .15s linear',
|
|
45
|
-
header: {
|
|
46
|
-
display: 'block',
|
|
47
|
-
fontSize: '1.25rem'
|
|
48
|
-
},
|
|
49
|
-
lineHeight: '1.5rem',
|
|
50
|
-
link: {
|
|
51
|
-
color: 'currentColor'
|
|
52
|
-
},
|
|
53
|
-
position: 'relative',
|
|
54
|
-
px: '.5rem',
|
|
55
|
-
py: '1rem'
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## Variations
|
|
62
|
-
|
|
63
|
-
The colors variations allow contextual colors for alerts. These are variation
|
|
64
|
-
names are taken from Bootstrap 4 and can be used for convenience, or
|
|
65
|
-
backwards compatibility. Any color name from your theme can be used or assigned
|
|
66
|
-
to a contextual variation.
|
|
67
|
-
|
|
68
|
-
*Default variations:*
|
|
69
|
-
|
|
70
|
-
`primary`, `secondary`, `danger`, `success`, `warning`, `info`, `dark`,
|
|
71
|
-
`light`, `muted`
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
## Color API
|
|
75
|
-
|
|
76
|
-
`color` is used to manipulate colors dynamically. [API Docs](https://github.com/Qix-/color#readme)
|
package/index.html
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
6
|
-
<title>Tooltip</title>
|
|
7
|
-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap-reboot.min.css">
|
|
8
|
-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap-grid.min.css">
|
|
9
|
-
<link rel="stylesheet" href="./dist/Tooltip.css">
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<div id="app" class="container">
|
|
13
|
-
<h1 class="mb-5">tooltip</h1>
|
|
14
|
-
|
|
15
|
-
<a v-tooltip title="Tooltip" href="#" class="mr-3">Top</a>
|
|
16
|
-
<a v-tooltip title="Tooltip" href="#" data-tooltip-placement="bottom" class="mr-3">Bottom</a>
|
|
17
|
-
<a v-tooltip title="Tooltip" href="#" data-tooltip-placement="left" class="mr-3">Left</a>
|
|
18
|
-
<a v-tooltip title="Tooltip" href="#" data-tooltip-placement="right" class="mr-3">Right</a>
|
|
19
|
-
|
|
20
|
-
<h3 class="mt-4">Options</h3>
|
|
21
|
-
|
|
22
|
-
<a v-tooltip="{placement: 'bottom'}" href="#" title="Tooltip!" :data-tooltip-offset="[0, 10]">Hover Me!</a><br>
|
|
23
|
-
|
|
24
|
-
<h3 class="mt-4">Show by Default</h3>
|
|
25
|
-
|
|
26
|
-
<a v-tooltip href="#" title="Tooltip" data-tooltip-placement="bottom" data-tooltip-show>Showing by Default</a>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
|
|
30
|
-
<script type="text/javascript" src="./dist/Tooltip.umd.js"></script>
|
|
31
|
-
<script type="text/javascript">
|
|
32
|
-
const {
|
|
33
|
-
Tooltip,
|
|
34
|
-
TooltipPlugin
|
|
35
|
-
} = window.Tooltip;
|
|
36
|
-
|
|
37
|
-
Vue.use(TooltipPlugin);
|
|
38
|
-
|
|
39
|
-
const vue = new Vue({
|
|
40
|
-
el: '#app',
|
|
41
|
-
data: () => ({
|
|
42
|
-
mounted: false
|
|
43
|
-
}),
|
|
44
|
-
mounted() {
|
|
45
|
-
this.mounted = true;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
</script>
|
|
49
|
-
</body>
|
|
50
|
-
</html>
|
package/index.js
DELETED
package/main.js
DELETED
package/postcss.config.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports = {};
|
package/public/favicon.ico
DELETED
|
Binary file
|
package/public/index.html
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
7
|
-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
8
|
-
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<noscript>
|
|
12
|
-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
13
|
-
</noscript>
|
|
14
|
-
<div id="app"></div>
|
|
15
|
-
<!-- built files will be auto injected -->
|
|
16
|
-
</body>
|
|
17
|
-
</html>
|
package/src/TooltipPlugin.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import Tooltip from './Tooltip';
|
|
2
|
-
import Popper from './Popper';
|
|
3
|
-
|
|
4
|
-
const defaultTriggers = {
|
|
5
|
-
open: ['mouseenter', 'focus'],
|
|
6
|
-
close: ['mouseleave', 'blur']
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
const defaultOptions = {
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export default function(Vue, options = {}) {
|
|
14
|
-
Vue.component('tooltip', options.component || Tooltip);
|
|
15
|
-
Vue.directive('tooltip', {
|
|
16
|
-
bind(el, binding) {
|
|
17
|
-
Object.entries(Object.assign(defaultTriggers, options.triggers))
|
|
18
|
-
.forEach(([method, events]) => {
|
|
19
|
-
events.forEach(event => {
|
|
20
|
-
el.addEventListener(event, e => {
|
|
21
|
-
binding.$tooltip[method]();
|
|
22
|
-
});
|
|
23
|
-
});
|
|
24
|
-
});
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
inserted(el, binding, vnode) {
|
|
28
|
-
const title = () => {
|
|
29
|
-
const attr = el.getAttribute('title') || el.getAttribute('data-title');
|
|
30
|
-
|
|
31
|
-
if(attr) {
|
|
32
|
-
el.setAttribute('data-title', attr);
|
|
33
|
-
el.setAttribute('data-title-replaced', 1);
|
|
34
|
-
el.removeAttribute('title');
|
|
35
|
-
|
|
36
|
-
return attr;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
return option('title');
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
const option = (key, defaultValue) => {
|
|
43
|
-
const dataKey = `${option.prefix || 'data-tooltip-'}${key}`;
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
binding.value && binding.value[key]
|
|
47
|
-
|| vnode.data && vnode.data.attrs && vnode.data.attrs[dataKey]
|
|
48
|
-
|| el.getAttribute(dataKey) === ''
|
|
49
|
-
|| el.getAttribute(dataKey)
|
|
50
|
-
|| defaultValue
|
|
51
|
-
);
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const props = Object.keys(options.props || Popper.props || [])
|
|
55
|
-
.reduce((carry, prop) => {
|
|
56
|
-
return Object.assign({
|
|
57
|
-
[prop]: option(prop)
|
|
58
|
-
}, carry);
|
|
59
|
-
}, {
|
|
60
|
-
target: el
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
const Wrapper = Vue.extend({
|
|
64
|
-
render(h) {
|
|
65
|
-
return h(Vue.extend(options.component || Tooltip), {
|
|
66
|
-
props,
|
|
67
|
-
ref: 'tooltip',
|
|
68
|
-
}, title());
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
binding.$tooltip = new Wrapper({
|
|
73
|
-
el: el.parentNode.insertBefore(
|
|
74
|
-
el.ownerDocument.createElement('div'), el
|
|
75
|
-
),
|
|
76
|
-
methods: {
|
|
77
|
-
open() {
|
|
78
|
-
this.$refs.tooltip.open();
|
|
79
|
-
},
|
|
80
|
-
close() {
|
|
81
|
-
this.$refs.tooltip.close();
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
}
|
package/src/css/Tooltip.css
DELETED