@gorse/shards-vue 1.0.8

package/src/components/alert/Alert.vue

@@ -0,0 +1,156 @@
+<template>
+    <div v-if="computedShow"
+        role="alert"
+        aria-live="polite"
+        aria-atomic="true"
+        :class="[
+            'alert',
+            theme ? `alert-${theme}` : '',
+            dismissible ? `alert-dismissible` : ''
+        ]">
+        <slot />
+        <d-button-close v-if="dismissible"
+            :aria-label="dismissLabel"
+            @click="dismiss"
+            href="#" />
+    </div>
+</template>
+
+<script>
+import { THEMECOLORS, ALERT_EVENTS } from '../../utils/constants';
+import dButtonClose from '../button/ButtonClose.vue';
+
+export default {
+    name: 'd-alert',
+    components: {
+        dButtonClose
+    },
+    props: {
+        /**
+         * Alert color theme.
+         */
+        theme: {
+            type: String,
+            default: 'primary',
+            validator: v => THEMECOLORS.includes(v)
+        },
+        /**
+         * Whether the alert is dismissible, or not.
+         */
+        dismissible: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Dismiss button label.
+         */
+        dismissLabel: {
+            type: String,
+            default: 'Close'
+        },
+        /**
+         * Show state or duration.
+         */
+        show: {
+            type: [Boolean, Number, String],
+            default: false
+        }
+    },
+    model: {
+        prop: 'show',
+        event: 'input'
+    },
+    data() {
+        return {
+            timer: null,
+            dismissed: false
+        }
+    },
+    watch: {
+        show() {
+            this.showChanged();
+        }
+    },
+    mounted() {
+        this.showChanged();
+    },
+    destroyed() {
+        this.clearCounter();
+    },
+    computed: {
+        computedShow() {
+            return !this.dismissed && (this.timer || this.show);
+        }
+    },
+    methods: {
+        clearCounter() {
+            if (this.timer) {
+                clearInterval(this.timer);
+                this.timer = null;
+            }
+        },
+
+        dismiss() {
+            this.clearCounter();
+            this.dismissed = true;
+
+            /**
+             * Alert dismissed event.
+             *
+             * @event alert-dismissed
+             * @type {Boolean}
+             */
+            this.$emit(ALERT_EVENTS.DISMISSED);
+            this.$emit('input', false);
+
+            if (typeof this.show === 'boolean') {
+                this.$emit('input', false);
+                return;
+            }
+
+            /**
+             * Alert dismiss countdown event.
+             *
+             * @event alert-dismiss-countdown
+             * @type {Number}
+             */
+            this.$emit(ALERT_EVENTS.DISMISS_COUNTDOWN, 0);
+            this.$emit('input', 0);
+        },
+
+        showChanged() {
+            this.clearCounter();
+            this.dismissed = false;
+
+            if (typeof this.show === 'boolean' || this.show === null || this.show === 0)
+                return
+
+            let dismissTimer = this.show;
+            this.timer = setInterval(() => {
+                if (dismissTimer < 1) {
+                    this.dismiss();
+                    return;
+                }
+
+                dismissTimer--;
+
+                /**
+                 * Alert dismiss countdown event.
+                 *
+                 * @event alert-dismiss-countdown
+                 * @type {Number}
+                 */
+                this.$emit(ALERT_EVENTS.DISMISS_COUNTDOWN, dismissTimer);
+                this.$emit('input', dismissTimer);
+            }, 1000);
+        }
+    }
+}
+</script>
+
+<style scoped>
+.close {
+    min-height: 100%;
+    padding: 0.625rem 1.25rem 0.75rem 1.25rem;
+}
+</style>

package/src/components/alert/README.md

