@redseed/redseed-ui-vue3 4.0.0 → 4.1.0

package/index.js

@@ -11,13 +11,13 @@ export * from './src/components/Button'
 export * from './src/components/ButtonGroup'
 export * from './src/components/Card'
 export * from './src/components/CardGroup'
-export * from './src/components/ColumnLayout'
 export * from './src/components/DropdownMenu'
 export * from './src/components/Empty'
 export * from './src/components/Form'
 export * from './src/components/FormField'
 export * from './src/components/HTML'
 export * from './src/components/Image'
+export * from './src/components/Layouts'
 export * from './src/components/Link'
 export * from './src/components/LinkedList'
 export * from './src/components/List'
@@ -26,10 +26,8 @@ export * from './src/components/Logo'
 export * from './src/components/MessageBox'
 export * from './src/components/MetaInfo'
 export * from './src/components/Modal'
-export * from './src/components/PageHeading'
 export * from './src/components/Pagination'
 export * from './src/components/Progress'
-export * from './src/components/SectionHeading'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Switcher'

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
+  "repository": "https://github.com/redseedtraining/redseed-ui",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/src/components/Button/ButtonTertiary.vue

@@ -9,15 +9,15 @@ import ButtonSlot from './ButtonSlot.vue'
 <style lang="scss" scoped>
 .rsui-button-tertiary {
     // default colors
-    @apply text-rsui-grey-700 bg-white border-rsui-grey-400;
+    @apply text-rsui-grey-700 bg-white border-transparent;
     // default hover state
-    @apply hover:text-rsui-grey-900 hover:bg-rsui-grey-200 hover:border-rsui-grey-200;
+    @apply hover:text-rsui-grey-900 hover:bg-rsui-grey-200 hover:border-transparent;
     // default focus state
-    @apply focus-visible:ring-rsui-grey-400 focus-visible:border-rsui-grey-400;
+    @apply focus-visible:ring-rsui-grey-400 focus-visible:border-transparent;
     // default active state
-    @apply active:bg-white active:border-rsui-grey-400;
+    @apply active:bg-white active:border-transparent;
     // default disabled state
-    @apply disabled:bg-white disabled:border-rsui-grey-100 disabled:text-rsui-grey-400;
-    @apply disabled:active:bg-white disabled:active:border-rsui-grey-100;
+    @apply disabled:bg-white disabled:border-transparent disabled:text-rsui-grey-400;
+    @apply disabled:active:bg-white disabled:active:border-transparent;
 }
 </style>

package/src/components/{PageHeading/PageHeading.vue → Layouts/PageHeader.vue}

@@ -1,45 +1,45 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import Modal from '../Modal/Modal.vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 
 const showMetaModal = ref(false)
 </script>
 <template>
-    <div class="rsui-page-heading">
-        <div class="rsui-page-heading__top">
-            <div v-if="$slots.title" class="rsui-page-heading__title">
-                <div v-if="$slots.avatar" class="rsui-page-heading__avatar">
+    <div class="rsui-page-header">
+        <div class="rsui-page-header__top">
+            <div v-if="$slots.title" class="rsui-page-header__title">
+                <div v-if="$slots.avatar" class="rsui-page-header__avatar">
                     <slot name="avatar"></slot>
                 </div>
-                <div class="rsui-page-heading__title-text">
+                <div class="rsui-page-header__title-text">
                     <h1>
                         <slot name="title"></slot>
                     </h1>
-                    <div v-if="$slots.subtitle" class="rsui-page-heading__subtitle">
+                    <div v-if="$slots.subtitle" class="rsui-page-header__subtitle">
                         <slot name="subtitle"></slot>
                     </div>
                 </div>
             </div>
 
-            <div v-if="$slots.status || $slots.actions" class="rsui-page-heading__status-actions">
-                <div v-if="$slots.status" class="rsui-page-heading__status">
+            <div v-if="$slots.status || $slots.actions" class="rsui-page-header__status-actions">
+                <div v-if="$slots.status" class="rsui-page-header__status">
                     <slot name="status"></slot>
                 </div>
 
