@indielayer/ui 1.0.9 → 1.1.0

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)
 
@@ -48,7 +52,7 @@ const { styles, classes, className } = useTheme('scroll', theme, props)
     :class="[
       className,
       classes.wrapper,
-      $style.scrollWrap,
+      $style.scrollwrap,
       horizontal ? [
         $style.horizontal,
         {
@@ -70,7 +74,7 @@ const { styles, classes, className } = useTheme('scroll', theme, props)
       :class="[
         [horizontal ? 'overflow-x-auto' : 'overflow-y-auto'],
         {
-          [$style.hideScroll]: !scrollbar,
+          [$style.hidescroll]: !scrollbar,
         }
       ]"
     >
@@ -80,60 +84,67 @@ const { styles, classes, className } = useTheme('scroll', theme, props)
 </template>
 
 <style lang="postcss" module>
-.scrollWrap {
-  &:before, &:after {
+.scrollwrap {
+  &::before,
+  &::after {
     content: "";
     pointer-events: none;
     position: absolute;
     z-index: 1;
-    transition: box-shadow .2s;
+    transition: box-shadow 0.2s;
   }
 
-  &.horizontal:before, &.horizontal:after {
+  &.horizontal::before,
+  &.horizontal::after {
     top: 0;
     bottom: 0;
     width: 20px;
   }
 
-  &.vertical:before, &.vertical:after {
+  &.vertical::before,
+  &.vertical::after {
     right: 0;
     left: 0;
     height: 20px;
   }
 
-  &.horizontal:before {
+  &.horizontal::before {
     left: 0;
   }
-  &.horizontal:after {
+
+  &.horizontal::after {
     right: 0;
   }
-  &.vertical:before {
+
+  &.vertical::before {
     top: 0;
   }
-  &.vertical:after {
+
+  &.vertical::after {
     bottom: 0;
   }
 
-  &.shadow-left:before {
+  &.shadow-left::before {
     box-shadow: inset 12px 0 10px -10px rgb(0 0 0 / 7%);
   }
 
-  &.shadow-right:after {
+  &.shadow-right::after {
     box-shadow: inset -12px 0 10px -10px rgb(0 0 0 / 7%);
   }
 
-  &.shadow-top:before {
+  &.shadow-top::before {
     box-shadow: inset 0 12px 10px -10px rgb(0 0 0 / 7%);
   }
 
-  &.shadow-bottom:after {
+  &.shadow-bottom::after {
     box-shadow: inset 0 -12px 10px -10px rgb(0 0 0 / 7%);
   }
 }
 
-.hideScroll {
+.hidescroll {
   -ms-overflow-style: auto;
   scrollbar-width: none;
+
   &::-webkit-scrollbar {
     display: none;
   }

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())
 
@@ -321,7 +330,6 @@ defineExpose({ focus, blur, reset, validate, setError })
         :disabled="disabled || loading"
         :multiple="multiple"
         :readonly="readonly"
-        :value="modelValue"
         v-on="inputListeners"
       >
         <option

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