@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/table/Table.vue

@@ -0,0 +1,174 @@
+<script lang="ts">
+const tableProps = {
+  headers: {
+    type: Array as PropType<TableHeader[]>,
+    default: () => [],
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  sort: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  loading: Boolean,
+  dense: Boolean,
+  fixed: Boolean,
+  striped: Boolean,
+  pointer: Boolean,
+  scrollable: {
+    type: Boolean,
+    default: true,
+  },
+  stickyHeader: {
+    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>
+
+type InternalClasses = 'wrapper' | 'loadingWrapper'
+export interface TableTheme extends ThemeComponent<TableProps, InternalClasses> {}
+
+export default { name: 'XTable' }
+</script>
+
+<script setup lang="ts" generic="T">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+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'
+
+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[]): TableHeaderSort {
+  if (!headerValue) return undefined
+
+  for (let i = 0; i < sort.length; i++) {
+    const { 0: value, 1: order } = sort[i].split(',')
+
+    if (headerValue === value) {
+      if (parseInt(order) > 0) return 1
+      else return -1
+    }
+  }
+
+  return undefined
+}
+
+function sortHeader(header: TableHeader) {
+  // update sort array
+  const sort = props.sort.slice(0)
+  let exists = false
+
+  for (let i = 0; i < sort.length; i++) {
+    const { 0: value, 1: order } = sort[i].split(',')
+
+    if (value === header.value) {
+      exists = true
+
+      if (order === '-1') {
+        // update position to 1
+        sort.splice(i, 1, `${header.value},1`)
+        break
+      } else if (order === '1') {
+        // delete position
+        sort.splice(i, 1)
+        break
+      }
+    }
+  }
+
+  if (!exists) sort.push(`${header.value},-1`)
+
+  emit('update:sort', sort)
+}
+
+function getValue(item: any, path: string | string[] | undefined) {
+  if (!path) return ''
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
+  const result = pathArray?.reduce((prevObj: any, key: string) => prevObj && prevObj[key], item)
+
+  return result ?? ''
+}
+
+const { styles, classes, className } = useTheme('Table', {}, props)
+</script>
+
+<template>
+  <div class="w-full overflow-x-auto">
+    <table
+      :style="styles"
+      :class="[
+        className,
+        classes.wrapper,
+      ]"
+    >
+      <x-table-head>
+        <x-table-header
+          v-for="(header, index) in headers"
+          :key="index"
+          :sticky-header="stickyHeader"
+          :text-align="header.align"
+          :sort="getSort(header.value, sort)"
+          :sortable="header.sortable"
+          :width="header.width"
+          @click="header.sortable ? sortHeader(header) : null"
+        >
+          {{ header.text }}
+        </x-table-header>
+      </x-table-head>
+      <x-table-body>
+        <x-table-row
+          v-for="(item, index) in (items as T[])"
+          :key="index"
+          :pointer="pointer"
+          :striped="striped"
+          @click="$emit('click-row', item)"
+        >
+          <x-table-cell
+            v-for="(header, index2) in headers"
+            :key="index2"
+            :text-align="header.align"
+            :dense="dense"
+            :fixed="fixed"
+          >
+            <slot :name="`item-${header.value}`" :item="item">
+              {{ getValue(item, header.value) }}
+            </slot>
+          </x-table-cell>
+        </x-table-row>
+      </x-table-body>
+      <div
+        v-if="loading"
+        :class="classes.loadingWrapper"
+      >
+        <x-spinner size="lg"/>
+      </div>
+    </table>
+  </div>
+</template>

package/src/components/table/TableBody.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XTableBody',
+  setup(props, { slots }) {
+    return () => <tbody>{slots.default?.()}</tbody>
+  },
+})

package/src/components/table/TableCell.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+const validators = {
+  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>
+
+type InternalClasses = 'wrapper'
+export interface TableCellTheme extends ThemeComponent<TableCellProps, InternalClasses> {}
+
+export default {
+  name: 'XTableCell',
+  validators,
+}
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(tableCellProps)
+
+if (props.truncate && !props.fixed) {
+  console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
+}
+
+const { styles, classes, className } = useTheme('TableCell', {}, props)
+</script>
+
+<template>
+  <td
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <slot></slot>
+  </td>
+</template>

package/src/components/table/TableHead.tsx

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XTableHead',
+  setup(props, { slots }) {
+    return () => (
+      <thead class="align-bottom">
+        <tr class="text-sm text-gray-600 dark:text-gray-400 border-b">
+          {slots.default?.()}
+        </tr>
+      </thead>
+    )
+  },
+})

