@redseed/redseed-ui-vue3 7.2.3 → 7.2.5

package/index.js

@@ -30,7 +30,6 @@ export * from './src/components/MetaInfo'
 export * from './src/components/Modal'
 export * from './src/components/Pagination'
 export * from './src/components/Progress'
-export * from './src/components/Section'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Switcher'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "7.2.3",
+  "version": "7.2.5",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/{Section → Layouts}/Section.vue

@@ -5,7 +5,7 @@ const props = defineProps({
     variant: {
         type: String,
         default: 'primary',
-        validator: (value) => ['primary', 'secondary', 'brand', 'success', 'info', 'warning', 'error'].includes(value)
+        validator: (value) => ['primary', 'secondary', 'brand', 'success', 'info', 'warning', 'error', 'ai'].includes(value)
     }
 })
 
@@ -19,18 +19,20 @@ const variantClass = computed(() => [
         'rsui-section--info': props.variant === 'info',
         'rsui-section--warning': props.variant === 'warning',
         'rsui-section--error': props.variant === 'error',
+        'rsui-section--ai': props.variant === 'ai',
     },
 ])
 
 </script>
 
 <template>
-    <section 
+    <section
         :class="variantClass"
     >
         <div v-if="$slots.header" class="rsui-section__header">
             <slot name="header"></slot>
         </div>
+
         <div v-if="$slots.default" class="rsui-section__content">
             <slot></slot>
         </div>

package/src/components/Layouts/SectionHeader.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, useSlots } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import { useResponsiveWidth } from '../../helpers'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 
-defineProps({
+const props = defineProps({
     showSubtitle: {
         type: Boolean,
         default: true,
@@ -36,6 +36,15 @@ const emit = defineEmits(['click:more-actions'])
 function handleMoreActionsClick() {
     emit('click:more-actions')
 }
+
+const slots = useSlots()
+
+const showToolbar = computed(() => {
+    const showMoreActions = props.showMoreActions && slots['more-actions']
+
+    return props.showActions
+        && (slots.actions || showMoreActions)
+})
 </script>
 <template>
 <div ref="sectionHeaderElement"
@@ -53,7 +62,10 @@ function handleMoreActionsClick() {
             <slot name="icon"></slot>
         </div>
 
-        <div class="rsui-section-header__text">
+        <div :class="{
+            'rsui-section-header__text': true,
+            'rsui-section-header__text--with-toolbar': showToolbar || $slots.icon,
+        }">
 
             <!-- Title slot, default slot -->
             <div class="rsui-section-header__title">
@@ -70,7 +82,7 @@ function handleMoreActionsClick() {
 
         <!-- Actions slot, optional -->
         <div class="rsui-section-header__toolbar"
-            v-if="showActions"
+            v-if="showToolbar"
         >
             <!-- Desktop actions slot, optional -->
             <div class="rsui-section-header__actions-desktop"

package/src/components/Layouts/index.js

@@ -1,5 +1,6 @@
 import HeroSection from './HeroSection.vue'
 import PageHeader from './PageHeader.vue'
+import Section from './Section.vue'
 import SectionFooter from './SectionFooter.vue'
 import SectionHeader from './SectionHeader.vue'
 import SingleColumnLayout from './SingleColumnLayout.vue'
@@ -8,6 +9,7 @@ import TwoColumnLayout from './TwoColumnLayout.vue'
 export {
     HeroSection,
     PageHeader,
+    Section,
     SectionFooter,
     SectionHeader,
     SingleColumnLayout,

package/src/components/Section/index.js

@@ -1,5 +0,0 @@
-import Section from './Section.vue'
-
-export {
-    Section,
-}