├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── components
    ├── accordion.js
    ├── checkbox.js
    ├── column.js
    ├── divider.js
    ├── dropdown.js
    ├── icon.js
    ├── label.js
    ├── loader.js
    ├── message.js
    ├── modal.js
    ├── popup.js
    ├── radiobutton.js
    ├── rail.js
    ├── reveal.js
    ├── search.js
    ├── statistic.js
    └── transitions.js
├── docs
    ├── build
    │   ├── 0.b9846ff4.js
    │   └── bundle.d5b66d2a.js
    ├── index.html
    └── static
    │   └── media
    │       ├── flags.9c74e172.png
    │       ├── icons.674f50d2.eot
    │       ├── icons.912ec66d.svg
    │       ├── icons.af7ae505.woff2
    │       ├── icons.b06871f2.ttf
    │       └── icons.fee66e71.woff
├── karma.conf.js
├── package.json
├── src
    ├── Accordion.vue
    ├── Checkbox.vue
    ├── Column.vue
    ├── Divider.vue
    ├── Dropdown.vue
    ├── FormDropdown.vue
    ├── Label.vue
    ├── Loading.vue
    ├── Message.vue
    ├── Modal.vue
    ├── Popup.vue
    ├── Radiobutton.vue
    ├── Readme.md
    ├── Reveal.vue
    ├── Search.vue
    ├── SemanticAccordion.md
    ├── SemanticCheckbox.md
    ├── SemanticFormDropdown.md
    ├── SemanticLoading.md
    ├── SemanticModal.md
    ├── SemanticRadioButton.md
    ├── Statistic.vue
    ├── elements
    │   ├── Icon.vue
    │   └── Rail.vue
    └── utils
    │   ├── CommonPropsMixin.js
    │   └── Styleguidist.js
├── styleguide.config.js
├── test
    └── unit
    │   └── Accordion.spec.js
