@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/tab/Tab.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+const tabProps = {
+  ...useCommon.props(),
+  value: {
+    type: [String, Number],
+  },
+  tag: {
+    type: String,
+    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: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { inject, reactive, computed, ref, onMounted, type ExtractPublicPropTypes } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
+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)
+
+const computedValue = computed(() => (elRef.value as typeof XLink)?.$el?.href || props.value)
+const computedLabel = computed(() => props.label || props.value)
+const teleportTo = ref<HTMLElement | null>(null)
+const elRef = ref<HTMLElement | typeof XLink | null>(null)
+
+const tabs = inject(injectTabGroupKey, {
+  tabsContentRef: ref(null),
+  activateTab: () => {},
+  state: reactive({
+    active: undefined,
+    variant: 'line' as TabGroupVariant,
+    ghost: false,
+    grow: false,
+    exact: false,
+    size: 'md' as Size,
+    color: 'primary',
+  }),
+})
+
+const computedExact = computed(() => tabs.state.exact || props.exact)
+const computedSize = computed(() => props.size || tabs.state.size)
+
+onMounted(() => {
+  teleportTo.value = tabs.tabsContentRef.value
+
+  if (props.to && elRef.value) {
+    check()
+    useMutationObserver((elRef.value as typeof XLink).$el, check, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+  }
+})
+
+function check() {
+  if (elRef.value && (elRef.value as typeof XLink).$el && (props.to)) {
+    const active = (elRef.value as typeof XLink).$el.classList.contains(computedExact.value ? 'router-link-exact-active' : 'router-link-active')
+
+    if (active) tabs.activateTab(computedValue.value)
+  }
+}
+
+const selected = computed(() => tabs.state.active === computedValue.value)
+
+const color = computed(() => tabs.state.color)
+
+function onClickTab(e: MouseEvent) {
+  if (props.disabled) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    return
+  }
+
+  if (!props.to && typeof computedValue.value !== 'undefined') tabs.activateTab(computedValue.value)
+}
+
+defineEmits(['remove'])
+
+const { styles, classes, className } = useTheme('Tab', {}, ref({
+  ...props,
+  size: computedSize.value,
+  exact: computedExact.value,
+}), {
+  ...tabs.state,
+  selected,
+})
+</script>
+
+<template>
+  <component
+    :is="to ? XLink : tag"
+    ref="elRef"
+    :data-value="computedValue"
+    :to="to"
+    :color="selected ? color : undefined"
+    :style="[
+      styles,
+      to && selected && tabs.state.variant === 'block'
+        ? '--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);'
+        : ''
+    ]"
+    :class="[
+      className,
+      classes.wrapper,
+      'shrink-0',
+      {
+        'flex-1': tabs.state.grow,
+        '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,
+      },
+    ]"
+    :aria-disabled="disabled ? 'true' : undefined"
+    :aria-selected="selected ? 'true' : 'false'"
+    @click="onClickTab"
+  >
+    <slot
+      name="tab"
+      :label="label"
+      :value="value"
+      :size="computedSize"
+      :icon="icon"
+    >
+      <div :class="classes.content">
+        <x-icon
+          v-if="icon"
+          :icon="icon"
+          :size="computedSize"
+          :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">
+      <div role="tabpanel" :class="classes.tabpanel">
+        <slot></slot>
+      </div>
+    </teleport>
+  </component>
+</template>

package/src/components/tab/TabGroup.vue