package/src/components/table/TableHeader.vue

@@ -0,0 +1,95 @@
+<script lang="ts">
+const validators = {
+  sort: [1, -1, undefined] as const,
+  textAlign: ['left', 'center', 'right', 'justify'] as const,
+}
+
+const tableHeaderProps = {
+  sort: {
+    type: Number as PropType<TableHeaderSort>,
+    validator: (value: number) => validators.sort.includes(value as any),
+  },
+  sortable: Boolean,
+  textAlign: {
+    type: String as PropType<TableHeaderAlign>,
+    default: 'left',
+    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>
+  <th
+    class="py-2 font-semibold tracking-widest uppercase text-xs px-3"
+    :class="[
+      {
+        // sort
+        'cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out': sortable,
+        // stickyHeader
+        'sticky top-0': stickyHeader,
+        // textAlign
+        'text-left': textAlign === 'left',
+        'text-right': textAlign === 'right',
+        'text-center': textAlign === 'center',
+        'text-justify': textAlign === 'justify',
+      },
+    ]"
+  >
+    <div
+      v-if="sortable"
+      class="relative inline-block"
+    >
+      <slot></slot>
+
+      <svg
+        v-if="sort && [1, -1].includes(sort)"
+        class="absolute stroke-2 w-3 h-3 ml-0.5 -right-3 top-0.5"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill="none"
+        role="presentation"
+      >
+        <template v-if="sort === -1">
+          <line
+            x1="12"
+            y1="5"
+            x2="12"
+            y2="19"
+          />
+          <polyline points="19 12 12 19 5 12" />
+        </template>
+
+        <template v-if="sort === 1">
+          <line
+            x1="12"
+            y1="19"
+            x2="12"
+            y2="5"
+          />
+          <polyline points="5 12 12 5 19 12" />
+        </template>
+      </svg>
+    </div>
+
+    <template v-else>
+      <slot></slot>
+    </template>
+  </th>
+</template>

package/src/components/table/TableRow.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+const validators = {
+  verticalAlign: ['baseline', 'bottom', 'middle', 'text-bottom', 'text-top', 'top'],
+}
+
+export default { name: 'XTableRow', validators }
+</script>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+
+const props = defineProps({
+  pointer: Boolean,
+  striped: Boolean,
+  verticalAlign: {
+    type: String as PropType<'baseline' | 'bottom' | 'middle' | 'text-bottom' | 'text-top' | 'top'>,
+    default: 'top',
+    validator: (value: string) => validators.verticalAlign.includes(value),
+  },
+})
+
+const alignClass = computed(() => {
+  if (props.verticalAlign === 'baseline') return 'align-baseline'
+  else if (props.verticalAlign === 'bottom') return 'align-bottom'
+  else if (props.verticalAlign === 'middle') return 'align-middle'
+  else if (props.verticalAlign === 'text-bottom') return 'align-text-bottom'
+  else if (props.verticalAlign === 'text-top') return 'align-text-top'
+  else if (props.verticalAlign === 'top') return 'align-top'
+
+  return ''
+})
+</script>
+
+<template>
+  <tr
+    :class="[
+      striped ? 'odd:bg-gray-50 dark:odd:bg-gray-800' : 'border-b border-gray-200 dark:border-gray-700',
+      {
+        'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': pointer,
+      },
+      alignClass
+    ]"
+  >
+    <slot></slot>
+  </tr>
+</template>

package/src/components/table/__tests__/Table.spec.ts

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

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, TableTheme } from './Table.vue'
+export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort } from './TableHeader.vue'
+export type { TableCellProps, TableCellTextAlign, TableCellVerticalAlign, TableCellTheme } from './TableCell.vue'

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

@@ -0,0 +1,21 @@
+import type { TableTheme } from '../Table.vue'
+
+const theme: TableTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const c = ['w-full relative']
+
+      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')
+
+      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',
+  },
+}
+
+export default theme

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

@@ -0,0 +1,7 @@
+import type { TableTheme } from '../Table.vue'
+
+import BaseTheme from './Table.base.theme'
+
+const theme: TableTheme = BaseTheme
+
+export default theme

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

