@gorse/shards-vue 1.0.8

package/src/components/button/Button.vue

@@ -0,0 +1,107 @@
+<template>
+    <button class="btn"
+        @click="handleClick"
+        :class="[
+            themeClass,
+            sizeClass,
+            pill ? 'btn-pill' : '',
+            squared ? 'btn-squared' : '',
+            blockLevel ? 'btn-block' : '',
+            active ? 'active' : ''
+        ]"
+        :disabled="this.disabled"
+        :aria-pressed="this.active">
+        <slot>Button</slot>
+    </button>
+</template>
+
+<script>
+import { THEMECOLORS } from '../../utils/constants'
+
+export default {
+    name: 'd-button',
+    props: {
+        /**
+         * The theme style.
+         */
+        theme: {
+            type: String,
+            validator: v => THEMECOLORS.includes(v),
+            default: 'primary'
+        },
+        /**
+         * Whether it should be displayed as an outline, or not.
+         */
+        outline: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it should be displayed as a pill, or not.
+         */
+        pill: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it should be displayed as a squared, or not.
+         */
+        squared: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The button's sizesize.
+         */
+        size: {
+            type: String,
+            validator: v => ['sm', 'lg', null].includes(v),
+            default: null
+        },
+        /**
+         * Whether it should be displayed as block, or not.
+         */
+        blockLevel: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it should be displayed as disabled, or not.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it should be displayed as active, or not.
+         */
+        active: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        sizeClass() {
+            if (this.size && this.size !== '') {
+                return `btn-${this.size}`;
+            }
+
+            return this.size;
+        },
+
+        themeClass() {
+            return this.theme ? `btn-${this.outline ? 'outline-' : ''}${this.theme}` : '';
+        }
+    },
+    methods: {
+        /**
+         * Triggered when the button is clicked.
+         *
+         * @event click
+         */
+        handleClick(e) {
+            this.$emit('click', e);
+        }
+    }
+}
+</script>

package/src/components/button/ButtonClose.vue

@@ -0,0 +1,47 @@
+<template>
+    <button :class="[ 'close', theme ? `text-${theme}` : '' ]"
+        :disabled="disabled"
+        :aria-label="ariaLabel"
+        @click="handleClick">
+        <slot>&times;</slot>
+    </button>
+</template>
+
+<script>
+export default {
+    name: 'd-button-close',
+    props: {
+        /**
+         * Whether it should be displayed as disabled, or not.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The theme color value.
+         */
+        theme: {
+            type: String,
+            default: null
+        },
+        /**
+         * The aria-label value.
+         */
+        ariaLabel: {
+            type: String,
+            default: 'Close'
+        }
+    },
+    methods: {
+        handleClick(e) {
+            if (this.disabled && e instanceof Event) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            this.$emit('click', e);
+        }
+    }
+}
+</script>

package/src/components/button/README.md

