diff --git a/README.md b/README.md index ee587e97..75fb8b0e 100644 --- a/README.md +++ b/README.md @@ -169,20 +169,22 @@ npm run serve - 将 npm 更换到 pnpm； - 将 Vue CLI 更换到 Vite 生态； - （进行中）移除 Ant-Design-Vue 组件：样式异常且难以控制、存在全局污染的问题、已知部分组件存在Bug，如Slider、Popover、Tooltip... - - message -> https://github.com/smastrom/notivue - - Modal -> custom - - Tooltip -> https://github.com/atomiks/tippyjs - - Popover -> https://github.com/atomiks/tippyjs - - Select -> https://github.com/atomiks/tippyjs + - Message + - Tooltip + - Popover + - Modal + - Select - Drawer -> remove - - Slider -> custom - - Button -> custom - - Input -> custom - - InputNumber -> custom - - Switch -> custom - - Radio -> custom - - Checkbox -> custom - - Divider -> custom + - Slider + - Button + - ButtonGroup + - Input + - InputNumber + - TextArea + - Switch + - RadioButton + - Checkbox + - Divider - 支持 Iframe 引用； - 组合元素重构：能够支持组合元素进行旋转、缩放、整体执行动画等； - 支持多屏放映； diff --git a/package-lock.json b/package-lock.json index ac300b16..9d26699c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "lodash": "^4.17.21", "mitt": "^3.0.1", "nanoid": "^4.0.2", + "number-precision": "^1.6.0", "pinia": "^2.1.4", "pptxgenjs": "^3.12.0", "pptxtojson": "^0.0.11", @@ -40,6 +41,7 @@ "svg-arc-to-cubic-bezier": "^3.2.0", "svg-pathdata": "^6.0.3", "tinycolor2": "^1.6.0", + "tippy.js": "^6.3.7", "vue": "^3.3.4", "vuedraggable": "^4.1.0" }, @@ -2665,6 +2667,11 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -9682,6 +9689,11 @@ "boolbase": "^1.0.0" } }, + "node_modules/number-precision": { + "version": "1.6.0", + "resolved": "https://registry.npmmirror.com/number-precision/-/number-precision-1.6.0.tgz", + "integrity": "sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==" + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz", @@ -13172,6 +13184,14 @@ "resolved": "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.6.0.tgz", "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmmirror.com/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -16615,6 +16635,11 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -22331,6 +22356,11 @@ "boolbase": "^1.0.0" } }, + "number-precision": { + "version": "1.6.0", + "resolved": "https://registry.npmmirror.com/number-precision/-/number-precision-1.6.0.tgz", + "integrity": "sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==" + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz", @@ -25086,6 +25116,14 @@ "resolved": "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.6.0.tgz", "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" }, + "tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmmirror.com/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "requires": { + "@popperjs/core": "^2.9.0" + } + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz", diff --git a/package.json b/package.json index 1e495c6b..5c9adb3f 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "lodash": "^4.17.21", "mitt": "^3.0.1", "nanoid": "^4.0.2", + "number-precision": "^1.6.0", "pinia": "^2.1.4", "pptxgenjs": "^3.12.0", "pptxtojson": "^0.0.11", @@ -41,6 +42,7 @@ "svg-arc-to-cubic-bezier": "^3.2.0", "svg-pathdata": "^6.0.3", "tinycolor2": "^1.6.0", + "tippy.js": "^6.3.7", "vue": "^3.3.4", "vuedraggable": "^4.1.0" }, diff --git a/src/components/Button.vue b/src/components/Button.vue new file mode 100644 index 00000000..7f720c8e --- /dev/null +++ b/src/components/Button.vue @@ -0,0 +1,98 @@ + + + + + \ No newline at end of file diff --git a/src/components/CheckboxButtonGroup.vue b/src/components/ButtonGroup.vue similarity index 75% rename from src/components/CheckboxButtonGroup.vue rename to src/components/ButtonGroup.vue index 98379200..a527d096 100644 --- a/src/components/CheckboxButtonGroup.vue +++ b/src/components/ButtonGroup.vue @@ -1,39 +1,45 @@ - - - - - \ No newline at end of file diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue new file mode 100644 index 00000000..250b17df --- /dev/null +++ b/src/components/Checkbox.vue @@ -0,0 +1,109 @@ + + + + + \ No newline at end of file diff --git a/src/components/CheckboxButton.vue b/src/components/CheckboxButton.vue index 97da8d1e..722667d0 100644 --- a/src/components/CheckboxButton.vue +++ b/src/components/CheckboxButton.vue @@ -1,43 +1,21 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/Divider.vue b/src/components/Divider.vue new file mode 100644 index 00000000..30aca5d9 --- /dev/null +++ b/src/components/Divider.vue @@ -0,0 +1,34 @@ + + + + + \ No newline at end of file diff --git a/src/components/Input.vue b/src/components/Input.vue new file mode 100644 index 00000000..afaf89ac --- /dev/null +++ b/src/components/Input.vue @@ -0,0 +1,95 @@ + + + + + \ No newline at end of file diff --git a/src/components/Message.vue b/src/components/Message.vue new file mode 100644 index 00000000..7e367682 --- /dev/null +++ b/src/components/Message.vue @@ -0,0 +1,183 @@ + + + + + \ No newline at end of file diff --git a/src/components/Modal.vue b/src/components/Modal.vue new file mode 100644 index 00000000..84e39d99 --- /dev/null +++ b/src/components/Modal.vue @@ -0,0 +1,137 @@ + + + + + \ No newline at end of file diff --git a/src/components/NumberInput.vue b/src/components/NumberInput.vue new file mode 100644 index 00000000..32573cd0 --- /dev/null +++ b/src/components/NumberInput.vue @@ -0,0 +1,162 @@ + + + + + \ No newline at end of file diff --git a/src/components/Popover.vue b/src/components/Popover.vue new file mode 100644 index 00000000..9ae61e69 --- /dev/null +++ b/src/components/Popover.vue @@ -0,0 +1,74 @@ + + + + + \ No newline at end of file diff --git a/src/components/RadioButton.vue b/src/components/RadioButton.vue new file mode 100644 index 00000000..2d57657a --- /dev/null +++ b/src/components/RadioButton.vue @@ -0,0 +1,26 @@ + + + \ No newline at end of file diff --git a/src/components/RadioGroup.vue b/src/components/RadioGroup.vue new file mode 100644 index 00000000..1626c3b1 --- /dev/null +++ b/src/components/RadioGroup.vue @@ -0,0 +1,35 @@ + + + \ No newline at end of file diff --git a/src/components/Select.vue b/src/components/Select.vue new file mode 100644 index 00000000..e5b7bc1f --- /dev/null +++ b/src/components/Select.vue @@ -0,0 +1,160 @@ + + + + + \ No newline at end of file diff --git a/src/components/SelectGroup.vue b/src/components/SelectGroup.vue new file mode 100644 index 00000000..2123bb71 --- /dev/null +++ b/src/components/SelectGroup.vue @@ -0,0 +1,54 @@ + + + + + \ No newline at end of file diff --git a/src/components/Slider.vue b/src/components/Slider.vue new file mode 100644 index 00000000..82fcf09e --- /dev/null +++ b/src/components/Slider.vue @@ -0,0 +1,272 @@ + + + + + \ No newline at end of file diff --git a/src/components/Switch.vue b/src/components/Switch.vue new file mode 100644 index 00000000..f995986d --- /dev/null +++ b/src/components/Switch.vue @@ -0,0 +1,97 @@ + + + + + \ No newline at end of file diff --git a/src/components/TextArea.vue b/src/components/TextArea.vue new file mode 100644 index 00000000..a90d0c25 --- /dev/null +++ b/src/components/TextArea.vue @@ -0,0 +1,70 @@ + + + + + \ No newline at end of file diff --git a/src/plugins/directive/index.ts b/src/plugins/directive/index.ts index 064c4a80..b2ee91c9 100644 --- a/src/plugins/directive/index.ts +++ b/src/plugins/directive/index.ts @@ -2,10 +2,12 @@ import type { App } from 'vue' import Contextmenu from './contextmenu' import ClickOutside from './clickOutside' +import Tooltip from './tooltip' export default { install(app: App) { app.directive('contextmenu', Contextmenu) app.directive('click-outside', ClickOutside) + app.directive('tooltip', Tooltip) } } diff --git a/src/plugins/directive/message.ts b/src/plugins/directive/message.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/plugins/directive/tooltip.scss b/src/plugins/directive/tooltip.scss new file mode 100644 index 00000000..6fb2afe2 --- /dev/null +++ b/src/plugins/directive/tooltip.scss @@ -0,0 +1,67 @@ +.tippy-box[data-theme~='tooltip'] { + background-color: #262626; + color: #fff; + border-radius: 2px; + padding: 8px; + font-size: 12px; + line-height: 1.5; + + .tippy-arrow { + width: 12px; + height: 12px; + color: #262626; + + &::before { + content: ''; + position: absolute; + border-color: transparent; + border-style: solid; + } + } + + &[data-placement^='top'] > .tippy-arrow { + bottom: 0; + + &::before { + bottom: -5px; + left: 0; + border-width: 6px 6px 0; + border-top-color: initial; + transform-origin: center top; + } + } + + &[data-placement^='bottom'] > .tippy-arrow { + top: 0; + + &::before { + top: -5px; + left: 0; + border-width: 0 6px 6px; + border-bottom-color: initial; + transform-origin: center bottom; + } + } + + &[data-placement^='left'] > .tippy-arrow { + right: 0; + + &::before { + border-width: 6px 0 6px 6px; + border-left-color: initial; + right: -5px; + transform-origin: center left; + } + } + + &[data-placement^='right'] > .tippy-arrow { + left: 0; + + &::before { + left: -5px; + border-width: 6px 6px 6px 0; + border-right-color: initial; + transform-origin: center right; + } + } +} \ No newline at end of file diff --git a/src/plugins/directive/tooltip.ts b/src/plugins/directive/tooltip.ts new file mode 100644 index 00000000..74ae6488 --- /dev/null +++ b/src/plugins/directive/tooltip.ts @@ -0,0 +1,62 @@ +import type { Directive, DirectiveBinding } from 'vue' +import tippy, { type Instance, type Placement } from 'tippy.js' + +import './tooltip.scss' + +const TOOLTIP_INSTANCE = 'TOOLTIP_INSTANCE' + +interface CustomHTMLElement extends HTMLElement { + [TOOLTIP_INSTANCE]?: Instance +} + +type Delay = number | [number | null, number | null] + +interface BindingValue { + content: string + placement?: Placement + delay?: Delay +} + +const TooltipDirective: Directive = { + mounted(el: CustomHTMLElement, binding: DirectiveBinding) { + let content = '' + let placement: Placement = 'auto' + let delay: Delay = [300, 0] + + if (typeof binding.value === 'string') { + content = binding.value + } + else { + content = binding.value.content + if (binding.value.placement !== undefined) placement = binding.value.placement + if (binding.value.delay !== undefined) delay = binding.value.delay + } + + el[TOOLTIP_INSTANCE] = tippy(el, { + content, + theme: 'tooltip', + duration: 100, + animation: 'scale', + allowHTML: true, + placement, + delay, + }) + }, + + updated(el: CustomHTMLElement, binding: DirectiveBinding) { + let content = '' + if (typeof binding.value === 'string') { + content = binding.value + } + else { + content = binding.value.content + } + if (el[TOOLTIP_INSTANCE]) el[TOOLTIP_INSTANCE].setContent(content) + }, + + unmounted(el: CustomHTMLElement) { + if (el[TOOLTIP_INSTANCE]) el[TOOLTIP_INSTANCE].destroy() + }, +} + +export default TooltipDirective \ No newline at end of file diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 3ef1e4f5..4e329fbb 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -116,6 +116,10 @@ import { Right, MoveOne, HamburgerButton, + Attention, + CheckOne, + CloseOne, + Info, } from '@icon-park/vue-next' export interface Icons { @@ -237,6 +241,10 @@ export const icons: Icons = { IconRight: Right, IconMoveOne: MoveOne, IconHamburgerButton: HamburgerButton, + IconAttention: Attention, + IconCheckOne: CheckOne, + IconCloseOne: CloseOne, + IconInfo: Info, } export default { diff --git a/src/types/injectKey.ts b/src/types/injectKey.ts index e86b41ca..5c91dcfa 100644 --- a/src/types/injectKey.ts +++ b/src/types/injectKey.ts @@ -2,6 +2,11 @@ import type { InjectionKey, Ref } from 'vue' export type SlideScale = Ref export type SlideId = Ref +export type RadioGroupValue = { + value: Ref + updateValue: (value: string) => void +} export const injectKeySlideScale: InjectionKey = Symbol() -export const injectKeySlideId: InjectionKey = Symbol() \ No newline at end of file +export const injectKeySlideId: InjectionKey = Symbol() +export const injectKeyRadioGroupValue: InjectionKey = Symbol() \ No newline at end of file diff --git a/src/utils/message.ts b/src/utils/message.ts new file mode 100644 index 00000000..3d80adf8 --- /dev/null +++ b/src/utils/message.ts @@ -0,0 +1,103 @@ +import { createVNode, render, type AppContext } from 'vue' +import MessageComponent from '@/components/Message.vue' + +export interface MessageOptions { + type?: 'info' | 'success' | 'warning' | 'error' + title?: string + message?: string + duration?: number + closable?: boolean + ctx?: AppContext + onClose?: () => void +} + +export type MessageTypeOptions = Omit +export interface MessageIntance { + id: string + close: () => void +} + +export type MessageFn = (message: string, options?: MessageTypeOptions) => MessageIntance +export interface Message { + (options: MessageOptions): MessageIntance + info: MessageFn + success: MessageFn + error: MessageFn + warning: MessageFn + closeAll: () => void + _context?: AppContext | null +} + +const instances: MessageIntance[] = [] +let wrap: HTMLDivElement | null = null +let seed = 0 +const defaultOptions: MessageOptions = { + duration: 3000, +} + +const message: Message = (options: MessageOptions) => { + const id = 'message-' + seed++ + const props = { + ...defaultOptions, + ...options, + id, + } + + if (!wrap) { + wrap = document.createElement('div') + wrap.className = 'message-wrap' + wrap.style.cssText = ` + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 1010; + pointer-events: none; + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: 15px; + background-color: rgba(255, 255, 255, 0); + transition: all 1s ease-in-out; + align-items: center; + ` + document.body.appendChild(wrap) + } + + const vm = createVNode(MessageComponent, props, null) + const div = document.createElement('div') + + vm.appContext = options.ctx || message._context || null + vm.props!.onClose = options.onClose + vm.props!.onDestroy = () => { + if (wrap && wrap.childNodes.length <= 1) { + wrap.remove() + wrap = null + } + render(null, div) + } + + render(vm, div) + wrap.appendChild(div.firstElementChild!) + + const instance = { + id, + close: () => vm?.component?.exposed?.close(), + } + + instances.push(instance) + return instance +} + +message.success = (msg: string, options?: MessageTypeOptions) => message({ ...options, type: 'success', message: msg }) +message.info = (msg: string, options?: MessageTypeOptions) => message({ ...options, type: 'info', message: msg }) +message.warning = (msg: string, options?: MessageTypeOptions) => message({ ...options, type: 'warning', message: msg }) +message.error = (msg: string, options?: MessageTypeOptions) => message({ ...options, type: 'error', message: msg }) + +message.closeAll = function() { + for (let i = instances.length - 1; i >= 0; i--) { + instances[i].close() + } +} + +export default message \ No newline at end of file diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue index c1291225..dbbfda2f 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue @@ -279,7 +279,7 @@ import ElementFlip from '../common/ElementFlip.vue' import ColorButton from '../common/ColorButton.vue' import TextColorButton from '../common/TextColorButton.vue' import CheckboxButton from '@/components/CheckboxButton.vue' -import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' +import CheckboxButtonGroup from '@/components/ButtonGroup.vue' import ColorPicker from '@/components/ColorPicker/index.vue' import ShapeItemThumbnail from '@/views/Editor/CanvasTool/ShapeItemThumbnail.vue' import { diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue index 0e1179ee..165a21a2 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue @@ -196,7 +196,7 @@ import ElementOutline from '../common/ElementOutline.vue' import ColorButton from '../common/ColorButton.vue' import TextColorButton from '../common/TextColorButton.vue' import CheckboxButton from '@/components/CheckboxButton.vue' -import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' +import CheckboxButtonGroup from '@/components/ButtonGroup.vue' import ColorPicker from '@/components/ColorPicker/index.vue' import { Divider, diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index 731f4e86..cca11f00 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -347,7 +347,7 @@ import ElementShadow from '../common/ElementShadow.vue' import ColorButton from '../common/ColorButton.vue' import TextColorButton from '../common/TextColorButton.vue' import CheckboxButton from '@/components/CheckboxButton.vue' -import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' +import CheckboxButtonGroup from '@/components/ButtonGroup.vue' import ColorPicker from '@/components/ColorPicker/index.vue' import { Divider, diff --git a/src/views/Editor/Toolbar/common/ElementFlip.vue b/src/views/Editor/Toolbar/common/ElementFlip.vue index 3fdd9b3b..191730db 100644 --- a/src/views/Editor/Toolbar/common/ElementFlip.vue +++ b/src/views/Editor/Toolbar/common/ElementFlip.vue @@ -1,6 +1,6 @@ @@ -23,7 +23,7 @@ import type { ImageOrShapeFlip } from '@/types/slides' import useHistorySnapshot from '@/hooks/useHistorySnapshot' import CheckboxButton from '@/components/CheckboxButton.vue' -import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' +import ButtonGroup from '@/components/ButtonGroup.vue' const slidesStore = useSlidesStore() const { handleElement } = storeToRefs(useMainStore()) diff --git a/src/views/Mobile/MobileEditor/ElementToolbar.vue b/src/views/Mobile/MobileEditor/ElementToolbar.vue index 384cce46..4f03b81d 100644 --- a/src/views/Mobile/MobileEditor/ElementToolbar.vue +++ b/src/views/Mobile/MobileEditor/ElementToolbar.vue @@ -133,7 +133,7 @@ import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements' import useHistorySnapshot from '@/hooks/useHistorySnapshot' import CheckboxButton from '@/components/CheckboxButton.vue' -import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' +import CheckboxButtonGroup from '@/components/ButtonGroup.vue' import { Divider, Button,