@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/components/container/Container.vue

@@ -1,22 +1,30 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+export default { name: 'XContainer' }
+</script>
+
+<script setup lang="ts">
+import { useTheme } from '../../composables/theme'
 
-export default defineComponent({
-  name: 'XContainer',
+import theme from './Container.theme'
 
-  props: {
-    tag: {
-      type: String,
-      default: 'div',
-    },
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
   },
 })
+
+const { styles, classes, className } = useTheme('container', theme, props)
 </script>
 
 <template>
   <component
     :is="tag"
-    class="max-w-screen-2xl mx-auto px-4"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
   >
     <slot></slot>
   </component>

package/src/components/container/__tests__/Container.spec.ts

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

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

@@ -0,0 +1,11 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props }: ThemeParams) => `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',
+  },
+}

package/src/components/divider/Divider.vue

@@ -1,28 +1,30 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+export default { name: 'XDivider' }
+</script>
+
+<script setup lang="ts">
+import { useTheme } from '../../composables/theme'
 
-export default defineComponent({
-  name: 'XDivider',
+import theme from './Divider.theme'
 
-  props: {
-    label: String,
-    vertical: Boolean,
-  },
+const props = defineProps({
+  label: String,
+  vertical: Boolean,
 })
+
+const { styles, classes, className } = useTheme('divider', theme, props)
 </script>
 
 <template>
   <div
+    :style="styles"
     :class="[
-      {
-        'h-full flex-col': vertical,
-        'w-full': !vertical
-      },
+      className,
+      classes.wrapper
     ]"
-    class="flex justify-center items-center"
   >
     <div
-      class="bg-gray-200 dark:bg-slate-700 flex-grow"
+      :class="classes.line"
       :style="[
         {
           width: vertical ? '1px' : 'auto',
@@ -33,14 +35,16 @@ export default defineComponent({
     <div
       v-if="label"
       class="font-medium text-sm text-gray-600 dark:text-gray-300"
-      :class="[{
-        'my-2': vertical,
-        'mx-4': !vertical
-      }]"
+      :class="[
+        classes.label,
+        {
+          'my-2': vertical,
+          'mx-4': !vertical
+        }]"
       v-text="label"
     ></div>
     <div
-      class="bg-gray-200 dark:bg-slate-700 flex-grow"
+      :class="classes.line"
       :style="[
         {
           width: vertical ? '1px' : 'auto',

package/src/components/divider/__tests__/Divider.spec.ts

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

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

@@ -0,0 +1,9 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
+
+    backdrop: 'absolute z-40 inset-0 duration-150 ease-in-out',
+  },
+}

package/src/components/drawer/Drawer.vue

@@ -1,206 +1,188 @@
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch, watchEffect, type PropType } from 'vue'
+export default {
+  name: 'XDrawer',
+  inheritAttrs: false,
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, watchEffect, type PropType } from 'vue'
 import { breakpointsTailwind, SwipeDirection, useBreakpoints, useEventListener, useSwipe, type Breakpoints } from '@vueuse/core'
+import { useTheme } from '../../composables/theme'
 
 import XScroll from '../../components/scroll/Scroll.vue'
 
-export default defineComponent({
-  name: 'XDrawer',
+import theme from './Drawer.theme'
 
-  components: {
-    XScroll,
+const props = defineProps({
+  modelValue: Boolean,
+  position: {
+    type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
+    default: 'left',
   },
-
-  inheritAttrs: false,
-
-  props: {
-    modelValue: Boolean,
-    position: {
-      type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
-      default: 'left',
-    },
-    to: {
-      type: [String, Object] as PropType<string | HTMLElement>,
-      default: 'body',
-    },
-    width: {
-      type: [String, Number],
-      default: 320,
-    },
-    height: {
-      type: [String, Number],
-      default: 320,
-    },
-    breakpoint: [String, Number],
-    backdrop: {
-      type: Boolean,
-      default: true,
-    },
+  teleportTo: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: 'body',
   },
+  width: {
+    type: [String, Number],
+    default: 320,
+  },
+  height: {
+    type: [String, Number],
+    default: 320,
+  },
+  breakpoint: [String, Number],
+  backdrop: {
+    type: Boolean,
+    default: true,
+  },
+})
 
-  emits: ['update:modelValue'],
-
-  expose: ['open', 'close'],
-
-  setup(props, { emit }) {
-    const detached = ref<boolean>(true)
-    const visible = ref<boolean>(true)
-    const value = ref<boolean>(props.modelValue)
-    const backdropRef = ref<HTMLElement | null>(null)
-    const drawerRef = ref<HTMLElement | null>(null)
-
-    const isTailwindBreakpoint = typeof props.breakpoint === 'string'
-    const breakpoints = useBreakpoints(isTailwindBreakpoint ? breakpointsTailwind : { md: props.breakpoint || 768 } as Breakpoints)
-    const point = breakpoints.smaller(isTailwindBreakpoint ? props.breakpoint : 'md')
+const emit = defineEmits(['update:modelValue'])
 
-    watchEffect(() => {
-      if (props.breakpoint) {
-        close()
-        detached.value = point.value
-      }
-    })
+const detached = ref<boolean>(true)
+const value = ref<boolean>(props.modelValue)
+const backdropRef = ref<HTMLElement | null>(null)
+const drawerRef = ref<HTMLElement | null>(null)
 
-    useEventListener(backdropRef, 'pointerdown', close)
+const isTailwindBreakpoint = typeof props.breakpoint === 'string'
+const breakpoints = useBreakpoints(isTailwindBreakpoint ? breakpointsTailwind : { md: props.breakpoint || 768 } as Breakpoints)
+const point = breakpoints.smaller(isTailwindBreakpoint ? props.breakpoint : 'md')
 
-    watch(() => props.modelValue, (val) => {
-      value.value = val
-    })
+watchEffect(() => {
+  if (props.breakpoint) {
+    close()
+    detached.value = point.value
+  }
+})
 
-    useEventListener(document, 'keydown', onKeyDown)
+useEventListener(backdropRef, 'pointerdown', close)
 
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.key === 'Escape' && value.value) close()
-    }
+watch(() => props.modelValue, (val) => {
+  value.value = val
+})
 
-    const { lengthX, lengthY } = useSwipe(drawerRef, {
-      // passive: false,
-      // onSwipe(e: TouchEvent) {
-      //   if (lengthX.value < 0) {
-      //     const length = Math.abs(lengthX.value)
-      //     left.value = `${length}px`
-      //   } else {
-      //     left.value = '0'
-      //   }
-      // },
-      // onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
-      //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
-      //     left.value = '100%'
-      //   } else {
-      //     left.value = '0'
-      //   }
-      // },
-      onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
-        if (detached.value) {
-          if (
-            (props.position === 'left' && direction === 'LEFT') ||
+useEventListener(document, 'keydown', onKeyDown)
+
+function onKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && value.value) close()
+}
+
+const { lengthX, lengthY } = useSwipe(drawerRef, {
+  // passive: false,
+  // onSwipe(e: TouchEvent) {
+  //   if (lengthX.value < 0) {
+  //     const length = Math.abs(lengthX.value)
+  //     left.value = `${length}px`
+  //   } else {
+  //     left.value = '0'
+  //   }
+  // },
+  // onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
+  //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
+  //     left.value = '100%'
+  //   } else {
+  //     left.value = '0'
+  //   }
+  // },
+  onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
+    if (detached.value) {
+      if (
+        (props.position === 'left' && direction === 'LEFT') ||
             (props.position === 'right' && direction === 'RIGHT') ||
             (props.position === 'top' && direction === 'UP') ||
             (props.position === 'bottom' && direction === 'DOWN')
-          ) close()
-        }
-      },
-    })
-
-    function close(e?: PointerEvent) {
-      if (e && e.target !== backdropRef.value) return
-      value.value = false
-      emit('update:modelValue', false)
+      ) close()
     }
+  },
+})
 
-    function open() {
-      value.value = true
-      emit('update:modelValue', true)
-    }
+function close(e?: PointerEvent) {
+  if (e && e.target !== backdropRef.value) return
+  value.value = false
+  emit('update:modelValue', false)
+}
 
-    const styles = computed(() => {
-      const styles: Record<string, string> = {}
+function open() {
+  value.value = true
+  emit('update:modelValue', true)
+}
 
-      if (props.position === 'left' || props.position === 'right') styles['width'] = props.width + 'px'
-      else if (props.position === 'top' || props.position === 'bottom') styles['height'] = props.height + 'px'
+const autoStyles = computed(() => {
+  const s: Record<string, string> = {}
 
-      return styles
-    })
+  if (props.position === 'left' || props.position === 'right') s['width'] = props.width + 'px'
+  else if (props.position === 'top' || props.position === 'bottom') s['height'] = props.height + 'px'
 
-    const classes = computed(() => {
-      const classes = []
+  return s
+})
 
-      if (detached.value) {
-        classes.push('absolute shadow-lg')
+const autoClasses = computed(() => {
+  const c = []
 
-        if (props.position === 'top') classes.push('top-0 inset-x-0')
-        else if (props.position === 'bottom') classes.push('bottom-0 inset-x-0')
-        else if (props.position === 'left') classes.push('left-0 inset-y-0')
-        else if (props.position === 'right') classes.push('right-0 inset-y-0')
-      }
+  if (detached.value) {
+    c.push('absolute shadow-lg')
 
-      return classes
-    })
+    if (props.position === 'top') c.push('top-0 inset-x-0')
+    else if (props.position === 'bottom') c.push('bottom-0 inset-x-0')
+    else if (props.position === 'left') c.push('left-0 inset-y-0')
+    else if (props.position === 'right') c.push('right-0 inset-y-0')
+  }
 
-    function onBeforeEnter(el: HTMLElement) {
-      if (props.position === 'top') el.style.top = `-${props.height}px`
-      else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
-      else if (props.position === 'left') el.style.left = `-${props.width}px`
-      else if (props.position === 'right') el.style.right = `-${props.width}px`
-    }
+  return c
+})
 
-    function onEnter(el: HTMLElement, done: ()=> void) {
-      if (!detached.value) {
-        done()
-
-        return
-      }
-      el.addEventListener('transitionend', done)
-      setTimeout(() => {
-        if (props.backdrop) el.classList.add('bg-gray-500/30')
-        if (props.position === 'top') el.style.top = '0'
-        else if (props.position === 'bottom') el.style.bottom = '0'
-        else if (props.position === 'left') el.style.left = '0'
-        else if (props.position === 'right') el.style.right = '0'
-      }, 1)
-    }
+function onBeforeEnter(el: HTMLElement) {
+  if (props.position === 'top') el.style.top = `-${props.height}px`
+  else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
+  else if (props.position === 'left') el.style.left = `-${props.width}px`
+  else if (props.position === 'right') el.style.right = `-${props.width}px`
+}
+
+function onEnter(el: HTMLElement, done: ()=> void) {
+  if (!detached.value) {
+    done()
+
+    return
+  }
+  el.addEventListener('transitionend', done)
+  setTimeout(() => {
+    if (props.backdrop) el.classList.add('bg-gray-500/30')
+    if (props.position === 'top') el.style.top = '0'
+    else if (props.position === 'bottom') el.style.bottom = '0'
+    else if (props.position === 'left') el.style.left = '0'
+    else if (props.position === 'right') el.style.right = '0'
+  }, 1)
+}
+
+function onBeforeLeave(el: HTMLElement) {}
+
+function onLeave(el: HTMLElement, done: ()=> void) {
+  el.addEventListener('transitionend', done)
+  setTimeout(() => {
+    if (props.backdrop) el.classList.remove('bg-gray-500/30')
+    if (props.position === 'top') el.style.top = `-${props.height}px`
+    else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
+    else if (props.position === 'left') el.style.left = `-${props.width}px`
+    else if (props.position === 'right') el.style.right = `-${props.width}px`
+  }, 1)
+}
+
+const deferShow = ref<boolean>(!!(props.teleportTo && (props.teleportTo instanceof HTMLElement || document.querySelector(props.teleportTo))))
+
+onMounted(() => {
+  deferShow.value = true
+})
 
-    function onBeforeLeave(el: HTMLElement) {}
-
-    function onLeave(el: HTMLElement, done: ()=> void) {
-      el.addEventListener('transitionend', done)
-      setTimeout(() => {
-        if (props.backdrop) el.classList.remove('bg-gray-500/30')
-        if (props.position === 'top') el.style.top = `-${props.height}px`
-        else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
-        else if (props.position === 'left') el.style.left = `-${props.width}px`
-        else if (props.position === 'right') el.style.right = `-${props.width}px`
-      }, 1)
-    }
+const { styles, classes, className } = useTheme('drawer', theme, props)
 
-    const deferShow = ref<boolean>(!!(props.to && (props.to instanceof HTMLElement || document.querySelector(props.to))))
-
-    onMounted(() => {
-      deferShow.value = true
-    })
-
-    return {
-      deferShow,
-      backdropRef,
-      drawerRef,
-      visible,
-      classes,
-      styles,
-      detached,
-      value,
-      open,
-      close,
-      onBeforeEnter,
-      onEnter,
-      onBeforeLeave,
-      onLeave,
-    }
-  },
-})
+defineExpose({ open, close })
 </script>
 
 <template>
-  <Teleport v-if="deferShow" :to="to" :disabled="!detached">
-    <Transition
+  <teleport v-if="deferShow" :to="teleportTo" :disabled="!detached">
+    <transition
       :css="false"
       @before-enter="onBeforeEnter"
       @enter="onEnter"
@@ -212,9 +194,7 @@ export default defineComponent({
         ref="backdropRef"
         :class="[
           $attrs.class,
-          {
-            'absolute z-40 inset-0 duration-150 ease-in-out': detached,
-          },
+          detached ? classes.backdrop : ''
         ]"
       >
         <div
@@ -224,9 +204,12 @@ export default defineComponent({
         ></div>
         <div
           ref="drawerRef"
-          class="flex flex-col max-h-full bg-white dark:bg-gray-800"
-          :class="classes"
-          :style="styles"
+          :class="[
+            className,
+            autoClasses,
+            classes.wrapper
+          ]"
+          :style="[autoStyles, styles]"
         >
           <slot name="header"></slot>
           <x-scroll
@@ -239,6 +222,6 @@ export default defineComponent({
           <slot name="footer"></slot>
         </div>
       </div>
-    </Transition>
-  </Teleport>
+    </transition>
+  </teleport>
 </template>

package/src/components/drawer/__tests__/Drawer.spec.ts

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

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

@@ -0,0 +1,7 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: '',
+  },
+}