Shards Vue
14 |
15 |
16 | Orange
17 | Lemon
18 | Kiwi
19 |
21 |
22 |
23 |
32 |
33 |
34 | ```
35 | :::
36 |
37 | ## Inline Display
38 |
39 | Radios can also be displayed inline using the `inline` prop.
40 |
41 | :::demo
42 | ```html
43 |
44 | Selected Status: {{ selected }}
20 |
45 |
46 | Basketball
47 | Football
48 | Tennis
49 |
50 |
51 |
52 | ```
53 | :::
54 |
55 | ## Missing Features
56 |
57 | The following radio features are currently not supported, but available on the [roadmap](/roadmap).
58 |
59 | * Possibility of creating plain radios.
60 | * Radio groups.
61 | * Button style radios.
62 |
--------------------------------------------------------------------------------
/src/directives/toggle/toggle.js:
--------------------------------------------------------------------------------
1 | import target from '../../utils/target'
2 | import { COLLAPSE_EVENTS } from '../../utils/constants'
3 | import { setAttr, addClass, removeClass } from '../../utils'
4 |
5 | const inBrowser = typeof window !== 'undefined'
6 | const DR_TOGGLE = '__DRTOGGLE'
7 |
8 | export default {
9 | bind(element, binding, vnode) {
10 | const targets = target(vnode, binding, { click: true }, ({ targets, vnode }) => {
11 | targets.forEach(target => vnode.context.$root.$emit(COLLAPSE_EVENTS.TOGGLE, target));
12 | });
13 |
14 | if (inBrowser && vnode.context && targets.length > 0) {
15 | setAttr(element, 'aria-controls', targets.join(' '))
16 | setAttr(element, 'aria-expanded', 'false')
17 |
18 | if (element.tagName !== 'BUTTON') {
19 | setAttr(element, 'role', 'button')
20 | }
21 |
22 | element[DR_TOGGLE] = function toggleDirectiveHandler(id, state) {
23 | if (targets.indexOf(id) !== -1) {
24 | setAttr(element, 'aria-expanded', state ? 'true' : 'false');
25 |
26 | if (state) {
27 | removeClass(element, 'collapsed');
28 | return;
29 | }
30 |
31 | addClass(element, 'collapsed');
32 | }
33 | }
34 | vnode.context.$root.$on(COLLAPSE_EVENTS.STATE, element[DR_TOGGLE])
35 | }
36 | },
37 | unbind(element, binding, vnode) {
38 | if (!element[DR_TOGGLE]) {
39 | return
40 | }
41 |
42 | vnode.context.$root.$off(COLLAPSE_EVENTS.STATE, element[DR_TOGGLE])
43 | element[DR_TOGGLE] = null
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/button-group/ButtonGroup.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
10 |
11 |
12 |
59 |
60 |
66 |
67 |
--------------------------------------------------------------------------------
/src/components/container/Row.vue:
--------------------------------------------------------------------------------
1 |
2 |
30 |
31 |
32 | Large
33 | Large
34 |
35 |
36 |
37 |
38 | Normal
39 | Normal
40 |
41 |
42 |
43 |
44 | Small
45 | Small
46 |
47 |
48 |
49 |
50 | ```
51 | :::
52 |
53 |
54 | ## Vertical Button Group
55 |
56 | You can stack button groups vertically using the `vertical` prop.
57 |
58 | :::demo
59 | ```html
60 | ',
8 | }
9 |
10 | const Defaults = { ...TPManager.Defaults, ...TooltipDefaults }
11 |
12 | export default class Tooltip extends TPManager {
13 |
14 | static get Name() {
15 | return 'tooltip'
16 | }
17 |
18 | static get Defaults() {
19 | return Defaults
20 | }
21 |
22 | static get ClassPrefix() {
23 | return 'bs-tooltip'
24 | }
25 |
26 | /*--------------------------------------------------------------------------
27 | /* OVERRIDES
28 | /*--------------------------------------------------------------------------*/
29 |
30 | /**
31 | * Checks whether the Tooltip has any content.
32 | */
33 | hasContent(TPElement) {
34 | const Tooltip = TPElement || this._TPElement
35 |
36 | if (!Tooltip) {
37 | return false
38 | }
39 |
40 | const tooltipInnerEl = selectElement(TOOLTIP_SELECTORS.TOOLTIP_INNER, Tooltip)
41 |
42 | return Boolean((tooltipInnerEl || {}).innerHTML)
43 | }
44 |
45 | /**
46 | * Sets the Tooltip content.
47 | */
48 | setContent(TPElement) {
49 | const Tooltip = TPElement || this._TPElement
50 |
51 | if (!Tooltip) {
52 | return false
53 | }
54 |
55 | const tooltipInnerEl = selectElement(TOOLTIP_SELECTORS.TOOLTIP_INNER, Tooltip)
56 | this.setElementContent(tooltipInnerEl, this.getTitle())
57 |
58 | removeClasses(Tooltip, [TP_STATE_CLASSES.FADE, TP_STATE_CLASSES.SHOW])
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/tooltip/README.md:
--------------------------------------------------------------------------------
1 | # Tooltips
2 |
3 | Tooltips are powerful components powered behind the scenes by Popper.js that can be attached to any element.
4 |
5 | > Note: The `container` prop is not always necessary and it is required in the following examples just for demo purposes.
6 |
7 |
8 | ## Directive
9 |
10 | You can also create tooltips using the [tooltip directive](/docs/directives/tooltip).
11 |
12 |
13 | ## Basic Example
14 |
15 | :::demo
16 | ```html
17 |
18 |
19 |
22 | 😃 Wooo! I am a tooltip!
23 |
24 |
25 |
26 |
27 | ```
28 | :::
29 |
30 |
31 | ## Placement
32 |
33 | The tooltip's position can be changed via the `placement` prop. The following placement options are available: `top`, `topleft`, `topright`, `right`, `righttop`, `rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom`.
34 |
35 | :::demo
36 | ```html
37 |
38 |
39 |
43 | 👈 Wooo! I am on the left!
44 |
45 |
46 |
47 |
48 | ```
49 | :::
50 |
51 |
52 | ## Triggers
53 |
54 | Using the `triggers` prop you can control on which events the tooltip should be displayed.
55 |
56 | :::demo
57 | ```html
58 |
59 |
60 | Click Me
61 |
64 | 🖱 You just clicked me!
65 |
66 |
67 |
68 |
69 | ```
70 | :::
71 |
--------------------------------------------------------------------------------
/src/utils/observer.js:
--------------------------------------------------------------------------------
1 | import { isElement } from './'
2 |
3 | /**
4 | * Observes DOM changes.
5 | * @see http://stackoverflow.com/questions/3219758
6 | */
7 | export default (el, callback, opts = null) => {
8 |
9 | if (opts === null) {
10 | opts = {
11 | subtree: true,
12 | childList: true,
13 | characterData: true,
14 | attributes: true,
15 | attributeFilter: ['class', 'style']
16 | }
17 | }
18 |
19 | const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
20 | const eventListenerSupported = window.addEventListener
21 |
22 | el = el ? (el.$el || el) : null
23 | if (!isElement(el)) {
24 | return null
25 | }
26 |
27 | let obs = null
28 |
29 | if (MutationObserver) {
30 | obs = new MutationObserver(mutations => {
31 | let changed = false
32 | for (let i = 0; i < mutations.length && !changed; i++) {
33 | const mutation = mutations[i]
34 | const type = mutation.type
35 | const target = mutation.target
36 | if (type === 'characterData' && target.nodeType === Node.TEXT_NODE) {
37 | changed = true
38 | } else if (type === 'attributes') {
39 | changed = true
40 | } else if (type === 'childList' && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)) {
41 | changed = true
42 | }
43 | }
44 | if (changed) {
45 | callback()
46 | }
47 | })
48 |
49 | obs.observe(el, { ...{ childList: true, subtree: true }, ...opts })
50 | } else if (eventListenerSupported) {
51 | el.addEventListener('DOMNodeInserted', callback, false)
52 | el.addEventListener('DOMNodeRemoved', callback, false)
53 | }
54 |
55 | return obs
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/nav/README.md:
--------------------------------------------------------------------------------
1 | # Navs
2 |
3 | The `
15 |
19 |
20 | 🤔 So you're saying: {{ text }}
21 |
22 |
23 |
24 |
33 |
34 |
35 | ```
36 | :::
37 |
38 | ## Validation
39 |
40 | Using the `state` prop on the `
52 |
57 |
58 | 🤔 So you're saying: {{ text }}
59 |
60 |
61 |
62 |
71 |
72 |
73 | ```
74 | :::
75 |
--------------------------------------------------------------------------------
/src/components/modal/README.md:
--------------------------------------------------------------------------------
1 | # Modals
2 |
3 | Creating flexible modal dialogs can be achieved using the `Modal opened: {{ showModal }}
11 | 👋 I'm a modal!
56 |
15 | Click Me
16 |
17 |
18 | Title Here
19 |
20 | Content Here
21 |
22 |
23 |
24 |
25 | ```
26 | :::
27 |
28 | ## Triggers
29 |
30 | The `
36 | Hover Me
37 |
40 |
41 | Title Here
42 |
43 | Content Here
44 |
45 |
46 |
47 |
48 | ```
49 | :::
50 |
51 |
52 | ## Placement
53 |
54 | Using the `placement` prop you can adjust where your popover will be displayed. So far, the following positions are available: `top`, `topleft`, `topright`, `right`, `righttop`, `rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom`.
55 |
56 | :::demo
57 | ```html
58 |
59 |
60 | Click Me
61 |
64 |
65 | Title Here
66 |
67 | Content Here
68 |
69 |
70 |
71 |
72 | ```
73 | :::
74 |
--------------------------------------------------------------------------------
/src/components/progress/Progress.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
9 |
87 |
88 |
94 |
--------------------------------------------------------------------------------
/src/components/progress/README.md:
--------------------------------------------------------------------------------
1 | # Progres Bars
2 |
3 | You can use the `
24 |
25 |
30 |
31 |
32 | ```
33 | :::
34 |
35 | ## Size
36 |
37 | The size of the progress bar can be controlled via the `size` prop. Progress bars can be either `sm` for small or `lg` for large. Using a small progress bar would hide the label due to the lack of space.
38 |
39 | :::demo
40 | ```html
41 |
42 |
43 |
44 |
49 |
50 |
51 | ```
52 | :::
53 |
54 | ## Precision
55 |
56 | Using the `precision` prop you can specify the precision number of digits.
57 |
58 | :::demo
59 | ```html
60 |
61 |
91 |
94 |
95 | ```
96 |
--------------------------------------------------------------------------------
/src/markdown/getting-started/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | Shards Vue is really easy to get started with. Make sure to follow the guide below to get a better understanding about some of the decisions behind Shards Vue and how to use it to kick-start your next project.
4 |
5 | > **Note:** This page is currently a work in progress.
6 |
7 | ## Installation
8 |
9 | If you are using a module bundler such as [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/), you can install **Shards Vue** via [Yarn](https://yarnpkg.com/en/) or [NPM](https://www.npmjs.com/) and import Shards Vue directly into your project.
10 |
11 | ```bash
12 | // Install via Yarn
13 | yarn add shards-vue
14 |
15 | // Install via NPM
16 | npm i shards-vue
17 | ```
18 |
19 | ## Module Bundlers
20 |
21 | You can register the entire UI kit as a Vue plugin in your app's entry point:
22 |
23 | ```javascript
24 | import Vue from 'vue'
25 | import ShardsVue from 'shards-vue'
26 |
27 | // Import base styles (Bootstrap and Shards)
28 | import 'bootstrap/dist/css/bootstrap.css'
29 | import 'shards-ui/dist/css/shards.css'
30 |
31 | Vue.use(ShardsVue);
32 | ```
33 |
34 | ## Registering Components as Vue Plugins
35 |
36 | If you'd like to register only certain components as Vue plugins, make sure to import just the component you'd like to use.
37 |
38 | ```javascript
39 | import Vue from 'vue'
40 |
41 | // Import base styles (Bootstrap and Shards)
42 | import 'bootstrap/dist/css/bootstrap.css'
43 | import 'shards-ui/dist/css/shards.css'
44 |
45 | import { Button } from 'shards-vue/src/components'
46 | Vue.use(Button)
47 |
48 | ```
49 |
50 | ## Importing Single File Components
51 |
52 | Importing single file components is also possible.
53 |
54 | ```vue
55 |
56 |
13 | Alert - Primary Theme (default) - Example Link
14 | Alert - Secondary Theme - Example Link
15 | Alert - Success Theme - Example Link
16 | Alert - Danger Theme - Example Link
17 | Alert - Warning Theme - Example Link
18 | Alert - Info Theme - Example Link
19 | Alert - Light Theme - Example Link
20 | Alert - Dark Theme - Example Link
21 |
22 |
23 |
24 | ```
25 | :::
26 |
27 | ## Dismissible Alerts
28 |
29 | Dismissible alerts provide the option to hide the alert with a close X button.
30 |
31 | :::demo Dismissible alert example
32 | ```html
33 |
34 |
35 | You can easily dismiss me using the close button →
36 |
37 |
38 |
39 | ```
40 | :::
41 |
42 | ## Self Dismissing Alerts
43 |
44 | You can also control how much time an alert is visible by providing a `Number` in seconds for the `show` prop.
45 |
46 | :::demo Auto dismissible alert example.
47 | ```html
48 |
49 |
50 |
51 |
56 | Success! This alert will will be dismissed in {{ timeUntilDismissed }} seconds!
57 |
58 |
59 | Show Alert!
60 |
61 |
62 |
63 |
64 |
82 |
83 |
84 | ```
85 | :::
86 |
87 |
--------------------------------------------------------------------------------
/src/components/slider/README.md:
--------------------------------------------------------------------------------
1 | # Slider
2 |
3 | The slider component is powered behind the scenes by the [NoUiSlider](https://refreshless.com/nouislider/) library.
4 |
5 | ## Basic Slider
6 |
7 | You can create basic sliders using the `Lorem ipsum dolor sit amet.
17 |
72 |
73 |
74 |
75 |
76 |
78 |
80 |
81 |
82 |
83 |
84 |
85 |
87 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | ```
96 | :::
97 |
--------------------------------------------------------------------------------
/src/components/form/README.md:
--------------------------------------------------------------------------------
1 | # Forms
2 |
3 | The `this is the body contents
79 | this is the body contents
86 |
35 |
36 | Invalid email address!
38 | Your email looks good!
39 | We'll never share your email with anyone else.
40 |
41 |
42 |
43 |
44 | Please provide a valid password!
46 |
47 |
48 |
49 |
50 |
52 |
53 |
54 | I agree with the Terms of Service
55 |
56 |
57 |
15 |
18 |
19 | '
9 | }
10 |
11 | const Defaults = { ...TPManager.Defaults, ...PopoverDefaults }
12 |
13 | export default class Popover extends TPManager {
14 |
15 | static get Name () {
16 | return 'popover'
17 | }
18 |
19 | static get Defaults () {
20 | return Defaults
21 | }
22 |
23 | static get ClassPrefix () {
24 | return 'bs-popover'
25 | }
26 |
27 | /*--------------------------------------------------------------------------
28 | /* OVERRIDES
29 | /*--------------------------------------------------------------------------*/
30 |
31 | /**
32 | * Checks if the Popover has content.
33 | * @returns True if the Popover has content (title or body), false otherwise.
34 | */
35 | hasContent(TPElement) {
36 | const Popover = TPElement || this._TPElement
37 |
38 | if (!Popover) {
39 | return false
40 | }
41 |
42 | const popoverHeaderEl = selectElement(POPOVER_SELECTORS.HEADER, Popover)
43 | const popoverBodyEl = selectElement(POPOVER_SELECTORS.BODY, Popover)
44 | const hasHeader = Boolean((popoverHeaderEl || {}).innerHTML)
45 | const hasBody = Boolean((popoverBodyEl || {}).innerHTML)
46 |
47 | return hasHeader || hasBody
48 | }
49 |
50 | /**
51 | * Sets the content for the Popover element.
52 | */
53 | setContent(TPElement) {
54 | const Popover = TPElement || this._TPElement
55 |
56 | const popoverHeaderEl = selectElement(POPOVER_SELECTORS.HEADER, Popover)
57 | const popoverBodyEl = selectElement(POPOVER_SELECTORS.BODY, Popover)
58 |
59 | this.setElementContent( popoverHeaderEl, this.getTitle())
60 | this.setElementContent( popoverBodyEl, this.getContent())
61 |
62 | removeClasses(Popover, [TP_STATE_CLASSES.FADE, TP_STATE_CLASSES.SHOW])
63 | }
64 |
65 | /*--------------------------------------------------------------------------
66 | /* CLASS SPECIFIC
67 | /*--------------------------------------------------------------------------*/
68 |
69 | /**
70 | * Returns the Popover content.
71 | */
72 | getContent() {
73 | let content = this._config.content || ''
74 |
75 | switch (content) {
76 | case 'string':
77 | content = content.trim()
78 | break
79 | case 'function':
80 | content = content(this._targetElement)
81 | break
82 | case 'object':
83 | if (content.nodeType && !content.innerHTML.trim()) {
84 | content = ''
85 | }
86 | break
87 | }
88 |
89 | return content
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/tooltip/Tooltip.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
116 |
--------------------------------------------------------------------------------
/src/components/container/README.md:
--------------------------------------------------------------------------------
1 | # Layout & Grid System
2 |
3 | Shards Vue provides support for all native Bootstrap 4 layout elements including **containers**, **rows**, **columns** and **form rows** so you can use its full power while building your project's responsive layout powered by flexbox.
4 |
5 | :::demo
6 | ```html
7 |
18 |
22 |
23 |
24 |
31 |
32 |
33 | ```
34 | :::
35 |
36 | ## Supported Types
37 |
38 | The following input types are currently supported.
39 |
40 | :::demo
41 | ```html
42 |
43 |
44 | 🤔 So you're saying: {{ inputValue }}
20 | 😃 Waiting for you to say something!
21 |
76 |
80 |
81 |
82 | ```
83 | :::
84 |
85 | ## Validation States
86 |
87 | Using the `state` prop on the `
99 |
103 |
104 |
105 | ```
106 | :::
107 |
108 | ## Readonly & Plaintext
109 |
110 | You can also display the input as readonly or plain text using the `readonly` and `plaintext` props.
111 |
--------------------------------------------------------------------------------
/src/components/image/Image.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 | Toggle Collapse
11 |
12 |
17 |
18 |
19 |
20 | ```
21 | :::
22 |
23 | ## Initial Visibility
24 |
25 | Using the `visible` prop, you can make the `
13 |
16 | 😍 Now you see me!
14 | In sagittis nibh non arcu viverra, nec imperdiet quam suscipit. Sed porta eleifend scelerisque. Vestibulum dapibus quis arcu a facilisis. 15 |
30 | Toggle Collapse
31 |
32 |
37 |
38 |
39 |
40 | ```
41 | :::
42 |
43 | ## Accordions
44 |
45 | The `accordion` prop you allows you to create dynamic and flexible accordions.
46 |
47 | :::demo
48 | ```html
49 |
33 |
36 | 😁 I'm already visible!
34 | In sagittis nibh non arcu viverra, nec imperdiet quam suscipit. Sed porta eleifend scelerisque. Vestibulum dapibus quis arcu a facilisis. 35 |
50 |
51 |
52 | Accordion 1
53 |
54 |
55 |
56 |
58 |
59 |
60 |
61 |
62 |
63 | Accordion 2
64 |
65 |
66 |
67 |
69 |
70 |
71 |
72 |
73 |
74 | Accordion 3
75 |
76 |
77 |
78 |
80 |
81 |
82 |
83 |
84 |
85 | ```
86 | :::
87 |
--------------------------------------------------------------------------------
/src/components/input-group/InputGroup.vue:
--------------------------------------------------------------------------------
1 |
2 | Nullam augue tortor, viverra id gravida fermentum, posuere a libero. Curabitur at arcu tortor. Donec cursus blandit leo consequat convallis.
57 |Etiam at congue tellus, vitae congue metus. Praesent eget arcu eget justo sodales venenatis. Nam nec est urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
68 |Maecenas tempor dapibus eros, ut ultricies est dapibus eu. Pellentesque quis nisi suscipit, dignissim nunc nec, rhoncus dolor. Maecenas tempus egestas egestas.
79 |
15 |
16 | Orange
17 | Lemon
18 | Kiwi
19 |
21 |
22 |
23 |
32 |
33 |
34 | ```
35 | :::
36 |
37 | ## Toggles
38 |
39 | Checkboxes can be turned into toggles by using the `toggle` prop.
40 |
41 | :::demo
42 | ```html
43 |
44 |
45 |
46 | Checked Status: {{ selected }}
20 |
47 | Enable Rockets - 🚀🚀 Rockets enabled! 🚀🚀
48 |
49 |
50 |
51 |
60 |
61 |
62 | ```
63 | :::
64 |
65 |
66 | ## Inline Display
67 |
68 | Checkboxes can also be displayed inline using the `inline` prop.
69 |
70 | :::demo
71 | ```html
72 |
73 |
74 | Basketball
75 | Football
76 | Tennis
77 |
78 |
79 |
80 | ```
81 | :::
82 |
83 | ## Values
84 |
85 | By default, the `
93 |
94 | I'm indeterminate 😕checked 😊not checked! 😟
95 |
96 |
97 | Toggle Indeterminate
102 |
103 |
104 |
105 |
120 |
121 |
122 | ```
123 | :::
124 |
125 | ## Missing Features
126 |
127 | The following checkbox features are currently not supported, but available on the [roadmap](/roadmap).
128 |
129 | * Possibility of creating plain checkboxes.
130 | * Checkbox groups.
131 | * Button style checkboxes.
132 |
--------------------------------------------------------------------------------
/src/components/badge/README.md:
--------------------------------------------------------------------------------
1 | # Badges
2 |
3 | Badges are the perfect component for labels and count values.
4 |
5 | ## Contextual Variations
6 |
7 | Using the `theme` prop you can easily change the appearance of your badge using the main theme colors: `primary, secondary, success, danger, warning, info, light` and `dark`.
8 |
9 | :::demo
10 | ```html
11 |
98 | Checked: {{ checked }}
99 | Indeterminate: {{ indeterminate }} 100 |
101 | 99 | Indeterminate: {{ indeterminate }} 100 |
12 | Primary
13 | Secondary
14 | Success
15 | Danger
16 | Warning
17 | Info
18 | Light
19 | Dark
20 |
21 |
22 |
23 | ```
24 | :::
25 |
26 | ## Pill-Shaped Badges
27 |
28 | Using the `pill` prop appiles a larger border radius that make your badges to look rounded.
29 |
30 | :::demo
31 | ```html
32 |
33 | Primary
34 | Secondary
35 | Success
36 | Danger
37 | Warning
38 | Info
39 | Light
40 | Dark
41 |
42 |
43 |
44 | ```
45 | :::
46 |
47 | ## Outline Badges
48 |
49 | Using the `outline` prop removes the background color and applies a thin border that make your badges to look outlined.
50 |
51 | :::demo
52 | ```html
53 |
54 | Primary
55 | Secondary
56 | Success
57 | Danger
58 | Warning
59 | Info
60 | Light
61 | Dark
62 |
63 |
64 |
65 | ```
66 | :::
67 |
68 | ## Mixed Effects
69 |
70 | You can also mix both `pill` and `outline` props to get mixed results.
71 |
72 | :::demo
73 | ```html
74 |
75 | Primary
76 | Secondary
77 | Success
78 | Danger
79 | Warning
80 | Info
81 | Light
82 | Dark
83 |
84 |
85 |
86 | ```
87 | :::
88 |
89 | ## Link Badges
90 |
91 | Using the `href` or `to` prop you can turn your badges into regular or router links.
92 |
93 | :::demo
94 | ```html
95 |
96 | Primary
97 | Secondary
98 | Success
99 | Danger
100 | Warning
101 | Info
102 | Light
103 | Dark
104 |
105 |
106 |
107 | ```
108 | :::
109 |
110 | ## Inherited Props
111 |
112 | > **Note:** This component is also inheriting the [Link](/docs/components/link) component's props.
113 |
--------------------------------------------------------------------------------
/src/components/tabs/README.md:
--------------------------------------------------------------------------------
1 | # Tabs
2 |
3 | Using the `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur eros tellus. Fusce mollis felis a lorem euismod sollicitudin. Maecenas et porttitor mauris.
11 | Sed at lacus efficitur, imperdiet purus et, pretium arcu. Mauris vulputate, libero in dignissim auctor, nunc tortor interdum elit, ac dignissim ex enim vitae diam.
14 |
13 |
14 |
15 | {{ computedProgress.toFixed(computedPrecision) }}
16 | {{ value.toFixed(computedPrecision) }}
17 |
18 |
19 |
20 |
21 |
118 |
119 |
124 |
--------------------------------------------------------------------------------
/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Various constants used across the project.
3 | */
4 |
5 | // Theme Colors
6 | export const THEMECOLORS = [
7 | 'primary',
8 | 'secondary',
9 | 'success',
10 | 'info',
11 | 'warning',
12 | 'danger',
13 | 'light',
14 | 'dark'
15 | ];
16 |
17 | /**
18 | * EVENTS
19 | */
20 |
21 | // Accordion
22 | export const COLLAPSE_EVENTS = {
23 | ACCORDION: 'collapse-accordion',
24 | TOGGLE: 'collapse-toggle',
25 | STATE: 'collapse-state'
26 | }
27 |
28 | // Modal events
29 | export const MODAL_EVENTS = {
30 | HIDDEN: 'modal-hidden'
31 | }
32 |
33 | // Alert Events
34 | export const ALERT_EVENTS = {
35 | DISMISS_COUNTDOWN: 'alert-dismiss-countdown',
36 | DISMISSED: 'alert-dismissed'
37 | }
38 |
39 | // Dropdown Events
40 | export const DROPDOWN_EVENTS = {
41 | SHOWN: 'dropdown-shown',
42 | SHOW: 'dropdown-show',
43 | HIDE: 'dropdown-hide',
44 | HIDDEN: 'dropdown-hidden'
45 | }
46 |
47 | // Link Events
48 | export const LINK_EVENTS = {
49 | CLICKED: 'link-clicked'
50 | }
51 |
52 | // All events
53 | export const EVENTS = {
54 | MODAL: MODAL_EVENTS,
55 | ALERT: ALERT_EVENTS,
56 | DROPDOWN: DROPDOWN_EVENTS,
57 | LINK: LINK_EVENTS
58 | }
59 |
60 | /**
61 | * TOOLTIP / POPOVER
62 | */
63 |
64 | // Tooltip / Popover placements
65 | export const TP_PLACEMENTS = {
66 | TOP: 'top',
67 | TOPLEFT: 'topleft',
68 | TOPRIGHT: 'topright',
69 | RIGHT: 'right',
70 | RIGHTTOP: 'righttop',
71 | RIGHTBOTTOM: 'rightbottom',
72 | BOTTOM: 'bottom',
73 | BOTTOMLEFT: 'bottomleft',
74 | BOTTOMRIGHT: 'bottomright',
75 | LEFT: 'left',
76 | LEFTTOP: 'lefttop',
77 | LEFTBOTTOM: 'leftbottom',
78 | AUTO: 'auto'
79 | }
80 |
81 | // Normalized placements
82 | export const N_TP_PLACEMENTS = {
83 | AUTO: 'auto',
84 | TOP: 'top',
85 | RIGHT: 'right',
86 | BOTTOM: 'bottom',
87 | LEFT: 'left',
88 | TOPLEFT: 'top',
89 | TOPRIGHT: 'top',
90 | RIGHTTOP: 'right',
91 | RIGHTBOTTOM: 'right',
92 | BOTTOMLEFT: 'bottom',
93 | BOTTOMRIGHT: 'bottom',
94 | LEFTTOP: 'left',
95 | LEFTBOTTOM: 'left'
96 | }
97 |
98 | // Tooltip/Popover offset map
99 | export const TP_OFFSET_MAP = {
100 | AUTO: 0,
101 | TOPLEFT: -1,
102 | TOP: 0,
103 | TOPRIGHT: +1,
104 | RIGHTTOP: -1,
105 | RIGHT: 0,
106 | RIGHTBOTTOM: +1,
107 | BOTTOMLEFT: -1,
108 | BOTTOM: 0,
109 | BOTTOMRIGHT: +1,
110 | LEFTTOP: -1,
111 | LEFT: 0,
112 | LEFTBOTTOM: +1
113 | }
114 |
115 | // Popover state classes
116 | export const TP_STATE_CLASSES = {
117 | FADE: 'fade',
118 | SHOW: 'show'
119 | }
120 |
121 | // Popover selectors
122 | export const POPOVER_SELECTORS = {
123 | HEADER: '.popover-header',
124 | BODY: '.popover-body'
125 | }
126 |
127 | // Tooltip selectors
128 | export const TOOLTIP_SELECTORS = {
129 | TOOLTIP: '.tooltip',
130 | TOOLTIP_INNER: '.tooltip-inner',
131 | ARROW: '.arrow'
132 | }
133 |
134 | // Tooltip hover state classes
135 | export const TOOLTIP_HOVER_STATE_CLASSES = {
136 | SHOW: 'show',
137 | OUT: 'out'
138 | }
139 |
140 | /**
141 | * FORMS
142 | */
143 |
144 | export const INPUT_TYPES = [
145 | 'text',
146 | 'password',
147 | 'email',
148 | 'number',
149 | 'tel',
150 | 'url',
151 | 'search',
152 | 'range',
153 | 'color',
154 | 'date',
155 | 'time',
156 | 'datetime',
157 | 'datetime-local',
158 | 'month',
159 | 'week',
160 | 'file'
161 | ]
162 |
163 | /**
164 | * EMBEDS
165 | */
166 |
167 | export const EMBED_TYPES = [
168 | 'iframe',
169 | 'video',
170 | 'embed',
171 | 'object',
172 | 'img',
173 | 'd-img'
174 | ]
175 |
176 | export const EMBED_ASPECTS = [
177 | '21by9',
178 | '16by9',
179 | '4by3',
180 | '1by1'
181 | ]
182 |
183 | // Keycodes
184 | export const KEYCODES = {
185 | UP: 38,
186 | DOWN: 40,
187 | LEFT: 37,
188 | RIGHT: 39,
189 | ENTER: 13,
190 | SPACE: 32
191 | }
192 |
--------------------------------------------------------------------------------
/src/components/form-radio/FormRadio.vue:
--------------------------------------------------------------------------------
1 |
2 |
25 |
26 |
27 |
156 |
--------------------------------------------------------------------------------
/src/directives/tooltip/tooltip.js:
--------------------------------------------------------------------------------
1 | import Tooltip from '../../utils/tooltip.class'
2 |
3 | const inBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'
4 | const KEY = '_DR_TOOLTIP_'
5 | const validTriggers = {
6 | 'focus': true,
7 | 'hover': true,
8 | 'click': true,
9 | 'blur': true
10 | }
11 |
12 | /**
13 | * Bindings parser.
14 | */
15 | function parseBindings(bindings) {
16 | let config = {}
17 |
18 | switch (typeof bindings.value) {
19 | case 'string':
20 | case 'function':
21 | config.title = bindings.value
22 | break
23 | case 'object':
24 | config = { ...bindings.value }
25 | }
26 |
27 | // Parse args (eg: v-d-tooltip:my-container)
28 | if (bindings.arg) {
29 | config.container = `#${bindings.arg}` // #my-container
30 | }
31 |
32 | // Parse modifiers. eg: v-d-tooltip.my-modifier
33 | Object.keys(bindings.modifiers).forEach(mod => {
34 | // Parse if the title allows HTML
35 | if (/^html$/.test(mod)) {
36 | config.html = true
37 |
38 | // Parse animation
39 | } else if (/^nofade$/.test(mod)) {
40 | config.animation = false
41 |
42 | // Parse placement
43 | } else if (/^(auto|top(left|right)?|bottom(left|right)?|left(top|bottom)?|right(top|bottom)?)$/.test(mod)) {
44 | config.placement = mod
45 |
46 | // Parse boundary
47 | } else if (/^(window|viewport)$/.test(mod)) {
48 | config.boundary = mod
49 |
50 | // Parse delay
51 | } else if (/^d\d+$/.test(mod)) {
52 | const delay = parseInt(mod.slice(1), 10) || 0
53 | if (delay) {
54 | config.delay = delay
55 | }
56 |
57 | // Parse offset
58 | } else if (/^o-?\d+$/.test(mod)) {
59 | const offset = parseInt(mod.slice(1), 10) || 0
60 | if (offset) {
61 | config.offset = offset
62 | }
63 | }
64 | })
65 |
66 | // Parse selected triggers.
67 | const selectedTriggers = {}
68 | let triggers = typeof config.trigger === 'string' ? config.trigger.trim().split(/\s+/) : []
69 |
70 | triggers.forEach(trigger => {
71 | if (validTriggers[trigger]) {
72 | selectedTriggers[trigger] = true
73 | }
74 | })
75 |
76 | // Parse trigger modifiers. eg: v-d-tooltip.click
77 | Object.keys(validTriggers).forEach(trigger => {
78 | if (bindings.modifiers[trigger]) {
79 | selectedTriggers[trigger] = true
80 | }
81 | })
82 |
83 | config.trigger = Object.keys(selectedTriggers).join(' ')
84 |
85 | // Convert `blur` to `focus`
86 | if (config.trigger === 'blur') {
87 | config.trigger = 'focus'
88 | }
89 |
90 | // If there's no trigger assigned, just delete the key.
91 | if (!config.trigger) {
92 | delete config.trigger
93 | }
94 |
95 | return config
96 | }
97 |
98 | function applyTooltip(el, bindings, vnode) {
99 | if (!inBrowser) {
100 | return
101 | }
102 |
103 | const parsedBindings = parseBindings(bindings)
104 |
105 | if (!el[KEY]) {
106 | el[KEY] = new Tooltip(el, parsedBindings, vnode.context.$root)
107 | return
108 | }
109 |
110 | el[KEY].updateConfig(parsedBindings)
111 | }
112 |
113 | export default {
114 | bind (el, bindings, vnode) {
115 | applyTooltip(el, bindings, vnode)
116 | },
117 |
118 | inserted(el, bindings, vnode) {
119 | applyTooltip(el, bindings, vnode)
120 | },
121 |
122 | update (el, bindings, vnode) {
123 | if (bindings.value !== bindings.oldValue) {
124 | applyTooltip(el, bindings, vnode)
125 | }
126 | },
127 |
128 | componentUpdated (el, bindings, vnode) {
129 | if (bindings.value !== bindings.oldValue) {
130 | applyTooltip(el, bindings, vnode)
131 | }
132 | },
133 |
134 | unbind (el) {
135 | if (!inBrowser) {
136 | return
137 | }
138 |
139 | if (el[KEY]) {
140 | el[KEY].destroy()
141 | el[KEY] = null
142 | delete el[KEY]
143 | }
144 | }
145 | }
146 |
--------------------------------------------------------------------------------
/src/components/alert/Alert.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
17 |
18 |
19 |
150 |
151 |
157 |
--------------------------------------------------------------------------------
/src/components/container/Col.vue:
--------------------------------------------------------------------------------
1 |
2 |