@@ -0,0 +1,86 @@
+# Alerts
+
+Alerts allow you to display contextual feedback for various user actions.
+
+## Basic Alerts
+
+Alerts come in various contextual theme colors
+
+:::demo
+```html Alerts contextual theme colors example
+
+<div>
+    <d-alert show>Alert - Primary Theme (default) - <a class="alert-link" href="#">Example Link</a></d-alert>
+    <d-alert theme="secondary" show>Alert - Secondary Theme - <a class="alert-link" href="#">Example Link</a></d-alert>
+    <d-alert theme="success" show>Alert - Success Theme - <a class="alert-link" href="#">Example Link</a></d-alert>
+    <d-alert theme="danger" show>Alert - Danger Theme - <a class="alert-link" href="#">Example Link</a></d-alert>
+    <d-alert theme="warning" show>Alert - Warning Theme - <a class="alert-link" href="#">Example Link</a></d-alert>
+    <d-alert theme="info" show>Alert - Info Theme - <a class="alert-link" href="#">Example Link</a></d-alert>
+    <d-alert theme="light" show>Alert - Light Theme - <a class="alert-link" href="#">Example Link</a></d-alert>
+    <d-alert theme="dark" show>Alert - Dark Theme - <a class="alert-link" href="#">Example Link</a></d-alert>
+</div>
+
+<!-- alerts-1.vue -->
+```
+:::
+
+## Dismissible Alerts
+
+Dismissible alerts provide the option to hide the alert with a close X button.
+
+:::demo Dismissible alert example
+```html
+
+<div>
+    <d-alert show dismissible>You can easily dismiss me using the <strong>close</strong> button &rarr;</d-alert>
+</div>
+
+<!-- alerts-2.vue -->
+```
+:::
+
+## Self Dismissing Alerts
+
+You can also control how much time an alert is visible by providing a `Number` in seconds for the `show` prop. 
+
+:::demo Auto dismissible alert example.
+```html
+
+<template>
+  <div>
+    <d-alert dismissible
+             :show="timeUntilDismissed"
+             theme="success"
+             @alert-dismissed="timeUntilDismissed = 0"
+             @alert-dismiss-countdown="handleTimeChange">
+        <b>Success!</b> This alert will will be dismissed in {{ timeUntilDismissed }} seconds!
+    </d-alert>
+    <d-btn @click="showAlert">
+      Show Alert!
+    </d-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      duration: 5,
+      timeUntilDismissed: 0
+    }
+  },
+  methods: {
+    handleTimeChange (time) {
+      this.timeUntilDismissed = time
+    },
+    showAlert () {
+      this.timeUntilDismissed = this.duration
+    }
+  }
+}
+</script>
+
+<!-- alerts-3.vue -->
+```
+:::
+

package/src/components/alert/index.js

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

package/src/components/badge/Badge.vue

@@ -0,0 +1,62 @@
+<template>
+    <component :is="computedTag" :class="[
+        'badge',
+        theme && !outline ? `badge-${theme}` : '',
+        outline ? `badge-outline-${theme}` : '',
+        pill ? `badge-pill` : '',
+    ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+import dLink from '../link/Link.vue'
+import createLinkProps from '../link/create-link-props'
+import { THEMECOLORS } from '../../utils/constants'
+
+/**
+ * This subcomponent is inheriting <a href="/docs/components/link">Link</a> component's props.
+ */
+export default {
+    name: 'd-badge',
+    components: {
+        dLink
+    },
+    props: {...createLinkProps(), ...{
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'span'
+        },
+        /**
+         * The theme color.
+         */
+        theme: {
+            type: String,
+            default: 'primary',
+            validator: v => THEMECOLORS.includes(v)
+        },
+        /**
+         * Whether it should be displayed as a pill, or not.
+         */
+        pill: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it should be displayed with an outline, or not.
+         */
+        outline: {
+            type: Boolean,
+            default: false
+        }
+    }},
+    computed: {
+        computedTag() {
+            return this.href || this.to ? 'd-link' : this.tag
+        }
+    }
+}
+</script>

package/src/components/badge/README.md

