@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/components/tab/Tab.vue

@@ -1,120 +1,111 @@
 <script lang="ts">
-import { defineComponent, inject, reactive, computed, toRefs, ref, onMounted, onBeforeUnmount } from 'vue'
+export default { name: 'XTab' }
+</script>
+
+<script setup lang="ts">
+import { inject, reactive, computed, ref, onMounted } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
 import { injectTabKey } from '../../composables/keys'
 import { useCommon } from '../../composables/common'
+import { useTheme } from '../../composables/theme'
+
 import XIcon from '../icon/Icon.vue'
 import XLink from '../link/Link.vue'
 
-export default defineComponent({
-  name: 'XTab',
+import theme from './Tab.theme'
 
-  components: {
-    XIcon,
-    XLink,
+const props = defineProps({
+  ...useCommon.props(),
+  value: {
+    type: [String, Number],
   },
-
-  props: {
-    ...useCommon.props(),
-    value: {
-      type: [String, Number],
-    },
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    to: String,
-    label: String,
-    icon: String,
-    disabled: Boolean,
-    exact: Boolean,
+  tag: {
+    type: String,
+    default: 'div',
   },
+  to: String,
+  label: String,
+  icon: String,
+  disabled: Boolean,
+  exact: Boolean,
+})
 
-  setup(props) {
-    const cValue = computed(() => props.to || props.value )
-    const cLabel = computed(() => props.label || props.value)
-    const teleportTo = ref(null)
-    const elRef = ref()
-
-    const tabs = inject(injectTabKey, {
-      tabsContentRef: ref(null),
-      activateTab: () => {},
-      state: reactive({
-        active: null,
-        variant: 'line',
-        grow: false,
-      }),
-    })
+const computedValue = computed(() => props.to || props.value )
+const computedLabel = computed(() => props.label || props.value)
+const teleportTo = ref(null)
+const elRef = ref<HTMLElement | typeof XLink | null>(null)
+
+const tabs = inject(injectTabKey, {
+  tabsContentRef: ref(null),
+  activateTab: () => {},
+  state: reactive({
+    active: false,
+    variant: 'line',
+    ghost: false,
+    grow: false,
+    exact: false,
+    size: 'md',
+    color: 'primary',
+  }),
+})
 
-    const cExact = computed(() => tabs.state.exact || props.exact)
-    const cSize = computed(() => props.size || tabs.state.size)
+const computedExact = computed(() => tabs.state.exact || props.exact)
+const computedSize = computed(() => props.size || tabs.state.size)
 
-    onMounted(() => {
-      teleportTo.value = tabs.tabsContentRef.value
+onMounted(() => {
+  teleportTo.value = tabs.tabsContentRef.value
 
-      if (props.to) {
-        check()
-        useMutationObserver(elRef.value.$el, check, {
-          attributes: true,
-          attributeFilter: ['class'],
-        })
-      }
+  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.$el && (props.to)) {
-        const active = elRef.value?.$el.classList.contains(cExact.value ? 'router-link-exact-active' : 'router-link-active')
-
-        if (active) tabs.activateTab(cValue.value)
-      }
-    }
+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')
 
-    const state = reactive({
-      selected: computed(() => tabs.state.active === cValue.value),
-    })
+    if (active) tabs.activateTab(computedValue.value)
+  }
+}
 
-    function onClickTab() {
-      if (!props.to) tabs.activateTab(cValue.value)
-    }
+const selected = computed(() => tabs.state.active === computedValue.value)
 
-    const sizeClasses = computed(() => {
-      if (cSize.value === 'xs') return 'text-xs'
-      else if (cSize.value === 'sm') return 'text-sm'
-      else if (cSize.value === 'lg') return 'text-lg'
-      else if (cSize.value === 'xl') return 'text-xl'
+const color = computed(() => tabs.state.color)
 
-      return ''
-    })
+function onClickTab() {
+  if (!props.to) tabs.activateTab(computedValue.value)
+}
 
-    return {
-      ...toRefs(state),
-      variant: tabs.state.variant,
-      grow: tabs.state.grow,
-      elRef,
-      cLabel,
-      cValue,
-      cSize,
-      tabs,
-      sizeClasses,
-      teleportTo,
-      onClickTab,
-    }
-  },
-})
+const { styles, classes, className } = useTheme('tab', theme, ref({
+  ...props,
+  size: computedSize.value,
+  exact: computedExact.value,
+}), tabs.state)
 </script>
 
 <template>
-  <li :data-value="cValue" class="shrink-0 font-medium" :class="{ 'flex-1': grow }">
+  <li
+    :data-value="computedValue"
+    :style="styles"
+    class="shrink-0 font-medium"
+    :class="[
+      className,
+      { 'flex-1': tabs.state.grow }
+    ]"
+  >
     <component
-      :is="to ? 'x-link' : tag"
+      :is="to ? XLink : tag"
       ref="elRef"
       :to="to"
-      class="py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center"
+      :color="selected ? color : undefined"
       :class="[
-        sizeClasses,
+        classes.wrapper,
         {
-          'px-8': variant === 'block',
-          'text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-dark-tabs-text)]': selected,
+          'text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-tabs-dark-text)]': selected,
           'cursor-pointer': !disabled,
           'cursor-not-allowed': disabled,
           'cursor-not-allowed text-gray-500': disabled && !selected,
@@ -128,17 +119,22 @@ export default defineComponent({
         name="tab"
         :label="label"
         :value="value"
-        :size="cSize"
+        :size="computedSize"
         :icon="icon"
       >
         <div class="flex items-center justify-center">
-          <XIcon v-if="icon" :icon="icon" :size="cSize" class="mr-1.5 shrink-0" />
-          <span>{{ cLabel }}</span>
+          <x-icon
+            v-if="icon"
+            :icon="icon"
+            :size="computedSize"
+            :class="classes.icon"
+          />
+          <div :class="classes.label">{{ computedLabel }}</div>
         </div>
       </slot>
-      <Teleport v-if="selected && teleportTo" :to="teleportTo">
+      <teleport v-if="selected && teleportTo" :to="teleportTo">
         <slot></slot>
-      </Teleport>
+      </teleport>
     </component>
   </li>
 </template>

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

@@ -0,0 +1,43 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: '',
+
+    list: ({ props, colors, css }: ThemeParams) => {
+      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 }: ThemeParams) => {
+      const c = ['absolute transition-all duration-150']
+
+      if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tabs-text)] dark:bg-[color:var(--x-tabs-dark-text)]')
+
+      if (props.variant === 'block') c.push('rounded-md h-full top-0 bg-[color:var(--x-tabs-bg)] dark:bg-[color:var(--x-tabs-dark-bg)]')
+
+      return c
+    },
+  },
+
+  styles: ({ props, colors, css }: ThemeParams) => {
+    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],
+      },
+    })
+  },
+}

