Merge pull request #52 from selemondev/feat/Modal

feat(app): #38 modal

packages/windi/src/App.vue

@@ -1,11 +1,20 @@
 <script setup lang='ts'>
-function handleClose() {
-  alert('Closing')
+import { ref } from 'vue'
+
+const isActive = ref(false)
+
+function handleOpen() {
+  return isActive.value = true
 }
 </script>
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WTag value="Success" variant="success-light" closable @close="handleClose" />
+    <button @click="handleOpen">
+      Open Modal
+    </button>
+    <WModal v-model="isActive">
+      hello there
+    </WModal>
   </div>
 </template>

packages/windi/src/Types/componentsTypes/components.ts

@@ -145,6 +145,19 @@ export interface WTag extends WComponentRoot {
   tagCloseIcon?: string
 }
 
+export interface WModal extends WComponentRoot {
+  modalWrapper?: string
+  modalContainer?: string
+  modalBase?: string
+  modalOverlayBase?: string
+  modalOverlayBackground?: string
+  modalOverlayTransition?: string
+  modalShadow?: string
+  modalWidth?: string
+  modalHeight?: string
+  modalTransition?: string
+}
+
 export type WAccordionVariant = WithVariantProps<WAccordion>
 
 export type WAccordionItemVariants = WithVariantProps<WAccordionItem>
@@ -176,3 +189,5 @@ export type WDividerVariants = WithVariantProps<WDivider>
 export type WSwitchVariants = WithVariantProps<WSwitch>
 
 export type WTagVariants = WithVariantProps<WTag>
+
+export type WModalVariants = WithVariantProps<WModal>

packages/windi/src/Types/enums/Components.ts

@@ -15,4 +15,5 @@ export enum Components {
   WDivider = 'WDivider',
   WSwitch = 'WSwitch',
   WTag = 'WTag',
+  WModal = 'WModal',
 }

packages/windi/src/components/Modal/WModal.vue

@@ -0,0 +1,107 @@
+<script setup lang='ts'>
+import { computed, defineComponent } from 'vue'
+import classNames from 'classnames'
+import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
+import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
+import { useVariants } from '../../composables/useVariants'
+import type { WModal } from '../../Types/componentsTypes/components'
+import { Components } from '../../Types/enums/Components'
+
+const props = defineProps({
+  ...getVariantPropsWithClassesList<WModal>(),
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disableClose: {
+    type: Boolean,
+    default: false,
+  },
+  appear: {
+    type: Boolean,
+    default: false,
+  },
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  transition: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'close')
+}>()
+
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+  }
+
+  return useVariants<WModal>(
+    Components.WModal,
+    customProps as VariantJSWithClassesListProps<WModal>,
+  )
+})
+
+const isOpen = computed({
+  get() {
+    return props.modelValue
+  },
+
+  set(value) {
+    return emit('update:modelValue', value)
+  },
+})
+
+const transitionClassWrapper = computed(() => {
+  if (!props.transition)
+    return {}
+
+  return {
+    ...variant.value.transitions,
+  }
+})
+
+function close(value: boolean) {
+  isOpen.value = value
+
+  emit('close')
+}
+
+const transitionOverlay = computed(() => {
+  return classNames(
+    variant.value.modalOverlayTransition,
+  )
+})
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: Components.WModal,
+})
+</script>
+
+<template>
+  <TransitionRoot :appear="appear" :show="isOpen" as="template">
+    <Dialog :class="variant.root" @close="(e: boolean) => !props.disableClose && close(e)">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="transitionOverlay">
+        <div :class="[variant.modalOverlayBase, variant.modalOverlayBackground]" />
+      </TransitionChild>
+
+      <div :class="variant.modalWrapper">
+        <div :class="variant.container">
+          <TransitionChild as="template" :appear="appear" v-bind="transitionClassWrapper">
+            <DialogPanel :class="[variant.modalBase, variant.modalHeight, variant.modalWidth, variant.modalShadow, variant.modalBackground, variant.modalRing, variant.modalRounded]">
+              <slot />
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

packages/windi/src/components/Modal/index.ts

@@ -0,0 +1,5 @@
+import Modal from './WModal.vue'
+
+export default {
+  Modal,
+}

packages/windi/src/index.ts

@@ -18,6 +18,7 @@ import Divider from './components/Divider/WDivider.vue'
 import Switch from './components/Switch/WSwitch.vue'
 import Tag from './components/Tag/WTag.vue'
 import windiTheme from './theme/windiTheme'
+import Modal from './components/Modal/WModal.vue'
 
 const components: Record<string, ReturnType<typeof defineComponent>> = {
   Accordion,
@@ -36,6 +37,7 @@ const components: Record<string, ReturnType<typeof defineComponent>> = {
   Divider,
   Switch,
   Tag,
+  Modal,
 }
 
 function install(app: App, configuration: WindiUIConfiguration) {
@@ -62,3 +64,4 @@ export { default as Checkbox } from './components/Checkbox'
 export { default as Divider } from './components/Divider'
 export { default as Switch } from './components/Switch'
 export { default as Tag } from './components/Tag'
+export { default as Modal } from './components/Modal'

packages/windi/src/theme/windiTheme.ts

@@ -806,6 +806,39 @@ export default {
     },
   },
 
+  WModal: {
+    base: {
+      root: 'relative z-50',
+      modalWrapper: 'fixed inset-0 overflow-y-auto',
+      modalContainer: 'flex min-h-full items-end justify-center text-center p-4 sm:p-0 sm:items-center',
+      modalBase: 'relative text-left rtl:text-right overflow-hidden sm:my-8 w-full flex flex-col',
+      modalShadow: 'shadow-xl',
+      modalWidth: 'sm:max-w-lg',
+      modalBackground: 'bg-background',
+      modalRing: '',
+      modalRounded: 'rounded-lg',
+      modalHeight: '',
+      modalOverlayBase: 'fixed inset-0 transition-opacity',
+      modalOverlayBackground: 'bg-gray-200/75 dark:bg-gray-800/75',
+      modalOverlayTransition: {
+        enter: 'ease-out duration-300',
+        enterFrom: 'opacity-0',
+        enterTo: 'opacity-100',
+        leave: 'ease-in duration-200',
+        leaveFrom: 'opacity-100',
+        leaveTo: 'opacity-0',
+      },
+      modalTransition: {
+        enter: 'ease-out duration-300',
+        enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+        enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+        leave: 'ease-in duration-200',
+        leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
+        leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+      },
+    },
+  },
+
   transitions: {
     scale: {
       'enter-active-class': 'duration-200 ease-[cubic-bezier(0.175,0.885,0.32,1.475)]',