@gorse/shards-vue 1.0.8

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

@@ -0,0 +1,74 @@
+# Form Textarea
+
+The `<d-form-textarea>` component allows you to create multi-line text inputs that adjusts its height (text rows) automatically to fit the content. You can also limit the number of rows displayed using the `max-rows` prop. If you'd like to force the textarea element to a fixed height, you can use both `rows` and `max-rows` props simultaneously.
+
+## Alias
+
+The `<d-form-textarea>` component is also available as `<d-textarea>`.
+
+## Basic Example
+
+:::demo
+```html
+<template>
+    <div>
+        <d-form-textarea v-model="text"
+                        placeholder="Enter something"
+                        :rows="3"
+                        :max-rows="6">
+        </d-form-textarea>
+        <span v-if="text" class="d-block my-2">🤔 So you're saying: {{ text }}</span>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            text: ''
+        }
+    }
+}
+</script>
+
+<!-- textarea-1.vue -->
+```
+:::
+
+## Validation
+
+Using the `state` prop on the `<d-form-textarea>` component you can control the textarea's validation state.
+
+The following textarea states are available:
+
+* `invalid` when the textarea is invalid.
+* `valid` when the use textarea is valid.
+* `null` when the textarea should display no validation state (neutral).
+
+:::demo
+```html
+<template>
+    <div>
+        <d-form-textarea state="valid"
+                        v-model="text"
+                        placeholder="You can start your novel right here..."
+                        :rows="3"
+                        :max-rows="6">
+        </d-form-textarea>
+        <span v-if="text" class="d-block my-2">🤔 So you're saying: {{ text }}</span>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            text: ''
+        }
+    }
+}
+</script>
+
+<!-- textarea-2.vue -->
+```
+:::

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

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

package/src/components/image/Image.vue

@@ -0,0 +1,123 @@
+<template>
+    <img :src="src"
+        :alt="alt"
+        :width="computedWidth"
+        :height="computedHeight"
+        :class="[
+            thumbnail ? 'img-thumbnail' : '',
+            fluid || fluidGrow ? 'img-fluid' : '',
+            fluidGrow ? 'w-100' : '',
+            rounded ? 'rounded' : '',
+            center ? 'd-block' : '',
+            Boolean(computedAlign) ? computedAlign : '',
+        ]"
+        />
+</template>
+
+<script>
+export default {
+    name: 'd-image',
+    props: {
+        /**
+         * The image source.
+         */
+        src: {
+            type: String,
+            default: null
+        },
+        /**
+         * The image alternative text.
+         */
+        alt: {
+            type: String,
+            default: null
+        },
+        /**
+         * The image width.
+         */
+        width: {
+            type: [Number, String],
+            default: null
+        },
+        /**
+         * The image height.
+         */
+        height: {
+            type: [Number, String],
+            default: null
+        },
+        /**
+         * Whether the image should be fluid, or not.
+         */
+        fluid: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the image should take up the entire space (in width).
+         */
+        fluidGrow: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the image should be rounded.
+         */
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the image should be displayed as a thumbnail.
+         */
+        thumbnail: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the image should be floated to the left.
+         */
+        left: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the image should be floated to the right.
+         */
+        right: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether the image should be centered.
+         */
+        center: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        computedWidth() {
+            return parseInt(this.width, 10) || null
+        },
+        computedHeight() {
+            return parseInt(this.height, 10) || null
+        },
+        computedAlign() {
+            if (this.center) {
+                return 'mx-auto'
+            }
+
+            if (this.left) {
+                return 'float-left'
+            }
+
+            if (this.right) {
+                return 'float-right'
+            }
+
+            return null
+        }
+    }
+}
+</script>

package/src/components/image/README.md

@@ -0,0 +1,32 @@
+# Images
+
+The `<d-image>` component provides an easy way of adding responsive behavior to your images. Other than this, the component also provides easy-to-use handles for thumbnail styling, alignment and rounded images. 
+
+## Alias
+
+The `<d-image>` component is also available as `<d-img>`.
+
+## Basic Example
+
+:::demo
+```html
+
+<d-img src="https://placeimg.com/640/380/any" fluid />
+
+<!-- image-1.vue -->
+```
+:::
+
+
+## Thumbnails
+
+Using the `thumbnail` prop you can turn your images into thumbnails.
+
+:::demo
+```html
+
+<d-img fluid thumbnail src="https://placeimg.com/200/200/any" />
+
+<!-- image-2.vue -->
+```
+:::

package/src/components/image/index.js

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

package/src/components/index.js

