@gorse/shards-vue 1.0.8

package/src/directives/tooltip/README.md

@@ -0,0 +1,42 @@
+# Tooltip
+
+The `v-d-tooltip` directive can be applied to any component in order to create powerful and dynamic tooltips.
+
+## Basic Example
+
+:::demo
+```html
+
+<d-button v-d-tooltip="'👋 Hello there!'">Hover Me</d-button>
+
+<!-- tooltip-1.vue -->
+```
+:::
+
+## Placement
+
+Changing the tooltip's placement can be achieved using the, `auto`, `top`, `bottom`, `left`, `right`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop` or `rightbottom` modifiers.
+
+:::demo
+```html
+
+<d-button v-d-tooltip.bottomright="'I\'m down here!'">Hover Me</d-button>
+
+<!-- tooltip-2.vue -->
+```
+:::
+
+## Triggers
+
+You can change the default trigger (hover) using either the `click`, `hover` or `focus` modifier.
+
+:::demo
+```html
+
+<d-button v-d-tooltip.click="'👋 Hello there!'">Click Me</d-button>
+
+<!-- tooltip-3.vue -->
+```
+:::
+
+

package/src/directives/tooltip/index.js

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

package/src/directives/tooltip/meta.json

@@ -0,0 +1,5 @@
+{
+    "type": "directive",
+    "name": "Tooltip",
+    "slug": "tooltip"
+}

package/src/directives/tooltip/tooltip.js

@@ -0,0 +1,145 @@
+import Tooltip from '../../utils/tooltip.class'
+
+const inBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'
+const KEY = '_DR_TOOLTIP_'
+const validTriggers = {
+    'focus': true,
+    'hover': true,
+    'click': true,
+    'blur': true
+}
+
+/**
+ * Bindings parser.
+ */
+function parseBindings(bindings) {
+    let config = {}
+
+    switch (typeof bindings.value) {
+        case 'string':
+        case 'function':
+            config.title = bindings.value
+            break
+        case 'object':
+            config = { ...bindings.value }
+    }
+
+    // Parse args (eg: v-d-tooltip:my-container)
+    if (bindings.arg) {
+        config.container = `#${bindings.arg}` // #my-container
+    }
+
+    // Parse modifiers. eg: v-d-tooltip.my-modifier
+    Object.keys(bindings.modifiers).forEach(mod => {
+        // Parse if the title allows HTML
+        if (/^html$/.test(mod)) {
+            config.html = true
+
+        // Parse animation
+        } else if (/^nofade$/.test(mod)) {
+            config.animation = false
+
+        // Parse placement
+        } else if (/^(auto|top(left|right)?|bottom(left|right)?|left(top|bottom)?|right(top|bottom)?)$/.test(mod)) {
+            config.placement = mod
+
+        // Parse boundary
+        } else if (/^(window|viewport)$/.test(mod)) {
+            config.boundary = mod
+
+        // Parse delay
+        } else if (/^d\d+$/.test(mod)) {
+            const delay = parseInt(mod.slice(1), 10) || 0
+            if (delay) {
+                config.delay = delay
+            }
+
+        // Parse offset
+        }  else if (/^o-?\d+$/.test(mod)) {
+            const offset = parseInt(mod.slice(1), 10) || 0
+            if (offset) {
+                config.offset = offset
+            }
+        }
+    })
+
+    // Parse selected triggers.
+    const selectedTriggers = {}
+    let triggers = typeof config.trigger === 'string' ? config.trigger.trim().split(/\s+/) : []
+
+    triggers.forEach(trigger => {
+        if (validTriggers[trigger]) {
+            selectedTriggers[trigger] = true
+        }
+    })
+
+    // Parse trigger modifiers. eg: v-d-tooltip.click
+    Object.keys(validTriggers).forEach(trigger => {
+        if (bindings.modifiers[trigger]) {
+            selectedTriggers[trigger] = true
+        }
+    })
+
+    config.trigger = Object.keys(selectedTriggers).join(' ')
+
+    // Convert `blur` to `focus`
+    if (config.trigger === 'blur') {
+        config.trigger = 'focus'
+    }
+
+    // If there's no trigger assigned, just delete the key.
+    if (!config.trigger) {
+        delete config.trigger
+    }
+
+    return config
+}
+
+function applyTooltip(el, bindings, vnode) {
+    if (!inBrowser) {
+        return
+    }
+
+    const parsedBindings = parseBindings(bindings)
+
+    if (!el[KEY]) {
+        el[KEY] = new Tooltip(el, parsedBindings, vnode.context.$root)
+        return
+    }
+
+    el[KEY].updateConfig(parsedBindings)
+}
+
+export default {
+    bind (el, bindings, vnode) {
+        applyTooltip(el, bindings, vnode)
+    },
+
+    inserted(el, bindings, vnode) {
+        applyTooltip(el, bindings, vnode)
+    },
+
+    update (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) {
+        if (!inBrowser) {
+            return
+        }
+
+        if (el[KEY]) {
+            el[KEY].destroy()
+            el[KEY] = null
+            delete el[KEY]
+        }
+    }
+}

package/src/index.js

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

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

