Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated demo pages

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-30 00:13:31 +03:00
parent 20eedb4b2b
commit 72ef6a60b6
52 changed files with 514 additions and 1794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/demo/images/access/logo-orange.svg
View File

@@ -1,16 +0,0 @@
<svg width="82" height="61" viewBox="0 0 82 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1404_1719)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2459 29.411C26.2351 29.646 26.2297 29.8824 26.2297 30.1202C26.2297 38.5664 33.0807 45.4135 41.5321 45.4135C49.9833 45.4135 56.8344 38.5664 56.8344 30.1202C56.8344 29.8768 56.8288 29.6348 56.8176 29.3943C58.3428 29.1611 59.8641 28.893 61.3802 28.5901L61.5392 28.5583C61.5789 29.0737 61.5991 29.5945 61.5991 30.1202C61.5991 41.1964 52.6148 50.1754 41.5321 50.1754C30.4493 50.1754 21.465 41.1964 21.465 30.1202C21.465 29.602 21.4846 29.0883 21.5233 28.5801L21.5732 28.5901C23.1257 28.9003 24.6837 29.174 26.2459 29.411ZM50.4928 17.7217C47.9742 15.9003 44.8785 14.8267 41.5321 14.8267C38.1795 14.8267 35.0789 15.9042 32.5578 17.7315C30.512 17.5258 28.4716 17.2491 26.4403 16.9016C30.1182 12.7106 35.516 10.0648 41.5321 10.0648C47.5402 10.0648 52.9317 12.7037 56.6093 16.885C54.5784 17.2348 52.5383 17.5138 50.4928 17.7217ZM66.2393 27.6187C66.3217 28.4414 66.3638 29.2759 66.3638 30.1202C66.3638 43.8263 55.2463 54.9373 41.5321 54.9373C27.8178 54.9373 16.7003 43.8263 16.7003 30.1202C16.7003 29.2832 16.7417 28.4561 16.8226 27.6404L12.131 26.7026C12.0019 27.824 11.9355 28.9643 11.9355 30.1202C11.9355 46.4563 25.1864 59.6992 41.5321 59.6992C57.8778 59.6992 71.1285 46.4563 71.1285 30.1202C71.1285 28.9568 71.0614 27.8093 70.9307 26.681L66.2393 27.6187ZM66.8921 14.8622L61.8629 15.8674C57.3703 9.47833 49.9391 5.30292 41.5321 5.30292C33.1165 5.30292 25.6787 9.48679 21.1876 15.8868L16.16 14.8819C21.3382 6.28869 30.7636 0.541016 41.5321 0.541016C52.2923 0.541016 61.7115 6.27988 66.8921 14.8622Z" fill="#F57C00"/>
<mask id="mask0_1404_1719" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="13" width="82" height="16">
<path d="M41 28.0889C16.2672 29.3327 0.5 13.8744 0.5 13.8744C0.5 13.8744 25.2765 22.4209 41 22.4209C56.7235 22.4209 81.5 13.8744 81.5 13.8744C81.5 13.8744 65.7328 26.8451 41 28.0889Z" fill="white"/>
</mask>
<g mask="url(#mask0_1404_1719)">
<path d="M0.500296 13.8744L6.09662 -2.3304L-11.5117 26.112L0.500296 13.8744ZM41.0003 28.0889L40.1383 10.9677L41.0003 28.0889ZM81.5003 13.8744L92.4014 27.1101L75.904 -2.3304L81.5003 13.8744ZM0.500296 13.8744C-11.5117 26.112 -11.5067 26.1169 -11.5016 26.1218C-11.4999 26.1236 -11.4948 26.1286 -11.4912 26.1321C-11.4841 26.1391 -11.4767 26.1462 -11.4691 26.1536C-11.4539 26.1685 -11.4376 26.1843 -11.4202 26.2011C-11.3856 26.2346 -11.3468 26.2719 -11.3038 26.313C-11.2179 26.3951 -11.1153 26.4919 -10.9962 26.6026C-10.7581 26.8237 -10.4537 27.1005 -10.0843 27.4242C-9.34664 28.0709 -8.34457 28.9099 -7.09097 29.8713C-4.59368 31.7861 -1.03827 34.2319 3.47055 36.6096C12.4685 41.3548 25.6588 46.025 41.8623 45.2101L40.1383 10.9677C31.609 11.3966 24.5493 8.95957 19.4804 6.28647C16.9559 4.95512 15.0237 3.61409 13.7917 2.66943C13.1807 2.20091 12.7577 1.84202 12.5365 1.64815C12.4264 1.55161 12.368 1.49747 12.363 1.49285C12.3606 1.49058 12.3717 1.50081 12.3964 1.52446C12.4088 1.53629 12.4246 1.55149 12.4439 1.57017C12.4536 1.5795 12.4641 1.58972 12.4754 1.60081C12.4811 1.60636 12.4871 1.61213 12.4932 1.61813C12.4963 1.62112 12.5011 1.62579 12.5026 1.62728C12.5074 1.632 12.5123 1.63678 0.500296 13.8744ZM41.8623 45.2101C57.0359 44.4471 69.4127 40.0936 77.9907 35.9492C82.2948 33.8697 85.71 31.8109 88.1282 30.2087C89.34 29.4057 90.3099 28.7119 91.0245 28.1796C91.3821 27.9134 91.6766 27.6868 91.9064 27.5066C92.0213 27.4165 92.1202 27.3378 92.2027 27.2715C92.2439 27.2383 92.2812 27.2082 92.3143 27.1814C92.3309 27.1678 92.3464 27.1552 92.3609 27.1433C92.3681 27.1374 92.3752 27.1316 92.3819 27.1261C92.3853 27.1234 92.3901 27.1194 92.3918 27.1179C92.3966 27.114 92.4014 27.1101 81.5003 13.8744C70.5992 0.638688 70.6039 0.63489 70.6085 0.631143C70.6099 0.629959 70.6144 0.626256 70.6172 0.623886C70.623 0.619143 70.6286 0.61459 70.6339 0.610227C70.6446 0.601501 70.6544 0.59353 70.6633 0.586305C70.6811 0.571855 70.6953 0.560381 70.7059 0.551796C70.7273 0.53463 70.7345 0.528983 70.728 0.53415C70.7147 0.544532 70.6464 0.597905 70.5245 0.688674C70.2802 0.870619 69.8251 1.19985 69.1722 1.63239C67.8611 2.50105 65.7889 3.76259 63.0595 5.08126C57.5707 7.73313 49.6975 10.487 40.1383 10.9677L41.8623 45.2101ZM81.5003 13.8744C75.904 -2.33039 75.9054 -2.3309 75.9068 -2.33137C75.9071 -2.33148 75.9083 -2.33192 75.909 -2.33215C75.9103 -2.33261 75.9113 -2.33293 75.9119 -2.33313C75.9131 -2.33354 75.9128 -2.33343 75.911 -2.33282C75.9075 -2.33162 75.8981 -2.32842 75.8832 -2.32329C75.8531 -2.31303 75.8003 -2.29506 75.7259 -2.26989C75.5767 -2.21954 75.3411 -2.14049 75.027 -2.03683C74.3982 -1.82936 73.4584 -1.5244 72.2725 -1.15442C69.8917 -0.411748 66.5645 0.578588 62.7991 1.56456C54.8229 3.65318 46.5108 5.27805 41.0003 5.27805V39.5637C51.2133 39.5637 63.1512 36.9154 71.4941 34.7308C75.8883 33.5801 79.7379 32.4338 82.4941 31.574C83.8766 31.1428 84.9953 30.78 85.783 30.5201C86.177 30.39 86.489 30.2855 86.7106 30.2107C86.8214 30.1733 86.9097 30.1433 86.9743 30.1212C87.0067 30.1101 87.0331 30.1011 87.0536 30.094C87.0638 30.0905 87.0724 30.0876 87.0797 30.0851C87.0832 30.0838 87.0864 30.0827 87.0893 30.0817C87.0907 30.0813 87.0925 30.0806 87.0932 30.0804C87.095 30.0797 87.0966 30.0792 81.5003 13.8744ZM41.0003 5.27805C35.4898 5.27805 27.1777 3.65318 19.2015 1.56456C15.4361 0.578588 12.1089 -0.411748 9.72812 -1.15442C8.54214 -1.5244 7.60238 -1.82936 6.97362 -2.03683C6.65951 -2.14049 6.42385 -2.21954 6.27479 -2.26989C6.20028 -2.29506 6.14748 -2.31303 6.11744 -2.32329C6.10241 -2.32842 6.09308 -2.33162 6.08956 -2.33282C6.08781 -2.33343 6.0875 -2.33354 6.08867 -2.33313C6.08927 -2.33293 6.09022 -2.33261 6.09155 -2.33215C6.0922 -2.33192 6.09348 -2.33148 6.0938 -2.33137C6.09517 -2.3309 6.09662 -2.33039 0.500296 13.8744C-5.09603 30.0792 -5.09438 30.0797 -5.09265 30.0804C-5.09194 30.0806 -5.09011 30.0813 -5.08869 30.0817C-5.08586 30.0827 -5.08264 30.0838 -5.07904 30.0851C-5.07186 30.0876 -5.06315 30.0905 -5.05294 30.094C-5.03251 30.1011 -5.00607 30.1101 -4.97373 30.1212C-4.90907 30.1433 -4.82081 30.1733 -4.71002 30.2107C-4.48847 30.2855 -4.17645 30.39 -3.78237 30.5201C-2.99475 30.78 -1.87602 31.1428 -0.493517 31.574C2.26265 32.4338 6.11224 33.5801 10.5065 34.7308C18.8494 36.9154 30.7872 39.5637 41.0003 39.5637V5.27805Z" fill="#F57C00"/>
</g>
</g>
<defs>
<clipPath id="clip0_1404_1719">
<rect width="81" height="60" fill="white" transform="translate(0.5 0.541016)"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/demo/images/blocks/hero/hero-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 640 KiB

3
public/demo/images/blocks/logos/hyper.svg
View File

@@ -1,3 +0,0 @@
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.1548 9.65956L23.9913 4.86169L5.54723 14.5106L0.924465 12.0851L23.9913 0L37.801 7.23403L33.1548 9.65956ZM23.9931 19.3085L42.4255 9.65955L47.0717 12.0851L23.9931 24.1595L10.1952 16.9361L14.8297 14.5106L23.9931 19.3085ZM4.6345 25.8937L0 23.4681V37.9149L23.0669 50V45.1489L4.6345 35.4894V25.8937ZM18.4324 28.2658L0 18.6169V13.7658L23.0669 25.8403V40.2977L18.4324 37.8615V28.2658ZM38.7301 23.468V18.6169L24.9205 25.8403V49.9999L29.555 47.5743V28.2659L38.7301 23.468ZM43.3546 35.4892V16.1914L48.0008 13.7659V37.9148L34.1912 45.1488V40.2977L43.3546 35.4892Z" fill="#616161"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 724 B

16
public/demo/images/error/logo-error.svg
View File

