From ea11bf8a72625dd7ab12386dbc0ba8fb545cff26 Mon Sep 17 00:00:00 2001 From: Yuri Tatishchev Date: Wed, 25 Dec 2024 12:09:57 -0800 Subject: [PATCH] clients page: make add form a modal --- bun.lockb | Bin 168043 -> 168033 bytes package.json | 4 +- .../ui/dialog/dialog-content.svelte | 36 +++++++++++++++++ .../ui/dialog/dialog-description.svelte | 16 ++++++++ .../components/ui/dialog/dialog-footer.svelte | 16 ++++++++ .../components/ui/dialog/dialog-header.svelte | 13 ++++++ .../ui/dialog/dialog-overlay.svelte | 21 ++++++++++ .../components/ui/dialog/dialog-portal.svelte | 8 ++++ .../components/ui/dialog/dialog-title.svelte | 16 ++++++++ src/lib/components/ui/dialog/index.ts | 37 ++++++++++++++++++ src/routes/clients/+page.svelte | 32 +++++++++++---- 11 files changed, 190 insertions(+), 9 deletions(-) create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte create mode 100644 src/lib/components/ui/dialog/dialog-portal.svelte create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte create mode 100644 src/lib/components/ui/dialog/index.ts diff --git a/bun.lockb b/bun.lockb index 6c477e635d46d9b02b8ae7731b932dec6845f507..7f96fdfccf2ad56995ee057d185b3cf7dbf8302e 100755 GIT binary patch delta 2274 zcmaKte^6A{702&+u)GiaTv%w$_c0HN4f;JT$+m)lfx4ql^(33Y)BOeUEJ>lbP;6 zXFvCzbM86ko_FrGmeH46MmKm|Nse77ZsN6{KK=Qqzb=`$q= zXKS5=9D~&^Naf|l5t&)dSQ@ybGEh`rR9un-P6Q8z7)yaHdMr>C3^3LpDiX4IQ!QgR zVRffyO1LA#++ge60jW-W22rU9+Qj9AiEd{dV;uCKjf~v}nU7uNIc~GPURu6t#bYHQ zRx9+xtmHfE85@n=>znLsdPGrT)Y!-qadybz#sV!3mYXmQ3Lx>B(vh8xhpK`c!aVR^zLF51_a z{9V*}hT0LGx5LI zTR}c(j1s-~`{Dsp0S=)rHu(2&9f~y3IoqHWA{a7x57zFp9cCI1H!kEZG5JS+Di!W( zlYT3L)uzLX>slmM`uvUt{PT&)UO&An+%+bR5y2Xh7uH1m>OO<-1?AWty@sP3lq)(+ zKTpQB=3*U*++*+sAeAs^qc8q{P%+owJs_0<2}REJ=t7%xgD(U5L0t5XH>gQmU2oFI z!o9)dHRz85>>%%KgLi{|28tD(GY#$vGxigUdQF3Z!W}m0stATn?nU1yD<&!s`s1Jn zEj@Me4BV3{7pZdby`XG+4{^K)nr@K}ibDrI0*Vp6UW1y2yUwIpB3Nhgt?0v%Vq_Zp zHIRMFD1qZE&=j$9uAiIeOO>%@&)0$MYeE$Cvbeg*q$|R`+2q+<7<<4vRoT~pa>Qhx zpC4BLuKjz*W1mCc{lw)*(I3%?63`O+8M zao1Pxv|j)F#>}w=d98DduHRpJXlYz!;Tyklop|BQ{)|XRI$ep)J9UTx9@j56 zhtv8uM$To@fvJv5Yw>BzSvfQgA8sta&g?IGq3l>l_oqh3TA)1Wd8Cpt4cnO!o=>&p zXhW+d%fx)Dw=B1zGt|UskgftUBFl5=E&BFG1RI}~aplAM$+V-?@eM})aFlWlx?3jp zQ3frP$^DcjXZBGl4_4U&@pZYhk4l|Ym<;Nqj3dvso6q0gtI;yUbEgL_8x_=@ z_PosQeNX-AH7MvFuSaLh^6GU)XZr_nJ3lGdzOxMqQ#{!oH0Cb(a6eAJD69L)OE1a} zkTW{uy-x*djy1Pz(C8p$i5jFQG<#JeG#(t217FZHKjYF&p{;p?Te>R z4}FA#vprKhx{qbb&aY|y*l595?fK));T`j25^a~s1LUU$Ie!2V?Ub7aaA1?%`;CzA z4^Wvi`f4=2S@cCi!LE1Uda7rtX9}jMTrf!YQofXfaMUKx4ALZeRSpl5>(=ONGNaho1Q1qk9(}EWUwreOCmXjtl2`@>lKv YVq?$`^5-?$blLi(=8PP!(OyaYFC7M)3jhEB delta 2283 zcmaKte^6A{702&+@X%`@vg(Ss8bTdIHk211yYg07`iL=U@keYzDrsYlh!mE=SOk$@ zB8nQ)sFB>#Ye>zIQ9CjdqARtVHcbYaC^Ma=8f}s>RI4-oh%rn`(q!a^(C>SXZ70*2 z{;_lRbMHClo^$Sb=U!=_bgO;Rel7Lt(6!h99Ov&oGo}05oZk8;wB(N#`_J819QUh? zg*RM77yH61YwlW*SIJlsV~wXF;~^_6%0lZHV@tr3!3Q=o=7PKqIR&yAG7+*tP<&eM zr7e!udC0r4+6!rUd1G9r)i5?4TvSn5P*$+MXeKxT90xfKvS3qTWvGy`Hc=j*!VlFk zb~jd~csc&T|)FVxnZ~C;~7XRp5>5JAwOL1 ztS@`cvFnAtwSF8j335+~lYMj7g@nFBIxW_E(#7S~yz6FpQ%pht8aRl#@kZM5w{!*=Qfj ziivW>{!7p*ThBWA(MBgPvg*Z;fHIvu#PKm`p-no-g+?j`#fWfSKzJKXS|&n`CVvs_ zHeQR_20sOIE*TY22`xEKY*-rPx%g-08)MgEJIJ{u#6Ty-&Fvd*S&B{5^uJ2wnx0Q)qZR!=F zohDb&;8s_tBAjFJEuisS4MPos7K;oc$iEubLd9{T3z`{Q37c6$ht^S0jvd{n_~-by zZu&dVGqx03F#>g?vaXKZ@3rJSrk?zKQ_%OPOYVd3A8Eh&w?9sv;o7rm(YD_A^L~4* zG1Qaz&brkdw@RzU8a2D#-^0y+biMF(=b&8Fwl9$0`rR{;&KdM+Y|iRcb$3p@_2QTB zT=!<2+IHbLrRqIda}JN3x%%+FvE3g%|JvGX`pM?rls$nW)t{D@I25<5(UWl<77&{+Nrb3W?TvhxZ0zB@YE3d=%TX$4~nw$ma! zkLpN0fi`o=ggkuImgRnQg*9~AWNJPck+oU$9({Wwf{o8hIIWqdW$K!qC8u{&r;Yyk zer;alFWr=5&=Q$&o02I{x&~>w%)U)-URudmGF+dQPv53uPXoq+byD)1uXdQP-9Mnv z8bh0}p<@nZ(z&;wpld!&XUz8M^F+t{g$a9aMnk#sg<2H#9GoiPR!p!xW@8xndX* zNx6L(2Og5I{8z}o4pWII`f$AbZowD(^Y@*GYrlrFGL|bJAE8I+r&5l<(Fu8egwp9< zIW|J6GouemZp+EOOCL1#EA$zr0)}>@?EaXNVhzUTN}ZHxGIWQENRy9`QmXvt9hx$+ z7DFLDswh)O$*tC*2i&q}jNIdzbXiu6QZe<*lo%yh{%e#<6t+XI8KX>c$(At$GE=@i zMm`?IxUk;6U2+gOHTs0rxAgpELifD~71CQxB}m6x>l9qb_*3-4+-F~T^7#5&$TdsT ztz188J*KRn<&qR-+Px?&W6@{L_q){AxA9(!Y(<;%vvwa;2gq!yu$60@rj$fw`Ti4{7JcDE~L@!;yorN*>Yq$bhQ+ lexowqA9;PVax^y9{xb4wm4!Ux*`n%7P1ggFmRjYk``?b%q#OVM diff --git a/package.json b/package.json index 0c3e24d..acc72b5 100644 --- a/package.json +++ b/package.json @@ -31,14 +31,14 @@ "@types/qrcode-svg": "^1.1.5", "arctic": "^2.2.1", "autoprefixer": "^10.4.20", - "bits-ui": "^0.21.16", + "bits-ui": "^0.22.0", "clsx": "^2.1.1", "eslint": "^9.7.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-svelte": "^2.36.0", "globals": "^15.0.0", "ip-address": "^10.0.1", - "lucide-svelte": "^0.454.0", + "lucide-svelte": "^0.469.0", "prettier": "^3.3.2", "prettier-plugin-svelte": "^3.2.6", "prettier-plugin-tailwindcss": "^0.6.5", diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte new file mode 100644 index 0000000..a06ccb2 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-content.svelte @@ -0,0 +1,36 @@ + + + + + + + + + Close + + + diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte new file mode 100644 index 0000000..8bc70cc --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-description.svelte @@ -0,0 +1,16 @@ + + + + + diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte new file mode 100644 index 0000000..a235d1f --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-footer.svelte @@ -0,0 +1,16 @@ + + +
+ +
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte new file mode 100644 index 0000000..6b4448c --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-header.svelte @@ -0,0 +1,13 @@ + + +
+ +
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte new file mode 100644 index 0000000..1d376e4 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-overlay.svelte @@ -0,0 +1,21 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte new file mode 100644 index 0000000..eb5d0a5 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-portal.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte new file mode 100644 index 0000000..06574f3 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-title.svelte @@ -0,0 +1,16 @@ + + + + + diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts new file mode 100644 index 0000000..b17ba5e --- /dev/null +++ b/src/lib/components/ui/dialog/index.ts @@ -0,0 +1,37 @@ +import { Dialog as DialogPrimitive } from "bits-ui"; + +import Title from "./dialog-title.svelte"; +import Portal from "./dialog-portal.svelte"; +import Footer from "./dialog-footer.svelte"; +import Header from "./dialog-header.svelte"; +import Overlay from "./dialog-overlay.svelte"; +import Content from "./dialog-content.svelte"; +import Description from "./dialog-description.svelte"; + +const Root = DialogPrimitive.Root; +const Trigger = DialogPrimitive.Trigger; +const Close = DialogPrimitive.Close; + +export { + Root, + Title, + Portal, + Footer, + Header, + Trigger, + Overlay, + Content, + Description, + Close, + // + Root as Dialog, + Title as DialogTitle, + Portal as DialogPortal, + Footer as DialogFooter, + Header as DialogHeader, + Trigger as DialogTrigger, + Overlay as DialogOverlay, + Content as DialogContent, + Description as DialogDescription, + Close as DialogClose, +}; diff --git a/src/routes/clients/+page.svelte b/src/routes/clients/+page.svelte index 8c939e4..72de764 100644 --- a/src/routes/clients/+page.svelte +++ b/src/routes/clients/+page.svelte @@ -4,7 +4,9 @@ import { Button } from '$lib/components/ui/button'; import { Input } from '$lib/components/ui/input'; import { LucidePlus } from 'lucide-svelte'; + import * as Dialog from "$lib/components/ui/dialog"; import type { PageData } from './$types'; + import { Label } from '$lib/components/ui/label'; const { data }: { data: PageData } = $props(); @@ -49,10 +51,26 @@ -
- - -
+
+ + + + + +
+ + Create a new client + +
+ +
+ + + +
+ + +