├── vue-semantic.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | node_modules
28 | 
29 | # Optional npm cache directory
30 | .npm
31 | 
32 | # Optional REPL history
33 | .node_repl_history
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2016 Brock Reece
2 | 
3 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
4 | 
5 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-semantic
 2 | [![npm version](https://badge.fury.io/js/croud-vue-semantic.svg)](https://badge.fury.io/js/croud-vue-semantic)
 3 | 
 4 | http://croudsupport.github.io/vue-semantic/
 5 | 
 6 | A collection of vue components for integrating the semantic ui library 
 7 | ## Contributing
 8 | Work In Progress. Any PRs welcome.
 9 | 
10 | ## Vue 1?
11 | If you still need the Vue 1 version of this lib you can use the vue1 branch or 0.0.7 tag
12 | 
13 | ## Installation
14 | You can use NPM to install this package
15 | ```bash
16 | npm install --save croud-vue-semantic
17 | ```
18 | or Yarn 
19 | ```bash
20 | yarn add croud-vue-semantic
21 | ```
22 | 
23 | Install the plugin
24 | ```js
25 | import VueSemantic from 'croud-vue-semantic'
26 | Vue.use(VueSemantic)
27 | ```
28 | 
29 | You will also need to include the semantic js and css files to your project. The easiest way would be to include them in your html
30 | 
31 | ```html
32 | <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
33 | <script src="semantic/dist/semantic.min.js"></script>
34 | ```
35 | For more advanced builds see http://semantic-ui.com/introduction/getting-started.html
36 | 
37 | ## Usage
38 | View our [docs](http://croudsupport.github.io/vue-semantic/) for usage examples
39 | 
40 | ### Webpack Tips
41 | If you are using webpack, you can add jQuery to your webpack.base.conf.js
42 | ```js
43 | plugins: [
44 |   new webpack.ProvidePlugin({
45 |     $: "jquery",
46 |     jQuery: "jquery",
47 |     "window.jQuery": "jquery"
48 |   })
49 | ],
50 | ```
51 | 
52 | And include the semantic js + css at the top of your main.js file
53 | ```
54 | import 'path/to/semantic.css'
55 | import 'path/to/semantic.js'
56 | ```
57 | 


--------------------------------------------------------------------------------
/components/accordion.js:
--------------------------------------------------------------------------------
1 | var Accordion = require('../src/Accordion.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-accordion', Accordion);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/checkbox.js:
--------------------------------------------------------------------------------
1 | var Checkbox = require('../src/Checkbox.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-checkbox', Checkbox);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/column.js:
--------------------------------------------------------------------------------
1 | var Column = require('../src/Column.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-column', Column);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/divider.js:
--------------------------------------------------------------------------------
1 | var Divider = require('../src/Divider.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-divider', Divider);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/dropdown.js:
--------------------------------------------------------------------------------
1 | var FormDropdown = require('../src/FormDropdown.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-form-dropdown', FormDropdown);
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/components/icon.js:
--------------------------------------------------------------------------------
1 | var Icon = require('../src/Icon.vue')
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-icon', Icon);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/label.js:
--------------------------------------------------------------------------------
1 | var Label = require('../src/Label.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-label', Label);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/loader.js:
--------------------------------------------------------------------------------
1 | var Loader = require('../src/Loader.vue')
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-loader', Loader);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/message.js:
--------------------------------------------------------------------------------
1 | var Message = require('../src/Message.vue')
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-message', Message);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/modal.js:
--------------------------------------------------------------------------------
1 | var Modal = require('../src/Modal.vue')
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-modal', Modal);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/popup.js:
--------------------------------------------------------------------------------
1 | var Popup = require('../src/Popup.vue'),
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-popup', Popup);
6 | 
7 |     },
8 | }
9 | 


--------------------------------------------------------------------------------
/components/radiobutton.js:
--------------------------------------------------------------------------------
1 | var Radiobutton = require('../src/Radiobutton.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-radio', Radiobutton);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/rail.js:
--------------------------------------------------------------------------------
1 | var Rail = require('../src/Rail.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-rail', Rail);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/reveal.js:
--------------------------------------------------------------------------------
1 | var Reveal = require('../src/Reveal.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-reveal', Reveal);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/search.js:
--------------------------------------------------------------------------------
1 | var Search = require('../src/Search.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-search', Search);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/statistic.js:
--------------------------------------------------------------------------------
1 | var Statistic = require('../src/Statistic.vue');
2 | 
3 | module.exports = {
4 |     install: function (Vue, options) {
5 |         Vue.component('semantic-statistic', Statistic);
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/components/transitions.js:
--------------------------------------------------------------------------------
 1 | var Statistic = require('../src/Statistic.vue');
 2 | 
 3 | module.exports = {
 4 |     install: function (Vue, options) {
 5 |         
 6 |         if (!$.fn.transition) return;
 7 | 
 8 |         var emphasis = [
 9 |             'flash',
10 |             'shake',
11 |             'pulse',
12 |             'tada',
13 |             'bounce',
14 |             'jiggle',
15 |         ]
16 | 
17 |         var appearance = [
18 |             'slide up',
19 |             'slide down',
20 |             'vertical flip',
21 |             'horizontal flip',
22 |             'fade',
23 |             'fade up',
24 |             'fade down',
25 |             'scale',
26 |             'drop',
27 |             'browse',
28 |         ]
29 | 
30 |         emphasis.forEach(function (animation) {
31 |             var definition = {
32 |                 enter: function (el, done) {
33 |                     $(el)
34 |                         .transition('reset')
35 |                         .transition(animation + ' in', 700, done)
36 | 
37 |                     return function() {
38 |                         $(el).transition('stop')
39 |                     }
40 |                 },
41 | 
42 |                 leave: function (el, done) {
43 |                     $(el)
44 |                         .transition('reset')
45 |                         .transition(animation + ' out', 700, done)
46 | 
47 |                     return function() {
48 |                         $(el).transition('stop')
49 |                     }
50 |                 }
51 |             }
52 | 
53 |             Vue.transition(animation, definition)
54 |         })
55 | 
56 |         appearance.forEach(function (animation) {
57 |             var definition = {
58 |                 enter: function (el, done) {
59 |                     $(el)
60 |                         .transition('reset')
61 |                         .transition(animation + ' in', 700, done)
62 | 
63 |                     return function() {
64 |                         $(el).transition('stop')
65 |                     }
66 |                 },
67 | 
68 |                 leave: function (el, done) {
69 |                     $(el)
70 |                         .transition('reset')
71 |                         .transition(animation + ' out', 700, done)
72 | 
73 |                     return function() {
74 |                         $(el).transition('stop')
75 |                     }
76 |                 }
77 |             }
78 |             var id = animation.split(' ').join('-')
79 | 
80 |             Vue.transition(id, definition)
81 |         })
82 |     },
83 | }
84 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Vue Semantic</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	</head>
 8 | 	<body>
 9 | 		<div id="app"></div>
10 | 	<script type="text/javascript" src="build/bundle.d5b66d2a.js"></script></body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/docs/static/media/flags.9c74e172.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CroudTech/vue-semantic/28eaa027036044281b0cd547c6ba57b06b8a6443/docs/static/media/flags.9c74e172.png


--------------------------------------------------------------------------------
/docs/static/media/icons.674f50d2.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CroudTech/vue-semantic/28eaa027036044281b0cd547c6ba57b06b8a6443/docs/static/media/icons.674f50d2.eot


--------------------------------------------------------------------------------
/docs/static/media/icons.af7ae505.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CroudTech/vue-semantic/28eaa027036044281b0cd547c6ba57b06b8a6443/docs/static/media/icons.af7ae505.woff2


--------------------------------------------------------------------------------
/docs/static/media/icons.b06871f2.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CroudTech/vue-semantic/28eaa027036044281b0cd547c6ba57b06b8a6443/docs/static/media/icons.b06871f2.ttf


--------------------------------------------------------------------------------
/docs/static/media/icons.fee66e71.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CroudTech/vue-semantic/28eaa027036044281b0cd547c6ba57b06b8a6443/docs/static/media/icons.fee66e71.woff


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/Nikku/karma-browserify
 2 | module.exports = function (config) {
 3 |   config.set({
 4 |     browsers: ['PhantomJS'],
 5 |     frameworks: ['browserify', 'jasmine'],
 6 |     files: ['test/unit/**/*.js'],
 7 |     reporters: ['spec'],
 8 |     preprocessors: {
 9 |       'test/unit/**/*.js': ['browserify']
10 |     },
11 |     browserify: {
12 |       debug: true,
13 |       // needed to enable mocks
14 |       plugin: [require('proxyquireify').plugin]
15 |     },
16 |     // if you want to continuously re-run tests on file-save,
17 |     // replace the following line with `autoWatch: true`
18 |     singleRun: true
19 |   })
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "croud-vue-semantic",
 3 |   "version": "1.2.2",
 4 |   "description": "Vue Components for the semantic ui library",
 5 |   "main": "vue-semantic.js",
 6 |   "browserify": {
 7 |     "transform": [
 8 |       "vueify",
 9 |       "babelify"
10 |     ]
11 |   },
12 |   "scripts": {
13 |     "test": "echo \"Error: no test specified\" && exit 1",
14 |     "styleguide": "node_modules/vue-styleguidist/bin/styleguidist.js server server",
15 |     "styleguide:build": "node_modules/vue-styleguidist/bin/styleguidist.js build"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/CroudSupport/vue-semantic.git"
20 |   },
21 |   "keywords": [
22 |     "Vue",
23 |     "plugin",
24 |     "semantic",
25 |     "ui"
26 |   ],
27 |   "author": "Brock Reece",
28 |   "license": "ISC",
29 |   "bugs": {
30 |     "url": "https://github.com/CroudSupport/vue-semantic/issues"
31 |   },
32 |   "homepage": "https://github.com/CroudSupport/vue-semantic#readme",
33 |   "dependencies": {
34 |     "underscore": "^1.8.3"
35 |   },
36 |   "devDependencies": {
37 |     "babel-core": "^6.0.0",
38 |     "babel-plugin-transform-runtime": "^6.0.0",
39 |     "babel-preset-es2015": "^6.0.0",
40 |     "babel-preset-stage-2": "^6.0.0",
41 |     "babel-runtime": "^6.0.0",
42 |     "babelify": "^7.2.0",
43 |     "browserify": "^12.0.1",
44 |     "jasmine-core": "^2.4.1",
45 |     "karma": "^0.13.15",
46 |     "karma-browserify": "^4.4.2",
47 |     "karma-jasmine": "^0.3.6",
48 |     "karma-phantomjs-launcher": "^1.0.0",
49 |     "karma-spec-reporter": "0.0.23",
50 |     "phantomjs-prebuilt": "^2.1.3",
51 |     "proxyquireify": "^3.0.1",
52 |     "semantic-ui": "^2.2.10",
53 |     "vue": "^2.4.0",
54 |     "vue-hot-reload-api": "^2.0.5",
55 |     "vue-styleguidist": "^1.1.5",
56 |     "vueify": "^8.5.2",
57 |     "webpack": "^2.0.0"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/Accordion.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="accordionClasses">
 3 |         <span v-for="item in items">
 4 |             <div class="title">
 5 |                 <i class="dropdown icon"></i>
 6 |                 {{ item.title }}
 7 |             </div>
 8 |             <div class="content">{{ item.content }}</div>
 9 |         </span>
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 |     /**
15 |      * Wrapper for the Semantic UI Accordion
16 |      *
17 |      * @see https://semantic-ui.com/modules/accordion.html
18 |      * @example ./SemanticAccordion.md
19 |     */
20 | 
21 |     export default {
22 |         name: 'semantic-accordion',
23 | 
24 |         props: {
25 |             /**
26 |              *  A list of Items to display in the Accordion
27 |              */
28 |             items: {
29 |                 type: Array,
30 |                 required: true,
31 |             },
32 |             
33 |             /**
34 |              *  Open the last Item in the Accordion by default as opposed to the first
35 |              */
36 |             openLast: {
37 |                 type: Boolean,
38 |                 default: false,
39 |             },
40 |             
41 |             /**
42 |              * Create Styled accordion
43 |              * @see https://semantic-ui.com/modules/accordion.html#styled
44 |              */
45 |             styled: {
46 |                 type: Boolean,
47 |                 default: true,
48 |             },
49 |             
50 |             /**
51 |              * Create fluid accordion
52 |              * @see https://semantic-ui.com/modules/accordion.html#fluid
53 |              */
54 |             fluid: {
55 |                 type: Boolean,
56 |                 default: true,
57 |             },
58 | 
59 |             /**
60 |              * Additional Config options
61 |              * @see https://semantic-ui.com/modules/accordion.html#/settings
62 |              */
63 |             settings: {
64 |                 type: Object,
65 |                 default() {
66 |                     return {};
67 |                 }
68 |             },
69 |         },
70 |         data() {
71 |             return {
72 |             }
73 |         },
74 |         mounted() {
75 |             $(this.$el).accordion(this.settings).accordion('open', this.openLast ? this.items.length -1 : 0)
76 |         },
77 |         computed: {
78 |             accordionClasses() {
79 |                 return {
80 |                     ui: true,
81 |                     accordion: true,
82 |                     fluid: typeof this.fluid !== 'undefined' && this.fluid !== false,
83 |                     styled: typeof this.styled !== 'undefined' && this.styled !== false,
84 |                 }
85 |             },
86 |         }
87 |     }
88 | </script>
89 | 


--------------------------------------------------------------------------------
/src/Checkbox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="checkboxClasses">
 3 |         <input :name="name" type="checkbox" v-model="checkboxValue" @change="notify" :disabled="this.disabled">
 4 |         <label @click="toggle">{{ ( model && labelChecked ? labelChecked : label) }}</label>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     /**
10 |     * Simple Semanitc Checkbox
11 |     *
12 |     * @example ./SemanticCheckbox.md
13 |     */
14 | 
15 |     export default {
16 |         name: 'semantic-checkbox',
17 | 
18 |         model: {
19 |             prop: 'model'
20 |         },
21 |         props: {
22 |             /**
23 |              * v-model to attach input to
24 |              */
25 |             model: {
26 |                 type: Boolean,
27 |             },
28 |             /**
29 |              * Checkbox label
30 |              */
31 |             label: {
32 |                 type: String,
33 |             },
34 |             /**
35 |              * @ignore
36 |              */
37 |             labelChecked: {},
38 |             /**
39 |              * Disable the checkbox
40 |              */
41 |             disabled: {},
42 |             /**
43 |              * Change the type of the checkbox
44 |              */
45 |             type: {
46 |                 type: String,
47 |             },
48 |             /**
49 |              * Set input's Name Attr
50 |              */
51 |             name: {
52 |                 type: String,
53 |             },
54 |         },
55 |         computed: {
56 |             checkboxClasses() {
57 |                 return {
58 |                     ui: true,
59 |                     checkbox: true,
60 |                     disabled: typeof this.disabled !== 'undefined' && this.disabled !== false,
61 |                     slider: this.type === 'slider',
62 |                     toggle: this.type === 'toggle',
63 |                 }
64 |             },
65 |             checkboxValue() {
66 |                 return this.model
67 |             },
68 |         },
69 |         methods : {
70 |             notify(event) {
71 |                 this.$nextTick(() => {
72 |                     this.$emit('checkbox-clicked', !event.target.checked, event);
73 |                     this.$emit('input', event.target.checked);
74 |                 })
75 |             },
76 |             toggle(e) {
77 |                 if (!this.disabled)
78 |                 this.$emit('input', !this.checkboxValue);
79 |             }
80 |         }
81 |     }
82 | </script>
83 | 


--------------------------------------------------------------------------------
/src/Column.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="columnClasses">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         props: {
10 |             width: {},
11 |         },
12 |         computed: {
13 |             columnClasses() {
14 |                 const classes = {
15 |                     ui: true,
16 |                     column:true,
17 |                 }
18 |                 if (typeof this.width !== 'undefined') {
19 |                     classes[this.width] = true
20 |                     classes.wide = true
21 |                 }
22 |                 return classes
23 |             },
24 |         },
25 |     }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/Divider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="dividerClasses">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         props: {
10 |             fitted: {},
11 |             header: {},
12 |             hidden: {},
13 |             horizontal: {},
14 |             inverted: {},
15 |             section: {},
16 |             vertical: {},
17 |         },
18 |         computed: {
19 |             dividerClasses() {
20 |                 return {
21 |                     ui: true,
22 |                     inverted: typeof this.inverted !== 'undefined' && this.inverted !== false,
23 |                     fitted: typeof this.fitted !== 'undefined' && this.fitted !== false,
24 |                     horizontal: typeof this.horizontal !== 'undefined' && this.horizontal !== false,
25 |                     vertical: typeof this.vertical !== 'undefined' && this.vertical !== false,
26 |                     hidden: typeof this.hidden !== 'undefined' && this.hidden !== false,
27 |                     section: typeof this.section !== 'undefined' && this.section !== false,
28 |                     divider: true,
29 |                     header: typeof this.header !== 'undefined' && this.header !== false,
30 |                 }
31 |             },
32 |         },
33 |     }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/Dropdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div :id="element_id" class="ui fluid search selection dropdown">
 3 |     <input type="hidden" :name="name" :value="selection">
 4 |     <i class="dropdown icon"></i>
 5 |     <div class="default text">{{default_text}}</div>
 6 |     <div class="menu dropdown_menu">
 7 |         <slot></slot>
 8 |     </div>
 9 | </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 | 
15 |     props: {
16 |         name: {},
17 |         selection: {},
18 |         element_id: {
19 |             default : 'dropdown',
20 |         },
21 |         default_text: {
22 |             default : 'Choose an option',
23 |         },
24 |         transition: {
25 |             default : 'fade down'
26 |         },
27 |         full_text_search : {
28 |             default : false
29 |         },
30 |     },
31 |     mounted() {
32 |         $(`#${this.element_id}`).dropdown({
33 |             transition: this.transition,
34 |             fullTextSearch : this.full_text_search,
35 |             onChange: (value, text, $choice) => {
36 |                 if (this.selection) this.selection = value;
37 |                 this.$emit('dropdown-changed', value);
38 |             }
39 |         });
40 |     }
41 | }
42 | </script>
43 | 
44 | <style>
45 | .ui.fluid.dropdown,
46 | .ui.search.dropdown>.menu {
47 |     box-sizing: border-box;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/FormDropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :class="dropdownClasses">
  3 |         <input type="hidden" :name="name" v-model="value">
  4 |         <div class="default text">{{ placeholder }}</div>
  5 |         <i class="dropdown icon"></i>
  6 |         <div class="menu dropdown_menu">
  7 |             <slot></slot>
  8 |             <div v-for="option in items" class="item" :data-value="option.id" :data-text="option.name">{{ option.name}}</div>
  9 |         </div>
 10 |     </div>
 11 | </template>
 12 | 
 13 | <script>
 14 |     import _ from 'underscore'
 15 | 
 16 |     /**
 17 |      * Semantic Dropdown optimised for use in Forms
 18 |      *
 19 |      * @see https://semantic-ui.com/modules/dropdown.html#/definition
 20 |      * @example ./SemanticFormDropdown.md
 21 |      */
 22 |     export default {
 23 |         name: 'semantic-form-dropdown',
 24 | 
 25 |         props: {
 26 |             /**
 27 |              * Dropdown options
 28 |              */
 29 |             options: {
 30 |                 type: Array,
 31 |                 required: true,
 32 |             },
 33 | 
 34 |             /**
 35 |              * v-model alias
 36 |              */
 37 |             value: {
 38 |                 type: String | Number,
 39 |                 required: true,
 40 |             },
 41 | 
 42 |             /**
 43 |              * Placeholder text
 44 |              */
 45 |             placeholder: {
 46 |                 type: String,
 47 |                 default: '',
 48 |             },
 49 | 
 50 |             /**
 51 |              * Input name attribute
 52 |              */
 53 |             name: {
 54 |                 type: String,
 55 |                 default: '',
 56 |             },
 57 | 
 58 |             /**
 59 |              * Fluid styling flag
 60 |              */
 61 |             fluid: {
 62 |                 type: Boolean,
 63 |             },
 64 | 
 65 |             /**
 66 |              * Search dropdown flag
 67 |              */
 68 |             search: {
 69 |                 type: Boolean,
 70 |             },
 71 | 
 72 |             /**
 73 |              * Inline styling flag
 74 |              */
 75 |             inline: {
 76 |                 type: Boolean,
 77 |             },
 78 | 
 79 |             /**
 80 |              * Multiple dropdown flag
 81 |              */
 82 |             multiple: {
 83 |                 type: Boolean,
 84 |             },
 85 | 
 86 |             /**
 87 |              * Disabled dropdown flag
 88 |              */
 89 |             disabled: {
 90 |                 type: Boolean,
 91 |             },
 92 | 
 93 |             /**
 94 |              * Allow full text search in dropdown
 95 |              */
 96 |             full_text_search : {
 97 |                 type: Boolean,
 98 |                 default : false
 99 |             },
100 | 
101 |             /**
102 |              * Allow additions on multiple dropdowns
103 |              */
104 |             allow_additions : {
105 |                 default : false
106 |             },
107 | 
108 |             /**
109 |              * Field of options objects to use as the **value**
110 |              */
111 |             value_field: {
112 |                 default: 'id',
113 |             },
114 | 
115 |             /**
116 |              * Field of options objects to show in the dropdown as the **text**
117 |              */
118 |             title_field: {
119 |                 default: 'name',
120 |             },
121 | 
122 |             /**
123 |              * Additional semantic dropdown settings
124 |              * @see https://semantic-ui.com/modules/dropdown.html#/settings
125 |              */
126 |             settings : {
127 |                 type : Object,
128 |                 default: () => {}
129 |             },
130 | 
131 |             /**
132 |              * Update the dropdown if the v-model or options change
133 |              */
134 |             autoUpdate: {
135 |                 type: Boolean,
136 |                 default: true,
137 |             },
138 | 
139 |             /**
140 |              * Reload the dropdown if options change
141 |              */
142 |             autoUpdateOptions: {
143 |                 type: Boolean,
144 |                 default: true,
145 |             },
146 |         },
147 | 
148 |         computed: {
149 |             dropdownClasses() {
150 |                 return {
151 |                     ui: true,
152 |                     selection: typeof this.inline === 'undefined' || !this.inline,
153 |                     dropdown: true,
154 |                     search: typeof this.search !== 'undefined' && this.search !== false,
155 |                     fluid: typeof this.fluid !== 'undefined' && this.fluid !== false,
156 |                     multiple: typeof this.multiple !== 'undefined' && this.multiple !== false,
157 |                     inline: typeof this.inline !== 'undefined' && this.inline !== false,
158 |                     disabled: typeof this.disabled !== 'undefined' && this.disabled !== false,
159 |                 }
160 |             },
161 | 
162 |             items() {
163 |                 return this.options.map((option) => {
164 |                     return {
165 |                         id: option[this.value_field],
166 |                         name: option[this.title_field],
167 |                     }
168 |                 })
169 |             },
170 |         },
171 | 
172 |         methods : {
173 |             loadDropdown () {
174 | 
175 |                 const settings = _.extend({}, {
176 |                     allowAdditions : this.allow_additions,
177 |                     fullTextSearch : this.full_text_search,
178 |                     onChange : (value, text, $choice) => {
179 |                         this.$emit('input', value)
180 |                         this.$emit('dropdown-selected', value)
181 |                     }
182 |                 }, this.settings)
183 | 
184 |                 $(this.$el).dropdown(settings)
185 |             }
186 |         },
187 | 
188 |         mounted() {
189 |             this.loadDropdown()
190 |         },
191 | 
192 |         watch: {
193 |             value() {
194 |                 if (!this.autoUpdate) return
195 |                 this.$nextTick(() => {
196 |                     this.loadDropdown()
197 |                 })
198 |             },
199 |             options() {
200 |                 if (!this.autoUpdateOptions) return
201 |                 this.$nextTick(() => {
202 |                     this.loadDropdown()
203 |                 })
204 |             },
205 |         },
206 | 
207 |         events: {
208 |             'clear-dropdown'() {
209 |                 $(this.$el).dropdown('clear')
210 |             }
211 |         },
212 |     }
213 | </script>
214 | 


--------------------------------------------------------------------------------
/src/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="labelClasses">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         props: {
10 |             colour: {},
11 |             size: {},
12 |             pointing: {},
13 |             corner: {},
14 |             ribbon: {},
15 |             attached: {},
16 |             basic: {},
17 |             circular: {},
18 |             floating: {},
19 |             tag: {},
20 |         },
21 | 
22 |         computed: {
23 |             labelClasses() {
24 |                 const classes = {
25 |                     ui: true,
26 |                     basic: typeof this.basic !== 'undefined' && this.basic !== false,
27 |                     circular: typeof this.circular !== 'undefined' && this.circular !== false,
28 |                     floating: typeof this.floating !== 'undefined' && this.floating !== false,
29 |                     tag: typeof this.tag !== 'undefined' && this.tag !== false,
30 |                     label: true,
31 |                 }
32 | 
33 |                 if (typeof this.colour !== 'undefined') {
34 |                     classes[this.colour] = true
35 |                 }
36 | 
37 |                 if (typeof this.size !== 'undefined') {
38 |                     classes[this.size] = true
39 |                 }
40 | 
41 |                 if (typeof this.pointing !== 'undefined') {
42 |                     classes['pointing'] = true
43 |                     classes[this.pointing] = true
44 |                 }
45 | 
46 |                 if (typeof this.corner !== 'undefined') {
47 |                     classes[this.corner] = true
48 |                     classes['corner'] = true
49 |                 }
50 | 
51 |                 if (typeof this.ribbon !== 'undefined') {
52 |                     classes[this.ribbon] = true
53 |                     classes['ribbon'] = true
54 |                 }
55 | 
56 |                 if (typeof this.attached !== 'undefined') {
57 |                     this.attached.split(" ").map((split) => {
58 |                         classes[split] = true
59 |                     })
60 |                     classes['attached'] = true
61 |                 }
62 | 
63 |                 return classes
64 |             },
65 |         },
66 |     }
67 | </script>
68 | 


--------------------------------------------------------------------------------
/src/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="loadingClasses">{{ text }}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 |     /**
 7 |      * Wrapper for the Semantic Loader
 8 |      * 
 9 |      * @see https://semantic-ui.com/elements/loader.html
10 |      * @example ./SemanticLoading.md
11 |      */
12 |     export default {
13 |         name: 'semantic-loading',
14 | 
15 |         props: {
16 |             /**
17 |              * Whether to show the loader or not
18 |              */
19 |             active: {
20 |                 type: Boolean,
21 |                 default: true,
22 |             },
23 | 
24 |             /**
25 |              * Text displayed under the spinner
26 |              */
27 |             text: {
28 |                 type: String,
29 |                 default: 'Loading...',
30 |             },
31 | 
32 |             /**
33 |              * Size of the loader
34 |              * @see https://semantic-ui.com/elements/loader.html#size
35 |              */
36 |             size: {
37 |                 type: String,
38 |             },
39 | 
40 |             /**
41 |              * Inline loader
42 |              * @see https://semantic-ui.com/elements/loader.html#inline
43 |              */
44 |             inline: {
45 |                 type: Boolean,
46 |             },
47 | 
48 |             /**
49 |              * Inverted loader
50 |              * @see https://semantic-ui.com/elements/loader.html#inverted
51 |              */
52 |             inverted: {
53 |                 type: Boolean,
54 |             },
55 | 
56 |             /**
57 |              * Center the loader
58 |              * @see https://semantic-ui.com/elements/loader.html#inline-center
59 |              */
60 |             centered: {
61 |                 type: Boolean,
62 |             },
63 |         },
64 | 
65 |         computed: {
66 |             loadingClasses() {
67 |                 const classes = {
68 |                     ui: true,
69 |                     loader: true,
70 |                     text: this.text ? true : false,
71 |                     active: this.active ? true : false,
72 |                     inline: typeof this.inline !== 'undefined' && this.inline !== false,
73 |                     inverted: typeof this.inverted !== 'undefined' && this.inverted !== false,
74 |                     centered: typeof this.centered !== 'undefined' && this.centered !== false,
75 |                 }
76 | 
77 |                 if (this.size) {
78 |                     classes[this.size] = true
79 |                 }
80 | 
81 |                 return classes
82 |             },
83 |         },
84 |     }
85 | </script>
86 | 


--------------------------------------------------------------------------------
/src/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="messageClasses">
 3 |         <i class="close icon" v-if="dismissable" @click="this.show=false"></i>
 4 |         <slot></slot>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     export default {
10 |         props: {
11 |             size: {},
12 |             type: {},
13 |             show: {
14 |                 default: true,
15 |             },
16 |             dismissable: {
17 |                 default: false,
18 |             },
19 |         },
20 |         computed: {
21 |             messageClasses() {
22 |                 return {
23 |                     'ui': true,
24 |                     'message': true,
25 |                     'success': this.type === 'success',
26 |                     'warning': this.type === 'warning',
27 |                     'error': this.type === 'error',
28 |                     'small': this.size === 'small',
29 |                     'large': this.size === 'large',
30 |                 };
31 |             },
32 |         },
33 |     }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/Modal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :class="modalClasses">
  3 |         <i v-if="showCloseIcon" class="close icon"></i>
  4 |         <slot name="header">
  5 |             <div v-if="title" class="header" v-html="title"></div>
  6 |         </slot>
  7 |         <div :class="contentClasses">
  8 |             <div v-if="icon" class="ui medium image">
  9 |                 <i class="user icon"></i>
 10 |             </div>
 11 |             <div class="description">
 12 |                 <slot></slot>
 13 |             </div>
 14 |         </div>
 15 |         <slot name="actions">
 16 |             <div v-if="approve || deny" class="actions">
 17 |                 <div class="ui deny button">
 18 |                     Cancel
 19 |                 </div>
 20 |                 <div class="ui yellow approve right labeled icon button">
 21 |                     Continue
 22 |                     <i class="checkmark icon"></i>
 23 |                 </div>
 24 |             </div>
 25 |         </slot>
 26 |     </div>
 27 | </template>
 28 | 
 29 | <script>
 30 |     import _ from 'underscore'
 31 | 
 32 | 
 33 |     /**
 34 |      * Semantic Modal Component
 35 |      * @example ./SemanticModal.md
 36 |      */
 37 |     export default {
 38 |         name: 'semantic-modal',
 39 | 
 40 |         model: {
 41 |             prop: 'active',
 42 |         },
 43 | 
 44 |         props: {
 45 |             /**
 46 |              * The title displayed in the top bar of the modal
 47 |              */
 48 |             title: {
 49 |                 type: String,
 50 |             },
 51 | 
 52 |             /**
 53 |              * The size of the modal
 54 |              * @see https://semantic-ui.com/modules/modal.html#size
 55 |              */
 56 |             size: {
 57 |                 type: String,
 58 |             },
 59 | 
 60 |             /**
 61 |              * Show image content
 62 |              * @see https://semantic-ui.com/modules/modal.html#image-content
 63 |              */
 64 |             icon: {
 65 |                 type: String,
 66 |             },
 67 | 
 68 |             /**
 69 |              * State of the modal, alias for v-model
 70 |              */
 71 |             active: {
 72 |                 type: Boolean,
 73 |                 default: false,
 74 |             },
 75 | 
 76 |             /**
 77 |              * Pass through function to show and handle **Continue** CTA button
 78 |              */
 79 |             approve: {
 80 |                 type: Function,
 81 |             },
 82 | 
 83 |             /**
 84 |              * Pass through function to show and handle **Cancel** button
 85 |              */
 86 |             deny: {
 87 |                 type: Function,
 88 |             },
 89 | 
 90 |             /**
 91 |              * Whether any change in modal DOM should automatically refresh cached positions
 92 |              */
 93 |             observeChanges: {
 94 |                 type: Boolean,
 95 |                 default: true,
 96 |             },
 97 | 
 98 |             /**
 99 |              * Additional custom settings
100 |              * @see https://semantic-ui.com/modules/modal.html#/settings
101 |              */
102 |             settings : {
103 |                 type: Object,
104 |                 default: () => {}
105 |             }
106 |         },
107 | 
108 |         events : {
109 |             'refresh-modal' : function() {
110 |                 $(this.$el).modal("refresh");
111 |             }
112 |         },
113 | 
114 |         computed: {
115 |             // closeable is closable in semantic ui
116 |             showCloseIcon()
117 |             {
118 |                 return this.settings && this.settings.closable_button || this.settings.closeable_button
119 |             },
120 |             modalClasses() {
121 |                 return {
122 |                     ui: true,
123 |                     small: this.size === 'small',
124 |                     large: this.size === 'large',
125 |                     fullscreen: this.size === 'fullscreen',
126 |                     long: true,
127 |                     modal: true,
128 | 
129 |                 }
130 |             },
131 |             contentClasses() {
132 |                 if (this.settings && this.settings.content_classes)
133 |                     return this.settings.content_classes
134 | 
135 |                 return {
136 |                     image: true,
137 |                     content: true,
138 |                 }
139 |             },
140 |         },
141 | 
142 |         methods: {
143 |             hide() {
144 |                 this.$emit('input', false)
145 |                 this.$emit('close-modal', false)
146 |             },
147 |         },
148 | 
149 |         mounted() {
150 |             const $this = this
151 |             const settings = _.extend({
152 |                 onHide: $this.hide.bind($this),
153 |                 onApprove: $this.approve ? $this.approve : function() {
154 |                     $this.$emit('input', false)
155 |                 },
156 |                 onDeny: $this.deny ? $this.deny : function() {
157 |                     $this.$emit('input', false)
158 |                 },
159 |                 onVisible: function () {
160 |                     $(this.$el).modal("refresh");
161 | 
162 |                 },
163 |                  observeChanges: this.observeChanges,
164 |             }, this.settings)
165 | 
166 |             $(this.$el).modal(settings);
167 |         },
168 | 
169 |         watch: {
170 |             active() {
171 |                 $(this.$el).modal("refresh").modal('toggle')
172 |             },
173 |         },
174 |     }
175 | </script>
176 | 


--------------------------------------------------------------------------------
/src/Popup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :class="modalClasses">
  3 |         <i class="close icon"></i>
  4 |         <slot name="header">
  5 |             <div v-if="title" class="header">
  6 |                 {{ title }}
  7 |             </div>
  8 |         </slot>
  9 |         <div :class="contentClasses">
 10 |             <div v-if="icon" class="ui medium image">
 11 |                 <i class="user icon"></i>
 12 |             </div>
 13 |             <div class="description">
 14 |                 <slot></slot>
 15 |             </div>
 16 |         </div>
 17 |         <slot name="actions">
 18 |             <div v-if="approve || deny" class="actions">
 19 |                 <div class="ui deny button">
 20 |                     Cancel
 21 |                 </div>
 22 |                 <div class="ui yellow approve right labeled icon button">
 23 |                     Continue
 24 |                     <i class="checkmark icon"></i>
 25 |                 </div>
 26 |             </div>
 27 |         </slot>
 28 |     </div>
 29 | </template>
 30 | 
 31 | <script>
 32 |     import _ from 'underscore'
 33 | 
 34 |     export default {
 35 |         props: {
 36 |             title: {
 37 |                 type: String,
 38 |             },
 39 |             size: {
 40 |                 type: String,
 41 |             },
 42 |             icon: {
 43 |                 type: String,
 44 |             },
 45 |             active: {
 46 |                 type: Boolean,
 47 |                 default: false,
 48 |             },
 49 |             approve: {
 50 |                 type: Function,
 51 |             },
 52 |             deny: {
 53 |                 type: Function,
 54 |             },
 55 |             observeChanges: {
 56 |                 default: true,
 57 |             },
 58 |             settings : {
 59 |                 type: Object,
 60 |                 default: () => {}
 61 |             }
 62 |         },
 63 | 
 64 |         events : {
 65 |             'refresh-modal' : function() {
 66 |                 $(this.$el).modal("refresh");
 67 |             }
 68 |         },
 69 | 
 70 |         computed: {
 71 |             modalClasses() {
 72 |                 return {
 73 |                     ui: true,
 74 |                     small: this.size === 'small',
 75 |                     large: this.size === 'large',
 76 |                     fullscreen: this.size === 'fullscreen',
 77 |                     long: true,
 78 |                     modal: true,
 79 | 
 80 |                 }
 81 |             },
 82 |             contentClasses() {
 83 |                 return {
 84 |                     image: true,
 85 |                     content: true,
 86 |                 }
 87 |             },
 88 |         },
 89 | 
 90 |         methods: {
 91 |             hide() {
 92 |                 this.active = false
 93 |             },
 94 |         },
 95 | 
 96 |         mounted() {
 97 |             const $this = this
 98 |             const settings = _.extend({
 99 |                 onHide: $this.hide.bind($this),
100 |                 onApprove: $this.approve ? $this.approve : function() {
101 |                     $this.active = false
102 |                 },
103 |                 onDeny: $this.deny ? $this.deny : function() {
104 |                     $this.active = false
105 |                 },
106 |                 onVisible: function () {
107 |                     $(this.$el).modal("refresh");
108 | 
109 |                 },
110 |                  observeChanges: this.observeChanges,
111 |             }, this.settings)
112 | 
113 |             $(this.$el).modal(settings);
114 |         },
115 | 
116 |         watch: {
117 |             active() {
118 |                 $(this.$el).modal("refresh").modal('toggle')
119 |             },
120 |         },
121 |     }
122 | </script>
123 | 


--------------------------------------------------------------------------------
/src/Radiobutton.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="ui form">
  3 |         <div class="fields" :class="{[formType]: true}">
  4 |             <slot></slot>
  5 |             <div class="field" v-for="option in options" :key="option.value">
  6 |                 <div :class="radioButtonClasses">
  7 |                     <input type="radio" :name="name" :value="option.value" v-model="radioValue" :disabled="disabled">
  8 |                     <label @click="toggle(option.value)">{{option.label}}</label>
  9 |                 </div>
 10 |             </div>
 11 |         </div>
 12 |     </div>
 13 | </template>
 14 | 
 15 | <script>
 16 |     /**
 17 |      * Semantic Radio button component
 18 |      * 
 19 |      * @see https://semantic-ui.com/modules/checkbox.html#radio
 20 |      * @example ./SemanticRadiobutton.md
 21 |      */
 22 |     export default {
 23 |         name: 'semantic-radiobutton',
 24 | 
 25 |         model: {
 26 |             prop: 'model'
 27 |         },
 28 |         
 29 |         props: {
 30 |             /**
 31 |              * Alias for v-model
 32 |              */
 33 |             model: {
 34 |                 type: String | Number,
 35 |                 required: true,
 36 |             },
 37 | 
 38 |             /**
 39 |              * Array of radio option objects in {value: 1, label: 'One'} format.
 40 |              * 
 41 |              * Also now maps to a Croud data friendly {id: 1, name: 'One'} format.
 42 |              */
 43 |             data: {
 44 |                 type: Array,
 45 |                 required: true,
 46 |             },
 47 | 
 48 |             /**
 49 |              * Disabled flag
 50 |              */
 51 |             disabled: {
 52 |                 type: Boolean,
 53 |             },
 54 | 
 55 |             /**
 56 |              * Radio button type
 57 |              */
 58 |             type: {
 59 |                 default: 'radio',
 60 |             },
 61 | 
 62 |             /**
 63 |              * The type of the field wrapper, grouped | inline
 64 |              */
 65 |             formType: {
 66 |                 type: String,
 67 |                 default: 'grouped',
 68 |             },
 69 | 
 70 |             /**
 71 |              * Input html name attribute
 72 |              */
 73 |             name: {
 74 |                 type: String,
 75 |                 default: '',
 76 |             },
 77 |         },
 78 | 
 79 |         methods: {
 80 |             toggle(value) {
 81 |                 if (!this.disabled)
 82 |                 this.radioValue = value
 83 |             }
 84 |         },
 85 | 
 86 |         computed: {
 87 |             options() {
 88 |                 return this.data.map((option) => {
 89 |                     option.value = option.value || option.id
 90 |                     option.label = option.label || option.name
 91 | 
 92 |                     return option
 93 |                 })
 94 |             },
 95 | 
 96 |             radioValue: {
 97 |                 get() {
 98 |                     return this.model
 99 |                 },
100 |                 set(val) {
101 |                     this.$emit('selection-changed', val)
102 |                     this.$emit('radio', val)
103 |                     this.$emit('input', val)
104 |                 },
105 |             },
106 | 
107 |             radioButtonClasses() {
108 |                 return {
109 |                     ui: true,
110 |                     radio: true,
111 |                     checkbox: true,
112 |                     disabled: typeof this.disabled !== 'undefined' && this.disabled !== false,
113 |                     slider: this.type === 'slider',
114 |                     toggle: this.type === 'toggle',
115 |                 }
116 |             },
117 |         },
118 |     }
119 | 
120 | </script>
121 | 


--------------------------------------------------------------------------------
/src/Readme.md:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/Reveal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="ui move reveal">
 3 |         <div class="visible content">
 4 |             <slot name="visible"></slot>
 5 |         </div>
 6 |         <div class="hidden content">
 7 |             <slot name="hidden"></slot>
 8 |         </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |     export default {
14 |         
15 |     }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/Search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="ui search">
  3 |         <div :class="searchClasses">
  4 |             <input :name="name" class="prompt" type="text" :placeholder="placeholder" v-model="value">
  5 |             <slot></slot>
  6 |         </div>
  7 |         <div class="results"></div>
  8 |     </div>
  9 | </template>
 10 | 
 11 | <script>
 12 |     import _ from 'underscore'
 13 | 
 14 |     export default {
 15 |         model: {
 16 |             prop: 'model',
 17 |             event: 'input'
 18 |         },
 19 |         data() {
 20 |             return {
 21 |                 value: this.model,
 22 |             }
 23 |         },
 24 |         props: {
 25 |             name: {},
 26 |             model: {},
 27 |             url: {},
 28 |             local: {},
 29 |             searchDelay: {
 30 |                 default: 100,
 31 |             },
 32 |             placeholder: {
 33 |                 default: 'Search...',
 34 |             },
 35 |             fields: {
 36 |                 type : Object,
 37 |                 default: () => {}
 38 |             },
 39 |             sanitize: {
 40 |                 default: function(response) {
 41 |                     return response
 42 |                 }
 43 |             },
 44 |             auth: {
 45 |                 type: Object,
 46 |                 default: () => {
 47 |                     return {
 48 |                         token: false,
 49 |                         type: 'Bearer',
 50 |                         headerKey: 'Authorization',
 51 |                     }
 52 |                 },
 53 |             },
 54 |             action: {},
 55 |             fluid: {},
 56 |             disabled: {},
 57 |             icon: {},
 58 |             settings : {
 59 |                 type : Object,
 60 |                 default: () => {}
 61 |             }
 62 |         },
 63 | 
 64 |         mounted() {
 65 |             const $this = this,
 66 |                 searchOptions = _.extend({}, {
 67 |                     onSelect(result) {
 68 |                         $this.$emit('select', result)
 69 |                     },
 70 |                     searchDelay: this.searchDelay,
 71 |                 }, this.settings)
 72 | 
 73 |             if (typeof this.local !== 'undefined') {
 74 |                 searchOptions.source = this.local
 75 |             } else {
 76 |                 searchOptions.apiSettings = {
 77 |                     url: this.url,
 78 |                     onResponse: this.sanitize,
 79 |                     beforeXHR (xhr) {
 80 |                         if($this.computedAuth.token !== false) {
 81 |                             xhr.setRequestHeader ($this.computedAuth.headerKey, `${$this.computedAuth.type} ${$this.computedAuth.token}`);
 82 |                         }
 83 |                         return xhr
 84 |                     },
 85 |                 }
 86 |                 searchOptions.fields = this.fields
 87 |             }
 88 | 
 89 |             $(this.$el).search(searchOptions)
 90 |         },
 91 | 
 92 |         computed: {
 93 |             computedAuth() {
 94 |                 return $.extend({
 95 |                         token: false,
 96 |                         type: 'Bearer',
 97 |                         headerKey: 'Authorization',
 98 |                     }, this.auth);
 99 |             },
100 |             searchClasses() {
101 |                 return {
102 |                     ui: true,
103 |                     input: true,
104 |                     action: typeof this.action !== 'undefined' && this.action !== false,
105 |                     fluid: typeof this.fluid !== 'undefined' && this.fluid !== false,
106 |                     icon: typeof this.icon !== 'undefined' && this.icon !== false,
107 |                     disabled: typeof this.disabled !== 'undefined' && this.disabled !== false,
108 |                 }
109 |             },
110 |         },
111 |         watch: {
112 |             value() {
113 |                 this.$emit('input', this.value)
114 |             },
115 |             model() {
116 |                 this.value = this.model
117 |             }
118 |         },
119 |     }
120 | </script>
121 | 


--------------------------------------------------------------------------------
/src/SemanticAccordion.md:
--------------------------------------------------------------------------------
 1 | ### Basic usage
 2 | 
 3 |     <semantic-accordion :items="[
 4 |         { title: 'SCALABILITY & STRATEGY', content: 'We have over 1,000 experts on our Network. They give us the ability to scale up or down depending on our clients requirements at a moments notice.' },
 5 |         { title: 'OUR CROUDIES', content: 'Are a talented bunch. We have sourced the top experts in PPC, SEO, Content, Display, Programmatic and Paid Social from around the world.'},
 6 |     ]," class="example"></semantic-accordion>
 7 | 
 8 | ### Styling
 9 | You can use the **styled**, **fluid** and **open-last** prop to change the appearance of the accordion
10 | 
11 |     <semantic-accordion :styled="false" :open-last="true" :items="[
12 |         { title: 'SCALABILITY & STRATEGY', content: 'We have over 1,000 experts on our Network. They give us the ability to scale up or down depending on our clients requirements at a moments notice.' },
13 |         { title: 'OUR CROUDIES', content: 'Are a talented bunch. We have sourced the top experts in PPC, SEO, Content, Display, Programmatic and Paid Social from around the world.'},
14 |     ]," class="example"></semantic-accordion>
15 | 


