feat: Allow to hide the separator in KCardSection (close #1075)

kalisio · Jan 31, 2025 · 40b80f4 · 40b80f4
1 parent 518733a
commit 40b80f4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 28 deletions.
diff --git a/core/client/components/collection/KCardSection.vue b/core/client/components/collection/KCardSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-separator />
+    <q-separator v-if="!hideSeparator" />
     <!--
       Header section
      -->
@@ -26,30 +26,10 @@
 <script setup>
 import _ from 'lodash'
 import { computed } from 'vue'
+import { CardSectionProps } from '../../utils/utils.items.js'
 
 // Props
-const props = defineProps({
-  title: {
-    type: String,
-    default: ''
-  },
-  actions: {
-    type: Array,
-    default: () => null
-  },
-  actionsFilter: {
-    type: [String, Array],
-    default: () => null
-  },
-  hideHeader: {
-    type: Boolean,
-    default: false
-  },
-  dense: {
-    type: Boolean,
-    default: false
-  }
-})
+const props = defineProps(_.omit(CardSectionProps, ['item']))
 
 // Computed
 const filteredActions = computed(() => {

diff --git a/core/client/components/collection/KDescriptionCardSection.vue b/core/client/components/collection/KDescriptionCardSection.vue
@@ -1,14 +1,15 @@
 <template>
   <KCardSection
-    :title="$t('KDescriptionCardSection.TITLE')"
+    :title="computedTitle"
     :actions="actions"
     :actionsFilter="actionsFilter"
-    :hideHeader="hideHeader"
+    :hide-separator="hideSeparator"
+    :hide-header="hideHeader"
     :dense="dense"
   >
     <KTextArea
-      v-if="description"
-      :text="description"
+      v-if="computedDescription"
+      :text="computedDescription"
       :minHeight="48"
       :dense="dense"
     />
@@ -28,6 +29,7 @@
 import _ from 'lodash'
 import { computed } from 'vue'
 import { CardSectionProps } from '../../utils/utils.items.js'
+import { i18n } from '../../i18n.js'
 import KCardSection from './KCardSection.vue'
 import KTextArea from '../KTextArea.vue'
 
@@ -41,7 +43,10 @@ const props = defineProps({
 })
 
 // Computed
-const description = computed(() => {
+const computedTitle = computed(() => {
+  return _.isEmpty(props.title) ? i18n.t('KDescriptionCardSection.TITLE') : props.title
+})
+const computedDescription = computed(() => {
   return _.get(props.item, props.descriptionPath)
 })
 </script>
diff --git a/core/client/utils/utils.items.js b/core/client/utils/utils.items.js
@@ -15,6 +15,10 @@ export const CardSectionProps = {
     type: [String, Array],
     default: () => null
   },
+  hideSeparator: {
+    type: Boolean,
+    default: false
+  },
   hideHeader: {
     type: Boolean,
     default: false