@globalbrain/sefirot 4.21.0 → 4.22.0

package/lib/components/SChartBar.vue

@@ -124,10 +124,12 @@ function renderChart({
     .range(vertical ? [0, width] : [0, height])
     .padding(0.4)
 
-  // Y scale for bar values
+  // Y scale for bar values, including negative values
+  const minValue = d3.min(props.data, (d) => d.value)!
+  const maxValue = d3.max(props.data, (d) => d.value)!
   const y = d3
     .scaleLinear()
-    .domain([0, d3.max(props.data, (d) => d.value)!])
+    .domain([Math.min(0, minValue), Math.max(0, maxValue)])
     .nice()
     .range(vertical ? [height, 0] : [0, width])
 
@@ -137,6 +139,9 @@ function renderChart({
   const bandwidth = Math.min(paddedScale.bandwidth(), props.maxBandwidth)
   const innerOffset = (paddedScale.bandwidth() - bandwidth) / 2
 
+  // Baseline coordinate for zero value
+  const y0 = y(0)
+
   // For the axes, use the paddedScale so ticks remain centered on the bars.
   svg
     .append('g')
@@ -241,24 +246,24 @@ function renderChart({
     if (vertical) {
       outerBars
         .attr('x', 0)
-        .attr('y', (d) => Math.max(0, y(d.value) - heightPadding))
+        .attr('y', (d) => Math.min(y(d.value), y0) - (d.value >= 0 ? heightPadding : 0))
         .attr('width', paddedScale.step())
-        .attr('height', (d) => height - Math.max(0, y(d.value) - heightPadding))
+        .attr('height', (d) => Math.abs(y(d.value) - y0) + heightPadding)
       bars
         .attr('x', groupOffset + innerOffset)
-        .attr('y', (d) => y(d.value))
+        .attr('y', (d) => (d.value >= 0 ? y(d.value) : y0))
         .attr('width', bandwidth)
-        .attr('height', (d) => height - y(d.value))
+        .attr('height', (d) => Math.abs(y(d.value) - y0))
     } else {
       outerBars
-        .attr('x', 0)
+        .attr('x', (d) => Math.min(y(d.value), y0) - (d.value >= 0 ? 0 : heightPadding))
         .attr('y', 0)
-        .attr('width', (d) => Math.min(width, y(d.value) + heightPadding))
+        .attr('width', (d) => Math.abs(y(d.value) - y0) + heightPadding)
         .attr('height', paddedScale.step())
       bars
-        .attr('x', 0)
+        .attr('x', (d) => (d.value >= 0 ? y0 : y(d.value)))
         .attr('y', groupOffset + innerOffset)
-        .attr('width', (d) => y(d.value))
+        .attr('width', (d) => Math.abs(y(d.value) - y0))
         .attr('height', bandwidth)
     }
   } else {
@@ -266,43 +271,45 @@ function renderChart({
     if (vertical) {
       outerBars
         .attr('x', 0)
-        .attr('y', height)
+        .attr('y', y0)
         .attr('width', paddedScale.step())
         .attr('height', 0)
         .transition()
         .duration(800)
         .delay((_, i) => i * 100)
-        .attr('y', (d) => Math.max(0, y(d.value) - heightPadding))
-        .attr('height', (d) => height - Math.max(0, y(d.value) - heightPadding))
+        .attr('y', (d) => Math.min(y(d.value), y0) - (d.value >= 0 ? heightPadding : 0))
+        .attr('height', (d) => Math.abs(y(d.value) - y0) + heightPadding)
       bars
         .attr('x', groupOffset + innerOffset)
-        .attr('y', height)
+        .attr('y', y0)
         .attr('width', bandwidth)
         .attr('height', 0)
         .transition()
         .duration(800)
         .delay((_, i) => i * 100)
-        .attr('y', (d) => y(d.value))
-        .attr('height', (d) => height - y(d.value))
+        .attr('y', (d) => (d.value >= 0 ? y(d.value) : y0))
+        .attr('height', (d) => Math.abs(y(d.value) - y0))
     } else {
       outerBars
-        .attr('x', 0)
+        .attr('x', y0)
         .attr('y', 0)
         .attr('width', 0)
         .attr('height', paddedScale.step())
         .transition()
         .duration(800)
         .delay((_, i) => i * 100)
-        .attr('width', (d) => Math.min(width, y(d.value) + heightPadding))
+        .attr('x', (d) => Math.min(y(d.value), y0) - (d.value >= 0 ? 0 : heightPadding))
+        .attr('width', (d) => Math.abs(y(d.value) - y0) + heightPadding)
       bars
-        .attr('x', 0)
+        .attr('x', y0)
         .attr('y', groupOffset + innerOffset)
         .attr('width', 0)
         .attr('height', bandwidth)
         .transition()
         .duration(800)
         .delay((_, i) => i * 100)
-        .attr('width', (d) => y(d.value))
+        .attr('x', (d) => (d.value >= 0 ? y0 : y(d.value)))
+        .attr('width', (d) => Math.abs(y(d.value) - y0))
     }
   }
 
@@ -389,6 +396,7 @@ watch(
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 1;
   padding: 2px 8px;
   background-color: var(--c-bg-elv-2);
   border: 1px solid var(--c-divider);

package/lib/components/SChartPie.vue

@@ -370,6 +370,7 @@ watch(
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 1;
   padding: 2px 8px;
   background-color: var(--c-bg-elv-2);
   border: 1px solid var(--c-divider);

package/lib/components/SInputDropdown.vue

@@ -2,17 +2,23 @@
 import IconCaretDown from '~icons/ph/caret-down'
 import IconCaretUp from '~icons/ph/caret-up'
 import xor from 'lodash-es/xor'
-import { type Component, computed, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { useTrans } from '../composables/Lang'
-import { type Validatable } from '../composables/Validation'
 import SDropdown from './SDropdown.vue'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export interface Props extends BaseProps {
+  placeholder?: string
+  options: Option[]
+  position?: 'top' | 'bottom'
+  noSearch?: boolean
+  nullable?: boolean
+  closeOnClick?: boolean
+  disabled?: boolean
+}
 
 export type PrimitiveValue = any
 export type ArrayValue = any[]
@@ -37,24 +43,7 @@ export interface OptionAvatar extends OptionBase {
   image?: string | null
 }
 
-const props = defineProps<{
-  size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  placeholder?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  options: Option[]
-  position?: 'top' | 'bottom'
-  noSearch?: boolean
-  nullable?: boolean
-  closeOnClick?: boolean
-  disabled?: boolean
-  validation?: Validatable
-}>()
+const props = defineProps<Props>()
 
 const model = defineModel<PrimitiveValue | ArrayValue>({ required: true })
 
@@ -143,6 +132,7 @@ function handleArray(value: OptionValue) {
   <SInputBase
     class="SInputDropdown"
     :class="classes"
+    :size
     :label
     :note
     :info
@@ -181,8 +171,10 @@ function handleArray(value: OptionValue) {
         </div>
       </div>
 
-      <div v-if="isOpen" class="dropdown" :class="position">
-        <SDropdown :sections="dropdownOptions" />
+      <div v-if="isOpen" class="dropdown" :class="props.position ?? position">
+        <div class="dropdown-content">
+          <SDropdown :sections="dropdownOptions" />
+        </div>
       </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
@@ -248,8 +240,21 @@ function handleArray(value: OptionValue) {
   left: 0;
   z-index: var(--z-index-dropdown);
 
-  &.top    { bottom: calc(100% + 8px); }
-  &.bottom { top: calc(100% + 8px); }
+  &.top {
+    bottom: calc(100% + 8px);
+
+    :deep(.SDropdown) {
+      transform: translateY(-100%);
+    }
+  }
+
+  &.bottom {
+    top: calc(100% + 8px);
+  }
+}
+
+.dropdown-content {
+  position: fixed;
 }
 
 .SInputDropdown.mini {

package/lib/components/SInputHMS.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import { type Component, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import { computed, ref } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export interface Props extends BaseProps {
+  placeholder?: Placeholder
+  noHour?: boolean
+  noMinute?: boolean
+  noSecond?: boolean
+  disabled?: boolean
+  value?: Value
+  modelValue?: Value
+}
 
 export interface Value {
   hour: string | null
@@ -20,25 +26,7 @@ export interface Placeholder {
 
 export type ValueType = 'hour' | 'minute' | 'second'
 
-const props = defineProps<{
-  size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  placeholder?: Placeholder
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  noHour?: boolean
-  noMinute?: boolean
-  noSecond?: boolean
-  disabled?: boolean
-  value?: Value
-  modelValue?: Value
-  validation?: Validatable
-  hideError?: boolean
-}>()
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:model-value': [value: Value]
@@ -144,6 +132,7 @@ function createRequiredTouched(): boolean[] {
   <SInputBase
     class="SInputHMS"
     :class="[size ?? 'small', { disabled }]"
+    :size
     :label
     :note
     :info

package/lib/components/SInputYMD.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import { type Component, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import { computed, ref } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export interface Props extends BaseProps {
+  placeholder?: Placeholder
+  noYear?: boolean
+  noMonth?: boolean
+  noDate?: boolean
+  block?: boolean
+  disabled?: boolean
+  value?: Value
+  modelValue?: Value
+}
 
 export interface Value {
   year: number | null
@@ -20,26 +27,7 @@ export interface Placeholder {
   date?: number
 }
 
-const props = defineProps<{
-  size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  placeholder?: Placeholder
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  noYear?: boolean
-  noMonth?: boolean
-  noDate?: boolean
-  block?: boolean
-  disabled?: boolean
-  value?: Value
-  modelValue?: Value
-  validation?: Validatable
-  hideError?: boolean
-}>()
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:model-value': [value: Value]
@@ -143,6 +131,7 @@ function createRequiredTouched(): boolean[] {
   <SInputBase
     class="SInputYMD"
     :class="[size ?? 'small', { disabled }]"
+    :size
     :label
     :note
     :info

package/lib/styles/utilities.css

@@ -51,6 +51,7 @@
 .s-gap-8  { gap: 8px; }
 .s-gap-12 { gap: 12px; }
 .s-gap-16 { gap: 16px; }
+.s-gap-24 { gap: 24px; }
 
 .s-order-1  { order: 1; }
 .s-order-2  { order: 2; }

package/package.json

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