@onereach/ui-components 2.74.8-beta.2339.0 → 2.74.8

package/src/components/or-text-v3/OrText.vue

@@ -17,18 +17,33 @@
 import { computed, defineComponent, ref } from 'vue-demi';
 import { MainText, RestText, TextRoot } from './styles';
 
+/**
+ * Use `OrText` component to crop un-wrapped single-line text with ellipsis inside narrow containers.
+ * Ellipsis can be placed in the end or in the middle of the text. Convenient for displaying long labels,
+ * that have same beginning and differ in the ending part.
+ */
 export default defineComponent({
   name: 'OrText',
 
   props: {
+    /**
+     * Text to crop.
+     */
     text: {
       type: String,
       required: true,
     },
 
+    /**
+     * The index counted from the end of the string where ellipsis will be placed.
+     * Defines how many ending characters will remain visible.
+     * By default, ellipsis is placed in the end of the line.
+     *
+     * Note: Negative values behave same as corresponding positives still counting from the end of the line.
+     */
     sliceIndex: {
       type: Number,
-      default: undefined,
+      default: 0,
     },
   },
 
@@ -54,17 +69,36 @@ export default defineComponent({
       ...RestText,
     ]);
 
+    /**
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * @param str A string to escape
+     */
+    const escapeLast = (str: string): string => str && (str.slice(0, -1) + '\xa0');
+    /**
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * @param str A string to escape
+     */
+    const escapeFirst = (str: string): string => str && ('\xa0' + str.slice(1));
+
     // State
     const mainText = computed(() => {
       if (props.sliceIndex) {
-        return props.text.slice(0, Math.abs(props.sliceIndex) * -1);
+        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
+        if (mainPart[mainPart.length - 1] === ' ') {
+          mainPart = escapeLast(mainPart);
+        }
+        return mainPart;
       }
 
       return props.text;
     });
 
     const restText = computed(() => {
-      return props.text.slice(mainText.value.length);
+      let restPart = props.text.slice(mainText.value.length);
+      if (restPart[0] === ' ') {
+        restPart = escapeFirst(restPart);
+      }
+      return restPart;
     });
 
     return {

package/dist/bundled/v3/OrText.vue_vue_type_script_lang-271fb345.js

@@ -1,60 +0,0 @@
-import { defineComponent, ref, computed } from 'vue';
-
-const TextRoot = [
-// Layout
-'inline-flex',
-// Box
-'max-w-full',
-// Typography
-'whitespace-nowrap'];
-const MainText = [
-// Layout
-'overflow-hidden',
-// Typography
-'text-ellipsis'];
-const RestText = [
-// Layout
-'shrink'];
-
-var script = defineComponent({
-  name: 'OrText',
-  props: {
-    text: {
-      type: String,
-      required: true
-    },
-    sliceIndex: {
-      type: Number,
-      default: undefined
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-text', ...TextRoot]);
-    const mainTextStyles = computed(() => [...MainText]);
-    const restTextStyles = computed(() => [...RestText]);
-    // State
-    const mainText = computed(() => {
-      if (props.sliceIndex) {
-        return props.text.slice(0, Math.abs(props.sliceIndex) * -1);
-      }
-      return props.text;
-    });
-    const restText = computed(() => {
-      return props.text.slice(mainText.value.length);
-    });
-    return {
-      root,
-      rootStyles,
-      mainTextStyles,
-      restTextStyles,
-      mainText,
-      restText
-    };
-  }
-});
-
-export { script as s };