@@ -0,0 +1,197 @@
+# Buttons
+
+Buttons are Bootstrap's core component for triggering various actions. In Shards, they're very flxible, support multiple sizes, states and many more.
+
+
+## Button Themes
+
+Using the `theme` prop you can easily change the appearance of your button using one the main theme colors: `primary, secondary, success, danger, warning, info, light` and `dark`. The default theme value is `primary`.
+
+:::demo
+```html
+<d-button>Primary</d-button>
+<d-button theme="secondary">Secondary</d-button>
+<d-button theme="success">Success</d-button>
+<d-button theme="info">Info</d-button>
+<d-button theme="warning">Warning</d-button>
+<d-button theme="danger">Danger</d-button>
+<d-button theme="light">Light</d-button>
+<d-button theme="dark">Dark</d-button>
+
+<!-- buttons-1.vue -->
+```
+:::
+
+
+## Outline Styled Buttons
+
+Using the `outline` prop removes the background color and applies a thin border that make your buttons to look outlined.
+
+:::demo
+```html
+<d-button outline>Primary</d-button>
+<d-button outline theme="secondary">Secondary</d-button>
+<d-button outline theme="success">Success</d-button>
+<d-button outline theme="info">Info</d-button>
+<d-button outline theme="warning">Warning</d-button>
+<d-button outline theme="danger">Danger</d-button>
+<d-button outline theme="light">Light</d-button>
+<d-button outline theme="dark">Dark</d-button>
+
+<!-- buttons-2.vue -->
+```
+:::
+
+
+## Pill Shaped Buttons
+
+Using the `pill` prop appiles a larger border radius that make your buttons to look more rounded and pill-like.
+
+:::demo
+```html
+<d-button pill>Primary</d-button>
+<d-button pill theme="secondary">Secondary</d-button>
+<d-button pill theme="success">Success</d-button>
+<d-button pill theme="info">Info</d-button>
+<d-button pill theme="warning">Warning</d-button>
+<d-button pill theme="danger">Danger</d-button>
+<d-button pill theme="light">Light</d-button>
+<d-button pill theme="dark">Dark</d-button>
+
+<!-- buttons-3.vue -->
+```
+:::
+
+
+## Mixed Styles
+
+Similarly to [Badges](/docs/components/badges) you can also mix both `pill` and `outline` props to get a mixed "outline-pill" result.
+
+:::demo
+```html
+<d-button outline pill>Primary</d-button>
+<d-button outline pill theme="secondary">Secondary</d-button>
+<d-button outline pill theme="success">Success</d-button>
+<d-button outline pill theme="info">Info</d-button>
+<d-button outline pill theme="warning">Warning</d-button>
+<d-button outline pill theme="danger">Danger</d-button>
+<d-button outline pill theme="light">Light</d-button>
+<d-button outline pill theme="dark">Dark</d-button>
+
+<!-- buttons-4.vue -->
+```
+:::
+
+
+## Squared Style
+
+Using the `squared` prop you can style your buttons to look, well, squared.
+
+:::demo
+```html
+<d-button squared>Primary</d-button>
+<d-button squared theme="secondary">Secondary</d-button>
+<d-button squared theme="success">Success</d-button>
+<d-button squared theme="info">Info</d-button>
+<d-button squared theme="warning">Warning</d-button>
+<d-button squared theme="danger">Danger</d-button>
+<d-button squared theme="light">Light</d-button>
+<d-button squared theme="dark">Dark</d-button>
+
+<!-- buttons-5.vue -->
+```
+:::
+
+> **Note:** The `pill` prop has priority over the `squared` prop. 
+
+
+## Mixed Outline-Squared Style
+
+Mixing the `outline` and `squared` prop is also possible and it will render an outlined and squared button. 
+
+:::demo
+```html
+<d-button outline squared>Primary</d-button>
+<d-button outline squared theme="secondary">Secondary</d-button>
+<d-button outline squared theme="success">Success</d-button>
+<d-button outline squared theme="info">Info</d-button>
+<d-button outline squared theme="warning">Warning</d-button>
+<d-button outline squared theme="danger">Danger</d-button>
+<d-button outline squared theme="light">Light</d-button>
+<d-button outline squared theme="dark">Dark</d-button>
+
+<!-- buttons-6.vue -->
+```
+:::
+
+
+## Button Sizes
+
+Buttons come in three size variations: `lg`, normal (default) and `sm`. You can control the size of your buttons using the `size` prop.
+
+:::demo
+```html
+<d-button size="lg">Large</d-button>
+<d-button>Normal</d-button>
+<d-button size="sm">Small</d-button>
+
+<!-- buttons-7.vue -->
+```
+:::
+
+
+## Active State
+
+If you need to control the `active` state and appearance of your button programatically, you can use the `active` prop.
+
+:::demo
+```html
+<d-button active theme="success">Success Active</d-button>
+<d-button active theme="danger">Danger Active</d-button>
+
+<!-- buttons-8.vue -->
+```
+:::
+
+
+## Disabled State
+
+Similarly to the active state, the `disabled` state can also be crontrolled via the `disabled` prop.
+
+:::demo 
+```html
+<d-button disabled theme="success">Success Disabled</d-button>
+<d-button disabled theme="danger">Danger Disabled</d-button>
+
+<!-- buttons-9.vue -->
+```
+:::
+
+
+## Toggle State
+
+Toggling a button's state is currently not supported, but available on the [roadmap](/roadmap).
+
+
+## Change Tags
+
+Changing the button's tag (eg. using native `<a>` or `<input>` elements) is currently not supported, but available on the [roadmap](/roadmap).
+
+
+## Block Level Buttons
+
+Using the `block-level` prop you can make buttons display using the full-width of their parent element
+
+:::demo 
+```html
+<d-button block-level>Primary</d-button>
+<d-button block-level theme="secondary">Secondary</d-button>
+
+<!-- buttons-10.vue -->
+```
+:::
+
+
+## Alias
+
+The `<d-button>` component is also available as `<d-btn>`.

package/src/components/button/index.js

