@indielayer/ui 1.0.9 → 1.1.0

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))
 
@@ -112,7 +121,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
 <style lang="postcss" module>
   .checkbox {
     &--glow {
-      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-checkbox-glow),0 4px 6px -4px var(--x-checkbox-glow);
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-checkbox-glow), 0 4px 6px -4px var(--x-checkbox-glow);
     }
   }
 </style>

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

package/src/components/collapse/Collapse.vue

@@ -1,9 +1,23 @@
 <script lang="ts">
+const collapseProps = {
+  ...useColors.props(),
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: Boolean,
+  icon: String,
+}
+
+export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>
+
 export default { name: 'XCollapse' }
 </script>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes } from 'vue'
 import { useTheme } from '../../composables/theme'
 import { useColors } from '../../composables/colors'
 
@@ -11,17 +25,7 @@ import XIcon from '../../components/icon/Icon.vue'
 
 import theme from './Collapse.theme'
 
-const props = defineProps({
-  ...useColors.props(),
-  tag: {
-    type: String,
-    default: 'div',
-  },
-  disabled: Boolean,
-  expanded: Boolean,
-  showIcon: Boolean,
-  icon: String,
-})
+const props = defineProps(collapseProps)
 
 const emit = defineEmits(['expand'])
 
@@ -32,48 +36,48 @@ watch(() => props.expanded, () => {
   collapsed.value = !props.expanded
 })
 
-function onBeforeEnter(el: HTMLElement) {
-  if (animated.value) el.style.height = '0px'
+function onBeforeEnter(el: Element) {
+  if (animated.value) (el as HTMLElement).style.height = '0px'
 }
 
-function onEnter(el: HTMLElement, done: ()=> void) {
+function onEnter(el: Element, done: () => void) {
   if (!animated.value) done()
   else {
     el.addEventListener('transitionend', done)
     setTimeout(() => {
-      el.style.height = `${el.scrollHeight}px`
+      (el as HTMLElement).style.height = `${el.scrollHeight}px`
     }, 1)
   }
 }
 
-function onAfterEnter(el: HTMLElement) {
+function onAfterEnter(el: Element) {
   if (!animated.value) {
     animated.value = true
   } else {
-    el.style.removeProperty('height')
+    (el as HTMLElement).style.removeProperty('height')
   }
 }
 
-function onBeforeLeave(el: HTMLElement) {
+function onBeforeLeave(el: Element) {
   if (!animated.value) return
-  el.style.height = `${el.scrollHeight}px`
+  (el as HTMLElement).style.height = `${el.scrollHeight}px`
 }
 
-function onLeave(el: HTMLElement ,done: ()=> void) {
+function onLeave(el: Element, done: () => void) {
   if (!animated.value) done()
   else {
     el.addEventListener('transitionend', done)
     setTimeout(() => {
-      el.style.height = '0px'
+      (el as HTMLElement).style.height = '0px'
     }, 1)
   }
 }
 
-function onAfterLeave(el: HTMLElement) {
+function onAfterLeave(el: Element) {
   if (!animated.value) {
     animated.value = true
   } else {
-    el.style.removeProperty('height')
+    (el as HTMLElement).style.removeProperty('height')
   }
 }
 

package/src/components/collapse/index.ts

@@ -0,0 +1,3 @@
+export { default as XCollapse } from './Collapse.vue'
+export type { CollapseProps } from './Collapse.vue'
+export type { CollapseTheme } from './Collapse.theme'

package/src/components/container/Container.theme.ts

@@ -1,7 +1,17 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { ContainerProps } from './Container.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<ContainerProps, InternalClasses> {}
+export interface ContainerTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<ContainerProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
   },
 }
+
+export default theme

package/src/components/container/Container.vue

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

package/src/components/container/index.ts

@@ -0,0 +1,3 @@
+export { default as XContainer } from './Container.vue'
+export type { ContainerProps } from './Container.vue'
+export type { ContainerTheme } from './Container.theme'

package/src/components/divider/Divider.theme.ts

@@ -1,11 +1,21 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { DividerProps } from './Divider.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'label' | 'line'
+
+interface InternalTheme extends ThemeComponent<DividerProps, InternalClasses> {}
+export interface DividerTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<DividerProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props }: ThemeParams) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
+    wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
 
     label: 'font-medium text-sm text-gray-600 dark:text-gray-300',
 
     line: 'bg-gray-200 dark:bg-slate-700 flex-grow',
   },
 }
+
+export default theme

package/src/components/divider/Divider.vue

@@ -1,16 +1,21 @@
 <script lang="ts">
+const dividerProps = {
+  label: String,
+  vertical: Boolean,
+}
+
+export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>
+
 export default { name: 'XDivider' }
 </script>
 
 <script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
 import { useTheme } from '../../composables/theme'
 
 import theme from './Divider.theme'
 
-const props = defineProps({
-  label: String,
-  vertical: Boolean,
-})
+const props = defineProps(dividerProps)
 
 const { styles, classes, className } = useTheme('divider', theme, props)
 </script>

package/src/components/divider/index.ts

@@ -0,0 +1,3 @@
+export { default as XDivider } from './Divider.vue'
+export type { DividerProps } from './Divider.vue'
+export type { DividerTheme } from './Divider.theme'

package/src/components/drawer/Drawer.theme.ts

