@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/lib/components/STableColumn.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import IconDotsThree from '@iconify-icons/ph/dots-three'
+import { ref, computed, unref, watch, nextTick } from 'vue'
+import { DropdownSection } from '../composables/Dropdown'
+import { useFlyout } from '../composables/Flyout'
+import { isArray } from '../support/Utils'
+import SDropdown from './SDropdown.vue'
+import SIcon from './SIcon.vue'
+
+const props = defineProps<{
+  name: string
+  label: string
+  className?: string
+  dropdown?: DropdownSection[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'resize', value: string): void
+}>()
+
+const { container, isOpen, toggle } = useFlyout()
+
+let startWidth = 0
+let startPoint = 0
+
+const column = ref<HTMLElement | null>(null)
+const dialog = ref<HTMLElement | null>(null)
+const top = ref('')
+const left = ref('')
+
+const active = computed(() => {
+  return props.dropdown?.some((item) => {
+    if (item.type !== 'filter') {
+      return false
+    }
+
+    const selected = unref(item.selected)
+
+    if (!isArray(selected)) {
+      return selected !== null
+    }
+
+    if (!selected.length) {
+      return false
+    }
+
+    return item.options.some((option) => {
+      return selected.includes(option.value)
+    })
+  })
+})
+
+const buttonActive = computed(() => {
+  return isOpen.value || active.value
+})
+
+watch(isOpen, (value) => {
+  value ? adjustDialogPosition() : stopDialogPositionListener()
+})
+
+function grip(e: any) {
+  startWidth = column.value?.offsetWidth ?? 0
+  startPoint = e.pageX
+
+  document.addEventListener('mousemove', resize)
+  document.addEventListener('mouseup', stopResizeListener)
+}
+
+function resize(e: MouseEvent) {
+  const movedWidth = e.pageX - startPoint
+  const resized = startWidth + movedWidth
+
+  emit('resize', resized > -1 ? `${resized}px` : 'var(--table-col-width)')
+}
+
+function stopResizeListener() {
+  document.removeEventListener('mousemove', resize)
+  document.removeEventListener('mouseup', stopResizeListener)
+}
+
+async function adjustDialogPosition() {
+  if (!props.dropdown || !isOpen.value) {
+    return
+  }
+
+  startDialogPositionListener()
+
+  const rect = container.value.getBoundingClientRect()
+
+  await nextTick()
+
+  const dialogWidth = dialog.value?.offsetWidth ?? 0
+  const position = (window.innerWidth - rect.right) > dialogWidth ? 'right' : 'left'
+
+  top.value = `${rect.top + rect.height - 8}px`
+  left.value = position === 'right' ? `${rect.left - 4}px` : `${rect.right - dialogWidth - 4}px`
+}
+
+function startDialogPositionListener() {
+  window.addEventListener('scroll', adjustDialogPosition)
+  window.addEventListener('resize', adjustDialogPosition)
+}
+
+function stopDialogPositionListener() {
+  window.removeEventListener('scroll', adjustDialogPosition)
+  window.removeEventListener('resize', adjustDialogPosition)
+}
+</script>
+
+<template>
+  <div class="STableColumn STableCell" :class="[{ active }, className ?? `col-${name}`]" ref="column">
+    <div class="container">
+      <p class="label">{{ label }}</p>
+
+      <div v-if="dropdown" class="action" ref="container">
+        <button class="button" :class="{ active: buttonActive }" @click="toggle">
+          <SIcon :icon="IconDotsThree" class="icon" />
+        </button>
+
+        <transition name="fade">
+          <div v-if="isOpen" class="dialog" :style="{ top, left }" ref="dialog">
+            <SDropdown :sections="dropdown" />
+          </div>
+        </transition>
+      </div>
+
+      <div class="grip" @mousedown="grip" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableColumn {
+  border-top: 1px solid var(--c-divider-light);
+  background-color: var(--c-bg-soft);
+
+  .STableItem:first-child & {
+    padding-left: var(--table-padding-left);
+  }
+
+  .STableItem:last-child & {
+    border-right: 0;
+    padding-right: var(--table-padding-right);
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 16px;
+}
+
+.label {
+  flex-grow: 1;
+  line-height: 40px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.25s;
+
+  .STableColumn.active & {
+    color: var(--c-info);
+  }
+}
+
+.action {
+  position: relative;
+  padding-right: 6px;
+}
+
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  margin: 6px 0;
+  border-radius: 8px;
+  width: 28px;
+  height: 28px;
+  color: var(--c-text-2);
+  transition: background-color 0.25s, color 0.25s;
+
+  &:hover {
+    color: var(--c-text-1);
+    background-color: var(--c-bg-mute);
+  }
+
+  &.active {
+    color: var(--c-info);
+  }
+
+  .dark &:hover {
+    background-color: var(--c-bg);
+  }
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+}
+
+.dialog {
+  position: fixed;
+  z-index: var(--z-index-dropdown);
+  border-radius: 12px;
+  width: 256px;
+  box-shadow: var(--shadow-depth-3);
+  transition: opacity 0.25s, transform 0.25s;
+}
+
+.dialog.fade-enter-from,
+.dialog.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.grip {
+  position: relative;
+  right: -8px;
+  top: 0px;
+  bottom: 0px;
+  width: 16px;
+  z-index: 1;
+  position: absolute;
+  cursor: col-resize;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 7px;
+    width: 3px;
+    content: "";
+    transition: background-color 0.25s;
+  }
+
+  &:hover::before {
+    background-color: var(--c-info);
+  }
+
+  .STableItem:last-child .STableColumn & {
+    right: 0;
+    width: 8px;
+  }
+
+  .STableItem:last-child .STableColumn &::before {
+    left: 6px;
+    width: 2px;
+  }
+}
+</style>

