lime-elements-vue 1.0.7 → 1.0.10

package/README.md

@@ -0,0 +1,156 @@
+# lime-elements-vue
+
+Vue 3 wrapper for [@limetech/lime-elements](https://github.com/Lundalogik/lime-elements) web components.
+
+## Installation
+
+```bash
+npm install 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 ESM files to assets folder
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'node_modules/@limetech/lime-elements/dist/esm/*',
+          dest: 'assets/'
+        }
+      ]
+    })
+  ],
+  optimizeDeps: {
+    // Don't pre-bundle lime-elements to allow dynamic imports to work
+    exclude: ['@limetech/lime-elements']
+  }
+})
+```
+
+**Install the required plugin:**
+
+```bash
+npm install -D vite-plugin-static-copy
+```
+
+### 2. Register the plugin globally
+
+**Important:** Set `resourcesUrl` to match where you copied the files in your Vite config.
+
+```typescript
+import { createApp } from 'vue'
+import { LimeElementsVue } from 'lime-elements-vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+// Match this to your viteStaticCopy dest path
+app.use(LimeElementsVue, {
+  resourcesUrl: '/assets/'  // Must match the 'dest' in viteStaticCopy config
+})
+
+app.mount('#app')
+```
+
+### 3. Use components in your templates
+
+```vue
+<template>
+  <div>
+    <limel-button label="Click me" @click="handleClick" />
+    <limel-input-field v-model="value" label="Enter text" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+
+const handleClick = () => {
+  console.log('Button clicked!')
+}
+</script>
+```
+
+## Configuration Options
+
+### Development vs Production
+
+- **Development**: The default `resourcesUrl` points to `/node_modules/@limetech/lime-elements/dist/` which works with Vite's dev server
+- **Production**: You **must** configure `resourcesUrl` to match where you copy the assets using `vite-plugin-static-copy`
+
+### Alternative: Copy to different location
+
+If you prefer a different location:
+
+```typescript
+// In vite.config.ts
+viteStaticCopy({
+  targets: [
+    {
+      src: 'node_modules/@limetech/lime-elements/dist/esm/*',
+      dest: 'lime-elements/'  // Custom destination
+    }
+  ]
+})
+
+// In your app
+app.use(LimeElementsVue, {
+  resourcesUrl: '/lime-elements/'  // Must match!
+})
+```
+
+### Using a CDN
+
+```typescript
+app.use(LimeElementsVue, {
+  resourcesUrl: 'https://your-cdn.com/lime-elements/'
+})
+```
+
+## Available Components
+
+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/).
+
+## Troubleshooting
+
+### 404 errors for component files
+
+If you see 404 errors like `GET http://localhost:xxxx/limel-checkbox.entry.js 404 (Not Found)`:
+
+1. **Check your `resourcesUrl`** - It must match the `dest` path in `viteStaticCopy` config
+2. **Ensure you're copying the right files** - Use `dist/esm/*` not just `dist`
+3. **Include trailing slash** - `resourcesUrl: '/assets/'` not `/assets`
+4. **Configure Vite properly**:
+   - `optimizeDeps.exclude: ['@limetech/lime-elements']`
+   - `isCustomElement: (tag) => tag.includes('-')`
+
+### Development mode 404 errors
+
+For development, either:
+- Use the default (no resourcesUrl option) which points to `/node_modules/@limetech/lime-elements/dist/`
+- Or configure Vite's server to serve node_modules
+
+## License
+
+MIT

package/dist/index.cjs.js

@@ -1,23 +1,25 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LimeElementsVue = void 0;
-
-const components_1 = require("./components");
-Object.keys(components_1).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === components_1[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () { return components_1[key]; }
-  });
-});
-
-const loader_1 = require("@limetech/lime-elements/loader");
-
-exports.LimeElementsVue = {
-  async install() {
-    loader_1.applyPolyfills().then(() => {
-      loader_1.defineCustomElements();
-    });
-  }
+__exportStar(require("./components"), exports);
+const loader_1 = require("@limetech/lime-elements/dist/loader");
+exports.default = {
+    install(app) {
+        (0, loader_1.applyPolyfills)().then(() => {
+            (0, loader_1.defineCustomElements)(window);
+        });
+    },
 };

package/dist/index.d.ts

@@ -1,3 +1,12 @@
 export * from './components';
 import type { Plugin } from 'vue';
+export interface LimeElementsVueOptions {
+    /**
+     * Custom URL for lime-elements resources.
+     * Default: '/node_modules/@limetech/lime-elements/dist/' (works in dev mode)
+     * For production, set this to match where you copy the assets
+     * Example: '/assets/' if you copy dist/esm/* to assets/
+     */
+    resourcesUrl?: string;
+}
 export declare const LimeElementsVue: Plugin;

package/dist/index.js

@@ -1,9 +1,14 @@
 export * from './components';
 import { applyPolyfills, defineCustomElements } from '@limetech/lime-elements/dist/loader';
 export const LimeElementsVue = {
-    async install() {
+    async install(_app, options) {
         applyPolyfills().then(() => {
-            defineCustomElements();
+            // Default works for dev mode with Vite
+            // For production, users should set resourcesUrl to match their build config
+            const resourcesUrl = options?.resourcesUrl ?? '/node_modules/@limetech/lime-elements/dist/';
+            defineCustomElements(window, {
+                resourcesUrl
+            });
         });
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lime-elements-vue",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "description": "Vue 3 wrapper for @limetech/lime-elements web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -23,7 +23,7 @@
     "lime-elements",
     "stencil"
   ],
-  "author": "Your Name",
+  "author": "Piotr Adamczyk <piotr.adamczyk@lundalogik.com>",
   "license": "MIT",
   "dependencies": {
     "@limetech/lime-elements": "^38.28.0",