@globalbrain/sefirot 3.38.0 → 3.39.0

package/lib/components/SAvatar.vue

@@ -8,7 +8,6 @@ export type Size =
   | 'medium'
   | 'large'
   | 'jumbo'
-  | 'mega'
   | 'fill'
 
 const props = defineProps<{

package/lib/components/SAvatarStack.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SAvatar from './SAvatar.vue'
+
+export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
+
+const props = withDefaults(defineProps<{
+  size?: Size
+  avatars: { image?: string; name?: string }[]
+  avatarCount?: number
+}>(), {
+  size: 'medium',
+  avatarCount: 2
+})
+
+const avatars = computed(() => {
+  return props.avatarCount < 1 ? props.avatars : props.avatars.slice(0, props.avatarCount)
+})
+
+const count = computed(() => {
+  return props.avatarCount < 1 ? 0 : Math.max(0, props.avatars.length - props.avatarCount)
+})
+</script>
+
+<template>
+  <div class="SAvatarStack" :class="size">
+    <SAvatar
+      v-for="(avatar, index) in avatars"
+      :key="index"
+      :size="size"
+      :avatar="avatar.image"
+      :name="avatar.name"
+    />
+    <div v-if="count" class="more">+{{ count }}</div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SAvatarStack {
+  display: flex;
+
+  > * {
+    border: 2px solid var(--c-bg-elv-2);
+    flex-shrink: 0;
+  }
+
+  &.mini > *:not(:last-child)   { margin-right: -6px }
+  &.small > *:not(:last-child)  { margin-right: -8px }
+  &.medium > *:not(:last-child) { margin-right: -8px }
+  &.large > *:not(:last-child)  { margin-right: -12px }
+  &.jumbo > *:not(:last-child)  { margin-right: -16px }
+}
+
+.more {
+  aspect-ratio: 1;
+  font-feature-settings: 'tnum';
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--c-bg-mute-1);
+  border-radius: 50%;
+  line-height: 1;
+  color: var(--c-text-2);
+
+  .mini &   { font-size: 10px }
+  .small &  { font-size: 10px }
+  .medium & { font-size: 12px }
+  .large &  { font-size: 12px }
+  .jumbo &  { font-size: 14px }
+}
+</style>

package/lib/validation/Rule.ts

@@ -5,6 +5,7 @@ import { _required } from './validators'
 
 export interface RuleOptions {
   optional?: boolean
+  async?: boolean
   message(params: MessageProps): string
   validation(value: unknown): boolean | Promise<boolean>
 }
@@ -18,14 +19,14 @@ export function createRule(
 ): ValidationRuleWithParams {
   const lang = useLang()
 
+  function validation(value: unknown) {
+    return options.optional && !_required(value)
+      ? true
+      : options.validation(value)
+  }
+
   return helpers.withMessage(
-    (params) => {
-      return options.message({ ...params, lang })
-    },
-    (value) => {
-      return options.optional && !_required(value)
-        ? true
-        : options.validation(value)
-    }
+    (params) => options.message({ ...params, lang }),
+    options.async ? helpers.withAsync(validation) : validation
   )
 }

package/lib/validation/rules/requiredIf.ts

@@ -11,6 +11,7 @@ export function requiredIf(
   msg?: string
 ) {
   return createRule({
+    async: true,
     message: ({ lang }) => msg ?? message[lang],
     validation: (value) => baseRequiredIf(value, condition)
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.38.0",
+  "version": "3.39.0",
   "packageManager": "pnpm@8.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -21,7 +21,8 @@
     "lib"
   ],
   "scripts": {
-    "docs": "vitepress dev docs --port 4000",
+    "docs": "pnpm docs:dev",
+    "docs:dev": "vitepress dev docs --port 4000",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress serve docs --port 3000",
     "story": "histoire dev --port 3000",