@avakhula/ui 0.0.85 → 0.0.86
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/dist/index.js +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.vue +123 -43
- package/src/components/Form/DatePicker/DatePicker.scss +2 -2
- package/src/components/Form/Input/input.scss +2 -2
- package/src/components/Form/PhoneInput/phoneInput.scss +3 -2
- package/src/components/TreeSelect/Select.vue +2 -1
- package/src/components/TreeSelect/scss/select.scss +2 -2
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -1,59 +1,139 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<div v-for="item in items" :key="item.id">
|
|
4
|
-
{{ item.name }}
|
|
5
|
-
|
|
6
|
-
<ib-icon-button @click="deleteItem(item.id)" v-tooltip="'DELETE'">
|
|
7
|
-
<ib-icon name="close-outline" />
|
|
8
|
-
</ib-icon-button>
|
|
9
|
-
</div>
|
|
10
|
-
</div>
|
|
2
|
+
<ib-select :options="testData1" @input="test"></ib-select>
|
|
11
3
|
</template>
|
|
12
4
|
|
|
13
5
|
<script>
|
|
14
|
-
import
|
|
15
|
-
import { TooltipDirective as Tooltip } from "./directives/tooltip/tooltip";
|
|
16
|
-
|
|
17
|
-
import IbIconButton from "./components/IconButton/IconButton.vue";
|
|
18
|
-
import IbIcon from "./components/Icon.vue"
|
|
6
|
+
import IbSelect from "./components/TreeSelect/Select.vue";
|
|
19
7
|
export default {
|
|
20
8
|
data() {
|
|
21
9
|
return {
|
|
22
|
-
|
|
23
|
-
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
10
|
+
testData1: [
|
|
11
|
+
{
|
|
12
|
+
id: "1",
|
|
13
|
+
title: "A Education",
|
|
14
|
+
is_category: true,
|
|
15
|
+
initiallyVisible: true,
|
|
16
|
+
visible: true,
|
|
17
|
+
isDisabled: false,
|
|
18
|
+
checked: true,
|
|
19
|
+
isChildrenVisible: true,
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
id: "2",
|
|
23
|
+
title: "Education 2",
|
|
24
|
+
is_category: true,
|
|
25
|
+
initiallyVisible: true,
|
|
26
|
+
visible: true,
|
|
27
|
+
isDisabled: false,
|
|
28
|
+
checked: true,
|
|
29
|
+
isChildrenVisible: true,
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
id: "3",
|
|
33
|
+
title: "Education 3",
|
|
34
|
+
is_category: true,
|
|
35
|
+
initiallyVisible: true,
|
|
36
|
+
visible: true,
|
|
37
|
+
isDisabled: false,
|
|
38
|
+
checked: false,
|
|
39
|
+
isChildrenVisible: true,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
id: "4",
|
|
43
|
+
title: "Education 4",
|
|
44
|
+
is_category: true,
|
|
45
|
+
initiallyVisible: true,
|
|
46
|
+
visible: true,
|
|
47
|
+
isDisabled: false,
|
|
48
|
+
checked: false,
|
|
49
|
+
isChildrenVisible: true,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: "5",
|
|
53
|
+
title: "Education 5",
|
|
54
|
+
is_category: true,
|
|
55
|
+
initiallyVisible: true,
|
|
56
|
+
visible: true,
|
|
57
|
+
isDisabled: false,
|
|
58
|
+
checked: false,
|
|
59
|
+
isChildrenVisible: true,
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
{
|
|
63
|
+
id: "6",
|
|
64
|
+
title: "Education 6",
|
|
65
|
+
is_category: true,
|
|
66
|
+
initiallyVisible: true,
|
|
67
|
+
visible: true,
|
|
68
|
+
isDisabled: false,
|
|
69
|
+
checked: false,
|
|
70
|
+
isChildrenVisible: true,
|
|
71
|
+
},
|
|
72
|
+
|
|
73
|
+
{
|
|
74
|
+
id: "7",
|
|
75
|
+
title: "Education 7",
|
|
76
|
+
is_category: true,
|
|
77
|
+
initiallyVisible: true,
|
|
78
|
+
visible: true,
|
|
79
|
+
isDisabled: false,
|
|
80
|
+
checked: false,
|
|
81
|
+
isChildrenVisible: true,
|
|
82
|
+
},
|
|
83
|
+
|
|
84
|
+
{
|
|
85
|
+
id: "8",
|
|
86
|
+
title: "Education 8",
|
|
87
|
+
is_category: true,
|
|
88
|
+
initiallyVisible: true,
|
|
89
|
+
visible: true,
|
|
90
|
+
isDisabled: false,
|
|
91
|
+
checked: false,
|
|
92
|
+
isChildrenVisible: true,
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
id: "9",
|
|
96
|
+
title: "Education 9",
|
|
97
|
+
is_category: true,
|
|
98
|
+
initiallyVisible: true,
|
|
99
|
+
visible: true,
|
|
100
|
+
isDisabled: false,
|
|
101
|
+
checked: false,
|
|
102
|
+
isChildrenVisible: true,
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
id: "10",
|
|
106
|
+
title: "Education 10",
|
|
107
|
+
is_category: true,
|
|
108
|
+
initiallyVisible: true,
|
|
109
|
+
visible: true,
|
|
110
|
+
isDisabled: false,
|
|
111
|
+
checked: false,
|
|
112
|
+
isChildrenVisible: true,
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
id: "11",
|
|
116
|
+
title: "Education 11",
|
|
117
|
+
is_category: true,
|
|
118
|
+
initiallyVisible: true,
|
|
119
|
+
visible: true,
|
|
120
|
+
isDisabled: false,
|
|
121
|
+
checked: false,
|
|
122
|
+
isChildrenVisible: true,
|
|
123
|
+
},
|
|
28
124
|
],
|
|
29
125
|
};
|
|
30
126
|
},
|
|
31
127
|
methods: {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
directives: {
|
|
38
|
-
TextOverflowTooltip,
|
|
39
|
-
Tooltip
|
|
128
|
+
test(a) {
|
|
129
|
+
console.log(a, "change select")
|
|
130
|
+
}
|
|
40
131
|
},
|
|
41
132
|
components: {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
133
|
+
IbSelect,
|
|
134
|
+
},
|
|
45
135
|
};
|
|
46
136
|
</script>
|
|
47
137
|
|
|
48
|
-
<style
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
.hello {
|
|
52
|
-
padding: 200px;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.test {
|
|
56
|
-
max-width: 20px;
|
|
57
|
-
@include lineClamp(1);
|
|
58
|
-
}
|
|
59
|
-
</style>
|
|
138
|
+
<style>
|
|
139
|
+
</style>
|
|
@@ -53,7 +53,7 @@ $dropdown-item-selected-border-color: $blue-900;
|
|
|
53
53
|
|
|
54
54
|
.vti__selection {
|
|
55
55
|
background-color: $dropdown-focus-bg;
|
|
56
|
-
@include outline();
|
|
56
|
+
@include outline(0px);
|
|
57
57
|
border-radius: 4px;
|
|
58
58
|
border-color: transparent;
|
|
59
59
|
}
|
|
@@ -141,7 +141,8 @@ $dropdown-item-selected-border-color: $blue-900;
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
&:focus {
|
|
144
|
-
@include focus();
|
|
144
|
+
@include focus(0px);
|
|
145
|
+
border-bottom: 0px;
|
|
145
146
|
border-radius: 4px;
|
|
146
147
|
border-color: transparent;
|
|
147
148
|
}
|
|
@@ -650,7 +650,8 @@ export default {
|
|
|
650
650
|
|
|
651
651
|
option.checked = this.isMultiple
|
|
652
652
|
? this.val !== null &&
|
|
653
|
-
this.val.findIndex((el) => option.id == el) > -1
|
|
653
|
+
(this.val.findIndex((el) => option.id == el) > -1 ||
|
|
654
|
+
option.checked)
|
|
654
655
|
: this.val !== null && this.val == option.id;
|
|
655
656
|
|
|
656
657
|
if (option.checked) {
|