@globalbrain/sefirot 2.28.0 → 2.30.0

package/lib/components/SInputDate.vue

@@ -20,6 +20,7 @@ const props = defineProps<{
   checkText?: string
   checkColor?: Color
   block?: boolean
+  disabled?: boolean
   modelValue: Day | null
   validation?: Validatable
   hideError?: boolean
@@ -79,12 +80,13 @@ function emitBlur() {
         <input
           :id="name"
           class="input"
-          :class="{ block }"
+          :class="{ block, disabled }"
           type="text"
           placeholder="YYYY-MM-DD"
-          :value="inputValue"
           autocomplete="off"
-          v-on="inputEvents"
+          :value="inputValue"
+          :disabled="disabled"
+          v-on="disabled || inputEvents"
           @blur="emitBlur"
         >
       </DatePicker>
@@ -97,31 +99,43 @@ function emitBlur() {
 .SInputDate.mini {
   .input {
     padding: 3px 8px;
-    max-width: 120px;
+    max-width: 114px;
     height: 32px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
+
+  .input.block {
+    max-width: 100%;
+  }
 }
 
 .SInputDate.small {
   .input {
     padding: 5px 12px;
-    max-width: 128px;
+    max-width: 136px;
     height: 40px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
+
+  .input.block {
+    max-width: 100%;
+  }
 }
 
 .SInputDate.medium {
   .input {
     padding: 11px 12px;
-    max-width: 160px;
+    max-width: 136px;
     height: 48px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-medium-font-size));
   }
+
+  .input.block {
+    max-width: 100%;
+  }
 }
 
 .SInputDate.has-error {
@@ -139,8 +153,8 @@ function emitBlur() {
   border: 1px solid var(--input-border-color);
   border-radius: 6px;
   width: 100%;
-  font-family: var(--font-family-number);
   font-weight: 400;
+  font-feature-settings: 'tnum';
   background-color: var(--input-bg-color);
   transition: border-color 0.25s, background-color 0.25s;
 
@@ -148,8 +162,10 @@ function emitBlur() {
     color: var(--input-placeholder-color);
   }
 
-  &.block {
-    max-width: none;
+  &.disabled {
+    border-color: var(--input-disabled-border-color);
+    background-color: var(--input-disabled-bg-color);
+    cursor: not-allowed;
   }
 }
 </style>

package/lib/components/SInputDropdown.vue

@@ -241,11 +241,12 @@ function handleArray(value: OptionValue) {
 
 .SInputDropdown.disabled {
   .box {
-    background-color: var(--c-bg);
+    border-color: var(--input-disabled-border-color);
+    background-color: var(--input-disabled-bg-color);
     cursor: not-allowed;
 
-    &:hover                     { border-color: var(--c-divider); }
-    &:focus:not(:focus-visible) { border-color: var(--c-divider); }
+    &:hover                     { border-color: var(--input-disabled-border-color); }
+    &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
   }
 
   .box-icon {

package/lib/components/SInputYMD.vue

@@ -28,6 +28,7 @@ const props = defineProps<{
   noYear?: boolean
   noMonth?: boolean
   noDate?: boolean
+  block?: boolean
   disabled?: boolean
   value?: Value
   modelValue?: Value
@@ -139,7 +140,7 @@ function createRequiredTouched(): boolean[] {
     :hide-error="hideError"
     :validation="validation"
   >
-    <div class="container" :class="{ focus: isFocused }">
+    <div class="container" :class="{ focus: isFocused, block }">
       <input
         v-if="!noYear"
         class="input year"
@@ -278,11 +279,15 @@ function createRequiredTouched(): boolean[] {
 
   &:hover { border-color: var(--input-hover-border-color); }
   &.focus { border-color: var(--input-focus-border-color); }
+
+  &.block {
+    width: 100%;
+  }
 }
 
 .input {
-  font-family: var(--font-family-number);
   line-height: 24px;
+  font-feature-settings: "tnum";
   background-color: transparent;
 
   &::placeholder {

package/lib/components/STable.vue

@@ -114,6 +114,16 @@ function lockBody(value: boolean) {
 function updateColWidth(key: string, value: string) {
   colWidths[key] = value
 }
+
+function isSummary(index: number) {
+  return index === records?.value?.length
+}
+
+function getCell(key: string, index: number) {
+  return (isSummary(index) && columns.value[key]?.summaryCell)
+    ? columns.value[key]?.summaryCell
+    : columns.value[key]?.cell
+}
 </script>
 
 <template>
@@ -171,7 +181,7 @@ function updateColWidth(key: string, value: string) {
               v-for="(record, rIndex) in recordsWithSummary"
               :key="rIndex"
               class="row"
-              :class="rIndex === records?.length && 'summary'"
+              :class="isSummary(rIndex) && 'summary'"
             >
               <STableItem
                 v-for="key in orders"
@@ -182,9 +192,9 @@ function updateColWidth(key: string, value: string) {
               >
                 <STableCell
                   :name="key"
-                  :class="rIndex === records?.length && 'summary'"
+                  :class="isSummary(rIndex) && 'summary'"
                   :class-name="columns[key].className"
-                  :cell="columns[key].cell"
+                  :cell="getCell(key, rIndex)"
                   :value="record[key]"
                   :record="record"
                   :records="records"

package/lib/components/STableCell.vue

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

package/lib/composables/Table.ts

@@ -6,14 +6,15 @@ import type { DropdownSection } from './Dropdown'
 
 export interface Table<
   O extends string = any,
-  R extends Record<string, any> = any
+  R extends Record<string, any> = any,
+  SR extends Record<string, any> = any
 > {
   orders: O[]
-  columns: TableColumns<O, R>
+  columns: TableColumns<O, R, SR>
   records?: R[] | null
   header?: boolean
   footer?: boolean
-  summary?: TableSummary<R> | null
+  summary?: SR | null
   total?: number | null
   page?: number | null
   perPage?: number | null
@@ -27,21 +28,23 @@ export interface Table<
 
 export type TableColumns<
   O extends string,
-  R extends Record<string, any>
+  R extends Record<string, any>,
+  SR extends Record<string, any>
 > = {
-  [K in O]: K extends keyof R
-    ? TableColumn<R[K], R>
-    : TableColumn<undefined, R>
+  [K in O]: TableColumn<R[K], R, SR[K], SR>
 }
 
-export interface TableColumn<V, R> {
+export interface TableColumn<V, R, SV, SR> {
   label?: string
   className?: string
   dropdown?: DropdownSection[]
   resizable?: boolean
-  cell?: TableCell | ((value: V, record: R) => TableCell)
+  cell?: TableCell | TableColumnCellFn<V, R>
+  summaryCell?: TableCell | TableColumnCellFn<SV, SR>
 }
 
+export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell
+
 export type TableCell =
   | TableCellText
   | TableCellDay
@@ -139,17 +142,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>> {
+export interface UseTableOptions<
+  O extends string,
+  R extends Record<string, any>,
+  SR extends Record<string, any>
+> {
   orders: MaybeRef<O[]>
-  columns: MaybeRef<TableColumns<O, R>>
+  columns: MaybeRef<TableColumns<O, R, SR>>
   records?: MaybeRef<R[] | null | undefined>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
-  summary?: MaybeRef<TableSummary<R> | null | undefined>
+  summary?: MaybeRef<SR | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>
@@ -161,8 +164,12 @@ export interface UseTableOptions<O extends string, R extends Record<string, any>
   onReset?(): void
 }
 
-export function useTable<O extends string, R extends Record<string, any>>(
-  options: UseTableOptions<O, R>
-): Table<O, R> {
-  return reactive(options) as Table<O, R>
+export function useTable<
+  O extends string,
+  R extends Record<string, any>,
+  SR extends Record<string, any>
+>(
+  options: UseTableOptions<O, R, SR>
+): Table<O, R, SR> {
+  return reactive(options) as Table<O, R, SR>
 }

package/package.json

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