@pnkx-lib/ui 1.9.231 → 1.9.234
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/style.css +1 -1
- package/es/index.js +1 -1
- package/es/ui/Modal.js +1 -1
- package/es/ui/Sidebar.js +18 -11
- package/es/ui/UploadComponent.js +128 -0
- package/es/ui/UploadImage.js +24 -118
- package/es/ui/index.js +1 -1
- package/package.json +1 -1
- package/types/components/ui/UploadComponent.d.ts +11 -0
- package/types/components/ui/UploadImage.d.ts +7 -5
- package/types/ui/UploadComponent.d.ts +2 -0
package/dist/style.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-sm:40rem;--breakpoint-md:48rem;--breakpoint-lg:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:96rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-3xl:1.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\!collapse{visibility:collapse!important}.\!visible{visibility:visible!important}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-1{top:calc(var(--spacing)*1)}.right-1{right:calc(var(--spacing)*1)}.bottom-1\/100{bottom:1%}.left-1\/2{left:50%}.z-10{z-index:10}.z-50{z-index:50}.col-span-1{grid-column:span 1/span 1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.-mx-2{margin-inline:calc(var(--spacing)*-2)}.mx-1{margin-inline:calc(var(--spacing)*1)}.mx-auto{margin-inline:auto}.\!my-5{margin-block:calc(var(--spacing)*5)!important}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-20{margin-top:calc(var(--spacing)*20)}.mt-\[15px\]{margin-top:15px}.mr-3{margin-right:calc(var(--spacing)*3)}.\!mb-4{margin-bottom:calc(var(--spacing)*4)!important}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.\!ml-2{margin-left:calc(var(--spacing)*2)!important}.ml-0{margin-left:calc(var(--spacing)*0)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-10{margin-left:calc(var(--spacing)*10)}.ml-\[-2rem\]{margin-left:-2rem}.ml-\[7\%\]{margin-left:7%}.ml-\[10px\]{margin-left:10px}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-0{height:calc(var(--spacing)*0)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-20{height:calc(var(--spacing)*20)}.h-\[200px\]{height:200px}.h-\[300px\]{height:300px}.h-\[calc\(100vh-56px\)\]{height:calc(100vh - 56px)}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-17{width:calc(var(--spacing)*17)}.w-20{width:calc(var(--spacing)*20)}.w-100{width:calc(var(--spacing)*100)}.w-\[20\%\]{width:20%}.w-\[54px\]{width:54px}.w-\[60px\]{width:60px}.w-\[80\%\]{width:80%}.w-\[250px\]{width:250px}.w-\[255px\]{width:255px}.w-\[6000px\]{width:6000px}.w-fit{width:fit-content}.w-full{width:100%}.w-lg{width:var(--container-lg)}.w-xl{width:var(--container-xl)}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-fit{max-width:fit-content}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-screen-2xl{max-width:var(--breakpoint-2xl)}.max-w-screen-lg{max-width:var(--breakpoint-lg)}.max-w-screen-md{max-width:var(--breakpoint-md)}.max-w-screen-sm{max-width:var(--breakpoint-sm)}.max-w-screen-xl{max-width:var(--breakpoint-xl)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-fit{min-width:fit-content}.flex-1{flex:1}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[110\%\]{--tw-translate-y:110%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-grab{cursor:grab}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-end-safe{align-items:safe flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-3{column-gap:calc(var(--spacing)*3)}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}.gap-y-5{row-gap:calc(var(--spacing)*5)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.\!rounded-3xl{border-radius:var(--radius-3xl)!important}.\!rounded-\[8px\]{border-radius:8px!important}.\!rounded-full{border-radius:3.40282e38px!important}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-tl-lg{border-top-left-radius:var(--radius-lg)}.rounded-tr-lg{border-top-right-radius:var(--radius-lg)}.rounded-br-lg{border-bottom-right-radius:var(--radius-lg)}.rounded-bl-lg{border-bottom-left-radius:var(--radius-lg)}.\!border{border-style:var(--tw-border-style)!important;border-width:1px!important}.border{border-style:var(--tw-border-style);border-width:1px}.border-t-1{border-top-style:var(--tw-border-style);border-top-width:1px}.\!border-b-1{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:1px!important}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.\!border-none{--tw-border-style:none!important;border-style:none!important}.\!border-\[\#007BE5\]{border-color:#007be5!important}.\!border-\[\#BDE3FF\]{border-color:#bde3ff!important}.\!border-\[\#FFCDC9\]{border-color:#ffcdc9!important}.\!border-\[white\]{border-color:#fff!important}.border-\[\#BDE3FF\]{border-color:#bde3ff}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-white{border-color:var(--color-white)}.\!border-t-\[\#F0F0F0\]{border-top-color:#f0f0f0!important}.\!border-b-\[\#F0F0F0\]{border-bottom-color:#f0f0f0!important}.\!bg-\[\#007BE5\]{background-color:#007be5!important}.\!bg-\[\#E5F4FF\]{background-color:#e5f4ff!important}.\!bg-\[\#E7F0FF\]{background-color:#e7f0ff!important}.bg-\[\#007BE5\]{background-color:#007be5}.bg-\[\#27CD7F\]{background-color:#27cd7f}.bg-\[\#722ED1\]{background-color:#722ed1}.bg-\[\#001523\]{background-color:#001523}.bg-\[\#2561ED\]{background-color:#2561ed}.bg-\[\#B2B7C2\]{background-color:#b2b7c2}.bg-\[\#DA9438\]{background-color:#da9438}.bg-\[\#DD4338\]{background-color:#dd4338}.bg-\[\#E7F0FF\]{background-color:#e7f0ff}.bg-\[\#ECEFF3\]{background-color:#eceff3}.bg-\[\#FFFFFF\]{background-color:#fff}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-white{background-color:var(--color-white)}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-\[24px\]{padding:24px}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-\[10px\]{padding-inline:10px}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-2\.5{padding-right:calc(var(--spacing)*2.5)}.pr-3\.5{padding-right:calc(var(--spacing)*3.5)}.pr-6{padding-right:calc(var(--spacing)*6)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-15{padding-bottom:calc(var(--spacing)*15)}.pb-\[15px\]{padding-bottom:15px}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-2\.5{padding-left:calc(var(--spacing)*2.5)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\!text-\[12px\]{font-size:12px!important}.text-\[12px\]{font-size:12px}.text-\[14px\]{font-size:14px}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.\!font-light{--tw-font-weight:var(--font-weight-light)!important;font-weight:var(--font-weight-light)!important}.\!font-medium{--tw-font-weight:var(--font-weight-medium)!important;font-weight:var(--font-weight-medium)!important}.font-\[400\]{--tw-font-weight:400;font-weight:400}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.\!text-\[\#0f1d40\]{color:#0f1d40!important}.\!text-\[\#4D4D57\]{color:#4d4d57!important}.\!text-\[\#5C657D\]{color:#5c657d!important}.\!text-\[\#007BE5\]{color:#007be5!important}.\!text-\[\#DD4338\]{color:#dd4338!important}.\!text-\[\#E0E0E0\]{color:#e0e0e0!important}.\!text-\[white\]{color:#fff!important}.text-\[\#5C657D\]{color:#5c657d}.text-\[\#007BE5\]{color:#007be5}.text-\[\#116DFF\]{color:#116dff}.text-\[\#B2B7C2\]{color:#b2b7c2}.text-\[\#FFFFFF\]{color:#fff}.text-black{color:var(--color-black)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.\!shadow-none{--tw-shadow:0 0 #0000!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:rounded-sm:hover{border-radius:var(--radius-sm)}.hover\:bg-\[\#1B4ACB\]:hover{background-color:#1b4acb}.hover\:bg-\[\#E7F0FF\]:hover{background-color:#e7f0ff}.hover\:bg-\[\#F5F6F7\]:hover{background-color:#f5f6f7}.hover\:bg-\[\#FFFFFF\]:hover{background-color:#fff}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:text-\[\#007BE5\]:hover{color:#007be5}.hover\:text-black:hover{color:var(--color-black)}}.focus\:border-blue-500:focus{border-color:var(--color-blue-500)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:px-6{padding-inline:calc(var(--spacing)*6)}}@media (min-width:48rem){.md\:mt-0{margin-top:calc(var(--spacing)*0)}.md\:flex-row{flex-direction:row}:where(.md\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}:where(.md\:space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.md\:text-left{text-align:left}}@media (min-width:64rem){.lg\:px-8{padding-inline:calc(var(--spacing)*8)}}}.scrollbar-hidden::-webkit-scrollbar{display:none}.scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none}.setting-table-modal div .ant-modal-header,.setting-table-modal div .ant-modal-footer{padding:0 24px!important}.containerSearchSelect :global(.ant-select-selector){border-radius:100px;border-color:#bde3ff!important}.inputSearchKey :global(.ant-input-clear-icon){color:#e7f0ff}.customBadge :global(.ant-badge-count){color:#4d4d57!important;box-shadow:none!important;background:0 0!important}.customBadge{background-color:#eeeef0!important}.customBadge .ant-badge-count{color:#4d4d57!important;box-shadow:none!important;background:0 0!important}.customBadgeActive{background-color:#bde3ff!important}.customBadgeActive .ant-badge-count{font-weight:500;color:#0f1d40!important;box-shadow:none!important;background:0 0!important}.customContainButtonIcon .ant-btn-icon{height:18px}.ant-table-cell:before{display:none!important}.ant-table-thead .ant-table-cell{font-weight:500;background-color:#d6e6fe!important;border-start-start-radius:0!important;border-start-end-radius:0!important}.ant-table-thead th.ant-table-column-has-sorters:hover{background-color:#d6e6fe}.ant-table-row.table-row-even{background-color:#f7f7f8}.ant-table-row.table-row-odd{background-color:#fff}.ant-table-cell-row-hover{cursor:pointer;background-color:#e7f0ff!important}.ant-table-body{scrollbar-width:auto;scrollbar-color:auto}.ant-table-body::-webkit-scrollbar{width:8px}.ant-table-body::-webkit-scrollbar-track{background-color:#e1e6e6}.ant-table-body::-webkit-scrollbar-thumb{background-color:#a8caff;border-radius:6px}.ant-table-body::-webkit-scrollbar-thumb:hover{background-color:#598cf4;border-radius:6px}.ant-select-outlined.ant-select-multiple .ant-select-selection-item{gap:4px;display:flex;background-color:#bde3ff!important;padding:1px 8px!important}.pnkx-default-input :global(.ant-input-clear-icon){color:#e7f0ff}.pnkx-default-input{width:100%;border-color:#bde3ff!important;border-radius:6px!important}.pnkx-default-select-container{width:100%;height:100%}.pnkx-default-select-container .ant-select-selector{border-color:#bde3ff!important;border-radius:6px!important}.pnkx-default-field-container{width:100%;border-color:#bde3ff!important;border-radius:6px!important}.pnkx-default-border-cascader .ant-select-selector,.pnkx-default-border-checkbox .ant-checkbox-inner{border-color:#bde3ff!important}.pnkx-default-border-date-picker,.pnkx-default-border-time-picker{border-color:#bde3ff!important;border-radius:6px!important}.pnkx-default-border-default-button{color:#007be5!important;border-color:#bde3ff!important}.ant-checkbox-inner{border-color:#007be5!important}.ant-checkbox-checked .ant-checkbox-inner:after{border-color:#fff}.ant-checkbox-checked .ant-checkbox-inner{background-color:#007be5!important;border-color:#007be5!important}.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-checked):not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-inner,.ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-disabled):hover .ant-checkbox-inner{background-color:#e5f4ff!important;border-color:#007be5!important}.ant-checkbox-wrapper-checked:not(.ant-checkbox-wrapper-checked):hover .ant-checkbox-inner,.ant-checkbox-checked:hover .ant-checkbox-inner{background-color:#007be5!important;border-color:#007be5!important}.ant-checkbox-disabled .ant-checkbox-inner,.ant-checkbox-wrapper-disabled .ant-checkbox-inner{cursor:not-allowed!important;background-color:#f5f5f5!important;border-color:#d9d9d9!important}.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner{background-color:#8b8787!important;border-color:#d9d9d9!important}.pnkx-default-modal .ant-modal-close-x{color:#000624}.ant-modal-body{padding:0!important}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background-color:#e1e6e6}::-webkit-scrollbar-thumb{background-color:#a8caff;border-radius:6px}::-webkit-scrollbar-thumb:hover{background-color:#598cf4;border-radius:6px}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-sm:40rem;--breakpoint-md:48rem;--breakpoint-lg:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:96rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-3xl:1.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\!collapse{visibility:collapse!important}.\!visible{visibility:visible!important}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-1{top:calc(var(--spacing)*1)}.right-1{right:calc(var(--spacing)*1)}.bottom-1\/100{bottom:1%}.left-1\/2{left:50%}.z-10{z-index:10}.z-50{z-index:50}.col-span-1{grid-column:span 1/span 1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.-mx-2{margin-inline:calc(var(--spacing)*-2)}.mx-1{margin-inline:calc(var(--spacing)*1)}.mx-auto{margin-inline:auto}.\!my-5{margin-block:calc(var(--spacing)*5)!important}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-20{margin-top:calc(var(--spacing)*20)}.mt-\[15px\]{margin-top:15px}.mr-3{margin-right:calc(var(--spacing)*3)}.\!mb-4{margin-bottom:calc(var(--spacing)*4)!important}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.\!ml-2{margin-left:calc(var(--spacing)*2)!important}.ml-0{margin-left:calc(var(--spacing)*0)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-8{margin-left:calc(var(--spacing)*8)}.ml-10{margin-left:calc(var(--spacing)*10)}.ml-\[-2rem\]{margin-left:-2rem}.ml-\[7\%\]{margin-left:7%}.ml-\[10px\]{margin-left:10px}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-0{height:calc(var(--spacing)*0)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-20{height:calc(var(--spacing)*20)}.h-\[200px\]{height:200px}.h-\[300px\]{height:300px}.h-\[calc\(100vh-56px\)\]{height:calc(100vh - 56px)}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-17{width:calc(var(--spacing)*17)}.w-20{width:calc(var(--spacing)*20)}.w-100{width:calc(var(--spacing)*100)}.w-\[54px\]{width:54px}.w-\[60px\]{width:60px}.w-\[250px\]{width:250px}.w-\[255px\]{width:255px}.w-\[6000px\]{width:6000px}.w-fit{width:fit-content}.w-full{width:100%}.w-lg{width:var(--container-lg)}.w-xl{width:var(--container-xl)}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-fit{max-width:fit-content}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-screen-2xl{max-width:var(--breakpoint-2xl)}.max-w-screen-lg{max-width:var(--breakpoint-lg)}.max-w-screen-md{max-width:var(--breakpoint-md)}.max-w-screen-sm{max-width:var(--breakpoint-sm)}.max-w-screen-xl{max-width:var(--breakpoint-xl)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-fit{min-width:fit-content}.flex-1{flex:1}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[110\%\]{--tw-translate-y:110%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-grab{cursor:grab}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-end-safe{align-items:safe flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-3{column-gap:calc(var(--spacing)*3)}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}.gap-y-5{row-gap:calc(var(--spacing)*5)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.\!rounded-3xl{border-radius:var(--radius-3xl)!important}.\!rounded-\[8px\]{border-radius:8px!important}.\!rounded-full{border-radius:3.40282e38px!important}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-tl-lg{border-top-left-radius:var(--radius-lg)}.rounded-tr-lg{border-top-right-radius:var(--radius-lg)}.rounded-br-lg{border-bottom-right-radius:var(--radius-lg)}.rounded-bl-lg{border-bottom-left-radius:var(--radius-lg)}.\!border{border-style:var(--tw-border-style)!important;border-width:1px!important}.border{border-style:var(--tw-border-style);border-width:1px}.border-t-1{border-top-style:var(--tw-border-style);border-top-width:1px}.\!border-b-1{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:1px!important}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.\!border-none{--tw-border-style:none!important;border-style:none!important}.\!border-\[\#007BE5\]{border-color:#007be5!important}.\!border-\[\#BDE3FF\]{border-color:#bde3ff!important}.\!border-\[\#FFCDC9\]{border-color:#ffcdc9!important}.\!border-\[white\]{border-color:#fff!important}.border-\[\#BDE3FF\]{border-color:#bde3ff}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-white{border-color:var(--color-white)}.\!border-t-\[\#F0F0F0\]{border-top-color:#f0f0f0!important}.\!border-b-\[\#F0F0F0\]{border-bottom-color:#f0f0f0!important}.\!bg-\[\#007BE5\]{background-color:#007be5!important}.\!bg-\[\#E5F4FF\]{background-color:#e5f4ff!important}.\!bg-\[\#E7F0FF\]{background-color:#e7f0ff!important}.bg-\[\#007BE5\]{background-color:#007be5}.bg-\[\#27CD7F\]{background-color:#27cd7f}.bg-\[\#722ED1\]{background-color:#722ed1}.bg-\[\#001523\]{background-color:#001523}.bg-\[\#2561ED\]{background-color:#2561ed}.bg-\[\#B2B7C2\]{background-color:#b2b7c2}.bg-\[\#DA9438\]{background-color:#da9438}.bg-\[\#DD4338\]{background-color:#dd4338}.bg-\[\#E7F0FF\]{background-color:#e7f0ff}.bg-\[\#ECEFF3\]{background-color:#eceff3}.bg-\[\#FFFFFF\]{background-color:#fff}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-white{background-color:var(--color-white)}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-\[24px\]{padding:24px}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-\[10px\]{padding-inline:10px}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-2\.5{padding-right:calc(var(--spacing)*2.5)}.pr-3\.5{padding-right:calc(var(--spacing)*3.5)}.pr-6{padding-right:calc(var(--spacing)*6)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-15{padding-bottom:calc(var(--spacing)*15)}.pb-\[15px\]{padding-bottom:15px}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-2\.5{padding-left:calc(var(--spacing)*2.5)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\!text-\[12px\]{font-size:12px!important}.text-\[12px\]{font-size:12px}.text-\[14px\]{font-size:14px}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.\!font-light{--tw-font-weight:var(--font-weight-light)!important;font-weight:var(--font-weight-light)!important}.\!font-medium{--tw-font-weight:var(--font-weight-medium)!important;font-weight:var(--font-weight-medium)!important}.font-\[400\]{--tw-font-weight:400;font-weight:400}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.\!text-\[\#0f1d40\]{color:#0f1d40!important}.\!text-\[\#4D4D57\]{color:#4d4d57!important}.\!text-\[\#5C657D\]{color:#5c657d!important}.\!text-\[\#007BE5\]{color:#007be5!important}.\!text-\[\#DD4338\]{color:#dd4338!important}.\!text-\[\#E0E0E0\]{color:#e0e0e0!important}.\!text-\[white\]{color:#fff!important}.text-\[\#5C657D\]{color:#5c657d}.text-\[\#116DFF\]{color:#116dff}.text-\[\#B2B7C2\]{color:#b2b7c2}.text-black{color:var(--color-black)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.\!shadow-none{--tw-shadow:0 0 #0000!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:rounded-sm:hover{border-radius:var(--radius-sm)}.hover\:bg-\[\#1B4ACB\]:hover{background-color:#1b4acb}.hover\:bg-\[\#E7F0FF\]:hover{background-color:#e7f0ff}.hover\:bg-\[\#F5F6F7\]:hover{background-color:#f5f6f7}.hover\:bg-\[\#FFFFFF\]:hover{background-color:#fff}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:text-\[\#007BE5\]:hover{color:#007be5}.hover\:text-black:hover{color:var(--color-black)}}.focus\:border-blue-500:focus{border-color:var(--color-blue-500)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:px-6{padding-inline:calc(var(--spacing)*6)}}@media (min-width:48rem){.md\:mt-0{margin-top:calc(var(--spacing)*0)}.md\:flex-row{flex-direction:row}:where(.md\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}:where(.md\:space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.md\:text-left{text-align:left}}@media (min-width:64rem){.lg\:px-8{padding-inline:calc(var(--spacing)*8)}}}.scrollbar-hidden::-webkit-scrollbar{display:none}.scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none}.setting-table-modal div .ant-modal-header,.setting-table-modal div .ant-modal-footer{padding:0 24px!important}.containerSearchSelect :global(.ant-select-selector){border-radius:100px;border-color:#bde3ff!important}.inputSearchKey :global(.ant-input-clear-icon){color:#e7f0ff}.customBadge :global(.ant-badge-count){color:#4d4d57!important;box-shadow:none!important;background:0 0!important}.customBadge{background-color:#eeeef0!important}.customBadge .ant-badge-count{color:#4d4d57!important;box-shadow:none!important;background:0 0!important}.customBadgeActive{background-color:#bde3ff!important}.customBadgeActive .ant-badge-count{font-weight:500;color:#0f1d40!important;box-shadow:none!important;background:0 0!important}.customContainButtonIcon .ant-btn-icon{height:18px}.ant-table-cell:before{display:none!important}.ant-table-thead .ant-table-cell{font-weight:500;background-color:#d6e6fe!important;border-start-start-radius:0!important;border-start-end-radius:0!important}.ant-table-thead th.ant-table-column-has-sorters:hover{background-color:#d6e6fe}.ant-table-row.table-row-even{background-color:#f7f7f8}.ant-table-row.table-row-odd{background-color:#fff}.ant-table-cell-row-hover{cursor:pointer;background-color:#e7f0ff!important}.ant-table-body{scrollbar-width:auto;scrollbar-color:auto}.ant-table-body::-webkit-scrollbar{width:8px}.ant-table-body::-webkit-scrollbar-track{background-color:#e1e6e6}.ant-table-body::-webkit-scrollbar-thumb{background-color:#a8caff;border-radius:6px}.ant-table-body::-webkit-scrollbar-thumb:hover{background-color:#598cf4;border-radius:6px}.ant-select-outlined.ant-select-multiple .ant-select-selection-item{gap:4px;display:flex;background-color:#bde3ff!important;padding:1px 8px!important}.pnkx-default-input :global(.ant-input-clear-icon){color:#e7f0ff}.pnkx-default-input{width:100%;border-color:#bde3ff!important;border-radius:6px!important}.pnkx-default-select-container{width:100%;height:100%}.pnkx-default-select-container .ant-select-selector{border-color:#bde3ff!important;border-radius:6px!important}.pnkx-default-field-container{width:100%;border-color:#bde3ff!important;border-radius:6px!important}.pnkx-default-border-cascader .ant-select-selector,.pnkx-default-border-checkbox .ant-checkbox-inner{border-color:#bde3ff!important}.pnkx-default-border-date-picker,.pnkx-default-border-time-picker{border-color:#bde3ff!important;border-radius:6px!important}.pnkx-default-border-default-button{color:#007be5!important;border-color:#bde3ff!important}.ant-checkbox-inner{border-color:#007be5!important}.ant-checkbox-checked .ant-checkbox-inner:after{border-color:#fff}.ant-checkbox-checked .ant-checkbox-inner{background-color:#007be5!important;border-color:#007be5!important}.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-checked):not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-inner,.ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-disabled):hover .ant-checkbox-inner{background-color:#e5f4ff!important;border-color:#007be5!important}.ant-checkbox-wrapper-checked:not(.ant-checkbox-wrapper-checked):hover .ant-checkbox-inner,.ant-checkbox-checked:hover .ant-checkbox-inner{background-color:#007be5!important;border-color:#007be5!important}.ant-checkbox-disabled .ant-checkbox-inner,.ant-checkbox-wrapper-disabled .ant-checkbox-inner{cursor:not-allowed!important;background-color:#f5f5f5!important;border-color:#d9d9d9!important}.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner{background-color:#8b8787!important;border-color:#d9d9d9!important}.pnkx-default-modal .ant-modal-close-x{color:#000624}.ant-modal-body{padding:0!important}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background-color:#e1e6e6}::-webkit-scrollbar-thumb{background-color:#a8caff;border-radius:6px}::-webkit-scrollbar-thumb:hover{background-color:#598cf4;border-radius:6px}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
|
package/es/index.js
CHANGED
|
@@ -56,7 +56,7 @@ export { BreadcrumbHeading } from './ui/BreadcrumbHeading.js';
|
|
|
56
56
|
export { Card } from './ui/Card.js';
|
|
57
57
|
export { ConfigProvider } from './ui/ConfigProvider.js';
|
|
58
58
|
export { PageNotFound } from './ui/PageNotFound.js';
|
|
59
|
-
export {
|
|
59
|
+
export { UploadImageController } from './ui/UploadImage.js';
|
|
60
60
|
export { Input } from './fields/Input.js';
|
|
61
61
|
export { PnkxField } from './fields/PnkxField.js';
|
|
62
62
|
export { Select } from './fields/Select.js';
|
package/es/ui/Modal.js
CHANGED
package/es/ui/Sidebar.js
CHANGED
|
@@ -196,7 +196,7 @@ const Sidebar = ({ children, menu, userInfo }) => {
|
|
|
196
196
|
Input,
|
|
197
197
|
{
|
|
198
198
|
className: "!placeholder:bg-[#E7F0FF] !bg-[#E7F0FF] !border !border-[#BDE3FF]",
|
|
199
|
-
placeholder: "Tìm kiếm
|
|
199
|
+
placeholder: "Tìm kiếm theo chức năng,module của hệ thống",
|
|
200
200
|
iconStartInput: /* @__PURE__ */ jsx("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx(distExports.SearchIcon, { className: "w-5 text-[#116DFF]" }) })
|
|
201
201
|
}
|
|
202
202
|
)
|
|
@@ -266,10 +266,10 @@ const Sidebar = ({ children, menu, userInfo }) => {
|
|
|
266
266
|
setOpenSubCollapse(true);
|
|
267
267
|
},
|
|
268
268
|
className: twMerge(
|
|
269
|
-
isActive ? "bg-[#FFFFFF] text-black" : "text-[#FFFFFF] hover:bg-[#FFFFFF] hover:text-black",
|
|
270
269
|
"rounded-lg py-2 m-auto text-sm whitespace-nowrap max-w-2xl leading-6 font-semibold relative z-10",
|
|
271
270
|
collapse ? "pl-4" : "justify-center",
|
|
272
|
-
"flex items-center gap-2
|
|
271
|
+
"flex items-center gap-2 transition-all duration-150 ease-in-out",
|
|
272
|
+
isActive ? "bg-[#007BE5] text-white" : "text-white hover:bg-[#FFFFFF] hover:text-black"
|
|
273
273
|
),
|
|
274
274
|
children: [
|
|
275
275
|
item.icon,
|
|
@@ -303,25 +303,32 @@ const Sidebar = ({ children, menu, userInfo }) => {
|
|
|
303
303
|
const isActiveMainMenu = activeMainMenu === sub.path;
|
|
304
304
|
if (!isActiveMainMenu) return;
|
|
305
305
|
return sub?.children?.map((itemSubMenu) => {
|
|
306
|
-
|
|
306
|
+
const shouldShowToggleIcon = itemSubMenu?.isShow && Array.isArray(itemSubMenu.children) && itemSubMenu.children.length > 0;
|
|
307
|
+
const isActiveSubMenu = pathUrl.startsWith(
|
|
308
|
+
`/${itemSubMenu.path.replace(/^\/+/, "")}`
|
|
309
|
+
);
|
|
310
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { children: [
|
|
307
311
|
/* @__PURE__ */ jsxs(
|
|
308
312
|
"a",
|
|
309
313
|
{
|
|
310
314
|
onClick: () => {
|
|
311
|
-
handleClickSubmenu(
|
|
315
|
+
handleClickSubmenu(
|
|
316
|
+
itemSubMenu,
|
|
317
|
+
itemSubMenu.isShow
|
|
318
|
+
);
|
|
312
319
|
},
|
|
313
320
|
className: twMerge(
|
|
314
|
-
itemSubMenu.
|
|
321
|
+
isActiveSubMenu && !itemSubMenu.isShow ? "bg-[#E7F0FF] !text-[#007BE5]" : isActiveSubMenu && itemSubMenu.isShow ? "!text-[#007BE5]" : "",
|
|
315
322
|
"group flex gap-x-3 select-none p-4 text-gray-700 hover:bg-[#E7F0FF] hover:text-[#007BE5] text-sm leading-6 transition-all duration-300 font-semibold items-center"
|
|
316
323
|
),
|
|
317
324
|
children: [
|
|
318
325
|
itemSubMenu.icon,
|
|
319
326
|
itemSubMenu.name,
|
|
320
|
-
|
|
327
|
+
shouldShowToggleIcon && (openSubmenu === itemSubMenu.name ? /* @__PURE__ */ jsx(RefIcon, { className: "w-4 h-4 ml-auto" }) : /* @__PURE__ */ jsx(RefIcon$1, { className: "w-4 h-4 ml-auto" }))
|
|
321
328
|
]
|
|
322
329
|
}
|
|
323
330
|
),
|
|
324
|
-
itemSubMenu.isShow && openSubmenu === itemSubMenu.name && /* @__PURE__ */ jsx("ul", { className: "
|
|
331
|
+
itemSubMenu.isShow && openSubmenu === itemSubMenu.name && /* @__PURE__ */ jsx("ul", { className: " transition-all duration-300", children: itemSubMenu?.children?.map(
|
|
325
332
|
(itemChildrenSubMenu) => {
|
|
326
333
|
const itemFullPath = `/${itemSubMenu.path.replace(
|
|
327
334
|
/^\//,
|
|
@@ -336,18 +343,18 @@ const Sidebar = ({ children, menu, userInfo }) => {
|
|
|
336
343
|
onClick: () => handleClick(itemFullPath),
|
|
337
344
|
className: twMerge(
|
|
338
345
|
pathUrl.startsWith(itemFullPath) ? "bg-[#E7F0FF] !text-[#007BE5]" : "",
|
|
339
|
-
"text-xs hover:bg-[#E7F0FF] hover:text-[#007BE5]
|
|
346
|
+
"text-xs hover:bg-[#E7F0FF] hover:text-[#007BE5] transition-all duration-300 py-2 flex items-center"
|
|
340
347
|
),
|
|
341
348
|
children: [
|
|
342
349
|
itemChildrenSubMenu.icon,
|
|
343
|
-
itemChildrenSubMenu.name
|
|
350
|
+
/* @__PURE__ */ jsx("div", { className: "ml-8", children: itemChildrenSubMenu.name })
|
|
344
351
|
]
|
|
345
352
|
},
|
|
346
353
|
`${itemChildrenSubMenu.path}-${itemChildrenSubMenu.path}`
|
|
347
354
|
);
|
|
348
355
|
}
|
|
349
356
|
) })
|
|
350
|
-
] }, itemSubMenu.path);
|
|
357
|
+
] }, itemSubMenu.path) });
|
|
351
358
|
});
|
|
352
359
|
}) })
|
|
353
360
|
}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { Upload, Image, Tooltip, message } from 'antd';
|
|
5
|
+
import { Spin } from './Spin.js';
|
|
6
|
+
import { Label } from './Label.js';
|
|
7
|
+
import { t as twMerge } from '../chunks/bundle-mjs-BBFHkixS.js';
|
|
8
|
+
import { I as Icon, _ as _extends } from '../chunks/AntdIcon-ZIq9SabE.js';
|
|
9
|
+
|
|
10
|
+
// This icon file is generated automatically.
|
|
11
|
+
var CloseOutlined$1 = { "icon": { "tag": "svg", "attrs": { "fill-rule": "evenodd", "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" } }] }, "name": "close", "theme": "outlined" };
|
|
12
|
+
|
|
13
|
+
var CloseOutlined = function CloseOutlined(props, ref) {
|
|
14
|
+
return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
|
|
15
|
+
ref: ref,
|
|
16
|
+
icon: CloseOutlined$1
|
|
17
|
+
}));
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
/** */
|
|
21
|
+
var RefIcon = /*#__PURE__*/React.forwardRef(CloseOutlined);
|
|
22
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
23
|
+
RefIcon.displayName = 'CloseOutlined';
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const logoUpload = "data:image/png;base64,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";
|
|
27
|
+
|
|
28
|
+
const { Dragger } = Upload;
|
|
29
|
+
const UploadImage = ({
|
|
30
|
+
onUploadSuccess,
|
|
31
|
+
label,
|
|
32
|
+
customStyleUpload,
|
|
33
|
+
customStyleContainer,
|
|
34
|
+
required,
|
|
35
|
+
styleImageDefault,
|
|
36
|
+
...restProps
|
|
37
|
+
}) => {
|
|
38
|
+
const [imageUrl, setImageUrl] = useState("");
|
|
39
|
+
const [loading, setLoading] = useState(false);
|
|
40
|
+
const handleUpload = async (options) => {
|
|
41
|
+
const { file } = options;
|
|
42
|
+
const formData = new FormData();
|
|
43
|
+
formData.append("file", file);
|
|
44
|
+
formData.append("upload_preset", "ml_default");
|
|
45
|
+
setLoading(true);
|
|
46
|
+
try {
|
|
47
|
+
const res = await fetch(
|
|
48
|
+
"https://api.cloudinary.com/v1_1/dhtrzmzd3/image/upload",
|
|
49
|
+
{
|
|
50
|
+
method: "POST",
|
|
51
|
+
body: formData
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
const response = await res.json();
|
|
55
|
+
const uploadedUrl = response?.secure_url;
|
|
56
|
+
setImageUrl(uploadedUrl);
|
|
57
|
+
if (onUploadSuccess) {
|
|
58
|
+
onUploadSuccess(uploadedUrl);
|
|
59
|
+
message.success("Tải ảnh lên thành công");
|
|
60
|
+
}
|
|
61
|
+
} catch (err) {
|
|
62
|
+
console.error(err);
|
|
63
|
+
message.error("Tải ảnh lên thất bại");
|
|
64
|
+
} finally {
|
|
65
|
+
setLoading(false);
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
const handleRemoveImage = () => {
|
|
69
|
+
setImageUrl("");
|
|
70
|
+
if (onUploadSuccess) {
|
|
71
|
+
onUploadSuccess("");
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
const props = {
|
|
75
|
+
name: "file",
|
|
76
|
+
multiple: false,
|
|
77
|
+
customRequest: handleUpload,
|
|
78
|
+
showUploadList: false
|
|
79
|
+
};
|
|
80
|
+
return /* @__PURE__ */ jsxs("div", { className: customStyleContainer, children: [
|
|
81
|
+
label && /* @__PURE__ */ jsx(Label, { label, required }),
|
|
82
|
+
/* @__PURE__ */ jsx(Dragger, { ...props, ...restProps, children: /* @__PURE__ */ jsx("div", { children: loading ? /* @__PURE__ */ jsx(Spin, {}) : imageUrl ? /* @__PURE__ */ jsx("div", { className: customStyleUpload, children: /* @__PURE__ */ jsxs(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
onClick: (e) => e.stopPropagation(),
|
|
86
|
+
className: "w-full rounded-md relative",
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ jsx(
|
|
89
|
+
Image,
|
|
90
|
+
{
|
|
91
|
+
src: imageUrl,
|
|
92
|
+
alt: "Uploaded",
|
|
93
|
+
style: { width: "100%", height: "auto" },
|
|
94
|
+
className: "rounded-md"
|
|
95
|
+
}
|
|
96
|
+
),
|
|
97
|
+
/* @__PURE__ */ jsx(Tooltip, { title: "Xóa ảnh", children: /* @__PURE__ */ jsx(
|
|
98
|
+
"button",
|
|
99
|
+
{
|
|
100
|
+
onClick: (e) => {
|
|
101
|
+
e.stopPropagation();
|
|
102
|
+
handleRemoveImage();
|
|
103
|
+
},
|
|
104
|
+
className: "absolute top-1 right-1 w-6 h-6 flex items-center justify-center bg-white cursor-pointer bg-opacity-80 rounded-full hover:bg-opacity-100 transition",
|
|
105
|
+
children: /* @__PURE__ */ jsx(RefIcon, { className: "text-black text-[12px]" })
|
|
106
|
+
}
|
|
107
|
+
) })
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
) }) : /* @__PURE__ */ jsxs("div", { children: [
|
|
111
|
+
/* @__PURE__ */ jsx("div", { className: "ant-upload-drag-icon flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(
|
|
112
|
+
"img",
|
|
113
|
+
{
|
|
114
|
+
src: logoUpload,
|
|
115
|
+
alt: "Upload",
|
|
116
|
+
className: twMerge(
|
|
117
|
+
"rounded-md w-full h-full",
|
|
118
|
+
styleImageDefault
|
|
119
|
+
)
|
|
120
|
+
}
|
|
121
|
+
) }),
|
|
122
|
+
/* @__PURE__ */ jsx("p", { className: "ant-upload-text text-[#116DFF] text-[14px] font-[400]", children: "Tải hình ảnh lên" }),
|
|
123
|
+
/* @__PURE__ */ jsx("p", { className: "ant-upload-hint text-[14px] font-[400]", children: "Ảnh có kích thước 400x400 px và dung lượng dưới 1MB" })
|
|
124
|
+
] }) }) })
|
|
125
|
+
] });
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
export { UploadImage };
|
package/es/ui/UploadImage.js
CHANGED
|
@@ -1,128 +1,34 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { Upload, Image, Tooltip, message } from 'antd';
|
|
5
|
-
import { Spin } from './Spin.js';
|
|
6
|
-
import { Label } from './Label.js';
|
|
7
|
-
import { t as twMerge } from '../chunks/bundle-mjs-BBFHkixS.js';
|
|
8
|
-
import { I as Icon, _ as _extends } from '../chunks/AntdIcon-ZIq9SabE.js';
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { C as Controller } from '../chunks/index.esm-o4O8pXMN.js';
|
|
3
|
+
import { UploadImage } from './UploadComponent.js';
|
|
9
4
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var CloseOutlined = function CloseOutlined(props, ref) {
|
|
14
|
-
return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
|
|
15
|
-
ref: ref,
|
|
16
|
-
icon: CloseOutlined$1
|
|
17
|
-
}));
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
/** */
|
|
21
|
-
var RefIcon = /*#__PURE__*/React.forwardRef(CloseOutlined);
|
|
22
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
23
|
-
RefIcon.displayName = 'CloseOutlined';
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const logoUpload = "data:image/png;base64,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";
|
|
27
|
-
|
|
28
|
-
const { Dragger } = Upload;
|
|
29
|
-
const UploadImage = ({
|
|
30
|
-
onUploadSuccess,
|
|
5
|
+
const UploadImageController = ({
|
|
6
|
+
name,
|
|
31
7
|
label,
|
|
32
|
-
customStyleUpload,
|
|
33
|
-
customStyleContainer,
|
|
34
8
|
required,
|
|
9
|
+
customStyleContainer,
|
|
10
|
+
customStyleUpload,
|
|
35
11
|
styleImageDefault,
|
|
36
|
-
|
|
12
|
+
control
|
|
37
13
|
}) => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
setLoading(true);
|
|
46
|
-
try {
|
|
47
|
-
const res = await fetch(
|
|
48
|
-
"https://api.cloudinary.com/v1_1/dhtrzmzd3/image/upload",
|
|
14
|
+
return /* @__PURE__ */ jsx(
|
|
15
|
+
Controller,
|
|
16
|
+
{
|
|
17
|
+
name,
|
|
18
|
+
control,
|
|
19
|
+
render: ({ field: { onChange } }) => /* @__PURE__ */ jsx(
|
|
20
|
+
UploadImage,
|
|
49
21
|
{
|
|
50
|
-
|
|
51
|
-
|
|
22
|
+
onUploadSuccess: onChange,
|
|
23
|
+
label,
|
|
24
|
+
required,
|
|
25
|
+
customStyleContainer,
|
|
26
|
+
customStyleUpload,
|
|
27
|
+
styleImageDefault
|
|
52
28
|
}
|
|
53
|
-
)
|
|
54
|
-
const response = await res.json();
|
|
55
|
-
const uploadedUrl = response?.secure_url;
|
|
56
|
-
setImageUrl(uploadedUrl);
|
|
57
|
-
if (onUploadSuccess) {
|
|
58
|
-
onUploadSuccess(uploadedUrl);
|
|
59
|
-
message.success("Tải ảnh lên thành công");
|
|
60
|
-
}
|
|
61
|
-
} catch (err) {
|
|
62
|
-
console.error(err);
|
|
63
|
-
message.error("Tải ảnh lên thất bại");
|
|
64
|
-
} finally {
|
|
65
|
-
setLoading(false);
|
|
29
|
+
)
|
|
66
30
|
}
|
|
67
|
-
|
|
68
|
-
const handleRemoveImage = () => {
|
|
69
|
-
setImageUrl("");
|
|
70
|
-
if (onUploadSuccess) {
|
|
71
|
-
onUploadSuccess("");
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
const props = {
|
|
75
|
-
name: "file",
|
|
76
|
-
multiple: false,
|
|
77
|
-
customRequest: handleUpload,
|
|
78
|
-
showUploadList: false
|
|
79
|
-
};
|
|
80
|
-
return /* @__PURE__ */ jsxs("div", { className: customStyleContainer, children: [
|
|
81
|
-
label && /* @__PURE__ */ jsx(Label, { label, required }),
|
|
82
|
-
/* @__PURE__ */ jsx(Dragger, { ...props, ...restProps, children: /* @__PURE__ */ jsx("div", { children: loading ? /* @__PURE__ */ jsx(Spin, {}) : imageUrl ? /* @__PURE__ */ jsx("div", { className: customStyleUpload, children: /* @__PURE__ */ jsxs(
|
|
83
|
-
"div",
|
|
84
|
-
{
|
|
85
|
-
onClick: (e) => e.stopPropagation(),
|
|
86
|
-
className: "w-full rounded-md relative",
|
|
87
|
-
children: [
|
|
88
|
-
/* @__PURE__ */ jsx(
|
|
89
|
-
Image,
|
|
90
|
-
{
|
|
91
|
-
src: imageUrl,
|
|
92
|
-
alt: "Uploaded",
|
|
93
|
-
style: { width: "100%", height: "auto" },
|
|
94
|
-
className: "rounded-md"
|
|
95
|
-
}
|
|
96
|
-
),
|
|
97
|
-
/* @__PURE__ */ jsx(Tooltip, { title: "Xóa ảnh", children: /* @__PURE__ */ jsx(
|
|
98
|
-
"button",
|
|
99
|
-
{
|
|
100
|
-
onClick: (e) => {
|
|
101
|
-
e.stopPropagation();
|
|
102
|
-
handleRemoveImage();
|
|
103
|
-
},
|
|
104
|
-
className: "absolute top-1 right-1 w-6 h-6 flex items-center justify-center bg-white cursor-pointer bg-opacity-80 rounded-full hover:bg-opacity-100 transition",
|
|
105
|
-
children: /* @__PURE__ */ jsx(RefIcon, { className: "text-black text-[12px]" })
|
|
106
|
-
}
|
|
107
|
-
) })
|
|
108
|
-
]
|
|
109
|
-
}
|
|
110
|
-
) }) : /* @__PURE__ */ jsxs("div", { children: [
|
|
111
|
-
/* @__PURE__ */ jsx("div", { className: "ant-upload-drag-icon flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(
|
|
112
|
-
"img",
|
|
113
|
-
{
|
|
114
|
-
src: logoUpload,
|
|
115
|
-
alt: "Upload",
|
|
116
|
-
className: twMerge(
|
|
117
|
-
"rounded-md w-full h-full",
|
|
118
|
-
styleImageDefault
|
|
119
|
-
)
|
|
120
|
-
}
|
|
121
|
-
) }),
|
|
122
|
-
/* @__PURE__ */ jsx("p", { className: "ant-upload-text text-[#116DFF] text-[14px] font-[400]", children: "Tải hình ảnh lên" }),
|
|
123
|
-
/* @__PURE__ */ jsx("p", { className: "ant-upload-hint text-[14px] font-[400]", children: "Ảnh có kích thước 400x400 px và dung lượng dưới 1MB" })
|
|
124
|
-
] }) }) })
|
|
125
|
-
] });
|
|
31
|
+
);
|
|
126
32
|
};
|
|
127
33
|
|
|
128
|
-
export {
|
|
34
|
+
export { UploadImageController };
|
package/es/ui/index.js
CHANGED
|
@@ -67,7 +67,7 @@ export { BreadcrumbHeading } from './BreadcrumbHeading.js';
|
|
|
67
67
|
export { Card } from './Card.js';
|
|
68
68
|
export { ConfigProvider } from './ConfigProvider.js';
|
|
69
69
|
export { PageNotFound } from './PageNotFound.js';
|
|
70
|
-
export {
|
|
70
|
+
export { UploadImageController } from './UploadImage.js';
|
|
71
71
|
export { T as TINY_API } from '../chunks/common-CocKiHtC.js';
|
|
72
72
|
|
|
73
73
|
const SettingColumnItem = ({ lable, name, control }) => {
|
package/package.json
CHANGED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
interface UploadImageProps {
|
|
3
|
+
onUploadSuccess?: (url: string) => void;
|
|
4
|
+
customStyleContainer?: string;
|
|
5
|
+
customStyleUpload?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
required?: boolean;
|
|
8
|
+
styleImageDefault?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const UploadImage: React.FC<UploadImageProps>;
|
|
11
|
+
export {};
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
customStyleUpload?: string;
|
|
2
|
+
import { Control } from 'react-hook-form';
|
|
3
|
+
interface UploadImageControllerProps {
|
|
4
|
+
name: string;
|
|
6
5
|
label?: string;
|
|
7
6
|
required?: boolean;
|
|
7
|
+
customStyleContainer?: string;
|
|
8
|
+
customStyleUpload?: string;
|
|
8
9
|
styleImageDefault?: string;
|
|
10
|
+
control: Control;
|
|
9
11
|
}
|
|
10
|
-
export declare const
|
|
12
|
+
export declare const UploadImageController: React.FC<UploadImageControllerProps>;
|
|
11
13
|
export {};
|