@globalbrain/sefirot 2.34.0 → 2.35.0

package/lib/components/SButton.vue

@@ -86,12 +86,12 @@ function handleClick(): void {
 <template>
   <SFragment
     :is="hasTooltip && STooltip"
-    :tag="tooltip?.tag"
-    :text="unref(tooltip?.text)"
-    :position="tooltip?.position"
+    :tag="props.tooltip?.tag"
+    :text="unref(props.tooltip?.text)"
+    :position="props.tooltip?.position"
     display="inline-block"
-    :trigger="tooltip?.trigger ?? 'both'"
-    :timeout="tooltip?.timeout"
+    :trigger="props.tooltip?.trigger ?? 'both'"
+    :timeout="props.tooltip?.timeout"
     :tabindex="-1"
   >
     <template v-if="$slots['tooltip-text']" #text><slot name="tooltip-text" /></template>
@@ -125,6 +125,7 @@ function handleClick(): void {
 .SButton {
   position: relative;
   display: inline-flex;
+  justify-content: center;
   align-items: center;
   letter-spacing: 0;
   text-align: center;
@@ -705,6 +706,7 @@ function handleClick(): void {
 
 .SButton.block {
   display: flex;
+  justify-content: center;
   width: 100%;
 }
 

package/lib/components/SCard.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { provideCardState } from '../composables/Card'
+
+export type Size = 'small' | 'medium'
+
+defineProps<{
+  size?: Size
+}>()
+
+const { isCollapsed } = provideCardState()
+</script>
+
+<template>
+  <div class="SCard" :class="[size, { collapsed: isCollapsed }]">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCard {
+  display: grid;
+  gap: 1px;
+  border: 1px solid var(--c-divider-2);
+  border-radius: 6px;
+  background-color: var(--c-gutter);
+}
+
+.SCard.collapsed {
+  height: 48px;
+  overflow: hidden;
+}
+
+.SModal > .SCard {
+  margin: 12px 12px 128px;
+  box-shadow: var(--shadow-depth-3);
+  transition: opacity 0.25s, transform 0.25s;
+
+  @media (min-width: 512px) {
+    margin: 24px 24px 128px;
+  }
+
+  @media (min-width: 768px) {
+    margin: 48px 48px 128px;
+  }
+
+  &.small {
+    @media (min-width: 560px) {
+      margin: 24px auto 128px;
+      max-width: 512px;
+    }
+
+    @media (min-width: 768px) {
+      margin: 48px auto 128px;
+    }
+  }
+
+  &.medium {
+    @media (min-width: 864px) {
+      margin: 48px auto 128px;
+      max-width: 768px;
+    }
+  }
+}
+
+.SModal.fade-enter-from > .SCard,
+.SModal.fade-leave-to > .SCard {
+  opacity: 0;
+  transform: translateY(8px);
+}
+</style>

package/lib/components/SCardBlock.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+export type Space = 'compact' | 'wide'
+
+defineProps<{
+  space?: Space
+}>()
+</script>
+
+<template>
+  <div class="SCardBlock" :class="[space]">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardBlock {
+  padding: var(--card-padding, 0);
+  background-color: var(--c-bg-elv-3);
+
+  &.compact { padding: 24px; }
+  &.wide    { padding: 48px; }
+}
+
+.SCard > .SCardBlock:first-child {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.SCard > .SCardBlock:last-child {
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+</style>

package/lib/components/SCardFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="SCardFooter">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardFooter {
+  display: flex;
+  align-items: center;
+  border-radius: 0 0 5px 5px;
+  background-color: var(--c-bg-elv-3);
+}
+</style>

package/lib/components/SCardFooterAction.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import SButton, { type Mode, type Tooltip } from './SButton.vue'
+
+defineProps<{
+  mode?: Mode
+  label?: string
+  labelMode?: Mode
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <div class="SCardFooterAction">
+    <SButton
+      size="medium"
+      :mode="mode"
+      :label="label"
+      :label-mode="labelMode"
+      :loading="loading"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SCardFooterActions.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="SCardFooterActions">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardFooterActions {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  gap: 12px;
+  padding: 12px 24px;
+}
+</style>

package/lib/components/SCardHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="SCardHeader">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardHeader {
+  display: flex;
+  align-items: center;
+  border-radius: 5px 5px 0 0;
+  height: 48px;
+  background-color: var(--c-bg-soft);
+}
+</style>

package/lib/components/SCardHeaderAction.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import SButton, { type Tooltip } from './SButton.vue'
+
+defineProps<{
+  icon: IconifyIcon
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <div class="SCardHeaderAction">
+    <SButton
+      type="text"
+      mode="mute"
+      size="small"
+      :icon="icon"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SCardHeaderActionClose.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import IconX from '@iconify-icons/ph/x-bold'
+import SButton, { type Tooltip } from './SButton.vue'
+
+defineProps<{
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <div class="SCardHeaderActionClose">
+    <SButton
+      type="text"
+      mode="mute"
+      size="small"
+      :icon="IconX"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SCardHeaderActionCollapse.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import IconArrowsInLineVertical from '@iconify-icons/ph/arrows-in-line-vertical-bold'
+import IconArrowsOutLineVertical from '@iconify-icons/ph/arrows-out-line-vertical-bold'
+import { computed, shallowRef } from 'vue'
+import { useCardState } from '../composables/Card'
+import SButton, { type Tooltip } from './SButton.vue'
+
+const props = defineProps<{
+  collapsed?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const { isCollapsed, setCollapse, toggleCollapse } = useCardState()
+
+setCollapse(props.collapsed)
+
+const el = shallowRef<HTMLElement | null>(null)
+
+const icon = computed(() => {
+  return isCollapsed.value
+    ? IconArrowsOutLineVertical
+    : IconArrowsInLineVertical
+})
+</script>
+
+<template>
+  <div
+    class="SCardHeaderActionCollapse"
+    :class="{ collapsed: isCollapsed }"
+    ref="el"
+  >
+    <SButton
+      type="text"
+      mode="mute"
+      size="small"
+      :icon="icon"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      @click="toggleCollapse"
+    />
+  </div>
+</template>

package/lib/components/SCardHeaderActions.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="SCardHeaderActions">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SCardHeaderActions {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+</style>

package/lib/components/SCardHeaderTitle.vue

@@ -0,0 +1,15 @@
+<template>
+  <p class="SCardHeaderTitle">
+    <slot />
+  </p>
+</template>
+
+<style scoped lang="postcss">
+.SCardHeaderTitle {
+  flex-grow: 1;
+  padding-left: 24px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>

package/lib/components/SDropdown.vue

@@ -19,25 +19,20 @@ defineProps<{
 
 <style scoped lang="postcss">
 .SDropdown {
-  border: 1px solid var(--c-divider-light);
-  border-radius: 12px;
+  border: 1px solid var(--c-divider-2);
+  border-radius: 6px;
   min-width: 256px;
   max-height: 384px;
-  background-color: var(--c-bg);
   overflow-y: auto;
 
   &::-webkit-scrollbar {
     display: none;
   }
-
-  .dark & {
-    background-color: var(--c-bg-mute);
-  }
 }
 
-.section {
-  & + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
+.container {
+  display: grid;
+  gap: 1px;
+  background-color: var(--c-gutter);
 }
 </style>

package/lib/components/SDropdownSection.vue

@@ -31,28 +31,3 @@ defineProps<{
     :comp="section.component"
   />
 </template>
-
-<style scoped lang="postcss">
-.SDropdown {
-  border: 1px solid var(--c-divider-light);
-  border-radius: 12px;
-  min-width: 256px;
-  max-height: 384px;
-  background-color: var(--c-bg);
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .dark & {
-    background-color: var(--c-bg-mute);
-  }
-}
-
-.section {
-  & + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
-}
-</style>

package/lib/components/SDropdownSectionActions.vue

@@ -20,7 +20,9 @@ defineProps<{
 .SDropdownSectionActions {
   display: flex;
   justify-content: flex-end;
+  gap: 4px;
   padding: 8px;
+  background-color: var(--c-bg-elv-3);
 }
 
 .button {
@@ -30,8 +32,7 @@ defineProps<{
   width: 100%;
   text-align: left;
   line-height: 32px;
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 14px;
   transition: color 0.25s, background-color 0.25s;
 
   &.neutral        { color: var(--button-text-neutral-text-color); }

package/lib/components/SDropdownSectionFilter.vue

@@ -74,11 +74,14 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
           @keyup.down.prevent="focusNext"
           @click="handleClick(option, option.value)"
         >
-          <span class="checkbox">
+          <span v-if="isArray(unref(selected))" class="checkbox">
             <span class="checkbox-box">
               <SIcon :icon="IconCheck" class="checkbox-icon" />
             </span>
           </span>
+          <span v-else class="radio">
+            <span class="radio-dot" />
+          </span>
           <span class="option-item">
             <SDropdownSectionFilterItem :option="option" />
           </span>
@@ -93,33 +96,34 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 </template>
 
 <style scoped lang="postcss">
+.SDropdownSectionFilter {
+  background-color: var(--c-bg-elv-3);
+}
+
 .search {
   position: sticky;
   top: 0;
-  border-bottom: 1px solid var(--c-divider-light);
+  border-bottom: 1px solid var(--c-gutter);
   padding: 8px;
   background-color: var(--c-bg-elv-up);
 }
 
 .input {
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-divider-1);
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
   font-size: 14px;
   line-height: 32px;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s;
 
   &::placeholder {
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 
-  &:hover { border-color: var(--c-black); }
-  &:focus { border-color: var(--c-info); }
-
-  .dark &:hover { border-color: var(--c-gray); }
-  .dark &:focus { border-color: var(--c-info); }
+  &:hover { border-color: var(--input-hover-border-color); }
+  &:focus { border-color: var(--input-focus-border-color); }
 }
 
 .list {
@@ -136,33 +140,29 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
   &:hover,
   &:focus {
-    background-color: var(--c-bg-mute);
-  }
-
-  .dark &:hover,
-  .dark &:focus {
-    background-color: var(--c-bg);
+    background-color: var(--c-mute);
   }
 }
 
 .checkbox {
   display: block;
   padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .checkbox-box {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--c-divider-1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
-  background-color: var(--c-bg);
+  background-color: var(--input-bg-color);
   transition: border-color 0.1s, background-color 0.1s;
 
   .button.active & {
-    border-color: var(--c-info);
+    border-color: var(--c-info-text);
     background-color: var(--c-info);
   }
 }
@@ -180,19 +180,53 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   }
 }
 
+.radio {
+  position: relative;
+  flex-shrink: 0;
+  border: 1px solid var(--c-divider-1);
+  border-radius: 50%;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s;
+
+  .button.active & {
+    border-color: var(--c-info-light);
+  }
+}
+
+.radio-dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 100%;
+  background-color: var(--c-info-light);
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity 0.25s, transform 0.1s;
+
+  .button.active & {
+    opacity: 1;
+    transform: scale(0.6);
+  }
+}
+
 .option-item {
-  padding-left: 8px;
+  padding-left: 12px;
   width: 100%;
 }
 
 .empty {
-  padding: 16px;
+  padding: 14px 16px;
   font-size: 12px;
-  font-weight: 500;
   color: var(--c-text-2);
-
-  .search + & {
-    border-top: 1px solid var(--c-divider-light);
-  }
 }
 </style>

package/lib/components/SDropdownSectionFilterItemAvatar.vue

@@ -31,7 +31,7 @@ defineProps<{
 .name {
   display: inline-block;
   padding-left: 8px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;

package/lib/components/SDropdownSectionFilterItemText.vue

@@ -15,13 +15,12 @@ defineProps<{
   display: inline-block;
   padding: 6px 0;
   line-height: 20px;
-  font-size: 12px;
 }
 
 .text {
   display: inline-block;
   line-height: 20px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
 }
 </style>

package/lib/components/SDropdownSectionMenu.vue

@@ -19,6 +19,7 @@ defineProps<{
 <style scoped lang="postcss">
 .SDropdownSectionMenu {
   padding: 8px;
+  background-color: var(--c-bg-elv-3);
 }
 
 .button {
@@ -28,12 +29,12 @@ defineProps<{
   width: 100%;
   text-align: left;
   line-height: 32px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   transition: color 0.25s, background-color 0.25s;
 
   &:hover {
-    background-color: var(--c-bg-elv-down);
+    background-color: var(--c-mute);
   }
 }
 </style>

package/lib/components/SIcon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Icon, IconifyIcon } from '@iconify/vue/dist/offline'
+import { Icon, type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent } from 'vue'
 
 defineProps<{

package/lib/components/SModal.vue

@@ -29,11 +29,11 @@ function onClick(e: MouseEvent) {
 
 <template>
   <Teleport to="#sefirot-modals">
-    <transition name="fade">
+    <Transition name="fade">
       <div v-if="open" class="SModal" ref="el" @mousedown="onClick">
         <slot />
       </div>
-    </transition>
+    </Transition>
   </Teleport>
 </template>
 

package/lib/components/STableCell.vue

@@ -73,6 +73,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :name="computedCell.name"
       :link="computedCell.link"
       :color="computedCell.color"
+      :on-click="computedCell.onClick"
     />
     <STableCellAvatars
       v-else-if="computedCell.type === 'avatars'"