@gorse/shards-vue 1.0.8

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

@@ -0,0 +1,292 @@
+import DOMObserver from './../utils/observer'
+import { isElement, isArray, getById } from './../utils'
+import { TP_PLACEMENTS } from './../utils/constants'
+
+export default {
+    /**
+     * Watch the show and disabled props and handle each case accordingly.
+     */
+    watch: {
+        show (show, oldShow) {
+            if (show === oldShow) {
+                return
+            }
+
+            show ? this._handleShow() : this._handleHide()
+        },
+        disabled (disabled, oldDisabled) {
+            if (disabled === oldDisabled) {
+                return
+            }
+
+            disabled ? this._handleDisable() : this._handleEnable()
+        }
+    },
+
+    /**
+     * Setup initial values after the instance is created.
+     */
+    created() {
+        this._TPInstance = null
+        this._obs_title = null
+        this._obs_content = null
+    },
+
+    /**
+     * Bootstrap the Tooltip/Popover after the instance is mounted.
+     */
+    mounted() {
+        this.$nextTick(() => {
+            // The Tooltip/Popover instance is defined in each individual component
+            const TPInstance = this.bootstrap()
+
+            // If there's no TPInstance it means that there's no target, so just return here
+            if (!TPInstance) {
+                return
+            }
+
+            this._enableDOMObserver()
+
+            if (this.disabled) {
+                this._handleDisable()
+            }
+
+            if (this.show) {
+                this._handleShow()
+            }
+        })
+    },
+
+    /**
+     * Update the config when data changes.
+     */
+    updated() {
+        if (!this._TPInstance) {
+            return
+        }
+
+        this._TPInstance.updateConfig(this.getUpdatedConfig())
+    },
+
+    /**
+     * Setup the observers.
+     */
+    activated() {
+        this._enableDOMObserver()
+    },
+
+    /**
+     * Disable the observers and hide the instance.
+     */
+    deactivated() {
+        if (this._TPInstance) {
+            this._disableDOMObserver()
+            this._TPInstance.hide()
+        }
+    },
+
+    /**
+     * Clean up everything before the instance is destroyed.
+     */
+    beforeDestroy() {
+        this._disableDOMObserver()
+
+        if (this._TPInstance) {
+            this._TPInstance.destroy()
+            this._TPInstance = null
+        }
+    },
+
+    computed: {
+        baseConfig() {
+            const title = (this.title || '').trim()
+            const content = (this.content || '').trim()
+            const placement = TP_PLACEMENTS[this.placement.toUpperCase()] || 'auto'
+            const container = this.container || false
+            const boundary = this.boundary
+            const delay = (typeof this.delay === 'object') ? this.delay : (parseInt(this.delay, 10) || 0)
+            const offset = this.offset || 0
+            const animation = !this.noFade
+            const trigger = isArray(this.triggers) ? this.triggers.join(' ') : this.triggers
+
+            const callbacks = {
+                show: this._emitShowEvent,
+                shown: this._emitShownEvent,
+                hide: this._emitHideEvent,
+                hidden: this._emitHiddenEvent,
+                enabled: this._emitEnabledEvent,
+                disabled: this._emitDisabledEvent
+            }
+
+            return {
+                title,
+                content,
+                placement,
+                container,
+                boundary,
+                delay,
+                offset,
+                animation,
+                trigger,
+                callbacks
+            }
+        }
+    },
+
+    methods: {
+
+        /*--------------------------------------------------------------------------
+        /* PUBLIC
+        /*--------------------------------------------------------------------------*/
+
+        /**
+         * Returns the target element.
+         */
+        getTarget() {
+            let _target = null
+
+            switch (typeof this.target) {
+                case 'function':
+                    _target = this.target()
+                    break
+                case 'string':
+                    _target = getById(this.target)
+                    break
+                case 'object':
+                    if (isElement(this.target.$el)) {
+                        _target = this.target.$el
+                    } else if (isElement(this.target)) {
+                        _target = this.target
+                    }
+                    break
+            }
+
+            return _target
+        },
+
+        /**
+         * Returns the updated config.
+         */
+        getUpdatedConfig() {
+            const updatedConfig = { ...this.baseConfig }
+
+            // override title if slot is used
+            if (this.$refs.title) {
+                updatedConfig.title = this.$refs.title
+                updatedConfig.html = true
+            }
+
+            // override content if slot is used
+            if (this.$refs.content) {
+                updatedConfig.content = this.$refs.content
+                updatedConfig.html = true
+            }
+
+            return updatedConfig
+        },
+
+        /*--------------------------------------------------------------------------
+        /* PRIVATE
+        /*--------------------------------------------------------------------------*/
+
+        _handleShow() {
+            if (this._TPInstance) {
+                this._TPInstance.show()
+            }
+        },
+
+        _handleHide(callback) {
+            if (this._TPInstance) {
+                this._TPInstance.hide(callback)
+            } else if (typeof callback === 'function') {
+                callback()
+            }
+        },
+
+        _handleDisable() {
+            if (this._TPInstance) {
+                this._TPInstance.disable()
+            }
+        },
+
+        _handleEnable() {
+            if (this._TPInstance) {
+                this._TPInstance.enable()
+            }
+        },
+
+        _emitShowEvent(event) {
+            this.$emit('show', event)
+        },
+
+        _emitShownEvent(event) {
+            this._enableDOMObserver()
+
+            this.$emit('update:show', true)
+            this.$emit('shown', event)
+        },
+
+        _emitHideEvent(event) {
+            this.$emit('hide', event)
+        },
+
+        _emitHiddenEvent(event) {
+            this._disableDOMObserver()
+
+            this.$emit('update:show', false)
+            this.$emit('hidden', event)
+        },
+
+        _emitEnabledEvent(event) {
+            if (!event || event.type !== 'enabled') {
+                return
+            }
+
+            this.$emit('update:disabled', false)
+            this.$emit('disabled')
+        },
+
+        _emitDisabledEvent(event) {
+            if (!event || event.type !== 'disabled') {
+                return
+            }
+
+            this.$emit('update:disabled', true)
+            this.$emit('enabled')
+        },
+
+        _updatePosition() {
+            if (this._TPInstance) {
+                this._TPInstance.update()
+            }
+        },
+
+        _enableDOMObserver() {
+            if (this.$refs.title) {
+                this._obs_title = DOMObserver(
+                    this.$refs.title,
+                    this._updatePosition.bind(this)
+                )
+            }
+
+            if (this.$refs.content) {
+                this._obs_content = DOMObserver(
+                    this.$refs.content,
+                    this._updatePosition.bind(this)
+                )
+            }
+        },
+
+        _disableDOMObserver() {
+            if (this._obs_title) {
+                this._obs_title.disconnect()
+                this._obs_title = null
+            }
+
+            if (this._obs_content) {
+                this._obs_content.disconnect()
+                this._obs_content = null
+            }
+        }
+    }
+}

