@indielayer/ui 0.0.0-dev-20240125104319

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+const cardProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  flat: Boolean,
+}
+
+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, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(cardProps)
+
+const { styles, classes, className } = useTheme('Card', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :styles="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>

package/src/components/card/__tests__/Card.spec.ts

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

package/src/components/card/index.ts

@@ -0,0 +1,2 @@
+export { default as XCard } from './Card.vue'
+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