├── .gitmodules
├── .npmignore
├── README.md
├── docs
    └── en
    │   ├── Dropdown.md
    │   └── Modal.md
├── index.js
├── package.json
└── src
    ├── collections
        ├── Form.vue
        ├── Grid.vue
        ├── form
        │   └── Field.vue
        └── grid
        │   ├── Column.vue
        │   └── Row.vue
    ├── elements
        ├── Input.vue
        └── Label.vue
    ├── mixins
        ├── collections.js
        ├── commons
        │   ├── align.js
        │   ├── arrai.js
        │   ├── centered.js
        │   ├── column.js
        │   ├── constants.js
        │   ├── equal-width.js
        │   ├── float.js
        │   ├── icon.js
        │   ├── inverted.js
        │   ├── klass.js
        │   ├── props
        │   │   ├── random.js
        │   │   └── type.js
        │   ├── sizes
        │   │   ├── eight.js
        │   │   └── six.js
        │   ├── states
        │   │   ├── disabled.js
        │   │   ├── error.js
        │   │   ├── focus.js
        │   │   ├── loading.js
        │   │   ├── success.js
        │   │   └── warning.js
        │   └── width.js
        ├── form.js
        ├── grid.js
        ├── index.js
        └── modules.js
    └── modules
        ├── Checkbox.vue
        ├── Dropdown.vue
        └── Modal.vue


/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "src/mixins/commons/input"]
2 | 	path = src/mixins/commons/input
3 | 	url = https://gist.github.com/ebc1d0a4c2b61fb8e5af27ee6fd43465.git
4 | [submodule "src/mixins/commons/click-outside"]
5 | 	path = src/mixins/commons/click-outside
6 | 	url = https://gist.github.com/435abf4b203571cba4c8ca1884997f9c.git
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | docs/
2 | README.md
3 | *.new
4 | *.bkp
5 | *.old.*
6 | *.old


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Semantic UI's Components
  2 | 
  3 | Components and mixins to use with Vue 2
  4 | 
  5 | ## Installation
  6 | 
  7 | ```bash
  8 | $ npm install semantic-ui-vue2
  9 | ```
 10 | 
 11 | Include Semantic UI's CSS in your HTML. See [official docs](http://semantic-ui.com/introduction/getting-started.html#include-in-your-html).
 12 | 
 13 | ```html
 14 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.7/semantic.min.css">
 15 | ```
 16 | 
 17 | ## Usage
 18 | 
 19 | ### Imports
 20 | 
 21 | Import the global mixin to use all the components. See [example](#example) below.
 22 | 
 23 | #### Components
 24 | 
 25 | Import individual components.
 26 | 
 27 | - `Grid` – component
 28 | - `Row` – component
 29 | - `Column` – component
 30 | - `Checkbox` – component
 31 | - `Dropdown` – component
 32 | - `Input` – component
 33 | - `Label` – component
 34 | - `Form` – component
 35 | - `Field` – component
 36 | 
 37 | ```javascript
 38 | import {ComponentName} from 'semantic-ui-vue2'
 39 | 
 40 | export default {
 41 |     components: {
 42 |         'component-name': ComponentName,
 43 |                 …
 44 |     },
 45 |     …
 46 | }
 47 | ```
 48 | 
 49 | #### Collections
 50 | 
 51 | Mixins to import related components at once
 52 | 
 53 | - `Grid` – `ui-grid`, `ui-row`, `ui-column`
 54 | - `Form` – `ui-form`, `ui-field`
 55 | 
 56 | ```javascript
 57 | import {Collections} from 'semantic-ui-vue2'
 58 | 
 59 | export default {
 60 |     mixins: [Collections.CollectionName]
 61 |     …
 62 | }
 63 | ```
 64 | 
 65 | ### Example
 66 | 
 67 | `App.vue`:
 68 | 
 69 | ```html
 70 | <template lang="html">
 71 |     <ui-grid container>
 72 |         <ui-row>
 73 |             <ui-column>
 74 |                 Lorem ipsum dolor sit amet
 75 |             </ui-column>
 76 |         </ui-row>
 77 |     </ui-grid>
 78 | </template>
 79 | 
 80 | <script>
 81 | import {Mixin} from 'semantic-ui-vue2'
 82 | 
 83 | export default {
 84 |     mixins: [Mixin]
 85 | }
 86 | </script>
 87 | ```
 88 | 
 89 | Result:
 90 | 
 91 | ```html
 92 | <div class="ui grid container">
 93 |     <div class="row">
 94 |         <div class="column">
 95 |             Lorem ipsum dolor sit amet
 96 |         </div>
 97 |     </div>
 98 | </div>
 99 | ```
100 | 


--------------------------------------------------------------------------------
/docs/en/Dropdown.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/almino/semantic-ui-vue2/ae1bb10adf94dd2505976d470477a8d30300950c/docs/en/Dropdown.md


--------------------------------------------------------------------------------
/docs/en/Modal.md:
--------------------------------------------------------------------------------
 1 | # Modal
 2 | 
 3 | A modal displays content that temporarily blocks interactions with the main view of a site
 4 | 
 5 | ## Requirements
 6 | 
 7 | - `semantic/components/modal[.min].css` or `semantic/src/definitions/modules/modal.less`
 8 | - `semantic/components/transition[.min].css` or `semantic/src/definitions/modules/transition.less`
 9 | 
10 | ## Attributes
11 | 
12 | Type |Attribute | Default | Description
13 | -----|----------|---------|------------
14 | `Boolean` | `basic` | `false` | A modal can reduce its complexity
15 | `String` | `header` | `null` | A modal can have a header
16 | `String` | `image` | `null` | A modal can contain image content
17 | `String` or `Number` | `size` | `null` | A modal can vary in size
18 | `Boolean` | `active` | `false` | An active modal is visible on the page
19 | `Boolean` | `closable` | `false` | Setting to false will not allow you to close the modal by clicking on the dimmer
20 | `String` | `transition` | `'scale'` | Named transition to use when animating menu in and out, full list can be found in [ui transitions](https://semantic-ui.com/modules/transition.html) docs.
21 | `Number` | `duration` | `400` | Duration of animation
22 | `Boolean` | `inverted` | `false` | A modal can be inverted
23 | 
24 | 
25 | ## Events
26 | 
27 | * `visible` &ndash; Is emmited after a modal has finished showing animating.
28 | * `hidden` &ndash; 	Is emmited after a modal has finished hiding animation.
29 | * `hide` &ndash; Is emmited after a modal starts to hide.
30 | * `show` &ndash; Is emmited when a modal starts to show.
31 | 
32 | ## Methods
33 | 
34 | * `hide` &ndash; Hides the modal
35 | * `show` &ndash; 	Shows the modal
36 | * `toggle` &ndash; Toggles the modal
37 | 
38 | ## Slots
39 | 
40 | * default &ndash; A modal can contain content
41 | * `header` &ndash; A modal can have a header
42 | * `actions` &ndash; A modal can contain a row of actions
43 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import Grid from './src/collections/Grid.vue'
 2 | import Row from './src/collections/grid/Row.vue'
 3 | import Column from './src/collections/grid/Column.vue'
 4 | import Input from './src/elements/Input.vue'
 5 | import Label from './src/elements/Label.vue'
 6 | 
 7 | import Form from './src/collections/Form.vue'
 8 | import Field from './src/collections/form/Field.vue'
 9 | 
10 | import Checkbox from './src/modules/Checkbox.vue'
11 | import Dropdown from './src/modules/Dropdown.vue'
12 | import Modal from './src/modules/Modal.vue'
13 | 
14 | import Mixin from './src/mixins/'
15 | import Collections from './src/mixins/collections.js'
16 | import Modules from './src/mixins/modules.js'
17 | 
18 | export {
19 |     Mixin,
20 |     Collections,
21 |     Modules,
22 |     Grid,
23 |     Row,
24 |     Column,
25 |     Input,
26 |     Label,
27 |     Form,
28 |     Field,
29 |     Checkbox,
30 |     Dropdown,
31 |     Modal,
32 | }
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "semantic-ui-vue2",
 3 |   "version": "2.4.2",
 4 |   "description": "Semantic UI Integration for Vue 2",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/almino/semantic-ui-vue2.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "vue2",
16 |     "semantic-ui"
17 |   ],
18 |   "author": "Almino Melo <almino.melo@gmail.com>",
19 |   "license": "ISC",
20 |   "bugs": {
21 |     "url": "https://github.com/almino/semantic-ui-vue2/issues"
22 |   },
23 |   "homepage": "https://github.com/almino/semantic-ui-vue2#readme"
24 | }
25 | 


--------------------------------------------------------------------------------
/src/collections/Form.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <form v-bind:class="['ui', getEqualWidthClasses(), getSizeClasses(),
 3 |         { 'loading' : loading }, { 'inverted' : inverted }, 'form',
 4 |         { 'success' : success }, { 'error' : error }, { 'warning' : warning }]">
 5 |         <slot></slot>
 6 |     </form>
 7 | </template>
 8 | 
 9 | <script>