@@ -0,0 +1,80 @@
+# Getting Started
+
+Shards Vue is really easy to get started with. Make sure to follow the guide below to get a better understanding about some of the decisions behind Shards Vue and how to use it to kick-start your next project.
+
+> **Note:** This page is currently a work in progress.
+
+## Installation
+
+If you are using a module bundler such as [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/), you can install **Shards Vue** via [pnpm](https://pnpm.io/), [Yarn](https://yarnpkg.com/en/) or [npm](https://www.npmjs.com/) and import Shards Vue directly into your project.
+
+```bash
+// Install via pnpm
+pnpm add @gorse/shards-vue
+
+// Install via Yarn
+yarn add @gorse/shards-vue
+
+// Install via npm
+npm i @gorse/shards-vue
+```
+
+## Module Bundlers
+
+You can register the entire UI kit as a Vue plugin in your app's entry point:
+
+```javascript
+import Vue from 'vue'
+import ShardsVue from '@gorse/shards-vue'
+
+// Import base styles (Bootstrap and Shards)
+import 'bootstrap/dist/css/bootstrap.css'
+import '@gorse/shards-ui/dist/css/shards.css'
+
+Vue.use(ShardsVue);
+```
+
+## Registering Components as Vue Plugins
+
+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 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)
+
+```
+
+## Importing Single File Components
+
+Importing single file components is also possible.
+
+```vue
+<template>
+    <d-button @click="handleClick">Click Me!</d-button>
+</template>
+
+<script>
+import dButton from '@gorse/shards-vue/src/components/button/Button'
+
+export default {
+    components: {
+        dButton
+    },
+    methods: {
+        handleClick() {
+            alert('You just clicked me!')
+        }
+    }
+}
+</script>
+```
+
+## Naming Decisions
+
+You will notice that all components are prefixed with `<d-{name}>`. The reason behind this decision is to provide a consistent naming experience across all existing and future products from DesignRevision.

package/src/markdown/getting-started/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "Getting Started",
+    "slug": "getting-started"
+}

package/src/markdown/roadmap/README.md

@@ -0,0 +1,3 @@
+# Roadmap
+
+> **Note:** This page is currently under development.

package/src/markdown/roadmap/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "Getting Started",
+    "slug": "getting-started"
+}

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

@@ -0,0 +1,73 @@
+export default {
+    data() {
+        return {
+            localChecked: this.checked,
+            hasFocus: false
+        }
+    },
+    model: {
+        prop: 'checked',
+        event: 'input'
+    },
+    props: {
+        value: {},
+        checked: {},
+        buttonTheme: {
+            type: String,
+            default: null
+        }
+    },
+    computed: {
+        computedLocalChecked: {
+            get() {
+                this.isChild ? this.$parent.localChecked : this.localChecked
+            },
+            set (val) {
+                if (this.isChild) {
+                    this.$parent.localChecked = val
+                    return
+                }
+
+                this.localChecked = val
+            }
+        },
+        isChild() {
+            return Boolean(this.$parent && this.$parent.is_RadioCheckGroup)
+        },
+        isDisabled() {
+            return Boolean(this.isChild ? (this.$parent.disabled || this.disabled) : this.disabled)
+        },
+        isPlain() {
+            return Boolean(this.isChild ? this.$parent.plain : this.plain)
+        },
+        getSize() {
+            return this.isChild ? this.$parent.size : this.size
+        },
+        getState() {
+            if (this.isChild && typeof this.$parent.getState === 'boolean') {
+                return this.$parent.getState
+            }
+
+            return this.computedState
+        },
+        getStateClass() {
+            return typeof this.getState === 'boolean' ? (this.getState ? 'is-valid' : 'is-invalid') : ''
+        },
+        isStacked() {
+            return Boolean(this.isChild && this.$parent.stacked)
+        },
+        getButtonTheme() {
+            return this.buttonTheme || (this.isChild ? this.$parent.buttonTheme : null) || 'secondary'
+        },
+        buttonClasses() {
+            return [
+                'btn',
+                `btn-${this.getButtonTheme}`,
+                this.getSize ? `btn-${this.getSize}` : '',
+                this.isDisabled ? 'disabled' : '',
+                this.hasFocus ? 'focus' : '',
+                this.isStacked ? 'mb-0' : ''
+            ]
+        }
+    }
+  }

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

@@ -0,0 +1,32 @@
+import { isArray } from '../utils';
+
+const _DR_RL_ = '_DR_RL_';
+
+export default {
+    methods: {
+        listenOnRoot(event, callback) {
+            if (!this[_DR_RL_] || !isArray(this[_DR_RL_])) {
+                this[_DR_RL_] = []
+            }
+
+            this[_DR_RL_].push({ event, callback })
+            this.$root.$on(event, callback)
+
+            return this
+        },
+        emitOnRoot(event, ...args) {
+            this.$root.$emit(event, ...args)
+            return this
+        }
+    },
+    beforeDestroy() {
+        if (!this[_DR_RL_] && !isArray(this[_DR_RL_])) {
+            return
+        }
+
+        while (this[_DR_RL_].length > 0) {
+            const { event, callback } = this[_DR_RL_].shift()
+            this.$root.$off(event, callback)
+        }
+    }
+}