@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/components/slider/Slider.vue

@@ -1,209 +1,175 @@
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
-import { useCSS } from '../../composables/css'
+export default { name: 'XSlider' }
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
 import { useInteractive } from '../../composables/interactive'
 import { useInputtable } from '../../composables/inputtable'
-
-import { useEventListener } from '@vueuse/core'
+import { useTheme } from '../../composables/theme'
 
 import XProgress from '../../components/progress/Progress.vue'
 
-export default defineComponent({
-  name: 'XSlider',
-
-  components: {
-    XProgress,
+import theme from './Slider.theme'
+
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  label: String,
+  min: Number,
+  max: Number,
+  step: {
+    type: Number,
+    default: 1,
   },
+  gradient: Boolean,
+})
 
-  validators: {
-    ...useCommon.validators(),
-  },
+const emit = defineEmits(useInputtable.emits(false))
 
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('primary'),
-    ...useInteractive.props(),
-    ...useInputtable.props(),
-    label: String,
-    min: Number,
-    max: Number,
-    step: {
-      type: Number,
-      default: 1,
-    },
-    gradient: Boolean,
-  },
+const elRef = ref<HTMLElement | null>(null)
+const dragRef = ref<HTMLElement | null>(null)
+const progressRef = ref<HTMLElement | null>(null)
+const value = ref<number>(Number(props.modelValue ?? 0))
 