@@ -0,0 +1,185 @@
+<script lang="ts">
+const validators = {
+  ...useCommon.validators(),
+  variant: ['line', 'block'] as const,
+  align: ['left', 'center', 'right'] as const,
+}
+const tabGroupProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  modelValue: [String, Number],
+  variant: {
+    type: String as PropType<'line' | 'block'>,
+    default: 'line',
+  },
+  align: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+    default: 'left',
+  },
+  ghost: Boolean,
+  grow: Boolean,
+  exact: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: true,
+  },
+}
+
+export type TabGroupInjection = {
+  tabsContentRef: Ref<HTMLElement | null>;
+  activateTab: (tab: string | number) => void;
+  state: {
+    active: string | number | undefined;
+    variant: TabGroupVariant;
+    ghost: boolean;
+    grow: boolean;
+    exact: boolean;
+    size: Size;
+    color: string;
+  };
+}
+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,
+}
+</script>
+
+<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 { 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'
+
+const props = defineProps(tabGroupProps)
+
+const emit = defineEmits(['update:modelValue'])
+
+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)
+const tabsContentRef = ref<HTMLElement | null>(null)
+
+const active = ref()
+
+watchEffect(() => {
+  active.value = props.modelValue
+})
+
+const state = reactive({
+  active: computed(() => active.value),
+  variant: computed(() => props.variant),
+  ghost: computed(() => props.ghost),
+  grow: computed(() => props.grow),
+  exact: computed(() => props.exact),
+  size: computed(() => props.size),
+  color: computed(() => props.color),
+})
+
+function activateTab(tab: string | number | null) {
+  active.value = tab
+  emit('update:modelValue', tab)
+}
+
+provide(injectTabGroupKey, {
+  tabsContentRef,
+  activateTab,
+  state,
+})
+
+const updateTracker = useThrottleFn(async (value: string | number | undefined) => {
+  if (typeof value === 'undefined') return
+
+  await nextTick()
+
+  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, true)
+
+const showTracker = ref(true)
+
+function check() {
+  if (!tabsRef.value?.querySelector('.router-link-active')) {
+    activateTab(null)
+    showTracker.value = false
+  } else {
+    showTracker.value = true
+  }
+}
+
+watch(() => active.value, (value) => {
+  updateTracker(value)
+})
+
+onMounted(() => {
+  if (tabsRef.value?.querySelector('.x-link')) {
+    useMutationObserver(tabsRef.value, check, {
+      attributes: true, subtree: true,
+      attributeFilter: ['class'],
+    })
+  }
+  updateTracker(active.value)
+})
+
+useResizeObserver(tabsRef, () => { updateTracker(active.value) })
+
+const { styles, classes, className } = useTheme('TabGroup', {}, 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="tabsRef"
+          class="relative"
+          :class="classes.list"
+        >
+          <slot></slot>
+        </div>
+        <div
+          v-show="showTracker"
+          ref="trackerRef"
+          :class="classes.tracker"
+        ></div>
+      </x-scroll>
+    </div>
+    <div ref="tabsContentRef"></div>
+  </div>
+</template>

package/src/components/tab/__tests__/Tab.spec.ts

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

package/src/components/tab/__tests__/TabGroup.spec.ts

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

package/src/components/tab/index.ts

@@ -0,0 +1,11 @@
+export { default as XTab } from './Tab.vue'
+export type { TabProps, TabTheme } from './Tab.vue'
+
+export { default as XTabGroup } 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

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

@@ -0,0 +1,34 @@
+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']
+
+      if (data.variant === 'block') c.push('px-4')
+      else c.push('px-4')
+
+      if (props.size === 'lg') c.push('text-lg')
+      else if (props.size === 'xl') c.push('text-xl')
+      else c.push('text-sm')
+
+      return c
+    },
+
+    content: 'flex items-center justify-start',
+
+    label: ({ data }) => {
+      const c = ['']
+
+      if (data.selected) c.push('font-medium')
+
+      return c
+    },
+
+    icon: 'mr-1.5',
+
+    tabpanel: 'py-4',
+  },
+}
+
+export default theme

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

@@ -0,0 +1,55 @@
+import type { TabGroupTheme } from '../TabGroup.vue'
+
+const theme: TabGroupTheme = {
+  classes: {
+    wrapper: '',
+
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+      if (props.variant === 'block') c.push('rounded-md')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-slate-100 dark:bg-gray-800 p-1')
+
+      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('space-x-8')
+      if (props.variant === 'block') c.push('z-[1]')
+      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('rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]')
+
+      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

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

@@ -0,0 +1,55 @@
+import type { TabGroupTheme } from '../TabGroup.vue'
+
+const theme: TabGroupTheme = {
+  classes: {
+    wrapper: '',
+
+    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-[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