feat(preset-theme-default)!: preset theme default is now separate pkg

therealokoro · Nov 29, 2022 · ceb82eb · ceb82eb
1 parent 36df27f
commit ceb82eb
Show file tree

Hide file tree

Showing 39 changed files with 718 additions and 1,045 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -80,6 +80,8 @@
     // Extention: Code Spell Checker
     "cSpell.words": [
         "composables",
+        "defu",
+        "nuxt",
         "Vite",
         "vitepress",
         "Vuetify's"

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -128,7 +128,7 @@ export default defineConfig({
     ],
     resolve: {
       alias: {
-        '@anu-vue': fileURLToPath(new URL('../../packages/anu-vue', import.meta.url)),
+        '@anu': fileURLToPath(new URL('../../packages/anu-vue', import.meta.url)),
       },
     },
   },

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,3 +1,4 @@
+import '@anu-vue/preset-theme-default/dist/styles.scss'
 import { anu } from 'anu-vue'
 import 'anu-vue/dist/style.css'
 import 'uno.css'

diff --git a/docs/guide/base-components/typography.md b/docs/guide/base-components/typography.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ATypography.json';
+import api from '@anu/component-meta/ATypography.json';
 </script>
 
 # Typography

diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/AAlert.json';
+import api from '@anu/component-meta/AAlert.json';
 </script>
 
 # Alert

diff --git a/docs/guide/components/avatar.md b/docs/guide/components/avatar.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/AAvatar.json'
+import api from '@anu/component-meta/AAvatar.json'
 </script>
 
 # Avatar

diff --git a/docs/guide/components/button.md b/docs/guide/components/button.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ABtn.json'
+import api from '@anu/component-meta/ABtn.json'
 </script>
 
 # Button

diff --git a/docs/guide/components/card.md b/docs/guide/components/card.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ACard.json';
+import api from '@anu/component-meta/ACard.json';
 </script>
 
 # Card

diff --git a/docs/guide/components/checkbox.md b/docs/guide/components/checkbox.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ACheckbox.json'
+import api from '@anu/component-meta/ACheckbox.json'
 </script>
 
 # Checkbox

diff --git a/docs/guide/components/chip.md b/docs/guide/components/chip.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/AChip.json';
+import api from '@anu/component-meta/AChip.json';
 </script>
 
 # Chip

diff --git a/docs/guide/components/dialog.md b/docs/guide/components/dialog.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ADialog.json'
+import api from '@anu/component-meta/ADialog.json'
 </script>
 
 # Dialog

diff --git a/docs/guide/components/drawer.md b/docs/guide/components/drawer.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ADrawer.json'
+import api from '@anu/component-meta/ADrawer.json'
 </script>
 
 # Drawer

diff --git a/docs/guide/components/input.md b/docs/guide/components/input.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/AInput.json'
+import api from '@anu/component-meta/AInput.json'
 </script>
 
 # Input

diff --git a/docs/guide/components/list.md b/docs/guide/components/list.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/AList.json';
+import api from '@anu/component-meta/AList.json';
 </script>
 
 # List

diff --git a/docs/guide/components/menu.md b/docs/guide/components/menu.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/AMenu.json'
+import api from '@anu/component-meta/AMenu.json'
 </script>
 
 # Menu

diff --git a/docs/guide/components/radio.md b/docs/guide/components/radio.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ARadio.json'
+import api from '@anu/component-meta/ARadio.json'
 </script>
 
 # Radio

diff --git a/docs/guide/components/rating.md b/docs/guide/components/rating.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ARating.json';
+import api from '@anu/component-meta/ARating.json';
 </script>
 
 # Rating

diff --git a/docs/guide/components/select.md b/docs/guide/components/select.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ASelect.json'
+import api from '@anu/component-meta/ASelect.json'
 </script>
 
 # Select

diff --git a/docs/guide/components/switch.md b/docs/guide/components/switch.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ASwitch.json'
+import api from '@anu/component-meta/ASwitch.json'
 </script>
 
 # Switch

diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ATable.json'
+import api from '@anu/component-meta/ATable.json'
 </script>
 
 # Table

diff --git a/docs/guide/components/textarea.md b/docs/guide/components/textarea.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu-vue/component-meta/ATextarea.json'
+import api from '@anu/component-meta/ATextarea.json'
 </script>
 
 # Textarea

diff --git a/docs/guide/getting-started/installation.md b/docs/guide/getting-started/installation.md
@@ -6,13 +6,13 @@
 
     ```bash
     # pnpm
-    pnpm add anu-vue && pnpm add -D unocss @iconify-json/bx
+    pnpm add anu-vue && pnpm add -D @anu-vue/preset-theme-default unocss @iconify-json/bx
 
     # yarn
-    yarn add anu-vue && yarn add -D unocss @iconify-json/bx
+    yarn add anu-vue && yarn add -D @anu-vue/preset-theme-default unocss @iconify-json/bx
 
     # npm
-    npm install anu-vue && npm install -D unocss @iconify-json/bx
+    npm install anu-vue && npm install -D @anu-vue/preset-theme-default unocss @iconify-json/bx
     ```
 
 ## Usage
@@ -31,8 +31,9 @@
 
 2. Create UnoCSS Config file `uno.config.js` in root of the project with below content:
 
-    ```ts{14}
-    import { presetCore, presetThemeDefault } from 'anu-vue'
+    ```ts
+    import { presetAnu, presetIconExtraProperties } from 'anu-vue'
+    import { presetThemeDefault } from '@anu-vue/preset-theme-default'
     import {
       defineConfig,
       presetIcons,
@@ -44,42 +45,35 @@
         presetUno(),
         presetIcons({
           scale: 1.2,
-          extraProperties: {
-            height: '1.5em',
-            'flex-shrink': '0',
-            'display': 'inline-block',
-          },
+          extraProperties: presetIconExtraProperties,
         }),
 
-        // anu-vue presets
-        presetCore(),
+        // anu-vue preset
+        presetAnu(),
+
+        // default theme preset
         presetThemeDefault(),
       ],
       include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
     })
     ```
 
-    :::details Icon height alignment
-
-    Update highlighted line in above code snippet according line height in your app using `em` unit.
-
-    e.g. For VitePress line height of paragraph is `24px`. Hence, we have height of `1.5em` in docs.
-
-    :::
-
 3. Update your `main.js` file like below:
 
-    ```js{3,5-6,8-9,13}
+    ```js{3,5-6,8-9,13,11-12,15-16}
     import { createApp } from 'vue'
     import App from './App.vue'
     import { anu } from 'anu-vue'
 
     // UnoCSS import
     import 'uno.css'
 
-    // import styles
+    // anu styles
     import 'anu-vue/dist/style.css'
 
+    // default theme styles
+    import '@anu-vue/preset-theme-default/dist/styles.scss'
+
     // Using `app.use(anu)` will register all the components globally
     createApp(App)
       .use(anu)
@@ -88,20 +82,6 @@
 
 It's done! 🥳
 
-
-## Volar Support 
-If you are using Volar, you can specify global component types by configuring compilerOptions.types in tsconfig.json.
-
-// tsconfig.json
-```json
-{
-  "compilerOptions": {
-    // ...
-    "types": ["anu-vue/volar"]
-  }
-}
-```
-
 Now, Just refer to the component in your vue files:
 
 ```vue
