@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/lib/components/STable.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { reactive, ref, computed, watch, toRefs } from 'vue'
+import { Table } from '../composables/Table'
+import SSpinner from './SSpinner.vue'
+import STableCell from './STableCell.vue'
+import STableColumn from './STableColumn.vue'
+import STableFooter from './STableFooter.vue'
+import STableHeader from './STableHeader.vue'
+import STableItem from './STableItem.vue'
+
+const props = defineProps<{
+  options: Table
+}>()
+
+const {
+  orders,
+  columns,
+  records,
+  total,
+  page,
+  perPage,
+  reset,
+  borderless,
+  loading,
+  onPrev,
+  onNext,
+  onReset,
+} = toRefs(props.options)
+
+const head = ref<HTMLElement | null>(null)
+const body = ref<HTMLElement | null>(null)
+
+let headLock = false
+let bodyLock = false
+
+const colWidths = reactive<Record<string, string>>({})
+
+const showHeader = computed(() => {
+  return total?.value !== undefined
+})
+
+const showFooter = computed(() => {
+  return !loading?.value && page?.value && total?.value
+})
+
+watch(() => records?.value, () => {
+  headLock = true
+  bodyLock = true
+}, { flush: 'pre' })
+
+watch(() => records?.value, () => {
+  syncScroll(head.value, body.value)
+  headLock = false
+  bodyLock = false
+}, { flush: 'post' })
+
+function syncHeadScroll() {
+  bodyLock || syncScroll(head.value, body.value)
+}
+
+function syncBodyScroll() {
+  headLock || syncScroll(body.value, head.value)
+}
+
+function syncScroll(from: HTMLElement | null, to: HTMLElement | null) {
+  if (from && to) {
+    to.scrollLeft = from.scrollLeft
+  }
+}
+
+function lockHead(value: boolean) {
+  headLock = value
+}
+
+function lockBody(value: boolean) {
+  bodyLock = value
+}
+
+function updateColWidth(key: string, value: string) {
+  colWidths[key] = value
+}
+</script>
+
+<template>
+  <div class="STable" :class="{ borderless }" ref="el">
+    <div class="box">
+      <STableHeader
+        v-if="showHeader"
+        :total="total"
+        :reset="reset"
+        :borderless="borderless"
+        :on-reset="onReset"
+      />
+
+      <div class="table" role="grid">
+        <div
+          class="container head"
+          ref="head"
+          @mouseenter="lockHead(true)"
+          @mouseleave="lockHead(false)"
+          @scroll="syncHeadScroll"
+        >
+          <div class="block">
+            <div class="row">
+              <STableItem v-for="key in orders" :key="key" :name="key" :width="colWidths[key]">
+                <STableColumn
+                  :name="key"
+                  :label="columns[key].label"
+                  :dropdown="columns[key].dropdown"
+                  @resize="(value) => updateColWidth(key, value)"
+                />
+              </STableItem>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="!loading && records && records.length"
+          class="container body"
+          ref="body"
+          @mouseenter="lockBody(true)"
+          @mouseleave="lockBody(false)"
+          @scroll="syncBodyScroll"
+        >
+          <div class="block">
+            <div v-for="(record, rIndex) in records" :key="rIndex" class="row">
+              <STableItem v-for="key in orders" :key="key" :name="key" :width="colWidths[key]">
+                <STableCell
+                  :name="key"
+                  :cell="columns[key].cell"
+                  :value="record[key]"
+                  :record="record"
+                  :records="records"
+                />
+              </STableItem>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="!loading && records && !records.length" class="missing">
+        <p class="missing-text">
+          No results matched your search.
+        </p>
+      </div>
+
+      <div v-if="loading" class="loading">
+        <div class="loading-icon">
+          <SSpinner class="loading-svg" />
+        </div>
+      </div>
+
+      <STableFooter
+        v-if="showFooter"
+        :total="total"
+        :page="page"
+        :per-page="perPage"
+        :borderless="borderless"
+        :on-prev="onPrev"
+        :on-next="onNext"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.box {
+  position: relative;
+  border: 1px solid var(--c-divider-light);
+  border-radius: 6px;
+  width: 100%;
+
+  .STable.borderless & {
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+}
+
+.table {
+  position: relative;
+  min-width: 100%;
+  white-space: nowrap;
+}
+
+.container {
+  position: static;
+  width: 100%;
+  min-width: 100%;
+  overflow-x: auto;
+
+  &.head {
+    position: var(--table-head-position, static);
+    top: var(--table-head-top, auto);
+    z-index: 20;
+    background-color: var(--bg-elv);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+.block {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.row {
+  display: flex;
+  border-bottom: 1px solid var(--c-divider-light);
+}
+
+.missing {
+  border-radius: 0 0 6px 6px;
+  padding: 48px 32px;
+  text-align: center;
+  background-color: var(--c-bg-elv-up);
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--c-text-3);
+}
+
+.loading {
+  border-radius: 0 0 6px 6px;
+  padding: 64px 32px;
+  background-color: var(--c-bg-elv-up);
+}
+
+.loading-icon {
+  margin: 0 auto;
+  width: 48px;
+  height: 48px;
+}
+
+.loading-svg {
+  width: 48px;
+  height: 48px;
+  color: var(--c-text-1);
+}
+</style>

package/lib/components/STableCell.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { TableCell } from '../composables/Table'
+import STableCellAvatar from './STableCellAvatar.vue'
+import STableCellAvatars from './STableCellAvatars.vue'
+import STableCellDay from './STableCellDay.vue'
+import STableCellPill from './STableCellPill.vue'
+import STableCellText from './STableCellText.vue'
+
+defineProps<{
+  name: string
+  cell?: TableCell
+  value: any
+  record: any
+  records: Record<string, any>
+}>()
+</script>
+
+<template>
+  <div class="STableCell" :class="[`col-${name}`]">
+    <STableCellText
+      v-if="!cell || cell.type === 'text'"
+      :value="value"
+      :record="record"
+      :icon="cell?.icon"
+      :getter="cell?.value"
+      :link="cell?.link"
+      :color="cell?.color"
+      :icon-color="cell?.iconColor"
+    />
+    <STableCellDay
+      v-else-if="cell.type === 'day'"
+      :value="value"
+      :record="record"
+      :format="cell.format"
+      :color="cell.color"
+    />
+    <STableCellPill
+      v-else-if="cell.type === 'pill'"
+      :value="value"
+      :record="record"
+      :getter="cell.value"
+      :color="cell.color"
+    />
+    <STableCellAvatar
+      v-else-if="cell.type === 'avatar'"
+      :value="value"
+      :record="record"
+      :image="cell.image"
+      :name="cell.name"
+      :link="cell.link"
+      :color="cell.color"
+    />
+    <STableCellAvatars
+      v-else-if="cell.type === 'avatars'"
+      :value="value"
+      :record="record"
+      :avatars="cell.avatars"
+      :color="cell.color"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCell {
+  background-color: var(--c-bg-elv-up);
+  transition: background-color 0.1s;
+  overflow: hidden;
+
+  .row:hover & {
+    background-color: var(--c-bg-elv);
+  }
+
+  .STableItem:first-child & {
+    padding-left: var(--table-padding-left);
+  }
+
+  .STableItem:last-child & {
+    border-right: 0;
+    padding-right: var(--table-padding-right);
+  }
+}
+</style>

package/lib/components/STableCellAvatar.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SAvatar from './SAvatar.vue'
+import SLink from './SLink.vue'
+
+const props = defineProps<{
+  value?: any
+  record?: any
+  image?(value: any, record: any): string | undefined
+  name?(value: any, record: any): string
+  link?(value: any, record: any): string
+  color?: 'neutral' | 'soft' | 'mute'
+}>()
+
+const _image = computed(() => props.image?.(props.value, props.record))
+const _name = computed(() => props.name?.(props.value, props.record))
+</script>
+
+<template>
+  <div class="STableCellAvatar" :class="[{ link}, color]">
+    <SLink class="container" :href="link?.(value, record)">
+      <div v-if="_image" class="avatar">
+        <SAvatar size="mini" :avatar="_image" :name="_name" />
+      </div>
+      <span v-if="_name" class="name">{{ _name }}</span>
+    </SLink>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellAvatar {
+  min-height: 40px;
+}
+
+.container {
+  display: flex;
+  padding: 8px 16px;
+}
+
+.avatar {
+  flex-shrink: 0;
+}
+
+.name {
+  display: inline-block;
+  margin-left: 12px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.25s;
+
+  .STableCellAvatar.soft & { color: var(--c-text-2); }
+  .STableCellAvatar.mute & { color: var(--c-text-3); }
+
+  .STableCellAvatar.neutral.link & { color: var(--c-tex-1); }
+  .STableCellAvatar.soft.link &    { color: var(--c-text-2); }
+  .STableCellAvatar.mute.link &    { color: var(--c-text-3); }
+
+  .STableCellAvatar.link &       { color: var(--c-info); }
+  .STableCellAvatar.link:hover & { color: var(--c-info-dark); }
+
+  .STableCellAvatar.neutral.link:hover & { color: var(--c-info); }
+  .STableCellAvatar.soft.link:hover &    { color: var(--c-info); }
+  .STableCellAvatar.mute.link:hover &    { color: var(--c-info); }
+}
+</style>

package/lib/components/STableCellAvatars.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TableCellAvatarsOption } from '../composables/Table'
+import SAvatar from './SAvatar.vue'
+
+const props = defineProps<{
+  value?: any
+  record?: any
+  avatars(value: any, record: any): TableCellAvatarsOption[]
+  color?: 'neutral' | 'soft' | 'mute'
+}>()
+
+const _avatars = computed(() => {
+  return props.avatars(props.value, props.record)
+})
+
+const displayAvatars = computed(() => {
+  return _avatars.value.slice(0, 3)
+})
+
+const names = computed(() => {
+  if (_avatars.value.length === 0) {
+    return null
+  }
+
+  if (_avatars.value.length === 1) {
+    return _avatars.value[0].name
+  }
+
+  if (_avatars.value.length === 2) {
+    return `${_avatars.value[0].name} and ${_avatars.value[1].name}`
+  }
+
+  return `${_avatars.value[0].name} +${_avatars.value.length - 1}`
+})
+</script>
+
+<template>
+  <div class="STableCellAvatars" :class="[color]">
+    <div class="container">
+      <div class="avatars">
+        <div v-for="(avatar, index) in displayAvatars" :key="index" class="avatar">
+          <div class="avatar-box">
+            <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" />
+          </div>
+        </div>
+      </div>
+      <div class="names">
+        {{ names }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellAvatars {
+  min-height: 40px;
+}
+
+.container {
+  display: flex;
+  gap: 16px;
+  padding: 6px 16px 6px 12px;
+}
+
+.avatars {
+  display: flex;
+}
+
+.avatar {
+  position: relative;
+  width: 20px;
+
+  &:nth-child(1) { z-index: 30; }
+  &:nth-child(2) { z-index: 20; }
+  &:nth-child(3) { z-index: 10; }
+}
+
+.avatar-box {
+  border: 2px solid var(--c-bg-elv-up);
+  border-radius: 50%;
+  width: 28px;
+}
+
+.names {
+  line-height: 28px;
+  font-size: 12px;
+  font-weight: 500;
+
+  .STableCellAvatars.soft & { color: var(--c-text-2); }
+  .STableCellAvatars.mute & { color: var(--c-text-3); }
+}
+</style>

package/lib/components/STableCellDay.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Day } from '../support/Day'
+
+defineProps<{
+  value?: Day | null
+  record: any
+  format?: string
+  color?: 'neutral' | 'soft' | 'mute'
+}>()
+</script>
+
+<template>
+  <div class="STableCellDay" :class="[color ?? 'neutral']">
+    <div v-if="value" class="value">
+      {{ value.format(format ?? 'YYYY / MM / DD HH:mm:ss') }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellDay {
+  padding: 8px 16px;
+  min-height: 40px;
+}
+
+.value {
+  line-height: 24px;
+  font-family: var(--font-family-number);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.25s;
+
+  .STableCellDay.neutral & { color: var(--c-text-1); }
+  .STableCellDay.soft &    { color: var(--c-text-2); }
+  .STableCellDay.mute &    { color: var(--c-text-3); }
+}
+</style>

package/lib/components/STableCellPill.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TableCellPillColor } from '../composables/Table'
+
+const props = defineProps<{
+  value?: any
+  record: any
+  getter?: string | ((value: any) => string)
+  color?: TableCellPillColor | ((value: any) => TableCellPillColor)
+}>()
+
+const _value = computed(() => {
+  if (props.getter === undefined) {
+    return props.value
+  }
+
+  return typeof props.getter === 'string'
+    ? props.getter
+    : props.getter(props.value)
+})
+
+const _color = computed(() => {
+  if (props.color === undefined) {
+    return null
+  }
+
+  return typeof props.color === 'string'
+    ? props.color
+    : props.color(props.value)
+})
+</script>
+
+<template>
+  <div class="STableCellPill" :class="[_color ?? 'mute']">
+    <div class="value">{{ _value }}</div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellPill {
+  padding: 9px 16px 10px;
+  min-height: 40px;
+}
+
+.value {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-radius: 14px;
+  padding: 0 8px;
+  line-height: 18px;
+  font-size: 12px;
+  font-weight: 500;
+
+  .STableCellPill.info & {
+    border-color: var(--c-info);
+    color: var(--c-info);
+    background-color: var(--c-info-bg);
+  }
+
+  .STableCellPill.success & {
+    border-color: var(--c-success);
+    color: var(--c-success);
+    background-color: var(--c-success-bg);
+  }
+
+  .STableCellPill.warning & {
+    border-color: var(--c-warning);
+    color: var(--c-warning);
+    background-color: var(--c-warning-bg);
+  }
+
+  .STableCellPill.danger & {
+    border-color: var(--c-danger);
+    color: var(--c-danger);
+    background-color: var(--c-danger-bg);
+  }
+
+  .STableCellPill.mute & {
+    border-color: var(--c-divider);
+    color: var(--c-text-2);
+    background-color: var(--c-bg-elv);
+  }
+}
+</style>

package/lib/components/STableCellText.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SIcon from './SIcon.vue'
+import SLink from './SLink.vue'
+
+const props = defineProps<{
+  value?: any
+  record: any
+  icon?: any
+  getter?: string | ((value: any) => string)
+  color?: 'neutral' | 'soft' | 'mute'
+  iconColor?: 'neutral' | 'soft' | 'mute'
+  link?(value: any, record: any): string
+}>()
+
+const _value = computed(() => {
+  if (props.getter === undefined) {
+    return props.value
+  }
+
+  return typeof props.getter === 'string'
+    ? props.getter
+    : props.getter(props.value)
+})
+</script>
+
+<template>
+  <div class="STableCellText" :class="[{ link }, color ?? 'neutral']">
+    <SLink v-if="_value" class="container" :href="link?.(value, record)">
+      <div v-if="icon" class="icon" :class="[iconColor ?? color ?? 'neutral']">
+        <SIcon :icon="icon" class="svg" />
+      </div>
+      <div class="text" :class="[color ?? 'neutral']">
+        {{ _value }}
+      </div>
+    </SLink>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellText {
+  padding: 8px 16px;
+  min-height: 40px;
+}
+
+.container {
+  display: flex;
+  gap: 4px;
+}
+
+.text {
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.25s;
+
+  &.neutral { color: var(--c-text-1); }
+  &.soft    { color: var(--c-text-2); }
+  &.mute    { color: var(--c-text-3); }
+
+  .STableCellText.link &       { color: var(--c-info); }
+  .STableCellText.link:hover & { color: var(--c-info-dark); }
+
+  .STableCellText.link &.neutral       { color: var(--c-text-1); }
+  .STableCellText.link:hover &.neutral { color: var(--c-info); }
+  .STableCellText.link &.soft          { color: var(--c-text-2); }
+  .STableCellText.link:hover &.soft    { color: var(--c-info); }
+  .STableCellText.link &.mute          { color: var(--c-text-3); }
+  .STableCellText.link:hover &.mute    { color: var(--c-info); }
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  transition: color 0.25s;
+
+  &.neutral { color: var(--c-text-1); }
+  &.soft    { color: var(--c-text-2); }
+  &.mute    { color: var(--c-text-3); }
+
+  .STableCellText.link &       { color: var(--c-info); }
+  .STableCellText.link:hover & { color: var(--c-info-dark); }
+
+  .STableCellText.link &.neutral       { color: var(--c-text-1); }
+  .STableCellText.link:hover &.neutral { color: var(--c-info); }
+  .STableCellText.link &.soft          { color: var(--c-text-2); }
+  .STableCellText.link:hover &.soft    { color: var(--c-info); }
+  .STableCellText.link &.mute          { color: var(--c-text-3); }
+  .STableCellText.link:hover &.mute    { color: var(--c-info); }
+}
+
+.svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+</style>