--------------------------------------------------------------------------------
/src/SemanticCheckbox.md:
--------------------------------------------------------------------------------
 1 | ### Basic usage
 2 | 
 3 |     <semantic-checkbox v-model="checkbox" label="🍕 Pizza" />
 4 | 
 5 | ### Styling
 6 | Pass through the **type** prop to change the style of checkbo
 7 | 
 8 |     <div class="ui form">
 9 |         <div class="ui field">
10 |             <semantic-checkbox v-model="checkbox" label="Checkbox" />
11 |         </div>
12 |         <div class="ui field">
13 |             <semantic-checkbox v-model="checkbox" label="Slider" type="slider"/>
14 |         </div>
15 |         <div class="ui field">
16 |             <semantic-checkbox v-model="checkbox" label="Toggle" type="toggle" />
17 |         </div>
18 |     </div>
19 | 
20 | ### Disabled
21 | 
22 |     <semantic-checkbox label="🍕 Pizza" type="toggle" :disabled="true"/>
23 | 
24 | ### Events
25 | This component emits the **checkbox-clicked** event evert time the event is clicked
26 | 
27 |     <semantic-checkbox label="🍕 Pizza" type="toggle" @checkbox-clicked="(val) => { console.log(val) }"/>


--------------------------------------------------------------------------------
/src/SemanticFormDropdown.md:
--------------------------------------------------------------------------------
 1 | ### Basic usage
 2 |     
 3 |     <semantic-form-dropdown v-model="dropdownVal" :options="[{id: 1, name: 'Foo'},{id: 2, name: 'Bar'}]"></semantic-form-dropdown>
 4 | 
 5 | ### Styling
 6 | You can use the props to change the styling of the dropdown
 7 | 
 8 |     <div class="ui form">
 9 |         <div class="field">
10 |             <label>Fluid</label>
11 |             <semantic-form-dropdown fluid v-model="dropdownVal" :options="[{id: 1, name: 'Foo'},{id: 2, name: 'Bar'}]" />
12 |         </div>
13 | 
14 |         <div class="three fields">
15 |             <div class="field">
16 |                 <label>Search</label>
17 |                 <semantic-form-dropdown search v-model="dropdownVal" :options="[{id: 1, name: 'Foo'},{id: 2, name: 'Bar'}]" />
18 |             </div>
19 |             <div class="field">
20 |                 <label>Multiple</label>
21 |                 <semantic-form-dropdown multiple v-model="dropdownVal" :options="[{id: 1, name: 'Foo'},{id: 2, name: 'Bar'}]" />
22 |             </div>
23 |             <div class="field">
24 |                 <label>Disabled</label>
25 |                 <semantic-form-dropdown :disabled="true" v-model="dropdownVal" :options="[{id: 1, name: 'Foo'},{id: 2, name: 'Bar'}]" />
26 |             </div>
27 |         </div>
28 | 
29 |         <div class="inline field">
30 |             <label>Inline</label>
31 |             <semantic-form-dropdown :inline="true" v-model="dropdownVal" :options="[{id: 1, name: 'Foo'},{id: 2, name: 'Bar'}]" />
32 |         </div>
33 |     </div>
34 | 
35 | ### Using slots
36 | The **default** slot allows you to add options to the top of the dropdown
37 | 
38 |     <semantic-form-dropdown v-model="dropdownVal" :options="[{id: 1, name: 'Foo'},{id: 2, name: 'Bar'}]">
39 |         <div class="item" v-data="3">Baz</div>
40 |         <div class="divider"></div>
41 |     </semantic-form-dropdown>
42 | 
43 | ### Handle Events
44 | This component emits the **dropdown-selected** event when an item is selected.
45 | 
46 |     <semantic-form-dropdown :value="dropdownVal" :options="[{id: 1, name: 'Foo'},{id: 2, name: 'Bar'}]" @dropdown-selected="(val) => { dropdownVal = val }"></semantic-form-dropdown>


