@gorse/shards-vue 1.0.8 → 2.0.0

package/src/components/tabs/Tabs.vue

@@ -40,12 +40,22 @@ import dTabButton from './_TabButton.vue'
 
 export default {
     name: 'd-tabs',
+    emits: ['update:modelValue', 'input'],
     components: {
         dTabButton
     },
+    provide() {
+        return {
+            dTabs: {
+                parent: this,
+                registerTab: tab => this.registerTab(tab),
+                unregisterTab: tab => this.unregisterTab(tab)
+            }
+        }
+    },
     data() {
         return {
-            currentTab: this.value,
+            currentTab: this.modelValue !== undefined ? this.modelValue : this.value,
             tabs: [],
             // eslint-disable-next-line
             _tabsContainerID: null
@@ -57,10 +67,13 @@ export default {
                 return
             }
 
+            this.$emit('update:modelValue', newVal)
             this.$emit('input', newVal)
-            this.tabs[newVal].$emit('click')
+            if (this.tabs[newVal]) {
+                this.tabs[newVal].$emit('click')
+            }
         },
-        value (newVal, oldVal) {
+        computedValue (newVal, oldVal) {
             if (newVal === oldVal) {
                 return
             }
@@ -98,6 +111,10 @@ export default {
         /**
          * The value used to set the current tab.
          */
+        modelValue: {
+            type: Number,
+            default: undefined
+        },
         value: {
             type: Number,
             default: null
@@ -139,6 +156,9 @@ export default {
         }
     },
     computed: {
+        computedValue() {
+            return this.modelValue !== undefined ? this.modelValue : this.value
+        },
         computedID() {
             return this.id || `dr-tabs-${guid()}`
         },
@@ -224,6 +244,7 @@ export default {
             const tab = this.tabs[index]
 
             if (!tab) {
+                this.$emit('update:modelValue', this.currentTab)
                 this.$emit('input', this.currentTab)
                 return
             }
@@ -238,17 +259,32 @@ export default {
 
             this.tabs.forEach(_tab => {
                 if (_tab === tab) {
-                    this.$set(_tab, 'localActiveState', true)
+                    _tab.localActiveState = true
                     return
                 }
 
-                this.$set(_tab, 'localActiveState', false)
+                _tab.localActiveState = false
             })
 
             this.currentTab = index
         },
+        registerTab(tab) {
+            if (this.tabs.indexOf(tab) === -1) {
+                this.tabs.push(tab)
+            }
+
+            this.$nextTick(this.updateTabs)
+        },
+        unregisterTab(tab) {
+            const index = this.tabs.indexOf(tab)
+
+            if (index !== -1) {
+                this.tabs.splice(index, 1)
+            }
+
+            this.$nextTick(this.updateTabs)
+        },
         updateTabs() {
-            this.tabs = this.$children.filter(child => child._isTab)
             let tabIndex = null
 
             this.tabs.forEach((tab, index) => {

package/src/components/tabs/_TabButton.vue

@@ -26,6 +26,7 @@ import { KEYCODES } from '../../utils/constants';
 
 export default {
     name: 'd-tab-button',
+    emits: ['click'],
     props: {
         /**
          * The element ID.

package/src/components/tooltip/Tooltip.vue

@@ -10,10 +10,12 @@
 import Tooltip from '../../utils/tooltip.class'
 import TooltipPopoverMixin from '../../mixins/tooltip-popover.mixin'
 import { TP_PLACEMENTS } from '../../utils/constants'
+import { getEventBus } from '../../utils/events'
 
 export default {
     name: 'd-tooltip',
     mixins: [ TooltipPopoverMixin ],
+    emits: ['show', 'shown', 'hide', 'hidden', 'update:show', 'update:disabled', 'enabled', 'disabled'],
     props: {
         /**
          * Title.
@@ -104,7 +106,7 @@ export default {
                 this._TPInstance = new Tooltip(
                     target,
                     this.getUpdatedConfig(),
-                    this.$root
+                    getEventBus(this)
                 )
             }
 

package/src/directives/click-away.js

@@ -0,0 +1,39 @@
+const KEY = '__DR_CLICK_AWAY__'
+
+function onClickAway(el, binding, event) {
+    if (!el || el === event.target || el.contains(event.target)) {
+        return
+    }
+
+    if (typeof binding.value === 'function') {
+        binding.value(event)
+    }
+}
+
+export default {
+    beforeMount(el, binding) {
+        if (typeof document === 'undefined') {
+            return
+        }
+
+        const handler = event => onClickAway(el, binding, event)
+
+        el[KEY] = handler
+        document.addEventListener('click', handler)
+        document.addEventListener('touchstart', handler)
+    },
+
+    unmounted(el) {
+        if (typeof document === 'undefined') {
+            return
+        }
+
+        if (!el[KEY]) {
+            return
+        }
+
+        document.removeEventListener('click', el[KEY])
+        document.removeEventListener('touchstart', el[KEY])
+        delete el[KEY]
+    }
+}

package/src/directives/toggle/toggle.js

@@ -1,17 +1,20 @@
 import target from '../../utils/target'
+import { unbindTargets } from '../../utils/target'
 import { COLLAPSE_EVENTS } from '../../utils/constants'
 import { setAttr, addClass, removeClass } from '../../utils'
+import { getEventBus } from '../../utils/events'
 
 const inBrowser = typeof window !== 'undefined'
 const DR_TOGGLE = '__DRTOGGLE'
 
 export default {
-    bind(element, binding, vnode) {
-        const targets = target(vnode, binding, { click: true }, ({ targets, vnode }) => {
-            targets.forEach(target => vnode.context.$root.$emit(COLLAPSE_EVENTS.TOGGLE, target));
+    beforeMount(element, binding) {
+        const bus = getEventBus(binding.instance)
+        const targets = target(element, binding, { click: true }, ({ targets }) => {
+            targets.forEach(target => bus.$emit(COLLAPSE_EVENTS.TOGGLE, target));
         });
 
-        if (inBrowser && vnode.context && targets.length > 0) {
+        if (inBrowser && targets.length > 0) {
             setAttr(element, 'aria-controls', targets.join(' '))
             setAttr(element, 'aria-expanded', 'false')
 
@@ -31,15 +34,17 @@ export default {
                     addClass(element, 'collapsed');
                 }
             }
-            vnode.context.$root.$on(COLLAPSE_EVENTS.STATE, element[DR_TOGGLE])
+            bus.$on(COLLAPSE_EVENTS.STATE, element[DR_TOGGLE])
         }
     },
-    unbind(element, binding, vnode) {
+    unmounted(element, binding) {
+        unbindTargets(element, binding, { click: true })
+
         if (!element[DR_TOGGLE]) {
             return
         }
 
-        vnode.context.$root.$off(COLLAPSE_EVENTS.STATE, element[DR_TOGGLE])
+        getEventBus(binding.instance).$off(COLLAPSE_EVENTS.STATE, element[DR_TOGGLE])
         element[DR_TOGGLE] = null
     }
 }

package/src/directives/tooltip/tooltip.js

@@ -1,4 +1,5 @@
 import Tooltip from '../../utils/tooltip.class'
+import { getEventBus } from '../../utils/events'
 
 const inBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'
 const KEY = '_DR_TOOLTIP_'
@@ -103,7 +104,7 @@ function applyTooltip(el, bindings, vnode) {
     const parsedBindings = parseBindings(bindings)
 
     if (!el[KEY]) {
-        el[KEY] = new Tooltip(el, parsedBindings, vnode.context.$root)
+        el[KEY] = new Tooltip(el, parsedBindings, getEventBus(bindings.instance))
         return
     }
 
@@ -111,27 +112,21 @@ function applyTooltip(el, bindings, vnode) {
 }
 
 export default {
-    bind (el, bindings, vnode) {
+    beforeMount (el, bindings, vnode) {
         applyTooltip(el, bindings, vnode)
     },
 
-    inserted(el, bindings, vnode) {
+    mounted(el, bindings, vnode) {
         applyTooltip(el, bindings, vnode)
     },
 
-    update (el, bindings, vnode) {
+    updated (el, bindings, vnode) {
         if (bindings.value !== bindings.oldValue) {
             applyTooltip(el, bindings, vnode)
         }
     },
 
-    componentUpdated (el, bindings, vnode) {
-        if (bindings.value !== bindings.oldValue) {
-            applyTooltip(el, bindings, vnode)
-        }
-    },
-
-    unbind (el) {
+    unmounted (el) {
         if (!inBrowser) {
             return
         }

package/src/index.js

@@ -1,27 +1,29 @@
 import * as components from './components'
 import * as directives from './directives'
 import { vueUse } from './utils'
+import { installEventBus } from './utils/events'
 
 const VuePlugin = {
-  install: function (Vue) {
-    if (Vue._shards_vue_installed) {
+  install: function (app) {
+    if (app._shards_vue_installed) {
       return
     }
 
-    Vue._shards_vue_installed = true;
+    app._shards_vue_installed = true
+    installEventBus(app)
 
     // Register component plugins
     for (let component in components) {
-      Vue.use(components[component])
+      app.use(components[component])
     }
 
     // Register directive plugins
     for (let directive in directives) {
-      Vue.use(directives[directive])
+      app.use(directives[directive])
     }
   }
 }
 
 vueUse(VuePlugin)
 
-export default VuePlugin
+export default VuePlugin

package/src/markdown/getting-started/README.md

@@ -24,14 +24,15 @@ npm i @gorse/shards-vue
 You can register the entire UI kit as a Vue plugin in your app's entry point:
 
 ```javascript
-import Vue from 'vue'
+import { createApp } from 'vue'
 import ShardsVue from '@gorse/shards-vue'
+import App from './App.vue'
 
 // Import base styles (Bootstrap and Shards)
 import 'bootstrap/dist/css/bootstrap.css'
 import '@gorse/shards-ui/dist/css/shards.css'
 
-Vue.use(ShardsVue);
+createApp(App).use(ShardsVue).mount('#app')
 ```
 
 ## Registering Components as Vue Plugins
@@ -39,14 +40,15 @@ Vue.use(ShardsVue);
 If you'd like to register only certain components as Vue plugins, make sure to import just the component you'd like to use.
 
 ```javascript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import App from './App.vue'
 
 // Import base styles (Bootstrap and Shards)
 import 'bootstrap/dist/css/bootstrap.css'
 import '@gorse/shards-ui/dist/css/shards.css'
 
 import { Button } from '@gorse/shards-vue/src/components'
-Vue.use(Button)
+createApp(App).use(Button).mount('#app')
 
 ```
 

package/src/mixins/checkbox-radio.mixin.js

@@ -1,15 +1,14 @@
 export default {
     data() {
         return {
-            localChecked: this.checked,
+            localChecked: this.modelValue !== undefined ? this.modelValue : this.checked,
             hasFocus: false
         }
     },
-    model: {
-        prop: 'checked',
-        event: 'input'
-    },
     props: {
+        modelValue: {
+            default: undefined
+        },
         value: {},
         checked: {},
         buttonTheme: {
@@ -20,7 +19,7 @@ export default {
     computed: {
         computedLocalChecked: {
             get() {
-                this.isChild ? this.$parent.localChecked : this.localChecked
+                return this.isChild ? this.$parent.localChecked : this.localChecked
             },
             set (val) {
                 if (this.isChild) {

package/src/mixins/root-listener.mixin.js

@@ -1,4 +1,5 @@
 import { isArray } from '../utils';
+import { getEventBus } from '../utils/events';
 
 const _DR_RL_ = '_DR_RL_';
 
@@ -9,24 +10,29 @@ export default {
                 this[_DR_RL_] = []
             }
 
-            this[_DR_RL_].push({ event, callback })
-            this.$root.$on(event, callback)
+            const bus = getEventBus(this)
+            const boundCallback = callback.bind(this)
+
+            this[_DR_RL_].push({ event, callback: boundCallback })
+            bus.$on(event, boundCallback)
 
             return this
         },
         emitOnRoot(event, ...args) {
-            this.$root.$emit(event, ...args)
+            getEventBus(this).$emit(event, ...args)
             return this
         }
     },
-    beforeDestroy() {
-        if (!this[_DR_RL_] && !isArray(this[_DR_RL_])) {
+    beforeUnmount() {
+        if (!this[_DR_RL_] || !isArray(this[_DR_RL_])) {
             return
         }
 
+        const bus = getEventBus(this)
+
         while (this[_DR_RL_].length > 0) {
             const { event, callback } = this[_DR_RL_].shift()
-            this.$root.$off(event, callback)
+            bus.$off(event, callback)
         }
     }
 }

package/src/mixins/tooltip-popover.mixin.js

@@ -88,7 +88,7 @@ export default {
     /**
      * Clean up everything before the instance is destroyed.
      */
-    beforeDestroy() {
+    beforeUnmount() {
         this._disableDOMObserver()
 
         if (this._TPInstance) {

package/src/utils/events.js

@@ -46,3 +46,69 @@ export class CancelableEvent {
         }
     }
 }
+
+export function createEventBus() {
+    const listeners = Object.create(null)
+
+    return {
+        $on(event, callback) {
+            if (!listeners[event]) {
+                listeners[event] = new Set()
+            }
+
+            listeners[event].add(callback)
+        },
+
+        $off(event, callback) {
+            if (!listeners[event]) {
+                return
+            }
+
+            if (callback) {
+                listeners[event].delete(callback)
+            } else {
+                listeners[event].clear()
+            }
+        },
+
+        $emit(event, ...args) {
+            if (!listeners[event]) {
+                return
+            }
+
+            listeners[event].forEach(callback => callback(...args))
+        }
+    }
+}
+
+const fallbackEventBus = createEventBus()
+
+export function installEventBus(app) {
+    if (!app || !app.config || !app.config.globalProperties) {
+        return fallbackEventBus
+    }
+
+    if (!app.config.globalProperties.$shardsVueBus) {
+        app.config.globalProperties.$shardsVueBus = createEventBus()
+    }
+
+    return app.config.globalProperties.$shardsVueBus
+}
+
+export function getEventBus(instance) {
+    if (instance && instance.$shardsVueBus) {
+        return instance.$shardsVueBus
+    }
+
+    if (
+        instance
+        && instance.appContext
+        && instance.appContext.config
+        && instance.appContext.config.globalProperties
+        && instance.appContext.config.globalProperties.$shardsVueBus
+    ) {
+        return instance.appContext.config.globalProperties.$shardsVueBus
+    }
+
+    return fallbackEventBus
+}

package/src/utils/index.js

@@ -2,50 +2,52 @@
 /* UTILITY FUNCTIONS
 /*--------------------------------------------------------------------------*/
 
-// Install a Vue plugin if Vue is available on the window object.
+import { installEventBus } from './events'
+
+// Preserve legacy module side-effect calls without auto-installing in Vue 3.
 export function vueUse(VuePlugin) {
-    if (typeof window !== 'undefined' && window.Vue) {
-        window.Vue.use(VuePlugin)
-    }
+    return VuePlugin
 }
 
 // Register a component plugin.
-export function registerComponent(Vue, name, definition) {
-    Vue._shards_vue_components_ = Vue._shards_vue_components_ || {}
-    const loaded = Vue._shards_vue_components_[name]
+export function registerComponent(app, name, definition) {
+    installEventBus(app)
+    app._shards_vue_components_ = app._shards_vue_components_ || {}
+    const loaded = app._shards_vue_components_[name]
 
     if (!loaded && definition && name) {
-        Vue._shards_vue_components_[name] = true
-        Vue.component(name, definition)
+        app._shards_vue_components_[name] = true
+        app.component(name, definition)
     }
 
     return loaded
 }
 
 // Register a group of components.
-export function registerComponents(Vue, components) {
+export function registerComponents(app, components) {
     for (let component in components) {
-        registerComponent(Vue, component, components[component])
+        registerComponent(app, component, components[component])
     }
 }
 
 // Register a directive as being loaded. returns true if directive plugin already registered
-export function registerDirective(Vue, name, definition) {
-    Vue._shards_vue_directives_ = Vue._shards_vue_directives_ || {}
-    const loaded = Vue._shards_vue_directives_[name]
+export function registerDirective(app, name, definition) {
+    installEventBus(app)
+    app._shards_vue_directives_ = app._shards_vue_directives_ || {}
+    const loaded = app._shards_vue_directives_[name]
 
     if (!loaded && definition && name) {
-        Vue._shards_vue_directives_[name] = true
-        Vue.directive(name, definition)
+        app._shards_vue_directives_[name] = true
+        app.directive(name, definition)
     }
 
     return loaded
 }
 
 // Register a group of directives as being loaded.
-export function registerDirectives(Vue, directives) {
+export function registerDirectives(app, directives) {
     for (let directive in directives) {
-        registerDirective(Vue, directive, directives[directive])
+        registerDirective(app, directive, directives[directive])
     }
 }
 

package/src/utils/target.js

@@ -6,7 +6,15 @@ const allListenTypes = {
 
 const BEL_KEY = '__DR_BOUND_EVENT_LISTENERS__'
 
-const bindTargets = (vnode, binding, listenTypes, callback) => {
+const getElement = el => el && (el.elm || el.el || el)
+
+const bindTargets = (el, binding, listenTypes, callback) => {
+    const element = getElement(el)
+
+    if (!element) {
+        return []
+    }
+
     const targets = Object.keys(binding.modifiers || {}).filter(t => !allListenTypes[t])
 
     if (binding.value) {
@@ -14,29 +22,35 @@ const bindTargets = (vnode, binding, listenTypes, callback) => {
     }
 
     const listener = () => {
-        callback({ targets, vnode })
+        callback({ targets, el: element, binding })
     }
 
     Object.keys(allListenTypes).forEach(type => {
         if (listenTypes[type] || binding.modifiers[type]) {
-            vnode.elm.addEventListener(type, listener)
-            const boundListeners = vnode.elm[BEL_KEY] || {}
+            element.addEventListener(type, listener)
+            const boundListeners = element[BEL_KEY] || {}
             boundListeners[type] = boundListeners[type] || []
             boundListeners[type].push(listener)
-            vnode.elm[BEL_KEY] = boundListeners
+            element[BEL_KEY] = boundListeners
         }
     })
 
     return targets
 }
 
-const unbindTargets = (vnode, binding, listenTypes) => {
+const unbindTargets = (el, binding, listenTypes) => {
+    const element = getElement(el)
+
+    if (!element) {
+        return
+    }
+
     Object.keys(allListenTypes).forEach(type => {
         if (listenTypes[type] || binding.modifiers[type]) {
-            const boundListeners = vnode.elm[BEL_KEY] && vnode.elm[BEL_KEY][type]
+            const boundListeners = element[BEL_KEY] && element[BEL_KEY][type]
             if (boundListeners) {
-                boundListeners.forEach(listener => vnode.elm.removeEventListener(type, listener))
-                delete vnode.elm[BEL_KEY][type]
+                boundListeners.forEach(listener => element.removeEventListener(type, listener))
+                delete element[BEL_KEY][type]
             }
         }
     })