@gorse/shards-vue 1.0.8

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,290 @@
+<template>
+    <component :is="tag"
+        :id="computedID"
+        :class="computedTabsClasses">
+
+        <div :class="computedNavListWrapperClasses">
+            <ul :class="computedNavListClasses"
+            role="tablist"
+            tabindex='0'
+            :id="computedTabControlsID"
+            @keydown="handleOnKeynav">
+                <d-tab-button v-for="(tab, index) in tabs" :key="index"
+                    :content="tab.headHtml || tab.title"
+                    :href="tab.href"
+                    :id="computedTabButtonID"
+                    :active="tab.localActiveState"
+                    :disabled="tab.disabled"
+                    :setSize="tabs.length"
+                    :posInSet="index + 1"
+                    :controls="_tabsContainerID"
+                    :linkClass="tab.titleLinkClass"
+                    :itemClass="tab.titleItemClass"
+                    @click="setTab(index)" />
+                <slot name="tabs" />
+            </ul>
+        </div>
+
+        <div ref="tabsContainer"
+            :class="computedTabsContainerClasses"
+            :id="_tabsContainerID">
+            <slot />
+        </div>
+    </component>
+</template>
+
+<script>
+import { guid } from '../../utils'
+import { KEYCODES } from '../../utils/constants'
+import dTabButton from './_TabButton.vue'
+
+export default {
+    name: 'd-tabs',
+    components: {
+        dTabButton
+    },
+    data() {
+        return {
+            currentTab: this.value,
+            tabs: [],
+            // eslint-disable-next-line
+            _tabsContainerID: null
+        }
+    },
+    watch: {
+        currentTab (newVal, oldVal) {
+            if (newVal === oldVal) {
+                return
+            }
+
+            this.$emit('input', newVal)
+            this.tabs[newVal].$emit('click')
+        },
+        value (newVal, oldVal) {
+            if (newVal === oldVal) {
+                return
+            }
+
+            if (typeof oldVal !== 'number') {
+                oldVal = 0
+            }
+
+            const direction = newVal < oldVal ? -1 : 1
+            this.setTab(newVal, false, direction)
+        }
+    },
+    props: {
+        /**
+         * The element ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Whether it should be displayed as a card, or not.
+         */
+        card: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The value used to set the current tab.
+         */
+        value: {
+            type: Number,
+            default: null
+        },
+        /**
+         * Whether the tab controls should be displayed as pills, or not.
+         */
+        pills: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the tab controls should be displayed vertically, or not.
+         */
+        vertical: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The content class.
+         */
+        contentClass: {
+            type: String,
+            default: null
+        },
+        /**
+         * The nav class.
+         */
+        navClass: {
+            type: String,
+            default: null
+        },
+        /**
+         * The nav wrapper class.
+         */
+        navWrapperClass: {
+            type: String,
+            default: null
+        }
+    },
+    computed: {
+        computedID() {
+            return this.id || `dr-tabs-${guid()}`
+        },
+        computedTabControlsID() {
+            return `dr-tab-controls-${guid()}`
+        },
+        computedTabButtonID() {
+            return `dr-tabs-tab-${guid()}`
+        },
+        navStyle() {
+            return this.pills ? 'pills' : 'tabs'
+        },
+        computedTabsClasses() {
+            return [
+                'tabs',
+                this.vertical ? 'row' : '',
+                (this.vertical && this.card) ? 'no-gutters' : '',
+            ]
+        },
+        computedNavListClasses() {
+            return [
+                'nav',
+                `nav-${this.navStyle}`,
+                (this.card && !this.vertical) ? `card-header-${this.navStyle}` : '',
+                (this.card && this.vertical) ? 'card-header' : '',
+                (this.card && this.vertical) ? 'h-100' : '',
+                this.vertical ? 'flex-column' : '',
+                this.vertical ? 'border-bottom-0' : '',
+                this.vertical ? 'rounded-0' : '',
+                this.vertical ? 'd-tabs-vertical-nav' : '',
+                this.navClass
+            ]
+        },
+        computedNavListWrapperClasses() {
+            return [
+                this.card && !this.vertical ? 'card-header' : '',
+                this.vertical ? 'col-auto' : '',
+                this.navWrapperClass
+            ]
+        },
+        computedTabsContainerClasses() {
+            return [
+                'tab-content',
+                this.vertical ? 'col' : '',
+                this.contentClass
+            ]
+        }
+    },
+    created() {
+        this._tabsContainerID = `tabs-container-${guid()}`
+    },
+    methods: {
+        handleOnKeynav(e) {
+            if (Object.keys(KEYCODES).some((k) => KEYCODES[k] === e.keyCode)) {
+                e.preventDefault()
+                e.stopPropagation()
+            }
+
+            if (e.keyCode === KEYCODES.UP || e.keyCode === KEYCODES.LEFT ) {
+                this.previousTab()
+            }
+
+            if (e.keyCode === KEYCODES.DOWN || e.keyCode === KEYCODES.RIGHT) {
+                this.nextTab()
+            }
+        },
+        nextTab() {
+            this.setTab(this.currentTab + 1, false, 1)
+        },
+        previousTab() {
+            this.setTab(this.currentTab - 1, false, -1)
+        },
+        setTab(index, force, direction) {
+            direction = direction || 0
+            index = index || 0
+
+            direction = direction === 0 ? 0 : (direction > 0 ? 1 : -1)
+
+            if (!force && index === this.currentTab) {
+                return
+            }
+
+            const tab = this.tabs[index]
+
+            if (!tab) {
+                this.$emit('input', this.currentTab)
+                return
+            }
+
+            if (tab.disabled) {
+                if (direction) {
+                    this.setTab(index + direction, force, direction)
+                }
+
+                return
+            }
+
+            this.tabs.forEach(_tab => {
+                if (_tab === tab) {
+                    this.$set(_tab, 'localActiveState', true)
+                    return
+                }
+
+                this.$set(_tab, 'localActiveState', false)
+            })
+
+            this.currentTab = index
+        },
+        updateTabs() {
+            this.tabs = this.$children.filter(child => child._isTab)
+            let tabIndex = null
+
+            this.tabs.forEach((tab, index) => {
+                if (tab.localActiveState && !tab.disabled) {
+                    tabIndex = index
+                }
+            })
+
+            if (tabIndex === null) {
+                if (this.currentTab >= this.tabs.length) {
+                    this.setTab(this.tabs.length - 1, true, -1)
+                    return
+                }
+
+                if (this.tabs[this.currentTab] && !this.tabs[this.currentTab].disabled) {
+                    tabIndex = this.currentTab
+                }
+
+                this.tabs.forEach((tab, index) => {
+                    if (!tab.disabled && tabIndex === null) {
+                        tabIndex = index
+                    }
+                })
+            }
+
+            this.setTab(tabIndex || 0, true, 0)
+        }
+    },
+    mounted() {
+        this.updateTabs()
+    }
+}
+</script>
+
+<style scoped>
+.d-tabs-vertical-nav:hover {
+    background: rgba(90, 97, 105, 0.06);
+}
+</style>

