@globalbrain/sefirot 3.27.1 → 3.28.0

package/lib/components/SControlActionBar.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="SControlActionBar">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SControlActionBar {
+  display: flex;
+  align-items: center;
+}
+</style>

package/lib/components/SControlActionBarButton.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useControlSize } from '../composables/Control'
+import SButton from './SButton.vue'
+
+defineProps<{
+  as?: string
+  icon?: any
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const size = useControlSize()
+</script>
+
+<template>
+  <div class="SControlActionBarButton">
+    <SButton
+      :tag="as"
+      type="text"
+      mode="mute"
+      :size="size"
+      :icon="icon"
+      block
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SControlActionBarClose.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import IconX from '@iconify-icons/ph/x-bold'
+import SControlActionBarButton from './SControlActionBarButton.vue'
+
+defineProps<{
+  as?: string
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <div class="SControlActionBarClose">
+    <SControlActionBarButton
+      :as="as"
+      :icon="IconX"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SControlActionBarCollapse.vue

@@ -0,0 +1,38 @@
+<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 SControlActionBarButton from './SControlActionBarButton.vue'
+
+const props = defineProps<{
+  as?: string
+  collapsed?: boolean
+}>()
+
+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="SControlActionBarCollapse" ref="el">
+    <SControlActionBarButton
+      :as="as"
+      :icon="icon"
+      @click="toggleCollapse"
+    />
+  </div>
+</template>

package/lib/components/SDescAvatar.vue

@@ -16,7 +16,6 @@ defineProps<{
   <div v-if="avatar" class="SDescAvatar">
     <div class="value">
       <SAvatar
-        v-if="avatar.avatar"
         size="nano"
         :avatar="avatar.avatar"
         :name="avatar.name"
@@ -36,4 +35,9 @@ defineProps<{
   gap: 8px;
   height: 24px;
 }
+
+.name {
+  line-height: 24px;
+  font-size: 14px;
+}
 </style>

package/lib/components/SDescNumber.vue

@@ -6,6 +6,8 @@ import SDescEmpty from './SDescEmpty.vue'
 
 const props = defineProps<{
   value?: number | null
+  leadUnit?: string
+  trailUnit?: string
   separator?: boolean
 }>()
 
@@ -26,21 +28,45 @@ const _value = computed(() => {
 
 <template>
   <div v-if="_value" class="SDescNumber">
+    <div v-if="leadUnit" class="lead-unit">
+      {{ leadUnit }}
+    </div>
     <div class="value">
       {{ _value }}
     </div>
+    <div v-if="trailUnit" class="trail-unit">
+      {{ trailUnit }}
+    </div>
   </div>
   <SDescEmpty v-else />
 </template>
 
 <style scoped lang="postcss">
-.value {
+.SDescNumber {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.value,
+.lead-unit,
+.trail-unit {
   line-height: 24px;
   font-size: 14px;
   font-weight: 400;
+}
+
+.value {
+  flex-grow: 1;
   font-feature-settings: "tnum";
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.lead-unit,
+.trail-unit {
+  flex-shrink: 0;
+  color: var(--c-text-2);
+}
 </style>

package/lib/mixins/Control.ts

@@ -1,5 +1,9 @@
 import { type App } from 'vue'
 import SControl from '../components/SControl.vue'
+import SControlActionBar from '../components/SControlActionBar.vue'
+import SControlActionBarButton from '../components/SControlActionBarButton.vue'
+import SControlActionBarClose from '../components/SControlActionBarClose.vue'
+import SControlActionBarCollapse from '../components/SControlActionBarCollapse.vue'
 import SControlActionMenu from '../components/SControlActionMenu.vue'
 import SControlButton from '../components/SControlButton.vue'
 import SControlCenter from '../components/SControlCenter.vue'
@@ -11,6 +15,10 @@ import SControlText from '../components/SControlText.vue'
 
 export function mixin(app: App): void {
   app.component('SControl', SControl)
+  app.component('SControlActionBar', SControlActionBar)
+  app.component('SControlActionBarButton', SControlActionBarButton)
+  app.component('SControlActionBarClose', SControlActionBarClose)
+  app.component('SControlActionBarCollapse', SControlActionBarCollapse)
   app.component('SControlActionMenu', SControlActionMenu)
   app.component('SControlButton', SControlButton)
   app.component('SControlCenter', SControlCenter)
@@ -24,6 +32,9 @@ export function mixin(app: App): void {
 declare module 'vue' {
   export interface GlobalComponents {
     SControl: typeof SControl
+    SControlActionBar: typeof SControlActionBar
+    SControlActionBarButton: typeof SControlActionBarButton
+    SControlActionBarClose: typeof SControlActionBarClose
     SControlActionMenu: typeof SControlActionMenu
     SControlButton: typeof SControlButton
     SControlCenter: typeof SControlCenter

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.27.1",
+  "version": "3.28.0",
   "packageManager": "pnpm@8.14.3",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",