goodteditor-ui 1.0.23 → 1.0.24

package/src/components/ui/Collapse.md

@@ -1,90 +1,90 @@
-Example using <mark>header</mark> <mark>icon-\*</mark> slots
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-collapse v-bind="props">
-            <template #header="{ toggle }">
-                <h3 class="last cursor-pointer" @click="toggle">My header</h3>
-            </template>
-            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</div>
-        </ui-collapse>
-    </div>
-</template>
-<script>
-import UiCollapse from './Collapse.vue';
-
-export default {
-    components: { UiCollapse },
-    data() {
-        return {
-            props: {
-                visible: true,
-                icon: true,
-            },
-        };
-    },
-};
-</script>
-```
-
-Example using <mark>heading</mark> slot
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-collapse class="ui-collapse-custom" v-bind="props">
-            <template #heading="{ isOpen, toggle }">
-                <div
-                    class="ui-collapse-custom-heading pad-v-3 pad-h-5 cursor-pointer u-select-none pos-rel"
-                    :class="{ 'color-primary': isOpen, 'bg-primary-focus': isOpen }"
-                    @click="toggle"
-                >
-                    <div class="row row-collapse">
-                        <div class="col col-vmid">My header</div>
-                        <div class="col col-auto col-vmid">
-                            <div class="icon w-auto pull-left">
-                                <i
-                                    class="mdi mdi-chevron-right"
-                                    :class="{ 'mdi-rotate-90': isOpen }"
-                                ></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <div class="pad-5">
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
-                <p class="last">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.
-                </p>
-            </div>
-        </ui-collapse>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-collapse-custom {
-    overflow: hidden;
-    border-radius: var(--border-radius);
-    border: 1px solid var(--color-grey-light);
-}
-.ui-collapse-custom-heading {
-    transition: all 0.5s ease;
-}
-</style>
-<script>
-import UiCollapse from './Collapse.vue';
-
-export default {
-    components: { UiCollapse },
-    data() {
-        return {
-            props: {},
-        };
-    },
-};
-</script>
-```
+Example using <mark>header</mark> <mark>icon-\*</mark> slots
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-collapse v-bind="props">
+            <template #header="{ toggle }">
+                <h3 class="last cursor-pointer" @click="toggle">My header</h3>
+            </template>
+            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</div>
+        </ui-collapse>
+    </div>
+</template>
+<script>
+import UiCollapse from './Collapse.vue';
+
+export default {
+    components: { UiCollapse },
+    data() {
+        return {
+            props: {
+                visible: true,
+                icon: true,
+            },
+        };
+    },
+};
+</script>
+```
+
+Example using <mark>heading</mark> slot
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-collapse class="ui-collapse-custom" v-bind="props">
+            <template #heading="{ isOpen, toggle }">
+                <div
+                    class="ui-collapse-custom-heading pad-v-3 pad-h-5 cursor-pointer u-select-none pos-rel"
+                    :class="{ 'color-primary': isOpen, 'bg-primary-focus': isOpen }"
+                    @click="toggle"
+                >
+                    <div class="row row-collapse">
+                        <div class="col col-vmid">My header</div>
+                        <div class="col col-auto col-vmid">
+                            <div class="icon w-auto pull-left">
+                                <i
+                                    class="mdi mdi-chevron-right"
+                                    :class="{ 'mdi-rotate-90': isOpen }"
+                                ></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <div class="pad-5">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
+                <p class="last">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.
+                </p>
+            </div>
+        </ui-collapse>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-collapse-custom {
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--color-grey-light);
+}
+.ui-collapse-custom-heading {
+    transition: all 0.5s ease;
+}
+</style>
+<script>
+import UiCollapse from './Collapse.vue';
+
+export default {
+    components: { UiCollapse },
+    data() {
+        return {
+            props: {},
+        };
+    },
+};
+</script>
+```

package/src/components/ui/Collapse.vue

