Merge branch 'main' into json-in-formdata

CHANGELOG.md

@@ -1,5 +1,12 @@
 
 
+# [3.45.0](https://github.com/globalbrain/sefirot/compare/v3.44.0...v3.45.0) (2024-04-26)
+
+
+### Features
+
+* **control:** add `:disabled` and `:tooltip` support on action bar button ([#523](https://github.com/globalbrain/sefirot/issues/523)) ([ff124a6](https://github.com/globalbrain/sefirot/commit/ff124a6addc72a0fbd8c8270eee7ac0da5b8fe99))
+
 # [3.44.0](https://github.com/globalbrain/sefirot/compare/v3.43.0...v3.44.0) (2024-04-24)
 
 

docs/.vitepress/theme/components/Showcase.vue

@@ -25,7 +25,7 @@ const computedStory = computed(() => {
  </a>
  </div>
 
- <div class="main">
+ <div class="main vp-raw">
  <slot />
  </div>
  </div>

docs/components/action-list.md

@@ -71,9 +71,39 @@ interface ActionListItem {
  // prop is set, the item is rendered via `<SLink>`.
  link?: string
 
+ // Whether the item is disabled.
+ disabled?: boolean
+
+ // The tooltip to be displayed when the item is hovered or focused.
+ tooltip?: Tooltip
+
  // The callback to be called when the item is clicked.
  onClick?(): void
 }
+
+interface Tooltip {
+ // The HTML tag to be used for the tooltip.
+ // Defaults to `span`.
+ tag?: string
+
+ // The text to be displayed in the tooltip. The tooltip
+ // will only be visible when this prop is set.
+ text?: MaybeRef<string | null>
+
+ // The position of the tooltip relative to the button.
+ // Defaults to `top`
+ position?: 'top' | 'right' | 'bottom' | 'left'
+
+ // The trigger to show the tooltip.
+ // Defaults to `both`
+ trigger?: 'hover' | 'focus' | 'both'
+
+ // The time after which the tooltip is hidden if triggered
+ // because of focussing the trigger element (in milliseconds).
+ // Defaults to `undefined` (the tooltip will not hide
+ // automatically).
+ timeout?: number
+}
 ```
 
 ```vue-html

docs/components/avatar-stack.md

@@ -115,3 +115,23 @@ interface Props {
  ]"
 />
 ```
+
+### `:tooltip`
+
+Whether to display a tooltip when hovering over the component. You can also pass an object with the `position` property to define the position of the tooltip. The default position is `top`. The tooltip will display the name of the user if provided.
+
+```ts
+interface Props {
+ tooltip?: boolean | { position?: 'top' | 'right' | 'bottom' | 'left' }
+}
+```
+
+```vue-html
+<SAvatarStack
+ tooltip
+ :avatars="[
+ { image: '/path/to/image-1.jpg', name: 'Jane Doe' },
+ { image: '/path/to/image-2.jpg', name: 'Richard Roe' }
+ ]"
+/>
+```

docs/components/avatar.md

@@ -80,3 +80,17 @@ interface Props {
 ```vue-html
 <SAvatar name="John Doe" />
 ```
+
+### `:tooltip`
+
+When set to `true`, a tooltip showing the name will be displayed when hovering over the avatar. You can also pass an object to define the position of the tooltip.
+
+```ts
+interface Props {
+ tooltip?: boolean | { position?: 'top' | 'right' | 'bottom' | 'left' }
+}
+```
+
+```vue-html
+<SAvatar tooltip name="John Doe" />
+```

docs/components/button.md

@@ -302,8 +302,8 @@ interface Props {
  // Defaults to `both`
  trigger?: 'hover' | 'focus' | 'both'
 
- // Defines the timeout in milliseconds to hide the tooltip.
- // Used only when `trigger` is set to `'focus'` or `'both'`.
+ // The time after which the tooltip is hidden if triggered
+ // because of focussing the trigger element (in milliseconds).
  // Defaults to `undefined` (the tooltip will not hide
  // automatically).
  timeout?: number

docs/components/card.md

@@ -162,7 +162,7 @@ import { type IconifyIcon } from '@iconify/vue/dist/offline'
 interface Props {
  icon: IconifyIcon
  disabled?: boolean
- tooltip?: Tooltip
+ tooltip?: string | Tooltip
 }
 
 export interface Tooltip {
@@ -276,7 +276,7 @@ interface Props {
  labelMode?: Mode
  loading?: boolean
  disabled?: boolean
- tooltip?: Tooltip
+ tooltip?: string | Tooltip
 }
 
 export interface Tooltip {

docs/components/tooltip.md

@@ -70,6 +70,24 @@ interface Props {
 </STooltip>
 ```
 
+### `:triggerTag`
+
+Defines the HTML tag for the trigger element. Any value passed to this prop will used as `<component :is="triggerTag">`. The default tag for the trigger element is `span`.
+
+```ts
+interface Props {
+ triggerTag?: string
+}
+```
+
+```vue-html
+<STooltip triggerTag="div" text="...">
+ ...
+</STooltip>
+```
+
+Note that setting this to something other than `span` is required when you want to put block elements within the trigger element.
+
 ### `:text`
 
 Defines the content of tooltip.

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>

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>

lib/components/SActionMenu.vue

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

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,29 +26,46 @@ 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>
 .SAvatar {
  display: flex;
  justify-content: center;
  align-items: center;
- border-radius: 50%;
  background-color: var(--c-bg-elv-1);
+ border-radius: 50%;
  overflow: hidden;
 }
 
 .img {
  object-fit: cover;
  height: 100%;
  width: 100%;
+ border-radius: 50%;
+ overflow: hidden;
 }
 
 .initial {

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 }