@fiscozen/tab 0.1.9 → 0.1.10
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/package.json
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fiscozen/tab",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"description": "Design System Tab component",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"keywords": [],
|
|
8
8
|
"author": "Cristian Barraco",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@fiscozen/
|
|
11
|
-
"@fiscozen/
|
|
10
|
+
"@fiscozen/composables": "^0.1.37",
|
|
11
|
+
"@fiscozen/style": "^0.1.7",
|
|
12
|
+
"@fiscozen/badge": "^0.1.2"
|
|
12
13
|
},
|
|
13
14
|
"peerDependencies": {
|
|
14
15
|
"tailwindcss": "^3.4.1",
|
package/src/FzTabs.vue
CHANGED
|
@@ -81,7 +81,7 @@ const tabs = computed(() => {
|
|
|
81
81
|
});
|
|
82
82
|
|
|
83
83
|
const staticTabContainerClass =
|
|
84
|
-
"tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto";
|
|
84
|
+
"tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto w-full sm:w-auto";
|
|
85
85
|
|
|
86
86
|
const computedClass = computed(() => [
|
|
87
87
|
props.vertical ? "flex-col" : "flex-row",
|
|
@@ -18,6 +18,8 @@
|
|
|
18
18
|
import { inject, computed, Ref } from "vue";
|
|
19
19
|
import { FzBadge } from "@fiscozen/badge";
|
|
20
20
|
import { FzIcon } from "@fiscozen/icons";
|
|
21
|
+
import { useMediaQuery } from "@fiscozen/composables";
|
|
22
|
+
import { breakpoints } from "@fiscozen/style";
|
|
21
23
|
import { FzTabProps } from "../types";
|
|
22
24
|
import {
|
|
23
25
|
mapSelectedTabToClasses,
|
|
@@ -25,6 +27,8 @@ import {
|
|
|
25
27
|
mapUnselectedTabToClasses,
|
|
26
28
|
} from "../common";
|
|
27
29
|
|
|
30
|
+
const xs = useMediaQuery(`(max-width: ${breakpoints.xs})`);
|
|
31
|
+
|
|
28
32
|
const props = withDefaults(
|
|
29
33
|
defineProps<{
|
|
30
34
|
tab: FzTabProps;
|
|
@@ -51,7 +55,8 @@ const classes = computed(() => [
|
|
|
51
55
|
? mapSelectedTabToClasses[props.type]
|
|
52
56
|
: mapUnselectedTabToClasses[props.type],
|
|
53
57
|
props.tab.disabled ? "cursor-not-allowed" : "cursor-pointer",
|
|
54
|
-
props.maxWidth ? `max-w-[${props.maxWidth}]` : "",
|
|
58
|
+
props.maxWidth && !xs.value ? `max-w-[${props.maxWidth}]` : "",
|
|
59
|
+
xs.value ? "!max-w-full !w-full" : "",
|
|
55
60
|
]);
|
|
56
61
|
|
|
57
62
|
const onClickTab = () => {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
<FzTabButton
|
|
10
10
|
:tab="selectedTabProps!"
|
|
11
11
|
:size="size"
|
|
12
|
+
class="w-full sm:w-auto"
|
|
12
13
|
type="tab"
|
|
13
14
|
readonly
|
|
14
15
|
@click="isOpen = !isOpen"
|
|
@@ -17,8 +18,7 @@
|
|
|
17
18
|
</FzTabButton>
|
|
18
19
|
</template>
|
|
19
20
|
<div
|
|
20
|
-
class="flex flex-col p-4 rounded shadow overflow-hidden bg-core-white z-10"
|
|
21
|
-
:style="{ width: containerWidth }"
|
|
21
|
+
class="flex flex-col p-4 rounded shadow overflow-hidden bg-core-white z-10 w-full"
|
|
22
22
|
>
|
|
23
23
|
<FzTabButton
|
|
24
24
|
v-for="tab in tabs"
|
|
@@ -57,11 +57,6 @@ const computedClasses = computed(() => [
|
|
|
57
57
|
mapSizeToClasses[props.size],
|
|
58
58
|
]);
|
|
59
59
|
|
|
60
|
-
const containerWidth = computed(() => {
|
|
61
|
-
if (!opener.value) return "auto";
|
|
62
|
-
return `${opener.value.offsetWidth}px`;
|
|
63
|
-
});
|
|
64
|
-
|
|
65
60
|
const closePicker = () => {
|
|
66
61
|
isOpen.value = false;
|
|
67
62
|
};
|