move to pnpm workspaces

.editorconfig

@@ -1,15 +1,14 @@
-
 # Editor configuration, see https://editorconfig.org
 root = true
 
 [*]
 charset = utf-8
-end_of_line = auto
+end_of_line = lf
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 indent_size = 2
 
 [*.md]
 max_line_length = off
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

.gitattributes

@@ -1,2 +1,5 @@
 # Enforce Unix newlines
-* text=auto eol=lf
+* text=auto eol=lf
+
+# Fix syntax highlighting on GitHub to allow comments
+.vscode/*.json linguist-language=JSON-with-Comments

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

.prettierrc.mjs

@@ -0,0 +1,6 @@
+import config from "@lehoczky/prettier-config"
+
+/** @type {import("prettier").Options} */
+export default {
+  ...config,
+}

.vscode/extensions.json

@@ -3,7 +3,7 @@
     "editorconfig.editorconfig",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "stylelint.vscode-stylelint",
-    "octref.vetur"
+    "github.vscode-github-actions",
+    "vue.volar"
   ]
 }

.vscode/settings.json

@@ -1,17 +1,13 @@
 {
   "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit"
   },
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "eslint.validate": ["javascript", "typescript", "yaml", "vue"],
-  "css.validate": false,
-  "stylelint.validate": ["css", "postcss"],
-  "cSpell.words": ["Termynal", "vuepress"]
+  "css.customData": [".vscode/tailwind.json"],
+  "cSpell.words": ["Termynal", "vuepress"],
+  "editor.wordWrapColumn": 80,
+  "[markdown]": {
+    "editor.wordWrap": "wordWrapColumn"
+  }
 }

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

eslint.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+import { configLehoczkyVue } from "@lehoczky/eslint-config-vue"
+
+/** @type {import("eslint").Linter.Config[]} */
+export default [
+  ...configLehoczkyVue(),
+  {
+    files: ["packages/playground/**"],
+    rules: { "no-console": "off" },
+  },
+]