@gorse/shards-vue 1.0.8

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

@@ -0,0 +1,188 @@
+# Input Groups
+
+Using the `<d-input-group>` component you can easily extend form controls by adding various elements such as text, buttons and button groups.
+
+## Basic Input Groups
+
+:::demo
+```html
+
+<div>
+    <!-- Using Props -->
+    <d-input-group prepend="$" class="mb-2">
+        <d-input placeholder="Total Amount"/>
+    </d-input-group>
+
+    <!-- Using Slots -->
+    <d-input-group class="mb-2">
+        <d-input placeholder="Total Amount"/>
+        <d-input-group-text slot="append">$</d-input-group-text>
+    </d-input-group>
+
+    <!-- Using Components -->
+    <d-input-group prepend="designrevision.com/user/">
+        <d-input placeholder="username" />
+        <d-input-group-addon append>
+            <d-btn theme="secondary">Check</d-btn>
+        </d-input-group-addon>
+    </d-input-group>
+</div>
+
+<!-- input-group-1.vue -->
+```
+:::
+
+## Prepending and Appending via Props
+
+The simplest way of attaching addons to your inputs would be by using the `prepend` or `append` props on the `<d-input-group>` component.
+
+:::demo
+```html
+
+<d-input-group prepend="Total Amount" append=".00 (USD)" class="mb-2">
+    <d-input/>
+</d-input-group>
+
+<!-- input-group-2.vue -->
+```
+:::
+
+## Using Named Slots
+
+If you'd like better control over your input group's contents, you can also use the `prepend` or `append` slots.
+
+:::demo
+```html
+
+<d-input-group>
+    <d-input-group-text slot="prepend">Total Amount</d-input-group-text>
+    <d-input placeholder="Total Amount"/>
+    <d-input-group-text slot="append">$</d-input-group-text>
+</d-input-group>
+
+<!-- input-group-3.vue -->
+```
+:::
+
+## Using Input Group Addons
+
+You can also use the `<d-input-group-addon>` component with the `append` or `prepend` props for more flexibility.
+
+:::demo
+```html
+
+<d-input-group class="mb-2">
+    <d-input-group-addon prepend>
+        <d-btn outline theme="danger">Delete</d-btn>
+    </d-input-group-addon>
+    <d-input placeholder="Email Address"/>
+    <d-input-group-addon append>
+        <d-btn outline theme="success">Create</d-btn>
+    </d-input-group-addon>
+</d-input-group>
+
+<!-- input-group-4.vue -->
+```
+:::
+
+## Input Group Dropdowns
+
+> Note: Using dropdowns inside input groups are currently not supported, but available on the [roadmap](/roadmap).
+
+:::demo
+```html
+
+<div>
+  <d-input-group prepend="Username">
+    <d-form-input />
+    <d-input-group-addon append>
+        <d-dropdown text="Dropdown" variant="success">
+        <d-dropdown-item>Action A</d-dropdown-item>
+        <d-dropdown-item>Action B</d-dropdown-item>
+        </d-dropdown>
+    </d-input-group-addon>
+  </d-input-group>
+</div>
+
+<!-- input-group-4.vue -->
+```
+:::
+
+
+
+## Plain Checkboxes and Radios
+
+:::demo
+```html
+
+<d-container>
+  <d-row>
+    <d-col lg="6">
+      <d-input-group>
+        <d-input-group-text slot="prepend">
+            <input type="checkbox" aria-label="Checkbox for following text input">
+        </d-input-group-text>
+        <d-form-input type="text" aria-label="Text input with checkbox" />
+      </d-input-group>
+    </d-col>
+
+    <d-col lg="6">
+      <d-input-group>
+        <d-input-group-text slot="prepend">
+            <input type="radio" aria-label="Radio for following text input">
+        </d-input-group-text>
+        <d-form-input type="text" aria-label="Text input with radio button" />
+      </d-input-group>
+    </d-col>
+  </d-row>
+</d-container>
+
+<!-- input-group-5.vue -->
+```
+:::
+
+## Sizing
+
+You can control the sizing of the `<d-input-group>` component using the `size` prop with the `sm` value for small input groups and `lg` for large input groups.
+
+:::demo
+```html
+
+<div>
+    <!-- Small -->
+    <d-input-group prepend="$" class="mb-2" size="sm">
+        <d-input placeholder="Total Amount"/>
+    </d-input-group>
+
+    <!-- Normal -->
+    <d-input-group prepend="$" class="mb-2">
+        <d-input placeholder="Total Amount"/>
+    </d-input-group>
+
+    <!-- Large -->
+    <d-input-group prepend="$" class="mb-2" size="lg">
+        <d-input placeholder="Total Amount"/>
+    </d-input-group>
+</div>
+
+<!-- input-group-6.vue -->
+```
+:::
+
+## Seamless Input Groups
+
+You can create seamless input groups using the `seamless` prop.
+
+:::demo
+```html
+
+<d-input-group seamless>
+    <d-input-group-text slot="prepend">
+        <fa :icon="['fas', 'dollar-sign']" />
+    </d-input-group-text>
+    <d-input placeholder="Total Amount"/>
+</d-input-group>
+
+<!-- input-group-7.vue -->
+```
+:::

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