@@ -1,16 +0,0 @@
<svg width="82" height="61" viewBox="0 0 82 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1399_1534)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2459 29.4832C26.2351 29.7181 26.2297 29.9546 26.2297 30.1923C26.2297 38.6386 33.0807 45.4856 41.5321 45.4856C49.9833 45.4856 56.8344 38.6386 56.8344 30.1923C56.8344 29.949 56.8288 29.707 56.8176 29.4664C58.3428 29.2333 59.8641 28.9652 61.3802 28.6622L61.5392 28.6304C61.5789 29.1458 61.5991 29.6667 61.5991 30.1923C61.5991 41.2685 52.6148 50.2475 41.5321 50.2475C30.4493 50.2475 21.465 41.2685 21.465 30.1923C21.465 29.6741 21.4846 29.1605 21.5233 28.6522L21.5732 28.6622C23.1257 28.9725 24.6837 29.2461 26.2459 29.4832ZM50.4928 17.7938C47.9742 15.9725 44.8785 14.8989 41.5321 14.8989C38.1795 14.8989 35.0789 15.9763 32.5578 17.8036C30.512 17.5979 28.4716 17.3213 26.4403 16.9737C30.1182 12.7828 35.516 10.137 41.5321 10.137C47.5402 10.137 52.9317 12.7758 56.6093 16.9572C54.5784 17.307 52.5383 17.5859 50.4928 17.7938ZM66.2393 27.6909C66.3217 28.5135 66.3638 29.348 66.3638 30.1923C66.3638 43.8984 55.2463 55.0094 41.5321 55.0094C27.8178 55.0094 16.7003 43.8984 16.7003 30.1923C16.7003 29.3553 16.7417 28.5282 16.8226 27.7126L12.131 26.7748C12.0019 27.8961 11.9355 29.0364 11.9355 30.1923C11.9355 46.5284 25.1864 59.7714 41.5321 59.7714C57.8778 59.7714 71.1285 46.5284 71.1285 30.1923C71.1285 29.029 71.0614 27.8814 70.9307 26.7532L66.2393 27.6909ZM66.8921 14.9343L61.8629 15.9395C57.3703 9.55047 49.9391 5.37506 41.5321 5.37506C33.1165 5.37506 25.6787 9.55893 21.1876 15.959L16.16 14.954C21.3382 6.36084 30.7636 0.613159 41.5321 0.613159C52.2923 0.613159 61.7115 6.35203 66.8921 14.9343Z" fill="#E91E63"/>
<mask id="mask0_1399_1534" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="13" width="82" height="16">
<path d="M41 28.161C16.2672 29.4048 0.5 13.9465 0.5 13.9465C0.5 13.9465 25.2765 22.493 41 22.493C56.7235 22.493 81.5 13.9465 81.5 13.9465C81.5 13.9465 65.7328 26.9173 41 28.161Z" fill="white"/>
</mask>
<g mask="url(#mask0_1399_1534)">
<path d="M0.500296 13.9465L6.09662 -2.25825L-11.5117 26.1842L0.500296 13.9465ZM41.0003 28.161L40.1383 11.0399L41.0003 28.161ZM81.5003 13.9465L92.4014 27.1823L75.904 -2.25825L81.5003 13.9465ZM0.500296 13.9465C-11.5117 26.1842 -11.5067 26.189 -11.5016 26.194C-11.4999 26.1958 -11.4948 26.2007 -11.4912 26.2043C-11.4841 26.2112 -11.4767 26.2184 -11.4691 26.2258C-11.4539 26.2406 -11.4376 26.2565 -11.4202 26.2732C-11.3856 26.3067 -11.3468 26.3441 -11.3038 26.3851C-11.2179 26.4672 -11.1153 26.5641 -10.9962 26.6747C-10.7581 26.8959 -10.4537 27.1726 -10.0843 27.4964C-9.34664 28.143 -8.34457 28.9821 -7.09097 29.9434C-4.59368 31.8583 -1.03827 34.3041 3.47055 36.6818C12.4685 41.4269 25.6588 46.0971 41.8623 45.2823L40.1383 11.0399C31.609 11.4687 24.5493 9.03171 19.4804 6.35861C16.9559 5.02726 15.0237 3.68623 13.7917 2.74158C13.1807 2.27305 12.7577 1.91417 12.5365 1.72029C12.4264 1.62376 12.368 1.56961 12.363 1.56499C12.3606 1.56272 12.3717 1.57296 12.3964 1.59661C12.4088 1.60843 12.4246 1.62363 12.4439 1.64231C12.4536 1.65164 12.4641 1.66186 12.4754 1.67296C12.4811 1.6785 12.4871 1.68427 12.4932 1.69027C12.4963 1.69326 12.5011 1.69793 12.5026 1.69942C12.5074 1.70415 12.5123 1.70892 0.500296 13.9465ZM41.8623 45.2823C57.0359 44.5192 69.4127 40.1658 77.9907 36.0213C82.2948 33.9419 85.71 31.883 88.1282 30.2808C89.34 29.4779 90.3099 28.7841 91.0245 28.2518C91.3821 27.9855 91.6766 27.7589 91.9064 27.5787C92.0213 27.4886 92.1202 27.41 92.2027 27.3437C92.2439 27.3105 92.2812 27.2804 92.3143 27.2535C92.3309 27.24 92.3464 27.2273 92.3609 27.2154C92.3681 27.2095 92.3752 27.2038 92.3819 27.1983C92.3853 27.1955 92.3901 27.1915 92.3918 27.1901C92.3966 27.1862 92.4014 27.1823 81.5003 13.9465C70.5992 0.710831 70.6039 0.707034 70.6085 0.703287C70.6099 0.702102 70.6144 0.6984 70.6172 0.696029C70.623 0.691287 70.6286 0.686734 70.6339 0.682371C70.6446 0.673644 70.6544 0.665674 70.6633 0.658449C70.6811 0.643999 70.6953 0.632525 70.7059 0.623939C70.7273 0.606773 70.7345 0.601126 70.728 0.606294C70.7147 0.616676 70.6464 0.670049 70.5245 0.760818C70.2802 0.942763 69.8251 1.27199 69.1722 1.70453C67.8611 2.5732 65.7889 3.83473 63.0595 5.15341C57.5707 7.80527 49.6975 10.5591 40.1383 11.0399L41.8623 45.2823ZM81.5003 13.9465C75.904 -2.25825 75.9054 -2.25876 75.9068 -2.25922C75.9071 -2.25934 75.9083 -2.25978 75.909 -2.26C75.9103 -2.26046 75.9113 -2.26079 75.9119 -2.26099C75.9131 -2.26139 75.9128 -2.26129 75.911 -2.26068C75.9075 -2.25948 75.8981 -2.25628 75.8832 -2.25115C75.8531 -2.24089 75.8003 -2.22292 75.7259 -2.19775C75.5767 -2.14739 75.3411 -2.06835 75.027 -1.96469C74.3982 -1.75721 73.4584 -1.45225 72.2725 -1.08228C69.8917 -0.339604 66.5645 0.650732 62.7991 1.6367C54.8229 3.72532 46.5108 5.3502 41.0003 5.3502V39.6359C51.2133 39.6359 63.1512 36.9875 71.4941 34.8029C75.8883 33.6523 79.7379 32.506 82.4941 31.6462C83.8766 31.2149 84.9953 30.8522 85.783 30.5923C86.177 30.4622 86.489 30.3577 86.7106 30.2828C86.8214 30.2454 86.9097 30.2154 86.9743 30.1933C87.0067 30.1823 87.0331 30.1732 87.0536 30.1662C87.0638 30.1626 87.0724 30.1597 87.0797 30.1572C87.0832 30.156 87.0864 30.1548 87.0893 30.1539C87.0907 30.1534 87.0925 30.1527 87.0932 30.1525C87.095 30.1519 87.0966 30.1513 81.5003 13.9465ZM41.0003 5.3502C35.4898 5.3502 27.1777 3.72532 19.2015 1.6367C15.4361 0.650732 12.1089 -0.339604 9.72812 -1.08228C8.54214 -1.45225 7.60238 -1.75721 6.97362 -1.96469C6.65951 -2.06835 6.42385 -2.14739 6.27479 -2.19775C6.20028 -2.22292 6.14748 -2.24089 6.11744 -2.25115C6.10241 -2.25628 6.09308 -2.25948 6.08956 -2.26068C6.08781 -2.26129 6.0875 -2.26139 6.08867 -2.26099C6.08927 -2.26079 6.09022 -2.26046 6.09155 -2.26C6.0922 -2.25978 6.09348 -2.25934 6.0938 -2.25922C6.09517 -2.25876 6.09662 -2.25825 0.500296 13.9465C-5.09603 30.1513 -5.09438 30.1519 -5.09265 30.1525C-5.09194 30.1527 -5.09011 30.1534 -5.08869 30.1539C-5.08586 30.1548 -5.08264 30.156 -5.07904 30.1572C-5.07186 30.1597 -5.06315 30.1626 -5.05294 30.1662C-5.03251 30.1732 -5.00607 30.1823 -4.97373 30.1933C-4.90907 30.2154 -4.82081 30.2454 -4.71002 30.2828C-4.48847 30.3577 -4.17645 30.4622 -3.78237 30.5923C-2.99475 30.8522 -1.87602 31.2149 -0.493517 31.6462C2.26265 32.506 6.11224 33.6523 10.5065 34.8029C18.8494 36.9875 30.7872 39.6359 41.0003 39.6359V5.3502Z" fill="#E91E63"/>
</g>
</g>
<defs>
<clipPath id="clip0_1399_1534">
<rect width="81" height="60" fill="white" transform="translate(0.5 0.613159)"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/demo/images/login/avatar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

9
public/demo/images/notfound/logo-blue.svg
View File

@@ -1,9 +0,0 @@
<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z" fill="#2196F3"/>
<mask id="mask0_1413_1551" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="white"/>
</mask>
<g mask="url(#mask0_1413_1551)">
<path d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z" fill="#2196F3"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.1 KiB

12
src/assets/layout/_content.scss
View File

@@ -1,12 +0,0 @@
.layout-main-container {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: space-between;
padding: 6rem 2rem 2rem 4rem;
transition: margin-left var(--layout-section-transition-duration);
}
.layout-main {
flex: 1 1 auto;
}

23
src/assets/layout/_core.scss Normal file
View File

