goodteditor-ui 1.0.91 → 1.0.93

package/package.json

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

package/src/components/ui/EditableText.md

@@ -1,6 +1,40 @@
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <label>
+            <input id="editable-text" class="checkbox" type="checkbox" v-model="options.readonly">
+            <span class="mar-left-3 v-mid">readonly</span>
+        </label>
+        <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: {
+            readonly: false
+        }
+    }),
+};
+</script>
+```
+
+Advanced example. Edit on double-click, large size & custom validation
+
 ```vue
 <template>
     <div class="pad-l5">
+        <label>
+            <input id="editable-text-2" class="checkbox" type="checkbox" v-model="options.readonly">
+            <span class="mar-left-3 v-mid">readonly</span>
+        </label>
         <p>model: {{ model }}</p>
         <ui-editable-text v-model="model" v-bind="options"></ui-editable-text>
     </div>
@@ -13,7 +47,10 @@ export default {
     data: () => ({
         model: 'hello world',
         options: {
-            size: 'large'
+            size: 'large',
+            validate: (value) => value !== '',
+            event: 'dblclick',
+            readonly: false
         }
     }),
 };

package/src/components/ui/EditableText.vue

@@ -1,29 +1,32 @@
 <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
+        class="ui-editable-text"
+        :contenteditable="isEditable ? 'plaintext-only' : null"
+        :class="cssClass"
+        tabindex="0"
+        @keydown.stop="onKeydown"
+        @keyup.stop="onKeyup"
+        @focus="onFocus"
+        @focusin.stop="onFocus"
+        @blur="onBlur"
+        @focusout.stop="onBlur"
+        @click.stop
+        v-on="{
+            [event]: onActivate
+        }">
+        <!--
+        @slot
+        @binding {string} value     current value
+        -->
+        <slot v-bind="{ value }">{{ value }}</slot>
     </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'] },
