@redseed/redseed-ui-vue3 6.2.2 → 6.3.0

package/index.js

@@ -32,6 +32,7 @@ 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": "6.2.2",
+  "version": "6.3.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Card/Card.vue

@@ -110,7 +110,7 @@ function onClick() {
     }
 
     &__meta {
-        @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-x-6 gap-y-2;
+        @apply max-w-full overflow-x-auto grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 lg:flex lg:space-x-8;
     }
 }
 </style>

package/src/components/Layouts/PageHeader.vue

@@ -118,7 +118,7 @@ const showMetaModal = ref(false)
 
     &__meta {
         @apply hidden;
-        @apply lg:flex space-x-4;
+        @apply lg:flex space-x-8;
     }
 
     &__avatar {

package/src/components/Layouts/SectionHeader.vue

@@ -108,19 +108,19 @@ function handleMoreActionsClick() {
 .rsui-section-header {
     @apply flex flex-col gap-x-3 gap-y-5 transition-all;
     @apply md:flex-row md:justify-between md:items-center;
-    @apply border-b border-transparent;
+    // @apply border-b border-transparent;
 
-    &--divider {
-        @apply border-rsui-grey-400 pb-5;
-    }
+    // &--divider {
+    //     @apply border-rsui-grey-400 pb-5;
+    // }
 
     &__header {
         @apply flex-1 flex justify-between items-start gap-x-3;
     }
 
     &__icon {
-        @apply size-12 rounded-full overflow-hidden flex items-center justify-center bg-rsui-grey-50;
-        @apply mt-2.5 md:mt-0;
+        // @apply size-12 rounded-full overflow-hidden flex items-center justify-center bg-rsui-grey-50;
+        @apply size-10;
     }
 
     &__text {

package/src/components/Section/Section.vue

@@ -0,0 +1,56 @@
+<script setup>
+const props = defineProps({
+    variant: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'muted', 'accent', 'success', 'warning', 'error'].includes(value)
+    }
+})
+</script>
+
+<template>
+    <section 
+        :class="[
+            'rsui-section',
+            `rsui-section--${variant}`
+        ]"
+        
+    >
+        <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>
+    </section>
+</template>
+
+<style lang="scss" scoped>
+.rsui-section {
+    @apply border border-solid rounded-xl p-6;
+
+    &--default {
+        @apply bg-section-background-default border-section-border-default text-section-text-default;
+    }
+    
+    &--muted {
+        @apply bg-section-background-muted border-section-border-muted text-section-text-muted;
+    }
+    
+    &--accent {
+        @apply bg-section-background-accent border-section-border-accent text-section-text-accent;
+    }
+    
+    &--success {
+        @apply bg-section-background-success border-section-border-success text-section-text-success;
+    }
+    
+    &--warning {
+        @apply bg-section-background-warning border-section-border-warning text-section-text-warning;
+    }
+    
+    &--error {
+        @apply bg-section-background-error border-section-border-error text-section-text-error;
+    }
+}
+</style>

package/src/components/Section/index.js

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