goodteditor-ui 1.0.88 → 1.0.90

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.88",
+    "version": "1.0.90",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/EditableText.md

@@ -0,0 +1,21 @@
+```vue
+<template>
+    <div class="pad-l5">
+        <p>model: {{ model }}</p>
+        <ui-editable-text v-model="model" v-bind="options"></ui-editable-text>
+    </div>
+</template>
+<script>
+import UiEditableText from './EditableText.vue';
+
+export default {
+    components: { UiEditableText },
+    data: () => ({
+        model: 'hello world',
+        options: {
+            size: 'large'
+        }
+    }),
+};
+</script>
+```

package/src/components/ui/EditableText.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="ui-editable-text" @click="onRootClick">
+        <div class="ui-editable-text-label cursor-pointer text-truncate" :class="labelClass">
+            <!--
+            @slot
+            @binding {string} value     current value
+            -->
+            <slot v-bind="{ value }">{{ value }}</slot>
+        </div>
+        <input
+            v-if="isEditable"
+            :value="value"
+            :class="inputClass"
+            class="ui-editable-text-input input h-100"
+            type="text"
+            ref="input"
+            @change="onValueChange" />
+    </div>
+</template>
+<script>
+import { domEvent } from './utils/Helpers';
+
+const Size = {
+    SMALL: { name: 'small', labelClass: ['text-small'], inputClass: ['input-small'] },
+    NORMAL: { name: 'normal', labelClass: [], inputClass: [] },
+    LARGE: { name: 'large', labelClass: ['text-large'], inputClass: ['input-large'] },
+};
+
+export default {
+    props: {
+        /**
+         * @vmodel
+         * @example lorem ipsum sit dolor
+         */
+        value: {
+            type: String,
+            default: ''
+        },
+        /**
+         * @default normal
+         * @values small,normal,large
+         */
+        size: {
+            type: String,
+            default: Size.NORMAL.name,
+            validator: (val) =>
+                Object.values(Size)
+                    .map(({ name }) => name)
+                    .includes(val)
+        }
+    },
+    data: () => ({
+        isEditable: false,
+        onDocClickDisposable: null
+    }),
+    computed: {
+        labelClass() {
+            const { isEditable, size } = this;
+            const classes = [];
+            const sizeDef = Object.values(Size).find(({ name }) => name === size);
+
+            classes.push(...sizeDef.labelClass);
+
+            if (isEditable) {
+                classes.push('invisible');
+            }
+
+            return classes;
+        },
+        inputClass() {
+            const sizeDef = Object.values(Size).find(({ name }) => name === this.size);
+            return sizeDef.inputClass;
+        }
+    },
+    beforeDestroy() {
+        const { onDocClickDisposable } = this;
+        if (onDocClickDisposable != null) {
+            onDocClickDisposable();
+        }
+    },
+    methods: {
+        onRootClick() {
+            if (this.isEditable) {
+                return;
+            }
+            this.isEditable = true;
+            this.$nextTick(() => {
+                const { input } = this.$refs;
+                input.select();
+                setTimeout(() => {
+                    this.onDocClickDisposable = domEvent(document, 'click', this.onDocClick);
+                });
+            });
+        },
+        onValueChange({ target }) {
+            const { value: valueNew } = target;
+            if (this.value !== valueNew) {
+                this.$emit('input', valueNew);
+                this.$emit('change', valueNew);
+            }
+            this.isEditable = false;
+            this.onDocClickDisposable();
+        },
+        onDocClick({ target }) {
+            if (this.$el.contains(target)) {
+                return;
+            }
+            this.isEditable = false;
+            this.onDocClickDisposable();
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.ui-editable-text {
+    position: relative;
+    display: inline-flex;
+
+    &-label {
+        &:hover {
+            color: var(--color-primary);
+        }
+    }
+    &-input {
+        position: absolute;
+        top: 0;
+        left: -0.5rem;
+        width: calc(100% + 1rem);
+        border: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        min-height: auto;
+    }
+}
+</style>

package/src/components/ui/utils/Helpers.js

@@ -77,6 +77,18 @@ const generateGetBoundingClientRect = (x = 0, y = 0) => () => ({
     left: x,
 });
 
+/**
+ * @param {EventTarget} target
+ * @param {string} type
+ * @param {EventListenerOrEventListenerObject} listener
+ * @param {AddEventListenerOptions} options
+ * @returns
+ */
+const domEvent = (target, type, listener, options = undefined) => {
+    target.addEventListener(type, listener, options);
+    return () => target.removeEventListener(type, listener, options);
+};
+
 export {
     scrollIntoView,
     isDateValid,
@@ -85,6 +97,7 @@ export {
     Position,
     TriggerOn,
     debounce,
+    domEvent,
     useIntersectionObserver,
     generateGetBoundingClientRect,
 };