@imaginario27/air-ui-ds 1.0.21 → 1.0.23

package/components/icons/ContainedIcon.vue

@@ -11,25 +11,35 @@
             iconContainerSizeClass,
         ]"
     >
-        <MdiIcon 
-            :icon="icon" 
-            :size="iconSizeClass"
-            preserveAspectRatio="xMidYMid meet"
-            :class="iconColorClass"
+        <Icon
+            :icon
+            :type
+            :mode
+            :iconClass
         />
     </div>
 </template>
 <script setup lang="ts">
 // Props
 const props = defineProps({
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
     styleType: {
         type: String as PropType<IconContainerStyleType>,
         default: IconContainerStyleType.FLAT,
         validator: (value: IconContainerStyleType) => Object.values(IconContainerStyleType).includes(value),
     },
-    icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+    type: {
+        type: String as PropType<IconType>,
+        default: IconType.NATIVE, 
+        validator: (value: IconType) => Object.values(IconType).includes(value),
+    },
+    mode: {
+        type: String as PropType<IconMode>,
+        default: IconMode.CSS,
+        validator: (value: IconMode) => Object.values(IconMode).includes(value),
     },
     shape: {
         type: String as PropType<IconContainerShape>,
@@ -118,13 +128,16 @@ const iconContainerSizeClass = computed(() => {
 
 const iconSizeClass = computed(() => {
     const sizeVariants = {
-        [IconContainerSize.LG]: '24',
-        [IconContainerSize.XL]: '24',
-        [IconContainerSize.XXL]: '40',
-        [IconContainerSize.XXXL]: '48',
+        [IconContainerSize.LG]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [IconContainerSize.XL]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [IconContainerSize.XXL]: 'w-[40px] h-[40px] min-w-[40px] min-h-[40px]',
+        [IconContainerSize.XXXL]: 'w-[48px] h-[48px] min-w-[48px] min-h-[48px]',
     }
 
-    return sizeVariants[props.size as IconContainerSize] || '24'
+    return sizeVariants[props.size as IconContainerSize] || 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]'
+})
+
+const iconClass = computed(() => {
+    return [iconSizeClass.value, iconColorClass.value].join(' ')
 })
-    
 </script>

package/components/icons/Icon.vue

@@ -0,0 +1,82 @@
+<template>
+    <MdiIcon
+        v-if="type === IconType.NATIVE"
+        :icon
+        preserveAspectRatio="xMidYMid meet"
+        :class="[
+            iconSizeClass,
+            iconColorClass,
+            iconClass,
+        ]"
+    />
+    <NuxtIcon 
+        v-else-if="type === IconType.COLLECTION"
+        :name="icon"
+        :mode
+        :customize="svgCustomize"
+        :class="[
+            iconSizeClass,
+            iconColorClass,
+            iconClass,
+        ]"
+    />
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
+    type: {
+        type: String as PropType<IconType>,
+        default: IconType.NATIVE, 
+        validator: (value: IconType) => Object.values(IconType).includes(value),
+    },
+    mode: {
+        type: String as PropType<IconMode>,
+        default: IconMode.CSS,
+        validator: (value: IconMode) => Object.values(IconMode).includes(value),
+    },
+    size: {
+        type: String as PropType<IconSize>,
+        default: IconSize.MD, 
+        validator: (value: IconSize) => Object.values(IconSize).includes(value),
+    },
+    color: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.NEUTRAL, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    svgCustomize: Function as PropType<CollectionCustomizeCallback>,  
+    iconClass: String as PropType<string>,    
+})
+
+// Computed classes
+const iconSizeClass = computed(() => {
+    const variants = {
+        [IconSize.XS]: 'w-[12px] h-[12px] min-w-[12px] min-h-[12px]',
+        [IconSize.SM]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [IconSize.MD]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [IconSize.LG]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [IconSize.XL]: 'w-[32px] h-[32px] min-w-[32px] min-h-[32px]',
+        [IconSize.XXL]: 'w-[40px] h-[40px] min-w-[40px] min-h-[40px]',
+    }
+
+    return variants[props.size as IconSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
+})
+
+const iconColorClass = computed(() => {
+    const variants = {
+        [ColorAccent.NEUTRAL]: 'text-icon-default',
+        [ColorAccent.SUCCESS]: 'text-icon-success',
+        [ColorAccent.WARNING]: 'text-icon-warning',
+        [ColorAccent.DANGER]: 'text-icon-danger',
+        [ColorAccent.INFO]: 'text-icon-info',
+        [ColorAccent.PRIMARY_BRAND]: 'text-icon-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: 'text-icon-secondary-brand-default',
+    }
+
+    return variants[props.color as ColorAccent] || 'text-icon-default'
+})
+</script>

package/components/progress/ProgressBar.vue

@@ -0,0 +1,194 @@
+<template>
+    <div
+        class="w-full space-y-1.5"
+    >
+        <div
+            v-if="showProgressLabel && progressLabelPosition === Position.TOP"
+            :class="[
+                'text-xs text-text-neutral-subtle',
+                labelAlignmentClass,
+                progressLabelClass,
+            ]"
+        >
+            {{ isIndeterminate ? loadingText : `${normalizedProgress}%` }}
+        </div>
+
+        <div
+            :class="[
+                'w-full',
+                'overflow-hidden',
+                barSizeClass,
+                incompleteBackgroundColorClass,
+                isRounded && 'rounded-full',
+                'relative',
+            ]"
+        >
+            <div
+                v-if="!isIndeterminate && normalizedProgress > 0"
+                :class="[
+                    'h-full',
+                    'transition-all',
+                    'duration-300',
+                    'ease-in-out',
+                    isRounded && 'rounded-full',
+                    completedBackgroundColorClass,
+                    progressClass,
+                ]"
+                :style="{ width: `${normalizedProgress}%` }"
+            />
+
+            <div
+                v-else-if="isIndeterminate"
+                :class="[
+                    'absolute top-0 left-0 h-full w-1/3',
+                    'indeterminate-bar',
+                    isRounded && 'rounded-full',
+                    completedBackgroundColorClass,
+                    progressClass,
+                ]"
+            />
+        </div>
+
+        <div
+            v-if="showProgressLabel && progressLabelPosition === Position.BOTTOM"
+            :class="[
+                'text-xs text-text-neutral-subtle',
+                labelAlignmentClass,
+                progressLabelClass,
+            ]"
+        >
+            {{ isIndeterminate ? loadingText : `${normalizedProgress}%` }}
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    progress: {
+        type: Number as PropType<number>,
+        default: 50,
+    },
+    color: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.PRIMARY_BRAND, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    size: {
+        type: String as PropType<ProgressBarSize>,
+        default: ProgressBarSize.SM, 
+        validator: (value: ProgressBarSize) => Object.values(ProgressBarSize).includes(value),
+    },
+    isRounded: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    showProgressLabel: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    progressLabelPosition: {
+        type: String as PropType<Position>,
+        default: Position.TOP,
+        validator: (value: Position) => Object.values(Position).includes(value),
+    },
+    progressLabelAlignment: {
+        type: String as PropType<Align>,
+        default: Align.CENTER,
+        validator: (value: Align) => Object.values(Align).includes(value),
+    },
+    min: {
+        type: Number as PropType<number>,
+        default: 0,
+    },
+    max: {
+        type: Number as PropType<number>,
+        default: 100,
+    },
+    isIndeterminate: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    loadingText: {
+        type: String as PropType<string>,
+        default: 'Loading...',
+    },
+    progressClass: String as PropType<string>,
+    progressLabelClass: String as PropType<string>,
+})
+
+// Computed
+const normalizedProgress = computed(() => {
+    if (props.isIndeterminate) return 100
+
+    const clamped = Math.min(Math.max(props.progress, props.min), props.max)
+    const percent = ((clamped - props.min) / (props.max - props.min)) * 100
+
+    return Math.round(percent)
+})
+
+// Computed classes
+const barSizeClass = computed(() => {
+    const variants = {
+        [ProgressBarSize.XS]: 'h-[4px]',
+        [ProgressBarSize.SM]: 'h-[8px]',
+        [ProgressBarSize.MD]: 'h-[12px]',
+        [ProgressBarSize.LG]: 'h-[16px]',
+        [ProgressBarSize.XL]: 'h-[20px]',
+    }
+
+    return variants[props.size as ProgressBarSize] || 'h-[8px]'
+})
+
+const incompleteBackgroundColorClass = computed(() => {
+    const variants = {
+        [ColorAccent.NEUTRAL]: 'bg-background-neutral-default/10',
+        [ColorAccent.SUCCESS]: 'bg-background-success-bold/10',
+        [ColorAccent.WARNING]: 'bg-background-warning-bold/10',
+        [ColorAccent.DANGER]: 'bg-background-danger-bold/10',
+        [ColorAccent.INFO]: 'bg-background-info-bold/10',
+        [ColorAccent.PRIMARY_BRAND]: 'bg-background-primary-brand-default/10',
+        [ColorAccent.SECONDARY_BRAND]: 'bg-background-secondary-brand-default/10',
+    }
+
+    return variants[props.color as ColorAccent] || 'bg-background-primary-brand-default/10'
+})
+
+const completedBackgroundColorClass = computed(() => {
+    const variants = {
+        [ColorAccent.NEUTRAL]: 'bg-background-neutral-default',
+        [ColorAccent.SUCCESS]: 'bg-background-success-bold',
+        [ColorAccent.WARNING]: 'bg-background-warning-bold',
+        [ColorAccent.DANGER]: 'bg-background-danger-bold',
+        [ColorAccent.INFO]: 'bg-background-info-bold',
+        [ColorAccent.PRIMARY_BRAND]: 'bg-background-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: 'bg-background-secondary-brand-default',
+    }
+
+    return variants[props.color as ColorAccent] || 'bg-background-primary-brand-default'
+})
+
+const labelAlignmentClass = computed(() => {
+    const variants = {
+        [Align.LEFT]: 'text-left',
+        [Align.CENTER]: 'text-center',
+        [Align.RIGHT]: 'text-right',
+    }
+
+    return variants[props.progressLabelAlignment as Align] || 'text-center'
+})
+</script>
+
+<style scoped>
+@keyframes indeterminate-slide {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(300%);
+    }
+}
+
+.indeterminate-bar {
+    animation: indeterminate-slide 2s ease-in-out infinite;
+}
+</style>