@@ -199,3 +179,20 @@ You can also follow À la carte fashion if you don't want to register all the co
       <ABtn>Primary</ABtn>
     </template>
     ```
+
+## Volar Support
+
+If you are using [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar), you can specify global component types by adding below configuration in your [`jsconfig.json`](https://code.visualstudio.com/docs/languages/jsconfig).
+
+```json
+{
+  "compilerOptions": {
+    // ...
+    "types": ["anu-vue/volar"]
+  }
+}
+```
+
+If you have typescript project, you have to configure above in `tsconfig.json` file.
+
+That's it, enjoy the autocompletion 🥳
diff --git a/docs/package.json b/docs/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@vueuse/core": "^9.6.0",
     "anu-vue": "workspace:*",
+    "@anu-vue/preset-theme-default": "workspace:*",
     "vee-validate": "^4.7.3",
     "vue": "^3.2.45"
   }

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -1,4 +1,5 @@
 {
+    "extends": "../tsconfig.json",
     "compilerOptions": {
         "baseUrl": ".",
         "resolveJsonModule": true,

diff --git a/docs/uno.config.ts b/docs/uno.config.ts
@@ -1,37 +1,35 @@
-import { presetCore, presetThemeDefault } from 'anu-vue'
+import { presetAnu, presetIconExtraProperties } from 'anu-vue'
 import {
   defineConfig,
   presetIcons,
   presetUno,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import { presetThemeDefault } from '../packages/preset-theme-default/src/index'
 
 export default defineConfig({
   presets: [
     presetUno(),
     presetIcons({
       scale: 1.2,
       unit: 'em',
-      extraProperties: {
-        'height': '1.2em',
-        'width': '1.2em',
-
-        // ℹ️ We also have to find a way to inject this without this config. (e.g. [class^=i-])
-        'vertical-align': 'text-top',
-        'flex-shrink': '0',
-        'display': 'inline-block',
-      },
+      extraProperties: presetIconExtraProperties,
     }),
 
     // anu-vue presets
-    presetCore(),
+    presetAnu(),
     presetThemeDefault(),
   ],
   transformers: [
     transformerVariantGroup(),
     transformerDirectives(),
   ],
-  configDeps: ['../anu-vue/src/presets/theme-default/index.ts'],
+  configDeps: [
+    '../packages/preset-theme-default/src/shortcuts.ts',
+    '../packages/preset-theme-default/src/rules.ts',
+    '../packages/preset-theme-default/src/variants.ts',
+    '../packages/preset-theme-default/src/index.ts',
+  ],
   include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
 })
diff --git a/package.json b/package.json
@@ -5,12 +5,12 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "dev": "pnpm --filter anu-vue dev",
-    "build": "pnpm --filter anu-vue build",
+    "dev": "pnpm --filter @anu-vue/preset-theme-default stub && pnpm --filter anu-vue dev",
+    "build": "pnpm --filter @anu-vue/preset-theme-default build && pnpm --filter anu-vue build && pnpm --filter @anu-vue/nuxt build",
     "docs:dev": "pnpm --filter @anu-vue/documentation dev",
     "docs:build": "pnpm --filter anu-vue build && pnpm --filter @anu-vue/documentation build",
-    "clean": "rimraf packages/anu-vue/dist && rimraf packages/anu-nuxt/dist",
-    "release": "bumpp package.json packages/anu-vue/package.json --execute 'pnpm --filter anu-vue build' && na --filter anu-vue publish --no-git-checks",
+    "clean": "rimraf packages/anu-vue/dist && rimraf packages/anu-nuxt/dist && rimraf packages/preset-theme-default/dist",
+    "release": "bumpp package.json packages/**/package.json --execute 'pnpm build' && pnpm -r publish --no-git-checks",
     "lint": "pnpm --filter anu-vue lint",
     "update:deps": "taze -r -w"
   },
@@ -36,9 +36,8 @@
     "fast-glob": "^3.2.12",
     "pnpm": "^7.17.1",
     "rimraf": "^3.0.2",
-    "taze": "^0.8.4",
-    "tsx": "^3.12.1",
-    "vue-component-meta": "^1.0.9"
+    "tsx": "^3.10.4",
+    "vue-component-meta": "^1.0.8"
   },
   "packageManager": "pnpm@7.1.7"
 }
diff --git a/packages/anu-vue/package.json b/packages/anu-vue/package.json
@@ -44,9 +44,8 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.7",
-    "defu": "^6.1.1",
-    "vue": "^3.2.45"
+    "@floating-ui/dom": "^1.0.3",
+    "vue": "^3.2.41"
   },
   "devDependencies": {
     "@unocss/core": "^0.46.5",