@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/slider/Slider.vue

@@ -0,0 +1,216 @@
+<script lang="ts">
+const sliderProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  min: Number,
+  max: Number,
+  step: {
+    type: Number,
+    default: 1,
+  },
+  gradient: Boolean,
+}
+
+export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>
+
+type InternalClasses = 'wrapper' | 'drag'
+export interface SliderTheme extends ThemeComponent<SliderProps, InternalClasses> {}
+
+export default {
+  name: 'XSlider',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch, type ExtractPublicPropTypes } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XLabel from '../label/Label.vue'
+import XProgress from '../progress/Progress.vue'
+
+const props = defineProps(sliderProps)
+
+const emit = defineEmits(useInputtable.emits(false))
+
+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))
+
+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 startProgressDrag(e: PointerEvent) {
+  e.stopPropagation()
+  if (!dragRef.value || !progressRef.value) return
+
+  focus()
+
+  const maxWidth = progressRef.value.offsetWidth
+  let percent = Math.floor(e.offsetX * 100 / maxWidth)
+
+  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
+
+  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()
+}
+
+if (typeof window !== 'undefined') {
+  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()
+  }
+}
+
+const {
+  errorInternal,
+  reset,
+  validate,
+  setError,
+  isInsideForm,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
+const { styles, classes, className } = useTheme('Slider', {}, props)
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <x-label
+    ref="elRef"
+    tabindex="0"
+    class="group"
+    :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <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 group-focus:border-[color:var(--x-slider-border)]"
+          :class="[
+            classes.drag,
+            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>
+  </x-label>
+</template>

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/slider/index.ts

@@ -0,0 +1,2 @@
+export { default as XSlider } from './Slider.vue'
+export type { SliderProps, SliderTheme } from './Slider.vue'

package/src/components/slider/theme/Slider.base.theme.ts

@@ -0,0 +1,21 @@
+import type { SliderTheme } from '../Slider.vue'
+
+const theme: SliderTheme = {
+  classes: {
+    wrapper: '',
+
+    drag: 'w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm',
+  },
+
+  styles: ({ props, colors, css }) => {
+    const primary = colors.getPalette('primary')
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[500],
+      border: primary[500],
+    })
+  },
+}
+
+export default theme

package/src/components/slider/theme/Slider.carbon.theme.ts

@@ -0,0 +1,21 @@
+import type { SliderTheme } from '../Slider.vue'
+
+const theme: SliderTheme = {
+  classes: {
+    wrapper: '',
+
+    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900',
+  },
+
+  styles: ({ props, colors, css }) => {
+    const primary = colors.getPalette('primary')
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[500],
+      border: primary[500],
+    })
+  },
+}
+
+export default theme

package/src/components/spacer/Spacer.tsx

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

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/spacer/index.ts

@@ -0,0 +1 @@
+export { default as XSpacer } from './Spacer'