package/src/components/tabs/_TabButton.vue

@@ -0,0 +1,130 @@
+<template>
+    <li :class="['nav-item', itemClass]" role="presentation">
+        <a :class="[
+            'nav-link',
+            active ? 'active' : '',
+            disabled ? 'disabled' : '',
+            linkClass
+        ]"
+        role="tab"
+        tabindex="-1"
+        :id="computedID"
+        :disabled="disabled"
+        :aria-selected="active ? 'true' : 'false'"
+        :aria-setsize="setSize"
+        :aria-posinset="posInSet"
+        :aria-controls="controls"
+        v-html="content"
+        @click="handleClick"
+        @keydown="handleClick" />
+    </li>
+</template>
+
+<script>
+import { guid } from '../../utils'
+import { KEYCODES } from '../../utils/constants';
+
+export default {
+    name: 'd-tab-button',
+    props: {
+        /**
+         * The element ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The active state.
+         */
+        active: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The disabled state.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The link class.
+         */
+        linkClass: {
+            type: String,
+            default: null
+        },
+        /**
+         * The item class.
+         */
+        itemClass: {
+            type: String,
+            default: null
+        },
+        /**
+         * The aria-setsize value.
+         */
+        setSize: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         * The position in set value (aria-posinset).
+         */
+        posInSet: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         * The aria-controls value.
+         */
+        controls: {
+            type: String,
+            default: null
+        },
+        /**
+         * The content.
+         */
+        content: {
+            type: String,
+            default: null
+        }
+    },
+    methods: {
+        handleClick(e) {
+            if (this.disabled) {
+                e.preventDefault()
+                e.stopPropagation()
+            }
+
+            if (e.type === 'click'
+                || e.keyCode === KEYCODES.ENTER
+                || e.keyCode === KEYCODES.SPACE) {
+                e.preventDefault()
+                e.stopPropagation()
+                this.$emit('click', e)
+            }
+        }
+    },
+    computed: {
+        computedID() {
+            return this.id || `d-tab-btn-${guid()}`
+        }
+    }
+}
+</script>
+
+<style scoped>
+.nav-link.active {
+    border-bottom: 1px solid transparent;
+}
+
+.nav-link:hover {
+    cursor: pointer;
+}
+
+.nav-link.disabled:hover {
+    cursor: not-allowed;
+}
+</style>

