@gorse/shards-vue 1.0.8

package/src/components/slider/README.md

@@ -0,0 +1,120 @@
+# Slider
+
+The slider component is powered behind the scenes by the [NoUiSlider](https://refreshless.com/nouislider/) library.
+
+## Basic Slider
+
+You can create basic sliders using the `<d-slider>` component and a `v-model`.
+
+:::demo
+```html
+
+<template>
+    <d-slider v-model="sliderValue" :value="20" />
+    <span>Slider Value: {{ sliderValue }}</span>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                sliderValue: 20
+            }
+        }
+    }
+</script>
+
+<!-- slider-1.vue -->
+```
+:::
+
+## Using Start Values
+
+Using the `start` prop you can also specify a start value for the knob.
+
+:::demo
+```html
+
+<d-slider :start="20" :value="20" />
+
+<!-- slider-2.vue -->
+```
+:::
+
+## Custom Range
+
+If the default `1-100` range is not enough, you can override it using the `range` prop.
+
+:::demo
+```html
+
+<template>
+    <d-slider v-model="sliderValue" :value="1342" :range="{ min: 100, max: 2000 }"/>
+    <span>Slider Value: {{ sliderValue }}</span>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                sliderValue: 1342
+            }
+        }
+    }
+</script>
+<!-- slider-3.vue -->
+```
+:::
+
+## Multiple Values
+
+If you'd like to control multiple values, you can use an `Array` for the `value` prop.
+
+:::demo
+```html
+
+<template>
+    <d-slider v-model="sliderValue" :value="['10.00', '80.00']" :connect="true"/>
+    <span>Slider Value: {{ sliderValue }}</span>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                sliderValue: ['10.00', '80.00']
+            }
+        }
+    }
+</script>
+<!-- slider-4.vue -->
+```
+:::
+
+## Using Pips
+
+Pips can also be enabled via the `options` prop.
+
+:::demo
+```html
+
+<template>
+    <d-slider v-model="sliderValue"
+            :value="['10.00', '80.00']"
+            :options="{ pips: { mode: 'steps', stepped: true, density: 3 } }"
+            :connect="true" />
+    <span>Slider Value: {{ sliderValue }}</span>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                sliderValue: ['10.00', '80.00']
+            }
+        }
+    }
+</script>
+<!-- slider-5.vue -->
+```
+:::

package/src/components/slider/Slider.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="shards-custom-slider" ref="slider" :id="computedID" />
+</template>
+
+<script>
+import noUiSlider from 'nouislider'
+import { guid } from '../../utils'
+
+export default {
+    name: 'd-slider',
+    props: {
+        /**
+         * The element ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * Options config.
+         */
+        options: {
+            type: Object,
+            default() {
+                return {}
+            }
+        },
+        /**
+         * Slider value.
+         */
+        value: {
+            type: [String, Array, Number],
+            required: true
+        },
+        /**
+         * Start value.
+         */
+        start: {
+            type: [Number, Array],
+            default: 0
+        },
+        /**
+         * Range configuration.
+         */
+        range: {
+            type: Object,
+            default() {
+                return { min: 0, max: 100 }
+            }
+        },
+        /**
+         * Connect configuration.
+         */
+        connect: {
+            type: [Boolean, Array],
+            default() {
+                return [true, false]
+            }
+        }
+    },
+    watch: {
+        value(newVal, oldVal) {
+            const sliderInstance = this.$el.noUiSlider
+            const sliderValue = sliderInstance.get()
+
+            if (newVal !== oldVal && sliderValue !== newVal) {
+                if (Array.isArray(sliderValue) && Array.isArray(newVal)) {
+                    if (
+                        oldVal.length === newVal.length &&
+                        oldVal.every((v, i) => v === newVal[i] )
+                    ) {
+                        sliderInstance.set(newVal)
+                    }
+                } else {
+                    sliderInstance.set(newVal)
+                }
+            }
+        }
+    },
+    computed: {
+        computedID() {
+            return this.id || `dr-slider-${guid()}`
+        }
+    },
+    mounted() {
+        const config = {
+            start: this.value || this.start,
+            connect: this.connect,
+            range: this.range,
+            ...this.options
+        }
+
+        noUiSlider.create(this.$el, config)
+
+        this.$el.noUiSlider.on('slide', () => {
+            const value = this.$el.noUiSlider.get()
+            if (value !== this.value) {
+                this.$emit('input', value)
+            }
+        })
+    }
+}
+</script>

package/src/components/slider/index.js

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

package/src/components/tabs/README.md

@@ -0,0 +1,111 @@
+# Tabs
+
+Using the `<d-tabs>` component you can easily create tabbable panes of content.
+
+:::demo
+```html
+
+<d-tabs>
+    <d-tab title="Tab 1" active>
+        <div class="p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur eros tellus. Fusce mollis felis a lorem euismod sollicitudin. Maecenas et porttitor mauris.</div>
+    </d-tab>
+    <d-tab title="Tab 2">
+        <div class="p-3">Sed at lacus efficitur, imperdiet purus et, pretium arcu. Mauris vulputate, libero in dignissim auctor, nunc tortor interdum elit, ac dignissim ex enim vitae diam.</div>
+    </d-tab>
+</d-tabs>
+
+<!-- tabs-1.vue -->
+```
+:::
+
+
+## Cards
+
+Wrapping the `<d-tabs>` component inside a `<d-card>` component you can also display the tabs as cards.
+
+:::demo
+```html
+
+<d-card>
+    <d-tabs card>
+        <d-tab title="Tab 1" active>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur eros tellus. Fusce mollis felis a lorem euismod sollicitudin. Maecenas et porttitor mauris.
+        </d-tab>
+        <d-tab title="Tab 2">
+            Sed at lacus efficitur, imperdiet purus et, pretium arcu. Mauris vulputate, libero in dignissim auctor, nunc tortor interdum elit, ac dignissim ex enim vitae diam.
+        </d-tab>
+    </d-tabs>
+</d-card>
+
+<!-- tabs-2.vue -->
+```
+:::
+
+
+## Pills
+
+Using the `pills` prop you can turn your tab controls into 'pill' buttons.
+
+:::demo
+```html
+
+<d-card>
+    <d-tabs card pills>
+        <d-tab title="Tab 1" active>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur eros tellus. Fusce mollis felis a lorem euismod sollicitudin. Maecenas et porttitor mauris.
+        </d-tab>
+        <d-tab title="Tab 2">
+            Sed at lacus efficitur, imperdiet purus et, pretium arcu. Mauris vulputate, libero in dignissim auctor, nunc tortor interdum elit, ac dignissim ex enim vitae diam.
+        </d-tab>
+    </d-tabs>
+</d-card>
+
+<!-- tabs-3.vue -->
+```
+:::
+
+
+## Vertical Tabs
+
+Placing the tab controls vertically can be easily achieved using the `vertical` prop.
+
+:::demo
+```html
+
+<d-card>
+    <d-tabs card pills vertical>
+        <d-tab title="Tab 1" active>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur eros tellus. Fusce mollis felis a lorem euismod sollicitudin. Maecenas et porttitor mauris.
+        </d-tab>
+        <d-tab title="Tab 2">
+            Sed at lacus efficitur, imperdiet purus et, pretium arcu. Mauris vulputate, libero in dignissim auctor, nunc tortor interdum elit, ac dignissim ex enim vitae diam.
+        </d-tab>
+    </d-tabs>
+</d-card>
+
+<!-- tabs-4.vue -->
+```
+:::
+
+
+## Disabled Tab Controls
+
+You can set some of your tab controls as disabled, using the `disabled` prop
+
+:::demo
+```html
+
+<d-card>
+    <d-tabs card pills vertical>
+        <d-tab title="Tab 1" active>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur eros tellus. Fusce mollis felis a lorem euismod sollicitudin. Maecenas et porttitor mauris.
+        </d-tab>
+        <d-tab title="Disabled" disabled>
+            Sed at lacus efficitur, imperdiet purus et, pretium arcu. Mauris vulputate, libero in dignissim auctor, nunc tortor interdum elit, ac dignissim ex enim vitae diam.
+        </d-tab>
+    </d-tabs>
+</d-card>
+
+<!-- tabs-5.vue -->
+```
+:::

package/src/components/tabs/Tab.vue

@@ -0,0 +1,132 @@
+<template>
+    <transition mode="out-in" name="fade"
+        @beforeEnter="handleBeforeEnter"
+        @afterEnter="handleAfterEnter"
+        @afterLeave="handleAfterLeave">
+        <component :is="tag"
+            ref="panel"
+            v-show="localActiveState"
+            role="tabpanel"
+            :id="computedID"
+            :aria-hidden="localActiveState ? 'false' : 'true'"
+            :aria-expanded="localActiveState ? 'true' : 'false'"
+            :aria-labelledby="controlledBy || null"
+            :class="[
+                'tab-pane',
+                ($parent && $parent.card && !noBody) ? 'card-body' : '',
+                show ? 'show' : '',
+                disabled ? 'disabled' : '',
+                localActiveState ? 'active' : ''
+            ]">
+            <slot />
+        </component>
+    </transition>
+</template>
+
+<script>
+import { guid } from '../../utils';
+
+export default {
+    name: 'd-tab',
+    data() {
+        return {
+            localActiveState: this.active && !this.disabled,
+            show: false
+        }
+    },
+    props: {
+        /**
+         * The element ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The active state.
+         */
+        active: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * The button ID.
+         */
+        buttonId: {
+            type: String,
+            default: ''
+        },
+        /**
+         * The title.
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         * The disabled state.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the card should display the body, or not.
+         */
+        noBody: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        computedID() {
+            return this.id || `dr-tab-${guid()}`
+        },
+        controlledBy() {
+            return this.buttonId || `dr-tab-button-${guid()}`
+        },
+        computedFade() {
+            return this.$parent.fade
+        },
+        _isTab() {
+            return true
+        }
+    },
+    methods: {
+        handleBeforeEnter() {
+            this.show = false
+        },
+        handleAfterEnter() {
+            this.show = true
+        },
+        handleAfterLeave() {
+            this.show = false
+        }
+    },
+    mounted() {
+        this.show = this.localActiveState
+    }
+}
+</script>
+
+<style scoped>
+.fade-enter-active {
+  transition: opacity .25s ease-in-out;
+}
+
+.fade-leave-active {
+  transition: opacity .25s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>