@indielayer/ui 1.0.0-alpha.9 → 1.0.0

package/src/components/modal/Modal.vue

@@ -1,131 +1,109 @@
 <script lang="ts">
-import { computed, defineComponent, ref, watch, type PropType } from 'vue'
+export default { name: 'XModal' }
+</script>
 
+<script setup lang="ts">
+import { ref, watch, type PropType } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
+import { useTheme } from '../../composables/theme'
+import { closeIcon } from '../../common/icons'
+
+import theme from './Modal.theme'
 
 import XScroll from '../../components/scroll/Scroll.vue'
 import XIcon from '../icon/Icon.vue'
 
-export default defineComponent({
-  name: 'XModal',
-
-  components: {
-    XScroll,
-    XIcon,
+const props = defineProps({
+  size: {
+    type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>,
+    default: 'md',
   },
+  modelValue: Boolean,
+  showClose: Boolean,
+  backdrop: Boolean,
+})
 
-  props: {
-    size: {
-      type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>,
-      default: 'md',
-    },
-    modelValue: Boolean,
-    showClose: Boolean,
-    backdrop: Boolean,
-  },
+const emit = defineEmits(['update:modelValue'])
+
+const value = ref(props.modelValue)
+const visible = ref(false)
+const modalRef = ref<HTMLElement | null>(null)
 
-  emits: ['update:modelValue'],
+let stopClickOutside: undefined | (()=> void) = undefined
 
-  expose: ['open', 'close'],
+watch(value, (val) => {
+  if (stopClickOutside) {
+    stopClickOutside()
+    stopClickOutside = undefined
+  }
 
-  setup(props, { emit }) {
-    const value = ref(props.modelValue)
-    const visible = ref(false)
-    const modalRef = ref<HTMLElement | null>(null)
+  if (val) {
+    setTimeout(() => {
+      stopClickOutside = onClickOutside(modalRef, close)
+    })
+  }
+})
 
-    const classes = computed(() => {
-      if (props.size === 'full') return 'w-full'
-      else if (props.size === 'xs') return 'sm:max-w-xs w-full'
-      else if (props.size === 'sm') return 'sm:max-w-sm w-full'
-      else if (props.size === 'lg') return 'sm:max-w-xl w-full'
-      else if (props.size === 'xl') return 'sm:max-w-3xl w-full'
+watch(() => props.modelValue, (val) => {
+  if (val) {
+    value.value = val
 
-      return 'sm:max-w-lg w-full'
+    setTimeout(() => {
+      visible.value = val
     })
+  } else {
+    visible.value = val
 
-    let stopClickOutside: undefined | (()=> void) = undefined
+    setTimeout(() => {
+      value.value = val
+    }, 150)
+  }
+})
 
-    watch(value, (val) => {
-      if (stopClickOutside) {
-        stopClickOutside()
-        stopClickOutside = undefined
-      }
+useEventListener(document, 'keydown', onKeyDown)
 
-      if (val) {
-        setTimeout(() => {
-          stopClickOutside = onClickOutside(modalRef, close)
-        })
-      }
-    })
+function onKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && value.value) close()
+}
 
-    watch(() => props.modelValue, (val) => {
-      if (val) {
-        value.value = val
+function close() {
+  visible.value = false
 
-        setTimeout(() => {
-          visible.value = val
-        })
-      } else {
-        visible.value = val
+  setTimeout(() => {
+    value.value = false
+    emit('update:modelValue', false)
+  }, 150)
+}
 
-        setTimeout(() => {
-          value.value = val
-        }, 150)
-      }
-    })
+function open() {
+  value.value = true
+  emit('update:modelValue', true)
 
-    useEventListener(document, 'keydown', onKeyDown)
-
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.key === 'Escape' && value.value) close()
-    }
-
-    function close() {
-      visible.value = false
-
-      setTimeout(() => {
-        value.value = false
-        emit('update:modelValue', false)
-      }, 150)
-    }
-
-    function open() {
-      value.value = true
-      emit('update:modelValue', true)
-
-      setTimeout(() => {
-        visible.value = true
-      })
-    }
-
-    const closeIcon = '<path d="M6 18L18 6M6 6l12 12" />'
-
-    return {
-      closeIcon,
-      modalRef,
-      classes,
-      visible,
-      value,
-      close,
-      open,
-    }
-  },
-})
+  setTimeout(() => {
+    visible.value = true
+  })
+}
+
+const { styles, classes, className } = useTheme('modal', theme, props)
+
+defineExpose({ open, close })
 </script>
 
 <template>
-  <Teleport to="body">
+  <teleport to="body">
     <div
       v-if="value"
-      class="fixed z-40 inset-0 overflow-y-auto transition-all"
+      :style="styles"
       :class="[
+        className,
+        classes.wrapper,
         visible ? 'visible' : 'invisible ease-in duration-100'
       ]"
     >
       <div
         v-if="backdrop"
-        class="fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"
         :class="[
+          classes.backdrop,
           visible ? 'ease-out duration-200 opacity-30 dark:opacity-70' : 'ease-in duration-100 opacity-0',
         ]"
       ></div>
@@ -133,9 +111,8 @@ export default defineComponent({
       <div class="flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen">
         <div
           ref="modalRef"
-          class="relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full"
           :class="[
-            classes,
+            classes.modal,
             visible ?
               'ease-out duration-200 opacity-100 translate-y-0 sm:scale-100'
               : 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
@@ -146,8 +123,8 @@ export default defineComponent({
         >
           <div
             v-if="showClose"
-            class="flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer"
             :class="[
+              classes.closeIcon,
               $slots.image ? 'bg-gray-900 text-white' : 'bg-gray-500 text-gray-800 dark:text-gray-300'
             ]"
             @click="close"
@@ -155,7 +132,7 @@ export default defineComponent({
             <x-icon :icon="closeIcon"/>
           </div>
           <slot name="image"></slot>
-          <div v-if="$slots.header" class="text-lg font-semibold px-6 py-4 border-b">
+          <div v-if="$slots.header" :class="classes.header">
             <slot name="header"></slot>
           </div>
           <x-scroll
@@ -163,15 +140,15 @@ export default defineComponent({
             :scrollbar="false"
             vertical
           >
-            <div class="px-6 py-4">
+            <div :class="classes.content">
               <slot></slot>
             </div>
           </x-scroll>
-          <div v-if="$slots.actions" class="bg-slate-50 dark:bg-gray-800 p-4">
+          <div v-if="$slots.actions" :class="classes.actions">
             <slot name="actions"></slot>
           </div>
         </div>
       </div>
     </div>
-  </Teleport>
+  </teleport>
 </template>

package/src/components/modal/__tests__/Modal.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Modal from '../Modal.vue'
+
+describe('Modal', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Modal)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/notifications/Notifications.theme.ts

@@ -0,0 +1,11 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen',
+
+    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
+
+    item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900',
+  },
+}