@drax/crud-vue 3.21.0 → 3.24.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.21.0",
+  "version": "3.24.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -27,7 +27,7 @@
     "@drax/common-front": "^3.19.0",
     "@drax/crud-front": "^3.21.0",
     "@drax/crud-share": "^3.21.0",
-    "@drax/media-vue": "^3.21.0"
+    "@drax/media-vue": "^3.24.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "9ceebbba20e7abf7337387e2a81d1475b9ba1bca"
+  "gitHead": "5e3a76b377ab284ce2b7dbda8364ec6b52e6763e"
 }

package/src/components/Crud.vue

@@ -11,6 +11,7 @@ import CrudAi from "./CrudAi.vue";
 import {useCrud} from "../composables/UseCrud";
 import {useDisplay} from 'vuetify'
 import {useAuth} from "@drax/identity-vue";
+import CrudRowValue from "./CrudRowValue.vue";
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -111,7 +112,10 @@ watch(dialog, (value) => {
 
         <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
           <slot :name="`item.${header.key}`" v-bind="{item, value}">
-            {{ (Array.isArray(value) && value.length > 0) || !Array.isArray(value) ? value : '' }}
+            <crud-row-value
+                :title="header.title || header.key"
+                :value="value"
+            />
           </slot>
         </template>
 

package/src/components/CrudListTable.vue

@@ -21,6 +21,7 @@ import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
 import CrudFiltersAction from "./CrudFiltersAction.vue";
 import CrudFilterButton from "./buttons/CrudFilterButton.vue";
 import CrudSavedQueriesButton from "./buttons/CrudSavedQueriesButton.vue";
+import CrudRowValue from "./CrudRowValue.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -38,7 +39,6 @@ const {
 // Usar el composable de columnas
 const { filteredHeaders } = useCrudColumns(entity)
 
-
 defineExpose({
   doPaginate
 });
@@ -221,7 +221,10 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
     <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
       <slot v-if="$slots[`item.${header.key}`]" :name="`item.${header.key}`" v-bind="{item, value}">
-        {{ value }}
+        <crud-row-value
+            :title="header.title || header.key"
+            :value="value"
+        />
       </slot>
     </template>
 
@@ -247,10 +250,5 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       />
 
     </template>
-
   </v-data-table-server>
 </template>
-
-<style scoped>
-
-</style>

package/src/components/CrudRowValue.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import {useI18n} from "vue-i18n";
+
+const LONG_TEXT_THRESHOLD = 67
+
+const {value} = defineProps({
+  title: {type: String, default: ''},
+  value: {type: null, required: true},
+})
+
+const {t, te} = useI18n()
+
+const fullTextDialog = ref(false)
+
+const isLongString = computed(() => {
+  return typeof value === 'string' && value.length > LONG_TEXT_THRESHOLD
+})
+
+const displayValue = computed(() => {
+  return (Array.isArray(value) && value.length > 0) || !Array.isArray(value) ? value : ''
+})
+
+const openFullTextDialog = () => {
+  if (!isLongString.value) {
+    return
+  }
+
+  fullTextDialog.value = true
+}
+</script>
+
+<template>
+  <span
+      v-if="isLongString"
+      class="d-inline-block text-truncate crud-row-value__truncated"
+      @click="openFullTextDialog"
+  >
+    {{ displayValue }}
+  </span>
+  <span v-else>{{ displayValue }}</span>
+
+  <v-dialog v-model="fullTextDialog" max-width="720">
+    <v-card>
+      <v-card-title class="text-wrap">
+        {{ title }}
+      </v-card-title>
+      <v-card-text class="crud-row-value__dialog-text">
+        {{ displayValue }}
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="fullTextDialog = false">
+          {{ te('action.close') ? t('action.close') : 'Close' }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.crud-row-value__truncated {
+  cursor: pointer;
+  max-width: 230px;
+}
+
+.crud-row-value__dialog-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

package/src/index.ts

@@ -7,6 +7,7 @@ import CrudFormList from "./components/CrudFormList.vue";
 import CrudList from "./components/CrudList.vue";
 import CrudListTable from "./components/CrudListTable.vue";
 import CrudListGallery from "./components/CrudListGallery.vue";
+import CrudRowValue from "./components/CrudRowValue.vue";
 import CrudFilters from "./components/CrudFilters.vue";
 import CrudFiltersAction from "./components/CrudFiltersAction.vue";
 import CrudNotify from "./components/CrudNotify.vue";
@@ -33,6 +34,7 @@ export {
     CrudList,
     CrudListTable,
     CrudListGallery,
+    CrudRowValue,
     CrudNotify,
     CrudSearch,
     CrudAutocomplete,