package/src/components/tab/TabGroup.vue

@@ -1,127 +1,100 @@
 <script lang="ts">
-import { defineComponent, reactive, computed, provide, type PropType, ref, watch, onMounted, watchEffect } from 'vue'
+export default { name: 'XTabGroup' }
+</script>
+
+<script setup lang="ts">
+import { reactive, computed, provide, type PropType, ref, watch, onMounted, watchEffect } from 'vue'
+import { useResizeObserver, useThrottleFn } from '@vueuse/core'
 import { injectTabKey } from '../../composables/keys'
 import { useCommon } from '../../composables/common'
-import { useCSS } from '../../composables/css'
 import { useColors } from '../../composables/colors'
-
-import { useResizeObserver, useThrottleFn } from '@vueuse/core'
+import { useTheme } from '../../composables/theme'
 
 import XScroll from '../../components/scroll/Scroll.vue'
 
-export default defineComponent({
-  name: 'XTabGroup',
+import theme from './TabGroup.theme'
 
-  components: {
-    XScroll,
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  modelValue: [String, Number],
+  variant: {
+    type: String as PropType<'line' | 'block'>,
+    default: 'line',
   },
-
-  props: {
-    ...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,
+  align: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+    default: 'left',
   },
+  ghost: Boolean,
+  grow: Boolean,
+  exact: 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 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),
-    })
-
-    function activateTab(tab: string | number) {
-      active.value = tab
-      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(active.value) })
-
-    watch(() => active.value, (value) => {
-      updateTracker(value)
-    })
-
-    onMounted(() => {
-      updateTracker(active.value)
-    })
-
-    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,
-    }
-  },
+const emit = defineEmits(['update:modelValue'])
+
+const scrollRef = ref<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) {
+  active.value = tab
+  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(active.value) })
+
+watch(() => active.value, (value) => {
+  updateTracker(value)
+})
+
+onMounted(() => {
+  updateTracker(active.value)
+})
+
+const { styles, classes, className } = useTheme('tabs', theme, props)
 </script>
 
 <template>
@@ -129,7 +102,11 @@ export default defineComponent({
     <div
       ref="wrapperRef"
       class="relative"
-      :style="style"
+      :style="styles"
+      :class="[
+        className,
+        classes.wrapper,
+      ]"
     >
       <x-scroll
         ref="scrollRef"
@@ -138,29 +115,19 @@ export default defineComponent({
         mousewheel
         :class="{
           'rounded-md': variant === 'block',
-          'bg-gray-50 dark:bg-gray-800 p-1': variant === 'block' && !ghost
+          'bg-slate-100 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',
-            'justify-center': align === 'center',
-            'justify-end': align === 'right'
-          }"
+          class="relative"
+          :class="classes.list"
         >
           <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'
-          }"
+          :class="classes.tracker"
         ></div>
       </x-scroll>
     </div>

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/table/Table.theme.ts

@@ -0,0 +1,19 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props, data }: ThemeParams) => {
+      const c = ['w-full relative']
+
+      if (props.scrollable === 'block') c.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table')
+
+      if (props.stickyHeader) c.push('relative')
+
+      if (props.fixed) c.push('table-fixed')
+
+      return c
+    },
+
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
+  },
+}