@@ -1,9 +1,19 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { DrawerProps } from './Drawer.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'backdrop'
+
+interface InternalTheme extends ThemeComponent<DrawerProps, InternalClasses> {}
+export interface DrawerTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<DrawerProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
 
     backdrop: 'duration-150 ease-in-out',
   },
 }
+
+export default theme

package/src/components/drawer/Drawer.vue

@@ -1,23 +1,9 @@
 <script lang="ts">
-export default {
-  name: 'XDrawer',
-  inheritAttrs: false,
-}
-</script>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, watch, watchEffect, type PropType } from 'vue'
-import { breakpointsTailwind, SwipeDirection, useBreakpoints, useEventListener, useSwipe, type Breakpoints } from '@vueuse/core'
-import { useTheme } from '../../composables/theme'
-
-import XScroll from '../../components/scroll/Scroll.vue'
-
-import theme from './Drawer.theme'
-
-const props = defineProps({
+const drawerPosition = ['left', 'right', 'top', 'bottom'] as const
+const drawerProps = {
   modelValue: Boolean,
   position: {
-    type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
+    type: String as PropType<DrawerPosition>,
     default: 'left',
   },
   teleportTo: {
@@ -37,7 +23,30 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-})
+}
+
+export type DrawerPosition = typeof drawerPosition[number]
+export type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>
+
+export default {
+  name: 'XDrawer',
+  inheritAttrs: false,
+  validators: {
+    position: drawerPosition,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, watchEffect, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { breakpointsTailwind, useBreakpoints, useEventListener, useSwipe, type Breakpoints, type UseSwipeDirection } from '@vueuse/core'
+import { useTheme } from '../../composables/theme'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+
+import theme from './Drawer.theme'
+
+const props = defineProps(drawerProps)
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -86,20 +95,20 @@ const { lengthX, lengthY } = useSwipe(drawerRef, {
   //     left.value = '0'
   //   }
   // },
-  // onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
+  // onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
   //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
   //     left.value = '100%'
   //   } else {
   //     left.value = '0'
   //   }
   // },
-  onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
+  onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
     if (detached.value) {
       if (
-        (props.position === 'left' && direction === 'LEFT') ||
-            (props.position === 'right' && direction === 'RIGHT') ||
-            (props.position === 'top' && direction === 'UP') ||
-            (props.position === 'bottom' && direction === 'DOWN')
+        (props.position === 'left' && direction === 'left') ||
+            (props.position === 'right' && direction === 'right') ||
+            (props.position === 'top' && direction === 'up') ||
+            (props.position === 'bottom' && direction === 'down')
       ) close()
     }
   },
@@ -129,15 +138,15 @@ const autoClasses = computed(() => {
   return c
 })
 
-function onBeforeEnter(el: HTMLElement) {
+function onBeforeEnter(el: Element) {
   el.classList.add('inset-0')
-  if (props.position === 'top') el.style.top = `-${props.height}px`
-  else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
-  else if (props.position === 'left') el.style.left = `-${props.width}px`
-  else if (props.position === 'right') el.style.right = `-${props.width}px`
+  if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
+  else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
+  else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`
+  else if (props.position === 'right') (el as HTMLElement).style.right = `-${props.width}px`
 }
 
-function onEnter(el: HTMLElement, done: ()=> void) {
+function onEnter(el: Element, done: () => void) {
   if (!detached.value) {
     done()
 
@@ -146,27 +155,27 @@ function onEnter(el: HTMLElement, done: ()=> void) {
   el.addEventListener('transitionend', done)
   setTimeout(() => {
     if (props.backdrop) el.classList.add('bg-gray-500/30')
-    if (props.position === 'top') el.style.top = '0'
-    else if (props.position === 'bottom') el.style.bottom = '0'
-    else if (props.position === 'left') el.style.left = '0'
-    else if (props.position === 'right') el.style.right = '0'
+    if (props.position === 'top') (el as HTMLElement).style.top = '0'
+    else if (props.position === 'bottom') (el as HTMLElement).style.bottom = '0'
+    else if (props.position === 'left') (el as HTMLElement).style.left = '0'
+    else if (props.position === 'right') (el as HTMLElement).style.right = '0'
   }, 1)
 }
 
-function onBeforeLeave(el: HTMLElement) {}
+function onBeforeLeave(el: Element) {}
 
-function onLeave(el: HTMLElement, done: ()=> void) {
+function onLeave(el: Element, done: () => void) {
   el.addEventListener('transitionend', done)
   setTimeout(() => {
     if (props.backdrop) el.classList.remove('bg-gray-500/30')
-    if (props.position === 'top') el.style.top = `-${props.height}px`
-    else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
-    else if (props.position === 'left') el.style.left = `-${props.width}px`
-    else if (props.position === 'right') el.style.right = `-${props.width}px`
+    if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
+    else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
+    else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`
+    else if (props.position === 'right') (el as HTMLElement).style.right = `-${props.width}px`
   }, 1)
 }
 
-function onAfterLeave(el: HTMLElement, done: ()=> void) {
+function onAfterLeave(el: Element) {
   el.classList.remove('inset-0')
 }
 

package/src/components/drawer/index.ts

@@ -0,0 +1,3 @@
+export { default as XDrawer } from './Drawer.vue'
+export type { DrawerProps, DrawerPosition } from './Drawer.vue'
+export type { DrawerTheme } from './Drawer.theme'

package/src/components/form/Form.theme.ts

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