@veritree/ui 0.21.1-0 → 0.21.1-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.21.1-0",
+  "version": "0.21.1-2",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Avatar/VTAvatar.vue

@@ -1,14 +1,21 @@
 <template>
   <div
-    :class="{
-      Avatar: headless,
-      'flex items-center justify-center overflow-hidden rounded-full':
-        !headless,
-      'h-10 w-10': !small,
-      'h-8 w-8': small,
-      'border border-solid': !dark,
-      'bg-white text-fd-500': dark,
-    }"
+    :class="[
+      // default styles
+      headless
+        ? 'avatar'
+        : 'flex items-center justify-center overflow-hidden rounded-full bg-white border border-solid',
+      // variant styles
+      headless ? `avatar--${variant}` : null,
+      // sizes styles
+      headless
+        ? `avatar--${size}`
+        : isSmall
+        ? 'h-8 w-8'
+        : isLarge
+        ? 'h-10 w-10'
+        : null,
+    ]"
   >
     <slot></slot>
   </div>
@@ -18,32 +25,28 @@
 export default {
   name: 'VTAvatar',
 
-  provide() {
-    return {
-      api: () => {
-        const { dark: isDark, headless: isHeadless, light: isLight } = this;
-
-        return {
-          isDark,
-          isHeadless,
-          isLight,
-        };
-      },
-    };
-  },
-
   props: {
     headless: {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
+    variant: {
+      type: String,
+      default: 'primary',
     },
-    small: {
-      type: Boolean,
-      default: false,
+    size: {
+      type: String,
+      default: 'large',
+    },
+  },
+
+  computed: {
+    isLarge() {
+      return this.size === 'large';
+    },
+
+    isSmall() {
+      return this.size === 'small';
     },
   },
 };