@globalbrain/sefirot 3.33.0 → 3.34.0

package/lib/components/SDescAvatar.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { isArray } from '../support/Utils'
 import SAvatar from './SAvatar.vue'
 import SDescEmpty from './SDescEmpty.vue'
 
@@ -7,21 +9,32 @@ export interface Avatar {
   name?: string | null
 }
 
-defineProps<{
-  avatar?: Avatar | null
-}>()
+const props = withDefaults(defineProps<{
+  avatar?: Avatar | Avatar[] | null
+  dir?: 'column' | 'row'
+}>(), {
+  dir: 'column'
+})
+
+const _avatar = computed(() => {
+  if (!props.avatar) {
+    return null
+  }
+
+  return isArray(props.avatar) ? props.avatar : [props.avatar]
+})
 </script>
 
 <template>
-  <div v-if="avatar" class="SDescAvatar">
-    <div class="value">
+  <div v-if="_avatar?.length" class="SDescAvatar" :class="[dir]">
+    <div v-for="a, i in _avatar" :key="i" class="value">
       <SAvatar
         size="nano"
-        :avatar="avatar.avatar"
-        :name="avatar.name"
+        :avatar="a.avatar"
+        :name="a.name"
       />
-      <span v-if="avatar.name" class="name">
-        {{ avatar.name }}
+      <span v-if="a.name" class="name">
+        {{ a.name }}
       </span>
     </div>
   </div>
@@ -29,6 +42,21 @@ defineProps<{
 </template>
 
 <style scoped lang="postcss">
+.SDescAvatar {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.SDescAvatar.column {
+  flex-direction: column;
+  gap: 4px;
+}
+
+.SDescAvatar.row {
+  flex-direction: row;
+  gap: 4px 12px;
+}
+
 .value {
   display: flex;
   align-items: center;

package/lib/styles/base.css

@@ -42,6 +42,17 @@ h6 {
   font-weight: inherit;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li,
+p {
+  overflow-wrap: break-word;
+}
+
 /**
  * Avoid 300ms click delay on touch devices that support the `touch-action`
  * CSS property.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.33.0",
-  "packageManager": "pnpm@8.15.3",
+  "version": "3.34.0",
+  "packageManager": "pnpm@8.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "@types/markdown-it": "^13.0.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.8.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
@@ -56,8 +56,8 @@
     "postcss": "^8.4.35",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.20",
+    "vue-router": "^4.3.0"
   },
   "dependencies": {
     "@tanstack/vue-virtual": "3.0.0-beta.62",
@@ -80,17 +80,17 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.20",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.3.0",
+    "@vitest/coverage-v8": "^1.3.1",
     "@vue/test-utils": "^2.4.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.8.0",
     "body-scroll-lock": "4.0.0-beta.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "fuse.js": "^7.0.0",
-    "happy-dom": "^13.3.8",
+    "happy-dom": "^13.6.0",
     "histoire": "^0.16.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.0.0",
@@ -102,11 +102,11 @@
     "release-it": "^17.1.1",
     "typescript": "~5.3.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.1.3",
+    "vite": "^5.1.4",
     "vitepress": "1.0.0-rc.44",
-    "vitest": "^1.3.0",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5",
+    "vitest": "^1.3.1",
+    "vue": "^3.4.20",
+    "vue-router": "^4.3.0",
     "vue-tsc": "^1.8.27"
   }
 }