-                <div class="rsui-page-heading__actions">
-                    <div v-if="$slots['meta-action-label'] && $slots['meta']" class="rsui-page-heading__meta-action">
+                <div class="rsui-page-header__actions">
+                    <div v-if="$slots['meta-action-label'] && $slots['meta']" class="rsui-page-header__meta-action">
                         <ButtonTertiary @click="showMetaModal = true">
                             <slot name="meta-action-label"></slot>
                         </ButtonTertiary>
 
-                        <Modal sm v-if="$slots['meta']" class="rsui-page-heading__meta-modal" :show="showMetaModal"
+                        <Modal sm v-if="$slots['meta']" class="rsui-page-header__meta-modal" :show="showMetaModal"
                             @close="showMetaModal = false">
                             <template #header v-if="$slots['meta-modal-header']">
                                 <slot name="meta-modal-header"></slot>
                             </template>
 
-                            <div v-if="$slots.meta" class="rsui-page-heading__meta-modal__body">
+                            <div v-if="$slots.meta" class="rsui-page-header__meta-modal__body">
                                 <slot name="meta"></slot>
                             </div>
 
@@ -59,18 +59,18 @@ const showMetaModal = ref(false)
                 </div>
             </div>
 
-            <div v-if="$slots.search" class="rsui-page-heading__search">
+            <div v-if="$slots.search" class="rsui-page-header__search">
                 <slot name="search"></slot>
             </div>
         </div>
 
-        <div v-if="$slots['meta']" class="rsui-page-heading__meta">
+        <div v-if="$slots['meta']" class="rsui-page-header__meta">
             <slot name="meta"></slot>
         </div>
     </div>
 </template>
 <style lang="scss" scoped>
-.rsui-page-heading {
+.rsui-page-header {
     @apply w-full flex justify-between space-y-4;
     @apply lg:flex-col;
 

package/src/components/Layouts/SectionFooter.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+    showContent: {
+        type: Boolean,
+        default: true,
+    },
+})
+</script>
+<template>
+<div class="rsui-section-footer">
+    <div class="rsui-section-footer__content-start"
+        v-if="showContent && $slots.content"
+    >
+        <slot name="content"></slot>
+    </div>
+    <div :class="[
+        'rsui-section-footer__content-end',
+        {
+            'rsui-section-footer__content-end--full': !showContent || !$slots.content,
+        }
+    ]">
+        <slot></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-section-footer {
+    @apply flex flex-col gap-3 overflow-hidden;
+    @apply md:flex-row md:justify-between md:items-center;
+    @apply border-t border-rsui-grey-400 py-5;
+
+    &__content-start {
+        @apply flex-1 flex flex-wrap items-center gap-3;
+    }
+
+    &__content-end {
+        @apply flex flex-wrap md:justify-end items-center gap-3;
+
+        &--full {
+            @apply flex-1;
+        }
+    }
+}
+</style>

