refactor(config): break ui.config.ts into separate files (#930)

src/runtime/ui.config/overlays/contextMenu.ts

@@ -0,0 +1,26 @@
+import arrow from '../_popperArrow'
+
+export default {
+  wrapper: 'relative',
+  container: 'z-20 group',
+  width: '',
+  background: 'bg-white dark:bg-gray-900',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-md',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  base: 'overflow-hidden focus:outline-none relative',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transition ease-out duration-200',
+    enterFromClass: 'opacity-0 translate-y-1',
+    enterToClass: 'opacity-100 translate-y-0',
+    leaveActiveClass: 'transition ease-in duration-150',
+    leaveFromClass: 'opacity-100 translate-y-0',
+    leaveToClass: 'opacity-0 translate-y-1'
+  },
+  popper: {
+    placement: 'bottom-start',
+    scroll: false
+  },
+  arrow
+}

src/runtime/ui.config/overlays/modal.ts

@@ -0,0 +1,36 @@
+export default {
+  wrapper: 'relative z-50',
+  inner: 'fixed inset-0 overflow-y-auto',
+  container: 'flex min-h-full items-end sm:items-center justify-center text-center',
+  padding: 'p-4 sm:p-0',
+  margin: 'sm:my-8',
+  base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
+  overlay: {
+    base: 'fixed inset-0 transition-opacity',
+    background: 'bg-gray-200/75 dark:bg-gray-800/75',
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+    transition: {
+      enter: 'ease-out duration-300',
+      enterFrom: 'opacity-0',
+      enterTo: 'opacity-100',
+      leave: 'ease-in duration-200',
+      leaveFrom: 'opacity-100',
+      leaveTo: 'opacity-0'
+    }
+  },
+  background: 'bg-white dark:bg-gray-900',
+  ring: '',
+  rounded: 'rounded-lg',
+  shadow: 'shadow-xl',
+  width: 'sm:max-w-lg',
+  height: '',
+  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+  transition: {
+    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'
+  }
+}

src/runtime/ui.config/overlays/notification.ts

@@ -0,0 +1,49 @@
+export default {
+  wrapper: 'w-full pointer-events-auto',
+  container: 'relative overflow-hidden',
+  title: 'text-sm font-medium text-gray-900 dark:text-white',
+  description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
+  actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
+  background: 'bg-white dark:bg-gray-900',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-lg',
+  padding: 'p-4',
+  gap: 'gap-3',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  icon: {
+    base: 'flex-shrink-0 w-5 h-5',
+    color: 'text-{color}-500 dark:text-{color}-400'
+  },
+  avatar: {
+    base: 'flex-shrink-0 self-center',
+    size: 'md' as const
+  },
+  progress: {
+    base: 'absolute bottom-0 end-0 start-0 h-1',
+    background: 'bg-{color}-500 dark:bg-{color}-400'
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transform ease-out duration-300 transition',
+    enterFromClass: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
+    enterToClass: 'translate-y-0 opacity-100 sm:translate-x-0',
+    leaveActiveClass: 'transition ease-in duration-100',
+    leaveFromClass: 'opacity-100',
+    leaveToClass: 'opacity-0'
+  },
+  default: {
+    color: 'primary',
+    icon: null,
+    timeout: 5000,
+    closeButton: {
+      icon: 'i-heroicons-x-mark-20-solid',
+      color: 'gray',
+      variant: 'link',
+      padded: false
+    },
+    actionButton: {
+      size: 'xs',
+      color: 'white'
+    }
+  }
+}

src/runtime/ui.config/overlays/notifications.ts

@@ -0,0 +1,6 @@
+export default {
+  wrapper: 'fixed flex flex-col justify-end z-[55]',
+  position: 'bottom-0 end-0',
+  width: 'w-full sm:w-96',
+  container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
+}

src/runtime/ui.config/overlays/popover.ts

@@ -0,0 +1,25 @@
+import arrow from '../_popperArrow'
+
+export default {
+  wrapper: 'relative',
+  container: 'z-20 group',
+  width: '',
+  background: 'bg-white dark:bg-gray-900',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-md',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  base: 'overflow-hidden focus:outline-none relative',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transition ease-out duration-200',
+    enterFromClass: 'opacity-0 translate-y-1',
+    enterToClass: 'opacity-100 translate-y-0',
+    leaveActiveClass: 'transition ease-in duration-150',
+    leaveFromClass: 'opacity-100 translate-y-0',
+    leaveToClass: 'opacity-0 translate-y-1'
+  },
+  popper: {
+    strategy: 'fixed'
+  },
+  arrow
+}

src/runtime/ui.config/overlays/slideover.ts

@@ -0,0 +1,28 @@
+export default {
+  wrapper: 'fixed inset-0 flex z-50',
+  overlay: {
+    base: 'fixed inset-0 transition-opacity',
+    background: 'bg-gray-200/75 dark:bg-gray-800/75',
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+    transition: {
+      enter: 'ease-in-out duration-500',
+      enterFrom: 'opacity-0',
+      enterTo: 'opacity-100',
+      leave: 'ease-in-out duration-500',
+      leaveFrom: 'opacity-100',
+      leaveTo: 'opacity-0'
+    }
+  },
+  base: 'relative flex-1 flex flex-col w-full focus:outline-none',
+  background: 'bg-white dark:bg-gray-900',
+  ring: '',
+  rounded: '',
+  padding: '',
+  shadow: 'shadow-xl',
+  width: 'w-screen max-w-md',
+  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+  transition: {
+    enter: 'transform transition ease-in-out duration-300',
+    leave: 'transform transition ease-in-out duration-200'
+  }
+}

src/runtime/ui.config/overlays/tooltip.ts

@@ -0,0 +1,27 @@
+import arrow from '../_popperArrow'
+
+export default {
+  wrapper: 'relative inline-flex',
+  container: 'z-20 group',
+  width: 'max-w-xs',
+  background: 'bg-white dark:bg-gray-900',
+  color: 'text-gray-900 dark:text-white',
+  shadow: 'shadow',
+  rounded: 'rounded',
+  ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+  base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
+  shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: 'transition ease-out duration-200',
+    enterFromClass: 'opacity-0 translate-y-1',
+    enterToClass: 'opacity-100 translate-y-0',
+    leaveActiveClass: 'transition ease-in duration-150',
+    leaveFromClass: 'opacity-100 translate-y-0',
+    leaveToClass: 'opacity-0 translate-y-1'
+  },
+  popper: {
+    strategy: 'fixed'
+  },
+  arrow
+}