@@ -1,86 +1,86 @@
-<template>
-    <div class="ui-collapse">
-        <!-- 
-        @slot Heading slot contains <mark>header</mark>, <mark>icon-open</mark>, <mark>icon-close</mark> slots
-        @binding {boolean} isOpen   open flag
-        @binding {function} toggle  function which toggles the visibility of the content 
-        -->
-        <slot name="heading" v-bind="{ isOpen: show, toggle }">
-            <div class="row row-collapse u-select-none">
-                <div class="col col-vmid">
-                    <!-- 
-                    @slot Header content
-                    @binding {function} toggle  function which toggles the visibility of the content 
-                    -->
-                    <slot name="header" :toggle="toggle">
-                        <span class="cursor-pointer u-select-none text-bold" @click="toggle">
-                            Header
-                        </span>
-                    </slot>
-                </div>
-                <div class="col col-auto col-vmid" v-if="icon">
-                    <div class="cursor-pointer" @click="toggle">
-                        <!-- 
-                        @slot Custom slot for the 'open' state
-                        -->
-                        <slot name="icon-open" v-if="show">
-                            <div class="icon">
-                                <i class="color-primary mdil mdil-24px mdil-minus"></i>
-                            </div>
-                        </slot>
-                        <!-- 
-                        @slot Custom slot for the 'close' state
-                        -->
-                        <slot name="icon-close" v-else>
-                            <div class="icon">
-                                <i class="color-primary mdil mdil-24px mdil-plus"></i>
-                            </div>
-                        </slot>
-                    </div>
-                </div>
-            </div>
-        </slot>
-        <!-- 
-        @slot Content 
-        -->
-        <slot v-if="show">Content</slot>
-    </div>
-</template>
-<script>
-export default {
-    props: {
-        /**
-         * Whether the content is visible
-         */
-        visible: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Whether the icons are visible
-         */
-        icon: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            show: false,
-        };
-    },
-    watch: {
-        visible: {
-            handler(val) {
-                this.show = val;
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        toggle() {
-            this.show = !this.show;
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-collapse">
+        <!-- 
+        @slot Heading slot contains <mark>header</mark>, <mark>icon-open</mark>, <mark>icon-close</mark> slots
+        @binding {boolean} isOpen   open flag
+        @binding {function} toggle  function which toggles the visibility of the content 
+        -->
+        <slot name="heading" v-bind="{ isOpen: show, toggle }">
+            <div class="row row-collapse u-select-none">
+                <div class="col col-vmid">
+                    <!-- 
+                    @slot Header content
+                    @binding {function} toggle  function which toggles the visibility of the content 
+                    -->
+                    <slot name="header" :toggle="toggle">
+                        <span class="cursor-pointer u-select-none text-bold" @click="toggle">
+                            Header
+                        </span>
+                    </slot>
+                </div>
+                <div class="col col-auto col-vmid" v-if="icon">
+                    <div class="cursor-pointer" @click="toggle">
+                        <!-- 
+                        @slot Custom slot for the 'open' state
+                        -->
+                        <slot name="icon-open" v-if="show">
+                            <div class="icon">
+                                <i class="color-primary mdil mdil-24px mdil-minus"></i>
+                            </div>
+                        </slot>
+                        <!-- 
+                        @slot Custom slot for the 'close' state
+                        -->
+                        <slot name="icon-close" v-else>
+                            <div class="icon">
+                                <i class="color-primary mdil mdil-24px mdil-plus"></i>
+                            </div>
+                        </slot>
+                    </div>
+                </div>
+            </div>
+        </slot>
+        <!-- 
+        @slot Content 
+        -->
+        <slot v-if="show">Content</slot>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        /**
+         * Whether the content is visible
+         */
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Whether the icons are visible
+         */
+        icon: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            show: false,
+        };
+    },
+    watch: {
+        visible: {
+            handler(val) {
+                this.show = val;
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        toggle() {
+            this.show = !this.show;
+        },
+    },
+};
+</script>

package/src/components/ui/ColorPicker/Alpha.vue

@@ -1,114 +1,114 @@
-<template>
-    <div class="ui-color-picker-color-alpha" @mousedown.prevent.stop="selectAlpha">
-        <canvas ref="canvasAlpha" />
-        <div :style="slideAlphaStyle" class="slide" />
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-color-picker-color-alpha {
-    position: relative;
-    cursor: pointer;
-    .slide {
-        position: absolute;
-        left: 0;
-        top: 100px;
-        width: 100%;
-        height: 4px;
-        background: #fff;
-        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
-        pointer-events: none;
-    }
-}
-</style>
-<script>
-import mixin from './mixin';
-export default {
-    mixins: [mixin],
-    props: {
-        color: {
-            type: String,
-            default: '#000000',
-        },
-        rgba: {
-            type: Object,
-            default: null,
-        },
-        width: {
-            type: Number,
-            default: 15,
-        },
-        height: {
-            type: Number,
-            default: 152,
-        },
-    },
-    data() {
-        return {
-            slideAlphaStyle: {},
-            alphaSize: 5,
-        };
-    },
-    watch: {
-        color() {
-            this.renderColor();
-        },
-        'rgba.a'() {
-            this.renderSlide();
-        },
-    },
-    mounted() {
-        this.renderColor();
-        this.renderSlide();
-    },
-    methods: {
-        renderColor() {
-            const canvas = this.$refs.canvasAlpha;
-            const width = this.width;
-            const height = this.height;
-            const size = this.alphaSize;
-            const canvasSquare = this.createAlphaSquare(size);
-
-            const ctx = canvas.getContext('2d');
-            canvas.width = width;
-            canvas.height = height;
-
-            ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
-            ctx.fillRect(0, 0, width, height);
-
-            this.createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color);
-        },
-        renderSlide() {
-            this.slideAlphaStyle = {
-                top: this.rgba.a * this.height - 2 + 'px',
-            };
-        },
-        selectAlpha(e) {
-            const { top: hueTop } = this.$el.getBoundingClientRect();
-
-            const mousemove = e => {
-                let y = e.clientY - hueTop;
-
-                if (y < 0) {
-                    y = 0;
-                }
-                if (y > this.height) {
-                    y = this.height;
-                }
-
-                let a = parseFloat((y / this.height).toFixed(2));
-                this.$emit('selectAlpha', a);
-            };
-
-            mousemove(e);
-
-            const mouseup = () => {
-                document.removeEventListener('mousemove', mousemove);
-                document.removeEventListener('mouseup', mouseup);
-            };
-
-            document.addEventListener('mousemove', mousemove);
-            document.addEventListener('mouseup', mouseup);
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-color-picker-color-alpha" @mousedown.prevent.stop="selectAlpha">
+        <canvas ref="canvasAlpha" />
+        <div :style="slideAlphaStyle" class="slide" />
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-color-picker-color-alpha {
+    position: relative;
+    cursor: pointer;
+    .slide {
+        position: absolute;
+        left: 0;
+        top: 100px;
+        width: 100%;
+        height: 4px;
+        background: #fff;
+        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+    }
+}
+</style>
+<script>
+import mixin from './mixin';
+export default {
+    mixins: [mixin],
+    props: {
+        color: {
+            type: String,
+            default: '#000000',
+        },
+        rgba: {
+            type: Object,
+            default: null,
+        },
+        width: {
+            type: Number,
+            default: 15,
+        },
+        height: {
+            type: Number,
+            default: 152,
+        },
+    },
+    data() {
+        return {
+            slideAlphaStyle: {},
+            alphaSize: 5,
+        };
+    },
+    watch: {
+        color() {
+            this.renderColor();
+        },
+        'rgba.a'() {
+            this.renderSlide();
+        },
+    },
+    mounted() {
+        this.renderColor();
+        this.renderSlide();
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasAlpha;
+            const width = this.width;
+            const height = this.height;
+            const size = this.alphaSize;
+            const canvasSquare = this.createAlphaSquare(size);
+
+            const ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+
+            ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
+            ctx.fillRect(0, 0, width, height);
+
+            this.createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color);
+        },
+        renderSlide() {
+            this.slideAlphaStyle = {
+                top: this.rgba.a * this.height - 2 + 'px',
+            };
+        },
+        selectAlpha(e) {
+            const { top: hueTop } = this.$el.getBoundingClientRect();
+
+            const mousemove = e => {
+                let y = e.clientY - hueTop;
+
+                if (y < 0) {
+                    y = 0;
+                }
+                if (y > this.height) {
+                    y = this.height;
+                }
+
+                let a = parseFloat((y / this.height).toFixed(2));
+                this.$emit('selectAlpha', a);
+            };
+
+            mousemove(e);
+
+            const mouseup = () => {
+                document.removeEventListener('mousemove', mousemove);
+                document.removeEventListener('mouseup', mouseup);
+            };
+
+            document.addEventListener('mousemove', mousemove);
+            document.addEventListener('mouseup', mouseup);
+        },
+    },
+};
+</script>