@@ -0,0 +1,112 @@
+# Badges
+
+Badges are the perfect component for labels and count values.
+
+## Contextual Variations
+
+Using the `theme` prop you can easily change the appearance of your badge using the main theme colors: `primary, secondary, success, danger, warning, info, light` and `dark`.
+
+:::demo
+```html
+<div>
+    <d-badge theme="primary">Primary</d-badge>
+    <d-badge theme="secondary">Secondary</d-badge>
+    <d-badge theme="success">Success</d-badge>
+    <d-badge theme="danger">Danger</d-badge>
+    <d-badge theme="warning">Warning</d-badge>
+    <d-badge theme="info">Info</d-badge>
+    <d-badge theme="light">Light</d-badge>
+    <d-badge theme="dark">Dark</d-badge>
+</div>
+
+<!-- badges-1.vue -->
+```
+:::
+
+## Pill-Shaped Badges
+
+Using the `pill` prop appiles a larger border radius that make your badges to look rounded.
+
+:::demo
+```html
+<div>
+    <d-badge pill theme="primary">Primary</d-badge>
+    <d-badge pill theme="secondary">Secondary</d-badge>
+    <d-badge pill theme="success">Success</d-badge>
+    <d-badge pill theme="danger">Danger</d-badge>
+    <d-badge pill theme="warning">Warning</d-badge>
+    <d-badge pill theme="info">Info</d-badge>
+    <d-badge pill theme="light">Light</d-badge>
+    <d-badge pill theme="dark">Dark</d-badge>
+</div>
+
+<!-- badges-2.vue -->
+```
+:::
+
+## Outline Badges
+
+Using the `outline` prop removes the background color and applies a thin border that make your badges to look outlined.
+
+:::demo
+```html
+<div>
+    <d-badge outline theme="primary">Primary</d-badge>
+    <d-badge outline theme="secondary">Secondary</d-badge>
+    <d-badge outline theme="success">Success</d-badge>
+    <d-badge outline theme="danger">Danger</d-badge>
+    <d-badge outline theme="warning">Warning</d-badge>
+    <d-badge outline theme="info">Info</d-badge>
+    <d-badge outline theme="light">Light</d-badge>
+    <d-badge outline theme="dark">Dark</d-badge>
+</div>
+
+<!-- badges-3.vue -->
+```
+:::
+
+## Mixed Effects
+
+You can also mix both `pill` and `outline` props to get mixed results.
+
+:::demo
+```html
+<div>
+    <d-badge outline pill theme="primary">Primary</d-badge>
+    <d-badge outline pill theme="secondary">Secondary</d-badge>
+    <d-badge outline pill theme="success">Success</d-badge>
+    <d-badge outline pill theme="danger">Danger</d-badge>
+    <d-badge outline pill theme="warning">Warning</d-badge>
+    <d-badge outline pill theme="info">Info</d-badge>
+    <d-badge outline pill theme="light">Light</d-badge>
+    <d-badge outline pill theme="dark">Dark</d-badge>
+</div>
+
+<!-- badges-4.vue -->
+```
+:::
+
+## Link Badges
+
+Using the `href` or `to` prop you can turn your badges into regular or router links. 
+
+:::demo
+```html
+<div>
+    <d-badge href="#" theme="primary">Primary</d-badge>
+    <d-badge href="#" theme="secondary">Secondary</d-badge>
+    <d-badge href="#" theme="success">Success</d-badge>
+    <d-badge href="#" theme="danger">Danger</d-badge>
+    <d-badge href="#" theme="warning">Warning</d-badge>
+    <d-badge href="#" theme="info">Info</d-badge>
+    <d-badge href="#" theme="light">Light</d-badge>
+    <d-badge href="#" theme="dark">Dark</d-badge>
+</div>
+
+<!-- badges-5.vue -->
+```
+:::
+
+## Inherited Props
+
+> **Note:** This component is also inheriting the [Link](/docs/components/link) component's props.

package/src/components/badge/index.js

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

package/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,55 @@
+<template>
+    <ol class="breadcrumb">
+        <BreadcrumbItem v-for="(item, index) in computedItems"
+            :key="`dr-breadcrumb-${index}`"
+            :active="item.active"
+            :text="item.text"
+            :href="item.href" />
+        <slot />
+    </ol>
+</template>
+
+<script>
+import BreadcrumbItem from './BreadcrumbItem.vue'
+
+export default {
+    name: 'd-breadcrumb',
+    components: {
+        BreadcrumbItem
+    },
+    props: {
+        /**
+         * The breadcrumb items array.
+         */
+        items: {
+            type: Array,
+            default: null
+        }
+    },
+    computed: {
+        computedItems() {
+            let isActiveDefined = false
+
+            if (!this.items || !this.items.length) {
+                return []
+            }
+
+            return this.items.map((item, idx) => {
+                if (typeof item !== 'object') {
+                    item = { text: item }
+                }
+
+                if (item.active) {
+                    isActiveDefined = true
+                }
+
+                if (!item.active && !isActiveDefined) {
+                    item.active = idx + 1 === this.items.length
+                }
+
+                return item
+            })
+        }
+    }
+}
+</script>

