@indielayer/ui 1.0.10 → 1.1.0

package/src/components/avatar/Avatar.theme.ts

@@ -1,8 +1,18 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { Ref } from 'vue'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { AvatarProps } from './Avatar.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+type InternalExtraData = { source: Ref<string | undefined>; }
+
+interface InternalTheme extends ThemeComponent<AvatarProps, InternalClasses, InternalExtraData> {}
+export interface AvatarTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<AvatarProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper({ props }: ThemeParams) {
+    wrapper({ props }) {
       const classes = ['relative inline-flex items-center justify-center overflow-hidden align-middle border box-content']
 
       // radius
@@ -19,7 +29,7 @@ export default {
     },
   },
 
-  styles({ props, colors, css, data }: ThemeParams) {
+  styles({ props, colors, css, data }) {
     const color = colors.getPalette(props.color)
 
     if (data.source) return css.variables({
@@ -37,3 +47,5 @@ export default {
     })
   },
 }
+
+export default theme

package/src/components/avatar/Avatar.vue

@@ -1,4 +1,20 @@
 <script lang="ts">
+const avatarProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  name: String,
+  alt: String,
+  image: String,
+  outlined: Boolean,
+  rounded: Boolean,
+}
+
+export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
+
 export default {
   name: 'XAvatar',
   validators: useCommon.validators(),
@@ -6,7 +22,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, type ExtractPublicPropTypes } from 'vue'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
 import { useTheme } from '../../composables/theme'
@@ -16,19 +32,7 @@ import XIcon from '../../components/icon/Icon.vue'
 
 import theme from './Avatar.theme'
 
-const props = defineProps({
-  ...useCommon.props(),
-  ...useColors.props('primary'),
-  tag: {
-    type: String,
-    default: 'div',
-  },
-  name: String,
-  alt: String,
-  image: String,
-  outlined: Boolean,
-  rounded: Boolean,
-})
+const props = defineProps(avatarProps)
 
 const source = ref<string>()
 const initials = computed(() => {

package/src/components/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as XAvatar } from './Avatar.vue'
+export type { AvatarProps } from './Avatar.vue'
+export type { AvatarTheme } from './Avatar.theme'

package/src/components/badge/Badge.theme.ts

@@ -1,13 +1,23 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { BadgeProps } from './Badge.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<BadgeProps, InternalClasses> {}
+export interface BadgeTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<BadgeProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-block',
   },
 
-  styles({ props, colors, css }: ThemeParams) {
+  styles({ props, colors, css }) {
     const color = colors.getPalette(props.color)
 
     return css.get('bg', color[500])
   },
 }
+
+export default theme

package/src/components/badge/Badge.vue

@@ -1,16 +1,7 @@
 <script lang="ts">
-export default { name: 'XBadge' }
-</script>
-
-<script setup lang="ts">
-import { computed, useSlots, type PropType } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-
-import theme from './Badge.theme'
-
-const props = defineProps({
+const badgeAlign = ['left', 'right'] as const
+const badgePosition = ['top', 'bottom'] as const
+const badgeProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   tag: {
@@ -18,11 +9,11 @@ const props = defineProps({
     default: 'div',
   },
   position: {
-    type: String as PropType<'top' | 'bottom'>,
+    type: String as PropType<BadgePosition>,
     default: 'top',
   },
   align: {
-    type: String as PropType<'left' | 'right'>,
+    type: String as PropType<BadgeAlign>,
     default: 'right',
   },
   offsetX: [Number, String],
@@ -34,7 +25,31 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-})
+}
+
+export type BadgePosition = typeof badgePosition[number]
+export type BadgeAlign = typeof badgeAlign[number]
+export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>
+
+export default {
+  name: 'XBadge',
+  validators: {
+    ...useCommon.validators(),
+    position: badgePosition,
+    align: badgeAlign,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, useSlots, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { useTheme } from '../../composables/theme'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+
+import theme from './Badge.theme'
+
+const props = defineProps(badgeProps)
 
 const slots = useSlots()
 

package/src/components/badge/index.ts

@@ -0,0 +1,3 @@
+export { default as XBadge } from './Badge.vue'
+export type { BadgeProps, BadgeAlign, BadgePosition } from './Badge.vue'
+export type { BadgeTheme } from './Badge.theme'

package/src/components/breadcrumbs/Breadcrumbs.theme.ts

@@ -1,9 +1,19 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { BreadcrumbsProps } from './Breadcrumbs.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'item' | 'lastItem'
+
+interface InternalTheme extends ThemeComponent<BreadcrumbsProps, InternalClasses> {}
+export interface BreadcrumbsTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<BreadcrumbsProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'flex items-center flex-wrap',
     item: 'flex items-center',
     lastItem: 'font-semibold',
   },
 }
+
+export default theme

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -1,9 +1,31 @@
 <script lang="ts">
+const breadcrumbsProps = {
+  ...useColors.props(),
+  items: Array as PropType<BreadcrumbsItem[]>,
+  icon: {
+    type: String,
+    default: arrowRightIcon,
+  },
+  shadow: Boolean,
+  underline: Boolean,
+}
+
+export type BreadcrumbsItem = {
+  label: string;
+  to?: string | object;
+  href?: string;
+  color?: string;
+  icon?: string;
+  shadow?: boolean;
+  underline?: boolean;
+}
+export type BreadcrumbsProps = ExtractPublicPropTypes<typeof breadcrumbsProps>
+
 export default { name: 'XBreadcrumbs' }
 </script>
 
 <script setup lang="ts">
-import { computed, type PropType } from 'vue'
+import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useTheme } from '../../composables/theme'
 import { arrowRightIcon } from '../../common/icons'
 import { useColors } from '../../composables/colors'
@@ -13,26 +35,7 @@ import XLink from '../../components/link/Link.vue'
 
 import theme from './Breadcrumbs.theme'
 
-export type BreadcrumbItem = {
-  label: string;
-  to?: string | object;
-  href?: string;
-  color?: string;
-  icon?: string;
-  shadow?: boolean;
-  underline?: boolean;
-}
-
-const props = defineProps({
-  ...useColors.props(),
-  items: Array as PropType<Array<BreadcrumbItem>>,
-  icon: {
-    type: String,
-    default: arrowRightIcon,
-  },
-  shadow: Boolean,
-  underline: Boolean,
-})
+const props = defineProps(breadcrumbsProps)
 
 const lastItem = computed(() => props.items && props.items.length > 0 ? props.items[props.items.length - 1] : undefined)
 

package/src/components/breadcrumbs/index.ts

@@ -0,0 +1,3 @@
+export { default as XBreadcrumbs } from './Breadcrumbs.vue'
+export type { BreadcrumbsProps, BreadcrumbsItem } from './Breadcrumbs.vue'
+export type { BreadcrumbsTheme } from './Breadcrumbs.theme'

package/src/components/button/Button.theme.ts

@@ -1,9 +1,17 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { ButtonProps } from './Button.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'iconLeft' | 'iconRight'
+type InternalExtraData = { isButtonGroup: boolean; }
+
+interface InternalTheme extends ThemeComponent<ButtonProps, InternalClasses, InternalExtraData> {}
+export interface ButtonTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<ButtonProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper({ props, slots, data }: ThemeParams) {
-      /*tw*/
+    wrapper({ props, slots, data }) {
       const classes = ['relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none']
 
       // radius
@@ -27,15 +35,15 @@ export default {
       return classes
     },
 
-    iconLeft: ({ slots }: ThemeParams) => slots.default ? 'mr-2' : 'm-0.5',
+    iconLeft: ({ slots }) => slots.default ? 'mr-2' : 'm-0.5',
 
-    iconRight: ({ slots }: ThemeParams) => slots.default ? 'ml-2' : 'm-0.5',
+    iconRight: ({ slots }) => slots.default ? 'ml-2' : 'm-0.5',
   },
 
-  styles({ props, colors, css, data }: ThemeParams) {
+  styles({ props, colors, css, data }) {
     const gray = colors.getPalette('gray')
     const color = props.color ? colors.getPalette(props.color) : gray
-    const vars: (object | string)[] = []
+    const vars = []
 
     const isLight = props.color && props.light
     const isDefault = !props.color && !props.ghost
@@ -226,3 +234,5 @@ export default {
     return vars
   },
 }
+
+export default theme

package/src/components/button/Button.vue

@@ -1,21 +1,5 @@
 <script lang="ts">
-export default { name: 'XButton' }
-</script>
-
-<script setup lang="ts">
-import { computed, ref, inject, useAttrs, unref } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useInteractive } from '../../composables/interactive'
-import { injectButtonGroupKey } from '../../composables/keys'
-
-import XSpinner from '../spinner/Spinner.vue'
-import XIcon from '../icon/Icon.vue'
-
-import theme from './Button.theme'
-
-const props = defineProps({
+const buttonProps = {
   ...useCommon.props(),
   ...useColors.props(),
   ...useInteractive.props(),
@@ -38,7 +22,32 @@ const props = defineProps({
   light: Boolean,
   block: Boolean,
   flat: Boolean,
-})
+}
+
+export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
+
+export default {
+  name: 'XButton',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, inject, useAttrs, unref, type ExtractPublicPropTypes } from 'vue'
+import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/colors'
+import { useCommon } from '../../composables/common'
+import { useInteractive } from '../../composables/interactive'
+import { injectButtonGroupKey } from '../../composables/keys'
+
+import XSpinner from '../spinner/Spinner.vue'
+import XIcon from '../icon/Icon.vue'
+
+import theme from './Button.theme'
+
+const props = defineProps(buttonProps)
 
 const elRef = ref<HTMLElement | null>(null)
 
@@ -47,6 +56,7 @@ const buttonGroup = inject(injectButtonGroupKey, {
   isButtonGroup: false,
   groupProps: {},
 })
+
 const { isButtonGroup } = buttonGroup
 const computedSize = computed(() => buttonGroup.groupProps.size || props.size)
 const computedFlat = computed(() => buttonGroup.groupProps.flat || props.flat)

package/src/components/button/ButtonGroup.theme.ts

@@ -1,5 +1,18 @@
-export default {
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { ButtonGroupProps } from './ButtonGroup.vue'
+
+type InternalClasses = 'wrapper'
+type InternalExtraData = { isButtonGroupGroup: boolean; }
+
+interface InternalTheme extends ThemeComponent<ButtonGroupProps, InternalClasses, InternalExtraData> {}
+export interface ButtonGroupTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<ButtonGroupProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-flex align-middle relative -space-x-[1px]',
   },
 }
+
+export default theme

package/src/components/button/ButtonGroup.vue

@@ -1,18 +1,5 @@
 <script lang="ts">
-export default { name: 'XButtonGroup' }
-</script>
-
-<script setup lang="ts">
-import { provide } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useInteractive } from '../../composables/interactive'
-import { injectButtonGroupKey } from '../../composables/keys'
-
-import theme from './ButtonGroup.theme'
-
-const props = defineProps({
+const buttonGroupProps = {
   ...useCommon.props(),
   ...useColors.props(),
   ...useInteractive.props(),
@@ -24,7 +11,34 @@ const props = defineProps({
   rounded: Boolean,
   ghost: Boolean,
   light: Boolean,
-})
+  flat: Boolean,
+}
+
+export type ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>
+export type ButtonGroupInjection = {
+  groupProps: ButtonGroupProps;
+  isButtonGroup: boolean;
+}
+
+export default {
+  name: 'XButtonGroup',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { provide, type ExtractPublicPropTypes } from 'vue'
+import { useTheme } from '../../composables/theme'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useInteractive } from '../../composables/interactive'
+import { injectButtonGroupKey } from '../../composables/keys'
+
+import theme from './ButtonGroup.theme'
+
+const props = defineProps(buttonGroupProps)
 
 provide(injectButtonGroupKey, {
   groupProps: props,

package/src/components/button/index.ts

@@ -0,0 +1,7 @@
+export { default as XButton } from './Button.vue'
+export type { ButtonProps } from './Button.vue'
+export type { ButtonTheme } from './Button.theme'
+
+export { default as XButtonGroup } from './ButtonGroup.vue'
+export type { ButtonGroupProps, ButtonGroupInjection } from './ButtonGroup.vue'
+export type { ButtonGroupTheme } from './ButtonGroup.theme'

package/src/components/card/Card.theme.ts

@@ -1,7 +1,17 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { CardProps } from './Card.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<CardProps, InternalClasses> {}
+export interface CardTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<CardProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props }: ThemeParams) => `rounded bg-white dark:bg-gray-800${props.flat ? '' : ' shadow'}`,
+    wrapper: ({ props }) => `rounded bg-white dark:bg-gray-800${props.flat ? '' : ' shadow'}`,
   },
 }
+
+export default theme

package/src/components/card/Card.vue

@@ -1,19 +1,24 @@
 <script lang="ts">
+const cardProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  flat: Boolean,
+}
+
+export type CardProps = ExtractPublicPropTypes<typeof cardProps>
+
 export default { name: 'XCard' }
 </script>
 
 <script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
 import { useTheme } from '../../composables/theme'
 
 import theme from './Card.theme'
 
-const props = defineProps({
-  tag: {
-    type: String,
-    default: 'div',
-  },
-  flat: Boolean,
-})
+const props = defineProps(cardProps)
 
 const { styles, classes, className } = useTheme('card', theme, props)
 </script>

package/src/components/card/index.ts

@@ -0,0 +1,3 @@
+export { default as XCard } from './Card.vue'
+export type { CardProps } from './Card.vue'
+export type { CardTheme } from './Card.theme'

package/src/components/checkbox/Checkbox.theme.ts

@@ -1,10 +1,20 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { Ref } from 'vue'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { CheckboxProps } from './Checkbox.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'box' | 'icon' | 'label'
+type InternalExtraData = { checked: Ref<boolean>; }
+
+interface InternalTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {}
+export interface CheckboxTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<CheckboxProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-block relative cursor-pointer align-middle',
 
-    box: ({ props }: ThemeParams) => {
+    box: ({ props }) => {
       const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-4 w-4')
@@ -14,7 +24,7 @@ export default {
       return classes
     },
 
-    icon: ({ props }: ThemeParams) => {
+    icon: ({ props }) => {
       const classes = ['fill-current text-white dark:text-gray-900']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
@@ -24,7 +34,7 @@ export default {
       return classes
     },
 
-    label: ({ props }: ThemeParams) => {
+    label: ({ props }) => {
       const classes = ['inline-block font-medium text-gray-800 dark:text-gray-200 pl-2']
 
       if (props.size === 'xs') classes.push('text-xs')
@@ -36,10 +46,10 @@ export default {
     },
   },
 
-  styles({ props, colors, css, data }: ThemeParams) {
+  styles({ props, colors, css, data }) {
     const gray = colors.getPalette('gray')
     const color = colors.getPalette(props.color)
-    const vars: (object | string)[] = []
+    const vars = []
 
     if (props.loading) {
       return css.variables({
@@ -90,3 +100,5 @@ export default {
     return vars
   },
 }
+
+export default theme

package/src/components/checkbox/Checkbox.vue

@@ -1,9 +1,26 @@
 <script lang="ts">
-export default { name: 'XCheckbox' }
+const checkboxProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  label: String,
+  helper: String,
+  glow: Boolean,
+}
+
+export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>
+
+export default {
+  name: 'XCheckbox',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes } from 'vue'
 import { useTheme } from '../../composables/theme'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
@@ -15,15 +32,7 @@ import XInputError from '../helpers/InputError'
 
 import theme from './Checkbox.theme'
 
-const props = defineProps({
-  ...useCommon.props(),
-  ...useColors.props('primary'),
-  ...useInteractive.props(),
-  ...useInputtable.props(),
-  label: String,
-  helper: String,
-  glow: Boolean,
-})
+const props = defineProps(checkboxProps)
 
 const emit = defineEmits(useInputtable.emits(false))
 

package/src/components/checkbox/index.ts

@@ -0,0 +1,3 @@
+export { default as XCheckbox } from './Checkbox.vue'
+export type { CheckboxProps } from './Checkbox.vue'
+export type { CheckboxTheme } from './Checkbox.theme'

package/src/components/collapse/Collapse.theme.ts

@@ -1,11 +1,21 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { CollapseProps } from './Collapse.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'icon' | 'content'
+
+interface InternalTheme extends ThemeComponent<CollapseProps, InternalClasses> {}
+export interface CollapseTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<CollapseProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props }: ThemeParams) => `relative flex items-center ${props.icon ?  'flex-row-reverse' : ''} ${props.disabled ? '' : 'cursor-pointer'}`,
+    wrapper: ({ props }) => `relative flex items-center ${props.icon ?  'flex-row-reverse' : ''} ${props.disabled ? '' : 'cursor-pointer'}`,
 
     icon: 'absolute top-1/2 transform -translate-y-1/2 right-3',
 
     content: 'transition-[height] duration-150 overflow-y-hidden',
   },
 }
+
+export default theme