@indielayer/ui 1.0.9 → 1.1.0

package/src/components/alert/Alert.vue

@@ -1,9 +1,28 @@
 <script lang="ts">
-export default { name: 'XAlert' }
+const alertType = ['info', 'success', 'error', 'warning'] as const
+const alertProps = {
+  ...useColors.props(),
+  type: String as PropType<AlertType>,
+  glow: Boolean,
+  light: Boolean,
+  outlined: Boolean,
+  removable: Boolean,
+  closeLabel: String,
+}
+
+export type AlertType = typeof alertType[number]
+export type AlertProps = ExtractPublicPropTypes<typeof alertProps>
+
+export default {
+  name: 'XAlert',
+  validators: {
+    type: alertType,
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { computed, type PropType } from 'vue'
+import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useColors } from '../../composables/colors'
 import { useTheme } from '../../composables/theme'
 import { closeIcon, successIcon, errorIcon, warningIcon, infoIcon } from '../../common/icons'
@@ -12,14 +31,7 @@ import XIcon from '../icon/Icon.vue'
 
 import theme from './Alert.theme'
 
-const props = defineProps({
-  ...useColors.props(),
-  type: String as PropType<'info' | 'success' | 'error' | 'warning' | undefined>,
-  glow: Boolean,
-  light: Boolean,
-  outlined: Boolean,
-  removable: Boolean,
-})
+const props = defineProps(alertProps)
 
 defineEmits(['remove'])
 
@@ -60,11 +72,11 @@ const { styles, classes, className } = useTheme('alert', theme, props)
 
     <template v-if="removable">
       <div class="flex-grow"></div>
-      <span class="flex items-center cursor-pointer shrink-0" @click="(e: Event) => $emit('remove', e)">
+      <button class="shrink-0" :aria-label="closeLabel" @click="(e: Event) => $emit('remove', e)">
         <slot name="removeIcon">
           <x-icon :icon="closeIcon"/>
         </slot>
-      </span>
+      </button>
     </template>
   </div>
 </template>
@@ -79,7 +91,8 @@ const { styles, classes, className } = useTheme('alert', theme, props)
     box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-alert-glow), 0 4px 6px -4px var(--x-alert-glow);
   }
 
-  :global(.dark) &, &:global(.dark) {
+  :global(.dark) &,
+  &:global(.dark) {
     color: var(--x-alert-dark-text, var(--x-alert-text));
     background-color: var(--x-alert-dark-bg, var(--x-alert-bg));
     border-color: var(--x-alert-dark-border, var(--x-alert-border));

package/src/components/alert/index.ts

@@ -0,0 +1,3 @@
+export { default as XAlert } from './Alert.vue'
+export type { AlertProps, AlertType } from './Alert.vue'
+export type { AlertTheme } from './Alert.theme'

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(() => {
@@ -92,7 +96,8 @@ const { styles, classes, className } = useTheme('avatar', theme, props, { source
   background-color: var(--x-avatar-bg);
   border-color: var(--x-avatar-border);
 
-  :global(.dark) &, &:global(.dark) {
+  :global(.dark) &,
+  &:global(.dark) {
     color: var(--x-avatar-dark-text, var(--x-avatar-text));
     background-color: var(--x-avatar-dark-bg, var(--x-avatar-bg));
     border-color: var(--x-avatar-dark-border, var(--x-avatar-border));

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
@@ -70,10 +78,8 @@ export default {
           },
         }))
       }
-    }
-
-    // light
-    else if (isLight) {
+    } else if (isLight) {
+      // light
       if (!props.outlined || props.disabled) vars.push(css.get('border', 'transparent'))
 
       if (props.disabled) {
@@ -103,10 +109,8 @@ export default {
           },
         }))
       }
-    }
-
-    // ghost
-    else if (props.ghost) {
+    } else if (props.ghost) {
+      // ghost
       if (!props.outlined) vars.push(css.get('border', 'transparent'))
 
       if (props.color) {
@@ -162,9 +166,7 @@ export default {
           }
         }
       }
-    }
-
-    else {
+    } else {
       // outlined
       if (props.outlined) {
         if (props.disabled) {
@@ -232,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)
@@ -150,7 +160,8 @@ defineExpose({ focus, blur })
     border-color: var(--x-button-border-active, var(--x-button-border));
   }
 
-  :global(.dark) &, &:global(.dark) {
+  :global(.dark) &,
+  &:global(.dark) {
     color: var(--x-button-dark-text, var(--x-button-text));
     background-color: var(--x-button-dark-bg, var(--x-button-bg));
     border-color: var(--x-button-dark-border, var(--x-button-border));

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,
@@ -53,21 +67,21 @@ const { className, classes, styles } = useTheme('button-group', theme, props)
 .button-group {
   &:not(&--rounded) {
     > :first-child {
-      @apply rounded-l-md
+      @apply rounded-l-md;
     }
 
     > :last-child {
-      @apply rounded-r-md
+      @apply rounded-r-md;
     }
   }
 
   &--rounded {
     > :first-of-type {
-      @apply rounded-l-full
+      @apply rounded-l-full;
     }
 
     > :last-child {
-      @apply rounded-r-full
+      @apply rounded-r-full;
     }
   }
 }

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