package/src/scripts/utils.js

@@ -0,0 +1,18 @@
+const chalk = require('chalk');
+const log = console.log;
+
+exports.logError = (err, ...args) => {
+  log(`${chalk.white.bgRed(' ERROR ')} ${err}\n`, args ? args : '');
+}
+
+exports.logWarn = (warn, ...args) => {
+  log(`${chalk.black.bgKeyword('orange')(' WARNING ')} ${warn}\n`, args.length ? args : '');
+}
+
+exports.logInfo = (info, ...args) => {
+  log(`${chalk.white.bgBlue(' INFO ')} ${info}\n`, args.length ? args : '');
+}
+
+exports.logSuccess = (success, ...args) => {
+  log(`${chalk.black.bgGreen(' SUCCESS ')} ${success}\n`, args.length ? args : '');
+}

package/src/utils/constants.js

@@ -0,0 +1,191 @@
+/**
+ * Various constants used across the project.
+ */
+
+// Theme Colors
+export const THEMECOLORS = [
+    'primary',
+    'secondary',
+    'success',
+    'info',
+    'warning',
+    'danger',
+    'light',
+    'dark'
+];
+
+/**
+ * EVENTS
+ */
+
+// Accordion
+export const COLLAPSE_EVENTS = {
+    ACCORDION: 'collapse-accordion',
+    TOGGLE: 'collapse-toggle',
+    STATE: 'collapse-state'
+}
+
+// Modal events
+export const MODAL_EVENTS = {
+    HIDDEN: 'modal-hidden'
+}
+
+// Alert Events
+export const ALERT_EVENTS = {
+    DISMISS_COUNTDOWN: 'alert-dismiss-countdown',
+    DISMISSED: 'alert-dismissed'
+}
+
+// Dropdown Events
+export const DROPDOWN_EVENTS = {
+    SHOWN: 'dropdown-shown',
+    SHOW: 'dropdown-show',
+    HIDE: 'dropdown-hide',
+    HIDDEN: 'dropdown-hidden'
+}
+
+// Link Events
+export const LINK_EVENTS = {
+    CLICKED: 'link-clicked'
+}
+
+// All events
+export const EVENTS = {
+    MODAL: MODAL_EVENTS,
+    ALERT: ALERT_EVENTS,
+    DROPDOWN: DROPDOWN_EVENTS,
+    LINK: LINK_EVENTS
+}
+
+/**
+ * TOOLTIP / POPOVER
+ */
+
+// Tooltip / Popover placements
+export const TP_PLACEMENTS = {
+    TOP: 'top',
+    TOPLEFT: 'topleft',
+    TOPRIGHT: 'topright',
+    RIGHT: 'right',
+    RIGHTTOP: 'righttop',
+    RIGHTBOTTOM: 'rightbottom',
+    BOTTOM: 'bottom',
+    BOTTOMLEFT: 'bottomleft',
+    BOTTOMRIGHT: 'bottomright',
+    LEFT: 'left',
+    LEFTTOP: 'lefttop',
+    LEFTBOTTOM: 'leftbottom',
+    AUTO: 'auto'
+}
+
+// Normalized placements
+export const N_TP_PLACEMENTS = {
+    AUTO: 'auto',
+    TOP: 'top',
+    RIGHT: 'right',
+    BOTTOM: 'bottom',
+    LEFT: 'left',
+    TOPLEFT: 'top',
+    TOPRIGHT: 'top',
+    RIGHTTOP: 'right',
+    RIGHTBOTTOM: 'right',
+    BOTTOMLEFT: 'bottom',
+    BOTTOMRIGHT: 'bottom',
+    LEFTTOP: 'left',
+    LEFTBOTTOM: 'left'
+}
+
+// Tooltip/Popover offset map
+export const TP_OFFSET_MAP = {
+    AUTO: 0,
+    TOPLEFT: -1,
+    TOP: 0,
+    TOPRIGHT: +1,
+    RIGHTTOP: -1,
+    RIGHT: 0,
+    RIGHTBOTTOM: +1,
+    BOTTOMLEFT: -1,
+    BOTTOM: 0,
+    BOTTOMRIGHT: +1,
+    LEFTTOP: -1,
+    LEFT: 0,
+    LEFTBOTTOM: +1
+}
+
+// Popover state classes
+export const TP_STATE_CLASSES = {
+    FADE: 'fade',
+    SHOW: 'show'
+}
+
+// Popover selectors
+export const POPOVER_SELECTORS = {
+    HEADER: '.popover-header',
+    BODY: '.popover-body'
+}
+
+// Tooltip selectors
+export const TOOLTIP_SELECTORS = {
+    TOOLTIP: '.tooltip',
+    TOOLTIP_INNER: '.tooltip-inner',
+    ARROW: '.arrow'
+}
+
+// Tooltip hover state classes
+export const TOOLTIP_HOVER_STATE_CLASSES = {
+    SHOW: 'show',
+    OUT: 'out'
+}
+
+/**
+ * FORMS
+ */
+
+ export const INPUT_TYPES = [
+     'text',
+     'password',
+     'email',
+     'number',
+     'tel',
+     'url',
+     'search',
+     'range',
+     'color',
+     'date',
+     'time',
+     'datetime',
+     'datetime-local',
+     'month',
+     'week',
+     'file'
+ ]
+
+ /**
+  * EMBEDS
+  */
+
+export const EMBED_TYPES = [
+    'iframe',
+    'video',
+    'embed',
+    'object',
+    'img',
+    'd-img'
+]
+
+export const EMBED_ASPECTS = [
+    '21by9',
+    '16by9',
+    '4by3',
+    '1by1'
+]
+
+// Keycodes
+export const KEYCODES = {
+    UP: 38,
+    DOWN: 40,
+    LEFT: 37,
+    RIGHT: 39,
+    ENTER: 13,
+    SPACE: 32
+}

