@fishawack/lab-velocity 0.0.7 → 0.1.1
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/components/_checkbox.scss +36 -0
- package/components/_datepicker.scss +8 -0
- package/components/_select.scss +5 -0
- package/form/CheckboxGroup.vue +69 -0
- package/form/{datetime.vue → DatePicker.vue} +27 -7
- package/form/{select.vue → Select.vue} +51 -13
- package/general.scss +3 -1
- package/package.json +3 -5
- package/form/checkbox-group.vue +0 -38
- /package/form/{checkbox.vue → Checkbox.vue} +0 -0
- /package/form/{switch.vue → Switch.vue} +0 -0
|
@@ -1 +1,37 @@
|
|
|
1
1
|
@import "element-plus/theme-chalk/el-checkbox.css";
|
|
2
|
+
@import "element-plus/theme-chalk/el-checkbox-button.css";
|
|
3
|
+
|
|
4
|
+
.vel-checkbox {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: row;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: .5rem;
|
|
9
|
+
flex-wrap: wrap ;
|
|
10
|
+
&__label{
|
|
11
|
+
order: 2;
|
|
12
|
+
}
|
|
13
|
+
&__checkbox {
|
|
14
|
+
order: 1;
|
|
15
|
+
.el-checkbox__input {
|
|
16
|
+
&.is-checked {
|
|
17
|
+
.el-checkbox__inner {
|
|
18
|
+
background-color: black;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
&__error {
|
|
24
|
+
order: 3;
|
|
25
|
+
flex-basis: 100%;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.vel-checkbox-group {
|
|
30
|
+
&--vertical {
|
|
31
|
+
.vel-checkbox-group__wrapper {
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<XInput v-bind="$props">
|
|
3
|
+
<el-checkbox-group :class="[`${baseClass}__wrapper`]" :id="name" :disabled="disabled" :size="size" :min="min"
|
|
4
|
+
:max="max" v-model="content" :required="required" @change="handleInput" :checkboxButton="checkboxButton">
|
|
5
|
+
<el-checkbox v-if="!checkboxButton" :key="index" v-for="({ label, value, disabled }, index) in options"
|
|
6
|
+
:label="label" :value="value" :disabled="disabled">
|
|
7
|
+
<slot name="label" :label="label" :value="value">
|
|
8
|
+
<span v-html="label"></span>
|
|
9
|
+
</slot>
|
|
10
|
+
</el-checkbox>
|
|
11
|
+
<el-checkbox-button v-else :key="indexB" v-for="({ label, value, disabled }, indexB) in options"
|
|
12
|
+
:label="label" :value="value" :disabled="disabled">
|
|
13
|
+
<slot name="label" :label="label" :value="value">
|
|
14
|
+
<span v-html="label"></span>
|
|
15
|
+
</slot>
|
|
16
|
+
</el-checkbox-button>
|
|
17
|
+
</el-checkbox-group>
|
|
18
|
+
</XInput>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
import { ElCheckbox } from "element-plus";
|
|
23
|
+
import { ElCheckboxButton } from "element-plus";
|
|
24
|
+
import { ElCheckboxGroup } from "element-plus";
|
|
25
|
+
import input from "./input.js";
|
|
26
|
+
import XInput from "./input.vue";
|
|
27
|
+
|
|
28
|
+
export default {
|
|
29
|
+
mixins: [input],
|
|
30
|
+
props: {
|
|
31
|
+
...input.props,
|
|
32
|
+
modelValue: {
|
|
33
|
+
type: Array,
|
|
34
|
+
default: [],
|
|
35
|
+
},
|
|
36
|
+
baseClass: {
|
|
37
|
+
type: String,
|
|
38
|
+
default: "vel-checkbox-group",
|
|
39
|
+
},
|
|
40
|
+
checkboxButton: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: false,
|
|
43
|
+
},
|
|
44
|
+
size: {
|
|
45
|
+
type: String,
|
|
46
|
+
default: "default",
|
|
47
|
+
},
|
|
48
|
+
min: {
|
|
49
|
+
type: Number,
|
|
50
|
+
default: 0,
|
|
51
|
+
},
|
|
52
|
+
max: {
|
|
53
|
+
type: Number,
|
|
54
|
+
default: 100,
|
|
55
|
+
},
|
|
56
|
+
options: {
|
|
57
|
+
type: Array,
|
|
58
|
+
default: [],
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
components: {
|
|
63
|
+
XInput,
|
|
64
|
+
ElCheckbox,
|
|
65
|
+
ElCheckboxButton,
|
|
66
|
+
ElCheckboxGroup,
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
</script>
|
|
@@ -4,31 +4,47 @@
|
|
|
4
4
|
<slot name="label" />
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
|
-
<el-date-picker
|
|
8
|
-
type="
|
|
9
|
-
:
|
|
7
|
+
<el-date-picker v-bind="$attrs"
|
|
8
|
+
:type="type"
|
|
9
|
+
:disabled="disabled"
|
|
10
10
|
:disabled-date="disabledDate"
|
|
11
|
+
- :placeholder="placeholder"
|
|
11
12
|
:shortcuts="shortcuts"
|
|
12
13
|
class="w-100"
|
|
13
14
|
v-model="content"
|
|
14
15
|
@change="handleInput"
|
|
15
|
-
value-format="
|
|
16
|
+
:value-format="valueFormat"
|
|
17
|
+
:format="format"
|
|
16
18
|
/>
|
|
17
19
|
</XInput>
|
|
18
20
|
</template>
|
|
19
21
|
|
|
20
22
|
<script>
|
|
21
23
|
import dayjs from "dayjs";
|
|
24
|
+
import { ElDatePicker } from "element-plus";
|
|
22
25
|
|
|
23
26
|
import input from "./input.js";
|
|
24
27
|
import XInput from "./input.vue";
|
|
25
28
|
|
|
26
29
|
export default {
|
|
27
30
|
mixins: [input],
|
|
28
|
-
|
|
29
|
-
components: { XInput },
|
|
30
|
-
|
|
31
31
|
props: {
|
|
32
|
+
...input.props,
|
|
33
|
+
type: {
|
|
34
|
+
type: String,
|
|
35
|
+
validator: (value) => ['date', 'year', 'years', 'month', 'months', 'date', 'dates', 'datetime', 'week', 'datetimerange', 'daterange', 'monthrange', 'yearrange'].includes(value),
|
|
36
|
+
default: "date",
|
|
37
|
+
},
|
|
38
|
+
format: {
|
|
39
|
+
type: String
|
|
40
|
+
},
|
|
41
|
+
valueFormat: {
|
|
42
|
+
type: String
|
|
43
|
+
},
|
|
44
|
+
baseClass: {
|
|
45
|
+
type: String,
|
|
46
|
+
default: "vel-datepicker",
|
|
47
|
+
},
|
|
32
48
|
minDate: {
|
|
33
49
|
type: [Date, String],
|
|
34
50
|
},
|
|
@@ -40,6 +56,10 @@ export default {
|
|
|
40
56
|
default: [],
|
|
41
57
|
},
|
|
42
58
|
},
|
|
59
|
+
components: {
|
|
60
|
+
XInput,
|
|
61
|
+
ElDatePicker,
|
|
62
|
+
},
|
|
43
63
|
|
|
44
64
|
methods: {
|
|
45
65
|
disabledDate(date) {
|
|
@@ -6,18 +6,20 @@
|
|
|
6
6
|
|
|
7
7
|
<el-select
|
|
8
8
|
v-model="content"
|
|
9
|
-
@change="handleInput"
|
|
10
9
|
class="block"
|
|
11
10
|
:multiple="multiple"
|
|
12
11
|
:placeholder="placeholder"
|
|
13
12
|
:disabled="disabled"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
:clearable="clearable"
|
|
14
|
+
:collapse-tags="collapseTags"
|
|
15
|
+
:filterable="filterable"
|
|
17
16
|
:value-on-clear="null"
|
|
17
|
+
@change="handleInput"
|
|
18
|
+
@clear="this.$emit('clear')"
|
|
19
|
+
@blur="this.$emit('blur')"
|
|
18
20
|
>
|
|
19
21
|
<el-option
|
|
20
|
-
v-if="object"
|
|
22
|
+
v-if="!object"
|
|
21
23
|
v-for="(label, value) in options"
|
|
22
24
|
:key="value"
|
|
23
25
|
:label="label"
|
|
@@ -25,10 +27,11 @@
|
|
|
25
27
|
>
|
|
26
28
|
</el-option>
|
|
27
29
|
<el-option
|
|
28
|
-
v-if="
|
|
30
|
+
v-else-if="object"
|
|
29
31
|
v-for="option in options"
|
|
30
32
|
:key="option.value"
|
|
31
33
|
:label="option.label"
|
|
34
|
+
:disabled="option.disabled"
|
|
32
35
|
:value="castValue(option.value)"
|
|
33
36
|
>
|
|
34
37
|
</el-option>
|
|
@@ -37,26 +40,57 @@
|
|
|
37
40
|
</template>
|
|
38
41
|
|
|
39
42
|
<script>
|
|
43
|
+
import { ElSelect } from "element-plus";
|
|
44
|
+
import { ElOption } from "element-plus";
|
|
40
45
|
import input from "./input.js";
|
|
41
46
|
import XInput from "./input.vue";
|
|
47
|
+
import _ from 'lodash';
|
|
42
48
|
|
|
43
49
|
export default {
|
|
44
50
|
mixins: [input],
|
|
45
|
-
|
|
46
|
-
components: {
|
|
47
|
-
XInput,
|
|
48
|
-
},
|
|
49
|
-
|
|
50
51
|
props: {
|
|
51
|
-
|
|
52
|
+
...input.props,
|
|
53
|
+
modelValue: {
|
|
54
|
+
type: Array,
|
|
55
|
+
default: [],
|
|
56
|
+
},
|
|
57
|
+
baseClass: {
|
|
58
|
+
type: String,
|
|
59
|
+
default: "vel-select",
|
|
60
|
+
},
|
|
61
|
+
clearable: {
|
|
62
|
+
type: Boolean,
|
|
63
|
+
default: false,
|
|
64
|
+
},
|
|
65
|
+
collapseTags: {
|
|
66
|
+
type: Boolean,
|
|
67
|
+
default: false,
|
|
68
|
+
},
|
|
69
|
+
filterable: {
|
|
70
|
+
type: Boolean,
|
|
71
|
+
default: false,
|
|
72
|
+
},
|
|
73
|
+
options: {
|
|
74
|
+
type: Array,
|
|
75
|
+
default: [],
|
|
76
|
+
},
|
|
52
77
|
multiple: {
|
|
78
|
+
type: Boolean,
|
|
53
79
|
default: false,
|
|
54
80
|
},
|
|
55
81
|
object: {
|
|
56
|
-
|
|
82
|
+
type: Boolean,
|
|
83
|
+
default: false,
|
|
57
84
|
},
|
|
58
85
|
},
|
|
59
86
|
|
|
87
|
+
components: {
|
|
88
|
+
XInput,
|
|
89
|
+
ElOption,
|
|
90
|
+
ElSelect,
|
|
91
|
+
},
|
|
92
|
+
|
|
93
|
+
emits: ['change', 'clear', 'blur'],
|
|
60
94
|
methods: {
|
|
61
95
|
castValue(value) {
|
|
62
96
|
if (
|
|
@@ -68,6 +102,10 @@ export default {
|
|
|
68
102
|
}
|
|
69
103
|
return value;
|
|
70
104
|
},
|
|
105
|
+
handleInput(value, $event) {
|
|
106
|
+
this.$emit('change', value);
|
|
107
|
+
}
|
|
71
108
|
},
|
|
109
|
+
|
|
72
110
|
};
|
|
73
111
|
</script>
|
package/general.scss
CHANGED
|
@@ -7,4 +7,6 @@
|
|
|
7
7
|
@import "./components/_basic.scss";
|
|
8
8
|
@import "./components/_checkbox.scss";
|
|
9
9
|
@import "./components/_icon.scss";
|
|
10
|
-
@import "./components/_button.scss";
|
|
10
|
+
@import "./components/_button.scss";
|
|
11
|
+
@import "./components/_select.scss";
|
|
12
|
+
@import "./components/_datepicker.scss";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fishawack/lab-velocity",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Avalere Health branded style system",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"setup": "npm ci || npm i && npm run content",
|
|
@@ -13,10 +13,7 @@
|
|
|
13
13
|
"mail": "npm run mail --prefix node_modules/@fishawack/core/",
|
|
14
14
|
"story:dev": "histoire dev",
|
|
15
15
|
"story:build": "histoire build",
|
|
16
|
-
"
|
|
17
|
-
"preversion": "lab-env test",
|
|
18
|
-
"postversion": "git push && git push --tags && npm publish",
|
|
19
|
-
"postpublish": "bash -c '(rm -rf *.scss components form *.vue; true) 2>/dev/null && git checkout development && git merge master && git push' || echo 'Failed to execute postpublish script'"
|
|
16
|
+
"preversion": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./"
|
|
20
17
|
},
|
|
21
18
|
"license": "BSD-3-Clause",
|
|
22
19
|
"author": {
|
|
@@ -34,6 +31,7 @@
|
|
|
34
31
|
"@vitejs/plugin-vue": "^5.1.1",
|
|
35
32
|
"histoire": "^0.17.17",
|
|
36
33
|
"sass": "^1.77.8",
|
|
34
|
+
"semantic-release": "^22.0.12",
|
|
37
35
|
"vite": "^5.3.5",
|
|
38
36
|
"vite-svg-loader": "^5.1.0",
|
|
39
37
|
"vue": "^3.4.34",
|
package/form/checkbox-group.vue
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<XInput :errors="errors" :name="name">
|
|
3
|
-
<el-checkbox-group
|
|
4
|
-
v-model="content"
|
|
5
|
-
@change="handleInput"
|
|
6
|
-
:required="required"
|
|
7
|
-
>
|
|
8
|
-
<el-checkbox
|
|
9
|
-
:key="index"
|
|
10
|
-
v-for="({ label, value }, index) in options"
|
|
11
|
-
:label="label"
|
|
12
|
-
:value="value"
|
|
13
|
-
>
|
|
14
|
-
<slot name="label" :label="label" :value="value">
|
|
15
|
-
<span v-html="label"></span>
|
|
16
|
-
</slot>
|
|
17
|
-
</el-checkbox>
|
|
18
|
-
</el-checkbox-group>
|
|
19
|
-
</XInput>
|
|
20
|
-
</template>
|
|
21
|
-
|
|
22
|
-
<script>
|
|
23
|
-
import input from "./input.js";
|
|
24
|
-
import XInput from "./input.vue";
|
|
25
|
-
|
|
26
|
-
export default {
|
|
27
|
-
mixins: [input],
|
|
28
|
-
|
|
29
|
-
components: { XInput },
|
|
30
|
-
|
|
31
|
-
props: {
|
|
32
|
-
options: {
|
|
33
|
-
type: Array,
|
|
34
|
-
default: [],
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
</script>
|
|
File without changes
|
|
File without changes
|