@indielayer/ui 1.0.9 → 1.1.0

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'])
 
@@ -47,7 +53,7 @@ const elRef = ref<HTMLElement | null>(null)
 const contentRef = ref<HTMLElement | null>(null)
 const isOpen = ref(false)
 
-let stopClickOutside: undefined | (()=> void) = undefined
+let stopClickOutside: undefined | (() => void) = undefined
 
 watch(isOpen, (newValue) => {
   if (props.hover) return
@@ -101,10 +107,10 @@ const contentClasses = computed(() => {
     else if ((position === 'top' || position === 'bottom')) align = 'right'
   }
 
-  if (position === 'top') c.push(`bottom-full ${$style.popoverTop}`)
-  if (position === 'bottom') c.push(`top-full bottom-0 ${$style.popoverBottom}`)
-  if (position === 'right') c.push(`left-full ${$style.popoverRight}`)
-  if (position === 'left') c.push(`right-full left-auto ${$style.popoverLeft}`)
+  if (position === 'top') c.push(`bottom-full ${$style['popover-top']}`)
+  if (position === 'bottom') c.push(`top-full bottom-0 ${$style['popover-bottom']}`)
+  if (position === 'right') c.push(`left-full ${$style['popover-right']}`)
+  if (position === 'left') c.push(`right-full left-auto ${$style['popover-left']}`)
 
   if (align === 'left' && ['bottom', 'top'].includes(position)) c.push('left-0 right-auto')
   if (align === 'center' && ['bottom', 'top'].includes(position)) c.push('left-1/2 right-auto -translate-x-1/2')
@@ -185,7 +191,7 @@ defineExpose({ open, close, toggle, isOpen })
       ref="contentRef"
       class="absolute transform transition-transform z-40 h-fit"
       :class="[
-        $style.popoverContent,
+        $style['popover-content'],
         contentClasses,
         classes.content
       ]"
@@ -198,48 +204,52 @@ defineExpose({ open, close, toggle, isOpen })
 
 <style lang="postcss" module>
 .popover {
-  .popoverContent {
+  .popover-content {
     visibility: hidden;
-    transition-duration: .1s;
-    transition-timing-function: cubic-bezier(.4,0,1,1);
+    transition-duration: 0.1s;
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
   }
-  .popoverTop {
+
+  .popover-top {
     --tw-translate-y: 0.5rem;
   }
-  .popoverRight {
+
+  .popover-right {
     --tw-translate-x: -0.5rem;
   }
-  .popoverBottom {
+
+  .popover-bottom {
     --tw-translate-y: -0.5rem;
   }
-  .popoverLeft {
+
+  .popover-left {
     --tw-translate-x: 0.5rem;
   }
 
-  &.hover:hover .popoverContent,
-  &.is-open .popoverContent {
+  &.is-open .popover-content,
+  &.hover:hover .popover-content {
     visibility: visible;
-    transition-duration: .15s;
-    transition-timing-function: cubic-bezier(0,0,.2,1);
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 
-  &.hover:hover .popoverTop,
-  &.is-open .popoverTop {
+  &.is-open .popover-top,
+  &.hover:hover .popover-top {
     --tw-translate-y: -0.25rem;
   }
 
-  &.hover:hover .popoverRight,
-  &.is-open .popoverRight {
+  &.is-open .popover-right,
+  &.hover:hover .popover-right {
     --tw-translate-x: 0.25rem;
   }
 
-  &.hover:hover .popoverBottom,
-  &.is-open .popoverBottom {
+  &.is-open .popover-bottom,
+  &.hover:hover .popover-bottom {
     --tw-translate-y: 0.25rem;
   }
 
-  &.hover:hover .popoverLeft,
-  &.is-open .popoverLeft {
+  &.is-open .popover-left,
+  &.hover:hover .popover-left {
     --tw-translate-x: -0.25rem;
   }
 }

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'

package/src/components/radio/Radio.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 { RadioProps } from './Radio.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content'
+type InternalExtraData = { selected: Ref<boolean>; }
+
+interface InternalTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {}
+export interface RadioTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<RadioProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
 
-    circle: ({ props }: ThemeParams) => {
+    circle: ({ props }) => {
       let c = 'rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline'
 
       if (props.size === 'xs' || props.size === 'sm') c += ' h-4 w-4'
@@ -14,7 +24,7 @@ export default {
       return c
     },
 
-    circleIcon: ({ props, data }: ThemeParams) => {
+    circleIcon: ({ props, data }) => {
       const c = []
 
       if (!data.selected) c.push('opacity-0')
@@ -27,7 +37,7 @@ export default {
       return c
     },
 
-    label: ({ props, data }: ThemeParams) => {
+    label: ({ props, data }) => {
       let c = 'font-medium text-gray-800 dark:text-gray-200 pl-2'
 
       if (props.size === 'xs') c += ' text-xs'
@@ -38,7 +48,7 @@ export default {
       return c
     },
 
-    content: ({ props }: ThemeParams) => {
+    content: ({ props }) => {
       let c = 'pl-2'
 
       if (props.size === 'xs') c += ' text-xs'
@@ -50,7 +60,7 @@ 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 = []
@@ -119,3 +129,5 @@ export default {
     return vars
   },
 }
+
+export default theme

package/src/components/radio/Radio.vue

@@ -1,9 +1,27 @@
 <script lang="ts">
-export default { name: 'XRadio' }
+const radioProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  value: [String, Number, Boolean, Function, Object, Array],
+  label: String,
+  helper: String,
+  glow: Boolean,
+}
+
+export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
+
+export default {
+  name: 'XRadio',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, type ExtractPublicPropTypes } from 'vue'
 import { useCommon } from '../../composables/common'
 import { useTheme } from '../../composables/theme'
 import { useColors } from '../../composables/colors'
@@ -15,16 +33,7 @@ import XInputError from '../helpers/InputError'
 
 import theme from './Radio.theme'
 
-const props = defineProps({
-  ...useCommon.props(),
-  ...useColors.props('primary'),
-  ...useInteractive.props(),
-  ...useInputtable.props(),
-  value: [String, Number, Boolean, Function, Object, Array],
-  label: String,
-  helper: String,
-  glow: Boolean,
-})
+const props = defineProps(radioProps)
 
 const emit = defineEmits(useInputtable.emits(false))
 
@@ -128,10 +137,11 @@ defineExpose({ focus, blur, reset, validate, setError })
     }
 
     &--glow {
-      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-radio-glow),0 4px 6px -4px var(--x-radio-glow);
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-radio-glow), 0 4px 6px -4px var(--x-radio-glow);
     }
 
-    :global(.dark) &, &:global(.dark) {
+    :global(.dark) &,
+    &:global(.dark) {
       border-color: var(--x-radio-dark-border);
       background-color: var(--x-radio-dark-bg);
 

package/src/components/radio/index.ts

@@ -0,0 +1,3 @@
+export { default as XRadio } from './Radio.vue'
+export type { RadioProps } from './Radio.vue'
+export type { RadioTheme } from './Radio.theme'

package/src/components/scroll/Scroll.theme.ts

@@ -1,7 +1,17 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { ScrollProps } from './Scroll.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<ScrollProps, InternalClasses> {}
+export interface ScrollTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<ScrollProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: '',
   },
 }
+
+export default theme