@indielayer/ui 1.2.0 → 1.3.0

package/src/components/button/theme/Button.carbon.theme.ts

@@ -0,0 +1,237 @@
+import type { ButtonTheme } from '../Button.vue'
+
+const theme: ButtonTheme = {
+  classes: {
+    wrapper({ props, slots, data }) {
+      const classes = ['relative transition duration-150 focus:outline-none inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light']
+
+      // radius
+      if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : '')
+      else classes.push('!rounded-none')
+
+      // size
+      if (slots.default) {
+        classes.push('min-w-[8rem] px-4 py-3.5 items-start justify-between')
+        if (props.size === 'xs') classes.push('min-h-[2rem]')
+        else if (props.size === 'sm') classes.push('min-h-[2.5rem]')
+        else if (props.size === 'lg') classes.push('min-h-[4rem]')
+        else if (props.size === 'xl') classes.push('min-h-[5rem]')
+        else classes.push('min-h-[3rem]')
+      } else {
+        classes.push('items-center justify-center')
+        if (props.size === 'xs') classes.push('h-6 w-6')
+        else if (props.size === 'sm') classes.push('h-8 w-8')
+        else if (props.size === 'lg') classes.push('h-12 w-12')
+        else if (props.size === 'xl') classes.push('h-16 w-16')
+        else classes.push('h-10 w-10')
+      }
+
+      // cursor
+      if (props.disabled) classes.push('cursor-not-allowed')
+      else if (props.loading) classes.push('cursor-default')
+      else classes.push('cursor-pointer')
+
+      return classes
+    },
+
+    iconLeft: ({ slots }) => slots.default ? 'mr-2' : 'm-0.5',
+
+    iconRight: ({ slots }) => slots.default ? 'ml-2' : 'm-0.5',
+  },
+
+  styles({ props, colors, css, data }) {
+    const gray = colors.getPalette('gray')
+    const color = props.color ? colors.getPalette(props.color) : gray
+    const vars = []
+
+    const isLight = props.color && props.light
+    const isDefault = !props.color && !props.ghost
+
+    if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(props.color ? color[500] : gray[500], 0.5)))
+
+    if (isDefault) {
+      if (props.disabled) {
+        vars.push(css.variables({
+          bg: gray[50],
+          text: gray[300],
+          border: gray[200],
+          dark: {
+            bg: gray[900],
+            text: gray[600],
+            border: gray[700],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: 'white',
+          text: gray[800],
+          border: gray[300],
+          hover: { bg: !props.loading ? gray[100] : '' },
+          active: { bg: !props.loading ? gray[200] : '' },
+          dark: {
+            bg: gray[800],
+            text: 'white',
+            border: gray[700],
+            hover: { bg: !props.loading ? gray[700] : '', border: gray[600] },
+            active: { bg: !props.loading ? gray[600] : '', border: gray[500] },
+          },
+        }))
+      }
+    } else if (isLight) {
+      // light
+      if (!props.outlined || props.disabled) vars.push(css.get('border', 'transparent'))
+
+      if (props.disabled) {
+        vars.push(css.variables({
+          bg: color[50],
+          text: color[200],
+          border: 'transparent',
+          dark: {
+            bg: gray[800],
+            text: color[900],
+            border: 'transparent',
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: color[50],
+          text: color[600],
+          border: props.outlined ? color[500] : 'transparent',
+          hover: { bg: !props.loading ? color[100] : '' },
+          active: { bg: !props.loading ? color[200] : '' },
+          dark: {
+            bg: color[900],
+            text: color[200],
+            border: props.outlined ? color[500] : 'transparent',
+            hover: { bg: !props.loading ? color[800] : '' },
+            active: { bg: !props.loading ? color[700] : '' },
+          },
+        }))
+      }
+    } else if (props.ghost) {
+      // ghost
+      if (!props.outlined) vars.push(css.get('border', 'transparent'))
+
+      if (props.color) {
+        if (props.disabled) {
+          vars.push(css.variables({
+            text: color[200],
+            dark: {
+              text: color[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            text: color[600],
+            dark: {
+              text: color[500],
+            },
+          }))
+          if (!props.loading) {
+            vars.push(css.variables({
+              hover: { bg: color[50] },
+              active: { bg: color[100] },
+              dark: {
+                hover: { bg: gray[800] },
+                active: { bg: gray[700] },
+              },
+            }))
+          }
+        }
+      } else {
+        if (props.disabled) {
+          vars.push(css.variables({
+            text: gray[200],
+            dark: {
+              text: gray[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            text: gray[800],
+            dark: {
+              text: 'white',
+            },
+          }))
+          if (!props.loading) {
+            vars.push(css.variables({
+              hover: { bg: gray[100] },
+              active: { bg: gray[200] },
+              dark: {
+                hover: { bg: gray[800] },
+                active: { bg: gray[700] },
+              },
+            }))
+          }
+        }
+      }
+    } else {
+      // outlined
+      if (props.outlined) {
+        if (props.disabled) {
+          vars.push(css.variables({
+            text: color[200],
+            border: color[200],
+            dark: {
+              text: color[700],
+              border: color[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            text: color[600],
+            border: color[600],
+            dark: {
+              text: color[500],
+              border: color[500],
+            },
+          }))
+          if (!props.loading) {
+            vars.push(css.variables({
+              hover: { bg: color[100] },
+              active: { bg: color[200] },
+              dark: {
+                hover: { bg: gray[800] },
+                active: { bg: gray[700] },
+              },
+            }))
+          }
+        }
+      } else {
+        // filled
+        vars.push(css.variables({
+          text: '#fff',
+          border: !data.isButtonGroup ? 'transparent' : color[600],
+          dark: {
+            text: '#fff',
+            border: !data.isButtonGroup ? 'transparent' : color[500],
+          },
+        }))
+        if (props.disabled) {
+          vars.push(css.variables({
+            bg: color[200],
+            dark: {
+              text: color[700],
+              bg: color[900],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: color[500],
+            hover: { bg: !props.loading ? color[600] : '' },
+            active: { bg: !props.loading ? color[800] : '' },
+            dark: {
+              bg: color[600],
+              hover: { bg: !props.loading ? color[700] : '' },
+              active: { bg: !props.loading ? color[800] : '' },
+            },
+          }))
+        }
+      }
+    }
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/button/theme/ButtonGroup.base.theme.ts

@@ -0,0 +1,9 @@
+import type { ButtonGroupTheme } from '../ButtonGroup.vue'
+
+const theme: ButtonGroupTheme = {
+  classes: {
+    wrapper: 'inline-flex align-middle relative -space-x-[1px]',
+  },
+}
+
+export default theme

package/src/components/button/theme/ButtonGroup.carbon.theme.ts

@@ -0,0 +1,9 @@
+import type { ButtonGroupTheme } from '../ButtonGroup.vue'
+
+const theme: ButtonGroupTheme = {
+  classes: {
+    wrapper: 'inline-flex align-middle relative gap-[1px]',
+  },
+}
+
+export default theme

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,45 @@
+<script lang="ts">
+const carouselSlideProps = {}
+
+export type CarouselSlideProps = ExtractPublicPropTypes<typeof carouselSlideProps>
+
+type InternalClasses = 'wrapper'
+export interface CarouselSlideTheme extends ThemeComponent<CarouselSlideProps, InternalClasses> {}
+
+export default {
+  name: 'XCarouselSlide',
+  validators: {},
+}
+</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>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      $style['carousel-slide'],
+      classes.wrapper,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</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

@@ -11,6 +11,10 @@ const checkboxProps = {
 
 export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>
 
+type InternalClasses = 'wrapper' | 'box' | 'icon' | 'label'
+type InternalExtraData = { checked: Ref<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 } 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)
 
@@ -61,7 +63,7 @@ const {
   setError,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('checkbox', theme, props, { checked })
+const { styles, classes, className } = useTheme('Checkbox', {}, props, { checked })
 
 defineExpose({ focus, blur, toggle, reset, validate, setError })
 </script>
@@ -114,7 +116,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooter" :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,16 +1,6 @@
-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>; }
-
-interface InternalTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {}
-export interface CheckboxTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<CheckboxProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
+const theme: CheckboxTheme = {
   classes: {
     wrapper: 'inline-block relative cursor-pointer align-middle',