Merge pull request #22 from cometui/ui_package_structure

apps/playground/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@blank/tailwindcss": "workspace:^",
     "@blank/vue": "workspace:^",
-    "tsconfig": "^7.0.0",
+    "tsconfig": "^0.0.1",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
@@ -25,16 +25,13 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/tsconfig": "^0.3.0",
-    "autoprefixer": "^10.4.14",
+    "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.34.0",
     "eslint-plugin-vue": "^9.9.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.23",
     "prettier": "^2.8.4",
-    "tailwindcss": "^3.3.2",
-    "typescript": "~5.0.0",
-    "vite": "^3.2.6",
+    "typescript": "~4.8.4",
+    "vite": "^4.1.4",
     "vue-tsc": "^1.2.0"
   }
 }

apps/playground/src/main.ts

@@ -3,8 +3,7 @@ import blankvue from '@blank/vue'
 import App from './App.vue'
 import router from './router'
 
-import 'tailwindcss/tailwind.css'
-import './styles/tailwind.css'
+import '@blank/vue/style'
 
 const app = createApp(App)
 

apps/playground/src/views/HomeView.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { Button } from '@blank/vue'
+import { Button, Checkbox } from '@blank/vue'
 </script>
 
 <template>
   <main class="h-screen w-full">
-    <Button> Hello world </Button>
+    <Button>Hello world </Button>
+    <Button>hello world</Button>
+    <Checkbox label="Hello World" />
     <div>
       <h1>test</h1>
       <h2>test</h2>

packages/vue/package.json

@@ -5,7 +5,8 @@
     ".": {
       "require": "./dist/index.umd.js",
       "import": "./dist/index.es.js"
-    }
+    },
+    "./style": "./dist/style.css"
   },
   "main": "./dist/index.umd.js",
   "module": "./dist/index.cjs.js",
@@ -15,10 +16,12 @@
   ],
   "scripts": {
     "dev": "vite build --watch",
-    "build": "run-p type-check build-only",
+    "build": "run-p type-check build-only && pnpm build:tailwind",
     "preview": "vite preview",
     "test:unit": "vitest --environment jsdom --root src/",
     "build-only": "vite build",
+    "build:tailwind": "pnpm tailwindcss -i ./src/styles/main.css -o ./dist/style.css",
+    "dev:tailwind": "tailwindcss -i ./src/styles/main.css -o ./dist/style.css --watch",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
@@ -28,31 +31,35 @@
   },
   "dependencies": {
     "@babel/types": "^7.20.2",
+    "@blank/tailwindcss": "workspace:^",
     "@zag-js/checkbox": "^0.7.0",
     "@zag-js/vue": "^0.7.0",
     "rollup-plugin-typescript2": "^0.34.1",
-    "vite-plugin-dts": "^2.0.0",
+    "vite-plugin-dts": "^1.7.1",
     "vue": "^3.2.41"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.5",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/jsdom": "^20.0.0",
-    "@types/node": "^18.14.2",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@types/node": "^16.11.68",
+    "@vitejs/plugin-vue": "^3.1.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.1.0",
-    "@vue/tsconfig": "^0.3.0",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.14",
     "eslint": "^8.34.0",
     "eslint-plugin-vue": "^9.3.0",
-    "jsdom": "^22.0.0",
+    "jsdom": "^20.0.1",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.23",
     "prettier": "^2.7.1",
+    "tailwindcss": "^3.3.2",
     "typescript": "~4.7.4",
-    "vite": "^4.0.0",
+    "vite": "^3.1.8",
     "vite-plugin-externals": "^0.6.2",
-    "vitest": "^0.31.0",
+    "vitest": "^0.24.3",
     "vue-tsc": "^1.0.8"
   }
 }

packages/vue/src/components/Checkbox/Checkox.vue → packages/vue/src/components/Checkbox/Checkbox.vue

@@ -1,8 +1,16 @@
-<script setup>
+<script lang="ts" setup>
 import * as checkbox from '@zag-js/checkbox'
 import { normalizeProps, useMachine } from '@zag-js/vue'
 import { computed } from 'vue'
 
+interface CheckboxProps {
+  label?: string
+}
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  label: 'hello',
+})
+
 const [state, send] = useMachine(checkbox.machine({ id: '1' }))
 
 const api = computed(() =>
@@ -13,7 +21,7 @@ const api = computed(() =>
 <template>
   <label class="bg-red-500 hover:bg-blue-500 text-black" v-bind="api.rootProps">
     <span v-bind="api.labelProps">
-      Input is
+      {{ props.label }}
       <span v-if="api.isChecked"> checked</span>
       <span v-else> unchecked</span>
     </span>

packages/vue/src/index.ts

@@ -1,6 +1,6 @@
 import type { Plugin } from 'vue'
 
-import Checkbox from './components/Checkbox/Checkox.vue'
+import Checkbox from './components/Checkbox/Checkbox.vue'
 import Button from './components/Button/Button.vue'
 
 interface PluginOptions {}

apps/playground/tailwind.config.js → packages/vue/tailwind.config.js

@@ -3,7 +3,6 @@ export default {
   content: [
     './index.html',
     './src/**/*.{vue,js,ts,jsx,tsx}',
-    '../../packages/vue/**/*.{vue, js}',
   ],
   theme: {
     extend: {},