void> = {
21 | beforeEnter(el) {
22 | _setHeightZero(el)
23 | _setOverflowHidden(el)
24 | },
25 | enter: (el) => _setHeightScroll(el),
26 | afterEnter(el) {
27 | _setHeightEmpty(el)
28 | _setOverflowEmpty(el)
29 | },
30 | beforeLeave(el) {
31 | _setHeightScroll(el)
32 | _setOverflowHidden(el)
33 | },
34 | leave: (el) => _setHeightZero(el),
35 | afterLeave(el) {
36 | _setHeightEmpty(el)
37 | _setOverflowEmpty(el)
38 | }
39 | }
40 |
41 | export default transitionEvents
42 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/components/eyeDropper.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: EyeDropper 取色器
3 | description: EyeDropper 组件文档
4 |
5 | next:
6 | link: /components/image
7 | text: Image 像素滤镜
8 |
9 | prev:
10 | link: /components/animationFrame
11 | text: AnimationFrame 动画帧
12 | ---
13 |
14 | # EyeDropper 取色器
15 |
16 | EyeDropper 允许用户从屏幕中选择颜色
17 |
18 | ## 基础用法
19 |
20 | 通过 `onChange` 监听颜色选择, 通常搭配 `v-slot` 插槽暴露的方法使用
21 |
22 | :::preview
23 | demo-preview=../demo/EyeDropper/Basic.vue
24 | :::
25 |
26 | ## API_Table插件测试
27 |
28 | :::danger
29 | 该插件基于 `markdown-it` 开发, 解析组件 `types.ts` 文件生成 API 表格, 测试中
30 | :::
31 |
32 | ::: api-table src=components/EyeDropper/types.ts
33 | :::
34 |
35 | ```ts
36 | /**
37 | * EyeDropper 支持的 open 方法参数
38 | */
39 | export interface EyeDropperOpenOptions {
40 | /**
41 | * @property signal
42 | * @description 可选的 AbortSignal, 用于中止操作
43 | * @type AbortSignal
44 | * @default undefined
45 | */
46 | signal?: AbortSignal
47 | }
48 |
49 | /**
50 | * EyeDropper open 方法返回值
51 | */
52 | export interface EyeDropperResult {
53 | /**
54 | * @property sRGBHex
55 | * @description 返回的选中颜色值（十六进制）
56 | * @type string
57 | */
58 | sRGBHex: string
59 | }
60 | ```
61 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Notification/Position.vue:
--------------------------------------------------------------------------------
1 |
2 | Top Right
3 | Bottom Right
4 | Bottom Left
5 | Top Left
6 |
7 |
8 |
42 |
--------------------------------------------------------------------------------
/libs/vitepress-preview-component/styles/various.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --component-preview-bg: var(--vp-c-bg);
3 | --component-preview-soft: var(--vp-c-bg-soft);
4 | --component-preview-mute: var(--vp-c-bg-mute);
5 | --component-preview-border: rgb(240, 240, 240);
6 | --component-preview-text-1: var(--vp-c-text-1);
7 | --component-preview-text-2: var(--vp-c-text-2);
8 | --component-preview-text-3: var(--vp-c-text-3);
9 | --component-preview-text-4: var(--vp-c-text-4);
10 | --component-preview-code-block-bg: #343030;
11 | --component-preview-primary-color: var(--vp-c-brand);
12 | }
13 |
14 | .dark:root {
15 | --component-preview-bg: var(--vp-c-bg);
16 | --component-preview-soft: var(--vp-c-bg-soft);
17 | --component-preview-mute: var(--vp-c-bg-mute);
18 | --component-preview-border: rgb(240, 240, 240, 0.1);
19 | --component-preview-text-1: var(--vp-c-text-1);
20 | --component-preview-text-2: var(--vp-c-text-2);
21 | --component-preview-text-3: var(--vp-c-text-3);
22 | --component-preview-text-4: var(--vp-c-text-4);
23 | --component-preview-code-block-bg: #282626;
24 | --component-preview-primary-color: var(--vp-c-brand);
25 | }
26 |
27 | $defaultPrefix: 'vitepress-demo-preview';
28 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/components/text.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Text
3 | description: Text 组件文档
4 |
5 | next:
6 | link: /components/configProvider
7 | text: ConfigProvider 全局配置
8 |
9 | prev:
10 | link: /components/overlay
11 | text: Overlay 遮罩层
12 | ---
13 |
14 | # Text 文本
15 |
16 | 文本的常见操作
17 |
18 | ## 基础用法
19 |
20 | 用 `type` 属性设置 Text 类型, `bold` 属性设置**粗体**
21 |
22 | ::: preview
23 | demo-preview=../demo/Text/Basic.vue
24 | :::
25 |
26 | ## 尺寸
27 |
28 | 使用 `size` 属性设置 Text 尺寸, 默认大小为 `14px`, 传入值默认为 `px`
29 |
30 | ::: preview
31 | demo-preview=../demo/Text/Size.vue
32 | :::
33 |
34 | ## 颜色
35 |
36 | 使用 `color` 属性设置 Text 颜色
37 |
38 | ::: preview
39 | demo-preview=../demo/Text/Color.vue
40 | :::
41 |
42 | ## 对齐方式 & 紧凑
43 |
44 | 使用 `align` 属性设置 Text 对齐方式, 可选值为 `left`, `center`, `right`, 使用 `compact` 属性设置 Text 是否紧凑
45 |
46 | ::: preview
47 | demo-preview=../demo/Text/Align.vue
48 | :::
49 |
50 | ## Tag
51 |
52 | 可以自定义元素标签。例如, 按钮, div, 路由链接, nuxt 链接。
53 |
54 | ::: preview
55 | demo-preview=../demo/Text/Tag.vue
56 | :::
57 |
58 | ## API_Table插件测试
59 |
60 | :::danger
61 | 该插件基于 `markdown-it` 开发, 解析组件 `types.ts` 文件生成 API 表格, 测试中
62 | :::
63 |
64 | ::: api-table src=components/Text/types.ts
65 | :::
66 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/.vitepress/config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitepress'
2 | import { nav, sidebar, mdPlugin, viteConfig, head } from './configs'
3 |
4 | export default defineConfig({
5 | title: 'Pixel UI',
6 | description: '基于CSS_Houdini的像素风组件库🐱',
7 | base: '/pixel-ui/',
8 | appearance: false,
9 | head,
10 | themeConfig: {
11 | // 导航栏
12 | nav,
13 | // 侧边栏
14 | sidebar,
15 | logo: '/images/homelogo.png',
16 | search: {
17 | provider: 'local'
18 | },
19 | outline: {
20 | level: [2, 3],
21 | label: 'CONTENTS'
22 | },
23 | socialLinks: [
24 | { icon: 'github', link: 'https://github.com/maomentai817/pixel-ui' }
25 | ]
26 | },
27 | markdown: {
28 | config: (md) => mdPlugin(md)
29 | },
30 | transformHead({ assets }) {
31 | // 字体匹配
32 | const fontFiles = assets.filter((file) =>
33 | /(PS2P|Zpix)\.\w+\.ttf$/.test(file)
34 | )
35 |
36 | return fontFiles.map((file) => [
37 | 'link',
38 | {
39 | rel: 'preload',
40 | href: file,
41 | as: 'font',
42 | type: 'font/woff2',
43 | crossorigin: ''
44 | }
45 | ])
46 | },
47 | vite: viteConfig
48 | })
49 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Badge/CustomColor.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Badge
4 |
5 |
6 | Badge
7 |
8 |
9 | Badge
10 |
11 |
12 | Badge
13 |
14 |
15 |
16 |
17 | Badge
18 |
19 |
20 |
39 |
--------------------------------------------------------------------------------
/packages/hooks/__test__/useLocale.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest'
2 | import { ref, nextTick } from 'vue'
3 | import { useLocale } from '../useLocale'
4 | import { mount } from '@vue/test-utils'
5 | // import English from '@pixel-ui/locale/lang/en'
6 |
7 | describe('useLocale', () => {
8 | it('returns default i18n when no overrides provided', () => {
9 | const wrapper = mount({
10 | setup() {
11 | const i18n = useLocale()
12 | return () => {i18n.value.t('el.popconfirm.cancelButtonText')}
13 | }
14 | })
15 |
16 | expect(wrapper.text()).toBe('No')
17 | })
18 |
19 | it('returns overridden i18n when localeOverrides is provided', async () => {
20 | const zhCN = {
21 | name: 'zh-cn',
22 | el: {
23 | popconfirm: {
24 | cancelButtonText: '取消'
25 | }
26 | }
27 | }
28 |
29 | const overrideRef = ref(zhCN)
30 |
31 | const wrapper = mount({
32 | setup() {
33 | const i18n = useLocale(overrideRef)
34 | return () => {i18n.value.t('el.popconfirm.cancelButtonText')}
35 | }
36 | })
37 |
38 | await nextTick()
39 | expect(wrapper.text()).toBe('取消')
40 | })
41 | })
42 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Button/Group.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Button1
5 | Button2
6 |
7 |
8 |
9 |
10 | Button1
11 | Button2
12 | Button3
13 |
14 |
15 |
16 |
17 | Button1
18 | Button2
19 | Button3
20 | Button4
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/packages/utils/__tests__/vnode.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest'
2 | import { mount } from '@vue/test-utils'
3 | import { h } from 'vue'
4 | import { RenderVNode } from '../'
5 |
6 | describe('RenderVNode', () => {
7 | it('renders a string vnode', () => {
8 | const wrapper = mount(RenderVNode, {
9 | props: {
10 | vNode: 'Hello Pixel UI'
11 | }
12 | })
13 | expect(wrapper.text()).toBe('Hello Pixel UI')
14 | })
15 |
16 | it('renders a VNode object', () => {
17 | const wrapper = mount(RenderVNode, {
18 | props: {
19 | vNode: h('span', { class: 'custom' }, 'Inside Span')
20 | }
21 | })
22 | const span = wrapper.find('span')
23 | expect(span.exists()).toBe(true)
24 | expect(span.text()).toBe('Inside Span')
25 | expect(span.classes()).toContain('custom')
26 | })
27 |
28 | it('renders from a function returning vnode', () => {
29 | const wrapper = mount(RenderVNode, {
30 | props: {
31 | vNode: () => h('div', { class: 'dynamic' }, 'Generated VNode')
32 | }
33 | })
34 | const div = wrapper.find('div.dynamic')
35 | expect(div.exists()).toBe(true)
36 | expect(div.text()).toBe('Generated VNode')
37 | })
38 | })
39 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@vue/tsconfig/tsconfig.dom.json",
3 | "compilerOptions": {
4 | "target": "ES2020",
5 | "useDefineForClassFields": true,
6 | "module": "ESNext",
7 | "lib": [
8 | "ES2020",
9 | "DOM",
10 | "DOM.Iterable"
11 | ],
12 | "skipLibCheck": true,
13 | /* Bundler mode */
14 | "moduleResolution": "bundler",
15 | "allowImportingTsExtensions": true,
16 | "resolveJsonModule": true,
17 | "isolatedModules": true,
18 | "noEmit": true,
19 | "jsx": "preserve",
20 | "jsxImportSource": "vue",
21 | /* Linting */
22 | "strict": true,
23 | "noUnusedLocals": true,
24 | "noUnusedParameters": true,
25 | "noFallthroughCasesInSwitch": true,
26 | "types": [
27 | "node"
28 | ],
29 | "baseUrl": "./",
30 | "paths": {
31 | "@pixel-ui/components": [
32 | "./packages/components"
33 | ]
34 | }
35 | },
36 | "include": [
37 | "env.d.ts",
38 | "packages/**/types/*.d.ts",
39 | "packages/core/index.ts",
40 | "packages/hooks/**/*.ts",
41 | "packages/utils/**/*.ts",
42 | "packages/components/**/*.ts"
43 | ],
44 | "exclude": [
45 | "packages/components/vitest.config.ts"
46 | ]
47 | }
--------------------------------------------------------------------------------
/packages/components/Card/types.ts:
--------------------------------------------------------------------------------
1 | export interface CardProps {
2 | /**
3 | * @property hoverable
4 | * @type boolean
5 | * @description 是否启用Hover效果
6 | * @default false
7 | */
8 | hoverable?: boolean
9 | /**
10 | * @property round
11 | * @type boolean
12 | * @description 是否启用圆角效果
13 | * @default false
14 | */
15 | round?: boolean
16 | /**
17 | * @property circle
18 | * @type boolean
19 | * @description 是否启用圆形效果
20 | * @default false
21 | */
22 | circle?: boolean
23 | /**
24 | * @property stamp
25 | * @type boolean
26 | * @description 是否启用标签效果
27 | * @default false
28 | */
29 | stamp?: boolean
30 | }
31 |
32 | export interface CardSlots {
33 | /**
34 | * @property default
35 | * @description 默认插槽,卡片内容
36 | */
37 | default: () => string
38 | /**
39 | * @property header
40 | * @description 卡片标题内容
41 | */
42 | header: () => string
43 | /**
44 | * @property footer
45 | * @description 卡片底部内容
46 | */
47 | footer: () => string
48 | /**
49 | * @property prepend
50 | * @description 卡片前置内容
51 | */
52 | prepend: () => string
53 | /**
54 | * @property append
55 | * @description 卡片后置内容
56 | */
57 | append: () => string
58 | }
59 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/components/image.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Image 图片像素滤镜
3 | description: Image 组件文档
4 |
5 | next:
6 | link: /components/pixelit
7 | text: Pixelit 图片像素化
8 |
9 | prev:
10 | link: /components/eyeDropper
11 | text: EyeDropper 取色器
12 | ---
13 |
14 | # Image 图片像素滤镜
15 |
16 | 一张图片, 为其提供像素滤镜效果, 支持颜色数量压缩、抗锯齿去除、背景色保留、网格线绘制等功能
17 |
18 | ## 基础功能
19 |
20 | 通过 `src` 属性指定图片路径, 组件会在 Canvas 上渲染像素滤镜效果
21 |
22 | :::tip
23 | 当前组件提供 `width`、`height` 来设置 Canvas 及组件盒子的宽高, 默认为图片的宽高。但由于缩放渲染问题, 宽高设置过小可能会导致图片模糊, 请酌情使用或按比例缩放
24 |
25 | 新增 `scale` 属性来设置图片缩放比例, 当原图尺寸过大时, 强烈建议设置 `scale` 控制
26 | :::
27 |
28 | :::preview
29 | demo-preview=../demo/Image/Basic.vue
30 | :::
31 |
32 | ## 自定义参数
33 |
34 | 你可以通过调整 `block-size`、`color-count` 等属性来自定义像素滤镜的效果
35 |
36 | :::preview
37 | demo-preview=../demo/Image/Custom.vue
38 | :::
39 |
40 | ## 网格模式
41 |
42 | 通过设置 `showGrid` 控制是否显示 canvas 网格
43 |
44 | :::preview
45 | demo-preview=../demo/Image/Grid.vue
46 | :::
47 |
48 | ## 在线体验
49 |
50 | 提供在线演练场, 上传图片, 快速体验
51 |
52 | :::preview
53 | demo-preview=../demo/Image/Playground.vue
54 | :::
55 |
56 | ## API_Table插件测试
57 |
58 | :::danger
59 | 该插件基于 `markdown-it` 开发, 解析组件 `types.ts` 文件生成 API 表格, 测试中
60 | :::
61 |
62 | ::: api-table src=components/Image/types.ts
63 | :::
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Alert/Iron.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
20 |
27 |
18 |
19 |
20 | Dropdown List
21 |
26 |
27 |
28 |
29 |
30 |
43 |
--------------------------------------------------------------------------------
/packages/components/Dropdown/DropdownItem.vue:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
30 |
40 | {{ label }}
41 |
42 |
43 |
44 |
47 |
--------------------------------------------------------------------------------
/packages/hooks/useDisabledStyle.ts:
--------------------------------------------------------------------------------
1 | import { each, isFunction, cloneDeep, assign } from 'lodash-es'
2 | import { watchEffect, useSlots, getCurrentInstance, type VNode } from 'vue'
3 |
4 | // 递归遍历节点, 执行回调
5 | const _dfs = (nodes: VNode[], cb: (_node: VNode) => void) =>
6 | each(nodes, (node) => {
7 | isFunction(cb) && cb(node)
8 | node.children && _dfs(node.children as VNode[], cb)
9 | })
10 |
11 | export const useDisabledStyle = () => {
12 | const nodePropsMap = new Map()
13 |
14 | const instance = getCurrentInstance()
15 | const children = useSlots()?.default?.()
16 |
17 | watchEffect(() => {
18 | // 恢复节点样式
19 | if (!instance?.props.disabled) {
20 | _dfs(children ?? [], (node) => {
21 | if (!nodePropsMap.has(node)) return
22 | node.props = nodePropsMap.get(node)
23 | })
24 | return
25 | }
26 | // disabled 状态, 深度遍历所有子节点, 设置禁用
27 | _dfs(children ?? [], (node) => {
28 | if (!node?.props) return
29 |
30 | nodePropsMap.set(node, cloneDeep(node.props))
31 | node.props = assign(node?.props, {
32 | style: {
33 | cursor: 'not-allowed',
34 | color: 'var(--px-color-info)'
35 | }
36 | })
37 | })
38 | })
39 | }
40 |
41 | export default useDisabledStyle
42 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Dropdown/Size.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Large
4 |
5 | Action 1
6 | Action 2
7 | Action 3
8 | Action 4
9 |
10 |
11 |
12 |
13 | Default
14 |
15 | Action 1
16 | Action 2
17 | Action 3
18 | Action 4
19 |
20 |
21 |
22 |
23 | Small
24 |
25 | Action 1
26 | Action 2
27 | Action 3
28 | Action 4
29 |
30 |
31 |
32 |
33 |
38 |
--------------------------------------------------------------------------------
/libs/vitepress-preview-component/messages/index.ts:
--------------------------------------------------------------------------------
1 | import { ComponentPublicInstance, createApp } from 'vue'
2 |
3 | import MessageNotice from './message-notice.vue'
4 |
5 | const messageNoticeInstanceList: ComponentPublicInstance[] = []
6 |
7 | const MessageNoticeService = {
8 | open: () => {
9 | // 创建一个div元素
10 | const messageBox = document.createElement('div')
11 | // 创建一个应用实例
12 | const messageApp = createApp(MessageNotice, {
13 | content: '复制成功！',
14 | close: () => {
15 | document.body.removeChild(messageBox)
16 | messageNoticeInstanceList.pop()
17 | messageApp.unmount()
18 | }
19 | })
20 | const messageInstance = messageApp.mount(messageBox)
21 | document.body.appendChild(messageBox)
22 | const messageNoticeInstanceListLength = messageNoticeInstanceList.length
23 | const topHeight =
24 | messageNoticeInstanceListLength === 0
25 | ? 10
26 | : (messageNoticeInstanceListLength + 1) * 10 + messageNoticeInstanceListLength * 42
27 | // @ts-ignore
28 | messageInstance.setTopHeight(topHeight)
29 | // @ts-ignore
30 | messageInstance.setVisible(true)
31 | messageNoticeInstanceList.push(messageInstance)
32 | }
33 | }
34 |
35 | export { MessageNotice, MessageNoticeService }
36 |
--------------------------------------------------------------------------------
/packages/core/printLogo.ts:
--------------------------------------------------------------------------------
1 | /* global DEV, PROD */
2 | export default function () {
3 | if (PROD) {
4 | /* eslint-disable no-useless-escape */
5 | const logo = `
6 | ____________________________________________________________________________________
7 |
8 |
9 | ███╗ ███╗███╗ ███╗████████╗ █████╗ ██╗███████╗
10 | ████╗ ████║████╗ ████║╚══██╔══╝ ██╔══██╗███║╚════██║
11 | ██╔████╔██║██╔████╔██║ ██║ ╚█████╔╝╚██║ ██╔╝
12 | ██║╚██╔╝██║██║╚██╔╝██║ ██║ ██╔══██╗ ██║ ██╔╝
13 | ██║ ╚═╝ ██║██║ ╚═╝ ██║ ██║ ╚█████╔╝ ██║ ██║
14 | ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚════╝ ╚═╝ ╚═╝
15 |
16 | ____________________________________________________________________________________
17 | author:mmt817🐱
18 | `
19 |
20 | const rainbowGradient = `
21 | background: linear-gradient(135deg, orange 60%, cyan);
22 | background-clip: text;
23 | color: transparent;
24 | font-size: 16px;
25 | line-height: 1;
26 | font-family: "Courier New", ui-monospace, monospace;
27 | font-weight: 600;
28 | `
29 |
30 | console.info(`%c${logo}`, rainbowGradient)
31 | } else if (DEV) {
32 | console.log('[PixelUI]:dev mode...')
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Dropdown/Event.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dropdown List
5 |
10 |
11 |
12 | Action 1
13 | Action 2
14 | Action 3
15 | Action 4
16 | Action 5
17 |
18 |
19 |
20 |
21 |
30 |
31 |
40 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/MessageBox/Style.vue:
--------------------------------------------------------------------------------
1 |
2 | Iron
3 | Stamp
4 |
5 |
6 |
36 |
56 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Icon/Basic.vue:
--------------------------------------------------------------------------------
1 |
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 |
--------------------------------------------------------------------------------
/packages/components/types/worklet.d.ts:
--------------------------------------------------------------------------------
1 | // types/worklets.d.ts
2 | declare module '*.worklet.ts' {
3 | const content: string
4 | export default content
5 | }
6 |
7 | declare module '*.worklet.ts?worklet' {
8 | const workletUrl: string
9 | export default workletUrl
10 | }
11 |
12 | // Add support for JavaScript worklets
13 | declare module '*.worklet.js?url' {
14 | const content: string
15 | export default content
16 | }
17 |
18 | declare module '*.worklet.js?worklet' {
19 | const workletUrl: string
20 | export default workletUrl
21 | }
22 |
23 | // todo: worklet/ 类型声明
24 | interface CSSStyleValue {
25 | toString(): string
26 | }
27 |
28 | interface StylePropertyMap {
29 | get(_property: string): CSSStyleValue | undefined
30 | getAll(_property: string): CSSStyleValue[]
31 | has(_property: string): boolean
32 | }
33 |
34 | interface PaintSize {
35 | width: number
36 | height: number
37 | }
38 |
39 | interface PaintWorklet {
40 | paint(
41 | _ctx: PaintRenderingContext2D,
42 | _size: PaintSize,
43 | _props: StylePropertyMap
44 | ): void
45 | }
46 |
47 | declare let registerPaint: (
48 | _name: string,
49 | _ctor: new () => PaintWorklet
50 | ) => void
51 |
52 | // PaintRenderingContext2D 实际上就是 CanvasRenderingContext2D
53 | type PaintRenderingContext2D = CanvasRenderingContext2D
54 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/components/animationFrame.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: AnimationFrame
3 | description: AnimationFrame 组件文档
4 |
5 | next:
6 | link: /components/eyeDropper
7 | text: EyeDropper 取色器
8 |
9 | prev:
10 | link: /components/tooltip
11 | text: Tooltip 文字提示
12 | ---
13 |
14 | # AnimationFrame 动画帧
15 |
16 | 提供 `stages` 控制 GIF 动画播放, 默认点击进行阶段跳转
17 |
18 | ## 基础用法
19 |
20 | 提供一张 GIF 图片, 默认完整播放
21 |
22 | :::preview
23 | demo-preview=../demo/AnimationFrame/Basic.vue
24 | :::
25 |
26 | ## Loop 循环播放
27 |
28 | 通过 `loop` 属性控制是否循环播放
29 |
30 | :::preview
31 | demo-preview=../demo/AnimationFrame/Loop.vue
32 | :::
33 |
34 | ## Stages 跳转阶段
35 |
36 | :::tip
37 | `stages` 属性类型为 `AnimationFrameStage[]`
38 |
39 | 其中 `AnimationFrameStage:{start:number;end:number;type:'loop'|'once'}`
40 |
41 | 点击切换动画阶段, 建议合理运用 GIF 分解工具查看对应帧
42 | :::
43 |
44 | 通过 `stages` 属性控制 GIF 动画播放, 默认点击进行阶段跳转
45 |
46 | :::preview
47 | demo-preview=../demo/AnimationFrame/Stages.vue
48 | :::
49 |
50 | ## API_Table插件测试
51 |
52 | :::danger
53 | 该插件基于 `markdown-it` 开发, 解析组件 `types.ts` 文件生成 API 表格, 测试中
54 | :::
55 |
56 | ::: api-table src=components/AnimationFrame/types.ts
57 | :::
58 |
59 | ```ts
60 | type AnimationFrameType = 'loop' | 'once'
61 |
62 | interface AnimationFrameStage {
63 | start: number
64 | end: number
65 | type: AnimationFrameType
66 | }
67 | ```
68 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/components/popconfirm.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Popconfirm
3 | description: Popconfirm 组件文档
4 |
5 | next:
6 | link: /components/tooltip
7 | text: Tooltip 文字提示
8 |
9 | prev:
10 | link: /components/notification
11 | text: Notification 通知
12 | ---
13 |
14 | # Popconfirm 气泡确认框
15 |
16 | 点击某个元素弹出一个简单的气泡确认框
17 |
18 | ## 展示位置
19 |
20 | Popconfirm 提供了 9 种展示位置
21 |
22 | 使用 `title` 属性来设置点击参考元素时显示的信息, 由 `placement` 属性来决定展示的方向: `[方向]-[对齐位置]`; 四个方向: `top`, `bottom`, `left`, `right`; 三种对齐位置: `start`, `end`, `null`, 默认为 null。 如 `placement="left-end"`, 则气泡确认框出现在目标元素左侧, 且气泡确认框的底部与目标元素底部对齐。
23 |
24 | ::: preview
25 | demo-preview=../demo/Popconfirm/Placement.vue
26 | :::
27 |
28 | ## 基础用法
29 |
30 | Popconfirm 属性同 Tooltip 类似, 是基于 Tooltip 封装的拓展
31 |
32 | 在 Popconfirm 中, 只有 `title` 可用, `content` 属性无效。
33 |
34 | ::: preview
35 | demo-preview=../demo/Popconfirm/Basic.vue
36 | :::
37 |
38 | ## 自定义弹出框内容
39 |
40 | 可以在 Popconfirm 中自定义内容
41 |
42 | ::: preview
43 | demo-preview=../demo/Popconfirm/Custom.vue
44 | :::
45 |
46 | ## 多种让 Popconfirm 出现的方法
47 |
48 | 点击按钮触发事件
49 |
50 | ::: preview
51 | demo-preview=../demo/Popconfirm/Callback.vue
52 | :::
53 |
54 | ## API_Table插件测试
55 |
56 | :::danger
57 | 该插件基于 `markdown-it` 开发, 解析组件 `types.ts` 文件生成 API 表格, 测试中
58 | :::
59 |
60 | ::: api-table src=components/Popconfirm/types.ts
61 | :::
62 |
--------------------------------------------------------------------------------
/libs/vitepress-preview-component/.dist/messages/message-notice.vue.d.ts:
--------------------------------------------------------------------------------
1 | interface MessageNotice {
2 | content: string;
3 | close: () => void;
4 | }
5 | declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps, {
6 | content: string;
7 | }>, {
8 | setVisible: (value: boolean) => void;
9 | setTopHeight: (value: number) => void;
10 | }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly, {
11 | content: string;
12 | }>>>, {
13 | content: string;
14 | }, {}>;
15 | export default _default;
16 | type __VLS_NonUndefinedable = T extends undefined ? never : T;
17 | type __VLS_TypePropsToRuntimeProps = {
18 | [K in keyof T]-?: {} extends Pick ? {
19 | type: import('vue').PropType<__VLS_NonUndefinedable>;
20 | } : {
21 | type: import('vue').PropType;
22 | required: true;
23 | };
24 | };
25 | type __VLS_WithDefaults = {
26 | [K in keyof Pick]: K extends keyof D ? __VLS_Prettify : P[K];
29 | };
30 | type __VLS_Prettify = {
31 | [K in keyof T]: T[K];
32 | } & {};
33 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Image/Custom.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
BlockSize:{{ blockSize }}
4 |
5 |
6 |
8 |
ColorCount:{{ colorCount }}
9 |
10 |
11 |
13 |
18 |
19 |
20 |
21 |
40 |
--------------------------------------------------------------------------------
/packages/docs/vitepress/components/overlay.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Overlay
3 | description: Overlay 组件文档
4 |
5 | next:
6 | link: /components/text
7 | text: Text 文本
8 |
9 | prev:
10 | link: /components/icon
11 | text: Icon 图标
12 | ---
13 |
14 | # Overlay 遮罩层
15 |
16 | 向指定元素添加遮罩层, 常用于模态框、抽屉等组件背景。
17 |
18 | ## 基础用法
19 |
20 | 通过 `mask` 属性控制遮罩层**样式上的**显示隐藏, 通过 `zIndex` 属性设置遮罩层层级
21 |
22 | 设置在 `px-overlay` 上的 `attrs` 会被拦截, 自定义类名列表可通过 `overlayClass` 添加
23 |
24 | :::warning
25 | `mask` 属性仅控制**遮罩层显示**, 仅属于样式上的区分, 对于插槽内容不做处理
26 |
27 | 页面滚动的锁定与 `px-overlay` 卸载挂载关联, 建议使用 `v-if` 控制实例创建销毁
28 | :::
29 |
30 | ::: preview
31 | demo-preview=../demo/Overlay/Basic.vue
32 | :::
33 |
34 | ## 自定义颜色
35 |
36 | 通过 `color` 设置默认遮罩层颜色
37 |
38 | :::tip
39 | `grid`, `preset` 等预设装饰性遮罩层优先级高于 `color` 自定义颜色
40 |
41 | 其颜色通过 `--px-grid-color-1` 等属性修改
42 | :::
43 |
44 | ::: preview
45 | demo-preview=../demo/Overlay/Color.vue
46 | :::
47 |
48 | ## 网格背景-默认
49 |
50 | 通过 `grid` 属性设置网格背景
51 |
52 | ::: preview
53 | demo-preview=../demo/Overlay/Grid.vue
54 | :::
55 |
56 | ## 网格背景-预设1
57 |
58 | 通过 `preset1` 预设网格背景-1, 同时可通过 `matte` 属性设置遮罩层 **哑光** 效果
59 |
60 | ::: preview
61 | demo-preview=../demo/Overlay/Preset1.vue
62 | :::
63 |
64 |
65 | ## API_Table插件测试
66 |
67 | :::danger
68 | 该插件基于 `markdown-it` 开发, 解析组件 `types.ts` 文件生成 API 表格, 测试中
69 | :::
70 |
71 | ::: api-table src=components/Overlay/types.ts
72 | :::
--------------------------------------------------------------------------------
/packages/docs/vitepress/components/pixelit.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pixelit 图片像素化
3 | description: Pixelit 组件文档
4 |
5 | next:
6 | link: /components/pixelit
7 | text: Pixelit 图片像素化
8 |
9 | prev:
10 | link: /components/animationFrame
11 | text: AniamtionFrame 动画帧
12 | ---
13 |
14 | # Pixelit 图片像素化
15 |
16 | Pixelit 用于将图片进行像素风格渲染。支持自定义缩放比例、灰度处理、调色板替换等
17 |
18 | :::tip
19 | 对于复杂图片, 相较于 [PxImage](/components/image) 组件, Pixelit 组件性能更高, 但对于纯色图片处理较差, 请合理使用
20 | :::
21 |
22 | ## 基本用法
23 |
24 | 通过设置 `src` 属性指定原始图片地址, 组件会自动进行像素化处理
25 |
26 | :::preview
27 | demo-preview=../demo/Pixelit/Basic.vue
28 | :::
29 |
30 | ## 图像尺寸
31 |
32 | 通过设置 `width`、`height` 属性来设置组件的宽高, 默认为图片的宽高。
33 |
34 | 提供 `aspect-ratio` 属性来设置组件的缩放, 默认为 `1`
35 |
36 | :::preview
37 | demo-preview=../demo/Pixelit/Size.vue
38 | :::
39 |
40 | ## 灰度化
41 |
42 | 设置 `grayscale` 属性来对图片进行灰度处理
43 |
44 | :::preview
45 | demo-preview=../demo/Pixelit/Grayscale.vue
46 | :::
47 |
48 | ## 调色板替换
49 |
50 | 通过 `palette` 属性可设置自定义颜色调色板 (二维 RGB 数组), 对图像颜色进行替换
51 |
52 | :::preview
53 | demo-preview=../demo/Pixelit/Palette.vue
54 | :::
55 |
56 | ## 在线体验
57 |
58 | 提供在线演练场, 上传图片, 快速体验
59 |
60 | :::preview
61 | demo-preview=../demo/Pixelit/Playground.vue
62 | :::
63 |
64 | ## API_Table插件测试
65 |
66 | :::danger
67 | 该插件基于 `markdown-it` 开发, 解析组件 `types.ts` 文件生成 API 表格, 测试中
68 | :::
69 |
70 | ::: api-table src=components/PixelIt/types.ts
71 | :::
--------------------------------------------------------------------------------
/packages/docs/vitepress/demo/Tag/Effect.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Dark
4 |
10 | {{ item.label }}
11 |
12 |
14 |
Light
15 |
21 | {{ item.label }}
22 |
23 |
25 |
Plain
26 |
32 | {{ item.label }}
33 |
34 |
46 |
47 | {{ content }}
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------