@indielayer/ui 1.0.10 → 1.1.0

package/src/components/tab/Tab.vue

@@ -1,20 +1,5 @@
 <script lang="ts">
-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'
-
-import theme from './Tab.theme'
-
-const props = defineProps({
+const tabProps = {
   ...useCommon.props(),
   value: {
     type: [String, Number],
@@ -23,28 +8,53 @@ const props = defineProps({
     type: String,
     default: 'div',
   },
-  to: String,
+  to: [String, Object],
   label: String,
   icon: String,
   disabled: Boolean,
   exact: Boolean,
-})
+}
+
+export type TabProps = ExtractPublicPropTypes<typeof tabProps>
+
+export default {
+  name: 'XTab',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
 
-const computedValue = computed(() => props.to || props.value )
+<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 XIcon from '../icon/Icon.vue'
+import XLink from '../link/Link.vue'
+
+import theme from './Tab.theme'
+import type { 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(null)
+const teleportTo = ref<HTMLElement | null>(null)
 const elRef = ref<HTMLElement | typeof XLink | null>(null)
 
 const tabs = inject(injectTabKey, {
   tabsContentRef: ref(null),
   activateTab: () => {},
   state: reactive({
-    active: false,
-    variant: 'line',
+    active: undefined,
+    variant: 'line' as TabGroupVariant,
     ghost: false,
     grow: false,
     exact: false,
-    size: 'md',
+    size: 'md' as Size,
     color: 'primary',
   }),
 })
@@ -76,8 +86,15 @@ const selected = computed(() => tabs.state.active === computedValue.value)
 
 const color = computed(() => tabs.state.color)
 
-function onClickTab() {
-  if (!props.to) tabs.activateTab(computedValue.value)
+function onClickTab(e: MouseEvent) {
+  if (props.disabled) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    return
+  }
+
+  if (!props.to && computedValue.value) tabs.activateTab(computedValue.value)
 }
 
 const { styles, classes, className } = useTheme('tab', theme, ref({
@@ -88,53 +105,53 @@ const { styles, classes, className } = useTheme('tab', theme, ref({
 </script>
 
 <template>
-  <li
+  <component
+    :is="to ? XLink : tag"
+    ref="elRef"
     :data-value="computedValue"
-    :style="styles"
-    class="shrink-0 font-medium"
+    :to="to"
+    :color="selected ? color : undefined"
+    :style="[
+      styles,
+      to && selected && tabs.state.variant === 'block'
+        ? '--x-link-text: var(--x-tabs-text); --x-link-text-hover: var(--x-tabs-text);'
+        : ''
+    ]"
     :class="[
       className,
-      { 'flex-1': tabs.state.grow }
+      classes.wrapper,
+      'shrink-0 font-medium',
+      {
+        'flex-1': tabs.state.grow,
+        '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,
+      },
     ]"
+    :aria-disabled="disabled ? 'true' : undefined"
+    :aria-selected="selected ? 'true' : 'false'"
+    @click="onClickTab"
   >
-    <component
-      :is="to ? XLink : tag"
-      ref="elRef"
-      :to="to"
-      :color="selected ? color : undefined"
-      :class="[
-        classes.wrapper,
-        {
-          '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,
-        },
-      ]"
-      :aria-disabled="disabled ? 'true' : undefined"
-      :aria-selected="selected ? 'true' : 'false'"
-      @click="onClickTab"
+    <slot
+      name="tab"
+      :label="label"
+      :value="value"
+      :size="computedSize"
+      :icon="icon"
     >
-      <slot
-        name="tab"
-        :label="label"
-        :value="value"
-        :size="computedSize"
-        :icon="icon"
-      >
-        <div class="flex items-center justify-center">
-          <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">
-        <slot></slot>
-      </teleport>
-    </component>
-  </li>
+      <div class="flex items-center justify-center">
+        <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">
+      <slot></slot>
+    </teleport>
+  </component>
 </template>

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

@@ -1,10 +1,18 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { TabGroupProps } from './TabGroup.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'list' | 'tracker'
+
+interface InternalTheme extends ThemeComponent<TabGroupProps, InternalClasses> {}
+export interface TabGroupTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<TabGroupProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: '',
 
-    list: ({ props, colors, css }: ThemeParams) => {
+    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')
@@ -16,7 +24,7 @@ export default {
       return c
     },
 
-    tracker: ({ props }: ThemeParams) => {
+    tracker: ({ props }) => {
       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)]')
@@ -27,7 +35,7 @@ export default {
     },
   },
 
-  styles: ({ props, colors, css }: ThemeParams) => {
+  styles: ({ props, colors, css }) => {
     const gray = colors.getPalette('gray')
     const color = colors.getPalette(props.color)
 
@@ -41,3 +49,5 @@ export default {
     })
   },
 }
+
+export default theme

package/src/components/tab/TabGroup.vue

@@ -1,20 +1,10 @@
 <script lang="ts">
-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 { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
-
-import XScroll from '../../components/scroll/Scroll.vue'
-
-import theme from './TabGroup.theme'
-
-const props = defineProps({
+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],
@@ -29,7 +19,44 @@ const props = defineProps({
   ghost: Boolean,
   grow: Boolean,
   exact: Boolean,
-})
+}
+
+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>
+
+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 { injectTabKey } from '../../composables/keys'
+import { useCommon, type Size } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useTheme } from '../../composables/theme'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+
+import theme from './TabGroup.theme'
+
+const props = defineProps(tabGroupProps)
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -55,7 +82,7 @@ const state = reactive({
   color: computed(() => props.color),
 })
 
-function activateTab(tab: string | number) {
+function activateTab(tab: string | number | null) {
   active.value = tab
   emit('update:modelValue', tab)
 }
@@ -66,9 +93,11 @@ provide(injectTabKey, {
   state,
 })
 
-const updateTracker = useThrottleFn((value: string | number | undefined) => {
+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
@@ -84,13 +113,28 @@ const updateTracker = useThrottleFn((value: string | number | undefined) => {
   if (scrollRef.value.scrollEl) scrollRef.value.scrollEl.scrollTo({ left: center, behavior: 'smooth' })
 }, 100)
 
-useResizeObserver(wrapperRef, () => { updateTracker(active.value) })
+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)
 })
 
@@ -118,14 +162,15 @@ const { styles, classes, className } = useTheme('tabs', theme, props)
           'bg-slate-100 dark:bg-gray-800 p-1': variant === 'block' && !ghost
         }"
       >
-        <ul
+        <div
           ref="tabsRef"
           class="relative"
           :class="classes.list"
         >
           <slot></slot>
-        </ul>
+        </div>
         <div
+          v-show="showTracker"
           ref="trackerRef"
           :class="classes.tracker"
         ></div>

package/src/components/tab/index.ts

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

package/src/components/table/Table.theme.ts

@@ -1,11 +1,19 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { TableProps } from './Table.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'loadingWrapper'
+
+interface InternalTheme extends ThemeComponent<TableProps, InternalClasses> {}
+export interface TableTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<TableProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props, data }: ThemeParams) => {
+    wrapper: ({ props, data }) => {
       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.scrollable) c.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table')
 
       if (props.stickyHeader) c.push('relative')
 
@@ -17,3 +25,5 @@ export default {
     loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 }
+
+export default theme

package/src/components/table/Table.vue

@@ -1,32 +1,7 @@
 <script lang="ts">
-export default { name: 'XTable' }
-</script>
-
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import XTableHead from './TableHead'
-import XTableHeader, { type Sort, type Align } from './TableHeader.vue'
-import XTableBody from './TableBody'
-import XTableRow from './TableRow.vue'
-import XTableCell from './TableCell.vue'
-import XSpinner from '../spinner/Spinner.vue'
-
-import theme from './Table.theme'
-
-export type Header = {
-  sortable?: boolean;
-  sort?: string[];
-  align?: Align;
-  value?: string;
-  text?: string;
-  width?: string | number;
-}
-
-const props = defineProps({
+const tableProps = {
   headers: {
-    type: Array as PropType<Array<Header>>,
+    type: Array as PropType<TableHeader[]>,
     default: () => [],
   },
   items: {
@@ -34,7 +9,7 @@ const props = defineProps({
     default: () => [],
   },
   sort: {
-    type: Array as PropType<Array<string>>,
+    type: Array as PropType<string[]>,
     default: () => [],
   },
   loading: Boolean,
@@ -50,11 +25,46 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+}
+
+export type TableHeader = {
+  sortable?: boolean;
+  sort?: string[];
+  align?: TableHeaderAlign;
+  value?: string;
+  text?: string;
+  width?: string | number;
+}
+
+export type TableProps = ExtractPublicPropTypes<typeof tableProps>
+
+export default { name: 'XTable' }
+</script>
+
+<script setup lang="ts" generic="T">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useTheme } from '../../composables/theme'
+
+import XTableHead from './TableHead'
+import XTableHeader, { type TableHeaderSort, type TableHeaderAlign } from './TableHeader.vue'
+import XTableBody from './TableBody'
+import XTableRow from './TableRow.vue'
+import XTableCell from './TableCell.vue'
+import XSpinner from '../spinner/Spinner.vue'
+
+import theme from './Table.theme'
+
+const props = defineProps({
+  ...tableProps,
+  items: {
+    type: Array as PropType<T[]>,
+    default: () => [],
+  },
 })
 
 const emit = defineEmits(['update:sort', 'click-row'])
 
-function getSort(headerValue: string | undefined, sort: string[]): Sort {
+function getSort(headerValue: string | undefined, sort: string[]): TableHeaderSort {
   if (!headerValue) return undefined
 
   for (let i = 0; i < sort.length; i++) {
@@ -69,7 +79,7 @@ function getSort(headerValue: string | undefined, sort: string[]): Sort {
   return undefined
 }
 
-function sortHeader(header: Header) {
+function sortHeader(header: TableHeader) {
   // update sort array
   const sort = props.sort.slice(0)
   let exists = false
@@ -133,7 +143,7 @@ const { styles, classes, className } = useTheme('table', theme, props)
       </x-table-head>
       <x-table-body>
         <x-table-row
-          v-for="(item, index) in items"
+          v-for="(item, index) in (items as T[])"
           :key="index"
           :pointer="pointer"
           :striped="striped"

package/src/components/table/TableCell.theme.ts

@@ -1,8 +1,16 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { TableCellProps } from './TableCell.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<TableCellProps, InternalClasses> {}
+export interface TableCellTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<TableCellProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props }: ThemeParams) => {
+    wrapper: ({ props }) => {
       const c = ['last:pr-0 px-3']
 
       c.push(props.dense ? 'py-2' : 'py-4')
@@ -25,3 +33,5 @@ export default {
     },
   },
 }
+
+export default theme

package/src/components/table/TableCell.vue

@@ -1,9 +1,27 @@
 <script lang="ts">
 const validators = {
-  textAlign: [null, 'left', 'center', 'right', 'justify'],
-  verticalAlign: [null, 'baseline', 'bottom', 'middle', 'text-bottom', 'text-top', 'top'],
+  textAlign: [null, 'left', 'center', 'right', 'justify'] as const,
+  verticalAlign: [null, 'baseline', 'bottom', 'middle', 'text-bottom', 'text-top', 'top'] as const,
+}
+const tableCellProps = {
+  textAlign: {
+    type: String as PropType<TableCellTextAlign>,
+    validator: (value: string) => validators.textAlign.includes(value as any),
+  },
+  truncate: Boolean,
+  dense: Boolean,
+  fixed: Boolean,
+  verticalAlign: {
+    type: String as PropType<TableCellVerticalAlign>,
+    default: 'middle',
+    validator: (value: string) => validators.verticalAlign.includes(value as any),
+  },
 }
 
+export type TableCellTextAlign = typeof validators.textAlign[number]
+export type TableCellVerticalAlign = typeof validators.verticalAlign[number]
+export type TableCellProps = ExtractPublicPropTypes<typeof tableCellProps>
+
 export default {
   name: 'XTableCell',
   validators,
@@ -11,24 +29,12 @@ export default {
 </script>
 
 <script setup lang="ts">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
 import { useTheme } from '../../composables/theme'
 
 import theme  from './TableCell.theme'
 
-const props = defineProps({
-  textAlign: {
-    type: String,
-    validator: (value: string) => validators.textAlign.includes(value),
-  },
-  truncate: Boolean,
-  dense: Boolean,
-  fixed: Boolean,
-  verticalAlign: {
-    type: String,
-    default: 'middle',
-    validator: (value: string) => validators.verticalAlign.includes(value),
-  },
-})
+const props = defineProps(tableCellProps)
 
 if (props.truncate && !props.fixed) {
   console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')

package/src/components/table/TableHeader.vue

@@ -1,31 +1,34 @@
 <script lang="ts">
 const validators = {
-  sort: [1, -1],
-  textAlign: ['left', 'center', 'right', 'justify'],
+  sort: [1, -1, undefined] as const,
+  textAlign: ['left', 'center', 'right', 'justify'] as const,
 }
 
-export default { name: 'XTableHeader', validators }
-</script>
-
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-export type Sort = 1 | -1 | undefined
-export type Align = 'left' | 'center' | 'right' | 'justify' | undefined
-
-const props = defineProps({
+const tableHeaderProps = {
   sort: {
-    type: Number as PropType<Sort>,
-    validator: (value: number) => validators.sort.includes(value),
+    type: Number as PropType<TableHeaderSort>,
+    validator: (value: number) => validators.sort.includes(value as any),
   },
   sortable: Boolean,
   textAlign: {
-    type: String as PropType<Align>,
+    type: String as PropType<TableHeaderAlign>,
     default: 'left',
-    validator: (value: string) => validators.textAlign.includes(value),
+    validator: (value: string) => validators.textAlign.includes(value as any),
   },
   stickyHeader: Boolean,
-})
+}
+
+export type TableHeaderSort = typeof validators.sort[number]
+export type TableHeaderAlign = typeof validators.textAlign[number]
+export type TableHeaderProps = ExtractPublicPropTypes<typeof tableHeaderProps>
+
+export default { name: 'XTableHeader', validators }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+
+defineProps(tableHeaderProps)
 </script>
 
 <template>

package/src/components/table/index.ts

@@ -0,0 +1,10 @@
+export { default as XTable } from './Table.vue'
+export { default as XTableBody } from './TableBody'
+export { default as XTableCell } from './TableCell.vue'
+export { default as XTableHead } from './TableHead'
+export { default as XTableHeader } from './TableHeader.vue'
+export { default as XTableRow } from './TableRow.vue'
+
+export type { TableProps, TableHeader } from './Table.vue'
+export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort } from './TableHeader.vue'
+export type { TableCellProps, TableCellTextAlign, TableCellVerticalAlign } from './TableCell.vue'