├── types
└── index.d.ts
├── .eslintrc.json
├── src
├── components
│ ├── Txt
│ │ ├── index.js
│ │ └── Txt.vue
│ ├── Icon
│ │ ├── index.js
│ │ └── Icon.vue
│ ├── Input
│ │ ├── index.js
│ │ └── Input.vue
│ ├── Label
│ │ ├── index.js
│ │ └── Label.vue
│ ├── Radio
│ │ ├── index.js
│ │ └── Radio.vue
│ ├── Title
│ │ ├── index.js
│ │ └── Title.vue
│ ├── Button
│ │ ├── index.js
│ │ └── Button.vue
│ ├── Divider
│ │ ├── index.js
│ │ └── Divider.vue
│ ├── Select
│ │ ├── index.js
│ │ └── Select.vue
│ ├── Toggle
│ │ ├── index.js
│ │ └── Toggle.vue
│ ├── Tooltip
│ │ ├── index.js
│ │ └── Tooltip.vue
│ ├── Checkbox
│ │ ├── index.js
│ │ └── Checkbox.vue
│ ├── NumInput
│ │ ├── index.js
│ │ └── NumInput.vue
│ ├── Textarea
│ │ ├── index.js
│ │ └── Textarea.vue
│ ├── Disclosure
│ │ ├── index.js
│ │ └── Disclosure.vue
│ ├── IconButton
│ │ ├── index.js
│ │ └── IconButton.vue
│ ├── DisclosureItem
│ │ ├── index.js
│ │ └── DisclosureItem.vue
│ └── index.js
├── assets
│ ├── icons
│ │ ├── caret-up.svg
│ │ ├── caret-down.svg
│ │ ├── caret-left.svg
│ │ ├── caret-right.svg
│ │ ├── minus.svg
│ │ ├── plus.svg
│ │ ├── spacing.svg
│ │ ├── star-on.svg
│ │ ├── layout-align-horizontal-centers.svg
│ │ ├── layout-align-vertical-centers.svg
│ │ ├── layout-grid-columns.svg
│ │ ├── layout-grid-rows.svg
│ │ ├── warning-large.svg
│ │ ├── warning.svg
│ │ ├── layout-align-left.svg
│ │ ├── layout-align-top.svg
│ │ ├── list.svg
│ │ ├── stroke-weight.svg
│ │ ├── layout-align-bottom.svg
│ │ ├── layout-align-right.svg
│ │ ├── tidy-up-list-horizontal.svg
│ │ ├── tidy-up-list-vertical.svg
│ │ ├── distribute-vertical-spacing.svg
│ │ ├── auto-layout-horizontal.svg
│ │ ├── distribute-horizontal-spacing.svg
│ │ ├── play.svg
│ │ ├── angle.svg
│ │ ├── auto-layout-vertical.svg
│ │ ├── back.svg
│ │ ├── corner-radius.svg
│ │ ├── corners.svg
│ │ ├── instance.svg
│ │ ├── forward.svg
│ │ ├── check.svg
│ │ ├── frame.svg
│ │ ├── vertical-padding.svg
│ │ ├── draft.svg
│ │ ├── horizontal-padding.svg
│ │ ├── list-tile.svg
│ │ ├── close.svg
│ │ ├── list-detailed.svg
│ │ ├── arrow-up-down.svg
│ │ ├── arrow-left-right.svg
│ │ ├── link-broken.svg
│ │ ├── recent.svg
│ │ ├── lock-off.svg
│ │ ├── resolve-filled.svg
│ │ ├── tidy-up-grid.svg
│ │ ├── link-connected.svg
│ │ ├── layout-grid-uniform.svg
│ │ ├── star-off.svg
│ │ ├── lock-on.svg
│ │ ├── sort-top-bottom.svg
│ │ ├── eyedropper.svg
│ │ ├── group.svg
│ │ ├── search-large.svg
│ │ ├── ellipses.svg
│ │ ├── resolve.svg
│ │ ├── trash.svg
│ │ ├── resize-to-fit.svg
│ │ ├── sort-alpha-dsc.svg
│ │ ├── heart-fill.svg
│ │ ├── sort-alpha-asc.svg
│ │ ├── styles.svg
│ │ ├── visible.svg
│ │ ├── search.svg
│ │ ├── hyperlink.svg
│ │ ├── component.svg
│ │ ├── hidden.svg
│ │ ├── adjust.svg
│ │ ├── alert.svg
│ │ ├── theme.svg
│ │ ├── image.svg
│ │ ├── smiley.svg
│ │ ├── timer.svg
│ │ ├── reverse.svg
│ │ ├── blend.svg
│ │ ├── key.svg
│ │ ├── effects.svg
│ │ ├── break.svg
│ │ ├── blend-empty.svg
│ │ ├── spinner.svg
│ │ ├── share.svg
│ │ ├── tooltip.svg
│ │ ├── tooltip-inverse.svg
│ │ ├── swap.svg
│ │ ├── random.svg
│ │ ├── library.svg
│ │ ├── settings.svg
│ │ └── heart.svg
│ └── style
│ │ ├── _animation.scss
│ │ ├── index.scss
│ │ ├── _layout.scss
│ │ ├── _typography.scss
│ │ ├── _color.scss
│ │ ├── _icon.scss
│ │ └── _util.scss
├── mixins
│ └── uniqueId.js
├── serve.js
├── build.js
└── Demo.vue
├── babel.config.js
├── .gitignore
├── vue.config.js
├── misc
└── hero.svg
├── public
└── index.html
├── LICENSE
├── package.json
└── README.md
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'figma-plugin-ds-vue'
2 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["plugin:vue/base"]
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Txt/index.js:
--------------------------------------------------------------------------------
1 | import Txt from './Txt.vue'
2 |
3 | export default Txt
4 |
--------------------------------------------------------------------------------
/src/components/Icon/index.js:
--------------------------------------------------------------------------------
1 | import Icon from './Icon.vue'
2 |
3 | export default Icon
4 |
--------------------------------------------------------------------------------
/src/components/Input/index.js:
--------------------------------------------------------------------------------
1 | import Input from './Input.vue'
2 |
3 | export default Input
4 |
--------------------------------------------------------------------------------
/src/components/Label/index.js:
--------------------------------------------------------------------------------
1 | import Label from './Label.vue'
2 |
3 | export default Label
4 |
--------------------------------------------------------------------------------
/src/components/Radio/index.js:
--------------------------------------------------------------------------------
1 | import Radio from './Radio.vue'
2 |
3 | export default Radio
4 |
--------------------------------------------------------------------------------
/src/components/Title/index.js:
--------------------------------------------------------------------------------
1 | import Title from './Title.vue'
2 |
3 | export default Title
4 |
--------------------------------------------------------------------------------
/src/components/Button/index.js:
--------------------------------------------------------------------------------
1 | import Button from './Button.vue'
2 |
3 | export default Button
4 |
--------------------------------------------------------------------------------
/src/components/Divider/index.js:
--------------------------------------------------------------------------------
1 | import Divider from './Divider.vue'
2 |
3 | export default Divider
4 |
--------------------------------------------------------------------------------
/src/components/Select/index.js:
--------------------------------------------------------------------------------
1 | import Select from './Select.vue'
2 |
3 | export default Select
4 |
--------------------------------------------------------------------------------
/src/components/Toggle/index.js:
--------------------------------------------------------------------------------
1 | import Toggle from './Toggle.vue'
2 |
3 | export default Toggle
4 |
--------------------------------------------------------------------------------
/src/components/Tooltip/index.js:
--------------------------------------------------------------------------------
1 | import Tooltip from './Tooltip.vue'
2 |
3 | export default Tooltip
4 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/cli-plugin-babel/preset'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/Checkbox/index.js:
--------------------------------------------------------------------------------
1 | import Checkbox from './Checkbox.vue'
2 |
3 | export default Checkbox
4 |
--------------------------------------------------------------------------------
/src/components/NumInput/index.js:
--------------------------------------------------------------------------------
1 | import NumInput from './NumInput.vue'
2 |
3 | export default NumInput
4 |
--------------------------------------------------------------------------------
/src/components/Textarea/index.js:
--------------------------------------------------------------------------------
1 | import Textarea from './Textarea.vue'
2 |
3 | export default Textarea
4 |
--------------------------------------------------------------------------------
/src/components/Disclosure/index.js:
--------------------------------------------------------------------------------
1 | import Disclosure from './Disclosure.vue'
2 |
3 | export default Disclosure
4 |
--------------------------------------------------------------------------------
/src/components/IconButton/index.js:
--------------------------------------------------------------------------------
1 | import IconButton from './IconButton.vue'
2 |
3 | export default IconButton
4 |
--------------------------------------------------------------------------------
/src/components/DisclosureItem/index.js:
--------------------------------------------------------------------------------
1 | import DisclosureItem from './DisclosureItem.vue'
2 |
3 | export default DisclosureItem
4 |
--------------------------------------------------------------------------------
/src/assets/icons/caret-up.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 |
23 |
--------------------------------------------------------------------------------
/src/assets/icons/ellipses.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/icons/visible.svg:
--------------------------------------------------------------------------------
1 | <%= htmlWebpackPlugin.options.title %>
9 |
10 |
11 |
12 | We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/assets/icons/reverse.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Section title
4 |
5 |
6 |
7 |
15 |
16 |
32 |
--------------------------------------------------------------------------------
/src/assets/icons/break.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
30 |
31 |
40 |
--------------------------------------------------------------------------------
/src/components/Icon/Icon.vue:
--------------------------------------------------------------------------------
1 |
2 |
17 |
18 |
32 |
33 |
39 |
--------------------------------------------------------------------------------
/src/components/Label/Label.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Label
4 |
5 |
6 |
7 |
15 |
16 |
32 |
--------------------------------------------------------------------------------
/src/assets/icons/blend-empty.svg:
--------------------------------------------------------------------------------
1 |
2 |
25 |
26 |
50 |
51 |
107 |
--------------------------------------------------------------------------------
/src/components/Txt/Txt.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 | Text
16 |
17 |
18 |
19 |
49 |
50 |
111 |
--------------------------------------------------------------------------------
/src/components/Textarea/Textarea.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
16 |
33 |
34 |
100 |
--------------------------------------------------------------------------------
/src/components/Toggle/Toggle.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 | Item
14 |
15 |
16 |
17 |
18 |
36 |
37 |
115 |
--------------------------------------------------------------------------------
/src/components/Checkbox/Checkbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 | Item
14 |
15 |
16 |
17 |
18 |
40 |
41 |
110 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | `figma-plugin-ds-vue` is a Vue component library that matches the [UI2: Figma Design System](https://www.figma.com/community/file/928108847914589057) for building Figma plugins. It is based on [thomas-lowry/figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds).
6 |
7 | ### [View Documentation](https://figma-plugin-ds-vue.netlify.app/)
8 |
9 | ## ✨ Installation
10 |
11 | 1. Install the package `npm i figma-plugin-ds-vue`
12 |
13 | 2. Include the global stylesheet in your app (either on component-level or make it accessible globally by importing it to your app's entry file, ex: `main.js`)
14 |
15 | `import 'figma-plugin-ds-vue/dist/figma-plugin-ds-vue.css'`
16 |
17 | 3. Import and register the Vue components you want to use, refer to the [documentation](https://figma-plugin-ds-vue.netlify.app/) for details and an overview of all available components
18 |
19 | 4. Enjoy building your plugin 💻✨
20 |
21 | ## 📝 Documentation
22 |
23 | Refer to the library's [documentation](https://figma-plugin-ds-vue.netlify.app/) for a detailed overview of each component and its usage.
24 |
25 | Quick reference:
26 |
27 | - [Button](https://figma-plugin-ds-vue.netlify.app/docs/components/button/)
28 | - [Checkbox](https://figma-plugin-ds-vue.netlify.app/docs/components/checkbox/)
29 | - [Disclosure](https://figma-plugin-ds-vue.netlify.app/docs/components/disclosure/)
30 | - [Divider](https://figma-plugin-ds-vue.netlify.app/docs/components/divider/)
31 | - [Icon](https://figma-plugin-ds-vue.netlify.app/docs/components/icon/)
32 | - [Icon Button](https://figma-plugin-ds-vue.netlify.app/docs/components/icon-button/)
33 | - [Input](https://figma-plugin-ds-vue.netlify.app/docs/components/input/)
34 | - [Number Input](https://figma-plugin-ds-vue.netlify.app/docs/components/num-input/)
35 | - [Radio menu](https://figma-plugin-ds-vue.netlify.app/docs/components/radio-menu/)
36 | - [Select menu](https://figma-plugin-ds-vue.netlify.app/docs/components/select-menu/)
37 | - [Label](https://figma-plugin-ds-vue.netlify.app/docs/components/label/)
38 | - [Text](https://figma-plugin-ds-vue.netlify.app/docs/components/text/)
39 | - [Textarea](https://figma-plugin-ds-vue.netlify.app/docs/components/textarea/)
40 | - [Title](https://figma-plugin-ds-vue.netlify.app/docs/components/title/)
41 | - [Toggle](https://figma-plugin-ds-vue.netlify.app/docs/components/toggle/)
42 | - [Tooltip](https://figma-plugin-ds-vue.netlify.app/docs/components/tooltip/)
43 |
44 | The global stylesheet also includes [style variables](https://figma-plugin-ds-vue.netlify.app/docs/utils/variables/) 🎨 and [utility classes](https://figma-plugin-ds-vue.netlify.app/docs/utils/style-utils/) 🧰 which can be used to format your plugin 🌈
45 |
46 | ## 🌀 Misc
47 |
48 | A great writeup on Figma plugin design & heuristics is [@yuanqing's](https://github.com/yuanqing) **[The UX of Figma plugins](https://uxdesign.cc/the-ux-of-figma-plugins-f4f896f8cf35)** 📚
49 |
50 | This project is based on [thomas-lowry/figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds). It also includes refactored components of [Morglod/figma-vue-boilerplate](https://github.com/Morglod/figma-vue-boilerplate), a project which basically kickstarted the development of this one. S/o to these amazing humans 👋
51 |
52 | ## 📝 License
53 |
54 | [MIT](LICENSE)
55 |
--------------------------------------------------------------------------------
/src/components/Radio/Radio.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
19 |
20 |
21 |
22 |
63 |
64 |
133 |
--------------------------------------------------------------------------------
/src/components/Button/Button.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 | {{
13 | secondary
14 | ? 'Secondary'
15 | : tertiary
16 | ? 'Tertiary'
17 | : destructive
18 | ? 'Destructive'
19 | : disabled
20 | ? 'Disabled'
21 | : 'Primary'
22 | }}
23 |
24 |
25 |
26 |
41 |
42 |
139 |
--------------------------------------------------------------------------------
/src/components/DisclosureItem/DisclosureItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
17 | Disclosure content
18 |
19 |
20 |
21 |
22 |
66 |
67 |
156 |
--------------------------------------------------------------------------------
/src/components/Input/Input.vue:
--------------------------------------------------------------------------------
1 |
2 |
34 |
35 |
36 |
58 |
59 |
183 |
--------------------------------------------------------------------------------
/src/components/Tooltip/Tooltip.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
13 |
15 |
16 |
17 |
18 |
66 |
67 |
216 |
--------------------------------------------------------------------------------
/src/assets/style/_icon.scss:
--------------------------------------------------------------------------------
1 | .fig-icon {
2 | display: inline-block;
3 | width: var(--size-medium);
4 | height: var(--size-medium);
5 | font-size: var(--font-size-xsmall);
6 | font-family: var(--font-stack);
7 | vertical-align: middle;
8 | background-repeat: no-repeat;
9 | background-position: center;
10 | cursor: default;
11 | user-select: none;
12 |
13 | &--text {
14 | display: inline-flex;
15 | align-items: center;
16 | justify-content: center;
17 | font-size: var(--font-size-xsmall);
18 | font-family: var(--font-stack);
19 | }
20 |
21 | &--adjust {
22 | background-image: url('../icons/adjust.svg');
23 | }
24 | &--alert {
25 | background-image: url('../icons/alert.svg');
26 | }
27 | &--angle {
28 | background-image: url('../icons/angle.svg');
29 | }
30 | &--arrow-left-right {
31 | background-image: url('../icons/arrow-left-right.svg');
32 | }
33 | &--arrow-up-down {
34 | background-image: url('../icons/arrow-up-down.svg');
35 | }
36 | &--auto-layout-horizontal {
37 | background-image: url('../icons/auto-layout-horizontal.svg');
38 | }
39 | &--auto-layout-vertical {
40 | background-image: url('../icons/auto-layout-vertical.svg');
41 | }
42 | &--back {
43 | background-image: url('../icons/back.svg');
44 | }
45 | &--blend-empty {
46 | background-image: url('../icons/blend-empty.svg');
47 | }
48 | &--blend {
49 | background-image: url('../icons/blend.svg');
50 | }
51 | &--break {
52 | background-image: url('../icons/break.svg');
53 | }
54 | &--caret-left {
55 | background-image: url('../icons/caret-left.svg');
56 | }
57 | &--caret-up {
58 | background-image: url('../icons/caret-up.svg');
59 | }
60 | &--caret-right {
61 | background-image: url('../icons/caret-right.svg');
62 | }
63 | &--caret-down {
64 | background-image: url('../icons/caret-down.svg');
65 | }
66 | &--check {
67 | background-image: url('../icons/check.svg');
68 | }
69 | &--close {
70 | background-image: url('../icons/close.svg');
71 | }
72 | &--component {
73 | background-image: url('../icons/component.svg');
74 | }
75 | &--corner-radius {
76 | background-image: url('../icons/corner-radius.svg');
77 | }
78 | &--corners {
79 | background-image: url('../icons/corners.svg');
80 | }
81 | &--distribute-horizontal-spacing {
82 | background-image: url('../icons/distribute-horizontal-spacing.svg');
83 | }
84 | &--distribute-vertical-spacing {
85 | background-image: url('../icons/distribute-vertical-spacing.svg');
86 | }
87 | &--draft {
88 | background-image: url('../icons/draft.svg');
89 | }
90 | &--effects {
91 | background-image: url('../icons/effects.svg');
92 | }
93 | &--ellipses {
94 | background-image: url('../icons/ellipses.svg');
95 | }
96 | &--eyedropper {
97 | background-image: url('../icons/eyedropper.svg');
98 | }
99 | &--forward {
100 | background-image: url('../icons/forward.svg');
101 | }
102 | &--frame {
103 | background-image: url('../icons/frame.svg');
104 | }
105 | &--group {
106 | background-image: url('../icons/group.svg');
107 | }
108 | &--heart {
109 | background-image: url('../icons/heart.svg');
110 | }
111 | &--heart-fill {
112 | background-image: url('../icons/heart-fill.svg');
113 | }
114 | &--hidden {
115 | background-image: url('../icons/hidden.svg');
116 | }
117 | &--horizontal-padding {
118 | background-image: url('../icons/horizontal-padding.svg');
119 | }
120 | &--hyperlink {
121 | background-image: url('../icons/hyperlink.svg');
122 | }
123 | &--image {
124 | background-image: url('../icons/image.svg');
125 | }
126 | &--instance {
127 | background-image: url('../icons/instance.svg');
128 | }
129 | &--key {
130 | background-image: url('../icons/key.svg');
131 | }
132 | &--align-horizontal-centers {
133 | background-image: url('../icons/layout-align-horizontal-centers.svg');
134 | }
135 | &--align-vertical-centers {
136 | background-image: url('../icons/layout-align-vertical-centers.svg');
137 | }
138 | &--align-left {
139 | background-image: url('../icons/layout-align-left.svg');
140 | }
141 | &--align-top {
142 | background-image: url('../icons/layout-align-top.svg');
143 | }
144 | &--align-right {
145 | background-image: url('../icons/layout-align-right.svg');
146 | }
147 | &--align-bottom {
148 | background-image: url('../icons/layout-align-bottom.svg');
149 | }
150 | &--layout-grid-columns {
151 | background-image: url('../icons/layout-grid-columns.svg');
152 | }
153 | &--layout-grid-rows {
154 | background-image: url('../icons/layout-grid-rows.svg');
155 | }
156 | &--layout-grid-uniform {
157 | background-image: url('../icons/layout-grid-uniform.svg');
158 | }
159 | &--library {
160 | background-image: url('../icons/library.svg');
161 | }
162 | &--link-broken {
163 | background-image: url('../icons/link-broken.svg');
164 | }
165 | &--link-connected {
166 | background-image: url('../icons/link-connected.svg');
167 | }
168 | &--list-detailed {
169 | background-image: url('../icons/list-detailed.svg');
170 | }
171 | &--list-tile {
172 | background-image: url('../icons/list-tile.svg');
173 | }
174 | &--list {
175 | background-image: url('../icons/list.svg');
176 | }
177 | &--lock-off {
178 | background-image: url('../icons/lock-off.svg');
179 | }
180 | &--lock-on {
181 | background-image: url('../icons/lock-on.svg');
182 | }
183 | &--minus {
184 | background-image: url('../icons/minus.svg');
185 | }
186 | &--play {
187 | background-image: url('../icons/play.svg');
188 | }
189 | &--plus {
190 | background-image: url('../icons/plus.svg');
191 | }
192 | &--random {
193 | background-image: url('../icons/random.svg');
194 | }
195 | &--recent {
196 | background-image: url('../icons/recent.svg');
197 | }
198 | &--resize-to-fit {
199 | background-image: url('../icons/resize-to-fit.svg');
200 | }
201 | &--resolve-filled {
202 | background-image: url('../icons/resolve-filled.svg');
203 | }
204 | &--resolve {
205 | background-image: url('../icons/resolve.svg');
206 | }
207 | &--reverse {
208 | background-image: url('../icons/reverse.svg');
209 | }
210 | &--search-large {
211 | background-image: url('../icons/search-large.svg');
212 | }
213 | &--search {
214 | background-image: url('../icons/search.svg');
215 | }
216 | &--settings {
217 | background-image: url('../icons/settings.svg');
218 | }
219 | &--share {
220 | background-image: url('../icons/share.svg');
221 | }
222 | &--smiley {
223 | background-image: url('../icons/smiley.svg');
224 | }
225 | &--sort-alpha-asc {
226 | background-image: url('../icons/sort-alpha-asc.svg');
227 | }
228 | &--sort-alpha-dsc {
229 | background-image: url('../icons/sort-alpha-dsc.svg');
230 | }
231 | &--sort-top-bottom {
232 | background-image: url('../icons/sort-top-bottom.svg');
233 | }
234 | &--spacing {
235 | background-image: url('../icons/spacing.svg');
236 | }
237 | &--spinner {
238 | background-image: url('../icons/spinner.svg');
239 | }
240 | &--star-off {
241 | background-image: url('../icons/star-off.svg');
242 | }
243 | &--star-on {
244 | background-image: url('../icons/star-on.svg');
245 | }
246 | &--stroke-weight {
247 | background-image: url('../icons/stroke-weight.svg');
248 | }
249 | &--styles {
250 | background-image: url('../icons/styles.svg');
251 | }
252 | &--swap {
253 | background-image: url('../icons/swap.svg');
254 | }
255 | &--theme {
256 | background-image: url('../icons/theme.svg');
257 | }
258 | &--tidy-up-grid {
259 | background-image: url('../icons/tidy-up-grid.svg');
260 | }
261 | &--tidy-up-list-horizontal {
262 | background-image: url('../icons/tidy-up-list-horizontal.svg');
263 | }
264 | &--tidy-up-list-vertical {
265 | background-image: url('../icons/tidy-up-list-vertical.svg');
266 | }
267 | &--timer {
268 | background-image: url('../icons/timer.svg');
269 | }
270 | &--trash {
271 | background-image: url('../icons/trash.svg');
272 | }
273 | &--tooltip {
274 | background-image: url('../icons/tooltip.svg');
275 | }
276 | &--tooltip-inverse {
277 | background-image: url('../icons/tooltip-inverse.svg');
278 | }
279 | &--vertical-padding {
280 | background-image: url('../icons/vertical-padding.svg');
281 | }
282 | &--visible {
283 | background-image: url('../icons/visible.svg');
284 | }
285 | &--warning-large {
286 | background-image: url('../icons/warning-large.svg');
287 | }
288 | &--warning {
289 | background-image: url('../icons/warning.svg');
290 | }
291 | }
292 |
--------------------------------------------------------------------------------
/src/Demo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Button
6 |
7 |
13 |
14 |
25 |
26 |
27 | Checkbox
28 |
29 | {{ checkboxModel ? 'Checked' : 'Unchecked' }}
30 |
31 | Disabled
32 |
33 |
34 |
35 | Disclosure
36 |
37 |
39 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
40 | Sed fringilla diam non ligula ultrices malesuada. Nunc
41 | laoreet posuere augue, et iaculis sem efficitur sit
42 | amet. Nulla ornare porttitor eleifend. Aliquam venenatis
43 | laoreet sapien, non tincidunt neque placerat vitae.
44 | Phasellus euismod dolor lorem, vitae cursus enim
45 | dignissim et. Ut tempor ipsum lorem, ut imperdiet lectus
46 | ornare quis. Suspendisse suscipit auctor ex tincidunt
47 | auctor. Mauris in dui mauris.
48 |
49 |
50 |
51 | {{ checkboxModel ? 'Checked' : 'Unchecked' }}
52 |
53 | {{
54 | toggleModel ? 'On' : 'Off'
55 | }}
56 |
61 |
62 |
63 |
64 |
68 |
69 |
70 | Icon
71 |
72 |
77 |
78 |
79 |
80 | Icon Button
81 |
82 |
90 |
91 |
92 |
100 |
101 |
102 | Num Input
103 |
122 |
123 |
124 |
125 | Label
126 | A short label
128 | A slightly longer label
129 |
130 |
131 |
153 |
154 |
158 |
159 |
160 | Toggle
161 | {{
163 | toggleModel ? 'Toggle on' : 'Toggle off'
164 | }}
165 | {{
166 | toggleModel ? 'Toggle on' : 'Toggle off'
167 | }}
168 |
169 |
170 |
171 | Text
172 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
175 | Sed fringilla diam non ligula ultrices malesuada. Nunc
176 | laoreet posuere augue, et iaculis sem efficitur sit amet.
177 | Nulla ornare porttitor eleifend. Aliquam venenatis laoreet
178 | sapien, non tincidunt neque placerat vitae. Phasellus
179 | euismod dolor lorem, vitae cursus enim dignissim et. Ut
180 | tempor ipsum lorem, ut imperdiet lectus ornare quis.
181 | Suspendisse suscipit auctor ex tincidunt auctor. Mauris in
182 | dui mauris.
184 |
185 |
186 |
187 | Textarea
188 |
189 |
190 |
191 |
192 | Title
193 | A short title
195 | A slightly longer title
196 |
197 |
198 |
199 | Tooltip
200 | This is a tooltip. This is a tooltip. This is a tooltip.
202 | This is a tooltip.
204 | This is a tooltip. This is a tooltip.
207 | This is a tooltip.
208 | This is a tooltip.
209 | This is a tooltip.
210 | This is a tooltip.
211 | This is a tooltip.
212 | This is a tooltip.
213 |
214 |
215 |
217 |
218 |
246 |
247 |
287 |
--------------------------------------------------------------------------------
/src/components/NumInput/NumInput.vue:
--------------------------------------------------------------------------------
1 |
2 |
42 |
43 |
44 |
171 |
172 |
315 |
--------------------------------------------------------------------------------
/src/assets/style/_util.scss:
--------------------------------------------------------------------------------
1 | /* Padding */
2 | .p-xxxsmall {
3 | padding: var(--size-xxxsmall) !important;
4 | }
5 | .p-xxsmall {
6 | padding: var(--size-xxsmall) !important;
7 | }
8 | .p-xsmall {
9 | padding: var(--size-xsmall) !important;
10 | }
11 | .p-small {
12 | padding: var(--size-small) !important;
13 | }
14 | .p-medium {
15 | padding: var(--size-medium) !important;
16 | }
17 | .p-large {
18 | padding: var(--size-large) !important;
19 | }
20 | .p-xlarge {
21 | padding: var(--size-xlarge) !important;
22 | }
23 | .p-xxlarge {
24 | padding: var(--size-xxlarge) !important;
25 | }
26 | .p-huge {
27 | padding: var(--size-xxxlarge) !important;
28 | }
29 |
30 | // padding top
31 | .pt-xxxsmall {
32 | padding-top: var(--size-xxxsmall) !important;
33 | }
34 | .pt-xxsmall {
35 | padding-top: var(--size-xxsmall) !important;
36 | }
37 | .pt-xsmall {
38 | padding-top: var(--size-xsmall) !important;
39 | }
40 | .pt-small {
41 | padding-top: var(--size-small) !important;
42 | }
43 | .pt-medium {
44 | padding-top: var(--size-medium) !important;
45 | }
46 | .pt-large {
47 | padding-top: var(--size-large) !important;
48 | }
49 | .pt-xlarge {
50 | padding-top: var(--size-xlarge) !important;
51 | }
52 | .pt-xxlarge {
53 | padding-top: var(--size-xxlarge) !important;
54 | }
55 | .pt-huge {
56 | padding-top: var(--size-xxxlarge) !important;
57 | }
58 |
59 | // padding right
60 | .pr-xxxsmall {
61 | padding-right: var(--size-xxxsmall) !important;
62 | }
63 | .pr-xxsmall {
64 | padding-right: var(--size-xxsmall) !important;
65 | }
66 | .pr-xsmall {
67 | padding-right: var(--size-xsmall) !important;
68 | }
69 | .pr-small {
70 | padding-right: var(--size-small) !important;
71 | }
72 | .pr-medium {
73 | padding-right: var(--size-medium) !important;
74 | }
75 | .pr-large {
76 | padding-right: var(--size-large) !important;
77 | }
78 | .pr-xlarge {
79 | padding-right: var(--size-xlarge) !important;
80 | }
81 | .pr-xxlarge {
82 | padding-right: var(--size-xxlarge) !important;
83 | }
84 | .pr-huge {
85 | padding-right: var(--size-xxxlarge) !important;
86 | }
87 |
88 | // padding bottom
89 | .pb-xxxsmall {
90 | padding-bottom: var(--size-xxxsmall) !important;
91 | }
92 | .pb-xxsmall {
93 | padding-bottom: var(--size-xxsmall) !important;
94 | }
95 | .pb-xsmall {
96 | padding-bottom: var(--size-xsmall) !important;
97 | }
98 | .pb-small {
99 | padding-bottom: var(--size-small) !important;
100 | }
101 | .pb-medium {
102 | padding-bottom: var(--size-medium) !important;
103 | }
104 | .pb-large {
105 | padding-bottom: var(--size-large) !important;
106 | }
107 | .pb-xlarge {
108 | padding-bottom: var(--size-xlarge) !important;
109 | }
110 | .pb-xxlarge {
111 | padding-bottom: var(--size-xxlarge) !important;
112 | }
113 | .pb-huge {
114 | padding-bottom: var(--size-xxxlarge) !important;
115 | }
116 |
117 | // padding left
118 | .pl-xxxsmall {
119 | padding-left: var(--size-xxxsmall) !important;
120 | }
121 | .pl-xxsmall {
122 | padding-left: var(--size-xxsmall) !important;
123 | }
124 | .pl-xsmall {
125 | padding-left: var(--size-xsmall) !important;
126 | }
127 | .pl-small {
128 | padding-left: var(--size-small) !important;
129 | }
130 | .pl-medium {
131 | padding-left: var(--size-medium) !important;
132 | }
133 | .pl-large {
134 | padding-left: var(--size-large) !important;
135 | }
136 | .pl-xlarge {
137 | padding-left: var(--size-xlarge) !important;
138 | }
139 | .pl-xxlarge {
140 | padding-left: var(--size-xxlarge) !important;
141 | }
142 | .pl-huge {
143 | padding-left: var(--size-xxxlarge) !important;
144 | }
145 |
146 | /* Margin */
147 | .m-xxxsmall {
148 | margin: var(--size-xxxsmall) !important;
149 | }
150 | .m-xxsmall {
151 | margin: var(--size-xxsmall) !important;
152 | }
153 | .m-xsmall {
154 | margin: var(--size-xsmall) !important;
155 | }
156 | .m-small {
157 | margin: var(--size-small) !important;
158 | }
159 | .m-medium {
160 | margin: var(--size-medium) !important;
161 | }
162 | .m-large {
163 | margin: var(--size-large) !important;
164 | }
165 | .m-xlarge {
166 | margin: var(--size-xlarge) !important;
167 | }
168 | .m-xxlarge {
169 | margin: var(--size-xxlarge) !important;
170 | }
171 | .m-huge {
172 | margin: var(--size-xxxlarge) !important;
173 | }
174 |
175 | // margin top
176 | .mt-xxxsmall {
177 | margin-top: var(--size-xxxsmall) !important;
178 | }
179 | .mt-xxsmall {
180 | margin-top: var(--size-xxsmall) !important;
181 | }
182 | .mt-xsmall {
183 | margin-top: var(--size-xsmall) !important;
184 | }
185 | .mt-small {
186 | margin-top: var(--size-small) !important;
187 | }
188 | .mt-medium {
189 | margin-top: var(--size-medium) !important;
190 | }
191 | .mt-large {
192 | margin-top: var(--size-large) !important;
193 | }
194 | .mt-xlarge {
195 | margin-top: var(--size-xlarge) !important;
196 | }
197 | .mt-xxlarge {
198 | margin-top: var(--size-xxlarge) !important;
199 | }
200 | .mt-huge {
201 | margin-top: var(--size-xxxlarge) !important;
202 | }
203 |
204 | // margin right
205 | .mr-xxxsmall {
206 | margin-right: var(--size-xxxsmall) !important;
207 | }
208 | .mr-xxsmall {
209 | margin-right: var(--size-xxsmall) !important;
210 | }
211 | .mr-xsmall {
212 | margin-right: var(--size-xsmall) !important;
213 | }
214 | .mr-small {
215 | margin-right: var(--size-small) !important;
216 | }
217 | .mr-medium {
218 | margin-right: var(--size-medium) !important;
219 | }
220 | .mr-large {
221 | margin-right: var(--size-large) !important;
222 | }
223 | .mr-xlarge {
224 | margin-right: var(--size-xlarge) !important;
225 | }
226 | .mr-xxlarge {
227 | margin-right: var(--size-xxlarge) !important;
228 | }
229 | .mr-huge {
230 | margin-right: var(--size-xxxlarge) !important;
231 | }
232 |
233 | /* margin bottom */
234 | .mb-xxxsmall {
235 | margin-bottom: var(--size-xxxsmall) !important;
236 | }
237 | .mb-xxsmall {
238 | margin-bottom: var(--size-xxsmall) !important;
239 | }
240 | .mb-xsmall {
241 | margin-bottom: var(--size-xsmall) !important;
242 | }
243 | .mb-small {
244 | margin-bottom: var(--size-small) !important;
245 | }
246 | .mb-medium {
247 | margin-bottom: var(--size-medium) !important;
248 | }
249 | .mb-large {
250 | margin-bottom: var(--size-large) !important;
251 | }
252 | .mb-xlarge {
253 | margin-bottom: var(--size-xlarge) !important;
254 | }
255 | .mb-xxlarge {
256 | margin-bottom: var(--size-xxlarge) !important;
257 | }
258 | .mb-huge {
259 | margin-bottom: var(--size-xxxlarge) !important;
260 | }
261 |
262 | /* margin left */
263 | .ml-xxxsmall {
264 | margin-left: var(--size-xxxsmall) !important;
265 | }
266 | .ml-xxsmall {
267 | margin-left: var(--size-xxsmall) !important;
268 | }
269 | .ml-xsmall {
270 | margin-left: var(--size-xsmall) !important;
271 | }
272 | .ml-small {
273 | margin-left: var(--size-small) !important;
274 | }
275 | .ml-medium {
276 | margin-left: var(--size-medium) !important;
277 | }
278 | .ml-large {
279 | margin-left: var(--size-large) !important;
280 | }
281 | .ml-xlarge {
282 | margin-left: var(--size-xlarge) !important;
283 | }
284 | .ml-xxlarge {
285 | margin-left: var(--size-xxlarge) !important;
286 | }
287 | .ml-huge {
288 | margin-left: var(--size-xxxlarge) !important;
289 | }
290 |
291 | /* Layout utilities */
292 | .hidden {
293 | display: none !important;
294 | }
295 | .inline {
296 | display: inline !important;
297 | }
298 | .block {
299 | display: block !important;
300 | }
301 | .inline-block {
302 | display: inline-block !important;
303 | }
304 | .flex {
305 | display: flex !important;
306 | }
307 | .inline-flex {
308 | display: inline-flex !important;
309 | }
310 |
311 | // direction
312 | .row {
313 | flex-direction: row !important;
314 | }
315 | .row-reverse {
316 | flex-direction: row-reverse !important;
317 | }
318 | .column {
319 | flex-direction: column !important;
320 | }
321 | .column-reverse {
322 | flex-direction: column-reverse !important;
323 | }
324 |
325 | // wrap
326 | .flex-wrap {
327 | flex-wrap: wrap !important;
328 | }
329 | .flex-wrap-reverse {
330 | flex-wrap: wrap-reverse !important;
331 | }
332 | .flex-no-wrap {
333 | flex-wrap: nowrap !important;
334 | }
335 |
336 | // grow
337 | .flex-grow {
338 | flex-grow: 1 !important;
339 | }
340 | .flex-no-grow {
341 | flex-grow: 0 !important;
342 | }
343 |
344 | // shrink
345 | .flex-shrink {
346 | flex-shrink: 1 !important;
347 | }
348 | .flex-no-shrink {
349 | flex-shrink: 0 !important;
350 | }
351 |
352 | // justify
353 | .justify-content-start {
354 | justify-content: flex-start !important;
355 | }
356 | .justify-content-end {
357 | justify-content: flex-end !important;
358 | }
359 | .justify-content-center {
360 | justify-content: center !important;
361 | }
362 | .justify-content-between {
363 | justify-content: space-between !important;
364 | }
365 | .justify-content-around {
366 | justify-content: space-around !important;
367 | }
368 |
369 | // align
370 | .align-items-start {
371 | align-items: flex-start !important;
372 | }
373 | .align-items-end {
374 | align-items: flex-end !important;
375 | }
376 | .align-items-center {
377 | align-items: center !important;
378 | }
379 | .align-items-stretch {
380 | align-items: stretch !important;
381 | }
382 |
383 | .align-content-start {
384 | align-content: flex-start !important;
385 | }
386 | .align-content-end {
387 | align-content: flex-end !important;
388 | }
389 | .align-content-center {
390 | align-content: center !important;
391 | }
392 | .align-content-stretch {
393 | align-content: stretch !important;
394 | }
395 |
396 | .align-self-start {
397 | align-self: flex-start !important;
398 | }
399 | .align-self-end {
400 | align-items: flex-end !important;
401 | }
402 | .align-self-center {
403 | align-self: center !important;
404 | }
405 | .align-self-stretch {
406 | align-self: stretch !important;
407 | }
408 |
--------------------------------------------------------------------------------
/src/components/Select/Select.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
22 |
51 |
53 |
54 |
147 |
148 |
351 |
--------------------------------------------------------------------------------
3 |