@@ -0,0 +1,21 @@
+import { registerComponents, vueUse } from './../../utils'
+
+import dInputGroup from './InputGroup.vue'
+import dInputGroupText from './InputGroupText.vue'
+import dInputGroupAddon from './InputGroupAddon.vue'
+
+const components = {
+    dInputGroup,
+    dInputGroupText,
+    dInputGroupAddon
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/link/Link.vue

@@ -0,0 +1,157 @@
+<template>
+    <component v-bind="$props"
+        :is="computedTag"
+        :rel="computedRel"
+        :href="computedHref"
+        :target="target"
+        :to="to"
+        :tabindex="computedTabindex"
+        :class="[
+            active ? (exact ? exactActiveClass : activeClass) : '',
+            disabled ? 'disabled' : ''
+        ]"
+        :aria-disabled="computedAriaDisabled"
+        @click.native="handleClick">
+        <slot>Link</slot>
+    </component>
+</template>
+
+<script>
+import { LINK_EVENTS } from '../../utils/constants';
+import rootListenerMixin from '../../mixins/root-listener.mixin'
+
+export default {
+    name: 'd-link',
+    mixins: [ rootListenerMixin ],
+    props: {
+        /**
+         * The link href.
+         */
+        href: {
+            type: String,
+            default: null
+        },
+        /**
+         * The router location.
+         */
+        to: {
+            type: [String, Object],
+            default: null
+        },
+        /**
+         * Whether the link is disabled, or not.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The link target.
+         */
+        target: {
+            type: String,
+            default: '_self'
+        },
+        /**
+         * The link rel.
+         */
+        rel: {
+            type: String,
+            default: null
+        },
+        /**
+         * Whether the route is exact, or not.
+         */
+        exact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The class name attached when the route is exact,
+         */
+        exactActiveClass: {
+            type: String
+        },
+        /**
+         * Whether the link is active, or not.
+         */
+        active: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The class applied when the link is active.
+         */
+        activeClass: {
+            type: String
+        },
+        /**
+         * The component tag.
+         */
+        tag: {
+            type: String,
+            default: 'a'
+        }
+    },
+    computed: {
+        computedTag() {
+            return this.to
+                && !this.disabled
+                && Boolean(this.$parent.$router) ? 'router-link' : 'a'
+        },
+        computedRel() {
+            return this.target === '_blank'
+                && this.rel === null ? 'noopener' : this.rel || null
+        },
+        computedHref() {
+            if (this.computedTag === 'router-link') {
+                return;
+            }
+
+            if (this.href) {
+                return this.href;
+            }
+
+            if (this.to) {
+                if (typeof this.to === 'string') {
+                    return this.to;
+                }
+
+                if (typeof this.to === 'object' && this.to.path) {
+                    return this.to.path;
+                }
+            }
+
+            return '#';
+        },
+        computedTabindex() {
+            return this.disabled ? '-1' : (this.$attrs ? this.$attrs.tabindex : null);
+        },
+        computedAriaDisabled() {
+            return (this.tag === 'a' && this.disabled) ? 'true' : null;
+        }
+    },
+    methods: {
+        handleClick(event) {
+            const isRouterLink = this.computedTag === 'router-link';
+
+            if (this.disabled && event instanceof Event) {
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+            } else {
+                if (isRouterLink && event.target.__vue__) {
+                    event.target.__vue__.$emit('click', event);
+                } else {
+                    this.$emit('click', event);
+                }
+
+                this.emitOnRoot(LINK_EVENTS.CLICKED, event);
+            }
+
+            if ((!isRouterLink && this.computedHref === '#') || this.disabled) {
+                event.preventDefault();
+            }
+        }
+    }
+}
+</script>

package/src/components/link/README.md

@@ -0,0 +1,27 @@
+# Links
+
+The `<d-link>` component is a wrapper over regular `<a>` links or `<router-link>`s and it is used behind the scenes across multiple components. 
+
+> **Note:** Most components that use the `<d-link>` component are properly documented so you can see where you can take advantage of the props provided by this component.
+
+
+## Basic Example
+
+Creating a regular link using the `<d-link>` component is fairly simple.
+
+:::demo
+```html
+
+<d-link href="#lorem-ipsum">My Link</d-link>
+
+<!-- link-1.vue -->
+```
+:::
+
+## Router Links
+
+Using the `to` prop will turn the link into a `<router-link>` component.
+
+## Disabled State
+
+Using the `disabled` prop you can set your link as disabled.

