@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/components/table/Table.vue

@@ -1,174 +1,163 @@
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue'
+export default { name: 'XTable' }
+</script>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { useTheme } from '../../composables/theme'
 
-import TableHead from './TableHead.vue'
-import TableHeader, { type Sort, type Align } from './TableHeader.vue'
-import TableBody from './TableBody.vue'
-import TableRow from './TableRow.vue'
-import TableCell from './TableCell.vue'
+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
+  sortable?: boolean
+  sort?: string[]
+  align?: Align
+  value?: string
+  text?: string
+  width?: string | number
 }
 
-export default defineComponent({
-  name: 'XTable',
-
-  components: {
-    TableHead,
-    TableHeader,
-    TableBody,
-    TableRow,
-    TableCell,
-    XSpinner,
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Header>>,
+    default: () => [],
   },
-
-  props: {
-    headers: {
-      type: Array as PropType<Array<Header>>,
-      default: () => [],
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    sort: {
-      type: Array as PropType<Array<string>>,
-      default: () => [],
-    },
-    loading: Boolean,
-    dense: Boolean,
-    fixed: Boolean,
-    striped: Boolean,
-    pointer: Boolean,
-    scrollable: {
-      type: Boolean,
-      default: true,
-    },
-    stickyHeader: {
-      type: Boolean,
-      default: true,
-    },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  sort: {
+    type: Array as PropType<Array<string>>,
+    default: () => [],
+  },
+  loading: Boolean,
+  dense: Boolean,
+  fixed: Boolean,
+  striped: Boolean,
+  pointer: Boolean,
+  scrollable: {
+    type: Boolean,
+    default: true,
   },
+  stickyHeader: {
+    type: Boolean,
+    default: true,
+  },
+})
 
-  emits: ['update:sort', 'click-row'],
+const emit = defineEmits(['update:sort', 'click-row'])
 
-  setup(props, { emit }) {
-    function getSort(headerValue: string, sort: string[]): Sort {
-      for (let i = 0; i < sort.length; i++) {
-        const { 0: value, 1: order } = sort[i].split(',')
+function getSort(headerValue: string | undefined, sort: string[]): Sort {
+  if (!headerValue) return undefined
 
-        if (headerValue === value) {
-          if (parseInt(order) > 0) return 1
-          else return -1
-        }
-      }
+  for (let i = 0; i < sort.length; i++) {
+    const { 0: value, 1: order } = sort[i].split(',')
 
-      return undefined
+    if (headerValue === value) {
+      if (parseInt(order) > 0) return 1
+      else return -1
     }
+  }
 
-    function sortHeader(header: Header) {
-      // 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
-          }
-        }
+  return undefined
+}
+
+function sortHeader(header: Header) {
+  // 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`)
+  if (!exists) sort.push(`${header.value},-1`)
 
-      emit('update:sort', sort)
-    }
+  emit('update:sort', sort)
+}
 
-    function getValue(item: any, path: string | string[]) {
-      if (!path) return ''
-      const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
-      const result = pathArray?.reduce((prevObj: any, key: string) => prevObj && prevObj[key], item)
+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 ?? ''
-    }
+  return result ?? ''
+}
 
-    return {
-      getSort,
-      getValue,
-      sortHeader,
-    }
-  },
-})
+const { styles, classes, className } = useTheme('table', theme, props)
 </script>
 
 <template>
-  <table
-    class="w-full relative"
-    :class="[
-      {
-        'overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table': scrollable,
-        'relative': stickyHeader,
-        'table-fixed': fixed,
-      }
-    ]"
-  >
-    <table-head>
-      <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 }}
-      </table-header>
-    </table-head>
-    <table-body>
-      <table-row
-        v-for="(item, index) in items"
-        :key="index"
-        :pointer="pointer"
-        :striped="striped"
-        @click="$emit('click-row', item)"
-      >
-        <table-cell
-          v-for="(header, index2) in headers"
-          :key="index2"
+  <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"
-          :dense="dense"
-          :fixed="fixed"
+          :sort="getSort(header.value, sort)"
+          :sortable="header.sortable"
+          :width="header.width"
+          @click="header.sortable ? sortHeader(header) : null"
         >
