@indielayer/ui 1.2.0 → 1.4.0

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

@@ -0,0 +1,15 @@
+import type { ContainerTheme } from '../Container.vue'
+
+const theme: ContainerTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['px-4 md:px-8']
+
+      if (!props.fluid) classes.push('max-w-screen-2xl mx-auto')
+
+      return classes
+    },
+  },
+}
+
+export default theme

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

@@ -0,0 +1,7 @@
+import type { ContainerTheme } from '../Container.vue'
+
+import BaseTheme from './Container.base.theme'
+
+const theme: ContainerTheme = BaseTheme
+
+export default theme

package/src/components/divider/Divider.vue

@@ -6,18 +6,19 @@ const dividerProps = {
 
 export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>
 
+type InternalClasses = 'wrapper' | 'label' | 'line'
+export interface DividerTheme extends ThemeComponent<DividerProps, InternalClasses> {}
+
 export default { name: 'XDivider' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Divider.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(dividerProps)
 
-const { styles, classes, className } = useTheme('divider', theme, props)
+const { styles, classes, className } = useTheme('Divider', {}, props)
 </script>
 
 <template>

package/src/components/divider/index.ts

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

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

@@ -0,0 +1,13 @@
+import type { DividerTheme } from '../Divider.vue'
+
+const theme: DividerTheme = {
+  classes: {
+    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/theme/Divider.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { DividerTheme } from '../Divider.vue'
+
+import BaseTheme from './Divider.base.theme'
+
+const theme: DividerTheme = BaseTheme
+
+export default theme

package/src/components/drawer/Drawer.vue

@@ -28,6 +28,9 @@ const drawerProps = {
 export type DrawerPosition = typeof drawerPosition[number]
 export type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>
 
+type InternalClasses = 'wrapper' | 'backdrop'
+export interface DrawerTheme extends ThemeComponent<DrawerProps, InternalClasses> {}
+
 export default {
   name: 'XDrawer',
   inheritAttrs: false,
@@ -40,12 +43,10 @@ export default {
 <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 { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XScroll from '../../components/scroll/Scroll.vue'
 
-import theme from './Drawer.theme'
-
 const props = defineProps(drawerProps)
 
 const emit = defineEmits(['update:modelValue'])
@@ -194,7 +195,7 @@ onMounted(() => {
   deferShow.value = true
 })
 
-const { styles, classes, className } = useTheme('drawer', theme, props)
+const { styles, classes, className } = useTheme('Drawer', {}, props)
 
 defineExpose({ open, close })
 </script>

package/src/components/drawer/index.ts

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

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

@@ -0,0 +1,11 @@
+import type { DrawerTheme } from '../Drawer.vue'
+
+const theme: DrawerTheme = {
+  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/theme/Drawer.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { DrawerTheme } from '../Drawer.vue'
+
+import BaseTheme from './Drawer.base.theme'
+
+const theme: DrawerTheme = BaseTheme
+
+export default theme

package/src/components/form/Form.vue

@@ -13,6 +13,12 @@ const formProps = {
     type: [Array, Object] as PropType<[FormError[], FormError]>,
     default: () => ([]),
   },
+  title: String,
+  description: String,
+  hasFooter: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export type FormProps = ExtractPublicPropTypes<typeof formProps>
@@ -35,18 +41,18 @@ export type FormInput = {
   setError: (val: string) => void;
 }
 
+type InternalClasses = 'wrapper' | 'content' | 'title' | 'description' | 'footer'
+export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {}
+
 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'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(formProps)
 
@@ -72,8 +78,10 @@ provide(injectFormKey, {
   isInsideForm: true,
 })
 
-onMounted(() => {
-  if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus()
+onMounted(async () => {
+  if (props.autoFocus && inputs && inputs.length > 0) {
+    setTimeout(inputs[0].focus, 50)
+  }
 })
 
 watch(() => props.errors, (errors) => {
@@ -118,7 +126,7 @@ const submit = (e: Event) => {
   emit('submit', isFormValid)
 }
 
-const { styles, classes, className } = useTheme('form', theme, props)
+const { styles, classes, className } = useTheme('Form', {}, props)
 </script>
 
 <template>
@@ -130,8 +138,22 @@ const { styles, classes, className } = useTheme('form', theme, props)
     ]"
     @submit="submit"
   >
-    <fieldset :disabled="disabled">
+    <slot name="header">
+      <div v-if="title || description" class="mb-10">
+        <p v-if="title" :class="classes.title">{{ title }}</p>
+        <p v-if="description" :class="classes.description">{{ description }}</p>
+      </div>
+    </slot>
+
+    <fieldset :disabled="disabled" :class="classes.content">
       <slot></slot>
     </fieldset>
+
+    <slot v-if="hasFooter" name="footer">
+      <div :class="classes.footer">
+        <slot name="primary-action"></slot>
+        <slot name="secondary-action"></slot>
+      </div>
+    </slot>
   </form>
 </template>

package/src/components/form/index.ts

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

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

@@ -0,0 +1,17 @@
+import type { FormTheme } from '../Form.vue'
+
+const theme: FormTheme = {
+  classes: {
+    wrapper: 'relative',
+
+    content: '',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-gray-500',
+
+    footer: 'space-x-4 mt-4',
+  },
+}
+
+export default theme

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

@@ -0,0 +1,17 @@
+import type { FormTheme } from '../Form.vue'
+
+const theme: FormTheme = {
+  classes: {
+    wrapper: 'relative',
+
+    content: 'grid',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-gray-500',
+
+    footer: 'grid grid-cols-2 gap-4 lg:flex mt-8',
+  },
+}
+
+export default theme

package/src/components/formGroup/FormGroup.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+const formGroupProps = {
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>
+
+export type FormGroupInjection = {
+  registerInputGroup: (name: string, focus: () => void) => void;
+  unregisterInputGroup: (name: string) => void;
+  setValue: (val: string | number | string[] | number[]) => void;
+  value: MaybeRef<string | number | string[] | number[] | null | undefined>;
+  isInsideFormGroup: boolean;
+}
+
+export type FormGroupInput = {
+  name: string;
+  focus: () => void;
+}
+
+type InternalClasses = 'wrapper'
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {}
+
+export default {
+  name: 'XFormGroup',
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import { injectFormGroupKey } from '../../composables/keys'
+
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(formGroupProps)
+
+const inputs: FormGroupInput[] = []
+
+const value = computed<string | number | string[] | number[]>(() => {
+  if (typeof props.modelValue === 'string') return props.modelValue
+  if (typeof props.modelValue === 'number') return props.modelValue
+  if (Array.isArray(props.modelValue)) return props.modelValue
+
+  return ''
+})
+
+provide(injectFormGroupKey, {
+  registerInputGroup: (name: string, focus: () => void) => {
+    inputs.push({ name, focus })
+  },
+  unregisterInputGroup: (name: string) => {
+    const index = inputs.findIndex((i) => i.name === name)
+
+    inputs.splice(index, 1)
+  },
+  setValue: (val) => {
+    emit('update:modelValue', val)
+  },
+  isInsideFormGroup: true,
+  value,
+})
+
+function focus() {
+  inputs[0]?.focus()
+}
+
+const emit = defineEmits(useInputtable.emits())
+
+const {
+  errorInternal,
+  isInsideForm,
+  isFirstValidation,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const listeners = {
+  change: (event: Event) => {
+    if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+  },
+}
+
+const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <x-label
+    tag="fieldset"
+    :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
+    :class="[
+      className,
+    ]"
+    v-on="listeners"
+  >
+    <div :class="classes.wrapper">
+      <slot></slot>
+    </div>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
+</template>

package/src/components/formGroup/__tests__/FormGroup.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FormGroup from '../FormGroup.vue'
+
+describe('FormGroup', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(FormGroup)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/formGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as XFormGroup } from './FormGroup.vue'
+export type { FormGroupProps, FormGroupInjection, FormGroupInput, FormGroupTheme } from './FormGroup.vue'

package/src/components/formGroup/theme/FormGroup.base.theme.ts

@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-2')
+      else classes.push('grid gap-1')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/formGroup/theme/FormGroup.carbon.theme.ts

@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-4')
+      else classes.push('grid gap-3')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/icon/Icon.vue

@@ -13,6 +13,11 @@ const iconProps = {
 }
 
 export type IconProps = ExtractPublicPropTypes<typeof iconProps>
+export type Icon = string | { icon: string; filled?: boolean; viewBox?: string; }
+export type IconInjection = Record<string, Icon>
+
+type InternalClasses = 'wrapper'
+export interface IconTheme extends ThemeComponent<IconProps, InternalClasses> {}
 
 export default {
   name: 'XIcon',
@@ -24,18 +29,16 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref, watchEffect, normalizeStyle, unref, computed, type ExtractPublicPropTypes } from 'vue'
-import { useCommon } from '../../composables/common'
+import { useCommon } from '../../composables/useCommon'
 import { injectIconsKey } from '../../composables/keys'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Icon.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(iconProps)
 
-const icons: any = inject(injectIconsKey, () => ({}))
+const icons = inject(injectIconsKey, {})
 
 const isWrapSVG = ref(false)
-const computedIcon = ref('')
+const computedIcon = ref<Icon | undefined>('')
 const computedFilled = ref(props.filled)
 const computedViewBox = ref(props.viewBox)
 const attrs = ref({})
@@ -62,7 +65,7 @@ watchEffect(() => {
     } else if (typeof injectedIcon === 'object') {
       computedIcon.value = injectedIcon.icon
       computedFilled.value = injectedIcon.filled || props.filled
-      computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox
+      computedViewBox.value = injectedIcon.viewBox || props.viewBox
     }
   } else {
     computedIcon.value = props.icon || ''
@@ -88,7 +91,7 @@ function getSVG(svgString: string) {
   }
 }
 
-const { styles, classes, className } = useTheme('icon', theme, props)
+const { styles, classes, className } = useTheme('Icon', {}, props)
 
 const normalizedStyle = computed(() => normalizeStyle(unref(styles)))
 </script>

package/src/components/icon/index.ts

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

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

@@ -0,0 +1,18 @@
+import type { IconTheme } from '../Icon.vue'
+
+const theme: IconTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = 'inline shrink-0'
+
+      if (props.size === 'xs') return classes + ' h-3 w-3'
+      else if (props.size === 'sm') return classes + ' h-4 w-4'
+      else if (props.size === 'lg') return classes + ' h-6 w-6'
+      else if (props.size === 'xl') return classes + ' h-9 w-9'
+
+      return classes + ' h-5 w-5'
+    },
+  },
+}
+
+export default theme

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

@@ -0,0 +1,17 @@
+import type { IconTheme } from '../Icon.vue'
+
+const theme: IconTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = 'inline shrink-0'
+
+      if (props.size === 'xs') return classes + ' h-3 w-3'
+      else if (props.size === 'lg') return classes + ' h-5 w-5'
+      else if (props.size === 'xl') return classes + ' h-8 w-8'
+
+      return classes + ' h-4 w-4'
+    },
+  },
+}
+
+export default theme

package/src/components/image/Image.vue

@@ -5,14 +5,15 @@ const imageProps = {
 
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
 
+type InternalClasses = 'wrapper'
+export interface ImageTheme extends ThemeComponent<ImageProps, InternalClasses> {}
+
 export default { name: 'XImage' }
 </script>
 
 <script setup lang="ts">
 import { watch, ref, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Image.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
 
@@ -33,7 +34,7 @@ if (typeof window !== 'undefined' && Image) {
   })
 }
 
-const { styles, classes, className } = useTheme('image', theme, props)
+const { styles, classes, className } = useTheme('Image', {}, props)
 </script>
 
 <template>

package/src/components/image/index.ts

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

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

@@ -0,0 +1,9 @@
+import type { ImageTheme } from '../Image.vue'
+
+const theme: ImageTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme

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

@@ -0,0 +1,7 @@
+import type { ImageTheme } from '../Image.vue'
+
+import BaseTheme from './Image.base.theme'
+
+const theme: ImageTheme = BaseTheme
+
+export default theme

package/src/components/index.ts

@@ -1,19 +1,24 @@
+export * from './accordion'
 export * from './alert'
 export * from './avatar'
 export * from './badge'
 export * from './breadcrumbs'
 export * from './button'
 export * from './card'
+export * from './carousel'
 export * from './checkbox'
-export * from './collapse'
 export * from './container'
 export * from './divider'
 export * from './drawer'
 export * from './form'
+export * from './formGroup'
 export * from './icon'
 export * from './image'
 export * from './input'
+export * from './inputFooter'
+export * from './label'
 export * from './link'
+export * from './loader'
 export * from './menu'
 export * from './modal'
 export * from './notifications'
@@ -27,9 +32,11 @@ export * from './skeleton'
 export * from './slider'
 export * from './spacer'
 export * from './spinner'
+export * from './stepper'
 export * from './tab'
 export * from './table'
 export * from './tag'
 export * from './textarea'
+export * from './themeProvider'
 export * from './toggle'
 export * from './tooltip'