+    SMALL: { name: 'small', class: ['text-small'] },
+    NORMAL: { name: 'normal', class: [] },
+    LARGE: { name: 'large', class: ['text-large'] }
 };
 
 export default {
@@ -33,9 +36,16 @@ export default {
          * @example lorem ipsum sit dolor
          */
         value: {
-            type: String,
+            type: [String, Number],
             default: ''
         },
+        /**
+         * supports v-sync
+         */
+        edit: {
+            type: Boolean,
+            default: false
+        },
         /**
          * @default normal
          * @values small,normal,large
@@ -47,89 +57,185 @@ export default {
                 Object.values(Size)
                     .map(({ name }) => name)
                     .includes(val)
+        },
+        /**
+         * @default click
+         * @example click, dblclick
+         */
+        event: {
+            type: String,
+            default: 'click'
+        },
+        /**
+         * whether the text is readonly
+         */
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * validation callback
+         */
+        validate: {
+            type: Function,
+            default: () => true
         }
     },
     data: () => ({
-        isEditable: false,
-        onDocClickDisposable: null
+        isEdited: false,
+        valueLast: '',
+        valueDirty: ''
     }),
     computed: {
-        labelClass() {
-            const { isEditable, size } = this;
+        isEditable() {
+            return this.readonly === false && this.isEdited;
+        },
+        cssClass() {
+            const { isEdited, size, readonly } = this;
             const classes = [];
             const sizeDef = Object.values(Size).find(({ name }) => name === size);
 
-            classes.push(...sizeDef.labelClass);
+            classes.push(...sizeDef.class);
+
+            if (readonly) {
+                classes.push('readonly');
+            }
 
-            if (isEditable) {
-                classes.push('invisible');
+            if (isEdited) {
+                classes.push('is-edited');
             }
 
             return classes;
         },
-        inputClass() {
-            const sizeDef = Object.values(Size).find(({ name }) => name === this.size);
-            return sizeDef.inputClass;
+        isValid() {
+            return this.validate(this.valueDirty);
         }
     },
-    beforeDestroy() {
-        const { onDocClickDisposable } = this;
-        if (onDocClickDisposable != null) {
-            onDocClickDisposable();
+    watch: {
+        value: {
+            handler(value) {
+                this.valueLast = this.valueDirty = value;
+            },
+            immediate: true
+        },
+        edit(edit) {
+            if (edit) {
+                this.onActivate();
+            } else {
+                this.onBlur();
+            }
+        },
+        isValid(isValid) {
+            this.$emit('valid', isValid);
         }
     },
     methods: {
-        onRootClick() {
-            if (this.isEditable) {
+        /**
+         * @param {Event} event
+         */
+        onActivate(event) {
+            event?.stopImmediatePropagation();
+
+            if (this.isEdited || this.readonly) {
                 return;
             }
-            this.isEditable = true;
-            this.$nextTick(() => {
-                const { input } = this.$refs;
-                input.select();
-                setTimeout(() => {
-                    this.onDocClickDisposable = domEvent(document, 'click', this.onDocClick);
-                });
-            });
+            this.setIsEdited(true);
         },
-        onValueChange({ target }) {
-            const { value: valueNew } = target;
-            if (this.value !== valueNew) {
-                this.$emit('input', valueNew);
-                this.$emit('change', valueNew);
+        /**
+         * @param {boolean} isEdited
+         */
+        setIsEdited(isEdited) {
+            this.isEdited = isEdited;
+            // autofocus
+            if (isEdited) {
+                this.$nextTick(() => {
+                    const range = document.createRange();
+                    range.selectNodeContents(this.$el);
+                    const selection = window.getSelection();
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                    this.$el.focus();
+                });
+            } else {
+                this.$el.blur();
             }
-            this.isEditable = false;
-            this.onDocClickDisposable();
+
+            this.$emit('update:edit', isEdited);
         },
-        onDocClick({ target }) {
-            if (this.$el.contains(target)) {
-                return;
+        /**
+         * @param {string} value
+         */
+        setValue(value) {
+            this.$el.textContent = value;
+            this.valueLast = value;
+            this.$emit('input', value);
+            this.$emit('change', value);
+        },
+        commitValue() {
+            this.setValue(this.isValid ? this.valueDirty : this.valueLast);
+            this.setIsEdited(false);
+        },
+        onFocus() {
+            this.$emit('focus');
+        },
+        onBlur() {
+            this.$emit('blur');
+            this.commitValue();
+        },
+        /**
+         * @param {KeyboardEvent} event
+         */
+        onKeydown(event) {
+            if (event.code.toLocaleLowerCase() === 'enter') {
+                event.preventDefault();
+                this.setIsEdited(!this.isEdited);
             }
-            this.isEditable = false;
-            this.onDocClickDisposable();
+        },
+        /**
+         * @param {KeyboardEvent} event
+         */
+        onKeyup({ target }) {
+            this.valueDirty = target.textContent.trim();
         }
     }
 };
 </script>
-<style lang="less" scoped>
+<style scoped>
 .ui-editable-text {
     position: relative;
     display: inline-flex;
+    min-width: 1em;
+    cursor: pointer;
+
+    &:focus {
+        outline: var(--focus-outline-width) solid var(--color-focus);
+        outline-offset: 1px;
+        border-radius: var(--border-radius);
+    }
+
+    &:empty {
+        border-bottom: 2px dotted var(--color-primary);
+        &:before {
+            content: ' '
+        }
+    }
+
+    &:hover:not(.readonly, :focus) {
+        color: var(--color-primary);
+    }
 
-    &-label {
+    &.readonly {
+        cursor: default;
         &:hover {
-            color: var(--color-primary);
+            color: initial;
+        }
+        &:focus {
+            outline: none;
         }
     }
-    &-input {
-        position: absolute;
-        top: 0;
-        left: -0.5rem;
-        width: calc(100% + 1rem);
-        border: none;
-        padding-top: 0;
-        padding-bottom: 0;
-        min-height: auto;
+
+    &.is-edited {
+        white-space: pre-line;
     }
 }
 </style>

package/src/components/ui/Select.vue

@@ -37,12 +37,12 @@
                         </ui-badge>
                     </slot>
                 </template>
-                <div class="ui-select-placeholder events-none" v-else>
+                <div class="ui-select-placeholder" v-else>
                     <!--
                     @slot Placeholder slot
                     -->
                     <slot name="placeholder">
-                        <input class="ui-select-placeholder-input input w-100" :placeholder="placeholder" />
+                        <input class="ui-select-placeholder-input events-none input w-100" :placeholder="placeholder" />
                     </slot>
                 </div>
             </template>
@@ -65,12 +65,12 @@
                     v-if="optionsSelected.length">
                     {{ getOptionLabel(optionsSelected[0]) }}
                 </slot>
-                <div class="ui-select-placeholder events-none" v-else>
+                <div class="ui-select-placeholder" v-else>
                     <!--
                     @slot Placeholder slot
                     -->
                     <slot name="placeholder">
-                        <input class="ui-select-placeholder-input input w-100" :placeholder="placeholder" />
+                        <input class="ui-select-placeholder-input events-none input w-100" :placeholder="placeholder" />
                     </slot>
                 </div>
             </template>

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

@@ -77,18 +77,6 @@ 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,
@@ -97,7 +85,6 @@ export {
     Position,
     TriggerOn,
     debounce,
-    domEvent,
     useIntersectionObserver,
     generateGetBoundingClientRect,
 };