@indielayer/ui 1.2.0 → 1.4.0

package/src/components/card/Card.vue

@@ -9,18 +9,19 @@ const cardProps = {
 
 export type CardProps = ExtractPublicPropTypes<typeof cardProps>
 
+type InternalClasses = 'wrapper'
+export interface CardTheme extends ThemeComponent<CardProps, InternalClasses> {}
+
 export default { name: 'XCard' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Card.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(cardProps)
 
-const { styles, classes, className } = useTheme('card', theme, props)
+const { styles, classes, className } = useTheme('Card', {}, props)
 </script>
 
 <template>

package/src/components/card/index.ts

@@ -1,3 +1,2 @@
 export { default as XCard } from './Card.vue'
-export type { CardProps } from './Card.vue'
-export type { CardTheme } from './Card.theme'
+export type { CardProps, CardTheme } from './Card.vue'

package/src/components/card/theme/Card.base.theme.ts

@@ -0,0 +1,9 @@
+import type { CardTheme } from '../Card.vue'
+
+const theme: CardTheme = {
+  classes: {
+    wrapper: ({ props }) => `rounded bg-white dark:bg-gray-800${props.flat ? '' : ' shadow'}`,
+  },
+}
+
+export default theme

package/src/components/card/theme/Card.carbon.theme.ts

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

package/src/components/carousel/Carousel.vue

@@ -0,0 +1,138 @@
+<script lang="ts">
+const carouselEffects = ['slide'] as const
+
+export type CarouselEffect = typeof carouselEffects[number]
+
+const carouselProps = {
+  autoplay: Boolean,
+  delay: {
+    type: Number,
+    default: 5000,
+  },
+  showDots: {
+    type: Boolean,
+    default: true,
+  },
+  effect: {
+    type: String as PropType<CarouselEffect>,
+    default: 'slide',
+  },
+  classDots: [Array, String],
+}
+
+export type CarouselProps = ExtractPublicPropTypes<typeof carouselProps>
+
+type InternalClasses = 'wrapper' | 'slides' | 'dots' | 'dot' | 'dotActive'
+type InternalData = {
+  current: number;
+  total: number;
+}
+export interface CarouselTheme extends ThemeComponent<CarouselProps, InternalClasses, InternalData> {}
+
+export default {
+  name: 'XCarousel',
+  validators: {},
+}
+</script>
+
+<script setup lang="ts">
+import { ref, type ExtractPublicPropTypes, type PropType, computed, watch, onMounted } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(carouselProps)
+
+const slidesRef = ref<HTMLElement | null>(null)
+
+const current = ref(0)
+const total = computed(() => slidesRef.value?.children.length || 0)
+
+let autoplayInterval: ReturnType<typeof setInterval> | null = null
+
+onMounted(() => {
+  moveSlides()
+  startAutoPlay()
+})
+
+function startAutoPlay() {
+  if (!props.autoplay) return
+
+  if (autoplayInterval) {
+    clearInterval(autoplayInterval)
+  }
+  autoplayInterval = setInterval(() => {
+    next()
+  }, props.delay)
+}
+
+watch(current, moveSlides)
+
+function moveSlides() {
+  if (slidesRef.value) {
+    const slides = slidesRef.value.children
+
+    for (let i = 0; i < slides.length; i++) {
+      const slide = slides[i] as HTMLElement
+
+      slide.style.transform = `translateX(${(i - current.value) * 100}%)`
+    }
+  }
+}
+
+function to(index: number): void {
+  current.value = index
+  if (autoplayInterval) clearInterval(autoplayInterval)
+}
+
+function next(): void {
+  if (current.value < total.value - 1) {
+    current.value += 1
+  } else {
+    current.value = 0
+  }
+}
+
+function prev(): void {
+  if (current.value > 0) {
+    current.value -= 1
+  } else {
+    current.value = total.value - 1
+  }
+}
+
+const { styles, classes, className } = useTheme('Carousel', {}, props, {
+  current,
+  total,
+})
+
+defineExpose({ to, next, prev })
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <div
+      ref="slidesRef"
+      :class="classes.slides"
+    >
+      <slot v-bind="{ to, next, prev }"></slot>
+    </div>
+    <slot v-if="showDots" name="dots" v-bind="{ to, next, prev }">
+      <div :class="[classes.dots, classDots]">
+        <span
+          v-for="i in total"
+          :key="i"
+          :class="[
+            classes.dot,
+            i - 1 === current ? classes.dotActive : ''
+          ]"
+          @click="to(i - 1)"
+        ></span>
+      </div>
+    </slot>
+  </div>
+</template>

package/src/components/carousel/CarouselSlide.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+const carouselSlideProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+}
+
+export type CarouselSlideProps = ExtractPublicPropTypes<typeof carouselSlideProps>
+
+type InternalClasses = 'wrapper'
+export interface CarouselSlideTheme extends ThemeComponent<CarouselSlideProps, InternalClasses> {}
+
+export default {
+  name: 'XCarouselSlide',
+}
+</script>
+
+<script setup lang="ts">
+import { type ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(carouselSlideProps)
+
+const { styles, classes, className } = useTheme('CarouselSlide', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="[
+      className,
+      $style['carousel-slide'],
+      classes.wrapper,
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<style lang="postcss" scoped module>
+.carousel-slide {
+  :slotted(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>

package/src/components/carousel/__tests__/Carousel.spec.ts

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

package/src/components/carousel/index.ts

@@ -0,0 +1,4 @@
+export { default as XCarousel } from './Carousel.vue'
+export { default as XCarouselSlide } from './CarouselSlide.vue'
+export type { CarouselProps, CarouselTheme, CarouselEffect } from './Carousel.vue'
+export type { CarouselSlideProps, CarouselSlideTheme } from './CarouselSlide.vue'

package/src/components/carousel/theme/Carousel.base.theme.ts

@@ -0,0 +1,25 @@
+import type { CarouselTheme } from '../Carousel.vue'
+
+const theme: CarouselTheme = {
+  classes: {
+    wrapper({ props }) {
+      const classes = ['relative w-full h-full overflow-hidden']
+
+      return classes
+    },
+
+    slides({ props }) {
+      const classes = ['relative w-full h-full overflow-hidden transition-transform duration-300 ease-in-out']
+
+      return classes
+    },
+
+    dots: 'absolute flex gap-2 w-full justify-center items-center bottom-10',
+
+    dot: 'bg-white w-2 h-2 rounded-full transition-all ease-in-out duration-300 opacity-75 cursor-pointer',
+
+    dotActive: '!w-8 !opacity-100',
+  },
+}
+
+export default theme

package/src/components/carousel/theme/Carousel.carbon.theme.ts

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

package/src/components/carousel/theme/CarouselSlide.base.theme.ts

@@ -0,0 +1,9 @@
+import type { CarouselSlideTheme } from '../CarouselSlide.vue'
+
+const theme: CarouselSlideTheme = {
+  classes: {
+    wrapper: 'absolute w-full h-full shrink-0 overflow-hidden transition-transform duration-300 ease-in-out',
+  },
+}
+
+export default theme

package/src/components/carousel/theme/CarouselSlide.carbon.theme.ts

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

package/src/components/checkbox/Checkbox.vue

@@ -4,13 +4,17 @@ const checkboxProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  label: String,
-  helper: String,
+  value: [String, Number],
+  indeterminate: Boolean,
   glow: Boolean,
 }
 
 export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>
 
+type InternalClasses = 'wrapper' | 'content' | 'box' | 'icon' | 'label'
+type InternalExtraData = { checked: Ref<boolean>; isInsideForm: boolean; isInsideFormGroup: boolean;}
+export interface CheckboxTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XCheckbox',
   validators: {
@@ -20,17 +24,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useInteractive } from '../../composables/interactive'
-import { useInputtable } from '../../composables/inputtable'
-
-import XSpinner from '../../components/spinner/Spinner.vue'
-import XInputError from '../helpers/InputError'
+import { ref, watch, type ExtractPublicPropTypes, type Ref, unref, nextTick } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
 
-import theme from './Checkbox.theme'
+import XSpinner from '../spinner/Spinner.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(checkboxProps)
 
@@ -39,14 +41,6 @@ const emit = defineEmits(useInputtable.emits(false))
 const elRef = ref<HTMLElement | null>(null)
 const checked = ref(false)
 
-watch(() => props.modelValue, (value) => {
-  checked.value = !!value
-}, { immediate: true })
-
-watch(() => checked.value, (value) => {
-  emit('update:modelValue', value)
-})
-
 function toggle() {
   checked.value = !checked.value
 }
@@ -55,13 +49,69 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
+  isInsideFormGroup,
+  isFirstValidation,
+  formGroup,
   reset,
   validate,
   setError,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('checkbox', theme, props, { checked })
+if (isInsideFormGroup) {
+  watch(() => formGroup.value, () => {
+    const formGroupValue = unref(formGroup.value)
+
+    if (formGroupValue && Array.isArray(formGroupValue) && formGroupValue.includes(props.value as never)) checked.value = true
+    else checked.value = false
+  }, { immediate: true, deep: true })
+
+  watch(() => checked.value, (value) => {
+    if (!props.value) return
+
+    const formGroupValue = unref(formGroup.value)
+
+    if (value) {
+      if (formGroupValue && Array.isArray(formGroupValue)) {
+        if (!formGroupValue.includes(props.value as never)) {
+          const newValue = [...formGroupValue, props.value]
+
+          formGroup.setValue(newValue as any)
+        }
+      } else {
+        formGroup.setValue([props.value as any])
+      }
+    } else {
+      if (formGroupValue && Array.isArray(formGroupValue) && formGroupValue.includes(props.value as never)) {
+        const index = formGroupValue.findIndex((v) => v === props.value)
+        const newValue = [...formGroupValue]
+
+        newValue.splice(index, 1)
+        formGroup.setValue(newValue as any)
+      }
+    }
+  })
+} else {
+  watch(() => props.modelValue, (value) => {
+    checked.value = !!value
+  }, { immediate: true })
+
+  watch(() => checked.value, (value) => {
+    emit('update:modelValue', value)
+  })
+}
+
+const listeners = {
+  input: () => {
+    if (isInsideFormGroup) return
+    setTimeout(() => {
+      if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+    }, 0)
+  },
+}
+
+const { styles, classes, className } = useTheme('Checkbox', {}, props, { checked, isInsideForm, isInsideFormGroup })
 
 defineExpose({ focus, blur, toggle, reset, validate, setError })
 </script>
@@ -72,25 +122,25 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm }
     ]"
   >
     <div
       ref="elRef"
-      class="flex items-center"
-      :class="{ 'cursor-not-allowed': disabled }"
+      :class="classes.content"
       tabindex="0"
       @keypress.prevent.stop.space="toggle"
     >
       <input
+        :id="id"
         v-model="checked"
-        :aria-checked="checked ? 'true' : 'false'"
+        :name="name"
+        :aria-checked="indeterminate ? 'mixed' : (checked ? 'true' : 'false')"
         :aria-disabled="disabled ? 'true' : undefined"
         type="checkbox"
         class="invisible absolute"
         :disabled="disabled || loading"
-        :name="name"
         :required="required"
+        v-on="listeners"
       />
       <div
         :class="[
@@ -99,6 +149,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
+        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-gray-900"></span>
         <slot v-else name="icon">
           <svg
             viewBox="0 0 20 20"
@@ -114,7 +165,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>
 

package/src/components/checkbox/index.ts

@@ -1,3 +1,2 @@
 export { default as XCheckbox } from './Checkbox.vue'
-export type { CheckboxProps } from './Checkbox.vue'
-export type { CheckboxTheme } from './Checkbox.theme'
+export type { CheckboxProps, CheckboxTheme } from './Checkbox.vue'

package/src/components/checkbox/{Checkbox.theme.ts → theme/Checkbox.base.theme.ts}

@@ -1,18 +1,14 @@
-import type { Ref } from 'vue'
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { CheckboxProps } from './Checkbox.vue'
+import type { CheckboxTheme } from '../Checkbox.vue'
 
-type InternalClasses = 'wrapper' | 'box' | 'icon' | 'label'
-type InternalExtraData = { checked: Ref<boolean>; }
+const theme: CheckboxTheme = {
+  classes: {
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
 
-interface InternalTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {}
-export interface CheckboxTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<CheckboxProps, InternalClasses, InternalExtraData>>;
-}
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
 
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-block relative cursor-pointer align-middle',
+      return classes
+    },
 
     box: ({ props }) => {
       const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
@@ -24,6 +20,14 @@ const theme: InternalTheme = {
       return classes
     },
 
+    content: ({ props }) => {
+      const classes = ['flex items-center']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
     icon: ({ props }) => {
       const classes = ['fill-current text-white dark:text-gray-900']
 

package/src/components/checkbox/theme/Checkbox.carbon.theme.ts

@@ -0,0 +1,108 @@
+import type { CheckboxTheme } from '../Checkbox.vue'
+
+const theme: CheckboxTheme = {
+  classes: {
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
+
+      return classes
+    },
+
+    box: ({ props }) => {
+      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
+      else if (props.size === 'xl') classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
+
+      return classes
+    },
+
+    content: ({ props }) => {
+      const classes = ['flex']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
+    icon: ({ props }) => {
+      const classes = ['fill-current text-white dark:text-gray-900']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
+      else if (props.size === 'xl') classes.push('h-3.5 w-3.5')
+      else classes.push('h-2.5 w-2.5')
+
+      return classes
+    },
+
+    label: ({ props }) => {
+      const classes = ['text-gray-800 dark:text-gray-200 pl-2 text-sm']
+
+      if (props.size === 'xs') classes.push('text-xs')
+      else if (props.size === 'sm') classes.push('text-sm')
+      else if (props.size === 'lg') classes.push('text-lg')
+      else if (props.size === 'xl') classes.push('text-xl')
+
+      return classes
+    },
+  },
+
+  styles({ props, colors, css, data }) {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    if (props.loading) {
+      return css.variables({
+        bg: 'transparent',
+        border: 'transparent',
+        dark: {
+          bg: 'transparent',
+          border: 'transparent',
+        },
+      })
+    }
+
+    if (props.disabled) {
+      vars.push(css.variables({
+        bg: gray[100],
+        border: gray[200],
+        dark: {
+          bg: gray[800],
+          border: gray[700],
+        },
+      }))
+    } else {
+      if (data.checked) {
+        vars.push(css.variables({
+          bg: color[500],
+          border: color[500],
+          dark: {
+            bg: color[500],
+            border: color[500],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: '#fff',
+          border: props.glow ? color[300] : gray[900],
+          dark: {
+            bg: gray[900],
+            border: props.glow ? color[300] : gray[300],
+          },
+        }))
+      }
+
+      if (props.glow) {
+        vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+      }
+    }
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/container/Container.vue

@@ -4,22 +4,27 @@ const containerProps = {
     type: String,
     default: 'div',
   },
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
 }
 
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>
 
+type InternalClasses = 'wrapper'
+export interface ContainerTheme extends ThemeComponent<ContainerProps, InternalClasses> {}
+
 export default { name: 'XContainer' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Container.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(containerProps)
 
-const { styles, classes, className } = useTheme('container', theme, props)
+const { styles, classes, className } = useTheme('Container', {}, props)
 </script>
 
 <template>

package/src/components/container/index.ts

@@ -1,3 +1,2 @@
 export { default as XContainer } from './Container.vue'
-export type { ContainerProps } from './Container.vue'
-export type { ContainerTheme } from './Container.theme'
+export type { ContainerProps, ContainerTheme } from './Container.vue'