@imaginario27/air-ui-ds 1.13.2 → 1.13.4

package/CHANGELOG.md

@@ -5,6 +5,28 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.13.3 - 2026-05-21
+
+Release type: patch.
+Commits found in range: 1.
+
+### Added
+
+1. merge InteractiveRating into Rating and add disabled option to DropdownSelect ([15a4b1c](https://github.com/imaginario27/air-ui/commit/15a4b1c8bdec9f54d5e733c0ab834aba40a1c50b))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.13.2 - 2026-05-20
+
+Release type: patch.
+Commits found in range: 0.
+
+### Changed
+
+1. Historical release reconstructed from npm publish metadata (no package commits found in this publish window).
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.13.1 - 2026-05-19
 
 Release type: patch.

package/components/cards/specific/MetricCard.vue

@@ -50,7 +50,10 @@
                     {{ featuredDescription }}
                 </p>
 
-                <p :class="['text-sm', styleType === DashboardMetricCardStyle.DEFAULT ? 'text-text-neutral-subtle' : textColorClass]">
+                <p
+                    v-if="description"
+                    :class="['text-sm', styleType === DashboardMetricCardStyle.DEFAULT ? 'text-text-neutral-subtle' : textColorClass]"
+                >
                     {{ description }}
                 </p>
             </div>
@@ -106,10 +109,7 @@ const props = defineProps({
     },
     unit: String as PropType<string>,
     featuredDescription: String as PropType<string>,
-    description: {
-        type: String as PropType<string>,
-        default: "Metric description",
-    },
+    description: String as PropType<string>,
     trend: String as PropType<string>,
     trendDirection: {
         type: String as PropType<DashboardMetricTrendDirection>,

package/components/cards/specific/TestimonialCard.vue

@@ -1,8 +1,8 @@
 <template>
     <Card class="px-0 py-5 shadow-xl">
         <CardBody class="px-5">
-            <Rating 
-                :value="ratingValue" 
+            <Rating
+                :modelValue="ratingValue"
                 :color="ratingStarColor"
             />
             <p class="text-sm">

package/components/dropdowns/DropdownSelect.vue

@@ -179,6 +179,7 @@
                                 :activeStyle="activeStyle"
                                 :to="option.to"
                                 :isExternal="option.isExternal"
+                                :disabled="option.disabled"
                                 :class="[
                                     hasSeparator && index !== filteredOptions.length - 1 
                                         ? 'border-b border-border-default' 
@@ -453,7 +454,7 @@ watch(() => props.modelValue, (newValue) => {
 
 // Method
 const handleOptionClick = (option: SelectOption) => {
-    if (props.disabled || props.isLoading) return
+    if (props.disabled || props.isLoading || option.disabled) return
 
     const optionValue = option.value
 

package/components/dropdowns/DropdownSelectItem.vue

@@ -6,12 +6,14 @@
             'flex flex-col',
             'px-3',
             'text-sm',
-            'hover:cursor-pointer',
             'w-full',
             sizeClass,
-            isSelected && activeStyle === SelectActiveStyle.FILL ? 
+            disabled
+                ? 'cursor-not-allowed opacity-disabled'
+                : 'hover:cursor-pointer',
+            !disabled && (isSelected && activeStyle === SelectActiveStyle.FILL ?
                 'bg-background-primary-brand-active hover:background-primary-brand-active hover:text-text-neutral-on-filled'
-                : 'hover:bg-background-neutral-hover-subtle',
+                : 'hover:bg-background-neutral-hover-subtle'),
         ]"
         @click="emitClick"
     >
@@ -126,6 +128,10 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
 // States
@@ -133,7 +139,12 @@ const isImageLoaded = ref(true)
 
 // Emits
 const emit = defineEmits(['click'])
-const emitClick = () => {
+const emitClick = (event: MouseEvent) => {
+    if (props.disabled) {
+        event.preventDefault()
+        event.stopPropagation()
+        return
+    }
     emit('click')
 }
 

package/components/rating/Rating.vue

@@ -1,60 +1,99 @@
-<template>
-    <div class="flex gap-1">
-        <RatingItem
-            v-for="(icon, index) in items"
-            :key="index"
-            :icon
-            :size
-            :color
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-// Props
-const props = defineProps({
-    value: {
-        type: Number,
-        default: 0,
-    },
-    size: {
-        type: String as PropType<RatingItemSize>,
-        default: RatingItemSize.SM, 
-        validator: (value: RatingItemSize) => Object.values(RatingItemSize).includes(value),
-    },
-    color: {
-        type: String as PropType<RatingItemColor>,
-        default: RatingItemColor.GOLD, 
-        validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
-    },
-    emptyIndicatorIcon: {
-        type: String as PropType<string>,
-        default: 'mdi:star-outline'
-    },
-    halfIndicatorIcon: {
-        type: String as PropType<string>,
-        default: 'mdi:star-half-full'
-    },
-    fullIndicatorIcon: {
-        type: String as PropType<string>,
-        default: 'mdi:star'
-    }
-})
-
-
-// Computed functions
-// Normalize value: clamp between 0 and 5, round to nearest 0.5
-const safeValue = computed(() => {
-    if (!isFinite(props.value) || isNaN(props.value))
-        return 0
-
-    return Math.min(5, Math.max(0, Math.round(props.value * 2) / 2))
-})
-
-const items = computed(() => getRatingIndicator(
-    safeValue.value, 
-    props.emptyIndicatorIcon, 
-    props.halfIndicatorIcon, 
-    props.fullIndicatorIcon
-))
-</script>
+<template>
+    <div
+        class="flex gap-1"
+        @mouseleave="hoverIndex = null"
+    >
+        <RatingItem
+            v-for="(icon, index) in items"
+            :key="index"
+            :icon
+            :size
+            :color
+            :isInteractive
+            @click="isInteractive && handleClick(index)"
+            @mouseenter="isInteractive && onMouseEnter(index)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    modelValue: {
+        type: Number,
+        default: 0,
+    },
+    size: {
+        type: String as PropType<RatingItemSize>,
+        default: RatingItemSize.SM,
+        validator: (value: RatingItemSize) => Object.values(RatingItemSize).includes(value),
+    },
+    color: {
+        type: String as PropType<RatingItemColor>,
+        default: RatingItemColor.GOLD,
+        validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
+    },
+    emptyIndicatorIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:star-outline'
+    },
+    halfIndicatorIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:star-half-full'
+    },
+    fullIndicatorIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:star'
+    },
+    isInteractive: {
+        type: Boolean,
+        default: false
+    },
+    hoverPreview: {
+        type: Boolean,
+        default: true
+    }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// States
+const hoverIndex = ref<number | null>(null)
+
+// Handlers
+const onMouseEnter = (index: number) => {
+    if (props.hoverPreview) {
+        hoverIndex.value = index
+    }
+}
+
+const handleClick = (index: number) => {
+    const clickedValue = index + 1
+
+    if (clickedValue === props.modelValue) {
+        emit('update:modelValue', 0)
+    } else {
+        emit('update:modelValue', clickedValue)
+    }
+}
+
+// Computed functions
+// Normalize value: clamp between 0 and 5, round to nearest 0.5
+const displayValue = computed(() => {
+    if (props.isInteractive && props.hoverPreview && hoverIndex.value !== null)
+        return hoverIndex.value + 1
+
+    if (!isFinite(props.modelValue) || isNaN(props.modelValue))
+        return 0
+
+    return Math.min(5, Math.max(0, Math.round(props.modelValue * 2) / 2))
+})
+
+const items = computed(() => getRatingIndicator(
+    displayValue.value,
+    props.emptyIndicatorIcon,
+    props.halfIndicatorIcon,
+    props.fullIndicatorIcon
+))
+</script>

package/models/types/selects.ts

@@ -18,6 +18,7 @@ export interface SelectOption {
     helpText?: string
     to?: string
     isExternal?: boolean
+    disabled?: boolean
 }
 
 export interface SelectableCardOption {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.13.2",
+    "version": "1.13.4",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",

package/components/rating/InteractiveRating.vue

@@ -1,94 +0,0 @@
-<template>
-    <div
-        class="flex gap-1"
-        @mouseleave="hoverIndex = null"
-    >
-        <RatingItem
-            v-for="(icon, index) in items"
-            :key="index"
-            :icon="icon"
-            :size="size"
-            :color="color"
-            isInteractive
-            @click="handleClick(index)"
-            @mouseenter="onMouseEnter(index)"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-    modelValue: {
-        type: Number,
-        required: true
-    },
-    size: {
-        type: String as PropType<RatingItemSize>,
-        default: RatingItemSize.SM,
-        validator: (value: RatingItemSize) => Object.values(RatingItemSize).includes(value),
-    },
-    color: {
-        type: String as PropType<RatingItemColor>,
-        default: RatingItemColor.GOLD,
-        validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
-    },
-    emptyIndicatorIcon: {
-        type: String as PropType<string>,
-        default: 'mdi:star-outline'
-    },
-    halfIndicatorIcon: {
-        type: String as PropType<string>,
-        default: 'mdi:star-half-full'
-    },
-    fullIndicatorIcon: {
-        type: String as PropType<string>,
-        default: 'mdi:star'
-    },
-    hoverPreview: {
-        type: Boolean,
-        default: true
-    }
-})
-
-// States
-const hoverIndex = ref<number | null>(null)
-
-// Emits
-const emit = defineEmits(['update:modelValue'])
-
-// Handlers
-const onMouseEnter = (index: number) => {
-    if (props.hoverPreview) {
-        hoverIndex.value = index
-    }
-}
-
-const handleClick = (index: number) => {
-    const clickedValue = index + 1
-
-    if (clickedValue === props.modelValue) {
-        emit('update:modelValue', 0)
-    } else {
-        emit('update:modelValue', clickedValue)
-    }
-}
-
-// Computed
-// Get the value to render: either hover preview or actual value
-const displayValue = computed(() => {
-    if (props.hoverPreview && hoverIndex.value !== null)
-        return hoverIndex.value + 1
-
-    if (!isFinite(props.modelValue) || isNaN(props.modelValue))
-        return 0
-
-    return Math.min(5, Math.max(0, Math.round(props.modelValue * 2) / 2))
-})
-
-const items = computed(() => getRatingIndicator(
-    displayValue.value, 
-    props.emptyIndicatorIcon, 
-    props.halfIndicatorIcon, 
-    props.fullIndicatorIcon
-))
-</script>