@gorse/shards-vue 1.0.8 → 2.0.0

package/src/components/form-radio/FormRadio.vue

@@ -29,13 +29,10 @@ import { guid } from '../../utils'
 
 export default {
     name: 'd-form-radio',
-    model: {
-        prop: 'checked',
-        event: 'input'
-    },
+    emits: ['update:modelValue', 'update:checked', 'input', 'change'],
     data() {
         return {
-            localChecked: this.checked
+            localChecked: this.modelValue !== undefined ? this.modelValue : this.checked
         }
     },
     props: {
@@ -74,6 +71,10 @@ export default {
         /**
          * The checked state.
          */
+        modelValue: {
+            type: [Boolean, String, Array],
+            default: undefined
+        },
         checked: {
             type: [Boolean, String, Array]
         },
@@ -102,6 +103,9 @@ export default {
                 this.localChecked = val
             }
         },
+        computedChecked() {
+            return this.modelValue !== undefined ? this.modelValue : this.checked
+        },
         computedID() {
             return this.id || `dr-radio-${guid()}`
         },
@@ -129,20 +133,22 @@ export default {
         }
     },
     watch: {
-        computedLocalChecked(newVal, oldVal) {
+        computedChecked(newVal, oldVal) {
             if (newVal == oldVal) {
                 return
             }
 
-            this.$emit('input', newVal)
+            this.computedLocalChecked = newVal
         },
 
-        checked(newVal, oldVal) {
+        computedLocalChecked(newVal, oldVal) {
             if (newVal == oldVal) {
                 return
             }
 
-            this.computedLocalChecked = newVal
+            this.$emit('update:modelValue', newVal)
+            this.$emit('update:checked', newVal)
+            this.$emit('input', newVal)
         },
     },
 

package/src/components/form-select/FormSelect.vue

@@ -31,6 +31,7 @@ import { guid } from '../../utils'
 
 export default {
     name: 'd-form-select',
+    emits: ['update:modelValue', 'input', 'change'],
     props: {
         /**
          * The element ID.
@@ -57,6 +58,9 @@ export default {
         /**
          * The select value.
          */
+        modelValue: {
+            default: undefined
+        },
         value: {},
         /**
          * Whether it should allow multiple selections, or not.
@@ -133,19 +137,24 @@ export default {
     },
     data() {
         return {
-            localValue: this.value
+            localValue: this.computedValue
         }
     },
     watch: {
-        value(newVal) {
+        computedValue(newVal) {
             this.localValue = newVal
         },
 
         localValue() {
+            this.$emit('update:modelValue', this.localValue)
             this.$emit('input', this.localValue)
         }
     },
     computed: {
+        computedValue() {
+            return this.modelValue !== undefined ? this.modelValue : this.value
+        },
+
         computedID() {
             return this.id || `dr-select-${guid()}`
         },

package/src/components/form-textarea/FormTextarea.vue

@@ -19,6 +19,7 @@
     :wrap="wrap"
     :aria-required="required ? 'true' : null"
     :aria-invalid="computedAriaInvalid"
+    :value="localValue"
     @input="handleInput"
   ></textarea>
 </template>
@@ -28,12 +29,27 @@ import { guid, getComputedStyles, isVisible } from "../../utils";
 
 export default {
   name: "d-form-textarea",
+  emits: ["update:modelValue", "input"],
   data() {
     return {
-      localValue: this.value
+      localValue: this.modelValue !== undefined ? this.modelValue : this.value
     };
   },
   props: {
+    /**
+     * The textarea value.
+     */
+    modelValue: {
+      type: [String, Number],
+      default: undefined
+    },
+    /**
+     * The textarea value.
+     */
+    value: {
+      type: [String, Number],
+      default: ""
+    },
     /**
      * The element name.
      */
@@ -106,6 +122,13 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * The textarea `aria-invalid` attribute.
+     */
+    ariaInvalid: {
+      type: [Boolean, String],
+      default: false
+    },
     /**
      * The number of text rows.
      */
@@ -139,7 +162,23 @@ export default {
   mounted() {
     this.el = this.$el;
   },
+  watch: {
+    computedValue(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.localValue = newVal;
+      }
+    },
+    localValue(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.$emit("update:modelValue", newVal);
+        this.$emit("input", newVal);
+      }
+    }
+  },
   computed: {
+    computedValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value;
+    },
     computedID() {
       return this.id || `dr-textarea-${guid()}`;
     },
@@ -154,7 +193,8 @@ export default {
       return Math.max(parseInt(this.rows, 10) || 2, 2);
     },
     computedMaxRows() {
-      return Math.max(this.computedMinRows, parseInt(this.maxRows, 10) || 0);
+      const maxRows = parseInt(this.maxRows, 10);
+      return maxRows ? Math.max(this.computedMinRows, maxRows) : null;
     },
     computedHeight() {
       if (this.localValue === null || !isVisible(this.el)) {
@@ -167,10 +207,10 @@ export default {
       this.el.style.height = "inherit";
 
       const computed = getComputedStyles(this.el);
+      const lineHeight = parseFloat(computed.lineHeight);
       const minHeight =
         parseInt(computed.height, 10) || lineHeight * this.computedMinRows;
 
-      const lineHeight = parseFloat(computed.lineHeight);
       const offset =
         parseInt(computed.borderTopWidth, 10) +
         parseInt(computed.paddingTop, 10) +
@@ -180,15 +220,15 @@ export default {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.el.style.height = _height;
 
-      const rows = Math.min(
-        Math.max(
-          (this.el.scrollHeight - offset) / lineHeight,
-          this.computedMinRows
-        ),
-        this.computedMaxRows - 1
+      const calculatedRows = Math.max(
+        (this.el.scrollHeight - offset) / lineHeight,
+        this.computedMinRows
       );
+      const rows = this.computedMaxRows
+        ? Math.min(calculatedRows, this.computedMaxRows)
+        : calculatedRows;
 
-      if (!this.localValue.trim()) {
+      if (!String(this.localValue || "").trim()) {
         return `${minHeight}px`;
       }
 
@@ -229,18 +269,6 @@ export default {
       return null;
     }
   },
-  watch: {
-    value(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.localValue = newVal;
-      }
-    },
-    localValue(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.$emit("input", newVal);
-      }
-    }
-  },
   methods: {
     handleInput(e) {
       this.localValue = e.target.value;

package/src/components/input-group/README.md

@@ -16,7 +16,9 @@ Using the `<d-input-group>` component you can easily extend form controls by add
     <!-- Using Slots -->
     <d-input-group class="mb-2">
         <d-input placeholder="Total Amount"/>
-        <d-input-group-text slot="append">$</d-input-group-text>
+        <template #append>
+            <d-input-group-text>$</d-input-group-text>
+        </template>
     </d-input-group>
 
     <!-- Using Components -->
@@ -55,9 +57,13 @@ If you'd like better control over your input group's contents, you can also use
 ```html
 
 <d-input-group>
-    <d-input-group-text slot="prepend">Total Amount</d-input-group-text>
+    <template #prepend>
+        <d-input-group-text>Total Amount</d-input-group-text>
+    </template>
     <d-input placeholder="Total Amount"/>
-    <d-input-group-text slot="append">$</d-input-group-text>
+    <template #append>
+        <d-input-group-text>$</d-input-group-text>
+    </template>
 </d-input-group>
 
 <!-- input-group-3.vue -->
@@ -119,18 +125,22 @@ You can also use the `<d-input-group-addon>` component with the `append` or `pre
   <d-row>
     <d-col lg="6">
       <d-input-group>
-        <d-input-group-text slot="prepend">
-            <input type="checkbox" aria-label="Checkbox for following text input">
-        </d-input-group-text>
+        <template #prepend>
+            <d-input-group-text>
+                <input type="checkbox" aria-label="Checkbox for following text input">
+            </d-input-group-text>
+        </template>
         <d-form-input type="text" aria-label="Text input with checkbox" />
       </d-input-group>
     </d-col>
 
     <d-col lg="6">
       <d-input-group>
-        <d-input-group-text slot="prepend">
-            <input type="radio" aria-label="Radio for following text input">
-        </d-input-group-text>
+        <template #prepend>
+            <d-input-group-text>
+                <input type="radio" aria-label="Radio for following text input">
+            </d-input-group-text>
+        </template>
         <d-form-input type="text" aria-label="Text input with radio button" />
       </d-input-group>
     </d-col>
@@ -177,9 +187,11 @@ You can create seamless input groups using the `seamless` prop.
 ```html
 
 <d-input-group seamless>
-    <d-input-group-text slot="prepend">
-        <fa :icon="['fas', 'dollar-sign']" />
-    </d-input-group-text>
+    <template #prepend>
+        <d-input-group-text>
+            <fa :icon="['fas', 'dollar-sign']" />
+        </d-input-group-text>
+    </template>
     <d-input placeholder="Total Amount"/>
 </d-input-group>
 

package/src/components/link/Link.vue

@@ -11,7 +11,7 @@
             disabled ? 'disabled' : ''
         ]"
         :aria-disabled="computedAriaDisabled"
-        @click.native="handleClick">
+        @click="handleClick">
         <slot>Link</slot>
     </component>
 </template>
@@ -22,6 +22,7 @@ import rootListenerMixin from '../../mixins/root-listener.mixin'
 
 export default {
     name: 'd-link',
+    emits: ['click'],
     mixins: [ rootListenerMixin ],
     props: {
         /**
@@ -97,7 +98,7 @@ export default {
         computedTag() {
             return this.to
                 && !this.disabled
-                && Boolean(this.$parent.$router) ? 'router-link' : 'a'
+                && Boolean(this.$router) ? 'router-link' : 'a'
         },
         computedRel() {
             return this.target === '_blank'
@@ -139,12 +140,7 @@ export default {
                 event.stopPropagation();
                 event.stopImmediatePropagation();
             } else {
-                if (isRouterLink && event.target.__vue__) {
-                    event.target.__vue__.$emit('click', event);
-                } else {
-                    this.$emit('click', event);
-                }
-
+                this.$emit('click', event);
                 this.emitOnRoot(LINK_EVENTS.CLICKED, event);
             }
 

package/src/components/modal/Modal.vue

@@ -11,7 +11,7 @@
             centered ? `modal-dialog-centered` : '',
         ]"
         role="document"
-        v-on-clickaway="away">
+        v-click-away="away">
         <div class="modal-content">
             <slot />
         </div>
@@ -21,12 +21,14 @@
 </template>
 
 <script>
-import { mixin as clickAwayMixin } from 'vue-clickaway';
+import clickAway from '../../directives/click-away'
 import { MODAL_EVENTS } from '../../utils/constants';
+import { getEventBus } from '../../utils/events';
 
 export default {
     name: 'd-modal',
-    mixins: [clickAwayMixin],
+    directives: { clickAway },
+    emits: ['close'],
     props: {
         /**
          * The component tag.
@@ -76,7 +78,7 @@ export default {
          *
          * Triggered when the modal is hidden.
          */
-        this.$root.$emit(MODAL_EVENTS.HIDDEN)
+        getEventBus(this).$emit(MODAL_EVENTS.HIDDEN)
     }
   },
 };

package/src/components/modal/README.md

@@ -8,7 +8,7 @@ Creating flexible modal dialogs can be achieved using the `<d-modal>` component.
 ```html
 <template>
     <div>Modal opened: <span :class="[showModal ? 'text-success' : 'text-danger']">{{ showModal }}</span></div>
-    <d-btn @click.native="handleClick">Click Me</d-btn>
+    <d-btn @click="handleClick">Click Me</d-btn>
     <d-modal v-if="showModal" @close="handleClose">
         <d-modal-header>
             <d-modal-title>Header</d-modal-title>
@@ -46,7 +46,7 @@ Using the `size` prop on the `<d-modal>` component, you can control the size of
 :::demo
 ```html
 <template>
-    <d-btn @click.native="showModal = true">Click Me</d-btn>
+    <d-btn @click="showModal = true">Click Me</d-btn>
     <d-modal v-if="showModal" size="sm" @close="showModal = false" :size="modalSize">
         <d-modal-header>
             <d-modal-title>Hello</d-modal-title>

package/src/components/navbar/NavbarToggle.vue

@@ -40,7 +40,7 @@ export default {
     },
     methods: {
         onClick() {
-            this.$root.$emit(COLLAPSE_EVENTS.TOGGLE, this.target)
+            this.emitOnRoot(COLLAPSE_EVENTS.TOGGLE, this.target)
         },
         handleStateEvent(id, state) {
             if (id === this.target) {

package/src/components/navbar/README.md

@@ -28,9 +28,11 @@ Using the `<d-navbar>` component you can create powerful and responsive navigati
 
     <d-navbar-nav class="ml-auto">
         <d-input-group seamless>
-            <d-input-group-text slot="prepend">
-                <fa :icon="['fas', 'search']" />
-            </d-input-group-text>
+            <template #prepend>
+                <d-input-group-text>
+                    <fa :icon="['fas', 'search']" />
+                </d-input-group-text>
+            </template>
             <d-input size="sm" placeholder="Search..."/>
         </d-input-group>
     </d-navbar-nav>

package/src/components/popover/Popover.vue

@@ -13,10 +13,12 @@
 import Popover from '../../utils/popover.class'
 import TooltipPopoverMixin from '../../mixins/tooltip-popover.mixin'
 import { TP_PLACEMENTS } from '../../utils/constants';
+import { getEventBus } from '../../utils/events'
 
 export default {
     name: 'd-popover',
     mixins: [ TooltipPopoverMixin ],
+    emits: ['show', 'shown', 'hide', 'hidden', 'update:show', 'update:disabled', 'enabled', 'disabled'],
     props: {
         /**
          * Title
@@ -114,7 +116,7 @@ export default {
                 this._TPInstance = new Popover(
                     target,
                     this.getUpdatedConfig(),
-                    this.$root
+                    getEventBus(this)
                 )
             }
 
@@ -123,4 +125,3 @@ export default {
     }
 }
 </script>
-

package/src/components/popover/README.md

@@ -14,7 +14,7 @@ Popovers can be created using the `<d-popover>` component.
 <div>
     <d-btn id="popover-example-1">Click Me</d-btn>
     <d-popover target="popover-example-1" container=".shards-demo--example--popover-01">
-        <template slot="title">
+        <template #title>
             Title Here
         </template>
         Content Here
@@ -37,7 +37,7 @@ The `<d-popover>` component, by default is triggered by the `click` event. Howev
     <d-popover target="popover-example-2"
         container=".shards-demo--example--popover-02"
         :triggers="['hover']">
-        <template slot="title">
+        <template #title>
             Title Here
         </template>
         Content Here
@@ -61,7 +61,7 @@ Using the `placement` prop you can adjust where your popover will be displayed.
     <d-popover target="popover-example-3"
         :placement="'rightbottom'"
         container=".shards-demo--example--popover-03">
-        <template slot="title">
+        <template #title>
             Title Here
         </template>
         Content Here

package/src/components/slider/Slider.vue

@@ -8,6 +8,7 @@ import { guid } from '../../utils'
 
 export default {
     name: 'd-slider',
+    emits: ['update:modelValue', 'input'],
     props: {
         /**
          * The element ID.
@@ -28,9 +29,13 @@ export default {
         /**
          * Slider value.
          */
+        modelValue: {
+            type: [String, Array, Number],
+            default: undefined
+        },
         value: {
             type: [String, Array, Number],
-            required: true
+            default: undefined
         },
         /**
          * Start value.
@@ -59,7 +64,7 @@ export default {
         }
     },
     watch: {
-        value(newVal, oldVal) {
+        computedValue(newVal, oldVal) {
             const sliderInstance = this.$el.noUiSlider
             const sliderValue = sliderInstance.get()
 
@@ -78,13 +83,16 @@ export default {
         }
     },
     computed: {
+        computedValue() {
+            return this.modelValue !== undefined ? this.modelValue : this.value
+        },
         computedID() {
             return this.id || `dr-slider-${guid()}`
         }
     },
     mounted() {
         const config = {
-            start: this.value || this.start,
+            start: this.computedValue || this.start,
             connect: this.connect,
             range: this.range,
             ...this.options
@@ -94,7 +102,8 @@ export default {
 
         this.$el.noUiSlider.on('slide', () => {
             const value = this.$el.noUiSlider.get()
-            if (value !== this.value) {
+            if (value !== this.computedValue) {
+                this.$emit('update:modelValue', value)
                 this.$emit('input', value)
             }
         })

package/src/components/tabs/Tab.vue

@@ -13,7 +13,7 @@
             :aria-labelledby="controlledBy || null"
             :class="[
                 'tab-pane',
-                ($parent && $parent.card && !noBody) ? 'card-body' : '',
+                (tabsParent && tabsParent.card && !noBody) ? 'card-body' : '',
                 show ? 'show' : '',
                 disabled ? 'disabled' : '',
                 localActiveState ? 'active' : ''
@@ -28,6 +28,12 @@ import { guid } from '../../utils';
 
 export default {
     name: 'd-tab',
+    emits: ['click'],
+    inject: {
+        dTabs: {
+            default: null
+        }
+    },
     data() {
         return {
             localActiveState: this.active && !this.disabled,
@@ -93,10 +99,13 @@ export default {
             return this.buttonId || `dr-tab-button-${guid()}`
         },
         computedFade() {
-            return this.$parent.fade
+            return this.tabsParent && this.tabsParent.fade
         },
         _isTab() {
             return true
+        },
+        tabsParent() {
+            return this.dTabs && this.dTabs.parent
         }
     },
     methods: {
@@ -112,6 +121,14 @@ export default {
     },
     mounted() {
         this.show = this.localActiveState
+        if (this.dTabs) {
+            this.dTabs.registerTab(this)
+        }
+    },
+    beforeUnmount() {
+        if (this.dTabs) {
+            this.dTabs.unregisterTab(this)
+        }
     }
 }
 </script>