@indielayer/ui 1.2.0 → 1.3.0

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']

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

@@ -13,6 +13,9 @@ const modalProps = {
 export type ModalSize = typeof modalSize[number]
 export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
 
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions'
+export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses> {}
+
 export default {
   name: 'XModal',
   validators: {
@@ -24,11 +27,9 @@ export default {
 <script setup lang="ts">
 import { ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
-import { useTheme } from '../../composables/theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { closeIcon } from '../../common/icons'
 
-import theme from './Modal.theme'
-
 import XScroll from '../../components/scroll/Scroll.vue'
 import XIcon from '../icon/Icon.vue'
 
@@ -95,7 +96,7 @@ function open() {
   })
 }
 
-const { styles, classes, className } = useTheme('modal', theme, props)
+const { styles, classes, className } = useTheme('Modal', {}, props)
 
 defineExpose({ open, close })
 </script>

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/{Modal.theme.ts → theme/Modal.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ModalProps } from './Modal.vue'
+import type { ModalTheme } from '../Modal.vue'
 
-type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions'
-
-interface InternalTheme extends ThemeComponent<ModalProps, InternalClasses> {}
-export interface ModalTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ModalProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: ModalTheme = {
   classes: {
     wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
 

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

@@ -0,0 +1,7 @@
+import type { ModalTheme } from '../Modal.vue'
+
+import BaseTheme from './Modal.base.theme'
+
+const theme: ModalTheme = BaseTheme
+
+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>

package/src/components/notifications/index.ts

@@ -5,5 +5,5 @@ export type {
   NotificationsAction,
   NotificationsAlign,
   NotificationsPosition,
+  NotificationsTheme,
 } from './Notifications.vue'
-export type { NotificationsTheme } from './Notifications.theme'

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

@@ -0,0 +1,13 @@
+import type { NotificationsTheme } from '../Notifications.vue'
+
+const theme: NotificationsTheme = {
+  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 border border-gray-700 dark:border-gray-100',
+  },
+}
+
+export default theme

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

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

package/src/components/pagination/Pagination.vue

@@ -20,6 +20,9 @@ const paginationProps = {
 export type PaginationVariant = typeof paginationVariant[number]
 export type PaginationProps = ExtractPublicPropTypes<typeof paginationProps>
 
+type InternalClasses = 'wrapper' | 'dots'
+export interface PaginationTheme extends ThemeComponent<PaginationProps, InternalClasses> {}
+
 export default {
   name: 'XPagination',
   validators: {
@@ -31,8 +34,8 @@ export default {
 
 <script setup lang="ts">
 import { computed, ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
 import { dotsIcon, prevIcon, nextIcon } from '../../common/icons'
 
 import XIcon from '../../components/icon/Icon.vue'
@@ -40,8 +43,6 @@ import XInput from '../../components/input/Input.vue'
 import XButton from '../button/Button.vue'
 import XPaginationItem from './PaginationItem.vue'
 
-import theme from './Pagination.theme'
-
 const props = defineProps(paginationProps)
 
 const emit = defineEmits(['update:modelValue'])
@@ -91,7 +92,7 @@ const quickButtonSize = computed(() => {
   return 'sm'
 })
 
-const { styles, classes, className } = useTheme('pagination', theme, props)
+const { styles, classes, className } = useTheme('Pagination', {}, props)
 </script>
 
 <template>
@@ -111,7 +112,13 @@ const { styles, classes, className } = useTheme('pagination', theme, props)
       />
       <div class="mx-9 flex items-center">
         <span class="text-gray-600 mr-2">Page</span>
-        <x-input v-model="quickInput" :size="size" class="w-[2.75rem] text-center" @keydown.enter="onQuickInput" />
+        <x-input
+          v-model="quickInput"
+          :size="size"
+          class="text-center w-16"
+          hide-footer
+          @keydown.enter="onQuickInput"
+        />
         <span class="text-gray-600 ml-2">of {{ totalPages }}</span>
       </div>
       <x-button

package/src/components/pagination/PaginationItem.vue

@@ -11,6 +11,9 @@ const paginationItemProps = {
 
 export type PaginationItemProps = ExtractPublicPropTypes<typeof paginationItemProps>
 
+type InternalClasses = 'wrapper'
+export interface PaginationItemTheme extends ThemeComponent<PaginationItemProps, InternalClasses> {}
+
 export default {
   name: 'XPaginationItem',
   validators: {
@@ -20,19 +23,18 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
 
 import XButton from '../button/Button.vue'
 
-import theme from './PaginationItem.theme'
 import type { ExtractPublicPropTypes } from 'vue'
 
 const props = defineProps(paginationItemProps)
 
-const emit = defineEmits(['input'])
+defineEmits(['input'])
 
-const { styles, classes, className } = useTheme('pagination-item', theme, props)
+const { styles, classes, className } = useTheme('PaginationItem', {}, props)
 </script>
 
 <template>

package/src/components/pagination/index.ts

@@ -1,7 +1,5 @@
 export { default as XPagination } from './Pagination.vue'
-export type { PaginationProps, PaginationVariant } from './Pagination.vue'
-export type { PaginationTheme } from './Pagination.theme'
+export type { PaginationProps, PaginationVariant, PaginationTheme } from './Pagination.vue'
 
 export { default as XPaginationItem } from './PaginationItem.vue'
-export type { PaginationItemProps } from './PaginationItem.vue'
-export type { PaginationItemTheme } from './PaginationItem.theme'
+export type { PaginationItemProps, PaginationItemTheme } from './PaginationItem.vue'

package/src/components/pagination/{Pagination.theme.ts → theme/Pagination.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { PaginationProps } from './Pagination.vue'
+import type { PaginationTheme } from '../Pagination.vue'
 
-type InternalClasses = 'wrapper' | 'dots'
-
-interface InternalTheme extends ThemeComponent<PaginationProps, InternalClasses> {}
-export interface PaginationTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<PaginationProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: PaginationTheme = {
   classes: {
     wrapper: ({ props }) => {
       if (props.variant === 'simple') return 'flex items-center space-x-2'
@@ -27,7 +19,7 @@ const theme: InternalTheme = {
     },
   },
 
-  styles: ({ props, css, colors }) => {
+  styles: ({ css, colors }) => {
     const color = colors.getPalette('primary')
 
     return css.get('bg', color[500])

package/src/components/pagination/theme/Pagination.carbon.theme.ts

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

package/src/components/pagination/{PaginationItem.theme.ts → theme/PaginationItem.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { PaginationItemProps } from './PaginationItem.vue'
+import type { PaginationItemTheme } from '../PaginationItem.vue'
 
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<PaginationItemProps, InternalClasses> {}
-export interface PaginationItemTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<PaginationItemProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: PaginationItemTheme = {
   classes: {
     wrapper: ({ props }) => {
       if (props.size === 'xs') return '!leading-none !p-1 min-w-[1.375rem]'

package/src/components/pagination/theme/PaginationItem.carbon.theme.ts

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