@gorse/shards-vue 1.0.8

package/src/components/form-checkbox/README.md

@@ -0,0 +1,131 @@
+# Form Checkbox
+
+The `<d-form-checkbox>` component is a wrapper over Bootstrap's [custom checkbox component](https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios-1).
+
+## Alias
+
+The `<d-form-checkbox>` component is also available as `<d-checkbox>`.
+
+## Basic Demo
+
+:::demo
+```html
+<template>
+    <div>
+        <label>Select your favorite fruits</label>
+        <d-checkbox v-model="selected" name="fav_fruits" value="orange">Orange</d-checkbox>
+        <d-checkbox v-model="selected" name="fav_fruits" value="lemon">Lemon</d-checkbox>
+        <d-checkbox v-model="selected" name="fav_fruits" value="kiwi">Kiwi</d-checkbox>
+        <p>Checked Status: {{ selected }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selected: ['orange']
+        }
+    }
+}
+</script>
+
+<!-- checkbox-1.vue -->
+```
+:::
+
+## Toggles
+
+Checkboxes can be turned into toggles by using the `toggle` prop.
+
+:::demo
+```html
+
+
+<template>
+    <div class="mb-3">
+        <d-checkbox inline v-model="enabled" toggle>Enable Rockets <span v-if="enabled">- 🚀🚀 Rockets enabled! 🚀🚀</span> </d-checkbox>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            enabled: false
+        }
+    }
+}
+</script>
+
+<!-- checkbox-2.vue -->
+```
+:::
+
+
+## Inline Display
+
+Checkboxes can also be displayed inline using the `inline` prop.
+
+:::demo
+```html
+<div>
+    <label class="d-block">Select your favorite sports</label>
+    <d-checkbox inline checked="basketball" name="fav_sports" value="basketball">Basketball</d-checkbox>
+    <d-checkbox inline name="fav_sports" value="football">Football</d-checkbox>
+    <d-checkbox inline name="fav_sports" value="Tennis">Tennis</d-checkbox>
+</div>
+
+<!-- checkbox-3.vue -->
+```
+:::
+
+## Values
+
+By default, the `<d-form-checkbox>` component's value will be `true` or `false` depending on its checked state. However, this can be easily adjusted using the `value` and `unchecked-value` props.
+
+## Indeterminate State
+
+:::demo
+```html
+<template>
+  <div>
+    <d-form-checkbox v-model="checked" :indeterminate.sync="indeterminate">
+      I'm <span v-if="indeterminate">indeterminate 😕</span><span v-else-if="checked">checked 😊</span><span v-else>not checked! 😟</span>
+    </d-form-checkbox>
+
+    <div class="my-3">
+      Checked: <strong>{{ checked }}</strong><br>
+      Indeterminate: <strong>{{ indeterminate }}</strong>
+    </div>
+    <d-btn @click="toggleIndeterminateState">Toggle Indeterminate</d-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      checked: true,
+      indeterminate: true
+    }
+  },
+  methods: {
+    toggleIndeterminateState () {
+      this.indeterminate = !this.indeterminate
+    }
+  }
+}
+</script>
+
+<!-- checkbox-4.vue -->
+```
+:::
+
+## Missing Features
+
+The following checkbox features are currently not supported, but available on the [roadmap](/roadmap).
+
+* Possibility of creating plain checkboxes.
+* Checkbox groups.
+* Button style checkboxes.

package/src/components/form-checkbox/index.js

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

package/src/components/form-input/FormInput.vue

