@gorse/shards-vue 1.0.8

package/src/components/card/CardBody.vue

@@ -0,0 +1,92 @@
+<template>
+    <component :is="tag" :class="[
+        'card-body',
+        overlay ? 'card-img-overlay' : '',
+        Boolean(bgTheme) ? `bg-${bgTheme}` : '',
+        Boolean(borderTheme) ? `border-${borderTheme}` : '',
+        Boolean(textTheme) ? `text-${textTheme}` : '',
+        bodyClass
+    ]">
+        <component :is="titleTag" v-if="title" class="card-title" v-html="title" />
+        <component :is="subtitleTag" v-if="subtitle" class="card-subtitle mb-2 text-muted" v-html="subtitle"/>
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-card-body',
+    props: {
+        /**
+         * Element tag type.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Background theme color.
+         */
+        bgTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Border theme color.
+         */
+        borderTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Text theme color.
+         */
+        textTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Body class.
+         */
+        bodyClass: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Body title value.
+         */
+        title: {
+            type: String,
+            default: null
+        },
+        /**
+         * Body title element tag type.
+         */
+        titleTag: {
+            type: String,
+            default: 'h4'
+        },
+        /**
+         * Body subtitle value.
+         */
+        subtitle: {
+            type: String,
+            default: null
+        },
+        /**
+         * Body subtitle element tag type.
+         */
+        subtitleTag: {
+            type: String,
+            default: 'h6'
+        },
+        /**
+         * Overlay.
+         */
+        overlay: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/card/CardFooter.vue

@@ -0,0 +1,61 @@
+<template>
+    <component :is="tag" :class="[
+        'card-footer',
+        Boolean(bgTheme) ? `bg-${bgTheme}` : '',
+        Boolean(borderTheme) ? `border-${borderTheme}` : '',
+        Boolean(textTheme) ? `text-${textTheme}` : '',
+        footerClass
+    ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-card-footer',
+    props: {
+        /**
+         * Element tag type.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Background theme color.
+         */
+        bgTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Border theme color.
+         */
+        borderTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Text theme color.
+         */
+        textTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Footer value.
+         */
+        footer: {
+            type: String,
+            default: null
+        },
+        /**
+         * Footer class.
+         */
+        footerClass: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>

package/src/components/card/CardGroup.vue

@@ -0,0 +1,47 @@
+<template>
+    <component :is="tag" :class="computedClass">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-card-group',
+    props: {
+        /**
+         * Component tag type.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Whether it should be displayed as a deck, or not.
+         */
+        deck: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it should be displayed as columns, or not.
+         */
+        columns: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        computedClass() {
+            if (this.columns) {
+                return 'card-columns'
+            }
+
+            if (this.deck) {
+                return 'card-deck'
+            }
+
+            return 'card-group'
+        }
+    }
+}
+</script>

package/src/components/card/CardHeader.vue

@@ -0,0 +1,61 @@
+<template>
+    <component :is="tag" :class="[
+        'card-header',
+        Boolean(bgTheme) ? `bg-${bgTheme}` : '',
+        Boolean(borderTheme) ? `border-${borderTheme}` : '',
+        Boolean(textTheme) ? `text-${textTheme}` : '',
+        headerClass
+    ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-card-header',
+    props: {
+        /**
+         * Element tag type.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Background theme color.
+         */
+        bgTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Border theme color.
+         */
+        borderTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Text theme color.
+         */
+        textTheme: {
+            type: String,
+            default: null
+        },
+        /**
+         * Header value.
+         */
+        header: {
+            type: String,
+            default: null
+        },
+        /**
+         * Header class.
+         */
+        headerClass: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>

package/src/components/card/CardImg.vue

@@ -0,0 +1,64 @@
+<template>
+    <img :class="computedClass" :src="src" :alt="alt" />
+</template>
+
+<script>
+export default {
+    name: 'd-card-img',
+    props: {
+        /**
+         * The image source.
+         */
+        src: {
+            type: String,
+            default: null,
+            required: true
+        },
+        /**
+         * Alternative image text.
+         */
+        alt: {
+            type: String,
+            default: null
+        },
+        /**
+         * Top positioned.
+         */
+        top: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Bottom positioned.
+         */
+        bottom: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Fluid display.
+         */
+        fluid: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        computedClass() {
+            let _classList = []
+
+            _classList.push(this.fluid ? 'img-fluid' : '')
+
+            if (this.top && !this.bottom) {
+                _classList.push('card-img-top')
+            }
+
+            if (this.bottom && !this.top) {
+                _classList.push('card-img-bottom')
+            }
+
+            return _classList
+        }
+    }
+}
+</script>

package/src/components/card/README.md

@@ -0,0 +1,96 @@
+# Cards
+
+Cards provide a flexible content container that you can use to display a variety of content using contextual background colors, headers and footers.
+
+By default, cards fill in the full width of their parent element, however this can be customized via styling.
+
+## Basic Example
+
+:::demo
+```html
+
+<d-card style="max-width: 300px">
+    <d-card-header>Card header</d-card-header>
+    <d-card-img src="https://place-hold.it/300x200"/>
+    <d-card-body title="Lorem Ipsum">
+        <p>Lorem ipsum dolor sit amet.</p>
+        <d-btn theme="primary">Read more &rarr;</d-btn>
+    </d-card-body>
+    <d-card-footer>Card footer</d-card-footer>
+</d-card>
+
+<!-- card-1.vue -->
+```
+:::
+
+## Card Content Types
+
+Cards support a large variety of content including images, links, text, list groups and more. Make sure to check out the examples below.
+
+### Card Body
+
+The core building block of a card is the `<d-card-body>`. You can use it whenever you'd like to add a padded section within a card.
+
+:::demo
+```html
+
+<d-card>
+    <d-card-body>
+        Nunc quis nisl ac justo elementum sagittis in quis justo.
+    </d-card-body>
+</d-card>
+
+<!-- card-2.vue -->
+```
+:::
+
+#### Card Body Title and Subtitle
+
+You can display a card's Title and Subtitle using the `title` and `subtitle` props on the `<d-card-body>` component.
+
+:::demo
+```html
+
+<d-card>
+    <d-card-body title="Card Title" subtitle="Card subtitle">
+        Nunc quis nisl ac justo elementum sagittis in quis justo.
+    </d-card-body>
+</d-card>
+
+<!-- card-3.vue -->
+```
+:::
+
+### Card Image
+
+Using the `<d-card-img>` component you can place a responsive image on top of the card that will adjust its width when the width of the card changes.
+
+:::demo
+```html
+
+<div>
+    <d-container>
+        <d-row>
+            <d-col>
+                <d-card>
+                    <d-card-img src="https://place-hold.it/300x200" top />
+                    <d-card-body>
+                        <div>this is the body contents</div>
+                    </d-card-body>
+                </d-card>
+            </d-col>
+            <d-col>
+                <d-card>
+                    <d-card-body>
+                        <div>this is the body contents</div>
+                    </d-card-body>
+                    <d-card-img src="https://place-hold.it/300x200" bottom />
+                </d-card>
+            </d-col>
+        </d-row>
+    </d-container>
+</div>
+
+<!-- card-4.vue -->
+```
+:::

package/src/components/card/index.js

@@ -0,0 +1,27 @@
+import { registerComponents, vueUse } from '../../utils';
+
+import dCard from './Card.vue'
+import dCardBody from './CardBody.vue'
+import dCardFooter from './CardFooter.vue'
+import dCardGroup from './CardGroup.vue'
+import dCardHeader from './CardHeader.vue'
+import dCardImg from './CardImg.vue'
+
+const components = {
+    dCard,
+    dCardBody,
+    dCardFooter,
+    dCardGroup,
+    dCardHeader,
+    dCardImg
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/collapse/Collapse.vue

@@ -0,0 +1,209 @@
+<template>
+    <transition :enterActiveClass="'collapsing'"
+        :leaveActiveClass="'collapsing'"
+        @enter="onEnter"
+        @afterEnter="onAfterEnter"
+        @leave="onLeave"
+        @afterLeave="onAfterLeave" >
+        <component :is="tag"
+            v-show="show"
+            :class="[
+                isNav ? 'navbar-collapse' : '',
+                !transitioning ? 'collapse' : '',
+                show && !transitioning ? 'show' : ''
+            ]"
+            :id="[ id ? id : '' ]"
+            @click="handleClick">
+            <slot />
+        </component>
+    </transition>
+</template>
+
+<script>
+import { hasClass, isElement } from '../../utils'
+import { COLLAPSE_EVENTS } from '../../utils/constants'
+import rootListenerMixin from '../../mixins/root-listener.mixin'
+
+export default {
+    name: 'd-collapse',
+    mixins: [ rootListenerMixin ],
+    props: {
+        /**
+         * The component ID.
+         */
+        id: {
+            type: String,
+            required: true
+        },
+        /**
+         * The component tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * The visibility state.
+         */
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it is located in a nav, or not.
+         */
+        isNav: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The accordion component identifier (not element ID).
+         */
+        accordion: {
+            type: String,
+            default: null
+        }
+    },
+    model: {
+        prop: 'visible',
+        event: 'input'
+    },
+    watch: {
+        visible(newVal) {
+            if (newVal !== this.show) {
+                this.show = newVal
+            }
+        },
+        show(newVal, oldVal) {
+            if (newVal !== oldVal) {
+                this.emitStateChange()
+            }
+        }
+    },
+    data() {
+        return {
+            show: this.visible,
+            transitioning: false
+        }
+    },
+    methods: {
+        toggle() {
+            this.show = !this.show
+        },
+        emitStateChange() {
+            this.$emit('input', this.show)
+            this.$root.$emit('state', this.id, this.show)
+
+            if (this.accordion && this.show) {
+                /**
+                 * Triggered when the accordion is collapsed.
+                 *
+                 * @event accordion-collapse
+                 */
+                this.$root.$emit(COLLAPSE_EVENTS.ACCORDION, this.id, this.accordion)
+            }
+
+        },
+        handleClick(e) {
+            const el = e.target
+            if (!this.isNav || !el || getComputedStyle(this.$el).display !== 'block') {
+                return
+            }
+
+            if (hasClass(el, 'nav-link') || hasClass(el, 'dropdown-item')) {
+                this.show = false
+            }
+        },
+        handleToggleEvent(e) {
+            if (e !== this.id) {
+                return
+            }
+
+            this.toggle()
+        },
+        handleAccordionEvent(id, acc) {
+            if (!this.accordion || acc !== this.accordion) {
+                return
+            }
+
+            if (id === this.id) {
+                if(!this.show) {
+                    this.toggle()
+                }
+            } else {
+                if(this.show) {
+                    this.toggle()
+                }
+            }
+        },
+        handleResize() {
+            this.show = (getComputedStyle(this.$el).display === 'block')
+        },
+        onEnter(el) {
+            el.style.height = 0
+            isElement(el) && el.offsetHeight
+            el.style.height = el.scrollHeight + 'px'
+            this.transitioning = true
+            /**
+             * Triggered on show.
+             *
+             * @event show
+             */
+            this.$emit('show')
+        },
+        onAfterEnter(el) {
+            el.style.height = null
+            this.transitioning = false
+            /**
+             * Triggered after show.
+             *
+             * @event shown
+             */
+            this.$emit('shown')
+        },
+        onLeave(el) {
+            el.style.height = 'auto'
+            el.style.display = 'block'
+            el.style.height = el.getBoundingClientRect().height + 'px'
+            isElement(el) && el.offsetHeight
+            this.transitioning = true
+            el.style.height = 0
+            /**
+             * Triggered on hide.
+             *
+             * @event hide
+             */
+            this.$emit('hide')
+        },
+        onAfterLeave(el) {
+            el.style.height = null
+            this.transitioning = false
+            /**
+             * Triggered when hidden.
+             *
+             * @event hidden
+             */
+            this.$emit('hidden')
+        }
+    },
+    created() {
+        this.listenOnRoot(COLLAPSE_EVENTS.TOGGLE, this.handleToggleEvent)
+        this.listenOnRoot(COLLAPSE_EVENTS.ACCORDION, this.handleAccordionEvent)
+    },
+    mounted() {
+        if (this.isNav && typeof document !== 'undefined') {
+            window.addEventListener('resize', this.handleResize, false)
+            window.addEventListener('orientationchange', this.handleResize, false)
+            this.handleResize()
+        }
+
+        this.emitStateChange()
+    },
+    beforeDestroy() {
+        if (this.isNav && typeof document !== 'undefined') {
+            window.removeEventListener('resize', this.handleResize, false)
+            window.removeEventListener('orientationchange', this.handleResize, false)
+        }
+    }
+}
+</script>