@indielayer/ui 1.0.0-alpha.0 → 1.0.0-alpha.5

package/src/components/spinner/Spinner.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useCommon } from '../../composables/common'
+
+import XIcon from '../../components/icon/Icon.vue'
+
+export default defineComponent({
+  name: 'XSpinner',
+
+  components: {
+    XIcon,
+  },
+
+  props: {
+    ...useCommon.props(),
+    icon: String,
+  },
+
+  setup() {
+    const defaultIcon = `<g fill="none" fill-rule="evenodd">
+      <g transform="translate(1 1)" stroke-width="2">
+        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="0.5s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>`
+
+    return {
+      defaultIcon,
+    }
+  },
+})
+</script>
+
+<template>
+  <x-icon :icon="icon || defaultIcon" :size="size" view-box="0 0 38 38"/>
+</template>

package/src/components/tab/Tab.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { defineComponent, inject, reactive, computed, toRefs, ref, onMounted } from 'vue'
+import { injectTabKey } from '../../composables/keys'
+import { useCommon } from '../../composables/common'
+
+export default defineComponent({
+  name: 'XTab',
+
+  props: {
+    ...useCommon.props(),
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    to: String,
+    label: String,
+    icon: String,
+    disabled: Boolean,
+  },
+
+  setup(props) {
+    const cLabel = computed(() => props.label || props.value)
+    const teleportTo = ref(null)
+
+    const tabs = inject(injectTabKey, {
+      tabsContentRef: ref(null),
+      activateTab: () => {},
+      state: reactive({
+        active: null,
+        variant: 'line',
+        grow: false,
+      }),
+    })
+
+    onMounted(() => {
+      teleportTo.value = tabs.tabsContentRef.value
+    })
+
+    const state = reactive({
+      selected: computed(() => tabs.state.active === props.value),
+    })
+
+    function onClickTab() {
+      tabs.activateTab(props.value)
+    }
+
+    return {
+      ...toRefs(state),
+      variant: tabs.state.variant,
+      grow: tabs.state.grow,
+      cLabel,
+      tabs,
+      teleportTo,
+      onClickTab,
+    }
+  },
+})
+</script>
+
+<template>
+  <li :data-value="value" class="shrink-0 font-medium" :class="{ 'flex-1': grow }">
+    <component
+      :is="to ? 'router-link' : tag"
+      :to="to"
+      class="py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center"
+      :class="[
+        {
+          'px-8': variant === 'block',
+          'text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-dark-tabs-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="size"
+        :icon="icon"
+      >
+        <div class="flex items-center justify-center">
+          <x-icon v-if="icon" :icon="icon" :size="size" class="mr-1.5 shrink-0" />
+          <span>{{ cLabel }}</span>
+        </div>
+      </slot>
+      <Teleport v-if="selected && teleportTo" :to="teleportTo">
+        <slot></slot>
+      </Teleport>
+    </component>
+  </li>
+</template>

package/src/components/tab/TabGroup.vue

@@ -0,0 +1,151 @@
+<script lang="ts">
+import { defineComponent, reactive, computed, provide, type PropType, ref, watch, onMounted } from 'vue'
+import { injectTabKey } from '../../composables/keys'
+import { useCSS } from '../../composables/css'
+import { useColors } from '../../composables/colors'
+
+import { useResizeObserver, useThrottleFn } from '@vueuse/core'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+
+export default defineComponent({
+  name: 'XTabGroup',
+
+  components: {
+    XScroll,
+  },
+
+  props: {
+    ...useColors.props('primary'),
+    modelValue: [String, Number],
+    variant: {
+      type: String as PropType<'line' | 'block'>,
+      default: 'line',
+    },
+    ghost: Boolean,
+    grow: 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 state = reactive({
+      active: computed(() => props.modelValue),
+      variant: computed(() => props.variant),
+      ghost: computed(() => props.ghost),
+      grow: computed(() => props.grow),
+    })
+
+    function activateTab(tab: string | number) {
+      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(props.modelValue) })
+
+    watch(() => props.modelValue, (value) => {
+      updateTracker(value)
+    })
+
+    onMounted(() => {
+      updateTracker(props.modelValue)
+    })
+
+    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,
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div
+      ref="wrapperRef"
+      class="relative"
+      :style="style"
+    >
+      <x-scroll
+        ref="scrollRef"
+        :scrollbar="false"
+        horizontal
+        mousewheel
+        :class="{
+          'rounded-md': variant === 'block',
+          'bg-gray-50 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'
+          }"
+        >
+          <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'
+          }"
+        ></div>
+      </x-scroll>
+    </div>
+    <div ref="tabsContentRef"></div>
+  </div>
+</template>

package/src/components/table/Table.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+
+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 XSpinner from '../spinner/Spinner.vue'
+
+export type Header = {
+  sortable?: boolean,
+  sort?: string[],
+  align?: Align,
+  value: string,
+  text: string,
+}
+
+export default defineComponent({
+  name: 'XTable',
+
+  components: {
+    TableHead,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableCell,
+    XSpinner,
+  },
+
+  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,
+    },
+  },
+
+  emits: ['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(',')
+
+        if (headerValue === value) {
+          if (parseInt(order) > 0) return 1
+          else return -1
+        }
+      }
+
+      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`)
+
+      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)
+
+      return result ?? ''
+    }
+
+    return {
+      getSort,
+      getValue,
+      sortHeader,
+    }
+  },
+})
+</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"
+        @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"
+          :text-align="header.align"
+          :dense="dense"
+          :fixed="fixed"
+        >
+          <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>
+</template>

package/src/components/table/TableBody.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XTableBody',
+})
+</script>
+
+<template>
+  <tbody>
+    <slot></slot>
+  </tbody>
+</template>

package/src/components/table/TableCell.vue

@@ -0,0 +1,78 @@
+<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',
+  ],
+}
+
+export default defineComponent({
+  name: 'XTableCell',
+
+  validators,
+
+  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),
+    },
+  },
+
+  setup(props) {
+    if (props.truncate && !props.fixed) {
+      console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
+    }
+  },
+})
+</script>
+
+<template>
+  <td
+    class="last:pr-0 px-3"
+    :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,
+      },
+    ]"
+  >
+    <slot></slot>
+  </td>
+</template>

package/src/components/table/TableHead.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XTableHead',
+})
+</script>
+
+<template>
+  <thead class="align-bottom">
+    <tr class="text-sm text-gray-600 dark:text-gray-400 border-b">
+      <slot></slot>
+    </tr>
+  </thead>
+</template>

package/src/components/table/TableHeader.vue

@@ -0,0 +1,94 @@
+<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',
+
+  validators,
+
+  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,
+  },
+})
+</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>