-  emits: useInputtable.emits(false),
-
-  setup(props, { emit }) {
-    const elRef = ref<HTMLElement>()
-    const dragRef = ref<HTMLElement>()
-    const progressRef = ref<HTMLElement>()
-    const draggingElement = ref<HTMLElement>()
-    const value = ref<number>(Number(props.modelValue ?? 0))
-
-    const interactive = useInteractive(elRef)
-
-    const labelClasses = computed(() => {
-      if (props.size === 'xs') return 'text-xs'
-      else if (props.size === 'sm') return 'text-sm'
-      else if (props.size === 'lg') return 'text-lg'
-      else if (props.size === 'xl') return 'text-xl'
-
-      return ''
-    })
-
-    const css = useCSS('slider')
-    const colors = useColors()
-    const primary = colors.getPalette('primary')
-    const style = computed(() => {
-      const color = colors.getPalette(props.color)
-
-      return css.variables({
-        bg: color[500],
-        border: primary[500],
-        // width: value.value + '%',
-      })
-    })
-
-    watch(() => props.modelValue, (val) => {
-      value.value = Number(val ?? 0)
-    })
-
-    watch(value, (val) => {
-      emit('update:modelValue', val)
-    })
-
-    const initial = ref()
-    const position = ref()
-    const isDragging = computed(() => !!initial.value)
-
-    function startProgressDrag(e: PointerEvent) {
-      e.stopPropagation()
-      if (!dragRef.value || !progressRef.value) return
-
-      interactive.focus()
-
-      const maxWidth = progressRef.value.offsetWidth
-      let percent = Math.floor(e.offsetX * 100 / maxWidth)
-
-      console.log(e, e.offsetX, percent)
-
-      if (percent < 0) percent = 0
-      if (percent > 100) percent = 100
-
-      value.value = percent
-
-      setTimeout(() => {
-        initial.value = {
-          x: e.x,
-          y: e.y,
-          maxWidth,
-          offsetX: dragRef.value?.offsetLeft,
-        }
-      })
-      e.preventDefault()
-      e.stopPropagation()
-    }
+const { focus, blur } = useInteractive(elRef)
+
+watch(() => props.modelValue, (val) => {
+  value.value = Number(val ?? 0)
+})
+
+watch(value, (val) => {
+  emit('update:modelValue', val)
+})
+
+const initial = ref()
+const isDragging = computed(() => !!initial.value)
 
-    function startDrag(e: PointerEvent) {
-      if (!dragRef.value || !progressRef.value) return
+function startProgressDrag(e: PointerEvent) {
+  e.stopPropagation()
+  if (!dragRef.value || !progressRef.value) return
 
-      interactive.focus()
+  focus()
 
-      initial.value = {
-        x: e.x,
-        y: e.y,
-        maxWidth: progressRef.value.offsetWidth,
-        offsetX: dragRef.value.offsetLeft,
-      }
+  const maxWidth = progressRef.value.offsetWidth
+  let percent = Math.floor(e.offsetX * 100 / maxWidth)
 
-      e.preventDefault()
-      e.stopPropagation()
+  if (percent < 0) percent = 0
+  if (percent > 100) percent = 100
+
+  value.value = percent
+
+  setTimeout(() => {
+    initial.value = {
+      x: e.x,
+      y: e.y,
+      maxWidth,
+      offsetX: dragRef.value?.offsetLeft,
     }
+  })
+  e.preventDefault()
+  e.stopPropagation()
+}
 
-    function moveDrag(e: PointerEvent) {
-      if (!initial.value || !dragRef.value) return
+function startDrag(e: PointerEvent) {
+  if (!dragRef.value || !progressRef.value) return
 
-      const { x, maxWidth, offsetX } = initial.value
-      const movedX = e.x - x
+  focus()
 
-      if (movedX === 0) return
+  initial.value = {
+    x: e.x,
+    y: e.y,
+    maxWidth: progressRef.value.offsetWidth,
+    offsetX: dragRef.value.offsetLeft,
+  }
 
-      const newMoveX = offsetX + movedX
-      let percent = Math.floor(newMoveX * 100 / maxWidth)
+  e.preventDefault()
+  e.stopPropagation()
+}
 
-      if (percent < 0) percent = 0
-      if (percent > 100) percent = 100
+function moveDrag(e: PointerEvent) {
+  if (!initial.value || !dragRef.value) return
 
-      value.value = percent
+  const { x, maxWidth, offsetX } = initial.value
+  const movedX = e.x - x
 
-      e.preventDefault()
-      e.stopPropagation()
-    }
+  if (movedX === 0) return
 
-    function endDrag(e: PointerEvent) {
-      if (!initial.value) return
-      initial.value = undefined
-      e.preventDefault()
-      e.stopPropagation()
-    }
+  const newMoveX = offsetX + movedX
+  let percent = Math.floor(newMoveX * 100 / maxWidth)
 
-    useEventListener(progressRef, 'pointerdown', startProgressDrag, false)
-    useEventListener(dragRef, 'pointerdown', startDrag, false)
-    useEventListener(window, 'pointermove', moveDrag, true)
-    useEventListener(window, 'pointerup', endDrag, true)
+  if (percent < 0) percent = 0
+  if (percent > 100) percent = 100
 
-    useEventListener(elRef, 'keydown', handleKeydown)
+  value.value = percent
 
-    function handleKeydown(e: KeyboardEvent) {
-      if (e.code === 'ArrowLeft') {
-        const nextValue = value.value - 1
+  e.preventDefault()
+  e.stopPropagation()
+}
 
-        if (nextValue >= 0) value.value = nextValue
+function endDrag(e: PointerEvent) {
+  if (!initial.value) return
+  initial.value = undefined
+  e.preventDefault()
+  e.stopPropagation()
+}
 
-        e.preventDefault()
-      } else if (e.code === 'ArrowRight') {
-        const nextValue = value.value + 1
+useEventListener(progressRef, 'pointerdown', startProgressDrag, false)
+useEventListener(dragRef, 'pointerdown', startDrag, false)
+useEventListener(window, 'pointermove', moveDrag, true)
+useEventListener(window, 'pointerup', endDrag, true)
 
-        if (nextValue <= 100) value.value = nextValue
+useEventListener(elRef, 'keydown', handleKeydown)
 
-        e.preventDefault()
-      }
-    }
+function handleKeydown(e: KeyboardEvent) {
+  if (e.code === 'ArrowLeft') {
+    const nextValue = value.value - 1
 
-    return {
-      ...interactive,
-      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
-      labelClasses,
-      draggingElement,
-      value,
-      elRef,
-      dragRef,
-      progressRef,
-      style,
-      isDragging,
-      position,
-    }
-  },
-})
+    if (nextValue >= 0) value.value = nextValue
+
+    e.preventDefault()
+  } else if (e.code === 'ArrowRight') {
+    const nextValue = value.value + 1
+
+    if (nextValue <= 100) value.value = nextValue
+
+    e.preventDefault()
+  }
+}
+
+const {
+  errorInternal,
+  reset,
+  validate,
+  setError,
+  isInsideForm,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
+const { styles, classes, className } = useTheme('slider', theme, props)
+
+defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
   <label
     ref="elRef"
     tabindex="0"
-    class="group inline-block relative align-bottom text-left focus:outline-none"
-    :class="{ 'mb-3': isInsideForm }"
-    :style="style"
+    class="group relative"
+    :class="[
+      className,
+      classes.wrapper,
+      { 'mb-3': isInsideForm }
+    ]"
+    :style="styles"
   >
     <p
       v-if="label"