package/src/utils/events.js

@@ -0,0 +1,48 @@
+// Creates the cancelable event props.
+function _makeCancelableEventProps() {
+    return { enumerable: true, configurable: false, writable: false }
+}
+
+/**
+ * Custom cancelable event.
+ */
+export class CancelableEvent {
+    constructor (type, eventInit = {}) {
+        Object.assign(this, CancelableEvent.defaults(), eventInit, { type })
+
+        Object.defineProperties(this, {
+            type: _makeCancelableEventProps(),
+            cancelable: _makeCancelableEventProps(),
+            nativeEvent: _makeCancelableEventProps(),
+            target: _makeCancelableEventProps(),
+            relatedTarget: _makeCancelableEventProps(),
+            vueTarget: _makeCancelableEventProps()
+        })
+
+        let defaultPrevented = false
+
+        this.preventDefault = function preventDefault() {
+            if (this.cancelable) {
+                defaultPrevented = true
+            }
+        }
+
+        Object.defineProperty(this, 'defaultPrevented', {
+            enumerable: true,
+            get() {
+                return defaultPrevented
+            }
+        })
+    }
+
+    static defaults() {
+        return {
+            type: '',
+            cancelable: true,
+            nativeEvent: null,
+            target: null,
+            relatedTarget: null,
+            vueTarget: null
+        }
+    }
+}