refactor(nc-gui): icons logic

packages/nc-gui/components/auth/onboarding/Question/Option/Icon.vue

@@ -1,29 +1,28 @@
 <script lang="ts" setup>
 interface Props {
-  option: OnboardingOptionType
-  index: number
+  iconItem: OnboardingOptionIconType
+  optionIndex: number
   totalOptions: number
   iconSize?: OnboardingQuestionType['iconSize']
 }
 
 const props = withDefaults(defineProps<Props>(), {})
 
-const { option, iconSize } = toRefs(props)
+const { iconItem, optionIndex, totalOptions, iconSize } = toRefs(props)
 
 const showIconMapIcon = computed(() => {
-  return (!option.value.iconType || option.value.iconType === 'iconMap') && option.value.icon
+  return (!iconItem.value.iconType || iconItem.value.iconType === 'iconMap') && iconItem.value.icon
 })
 
 const shouldShowIcon = computed(() => {
-  return option.value.iconType || (!option.value.iconType && option.value.icon) || option.value.icons?.length
+  return iconItem.value.iconType || (!iconItem.value.iconType && iconItem.value.icon)
 })
 
-const iconColor = computed(() => {
-  return option.value.iconColor ? onboardingFlowColoursMapping[option.value.iconColor]?.content ?? '' : ''
-})
-
-const bgColorClass = computed(() => {
-  return option.value.iconColor ? onboardingFlowColoursMapping[option.value.iconColor]?.lightBg ?? '' : ''
+const iconColors = computed(() => {
+  return {
+    textColorClass: iconItem.value.iconColor ? onboardingFlowColoursMapping[iconItem.value.iconColor]?.content ?? '' : '',
+    bgColorClass: iconItem.value.iconColor ? onboardingFlowColoursMapping[iconItem.value.iconColor]?.lightBg ?? '' : '',
+  }
 })
 </script>
 
@@ -33,9 +32,9 @@ const bgColorClass = computed(() => {
       v-if="showIconMapIcon"
       class="flex items-center justify-center"
       :class="[
-        bgColorClass,
+        iconColors.bgColorClass,
         {
-          'rounded-l-lg': bgColorClass,
+          'rounded-l-lg': iconColors.bgColorClass,
         },
       ]"
       :style="{
@@ -44,29 +43,30 @@ const bgColorClass = computed(() => {
       }"
     >
       <GeneralIcon
-        :icon="option.icon! as IconMapKey"
+        :icon="iconItem.icon! as IconMapKey"
         class="flex-none"
         :class="[
-          iconColor,
+          iconColors.textColorClass,
           {
             'w-full h-full': iconSize?.fullWidth,
           },
         ]"
       />
     </div>
-    <div v-else-if="option.iconType === 'indexedStepProgressBar'" class="flex items-stretch gap-0.5">
+    <div v-else-if="iconItem.iconType === 'indexedStepProgressBar'" class="flex items-stretch gap-0.5">
       <div
         v-for="i in totalOptions"
         :key="i"
         class="flex-none w-3 h-3"
         :class="{
-          'bg-green-600': i <= index + 1,
-          'bg-nc-bg-gray-dark': i > index + 1,
+          'bg-green-600': i <= optionIndex + 1,
+          'bg-nc-bg-gray-dark': i > optionIndex + 1,
           'rounded-l-full': i === 1,
           'rounded-r-full': i === totalOptions,
         }"
       ></div>
     </div>
+    <component :is="iconItem.icon" v-else-if="iconItem.iconType === 'vNode'" class="flex-none" />
     <div v-else></div>
   </div>
 </template>

packages/nc-gui/components/auth/onboarding/Question/Option/IconGroup.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+interface Props {
+  option: OnboardingOptionType
+  index: number
+  totalOptions: number
+  iconSize?: OnboardingQuestionType['iconSize']
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const { option, iconSize } = toRefs(props)
+</script>
+
+<template>
+  <template v-if="option.icons?.length">
+    <AuthOnboardingQuestionOptionIcon
+      v-for="(iconItem, i) of option.icons"
+      :key="i"
+      :icon-item="iconItem"
+      :option-index="index"
+      :total-options="totalOptions"
+      :icon-size="iconSize"
+    />
+  </template>
+</template>

packages/nc-gui/components/auth/onboarding/Question/Option/index.vue

@@ -12,20 +12,15 @@ const { option } = toRefs(props)
 </script>
 
 <template>
-  <div
-    class="nc-onboarding-option"
-    :class="{
-      '!px-2 !rounded-xl': option.iconColor,
-    }"
-  >
-    <AuthOnboardingQuestionOptionIcon
+  <div class="nc-onboarding-option">
+    <AuthOnboardingQuestionOptionIconGroup
       v-if="!option.iconPosition || option.iconPosition === 'left'"
       :option="option"
       :index="index"
       :total-options="totalOptions"
       :icon-size="iconSize"
     />
-    <div v-if="option.description" class="flex flex-col gap-1">
+    <div v-if="option.description" class="flex-1 flex flex-col gap-1">
       <div class="text-bodyDefaultSmBold text-nc-content-gray-subtle">
         {{ option.value }}
       </div>
@@ -33,11 +28,11 @@ const { option } = toRefs(props)
         {{ option.description }}
       </div>
     </div>
-    <div v-else class="text-bodyBold text-nc-content-gray">
+    <div v-else class="flex-1 text-bodyBold text-nc-content-gray">
       {{ option.value }}
     </div>
 
-    <AuthOnboardingQuestionOptionIcon
+    <AuthOnboardingQuestionOptionIconGroup
       v-if="option.iconPosition === 'right'"
       :option="option"
       :index="index"
@@ -49,7 +44,7 @@ const { option } = toRefs(props)
 
 <style lang="scss" scoped>
 .nc-onboarding-option {
-  @apply bg-white flex items-center gap-2.5 px-3 py-2  overflow-hidden border-1 border-nc-border-gray-medium rounded-lg cursor-pointer select-none transition-all duration-250;
+  @apply bg-white flex items-center gap-2.5 px-3 py-2 overflow-hidden border-1 border-nc-border-gray-medium rounded-lg cursor-pointer select-none transition-all duration-250;
 
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
 
@@ -58,7 +53,7 @@ const { option } = toRefs(props)
   }
 
   &.nc-has-icon-bg-color {
-    @apply !py-0 !pl-0;
+    @apply !py-0 !pl-0 pr-2 !rounded-xl;
   }
 
   &.nc-selected {