@gorse/shards-vue 1.0.8

package/src/components/dropdown/index.js

@@ -0,0 +1,23 @@
+import { registerComponents, vueUse } from '../../utils';
+
+import dDropdown from './Dropdown.vue'
+import dDropdownItem from './DropdownItem.vue'
+import dDropdownHeader from './DropdownHeader.vue'
+import dDropdownDivider from './DropdownDivider.vue'
+
+const components = {
+    dDropdown,
+    dDropdownItem,
+    dDropdownHeader,
+    dDropdownDivider
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/embed/Embed.vue

@@ -0,0 +1,47 @@
+<template>
+    <component :is="tag"
+        :class="[
+            'embed-responsive',
+            `embed-responsive-${aspect}`
+        ]">
+        <component :is="type"
+            class="embed-responsive-item"
+            v-bind="$attrs">
+            <slot />
+        </component>
+    </component>
+</template>
+
+<script>
+import { EMBED_TYPES, EMBED_ASPECTS } from './../../utils/constants'
+
+export default {
+    name: 'd-embed',
+    props: {
+        /**
+         * The embed type.
+         */
+        type: {
+            type: String,
+            default: 'iframe',
+            validator: v => EMBED_TYPES.includes(v)
+        },
+        /**
+         * The embed tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * The embed aspect ratio.
+         */
+        aspect: {
+            type: String,
+            default: '16by9',
+            validator: v => EMBED_ASPECTS.includes(v)
+        }
+    }
+}
+</script>
+

package/src/components/embed/README.md

@@ -0,0 +1,23 @@
+# Embeds
+
+Embeds allow you to create responsive video or slideshow embeds based on the width of the parent.
+
+## Basic Example
+
+The following embed types are supported: `iframe` (by default), `video`, `object` and `embed`.
+
+:::demo
+```html
+
+<d-embed type="iframe"
+        aspect="16by9"
+        src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
+        allowfullscreen />
+
+<!-- embeds-1.vue -->
+```
+:::
+
+## Aspect Ratios
+
+You can also set the embed aspect ratio via the `aspect` prop. The following aspect ratios are available: `21by9`, `16by9`, `4by3`, `1by1`.

package/src/components/embed/index.js

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

package/src/components/form/Form.vue