--------------------------------------------------------------------------------
/src/SemanticLoading.md:
--------------------------------------------------------------------------------
 1 | ### Basic usage
 2 | 
 3 |     <div class="ui very padded basic segment">
 4 |         <semantic-loading :active="true"></semantic-loading>
 5 |     </div>
 6 | 
 7 | ### Change text
 8 | You can change the text of the spinner with the **text** prop
 9 | 
10 |     <div class="ui very padded basic segment">
11 |         <semantic-loading :active="true" text="Please wait..."></semantic-loading>
12 |     </div>
13 | 
14 | ### Styling
15 | You can change the appearance of the spinner with the **size**, **inline**, **inverted** and **centered** props
16 | 
17 |     <div class="ui inverted basic segment">
18 |         <semantic-loading :active="true" size="mini" :inline="true" :centered="false" :inverted="true"></semantic-loading>
19 |     </div>


--------------------------------------------------------------------------------
/src/SemanticModal.md:
--------------------------------------------------------------------------------
 1 | ### Basic usage
 2 |     
 3 |     <div>
 4 |         <button @click="showModal = true" class="ui button">Show</button>
 5 |         <semantic-modal v-model="showModal" :settings="{content_classes: {content: true}, closeable: true, closeable_button: true}" title="A Title">
 6 |             <p>
 7 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem id aliquam officiis voluptatibus, incidunt tempore quisquam, quae quasi fugit illo fuga mollitia dicta quaerat corporis expedita, suscipit iste eligendi. Maxime.
 8 |             </p>
 9 |         </semantic-modal>    
