@globalbrain/sefirot 3.36.0 → 3.38.0

package/lib/components/SAvatar.vue

@@ -44,6 +44,8 @@ const initial = computed(() => props.name?.charAt(0).toUpperCase())
 
 .img {
   object-fit: cover;
+  height: 100%;
+  width: 100%;
 }
 
 .initial {

package/lib/components/SInputCheckbox.vue

@@ -163,7 +163,11 @@ function onClick() {
 }
 
 .SInputCheckbox.disabled {
-  .box {
+  .input {
+    cursor: not-allowed;
+  }
+
+  .input .box {
     border-color: var(--input-disabled-border-color);
     background-color: var(--input-disabled-bg-color);
 
@@ -171,6 +175,13 @@ function onClick() {
     &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
   }
 
-  .input { cursor: not-allowed; }
+  .input.on .box {
+    border-color: var(--c-border-info-1);
+    background-color: var(--c-blue-8);
+  }
+
+  .check-icon {
+    color: var(--c-white-a3);
+  }
 }
 </style>

package/lib/components/SInputRadio.vue

@@ -141,7 +141,11 @@ function onClick() {
 }
 
 .SInputRadio.disabled {
-  .box {
+  .input {
+    cursor: not-allowed;
+  }
+
+  .input .box {
     border-color: var(--input-disabled-border-color);
     background-color: var(--input-disabled-bg-color);
 
@@ -149,6 +153,12 @@ function onClick() {
     &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
   }
 
-  .input { cursor: not-allowed; }
+  .input.on .box {
+    border-color: var(--c-border-info-1);
+  }
+
+  .check {
+    background-color: var(--c-blue-9);
+  }
 }
 </style>

package/lib/components/STable.vue

@@ -136,19 +136,17 @@ const indexes = computed(() => {
   return records.map((record, i) => indexField ? record[indexField] : i)
 })
 
-const selectedIndexes = reactive(new Set())
+const selectedIndexes = reactive(new Set(Array.isArray(props.selected) ? props.selected : []))
 
 const control = computed({
   get() {
-    const selected = indexes.value.filter((index) => {
-      return selectedIndexes.has(index)
-    })
-
-    updateSelected(selected)
+    if (Array.isArray(props.selected)) {
+      return props.selected.length === indexes.value.length
+        ? true
+        : props.selected.length ? 'indeterminate' : false
+    }
 
-    return selected.length === indexes.value.length
-      ? true
-      : selected.length ? 'indeterminate' : false
+    return 'indeterminate' // doesn't matter
   },
 
   set(newValue) {
@@ -170,6 +168,12 @@ watch(indexes, (newValue, oldValue) => {
   }
 })
 
+watch(selectedIndexes, (newValue) => {
+  if (Array.isArray(props.selected)) {
+    updateSelected(Array.from(newValue))
+  }
+})
+
 const virtualizerOptions = computed(() => ({
   count: recordsWithSummary.value.length,
   getScrollElement: () => body.value,
@@ -390,7 +394,12 @@ function updateSelected(selected: any) {
                   @resize="(value) => updateColWidth(key, value, true)"
                 >
                   <SInputCheckbox
-                    v-if="Array.isArray(selected) && key === '__select' && unref(options.records)?.length"
+                    v-if="
+                      Array.isArray(selected)
+                        && key === '__select'
+                        && unref(options.records)?.length
+                        && options.disableSelection == null
+                    "
                     v-model="control"
                   />
                 </STableColumn>
@@ -450,11 +459,13 @@ function updateSelected(selected: any) {
                         v-if="Array.isArray(selected)"
                         :model-value="selectedIndexes.has(indexes[index])"
                         @update:model-value="c => selectedIndexes[c ? 'add' : 'delete'](indexes[index])"
+                        :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
                       />
                       <SInputRadio
                         v-else
                         :model-value="selected === indexes[index]"
                         @update:model-value="c => updateSelected(c ? indexes[index] : null)"
+                        :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
                       />
                     </template>
                   </STableCell>

package/lib/components/STableCell.vue

@@ -131,6 +131,10 @@ const computedCell = computed<TableCell | undefined>(() =>
   transition: background-color 0.1s;
   overflow: hidden;
 
+  :where(.row:has(.input.on)) & {
+    background-color: var(--c-bg-elv-4);
+  }
+
   .row:hover & {
     background-color: var(--c-bg-elv-4);
   }

package/lib/composables/Policy.ts

@@ -0,0 +1,26 @@
+import { type ComputedRef, computed } from 'vue'
+
+export type Policy<Code extends string | undefined = undefined> = ComputedRef<PolicyResponse<Code>>
+
+export interface PolicyResponse<Code extends string | undefined = undefined> {
+  ok: boolean | null
+  code?: Code
+  message?: string
+  is(code: Code): boolean
+}
+
+export interface PolicyHelpers<Code extends string | undefined = undefined> {
+  allow: (code?: Code, message?: string) => PolicyResponse<Code>
+  deny: (code?: Code, message?: string) => PolicyResponse<Code>
+  pending: (code?: Code, message?: string) => PolicyResponse<Code>
+}
+
+export function usePolicy<Code extends string | undefined = undefined>(
+  fn: (helpers: PolicyHelpers<Code>) => PolicyResponse<Code>
+): Policy<Code> {
+  return computed(() => fn({
+    allow: (code, message) => ({ ok: true, code, message, is: (c) => c === code }),
+    deny: (code, message) => ({ ok: false, code, message, is: (c) => c === code }),
+    pending: (code, message) => ({ ok: null, code, message, is: (c) => c === code })
+  }))
+}

package/lib/composables/Table.ts

@@ -16,10 +16,11 @@ export interface Table<
   loading?: MaybeRef<boolean | undefined>
   rowSize?: MaybeRef<number | undefined>
   borderless?: MaybeRef<boolean>
+  disableSelection?: (record: R) => boolean
 
   /**
    * @deprecated Use `<SControl>` to add equivalent features.
-  */
+   */
   actions?: MaybeRef<TableHeaderAction[]>
   menu?: MaybeRef<TableMenu[] | TableMenu[][]>
   header?: MaybeRef<boolean | undefined>

package/lib/composables/V.ts

@@ -1,4 +1,9 @@
-import { type Validation, type ValidationArgs, useVuelidate } from '@vuelidate/core'
+import {
+  type Validation,
+  type ValidationArgs,
+  type GlobalConfig as VuelidateConfig,
+  useVuelidate
+} from '@vuelidate/core'
 import { type MaybeRefOrGetter, type Ref, computed, toValue } from 'vue'
 import { type Snackbar, useSnackbars } from '../stores/Snackbars'
 import { useTrans } from './Lang'
@@ -10,6 +15,7 @@ export interface V<
   validation: Ref<Validation<Rules, Data>>
   validate(): Promise<boolean>
   validateAndNotify(message?: Snackbar): Promise<boolean>
+  notify(message?: Snackbar): void
   reset(): void
 }
 
@@ -24,24 +30,24 @@ export interface ValidatableError {
   readonly $message: string | Ref<string>
 }
 
+export interface VNotification {
+  notify(message?: Snackbar): void
+}
+
 export function useV<
   Data extends { [key in keyof Rules]: any },
   Rules extends ValidationArgs = ValidationArgs
 >(
   data?: MaybeRefOrGetter<Data>,
-  rules?: MaybeRefOrGetter<Rules>
+  rules?: MaybeRefOrGetter<Rules>,
+  config?: VuelidateConfig
 ): V<Data, Rules> {
-  const { t } = useTrans({
-    en: { notify: 'Form contains errors. Please correct them and try again.' },
-    ja: { notify: 'フォームにエラーがあります。内容を確認し、再度お試しください。' }
-  })
-
-  const snackbars = useSnackbars()
+  const { notify } = useVNotification()
 
   const d = computed(() => toValue(data) ?? {})
   const r = computed(() => toValue(rules) ?? {})
 
-  const validation = useVuelidate(r, d) as any
+  const validation = useVuelidate(r, d, config) as any
 
   function reset(): void {
     validation.value.$reset()
@@ -55,10 +61,7 @@ export function useV<
     const valid = await validate()
 
     if (!valid) {
-      snackbars.push(message ?? {
-        mode: 'danger',
-        text: t.notify
-      })
+      notify(message)
     }
 
     return valid
@@ -68,6 +71,27 @@ export function useV<
     validation,
     validate,
     validateAndNotify,
+    notify,
     reset
   }
 }
+
+export function useVNotification(): VNotification {
+  const { t } = useTrans({
+    en: { notify: 'Form contains errors. Please correct them and try again.' },
+    ja: { notify: 'フォームにエラーがあります。内容を確認し、再度お試しください。' }
+  })
+
+  const snackbars = useSnackbars()
+
+  function notify(message?: Snackbar): void {
+    snackbars.push(message ?? {
+      mode: 'danger',
+      text: t.notify
+    })
+  }
+
+  return {
+    notify
+  }
+}

package/lib/validation/validators/slackChannelName.ts

@@ -12,5 +12,5 @@ export function slackChannelName(value: unknown, options: SlackChannelNameOption
   const { offset = 0 } = options
   const maxLength = /* Slack channel name max length */ 80 - offset
 
-  return new RegExp(`^[\\p{L}\\p{M}\\p{N}_-]{1,${maxLength}}$`, 'u').test(value)
+  return new RegExp(`^[\\p{Ll}\\p{Lm}\\p{Lo}\\p{M}\\p{N}_-]{1,${maxLength}}$`, 'u').test(value)
 }

package/package.json

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