package/lib/components/STableFooter.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import IconCaretLeft from '@iconify-icons/ph/caret-left-bold'
+import IconCaretRight from '@iconify-icons/ph/caret-right-bold'
+import { computed } from 'vue'
+import { format } from '../support/Num'
+import SIcon from './SIcon.vue'
+
+const props = defineProps<{
+  total?: number
+  page?: number
+  perPage?: number
+  borderless?: boolean
+  onPrev?(): void
+  onNext?(): void
+}>()
+
+const _total = computed(() => props.total ?? 0)
+const _page = computed(() => props.page ?? 0)
+const _perPage = computed(() => props.perPage ?? 0)
+
+const from = computed(() => {
+  return _page.value === 1 ? 1 : (_page.value - 1) * _perPage.value + 1
+})
+
+const to = computed(() => {
+  const value = _page.value * _perPage.value
+
+  return value > _total.value ? _total.value : value
+})
+
+const hasPrev = computed(() => {
+  return _page.value > 1
+})
+
+const hasNext = computed(() => {
+  return to.value < _total.value
+})
+</script>
+
+<template>
+  <div class="STableFooter" :class="{ borderless }">
+    <div class="container">
+      <p class="info">{{ format(from) }}–{{ format(to) }} of {{ format(_total) }}</p>
+
+      <div class="actions">
+        <button class="button prev" :class="{ active: hasPrev }" @click="onPrev">
+          <SIcon :icon="IconCaretLeft" class="icon" />
+        </button>
+        <button class="button next" :class="{ active: hasNext }" @click="onNext">
+          <SIcon :icon="IconCaretRight" class="icon" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableFooter {
+  border-radius: 0 0 6px 6px;
+  padding-top: 8px;
+  padding-right: var(--table-padding-right);
+  padding-bottom: 8px;
+  padding-left: var(--table-padding-left);
+  background-color: var(--c-bg-elv-up);
+
+  &.borderless {
+    border-radius: 0;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.info {
+  padding-right: 8px;
+  padding-top: 4px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--c-text-2);
+}
+
+.actions {
+  display: flex;
+  padding-right: 8px;
+}
+
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  color: var(--c-text-3);
+  cursor: not-allowed;
+  transition: color 0.25s, background-color 0.25s;
+
+  &.active {
+    color: var(--c-text-2);
+    cursor: pointer;
+  }
+
+  &.active:hover {
+    background-color: var(--c-bg-elv-down);
+  }
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/lib/components/STableHeader.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { format } from '../support/Num'
+
+defineProps<{
+  total?: number
+  reset?: boolean
+  borderless?: boolean
+  onReset?(): void
+}>()
+</script>
+
+<template>
+  <div class="STableHeader" :class="{ borderless }">
+    <div class="container">
+      <p class="total">
+        {{ format(total ?? 0) }} {{ (total ?? 0) > 1 ? 'records' : 'record' }}
+      </p>
+
+      <div v-if="reset" class="reset">
+        <button class="button" @click="onReset">
+          Reset filters
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableHeader {
+  padding-right: var(--table-padding-right);
+  padding-left: var(--table-padding-left);
+}
+
+.container {
+  display: flex;
+  padding: 0 16px;
+}
+
+.total {
+  padding: 13px 0 11px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--c-text-2);
+}
+
+.reset {
+  position: relative;
+  margin-left: 16px;
+
+  &::before {
+    display: inline-block;
+    margin-right: 16px;
+    width: 1px;
+    height: 16px;
+    background-color: var(--c-divider-light);
+    content: "";
+    transform: translateY(4px);
+  }
+}
+
+.button {
+  padding: 13px 0 11px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--c-info);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-info-dark);
+  }
+}
+</style>

