@gorse/shards-vue 1.0.8

package/src/components/modal/Modal.vue

@@ -0,0 +1,121 @@
+<template>
+  <transition name="fade">
+    <component :is="tag"
+        :class="[
+            'modal',
+            this.noBackdrop ? 'modal--no-backdrop' : ''
+        ]">
+      <div :class="[
+            'modal-dialog',
+            size ? `modal-${size}` : '',
+            centered ? `modal-dialog-centered` : '',
+        ]"
+        role="document"
+        v-on-clickaway="away">
+        <div class="modal-content">
+            <slot />
+        </div>
+      </div>
+    </component>
+  </transition>
+</template>
+
+<script>
+import { mixin as clickAwayMixin } from 'vue-clickaway';
+import { MODAL_EVENTS } from '../../utils/constants';
+
+export default {
+    name: 'd-modal',
+    mixins: [clickAwayMixin],
+    props: {
+        /**
+         * The component tag.
+         */
+        tag: {
+            type: String,
+            default: "div"
+        },
+        /**
+         * The size (sm, lg).
+         */
+        size: {
+            type: String,
+            default: null,
+            validator: v => ['sm', 'lg'].includes(v)
+        },
+        /**
+         * Hides the backdrop overlay.
+         */
+        noBackdrop: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it is centered, or not.
+         */
+        centered: {
+            type: Boolean,
+            default: false
+        }
+    },
+  methods: {
+    away() {
+        if (this.noBackdrop) {
+            return;
+        }
+
+        /**
+         * @event close
+         *
+         * Triggered when the modal is closed.
+         */
+        this.$emit('close');
+
+        /**
+         * @event hidden
+         *
+         * Triggered when the modal is hidden.
+         */
+        this.$root.$emit(MODAL_EVENTS.HIDDEN)
+    }
+  },
+};
+</script>
+
+<style scoped>
+.modal {
+    display: block;
+    background-color: rgba(0,0,0,0.5);
+    transition: .3s;
+    overflow-y: auto;
+}
+
+.modal-dialog {
+    transition: .3s;
+}
+
+.modal--no-backdrop {
+    background: none;
+    pointer-events: none;
+}
+
+.fade-enter {
+    transform: translate(0,0);
+    opacity: 1;
+}
+
+.fade-leave-active {
+    transform: translate(0,0);
+    opacity: 1;
+}
+
+.fade-enter, .fade-leave-active {
+    opacity: 0;
+}
+
+.fade-enter .modal-dialog,
+.fade-leave-active .modal-dialog {
+    -webkit-transform: translate(0,-25%);
+    transform: translate(0,-25%);
+}
+</style>

package/src/components/modal/ModalBody.vue

@@ -0,0 +1,20 @@
+<template>
+    <component :is="tag" class="modal-body">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-modal-body',
+    props: {
+        /**
+         * The component's tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        }
+    }
+}
+</script>

package/src/components/modal/ModalFooter.vue

@@ -0,0 +1,21 @@
+<template>
+    <component :is="tag" class="modal-footer">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-modal-footer',
+    props: {
+        /**
+         * The component's tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        }
+    }
+}
+</script>
+

package/src/components/modal/ModalHeader.vue

@@ -0,0 +1,39 @@
+<template>
+    <component :is="tag" class="modal-header">
+        <slot />
+        <d-btn-close v-if="close" @click.prevent="away" />
+    </component>
+</template>
+
+<script>
+import dBtnClose from '../button/ButtonClose.vue'
+
+export default {
+    name: 'd-modal-header',
+    components: {
+        dBtnClose
+    },
+    props: {
+        /**
+         * The component's tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Whether to display the close button, or not.
+         */
+        close: {
+            type: Boolean,
+            default: true
+        }
+    },
+    methods: {
+        away() {
+            this.$parent.$emit('close');
+        }
+    }
+}
+</script>
+

package/src/components/modal/ModalTitle.vue

@@ -0,0 +1,21 @@
+<template>
+    <component :is="tag" class="modal-title">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-modal-title',
+    props: {
+        /**
+         * The component's tag.
+         */
+        tag: {
+            type: String,
+            default: 'h5'
+        }
+    }
+}
+</script>
+

package/src/components/modal/README.md

@@ -0,0 +1,74 @@
+# Modals
+
+Creating flexible modal dialogs can be achieved using the `<d-modal>` component. They feature a series of helpful subcomponents, sizes and various other options that you can use to customize the display and behavior of your modals.
+
+## Basic Example
+
+:::demo
+```html
+<template>
+    <div>Modal opened: <span :class="[showModal ? 'text-success' : 'text-danger']">{{ showModal }}</span></div>
+    <d-btn @click.native="handleClick">Click Me</d-btn>
+    <d-modal v-if="showModal" @close="handleClose">
+        <d-modal-header>
+            <d-modal-title>Header</d-modal-title>
+        </d-modal-header>
+        <d-modal-body>👋 Hello there!</d-modal-body>
+    </d-modal>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            showModal: false,
+        }
+    },
+    methods: {
+        handleClick() {
+            this.showModal = true
+        },
+        handleClose() {
+            this.showModal = false
+        }
+    }
+};
+</script>
+
+<!-- modal-1.vue -->
+```
+:::
+
+## Modal Size
+
+Using the `size` prop on the `<d-modal>` component, you can control the size of your modal.
+
+:::demo
+```html
+<template>
+    <d-btn @click.native="showModal = true">Click Me</d-btn>
+    <d-modal v-if="showModal" size="sm" @close="showModal = false" :size="modalSize">
+        <d-modal-header>
+            <d-modal-title>Hello</d-modal-title>
+        </d-modal-header>
+        <d-modal-body>
+            <div class="mb-3">👋 I'm a <span v-html="modalSize === 'sm' ? 'small' : 'large'" /> modal!</div>
+            <d-btn @click="modalSize = modalSize === 'sm' ? 'lg' : 'sm'">Toggle Size</d-btn>
+        </d-modal-body>
+    </d-modal>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            showModal: false,
+            modalSize: 'sm'
+        }
+    }
+};
+</script>
+
+<!-- modal-2.vue -->
+```
+:::

package/src/components/modal/index.js

@@ -0,0 +1,25 @@
+import { registerComponents, vueUse } from './../../utils';
+
+import dModal from './Modal.vue';
+import dModalHeader from './ModalHeader.vue';
+import dModalTitle from './ModalTitle.vue';
+import dModalBody from './ModalBody.vue';
+import dModalFooter from './ModalFooter.vue';
+
+const components = {
+    dModal,
+    dModalHeader,
+    dModalTitle,
+    dModalBody,
+    dModalFooter
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/nav/Nav.vue

@@ -0,0 +1,62 @@
+<template>
+    <component :is="tag" :class="[
+        'nav',
+        tabs ? 'nav-tabs' : '',
+        pills ? 'nav-pills' : '',
+        vertical ? 'flex-column' : '',
+        fill ? 'nav-fill' : '',
+        justified ? 'nav-justified' : ''
+    ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-nav',
+    props: {
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'ul'
+        },
+        /**
+         * Fill all available space.
+         */
+        fill: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Define equal width elements.
+         */
+        justified: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Display as tabs.
+         */
+        tabs: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Display as pills.
+         */
+        pills: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Display vertical.
+         */
+        vertical: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/nav/NavItem.vue

@@ -0,0 +1,23 @@
+<template>
+    <li class="nav-item">
+        <d-link v-bind="$props" class="nav-link">
+            <slot />
+        </d-link>
+    </li>
+</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-nav-item',
+    components: {
+        dLink
+    },
+    props: createLinkProps()
+}
+</script>

package/src/components/nav/NavText.vue

@@ -0,0 +1,21 @@
+<template>
+    <component :is="tag" class="navbar-text">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-nav-text',
+    props: {
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'span'
+        }
+    }
+}
+</script>
+

package/src/components/nav/README.md

@@ -0,0 +1,94 @@
+# Navs
+
+The `<d-nav>` component allows you to build all types of navigation components.
+
+## Basic Demo
+
+Creating navs can be easily achieved using the `<d-nav>` component together with the `<d-nav-item>` component.
+ 
+:::demo
+```html
+
+<d-nav>
+  <d-nav-item active>Active</d-nav-item>
+  <d-nav-item>Link</d-nav-item>
+  <d-nav-item>Another Link</d-nav-item>
+  <d-nav-item disabled>Disabled</d-nav-item>
+</d-nav>
+
+<!-- nav-1.vue -->
+```
+:::
+
+## Tabs Style
+
+Using the `tabs` prop, you can style the navs to look like tabs.
+
+:::demo
+```html
+
+<d-nav tabs>
+  <d-nav-item active>Active</d-nav-item>
+  <d-nav-item>Link</d-nav-item>
+  <d-nav-item>Another Link</d-nav-item>
+  <d-nav-item disabled>Disabled</d-nav-item>
+</d-nav>
+
+<!-- nav-2.vue -->
+```
+:::
+
+## Pill Style
+
+Using the `pills` prop you can style the navs to look like pills.
+
+:::demo
+```html
+
+<d-nav pills>
+  <d-nav-item active>Active</d-nav-item>
+  <d-nav-item>Link</d-nav-item>
+  <d-nav-item>Another Link</d-nav-item>
+  <d-nav-item disabled>Disabled</d-nav-item>
+</d-nav>
+
+<!-- nav-3.vue -->
+```
+:::
+
+## Fill
+
+Using the `fill` prop, you can force the nav content to extend the full available width.
+
+:::demo
+```html
+
+<d-nav fill>
+  <d-nav-item active>Active</d-nav-item>
+  <d-nav-item>Link</d-nav-item>
+  <d-nav-item>Another Link</d-nav-item>
+  <d-nav-item disabled>Disabled</d-nav-item>
+</d-nav>
+
+<!-- nav-4.vue -->
+```
+:::
+
+## Justified
+
+Using the `justified` prop, you can define equal-width nav elements.
+
+:::demo
+```html
+
+<d-nav justified>
+  <d-nav-item active>Active</d-nav-item>
+  <d-nav-item>Link</d-nav-item>
+  <d-nav-item>Another Link</d-nav-item>
+  <d-nav-item disabled>Disabled</d-nav-item>
+</d-nav>
+
+<!-- nav-5.vue -->
+```
+:::
+

package/src/components/nav/index.js

@@ -0,0 +1,19 @@
+import { registerComponents, vueUse } from './../../utils';
+
+import dNav from './Nav.vue';
+import dNavItem from './NavItem.vue';
+
+const components = {
+    dNav,
+    dNavItem
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/navbar/Navbar.vue

@@ -0,0 +1,63 @@
+<template>
+    <component :is="tag" :class="[
+        'navbar',
+        type ? `navbar-${type}` : '',
+        theme ? `bg-${theme}` : '',
+        fixed ? `fixed-${fixed}` : '',
+        sticky ? 'sticky-top' : '',
+        toggleable ? `navbar-expand-${(toggleable ? 'sm' : toggleable) || 'sm'}` : ''
+    ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+import { THEMECOLORS } from '../../utils/constants';
+
+export default {
+    name: 'd-navbar',
+    props: {
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'nav'
+        },
+        /**
+         * The navbar type.
+         */
+        type: {
+            type: String,
+            default: 'light'
+        },
+        /**
+         * The theme color.
+         */
+        theme: {
+            type: String,
+            validator: v => THEMECOLORS.includes(v)
+        },
+        /**
+         * Whether the navbar is toggleable, or not. Also accepts String for breakpoint definition.
+         */
+        toggleable: {
+            type: [String, Boolean],
+            default: false
+        },
+        /**
+         * Fix the navbar to either `top` or `bottom`.
+         */
+        fixed: {
+            type: String
+        },
+        /**
+         * Whether the navbar should be sticky.
+         */
+        sticky: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/navbar/NavbarBrand.vue

@@ -0,0 +1,41 @@
+<template>
+    <component :is="computedTag" v-bind="computedProps">
+        <slot />
+    </component>
+</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-navbar-brand',
+    components: {
+        dLink
+    },
+    props: {
+        ...createLinkProps(), ...{
+            /**
+             * The element tag.
+             */
+            tag: {
+                type: String,
+                default: 'div'
+            }
+        }
+    },
+    computed: {
+        computedTag() {
+            // eslint-disable-next-line
+            return Boolean(this.to || this.href) ? 'd-link' : this.tag
+        },
+        computedProps() {
+            // eslint-disable-next-line
+            return Boolean(this.to || this.href) ? this.$props : {}
+        }
+    }
+}
+</script>

package/src/components/navbar/NavbarNav.vue

@@ -0,0 +1,38 @@
+<template>
+    <component :is="tag" :class="[
+        'navbar-nav',
+        fill ? 'nav-fill' : '',
+        justified ? 'nav-justified' : ''
+    ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-navbar-nav',
+    props: {
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'ul'
+        },
+        /**
+         * Whether it should fill the entire space, or not.
+         */
+        fill: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether to proportionally fill all abailable space, or not.
+         */
+        justified: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>