From 175d849f5d33e283ea78158bf4f9adbc679b456c Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sun, 29 Oct 2023 20:08:41 -0700 Subject: [PATCH] fix components bug and update docs (#700) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: update release notes (#397) * fix Playground Page (#399) * fix(sites): 切换 sites 引用 @opentiny/vue-repl包 * fix(sites): fix Playground Page * fix(sites): fix (#400) * feat(release): delete color-picker * feat(release): delete color-picker * feat(release): fix grid tips contentMethod * fix(playground): fix process.env \ changeVersion \sortablejs bugs (#422) * fix(sites): fix grid demo api link jump error url (#421) * fix(form-demo): add form validateField api demo (#424) * fix: fix demo import vue-modal; fix playground share (#428) * fix(playground): fix process.env \ changeVersion \sortablejs bugs * fix: fix demo import vue-modal; fix playground share * fix: import Modal (#430) * fix(select): Fix label not displaying correctly when using optimization attribute in select component (#438) * fix(search): the enter bug of the search component is fixed (#439) * feat(release): fix grid watch data * feat(grid): fix grid custom tooltip * fix: fix grid pager events * docs: fix the problem of missing container component style (#453) * docs(container): fix container composition demos fix #425 (#441) * docs: remove :::warning * fix(checkbox): fix checkbox selected icon bug close #450 (#451) * fix: fix input attrs id * fix(slider): fix slider range demo bug * fix: fix when datetime component in dialog-box, the popper scroll away; fix dialog-box (#455) * fix(mobile-tabbar): fixed a tabbar component switchover issue on the mobile client (#458) * fix(slider): fix upload destory bug * fix(smb-theme): smb theme change fix (#469) * fix(checkbox): fix checkbox group wrap (#467) * fix(dropdown): Fix the issue of incorrect theme icons for Dropdown components. (#468) * fix(dropdown-item): (#472) Fix DropdownItem component clicking to disable menu items but triggering item-click event * fix(button): button smb theme change fix (#470) * fix(button): button smb theme change fix * fix(checkbox-button): smb theme change fix * fix(playground): fix jump to incorrect demo (#466) * fix(link): smb theme change fix (#474) * fix(theme): smb theme change fix (#480) * fix(grid): fix grid checkbox radio x-design theme * chore(ts): change code style for import ts type (#511) * fix(Cascader, DropDown, Popeditor): fixed Cascader component panel not closing when clicked elsewhere (#513) * fix(popper): fix popper element offset error in micro-app (#570) * chore(popper): stop bubbling when parent is fixed * fix(popper): fix popper element in micro-app * feat: update code * Merge branch 'dev' of github.com:opentiny/tiny-vue into release * fix(docs): add support vue2.7 docs (#630) * fix(docs): add support vue2.7 docs * fix: fix version * fix: fix color-picker error * docs: update changelog v3.11.0 (#629) * fix: update site version * feat(site): add pnpm importPlugin docs * fix(dialog-box): recover dialog-box's css (#633) * docs(calendar-view): add calendar-view composition api demos (#635) * Release recover css (#637) * fix(dialog-box): recover dialog-box's css * fix(dialog-box): recover dialog-box's css * feat: add divider composition-api demo * fix(layout): fix layout styles * fix(checkbox): fix checkbox style (#640) * feat(playground): optimize the playground UI style (#638) * fix(rich-text-editor): Change the display of event triggered Demo, fix style issues, and fix component errors (#639) * Fix rich-text-edtior functionality and style issues * fix(Rich Text Editor): Fix bugs in the Rich Text Editor * fix(rich-text-editor): Change the display of event triggered Demo, fix style issues, and fix component errors * fix(rich-text-editor): remove Collaboration function, remove the depe… (#641) * fix(rich-text-editor): remove Collaboration function, remove the dependence and avoid the sideEffects * fix(rich-text-editor): fix * Fix bugs of dialog-box, tabbar and tree-menu (#643) * fix(Dialog-box): Fix the issue of blocked headers in dialogBox components * fix(dialog-box): Eliminate unnecessary scrollbars on the body inside the dialog-box * fix(treemenu): The content is too crowded * fix(tabbar): running exception of tabbar * fix(rich-text-editor): Enable History Mode；Fix Console Warning (#651) * Hyl fixbug 2310 (#654) * fix(Dialog-box): Fix the issue of blocked headers in dialogBox components * fix(dialog-box): Eliminate unnecessary scrollbars on the body inside the dialog-box * fix(treemenu): The content is too crowded * fix(tabbar): Tabbar item click event not responding * fix(dialog-box): fix the right dialog-box's layout to flex layout (#653) * feat(site): update docs * fix(image): fix preview image demo's bug (#664) * fix(grid): Solving the problem of multiple tables being mutually exclusive (#662) * fix(date-picker): fix date-picker style (#669) * docs(date-picker): fix date-picker time-arrow-control demo error (#670) * fix(playground): fix first time visite Tinyvue site, cdn url error! (#672) * fix(link-menu): fix link-menu style * fix(link-menu): fix link-menu style * fix(build): [playground] fix build docs replace 'process.env' string (#676) * fix(docs): [sites] fix grid api link jump to error demo (#677) * feat: update docs version * fix(component): [image] fix no teleport in vue2 (#680) * fix(components): [date-picker] fix date-picker browser lag issue (#682) * fix(tree): fix some bugs: lazy load nodes failed (#685) * fix(tabs): Fix tabs initialization clicking more buttons not working properly (#684) * fix(components): [date-picker] fix Invalid prop: type check failed for prop "type" (#687) * fix(option): Fixed incorrect style when using the multiple limit attribute in the Select component (#694) * fix(components): [rich-text-editor] add sideEffects for tree-shaking * style(components): [date-range] change date range icons (#695) --------- Co-authored-by: Kagol Co-authored-by: 申君健 <40288193@qq.com> Co-authored-by: gimmyhehe <975402925@qq.com> Co-authored-by: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com> Co-authored-by: chenxi-20 <76168465+chenxi-20@users.noreply.github.com> Co-authored-by: yoyo <104079404+yoyo201626@users.noreply.github.com> Co-authored-by: shonen7 <145949377+shonen7@users.noreply.github.com> Co-authored-by: 黄怡林 <48042709+Huangyilin19@users.noreply.github.com> Co-authored-by: 黄怡林 --- examples/sites/demos/pc/app/tree/node-key.vue | 2 +- examples/sites/package.json | 4 +- examples/sites/playground.html | 4 + examples/sites/playground/App.vue | 3 +- .../sites/src/views/components/components.vue | 9 +- examples/sites/vite.config.ts | 9 +- .../src/common/deps/tree-model/node.ts | 17 +- packages/renderless/src/image-viewer/index.ts | 6 +- packages/renderless/src/image/index.ts | 2 - packages/renderless/src/picker/index.ts | 7 +- packages/renderless/src/picker/vue.ts | 4 +- packages/renderless/src/tabs/index.ts | 42 ++-- packages/renderless/src/tabs/vue.ts | 2 +- packages/renderless/src/tree-node/index.ts | 4 +- packages/renderless/src/tree-node/vue.ts | 12 +- packages/renderless/src/tree/vue.ts | 11 +- .../theme-saas/src/date-picker/index.less | 2 +- packages/theme-saas/src/picker/index.less | 1 - packages/theme/src/date-table/index.less | 1 + packages/theme/src/image-viewer/index.less | 220 +++++++++--------- packages/theme/src/link-menu/index.less | 42 +--- packages/theme/src/option/index.less | 9 +- packages/theme/src/tree/index.less | 1 - packages/vue/src/date-picker/src/index.ts | 2 +- packages/vue/src/date-range/src/pc.vue | 26 +-- packages/vue/src/grid/src/table/src/table.ts | 3 +- packages/vue/src/image-viewer/src/pc.vue | 2 +- packages/vue/src/image/src/pc.vue | 5 +- packages/vue/src/option/src/pc.vue | 8 +- .../vue/src/rich-text-editor/package.json | 5 +- packages/vue/src/tree/src/tree-node.vue | 6 +- 31 files changed, 233 insertions(+), 238 deletions(-) diff --git a/examples/sites/demos/pc/app/tree/node-key.vue b/examples/sites/demos/pc/app/tree/node-key.vue index 955fe70c9..cb808b17d 100644 --- a/examples/sites/demos/pc/app/tree/node-key.vue +++ b/examples/sites/demos/pc/app/tree/node-key.vue @@ -44,7 +44,7 @@ - + diff --git a/examples/sites/package.json b/examples/sites/package.json index 684d8ac42..4594b2fe2 100644 --- a/examples/sites/package.json +++ b/examples/sites/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/vue-docs", - "version": "2.1.5", + "version": "2.1.6", "scripts": { "start": "vite", "start:saas": "vite --mode saas", @@ -40,7 +40,7 @@ "marked": "^4.3.0", "@playwright/test": "^1.29.2", "sortablejs": "1.15.0", - "@opentiny/vue-repl": "^1.0.2" + "@opentiny/vue-repl": "^1.1.0" }, "devDependencies": { "@opentiny-internal/unplugin-virtual-template": "workspace:~", diff --git a/examples/sites/playground.html b/examples/sites/playground.html index 14fd0cc76..bbe3d1190 100644 --- a/examples/sites/playground.html +++ b/examples/sites/playground.html @@ -5,6 +5,10 @@ Vite + Vue +
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue index 385efa4bb..ec5db0dca 100644 --- a/examples/sites/playground/App.vue +++ b/examples/sites/playground/App.vue @@ -13,8 +13,7 @@ import Share from './icons/Share.vue' const versions = ['3.11', '3.10', '3.9', '3.8'] const latestVersion = versions[0] -const cdnHost = 'https://unpkg.com' -window.localStorage.setItem('setting-cdn', cdnHost) +const cdnHost = window.localStorage.getItem('setting-cdn') const searchObj = new URLSearchParams(location.search) const tinyMode = searchObj.get('mode') diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue index f0f5d2fff..c84f3abaa 100644 --- a/examples/sites/src/views/components/components.vue +++ b/examples/sites/src/views/components/components.vue @@ -64,7 +64,7 @@ - {{ row.name }} + {{ row.name }} {{ row.name }} @@ -261,6 +261,13 @@ export default defineComponent({ copyText: (text) => { navigator.clipboard.writeText(text) }, + jumpToDemo: (demoId) => { + if (demoId.startsWith('chart') || demoId.startsWith('grid')) { + router.push(demoId) + } else { + router.push(`#${demoId}`) + } + }, handleApiClick: (ev) => { if (ev.target.tagName === 'A') { ev.preventDefault() diff --git a/examples/sites/vite.config.ts b/examples/sites/vite.config.ts index a284283d1..07fd96eac 100644 --- a/examples/sites/vite.config.ts +++ b/examples/sites/vite.config.ts @@ -69,9 +69,6 @@ export default defineConfig((config) => { targets: copyTarget }) ], - define: { - 'process.env': {} - }, optimizeDeps: getOptimizeDeps(3), build: { rollupOptions: { @@ -116,5 +113,11 @@ export default defineConfig((config) => { } } + if (env.NODE_ENV === 'development') { + viteConfig.define = { + 'process.env': {} + } + } + return viteConfig }) diff --git a/packages/renderless/src/common/deps/tree-model/node.ts b/packages/renderless/src/common/deps/tree-model/node.ts index d803ce982..042f92dae 100644 --- a/packages/renderless/src/common/deps/tree-model/node.ts +++ b/packages/renderless/src/common/deps/tree-model/node.ts @@ -16,6 +16,7 @@ import { indexOf } from '../../array' import { hasOwn, typeOf } from '../../type' const defaultChildrenKey = 'children' +const defaultIsLeafKey = 'isLeaf' const getPropertyFromData = (node, prop) => { const props = node.store.props @@ -101,7 +102,7 @@ export default class Node { const props = store.props if (props && typeof props.isLeaf !== 'undefined') { - const isLeaf = getPropertyFromData(this, 'isLeaf') + const isLeaf = getPropertyFromData(this, defaultIsLeafKey) if (typeof isLeaf === 'boolean') { this.isLeafByUser = isLeaf @@ -140,6 +141,7 @@ export default class Node { if (store.defaultExpandAll) { this.expanded = true + this.updateMethod(this, 'expanded') } } else if (level > 0 && store.lazy && store.defaultExpandAll) { this.expand() @@ -156,21 +158,19 @@ export default class Node { this.text = null this.data = null this.parent = null + this.updateMethod = () => {} Object.keys(options).forEach((key) => { if (hasOwn.call(options, key)) { this[key] = options[key] } }) - this.isLeaf = !!(this.data && this.data.isLeaf) + const isLeafKey = this.store?.props?.isLeaf || defaultIsLeafKey + this.isLeaf = !!(this.data && this.data[isLeafKey]) this.loaded = false this.loading = false this.childNodes = [] - this.level = 0 - - if (this.parent) { - this.level = this.parent.level + 1 - } + this.level = this.parent ? this.parent.level + 1 : 0 } expandByDefaultKeys() { @@ -376,11 +376,13 @@ export default class Node { while (parentNode.level > 0) { parentNode.expanded = true + parentNode.updateMethod(parentNode, 'expanded') parentNode = parentNode.parent } } this.expanded = true + this.updateMethod(this, 'expanded') callback && callback() } @@ -408,6 +410,7 @@ export default class Node { collapse() { this.expanded = false + this.updateMethod(this, 'expanded') } shouldLoadData() { diff --git a/packages/renderless/src/image-viewer/index.ts b/packages/renderless/src/image-viewer/index.ts index e49240f14..fb763453c 100644 --- a/packages/renderless/src/image-viewer/index.ts +++ b/packages/renderless/src/image-viewer/index.ts @@ -467,10 +467,14 @@ export const getImageWidth = } state.imageList = vm.$refs.viewerItem - } else { + } else if (mode === 'mobile') { imageW = parent.$el.querySelector('.tiny-mobile-image-viewer__canvas').offsetWidth state.imageList = parent.$el.querySelectorAll('.tiny-mobile-image-viewer__item') + } else { + imageW = parent.$el.querySelector('.tiny-image-viewer__canvas').offsetWidth + + state.imageList = parent.$el.querySelectorAll('.tiny-image-viewer__img') } state.imageItemWidth = imageW diff --git a/packages/renderless/src/image/index.ts b/packages/renderless/src/image/index.ts index 19256dc3f..6d4cdd904 100644 --- a/packages/renderless/src/image/index.ts +++ b/packages/renderless/src/image/index.ts @@ -45,7 +45,6 @@ export const loadImage = () => { state.loading = true state.error = false - const img = new Image() img.onload = (event) => api.handleLoad(event, img) @@ -67,7 +66,6 @@ export const handleLoad = state.imageWidth = img.width state.imageHeight = img.height state.loading = false - emit('load', event) } diff --git a/packages/renderless/src/picker/index.ts b/packages/renderless/src/picker/index.ts index e8d6abc59..02678767b 100644 --- a/packages/renderless/src/picker/index.ts +++ b/packages/renderless/src/picker/index.ts @@ -16,6 +16,7 @@ import userPopper from '../common/deps/vue-popper' import { DATEPICKER } from '../common' import { formatDate, parseDate, isDateObject, getWeekNumber } from '../common/deps/date-util' import { extend } from '../common/object' +import { isFunction } from '../common/type' import globalTimezone from './timezone' const iso8601Reg = /^\d{4}-\d{2}-\d{2}(.)\d{2}:\d{2}:\d{2}(.+)$/ @@ -704,11 +705,15 @@ export const handleKeydown = } export const hidePicker = - ({ state }) => + ({ state, doDestroy }) => () => { if (state.picker) { state.picker.resetView && state.picker.resetView() state.pickerVisible = state.picker.visible = state.picker.state.visible = false + + if (isFunction(doDestroy)) { + doDestroy() + } } } diff --git a/packages/renderless/src/picker/vue.ts b/packages/renderless/src/picker/vue.ts index ed8d120c2..1efd2fcb9 100644 --- a/packages/renderless/src/picker/vue.ts +++ b/packages/renderless/src/picker/vue.ts @@ -143,7 +143,7 @@ const initState = ({ api, reactive, vm, computed, props, utils, parent }) => { const initApi = ({ api, props, hooks, state, vnode, others, utils }) => { const { t, emit, dispatch, nextTick, vm } = vnode const { TimePanel, TimeRangePanel } = others - const { destroyPopper, popperElm, updatePopper } = initPopper({ props, hooks, vnode }) + const { destroyPopper, popperElm, updatePopper, doDestroy } = initPopper({ props, hooks, vnode }) state.popperElm = popperElm state.picker = null @@ -151,7 +151,7 @@ const initApi = ({ api, props, hooks, state, vnode, others, utils }) => { Object.assign(api, { destroyPopper, emitDbTime: emitDbTime({ emit, state, t }), - hidePicker: hidePicker({ state }), + hidePicker: hidePicker({ state, doDestroy }), handleSelectChange: ({ tz, date }) => emit('select-change', { tz, date }), getPanel: getPanel(others), handleFocus: handleFocus({ emit, vm, state }), diff --git a/packages/renderless/src/tabs/index.ts b/packages/renderless/src/tabs/index.ts index e3de2f84c..903c21c9c 100644 --- a/packages/renderless/src/tabs/index.ts +++ b/packages/renderless/src/tabs/index.ts @@ -62,13 +62,7 @@ export const calcPaneInstances = /* istanbul ignore */ export const calcMorePanes = - ({ - parent, - props, - state, - refs, - nextTick - }: Pick) => + ({ parent, props, state, refs }: Pick) => () => { if (!props.showMoreTabs) { return @@ -79,26 +73,22 @@ export const calcMorePanes = const tabNavRefs = refs.nav.$refs if (tabs && tabs.length) { - nextTick(() => { - nextTick(() => { - let tabsAllWidth = 0 - for (let i = 0; i < tabs.length; i++) { - const tabItem = tabs[i] as HTMLElement - // 遮住元素一半则隐藏 - tabsAllWidth = tabItem.offsetLeft + tabItem.offsetWidth / 2 - const tabsHeaderWidth = tabNavRefs.navScroll.offsetWidth - const currentName = Number(state.currentName) - if (tabsAllWidth > tabsHeaderWidth && currentName >= 0) { - if (currentName >= i + 1) { - state.showPanesCount = currentName - 0 - } else { - state.showPanesCount = i - } - break - } + let tabsAllWidth = 0 + for (let i = 0; i < tabs.length; i++) { + const tabItem = tabs[i] as HTMLElement + // 遮住元素一半则隐藏 + tabsAllWidth = tabItem.offsetLeft + tabItem.offsetWidth / 2 + const tabsHeaderWidth = tabNavRefs.navScroll.offsetWidth + const currentName = Number(state.currentName || 0) + if (tabsAllWidth > tabsHeaderWidth && currentName >= 0) { + if (currentName >= i + 1) { + state.showPanesCount = currentName - 0 + } else { + state.showPanesCount = i } - }) - }) + break + } + } } } diff --git a/packages/renderless/src/tabs/vue.ts b/packages/renderless/src/tabs/vue.ts index 1761810e4..7a3b76b1e 100644 --- a/packages/renderless/src/tabs/vue.ts +++ b/packages/renderless/src/tabs/vue.ts @@ -111,7 +111,7 @@ export const renderless = ( handleTabRemove: handleTabRemove(emit), changeDirection: changeDirection({ props, state }), changeCurrentName: changeCurrentName({ emit, state }), - calcMorePanes: calcMorePanes({ parent, props, state, refs, nextTick }), + calcMorePanes: calcMorePanes({ parent, props, state, refs }), calcExpandPanes: calcExpandPanes({ parent, props, state }), calcPaneInstances: calcPaneInstances({ constants, parent, state, childrenHandler }), handleTabDragStart: handleTabDragStart({ emit }), diff --git a/packages/renderless/src/tree-node/index.ts b/packages/renderless/src/tree-node/index.ts index 47e34c0ed..1e810afcd 100644 --- a/packages/renderless/src/tree-node/index.ts +++ b/packages/renderless/src/tree-node/index.ts @@ -301,9 +301,9 @@ export const onSiblingToggleExpand = export const watchExpandedChange = ({ state, props }) => - (value) => { + () => { state.parentEmitter.emit('sibling-node-toggle-expand', { - isExpand: value, + isExpand: props.node.expanded, sibling: props.node }) } diff --git a/packages/renderless/src/tree-node/vue.ts b/packages/renderless/src/tree-node/vue.ts index 251072acd..91488a04d 100644 --- a/packages/renderless/src/tree-node/vue.ts +++ b/packages/renderless/src/tree-node/vue.ts @@ -10,6 +10,7 @@ * */ +import debounce from '../common/deps/debounce' import { created, handleDragEnd, @@ -89,7 +90,7 @@ const initApi = ({ api, state, dispatch, broadcast, vm, props, parent, treeRoot, state, dispatch, broadcast, - watchExpanded: watchExpanded({ state }), + watchExpanded: debounce(20, watchExpanded({ state })), created: created({ props, state }), getNodeKey: getNodeKey(state), closeMenu: closeMenu(state), @@ -131,7 +132,8 @@ const initWatcher = ({ watch, state, api, props }) => { export const renderless = ( props, { reactive, watch, inject, provide, computed }, - { parent: parentVm, vm, nextTick, emit, broadcast, dispatch, emitter, designConfig } + { parent: parentVm, vm, nextTick, emit, broadcast, dispatch, emitter, designConfig }, + { isVue2 } ) => { const api = {} const parent = inject('parentTree') || parentVm @@ -153,6 +155,12 @@ export const renderless = ( props.node.updateChildren() } ) + + if (!isVue2) { + props.node.updateMethod = (node, field) => { + field === 'expanded' && api.watchExpanded(node[field]) + } + } }) state.parentEmitter.on('closeMenu', () => { diff --git a/packages/renderless/src/tree/vue.ts b/packages/renderless/src/tree/vue.ts index d9ab22174..832a1a04b 100644 --- a/packages/renderless/src/tree/vue.ts +++ b/packages/renderless/src/tree/vue.ts @@ -139,7 +139,7 @@ const initState = ({ reactive, emitter, props, computed, api }) => { treeItems: null, currentNode: null, checkboxItems: [], - isEmpty: false, + isEmpty: computed(() => api.computedIsEmpty(props, state)), emitter: emitter(), expandIcon: props.expandIcon, shrinkIcon: props.shrinkIcon, @@ -255,14 +255,7 @@ const initWatcher = ({ watch, props, api, state }) => { { immediate: true } ) - watch( - () => state.root, - () => { - state.isEmpty = api.computedIsEmpty(props, state) - api.initPlainNodeStore() - }, - { deep: true } - ) + watch(() => state.root, api.initPlainNodeStore, { deep: true }) } export const renderless = ( diff --git a/packages/theme-saas/src/date-picker/index.less b/packages/theme-saas/src/date-picker/index.less index bac505f78..f0f2d5a8b 100644 --- a/packages/theme-saas/src/date-picker/index.less +++ b/packages/theme-saas/src/date-picker/index.less @@ -112,7 +112,7 @@ @apply table-cell; padding: 0 5px; - &:first-child:before { + &:first-child::before { @apply content-['']; @apply h-6; @apply absolute; diff --git a/packages/theme-saas/src/picker/index.less b/packages/theme-saas/src/picker/index.less index 87160c5aa..266e24afb 100644 --- a/packages/theme-saas/src/picker/index.less +++ b/packages/theme-saas/src/picker/index.less @@ -4,7 +4,6 @@ .@{date-container-prefix-cls} { @apply relative; - @apply inline-block; } .@{date-editor-prefix-cls} { diff --git a/packages/theme/src/date-table/index.less b/packages/theme/src/date-table/index.less index 3f3a93c98..cf6c35099 100644 --- a/packages/theme/src/date-table/index.less +++ b/packages/theme/src/date-table/index.less @@ -75,6 +75,7 @@ box-sizing: border-box; text-align: center; cursor: pointer; + vertical-align: middle; position: relative; div { diff --git a/packages/theme/src/image-viewer/index.less b/packages/theme/src/image-viewer/index.less index a34ecf55b..ec63de376 100644 --- a/packages/theme/src/image-viewer/index.less +++ b/packages/theme/src/image-viewer/index.less @@ -15,122 +15,120 @@ @import './vars.less'; @image-viewer-prefix-cls: ~'@{css-prefix}image-viewer'; -@image-prefix-cls: ~'@{css-prefix}image'; -.@{image-prefix-cls} { +.@{image-viewer-prefix-cls} { .component-css-vars-image-viewer(); - .@{image-viewer-prefix-cls} { - &__wrapper { - background: var(--ti-image-viewer-mask-wrap-bg-color); - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - &__btn { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - opacity: var(--ti-image-viewer-btn-opacity); - box-sizing: border-box; - .user-select(none); + &__wrapper { + background: var(--ti-image-viewer-mask-wrap-bg-color); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } - svg { - fill: var(--ti-image-viewer-text-color); - } - } + &__btn { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + opacity: var(--ti-image-viewer-btn-opacity); + box-sizing: border-box; + .user-select(none); - &__close { - top: var(--ti-image-viewer-close-top); - right: var(--ti-image-viewer-close-right); - width: var(--ti-image-viewer-close-width); - height: var(--ti-image-viewer-close-height); - font-size: var(--ti-image-viewer-close-font-size); - background-color: var(--ti-image-viewer-close-bg-color); - - &:hover { - cursor: pointer; - background-color: var(--ti-image-viewer-close-bg-color-hover); - } - } - - &__canvas { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - &__actions { - left: 50%; - bottom: var(--ti-image-viewer-actions-bottom); - transform: translateX(-50%); - width: var(--ti-image-viewer-actions-width); - height: var(--ti-image-viewer-actions-height); - padding: 0 23px; - background-color: var(--ti-image-viewer-close-bg-color); - border-radius: var(--ti-image-viewer-actions-border-radius); - } - - &__actions-inner { - width: 100%; - height: 100%; - text-align: justify; - cursor: default; - font-size: var(--ti-image-viewer-actions-inner-font-size); - display: flex; - align-items: center; - justify-content: var(--ti-image-viewer-actions-inner-justify-content); - - svg { - fill: var(--ti-image-viewer-actions-inner-text-color); - margin-right: 20px; - - &:hover { - cursor: pointer; - } - } - } - - &__next, - &__prev { - top: 50%; - width: var(--ti-image-viewer-next-width); - height: var(--ti-image-viewer-next-height); - font-size: var(--ti-image-viewer-next-font-size); - background-color: var(--ti-image-viewer-close-bg-color); - - &:hover { - cursor: pointer; - background-color: var(--ti-image-viewer-close-bg-color-hover); - } - } - - &__prev { - transform: translateY(-50%); - left: 40px; - } - - &__next { - transform: translateY(-50%); - right: 40px; - text-indent: 2px; - } - - &__mask { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - opacity: 0.5; - background: var(--ti-image-viewer-mask-bg-color); + svg { + fill: var(--ti-image-viewer-text-color); } } + + &__close { + top: var(--ti-image-viewer-close-top); + right: var(--ti-image-viewer-close-right); + width: var(--ti-image-viewer-close-width); + height: var(--ti-image-viewer-close-height); + font-size: var(--ti-image-viewer-close-font-size); + background-color: var(--ti-image-viewer-close-bg-color); + + &:hover { + cursor: pointer; + background-color: var(--ti-image-viewer-close-bg-color-hover); + } + } + + &__canvas { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + &__actions { + left: 50%; + bottom: var(--ti-image-viewer-actions-bottom); + transform: translateX(-50%); + width: var(--ti-image-viewer-actions-width); + height: var(--ti-image-viewer-actions-height); + padding: 0 23px; + background-color: var(--ti-image-viewer-close-bg-color); + border-radius: var(--ti-image-viewer-actions-border-radius); + } + + &__actions-inner { + width: 100%; + height: 100%; + text-align: justify; + cursor: default; + font-size: var(--ti-image-viewer-actions-inner-font-size); + display: flex; + align-items: center; + justify-content: var(--ti-image-viewer-actions-inner-justify-content); + + svg { + fill: var(--ti-image-viewer-actions-inner-text-color); + margin-right: 20px; + + &:hover { + cursor: pointer; + } + } + } + + &__next, + &__prev { + top: 50%; + width: var(--ti-image-viewer-next-width); + height: var(--ti-image-viewer-next-height); + font-size: var(--ti-image-viewer-next-font-size); + background-color: var(--ti-image-viewer-close-bg-color); + + &:hover { + cursor: pointer; + background-color: var(--ti-image-viewer-close-bg-color-hover); + } + } + + &__prev { + transform: translateY(-50%); + left: 40px; + } + + &__next { + transform: translateY(-50%); + right: 40px; + text-indent: 2px; + } + + &__mask { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + opacity: 0.5; + background: var(--ti-image-viewer-mask-bg-color); + } } diff --git a/packages/theme/src/link-menu/index.less b/packages/theme/src/link-menu/index.less index a190a67bd..72e4d5616 100644 --- a/packages/theme/src/link-menu/index.less +++ b/packages/theme/src/link-menu/index.less @@ -132,8 +132,12 @@ } &.@{link-menu-prefix-cls}__overflow { - .tree-node { - width: calc(100% - 36px); + .tiny-tree-node__content-box { + width: 100%; + + .tree-node { + width: calc(100% - 36px); + } } .tree-node-name { @@ -144,44 +148,16 @@ } &.@{link-menu-prefix-cls}__wrap { - .@{tree-node-prefix-cls}__content { - height: auto; - padding: 2px 0; - display: flex; - justify-content: flex-start; - align-items: center; - - .@{tree-node-prefix-cls}__expand-icon { - transform: translateY(-3px); - - &.expanded { - transform: translateY(-3px) rotate(90deg); - } - } - - .tree-node { - width: 100%; - } - } - - .tree-node-body { - display: flex; - justify-content: flex-start; - align-items: flex-start; - text-decoration: none; - - .@{svg-prefix-cls} { - flex-shrink: 0; - transform: translateY(2px); - } + .tree-node { + width: calc(100% - 36px); } .tree-node-name { + width: 100%; display: inline-block; white-space: normal; line-height: normal; word-break: break-word; - transform: translateY(-2px); } } } diff --git a/packages/theme/src/option/index.less b/packages/theme/src/option/index.less index f843ffc2f..78ffee377 100644 --- a/packages/theme/src/option/index.less +++ b/packages/theme/src/option/index.less @@ -37,9 +37,9 @@ background-color: var(--ti-option-disabled-bg-color); } } - > :first-child{ + .@{option-prefix-cls}__checkbox-wrap { color: var(--ti-option-selected-text-color); - } + } } } } @@ -77,7 +77,8 @@ .@{checkbox-prefix-cls}__inner { border-color: var(--ti-option-checkbox-border-color-hover); } - .halfselect, .checked-sur{ + .halfselect, + .checked-sur { .@{checkbox-prefix-cls}__inner { border-color: var(--ti-option-checkbox-all-select-border-color-hover); } @@ -114,4 +115,4 @@ &.memorize-highlight.selected { color: var(--ti-option-highlight-selected-text-color); } -} \ No newline at end of file +} diff --git a/packages/theme/src/tree/index.less b/packages/theme/src/tree/index.less index c738a9c75..a233989a4 100644 --- a/packages/theme/src/tree/index.less +++ b/packages/theme/src/tree/index.less @@ -201,7 +201,6 @@ .@{tree-node-prefix-cls} { white-space: nowrap; outline: 0; - overflow: hidden; // 连接线 &.show-line { diff --git a/packages/vue/src/date-picker/src/index.ts b/packages/vue/src/date-picker/src/index.ts index 5a087a806..e975c0539 100644 --- a/packages/vue/src/date-picker/src/index.ts +++ b/packages/vue/src/date-picker/src/index.ts @@ -64,7 +64,7 @@ const $props = { export const datePickerProps = { ...$props, type: { - type: Object as PropType< + type: String as PropType< | 'date' | 'dates' | 'daterange' diff --git a/packages/vue/src/date-range/src/pc.vue b/packages/vue/src/date-range/src/pc.vue index 9aeb3756c..9d940f34a 100644 --- a/packages/vue/src/date-range/src/pc.vue +++ b/packages/vue/src/date-range/src/pc.vue @@ -119,10 +119,10 @@
{{ state.leftLabel }}
@@ -173,7 +173,7 @@ :class="{ 'is-disabled': !state.enableYearArrow }" class="tiny-picker-panel__icon-btn tiny-icon-d-arrow-left" > - +
{{ state.rightLabel }}
@@ -238,7 +238,7 @@ import TimePicker from '@opentiny/vue-time' import DateTable from '@opentiny/vue-date-table' import Input from '@opentiny/vue-input' import Button from '@opentiny/vue-button' -import { iconPagerLast, iconPagerFirst, iconPagerPrev, iconPagerNext } from '@opentiny/vue-icon' +import { iconDoubleRight, iconDoubleLeft, iconChevronLeft, iconChevronRight } from '@opentiny/vue-icon' const $constants = { startDate: new Date('1970-01-01'), @@ -252,10 +252,10 @@ export default defineComponent({ DateTable, TinyInput: Input, TinyButton: Button, - IconPagerLast: iconPagerLast(), - IconPagerFirst: iconPagerFirst(), - IconPagerPrev: iconPagerPrev(), - IconPagerNext: iconPagerNext() + IconDoubleRight: iconDoubleRight(), + IconDoubleLeft: iconDoubleLeft(), + IconChevronLeft: iconChevronLeft(), + IconChevronRight: iconChevronRight(), }, props: { _constants: { diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts index cb1a97cf7..acbfa355e 100644 --- a/packages/vue/src/grid/src/table/src/table.ts +++ b/packages/vue/src/grid/src/table/src/table.ts @@ -435,7 +435,6 @@ const gridData = { groupFolds: [], // 所有列已禁用 headerCheckDisabled: false, - id: uniqueId(), // 是否全选 isAllSelected: false, // 多选属性，有选中且非全选状态 @@ -741,7 +740,7 @@ export default { } }, data() { - return extend(true, {}, gridData) + return extend(true, { id: uniqueId() }, gridData) }, computed: { bodyCtxMenu() { diff --git a/packages/vue/src/image-viewer/src/pc.vue b/packages/vue/src/image-viewer/src/pc.vue index eef63a7d1..912679868 100644 --- a/packages/vue/src/image-viewer/src/pc.vue +++ b/packages/vue/src/image-viewer/src/pc.vue @@ -11,7 +11,7 @@ -->