├── .npmrc ├── docs ├── advance │ └── themeColor.md ├── guide │ ├── installation.md │ └── quickstart.md ├── .vitepress │ ├── theme │ │ ├── index.ts │ │ ├── overrides.css │ │ └── vars.css │ └── config.ts ├── package.json ├── index.md ├── components │ ├── glitch-progress.md │ ├── banner.md │ ├── cyber-tooltip.md │ ├── text.md │ ├── digital-counter.md │ ├── holo-loader.md │ └── neon-toggle.md └── README.md ├── package ├── utils │ ├── index.ts │ ├── typescript.js │ ├── index.js │ ├── typescript.js.map │ ├── index.js.map │ ├── typescript.ts │ ├── package.json │ ├── create.ts │ ├── create.js │ ├── create.js.map │ ├── install.js │ ├── install.js.map │ └── install.ts ├── components │ ├── banner │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ ├── instance.ts │ │ │ ├── banner.vue.js.map │ │ │ ├── banner.vue.js │ │ │ └── banner.vue │ │ ├── index.js │ │ ├── index.ts │ │ └── index.js.map │ ├── button │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ ├── instance.ts │ │ │ ├── button.vue.js.map │ │ │ └── button.vue.js │ │ ├── index.js │ │ ├── index.ts │ │ └── index.js.map │ ├── image │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.ts │ │ │ └── instance.js.map │ │ ├── index.js │ │ ├── index.ts │ │ └── index.js.map │ ├── text │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.ts │ │ │ ├── instance.js.map │ │ │ ├── text.vue.js.map │ │ │ └── text.vue.js │ │ ├── index.js │ │ ├── index.ts │ │ └── index.js.map │ ├── typing │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ ├── instance.ts │ │ │ ├── typing.vue.js.map │ │ │ ├── typing.vue │ │ │ └── typing.vue.js │ │ ├── index.js │ │ ├── index.ts │ │ └── index.js.map │ ├── cyberTooltip │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.ts │ │ └── index.js.map │ ├── fullPage │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── glitchImage │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── glowText │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ ├── instance.ts │ │ │ ├── glowText.vue.js.map │ │ │ ├── glowText.vue.js │ │ │ └── glowText.vue │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── holoCard │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── holoLoader │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── magicText │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ ├── instance.ts │ │ │ ├── magicText.vue.js │ │ │ ├── magicText.vue.js.map │ │ │ └── magicText.vue │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── nenobutton │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ ├── instance.ts │ │ │ ├── nenoButton.vue.js.map │ │ │ └── nenoButton.vue.js │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── neonToggle │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── shadowText │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ ├── instance.ts │ │ │ ├── shadowText.vue │ │ │ └── shadowText.vue.js.map │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── cyberNotification │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── digitalCounter │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── glitchProgress │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── infiniteTable │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ └── instance.ts │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── reflectbutton │ │ ├── src │ │ │ ├── instance.js │ │ │ ├── instance.js.map │ │ │ ├── instance.ts │ │ │ ├── reflectButton.vue.js.map │ │ │ └── reflectButton.vue.js │ │ ├── index.js │ │ ├── index.js.map │ │ └── index.ts │ ├── package.json │ ├── package-lock.json │ ├── index.js.map │ ├── index.ts │ └── index.js ├── cyberpunk-ui │ ├── defaults.ts │ ├── defaults.js │ ├── defaults.js.map │ ├── make-installer.js │ ├── index.js.map │ ├── make-installer.ts │ ├── make-installer.js.map │ ├── index.js │ ├── index.ts │ ├── component.js.map │ ├── package.json │ ├── component.js │ └── component.ts └── theme-chalk │ ├── package.json │ └── const.css ├── .vscode └── extensions.json ├── test ├── .vscode │ └── extensions.json ├── typings │ └── vue-shim.d.ts ├── vite.config.ts ├── tsconfig.json ├── vite.config.js ├── src │ ├── vite-env.d.ts │ ├── main.ts │ ├── main.js │ ├── main.js.map │ ├── conponents │ │ ├── table.vue │ │ ├── banner.vue │ │ ├── banner.vue.js.map │ │ ├── loading.vue │ │ ├── text.vue │ │ ├── card.vue │ │ ├── banner.vue.js │ │ ├── table.vue.js │ │ ├── images.vue │ │ ├── table.vue.js.map │ │ ├── cyberimage.vue │ │ └── switch.vue │ ├── layout │ │ ├── layout.vue │ │ ├── header.vue │ │ ├── layout.vue.js.map │ │ └── layout.vue.js │ └── style.css ├── vite.config.js.map ├── tsconfig.node.json ├── index.html ├── package.json └── tsconfig.app.json ├── pnpm-workspace.yaml ├── .gitignore ├── vite.config.js.map ├── vite.config.ts ├── vite.config.js ├── tsconfig.json ├── package.json ├── lib └── vite.svg ├── public └── vite.svg ├── README.md └── tsconfig.tsbuildinfo /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-host = true -------------------------------------------------------------------------------- /docs/advance/themeColor.md: -------------------------------------------------------------------------------- 1 | ## 待后续开发 -------------------------------------------------------------------------------- /package/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './install' -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /package/utils/typescript.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=typescript.js.map -------------------------------------------------------------------------------- /test/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /package/utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './install'; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/banner/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/button/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/image/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/text/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/typing/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/cyberTooltip/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/fullPage/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/glitchImage/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/glowText/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/holoCard/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/holoLoader/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/magicText/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/nenobutton/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/neonToggle/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/shadowText/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/cyberNotification/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/digitalCounter/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/glitchProgress/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/infiniteTable/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /package/components/reflectbutton/src/instance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=instance.js.map -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - test # 存放我们组件测试的时候的代码 3 | - docs # 存放我们组件文档的 4 | - "packages/**" -------------------------------------------------------------------------------- /package/components/text/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type Text from './text.vue' 2 | 3 | export type TextInstance = InstanceType -------------------------------------------------------------------------------- /package/utils/typescript.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"typescript.js","sourceRoot":"","sources":["typescript.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/image/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type Image from './image.vue' 2 | export type ImageInstance = InstanceType 3 | -------------------------------------------------------------------------------- /package/utils/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"} -------------------------------------------------------------------------------- /package/components/banner/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/banner/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type Banner from './banner.vue' 2 | export type BannerInstance = InstanceType 3 | -------------------------------------------------------------------------------- /package/components/button/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/button/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type Button from './button.vue' 2 | 3 | export type ButtonInstance = InstanceType -------------------------------------------------------------------------------- /package/components/fullPage/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/glowText/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/holoCard/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/image/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/text/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/typing/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/typing/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type Typing from './typing.vue' 2 | 3 | export type TypingInstance = InstanceType -------------------------------------------------------------------------------- /package/components/cyberTooltip/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/glitchImage/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/holoCard/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type holoCard from './holoCard.vue' 2 | export type HoloCardInstance = InstanceType -------------------------------------------------------------------------------- /package/components/holoLoader/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/infiniteTable/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/magicText/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/nenobutton/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/neonToggle/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/reflectbutton/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/shadowText/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/cyberNotification/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/digitalCounter/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/fullPage/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type FullPage from '/fullPage.vue' 2 | 3 | export type FullPageInstance = InstanceType -------------------------------------------------------------------------------- /package/components/glitchProgress/src/instance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"instance.js","sourceRoot":"","sources":["instance.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /package/components/glowText/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type GlowText from '/glowText.vue' 2 | 3 | export type GlowTextInstance = InstanceType -------------------------------------------------------------------------------- /package/components/magicText/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type MagicText from './magicText.vue' 2 | export type MagicTextInstance = InstanceType -------------------------------------------------------------------------------- /package/components/holoLoader/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type holoLoader from './infiniteTable.vue' 2 | export type HoloLoaderInstance = InstanceType -------------------------------------------------------------------------------- /package/components/neonToggle/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type neonToggle from './neonToggle.vue' 2 | export type NeonToggleInstance = InstanceType -------------------------------------------------------------------------------- /package/components/cyberTooltip/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type cyberTooltip from './cyberTooltip.vue' 2 | export type TooltipInstance = InstanceType -------------------------------------------------------------------------------- /package/components/nenobutton/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type Nenobutton from '/nenoButton.vue' 2 | 3 | export type NenobuttonInstance = InstanceType -------------------------------------------------------------------------------- /package/components/shadowText/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type ShadowText from '/shadowText.vue' 2 | 3 | export type ShadowTextInstance = InstanceType -------------------------------------------------------------------------------- /package/components/glitchImage/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type GlitchImage from './glitchImage.vue' 2 | export type GlitchImageInstance = InstanceType 3 | -------------------------------------------------------------------------------- /package/components/infiniteTable/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type infiniteTable from './infiniteTable.vue' 2 | export type InfiniteTableInstance = InstanceType -------------------------------------------------------------------------------- /package/cyberpunk-ui/defaults.ts: -------------------------------------------------------------------------------- 1 | import { makeInstaller } from './make-installer' 2 | import Components from './component' 3 | export default makeInstaller([...Components]) 4 | -------------------------------------------------------------------------------- /package/components/glitchProgress/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type glitchProgress from './glitchProgress.vue' 2 | export type GlitchProgressInstance = InstanceType -------------------------------------------------------------------------------- /package/components/reflectbutton/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type Reflectbutton from '/reflectButton.vue' 2 | 3 | export type ReflectbuttonInstance = InstanceType -------------------------------------------------------------------------------- /package/components/digitalCounter/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type DigitalCounter from './digitalCounter.vue' 2 | export type DigitalCounterInstance = InstanceType 3 | -------------------------------------------------------------------------------- /test/typings/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from "vue"; 3 | const component: DefineComponent<{},{},any> 4 | export default component 5 | } -------------------------------------------------------------------------------- /package/components/cyberNotification/src/instance.ts: -------------------------------------------------------------------------------- 1 | import type cyberNotification from './cyberNotification.vue' 2 | export type NotificationInstance = InstanceType 3 | -------------------------------------------------------------------------------- /test/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.app.json" 6 | }, 7 | { 8 | "path": "./tsconfig.node.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /test/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | export default defineConfig({ 4 | plugins: [vue()], 5 | }); 6 | //# sourceMappingURL=vite.config.js.map -------------------------------------------------------------------------------- /package/cyberpunk-ui/defaults.js: -------------------------------------------------------------------------------- 1 | import { makeInstaller } from './make-installer'; 2 | import Components from './component'; 3 | export default makeInstaller([...Components]); 4 | //# sourceMappingURL=defaults.js.map -------------------------------------------------------------------------------- /docs/guide/installation.md: -------------------------------------------------------------------------------- 1 | ## 安装 2 | 3 | ```bash 4 | # 选择一个你喜欢的包管理器 5 | 6 | # NPM 7 | npm install cyberpubk-ui 8 | 9 | # Yarn 10 | yarn add cyberpubk-ui 11 | 12 | # pnpm 13 | pnpm install cyberpubk-ui 14 | ``` 15 | -------------------------------------------------------------------------------- /package/components/text/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Text from './src/text.vue'; 3 | export const CyberText = withInstall(Text); 4 | export default CyberText; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/utils/typescript.ts: -------------------------------------------------------------------------------- 1 | import type { AppContext, Plugin } from 'vue' 2 | 3 | export type SFCWithInstall = T & Plugin 4 | 5 | export type SFCInstallWithContext = SFCWithInstall & { 6 | _context: AppContext | null 7 | } -------------------------------------------------------------------------------- /package/components/image/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Image from './src/image.vue'; 3 | export const CyberImage = withInstall(Image); 4 | export default CyberImage; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/banner/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Banner from './src/banner.vue'; 3 | export const CyberBanner = withInstall(Banner); 4 | export default CyberBanner; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/button/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Button from './src/button.vue'; 3 | export const CyberButton = withInstall(Button); 4 | export default CyberButton; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/typing/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Typing from './src/typing.vue'; 3 | export const CyberTyping = withInstall(Typing); 4 | export default CyberTyping; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/text/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Text from './src/text.vue' 3 | 4 | export const CyberText = withInstall(Text) 5 | export default CyberText 6 | 7 | export type { TextInstance } from './src/instance' -------------------------------------------------------------------------------- /package/components/cyberTooltip/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Tooltip from './src/cyberTooltip.vue'; 3 | export const CyberTooltip = withInstall(Tooltip); 4 | export default CyberTooltip; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/fullPage/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import FullPage from './src/fullPage.vue'; 3 | export const CyberFullPage = withInstall(FullPage); 4 | export default CyberFullPage; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/glowText/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import GlowText from './src/glowText.vue'; 3 | export const CyberGlowText = withInstall(GlowText); 4 | export default CyberGlowText; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/holoCard/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import holoCard from './src/holoCard.vue'; 3 | export const CyberHoloCard = withInstall(holoCard); 4 | export default CyberHoloCard; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/image/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Image from './src/image.vue' 3 | export const CyberImage = withInstall(Image) 4 | export default CyberImage 5 | export type { ImageInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/cyberpunk-ui/defaults.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"defaults.js","sourceRoot":"","sources":["defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,UAAU,MAAM,aAAa,CAAA;AACpC,eAAe,aAAa,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAA"} -------------------------------------------------------------------------------- /package/components/magicText/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import MagicText from './src/magicText.vue'; 3 | export const CyberMagicText = withInstall(MagicText); 4 | export default CyberMagicText; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/banner/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Banner from './src/banner.vue' 3 | export const CyberBanner = withInstall(Banner) 4 | export default CyberBanner 5 | export type { BannerInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/button/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Button from './src/button.vue' 3 | 4 | export const CyberButton = withInstall(Button) 5 | export default CyberButton 6 | 7 | export type { ButtonInstance } from './src/instance' -------------------------------------------------------------------------------- /package/components/holoLoader/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import holoLoader from './src/holoLoader.vue'; 3 | export const CyberHoloLoader = withInstall(holoLoader); 4 | export default CyberHoloLoader; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/nenobutton/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Nenobutton from './src/nenoButton.vue'; 3 | export const CyberNenobutton = withInstall(Nenobutton); 4 | export default CyberNenobutton; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/neonToggle/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import neonToggle from './src/neonToggle.vue'; 3 | export const CyberNeonToggle = withInstall(neonToggle); 4 | export default CyberNeonToggle; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/shadowText/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import ShadowText from './src/shadowText.vue'; 3 | export const CyberShadowText = withInstall(ShadowText); 4 | export default CyberShadowText; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/typing/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Typing from './src/typing.vue' 3 | export const CyberTyping = withInstall(Typing) 4 | export default CyberTyping 5 | 6 | export type { TypingInstance } from './src/instance.ts' -------------------------------------------------------------------------------- /test/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare module '*.vue' { 3 | import type { DefineComponent } from "vue"; 4 | const component: DefineComponent<{},{},any> 5 | export default component 6 | } 7 | declare module 'cyberpunk-ui'; 8 | -------------------------------------------------------------------------------- /package/components/glitchImage/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import GlitchImage from './src/glitchImage.vue'; 3 | export const CyberGlitchImage = withInstall(GlitchImage); 4 | export default CyberGlitchImage; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /test/vite.config.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vite.config.js","sourceRoot":"","sources":["vite.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AACnC,OAAO,GAAG,MAAM,oBAAoB,CAAA;AAGpC,eAAe,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC;CACjB,CAAC,CAAA"} -------------------------------------------------------------------------------- /package/components/image/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,MAAM,iBAAiB,CAAA;AACnC,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;AAC5C,eAAe,UAAU,CAAA"} -------------------------------------------------------------------------------- /package/components/text/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,IAAI,MAAM,gBAAgB,CAAA;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;AAC1C,eAAe,SAAS,CAAA"} -------------------------------------------------------------------------------- /package/components/banner/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;AAC9C,eAAe,WAAW,CAAA"} -------------------------------------------------------------------------------- /package/components/button/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,MAAM,MAAM,kBAAkB,CAAA;AAErC,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;AAC9C,eAAe,WAAW,CAAA"} -------------------------------------------------------------------------------- /package/components/cyberTooltip/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Tooltip from './src/cyberTooltip.vue' 3 | export const CyberTooltip = withInstall(Tooltip) 4 | export default CyberTooltip 5 | export type { TooltipInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/fullPage/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;AAClD,eAAe,aAAa,CAAA"} -------------------------------------------------------------------------------- /package/components/glowText/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;AAClD,eAAe,aAAa,CAAA"} -------------------------------------------------------------------------------- /package/components/holoCard/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;AAClD,eAAe,aAAa,CAAA"} -------------------------------------------------------------------------------- /package/components/holoCard/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import holoCard from './src/holoCard.vue' 3 | export const CyberHoloCard = withInstall(holoCard) 4 | export default CyberHoloCard 5 | export type { HoloCardInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/holoLoader/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAA;AAC7C,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AACtD,eAAe,eAAe,CAAA"} -------------------------------------------------------------------------------- /package/components/magicText/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,SAAS,MAAM,qBAAqB,CAAA;AAC3C,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC,SAAS,CAAC,CAAA;AACpD,eAAe,cAAc,CAAA"} -------------------------------------------------------------------------------- /package/components/nenobutton/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAA;AAE7C,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AACtD,eAAe,eAAe,CAAA"} -------------------------------------------------------------------------------- /package/components/neonToggle/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAA;AAC7C,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AACtD,eAAe,eAAe,CAAA"} -------------------------------------------------------------------------------- /package/components/shadowText/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAA;AAE7C,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AACtD,eAAe,eAAe,CAAA"} -------------------------------------------------------------------------------- /package/components/typing/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;AAC9C,eAAe,WAAW,CAAA"} -------------------------------------------------------------------------------- /package/components/cyberNotification/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Notification from './src/cyberNotification.vue'; 3 | export const CyberNotification = withInstall(Notification); 4 | export default CyberNotification; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/cyberTooltip/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAC5C,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;AAChD,eAAe,YAAY,CAAA"} -------------------------------------------------------------------------------- /package/components/fullPage/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import FullPage from './src/fullPage.vue' 3 | 4 | export const CyberFullPage = withInstall(FullPage) 5 | export default CyberFullPage 6 | 7 | export type { FullPageInstance } from './src/instance.ts' -------------------------------------------------------------------------------- /package/components/glitchImage/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,WAAW,MAAM,uBAAuB,CAAA;AAC/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,CAAC,CAAA;AACxD,eAAe,gBAAgB,CAAA"} -------------------------------------------------------------------------------- /package/components/glowText/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import GlowText from './src/glowText.vue' 3 | 4 | export const CyberGlowText = withInstall(GlowText) 5 | export default CyberGlowText 6 | 7 | export type { GlowTextInstance } from './src/instance.ts' -------------------------------------------------------------------------------- /package/components/infiniteTable/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import infiniteTable from './src/infiniteTable.vue'; 3 | export const CyberInfiniteTable = withInstall(infiniteTable); 4 | export default CyberInfiniteTable; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/magicText/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import MagicText from './src/magicText.vue' 3 | export const CyberMagicText = withInstall(MagicText) 4 | export default CyberMagicText 5 | export type { MagicTextInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/reflectbutton/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import Reflectbutton from './src/reflectButton.vue'; 3 | export const CyberReflectbutton = withInstall(Reflectbutton); 4 | export default CyberReflectbutton; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/cyberpunk-ui/make-installer.js: -------------------------------------------------------------------------------- 1 | export const makeInstaller = (components = []) => { 2 | const install = (app) => { 3 | components.forEach((c) => app.use(c)); 4 | }; 5 | return { 6 | install, 7 | }; 8 | }; 9 | //# sourceMappingURL=make-installer.js.map -------------------------------------------------------------------------------- /package/components/digitalCounter/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import DigitalCounter from './src/digitalCounter.vue'; 3 | export const CyberDigitalCounter = withInstall(DigitalCounter); 4 | export default CyberDigitalCounter; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/digitalCounter/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,cAAc,MAAM,0BAA0B,CAAA;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,cAAc,CAAC,CAAA;AAC9D,eAAe,mBAAmB,CAAA"} -------------------------------------------------------------------------------- /package/components/glitchProgress/index.js: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index'; 2 | import glitchProgress from './src/glitchProgress.vue'; 3 | export const CyberGlitchProgress = withInstall(glitchProgress); 4 | export default CyberGlitchProgress; 5 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/components/glitchProgress/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,cAAc,MAAM,0BAA0B,CAAA;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,cAAc,CAAC,CAAA;AAC9D,eAAe,mBAAmB,CAAA"} -------------------------------------------------------------------------------- /package/components/holoLoader/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import holoLoader from './src/holoLoader.vue' 3 | export const CyberHoloLoader = withInstall(holoLoader) 4 | export default CyberHoloLoader 5 | export type { HoloLoaderInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/infiniteTable/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,aAAa,MAAM,yBAAyB,CAAA;AACnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAA;AAC5D,eAAe,kBAAkB,CAAA"} -------------------------------------------------------------------------------- /package/components/neonToggle/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import neonToggle from './src/neonToggle.vue' 3 | export const CyberNeonToggle = withInstall(neonToggle) 4 | export default CyberNeonToggle 5 | export type { NeonToggleInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/reflectbutton/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,aAAa,MAAM,yBAAyB,CAAA;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAA;AAC5D,eAAe,kBAAkB,CAAA"} -------------------------------------------------------------------------------- /package/components/cyberNotification/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,YAAY,MAAM,6BAA6B,CAAA;AACtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAA;AAC1D,eAAe,iBAAiB,CAAA"} -------------------------------------------------------------------------------- /package/components/nenobutton/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Nenobutton from './src/nenoButton.vue' 3 | 4 | export const CyberNenobutton = withInstall(Nenobutton) 5 | export default CyberNenobutton 6 | 7 | export type { NenobuttonInstance } from './src/instance.ts' -------------------------------------------------------------------------------- /package/components/shadowText/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import ShadowText from './src/shadowText.vue' 3 | 4 | export const CyberShadowText = withInstall(ShadowText) 5 | export default CyberShadowText 6 | 7 | export type { ShadowTextInstance } from './src/instance.ts' -------------------------------------------------------------------------------- /package/components/glitchImage/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import GlitchImage from './src/glitchImage.vue' 3 | export const CyberGlitchImage = withInstall(GlitchImage) 4 | export default CyberGlitchImage 5 | export type { GlitchImageInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/cyberpunk-ui/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAQA,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,OAAO,CAAC,GAAG,CACP,OAAO,EACP,+KAA+K,EAC/K,cAAc,CACjB,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAA;AACxC,eAAe,SAAS,CAAA"} -------------------------------------------------------------------------------- /package/components/cyberNotification/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Notification from './src/cyberNotification.vue' 3 | export const CyberNotification = withInstall(Notification) 4 | export default CyberNotification 5 | export type { NotificationInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/infiniteTable/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import infiniteTable from './src/infiniteTable.vue' 3 | export const CyberInfiniteTable = withInstall(infiniteTable) 4 | export default CyberInfiniteTable 5 | export type { InfiniteTableInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/cyberpunk-ui/make-installer.ts: -------------------------------------------------------------------------------- 1 | import type { App, Plugin } from '@vue/runtime-core' 2 | 3 | export const makeInstaller = (components: Plugin[] = []) => { 4 | const install = (app: App) => { 5 | components.forEach((c) => app.use(c)) 6 | } 7 | 8 | return { 9 | install, 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /package/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@cyberpunk-ui/utils", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /package/components/digitalCounter/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import DigitalCounter from './src/digitalCounter.vue' 3 | export const CyberDigitalCounter = withInstall(DigitalCounter) 4 | export default CyberDigitalCounter 5 | export type { DigitalCounterInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/glitchProgress/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import glitchProgress from './src/glitchProgress.vue' 3 | export const CyberGlitchProgress = withInstall(glitchProgress) 4 | export default CyberGlitchProgress 5 | export type { GlitchProgressInstance } from './src/instance.ts' 6 | -------------------------------------------------------------------------------- /package/components/reflectbutton/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../utils/index' 2 | import Reflectbutton from './src/reflectButton.vue' 3 | 4 | export const CyberReflectbutton = withInstall(Reflectbutton) 5 | export default CyberReflectbutton 6 | 7 | export type { ReflectbuttonInstance } from './src/instance.ts' -------------------------------------------------------------------------------- /package/components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@cyberpunk-ui/components", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /package/theme-chalk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@cyberpunk-ui/theme-chalk", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /test/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | import CyberpunkUI from '../../package/cyberpunk-ui/index'; 5 | import 'cyberpunk-ui/lib/style.css' 6 | console.log(CyberpunkUI) 7 | const app = createApp(App) 8 | app.use(CyberpunkUI) 9 | app.mount('#app') 10 | -------------------------------------------------------------------------------- /package/components/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@cyberpunk-ui/components", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "@cyberpunk-ui/components", 9 | "version": "1.0.0", 10 | "license": "ISC" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /test/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import './style.css'; 3 | import App from './App.vue'; 4 | import CyberpunkUI from '../../package/cyberpunk-ui/index'; 5 | import 'cyberpunk-ui/lib/style.css'; 6 | console.log(CyberpunkUI); 7 | const app = createApp(App); 8 | app.use(CyberpunkUI); 9 | app.mount('#app'); 10 | //# sourceMappingURL=main.js.map -------------------------------------------------------------------------------- /package/cyberpunk-ui/make-installer.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"make-installer.js","sourceRoot":"","sources":["make-installer.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,aAAuB,EAAE,EAAE,EAAE;IACzD,MAAM,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;QAC3B,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvC,CAAC,CAAA;IAED,OAAO;QACL,OAAO;KACR,CAAA;AACH,CAAC,CAAA"} -------------------------------------------------------------------------------- /.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 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | docs/.vitepress/cache/deps/* 26 | -------------------------------------------------------------------------------- /test/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 5 | "skipLibCheck": true, 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "noEmit": true 11 | }, 12 | "include": ["vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 测试页面 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /test/src/main.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,aAAa,CAAA;AACpB,OAAO,GAAG,MAAM,WAAW,CAAA;AAC3B,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,4BAA4B,CAAA;AACnC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;AACxB,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,CAAA;AAC1B,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;AACpB,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA"} -------------------------------------------------------------------------------- /package/cyberpunk-ui/index.js: -------------------------------------------------------------------------------- 1 | import installer from './defaults'; 2 | export * from './make-installer'; 3 | console.log('%c %s', 'border: 1px solid #97E3FE;border-radius: 3px;padding: 2px 5px;color: white;font-weight:bolder;background: linear-gradient(to right, #fF717F,#CC54D1,#4EAFFA,#3DE1C3, #F7DA66)', 'CyberPunk-UI'); 4 | export const install = installer.install; 5 | export default installer; 6 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /docs/guide/quickstart.md: -------------------------------------------------------------------------------- 1 | # 快速开始 2 | 本节将介绍如何在项目中使用 cyberpunk-ui。 3 | 4 | ## 引入组件库 5 | ```javascript 6 | // main.ts 7 | import { createApp } from 'vue' 8 | import CyberpunkUI from 'cyberpubk-ui' 9 | import 'cyberpubk-ui/lib/style.css' 10 | import App from './App.vue' 11 | 12 | const app = createApp(App) 13 | 14 | app.use(CyberpunkUI) 15 | app.mount('#app') 16 | ``` 17 | 18 | 19 | ## 开始使用​ 20 | 21 | 现在你可以启动项目了。 对于每个组件的用法，请查阅对应的独立文档。 -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | // .vitepress/theme/index.ts 2 | import type { Theme } from 'vitepress'; 3 | import DefaultTheme from 'vitepress/theme' 4 | import 'cyberpunk-ui/lib/style.css' 5 | import './rainbow.css' 6 | import './vars.css' 7 | import './overrides.css' 8 | export default { 9 | extends: DefaultTheme, 10 | async enhanceApp({ app }) { 11 | const CyberpunkUI = await import('cyberpunk-ui') 12 | app.use(CyberpunkUI) 13 | } 14 | } satisfies Theme -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vitepress dev", 8 | "build": "vitepress build" 9 | }, 10 | "keywords": [ 11 | "cyberpunk", 12 | "vue3" 13 | ], 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "vitepress": "^1.3.1" 18 | }, 19 | "dependencies": { 20 | "cyberpunk-ui": "^1.0.46" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /package/components/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA"} -------------------------------------------------------------------------------- /test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc -b && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@vueuse/core": "^10.11.0", 13 | "cyberpunk-ui": "^1.0.46", 14 | "vue": "^3.4.31" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^5.2.4", 18 | "typescript": "^5.2.2", 19 | "vite": "^6.3.5", 20 | "vue-tsc": "^2.0.24" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /package/cyberpunk-ui/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: anxueyu 3 | * @Date: 2024-07-30 14:32:01 4 | * @LastEditors: anxueyu 1358042645@qq.com 5 | * @LastEditTime: 2024-09-02 19:23:15 6 | * @FilePath: \cyberpunk-ui\package\cyberpunk-ui\index.ts 7 | * @Description: 8 | */ 9 | import installer from './defaults' 10 | export * from './make-installer' 11 | console.log( 12 | '%c %s', 13 | 'border: 1px solid #97E3FE;border-radius: 3px;padding: 2px 5px;color: white;font-weight:bolder;background: linear-gradient(to right, #fF717F,#CC54D1,#4EAFFA,#3DE1C3, #F7DA66)', 14 | 'CyberPunk-UI' 15 | ); 16 | export const install = installer.install 17 | export default installer 18 | -------------------------------------------------------------------------------- /package/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './button'; 2 | export * from './cyberNotification'; 3 | export * from './cyberTooltip'; 4 | export * from './digitalCounter'; 5 | export * from './fullPage'; 6 | export * from './glitchImage' 7 | export * from './glitchProgress' 8 | export * from './glowText' 9 | export * from './holoCard' 10 | export * from './holoLoader' 11 | export * from './infiniteTable' 12 | export * from './nenoButton' 13 | export * from './neonToggle' 14 | export * from './reflectButton' 15 | export * from './shadowText' 16 | export * from './text' 17 | export * from './typing' 18 | export * from './magicText' 19 | export * from './image' 20 | export * from './banner' -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | 4 | hero: 5 | name: CyberPunk-UI 6 | text: 基于vue3的组件库 7 | tagline: 建议黑暗模式使用. 8 | image: /logo.svg 9 | actions: 10 | - theme: brand 11 | text: 快速开始 12 | link: /guide/quickstart 13 | - theme: alt 14 | text: GitHub 15 | link: https://github.com/whanxueyu/cyberpunk-ui 16 | features: 17 | - icon: 🛠️ 18 | title: 炫酷的效果 19 | details: 极具科幻效果的组件库，赛博朋克风格，充满未来感 20 | - icon: 🚀 21 | title: 极少的依赖 22 | details: 所有组件均为 Vue3 纯手打，非其他组件库的二次开发和封装 23 | - icon: 📝 24 | title: 人性化的设计 25 | details: 有什么好的建议和需求，欢迎提issue或pr. 26 | link: https://github.com/whanxueyu/cyberpunk-ui/pulls 27 | --- -------------------------------------------------------------------------------- /package/utils/create.ts: -------------------------------------------------------------------------------- 1 | function createBEM(name: string) { 2 | return function (el?: string, mods?: any): string { 3 | if (el && typeof el !== 'string') { 4 | mods = el; 5 | el = ''; 6 | } 7 | el = el ? `${name}__${el}` : name; 8 | if (mods) { 9 | if (typeof mods === 'string') { 10 | return `${el}--${mods}`; 11 | } 12 | if (Array.isArray(mods)) { 13 | return mods.reduce((ret, item) => ret + ` ${el}--${item}`, el); 14 | } 15 | return Object.keys(mods).reduce((ret, key) => ret + (mods[key] ? ` ${el}--${key}` : ''), el); 16 | } 17 | return el; 18 | }; 19 | } 20 | export default createBEM; -------------------------------------------------------------------------------- /vite.config.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vite.config.js","sourceRoot":"","sources":["vite.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AACnC,OAAO,GAAG,MAAM,oBAAoB,CAAA;AACpC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,MAAM,CAAC,OAAO,GAAG,YAAY,CAAC;IAC5B,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC;IAChB,OAAO,EAAE;QACP,KAAK,EAAE;YACL,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC;YAErC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC;SAC9C;KACF;IACD,KAAK,EAAE;QACL,MAAM,EAAE,KAAK;QACb,GAAG,EAAE;YACH,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,iCAAiC,CAAC;YACjE,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,cAAc;SACzB;QACD,aAAa,EAAE;YAEb,QAAQ,EAAE,CAAC,KAAK,CAAC;YACjB,MAAM,EAAE;gBAEN,OAAO,EAAE;oBACP,GAAG,EAAE,KAAK;iBACX;aACF;SACF;KACF;CACF,CAAC,CAAA"} -------------------------------------------------------------------------------- /package/components/index.js: -------------------------------------------------------------------------------- 1 | export * from './button'; 2 | export * from './cyberNotification'; 3 | export * from './cyberTooltip'; 4 | export * from './digitalCounter'; 5 | export * from './fullPage'; 6 | export * from './glitchImage'; 7 | export * from './glitchProgress'; 8 | export * from './glowText'; 9 | export * from './holoCard'; 10 | export * from './holoLoader'; 11 | export * from './infiniteTable'; 12 | export * from './nenoButton'; 13 | export * from './neonToggle'; 14 | export * from './reflectButton'; 15 | export * from './shadowText'; 16 | export * from './text'; 17 | export * from './typing'; 18 | export * from './magicText'; 19 | export * from './image'; 20 | export * from './banner'; 21 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /package/utils/create.js: -------------------------------------------------------------------------------- 1 | function createBEM(name) { 2 | return function (el, mods) { 3 | if (el && typeof el !== 'string') { 4 | mods = el; 5 | el = ''; 6 | } 7 | el = el ? `${name}__${el}` : name; 8 | if (mods) { 9 | if (typeof mods === 'string') { 10 | return `${el}--${mods}`; 11 | } 12 | if (Array.isArray(mods)) { 13 | return mods.reduce((ret, item) => ret + ` ${el}--${item}`, el); 14 | } 15 | return Object.keys(mods).reduce((ret, key) => ret + (mods[key] ? ` ${el}--${key}` : ''), el); 16 | } 17 | return el; 18 | }; 19 | } 20 | export default createBEM; 21 | //# sourceMappingURL=create.js.map -------------------------------------------------------------------------------- /test/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 5 | "target": "ES2020", 6 | "useDefineForClassFields": true, 7 | "module": "ESNext", 8 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 9 | "skipLibCheck": true, 10 | 11 | /* Bundler mode */ 12 | "moduleResolution": "bundler", 13 | "allowImportingTsExtensions": true, 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "moduleDetection": "force", 17 | "noEmit": true, 18 | "jsx": "preserve", 19 | 20 | /* Linting */ 21 | "strict": true, 22 | "noUnusedLocals": true, 23 | "noUnusedParameters": true, 24 | "noFallthroughCasesInSwitch": true 25 | }, 26 | "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue","**/**/package/*.ts"] 27 | } 28 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import path from 'path' 4 | 5 | module.exports = defineConfig({ 6 | plugins: [vue()], 7 | resolve: { 8 | alias: { 9 | "@": path.resolve(__dirname, "./src"), 10 | // "@cyberpunk-ui": path.resolve(__dirname, "./package"), 11 | 'package': path.resolve(__dirname, 'package') 12 | }, 13 | }, 14 | build: { 15 | outDir: 'lib', 16 | lib: { 17 | entry: path.resolve(__dirname, './package/cyberpunk-ui/index.ts'), 18 | name: 'cyberpunkUI', 19 | fileName: 'cyberpunk-ui' 20 | }, 21 | rollupOptions: { 22 | // 确保外部化处理那些你不想打包进库的依赖 23 | external: ['vue'], 24 | output: { 25 | // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 26 | globals: { 27 | vue: 'Vue' 28 | } 29 | } 30 | } 31 | } 32 | }) -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | import path from 'path'; 4 | module.exports = defineConfig({ 5 | plugins: [vue()], 6 | resolve: { 7 | alias: { 8 | "@": path.resolve(__dirname, "./src"), 9 | 'package': path.resolve(__dirname, 'package') 10 | }, 11 | }, 12 | build: { 13 | outDir: 'lib', 14 | lib: { 15 | entry: path.resolve(__dirname, './package/cyberpunk-ui/index.ts'), 16 | name: 'cyberpunkUI', 17 | fileName: 'cyberpunk-ui' 18 | }, 19 | rollupOptions: { 20 | external: ['vue'], 21 | output: { 22 | globals: { 23 | vue: 'Vue' 24 | } 25 | } 26 | } 27 | } 28 | }); 29 | //# sourceMappingURL=vite.config.js.map -------------------------------------------------------------------------------- /package/components/typing/src/typing.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"typing.vue.js","sourceRoot":"","sources":["typing.vue"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA6Ca,CAAC;IACV,IAAI,EAAE,aAAa;CACtB,CAAC,CAAA;AAEF,QAAQ,CAAA;AAIR,MAAM,SAAS,GAAG,EAAqE,CAAC;AAExF,IAAI,gBAAiE,CAAC;AAEtE,IAAI,gBAAiE,CAAC;AAMtE,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,WAAW,EAAE,EACvB,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,SAAS,EAAE,EACrB,CAAC;AACH,IAAI,OAAO,GAAG,EACb,CAAC;AACkD,CAAC;AACH,CAAC;AAEnD,IAAI,OAAO,GAAG,OAAQ,CAAE;AAQxB,IAAI,aAK+D,CAAC;AACpE,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC9D,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,eAAe,EAA0D,CAAC;AAC1E,CAAC"} -------------------------------------------------------------------------------- /package/utils/create.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"create.js","sourceRoot":"","sources":["create.ts"],"names":[],"mappings":"AAAA,SAAS,SAAS,CAAC,IAAY;IAC3B,OAAO,UAAU,EAAW,EAAE,IAAU;QACtC,IAAI,EAAE,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;YACjC,IAAI,GAAG,EAAE,CAAC;YACV,EAAE,GAAG,EAAE,CAAC;QACV,CAAC;QACD,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAClC,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC7B,OAAO,GAAG,EAAE,KAAK,IAAI,EAAE,CAAC;YAC1B,CAAC;YACD,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;gBACxB,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,EAAE,KAAK,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACjE,CAAC;YACD,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAC/F,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;AACJ,CAAC;AACD,eAAe,SAAS,CAAC"} -------------------------------------------------------------------------------- /package/components/typing/src/typing.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "module": "ESNext", // 打包模块类型ESNext 5 | "declaration": false, // 默认不要声明文件 6 | "noImplicitAny": false, // 支持类型不标注可以默认any 7 | "removeComments": true, // 删除注释 8 | "moduleResolution": "node", // 按照node模块来解析 9 | "esModuleInterop": true, // 支持es6,commonjs模块 10 | "jsx": "preserve", // jsx 不转 11 | "noLib": false, // 不处理类库 12 | "target": "es6", // 遵循es6版本 13 | "sourceMap": true, 14 | "lib": [ // 编译时用的库 15 | "ESNext", 16 | "DOM" 17 | ], 18 | "allowSyntheticDefaultImports": true, // 允许没有导出的模块中导入 19 | "experimentalDecorators": true, // 装饰器语法 20 | "forceConsistentCasingInFileNames": true, // 强制区分大小写 21 | "resolveJsonModule": true, // 解析json模块 22 | "strict": true, // 是否启动严格模式 23 | "skipLibCheck": true, // 跳过类库检测 24 | "paths": { 25 | "@cyberpunk-ui/*": ["packages/*"] 26 | }, 27 | }, 28 | "excLude": [ // 排除掉哪些类库 29 | "node_modules", 30 | "**/__tests__", 31 | "dist/**" 32 | ] 33 | } -------------------------------------------------------------------------------- /package/theme-chalk/const.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* */ 3 | --cp-primary-color: #4EAFFA; 4 | --cp-success-color: #EAA3D2; 5 | --cp-warning-color: #CC54D1; 6 | --cp-danger-color: #B74F69; 7 | --cp-info-color: #4A41AF; 8 | /* */ 9 | --cp-primary-color2: #47F2C6; 10 | --cp-success-color2: #00D1A8; 11 | --cp-warning-color2: #0F717F; 12 | --cp-danger-color2: #3F8B9F; 13 | --cp-info-color2: #2F4F79; 14 | /* */ 15 | --cp-primary-color3: #97E3FE; 16 | --cp-success-color3: #F294F8; 17 | --cp-warning-color3: #818CE1; 18 | --cp-danger-color3: #9A54D0; 19 | --cp-info-color3: #2743AE; 20 | /* */ 21 | --cp-primary-color4: #F7DA66; 22 | --cp-success-color4: #3DB3CF; 23 | --cp-warning-color4: #C14347; 24 | --cp-danger-color4: #AB599B; 25 | --cp-info-color4: #1A133A; 26 | /* */ 27 | --cp-primary-color5: #C2F132; 28 | --cp-success-color5: #61FAF8; 29 | --cp-warning-color5: #3DE1C3; 30 | --cp-danger-color5: #3D8155; 31 | --cp-info-color5: #396976; 32 | } 33 | /* 蓝绿红黄紫 */ 34 | -------------------------------------------------------------------------------- /package/utils/install.js: -------------------------------------------------------------------------------- 1 | import { NOOP } from '@vue/shared'; 2 | export const withInstall = (main, extra) => { 3 | ; 4 | main.install = (app) => { 5 | for (const comp of [main, ...Object.values(extra !== null && extra !== void 0 ? extra : {})]) { 6 | app.component(comp.name, comp); 7 | } 8 | }; 9 | if (extra) { 10 | for (const [key, comp] of Object.entries(extra)) { 11 | ; 12 | main[key] = comp; 13 | } 14 | } 15 | return main; 16 | }; 17 | export const withInstallFunction = (fn, name) => { 18 | ; 19 | fn.install = (app) => { 20 | ; 21 | fn._context = app._context; 22 | app.config.globalProperties[name] = fn; 23 | }; 24 | return fn; 25 | }; 26 | export const withInstallDirective = (directive, name) => { 27 | ; 28 | directive.install = (app) => { 29 | app.directive(name, directive); 30 | }; 31 | return directive; 32 | }; 33 | export const withNoopInstall = (component) => { 34 | component.install = NOOP; 35 | return component; 36 | }; 37 | //# sourceMappingURL=install.js.map -------------------------------------------------------------------------------- /package/components/magicText/src/magicText.vue.js: -------------------------------------------------------------------------------- 1 | import { ref, useSlots } from 'vue'; 2 | defineOptions({ 3 | name: 'CyberMagicText', 4 | }); 5 | const content = ref(''); 6 | const slots = useSlots(); 7 | if (slots && slots.default) { 8 | let tep = slots.default(); 9 | content.value = tep[0].children; 10 | } 11 | debugger; 12 | const __VLS_ctx = {}; 13 | let __VLS_components; 14 | let __VLS_directives; 15 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "text-container" })); 16 | __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)(Object.assign({ class: "gradient-text" }, { 'data-text': (__VLS_ctx.content) })); 17 | var __VLS_0 = {}; 18 | ; 19 | ; 20 | var __VLS_1 = __VLS_0; 21 | var __VLS_dollars; 22 | const __VLS_self = (await import('vue')).defineComponent({ 23 | setup() { 24 | return { 25 | content: content, 26 | }; 27 | }, 28 | }); 29 | const __VLS_component = (await import('vue')).defineComponent({ 30 | setup() { 31 | return {}; 32 | }, 33 | }); 34 | export default {}; 35 | ; 36 | //# sourceMappingURL=magicText.vue.js.map -------------------------------------------------------------------------------- /package/components/glowText/src/glowText.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"glowText.vue.js","sourceRoot":"","sources":["glowText.vue"],"names":[],"mappings":"AAAA,OAqDO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAEhC,aAAa,CAAC;IACZ,IAAI,EAAE,eAAe;CACtB,CAAC,CAAA;AACF,MAAM,KAAK,GAAG,WAAW,CAAC;IACxB,KAAK,EAAE;QACL,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAA;AACF,SAAS,CAAC,GAAG,EAAE;IACb,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;AAC1E,CAAC,CAAC,CAAA;AACF,QAAQ,CAAA;AAIR,MAAM,SAAS,GAAG,EAAqE,CAAC;AAExF,IAAI,gBAAiE,CAAC;AAEtE,IAAI,gBAAiE,CAAC;AAKtE,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,WAAW,EAAE,EACvB,CAAC;AACH,IAAI,OAAO,GAAG,EACb,CAAC;AACkD,CAAC;AAErD,IAAI,OAAO,GAAG,OAAQ,CAAE;AAQxB,IAAI,aAK+D,CAAC;AACpE,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;IACD,KAAK,EAAE;QACL,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;SACnB;KACF;CACA,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC9D,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;IACD,KAAK,EAAE;QACL,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;SACnB;KACF;CACA,CAAC,CAAC;AACH,eAAe,EAA0D,CAAC;AAC1E,CAAC"} -------------------------------------------------------------------------------- /package/cyberpunk-ui/component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,eAAe;IACX,WAAW;IACX,iBAAiB;IACjB,YAAY;IACZ,mBAAmB;IACnB,gBAAgB;IAChB,mBAAmB;IACnB,aAAa;IACb,eAAe;IACf,kBAAkB;IAClB,eAAe;IACf,eAAe;IACf,kBAAkB;IAClB,SAAS;IACT,eAAe;IACf,aAAa;IACb,WAAW;IACX,aAAa;IACb,UAAU;IACV,cAAc;IACd,WAAW;CACd,CAAA"} -------------------------------------------------------------------------------- /package/components/magicText/src/magicText.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"magicText.vue.js","sourceRoot":"","sources":["magicText.vue"],"names":[],"mappings":"AAAA,OAuEO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AACpC,aAAa,CAAC;IACV,IAAI,EAAE,gBAAgB;CACzB,CAAC,CAAA;AACF,MAAM,OAAO,GAAG,GAAG,CAAC,EAAE,CAAC,CAAA;AAEvB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;IACzB,IAAI,GAAG,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC;IAC1B,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,QAAkB,CAAA;AAC7C,CAAC;AACD,QAAQ,CAAA;AAIR,MAAM,SAAS,GAAG,EAAqE,CAAC;AAExF,IAAI,gBAAiE,CAAC;AAEtE,IAAI,gBAAiE,CAAC;AAGtE,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAC5B,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,IAAI,EAAE,uBAAuB,CAAC,IAAI,CAAC,eAClF,EAAE,KAAK,EAAE,eAAe,EAAE,IAC7B,WAAW,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,IAC9B,CAAC;AACH,IAAI,OAAO,GAAG,EACb,CAAC;AACuD,CAAC;AACF,CAAC;AAEzD,IAAI,OAAO,GAAG,OAAQ,CAAE;AAQxB,IAAI,aAK+D,CAAC;AACpE,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO;YACP,OAAO,EAAE,OAAyB;SACjC,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC9D,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,eAAe,EAA0D,CAAC;AAC1E,CAAC"} -------------------------------------------------------------------------------- /package/components/glowText/src/glowText.vue.js: -------------------------------------------------------------------------------- 1 | import { onMounted } from 'vue'; 2 | defineOptions({ 3 | name: 'CyberGlowText', 4 | }); 5 | const props = defineProps({ 6 | color: { 7 | type: String, 8 | default: '#e91e84', 9 | }, 10 | }); 11 | onMounted(() => { 12 | document.documentElement.style.setProperty('--child-color', props.color); 13 | }); 14 | debugger; 15 | const __VLS_ctx = {}; 16 | let __VLS_components; 17 | let __VLS_directives; 18 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "glow-text" })); 19 | var __VLS_0 = {}; 20 | ; 21 | var __VLS_1 = __VLS_0; 22 | var __VLS_dollars; 23 | const __VLS_self = (await import('vue')).defineComponent({ 24 | setup() { 25 | return {}; 26 | }, 27 | props: { 28 | color: { 29 | type: String, 30 | default: '#e91e84', 31 | }, 32 | }, 33 | }); 34 | const __VLS_component = (await import('vue')).defineComponent({ 35 | setup() { 36 | return {}; 37 | }, 38 | props: { 39 | color: { 40 | type: String, 41 | default: '#e91e84', 42 | }, 43 | }, 44 | }); 45 | export default {}; 46 | ; 47 | //# sourceMappingURL=glowText.vue.js.map -------------------------------------------------------------------------------- /package/utils/install.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"install.js","sourceRoot":"","sources":["install.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAKlC,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,IAAO,EACP,KAAS,EACT,EAAE;IACF,CAAC;IAAC,IAA0B,CAAC,OAAO,GAAG,CAAC,GAAG,EAAQ,EAAE;QACnD,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC,EAAE,CAAC;YACzD,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,CAAA;IAED,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAChD,CAAC;YAAC,IAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;QAC5B,CAAC;IACH,CAAC;IACD,OAAO,IAA6B,CAAA;AACtC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAI,EAAK,EAAE,IAAY,EAAE,EAAE;IAC5D,CAAC;IAAC,EAAwB,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;QAChD,CAAC;QAAC,EAA+B,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAA;QACzD,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAA;IACxC,CAAC,CAAA;IAED,OAAO,EAA8B,CAAA;AACvC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,SAAY,EACZ,IAAY,EACZ,EAAE;IACF,CAAC;IAAC,SAA+B,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAQ,EAAE;QAC7D,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,OAAO,SAA8B,CAAA;AACvC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAI,SAAY,EAAE,EAAE;IAChD,SAA+B,CAAC,OAAO,GAAG,IAAI,CAAA;IAE/C,OAAO,SAA8B,CAAA;AACvC,CAAC,CAAA"} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cyberpunk-ui", 3 | "private": false, 4 | "version": "1.0.46", 5 | "scripts": { 6 | "build": "vue-tsc -b && vite build", 7 | "preview": "vite preview", 8 | "test:dev": "pnpm -C test dev", 9 | "docs:dev": "pnpm -C docs dev", 10 | "docs:build": "pnpm -C docs build" 11 | }, 12 | "dependencies": { 13 | "sass": "^1.77.8", 14 | "vue": "^3.4.31" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^20.14.12", 18 | "@vitejs/plugin-vue": "^5.1.2", 19 | "@vue/runtime-core": "^3.4.34", 20 | "@vue/shared": "^3.4.34", 21 | "typescript": "^5.2.2", 22 | "vite": "^5.1.2", 23 | "vue-tsc": "^2.0.24" 24 | }, 25 | "author": "anxueyu", 26 | "description": "cyberpunk-ui,cyberpunk,cyberpunkUI", 27 | "keywords": [ 28 | "cyberpunk-ui" 29 | ], 30 | "homepage": "", 31 | "repository": { 32 | "type": "git", 33 | "url": "" 34 | }, 35 | "files": [ 36 | "lib/*", 37 | "package/*", 38 | "READEME.md", 39 | "package.json" 40 | ], 41 | "main": "./lib/cyberpunk-ui.umd.js", 42 | "module": "./lib/cyberpunk-ui.mjs", 43 | "exports": { 44 | ".": { 45 | "import": "./lib/cyberpunk-ui.mjs", 46 | "require": "./lib/cyberpunk-ui.umd.js" 47 | }, 48 | "./lib/style.css": "./lib/style.css" 49 | }, 50 | "engines": { 51 | "node": ">=18.18.2" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /test/src/conponents/table.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /test/src/conponents/banner.vue: -------------------------------------------------------------------------------- 1 | 9 | 27 | 38 | -------------------------------------------------------------------------------- /package/utils/install.ts: -------------------------------------------------------------------------------- 1 | import { NOOP } from '@vue/shared' 2 | 3 | import type { App, Directive } from 'vue' 4 | import type { SFCInstallWithContext, SFCWithInstall } from './typescript.ts' 5 | 6 | export const withInstall = >( 7 | main: T, 8 | extra?: E 9 | ) => { 10 | ;(main as SFCWithInstall).install = (app): void => { 11 | for (const comp of [main, ...Object.values(extra ?? {})]) { 12 | app.component(comp.name, comp) 13 | } 14 | } 15 | 16 | if (extra) { 17 | for (const [key, comp] of Object.entries(extra)) { 18 | ;(main as any)[key] = comp 19 | } 20 | } 21 | return main as SFCWithInstall & E 22 | } 23 | 24 | export const withInstallFunction = (fn: T, name: string) => { 25 | ;(fn as SFCWithInstall).install = (app: App) => { 26 | ;(fn as SFCInstallWithContext)._context = app._context 27 | app.config.globalProperties[name] = fn 28 | } 29 | 30 | return fn as SFCInstallWithContext 31 | } 32 | 33 | export const withInstallDirective = ( 34 | directive: T, 35 | name: string 36 | ) => { 37 | ;(directive as SFCWithInstall).install = (app: App): void => { 38 | app.directive(name, directive) 39 | } 40 | 41 | return directive as SFCWithInstall 42 | } 43 | 44 | export const withNoopInstall = (component: T) => { 45 | (component as SFCWithInstall).install = NOOP 46 | 47 | return component as SFCWithInstall 48 | } -------------------------------------------------------------------------------- /lib/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package/components/glowText/src/glowText.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/src/layout/layout.vue: -------------------------------------------------------------------------------- 1 | 13 | 23 | 60 | -------------------------------------------------------------------------------- /package/components/text/src/text.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"text.vue.js","sourceRoot":"","sources":["text.vue"],"names":[],"mappings":"AAAA,OAuNO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AACpC,aAAa,CAAC;IACV,IAAI,EAAE,WAAW;CACpB,CAAC,CAAA;AACF,MAAM,OAAO,GAAG,GAAG,CAAC,EAAE,CAAC,CAAA;AAEvB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;IACzB,IAAI,GAAG,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC;IAC1B,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,QAAkB,CAAA;AAC7C,CAAC;AACD,MAAM,KAAK,GAAG,WAAW,CAAC;IACtB,SAAS,EAAE;QACP,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,MAAM;KAClB;CACJ,CAAC,CAAA;AAEF,QAAQ,CAAA;AAIR,MAAM,SAAS,GAAG,EAAqE,CAAC;AAExF,IAAI,gBAAiE,CAAC;AAEtE,IAAI,gBAAiE,CAAC;AAIpB,CAAC;AACD,CAAC;AACD,CAAC;AAGnD,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,SAAS,EAAE,IACvB,WAAW,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,IAC9B,CAAC;AACH,IAAI,OAAO,GAAG,EACb,CAAC;AACF,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,cAAc,EAAE,EACzB,EAAE,KAAK,EAAE,CAAC,cAAc,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,EAC9C,CAAC;AAC+C,CAAC;AACI,CAAC;AAExD,IAAI,OAAO,GAAG,OAAQ,CAAE;AAQxB,IAAI,aAK+D,CAAC;AACpE,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO;YACP,OAAO,EAAE,OAAyB;SACjC,CAAC;IACF,CAAC;IACD,KAAK,EAAE;QACH,SAAS,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,MAAM;SAClB;KACJ;CACA,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC9D,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;IACD,KAAK,EAAE;QACH,SAAS,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,MAAM;SAClB;KACJ;CACA,CAAC,CAAC;AACH,eAAe,EAA0D,CAAC;AAC1E,CAAC"} -------------------------------------------------------------------------------- /package/components/text/src/text.vue.js: -------------------------------------------------------------------------------- 1 | import { ref, useSlots } from 'vue'; 2 | defineOptions({ 3 | name: 'CyberText', 4 | }); 5 | const content = ref(''); 6 | const slots = useSlots(); 7 | if (slots && slots.default) { 8 | let tep = slots.default(); 9 | content.value = tep[0].children; 10 | } 11 | const props = defineProps({ 12 | lineColor: { 13 | type: String, 14 | default: '#fff' 15 | }, 16 | }); 17 | debugger; 18 | const __VLS_ctx = {}; 19 | let __VLS_components; 20 | let __VLS_directives; 21 | ; 22 | ; 23 | ; 24 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "cp-text" }, { 'data-word': (__VLS_ctx.content) })); 25 | var __VLS_0 = {}; 26 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "cp-text-line" }, { style: ('background: ' + props.lineColor) })); 27 | ; 28 | ; 29 | var __VLS_1 = __VLS_0; 30 | var __VLS_dollars; 31 | const __VLS_self = (await import('vue')).defineComponent({ 32 | setup() { 33 | return { 34 | content: content, 35 | }; 36 | }, 37 | props: { 38 | lineColor: { 39 | type: String, 40 | default: '#fff' 41 | }, 42 | }, 43 | }); 44 | const __VLS_component = (await import('vue')).defineComponent({ 45 | setup() { 46 | return {}; 47 | }, 48 | props: { 49 | lineColor: { 50 | type: String, 51 | default: '#fff' 52 | }, 53 | }, 54 | }); 55 | export default {}; 56 | ; 57 | //# sourceMappingURL=text.vue.js.map -------------------------------------------------------------------------------- /test/src/conponents/banner.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"banner.vue.js","sourceRoot":"","sources":["banner.vue"],"names":[],"mappings":"AAAA,MAsCM,OAAO,GAAG;IACZ,yEAAyE;IACzE,yEAAyE;IACzE,yEAAyE;IACzE,yEAAyE;IACzE,yEAAyE;IACzE,yEAAyE;IACzE,uEAAuE;CAC1E,CAAA;AACD,MAAM,QAAQ,GAAG;IACb,yEAAyE;IACzE,yEAAyE;IACzE,yEAAyE;IACzE,yEAAyE;CAC5E,CAAA;AACD,QAAQ,CAAA;AAIR,MAAM,SAAS,GAAG,EAAqE,CAAC;AAExF,IAAI,gBAAiE,CAAC;AAEtE,IAAI,gBAAiE,CAAC;AAMtE,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,SAAS,EAAE,EACrB,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,MAAM,EAAE,EAClB,CAAC;AACH,MAAM,OAAO,GAAI,EAAoH,CAAC,WAAW,CAAC;AACmB,CAAC;AAEtK,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,OAAO,CAAC;IACjE,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,CAAC,GAAG,CAAC;IAChB,OAAO,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC;CAC3B,CAAC,CAAC,CAAC;AACJ,MAAM,OAAO,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,CAAC,GAAG,CAAC;IAChB,OAAO,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC;CAC3B,EAAE,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;AAClD,MAAM,OAAO,GAAI,EAAoH,CAAC,WAAW,CAAC;AACmB,CAAC;AAEtK,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,OAAO,CAAC;IACjE,iBAAiB,EAAE,CAAC,EAAE,CAAC;IACvB,OAAO,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC;IAC7B,MAAM,EAAE,CAAC,KAAK,CAAC;CACd,CAAC,CAAC,CAAC;AACJ,MAAM,OAAO,GAAG,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,EAAE,CAAC;IACvB,OAAO,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC;IAC7B,MAAM,EAAE,CAAC,KAAK,CAAC;CACd,EAAE,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;AACA,CAAC;AACJ,CAAC;AAOhD,IAAI,aAK+D,CAAC;AACpE,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO;YACP,OAAO,EAAE,OAAyB;YAClC,QAAQ,EAAE,QAA2B;SACpC,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,eAAe,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACrD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,CAAC"} -------------------------------------------------------------------------------- /package/cyberpunk-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cyberpunk-ui", 3 | "version": "1.0.3", 4 | "description": "", 5 | "main": "lib/index.js", 6 | "module": "es/index.mjs", 7 | "types": "es/index.d.ts", 8 | "exports": { 9 | ".": { 10 | "types": "./es/index.d.ts", 11 | "import": "./es/index.mjs", 12 | "require": "./lib/index.js" 13 | }, 14 | "./global": { 15 | "types": "./global.d.ts" 16 | }, 17 | "./es": { 18 | "types": "./es/index.d.ts", 19 | "import": "./es/index.mjs" 20 | }, 21 | "./lib": { 22 | "types": "./lib/index.d.ts", 23 | "require": "./lib/index.js" 24 | }, 25 | "./es/*.mjs": { 26 | "types": "./es/*.d.ts", 27 | "import": "./es/*.mjs" 28 | }, 29 | "./es/*": { 30 | "types": [ 31 | "./es/*.d.ts", 32 | "./es/*/index.d.ts" 33 | ], 34 | "import": "./es/*.mjs" 35 | }, 36 | "./lib/*.js": { 37 | "types": "./lib/*.d.ts", 38 | "require": "./lib/*.js" 39 | }, 40 | "./lib/*": { 41 | "types": [ 42 | "./lib/*.d.ts", 43 | "./lib/*/index.d.ts" 44 | ], 45 | "require": "./lib/*.js" 46 | }, 47 | "./*": "./*" 48 | }, 49 | "unpkg": "dist/index.full.js", 50 | "jsdelivr": "dist/index.full.js", 51 | "publishConfig": { 52 | "access": "public" 53 | }, 54 | "style": "dist/index.css", 55 | "sideEffects": [ 56 | "dist/*", 57 | "theme-chalk/**/*.css", 58 | "theme-chalk/src/**/*.scss", 59 | "es/components/*/style/*", 60 | "lib/components/*/style/*" 61 | ], 62 | "peerDependencies": { 63 | "vue": "^3.2.0" 64 | }, 65 | "scripts": { 66 | "test": "echo \"Error: no test specified\" && exit 1" 67 | }, 68 | "keywords": [], 69 | "author": "", 70 | "license": "ISC" 71 | } 72 | -------------------------------------------------------------------------------- /package/cyberpunk-ui/component.js: -------------------------------------------------------------------------------- 1 | import { CyberButton } from '../components/button'; 2 | import { CyberNotification } from '../components/cyberNotification'; 3 | import { CyberTooltip } from '../components/cyberTooltip'; 4 | import { CyberDigitalCounter } from '../components/digitalCounter'; 5 | import { CyberFullPage } from '../components/fullPage'; 6 | import { CyberGlitchImage } from '../components/glitchImage'; 7 | import { CyberGlitchProgress } from '../components/glitchProgress'; 8 | import { CyberGlowText } from '../components/glowText'; 9 | import { CyberHoloCard } from '../components/holoCard'; 10 | import { CyberHoloLoader } from '../components/holoLoader'; 11 | import { CyberInfiniteTable } from '../components/infiniteTable'; 12 | import { CyberNenobutton } from '../components/nenoButton'; 13 | import { CyberNeonToggle } from '../components/neonToggle'; 14 | import { CyberReflectbutton } from '../components/reflectButton'; 15 | import { CyberText } from '../components/text'; 16 | import { CyberShadowText } from '../components/shadowText'; 17 | import { CyberTyping } from '../components/typing'; 18 | import { CyberImage } from '../components/image'; 19 | import { CyberMagicText } from '../components/magicText'; 20 | import { CyberBanner } from '../components/banner'; 21 | export default [ 22 | CyberButton, 23 | CyberNotification, 24 | CyberTooltip, 25 | CyberDigitalCounter, 26 | CyberGlitchImage, 27 | CyberGlitchProgress, 28 | CyberHoloCard, 29 | CyberHoloLoader, 30 | CyberInfiniteTable, 31 | CyberNeonToggle, 32 | CyberNenobutton, 33 | CyberReflectbutton, 34 | CyberText, 35 | CyberShadowText, 36 | CyberGlowText, 37 | CyberTyping, 38 | CyberFullPage, 39 | CyberImage, 40 | CyberMagicText, 41 | CyberBanner 42 | ]; 43 | //# sourceMappingURL=component.js.map -------------------------------------------------------------------------------- /test/src/conponents/loading.vue: -------------------------------------------------------------------------------- 1 | 33 | 35 | 49 | -------------------------------------------------------------------------------- /package/components/typing/src/typing.vue.js: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | 16 | 17 | /// 45 | 46 | defineOptions({ 47 | name: 'CyberTyping', 48 | }); 49 | debugger; 50 | const __VLS_ctx = {}; 51 | let __VLS_components; 52 | let __VLS_directives; 53 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "cp-typing" })); 54 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "content" })); 55 | var __VLS_0 = {}; 56 | ; 57 | ; 58 | var __VLS_1 = __VLS_0; 59 | var __VLS_dollars; 60 | const __VLS_self = (await import('vue')).defineComponent({ 61 | setup() { 62 | return {}; 63 | }, 64 | }); 65 | const __VLS_component = (await import('vue')).defineComponent({ 66 | setup() { 67 | return {}; 68 | }, 69 | }); 70 | export default {}; 71 | ; 72 | //# sourceMappingURL=typing.vue.js.map -------------------------------------------------------------------------------- /test/src/conponents/text.vue: -------------------------------------------------------------------------------- 1 | 33 | 35 | 42 | 43 | -------------------------------------------------------------------------------- /test/src/layout/header.vue: -------------------------------------------------------------------------------- 1 | 25 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 9 | # CyberPunk UI 🚀 10 | 11 | 🌟 **探索未来世界的界面设计** 🌆 12 | 13 | --- 14 | 15 | ## 📝 介绍 16 | 17 | 欢迎来到CyberPunk Vue组件库，这是一套专为Vue.js应用设计的、充满未来感与科技风的UI组件集合。我们致力于提供既美观又实用的组件，帮助开发者轻松构建具有赛博朋克风格的用户界面。 18 | 19 | - **文档**：[在线文档](https://cyberpunk-ui.netlify.app/) 20 | - **仓库**：[GitHub仓库](https://github.com/whanxueyu/cyberpunk-ui) 21 | 22 | 23 | 24 | ## ✨ 特性 25 | 26 | - 🔧 **丰富的组件选择**：从按钮到按钮、文字、表格，从模态框到进度条，我们提供了多种组件以满足不同场景的需求。 27 | - 🎨 **高度可定制**：每个组件都支持颜色、大小和样式自定义，确保与您的设计完美融合。 28 | - 📱 **响应式设计**：所有组件均采用响应式布局，确保在各种设备上都能提供优秀的用户体验。 29 | - 💻 **易于集成**：只需几行代码即可将我们的组件集成到您的Vue项目中。 30 | - 📊 **数据可视化**：提供丰富的图表组件，助您轻松创建动态、交互式的图表。 31 | 32 | ## 🚀 快速开始 33 | 34 | ### 📦 安装 35 | 36 | 通过npm或yarn安装本组件库： 37 | 38 | ```bash 39 | npm install cyberpunk-ui 40 | # 或者 41 | yarn add cyberpunk-ui 42 | ``` 43 | 44 | ### 🛠️ 使用 45 | 在您的Vue项目中导入所需的组件： 46 | 47 | ```javascript 48 | //main.ts 49 | import { createApp } from 'vue' 50 | import App from './App.vue' 51 | import CyberpunkUi from 'cyberpunk-ui' 52 | import "cyberpunk-ui/lib/style.css"; 53 | const app = createApp(App) 54 | app.use(CyberpunkUi) 55 | app.mount('#app') 56 | ``` 57 | 然后在模板中使用这些组件： 58 | 59 | ```html 60 | 69 | ``` 70 | ### 📚 文档 71 | 详细的组件文档和示例，请访问我们的官方网站[在线文档](https://cyberpunk-ui.netlify.app/) 72 | 73 | 74 | ### 📊 仓库 75 | GitHub仓库：[GitHub仓库](https://github.com/whanxueyu/cyberpunk-ui) 76 | 77 | ### 🤝 贡献 78 | 我们欢迎社区的贡献！如果您有任何改进建议或发现bug，请提交issue或直接创建pull request。 79 | 80 | ### 📄 许可证 81 | 本项目遵循MIT许可证，详情见LICENSE文件。 82 | 83 | 🌟 加入我们，一起创造未来！ 84 | 85 | -------------------------------------------------------------------------------- /test/src/layout/layout.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"layout.vue.js","sourceRoot":"","sources":["layout.vue"],"names":[],"mappings":"AAAA,OA6DO,OAAO,MAAM,cAAc,CAAC;AACnC,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,gBAAgB,EAAC,YAAY,CAAC,CAAC,CAAA;AAC1D,MAAM,cAAc,GAAG,CAAC,QAAgB,EAAE,EAAE;IACxC,KAAK,CAAC,gBAAgB,EAAC,QAAQ,CAAC,CAAA;AACpC,CAAC,CAAA;AACD,MAAM,UAAU,GAAG,CAAC,KAAc,EAAE,EAAE;IAClC,KAAK,CAAC,YAAY,EAAC,KAAK,CAAC,CAAA;AAC7B,CAAC,CAAA;AACD,QAAQ,CAAA;AAIR,MAAM,SAAS,GAAG,EAAqE,CAAC;AAExF,IAAI,gBAAiE,CAAC;AAEtE,IAAI,gBAAiE,CAAC;AAStE,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,MAAM,EAAE,EAClB,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,QAAQ,EAAE,EACpB,CAAC;AAC8C,CAAC;AAElD,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,OAAO,eAC7D,EAAE,kBAAkB,EAAE,EAAS,EAAE,EACjC,EAAE,cAAc,EAAE,EAAS,EAAE,EAC9B,CAAC,CAAC;AACJ,MAAM,OAAO,GAAG,OAAO,eACpB,EAAE,kBAAkB,EAAE,EAAS,EAAE,EACjC,EAAE,cAAc,EAAE,EAAS,EAAE,GAC7B,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;AAClD,IAAI,OAA6B,CAAC;AAClC,IAAI,OAA8C,CAAC;AACnD,IAAI,OAAwE,CAAC;AAC7E,MAAM,OAAO,GAA0H;IACvI,gBAAgB,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC;CAAC,CAAC;AAC9C,MAAM,OAAO,GAA8G;IAC3H,YAAY,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC;CAAC,CAAC;AACtC,IAAI,OAA0E,CAAC;AAC/E,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,MAAM,EAAE,EAClB,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,cAAc,EAAE,EAC1B,CAAC;AACH,IAAI,OAAO,GAAG,EACb,CAAC;AAC6C,CAAC;AACC,CAAC;AACH,CAAC;AACO,CAAC;AAExD,IAAI,OAAO,GAAG,OAAQ,CAAE;AAQxB,IAAI,aAK+D,CAAC;AACpE,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO;YACP,OAAO,EAAE,OAAyB;YAClC,cAAc,EAAE,cAAuC;YACvD,UAAU,EAAE,UAA+B;SAC1C,CAAC;IACF,CAAC;IACD,KAAK,EAAE,EAAwC;CAC9C,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC9D,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;IACD,KAAK,EAAE,EAAwC;CAC9C,CAAC,CAAC;AACH,eAAe,EAA0D,CAAC;AAC1E,CAAC"} -------------------------------------------------------------------------------- /test/src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | 55 | button:focus, 56 | button:focus-visible { 57 | outline: 4px auto -webkit-focus-ring-color; 58 | } 59 | 60 | .card { 61 | padding: 2em; 62 | } 63 | 64 | .light { 65 | background: #fff; 66 | 67 | #app { 68 | background: #fff; 69 | } 70 | } 71 | 72 | .dark { 73 | background: #111; 74 | color: #fff; 75 | 76 | #app { 77 | background: #111; 78 | color: #fff; 79 | } 80 | } 81 | 82 | #app { 83 | margin: 0 auto; 84 | text-align: center; 85 | } 86 | 87 | @media (prefers-color-scheme: light) { 88 | :root { 89 | color: #213547; 90 | background-color: #ffffff; 91 | } 92 | 93 | a:hover { 94 | color: #747bff; 95 | } 96 | 97 | button { 98 | background-color: #f9f9f9; 99 | } 100 | } -------------------------------------------------------------------------------- /test/src/layout/layout.vue.js: -------------------------------------------------------------------------------- 1 | import headVue from './header.vue'; 2 | const emits = defineEmits(["changePosition", "changeShow"]); 3 | const changePosition = (position) => { 4 | emits("changePosition", position); 5 | }; 6 | const changeShow = (value) => { 7 | emits("changeShow", value); 8 | }; 9 | debugger; 10 | const __VLS_ctx = {}; 11 | let __VLS_components; 12 | let __VLS_directives; 13 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "main" })); 14 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "header" })); 15 | ; 16 | const __VLS_0 = __VLS_asFunctionalComponent(headVue, new headVue(Object.assign({ 'onChangePosition': {} }, { 'onChangeShow': {} }))); 17 | const __VLS_1 = __VLS_0(Object.assign({ 'onChangePosition': {} }, { 'onChangeShow': {} }), ...__VLS_functionalComponentArgsRest(__VLS_0)); 18 | let __VLS_3; 19 | let __VLS_4; 20 | let __VLS_5; 21 | const __VLS_6 = { 22 | onChangePosition: (__VLS_ctx.changePosition) 23 | }; 24 | const __VLS_7 = { 25 | onChangeShow: (__VLS_ctx.changeShow) 26 | }; 27 | var __VLS_2; 28 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "page" })); 29 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "page-content" })); 30 | var __VLS_8 = {}; 31 | ; 32 | ; 33 | ; 34 | ; 35 | var __VLS_9 = __VLS_8; 36 | var __VLS_dollars; 37 | const __VLS_self = (await import('vue')).defineComponent({ 38 | setup() { 39 | return { 40 | headVue: headVue, 41 | changePosition: changePosition, 42 | changeShow: changeShow, 43 | }; 44 | }, 45 | emits: {}, 46 | }); 47 | const __VLS_component = (await import('vue')).defineComponent({ 48 | setup() { 49 | return {}; 50 | }, 51 | emits: {}, 52 | }); 53 | export default {}; 54 | ; 55 | //# sourceMappingURL=layout.vue.js.map -------------------------------------------------------------------------------- /test/src/conponents/card.vue: -------------------------------------------------------------------------------- 1 | 49 | 51 | 62 | -------------------------------------------------------------------------------- /package/components/magicText/src/magicText.vue: -------------------------------------------------------------------------------- 1 | 8 | 21 | -------------------------------------------------------------------------------- /package/components/shadowText/src/shadowText.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /package/cyberpunk-ui/component.ts: -------------------------------------------------------------------------------- 1 | import { CyberButton } from '../components/button'; 2 | import { CyberNotification } from '../components/cyberNotification'; 3 | import { CyberTooltip } from '../components/cyberTooltip'; 4 | import { CyberDigitalCounter } from '../components/digitalCounter'; 5 | import { CyberFullPage } from '../components/fullPage' 6 | import { CyberGlitchImage } from '../components/glitchImage'; 7 | import { CyberGlitchProgress } from '../components/glitchProgress'; 8 | import { CyberGlowText } from '../components/glowText' 9 | import { CyberHoloCard } from '../components/holoCard'; 10 | import { CyberHoloLoader } from '../components/holoLoader'; 11 | import { CyberInfiniteTable } from '../components/infiniteTable'; 12 | import { CyberNenobutton } from '../components/nenoButton'; 13 | import { CyberNeonToggle } from '../components/neonToggle'; 14 | import { CyberReflectbutton } from '../components/reflectButton'; 15 | import { CyberText } from '../components/text' 16 | import { CyberShadowText } from '../components/shadowText' 17 | import { CyberTyping } from '../components/typing' 18 | import { CyberImage } from '../components/image'; 19 | import { CyberMagicText } from '../components/magicText'; 20 | import { CyberBanner } from '../components/banner'; 21 | export default [ 22 | CyberButton, 23 | CyberNotification, 24 | CyberTooltip, 25 | CyberDigitalCounter, 26 | CyberGlitchImage, 27 | CyberGlitchProgress, 28 | CyberHoloCard, 29 | CyberHoloLoader, 30 | CyberInfiniteTable, 31 | CyberNeonToggle, 32 | CyberNenobutton, 33 | CyberReflectbutton, 34 | CyberText, 35 | CyberShadowText, 36 | CyberGlowText, 37 | CyberTyping, 38 | CyberFullPage, 39 | CyberImage, 40 | CyberMagicText, 41 | CyberBanner 42 | ] 43 | 44 | 45 | // export * from './button'; 46 | // export * from './cyberNotification'; 47 | // export * from './cyberTooltip'; 48 | // export * from './digitalCounter'; 49 | // export * from './fullPage'; 50 | // export * from './glitchImage' 51 | // export * from './glitchProgress' 52 | // export * from './glowText' 53 | // export * from './holoCard' 54 | // export * from './holoLoader' 55 | // export * from './infiniteTable' 56 | // export * from './nenoButton' 57 | // export * from './neonToggle' 58 | // export * from './reflectButton' 59 | // export * from './shadowText' 60 | // export * from './text' 61 | // export * from './typing' -------------------------------------------------------------------------------- /docs/components/glitch-progress.md: -------------------------------------------------------------------------------- 1 | # GlitchProgress 故障进度条 2 | 3 | 故障进度条组件融合了故障艺术效果的进度指示器，适合在赛博朋克风格的界面中展示加载、上传、下载等进度。 4 | 5 | ## 基本用法 6 | 7 | 8 | 9 | ```vue 10 | 13 | ``` 14 | 15 | ## 不同方向 16 | 17 | 18 |


