nuxt-glorious 1.2.2-2 → 1.2.2-4

Sign up to get free protection for your applications and to get access to all the features.
package/dist/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "glorious",
3
3
  "configKey": "glorious",
4
- "version": "1.2.2-2"
4
+ "version": "1.2.2-4"
5
5
  }
@@ -0,0 +1,99 @@
1
+ .glorious-table {
2
+ @apply overflow-x-auto;
3
+ }
4
+ .glorious-table.color-orange > table > thead {
5
+ @apply rounded-t-md overflow-hidden;
6
+ }
7
+ .glorious-table.color-orange > table > thead > tr > th:first-child {
8
+ @apply rounded-r-lg bg-orange-400;
9
+ }
10
+ .glorious-table.color-orange > table > thead > tr > th {
11
+ @apply bg-orange-400;
12
+ }
13
+ .glorious-table.color-orange > table > thead > tr > th:last-child {
14
+ @apply rounded-l-lg bg-orange-400;
15
+ }
16
+ .glorious-table.color-orange > table > tbody > tr:nth-child(even) {
17
+ @apply bg-orange-50;
18
+ }
19
+ .glorious-table.color-orange > table > tbody > tr > td {
20
+ @apply px-4 py-2 text-center;
21
+ }
22
+ .glorious-table.color-blue > table > thead {
23
+ @apply rounded-t-md overflow-hidden;
24
+ }
25
+ .glorious-table.color-blue > table > thead > tr > th:first-child {
26
+ @apply rounded-r-lg bg-blue-400;
27
+ }
28
+ .glorious-table.color-blue > table > thead > tr > th {
29
+ @apply bg-blue-400;
30
+ }
31
+ .glorious-table.color-blue > table > thead > tr > th:last-child {
32
+ @apply rounded-l-lg bg-blue-400;
33
+ }
34
+ .glorious-table.color-blue > table > tbody > tr:nth-child(even) {
35
+ @apply bg-blue-50;
36
+ }
37
+ .glorious-table.color-blue > table > tbody > tr > td {
38
+ @apply px-4 py-2 text-center;
39
+ }
40
+ .glorious-table.color-gray > table > thead {
41
+ @apply rounded-t-md overflow-hidden;
42
+ }
43
+ .glorious-table.color-gray > table > thead > tr > th:first-child {
44
+ @apply rounded-r-lg bg-gray-400;
45
+ }
46
+ .glorious-table.color-gray > table > thead > tr > th {
47
+ @apply bg-gray-400;
48
+ }
49
+ .glorious-table.color-gray > table > thead > tr > th:last-child {
50
+ @apply rounded-l-lg bg-gray-400;
51
+ }
52
+ .glorious-table.color-gray > table > tbody > tr:nth-child(even) {
53
+ @apply bg-gray-50;
54
+ }
55
+ .glorious-table.color-gray > table > tbody > tr > td {
56
+ @apply px-4 py-2 text-center;
57
+ }
58
+ .glorious-table.color-red > table > thead {
59
+ @apply rounded-t-md overflow-hidden;
60
+ }
61
+ .glorious-table.color-red > table > thead > tr > th:first-child {
62
+ @apply rounded-r-lg bg-red-400;
63
+ }
64
+ .glorious-table.color-red > table > thead > tr > th {
65
+ @apply bg-red-400;
66
+ }
67
+ .glorious-table.color-red > table > thead > tr > th:last-child {
68
+ @apply rounded-l-lg bg-red-400;
69
+ }
70
+ .glorious-table.color-red > table > tbody > tr:nth-child(even) {
71
+ @apply bg-red-50;
72
+ }
73
+ .glorious-table.color-red > table > tbody > tr > td {
74
+ @apply px-4 py-2 text-center;
75
+ }
76
+ .glorious-table.color-green > table > thead {
77
+ @apply rounded-t-md overflow-hidden;
78
+ }
79
+ .glorious-table.color-green > table > thead > tr > th:first-child {
80
+ @apply rounded-r-lg bg-green-400;
81
+ }
82
+ .glorious-table.color-green > table > thead > tr > th {
83
+ @apply bg-green-400;
84
+ }
85
+ .glorious-table.color-green > table > thead > tr > th:last-child {
86
+ @apply rounded-l-lg bg-green-400;
87
+ }
88
+ .glorious-table.color-green > table > tbody > tr:nth-child(even) {
89
+ @apply bg-green-50;
90
+ }
91
+ .glorious-table.color-green > table > tbody > tr > td {
92
+ @apply px-4 py-2 text-center;
93
+ }
94
+ .glorious-table > table {
95
+ @apply w-full;
96
+ }
97
+ .glorious-table > table > thead > tr > th {
98
+ @apply px-4 py-2 text-center;
99
+ }
@@ -0,0 +1,150 @@
1
+ <script lang="ts" setup>
2
+ const props = defineProps({
3
+ color: {
4
+ required: false,
5
+ default: "blue",
6
+ type: String as () => "orange" | "blue" | "gray" | "red" | "green",
7
+ },
8
+ header: {
9
+ required: true,
10
+ type: Object,
11
+ },
12
+ body: {
13
+ required: true,
14
+ type: Object,
15
+ },
16
+ });
17
+ </script>
18
+
19
+ <template>
20
+ <div class="glorious-table" :class="[`color-${props.color}`]">
21
+ <table>
22
+ <thead>
23
+ <tr>
24
+ <th v-for="(headItem, index) in props.header" :key="index">
25
+ {{ headItem }}
26
+ </th>
27
+ </tr>
28
+ </thead>
29
+ <tbody>
30
+ <tr v-for="(bodyItem, index) in props.body" :key="index">
31
+ <td
32
+ v-for="(headItem, headKey, headIndex) in props.header"
33
+ :key="headIndex"
34
+ >
35
+ <slot
36
+ v-if="typeof $slots[headKey] !== 'undefined'"
37
+ :name="headKey"
38
+ :item="bodyItem"
39
+ />
40
+ <template v-else>
41
+ {{ bodyItem[headKey] }}
42
+ </template>
43
+ </td>
44
+ </tr>
45
+ </tbody>
46
+ </table>
47
+ </div>
48
+ </template>
49
+
50
+ <style>
51
+ .glorious-table {
52
+ @apply overflow-x-auto;
53
+ }
54
+ .glorious-table.color-orange > table > thead {
55
+ @apply rounded-t-md overflow-hidden;
56
+ }
57
+ .glorious-table.color-orange > table > thead > tr > th:first-child {
58
+ @apply rounded-r-lg bg-orange-400;
59
+ }
60
+ .glorious-table.color-orange > table > thead > tr > th {
61
+ @apply bg-orange-400;
62
+ }
63
+ .glorious-table.color-orange > table > thead > tr > th:last-child {
64
+ @apply rounded-l-lg bg-orange-400;
65
+ }
66
+ .glorious-table.color-orange > table > tbody > tr:nth-child(even) {
67
+ @apply bg-orange-50;
68
+ }
69
+ .glorious-table.color-orange > table > tbody > tr > td {
70
+ @apply px-4 py-2 text-center;
71
+ }
72
+ .glorious-table.color-blue > table > thead {
73
+ @apply rounded-t-md overflow-hidden;
74
+ }
75
+ .glorious-table.color-blue > table > thead > tr > th:first-child {
76
+ @apply rounded-r-lg bg-blue-400;
77
+ }
78
+ .glorious-table.color-blue > table > thead > tr > th {
79
+ @apply bg-blue-400;
80
+ }
81
+ .glorious-table.color-blue > table > thead > tr > th:last-child {
82
+ @apply rounded-l-lg bg-blue-400;
83
+ }
84
+ .glorious-table.color-blue > table > tbody > tr:nth-child(even) {
85
+ @apply bg-blue-50;
86
+ }
87
+ .glorious-table.color-blue > table > tbody > tr > td {
88
+ @apply px-4 py-2 text-center;
89
+ }
90
+ .glorious-table.color-gray > table > thead {
91
+ @apply rounded-t-md overflow-hidden;
92
+ }
93
+ .glorious-table.color-gray > table > thead > tr > th:first-child {
94
+ @apply rounded-r-lg bg-gray-400;
95
+ }
96
+ .glorious-table.color-gray > table > thead > tr > th {
97
+ @apply bg-gray-400;
98
+ }
99
+ .glorious-table.color-gray > table > thead > tr > th:last-child {
100
+ @apply rounded-l-lg bg-gray-400;
101
+ }
102
+ .glorious-table.color-gray > table > tbody > tr:nth-child(even) {
103
+ @apply bg-gray-50;
104
+ }
105
+ .glorious-table.color-gray > table > tbody > tr > td {
106
+ @apply px-4 py-2 text-center;
107
+ }
108
+ .glorious-table.color-red > table > thead {
109
+ @apply rounded-t-md overflow-hidden;
110
+ }
111
+ .glorious-table.color-red > table > thead > tr > th:first-child {
112
+ @apply rounded-r-lg bg-red-400;
113
+ }
114
+ .glorious-table.color-red > table > thead > tr > th {
115
+ @apply bg-red-400;
116
+ }
117
+ .glorious-table.color-red > table > thead > tr > th:last-child {
118
+ @apply rounded-l-lg bg-red-400;
119
+ }
120
+ .glorious-table.color-red > table > tbody > tr:nth-child(even) {
121
+ @apply bg-red-50;
122
+ }
123
+ .glorious-table.color-red > table > tbody > tr > td {
124
+ @apply px-4 py-2 text-center;
125
+ }
126
+ .glorious-table.color-green > table > thead {
127
+ @apply rounded-t-md overflow-hidden;
128
+ }
129
+ .glorious-table.color-green > table > thead > tr > th:first-child {
130
+ @apply rounded-r-lg bg-green-400;
131
+ }
132
+ .glorious-table.color-green > table > thead > tr > th {
133
+ @apply bg-green-400;
134
+ }
135
+ .glorious-table.color-green > table > thead > tr > th:last-child {
136
+ @apply rounded-l-lg bg-green-400;
137
+ }
138
+ .glorious-table.color-green > table > tbody > tr:nth-child(even) {
139
+ @apply bg-green-50;
140
+ }
141
+ .glorious-table.color-green > table > tbody > tr > td {
142
+ @apply px-4 py-2 text-center;
143
+ }
144
+ .glorious-table > table {
145
+ @apply w-full;
146
+ }
147
+ .glorious-table > table > thead > tr > th {
148
+ @apply px-4 py-2 text-center;
149
+ }
150
+ </style>
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.2-2",
2
+ "version": "1.2.2-4",
3
3
  "name": "nuxt-glorious",