10 |     </div>
11 | 
12 | ### Using slots
13 | You can pass in slots for overriding the **actions** and the **header** elements.
14 | 
15 |     <div>
16 |         <button @click="showModal = true" class="ui button">Show</button>
17 |         <semantic-modal v-model="showModal" :settings="{content_classes: {content: true}, closeable: true, closeable_button: true}">
18 |             <div slot="header" class="header">
19 |                 <h1>Large Header</h1>
20 |             </div>
21 | 
22 |             <p>
23 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem id aliquam officiis voluptatibus, incidunt tempore quisquam, quae quasi fugit illo fuga mollitia dicta quaerat corporis expedita, suscipit iste eligendi. Maxime.
24 |             </p>
25 | 
26 |             <div slot="actions" class="actions">
27 |                 <button class="ui small button" @click="showModal = false">Cancel</button>
28 |                 <button class="ui small yellow button" @click="() => {showModal = false; $toasted.show('Action called')}">Call To Action</button>
29 |             </div>
30 |         </semantic-modal>    
31 |     </div>
32 | 
33 | 
34 | ### Handle Events
35 | This component emits the **close-modal** event before closing
36 | 
37 |     <div>
38 |         <button @click="showModal = true" class="ui button">Show</button>
39 |         <semantic-modal :active="showModal" :settings="{content_classes: {content: true}, closeable: true, closeable_button: true}" @close-modal="showModal = false">
40 |             <p>
41 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem id aliquam officiis voluptatibus, incidunt tempore quisquam, quae quasi fugit illo fuga mollitia dicta quaerat corporis expedita, suscipit iste eligendi. Maxime.
42 |             </p>
43 |         </semantic-modal>    
44 |     </div>


