radix done

idmytro · Feb 4, 2024 · 89ce9f1 · 89ce9f1
1 parent c6a69b4
commit 89ce9f1
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 2 deletions.
diff --git a/_2024-radix-vue/components.d.ts b/_2024-radix-vue/components.d.ts
@@ -0,0 +1,15 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AvatarFallback: typeof import('radix-vue')['AvatarFallback']
+    AvatarImage: typeof import('radix-vue')['AvatarImage']
+    AvatarRoot: typeof import('radix-vue')['AvatarRoot']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+  }
+}
diff --git a/_2024-radix-vue/package.json b/_2024-radix-vue/package.json
@@ -9,6 +9,8 @@
     "lint": "eslint . --ext .ts,.js,.vue"
   },
   "dependencies": {
+    "@radix-ui/colors": "^3.0.0",
+    "radix-vue": "^1.4.0",
     "vue": "^3.4.9"
   },
   "devDependencies": {
@@ -18,6 +20,7 @@
     "eslint-plugin-no-autofix": "^1.2.3",
     "typescript": "5.0.4",
     "unplugin-auto-import": "^0.17.3",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.0.11",
     "vue-tsc": "^1.8.27"
   }

diff --git a/_2024-radix-vue/pnpm-lock.yaml b/_2024-radix-vue/pnpm-lock.yaml
diff --git a/_2024-radix-vue/src/components/HelloWorld.vue b/_2024-radix-vue/src/components/HelloWorld.vue
@@ -7,6 +7,40 @@ const count = ref(0)
 <template>
   <h1>{{ msg }}</h1>
 
+  <div :style="{ display: 'flex', gap: '20px', justifyContent: 'center' }">
+    <AvatarRoot class="AvatarRoot">
+      <AvatarImage
+        class="AvatarImage"
+        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
+        alt="Colm Tuite"
+      />
+      <AvatarFallback
+        class="AvatarFallback"
+        :delay-ms="600"
+      >
+        CT
+      </AvatarFallback>
+    </AvatarRoot>
+    <AvatarRoot class="AvatarRoot">
+      <AvatarImage
+        class="AvatarImage"
+        src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
+        alt="Pedro Duarte"
+      />
+      <AvatarFallback
+        class="AvatarFallback"
+        :delay-ms="600"
+      >
+        JD
+      </AvatarFallback>
+    </AvatarRoot>
+    <AvatarRoot class="AvatarRoot">
+      <AvatarFallback class="AvatarFallback">
+        PD
+      </AvatarFallback>
+    </AvatarRoot>
+  </div>
+
   <div class="card">
     <button type="button" @click="count++">
       count is {{ count }}
@@ -31,8 +65,44 @@ const count = ref(0)
   </p>
 </template>
 
-<style scoped>
+<style>
+@import '@radix-ui/colors/black-alpha.css';
+@import '@radix-ui/colors/grass.css';
+
 .read-the-docs {
   color: #888;
 }
+
+.AvatarRoot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  width: 45px;
+  height: 45px;
+  border-radius: 100%;
+  background-color: var(--black-a3);
+}
+
+.AvatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.AvatarFallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  color: var(--grass-11);
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+}
 </style>
diff --git a/_2024-radix-vue/vite.config.ts b/_2024-radix-vue/vite.config.ts
@@ -1,6 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
+import Component from 'unplugin-vue-components/vite'
+
+// @ts-expect-error import works if radix-vue installed
+import RadixVueResolver from 'radix-vue/resolver'
 
 export default defineConfig({
   plugins: [
@@ -11,5 +15,15 @@ export default defineConfig({
       ],
       dts: './src/auto-imports.d.ts',
     }),
+    Component({
+      dts: true,
+      resolvers: [
+        RadixVueResolver(),
+
+        // RadixVueResolver({
+        //   prefix: '' // use the prefix option to add Prefix to the imported components
+        // })
+      ],
+    }),
   ],
 })