@imaginario27/air-ui-ds 1.17.0 → 1.17.2

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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.17.0 - 2026-07-14
+
+Release type: minor.
+Commits found in range: 2.
+
+### Added
+
+1. expand RepeaterField into a full-featured form field ([0380511](https://github.com/imaginario27/air-ui/commit/038051135acd113e040f3183db7cc542e2e00bf9))
+2. add row reordering to RulesField via new DragPlaceholder ([a966db6](https://github.com/imaginario27/air-ui/commit/a966db6c30346d5912bc1fa037a20239c07c6af9))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.16.0 - 2026-07-07
+
+Release type: minor.
+Commits found in range: 1.
+
+### Added
+
+1. extract standalone Switch component and polish interaction transitions ([4c28c2d](https://github.com/imaginario27/air-ui/commit/4c28c2d34dc07f299f100e3badc491d67ebf8ca4))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.15.3 - 2026-07-03
 
 Release type: patch.

package/components/alerts/Alert.vue

@@ -4,13 +4,14 @@
         :class="[
             'w-full',
             'flex gap-3',
-            description === undefined || description === '' ? 'px-4 py-2' : 'p-4',
+            description || $slots.description ? 'p-4' : 'px-4 py-2',
             'rounded-lg',
             'border',
             containerClass,
+            'relative',
         ]"
     >
-        <template v-if="description">
+        <template v-if="description || $slots.description">
             <Icon 
                 :name="iconType" 
                 :iconClass="iconColorClass" 
@@ -26,10 +27,17 @@
                 >
                     {{ title }}
                 </span>
-                <p v-html="description" class="text-sm" />
+
+                <slot name="description" />
+
+                <p 
+                    v-if="!$slots.description && description"
+                    v-html="description" 
+                    class="text-sm" 
+                />
     
                 <div
-                    v-if="buttons?.length"
+                    v-if="hasActionButtons && buttons?.length"
                     class="flex gap-6"
                 >
                     <AlertButton 
@@ -45,11 +53,26 @@
                     />
                 </div>
             </div>
+
+            <AlertIconButton 
+                v-if="hasCloseButton"
+                :type
+                icon="mdi:close"
+                class="absolute right-2 top-2"
+                @click="$emit('close')"
+            />
         </template>
 
         <template v-else>
             <div class="w-full flex gap-3">
-                <div class="w-full flex gap-3 pt-1.5">
+                <div 
+                    :class="[
+                        'w-full',
+                        'flex',
+                        'gap-3',
+                        hasCloseButton || (hasActionButtons && buttons?.length) && 'pt-1.5',
+                    ]"
+                >
                     <Icon 
                         :name="iconType" 
                         :iconClass="iconColorClass" 
@@ -61,7 +84,7 @@
 
                 <div class="flex gap-3">
                     <div
-                        v-if="buttons?.length"
+                        v-if="hasActionButtons && buttons?.length"
                         class="flex gap-4"
                     >
                         <AlertButton 
@@ -103,10 +126,14 @@ const props = defineProps({
         default: 'Title',
     },
     description: String as PropType<string>,
+    hasActionButtons: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
     buttons: Array as PropType<AlertButton[]>,
     hasCloseButton: {
         type: Boolean as PropType<boolean>,
-        default: true,
+        default: false,
     },
 })
 
@@ -153,5 +180,4 @@ const iconType = computed(() => {
     }
     return variant[props.type as AlertType] as string || 'mdi:alert-outline'
 })
-
 </script>

package/components/cards/specific/MetricCard.vue

@@ -60,6 +60,10 @@
                     :shape="containedIconShape"
                 />
             </template>
+
+            <template v-if="iconPosition === MetricCardIconPosition.LEFT && $slots.rightTop">
+                <slot name="rightTop" />
+            </template>
         </CardHeader>
         <CardBody :class="['flex', 'gap-2!', cardBodyClass]">
             <div :class="['flex', 'items-end', 'gap-1', textColorClass]">
@@ -104,6 +108,13 @@
                     {{ trend }}
                 </span>
             </div>
+
+            <div 
+                v-if="$slots.footer"
+                class="w-full flex gap-2 mt-2"
+            >
+                <slot name="footer" />
+            </div>
         </CardBody>
     </Card>
 </template>

package/components/forms/fields/RepeaterField.vue

@@ -184,6 +184,23 @@
                     </div>
                 </div>
             </template>
+
+            <!-- Trailing drop zone: lets an item be dragged into the last position -->
+            <div
+                v-if="sortingType === RepeatingFieldSortingType.DRAG && draggedIndex !== null && draggedIndex !== items.length - 1"
+                @dragover.prevent="handleDragOver(items.length, $event)"
+                @drop.prevent="handleDrop(items.length, $event)"
+            >
+                <DragPlaceholder
+                    v-if="dragOverIndex === items.length"
+                    aria-hidden="true"
+                    :text="dragPlaceholderText"
+                    :showText="showDragPlaceholderText"
+                    :textClass="dragPlaceholderTextClass"
+                    :class="['h-10', dragPlaceholderClass]"
+                />
+                <div v-else class="h-4" />
+            </div>
         </div>
 
         <!-- Help Text (bottom) -->

package/components/forms/fields/RulesField.vue

@@ -348,8 +348,6 @@ const normalizeRules = (list: RuleItem[]): RuleItem[] => {
     return list.length ? cloneRules(list) : [createEmptyRule()]
 }
 
-// Local draft state: edits to item/operator/value only sync to the parent
-// via emit on add, remove, or Enter — not on every keystroke/selection.
 const localRules = ref<RuleItem[]>(normalizeRules(props.modelValue))
 
 watch(
@@ -454,7 +452,7 @@ const resolveRuleTypeFromItem = (itemValue: RuleValue): AllowedInputType => {
 }
 
 const updateRule = (index: number, field: keyof RuleItem, value: RuleValue) => {
-    localRules.value = localRules.value.map((rule, currentIndex) => {
+    const nextRules = localRules.value.map((rule, currentIndex) => {
         if (currentIndex !== index) return rule
 
         if (field === 'item') {
@@ -471,6 +469,14 @@ const updateRule = (index: number, field: keyof RuleItem, value: RuleValue) => {
             [field]: value,
         }
     })
+
+    localRules.value = nextRules
+
+    // The trailing row is the not-yet-added draft rule; only commit to the
+    // model once it's confirmed via the add action (button, +, or Enter).
+    if (index !== nextRules.length - 1) {
+        emit('update:modelValue', nextRules)
+    }
 }
 
 const addRule = () => {
@@ -571,7 +577,9 @@ const handleDragOver = (index: number, event: DragEvent) => {
 
     event.preventDefault()
 
-    if (!isSortableRow(index)) {
+    // The add-row (last index) isn't itself sortable, but hovering it means
+    // "drop after the last sortable rule" — allow that position through.
+    if (!isSortableRow(index) && index !== rules.value.length - 1) {
         return
     }
 

package/components/tables/TableHeaderCell.vue

@@ -77,6 +77,7 @@ const headerClass = computed(() => {
             'border-t',
             'border-border-neutral-subtle',
             'text-sm',
+            'text-left',
             props.fitToContent ? 'w-[1%]' : 'w-auto',
             props.to ? 'hover:cursor-pointer' : undefined
         ],

package/package.json

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