@indielayer/ui 1.0.9 → 1.1.0

package/src/components/form/Form.vue

@@ -1,30 +1,5 @@
 <script lang="ts">
-export default {
-  name: 'XForm',
-  inheritAttrs: false,
-}
-</script>
-
-<script setup lang="ts">
-import { provide, onMounted, watch, nextTick, type PropType } from 'vue'
-import { injectFormKey } from '../../composables/keys'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Form.theme'
-
-export type FormError = {
-  field: string
-  msg: string
-}
-
-export type Form = {
-  name: string,
-  focus: ()=> void,
-  validate: ()=> boolean,
-  setError: (val: string)=> void,
-}
-
-const props = defineProps({
+const formProps = {
   autoValidate: {
     type: Boolean,
     default: true,
@@ -38,22 +13,56 @@ const props = defineProps({
     type: [Array, Object] as PropType<[FormError[], FormError]>,
     default: () => ([]),
   },
-})
+}
+
+export type FormProps = ExtractPublicPropTypes<typeof formProps>
+
+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 FormInput = {
+  name: string;
+  focus: () => void;
+  validate: (val?: any) => boolean;
+  setError: (val: string) => void;
+}
+
+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) {
       exists.focus = focus
       exists.validate = validate
       exists.setError = setError
-    }
-    else inputs.push({ name, focus, validate, setError })
+    } else inputs.push({ name, focus, validate, setError })
   },
   unregisterInput: (name: string) => {
     const index = inputs.findIndex((i) => i.name === name)

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'

package/src/components/input/Input.theme.ts

@@ -1,10 +1,19 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { InputProps } from './Input.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'label' | 'input' | 'icon'
+type InternalExtraData = { errorInternal: any; }
+
+interface InternalTheme extends ThemeComponent<InputProps, InternalClasses, InternalExtraData> {}
+export interface InputTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<InputProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-block align-bottom text-left',
 
-    label: ({ props }: ThemeParams) => {
+    label: ({ props }) => {
       const classes = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
 
       if (props.size === 'xs') return classes + ' text-xs'
@@ -12,10 +21,10 @@ export default {
       else if (props.size === 'lg') return classes + ' text-lg'
       else if (props.size === 'xl') return classes + ' text-xl'
 
-      return classes // + ' text-sm'
+      return classes
     },
 
-    input: ({ props, data }: ThemeParams) => {
+    input: ({ props, data }) => {
       const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
 
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
@@ -36,9 +45,11 @@ export default {
     icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
   },
 
-  styles: ({ colors, props, css }: ThemeParams) => {
+  styles: ({ colors, props, css }) => {
     const color = colors.getPalette(props.color)
 
     return css.get('border', color[400])
   },
 }
+
+export default theme

package/src/components/input/Input.vue

@@ -1,22 +1,5 @@
 <script lang="ts">
-export default { name: 'XInput' }
-</script>
-
-<script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useInputtable } from '../../composables/inputtable'
-import { useInteractive } from '../../composables/interactive'
-import { eyeIcon, eyeVisibleIcon } from '../../common/icons'
-
-import XIcon from '../icon/Icon.vue'
-import XInputError from '../helpers/InputError'
-
-import theme from './Input.theme'
-
-const props = defineProps({
+const inputProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   ...useInteractive.props(),
@@ -28,7 +11,7 @@ const props = defineProps({
   helper: String,
   label: String,
   dir: {
-    type: String,
+    type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr',
   },
   icon: String,
@@ -44,13 +27,41 @@ const props = defineProps({
     default: 'text',
   },
   block: Boolean,
-})
+}
+
+export type InputProps = ExtractPublicPropTypes<typeof inputProps>
+
+export default {
+  name: 'XInput',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, type PropType, type ExtractPublicPropTypes, watch } from 'vue'
+import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/colors'
+import { useCommon } from '../../composables/common'
+import { useInputtable } from '../../composables/inputtable'
+import { useInteractive } from '../../composables/interactive'
+import { eyeIcon, eyeVisibleIcon } from '../../common/icons'
+
+import XIcon from '../icon/Icon.vue'
+import XInputError from '../helpers/InputError'
+
+import theme from './Input.theme'
+
+const props = defineProps(inputProps)
 
 const emit = defineEmits(useInputtable.emits())
 
 const elRef = ref<HTMLInputElement | null>(null)
 const currentType = ref(props.type)
 
+watch(() => props.type, (newValue) => { currentType.value = newValue })
+
 function onChange(e: Event) {
   if (!e.target) return
 
@@ -60,11 +71,11 @@ function onChange(e: Event) {
     const value = Number(target.value)
 
     if (typeof props.min !== 'undefined') {
-      if (value < props.min) target.value = props.min.toString()
+      if (value < Number(props.min)) target.value = props.min.toString()
     }
 
     if (typeof props.max !== 'undefined') {
-      if (value > props.max) target.value = props.max.toString()
+      if (value > Number(props.max)) target.value = props.max.toString()
     }
   }
 }

package/src/components/input/index.ts

@@ -0,0 +1,3 @@
+export { default as XInput } from './Input.vue'
+export type { InputProps } from './Input.vue'
+export type { InputTheme } from './Input.theme'

package/src/components/link/Link.theme.ts

@@ -1,11 +1,19 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { LinkProps } from './Link.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<LinkProps, InternalClasses> {}
+export interface LinkTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<LinkProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex',
   },
 
-  styles: ({ colors, props, css }: ThemeParams) => {
+  styles: ({ colors, props, css }) => {
     const color = colors.getPalette(props.color || 'gray')
 
     return css.variables({
@@ -24,3 +32,5 @@ export default {
     })
   },
 }
+
+export default theme

package/src/components/link/Link.vue

@@ -1,8 +1,23 @@
 <script lang="ts">
+const linkProps = {
+  ...useColors.props(),
+  tag: {
+    type: String,
+    default: 'a',
+  },
+  to: [String, Object],
+  shadow: Boolean,
+  external: Boolean,
+  underline: Boolean,
+}
+
+export type LinkProps = ExtractPublicPropTypes<typeof linkProps>
+
 export default { name: 'XLink' }
 </script>
 
 <script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
 import { useColors } from '../../composables/colors'
 import { useTheme } from '../../composables/theme'
 import { externalIcon } from '../../common/icons'
@@ -11,17 +26,7 @@ import XIcon from '../icon/Icon.vue'
 
 import theme from './Link.theme'
 
-const props = defineProps({
-  ...useColors.props(),
-  tag: {
-    type: String,
-    default: 'a',
-  },
-  to: [String, Object],
-  shadow: Boolean,
-  external: Boolean,
-  underline: Boolean,
-})
+const props = defineProps(linkProps)
 
 const { styles, classes, className } = useTheme('link', theme, props)
 </script>
@@ -62,12 +67,14 @@ const { styles, classes, className } = useTheme('link', theme, props)
 
     &--shadow {
       box-shadow: inset 0 -0.315em 0 0 var(--x-link-shadow);
+
       &:hover {
         box-shadow: inset 0 -1.325em 0 0 var(--x-link-shadow);
       }
     }
 
-    :global(.dark) &, &:global(.dark) {
+    :global(.dark) &,
+    &:global(.dark) {
       color: var(--x-link-dark-text);
 
       &:hover {
@@ -76,6 +83,7 @@ const { styles, classes, className } = useTheme('link', theme, props)
 
       &--shadow {
         box-shadow: inset 0 -0.315em 0 0 var(--x-link-dark-shadow);
+
         &:hover {
           box-shadow: inset 0 -1.325em 0 0 var(--x-link-dark-shadow);
         }

package/src/components/link/index.ts

@@ -0,0 +1,3 @@
+export { default as XLink } from './Link.vue'
+export type { LinkProps } from './Link.vue'
+export type { LinkTheme } from './Link.theme'

package/src/components/menu/Menu.theme.ts

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