From a93da3d442fb21733077fe904180c03dd2e84c40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 11 Dec 2024 17:48:43 +0500
Subject: [PATCH] feat: really finish with Drawer and add Divider
---
.storybook/manager-head.html | 11 +
README.md | 6 +
public/storybook.ico | Bin 0 -> 218174 bytes
src/common/constants/icons.ts | 209 ++++++++++++++++++
src/common/helpers/icons.ts | 8 -
src/common/interfaces/common.ts | 4 +
.../components/Divider/Divider.stories.ts | 58 +++++
src/stories/components/Divider/Divider.vue | 14 +-
.../components/Drawer/Drawer.stories.ts | 36 ++-
src/stories/components/Drawer/Drawer.vue | 85 +++++--
10 files changed, 396 insertions(+), 35 deletions(-)
create mode 100644 .storybook/manager-head.html
create mode 100644 public/storybook.ico
create mode 100644 src/common/constants/icons.ts
delete mode 100644 src/common/helpers/icons.ts
create mode 100644 src/stories/components/Divider/Divider.stories.ts
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
new file mode 100644
index 0000000..657a1b8
--- /dev/null
+++ b/.storybook/manager-head.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <link rel="icon" href="./storybook.ico">
+ <title>Storybook</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/README.md b/README.md
index 4e72dcb..5b1dc0d 100644
--- a/README.md
+++ b/README.md
@@ -27,3 +27,9 @@ yarn dev
```sh
yarn build
```
+
+## Важные моменты при разработке
+
+ПоÑле ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð¸ÐºÐ¾Ð½ÐºÐ¸:
+1. Добавить иконку в iconsSet (src/common/constants/icons);
+2. Добавить иконку в ÑоответÑтвующий маÑÑив в App.vue.
\ No newline at end of file
diff --git a/public/storybook.ico b/public/storybook.ico
new file mode 100644
index 0000000000000000000000000000000000000000..690ee543d1b7a8d727252f9d278e2538ad02a61f
GIT binary patch
literal 218174
zcmeI52fP&3y~o#{SfbGs%`?&XNiqFJO`h-hjHZAEqtRGnk3BJVP4sC%>7df2iXcq{
zEC@<d>BT}56ahs#2+}USUC#Uc=Iq>^-JRXLd+*HboHPI7^JnMI?9R;j&;NVQ|Fr)}
zrS`+WnW+^1KQVRkr3a+Gf&G&qJeJyDALnlB^aGp^`A;-Zss@^#t5VG%%^TwL9DIf$
zxPFTZoa^t8`y7aS90EBEawO#IkZ(c03pp9`3&`n^vmxh0{tUSeay#UHNMlGFNEb*S
z$V-rskcp7#ka>_LkTsAh$gZ?}fzS6K?I8^yynju4n>A3Ss!YCTfCirUgGzOzZSx(w
zwvEr4ckbQy*g?(tGLJpM>orvS<M#(az65dY`xxvW2l)=<dyt<%PJx^O`90(U$Yl`M
z#_z-aqmUL5+G-C-Kgi3F5s<NvsgRkFk075wmO@rTXycn8TOm6jyCHia`yeU+*@$Zl
zgPaE;$6B9AyKK>EfO+;4=fSqM&DFevn)l(pm!Lk$QA4#K?E3(SYu|_Cen&yP`S%a;
z_s=1}hWrN75ONXZO2}U!cS0V5G=VS=e+JSEG7$0_WHf~NIP>W_kOh#%kd=_N5Zd1s
zNEo&q1Ru3sV>6zeOn(ECYEHdMx#J5CeUhfMaq0<n?tVIY3(Bt3@1TXg$9}lB>zf>k
z{jWfdhI|w9ZOBQGA3^>T;`%4d2QPtK4Y>t!H{@YRQ^-@0t`PbtgCVa&-hxbl%z%6d
z@#fv@@VA?H@5KHdNHwH3n@ZC8;n2qk5GT)ThBDs7jrli)cI~7kosWlQ<IR5W+{g7z
zyuLSmlVc&@fqWlA-{e%t84#~;ay|a0|9u}M*Ei{pW3F#94*Sy}vmo;ziy+G(pF`F|
znE!2u?1Ip~gYrv~#6VrsIt=<|S?$<d*xY#QmAt28+v$6|&k)EbS>ko+n`C_NT;JqG
zoO6AXUt#}D2z`?aA@ogdg!~=yAfz#*4Wtv~IS74|p%AZc@&W#y4_OS!^-Wy+4$|+g
z>pPd<1yg>qEO+WVb>*fx{5)KvJb`Vu(&dEfn;eX5&^I{(ax{c~<nfTY`X<lgxAaX|
zuF^M|44Dp@3t0$R0$By|)+@y~3C5<9z$X3K29UC`sqv3oA4#*re4Ty@^Y2EGOCi@m
z3i&4eaL)Bj#$vyiZ^E|1Z4j|<vF|vrNxS`WIpDB9(c+SH8Kc`GSyycWnE+V<*$ScW
zExw7^cpPjzjAvjw%2}my<J7@3WeokO_7K)r!+18irsy@!Hqf#ZZor1qcGUvyv)Dfe
zGFy0&{35|NFupc!+;XM`>+`zavO2-~igO+)&lX)7y|frNP0j`@nin$jTL|kg@_s}I
zNw<NG#kg_G8r@#Tadm9-O1i!z{bB>OfvQ@$(RG@~gc->*#0F|?pddHU5q&et36KR4
z$!kRiVguR+3UbpT)8@>vC)L7@<QrlGH8xO?8|a8*(K(i}kLasLUy|QSnM)fe$_>sR
z33*qz5pKi=vTUF>ZoUnDEfSq&=}gKTDRXM$<_BPg<A=poL<eF685^jLo1cQ2wZe_$
z8)5@lHc%Tkr$ApDL}yt#lYBRm?<Q3jwQ+MgnBm;qr0Pe~E$`mX25RHxEHJ}4V}8Gt
zW1^R&+CXjGGz2r8XPH#}NV?_S``JKk+%R4RW4ihMR*s2Yl4=9BadSDC;hg8B>PONo
z@7~V_YUAcwFe5R##CH5_C&|ZZ<K|W=Yox3d8_2T(Uv8XOPkIi)U81u*oh3P+m9%T$
z!<QSz00%FWhlCs9Mr<I@27I~k#G-91I?L0U<hfGc^X0}9SD>YEBix7$<k^5PH=go_
zu>~c66&;8TWZOVNZqo76x(PRuZ-@=#*?=!Mj-S>5>vf%@o)?|v=}hw8?7TOL`tavQ
zx1}+*z>C6-a3eO5X9LB!ISBe1Dmu&4SrYSCNpp4?Ta24Sz|2VDMz|3h$g_cB+;APV
zaiX(4ok`xCo%beDAH}%g+JRGr8{tN5AkPMhadQ;(#kDb$n4d_R<-HfPfnwZz4a{&o
z*<!z!bE2Ol+CVXGjs-LGg&WB?#0K(gpcprd)%ls|EKg@i%wHwV*?vVaZn*aCa^Xg}
z5gW*}fnwa841LLZ(b@S-@cC{-rLgXUYSuuhrj$R_U3d*%3*)4Mf6lP=VAl1Ear1L<
z!?oJw9R#3*8aC2g@b8xAE7kU5r8-=tRM)>M)$2~B`ah)9;KoV~ZKc%f?UWkzj8boQ
zQ|j$!GxAmsrABvF>J6NKwWU&n9#g9C{Yv$?O{q@TD)rQ#m1@;UGvsneri7=!Y`GXW
zr-7MG!cE<D?UWy2grDT2-Q`L>dxug(nt+4uO1(c+srgfsS}{+lb<367vR<j3Tb0_g
zOR4I;O6}XHO4|6ny?d0}y+f&ORZ4AKt<<W8N`3N<QqzZN<_7&+sqVLcr%RN=ICov9
z;klf$DS$j7fi_Z%n=_z~EeX^~-O5*#AC8{|du(-qQk}0yIRJZ|&=-76R%-2HrMAPa
zt6}3&Z{%w02Jo~%sSie@4C|y+@4J<H`cj=IuuKw$%E}*$aq~Mcvt76;u1}{<0aoa5
z(H7}XEu5y*rq59h?2ej{((lKzjpY){J(htT{*qxx{JG-q9847B=6syrCEVoeka;un
zXx1Tm{!OWIy_H%zN2wiKO1IlMeUs(U7fZEYH}Daqo`gTgvQx^S{CA(`p%^z8<2!qV
zn~d%pUSLo3Z(eSu)W?%hr`QxH0_y)PyLT$JY_3vcx+wL`b($TgO+o5GUjMxqH&=m~
zYT+hhJMFGeYD5R6mVcz{;`O)Ecwb@t3Z*6wP^#O_I`0sEYVy!LZkp=3o{XKw_1C?O
zC32ts3jLPhPbsx>KH9me<8A9<JRR$5lfX}BmOs#k_;303o5#<si8**jlDVO6v^Y<x
z0sm5J(RAH59EMGrbWPTQMxrgwt^Xw0KJv;NPYkGgld2b%G3<++HpJYzepozKqrCm}
zJ*E2Gm-gL|za-F3^0;wg*=S$wk;LhPHUR1WpsvG&WqUSUm;FIwd!p<?`+EZGJ^9>Z
z>Nig$i5vQ5Y*!xHQTGwrVB2A*fptB$DR#XnaqJZ1rfpKVAv5f^oH|&Ka|zqtY`gxN
zMW_e<Gg0jY`P?)_yMS&R=#&I*=wm#6nNqVyl|ClSHoFfZJ)76*v8ayC(BHMYEjEuE
zwhOe>zS^^vr`>5!B{Os14#INe8XPY{KbK=iEg!3s#|_&B;I}ZwZGW4&p>M`I?QD#5
zlr1<7?Aos9J~-^yTjuz319lDoGcQ@oO}Y($?aZZ)*ALFJ?7z~^ZJ0aswAH>^J~!G&
zV~pG3)^dY<kn_Rz#CW{2>2z`29>-Z*+D2W7n=gTxF*b6;_sBVwTQ{0+nel)A4J(y;
z4s%#7WTy}}hk==iwsFHcO-IZ#;T%iZqS3&T*-Ev)(z-V4Lfm`>%)Db8Hym&F&P&nQ
zi`*rn0qVRZbZ?P872@V-q;Zx->2&5{v2V`Qxn&tEG;ePg+6fqIgya4!v8h7bd;{tG
z$dWWVeF<&<q{kzgXLWWw@rsYF^4AJ+^B-Vlp)K4npL?x!GUl4anX>WETT{;|#LbCd
zW{C~luq}Y`#5ng?w#sUN^WPYc%7XT_Lfm{G%&fG58^+HV+EU7z$`X^gJNud~u&YAc
z`~+!RV|@Bh*0i}$>NOdwt^D4mHHcSW{=9=i-24*EtT&w-)@%AbfH;_F&yg)Y8gS}4
zX1A>s;^x1=OqJ=}@cG|;IX?CxPog!j`V$@Zmvv7=ZLAPCzd?Go8k#2OUGSZ-pL*?L
zvDUb0fN@NRJg#Fm8fs&OxM_g&>@+k@4mWHM7>xMLagH?`H+zoqd1j4F&(kq;u0bJg
zE&wyTP3DH>&AYEeX$f+#ax}1RnT|<qsIOLtn@hpWUSqidGwicroIsN|uIIt{=UXrb
znd@_GT%}aiTD`7;>E$TbD|zuzV|}$k+*|`@_L<5J`_(vpefwtfsNsA`jv=1dU#XX#
zz*<uO&}&L{x&~`PU9Hy#;W|28D~jz>{O+zD=B1NQJZXTjeV~Q7x!F`^_}r}9aK52Q
z8_O21BgOcjZ7<UH#B{JNo%sO$8AsB8yXW{_=G&jmFmLWE;}>$RAOmeJiyKd@&N~fE
zOGf{&vG-pyhZ^=TaowCYV1PW771IJ~<!`t~0_$_+&y<bx+E|7fSjWlY#uHQhL6f=R
z7=gvJ%&;E%`CO}$`mT@t@VBjz?wN0xk#0UEebVRe(PgS(_Ljwsr@VR0uyoXvHMAe*
zVH;MNVLvlo*KtD2Dq{+?-O``yh_tg`(S(gLQMmrEQ^poZQ%vnJiyOv(!gEqu#PoS<
z_$c&ztPk|QOSePC-FE1wa2;vdd!h7{dz?1NH3LkE(=)!eRprgo<-V`De4lp1b|@44
z{K+rW&o}eaIT_?SX>7ALVVg0$%=%nB%BAe`24xN6#j(8U>i14eI7V*9bdA5oaBb<Z
zV!d$P_m3yWUk7|b#$`7!_COvt%^Nt}^frMJzh`8A%lPPV-xkl*a~%BAP~T(pRk{AV
z2^-sQTK_RPKefKPEAjVv+@Nh>fBbe}iN6obFAws5AB>5=#Y`FyY`w;-KbE<}+Cm4Y
zcgKBW+ySly5k$L)R|g^Q=W&Dk9SC_P<okxkTgygDEu0o_Yhm4sbuij@7<%S)2RAmO
zj>on?j)|&I8+;f#tmT@1+#HPGjHu;zp}g-P?#aHJB_G6_8`f=}y*=FWhGPi!?uoY^
z_;hPN)9a{Mz|EIozi$U&!;xPDeK%aQb>)J1+lw<6_^R;oSe7@8&1^!OBIieOEfu4=
zVgF4-bvW#OO5`>lK>H$f&v(E)EY2Ha>u^j>SUx?ud81vNHIR9>&p(BqhA~1$bEEq_
zj|4OCo61f5E0p4T;c?zLev@s*Vd>auQydg$4P>5;b3M2YQCN9MNILeb-yDN`%?as#
zq1g(bmw6V~PhY<x^Iqb(_rd7!n4uonuFLV!CTvSl7iFE)Fnjak=2)cRW5d$n=-m`<
z-g`AXzl3EC+Z;?;r-W^vYy&mS-u$>Z9%)!)SUQa2X3C4;2KF6>j(OejeM~56^fR)r
zEet(`d`&-YPQpExg?!&obj9+9F>K;qznR!CoUx2#=9z2bpMEdZQ$x%{LbPE&ZhnaS
ztq$>?p)kYeB{wFtr*VFBSbd(82YRhC{`;dab~`LxglNNl-24pp`y#}9hQ<xsWY~YR
zD(3w+VQ|ASX<Xlj>uQ>^v0s*P5-j27R4}vARBqTW68E(SCZPTiq^;0D>wLX=@q5U4
zkK4kl>xF2;e&x;o;C`D!yk~gj4Scm$Xq#cYhd6JO`hy$TdJsA$GxSa8PmXhn{hy6}
zo(7H;;Cu7q=C?S$J&1Q&iEFTq!&o*P0~WW9b1*rsgzH(;-s`I$UV~#IO&I^}_bxsh
zi<q6~)n5<w)ngrg@5jx#xQ@{=Zuu_y+^1vOtXZVzOjlywFk=I<ABAInY1_k}MC^lW
zg0T}a!?6)_-}19aGmgF4Em(iG4)$NyyvvW9KjHp+B7BCrK6}yMx%qj!%Mml>Zap7`
z^OEPjjaWA`m7<Tp*d1HeW361oCuD4uJv((gY1UUcCekZBMh<r4JNz!!*WJ27DXt;*
z#S*=?JN?5s;Dh}$oa4_i$vtj`FM{z`m`Cf>X;>cCSGV->7?<Facg*0!?<pDkig{a5
z{%U=7TITQlxVZw?s4nw5^|pnu?ngW2yJ0<?EYW^B4u!VN*e_kNhEdPI>3Br+p9VgH
zHlBa$@x&Zc><Zg`UU(Qj)`R-H{7tu;b$>}a<og_B<;2j#^?4uO&%I|5tT_5XT6ir!
z!|H{8)@aT#K0n_<V7fuwHY^+Rxo!<NO?6xW#um5%Vr-0CpEUaFlkdwB*tlco9$R;9
zzTjv2H~gJ@ov_Cx@?MOOHtHE&Mw&y2|C4fEqOf&Vsx8#vdw$&9UWe=W+NNA5fIN_V
zgBki|tjm}%7tNoP%u)KfEW4R68EPXn+<0OR-eYK5OnnChpW7*85I>n~$j5!`P=<=y
z_g2g^a&ENuJ=Ji7GLt?U<zeBbviYFv`>{`uWej8C+O)mhQ<tFz+gS}ap7Q2#gVW>9
z6O7!a@51`>o85I=olU$jEo^@bI!0*)?6rm)+}ka0T36sXjI{9}^+cbHV;$I*$G9Su
z=x>UGQKvm1+P1GSY%9YJ{WRUC)-gzXkZTq9`RJ2TM{L(--zfWrY~41m3pb8Wgtk`0
z4gIv1y3FYj;r+wN3yip?+Xmk0TC6+PU#ZPs*h)(#UDJjX&qEBdyBcoTE&yL)KRkP1
zgPz|AMsoGZIt<5^jp&e^b>i1ASE|d6#<vH!_Lkv>WlckM0N(N7-1jVh2a`{7+ycic
za0~+1<*csG<i$4cF`ewMWgX5ETgv9<9CZ-VHO!K<#pWH+UO2voYm0p}9%I~g*i1=&
z+BlAm<B;6CoCWrk%gvXNrqLFpD;CVSbr`n0a_vo%=3?esf8CC--o|yjEGlbgTe;jE
zieux2oBI0`^vO6DoBc5BSJutuO#c<f1TlVqMdgf}ALnxO6)-bRxT!lg%vU)sn(GZL
z|Iprkm{ORYIYQUx3?9Gfa+3R*%gtB8%uL~?d~TdP6@4+!{avXK-`4YVO0g|lzr*#Q
z7(3N6|IFnlmz%GHnGc1V^0;w*vT?nW(GOD_>uVQV)4%C*lKYv<&9}hJ0^z1KZkU&H
zZA#8*TLzy@Ha-5V-vic`GcG^5+?)Vr77I7EbHg%*u`wCznR9++Ls^S)G|WRR_03#n
z_?gSi_i${5a8sBY)?>H^2kZTeQ6QVv0GS!w*vhsuFE8$XE;l~{Gi!t!e{NXDu&&F#
z7@NmmmYWxFZh%wHq{pZxz<zSM`32IvJ^|@=^NrFzX%7(k?QC0?Eu#U(@?o5i1o&oN
zTgm0-*I=efxXF|^^vgJ=Y;<SD!`P6q7ui#4=^Q=(Az{prpImOv#Idcyjpl~-z;!`p
zzHUc6jG$QGSB*X@#M)#G#RM|r$ITzW%nsp3+XLtKe>O8HYqR4zJGUw|p|4VH|CCr}
z{J3cZW_Bl?8~SF9LCF3)*)kenOdYl(a%{IVKEnL@&fYppIs3VO+MmJ9-lTK$a#N+M
z)@JM_>3fX#J8yzg-EU5G8RO+Dmz%4>jP<cPi{%T9eZH+K>7-=R&-`Od7x-lt2{RtM
z$>ruI&p9t&iP-1*AB>kSn~o{JV2V<`?$kb6!u_&b`**nU#D@NRQn?w1az>cZIR@to
zjqI5Cx_>S!-oJCXxj$*#Fdt=IH;HpGbIVnZvzz&bUT1;r%TmT<`tfqOaJccr>U=ck
zyq7WS_Gud&15mXl*MgGuH~V8aUxw@TaO_<|`((<oZ-*PkfC4X+W=Y|Ow!yV;l0G(*
z<7BwT72{HI{9RJse?8NgTi!fX&+8eXclsZ+6V`i^x-nh`*PnalI$geqPgYi*ktuI<
zjN8sh;D-Hn6Z<7|?myRLWF4mG9htF2NqFZ0r%`hQAFbJ0j-U2iz}Jsm`9oi1;QuAB
z?Q9ofwz2P$^*PQ_l{!pW<x8#|*Z65@8`vMr46vCS`XU^s$#sj8vhCTe6xZwJ{Fv4k
zNF631`_A}j4b_3T=F0(HH<!=Y{7wHX2^+`8aGd`u&2>MF!D|A>#&$ex)c9#Qb}-}(
z&$&20Z=IisehFhVZCPhGHC#7m)dHnB_Q7c*LkxEd<CoRh4g#`oFE@;F`&K~Lt#rEb
z?$3US*`w@chU1mTbcHX9b>Uf$lQyz?)nW2%$is%0o5OH?lIL8p-x+m|Hq`fid)opw
zq2HGNC*$j|ToqnI<HfamFE>YmnfGkuhV4hQN84A{uuXZ!aHTlEj=q@i5;`w_+#CaD
zX4}RM^I!H=Y_%vh0OOS}#M&5)htWdXlwDhn^3z-1d=t#fvyL0&!(0c@mTfJ@#SDKc
z-A0By!M68hNP4{79FJ%I)R5;c$zJHUa4n71pO{b0E{s)vf2dNOuh(@LX(Ov>p5f)@
zyI^LiP28~0g8hAacA3o$$DVR+Lm8`FQC7TpwU?V8fSFY`al<^B@taNESdaMt?HL?<
zDPxsm!wmWHa`RLCz19|P=%YP#sqO<bk(=#kD|@q>j(I3!$zsJ!E;pxunGLpZ!~B`+
zO71|sFVi;0TYl;Bw5@>upx+7e6sMmDI-)OIvf%q}|B%z>9m2B(oz{@9=Phsk8~4~8
z(tQGd_q9DIZDB+Q(}=-Zpeurpw@e$SK4|l;8Y%VkWlD9q5#x>!bAxT!tOGLk)vGO)
zdaaF?q1b<=nXXrH{5Z!^_xcB7LEWPL#&#H!z}SPl9^VD8?egccRogo<_`H{!vyqN%
z2B#&D%^9zo#m&am;V{E-YGh;Ti%Na+u2O40)9b=94$1DFI)-m`HRdBxFutuu@HfYY
z?!}mDt{u-<om)3zZKyR$ah@p0m2-`Cj$h&&IL7iA^lv>5u;X8pYIC7x%HfG+l|AK?
zmz#6I%uZXl;X7M0+Z=A#_df)_8T0C(-U03O+1qujUd|_oVq;qd)53C-F$*}Jf%CBY
z+^hQpm^N}`cssh6n+uU9D`MQzUOHZ_)P|K&SW5lx!F+yP@8EcGxg	P{zbzWB(J&
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
literal 0
HcmV?d00001
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
new file mode 100644
index 0000000..3762015
--- /dev/null
+++ b/src/common/constants/icons.ts
@@ -0,0 +1,209 @@
+import type { Component } from 'vue';
+
+import Age18Icon from '@stories/icons/Mono/Age18Icon.vue';
+import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue';
+import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue';
+import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue';
+import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue';
+import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue';
+import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue';
+import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
+import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue';
+import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue';
+import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue';
+import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue';
+import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
+import AtIcon from '@stories/icons/Mono/AtIcon.vue';
+import AwardIcon from '@stories/icons/Mono/AwardIcon.vue';
+import BackspaceIcon from '@stories/icons/Mono/BackspaceIcon.vue';
+import BadgeIcon from '@stories/icons/Mono/BadgeIcon.vue';
+import BallFootballIcon from '@stories/icons/Mono/BallFootballIcon.vue';
+import BallIcon from '@stories/icons/Mono/BallIcon.vue';
+import BanknoteIcon from '@stories/icons/Mono/BanknoteIcon.vue';
+import BellIcon from '@stories/icons/Mono/BellIcon.vue';
+import BellOffIcon from '@stories/icons/Mono/BellOffIcon.vue';
+import BoxIcon from '@stories/icons/Mono/BoxIcon.vue';
+import BrightnessIcon from '@stories/icons/Mono/BrightnessIcon.vue';
+import BulbIcon from '@stories/icons/Mono/BulbIcon.vue';
+import CalculatorIcon from '@stories/icons/Mono/CalculatorIcon.vue';
+import CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue';
+import CalendarIcon from '@stories/icons/Mono/CalendarIcon.vue';
+import CalendarRemoveIcon from '@stories/icons/Mono/CalendarRemoveIcon.vue';
+import CardsIcon from '@stories/icons/Mono/CardsIcon.vue';
+import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
+import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
+import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
+import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
+import CropIcon from '@stories/icons/Mono/CropIcon.vue';
+import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue'
+import CheckmarkIcon from '@stories/icons/Mono/CheckmarkIcon.vue'
+import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue'
+import CodeIcon from '@stories/icons/Mono/CodeIcon.vue'
+import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue'
+import ColorPaletteIcon from '@stories/icons/Mono/ColorPaletteIcon.vue'
+import CompassIcon from '@stories/icons/Mono/CompassIcon.vue'
+import ConstructionWorkerIcon from '@stories/icons/Mono/ConstructionWorkerIcon.vue'
+import ContactsIcon from '@stories/icons/Mono/ContactsIcon.vue'
+import CrossIcon from '@stories/icons/Mono/CrossIcon.vue'
+import CubeIcon from '@stories/icons/Mono/CubeIcon.vue'
+import CupIcon from '@stories/icons/Mono/CupIcon.vue'
+import CursorIcon from '@stories/icons/Mono/CursorIcon.vue'
+import DiamondIcon from '@stories/icons/Mono/DiamondIcon.vue'
+import DiaryIcon from '@stories/icons/Mono/DiaryIcon.vue'
+import DiceIcon from '@stories/icons/Mono/DiceIcon.vue'
+import DigIcon from '@stories/icons/Mono/DigIcon.vue'
+import DislikeIcon from '@stories/icons/Mono/DislikeIcon.vue'
+import DisplayIcon from '@stories/icons/Mono/DisplayIcon.vue'
+import DocumentIcon from '@stories/icons/Mono/DocumentIcon.vue'
+import DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue'
+import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue'
+import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.vue'
+import DollarIcon from '@stories/icons/Mono/DollarIcon.vue'
+import DotsHorizontalIcon from '@stories/icons/Mono/DotsHorizontalIcon.vue'
+import DotsVerticalIcon from '@stories/icons/Mono/DotsVerticalIcon.vue'
+import DownloadIcon from '@stories/icons/Mono/DownloadIcon.vue'
+import DropIcon from '@stories/icons/Mono/DropIcon.vue'
+import DumbbelIcon from '@stories/icons/Mono/DumbbelIcon.vue'
+import EarthIcon from '@stories/icons/Mono/EarthIcon.vue'
+import EditIcon from '@stories/icons/Mono/EditIcon.vue'
+import EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue'
+import ExitIcon from '@stories/icons/Mono/ExitIcon.vue'
+import EyeIcon from '@stories/icons/Mono/EyeIcon.vue'
+import FeedbackIcon from '@stories/icons/Mono/FeedbackIcon.vue'
+import FilterIcon from '@stories/icons/Mono/FilterIcon.vue'
+import FingerprintIcon from '@stories/icons/Mono/FingerprintIcon.vue'
+import FireIcon from '@stories/icons/Mono/FireIcon.vue'
+import FlagIcon from '@stories/icons/Mono/FlagIcon.vue'
+import FlashIcon from '@stories/icons/Mono/FlashIcon.vue'
+import FlashlightIcon from '@stories/icons/Mono/FlashlightIcon.vue'
+import FolderLockIcon from '@stories/icons/Mono/FolderLockIcon.vue'
+import FrameIcon from '@stories/icons/Mono/FrameIcon.vue'
+import FullScreenIcon from '@stories/icons/Mono/FullScreenIcon.vue'
+import GameControllerIcon from '@stories/icons/Mono/GameControllerIcon.vue'
+import GiftIcon from '@stories/icons/Mono/GiftIcon.vue'
+import GlassesIcon from '@stories/icons/Mono/GlassesIcon.vue'
+import HamburgerIcon from '@stories/icons/Mono/HamburgerIcon.vue'
+import HandIcon from '@stories/icons/Mono/HandIcon.vue'
+import HomeIcon from '@stories/icons/Mono/HomeIcon.vue'
+import ImageIcon from '@stories/icons/Mono/ImageIcon.vue'
+import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue'
+import LineIcon from '@stories/icons/Mono/LineIcon.vue'
+import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue'
+import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue'
+import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue'
+import MoveIcon from '@stories/icons/Mono/MoveIcon.vue'
+import ParagraphIcon from '@stories/icons/Mono/ParagraphIcon.vue'
+import PhoneHandsetIcon from '@stories/icons/Mono/PhoneHandsetIcon.vue'
+import PlusCircleIcon from '@stories/icons/Mono/PlusCircleIcon.vue'
+import PlusIcon from '@stories/icons/Mono/PlusIcon.vue'
+import PointerIcon from '@stories/icons/Mono/PointerIcon.vue'
+import SaveIcon from '@stories/icons/Mono/SaveIcon.vue'
+import SettingsIcon from '@stories/icons/Mono/SettingsIcon.vue'
+import TableIcon from '@stories/icons/Mono/TableIcon.vue'
+import TrashIcon from '@stories/icons/Mono/TrashIcon.vue'
+import UserIcon from '@stories/icons/Mono/UserIcon.vue'
+
+export const iconsSet: Record<string, Component> = {
+ Age18Icon: Age18Icon,
+ AirplaneIcon: AirplaneIcon,
+ AlarmIcon: AlarmIcon,
+ AlignCenterIcon: AlignCenterIcon,
+ AlignLeftIcon: AlignLeftIcon,
+ AlignRightIcon: AlignRightIcon,
+ AnchorIcon: AnchorIcon,
+ AnchorLinkIcon: AnchorLinkIcon,
+ ArchiveIcon: ArchiveIcon,
+ ArrowForwardIcon: ArrowForwardIcon,
+ ArrowLeftIcon: ArrowLeftIcon,
+ ArrowRightIcon: ArrowRightIcon,
+ ArrowsVerticalIcon: ArrowsVerticalIcon,
+ AtIcon: AtIcon,
+ AwardIcon: AwardIcon,
+ BackspaceIcon: BackspaceIcon,
+ BadgeIcon: BadgeIcon,
+ BallFootballIcon: BallFootballIcon,
+ BallIcon: BallIcon,
+ BanknoteIcon: BanknoteIcon,
+ BellIcon: BellIcon,
+ BellOffIcon: BellOffIcon,
+ BoxIcon: BoxIcon,
+ BrightnessIcon: BrightnessIcon,
+ BulbIcon: BulbIcon,
+ CalculatorIcon: CalculatorIcon,
+ CalendarAddIcon: CalendarAddIcon,
+ CalendarIcon: CalendarIcon,
+ CalendarRemoveIcon: CalendarRemoveIcon,
+ CardsIcon: CardsIcon,
+ ChartLineIcon: ChartLineIcon,
+ ChartPieIcon: ChartPieIcon,
+ ChatIcon: ChatIcon,
+ ChatWritingIcon: ChatWritingIcon,
+ CheckmarkIcon: CheckmarkIcon,
+ ChemistryFlaskIcon: ChemistryFlaskIcon,
+ CodeIcon: CodeIcon,
+ CoinsIcon: CoinsIcon,
+ ColorPaletteIcon: ColorPaletteIcon,
+ CompassIcon: CompassIcon,
+ ConstructionWorkerIcon: ConstructionWorkerIcon,
+ ContactsIcon: ContactsIcon,
+ CropIcon: CropIcon,
+ CrossIcon: CrossIcon,
+ CrossCircleIcon: CrossCircleIcon,
+ CubeIcon: CubeIcon,
+ CupIcon: CupIcon,
+ CursorIcon: CursorIcon,
+ DiamondIcon: DiamondIcon,
+ DiaryIcon: DiaryIcon,
+ DiceIcon: DiceIcon,
+ DigIcon: DigIcon,
+ DislikeIcon: DislikeIcon,
+ DisplayIcon: DisplayIcon,
+ DocumentIcon: DocumentIcon,
+ DocumentAddIcon: DocumentAddIcon,
+ DocumentDeleteIcon: DocumentDeleteIcon,
+ DocumentEditIcon: DocumentEditIcon,
+ DollarIcon: DollarIcon,
+ DotsHorizontalIcon: DotsHorizontalIcon,
+ DotsVerticalIcon: DotsVerticalIcon,
+ DownloadIcon: DownloadIcon,
+ DropIcon: DropIcon,
+ DumbbelIcon: DumbbelIcon,
+ EarthIcon: EarthIcon,
+ EditIcon: EditIcon,
+ EncyclopediaIcon: EncyclopediaIcon,
+ ExitIcon: ExitIcon,
+ EyeIcon: EyeIcon,
+ FeedbackIcon: FeedbackIcon,
+ FilterIcon: FilterIcon,
+ FingerprintIcon: FingerprintIcon,
+ FireIcon: FireIcon,
+ FlagIcon: FlagIcon,
+ FlashIcon: FlashIcon,
+ FlashlightIcon: FlashlightIcon,
+ FolderLockIcon: FolderLockIcon,
+ FrameIcon: FrameIcon,
+ FullScreenIcon: FullScreenIcon,
+ GameControllerIcon: GameControllerIcon,
+ GiftIcon: GiftIcon,
+ GlassesIcon: GlassesIcon,
+ HamburgerIcon: HamburgerIcon,
+ HandIcon: HandIcon,
+ HomeIcon: HomeIcon,
+ ImageIcon: ImageIcon,
+ ImageEditIcon: ImageEditIcon,
+ LineIcon: LineIcon,
+ LineDashedIcon: LineDashedIcon,
+ LineDottedIcon: LineDottedIcon,
+ LineDiagonalIcon: LineDiagonalIcon,
+ MoveIcon: MoveIcon,
+ ParagraphIcon: ParagraphIcon,
+ PhoneHandsetIcon: PhoneHandsetIcon,
+ PlusCircleIcon: PlusCircleIcon,
+ PlusIcon: PlusIcon,
+ PointerIcon: PointerIcon,
+ SaveIcon: SaveIcon,
+ SettingsIcon: SettingsIcon,
+ TableIcon: TableIcon,
+ TrashIcon: TrashIcon,
+ UserIcon: UserIcon,
+};
diff --git a/src/common/helpers/icons.ts b/src/common/helpers/icons.ts
deleted file mode 100644
index 7fbd44b..0000000
--- a/src/common/helpers/icons.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
-import CropIcon from '@stories/icons/Mono/CropIcon.vue';
-import type { Component } from 'vue';
-
-export const iconsSet: Record<string, Component> = {
- CrossCircleIcon: CrossCircleIcon,
- CropIcon: CropIcon,
-};
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index 8cbf8a9..ffde71b 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -1,3 +1,5 @@
+import type { iconsSet } from '@/common/constants/icons';
+
export type TThemeColor =
| 'white'
| 'slate'
@@ -14,3 +16,5 @@ export type TThemeColor =
| 'rose'
| 'red'
| 'black';
+
+export type TIcons = keyof typeof iconsSet;
diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/stories/components/Divider/Divider.stories.ts
new file mode 100644
index 0000000..aa8f212
--- /dev/null
+++ b/src/stories/components/Divider/Divider.stories.ts
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Divider from './Divider.vue';
+
+const meta: Meta = {
+ title: 'Components/Divider',
+ component: Divider,
+ tags: ['autodocs'],
+ argTypes: {
+ height: { control: 'number' },
+ type: { control: 'select', options: ['solid', 'dashed', 'dotted'] },
+ color: {
+ control: 'select',
+ options: [
+ 'white',
+ 'slate',
+ 'blue',
+ 'sky',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {
+ // primary: false,
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+ // onClick: fn(),
+ },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+ args: {},
+};
+
+export const RedDashed: Story = {
+ args: {
+ height: 2,
+ color: 'red',
+ type: 'dashed',
+ },
+};
diff --git a/src/stories/components/Divider/Divider.vue b/src/stories/components/Divider/Divider.vue
index ed05734..32f230a 100644
--- a/src/stories/components/Divider/Divider.vue
+++ b/src/stories/components/Divider/Divider.vue
@@ -1,13 +1,23 @@
<script setup lang="ts">
+import { computed } from 'vue';
+import type { TThemeColor } from '@interfaces/common';
+import { convert500ThemeToColor } from '@helpers/colors';
+
interface Props {
height?: number;
type?: 'solid' | 'dashed' | 'dotted';
+ color?: TThemeColor;
}
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+ height: 1,
+ type: 'solid',
+ color: 'black',
+});
+const colorConverted = computed(() => convert500ThemeToColor(props.color));
</script>
<template>
- <div :style="`border-bottom: ${height ?? 1}px ${type ?? 'solid'} #6b7280`" class="w-full"></div>
+ <div :style="`border-bottom: ${height}px ${type} ${colorConverted}`" class="w-full"></div>
</template>
<style scoped></style>
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/stories/components/Drawer/Drawer.stories.ts
index d86ecef..1cc0506 100644
--- a/src/stories/components/Drawer/Drawer.stories.ts
+++ b/src/stories/components/Drawer/Drawer.stories.ts
@@ -1,12 +1,24 @@
import type { Meta, StoryObj } from '@storybook/vue3';
import Drawer from './Drawer.vue';
+import { iconsSet } from '@/common/constants/icons';
const meta: Meta = {
title: 'Components/Drawer',
component: Drawer,
tags: ['autodocs'],
argTypes: {
+ visible: { control: 'boolean' },
+ position: { control: 'select', options: ['left', 'right', 'top', 'bottom'] },
+ width: { control: 'number' },
+ header: { control: 'text' },
+ default: { control: 'text' },
+ footer: { control: 'text' },
+ isModal: { control: 'boolean' },
+ isDismissible: { control: 'boolean' },
+ closeIcon: { control: 'select', options: Object.keys(iconsSet) },
+ isHeaderDivider: { control: 'boolean' },
+ isFooterDivider: { control: 'boolean' },
theme: {
control: 'select',
options: [
@@ -27,11 +39,6 @@ const meta: Meta = {
'black',
],
},
- visible: { control: 'boolean' },
- width: { control: 'number' },
- header: { control: 'text' },
- default: { control: 'text' },
- footer: { control: 'text' },
},
args: {
// primary: false,
@@ -51,5 +58,24 @@ type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
visible: true,
+ default: 'Какой-то текÑÑ‚.',
+ },
+};
+
+export const BlackFull: Story = {
+ args: {
+ visible: true,
+ width: 200,
+ theme: 'black',
+ closeIcon: 'CrossIcon',
+ header: 'Drawer',
+ footer: 'The end.',
+ isHeaderDivider: true,
+ isFooterDivider: true,
+
+ default:
+ ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta dolorum eaque explicabo illo. Beatae et eveniet itaque libero sint. Atque blanditiis consequuntur dolorum explicabo, facilis iste nulla numquam provident.',
+
+ isModal: true,
},
};
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/stories/components/Drawer/Drawer.vue
index ddd4d21..01c5691 100644
--- a/src/stories/components/Drawer/Drawer.vue
+++ b/src/stories/components/Drawer/Drawer.vue
@@ -1,20 +1,30 @@
<script setup lang="ts">
-import { convert500ThemeToColor, convert300ThemeToColor } from '@helpers/colors';
-import type { TThemeColor } from '@interfaces/common';
import { computed } from 'vue';
-import { iconsSet } from '@helpers/icons';
+import { iconsSet } from '@/common/constants/icons';
+import { convert500ThemeToColor, convert300ThemeToColor } from '@helpers/colors';
+import type { TIcons, TThemeColor } from '@interfaces/common';
const props = withDefaults(
defineProps<{
+ position: 'left' | 'right' | 'top' | 'bottom';
width?: string | number;
theme?: TThemeColor;
- closeIcon?: string;
+ isModal?: boolean;
+ isDismissible?: boolean;
+ closeIcon?: TIcons;
+ isHeaderDivider?: boolean;
+ isFooterDivider?: boolean;
}>(),
{
visible: false,
+ position: 'left',
width: 400,
+ isModal: true,
+ isDismissible: true,
theme: 'white',
- closeIcon: 'CrossCircleIcon',
+ closeIcon: 'CrossIcon',
+ isHeaderDivider: false,
+ isFooterDivider: false,
},
);
const emit = defineEmits(['onClose']);
@@ -27,28 +37,33 @@ const textColor = computed(() => {
return 'white';
});
const drawerWidth = computed(() => {
- if (+props.width < 100) return '100px';
+ if (+props.width < 200) return '200px';
return `${props.width}px`;
});
</script>
-
<template>
<article>
<section
+ v-if="isModal"
:class="[
'drawerBackground',
{
drawerBackgroundOpened: visible,
},
]"
- @click.prevent="visible = false"
+ @click.prevent="isDismissible ? (visible = false) : false"
></section>
<section
:style="`color: ${textColor}; background-color: ${themeColor}`"
:class="[
'drawer',
{
+ drawerLeft: position === 'left',
+ drawerRight: position === 'right',
+ drawerTop: position === 'top',
+ drawerBottom: position === 'bottom',
drawerOpened: visible,
+ drawerVertical: position === 'top' || position === 'bottom',
},
]"
>
@@ -66,11 +81,12 @@ const drawerWidth = computed(() => {
<component :is="iconsSet[closeIcon]" :color="textColor" />
</button>
</header>
+ <div v-if="isHeaderDivider" class="divider divider-header"></div>
<div class="main">
<slot />
</div>
<div v-if="$slots.footer">
- <div class="divider"></div>
+ <div v-if="isFooterDivider" class="divider"></div>
<footer class="drawerFooter">
<slot name="footer" />
</footer>
@@ -98,47 +114,76 @@ const drawerWidth = computed(() => {
.drawer {
width: v-bind(drawerWidth);
position: fixed;
- top: 0;
- left: 0;
z-index: 31;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
- transform: translateX(-100%);
transition: transform ease-out 0.2s;
- border-right: 2px solid gray;
+ border-right: 2px solid #b1b1b1;
+}
+.drawerVertical {
+ width: 100vw !important;
+ height: v-bind(drawerWidth) !important;
}
.drawerOpened {
- transform: translateX(0);
+ transform: translateX(0) !important;
+}
+.drawerLeft {
+ transform: translateX(-100%);
+ top: 0;
+ left: 0;
+}
+.drawerRight {
+ transform: translateX(100%);
+ top: 0;
+ right: 0;
+}
+.drawerTop {
+ transform: translateY(-100%);
+ top: 0;
+ left: 0;
+}
+.drawerBottom {
+ transform: translateY(100%);
+ bottom: 0;
+ left: 0;
}
.drawerHeader {
font-weight: bold;
- font-size: 2rem;
- padding-right: 50px;
+ font-size: 32px;
+ width: calc(100% - 30px);
margin-bottom: 10px;
- min-height: 1rem;
+ height: 37px;
overflow: auto;
}
.main {
flex: 1 1 auto;
overflow: auto;
- padding: 10px;
+ margin: 10px;
}
.drawerFooter {
- overflow: auto;
padding: 10px 10px 0 10px;
+ overflow: auto;
}
.divider {
height: 2px;
background-color: v-bind(scrollColor);
}
+.divider-header {
+ position: absolute;
+ left: 20px;
+ top: 65px;
+ width: calc(100% - 40px);
+}
.buttonClose {
position: absolute;
- top: 20px;
+ top: 25px;
right: 20px;
width: 30px;
+ display: flex;
+ align-items: center;
}
::-webkit-scrollbar {
width: 8px;
--
GitLab