@gorse/shards-vue 1.0.8

package/src/components/navbar/NavbarToggle.vue

@@ -0,0 +1,55 @@
+<template>
+    <button class="navbar-toggler"
+        :aria-label="label"
+        :aria-controls="target"
+        :aria-expanded="toggleState ? 'true' : 'false'"
+        @click="onClick">
+        <slot>
+            <span class="navbar-toggler-icon"></span>
+        </slot>
+    </button>
+</template>
+
+<script>
+import rootListenerMixin from '../../mixins/root-listener.mixin'
+import { COLLAPSE_EVENTS } from '../../utils/constants';
+
+export default {
+    name: 'd-navbar-toggle',
+    mixins: [ rootListenerMixin ],
+    data() {
+        return {
+            toggleState: false
+        }
+    },
+    props: {
+        /**
+         * The label value.
+         */
+        label: {
+            type: String,
+            default: 'Toggle navigation'
+        },
+        /**
+         * The toggle target.
+         */
+        target: {
+            type: String,
+            required: true
+        }
+    },
+    methods: {
+        onClick() {
+            this.$root.$emit(COLLAPSE_EVENTS.TOGGLE, this.target)
+        },
+        handleStateEvent(id, state) {
+            if (id === this.target) {
+                this.toggleState = state
+            }
+        }
+    },
+    created() {
+        this.listenOnRoot(COLLAPSE_EVENTS.STATE, this.handleStateEvent)
+    }
+}
+</script>

package/src/components/navbar/README.md

@@ -0,0 +1,51 @@
+# Navbars
+
+Using the `<d-navbar>` component you can create powerful and responsive navigation headers.  
+
+## Basic Example
+
+:::demo
+```html
+
+<d-navbar toggleable="md" type="dark" theme="primary">
+  <d-navbar-toggle target="nav-collapse"></d-navbar-toggle>
+  <d-navbar-brand>
+      <h6 class="text-white my-auto mr-4">Shards Vue</h6>
+  </d-navbar-brand>
+
+  <d-collapse is-nav id="nav-collapse">
+    <d-navbar-nav>
+        <d-nav-item href="#">Link</d-nav-item>
+        <d-nav-item href="#" disabled>Disabled</d-nav-item>
+        <d-dropdown text="Dropdown" is-nav>
+            <d-dropdown-item>Action</d-dropdown-item>
+            <d-dropdown-item>Another action</d-dropdown-item>
+            <d-dropdown-item>Something else here</d-dropdown-item>
+            <d-dropdown-divider />
+            <d-dropdown-item>Separated link</d-dropdown-item>
+        </d-dropdown>
+    </d-navbar-nav>
+
+    <d-navbar-nav class="ml-auto">
+        <d-input-group seamless>
+            <d-input-group-text slot="prepend">
+                <fa :icon="['fas', 'search']" />
+            </d-input-group-text>
+            <d-input size="sm" placeholder="Search..."/>
+        </d-input-group>
+    </d-navbar-nav>
+
+  </d-collapse>
+</d-navbar>
+
+<!-- navbar-1.vue -->
+```
+:::
+
+## Themes and Text Colors
+
+The `<d-navbar>` component supports all available color themes as well as text color types such as `dark` or `light`.
+
+## Placement
+
+You an control the placement of the navbar component using the `fixed` and `sticky` props.

package/src/components/navbar/index.js

