@indielayer/ui 1.0.10 → 1.1.0

package/src/components/modal/Modal.vue

@@ -1,9 +1,28 @@
 <script lang="ts">
-export default { name: 'XModal' }
+const modalSize = ['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const
+const modalProps = {
+  size: {
+    type: String as PropType<ModalSize>,
+    default: 'md',
+  },
+  modelValue: Boolean,
+  showClose: Boolean,
+  backdrop: Boolean,
+}
+
+export type ModalSize = typeof modalSize[number]
+export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
+
+export default {
+  name: 'XModal',
+  validators: {
+    size: modalSize,
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type PropType } from 'vue'
+import { ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import { useTheme } from '../../composables/theme'
 import { closeIcon } from '../../common/icons'
@@ -13,15 +32,7 @@ import theme from './Modal.theme'
 import XScroll from '../../components/scroll/Scroll.vue'
 import XIcon from '../icon/Icon.vue'
 
-const props = defineProps({
-  size: {
-    type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>,
-    default: 'md',
-  },
-  modelValue: Boolean,
-  showClose: Boolean,
-  backdrop: Boolean,
-})
+const props = defineProps(modalProps)
 
 const emit = defineEmits(['update:modelValue'])
 

package/src/components/modal/index.ts

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

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

@@ -1,6 +1,14 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { NotificationsProps } from './Notifications.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'list' | 'item'
+
+interface InternalTheme extends ThemeComponent<NotificationsProps, InternalClasses> {}
+export interface NotificationsTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<NotificationsProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen',
 
@@ -9,3 +17,5 @@ export default {
     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/Notifications.vue

@@ -1,7 +1,56 @@
 <script lang="ts">
+const notificationsProps = {
+  ...useColors.props('primary'),
+  align: {
+    type: String as PropType<NotificationsAlign>,
+    default: 'right',
+    validator: (value: string) => validators.align.includes(value as NotificationsAlign),
+  },
+  position: {
+    type: String as PropType<NotificationsPosition>,
+    default: 'bottom',
+    validator: (value: string) => validators.position.includes(value as NotificationsPosition),
+  },
+  timeout: {
+    type: Number,
+    default: 3500,
+  },
+  removable: {
+    type: Boolean,
+    default: true,
+  },
+  injectKey: {
+    type: [Symbol, String],
+    default: injectNotificationKey,
+  },
+}
+
 const validators = {
-  align: ['left', 'right'],
-  position: ['bottom', 'top'],
+  align: ['left', 'right'] as const,
+  position: ['bottom', 'top'] as const,
+}
+
+export type NotificationsProps = ExtractPublicPropTypes<typeof notificationsProps>
+
+export type NotificationsAlign = typeof validators.align[number]
+export type NotificationsPosition = typeof validators.position[number]
+export type NotificationsAction = {
+  onClick: () => void;
+  label: string;
+  color?: string;
+}
+export type NotificationEvent = {
+  id?: number;
+  icon?: string;
+  action?: NotificationsAction;
+  iconColor?: string;
+  title?: string;
+  style?: string;
+  message?: string;
+  timeout?: number;
+  removable?: boolean;
+  align?: NotificationsAlign;
+  position?: NotificationsPosition;
 }
 
 export default {
@@ -11,7 +60,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, provide, watch, type PropType } from 'vue'
+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'
@@ -23,52 +72,7 @@ import XSpacer from '../spacer/Spacer'
 
 import theme from './Notifications.theme'
 
-export type NotificationAlign = 'left' | 'right'
-export type NotificationPosition = 'bottom' | 'top'
-export type NotificationAction = {
-  onClick: () => void;
-  label: string;
-  color?: string;
-}
-export type NotificationEvent = {
-  id?: number;
-  icon?: string;
-  action?: NotificationAction;
-  iconColor?: string;
-  title?: string;
-  style?: string;
-  message?: string;
-  timeout?: number;
-  removable?: boolean;
-  align?: NotificationAlign;
-  position?: NotificationPosition;
-}
-
-const props = defineProps({
-  ...useColors.props('primary'),
-  align: {
-    type: String as PropType<NotificationAlign>,
-    default: 'right',
-    validator: (value: string) => validators.align.includes(value),
-  },
-  position: {
-    type: String as PropType<NotificationPosition>,
-    default: 'bottom',
-    validator: (value: string) => validators.position.includes(value),
-  },
-  timeout: {
-    type: Number,
-    default: 3500,
-  },
-  removable: {
-    type: Boolean,
-    default: true,
-  },
-  injectKey: {
-    type: [Symbol, String],
-    default: injectNotificationKey,
-  },
-})
+const props = defineProps(notificationsProps)
 
 const internalAlign = ref(props.align)
 const internalPosition = ref(props.position)

package/src/components/notifications/index.ts

@@ -0,0 +1,9 @@
+export { default as XNotifications } from './Notifications.vue'
+export type {
+  NotificationsProps,
+  NotificationEvent,
+  NotificationsAction,
+  NotificationsAlign,
+  NotificationsPosition,
+} from './Notifications.vue'
+export type { NotificationsTheme } from './Notifications.theme'

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

@@ -1,15 +1,23 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { PaginationProps } from './Pagination.vue'
 
-export default {
+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 = {
   classes: {
-    wrapper: ({ props }: ThemeParams) => {
+    wrapper: ({ props }) => {
       if (props.variant === 'simple') return 'flex items-center space-x-2'
       else if (props.variant === 'dots') return 'flex space-x-6'
 
       return 'flex items-center' // quick variant
     },
 
-    dots: ({ props }: ThemeParams) => {
+    dots: ({ props }) => {
       if (props.size === 'xs') return 'h-2 w-2'
       else if (props.size === 'sm') return 'h-3 w-3'
       else if (props.size === 'lg') return 'h-4 w-4'
@@ -19,9 +27,11 @@ export default {
     },
   },
 
-  styles: ({ props, css, colors }: ThemeParams) => {
+  styles: ({ props, css, colors }) => {
     const color = colors.getPalette('primary')
 
     return css.get('bg', color[500])
   },
 }
+
+export default theme

package/src/components/pagination/Pagination.vue

@@ -1,17 +1,38 @@
 <script lang="ts">
-import { useCommon } from '../../composables/common'
+const paginationVariant = ['simple', 'quick', 'dots'] as const
+const paginationProps = {
+  ...useCommon.props(),
+  links: Boolean,
+  totalPages: {
+    type: Number,
+    default: 1,
+  },
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  variant: {
+    type: String as PropType<PaginationVariant>,
+    default: 'simple',
+  },
+}
+
+export type PaginationVariant = typeof paginationVariant[number]
+export type PaginationProps = ExtractPublicPropTypes<typeof paginationProps>
 
 export default {
   name: 'XPagination',
   validators: {
     ...useCommon.validators(),
+    variant: paginationVariant,
   },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type PropType } from 'vue'
+import { computed, ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { useTheme } from '../../composables/theme'
+import { useCommon } from '../../composables/common'
 import { dotsIcon, prevIcon, nextIcon } from '../../common/icons'
 
 import XIcon from '../../components/icon/Icon.vue'
@@ -21,22 +42,7 @@ import XPaginationItem from './PaginationItem.vue'
 
 import theme from './Pagination.theme'
 
-const props = defineProps({
-  ...useCommon.props(),
-  links: Boolean,
-  totalPages: {
-    type: Number,
-    default: 1,
-  },
-  modelValue: {
-    type: Number,
-    default: 1,
-  },
-  variant: {
-    type: String as PropType<'simple' | 'quick' | 'dots'>,
-    default: 'simple',
-  },
-})
+const props = defineProps(paginationProps)
 
 const emit = defineEmits(['update:modelValue'])
 

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

@@ -1,8 +1,16 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { PaginationItemProps } from './PaginationItem.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<PaginationItemProps, InternalClasses> {}
+export interface PaginationItemTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<PaginationItemProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props }: ThemeParams) => {
+    wrapper: ({ props }) => {
       if (props.size === 'xs') return '!leading-none !p-1 min-w-[1.375rem]'
       else if (props.size === 'sm') return '!leading-none !p-2 min-w-[2rem]'
       else if (props.size === 'lg') return '!leading-none !p-3 min-w-[2.75rem]'
@@ -12,3 +20,5 @@ export default {
     },
   },
 }
+
+export default theme

package/src/components/pagination/PaginationItem.vue

@@ -1,5 +1,15 @@
 <script lang="ts">
-import { useCommon } from '../../composables/common'
+const paginationItemProps = {
+  ...useCommon.props(),
+  value: {
+    type: Number,
+    default: 0,
+  },
+  selected: Boolean,
+  links: Boolean,
+}
+
+export type PaginationItemProps = ExtractPublicPropTypes<typeof paginationItemProps>
 
 export default {
   name: 'XPaginationItem',
@@ -11,20 +21,14 @@ export default {
 
 <script setup lang="ts">
 import { useTheme } from '../../composables/theme'
+import { useCommon } from '../../composables/common'
 
 import XButton from '../button/Button.vue'
 
 import theme from './PaginationItem.theme'
+import type { ExtractPublicPropTypes } from 'vue'
 
-const props = defineProps({
-  ...useCommon.props(),
-  value: {
-    type: Number,
-    default: 0,
-  },
-  selected: Boolean,
-  links: Boolean,
-})
+const props = defineProps(paginationItemProps)
 
 const emit = defineEmits(['input'])
 

package/src/components/pagination/index.ts

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

package/src/components/popover/Popover.theme.ts

@@ -1,9 +1,19 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { PopoverProps } from './Popover.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'content'
+
+interface InternalTheme extends ThemeComponent<PopoverProps, InternalClasses> {}
+export interface PopoverTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<PopoverProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-block relative',
 
     content: 'max-w-xs',
   },
 }
+
+export default theme

package/src/components/popover/Popover.vue

@@ -1,32 +1,19 @@
 <script lang="ts">
 const validators = {
-  align: ['bottom', 'center', 'left', 'right', 'top'],
-  position: ['bottom', 'left', 'right', 'top'],
+  align: ['bottom', 'center', 'left', 'right', 'top'] as const,
+  position: ['bottom', 'left', 'right', 'top'] as const,
 }
 
-export default {
-  name: 'XPopover',
-  validators,
-}
-</script>
-
-<script setup lang="ts">
-import { computed, ref, useCssModule, watch, type PropType } from 'vue'
-import { onClickOutside, useEventListener } from '@vueuse/core'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Popover.theme'
-
-const props = defineProps({
+const popoverProps = {
   align: {
-    type: String as PropType<'bottom' | 'center' | 'left' | 'right' | 'top'>,
+    type: String as PropType<PopoverAlign>,
     default: 'center',
-    validator: (value: string) => validators.align.includes(value),
+    validator: (value: string) => validators.align.includes(value as PopoverAlign),
   },
   position: {
-    type: String as PropType<'bottom' | 'left' | 'right' | 'top'>,
+    type: String as PropType<PopoverPosition>,
     default: 'bottom',
-    validator: (value: string) => validators.position.includes(value),
+    validator: (value: string) => validators.position.includes(value as PopoverPosition),
   },
   dismissOnClick: {
     type: Boolean,
@@ -39,7 +26,26 @@ const props = defineProps({
   disabled: Boolean,
   hover: Boolean,
   block: Boolean,
-})
+}
+
+export type PopoverAlign = typeof validators.align[number]
+export type PopoverPosition = typeof validators.position[number]
+export type PopoverProps = ExtractPublicPropTypes<typeof popoverProps>
+
+export default {
+  name: 'XPopover',
+  validators,
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, useCssModule, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { onClickOutside, useEventListener } from '@vueuse/core'
+import { useTheme } from '../../composables/theme'
+
+import theme from './Popover.theme'
+
+const props = defineProps(popoverProps)
 
 const emit = defineEmits(['open', 'close', 'toggle'])
 

package/src/components/popover/PopoverContainer.theme.ts

@@ -1,7 +1,17 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { PopoverContainerProps } from './PopoverContainer.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<PopoverContainerProps, InternalClasses> {}
+export interface PopoverContainerTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<PopoverContainerProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800',
   },
 }
+
+export default theme

package/src/components/popover/PopoverContainer.vue

@@ -1,18 +1,23 @@
 <script lang="ts">
+const popoverContainerProps = {
+  tag: {
+    default: 'div',
+    type: String,
+  },
+}
+
+export type PopoverContainerProps = ExtractPublicPropTypes<typeof popoverContainerProps>
+
 export default { name: 'XPopoverContainer' }
 </script>
 
 <script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
 import { useTheme } from '../../composables/theme'
 
 import theme from './PopoverContainer.theme'
 
-const props = defineProps({
-  tag: {
-    default: 'div',
-    type: String,
-  },
-})
+const props = defineProps(popoverContainerProps)
 
 const { styles, classes, className } = useTheme('popover-container', theme, props)
 </script>

package/src/components/popover/index.ts

@@ -0,0 +1,7 @@
+export { default as XPopover } from './Popover.vue'
+export type { PopoverProps, PopoverAlign, PopoverPosition } from './Popover.vue'
+export type { PopoverTheme } from './Popover.theme'
+
+export { default as XPopoverContainer } from './PopoverContainer.vue'
+export type { PopoverContainerProps } from './PopoverContainer.vue'
+export type { PopoverContainerTheme } from './PopoverContainer.theme'

package/src/components/progress/Progress.theme.ts

@@ -1,15 +1,23 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { ProgressProps } from './Progress.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'list' | 'item'
+
+interface InternalTheme extends ThemeComponent<ProgressProps, InternalClasses> {}
+export interface ProgressTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<ProgressProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props }: ThemeParams) => `relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none ${props.thick ? 'h-1.5' : 'h-1'}`,
+    wrapper: ({ props }) => `relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none ${props.thick ? 'h-1.5' : 'h-1'}`,
 
     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',
   },
 
-  styles: ({ props, colors, css }: ThemeParams) => {
+  styles: ({ props, colors, css }) => {
     const color = colors.getPalette(props.color)
     const vars = []
 
@@ -24,3 +32,5 @@ export default {
     return vars
   },
 }
+
+export default theme

package/src/components/progress/Progress.vue

@@ -1,32 +1,32 @@
 <script lang="ts">
-export default { name: 'XProgress' }
-</script>
-
-<script setup lang="ts">
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Progress.theme'
-
-const props = defineProps({
+const progressProps = {
   ...useColors.props('primary'),
   percentage: {
     type: Number,
     default: 0,
     validator: (value: number) => value >= 0 && value <= 100,
   },
-  // variant: {
-  //   type: String as PropType<'bar' | 'score'>,
-  //   default: 'bar',
-  //   validator: (value: string) => validators.variant.includes(value),
-  // },
   gradient: Boolean,
   animate: {
     type: Boolean,
     default: true,
   },
   thick: Boolean,
-})
+}
+
+export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>
+
+export default { name: 'XProgress' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useColors } from '../../composables/colors'
+import { useTheme } from '../../composables/theme'
+
+import theme from './Progress.theme'
+
+const props = defineProps(progressProps)
 
 const { styles, classes, className } = useTheme('progress', theme, props)
 </script>

package/src/components/progress/index.ts

@@ -0,0 +1,3 @@
+export { default as XProgress } from './Progress.vue'
+export type { ProgressProps } from './Progress.vue'
+export type { ProgressTheme } from './Progress.theme'