-          <slot :name="`item-${header.value}`" :item="item">
-            {{ getValue(item, header.value) }}
-          </slot>
-        </table-cell>
-      </table-row>
-    </table-body>
-    <div
-      v-if="loading"
-      class="absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50"
-    >
-      <x-spinner size="lg"/>
-    </div>
-  </table>
+          {{ header.text }}
+        </x-table-header>
+      </x-table-head>
+      <x-table-body>
+        <x-table-row
+          v-for="(item, index) in items"
+          :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.vue → TableBody.tsx}

@@ -1,13 +1,8 @@
-<script lang="ts">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'XTableBody',
+  setup(props, { slots }) {
+    return () => <tbody>{slots.default?.()}</tbody>
+  },
 })
-</script>
-
-<template>
-  <tbody>
-    <slot></slot>
-  </tbody>
-</template>

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

@@ -0,0 +1,27 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props }: ThemeParams) => {
+      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
+    },
+  },
+}

package/src/components/table/TableCell.vue

@@ -1,76 +1,48 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
-
 const validators = {
-  textAlign: [
-    null,
-    'left',
-    'center',
-    'right',
-    'justify',
-  ],
-  verticalAlign: [
-    null,
-    'baseline',
-    'bottom',
-    'middle',
-    'text-bottom',
-    'text-top',
-    'top',
-  ],
+  textAlign: [null,'left','center','right','justify'],
+  verticalAlign: [null,'baseline','bottom','middle','text-bottom','text-top','top'],
 }
 
-export default defineComponent({
+export default {
   name: 'XTableCell',
-
   validators,
+}
+</script>
 
-  props: {
-    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),
-    },
-  },
+<script setup lang="ts">
+import { useTheme } from '../../composables/theme'
 
-  setup(props) {
-    if (props.truncate && !props.fixed) {
-      console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
-    }
+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),
   },
 })
+
+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('table-cell', theme, props)
 </script>
 
 <template>
   <td
-    class="last:pr-0 px-3"
+    :style="styles"
     :class="[
-      {
-        // density
-        'py-2': dense,
-        'py-4': !dense,
-        // text-align
-        'text-left': textAlign === 'left',
-        'text-center': textAlign === 'center',
-        'text-right': textAlign === 'right',
-        'text-justify': textAlign === 'justify',
-        // vertical-align
-        'align-baseline': verticalAlign === 'baseline',
-        'align-bottom': verticalAlign === 'bottom',
-        'align-middle': verticalAlign === 'middle',
-        'align-text-bottom': verticalAlign === 'text-bottom',
-        'align-text-top': verticalAlign === 'text-top',
-        'align-top': verticalAlign === 'top',
-        // truncate
-        'truncate': truncate && fixed,
-      },
+      className,
+      classes.wrapper,
     ]"
   >
     <slot></slot>

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

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

package/src/components/table/TableRow.vue

@@ -1,25 +1,34 @@
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue'
-
 const validators = {
   verticalAlign: ['baseline','bottom','middle','text-bottom','text-top','top'],
 }
 
-export default defineComponent({
-  name: 'XTableRow',
+export default { name: 'XTableRow', validators }
+</script>
 
-  validators,
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
 
-  props: {
-    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 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>
@@ -28,14 +37,8 @@ export default defineComponent({
       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,
-        // vertical-align
-        'align-baseline': verticalAlign === 'baseline',
-        'align-bottom': verticalAlign === 'bottom',
-        'align-middle': verticalAlign === 'middle',
-        'align-text-bottom': verticalAlign === 'text-bottom',
-        'align-text-top': verticalAlign === 'text-top',
-        'align-top': verticalAlign === 'top',
       },
+      alignClass
     ]"
   >
     <slot></slot>

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/tag/Tag.theme.ts

@@ -0,0 +1,32 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props, data }: ThemeParams) => {
+      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 }: ThemeParams) => {
+    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],
+      },
+    })
+  },
+}