@nexxtmove/ui 0.1.40 → 0.1.42

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.40",
+  "version": "0.1.42",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

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/Pagination/Pagination.vue

@@ -64,7 +64,7 @@ const {
           :key="index"
           :value="page.value"
           :disabled="disabled"
-          class="h-8 w-8 cursor-pointer rounded-lg border border-gray-200 transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed data-selected:border-cornflower-blue-500 data-selected:bg-cornflower-blue-500 data-selected:text-white data-selected:shadow-sm"
+          class="h-9 min-w-9 cursor-pointer rounded-lg border border-gray-200 px-2 transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed data-selected:border-cornflower-blue-500 data-selected:bg-cornflower-blue-500 data-selected:text-white data-selected:shadow-sm"
         >
           {{ page.value }}
         </PaginationListItem>

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'