package/src/components/tabs/index.js

@@ -0,0 +1,19 @@
+import { registerComponents, vueUse } from '../../utils';
+
+import dTabs from './Tabs.vue';
+import dTab from './Tab.vue';
+
+const components = {
+    dTabs,
+    dTab
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/tooltip/README.md

@@ -0,0 +1,70 @@
+# Tooltips
+
+Tooltips are powerful components powered behind the scenes by Popper.js that can be attached to any element.
+
+> Note: The `container` prop is not always necessary and it is required in the following examples just for demo purposes.
+
+
+## Directive
+
+You can also create tooltips using the [tooltip directive](/docs/directives/tooltip).
+
+
+## Basic Example
+
+:::demo
+```html
+
+<div>
+    <d-button id="example-tooltip-1"/>
+    <d-tooltip target="#example-tooltip-1"
+        container=".shards-demo--example--tooltip-01">
+        😃 Wooo! I am a tooltip!
+    </d-tooltip>
+</div>
+
+<!-- tooltip-1.vue -->
+```
+:::
+
+
+## Placement
+
+The tooltip's position can be changed via the `placement` prop. The following placement options are available: `top`, `topleft`, `topright`, `right`, `righttop`, `rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom`.
+
+:::demo
+```html
+
+<div>
+    <d-button id="example-tooltip-2"/>
+    <d-tooltip target="#example-tooltip-2"
+        container=".shards-demo--example--tooltip-02"
+        placement="right">
+        👈 Wooo! I am on the left!
+    </d-tooltip>
+</div>
+
+<!-- tooltip-2.vue -->
+```
+:::
+
+
+## Triggers
+
+Using the `triggers` prop you can control on which events the tooltip should be displayed.
+
+:::demo
+```html
+
+<div>
+    <d-button id="example-tooltip-3">Click Me</d-button>
+    <d-tooltip target="#example-tooltip-3"
+        container=".shards-demo--example--tooltip-03"
+        :triggers="['click']">
+        🖱 You just clicked me!
+    </d-tooltip>
+</div>
+
+<!-- tooltip-3.vue -->
+```
+:::

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="d-none" style="display: none;" aria-hiden="true">
+        <div ref="title">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script>
+import Tooltip from '../../utils/tooltip.class'
+import TooltipPopoverMixin from '../../mixins/tooltip-popover.mixin'
+import { TP_PLACEMENTS } from '../../utils/constants'
+
+export default {
+    name: 'd-tooltip',
+    mixins: [ TooltipPopoverMixin ],
+    props: {
+        /**
+         * Title.
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Triggers.
+         */
+        triggers: {
+            type: [String, Array],
+            default: 'hover focus'
+        },
+        /**
+         * Placement.
+         */
+        placement: {
+            type: String,
+            default: 'top',
+            validator: val => Object.keys(TP_PLACEMENTS).map(p => p.toLowerCase()).includes(val)
+        },
+        /**
+         * The target element.
+         */
+        target: {
+            type: [String, Object, Function]
+        },
+        /**
+         * Delay in miliseconds.
+         */
+        delay: {
+            type: [Number, Object, String],
+            default: 0
+        },
+        /**
+         * Offset.
+         */
+        offset: {
+            type: [Number, String]
+        },
+        /**
+         * Disable animations.
+         */
+        noFade: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Wrapping container.
+         */
+        container: {
+            type: String,
+            default: null
+        },
+        /**
+         * Instance boundaries.
+         */
+        boundary: {
+            type: [String, Object],
+            default: 'scrollParent'
+        },
+        /**
+         * Show state.
+         */
+        show: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Disabled state.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+    },
+    methods: {
+        /**
+         * Gets the target and if the target exists, it initializes the Tooltip.
+         * Used inside the TooltipPopoverMixin
+         */
+        bootstrap() {
+            const target = this.getTarget()
+
+            if (target) {
+                this._TPInstance = new Tooltip(
+                    target,
+                    this.getUpdatedConfig(),
+                    this.$root
+                )
+            }
+
+            return this._TPInstance
+        }
+    }
+}
+</script>

package/src/components/tooltip/index.js

@@ -0,0 +1,17 @@
+import { registerComponents, vueUse } from './../../utils';
+
+import dTooltip from './Tooltip.vue';
+
+const components = {
+    dTooltip
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/directives/index.js

@@ -0,0 +1,7 @@
+import dToggle from './toggle'
+import dTooltip from './tooltip'
+
+export {
+  dToggle,
+  dTooltip
+}

package/src/directives/toggle/index.js

@@ -0,0 +1,16 @@
+import dToggle from './toggle'
+import { registerDirectives, vueUse } from '../../utils'
+
+const directives = {
+  dToggle
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerDirectives(Vue, directives)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/directives/toggle/toggle.js

@@ -0,0 +1,45 @@
+import target from '../../utils/target'
+import { COLLAPSE_EVENTS } from '../../utils/constants'
+import { setAttr, addClass, removeClass } from '../../utils'
+
+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));
+        });
+
+        if (inBrowser && vnode.context && targets.length > 0) {
+            setAttr(element, 'aria-controls', targets.join(' '))
+            setAttr(element, 'aria-expanded', 'false')
+
+            if (element.tagName !== 'BUTTON') {
+                setAttr(element, 'role', 'button')
+            }
+
+            element[DR_TOGGLE] = function toggleDirectiveHandler(id, state) {
+                if (targets.indexOf(id) !== -1) {
+                    setAttr(element, 'aria-expanded', state ? 'true' : 'false');
+
+                    if (state) {
+                        removeClass(element, 'collapsed');
+                        return;
+                    }
+
+                    addClass(element, 'collapsed');
+                }
+            }
+            vnode.context.$root.$on(COLLAPSE_EVENTS.STATE, element[DR_TOGGLE])
+        }
+    },
+    unbind(element, binding, vnode) {
+        if (!element[DR_TOGGLE]) {
+            return
+        }
+
+        vnode.context.$root.$off(COLLAPSE_EVENTS.STATE, element[DR_TOGGLE])
+        element[DR_TOGGLE] = null
+    }
+}