@sikka/hawa 0.0.180 → 0.0.182
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/styles.css +10 -12
- package/es/index.es.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/src/elements/HawaTable.tsx +1 -1
- package/src/layout/HawaAppLayout.tsx +57 -42
- package/src/styles.css +10 -12
package/package.json
CHANGED
|
@@ -32,7 +32,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
|
|
|
32
32
|
return (
|
|
33
33
|
<div className="relative overflow-x-clip rounded">
|
|
34
34
|
<table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
|
|
35
|
-
<thead className=" text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
|
|
35
|
+
<thead className=" bg-gray-100 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
|
|
36
36
|
<tr>
|
|
37
37
|
{props.columns.map((col: any, i: any) => (
|
|
38
38
|
<th key={i} scope="col" className={clsx(sizeStyles[size])}>
|
|
@@ -4,7 +4,7 @@ import useDiscloser from "../hooks/useDiscloser"
|
|
|
4
4
|
import { HawaMenu } from "../elements"
|
|
5
5
|
import { HiMenu } from "react-icons/hi"
|
|
6
6
|
import useBreakpoint from "../hooks/useBreakpoint"
|
|
7
|
-
import { FaChevronRight } from "react-icons/fa"
|
|
7
|
+
import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
|
|
8
8
|
type HawaAppLayoutTypes = {
|
|
9
9
|
drawerItems: {
|
|
10
10
|
label: string
|
|
@@ -196,7 +196,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
|
|
|
196
196
|
>
|
|
197
197
|
<div
|
|
198
198
|
className={clsx(
|
|
199
|
-
"fixed z-50 mb-2 flex h-
|
|
199
|
+
"fixed z-50 mb-2 flex h-14 items-center justify-center bg-layoutPrimary-500 p-2 transition-all",
|
|
200
200
|
openSideMenu ? "w-40" : "w-14"
|
|
201
201
|
)}
|
|
202
202
|
>
|
|
@@ -224,7 +224,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
|
|
|
224
224
|
) : null}
|
|
225
225
|
</div>
|
|
226
226
|
|
|
227
|
-
<div className="mt-
|
|
227
|
+
<div className="mt-14 mb-8">
|
|
228
228
|
{props.drawerItems.map((dSection, j) => (
|
|
229
229
|
<div
|
|
230
230
|
key={j}
|
|
@@ -245,12 +245,11 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
|
|
|
245
245
|
props.currentPage === dItem.slug
|
|
246
246
|
? "bg-buttonPrimary-500 text-white"
|
|
247
247
|
: "hover:bg-layoutPrimary-300",
|
|
248
|
-
|
|
249
|
-
"m-2 flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2 pl-3 transition-all ",
|
|
248
|
+
"m-2 my-1 flex cursor-pointer flex-row items-center justify-between overflow-x-clip rounded p-2 pl-3 transition-all ",
|
|
250
249
|
direction === "rtl" ? "flex-row-reverse pr-3" : ""
|
|
251
250
|
)}
|
|
252
251
|
>
|
|
253
|
-
<div className="flex flex-row">
|
|
252
|
+
<div className="flex flex-row" dir={direction}>
|
|
254
253
|
<div className="flex items-center justify-center">
|
|
255
254
|
{dItem.icon}
|
|
256
255
|
</div>
|
|
@@ -280,26 +279,35 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
|
|
|
280
279
|
<div
|
|
281
280
|
className={clsx(
|
|
282
281
|
"flex flex-col gap-0 whitespace-nowrap bg-layoutPrimary-300",
|
|
283
|
-
"cursor-pointer p-
|
|
282
|
+
"m-1 cursor-pointer rounded p-1",
|
|
284
283
|
"overflow-clip transition-all",
|
|
285
284
|
openSubItem == dItem.slug && openSideMenu
|
|
286
285
|
? ""
|
|
287
|
-
: "py-0",
|
|
286
|
+
: "my-0 py-0",
|
|
288
287
|
direction === "rtl" ? "text-right" : "text-left"
|
|
289
288
|
)}
|
|
290
289
|
style={{
|
|
291
290
|
height:
|
|
292
291
|
openSubItem == dItem.slug && openSideMenu
|
|
293
|
-
?
|
|
292
|
+
? 6 + 33 * dItem.subItems?.length
|
|
294
293
|
: 0,
|
|
295
294
|
}}
|
|
296
295
|
>
|
|
297
296
|
{dItem.subItems?.map((subIt) => (
|
|
298
297
|
<div
|
|
299
|
-
className=
|
|
298
|
+
className={clsx(
|
|
299
|
+
"flex flex-row gap-2 overflow-x-clip rounded p-2 px-4 text-xs hover:bg-layoutPrimary-500",
|
|
300
|
+
direction === "rtl" ? "text-right" : "text-left"
|
|
301
|
+
)}
|
|
302
|
+
dir={direction}
|
|
300
303
|
onClick={() => subIt.action()}
|
|
301
304
|
>
|
|
302
|
-
|
|
305
|
+
<div className="flex items-center justify-center">
|
|
306
|
+
{subIt.icon}
|
|
307
|
+
</div>
|
|
308
|
+
<div className="flex flex-row justify-between">
|
|
309
|
+
{subIt.label}
|
|
310
|
+
</div>
|
|
303
311
|
</div>
|
|
304
312
|
))}
|
|
305
313
|
</div>
|
|
@@ -314,42 +322,49 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
|
|
|
314
322
|
))}
|
|
315
323
|
</div>
|
|
316
324
|
</div>
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
325
|
+
{openSideMenu && size > 600 ? (
|
|
326
|
+
<div
|
|
327
|
+
dir={direction}
|
|
328
|
+
className={clsx(
|
|
329
|
+
"fixed top-4 z-50 flex w-fit items-center",
|
|
330
|
+
direction === "rtl"
|
|
331
|
+
? "right-32 justify-start"
|
|
332
|
+
: "left-32 justify-start",
|
|
333
|
+
"transition-all duration-700",
|
|
334
|
+
openSideMenu && size > 600 ? " opacity-100" : " opacity-0"
|
|
335
|
+
)}
|
|
336
|
+
>
|
|
329
337
|
<div
|
|
330
338
|
onClick={() => setKeepOpen(!keepOpen)}
|
|
331
|
-
className={
|
|
332
|
-
keepOpen ? "rotate-180" : "",
|
|
333
|
-
direction === "rtl" ? "rotate-180" : "",
|
|
334
|
-
"w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all"
|
|
335
|
-
)}
|
|
336
|
-
>
|
|
337
|
-
<FaChevronRight />
|
|
338
|
-
</div>
|
|
339
|
-
) : null}
|
|
340
|
-
{/* {keepOpen && (
|
|
341
|
-
<div
|
|
342
|
-
onClick={() => setKeepOpen(false)}
|
|
343
|
-
className={clsx(
|
|
344
|
-
openSideMenu ? "visible" : "invisible",
|
|
345
|
-
direction === "rtl" ? "rotate-180" : "",
|
|
339
|
+
className={
|
|
346
340
|
"w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all"
|
|
347
|
-
|
|
341
|
+
}
|
|
348
342
|
>
|
|
349
|
-
|
|
343
|
+
{/* {keepOpen ? ( */}
|
|
344
|
+
<FaChevronRight
|
|
345
|
+
fontSize={11}
|
|
346
|
+
className={clsx(
|
|
347
|
+
direction === "rtl"
|
|
348
|
+
? keepOpen
|
|
349
|
+
? "rotate-0"
|
|
350
|
+
: "rotate-180"
|
|
351
|
+
: keepOpen
|
|
352
|
+
? "rotate-180"
|
|
353
|
+
: "rotate-0"
|
|
354
|
+
// keepOpen ? "rotate-180" : ""
|
|
355
|
+
)}
|
|
356
|
+
/>
|
|
357
|
+
{/* // ) : (
|
|
358
|
+
// <FaChevronLeft
|
|
359
|
+
// fontSize={11}
|
|
360
|
+
// className={clsx(
|
|
361
|
+
// direction === "rtl" ? "rotate-0" : "rotate-180"
|
|
362
|
+
// )}
|
|
363
|
+
// />
|
|
364
|
+
// )} */}
|
|
350
365
|
</div>
|
|
351
|
-
|
|
352
|
-
|
|
366
|
+
</div>
|
|
367
|
+
) : null}
|
|
353
368
|
</div>
|
|
354
369
|
|
|
355
370
|
<div
|
package/src/styles.css
CHANGED
|
@@ -653,9 +653,6 @@ video {
|
|
|
653
653
|
.left-2 {
|
|
654
654
|
left: 0.5rem;
|
|
655
655
|
}
|
|
656
|
-
.bottom-2 {
|
|
657
|
-
bottom: 0.5rem;
|
|
658
|
-
}
|
|
659
656
|
.right-32 {
|
|
660
657
|
right: 8rem;
|
|
661
658
|
}
|
|
@@ -720,6 +717,10 @@ video {
|
|
|
720
717
|
margin-top: 1rem;
|
|
721
718
|
margin-bottom: 1rem;
|
|
722
719
|
}
|
|
720
|
+
.my-1 {
|
|
721
|
+
margin-top: 0.25rem;
|
|
722
|
+
margin-bottom: 0.25rem;
|
|
723
|
+
}
|
|
723
724
|
.ml-auto {
|
|
724
725
|
margin-left: auto;
|
|
725
726
|
}
|
|
@@ -783,8 +784,8 @@ video {
|
|
|
783
784
|
.ml-40 {
|
|
784
785
|
margin-left: 10rem;
|
|
785
786
|
}
|
|
786
|
-
.mt-
|
|
787
|
-
margin-top:
|
|
787
|
+
.mt-14 {
|
|
788
|
+
margin-top: 3.5rem;
|
|
788
789
|
}
|
|
789
790
|
.mb-8 {
|
|
790
791
|
margin-bottom: 2rem;
|
|
@@ -892,9 +893,6 @@ video {
|
|
|
892
893
|
.h-\[calc\(100\%-3\.5rem\)\] {
|
|
893
894
|
height: calc(100% - 3.5rem);
|
|
894
895
|
}
|
|
895
|
-
.h-12 {
|
|
896
|
-
height: 3rem;
|
|
897
|
-
}
|
|
898
896
|
.h-9 {
|
|
899
897
|
height: 2.25rem;
|
|
900
898
|
}
|
|
@@ -1067,6 +1065,10 @@ video {
|
|
|
1067
1065
|
--tw-rotate: 90deg;
|
|
1068
1066
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1069
1067
|
}
|
|
1068
|
+
.rotate-0 {
|
|
1069
|
+
--tw-rotate: 0deg;
|
|
1070
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1071
|
+
}
|
|
1070
1072
|
.transform {
|
|
1071
1073
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1072
1074
|
}
|
|
@@ -1506,10 +1508,6 @@ video {
|
|
|
1506
1508
|
--tw-bg-opacity: 1;
|
|
1507
1509
|
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
|
1508
1510
|
}
|
|
1509
|
-
.bg-blue-300 {
|
|
1510
|
-
--tw-bg-opacity: 1;
|
|
1511
|
-
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
|
|
1512
|
-
}
|
|
1513
1511
|
.bg-layoutPrimary-300 {
|
|
1514
1512
|
background-color: var(--layout-primary-300);
|
|
1515
1513
|
}
|