lime-elements-vue 1.0.8 → 1.1.0

package/README.md

@@ -1,129 +1,134 @@
-# lime-elements-vue
+# Lime Elements Vue
 
-Vue 3 wrapper for [@limetech/lime-elements](https://github.com/Lundalogik/lime-elements) web components.
+Vue 3 wrapper for [Lime Elements](https://github.com/Lundalogik/lime-elements) web components.
 
 ## Installation
 
 ```bash
-npm install lime-elements-vue
+npm install @limetech/lime-elements-vue
 ```
 
 ## Usage
 
-### 1. Configure Vite (Required)
-
-Add this to your `vite.config.ts`:
-
 ```typescript
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { viteStaticCopy } from 'vite-plugin-static-copy'
-
-export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          // Tell Vue that all tags with a hyphen are custom elements
-          isCustomElement: (tag) => tag.includes('-')
-        }
-      }
-    }),
-    // Copy lime-elements assets to your public folder
-    viteStaticCopy({
-      targets: [
-        {
-          src: 'node_modules/@limetech/lime-elements/dist',
-          dest: 'lime-elements'
-        }
-      ]
-    })
-  ],
-  optimizeDeps: {
-    // Don't pre-bundle lime-elements to allow dynamic imports to work
-    exclude: ['@limetech/lime-elements']
-  }
-})
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import { LimeElementsVue } from '@limetech/lime-elements-vue';
+import '@limetech/lime-elements-vue/css/lime-elements.css';
+
+const app = createApp(App);
+app.use(LimeElementsVue);
+app.mount('#app');
 ```
 
-**Install the required plugin:**
-
-```bash
-npm install -D vite-plugin-static-copy
-```
-
-### 2. Register the plugin globally
-
-```typescript
-import { createApp } from 'vue'
-import { LimeElementsVue } from 'lime-elements-vue'
-import App from './App.vue'
-
-const app = createApp(App)
-// Point to the copied assets
-app.use(LimeElementsVue, {
-  resourcesUrl: '/lime-elements/dist/'
-})
-app.mount('#app')
-```
-
-### 3. Use components in your templates
+Then in your components:
 
 ```vue
 <template>
-  <div>
-    <limel-button label="Click me" @click="handleClick" />
-    <limel-input-field v-model="value" label="Enter text" />
-  </div>
+    <limel-button label="Click me" :primary="true" @click="handleClick" />
+    <limel-checkbox label="Check me" :checked="checked" @change="handleChange" />
 </template>
+```
 
-<script setup lang="ts">
-import { ref } from 'vue'
+### Vite Configuration
 
-const value = ref('')
+Add custom elements support to your Vite config:
 
-const handleClick = () => {
-  console.log('Button clicked!')
-}
-</script>
+```typescript
+// vite.config.ts
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [
+        vue({
+            template: {
+                compilerOptions: {
+                    isCustomElement: (tag) => tag.startsWith('limel-'),
+                },
+            },
+        }),
+    ],
+});
 ```
 
-## Development vs Production
+## Development
 
-The default `resourcesUrl` is set to `/node_modules/@limetech/lime-elements/dist/` which works in **development mode only**.
+### Prerequisites
 
-For production builds, you **must** use `vite-plugin-static-copy` as shown above to copy the assets and configure the `resourcesUrl` option.
+- Node.js 18+
+- npm 8+
+- Python 3.8+ (for orchestration script)
 
-## Advanced Configuration
+### Setup
 
-### Custom Resource URL
+```bash
+# Clone with submodules
+git clone --recurse-submodules https://github.com/Lundalogik/lime-elements-vue.git
+cd lime-elements-vue
 
-If you're serving from a CDN:
+# Or if already cloned
+git submodule update --init --recursive
 
-```typescript
-app.use(LimeElementsVue, {
-  resourcesUrl: 'https://your-cdn.com/lime-elements/dist/'
-})
+# Install dependencies
+npm install
+cd demo && npm install && cd ..
 ```
 
-## Available Components
+### Build
 
-This package provides Vue 3 wrappers for all lime-elements components. For detailed documentation on each component, please refer to the [lime-elements documentation](https://lundalogik.github.io/lime-elements/).
+```bash
+# Full build
+./build.sh
 
-## Troubleshooting
+# Or using Python orchestrator
+python run.py build
+```
 
-### 404 errors for component files in development
+### Development
 
-If you see 404 errors like `GET http://localhost:xxxx/limel-checkbox.entry.js 404 (Not Found)` in development:
+```bash
+# Start demo app
+python run.py dev
+
+# Or manually
+cd demo && npm run dev
+```
 
-1. The default resourcesUrl should work with Vite's dev server
-2. Ensure `optimizeDeps.exclude: ['@limetech/lime-elements']` is set
-3. Make sure `isCustomElement: (tag) => tag.includes('-')` is configured
+### Commands (run.py)
 
-### 404 errors in production build
+| Command   | Description                                |
+| --------- | ------------------------------------------ |
+| `setup`   | Install all dependencies                   |
+| `build`   | Full build process                         |
+| `dev`     | Start demo in dev mode                     |
+| `clean`   | Clean all build artifacts                  |
+| `publish` | Publish to NPM (dry-run)                   |
+| `all`     | Setup + Build                              |
+| `test`    | Build and start demo                       |
 
-You must copy the assets using `vite-plugin-static-copy` and configure the `resourcesUrl` option when installing the plugin.
+## Project Structure
+
+```
+lime-elements-vue-transpiled/
+├── lime-elements/          # Git submodule (source components)
+├── src/
+│   ├── index.ts            # Main entry point
+│   └── components.ts       # Generated Vue proxies
+├── config/
+│   └── stencil.config.vue.ts
+├── scripts/
+│   └── post-process.js
+├── dist/                   # Build output
+│   ├── index.esm.js
+│   ├── index.cjs.js
+│   └── css/
+├── demo/                   # Vue 3 demo app
+├── build.sh
+├── run.py
+└── package.json
+```
 
 ## License
 
-MIT
+Apache-2.0