@@ -0,0 +1,21 @@
+import { registerComponents, vueUse } from './../../utils';
+
+import dButton from './Button.vue';
+import dButtonClose from './ButtonClose.vue';
+
+const components = {
+    dButton,
+    dBtn: dButton,
+    dButtonClose,
+    dBtnClose: dButtonClose
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/button-group/ButtonGroup.vue

@@ -0,0 +1,66 @@
+<template>
+    <div :class="[
+            btnGroupSizeClass,
+            vertical ? 'btn-group-vertical' : 'btn-group'
+        ]"
+        :aria-role="ariaRole"
+        :aria-label="ariaLabel">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'd-button-group',
+    props: {
+        /**
+         * Whether it is a vertical button group, or not.
+         */
+        vertical: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The button group size.
+         */
+        size: {
+            type: String,
+            validator: v => ['small', 'large', null].includes(v),
+            default: null
+        },
+        /**
+         * The button group's aria role.
+         */
+        ariaRole: {
+            type: String,
+            default: 'group'
+        },
+        /**
+         * The button group's aria label.
+         */
+        ariaLabel: {
+            type: String,
+            default: 'Button group'
+        }
+    },
+    computed: {
+        btnGroupSizeClass() {
+            const buttonGroupSizes = { small: 'sm', large: 'lg' };
+
+            if (this.size !== '') {
+                return `btn-group-${buttonGroupSizes[this.size]}`;
+            }
+
+            return this.size;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    // TODO: This should be fixed in Shards.
+    .btn-group-vertical .btn + .btn {
+        margin-left: 0 !important;
+    }
+</style>
+

package/src/components/button-group/README.md

@@ -0,0 +1,72 @@
+# Button Groups
+
+Button groups allow you to group buttons together on a single line.
+
+## Basic Example
+
+You can create button groups using the `<d-button-group>` component.
+
+:::demo Default button group
+```html
+<d-button-group>
+    <d-button>Left</d-button>
+    <d-button>Middle</d-button>
+    <d-button>Right</d-button>
+</d-button-group>
+
+<!-- button-group-1.vue -->
+```
+:::
+
+
+## Button Group Size
+
+The button group's size can be controlled via the `size` prop. The button group can be normal (default with no value), `small` or `large`.
+
+:::demo
+```html
+
+<div>
+    <!-- Large Button Group -->
+    <d-button-group size="large" class="mr-2">
+        <d-button>Large</d-button>
+        <d-button>Large</d-button>
+    </d-button-group>
+
+    <!-- Normal Button Group -->
+    <d-button-group class="mr-2">
+        <d-button>Normal</d-button>
+        <d-button>Normal</d-button>
+    </d-button-group>
+
+    <!-- Small Button Group -->
+    <d-button-group size="small">
+        <d-button>Small</d-button>
+        <d-button>Small</d-button>
+    </d-button-group>
+</div>
+
+<!-- button-group-3.vue -->
+```
+:::
+
+
+## Vertical Button Group
+
+You can stack button groups vertically using the `vertical` prop.
+
+:::demo 
+```html
+<d-button-group vertical>
+    <d-button>Button 1</d-button>
+    <d-button>Button 2</d-button>
+</d-button-group>
+
+<!-- button-group-3.vue -->
+```
+:::
+
+
+## Alias
+
+The `<d-button-group>` component is also aliased as `<d-btn-group>`.

package/src/components/button-group/index.js

@@ -0,0 +1,18 @@
+import { registerComponents, vueUse } from '../../utils';
+
+import dButtonGroup from './ButtonGroup.vue';
+
+const components = {
+    dButtonGroup,
+    sBtnGroup: dButtonGroup
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/button-toolbar/ButtonToolbar.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="btn-toolbar"
+        :aria-role="ariaRole"
+        :aria-label="ariaLabel">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'd-button-toolbar',
+    props: {
+        /**
+         * Button toolbar aria role.
+         */
+        ariaRole: {
+            type: String,
+            default: 'toolbar'
+        },
+        /**
+         * Button toolbar aria label.
+         */
+        ariaLabel: {
+            type: String,
+            default: 'Button toolbar'
+        }
+    }
+}
+</script>

package/src/components/button-toolbar/README.md

@@ -0,0 +1,24 @@
+# Button Toolbars
+
+Button toolbars allow you to group a series of button or input groups on a single line.
+
+:::demo
+```html
+<d-button-toolbar>
+    <d-button-group size="small" class="mr-3">
+        <d-button>Create</d-button>
+        <d-button>Edit</d-button>
+    </d-button-group>
+    
+    <d-input-group prepend="Project">
+        <d-input placeholder="Title"/>
+    </d-input-group>
+</d-button-toolbar>
+
+<!-- button-toolbar-1.vue -->
+```
+:::
+
+## Alias
+
+The `<d-button-toolbar>` component is also aliased as `<d-btn-toolbar>`.

package/src/components/button-toolbar/index.js

@@ -0,0 +1,18 @@
+import { registerComponents, vueUse } from '../../utils';
+
+import dButtonToolbar from './ButtonToolbar.vue';
+
+const components = {
+    dButtonToolbar,
+    dBtnToolbar: dButtonToolbar
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/card/Card.vue

@@ -0,0 +1,57 @@
+<template>
+    <component :is="tag"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :class="[
+            'card',
+            Boolean(align) ? `text-${align}` : '',
+            Boolean(bgTheme) ? `bg-${bgTheme}` : '',
+            Boolean(borderTheme) ? `border-${borderTheme}` : '',
+            Boolean(textTheme) ? `text-${textTheme}` : ''
+        ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-card',
+    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
+        },
+        /**
+         * Alignment
+         */
+        align: {
+            type: String,
+            default: null
+        }
+    }
+}
+</script>