Replace fixed text length with css line-clamp (#96)

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -26,7 +26,6 @@
       <div class="flex relative justify-between mb-2">
         <BaseText
           :text="selectedCustomer.name"
-          :length="30"
           class="flex-1 text-base font-medium text-left text-gray-900"
         />
         <div class="flex">
@@ -308,7 +307,6 @@
                     <BaseText
                       v-if="customer.name"
                       :text="customer.name"
-                      :length="30"
                       class="
                         m-0
                         text-base
@@ -320,7 +318,6 @@
                     <BaseText
                       v-if="customer.contact_name"
                       :text="customer.contact_name"
-                      :length="30"
                       class="
                         m-0
                         text-sm

resources/scripts/components/base/BaseText.vue

@@ -1,9 +1,10 @@
 <template>
-  <BaseCustomTag :tag="tag" :title="text">
-    {{ displayText }}
-  </BaseCustomTag>
+  <div class="whitespace-normal">
+    <BaseCustomTag :tag="tag" :title="text" class="line-clamp-1">
+      {{ displayText }}
+    </BaseCustomTag>
+  </div>
 </template>
-
 <script setup>
 import { computed } from "vue"
 
@@ -20,12 +21,17 @@ const props = defineProps({
 
   length: {
     type: Number,
-    default: 0,
+    default: null,
   }
 })
 
-const displayText = computed(() => {
+const { text, length } = props;
+
+const displayText = computed(() => {
+  if (length) {
+    return text.length <= length ? text : `${text.substring(0, length)}...`;
+  }
+  return text;
+});
 
-  return props.text.length < props.length ?  props.text : `${props.text.substring(0 , props.length)}...`
-})
 </script>