package/models/enums/icons.ts

@@ -19,4 +19,23 @@ export enum IconContainerSize {
     XL = 'xl',
     XXL = '2xl',
     XXXL = '3xl',
+}
+
+export enum IconSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+    XXL = '2xl',
+}
+
+export enum IconType {
+    NATIVE = 'native',
+    COLLECTION = 'collection',
+}
+
+export enum IconMode {
+    CSS = 'css',
+    SVG = 'svg',
 }

package/models/enums/progress.ts

@@ -0,0 +1,7 @@
+export enum ProgressBarSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl'
+}

package/models/types/icons.ts

@@ -0,0 +1,6 @@
+export type CollectionCustomizeCallback = (
+    svg: string,
+    name?: string,
+    prefix?: string,
+    provider?: string,
+) => string

package/nuxt.config.ts

@@ -10,7 +10,7 @@ export default defineNuxtConfig({
         '../air-ui-utils',
     ],
 
-    modules: ["@nuxt/image", "nuxt-mdi", "@nuxt/eslint", '@vueuse/nuxt'],
+    modules: ["@nuxt/image", "nuxt-mdi", "@nuxt/eslint", '@vueuse/nuxt', "@nuxt/icon"],
 
     plugins: ["@/plugins/vue3-toastify"],
 
@@ -28,6 +28,13 @@ export default defineNuxtConfig({
         },
     ],
 
+    icon: {
+        componentName: 'NuxtIcon',
+        serverBundle: {
+            collections: ['mdi']
+        }
+    },
+
     eslint: {
         // options here
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.21",
+    "version": "1.0.23",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",
@@ -26,6 +26,7 @@
         "@jaxtheprime/vue3-dropzone": "3.4.0",
         "@nuxt/content": "3.7.1",
         "@nuxt/eslint": "1.9.0",
+        "@nuxt/icon": "2.1.1",
         "@nuxt/image": "1.11.0",
         "@nuxtjs/i18n": "10.1.0",
         "@tailwindcss/vite": "4.1.13",