@indielayer/ui 1.2.0 → 1.4.0

package/src/components/menu/Menu.vue

@@ -47,6 +47,9 @@ export type MenuArrayItem = {
 
 export type MenuProps = ExtractPublicPropTypes<typeof menuProps>
 
+type InternalClasses = 'wrapper'
+export interface MenuTheme extends ThemeComponent<MenuProps, InternalClasses> {}
+
 export default {
   name: 'XMenu',
   validators: {
@@ -57,21 +60,19 @@ export default {
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes, PropType } from 'vue'
-import { useCommon, type Size } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
+import { useCommon, type Size } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XMenuItem from './MenuItem.vue'
-import XCollapse from '../../components/collapse/Collapse.vue'
+import XAccordionItem from '../../components/accordion/AccordionItem.vue'
 import XDivider from '../../components/divider/Divider.vue'
 
-import theme from './Menu.theme'
-
 const props = defineProps(menuProps)
 
-const emit = defineEmits(['expand'])
+defineEmits(['expand', 'item-click'])
 
-const { styles, classes, className } = useTheme('menu', theme, props)
+const { styles, classes, className } = useTheme('Menu', {}, props)
 </script>
 
 <template>
@@ -86,7 +87,7 @@ const { styles, classes, className } = useTheme('menu', theme, props)
   >
     <template v-for="(item, index) in items" :key="index">
       <template v-if="item.items">
-        <x-collapse
+        <x-accordion-item
           v-if="item.collapsible !== false"
           :icon="item.collapseIcon || collapseIcon"
           :expanded="item.expanded || expanded"
@@ -103,7 +104,7 @@ const { styles, classes, className } = useTheme('menu', theme, props)
               :filled="item.filled || filled"
               :size="item.size || size"
               :disabled="disabled || item.disabled"
-              class="pr-10 font-medium"
+              class="font-medium"
             />
           </template>
           <template #content="{ expand }">
@@ -120,9 +121,10 @@ const { styles, classes, className } = useTheme('menu', theme, props)
               :rounded="rounded"
               :filled="filled"
               @expand="expand(false)"
+              @item-click="$emit('item-click')"
             />
           </template>
-        </x-collapse>
+        </x-accordion-item>
         <template v-else>
           <x-menu-item
             :item="item"
@@ -133,6 +135,7 @@ const { styles, classes, className } = useTheme('menu', theme, props)
             :disabled="disabled || item.disabled"
             class="font-medium"
             inactive
+            @click="$emit('item-click')"
           />
           <x-menu
             class="x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700"
@@ -161,6 +164,7 @@ const { styles, classes, className } = useTheme('menu', theme, props)
           :size="item.size || size"
           :disabled="disabled || item.disabled"
           :class="{ 'my-2': item.divider }"
+          @click="$emit('item-click')"
           @active="$emit('expand')"
         />
       </template>

package/src/components/menu/MenuItem.vue

@@ -35,6 +35,10 @@ const menuItemProps = {
 
 export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>
 
+type InternalClasses = 'wrapper'
+type InternalExtraData = { isActive: Ref<boolean>; }
+export interface MenuItemTheme extends ThemeComponent<MenuItemProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XMenuItem',
   validators: {
@@ -44,16 +48,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, type ExtractPublicPropTypes, type PropType } from 'vue'
+import { ref, computed, watch, onMounted, type ExtractPublicPropTypes, type PropType, type Ref } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../../components/icon/Icon.vue'
 import XSpinner from '../../components/spinner/Spinner.vue'
 
-import theme from './MenuItem.theme'
 import type { MenuArrayItem } from './Menu.vue'
 
 const props = defineProps(menuItemProps)
@@ -116,7 +119,7 @@ watch(() => computedProps.value.active, (val) => {
   isActive.value = !!val
 })
 
-const { styles, classes, className } = useTheme('menu-item', theme, computedProps, { isActive })
+const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, { isActive })
 </script>
 
 <template>
@@ -125,7 +128,7 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
     ref="elRef"
     v-bind="computedProps.attrs"
     :to="computedProps.to"
-    :href="computedProps.href"
+    :href="computedProps.href || computedProps.to || ''"
     :target="computedProps.target"
     :color="computedProps.color"
     :style="styles"

package/src/components/menu/index.ts

@@ -1,7 +1,5 @@
 export { default as XMenu } from './Menu.vue'
-export type { MenuProps, MenuArrayItem } from './Menu.vue'
-export type { MenuTheme } from './Menu.theme'
+export type { MenuProps, MenuArrayItem, MenuTheme } from './Menu.vue'
 
 export { default as XMenuItem } from './MenuItem.vue'
-export type { MenuItemProps } from './MenuItem.vue'
-export type { MenuItemTheme } from './MenuItem.theme'
+export type { MenuItemProps, MenuItemTheme } from './MenuItem.vue'

package/src/components/menu/theme/Menu.base.theme.ts

@@ -0,0 +1,9 @@
+import type { MenuTheme } from '../Menu.vue'
+
+const theme: MenuTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme

package/src/components/menu/theme/Menu.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { MenuTheme } from '../Menu.vue'
+
+import BaseTheme from './Menu.base.theme'
+
+const theme: MenuTheme = BaseTheme
+
+export default theme

package/src/components/menu/{MenuItem.theme.ts → theme/MenuItem.base.theme.ts}

@@ -1,16 +1,6 @@
-import type { Ref } from 'vue'
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { MenuItemProps } from './MenuItem.vue'
+import type { MenuItemTheme } from '../MenuItem.vue'
 
-type InternalClasses = 'wrapper'
-type InternalExtraData = { isActive: Ref<boolean>; }
-
-interface InternalTheme extends ThemeComponent<MenuItemProps, InternalClasses, InternalExtraData> {}
-export interface MenuItemTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<MenuItemProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
+const theme: MenuItemTheme = {
   classes: {
     wrapper: ({ props, data }) => {
       const classes: any[] = ['relative !flex items-center whitespace-nowrap px-3']
@@ -54,10 +44,10 @@ const theme: InternalTheme = {
             text: color[500],
           },
           dark: {
-            bg: props.selected ? color[800] : color[700],
+            bg: props.selected ? color[700] : color[700],
             text: color[100],
             hover: {
-              bg: props.selected ? color[800] : color[700],
+              bg: props.selected ? color[700] : color[700],
               text: color[100],
             },
           },
@@ -75,7 +65,7 @@ const theme: InternalTheme = {
           bg: props.selected ? gray[800] : 'transparent',
           text: gray[200],
           hover: {
-            bg: gray[800],
+            bg: gray[600],
             text: gray[100],
           },
         },

package/src/components/menu/theme/MenuItem.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { MenuItemTheme } from '../MenuItem.vue'
+
+import BaseTheme from './MenuItem.base.theme'
+
+const theme: MenuItemTheme = BaseTheme
+
+export default theme

package/src/components/modal/Modal.vue

@@ -3,16 +3,50 @@ const modalSize = ['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const
 const modalProps = {
   size: {
     type: String as PropType<ModalSize>,
-    default: 'md',
+    default: 'xl',
   },
   modelValue: Boolean,
   showClose: Boolean,
   backdrop: Boolean,
+  hasActions: {
+    type: Boolean,
+    default: true,
+  },
+  hasHeader: {
+    type: Boolean,
+    default: true,
+  },
+  title: String,
+  description: String,
+  label: String,
+  loading: Boolean,
+  loadingText: String,
+  fluid: Boolean,
+
+  // form props
+  isForm: Boolean,
+  formDisabled: Boolean,
+  formDescription: String,
+  formTitle: String,
+  formAutoValidate: {
+    type: Boolean,
+    default: true,
+  },
+  formErrors: {
+    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    default: () => ([]),
+  },
 }
 
 export type ModalSize = typeof modalSize[number]
 export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
 
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label'
+type InternaData = {
+  visible: boolean;
+}
+export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses, InternaData> {}
+
 export default {
   name: 'XModal',
   validators: {
@@ -22,23 +56,27 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { ref, watch, type PropType, type ExtractPublicPropTypes, computed, nextTick, onMounted } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
-import { useTheme } from '../../composables/theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useFocusTrap } from '../../composables/useFocusTrap'
 import { closeIcon } from '../../common/icons'
 
-import theme from './Modal.theme'
-
-import XScroll from '../../components/scroll/Scroll.vue'
-import XIcon from '../icon/Icon.vue'
+import XButton from '../button/Button.vue'
+import XScroll from '../scroll/Scroll.vue'
+import XForm, { type FormError } from '../form/Form.vue'
+import { useSlots } from 'vue'
 
 const props = defineProps(modalProps)
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'submit'])
 
 const value = ref(props.modelValue)
 const visible = ref(false)
 const modalRef = ref<HTMLElement | null>(null)
+const modalWrapperRef = ref<HTMLElement | null>(null)
+
+const { initFocusTrap, clearFocusTrap } = useFocusTrap()
 
 let stopClickOutside: undefined | (() => void) = undefined
 
@@ -55,21 +93,29 @@ watch(value, (val) => {
   }
 })
 
-watch(() => props.modelValue, (val) => {
+watch(() => props.modelValue, checkVisibiliy, { immediate: true })
+
+async function checkVisibiliy() {
+  const val = props.modelValue
+
   if (val) {
     value.value = val
 
-    setTimeout(() => {
-      visible.value = val
-    })
-  } else {
+    await nextTick()
+
     visible.value = val
 
-    setTimeout(() => {
-      value.value = val
-    }, 150)
+    await nextTick()
+
+    initFocusTrap(modalRef)
+    document.body.style.overflow = 'hidden'
+  } else {
+    visible.value = val
+    value.value = val
+    clearFocusTrap()
+    document.body.style.overflow = 'auto'
   }
-})
+}
 
 if (typeof window !== 'undefined') useEventListener(document, 'keydown', onKeyDown)
 
@@ -79,23 +125,27 @@ function onKeyDown(event: KeyboardEvent) {
 
 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
-  })
+  visible.value = true
 }
 
-const { styles, classes, className } = useTheme('modal', theme, props)
+const slots = useSlots()
+
+const hasPlaceholder = computed(() => {
+  if (slots['tertiary-action'] || slots['cancel-action']) return true
+
+  return false
+})
+
+const { styles, classes, className } = useTheme('Modal', {}, props, {
+  visible,
+})
 
 defineExpose({ open, close })
 </script>
@@ -104,6 +154,7 @@ defineExpose({ open, close })
   <teleport to="body">
     <div
       v-if="value"
+      ref="modalWrapperRef"
       :style="styles"
       :class="[
         className,
@@ -113,38 +164,32 @@ defineExpose({ open, close })
     >
       <div
         v-if="backdrop"
-        :class="[
-          classes.backdrop,
-          visible ? 'ease-out duration-200 opacity-30 dark:opacity-70' : 'ease-in duration-100 opacity-0',
-        ]"
+        :class="classes.backdrop"
       ></div>
 
       <div class="flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen">
-        <div
+        <component
+          :is="isForm ? XForm : 'div'"
           ref="modalRef"
-          :class="[
-            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',
-          ]"
+          :disabled="formDisabled"
+          :auto-validate="formAutoValidate"
+          :title="formTitle"
+          :description="formDescription"
+          :errors="formErrors"
+          :class="classes.modal"
+          auto-focus
+          :has-footer="false"
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
+          @submit="$emit('submit')"
         >
-          <div
-            v-if="showClose"
-            :class="[
-              classes.closeIcon,
-              $slots.image ? 'bg-gray-900 text-white' : 'bg-gray-500 text-gray-800 dark:text-gray-300'
-            ]"
-            @click="close"
-          >
-            <x-icon :icon="closeIcon"/>
-          </div>
           <slot name="image"></slot>
-          <div v-if="$slots.header" :class="classes.header">
-            <slot name="header"></slot>
+          <div v-if="hasHeader" :class="classes.header">
+            <slot name="header">
+              <div v-if="label" :class="classes.label">{{ label }}</div>
+              <div v-if="title" :class="classes.title">{{ title }}</div>
+            </slot>
           </div>
           <x-scroll
             v-if="$slots.default"
@@ -152,13 +197,29 @@ defineExpose({ open, close })
             vertical
           >
             <div :class="classes.content">
+              <div v-if="description" :class="classes.description">{{ description }}</div>
               <slot></slot>
             </div>
           </x-scroll>
-          <div v-if="$slots.actions" :class="classes.actions">
-            <slot name="actions"></slot>
+          <x-button
+            v-if="showClose"
+            ghost
+            size="lg"
+            tabindex="-1"
+            :icon="closeIcon"
+            :class="classes.closeIcon"
+            @click="close"
+          />
+          <div v-if="hasActions" :class="classes.actions">
+            <slot name="actions">
+              <slot name="cancel-action"></slot>
+              <div v-if="hasPlaceholder"></div>
+              <slot name="tertiary-action"></slot>
+              <slot name="secondary-action"></slot>
+              <slot name="primary-action"></slot>
+            </slot>
           </div>
-        </div>
+        </component>
       </div>
     </div>
   </teleport>

package/src/components/modal/index.ts

@@ -1,3 +1,2 @@
 export { default as XModal } from './Modal.vue'
-export type { ModalProps, ModalSize } from './Modal.vue'
-export type { ModalTheme } from './Modal.theme'
+export type { ModalProps, ModalSize, ModalTheme } from './Modal.vue'

package/src/components/modal/theme/Modal.base.theme.ts

@@ -0,0 +1,47 @@
+import type { ModalTheme } from '../Modal.vue'
+
+const theme: ModalTheme = {
+  classes: {
+    wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
+
+    backdrop: ({ data }) => {
+      const classes = ['fixed inset-0 bg-gray-500 dark:bg-black transition-opacity']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-30 dark:opacity-70')
+      else classes.push('ease-in duration-100 opacity-0')
+
+      return classes
+    },
+
+    modal: ({ props, data }) => {
+      const classes = ['relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-100 translate-y-0 sm:scale-100')
+      else classes.push('ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')
+
+      if (props.size === 'xs') classes.push('sm:max-w-xs')
+      else if (props.size === 'sm') classes.push('sm:max-w-sm')
+      else if (props.size === 'lg') classes.push('sm:max-w-xl')
+      else if (props.size === 'xl') classes.push('sm:max-w-3xl')
+      else classes.push('sm:max-w-lg')
+
+      return classes
+    },
+
+    closeIcon: '!absolute top-2 z-10 right-2',
+
+    header: 'text-lg pl-6 py-4 border-b pr-12',
+
+    content: 'px-6 py-4',
+
+    actions: 'bg-slate-50 dark:bg-gray-800 p-4 grid grid-flow-col gap-4',
+
+    label: 'text-xs text-gray-500 mb-1',
+
+    title: 'text-xl font-semibold mb-4',
+
+    description: 'text-sm',
+  },
+}
+
+export default theme

package/src/components/modal/theme/Modal.carbon.theme.ts

@@ -0,0 +1,60 @@
+import type { ModalTheme } from '../Modal.vue'
+
+const theme: ModalTheme = {
+  classes: {
+    wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
+
+    backdrop: ({ data }) => {
+      const classes = ['fixed inset-0 bg-gray-500 dark:bg-black transition-opacity']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-70 dark:opacity-70')
+      else classes.push('ease-in duration-100 opacity-0')
+
+      return classes
+    },
+
+    modal: ({ props, data }) => {
+      const classes = ['relative flex flex-col z-10 bg-gray-200 dark:bg-gray-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-100 translate-y-0 sm:scale-100')
+      else classes.push('ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')
+
+      if (props.size === 'xs') classes.push('sm:max-w-xs')
+      else if (props.size === 'sm') classes.push('sm:max-w-sm')
+      else if (props.size === 'lg') classes.push('sm:max-w-xl')
+      else if (props.size === 'xl') classes.push('sm:max-w-3xl')
+      else classes.push('sm:max-w-lg')
+
+      return classes
+    },
+
+    closeIcon: '!absolute top-0 z-10 right-0',
+
+    header: 'text-lg pl-4 pt-4 pr-12',
+
+    content: ({ props }) => {
+      const classes = ['pb-8']
+
+      if (!props.fluid) classes.push('px-4')
+
+      return classes
+    },
+
+    actions: ({ props, slots }) => {
+      const classes = ['grid grid-flow-col gap-[1px]']
+
+      if (slots['tertiary-action'] || slots['cancel-action']) classes.push('grid-cols-4')
+      else classes.push('grid-cols-2')
+
+      return classes
+    },
+
+    label: 'text-xs text-gray-500 mb-1',
+
+    title: 'text-xl mb-4',
+
+    description: 'text-sm mb-4',
+  },
+}
+
+export default theme

package/src/components/notifications/Notifications.vue

@@ -53,6 +53,18 @@ export type NotificationEvent = {
   position?: NotificationsPosition;
 }
 
+export type NotificationInjection = {
+  log: (notification: NotificationEvent | string) => void;
+  info: (notification: NotificationEvent | string) => void;
+  warn: (notification: NotificationEvent | string) => void;
+  error: (notification: NotificationEvent | string) => void;
+  warning: (notification: NotificationEvent | string) => void;
+  success: (notification: NotificationEvent | string) => void;
+}
+
+type InternalClasses = 'wrapper' | 'list' | 'item'
+export interface NotificationsTheme extends ThemeComponent<NotificationsProps, InternalClasses> {}
+
 export default {
   name: 'XNotifications',
   validators,
@@ -62,16 +74,14 @@ export default {
 <script setup lang="ts">
 import { ref, provide, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { injectNotificationKey } from '../../composables/keys'
-import { useColors } from '../../composables/colors'
-import { useCSS } from '../../composables/css'
-import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/useColors'
+import { useCSS } from '../../composables/useCSS'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { closeIcon } from '../../common/icons'
 
 import XIcon from '../../components/icon/Icon.vue'
 import XSpacer from '../spacer/Spacer'
 
-import theme from './Notifications.theme'
-
 const props = defineProps(notificationsProps)
 
 const internalAlign = ref(props.align)
@@ -81,7 +91,7 @@ const listRef = ref<HTMLElement | null>(null)
 const css = useCSS('notification')
 const colors = useColors()
 
-provide(props.injectKey, {
+provide<NotificationInjection>(props.injectKey, {
   log,
   info,
   warn,
@@ -216,7 +226,7 @@ function setTimer(notification: NotificationEvent, timeout: number) {
   }, timeout)
 }
 
-const { styles, classes, className } = useTheme('notification', theme, props)
+const { styles, classes, className } = useTheme('Notifications', {}, props)
 
 defineExpose({ log, info, success, warn, warning: warn, error })
 </script>
@@ -276,25 +286,25 @@ defineExpose({ log, info, success, warn, warning: warn, error })
             viewBox="0 0 20 20"
           />
           <div class="flex items-center flex-wrap">
-            <span v-if="notification.title" class="font-semibold mr-2">{{ notification.title }}</span>
+            <span v-if="notification.title" class="font-medium mr-2">{{ notification.title }}</span>
             <span>{{ notification.message }}</span>
           </div>
           <x-spacer/>
-          <div
+          <button
             v-if="notification.action"
             class="
                 ml-3
-                font-semibold
+                font-medium
                 cursor-pointer
                 text-[color:var(--x-notification-action)]
                 hover:text-[color:var(--x-notification-action-hover)]
                 dark:text-[color:var(--x-notification-dark-action)]
                 dark:hover:text-[color:var(--x-notification-dark-action-hover)]
               "
-            @click="notification.action.onClick"
+            @click="() => { notification.action?.onClick(); remove(notification); }"
           >
             {{ notification.action.label }}
-          </div>
+          </button>
           <x-icon
             v-if="notification.removable"
             :icon="closeIcon"