@vue-interface/btn-dropdown 0.9.13 → 1.0.2

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.
Files changed (47) hide show
  1. package/package.json +26 -30
  2. package/src/BtnDropdown.vue +16 -10
  3. package/src/BtnDropdownSingle.vue +20 -17
  4. package/src/BtnDropdownSplit.vue +46 -39
  5. package/src/DropdownHandler.js +46 -44
  6. package/.eslintrc.js +0 -53
  7. package/babel.config.js +0 -7
  8. package/dist/BtnDropdown.common.js +0 -6902
  9. package/dist/BtnDropdown.common.js.map +0 -1
  10. package/dist/BtnDropdown.css +0 -1
  11. package/dist/BtnDropdown.umd.js +0 -6912
  12. package/dist/BtnDropdown.umd.js.map +0 -1
  13. package/dist/BtnDropdown.umd.min.js +0 -2
  14. package/dist/BtnDropdown.umd.min.js.map +0 -1
  15. package/dist/demo.html +0 -19
  16. package/docs/.vuepress/config.js +0 -44
  17. package/docs/.vuepress/dist/404.html +0 -19
  18. package/docs/.vuepress/dist/assets/css/0.styles.275ee968.css +0 -1
  19. package/docs/.vuepress/dist/assets/img/search.83621669.svg +0 -1
  20. package/docs/.vuepress/dist/assets/js/10.5d93d289.js +0 -1
  21. package/docs/.vuepress/dist/assets/js/11.97ab3884.js +0 -1
  22. package/docs/.vuepress/dist/assets/js/2.f3d148c3.js +0 -1
  23. package/docs/.vuepress/dist/assets/js/3.81681fff.js +0 -1
  24. package/docs/.vuepress/dist/assets/js/4.82fa7382.js +0 -1
  25. package/docs/.vuepress/dist/assets/js/5.3dae6ad4.js +0 -1
  26. package/docs/.vuepress/dist/assets/js/6.6a04f815.js +0 -1
  27. package/docs/.vuepress/dist/assets/js/7.c033cb49.js +0 -1
  28. package/docs/.vuepress/dist/assets/js/8.6d6eb599.js +0 -1
  29. package/docs/.vuepress/dist/assets/js/9.eaefe866.js +0 -1
  30. package/docs/.vuepress/dist/assets/js/app.7ed065d3.js +0 -13
  31. package/docs/.vuepress/dist/examples/index.html +0 -21
  32. package/docs/.vuepress/dist/examples/test.html +0 -17
  33. package/docs/.vuepress/dist/index.html +0 -53
  34. package/docs/.vuepress/dist/options.html +0 -41
  35. package/docs/.vuepress/dist/tailwindcss.html +0 -85
  36. package/docs/README.md +0 -17
  37. package/docs/examples/README.md +0 -3
  38. package/docs/options.md +0 -44
  39. package/index.html +0 -328
  40. package/index.js +0 -3
  41. package/main.vue +0 -5
  42. package/postcss.config.js +0 -1
  43. package/public/favicon.ico +0 -0
  44. package/public/index.html +0 -17
  45. package/src/css/BtnDropdown.css +0 -1
  46. package/tailwind.config.js +0 -13
  47. package/vue.config.js +0 -11
package/docs/.vuepress/dist/index.html DELETED
@@ -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">&lt;!DOCTYPE html&gt;</span>
18
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
19
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
20
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
21
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1, shrink-to-fit=no<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
22
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>@vue-interface/alert<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
23
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap-reboot.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
24
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap-grid.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
25
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/@vue-interface/alert@1.0.2/dist/Alert.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
26
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
27
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
28
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>@vue-interface/alert<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
29
-
30
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
31
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>alert</span><span class="token punctuation">&gt;</span></span>This is an alert.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</span></span>
32
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
33
-
34
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
35
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/@vue-interface/alert@1.0.2/dist/Alert.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
36
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
44
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
45
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</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>
package/docs/.vuepress/dist/options.html DELETED
@@ -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">&lt;</span>alert</span> <span class="token attr-name">dismissible</span><span class="token punctuation">&gt;</span></span>
15
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Dismiss this alert.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
16
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</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">&lt;</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">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
18
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Dismiss this alert.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
19
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</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">&lt;</span>alert</span> <span class="token attr-name">heading</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Some heading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
21
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Some alert content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
22
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</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">&lt;</span>alert</span> <span class="token attr-name">:show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
25
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>This alert is hidden<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
26
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</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">&lt;</span>alert</span> <span class="token attr-name">heading</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Some heading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
28
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Some alert content.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
29
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>alert</span><span class="token punctuation">&gt;</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>
package/docs/.vuepress/dist/tailwindcss.html DELETED
@@ -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,17 +0,0 @@
1
- # BtnDropdown
2
-
3
- [[toc]]
4
-
5
- ## Installation
6
-
7
- NPM
8
-
9
- npm i <%= pkg.name %> --save
10
-
11
- Yarn
12
-
13
- yard add <%= pkg.name %>
14
-
15
- CDN
16
-
17
- https://cdn.jsdelivr.net/npm/<%= pkg.name %>@<%= pkg.version %>/dist/BtnDropdown.min.js
package/docs/examples/README.md DELETED
@@ -1,3 +0,0 @@
1
- # Examples
2
-
3
- @[example](test)
package/docs/options.md DELETED
@@ -1,44 +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
-
13
- ## Dismissible
14
-
15
- - Type: `boolean`
16
-
17
- Can the alert be dismissed.
18
-
19
- ## Fade
20
-
21
- - Type: `boolean`
22
- - Default: `true`
23
-
24
- Should the alert fade when dismissed.
25
-
26
- ## Heading
27
-
28
- - Type: `string`
29
-
30
- The alert heading.
31
-
32
- ## Show
33
-
34
- - Type: `number`, `boolean`
35
- - Default: `true`
36
-
37
- Alerts are visible by default. If passed a number, the alert will be shown
38
- for the number of seconds that are passed.
39
-
40
- ## Title
41
-
42
- - Type: `string`
43
-
44
- An alias to heading. `title` or `heading` maybe used interchangeably.