@indielayer/ui 1.0.10 → 1.2.0

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

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

package/src/components/scroll/Scroll.vue

@@ -1,23 +1,27 @@
 <script lang="ts">
+const scrollProps = {
+  shadow: Boolean,
+  horizontal: Boolean,
+  mousewheel: Boolean,
+  scrollbar: {
+    type: Boolean,
+    default: true,
+  },
+}
+
+export type ScrollProps = ExtractPublicPropTypes<typeof scrollProps>
+
 export default { name: 'XScroll' }
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { ref, toRefs, type ExtractPublicPropTypes } from 'vue'
 import { useScroll, useResizeObserver, useEventListener } from '@vueuse/core'
 import { useTheme } from '../../composables/theme'
 
 import theme from './Scroll.theme'
 
-const props = defineProps({
-  shadow: Boolean,
-  horizontal: Boolean,
-  mousewheel: Boolean,
-  scrollbar: {
-    type: Boolean,
-    default: true,
-  },
-})
+const props = defineProps(scrollProps)
 
 const scrollEl = ref<HTMLElement | null>(null)
 

package/src/components/scroll/index.ts

@@ -0,0 +1,3 @@
+export { default as XScroll } from './Scroll.vue'
+export type { ScrollProps } from './Scroll.vue'
+export type { ScrollTheme } from './Scroll.theme'

package/src/components/select/Select.theme.ts

@@ -1,10 +1,22 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { Ref } from 'vue'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { SelectProps } from './Select.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'label' | 'box' | 'content' | 'iconWrapper' | 'icon'
+type InternalExtraData = {
+  errorInternal: Ref<boolean>;
+}
+
+interface InternalTheme extends ThemeComponent<SelectProps, InternalClasses, InternalExtraData> {}
+export interface SelectTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<SelectProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-block align-bottom text-left focus:outline-none',
 