10 | import Loading from '../mixins/commons/states/loading.js'
11 | import Success from '../mixins/commons/states/success.js'
12 | import Error from '../mixins/commons/states/error.js'
13 | import Warning from '../mixins/commons/states/warning.js'
14 | import Size from '../mixins/commons/sizes/eight.js'
15 | import EqualWidth from '../mixins/commons/equal-width.js'
16 | import Inverted from '../mixins/commons/inverted.js'
17 | 
18 | export default {
19 |     mixins: [Loading, Success, Error, Warning, Size, EqualWidth, Inverted],
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/collections/Grid.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div v-bind:class="['ui', getFloatClasses(), getAlignClasses(), getEqualWidthClasses(), getColumnClasses(), { 'centered' : centered }, 'grid', { 'container' : container }]">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import EqualWidth from '../mixins/commons/equal-width.js'
 9 | import Column from '../mixins/commons/column.js'
10 | import Align from '../mixins/commons/align.js'
11 | import Float from '../mixins/commons/float.js'
12 | import Centered from '../mixins/commons/centered.js'
13 | 
14 | export default {
15 |     mixins: [EqualWidth, Column, Align, Float, Centered],
16 |     props: {
17 |         container: {
18 |             type: Boolean,
19 |             default: false
20 |         }
21 |     },
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/collections/form/Field.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <div v-bind:class="[getWidthClasses(), { 'inline' : inline },
 3 |         { 'required' : required }, { 'disabled' : disabled }, 'field',
 4 |         { 'error' : error }]">
 5 |         <label v-bind:for="id">
 6 |             {{ label }}
 7 |             <slot name="label"></slot>
 8 |         </label>
 9 |         <input
10 |             v-bind:id="id"
11 |             v-bind:accept="accept"
12 |             v-bind:alt="alt"
13 |             v-bind:autocomplete="autocomplete"
14 |             v-bind:autofocus="autofocus"
15 |             v-bind:checked="checked"
16 |             v-bind:dirname="dirname"
17 |             v-bind:disabled="disabled"
18 |             v-bind:form="form"
19 |             v-bind:formaction="formaction"
20 |             v-bind:formenctype="formenctype"
21 |             v-bind:formmethod="formmethod"
22 |             v-bind:formnovalidate="formnovalidate"
23 |             v-bind:formtarget="formtarget"
24 |             v-bind:list="list"
25 |             v-bind:max="max"
26 |             v-bind:maxlength="maxlength"
27 |             v-bind:min="min"
28 |             v-bind:multiple="multiple"
29 |             v-bind:name="name"
30 |             v-bind:pattern="pattern"
31 |             v-bind:placeholder="placeholder"
32 |             v-bind:readonly="readonly"
33 |             v-bind:required="required"
34 |             v-bind:src="src"
35 |             v-bind:step="step"
36 |             v-bind:type="type"
37 |             v-bind:value="value"
38 |             v-on:keydown="emitKeyDown"
39 |             v-on:keypress="emitKeyPress"
40 |             v-on:keyup="emitKeyUp"
41 |             v-on:mouseenter="emitMouseEnter"
42 |             v-on:mouseover="emitMouseOver"
43 |             v-on:mousemove="emitMouseMove"
44 |             v-on:mousedown="emitMouseDown"
45 |             v-on:mouseup="emitMouseUp"
46 |             v-on:click="emitClick"
47 |             v-on:dblclick="emitDoubleClick"
48 |             v-on:wheel="emitWheel"
49 |             v-on:mouseleave="emitMouseLeave"
50 |             v-on:mouseout="emitMouseOut"
51 |             v-on:pointerlockchange="emitPointerLockChange"
52 |             v-on:pointerlockerror="emitPointerLockError"
53 |             v-on:blur="emitBlur"
54 |             v-on:change="emitChange($event.target.value)"
55 |             v-on:contextmenu="emitContextMenu"
56 |             v-on:focus="emitFocus"
57 |             v-on:input="emitInput($event.target.value)"
58 |             v-on:invalid="emitInvalid"
59 |             v-on:reset="emitReset"
60 |             v-on:search="emitSearch"
61 |             v-on:select="emitSelect"
62 |             v-on:submit="emitSubmit"
63 |             ref="input" />
64 |     </div>
65 | </template>
66 | 
67 | <script>
68 | import Input from '../../mixins/commons/input/'
69 | import RandomProp from '../../mixins/commons/props/random.js'
70 | import Error from '../../mixins/commons/states/error.js'
71 | import Width from '../../mixins/commons/width.js'
72 | 
73 | export default {
74 |     mixins: [Input, Error, Width],
75 |     props: {
76 |         label: {
77 |             type: String,
78 |         },
79 |         id: RandomProp,
80 |         inline: {
81 |             type: Boolean,
82 |             required: false,
83 |             default: false,
84 |         },
85 |     }
86 | }
87 | </script>
88 | 


--------------------------------------------------------------------------------
/src/collections/grid/Column.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <div v-bind:class="[getFloatClasses(), getAlignClasses(), getWidthClasses(), 'column']">
 3 |       <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Width from '../../mixins/commons/width.js'
 9 | import Align from '../../mixins/commons/align.js'
10 | import Float from '../../mixins/commons/float.js'
11 | 
12 | export default {
13 |     mixins: [Width, Align, Float],
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/collections/grid/Row.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <div v-bind:class="[getFloatClasses(), getAlignClasses(),getEqualWidthClasses(), getColumnClasses(), { 'centered' : centered }, 'row']">
 3 |       <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import EqualWidth from '../../mixins/commons/equal-width.js'
 9 | import Column from '../../mixins/commons/column.js'
10 | import Align from '../../mixins/commons/align.js'
11 | import Float from '../../mixins/commons/float.js'
12 | import Centered from '../../mixins/commons/centered.js'
13 | 
14 | export default {
15 |     mixins: [EqualWidth, Column, Align, Float, Centered],
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/elements/Input.vue:
--------------------------------------------------------------------------------
  1 | <template lang="html">
  2 |     <div v-bind:class="['ui', getSlotsClasses(), getIconClasses(), getSizeClasses(),
  3 |         { 'fluid' : fluid }, { 'inverted' : inverted },
  4 |         { 'transparent' : transparent }, { 'disabled' : disabled }, 'input',
  5 |         { 'loading' : loading }, { 'error' : error }]">
  6 |         <slot name="left-label"></slot>
  7 |         <slot name="left-action"></slot>
  8 |         <input
  9 |             v-bind:id="id"
 10 |             v-bind:accept="accept"
 11 |             v-bind:alt="alt"
 12 |             v-bind:autocomplete="autocomplete"
 13 |             v-bind:autofocus="autofocus"
 14 |             v-bind:checked="checked"
 15 |             v-bind:dirname="dirname"
 16 |             v-bind:disabled="disabled"
 17 |             v-bind:form="form"
 18 |             v-bind:formaction="formaction"
 19 |             v-bind:formenctype="formenctype"
 20 |             v-bind:formmethod="formmethod"
 21 |             v-bind:formnovalidate="formnovalidate"
 22 |             v-bind:formtarget="formtarget"
 23 |             v-bind:list="list"
 24 |             v-bind:max="max"
 25 |             v-bind:maxlength="maxlength"
 26 |             v-bind:min="min"
 27 |             v-bind:multiple="multiple"
 28 |             v-bind:name="name"
 29 |             v-bind:pattern="pattern"
 30 |             v-bind:placeholder="placeholder"
 31 |             v-bind:readonly="readonly"
 32 |             v-bind:required="required"
 33 |             v-bind:src="src"
 34 |             v-bind:step="step"
 35 |             v-bind:type="type"
 36 |             v-bind:value="value"
 37 |             v-on:keydown="emitKeyDown"
 38 |             v-on:keypress="emitKeyPress"
 39 |             v-on:keyup="emitKeyUp"
 40 |             v-on:mouseenter="emitMouseEnter"
 41 |             v-on:mouseover="emitMouseOver"
 42 |             v-on:mousemove="emitMouseMove"
 43 |             v-on:mousedown="emitMouseDown"
 44 |             v-on:mouseup="emitMouseUp"
 45 |             v-on:click="emitClick"
 46 |             v-on:dblclick="emitDoubleClick"
 47 |             v-on:wheel="emitWheel"
 48 |             v-on:mouseleave="emitMouseLeave"
 49 |             v-on:mouseout="emitMouseOut"
 50 |             v-on:pointerlockchange="emitPointerLockChange"
 51 |             v-on:pointerlockerror="emitPointerLockError"
 52 |             v-on:blur="emitBlur"
 53 |             v-on:change="emitChange($event.target.value)"
 54 |             v-on:contextmenu="emitContextMenu"
 55 |             v-on:focus="emitFocus"
 56 |             v-on:input="emitInput($event.target.value)"
 57 |             v-on:invalid="emitInvalid"
 58 |             v-on:reset="emitReset"
 59 |             v-on:search="emitSearch"
 60 |             v-on:select="emitSelect"
 61 |             v-on:submit="emitSubmit"
 62 |             ref="input" />
 63 |         <slot name="right-label"></slot>
 64 |         <slot name="right-action"></slot>
 65 |         <i v-bind:class="[dIcon.value, 'icon']" v-if="dIcon.value"></i>
 66 |     </div>
 67 | </template>
 68 | 
 69 | <script>
 70 | import Constants from '../mixins/commons/constants.js'
 71 | import Input from '../mixins/commons/input/'
 72 | import RandomProp from '../mixins/commons/props/random.js'
 73 | import Loading from '../mixins/commons/states/loading.js'
 74 | import Error from '../mixins/commons/states/error.js'
 75 | import Icon from '../mixins/commons/icon.js'
 76 | import Inverted from '../mixins/commons/inverted.js'
 77 | import Size from '../mixins/commons/sizes/six.js'
 78 | 
 79 | export default {
 80 |     mixins: [Input, Loading, Error, Icon, Inverted, Size],
 81 |     data() {
 82 |         return {
 83 |             dIcon: {
 84 |                 value: this.icon,
 85 |                 position: this.iconPosition
 86 |             },
 87 |         }
 88 |     },
 89 |     props: {
 90 |         id: RandomProp,
 91 |         transparent: {
 92 |             type: Boolean,
 93 |             required: false,
 94 |             default: false,
 95 |             // validator(value) {
 96 |             //     return true
 97 |             // },
 98 |         },
 99 |         fluid: {
100 |             type: Boolean,
101 |             required: false,
102 |             default: false,
103 |             // validator(value) {
104 |             //     return true
105 |             // },
106 |         }
107 |     },
108 |     created() {
109 |         if (this.loading && !this.icon) {
110 |             this.dIcon.value = 'notched circle loading';
111 |             this.dIcon.position = Constants.left;
112 |         }
113 | 
114 |         if (this.leftIcon) {
115 |             this.dIcon.value = this.leftIcon;
116 |             this.dIcon.position = Constants.left;
117 |         }
118 |     },
119 |     methods: {
120 |         getIconClasses() {
121 |             if (this.dIcon.value) {
122 |                 return (this.dIcon.position == Constants.right ? Constants.icon : this.dIcon.position + ' ' + Constants.icon)
123 |             }
124 | 
125 |             return false
126 |         },
127 |         getSlotsClasses() {
128 |             var classes = []
129 | 
130 |             if (this.$slots.hasOwnProperty('right-label')) {
131 |                 classes.push(Constants.right)
132 |             }
133 | 
134 |             if (
135 |                     this.$slots.hasOwnProperty('left-label') || this.$slots.hasOwnProperty('right-label')
136 |                 ) {
137 |                 classes.push(Constants.labeled)
138 |             }
139 | 
140 |             if (this.$slots.hasOwnProperty('left-action')) {
141 |                 classes.push(Constants.left)
142 |             }
143 | 
144 |             if (this.$slots.hasOwnProperty('left-action') || this.$slots.hasOwnProperty('right-action')) {
145 |                 classes.push(Constants.action)
146 |             }
147 | 
148 |             return classes;
149 |         },
150 |         blur() {
151 |             this.$refs.input.blur()
152 |         },
153 |         focus() {
154 |             this.$refs.input.focus()
155 |         },
156 |     }
157 | }
158 | </script>
159 | 
160 | <docs lang="md">
161 |     # Input
162 | 
163 |     ```html
164 |     <ui-input placeholder="Search…" left-icon="search" />
165 |     <ui-input placeholder="Search…">
166 |     	<button class="ui button" slot="right-action">Search</button>
167 |     </ui-input>
168 |     <ui-input placeholder="Search…" size="large">
169 |         <ui-label slot="left-label">Search</ui-label>
170 |         <i class="search icon" slot="left-icon"></i>
171 |         <ui-label slot="right-label">Search</ui-label>
172 |     </ui-input>
173 |     ```
174 | 
175 |     # Output
176 | 
177 |     ```html
178 |     <div class="ui left icon input">
179 |         <input type="text" placeholder="Search…">
180 |         <i class="search icon"></i>
181 |     </div>
182 |     <div class="ui action input">
183 |     	<input type="text" placeholder="Search…">
184 |         <button class="ui button">Search</button>
185 |     </div>
186 |     <div class="ui right labeled large input">
187 |     	<div class="ui label">Search</div>
188 |         <input type="text" placeholder="Search…">
189 |         <div class="ui label">Search</div>
190 |     </div>
191 |     ```
192 | </docs>
193 | 


--------------------------------------------------------------------------------
/src/elements/Label.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <div v-bind:class="['ui', getSizeClasses(), 'label']">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Size from '../mixins/commons/sizes/eight.js'
 9 | 
10 | export default {
11 |     mixins: [Size]
12 | }
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/mixins/collections.js:
--------------------------------------------------------------------------------
1 | import Grid from './grid.js'
2 | import Form from './form.js'
3 | 
4 | export default {
5 |     Grid,
6 |     Form,
7 | }
8 | 


--------------------------------------------------------------------------------
/src/mixins/commons/align.js:
--------------------------------------------------------------------------------
 1 | import Constants from './constants.js';
 2 | 
 3 | const alignments = [
 4 |     Constants.bottom,
 5 |     Constants.center,
 6 |     Constants.left,
 7 |     Constants.middle,
 8 |     Constants.right,
 9 |     Constants.top,
10 | ];
11 | 
12 | export default {
13 |     props: {
14 |         align: {
15 |             type: [String, Array],
16 |         }
17 |     },
18 |     methods: {
19 |         getAlignClasses() {
20 |             // Do we have a value?
21 |             if (typeof this.align == 'undefined') {
22 |                 return false;
23 |             }
24 | 
25 |             // We can't work with the prop itself
26 |             var prop = this.align;
27 |             // We work only with accepted values
28 |             var regexp = new RegExp(alignments.join('|'));
29 | 
30 |             // We don't want arrays, for now
31 |             if (this.align.constructor === Array) {
32 |                 prop = this.align.join(' ');
33 |             }
34 | 
35 |             // Cast as array
36 |             prop = prop.split(/[^a-z]/).filter(Boolean);
37 | 
38 |             // Remove words not accepted
39 |             for (var i = 0; i < prop.length; i++) {
40 |                 if (!prop[i].match(regexp)) {
41 |                     prop.splice(i, 1);
42 |                 }
43 |             }
44 | 
45 |             // If we don't have nothing to work
46 |             if (prop.length < 1) {
47 |                 return false;
48 |             }
49 | 
50 |             var glue = ' ' + Constants.aligned;
51 |             return prop.join(glue + ' ') + glue;
52 |         },
53 |     },
54 | }


--------------------------------------------------------------------------------
/src/mixins/commons/arrai.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     methods: {
 3 |         arrayFlatten() {
 4 |             var result = [];
 5 | 
 6 |             for (var i = 0; i < arguments.length; i++) {
 7 |                 if (Array.isArray(arguments[i])) {
 8 |                     result = result.concat(this.arrayFlatten(...arguments[i]));
 9 |                 } else {
10 |                     result.push(arguments[i]);
11 |                 }
12 |             }
13 | 
14 |             return result;
15 |         },
16 | 
17 |     }
18 | }


--------------------------------------------------------------------------------
/src/mixins/commons/centered.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         centered: {
 4 |             type: Boolean,
 5 |             required: false,
 6 |             default: false,
 7 |             // validator(value) {
 8 |             //     return true
 9 |             // },
10 |         },
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/mixins/commons/column.js:
--------------------------------------------------------------------------------
 1 | import Constants from './constants.js';
 2 | 
 3 | const columns = [
 4 |     Constants.one,
 5 |     Constants.two,
 6 |     Constants.three,
 7 |     Constants.four,
 8 |     Constants.five,
 9 |     Constants.six,
10 |     Constants.seven,
11 |     Constants.eight,
12 |     Constants.nine,
13 |     Constants.ten,
14 |     Constants.eleven,
15 |     Constants.twelve,
16 |     Constants.thirteen,
17 |     Constants.fourteen,
18 |     Constants.fifteen,
19 |     Constants.sixteen,
20 | ];
21 | 
22 | export default {
23 |     props: {
24 |         column: {
25 |             type: [String, Number],
26 |             required: false,
27 |             validator(value) {
28 |                 return (value > 0 && value < 17) || columns.indexOf(value) > -1;
29 |             }
30 |         },
31 |     },
32 |     methods: {
33 |         getSemanticColumns(value) {
34 |             if (typeof value === 'undefined') {
35 |                 return columns;
36 |             }
37 | 
38 |             return columns[value - 1];
39 |         },
40 |         getColumnClasses() {
41 |             if (typeof this.column === 'undefined') {
42 |                 return '';
43 |             }
44 | 
45 |             var classes = [Constants.column];
46 | 
47 |             if (isNaN(this.column)) {
48 |                 classes.unshift(this.column);
49 |             } else {
50 |                 classes.unshift(this.getSemanticColumns(this.column));
51 |             }
52 | 
53 |             return classes;
54 |         },
55 |     },
56 | }


--------------------------------------------------------------------------------
/src/mixins/commons/constants.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     action: 'action',
 3 |     active: 'active',
 4 |     aligned: 'aligned',
 5 |     animating: 'animating',
 6 |     basic: 'basic',
 7 |     big: 'big',
 8 |     blurring: 'blurring',
 9 |     bottom: 'bottom',
10 |     center: 'center',
11 |     centered: 'centered',
12 |     checkbox: 'checkbox',
13 |     column: 'column',
14 |     columns: 'columns',
15 |     computer: 'computer',
16 |     dimmable: 'dimmable',
17 |     dimmed: 'dimmed',
18 |     dimmer: 'dimmer',
19 |     down: 'down',
20 |     eight: 'eight',
21 |     eleven: 'eleven',
22 |     equal: 'equal',
23 |     fade: 'fade',
24 |     fifteen: 'fifteen',
25 |     five: 'five',
26 |     flip: 'flip',
27 |     floated: 'floated',
28 |     four: 'four',
29 |     fourteen: 'fourteen',
30 |     fullscreen: 'fullscreen',
31 |     horizontal: 'horizontal',
32 |     huge: 'huge',
33 |     icon: 'icon',
34 |     in: 'in',
35 |     inverted: 'inverted',
36 |     labeled: 'labeled',
37 |     large: 'large',
38 |     left: 'left',
39 |     massive: 'massive',
40 |     medium: 'medium',
41 |     middle: 'middle',
42 |     mini: 'mini',
43 |     mobile: 'mobile',
44 |     modal: 'modal',
45 |     modals: 'modals',
46 |     nine: 'nine',
47 |     one: 'one',
48 |     out: 'out',
49 |     page: 'page',
50 |     radio: 'radio',
51 |     right: 'right',
52 |     scale: 'scale',
53 |     seven: 'seven',
54 |     six: 'six',
55 |     sixteen: 'sixteen',
56 |     slide: 'slide',
57 |     slider: 'slider',
58 |     small: 'small',
59 |     tablet: 'tablet',
60 |     ten: 'ten',
61 |     thirteen: 'thirteen',
62 |     three: 'three',
63 |     tiny: 'tiny',
64 |     toggle: 'toggle',
65 |     top: 'top',
66 |     transition: 'transition',
67 |     twelve: 'twelve',
68 |     two: 'two',
69 |     ui: 'ui',
70 |     up: 'up',
71 |     vertical: 'vertical',
72 |     visible: 'visible',
73 |     wide: 'wide',
74 |     widescreen: 'widescreen',
75 |     width: 'width',
76 | }


