@nexxtmove/ui 0.1.42 → 0.1.43

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/DropdownButton/DropdownButton.vue

@@ -1,17 +1,24 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, computed } from 'vue'
 import NexxtIcon from '../Icon/Icon.vue'
+import NexxtCheckbox from '../Checkbox/Checkbox.vue'
 
 interface NexxtDropdownButton {
   label: string
   action: string | (() => void)
   icon?: InstanceType<typeof NexxtIcon>['name']
   selected?: boolean
+  checkbox?: boolean
+}
+
+interface NexxtDropdownButtonGroup {
+  title: string
+  items: NexxtDropdownButton[]
 }
 
 type NexxtDropdownButtonBase = {
   variant?: 'primary' | 'secondary'
-  options: NexxtDropdownButton[]
+  options: NexxtDropdownButton[] | NexxtDropdownButtonGroup[]
   placement?: 'left' | 'right'
   triggerIcon?: InstanceType<typeof NexxtIcon>['name']
   icon?: InstanceType<typeof NexxtIcon>['name']
@@ -34,10 +41,12 @@ const {
 
 const emit = defineEmits<{
   navigate: [url: string]
+  checkboxChange: [label: string, checked: boolean]
 }>()
 
 const isOpen = ref(false)
 const wrapperRef = ref<HTMLElement | null>(null)
+const checkedItems = ref<Record<string, boolean>>({})
 
 const handleAction = (action: string | (() => void)) => {
   if (typeof action === 'function') {
@@ -51,9 +60,15 @@ const toggleDropdown = () => {
   isOpen.value = !isOpen.value
 }
 
-const handleOptionClick = (optionAction: string | (() => void)) => {
-  handleAction(optionAction)
-  isOpen.value = false
+const handleOptionClick = (option: NexxtDropdownButton) => {
+  if (option.checkbox) {
+    const newValue = !checkedItems.value[option.label]
+    checkedItems.value[option.label] = newValue
+    emit('checkboxChange', option.label, newValue)
+  } else {
+    isOpen.value = false
+  }
+  handleAction(option.action)
 }
 
 const handleClickOutside = (event: MouseEvent) => {
@@ -70,6 +85,15 @@ onUnmounted(() => {
   document.removeEventListener('mousedown', handleClickOutside)
 })
 
+const isGrouped = (
+  opts: NexxtDropdownButton[] | NexxtDropdownButtonGroup[],
+): opts is NexxtDropdownButtonGroup[] => opts.length > 0 && 'items' in opts[0]
+
+const groupedOptions = computed<NexxtDropdownButtonGroup[]>(() => {
+  if (isGrouped(options)) return options
+  return [{ title: '', items: options }]
+})
+
 const componentClasses = computed(() => {
   if (variant === 'primary') {
     return 'bg-button-bg-primary-default text-button-text-primary-default'
@@ -154,17 +178,33 @@ const transitionClasses = computed(() => {
         class="absolute top-full z-10 mt-2.5 min-w-full rounded-md border border-gray-200 bg-white whitespace-nowrap"
         :class="placement === 'right' ? 'right-0' : 'left-0'"
       >
-        <button
-          v-for="option in options"
-          :key="option.label"
-          role="menuitem"
-          class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
-          :class="option.selected ? 'bg-cornflower-blue-100' : ''"
-          @click="handleOptionClick(option.action)"
-        >
-          <NexxtIcon v-if="option.icon" :name="option.icon" aria-hidden="true" />
-          {{ option.label }}
-        </button>
+        <template v-for="(group, groupIndex) in groupedOptions" :key="group.title || groupIndex">
+          <div
+            v-if="group.title"
+            class="border-b border-gray-100 px-4 py-1.5 extra-small-normal text-gray-600"
+            :class="groupIndex > 0 ? 'mt-1 border-t pt-2' : ''"
+          >
+            {{ group.title }}
+          </div>
+          <button
+            v-for="option in group.items"
+            :key="option.label"
+            :role="option.checkbox ? 'menuitemcheckbox' : 'menuitem'"
+            :aria-checked="option.checkbox ? (checkedItems[option.label] ?? false) : undefined"
+            class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
+            :class="!option.checkbox && option.selected ? 'bg-cornflower-blue-100' : ''"
+            @click="handleOptionClick(option)"
+          >
+            <template v-if="option.checkbox">
+              <NexxtCheckbox
+                :model-value="checkedItems[option.label] ?? false"
+                class="pointer-events-none"
+              />
+            </template>
+            <NexxtIcon v-else-if="option.icon" :name="option.icon" aria-hidden="true" />
+            {{ option.label }}
+          </button>
+        </template>
       </div>
     </Transition>
   </div>