lime-elements-vue 1.0.10 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +93 -115
  2. package/dist/index.cjs.js +1965 -25
  3. package/dist/index.d.ts +6558 -9
  4. package/dist/index.esm.js +128513 -0
  5. package/package.json +43 -20
  6. package/LICENSE +0 -22
  7. package/dist/components.d.ts +0 -72
  8. package/dist/components.js +0 -766
  9. package/dist/index.js +0 -14
package/README.md CHANGED
@@ -1,156 +1,134 @@
1
- # lime-elements-vue
1
+ # Lime Elements Vue
2
2
 
3
- Vue 3 wrapper for [@limetech/lime-elements](https://github.com/Lundalogik/lime-elements) web components.
3
+ Vue 3 wrapper for [Lime Elements](https://github.com/Lundalogik/lime-elements) web components.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install lime-elements-vue
8
+ npm install @limetech/lime-elements-vue
9
9
  ```
10
10
 
11
11
  ## Usage
12
12
 
13
- ### 1. Configure Vite (Required)
14
-
15
- Add this to your `vite.config.ts`:
16
-
17
13
  ```typescript
18
- import { defineConfig } from 'vite'
19
- import vue from '@vitejs/plugin-vue'
20
- import { viteStaticCopy } from 'vite-plugin-static-copy'
21
-
22
- export default defineConfig({
23
- plugins: [
24
- vue({
25
- template: {
26
- compilerOptions: {
27
- // Tell Vue that all tags with a hyphen are custom elements
28
- isCustomElement: (tag) => tag.includes('-')
29
- }
30
- }
31
- }),
32
- // Copy lime-elements ESM files to assets folder
33
- viteStaticCopy({
34
- targets: [
35
- {
36
- src: 'node_modules/@limetech/lime-elements/dist/esm/*',
37
- dest: 'assets/'
38
- }
39
- ]
40
- })
41
- ],
42
- optimizeDeps: {
43
- // Don't pre-bundle lime-elements to allow dynamic imports to work
44
- exclude: ['@limetech/lime-elements']
45
- }
46
- })
14
+ // main.ts
15
+ import { createApp } from 'vue';
16
+ import App from './App.vue';
17
+ import { LimeElementsVue } from '@limetech/lime-elements-vue';
18
+ import '@limetech/lime-elements-vue/css/lime-elements.css';
19
+
20
+ const app = createApp(App);
21
+ app.use(LimeElementsVue);
22
+ app.mount('#app');
47
23
  ```
48
24
 
49
- **Install the required plugin:**
25
+ Then in your components:
50
26
 
51
- ```bash
52
- npm install -D vite-plugin-static-copy
27
+ ```vue
28
+ <template>
29
+ <limel-button label="Click me" :primary="true" @click="handleClick" />
30
+ <limel-checkbox label="Check me" :checked="checked" @change="handleChange" />
31
+ </template>
53
32
  ```
54
33
 
55
- ### 2. Register the plugin globally
34
+ ### Vite Configuration
56
35
 
57
- **Important:** Set `resourcesUrl` to match where you copied the files in your Vite config.
36
+ Add custom elements support to your Vite config:
58
37
 
59
38
  ```typescript
60
- import { createApp } from 'vue'
61
- import { LimeElementsVue } from 'lime-elements-vue'
62
- import App from './App.vue'
39
+ // vite.config.ts
40
+ import vue from '@vitejs/plugin-vue';
63
41
 
64
- const app = createApp(App)
65
-
66
- // Match this to your viteStaticCopy dest path
67
- app.use(LimeElementsVue, {
68
- resourcesUrl: '/assets/' // Must match the 'dest' in viteStaticCopy config
69
- })
70
-
71
- app.mount('#app')
42
+ export default defineConfig({
43
+ plugins: [
44
+ vue({
45
+ template: {
46
+ compilerOptions: {
47
+ isCustomElement: (tag) => tag.startsWith('limel-'),
48
+ },
49
+ },
50
+ }),
51
+ ],
52
+ });
72
53
  ```
73
54
 
74
- ### 3. Use components in your templates
55
+ ## Development
75
56
 
76
- ```vue
77
- <template>
78
- <div>
79
- <limel-button label="Click me" @click="handleClick" />
80
- <limel-input-field v-model="value" label="Enter text" />
81
- </div>
82
- </template>
57
+ ### Prerequisites
83
58
 
84
- <script setup lang="ts">
85
- import { ref } from 'vue'
59
+ - Node.js 18+
60
+ - npm 8+
61
+ - Python 3.8+ (for orchestration script)
86
62
 
87
- const value = ref('')
63
+ ### Setup
88
64
 
89
- const handleClick = () => {
90
- console.log('Button clicked!')
91
- }
92
- </script>
93
- ```
94
-
95
- ## Configuration Options
96
-
97
- ### Development vs Production
98
-
99
- - **Development**: The default `resourcesUrl` points to `/node_modules/@limetech/lime-elements/dist/` which works with Vite's dev server
100
- - **Production**: You **must** configure `resourcesUrl` to match where you copy the assets using `vite-plugin-static-copy`
101
-
102
- ### Alternative: Copy to different location
65
+ ```bash
66
+ # Clone with submodules
67
+ git clone --recurse-submodules https://github.com/Lundalogik/lime-elements-vue.git
68
+ cd lime-elements-vue
103
69
 
104
- If you prefer a different location:
70
+ # Or if already cloned
71
+ git submodule update --init --recursive
105
72
 
106
- ```typescript
107
- // In vite.config.ts
108
- viteStaticCopy({
109
- targets: [
110
- {
111
- src: 'node_modules/@limetech/lime-elements/dist/esm/*',
112
- dest: 'lime-elements/' // Custom destination
113
- }
114
- ]
115
- })
116
-
117
- // In your app
118
- app.use(LimeElementsVue, {
119
- resourcesUrl: '/lime-elements/' // Must match!
120
- })
73
+ # Install dependencies
74
+ npm install
75
+ cd demo && npm install && cd ..
121
76
  ```
122
77
 
123
- ### Using a CDN
78
+ ### Build
124
79
 
125
- ```typescript
126
- app.use(LimeElementsVue, {
127
- resourcesUrl: 'https://your-cdn.com/lime-elements/'
128
- })
129
- ```
80
+ ```bash
81
+ # Full build
82
+ ./build.sh
130
83
 
131
- ## Available Components
84
+ # Or using Python orchestrator
85
+ python run.py build
86
+ ```
132
87
 
133
- 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/).
88
+ ### Development
134
89
 
135
- ## Troubleshooting
90
+ ```bash
91
+ # Start demo app
92
+ python run.py dev
136
93
 
137
- ### 404 errors for component files
94
+ # Or manually
95
+ cd demo && npm run dev
96
+ ```
138
97
 
139
- If you see 404 errors like `GET http://localhost:xxxx/limel-checkbox.entry.js 404 (Not Found)`:
98
+ ### Commands (run.py)
140
99
 
141
- 1. **Check your `resourcesUrl`** - It must match the `dest` path in `viteStaticCopy` config
142
- 2. **Ensure you're copying the right files** - Use `dist/esm/*` not just `dist`
143
- 3. **Include trailing slash** - `resourcesUrl: '/assets/'` not `/assets`
144
- 4. **Configure Vite properly**:
145
- - `optimizeDeps.exclude: ['@limetech/lime-elements']`
146
- - `isCustomElement: (tag) => tag.includes('-')`
100
+ | Command | Description |
101
+ | --------- | ------------------------------------------ |
102
+ | `setup` | Install all dependencies |
103
+ | `build` | Full build process |
104
+ | `dev` | Start demo in dev mode |
105
+ | `clean` | Clean all build artifacts |
106
+ | `publish` | Publish to NPM (dry-run) |
107
+ | `all` | Setup + Build |
108
+ | `test` | Build and start demo |
147
109
 
148
- ### Development mode 404 errors
110
+ ## Project Structure
149
111
 
150
- For development, either:
151
- - Use the default (no resourcesUrl option) which points to `/node_modules/@limetech/lime-elements/dist/`
152
- - Or configure Vite's server to serve node_modules
112
+ ```
113
+ lime-elements-vue-transpiled/
114
+ ├── lime-elements/ # Git submodule (source components)
115
+ ├── src/
116
+ │ ├── index.ts # Main entry point
117
+ │ └── components.ts # Generated Vue proxies
118
+ ├── config/
119
+ │ └── stencil.config.vue.ts
120
+ ├── scripts/
121
+ │ └── post-process.js
122
+ ├── dist/ # Build output
123
+ │ ├── index.esm.js
124
+ │ ├── index.cjs.js
125
+ │ └── css/
126
+ ├── demo/ # Vue 3 demo app
127
+ ├── build.sh
128
+ ├── run.py
129
+ └── package.json
130
+ ```
153
131
 
154
132
  ## License
155
133
 
156
- MIT
134
+ Apache-2.0