├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── .vscode └── extensions.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── components.d.ts ├── index.html ├── package.json ├── packages ├── Coolshape.vue ├── MyComponent.vue ├── NoiseMask.vue ├── ShapeBase.vue ├── index.ts ├── shapes │ ├── Ellipse.vue │ ├── Flower.vue │ ├── Misc.vue │ ├── Moon.vue │ ├── Number.vue │ ├── Polygon.vue │ ├── Rectangle.vue │ ├── Star.vue │ ├── Triangle.vue │ ├── Wheel.vue │ ├── ellipses │ │ ├── Ellipse1.vue │ │ ├── Ellipse10.vue │ │ ├── Ellipse11.vue │ │ ├── Ellipse12.vue │ │ ├── Ellipse2.vue │ │ ├── Ellipse3.vue │ │ ├── Ellipse4.vue │ │ ├── Ellipse5.vue │ │ ├── Ellipse6.vue │ │ ├── Ellipse7.vue │ │ ├── Ellipse8.vue │ │ └── Ellipse9.vue │ ├── flowers │ │ ├── Flower1.vue │ │ ├── Flower10.vue │ │ ├── Flower11.vue │ │ ├── Flower12.vue │ │ ├── Flower13.vue │ │ ├── Flower14.vue │ │ ├── Flower15.vue │ │ ├── Flower16.vue │ │ ├── Flower2.vue │ │ ├── Flower3.vue │ │ ├── Flower4.vue │ │ ├── Flower5.vue │ │ ├── Flower6.vue │ │ ├── Flower7.vue │ │ ├── Flower8.vue │ │ └── Flower9.vue │ ├── index.ts │ ├── miscs │ │ ├── Misc1.vue │ │ ├── Misc10.vue │ │ ├── Misc11.vue │ │ ├── Misc2.vue │ │ ├── Misc3.vue │ │ ├── Misc4.vue │ │ ├── Misc5.vue │ │ ├── Misc6.vue │ │ ├── Misc7.vue │ │ ├── Misc8.vue │ │ └── Misc9.vue │ ├── moons │ │ ├── Moon1.vue │ │ ├── Moon10.vue │ │ ├── Moon11.vue │ │ ├── Moon12.vue │ │ ├── Moon13.vue │ │ ├── Moon14.vue │ │ ├── Moon15.vue │ │ ├── Moon2.vue │ │ ├── Moon3.vue │ │ ├── Moon4.vue │ │ ├── Moon5.vue │ │ ├── Moon6.vue │ │ ├── Moon7.vue │ │ ├── Moon8.vue │ │ └── Moon9.vue │ ├── numbers │ │ ├── Number0.vue │ │ ├── Number1.vue │ │ ├── Number2.vue │ │ ├── Number3.vue │ │ ├── Number4.vue │ │ ├── Number5.vue │ │ ├── Number6.vue │ │ ├── Number7.vue │ │ ├── Number8.vue │ │ └── Number9.vue │ ├── playground.svg │ ├── polygons │ │ ├── Polygon1.vue │ │ ├── Polygon2.vue │ │ ├── Polygon3.vue │ │ ├── Polygon4.vue │ │ ├── Polygon5.vue │ │ ├── Polygon6.vue │ │ ├── Polygon7.vue │ │ └── Polygon8.vue │ ├── rectangles │ │ ├── Rectangle1.vue │ │ ├── Rectangle2.vue │ │ ├── Rectangle3.vue │ │ ├── Rectangle4.vue │ │ ├── Rectangle5.vue │ │ ├── Rectangle6.vue │ │ ├── Rectangle7.vue │ │ ├── Rectangle8.vue │ │ └── Rectangle9.vue │ ├── stars │ │ ├── Star1.vue │ │ ├── Star10.vue │ │ ├── Star11.vue │ │ ├── Star12.vue │ │ ├── Star13.vue │ │ ├── Star2.vue │ │ ├── Star3.vue │ │ ├── Star4.vue │ │ ├── Star5.vue │ │ ├── Star6.vue │ │ ├── Star7.vue │ │ ├── Star8.vue │ │ └── Star9.vue │ ├── triangles │ │ ├── Triangle1.vue │ │ ├── Triangle10.vue │ │ ├── Triangle11.vue │ │ ├── Triangle12.vue │ │ ├── Triangle13.vue │ │ ├── Triangle14.vue │ │ ├── Triangle2.vue │ │ ├── Triangle3.vue │ │ ├── Triangle4.vue │ │ ├── Triangle5.vue │ │ ├── Triangle6.vue │ │ ├── Triangle7.vue │ │ ├── Triangle8.vue │ │ └── Triangle9.vue │ └── wheels │ │ ├── Wheel1.vue │ │ ├── Wheel2.vue │ │ ├── Wheel3.vue │ │ ├── Wheel4.vue │ │ ├── Wheel5.vue │ │ ├── Wheel6.vue │ │ └── Wheel7.vue └── types.ts ├── pnpm-lock.yaml ├── public ├── logo.svg └── preview.jpg ├── src ├── App.vue ├── assets │ └── highlight.scss ├── components │ ├── LinkButton.vue │ ├── Logo.vue │ ├── Seprator.vue │ ├── ShapeGrid.vue │ ├── ToggleButton.vue │ └── icons │ │ ├── CopyIcon.vue │ │ ├── DownloadIcon.vue │ │ └── index.ts ├── composables │ └── useDarkmode.ts ├── main.ts ├── plugins │ └── highlight.ts ├── utils │ └── helper.ts └── vite-env.d.ts ├── tsconfig.build.json ├── tsconfig.json ├── tsconfig.node.json ├── unocss.config.ts └── vite.config.ts /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [xiaoluoboding] 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | lib 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "singleQuote": true, 5 | "semi": false, 6 | "trailingComma": "none", 7 | "printWidth": 80 8 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [0.1.2](https://github.com/xiaoluoboding/coolshapes-vue/compare/v0.1.1...v0.1.2) (2024-07-08) 2 | 3 | 4 | ### Bug Fixes 5 | 6 | * fixed the disordered shape id ([8dc3fb0](https://github.com/xiaoluoboding/coolshapes-vue/commit/8dc3fb08b6e9f19b7fe067b804f2e9fc15c86c67)) 7 | 8 | 9 | 10 | ## [0.1.1](https://github.com/xiaoluoboding/coolshapes-vue/compare/v0.1.0...v0.1.1) (2024-05-19) 11 | 12 | 13 | ### Bug Fixes 14 | 15 | * fixed the type error ([a4f0ef3](https://github.com/xiaoluoboding/coolshapes-vue/commit/a4f0ef3390f50a1c3107c69a3a0db0944d4dd8c2)) 16 | 17 | 18 | ### Features 19 | 20 | * add SEO meta ([3d4e024](https://github.com/xiaoluoboding/coolshapes-vue/commit/3d4e024bd0d411149cbdc1a8e2ddf7e9bcec894f)) 21 | 22 | 23 | 24 | # 0.1.0 (2024-05-06) 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Robert Shaw 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* prettier-ignore */ 3 | // @ts-nocheck 4 | // Generated by unplugin-vue-components 5 | // Read more: https://github.com/vuejs/core/pull/3399 6 | export {} 7 | 8 | declare module 'vue' { 9 | export interface GlobalComponents { 10 | 'Carbon:cafe': typeof import('~icons/carbon/cafe')['default'] 11 | 'Carbon:logoGithub': typeof import('~icons/carbon/logo-github')['default'] 12 | 'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default'] 13 | 'Carbon:moon': typeof import('~icons/carbon/moon')['default'] 14 | 'Carbon:sun': typeof import('~icons/carbon/sun')['default'] 15 | CopyIcon: typeof import('./src/components/icons/CopyIcon.vue')['default'] 16 | DownloadIcon: typeof import('./src/components/icons/DownloadIcon.vue')['default'] 17 | LinkButton: typeof import('./src/components/LinkButton.vue')['default'] 18 | Logo: typeof import('./src/components/Logo.vue')['default'] 19 | 'Mdi:heart': typeof import('~icons/mdi/heart')['default'] 20 | Seprator: typeof import('./src/components/Seprator.vue')['default'] 21 | ShapeGrid: typeof import('./src/components/ShapeGrid.vue')['default'] 22 | ToggleButton: typeof import('./src/components/ToggleButton.vue')['default'] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Coolshapes Vue 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coolshapes-vue", 3 | "description": "A vue component library for coolshapes with little grainy gradients.", 4 | "version": "0.1.2", 5 | "type": "module", 6 | "author": "xiaoluoboding ", 7 | "scripts": { 8 | "dev": "vite --port 5353", 9 | "build:docs": "vite build --mode docs", 10 | "build:lib": "vite build --mode lib && vue-tsc -p tsconfig.build.json", 11 | "preview": "vite preview", 12 | "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/xiaoluoboding/coolshapes-vue.git" 17 | }, 18 | "homepage": "https://github.com/xiaoluoboding/coolshapes-vue", 19 | "files": [ 20 | "lib" 21 | ], 22 | "keywords": [ 23 | "coolshapes", 24 | "shapes", 25 | "abstract", 26 | "svg", 27 | "vector", 28 | "avatar", 29 | "illustration", 30 | "graphics", 31 | "placeholder" 32 | ], 33 | "main": "./lib/coolshapes-vue.umd.cjs", 34 | "module": "./lib/coolshapes-vue.js", 35 | "exports": { 36 | ".": { 37 | "import": "./lib/coolshapes-vue.js", 38 | "require": "./lib/coolshapes-vue.umd.cjs", 39 | "types": "./lib/index.d.ts" 40 | } 41 | }, 42 | "types": "./lib/index.d.ts", 43 | "devDependencies": { 44 | "@iconify/json": "^2.2.207", 45 | "@types/node": "^18.19.31", 46 | "@unocss/reset": "^0.55.7", 47 | "@vitejs/plugin-vue": "^4.6.2", 48 | "@vueuse/core": "^10.9.0", 49 | "clean-css": "^5.3.3", 50 | "highlight.js": "^11.9.0", 51 | "sass": "^1.76.0", 52 | "typescript": "^4.9.5", 53 | "unocss": "^0.55.7", 54 | "unplugin-icons": "^0.16.6", 55 | "unplugin-vue-components": "^0.25.2", 56 | "vite": "^4.5.3", 57 | "vue": "^3.4.26", 58 | "vue-tsc": "^1.8.27" 59 | }, 60 | "dependencies": { 61 | "@unhead/vue": "^1.9.10", 62 | "copy-to-clipboard": "^3.3.3", 63 | "unhead": "^1.9.10" 64 | } 65 | } -------------------------------------------------------------------------------- /packages/Coolshape.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 60 | -------------------------------------------------------------------------------- /packages/MyComponent.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /packages/NoiseMask.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /packages/ShapeBase.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /packages/index.ts: -------------------------------------------------------------------------------- 1 | export { shapes } from './shapes' 2 | 3 | import Star from './shapes/Star.vue' 4 | import Flower from './shapes/Flower.vue' 5 | import Ellipse from './shapes/Ellipse.vue' 6 | import Wheel from './shapes/Wheel.vue' 7 | import Moon from './shapes/Moon.vue' 8 | import Misc from './shapes/Misc.vue' 9 | import Triangle from './shapes/Triangle.vue' 10 | import Polygon from './shapes/Polygon.vue' 11 | import Rectangle from './shapes/Rectangle.vue' 12 | import Number from './shapes/Number.vue' 13 | import NoiseMask from './NoiseMask.vue' 14 | import Coolshape from './Coolshape.vue' 15 | 16 | export { 17 | Coolshape, 18 | Star, 19 | Flower, 20 | Ellipse, 21 | Wheel, 22 | Moon, 23 | Misc, 24 | Triangle, 25 | Polygon, 26 | Rectangle, 27 | Number, 28 | NoiseMask 29 | } 30 | -------------------------------------------------------------------------------- /packages/shapes/Ellipse.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /packages/shapes/Flower.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/shapes/Misc.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/shapes/Moon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/shapes/Number.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 | -------------------------------------------------------------------------------- /packages/shapes/Polygon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/shapes/Rectangle.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/shapes/Star.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/shapes/Triangle.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/shapes/Wheel.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /packages/shapes/ellipses/Ellipse1.vue: -------------------------------------------------------------------------------- 1 | 77 | 78 | 84 | -------------------------------------------------------------------------------- /packages/shapes/ellipses/Ellipse10.vue: -------------------------------------------------------------------------------- 1 | 80 | 81 | 87 | -------------------------------------------------------------------------------- /packages/shapes/ellipses/Ellipse11.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 68 | -------------------------------------------------------------------------------- /packages/shapes/ellipses/Ellipse12.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 62 | -------------------------------------------------------------------------------- /packages/shapes/ellipses/Ellipse4.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 71 | -------------------------------------------------------------------------------- /packages/shapes/ellipses/Ellipse7.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 64 | -------------------------------------------------------------------------------- /packages/shapes/ellipses/Ellipse8.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 73 | -------------------------------------------------------------------------------- /packages/shapes/flowers/Flower1.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 82 | -------------------------------------------------------------------------------- /packages/shapes/flowers/Flower14.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/flowers/Flower15.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/flowers/Flower16.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 60 | -------------------------------------------------------------------------------- /packages/shapes/flowers/Flower5.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 60 | -------------------------------------------------------------------------------- /packages/shapes/flowers/Flower8.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 65 | -------------------------------------------------------------------------------- /packages/shapes/flowers/Flower9.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 74 | -------------------------------------------------------------------------------- /packages/shapes/miscs/Misc1.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 71 | -------------------------------------------------------------------------------- /packages/shapes/miscs/Misc10.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 80 | -------------------------------------------------------------------------------- /packages/shapes/miscs/Misc11.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 55 | -------------------------------------------------------------------------------- /packages/shapes/miscs/Misc4.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/miscs/Misc5.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 65 | -------------------------------------------------------------------------------- /packages/shapes/miscs/Misc6.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 82 | -------------------------------------------------------------------------------- /packages/shapes/miscs/Misc7.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 82 | -------------------------------------------------------------------------------- /packages/shapes/miscs/Misc8.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 49 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon1.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 64 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon11.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 63 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon13.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon14.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 58 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon15.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon3.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 63 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon5.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 58 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon6.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 64 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon8.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 60 | -------------------------------------------------------------------------------- /packages/shapes/moons/Moon9.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number0.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 81 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number1.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 73 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number2.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 68 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number4.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 72 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number5.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 72 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number6.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 86 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number7.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 75 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number8.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 81 | -------------------------------------------------------------------------------- /packages/shapes/numbers/Number9.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 82 | -------------------------------------------------------------------------------- /packages/shapes/playground.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /packages/shapes/polygons/Polygon2.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 60 | -------------------------------------------------------------------------------- /packages/shapes/polygons/Polygon4.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 81 | -------------------------------------------------------------------------------- /packages/shapes/polygons/Polygon5.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 65 | -------------------------------------------------------------------------------- /packages/shapes/polygons/Polygon6.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 82 | -------------------------------------------------------------------------------- /packages/shapes/polygons/Polygon7.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 59 | -------------------------------------------------------------------------------- /packages/shapes/polygons/Polygon8.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 48 | -------------------------------------------------------------------------------- /packages/shapes/rectangles/Rectangle1.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 74 | -------------------------------------------------------------------------------- /packages/shapes/rectangles/Rectangle2.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 62 | -------------------------------------------------------------------------------- /packages/shapes/rectangles/Rectangle3.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 67 | -------------------------------------------------------------------------------- /packages/shapes/rectangles/Rectangle4.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 68 | -------------------------------------------------------------------------------- /packages/shapes/rectangles/Rectangle6.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 49 | -------------------------------------------------------------------------------- /packages/shapes/rectangles/Rectangle9.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 73 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star1.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star10.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 65 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star11.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 74 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star12.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 65 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star2.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 74 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star3.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star4.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 59 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star5.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 68 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star6.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 57 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star7.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 58 | -------------------------------------------------------------------------------- /packages/shapes/stars/Star8.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 73 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle1.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 71 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle10.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | 70 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle11.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 73 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle12.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 65 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle13.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 59 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle2.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 77 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle3.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 66 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle4.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 80 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle6.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 61 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle7.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 77 | -------------------------------------------------------------------------------- /packages/shapes/triangles/Triangle8.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 72 | -------------------------------------------------------------------------------- /packages/shapes/wheels/Wheel1.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 67 | -------------------------------------------------------------------------------- /packages/shapes/wheels/Wheel2.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 49 | -------------------------------------------------------------------------------- /packages/shapes/wheels/Wheel3.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 82 | -------------------------------------------------------------------------------- /packages/shapes/wheels/Wheel4.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 67 | -------------------------------------------------------------------------------- /packages/shapes/wheels/Wheel5.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 50 | -------------------------------------------------------------------------------- /packages/shapes/wheels/Wheel6.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 65 | -------------------------------------------------------------------------------- /packages/shapes/wheels/Wheel7.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 66 | -------------------------------------------------------------------------------- /packages/types.ts: -------------------------------------------------------------------------------- 1 | // icon base props 2 | type SVGProps = Partial 3 | 4 | export interface ShapeProps extends SVGProps { 5 | size?: number 6 | noise?: boolean 7 | } 8 | 9 | export interface BaseProps extends ShapeProps { 10 | shapeName: string 11 | } 12 | 13 | export type ShapeType = ShapeProps 14 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /public/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaoluoboding/coolshapes-vue/dff6f8d4f87a7baafaabb29d47d9e0f10df3496b/public/preview.jpg -------------------------------------------------------------------------------- /src/assets/highlight.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:meta'; 2 | 3 | html { 4 | @include meta.load-css('highlight.js/styles/github'); 5 | } 6 | html.dark { 7 | @include meta.load-css('highlight.js/styles/github-dark'); 8 | } 9 | 10 | code.hljs { 11 | border-radius: 16px; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/LinkButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 56 | -------------------------------------------------------------------------------- /src/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 88 | -------------------------------------------------------------------------------- /src/components/Seprator.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 34 | -------------------------------------------------------------------------------- /src/components/icons/CopyIcon.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/icons/DownloadIcon.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/icons/index.ts: -------------------------------------------------------------------------------- 1 | import CopyIcon from './CopyIcon.vue' 2 | import DownloadIcon from './DownloadIcon.vue' 3 | 4 | export { CopyIcon, DownloadIcon } 5 | -------------------------------------------------------------------------------- /src/composables/useDarkmode.ts: -------------------------------------------------------------------------------- 1 | import { useDark, useToggle } from '@vueuse/core' 2 | 3 | export const isDark = useDark() 4 | export const toggleDarkmode = useToggle(isDark) 5 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import { createHead } from '@unhead/vue' 3 | 4 | import App from './App.vue' 5 | import 'uno.css' 6 | import '@unocss/reset/tailwind-compat.css' 7 | import highlight from '~/plugins/highlight' 8 | 9 | const app = createApp(App) 10 | const head = createHead() 11 | 12 | app.use(head) 13 | app.use(highlight) 14 | app.mount('#app') 15 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | const component: DefineComponent<{}, {}, any> 6 | export default component 7 | } 8 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "noEmit": false, 6 | "emitDeclarationOnly": true, 7 | "outDir": "lib", 8 | "moduleResolution": "Node", 9 | "baseUrl": "./" 10 | }, 11 | "vueCompilerOptions": { 12 | "skipTemplateCodegen": true 13 | }, 14 | "include": [ 15 | "packages/**/*.ts", 16 | "packages/**/*.d.ts", 17 | "packages/**/*.tsx", 18 | "packages/**/*.vue" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["ESNext", "DOM"], 14 | "skipLibCheck": true, 15 | "baseUrl": "./", 16 | "paths": { 17 | "@/*": ["packages/*"], 18 | "~/*": ["./src/*"] 19 | } 20 | }, 21 | "include": [ 22 | "src/**/*.ts", 23 | "src/**/*.d.ts", 24 | "src/**/*.tsx", 25 | "src/**/*.vue", 26 | "packages/**/*.ts", 27 | "packages/**/*.d.ts", 28 | "packages/**/*.tsx", 29 | "packages/**/*.vue" 30 | ], 31 | "references": [{ "path": "./tsconfig.node.json" }] 32 | } 33 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /unocss.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, presetUno, presetAttributify } from 'unocss' 2 | 3 | export default defineConfig({ 4 | presets: [presetUno(), presetAttributify()], 5 | shortcuts: [ 6 | { 7 | 'flex-center': 'flex justify-center items-center', 8 | 'flex-between': 'flex justify-between items-center', 9 | 'text-primary': 'text-neutral-900 dark:text-neutral-50', 10 | 'text-neon': 11 | 'text-transparent bg-clip-text bg-gradient-to-r from-emerald-500 to-emerald-700 dark:to-emerald-300 ' 12 | } 13 | ] 14 | }) 15 | --------------------------------------------------------------------------------