@@ -0,0 +1,40 @@
+<template>
+    <form :novalidate="novalidate ? true : false"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :class="[
+            inline ? 'form-inline' : '',
+            validated ? 'was-validated' : ''
+        ]">
+        <slot />
+    </form>
+</template>
+
+<script>
+export default {
+    name: 'd-form',
+    props: {
+        /**
+         * Whether it should be displayed inline, or not.
+         */
+        inline: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it is validated, or not.
+         */
+        validated: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether it should be validated, or not.
+         */
+        novalidate: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/form/FormFeedback.vue

@@ -0,0 +1,39 @@
+<template>
+    <component :is="tag"
+        :class="[
+            `${type}-feedback`,
+            forceShow ? 'd-block' : ''
+        ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-form-feedback',
+    props: {
+        /**
+         * The feedback tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * The feedback type.
+         */
+        type: {
+            type: String,
+            default: 'valid',
+            validator: v => ['valid', 'invalid'].includes(v)
+        },
+        /**
+         * Whether it should be forcefully shown, or not.
+         */
+        forceShow: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/form/FormInvalidFeedback.vue

@@ -0,0 +1,39 @@
+<template>
+    <component :is="tag"
+        :id="id"
+        :class="[
+            'invalid-feedback',
+            forceShow ? 'd-block' : ''
+        ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-form-invalid-feedback',
+    props: {
+        /**
+         * The element ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Whether it should be forcefully shown, or not.
+         */
+        forceShow: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/form/FormRow.vue

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

package/src/components/form/FormText.vue

@@ -0,0 +1,41 @@
+<template>
+    <component :is="tag"
+        :class="[
+            !inline ? 'form-text' : '',
+            Boolean(theme) ? `text-${theme}` : ''
+        ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+import { THEMECOLORS } from '../../utils/constants';
+
+export default {
+    name: 'd-form-text',
+    props: {
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'small'
+        },
+        /**
+         * The theme color.
+         */
+        theme: {
+            type: String,
+            default: 'secondary',
+            validator: (v) => THEMECOLORS.includes(v)
+        },
+        /**
+         * Whether it should be displayed inline, or not.
+         */
+        inline: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/form/FormValidFeedback.vue

@@ -0,0 +1,39 @@
+<template>
+    <component :is="tag"
+        :id="id"
+        :class="[
+            'valid-feedback',
+            forceShow ? 'd-block' : ''
+        ]">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'd-form-valid-feedback',
+    props: {
+        /**
+         * The element ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Whether it should be forcefully shown, or not.
+         */
+        forceShow: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/form/README.md

@@ -0,0 +1,84 @@
+# Forms
+
+The `<d-form>` component is a form wrapper that supports inline form styles and provides validation states.
+
+## Inline Forms
+
+You can create inline forms using the `inline` prop.
+
+:::demo
+```html
+<d-form inline>
+    <label class="sr-only" for="f1_Username">Username</label>
+    <d-input id="f1_Username" class="mb-2 mr-sm-2 mb-sm-0" placeholder="Username" />
+
+    <label class="sr-only" for="f1_Password">Password</label>
+    <d-input id="f2_Password" class="mr-2" type="password" placeholder="Password" />
+
+    <d-button theme="primary">Register</d-button>
+</d-form>
+
+<!-- form-1.vue -->
+```
+:::
+
+## Form Validation
+
+The form component also provides validation states out of the box.
+
+:::demo
+```html
+<template>
+    <d-form @submit="handleOnSubmit" validated>
+
+        <div class="form-group">
+            <label class="sr-only" for="f2_Email">Email Address</label>
+            <d-input id="f2_Email" class="mb-2 mr-sm-2 mb-sm-0" v-model="form.email" placeholder="email@example.com" required />
+            <d-form-invalid-feedback>Invalid email address!</d-form-invalid-feedback>
+            <d-form-valid-feedback>Your email looks good!</d-form-valid-feedback>
+            <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+        </div>
+
+        <div class="form-group">
+            <label for="f2_PasswordInput" class="sr-only">Password</label>
+            <d-form-input id="f2_PasswordInput" type="password" v-model="form.password" required placeholder="Password"></d-form-input>
+            <d-form-invalid-feedback>Please provide a valid password!</d-form-invalid-feedback>
+        </div>
+
+        <div class="form-group">
+            <label for="f2_PasswordInput2" class="sr-only">Repeat Password</label>
+            <d-form-input id="f2_PasswordInput2" type="password" v-model="form.password2" required placeholder="Repeat Password"></d-form-input>
+        </div>
+
+        <div class="form-group">
+            <d-form-checkbox v-model="form.tos" value="tos_agree" unchecked-value="tos_do_not_agree">I agree with the <a href="#">Terms of Service</a></d-form-checkbox>
+        </div>
+
+        <d-button type="submit">Create Account</d-button>
+    </d-form>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      form: {
+        email: 'myemail@example.com',
+        password: '',
+        password2: '',
+        tos: 'tos_agree'
+      }
+    }
+  },
+  methods: {
+    handleOnSubmit (e) {
+      e.preventDefault();
+      alert(JSON.stringify(this.form));
+    }
+  }
+}
+</script>
+
+<!-- form-2.vue -->
+```
+:::

package/src/components/form/index.js

@@ -0,0 +1,29 @@
+import { registerComponents, vueUse } from '../../utils'
+
+import dForm from './Form.vue'
+import dFormRow from './FormRow.vue'
+import dFormText from './FormText.vue'
+import dFormFeedback from './FormFeedback.vue'
+import dFormValidFeedback from './FormValidFeedback.vue'
+import dFormInvalidFeedback from './FormInvalidFeedback.vue'
+
+const components = {
+    dForm,
+    dFormRow,
+    dFormText,
+    dFormFeedback,
+    dFormValidFeedback,
+    dValidFeedback: dFormValidFeedback,
+    dFormInvalidFeedback,
+    dInvalidFeedback: dFormInvalidFeedback
+}
+
+const VuePlugin = {
+  install (Vue) {
+    registerComponents(Vue, components)
+  }
+}
+
+vueUse(VuePlugin)
+
+export default VuePlugin

package/src/components/form-checkbox/FormCheckbox.vue

@@ -0,0 +1,200 @@
+<template>
+    <label :class="[
+            'custom-control',
+            !toggle ? 'custom-checkbox' : 'custom-toggle',
+            toggle && toggleSmall ? 'custom-toggle-sm' : '',
+            inline ? 'custom-control-inline' : '',
+            computedStateClass
+        ]">
+        <input type="checkbox"
+            ref="check"
+            autocomplete="off"
+            :aria-required="required ? 'true' : null"
+            :id="computedID"
+            :class="[ 'custom-control-input', computedStateClass ]"
+            :name="name"
+            :value="value"
+            :true-value="value"
+            :false-value="uncheckedValue"
+            :disabled="disabled"
+            :required="required"
+            v-model="computedLocalState"
+            @change="handleChange" />
+        <label :for="computedID" class="custom-control-label" aria-hidden="true"></label>
+        <span :class="['custom-control-description']">
+            <slot />
+        </span>
+    </label>
+</template>
+
+<script>
+import { guid } from '../../utils'
+
+export default {
+    name: 'd-form-checkbox',
+    model: {
+        prop: 'checked',
+        event: 'input'
+    },
+    data() {
+        return {
+            localState: this.checked
+        }
+    },
+    props: {
+        /**
+         * The checkbox input name.
+         */
+        name: {
+            type: String
+        },
+        /**
+         * The checkbox input ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The checkbox input value.
+         */
+        value: {
+            default: true
+        },
+        /**
+         * The checkbox input unchecked state value.
+         */
+        uncheckedValue: {
+            default: false
+        },
+        /**
+         * The disabled state.
+         */
+        disabled: {
+            type: Boolean
+        },
+        /**
+         * The required state.
+         */
+        required: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The checked state.
+         */
+        checked: {
+            type: [Boolean, String, Array]
+        },
+        /**
+         * The indeterminate state.
+         */
+        indeterminate: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The validation state.
+         */
+        state: {
+            type: [Boolean, String],
+            default: null
+        },
+        /**
+         * Display as toggle.
+         */
+        toggle: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Display as small toggle.
+         */
+        toggleSmall: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the checkbox should be displayed inline, or not.
+         */
+        inline: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        computedLocalState: {
+            get() {
+                return this.localState
+            },
+
+            set(val) {
+                this.localState = val
+            }
+        },
+        computedID() {
+            return this.id || `dr-checkbox-${guid()}`
+        },
+        computedState() {
+            if (this.state === true || this.state === 'valid') {
+                return true
+            }
+
+            if (this.state === false || this.state === 'invalid') {
+                return false
+            }
+
+            return null
+        },
+        computedStateClass() {
+            if (this.computedState === true) {
+                return 'is-valid'
+            }
+
+            if (this.computedState === false) {
+                return 'is-invalid'
+            }
+
+            return null
+        }
+    },
+    watch: {
+        computedLocalState(newVal, oldVal) {
+            if (newVal == oldVal) {
+                return
+            }
+
+            this.$emit('input', newVal)
+            this.$emit('update:indeterminate', this.$refs.check.indeterminate)
+        },
+
+        checked(newVal, oldVal) {
+            if (newVal == oldVal) {
+                return
+            }
+
+            this.computedLocalState = newVal
+        },
+
+        indeterminate(newVal) {
+            this.setIndeterminate(newVal)
+        }
+    },
+
+    methods: {
+        handleChange(e) {
+            this.$emit('change', e.target.checked ? this.value : this.uncheckedValue)
+            this.$emit('update:indeterminate', this.$refs.check.indeterminate)
+        },
+
+        setIndeterminate(state) {
+            this.$refs.check.indeterminate = state
+            this.$emit('update:indeterminate', this.$refs.check.indeterminate)
+        }
+    },
+
+    mounted() {
+        this.setIndeterminate(this.indeterminate)
+    }
+}
+</script>