@redseed/redseed-ui-vue3 6.2.3 → 6.3.1

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

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/MessageBox/MessageBox.vue

@@ -7,6 +7,11 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    variant: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'info', 'success', 'warning', 'error'].includes(value)
+    }
 })
 
 const emit = defineEmits(['close'])
@@ -20,7 +25,10 @@ function close() {
 </script>
 <template>
 <div v-if="!isClosed"
-    class="rsui-message-box"
+    :class="[
+        'rsui-message-box',
+        `rsui-message-box--${variant}`
+    ]"
 >
     <div class="rsui-message-box__head">
         <div class="rsui-message-box__title">
@@ -41,7 +49,28 @@ function close() {
 </template>
 <style lang="scss" scoped>
 .rsui-message-box {
-    @apply border border-rsui-grey-100 rounded-lg bg-white overflow-hidden shadow-full-light transition duration-200 p-4;
+    @apply border rounded-lg overflow-hidden p-4;
+
+    &--default {
+        @apply bg-message-box-background-default border-message-box-border-default text-message-box-text-default;
+    }
+
+    &--info {
+        @apply bg-message-box-background-info border-message-box-border-info text-message-box-text-info;
+    }
+
+    &--success {
+        @apply bg-message-box-background-success border-message-box-border-success text-message-box-text-success;
+    }
+
+    &--warning {
+        @apply bg-message-box-background-warning border-message-box-border-warning text-message-box-text-warning;
+    }
+
+    &--error {
+        @apply bg-message-box-background-error border-message-box-border-error text-message-box-text-error;
+    }
+
     &__head {
         @apply flex justify-between items-center;
     }

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,
+}