@avakhula/ui 0.0.63 → 0.0.65
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 +22 -9
- package/dist/index.umd.cjs +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/Form/Label/Label.stories.js +7 -0
- package/src/components/Form/Label/Label.vue +5 -1
- package/src/components/Form/Label/readme.mdx +1 -0
- package/src/components/Sorting/Sorting.stories.js +6 -0
- package/src/components/Sorting/Sorting.vue +19 -4
package/package.json
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import IbLabel from "./Label.vue";
|
|
2
2
|
import readme from "./readme.mdx";
|
|
3
|
+
import { popoverPosition } from "../../Popover/constants";
|
|
3
4
|
|
|
4
5
|
export default {
|
|
5
6
|
title: "Form/Label",
|
|
6
7
|
component: IbLabel,
|
|
8
|
+
argTypes: {
|
|
9
|
+
tooltipPosition: {
|
|
10
|
+
control: { type: "select" },
|
|
11
|
+
options: Object.values(popoverPosition),
|
|
12
|
+
},
|
|
13
|
+
},
|
|
7
14
|
parameters: {
|
|
8
15
|
docs: {
|
|
9
16
|
page: readme,
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
kind="ghost"
|
|
11
11
|
>
|
|
12
12
|
<ib-icon name="information-circle-outline" />
|
|
13
|
-
|
|
13
|
+
|
|
14
|
+
<ib-tooltip :text="infoText" :position="tooltipPosition"></ib-tooltip>
|
|
14
15
|
</ib-icon-button>
|
|
15
16
|
</label>
|
|
16
17
|
</template>
|
|
@@ -31,6 +32,9 @@ export default {
|
|
|
31
32
|
type: String,
|
|
32
33
|
default: "",
|
|
33
34
|
},
|
|
35
|
+
tooltipPosition: {
|
|
36
|
+
type: String,
|
|
37
|
+
},
|
|
34
38
|
},
|
|
35
39
|
computed: {
|
|
36
40
|
classes() {
|
|
@@ -15,6 +15,7 @@ This component styles the default `<label>` component
|
|
|
15
15
|
| -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------ |
|
|
16
16
|
| required | Boolean | false | If true, display a required indicator with a red asterisk. |
|
|
17
17
|
| infoText | String | '' | The text that will be displayed inside the tooltip when the information button is hover or have focus. |
|
|
18
|
+
| tooltipPosition | String | '`top-center`' | No | The position of tooltip. Possible values are: '`top-left`', '`top-center`', '`top-right`', '`right-top`', '`right-center`', '`right-bottom`', '`bottom-left`', '`bottom-center`', '`bottom-right`', '`left-top`', '`left-center`', '`left-bottom`'. |
|
|
18
19
|
|
|
19
20
|
### Events
|
|
20
21
|
This component does not emit any events.
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import IbSorting from "./Sorting.vue";
|
|
2
2
|
import { typesSorting, typesSortingView } from "./constants.js";
|
|
3
|
+
import { popoverPosition } from "../Popover/constants";
|
|
3
4
|
|
|
4
5
|
export default {
|
|
5
6
|
title: "Sorting",
|
|
@@ -13,6 +14,10 @@ export default {
|
|
|
13
14
|
control: { type: "select" },
|
|
14
15
|
options: Object.values(typesSortingView),
|
|
15
16
|
},
|
|
17
|
+
tooltipPosition: {
|
|
18
|
+
control: { type: "select" },
|
|
19
|
+
options: Object.values(popoverPosition),
|
|
20
|
+
},
|
|
16
21
|
},
|
|
17
22
|
};
|
|
18
23
|
|
|
@@ -32,4 +37,5 @@ export const Default = Template.bind({});
|
|
|
32
37
|
Default.args = {
|
|
33
38
|
viewSorting: typesSortingView.TABLE_VIEW,
|
|
34
39
|
title: "sorting",
|
|
40
|
+
tableName: "test",
|
|
35
41
|
};
|
|
@@ -10,13 +10,20 @@
|
|
|
10
10
|
>
|
|
11
11
|
<button class="sorting-label" type="button">
|
|
12
12
|
{{ title }}
|
|
13
|
-
<ib-tooltip
|
|
13
|
+
<ib-tooltip
|
|
14
|
+
v-if="tooltipTextSorting"
|
|
15
|
+
:text="tooltipTextSorting"
|
|
16
|
+
:position="tooltipPosition"
|
|
17
|
+
>
|
|
14
18
|
</ib-tooltip>
|
|
15
19
|
</button>
|
|
16
|
-
|
|
17
20
|
<ib-icon-button kind="white" size="s" @click="clickHandler">
|
|
18
21
|
<ion-icon :name="iconType"></ion-icon>
|
|
19
|
-
<ib-tooltip
|
|
22
|
+
<ib-tooltip
|
|
23
|
+
v-if="tooltipIconSorting"
|
|
24
|
+
:text="tooltipIconSorting"
|
|
25
|
+
:position="tooltipPosition"
|
|
26
|
+
>
|
|
20
27
|
</ib-tooltip>
|
|
21
28
|
</ib-icon-button>
|
|
22
29
|
</div>
|
|
@@ -34,7 +41,11 @@
|
|
|
34
41
|
>
|
|
35
42
|
{{ title }}
|
|
36
43
|
<ib-icon v-if="iconType" :name="iconType"></ib-icon>
|
|
37
|
-
<ib-tooltip
|
|
44
|
+
<ib-tooltip
|
|
45
|
+
v-if="tooltipTextSorting"
|
|
46
|
+
:text="tooltipTextSorting"
|
|
47
|
+
:position="tooltipPosition"
|
|
48
|
+
>
|
|
38
49
|
</ib-tooltip>
|
|
39
50
|
</button>
|
|
40
51
|
</div>
|
|
@@ -52,6 +63,10 @@ export default {
|
|
|
52
63
|
tooltipTextSorting: {
|
|
53
64
|
type: String,
|
|
54
65
|
},
|
|
66
|
+
tooltipPosition: {
|
|
67
|
+
type: String,
|
|
68
|
+
},
|
|
69
|
+
// ??????
|
|
55
70
|
tooltipIconSorting: {
|
|
56
71
|
type: String,
|
|
57
72
|
},
|