[WIP] 0.5.0

jacobgunnarsson · Dec 23, 2016 · 069484b · 069484b
1 parent 1ca2f54
commit 069484b
Show file tree

Hide file tree

Showing 42 changed files with 5,527 additions and 664 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 node_modules/
 npm-debug*
-dist
+dist
+*.iml
+.idea
+.nuxt
diff --git a/.npmignore b/.npmignore
@@ -1 +1,2 @@
 docs
+examples
diff --git a/components/alert.vue b/components/alert.vue
@@ -1,85 +1,89 @@
 <template>
-  <div :class="classObject" role="alert" v-show="localShow">
-    <button type="button"
-            class="close"
-            data-dismiss="alert"
-            aria-label="Close"
-            v-if="dismissible"
-            @click.stop.prevent="dismiss"
-    >
-      <span aria-hidden="true">&times;</span>
-    </button>
-    <slot></slot>
-  </div>
+    <div :class="classObject" role="alert" v-if="localShow">
+        <button type="button"
+                class="close"
+                data-dismiss="alert"
+                aria-label="Close"
+                v-if="dismissible"
+                @click.stop.prevent="dismiss"
+        >
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <slot></slot>
+    </div>
 </template>
 
 <script>
-  export default {
-    replace: true,
-    props: {
-      show: {
-        type: Boolean,
-        default: false,
-        required: true
-      },
-      state: {
-        type: String,
-        default: 'success'
-      },
-      dismissible: {
-        type: Boolean,
-        default: false
-      },
-      dismissAfterSeconds: {
-        type: Number,
-        default: 0
-      },
-    },
-    computed: {
-      classObject() {
-        return ['alert', this.alertState, this.dismissible ? 'alert-dismissible' : '', 'fade', 'in',]
-      },
-      alertState() {
-        return !this.state || this.state === `default` ? `alert-success` : `alert-${this.state}`
-      },
-      show: {
-        get: function() {
-          return this.localShow;
+    export default {
+        props: {
+            show: {
+                type: Boolean,
+                default: false
+            },
+            state: {
+                type: String,
+                default: 'info'
+            },
+            dismissible: {
+                type: Boolean,
+                default: false
+            },
+            dismissAfterSeconds: {
+                type: Number,
+                default: null,
+            },
         },
-        set: function(value) {
-          this.localShow = value;
+        computed: {
+            classObject() {
+                return ['alert', this.alertState, this.dismissible ? 'alert-dismissible' : '', 'fade', 'in',]
+            },
+            alertState() {
+                return !this.state || this.state === `default` ? `alert-success` : `alert-${this.state}`
+            },
+            show: {
+                get: function () {
+                    return this.localShow;
+                },
+                set: function (value) {
+                    this.localShow = value;
+                },
+            },
         },
-      },
-    },
-    data() {
-      return {
-        localShow: this.show
-      }
-    },
-    watch: {
-      show: function(newValue, oldValue) {
-        if (newValue == true && oldValue == false && this.dismissAfterSeconds != null) {
-          let dismissCountDown = this.dismissAfterSeconds;
-          this.$emit('dismiss-count-down', dismissCountDown);
-          let intId = setInterval(() => {
-            if (dismissCountDown < 2 || !this.show) {
-              if (this.show) this.dismiss();
-              clearInterval(intId);
-            } else {
-              dismissCountDown--;
-              this.$emit('dismiss-count-down', dismissCountDown);
+        data() {
+            return {
+                localShow: this.show
+            }
+        },
+        mounted(){
+            if (this.dismissAfterSeconds) {
+                this.dismissCounter();
+            }
+        },
+        watch: {
+            show: function (newValue, oldValue) {
+                if (this.dismissAfterSeconds && newValue == true && oldValue == false) {
+                    this.dismissCounter();
+                }
+            }
+        },
+        methods: {
+            dismiss() {
+                this.localShow = false;
+                this.$root.$emit('dismissed')
+            },
+            dismissCounter(){
+                let dismissCountDown = this.dismissAfterSeconds;
+                this.$emit('dismiss-count-down', dismissCountDown);
+                let intId = setInterval(() => {
+                    if (dismissCountDown < 2 || !this.show) {
+                        if (this.show) this.dismiss();
+                        clearInterval(intId);
+                    } else {
+                        dismissCountDown--;
+                        this.$emit('dismiss-count-down', dismissCountDown);
+                    }
+                }, 1000);
             }
-          }, 1000)
         }
-      }
-    },
-    methods: {
-      dismiss: function dismiss() {
-        // hide an alert
-        this.localShow = false
-        // Emit an event from the current vm that propagates all the way up to its $root
-        this.$root.$emit('dismissed::alert')
-      },
     }
-  }
 </script>
diff --git a/components/breadcrumb.vue b/components/breadcrumb.vue
@@ -1,31 +1,31 @@
 <template>
-  <ol class="breadcrumb">
-    <li class="breadcrumb-item" v-for="item in list" :class="{active:item.active}">
-      <a href="#"
-         @click.stop.prevent="onclick(item)"
-         v-if="!item.active"
-      >{{item.text}}</a>
-      <span v-if="item.active">{{item.text}}</span>
-    </li>
-  </ol>
+    <ol class="breadcrumb">
+        <li v-for="item in items" :class="['breadcrumb-item', item.active ? 'active' : null]">
+            <a href="#"
+               @click.stop.prevent="onclick(item)"
+               v-if="!item.active"
+            >{{item.text}}</a>
+            <span v-if="item.active">{{item.text}}</span>
+        </li>
+    </ol>
 </template>
 
 <script>
 
-  export default {
-    replace: true,
-    computed: {},
-    props: {
-      list: {
-        type: Array,
-        default: [],
-        required: true
-      },
-    },
-    methods: {
-      onclick: function (item) {
-        this.$emit('click',item);
-      },
-    },
-  }
+
+    export default {
+        computed: {},
+        props: {
+            items: {
+                type: Array,
+                default: () => [],
+                required: true
+            },
+        },
+        methods: {
+            onclick: function (item) {
+                this.$emit('click', item);
+            },
+        },
+    }
 </script>
diff --git a/components/button-group.vue b/components/button-group.vue
@@ -1,18 +1,34 @@
 <template>
-  <div role="group" aria-label="" :class="['btn-group',vertical?'btn-group-vertical':'']">
-    <slot></slot>
-  </div>
+    <div :class="classObject" role="group">
+        <slot></slot>
+    </div>
 </template>
 
 <script>
-  export default {
-    replace: true,
-    computed: {},
-    props: {
-      vertical: {
-        type: Boolean,
-        default: false
-      },
-    },
-  }
+    export default {
+        replace: true,
+        computed: {
+            classObject(){
+                return [
+                    'btn-' + (this.toolbar ? 'toolbar' : 'group')
+                    , this.vertical ? 'btn-group-vertical' : '',
+                    this.size ? ('btn-group-' + this.size) : '',
+                ];
+            }
+        },
+        props: {
+            vertical: {
+                type: Boolean,
+                default: false
+            },
+            toolbar: {
+                type: Boolean,
+                default: false
+            },
+            size: {
+                type: String,
+                default: null
+            },
+        },
+    }
 </script>