@@ -0,0 +1,23 @@
+import { registerComponents, vueUse } from '../../utils';
+
+import dNavbar from './Navbar.vue'
+import dNavbarBrand from './NavbarBrand.vue'
+import dNavbarNav from './NavbarNav.vue'
+import dNavbarToggle from './NavbarToggle.vue'
+
+const components = {
+    dNavbar,
+    dNavbarBrand,
+    dNavbarNav,
+    dNavbarToggle
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/popover/Popover.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="d-none" style="display: none;" aria-hidden="true">
+        <div ref="title">
+            <slot name="title" />
+        </div>
+        <div ref="content">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script>
+import Popover from '../../utils/popover.class'
+import TooltipPopoverMixin from '../../mixins/tooltip-popover.mixin'
+import { TP_PLACEMENTS } from '../../utils/constants';
+
+export default {
+    name: 'd-popover',
+    mixins: [ TooltipPopoverMixin ],
+    props: {
+        /**
+         * Title
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Content
+         */
+        content: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Triggers
+         */
+        triggers: {
+            type: [String, Array],
+            default: 'click'
+        },
+        /**
+         * 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 Popover.
+         * Used inside the TooltipPopoverMixin
+         */
+        bootstrap() {
+            const target = this.getTarget()
+
+            if (target) {
+                this._TPInstance = new Popover(
+                    target,
+                    this.getUpdatedConfig(),
+                    this.$root
+                )
+            }
+
+            return this._TPInstance
+        }
+    }
+}
+</script>
+

package/src/components/popover/README.md

@@ -0,0 +1,73 @@
+# Popovers
+
+Popovers are powerful elements similar to tooltips and powered by Popper.js that can be applies to any interactive element.
+
+> Note: The `container` prop is not always necessary and it is required in the following examples just for demo purposes.
+
+## Basic Example
+
+Popovers can be created using the `<d-popover>` component.
+
+:::demo
+```html
+
+<div>
+    <d-btn id="popover-example-1">Click Me</d-btn>
+    <d-popover target="popover-example-1" container=".shards-demo--example--popover-01">
+        <template slot="title">
+            Title Here
+        </template>
+        Content Here
+    </d-popover>
+</div>
+
+<!-- popover-1.vue -->
+```
+:::
+
+## Triggers
+
+The `<d-popover>` component, by default is triggered by the `click` event. However, this can be easily adjusted using the `triggers` component which accepts one or multiple triggers.
+
+:::demo
+```html
+
+<div>
+    <d-btn id="popover-example-2">Hover Me</d-btn>
+    <d-popover target="popover-example-2"
+        container=".shards-demo--example--popover-02"
+        :triggers="['hover']">
+        <template slot="title">
+            Title Here
+        </template>
+        Content Here
+    </d-popover>
+</div>
+
+<!-- popover-2.vue -->
+```
+:::
+
+
+## Placement
+
+Using the `placement` prop you can adjust where your popover will be displayed. So far, the following positions are available: `top`, `topleft`, `topright`, `right`, `righttop`, `rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom`.
+
+:::demo
+```html
+
+<div>
+    <d-btn id="popover-example-3">Click Me</d-btn>
+    <d-popover target="popover-example-3"
+        :placement="'rightbottom'"
+        container=".shards-demo--example--popover-03">
+        <template slot="title">
+            Title Here
+        </template>
+        Content Here
+    </d-popover>
+</div>
+
+<!-- popover-3.vue -->
+```
+:::

package/src/components/popover/index.js

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

package/src/components/progress/Progress.vue

@@ -0,0 +1,93 @@
+<template>
+    <div :class="['progress', size ? `progress-${size}` : '']" :style="{ height: height || null }">
+        <slot>
+            <d-progress-bar v-bind="$props"/>
+        </slot>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'd-progress',
+    props: {
+        /**
+         * Theme color.
+         */
+        theme: {
+            type: String,
+            default: 'primary'
+        },
+        /**
+         * Whether it should be striped, or not.
+         */
+        striped: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it should be animated, or not.
+         */
+        animated: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Height value.
+         */
+        height: {
+            type: String,
+            default: null
+        },
+        /**
+         * Precision number of digits.
+         */
+        precision: {
+            type: Number,
+            default: 0
+        },
+        /**
+         * Whether to show progress, or not.
+         */
+        showProgress: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether to show the value, or not.
+         */
+        showValue: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The maximum value.
+         */
+        max: {
+            type: Number,
+            default: 100
+        },
+        /**
+         * The value.
+         */
+        value: {
+            type: Number,
+            default: 0
+        },
+        /**
+         * The size.
+         */
+        size: {
+            type: String,
+            default: null,
+            validator: (v) => ['sm', 'lg'].includes(v)
+        }
+    }
+}
+</script>
+
+<style>
+    /* Hide labels for small progress bars */
+    .progress-sm span {
+        color: transparent;
+    }
+</style>

package/src/components/progress/ProgressBar.vue

