@vue-interface/select-field 0.9.17 → 0.11.1
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/select-field.es.js +780 -0
- package/dist/select-field.umd.js +15 -0
- package/dist/style.css +1 -0
- package/index.js +5 -2
- package/package.json +28 -34
- package/src/SelectField.vue +97 -53
- package/.eslintrc.js +0 -53
- package/babel.config.js +0 -11
- package/dist/SelectField.common.js +0 -5079
- package/dist/SelectField.common.js.map +0 -1
- package/dist/SelectField.css +0 -1
- package/dist/SelectField.umd.js +0 -5089
- package/dist/SelectField.umd.js.map +0 -1
- package/dist/SelectField.umd.min.js +0 -2
- package/dist/SelectField.umd.min.js.map +0 -1
- package/dist/demo.html +0 -19
- 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 -17
- package/docs/examples/README.md +0 -3
- package/docs/options.md +0 -46
- package/docs/tailwindcss.md +0 -76
- package/index.html +0 -188
- package/main.vue +0 -8
- package/postcss.config.js +0 -1
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -17
- package/src/css/SelectField.css +0 -1
- package/tailwind.config.js +0 -22
- package/vue.config.js +0 -11
|
@@ -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
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,188 +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>SelectField</title>
|
|
7
|
-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
|
8
|
-
<link rel="stylesheet" href="./dist/SelectField.css">
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<div id="app" class="container">
|
|
12
|
-
<h1 class="mb-5">select-field</h1>
|
|
13
|
-
|
|
14
|
-
<h3>Basic Usage</h3>
|
|
15
|
-
|
|
16
|
-
<select-field label="Regular Field">
|
|
17
|
-
<option value="">Select an option...</option>
|
|
18
|
-
<option value="1">Option 1</option>
|
|
19
|
-
<option value="2">Option 2</option>
|
|
20
|
-
<option value="3">Option 3</option>
|
|
21
|
-
</select-field>
|
|
22
|
-
|
|
23
|
-
<select-field label="Descriptive Field" help-text="Some helpful text goes here.">
|
|
24
|
-
<option value="">Select an option...</option>
|
|
25
|
-
<option value="1">Option 1</option>
|
|
26
|
-
<option value="2">Option 2</option>
|
|
27
|
-
<option value="3">Option 3</option>
|
|
28
|
-
</select-field>
|
|
29
|
-
|
|
30
|
-
<select-field label="Plaintext Field" plaintext>
|
|
31
|
-
<option value="">Select an option...</option>
|
|
32
|
-
<option value="1">Option 1</option>
|
|
33
|
-
<option value="2">Option 2</option>
|
|
34
|
-
<option value="3">Option 3</option>
|
|
35
|
-
</select-field>
|
|
36
|
-
|
|
37
|
-
<select-field label="Readonly Field" readonly>
|
|
38
|
-
<option value="">Select an option...</option>
|
|
39
|
-
<option value="1">Option 1</option>
|
|
40
|
-
<option value="2">Option 2</option>
|
|
41
|
-
<option value="3">Option 3</option>
|
|
42
|
-
</select-field>
|
|
43
|
-
|
|
44
|
-
<h3>Custom Fields</h3>
|
|
45
|
-
|
|
46
|
-
<select-field label="Custom Field" placeholder="Custom Field" custom>
|
|
47
|
-
<option value="1">Option 1</option>
|
|
48
|
-
<option value="2">Option 2</option>
|
|
49
|
-
<option value="3">Option 3</option>
|
|
50
|
-
</select-field>
|
|
51
|
-
|
|
52
|
-
<select-field label="Custom Field" placeholder="Custom Field" custom>
|
|
53
|
-
<option value="">Select an option...</option>
|
|
54
|
-
<option value="1">Option 1</option>
|
|
55
|
-
<option value="2">Option 2</option>
|
|
56
|
-
<option value="3">Option 3</option>
|
|
57
|
-
</select-field>
|
|
58
|
-
|
|
59
|
-
<select-field label="Custom Field" placeholder="Custom Field" error="test" custom>
|
|
60
|
-
<option value="1">Option 1</option>
|
|
61
|
-
<option value="2">Option 2</option>
|
|
62
|
-
<option value="3">Option 3</option>
|
|
63
|
-
</select-field>
|
|
64
|
-
|
|
65
|
-
<hr>
|
|
66
|
-
|
|
67
|
-
<h3>Sizes</h3>
|
|
68
|
-
|
|
69
|
-
<div class="row">
|
|
70
|
-
|
|
71
|
-
<div class="col-sm-6">
|
|
72
|
-
|
|
73
|
-
<h5>Regular Field</h5>
|
|
74
|
-
|
|
75
|
-
<select-field size="sm">
|
|
76
|
-
<option value="">Small</option>
|
|
77
|
-
<option value="1">Option 1</option>
|
|
78
|
-
<option value="2">Option 2</option>
|
|
79
|
-
<option value="3">Option 3</option>
|
|
80
|
-
</select-field>
|
|
81
|
-
|
|
82
|
-
<select-field size="md">
|
|
83
|
-
<option value="">Medium</option>
|
|
84
|
-
<option value="1">Option 1</option>
|
|
85
|
-
<option value="2">Option 2</option>
|
|
86
|
-
<option value="3">Option 3</option>
|
|
87
|
-
</select-field>
|
|
88
|
-
|
|
89
|
-
<select-field size="lg">
|
|
90
|
-
<option value="">Large</option>
|
|
91
|
-
<option value="1">Option 1</option>
|
|
92
|
-
<option value="2">Option 2</option>
|
|
93
|
-
<option value="3">Option 3</option>
|
|
94
|
-
</select-field>
|
|
95
|
-
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
<div class="col-sm-6">
|
|
99
|
-
|
|
100
|
-
<h5>Custom Field</h5>
|
|
101
|
-
|
|
102
|
-
<select-field label="Small" placeholder="Small" size="sm" custom>
|
|
103
|
-
<option value="1">Option 1</option>
|
|
104
|
-
<option value="2">Option 2</option>
|
|
105
|
-
<option value="3">Option 3</option>
|
|
106
|
-
</select-field>
|
|
107
|
-
|
|
108
|
-
<select-field custom label="Medium" placeholder="Medium">
|
|
109
|
-
<option value="1">Option 1</option>
|
|
110
|
-
<option value="2">Option 2</option>
|
|
111
|
-
<option value="3">Option 3</option>
|
|
112
|
-
</select-field>
|
|
113
|
-
|
|
114
|
-
<select-field custom label="Large" placeholder="Large" size="lg">
|
|
115
|
-
<option value="1">Option 1</option>
|
|
116
|
-
<option value="2">Option 2</option>
|
|
117
|
-
<option value="3">Option 3</option>
|
|
118
|
-
</select-field>
|
|
119
|
-
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
<h2>Activity Indicator</h2>
|
|
125
|
-
|
|
126
|
-
<select-field label="Small" size="sm" :activity="showActivity">
|
|
127
|
-
<option value="">Select an option...</option>
|
|
128
|
-
<option value="1">Option 1</option>
|
|
129
|
-
<option value="2">Option 2</option>
|
|
130
|
-
<option value="3">Option 3</option>
|
|
131
|
-
</select-field>
|
|
132
|
-
|
|
133
|
-
<select-field label="Medium" size="md" :activity="showActivity">
|
|
134
|
-
<option value="">Select an option...</option>
|
|
135
|
-
<option value="1">Option 1</option>
|
|
136
|
-
<option value="2">Option 2</option>
|
|
137
|
-
<option value="3">Option 3</option>
|
|
138
|
-
</select-field>
|
|
139
|
-
|
|
140
|
-
<select-field label="Large" size="lg" :activity="showActivity">
|
|
141
|
-
<option value="">Select an option...</option>
|
|
142
|
-
<option value="1">Option 1</option>
|
|
143
|
-
<option value="2">Option 2</option>
|
|
144
|
-
<option value="3">Option 3</option>
|
|
145
|
-
</select-field>
|
|
146
|
-
|
|
147
|
-
<button @click="showActivity = !showActivity">
|
|
148
|
-
<span v-if="!showActivity">Show</span><span v-else>Hide</span> Activity
|
|
149
|
-
</button>
|
|
150
|
-
|
|
151
|
-
<hr>
|
|
152
|
-
|
|
153
|
-
<h3>Validation</h3>
|
|
154
|
-
|
|
155
|
-
<select-field label="Single Inline Error" error="This is an inline error."></select-field>
|
|
156
|
-
|
|
157
|
-
<select-field name="test" label="Multiple Errors From Object" :errors="{'test': ['This is an inline error #1.', 'This is an inline error #2.']}"></select-field>
|
|
158
|
-
|
|
159
|
-
<h3>Legacy Form Control</h3>
|
|
160
|
-
|
|
161
|
-
<select-field label="Regular Field" legacy>
|
|
162
|
-
<option value="">Select an option...</option>
|
|
163
|
-
<option value="1">Option 1</option>
|
|
164
|
-
<option value="2">Option 2</option>
|
|
165
|
-
<option value="3">Option 3</option>
|
|
166
|
-
</select-field>
|
|
167
|
-
</div>
|
|
168
|
-
|
|
169
|
-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
|
|
170
|
-
<script type="text/javascript" src="./dist/SelectField.umd.js"></script>
|
|
171
|
-
<script type="text/javascript">
|
|
172
|
-
const SelectField = window.SelectField;
|
|
173
|
-
|
|
174
|
-
const vue = new Vue({
|
|
175
|
-
el: '#app',
|
|
176
|
-
components: {
|
|
177
|
-
SelectField
|
|
178
|
-
},
|
|
179
|
-
data() {
|
|
180
|
-
return {
|
|
181
|
-
value: null,
|
|
182
|
-
showActivity: false
|
|
183
|
-
};
|
|
184
|
-
}
|
|
185
|
-
});
|
|
186
|
-
</script>
|
|
187
|
-
</body>
|
|
188
|
-
</html>
|
package/main.vue
DELETED
package/postcss.config.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports = {};
|
package/public/favicon.ico
DELETED
|
Binary file
|