--------------------------------------------------------------------------------
/src/mixins/commons/equal-width.js:
--------------------------------------------------------------------------------
 1 | import Constants from './constants.js';
 2 | 
 3 | export default {
 4 |     props: {
 5 |         equalWidth: {
 6 |             type: Boolean,
 7 |             required: false,
 8 |             default: false,
 9 |         },
10 |     },
11 |     methods: {
12 |         getEqualWidthClasses() {
13 |             if (this.equalWidth) {
14 |                 return [Constants.equal, Constants.width];
15 |             }
16 | 
17 |             return false;
18 |         }
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/mixins/commons/float.js:
--------------------------------------------------------------------------------
 1 | import Constants from './constants.js';
 2 | 
 3 | const floatings = [
 4 |     Constants.left,
 5 |     Constants.right,
 6 | ];
 7 | 
 8 | export default {
 9 |     props: {
10 |         float: {
11 |             type: String,
12 |             validator(value) {
13 |                 return floatings.indexOf(value) > -1;
14 |             },
15 |         }
16 |     },
17 |     methods: {
18 |         getFloatClasses() {
19 |             return this.float ? [this.float, Constants.floated].join(' '): false;
20 |         },
21 |     },
22 | }


--------------------------------------------------------------------------------
/src/mixins/commons/icon.js:
--------------------------------------------------------------------------------
 1 | import Constants from './constants.js';
 2 | 
 3 | export default {
 4 |     props: {
 5 |         icon: {
 6 |             type: String,
 7 |             required: false,
 8 |             // default: false
 9 |         },
10 |         iconPosition: {
11 |             type: String,
12 |             required: false,
13 |             default: Constants.right,
14 |             validator(value) {
15 |                 return value == Constants.right || value == Constants.left
16 |             }
17 |         },
18 |         leftIcon: {
19 |             type: String,
20 |             required: false,
21 |             // default: 'left',
22 |             // validator(value) {
23 |             //     return true
24 |             // }
25 |         },
26 |     },
27 |     methods: {
28 |         getIconClasses() {
29 |             var classes = []
30 | 
31 |             if (this.icon) {
32 |                 if (this.iconPosition == Constants.left) {
33 |                     classes.push(this.iconPosition);
34 |                 }
35 | 
36 |                 classes.push(Constants.icon);
37 |             }
38 | 
39 |             return classes
40 |         }
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/mixins/commons/inverted.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         inverted: {
 4 |             type: Boolean,
 5 |             required: false,
 6 |             default: false,
 7 |             // validator(value) {
 8 |             //     return true
 9 |             // },
10 |         },
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/mixins/commons/klass.js:
--------------------------------------------------------------------------------
 1 | import Arrai from './arrai.js'
 2 | 
 3 | export default {
 4 |     mixins: [Arrai],
 5 |     methods: {
 6 |         toggleClass(el, className) {
 7 |             if (!Array.isArray(className)) {
 8 |                 className = className.split(' ')
 9 |             }
10 | 
11 |             for (var i = 0; i < className.length; i++) {
12 |                 if (el.classList) {
13 |                     el.classList.toggle(className);
14 |                 } else {
15 |                     var classes = el.className.split(' ');
16 |                     var existingIndex = classes.indexOf(className);
17 | 
18 |                     if (existingIndex >= 0)
19 |                         classes.splice(existingIndex, 1);
20 |                     else
21 |                         classes.push(className);
22 | 
23 |                     el.className = classes.join(' ');
24 |                 }
25 |             }
26 |         },
27 |         addClass(el, className) {
28 |             if (!Array.isArray(className)) {
29 |                 className = className.split(' ')
30 |             }
31 | 
32 |             for (var i = 0; i < className.length; i++) {
33 |                 if (el.classList)
34 |                     el.classList.add(className)
35 |                 else
36 |                     el.className += ' ' + className
37 |             }
38 |         },
39 |         arrayToClass(arrays) {
40 |             return this.arrayFlatten(...arguments).join(' ');
41 |         }
42 |     }
43 | }


--------------------------------------------------------------------------------
/src/mixins/commons/props/random.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     type: String,
3 |     required: false,
4 |     default () {
5 |         return Math.random().toString(36).substring(7)
6 |     },
7 | }


--------------------------------------------------------------------------------
/src/mixins/commons/props/type.js:
--------------------------------------------------------------------------------
 1 | const types = [
 2 |     'button',
 3 |     'checkbox',
 4 |     'color',
 5 |     'date',
 6 |     'datetime-local',
 7 |     'email',
 8 |     'file',
 9 |     'hidden',
10 |     'image',
11 |     'month',
12 |     'number',
13 |     'password',
14 |     'radio',
15 |     'range',
16 |     'reset',
17 |     'search',
18 |     'submit',
19 |     'tel',
20 |     'text',
21 |     'time',
22 |     'url',
23 |     'week',
24 | ]
25 | 
26 | export default {
27 |     props: {
28 |         type: {
29 |             type: String,
30 |             required: false,
31 |             default: 'text',
32 |             validator(value) {
33 |                 return types.indexOf(value) > -1
34 |             }
35 |         },
36 |     }
37 | }


--------------------------------------------------------------------------------
/src/mixins/commons/sizes/eight.js:
--------------------------------------------------------------------------------
 1 | import Constants from '../constants.js';
 2 | 
 3 | const sizes = [
 4 |     Constants.massive,
 5 |     Constants.huge,
 6 |     Constants.big,
 7 |     Constants.large,
 8 |     Constants.medium,
 9 |     Constants.small,
10 |     Constants.tiny,
11 |     Constants.mini,
12 | ];
13 | 
14 | export default {
15 |     props: {
16 |         size: {
17 |             type: [String, Number],
18 |             required: false,
19 |             // default: false,
20 |             validator(value) {
21 |                 return (value > 0 && value < (sizes.length + 1)) || sizes.indexOf(value) > -1;
22 |             }
23 |         },
24 |     },
25 |     methods: {
26 |         getSemanticSizes(value) {
27 |             if (typeof value === 'undefined') {
28 |                 return sizes;
29 |             }
30 | 
31 |             return sizes[value - 1];
32 |         },
33 |         isSemanticSize(value) {
34 |             return sizes.indexOf(value) > -1;
35 |         },
36 |         getSizeClasses() {
37 |             return isNaN(this.size) ? this.size : this.getSemanticSizes(this.size);
38 |         }
39 |     }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/mixins/commons/sizes/six.js:
--------------------------------------------------------------------------------
 1 | import Constants from '../constants.js';
 2 | 
 3 | const sizes = [
 4 |     Constants.massive,
 5 |     Constants.huge,
 6 |     Constants.big,
 7 |     Constants.large,
 8 |     Constants.small,
 9 |     Constants.mini,
10 | ];
11 | 
12 | export default {
13 |     props: {
14 |         size: {
15 |             type: [String, Number],
16 |             required: false,
17 |             // default: false,
18 |             validator(value) {
19 |                 return (value > 0 && value) < (sizes.length + 1) || sizes.indexOf(value) > -1;
20 |             }
21 |         },
22 |     },
23 |     methods: {
24 |         getSemanticSizes(value) {
25 |             if (typeof value === 'undefined') {
26 |                 return sizes;
27 |             }
28 | 
29 |             return sizes[value - 1];
30 |         },
31 |         isSemanticSize(value) {
32 |             return sizes.indexOf(value) > -1;
33 |         },
34 |         getSizeClasses() {
35 |             return isNaN(this.size) ? this.size : this.getSemanticSizes(this.size);
36 |         }
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/mixins/commons/states/disabled.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         disabled: {
 4 |             type: Boolean,
 5 |             required: false,
 6 |             default: false,
 7 |             // validator(value) {
 8 |             //     return true
 9 |             // },
10 |         },
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/mixins/commons/states/error.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         error: {
 4 |             type: Boolean,
 5 |             required: false,
 6 |             default: false,
 7 |             // validator(value) {
 8 |             //     return true
 9 |             // },
10 |         },
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/mixins/commons/states/focus.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         focus: {
 4 |             type: Boolean,
 5 |             required: false,
 6 |             default: false,
 7 |             // validator(value) {
 8 |             //     return true
 9 |             // },
10 |         },
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/mixins/commons/states/loading.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         loading: {
 4 |             type: Boolean,
 5 |             required: false,
 6 |             default: false,
 7 |             // validator(value) {
 8 |             //     return true
 9 |             // },
10 |         },
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/mixins/commons/states/success.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         success: {
 4 |             type: Boolean,
 5 |             required: false,
 6 |             default: false,
 7 |             // validator(value) {
 8 |             //     return true
 9 |             // },
10 |         },
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/mixins/commons/states/warning.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         warning: {
 4 |             type: Boolean,
 5 |             required: false,
 6 |             default: false,
 7 |             // validator(value) {
 8 |             //     return true
 9 |             // },
10 |         },
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/mixins/commons/width.js:
--------------------------------------------------------------------------------
  1 | import Constants from './constants.js';
  2 | 
  3 | const widths = [
  4 |     Constants.one,
  5 |     Constants.two,
  6 |     Constants.three,
  7 |     Constants.four,
  8 |     Constants.five,
  9 |     Constants.six,
 10 |     Constants.seven,
 11 |     Constants.eight,
 12 |     Constants.nine,
 13 |     Constants.ten,
 14 |     Constants.eleven,
 15 |     Constants.twelve,
 16 |     Constants.thirteen,
 17 |     Constants.fourteen,
 18 |     Constants.fifteen,
 19 |     Constants.sixteen,
 20 | ]
 21 | 
 22 | export default {
 23 |     props: {
 24 |         width: {
 25 |             type: [String, Number],
 26 |             required: false,
 27 |             // default: false,
 28 |             validator(value) {
 29 |                 return (value > 0 && value < 17) || widths.indexOf(value) > -1;
 30 |             }
 31 |         },
 32 |         mobile: {
 33 |             type: [String, Number],
 34 |             required: false,
 35 |             // default: false,
 36 |             validator(value) {
 37 |                 return (value > 0 && value < 17) || widths.indexOf(value) > -1;
 38 |             }
 39 |         },
 40 |         tablet: {
 41 |             type: [String, Number],
 42 |             required: false,
 43 |             // default: false,
 44 |             validator(value) {
 45 |                 return (value > 0 && value < 17) || widths.indexOf(value) > -1;
 46 |             }
 47 |         },
 48 |         computer: {
 49 |             type: [String, Number],
 50 |             required: false,
 51 |             // default: false,
 52 |             validator(value) {
 53 |                 return (value > 0 && value < 17) || widths.indexOf(value) > -1;
 54 |             }
 55 |         },
 56 |         widescreen: {
 57 |             type: [String, Number],
 58 |             required: false,
 59 |             // default: false,
 60 |             validator(value) {
 61 |                 return (value > 0 && value < 17) || widths.indexOf(value) > -1;
 62 |             }
 63 |         },
 64 |     },
 65 |     methods: {
 66 |         getSemanticWidths(value) {
 67 |             if (typeof value === 'undefined') {
 68 |                 return widths;
 69 |             }
 70 | 
 71 |             return widths[value - 1];
 72 |         },
 73 |         getWidthClassesFor(type, width) {
 74 | 
 75 |             var classes = [];
 76 | 
 77 |             classes.unshift(Constants.wide, type);
 78 | 
 79 |             if (isNaN(width)) {
 80 |                 classes.unshift(width);
 81 |             } else {
 82 |                 classes.unshift(this.getSemanticWidths(width));
 83 |             }
 84 | 
 85 |             return classes;
 86 |         },
 87 |         getWidthClasses() {
 88 |             if (
 89 |                 typeof this.width === 'undefined' &&
 90 |                 typeof this.mobile === 'undefined' &&
 91 |                 typeof this.tablet === 'undefined' &&
 92 |                 typeof this.computer === 'undefined' &&
 93 |                 typeof this.widescreen === 'undefined'
 94 |             ) {
 95 |                 return false;
 96 |             }
 97 | 
 98 |             var classes = [];
 99 | 
100 |             if (typeof this.mobile === 'undefined' &&
101 |                 typeof this.tablet === 'undefined' &&
102 |                 typeof this.computer === 'undefined' &&
103 |                 typeof this.widescreen === 'undefined'
104 |             ) {
105 |                 classes.unshift(Constants.wide);
106 | 
107 |                 if (isNaN(this.width)) {
108 |                     classes.unshift(this.width);
109 |                 } else {
110 |                     classes.unshift(this.getSemanticWidths(this.width));
111 |                 }
112 |             } else {
113 |                 if (typeof this.widescreen !== 'undefined') {
114 |                     classes.unshift(...this.getWidthClassesFor(Constants.widescreen, this.widescreen));
115 |                 }
116 | 
117 |                 if (typeof this.computer !== 'undefined') {
118 |                     classes.unshift(...this.getWidthClassesFor(Constants.computer, this.computer));
119 |                 }
120 | 
121 |                 if (typeof this.tablet !== 'undefined') {
122 |                     classes.unshift(...this.getWidthClassesFor(Constants.tablet, this.tablet));
123 |                 }
124 | 
125 |                 if (typeof this.mobile !== 'undefined') {
126 |                     classes.unshift(...this.getWidthClassesFor(Constants.mobile, this.mobile));
127 |                 }
128 |             }
129 | 
130 |             return classes;
131 |         }
132 |     }
133 | }


--------------------------------------------------------------------------------
/src/mixins/form.js:
--------------------------------------------------------------------------------
 1 | import Form from '../collections/Form.vue'
 2 | import Field from '../collections/form/Field.vue'
 3 | 
 4 | export default {
 5 |     components: {
 6 |         'ui-form': Form,
 7 |         'ui-field': Field,
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/mixins/grid.js:
--------------------------------------------------------------------------------
 1 | import Grid from '../collections/Grid.vue'
 2 | import Row from '../collections/grid/Row.vue'
 3 | import Column from '../collections/grid/Column.vue'
 4 | 
 5 | export default {
 6 |     components: {
 7 |         'ui-grid': Grid,
 8 |         'ui-row': Row,
 9 |         'ui-column': Column,
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/mixins/index.js:
--------------------------------------------------------------------------------
 1 | import Grid from './grid.js'
 2 | import Form from './form.js'
 3 | 
 4 | import Input from '../elements/Input.vue'
 5 | import Label from '../elements/Label.vue'
 6 | 
 7 | import Checkbox from '../modules/Checkbox.vue'
 8 | import Modal from '../modules/Modal.vue'
 9 | import Dropdown from '../modules/Dropdown.vue'
10 | 
11 | export default {
12 |     mixins: [
13 |         Grid,
14 |         Form,
15 |     ],
16 |     components: {
17 |         'ui-input': Input,
18 |         'ui-label': Label,
19 |         'ui-checkbox': Checkbox,
20 |         'ui-dropdown': Dropdown,
21 |         'ui-modal': Modal,
22 |     },
23 | }
24 | 


--------------------------------------------------------------------------------
/src/mixins/modules.js:
--------------------------------------------------------------------------------
 1 | import Checkbox from '../modules/Checkbox.vue'
 2 | import Dropdown from '../modules/Dropdown.vue'
 3 | import Modal from '../modules/Modal.vue'
 4 | 
 5 | export default {
 6 |     Checkbox,
 7 |     Dropdown,
 8 |     Modal,
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/modules/Checkbox.vue:
--------------------------------------------------------------------------------
  1 | <template lang="html">
  2 |     <div v-bind:class="['ui', { 'disabled' : disabled }, { 'fitted' : fitted },
  3 |         { 'read-only' : readonly }, { 'checked' : isChecked() },
  4 |         { 'disabled' : disabled }, typeClass, 'checkbox', { 'focus' : focus },
  5 |         { 'error' : error }]">
  6 |         <input
  7 |             v-bind:id="id"
  8 |             v-bind:accept="accept"
  9 |             v-bind:alt="alt"
 10 |             v-bind:autocomplete="autocomplete"
 11 |             v-bind:autofocus="autofocus"
 12 |             v-bind:checked="isChecked()"
 13 |             v-bind:dirname="dirname"
 14 |             v-bind:disabled="disabled"
 15 |             v-bind:form="form"
 16 |             v-bind:formaction="formaction"
 17 |             v-bind:formenctype="formenctype"
 18 |             v-bind:formmethod="formmethod"
 19 |             v-bind:formnovalidate="formnovalidate"
 20 |             v-bind:formtarget="formtarget"
 21 |             v-bind:list="list"
 22 |             v-bind:max="max"
 23 |             v-bind:maxlength="maxlength"
 24 |             v-bind:min="min"
 25 |             v-bind:multiple="multiple"
 26 |             v-bind:name="name"
 27 |             v-bind:pattern="pattern"
 28 |             v-bind:placeholder="placeholder"
 29 |             v-bind:readonly="readonly"
 30 |             v-bind:required="required"
 31 |             v-bind:src="src"
 32 |             v-bind:step="step"
 33 |             v-bind:type="inputType"
 34 |             v-bind:value="inputValue"
 35 |             v-on:keydown="emitKeyDown"
 36 |             v-on:keypress="emitKeyPress"
 37 |             v-on:keyup="emitKeyUp"
 38 |             v-on:mouseenter="emitMouseEnter"
 39 |             v-on:mouseover="emitMouseOver"
 40 |             v-on:mousemove="emitMouseMove"
 41 |             v-on:mousedown="emitMouseDown"
 42 |             v-on:mouseup="emitMouseUp"
 43 |             v-on:click="emitClick"
 44 |             v-on:dblclick="emitDoubleClick"
 45 |             v-on:wheel="emitWheel"
 46 |             v-on:mouseleave="emitMouseLeave"
 47 |             v-on:mouseout="emitMouseOut"
 48 |             v-on:pointerlockchange="emitPointerLockChange"
 49 |             v-on:pointerlockerror="emitPointerLockError"
 50 |             v-on:blur="emitBlur"
 51 |             v-on:change="emitChange($event.target.value)"
 52 |             v-on:contextmenu="emitContextMenu"
 53 |             v-on:focus="emitFocus"
 54 |             v-on:input="emitInput($event.target.value)"
 55 |             v-on:invalid="emitInvalid"
 56 |             v-on:reset="emitReset"
 57 |             v-on:search="emitSearch"
 58 |             v-on:select="emitSelect"
 59 |             v-on:submit="emitSubmit"
 60 |             ref="input" />
 61 |             <label v-bind:for="id">
 62 |                 <slot>{{ label }}</slot>
 63 |             </label>
 64 |     </div>
 65 | </template>
 66 | 
 67 | <script>
 68 |     import Constants from '../mixins/commons/constants.js'
 69 |     import Input from '../mixins/commons/input/'
 70 |     import RandomProp from '../mixins/commons/props/random.js'
 71 |     import Focus from '../mixins/commons/states/focus.js'
 72 |     import Error from '../mixins/commons/states/error.js'
 73 | 
 74 |     const types = [
 75 |         Constants.checkbox,
 76 |         Constants.radio,
 77 |         Constants.slider,
 78 |         Constants.toggle,
 79 |     ]
 80 | 
 81 |     const inputTypes = [
 82 |         Constants.checkbox,
 83 |         Constants.radio,
 84 |     ]
 85 | 
 86 |     export default {
 87 |         mixins: [Input, Focus, Error],
 88 |         data() {
 89 |             return {
 90 |                 dIcon: {
 91 |                     value: this.icon,
 92 |                     position: this.iconPosition
 93 |                 },
 94 |             }
 95 |         },
 96 |         props: {
 97 |             id: RandomProp,
 98 |             checked: {
 99 |                 type: Boolean,
100 |                 default: undefined,
101 |             },
102 |             fitted: {
103 |                 type: Boolean,
104 |                 default: false,
105 |             },
106 |             inputType: {
107 |                 type: String,
108 |                 required: false,
109 |                 default() {
110 |                     return this.type == Constants.radio ? Constants.radio : Constants.checkbox
111 |                 },
112 |                 validator(value) {
113 |                     return inputTypes.indexOf(value) > -1
114 |                 }
115 |             },
116 |             label: {
117 |                 type: String,
118 |                 required: false,
119 |             },
120 |             type: {
121 |                 type: String,
122 |                 required: false,
123 |                 default: Constants.checkbox,
124 |                 validator(value) {
125 |                     return types.indexOf(value) > -1;
126 |                 },
127 |             },
128 |         },
129 |         computed: {
130 |             typeClass() {
131 |                 return this.type != Constants.checkbox ? this.type : false
132 |             },
133 |             inputValue() {
134 |                 var attrs = this.$vnode.data.attrs
135 | 
136 |                 if (typeof attrs != 'undefined' && attrs.value) {
137 |                     return attrs.value
138 |                 }
139 | 
140 |                 if (this.inputType != Constants.radio && this.trueVal) {
141 |                     return this.trueVal
142 |                 }
143 | 
144 |                 return this.value
145 |             },
146 |             trueVal() {
147 |                 if (typeof this.$vnode.data.attrs == 'undefined') {
148 |                     return null;
149 |                 }
150 | 
151 |                 return this.$vnode.data.attrs['true-value'];
152 |             },
153 |             falseVal() {
154 |                 if (typeof this.$vnode.data.attrs == 'undefined') {
155 |                     return null;
156 |                 }
157 | 
158 |                 return this.$vnode.data.attrs['false-value'];
159 |             },
160 |         },
161 |         methods: {
162 |             emitChange(value) {
163 |                 var input = this.$refs.input;
164 | 
165 |                 if (this.inputType == Constants.radio && this.isChecked()) {
166 |                     this.$emit('input', this.inputValue);
167 |                 }
168 | 
169 |                 if (Array.isArray(this.value)) {
170 |                     var result = this.value;
171 |                     var index = this.value.indexOf(this.inputValue);
172 | 
173 |                     if (index == -1 && input.checked) {
174 |                         result.push(this.inputValue);
175 |                     }
176 | 
177 |                     if (index > -1 && !input.checked) {
178 |                         result.splice(index, 1);
179 |                     }
180 | 
181 |                     // https://forum.vuejs.org/t/custom-checkbox-component/1120/8
182 |                     this.$emit('input', result);
183 |                 } else {
184 |                     if (this.trueVal || this.falseVal) {
185 |                         if (this.trueVal && input.checked) {
186 |                             this.$emit('input', this.trueVal);
187 |                         }
188 |                         
189 |                         if (this.falseVal && !input.checked) {
190 |                             this.$emit('input', this.falseVal);
191 |                         }
192 |                     } else {
193 |                         if (this.inputType == Constants.radio) {
194 |                             this.$emit('input', this.inputValue);
195 |                         } else {
196 |                             this.$emit('input', !this.value);
197 |                         }
198 |                     }
199 |                 }
200 | 
201 |                 this.$emit('change', this.isChecked());
202 |             },
203 |             usesVueModel() {
204 |                 return typeof this.$vnode.data.attrs != 'undefined'
205 |                     && this.$vnode.data.attrs.value
206 |                     && Array.isArray(this.value)
207 |             },
208 |             isChecked() {
209 |                 if (this.usesVueModel()) {
210 |                     return this.value.indexOf(this.inputValue) > -1
211 |                 }
212 | 
213 |                 if (this.inputType == Constants.radio) {
214 |                     return this.value == this.$vnode.data.attrs.value;
215 |                 }
216 | 
217 |                 if (this.value !== true && this.value !== false) {
218 |                     return this.value == this.trueVal
219 |                 }
220 | 
221 |                 return this.value
222 |             },
223 |             isUnchecked() {
224 |                 return !this.isChecked()
225 |             },
226 |         },
227 |     }
228 | </script>
229 | 
230 | <style scoped>
231 |     .ui.checkbox label {
232 |         cursor: pointer;
233 |         user-select: none;
234 |     }
235 | </style>
236 | 
237 | <docs type="md">
238 |     `v-model` has to be an `array` if you want to track multiple selections
239 | </docs>
240 | 
241 | 


--------------------------------------------------------------------------------
/src/modules/Dropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |         v-bind:class="[
  4 |             {visible},
  5 |             'ui',
  6 |             {active},
  7 |             {search},
  8 |             {selection},
  9 |             { 'upward' : isUpward },
 10 |             'dropdown'
 11 |         ]" v-on:click.self="toggle"
 12 |         v-on:keydown.up="search ? false : selectPrevious()"
 13 |         v-on:keydown.down="search ? false : selectNext()"
 14 |         v-bind:tabindex="search ? '' : 0"
 15 |         v-click-outside="hide">
 16 |         <input type="hidden" v-bind:name="name" v-if="selection">
 17 |         <i class="dropdown icon" v-on:click="toggle"></i>
 18 |         <input type="search" class="search" autocomplete="off" tabindex="0"
 19 |             ref="search"
 20 |             v-model="term"
 21 |             v-on:focus="show"
 22 |             v-on:blur="hide"
 23 |             v-on:keydown.up="selectPrevious"
 24 |             v-on:keydown.down="selectNext"
 25 |             v-if="search">
 26 |         <div v-bind:class="[
 27 |             { 'default' : typeof selected.value == 'undefined' },
 28 |             'text',
 29 |             { filtered },
 30 |         ]">{{ selected.text || selected.value || placeholder || text }}</div>
 31 |             <transition
 32 |                 v-on:before-enter="beforeEnter"
 33 |                 v-on:after-enter="afterEnter"
 34 |                 v-bind:enter-active-class="enterActiveClass"
 35 |                 v-bind:leave-active-class="leaveActiveClass"
 36 |                 v-on:before-leave="beforeLeave"
 37 |                 v-on:after-leave="afterLeave">
 38 |                 <div
 39 |                     ref="menu"
 40 |                     v-bind:class="[{visible}, 'transition', 'menu']"
 41 |                     tabindex="-1"
 42 |                     v-show="isVisible">
 43 |                     <slot>
 44 |                         <template v-show="$items.length > 0">
 45 |                             <div
 46 |                                 ref="items"
 47 |                                 v-bind:class="[
 48 |                                     { 'disabled' : item.disabled },
 49 |                                     { 'active selected' : selected == item && !disabled },
 50 |                                     'item'
 51 |                                 ]"
 52 |                                 v-bind:tabindex="(index + 2) * -1"
 53 |                                 v-on:focus="setSelected(item)"
 54 |                                 v-for="(item, index) in $items">
 55 |                                 {{ item.name ? item.name : item.value }}
 56 |                             </div>
 57 |                         </template>
 58 |                         <div class="message" v-show="$items.length < 1" v-html="messages.noResults"></div>
 59 |                     </slot>
 60 |                 </div>
 61 |             </transition>
 62 |     </div>
 63 | </template>
 64 | 
 65 | <script>
 66 |     import Constants from '../mixins/commons/constants.js'
 67 |     import ClickOutside from '../mixins/commons/click-outside/'
 68 |     import Input from '../mixins/commons/input/'
 69 |     import Arrai from '../mixins/commons/arrai.js'
 70 | 
 71 |     export default {
 72 |         mixins: [ClickOutside, Input, Arrai],
 73 |         props: {
 74 |             text: {
 75 |                 type: String,
 76 |             },
 77 |             items: {
 78 |                 type: Array,
 79 |                 default: () => [],
 80 |             },
 81 |             selection: {
 82 |                 type: Boolean,
 83 |                 default() {
 84 |                     return (typeof this.$vnode.componentOptions.propsData.search != 'undefined'
 85 |                         && typeof this.$vnode.componentOptions.propsData.search == 'string')
 86 |                         || this.$vnode.componentOptions.propsData.search == true
 87 |                 },
 88 |             },
 89 |             search: {
 90 |                 type: Boolean,
 91 |                 default: false,
 92 |             },
 93 |             fullTextSearch: {
 94 |                 type: Boolean,
 95 |                 default: false,
 96 |             },
 97 |             transition: {
 98 |                 type: String,
 99 |                 default () {
100 |                     var classes = [Constants.slide]
101 | 
102 |                     classes.push(this.isUpward ? Constants.up : Constants.down)
103 | 
104 |                     return classes.join(' ')
105 |                 },
106 |             },
107 |             upward: {
108 |                 type: Boolean,
109 |                 default: false,
110 |             },
111 |             messages: {
112 |                 type: Object,
113 |                 required: false,
114 |                 default () {
115 |                     return {
116 |                         addResult: 'Add <b>{term}</b>',
117 |                         count: '{count} selected',
118 |                         maxSelections: 'Max {maxCount} selections',
119 |                         noResults: 'No results found.'
120 |                     }
121 |                 }
122 |             }
123 |         },
124 |         data() {
125 |             return {
126 |                 /* Toggles active class */
127 |                 active: false,
128 |                 /* Toggles visible class */
129 |                 visible: false,
130 |                 /* Toggles element visibility */
131 |                 isVisible: false,
132 |                 /* Flags animation */
133 |                 animating: false,
134 |                 /* Search term */
135 |                 term: '',
136 |                 /* Stores the selected item */
137 |                 selected: this.value,
138 |                 /* Automatically show upward */
139 |                 isUpward: this.upward,
140 |                 /* Default option selected */
141 |                 default: this.value,
142 |             }
143 |         },
144 |         computed: {
145 |             filtered() {
146 |                 return this.term.length > 0
147 |             },
148 |             $items() {
149 |                 var items = []
150 |                 var sanitized
151 | 
152 |                 for (var i = 0; i < this.items.length; i++) {
153 |                     /* Makes it easier to work */
154 |                     var item = this.items[i];
155 | 
156 |                     /* Checks if it is a object */
157 |                     if (this.isObject(item)) {
158 |                             /* Checks for a value property */
159 |                             if (typeof item.value == 'undefined' || item.value.length < 1 && this.selection) {
160 |                                 /* Show warning on JavaScript console */
161 |                                 console.warn(`Object must have a value property. Schema:
162 | {
163 |     // name displayed in dropdown
164 |     "name"      : "Beyoncé Knowles",
165 |     // selected value
166 |     "value"     : "${Math.floor(Math.random() * 10)}" // User ID,
167 |     // name displayed after selection (optional)
168 |     "text"      : "Beyoncé"
169 |     // array of strings to test using user's input as a regexp (optional)
170 |     "search"    : ['Beyonce Knowles'] // no diacritcs version
171 |     // whether field should be displayed as disabled (optional)
172 |     "disabled"  : false
173 | }
174 | Ignoring item: `, item)
175 | 
176 |                                 /* Skip this item */
177 |                                 continue
178 |                             }
179 | 
180 |                             sanitized = item
181 |                     } else {
182 |                         /* Working with basics */
183 |                         sanitized = {
184 |                             value: item,
185 |                         }
186 | 
187 |                         if (item == this.value) {
188 |                             this.selected = sanitized
189 |                         }
190 |                     }
191 | 
192 |                     if (this.filtered) {
193 |                         /* Nothing is selected */
194 |                         this.selected = {}
195 | 
196 |                         /* Subjects for regexp */
197 |                         var subjects = this.arrayFlatten([
198 |                             sanitized.value,
199 |                             sanitized.name,
200 |                             sanitized.text,
201 |                             sanitized.search,
202 |                         ])
203 | 
204 |                         if (!this.fullTextSearch && this.isObject(item)) {
205 |                             subjects.shift()
206 |                         }
207 | 
208 |                         /* Escape user input */
209 |                         var safe = this.term.split('').map(function(string) {
210 |                             return string.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
211 |                         })
212 | 
213 |                         /* Enable full search text or not */
214 |                         var regexp = new RegExp(this.fullTextSearch ? safe.join('.*') : ('^' + safe.join('')), 'im')
215 | 
216 |                         /* If anything found */
217 |                         if (regexp.test(subjects.join('\n'))) {
218 |                             items.push(sanitized)
219 |                         }
220 |                     } else {
221 |                         if (sanitized.value == this.value) {
222 |                             this.selected = sanitized;
223 |                         }
224 | 
225 |                         items.push(sanitized)
226 |                     }
227 |                 }
228 | 
229 |                 if (items.length < 1) {
230 |                     this.$emit('noresult', this.term);
231 |                 }
232 | 
233 |                 return items
234 |             },
235 |             enterActiveClass() {
236 |                 var classes = [Constants.animating]
237 | 
238 |                 if (typeof this.$vnode.componentOptions.propsData.transition == 'undefined') {
239 |                     classes.push(Constants.slide)
240 |                     classes.push(this.isUpward ? Constants.up : Constants.down)
241 |                 } else {
242 |                     classes.push(this.transition)
243 |                 }
244 | 
245 |                 classes.push(Constants.in)
246 | 
247 |                 return this.arrayFlatten(classes).join(' ');
248 |             },
249 |             leaveActiveClass() {
250 |                 var classes = [Constants.animating]
251 | 
252 |                 if (typeof this.$vnode.componentOptions.propsData.transition == 'undefined') {
253 |                     classes.push(Constants.slide)
254 |                     classes.push(this.isUpward ? Constants.up : Constants.down)
255 |                 } else {
256 |                     classes.push(this.transition)
257 |                 }
258 | 
259 |                 classes.push(Constants.out)
260 | 
261 |                 return this.arrayFlatten(classes).join(' ');
262 |             },
263 |         },
264 |         watch: {
265 |             isVisible(newVal) {
266 |                 this.active = newVal
267 |             },
268 |             selected(newVal, oldVal) {
269 |                 if (newVal != oldVal && typeof newVal.value != 'undefined') {
270 |                     this.$emit('input', newVal.value)
271 |                     this.$emit('change')
272 |                 }
273 |             },
274 |             term(newVal, oldVal) {
275 |                 if (newVal != oldVal) {
276 |                     this.$emit('search', newVal)
277 |                 }
278 |             }
279 |         },
280 |         methods: {
281 |             toggle() {
282 |                 if (!this.animating) {
283 |                     this.visible ? this.hide() : this.show()
284 |                 }
285 |             },
286 |             show() {
287 |                 this.isVisible = true
288 |                 if (this.search) {
289 |                     this.$refs.search.focus()
290 |                 }
291 | 
292 |                 if (typeof this.$vnode.componentOptions.propsData.upward == 'undefined') {
293 |                     // get the window height https://gist.github.com/joshcarr/2f861bd37c3d0df40b30
294 |                     var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight
295 | 
296 |                     var bottom = this.$el.getBoundingClientRect().bottom
297 | 
298 |                     // menu element
299 |                     var menu = this.$refs.menu
300 | 
301 |                     // put the menu element into the DOM
302 |                     menu.style.visibility = 'hidden'
303 |                     menu.style.display = 'block'
304 | 
305 |                     this.isUpward = (menu.offsetHeight + bottom > windowHeight)
306 |                     
307 |                     menu.removeAttribute('style')
308 |                 }
309 |             },
310 |             hide() {
311 |                 if (
312 |                     !this.fullTextSearch
313 |                     && this.filtered
314 |                     && this.$items.length > 0
315 |                     && !this.isSelected()
316 |                 ) {
317 |                     this.selected = this.$items[0]
318 |                 }
319 | 
320 |                 this.isVisible = false
321 |             },
322 |             clear() {
323 |                 this.$emit('input', null)
324 |             },
325 |             restoreDefaults() {
326 |             },
327 |             setSelected(value) {
328 |                 if (this.isObject(value) && typeof value.value != 'undefined' && !value.disabled) {
329 |                     this.selected = value
330 |                     this.term = ''
331 |                     this.hide()
332 |                 } else {
333 |                     var found = this.$items.filter((val) => val.value == value)
334 | 
335 |                     if (found.length > 0) {
336 |                         this.selected = found[0]
337 |                     }
338 |                 }
339 |             },
340 |             getText() {
341 |                 return this.selected.text || this.selected.value
342 |             },
343 |             getValue() {
344 |                 return this.selected.value
345 |             },
346 |             beforeEnter() {
347 |                 this.visible = true
348 |                 this.animating = true
349 |                 this.$emit('show')
350 |             },
351 |             afterEnter() {
352 |                 if (this.isSelected()) {
353 |                     this.scrollIntoView(this.$items.indexOf(this.selected))
354 |                 }
355 | 
356 |                 this.visible = true
357 |                 this.animating = false
358 | 
359 |                 this.$emit('shown')
360 |             },
361 |             beforeLeave() {
362 |                 this.animating = true
363 |                 this.$emit('hide')
364 |             },
365 |             afterLeave() {
366 |                 this.animating = false
367 |                 this.visible = false
368 | 
369 |                 if (this.isSelected() && this.term.length > 0) {
370 |                     this.term = ''
371 |                 }
372 | 
373 |                 this.$emit('hidden')
374 |             },
375 |             selectPrevious() {
376 |                 var pos = this.$items.indexOf(this.selected)
377 | 
378 |                 if (pos > 0) {
379 |                     this.selected = this.$items[--pos]
380 |                     // this.$refs.items[pos].scrollIntoView(false)
381 |                     this.scrollIntoView(pos)
382 |                 }
383 |             },
384 |             selectNext() {
385 |                 let pos = this.$items.indexOf(this.selected)
386 | 
387 |                 if (++pos < this.$items.length) {
388 |                     this.selected = this.$items[pos]
389 |                     // this.$refs.items[pos].scrollIntoView(false)
390 |                     this.scrollIntoView(pos)
391 |                 }
392 |             },
393 |             isSelected() {
394 |                 return this.isObject(this.selected)
395 |                         && !(
396 |                                 Object.keys(this.selected).length === 0
397 |                                 && this.selected.constructor === Object
398 |                             )
399 |             },
400 |             isObject(instance) {
401 |                 return !Array.isArray(instance) && instance === Object(instance)
402 |             },
403 |             scrollIntoView(pos) {
404 |                 var el = this.$refs.items[pos]
405 |                 var items = Math.floor(el.offsetParent.offsetHeight / el.offsetHeight)
406 |                 var scrollFixer = pos - items;
407 | 
408 |                 if ((el.clientHeight * pos) - (items * el.clientHeight) >= el.offsetParent.scrollTop - scrollFixer) {
409 |                     el.scrollIntoView(false)
410 |                 }
411 | 
412 |                 if (el.offsetTop < el.offsetParent.scrollTop) {
413 |                     el.scrollIntoView()
414 |                 }
415 |             },
416 |         },
417 |         created() {
418 |             if (typeof this.value == 'undefined' || this.value === null) {
419 |                 this.selected = {}
420 |             }
421 |         },
422 |     }
423 | </script>


--------------------------------------------------------------------------------
/src/modules/Modal.vue:
--------------------------------------------------------------------------------
  1 | <template lang="html">
  2 |         <transition
  3 |             v-on:before-enter="dimmer.animating = true"
  4 |             v-bind:enter-active-class="animation.active.enter.dimmer"
  5 |             v-on:after-enter="dimmer.animating = false"
  6 |             v-on:before-leave="dimmer.animating = true"
  7 |             v-bind:leave-active-class="animation.active.leave.dimmer"
  8 |             v-on:after-leave="dimmer.animating = false">
  9 |             <div
 10 |                 v-bind:class="classes.dimmer"
 11 |                 key="2"
 12 |                 v-show="dimmer.visible"
 13 |                 v-on:click.self="closable ? hide() : false"
 14 |                 v-bind:style="style">
 15 |                 <transition
 16 |                     v-on:before-enter="modal.animating = true"
 17 |                     v-bind:enter-active-class="animation.active.enter.modal"
 18 |                     v-on:after-enter="modal.animating = false"
 19 |                     v-on:before-leave="modal.animating = true"
 20 |                     v-bind:leave-active-class="animation.active.leave.modal"
 21 |                     v-on:after-leave="modal.animating = false">
 22 |                     <div
 23 |                         v-bind:class="classes.modal"
 24 |                         v-show="modal.visible"
 25 |                         v-bind:style="style">
 26 |                         <i v-bind:class="[{ 'grey' : inverted }, 'close', 'icon']"
 27 |                             v-if="closable" v-on:click="hide"></i>
 28 |                         <div class="header" v-if="header || $slots.header">
 29 |                             <slot name="header">{{ header }}</slot>
 30 |                         </div>
 31 |                         <div class="image content" v-if="image || $slots.image">
 32 |                             <img class="image" v-bind:src="image" v-if="!$slots.image">
 33 |                             <div class="description"><slot></slot></div>
 34 |                         </div>
 35 |                         <div class="content" v-else><slot></slot></div>
 36 |                         <div class="actions" v-if="$slots.actions">
 37 |                             <slot name="actions"></slot>
 38 |                         </div>
 39 |                     </div>
 40 |                 </transition>
 41 |             </div>
 42 |         </transition>
 43 | </template>
 44 | 
 45 | <script>
 46 |     import Constants from '../mixins/commons/constants.js'
 47 |     import Klass from '../mixins/commons/klass.js'
 48 | 
 49 |     const sizes = [
 50 |         Constants.fullscreen,
 51 |         Constants.large,
 52 |         Constants.medium,
 53 |         Constants.small,
 54 |     ];
 55 | 
 56 |     const transitions = [
 57 |         [Constants.horizontal, Constants.flip].join(' '),
 58 |         [Constants.vertical, Constants.flip].join(' '),
 59 |         [Constants.fade, Constants.up].join(' '),
 60 |         Constants.fade,
 61 |         Constants.scale,
 62 |     ];
 63 | 
 64 |     export default {
 65 |         mixins: [Klass],
 66 |         props: {
 67 |             basic: {
 68 |                 type: Boolean,
 69 |                 default: false,
 70 |             },
 71 |             header: {
 72 |                 type: String,
 73 |             },
 74 |             image: {
 75 |                 type: String,
 76 |             },
 77 |             size: {
 78 |                 type: [String, Number],
 79 |                 required: false,
 80 |                 // default: false,
 81 |                 validator(value) {
 82 |                     return (value > 0 && value) < (sizes.length + 1) || sizes.indexOf(value) > -1
 83 |                 }
 84 |             },
 85 |             active: {
 86 |                 type: Boolean,
 87 |                 default: false,
 88 |             },
 89 |             closable: {
 90 |                 type: Boolean,
 91 |                 default: true,
 92 |             },
 93 |             transition: {
 94 |                 type: String,
 95 |                 default: 'scale',
 96 |                 validator(value) {
 97 |                     return transitions.indexOf(value) > -1
 98 |                 },
 99 |             },
100 |             duration: {
101 |                 type: Number,
102 |                 default: 400,
103 |             },
104 |             inverted: {
105 |                 type: Boolean,
106 |                 default: false,
107 |             },
108 |         },
109 |         data() {
110 |             return {
111 |                 dimmer: {
112 |                     visible: false,
113 |                     animating: false,
114 |                 },
115 |                 modal: {
116 |                     visible: false,
117 |                     animating: false,
118 |                 },
119 |                 style: {
120 |                     animationDuration: this.duration + 'ms',
121 |                 }
122 |             }
123 |         },
124 |         computed: {
125 |             classes() {
126 |                 var
127 |                     visible = [Constants.visible, Constants.active],
128 |                     dimmer = [Constants.ui],
129 |                     modal = [Constants.ui],
130 |                     active = [Constants.animating, Constants.transition]
131 | 
132 |                 /* http://semantic-ui.com/modules/modal.html#basic */
133 |                 if (this.basic) {
134 |                     modal.push(Constants.basic);
135 |                 }
136 | 
137 |                 /* http://semantic-ui.com/modules/modal.html#variations */
138 |                 if (typeof this.size !== 'undefined' && this.size != 3) {
139 |                     modal.push(isNaN(this.size) ? this.size : sizes[this.size - 1])
140 |                 }
141 | 
142 |                 if (this.active) {
143 |                     modal.push(Constants.active)
144 |                 }
145 | 
146 |                 if (this.inverted) {
147 |                     dimmer.push(Constants.inverted)
148 |                     modal.push(Constants.inverted)
149 |                 }
150 | 
151 |                 /* Shows dimmer */
152 |                 if (this.dimmer.visible) {
153 |                     dimmer.push(visible)
154 |                 }
155 | 
156 |                 /* Show modal (if dimmer is also visible) */
157 |                 if (this.dimmer.visible && this.modal.visible) {
158 |                     modal.push(visible)
159 |                 }
160 | 
161 |                 /* Make sure animation works when dimmer is leaving */
162 |                 if (!this.dimmer.visible && this.dimmer.animating) {
163 |                     dimmer.push(visible)
164 |                 }
165 | 
166 |                 /* Make sure animation works when modal is leaving */
167 |                 if (!this.modal.visible && this.modal.animating && !this.dimmer.animating) {
168 |                     modal.push(visible)
169 |                 }
170 | 
171 |                 dimmer.push(Constants.modals, Constants.page, Constants.dimmer);
172 |                 modal.push(Constants.modal);
173 | 
174 |                 return {dimmer, modal}
175 |             },
176 |             animation() {
177 |                     var
178 |                         klass = [Constants.animating, Constants.transition],
179 |                         enter = Constants.in,
180 |                         leave = Constants.out,
181 |                         dimmer = Constants.fade,
182 |                         modal = this.transition;
183 | 
184 |                     return {
185 |                         active: {
186 |                             enter: {
187 |                                 dimmer: this.arrayToClass(klass, dimmer, enter),
188 |                                 modal: this.arrayToClass(klass, modal, enter),
189 |                             },
190 |                             leave: {
191 |                                 dimmer: this.arrayToClass(klass, dimmer, leave),
192 |                                 modal: this.arrayToClass(klass, modal, leave),
193 |                             },
194 |                         },
195 |                     }
196 |             },
197 |         },
198 |         watch: {
199 |             'modal.animating' : function(val, old) {
200 |                 if (!val && this.modal.visible) {
201 |                     this.$emit('visible', this)
202 |                 }
203 |             },
204 |             'dimmer.animating' : function(val, old) {
205 |                 if (!val && !this.dimmer.visible) {
206 |                     this.$emit('hidden', this)
207 |                 }
208 |             },
209 |         },
210 |         methods: {
211 |             toggleVisibility(el) {
212 |                 setTimeout(function() {
213 |                     // console.log('disabling dimmer via timeout')
214 |                     el.visible = !el.visible
215 |                 }, (25 / 100) * this.duration)
216 |             },
217 |             hide() {
218 |                 if (this.dimmer.animating || this.modal.animating) {
219 |                     return false;
220 |                 }
221 | 
222 |                 this.modal.visible = false
223 |                 // this.dimmer.visible = false
224 | 
225 |                 this.$emit('hide', this)
226 | 
227 |                 this.toggleVisibility(this.dimmer)
228 |                 this.toggleClass(document.body, Constants.dimmed)
229 |             },
230 |             show() {
231 |                 if (this.dimmer.animating || this.modal.animating) {
232 |                     return false;
233 |                 }
234 | 
235 |                 this.dimmer.visible = true
236 |                 // this.modal.visible = true
237 | 
238 |                 this.$emit('show', this)
239 | 
240 |                 this.toggleVisibility(this.modal)
241 |                 this.toggleClass(document.body, Constants.dimmed)
242 |             },
243 |             toggle() {
244 |                 this.dimmer.visible ? this.hide() : this.show()
245 |             }
246 |         },
247 |         created() {
248 |             /* Make sure modal is visible when component is created (based on attribute) */
249 |             this.dimmer.visible = this.active
250 |             this.modal.visible = this.active
251 | 
252 |             this.toggleClass(document.body, Constants.dimmable)
253 |         },
254 |     }
255 | </script>


--------------------------------------------------------------------------------