@@ -0,0 +1,176 @@
+<template>
+    <input ref="input"
+        :id="computedID"
+        :type="type"
+        :name="name"
+        :disabled="disabled"
+        :required="required"
+        :readonly="readonly || plaintext"
+        :placeholder="placeholder"
+        :autocomplete="autocomplete"
+        :aria-required="required ? true : null"
+        :aria-invalid="computedAriaInvalid"
+        :value="value"
+        :class="[
+            plaintext ? 'form-control-plaintext' : 'form-control',
+            plaintext ? 'w-100' : '',
+            size ? `form-control-${size}` : null,
+            computedStateClass
+        ]"
+        v-bind="$attrs"
+        @input="onInput"
+        @change="onChange" />
+</template>
+
+<script>
+import { guid } from './../../utils'
+import { INPUT_TYPES } from './../../utils/constants'
+
+export default {
+    name: 'd-form-input',
+    props: {
+        /**
+         * Input type.
+         */
+        type: {
+            type: String,
+            default: 'text',
+            validator: (v) => INPUT_TYPES.includes(v)
+        },
+        /**
+         * Input value.
+         */
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        /**
+         * Input size.
+         */
+        size: {
+            type: String,
+            default: null
+        },
+        /**
+         * Input state. eg: 'valid', 'invalid'
+         */
+        state: {
+            type: [Boolean, String],
+            default: null,
+            validator: (v) => [null, 'valid', 'invalid', true, false].includes(v)
+        },
+        /**
+         * Input name.
+         */
+        name: {
+            type: String
+        },
+        /**
+         * Input disabled state.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Input required state.
+         */
+        required: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Input placeholder text.
+         */
+        placeholder: {
+            type: String,
+            default: null
+        },
+        /**
+         * Enable or disable field autocomplete.
+         */
+        autocomplete: {
+            type: String,
+            default: null
+        },
+        /**
+         * Display as plain text and remove styling.
+         */
+        plaintext: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Display as read-only.
+         */
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The input `aria-invalid` attribute.
+         */
+        ariaInvalid: {
+            type: [Boolean, String],
+            default: false
+        }
+    },
+    watch: {
+        value (newVal) {
+            this.setValue(newVal)
+        }
+    },
+    mounted() {
+        if (this.value) {
+            this.setValue(this.value)
+        }
+    },
+    computed: {
+        computedID() {
+            return `dr-input-${guid()}`
+        },
+        computedAriaInvalid() {
+            if (!this.ariaInvalid || this.ariaInvalid === 'false') {
+                return this.state === 'invalid' ? 'true' : null
+            }
+
+            if (this.ariaInvalid === true) {
+                return 'true'
+            }
+
+            return this.ariaInvalid
+        },
+        computedState() {
+            if (this.state === true || this.state === 'valid') {
+                return true
+            } else if (this.state === false || this.state === 'invalid') {
+                return false
+            }
+
+            return null
+        },
+        computedStateClass() {
+            if (this.computedState === true || this.computedState === 'valid') {
+                return 'is-valid'
+            } else if (this.computedState === false) {
+                return 'is-invalid'
+            }
+
+            return null
+        }
+    },
+    methods: {
+        setValue(value) {
+            this.$refs.input.value = value
+            this.$emit('input', value)
+        },
+        onInput(e) {
+            this.setValue(e.target.value)
+        },
+        onChange(e) {
+            this.setValue(e.target.value)
+            this.$emit('change', e.target.value)
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,110 @@
+# Form Input
+
+The form input allows you to create various text style inputs such as `text`, `password`, `email`, `number`, `url`, `search` and more.
+
+## Alias
+
+The `<d-form-input>` component is also available as `<d-input>`.
+
+## Basic Input
+
+The `<d-form-input>` component is a `text` input by default. However, you can set its type prop to one of the supported types as well: `text`, `password`, `email`, `number`, `url`, `tel`, `search`, `date`, `datetime`, `datetime-local`, `month`, `week`, `time`.
+
+:::demo
+```html
+
+<template>
+    <div>
+        <d-input v-model="inputValue" class="mb-2" />
+        <div v-if="inputValue">🤔 So you're saying: {{ inputValue }}</div>
+        <div v-else>😃 Waiting for you to say something!</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: {
+        inputValue: ''
+    }
+}
+</script>
+
+<!-- form-input-1.vue -->
+```
+:::
+
+## Supported Types
+
+The following input types are currently supported.
+
+:::demo
+```html
+
+<template>
+  <d-container fluid>
+    <d-row class="my-1" v-for="type in inputTypes" :key="type">
+      <d-col sm="3"><label :for="`type-${type}`">Type {{ type }}:</label></d-col>
+      <d-col sm="9"><d-form-input :id="`type-${type}`" :type="type"></d-form-input></d-col>
+    </d-row>
+  </d-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      inputTypes: ['text', 'password', 'email', 'number', 'url','tel', 'date', 'time']
+    }
+  }
+}
+</script>
+
+<!-- form-input-2.vue -->
+```
+:::
+
+> Note: The `range` and `color` input types are currently not supported.
+
+## Sizing
+
+Using the `size` prop, you can change the input size as small (`sm`) or large (`lg`).
+
+:::demo
+```html
+
+<div>
+    <d-form-input size="sm" type="text" placeholder="I'm small" class="mb-2"></d-form-input>
+    <d-form-input type="text" placeholder="I'm normal" class="mb-2"></d-form-input>
+    <d-form-input size="lg" type="text" placeholder="I'm large"></d-form-input>
+</div>
+
+<!-- form-input-3.vue -->
+```
+:::
+
+## Validation States
+
+Using the `state` prop on the `<d-form-input>` component you can control the input's validation state.
+
+The following input states are available:
+
+* `invalid` when the input is invalid.
+* `valid` when the use input is valid.
+* `null` when the input should display no validation state (neutral).
+
+:::demo
+```html
+
+<div>
+    <d-form-input type="text" placeholder="I'm Neutral" class="mb-2"></d-form-input>
+    <d-form-input :state="true" type="text" placeholder="I'm Valid" class="mb-2"></d-form-input>
+    <d-form-input state="invalid" type="text" placeholder="I'm Invalid"></d-form-input>
+</div>
+
+<!-- form-input-4.vue -->
+```
+:::
+
+## Readonly & Plaintext
+
+You can also display the input as readonly or plain text using the `readonly` and `plaintext` props.

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

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

package/src/components/form-radio/FormRadio.vue

@@ -0,0 +1,155 @@
+<template>
+    <label :class="[
+        'custom-control',
+        'custom-radio',
+        inline ? 'custom-control-inline' : '',
+        computedStateClass
+    ]">
+        <input type="radio"
+            ref="check"
+            autocomplete="off"
+            :aria-required="required ? 'true' : null"
+            :id="computedID"
+            :class="[ 'custom-control-input', computedStateClass ]"
+            :name="name"
+            :value="value"
+            :disabled="disabled"
+            :required="name && required"
+            v-model="computedLocalChecked"
+            @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-radio',
+    model: {
+        prop: 'checked',
+        event: 'input'
+    },
+    data() {
+        return {
+            localChecked: this.checked
+        }
+    },
+    props: {
+        /**
+         * The radio input name.
+         */
+        name: {
+            type: String
+        },
+        /**
+         * The radio input ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The radio input value.
+         */
+        value: {
+            default: true
+        },
+        /**
+         * The disabled state.
+         */
+        disabled: {
+            type: Boolean
+        },
+        /**
+         * The required state.
+         */
+        required: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The checked state.
+         */
+        checked: {
+            type: [Boolean, String, Array]
+        },
+        /**
+         * The validation state.
+         */
+        state: {
+            type: [Boolean, String],
+            default: null
+        },
+        /**
+         * Whether the radio should be displayed inline, or not.
+         */
+        inline: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        computedLocalChecked: {
+            get() {
+                return this.localChecked
+            },
+
+            set(val) {
+                this.localChecked = val
+            }
+        },
+        computedID() {
+            return this.id || `dr-radio-${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: {
+        computedLocalChecked(newVal, oldVal) {
+            if (newVal == oldVal) {
+                return
+            }
+
+            this.$emit('input', newVal)
+        },
+
+        checked(newVal, oldVal) {
+            if (newVal == oldVal) {
+                return
+            }
+
+            this.computedLocalChecked = newVal
+        },
+    },
+
+    methods: {
+        handleChange(e) {
+            this.$emit('change', e.target.checked ? this.value : null)
+        }
+    }
+}
+</script>

package/src/components/form-radio/README.md

@@ -0,0 +1,61 @@
+# Form Radio
+
+The `<d-form-radio>` component is a wrapper over Bootstrap's [custom radio component](https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios-1).
+
+## Alias
+
+The `<d-form-radio>` component is also available as `<d-radio>`.
+
+## Basic Demo
+
+:::demo
+```html
+<template>
+    <div>
+        <label>Select your favorite fruits:</label>
+        <d-form-radio v-model="selected" value="orange">Orange</d-form-radio>
+        <d-form-radio v-model="selected" value="lemon">Lemon</d-form-radio>
+        <d-form-radio v-model="selected" value="kiwi">Kiwi</d-form-radio>
+        <p>Selected Status: {{ selected }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selected: 'orange'
+        }
+    }
+}
+</script>
+
+<!-- radio-1.vue -->
+```
+:::
+
+## Inline Display
+
+Radios can also be displayed inline using the `inline` prop.
+
+:::demo
+```html
+
+<div>
+    <label class="d-block">Select your favorite sport</label>
+    <d-form-radio inline name="fav_sport" value="basketball">Basketball</d-form-radio>
+    <d-form-radio inline name="fav_sport" value="football">Football</d-form-radio>
+    <d-form-radio inline name="fav_sport" value="tennis">Tennis</d-form-radio>
+</div>
+
+<!-- radio-2.vue -->
+```
+:::
+
+## Missing Features
+
+The following radio features are currently not supported, but available on the [roadmap](/roadmap).
+
+* Possibility of creating plain radios.
+* Radio groups.
+* Button style radios.

package/src/components/form-radio/index.js

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