@indielayer/ui 1.3.0 → 1.4.0

package/src/components/select/Select.vue

@@ -6,16 +6,14 @@ const selectProps = {
   placeholder: String,
   options: Array as PropType<SelectOption[]>,
   multiple: Boolean,
-  label: String,
-  helper: String,
   flat: Boolean,
   native: Boolean,
 }
 
 export type SelectOption = {
   value: number | string;
-  disabled: boolean;
   label: string;
+  disabled?: boolean;
 }
 
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
@@ -39,7 +37,7 @@ import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
-import { checkIcon, chevronDownIcon } from '../../common/icons'
+import { checkIcon, selectIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
 import XTag from '../tag/Tag.vue'
@@ -230,6 +228,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   inputListeners,
   reset,
   validate,
@@ -335,7 +334,8 @@ defineExpose({ focus, blur, reset, validate, setError })
             <x-tag
               v-for="value in selected"
               :key="value"
-              size="sm"
+              size="xs"
+              outlined
               removable
               @remove="(e: Event) => { handleRemove(e, value) }"
             >{{ getLabel(value) }}</x-tag>
@@ -357,10 +357,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-popover
         v-else
         ref="popoverRef"
-        block
         :disabled="disabled || loading || readonly"
-        :dismiss-on-click="!multiple"
-        align="left"
       >
         <div
           :class="[classes.box]"
@@ -370,7 +367,8 @@ defineExpose({ focus, blur, reset, validate, setError })
               <x-tag
                 v-for="value in selected"
                 :key="value"
-                size="sm"
+                size="xs"
+                outlined
                 removable
                 @remove="(e: Event) => { handleRemove(e, value) }"
               >{{ getLabel(value) }}</x-tag>
@@ -415,6 +413,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </x-popover>
 
       <select
+        :id="id"
         ref="elRef"
         v-model="selected"
         tabindex="-1"
@@ -439,7 +438,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         <x-spinner v-if="loading" :size="size" />
         <slot v-else name="icon">
           <x-icon
-            :icon="chevronDownIcon"
+            :icon="selectIcon"
             :class="[classes.icon]"
           />
         </slot>
@@ -447,6 +446,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>

package/src/components/select/theme/Select.base.theme.ts

@@ -27,7 +27,7 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-scroll',
+    content: 'py-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 

package/src/components/select/theme/Select.carbon.theme.ts

@@ -18,7 +18,7 @@ const theme: SelectTheme = {
       } else if (props.readonly) {
         classes.push('bg-white dark:bg-gray-900 text-gray-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
       }
 
       if (data.errorInternal) {
@@ -30,7 +30,7 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-scroll',
+    content: 'py-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 

package/src/components/skeleton/Skeleton.vue

@@ -1,9 +1,22 @@
 <script lang="ts">
+const shapes = ['line', 'circle'] as const
+
+export type SkeletonShape = typeof shapes[number]
+
+const validators = {
+  shape: shapes,
+}
+
 const skeletonProps = {
   tag: {
     type: String,
     default: 'div',
   },
+  shape: {
+    type: String as PropType<SkeletonShape>,
+    default: 'line',
+    validator: (val: SkeletonShape) => validators.shape.includes(val),
+  },
 }
 
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
@@ -11,11 +24,14 @@ export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
 type InternalClasses = 'wrapper'
 export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalClasses> {}
 
-export default { name: 'XSkeleton' }
+export default {
+  name: 'XSkeleton',
+  validators,
+}
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes, PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(skeletonProps)

package/src/components/skeleton/theme/Skeleton.base.theme.ts

@@ -2,7 +2,14 @@ import type { SkeletonTheme } from '../Skeleton.vue'
 
 const theme: SkeletonTheme = {
   classes: {
-    wrapper: 'animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md',
+    wrapper: ({ props }) => {
+      const classes = ['animate-pulse bg-gray-300 dark:bg-gray-600']
+
+      if (props.shape === 'circle') classes.push('w-8 h-8 rounded-full')
+      else classes.push('rounded-md')
+
+      return classes
+    },
   },
 }
 

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: {
@@ -183,7 +182,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       classes.wrapper,
     ]"
   >
-    <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"

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

@@ -4,7 +4,7 @@ const theme: SliderTheme = {
   classes: {
     wrapper: '',
 
-    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900',
+    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900 dark:bg-gray-100',
   },
 
   styles: ({ props, colors, css }) => {

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=".8" 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>',
   },
 }
 
@@ -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/{collapse/__tests__/Collapse.spec.ts → stepper/__tests__/Stepper.spec.ts}

@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import Collapse from '../Collapse.vue'
+import Stepper from '../Stepper.vue'
 
-describe('Collapse', () => {
+describe('Stepper', () => {
   it('renders without errors', () => {
-    const wrapper = mount(Collapse)
+    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,18 +6,19 @@ 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'
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel'
 type InternalExtraData = {
   selected: boolean;
 } & Pick<TabGroupInjection, 'state'>['state']
@@ -34,13 +35,15 @@ 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 { 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 { closeIcon } from '../../common/icons'
+
 import type { TabGroupInjection, TabGroupVariant } from './TabGroup.vue'
 
 const props = defineProps(tabProps)
@@ -50,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({
@@ -99,9 +102,11 @@ 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)
 }
 
+defineEmits(['remove'])
+
 const { styles, classes, className } = useTheme('Tab', {}, ref({
   ...props,
   size: computedSize.value,
@@ -156,10 +161,19 @@ const { styles, classes, className } = useTheme('Tab', {}, 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

@@ -54,7 +54,7 @@ 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 { injectTabGroupKey } from '../../composables/keys'
 import { useCommon, type Size } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
@@ -92,7 +92,7 @@ function activateTab(tab: string | number | null) {
   emit('update:modelValue', tab)
 }
 
-provide(injectTabKey, {
+provide(injectTabGroupKey, {
   tabsContentRef,
   activateTab,
   state,

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

@@ -20,6 +20,8 @@ const theme: TabTheme = {
     label: 'font-medium',
 
     icon: 'mr-1.5',
+
+    tabpanel: 'py-2',
   },
 }
 

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

@@ -3,9 +3,9 @@ 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-left min-w-[8rem]']
+      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left']
 
-      if (data.variant === 'block') c.push('px-8')
+      if (data.variant === 'block') c.push('px-4')
       else c.push('px-4')
 
       if (props.size === 'lg') c.push('text-lg')
@@ -26,6 +26,8 @@ const theme: TabTheme = {
     },
 
     icon: 'mr-1.5',
+
+    tabpanel: 'py-4',
   },
 }
 

package/src/components/tab/theme/TabGroup.carbon.theme.ts

@@ -1,7 +1,55 @@
 import type { TabGroupTheme } from '../TabGroup.vue'
 
-import BaseTheme from './TabGroup.base.theme'
+const theme: TabGroupTheme = {
+  classes: {
+    wrapper: '',
 
-const theme: TabGroupTheme = BaseTheme
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+      if (props.variant === 'block') c.push('')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-gray-200 dark:bg-gray-800')
+
+      return c
+    },
+
+    list: ({ props }) => {
+      const c = ['flex min-w-full w-fit']
+
+      if (props.variant === 'line') c.push('border-b border-gray-200 dark:border-gray-700')
+      if (props.variant === 'line' && !props.grow) c.push('')
+      if (props.variant === 'block') c.push('z-[1] py-1.5')
+      if (props.align === 'center') c.push('justify-center')
+      if (props.align === 'right') c.push('justify-end')
+
+      return c
+    },
+
+    tracker: ({ props }) => {
+      const c = ['absolute transition-all duration-150']
+
+      if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
+
+      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-gray-100 dark:bg-gray-700')
+
+      return c
+    },
+  },
+
+  styles: ({ props, colors, css }) => {
+    const gray = colors.getPalette('gray')
+    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],
+      },
+    })
+  },
+}
 
 export default theme