@thinkpixellab-public/px-vue 3.0.93 → 3.0.94

package/components/PxTextbox.vue

@@ -1,34 +1,28 @@
-<!--
-    Describe this component...
--->
 <template>
-    <input
-        v-if="!multiline"
-        :class="bem(variantsMap)"
-        v-on="$listeners"
-        :value="value"
-        @input="inputUpdate"
-        @change="changeUpdate"
-    />
-    <textarea
-        v-else
-        :class="bem({ resize: showResize, ...variantsMap })"
-        v-on="$listeners"
-        :value="value"
-        @input="inputUpdate"
-        @change="changeUpdate"
-    />
+    <div
+        :class="
+            bem({
+                placeholder: placeholderVisible,
+                multiline: multiline,
+                ...variantsMap,
+            })
+        "
+        ref="input"
+        @input="onInput"
+        @blur="onBlur"
+        @keydown="onKeydown"
+        :contenteditable="enabled ? 'plaintext-only' : false"
+        :placeholder="placeholder"
+        :disabled="disabled"
+    ></div>
 </template>
 
 <script>
 import PxBase from './PxBase.vue';
 import PxBaseVariants from './PxBaseVariants.vue';
+import { getCaretPosition, setCaretPosition } from '../utils/caretPosition.js';
 
 export default {
-    model: {
-        prop: 'value',
-        event: 'update:value',
-    },
     name: 'px-textbox',
     mixins: [PxBase, PxBaseVariants],
     props: {
@@ -38,28 +32,117 @@ export default {
         // the value of the textbox
         value: { type: String, default: null },
 
-        // whether to show the resize element in the corner of multiline textbox
-        showResize: { type: Boolean, default: false },
-
         // whether to fire an update / v-model event on every character change ('input') or when the textbox loses focus ('change')
         updateMode: {
             type: String,
             default: 'input',
             validator: val => ['input', 'change'].includes(val),
         },
+
+        disabled: { type: Boolean, default: false },
+
+        placeholder: { type: String, default: '' },
+
+        lineBreakReplacement: { type: String, default: ' ' }, // the character to replace line breaks with when multiline is false
+    },
+    data() {
+        return {
+            minHeight: 300,
+            placeholderVisible: false,
+        };
+    },
+    computed: {
+        enabled() {
+            return !this.disabled;
+        },
     },
-    computed: {},
+
+    watch: {
+        value(nv) {
+            this.setValue(nv);
+        },
+    },
+    mounted() {
+        this.setValue(this.value);
+    },
+
     methods: {
-        inputUpdate(e) {
+        setValue(val) {
+            const nbsp = '\u202f';
+            const startPos = getCaretPosition(this.$refs.input);
+            const prevValue = this.$refs.input.textContent;
+
+            // if the first character is nbps, we remove it (assuming we had added it to begin with)
+            if (val.startsWith(nbsp)) {
+                val = val.slice(1);
+            }
+
+            // remove line breaks if we are not in multiline mode
+            if (!this.multiline) {
+                val = val.replace(/(\r\n|\n|\r)/gm, this.lineBreakReplacement);
+            }
+
+            // remove leading and trailing whitespace / new lines
+            const trimmed = val.trim().replace(/^\s*\n|\n\s*$/g, '');
+
+            // if the trimmed value is empty, we set it to a single non-breaking space (this eliminates weird UI behaviors when the textbox is empty)
+            if (trimmed.length == 0) {
+                this.placeholderVisible = true;
+                val = nbsp;
+            } else {
+                this.placeholderVisible = false;
+            }
+
+            // set the text content
+            this.$refs.input.textContent = val;
+
+            // raise an update event
+            this.$emit('update:value', val);
+
+            // update the caret position
+            const newPos = startPos + (val.length - prevValue.length);
+
+            if (newPos > 0) {
+                setCaretPosition(this.$refs.input, newPos);
+            }
+        },
+        onInput(e) {
+            const value = e.target.textContent;
             if (this.updateMode == 'input') {
-                this.$emit('update:value', e.target.value);
+                this.setValue(value);
             }
+            this.$emit('input', value);
         },
-        changeUpdate(e) {
+
+        onBlur(e) {
+            const value = e.target.textContent;
             if (this.updateMode == 'change') {
-                this.$emit('update:value', e.target.value);
+                this.setValue(value);
+            }
+            this.$emit('change', value);
+            this.$emit('blue');
+        },
+        onKeydown(e) {
+            if (!this.multiline) {
+                if (e.key == 'Enter') {
+                    e.preventDefault();
+                }
+            }
+            this.$emit('keydown', e);
+        },
+
+        focus(cursorPosition = 'end') {
+            if (this.$refs?.input) {
+                this.$refs.input.focus();
+
+                if (cursorPosition == 'end') {
+                    setCaretPosition(this.$refs.input, this.$refs.input.textContent.length);
+                } else {
+                    setCaretPosition(this.$refs.input, 0);
+                }
             }
         },
+
         selectAll() {
             this.$el.select();
         },
@@ -69,22 +152,39 @@ export default {
 
 <style lang="scss">
 @use '../styles/px.scss' as *;
+@use '@thinkpixellab-public/px-styles/src/modules/controls' as *;
 
-// variant: default
+.px-textbox {
+    @include control-reset();
 
-@include block(px-textbox, default) {
-    @include textbox();
-}
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+    display: inline-flex;
 
-textarea.px-textbox--default {
-    padding-top: 0.5em;
-}
+    &--placeholder {
+        &:after {
+            content: attr(placeholder);
+            font-size: inherit;
+            font-family: inherit;
+            opacity: 0.5;
+            white-space: nowrap;
+        }
+    }
 
-textarea.px-textbox {
-    resize: none;
-}
+    &--default {
+        @include textbox(
+            (
+                display: inline-flex,
+                text-align: left,
+                align-items: center,
+            )
+        );
+    }
 
-textarea.px-textbox--resize {
-    resize: initial;
+    &--multiline {
+        white-space: normal;
+        overflow-y: auto;
+    }
 }
 </style>

package/components/PxTransition.vue

@@ -10,6 +10,7 @@
 
 <script>
 import gsap from 'gsap';
+import utils from '../utils/utils.js';
 
 export default {
     // components: { Component },
@@ -63,10 +64,6 @@ export default {
             type: String,
             default: null,
         },
-        fixedLeave: {
-            type: Boolean,
-            default: false,
-        },
     },
     // data() { return { b: 0 }; },f
     computed: {
@@ -185,28 +182,7 @@ export default {
                     ...params.to,
                     duration: this.hideDur,
                     ease: this.hideEase,
-                    onStart: () => {
-                        if (this.fixedLeave && element) {
-                            const rect = element.getBoundingClientRect();
-                            element.style.width = `${rect.width}px`;
-                            element.style.height = `${rect.height}px`;
-                            element.style.top = `${rect.top}px`;
-                            element.style.left = `${rect.left}px`;
-                            element.style.position = 'fixed';
-                        }
-                    },
-                    onComplete: () => {
-                        if (this.fixedLeave && element) {
-                            if (element) {
-                                element.style.width = '';
-                                element.style.height = '';
-                                element.style.position = '';
-                                element.style.top = '';
-                                element.style.left = '';
-                            }
-                        }
-                        done();
-                    },
+                    onComplete: done,
                 });
             }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.93",
+    "version": "3.0.94",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",

package/utils/bem.js

@@ -32,7 +32,10 @@ function hyphenate(str, shouldHyphenate = true) {
 // Get block name
 function getBlockName(component) {
     if (!component.$options._blockName) {
-        let block = 'bemBlockName' in component && component.bemBlockName();
+        let block =
+            'bemBlockName' in component && typeof component?.bemBlockName === 'function'
+                ? component.bemBlockName()
+                : null;
         block = block || component.$options.name || component.$options._componentTag;
         if (block && block.indexOf('/') > -1) {
             block = block.split('/').pop().split('.')[0];
@@ -43,7 +46,7 @@ function getBlockName(component) {
     return component.$options._blockName;
 }
 
-// Calcualte the bem classes for a given block, element and set of modifiers
+// Calculate the bem classes for a given block, element and set of modifiers
 function getBemClasses(blockName, elementName, modifiers, options) {
     const block = hyphenate(blockName, options.hyphenate.block);
     const element = elementName

package/utils/caretPosition.js

@@ -0,0 +1,75 @@
+function createRange(node, endPos) {
+    let range = document.createRange();
+    range.selectNode(node);
+    range.setStart(node, 1);
+
+    let pos = 0;
+    const stack = [node];
+    while (stack.length > 0) {
+        const current = stack.pop();
+
+        if (current.nodeType === Node.TEXT_NODE) {
+            const len = current.textContent.length;
+            if (pos + len >= endPos) {
+                range.setEnd(current, endPos - pos);
+                return range;
+            }
+            pos += len;
+        } else if (current.childNodes && current.childNodes.length > 0) {
+            for (let i = current.childNodes.length - 1; i >= 0; i--) {
+                stack.push(current.childNodes[i]);
+            }
+        }
+    }
+
+    // The target position is greater than the
+    // length of the contenteditable element.
+    range.setEnd(node, node.childNodes.length);
+    return range;
+}
+
+function canProceed(element) {
+    if (
+        !element ||
+        !window ||
+        typeof window == undefined ||
+        !document ||
+        typeof document == undefined ||
+        !element.contains(document.activeElement)
+    ) {
+        return false;
+    }
+
+    return true;
+}
+
+function getCaretPosition(element) {
+    if (!canProceed(element)) {
+        return null;
+    }
+
+    const selection = window.getSelection();
+
+    if (selection.rangeCount === 0) {
+        return 0;
+    }
+
+    const range = selection.getRangeAt(0);
+    const clonedRange = range.cloneRange();
+    clonedRange.selectNodeContents(element);
+    clonedRange.setEnd(range.startContainer, range.startOffset);
+    return clonedRange.toString().length;
+}
+
+function setCaretPosition(element, position) {
+    if (!canProceed(element)) {
+        return;
+    }
+
+    const range = createRange(element, position);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+
+export { getCaretPosition, setCaretPosition };