@gorse/shards-vue 1.0.8

package/src/utils/index.js

@@ -0,0 +1,251 @@
+/*--------------------------------------------------------------------------
+/* UTILITY FUNCTIONS
+/*--------------------------------------------------------------------------*/
+
+// Install a Vue plugin if Vue is available on the window object.
+export function vueUse(VuePlugin) {
+    if (typeof window !== 'undefined' && window.Vue) {
+        window.Vue.use(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]
+
+    if (!loaded && definition && name) {
+        Vue._shards_vue_components_[name] = true
+        Vue.component(name, definition)
+    }
+
+    return loaded
+}
+
+// Register a group of components.
+export function registerComponents(Vue, components) {
+    for (let component in components) {
+        registerComponent(Vue, 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]
+
+    if (!loaded && definition && name) {
+        Vue._shards_vue_directives_[name] = true
+        Vue.directive(name, definition)
+    }
+
+    return loaded
+}
+
+// Register a group of directives as being loaded.
+export function registerDirectives(Vue, directives) {
+    for (let directive in directives) {
+        registerDirective(Vue, directive, directives[directive])
+    }
+}
+
+// Array check
+if (!Array.isArray) {
+    Array.isArray = arg => Object.prototype.toString.call(arg) === '[object Array]'
+}
+export const isArray = Array.isArray;
+
+// Element.matches polyfill
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
+if (typeof Element !== 'undefined' && !Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            // eslint-disable-next-line
+            while (--i >= 0 && matches.item(i) !== this) {}
+            return i > -1;
+        };
+}
+
+// Converts a value to an array.
+export function convertToArray(value) {
+    if (typeof value === 'string') {
+        value = value.split(' ')
+    }
+    return value
+}
+
+// Mocks SVGAnimatedString
+let SVGAnimatedString = function () {}
+if (typeof window !== 'undefined') {
+    SVGAnimatedString = window.SVGAnimatedString
+}
+
+// Generates a GUID
+export const guid = () => {
+    var lut = [];
+
+    for (var i = 0; i < 256; i++) {
+        lut[i] = (i < 16 ? '0' : '') + (i).toString(16);
+    }
+
+    var d0 = Math.random() * 0xffffffff | 0;
+    var d1 = Math.random() * 0xffffffff | 0;
+    var d2 = Math.random() * 0xffffffff | 0;
+    var d3 = Math.random() * 0xffffffff | 0;
+
+    return lut[d0 & 0xff] + lut[d0 >> 8 & 0xff] + lut[d0 >> 16 & 0xff] + lut[d0 >> 24 & 0xff] + '-' +
+        lut[d1 & 0xff] + lut[d1 >> 8 & 0xff] + '-' + lut[d1 >> 16 & 0x0f | 0x40] + lut[d1 >> 24 & 0xff] + '-' +
+        lut[d2 & 0x3f | 0x80] + lut[d2 >> 8 & 0xff] + '-' + lut[d2 >> 16 & 0xff] + lut[d2 >> 24 & 0xff] +
+        lut[d3 & 0xff] + lut[d3 >> 8 & 0xff] + lut[d3 >> 16 & 0xff] + lut[d3 >> 24 & 0xff];
+}
+
+
+/*--------------------------------------------------------------------------
+/* DOM UTILITY FUNCTIONS
+/*--------------------------------------------------------------------------*/
+
+// Get an element by id
+export const getById = (id) => {
+    return document.getElementById(/^#/.test(id) ? id.slice(1) : id) || null
+}
+
+// Checks whether a variable is a DOM element, or not.
+export const isElement = el => {
+    return el && el.nodeType === Node.ELEMENT_NODE
+}
+
+// Checks whether an element has a particular class name, or not.
+export const hasClass = (el, className) => {
+    if (className && isElement(el)) {
+        return el.classList.contains(className)
+    }
+
+    return false
+}
+
+// Adds a class to an element
+export const addClass = (el, className) => {
+    if (className && isElement(el)) {
+        el.classList.add(className)
+    }
+}
+
+// Removes a class from an element
+export const removeClass = (el, className) => {
+    if (className && isElement(el)) {
+        el.classList.remove(className)
+    }
+}
+
+// Removes multiple classes
+export function removeClasses(el, classes) {
+    const newClasses = convertToArray(classes)
+    let classList
+
+    if (el.className instanceof SVGAnimatedString) {
+        classList = convertToArray(el.className.baseVal)
+    } else {
+        classList = convertToArray(el.className)
+    }
+
+    newClasses.forEach((newClass) => {
+        const index = classList.indexOf(newClass)
+        if (index !== -1) {
+            classList.splice(index, 1)
+        }
+    })
+
+    if (el instanceof SVGElement) {
+        el.setAttribute('class', classList.join(' '))
+    } else {
+        el.className = classList.join(' ')
+    }
+}
+
+// Sets an attribute on an element
+export const setAttr = (el, attr, value) => {
+    if (attr && isElement(el)) {
+        el.setAttribute(attr, value)
+    }
+}
+
+// Removes an attribute from an element
+export const removeAttr = (el, attr) => {
+    if (attr && isElement(el)) {
+        el.removeAttribute(attr)
+    }
+}
+
+// Gets an attribute value from an element
+export const getAttr = (el, attr) => {
+    if (attr && isElement(el)) {
+        return el.getAttribute(attr)
+    }
+
+    return null
+}
+
+// Checks whether an element is disabled, or not.
+export const isDisabled = el => {
+    return !isElement(el)
+        || el.disabled
+        || el.classList.contains('disabled')
+        || Boolean(el.getAttribute('disabled'))
+}
+
+// Determines if an HTML element is visible - Faster than CSS check
+export const isVisible = el => {
+    return isElement(el)
+        && document.body.contains(el)
+        && el.getBoundingClientRect().height > 0
+        && el.getBoundingClientRect().width > 0
+}
+
+// Selects an element.
+export const selectElement = (selector, root) => {
+    if (!isElement(root)) {
+        root = document
+    }
+
+    return root.querySelector(selector) || null
+}
+
+// Finds closest element matching selector.
+export const closest = (selector, root) => {
+    if (!isElement(root)) {
+        return null
+    }
+
+    const Closest = Element.prototype.closest ||
+        function (sel) {
+            let element = this
+            if (!document.documentElement.contains(element)) {
+                return null
+            }
+
+            do {
+                if (element.matches(sel)) {
+                    return element
+                }
+
+                element = element.parentElement
+            } while (element !== null)
+
+            return null
+        }
+
+    const el = Closest.call(root, selector)
+
+    return el === root ? null : el
+}
+
+export const getComputedStyles = el => {
+    return isElement(el) ? window.getComputedStyle(el) : {}
+}

package/src/utils/observer.js

@@ -0,0 +1,56 @@
+import { isElement } from './'
+
+/**
+ * Observes DOM changes.
+ * @see http://stackoverflow.com/questions/3219758
+ */
+export default (el, callback, opts = null) => {
+
+    if (opts === null) {
+        opts = {
+            subtree: true,
+            childList: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['class', 'style']
+        }
+    }
+
+    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
+    const eventListenerSupported = window.addEventListener
+
+    el = el ? (el.$el || el) : null
+    if (!isElement(el)) {
+        return null
+    }
+
+    let obs = null
+
+    if (MutationObserver) {
+        obs = new MutationObserver(mutations => {
+            let changed = false
+            for (let i = 0; i < mutations.length && !changed; i++) {
+                const mutation = mutations[i]
+                const type = mutation.type
+                const target = mutation.target
+                if (type === 'characterData' && target.nodeType === Node.TEXT_NODE) {
+                    changed = true
+                } else if (type === 'attributes') {
+                    changed = true
+                } else if (type === 'childList' && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)) {
+                    changed = true
+                }
+            }
+            if (changed) {
+                callback()
+            }
+        })
+
+        obs.observe(el, { ...{ childList: true, subtree: true }, ...opts })
+    } else if (eventListenerSupported) {
+        el.addEventListener('DOMNodeInserted', callback, false)
+        el.addEventListener('DOMNodeRemoved', callback, false)
+    }
+
+    return obs
+}

package/src/utils/popover.class.js

@@ -0,0 +1,91 @@
+import TPManager from './tpmanager.class'
+import { selectElement, removeClasses } from './index'
+import { POPOVER_SELECTORS, TP_STATE_CLASSES } from './constants'
+
+const PopoverDefaults = {
+    trigger: 'click',
+    content: '',
+    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+}
+
+const Defaults = { ...TPManager.Defaults, ...PopoverDefaults }
+
+export default class Popover extends TPManager {
+
+    static get Name () {
+        return 'popover'
+    }
+
+    static get Defaults () {
+        return Defaults
+    }
+
+    static get ClassPrefix () {
+        return 'bs-popover'
+    }
+
+    /*--------------------------------------------------------------------------
+    /* OVERRIDES
+    /*--------------------------------------------------------------------------*/
+
+    /**
+     * Checks if the Popover has content.
+     * @returns True if the Popover has content (title or body), false otherwise.
+     */
+    hasContent(TPElement) {
+        const Popover = TPElement || this._TPElement
+
+        if (!Popover) {
+            return false
+        }
+
+        const popoverHeaderEl = selectElement(POPOVER_SELECTORS.HEADER, Popover)
+        const popoverBodyEl = selectElement(POPOVER_SELECTORS.BODY, Popover)
+        const hasHeader = Boolean((popoverHeaderEl || {}).innerHTML)
+        const hasBody = Boolean((popoverBodyEl || {}).innerHTML)
+
+        return hasHeader || hasBody
+    }
+
+    /**
+     * Sets the content for the Popover element.
+     */
+    setContent(TPElement) {
+        const Popover = TPElement || this._TPElement
+
+        const popoverHeaderEl = selectElement(POPOVER_SELECTORS.HEADER, Popover)
+        const popoverBodyEl = selectElement(POPOVER_SELECTORS.BODY, Popover)
+
+        this.setElementContent( popoverHeaderEl, this.getTitle())
+        this.setElementContent( popoverBodyEl, this.getContent())
+
+        removeClasses(Popover, [TP_STATE_CLASSES.FADE, TP_STATE_CLASSES.SHOW])
+    }
+
+    /*--------------------------------------------------------------------------
+    /* CLASS SPECIFIC
+    /*--------------------------------------------------------------------------*/
+
+    /**
+     * Returns the Popover content.
+     */
+    getContent() {
+        let content = this._config.content || ''
+
+        switch (content) {
+            case 'string':
+                content = content.trim()
+                break
+            case 'function':
+                content = content(this._targetElement)
+                break
+            case 'object':
+                if (content.nodeType && !content.innerHTML.trim()) {
+                    content = ''
+                }
+                break
+        }
+
+        return content
+    }
+}

package/src/utils/target.js

@@ -0,0 +1,50 @@
+const allListenTypes = {
+    hover: true,
+    click: true,
+    focus: true
+}
+
+const BEL_KEY = '__DR_BOUND_EVENT_LISTENERS__'
+
+const bindTargets = (vnode, binding, listenTypes, callback) => {
+    const targets = Object.keys(binding.modifiers || {}).filter(t => !allListenTypes[t])
+
+    if (binding.value) {
+        targets.push(binding.value)
+    }
+
+    const listener = () => {
+        callback({ targets, vnode })
+    }
+
+    Object.keys(allListenTypes).forEach(type => {
+        if (listenTypes[type] || binding.modifiers[type]) {
+            vnode.elm.addEventListener(type, listener)
+            const boundListeners = vnode.elm[BEL_KEY] || {}
+            boundListeners[type] = boundListeners[type] || []
+            boundListeners[type].push(listener)
+            vnode.elm[BEL_KEY] = boundListeners
+        }
+    })
+
+    return targets
+}
+
+const unbindTargets = (vnode, binding, listenTypes) => {
+    Object.keys(allListenTypes).forEach(type => {
+        if (listenTypes[type] || binding.modifiers[type]) {
+            const boundListeners = vnode.elm[BEL_KEY] && vnode.elm[BEL_KEY][type]
+            if (boundListeners) {
+                boundListeners.forEach(listener => vnode.elm.removeEventListener(type, listener))
+                delete vnode.elm[BEL_KEY][type]
+            }
+        }
+    })
+}
+
+export {
+    bindTargets,
+    unbindTargets
+}
+
+export default bindTargets

package/src/utils/tooltip.class.js

@@ -0,0 +1,60 @@
+
+import TPManager from './tpmanager.class'
+import { TP_STATE_CLASSES, TOOLTIP_SELECTORS } from './constants'
+import { removeClasses, selectElement } from './index'
+
+const TooltipDefaults = {
+    template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+}
+
+const Defaults = { ...TPManager.Defaults, ...TooltipDefaults }
+
+export default class Tooltip extends TPManager {
+
+    static get Name() {
+        return 'tooltip'
+    }
+
+    static get Defaults() {
+        return Defaults
+    }
+
+    static get ClassPrefix() {
+        return 'bs-tooltip'
+    }
+
+    /*--------------------------------------------------------------------------
+    /* OVERRIDES
+    /*--------------------------------------------------------------------------*/
+
+    /**
+     * Checks whether the Tooltip has any content.
+     */
+    hasContent(TPElement) {
+        const Tooltip = TPElement || this._TPElement
+
+        if (!Tooltip) {
+            return false
+        }
+
+        const tooltipInnerEl = selectElement(TOOLTIP_SELECTORS.TOOLTIP_INNER, Tooltip)
+
+        return Boolean((tooltipInnerEl || {}).innerHTML)
+    }
+
+    /**
+     * Sets the Tooltip content.
+     */
+    setContent(TPElement) {
+        const Tooltip = TPElement || this._TPElement
+
+        if (!Tooltip) {
+            return false
+        }
+
+        const tooltipInnerEl = selectElement(TOOLTIP_SELECTORS.TOOLTIP_INNER, Tooltip)
+        this.setElementContent(tooltipInnerEl, this.getTitle())
+
+        removeClasses(Tooltip, [TP_STATE_CLASSES.FADE, TP_STATE_CLASSES.SHOW])
+    }
+}