@globalbrain/sefirot 3.5.0 → 3.7.0

package/lib/components/SSnackbar.vue

@@ -47,7 +47,7 @@ function close() {
   border: 1px solid var(--c-divider);
   border-radius: 6px;
   width: 100%;
-  background-color: var(--c-bg-elv-up);
+  background-color: var(--c-bg-elv-3);
   box-shadow: var(--shadow-depth-3);
   overflow: hidden;
 
@@ -60,10 +60,10 @@ function close() {
     content: "";
   }
 
-  &.neutral::before { background-color: var(--c-gray); }
-  &.info::before    { background-color: var(--c-info); }
-  &.warning::before { background-color: var(--c-warning); }
-  &.danger::before  { background-color: var(--c-danger); }
+  &.neutral::before { background-color: var(--c-fg-gray-1); }
+  &.info::before    { background-color: var(--c-fg-info-1); }
+  &.warning::before { background-color: var(--c-fg-warning-1); }
+  &.danger::before  { background-color: var(--c-fg-danger-1); }
 }
 
 .close {

package/lib/components/SStep.vue

@@ -31,19 +31,19 @@ defineProps({
 
 <style lang="postcss" scoped>
 .SStep.upcoming {
-  .point { border-color: var(--c-divider); }
+  .point { border-color: var(--c-border-mute-1); }
   .text  { color: var(--c-text-2); }
 }
 
 .SStep.active {
-  .point { border-color: var(--c-success); }
-  .text  { color: var(--c-success); }
+  .point { border-color: var(--c-fg-success-1); }
+  .text  { color: var(--c-text-success-1); }
 }
 
 .SStep.done {
   .point {
-    border-color: var(--c-success);
-    background-color: var(--c-success);
+    border-color: var(--c-fg-success-1);
+    background-color: var(--c-fg-success-1);
   }
 
   .text  { color: var(--c-text-1); }
@@ -51,11 +51,11 @@ defineProps({
 
 .SStep.failed {
   .point {
-    border-color: var(--c-danger);
-    background-color: var(--c-danger);
+    border-color: var(--c-fg-danger-1);
+    background-color: var(--c-fg-danger-1);
   }
 
-  .text  { color: var(--c-danger); }
+  .text  { color: var(--c-text-danger-1); }
 }
 
 .indicator {
@@ -78,7 +78,7 @@ defineProps({
   border-radius: 50%;
   width: 6px;
   height: 6px;
-  background-color: var(--c-success);
+  background-color: var(--c-fg-success-1);
 }
 
 .icon {
@@ -92,9 +92,9 @@ defineProps({
   height: 2px;
 }
 
-.bar.mute   { background-color: var(--c-divider); }
-.bar.active { background-color: var(--c-success); }
-.bar.failed { background-color: var(--c-danger); }
+.bar.mute   { background-color: var(--c-border-mute-1); }
+.bar.active { background-color: var(--c-fg-success-1); }
+.bar.failed { background-color: var(--c-fg-danger-1); }
 
 .text {
   margin: 0;

package/lib/components/STableCellPill.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import SPill from './SPill.vue'
-
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+import SPill, { type Mode } from './SPill.vue'
 
 const props = defineProps<{
   value?: any
   record: any
   getter?: string | ((value: any, record: any) => string)
-  color?: Color | ((value: any, record: any) => Color)
+  color?: Mode | ((value: any, record: any) => Mode)
 }>()
 
 const _value = computed(() => {

package/lib/components/STableCellPills.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { type TableCellPillColor } from '../composables/Table'
+import { type TableCellPillItem } from '../composables/Table'
 import STableCellPill from './STableCellPill.vue'
 
-export interface Pill {
-  label: string
-  color: TableCellPillColor
-}
-
 const props = defineProps<{
   value: string[]
   record: any
-  pills(value: string[], record: any): Pill[]
+  pills(value: string[], record: any): TableCellPillItem[]
 }>()
 
 const items = computed(() => props.pills(props.value, props.record))

package/lib/components/STableCellText.vue

@@ -4,13 +4,14 @@ import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 
 export type Color =
-  | 'neutral'
-  | 'soft'
+  | 'default'
   | 'mute'
+  | 'neutral'
   | 'info'
   | 'success'
   | 'warning'
   | 'danger'
+  | 'soft'
 
 const props = defineProps<{
   value?: any

package/lib/composables/Image.ts

@@ -1,3 +1,4 @@
+import { isClient } from '@vueuse/core'
 import { type MaybeRefOrGetter, type Ref, ref, toValue, watchEffect } from 'vue'
 import { isFile, isString } from '../support/Utils'
 
@@ -13,7 +14,13 @@ export interface ImageSrcFromFile {
 export function useImageSrcFromFile(
   file: MaybeRefOrGetter<File | string | null>
 ): ImageSrcFromFile {
-  const reader = new FileReader()
+  if (!isClient) {
+    return {
+      src: ref(null)
+    }
+  }
+
+  const reader = new window.FileReader()
   const src = ref<string | null>(null)
 
   reader.onload = function () {

package/lib/composables/Table.ts

@@ -46,26 +46,26 @@ export interface TableColumn<V, R, SV, SR> {
   dropdown?: DropdownSection[]
   grow?: boolean
   resizable?: boolean
-  cell?: TableCell | TableColumnCellFn<V, R>
-  summaryCell?: TableCell | TableColumnCellFn<SV, SR>
+  cell?: TableCell<V, R> | TableColumnCellFn<V, R>
+  summaryCell?: TableCell<SV, SR> | TableColumnCellFn<SV, SR>
   show?: boolean
 }
 
-export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell
+export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell<V, R>
 
-export type TableCell =
-  | TableCellText
-  | TableCellNumber
+export type TableCell<V = any, R = any> =
+  | TableCellText<V, R>
+  | TableCellNumber<V, R>
   | TableCellDay
-  | TableCellPill
-  | TableCellPills
+  | TableCellPill<V, R>
+  | TableCellPills<V, R>
   | TableCellState
-  | TableCellAvatar
-  | TableCellAvatars
+  | TableCellAvatar<V, R>
+  | TableCellAvatars<V, R>
   | TableCellCustom
   | TableCellEmpty
   | TableCellComponent
-  | TableCellActions
+  | TableCellActions<R>
 
 export type TableCellType =
   | 'text'
@@ -81,24 +81,31 @@ export type TableCellType =
   | 'component'
   | 'actions'
 
-export type ColorModes = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type ColorModes =
+  | 'default'
+  | 'mute'
+  | 'neutral'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
 
 export interface TableCellBase {
   type: TableCellType
 }
 
-export interface TableCellText extends TableCellBase {
+export interface TableCellText<V = any, R = any> extends TableCellBase {
   type: 'text'
   align?: 'left' | 'center' | 'right'
   icon?: any
-  value?: string | null | ((value: any, record: any) => string | null)
-  link?: string | null | ((value: any, record: any) => string)
-  color?: TableCellValueColor | ((value: any, record: any) => TableCellValueColor)
-  iconColor?: TableCellValueColor | ((value: any, record: any) => TableCellValueColor)
-  onClick?(value: any, record: any): void
+  value?: string | null | ((value: V, record: R) => string | null)
+  link?: string | null | ((value: V, record: R) => string)
+  color?: TableCellValueColor | ((value: V, record: R) => TableCellValueColor)
+  iconColor?: TableCellValueColor | ((value: V, record: R) => TableCellValueColor)
+  onClick?(value: V, record: R): void
 }
 
-export interface TableCellNumber extends TableCellBase {
+export interface TableCellNumber<V = any, R = any> extends TableCellBase {
   type: 'number'
   align?: 'left' | 'center' | 'right'
   icon?: any
@@ -107,7 +114,7 @@ export interface TableCellNumber extends TableCellBase {
   link?: string | null
   color?: TableCellValueColor
   iconColor?: TableCellValueColor
-  onClick?(value: any, record: any): void
+  onClick?(value: V, record: R): void
 }
 
 export type TableCellValueColor = ColorModes | 'soft'
@@ -120,36 +127,36 @@ export interface TableCellDay extends TableCellBase {
   color?: 'neutral' | 'soft' | 'mute'
 }
 
-export interface TableCellPill extends TableCellBase {
+export interface TableCellPill<V = any, R = any> extends TableCellBase {
   type: 'pill'
-  value?: string | ((value: any, record: any) => string)
-  color?: TableCellPillColor | ((value: any, record: any) => TableCellPillColor)
+  value?: string | ((value: V, record: R) => string)
+  color?: TableCellPillColor | ((value: V, record: R) => TableCellPillColor)
 }
 
 export type TableCellPillColor = ColorModes
 
-export interface TableCellPills extends TableCellBase {
+export interface TableCellPills<V = any, R = any> extends TableCellBase {
   type: 'pills'
-  pills(value: any, record: any): TableCellPillItem[]
+  pills(value: V, record: R): TableCellPillItem[]
 }
 
 export interface TableCellPillItem {
   label: string
-  color: TableCellPillColor
+  color?: TableCellPillColor
 }
 
-export interface TableCellAvatar extends TableCellBase {
+export interface TableCellAvatar<V = any, R = any> extends TableCellBase {
   type: 'avatar'
-  image?: string | null | ((value: any, record: any) => string | null | undefined)
-  name?: string | null | ((value: any, record: any) => string | null | undefined)
-  link?: string | null | ((value: any, record: any) => string | null | undefined)
+  image?: string | null | ((value: V, record: R) => string | null | undefined)
+  name?: string | null | ((value: V, record: R) => string | null | undefined)
+  link?: string | null | ((value: V, record: R) => string | null | undefined)
   color?: 'neutral' | 'soft' | 'mute'
-  onClick?(value: any, record: any): void
+  onClick?(value: V, record: R): void
 }
 
-export interface TableCellAvatars extends TableCellBase {
+export interface TableCellAvatars<V = any, R = any> extends TableCellBase {
   type: 'avatars'
-  avatars: TableCellAvatarsOption[] | ((value: any, record: any) => TableCellAvatarsOption[])
+  avatars: TableCellAvatarsOption[] | ((value: V, record: R) => TableCellAvatarsOption[])
   color?: 'neutral' | 'soft' | 'mute'
 }
 
@@ -178,19 +185,19 @@ export interface TableCellState extends TableCellBase {
   mode?: ColorModes
 }
 
-export interface TableCellActions extends TableCellBase {
+export interface TableCellActions<R = any> extends TableCellBase {
   type: 'actions'
-  actions: TableCellAction[]
+  actions: TableCellAction<R>[]
 }
 
-export interface TableCellAction {
+export interface TableCellAction<R = any> {
   mode?: Mode
   icon?: any
   iconMode?: Mode
   label?: string
   labelMode?: Mode
-  onClick(record: any): void
-  show?(record: any): boolean
+  onClick(record: R): void
+  show?(record: R): boolean
 }
 
 export interface TableMenu {

package/lib/validation/rules/decimal.ts

@@ -1,8 +1,9 @@
-import { decimal as baseDecimal, helpers } from '@vuelidate/validators'
+import { and, decimal as baseDecimal, helpers, not } from '@vuelidate/validators'
+import { hyphen } from '../validators'
 
 export function decimal(msg?: string) {
   return helpers.withMessage(
     () => msg ?? 'The value must be valid decimal numbers.',
-    baseDecimal
+    and(not(hyphen), baseDecimal)
   )
 }

package/lib/validation/rules/decimalOrHyphen.ts

@@ -0,0 +1,8 @@
+import { decimal as baseDecimal, helpers } from '@vuelidate/validators'
+
+export function decimalOrHyphen(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The value must be valid decimal numbers or just a hyphen.',
+    baseDecimal
+  )
+}

package/lib/validation/rules/index.ts

@@ -1,6 +1,7 @@
 export { and, not, or } from '@vuelidate/validators'
 export * from './checked'
 export * from './decimal'
+export * from './decimalOrHyphen'
 export * from './email'
 export * from './fileExtension'
 export * from './hms'
@@ -11,6 +12,8 @@ export * from './maxValue'
 export * from './minLength'
 export * from './minValue'
 export * from './month'
+export * from './negativeInteger'
+export * from './positiveInteger'
 export * from './required'
 export * from './requiredHms'
 export * from './requiredIf'
@@ -18,3 +21,5 @@ export * from './requiredYmd'
 export * from './rule'
 export * from './url'
 export * from './ymd'
+export * from './zeroOrNegativeInteger'
+export * from './zeroOrPositiveInteger'

package/lib/validation/rules/negativeInteger.ts

@@ -0,0 +1,9 @@
+import { helpers } from '@vuelidate/validators'
+import { negativeInteger as baseNegativeInteger } from '../validators'
+
+export function negativeInteger(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The value must be valid negative integer.',
+    baseNegativeInteger
+  )
+}

package/lib/validation/rules/positiveInteger.ts

@@ -0,0 +1,9 @@
+import { helpers } from '@vuelidate/validators'
+import { positiveInteger as basePositiveInteger } from '../validators'
+
+export function positiveInteger(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The value must be valid positive integer.',
+    basePositiveInteger
+  )
+}

package/lib/validation/rules/zeroOrNegativeInteger.ts

@@ -0,0 +1,9 @@
+import { helpers, or } from '@vuelidate/validators'
+import { negativeInteger, zero } from '../validators'
+
+export function zeroOrNegativeInteger(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The value must be zero or valid negative integer.',
+    or(zero, negativeInteger)
+  )
+}

package/lib/validation/rules/zeroOrPositiveInteger.ts

@@ -0,0 +1,9 @@
+import { helpers, or } from '@vuelidate/validators'
+import { positiveInteger, zero } from '../validators'
+
+export function zeroOrPositiveInteger(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The value must be zero or valid positive integer.',
+    or(zero, positiveInteger)
+  )
+}

package/lib/validation/validators/hyphen.ts

@@ -0,0 +1,3 @@
+export function hyphen(value: string): boolean {
+  return value === '-'
+}

package/lib/validation/validators/index.ts

@@ -1,9 +1,13 @@
 export * from './checked'
 export * from './fileExtension'
 export * from './hms'
+export * from './hyphen'
 export * from './maxFileSize'
 export * from './maxTotalFileSize'
 export * from './month'
+export * from './negativeInteger'
+export * from './positiveInteger'
 export * from './requiredHms'
 export * from './requiredYmd'
 export * from './ymd'
+export * from './zero'

package/lib/validation/validators/negativeInteger.ts

@@ -0,0 +1,3 @@
+export function negativeInteger(value: number): boolean {
+  return Number.isInteger(value) && value < 0
+}

package/lib/validation/validators/positiveInteger.ts

@@ -0,0 +1,3 @@
+export function positiveInteger(value: number): boolean {
+  return Number.isInteger(value) && value > 0
+}

package/lib/validation/validators/zero.ts

@@ -0,0 +1,3 @@
+export function zero(value: number): boolean {
+  return value === 0
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.5.0",
-  "packageManager": "pnpm@8.10.4",
+  "version": "3.7.0",
+  "packageManager": "pnpm@8.10.5",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -72,15 +72,15 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.11",
     "@types/markdown-it": "^13.0.6",
-    "@types/node": "^20.9.0",
-    "@vitejs/plugin-vue": "^4.4.1",
-    "@vitest/coverage-v8": "^1.0.0-beta.4",
-    "@vue/test-utils": "^2.4.1",
+    "@types/node": "^20.9.2",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitest/coverage-v8": "^1.0.0-beta.5",
+    "@vue/test-utils": "^2.4.2",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.6.1",
     "body-scroll-lock": "4.0.0-beta.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "fuse.js": "^7.0.0",
     "happy-dom": "^12.10.3",
     "histoire": "^0.17.5",
@@ -90,12 +90,13 @@
     "pinia": "^2.1.7",
     "postcss": "^8.4.31",
     "postcss-nested": "^6.0.1",
+    "punycode": "^2.3.1",
     "release-it": "^17.0.0",
     "typescript": "~5.2.2",
     "v-calendar": "^3.1.2",
-    "vite": "^4.5.0",
-    "vitepress": "1.0.0-rc.25",
-    "vitest": "^1.0.0-beta.4",
+    "vite": "^5.0.0",
+    "vitepress": "1.0.0-rc.29",
+    "vitest": "^1.0.0-beta.5",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.22"