-      class="font-medium text-gray-800 dark:text-gray-200 mb-1"
-      :class="labelClasses"
+      :class="classes.label"
       v-text="label"
     ></p>
 
@@ -225,10 +191,11 @@ export default defineComponent({
         </div>
         <div
           ref="dragRef"
-          class="absolute w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm
-          group-focus:border-[color:var(--x-slider-border)]
-          "
-          :class="[isDragging ? 'cursor-grabbing' : 'cursor-grab']"
+          class="absolute group-focus:border-[color:var(--x-slider-border)]"
+          :class="[
+            classes.drag,
+            isDragging ? 'cursor-grabbing' : 'cursor-grab'
+          ]"
           :style="`left: ${value}%;`"
         ></div>
       </div>

package/src/components/slider/__tests__/Slider.spec.ts

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

package/src/components/spacer/{Spacer.vue → Spacer.tsx}

@@ -1,11 +1,8 @@
-<script lang="ts">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'XSpacer',
+  setup() {
+    return () => <div class="flex-grow"></div>
+  },
 })
-</script>
-
-<template>
-  <div class="flex-grow"></div>
-</template>

package/src/components/spacer/__tests__/Spacer.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Spacer from '../Spacer'
+
+describe('Spacer', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Spacer)
+
+    expect(wrapper.classes()).toContain('flex-grow')
+  })
+})

package/src/components/spinner/Spinner.vue

@@ -1,45 +1,21 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+export default { name: 'XSpinner' }
+</script>
+
+<script setup lang="ts">
 import { useCommon } from '../../composables/common'
 
 import XIcon from '../../components/icon/Icon.vue'
 
-export default defineComponent({
-  name: 'XSpinner',
-
-  components: {
-    XIcon,
-  },
-
-  props: {
-    ...useCommon.props(),
-    icon: String,
-  },
-
-  setup() {
-    const defaultIcon = `<g fill="none" fill-rule="evenodd">
-      <g transform="translate(1 1)" stroke-width="2">
-        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
-        <path d="M36 18c0-9.94-8.06-18-18-18">
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            from="0 18 18"
-            to="360 18 18"
-            dur="0.5s"
-            repeatCount="indefinite"
-          />
-        </path>
-      </g>
-    </g>`
-
-    return {
-      defaultIcon,
-    }
+const props = defineProps({
+  ...useCommon.props(),
+  icon: {
+    type: String,
+    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>',
   },
 })
 </script>
 
 <template>
-  <x-icon :icon="icon || defaultIcon" :size="size" view-box="0 0 38 38"/>
+  <x-icon :icon="icon" :size="size" view-box="0 0 38 38"/>
 </template>

package/src/components/spinner/__tests__/Spinner.spec.ts

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

package/src/components/tab/Tab.theme.ts

@@ -0,0 +1,22 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props, data }: ThemeParams) => {
+      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
+
+      if (data.variant === 'block') c.push('px-8')
+
+      if (props.size === 'xs') c.push('text-xs')
+      else if (props.size === 'sm') c.push('text-sm')
+      else if (props.size === 'lg') c.push('text-lg')
+      else if (props.size === 'xl') c.push('text-xl')
+
+      return c
+    },
+
+    label: '',
+
+    icon: 'mr-1.5',
+  },
+}