@indielayer/ui 1.2.0 → 1.4.0

package/src/components/slider/Slider.vue

@@ -4,7 +4,6 @@ const sliderProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  label: String,
   min: Number,
   max: Number,
   step: {
@@ -15,6 +14,10 @@ const sliderProps = {
 }
 
 export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>
+
+type InternalClasses = 'wrapper' | 'drag'
+export interface SliderTheme extends ThemeComponent<SliderProps, InternalClasses> {}
+
 export default {
   name: 'XSlider',
   validators: {
@@ -26,15 +29,14 @@ export default {
 <script setup lang="ts">
 import { computed, ref, watch, type ExtractPublicPropTypes } 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 { useTheme } from '../../composables/theme'
-
-import XProgress from '../../components/progress/Progress.vue'
+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 theme from './Slider.theme'
+import XLabel from '../label/Label.vue'
+import XProgress from '../progress/Progress.vue'
 
 const props = defineProps(sliderProps)
 
@@ -160,30 +162,27 @@ const {
   isInsideForm,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('slider', theme, props)
+const { styles, classes, className } = useTheme('Slider', {}, props)
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
-  <label
+  <x-label
     ref="elRef"
     tabindex="0"
-    class="group relative"
+    class="group"
+    :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm }
     ]"
-    :style="styles"
   >
-    <p
-      v-if="label"
-      :class="classes.label"
-      v-text="label"
-    ></p>
-
-    <div class="flex items-center relative w-full" >
+    <div class="flex items-center relative w-full">
       <slot name="prefix" :value="value"></slot>
       <div
         ref="progressRef"
@@ -213,5 +212,5 @@ defineExpose({ focus, blur, reset, validate, setError })
     </div>
 
     <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
-  </label>
+  </x-label>
 </template>

package/src/components/slider/index.ts

@@ -1,2 +1,2 @@
 export { default as XSlider } from './Slider.vue'
-export type { SliderProps } 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 dark:bg-gray-100',
+  },
+
+  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/spinner/Spinner.vue

@@ -3,7 +3,7 @@ const spinnerProps = {
   ...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>',
+    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>',
   },
 }
 
@@ -19,7 +19,7 @@ export default {
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useCommon } from '../../composables/common'
+import { useCommon } from '../../composables/useCommon'
 
 import XIcon from '../../components/icon/Icon.vue'
 
@@ -27,5 +27,5 @@ defineProps(spinnerProps)
 </script>
 
 <template>
-  <x-icon :icon="icon" :size="size" view-box="0 0 38 38"/>
+  <x-icon :icon="icon" :size="size" />
 </template>

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

package/src/components/tab/Tab.vue

@@ -6,17 +6,24 @@ const tabProps = {
   },
   tag: {
     type: String,
-    default: 'div',
+    default: 'button',
   },
   to: [String, Object],
   label: String,
   icon: String,
   disabled: Boolean,
   exact: Boolean,
+  removable: Boolean,
 }
 
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>
 
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel'
+type InternalExtraData = {
+  selected: boolean;
+} & Pick<TabGroupInjection, 'state'>['state']
+export interface TabTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XTab',
   validators: {
@@ -28,15 +35,16 @@ export default {
 <script setup lang="ts">
 import { inject, reactive, computed, ref, onMounted, type ExtractPublicPropTypes } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
-import { injectTabKey } from '../../composables/keys'
-import { useCommon, type Size } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
+import { injectTabGroupKey } from '../../composables/keys'
+import { useCommon, type Size } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../icon/Icon.vue'
 import XLink from '../link/Link.vue'
 
-import theme from './Tab.theme'
-import type { TabGroupVariant } from './TabGroup.vue'
+import { closeIcon } from '../../common/icons'
+
+import type { TabGroupInjection, TabGroupVariant } from './TabGroup.vue'
 
 const props = defineProps(tabProps)
 
@@ -45,7 +53,7 @@ const computedLabel = computed(() => props.label || props.value)
 const teleportTo = ref<HTMLElement | null>(null)
 const elRef = ref<HTMLElement | typeof XLink | null>(null)
 
-const tabs = inject(injectTabKey, {
+const tabs = inject(injectTabGroupKey, {
   tabsContentRef: ref(null),
   activateTab: () => {},
   state: reactive({
@@ -94,14 +102,19 @@ function onClickTab(e: MouseEvent) {
     return
   }
 
-  if (!props.to && computedValue.value) tabs.activateTab(computedValue.value)
+  if (!props.to && typeof computedValue.value !== 'undefined') tabs.activateTab(computedValue.value)
 }
 
-const { styles, classes, className } = useTheme('tab', theme, ref({
+defineEmits(['remove'])
+
+const { styles, classes, className } = useTheme('Tab', {}, ref({
   ...props,
   size: computedSize.value,
   exact: computedExact.value,
-}), tabs.state)
+}), {
+  ...tabs.state,
+  selected,
+})
 </script>
 
 <template>
@@ -114,16 +127,16 @@ const { styles, classes, className } = useTheme('tab', theme, ref({
     :style="[
       styles,
       to && selected && tabs.state.variant === 'block'
-        ? '--x-link-text: var(--x-tabs-text); --x-link-text-hover: var(--x-tabs-text);'
+        ? '--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);'
         : ''
     ]"
     :class="[
       className,
       classes.wrapper,
-      'shrink-0 font-medium',
+      'shrink-0',
       {
         'flex-1': tabs.state.grow,
-        'text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-tabs-dark-text)]': selected,
+        'text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]': selected,
         'cursor-pointer': !disabled,
         'cursor-not-allowed': disabled,
         'cursor-not-allowed text-gray-500': disabled && !selected,
@@ -140,7 +153,7 @@ const { styles, classes, className } = useTheme('tab', theme, ref({
       :size="computedSize"
       :icon="icon"
     >
-      <div class="flex items-center justify-center">
+      <div :class="classes.content">
         <x-icon
           v-if="icon"
           :icon="icon"
@@ -148,10 +161,19 @@ const { styles, classes, className } = useTheme('tab', theme, ref({
           :class="classes.icon"
         />
         <div :class="classes.label">{{ computedLabel }}</div>
+        <x-icon
+          v-if="removable"
+          size="sm"
+          :icon="closeIcon"
+          class="ml-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-500 transition-colors duration-150"
+          @click="(e: Event) => $emit('remove', e)"
+        />
       </div>
     </slot>
     <teleport v-if="selected && teleportTo" :to="teleportTo">
-      <slot></slot>
+      <div role="tabpanel" :class="classes.tabpanel">
+        <slot></slot>
+      </div>
     </teleport>
   </component>
 </template>

package/src/components/tab/TabGroup.vue

@@ -19,6 +19,10 @@ const tabGroupProps = {
   ghost: Boolean,
   grow: Boolean,
   exact: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export type TabGroupInjection = {
@@ -38,6 +42,9 @@ export type TabGroupVariant = typeof validators.variant[number]
 export type TabGroupAlign = typeof validators.align[number]
 export type TabGroupProps = ExtractPublicPropTypes<typeof tabGroupProps>
 
+type InternalClasses = 'wrapper' | 'list' | 'tracker' | 'scroller'
+export interface TabGroupTheme extends ThemeComponent<TabGroupProps, InternalClasses> {}
+
 export default {
   name: 'XTabGroup',
   validators,
@@ -47,20 +54,18 @@ export default {
 <script setup lang="ts">
 import { reactive, computed, provide, type PropType, ref, watch, onMounted, watchEffect, type ExtractPublicPropTypes, type Ref, nextTick } from 'vue'
 import { useMutationObserver, useResizeObserver, useThrottleFn } from '@vueuse/core'
-import { injectTabKey } from '../../composables/keys'
-import { useCommon, type Size } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
+import { injectTabGroupKey } from '../../composables/keys'
+import { useCommon, type Size } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XScroll from '../../components/scroll/Scroll.vue'
 
-import theme from './TabGroup.theme'
-
 const props = defineProps(tabGroupProps)
 
 const emit = defineEmits(['update:modelValue'])
 
-const scrollRef = ref<typeof XScroll | null>(null)
+const scrollRef = ref<InstanceType<typeof XScroll> | null>(null)
 const wrapperRef = ref<HTMLElement | null>(null)
 const trackerRef = ref<HTMLElement | null>(null)
 const tabsRef = ref<HTMLElement | null>(null)
@@ -87,7 +92,7 @@ function activateTab(tab: string | number | null) {
   emit('update:modelValue', tab)
 }
 
-provide(injectTabKey, {
+provide(injectTabGroupKey, {
   tabsContentRef,
   activateTab,
   state,
@@ -111,7 +116,7 @@ const updateTracker = useThrottleFn(async (value: string | number | undefined) =
   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)
+}, 100, true)
 
 const showTracker = ref(true)
 
@@ -138,7 +143,9 @@ onMounted(() => {
   updateTracker(active.value)
 })
 
-const { styles, classes, className } = useTheme('tabs', theme, props)
+useResizeObserver(tabsRef, () => { updateTracker(active.value) })
+
+const { styles, classes, className } = useTheme('TabGroup', {}, props)
 </script>
 
 <template>
@@ -157,10 +164,7 @@ const { styles, classes, className } = useTheme('tabs', theme, props)
         :scrollbar="false"
         horizontal
         mousewheel
-        :class="{
-          'rounded-md': variant === 'block',
-          'bg-slate-100 dark:bg-gray-800 p-1': variant === 'block' && !ghost
-        }"
+        :class="classes.scroller"
       >
         <div
           ref="tabsRef"

package/src/components/tab/index.ts

@@ -1,5 +1,11 @@
 export { default as XTab } from './Tab.vue'
-export type { TabProps } from './Tab.vue'
+export type { TabProps, TabTheme } from './Tab.vue'
 
 export { default as XTabGroup } from './TabGroup.vue'
-export type { TabGroupProps, TabGroupAlign, TabGroupInjection, TabGroupVariant } from './TabGroup.vue'
+export type {
+  TabGroupProps,
+  TabGroupAlign,
+  TabGroupInjection,
+  TabGroupVariant,
+  TabGroupTheme,
+} from './TabGroup.vue'

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

@@ -0,0 +1,28 @@
+import type { TabTheme } from '../Tab.vue'
+
+const theme: TabTheme = {
+  classes: {
+    wrapper: ({ props, data }) => {
+      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
+    },
+
+    content: 'flex items-center justify-center',
+
+    label: 'font-medium',
+
+    icon: 'mr-1.5',
+
+    tabpanel: 'py-2',
+  },
+}
+
+export default theme