@sellmate/design-system-vue 0.0.55 → 0.0.56
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 +78 -78
- package/dist/components.d.ts +4 -3
- package/dist/components.js +21 -7
- package/lib/components.ts +29 -10
- package/lib/index.ts +2 -2
- package/lib/plugin.ts +10 -10
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
# Sellmate Design System - Vue
|
|
2
|
-
|
|
3
|
-
Vue 3 component wrappers for Sellmate Design System built with Stencil web components.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @sellmate/design-system-vue
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
or
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
yarn add @sellmate/design-system-vue
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## Setup
|
|
18
|
-
|
|
19
|
-
### Vue 3
|
|
20
|
-
|
|
21
|
-
```ts
|
|
22
|
-
import { createApp } from 'vue';
|
|
23
|
-
import { defineCustomElementsDesignSystem } from '@sellmate/design-system-vue/loader';
|
|
24
|
-
import App from './App.vue';
|
|
25
|
-
|
|
26
|
-
const app = createApp(App);
|
|
27
|
-
|
|
28
|
-
// Define custom elements
|
|
29
|
-
defineCustomElementsDesignSystem();
|
|
30
|
-
|
|
31
|
-
app.mount('#app');
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Quick Start
|
|
35
|
-
|
|
36
|
-
### Basic Component Usage
|
|
37
|
-
|
|
38
|
-
```vue
|
|
39
|
-
<template>
|
|
40
|
-
<div>
|
|
41
|
-
<SdButton @click="handleClick">
|
|
42
|
-
Click me
|
|
43
|
-
</SdButton>
|
|
44
|
-
</div>
|
|
45
|
-
</template>
|
|
46
|
-
|
|
47
|
-
<script setup lang="ts">
|
|
48
|
-
import { SdButton } from '@sellmate/design-system-vue';
|
|
49
|
-
|
|
50
|
-
const handleClick = () => {
|
|
51
|
-
console.log('Button clicked');
|
|
52
|
-
};
|
|
53
|
-
</script>
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
## Available Components
|
|
57
|
-
|
|
58
|
-
- `SdButton` - Button component
|
|
59
|
-
- `SdInput` - Input component
|
|
60
|
-
- `SdCheckbox` - Checkbox component
|
|
61
|
-
- `SdSelect` - Select dropdown component
|
|
62
|
-
- `SdTable` - Table component
|
|
63
|
-
- `SdTag` - Tag component
|
|
64
|
-
- `SdIcon` - Icon component
|
|
65
|
-
- `SdTooltip` - Tooltip component
|
|
66
|
-
- `SdPopover` - Popover component
|
|
67
|
-
- `SdDatePicker` - Date picker component
|
|
68
|
-
- `SdDateRangePicker` - Date range picker component
|
|
69
|
-
- `SdPagination` - Pagination component
|
|
70
|
-
|
|
71
|
-
## Requirements
|
|
72
|
-
|
|
73
|
-
- Vue 3.0.0 or higher
|
|
74
|
-
- @sellmate/design-system (peer dependency)
|
|
75
|
-
|
|
76
|
-
## License
|
|
77
|
-
|
|
78
|
-
MIT
|
|
1
|
+
# Sellmate Design System - Vue
|
|
2
|
+
|
|
3
|
+
Vue 3 component wrappers for Sellmate Design System built with Stencil web components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @sellmate/design-system-vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
or
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @sellmate/design-system-vue
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Setup
|
|
18
|
+
|
|
19
|
+
### Vue 3
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { createApp } from 'vue';
|
|
23
|
+
import { defineCustomElementsDesignSystem } from '@sellmate/design-system-vue/loader';
|
|
24
|
+
import App from './App.vue';
|
|
25
|
+
|
|
26
|
+
const app = createApp(App);
|
|
27
|
+
|
|
28
|
+
// Define custom elements
|
|
29
|
+
defineCustomElementsDesignSystem();
|
|
30
|
+
|
|
31
|
+
app.mount('#app');
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Quick Start
|
|
35
|
+
|
|
36
|
+
### Basic Component Usage
|
|
37
|
+
|
|
38
|
+
```vue
|
|
39
|
+
<template>
|
|
40
|
+
<div>
|
|
41
|
+
<SdButton @click="handleClick">
|
|
42
|
+
Click me
|
|
43
|
+
</SdButton>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<script setup lang="ts">
|
|
48
|
+
import { SdButton } from '@sellmate/design-system-vue';
|
|
49
|
+
|
|
50
|
+
const handleClick = () => {
|
|
51
|
+
console.log('Button clicked');
|
|
52
|
+
};
|
|
53
|
+
</script>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Available Components
|
|
57
|
+
|
|
58
|
+
- `SdButton` - Button component
|
|
59
|
+
- `SdInput` - Input component
|
|
60
|
+
- `SdCheckbox` - Checkbox component
|
|
61
|
+
- `SdSelect` - Select dropdown component
|
|
62
|
+
- `SdTable` - Table component
|
|
63
|
+
- `SdTag` - Tag component
|
|
64
|
+
- `SdIcon` - Icon component
|
|
65
|
+
- `SdTooltip` - Tooltip component
|
|
66
|
+
- `SdPopover` - Popover component
|
|
67
|
+
- `SdDatePicker` - Date picker component
|
|
68
|
+
- `SdDateRangePicker` - Date range picker component
|
|
69
|
+
- `SdPagination` - Pagination component
|
|
70
|
+
|
|
71
|
+
## Requirements
|
|
72
|
+
|
|
73
|
+
- Vue 3.0.0 or higher
|
|
74
|
+
- @sellmate/design-system (peer dependency)
|
|
75
|
+
|
|
76
|
+
## License
|
|
77
|
+
|
|
78
|
+
MIT
|
package/dist/components.d.ts
CHANGED
|
@@ -3,10 +3,10 @@ import type { JSX } from '@sellmate/design-system';
|
|
|
3
3
|
export declare const SdBadge: StencilVueComponent<JSX.SdBadge>;
|
|
4
4
|
export declare const SdButton: StencilVueComponent<JSX.SdButton>;
|
|
5
5
|
export declare const SdCard: StencilVueComponent<JSX.SdCard>;
|
|
6
|
-
export declare const SdCheckbox: StencilVueComponent<JSX.SdCheckbox>;
|
|
6
|
+
export declare const SdCheckbox: StencilVueComponent<JSX.SdCheckbox, JSX.SdCheckbox["checked"]>;
|
|
7
7
|
export declare const SdDateBox: StencilVueComponent<JSX.SdDateBox>;
|
|
8
|
-
export declare const SdDatePicker: StencilVueComponent<JSX.SdDatePicker>;
|
|
9
|
-
export declare const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker>;
|
|
8
|
+
export declare const SdDatePicker: StencilVueComponent<JSX.SdDatePicker, JSX.SdDatePicker["value"]>;
|
|
9
|
+
export declare const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.SdDateRangePicker["value"]>;
|
|
10
10
|
export declare const SdFilePicker: StencilVueComponent<JSX.SdFilePicker, JSX.SdFilePicker["value"]>;
|
|
11
11
|
export declare const SdGuide: StencilVueComponent<JSX.SdGuide>;
|
|
12
12
|
export declare const SdIcon: StencilVueComponent<JSX.SdIcon>;
|
|
@@ -25,6 +25,7 @@ export declare const SdSelectMultiple: StencilVueComponent<JSX.SdSelectMultiple,
|
|
|
25
25
|
export declare const SdSelectMultipleGroup: StencilVueComponent<JSX.SdSelectMultipleGroup>;
|
|
26
26
|
export declare const SdSelectOption: StencilVueComponent<JSX.SdSelectOption>;
|
|
27
27
|
export declare const SdSelectOptionGroup: StencilVueComponent<JSX.SdSelectOptionGroup>;
|
|
28
|
+
export declare const SdSelectSearchInput: StencilVueComponent<JSX.SdSelectSearchInput>;
|
|
28
29
|
export declare const SdTable: StencilVueComponent<JSX.SdTable>;
|
|
29
30
|
export declare const SdTableBackup: StencilVueComponent<JSX.SdTableBackup>;
|
|
30
31
|
export declare const SdTabs: StencilVueComponent<JSX.SdTabs, JSX.SdTabs["value"]>;
|
package/dist/components.js
CHANGED
|
@@ -36,7 +36,7 @@ export const SdCheckbox = /*@__PURE__*/ defineContainer('sd-checkbox', undefined
|
|
|
36
36
|
'sdChange'
|
|
37
37
|
], [
|
|
38
38
|
'sdChange'
|
|
39
|
-
]);
|
|
39
|
+
], 'checked', 'sdChange', undefined);
|
|
40
40
|
export const SdDateBox = /*@__PURE__*/ defineContainer('sd-date-box', undefined, [
|
|
41
41
|
'date',
|
|
42
42
|
'disabled',
|
|
@@ -53,24 +53,26 @@ export const SdDateBox = /*@__PURE__*/ defineContainer('sd-date-box', undefined,
|
|
|
53
53
|
'sdMouseOver'
|
|
54
54
|
]);
|
|
55
55
|
export const SdDatePicker = /*@__PURE__*/ defineContainer('sd-date-picker', undefined, [
|
|
56
|
-
'
|
|
56
|
+
'value',
|
|
57
57
|
'label',
|
|
58
58
|
'selectable',
|
|
59
59
|
'disabled',
|
|
60
|
+
'placeholder',
|
|
60
61
|
'sdChange'
|
|
61
62
|
], [
|
|
62
63
|
'sdChange'
|
|
63
|
-
]);
|
|
64
|
+
], 'value', 'sdChange', undefined);
|
|
64
65
|
export const SdDateRangePicker = /*@__PURE__*/ defineContainer('sd-date-range-picker', undefined, [
|
|
65
|
-
'
|
|
66
|
+
'value',
|
|
66
67
|
'label',
|
|
67
68
|
'selectable',
|
|
68
69
|
'maxRange',
|
|
69
70
|
'disabled',
|
|
71
|
+
'placeholder',
|
|
70
72
|
'sdChange'
|
|
71
73
|
], [
|
|
72
74
|
'sdChange'
|
|
73
|
-
]);
|
|
75
|
+
], 'value', 'sdChange', undefined);
|
|
74
76
|
export const SdFilePicker = /*@__PURE__*/ defineContainer('sd-file-picker', undefined, [
|
|
75
77
|
'value',
|
|
76
78
|
'placeholder',
|
|
@@ -102,6 +104,7 @@ export const SdIcon = /*@__PURE__*/ defineContainer('sd-icon', undefined, [
|
|
|
102
104
|
export const SdInput = /*@__PURE__*/ defineContainer('sd-input', undefined, [
|
|
103
105
|
'value',
|
|
104
106
|
'label',
|
|
107
|
+
'insideLabel',
|
|
105
108
|
'placeholder',
|
|
106
109
|
'disabled',
|
|
107
110
|
'clearable',
|
|
@@ -125,7 +128,9 @@ export const SdInput = /*@__PURE__*/ defineContainer('sd-input', undefined, [
|
|
|
125
128
|
'sdFocus',
|
|
126
129
|
'sdBlur'
|
|
127
130
|
], 'value', 'sdInput', undefined);
|
|
128
|
-
export const SdLoadingSpinner = /*@__PURE__*/ defineContainer('sd-loading-spinner', undefined
|
|
131
|
+
export const SdLoadingSpinner = /*@__PURE__*/ defineContainer('sd-loading-spinner', undefined, [
|
|
132
|
+
'color'
|
|
133
|
+
]);
|
|
129
134
|
export const SdModalCard = /*@__PURE__*/ defineContainer('sd-modal-card', undefined, [
|
|
130
135
|
'type',
|
|
131
136
|
'system',
|
|
@@ -208,7 +213,7 @@ export const SdPortal = /*@__PURE__*/ defineContainer('sd-portal', undefined, [
|
|
|
208
213
|
]);
|
|
209
214
|
export const SdProgress = /*@__PURE__*/ defineContainer('sd-progress', undefined, [
|
|
210
215
|
'type',
|
|
211
|
-
'
|
|
216
|
+
'error',
|
|
212
217
|
'percentage',
|
|
213
218
|
'size',
|
|
214
219
|
'strokeWidth',
|
|
@@ -324,6 +329,15 @@ export const SdSelectOptionGroup = /*@__PURE__*/ defineContainer('sd-select-opti
|
|
|
324
329
|
], [
|
|
325
330
|
'optionClick'
|
|
326
331
|
]);
|
|
332
|
+
export const SdSelectSearchInput = /*@__PURE__*/ defineContainer('sd-select-search-input', undefined, [
|
|
333
|
+
'isScrolled',
|
|
334
|
+
'searchText',
|
|
335
|
+
'sdSearchInput',
|
|
336
|
+
'sdSearchFocus'
|
|
337
|
+
], [
|
|
338
|
+
'sdSearchInput',
|
|
339
|
+
'sdSearchFocus'
|
|
340
|
+
]);
|
|
327
341
|
export const SdTable = /*@__PURE__*/ defineContainer('sd-table', undefined, [
|
|
328
342
|
'columns',
|
|
329
343
|
'rows',
|
package/lib/components.ts
CHANGED
|
@@ -40,7 +40,7 @@ export const SdCard: StencilVueComponent<JSX.SdCard> = /*@__PURE__*/ defineConta
|
|
|
40
40
|
]);
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
export const SdCheckbox: StencilVueComponent<JSX.SdCheckbox> = /*@__PURE__*/ defineContainer<JSX.SdCheckbox>('sd-checkbox', undefined, [
|
|
43
|
+
export const SdCheckbox: StencilVueComponent<JSX.SdCheckbox, JSX.SdCheckbox["checked"]> = /*@__PURE__*/ defineContainer<JSX.SdCheckbox, JSX.SdCheckbox["checked"]>('sd-checkbox', undefined, [
|
|
44
44
|
'checked',
|
|
45
45
|
'val',
|
|
46
46
|
'disabled',
|
|
@@ -48,7 +48,8 @@ export const SdCheckbox: StencilVueComponent<JSX.SdCheckbox> = /*@__PURE__*/ def
|
|
|
48
48
|
'sdChange'
|
|
49
49
|
], [
|
|
50
50
|
'sdChange'
|
|
51
|
-
]
|
|
51
|
+
],
|
|
52
|
+
'checked', 'sdChange', undefined);
|
|
52
53
|
|
|
53
54
|
|
|
54
55
|
export const SdDateBox: StencilVueComponent<JSX.SdDateBox> = /*@__PURE__*/ defineContainer<JSX.SdDateBox>('sd-date-box', undefined, [
|
|
@@ -68,27 +69,31 @@ export const SdDateBox: StencilVueComponent<JSX.SdDateBox> = /*@__PURE__*/ defin
|
|
|
68
69
|
]);
|
|
69
70
|
|
|
70
71
|
|
|
71
|
-
export const SdDatePicker: StencilVueComponent<JSX.SdDatePicker> = /*@__PURE__*/ defineContainer<JSX.SdDatePicker>('sd-date-picker', undefined, [
|
|
72
|
-
'
|
|
72
|
+
export const SdDatePicker: StencilVueComponent<JSX.SdDatePicker, JSX.SdDatePicker["value"]> = /*@__PURE__*/ defineContainer<JSX.SdDatePicker, JSX.SdDatePicker["value"]>('sd-date-picker', undefined, [
|
|
73
|
+
'value',
|
|
73
74
|
'label',
|
|
74
75
|
'selectable',
|
|
75
76
|
'disabled',
|
|
77
|
+
'placeholder',
|
|
76
78
|
'sdChange'
|
|
77
79
|
], [
|
|
78
80
|
'sdChange'
|
|
79
|
-
]
|
|
81
|
+
],
|
|
82
|
+
'value', 'sdChange', undefined);
|
|
80
83
|
|
|
81
84
|
|
|
82
|
-
export const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker> = /*@__PURE__*/ defineContainer<JSX.SdDateRangePicker>('sd-date-range-picker', undefined, [
|
|
83
|
-
'
|
|
85
|
+
export const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.SdDateRangePicker["value"]> = /*@__PURE__*/ defineContainer<JSX.SdDateRangePicker, JSX.SdDateRangePicker["value"]>('sd-date-range-picker', undefined, [
|
|
86
|
+
'value',
|
|
84
87
|
'label',
|
|
85
88
|
'selectable',
|
|
86
89
|
'maxRange',
|
|
87
90
|
'disabled',
|
|
91
|
+
'placeholder',
|
|
88
92
|
'sdChange'
|
|
89
93
|
], [
|
|
90
94
|
'sdChange'
|
|
91
|
-
]
|
|
95
|
+
],
|
|
96
|
+
'value', 'sdChange', undefined);
|
|
92
97
|
|
|
93
98
|
|
|
94
99
|
export const SdFilePicker: StencilVueComponent<JSX.SdFilePicker, JSX.SdFilePicker["value"]> = /*@__PURE__*/ defineContainer<JSX.SdFilePicker, JSX.SdFilePicker["value"]>('sd-file-picker', undefined, [
|
|
@@ -129,6 +134,7 @@ export const SdIcon: StencilVueComponent<JSX.SdIcon> = /*@__PURE__*/ defineConta
|
|
|
129
134
|
export const SdInput: StencilVueComponent<JSX.SdInput, JSX.SdInput["value"]> = /*@__PURE__*/ defineContainer<JSX.SdInput, JSX.SdInput["value"]>('sd-input', undefined, [
|
|
130
135
|
'value',
|
|
131
136
|
'label',
|
|
137
|
+
'insideLabel',
|
|
132
138
|
'placeholder',
|
|
133
139
|
'disabled',
|
|
134
140
|
'clearable',
|
|
@@ -155,7 +161,9 @@ export const SdInput: StencilVueComponent<JSX.SdInput, JSX.SdInput["value"]> = /
|
|
|
155
161
|
'value', 'sdInput', undefined);
|
|
156
162
|
|
|
157
163
|
|
|
158
|
-
export const SdLoadingSpinner: StencilVueComponent<JSX.SdLoadingSpinner> = /*@__PURE__*/ defineContainer<JSX.SdLoadingSpinner>('sd-loading-spinner', undefined
|
|
164
|
+
export const SdLoadingSpinner: StencilVueComponent<JSX.SdLoadingSpinner> = /*@__PURE__*/ defineContainer<JSX.SdLoadingSpinner>('sd-loading-spinner', undefined, [
|
|
165
|
+
'color'
|
|
166
|
+
]);
|
|
159
167
|
|
|
160
168
|
|
|
161
169
|
export const SdModalCard: StencilVueComponent<JSX.SdModalCard> = /*@__PURE__*/ defineContainer<JSX.SdModalCard>('sd-modal-card', undefined, [
|
|
@@ -251,7 +259,7 @@ export const SdPortal: StencilVueComponent<JSX.SdPortal> = /*@__PURE__*/ defineC
|
|
|
251
259
|
|
|
252
260
|
export const SdProgress: StencilVueComponent<JSX.SdProgress> = /*@__PURE__*/ defineContainer<JSX.SdProgress>('sd-progress', undefined, [
|
|
253
261
|
'type',
|
|
254
|
-
'
|
|
262
|
+
'error',
|
|
255
263
|
'percentage',
|
|
256
264
|
'size',
|
|
257
265
|
'strokeWidth',
|
|
@@ -387,6 +395,17 @@ export const SdSelectOptionGroup: StencilVueComponent<JSX.SdSelectOptionGroup> =
|
|
|
387
395
|
]);
|
|
388
396
|
|
|
389
397
|
|
|
398
|
+
export const SdSelectSearchInput: StencilVueComponent<JSX.SdSelectSearchInput> = /*@__PURE__*/ defineContainer<JSX.SdSelectSearchInput>('sd-select-search-input', undefined, [
|
|
399
|
+
'isScrolled',
|
|
400
|
+
'searchText',
|
|
401
|
+
'sdSearchInput',
|
|
402
|
+
'sdSearchFocus'
|
|
403
|
+
], [
|
|
404
|
+
'sdSearchInput',
|
|
405
|
+
'sdSearchFocus'
|
|
406
|
+
]);
|
|
407
|
+
|
|
408
|
+
|
|
390
409
|
export const SdTable: StencilVueComponent<JSX.SdTable> = /*@__PURE__*/ defineContainer<JSX.SdTable>('sd-table', undefined, [
|
|
391
410
|
'columns',
|
|
392
411
|
'rows',
|
package/lib/index.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from "./components";
|
|
2
|
-
export * from "./plugin";
|
|
1
|
+
export * from "./components";
|
|
2
|
+
export * from "./plugin";
|
package/lib/plugin.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { defineCustomElements } from '@sellmate/design-system/loader';
|
|
2
|
-
import type { App } from 'vue';
|
|
3
|
-
|
|
4
|
-
export const StencilTestVuePlugin = {
|
|
5
|
-
install(_app: App) {
|
|
6
|
-
defineCustomElements();
|
|
7
|
-
},
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export default StencilTestVuePlugin;
|
|
1
|
+
import { defineCustomElements } from '@sellmate/design-system/loader';
|
|
2
|
+
import type { App } from 'vue';
|
|
3
|
+
|
|
4
|
+
export const StencilTestVuePlugin = {
|
|
5
|
+
install(_app: App) {
|
|
6
|
+
defineCustomElements();
|
|
7
|
+
},
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export default StencilTestVuePlugin;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellmate/design-system-vue",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.56",
|
|
4
4
|
"description": "Design System - Vue Component Wrappers",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue",
|
|
@@ -45,10 +45,11 @@
|
|
|
45
45
|
"vue": "^3.4.38"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@sellmate/design-system": "^0.0.
|
|
48
|
+
"@sellmate/design-system": "^0.0.55",
|
|
49
49
|
"@stencil/vue-output-target": "^0.11.8"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"vue": ">=3.0.0"
|
|
53
|
-
}
|
|
53
|
+
},
|
|
54
|
+
"gitHead": "7321b70e305dd0177f37d3c518217c0d675d77f1"
|
|
54
55
|
}
|