fix(app): component types

package.json

@@ -24,9 +24,6 @@
     "postinstall": "npx simple-git-hooks",
     "major": "taze minor -wIr"
   },
-  "dependencies": {
-    "vue-ui-next": "^0.0.0"
-  },
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.8",
     "@iconify/vue": "^4.1.1",

packages/windi/src/App.vue

@@ -4,7 +4,7 @@
 <template>
   <div class="grid place-items-center w-full min-h-screen">
     <WKbd>M</WKbd>
-    <WKbd>B</WKbd>
+    <WKbd>M</WKbd>
     <!-- <WBadge position="top-right" value="100" :max-value="99" color="lime">
       <WIcon name="ph:bell" size="3xl" />
     </WBadge> -->

packages/windi/src/Types/enums/Variants.ts

@@ -1,5 +1,4 @@
 export enum Variants {
-  DEFAULT = 'default',
   PRIMARY = 'primary',
   SUCCESS = 'success',
   WARNING = 'warning',

packages/windi/src/components/Kbd/WKbd.vue

@@ -2,6 +2,7 @@
 import { computed, defineComponent } from 'vue'
 import classNames from 'classnames'
 import { Components } from '../../Types/enums/Components'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
 import type { WKbd } from '../../Types/componentsTypes/components'
 import { useVariants } from '../../composables/useVariants.ts'
@@ -20,14 +21,23 @@ const props = defineProps({
   },
 })
 
-const variant = useVariants<WKbd>(Components.WKbd, props)
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+  }
+  return useVariants<WKbd>(
+    Components.WKbd,
+    customProps as VariantJSWithClassesListProps<WKbd>,
+  )
+})
+// const variant = useVariants<WKbd>(Components.WKbd, props)
 const kbdWrapperClass = computed(() => {
   return classNames(
-    variant.root,
-    variant.KbdRounded,
-    variant.KbdFont,
-    variant.KbdBackground,
-    variant.KbdRing,
+    variant.value.root,
+    variant.value.KbdRounded,
+    variant.value.KbdFont,
+    variant.value.KbdBackground,
+    variant.value.KbdRing,
     windiTheme.WKbd.base.KbdSize[props.size],
   )
 })

packages/windi/src/theme/windiTheme.ts

@@ -494,11 +494,13 @@ export default {
     },
 
     variants: {
-      root: 'inline-flex items-center justify-center text-gray-900 px-1 dark:text-white',
-      KbdRounded: 'rounded',
-      KbdFont: 'font-medium',
-      KbdBackground: 'bg-gray-100 dark:bg-gray-800',
-      KbdRing: 'ring-1 ring-gray-300 ring-inset dark:ring-gray-700',
+      default: {
+        root: 'inline-flex items-center justify-center text-gray-900 px-1 dark:text-white',
+        KbdRounded: 'rounded',
+        KbdFont: 'font-medium',
+        KbdBackground: 'bg-gray-100 dark:bg-gray-800',
+        KbdRing: 'ring-1 ring-gray-300 ring-inset dark:ring-gray-700',
+      },
     },
   },
   transitions: {

playground/playground.config.ts

@@ -32,22 +32,22 @@ export default {
       path: '/dist/shared.esm-bundler.js',
       source: 'jsdelivr',
     },
-    '@selemondev/windi-ui': {
-      pkg: '@selemondev/windi-ui',
-      version: 'latest',
-      path: '/dist/@selemondev/windi-ui.js',
-      source: 'jsdelivr',
-      cssPath: '@selemondev/windi-ui/dist/theme/windiTheme',
-    }
+    // '@selemondev/windi-ui': {
+    //   pkg: '@selemondev/windi-ui',
+    //   version: 'latest',
+    //   path: '/dist/@selemondev/windi-ui.js',
+    //   source: 'jsdelivr',
+    //   cssPath: '@selemondev/windi-ui/dist/theme/windiTheme',
+    // }
   } as Record<string, Dependency>,
   cdnUrl: {
     skypack: 'https://cdn.skypack.dev/',
     jsdelivr: 'https://cdn.jsdelivr.net/npm/',
   },
   devDeps: {
-    '@selemondev/windi-ui': {
-      path: `${location.origin}/play/src/vue-ui-next-dev-proxy`,
-    },
+    // '@selemondev/windi-ui': {
+    //   path: `${location.origin}/play/src/vue-ui-next-dev-proxy`,
+    // },
     'vue': {
       path: `${location.origin}/play/src/vue-dev-proxy`,
     },

playground/src/components/Header.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 // import { OMessage as message } from 'onu-ui'
 import type { ComputedRef } from 'vue'
-import { UPopover, UIcon } from 'vue-ui-next'
 import Logo from "../public/windi.png";
 import { Icon } from "@iconify/vue";
 // import type { OMessageProps } from 'onu-ui'
@@ -82,7 +81,7 @@ async function copyLink() {
         <div flex items-center justify-around m-2>
             <div v-for="(v, key) of versions" :key="key" flex mx-6 items-center>
                 <span dark-text-gray-300 font-bold text-base>{{ v.text }} Version:</span>
-                <UPopover>
+                <!-- <UPopover>
                     <div px-12px text-lg cursor-pointer text-stone-600 dark-text-gray-100 flex items-center>
                         <span text-base>{{ v.active }}</span>
                         <UIcon name="material-symbols:keyboard-arrow-down" ml-2 />
@@ -96,10 +95,10 @@ async function copyLink() {
                             </p>
                         </div>
                     </template>
-                </UPopover>
+                </UPopover> -->
             </div>
 
-            <a href="https://vuejs.org/" target="_blank" class="header-a">
+            <!-- <a href="https://vuejs.org/" target="_blank" class="header-a">
                 <Icon h-5 w-5 mx-2 icon="logos:vue" />
             </a>
 
@@ -114,11 +113,11 @@ async function copyLink() {
             <a class="header-a" cursor-pointer @click.prevent="toggleTheme()">
                 <Icon v-if="appDark" h-5 w-5 mx-2 dark-text-white o="gray" icon="ph:moon" />
                 <Icon v-else h-5 w-5 mx-2 dark-text-white o="gray" icon="ph:sun" />
-            </a>
+            </a> -->
 
-            <a class="header-a" cursor-pointer @click.prevent="copyLink">
+            <!-- <a class="header-a" cursor-pointer @click.prevent="copyLink">
                 <Icon h-5 w-5 mx-2 dark-text-white o="gray" icon="ph:share-network" />
-            </a>
+            </a> -->
         </div>
     </nav>
 </template>