@fiscozen/tab 0.1.5 → 0.1.6

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.
Files changed (6) hide show
  1. package/package.json +4 -4
  2. package/src/__test__/__snapshots__/FzTabs.test.ts.snap +12 -12
  3. package/src/common.ts +2 -2
  4. package/src/components/FzTabName.vue +1 -1
  5. package/src/components/FzTabPicker.vue +3 -3
  6. package/src/components/FzTabPickerValue.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fiscozen/tab",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "description": "Design System Tab component",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
@@ -8,7 +8,7 @@
8
8
  "author": "Cristian Barraco",
9
9
  "dependencies": {
10
10
  "@fiscozen/badge": "^0.1.0",
11
- "@fiscozen/composables": "^0.1.5"
11
+ "@fiscozen/composables": "^0.1.8"
12
12
  },
13
13
  "peerDependencies": {
14
14
  "tailwindcss": "^3.4.1",
@@ -34,9 +34,9 @@
34
34
  "@fortawesome/fontawesome-svg-core": "^6.5.1",
35
35
  "@fortawesome/vue-fontawesome": "^3.0.6",
36
36
  "@fiscozen/eslint-config": "^0.1.0",
37
- "@fiscozen/tsconfig": "^0.1.0",
38
37
  "@fiscozen/prettier-config": "^0.1.0",
39
- "@fiscozen/icons": "^0.1.3"
38
+ "@fiscozen/icons": "^0.1.4",
39
+ "@fiscozen/tsconfig": "^0.1.0"
40
40
  },
41
41
  "license": "MIT",
