|
|
@@ -28,7 +28,12 @@
|
|
|
</div>
|
|
|
<template v-for="(item, index) in props.products" :key="item.id">
|
|
|
<div class="list-row q-px-md q-py-sm">
|
|
|
- <span class="text-body2 text-dark">{{ item.name }}</span>
|
|
|
+ <span class="text-body2 text-dark">
|
|
|
+ {{ truncate(item.name, TRUNCATE_LENGTH) }}
|
|
|
+ <q-tooltip v-if="isTruncated(item.name)">
|
|
|
+ {{ item.name }}
|
|
|
+ </q-tooltip>
|
|
|
+ </span>
|
|
|
<div class="row items-center" style="gap: 12px">
|
|
|
<span class="text-body2 text-dark">{{ item.quantity }}</span>
|
|
|
<q-badge
|
|
|
@@ -51,10 +56,17 @@
|
|
|
<script setup>
|
|
|
import { useDialogPluginComponent } from "quasar";
|
|
|
|
|
|
+import { truncate } from "src/helpers/utils";
|
|
|
+
|
|
|
defineEmits([...useDialogPluginComponent.emits]);
|
|
|
|
|
|
const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
|
|
|
|
|
|
+const TRUNCATE_LENGTH = 30;
|
|
|
+
|
|
|
+const isTruncated = (value) =>
|
|
|
+ String(value ?? "").length > TRUNCATE_LENGTH;
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
products: {
|
|
|
type: Array,
|