package/src/components/Layouts/SectionHeader.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { ref } from 'vue'
+import ButtonTertiary from '../Button/ButtonTertiary.vue'
+import DropdownMenu from '../DropdownMenu/DropdownMenu.vue'
+import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
+import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
+
+defineProps({
+    showSubtitle: {
+        type: Boolean,
+        default: true,
+    },
+    showActions: {
+        type: Boolean,
+        default: true,
+    },
+    showDropdown: {
+        type: Boolean,
+        default: true,
+    },
+})
+
+const sectionHeaderElement = ref(null)
+
+const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 768)
+</script>
+<template>
+<div ref="sectionHeaderElement"
+    class="rsui-section-header"
+>
+    <div class="rsui-section-header__header">
+
+        <!-- Icon slot, optional -->
+        <div class="rsui-section-header__icon"
+            v-if="$slots.icon"
+        >
+            <slot name="icon"></slot>
+        </div>
+
+        <div class="rsui-section-header__text">
+
+            <!-- Title slot, default slot -->
+            <div class="rsui-section-header__title"
+                :title="$slots.default()[0].children"
+            >
+                <slot></slot>
+            </div>
+
+            <!-- Subtitle slot, optional -->
+            <div class="rsui-section-header__subtitle"
+                v-if="showSubtitle && $slots.subtitle"
+                :title="$slots.subtitle()[0].children"
+            >
+                <slot name="subtitle"></slot>
+            </div>
+        </div>
+
+        <!-- Actions slot, optional -->
+        <div class="rsui-section-header__toolbar"
+            v-if="showActions"
+        >
+            <div class="rsui-section-header__actions-desktop"
+                v-if="responsiveWidth.specific"
+            >
+                <slot name="actions"></slot>
+            </div>
+
+            <!-- Dropdown menu slot, optional -->
+            <DropdownMenu right
+                v-if="showDropdown
+                    && $slots['dropdown-options']
+                    && $slots['dropdown-options']().length
+                "
+            >
+                <template #trigger="{ open }">
+                    <ButtonTertiary @click="open">
+                        <EllipsisVerticalIcon class="rsui-section-header__dropdown-icon" />
+                    </ButtonTertiary>
+                </template>
+
+                <slot name="dropdown-options"></slot>
+            </DropdownMenu>
+        </div>
+    </div>
+
+    <div class="rsui-section-header__actions-mobile"
+        v-if="!responsiveWidth.specific"
+    >
+        <slot name="actions"></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-section-header {
+    @apply flex flex-col gap-x-3 gap-y-5;
+    @apply md:flex-row md:justify-between md:items-center;
+    @apply border-b border-rsui-grey-400 pb-5;
+
+    &__header {
+        @apply flex-1 flex justify-between md:items-center 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;
+    }
+
+    &__text {
+        @apply flex-1 flex flex-col gap-y-0.5 pt-2 md:pt-0;
+    }
+
+    &__title {
+        @apply text-lg leading-7 font-semibold text-rsui-grey-900 line-clamp-2 md:line-clamp-1;
+    }
+
+    &__subtitle {
+        @apply text-sm leading-5 text-rsui-grey-700 line-clamp-3 md:line-clamp-1;
+    }
+
+    &__toolbar {
+        @apply flex gap-3 md:items-center justify-end;
+    }
+
+    &__actions-desktop {
+        @apply hidden md:flex gap-3 items-center;
+    }
+
+    &__actions-mobile {
+        @apply flex flex-wrap md:hidden gap-3 items-center;
+    }
+
+    &__dropdown-icon {
+        @apply size-5 text-rsui-grey-400;
+    }
+}
+</style>

package/src/components/Layouts/index.js

@@ -0,0 +1,13 @@
+import PageHeader from './PageHeader.vue'
+import SectionFooter from './SectionFooter.vue'
+import SectionHeader from './SectionHeader.vue'
+import SingleColumnLayout from './SingleColumnLayout.vue'
+import TwoColumnLayout from './TwoColumnLayout.vue'
+
+export {
+    PageHeader,
+    SectionFooter,
+    SectionHeader,
+    SingleColumnLayout,
+    TwoColumnLayout,
+}

package/src/components/ColumnLayout/index.js

@@ -1,7 +0,0 @@
-import TwoColumnLayout from './TwoColumnLayout.vue'
-import SingleColumnLayout from './SingleColumnLayout.vue'
-
-export {
-    TwoColumnLayout,
-    SingleColumnLayout,
-}

package/src/components/PageHeading/index.js

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

package/src/components/SectionHeading/SectionHeading.vue

@@ -1,18 +0,0 @@
-<script setup>
-</script>
-<template>
-    <div class="rsui-section-heading">
-        <span class="rsui-section-heading__text">
-            <slot></slot>
-        </span>
-        <div class="rsui-section-heading__actions">
-            <slot name="actions"></slot>
-        </div>
-        
-    </div>
-</template>
-<style lang="scss">
-.rsui-section-heading {
-    @apply text-lg flex justify-between items-center font-semibold text-rsui-grey-900;
-}
-</style>

package/src/components/SectionHeading/index.js

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