@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/README.md

@@ -1,8 +1,8 @@
 # Sefirot
 
 [![GitHub Actions](https://github.com/globalbrain/sefirot/workflows/Test/badge.svg)](https://github.com/globalbrain/sefirot/actions)
-[![Codecov](https://codecov.io/gh/globalbrain/sefirot/branch/master/graph/badge.svg)](https://codecov.io/gh/globalbrain/sefirot)
-[![License](https://img.shields.io/npm/l/@globalbrain/sefirot.svg)](https://github.com/globalbrain/sefirot/blob/master/LICENSE.md)
+[![Codecov](https://codecov.io/gh/globalbrain/sefirot/branch/main/graph/badge.svg)](https://codecov.io/gh/globalbrain/sefirot)
+[![License](https://img.shields.io/npm/l/@globalbrain/sefirot.svg)](https://github.com/globalbrain/sefirot/blob/main/LICENSE.md)
 
 Sefirot is a collection of Vue Components for Global Brain Design System. Components are meant to be clean, sophisticated, and scalable.
 
@@ -28,25 +28,25 @@ Sefirot follows the official [Vue Style Guide](https://v3.vuejs.org/style-guide/
 ### Development
 
 ```bash
-$ yarn serve
+$ pnpm run serve
 ```
 
 Serve documentation website at http://localhost:3000.
 
 ```bash
-$ yarn lint
+$ pnpm run lint
 ```
 
 Lint files using a rule of Standard JS.
 
 ```bash
-$ yarn test
+$ pnpm test
 ```
 
 Run the tests.
 
 ```bash
-$ yarn coverage
+$ pnpm run coverage
 ```
 
 Output test coverage in `coverage` directory.

package/lib/components/SAvatar.vue

@@ -1,33 +1,33 @@
-<template>
-  <div class="SAvatar" :class="classes">
-    <img v-if="avatar" class="img" :src="avatar">
-    <p v-else class="initial">{{ initial }}</p>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { computed } from 'vue'
 
-type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large'
+export type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large'
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'medium' },
-  avatar: { type: String, required: true },
-  name: { type: String, default: '' }
-})
+const props = defineProps<{
+  size?: Size
+  avatar?: string | null
+  name?: string | null
+}>()
 
-const classes = computed(() => [props.size])
+const classes = computed(() => [props.size ?? 'medium'])
 
-const initial = computed(() => props.name.charAt(0).toUpperCase())
+const initial = computed(() => props.name?.charAt(0).toUpperCase())
 </script>
 
+<template>
+  <div class="SAvatar" :class="classes">
+    <img v-if="avatar" class="img" :src="avatar">
+    <p v-else class="initial">{{ initial }}</p>
+  </div>
+</template>
+
 <style lang="postcss" scoped>
 .SAvatar {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  background-color: var(--c-bg-mute);
+  background-color: var(--c-bg-elv-down);
   overflow: hidden;
 }