@avakhula/ui 0.0.62 → 0.0.64
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 +11 -14
- 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.vue +3 -5
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.
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
<ib-tooltip v-if="tooltipTextSorting" :text="tooltipTextSorting">
|
|
14
14
|
</ib-tooltip>
|
|
15
15
|
</button>
|
|
16
|
-
|
|
17
16
|
<ib-icon-button kind="white" size="s" @click="clickHandler">
|
|
18
17
|
<ion-icon :name="iconType"></ion-icon>
|
|
19
18
|
<ib-tooltip v-if="tooltipIconSorting" :text="tooltipIconSorting">
|
|
@@ -92,19 +91,18 @@ export default {
|
|
|
92
91
|
},
|
|
93
92
|
methods: {
|
|
94
93
|
clickHandler() {
|
|
95
|
-
this.$globalEvents.$emit(`sorting:update:${this.tableName}`, this);
|
|
96
94
|
if (!this.currentTypeSort) {
|
|
97
95
|
this.currentTypeSort = this.sortingTypes.TYPE_ASC;
|
|
98
|
-
return;
|
|
99
96
|
} else if (this.currentTypeSort === this.sortingTypes.TYPE_ASC) {
|
|
100
97
|
this.currentTypeSort = this.sortingTypes.TYPE_DESC;
|
|
101
|
-
|
|
98
|
+
} else {
|
|
99
|
+
this.currentTypeSort = null;
|
|
102
100
|
}
|
|
103
|
-
this.currentTypeSort = null;
|
|
104
101
|
|
|
105
102
|
this.updateTypeSorting();
|
|
106
103
|
},
|
|
107
104
|
updateTypeSorting() {
|
|
105
|
+
this.$globalEvents.$emit(`sorting:update:${this.tableName}`, this);
|
|
108
106
|
this.$emit("update-sorting", this.currentTypeSort);
|
|
109
107
|
},
|
|
110
108
|
},
|