@indielayer/ui 0.2.3 → 1.0.0-alpha.2

package/src/components/slider/Slider.vue

@@ -0,0 +1,240 @@
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from 'vue'
+import { useCSS } from '../../composables/css'
+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 XProgress from '../../components/progress/Progress.vue'
+
+export default defineComponent({
+  name: 'XSlider',
+
+  components: {
+    XProgress,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    ...useInteractive.props(),
+    ...useInputtable.props(),
+    label: String,
+    min: Number,
+    max: Number,
+    step: {
+      type: Number,
+      default: 1,
+    },
+    gradient: Boolean,
+  },
+
+  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()
+    }
+
+    function startDrag(e: PointerEvent) {
+      if (!dragRef.value || !progressRef.value) return
+
+      interactive.focus()
+
+      initial.value = {
+        x: e.x,
+        y: e.y,
+        maxWidth: progressRef.value.offsetWidth,
+        offsetX: dragRef.value.offsetLeft,
+      }
+
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    function moveDrag(e: PointerEvent) {
+      if (!initial.value || !dragRef.value) return
+
+      const { x, maxWidth, offsetX } = initial.value
+      const movedX = e.x - x
+
+      if (movedX === 0) return
+
+      const newMoveX = offsetX + movedX
+      let percent = Math.floor(newMoveX * 100 / maxWidth)
+
+      if (percent < 0) percent = 0
+      if (percent > 100) percent = 100
+
+      value.value = percent
+
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    function endDrag(e: PointerEvent) {
+      if (!initial.value) return
+      initial.value = undefined
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    useEventListener(progressRef, 'pointerdown', startProgressDrag, false)
+    useEventListener(dragRef, 'pointerdown', startDrag, false)
+    useEventListener(window, 'pointermove', moveDrag, true)
+    useEventListener(window, 'pointerup', endDrag, true)
+
+    useEventListener(elRef, 'keydown', handleKeydown)
+
+    function handleKeydown(e: KeyboardEvent) {
+      if (e.code === 'ArrowLeft') {
+        const nextValue = value.value - 1
+
+        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()
+      }
+    }
+
+    return {
+      ...interactive,
+      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
+      labelClasses,
+      draggingElement,
+      value,
+      elRef,
+      dragRef,
+      progressRef,
+      style,
+      isDragging,
+      position,
+    }
+  },
+})
+</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"
+  >
+    <p
+      v-if="label"
+      class="font-medium text-gray-800 dark:text-gray-200 mb-1"
+      :class="labelClasses"
+      v-text="label"
+    ></p>
+
+    <div class="flex items-center relative w-full" >
+      <slot name="prefix" :value="value"></slot>
+      <div
+        ref="progressRef"
+        :class="[isDragging ? 'cursor-grabbing' : 'cursor-grab']"
+        class="relative w-full py-2 mx-2"
+      >
+        <div class="-mx-2">
+          <x-progress
+            :percentage="value"
+            :animate="false"
+            thick
+            class="w-full"
+            :gradient="gradient"
+          />
+        </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']"
+          :style="`left: ${value}%;`"
+        ></div>
+      </div>
+      <slot name="suffix" :value="value"></slot>
+    </div>
+
+    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+  </label>
+</template>

package/src/components/spacer/Spacer.vue

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

package/src/components/spinner/Spinner.vue

@@ -1,19 +1,23 @@
-<template>
-  <svg
-    :class="[
-      {
-        'h-3 w-3': size === 'xs',
-        'h-4 w-4': size === 'sm',
-        'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
-        'h-6 w-6': size === 'xl',
-      },
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useCommon } from '../../composables/common'
+
+import XIcon from '../../components/icon/Icon.vue'
+
+export default defineComponent({
+  name: 'XSpinner',
+
+  components: {
+    XIcon,
+  },
+
+  props: {
+    ...useCommon.props(),
+    icon: String,
+  },
 
-    ]"
-    viewBox="0 0 38 38"
-    xmlns="http://www.w3.org/2000/svg"
-    style="stroke: currentColor"
-  >
-    <g fill="none" fill-rule="evenodd">
+  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">
@@ -27,19 +31,15 @@
           />
         </path>
       </g>
-    </g>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'XSpinner',
+    </g>`
 
-  props: {
-    size: {
-      type: String,
-      default: null,
-    },
+    return {
+      defaultIcon,
+    }
   },
-}
+})
 </script>
+
+<template>
+  <x-icon :icon="icon || defaultIcon" :size="size" view-box="0 0 38 38"/>
+</template>

package/src/components/tab/Tab.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { defineComponent, inject, reactive, computed, toRefs, ref, onMounted } from 'vue'
+import { injectTabKey } from '../../composables/keys'
+import { useCommon } from '../../composables/common'
+
+export default defineComponent({
+  name: 'XTab',
+
+  props: {
+    ...useCommon.props(),
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    to: String,
+    label: String,
+    icon: String,
+    disabled: Boolean,
+  },
+
+  setup(props) {
+    const cLabel = computed(() => props.label || props.value)
+    const teleportTo = ref(null)
+
+    const tabs = inject(injectTabKey, {
+      tabsContentRef: ref(null),
+      activateTab: () => {},
+      state: reactive({
+        active: null,
+        variant: 'line',
+        grow: false,
+      }),
+    })
+
+    onMounted(() => {
+      teleportTo.value = tabs.tabsContentRef.value
+    })
+
+    const state = reactive({
+      selected: computed(() => tabs.state.active === props.value),
+    })
+
+    function onClickTab() {
+      tabs.activateTab(props.value)
+    }
+
+    return {
+      ...toRefs(state),
+      variant: tabs.state.variant,
+      grow: tabs.state.grow,
+      cLabel,
+      tabs,
+      teleportTo,
+      onClickTab,
+    }
+  },
+})
+</script>
+
+<template>
+  <li :data-value="value" class="shrink-0 font-medium" :class="{ 'flex-1': grow }">
+    <component
+      :is="to ? 'router-link' : tag"
+      :to="to"
+      class="py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center"
+      :class="[
+        {
+          'px-8': variant === 'block',
+          'text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-dark-tabs-text)]': selected,
+          'cursor-pointer': !disabled,
+          'cursor-not-allowed': disabled,
+          'cursor-not-allowed text-gray-500': disabled && !selected,
+        },
+      ]"
+      :aria-disabled="disabled ? 'true' : undefined"
+      :aria-selected="selected ? 'true' : 'false'"
+      @click="onClickTab"
+    >
+      <slot
+        name="tab"
+        :label="label"
+        :value="value"
+        :size="size"
+        :icon="icon"
+      >
+        <div class="flex items-center justify-center">
+          <x-icon v-if="icon" :icon="icon" :size="size" class="mr-1.5 shrink-0" />
+          <span>{{ cLabel }}</span>
+        </div>
+      </slot>
+      <Teleport v-if="selected && teleportTo" :to="teleportTo">
+        <slot></slot>
+      </Teleport>
+    </component>
+  </li>
+</template>

package/src/components/tab/TabGroup.vue

@@ -0,0 +1,151 @@
+<script lang="ts">
+import { defineComponent, reactive, computed, provide, type PropType, ref, watch, onMounted } from 'vue'
+import { injectTabKey } from '../../composables/keys'
+import { useCSS } from '../../composables/css'
+import { useColors } from '../../composables/colors'
+
+import { useResizeObserver, useThrottleFn } from '@vueuse/core'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+
+export default defineComponent({
+  name: 'XTabs',
+
+  components: {
+    XScroll,
+  },
+
+  props: {
+    ...useColors.props('primary'),
+    modelValue: [String, Number],
+    variant: {
+      type: String as PropType<'line' | 'block'>,
+      default: 'line',
+    },
+    ghost: Boolean,
+    grow: Boolean,
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const scrollRef = ref()
+    const wrapperRef = ref<HTMLElement>()
+    const trackerRef = ref<HTMLElement>()
+    const tabsRef = ref<HTMLElement>()
+    const tabsContentRef = ref<HTMLElement>()
+
+    const state = reactive({
+      active: computed(() => props.modelValue),
+      variant: computed(() => props.variant),
+      ghost: computed(() => props.ghost),
+      grow: computed(() => props.grow),
+    })
+
+    function activateTab(tab: string | number) {
+      emit('update:modelValue', tab)
+    }
+
+    provide(injectTabKey, {
+      tabsContentRef,
+      activateTab,
+      state,
+    })
+
+    const updateTracker = useThrottleFn((value: string | number | undefined) => {
+      if (typeof value === 'undefined') return
+
+      const tabEl = tabsRef.value?.querySelector(`[data-value="${value}"]`) as HTMLElement
+
+      if (!tabEl || !trackerRef.value) return
+
+      trackerRef.value.style.left = `${tabEl.offsetLeft}px`
+      trackerRef.value.style.width = `${tabEl.offsetWidth}px`
+
+      if (!tabsRef.value || !scrollRef.value) return
+
+      // scrollIntoView only updates one at a time
+      const center = tabEl.offsetLeft - (tabsRef.value.getBoundingClientRect().width - tabEl.getBoundingClientRect().width) / 2
+
+      if (scrollRef.value.scrollEl) scrollRef.value.scrollEl.scrollTo({ left: center, behavior: 'smooth' })
+    }, 100)
+
+    useResizeObserver(wrapperRef, () => { updateTracker(props.modelValue) })
+
+    watch(() => props.modelValue, (value) => {
+      updateTracker(value)
+    })
+
+    onMounted(() => {
+      updateTracker(props.modelValue)
+    })
+
+    const css = useCSS('tabs')
+    const colors = useColors()
+    const gray = colors.getPalette('gray')
+    const style = computed(() => {
+      const color = colors.getPalette(props.color)
+
+      return css.variables({
+        text: color[600],
+        bg: props.ghost ? color[50] : '#fff',
+        dark: {
+          text: color[400],
+          bg: props.ghost ? color[900] : gray[700],
+        },
+      })
+    })
+
+    return {
+      scrollRef,
+      wrapperRef,
+      trackerRef,
+      tabsRef,
+      tabsContentRef,
+      style,
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div
+      ref="wrapperRef"
+      class="relative"
+      :style="style"
+    >
+      <x-scroll
+        ref="scrollRef"
+        :scrollbar="false"
+        horizontal
+        mousewheel
+        :class="{
+          'rounded-md': variant === 'block',
+          'bg-gray-50 dark:bg-gray-800 p-1': variant === 'block' && !ghost
+        }"
+      >
+        <ul
+          ref="tabsRef"
+          class="flex relative min-w-full w-fit"
+          :class="{
+            'border-b border-gray-200 dark:border-gray-700': variant === 'line',
+            'space-x-8': variant === 'line' && !grow,
+            'z-[1]': variant === 'block'
+          }"
+        >
+          <slot></slot>
+        </ul>
+        <div
+          ref="trackerRef"
+          class="absolute transition-all duration-150"
+          :class="{
+            'h-[2px] -mt-[2px] bg-[color:var(--x-tabs-text)] dark:bg-[color:var(--x-dark-tabs-text)]': variant === 'line',
+            'rounded-md h-full top-0 bg-[color:var(--x-tabs-bg)] dark:bg-[color:var(--x-dark-tabs-bg)]': variant === 'block'
+          }"
+        ></div>
+      </x-scroll>
+    </div>
+    <div ref="tabsContentRef"></div>
+  </div>
+</template>