package/src/components/link/create-link-props.js

@@ -0,0 +1,54 @@
+export default function createLinkProps() {
+    return {
+        href: {
+            type: String,
+            default: null
+        },
+        to: {
+            type: [String, Object],
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        target: {
+            type: String,
+            default: '_self'
+        },
+        rel: {
+            type: String,
+            default: null
+        },
+        exact: {
+            type: Boolean,
+            default: false
+        },
+        exactActiveClass: {
+            type: String
+        },
+        active: {
+            type: Boolean,
+            default: false
+        },
+        activeClass: {
+            type: String
+        },
+        tag: {
+            type: String,
+            default: 'a'
+        },
+        routerTag: {
+            type: String,
+            default: 'a'
+        },
+        event: {
+            type: [String, Array],
+            default: 'click'
+        },
+        append: {
+            type: Boolean,
+            default: false
+        }
+    }
+}

package/src/components/link/index.js

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

package/src/components/list-group/ListGroup.vue

@@ -0,0 +1,30 @@
+<template>
+    <component :is="tag" :class="[
+        'list-group',
+        flush ? 'list-group-flush' : ''
+    ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-list-group',
+    props: {
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Whether the list group should be flushed, or not.
+         */
+        flush: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/list-group/ListGroupItem.vue

@@ -0,0 +1,90 @@
+<template>
+    <component :is="computedTag"
+        :class="[
+            'list-group-item',
+            theme ? `list-group-item-${theme}` : '',
+            isAction ? 'list-group-item-action': '',
+            active ? 'active' : '',
+            disabled ? 'disabled' : ''
+        ]"
+        :disabled="button && disabled">
+        <slot />
+    </component>
+</template>
+
+<script>
+import dLink from '../link/Link.vue'
+import createLinkProps from '../link/create-link-props'
+import { THEMECOLORS } from '../../utils/constants'
+
+let _linkProps = createLinkProps()
+
+if (_linkProps && typeof _linkProps.href !== 'undefined') {
+    delete _linkProps.href.default
+}
+
+if (_linkProps && typeof _linkProps.to !== 'undefined') {
+    delete _linkProps.to.default
+}
+
+const _actionTags = ['a', 'router-link', 'button', 'd-link']
+
+/**
+ * This subcomponent is inheriting <a href="/docs/components/link">Link</a> component's props.
+ */
+export default {
+    name: 'd-list-group-item',
+    components: {
+        dLink
+    },
+    props: {
+        ..._linkProps, ...{
+            /**
+             * The element tag.
+             */
+            tag: {
+                type: String,
+                default: 'div'
+            },
+            /**
+             * The element action.
+             */
+            action: {
+                type: Boolean,
+                default: null
+            },
+            /**
+             * Whether the element tag should be a button, or not.
+             */
+            button: {
+                type: Boolean,
+                default: null
+            },
+            /**
+             * The theme color.
+             */
+            theme: {
+                type: String,
+                default: null,
+                validator: v => THEMECOLORS.includes(v)
+            }
+        }
+    },
+    computed: {
+        computedTag() {
+            const _tagOrLink = ((!this.href && !this.to) ? this.tag : 'd-link')
+            return this.button ? 'button' : _tagOrLink
+        },
+        isAction() {
+            return Boolean(
+                this.href
+                || this.to
+                || this.action
+                || this.button
+                || _actionTags.includes(this.tag)
+            )
+        }
+    }
+}
+</script>
+

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

@@ -0,0 +1,23 @@
+# List Groups
+
+List groups allow you to display series of content.
+
+## Basic Example
+
+You can create list groups using the `<d-list-group>` component with the `<d-list-group-item>` sub-component.
+
+:::demo
+```html
+
+<d-list-group>
+  <d-list-group-item>Cras justo odio</d-list-group-item>
+  <d-list-group-item>Dapibus ac facilisis in</d-list-group-item>
+  <d-list-group-item>Morbi leo risus</d-list-group-item>
+  <d-list-group-item>Porta ac consectetur ac</d-list-group-item>
+  <d-list-group-item>Vestibulum at eros</d-list-group-item>
+</d-list-group>
+
+
+<!-- list-group-1.vue -->
+```
+:::

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

@@ -0,0 +1,19 @@
+import { registerComponents, vueUse } from './../../utils';
+
+import dListGroup from './ListGroup.vue';
+import dListGroupItem from './ListGroupItem.vue'
+
+const components = {
+    dListGroup,
+    dListGroupItem
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin