Conditional slot wrapper rendering (#27)

* Conditional slot wrapper rendering * Conditional slot wrapper rendering
d0rich · Jul 16, 2024 · 13fe78f · 13fe78f
1 parent a8cddc8
commit 13fe78f
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 36 deletions.
diff --git a/.changeset/ninety-otters-brake.md b/.changeset/ninety-otters-brake.md
@@ -0,0 +1,5 @@
+---
+'@d0rich/esprit-design': patch
+---
+
+Conditional slot wrapper rendering
diff --git a/packages/esprit-design/src/components/lists/DActionsList.vue b/packages/esprit-design/src/components/lists/DActionsList.vue
@@ -1,17 +1,9 @@
-<script lang="ts">
+<script setup lang="ts">
 import DWrapFocusHighlight, {
   type HighlightVariant
 } from '../utils/DWrapFocusHighlight.vue'
 import DWrapShape from '../utils/DWrapShape.vue'
 
-export default {
-  name: 'DActionsList',
-  components: {
-    DWrapFocusHighlight,
-    DWrapShape
-  }
-}
-
 export type ActionListItem<TEmit = any> = {
   title: string
   emit?: TEmit
@@ -23,9 +15,13 @@ export type ActionListItem<TEmit = any> = {
     [k: string]: any
   }
 }
-</script>
-
-<script setup lang="ts">
+defineOptions({
+  name: 'DActionsList',
+  components: {
+    DWrapFocusHighlight,
+    DWrapShape
+  }
+})
 defineEmits(['actionFocus', 'actionUnfocus', 'actionChoose'])
 
 defineProps({
@@ -43,12 +39,16 @@ function getCurrentHighlightVariant(action: ActionListItem): HighlightVariant {
   if (action.attrs?.highlightVariant) return action.attrs.highlightVariant
   return 'negative-list-item'
 }
+
+const slots = defineSlots<{
+  header?: () => {}
+}>()
 </script>
 
 <template>
   <DWrapShape shape-class="d-actions-list__shape">
     <div class="d-actions-list__body">
-      <div class="d-actions-list__header">
+      <div v-if="slots.header" class="d-actions-list__header">
         <slot name="header" />
       </div>
 

diff --git a/packages/esprit-design/src/components/utils/DWrapBackground.vue b/packages/esprit-design/src/components/utils/DWrapBackground.vue
@@ -1,13 +1,10 @@
-<script lang="ts">
-import { type StyleValue } from 'vue'
+<script setup lang="ts">
+import { type StyleValue, computed } from 'vue'
 
-export default {
+defineOptions({
   name: 'DWrapBackground'
-}
-</script>
-
-<script setup lang="ts">
-defineProps({
+})
+const props = defineProps({
   overlayClass: {
     type: [String, Object as () => Record<string, boolean>],
     default: ''
@@ -33,13 +30,34 @@ defineProps({
     default: 'div'
   }
 })
+
+const slots = defineSlots<{
+  svg?: () => {}
+  default?: () => {}
+}>()
+
+const isOverlayStyleEmpty = computed(() => {
+  if (typeof props.overlayStyle === 'string') return !props.overlayStyle.trim()
+  if (Array.isArray(props.overlayStyle)) return props.overlayStyle.length === 0
+  if (props.overlayStyle === null) return true
+  if (props.overlayStyle === undefined) return true
+  return Object.keys(props.overlayStyle).length === 0
+})
 </script>
 
 <template>
   <Component :is="tag" class="mbg__main-container">
-    <div class="mbg__relative-container">
-      <div class="mbg__layer" :class="overlayClass" :style="overlayStyle" />
-      <div class="mbg__layer">
+    <div
+      v-if="overlayClass || !isOverlayStyleEmpty || slots.svg || slots.default"
+      class="mbg__relative-container"
+    >
+      <div
+        v-if="overlayClass || !isOverlayStyleEmpty"
+        class="mbg__layer"
+        :class="overlayClass"
+        :style="overlayStyle"
+      />
+      <div v-if="slots.svg" class="mbg__layer">
         <slot name="svg" />
       </div>
       <div
@@ -48,7 +66,7 @@ defineProps({
         :class="dotsClass"
         :style="dotsStyle"
       />
-      <div class="mbg__content">
+      <div v-if="slots.default" class="mbg__content">
         <slot />
       </div>
     </div>

diff --git a/packages/esprit-design/src/components/utils/DWrapShape.vue b/packages/esprit-design/src/components/utils/DWrapShape.vue
@@ -1,27 +1,69 @@
-<script lang="ts">
-import { type StyleValue } from 'vue'
+<script setup lang="ts">
+import { type StyleValue, computed } from 'vue'
 
-export default {
+defineOptions({
   name: 'DWrapShape'
-}
-</script>
-
-<script setup lang="ts">
-defineProps<{
+})
+const props = defineProps<{
   shapeClass?: string | Record<string, boolean>
   shapeStyle?: StyleValue
   filterClass?: string | Record<string, boolean>
   filterStyle?: StyleValue
   tag?: string
 }>()
+
+const slots = defineSlots<{
+  'shape-content'?: () => {}
+  'bg-overlay'?: () => {}
+  default?: () => {}
+}>()
+
+function isClassEmpty(
+  cls: string | Record<string, boolean> | undefined
+): boolean {
+  if (!cls) return true
+  if (typeof cls === 'string') return !cls.trim()
+  return Object.keys(cls).length === 0
+}
+
+function isStyleEmpty(style: StyleValue): boolean {
+  if (typeof style === 'string') return !style.trim()
+  if (Array.isArray(style)) return style.length === 0
+  if (style === null) return true
+  if (style === undefined) return true
+  return Object.keys(style).length === 0
+}
+
+const isShapeCustomized = computed(() => {
+  if (slots['shape-content']) return true
+  if (!isClassEmpty(props.shapeClass)) return true
+  return !isStyleEmpty(props.shapeStyle)
+})
+const isFilterCustomized = computed(() => {
+  if (!isClassEmpty(props.filterClass)) return true
+  return !isStyleEmpty(props.filterStyle)
+})
 </script>
 
 <template>
   <Component :is="tag ?? 'div'">
     <div class="d-shape">
-      <div class="d-shape__bg-filter" :class="filterClass" :style="filterStyle">
-        <div class="d-shape__bg-wrapper">
-          <div class="d-shape__bg" :class="shapeClass" :style="shapeStyle">
+      <div
+        v-if="isShapeCustomized || slots['bg-overlay'] || isFilterCustomized"
+        class="d-shape__bg-filter"
+        :class="filterClass"
+        :style="filterStyle"
+      >
+        <div
+          v-if="isShapeCustomized || slots['bg-overlay']"
+          class="d-shape__bg-wrapper"
+        >
+          <div
+            v-if="isShapeCustomized"
+            class="d-shape__bg"
+            :class="shapeClass"
+            :style="shapeStyle"
+          >
             <slot name="shape-content" />
           </div>
           <slot name="bg-overlay" />