package/src/components/spinner/Spinner.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+const spinnerProps = {
+  ...useCommon.props(),
+  icon: {
+    type: String,
+    default: '<g stroke-width="0"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.65s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g>',
+  },
+}
+
+export type SpinnerProps = ExtractPublicPropTypes<typeof spinnerProps>
+
+export default {
+  name: 'XSpinner',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+
+import XIcon from '../../components/icon/Icon.vue'
+
+defineProps(spinnerProps)
+</script>
+
+<template>
+  <x-icon :icon="icon" :size="size" />
+</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/spinner/index.ts

@@ -0,0 +1,2 @@
+export { default as XSpinner } from './Spinner.vue'
+export type { SpinnerProps } from './Spinner.vue'

package/src/components/stepper/Stepper.vue

@@ -0,0 +1,153 @@
+<script lang="ts">
+const validators = {
+  ...useCommon.validators(),
+  variant: ['line'] as const,
+}
+const stepperProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  modelValue: [String, Number],
+  steps: {
+    type: Array as PropType<StepperStep[]>,
+    default: () => [],
+  },
+  variant: {
+    type: String as PropType<StepperVariant>,
+    default: 'line',
+  },
+  grow: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: true,
+  },
+  interactive: {
+    type: Boolean,
+    default: true,
+  },
+  iconPristine: String,
+  iconComplete: String,
+  iconIncomplete: String,
+  iconCurrent: String,
+  iconError: String,
+}
+
+export type StepperStepStatus = 'pristine' | 'complete' | 'incomplete' | 'error'
+
+export type StepperStep = {
+  status: StepperStepStatus;
+  label: string;
+  description: string;
+  disabled?: boolean;
+}
+
+export type StepperVariant = typeof validators.variant[number]
+export type StepperProps = ExtractPublicPropTypes<typeof stepperProps>
+
+type InternalClasses = 'wrapper' | 'list' | 'scroller' | 'content' | 'step' | 'label' | 'icon'
+export interface StepperTheme extends ThemeComponent<StepperProps, InternalClasses> {}
+
+export default {
+  name: 'XStepper',
+  validators,
+}
+</script>
+
+<script setup lang="ts">
+import { type PropType, ref, type ExtractPublicPropTypes } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+import XIcon from '../../components/icon/Icon.vue'
+import { stepperPristineIcon, stepperIncompleteIcon, errorIcon, successIcon } from '../../common/icons'
+
+const props = defineProps(stepperProps)
+
+const emit = defineEmits(['update:modelValue'])
+
+const scrollRef = ref<InstanceType<typeof XScroll> | null>(null)
+const wrapperRef = ref<HTMLElement | null>(null)
+const stepperRef = ref<HTMLElement | null>(null)
+
+function activateStep(step: StepperStep, index: number) {
+  if (step.disabled || !props.interactive) return
+
+  emit('update:modelValue', index)
+}
+
+function calcIcon(step: StepperStep, index: number) {
+  if (step.status === 'incomplete') return props.iconIncomplete || stepperIncompleteIcon
+  if (step.status === 'error') return props.iconError || errorIcon
+  if (step.status === 'complete') return props.iconComplete || successIcon
+
+  return props.iconPristine || stepperPristineIcon
+}
+
+const { styles, classes, className } = useTheme('Stepper', {}, props)
+</script>
+
+<template>
+  <div>
+    <div
+      ref="wrapperRef"
+      class="relative"
+      :style="styles"
+      :class="[
+        className,
+        classes.wrapper,
+      ]"
+    >
+      <x-scroll
+        ref="scrollRef"
+        :scrollbar="false"
+        horizontal
+        mousewheel
+        :class="classes.scroller"
+      >
+        <div
+          ref="stepperRef"
+          class="relative"
+          :class="classes.list"
+        >
+          <component
+            :is="interactive ? 'button' : 'div'"
+            v-for="(step, index) in steps"
+            :key="index"
+            :class="[classes.step, {
+              'cursor-pointer': interactive && !step.disabled,
+              'text-gray-400 dark:text-gray-600': step.disabled,
+              'flex-1': grow,
+            }]"
+            :disabled="step.disabled || !interactive"
+            @click="activateStep(step, index)"
+          >
+            <div class="overflow-hidden">
+              <div
+                class="h-0.5 w-full mb-2"
+                :class="[step.status === 'complete' || step.status === 'incomplete' ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-700']"
+              ></div>
+              <div class="flex items-start pr-4">
+                <x-icon
+                  :icon="calcIcon(step, index)"
+                  size="sm"
+                  :class="[classes.icon, {
+                    'text-primary-500': step.status === 'complete' || step.status === 'incomplete',
+                    'text-error-500': step.status === 'error',
+                  }]"
+                />
+                <div class="grid text-left">
+                  <div class="text-sm truncate">{{ step.label }}</div>
+                  <div v-if="step.description" class="text-xs text-gray-500">{{ step.description }}</div>
+                </div>
+              </div>
+            </div>
+          </component>
+        </div>
+      </x-scroll>
+    </div>
+    <div :class="classes.content">
+      <slot></slot>
+    </div>
+  </div>
+</template>

package/src/components/stepper/__tests__/Stepper.spec.ts

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

package/src/components/stepper/index.ts

@@ -0,0 +1,6 @@
+export { default as XStepper } from './Stepper.vue'
+export type {
+  StepperProps,
+  StepperVariant,
+  StepperTheme,
+} from './Stepper.vue'

package/src/components/stepper/theme/Stepper.base.theme.ts

@@ -0,0 +1,45 @@
+import type { StepperTheme } from '../Stepper.vue'
+
+const theme: StepperTheme = {
+  classes: {
+    wrapper: '',
+
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+
+      return c
+    },
+
+    list: ({ props }) => {
+      const c = ['flex min-w-full w-fit items-start']
+
+      return c
+    },
+
+    step: ({ props, data }) => {
+      const classes = ['']
+
+      if (!props.grow) classes.push('w-[8rem]')
+
+      return classes
+    },
+
+    label: ({ props, data }) => {
+      const classes = ['']
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['mr-2 mt-0.5']
+
+      return classes
+    },
+
+    content: 'mt-2 mb-4',
+  },
+}
+
+export default theme

package/src/components/stepper/theme/Stepper.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { StepperTheme } from '../Stepper.vue'
+
+import BaseTheme from './Stepper.base.theme'
+
+const theme: StepperTheme = BaseTheme
+
+export default theme