4
4
  "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
5
5
  "repository": "sajadhzj/nuxt-glorious",
@@ -1,77 +0,0 @@
1
- .glorious-simple-table {
2
- @apply overflow-x-auto;
3
- }
4
- .glorious-simple-table.color-orange > table {
5
- @apply border border-orange-400;
6
- }
7
- .glorious-simple-table.color-orange > table > thead {
8
- @apply rounded-t-md overflow-hidden;
9
- @apply bg-orange-400;
10
- }
11
- .glorious-simple-table.color-orange > table > tbody > tr:nth-child(even) {
12
- @apply bg-orange-50;
13
- }
14
- .glorious-simple-table.color-orange > table > tbody > tr > td {
15
- @apply px-4 py-1 text-center;
16
- }
17
- .glorious-simple-table.color-blue > table {
18
- @apply border border-blue-400;
19
- }
20
- .glorious-simple-table.color-blue > table > thead {
21
- @apply rounded-t-md overflow-hidden;
22
- @apply bg-blue-400;
23
- }
24
- .glorious-simple-table.color-blue > table > tbody > tr:nth-child(even) {
25
- @apply bg-blue-50;
26
- }
27
- .glorious-simple-table.color-blue > table > tbody > tr > td {
28
- @apply px-4 py-1 text-center;
29
- }
30
- .glorious-simple-table.color-gray > table {
31
- @apply border border-gray-400;
32
- }
33
- .glorious-simple-table.color-gray > table > thead {
34
- @apply rounded-t-md overflow-hidden;
35
- @apply bg-gray-400;
36
- }
37
- .glorious-simple-table.color-gray > table > tbody > tr:nth-child(even) {
38
- @apply bg-gray-50;
39
- }
40
- .glorious-simple-table.color-gray > table > tbody > tr > td {
41
- @apply px-4 py-1 text-center;
42
- }
43
- .glorious-simple-table.color-red > table {
44
- @apply border border-red-400;
45
- }
46
- .glorious-simple-table.color-red > table > thead {
47
- @apply rounded-t-md overflow-hidden;
48
- @apply bg-red-400;
49
- }
50
- .glorious-simple-table.color-red > table > tbody > tr:nth-child(even) {
51
- @apply bg-red-50;
52
- }
53
- .glorious-simple-table.color-red > table > tbody > tr > td {
54
- @apply px-4 py-1 text-center;
55
- }
56
- .glorious-simple-table.color-green > table {
57
- @apply border border-green-400;
58
- }
59
- .glorious-simple-table.color-green > table > thead {
60
- @apply rounded-t-md overflow-hidden;
61
- @apply bg-green-400;
62
- }
63
- .glorious-simple-table.color-green > table > tbody > tr:nth-child(even) {
64
- @apply bg-green-50;
65
- }
66
- .glorious-simple-table.color-green > table > tbody > tr > td {
67
- @apply px-4 py-1 text-center;
68
- }
69
- .glorious-simple-table > table {
70
- @apply w-full;
71
- }
72
- .glorious-simple-table > table > thead > tr > th {
73
- @apply px-4 py-2 text-center;
74
- }
75
- .glorious-simple-table > table > tbody > tr > td {
76
- @apply px-4 py-1 text-center;
77
- }
@@ -1,119 +0,0 @@
1
- <script lang="ts" setup>
2
- type simpleTableInterface = {
3
- head: Array<String>;
4
- body: Array<any>;
5
- };
6
-
7
- const props = defineProps({
8
- color: {
9
- required: false,
10
- default: "blue",
11
- type: String as () => "orange" | "blue" | "gray" | "red" | "green",
12
- },
13
- table: {
14
- required: true,
15
- type: Object as () => simpleTableInterface,
16
- },
17
- });
18
- </script>
19
-
20
- <template>
21
- <div class="glorious-simple-table" :class="[`color-${props.color}`]">
22
- <table>
23
- <thead>
24
- <tr>
25
- <th v-for="(headItem, index) in props.table.head" :key="index">
26
- {{ headItem }}
27
- </th>
28
- </tr>
29
- </thead>
30
- <tbody>
31
- <tr v-for="(bodyItem, index) in props.table.body" :key="index">
32
- <td v-for="(bodyRecord, rIndex) in bodyItem" :key="rIndex">
33
- {{ bodyRecord }}
34
- </td>
35
- </tr>
36
- </tbody>
37
- </table>
38
- </div>
39
- </template>
40
-
41
- <style>
42
- .glorious-simple-table {
43
- @apply overflow-x-auto;
44
- }
45
- .glorious-simple-table.color-orange > table {
46
- @apply border border-orange-400;
47
- }
48
- .glorious-simple-table.color-orange > table > thead {
49
- @apply rounded-t-md overflow-hidden;
50
- @apply bg-orange-400;
51
- }
52
- .glorious-simple-table.color-orange > table > tbody > tr:nth-child(even) {
53
- @apply bg-orange-50;
54
- }
55
- .glorious-simple-table.color-orange > table > tbody > tr > td {
56
- @apply px-4 py-1 text-center;
57
- }
58
- .glorious-simple-table.color-blue > table {
59
- @apply border border-blue-400;
60
- }
61
- .glorious-simple-table.color-blue > table > thead {
62
- @apply rounded-t-md overflow-hidden;
63
- @apply bg-blue-400;
64
- }
65
- .glorious-simple-table.color-blue > table > tbody > tr:nth-child(even) {
66
- @apply bg-blue-50;
67
- }
68
- .glorious-simple-table.color-blue > table > tbody > tr > td {
69
- @apply px-4 py-1 text-center;
70
- }
71
- .glorious-simple-table.color-gray > table {
72
- @apply border border-gray-400;
73
- }
74
- .glorious-simple-table.color-gray > table > thead {
75
- @apply rounded-t-md overflow-hidden;
76
- @apply bg-gray-400;
77
- }
78
- .glorious-simple-table.color-gray > table > tbody > tr:nth-child(even) {
79
- @apply bg-gray-50;
80
- }
81
- .glorious-simple-table.color-gray > table > tbody > tr > td {
82
- @apply px-4 py-1 text-center;
83
- }
84
- .glorious-simple-table.color-red > table {
85
- @apply border border-red-400;
86
- }
87
- .glorious-simple-table.color-red > table > thead {
88
- @apply rounded-t-md overflow-hidden;
89
- @apply bg-red-400;
90
- }
91
- .glorious-simple-table.color-red > table > tbody > tr:nth-child(even) {
92
- @apply bg-red-50;
93
- }
94
- .glorious-simple-table.color-red > table > tbody > tr > td {
95
- @apply px-4 py-1 text-center;
96
- }
97
- .glorious-simple-table.color-green > table {
98
- @apply border border-green-400;
99
- }
100
- .glorious-simple-table.color-green > table > thead {
101
- @apply rounded-t-md overflow-hidden;
102
- @apply bg-green-400;
103
- }
104
- .glorious-simple-table.color-green > table > tbody > tr:nth-child(even) {
105
- @apply bg-green-50;
106
- }
107
- .glorious-simple-table.color-green > table > tbody > tr > td {
108
- @apply px-4 py-1 text-center;
109
- }
110
- .glorious-simple-table > table {
111
- @apply w-full;
112
- }
113
- .glorious-simple-table > table > thead > tr > th {
114
- @apply px-4 py-2 text-center;
115
- }
116
- .glorious-simple-table > table > tbody > tr > td {
117
- @apply px-4 py-1 text-center;
118
- }
119
- </style>