diff --git a/packages/design/src/Popover.vue b/packages/design/src/Popover.vue index 3fdec213..75a54648 100644 --- a/packages/design/src/Popover.vue +++ b/packages/design/src/Popover.vue @@ -18,7 +18,7 @@ defineOptions({ name: 'TMPopover', }); -const props = defineProps(); +const props = withDefaults(defineProps(), { visible: null }); const ui = getConfig('components')?.popover; diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts index fb5c1460..726db962 100644 --- a/packages/design/src/types.ts +++ b/packages/design/src/types.ts @@ -228,6 +228,7 @@ export interface PopoverProps { content?: string; disabled?: boolean; popperClass?: string; + visible?: boolean | null; } export interface RadioProps { diff --git a/packages/editor/src/theme/component-list-panel.scss b/packages/editor/src/theme/component-list-panel.scss index 5e75a623..e2ac1c84 100644 --- a/packages/editor/src/theme/component-list-panel.scss +++ b/packages/editor/src/theme/component-list-panel.scss @@ -1,88 +1,96 @@ -.ui-component-panel.tmagic-design-collapse { - height: 100%; - border-top: 0 !important; - margin-top: 48px; - background-color: $--sidebar-content-background-color; +.ui-component-panel { + &.tmagic-design-collapse { + height: 100%; + border-top: 0 !important; + margin-top: 48px; + background-color: $--sidebar-content-background-color; - .tmagic-design-collapse-item { - > div:first-of-type { - border-bottom: 1px solid $--border-color; - margin-bottom: 10px; - } - } - - .el-collapse-item__header, - .t-collapse-panel__header { - background: $--sidebar-content-background-color; - color: $--font-color; - height: 25px; - line-height: 25px; - padding-left: 10px; - font-size: 12px; - - i { - margin-right: 5px; - font-size: 14px; - } - } - - .el-collapse-item__wrap, - .t-collapse-panel__body { - background: $--sidebar-content-background-color; - border-bottom: 0; - - .el-collapse-item__content, - .t-collapse-panel__content { - padding: 10px; - display: flex; - flex-wrap: wrap; + .tmagic-design-collapse-item { + > div:first-of-type { + border-bottom: 1px solid $--border-color; + margin-bottom: 10px; + } } - .component-item { - display: flex; - overflow: hidden; - text-overflow: ellipsis; - margin: 5px 10px; - box-sizing: border-box; + .el-collapse-item__header, + .t-collapse-panel__header { + background: $--sidebar-content-background-color; color: $--font-color; - flex-direction: column; - width: 42px; - cursor: pointer; + height: 25px; + line-height: 25px; + padding-left: 10px; + font-size: 12px; i { - font-size: 20px; - background: #fff; - height: 40px; - width: 40px; - line-height: 40px; - border-radius: 5px; - color: #909090; - border: 1px solid $--border-color; + margin-right: 5px; + font-size: 14px; + } + } + + .el-collapse-item__wrap, + .t-collapse-panel__body { + background: $--sidebar-content-background-color; + border-bottom: 0; + + .el-collapse-item__content, + .t-collapse-panel__content { + padding: 10px; display: flex; - justify-content: space-evenly; - align-items: center; - margin-bottom: 5px; + flex-wrap: wrap; + } - &:hover { - background: #2882e0; - color: #fff; - border-color: #4e8be1; + .component-item { + display: flex; + overflow: hidden; + text-overflow: ellipsis; + margin: 5px 10px; + box-sizing: border-box; + color: $--font-color; + flex-direction: column; + width: 42px; + cursor: pointer; + + i { + font-size: 20px; + background: #fff; + height: 40px; + width: 40px; + line-height: 40px; + border-radius: 5px; + color: #909090; + border: 1px solid $--border-color; + display: flex; + justify-content: space-evenly; + align-items: center; + margin-bottom: 5px; + + &:hover { + background: #2882e0; + color: #fff; + border-color: #4e8be1; + } } - } - span { - font-size: 12px; - text-align: center; - } + span { + font-size: 12px; + text-align: center; + } - .el-tooltip { - width: 50px; - height: 30px; - line-height: 15px; - display: block; - white-space: normal; - margin: 0; + .el-tooltip { + width: 50px; + height: 30px; + line-height: 15px; + display: block; + white-space: normal; + margin: 0; + } } } } + + .t-collapse { + margin-top: 0; + padding-top: 48px; + position: relative; + } } diff --git a/packages/editor/src/theme/layer-panel.scss b/packages/editor/src/theme/layer-panel.scss index f5431175..d31623cf 100644 --- a/packages/editor/src/theme/layer-panel.scss +++ b/packages/editor/src/theme/layer-panel.scss @@ -1,5 +1,6 @@ .m-editor-layer-panel { background: $--sidebar-content-background-color; + position: relative; .m-editor-tree { padding-top: 48px; diff --git a/packages/tdesign-vue-next-adapter/package.json b/packages/tdesign-vue-next-adapter/package.json index 1af9647a..5f2827bb 100644 --- a/packages/tdesign-vue-next-adapter/package.json +++ b/packages/tdesign-vue-next-adapter/package.json @@ -38,12 +38,12 @@ ], "dependencies": { "@tmagic/design": "1.3.15", - "tdesign-vue-next": "^1.3.4", + "tdesign-vue-next": "^1.8.1", "vue": "^3.3.8" }, "peerDependencies": { "@tmagic/design": "1.3.15", - "tdesign-vue-next": "^1.3.4", + "tdesign-vue-next": "^1.8.1", "vue": "^3.3.8" }, "devDependencies": { diff --git a/packages/tdesign-vue-next-adapter/src/Popover.vue b/packages/tdesign-vue-next-adapter/src/Popover.vue new file mode 100644 index 00000000..744337f6 --- /dev/null +++ b/packages/tdesign-vue-next-adapter/src/Popover.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/tdesign-vue-next-adapter/src/index.ts b/packages/tdesign-vue-next-adapter/src/index.ts index 552467c1..06b07b26 100644 --- a/packages/tdesign-vue-next-adapter/src/index.ts +++ b/packages/tdesign-vue-next-adapter/src/index.ts @@ -23,7 +23,6 @@ import { Option as TOption, OptionGroup as TOptionGroup, Pagination as TPagination, - Popup as TPopup, Radio as TRadio, RadioButton as TRadioButton, RadioGroup as TRadioGroup, @@ -87,7 +86,7 @@ import type { import DatePicker from './DatePicker.vue'; import Icon from './Icon.vue'; import Input from './Input.vue'; -import { vLoading } from './loading'; +import Popover from './Popover.vue'; import Scrollbar from './Scrollbar.vue'; import TableColumn from './TableColumn.vue'; import Tree from './Tree.vue'; @@ -109,7 +108,6 @@ const adapter: any = { console.log(msg); }, }, - loading: vLoading, components: { badge: { component: TBadge, @@ -240,7 +238,7 @@ const adapter: any = { component: TDrawer, props: (props: DrawerProps) => ({ visible: props.modelValue, - size: props.size, + size: typeof props.size === 'number' ? `${props.size}px` : props.size, closeOnEscKeydown: props.closeOnPressEscape, closeOnOverlayClick: props.closeOnClickModal, attach: props.appendToBody ? 'body' : undefined, @@ -352,14 +350,8 @@ const adapter: any = { }, popover: { - component: TPopup, - props: (props: PopoverProps) => ({ - placement: props.placement, - trigger: props.trigger, - content: props.content, - disabled: props.disabled, - overlayClassName: props.popperClass, - }), + component: Popover, + props: (props: PopoverProps) => props, }, radio: { @@ -486,6 +478,7 @@ const adapter: any = { tooltip: { component: TTooltip, props: (props: TooltipProps) => ({ + ...props, placement: props.placement, content: props.content, }), diff --git a/packages/tdesign-vue-next-adapter/src/loading.ts b/packages/tdesign-vue-next-adapter/src/loading.ts deleted file mode 100644 index 04f66fea..00000000 --- a/packages/tdesign-vue-next-adapter/src/loading.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type { Directive } from 'vue'; -import { LoadingInstance, LoadingPlugin } from 'tdesign-vue-next'; - -export type LoadingBinding = boolean; - -const INSTANCE_KEY = Symbol('TdesignLoading'); - -export interface ElementLoading extends HTMLElement { - [INSTANCE_KEY]?: { - instance: LoadingInstance; - }; -} - -const createInstance = (el: ElementLoading) => - (el[INSTANCE_KEY] = { - instance: LoadingPlugin({ - attach: () => el, - showOverlay: true, - size: '20px', - }), - }); - -export const vLoading: Directive = { - mounted(el, binding) { - const { value } = binding; - if (value) { - createInstance(el); - } - }, - - updated(el, binding) { - const instance = el[INSTANCE_KEY]; - if (binding.oldValue !== binding.value) { - if (binding.value && !binding.oldValue) { - createInstance(el); - } else { - instance?.instance.hide(); - } - } - }, - - unmounted(el) { - el[INSTANCE_KEY]?.instance.hide(); - }, -}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c37761d8..50199d38 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -595,8 +595,8 @@ importers: specifier: 1.3.15 version: link:../design tdesign-vue-next: - specifier: ^1.3.4 - version: 1.3.4(vue@3.3.8) + specifier: ^1.8.1 + version: 1.8.1(vue@3.3.8) vue: specifier: ^3.3.8 version: 3.3.8(typescript@5.0.4) @@ -3527,6 +3527,14 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.11 + dev: true + + /@babel/runtime@7.24.0: + resolution: {integrity: sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.14.0 + dev: false /@babel/template@7.20.7: resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==} @@ -4461,8 +4469,8 @@ packages: fastq: 1.15.0 dev: true - /@popperjs/core@2.11.7: - resolution: {integrity: sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==} + /@popperjs/core@2.11.8: + resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} dev: false /@rollup/pluginutils@4.2.1: @@ -4836,6 +4844,11 @@ packages: /@types/sortablejs@1.10.7: resolution: {integrity: sha512-lGCwwgpj8zW/ZmaueoPVSP7nnc9t8VqVWXS+ASX3eoUUENmiazv0rlXyTRludXzuX9ALjPsMqBu85TgJNWbTOg==} + dev: true + + /@types/sortablejs@1.15.8: + resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==} + dev: false /@types/tinycolor2@1.4.3: resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==} @@ -4845,8 +4858,8 @@ packages: resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} dev: true - /@types/validator@13.7.14: - resolution: {integrity: sha512-J6OAed6rhN6zyqL9Of6ZMamhlsOEU/poBVvbHr/dKOYKTeuYYMlDkMv+b6UUV0o2i0tw73cgyv/97WTWaUl0/g==} + /@types/validator@13.11.9: + resolution: {integrity: sha512-FCTsikRozryfayPuiI46QzH3fnrOoctTjvOYZkho9BTFLCOZ2rgZJHMOVgCOfttjPJcgOx52EpkY0CMfy87MIw==} dev: false /@types/web-bluetooth@0.0.16: @@ -6513,6 +6526,10 @@ packages: whatwg-url: 11.0.0 dev: true + /dayjs@1.11.10: + resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==} + dev: false + /dayjs@1.11.4: resolution: {integrity: sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==} @@ -8861,8 +8878,8 @@ packages: resolution: {integrity: sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ==} dev: true - /mitt@3.0.0: - resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==} + /mitt@3.0.1: + resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==} dev: false /mlly@1.2.0: @@ -9630,10 +9647,10 @@ packages: /regenerator-runtime@0.13.11: resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} + dev: true /regenerator-runtime@0.14.0: resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==} - dev: true /regenerator-transform@0.15.1: resolution: {integrity: sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==} @@ -10242,31 +10259,31 @@ packages: resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} dev: true - /tdesign-icons-vue-next@0.1.8(vue@3.3.8): - resolution: {integrity: sha512-ssI/KJHlhUMYbf+dk+7Ab3LQbWc5wJBjWF9GaGZWPlMU0Yhui9oa2Dvm97Pbx8Ba6drTEDKwfmtJV2R4V6e84Q==} + /tdesign-icons-vue-next@0.2.2(vue@3.3.8): + resolution: {integrity: sha512-ZKleBME7ZF1IVgnRXmIBPjfNa2Mef1nrK56f2xwn1Aa5mvXxB3fSxEzwhObR7bhzf/K42mz/Knnbll5Y7vCBjg==} peerDependencies: vue: ^3.0.0 dependencies: - '@babel/runtime': 7.21.0 + '@babel/runtime': 7.24.0 vue: 3.3.8(typescript@5.0.4) dev: false - /tdesign-vue-next@1.3.4(vue@3.3.8): - resolution: {integrity: sha512-6rCEvH4JQoKJZH7MWhF+i1cFBa+GybuulHI4/Wto4GWjeTNG+OnJwjYD3ZLcpGZHuVadP01/oYOFbMZoOQlllg==} + /tdesign-vue-next@1.8.1(vue@3.3.8): + resolution: {integrity: sha512-L8aP89pRV1nr3Tjedr6DqEtSGZghrzNx75En/owkUSjjiyU5oqeVIq/9JPvArNeJQCnmxcDwxYxBf+mRfjmrHg==} peerDependencies: vue: '>=3.1.0' dependencies: - '@babel/runtime': 7.21.0 - '@popperjs/core': 2.11.7 + '@babel/runtime': 7.24.0 + '@popperjs/core': 2.11.8 '@types/lodash': 4.14.182 - '@types/sortablejs': 1.10.7 + '@types/sortablejs': 1.15.8 '@types/tinycolor2': 1.4.3 - '@types/validator': 13.7.14 - dayjs: 1.11.4 + '@types/validator': 13.11.9 + dayjs: 1.11.10 lodash: 4.17.21 - mitt: 3.0.0 + mitt: 3.0.1 sortablejs: 1.15.0 - tdesign-icons-vue-next: 0.1.8(vue@3.3.8) + tdesign-icons-vue-next: 0.2.2(vue@3.3.8) tinycolor2: 1.6.0 validator: 13.9.0 vue: 3.3.8(typescript@5.0.4)