@indielayer/ui 1.0.10 → 1.1.0

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'])
 

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, 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({
+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'])
 

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

package/src/components/form/Form.vue

@@ -1,51 +1,61 @@
 <script lang="ts">
-export default {
-  name: 'XForm',
-  inheritAttrs: false,
+const formProps = {
+  autoValidate: {
+    type: Boolean,
+    default: true,
+  },
+  autoFocus: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: Boolean,
+  errors: {
+    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    default: () => ([]),
+  },
 }
-</script>
 
-<script setup lang="ts">
-import { provide, onMounted, watch, nextTick, type PropType } from 'vue'
-import { injectFormKey } from '../../composables/keys'
-import { useTheme } from '../../composables/theme'
+export type FormProps = ExtractPublicPropTypes<typeof formProps>
 
-import theme from './Form.theme'
+export type FormInjection = {
+  registerInput: (name: string, focus: () => void, validate: () => boolean, setError: (val: string) => void) => void;
+  unregisterInput: (name: string) => void;
+  isInsideForm: boolean;
+}
 
 export type FormError = {
   field: string;
   msg: string;
 }
 
-export type Form = {
+export type FormInput = {
   name: string;
   focus: () => void;
-  validate: () => boolean;
+  validate: (val?: any) => boolean;
   setError: (val: string) => void;
 }
 
-const props = defineProps({
-  autoValidate: {
-    type: Boolean,
-    default: true,
-  },
-  autoFocus: {
-    type: Boolean,
-    default: true,
-  },
-  disabled: Boolean,
-  errors: {
-    type: [Array, Object] as PropType<[FormError[], FormError]>,
-    default: () => ([]),
-  },
-})
+export default {
+  name: 'XForm',
+  inheritAttrs: false,
+}
+</script>
+
+<script setup lang="ts">
+import { provide, onMounted, watch, nextTick, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { injectFormKey } from '../../composables/keys'
+import { useTheme } from '../../composables/theme'
+
+import theme from './Form.theme'
+
+const props = defineProps(formProps)
 
 const emit = defineEmits(['submit'])
 
-const inputs: Form[] = []
+const inputs: FormInput[] = []
 
 provide(injectFormKey, {
-  registerInput: (name: string, focus: () => void, validate: () => boolean, setError: (val: string) => void) => {
+  registerInput: (name: string, focus: () => void, validate: (val: any) => boolean, setError: (val: string) => void) => {
     const exists = inputs.find((i) => i.name === name)
 
     if (exists) {

package/src/components/form/index.ts

@@ -0,0 +1,3 @@
+export { default as XForm } from './Form.vue'
+export type { FormProps, FormError, FormInjection, FormInput } from './Form.vue'
+export type { FormTheme } from './Form.theme'

package/src/components/helpers/InputError.tsx

@@ -8,7 +8,7 @@ export default defineComponent({
   },
   setup(props) {
     return () => props.error
-        ? <p class="text-sm text-red-500 dark:text-red-400 mt-1">{props.error}</p>
-        : props.helper ? <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{props.helper}</p> : ''
+      ? <p class="text-sm text-red-500 dark:text-red-400 mt-1">{props.error}</p>
+      : props.helper ? <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{props.helper}</p> : ''
   },
 })

package/src/components/icon/Icon.theme.ts

@@ -1,8 +1,16 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { IconProps } from './Icon.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<IconProps, InternalClasses> {}
+export interface IconTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<IconProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props }: ThemeParams) => {
+    wrapper: ({ props }) => {
       const classes = 'inline'
 
       if (props.size === 'xs') return classes + ' h-3 w-3'
@@ -14,3 +22,5 @@ export default {
     },
   },
 }
+
+export default theme

package/src/components/icon/Icon.vue

@@ -1,16 +1,5 @@
 <script lang="ts">
-export default { name: 'XIcon' }
-</script>
-
-<script setup lang="ts">
-import { inject, ref, watchEffect, normalizeStyle, unref, computed } from 'vue'
-import { useCommon } from '../../composables/common'
-import { injectIconsKey } from '../../composables/keys'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Icon.theme'
-
-const props = defineProps({
+const iconProps = {
   ...useCommon.props(),
   icon: {
     type: String,
@@ -21,7 +10,27 @@ const props = defineProps({
     type: String,
     default: '0 0 24 24',
   },
-})
+}
+
+export type IconProps = ExtractPublicPropTypes<typeof iconProps>
+
+export default {
+  name: 'XIcon',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect, normalizeStyle, unref, computed, type ExtractPublicPropTypes } from 'vue'
+import { useCommon } from '../../composables/common'
+import { injectIconsKey } from '../../composables/keys'
+import { useTheme } from '../../composables/theme'
+
+import theme from './Icon.theme'
+
+const props = defineProps(iconProps)
 
 const icons: any = inject(injectIconsKey, () => ({}))
 
@@ -32,7 +41,7 @@ const computedViewBox = ref(props.viewBox)
 const attrs = ref({})
 
 watchEffect(() => {
-  const injectedIcon = icons && icons[props.icon]
+  const injectedIcon = icons && props.icon && icons[props.icon]
 
   isWrapSVG.value = false
   computedIcon.value = injectedIcon
@@ -56,7 +65,7 @@ watchEffect(() => {
       computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox
     }
   } else {
-    computedIcon.value = props.icon
+    computedIcon.value = props.icon || ''
   }
 })
 

package/src/components/icon/__tests__/Icon.spec.ts

@@ -4,7 +4,11 @@ import Icon from '../Icon.vue'
 
 describe('Icon', () => {
   it('renders without errors', () => {
-    const wrapper = mount(Icon)
+    const wrapper = mount(Icon, {
+      props: {
+        icon: 'star',
+      },
+    })
 
     expect(wrapper.vm).toBeTruthy()
   })

package/src/components/icon/index.ts

@@ -0,0 +1,3 @@
+export { default as XIcon } from './Icon.vue'
+export type { IconProps } from './Icon.vue'
+export type { IconTheme } from './Icon.theme'

package/src/components/image/Image.theme.ts

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

package/src/components/image/Image.vue

@@ -1,18 +1,22 @@
 <script lang="ts">
+const imageProps = {
+  src: String,
+}
+
+export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
+
 export default { name: 'XImage' }
 </script>
 
 <script setup lang="ts">
-import { watch, ref } from 'vue'
+import { watch, ref, type ExtractPublicPropTypes } from 'vue'
 import { useTheme } from '../../composables/theme'
 
 import theme from './Image.theme'
 
 const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
 
-const props = defineProps({
-  src: String,
-})
+const props = defineProps(imageProps)
 
 const source = ref<string | undefined>(fallback)
 

package/src/components/image/index.ts

@@ -0,0 +1,3 @@
+export { default as XImage } from './Image.vue'
+export type { ImageProps } from './Image.vue'
+export type { ImageTheme } from './Image.theme'

package/src/components/index.ts

@@ -1,45 +1,35 @@
-export { default as XAlert } from './alert/Alert.vue'
-export { default as XAvatar } from './avatar/Avatar.vue'
-export { default as XBadge } from './badge/Badge.vue'
-export { default as XBreadcrumbs } from './breadcrumbs/Breadcrumbs.vue'
-export { default as XButton } from './button/Button.vue'
-export { default as XButtonGroup } from './button/ButtonGroup.vue'
-export { default as XCard } from './card/Card.vue'
-export { default as XCheckbox } from './checkbox/Checkbox.vue'
-export { default as XCollapse } from './collapse/Collapse.vue'
-export { default as XContainer } from './container/Container.vue'
-export { default as XDivider } from './divider/Divider.vue'
-export { default as XDrawer } from './drawer/Drawer.vue'
-export { default as XForm } from './form/Form.vue'
-export { default as XIcon } from './icon/Icon.vue'
-export { default as XImage } from './image/Image.vue'
-export { default as XInput } from './input/Input.vue'
-export { default as XLink } from './link/Link.vue'
-export { default as XMenu } from './menu/Menu.vue'
-export { default as XMenuItem } from './menu/MenuItem.vue'
-export { default as XModal } from './modal/Modal.vue'
-export { default as XNotifications } from './notifications/Notifications.vue'
-export { default as XPagination } from './pagination/Pagination.vue'
-export { default as XPaginationItem } from './pagination/PaginationItem.vue'
-export { default as XPopover } from './popover/Popover.vue'
-export { default as XPopoverContainer } from './popover/PopoverContainer.vue'
-export { default as XProgress } from './progress/Progress.vue'
-export { default as XRadio } from './radio/Radio.vue'
-export { default as XScroll } from './scroll/Scroll.vue'
-export { default as XSelect } from './select/Select.vue'
-export { default as XSkeleton } from './skeleton/Skeleton.vue'
-export { default as XSlider } from './slider/Slider.vue'
-export { default as XSpacer } from './spacer/Spacer'
-export { default as XSpinner } from './spinner/Spinner.vue'
-export { default as XTable } from './table/Table.vue'
-export { default as XTableBody } from './table/TableBody'
-export { default as XTableCell } from './table/TableCell.vue'
-export { default as XTableHead } from './table/TableHead'
-export { default as XTableHeader } from './table/TableHeader.vue'
-export { default as XTableRow } from './table/TableRow.vue'
-export { default as XTab } from './tab/Tab.vue'
-export { default as XTabGroup } from './tab/TabGroup.vue'
-export { default as XTag } from './tag/Tag.vue'
-export { default as XTextarea } from './textarea/Textarea.vue'
-export { default as XToggle } from './toggle/Toggle.vue'
-export { default as XTooltip } from './tooltip/Tooltip.vue'
+export * from './alert'
+export * from './avatar'
+export * from './badge'
+export * from './breadcrumbs'
+export * from './button'
+export * from './card'
+export * from './checkbox'
+export * from './collapse'
+export * from './container'
+export * from './divider'
+export * from './drawer'
+export * from './form'
+export * from './icon'
+export * from './image'
+export * from './input'
+export * from './link'
+export * from './menu'
+export * from './modal'
+export * from './notifications'
+export * from './pagination'
+export * from './popover'
+export * from './progress'
+export * from './radio'
+export * from './scroll'
+export * from './select'
+export * from './skeleton'
+export * from './slider'
+export * from './spacer'
+export * from './spinner'
+export * from './tab'
+export * from './table'
+export * from './tag'
+export * from './textarea'
+export * from './toggle'
+export * from './tooltip'