@globalbrain/sefirot 2.26.0 → 2.28.0

package/lib/components/SInputDate.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
 import type { IconifyIcon } from '@iconify/vue/dist/offline'
 import { DatePicker } from 'v-calendar'
-import type { DefineComponent } from 'vue'
 import { computed } from 'vue'
 import type { Validatable } from '../composables/Validation'
-import type { Day } from '../support/Day'
-import { day } from '../support/Day'
+import { type Day, day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 
+export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
+  size?: Size
   name?: string
   label?: string
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: IconifyIcon
   checkText?: string
   checkColor?: Color
   block?: boolean
@@ -26,9 +26,13 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Day | null): void
+  (e: 'update:model-value', value: Day | null): void
 }>()
 
+const classes = computed(() => [
+  props.size ?? 'small'
+])
+
 const value = computed(() => {
   return props.modelValue
     ? props.modelValue.format('YYYY-MM-DD')
@@ -36,7 +40,7 @@ const value = computed(() => {
 })
 
 function emitInput(date?: string) {
-  emit('update:modelValue', date ? day(date) : null)
+  emit('update:model-value', date ? day(date) : null)
 }
 
 function emitBlur() {
@@ -48,7 +52,8 @@ function emitBlur() {
 
 <template>
   <SInputBase
-    class="SInputDate small"
+    class="SInputDate"
+    :class="classes"
     :name="name"
     :label="label"
     :note="note"
@@ -89,33 +94,58 @@ function emitBlur() {
 </template>
 
 <style lang="postcss" scoped>
+.SInputDate.mini {
+  .input {
+    padding: 3px 8px;
+    max-width: 120px;
+    height: 32px;
+    line-height: 24px;
+    font-size: var(--input-font-size, var(--input-mini-font-size));
+  }
+}
+
+.SInputDate.small {
+  .input {
+    padding: 5px 12px;
+    max-width: 128px;
+    height: 40px;
+    line-height: 24px;
+    font-size: var(--input-font-size, var(--input-small-font-size));
+  }
+}
+
+.SInputDate.medium {
+  .input {
+    padding: 11px 12px;
+    max-width: 160px;
+    height: 48px;
+    line-height: 24px;
+    font-size: var(--input-font-size, var(--input-medium-font-size));
+  }
+}
+
 .SInputDate.has-error {
   .input {
-    border-color: var(--c-danger);
+    border-color: var(--input-error-border-color);
 
     &:focus {
-      border-color: var(--c-danger);
+      border-color: var(--input-error-border-color);
     }
   }
 }
 
 .input {
   display: block;
-  border: 1px solid var(--c-divider);
+  border: 1px solid var(--input-border-color);
   border-radius: 6px;
-  padding: 5px 12px;
   width: 100%;
-  max-width: 144px;
-  height: 40px;
-  letter-spacing: 0;
-  line-height: 24px;
-  font-size: 16px;
-  background-color: var(--c-bg);
+  font-family: var(--font-family-number);
+  font-weight: 400;
+  background-color: var(--input-bg-color);
   transition: border-color 0.25s, background-color 0.25s;
 
   &::placeholder {
-    font-weight: 500;
-    color: var(--c-text-3);
+    color: var(--input-placeholder-color);
   }
 
   &.block {

package/lib/components/STable.vue

@@ -18,6 +18,7 @@ const {
   records,
   header,
   footer,
+  summary,
   total,
   page,
   perPage,
@@ -71,6 +72,12 @@ const classes = computed(() => ({
   'borderless': borderless?.value
 }))
 
+const recordsWithSummary = computed(() => {
+  return (records?.value && summary?.value)
+    ? [...records?.value, summary?.value]
+    : records?.value ?? []
+})
+
 watch(() => records?.value, () => {
   headLock = true
   bodyLock = true
@@ -160,7 +167,12 @@ function updateColWidth(key: string, value: string) {
           @scroll="syncBodyScroll"
         >
           <div class="block">
-            <div v-for="(record, rIndex) in records" :key="rIndex" class="row">
+            <div
+              v-for="(record, rIndex) in recordsWithSummary"
+              :key="rIndex"
+              class="row"
+              :class="rIndex === records?.length && 'summary'"
+            >
               <STableItem
                 v-for="key in orders"
                 :key="key"
@@ -170,6 +182,7 @@ function updateColWidth(key: string, value: string) {
               >
                 <STableCell
                   :name="key"
+                  :class="rIndex === records?.length && 'summary'"
                   :class-name="columns[key].className"
                   :cell="columns[key].cell"
                   :value="record[key]"

package/lib/components/STableCell.vue

@@ -95,7 +95,11 @@ const computedCell = computed<TableCell | undefined>(() =>
   overflow: hidden;
 
   .row:hover & {
-    background-color: var(--c-bg-elv);
+    background-color: var(--c-bg-elv-1);
+  }
+
+  .summary & {
+    background-color: var(--c-bg-elv-2);
   }
 
   .STableItem:first-child & {

package/lib/components/STableCellDay.vue

@@ -42,5 +42,9 @@ const _value = computed(() => {
   .STableCellDay.neutral & { color: var(--c-text-1); }
   .STableCellDay.soft &    { color: var(--c-text-2); }
   .STableCellDay.mute &    { color: var(--c-text-3); }
+
+  .STableCell.summary & {
+    font-weight: var(--table-cell-summary-font-weight);
+  }
 }
 </style>

package/lib/components/STableCellText.vue

@@ -110,6 +110,10 @@ const _iconColor = computed(() => {
   .STableCellText.link:hover &.warning { color: var(--c-warning-darker); }
   .STableCellText.link &.danger        { color: var(--c-danger); }
   .STableCellText.link:hover &.danger  { color: var(--c-danger-dark); }
+
+  .STableCell.summary & {
+    font-weight: var(--table-cell-summary-font-weight);
+  }
 }
 
 .icon {

package/lib/composables/Table.ts

@@ -13,6 +13,7 @@ export interface Table<
   records?: R[] | null
   header?: boolean
   footer?: boolean
+  summary?: TableSummary<R> | null
   total?: number | null
   page?: number | null
   perPage?: number | null
@@ -138,12 +139,17 @@ export interface TableCellComponent extends TableCellBase {
   props?: Record<string, any>
 }
 
+export type TableSummary<T> = {
+  [P in keyof T]?: T[P] | null | undefined
+}
+
 export interface UseTableOptions<O extends string, R extends Record<string, any>> {
   orders: MaybeRef<O[]>
   columns: MaybeRef<TableColumns<O, R>>
   records?: MaybeRef<R[] | null | undefined>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
+  summary?: MaybeRef<TableSummary<R> | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>

package/lib/styles/variables.css

@@ -639,6 +639,8 @@
 
   --table-cell-font-size: 14px;
   --table-cell-font-weight: 400;
+
+  --table-cell-summary-font-weight: 600;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.26.0",
+  "version": "2.28.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -68,6 +68,7 @@
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
     "histoire": "^0.15.8",
+    "jsdom": "^21.1.1",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",