@gorse/shards-vue 1.0.8

package/src/components/form-select/FormSelect.vue

@@ -0,0 +1,246 @@
+<template>
+    <select ref="input"
+        :class="[
+            'form-control',
+            stateClass,
+            size ? `form-control-${size}` : null,
+            !multiple && selectSize > 1 ? null : 'custom-select'
+        ]"
+        v-model="localValue"
+        :id="computedID"
+        :name="name"
+        :multiple="multiple || null"
+        :size="(multiple || selectSize > 1) ? selectSize : null"
+        :disabled="disabled"
+        :required="required"
+        :aria-required="required ? true : null"
+        :aria-invalid="computedAriaInvalid"
+        @change="handleChange" >
+        <option v-for="(option, idx) in formOptions"
+            :key="`dr-opt-${idx}`"
+            :value="option.value"
+            :disabled="Boolean(option.disabled)">
+                {{ option.text }}
+        </option>
+        <slot />
+    </select>
+</template>
+
+<script>
+import { guid } from '../../utils'
+
+export default {
+    name: 'd-form-select',
+    props: {
+        /**
+         * The element ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The element name.
+         */
+        name: {
+            type: String
+        },
+        /**
+         * The select options.
+         */
+        options: {
+            type: [Array, Object],
+            default() {
+                return []
+            }
+        },
+        /**
+         * The select value.
+         */
+        value: {},
+        /**
+         * Whether it should allow multiple selections, or not.
+         */
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * How many options should be visible.
+         */
+        selectSize: {
+            type: Number,
+            default: 0
+        },
+        /**
+         * Controls the `aria-invalid` attribute.
+         */
+        ariaInvalid: {
+            type: [Boolean, String],
+            default: false
+        },
+        /**
+         * The value field.
+         */
+        valueField: {
+            type: String,
+            default: 'value'
+        },
+        /**
+         * The disabled field.
+         */
+        disabledField: {
+            type: String,
+            default: 'disabled'
+        },
+        /**
+         * The text field.
+         */
+        textField: {
+            type: String,
+            default: 'text'
+        },
+        /**
+         * The disabled state.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The required state.
+         */
+        required: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The validity state (invalid, valid, true, false).
+         */
+        state: {
+            type: [Boolean, String],
+            default: null,
+            validator: v => ['valid', 'invalid', true, false, null].includes(v)
+        },
+        /**
+         * The form control size (sm, lg).
+         */
+        size: {
+            type: String,
+            default: null,
+            validator: v => ['sm', 'lg', null].includes(v)
+        }
+    },
+    data() {
+        return {
+            localValue: this.value
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.localValue = newVal
+        },
+
+        localValue() {
+            this.$emit('input', this.localValue)
+        }
+    },
+    computed: {
+        computedID() {
+            return this.id || `dr-select-${guid()}`
+        },
+
+        computedState() {
+            if (this.state === true || this.state === 'valid') {
+                return true
+            }
+
+            if (this.state === false || this.state === 'invalid') {
+                return false
+            }
+
+            return null
+        },
+
+        stateClass() {
+            if (this.computedState === true) {
+                return 'is-valid'
+            } else if (this.computedState === false) {
+                return 'is-invalid'
+            }
+
+            return null
+        },
+
+        computedAriaInvalid() {
+            if (this.ariaInvalid === true || this.ariaInvalid === 'true') {
+                return 'true';
+            }
+
+            return this.stateClass == 'is-invalid' ? 'true' : null;
+        },
+
+        formOptions() {
+            let options = this.options || {}
+            const valueField = this.valueField || 'value'
+            const textField = this.textField || 'text'
+            const disabledField = this.disabledField || 'disabled'
+
+            // Parse array options
+            if (Array.isArray(options)) {
+                return options.map(option => {
+                    if (typeof option === 'object') {
+                        return {
+                            value: option[valueField],
+                            text: String(option[textField]),
+                            disabled: option[disabledField] || false
+                        }
+                    }
+
+                    return { text: String(option), value: option, disabled: false }
+                })
+
+            // Parse object options
+            } else if (typeof options === 'object') {
+                return Object.keys(options).map(key => {
+                    let option = options[key] || {}
+
+                    if (typeof option === 'object') {
+                        const value = option[valueField]
+                        const text = option[textField]
+
+                        return {
+                            text: typeof text === 'undefined' ? key : String(text),
+                            value: typeof value === 'undefined' ? key : value,
+                            disabled: option[disabledField] || false
+                        }
+                    }
+
+                    return { text: String(option), value: key, disabled: false }
+                })
+            }
+
+            return []
+        }
+    },
+    methods: {
+        handleChange(evt) {
+            const target = evt.target;
+            const selectedVal = Array.from(target.options)
+                                    .filter(opt => opt.selected)
+                                    .map(opt => '_value' in opt ? opt._value : opt.value)
+
+            this.localValue = target.multiple ? selectedVal : selectedVal[0];
+            this.$emit('change', this.localValue);
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .custom-select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+    }
+</style>

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

@@ -0,0 +1,180 @@
+# Form Select
+
+The `<d-form-select>` component is a wrapper over Bootstrap's [custom select component](https://getbootstrap.com/docs/4.1/components/forms/#select-menu).
+
+## Alias
+
+The `<d-form-select>` component is also available as `<d-select>`.
+
+## Basic Examples
+
+The easiest way of using the `<d-form-select>` component would be by using the `options` prop to pass an `Array` or `Object` for the options.
+
+:::demo
+```html
+<template>
+    <d-form-select v-model="selected" :options="options" />
+    Selected: {{ selected }}
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selected: null,
+            options: [
+                { value: null, text: 'Please select an option' },
+                { value: 'first', text: 'This is the first option' },
+                { value: 'second', text: 'This is the second option' },
+                { value: 'disabled', text: 'This one is disabled', disabled: true }
+            ]
+        }
+    }
+}
+</script>
+
+<!-- select-1.vue -->
+```
+:::
+
+## Sizing
+
+You can control the form-control's size using the `size` prop which accepts `sm` for small or `lg` for large.
+
+## Manual Options
+
+You can also define your options manually:
+
+:::demo
+```html
+<template>
+  <div>
+    <d-form-select v-model="selected" class="mb-3">
+      <option :value="null">Select an option</option>
+      <option value="pizza">🍕Pizza</option>
+      <option value="pasta" disabled>🍝 Pasta (disabled)</option>
+      <optgroup label="Breakfast">
+        <option value="eggs">🍳 Eggs</option>
+        <option value="bacon">🥓 Bacon</option>
+        <option value="tea">🍵 Tea</option>
+      </optgroup>
+    </d-form-select>
+    <div>Selected: {{ selected }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      selected: null
+    }
+  }
+}
+</script>
+
+<!-- select-2.vue -->
+```
+:::
+
+## Mixed Options
+
+You can also mix both using the `options` prop and usin manual options.
+
+:::demo
+```html
+<template>
+  <div>
+    <d-form-select v-model="selected" :options="options" class="mb-3">
+      <optgroup label="Breakfast">
+        <option value="eggs">🍳 Eggs</option>
+        <option value="bacon">🥓 Bacon</option>
+      </optgroup>
+    </d-form-select>
+    <div>Selected: {{ selected }}</div>
+  </div>
+</template> 
+
+<script>
+export default {
+  data () {
+    return {
+        selected: null,
+        options: [
+            { value: null, text: 'Select an option' },
+            { value: 'pizza', text: '🍕 Pizza' },
+            { value: 'pasta', text: '🍝 Pasta', disabled: true },
+        ]
+    }
+  }
+}
+</script>
+
+<!-- select-3.vue -->
+```
+:::
+
+## Select Sizing
+
+Using the `select-size` prop you can switch the custom select into a select list box. The prop accepts a number larger than 1 to control how many options are visible.
+
+:::demo
+```html
+<template>
+    <d-form-select v-model="selected" :options="options" :select-size="2" />
+    Selected: {{ selected }}
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selected: null,
+            options: [
+                { value: null, text: 'Please select an option' },
+                { value: 'first', text: 'This is the first option' },
+                { value: 'second', text: 'This is the second option' },
+                { value: 'disabled', text: 'This one is disabled', disabled: true }
+            ]
+        }
+    }
+}
+</script>
+
+<!-- select-4.vue -->
+```
+:::
+
+## Multiple Selections
+
+
+Using the `multiple` prop you can allow users to select multiple values from the `<d-form-select>` component.
+
+> Note: Using the `multiple` mode requires an `Array` reference for your `v-model`.
+
+:::demo
+```html
+<template>
+    <d-form-select multiple :select-size="4" v-model="selected" :options="options" />
+    Selected: {{ selected }}
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selected: [],
+            options: [
+                { value: 'first', text: 'This is the first option' },
+                { value: 'second', text: 'This is the second option' },
+                { value: 'third', text: 'This is the third option' },
+                { value: 'fourth', text: 'This is the fourth option' }
+            ]
+        }
+    }
+}
+</script>
+
+<!-- select-5.vue -->
+```
+:::

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

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

package/src/components/form-textarea/FormTextarea.vue

@@ -0,0 +1,250 @@
+<template>
+  <textarea
+    ref="input"
+    :class="[
+            plaintext ? 'form-control-plaintext' : 'form-control',
+            plaintext ? 'w-100' : '',
+            size ? `form-control-${this.size}` : null,
+            stateClass
+        ]"
+    :style="computedStyle"
+    :name="name"
+    :id="computedID"
+    :disabled="disabled"
+    :required="required"
+    :placeholder="placeholder"
+    :autocomplete="autocomplete"
+    :readonly="readonly || plaintext"
+    :rows="rows"
+    :wrap="wrap"
+    :aria-required="required ? 'true' : null"
+    :aria-invalid="computedAriaInvalid"
+    @input="handleInput"
+  ></textarea>
+</template>
+
+<script>
+import { guid, getComputedStyles, isVisible } from "../../utils";
+
+export default {
+  name: "d-form-textarea",
+  data() {
+    return {
+      localValue: this.value
+    };
+  },
+  props: {
+    /**
+     * The element name.
+     */
+    name: {
+      type: String,
+      default: null
+    },
+    /**
+     * The element ID.
+     */
+    id: {
+      type: String,
+      default: null
+    },
+    /**
+     * The disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    /**
+     * The required state.
+     */
+    required: {
+      type: Boolean,
+      required: false
+    },
+    /**
+     * The validity state.
+     */
+    state: {
+      type: [Boolean, String],
+      default: null,
+      validator: v => ["valid", "invalid", true, false, null].includes(v)
+    },
+    /**
+     * The element's size.
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: v => ["sm", "lg", null].includes(v)
+    },
+    /**
+     * The placeholder value.
+     */
+    placeholder: {
+      type: String,
+      default: null
+    },
+    /**
+     * The autocomplete status.
+     */
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    /**
+     * Whether the textarea should be read-only, or not.
+     */
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the textarea should be plain-text, or not.
+     */
+    plaintext: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The number of text rows.
+     */
+    rows: {
+      type: [Number, String],
+      default: null
+    },
+    /**
+     * The textarea wrap style.
+     */
+    wrap: {
+      type: String,
+      default: "soft",
+      validator: v => ["soft", "hard", "off"].includes(v)
+    },
+    /**
+     * Whether resizing should be disabled, or not.
+     */
+    noResize: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The maximum number of rows allowed.
+     */
+    maxRows: {
+      type: [Number, String],
+      default: null
+    }
+  },
+  mounted() {
+    this.el = this.$el;
+  },
+  computed: {
+    computedID() {
+      return this.id || `dr-textarea-${guid()}`;
+    },
+    computedStyle() {
+      return {
+        width: this.plaintext ? "100%" : null,
+        height: this.computedHeight,
+        resize: this.noResize ? "none" : null
+      };
+    },
+    computedMinRows() {
+      return Math.max(parseInt(this.rows, 10) || 2, 2);
+    },
+    computedMaxRows() {
+      return Math.max(this.computedMinRows, parseInt(this.maxRows, 10) || 0);
+    },
+    computedHeight() {
+      if (this.localValue === null || !isVisible(this.el)) {
+        return null;
+      }
+
+      const _height = this.el.style.height;
+
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.el.style.height = "inherit";
+
+      const computed = getComputedStyles(this.el);
+      const minHeight =
+        parseInt(computed.height, 10) || lineHeight * this.computedMinRows;
+
+      const lineHeight = parseFloat(computed.lineHeight);
+      const offset =
+        parseInt(computed.borderTopWidth, 10) +
+        parseInt(computed.paddingTop, 10) +
+        parseInt(computed.paddingBottom, 10) +
+        parseInt(computed.borderBottomWidth, 10);
+
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.el.style.height = _height;
+
+      const rows = Math.min(
+        Math.max(
+          (this.el.scrollHeight - offset) / lineHeight,
+          this.computedMinRows
+        ),
+        this.computedMaxRows - 1
+      );
+
+      if (!this.localValue.trim()) {
+        return `${minHeight}px`;
+      }
+
+      return `${Math.max(Math.ceil(rows * lineHeight + offset), minHeight)}px`;
+    },
+    computedAriaInvalid() {
+      // eslint-disable-next-line
+      if (!Boolean(this.ariaInvalid) || this.ariaInvalid === "false") {
+        return this.computedState === false ? "true" : null;
+      }
+
+      if (this.ariaInvalid === true) {
+        return "true";
+      }
+
+      return this.ariaInvalid;
+    },
+    computedState() {
+      if (this.state === true || this.state === "valid") {
+        return true;
+      }
+
+      if (this.state === false || this.state === "invalid") {
+        return false;
+      }
+
+      return null;
+    },
+    stateClass() {
+      if (this.computedState === true) {
+        return "is-valid";
+      }
+
+      if (this.computedState === false) {
+        return "is-invalid";
+      }
+
+      return null;
+    }
+  },
+  watch: {
+    value(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.localValue = newVal;
+      }
+    },
+    localValue(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.$emit("input", newVal);
+      }
+    }
+  },
+  methods: {
+    handleInput(e) {
+      this.localValue = e.target.value;
+    }
+  }
+};
+</script>