goodteditor-ui 1.0.21 → 1.0.23

package/src/components/ui/InputColorPicker.md

@@ -1,51 +1,51 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <input-color-picker class="w-6-12" v-model="model" v-bind="props"></input-color-picker>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: '#f00',
-            props: {
-                placeholder: 'Pick a color',
-            },
-        };
-    },
-};
-</script>
-```
-
-Advanced example. Slots
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <input-color-picker class="w-6-12" v-model="model" v-bind="props">
-            <template #icon="{ toggle, value }">
-                <div class="icon cursor-pointer" @click="toggle">
-                    <i class="mdi mdi-palette mdi-18px"></i>
-                </div>
-            </template>
-        </input-color-picker>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: '#f00',
-            props: {
-                placeholder: 'Pick a color',
-            },
-        };
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <input-color-picker class="w-6-12" v-model="model" v-bind="props"></input-color-picker>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: '#f00',
+            props: {
+                placeholder: 'Pick a color',
+            },
+        };
+    },
+};
+</script>
+```
+
+Advanced example. Slots
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <input-color-picker class="w-6-12" v-model="model" v-bind="props">
+            <template #icon="{ toggle, value }">
+                <div class="icon cursor-pointer" @click="toggle">
+                    <i class="mdi mdi-palette mdi-18px"></i>
+                </div>
+            </template>
+        </input-color-picker>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: '#f00',
+            props: {
+                placeholder: 'Pick a color',
+            },
+        };
+    },
+};
+</script>
+```

package/src/components/ui/InputColorPicker.vue

@@ -1,151 +1,151 @@
-<template>
-    <div
-        class="ui-input-color-picker form-elem"
-        :class="cssClass"
-        @focus="onRootFocus"
-        tabindex="0"
-        :data-popover="popoverTargetId"
-    >
-        <div class="ui-input-color-picker-wrapper d-flex flex-v-center w-100">
-            <div style="flex: 1 0 0">
-                <!-- 
-                @slot Custom input slot
-                @binding {String} id    input id attribute value
-                @binding {String} value    input 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, inputBinds, inputEvents }">
-                    <input
-                        :id="inputId"
-                        class="ui-input-color-picker-input w-100"
-                        type="text"
-                        :value="value"
-                        v-bind="inputBinds"
-                        v-on="inputEvents"
-                    />
-                </slot>
-            </div>
-            <!-- 
-            @slot Icon slot
-            @binding {String} value     current value
-            @binding {Function} toggle  function that toggles the color picker
-            -->
-            <slot name="icon" v-bind="{ value, toggle: togglePopover }">
-                <div
-                    class="ui-input-color-picker-icon-preview mar-left-2 cursor-pointer"
-                    :style="{ background: value }"
-                    @click="togglePopover"
-                ></div>
-            </slot>
-        </div>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
-            <color-picker
-                class="ui-input-color-picker-cp pull-left"
-                v-bind="{
-                    value,
-                    colorsDefault,
-                    showSubmit: true,
-                }"
-                @submit="onSubmit"
-            ></color-picker>
-        </ui-popover>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-input-color-picker {
-    display: inline-flex;
-    &-wrapper {
-        display: flex;
-    }
-    &-icon-preview {
-        width: 1em;
-        height: 1em;
-        border: 1px solid var(--color-border);
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAAA3NCSVQICAjb4U/gAAAABlBMVEXM1dv///9zs4+jAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJljYD/AgIx+MCAjAHyDCLzvUxo8AAAAAElFTkSuQmCC');
-    }
-    &-input {
-        border: none;
-        margin: 0;
-        padding: 0;
-        line-height: 1.5;
-        color: inherit;
-        background: transparent;
-        outline: none;
-    }
-}
-</style>
-<script>
-import ColorPicker from './ColorPicker.vue';
-import UiPopover from './Popover.vue';
-import FormComponent from './utils/FormComponent';
-import WithPopover from './utils/WithPopover';
-
-export default {
-    mixins: [FormComponent, WithPopover],
-    components: { ColorPicker, UiPopover },
-    props: {
-        /**
-         * Whether the input is editable
-         */
-        editable: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Default colors palette
-         */
-        colorsDefault: {
-            type: Array,
-            default() {
-                return [];
-            },
-        },
-    },
-    data() {
-        return {
-            inputBinds: {
-                placeholder: this.placeholder,
-                readonly: this.readonly || !this.editable,
-            },
-            inputEvents: {
-                change: this.onInputChange,
-                focus: this.onInputFocus,
-                blur: this.onInputBlur,
-            },
-        };
-    },
-    methods: {
-        changeColor(val) {
-            /**
-             * Input event
-             * @property {String} color
-             */
-            this.$emit('input', val);
-            /**
-             * Change event
-             * @property {String} color
-             */
-            this.$emit('change', val);
-        },
-        onRootFocus(e) {
-            let input = this.getInputRef();
-            input && input.focus();
-        },
-        onInputChange(e) {
-            this.changeColor(e.target.value);
-        },
-        onInputFocus(e) {
-            this.rootHasFocus = true;
-        },
-        onInputBlur(e) {
-            this.rootHasFocus = false;
-        },
-        onSubmit({ rgba }) {
-            let { r, g, b, a } = rgba;
-            this.changeColor(`rgba(${r}, ${g}, ${b}, ${a})`);
-            this.popoverShow = false;
-        },
-    },
-};
-</script>
+<template>
+    <div
+        class="ui-input-color-picker form-elem"
+        :class="cssClass"
+        @focus="onRootFocus"
+        tabindex="0"
+        :data-popover="popoverTargetId"
+    >
+        <div class="ui-input-color-picker-wrapper d-flex flex-v-center w-100">
+            <div style="flex: 1 0 0">
+                <!-- 
+                @slot Custom input slot
+                @binding {String} id    input id attribute value
+                @binding {String} value    input 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, inputBinds, inputEvents }">
+                    <input
+                        :id="inputId"
+                        class="ui-input-color-picker-input w-100"
+                        type="text"
+                        :value="value"
+                        v-bind="inputBinds"
+                        v-on="inputEvents"
+                    />
+                </slot>
+            </div>
+            <!-- 
+            @slot Icon slot
+            @binding {String} value     current value
+            @binding {Function} toggle  function that toggles the color picker
+            -->
+            <slot name="icon" v-bind="{ value, toggle: togglePopover }">
+                <div
+                    class="ui-input-color-picker-icon-preview mar-left-2 cursor-pointer"
+                    :style="{ background: value }"
+                    @click="togglePopover"
+                ></div>
+            </slot>
+        </div>
+        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <color-picker
+                class="ui-input-color-picker-cp pull-left"
+                v-bind="{
+                    value,
+                    colorsDefault,
+                    showSubmit: true,
+                }"
+                @submit="onSubmit"
+            ></color-picker>
+        </ui-popover>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-input-color-picker {
+    display: inline-flex;
+    &-wrapper {
+        display: flex;
+    }
+    &-icon-preview {
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--color-border);
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAAA3NCSVQICAjb4U/gAAAABlBMVEXM1dv///9zs4+jAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJljYD/AgIx+MCAjAHyDCLzvUxo8AAAAAElFTkSuQmCC');
+    }
+    &-input {
+        border: none;
+        margin: 0;
+        padding: 0;
+        line-height: 1.5;
+        color: inherit;
+        background: transparent;
+        outline: none;
+    }
+}
+</style>
+<script>
+import ColorPicker from './ColorPicker.vue';
+import UiPopover from './Popover.vue';
+import FormComponent from './utils/FormComponent';
+import WithPopover from './utils/WithPopover';
+
+export default {
+    mixins: [FormComponent, WithPopover],
+    components: { ColorPicker, UiPopover },
+    props: {
+        /**
+         * Whether the input is editable
+         */
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Default colors palette
+         */
+        colorsDefault: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+    },
+    data() {
+        return {
+            inputBinds: {
+                placeholder: this.placeholder,
+                readonly: this.readonly || !this.editable,
+            },
+            inputEvents: {
+                change: this.onInputChange,
+                focus: this.onInputFocus,
+                blur: this.onInputBlur,
+            },
+        };
+    },
+    methods: {
+        changeColor(val) {
+            /**
+             * Input event
+             * @property {String} color
+             */
+            this.$emit('input', val);
+            /**
+             * Change event
+             * @property {String} color
+             */
+            this.$emit('change', val);
+        },
+        onRootFocus(e) {
+            let input = this.getInputRef();
+            input && input.focus();
+        },
+        onInputChange(e) {
+            this.changeColor(e.target.value);
+        },
+        onInputFocus(e) {
+            this.rootHasFocus = true;
+        },
+        onInputBlur(e) {
+            this.rootHasFocus = false;
+        },
+        onSubmit({ rgba }) {
+            let { r, g, b, a } = rgba;
+            this.changeColor(`rgba(${r}, ${g}, ${b}, ${a})`);
+            this.popoverShow = false;
+        },
+    },
+};
+</script>

package/src/components/ui/InputDatePicker.md

@@ -1,121 +1,121 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <div class="p">
-            <label>
-                <input
-                    class="checkbox checkbox-small"
-                    type="checkbox"
-                    v-model="props.datepicker.range"
-                /><i></i>
-                <span class="pad-left-2 v-mid">range</span>
-            </label>
-        </div>
-        <input-date-picker class="w-6-12" v-model="model" v-bind="props"></input-date-picker>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: '',
-            props: {
-                placeholder: 'Pick dates',
-                datepicker: {
-                    range: false,
-                },
-            },
-        };
-    },
-};
-</script>
-```
-
-Advanced example. Custom format, slots etc
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <p>
-            <input-date-picker class="w-6-12" v-model="model" v-bind="props" v-on="events">
-                <template #clear="{ clear }">
-                    <b class="text-xsmall cursor-pointer color-red mar-h-2" @click="clear">clear</b>
-                </template>
-                <template #icon="{ toggle }">
-                    <b class="text-xsmall cursor-pointer" @click="toggle">DP</b>
-                </template>
-                <template #dp-left>
-                    <div class="mar-l1">
-                        <p v-for="n in offsets" :key="n">
-                            <span
-                                class="btn btn-small d-flex"
-                                :class="[offset == n ? 'btn-primary' : 'btn-ghost']"
-                                @click="setOffset(n)"
-                            >
-                                {{ n }} d
-                            </span>
-                        </p>
-                    </div>
-                </template>
-            </input-date-picker>
-        </p>
-        <pre style="height:8rem">{{ log }}</pre>
-    </div>
-</template>
-<script>
-let dayjs = window.dayjs;
-dayjs.locale(window.dayjs_locale_ru);
-dayjs.extend(window.dayjs_plugin_customParseFormat);
-
-let format = 'DD MMM YYYY';
-
-export default {
-    data() {
-        return {
-            log: '',
-            offset: 0,
-            offsets: [3, 7, 14],
-            model: [],
-            props: {
-                placeholder: 'Pick a date',
-                toDate(str) {
-                    return str ? dayjs(str, format).toDate() : null;
-                },
-                toValue(date) {
-                    return dayjs(date).format(format);
-                },
-                datepicker: {
-                    range: true,
-                },
-            },
-            events: {
-                clear: this.onClear,
-                'set-date': this.onSetDate,
-            },
-        };
-    },
-    methods: {
-        onClear() {
-            this.log = `event:clear\n` + this.log;
-        },
-        onSetDate(d) {
-            let { toValue } = this.props;
-            this.log = `event:set-date ${d}\n` + this.log;
-            if (this.offset) {
-                let d2 = dayjs(d)
-                    .add(this.offset, 'd')
-                    .toDate();
-                this.model = [toValue(d), toValue(d2)];
-            }
-        },
-        setOffset(n) {
-            this.offset = this.offset == n ? 0 : n;
-        },
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <div class="p">
+            <label>
+                <input
+                    class="checkbox checkbox-small"
+                    type="checkbox"
+                    v-model="props.datepicker.range"
+                /><i></i>
+                <span class="pad-left-2 v-mid">range</span>
+            </label>
+        </div>
+        <input-date-picker class="w-6-12" v-model="model" v-bind="props"></input-date-picker>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: '',
+            props: {
+                placeholder: 'Pick dates',
+                datepicker: {
+                    range: false,
+                },
+            },
+        };
+    },
+};
+</script>
+```
+
+Advanced example. Custom format, slots etc
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <p>
+            <input-date-picker class="w-6-12" v-model="model" v-bind="props" v-on="events">
+                <template #clear="{ clear }">
+                    <b class="text-xsmall cursor-pointer color-red mar-h-2" @click="clear">clear</b>
+                </template>
+                <template #icon="{ toggle }">
+                    <b class="text-xsmall cursor-pointer" @click="toggle">DP</b>
+                </template>
+                <template #dp-left>
+                    <div class="mar-l1">
+                        <p v-for="n in offsets" :key="n">
+                            <span
+                                class="btn btn-small d-flex"
+                                :class="[offset == n ? 'btn-primary' : 'btn-ghost']"
+                                @click="setOffset(n)"
+                            >
+                                {{ n }} d
+                            </span>
+                        </p>
+                    </div>
+                </template>
+            </input-date-picker>
+        </p>
+        <pre style="height:8rem">{{ log }}</pre>
+    </div>
+</template>
+<script>
+let dayjs = window.dayjs;
+dayjs.locale(window.dayjs_locale_ru);
+dayjs.extend(window.dayjs_plugin_customParseFormat);
+
+let format = 'DD MMM YYYY';
+
+export default {
+    data() {
+        return {
+            log: '',
+            offset: 0,
+            offsets: [3, 7, 14],
+            model: [],
+            props: {
+                placeholder: 'Pick a date',
+                toDate(str) {
+                    return str ? dayjs(str, format).toDate() : null;
+                },
+                toValue(date) {
+                    return dayjs(date).format(format);
+                },
+                datepicker: {
+                    range: true,
+                },
+            },
+            events: {
+                clear: this.onClear,
+                'set-date': this.onSetDate,
+            },
+        };
+    },
+    methods: {
+        onClear() {
+            this.log = `event:clear\n` + this.log;
+        },
+        onSetDate(d) {
+            let { toValue } = this.props;
+            this.log = `event:set-date ${d}\n` + this.log;
+            if (this.offset) {
+                let d2 = dayjs(d)
+                    .add(this.offset, 'd')
+                    .toDate();
+                this.model = [toValue(d), toValue(d2)];
+            }
+        },
+        setOffset(n) {
+            this.offset = this.offset == n ? 0 : n;
+        },
+    },
+};
+</script>
+```