-    label: ({ props }: ThemeParams) => {
+    label: ({ props }) => {
       let c = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
 
       if (props.size === 'xs') c += ' text-xs'
@@ -15,7 +27,7 @@ export default {
       return c
     },
 
-    box: ({ props, data }: ThemeParams) => {
+    box: ({ props, data }) => {
       let c = 'w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm'
 
       if (!data.errorInternal && !props.disabled) c += ' hover:border-gray-400 dark:hover:border-gray-500'
@@ -37,7 +49,7 @@ export default {
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 
-    icon: ({ props }: ThemeParams) => {
+    icon: ({ props }) => {
       if (props.size === 'sm' || props.size === 'xs') return 'h-3 w-3'
       else if (props.size === 'lg') return 'h-6 w-6'
       else if (props.size === 'xl') return 'h-7 w-7'
@@ -46,9 +58,11 @@ export default {
     },
   },
 
-  styles: ({ props, colors, css }: ThemeParams) => {
+  styles: ({ props, colors, css }) => {
     const color = colors.getPalette('primary')
 
     return css.get('border', color[500])
   },
 }
+
+export default theme

package/src/components/select/Select.vue

@@ -1,9 +1,34 @@
 <script lang="ts">
-export default { name: 'XSelect' }
+const selectProps = {
+  ...useCommon.props(),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  placeholder: String,
+  options: Array as PropType<SelectOption[]>,
+  multiple: Boolean,
+  label: String,
+  helper: String,
+  flat: Boolean,
+}
+
+export type SelectOption = {
+  value: number | string;
+  disabled: boolean;
+  label: string;
+}
+
+export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
+
+export default {
+  name: 'XSelect',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type PropType } from 'vue'
+import { computed, ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { useCommon } from '../../composables/common'
 import { useInputtable } from '../../composables/inputtable'
@@ -21,23 +46,7 @@ import XInputError from '../helpers/InputError'
 
 import theme from './Select.theme'
 
-export type SelectOption = {
-  value: number | string;
-  disabled: boolean;
-  label: string;
-}
-
-const  props = defineProps({
-  ...useCommon.props(),
-  ...useInteractive.props(),
-  ...useInputtable.props(),
-  placeholder: String,
-  options: Array as PropType<Array<SelectOption>>,
-  multiple: Boolean,
-  label: String,
-  helper: String,
-  flat: Boolean,
-})
+const  props = defineProps(selectProps)
 
 const emit = defineEmits(useInputtable.emits())
 

package/src/components/select/index.ts

@@ -0,0 +1,3 @@
+export { default as XSelect } from './Select.vue'
+export type { SelectProps, SelectOption } from './Select.vue'
+export type { SelectTheme } from './Select.theme'

package/src/components/skeleton/Skeleton.theme.ts

@@ -1,7 +1,17 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { SkeletonProps } from './Skeleton.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<SkeletonProps, InternalClasses> {}
+export interface SkeletonTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<SkeletonProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md',
   },
 }
+
+export default theme

package/src/components/skeleton/Skeleton.vue

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

package/src/components/skeleton/index.ts

@@ -0,0 +1,3 @@
+export { default as XSkeleton } from './Skeleton.vue'
+export type { SkeletonProps } from './Skeleton.vue'
+export type { SkeletonTheme } from './Skeleton.theme'

package/src/components/slider/Slider.theme.ts

@@ -1,10 +1,18 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { SliderProps } from './Slider.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'label' | 'drag'
+
+interface InternalTheme extends ThemeComponent<SliderProps, InternalClasses> {}
+export interface SliderTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<SliderProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-block align-bottom text-left focus:outline-none',
 
-    label: ({ props }: ThemeParams) => {
+    label: ({ props }) => {
       let c = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
 
       if (props.size === 'xs') c += ' text-xs'
@@ -18,7 +26,7 @@ export default {
     drag: 'w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm',
   },
 
-  styles: ({ props, colors, css }: ThemeParams) => {
+  styles: ({ props, colors, css }) => {
     const primary = colors.getPalette('primary')
     const color = colors.getPalette(props.color)
 
@@ -28,3 +36,5 @@ export default {
     })
   },
 }
+
+export default theme

package/src/components/slider/Slider.vue

@@ -1,9 +1,30 @@
 <script lang="ts">
-export default { name: 'XSlider' }
+const sliderProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  label: String,
+  min: Number,
+  max: Number,
+  step: {
+    type: Number,
+    default: 1,
+  },
+  gradient: Boolean,
+}
+
+export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>
+export default {
+  name: 'XSlider',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, type ExtractPublicPropTypes } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
@@ -15,20 +36,7 @@ import XProgress from '../../components/progress/Progress.vue'
 
 import theme from './Slider.theme'
 
-const props = defineProps({
-  ...useCommon.props(),
-  ...useColors.props('primary'),
-  ...useInteractive.props(),
-  ...useInputtable.props(),
-  label: String,
-  min: Number,
-  max: Number,
-  step: {
-    type: Number,
-    default: 1,
-  },
-  gradient: Boolean,
-})
+const props = defineProps(sliderProps)
 
 const emit = defineEmits(useInputtable.emits(false))
 

package/src/components/slider/index.ts

@@ -0,0 +1,2 @@
+export { default as XSlider } from './Slider.vue'
+export type { SliderProps } from './Slider.vue'

package/src/components/spacer/index.ts

@@ -0,0 +1 @@
+export { default as XSpacer } from './Spacer'

package/src/components/spinner/Spinner.vue

@@ -1,19 +1,29 @@
 <script lang="ts">
-export default { name: 'XSpinner' }
+const spinnerProps = {
+  ...useCommon.props(),
+  icon: {
+    type: String,
+    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>',
+  },
+}
+
+export type SpinnerProps = ExtractPublicPropTypes<typeof spinnerProps>
+
+export default {
+  name: 'XSpinner',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
 </script>
 
 <script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
 import { useCommon } from '../../composables/common'
 
 import XIcon from '../../components/icon/Icon.vue'
 
-const props = defineProps({
-  ...useCommon.props(),
-  icon: {
-    type: String,
-    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>',
-  },
-})
+defineProps(spinnerProps)
 </script>
 
 <template>

package/src/components/spinner/index.ts

@@ -0,0 +1,2 @@
+export { default as XSpinner } from './Spinner.vue'
+export type { SpinnerProps } from './Spinner.vue'

package/src/components/tab/Tab.theme.ts

@@ -1,8 +1,18 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { TabProps } from './Tab.vue'
+import type { TabGroupInjection } from './TabGroup.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'label' | 'icon'
+type InternalExtraData = Pick<TabGroupInjection, 'state'>['state']
+
+interface InternalTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {}
+export interface TabTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<TabProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props, data }: ThemeParams) => {
+    wrapper: ({ props, data }) => {
       const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
 
       if (data.variant === 'block') c.push('px-8')
@@ -20,3 +30,5 @@ export default {
     icon: 'mr-1.5',
   },
 }
+
+export default theme