@indielayer/ui 1.0.0-alpha.9 → 1.0.0

package/src/components/popover/Popover.vue

@@ -1,126 +1,176 @@
 <script lang="ts">
-import { computed, defineComponent, ref, useCssModule, watch, type PropType } from 'vue'
-import { onClickOutside } from '@vueuse/core'
-
 const validators = {
   align: ['bottom','center','left','right','top'],
   position: ['bottom','left','right','top'],
 }
 
-export default defineComponent({
+export default {
   name: 'XPopover',
-
   validators,
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, useCssModule, watch, type PropType } from 'vue'
+import { onClickOutside, useEventListener } from '@vueuse/core'
+import { useTheme } from '../../composables/theme'
+
+import theme from './Popover.theme'
 
-  props: {
-    align: {
-      type: String as PropType<'bottom' | 'center' | 'left' | 'right' | 'top'>,
-      default: 'center',
-      validator: (value: string) => validators.align.includes(value),
-    },
-    position: {
-      type: String as PropType<'bottom' | 'left' | 'right' | 'top'>,
-      default: 'bottom',
-      validator: (value: string) => validators.position.includes(value),
-    },
-    dismissOnClick: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: Boolean,
-    hover: Boolean,
-    block: Boolean,
+const props = defineProps({
+  align: {
+    type: String as PropType<'bottom' | 'center' | 'left' | 'right' | 'top'>,
+    default: 'center',
+    validator: (value: string) => validators.align.includes(value),
   },
+  position: {
+    type: String as PropType<'bottom' | 'left' | 'right' | 'top'>,
+    default: 'bottom',
+    validator: (value: string) => validators.position.includes(value),
+  },
+  dismissOnClick: {
+    type: Boolean,
+    default: true,
+  },
+  autoAlign: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: Boolean,
+  hover: Boolean,
+  block: Boolean,
+})
 
-  emits: ['open', 'close', 'toggle'],
+const emit = defineEmits(['open', 'close', 'toggle'])
 
-  expose: ['open', 'close', 'toggle', 'isOpen'],
+const elRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
 
-  setup(props, { emit }) {
-    const elRef = ref<HTMLElement>()
-    const isOpen = ref(false)
+let stopClickOutside: undefined | (()=> void) = undefined
 
-    let stopClickOutside: undefined | (()=> void) = undefined
+watch(isOpen, (newValue) => {
+  if (props.hover) return
 
-    watch(isOpen, (newValue, oldValue) => {
-      if (props.hover) return
+  if (newValue) {
+    checkVisibility()
+  } else {
+    resetOutbounds()
+  }
 
-      if (stopClickOutside) {
-        stopClickOutside()
-        stopClickOutside = undefined
-      }
+  if (stopClickOutside) {
+    stopClickOutside()
+    stopClickOutside = undefined
+  }
 
-      if (newValue) {
-        setTimeout(() => {
-          stopClickOutside = onClickOutside(elRef, close)
-        })
-      }
+  if (newValue) {
+    setTimeout(() => {
+      stopClickOutside = onClickOutside(elRef, close)
     })
+  }
+})
 
-    const $style = useCssModule()
-    const classes = computed(() => {
-      const c = []
-
-      c.push({
-        // align-left
-        'left-0 right-auto': props.align === 'left' && ['bottom', 'top'].includes(props.position),
-        // align-center
-        'left-1/2 right-auto -translate-x-1/2': props.align === 'center' && ['bottom', 'top'].includes(props.position),
-        // align-right
-        'right-0 left-auto': props.align === 'right' && ['bottom', 'top'].includes(props.position),
-        // align-top
-        'top-0 bottom-auto': props.align === 'top' && ['left', 'right'].includes(props.position),
-        // align-middle
-        '-translate-y-1/2 top-1/2 bottom-auto': props.align === 'center' && ['left', 'right'].includes(props.position),
-        // align-bottom
-        'bottom-0': props.align === 'bottom' && ['left', 'right'].includes(props.position),
-      })
-
-      if (props.position === 'top') c.push(`bottom-full pb-2 ${$style.popoverTop}`)
-      if (props.position === 'right') c.push(`left-full pl-2 ${$style.popoverRight}`)
-      if (props.position === 'bottom') c.push(`top-full bottom-0 ${$style.popoverBottom}`)
-      if (props.position === 'left') c.push(`right-full left-auto pr-2 ${$style.popoverLeft}`)
-
-      if (props.block) c.push('min-w-full')
-
-      return c
-    })
+const $style = useCssModule()
+const isOutLeft = ref(false)
+const isOutRight = ref(false)
+const isOutTop = ref(false)
+const isOutBottom = ref(false)
+const contentClasses = computed(() => {
+  const c = []
 
-    function close() {
-      if (props.disabled) return
-      isOpen.value = false
-      emit('close')
-    }
-
-    function open() {
-      if (props.disabled) return
-      isOpen.value = true
-      emit('open')
-    }
-
-    function toggle() {
-      if (props.disabled) return
-      isOpen.value = !isOpen.value
-      emit('toggle', isOpen.value)
-    }
-
-    return {
-      elRef,
-      isOpen,
-      classes,
-      close,
-      open,
-      toggle,
-    }
-  },
+  let align = props.align
+  let position = props.position
+
+  if (isOutTop.value) {
+    if (position === 'top') position = 'bottom'
+    else if ((position === 'left' || position === 'right')) align = 'top'
+  }
+
+  if (isOutBottom.value) {
+    if (position === 'bottom') position = 'top'
+    else if ((position === 'left' || position === 'right')) align = 'bottom'
+  }
+
+  if (isOutLeft.value) {
+    if (position === 'left') position = 'right'
+    else if ((position === 'top' || position === 'bottom')) align = 'left'
+  }
+
+  if (isOutRight.value) {
+    if (position === 'right') position = 'left'
+    else if ((position === 'top' || position === 'bottom')) align = 'right'
+  }
+
+  if (position === 'top') c.push(`bottom-full ${$style.popoverTop}`)
+  if (position === 'bottom') c.push(`top-full bottom-0 ${$style.popoverBottom}`)
+  if (position === 'right') c.push(`left-full ${$style.popoverRight}`)
+  if (position === 'left') c.push(`right-full left-auto ${$style.popoverLeft}`)
+
+  if (align === 'left' && ['bottom', 'top'].includes(position)) c.push('left-0 right-auto')
+  if (align === 'center' && ['bottom', 'top'].includes(position)) c.push('left-1/2 right-auto -translate-x-1/2')
+  if (align === 'right' && ['bottom', 'top'].includes(position)) c.push('right-0 left-auto')
+  if (align === 'top' && ['left', 'right'].includes(position)) c.push('top-0 bottom-auto')
+  if (align === 'center' && ['left', 'right'].includes(position)) c.push('-translate-y-1/2 top-1/2 bottom-auto')
+  if (align === 'bottom' && ['left', 'right'].includes(position)) c.push('bottom-0')
+
+  if (props.block) c.push('min-w-full')
+
+  return c
 })
+
+if (props.hover) {
+  useEventListener(elRef, 'mouseenter', checkVisibility)
+  useEventListener(elRef, 'mouseleave', resetOutbounds)
+}
+
+function resetOutbounds() {
+  isOutLeft.value = false
+  isOutRight.value = false
+  isOutTop.value = false
+  isOutBottom.value = false
+}
+
+function checkVisibility() {
+  if (!contentRef.value) return
+  const clientRect = contentRef.value.getBoundingClientRect()
+
+  isOutLeft.value = clientRect.left < 0
+  isOutRight.value = clientRect.right > (window.innerWidth || document.documentElement.clientWidth)
+  isOutTop.value = clientRect.top < 0
+  isOutBottom.value = clientRect.bottom > (window.innerHeight || document.documentElement.clientHeight)
+}
+
+function close() {
+  if (props.disabled) return
+  isOpen.value = false
+  emit('close')
+}
+
+function open() {
+  if (props.disabled) return
+  isOpen.value = true
+  emit('open')
+}
+
+function toggle() {
+  if (props.disabled) return
+  isOpen.value = !isOpen.value
+  emit('toggle', isOpen.value)
+}
+
+const { styles, classes, className } = useTheme('popover', theme, props)
+
+defineExpose({ open, close, toggle, isOpen })
 </script>
 
 <template>
   <div
     ref="elRef"
     class="inline-block relative"
+    :style="styles"
     :class="[
+      className,
+      classes.wrapper,
       $style.popover,
       [hover ? $style.hover : ''],
       [isOpen ? $style['is-open'] : ''],
@@ -132,10 +182,12 @@ export default defineComponent({
     </div>
 
     <div
-      class="absolute w-fit bottom-0 left-0 right-0 sm:p-0 transform transition-transform z-40 max-w-xs"
+      ref="contentRef"
+      class="absolute transform transition-transform z-40 h-fit"
       :class="[
         $style.popoverContent,
-        classes
+        contentClasses,
+        classes.content
       ]"
       @click="dismissOnClick ? close() : null"
     >
@@ -158,7 +210,7 @@ export default defineComponent({
     --tw-translate-x: -0.5rem;
   }
   .popoverBottom {
-    --tw-translate-y: -0.25rem;
+    --tw-translate-y: -0.5rem;
   }
   .popoverLeft {
     --tw-translate-x: 0.5rem;
@@ -173,12 +225,12 @@ export default defineComponent({
 
   &.hover:hover .popoverTop,
   &.is-open .popoverTop {
-    --tw-translate-y: 0.25rem;
+    --tw-translate-y: -0.25rem;
   }
 
   &.hover:hover .popoverRight,
   &.is-open .popoverRight {
-    --tw-translate-x: 0px;
+    --tw-translate-x: 0.25rem;
   }
 
   &.hover:hover .popoverBottom,
@@ -188,7 +240,7 @@ export default defineComponent({
 
   &.hover:hover .popoverLeft,
   &.is-open .popoverLeft {
-    --tw-translate-x: 0px;
+    --tw-translate-x: -0.25rem;
   }
 }
 </style>

package/src/components/popover/PopoverContainer.theme.ts

@@ -0,0 +1,7 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800',
+  },
+}

package/src/components/popover/PopoverContainer.vue

@@ -1,22 +1,30 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+export default { name: 'XPopoverContainer' }
+</script>
+
+<script setup lang="ts">
+import { useTheme } from '../../composables/theme'
 
-export default defineComponent({
-  name: 'XPopoverContainer',
+import theme from './PopoverContainer.theme'
 
-  props: {
-    tag: {
-      default: 'div',
-      type: String,
-    },
+const props = defineProps({
+  tag: {
+    default: 'div',
+    type: String,
   },
 })
+
+const { styles, classes, className } = useTheme('popover-container', theme, props)
 </script>
 
 <template>
   <component
     :is="tag"
-    class="block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
   >
     <slot></slot>
   </component>

package/src/components/popover/__tests__/Popover.spec.ts

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

package/src/components/popover/__tests__/PopoverContainer.spec.ts

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

package/src/components/progress/Progress.theme.ts

@@ -0,0 +1,26 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props }: ThemeParams) => `relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none ${props.thick ? 'h-1.5' : 'h-1'}`,
+
+    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
+
+    item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900',
+  },
+
+  styles: ({ props, colors, css }: ThemeParams) => {
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    vars.push(css.variables({
+      bg: color[500],
+    }))
+
+    if (props.gradient) vars.push({
+      '--tw-gradient-stops': `${color[100]}, ${color[800]}`,
+    })
+
+    return vars
+  },
+}

package/src/components/progress/Progress.vue

@@ -1,67 +1,43 @@
 <script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue'
-import { useCSS } from '../../composables/css'
-import { useColors } from '../../composables/colors'
-
-// const validators = {
-//   variant: ['bar','score'],
-// }
+export default { name: 'XProgress' }
+</script>
 
-export default defineComponent({
-  name: 'XProgress',
+<script setup lang="ts">
+import { useColors } from '../../composables/colors'
+import { useTheme } from '../../composables/theme'
 
-  // validators,
+import theme from './Progress.theme'
 
-  props: {
-    ...useColors.props('primary'),
-    percentage: {
-      type: Number,
-      default: 0,
-      validator: (value: number) => value >= 0 && value <= 100,
-    },
-    // variant: {
-    //   type: String as PropType<'bar' | 'score'>,
-    //   default: 'bar',
-    //   validator: (value: string) => validators.variant.includes(value),
-    // },
-    gradient: Boolean,
-    animate: {
-      type: Boolean,
-      default: true,
-    },
-    thick: Boolean,
+const props = defineProps({
+  ...useColors.props('primary'),
+  percentage: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => value >= 0 && value <= 100,
   },
-
-  setup(props) {
-    const css = useCSS('progress')
-    const colors = useColors()
-    const style = computed(() => {
-      const color = colors.getPalette(props.color)
-      const vars = []
-
-      vars.push(css.variables({
-        bg: color[500],
-      }))
-
-      if (props.gradient) vars.push({
-        '--tw-gradient-stops': `${color[100]}, ${color[800]}`,
-      })
-
-      return vars
-    })
-
-    return {
-      style,
-    }
+  // variant: {
+  //   type: String as PropType<'bar' | 'score'>,
+  //   default: 'bar',
+  //   validator: (value: string) => validators.variant.includes(value),
+  // },
+  gradient: Boolean,
+  animate: {
+    type: Boolean,
+    default: true,
   },
+  thick: Boolean,
 })
+
+const { styles, classes, className } = useTheme('progress', theme, props)
 </script>
 
 <template>
   <div
-    class="relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none"
-    :class="[thick ? 'h-1.5' : 'h-1']"
-    :style="style"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
   >
     <div
       class="h-full"

package/src/components/progress/__tests__/Progress.spec.ts

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

package/src/components/radio/Radio.theme.ts

@@ -0,0 +1,121 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
+
+    circle: ({ props }: ThemeParams) => {
+      let c = 'rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline'
+
+      if (props.size === 'xs' || props.size === 'sm') c += ' h-4 w-4'
+      if (props.size === 'xl') c += ' h-6 w-6'
+      else c += ' h-5 w-5'
+
+      return c
+    },
+
+    circleIcon: ({ props, data }: ThemeParams) => {
+      const c = []
+
+      if (!data.selected) c.push('opacity-0')
+
+      if (props.size === 'sm' || props.size === 'xs') c.push('h-2')
+      else if (props.size === 'lg') c.push('h-2.5')
+      else if (props.size === 'xl') c.push('h-3')
+      else c.push('h-[0.6rem]')
+
+      return c
+    },
+
+    label: ({ props, data }: ThemeParams) => {
+      let c = 'font-medium text-gray-800 dark:text-gray-200 pl-2'
+
+      if (props.size === 'xs') c += ' text-xs'
+      else if (props.size === 'sm') c += ' text-sm'
+      else if (props.size === 'lg') c += ' text-lg'
+      else if (props.size === 'xl') c += ' text-xl'
+
+      return c
+    },
+
+    content: ({ props }: ThemeParams) => {
+      let c = 'pl-2'
+
+      if (props.size === 'xs') c += ' text-xs'
+      else if (props.size === 'sm') c += ' text-sm'
+      else if (props.size === 'lg') c += ' text-lg'
+      else if (props.size === 'xl') c += ' text-xl'
+
+      return c
+    },
+  },
+
+  styles: ({ props, colors, css, data }: ThemeParams) => {
+    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) {
+      if (data.selected) {
+        vars.push(css.variables({
+          bg: 'transparent',
+          border: gray[200],
+          circle: gray[200],
+          dark: {
+            bg: 'transparent',
+            border: gray[700],
+            circle: gray[700],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: gray[200],
+          border: gray[200],
+          dark: {
+            bg: gray[700],
+            border: gray[700],
+          },
+        }))
+      }
+    } else {
+      if (data.selected) {
+        vars.push(css.variables({
+          bg: 'transparent',
+          border: color[500],
+          circle: color[500],
+          dark: {
+            bg: 'transparent',
+            border: color[500],
+            circle: color[500],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: '#fff',
+          border: props.glow ? color[300] : gray[300],
+          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
+  },
+}