@@ -0,0 +1,29 @@
+import type { TableCellTheme } from '../TableCell.vue'
+
+const theme: TableCellTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const c = ['last:pr-0 px-3']
+
+      c.push(props.dense ? 'py-2' : 'py-4')
+
+      if (props.textAlign === 'left') c.push('text-left')
+      else if (props.textAlign === 'center') c.push('text-center')
+      else if (props.textAlign === 'right') c.push('text-right')
+      else if (props.textAlign === 'justify') c.push('text-justify')
+
+      if (props.verticalAlign === 'baseline') c.push('align-baseline')
+      else if (props.verticalAlign === 'bottom') c.push('align-bottom')
+      else if (props.verticalAlign === 'middle') c.push('align-middle')
+      else if (props.verticalAlign === 'text-bottom') c.push('align-text-bottom')
+      else if (props.verticalAlign === 'text-top') c.push('align-text-top')
+      else if (props.verticalAlign === 'top') c.push('align-top')
+
+      if (props.truncate && props.fixed) c.push('truncate')
+
+      return c
+    },
+  },
+}
+
+export default theme

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

@@ -0,0 +1,7 @@
+import type { TableCellTheme } from '../TableCell.vue'
+
+import BaseTheme from './TableCell.base.theme'
+
+const theme: TableCellTheme = BaseTheme
+
+export default theme

package/src/components/tag/Tag.vue

@@ -0,0 +1,80 @@
+<script lang="ts">
+const tagProps = {
+  ...useCommon.props(),
+  ...useColors.props('gray'),
+  tag: {
+    type: String,
+    default: 'span',
+  },
+  rounded: Boolean,
+  removable: Boolean,
+  outlined: Boolean,
+}
+
+export type TagProps = ExtractPublicPropTypes<typeof tagProps>
+
+type InternalClasses = 'wrapper' | 'loadingWrapper'
+export interface TagTheme extends ThemeComponent<TagProps, InternalClasses> {}
+
+export default {
+  name: 'XTag',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, type ExtractPublicPropTypes } from 'vue'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { closeIcon } from '../../common/icons'
+
+import XIcon from '../icon/Icon.vue'
+
+const props = defineProps(tagProps)
+
+defineEmits(['remove'])
+
+const closeIconSize = computed(() => {
+  if (props.size === 'xs') return 'xs'
+  else if (props.size === 'sm') return 'sm'
+  else if (props.size === 'lg') return 'md'
+  else if (props.size === 'xl') return 'lg'
+
+  return 'sm'
+})
+
+const { styles, classes, className } = useTheme('Tag', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)"
+    :style="styles"
+    :class="
+      [
+        className,
+        classes.wrapper,
+        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)]',
+        rounded ? 'rounded-full' : 'rounded'
+      ]"
+  >
+    <span
+      v-if="removable"
+      class="max-w-full truncate"
+    >
+      <slot></slot>
+      <x-icon
+        :size="closeIconSize"
+        :icon="closeIcon"
+        class="ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150"
+        @click="(e: Event) => $emit('remove', e)"
+      />
+    </span>
+
+    <slot v-else></slot>
+  </component>
+</template>

package/src/components/tag/__tests__/Tag.spec.ts

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

package/src/components/tag/index.ts

@@ -0,0 +1,2 @@
+export { default as XTag } from './Tag.vue'
+export type { TagProps, TagTheme } from './Tag.vue'

package/src/components/tag/theme/Tag.base.theme.ts

@@ -0,0 +1,34 @@
+import type { TagTheme } from '../Tag.vue'
+
+const theme: TagTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      let c = 'inline-flex items-center leading-none max-w-full'
+
+      if (props.size === 'xs') c += ' px-2 py-1 text-xs'
+      else if (props.size === 'sm') c += ' px-2 py-1 text-sm'
+      else if (props.size === 'lg') c += ' px-4 py-3 text-lg'
+      else if (props.size === 'xl') c += ' px-6 py-6 text-xl'
+      else c += ' px-3 py-2'
+
+      return c
+    },
+
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
+  },
+
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[100],
+      text: color[800],
+      border: color[800],
+      dark: {
+        text: props.outlined ? color[200] : color[800],
+      },
+    })
+  },
+}
+
+export default theme

package/src/components/tag/theme/Tag.carbon.theme.ts

@@ -0,0 +1,34 @@
+import type { TagTheme } from '../Tag.vue'
+
+const theme: TagTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      let c = 'inline-flex items-center leading-none max-w-full '
+
+      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-1 text-xs'
+      else if (props.size === 'lg') c += ' px-4 py-3'
+      else if (props.size === 'xl') c += ' px-5 py-5 text-lg'
+      else c += ' px-3 py-2 text-sm'
+
+      return c
+    },
+
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
+  },
+
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[200],
+      text: color[800],
+      border: color[800],
+      dark: {
+        bg: color[700],
+        text: props.outlined ? color[200] : color[800],
+      },
+    })
+  },
+}
+
+export default theme