--------------------------------------------------------------------------------
/src/SemanticRadioButton.md:
--------------------------------------------------------------------------------
 1 | ### Basic Usage
 2 | You can pass a form label in as the **default** slot 
 3 | 
 4 |     <semantic-radiobutton v-model="radio" :data="[{value: 1, label: 'One'},{value: 2, label: 'Two'},{value: 3, label: 'Three'}]">
 5 |         <label>What is your favourite number?</label>
 6 |     </semantic-radiobutton>
 7 | 
 8 | 
 9 | ### Styling
10 | You can change the styling by passing in the **type** and **form-type** props
11 | 
12 |     <div class="ui form">
13 |         <div class="field">
14 |             <semantic-radiobutton v-model="radio" :data="[{value: 1, label: 'One'},{value: 2, label: 'Two'},{value: 3, label: 'Three'}]" type="slider">
15 |                 <label>Slider</label>
16 |             </semantic-radiobutton>
17 |         </div>
18 | 
19 |         <div class="field">
20 |             <semantic-radiobutton v-model="radio" :data="[{value: 1, label: 'One'},{value: 2, label: 'Two'},{value: 3, label: 'Three'}]" type="toggle">
21 |                 <label>Toggle</label>
22 |             </semantic-radiobutton>
23 |         </div>
24 | 
25 |         <div class="field">
26 |             <semantic-radiobutton v-model="radio" :data="[{value: 1, label: 'One'},{value: 2, label: 'Two'},{value: 3, label: 'Three'}]" form-type="inline">
27 |                 <label>Inline</label>
28 |             </semantic-radiobutton>
29 |         </div>
30 |         
31 |     </div>
32 | 
33 | ### Disabled
34 | You can use the disabled prop to lock the radio buttons
35 | 
36 |     <div>
37 |         <semantic-radiobutton v-model="radio" :data="[{value: 1, label: 'One'},{value: 2, label: 'Two'},{value: 3, label: 'Three'}]" :disabled="true">
38 |             <label>What is your favourite number?</label>
39 |         </semantic-radiobutton>
40 |     </div>
41 | 
42 | ### Events
43 | This component emits the **selection-changed** event every time the value changes
44 | 
45 |     <semantic-radiobutton v-model="radio" :data="[{value: 1, label: 'One'},{value: 2, label: 'Two'},{value: 3, label: 'Three'}]" @selection-changed="(val) => {}"/>


--------------------------------------------------------------------------------
/src/Statistic.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="segmentClasses">
 3 |         <div :class="statisticClasses">
 4 |             <div class="value">
 5 |                 <i v-if="icon" :class="iconClasses"></i>
 6 |                 <slot></slot>
 7 |             </div>
 8 |             <div class="label">
 9 |                 {{ label }}
