goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/InputTags.md

@@ -1,51 +1,51 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <input-tags class="w-6-12" v-model="model" v-bind="props"></input-tags>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: ['hello', 'world'],
-            props: {
-                placeholder: 'Add a tag...',
-            },
-        };
-    },
-};
-</script>
-```
-
-Advanced example. Slots
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <input-tags class="w-6-12" v-model="model" v-bind="props">
-            <template #tag="{ tag, remove }">
-                <code class="pull-left mar-1">
-                    {{ tag }} <b class="cursor-pointer" @click="remove(tag)">[x]</b>
-                </code>
-            </template>
-        </input-tags>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: ['hello', 'world'],
-            props: {
-                placeholder: 'Add a tag...',
-            },
-        };
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <input-tags class="w-6-12" v-model="model" v-bind="props"></input-tags>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: ['hello', 'world'],
+            props: {
+                placeholder: 'Add a tag...',
+            },
+        };
+    },
+};
+</script>
+```
+
+Advanced example. Slots
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <input-tags class="w-6-12" v-model="model" v-bind="props">
+            <template #tag="{ tag, remove }">
+                <code class="pull-left mar-1">
+                    {{ tag }} <b class="cursor-pointer" @click="remove(tag)">[x]</b>
+                </code>
+            </template>
+        </input-tags>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: ['hello', 'world'],
+            props: {
+                placeholder: 'Add a tag...',
+            },
+        };
+    },
+};
+</script>
+```

package/src/components/ui/InputTags.vue

@@ -1,184 +1,184 @@
-<template>
-    <div class="ui-input-tags form-elem" :class="cssClass" @focus="onRootFocus" tabindex="0">
-        <div class="ui-input-tags-tags" v-if="value.length">
-            <!-- 
-            @slot Tag slot
-            @binding {String} tag       tag
-            @binding {Function} remove  remove tag function(tag)
-            -->
-            <slot name="tag" v-for="tag in value" v-bind="{ tag, remove: removeTag }">
-                <ui-badge
-                    class="ui-input-tags-badge mar-none mar-right-2 mar-bot-2 pull-left"
-                    theme="primary"
-                    size="small"
-                    :key="tag"
-                    removable
-                    @remove="removeTag(tag)"
-                >
-                    <span>{{ tag }}</span>
-                </ui-badge>
-            </slot>
-        </div>
-        <!-- 
-        @slot Custom input slot
-        @binding {String} id            input id attribute value
-        @binding {String} value         input value
-        @binding {Function} addTag      function to add tag
-        @binding {Function} setValue    function to set the 'value' function(value)
-        @binding {Object} inputBinds    input props (use v-bind)
-        @binding {Object} inputEvents   input events (use v-on)
-        -->
-        <slot
-            name="input"
-            v-bind="{
-                id: inputId,
-                value: newTag,
-                addTag,
-                setValue: setNewTag,
-                inputBinds,
-                inputEvents,
-            }"
-        >
-            <input
-                :id="inputId"
-                class="ui-input-tags-input w-100"
-                :class="{ 'mar-top-2': value.length }"
-                type="text"
-                tabindex="-1"
-                :value="newTag"
-                v-bind="inputBinds"
-                v-on="inputEvents"
-            />
-        </slot>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-input-tags {
-    display: inline-flex;
-    flex-wrap: wrap;
-    &-input {
-        line-height: 1.5;
-        border: none;
-        padding: 0;
-        color: inherit;
-        background: transparent;
-        outline: none;
-    }
-    &-tags {
-        max-width: 100%;
-    }
-    &-badge {
-        white-space: normal;
-        overflow-wrap: break-word;
-        word-break: break-word;
-    }
-}
-</style>
-<script>
-import UiBadge from './Badge.vue';
-import FormComponent from './utils/FormComponent';
-
-export default {
-    components: {
-        UiBadge,
-    },
-    mixins: [FormComponent],
-    props: {
-        /**
-         * @model
-         */
-        value: {
-            type: Array,
-            default() {
-                return [];
-            },
-        },
-        /**
-         * Filters new values before adding function(values:Array, valuesNew:Array):Array
-         */
-        valueFilter: {
-            type: Function,
-            default(values, valuesNew) {
-                return valuesNew.filter((v, i, a) => a.indexOf(v) === i && !values.includes(v));
-            },
-        },
-        /**
-         * Delimiter
-         */
-        delimiter: {
-            type: String,
-            default: ',',
-        },
-    },
-    data() {
-        return {
-            newTag: '',
-            inputBinds: {
-                placeholder: this.placeholder,
-                readonly: this.readonly,
-            },
-            inputEvents: {
-                input: this.onInputInput,
-                focus: this.onInputFocus,
-                blur: this.onInputBlur,
-                keyup: e => e.key == 'Enter' && this.onInputEnter(e),
-            },
-        };
-    },
-    methods: {
-        setNewTag(value) {
-            this.newTag = value;
-        },
-        addTag() {
-            let newTags = this.valueFilter(
-                this.value,
-                this.newTag.split(this.delimiter).map(tag => tag.trim())
-            );
-            if (!newTags.length) {
-                return;
-            }
-            let tags = [...this.value, ...newTags];
-            /**
-             * Input event
-             * @property {Array} tags
-             */
-            this.$emit('input', tags);
-            /**
-             * Change event
-             * @property {Array} tags
-             */
-            this.$emit('change', tags);
-            this.newTag = '';
-        },
-        removeTag(tag) {
-            let tags = this.value.filter(t => t !== tag);
-            /**
-             * Input event
-             * @property {Array} tags
-             */
-            this.$emit('input', tags);
-            /**
-             * Change event
-             * @property {Array} tags
-             */
-            this.$emit('change', tags);
-        },
-        onRootFocus(e) {
-            let input = this.getInputRef();
-            input && input.focus();
-        },
-        onInputInput(e) {
-            this.newTag = e.target.value;
-        },
-        onInputFocus(e) {
-            this.rootHasFocus = true;
-        },
-        onInputBlur(e) {
-            this.rootHasFocus = false;
-        },
-        onInputEnter(e) {
-            this.addTag();
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-input-tags form-elem" :class="cssClass" @focus="onRootFocus" tabindex="0">
+        <div class="ui-input-tags-tags" v-if="value.length">
+            <!-- 
+            @slot Tag slot
+            @binding {String} tag       tag
+            @binding {Function} remove  remove tag function(tag)
+            -->
+            <slot name="tag" v-for="tag in value" v-bind="{ tag, remove: removeTag }">
+                <ui-badge
+                    class="ui-input-tags-badge mar-none mar-right-2 mar-bot-2 pull-left"
+                    theme="primary"
+                    size="small"
+                    :key="tag"
+                    removable
+                    @remove="removeTag(tag)"
+                >
+                    <span>{{ tag }}</span>
+                </ui-badge>
+            </slot>
+        </div>
+        <!-- 
+        @slot Custom input slot
+        @binding {String} id            input id attribute value
+        @binding {String} value         input value
+        @binding {Function} addTag      function to add tag
+        @binding {Function} setValue    function to set the 'value' function(value)
+        @binding {Object} inputBinds    input props (use v-bind)
+        @binding {Object} inputEvents   input events (use v-on)
+        -->
+        <slot
+            name="input"
+            v-bind="{
+                id: inputId,
+                value: newTag,
+                addTag,
+                setValue: setNewTag,
+                inputBinds,
+                inputEvents,
+            }"
+        >
+            <input
+                :id="inputId"
+                class="ui-input-tags-input w-100"
+                :class="{ 'mar-top-2': value.length }"
+                type="text"
+                tabindex="-1"
+                :value="newTag"
+                v-bind="inputBinds"
+                v-on="inputEvents"
+            />
+        </slot>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-input-tags {
+    display: inline-flex;
+    flex-wrap: wrap;
+    &-input {
+        line-height: 1.5;
+        border: none;
+        padding: 0;
+        color: inherit;
+        background: transparent;
+        outline: none;
+    }
+    &-tags {
+        max-width: 100%;
+    }
+    &-badge {
+        white-space: normal;
+        overflow-wrap: break-word;
+        word-break: break-word;
+    }
+}
+</style>
+<script>
+import UiBadge from './Badge.vue';
+import FormComponent from './utils/FormComponent';
+
+export default {
+    components: {
+        UiBadge,
+    },
+    mixins: [FormComponent],
+    props: {
+        /**
+         * @model
+         */
+        value: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        /**
+         * Filters new values before adding function(values:Array, valuesNew:Array):Array
+         */
+        valueFilter: {
+            type: Function,
+            default(values, valuesNew) {
+                return valuesNew.filter((v, i, a) => a.indexOf(v) === i && !values.includes(v));
+            },
+        },
+        /**
+         * Delimiter
+         */
+        delimiter: {
+            type: String,
+            default: ',',
+        },
+    },
+    data() {
+        return {
+            newTag: '',
+            inputBinds: {
+                placeholder: this.placeholder,
+                readonly: this.readonly,
+            },
+            inputEvents: {
+                input: this.onInputInput,
+                focus: this.onInputFocus,
+                blur: this.onInputBlur,
+                keyup: e => e.key == 'Enter' && this.onInputEnter(e),
+            },
+        };
+    },
+    methods: {
+        setNewTag(value) {
+            this.newTag = value;
+        },
+        addTag() {
+            let newTags = this.valueFilter(
+                this.value,
+                this.newTag.split(this.delimiter).map(tag => tag.trim())
+            );
+            if (!newTags.length) {
+                return;
+            }
+            let tags = [...this.value, ...newTags];
+            /**
+             * Input event
+             * @property {Array} tags
+             */
+            this.$emit('input', tags);
+            /**
+             * Change event
+             * @property {Array} tags
+             */
+            this.$emit('change', tags);
+            this.newTag = '';
+        },
+        removeTag(tag) {
+            let tags = this.value.filter(t => t !== tag);
+            /**
+             * Input event
+             * @property {Array} tags
+             */
+            this.$emit('input', tags);
+            /**
+             * Change event
+             * @property {Array} tags
+             */
+            this.$emit('change', tags);
+        },
+        onRootFocus(e) {
+            let input = this.getInputRef();
+            input && input.focus();
+        },
+        onInputInput(e) {
+            this.newTag = e.target.value;
+        },
+        onInputFocus(e) {
+            this.rootHasFocus = true;
+        },
+        onInputBlur(e) {
+            this.rootHasFocus = false;
+        },
+        onInputEnter(e) {
+            this.addTag();
+        },
+    },
+};
+</script>

package/src/components/ui/InputTimePicker.md

@@ -1,25 +1,25 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <input-time-picker class="w-f1" v-model="model" v-bind="props"></input-time-picker>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: '16:45',
-            props: {
-                placeholder: 'Pick a time',
-                timepicker: {
-                    step: { h: 1, m: 5 },
-                },
-            },
-        };
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <input-time-picker class="w-f1" v-model="model" v-bind="props"></input-time-picker>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: '16:45',
+            props: {
+                placeholder: 'Pick a time',
+                timepicker: {
+                    step: { h: 1, m: 5 },
+                },
+            },
+        };
+    },
+};
+</script>
+```