@redseed/redseed-ui-vue3 7.6.2 → 8.0.0

package/index.js

@@ -18,6 +18,7 @@ export * from './src/components/Empty'
 export * from './src/components/Form'
 export * from './src/components/FormField'
 export * from './src/components/HTML'
+export * from './src/components/Icon'
 export * from './src/components/Image'
 export * from './src/components/Layouts'
 export * from './src/components/Link'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "7.6.2",
+  "version": "8.0.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",
@@ -16,6 +16,6 @@
     "@vueuse/core": "^14.0.0",
     "lodash": "^4.17.21",
     "lottie-web": "^5.13.0",
-    "vue": "^3.5.22"
+    "vue": "^3.5.24"
   }
 }

package/src/components/ActivityFeeds/FeedItem.vue

@@ -1,4 +1,5 @@
 <script setup>
+import IconCircleBackground from '../Icon/IconCircleBackground.vue'
 import { UserIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -44,8 +45,12 @@ function handleClick() {
 
     <div class="rsui-feed-item__avatar">
 
-        <slot name="avatar">
-            <UserIcon />
+        <slot name="icon">
+            <IconCircleBackground lg invert>
+                <slot name="avatar">
+                    <UserIcon />
+                </slot>
+            </IconCircleBackground>
         </slot>
 
         <div v-if="status !== false"

package/src/components/Card/CardHeader.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, toRefs } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
+import Icon from '../Icon/Icon.vue'
 import { useResponsiveWidth } from '../../helpers'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 
@@ -133,7 +134,9 @@ function handleMoreActionsClick() {
                 >
                     <ButtonTertiary @click="handleMoreActionsClick">
                         <slot name="more-actions-label">
-                            <EllipsisVerticalIcon class="rsui-card-header__more-actions-icon" />
+                            <Icon>
+                                <EllipsisVerticalIcon />
+                            </Icon>
                         </slot>
                     </ButtonTertiary>
                 </slot>

package/src/components/Disclosure/Disclosure.vue

@@ -2,6 +2,7 @@
 import { ref, watch, watchEffect, nextTick, onMounted } from 'vue'
 import { ChevronDownIcon } from '@heroicons/vue/24/outline'
 import { ButtonTertiary } from '../Button'
+import Icon from '../Icon/Icon.vue'
 
 defineOptions({
     inheritAttrs: false,
@@ -12,6 +13,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    iconProps: {
+        type: Object,
+        default: () => {},
+    },
 })
 
 const emit = defineEmits(['click'])
@@ -104,14 +109,16 @@ onMounted(() => {
                 :full="$attrs.full"
                 @click.stop="handleTrigger"
             >
-                <ChevronDownIcon
-                    :class="[
-                        'rsui-disclosure__trigger-icon',
-                        {
-                            'rsui-disclosure__trigger-icon--open': isOpen,
-                        }
-                    ]"
-                ></ChevronDownIcon>
+                <Icon v-bind="iconProps">
+                    <ChevronDownIcon
+                        :class="[
+                            'rsui-disclosure__trigger-icon',
+                            {
+                                'rsui-disclosure__trigger-icon--open': isOpen,
+                            }
+                        ]"
+                    ></ChevronDownIcon>
+                </Icon>
             </ButtonTertiary>
         </slot>
     </Teleport>

package/src/components/Empty/Empty.vue

@@ -4,6 +4,7 @@ import ButtonPrimary from '../Button/ButtonPrimary.vue'
 import ButtonSecondary from '../Button/ButtonSecondary.vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import BodyText from '../HTML/BodyText.vue'
+import IconCircleBackground from '../Icon/IconCircleBackground.vue'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
 import { useResponsiveWidth } from '../../helpers'
 
@@ -43,7 +44,9 @@ const emptyClass = computed(() => [
         class="rsui-empty__image"
     >
         <slot name="image">
-            <ExclamationCircleIcon></ExclamationCircleIcon>
+            <IconCircleBackground lg invert>
+                <ExclamationCircleIcon />
+            </IconCircleBackground>
         </slot>
     </div>
 

package/src/components/Icon/Icon.vue

@@ -0,0 +1,9 @@
+<script setup>
+import IconSlot from './IconSlot.vue'
+</script>
+
+<template>
+    <IconSlot>
+        <slot></slot>
+    </IconSlot>
+</template>

package/src/components/Icon/IconCircleBackground.vue

@@ -0,0 +1,9 @@
+<script setup>
+import IconSlot from './IconSlot.vue'
+</script>
+
+<template>
+    <IconSlot circle background>
+        <slot></slot>
+    </IconSlot>
+</template>

package/src/components/Icon/IconRoundedBackground.vue

@@ -0,0 +1,9 @@
+<script setup>
+import IconSlot from './IconSlot.vue'
+</script>
+
+<template>
+    <IconSlot rounded background>
+        <slot></slot>
+    </IconSlot>
+</template>

package/src/components/Icon/IconSlot.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    xxs: {
+        type: Boolean,
+        default: false,
+    },
+    xs: {
+        type: Boolean,
+        default: false,
+    },
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+    xl: {
+        type: Boolean,
+        default: false,
+    },
+    xxl: {
+        type: Boolean,
+        default: false,
+    },
+    xxxl: {
+        type: Boolean,
+        default: false,
+    },
+    primary: {
+        type: Boolean,
+        default: false,
+    },
+    secondary: {
+        type: Boolean,
+        default: false,
+    },
+    brand: {
+        type: Boolean,
+        default: false,
+    },
+    success: {
+        type: Boolean,
+        default: false,
+    },
+    info: {
+        type: Boolean,
+        default: false,
+    },
+    warning: {
+        type: Boolean,
+        default: false,
+    },
+    error: {
+        type: Boolean,
+        default: false,
+    },
+    ai: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    rounded: {
+        type: Boolean,
+        default: false,
+    },
+    circle: {
+        type: Boolean,
+        default: false,
+    },
+    background: {
+        type: Boolean,
+        default: false,
+    },
+    invert: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+/**
+ * Default size is md (size-5) if no size is specified.
+ */
+const defaultSize = computed(() =>
+    !props.xxs
+    && !props.xs
+    && !props.sm
+    && !props.md
+    && !props.lg
+    && !props.xl
+    && !props.xxl
+    && !props.xxxl
+)
+
+/**
+ * Default color is primary if no color is specified.
+ */
+const defaultColor = computed(() =>
+    !props.primary
+    && !props.secondary
+    && !props.brand
+    && !props.success
+    && !props.info
+    && !props.warning
+    && !props.error
+    && !props.ai
+    && !props.disabled
+)
+
+const iconClass = computed(() => [
+    'rsui-icon',
+    {
+        /**
+         * Sizes
+         */
+        'rsui-icon--xxs': props.xxs, // size-2
+        'rsui-icon--xs': props.xs, // size-3
+        'rsui-icon--sm': props.sm, // size-4
+        'rsui-icon--md': props.md || defaultSize.value, // size-5
+        'rsui-icon--lg': props.lg, // size-6
+        'rsui-icon--xl': props.xl, // size-8
+        'rsui-icon--xxl': props.xxl, // size-10
+        'rsui-icon--xxxl': props.xxxl, // size-12
+
+        /**
+         * Colors
+         */
+        'rsui-icon--primary': props.primary || defaultColor.value,
+        'rsui-icon--secondary': props.secondary,
+        'rsui-icon--brand': props.brand,
+        'rsui-icon--success': props.success,
+        'rsui-icon--info': props.info,
+        'rsui-icon--warning': props.warning,
+        'rsui-icon--error': props.error,
+        'rsui-icon--ai': props.ai,
+        'rsui-icon--disabled': props.disabled,
+
+        /**
+         * Shapes
+         */
+        'rsui-icon--rounded': props.rounded,
+        'rsui-icon--circle': props.circle,
+
+        /**
+         * Variants
+         */
+        'rsui-icon--background': props.background,
+        'rsui-icon--invert': props.invert,
+    }
+])
+</script>
+
+<template>
+    <div :class="iconClass">
+        <slot></slot>
+    </div>
+</template>

package/src/components/Icon/index.js

@@ -0,0 +1,11 @@
+import Icon from './Icon.vue'
+import IconSlot from './IconSlot.vue'
+import IconRoundedBackground from './IconRoundedBackground.vue'
+import IconCircleBackground from './IconCircleBackground.vue'
+
+export {
+    Icon,
+    IconSlot,
+    IconRoundedBackground,
+    IconCircleBackground,
+}

package/src/components/Image/Image.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import { useImage } from '@vueuse/core'
+import Icon from '../Icon/Icon.vue'
 import { PhotoIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -140,7 +141,9 @@ const imageClass = computed(() => [
         class="rsui-image__empty"
     >
         <slot name="empty-icon">
-            <PhotoIcon class="rsui-image__empty-icon"></PhotoIcon>
+            <Icon xxl disabled>
+                <PhotoIcon></PhotoIcon>
+            </Icon>
         </slot>
     </div>
     <div v-else-if="isLoading"

package/src/components/Layouts/SectionHeader.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, useSlots } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
+import Icon from '../Icon/Icon.vue'
 import { useResponsiveWidth } from '../../helpers'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 
@@ -103,7 +104,9 @@ const showToolbar = computed(() => {
                 >
                     <ButtonTertiary @click="handleMoreActionsClick">
                         <slot name="more-actions-label">
-                            <EllipsisVerticalIcon class="rsui-section-header__more-actions-icon" />
+                            <Icon>
+                                <EllipsisVerticalIcon />
+                            </Icon>
                         </slot>
                     </ButtonTertiary>
                 </slot>

package/src/components/LinkedList/LinkedListItem.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, watch, useAttrs } from 'vue'
+import Icon from '../Icon/Icon.vue'
 import { CheckIcon } from '@heroicons/vue/24/outline'
 
 defineOptions({
@@ -44,17 +45,18 @@ const statusClass = computed(() => [
 <template>
 <li :class="componentClass">
     <div :class="statusClass">
-        <div class="rsui-linked-list-item__active-icon"
-            v-if="$slots['active-icon']"
-        >
-            <slot name="active-icon" v-if="isActive" />
-        </div>
-        <div class="rsui-linked-list-item__done-icon"
+
+        <slot name="active-icon"
+            v-if="$slots['active-icon'] && isActive"
+        />
+
+        <slot name="done-icon"
+            v-if="isDone"
         >
-            <slot name="done-icon" v-if="isDone">
+            <Icon xxs invert>
                 <CheckIcon />
-            </slot>
-        </div>
+            </Icon>
+        </slot>
     </div>
     <div class="rsui-linked-list-item__title">
         <slot name="title"></slot>

package/src/components/Loader/Loader.vue

@@ -18,14 +18,13 @@ const props = defineProps({
     },
 })
 
-const defaultColor = computed(() => !props.secondary && !props.tertiary && !props.white)
+const defaultColor = computed(() => !props.primary && !props.secondary && !props.white)
 
 const loaderClass = computed(() => [
     'rsui-loader',
     {
-        'rsui-loader--primary': props.primary,
+        'rsui-loader--primary': props.primary || defaultColor.value,
         'rsui-loader--secondary': props.secondary,
-        'rsui-loader--tertiary': props.tertiary,
         'rsui-loader--white': props.white,
     }
 ])

package/src/components/MessageBox/MessageBox.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Icon from '../Icon/Icon.vue'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -36,9 +37,11 @@ function close() {
         </div>
         <div class="rsui-message-box__close">
             <div class="rsui-message-box__close-icon">
-                <XMarkIcon
-                    @click="close"
-                ></XMarkIcon>
+                <Icon disabled>
+                    <XMarkIcon
+                        @click="close"
+                    ></XMarkIcon>
+                </Icon>
             </div>
         </div>
     </div>

package/src/components/MetaInfo/MetaInfo.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue'
+import Icon from '../Icon/Icon.vue'
 import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -36,7 +37,9 @@ const emit = defineEmits(['click'])
             @click="$emit('click')"
         >
             <slot name="help-icon">
-                <QuestionMarkCircleIcon></QuestionMarkCircleIcon>
+                <Icon sm secondary>
+                    <QuestionMarkCircleIcon />
+                </Icon>
             </slot>
         </div>
     </div>

package/src/components/Pagination/Pagination.vue

@@ -167,6 +167,8 @@ const goingNext = ref(false)
 
 function goToPage(page) {
     if (page == current.value) return
+    if (page < 1) return
+    if (page > totalPages.value) return
 
     if (page < current.value) {
         goingPrevious.value = true

package/src/components/Pagination/PaginationItemCollapsed.vue

@@ -1,11 +1,14 @@
 <script setup>
 import PaginationItem from './PaginationItem.vue'
+import Icon from '../Icon/Icon.vue'
 import { EllipsisHorizontalIcon } from '@heroicons/vue/24/outline'
 </script>
 <template>
 <PaginationItem freeze
     class="rsui-pagination-item-collapsed"
 >
-    <EllipsisHorizontalIcon></EllipsisHorizontalIcon>
+    <Icon sm>
+        <EllipsisHorizontalIcon />
+    </Icon>
 </PaginationItem>
 </template>

package/src/components/Pagination/PaginationItemNext.vue

@@ -1,9 +1,19 @@
 <script setup>
 import PaginationItem from './PaginationItem.vue'
+import Icon from '../Icon/Icon.vue'
 import { ChevronRightIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+})
 </script>
 <template>
 <PaginationItem class="rsui-pagination-item-next">
-    <ChevronRightIcon></ChevronRightIcon>
+    <Icon :disabled="disabled">
+        <ChevronRightIcon />
+    </Icon>
 </PaginationItem>
 </template>

package/src/components/Pagination/PaginationItemPrevious.vue

@@ -1,9 +1,19 @@
 <script setup>
 import PaginationItem from './PaginationItem.vue'
+import Icon from '../Icon/Icon.vue'
 import { ChevronLeftIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+})
 </script>
 <template>
 <PaginationItem class="rsui-pagination-item-previous">
-    <ChevronLeftIcon></ChevronLeftIcon>
+    <Icon :disabled="disabled">
+        <ChevronLeftIcon />
+    </Icon>
 </PaginationItem>
 </template>

package/src/components/Sorting/Sorting.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue'
+import Icon from '../Icon/Icon.vue'
 import { ArrowLongUpIcon } from '@heroicons/vue/24/outline'
 import LinkPrimary from '../Link/LinkPrimary.vue'
 
@@ -58,6 +59,9 @@ function toggleDesc() {
             <slot name="desc-label"></slot>
         </LinkPrimary>
     </slot>
-    <ArrowLongUpIcon :class="iconClass"></ArrowLongUpIcon>
+
+    <Icon sm>
+        <ArrowLongUpIcon :class="iconClass"></ArrowLongUpIcon>
+    </Icon>
 </div>
 </template>

package/src/components/Switcher/Switcher.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Icon from '../Icon/Icon.vue'
 import SwitcherItem from './SwitcherItem.vue'
 
 const props = defineProps({
@@ -35,9 +36,9 @@ function setActiveItem(item) {
         :disabled="item.disabled"
         @click="setActiveItem(item)"
     >
-            <component v-if="item.icon"
-                :is="item.icon"
-            ></component>
+            <Icon v-if="item.icon">
+                <component :is="item.icon"></component>
+            </Icon>
 
             {{ item.label }}
 

package/src/components/Table/TdUser.vue

@@ -1,4 +1,5 @@
 <script setup>
+import IconCircleBackground from '../Icon/IconCircleBackground.vue'
 import { UserIcon } from '@heroicons/vue/24/outline'
 </script>
 
@@ -6,7 +7,9 @@ import { UserIcon } from '@heroicons/vue/24/outline'
 <div class="rsui-td-user">
     <div class="rsui-td-user__avatar">
         <slot name="avatar">
-            <UserIcon class="rsui-td-user__avatar-icon" />
+            <IconCircleBackground disabled>
+                <UserIcon />
+            </IconCircleBackground>
         </slot>
     </div>
 

package/src/components/Table/Th.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
+import Icon from '../Icon/Icon.vue'
 import { ArrowUpIcon, ChevronUpDownIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -75,10 +76,14 @@ function handleSort() {
         <div v-if="sortable"
             class="rsui-th__sort"
         >
-            <ChevronUpDownIcon v-if="!isAsc && !isDesc"
+            <Icon v-if="!isAsc && !isDesc"
                 class="rsui-th__sort-icon"
-            />
-            <ArrowUpIcon v-if="isAsc || isDesc"
+            >
+                <ChevronUpDownIcon />
+            </Icon>
+
+            <Icon v-if="isAsc || isDesc"
+                sm
                 :class="[
                     'rsui-th__sort-icon',
                     {
@@ -86,7 +91,9 @@ function handleSort() {
                         'rsui-th__sort-icon--desc': isDesc,
                     },
                 ]"
-            />
+            >
+                <ArrowUpIcon />
+            </Icon>
         </div>
     </div>
 </th>