fix(app): theme

selemondev · Jul 30, 2023 · 5db0a94 · 5db0a94
1 parent 6249953
commit 5db0a94
Show file tree

Hide file tree

Showing 21 changed files with 136 additions and 297 deletions.
diff --git a/example/index.html b/example/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Windi UI</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/example/package.json b/example/package.json
@@ -13,6 +13,7 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@selemondev/windi-ui": "workspace:^",
     "@tsconfig/node18": "^18.2.0",
     "@types/node": "^20.4.5",
     "@vitejs/plugin-vue": "^4.2.3",
@@ -21,7 +22,6 @@
     "npm-run-all": "^4.1.5",
     "typescript": "~5.1.6",
     "vite": "^4.4.7",
-    "vue-tsc": "^1.8.8",
-    "windi-ui": "workspace:^"
+    "vue-tsc": "^1.8.8"
   }
 }
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,33 +1,15 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
-
-const show = ref(true)
-
-function handleClose() {
-  return show.value = false
-}
 </script>
 
 <template>
-  <div class="mt-48 p-4 space-y-2">
-    <WAvatar src="https://github.cm/selemondev.png" name="Selemon" chip-position="top-right" initials="SB" chip-color="red" />
-
-    <WAlert :is-visible="show" icon="ph:sun" :trailing="false" variant="success-light" transition="slideRight" title="Alert" closable @close="handleClose">
-      <WAlertDescription>
-        Hello from alert
-      </WAlertDescription>
-    </WAlert>
-
-    <WAlert variant="primary" transition="fade" title="Alert" closable>
-      <WAlertDescription>
-        Hello from alert
-      </WAlertDescription>
-    </WAlert>
-
-    <WAlert variant="primary-dashed" transition="slideLeft" title="Alert" closable>
-      <WAlertDescription>
-        Hello from alert
-      </WAlertDescription>
-    </WAlert>
+  <div class="grid place-items-center w-full min-h-screen">
+    <div class="space-y-2">
+      <WButton icon="ph:reddit-logo" :trailing="false" label="Reddit" variant="outline" size="lg" />
+      <!-- <WButtonGroup >
+        <WButton icon="bxl:meta" :trailing="false" variant="primary" size="lg" />
+        <WButton icon="ic:round-play-arrow" :trailing="false" variant="danger" size="lg" />
+        <WButton icon="ph:reddit-logo" :trailing="false" variant="warning" size="lg" />
+      </WButtonGroup> -->
+    </div>
   </div>
-</template>
+</template>
diff --git a/example/src/main.ts b/example/src/main.ts
@@ -3,7 +3,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import install from "windi-ui"
 import config from "windi-ui/dist/theme/windiTheme"
-import myTheme from "./theme/myTheme"
 const app = createApp(App)
 app.use(install, config)
 app.mount('#app')
diff --git a/example/src/theme/myTheme.ts b/example/src/theme/myTheme.ts
diff --git a/package.json b/package.json
@@ -60,8 +60,7 @@
     "vitepress-plugin-search": "1.0.4-alpha.20",
     "vitest": "^0.33.0",
     "vue": "^3.3.4",
-    "vue-tsc": "^1.8.8",
-    "windi-ui": "workspace:*"
+    "vue-tsc": "^1.8.8"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

diff --git a/packages/windi/package.json b/packages/windi/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "windi-ui",
-  "version": "0.0.0",
+  "name": "@selemondev/windi-ui",
+  "version": "0.0.6",
   "packageManager": "pnpm@8.6.10",
   "description": "Build Accessible Apps 10x faster",
   "author": "Selemondev",

diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
@@ -2,6 +2,10 @@
 import { ref } from 'vue'
 
 const show = ref(true)
+const loading = ref(true)
+setTimeout(() => {
+  loading.value = false
+}, 5000)
 
 function handleClose() {
   return show.value = false
@@ -10,30 +14,38 @@ function handleClose() {
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WAvatar src="https://github.cm/selemondev.png" name="Selemon" size="xl" chip-color="orange" chip-position="bottom-left" initials="SB" />
+    <div class="w-96">
+      <WAlert :is-visible="show" icon="ph:sun" :trailing="false" variant="default-outline" transition="fade" title="Alert" closable @close="handleClose">
+        <!-- <WAlertDescription>
+          Hello from alert
+        </WAlertDescription> -->
+      </WAlert>
+    </div>
+    <!-- <WButton icon="ph:reddit-logo" :trailing="false" label="Reddit" :loading="loading" :variant="[loading ? 'default-disabled' : 'default']" size="2xl" /> -->
+    <!-- <WAvatar src="https://github.cm/selemondev.png" name="Selemon" size="xl" chip-color="orange" chip-position="bottom-left" initials="SB" />
     <WBadge position="top-right" value="100" :max-value="99" variant="primary">
       <WIcon name="ph:bell" size="3xl" />
-    </WBadge>
-    <WAlert :is-visible="show" icon="ph:sun" :trailing="false" variant="primary" transition="slideLeft" title="Alert" closable @close="handleClose">
+    </WBadge> -->
+    <!-- <WAlert :is-visible="show" icon="ph:sun" :trailing="false" variant="primary" transition="slideLeft" title="Alert" closable @close="handleClose">
       <WAlertDescription>
         Hello from alert
       </WAlertDescription>
-    </WAlert>
-    <WButton icon="ph:sun" variant="warning-light" size="xl" type="button" />
+    </WAlert> -->
+    <!-- <WButton icon="ph:sun" variant="warning-light" size="xl" type="button" />
     <WButtonGroup>
       <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
       <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
       <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
-    </WButtonGroup>
+    </WButtonGroup> -->
   </div>
-  <div class="grid place-items-center">
+  <!-- <div class="grid place-items-center">
     <WAvatarGroup :max="2" size="md">
       <WAvatar src="https://github.com/selemondev.png" name="Selemon" initials="SB" />
       <WAvatar src="https://github.com/selemondev.png" name="Selemon" initials="SB" />
       <WAvatar src="https://github.cm/selemondev.png" name="Selemon" initials="SB" />
     </WAvatarGroup>
-  </div>
-  <div class="mt-48 p-4 space-y-2">
+  </div> -->
+  <!-- <div class="mt-48 p-4 space-y-2">
     <WAlert variant="primary" transition="fade" title="Alert" closable>
       <WAlertDescription>
         Hello from alert
@@ -45,5 +57,5 @@ function handleClose() {
         Hello from alert
       </WAlertDescription>
     </WAlert>
-  </div>
+  </div> -->
 </template>
diff --git a/packages/windi/src/Types/enums/Variants.ts b/packages/windi/src/Types/enums/Variants.ts
@@ -1,4 +1,5 @@
 export enum Variants {
+  DEFAULT = 'default',
   PRIMARY = 'primary',
   SUCCESS = 'success',
   WARNING = 'warning',