42
42
  "scripts": {
package/src/__test__/__snapshots__/FzTabs.test.ts.snap CHANGED
@@ -3,10 +3,10 @@
3
3
  exports[`FzTabs > change tab 1`] = `
4
4
  "<div data-v-97c498eb="" class="flex flex-col">
5
5
  <div data-v-97c498eb="" class="flex flex-row">
6
- <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab1">
6
+ <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab1">
7
7
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
8
8
  <!--v-if-->
9
- </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab2">
9
+ </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab2">
10
10
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
11
11
  <!--v-if-->
12
12
  </button></div>
@@ -18,10 +18,10 @@ exports[`FzTabs > change tab 1`] = `
18
18
  exports[`FzTabs > renders with badgeContent on tab1 1`] = `
19
19
  "<div data-v-97c498eb="" class="flex flex-col">
20
20
  <div data-v-97c498eb="" class="flex flex-row">
21
- <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1" badgecontent="1">
21
+ <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1" badgecontent="1">
22
22
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
23
23
  <div class="text-xs px-12 rounded-xl w-fit h-20 flex items-center font-medium bg-blue-500 text-core-white" size="sm">1</div>
24
- </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
24
+ </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
25
25
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
26
26
  <!--v-if-->
27
27
  </button></div>
@@ -33,10 +33,10 @@ exports[`FzTabs > renders with badgeContent on tab1 1`] = `
33
33
  exports[`FzTabs > renders with base case 1`] = `
34
34
  "<div data-v-97c498eb="" class="flex flex-col">
35
35
  <div data-v-97c498eb="" class="flex flex-row">
36
- <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1">
36
+ <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
37
37
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
38
38
  <!--v-if-->
39
- </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
39
+ </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
40
40
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
41
41
  <!--v-if-->
42
42
  </button></div>
@@ -48,12 +48,12 @@ exports[`FzTabs > renders with base case 1`] = `
48
48
  exports[`FzTabs > renders with icon on tab1 1`] = `
49
49
  "<div data-v-97c498eb="" class="flex flex-col">
50
50
  <div data-v-97c498eb="" class="flex flex-row">
51
- <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1" icon="bell">
51
+ <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1" icon="bell">
52
52
  <div class="flex items-center justify-center w-[15px] h-[15px]"><svg class="svg-inline--fa fa-bell fa-sm h-[12px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
53
53
  <path class="" fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path>
54
54
  </svg></div><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
55
55
  <!--v-if-->
56
- </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
56
+ </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
57
57
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
58
58
  <!--v-if-->
59
59
  </button></div>
@@ -65,10 +65,10 @@ exports[`FzTabs > renders with icon on tab1 1`] = `
65
65
  exports[`FzTabs > renders with md size 1`] = `
66
66
  "<div data-v-97c498eb="" class="flex flex-col">
67
67
  <div data-v-97c498eb="" class="flex flex-row">
68
- <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-md h-40 gap-8 py-12 px-14 rounded-lg bg-white text-blue-500 cursor-pointer" title="tab1">
68
+ <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-md h-40 gap-8 py-12 px-14 bg-white text-blue-500 cursor-pointer" title="tab1">
69
69
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
70
70
  <!--v-if-->
71
- </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-md h-40 gap-8 py-12 px-14 rounded-lg text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
71
+ </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-md h-40 gap-8 py-12 px-14 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
72
72
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
73
73
  <!--v-if-->
74
74
  </button></div>
@@ -80,10 +80,10 @@ exports[`FzTabs > renders with md size 1`] = `
80
80
  exports[`FzTabs > renders with vertical direction 1`] = `
81
81
  "<div data-v-97c498eb="" class="flex flex-row">
82
82
  <div data-v-97c498eb="" class="flex flex-col">
83
- <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-col"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1">
83
+ <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-col"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 bg-white text-blue-500 cursor-pointer" title="tab1">
84
84
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
85
85
  <!--v-if-->
86
- </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
86
+ </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
87
87
  <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
88
88
  <!--v-if-->
89
89
  </button></div>
package/src/common.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export const mapSizeToClasses = {
2
- sm: "text-sm h-40 gap-6 py-8 px-12 rounded-md",
3
- md: "text-md h-40 gap-8 py-12 px-14 rounded-lg",
2
+ sm: "text-sm h-40 gap-6 py-8 px-12",
3
+ md: "text-md h-40 gap-8 py-12 px-14",
4
4
  };
package/src/components/FzTabName.vue CHANGED
@@ -28,7 +28,7 @@ const props = defineProps<{
28
28
  const selectedTab = inject<Ref<string>>("selectedTab");
29
29
 
30
30
  const classes = computed(() => [
31
- "w-auto flex font-medium items-center max-w-[136px]",
31
+ "w-auto flex font-medium items-center max-w-[136px] rounded-md",
32
32
  mapSizeToClasses[props.size],
33
33
  selectedTab?.value === props.tab.title
34
34
  ? "bg-white text-blue-500"
package/src/components/FzTabPicker.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <FzFloating position="bottom" :isOpen class="w-full overflow-hidden">
2
+ <FzFloating position="bottom" :isOpen class="w-full overflow-hidden" contentClass="bg-transparent">
3
3
  <template #opener>
4
4
  <button
5
5
  @click="isOpen = !isOpen"
@@ -14,7 +14,7 @@
14
14
  </button>
15
15
  </template>
16
16
  <div
17
- class="flex flex-col p-4 rounded-[4px] shadow overflow-hidden"
17
+ class="flex flex-col p-4 rounded shadow overflow-hidden bg-core-white z-10"
18
18
  :style="{ width: containerWidth }"
19
19
  >
20
20
  <FzTabPickerValue
@@ -45,7 +45,7 @@ const opener = ref<HTMLElement>();
45
45
  const selectedTab = inject("selectedTab");
46
46
 
47
47
  const computedClasses = computed(() => [
48
- "flex items-center text-left max-w-[136px] h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",
48
+ "flex items-center text-left max-w-[136px] rounded-md h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",
49
49
  mapSizeToClasses[props.size],
50
50
  ]);
51
51
 
package/src/components/FzTabPickerValue.vue CHANGED
@@ -23,8 +23,8 @@ const emit = defineEmits(["click"]);
23
23
 
24
24
  const selectedTab = inject<Ref<string>>("selectedTab");
25
25
  const computedClasses = computed(() => [
26
- "flex items-center text-left max-w-[136px] h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",
27
26
  mapSizeToClasses[props.size],
27
+ "flex items-center text-left max-w-[136px] h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize rounded",
28
28
  selectedTab?.value === props.tab.title
29
29
  ? "!bg-background-alice-blue"
30
30
  : "hover:!bg-background-alice-blue !text-black hover:!text-blue-500",