package/src/components/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,42 @@
+<template>
+    <li :class="[ 'breadcrumb-item', active ? 'active' : '' ]" role="presentation">
+        <BreadcrumbLink :text="text"
+            :href="href"
+            v-if="!active" />
+        <span v-if="active">{{ text }}</span>
+    </li>
+</template>
+
+<script>
+import BreadcrumbLink from './BreadcrumbLink.vue'
+
+export default {
+    name: 'd-breadcrumb-item',
+    components: {
+        BreadcrumbLink
+    },
+    props: {
+        /**
+         * The breadcrumb item text.
+         */
+        text: {
+            type: String,
+            default: null
+        },
+        /**
+         * The breadcrumb item href.
+         */
+        href: {
+            type: String,
+            default: '#'
+        },
+        /**
+         * Whether it is active, or not.
+         */
+        active: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,56 @@
+<template>
+    <component :is="computedTag"
+        v-html="text"
+        :aria-current="ariaCurrent"
+        :href="href" />
+</template>
+
+<script>
+import dLink from '../link/Link.vue'
+import createLinkProps from '../link/create-link-props'
+
+/**
+ * This subcomponent is inheriting <a href="/docs/components/link">Link</a> component's props.
+ */
+export default {
+    name: 'd-breadcrumb-link',
+    components: {
+        dLink
+    },
+    props: {...createLinkProps(), ...{
+        /**
+         * The breadcrumb link text.
+         */
+        text: {
+            type: String,
+            default: null
+        },
+        /**
+         * The active state.
+         */
+        active: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The href.
+         */
+        href: {
+            type: String,
+            default: '#'
+        },
+        /**
+         * The aria-current state.
+         */
+        ariaCurrent: {
+            type: String,
+            default: 'location'
+        }
+    }},
+    computed: {
+        computedTag() {
+            return this.active ? 'span' : 'd-link'
+        }
+    }
+}
+</script>

package/src/components/breadcrumb/README.md

@@ -0,0 +1,53 @@
+# Breadcrumbs
+
+Breadcrumbs are a great component for indicating the current page's location within a navigation.
+
+## Basic Example
+
+The `<d-breadcrumb>` component comes with an `:items` prop that accepts an array of objects representing each breadcrumb menu item.
+
+:::demo
+```html
+<template>
+  <d-breadcrumb :items="breadcrumbItems"/>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      breadcrumbItems: [{
+        text: 'Products',
+        href: '#'
+      }, {
+        text: 'Home',
+        href: '#'
+      }, {
+        text: 'Lightbulbs',
+        active: true
+      }]
+    }
+  }
+}
+</script>
+
+<!-- breadcrumb-1.vue -->
+```
+:::
+
+## Manual Breadcrumbs
+
+You can also compose your own breadscumb structures using the `<d-breadcrumb-item>` component.
+
+:::demo
+```html
+
+<d-breadcrumb>
+    <d-breadcrumb-item :active="false" text="Products" href="#" />
+    <d-breadcrumb-item :active="false" text="Home" href="#" />
+    <d-breadcrumb-item :active="true" text="Lightbulbs" href="#" />
+</d-breadcrumb>
+
+<!-- breadcrumb-2.vue -->
+```
+:::

package/src/components/breadcrumb/index.js

@@ -0,0 +1,23 @@
+import { registerComponents, vueUse } from './../../utils'
+
+import dLink from '../link/Link.vue'
+import dBreadcrumb from './Breadcrumb.vue'
+import dBreadcrumbItem from './BreadcrumbItem.vue'
+import dBreadcrumbLink from './BreadcrumbLink.vue'
+
+const components = {
+    dLink,
+    dBreadcrumb,
+    dBreadcrumbItem,
+    dBreadcrumbLink
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin