vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1386 - New Dock Component

pull/1391/head
Tuğçe Küçükoğlu 2021-07-27 13:03:28 +03:00
parent ffca190c49
commit 98fa9847c6
17 changed files with 765 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
public/demo/images/dock/appstore.svg Normal file
View File

@ -0,0 +1,83 @@
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 32C0 20.799 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.799 0 32 0H54C65.201 0 70.8016 0 75.0798 2.17987C78.843 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.799 86 32V54C86 65.201 86 70.8016 83.8201 75.0798C81.9027 78.843 78.843 81.9027 75.0798 83.8201C70.8016 86 65.201 86 54 86H32C20.799 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.843 2.17987 75.0798C0 70.8016 0 65.201 0 54V32Z" fill="url(#paint0_linear)"/>
<g filter="url(#filter0_ddi)">
<path d="M48.5791 31.9791C48.2773 31.4594 47.5857 31.3265 47.1127 31.6973C44.1401 34.0279 43.3347 38.1903 45.2233 41.4615L59.9554 66.9783C61.0236 68.8284 63.3894 69.4623 65.2395 68.3941C67.0929 67.3241 67.7252 64.9525 66.6506 63.1018L63.1075 57H70C72.2091 57 74 55.2091 74 53C74 50.7909 72.2091 49 70 49H58.4623L48.5791 31.9791Z" fill="white"/>
</g>
<g filter="url(#filter1_ddi)">
<path d="M48.5 16.1019C50.5194 17.2678 51.1659 19.3597 50 21.379L33.8281 49H43.2857C46.4417 49 47.5 51 48.5 53C49.5 55 50 56.5 48.5 56.5H16C13.7909 56.5 12 55.2091 12 53C12 50.7909 13.7909 49 16 49L25.0778 49L36.6187 28.3553C36.5349 28.251 36.4596 28.1355 36.3948 28.0089L33 21.379C32.0306 19.4859 33.0939 17.1653 34.9358 16.1019C36.9153 14.959 39.4484 15.7082 40.4878 17.7441L41.7246 20.1668L43.1741 17.6564C44.3399 15.637 46.4807 14.936 48.5 16.1019Z" fill="white"/>
<path d="M48.5 16.1019C50.5194 17.2678 51.1659 19.3597 50 21.379L33.8281 49H43.2857C46.4417 49 47.5 51 48.5 53C49.5 55 50 56.5 48.5 56.5H16C13.7909 56.5 12 55.2091 12 53C12 50.7909 13.7909 49 16 49L25.0778 49L36.6187 28.3553C36.5349 28.251 36.4596 28.1355 36.3948 28.0089L33 21.379C32.0306 19.4859 33.0939 17.1653 34.9358 16.1019C36.9153 14.959 39.4484 15.7082 40.4878 17.7441L41.7246 20.1668L43.1741 17.6564C44.3399 15.637 46.4807 14.936 48.5 16.1019Z" fill="url(#paint1_linear)"/>
</g>
<g filter="url(#filter2_ddi)">
<path d="M25.5668 59C27.0473 59 27.9398 60.6398 27.1359 61.883L22.9066 68.4242C21.8203 70.1043 19.5662 70.565 17.9078 69.446C16.2933 68.3566 15.8487 66.1749 16.9081 64.5406L19.4692 60.5901C20.112 59.5985 21.2133 59 22.395 59L25.5668 59Z" fill="white"/>
</g>
<defs>
<filter id="filter0_ddi" x="40.2064" y="29.4863" width="37.7936" height="46.4267" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.372549 0 0 0 0 0.643137 0 0 0 0 0.937255 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
</filter>
<filter id="filter1_ddi" x="8" y="13.5378" width="46.578" height="49.9622" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.372549 0 0 0 0 0.643137 0 0 0 0 0.937255 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
</filter>
<filter id="filter2_ddi" x="12.3329" y="57" width="19.1055" height="20.0576" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.372549 0 0 0 0 0.643137 0 0 0 0 0.937255 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
</filter>
<linearGradient id="paint0_linear" x1="25" y1="5" x2="45.5" y2="77.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#17B2EB"/>
<stop offset="1" stop-color="#1565D8"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="34.7118" y1="24.8033" x2="42.2882" y2="20.4291" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

67
public/demo/images/dock/finder.svg Normal file
View File

@ -0,0 +1,67 @@
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 32C0 20.7989 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.7989 0 32 0H54C65.2011 0 70.8016 0 75.0798 2.17987C78.8431 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.7989 86 32V54C86 65.2011 86 70.8016 83.8201 75.0798C81.9027 78.8431 78.8431 81.9027 75.0798 83.8201C70.8016 86 65.2011 86 54 86H32C20.7989 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.8431 2.17987 75.0798C0 70.8016 0 65.2011 0 54V32Z" fill="url(#paint0_linear)"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="86" height="86">
<path d="M0 32C0 20.7989 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.7989 0 32 0H54C65.2011 0 70.8016 0 75.0798 2.17987C78.8431 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.7989 86 32V54C86 65.2011 86 70.8016 83.8201 75.0798C81.9027 78.8431 78.8431 81.9027 75.0798 83.8201C70.8016 86 65.2011 86 54 86H32C20.7989 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.8431 2.17987 75.0798C0 70.8016 0 65.2011 0 54V32Z" fill="url(#paint1_linear)"/>
</mask>
<g mask="url(#mask0)">
<g filter="url(#filter0_d)">
<path d="M33.0051 47.4977C33.2283 25.5268 40.724 6.73119 44.5 0L91.5 -8.5V34L87.5 85C77.5 91.3333 56.2 100.5 51 86.5C45.8 72.5 45.5 55.3333 46 48.5H34.0016C33.4493 48.5 32.9995 48.0499 33.0051 47.4977Z" fill="url(#paint2_linear)"/>
</g>
</g>
<g filter="url(#filter1_d)">
<rect x="59" y="24" width="4" height="9" rx="2" fill="black"/>
</g>
<g filter="url(#filter2_d)">
<rect x="20" y="24" width="4" height="9" rx="2" fill="black"/>
</g>
<g filter="url(#filter3_d)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M67.5398 55.1559C67.9959 55.4582 68.1368 56.0992 67.8544 56.5875L67.0284 56.0401C67.8544 56.5875 67.8537 56.5888 67.8537 56.5888L67.8528 56.5904L67.8505 56.5942L67.8443 56.6048L67.8246 56.6376C67.8082 56.6646 67.7854 56.7017 67.7558 56.7481C67.6968 56.841 67.6109 56.9715 67.4966 57.1342C67.2682 57.4596 66.9261 57.914 66.4577 58.454C65.5209 59.5341 64.0786 60.9569 62.0307 62.3736C57.9259 65.2131 53 68 41.7714 68C25.5 68 19.6097 60.5458 17.1633 56.617C16.8657 56.1391 16.9863 55.4934 17.4327 55.1748C17.8791 54.8562 18.4822 54.9853 18.7798 55.4632C20.8666 58.8144 26.5 65.92 41.7714 65.92C53.5 65.92 57.1883 63.247 60.9763 60.6266C62.8747 59.3133 64.195 58.0061 65.034 57.0387C65.4536 56.5549 65.7528 56.1562 65.9436 55.8844C66.039 55.7486 66.1073 55.6445 66.15 55.5774C66.1713 55.5439 66.1862 55.5196 66.1949 55.5053L66.2025 55.4927L66.2031 55.4917C66.4857 55.0041 67.0839 54.8538 67.5398 55.1559Z" fill="black"/>
</g>
<defs>
<filter id="filter0_d" x="28.005" y="-11.5" width="68.495" height="112.352" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="59" y="24" width="4" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="20" y="24" width="4" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="17" y="55" width="51" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="31" y1="7" x2="39" y2="83.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#19CBF9"/>
<stop offset="1" stop-color="#2867D8"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="43" y1="0" x2="43" y2="86" gradientUnits="userSpaceOnUse">
<stop stop-color="#18CDF8"/>
<stop offset="1" stop-color="#186CF2"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="50.5" y1="8" x2="63.5" y2="81.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#EAECEB"/>
<stop offset="1" stop-color="#D2DCE5"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

89
public/demo/images/dock/github.svg Normal file
View File

@ -0,0 +1,89 @@
<svg width="248" height="248" viewBox="0 0 248 248" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii)">
<g clip-path="url(#clip0)">
<path d="M124 248C178.336 248 208.542 248 228.271 228.271C248 208.542 248 178.336 248 124C248 69.6639 248 39.4577 228.271 19.7288C208.542 -3.28488e-06 178.336 0 124 0C69.6639 0 39.4577 -3.28488e-06 19.7288 19.7288C-3.28488e-06 39.4577 0 69.6639 0 124C0 178.336 -3.28488e-06 208.542 19.7288 228.271C39.4577 248 69.6639 248 124 248Z" fill="url(#paint0_radial)"/>
<g filter="url(#filter1_ii)">
<path d="M124 34C74.305 34 34 74.2975 34 124C34 163.765 59.785 197.5 95.5525 209.402C100.045 210.235 101.5 207.445 101.5 205.075V188.32C76.465 193.765 71.2525 177.7 71.2525 177.7C67.1575 167.298 61.255 164.53 61.255 164.53C53.0875 158.942 61.8775 159.062 61.8775 159.062C70.915 159.692 75.67 168.34 75.67 168.34C83.695 182.095 96.7225 178.12 101.86 175.818C102.663 170.005 104.995 166.03 107.575 163.788C87.5875 161.5 66.5725 153.783 66.5725 119.305C66.5725 109.472 70.09 101.448 75.8425 95.1475C74.9125 92.875 71.83 83.7175 76.72 71.3275C76.72 71.3275 84.28 68.9125 101.478 80.5525C108.655 78.5575 116.35 77.56 124 77.5225C131.65 77.56 139.352 78.5575 146.545 80.5525C163.727 68.9125 171.272 71.3275 171.272 71.3275C176.17 83.725 173.087 92.8825 172.158 95.1475C177.932 101.448 181.42 109.48 181.42 119.305C181.42 153.872 160.368 161.485 140.327 163.712C143.552 166.503 146.5 171.978 146.5 180.378V205.075C146.5 207.467 147.94 210.28 152.507 209.395C188.245 197.477 214 163.75 214 124C214 74.2975 173.702 34 124 34Z" fill="#24292E"/>
</g>
<g style="mix-blend-mode:overlay">
<path d="M124 248C178.336 248 208.542 248 228.271 228.271C248 208.542 248 178.336 248 124C248 69.6639 248 39.4577 228.271 19.7288C208.542 -3.28488e-06 178.336 0 124 0C69.6639 0 39.4577 -3.28488e-06 19.7288 19.7288C-3.28488e-06 39.4577 0 69.6639 0 124C0 178.336 -3.28488e-06 208.542 19.7288 228.271C39.4577 248 69.6639 248 124 248Z" fill="url(#paint1_linear)"/>
</g>
<path d="M124 248C178.336 248 208.542 248 228.271 228.271C248 208.542 248 178.336 248 124C248 69.6639 248 39.4577 228.271 19.7288C208.542 -3.8147e-06 178.336 0 124 0C69.6639 0 39.4577 -3.8147e-06 19.7288 19.7288C-3.8147e-06 39.4577 0 69.6639 0 124C0 178.336 -3.8147e-06 208.542 19.7288 228.271C39.4577 248 69.6639 248 124 248Z" fill="url(#paint2_linear)"/>
<g style="mix-blend-mode:soft-light" filter="url(#filter2_f)">
<path d="M227.211 227.211C217.655 236.766 205.521 241.611 188.896 244.05C172.219 246.496 151.211 246.5 124 246.5C96.7892 246.5 75.7809 246.496 59.1044 244.05C42.4786 241.611 30.345 236.766 20.7895 227.211C11.234 217.655 6.38935 205.521 3.95022 188.896C1.50366 172.219 1.5 151.211 1.5 124C1.5 96.7892 1.50366 75.7809 3.95022 59.1044C6.38935 42.4786 11.234 30.345 20.7895 20.7895C30.345 11.234 42.4786 6.38935 59.1044 3.95022C75.7809 1.50366 96.7892 1.5 124 1.5C151.211 1.5 172.219 1.50366 188.896 3.95022C205.521 6.38935 217.655 11.234 227.211 20.7895C236.766 30.345 241.611 42.4786 244.05 59.1044C246.496 75.7809 246.5 96.7892 246.5 124C246.5 151.211 246.496 172.219 244.05 188.896C241.611 205.521 236.766 217.655 227.211 227.211Z" stroke="url(#paint3_linear)" stroke-width="3"/>
</g>
<g style="mix-blend-mode:soft-light" filter="url(#filter3_f)">
<path d="M226.857 226.857C217.404 236.31 205.388 241.125 188.823 243.555C172.191 245.995 151.225 246 124 246C96.775 246 75.809 245.995 59.177 243.555C42.6124 241.125 30.5956 236.31 21.143 226.857C11.6905 217.404 6.87506 205.388 4.44492 188.823C2.00488 172.191 2 151.225 2 124C2 96.775 2.00488 75.809 4.44492 59.177C6.87506 42.6124 11.6905 30.5956 21.143 21.143C30.5956 11.6905 42.6124 6.87506 59.177 4.44492C75.809 2.00488 96.775 2 124 2C151.225 2 172.191 2.00488 188.823 4.44492C205.388 6.87506 217.404 11.6905 226.857 21.143C236.31 30.5956 241.125 42.6124 243.555 59.177C245.995 75.809 246 96.775 246 124C246 151.225 245.995 172.191 243.555 188.823C241.125 205.388 236.31 217.404 226.857 226.857Z" stroke="url(#paint4_linear)" stroke-width="4"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_ii" x="0" y="-2" width="248" height="252" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
</filter>
<filter id="filter1_ii" x="34" y="32" width="180" height="184" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
</filter>
<filter id="filter2_f" x="-2" y="-2" width="252" height="252" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/>
</filter>
<filter id="filter3_f" x="-6" y="-6" width="260" height="260" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur"/>
</filter>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(124 124) rotate(90) scale(124)">
<stop stop-color="#FAFBFC"/>
<stop offset="1" stop-color="#F6F8FA"/>
</radialGradient>
<linearGradient id="paint1_linear" x1="-2.90864" y1="4.96427e-07" x2="64.9836" y2="290.737" gradientUnits="userSpaceOnUse">
<stop stop-opacity="0"/>
<stop offset="0.605667" stop-opacity="0.0781197"/>
<stop offset="1" stop-opacity="0.26"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="-2.90864" y1="4.96427e-07" x2="64.9836" y2="290.737" gradientUnits="userSpaceOnUse">
<stop offset="0.140625" stop-color="white" stop-opacity="0.26"/>
<stop offset="0.640625" stop-color="white" stop-opacity="0.0781197"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="124" y1="248" x2="124" y2="209.25" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="124" y1="0" x2="124" y2="124" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0">
<rect width="248" height="248" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

187
public/demo/images/dock/photos.svg Normal file
View File

@ -0,0 +1,187 @@
<svg width="86" height="87" viewBox="0 0 86 87" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 32C0 20.799 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.799 0 32 0H54C65.201 0 70.8016 0 75.0798 2.17987C78.843 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.799 86 32V54C86 65.201 86 70.8016 83.8201 75.0798C81.9027 78.843 78.843 81.9027 75.0798 83.8201C70.8016 86 65.201 86 54 86H32C20.799 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.843 2.17987 75.0798C0 70.8016 0 65.201 0 54V32Z" fill="#FCFCF4"/>
<g opacity="0.2" filter="url(#filter0_f)">
<g style="mix-blend-mode:multiply">
<rect x="31" y="8" width="24" height="35" rx="12" fill="#FFA625"/>
</g>
<g style="mix-blend-mode:multiply">
<rect x="31" y="48" width="24" height="35" rx="12" fill="#69ABDF"/>
</g>
<g style="mix-blend-mode:multiply">
<rect x="60.7488" y="11" width="23" height="35" rx="11.5" transform="rotate(45 60.7488 11)" fill="#E7E00B"/>
</g>
<g style="mix-blend-mode:multiply">
<rect x="77.0122" y="63.7488" width="23" height="35" rx="11.5" transform="rotate(135 77.0122 63.7488)" fill="#63BE9D"/>
</g>
<g style="mix-blend-mode:multiply">
<rect x="8.20319" y="27.6628" width="23" height="35" rx="11.5" transform="rotate(-45 8.20319 27.6628)" fill="#FE6D51"/>
</g>
<g style="mix-blend-mode:multiply">
<rect x="24.4667" y="80.0122" width="23" height="35" rx="11.5" transform="rotate(-135 24.4667 80.0122)" fill="#A387C1"/>
</g>
<g style="mix-blend-mode:multiply">
<rect x="80" y="34" width="23" height="35" rx="11.5" transform="rotate(90 80 34)" fill="#9FCF45"/>
</g>
<g style="mix-blend-mode:multiply">
<rect x="41" y="34" width="23" height="35" rx="11.5" transform="rotate(90 41 34)" fill="#D47A9E"/>
</g>
</g>
<g style="mix-blend-mode:multiply" filter="url(#filter1_di)">
<rect x="31" y="5" width="24" height="35" rx="12" fill="#FFA625"/>
<rect x="31" y="5" width="24" height="35" rx="12" fill="url(#paint0_linear)" style="mix-blend-mode:overlay"/>
</g>
<g style="mix-blend-mode:multiply" filter="url(#filter2_di)">
<rect x="31" y="45" width="24" height="35" rx="12" fill="#69ABDF"/>
</g>
<g style="mix-blend-mode:multiply" filter="url(#filter3_di)">
<rect x="60.7488" y="8" width="23" height="35" rx="11.5" transform="rotate(45 60.7488 8)" fill="#E7E00B"/>
</g>
<g style="mix-blend-mode:multiply" filter="url(#filter4_di)">
<rect x="77.0122" y="60.7488" width="23" height="35" rx="11.5" transform="rotate(135 77.0122 60.7488)" fill="#63BE9D"/>
</g>
<g style="mix-blend-mode:multiply" filter="url(#filter5_di)">
<rect x="8.20319" y="24.6628" width="23" height="35" rx="11.5" transform="rotate(-45 8.20319 24.6628)" fill="#FE6D51"/>
<rect x="8.20319" y="24.6628" width="23" height="35" rx="11.5" transform="rotate(-45 8.20319 24.6628)" fill="url(#paint1_linear)" style="mix-blend-mode:overlay"/>
</g>
<g style="mix-blend-mode:multiply" filter="url(#filter6_di)">
<rect x="24.4667" y="77.0122" width="23" height="35" rx="11.5" transform="rotate(-135 24.4667 77.0122)" fill="#A387C1"/>
</g>
<g style="mix-blend-mode:multiply" filter="url(#filter7_di)">
<rect x="80" y="31" width="23" height="35" rx="11.5" transform="rotate(90 80 31)" fill="#9FCF45"/>
</g>
<g style="mix-blend-mode:multiply" filter="url(#filter8_di)">
<rect x="40" y="31" width="23" height="35" rx="11.5" transform="rotate(90 40 31)" fill="#D47A9E"/>
<rect x="40" y="31" width="23" height="35" rx="11.5" transform="rotate(90 40 31)" fill="url(#paint2_linear)" style="mix-blend-mode:overlay"/>
</g>
<defs>
<filter id="filter0_f" x="2" y="4" width="82" height="83" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur"/>
</filter>
<filter id="filter1_di" x="28" y="4" width="30" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<filter id="filter2_di" x="28" y="44" width="30" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<filter id="filter3_di" x="37.7635" y="11.7635" width="37.4853" height="37.4853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<filter id="filter4_di" x="37.7635" y="39.7635" width="37.4853" height="37.4853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<filter id="filter5_di" x="9.96661" y="12.1628" width="37.4853" height="37.4853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<filter id="filter6_di" x="9.96667" y="39.7635" width="37.4853" height="37.4853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<filter id="filter7_di" x="42" y="30" width="41" height="29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<filter id="filter8_di" x="2" y="30" width="41" height="29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<linearGradient id="paint0_linear" x1="40" y1="-9.5" x2="48" y2="12.5" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="12.0637" y1="20.5149" x2="21.2561" y2="30.4144" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="43" y1="75" x2="48" y2="52" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/demo/images/dock/preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

57
public/demo/images/dock/safari.svg Normal file
View File

@ -0,0 +1,57 @@
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 32C0 20.799 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.799 0 32 0H54C65.201 0 70.8016 0 75.0798 2.17987C78.843 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.799 86 32V54C86 65.201 86 70.8016 83.8201 75.0798C81.9027 78.843 78.843 81.9027 75.0798 83.8201C70.8016 86 65.201 86 54 86H32C20.799 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.843 2.17987 75.0798C0 70.8016 0 65.201 0 54V32Z" fill="url(#paint0_linear)"/>
<g filter="url(#filter0_di)">
<circle cx="43" cy="43" r="37" fill="url(#paint1_linear)"/>
</g>
<circle cx="43" cy="43" r="32.9629" transform="rotate(4.84342 43 43)" stroke="white" stroke-width="3" stroke-dasharray="1 5"/>
<circle cx="43" cy="43" r="31.4629" transform="rotate(-10.1566 43 43)" stroke="white" stroke-width="6" stroke-dasharray="1 5"/>
<g filter="url(#filter1_d)">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="39" y="21" width="29" height="26">
<path d="M39 39.5L67.5 21L45 46.5L39 39.5Z" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path d="M39 39.5L67.5 21L45 46.5L39 39.5Z" fill="#D27067"/>
<path d="M40.5 44.5L67.5 21L45 46.5L40.5 44.5Z" fill="#B63027"/>
</g>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="17" y="39" width="29" height="26">
<path d="M45.5 46L17 64.5L39.5 39L45.5 46Z" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask1)">
<path d="M45.5 46L17 64.5L39.5 39L45.5 46Z" fill="#CEC4CC"/>
<path d="M44 41L17 64.5L39.5 39L44 41Z" fill="#FCFFF6"/>
</g>
</g>
<defs>
<filter id="filter0_di" x="6" y="6" width="74" height="76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.53 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.37 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<filter id="filter1_d" x="13" y="19" width="58.5" height="51.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.74 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="22" y1="76.5" x2="60" y2="-4.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#D5D5D5"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="57.6053" y1="13.3026" x2="43" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="#25B5F8"/>
<stop offset="1" stop-color="#3570B6"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
public/demo/images/dock/settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

11
public/demo/images/dock/terminal.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 32C4 26.3335 4.00311 22.3241 4.2592 19.1898C4.51147 16.1021 4.98916 14.2174 5.7439 12.7362C7.27787 9.72556 9.72556 7.27787 12.7362 5.7439C14.2174 4.98916 16.1021 4.51147 19.1898 4.2592C22.3241 4.00311 26.3335 4 32 4H54C59.6665 4 63.6759 4.00311 66.8102 4.2592C69.8979 4.51147 71.7826 4.98916 73.2638 5.7439C76.2744 7.27787 78.7221 9.72556 80.2561 12.7361C81.0108 14.2174 81.4885 16.1021 81.7408 19.1898C81.9969 22.3241 82 26.3335 82 32V54C82 59.6665 81.9969 63.6759 81.7408 66.8102C81.4885 69.8979 81.0108 71.7826 80.2561 73.2638C78.7221 76.2744 76.2744 78.7221 73.2638 80.2561C71.7826 81.0108 69.8979 81.4885 66.8102 81.7408C63.6759 81.9969 59.6665 82 54 82H32C26.3335 82 22.3241 81.9969 19.1898 81.7408C16.1021 81.4885 14.2174 81.0108 12.7362 80.2561C9.72556 78.7221 7.27787 76.2744 5.74389 73.2638C4.98916 71.7826 4.51147 69.8979 4.2592 66.8102C4.00311 63.6759 4 59.6665 4 54V32Z" fill="#262626" stroke="black" stroke-width="8"/>
<path d="M1 32C1 26.383 1.00078 22.2303 1.26916 18.9455C1.53659 15.6723 2.06474 13.3488 3.07088 11.3742C4.89247 7.7991 7.7991 4.89247 11.3742 3.07088C13.3488 2.06474 15.6723 1.53659 18.9455 1.26916C22.2303 1.00078 26.383 1 32 1H54C59.617 1 63.7697 1.00078 67.0545 1.26916C70.3277 1.53659 72.6512 2.06474 74.6258 3.07088C78.2009 4.89247 81.1075 7.7991 82.9291 11.3742C83.9353 13.3488 84.4634 15.6723 84.7308 18.9455C84.9992 22.2303 85 26.383 85 32V54C85 59.617 84.9992 63.7697 84.7308 67.0545C84.4634 70.3277 83.9353 72.6512 82.9291 74.6258C81.1075 78.2009 78.2009 81.1075 74.6258 82.9291C72.6512 83.9353 70.3277 84.4634 67.0545 84.7308C63.7697 84.9992 59.617 85 54 85H32C26.383 85 22.2303 84.9992 18.9455 84.7308C15.6723 84.4634 13.3488 83.9353 11.3742 82.9291C7.7991 81.1075 4.89247 78.2009 3.07088 74.6258C2.06474 72.6512 1.53659 70.3277 1.26916 67.0545C1.00078 63.7697 1 59.617 1 54V32Z" stroke="url(#paint0_linear)" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 15.5V18L24 22L16 26.5V29L26 23.5V20.5L16 15.5ZM41 30H30V33H41V30Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear" x1="43" y1="0" x2="43" y2="86" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1F2F2"/>
<stop offset="1" stop-color="#888886"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
public/demo/images/dock/trash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/images/dock/window.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 KiB

5
src/assets/menu/menu.json
View File

@ -672,6 +672,11 @@
{
"name": "TieredMenu",
"to": "/tieredmenu"
},
{
"name": "Dock",
"to": "/dock",
"badge": "New"
}
]
},

17
src/components/dock/Dock.d.ts vendored Normal file
View File

@ -0,0 +1,17 @@
import { VNode } from 'vue';
interface DockProps {
position?: string;
model?: any[];
class?: string;
style?: any;
}
declare class Dock {
$props: DockProps;
$slots: {
'item': VNode[];
}
}
export default Dock;

163
src/components/dock/Dock.vue Normal file
View File

@ -0,0 +1,163 @@
<template>
<div :class="containerClass" :style="style">
<DockSub :model="model" :template="$slots.item"></DockSub>
</div>
</template>
<script>
import DockSub from './DockSub.vue';
export default {
name: 'Dock',
props: {
position: {
type: String,
default: "bottom"
},
model: null,
class: null,
style: null
},
data() {
return {
currentIndex: -3
}
},
methods: {
onListMouseLeave() {
this.currentIndex = -3;
},
onItemMouseEnter(index) {
this.currentIndex = index;
},
onItemClick(e, item) {
if (item.command) {
item.command({ originalEvent: e, item });
}
e.preventDefault();
},
itemClass(index) {
return ['p-dock-item', {
'p-dock-item-second-prev': (this.currentIndex - 2) === index,
'p-dock-item-prev': (this.currentIndex - 1) === index,
'p-dock-item-current': this.currentIndex === index,
'p-dock-item-next': (this.currentIndex + 1) === index,
'p-dock-item-second-next': (this.currentIndex + 2) === index
}];
}
},
computed: {
containerClass() {
return ['p-dock p-component', `p-dock-${this.position}`, this.class];
}
},
components: {
DockSub
}
}
</script>
<style>
.p-dock {
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.p-dock-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.p-dock-item {
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.p-dock-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: default;
}
.p-dock-item-second-prev,
.p-dock-item-second-next {
transform: scale(1.2);
}
.p-dock-item-prev,
.p-dock-item-next {
transform: scale(1.4);
}
.p-dock-item-current {
transform: scale(1.6);
z-index: 1;
}
/* Position */
/* top */
.p-dock-top {
left: 0;
top: 0;
width: 100%;
}
.p-dock-top .p-dock-item {
transform-origin: center top;
}
/* bottom */
.p-dock-bottom {
left: 0;
bottom: 0;
width: 100%;
}
.p-dock-bottom .p-dock-item {
transform-origin: center bottom;
}
/* right */
.p-dock-right {
right: 0;
top: 0;
height: 100%;
}
.p-dock-right .p-dock-item {
transform-origin: center right;
}
.p-dock-right .p-dock-list {
flex-direction: column;
}
/* left */
.p-dock-left {
left: 0;
top: 0;
height: 100%;
}
.p-dock-left .p-dock-item {
transform-origin: center left;
}
.p-dock-left .p-dock-list {
flex-direction: column;
}
</style>

70
src/components/dock/DockSub.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
<li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
<template v-if="!template">
<router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{href}">
<a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': item.disabled }]" :target="item.target"
:data-pr-tooltip="item.label" @click="onItemClick(e, item)">
<template v-if="typeof item.icon === 'string'">
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
</template>
<component v-else :is="item.icon"></component>
</a>
</router-link>
<a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': item.disabled }]" :target="item.target"
:data-pr-tooltip="item.label" @click="onItemClick($event, item)">
<template v-if="typeof item.icon === 'string'">
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
</template>
<component v-else :is="item.icon"></component>
</a>
</template>
<component v-else :is="template" :item="item"></component>
</li>
</ul>
</template>
<script>
export default {
name: 'DockSub',
props: {
model: {
type: Array,
default: null
},
template: {
type: Function,
default: null
}
},
data() {
return {
currentIndex: -3
}
},
methods: {
onListMouseLeave() {
this.currentIndex = -3;
},
onItemMouseEnter(index) {
this.currentIndex = index;
},
onItemClick(e, item) {
if (item.command) {
item.command({ originalEvent: e, item });
}
e.preventDefault();
},
itemClass(index) {
return ['p-dock-item', {
'p-dock-item-second-prev': (this.currentIndex - 2) === index,
'p-dock-item-prev': (this.currentIndex - 1) === index,
'p-dock-item-current': this.currentIndex === index,
'p-dock-item-next': (this.currentIndex + 1) === index,
'p-dock-item-second-next': (this.currentIndex + 2) === index
}];
}
}
}
</script>

9
src/components/dock/package.json Normal file
View File

@ -0,0 +1,9 @@
{
"main": "./dock.cjs.js",
"module": "./dock.esm.js",
"unpkg": "./dock.min.js",
"types": "./Dock.d.ts",
"browser": {
"./sfc": "./Dock.vue"
}
}

2
src/main.js
View File

@ -34,6 +34,7 @@ import DataViewLayoutOptions from './components/dataviewlayoutoptions/DataViewLa
import DeferredContent from './components/deferredcontent/DeferredContent';
import Dialog from './components/dialog/Dialog';
import Divider from './components/divider/Divider';
import Dock from './components/dock/Dock';
import Dropdown from './components/dropdown/Dropdown';
import Editor from './components/editor/Editor';
import Fieldset from './components/fieldset/Fieldset';
@ -155,6 +156,7 @@ app.component('DataViewLayoutOptions', DataViewLayoutOptions);
app.component('DeferredContent', DeferredContent);
app.component('Dialog', Dialog);
app.component('Divider', Divider);
app.component('Dock', Dock);
app.component('Dropdown', Dropdown);
app.component('Editor', Editor);
app.component('Fieldset', Fieldset);

5
src/router/index.js
View File

@ -332,6 +332,11 @@ const routes = [
name: 'divider',
component: () => import('../views/divider/DividerDemo.vue')
},
{
path: '/dock',
name: 'dock',
component: () => import('../views/dock/DockDemo.vue')
},
{
path: '/dropdown',
name: 'dropdown',