Added menu components

.npmignore

@@ -1,2 +1,6 @@
 docs/
-README.md
+README.md
+*.new
+*.bkp
+*.old.*
+*.old

README.md

@@ -27,6 +27,7 @@ Import individual components.
 - `Grid` – component
 - `Row` – component
 - `Column` – component
+- `Checkbox` – component
 - `Input` – component
 - `Label` – component
 - `Form` – component
@@ -50,6 +51,7 @@ Mixins to import related components at once
 
 - `Grid` – `ui-grid`, `ui-row`, `ui-column`
 - `Form` – `ui-form`, `ui-field`
+- `Menu` – `ui-menu`, `ui-menu-item`, `ui-menu-header`, `ui-submenu`
 
 ```javascript
 import {Collections} from 'semantic-ui-vue2'

index.js

@@ -1,3 +1,8 @@
+import Button from './src/elements/Button.vue'
+import ButtonGroup from './src/elements/button/Group.vue'
+import ButtonLabel from './src/elements/button/Label.vue'
+import ButtonOr from './src/elements/button/Or.vue'
+
 import Grid from './src/collections/Grid.vue'
 import Row from './src/collections/grid/Row.vue'
 import Column from './src/collections/grid/Column.vue'
@@ -9,6 +14,11 @@ import Label from './src/elements/Label.vue'
 import Form from './src/collections/Form.vue'
 import Field from './src/collections/form/Field.vue'
 
+import Menu from './src/collections/Menu.vue'
+import MenuItem from './src/collections/menu/Item.vue'
+import MenuHeader from './src/collections/menu/Header.vue'
+import Submenu from './src/collections/menu/Submenu.vue'
+
 import Modal from './src/modules/Modal.vue'
 
 import Mixin from './src/mixins'
@@ -17,6 +27,10 @@ import Collections from './src/mixins/collections.js'
 export {
     Mixin,
     Collections,
+    Button,
+    ButtonGroup,
+    ButtonLabel,
+    ButtonOr,
     Grid,
     Row,
     Column,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-vue2",
-  "version": "2.2.1",
+  "version": "2.3.2",
   "description": "Semantic UI Integration for Vue 2",
   "main": "index.js",
   "scripts": {

src/collections/Menu.vue

@@ -0,0 +1,55 @@
+<template lang="html">
+    <div v-bind:class="[
+        'ui',
+        'menu',
+        getWidthsClasses('item'),
+        {secondary},
+        {pointing},
+        {tabular},
+        {text},
+        {vertical},
+        {pagination},
+        getFixedClasses(),
+        {stackable},
+        {inverted},
+        getColorClass(),
+        {fluid},
+        {compact},
+        getAttachedClasses(),
+        {size},
+        {fitted},
+        {borderless}]">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    import Widths from '../mixins/commons/widths'
+    import Secondary from '../mixins/commons/secondary'
+    import Pointing from '../mixins/commons/pointing'
+    import Tabular from '../mixins/commons/tabular'
+    import Text from '../mixins/commons/text'
+    import Vertical from '../mixins/commons/vertical'
+    import As from '../mixins/commons/as'
+    import Fixed from '../mixins/commons/fixed'
+    import Stackable from '../mixins/commons/stackable'
+    import Inverted from '../mixins/commons/inverted'
+    import Color from '../mixins/commons/color'
+    import Fluid from '../mixins/commons/fluid'
+    import Compact from '../mixins/commons/compact'
+    import Attached from '../mixins/commons/attached'
+    import Size from '../mixins/commons/size'
+    import Fitted from '../mixins/commons/fitted'
+    import Borderless from '../mixins/commons/borderless'
+
+    export default {
+        mixins: [Widths, Secondary, Pointing, Tabular, Text, Vertical, As, Fixed, Stackable, Inverted, Color, Fluid, Compact, Attached, Size, Fitted, Borderless],
+        props: {
+            pagination: {
+                type: Boolean,
+                required: false,
+                default: false,
+            }
+        }
+    }
+</script>

src/collections/menu/Header.vue

@@ -0,0 +1,20 @@
+<template lang="html">
+    <div v-bind:class="['header', {item}]">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    import As from '../../mixins/commons/as'
+
+    export default {
+        mixins: [As],
+        props: {
+            item: {
+                type: Boolean,
+                required: false,
+                default: false,
+            }
+        }
+    }
+</script>

src/collections/menu/Item.vue

@@ -0,0 +1,26 @@
+<template lang="html">
+    <component :is="getComponentType()" v-bind:class="['item', {active}, {link}, {fitted}, {borderless}, getColorClass(), {right}, {header}]">
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+    import Active from '../../mixins/commons/active'
+    import Link from '../../mixins/commons/link'
+    import As from '../../mixins/commons/as'
+    import Fitted from '../../mixins/commons/fitted'
+    import Borderless from '../../mixins/commons/borderless'
+    import Color from '../../mixins/commons/color'
+    import Right from '../../mixins/commons/right'
+
+    export default {
+        mixins: [Active, As, Link, Fitted, Borderless, Color, Right],
+        props: {
+            header: {
+                type: Boolean,
+                required: false,
+                default: false,
+            }
+        }
+    }
+</script>

src/collections/menu/Submenu.vue

@@ -0,0 +1,15 @@
+<template lang="html">
+    <component :is="getComponentType()" v-bind:class="['menu', getColorClass(), {right}]">
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+    import As from '../../mixins/commons/as'
+    import Color from '../../mixins/commons/color'
+    import Right from '../../mixins/commons/right'
+
+    export default {
+        mixins: [As, Color, Right]
+    }
+</script>

src/elements/Button.vue

@@ -0,0 +1,41 @@
+<template>
+    <component :is="getComponentType('button')" :class="['ui', 'button', {primary}, {secondary}, {animated}, getLabeledClasses(), getColorClass(), getIconClasses(), {basic}, {positive}, {negative}, {inverted}, {active}, {disabled}, {loading}, size, getFloatClasses(), {compact}, {fluid}, {circular}]"
+        v-on:mouseenter="emitMouseEnter"
+        v-on:mouseover="emitMouseOver"
+        v-on:mousemove="emitMouseMove"
+        v-on:mousedown="emitMouseDown"
+        v-on:mouseup="emitMouseUp"
+        v-on:click="emitClick"
+        v-on:mouseleave="emitMouseLeave"
+        v-on:mouseout="emitMouseOut"
+    >
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+    import MouseEvents from '../mixins/commons/events/mouse'
+    import Primary from '../mixins/commons/primary'
+    import Secondary from '../mixins/commons/secondary'
+    import Animated from '../mixins/commons/animated'
+    import As from '../mixins/commons/as'
+    import Labeled from '../mixins/commons/labeled'
+    import Color from '../mixins/commons/color'
+    import Icon from '../mixins/commons/icon'
+    import Basic from '../mixins/commons/basic'
+    import Positive from '../mixins/commons/positive'
+    import Negative from '../mixins/commons/negative'
+    import Inverted from '../mixins/commons/inverted'
+    import Active from '../mixins/commons/active'
+    import Disabled from '../mixins/commons/disabled'
+    import Loading from '../mixins/commons/loading'
+    import Size from '../mixins/commons/size'
+    import Float from '../mixins/commons/float'
+    import Compact from '../mixins/commons/compact'
+    import Fluid from '../mixins/commons/fluid'
+    import Circular from '../mixins/commons/circular'
+
+    export default {
+        mixins: [MouseEvents, Primary, Secondary, Animated, As, Labeled, Color, Icon, Basic, Positive, Negative, Inverted, Active, Disabled, Loading, Size, Float, Compact, Fluid, Circular]
+    }
+</script>

src/elements/Checkbox.vue

@@ -59,7 +59,7 @@
             v-on:submit="emitSubmit"
             ref="input" />
             <label v-bind:for="id">
-                <slot>{{ label }}</slot>                
+                <slot>{{ label }}</slot>
                 <span v-show="inputValue">
                     &emsp;
                     <span class="ui small blue label">{{ inputValue }}</span>
@@ -162,7 +162,7 @@
                     return this.value == this.$vnode.data.attrs.value;
                 }
 
-                if (this.value !== true && this.value !== false) {
+                if (typeof this.value != 'undefined' && this.value !== true && this.value !== false) {
                     return this.value == this.trueVal
                 }
 
@@ -221,9 +221,6 @@
                 return this.$vnode.data.attrs.value && Array.isArray(this.value)
             },
         },
-        created() {
-            console.log(this.value)
-        },
     }
 </script>
 

src/elements/Input.vue

@@ -67,6 +67,7 @@
 </template>
 
 <script>
+import Constants from '../mixins/commons/constants.js'
 import Input from '../mixins/commons/input.js'
 import Focus from '../mixins/commons/states/focus.js'
 import Loading from '../mixins/commons/states/loading.js'
@@ -117,7 +118,7 @@ export default {
     methods: {
         getIconClasses() {
             if (this.dIcon.value) {
-                return (this.dIcon.position == 'right' ? 'icon' : this.dIcon.position + ' icon')
+                return (this.dIcon.position == Constants.right ? Constants.icon : this.dIcon.position + ' ' + Constants.icon)
             }
 
             return false

src/elements/button/Group.vue

@@ -0,0 +1,18 @@
+<template>
+    <div :class="['ui', 'buttons', getIconClasses(), {vertical}, getLabeledClasses(), getWidthsClasses(), getColorClass(), {basic}]">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    import Icon from '../../mixins/commons/icon'
+    import Vertical from '../../mixins/commons/vertical'
+    import Labeled from '../../mixins/commons/labeled'
+    import Widths from '../../mixins/commons/widths'
+    import Color from '../../mixins/commons/color'
+    import Basic from '../../mixins/commons/basic'
+
+    export default {
+        mixins: [Icon, Vertical, Labeled, Widths, Color, Basic]
+    }
+</script>

src/elements/button/Label.vue

@@ -0,0 +1,26 @@
+<template>
+    <component :is="getComponentType('a')" :class="['ui', 'basic', 'label', {right}, {pointing}, getColorClass()]"
+               v-on:mouseenter="emitMouseEnter"
+               v-on:mouseover="emitMouseOver"
+               v-on:mousemove="emitMouseMove"
+               v-on:mousedown="emitMouseDown"
+               v-on:mouseup="emitMouseUp"
+               v-on:click="emitClick"
+               v-on:mouseleave="emitMouseLeave"
+               v-on:mouseout="emitMouseOut"
+    >
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+    import MouseEvents from '../../mixins/commons/events/mouse'
+    import As from '../../mixins/commons/as'
+    import Pointing from '../../mixins/commons/pointing'
+    import Right from '../../mixins/commons/right'
+    import Color from '../../mixins/commons/color'
+
+    export default {
+        mixins: [MouseEvents, As, Pointing, Right, Color]
+    }
+</script>

src/elements/button/Or.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="or" :data-text="this.text"></div>
+</template>
+
+<script>
+    export default {
+        props: {
+            text: {
+                Type: String,
+                required: false,
+                default: 'or'
+            }
+        }
+    }
+</script>

src/mixins/collections.js

@@ -1,7 +1,9 @@
 import Grid from './grid.js'
 import Form from './form.js'
+import Menu from './menu'
 
 export default {
     Grid,
     Form,
+    Menu,
 }

src/mixins/commons/active.js

@@ -0,0 +1,9 @@
+export default {
+    props: {
+        active: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}

src/mixins/commons/animated.js

@@ -0,0 +1,9 @@
+export default {
+    props: {
+        animated: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}

src/mixins/commons/as.js

@@ -0,0 +1,20 @@
+export default {
+    props: {
+        as: {
+            type: String,
+            required: false,
+        },
+    },
+    methods: {
+        getSemanticColumns(value) {
+            if (typeof value === 'undefined') {
+                return columns;
+            }
+
+            return columns[value - 1];
+        },
+        getComponentType(defaultType = 'div') {
+            return this.as? this.as : defaultType;
+        }
+    },
+}