19 | 20 | 21 | ```vue 22 | 26 | ``` 27 | 28 | ## 不确定状态 29 | 30 | 31 | 32 | ```vue 33 | 36 | ``` 37 | 38 | ## 自定义颜色 39 | 40 | 41 | 42 | 43 | 44 | 45 | ```vue 46 | 52 | ``` 53 | 54 | ## 故障强度 55 | 56 | 57 | 58 | 59 | 60 | ```vue 61 | 66 | ``` 67 | 68 | ## 属性 69 | 70 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 71 | |--------|------|------|--------|--------| 72 | | progress | 进度值（百分比） | number | 0-100 | 0 | 73 | | direction | 进度条方向 | string | horizontal / vertical | horizontal | 74 | | glitchIntensity | 故障效果强度 | number | 1-10 | 5 | 75 | | indeterminate | 是否为不确定状态 | boolean | — | false | 76 | | color | 进度条颜色 | string | — | #00e6f6 | 77 | | showText | 是否显示进度文本 | boolean | — | true | 78 | 79 | ## 事件 80 | 81 | | 事件名 | 说明 | 回调参数 | 82 | |--------|------|----------| 83 | | change | 进度变化事件 | value: number | 84 | -------------------------------------------------------------------------------- /docs/components/banner.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FullPage 3 | lang: en-US 4 | --- 5 | # Banner 3D轮播 6 | 7 | 一个3D轮播图组件，可以设置阴影反射效果 `shadow`，设置每个图片宽度`imgWidth`，设置每个图片高度 `imgHeight`，设置轮播间隔时间 `animationDuration` 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 |
35 | 36 | 37 |
38 |
39 | 40 | 53 | 54 | 71 | 72 | 73 | ## 参数说明 74 | 75 | | 名称 | 说明 | 类型 | 可选值 | 默认值 | 76 | | ----------- |:-----------------| -----------------|-----------|-----------| 77 | | imgList | 轮播图片地址数组 | `Array`| - | - | 78 | | imgWidth | 图片宽度 | `number`| - | `500`| 79 | | imgHeight | 图片高度 | `number`| - | `400`| 80 | | shadow | 是否显示阴影效果 | `boolean`| - | `true`| 81 | | animationDuration | 动画速度，转一圈的时间 | `number`| - | `30`| -------------------------------------------------------------------------------- /test/src/conponents/banner.vue.js: -------------------------------------------------------------------------------- 1 | const imgList = [ 2 | 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 3 | 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 4 | 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', 5 | 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', 6 | 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', 7 | 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 8 | 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', 9 | ]; 10 | const imgList1 = [ 11 | 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 12 | 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 13 | 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', 14 | 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', 15 | ]; 16 | debugger; 17 | const __VLS_ctx = {}; 18 | let __VLS_components; 19 | let __VLS_directives; 20 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "content" })); 21 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "flex" })); 22 | const __VLS_0 = {}.CyberBanner; 23 | ; 24 | const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ 25 | imgWidth: "200", 26 | imgHeight: (120), 27 | imgList: (__VLS_ctx.imgList), 28 | })); 29 | const __VLS_2 = __VLS_1({ 30 | imgWidth: "200", 31 | imgHeight: (120), 32 | imgList: (__VLS_ctx.imgList), 33 | }, ...__VLS_functionalComponentArgsRest(__VLS_1)); 34 | const __VLS_4 = {}.CyberBanner; 35 | ; 36 | const __VLS_5 = __VLS_asFunctionalComponent(__VLS_4, new __VLS_4({ 37 | animationDuration: (20), 38 | imgList: (__VLS_ctx.imgList1), 39 | shadow: (false), 40 | })); 41 | const __VLS_6 = __VLS_5({ 42 | animationDuration: (20), 43 | imgList: (__VLS_ctx.imgList1), 44 | shadow: (false), 45 | }, ...__VLS_functionalComponentArgsRest(__VLS_5)); 46 | ; 47 | ; 48 | var __VLS_dollars; 49 | const __VLS_self = (await import('vue')).defineComponent({ 50 | setup() { 51 | return { 52 | imgList: imgList, 53 | imgList1: imgList1, 54 | }; 55 | }, 56 | }); 57 | export default (await import('vue')).defineComponent({ 58 | setup() { 59 | return {}; 60 | }, 61 | }); 62 | ; 63 | //# sourceMappingURL=banner.vue.js.map -------------------------------------------------------------------------------- /docs/.vitepress/theme/overrides.css: -------------------------------------------------------------------------------- 1 | .vp-code-group .tabs label { 2 | background-color: transparent; 3 | } 4 | 5 | table { 6 | width: 100% !important; 7 | display: table; 8 | } 9 | 10 | .custom-block.tip .custom-block-title { 11 | color: var(--vp-c-brand-1); 12 | } 13 | 14 | .VPHero .image-bg { 15 | z-index: 1; 16 | opacity: 0.8; 17 | transition: opacity 1s ease; 18 | } 19 | 20 | .VPHero .image-container:hover .image-bg { 21 | opacity: 0.2; 22 | } 23 | 24 | 25 | /** 26 | * VitePress: Custom fix 27 | * -------------------------------------------------------------------------- */ 28 | 29 | /* 30 | Use lighter colors for links in dark mode for a11y. 31 | Also specify some classes twice to have higher specificity 32 | over scoped class data attribute. 33 | */ 34 | .dark .vp-doc a, 35 | .dark .vp-doc a > code, 36 | .dark .VPNavBarMenuLink.VPNavBarMenuLink:hover, 37 | .dark .VPNavBarMenuLink.VPNavBarMenuLink.active, 38 | .dark .link.link:hover, 39 | .dark .link.link.active, 40 | .dark .edit-link-button.edit-link-button, 41 | .dark .pager-link .title { 42 | color: var(--vp-c-brand-lighter); 43 | } 44 | 45 | .dark .vp-doc a:hover, 46 | .dark .vp-doc a > code:hover { 47 | color: var(--vp-c-brand-lightest); 48 | opacity: 1; 49 | } 50 | 51 | /* Transition by color instead of opacity */ 52 | .dark .vp-doc .custom-block a { 53 | transition: color 0.25s; 54 | } 55 | 56 | 57 | /* VitePress Search */ 58 | .VPLocalSearchBox .result { 59 | --vp-c-bg-search-result: var(--vp-c-bg); 60 | background: var(--vp-c-bg-search-result) !important; 61 | padding: 4px !important; 62 | border: 1px solid var(--vp-c-divider) !important; 63 | } 64 | .VPLocalSearchBox .result.selected { 65 | --vp-c-bg-search-result: var(--vp-c-bg-soft) !important; 66 | } 67 | .VPLocalSearchBox .result .excerpt-gradient-top { 68 | background: linear-gradient(var(--vp-c-bg-search-result),transparent) !important; 69 | } 70 | .VPLocalSearchBox .result .excerpt-gradient-bottom { 71 | background: linear-gradient(transparent,var(--vp-c-bg-search-result)) !important; 72 | } 73 | .VPLocalSearchBox .title-icon { 74 | display: none; 75 | } 76 | .VPLocalSearchBox .excerpt-wrapper { 77 | margin-top: 4px; 78 | } 79 | 80 | /* dark/light radial transition */ 81 | ::view-transition-old(root), 82 | ::view-transition-new(root) { 83 | animation: none; 84 | mix-blend-mode: normal; 85 | } 86 | 87 | ::view-transition-old(root), 88 | .dark::view-transition-new(root) { 89 | z-index: 1; 90 | } 91 | 92 | ::view-transition-new(root), 93 | .dark::view-transition-old(root) { 94 | z-index: 9999; 95 | } -------------------------------------------------------------------------------- /test/src/conponents/table.vue.js: -------------------------------------------------------------------------------- 1 | import { ref, onMounted } from 'vue'; 2 | const columns = ref([ 3 | { key: 'id', title: 'ID', width: 80 }, 4 | { key: 'name', title: '名称', width: 150 }, 5 | { key: 'status', title: '状态', width: 100, sortable: true }, 6 | { key: 'value', title: '数值', width: 120 }, 7 | { key: 'timestamp', title: '时间', width: 180 } 8 | ]); 9 | const realTimeData = ref([]); 10 | let dataCounter = 0; 11 | const generateData = () => { 12 | return { 13 | id: dataCounter++, 14 | name: `设备-${Math.floor(Math.random() * 100)}`, 15 | status: ['online', 'offline', 'warning'][Math.floor(Math.random() * 3)], 16 | value: Math.floor(Math.random() * 1000), 17 | timestamp: new Date().toLocaleTimeString() 18 | }; 19 | }; 20 | const loadMoreData = () => { 21 | for (let i = 0; i < 20; i++) { 22 | realTimeData.value.push(generateData()); 23 | } 24 | }; 25 | onMounted(() => { 26 | for (let i = 0; i < 50; i++) { 27 | realTimeData.value.push(generateData()); 28 | } 29 | setInterval(() => { 30 | realTimeData.value.shift(); 31 | realTimeData.value.push(generateData()); 32 | }, 2000); 33 | }); 34 | debugger; 35 | const __VLS_ctx = {}; 36 | let __VLS_components; 37 | let __VLS_directives; 38 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "dashboard" })); 39 | const __VLS_0 = {}.CyberInfiniteTable; 40 | ; 41 | const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0(Object.assign({ 'onLoadMore': {} }, { data: (__VLS_ctx.realTimeData), columns: (__VLS_ctx.columns), rowHeight: "45", autoScroll: (true), speed: (2), loop: (true), pauseOnHover: (true), showControls: (true) }))); 42 | const __VLS_2 = __VLS_1(Object.assign({ 'onLoadMore': {} }, { data: (__VLS_ctx.realTimeData), columns: (__VLS_ctx.columns), rowHeight: "45", autoScroll: (true), speed: (2), loop: (true), pauseOnHover: (true), showControls: (true) }), ...__VLS_functionalComponentArgsRest(__VLS_1)); 43 | let __VLS_4; 44 | let __VLS_5; 45 | let __VLS_6; 46 | const __VLS_7 = { 47 | onLoadMore: (__VLS_ctx.loadMoreData) 48 | }; 49 | __VLS_3.slots.default; 50 | { 51 | const { 'cell-status': __VLS_thisSlot } = __VLS_3.slots; 52 | const [{ row }] = __VLS_getSlotParams(__VLS_thisSlot); 53 | __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)(Object.assign({ class: (`status-dot ${row.status}`) })); 54 | (row.status); 55 | } 56 | var __VLS_3; 57 | ; 58 | var __VLS_dollars; 59 | const __VLS_self = (await import('vue')).defineComponent({ 60 | setup() { 61 | return { 62 | columns: columns, 63 | realTimeData: realTimeData, 64 | loadMoreData: loadMoreData, 65 | }; 66 | }, 67 | }); 68 | export default (await import('vue')).defineComponent({ 69 | setup() { 70 | return {}; 71 | }, 72 | }); 73 | ; 74 | //# sourceMappingURL=table.vue.js.map -------------------------------------------------------------------------------- /docs/.vitepress/config.ts: -------------------------------------------------------------------------------- 1 | // .vitepress/config.ts 2 | export default { 3 | title: 'CyberPunk-UI', 4 | description: 'cyberpunk-ui', 5 | /* prettier-ignore */ 6 | head: [ 7 | ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }], 8 | ['meta', { property: 'og:type', content: 'website' }], 9 | ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }], 10 | ['meta', { property: 'og:title', content: 'CyberPunk-UI | Vite & Vue3 & TS Powered A library of future components' }], 11 | ['meta', { property: 'og:site_name', content: 'CyberPunk-UI' }], 12 | ], 13 | themeConfig: { 14 | appearance: true, 15 | lastUpdate: '最后更新时间', 16 | docsDir: 'docs', 17 | editLinks: true, 18 | editLinkText: '编辑网站', 19 | logo: '/logo.svg', 20 | repo: 'https://gitee.com/login', 21 | search: { 22 | provider: 'local' 23 | }, 24 | footer: { 25 | message: 'Relcased under the Mit Lincense.', 26 | copyright: 'CopyRight 2024-anxueyu', 27 | }, 28 | nav: [ 29 | { text: "指南", link: "/guide/installation", activeMatch: '/guide/' }, 30 | { text: "组件", link: "/components/button/", activeMatch: '/components/' }, 31 | ], 32 | sidebar: { 33 | "/guide/": [ 34 | { 35 | text: "基础", 36 | items: [ 37 | { 38 | text: "安装", 39 | link: "/guide/installation", 40 | }, 41 | { 42 | text: "快速开始", 43 | link: "/guide/quickstart", 44 | }, 45 | ], 46 | }, 47 | { 48 | text: "进阶", 49 | items: [ 50 | { 51 | text: "自定义主题颜色", 52 | link: "/advance/themeColor", 53 | }, 54 | ], 55 | }, 56 | ], 57 | "/components/": [ 58 | { 59 | text: "基础组件", 60 | items: [ 61 | { text: "button 按钮", link: "/components/button" }, 62 | { text: "text 文字", link: "/components/text" }, 63 | { text: "banner 3D轮播", link: "/components/banner" }, 64 | { text: "霓虹开关", link: "/components/neon-toggle" }, 65 | { text: "故障风格图片", link: "/components/glitch-image" }, 66 | { text: "赛博风格图片", link: "/components/cyber-image" }, 67 | { text: "数字翻滚", link: "/components/digital-counter" }, 68 | { text: "故障进度条", link: "/components/glitch-progress" }, 69 | { text: "Tooltip 提示组件", link: "/components/cyber-tooltip" }, 70 | { text: "全屏滚动", link: "/components/fullpage" }, 71 | { text: "全息卡片", link: "/components/holo-card" }, 72 | { text: "全息加载器", link: "/components/holo-loader" }, 73 | { text: "消息提示组件", link: "/components/cyber-notification" }, 74 | // { text: "无限滚动表格", link: "/components/infinite-table" }, 75 | ] 76 | } 77 | ] 78 | }, 79 | }, 80 | } 81 | // 新增banner 文字增加样式 card修复问题 82 | // 更多配置 https://process1024.github.io/vitepress/ -------------------------------------------------------------------------------- /test/src/conponents/images.vue: -------------------------------------------------------------------------------- 1 | 46 | 48 | 64 | -------------------------------------------------------------------------------- /package/components/shadowText/src/shadowText.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"shadowText.vue.js","sourceRoot":"","sources":["shadowText.vue"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /docs/components/cyber-tooltip.md: -------------------------------------------------------------------------------- 1 | # CyberTooltip 交互提示组件 2 | 3 | 交互提示组件提供了全息投影风格的提示框，适合在赛博朋克风格界面中展示悬停提示信息。(待完善,页面滚动后提示位置会偏移) 4 | 5 | ## 基本用法 6 | 7 | 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 | 35 | ## 不同效果 36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 | 55 | ## 不同主题 56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 | ## 不同触发方式 71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |
84 | 85 | ## 自定义内容 86 | 87 | 94 | 95 | 96 | 97 | 103 | 104 | ## 属性 105 | 106 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 107 | |--------|------|------|--------|--------| 108 | | content | 提示内容 | string | — | — | 109 | | position | 提示框位置 | string | top / right / bottom / left / auto | top | 110 | | effect | 提示框效果 | string | hologram / glitch / scan / fade | hologram | 111 | | trigger | 触发方式 | string | hover / click / focus | hover | 112 | | delay | 显示延迟（毫秒） | number | — | 200 | 113 | | width | 提示框宽度 | string / number | — | auto | 114 | | theme | 提示框主题 | string | neon / terminal / holographic | neon | 115 | 116 | ## 插槽 117 | 118 | | 插槽名 | 说明 | 119 | |--------|------| 120 | | default | 触发元素 | 121 | | content | 提示内容 | 122 | 123 | ## 事件 124 | 125 | | 事件名 | 说明 | 回调参数 | 126 | |--------|------|----------| 127 | | show | 提示框显示时触发 | — | 128 | | hide | 提示框隐藏时触发 | — | 129 | -------------------------------------------------------------------------------- /test/src/conponents/table.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"table.vue.js","sourceRoot":"","sources":["table.vue"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /package/components/reflectbutton/src/reflectButton.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"reflectButton.vue.js","sourceRoot":"","sources":["reflectButton.vue"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /test/src/conponents/cyberimage.vue: -------------------------------------------------------------------------------- 1 | 50 | 52 | 75 | -------------------------------------------------------------------------------- /package/components/banner/src/banner.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"banner.vue.js","sourceRoot":"","sources":["banner.vue"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /package/components/button/src/button.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"button.vue.js","sourceRoot":"","sources":["button.vue"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # CyberPunk-UI 组件库扩展 2 | 3 | 本文档提供了CyberPunk-UI组件库的新增组件的集成指南和使用说明。 4 | 5 | ## 组件概览 6 | 7 | 我们为CyberPunk-UI组件库新增了9个具有赛博朋克风格的组件： 8 | 9 | 1. **HoloCard (全息卡片)** - 具有3D视觉效果和动态光影变化的信息卡片 10 | 2. **GlitchProgress (故障进度条)** - 融合故障艺术效果的进度指示器 11 | 3. **NeonToggle (霓虹开关)** - 带有电流流动视觉效果的开关组件 12 | 4. **HoloLoader (全息加载器)** - 三维全息投影风格的加载动画 13 | 5. **GlitchImage (故障风格图片)** - 具有数字干扰和视觉冲击力的图像组件 14 | 6. **CyberTooltip (交互提示组件)** - 全息投影风格的提示框 15 | 7. **CyberNotification (消息提示组件)** - 具有未来感的通知系统 16 | 8. **DigitalCounter (数字翻滚组件)** - 动态翻滚效果的数值展示 17 | 9. **InfiniteTable (无限滚动表格)** - 赛博朋克风格的大数据表格 18 | 19 | ## 集成指南 20 | 21 | ### 安装 22 | 23 | 将新组件目录复制到您的CyberPunk-UI项目的组件目录中： 24 | 25 | ```bash 26 | cp -r /path/to/new/components/* /path/to/your/cyberpunk-ui/package/components/ 27 | ``` 28 | 29 | ### 注册组件 30 | 31 | 在您的主入口文件中导出这些新组件： 32 | 33 | ```typescript 34 | // 在 package/index.ts 中添加 35 | import HoloCard from './components/holoCard' 36 | import GlitchProgress from './components/glitchProgress' 37 | import NeonToggle from './components/neonToggle' 38 | import HoloLoader from './components/holoLoader' 39 | import GlitchImage from './components/glitchImage' 40 | import CyberTooltip from './components/cyberTooltip' 41 | import CyberNotification from './components/cyberNotification' 42 | import DigitalCounter from './components/digitalCounter' 43 | import InfiniteTable from './components/infiniteTable' 44 | 45 | export { 46 | // 原有组件 47 | // ... 48 | 49 | // 新增组件 50 | HoloCard, 51 | GlitchProgress, 52 | NeonToggle, 53 | HoloLoader, 54 | GlitchImage, 55 | CyberTooltip, 56 | CyberNotification, 57 | DigitalCounter, 58 | InfiniteTable 59 | } 60 | 61 | const components = [ 62 | // 原有组件 63 | // ... 64 | 65 | // 新增组件 66 | HoloCard, 67 | GlitchProgress, 68 | NeonToggle, 69 | HoloLoader, 70 | GlitchImage, 71 | CyberTooltip, 72 | CyberNotification, 73 | DigitalCounter, 74 | InfiniteTable 75 | ] 76 | 77 | const install = (app: App): void => { 78 | components.forEach(component => { 79 | app.component(component.name, component) 80 | }) 81 | } 82 | 83 | export default { install } 84 | ``` 85 | 86 | ## 组件文档 87 | 88 | 每个组件的详细文档可以在以下文件中找到： 89 | 90 | - [HoloCard 全息卡片](./components/holo-card.md) 91 | - [GlitchProgress 故障进度条](./components/glitch-progress.md) 92 | - [NeonToggle 霓虹开关](./components/neon-toggle.md) 93 | - [HoloLoader 全息加载器](./components/holo-loader.md) 94 | - [GlitchImage 故障风格图片](./components/glitch-image.md) 95 | - [CyberTooltip 交互提示组件](./components/cyber-tooltip.md) 96 | - [CyberNotification 消息提示组件](./components/cyber-notification.md) 97 | - [DigitalCounter 数字翻滚组件](./components/digital-counter.md) 98 | - [InfiniteTable 无限滚动表格](./components/infinite-table.md) 99 | 100 | ## 设计原则 101 | 102 | 所有新组件都遵循以下设计原则： 103 | 104 | 1. **赛博朋克美学** - 霓虹光效、全息纹理、故障艺术效果等元素 105 | 2. **响应式设计** - 适配不同屏幕尺寸和设备 106 | 3. **可定制性** - 提供丰富的属性和插槽以满足不同需求 107 | 4. **性能优化** - 使用虚拟滚动等技术确保大数据量下的流畅体验 108 | 5. **无障碍性** - 支持键盘导航和屏幕阅读器 109 | 110 | ## 技术实现 111 | 112 | 所有组件都使用Vue3组合式API实现，具有以下特点： 113 | 114 | - 使用TypeScript确保类型安全 115 | - 使用SCSS进行样式编写 116 | - 组件结构清晰，代码可维护性高 117 | - 与现有CyberPunk-UI组件库风格保持一致 118 | 119 | ## 浏览器兼容性 120 | 121 | 新组件支持以下浏览器的最新版本： 122 | 123 | - Chrome 124 | - Firefox 125 | - Safari 126 | - Edge 127 | 128 | ## 贡献指南 129 | 130 | 如果您想为CyberPunk-UI组件库贡献代码，请遵循以下步骤： 131 | 132 | 1. Fork仓库 133 | 2. 创建您的特性分支 (`git checkout -b feature/amazing-feature`) 134 | 3. 提交您的更改 (`git commit -m 'Add some amazing feature'`) 135 | 4. 推送到分支 (`git push origin feature/amazing-feature`) 136 | 5. 打开Pull Request 137 | 138 | ## 许可证 139 | 140 | 与原CyberPunk-UI组件库保持一致的许可证。 141 | -------------------------------------------------------------------------------- /tsconfig.tsbuildinfo: -------------------------------------------------------------------------------- 1 | {"root":["./vite.config.ts","./package/components/index.ts","./package/components/banner/index.ts","./package/components/banner/src/banner.vue","./package/components/banner/src/instance.ts","./package/components/button/index.ts","./package/components/button/src/button.vue","./package/components/button/src/instance.ts","./package/components/cybernotification/index.ts","./package/components/cybernotification/src/cybernotification.vue","./package/components/cybernotification/src/instance.ts","./package/components/cybertooltip/index.ts","./package/components/cybertooltip/src/cybertooltip.vue","./package/components/cybertooltip/src/instance.ts","./package/components/digitalcounter/index.ts","./package/components/digitalcounter/src/digitalcounter.vue","./package/components/digitalcounter/src/instance.ts","./package/components/fullpage/index.ts","./package/components/fullpage/src/fullpage.vue","./package/components/fullpage/src/instance.ts","./package/components/glitchimage/index.ts","./package/components/glitchimage/src/glitchimage.vue","./package/components/glitchimage/src/instance.ts","./package/components/glitchprogress/index.ts","./package/components/glitchprogress/src/glitchprogress.vue","./package/components/glitchprogress/src/instance.ts","./package/components/glowtext/index.ts","./package/components/glowtext/src/glowtext.vue","./package/components/glowtext/src/instance.ts","./package/components/holocard/index.ts","./package/components/holocard/src/holocard.vue","./package/components/holocard/src/instance.ts","./package/components/hololoader/index.ts","./package/components/hololoader/src/hololoader.vue","./package/components/hololoader/src/instance.ts","./package/components/image/index.ts","./package/components/image/src/image.vue","./package/components/image/src/instance.ts","./package/components/infinitetable/index.ts","./package/components/infinitetable/src/infinitetable.vue","./package/components/infinitetable/src/instance.ts","./package/components/magictext/index.ts","./package/components/magictext/src/instance.ts","./package/components/magictext/src/magictext.vue","./package/components/nenobutton/index.ts","./package/components/nenobutton/src/instance.ts","./package/components/nenobutton/src/nenobutton.vue","./package/components/neontoggle/index.ts","./package/components/neontoggle/src/instance.ts","./package/components/neontoggle/src/neontoggle.vue","./package/components/reflectbutton/index.ts","./package/components/reflectbutton/src/instance.ts","./package/components/reflectbutton/src/reflectbutton.vue","./package/components/shadowtext/index.ts","./package/components/shadowtext/src/instance.ts","./package/components/shadowtext/src/shadowtext.vue","./package/components/text/index.ts","./package/components/text/src/instance.ts","./package/components/text/src/text.vue","./package/components/typing/index.ts","./package/components/typing/src/instance.ts","./package/components/typing/src/typing.vue","./package/cyberpunk-ui/component.ts","./package/cyberpunk-ui/defaults.ts","./package/cyberpunk-ui/index.ts","./package/cyberpunk-ui/make-installer.ts","./package/utils/create.ts","./package/utils/index.ts","./package/utils/install.ts","./package/utils/typescript.ts","./test/vite.config.ts","./test/src/app.vue","./test/src/main.ts","./test/src/vite-env.d.ts","./test/src/conponents/banner.vue","./test/src/conponents/button.vue","./test/src/conponents/card.vue","./test/src/conponents/cyberimage.vue","./test/src/conponents/images.vue","./test/src/conponents/loading.vue","./test/src/conponents/switch.vue","./test/src/conponents/table.vue","./test/src/conponents/text.vue","./test/src/conponents/tooltip.vue","./test/src/layout/header.vue","./test/src/layout/layout.vue","./test/typings/vue-shim.d.ts"],"version":"5.8.3"} -------------------------------------------------------------------------------- /test/src/conponents/switch.vue: -------------------------------------------------------------------------------- 1 | 73 | 77 | 84 | -------------------------------------------------------------------------------- /docs/components/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Text 3 | lang: en-US 4 | --- 5 | # text 6 | 故障效果文字、霓虹效果文字、3D效果文字 7 | ## 故障文字 8 | 这是一个最基础的按钮，也是最具代表性的，可以设置扫描线的颜色 `lineColor` 9 | CyberPunkUI 10 |
11 | 这段文字的lineColor为黑色 12 |
13 | 这段文字的lineColor为红色“#ff3300” 14 | 15 | ```vue 16 | 20 | ``` 21 | 22 | ## 3D文字 23 | 这是一个3D具有阴影效果的文字，可以设置阴影颜色 `shadowColor` 、方向 `direction` 以及阴影长度 `long` 24 |
25 | shadow-left-long20 26 | shadow-left-long10 27 | shadow-right-long10 28 | shadow-right-long20 29 |
30 | 31 | ```vue 32 | 40 | ``` 41 | 42 | ## 霓虹文字 43 | 这是一个鼠标悬浮后有霓虹发光效果的文字，可以设置发光颜色 `color` 44 | cyber-glow-text 45 | 46 | ```vue 47 | 50 | ``` 51 | 52 | ## 打字效果 53 | 这是一个打字效果的文字 54 | 这是一个打字效果的文字 55 |
56 | 1234567890 57 | 58 | ```vue 59 | 63 | ``` 64 | 65 | ## 魔术文字 66 | 这是一个非常炫酷的魔术文字效果 67 |
68 | CyberMagicText 69 |
70 |
71 | 赛博朋克魔术文字 72 |
73 |
74 | CyberMagicText 75 | 1234567890 76 |
77 |
78 | ~!@#$%^&&*=+*/\| 79 | 赛博朋克魔术文字 80 |
81 | 82 | ```vue 83 | 99 | ``` -------------------------------------------------------------------------------- /docs/.vitepress/theme/vars.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Customize default theme styling by overriding CSS variables: 3 | * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css 4 | */ 5 | 6 | /** 7 | * Colors 8 | * -------------------------------------------------------------------------- */ 9 | 10 | :root { 11 | --vp-c-gutter: var(--vp-c-divider); 12 | --vp-code-block-bg: rgb(125 125 125 / 0.04); 13 | --vp-code-tab-divider: var(--vp-c-divider); 14 | --vp-code-copy-code-bg: rgb(125 125 125 / 0.1); 15 | --vp-code-copy-code-hover-bg: rgb(125 125 125 / 0.2); 16 | --vp-c-disabled-bg: rgb(125 125 125 / 0.2); 17 | --vp-code-tab-text-color: var(--vp-c-text-2); 18 | --vp-code-tab-active-text-color: var(--vp-c-text-1); 19 | --vp-code-tab-hover-text-color: var(--vp-c-text-1); 20 | --vp-code-copy-code-active-text: var(--vp-c-text-2); 21 | --vp-c-text-dark-3: rgb(56 56 56 / 0.8); 22 | --vp-c-brand-lightest: var(--vp-c-brand-1); 23 | 24 | --vp-c-highlight-bg: var(--vp-c-brand-light); 25 | --vp-c-highlight-text: var(--vp-c-bg); 26 | } 27 | 28 | .dark { 29 | --vp-code-block-bg: rgb(0 0 0 / 0.2); 30 | --vp-c-text-code: #c0cec0; 31 | } 32 | 33 | 34 | /** 35 | * Component: Button 36 | * -------------------------------------------------------------------------- */ 37 | 38 | :root { 39 | --vp-button-brand-border: var(--vp-c-brand-light); 40 | --vp-button-brand-text: var(--vp-c-white); 41 | --vp-button-brand-bg: var(--vp-c-brand-1); 42 | --vp-button-brand-hover-border: var(--vp-c-brand-light); 43 | --vp-button-brand-hover-text: var(--vp-c-white); 44 | --vp-button-brand-hover-bg: var(--vp-c-brand-light); 45 | --vp-button-brand-active-border: var(--vp-c-brand-light); 46 | --vp-button-brand-active-text: var(--vp-c-white); 47 | --vp-button-brand-active-bg: var(--vp-button-brand-bg); 48 | } 49 | 50 | /** 51 | * Component: Home 52 | * -------------------------------------------------------------------------- */ 53 | 54 | :root { 55 | --vp-home-hero-name-color: transparent; 56 | --vp-home-hero-name-background: -webkit-linear-gradient( 57 | 120deg, 58 | var(--vp-c-brand-1) 30%, 59 | var(--vp-c-brand-next) 60 | ); 61 | --vp-home-hero-image-background-image: linear-gradient( 62 | -45deg, 63 | var(--vp-c-brand-1) 30%, 64 | var(--vp-c-brand-next) 65 | ); 66 | --vp-home-hero-image-filter: blur(80px); 67 | } 68 | 69 | @media (min-width: 640px) { 70 | :root { 71 | --vp-home-hero-image-filter: blur(120px); 72 | } 73 | } 74 | 75 | @media (min-width: 960px) { 76 | :root { 77 | --vp-home-hero-image-filter: blur(120px); 78 | } 79 | } 80 | 81 | /* Safari has a very bad performance on gradient and filter */ 82 | .browser-safari, .browser-firefox { 83 | --vp-home-hero-image-background-image: transparent; 84 | --vp-home-hero-image-filter: ''; 85 | } 86 | 87 | /** 88 | * Component: Custom Block 89 | * -------------------------------------------------------------------------- */ 90 | 91 | :root { 92 | --vp-custom-block-tip-border: var(--vp-c-brand-1); 93 | --vp-custom-block-tip-text: var(--vp-c-brand-darker); 94 | --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); 95 | } 96 | 97 | .dark { 98 | --vp-custom-block-tip-border: var(--vp-c-brand-1); 99 | --vp-custom-block-tip-text: var(--vp-c-brand-lightest); 100 | --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); 101 | } 102 | 103 | /** 104 | * Component: Algolia 105 | * -------------------------------------------------------------------------- */ 106 | 107 | .DocSearch { 108 | --docsearch-primary-color: var(--vp-c-brand-1) !important; 109 | } -------------------------------------------------------------------------------- /package/components/nenobutton/src/nenoButton.vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"nenoButton.vue.js","sourceRoot":"","sources":["nenoButton.vue"],"names":[],"mappings":"AAAA,OAoRO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AACzC,aAAa,CAAC;IACV,IAAI,EAAE,iBAAiB;CAC1B,CAAC,CAAA;AACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;AACxB,MAAM,KAAK,GAAG,WAAW,CAAC;IACtB,IAAI,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE;YACzB,OAAO,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;QAC5E,CAAC;KACJ;IACD,IAAI,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE;YACzB,OAAO,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;QAC9D,CAAC;KACJ;IACD,EAAE,EAAE;QACA,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,KAAK;KACjB;CACJ,CAAC,CAAA;AACF,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAA;AAC3D,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE;IAC7B,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACjB,KAAK,SAAS;YACV,OAAO,eAAe,CAAC;QAC3B,KAAK,SAAS;YACV,OAAO,eAAe,CAAC;QAC3B,KAAK,SAAS;YACV,OAAO,eAAe,CAAC;QAC3B,KAAK,QAAQ;YACT,OAAO,cAAc,CAAC;QAC1B;YACI,OAAO,eAAe,CAAC;IAC/B,CAAC;AACL,CAAC,CAAC,CAAA;AACF,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE;IAC7B,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACjB,KAAK,OAAO;YACR,OAAO,YAAY,CAAC;QACxB,KAAK,SAAS;YACV,OAAO,cAAc,CAAC;QAC1B,KAAK,OAAO;YACR,OAAO,YAAY,CAAC;QACxB;YACI,OAAO,cAAc,CAAC;IAE9B,CAAC;AACL,CAAC,CAAC,CAAA;AACF,QAAQ,CAAA;AAIR,MAAM,SAAS,GAAG,EAAqE,CAAC;AAExF,IAAI,gBAAiE,CAAC;AAEtE,IAAI,gBAAiE,CAAC;AAab,CAAC;AACD,CAAC;AACL,CAAC;AACG,CAAC;AACD,CAAC;AACT,CAAC;AACD,CAAC;AACG,CAAC;AACG,CAAC;AACD,CAAC;AACT,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACA,CAAC;AACF,CAAC;AACA,CAAC;AACF,CAAC;AACA,CAAC;AACF,CAAC;AAGlD,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,EACtD,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EACzE,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,QAAQ,EAAE,EACpB,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,QAAQ,EAAE,EACpB,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,QAAQ,EAAE,EACpB,CAAC;AACH,yBAAyB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,eAChF,EAAE,KAAK,EAAE,QAAQ,EAAE,EACpB,CAAC;AACH,IAAI,OAAO,GAAG,EACb,CAAC;AACuD,CAAC;AACT,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AACD,CAAC;AAElD,IAAI,OAAO,GAAG,OAAQ,CAAE;AAQxB,IAAI,aAK+D,CAAC;AACpE,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO;YACP,UAAU,EAAE,UAA+B;YAC3C,UAAU,EAAE,UAA+B;SAC1C,CAAC;IACF,CAAC;IACD,KAAK,EAAE,EAAwC;IAC/C,KAAK,EAAE;QACH,IAAI,EAAE;YACF,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE;gBACzB,OAAO,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;YAC5E,CAAC;SACJ;QACD,IAAI,EAAE;YACF,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE;gBACzB,OAAO,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;YAC9D,CAAC;SACJ;QACD,EAAE,EAAE;YACA,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,KAAK;SACjB;KACJ;CACA,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC9D,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;IACD,KAAK,EAAE,EAAwC;IAC/C,KAAK,EAAE;QACH,IAAI,EAAE;YACF,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE;gBACzB,OAAO,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;YAC5E,CAAC;SACJ;QACD,IAAI,EAAE;YACF,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE;gBACzB,OAAO,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;YAC9D,CAAC;SACJ;QACD,EAAE,EAAE;YACA,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,KAAK;SACjB;KACJ;CACA,CAAC,CAAC;AACH,eAAe,EAA0D,CAAC;AAC1E,CAAC"} -------------------------------------------------------------------------------- /docs/components/digital-counter.md: -------------------------------------------------------------------------------- 1 | # DigitalCounter 数字翻滚组件 2 | 3 | 数字翻滚组件提供了动态翻滚效果的数值展示，适合在赛博朋克风格界面中展示数字变化。 4 | 5 | ## 基本用法 6 | 7 | 8 |
9 | 重新加载 10 | 11 | ```vue 12 | 15 | 16 | 21 | ``` 22 | 23 | ## 动画效果 24 | 25 | 26 | 27 | ```vue 28 | 31 | ``` 32 | 33 | ## 不同主题 34 | 35 | 36 |
37 | 38 |
39 | 40 |
41 | 重新加载 42 | 43 | ```vue 44 | 49 | ``` 50 | 51 | 52 | ## 前缀和后缀 53 | 54 | 55 |
56 | 57 |
58 | 59 |
60 | 重新加载 61 | 62 | ```vue 63 | 68 | ``` 69 | 70 | ## 小数和分隔符 71 | 72 | 73 |
74 | 75 |
76 | 77 |
78 | 重新加载 79 | 80 | ```vue 81 | 86 | ``` 87 | 88 | 110 | 111 | ## 属性 112 | 113 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 114 | |--------|------|------|--------|--------| 115 | | value | 显示的值 | number / string | — | 0 | 116 | | from | 动画起始值 | number / string | — | 0 | 117 | | to | 动画目标值 | number / string | — | null | 118 | | duration | 动画持续时间（毫秒） | number | — | 1000 | 119 | | format | 格式化选项 | object | — | {} | 120 | | prefix | 前缀 | string | — | '' | 121 | | suffix | 后缀 | string | — | '' | 122 | | separator | 千位分隔符 | string | — | ',' | 123 | | decimal | 小数位数 | number | — | 0 | 124 | | effect | 动画效果 | string | flip / roll / fade / glitch | flip | 125 | | theme | 主题 | string | neon / digital / hologram | neon | 126 | 127 | ## 事件 128 | 129 | | 事件名 | 说明 | 回调参数 | 130 | |--------|------|----------| 131 | | change | 值变化时触发 | value: number | 132 | -------------------------------------------------------------------------------- /package/components/reflectbutton/src/reflectButton.vue.js: -------------------------------------------------------------------------------- 1 | import { computed, useSlots } from 'vue'; 2 | defineOptions({ 3 | name: 'CyberReflectbutton', 4 | }); 5 | const slots = useSlots(); 6 | const props = defineProps({ 7 | type: { 8 | type: String, 9 | default: 'primary', 10 | validator: (value) => { 11 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 12 | } 13 | }, 14 | size: { 15 | type: String, 16 | default: 'default', 17 | validator: (value) => { 18 | return ['large', 'default', 'small'].indexOf(value) !== -1; 19 | } 20 | }, 21 | bg: { 22 | type: Boolean, 23 | default: false 24 | } 25 | }); 26 | const emits = defineEmits(["onMouseEnter", "onMouseLeave"]); 27 | const buttonType = computed(() => { 28 | switch (props.type) { 29 | case 'primary': 30 | return 'primary-style'; 31 | case 'success': 32 | return 'success-style'; 33 | case 'warning': 34 | return 'warning-style'; 35 | case 'danger': 36 | return 'danger-style'; 37 | default: 38 | return 'primary-style'; 39 | } 40 | }); 41 | const buttonSize = computed(() => { 42 | switch (props.size) { 43 | case 'large': 44 | return 'large-size'; 45 | case 'default': 46 | return 'default-size'; 47 | case 'small': 48 | return 'small-size'; 49 | default: 50 | return 'default-size'; 51 | } 52 | }); 53 | debugger; 54 | const __VLS_ctx = {}; 55 | let __VLS_components; 56 | let __VLS_directives; 57 | ; 58 | ; 59 | ; 60 | ; 61 | ; 62 | ; 63 | ; 64 | ; 65 | ; 66 | ; 67 | ; 68 | ; 69 | ; 70 | ; 71 | ; 72 | ; 73 | ; 74 | ; 75 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: (['cp-button-neno', __VLS_ctx.buttonSize]) })); 76 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: (['button', __VLS_ctx.buttonType, props.bg ? 'show-bg' : '']) })); 77 | var __VLS_0 = {}; 78 | ; 79 | ; 80 | var __VLS_1 = __VLS_0; 81 | var __VLS_dollars; 82 | const __VLS_self = (await import('vue')).defineComponent({ 83 | setup() { 84 | return { 85 | buttonType: buttonType, 86 | buttonSize: buttonSize, 87 | }; 88 | }, 89 | emits: {}, 90 | props: { 91 | type: { 92 | type: String, 93 | default: 'primary', 94 | validator: (value) => { 95 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 96 | } 97 | }, 98 | size: { 99 | type: String, 100 | default: 'default', 101 | validator: (value) => { 102 | return ['large', 'default', 'small'].indexOf(value) !== -1; 103 | } 104 | }, 105 | bg: { 106 | type: Boolean, 107 | default: false 108 | } 109 | }, 110 | }); 111 | const __VLS_component = (await import('vue')).defineComponent({ 112 | setup() { 113 | return {}; 114 | }, 115 | emits: {}, 116 | props: { 117 | type: { 118 | type: String, 119 | default: 'primary', 120 | validator: (value) => { 121 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 122 | } 123 | }, 124 | size: { 125 | type: String, 126 | default: 'default', 127 | validator: (value) => { 128 | return ['large', 'default', 'small'].indexOf(value) !== -1; 129 | } 130 | }, 131 | bg: { 132 | type: Boolean, 133 | default: false 134 | } 135 | }, 136 | }); 137 | export default {}; 138 | ; 139 | //# sourceMappingURL=reflectButton.vue.js.map -------------------------------------------------------------------------------- /docs/components/holo-loader.md: -------------------------------------------------------------------------------- 1 | # HoloLoader 全息加载器 2 | 3 | 全息加载器组件提供了三维全息投影风格的加载动画，适合在赛博朋克风格界面中展示加载状态。 4 | 5 | ## 基本用法 6 | 7 | 8 | 9 | ```vue 10 | 13 | ``` 14 | 15 | ## 不同类型、颜色 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | ```vue 26 | 35 | ``` 36 | 37 | ## 不同尺寸、文本 38 | 39 |
40 | 41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 | 49 | 50 |
51 |
52 | 53 | 54 | 55 | 56 |
57 | 58 | ```vue 59 | 79 | ``` 80 | 81 | ## 自定义文本 82 | 83 | 84 | 85 | 86 | 87 | ```vue 88 | 89 | 90 | 91 | ``` 92 | 93 | ## 动画速度 94 | 95 |
96 | 97 | 98 | 99 |
100 | 101 | ```vue 102 | 109 | ``` 110 | 111 | ## 透明背景 112 | 113 | 114 | 115 | ```vue 116 | 119 | ``` 120 | 121 | ## 属性 122 | 123 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 124 | |--------|------|------|--------|--------| 125 | | type | 加载器类型 | string | cube / sphere / datastream / circuit | cube | 126 | | size | 加载器尺寸 | string | small / default / large | default | 127 | | text | 加载文本 | string | — | Loading... | 128 | | speed | 动画速度 | number | 0.1-3 | 1 | 129 | | transparent | 是否使用透明背景 | boolean | — | false | 130 | -------------------------------------------------------------------------------- /package/components/banner/src/banner.vue.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue'; 2 | defineOptions({ 3 | name: 'CyberBanner', 4 | }); 5 | const props = defineProps({ 6 | imgList: { 7 | type: Array, 8 | default: [] 9 | }, 10 | shadow: { 11 | type: Boolean, 12 | default: true 13 | }, 14 | animationDuration: { 15 | type: Number, 16 | default: 30 17 | }, 18 | imgWidth: { 19 | type: Number, 20 | default: 500 21 | }, 22 | imgHeight: { 23 | type: Number, 24 | default: 400 25 | } 26 | }); 27 | const imageCount = ref(props.imgList.length); 28 | const containerWidth = calculateWaistLength(props.imgWidth, 360 / imageCount.value) * 1.6; 29 | function calculateWaistLength(baseLength, apexAngle) { 30 | const angleInRadians = apexAngle * Math.PI / 180; 31 | const waistLength = baseLength / (2 * Math.sin(angleInRadians / 2)); 32 | return waistLength; 33 | } 34 | const getImageStyle = (index) => { 35 | const angle = 35 + (index + 1) * (360 / imageCount.value); 36 | const waistLength = calculateWaistLength(props.imgWidth, 360 / imageCount.value); 37 | return { 38 | transform: `rotateY(${angle}deg) translateZ(${waistLength}px)` 39 | }; 40 | }; 41 | debugger; 42 | const __VLS_ctx = {}; 43 | let __VLS_components; 44 | let __VLS_directives; 45 | ; 46 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "container" }, { style: ({ 47 | '--container-width': `${__VLS_ctx.containerWidth}px`, 48 | '--img-width': `${props.imgWidth}px`, 49 | '--img-height': `${props.imgHeight}px`, 50 | }) })); 51 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "stage" }, { class: ({ 'has-shadow': props.shadow }) })); 52 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "control" }, { style: ({ 53 | '--animation-duration': `${props.animationDuration}s`, 54 | }) })); 55 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: " imgWrap" })); 56 | for (const [img, index] of __VLS_getVForSourceType((props.imgList))) { 57 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign(Object.assign({ key: (index) }, { class: "img" }), { style: (__VLS_ctx.getImageStyle(index)) })); 58 | __VLS_asFunctionalElement(__VLS_intrinsicElements.img, __VLS_intrinsicElements.img)({ 59 | src: (img), 60 | }); 61 | } 62 | ; 63 | ; 64 | ; 65 | ; 66 | ; 67 | ; 68 | var __VLS_dollars; 69 | const __VLS_self = (await import('vue')).defineComponent({ 70 | setup() { 71 | return { 72 | containerWidth: containerWidth, 73 | getImageStyle: getImageStyle, 74 | }; 75 | }, 76 | props: { 77 | imgList: { 78 | type: Array, 79 | default: [] 80 | }, 81 | shadow: { 82 | type: Boolean, 83 | default: true 84 | }, 85 | animationDuration: { 86 | type: Number, 87 | default: 30 88 | }, 89 | imgWidth: { 90 | type: Number, 91 | default: 500 92 | }, 93 | imgHeight: { 94 | type: Number, 95 | default: 400 96 | } 97 | }, 98 | }); 99 | export default (await import('vue')).defineComponent({ 100 | setup() { 101 | return {}; 102 | }, 103 | props: { 104 | imgList: { 105 | type: Array, 106 | default: [] 107 | }, 108 | shadow: { 109 | type: Boolean, 110 | default: true 111 | }, 112 | animationDuration: { 113 | type: Number, 114 | default: 30 115 | }, 116 | imgWidth: { 117 | type: Number, 118 | default: 500 119 | }, 120 | imgHeight: { 121 | type: Number, 122 | default: 400 123 | } 124 | }, 125 | }); 126 | ; 127 | //# sourceMappingURL=banner.vue.js.map -------------------------------------------------------------------------------- /docs/components/neon-toggle.md: -------------------------------------------------------------------------------- 1 | # NeonToggle 霓虹开关 2 | 3 | 霓虹开关组件提供了带有电流流动视觉效果的开关控件，适合用于赛博朋克风格界面中的状态切换。 4 | 5 | ## 基本用法 6 | 11 | 12 | 13 | ```vue 14 | 17 | 18 | 23 | ``` 24 | 25 | ## 不同形状 26 | 27 | 28 | 29 | 30 | ```vue 31 | 36 | 41 | ``` 42 | 43 | ## 自定义颜色 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ```vue 53 | 60 | 65 | ``` 66 | 67 | ## 禁用状态 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | ```vue 78 | 86 | 91 | ``` 92 | 93 | ## 有无脉冲效果 94 | 95 | 96 | 97 | 98 | ```vue 99 | 103 | 108 | ``` 109 | 110 | ## 属性 111 | 112 | | 属性名 | 说明 | 类型 | 可选值 | 默认值 | 113 | |--------|------|------|--------|--------| 114 | | modelValue / v-model | 绑定值 | boolean | — | false | 115 | | shape | 开关形状 | string | circle / square / hex | circle | 116 | | activeColor | 激活状态颜色 | string | — | #00e6f6 | 117 | | pulseEffect | 是否启用脉冲效果 | boolean | — | true | 118 | | disabled | 是否禁用 | boolean | — | false | 119 | 120 | ## 事件 121 | 122 | | 事件名 | 说明 | 回调参数 | 123 | |--------|------|----------| 124 | | update:modelValue | 值变化时触发 | value: boolean | 125 | | change | 状态变化时触发 | value: boolean | 126 | -------------------------------------------------------------------------------- /package/components/button/src/button.vue.js: -------------------------------------------------------------------------------- 1 | import { computed, useSlots } from 'vue'; 2 | defineOptions({ 3 | name: 'CyberButton', 4 | }); 5 | const slots = useSlots(); 6 | const props = defineProps({ 7 | type: { 8 | type: String, 9 | default: 'primary', 10 | validator: (value) => { 11 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 12 | } 13 | }, 14 | size: { 15 | type: String, 16 | default: 'default', 17 | validator: (value) => { 18 | return ['large', 'default', 'small'].indexOf(value) !== -1; 19 | } 20 | }, 21 | content: { 22 | type: String, 23 | default: 'CyberPunk-UI' 24 | } 25 | }); 26 | const emits = defineEmits(["onMouseEnter", "onMouseLeave"]); 27 | const buttonType = computed(() => { 28 | switch (props.type) { 29 | case 'primary': 30 | return 'primary-style'; 31 | case 'success': 32 | return 'success-style'; 33 | case 'warning': 34 | return 'warning-style'; 35 | case 'danger': 36 | return 'danger-style'; 37 | default: 38 | return 'primary-style'; 39 | } 40 | }); 41 | const buttonSize = computed(() => { 42 | switch (props.size) { 43 | case 'large': 44 | return 'large-size'; 45 | case 'default': 46 | return 'default-size'; 47 | case 'small': 48 | return 'small-size'; 49 | default: 50 | return 'default-size'; 51 | } 52 | }); 53 | debugger; 54 | const __VLS_ctx = {}; 55 | let __VLS_components; 56 | let __VLS_directives; 57 | ; 58 | ; 59 | ; 60 | ; 61 | ; 62 | ; 63 | ; 64 | ; 65 | ; 66 | ; 67 | ; 68 | ; 69 | ; 70 | ; 71 | ; 72 | ; 73 | ; 74 | ; 75 | ; 76 | ; 77 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: (['cp-button', __VLS_ctx.buttonSize]) })); 78 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: (['button', __VLS_ctx.buttonType]) }, { 'data-content': (props.content) })); 79 | if (__VLS_ctx.slots) { 80 | var __VLS_0 = {}; 81 | } 82 | else { 83 | __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({}); 84 | (props.content); 85 | } 86 | ; 87 | ; 88 | var __VLS_1 = __VLS_0; 89 | var __VLS_dollars; 90 | const __VLS_self = (await import('vue')).defineComponent({ 91 | setup() { 92 | return { 93 | slots: slots, 94 | buttonType: buttonType, 95 | buttonSize: buttonSize, 96 | }; 97 | }, 98 | emits: {}, 99 | props: { 100 | type: { 101 | type: String, 102 | default: 'primary', 103 | validator: (value) => { 104 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 105 | } 106 | }, 107 | size: { 108 | type: String, 109 | default: 'default', 110 | validator: (value) => { 111 | return ['large', 'default', 'small'].indexOf(value) !== -1; 112 | } 113 | }, 114 | content: { 115 | type: String, 116 | default: 'CyberPunk-UI' 117 | } 118 | }, 119 | }); 120 | const __VLS_component = (await import('vue')).defineComponent({ 121 | setup() { 122 | return {}; 123 | }, 124 | emits: {}, 125 | props: { 126 | type: { 127 | type: String, 128 | default: 'primary', 129 | validator: (value) => { 130 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 131 | } 132 | }, 133 | size: { 134 | type: String, 135 | default: 'default', 136 | validator: (value) => { 137 | return ['large', 'default', 'small'].indexOf(value) !== -1; 138 | } 139 | }, 140 | content: { 141 | type: String, 142 | default: 'CyberPunk-UI' 143 | } 144 | }, 145 | }); 146 | export default {}; 147 | ; 148 | //# sourceMappingURL=button.vue.js.map -------------------------------------------------------------------------------- /package/components/banner/src/banner.vue: -------------------------------------------------------------------------------- 1 | 23 | 70 | -------------------------------------------------------------------------------- /package/components/nenobutton/src/nenoButton.vue.js: -------------------------------------------------------------------------------- 1 | import { computed, useSlots } from 'vue'; 2 | defineOptions({ 3 | name: 'CyberNenobutton', 4 | }); 5 | const slots = useSlots(); 6 | const props = defineProps({ 7 | type: { 8 | type: String, 9 | default: 'primary', 10 | validator: (value) => { 11 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 12 | } 13 | }, 14 | size: { 15 | type: String, 16 | default: 'default', 17 | validator: (value) => { 18 | return ['large', 'default', 'small'].indexOf(value) !== -1; 19 | } 20 | }, 21 | bg: { 22 | type: Boolean, 23 | default: false 24 | } 25 | }); 26 | const emits = defineEmits(["onMouseEnter", "onMouseLeave"]); 27 | const buttonType = computed(() => { 28 | switch (props.type) { 29 | case 'primary': 30 | return 'primary-style'; 31 | case 'success': 32 | return 'success-style'; 33 | case 'warning': 34 | return 'warning-style'; 35 | case 'danger': 36 | return 'danger-style'; 37 | default: 38 | return 'primary-style'; 39 | } 40 | }); 41 | const buttonSize = computed(() => { 42 | switch (props.size) { 43 | case 'large': 44 | return 'large-size'; 45 | case 'default': 46 | return 'default-size'; 47 | case 'small': 48 | return 'small-size'; 49 | default: 50 | return 'default-size'; 51 | } 52 | }); 53 | debugger; 54 | const __VLS_ctx = {}; 55 | let __VLS_components; 56 | let __VLS_directives; 57 | ; 58 | ; 59 | ; 60 | ; 61 | ; 62 | ; 63 | ; 64 | ; 65 | ; 66 | ; 67 | ; 68 | ; 69 | ; 70 | ; 71 | ; 72 | ; 73 | ; 74 | ; 75 | ; 76 | ; 77 | ; 78 | ; 79 | ; 80 | ; 81 | ; 82 | ; 83 | ; 84 | ; 85 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: (['cp-button-neno', __VLS_ctx.buttonSize]) })); 86 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: (['button', __VLS_ctx.buttonType, props.bg ? 'show-bg' : '']) })); 87 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "border" })); 88 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "border" })); 89 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "border" })); 90 | __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(Object.assign({ class: "border" })); 91 | var __VLS_0 = {}; 92 | ; 93 | ; 94 | ; 95 | ; 96 | ; 97 | ; 98 | var __VLS_1 = __VLS_0; 99 | var __VLS_dollars; 100 | const __VLS_self = (await import('vue')).defineComponent({ 101 | setup() { 102 | return { 103 | buttonType: buttonType, 104 | buttonSize: buttonSize, 105 | }; 106 | }, 107 | emits: {}, 108 | props: { 109 | type: { 110 | type: String, 111 | default: 'primary', 112 | validator: (value) => { 113 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 114 | } 115 | }, 116 | size: { 117 | type: String, 118 | default: 'default', 119 | validator: (value) => { 120 | return ['large', 'default', 'small'].indexOf(value) !== -1; 121 | } 122 | }, 123 | bg: { 124 | type: Boolean, 125 | default: false 126 | } 127 | }, 128 | }); 129 | const __VLS_component = (await import('vue')).defineComponent({ 130 | setup() { 131 | return {}; 132 | }, 133 | emits: {}, 134 | props: { 135 | type: { 136 | type: String, 137 | default: 'primary', 138 | validator: (value) => { 139 | return ['primary', 'success', 'warning', 'danger'].indexOf(value) !== -1; 140 | } 141 | }, 142 | size: { 143 | type: String, 144 | default: 'default', 145 | validator: (value) => { 146 | return ['large', 'default', 'small'].indexOf(value) !== -1; 147 | } 148 | }, 149 | bg: { 150 | type: Boolean, 151 | default: false 152 | } 153 | }, 154 | }); 155 | export default {}; 156 | ; 157 | //# sourceMappingURL=nenoButton.vue.js.map --------------------------------------------------------------------------------