@@ -0,0 +1,23 @@
html {
height: 100%;
font-size: 14px;
}
body {
font-family: 'CircularStd', sans-serif;
color: var(--text-color);
background-color: var(--surface-ground);
margin: 0;
padding: 0;
min-height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
.layout-wrapper {
min-height: 100vh;
}

4
src/assets/layout/_footer.scss
View File

@@ -1,8 +1,8 @@
.layout-footer { .layout-footer {
transition: margin-left var(--layout-section-transition-duration);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: 1rem; padding: 1rem 0 1rem 0;
gap: 0.5rem;
border-top: 1px solid var(--surface-border); border-top: 1px solid var(--surface-border);
} }

32
src/assets/layout/_main.scss
View File

@@ -1,23 +1,13 @@
html { .layout-main-container {
height: 100%; display: flex;
font-size: 14px; flex-direction: column;
}
body {
font-family: 'CircularStd', sans-serif;
color: var(--text-color);
background-color: var(--surface-ground);
margin: 0;
padding: 0;
min-height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
.layout-wrapper {
min-height: 100vh; min-height: 100vh;
justify-content: space-between;
padding: 6rem 2rem 0 2rem;
transition: margin-left var(--layout-section-transition-duration);
}
.layout-main {
flex: 1 1 auto;
padding-bottom: 2rem;
} }

4
src/assets/layout/_menu.scss
View File

@@ -1,7 +1,7 @@
.layout-sidebar { .layout-sidebar {
position: fixed; position: fixed;
width: 300px; width: 20rem;
height: calc(100vh - 9rem); height: calc(100vh - 8rem);
z-index: 999; z-index: 999;
overflow-y: auto; overflow-y: auto;
user-select: none; user-select: none;

2
src/assets/layout/_responsive.scss
View File

@@ -37,7 +37,7 @@
&.layout-static { &.layout-static {
.layout-main-container { .layout-main-container {
margin-left: 300px; margin-left: 22rem;
} }
&.layout-static-inactive { &.layout-static-inactive {

22
src/assets/layout/_topbar.scss
View File

@@ -12,7 +12,7 @@
align-items: center; align-items: center;
.layout-topbar-logo-container { .layout-topbar-logo-container {
width: 300px; width: 20rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@@ -130,6 +130,7 @@
right: 2rem; right: 2rem;
top: 4rem; top: 4rem;
min-width: 15rem; min-width: 15rem;
border: 1px solid var(--surface-border);
.layout-topbar-menu-content { .layout-topbar-menu-content {
gap: 0.5rem; gap: 0.5rem;
@@ -162,25 +163,6 @@
} }
.config-panel { .config-panel {
position: absolute;
top: 3.25rem;
right: 0;
width: 16rem;
padding: 0.75rem;
background-color: var(--surface-overlay);
border-radius: 6px;
border: 1px solid var(--surface-border);
transform-origin: top;
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
.config-panel-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.config-panel-label { .config-panel-label {
font-size: 0.875rem; font-size: 0.875rem;
color: var(--text-secondary-color); color: var(--text-secondary-color);

2
src/assets/layout/layout.scss
View File

@@ -3,10 +3,10 @@
@import './variables/_dark'; @import './variables/_dark';
@import './_mixins'; @import './_mixins';
@import './_preloading'; @import './_preloading';
@import './_core';
@import './_main'; @import './_main';
@import './_topbar'; @import './_topbar';
@import './_menu'; @import './_menu';
@import './_content';
@import './_footer'; @import './_footer';
@import './_responsive'; @import './_responsive';
@import './_utils'; @import './_utils';

212
src/components/BlockViewer.vue
View File

@@ -1,212 +0,0 @@
<script setup>
import { ref, reactive } from 'vue';
const props = defineProps({
header: {
type: String,
default: null
},
code: null,
recent: {
type: Boolean,
default: false
},
free: {
type: Boolean,
default: false
},
containerClass: null,
previewStyle: null
});
const BlockView = reactive({
PREVIEW: 0,
CODE: 1
});
const blockView = ref(0);
function activateView(event, blockViewValue) {
blockView.value = blockViewValue;
event.preventDefault();
}
async function copyCode(event) {
await navigator.clipboard.writeText(props.code);
event.preventDefault();
}
</script>
<template>
<div class="block-section">
<div class="block-header">
<span class="block-title">
<span>{{ header }}</span>
<span class="badge-new" v-if="recent">New</span>
<span class="badge-free" v-if="free">Free</span>
</span>
<div class="block-actions">
<a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }" @click="activateView($event, BlockView.CODE)">
<span>Code</span>
</a>
<a :tabindex="0" class="block-action-copy" @click="copyCode($event)" v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
</div>
</div>
<div class="block-content">
<div :class="containerClass" :style="previewStyle" v-if="blockView == BlockView.PREVIEW">
<slot></slot>
</div>
<div v-if="blockView === BlockView.CODE">
<pre class="app-code"><code>{{code}}</code></pre>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.block-section {
margin-bottom: 4rem;
overflow: hidden;
}
.block-header {
padding: 1rem 2rem;
background-color: var(--surface-section);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border: 1px solid var(--surface-d);
display: flex;
align-items: center;
justify-content: space-between;
.block-title {
font-weight: 700;
display: inline-flex;
align-items: center;
.badge-free {
border-radius: 4px;
padding: 0.25rem 0.5rem;
background-color: var(--orange-500);
color: white;
margin-left: 1rem;
font-weight: 700;
font-size: 0.875rem;
}
}
.block-actions {
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
margin-left: 1rem;
a {
display: flex;
align-items: center;
margin-right: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: 600;
border: 1px solid transparent;
transition: background-color 0.2s;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&:not(.block-action-disabled):hover {
background-color: var(--surface-c);
}
&.block-action-active {
border-color: var(--primary-color);
color: var(--primary-color);
}
&.block-action-copy {
i {
color: var(--primary-color);
font-size: 1.25rem;
}
}
&.block-action-disabled {
opacity: 0.6;
cursor: auto !important;
}
i {
margin-right: 0.5rem;
}
}
}
}
.block-content {
padding: 0;
border: 1px solid var(--surface-d);
border-top: 0 none;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
overflow: hidden;
}
pre[class*='language-'] {
margin: 0 !important;
&:before,
&:after {
display: none !important;
}
code {
border-left: 0 none !important;
box-shadow: none !important;
background: var(--surface-e) !important;
margin: 0;
color: var(--text-color);
font-size: 14px;
padding: 0 2rem !important;
.token {
&.tag,
&.keyword {
color: #2196f3 !important;
}
&.attr-name,
&.attr-string {
color: #2196f3 !important;
}
&.attr-value {
color: #4caf50 !important;
}
&.punctuation {
color: var(--text-color);
}
&.operator,
&.string {
background: transparent;
}
}
}
}
@media screen and (max-width: 575px) {
.block-header {
flex-direction: column;
align-items: start;
.block-actions {
margin-top: 1rem;
margin-left: 0;
}
}
}
</style>

57
src/layout/AppConfigurator.vue
View File

@@ -6,18 +6,22 @@ import Lara from '@primevue/themes/lara';
import Nora from '@primevue/themes/nora'; import Nora from '@primevue/themes/nora';
import { ref } from 'vue'; import { ref } from 'vue';
const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme } = useLayout(); const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme, setMenuMode } = useLayout();
const preset = ref(layoutConfig.preset);
const presets = { const presets = {
Aura, Aura,
Lara, Lara,
Nora Nora
}; };
const preset = ref(layoutConfig.preset);
const presetOptions = ref(Object.keys(presets)); const presetOptions = ref(Object.keys(presets));
const menuMode = ref(layoutConfig.menuMode);
const menuModeOptions = ref([
{ label: 'Static', value: 'static' },
{ label: 'Overlay', value: 'overlay' }
]);
const primaryColors = ref([ const primaryColors = ref([
{ name: 'noir', palette: {} }, { name: 'noir', palette: {} },
{ name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } }, { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
@@ -219,49 +223,62 @@ function applyTheme(type, color) {
} }
} }
function onPresetChange(value) { function onPresetChange() {
setPreset(value); setPreset(preset.value);
const presetValue = presets[value]; const presetValue = presets[preset.value];
const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface)?.palette; const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface)?.palette;
$t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true }); $t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
} }
function onMenuModeChange() {
setMenuMode(menuMode.value);
}
</script> </script>
<template> <template>
<div class="config-panel hidden"> <div
<div class="config-panel-content"> class="config-panel hidden absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
<div class="config-panel-colors"> >
<span class="config-panel-label">Primary</span> <div class="flex flex-col gap-4">
<div> <div>
<span class="text-sm text-muted-color font-semibold">Primary</span>
<div class="pt-2 flex gap-2 flex-wrap justify-between">
<button <button
v-for="primaryColor of primaryColors" v-for="primaryColor of primaryColors"
:key="primaryColor.name" :key="primaryColor.name"
type="button" type="button"
:title="primaryColor.name" :title="primaryColor.name"
@click="updateColors('primary', primaryColor)" @click="updateColors('primary', primaryColor)"
:class="{ 'active-color': layoutConfig.primary === primaryColor.name }" :class="['border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1', { 'outline-primary': layoutConfig.primary === primaryColor.name }]"
:style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }" :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
></button> ></button>
</div> </div>
</div> </div>
<div class="config-panel-colors"> <div>
<span class="config-panel-label">Surface</span> <span class="text-sm text-muted-color font-semibold">Surface</span>
<div> <div class="pt-2 flex gap-2 flex-wrap justify-between">
<button <button
v-for="surface of surfaces" v-for="surface of surfaces"
:key="surface.name" :key="surface.name"
type="button" type="button"
:title="surface.name" :title="surface.name"
@click="updateColors('surface', surface)" @click="updateColors('surface', surface)"
:class="{ 'active-color': layoutConfig.surface ? layoutConfig.surface === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }" :class="[
'border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1',
{ 'outline-primary': layoutConfig.surface ? layoutConfig.surface === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }
]"
:style="{ backgroundColor: `${surface.palette['500']}` }" :style="{ backgroundColor: `${surface.palette['500']}` }"
></button> ></button>
</div> </div>
</div> </div>
<div class="config-panel-settings"> <div class="flex flex-col gap-2">
<span class="config-panel-label">Presets</span> <span class="text-sm text-muted-color font-semibold">Presets</span>
<SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" /> <SelectButton v-model="preset" @change="onPresetChange" :options="presetOptions" :allowEmpty="false" />
</div>
<div class="flex flex-col gap-2">
<span class="text-sm text-muted-color font-semibold">Menu Mode</span>
<SelectButton v-model="menuMode" @change="onMenuModeChange" :options="menuModeOptions" :allowEmpty="false" optionLabel="label" optionValue="value" />
</div> </div>
</div> </div>
</div> </div>

17
src/layout/AppFooter.vue
View File

@@ -1,19 +1,8 @@
<script setup> <script setup></script>
import { useLayout } from '@/layout/composables/layout';
import { computed } from 'vue';
const { isDarkTheme } = useLayout();
const logoUrl = computed(() => {
return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>
<template> <template>
<div class="layout-footer"> <div class="layout-footer">
<img :src="logoUrl" alt="Logo" height="20" class="mr-2" /> SAKAI by
by <span class="font-medium">PrimeVue</span>
<span class="font-medium ml-2">PrimeVue</span>
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

8
src/layout/AppLayout.vue
View File

@@ -19,8 +19,6 @@ watch(isSidebarActive, (newVal) => {
const containerClass = computed(() => { const containerClass = computed(() => {
return { return {
'layout-theme-light': !layoutConfig.darkTheme,
'layout-theme-dark': layoutConfig.darkTheme,
'layout-overlay': layoutConfig.menuMode === 'overlay', 'layout-overlay': layoutConfig.menuMode === 'overlay',
'layout-static': layoutConfig.menuMode === 'static', 'layout-static': layoutConfig.menuMode === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static', 'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
@@ -55,9 +53,7 @@ const isOutsideClicked = (event) => {
<template> <template>
<div class="layout-wrapper" :class="containerClass"> <div class="layout-wrapper" :class="containerClass">
<app-topbar></app-topbar> <app-topbar></app-topbar>
<div class="layout-sidebar"> <app-sidebar></app-sidebar>
<app-sidebar></app-sidebar>
</div>
<div class="layout-main-container"> <div class="layout-main-container">
<div class="layout-main"> <div class="layout-main">
<router-view></router-view> <router-view></router-view>
@@ -68,5 +64,3 @@ const isOutsideClicked = (event) => {
</div> </div>
<Toast /> <Toast />
</template> </template>
<style lang="scss" scoped></style>

13
src/layout/AppMenu.vue
View File

@@ -24,16 +24,10 @@ const model = ref([
{ label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' }, { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' },
{ label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' }, { label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' },
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' }, { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' },
{ label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/uikit/timeline' },
{ label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' } { label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
] ]
}, },
{
label: 'Utilities',
items: [
{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/utilities/icons' },
{ label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: 'https://www.primefaces.org/primeflex/', target: '_blank' }
]
},
{ {
label: 'Pages', label: 'Pages',
icon: 'pi pi-fw pi-briefcase', icon: 'pi pi-fw pi-briefcase',
@@ -70,11 +64,6 @@ const model = ref([
icon: 'pi pi-fw pi-pencil', icon: 'pi pi-fw pi-pencil',
to: '/pages/crud' to: '/pages/crud'
}, },
{
label: 'Timeline',
icon: 'pi pi-fw pi-calendar',
to: '/pages/timeline'
},
{ {
label: 'Not Found', label: 'Not Found',
icon: 'pi pi-fw pi-exclamation-circle', icon: 'pi pi-fw pi-exclamation-circle',

4
src/layout/AppSidebar.vue
View File

@@ -3,7 +3,9 @@ import AppMenu from './AppMenu.vue';
</script> </script>
<template> <template>
<app-menu></app-menu> <div class="layout-sidebar">
<app-menu></app-menu>
</div>
</template> </template>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

8
src/layout/composables/layout.js
View File

@@ -35,6 +35,10 @@ export function useLayout() {
layoutConfig.activeMenuItem = item.value || item; layoutConfig.activeMenuItem = item.value || item;
}; };
const setMenuMode = (mode) => {
layoutConfig.menuMode = mode;
};
const toggleDarkMode = () => { const toggleDarkMode = () => {
if (!document.startViewTransition) { if (!document.startViewTransition) {
executeDarkModeToggle(); executeDarkModeToggle();
@@ -74,5 +78,7 @@ export function useLayout() {
const getPrimary = computed(() => layoutConfig.primary); const getPrimary = computed(() => layoutConfig.primary);
return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu }; const getSurface = computed(() => layoutConfig.surface);
return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, getSurface, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu, setMenuMode };
} }

8
src/main.js
View File

@@ -2,12 +2,10 @@ import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import router from './router'; import router from './router';
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura'; import Aura from '@primevue/themes/aura';
import ToastService from 'primevue/toastservice'; import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice'; import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import BlockViewer from '@/components/BlockViewer.vue';
import '@/assets/styles.scss'; import '@/assets/styles.scss';
import '@/assets/tailwind.css'; import '@/assets/tailwind.css';
@@ -26,6 +24,4 @@ app.use(PrimeVue, {
app.use(ToastService); app.use(ToastService);
app.use(ConfirmationService); app.use(ConfirmationService);
app.component('BlockViewer', BlockViewer);
app.mount('#app'); app.mount('#app');

43
src/router/index.js
View File

@@ -59,28 +59,6 @@ const router = createRouter({
name: 'media', name: 'media',
component: () => import('@/views/uikit/MediaDoc.vue') component: () => import('@/views/uikit/MediaDoc.vue')
}, },
{
path: '/uikit/menu',
component: () => import('@/views/uikit/MenuDoc.vue'),
children: [
{
path: '/uikit/menu',
component: () => import('@/views/uikit/menu/PersonalDemo.vue')
},
{
path: '/uikit/menu/seat',
component: () => import('@/views/uikit/menu/SeatDemo.vue')
},
{
path: '/uikit/menu/payment',
component: () => import('@/views/uikit/menu/PaymentDemo.vue')
},
{
path: '/uikit/menu/confirmation',
component: () => import('@/views/uikit/menu/ConfirmationDemo.vue')
}
]
},
{ {
path: '/uikit/message', path: '/uikit/message',
name: 'message', name: 'message',
@@ -91,6 +69,11 @@ const router = createRouter({
name: 'file', name: 'file',
component: () => import('@/views/uikit/FileDoc.vue') component: () => import('@/views/uikit/FileDoc.vue')
}, },
{
path: '/uikit/menu',
name: 'menu',
component: () => import('@/views/uikit/MenuDoc.vue')
},
{ {
path: '/uikit/charts', path: '/uikit/charts',
name: 'charts', name: 'charts',
@@ -102,19 +85,9 @@ const router = createRouter({
component: () => import('@/views/uikit/MiscDoc.vue') component: () => import('@/views/uikit/MiscDoc.vue')
}, },
{ {
path: '/blocks', path: '/uikit/timeline',
name: 'blocks',
component: () => import('@/views/utilities/Blocks.vue')
},
{
path: '/utilities/icons',
name: 'icons',
component: () => import('@/views/utilities/Icons.vue')
},
{
path: '/pages/timeline',
name: 'timeline', name: 'timeline',
component: () => import('@/views/pages/TimelineDoc.vue') component: () => import('@/views/uikit/TimelineDoc.vue')
}, },
{ {
path: '/pages/empty', path: '/pages/empty',
@@ -129,7 +102,7 @@ const router = createRouter({
{ {
path: '/documentation', path: '/documentation',
name: 'documentation', name: 'documentation',
component: () => import('@/views/utilities/Documentation.vue') component: () => import('@/views/pages/Documentation.vue')
} }
] ]
}, },

18
src/views/Dashboard.vue
View File

@@ -3,7 +3,7 @@ import { useLayout } from '@/layout/composables/layout';
import { ProductService } from '@/service/ProductService'; import { ProductService } from '@/service/ProductService';
import { onMounted, ref, watch } from 'vue'; import { onMounted, ref, watch } from 'vue';
const { getPrimary, isDarkTheme } = useLayout(); const { getPrimary, getSurface, isDarkTheme } = useLayout();
const products = ref(null); const products = ref(null);
const chartData = ref(null); const chartData = ref(null);
@@ -99,7 +99,7 @@ watch(isDarkTheme, () => {
chartOptions.value = setChartOptions(); chartOptions.value = setChartOptions();
}); });
watch(getPrimary, () => { watch([getPrimary, getSurface], () => {
chartData.value = setChartData(); chartData.value = setChartData();
chartOptions.value = setChartOptions(); chartOptions.value = setChartOptions();
}); });
@@ -191,8 +191,8 @@ watch(getPrimary, () => {
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<div class="flex justify-between items-center mb-8"> <div class="flex justify-between items-center mb-6">
<div class="font-semibold text-xl mb-4">Best Selling Products</div> <div class="font-semibold text-xl">Best Selling Products</div>
<div> <div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button> <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button>
<Menu ref="menu2" :popup="true" :model="items"></Menu> <Menu ref="menu2" :popup="true" :model="items"></Menu>
@@ -281,7 +281,7 @@ watch(getPrimary, () => {
</div> </div>
<div class="card"> <div class="card">
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<div class="font-semibold text-xl mb-4">Notifications</div> <div class="font-semibold text-xl">Notifications</div>
<div> <div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button> <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button>
<Menu ref="menu1" :popup="true" :model="items"></Menu> <Menu ref="menu1" :popup="true" :model="items"></Menu>
@@ -292,7 +292,7 @@ watch(getPrimary, () => {
<ul class="p-0 mx-0 mt-0 mb-6 list-none"> <ul class="p-0 mx-0 mt-0 mb-6 list-none">
<li class="flex items-center py-2 border-b border-surface"> <li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i> <i class="pi pi-dollar !text-xl text-blue-500"></i>
</div> </div>
<span class="text-surface-900 dark:text-surface-0 leading-normal" <span class="text-surface-900 dark:text-surface-0 leading-normal"
>Richard Jones >Richard Jones
@@ -301,7 +301,7 @@ watch(getPrimary, () => {
</li> </li>
<li class="flex items-center py-2"> <li class="flex items-center py-2">
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0">
<i class="pi pi-download text-xl text-orange-500"></i> <i class="pi pi-download !text-xl text-orange-500"></i>
</div> </div>
<span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span> <span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
</li> </li>
@@ -311,7 +311,7 @@ watch(getPrimary, () => {
<ul class="p-0 m-0 list-none"> <ul class="p-0 m-0 list-none">
<li class="flex items-center py-2 border-b border-surface"> <li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i> <i class="pi pi-dollar !text-xl text-blue-500"></i>
</div> </div>
<span class="text-surface-900 dark:text-surface-0 leading-normal" <span class="text-surface-900 dark:text-surface-0 leading-normal"
>Keyser Wick >Keyser Wick
@@ -320,7 +320,7 @@ watch(getPrimary, () => {
</li> </li>
<li class="flex items-center py-2 border-b border-surface"> <li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-pink-100 rounded-full mr-4 shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-pink-100 rounded-full mr-4 shrink-0">
<i class="pi pi-question text-xl text-pink-500"></i> <i class="pi pi-question !text-xl text-pink-500"></i>
</div> </div>
<span class="text-surface-900 dark:text-surface-0 leading-normal" <span class="text-surface-900 dark:text-surface-0 leading-normal"
>Jane Davis >Jane Davis

0
src/views/utilities/Documentation.vue → src/views/pages/Documentation.vue
View File

2
src/views/pages/Empty.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div className="card"> <div className="card">
<h5>Empty Page</h5> <div class="font-semibold text-xl mb-4">Empty Page</div>
<p>Use this page to start from scratch and place your custom content.</p> <p>Use this page to start from scratch and place your custom content.</p>
</div> </div>
</template> </template>

37
src/views/pages/NotFound.vue
View File

@@ -1,17 +1,33 @@
<script setup></script> <script setup></script>
<template> <template>
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden"> <div class="flex items-center justify-center min-h-screen overflow-hidden">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" /> <svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)"> <path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
fill="var(--primary-color)"
/>
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
</mask>
<g mask="url(#mask0_1413_1551)">
<path
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
fill="var(--primary-color)"
/>
</g>
</svg>
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 60%) 10%, var(--surface-ground) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px"> <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<span class="text-blue-500 font-bold text-3xl">404</span> <span class="text-primary font-bold text-3xl">404</span>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
<div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div> <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b"> <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-cyan-400 rounded-border" style="height: 3.5rem; width: 3.5rem"> <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-table text-2xl"></i> <i class="pi pi-fw pi-table !text-2xl"></i>
</span> </span>
<span class="ml-6 flex flex-col"> <span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span> <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
@@ -19,8 +35,8 @@
</span> </span>
</router-link> </router-link>
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b"> <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-orange-400 rounded-border" style="height: 3.5rem; width: 3.5rem"> <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i> <i class="pi pi-fw pi-question-circle !text-2xl"></i>
</span> </span>
<span class="ml-6 flex flex-col"> <span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span> <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
@@ -28,14 +44,15 @@
</span> </span>
</router-link> </router-link>
<router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b"> <router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-indigo-400 rounded-border" style="height: 3.5rem; width: 3.5rem"> <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i> <i class="pi pi-fw pi-unlock !text-2xl"></i>
</span> </span>
<span class="ml-6 flex flex-col"> <span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span> <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span> <span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
</span> </span>
</router-link> </router-link>
<Button as="router-link" label="Go to Dashboard" to="/" />
</div> </div>
</div> </div>
</div> </div>

155
src/views/pages/TimelineDoc.vue
View File

@@ -1,155 +0,0 @@
<script setup>
import { ref } from 'vue';
const events = ref([
{
status: 'Ordered',
date: '15/10/2020 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/10/2020 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/10/2020 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/10/2020 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
]);
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script>
<template>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<div class="card">
<h5>Left Align</h5>
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<h5>Right Align</h5>
<Timeline :value="events" align="right">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<h5>Alternate Align</h5>
<Timeline :value="events" align="alternate">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<h5>Opposite Content</h5>
<Timeline :value="events">
<template #opposite="slotProps">
<small class="p-text-secondary">{{ slotProps.item.date }}</small>
</template>
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
</div>
<div class="card">
<h5>Custom Timeline</h5>
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card class="mt-4">
<template #title>
{{ slotProps.item.status }}
</template>
<template #subtitle>
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
neque quas!
</p>
<Button label="Read more" text></Button>
</template>
</Card>
</template>
</Timeline>
</div>
<div class="card mt-4">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<h6>Bottom Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<h6>Alternate Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
<template #opposite> &nbsp; </template>
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
</div>
</template>
<style lang="scss" scoped>
@media screen and (max-width: 960px) {
::v-deep(.customized-timeline) {
.p-timeline-event:nth-child(even) {
flex-direction: row !important;
.p-timeline-event-content {
text-align: left !important;
}
}
.p-timeline-event-opposite {
flex: 0;
}
.p-card {
margin-top: 1rem;
}
}
}
</style>

10
src/views/pages/auth/Access.vue
View File

@@ -3,19 +3,17 @@
<template> <template>
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)"> <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px"> <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="gap-4 flex flex-col items-center"> <div class="gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem"> <div class="flex justify-center items-center border-2 border-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-lock text-2xl"></i> <i class="text-orange-500 pi pi-fw pi-lock !text-2xl"></i>
</div> </div>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact admins.</span> <span class="text-muted-color mb-8">You do not have the necessary permisions. Please contact admins.</span>
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" /> <img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
<div class="col-span-12 mt-8 text-center"> <div class="col-span-12 mt-8 text-center">
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i> <Button as="router-link" label="Go to Dashboard" to="/" severity="warn" />
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
</div> </div>
</div> </div>
</div> </div>

10
src/views/pages/auth/Error.vue
View File

@@ -3,19 +3,17 @@
<template> <template>
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)"> <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px"> <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="gap-4 flex flex-col items-center"> <div class="gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem"> <div class="flex justify-center items-center border-2 border-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i> <i class="pi pi-fw pi-exclamation-circle !text-2xl text-pink-500"></i>
</div> </div>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</span> <span class="text-muted-color mb-8">Requested resource is not available.</span>
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" /> <img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
<div class="col-span-12 mt-8 text-center"> <div class="col-span-12 mt-8 text-center">
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i> <Button as="router-link" label="Go to Dashboard" to="/" severity="info" />
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
</div> </div>
</div> </div>
</div> </div>

41
src/views/pages/auth/Login.vue
View File

@@ -1,44 +1,53 @@
<script setup> <script setup>
import { useLayout } from '@/layout/composables/layout'; import { ref } from 'vue';
import { computed, ref } from 'vue';
const { isDarkTheme } = useLayout();
const email = ref(''); const email = ref('');
const password = ref(''); const password = ref('');
const checked = ref(false); const checked = ref(false);
const logoUrl = computed(() => {
return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
});
</script> </script>
<template> <template>
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden"> <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<img :src="logoUrl" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)"> <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px"> <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
<div class="text-center mb-8"> <div class="text-center mb-8">
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-4" /> <svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-16 shrink-0 mx-auto">
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome, Isabel!</div> <path
<span class="text-surface-600 dark:text-surface-200 font-medium">Sign in to continue</span> fill-rule="evenodd"
clip-rule="evenodd"
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
fill="var(--primary-color)"
/>
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
</mask>
<g mask="url(#mask0_1413_1551)">
<path
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
fill="var(--primary-color)"
/>
</g>
</svg>
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome to PrimeLand!</div>
<span class="text-muted-color font-medium">Sign in to continue</span>
</div> </div>
<div> <div>
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label> <label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" style="padding: 1rem" v-model="email" /> <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" v-model="email" />
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label> <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password> <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid></Password>
<div class="flex items-center justify-between mb-8 gap-8"> <div class="flex items-center justify-between mt-2 mb-8 gap-8">
<div class="flex items-center"> <div class="flex items-center">
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox> <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label> <label for="rememberme1">Remember me</label>
</div> </div>
<a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a> <span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">Forgot password?</span>
</div> </div>
<Button label="Sign In" class="w-full p-4 text-xl"></Button> <Button label="Sign In" class="w-full" as="router-link" to="/"></Button>
</div> </div>
</div> </div>
</div> </div>

30
src/views/uikit/ButtonDoc.vue
View File

@@ -28,10 +28,10 @@ const load = (index) => {
</script> </script>
<template> <template>
<div class="flex flex-col md:flex-row gap-6"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Default</h5> <div class="font-semibold text-xl">Default</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Submit"></Button> <Button label="Submit"></Button>
<Button label="Disabled" :disabled="true"></Button> <Button label="Disabled" :disabled="true"></Button>
@@ -39,7 +39,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Severities</h5> <div class="font-semibold text-xl">Severities</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" /> <Button label="Primary" />
<Button label="Secondary" severity="secondary" /> <Button label="Secondary" severity="secondary" />
@@ -52,7 +52,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Text</h5> <div class="font-semibold text-xl">Text</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" text /> <Button label="Primary" text />
<Button label="Secondary" severity="secondary" text /> <Button label="Secondary" severity="secondary" text />
@@ -65,7 +65,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Outlined</h5> <div class="font-semibold text-xl">Outlined</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" outlined /> <Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined /> <Button label="Secondary" severity="secondary" outlined />
@@ -78,7 +78,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Button Group</h5> <div class="font-semibold text-xl">Group</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<ButtonGroup> <ButtonGroup>
<Button label="Save" icon="pi pi-check" /> <Button label="Save" icon="pi pi-check" />
@@ -88,7 +88,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>SplitButton</h5> <div class="font-semibold text-xl">SplitButton</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<SplitButton label="Save" :model="items"></SplitButton> <SplitButton label="Save" :model="items"></SplitButton>
<SplitButton label="Save" :model="items" severity="secondary"></SplitButton> <SplitButton label="Save" :model="items" severity="secondary"></SplitButton>
@@ -101,7 +101,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Templating</h5> <div class="font-semibold text-xl">Templating</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button"> <Button type="button">
<img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" /> <img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
@@ -115,7 +115,7 @@ const load = (index) => {
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Icons</h5> <div class="font-semibold text-xl">Icons</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button> <Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
<Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button> <Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
@@ -123,7 +123,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Raised</h5> <div class="font-semibold text-xl">Raised</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" raised /> <Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised /> <Button label="Secondary" severity="secondary" raised />
@@ -136,7 +136,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Rounded</h5> <div class="font-semibold text-xl">Rounded</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" rounded /> <Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded /> <Button label="Secondary" severity="secondary" rounded />
@@ -149,7 +149,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Rounded Icons</h5> <div class="font-semibold text-xl">Rounded Icons</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded /> <Button icon="pi pi-check" rounded />
<Button icon="pi pi-bookmark" severity="secondary" rounded /> <Button icon="pi pi-bookmark" severity="secondary" rounded />
@@ -161,7 +161,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Rounded Text</h5> <div class="font-semibold text-xl">Rounded Text</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" text raised rounded /> <Button icon="pi pi-check" text raised rounded />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded /> <Button icon="pi pi-bookmark" severity="secondary" text raised rounded />
@@ -173,7 +173,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Rounded Outlined</h5> <div class="font-semibold text-xl">Rounded Outlined</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded outlined /> <Button icon="pi pi-check" rounded outlined />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined /> <Button icon="pi pi-bookmark" severity="secondary" rounded outlined />
@@ -185,7 +185,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-2">
<h5>Loading</h5> <div class="font-semibold text-xl">Loading</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" /> <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)" /> <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)" />

14
src/views/uikit/ChartDoc.vue
View File

@@ -242,40 +242,40 @@ watch(
</script> </script>
<template> <template>
<Fluid class="grid grid-cols-12 gap-4"> <Fluid class="grid grid-cols-12 gap-8">
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card">
<h5>Linear Chart</h5> <div class="font-semibold text-xl mb-4">Linear</div>
<Chart type="line" :data="lineData" :options="lineOptions"></Chart> <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div> </div>
</div> </div>
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card">
<h5>Bar Chart</h5> <div class="font-semibold text-xl mb-4">Bar</div>
<Chart type="bar" :data="barData" :options="barOptions"></Chart> <Chart type="bar" :data="barData" :options="barOptions"></Chart>
</div> </div>
</div> </div>
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center"> <div class="card flex flex-col items-center">
<h5 class="text-left w-full">Pie Chart</h5> <div class="font-semibold text-xl mb-4">Pie</div>
<Chart type="pie" :data="pieData" :options="pieOptions"></Chart> <Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
</div> </div>
</div> </div>
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center"> <div class="card flex flex-col items-center">
<h5 class="text-left w-full">Doughnut Chart</h5> <div class="font-semibold text-xl mb-4">Doughnut</div>
<Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart> <Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
</div> </div>
</div> </div>
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center"> <div class="card flex flex-col items-center">
<h5 class="text-left w-full">Polar Area Chart</h5> <div class="font-semibold text-xl mb-4">Polar Area</div>
<Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart> <Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
</div> </div>
</div> </div>
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center"> <div class="card flex flex-col items-center">
<h5 class="text-left w-full">Radar Chart</h5> <div class="font-semibold text-xl mb-4">Radar</div>
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart> <Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
</div> </div>
</div> </div>

14
src/views/uikit/FileDoc.vue
View File

@@ -1,6 +1,6 @@
<script setup> <script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
const toast = useToast(); const toast = useToast();
const fileupload = ref(); const fileupload = ref();
@@ -15,17 +15,19 @@ const onUpload = () => {
</script> </script>
<template> <template>
<div class="grid grid-cols-12 gap-4"> <div class="grid grid-cols-12 gap-8">
<div class="col-span-12"> <div class="col-span-full lg:col-span-6">
<div class="card"> <div class="card">
<h5>Advanced</h5> <div class="font-semibold text-xl mb-4">Advanced</div>
<FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload /> <FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />
</div> </div>
</div>
<div class="col-span-full lg:col-span-6">
<div class="card"> <div class="card">
<h5>Basic</h5> <div class="font-semibold text-xl mb-4">Basic</div>
<div class="card flex flex-col gap-6 items-center justify-center"> <div class="card flex flex-col gap-6 items-center justify-center">
<Toast /> <Toast />
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" /> <FileUpload ref="fileupload" mode="basic" name="demo[]" accept="image/*" :maxFileSize="1000000" @uploader="onUpload" customUpload />
<Button label="Upload" @click="upload" severity="secondary" /> <Button label="Upload" @click="upload" severity="secondary" />
</div> </div>
</div> </div>

16
src/views/uikit/FormLayout.vue
View File

@@ -12,10 +12,10 @@ const dropdownItem = ref(null);
<template> <template>
<Fluid> <Fluid>
<div class="flex flex-col md:flex-row gap-6"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>Vertical</h5> <div class="font-semibold text-xl">Vertical</div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="name1">Name</label> <label for="name1">Name</label>
<InputText id="name1" type="text" /> <InputText id="name1" type="text" />
@@ -31,7 +31,7 @@ const dropdownItem = ref(null);
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>Vertical Grid</h5> <div class="font-semibold text-xl">Vertical Grid</div>
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div class="flex flex-col grow basis-0 gap-2"> <div class="flex flex-col grow basis-0 gap-2">
<label for="name2">Name</label> <label for="name2">Name</label>
@@ -46,7 +46,7 @@ const dropdownItem = ref(null);
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>Horizontal</h5> <div class="font-semibold text-xl">Horizontal</div>
<div class="grid grid-cols-12 gap-2"> <div class="grid grid-cols-12 gap-2">
<label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label> <label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
<div class="col-span-12 md:col-span-10"> <div class="col-span-12 md:col-span-10">
@@ -62,7 +62,7 @@ const dropdownItem = ref(null);
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>Inline</h5> <div class="font-semibold text-xl">Inline</div>
<div class="flex flex-wrap items-start gap-4"> <div class="flex flex-wrap items-start gap-4">
<div class="field"> <div class="field">
<label for="firstname1" class="sr-only">Firstname</label> <label for="firstname1" class="sr-only">Firstname</label>
@@ -76,7 +76,7 @@ const dropdownItem = ref(null);
</div> </div>
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>Help Text</h5> <div class="font-semibold text-xl">Help Text</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<label for="username">Username</label> <label for="username">Username</label>
<InputText id="username" type="text" /> <InputText id="username" type="text" />
@@ -86,9 +86,9 @@ const dropdownItem = ref(null);
</div> </div>
</div> </div>
<div class="flex mt-6"> <div class="flex mt-8">
<div class="card flex flex-col gap-4 w-full"> <div class="card flex flex-col gap-4 w-full">
<h5>Advanced</h5> <div class="font-semibold text-xl">Advanced</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-wrap gap-2 w-full"> <div class="flex flex-wrap gap-2 w-full">
<label for="firstname2">Firstname</label> <label for="firstname2">Firstname</label>

63
src/views/uikit/InputDoc.vue
View File

@@ -9,7 +9,6 @@ const selectedAutoValue = ref(null);
const autoFilteredValue = ref([]); const autoFilteredValue = ref([]);
const calendarValue = ref(null); const calendarValue = ref(null);
const inputNumberValue = ref(null); const inputNumberValue = ref(null);
const chipsValue = ref(null);
const sliderValue = ref(50); const sliderValue = ref(50);
const ratingValue = ref(null); const ratingValue = ref(null);
const colorValue = ref('#1976D2'); const colorValue = ref('#1976D2');
@@ -47,10 +46,8 @@ const multiselectValues = ref([
const multiselectValue = ref(null); const multiselectValue = ref(null);
const toggleValue = ref(false); const toggleValue = ref(false);
const selectButtonValue1 = ref(null); const selectButtonValue = ref(null);
const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]); const selectButtonValues = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const selectButtonValue2 = ref(null);
const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const knobValue = ref(50); const knobValue = ref(50);
const inputGroupValue = ref(false); const inputGroupValue = ref(false);
const treeSelectNodes = ref(null); const treeSelectNodes = ref(null);
@@ -75,17 +72,17 @@ const searchCountry = (event) => {
</script> </script>
<template> <template>
<Fluid class="flex flex-col md:flex-row gap-6"> <Fluid class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl mb-4">InputText</div> <div class="font-semibold text-xl">InputText</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<InputText type="text" placeholder="Default" /> <InputText type="text" placeholder="Default" />
<InputText type="text" placeholder="Disabled" :disabled="true" /> <InputText type="text" placeholder="Disabled" :disabled="true" />
<InputText type="text" placeholder="Invalid" invalid /> <InputText type="text" placeholder="Invalid" invalid />
</div> </div>
<h5 class="mt-6">Icons</h5> <div class="font-semibold text-xl">Icons</div>
<IconField> <IconField>
<InputIcon class="pi pi-user" /> <InputIcon class="pi pi-user" />
<InputText type="text" placeholder="Username" /> <InputText type="text" placeholder="Username" />
@@ -95,51 +92,48 @@ const searchCountry = (event) => {
<InputIcon class="pi pi-search" /> <InputIcon class="pi pi-search" />
</IconField> </IconField>
<h5 class="mt-6">Float Label</h5> <div class="font-semibold text-xl">Float Label</div>
<FloatLabel> <FloatLabel>
<InputText id="username" type="text" v-model="floatValue" /> <InputText id="username" type="text" v-model="floatValue" />
<label for="username">Username</label> <label for="username">Username</label>
</FloatLabel> </FloatLabel>
<h5 class="mt-6">Textarea</h5> <div class="font-semibold text-xl">Textarea</div>
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" /> <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
<h5 class="mt-6">AutoComplete</h5> <div class="font-semibold text-xl">AutoComplete</div>
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" /> <AutoComplete placeholder="Search" :dropdown="true" display="chip" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
<h5 class="mt-6">DatePicker</h5> <div class="font-semibold text-xl">DatePicker</div>
<DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue"></DatePicker> <DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue"></DatePicker>
<h5 class="mt-6">Spinner</h5> <div class="font-semibold text-xl">InputNumber</div>
<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber> <InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
<h5 class="mt-6">Chips</h5>
<AutoComplete v-model="chipsValue" :typeahead="false" multiple />
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>Slider</h5> <div class="font-semibold text-xl">Slider</div>
<InputText v-model.number="sliderValue" /> <InputText v-model.number="sliderValue" />
<Slider v-model="sliderValue" /> <Slider v-model="sliderValue" />
<div class="flex flex-row mt-6"> <div class="flex flex-row mt-6">
<div class="flex flex-col gap-4 w-1/2"> <div class="flex flex-col gap-4 w-1/2">
<h5>Rating</h5> <div class="font-semibold text-xl">Rating</div>
<Rating v-model="ratingValue" /> <Rating v-model="ratingValue" />
</div> </div>
<div class="flex flex-col gap-4 w-1/2"> <div class="flex flex-col gap-4 w-1/2">
<h5>ColorPicker</h5> <div class="font-semibold text-xl">ColorPicker</div>
<ColorPicker style="width: 2rem" v-model="colorValue" /> <ColorPicker style="width: 2rem" v-model="colorValue" />
</div> </div>
</div> </div>
<h5 class="mt-6">Knob</h5> <div class="font-semibold text-xl">Knob</div>
<Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" /> <Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
</div> </div>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>RadioButton</h5> <div class="font-semibold text-xl">RadioButton</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center"> <div class="flex items-center">
<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" /> <RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
@@ -155,7 +149,7 @@ const searchCountry = (event) => {
</div> </div>
</div> </div>
<h5 class="mt-6">Checkbox</h5> <div class="font-semibold text-xl">Checkbox</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center"> <div class="flex items-center">
<Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" /> <Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
@@ -171,18 +165,18 @@ const searchCountry = (event) => {
</div> </div>
</div> </div>
<h5 class="mt-6">Input Switch</h5> <div class="font-semibold text-xl">ToggleSwitch</div>
<ToggleSwitch v-model="switchValue" /> <ToggleSwitch v-model="switchValue" />
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>Listbox</h5> <div class="font-semibold text-xl">Listbox</div>
<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" /> <Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
<h5 class="mt-6">Select</h5> <div class="font-semibold text-xl">Select</div>
<Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" /> <Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
<h5 class="mt-6">MultiSelect</h5> <div class="font-semibold text-xl">MultiSelect</div>
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true"> <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true">
<template #value="slotProps"> <template #value="slotProps">
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2" v-for="option of slotProps.value" :key="option.code"> <div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2" v-for="option of slotProps.value" :key="option.code">
@@ -201,26 +195,23 @@ const searchCountry = (event) => {
</template> </template>
</MultiSelect> </MultiSelect>
<h5 class="mt-6">TreeSelect</h5> <div class="font-semibold text-xl">TreeSelect</div>
<TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect> <TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
</div> </div>
<div class="card flex flex-col gap-4"> <div class="card flex flex-col gap-4">
<h5>ToggleButton</h5> <div class="font-semibold text-xl">ToggleButton</div>
<ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }" /> <ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }" />
<h5 class="mt-6">SelectButton</h5> <div class="font-semibold text-xl">SelectButton</div>
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" /> <SelectButton v-model="selectButtonValue" :options="selectButtonValues" optionLabel="name" />
<h5 class="mt-6">SelectButton - Multiple</h5>
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
</div> </div>
</div> </div>
</Fluid> </Fluid>
<Fluid class="flex mt-6"> <Fluid class="flex mt-8">
<div class="card flex flex-col gap-4 w-full"> <div class="card flex flex-col gap-4 w-full">
<h5>Input Groups</h5> <div class="font-semibold text-xl">InputGroup</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<InputGroup> <InputGroup>
<InputGroupAddon> <InputGroupAddon>

28
src/views/uikit/ListDoc.vue
View File

@@ -1,6 +1,6 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService'; import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
const picklistValue = ref([ const picklistValue = ref([
[ [
@@ -51,9 +51,9 @@ const getSeverity = (product) => {
</script> </script>
<template> <template>
<div class="flex flex-col gap-6"> <div class="flex flex-col">
<div class="card"> <div class="card">
<h5>DataView</h5> <div class="font-semibold text-xl">DataView</div>
<DataView :value="products" :layout="layout"> <DataView :value="products" :layout="layout">
<template #header> <template #header>
<div class="flex justify-end"> <div class="flex justify-end">
@@ -68,7 +68,7 @@ const getSeverity = (product) => {
<template #list="slotProps"> <template #list="slotProps">
<div class="flex flex-col"> <div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index"> <div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface': index !== 0 }">
<div class="md:w-40 relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
@@ -109,7 +109,7 @@ const getSeverity = (product) => {
<template #grid="slotProps"> <template #grid="slotProps">
<div class="grid grid-cols-12 gap-4"> <div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 lg:col-span-4 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col"> <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4"> <div class="bg-surface-50 flex justify-center rounded p-4">
<div class="relative mx-auto"> <div class="relative mx-auto">
@@ -153,10 +153,10 @@ const getSeverity = (product) => {
</DataView> </DataView>
</div> </div>
<div class="flex flex-col lg:flex-row gap-4"> <div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-2/3"> <div class="lg:w-2/3">
<div class="card"> <div class="card">
<h5>PickList</h5> <div class="font-semibold text-xl mb-4">PickList</div>
<PickList v-model="picklistValue" breakpoint="1400px" dataKey="id"> <PickList v-model="picklistValue" breakpoint="1400px" dataKey="id">
<template #option="{ option }"> <template #option="{ option }">
{{ option.name }} {{ option.name }}
@@ -167,14 +167,12 @@ const getSeverity = (product) => {
<div class="lg:w-1/3"> <div class="lg:w-1/3">
<div class="card"> <div class="card">
<h5>OrderList</h5> <div class="font-semibold text-xl mb-4">OrderList</div>
<div class="lg:flex lg:justify-center"> <OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
<OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full"> <template #option="{ option }">
<template #option="{ option }"> {{ option.name }}
{{ option.name }} </template>
</template> </OrderList>
</OrderList>
</div>
</div> </div>
</div> </div>
</div> </div>

14
src/views/uikit/MediaDoc.vue
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import { ProductService } from '@/service/ProductService';
import { PhotoService } from '@/service/PhotoService'; import { PhotoService } from '@/service/PhotoService';
import { ref, onMounted } from 'vue'; import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
const products = ref([]); const products = ref([]);
const images = ref([]); const images = ref([]);
@@ -65,7 +65,7 @@ const getSeverity = (status) => {
<template> <template>
<div class="card"> <div class="card">
<h5>Carousel</h5> <div class="font-semibold text-xl mb-4">Carousel</div>
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions"> <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
<template #item="slotProps"> <template #item="slotProps">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4"> <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
@@ -89,14 +89,12 @@ const getSeverity = (status) => {
</div> </div>
<div class="card"> <div class="card">
<h5>Image</h5> <div class="font-semibold text-xl mb-4">Image</div>
<div class="flex justify-center"> <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
</div> </div>
<div class="card"> <div class="card">
<h5>Galleria</h5> <div class="font-semibold text-xl mb-4">Galleria</div>
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />

76
src/views/uikit/MenuDoc.vue
View File

@@ -423,7 +423,7 @@ const onContextRightClick = (event) => {
<template> <template>
<div class="card"> <div class="card">
<h5 class="mb-2">Menubar</h5> <div class="font-semibold text-xl mb-4">Menubar</div>
<Menubar :model="nestedMenuitems"> <Menubar :model="nestedMenuitems">
<template #end> <template #end>
<IconField iconPosition="left"> <IconField iconPosition="left">
@@ -435,128 +435,78 @@ const onContextRightClick = (event) => {
</div> </div>
<div class="card"> <div class="card">
<h5 class="mb-2">Breadcrumb</h5> <div class="font-semibold text-xl mb-4">Breadcrumb</div>
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" /> <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
</div> </div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h5 class="mb-2">Stepper</h5> <div class="font-semibold text-xl mb-4">Steps</div>
<Stepper value="1"> <Stepper value="1">
<StepList> <StepList>
<Step value="1">Header I</Step> <Step value="1">Header I</Step>
<Step value="2">Header II</Step> <Step value="2">Header II</Step>
<Step value="3">Header III</Step> <Step value="3">Header III</Step>
</StepList> </StepList>
<StepPanels>
<StepPanel v-slot="{ activateCallback }" value="1">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
</div>
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="2">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="3">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
</StepPanels>
</Stepper> </Stepper>
</div> </div>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h5 class="mb-2">Tabs</h5> <div class="font-semibold text-xl mb-4">TabMenu</div>
<Tabs value="0"> <Tabs value="0">
<TabList> <TabList>
<Tab value="0">Header I</Tab> <Tab value="0">Header I</Tab>
<Tab value="1">Header II</Tab> <Tab value="1">Header II</Tab>
<Tab value="2">Header III</Tab> <Tab value="2">Header III</Tab>
</TabList> </TabList>
<TabPanels>
<TabPanel value="0">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</p>
</TabPanel>
<TabPanel value="1">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel value="2">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
minus.
</p>
</TabPanel>
</TabPanels>
</Tabs> </Tabs>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col md:flex-row gap-4 mt-6"> <div class="flex flex-col md:flex-row gap-8 mt-6">
<div class="md:w-1/3"> <div class="md:w-1/3">
<div class="card"> <div class="card">
<h5 class="mb-2">Tiered Menu</h5> <div class="font-semibold text-xl mb-4">Tiered Menu</div>
<TieredMenu :model="tieredMenuItems" /> <TieredMenu :model="tieredMenuItems" />
</div> </div>
</div> </div>
<div class="md:w-1/3"> <div class="md:w-1/3">
<div class="card"> <div class="card">
<h5 class="mb-2">Plain Menu</h5> <div class="font-semibold text-xl mb-4">Plain Menu</div>
<Menu :model="menuitems" /> <Menu :model="menuitems" />
</div> </div>
</div> </div>
<div class="md:w-1/3"> <div class="md:w-1/3">
<div class="card"> <div class="card">
<h5 class="mb-2">Overlay Menu</h5> <div class="font-semibold text-xl mb-4">Overlay Menu</div>
<Menu ref="menu" :model="overlayMenuItems" :popup="true" /> <Menu ref="menu" :model="overlayMenuItems" :popup="true" />
<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" /> <Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
</div> </div>
<div class="card" @contextmenu="onContextRightClick"> <div class="card" @contextmenu="onContextRightClick">
<h5 class="mb-2">ContextMenu</h5> <div class="font-semibold text-xl mb-4">Context Menu</div>
Right click to display. Right click to display.
<ContextMenu ref="contextMenu" :model="contextMenuItems" /> <ContextMenu ref="contextMenu" :model="contextMenuItems" />
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col md:flex-row gap-4 mt-6"> <div class="flex flex-col md:flex-row gap-8 mt-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h5 class="mb-2">MegaMenu - Horizontal</h5> <div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<MegaMenu :model="megamenuItems" /> <MegaMenu :model="megamenuItems" />
<h5 class="mb-2 mt-8">MegaMenu - Vertical</h5> <div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<MegaMenu :model="megamenuItems" orientation="vertical" /> <MegaMenu :model="megamenuItems" orientation="vertical" />
</div> </div>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h5 class="mb-2">PanelMenu</h5> <div class="font-semibold text-xl mb-4">PanelMenu</div>
<PanelMenu :model="panelMenuitems" /> <PanelMenu :model="panelMenuitems" />
</div> </div>
</div> </div>

43
src/views/uikit/MessagesDoc.vue
View File

@@ -1,12 +1,11 @@
<script setup> <script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
const toast = useToast(); const toast = useToast();
const message = ref([]); const message = ref([]);
const username = ref(null); const username = ref(null);
const email = ref(null); const email = ref(null);
const value = ref(null);
const count = ref(0); const count = ref(0);
const addMessage = (type) => { const addMessage = (type) => {
@@ -39,34 +38,17 @@ const showError = () => {
</script> </script>
<template> <template>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4 items-start">
<div class="card md:w-1/2"> <div class="card md:w-1/2">
<h5 class="mb-2">Toast</h5> <div class="font-semibold text-xl mb-4">Toast</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button @click="showSuccess()" label="Success" severity="success" /> <Button @click="showSuccess()" label="Success" severity="success" />
<Button @click="showInfo()" label="Info" severity="info" /> <Button @click="showInfo()" label="Info" severity="info" />
<Button @click="showWarn()" label="Warn" severity="warning" /> <Button @click="showWarn()" label="Warn" severity="warning" />
<Button @click="showError()" label="Error" severity="danger" /> <Button @click="showError()" label="Error" severity="danger" />
</div> </div>
</div>
<div class="card md:w-1/2">
<h5 class="mb-2">Messages</h5>
<div class="flex flex-wrap gap-2 mb-4">
<Button label="Success" @click="addMessage('success')" severity="success" />
<Button label="Info" @click="addMessage('info')" severity="info" />
<Button label="Warn" @click="addMessage('warn')" severity="warning" />
<Button label="Error" @click="addMessage('error')" severity="danger" />
</div>
<transition-group name="p-message" tag="div"> <div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-6">
<div class="card md:w-1/2">
<h5 class="mb-2">Inline</h5>
<div class="flex flex-wrap mb-4 gap-2"> <div class="flex flex-wrap mb-4 gap-2">
<InputText v-model="username" placeholder="Username" aria-label="username" invalid /> <InputText v-model="username" placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message> <Message severity="error">Username is required</Message>
@@ -77,12 +59,19 @@ const showError = () => {
</div> </div>
</div> </div>
<div class="card md:w-1/2"> <div class="card md:w-1/2">
<h5 class="mb-2">Help Text</h5> <div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-4 mb-4">
<label for="username">Username</label> <Message severity="success">Success Message</Message>
<InputText id="username" v-model="value" aria-describedby="username-help" /> <Message severity="info">Info Message</Message>
<small id="username-help">Enter your username to reset your password.</small> <Message severity="warn">Warn Message</Message>
<Message severity="error">Error Message</Message>
<Message severity="secondary">Secondary Message</Message>
<Message severity="contrast">Contrast Message</Message>
</div> </div>
<transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group>
</div> </div>
</div> </div>
</template> </template>

49
src/views/uikit/MiscDoc.vue
View File

@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'; import { onBeforeUnmount, onMounted, ref } from 'vue';
const value = ref(0); const value = ref(0);
let interval = null; let interval = null;
@@ -29,7 +29,7 @@ onBeforeUnmount(() => {
<template> <template>
<div class="card"> <div class="card">
<h5>ProgressBar</h5> <div class="font-semibold text-xl mb-4">ProgressBar</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2"> <div class="md:w-1/2">
<ProgressBar :value="value"></ProgressBar> <ProgressBar :value="value"></ProgressBar>
@@ -40,11 +40,10 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
<div class="flex flex-col md:flex-row gap-4 mt-4"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h4 class="mb-2">Badge</h4> <div class="font-semibold text-xl mb-4">Badge</div>
<h5 class="mb-2">Numbers</h5>
<div class="flex gap-2"> <div class="flex gap-2">
<Badge :value="2"></Badge> <Badge :value="2"></Badge>
<Badge :value="8" severity="success"></Badge> <Badge :value="8" severity="success"></Badge>
@@ -53,7 +52,7 @@ onBeforeUnmount(() => {
<Badge :value="3" severity="danger"></Badge> <Badge :value="3" severity="danger"></Badge>
</div> </div>
<h5 class="my-4">Positioned Badge</h5> <div class="font-semibold my-4">Overlay</div>
<div class="flex gap-6"> <div class="flex gap-6">
<OverlayBadge value="2"> <OverlayBadge value="2">
<i class="pi pi-bell" style="font-size: 2rem" /> <i class="pi pi-bell" style="font-size: 2rem" />
@@ -66,11 +65,13 @@ onBeforeUnmount(() => {
</OverlayBadge> </OverlayBadge>
</div> </div>
<h5 class="my-4">Inline Button Badge</h5> <div class="font-semibold my-4">Button</div>
<Button label="Emails" badge="8" class="mr-2"></Button> <div class="flex gap-2">
<Button label="Messages" icon="pi pi-users" severity="warn" badge="8" badgeClass="p-badge-danger"></Button> <Button label="Emails" badge="8" class="mr-2"></Button>
<Button label="Messages" icon="pi pi-users" severity="warn" badge="8" badgeClass="p-badge-danger"></Button>
</div>
<h5 class="my-4">Sizes</h5> <div class="font-semibold my-4">Sizes</div>
<div class="flex items-start gap-2"> <div class="flex items-start gap-2">
<Badge :value="2"></Badge> <Badge :value="2"></Badge>
<Badge :value="4" size="large" severity="warn"></Badge> <Badge :value="4" size="large" severity="warn"></Badge>
@@ -79,8 +80,8 @@ onBeforeUnmount(() => {
</div> </div>
<div class="card"> <div class="card">
<h4>Avatar</h4> <div class="font-semibold text-xl mb-4">Avatar</div>
<h5 class="my-4">Avatar Group</h5> <div class="font-semibold mb-4">Group</div>
<AvatarGroup> <AvatarGroup>
<Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar> <Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
<Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar> <Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
@@ -90,19 +91,19 @@ onBeforeUnmount(() => {
<Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar> <Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
</AvatarGroup> </AvatarGroup>
<h5 class="my-4">Label - Circle</h5> <div class="font-semibold my-4">Label - Circle</div>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar> <Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar>
<Avatar label="V" class="mr-2" size="large" :style="{ 'background-color': '#2196F3', color: '#ffffff' }" shape="circle"></Avatar> <Avatar label="V" class="mr-2" size="large" :style="{ 'background-color': '#2196F3', color: '#ffffff' }" shape="circle"></Avatar>
<Avatar label="U" class="mr-2" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }" shape="circle"></Avatar> <Avatar label="U" class="mr-2" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }" shape="circle"></Avatar>
<h5 class="my-4">Icon - Badge</h5> <div class="font-semibold my-4">Icon - Badge</div>
<OverlayBadge value="4" severity="danger" class="inline-flex"> <OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" /> <Avatar label="U" size="xlarge" />
</OverlayBadge> </OverlayBadge>
</div> </div>
<div class="card"> <div class="card">
<h4>ScrollTop</h4> <div class="font-semibold text-xl mb-4">ScrollTop</div>
<ScrollPanel :style="{ width: '250px', height: '200px' }"> <ScrollPanel :style="{ width: '250px', height: '200px' }">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
@@ -117,8 +118,8 @@ onBeforeUnmount(() => {
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h4>Tag</h4> <div class="font-semibold text-xl mb-4">Tag</div>
<h5>Tags</h5> <div class="font-semibold mb-4">Default</div>
<div class="flex gap-2"> <div class="flex gap-2">
<Tag value="Primary"></Tag> <Tag value="Primary"></Tag>
<Tag severity="success" value="Success"></Tag> <Tag severity="success" value="Success"></Tag>
@@ -127,7 +128,7 @@ onBeforeUnmount(() => {
<Tag severity="danger" value="Danger"></Tag> <Tag severity="danger" value="Danger"></Tag>
</div> </div>
<h5>Pills</h5> <div class="font-semibold my-4">Pills</div>
<div class="flex gap-2"> <div class="flex gap-2">
<Tag value="Primary" :rounded="true"></Tag> <Tag value="Primary" :rounded="true"></Tag>
<Tag severity="success" value="Success" :rounded="true"></Tag> <Tag severity="success" value="Success" :rounded="true"></Tag>
@@ -136,7 +137,7 @@ onBeforeUnmount(() => {
<Tag severity="danger" value="Danger" :rounded="true"></Tag> <Tag severity="danger" value="Danger" :rounded="true"></Tag>
</div> </div>
<h5>Icons</h5> <div class="font-semibold my-4">Icons</div>
<div class="flex gap-2"> <div class="flex gap-2">
<Tag icon="pi pi-user" value="Primary"></Tag> <Tag icon="pi pi-user" value="Primary"></Tag>
<Tag icon="pi pi-check" severity="success" value="Success"></Tag> <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
@@ -147,8 +148,8 @@ onBeforeUnmount(() => {
</div> </div>
<div class="card"> <div class="card">
<h4>Chip</h4> <div class="font-semibold text-xl mb-4">Chip</div>
<h5>Basic</h5> <div class="font-semibold mb-4">Basic</div>
<div class="flex items-center flex-col sm:flex-row"> <div class="flex items-center flex-col sm:flex-row">
<Chip label="Action" class="mr-2 mb-2"></Chip> <Chip label="Action" class="mr-2 mb-2"></Chip>
<Chip label="Comedy" class="mr-2 mb-2"></Chip> <Chip label="Comedy" class="mr-2 mb-2"></Chip>
@@ -156,7 +157,7 @@ onBeforeUnmount(() => {
<Chip label="Thriller" :removable="true" class="mb-2"></Chip> <Chip label="Thriller" :removable="true" class="mb-2"></Chip>
</div> </div>
<h5>Icon</h5> <div class="font-semibold my-4">Icon</div>
<div class="flex items-center flex-col sm:flex-row"> <div class="flex items-center flex-col sm:flex-row">
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip> <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip>
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip> <Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip>
@@ -164,7 +165,7 @@ onBeforeUnmount(() => {
<Chip label="Microsoft" icon="pi pi-microsoft" :removable="true" class="mb-2"></Chip> <Chip label="Microsoft" icon="pi pi-microsoft" :removable="true" class="mb-2"></Chip>
</div> </div>
<h5>Image</h5> <div class="font-semibold my-4">Image</div>
<div class="flex items-center flex-col sm:flex-row"> <div class="flex items-center flex-col sm:flex-row">
<Chip label="Amy Elsner" :image="'/demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip> <Chip label="Amy Elsner" :image="'/demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip> <Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
@@ -173,7 +174,7 @@ onBeforeUnmount(() => {
</div> </div>
<div class="card"> <div class="card">
<h4>Skeleton</h4> <div class="font-semibold text-xl mb-4">Skeleton</div>
<div class="rounded-border border border-surface p-6"> <div class="rounded-border border border-surface p-6">
<div class="flex mb-4"> <div class="flex mb-4">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton> <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>

47
src/views/uikit/OverlayDoc.vue
View File

@@ -1,8 +1,8 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { ProductService } from '@/service/ProductService'; import { ProductService } from '@/service/ProductService';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { onMounted, ref } from 'vue';
const display = ref(false); const display = ref(false);
const displayConfirmation = ref(false); const displayConfirmation = ref(false);
@@ -77,31 +77,26 @@ const confirm = (event) => {
</script> </script>
<template> <template>
<div class="flex flex-col md:flex-row gap-6"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h5 class="mb-4">Dialog</h5> <div class="font-semibold text-xl mb-4">Dialog</div>
<Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true"> <Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
<p class="leading-normal m-0"> <p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<template #footer> <template #footer>
<Button label="Ok" @click="close" icon="pi pi-check" class="p-button-outlined" /> <Button label="Save" @click="close" />
</template> </template>
</Dialog> </Dialog>
<Button label="Show" icon="pi pi-external-link" style="width: auto" @click="open" /> <Button label="Show" style="width: auto" @click="open" />
</div> </div>
<div class="card"> <div class="card">
<h5 class="mb-4">Popover</h5> <div class="font-semibold text-xl mb-4">Popover</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button" label="Image" @click="toggle" severity="success" /> <Button type="button" label="Show" @click="toggleDataTable" />
<Popover ref="op">
<img src="https://primefaces.org/cdn/primevue/images/nature/nature9.jpg" alt="Image" />
</Popover>
<Button type="button" label="DataTable" @click="toggleDataTable" severity="success" />
<Popover ref="op2" id="overlay_panel" style="width: 450px"> <Popover ref="op2" id="overlay_panel" style="width: 450px">
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"> <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column> <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
@@ -119,16 +114,16 @@ const confirm = (event) => {
</div> </div>
<div class="card"> <div class="card">
<h5 class="mb-4">Tooltip</h5> <div class="font-semibold text-xl mb-4">Tooltip</div>
<div class="inline-flex gap-4"> <div class="inline-flex gap-4">
<InputText type="text" placeholder="Username" v-tooltip="'Your username'" /> <InputText type="text" placeholder="Username" v-tooltip="'Your username'" />
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" /> <Button type="button" label="Save" v-tooltip="'Click to proceed'" />
</div> </div>
</div> </div>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h5 class="mb-4">Drawer</h5> <div class="font-semibold text-xl mb-4">Drawer</div>
<Drawer v-model:visible="visibleLeft" header="Drawer"> <Drawer v-model:visible="visibleLeft" header="Drawer">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -164,21 +159,21 @@ const confirm = (event) => {
</p> </p>
</Drawer> </Drawer>
<Button icon="pi pi-arrow-right" severity="warn" @click="visibleLeft = true" style="margin-right: 0.25em" /> <Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-left" severity="warn" @click="visibleRight = true" style="margin-right: 0.25em" /> <Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-down" severity="warn" @click="visibleTop = true" style="margin-right: 0.25em" /> <Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-up" severity="warn" @click="visibleBottom = true" style="margin-right: 0.25em" /> <Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right: 0.25em" />
<Button icon="pi pi-external-link" severity="warn" @click="visibleFull = true" /> <Button icon="pi pi-external-link" @click="visibleFull = true" />
</div> </div>
<div class="card"> <div class="card">
<h5 class="mb-4">ConfirmPopup</h5> <div class="font-semibold text-xl mb-4">ConfirmPopup</div>
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button> <Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
</div> </div>
<div class="card"> <div class="card">
<h5 class="mb-4">Confirmation</h5> <div class="font-semibold text-xl mb-4">ConfirmDialog</div>
<Button label="Delete" icon="pi pi-trash" severity="danger" style="width: auto" @click="openConfirmation" /> <Button label="Delete" icon="pi pi-trash" severity="danger" style="width: auto" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true"> <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
@@ -186,8 +181,8 @@ const confirm = (event) => {
<span>Are you sure you want to proceed?</span> <span>Are you sure you want to proceed?</span>
</div> </div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text" /> <Button label="No" icon="pi pi-times" @click="closeConfirmation" text severity="secondary" />
<Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus /> <Button label="Yes" icon="pi pi-check" @click="closeConfirmation" severity="danger" outlined autofocus />
</template> </template>
</Dialog> </Dialog>
</div> </div>

27
src/views/uikit/PanelsDoc.vue
View File

@@ -32,9 +32,9 @@ const toggle = () => {
</script> </script>
<template> <template>
<div class="flex flex-col gap-4"> <div class="flex flex-col">
<div class="card"> <div class="card">
<h5>Toolbar</h5> <div class="font-semibold text-xl mb-4">Toolbar</div>
<Toolbar> <Toolbar>
<template #start> <template #start>
<Button icon="pi pi-plus" class="mr-2" severity="secondary" text /> <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
@@ -55,10 +55,10 @@ const toggle = () => {
</Toolbar> </Toolbar>
</div> </div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<h5>Accordion</h5> <div class="font-semibold text-xl mb-4">Accordion</div>
<Accordion value="0"> <Accordion value="0">
<AccordionPanel value="0"> <AccordionPanel value="0">
<AccordionHeader>Header I</AccordionHeader> <AccordionHeader>Header I</AccordionHeader>
@@ -93,7 +93,7 @@ const toggle = () => {
</Accordion> </Accordion>
</div> </div>
<div class="card"> <div class="card">
<h5>Tabs</h5> <div class="font-semibold text-xl mb-4">Tabs</div>
<Tabs value="0"> <Tabs value="0">
<TabList> <TabList>
<Tab value="0">Header I</Tab> <Tab value="0">Header I</Tab>
@@ -128,7 +128,7 @@ const toggle = () => {
</div> </div>
<div class="md:w-1/2 mt-6 md:mt-0"> <div class="md:w-1/2 mt-6 md:mt-0">
<div class="card"> <div class="card">
<h5>Panel</h5> <div class="font-semibold text-xl mb-4">Panel</div>
<Panel header="Header" :toggleable="true"> <Panel header="Header" :toggleable="true">
<p class="leading-normal m-0"> <p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -138,7 +138,7 @@ const toggle = () => {
</Panel> </Panel>
</div> </div>
<div class="card"> <div class="card">
<h5>Fieldset</h5> <div class="font-semibold text-xl mb-4">Fieldset</div>
<Fieldset legend="Legend" :toggleable="true"> <Fieldset legend="Legend" :toggleable="true">
<p class="leading-normal m-0"> <p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -151,7 +151,7 @@ const toggle = () => {
<Card> <Card>
<template v-slot:title> <template v-slot:title>
<div class="flex items-center justify-between mb-0"> <div class="flex items-center justify-between mb-0">
<h5>Card</h5> <div class="font-semibold text-xl mb-4">Card</div>
<Button icon="pi pi-plus" class="p-button-text" @click="toggle" /> <Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
</div> </div>
<Menu id="config_menu" ref="menuRef" :model="cardMenu" :popup="true" /> <Menu id="config_menu" ref="menuRef" :model="cardMenu" :popup="true" />
@@ -168,8 +168,8 @@ const toggle = () => {
</div> </div>
</div> </div>
<div class="card mt-4"> <div class="card mt-8">
<h5>Divider</h5> <div class="font-semibold text-xl mb-4">Divider</div>
<div class="flex flex-col md:flex-row"> <div class="flex flex-col md:flex-row">
<div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5"> <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
@@ -185,8 +185,8 @@ const toggle = () => {
</div> </div>
</div> </div>
<div class="w-full md:w-2/12"> <div class="w-full md:w-2/12">
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider> <Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider> <Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
</div> </div>
<div class="w-full md:w-5/12 flex items-center justify-center py-5"> <div class="w-full md:w-5/12 flex items-center justify-center py-5">
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button> <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
@@ -195,8 +195,7 @@ const toggle = () => {
</div> </div>
<div class="card"> <div class="card">
<h5>Splitter</h5> <div class="font-semibold text-xl mb-4">Splitter</div>
<Splitter style="height: 300px" class="mb-8"> <Splitter style="height: 300px" class="mb-8">
<SplitterPanel :size="30" :minSize="10"> <SplitterPanel :size="30" :minSize="10">
<div className="h-full flex items-center justify-center">Panel 1</div> <div className="h-full flex items-center justify-center">Panel 1</div>

12
src/views/uikit/TableDoc.vue
View File

@@ -1,8 +1,8 @@
<script setup> <script setup>
import { ref, onBeforeMount, reactive } from 'vue';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import { CustomerService } from '@/service/CustomerService'; import { CustomerService } from '@/service/CustomerService';
import { ProductService } from '@/service/ProductService'; import { ProductService } from '@/service/ProductService';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import { onBeforeMount, reactive, ref } from 'vue';
const customers1 = ref(null); const customers1 = ref(null);
const customers2 = ref(null); const customers2 = ref(null);
@@ -143,7 +143,7 @@ const calculateCustomerTotal = (name) => {
<template> <template>
<div class="card"> <div class="card">
<h5>Filter Menu</h5> <div class="font-semibold text-xl mb-4">Filtering</div>
<DataTable <DataTable
:value="customers1" :value="customers1"
:paginator="true" :paginator="true"
@@ -269,7 +269,7 @@ const calculateCustomerTotal = (name) => {
</div> </div>
<div class="card"> <div class="card">
<h5>Frozen Columns</h5> <div class="font-semibold text-xl mb-4">Frozen Columns</div>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" /> <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
<DataTable :value="customers2" scrollable scrollHeight="400px" class="mt-6"> <DataTable :value="customers2" scrollable scrollHeight="400px" class="mt-6">
@@ -291,7 +291,7 @@ const calculateCustomerTotal = (name) => {
</div> </div>
<div class="card"> <div class="card">
<h5>Row Expand</h5> <div class="font-semibold text-xl mb-4">Row Expansion</div>
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" tableStyle="min-width: 60rem"> <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" tableStyle="min-width: 60rem">
<template #header> <template #header>
<div class="flex flex-wrap justify-end gap-2"> <div class="flex flex-wrap justify-end gap-2">
@@ -351,7 +351,7 @@ const calculateCustomerTotal = (name) => {
</div> </div>
<div class="card"> <div class="card">
<h5>Subheader Grouping</h5> <div class="font-semibold text-xl mb-4">Grouping</div>
<DataTable :value="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"> <DataTable :value="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">

159
src/views/uikit/TimelineDoc.vue Normal file
View File

@@ -0,0 +1,159 @@
<script setup>
import { ref } from 'vue';
const events = ref([
{
status: 'Ordered',
date: '15/10/2020 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/10/2020 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/10/2020 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/10/2020 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
]);
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script>
<template>
<div class="grid grid-cols-12 gap-8">
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Left Align</div>
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Right Align</div>
<Timeline :value="events" align="right">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Alternate Align</div>
<Timeline :value="events" align="alternate">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Opposite Content</div>
<Timeline :value="events">
<template #opposite="slotProps">
<small class="text-muted-color">{{ slotProps.item.date }}</small>
</template>
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Templating</div>
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card class="mt-4">
<template #title>
{{ slotProps.item.status }}
</template>
<template #subtitle>
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse,
cupiditate neque quas!
</p>
<Button label="Read more" text></Button>
</template>
</Card>
</template>
</Timeline>
</div>
</div>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Horizontal</div>
<div class="font-semibold mb-2">Top Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<div class="font-semibold mt-4 mb-2">Bottom Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<div class="font-semibold mt-4 mb-2">Alternate Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
<template #opposite> &nbsp; </template>
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@media screen and (max-width: 960px) {
::v-deep(.customized-timeline) {
.p-timeline-event:nth-child(even) {
flex-direction: row !important;
.p-timeline-event-content {
text-align: left !important;
}
}
.p-timeline-event-opposite {
flex: 0;
}
.p-card {
margin-top: 1rem;
}
}
}
</style>

7
src/views/uikit/TreeDoc.vue
View File

@@ -1,6 +1,6 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue';
import { NodeService } from '@/service/NodeService'; import { NodeService } from '@/service/NodeService';
import { onMounted, ref } from 'vue';
const treeValue = ref(null); const treeValue = ref(null);
const selectedTreeValue = ref(null); const selectedTreeValue = ref(null);
@@ -15,14 +15,13 @@ onMounted(() => {
<template> <template>
<div class="card"> <div class="card">
<h5 class="mb-4">Tree</h5> <div class="font-semibold text-xl">Tree</div>
<Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree> <Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
</div> </div>
<div class="card"> <div class="card">
<h5 class="mb-4">TreeTable</h5> <div class="font-semibold text-xl mb-4">TreeTable</div>
<TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue"> <TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">
<template #header> FileSystem </template>
<Column field="name" header="Name" :expander="true"></Column> <Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column> <Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column> <Column field="type" header="Type"></Column>

6
src/views/uikit/menu/ConfirmationDemo.vue
View File

@@ -1,6 +0,0 @@
<template>
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-check mr-2 text-2xl" />
<p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
</div>
</template>

6
src/views/uikit/menu/PaymentDemo.vue
View File

@@ -1,6 +0,0 @@
<template>
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-money-bill mr-2 text-2xl" />
<p class="m-0 text-lg">Payment Component Content via Child Route</p>
</div>
</template>

6
src/views/uikit/menu/PersonalDemo.vue
View File

@@ -1,6 +0,0 @@
<template>
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-user mr-2 text-2xl" />
<p class="m-0 text-lg">Personal Component Content via Child Route</p>
</div>
</template>

6
src/views/uikit/menu/SeatDemo.vue
View File

@@ -1,6 +0,0 @@
<template>
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-ticket mr-2 text-2xl" />
<p class="m-0 text-lg">Seat Component Content via Child Route</p>
</div>
</template>

806
src/views/utilities/Blocks.vue
View File

@@ -1,806 +0,0 @@
<script setup>
import { ref } from 'vue';
const block1 = ref(` <div class="grid grid-cols-12 gap-4 grid-nogutter bg-surface-0 dark:bg-surface-950 text-surface-800 dark:text-surface-50">
<div class="col-span-12 md:col-span-6 p-12 text-center md:text-left flex items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-4">your visitors deserve to see</div>
<p class="mt-0 mb-6 text-surface-700 dark:text-surface-100 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<Button label="Learn More" type="button" class="mr-4 p-button-raised"></Button>
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
</section>
</div>
<div class="col-span-12 md:col-span-6 overflow-hidden">
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>`);
const block2 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 text-center">
<div class="mb-4 font-bold text-2xl">
<span class="text-surface-900 dark:text-surface-0">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-surface-700 dark:text-surface-100 text-sm mb-12">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Built for Developers</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">End-to-End Encryption</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Easy to Use</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Fast & Global Support</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Open Source</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-span-12 md:col-span-4 md:mb-6 mb-0 px-4">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Trusted Securitty</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>`);
const block3 = ref(` <div class="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
<div class="text-surface-900 dark:text-surface-0 font-bold text-6xl mb-6 text-center">Pricing Plans</div>
<div class="text-surface-700 dark:text-surface-100 text-xl mb-12 text-center leading-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Basic</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$9</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface mt-auto" />
<Button label="Buy Now" class="p-4 w-full mt-auto"></Button>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Premium</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$29</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
<Button label="Buy Now" class="p-4 w-full"></Button>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Enterprise</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$49</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
<Button label="Buy Now" class="p-4 w-full p-button-outlined"></Button>
</div>
</div>
</div>
</div>
</div>`);
const block4 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
<div class="text-surface-700 dark:text-surface-100 text-center">
<div class="text-blue-600 font-bold mb-4"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Join Our Design Community</div>
<div class="text-surface-700 dark:text-surface-100 text-2xl mb-8">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-8 py-4 p-button-raised p-button-rounded whitespace-nowrap"></Button>
</div>
</div>`);
const block5 = ref(` <div class="bg-slate-900 text-gray-100 p-4 flex justify-between lg:justify-center items-center flex-wrap">
<div class="font-bold mr-20">🔥 Hot Deals!</div>
<div class="items-center hidden lg:flex">
<span class="leading-normal">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex items-center ml-2 mr-20">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a v-ripple class="flex items-center no-underline justify-center rounded-full text-gray-50 hover:bg-slate-700 cursor-pointer transition-colors duration-150 p-ripple" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>`);
const block6 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
<ul class="list-none p-0 m-0 flex items-center font-medium mb-4">
<li>
<a class="text-surface-500 dark:text-surface-300 no-underline leading-normal cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-surface-500 dark:text-surface-300 leading-normal"></i>
</li>
<li>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Analytics</span>
</li>
</ul>
<div class="flex items-start flex-col lg:justify-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0">Customers</div>
<div class="flex items-center text-surface-700 dark:text-surface-100 flex-wrap">
<div class="mr-8 flex items-center mt-4">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-8 flex items-center mt-4">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex items-center mt-4">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-4 lg:mt-0">
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
<Button label="Save" icon="pi pi-check"></Button>
</div>
</div>
</div>`);
const block7 = ref(` <div class="bg-surface-50 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div>
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width:2.5rem;height:2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div>
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width:2.5rem;height:2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-surface-500 dark:text-surface-300">since last week</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div>
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width:2.5rem;height:2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div>
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width:2.5rem;height:2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-surface-500 dark:text-surface-300">responded</span>
</div>
</div>
</div>
</div>`);
const block8 = ref(` <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:w-6/12">
<div class="text-center mb-8">
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-4">
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
<span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>
<div>
<label for="email1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Email</label>
<InputText id="email1" type="text" class="w-full mb-4" />
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password</label>
<InputText id="password1" type="password" class="w-full mb-4" />
<div class="flex items-center justify-between mb-12">
<div class="flex items-center">
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
</div>
</div>`);
const block9 = ref(` <div class="bg-surface-0 dark:bg-surface-950">
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0 mb-4">Movie Information</div>
<div class="text-surface-500 dark:text-surface-300 mb-8">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Title</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Heat</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Genre</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">
<Chip label="Crime" class="mr-2"></Chip>
<Chip label="Drama" class="mr-2"></Chip>
<Chip label="Thriller"></Chip>
</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Director</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Michael Mann</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Actors</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Robert De Niro, Al Pacino</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
A group of professional bank robbers start to feel the heat from police
when they unknowingly leave a clue at their latest heist.</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
</ul>
</div>`);
const block10 = ref(` <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
<div class="text-3xl font-medium text-surface-900 dark:text-surface-0 mb-4">Card Title</div>
<div class="font-medium text-surface-500 dark:text-surface-300 mb-4">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed border-surface"></div>
</div>`);
const checked = ref(false);
</script>
<template>
<div>
<BlockViewer header="Hero" :code="block1" free>
<div class="grid grid-cols-12 gap-4 grid-nogutter bg-surface-0 dark:bg-surface-950 text-surface-800 dark:text-surface-50">
<div class="col-span-12 md:col-span-6 p-12 text-center md:text-left flex items-center">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-4">your visitors deserve to see</div>
<p class="mt-0 mb-6 text-surface-700 dark:text-surface-100 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<Button label="Learn More" type="button" class="mr-4 p-button-raised"></Button>
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
</section>
</div>
<div class="col-span-12 md:col-span-6 overflow-hidden">
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
</div>
</div>
</BlockViewer>
<BlockViewer header="Feature" :code="block2" free>
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 text-center">
<div class="mb-4 font-bold text-2xl">
<span class="text-surface-900 dark:text-surface-0">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-surface-700 dark:text-surface-100 text-sm mb-12">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Built for Developers</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">End-to-End Encryption</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Easy to Use</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Fast & Global Support</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Open Source</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-span-12 md:col-span-4 md:mb-6 mb-0 px-4">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Trusted Securitty</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>
</BlockViewer>
<BlockViewer header="Pricing" :code="block3" free>
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
<div class="text-surface-900 dark:text-surface-0 font-bold text-6xl mb-6 text-center">Pricing Plans</div>
<div class="text-surface-700 dark:text-surface-100 text-xl mb-12 text-center leading-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Basic</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$9</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface mt-auto" />
<Button label="Buy Now" class="p-4 w-full mt-auto"></Button>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Premium</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$29</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
<Button label="Buy Now" class="p-4 w-full"></Button>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Enterprise</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$49</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
<Button label="Buy Now" class="p-4 w-full p-button-outlined"></Button>
</div>
</div>
</div>
</div>
</div>
</BlockViewer>
<BlockViewer header="Call to Action" :code="block4" free>
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
<div class="text-surface-700 dark:text-surface-100 text-center">
<div class="text-blue-600 font-bold mb-4"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Join Our Design Community</div>
<div class="text-surface-700 dark:text-surface-100 text-2xl mb-8">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-8 py-4 p-button-raised p-button-rounded whitespace-nowrap"></Button>
</div>
</div>
</BlockViewer>
<BlockViewer header="Banner" :code="block5" containerClass="bg-surface-0 dark:bg-surface-950 py-20" free>
<div class="bg-slate-900 text-gray-100 p-4 flex justify-between lg:justify-center items-center flex-wrap">
<div class="font-bold mr-20">🔥 Hot Deals!</div>
<div class="items-center hidden lg:flex">
<span class="leading-normal">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex items-center ml-2 mr-20">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a v-ripple class="flex items-center no-underline justify-center rounded-full text-gray-50 hover:bg-slate-700 cursor-pointer transition-colors duration-150 p-ripple" style="width: 2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>
</BlockViewer>
<BlockViewer header="Page Heading" :code="block6" free>
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
<ul class="list-none p-0 m-0 flex items-center font-medium mb-4">
<li>
<a class="text-surface-500 dark:text-surface-300 no-underline leading-normal cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-surface-500 dark:text-surface-300 leading-normal"></i>
</li>
<li>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Analytics</span>
</li>
</ul>
<div class="flex items-start flex-col lg:justify-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0">Customers</div>
<div class="flex items-center text-surface-700 dark:text-surface-100 flex-wrap">
<div class="mr-8 flex items-center mt-4">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-8 flex items-center mt-4">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex items-center mt-4">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-4 lg:mt-0">
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
<Button label="Save" icon="pi pi-check"></Button>
</div>
</div>
</div>
</BlockViewer>
<BlockViewer header="Stats" :code="block7" free>
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div>
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div>
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-surface-500 dark:text-surface-300">since last week</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div>
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div>
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-surface-500 dark:text-surface-300">responded</span>
</div>
</div>
</div>
</div>
</BlockViewer>
<BlockViewer header="Sign-In" :code="block8" containerClass="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 flex items-center justify-center" free>
<div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:w-6/12">
<div class="text-center mb-8">
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-4" />
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
<span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>
<div>
<label for="email1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Email</label>
<InputText id="email1" type="text" class="w-full mb-4" />
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password</label>
<InputText id="password1" type="password" class="w-full mb-4" />
<div class="flex items-center justify-between mb-12">
<div class="flex items-center">
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
</div>
</div>
</BlockViewer>
<BlockViewer header="Description List" :code="block9" containerClass="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20" free>
<div class="bg-surface-0 dark:bg-surface-950">
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0 mb-4">Movie Information</div>
<div class="text-surface-500 dark:text-surface-300 mb-8">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Title</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Heat</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Genre</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">
<Chip label="Crime" class="mr-2"></Chip>
<Chip label="Drama" class="mr-2"></Chip>
<Chip label="Thriller"></Chip>
</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Director</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Michael Mann</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Actors</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Robert De Niro, Al Pacino</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
A group of professional bank robbers start to feel the heat from police when they unknowingly leave a clue at their latest heist.
</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
</ul>
</div>
</BlockViewer>
<BlockViewer header="Card" :code="block10" containerClass="px-6 py-20 md:px-12 lg:px-20" free>
<div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
<div class="text-3xl font-medium text-surface-900 dark:text-surface-0 mb-4">Card Title</div>
<div class="font-medium text-surface-500 dark:text-surface-300 mb-4">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed border-surface"></div>
</div>
</BlockViewer>
</div>
</template>

91
src/views/utilities/Icons.vue
View File

@@ -1,91 +0,0 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
const icons = ref(null);
const filter = ref(null);
const filteredIcons = computed(() => {
if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
else return icons.value;
});
onMounted(() => {
fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let data = d.icons.filter((value) => {
return value.icon.tags.indexOf('deprecate') === -1;
});
data.sort((icon1, icon2) => {
if (icon1.properties.name < icon2.properties.name) return -1;
else if (icon1.properties.name > icon2.properties.name) return 1;
else return 0;
});
icons.value = data;
});
});
</script>
<template>
<div class="card">
<h2>Icons</h2>
<p>
PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from
<a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.
</p>
<h4>Download</h4>
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
<pre class="app-code"><code>npm install primeicons --save</code></pre>
<h4>Getting Started</h4>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
<pre class="app-code"><code>&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
<i class="pi pi-times"></i>
<h4>Size</h4>
<p>Size of the icons can easily be changed using font-size property.</p>
<pre class="app-code"><code>&lt;i class="pi pi-check"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check"></i>
<pre class="app-code"><code>&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check" style="font-size: 2rem"></i>
<h4>Spinning Animation</h4>
<p>Special pi-spin class applies continuous rotation to an icon.</p>
<pre class="app-code"><code>&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
<h4>List of Icons</h4>
<p>
Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue tracker.
</p>
<InputText v-model="filter" class="w-full p-4 mt-4 mb-8" placeholder="Search an icon" />
<div class="grid grid-cols-12 gap-4 icons-list text-center">
<div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 pb-8" v-for="icon of filteredIcons" :key="icon.properties.name">
<i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
<div>pi-{{ icon.properties.name }}</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.icons-list {
i {
color: var(--text-color-secondary);
}
}
</style>