@globalbrain/sefirot 4.7.0 → 4.7.1

package/lib/components/SInputHMS.vue

@@ -51,14 +51,6 @@ const _value = computed(() => {
     : props.value !== undefined ? props.value : null
 })
 
-const padValue = computed(() => {
-  return {
-    hour: _value.value?.hour?.padStart(2, '0') ?? null,
-    minute: _value.value?.minute?.padStart(2, '0') ?? null,
-    second: _value.value?.second?.padStart(2, '0') ?? null
-  }
-})
-
 const padPlaceholder = computed(() => {
   return {
     hour: props.placeholder?.hour?.toString().padStart(2, '0') ?? '00',
@@ -102,7 +94,7 @@ function update(type: ValueType, value: string | null) {
 
   const newValue = {
     ..._value.value,
-    [type]: value ?? null
+    [type]: value?.padStart(2, '0') ?? null
   }
 
   emit('update:model-value', newValue)
@@ -166,7 +158,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noHour"
         class="input hour"
-        :value="padValue?.hour"
+        :value="_value?.hour"
         :placeholder="padPlaceholder.hour"
         :maxlength="2"
         :disabled="disabled"
@@ -177,7 +169,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMinute"
         class="input minute"
-        :value="padValue?.minute"
+        :value="_value?.minute"
         :placeholder="padPlaceholder.minute"
         :maxlength="2"
         :disabled="disabled"
@@ -188,7 +180,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noSecond"
         class="input second"
-        :value="padValue?.second"
+        :value="_value?.second"
         :placeholder="padPlaceholder.second"
         :maxlength="2"
         :disabled="disabled"

package/lib/components/SLocalNav.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SLocalNavActions, { type Action } from './SLocalNavActions.vue'
 import SLocalNavAvatar from './SLocalNavAvatar.vue'
 import SLocalNavDescription from './SLocalNavDescription.vue'
 import SLocalNavMenu, { type MenuItem } from './SLocalNavMenu.vue'
 import SLocalNavTitle, { type Title } from './SLocalNavTitle.vue'
 
-export type { Title, MenuItem }
+export type { Title, Action, MenuItem }
 
 export interface Avatar {
   image?: string | null
@@ -16,6 +17,7 @@ const props = defineProps<{
   avatar?: Avatar
   title: Title[]
   description?: string
+  actions?: Action[]
   menu?: MenuItem[][]
 }>()
 
@@ -37,7 +39,10 @@ const normalizedMenu = computed(() => {
         />
       </div>
       <div class="title-bar-body">
-        <SLocalNavTitle :title="title" />
+        <div class="title-bar-title">
+          <SLocalNavTitle :title="title" />
+          <SLocalNavActions v-if="actions?.length" :actions="actions" />
+        </div>
         <SLocalNavDescription v-if="description" :text="description" />
       </div>
     </div>
@@ -71,4 +76,15 @@ const normalizedMenu = computed(() => {
   align-items: center;
   gap: 16px;
 }
+
+.title-bar-body {
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.title-bar-title {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
 </style>

package/lib/components/SLocalNavActions.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { type Component } from 'vue'
+import SButton, { type Mode, type Tooltip, type Type } from './SButton.vue'
+
+export interface Action {
+  tag?: string
+  type?: Type
+  mode?: Mode
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
+  iconMode?: Mode
+  label?: string
+  labelMode?: Mode
+  href?: string
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: string | Tooltip
+  onClick?(): void
+}
+
+defineProps<{
+  actions: Action[]
+}>()
+</script>
+
+<template>
+  <div class="SLocalNavActions">
+    <div v-for="action, i in actions" :key="i" class="action">
+      <SButton
+        size="small"
+        :type="action.type"
+        :mode="action.mode"
+        :icon="action.icon"
+        :lead-icon="action.leadIcon"
+        :trail-icon="action.trailIcon"
+        :icon-mode="action.iconMode"
+        :label="action.label"
+        :label-mode="action.labelMode"
+        :href="action.href"
+        :loading="action.loading"
+        :disabled="action.disabled"
+        :tooltip="action.tooltip"
+        @click="() => { action.onClick?.() }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SLocalNavActions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+}
+</style>

package/lib/components/SLocalNavTitle.vue

@@ -24,6 +24,8 @@ defineProps<{
 <style scoped lang="postcss">
 .SLocalNavTitle {
   display: flex;
+  flex-grow: 1;
+  width: 100%;
   overflow: hidden;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "packageManager": "pnpm@9.14.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",