@imaginario27/air-ui-ds 1.10.2 → 1.12.0

package/CHANGELOG.md

@@ -5,6 +5,41 @@ 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.11.0 - 2026-04-15
+
+Release type: minor.
+Commits found in range: 1.
+
+### Added
+
+1. add nested dropdown menus, sidebar menu items and section titles ([2c49dbf](https://github.com/imaginario27/air-ui/commit/2c49dbf1fae116b377dea988f80a3fdf28ef4c4f))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.10.2 - 2026-04-14
+
+Release type: patch.
+Commits found in range: 3.
+
+### Fixed
+
+1. fix typecheck errors in selects ([eee12f8](https://github.com/imaginario27/air-ui/commit/eee12f87045fcb12556f3f38e80f87e5078a0d5c))
+2. remove duplicated imports ([a277959](https://github.com/imaginario27/air-ui/commit/a2779590034a360e1685193455e978391870a69f))
+3. fix duplicated imports ([5a324a3](https://github.com/imaginario27/air-ui/commit/5a324a3ea43ae5fdf794e345b54c57207860efbd))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.10.1 - 2026-04-09
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. fix TypeScript errors in TabBar.vue ([273925b](https://github.com/imaginario27/air-ui/commit/273925bdca00ac9ad58c1c43de5668ed78a85da1))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.10.0 - 2026-04-09
 
 Release type: minor.

package/assets/css/defaults.css

@@ -1,6 +1,7 @@
 
 html {
-  scroll-behavior: smooth;
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
 }
 
 body {

package/components/dropdowns/ContextMenu.vue

@@ -0,0 +1,130 @@
+<template>
+    <div data-test="context-menu-target" @contextmenu="onContextMenu">
+        <slot />
+    </div>
+
+    <ContextMenuDropdown
+        v-model="isOpen"
+        :x="anchorPoint.x"
+        :y="anchorPoint.y"
+        :width="width"
+        :hasShadow="hasShadow"
+        :hasBorder="hasBorder"
+        :positionXOffset="positionXOffset"
+        :positionYOffset="positionYOffset"
+        :dropdownClass="dropdownClass"
+        :shouldTeleport="shouldTeleport"
+        :teleportTo="teleportTo"
+        :zIndex="zIndex"
+        v-bind="$attrs"
+    >
+        <template #items="{ onClose }">
+            <slot v-if="$slots.items" name="items" :onClose="onClose" />
+
+            <DropdownMenuContextItemsTree
+                v-else
+                :items="items"
+                :trigger="Trigger.HOVER"
+                :hasShadow="hasShadow"
+                :hasBorder="hasBorder"
+                :disabled="disabled"
+                :prefetchOn="prefetchOn"
+                :level="level"
+                :nestedMenuGap="nestedMenuGap"
+                :onClose="onClose"
+            />
+        </template>
+    </ContextMenuDropdown>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+    inheritAttrs: false,
+})
+
+// Props
+const props = defineProps({
+    items: {
+        type: Array as PropType<ContextMenuItem[]>,
+        default: () => [],
+    },
+    hasShadow: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    width: {
+        type: Number as PropType<number>,
+        default: 240,
+    },
+    positionXOffset: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0,
+    },
+    positionYOffset: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0,
+    },
+    dropdownClass: String as PropType<string>,
+    shouldTeleport: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    teleportTo: {
+        type: String as PropType<string>,
+        default: 'body',
+    },
+    zIndex: {
+        type: String as PropType<string>,
+        default: '50',
+    },
+    level: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    nestedMenuGap: {
+        type: Number as PropType<number>,
+        default: 8,
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    prefetchOn: {
+        type: [String, Object] as PropType<PrefetchOnStrategy>,
+        default: PrefetchOn.VISIBILITY,
+    },
+})
+
+// Composables
+const slots = useSlots()
+
+// States
+const isOpen = ref(false)
+const anchorPoint = ref({ x: 0, y: 0 })
+
+// Computed
+const hasMenuContent = computed(() => {
+    return props.items.length > 0 || Boolean(slots.items)
+})
+
+// Methods
+const openAtCursor = (event: MouseEvent) => {
+    anchorPoint.value = {
+        x: event.clientX,
+        y: event.clientY,
+    }
+
+    isOpen.value = true
+}
+
+const onContextMenu = async (event: MouseEvent) => {
+    if (props.disabled || !hasMenuContent.value) return
+
+    event.preventDefault()
+    openAtCursor(event)
+}
+</script>

package/components/dropdowns/ContextMenuDropdown.vue

@@ -0,0 +1,281 @@
+<template>
+    <template v-if="shouldTeleport">
+        <teleport :to="teleportTo">
+            <Transition
+                appear
+                enter-active-class="transition-opacity duration-200 ease-out"
+                enter-from-class="opacity-0"
+                leave-active-class="transition-opacity duration-150 ease-in"
+                leave-to-class="opacity-0"
+            >
+                <div
+                    v-if="modelValue"
+                    ref="menuPanel"
+                    data-context-menu-panel
+                    data-dropdown-menu-panel
+                    :class="[
+                        'bg-background-surface',
+                        'py-1',
+                        'rounded',
+                        hasShadow && 'shadow-lg',
+                        'flex flex-col',
+                        hasBorder && 'border border-border-default',
+                        dropdownClass,
+                    ]"
+                    :style="panelStyle"
+                    @contextmenu.prevent
+                >
+                    <slot
+                        v-if="$slots.items"
+                        name="items"
+                        :onClose="close"
+                    />
+                    <slot
+                        v-else
+                        :onClose="close"
+                    />
+                </div>
+            </Transition>
+        </teleport>
+    </template>
+
+    <Transition
+        v-else
+        appear
+        enter-active-class="transition-opacity duration-200 ease-out"
+        enter-from-class="opacity-0"
+        leave-active-class="transition-opacity duration-150 ease-in"
+        leave-to-class="opacity-0"
+    >
+        <div
+            v-if="modelValue"
+            ref="menuPanel"
+            data-context-menu-panel
+            data-dropdown-menu-panel
+            :class="[
+                'bg-background-surface',
+                'py-1',
+                'rounded',
+                hasShadow && 'shadow-lg',
+                'flex flex-col',
+                hasBorder && 'border border-border-default',
+                dropdownClass,
+            ]"
+            :style="panelStyle"
+            @contextmenu.prevent
+        >
+            <slot
+                v-if="$slots.items"
+                name="items"
+                :onClose="close"
+            />
+            <slot
+                v-else
+                :onClose="close"
+            />
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+// Imports
+import type { CSSProperties } from 'vue'
+
+// Props
+const props = defineProps({
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    width: {
+        type: Number as PropType<number>,
+        default: 240,
+    },
+    x: {
+        type: Number as PropType<number>,
+        default: 0,
+    },
+    y: {
+        type: Number as PropType<number>,
+        default: 0,
+    },
+    positionXOffset: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0,
+    },
+    positionYOffset: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0,
+    },
+    hasShadow: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    dropdownClass: String as PropType<string>,
+    shouldTeleport: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    teleportTo: {
+        type: String as PropType<string>,
+        default: 'body',
+    },
+    zIndex: {
+        type: String as PropType<string>,
+        default: '50',
+    },
+})
+
+// Emits
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+}>()
+
+// States
+const menuPanel = ref<HTMLElement | null>(null)
+const resolvedPosition = ref({ left: 0, top: 0 })
+const previousBodyOverflow = ref<string | null>(null)
+const previousBodyPaddingRight = ref<string | null>(null)
+
+// Methods
+const close = () => {
+    emit('update:modelValue', false)
+}
+
+const lockScroll = () => {
+    if (previousBodyOverflow.value === null) {
+        previousBodyOverflow.value = document.body.style.overflow
+    }
+
+    if (previousBodyPaddingRight.value === null) {
+        previousBodyPaddingRight.value = document.body.style.paddingRight
+    }
+
+    const previousViewportWidth = document.documentElement.clientWidth
+    document.body.style.overflow = 'hidden'
+    const currentViewportWidth = document.documentElement.clientWidth
+    const layoutShiftWidth = Math.max(0, currentViewportWidth - previousViewportWidth)
+
+    const computedPaddingRight = Number.parseFloat(getComputedStyle(document.body).paddingRight)
+    const currentPaddingRight = Number.isNaN(computedPaddingRight) ? 0 : computedPaddingRight
+
+    if (layoutShiftWidth > 0) {
+        document.body.style.paddingRight = `${currentPaddingRight + layoutShiftWidth}px`
+    }
+}
+
+const unlockScroll = () => {
+    document.body.style.overflow = previousBodyOverflow.value ?? ''
+    document.body.style.paddingRight = previousBodyPaddingRight.value ?? ''
+
+    previousBodyOverflow.value = null
+    previousBodyPaddingRight.value = null
+}
+
+const toOffsetNumber = (value: number | string) => {
+    if (typeof value === 'number') return value
+    const parsed = Number.parseFloat(value)
+    return Number.isNaN(parsed) ? 0 : parsed
+}
+
+const updatePosition = () => {
+    const panel = menuPanel.value
+    if (!panel) return
+
+    const x = props.x + toOffsetNumber(props.positionXOffset)
+    const y = props.y + toOffsetNumber(props.positionYOffset)
+    const rect = panel.getBoundingClientRect()
+
+    const maxLeft = Math.max(0, window.innerWidth - rect.width)
+    const maxTop = Math.max(0, window.innerHeight - rect.height)
+
+    resolvedPosition.value = {
+        left: Math.min(Math.max(0, x), maxLeft),
+        top: Math.min(Math.max(0, y), maxTop),
+    }
+}
+
+const schedulePositionUpdate = () => {
+    nextTick(() => {
+        requestAnimationFrame(updatePosition)
+    })
+}
+
+const handlePointerDown = (event: MouseEvent) => {
+    if (!props.modelValue || !menuPanel.value) return
+
+    const target = event.target as Node | null
+    if (!target) return
+
+    if (!menuPanel.value.contains(target)) {
+        close()
+    }
+}
+
+const handleWindowResize = () => {
+    if (!props.modelValue) return
+
+    updatePosition()
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+    if (!props.modelValue) return
+
+    if (event.key === 'Escape') {
+        close()
+    }
+}
+
+// Watchers
+watch(
+    () => props.modelValue,
+    (isOpen) => {
+        if (isOpen) {
+            schedulePositionUpdate()
+            lockScroll()
+        } else {
+            unlockScroll()
+        }
+    },
+)
+
+watch(
+    () => [props.x, props.y, props.positionXOffset, props.positionYOffset],
+    () => {
+        if (props.modelValue) {
+            schedulePositionUpdate()
+        }
+    },
+)
+
+const panelStyle = computed<CSSProperties>(() => {
+    return {
+        position: 'fixed',
+        left: `${resolvedPosition.value.left}px`,
+        top: `${resolvedPosition.value.top}px`,
+        width: `${props.width}px`,
+        zIndex: props.zIndex,
+    }
+})
+
+onMounted(() => {
+    document.addEventListener('mousedown', handlePointerDown)
+    window.addEventListener('resize', handleWindowResize)
+    document.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+    unlockScroll()
+    document.removeEventListener('mousedown', handlePointerDown)
+    window.removeEventListener('resize', handleWindowResize)
+    document.removeEventListener('keydown', handleKeydown)
+})
+
+defineExpose({
+    close,
+})
+</script>