chore: refactor composables

.github/ISSUE_TEMPLATE/bug-template.md

@@ -6,7 +6,7 @@ assignees: ''
 
 ---
 
-**Vuestic-ui version:** 1.9.12
+**Vuestic-ui version:** 1.10.2
 
 ### Description
 

.gitignore

@@ -28,3 +28,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Local Netlify folder
+.netlify

.nvmrc

@@ -1 +1 @@
-v18.20.2
+v18.20.2

README.md

@@ -66,6 +66,8 @@ Documentation, guides, examples and tutorials are available on [ui.vuestic.dev](
 
 <br />
 
+<a href="https://www.netlify.com"> <img src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify" /> </a>
+
 Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test using all possible browsers.
 
 Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and prevent visual regressions.
@@ -107,7 +109,12 @@ Say hi: <a href="mailto:[email protected]">[email protected]</a>. We will be happy
 
 [Other work](https://epicmax.co) we’ve done 🤘
 
-[Meet the Team](https://vuestic.dev/team)
+[Meet the Team](https://ui.vuestic.dev/introduction/team)
+
+### Premium Support and Consulting
+Get Premium Support & Consulting services through our official development partner, Epicmax. As the main contributor to Vuestic UI and Vuestic Admin, Epicmax brings a wealth of expertise and experience to help you achieve your project goals efficiently and effectively.
+
+[Get a quote](https://www.epicmax.co/?ref=vuestic-consulting)
 
 ### Follow us
 

package.json

@@ -47,12 +47,13 @@
   },
   "resolutions": {
     "vue": "^3.4.21",
-    "@vue/shared": "^3.4.21",
-    "@vue/compiler-sfc": "^3.4.21",
-    "@vue/runtime-core": "^3.4.21",
-    "@vue/runtime-dom": "^3.4.21",
-    "@vue/reactivity": "^3.4.21",
-    "@vue/server-renderer": "^3.4.21",
-    "@vue/compiler-dom": "^3.4.21"
+    "@vue/shared": "3.4.21",
+    "@vue/compiler-sfc": "3.4.21",
+    "@vue/compiler-core": "3.4.21",
+    "@vue/runtime-core": "3.4.21",
+    "@vue/runtime-dom": "3.4.21",
+    "@vue/reactivity": "3.4.21",
+    "@vue/server-renderer": "3.4.21",
+    "@vue/compiler-dom": "3.4.21"
   }
 }

packages/bundlers-tests/package.json

@@ -3,20 +3,20 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "build:local-packages-18": "docker image prune -f && docker container prune -f && docker-compose --profile local-packages-18 build --no-cache",
-    "build:local-packages-lts": "docker image prune -f && docker container prune -f && docker-compose --profile local-packages-lts build --no-cache",
+    "build:local-packages-18": "docker image prune -f && docker container prune -f && docker compose --profile local-packages-18 build --no-cache",
+    "build:local-packages-lts": "docker image prune -f && docker container prune -f && docker compose --profile local-packages-lts build --no-cache",
     "build:test-page": "tsx ./kitchensink-builder/create-test-page.ts",
-    "run:vite": "docker-compose --profile run-vite up",
-    "run:webpack": "docker-compose --profile run-webpack up",
-    "run:nuxt-ssr": "docker-compose --profile nuxt-ssr up",
-    "run:nuxt-spa": "docker-compose --profile nuxt-spa up",
-    "test:vite": "docker-compose --profile vite up --build --exit-code-from cypress_vite",
-    "test:vite-cjs": "docker-compose --profile vite-cjs up --build --exit-code-from cypress_vite_cjs",
-    "test:cli": "docker-compose --profile cli up --build --exit-code-from cypress_cli",
+    "run:vite": "docker compose --profile run-vite up",
+    "run:webpack": "docker compose --profile run-webpack up",
+    "run:nuxt-ssr": "docker compose --profile nuxt-ssr up",
+    "run:nuxt-spa": "docker compose --profile nuxt-spa up",
+    "test:vite": "docker compose --profile vite up --build --exit-code-from cypress_vite",
+    "test:vite-cjs": "docker compose --profile vite-cjs up --build --exit-code-from cypress_vite_cjs",
+    "test:cli": "docker compose --profile cli up --build --exit-code-from cypress_cli",
     "test:nuxt": "yarn test:nuxt-ssr",
-    "test:webpack": "docker-compose --profile webpack up --build --exit-code-from cypress_webpack",
-    "test:nuxt-ssr": "docker-compose --profile nuxt-ssr up --build --exit-code-from cypress_nuxt_ssr",
-    "test:nuxt-spa": "docker-compose --profile nuxt-spa up --build --exit-code-from cypress_nuxt_spa",
+    "test:webpack": "docker compose --profile webpack up --build --exit-code-from cypress_webpack",
+    "test:nuxt-ssr": "docker compose --profile nuxt-ssr up --build --exit-code-from cypress_nuxt_ssr",
+    "test:nuxt-spa": "docker compose --profile nuxt-spa up --build --exit-code-from cypress_nuxt_spa",
     "test": "yarn build:test-page && yarn build:local-packages-18 && yarn build:local-packages-lts && yarn test:nuxt && yarn test:vite && yarn test:18",
     "test:18": "yarn build:local-packages-18 && yarn test:vite"
   }

packages/compiler/Readme.md

@@ -0,0 +1,59 @@
+# Vuestic Plugin
+
+Combination of bundling tools focusing on improving development experience when working with Vuestic UI
+
+## Installation
+
+1. Install package 
+
+```bash
+npm i @vuestic/compiler@latest
+```
+
+2. Add `vuestic` plugin to vite config.
+
+`vite.config.ts` or `vite.config.js`
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { vuestic } from '@vuestic/compiler/vite'
+
+export default defineConfig({
+  plugins: [
+    vuestic(),
+    vue(),
+  ],
+})
+```
+
+> Make sure to register vuestic plugin before `vue`
+
+## List of features
+
+### Devtools
+
+Devtools designed for intuitive visual control over application with Vuestic components
+
+#### Usages
+
+Run vite project in dev mode
+Press ALT/Option + F12 in browser
+
+#### Plans
+
+- [x] Edit component props
+- [x] Edit component slot content
+  - [] Add new slots
+- [] Add new components
+- [] Control layout
+- [] Add event listeners
+
+### CSS layers
+
+Build plugin that allows controlling CSS order
+
+### Typescript auto-completion from config
+
+UNDER DEVELOPMENT
+
+Adds TS global types for colors, icons, etc.

packages/compiler/css-layers/index.ts

@@ -0,0 +1 @@
+export { cssLayers } from './plugin'

packages/compiler/css-layers/plugin.ts

@@ -0,0 +1,29 @@
+import { Plugin } from 'vite'
+import MagicString from 'magic-string'
+
+const addLayer = (ms: MagicString, layer: string) => {
+  ms.prepend(`@layer ${layer} {\n`)
+  ms.append(`\n}`)
+  return {
+    code: ms.toString(),
+    map: ms.generateMap()
+  }
+}
+
+/** Add css layers to Vuestic files */
+export const cssLayers: Plugin = {
+  name: 'vuestic:css-layer',
+
+  transform(code, id) {
+    // Only transform CSS files
+    if (!id.endsWith('.css')) return null
+
+    if (id.includes('vuestic-ui/dist/styles/')) {
+      return addLayer(new MagicString(code), 'vuestic.styles')
+    }
+
+    if (id.includes('vuestic-ui/dist/es/')) {
+      return addLayer(new MagicString(code), 'vuestic.components')
+    }
+  }
+}

packages/compiler/devtools/Readme.md

@@ -0,0 +1,5 @@
+# Vuestic Devtools
+
+Client - UI for devtools, injected to user code in DEV mode only providing utilities to work visually with Vuestic components
+Server - used to update user's file trough client
+Plugin - adds vuestic devtools vue plugin to dev bundle and run server 

packages/compiler/devtools/client/build/append-style.ts

@@ -0,0 +1,36 @@
+import { Plugin } from "vite";
+import { writeFile, readFile } from 'fs/promises'
+import { resolve } from 'path'
+
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+export const appendStyle = (outFile: string): Plugin => {
+  let outDir = ''
+
+  const onBundleClose = async () => {
+    await sleep(1000)
+    const filePath = resolve(`${outDir}/${outFile}`)
+    const fileContent = (await readFile(filePath, 'utf8')).toString()
+
+    const stylePath = `./style.css`
+    const styleImport = `import './${stylePath}'`
+
+    if (!fileContent.includes(styleImport)) {
+      await writeFile(filePath, `${styleImport}\n${fileContent}`)
+    }
+  }
+
+  return {
+    name: 'vuestic:append-style',
+
+    enforce: 'post',
+
+    configResolved(config) {
+      outDir = config.build.outDir
+    },
+
+    async closeBundle() {
+      onBundleClose()
+    }
+  }
+}

packages/compiler/devtools/client/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/compiler/devtools/client/index.ts

@@ -0,0 +1 @@
+export { createVuesticDevtools } from './ui'