@sellmate/design-system-vue 0.0.48 → 0.0.50
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/lib/index.ts +2 -2
- package/lib/plugin.ts +10 -10
- package/package.json +54 -55
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/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,55 +1,54 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@sellmate/design-system-vue",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Design System - Vue Component Wrappers",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"vue",
|
|
7
|
-
"web-components",
|
|
8
|
-
"design-system",
|
|
9
|
-
"ui-library"
|
|
10
|
-
],
|
|
11
|
-
"homepage": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/blob/main/README.md?ref_type=heads",
|
|
12
|
-
"repository": {
|
|
13
|
-
"type": "git",
|
|
14
|
-
"url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system.git"
|
|
15
|
-
},
|
|
16
|
-
"bugs": {
|
|
17
|
-
"url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/issues"
|
|
18
|
-
},
|
|
19
|
-
"license": "MIT",
|
|
20
|
-
"author": {
|
|
21
|
-
"name": "MeeKyeong Kim",
|
|
22
|
-
"email": "kmeijjing@gmail.com"
|
|
23
|
-
},
|
|
24
|
-
"main": "dist/index.js",
|
|
25
|
-
"types": "dist/index.d.ts",
|
|
26
|
-
"directories": {
|
|
27
|
-
"lib": "lib",
|
|
28
|
-
"test": "__tests__"
|
|
29
|
-
},
|
|
30
|
-
"files": [
|
|
31
|
-
"lib",
|
|
32
|
-
"dist"
|
|
33
|
-
],
|
|
34
|
-
"publishConfig": {
|
|
35
|
-
"access": "public"
|
|
36
|
-
},
|
|
37
|
-
"scripts": {
|
|
38
|
-
"build": "tsc",
|
|
39
|
-
"clean": "rm -rf lib",
|
|
40
|
-
"dev": "tsc --watch"
|
|
41
|
-
},
|
|
42
|
-
"devDependencies": {
|
|
43
|
-
"@types/node": "^24.9.1",
|
|
44
|
-
"typescript": "^5.9.3",
|
|
45
|
-
"vue": "^3.4.38"
|
|
46
|
-
},
|
|
47
|
-
"dependencies": {
|
|
48
|
-
"@sellmate/design-system": "^0.0.
|
|
49
|
-
"@stencil/vue-output-target": "^0.11.8"
|
|
50
|
-
},
|
|
51
|
-
"peerDependencies": {
|
|
52
|
-
"vue": ">=3.0.0"
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@sellmate/design-system-vue",
|
|
3
|
+
"version": "0.0.50",
|
|
4
|
+
"description": "Design System - Vue Component Wrappers",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"vue",
|
|
7
|
+
"web-components",
|
|
8
|
+
"design-system",
|
|
9
|
+
"ui-library"
|
|
10
|
+
],
|
|
11
|
+
"homepage": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/blob/main/README.md?ref_type=heads",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system.git"
|
|
15
|
+
},
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/issues"
|
|
18
|
+
},
|
|
19
|
+
"license": "MIT",
|
|
20
|
+
"author": {
|
|
21
|
+
"name": "MeeKyeong Kim",
|
|
22
|
+
"email": "kmeijjing@gmail.com"
|
|
23
|
+
},
|
|
24
|
+
"main": "dist/index.js",
|
|
25
|
+
"types": "dist/index.d.ts",
|
|
26
|
+
"directories": {
|
|
27
|
+
"lib": "lib",
|
|
28
|
+
"test": "__tests__"
|
|
29
|
+
},
|
|
30
|
+
"files": [
|
|
31
|
+
"lib",
|
|
32
|
+
"dist"
|
|
33
|
+
],
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "tsc",
|
|
39
|
+
"clean": "rm -rf lib",
|
|
40
|
+
"dev": "tsc --watch"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@types/node": "^24.9.1",
|
|
44
|
+
"typescript": "^5.9.3",
|
|
45
|
+
"vue": "^3.4.38"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@sellmate/design-system": "^0.0.49",
|
|
49
|
+
"@stencil/vue-output-target": "^0.11.8"
|
|
50
|
+
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"vue": ">=3.0.0"
|
|
53
|
+
}
|
|
54
|
+
}
|