@globalbrain/sefirot 2.0.0-draft.8 → 2.0.0

package/lib/composables/Dropdown.ts

@@ -1,119 +1,60 @@
-import Fuse from 'fuse.js'
-import { Ref, ComputedRef, ref, computed, isRef } from 'vue'
+import { MaybeRef } from '@vueuse/core'
 
-export interface Dropdown {
-  title?: string
-  search?: Search
-  closeOnClick: boolean
-  selected?: ComputedRef<any>
-  items: ComputedRef<Item[]>
-  callback? (item: Item): void
-}
-
-export interface Search {
-  placeholder: string
-  missing: string
-  value: Ref<string>
-  onInput (text: string | null): void
-}
-
-export type Item = TextItem | UserItem
-
-export interface ItemBase {
-  type: string
-  value: any
-  disabled?: boolean
-  callback?: Function
-}
-
-export type ItemType = 'text' | 'user'
+export type DropdownSection =
+  | DropdownSectionMenu
+  | DropdownSectionFilter
 
-export interface TextItem extends ItemBase {
-  type: 'text'
-  text: string
-}
+export type DropdownSectionType = 'menu' | 'filter'
 
-export interface UserItem extends ItemBase {
-  type: 'user'
-  avatar: string
-  name: string
+export interface DropdownSectionBase {
+  type: DropdownSectionType
 }
 
-export interface UseDropdownOptions {
-  title?: string
-  search?: UseDropdownSearchOptions
-  closeOnClick?: boolean
-  selected?: ComputedRef<any>
-  items: Item[] | ComputedRef<Item[]>
-  callback? (item: Item): void
+export interface DropdownSectionMenu extends DropdownSectionBase {
+  type: 'menu'
+  options: DropdownSectionMenuOption[]
 }
 
-export interface UseDropdownSearchOptions {
-  placeholder: string
-  missing: string
+export interface DropdownSectionMenuOption {
+  label: string
+  onClick(): void
 }
 
-export function useDropdown(dropdown: UseDropdownOptions): Dropdown {
-  const title = dropdown.title
-  const search = dropdown.search && useSearch(dropdown.search)
-  const closeOnClick = dropdown.closeOnClick ?? false
-  const selected = dropdown.selected
-  const items = useItems(dropdown.items, search)
-  const callback = dropdown.callback
-
-  return {
-    title,
-    search,
-    closeOnClick,
-    selected,
-    items,
-    callback
-  }
+export interface DropdownSectionFilter extends DropdownSectionBase {
+  type: 'filter'
+  search?: boolean
+  selected: MaybeRef<DropdownSectionFilterSelectedValue>
+  options: DropdownSectionFilterOption[]
+  onClick?(value: string | number | boolean): void
 }
 
-export function useSearch(search: UseDropdownSearchOptions): Search {
-  const placeholder = search.placeholder
-  const missing = search.missing
-  const value = ref('')
-
-  function onInput(text: string): void {
-    value.value = text
-  }
-
-  return {
-    placeholder,
-    missing,
-    value,
-    onInput
-  }
-}
-
-function useItems(items: Item[] | ComputedRef<Item[]>, search?: Search): ComputedRef<Item[]> {
-  const fuse = computed(() => {
-    return createFuse(isRef(items) ? items.value : items, search)
-  })
-
-  return computed(() => {
-    const value = search?.value.value
+export type DropdownSectionFilterSelectedValue =
+  | string
+  | number
+  | boolean
+  | null
+  | (string | number | boolean)[]
 
-    if (!value) {
-      return isRef(items) ? items.value : items
-    }
+export type DropdownSectionFilterOption =
+  | DropdownSectionFilterOptionText
+  | DropdownSectionFilterOptionAvatar
 
-    return fuse.value!.search(value).map(result => result.item)
-  })
+export interface DropdownSectionFilterOptionBase {
+  type?: 'text' | 'avatar'
+  label: string
+  value: string | number | boolean
+  onClick?(value: string | number | boolean): void
 }
 
-function createFuse <T extends Item>(items: T[], search?: Search): Fuse<T> | null {
-  return search
-    ? new Fuse(items, { keys: ['text', 'name'], threshold: 0.3 })
-    : null
+export interface DropdownSectionFilterOptionText extends DropdownSectionFilterOptionBase {
+  type?: 'text'
 }
 
-export function useTextItem(item: Omit<TextItem, 'type'>): TextItem {
-  return { type: 'text', ...item }
+export interface DropdownSectionFilterOptionAvatar extends DropdownSectionFilterOptionBase {
+  type: 'avatar'
+  image?: string | null
 }
 
-export function useUserItem(item: Omit<UserItem, 'type'>): UserItem {
-  return { type: 'user', ...item }
+export function createDropdown(section: DropdownSection[]): DropdownSection[] {
+  return section
 }

package/lib/composables/Form.ts

@@ -1,32 +1,34 @@
-import { Ref, ToRefs, reactive, computed } from 'vue'
-import { cloneDeep } from '../support/Utils'
-import { useSnackbar } from './Snackbar'
-import { Validation, ValidationArgs, useValidation } from './Validation'
+import cloneDeep from 'lodash-es/cloneDeep'
+import { Ref, reactive } from 'vue'
+import { useSnackbars } from '../stores/Snackbars'
+import { Validation, useValidation } from './Validation'
 
-export interface Form<D> {
-  data: D
-  validation: Ref<Validation>
+export interface Form<T extends Record<string, any>> {
+  data: T
+  validation: Ref<Validation<any, T>>
   init(): void
   reset(): void
   validate(): Promise<boolean>
   validateAndNotify(): Promise<boolean>
 }
 
-export interface UseFormOptions<D> {
-  data: D
-  rules?: Ref<any> | any
+export interface UseFormOptions<T extends Record<string, any>> {
+  data: T,
+  rules?: Record<string, any>
 }
 
-export function useForm<D>(options: UseFormOptions<D>): Form<D> {
-  const snackbar = useSnackbar()
+export function useForm<
+  T extends Record<string, any>
+>(options: UseFormOptions<T>): Form<T> {
+  const snackbars = useSnackbars()
 
   const initialData = cloneDeep(options.data)
 
-  const data = reactive(options.data as any)
+  const data = reactive(options.data)
 
   const rules = options.rules ?? {}
 
-  const validation = useValidation(data, rules as any)
+  const validation = useValidation(data, rules)
 
   function init(): void {
     Object.assign(data, initialData)
@@ -42,15 +44,16 @@ export function useForm<D>(options: UseFormOptions<D>): Form<D> {
   }
 
   async function validateAndNotify(): Promise<boolean> {
-    const result = await validate()
+    const valid = await validate()
 
-    if (!result) {
-      snackbar.push({
+    if (!valid) {
+      snackbars.push({
+        mode: 'danger',
         text: 'Form contains errors. Please correct them and try again.'
       })
     }
 
-    return result
+    return valid
   }
 
   return {

package/lib/composables/Grid.ts

@@ -0,0 +1,117 @@
+import { Ref, ref, watchEffect, onMounted, onUnmounted } from 'vue'
+
+export interface Grid {
+  container: Ref<HTMLElement | null>
+}
+
+export interface UseGridOptions {
+  tag?: string
+  class?: string
+  type?: 'fill' | 'fit'
+}
+
+type CssStyles = Partial<Record<keyof CSSStyleDeclaration, string>>
+
+export function useGrid(options: UseGridOptions): Grid {
+  const container: Ref<HTMLElement | null> = ref(null)
+
+  const spacerClass = options.class ? toClassName(options.class) : 'spacer'
+  const spacerTag = options.tag ?? 'div'
+  const type = options.type ?? 'fit'
+
+  const observer = new MutationObserver((_, observer) => {
+    observer.disconnect()
+
+    adjustSpacer()
+
+    observer.observe(container.value!, { childList: true })
+  })
+
+  watchEffect(() => {
+    observer.disconnect()
+
+    if (container.value) {
+      adjustSpacer()
+      observer.observe(container.value, { childList: true })
+    }
+  })
+
+  onMounted(() => {
+    window.addEventListener('resize', adjustSpacer)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', adjustSpacer)
+  })
+
+  function adjustSpacer() {
+    container.value?.querySelectorAll(`${toClassSelector(spacerClass)}`)
+      .forEach(n => n.remove())
+
+    const track = container.value?.firstElementChild
+
+    const containerWidth = container.value?.clientWidth ?? 0
+    const trackWidth = track?.clientWidth ?? 0
+    const trackCount = container.value?.childElementCount ?? 0
+
+    const perRow = trackWidth !== 0 ? Math.floor(containerWidth / trackWidth) : 0
+    const mod = perRow !== 0 ? trackCount % perRow : 0
+    const lack = mod !== 0 ? perRow - mod : 0
+
+    const fragment = createSpacers(lack, spacerTag, spacerClass, type)
+
+    container.value?.appendChild(fragment!)
+  }
+
+  return {
+    container
+  }
+}
+
+function toClassSelector(name: string) {
+  return name.startsWith('.') ? name : '.' + name
+}
+
+function toClassName(name: string) {
+  return name.startsWith('.') ? name.slice(1) : name
+}
+
+function createSpacers(size: number, tag: string, classes: string, type: 'fill' | 'fit') {
+  const fragment = document.createDocumentFragment()
+
+  if (size === 0) {
+    return fragment
+  }
+
+  if (type === 'fill') {
+    const spacer = createSpacer(tag, classes, { gridColumn: `span ${size}`})
+
+    fragment.appendChild(spacer)
+
+    return fragment
+  }
+
+  if (type === 'fit') {
+    for (let i = 0; i < size; i++) {
+      fragment.appendChild(createSpacer(tag, classes))
+    }
+  }
+
+  return fragment
+}
+
+function createSpacer(tag: string, classes?: string, styles?: CssStyles) {
+  const spacer = document.createElement(tag)
+
+  if (classes) {
+    spacer.className = classes
+  }
+
+  if (styles) {
+    for (const s in styles) {
+      spacer.style[s] = styles[s]!
+    }
+  }
+
+  return spacer
+}

package/lib/composables/Markdown.ts

@@ -0,0 +1,138 @@
+import MarkdownIt from 'markdown-it'
+import { onUnmounted, Ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { isCallbackUrl, isExternalUrl, LinkAttrs, linkPlugin } from './markdown/LinkPlugin'
+
+export type UseMarkdown = (source: string, inline: boolean) => string
+
+export interface UseMarkdownOptions extends MarkdownIt.Options {
+  linkAttrs?: LinkAttrs
+  config?: (md: MarkdownIt) => void
+}
+
+export function useMarkdown(options: UseMarkdownOptions = {}): UseMarkdown {
+  const md = new MarkdownIt({
+    linkify: true,
+    ...options
+  })
+
+  md.use(linkPlugin, {
+    target: '_blank',
+    rel: 'noopener noreferrer',
+    ...options.linkAttrs
+  })
+
+  if (options.config) {
+    options.config(md)
+  }
+
+  return (source, inline) => {
+    return inline ? md.renderInline(source) : md.render(source)
+  }
+}
+
+export interface UseLink {
+  addListeners(): void
+  removeListeners(): void
+  subscribe(cb: LinkSubscriber): () => void
+}
+
+export interface UseLinkOptions {
+  container: Ref<Element | null>
+  callbacks?: LinkCallback[]
+}
+
+export interface LinkSubscriberPayload {
+  event: Event
+  target: HTMLAnchorElement
+  isExternal: boolean
+  isCallback: boolean
+}
+
+export type LinkSubscriber = (payload: LinkSubscriberPayload) => void
+
+export type LinkCallback = () => void
+
+export function useLink({ container, callbacks }: UseLinkOptions): UseLink {
+  const router = useRouter()
+  const subscribers: LinkSubscriber[] = []
+
+  onUnmounted(() => removeListeners())
+
+  function handler(event: Event): void {
+    const target = event.target as HTMLAnchorElement
+    const href = target.getAttribute('href')!
+
+    if (!href) {
+      return
+    }
+
+    const isExternal = isExternalUrl(href)
+    const isCallback = isCallbackUrl(href)
+
+    subscribers.forEach(sub => sub({
+      event,
+      target,
+      isExternal,
+      isCallback
+    }))
+
+    if (isExternal) {
+      return
+    }
+
+    if (!event.defaultPrevented) {
+      event.preventDefault()
+    }
+
+    if (isCallback) {
+      const idx = parseInt(target.dataset.callbackId || '')
+      const callback = (callbacks ?? [])[idx]
+
+      if (!callback) {
+        throw new Error(`Callback not found at index: ${idx}`)
+      }
+
+      return callback()
+    }
+
+    router.push(href)
+  }
+
+  function addListeners(): void {
+    removeListeners()
+
+    if (container.value) {
+      findLinks(container.value).forEach((element) => {
+        element.addEventListener('click', handler)
+      })
+    }
+  }
+
+  function removeListeners(): void {
+    if (container.value) {
+      findLinks(container.value).forEach((element) => {
+        element.removeEventListener('click', handler)
+      })
+    }
+  }
+
+  function subscribe(fn: LinkSubscriber): () => void {
+    subscribers.push(fn)
+
+    return () => {
+      const idx = subscribers.indexOf(fn)
+      idx > -1 && subscribers.splice(idx, 1)
+    }
+  }
+
+  return {
+    addListeners,
+    removeListeners,
+    subscribe
+  }
+}
+
+function findLinks(target: Element) {
+  return target.querySelectorAll('a.SMarkdown-link')
+}

package/lib/composables/Step.ts

@@ -0,0 +1,7 @@
+export interface Step {
+  status: StepStatus
+  text?: string
+}
+
+export type StepStatus = 'upcoming' | 'active' | 'done' | 'failed'
+export type BarMode = 'mute' | 'active'

package/lib/composables/Table.ts

@@ -0,0 +1,103 @@
+import { MaybeRef } from '@vueuse/core'
+import { reactive } from 'vue'
+import { DropdownSection } from './Dropdown'
+
+export interface Table {
+  orders: string[]
+  columns: TableColumns
+  records?: Record<string, any>[]
+  total?: number
+  page?: number
+  perPage?: number
+  reset?: boolean
+  borderless?: boolean
+  loading?: boolean
+  onPrev?(): void
+  onNext?(): void
+  onReset?(): void
+}
+
+export interface TableColumns {
+  [name: string]: TableColumn
+}
+
+export interface TableColumn {
+  label: string
+  className?: string
+  dropdown?: DropdownSection[]
+  cell?: TableCell
+}
+
+export type TableCell =
+  | TableCellText
+  | TableCellDay
+  | TableCellPill
+  | TableCellAvatar
+  | TableCellAvatars
+
+export type TableCellType = 'text' | 'day' | 'pill' | 'avatar' | 'avatars'
+
+export interface TableCellBase {
+  type: TableCellType
+}
+
+export interface TableCellText extends TableCellBase {
+  type: 'text'
+  icon?: any
+  value?: string | ((value: any) => string)
+  link?(value: any, record: any): string
+  color?: 'neutral' | 'soft' | 'mute'
+  iconColor?: 'neutral' | 'soft' | 'mute'
+}
+
+export interface TableCellDay extends TableCellBase {
+  type: 'day'
+  format?: string
+  color?: 'neutral' | 'soft' | 'mute'
+}
+
+export interface TableCellPill extends TableCellBase {
+  type: 'pill'
+  value?: string | ((value: any) => string)
+  color?: TableCellPillColor | ((value: any) => TableCellPillColor)
+}
+
+export type TableCellPillColor = 'info' | 'success' | 'warning' | 'danger' | 'mute'
+
+export interface TableCellAvatar extends TableCellBase {
+  type: 'avatar'
+  image?(value: any, record: any): string | undefined
+  name?(value: any, record: any): string
+  link?(value: any, record: any): string
+  color?: 'neutral' | 'soft' | 'mute'
+}
+
+export interface TableCellAvatars extends TableCellBase {
+  type: 'avatars'
+  avatars(value: any, record: any): TableCellAvatarsOption[]
+  color?: 'neutral' | 'soft' | 'mute'
+}
+
+export interface TableCellAvatarsOption {
+  image?: string
+  name?: string
+}
+
+export interface UseTableOptions {
+  orders: string[]
+  columns: TableColumns
+  records?: MaybeRef<Record<string, any>[] | undefined>
+  total?: MaybeRef<number | undefined>
+  page?: MaybeRef<number | undefined>
+  perPage?: MaybeRef<number | undefined>
+  reset?: MaybeRef<boolean | undefined>
+  borderless?: boolean
+  loading?: MaybeRef<boolean | undefined>
+  onPrev?(): void
+  onNext?(): void
+  onReset?(): void
+}
+
+export function useTable(options: UseTableOptions): Table {
+  return reactive(options)
+}

package/lib/composables/Tooltip.ts

@@ -0,0 +1,91 @@
+import { Ref, ref } from 'vue'
+
+export type Position = 'top' | 'right' | 'bottom' | 'left'
+
+const SCREEN_PADDING = 16
+
+/**
+ * Prevent tooltip going off-screen by adjusting the position depending on
+ * the current window size. This only applies to position `top` and
+ * `bottom` since we only care about left and right of the screen.
+ */
+export function useTooltip(
+  content: Ref<HTMLElement | null>,
+  tip: Ref<HTMLElement | null>,
+  position: Position
+) {
+  const on = ref(false)
+
+  function show(): void {
+    setPosition()
+    setTimeout(() => { on.value = true })
+  }
+
+  function hide(): void {
+    setTimeout(() => { on.value = false })
+  }
+
+  function setPosition(): void {
+    if (shouldPosition()) {
+      doSetPosition()
+    }
+  }
+
+  function doSetPosition(): void {
+    // Reset position first so that we can get the original position.
+    resetPosition()
+
+    // Temporally show tip to get its size.
+    tip.value!.style.display = 'block'
+
+    const contentRect = content.value!.getBoundingClientRect()
+    const tipRect = tip.value!.getBoundingClientRect()
+
+    const contentRightX = contentRect.x + contentRect.width
+    const tipRightX = tipRect.x + tipRect.width
+
+    if (tipRect.x < 0) {
+      adjustLeftPosition(contentRect.x)
+    } else if (tipRightX > window.outerWidth) {
+      adjustRightPosition(contentRightX)
+    }
+
+    tip.value!.style.display = 'none'
+  }
+
+  function adjustLeftPosition(contentRectX: number): void {
+    tip.value!.style.left = '0'
+    tip.value!.style.right = 'auto'
+    setTransform(-contentRectX + SCREEN_PADDING)
+  }
+
+  function adjustRightPosition(contentRightX: number): void {
+    tip.value!.style.left = 'auto'
+    tip.value!.style.right = '0'
+    setTransform((window.outerWidth - contentRightX) - SCREEN_PADDING)
+  }
+
+  function resetPosition(): void {
+    tip.value!.style.left = ''
+    tip.value!.style.right = ''
+    tip.value!.style.transform = ''
+  }
+
+  function setTransform(x: number): void {
+    tip.value!.style.transform = `translate(${x}px, ${position === 'top' ? -100 : 100}%)`
+  }
+
+  function shouldPosition(): boolean {
+    if (!tip.value || !content.value) {
+      return false
+    }
+
+    return position === 'top' || position === 'bottom'
+  }
+
+  return {
+    on,
+    show,
+    hide
+  }
+}