refactor(nc-gui): icons logic

This commit is contained in:
Ramesh Mane
2025-08-21 07:57:24 +00:00
parent 05fe7d3b60
commit fa4bc92b0a
5 changed files with 179 additions and 65 deletions

View File

@@ -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 {