├── .editorconfig ├── .eslintignore ├── .github ├── FUNDING.yml └── workflows │ └── test.yml ├── .gitignore ├── .npmrc ├── .vscode ├── extensions.json └── settings.json ├── LICENSE ├── README.md ├── README.zh-CN.md ├── auto-imports.d.ts ├── components.d.ts ├── cypress.config.ts ├── cypress ├── e2e │ ├── basic.spec.ts │ └── superellipse.spec.ts └── tsconfig.json ├── eslint.config.js ├── index.html ├── netlify.toml ├── package.json ├── public ├── favicon.svg └── noise.png ├── shims.d.ts ├── src ├── App.vue ├── assets │ └── demo │ │ ├── demo01.svg │ │ ├── demo02.svg │ │ ├── demo03.svg │ │ ├── demo04.svg │ │ ├── demo05.svg │ │ ├── demo06.svg │ │ ├── demo07.svg │ │ ├── demo08.svg │ │ ├── demo09.svg │ │ ├── demo10.svg │ │ ├── demo11.svg │ │ └── demo12.svg ├── components │ ├── GeneratorBySVG.vue │ ├── layout │ │ ├── Code.vue │ │ ├── Demo.vue │ │ ├── Footer.vue │ │ ├── Header.vue │ │ ├── Options.vue │ │ ├── Preview.vue │ │ └── Tools.vue │ └── ui │ │ ├── Alert.vue │ │ ├── Background.vue │ │ ├── ColorPicker.vue │ │ ├── ConfettiCanvas.vue │ │ ├── HighlightCode.vue │ │ ├── Modal.vue │ │ ├── RangeBar.vue │ │ ├── TextareaCode.vue │ │ └── money-card │ │ ├── index.vue │ │ ├── wx.jpg │ │ └── zfb.jpg ├── composables │ ├── dark.ts │ └── index.ts ├── i18n │ ├── cn.ts │ ├── en.ts │ └── index.ts ├── main.ts ├── pages │ ├── README.md │ ├── [...all].vue │ └── index.vue ├── styles │ └── main.css └── utils │ ├── RandomBg.ts │ ├── confetti.ts │ ├── encodeSvg.ts │ └── svg.ts ├── test ├── __snapshots__ │ └── component.test.ts.snap ├── basic.test.ts └── component.test.ts ├── tsconfig.json ├── uno.config.ts └── vite.config.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # .eslintignore 2 | **/*.png 3 | **/*.jpg 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: antfu 2 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | pull_request: 9 | branches: 10 | - main 11 | 12 | jobs: 13 | build: 14 | runs-on: ${{ matrix.os }} 15 | 16 | timeout-minutes: 10 17 | 18 | strategy: 19 | matrix: 20 | node_version: [lts/*] 21 | os: [ubuntu-latest, windows-latest] 22 | fail-fast: false 23 | 24 | steps: 25 | - uses: actions/checkout@v3 26 | - uses: pnpm/action-setup@v2 27 | 28 | - name: Set node version to ${{ matrix.node_version }} 29 | uses: actions/setup-node@v3 30 | with: 31 | node-version: ${{ matrix.node_version }} 32 | cache: pnpm 33 | 34 | - name: Install 35 | run: pnpm i 36 | 37 | - name: Build 38 | run: pnpm run build 39 | 40 | - name: Test 41 | run: pnpm run test 42 | 43 | - name: Lint 44 | run: pnpm run lint 45 | 46 | - name: TypeCheck 47 | run: pnpm run typecheck 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vite-ssg-dist 3 | .vite-ssg-temp 4 | *.local 5 | dist 6 | dist-ssr 7 | node_modules 8 | .idea/ 9 | *.log 10 | pnpm-lock.yaml 11 | cypress/downloads 12 | test/__snapshots__ 13 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "antfu.vite", 4 | "antfu.iconify", 5 | "antfu.unocss", 6 | "antfu.goto-alias", 7 | "vue.volar", 8 | "dbaeumer.vscode-eslint", 9 | "EditorConfig.EditorConfig" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": ["Vitesse", "Vite", "unocss", "vitest", "vueuse", "pinia", "demi", "antfu", "iconify", "intlify", "vitejs", "unplugin", "pnpm"], 3 | "i18n-ally.sourceLanguage": "en", 4 | "i18n-ally.keystyle": "nested", 5 | "i18n-ally.localesPaths": "locales", 6 | "i18n-ally.sortKeys": true, 7 | "prettier.enable": false, 8 | 9 | "files.associations": { 10 | "*.css": "postcss" 11 | }, 12 | "editor.formatOnSave": false, 13 | 14 | // Enable the ESlint flat config support 15 | "eslint.experimental.useFlatConfig": true, 16 | 17 | // Auto fix 18 | "editor.codeActionsOnSave": { 19 | "source.fixAll.eslint": "explicit", 20 | "source.organizeImports": "never" 21 | }, 22 | 23 | // Silent the stylistic rules in you IDE, but still auto fix them 24 | "eslint.rules.customizations": [ 25 | { "rule": "style/*", "severity": "off" }, 26 | { "rule": "format/*", "severity": "off" }, 27 | { "rule": "*-indent", "severity": "off" }, 28 | { "rule": "*-spacing", "severity": "off" }, 29 | { "rule": "*-spaces", "severity": "off" }, 30 | { "rule": "*-order", "severity": "off" }, 31 | { "rule": "*-dangle", "severity": "off" }, 32 | { "rule": "*-newline", "severity": "off" }, 33 | { "rule": "*quotes", "severity": "off" }, 34 | { "rule": "*semi", "severity": "off" } 35 | ], 36 | 37 | // The following is optional. 38 | // It's better to put under project setting `.vscode/settings.json` 39 | // to avoid conflicts with working with different eslint configs 40 | // that does not support all formats. 41 | "eslint.validate": [ 42 | "javascript", 43 | "javascriptreact", 44 | "typescript", 45 | "typescriptreact", 46 | "vue", 47 | "html", 48 | "markdown", 49 | "json", 50 | "jsonc", 51 | "yaml" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-PRESENT Anthony Fu 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | 6 |
7 | 在线体验 8 |
9 | 10 | ## Features 11 | 12 | - [√] 设置曲率 N 值 13 | - [√] 设置 stroke fill color 14 | - [√] 设置 stroke width 15 | - [√] 设置 rotate 16 | - [√] SVG code 17 | - [√] 导出 SVG 18 | - [√] 彩带效果 19 | - [√] CSS Background Code 20 | 21 | ## Points 22 | 23 | 1. 核心代码调整超椭圆的 N 值 24 | 25 | 2. 设置都是针对 SVG 的属性设置 26 | 27 | 3. 直接复制用到 background-image 的 CSS 代码，就是将 SVG 代码转换成 base64 编码 28 | 29 | 4. 小彩蛋，按空格键更换背景（ 自己之前写的 [random-bg](https://github.com/pinky-pig/what-is-my-random-bg) ） 30 | 31 | 5. 彩带效果 [canvas-confetti](https://github.com/catdad/canvas-confetti) 32 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | 6 |
7 | Online Demo 8 |
9 | 10 | ## Features 11 | 12 | - [√] Curvature N 13 | - [√] Stroke fill color 14 | - [√] Stroke width 15 | - [√] Rotate 16 | - [√] SVG code 17 | - [√] Export SVG 18 | - [√] Confetti 19 | - [×] CSS Background Code 20 | -------------------------------------------------------------------------------- /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 | Alert: typeof import('./src/components/ui/Alert.vue')['default'] 11 | Background: typeof import('./src/components/ui/Background.vue')['default'] 12 | Code: typeof import('./src/components/layout/Code.vue')['default'] 13 | ColorPicker: typeof import('./src/components/ui/ColorPicker.vue')['default'] 14 | ConfettiCanvas: typeof import('./src/components/ui/ConfettiCanvas.vue')['default'] 15 | Demo: typeof import('./src/components/layout/Demo.vue')['default'] 16 | Footer: typeof import('./src/components/layout/Footer.vue')['default'] 17 | GeneratorBySVG: typeof import('./src/components/GeneratorBySVG.vue')['default'] 18 | Header: typeof import('./src/components/layout/Header.vue')['default'] 19 | HighlightCode: typeof import('./src/components/ui/HighlightCode.vue')['default'] 20 | Modal: typeof import('./src/components/ui/Modal.vue')['default'] 21 | MoneyCard: typeof import('./src/components/ui/money-card/index.vue')['default'] 22 | Options: typeof import('./src/components/layout/Options.vue')['default'] 23 | Preview: typeof import('./src/components/layout/Preview.vue')['default'] 24 | RangeBar: typeof import('./src/components/ui/RangeBar.vue')['default'] 25 | RouterLink: typeof import('vue-router')['RouterLink'] 26 | RouterView: typeof import('vue-router')['RouterView'] 27 | TextareaCode: typeof import('./src/components/ui/TextareaCode.vue')['default'] 28 | Tools: typeof import('./src/components/layout/Tools.vue')['default'] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | import vitePreprocessor from 'cypress-vite' 3 | 4 | export default defineConfig({ 5 | e2e: { 6 | baseUrl: 'http://localhost:1213', 7 | chromeWebSecurity: false, 8 | specPattern: 'cypress/e2e/**/*.spec.*', 9 | supportFile: false, 10 | setupNodeEvents(on) { 11 | on('file:preprocessor', vitePreprocessor()) 12 | }, 13 | }, 14 | 15 | component: { 16 | devServer: { 17 | framework: 'vue', 18 | bundler: 'vite', 19 | }, 20 | }, 21 | }) 22 | -------------------------------------------------------------------------------- /cypress/e2e/basic.spec.ts: -------------------------------------------------------------------------------- 1 | // 1. 这是 Cypress 中的测试上下文（context），用于组织测试用例。在这里，我们创建了一个名为 "Basic" 的测试上下文。 2 | context('Basic', () => { 3 | // 2.钩子函数，在每个测试用例运行之前都会执行。 4 | // 它的作用是在测试开始之前使用 cy.visit('/') 命令访问网站的根URL，也就是 http://localhost:1213/。 5 | beforeEach(() => { 6 | cy.visit('/') 7 | }) 8 | 9 | // 3.这是一个具体的测试用例，用于测试基本的导航和页面内容是否存在。测试用例的名称是 "basic nav"。 10 | it('basic nav', () => { 11 | // 4.这一行代码使用 cy.url() 命令获取当前页面的URL， 12 | // 然后使用 .should('eq', 'http://localhost:1213/') 断言来验证当前页面的URL是否等于指定的URL，即 http://localhost:1213/。 13 | // 这是一个基本的导航测试，确保页面正确加载。 14 | cy.url() 15 | .should('eq', 'http://localhost:1213/') 16 | 17 | // 5. 这一行代码使用 cy.contains('Superellipse SVG') 命令查找页面上是否存在包含文本 "Superellipse SVG" 的元素， 18 | // 并使用 .should('exist') 断言来验证该元素是否存在于页面上。 19 | // 如果存在，测试就会通过。 20 | cy.contains('Superellipse SVG') 21 | .should('exist') 22 | }) 23 | 24 | // 6.总的来说，这个测试脚本的目的是打开一个网页，然后检查当前页面的URL是否正确， 25 | // 并验证页面上是否存在包含文本 "[Superellipse SVG]" 的元素。如果这两个断言都成功， 26 | // 测试就会通过，否则测试会失败，提示问题所在。 27 | // 这是一个简单的示例，展示了 Cypress 如何用于测试网页导航和页面内容。 28 | }) 29 | -------------------------------------------------------------------------------- /cypress/e2e/superellipse.spec.ts: -------------------------------------------------------------------------------- 1 | describe('Superellipse', () => { 2 | beforeEach(() => { 3 | cy.visit('/') 4 | }) 5 | 6 | it('测试触发改变随机背景', () => { 7 | cy.get('random-bg') 8 | .shadow() 9 | .find('#whatIsMyRandomBG') 10 | .find('div') 11 | .first() 12 | .should('have.css', 'background') 13 | .then((initialBackgroundColor) => { 14 | cy.get('#superellipse') 15 | .click() 16 | 17 | // 再次获取背景颜色并断言是否发生了变化 18 | cy.get('random-bg') 19 | .shadow() 20 | .find('#whatIsMyRandomBG') 21 | .find('div') 22 | .first() 23 | .should('have.css', 'background') 24 | .and('not.eq', initialBackgroundColor) 25 | }) 26 | }) 27 | }) 28 | -------------------------------------------------------------------------------- /cypress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "types": [ 5 | "cypress" 6 | ] 7 | }, 8 | "include": [ 9 | "**/*.ts" 10 | ], 11 | "exclude": [] 12 | } 13 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import antfu from '@antfu/eslint-config' 2 | 3 | export default antfu( 4 | { 5 | formatters: true, 6 | // TypeScript and Vue are auto-detected, you can also explicitly enable them: 7 | typescript: true, 8 | vue: true, 9 | // Disable jsonc and yaml support 10 | jsonc: false, 11 | yaml: false, 12 | md: false, 13 | // `.eslintignore` is no longer supported in Flat config, use `ignores` instead 14 | ignores: [ 15 | '**/fixtures', 16 | ], 17 | vue: { 18 | overrides: { 19 | 'vue/operator-linebreak': ['error', 'before'], 20 | }, 21 | }, 22 | typescript: { 23 | overrides: { 24 | }, 25 | }, 26 | yaml: { 27 | overrides: { 28 | }, 29 | }, 30 | 31 | }, 32 | // From the second arguments they are ESLint Flat Configs 33 | // you can have multiple configs 34 | { 35 | files: ['**/*.ts'], 36 | rules: { 37 | 'ts/consistent-type-definitions': 'off', 38 | }, 39 | }, 40 | { 41 | // Without `files`, they are general rules for all files 42 | rules: { 43 | 'style/semi': ['error', 'never'], 44 | 'unused-imports/no-unused-vars': 'off', 45 | }, 46 | }, 47 | 48 | ) 49 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Superellipse SVG 8 | 9 | 10 | 11 |
12 | 15 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build.environment] 2 | NPM_FLAGS = "--version" 3 | NODE_VERSION = "16" 4 | 5 | [build] 6 | publish = "dist" 7 | command = "npx pnpm i && npx pnpm run build" 8 | 9 | [[redirects]] 10 | from = "/*" 11 | to = "/index.html" 12 | status = 200 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module", 3 | "private": true, 4 | "packageManager": "pnpm@8.7.6", 5 | "scripts": { 6 | "build": "vite build", 7 | "dev": "vite --port 1213 --open --host", 8 | "lint": "eslint .", 9 | "typecheck": "vue-tsc --noEmit", 10 | "preview": "vite preview", 11 | "test": "vitest", 12 | "test:e2e": "cypress open", 13 | "up": "taze major -I", 14 | "postinstall": "npx simple-git-hooks" 15 | }, 16 | "dependencies": { 17 | "@vueuse/core": "^10.4.1", 18 | "canvas-confetti": "^1.6.0", 19 | "prismjs": "^1.29.0", 20 | "vue": "^3.3.4", 21 | "vue-i18n": "^9.4.1", 22 | "vue-router": "^4.2.5" 23 | }, 24 | "devDependencies": { 25 | "@antfu/eslint-config": "^2.3.1", 26 | "@iconify-json/carbon": "^1.1.21", 27 | "@iconify-json/fluent-emoji": "^1.1.13", 28 | "@types/canvas-confetti": "^1.6.0", 29 | "@types/node": "^20.6.3", 30 | "@types/prismjs": "^1.26.0", 31 | "@typescript-eslint/eslint-plugin": "^5.59.2", 32 | "@unocss/eslint-config": "^0.56.1", 33 | "@unocss/eslint-plugin": "^0.56.1", 34 | "@unocss/reset": "^0.56.1", 35 | "@vitejs/plugin-vue": "^4.3.4", 36 | "@vitest/ui": "^0.34.4", 37 | "@vue-macros/volar": "^0.14.3", 38 | "@vue/test-utils": "^2.4.1", 39 | "cypress": "^13.2.0", 40 | "cypress-vite": "^1.4.2", 41 | "eslint": "^8.55.0", 42 | "eslint-plugin-cypress": "^2.15.1", 43 | "eslint-plugin-format": "^0.0.1", 44 | "jsdom": "^22.1.0", 45 | "lint-staged": "^14.0.1", 46 | "pnpm": "^8.7.6", 47 | "simple-git-hooks": "^2.9.0", 48 | "taze": "^0.11.2", 49 | "typescript": "^5.2.2", 50 | "unocss": "^0.56.1", 51 | "unplugin-auto-import": "^0.16.6", 52 | "unplugin-vue-components": "^0.25.2", 53 | "unplugin-vue-macros": "^2.5.1", 54 | "vite": "^4.4.9", 55 | "vite-plugin-pages": "^0.31.0", 56 | "vite-plugin-prismjs": "^0.0.8", 57 | "vitest": "^0.34.5", 58 | "vue-tsc": "^1.8.13" 59 | }, 60 | "simple-git-hooks": { 61 | "pre-commit": "pnpm lint-staged" 62 | }, 63 | "lint-staged": { 64 | "*": "eslint --fix" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pinky-pig/superellipse-svg/cb2b2cb2e071a9c3b916110451cd780bd1f6a2a8/public/noise.png -------------------------------------------------------------------------------- /shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue' 3 | const component: DefineComponent<{}, {}, any> 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /src/assets/demo/demo01.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo02.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo03.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo04.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo06.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo07.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo08.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo10.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo11.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/demo/demo12.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/GeneratorBySVG.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 52 | -------------------------------------------------------------------------------- /src/components/layout/Code.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 62 | 63 | 66 | -------------------------------------------------------------------------------- /src/components/layout/Demo.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 86 | 87 | 90 | -------------------------------------------------------------------------------- /src/components/layout/Footer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /src/components/layout/Header.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 53 | 54 | 59 | -------------------------------------------------------------------------------- /src/components/layout/Options.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 136 | 137 | 147 | -------------------------------------------------------------------------------- /src/components/layout/Preview.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 82 | -------------------------------------------------------------------------------- /src/components/layout/Tools.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 47 | 48 | 66 | -------------------------------------------------------------------------------- /src/components/ui/Alert.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 40 | 41 | 80 | -------------------------------------------------------------------------------- /src/components/ui/Background.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 49 | -------------------------------------------------------------------------------- /src/components/ui/ColorPicker.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 54 | 55 | 64 | -------------------------------------------------------------------------------- /src/components/ui/ConfettiCanvas.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/components/ui/HighlightCode.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 32 | -------------------------------------------------------------------------------- /src/components/ui/Modal.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 39 | 40 | 140 | -------------------------------------------------------------------------------- /src/components/ui/RangeBar.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 43 | 44 | 75 | -------------------------------------------------------------------------------- /src/components/ui/TextareaCode.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 |