@@ -0,0 +1,63 @@
+import Alert from './alert'
+import Badge from './badge'
+import Breadcrumb from './breadcrumb'
+import Button from './button'
+import ButtonGroup from './button-group'
+import ButtonToolbar from './button-toolbar'
+import Card from './card'
+import Collapse from './collapse'
+import Layout from './container'
+import Datepicker from './datepicker'
+import Dropdown from './dropdown'
+import Embed from './embed'
+import Form from './form'
+import FormCheckbox from './form-checkbox'
+import FormInput from './form-input'
+import FormRadio from './form-radio'
+import FormSelect from './form-select'
+import FormTextarea from './form-textarea'
+import Image from './image'
+import InputGroup from './input-group'
+import Link from './link'
+import ListGroup from './list-group'
+import Modal from './modal'
+import Nav from './nav'
+import Navbar from './navbar'
+import Popover from './popover'
+import Progress from './progress'
+import Slider from './slider'
+import Tabs from './tabs'
+import Tooltip from './tooltip'
+
+export {
+    Alert,
+    Badge,
+    Breadcrumb,
+    Button,
+    ButtonGroup,
+    ButtonToolbar,
+    Card,
+    Collapse,
+    Layout,
+    Datepicker,
+    Dropdown,
+    Embed,
+    Form,
+    FormCheckbox,
+    FormInput,
+    FormRadio,
+    FormSelect,
+    FormTextarea,
+    Image,
+    InputGroup,
+    Link,
+    ListGroup,
+    Modal,
+    Nav,
+    Navbar,
+    Popover,
+    Progress,
+    Slider,
+    Tabs,
+    Tooltip,
+}

package/src/components/input-group/InputGroup.vue

@@ -0,0 +1,125 @@
+<template>
+    <component :is="tag"
+        role="group"
+        :id="id"
+        :class="[
+            'input-group',
+            this.size ? `input-group-${this.size}` : '',
+            this.seamless ? 'input-group-seamless' : ''
+        ]">
+        <InputGroupAddon v-if="prependIsUsed" :prepend="Boolean(prepend || prependIsUsed)">
+            <InputGroupText v-if="Boolean(prepend)" v-html="prepend"  />
+            <slot name="prepend" />
+        </InputGroupAddon>
+        <slot />
+        <InputGroupAddon v-if="appendIsUsed" :append="Boolean(append || appendIsUsed)">
+            <InputGroupText v-if="Boolean(append)" v-html="append" />
+            <slot name="append" />
+        </InputGroupAddon>
+    </component>
+</template>
+
+<script>
+import InputGroupAddon from './InputGroupAddon.vue'
+import InputGroupText from './InputGroupText.vue'
+
+export default {
+    name: 'd-input-group',
+    components: {
+        InputGroupAddon,
+        InputGroupText
+    },
+    props: {
+        /**
+         * The element id.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The input group size.
+         */
+        size: {
+            type: String,
+            default: null,
+            validator: v => ['sm', 'lg', null].includes(v)
+        },
+        /**
+         * The prepend value.
+         */
+        prepend: {
+            type: String,
+            default: null
+        },
+        /**
+         * The append value.
+         */
+        append: {
+            type: String,
+            default: null
+        },
+        /**
+         * Whether it should be seamless, or not.
+         */
+        seamless: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        }
+    },
+    computed: {
+        appendIsUsed() {
+            return !!this.$slots['append'] || this.append
+        },
+        prependIsUsed() {
+            return !!this.$slots['prepend'] || this.prepend
+        }
+    }
+}
+</script>
+
+<style>
+.input-group input:focus {
+    position: relative;
+    z-index: 3;
+}
+
+/* Adjust dropdowns inside input groups. */
+.input-group > .input-group-prepend > .d-dropdown > .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.input-group > .input-group-append > .d-dropdown > .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+/* Datepickers */
+.vdp-datepicker:not(:last-child) input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.vdp-datepicker:not(:first-child) input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.vdp-datepicker + .vdp-datepicker {
+    margin-left: -1px;
+}
+
+.input-group-sm .vdp-datepicker input {
+    height: 1.9375rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+}
+</style>

package/src/components/input-group/InputGroupAddon.vue

@@ -0,0 +1,58 @@
+<template>
+    <component :is="tag"
+        :id="id"
+        :class="[ `input-group-${append ? 'append' : 'prepend'}` ]">
+        <InputGroupText v-if="isText">
+            <slot />
+        </InputGroupText>
+        <slot v-if="!isText" />
+    </component>
+</template>
+
+<script>
+import InputGroupText from './InputGroupText.vue'
+
+export default {
+    name: 'd-input-group-addon',
+    components: {
+        InputGroupText
+    },
+    props: {
+        /**
+         * The element ID.
+         */
+        id: {
+            type: String,
+            default: null
+        },
+        /**
+         * The element tag.
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * The append value.
+         */
+        append: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The prepend value.
+         */
+        prepend: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Whether is plain-text, or not.
+         */
+        isText: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/input-group/InputGroupText.vue

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