lime-elements-vue 1.0.10 → 1.2.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.
- package/README.md +93 -115
- package/dist/components.d.ts +178 -72
- package/dist/index.cjs.js +1965 -25
- package/dist/index.d.ts +6558 -9
- package/dist/index.esm.js +128513 -0
- package/package.json +43 -20
- package/LICENSE +0 -22
- package/dist/components.js +0 -766
- package/dist/index.js +0 -14
package/README.md
CHANGED
|
@@ -1,156 +1,134 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Lime Elements Vue
|
|
2
2
|
|
|
3
|
-
Vue 3 wrapper for [
|
|
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
|
-
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
|
25
|
+
Then in your components:
|
|
50
26
|
|
|
51
|
-
```
|
|
52
|
-
|
|
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
|
-
###
|
|
34
|
+
### Vite Configuration
|
|
56
35
|
|
|
57
|
-
|
|
36
|
+
Add custom elements support to your Vite config:
|
|
58
37
|
|
|
59
38
|
```typescript
|
|
60
|
-
|
|
61
|
-
import
|
|
62
|
-
import App from './App.vue'
|
|
39
|
+
// vite.config.ts
|
|
40
|
+
import vue from '@vitejs/plugin-vue';
|
|
63
41
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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
|
-
|
|
55
|
+
## Development
|
|
75
56
|
|
|
76
|
-
|
|
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
|
-
|
|
85
|
-
|
|
59
|
+
- Node.js 18+
|
|
60
|
+
- npm 8+
|
|
61
|
+
- Python 3.8+ (for orchestration script)
|
|
86
62
|
|
|
87
|
-
|
|
63
|
+
### Setup
|
|
88
64
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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
|
-
|
|
70
|
+
# Or if already cloned
|
|
71
|
+
git submodule update --init --recursive
|
|
105
72
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
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
|
-
###
|
|
78
|
+
### Build
|
|
124
79
|
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
})
|
|
129
|
-
```
|
|
80
|
+
```bash
|
|
81
|
+
# Full build
|
|
82
|
+
./build.sh
|
|
130
83
|
|
|
131
|
-
|
|
84
|
+
# Or using Python orchestrator
|
|
85
|
+
python run.py build
|
|
86
|
+
```
|
|
132
87
|
|
|
133
|
-
|
|
88
|
+
### Development
|
|
134
89
|
|
|
135
|
-
|
|
90
|
+
```bash
|
|
91
|
+
# Start demo app
|
|
92
|
+
python run.py dev
|
|
136
93
|
|
|
137
|
-
|
|
94
|
+
# Or manually
|
|
95
|
+
cd demo && npm run dev
|
|
96
|
+
```
|
|
138
97
|
|
|
139
|
-
|
|
98
|
+
### Commands (run.py)
|
|
140
99
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
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
|
-
|
|
110
|
+
## Project Structure
|
|
149
111
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
-
|
|
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
|
-
|
|
134
|
+
Apache-2.0
|
package/dist/components.d.ts
CHANGED
|
@@ -1,72 +1,178 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Global component type declarations for Vue 3 IDE support.
|
|
3
|
+
*
|
|
4
|
+
* Usage: Add this to your project's .d.ts file or reference in tsconfig:
|
|
5
|
+
*
|
|
6
|
+
* /// <reference types="lime-elements-vue/dist/components" />
|
|
7
|
+
*/
|
|
8
|
+
import type {
|
|
9
|
+
Limel3dHoverEffectGlow,
|
|
10
|
+
LimelActionBar,
|
|
11
|
+
LimelActionBarItem,
|
|
12
|
+
LimelActionBarOverflowMenu,
|
|
13
|
+
LimelAiAvatar,
|
|
14
|
+
LimelBadge,
|
|
15
|
+
LimelBanner,
|
|
16
|
+
LimelBreadcrumbs,
|
|
17
|
+
LimelButton,
|
|
18
|
+
LimelButtonGroup,
|
|
19
|
+
LimelCallout,
|
|
20
|
+
LimelCard,
|
|
21
|
+
LimelChart,
|
|
22
|
+
LimelCheckbox,
|
|
23
|
+
LimelChip,
|
|
24
|
+
LimelChipSet,
|
|
25
|
+
LimelCircularProgress,
|
|
26
|
+
LimelCodeDiff,
|
|
27
|
+
LimelCodeEditor,
|
|
28
|
+
LimelCollapsibleSection,
|
|
29
|
+
LimelColorPicker,
|
|
30
|
+
LimelColorPickerPalette,
|
|
31
|
+
LimelConfig,
|
|
32
|
+
LimelDatePicker,
|
|
33
|
+
LimelDialog,
|
|
34
|
+
LimelDock,
|
|
35
|
+
LimelDockButton,
|
|
36
|
+
LimelDragHandle,
|
|
37
|
+
LimelDynamicLabel,
|
|
38
|
+
LimelEmailViewer,
|
|
39
|
+
LimelFile,
|
|
40
|
+
LimelFileDropzone,
|
|
41
|
+
LimelFileInput,
|
|
42
|
+
LimelFileViewer,
|
|
43
|
+
LimelFlatpickrAdapter,
|
|
44
|
+
LimelFlexContainer,
|
|
45
|
+
LimelForm,
|
|
46
|
+
LimelGrid,
|
|
47
|
+
LimelHeader,
|
|
48
|
+
LimelHelp,
|
|
49
|
+
LimelHelpContent,
|
|
50
|
+
LimelHelperLine,
|
|
51
|
+
LimelHotkey,
|
|
52
|
+
LimelIcon,
|
|
53
|
+
LimelIconButton,
|
|
54
|
+
LimelInfoTile,
|
|
55
|
+
LimelInputField,
|
|
56
|
+
LimelLinearProgress,
|
|
57
|
+
LimelList,
|
|
58
|
+
LimelListItem,
|
|
59
|
+
LimelMarkdown,
|
|
60
|
+
LimelMasonryLayout,
|
|
61
|
+
LimelMenu,
|
|
62
|
+
LimelMenuItemMeta,
|
|
63
|
+
LimelMenuList,
|
|
64
|
+
LimelMenuSurface,
|
|
65
|
+
LimelNotchedOutline,
|
|
66
|
+
LimelPicker,
|
|
67
|
+
LimelPopover,
|
|
68
|
+
LimelPopoverSurface,
|
|
69
|
+
LimelPortal,
|
|
70
|
+
LimelProfilePicture,
|
|
71
|
+
LimelProgressFlow,
|
|
72
|
+
LimelProgressFlowItem,
|
|
73
|
+
LimelProsemirrorAdapter,
|
|
74
|
+
LimelRadioButton,
|
|
75
|
+
LimelRadioButtonGroup,
|
|
76
|
+
LimelSelect,
|
|
77
|
+
LimelShortcut,
|
|
78
|
+
LimelSlider,
|
|
79
|
+
LimelSnackbar,
|
|
80
|
+
LimelSpinner,
|
|
81
|
+
LimelSplitButton,
|
|
82
|
+
LimelSwitch,
|
|
83
|
+
LimelTabBar,
|
|
84
|
+
LimelTable,
|
|
85
|
+
LimelTabPanel,
|
|
86
|
+
LimelTextEditor,
|
|
87
|
+
LimelTextEditorLinkMenu,
|
|
88
|
+
LimelTooltip,
|
|
89
|
+
LimelTooltipContent,
|
|
90
|
+
} from './index';
|
|
91
|
+
|
|
92
|
+
declare module 'vue' {
|
|
93
|
+
export interface GlobalComponents {
|
|
94
|
+
Limel3dHoverEffectGlow: typeof Limel3dHoverEffectGlow
|
|
95
|
+
LimelActionBar: typeof LimelActionBar
|
|
96
|
+
LimelActionBarItem: typeof LimelActionBarItem
|
|
97
|
+
LimelActionBarOverflowMenu: typeof LimelActionBarOverflowMenu
|
|
98
|
+
LimelAiAvatar: typeof LimelAiAvatar
|
|
99
|
+
LimelBadge: typeof LimelBadge
|
|
100
|
+
LimelBanner: typeof LimelBanner
|
|
101
|
+
LimelBreadcrumbs: typeof LimelBreadcrumbs
|
|
102
|
+
LimelButton: typeof LimelButton
|
|
103
|
+
LimelButtonGroup: typeof LimelButtonGroup
|
|
104
|
+
LimelCallout: typeof LimelCallout
|
|
105
|
+
LimelCard: typeof LimelCard
|
|
106
|
+
LimelChart: typeof LimelChart
|
|
107
|
+
LimelCheckbox: typeof LimelCheckbox
|
|
108
|
+
LimelChip: typeof LimelChip
|
|
109
|
+
LimelChipSet: typeof LimelChipSet
|
|
110
|
+
LimelCircularProgress: typeof LimelCircularProgress
|
|
111
|
+
LimelCodeDiff: typeof LimelCodeDiff
|
|
112
|
+
LimelCodeEditor: typeof LimelCodeEditor
|
|
113
|
+
LimelCollapsibleSection: typeof LimelCollapsibleSection
|
|
114
|
+
LimelColorPicker: typeof LimelColorPicker
|
|
115
|
+
LimelColorPickerPalette: typeof LimelColorPickerPalette
|
|
116
|
+
LimelConfig: typeof LimelConfig
|
|
117
|
+
LimelDatePicker: typeof LimelDatePicker
|
|
118
|
+
LimelDialog: typeof LimelDialog
|
|
119
|
+
LimelDock: typeof LimelDock
|
|
120
|
+
LimelDockButton: typeof LimelDockButton
|
|
121
|
+
LimelDragHandle: typeof LimelDragHandle
|
|
122
|
+
LimelDynamicLabel: typeof LimelDynamicLabel
|
|
123
|
+
LimelEmailViewer: typeof LimelEmailViewer
|
|
124
|
+
LimelFile: typeof LimelFile
|
|
125
|
+
LimelFileDropzone: typeof LimelFileDropzone
|
|
126
|
+
LimelFileInput: typeof LimelFileInput
|
|
127
|
+
LimelFileViewer: typeof LimelFileViewer
|
|
128
|
+
LimelFlatpickrAdapter: typeof LimelFlatpickrAdapter
|
|
129
|
+
LimelFlexContainer: typeof LimelFlexContainer
|
|
130
|
+
LimelForm: typeof LimelForm
|
|
131
|
+
LimelGrid: typeof LimelGrid
|
|
132
|
+
LimelHeader: typeof LimelHeader
|
|
133
|
+
LimelHelp: typeof LimelHelp
|
|
134
|
+
LimelHelpContent: typeof LimelHelpContent
|
|
135
|
+
LimelHelperLine: typeof LimelHelperLine
|
|
136
|
+
LimelHotkey: typeof LimelHotkey
|
|
137
|
+
LimelIcon: typeof LimelIcon
|
|
138
|
+
LimelIconButton: typeof LimelIconButton
|
|
139
|
+
LimelInfoTile: typeof LimelInfoTile
|
|
140
|
+
LimelInputField: typeof LimelInputField
|
|
141
|
+
LimelLinearProgress: typeof LimelLinearProgress
|
|
142
|
+
LimelList: typeof LimelList
|
|
143
|
+
LimelListItem: typeof LimelListItem
|
|
144
|
+
LimelMarkdown: typeof LimelMarkdown
|
|
145
|
+
LimelMasonryLayout: typeof LimelMasonryLayout
|
|
146
|
+
LimelMenu: typeof LimelMenu
|
|
147
|
+
LimelMenuItemMeta: typeof LimelMenuItemMeta
|
|
148
|
+
LimelMenuList: typeof LimelMenuList
|
|
149
|
+
LimelMenuSurface: typeof LimelMenuSurface
|
|
150
|
+
LimelNotchedOutline: typeof LimelNotchedOutline
|
|
151
|
+
LimelPicker: typeof LimelPicker
|
|
152
|
+
LimelPopover: typeof LimelPopover
|
|
153
|
+
LimelPopoverSurface: typeof LimelPopoverSurface
|
|
154
|
+
LimelPortal: typeof LimelPortal
|
|
155
|
+
LimelProfilePicture: typeof LimelProfilePicture
|
|
156
|
+
LimelProgressFlow: typeof LimelProgressFlow
|
|
157
|
+
LimelProgressFlowItem: typeof LimelProgressFlowItem
|
|
158
|
+
LimelProsemirrorAdapter: typeof LimelProsemirrorAdapter
|
|
159
|
+
LimelRadioButton: typeof LimelRadioButton
|
|
160
|
+
LimelRadioButtonGroup: typeof LimelRadioButtonGroup
|
|
161
|
+
LimelSelect: typeof LimelSelect
|
|
162
|
+
LimelShortcut: typeof LimelShortcut
|
|
163
|
+
LimelSlider: typeof LimelSlider
|
|
164
|
+
LimelSnackbar: typeof LimelSnackbar
|
|
165
|
+
LimelSpinner: typeof LimelSpinner
|
|
166
|
+
LimelSplitButton: typeof LimelSplitButton
|
|
167
|
+
LimelSwitch: typeof LimelSwitch
|
|
168
|
+
LimelTabBar: typeof LimelTabBar
|
|
169
|
+
LimelTable: typeof LimelTable
|
|
170
|
+
LimelTabPanel: typeof LimelTabPanel
|
|
171
|
+
LimelTextEditor: typeof LimelTextEditor
|
|
172
|
+
LimelTextEditorLinkMenu: typeof LimelTextEditorLinkMenu
|
|
173
|
+
LimelTooltip: typeof LimelTooltip
|
|
174
|
+
LimelTooltipContent: typeof LimelTooltipContent
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
export {};
|