package/lib/components/STableItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  width?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="STableItem"
+    :class="[`col-${name}`, { adjusted: width }]"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableItem {
+  position: var(--table-col-position, relative);
+  left: 0;
+  z-index: var(--table-col-z-index, auto);
+  flex-shrink: 0;
+  flex-grow: 1;
+  border-right: 1px solid var(--c-divider-light);
+  min-width: var(--table-col-width);
+  max-width: var(--table-col-max-width, var(--table-col-width));
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  &.adjusted {
+    width: v-bind(width) !important;
+    min-width: v-bind(width) !important;
+    max-width: v-bind(width) !important;
+  }
+}
+</style>

package/lib/components/STooltip.vue

@@ -0,0 +1,112 @@
+<template>
+  <component :is="tag" class="STooltip" @mouseenter="show" @mouseleave="hide">
+    <template v-if="text">
+      <span ref="content" class="STooltip-content">
+        <slot />
+      </span>
+
+      <transition name="fade">
+        <span v-show="on" ref="tip" class="STooltip-container" :class="classes">
+          <SMarkdown class="STooltip-tip" :content="text" inline />
+        </span>
+      </transition>
+    </template>
+
+    <template v-else>
+      <span class="STooltip-content">
+        <slot />
+      </span>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, ref } from 'vue'
+import { Position, useTooltip } from '../composables/Tooltip'
+import SMarkdown from './SMarkdown.vue'
+
+const props = defineProps({
+  tag: { type: String, default: 'span' },
+  text: { type: String, default: null },
+  position: { type: String as PropType<Position>, default: 'top' }
+})
+
+const tip = ref<HTMLElement | null>(null)
+const content = ref<HTMLElement | null>(null)
+const classes = computed(() => [props.position])
+const { on, show, hide } = useTooltip(content, tip, props.position)
+</script>
+
+<style lang="postcss" scoped>
+.STooltip {
+  position: relative;
+}
+
+.STooltip-container {
+  position: absolute;
+  display: block;
+  transition: opacity .25s;
+  z-index: var(--z-index-tooltip);
+}
+
+.STooltip-container.fade-enter,
+.STooltip-container.fade-leave-to {
+  opacity: 0;
+  &.top .STooltip-tip    { transform: translateY(8px); }
+  &.right .STooltip-tip  { transform: translateX(-8px); }
+  &.bottom .STooltip-tip { transform: translateY(-8px); }
+  &.left  .STooltip-tip  { transform: translateX(8px); }
+}
+
+.STooltip-container.top {
+  top: 0;
+  left: 50%;
+  padding-bottom: 8px;
+  transform: translate(-50%, -100%);
+}
+
+.STooltip-container.right {
+  top: 50%;
+  left: 100%;
+  transform: translate(8px, -50%);
+}
+
+.STooltip-container.bottom {
+  bottom: 0;
+  left: 50%;
+  padding-top: 8px;
+  transform: translate(-50%, 100%);
+}
+
+.STooltip-container.left {
+  top: 50%;
+  right: 100%;
+  transform: translate(-8px, -50%);
+}
+
+.STooltip-tip {
+  display: block;
+  border-radius: 4px;
+  padding: 12px;
+  width: max-content;
+  max-width: 288px;
+  line-height: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--c-text-dark-1);
+  background-color: rgba(0, 0, 0, .9);
+  transition: transform .25s;
+}
+
+.STooltip-tip :deep(a) {
+  color: var(--c-info);
+
+  &:hover {
+    color: var(--c-info-dark);
+  }
+}
+
+.STooltip-content {
+  white-space: nowrap;
+}
+</style>