@globalbrain/sefirot 3.44.0 → 3.46.0

package/lib/components/SActionList.vue

@@ -18,6 +18,8 @@ defineProps<{
       :label="item.label"
       :text="item.text"
       :link="item.link"
+      :disabled="item.disabled"
+      :tooltip="item.tooltip"
       :on-click="item.onClick"
     />
   </div>

package/lib/components/SActionListItem.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { computed } from 'vue'
-import SIcon from './SIcon.vue'
-import SLink from './SLink.vue'
+import SButton, { type Tooltip } from './SButton.vue'
 
 export interface ActionListItem {
   leadIcon?: IconifyIcon
   link?: string
   label?: string
   disabled?: boolean
-  onClick?(): void
+  tooltip?: Tooltip
+  onClick?: () => void
 
   /** @deprecated Use `:label` instead. */
   text?: string
@@ -20,54 +20,36 @@ const props = defineProps<ActionListItem>()
 const _label = computed(() => {
   return props.label ?? props.text
 })
+
+const _tooltip = computed<Tooltip | undefined>(() => {
+  return props.tooltip ? { display: 'block', ...props.tooltip } : undefined
+})
 </script>
 
 <template>
-  <component
-    :is="link ? SLink : 'button'"
-    class="SActionList"
-    :href="link"
-    @click="() => onClick?.()"
-  >
-    <span v-if="leadIcon" class="lead-icon">
-      <SIcon class="lead-icon-svg" :icon="leadIcon" />
-    </span>
-    <span class="text">{{ _label }}</span>
-  </component>
+  <div class="SActionListItem">
+    <SButton
+      block
+      size="small"
+      type="text"
+      :icon="leadIcon"
+      :label="_label"
+      :href="link"
+      :disabled="disabled"
+      :tooltip="_tooltip"
+      @click="onClick"
+    />
+  </div>
 </template>
 
 <style scoped lang="postcss">
-.SActionList {
-  display: flex;
-  gap: 8px;
-  border-radius: 6px;
-  padding: 4px 8px;
-  width: 100%;
-  text-align: left;
-  line-height: 24px;
-  font-size: 14px;
-  transition: background-color 0.25s;
-
-  &:hover {
-    background-color: var(--c-bg-mute-1);
-  }
+.SActionListItem {
+  --button-font-size: 14px;
 
-  &:active {
-    background-color: var(--c-bg-mute-2);
-    transition: background-color 0.1s;
+  :deep(.SButton),
+  :slotted(.SButton) {
+    justify-content: flex-start;
+    font-weight: 400;
   }
 }
-
-.lead-icon {
-  display: flex;
-  align-items: center;
-  height: 24px;
-  flex-shrink: 0;
-  color: var(--c-text-2);
-}
-
-.lead-icon-svg {
-  width: 16px;
-  height: 16px;
-}
 </style>

package/lib/components/SActionMenu.vue

@@ -20,7 +20,7 @@ const props = defineProps<{
   block?: boolean
   loading?: boolean
   disabled?: boolean
-  tooltip?: Tooltip
+  tooltip?: string | Tooltip
   options: DropdownSection[]
 }>()
 

package/lib/components/SAvatar.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type Position } from '../composables/Tooltip'
+import SFragment from './SFragment.vue'
+import STooltip from './STooltip.vue'
 
 export type Size =
   | 'nano'
@@ -14,6 +17,7 @@ const props = defineProps<{
   size?: Size
   avatar?: string | null
   name?: string | null
+  tooltip?: boolean | { position?: Position }
 }>()
 
 const classes = computed(() => [
@@ -22,13 +26,28 @@ const classes = computed(() => [
 ])
 
 const initial = computed(() => props.name?.charAt(0).toUpperCase())
+
+const tooltipPosition = computed(() => {
+  return (props.tooltip && typeof props.tooltip === 'object')
+    ? props.tooltip.position || 'top'
+    : 'top'
+})
 </script>
 
 <template>
-  <div class="SAvatar" :class="classes">
-    <img v-if="avatar" class="img" :src="avatar">
-    <p v-else-if="initial" class="initial">{{ initial }}</p>
-  </div>
+  <SFragment
+    :is="tooltip && name && STooltip"
+    :text="name"
+    :position="tooltipPosition"
+    display="block"
+    tag="div"
+    trigger-tag="div"
+  >
+    <div class="SAvatar" :class="classes">
+      <img v-if="avatar" class="img" :src="avatar">
+      <p v-else-if="initial" class="initial">{{ initial }}</p>
+    </div>
+  </SFragment>
 </template>
 
 <style lang="postcss" scoped>
@@ -36,8 +55,8 @@ const initial = computed(() => props.name?.charAt(0).toUpperCase())
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
   background-color: var(--c-bg-elv-1);
+  border-radius: 50%;
   overflow: hidden;
 }
 
@@ -45,6 +64,8 @@ const initial = computed(() => props.name?.charAt(0).toUpperCase())
   object-fit: cover;
   height: 100%;
   width: 100%;
+  border-radius: 50%;
+  overflow: hidden;
 }
 
 .initial {

package/lib/components/SAvatarStack.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type Position } from '../composables/Tooltip'
 import SAvatar from './SAvatar.vue'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
@@ -8,6 +9,7 @@ const props = withDefaults(defineProps<{
   size?: Size
   avatars: { image?: string; name?: string }[]
   avatarCount?: number
+  tooltip?: boolean | { position?: Position }
 }>(), {
   size: 'medium',
   avatarCount: 2
@@ -30,6 +32,7 @@ const count = computed(() => {
       :size="size"
       :avatar="avatar.image"
       :name="avatar.name"
+      :tooltip="tooltip"
     />
     <div v-if="count" class="more">+{{ count }}</div>
   </div>
@@ -39,16 +42,18 @@ const count = computed(() => {
 .SAvatarStack {
   display: flex;
 
-  > * {
-    border: 2px solid var(--c-bg-elv-2);
+  :slotted(.SAvatar), :deep(.SAvatar), .more {
     flex-shrink: 0;
+    border: 2px solid var(--c-bg-elv-2);
+    border-radius: 50%;
+    overflow: hidden;
   }
 
-  &.mini > *:not(:last-child)   { margin-right: -6px }
-  &.small > *:not(:last-child)  { margin-right: -8px }
-  &.medium > *:not(:last-child) { margin-right: -8px }
-  &.large > *:not(:last-child)  { margin-right: -12px }
-  &.jumbo > *:not(:last-child)  { margin-right: -16px }
+  &.mini > :deep(*):not(:last-child)   { margin-right: -6px }
+  &.small > :deep(*):not(:last-child)  { margin-right: -8px }
+  &.medium > :deep(*):not(:last-child) { margin-right: -8px }
+  &.large > :deep(*):not(:last-child)  { margin-right: -12px }
+  &.jumbo > :deep(*):not(:last-child)  { margin-right: -16px }
 }
 
 .more {
@@ -61,6 +66,8 @@ const count = computed(() => {
   border-radius: 50%;
   line-height: 1;
   color: var(--c-text-2);
+  z-index: 1;
+  height: 100%;
 
   .mini &   { font-size: 10px }
   .small &  { font-size: 10px }

package/lib/components/SButton.vue

@@ -24,8 +24,10 @@ export type Mode =
 
 export interface Tooltip {
   tag?: string
+  triggerTag?: string
   text?: MaybeRef<string | null>
   position?: Position
+  display?: 'inline' | 'inline-block' | 'block'
   trigger?: 'hover' | 'focus' | 'both'
   timeout?: number
 }
@@ -46,7 +48,7 @@ const props = defineProps<{
   block?: boolean
   loading?: boolean
   disabled?: boolean
-  tooltip?: Tooltip
+  tooltip?: string | Tooltip
 }>()
 
 const emit = defineEmits<{
@@ -78,7 +80,10 @@ const computedTag = computed(() => {
 const slots = useSlots()
 
 const hasTooltip = computed(() => {
-  return slots['tooltip-text'] || unref(props.tooltip?.text)
+  return !!(
+    slots['tooltip-text']
+    || (typeof props.tooltip === 'object' ? unref(props.tooltip.text) : props.tooltip)
+  )
 })
 
 function handleClick(): void {
@@ -91,12 +96,12 @@ function handleClick(): void {
 <template>
   <SFragment
     :is="hasTooltip && STooltip"
-    :tag="props.tooltip?.tag"
-    :text="unref(props.tooltip?.text)"
-    :position="props.tooltip?.position"
-    display="inline-block"
-    :trigger="props.tooltip?.trigger ?? 'both'"
-    :timeout="props.tooltip?.timeout"
+    :tag="typeof tooltip === 'object' ? tooltip.tag : undefined"
+    :text="typeof tooltip === 'object' ? unref(tooltip.text) : tooltip"
+    :position="typeof tooltip === 'object' ? tooltip.position : undefined"
+    :display="typeof tooltip === 'object' ? tooltip.display ?? 'inline-block' : 'inline-block'"
+    :trigger="typeof tooltip === 'object' ? tooltip.trigger ?? 'both' : 'both'"
+    :timeout="typeof tooltip === 'object' ? tooltip.timeout : undefined"
     :tabindex="-1"
   >
     <template v-if="$slots['tooltip-text']" #text><slot name="tooltip-text" /></template>
@@ -217,7 +222,7 @@ function handleClick(): void {
   &.has-label                { padding: var(--button-padding, 0 12px); }
   &.has-label.has-lead-icon  { padding: var(--button-padding, 0 10px 0 8px); }
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
-  .content                   { gap: 6px; }
+  .content                   { gap: 8px; }
   .icon-svg                  { width: 16px; height: 16px; }
 }
 
@@ -230,7 +235,7 @@ function handleClick(): void {
   &.has-label                { padding: var(--button-padding, 0 16px); }
   &.has-label.has-lead-icon  { padding: var(--button-padding, 0 12px 0 10px); }
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 10px 0 12px); }
-  .content                   { gap: 6px; }
+  .content                   { gap: 8px; }
   .icon-svg                  { width: 18px; height: 18px; }
 }
 
@@ -243,7 +248,7 @@ function handleClick(): void {
   &.has-label                { padding: var(--button-padding, 0 20px); }
   &.has-label.has-lead-icon  { padding: var(--button-padding, 0 14px 0 12px); }
   &.has-label.has-trail-icon { padding: var(--button-padding, 0 12px 0 14px); }
-  .content                   { gap: 6px; }
+  .content                   { gap: 8px; }
   .icon-svg                  { width: 18px; height: 18px; }
 }
 

package/lib/components/SCardFooterAction.vue

@@ -7,7 +7,7 @@ defineProps<{
   labelMode?: Mode
   loading?: boolean
   disabled?: boolean
-  tooltip?: Tooltip
+  tooltip?: string | Tooltip
 }>()
 
 defineEmits<{

package/lib/components/SCardHeaderAction.vue

@@ -5,7 +5,7 @@ import SButton, { type Tooltip } from './SButton.vue'
 defineProps<{
   icon: IconifyIcon
   disabled?: boolean
-  tooltip?: Tooltip
+  tooltip?: string | Tooltip
 }>()
 
 defineEmits<{

package/lib/components/SCardHeaderActionClose.vue

@@ -4,7 +4,7 @@ import SButton, { type Tooltip } from './SButton.vue'
 
 defineProps<{
   disabled?: boolean
-  tooltip?: Tooltip
+  tooltip?: string | Tooltip
 }>()
 
 defineEmits<{

package/lib/components/SCardHeaderActionCollapse.vue

@@ -8,7 +8,7 @@ import SButton, { type Tooltip } from './SButton.vue'
 const props = defineProps<{
   collapsed?: boolean
   disabled?: boolean
-  tooltip?: Tooltip
+  tooltip?: string | Tooltip
 }>()
 
 defineEmits<{

package/lib/components/SControlActionBarButton.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { useControlSize } from '../composables/Control'
-import SButton from './SButton.vue'
+import SButton, { type Tooltip } from './SButton.vue'
 
 defineProps<{
   as?: string
   icon?: any
   href?: string
+  disabled?: boolean
+  tooltip?: string | Tooltip
 }>()
 
 defineEmits<{
@@ -25,6 +27,8 @@ const size = useControlSize()
       :icon="icon"
       :href="href"
       block
+      :disabled="disabled"
+      :tooltip="tooltip"
       @click="$emit('click')"
     />
   </div>

package/lib/components/SControlActionMenu.vue

@@ -14,7 +14,7 @@ defineProps<{
   href?: string
   loading?: boolean
   disabled?: boolean
-  tooltip?: Tooltip
+  tooltip?: string | Tooltip
   options: DropdownSection[]
 }>()
 

package/lib/components/SControlButton.vue

@@ -13,7 +13,7 @@ defineProps<{
   href?: string
   loading?: boolean
   disabled?: boolean
-  tooltip?: Tooltip
+  tooltip?: string | Tooltip
 }>()
 
 defineEmits<{

package/lib/components/SIcon.vue

@@ -8,6 +8,6 @@ defineProps<{
 </script>
 
 <template>
-  <Icon v-if="typeof icon.body === 'string'" :icon="icon as IconifyIcon" />
+  <Icon v-if="typeof icon.body === 'string'" :icon="(icon as IconifyIcon)" />
   <component v-else :is="icon" />
 </template>

package/lib/components/STableCell.vue

@@ -101,6 +101,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :color="computedCell.color"
       :avatar-count="computedCell.avatarCount"
       :name-count="computedCell.nameCount"
+      :tooltip="computedCell.tooltip"
     />
     <STableCellActions
       v-else-if="computedCell.type === 'actions'"

package/lib/components/STableCellAvatars.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { type TableCellAvatarsOption } from '../composables/Table'
+import { type Position } from '../composables/Tooltip'
 import SAvatar from './SAvatar.vue'
 
 const props = withDefaults(defineProps<{
@@ -10,6 +11,7 @@ const props = withDefaults(defineProps<{
   color?: 'neutral' | 'soft' | 'mute'
   avatarCount?: number
   nameCount?: number
+  tooltip?: boolean | { position?: Position }
 }>(), {
   avatarCount: 2,
   nameCount: 2
@@ -61,7 +63,7 @@ const displayNames = computed(() => {
           class="avatar"
         >
           <div class="avatar-box">
-            <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" />
+            <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" :tooltip="tooltip" />
           </div>
         </div>
         <div v-if="avatarDiff > 0" class="avatar">

package/lib/components/STooltip.vue

@@ -5,6 +5,7 @@ import { type Position, useTooltip } from '../composables/Tooltip'
 
 const props = withDefaults(defineProps<{
   tag?: string
+  triggerTag?: string
   text?: string
   position?: Position
   display?: 'inline' | 'inline-block' | 'block'
@@ -13,6 +14,7 @@ const props = withDefaults(defineProps<{
   tabindex?: number
 }>(), {
   tag: 'span',
+  triggerTag: 'span',
   position: 'top',
   trigger: 'hover'
 })
@@ -96,9 +98,9 @@ onBeforeUnmount(() => {
 
 <template>
   <component ref="root" :is="tag" class="STooltip" :class="rootClasses" :tabindex="tabindex">
-    <span class="trigger" ref="trigger">
+    <component :is="triggerTag" class="trigger" ref="trigger">
       <slot />
-    </span>
+    </component>
 
     <Teleport to="#sefirot-modals">
       <Transition name="fade">
@@ -123,9 +125,20 @@ onBeforeUnmount(() => {
     cursor: pointer;
   }
 
-  &.inline       { display: inline; }
-  &.inline-block { display: inline-block; }
-  &.block        { display: block; }
+  &.inline {
+    &        { display: inline; }
+    .trigger { display: inline; }
+  }
+
+  &.inline-block {
+    &        { display: inline-block; }
+    .trigger { display: inline-block; }
+  }
+
+  &.block {
+    &        { display: block; }
+    .trigger { display: block; }
+  }
 }
 
 .trigger {

package/lib/composables/D.ts

@@ -11,7 +11,7 @@ export function useD<T extends Record<string, any>>(data: T): D<T> {
   const refData = ref(data) as Ref<T>
 
   function init(): void {
-    refData.value = JSON.parse(initialData)
+    refData.value = JSON.parse(initialData) as T
   }
 
   return {

package/lib/composables/Table.ts

@@ -2,6 +2,7 @@ import { type Component, type MaybeRef, type MaybeRefOrGetter } from 'vue'
 import { type Mode } from '../components/SButton.vue'
 import { type Day } from '../support/Day'
 import { type DropdownSection } from './Dropdown'
+import { type Position } from './Tooltip'
 
 export interface Table<
   O extends string = string,
@@ -163,6 +164,7 @@ export interface TableCellAvatars<V = any, R = any> extends TableCellBase {
   color?: 'neutral' | 'soft' | 'mute'
   avatarCount?: number
   nameCount?: number
+  tooltip?: boolean | { position?: Position }
 }
 
 export interface TableCellAvatarsOption {

package/lib/http/Http.ts

@@ -15,6 +15,7 @@ export interface HttpOptions {
   xsrfUrl?: string | false
   client?: HttpClient
   lang?: Lang
+  payloadKey?: string
 }
 
 export class Http {
@@ -22,6 +23,7 @@ export class Http {
   private static xsrfUrl: string | false = '/api/csrf-cookie'
   private static client: HttpClient = ofetch
   private static lang: Lang | undefined = undefined
+  private static payloadKey = '__payload__'
 
   static config(options: HttpOptions) {
     if (options.baseUrl) {
@@ -36,6 +38,9 @@ export class Http {
     if (options.lang) {
       Http.lang = options.lang
     }
+    if (options.payloadKey) {
+      Http.payloadKey = options.payloadKey
+    }
   }
 
   private async ensureXsrfToken(): Promise<string | undefined> {
@@ -101,6 +106,26 @@ export class Http {
   }
 
   async post<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+    if (body && !(body instanceof FormData)) {
+      let hasFile = false
+
+      const payload = JSON.stringify(body, (_, value) => {
+        if (value instanceof Blob) {
+          hasFile = true
+          return undefined
+        }
+        return value
+      })
+
+      if (hasFile) {
+        const formData = this.objectToFormData(body, undefined, undefined, true)
+        formData.append(Http.payloadKey, payload)
+        body = formData
+      } else {
+        body = payload
+      }
+    }
+
     return this.performRequest<T>(url, { method: 'POST', body, ...options })
   }
 
@@ -117,13 +142,7 @@ export class Http {
   }
 
   async upload<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
-    const formData = this.objectToFormData(body)
-
-    return this.performRequest<T>(url, {
-      method: 'POST',
-      body: formData,
-      ...options
-    })
+    return this.post<T>(url, this.objectToFormData(body), options)
   }
 
   async download(url: string, options?: FetchOptions): Promise<void> {
@@ -143,7 +162,7 @@ export class Http {
     FileSaver.saveAs(blob, filename as string)
   }
 
-  private objectToFormData(obj: any, form?: FormData, namespace?: string) {
+  private objectToFormData(obj: any, form?: FormData, namespace?: string, onlyFiles = false) {
     const fd = form || new FormData()
     let formKey: string
 
@@ -163,9 +182,12 @@ export class Http {
         && !(obj[property] instanceof Blob)
         && obj[property] !== null
       ) {
-        this.objectToFormData(obj[property], fd, property)
+        this.objectToFormData(obj[property], fd, property, onlyFiles)
       } else {
         const value = obj[property] === null ? '' : obj[property]
+        if (onlyFiles && !(value instanceof Blob)) {
+          return
+        }
         fd.append(formKey, value)
       }
     })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.44.0",
-  "packageManager": "pnpm@9.0.5",
+  "version": "3.46.0",
+  "packageManager": "pnpm@9.1.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -45,9 +45,9 @@
     "@iconify/vue": "^4.1.2",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/markdown-it": "^14.0.1",
-    "@vue/reactivity": "^3.4.23",
-    "@vue/runtime-core": "^3.4.23",
+    "@types/markdown-it": "^14.1.1",
+    "@vue/reactivity": "^3.4.26",
+    "@vue/runtime-core": "^3.4.26",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.9.0",
@@ -60,7 +60,7 @@
     "postcss": "^8.4.38",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.23",
+    "vue": "^3.4.26",
     "vue-router": "^4.3.2"
   },
   "dependencies": {
@@ -70,7 +70,7 @@
     "@tinyhttp/cookie": "^2.1.0",
     "@types/file-saver": "^2.0.7",
     "@types/qs": "^6.9.15",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "file-saver": "^2.0.5",
     "ofetch": "^1.3.4",
     "qs": "^6.12.1"
@@ -84,12 +84,12 @@
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/markdown-it": "^14.0.1",
-    "@types/node": "^20.12.7",
+    "@types/markdown-it": "^14.1.1",
+    "@types/node": "^20.12.10",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.5.0",
-    "@vue/reactivity": "^3.4.23",
-    "@vue/runtime-core": "^3.4.23",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vue/reactivity": "^3.4.26",
+    "@vue/runtime-core": "^3.4.26",
     "@vue/test-utils": "^2.4.5",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
@@ -106,13 +106,13 @@
     "postcss": "^8.4.38",
     "postcss-nested": "^6.0.1",
     "punycode": "^2.3.1",
-    "release-it": "^17.2.0",
+    "release-it": "^17.2.1",
     "typescript": "~5.4.5",
     "v-calendar": "^3.1.2",
-    "vite": "^5.2.10",
-    "vitepress": "^1.1.3",
-    "vitest": "^1.5.0",
-    "vue": "^3.4.23",
+    "vite": "^5.2.11",
+    "vitepress": "^1.1.4",
+    "vitest": "^1.6.0",
+    "vue": "^3.4.26",
     "vue-router": "^4.3.2",
     "vue-tsc": "^1.8.27"
   }