@winchsa/ui 0.1.7 → 0.1.9
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
CHANGED
|
@@ -2,40 +2,146 @@
|
|
|
2
2
|
|
|
3
3
|
# Winch UI
|
|
4
4
|
|
|
5
|
-
A Vue 3 + Vuetify UI component library for Winch
|
|
5
|
+
A Vue 3 + Vuetify UI component library for Winch projects.
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
Winch UI is a comprehensive Vue 3 + Vuetify component library designed specifically for Winch projects. It provides pre-built components, utilities, and styling that follow Winch design standards.
|
|
10
|
+
|
|
11
|
+
## Getting Started
|
|
12
|
+
|
|
13
|
+
### Installation
|
|
8
14
|
|
|
9
15
|
```bash
|
|
10
|
-
# Using pnpm
|
|
11
16
|
pnpm add @winchsa/ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Basic Usage
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
```javascript
|
|
23
|
+
// main.ts
|
|
24
|
+
import { createApp } from 'vue'
|
|
25
|
+
import '@winchsa/ui/core/template/index.scss'; // <- WINCH styles
|
|
26
|
+
import './assets/scss/styles.scss'; //<- overwritten styles
|
|
27
|
+
|
|
28
|
+
const app = createApp(App)
|
|
29
|
+
app.mount('#app')
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Configuration
|
|
33
|
+
|
|
34
|
+
### Vite Configuration
|
|
35
|
+
|
|
36
|
+
To use the Winch UI package in your Vite project, add the following configuration to your `vite.config.ts`:
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
import { defineConfig } from 'vite'
|
|
40
|
+
import vue from '@vitejs/plugin-vue'
|
|
41
|
+
import vuetify from 'vite-plugin-vuetify'
|
|
42
|
+
import Components from 'unplugin-vue-components/vite'
|
|
43
|
+
import AutoImport from 'unplugin-auto-import/vite'
|
|
44
|
+
import { fileURLToPath } from 'node:url'
|
|
12
45
|
|
|
13
|
-
|
|
14
|
-
|
|
46
|
+
export default defineConfig({
|
|
47
|
+
plugins: [
|
|
48
|
+
vue(),
|
|
49
|
+
vuetify({
|
|
50
|
+
styles: {
|
|
51
|
+
configFile: 'node_modules/@winchsa/ui/dist/styles/assets/scss/variables/_vuetify.scss'
|
|
52
|
+
}
|
|
53
|
+
}),
|
|
54
|
+
Components({
|
|
55
|
+
resolvers: [
|
|
56
|
+
(name) => {
|
|
57
|
+
if (name.startsWith('W')) {
|
|
58
|
+
return { name, from: '@winchsa/ui' }
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
],
|
|
62
|
+
dts: true
|
|
63
|
+
}),
|
|
64
|
+
AutoImport({
|
|
65
|
+
imports: [
|
|
66
|
+
{
|
|
67
|
+
'@winchsa/ui/utils': [
|
|
68
|
+
'buildApiUrl',
|
|
69
|
+
'printPdf',
|
|
70
|
+
'saveFile',
|
|
71
|
+
'formValidator',
|
|
72
|
+
'getErrorMessage',
|
|
73
|
+
'formatDate',
|
|
74
|
+
'formatNumber',
|
|
75
|
+
'toaster',
|
|
76
|
+
'responseAlert'
|
|
77
|
+
...
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
],
|
|
81
|
+
dts: true
|
|
82
|
+
})
|
|
83
|
+
],
|
|
84
|
+
resolve: {
|
|
85
|
+
alias: {
|
|
86
|
+
'@styles': fileURLToPath(new URL('node_modules/@winchsa/ui/dist/styles', import.meta.url))
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
})
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
This configuration:
|
|
93
|
+
- Sets up Vuetify with custom styles
|
|
94
|
+
- Auto-imports Winch UI components that start with 'W'
|
|
95
|
+
- Auto-imports utility functions from the package
|
|
96
|
+
- Creates proper TypeScript definitions
|
|
97
|
+
- Sets up the alias for styles
|
|
98
|
+
|
|
99
|
+
## Development
|
|
100
|
+
|
|
101
|
+
### Playground
|
|
15
102
|
|
|
16
|
-
|
|
17
|
-
|
|
103
|
+
The playground is located in the `playground/` directory and provides a development environment for testing and showcasing components.
|
|
104
|
+
|
|
105
|
+
#### Running the Playground
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
cd playground
|
|
109
|
+
pnpm install
|
|
110
|
+
pnpm dev
|
|
18
111
|
```
|
|
19
112
|
|
|
20
|
-
|
|
113
|
+
### Building and Installing Locally in an Actual Project
|
|
21
114
|
|
|
22
|
-
|
|
23
|
-
<template>
|
|
24
|
-
<div>
|
|
25
|
-
<!-- Your Winch UI components here -->
|
|
26
|
-
</div>
|
|
27
|
-
</template>
|
|
115
|
+
This script compiles the UI package, generates a tarball, and installs it into your project for local development and testing.
|
|
28
116
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
// import { YourComponent } from '@winchsa/ui'
|
|
32
|
-
</script>
|
|
117
|
+
```bash
|
|
118
|
+
./build-and-install.sh
|
|
33
119
|
```
|
|
34
120
|
|
|
35
|
-
##
|
|
121
|
+
## Release Process
|
|
122
|
+
|
|
123
|
+
This project uses a **tag-based release system** that automatically publishes to npm only when you push version tags. This ensures you have full control over when releases are published.
|
|
36
124
|
|
|
37
125
|
|
|
126
|
+
### **Option 1: Using the Release Script (Recommended)**
|
|
38
127
|
```bash
|
|
39
|
-
|
|
128
|
+
# Complete automated release process
|
|
129
|
+
pnpm run release
|
|
40
130
|
```
|
|
41
131
|
|
|
132
|
+
### **Option 2: Manual Tag-Based Release**
|
|
133
|
+
```bash
|
|
134
|
+
# 1. Update version in package.json
|
|
135
|
+
# 2. Build the package
|
|
136
|
+
pnpm run build
|
|
137
|
+
|
|
138
|
+
# 3. Commit your changes
|
|
139
|
+
git add .
|
|
140
|
+
git commit -m "feat: new features"
|
|
141
|
+
|
|
142
|
+
# 4. Create and push a tag
|
|
143
|
+
git tag v1.2.3
|
|
144
|
+
git push origin master --tags
|
|
145
|
+
|
|
146
|
+
# GitHub Actions will automatically trigger and publish to npm
|
|
147
|
+
```
|
|
@@ -39,12 +39,12 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
|
|
|
39
39
|
triggerRefresh: typeof triggerRefresh;
|
|
40
40
|
triggeredRemove: typeof triggeredRemove;
|
|
41
41
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
42
|
-
refresh: (hideOverlay: () => void) => any;
|
|
43
42
|
collapsed: (isContentCollapsed: boolean) => any;
|
|
43
|
+
refresh: (hideOverlay: () => void) => any;
|
|
44
44
|
trash: () => any;
|
|
45
45
|
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
46
|
-
onRefresh?: ((hideOverlay: () => void) => any) | undefined;
|
|
47
46
|
onCollapsed?: ((isContentCollapsed: boolean) => any) | undefined;
|
|
47
|
+
onRefresh?: ((hideOverlay: () => void) => any) | undefined;
|
|
48
48
|
onTrash?: (() => any) | undefined;
|
|
49
49
|
}>, {
|
|
50
50
|
title: string;
|
|
@@ -55,12 +55,12 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
|
|
|
55
55
|
actionRemove: boolean;
|
|
56
56
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
57
57
|
declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
58
|
-
refresh: (hideOverlay: () => void) => any;
|
|
59
58
|
collapsed: (isContentCollapsed: boolean) => any;
|
|
59
|
+
refresh: (hideOverlay: () => void) => any;
|
|
60
60
|
trash: () => any;
|
|
61
61
|
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
62
|
-
onRefresh?: ((hideOverlay: () => void) => any) | undefined;
|
|
63
62
|
onCollapsed?: ((isContentCollapsed: boolean) => any) | undefined;
|
|
63
|
+
onRefresh?: ((hideOverlay: () => void) => any) | undefined;
|
|
64
64
|
onTrash?: (() => any) | undefined;
|
|
65
65
|
}>, {
|
|
66
66
|
title: string;
|
|
@@ -550,7 +550,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
550
550
|
} & {
|
|
551
551
|
item: unknown;
|
|
552
552
|
}) => import("vue").VNodeChild) | undefined;
|
|
553
|
-
|
|
553
|
+
append?: ((arg: {
|
|
554
554
|
isActive: boolean;
|
|
555
555
|
isSelected: boolean;
|
|
556
556
|
isIndeterminate: boolean;
|
|
@@ -558,7 +558,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
558
558
|
} & {
|
|
559
559
|
item: unknown;
|
|
560
560
|
}) => import("vue").VNodeChild) | undefined;
|
|
561
|
-
|
|
561
|
+
prepend?: ((arg: {
|
|
562
562
|
isActive: boolean;
|
|
563
563
|
isSelected: boolean;
|
|
564
564
|
isIndeterminate: boolean;
|
|
@@ -607,7 +607,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
607
607
|
} & {
|
|
608
608
|
item: unknown;
|
|
609
609
|
}) => import("vue").VNodeChild) | undefined;
|
|
610
|
-
|
|
610
|
+
append?: false | ((arg: {
|
|
611
611
|
isActive: boolean;
|
|
612
612
|
isSelected: boolean;
|
|
613
613
|
isIndeterminate: boolean;
|
|
@@ -615,7 +615,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
615
615
|
} & {
|
|
616
616
|
item: unknown;
|
|
617
617
|
}) => import("vue").VNodeChild) | undefined;
|
|
618
|
-
|
|
618
|
+
prepend?: false | ((arg: {
|
|
619
619
|
isActive: boolean;
|
|
620
620
|
isSelected: boolean;
|
|
621
621
|
isIndeterminate: boolean;
|
|
@@ -664,7 +664,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
664
664
|
} & {
|
|
665
665
|
item: unknown;
|
|
666
666
|
}) => import("vue").VNodeChild) | undefined;
|
|
667
|
-
"v-slot:
|
|
667
|
+
"v-slot:append"?: false | ((arg: {
|
|
668
668
|
isActive: boolean;
|
|
669
669
|
isSelected: boolean;
|
|
670
670
|
isIndeterminate: boolean;
|
|
@@ -672,7 +672,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
672
672
|
} & {
|
|
673
673
|
item: unknown;
|
|
674
674
|
}) => import("vue").VNodeChild) | undefined;
|
|
675
|
-
"v-slot:
|
|
675
|
+
"v-slot:prepend"?: false | ((arg: {
|
|
676
676
|
isActive: boolean;
|
|
677
677
|
isSelected: boolean;
|
|
678
678
|
isIndeterminate: boolean;
|
|
@@ -721,7 +721,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
721
721
|
} & {
|
|
722
722
|
item: unknown;
|
|
723
723
|
}) => import("vue").VNode[];
|
|
724
|
-
|
|
724
|
+
append: (arg: {
|
|
725
725
|
isActive: boolean;
|
|
726
726
|
isSelected: boolean;
|
|
727
727
|
isIndeterminate: boolean;
|
|
@@ -729,7 +729,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
729
729
|
} & {
|
|
730
730
|
item: unknown;
|
|
731
731
|
}) => import("vue").VNode[];
|
|
732
|
-
|
|
732
|
+
prepend: (arg: {
|
|
733
733
|
isActive: boolean;
|
|
734
734
|
isSelected: boolean;
|
|
735
735
|
isIndeterminate: boolean;
|
|
@@ -1299,7 +1299,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
1299
1299
|
} & {
|
|
1300
1300
|
item: unknown;
|
|
1301
1301
|
}) => import("vue").VNodeChild) | undefined;
|
|
1302
|
-
|
|
1302
|
+
append?: ((arg: {
|
|
1303
1303
|
isActive: boolean;
|
|
1304
1304
|
isSelected: boolean;
|
|
1305
1305
|
isIndeterminate: boolean;
|
|
@@ -1307,7 +1307,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
1307
1307
|
} & {
|
|
1308
1308
|
item: unknown;
|
|
1309
1309
|
}) => import("vue").VNodeChild) | undefined;
|
|
1310
|
-
|
|
1310
|
+
prepend?: ((arg: {
|
|
1311
1311
|
isActive: boolean;
|
|
1312
1312
|
isSelected: boolean;
|
|
1313
1313
|
isIndeterminate: boolean;
|
|
@@ -1356,7 +1356,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
1356
1356
|
} & {
|
|
1357
1357
|
item: unknown;
|
|
1358
1358
|
}) => import("vue").VNodeChild) | undefined;
|
|
1359
|
-
|
|
1359
|
+
append?: false | ((arg: {
|
|
1360
1360
|
isActive: boolean;
|
|
1361
1361
|
isSelected: boolean;
|
|
1362
1362
|
isIndeterminate: boolean;
|
|
@@ -1364,7 +1364,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
1364
1364
|
} & {
|
|
1365
1365
|
item: unknown;
|
|
1366
1366
|
}) => import("vue").VNodeChild) | undefined;
|
|
1367
|
-
|
|
1367
|
+
prepend?: false | ((arg: {
|
|
1368
1368
|
isActive: boolean;
|
|
1369
1369
|
isSelected: boolean;
|
|
1370
1370
|
isIndeterminate: boolean;
|
|
@@ -1413,7 +1413,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
1413
1413
|
} & {
|
|
1414
1414
|
item: unknown;
|
|
1415
1415
|
}) => import("vue").VNodeChild) | undefined;
|
|
1416
|
-
"v-slot:
|
|
1416
|
+
"v-slot:append"?: false | ((arg: {
|
|
1417
1417
|
isActive: boolean;
|
|
1418
1418
|
isSelected: boolean;
|
|
1419
1419
|
isIndeterminate: boolean;
|
|
@@ -1421,7 +1421,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
1421
1421
|
} & {
|
|
1422
1422
|
item: unknown;
|
|
1423
1423
|
}) => import("vue").VNodeChild) | undefined;
|
|
1424
|
-
"v-slot:
|
|
1424
|
+
"v-slot:prepend"?: false | ((arg: {
|
|
1425
1425
|
isActive: boolean;
|
|
1426
1426
|
isSelected: boolean;
|
|
1427
1427
|
isIndeterminate: boolean;
|
|
@@ -1470,7 +1470,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
1470
1470
|
} & {
|
|
1471
1471
|
item: unknown;
|
|
1472
1472
|
}) => import("vue").VNode[];
|
|
1473
|
-
|
|
1473
|
+
append: (arg: {
|
|
1474
1474
|
isActive: boolean;
|
|
1475
1475
|
isSelected: boolean;
|
|
1476
1476
|
isIndeterminate: boolean;
|
|
@@ -1478,7 +1478,7 @@ declare const refSearchList: import("vue").Ref<({
|
|
|
1478
1478
|
} & {
|
|
1479
1479
|
item: unknown;
|
|
1480
1480
|
}) => import("vue").VNode[];
|
|
1481
|
-
|
|
1481
|
+
prepend: (arg: {
|
|
1482
1482
|
isActive: boolean;
|
|
1483
1483
|
isSelected: boolean;
|
|
1484
1484
|
isIndeterminate: boolean;
|
|
@@ -14,9 +14,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
|
|
|
14
14
|
attrs: any;
|
|
15
15
|
slots: __VLS_PrettifyGlobal<any>;
|
|
16
16
|
emit: {};
|
|
17
|
-
}>) => import("vue").VNode
|
|
18
|
-
[key: string]: any;
|
|
19
|
-
}> & {
|
|
17
|
+
}>) => import("vue").VNode & {
|
|
20
18
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
21
19
|
};
|
|
22
20
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@winchsa/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"eslint-plugin-import": "^2.31.0",
|
|
53
53
|
"eslint-plugin-vue": "^9.32.0",
|
|
54
54
|
"sass": "1.86.0",
|
|
55
|
-
"typescript": "5.
|
|
55
|
+
"typescript": "^5.8.3",
|
|
56
56
|
"unbuild": "^3.0.0",
|
|
57
57
|
"vite": "^4.5.14",
|
|
58
58
|
"vite-plugin-vuetify": "1.0.2",
|
|
@@ -62,16 +62,8 @@
|
|
|
62
62
|
"scripts": {
|
|
63
63
|
"dev": "vite",
|
|
64
64
|
"build": "unbuild",
|
|
65
|
-
"test": "vitest --run",
|
|
66
65
|
"lint": "eslint \"**/*.{ts,vue,mjs,json}\"",
|
|
67
66
|
"lint:fix": "eslint \"**/*.{ts,vue,mjs,json}\" --fix",
|
|
68
|
-
"
|
|
69
|
-
"version:minor": "pnpm version minor --no-git-tag-version",
|
|
70
|
-
"version:major": "pnpm version major --no-git-tag-version",
|
|
71
|
-
"publish:patch": "pnpm run version:patch && git add package.json && git commit -m \"chore: bump version\" && git push origin master",
|
|
72
|
-
"publish:minor": "pnpm run version:minor && git add package.json && git commit -m \"chore: bump version\" && git push origin master",
|
|
73
|
-
"publish:major": "pnpm run version:major && git add package.json && git commit -m \"chore: bump version\" && git push origin master",
|
|
74
|
-
"release": "pnpm run build && pnpm publish",
|
|
75
|
-
"release:dry-run": "pnpm run build && pnpm publish --dry-run"
|
|
67
|
+
"release": "pnpm version patch && pnpm run build && git add . && git commit -m \"chore: release v$(node -p \"require('./package.json').version\")\" && git tag v$(node -p \"require('./package.json').version\") && git push origin master --tags && pnpm publish"
|
|
76
68
|
}
|
|
77
69
|
}
|