10 |             </div>
11 |         </div>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 |     export default {
17 |         props: {
18 |             colour: {},
19 |             icon: {},
20 |             inverted: {},
21 |             size: {},
22 |             label: {
23 |                 required: true,
24 |             },
25 |         },
26 | 
27 |         computed: {
28 |             segmentClasses() {
29 |                 const classes = {
30 |                     ui: true,
31 |                     fluid: true,
32 |                     center: true,
33 |                     aligned: true,
34 |                     padded: true,
35 |                     segment: true,
36 |                     basic: !this.colour && !this.inverted,
37 |                 }
38 | 
39 |                 if (this.colour) {
40 |                     classes[this.colour] = true
41 |                 }
42 | 
43 |                 if (this.inverted) {
44 |                     classes.inverted = true
45 |                 }
46 | 
47 |                 return classes
48 |             },
49 | 
50 |             iconClasses() {
51 |                 const classes = {
52 |                     small: true,
53 |                     icon: true,
54 |                 }
55 | 
56 |                 if (this.colour && !this.inverted) {
57 |                     classes[this.colour] = true
58 |                 }
59 | 
60 |                 if (this.icon) {
61 |                     classes[this.icon] = true
62 |                 }
63 | 
64 |                 return classes
65 |             },
66 | 
67 |             statisticClasses() {
68 |                 const classes = {
69 |                     ui: true,
70 |                     statistic: true,
71 |                 }
72 | 
73 |                 if (this.colour && !this.icon && !this.inverted) {
74 |                     classes[this.colour] = true
75 |                 }
76 | 
77 |                 if (this.inverted) {
78 |                     classes.inverted = true
79 |                 }
80 | 
81 |                 if (this.size) {
82 |                     classes[this.size] = true
83 |                 }
84 | 
85 |                 return classes
86 |             },
87 |         },
88 |     }
89 | </script>
90 | 


--------------------------------------------------------------------------------
/src/elements/Icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <i :class="iconClasses"></i>
 3 | </template>
 4 | 
 5 | <script>
 6 |     import CommonProps from '../utils/CommonPropsMixin'
 7 |     export default {
 8 |         props: {
 9 |             bordered: {},
10 |             fitted: {},
11 |             flipped: {},
12 |             icon: {},
13 |             link: {},
14 |             rotated: {},
15 |         },
16 | 
17 |         mixins: [
18 |             CommonProps,
19 |         ],
20 | 
21 |         computed: {
22 |             iconClasses() {
23 |                 const classes = {
24 |                     bordered: typeof this.bordered !== 'undefined' && this.bordered !== false,
25 |                     fitted: typeof this.fitted !== 'undefined' && this.fitted !== false,
26 |                     link: typeof this.link !== 'undefined' && this.link !== false,
27 |                     loading: typeof this.loading !== 'undefined' && this.loading !== false,
28 |                     icon: true,
29 |                 }
30 | 
31 |                 if (typeof this.flipped !== 'undefined') {
32 |                     classes[this.flipped] = true
33 |                     classes['flipped'] = true
34 |                 }
35 | 
36 |                 if (typeof this.rotated !== 'undefined') {
37 |                     classes[this.rotated] = true
38 |                     classes['rotated'] = true
39 |                 }
40 | 
41 |                 if (typeof this.icon !== 'undefined') {
42 |                     this.icon.split(" ").map((split) => {
43 |                         classes[split] = true
44 |                     })
45 |                 }
46 | 
47 |                 return this.commonClasses(classes)
48 |             },
49 |         },
50 |     }
51 | </script>
52 | 


--------------------------------------------------------------------------------
/src/elements/Rail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="railClasses">
 3 |         <div class="ui segment">
 4 |             <slot></slot>
 5 |         </div>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     export default {
11 |         props: {
12 |             very: {},
13 |             internal: {},
14 |             close: {},
15 |             divided: {},
16 |             side: {},
17 |         },
18 | 
19 |         computed: {
20 |             railClasses() {
21 |                 const classes = {
22 |                     ui: true,
23 |                     internal: typeof this.internal !== 'undefined' && this.internal !== false,
24 |                     very: typeof this.very !== 'undefined' && this.very !== false,
25 |                     close: typeof this.close !== 'undefined' && this.close !== false,
26 |                     divided: typeof this.divided !== 'undefined' && this.divided !== false,
27 |                     rail: true,
28 |                 }
29 | 
30 |                 if (typeof this.side !== 'undefined') {
31 |                     classes[this.side] = true
32 |                 }
33 | 
34 |                 return classes
35 |             },
36 |         },
37 |     }
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/utils/CommonPropsMixin.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     props: {
 3 |         colour: {},
 4 |         size: {},
 5 |         inverted: {},
 6 |         disabled: {},
 7 |         circular: {},
 8 |         loading: {},
 9 |     },
10 | 
11 |     methods: {
12 |         commonClasses: function(classes) {
13 |             classes.inverted = typeof this.inverted !== 'undefined'
14 |             classes.disabled = typeof this.disabled !== 'undefined'
15 |             classes.circular = typeof this.circular !== 'undefined'
16 |             classes.loading = typeof this.loading !== 'undefined'
17 | 
18 |             if (typeof this.colour !== 'undefined') {
19 |                 classes[this.colour] = true
20 |             }
21 | 
22 |             if (typeof this.size !== 'undefined') {
23 |                 classes[this.size] = true
24 |             }
25 |             return classes
26 |         },
27 |     },
28 | }
29 | 


--------------------------------------------------------------------------------
/src/utils/Styleguidist.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     data() {
 3 |         return {
 4 |             showModal: false,
 5 |             dropdownVal: null,
 6 |             checkbox: false,
 7 |             radio: 1,
 8 |         }
 9 |     },
10 | }


--------------------------------------------------------------------------------
/styleguide.config.js:
--------------------------------------------------------------------------------
 1 | const loaders = require('vue-webpack-loaders');
 2 | const webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   components: 'src/**/*.vue',
 6 |   require: [
 7 |     'jquery',
 8 |     'semantic-ui/dist/semantic.min',
 9 |     'semantic-ui/dist/semantic.min.css',
10 |   ],
11 |   webpackConfig: {
12 | 	module: {
13 | 	  loaders,
14 | 	},
15 |     plugins: [
16 |       new webpack.ProvidePlugin({
17 |         $: "jquery",
18 |         jQuery: "jquery",
19 |         "window.jQuery": "jquery"
20 |       })
21 |     ],
22 |   },
23 |   styleguideDir: 'docs',
24 |   mixins: [
25 |     'src/utils/Styleguidist.js',
26 |   ],
27 |   title: 'Vue Semantic',
28 | };
29 | 


--------------------------------------------------------------------------------
/test/unit/Accordion.spec.js:
--------------------------------------------------------------------------------
 1 | /* global describe, it, expect */
 2 | 
 3 | import Vue from 'vue'
 4 | import Accordion from '../../src/Accordion.vue'
 5 | 
 6 | describe('Accordion.vue', () => {
 7 |   it('should render correct contents', () => {
 8 |     const vm = new Vue({
 9 |       template: '<div><semantic-accordion></semantic-accordion></div>',
10 |       components: { 'semantic-accordion': Accordion }
11 |     }).$mount()
12 |     expect(vm.$el).not.toBe(null)
13 |   })
14 | })
15 | 
16 | // also see example testing a component with mocks at
17 | // https://github.com/vuejs/vueify-example/blob/master/test/unit/a.spec.js#L22-L43
18 | 


--------------------------------------------------------------------------------
/vue-semantic.js:
--------------------------------------------------------------------------------
 1 | import accordion from './src/Accordion.vue'
 2 | import checkbox from './src/Checkbox.vue'
 3 | import column from './src/Column.vue'
 4 | import divider from './src/Divider.vue'
 5 | import dropdown from './src/Dropdown.vue'
 6 | import formDropdown from './src/FormDropdown.vue'
 7 | import label from './src/Label.vue'
 8 | import loading from './src/Loading.vue'
 9 | import message from './src/Message.vue'
10 | import modal from './src/Modal.vue'
11 | import popup from './src/Popup.vue'
12 | import radiobutton from './src/Radiobutton.vue'
13 | import reveal from './src/Reveal.vue'
14 | import search from './src/Search.vue'
15 | import statistic from './src/Statistic.vue'
16 | 
17 | export default {
18 |     install: function (Vue, options) {
19 |         Vue.component('semantic-accordion', accordion);
20 |         Vue.component('semantic-checkbox', checkbox)
21 |         Vue.component('semantic-column', column)
22 |         Vue.component('semantic-divider', divider)
23 |         Vue.component('semantic-dropdown', dropdown)
24 |         Vue.component('semantic-form-dropdown', formDropdown)
25 |         Vue.component('semantic-label', label)
26 |         Vue.component('semantic-loading', loading)
27 |         Vue.component('semantic-message', message)
28 |         Vue.component('semantic-modal', modal)
29 |         Vue.component('semantic-popup', popup)
30 |         Vue.component('semantic-radiobutton', radiobutton)
31 |         Vue.component('semantic-reveal', reveal)
32 |         Vue.component('semantic-search', search)
33 |         Vue.component('semantic-statistic', statistic)
34 |     },
35 | }
36 | 


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