@nexxtmove/ui 0.1.41 → 0.1.43

package/dist/nuxt.js

@@ -1,5 +1,5 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", b = "components/Pagination/Pagination.vue", f = "components/ProgressBar/ProgressBar.vue", h = "components/SocialIcons/SocialIcons.vue", P = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", k = "components/SocialMediaTemplate/SocialMediaTemplate.vue", B = "components/SocialMediaType/SocialMediaType.vue", I = "components/StepperHeader/StepperHeader.vue", M = "components/Table/Table.vue", g = "components/TimelineEvent/TimelineEvent.vue", y = "components/TimelinePhaseblock/TimelinePhaseblock.vue", A = "components/Tooltip/Tooltip.vue", D = {
+const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", b = "components/Modal/Modal.vue", f = "components/Pagination/Pagination.vue", h = "components/ProgressBar/ProgressBar.vue", M = "components/SocialIcons/SocialIcons.vue", P = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", k = "components/SocialMediaTemplate/SocialMediaTemplate.vue", B = "components/SocialMediaType/SocialMediaType.vue", I = "components/StepperHeader/StepperHeader.vue", g = "components/Table/Table.vue", y = "components/TimelineEvent/TimelineEvent.vue", A = "components/TimelinePhaseblock/TimelinePhaseblock.vue", D = "components/Tooltip/Tooltip.vue", H = {
   NexxtAnimatedNumber: i,
   NexxtAvatar: m,
   NexxtButton: x,
@@ -13,18 +13,19 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
   NexxtIcon: T,
   NexxtInfoBlock: C,
   NexxtInputField: S,
-  NexxtPagination: b,
-  NexxtProgressBar: f,
-  NexxtSocialIcons: h,
+  NexxtModal: b,
+  NexxtPagination: f,
+  NexxtProgressBar: h,
+  NexxtSocialIcons: M,
   NexxtSocialMediaCustomTemplate: P,
   NexxtSocialMediaTemplate: k,
   NexxtSocialMediaType: B,
   NexxtStepperHeader: I,
-  NexxtTable: M,
-  NexxtTimelineEvent: g,
-  NexxtTimelinePhaseblock: y,
-  NexxtTooltip: A
-}, w = c({
+  NexxtTable: g,
+  NexxtTimelineEvent: y,
+  NexxtTimelinePhaseblock: A,
+  NexxtTooltip: D
+}, E = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -36,7 +37,7 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(D))
+    for (const [t, n] of Object.entries(H))
       s({
         name: t,
         export: "default",
@@ -55,5 +56,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
   }
 });
 export {
-  w as default
+  E as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.41",
+  "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>

package/src/components/Modal/Modal.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+} from 'reka-ui'
+import { computed } from 'vue'
+import NexxtIcon from '../Icon/Icon.vue'
+
+defineOptions({
+  name: 'NexxtModal',
+})
+
+interface NexxtModalProps {
+  title?: string
+  description?: string
+  size?: 'sm' | 'md' | 'lg'
+  dismissible?: boolean
+  showClose?: boolean
+  beforeClose?: () => boolean | Promise<boolean>
+}
+
+const {
+  size = 'md',
+  dismissible = true,
+  showClose = true,
+  description: rawDescription,
+  beforeClose,
+} = defineProps<NexxtModalProps>()
+
+const open = defineModel<boolean>({ default: false })
+
+const description = computed(() => rawDescription?.trim() || undefined)
+
+const handleOpenChange = async (val: boolean) => {
+  if (val) {
+    open.value = true
+    return
+  }
+  if (beforeClose && !(await beforeClose())) return
+  open.value = false
+}
+
+const sizeClass = {
+  sm: 'max-w-xl',
+  md: 'max-w-3xl',
+  lg: 'max-w-5xl',
+}
+</script>
+
+<template>
+  <DialogRoot :open="open" @update:open="handleOpenChange">
+    <DialogPortal>
+      <div class="pointer-events-none fixed inset-0 z-50 grid place-items-center px-8">
+        <Transition
+          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"
+        >
+          <DialogOverlay
+            v-if="open"
+            class="pointer-events-auto absolute inset-0 bg-black/40 backdrop-blur-sm"
+          />
+        </Transition>
+        <Transition
+          enter-active-class="transition-[opacity,translate] duration-200 ease-out"
+          enter-from-class="opacity-0 translate-y-5"
+          leave-active-class="transition-[opacity,translate] duration-150 ease-in"
+          leave-to-class="opacity-0 translate-y-5"
+        >
+          <DialogContent
+            v-if="open"
+            :class="[
+              'pointer-events-auto relative z-10 flex max-h-[85vh] w-full flex-col overflow-x-auto rounded-3xl bg-white shadow-lg',
+              sizeClass[size],
+            ]"
+            :aria-describedby="description ? undefined : 'undefined'"
+            @pointer-down-outside="!dismissible && $event.preventDefault()"
+            @interact-outside="!dismissible && $event.preventDefault()"
+            @escape-key-down="!dismissible && $event.preventDefault()"
+          >
+            <div
+              v-if="title || description"
+              class="flex items-start justify-between border-b border-gray-200 px-6 py-5"
+            >
+              <div>
+                <DialogTitle v-if="title" class="heading-2">{{ title }}</DialogTitle>
+                <DialogDescription v-if="description" class="small-normal">
+                  {{ description }}
+                </DialogDescription>
+              </div>
+              <DialogClose
+                v-if="showClose"
+                class="ml-4 shrink-0 cursor-pointer rounded p-1 focus-visible:outline-2"
+              >
+                <NexxtIcon name="xmark" />
+              </DialogClose>
+            </div>
+            <DialogClose
+              v-else-if="showClose"
+              class="absolute top-3 right-3 cursor-pointer rounded p-1 focus-visible:outline-2"
+            >
+              <NexxtIcon name="xmark" />
+            </DialogClose>
+
+            <div :class="['overflow-y-auto px-6 pt-5', $slots.footer ? 'pb-5' : 'pb-6']">
+              <slot />
+            </div>
+
+            <div v-if="$slots.footer" class="flex justify-end gap-2 px-6 py-5">
+              <slot name="footer" />
+            </div>
+          </DialogContent>
+        </Transition>
+      </div>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/src/components.json

@@ -12,6 +12,7 @@
   "NexxtIcon": "components/Icon/Icon.vue",
   "NexxtInfoBlock": "components/InfoBlock/InfoBlock.vue",
   "NexxtInputField": "components/InputField/InputField.vue",
+  "NexxtModal": "components/Modal/Modal.vue",
   "NexxtPagination": "components/Pagination/Pagination.vue",
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",

package/src/index.ts

@@ -12,6 +12,7 @@ export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'
 export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'
 export { default as NexxtInputField } from './components/InputField/InputField.vue'
+export { default as NexxtModal } from './components/Modal/Modal.vue'
 export { default as NexxtPagination } from './components/Pagination/Pagination.vue'
 export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBar.vue'
 export { default as NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'