@@ -0,0 +1,123 @@
+<template>
+    <div :class="[
+        'progress-bar',
+        computedTheme ? `bg-${computedTheme}` : '',
+        (computedStriped || computedAnimated) ? 'progress-bar-striped' : '',
+        computedAnimated ? 'progress-bar-animated' : ''
+    ]"
+    :style="{ width: (100 * (value / computedMax)) + '%' }"
+    role="progressbar"
+    :aria-valuemin="0"
+    :aria-valuemax="computedMax.toString()"
+    :aria-valuenow="value.toFixed(computedPrecision)">
+        <slot>
+            <span v-if="label" v-html="label"></span>
+            <span v-if="computedShowProgress">{{ computedProgress.toFixed(computedPrecision) }}</span>
+            <span v-if="computedShowValue">{{ value.toFixed(computedPrecision) }}</span>
+        </slot>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'd-progress-bar',
+    props: {
+        /**
+         * The value.
+         */
+        value: {
+            type: Number,
+            default: 0
+        },
+        /**
+         * The label.
+         */
+        label: {
+            type: String,
+            value: null
+        },
+        /**
+         * The max value.
+         */
+        max: {
+            type: Number,
+            default: null
+        },
+        /**
+         * Precision number of digits.
+         */
+        precision: {
+            type: Number,
+            default: null
+        },
+        /**
+         * Theme color.
+         */
+        theme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Whether it should be striped, or not.
+         */
+        striped: {
+            type: Boolean,
+            default: null
+        },
+        /**
+         * Whether it should be animated, or not.
+         */
+        animated: {
+            type: Boolean,
+            default: null
+        },
+        /**
+         * Whether it should show the progress, or not.
+         */
+        showProgress: {
+            type: Boolean,
+            default: null
+        },
+        /**
+         * Whether it should show the value, or not.
+         */
+        showValue: {
+            type: Boolean,
+            default: null
+        }
+    },
+    computed: {
+        computedTheme() {
+            return this.theme || this.$parent.theme
+        },
+        computedStriped() {
+            return typeof this.striped === 'boolean' ? this.striped : (this.$parent.striped || false)
+        },
+        computedAnimated() {
+            return typeof this.animated === 'boolean' ? this.animated : (this.$parent.animated || false)
+        },
+        computedMax() {
+            return typeof this.max === 'number' ? this.max : (this.$parent.max || 100)
+        },
+        computedPrecision() {
+            return typeof this.precision === 'number' ? this.precision : (this.$parent.precision || 0)
+        },
+        computedShowProgress() {
+            return typeof this.showProgress === 'boolean' ? this.showProgress : (this.$parent.showProgress || false)
+        },
+        computedShowValue() {
+            return typeof this.showValue === 'boolean' ? this.showValue : (this.$parent.showValue || false)
+        },
+        computedProgress() {
+            const p = Math.pow(10, this.computedPrecision)
+            return Math.round((100 * p * this.value) / this.computedMax) / p
+        }
+    }
+}
+</script>
+
+<style scoped>
+.progress-bar {
+    height: 100%;
+}
+</style>

package/src/components/progress/README.md

@@ -0,0 +1,95 @@
+# Progres Bars
+
+You can use the `<d-progress>` component to display simple or complex progress bars.
+
+## Basic Example
+
+:::demo 
+```html
+
+<d-progress :value="50" :max="100" />
+
+<!-- progress-1.vue -->
+```
+:::
+
+## Labels
+
+You can add labels to your progress bars either by using the `show-progress` or `show-value` props.
+
+:::demo 
+```html
+
+<div>
+    <!-- Showing Percentage Progress -->
+    <d-progress theme="success" :value="50" :max="250" show-progress />
+
+    <!-- Showing Value -->
+    <d-progress :value="50" :max="250" show-value />
+</div>
+
+<!-- progress-2.vue -->
+```
+:::
+
+## Size
+
+The size of the progress bar can be controlled via the `size` prop. Progress bars can be either `sm` for small or `lg` for large. Using a small progress bar would hide the label due to the lack of space.
+
+:::demo 
+```html
+
+<div>
+    <!-- Small Progress Bar -->
+    <d-progress size="sm" :value="50" :max="100" />
+
+    <!-- Large Progress Bar -->
+    <d-progress size="lg" :value="75" :max="100" />
+</div>
+
+<!-- progress-3.vue -->
+```
+:::
+
+## Precision
+
+Using the `precision` prop you can specify the precision number of digits.
+
+:::demo 
+```html
+
+<d-progress :value="66.29123" :max="100" :precision="2" show-progress />
+
+<!-- progress-4.vue -->
+```
+:::
+
+## Multiple Progress Bars
+
+Inside the `<d-progress>` component you can also stack multiple `<d-progress-bar>` components.
+
+:::demo 
+```html
+
+<d-progress :max="100" show-value>
+    <d-progress-bar :value="50" theme="primary"></d-progress-bar>
+        <d-progress-bar :value="30" theme="warning"></d-progress-bar>
+        <d-progress-bar :value="10" theme="info"></d-progress-bar>
+</d-progress>
+
+<!-- progress-5.vue -->
+```
+
+## Height
+
+Using the `height` prop you can control the progress bar's height.
+
+:::demo 
+```html
+
+<div>
+    <d-progress :max="100" :value="50" height="15px" class="mb-2" />
+    <d-progress :max="100" :value="50" height="3px" />
+</div>
+<!-- progress-6.vue -->
+```

package/src/components/progress/index.js

@@ -0,0 +1,19 @@
+import { registerComponents, vueUse } from './../../utils';
+
+import dProgress from './Progress.vue';
+import dProgressBar from './ProgressBar.vue'
+
+const components = {
+    dProgress,
+    dProgressBar
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin