@gorse/shards-vue 1.0.8

package/src/components/collapse/README.md

@@ -0,0 +1,86 @@
+# Collapse
+
+The `<collapse>` component, together with the [`v-d-toggle`](/docs/directives/toggle) directive allow you to easily toggle the visibility of your content.
+
+## Basic Example
+
+:::demo
+```html
+<div>
+    <d-btn v-d-toggle.my-collapse variant="primary">Toggle Collapse</d-btn>
+    <d-collapse id="my-collapse">
+        <div class="p-3 mt-3 border rounded">
+            <h5>😍 Now you see me!</h5>
+            <span>In sagittis nibh non arcu viverra, nec imperdiet quam suscipit. Sed porta eleifend scelerisque. Vestibulum dapibus quis arcu a facilisis.</span>
+        </div>
+    </d-collapse>
+</div>
+
+<!-- collapse-1.vue -->
+```
+:::
+
+## Initial Visibility
+
+Using the `visible` prop, you can make the `<d-collapse>` component show initially.
+
+:::demo
+```html
+<div>
+    <d-btn v-d-toggle.my-collapse variant="primary">Toggle Collapse</d-btn>
+    <d-collapse visible id="my-collapse">
+        <div class="p-3 mt-3 border rounded">
+            <h5>😁 I'm already visible!</h5>
+            <span>In sagittis nibh non arcu viverra, nec imperdiet quam suscipit. Sed porta eleifend scelerisque. Vestibulum dapibus quis arcu a facilisis.</span>
+        </div>
+    </d-collapse>
+</div>
+
+<!-- collapse-2.vue -->
+```
+:::
+
+## Accordions
+
+The `accordion` prop you allows you to create dynamic and flexible accordions.
+
+:::demo
+```html
+<div>
+    <d-card class="mb-1">
+        <d-card-header class="px-3 py-2" role="tab">
+            <d-btn block-level size="small" theme="secondary" href="#" v-d-toggle.accordion1>Accordion 1</d-btn>        
+        </d-card-header>
+        <d-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
+            <d-card-body>
+            <p class="card-text">Nullam augue tortor, viverra id gravida fermentum, posuere a libero. Curabitur at arcu tortor. Donec cursus blandit leo consequat convallis.</p>
+            </d-card-body>
+        </d-collapse>
+    </d-card>
+
+    <d-card class="mb-1">
+        <d-card-header class="px-3 py-2" role="tab">
+            <d-btn block-level size="small" theme="secondary" href="#" v-d-toggle.accordion2>Accordion 2</d-btn>        
+        </d-card-header>
+        <d-collapse id="accordion2" accordion="my-accordion" role="tabpanel">
+            <d-card-body>
+            <p class="card-text">Etiam at congue tellus, vitae congue metus. Praesent eget arcu eget justo sodales venenatis. Nam nec est urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+            </d-card-body>
+        </d-collapse>
+    </d-card>
+
+    <d-card class="mb-1">
+        <d-card-header class="px-3 py-2" role="tab">
+            <d-btn block-level size="small" theme="secondary" href="#" v-d-toggle.accordion3>Accordion 3</d-btn>        
+        </d-card-header>
+        <d-collapse id="accordion3" accordion="my-accordion" role="tabpanel">
+            <d-card-body>
+            <p class="card-text">Maecenas tempor dapibus eros, ut ultricies est dapibus eu. Pellentesque quis nisi suscipit, dignissim nunc nec, rhoncus dolor. Maecenas tempus egestas egestas.</p>
+            </d-card-body>
+        </d-collapse>
+    </d-card>
+</div>
+
+<!-- collapse-3.vue -->
+```
+:::

package/src/components/collapse/index.js

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

package/src/components/container/Col.vue

@@ -0,0 +1,125 @@
+<template>
+    <component :is="tag"
+        :class="[
+            breakpointClasses,
+            (col || (breakpointClasses.length === 0 && !cols)) ? 'col' : '',
+            cols ? `col-${cols}` : '',
+            offset ? `offset-${offset}` : '',
+            order ? `order-${order}` : '',
+            alignSelf ? `align-self-${alignSelf}` : ''
+        ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export const suffixPropName = (suffix, str) => str + (suffix ? upperFirst(suffix) : '')
+export const upperFirst = (str) => String(str).charAt(0).toUpperCase() + String(str).slice(1)
+
+// Creates Bootstrap specific breakpoint classes.
+export const createBreakpointClass = (type, breakpoint, val) => {
+    if (!!val === false) {
+        return false
+    }
+
+    let className = type
+
+    if (breakpoint) {
+        className += `-${breakpoint.replace(type, '')}` // -md ?
+    }
+
+    if (type === 'col' && (val === '' || val === true)) {
+        return className.toLowerCase() // .col-md
+    }
+
+    return `${className}-${val}`.toLowerCase()
+}
+
+// Generates component properties.
+export function generateProp(type = [Boolean, String, Number], defaultVal = null) {
+    return {
+        default: defaultVal,
+        type
+    }
+}
+
+// Breakpoints for later use.
+const BREAKPOINTS = ['sm', 'md', 'lg', 'xl']
+
+// Generate breakpoint maps.
+const breakpointCol = createBreakpointMap([String, Number, Boolean], false)
+const breakpointOffset = createBreakpointMap([String, Number], null, suffixPropName, 'offset')
+const breakpointOrder = createBreakpointMap([String, Number], null, suffixPropName, 'order')
+
+// Creates breakpoint maps
+function createBreakpointMap(propGenArgs = null, defaultValue, breakpointWrapper = null, ...breakpointWrapperArgs) {
+    breakpointWrapper = breakpointWrapper === null ? (v) => v : breakpointWrapper
+    return BREAKPOINTS.reduce(function (map, breakpoint) {
+        map[breakpointWrapper(breakpoint, ...breakpointWrapperArgs)] = generateProp(propGenArgs, defaultValue)
+        return map
+    }, {})
+}
+
+// Define breakpoint props map
+const breakpointPropMap = Object.assign({}, {
+    col: Object.keys(breakpointCol),
+    offset: Object.keys(breakpointOffset),
+    order: Object.keys(breakpointOrder)
+})
+
+export default {
+    name: 'd-col',
+    props: Object.assign({},
+        breakpointCol,
+        breakpointOffset,
+        breakpointOrder, {
+            /**
+             * The col element tag.
+             */
+            tag: {
+                type: String,
+                default: 'div'
+            },
+            /**
+             * Automatic column.
+             */
+            col: {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * Make the component span a certain no. of columns.
+             */
+            cols: generateProp([String, Number]),
+            /**
+             * Offset certain no. of columns.
+             */
+            offset: generateProp([String, Number]),
+            order: generateProp([String, Number]),
+            alignSelf: {
+                type: String,
+                default: null,
+                validator: v => ['auto', 'start', 'end', 'center', 'baseline', 'stretch'].includes(v)
+            }
+        }),
+    computed: {
+        breakpointClasses() {
+            const classList = []
+            for (const type in breakpointPropMap) {
+                const keys = breakpointPropMap[type]
+                for (let i = 0; i < keys.length; i++) {
+                    const key = keys[i]
+                    const breakpointClass = createBreakpointClass(type, key, this[key])
+
+                    if (breakpointClass && classList.indexOf(breakpointClass) === -1) {
+                        classList.push(breakpointClass)
+                    }
+                }
+            }
+
+            return classList
+        }
+    }
+}
+</script>
+

package/src/components/container/Container.vue

@@ -0,0 +1,31 @@
+<template>
+    <component :is="tag"
+        :class="[
+            !fluid ? 'container' : 'container-fluid'
+        ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-container',
+    props: {
+        /**
+         * Container element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Whether the container is fluid or not.
+         */
+        fluid: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>
+

package/src/components/container/README.md

@@ -0,0 +1,91 @@
+# Layout & Grid System
+
+Shards Vue provides support for all native Bootstrap 4 layout elements including **containers**, **rows**, **columns** and **form rows** so you can use its full power while building your project's responsive layout powered by flexbox.
+
+:::demo
+```html
+<d-container class="dr-example-container">
+    <d-row>
+        <d-col>1 / 12</d-col>
+        <d-col>2 / 12</d-col>
+        <d-col>3 / 12</d-col>
+        <d-col>4 / 12</d-col>
+        <d-col>5 / 12</d-col>
+        <d-col>6 / 12</d-col>
+        <d-col>7 / 12</d-col>
+        <d-col>8 / 12</d-col>
+        <d-col>9 / 12</d-col>
+        <d-col>10 / 12</d-col>
+        <d-col>11 / 12</d-col>
+        <d-col>12 / 12</d-col>
+    </d-row>
+
+    <d-row>
+        <d-col>1 / 6</d-col>
+        <d-col>2 / 6</d-col>
+        <d-col>3 / 6</d-col>
+        <d-col>4 / 6</d-col>
+        <d-col>5 / 6</d-col>
+        <d-col>6 / 6</d-col>
+    </d-row>
+
+    <d-row>
+        <d-col>1 / 3</d-col>
+        <d-col>2 / 3</d-col>
+        <d-col>3 / 3</d-col>
+    </d-row>
+
+    <d-row>
+        <d-col>1 / 2</d-col>
+        <d-col>2 / 2</d-col>
+    </d-row>
+
+    <d-row>
+        <d-col>1 / 1</d-col>
+    </d-row>
+</d-container>
+
+<!-- layout-containers-1.vue -->
+```
+:::
+    
+## Containers
+
+Containers are the most **fundamental and required layout element** for your application or website's layout. You can use the `<d-container>` component for a fixed container, or `<d-container fluid>` for a fluid container.
+
+## Rows
+
+The `<d-row>` component must be placed inside a `<d-container>` component and it is used to define a row of columns. You can also use the `<d-form-row>` component for building form layouts that help you create a layout with more compact margins.
+
+## Columns
+
+The `<d-col>` component is used to represent a column and must be placed inside a `<d-row>` component. You can also use the `<d-col>` component without a breakpoint-specific prop (`sm`, `md`, `lg`, `xl`) for easy column sizing that have an equal width (as seen in the examples above).
+
+## Mixing Breakpoints
+
+You can use a combination of different props for each tier as needed.
+
+:::demo
+```html
+<d-container class="dr-example-container">
+    <d-row>
+        <d-col cols="12" md="6" lg="8">cols="12" md="6" lg="8"</d-col>
+        <d-col cols="12" md="6" lg="4">cols="12" md="6" lg="8"</d-col>
+    </d-row>
+
+    <d-row>
+        <d-col cols="12" md="4" lg="3">cols="12" md="4" lg="3"</d-col>
+        <d-col cols="12" md="4" lg="6">cols="12" md="4" lg="6"</d-col>
+        <d-col cols="12" md="4" lg="3">cols="12" md="4" lg="3"</d-col>
+    </d-row>
+
+    <d-row>
+        <d-col cols="12" md="6" lg="4">cols="12" md="6" lg="4"</d-col>
+        <d-col cols="12" md="6" lg="8">cols="12" md="6" lg="8"</d-col>
+    </d-row>
+</d-container>
+
+<!-- layout-containers-4.vue -->
+```
+:::
+

package/src/components/container/Row.vue

@@ -0,0 +1,64 @@
+<template>
+    <component :is="tag"
+        class="row"
+        :class="[
+            noGutters ? 'no-gutters' : '',
+            alignV ? `align-items-${alignV}` : '',
+            alignH ? `justify-content-${alignH}` : '',
+            alignContent ? `align-content-${alignContent}` : ''
+        ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+const ALIGNMENT = ['start', 'end', 'center'];
+
+/**
+ * The row subcomponent.
+ */
+export default {
+    name: 'd-row',
+    props: {
+        /**
+         * Row element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Whether to remove gutters, or not.
+         */
+        noGutters: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Align items vertically.
+         */
+        alignV: {
+            type: String,
+            default: null,
+            validator: v => ALIGNMENT.concat(['baseline', 'stretch']).includes(v)
+        },
+        /**
+         * Justify content horizontally.
+         */
+        alignH: {
+            type: String,
+            default: null,
+            validator: v => ALIGNMENT.concat(['between', 'around']).includes(v)
+        },
+        /**
+         * Align content.
+         */
+        alignContent: {
+            type: String,
+            default: null,
+            validator: v => ALIGNMENT.concat(['between', 'around', 'stretch']).includes(v)
+        }
+    }
+}
+</script>
+

package/src/components/container/index.js

@@ -0,0 +1,21 @@
+import { registerComponents, vueUse } from './../../utils';
+
+import dContainer from './Container.vue';
+import dRow from './Row.vue';
+import dCol from './Col.vue';
+
+const components = {
+    dContainer,
+    dRow,
+    dCol,
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin