forked from opentiny/tiny-vue
fix components bug and update docs (#700)
* 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 <kagol@sina.com> 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: 黄怡林 <huangyilin16@qq.com>
This commit is contained in:
ajaxzheng
GitHub
parent
716335e827
commit
175d849f5d
|
|
@ -44,7 +44,7 @@
|
|||
</tiny-col>
|
||||
</tiny-row>
|
||||
|
||||
<tiny-tree :data="data" ref="tree" node-key="id"></tiny-tree>
|
||||
<tiny-tree :data="data" ref="tree" default-expand-all node-key="id"></tiny-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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:~",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@
|
|||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<script>
|
||||
const cdnHost = 'https://unpkg.com'
|
||||
window.localStorage.setItem('setting-cdn', cdnHost)
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
<tbody>
|
||||
<tr v-for="row in oneApiArr" :key="row.name">
|
||||
<td>
|
||||
<a v-if="row.demoId" :href="`#${row.demoId}`">{{ row.name }}</a>
|
||||
<a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</td>
|
||||
<td v-if="!key.includes('slots')"><span v-html="row.type"></span></td>
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }),
|
||||
|
|
|
|||
|
|
@ -62,13 +62,7 @@ export const calcPaneInstances =
|
|||
|
||||
/* istanbul ignore */
|
||||
export const calcMorePanes =
|
||||
({
|
||||
parent,
|
||||
props,
|
||||
state,
|
||||
refs,
|
||||
nextTick
|
||||
}: Pick<ITabsRenderlessParams, 'parent' | 'props' | 'state' | 'refs' | 'nextTick'>) =>
|
||||
({ parent, props, state, refs }: Pick<ITabsRenderlessParams, 'parent' | 'props' | 'state' | 'refs'>) =>
|
||||
() => {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
|
|
@ -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 = (
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
@apply table-cell;
|
||||
padding: 0 5px;
|
||||
|
||||
&:first-child:before {
|
||||
&:first-child::before {
|
||||
@apply content-[''];
|
||||
@apply h-6;
|
||||
@apply absolute;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
|
||||
.@{date-container-prefix-cls} {
|
||||
@apply relative;
|
||||
@apply inline-block;
|
||||
}
|
||||
|
||||
.@{date-editor-prefix-cls} {
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -201,7 +201,6 @@
|
|||
.@{tree-node-prefix-cls} {
|
||||
white-space: nowrap;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
// 连接线
|
||||
&.show-line {
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const $props = {
|
|||
export const datePickerProps = {
|
||||
...$props,
|
||||
type: {
|
||||
type: Object as PropType<
|
||||
type: String as PropType<
|
||||
| 'date'
|
||||
| 'dates'
|
||||
| 'daterange'
|
||||
|
|
|
|||
|
|
@ -119,10 +119,10 @@
|
|||
<div class="tiny-picker-panel__content tiny-date-range-picker__content is-left">
|
||||
<div class="tiny-date-range-picker__header">
|
||||
<button type="button" @click="leftPrevYear" class="tiny-picker-panel__icon-btn tiny-icon-d-arrow-left">
|
||||
<icon-pager-first></icon-pager-first>
|
||||
<icon-double-left></icon-double-left>
|
||||
</button>
|
||||
<button type="button" @click="leftPrevMonth" class="tiny-picker-panel__icon-btn tiny-icon-arrow-left">
|
||||
<icon-pager-prev></icon-pager-prev>
|
||||
<icon-chevron-left></icon-chevron-left>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
:class="{ 'is-disabled': !state.enableYearArrow }"
|
||||
class="tiny-picker-panel__icon-btn tiny-icon-d-arrow-right"
|
||||
>
|
||||
<icon-pager-last></icon-pager-last>
|
||||
<icon-double-right></icon-double-right>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
:class="{ 'is-disabled': !state.enableMonthArrow }"
|
||||
class="tiny-picker-panel__icon-btn tiny-icon-arrow-right"
|
||||
>
|
||||
<icon-pager-next></icon-pager-next>
|
||||
<icon-chevron-right></icon-chevron-right>
|
||||
</button>
|
||||
<div>{{ state.leftLabel }}</div>
|
||||
</div>
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
:class="{ 'is-disabled': !state.enableYearArrow }"
|
||||
class="tiny-picker-panel__icon-btn tiny-icon-d-arrow-left"
|
||||
>
|
||||
<icon-pager-first></icon-pager-first>
|
||||
<icon-double-left></icon-double-left>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -183,13 +183,13 @@
|
|||
:class="{ 'is-disabled': !state.enableMonthArrow }"
|
||||
class="tiny-picker-panel__icon-btn tiny-icon-arrow-left"
|
||||
>
|
||||
<icon-pager-prev></icon-pager-prev>
|
||||
<icon-chevron-left></icon-chevron-left>
|
||||
</button>
|
||||
<button type="button" @click="rightNextYear" class="tiny-picker-panel__icon-btn tiny-icon-d-arrow-right">
|
||||
<icon-pager-last></icon-pager-last>
|
||||
<icon-double-right></icon-double-right>
|
||||
</button>
|
||||
<button type="button" @click="rightNextMonth" class="tiny-picker-panel__icon-btn tiny-icon-arrow-right">
|
||||
<icon-pager-next></icon-pager-next>
|
||||
<icon-chevron-right></icon-chevron-right>
|
||||
</button>
|
||||
<div>{{ state.rightLabel }}</div>
|
||||
</div>
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
-->
|
||||
<template>
|
||||
<transition name="viewer-fade">
|
||||
<div class="tiny-image-viewer__wrapper" :style="{ 'z-index': state.zIndex }" @mousewheel.prevent>
|
||||
<div class="tiny-image-viewer tiny-image-viewer__wrapper" :style="{ 'z-index': state.zIndex }" @mousewheel.prevent>
|
||||
<div class="tiny-image-viewer__mask"></div>
|
||||
<!-- CLOSE -->
|
||||
<span class="tiny-image-viewer__btn tiny-image-viewer__close" @click="hide">
|
||||
|
|
|
|||
|
|
@ -43,13 +43,14 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { renderless, api } from '@opentiny/vue-renderless/image/vue'
|
||||
import { props, setup, defineComponent } from '@opentiny/vue-common'
|
||||
import { props, setup, defineComponent, Teleport } from '@opentiny/vue-common'
|
||||
import ImageViewer from '@opentiny/vue-image-viewer'
|
||||
import type { IImageApi } from '@opentiny/vue-renderless/types/image.type'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ImageViewer
|
||||
ImageViewer,
|
||||
Teleport
|
||||
},
|
||||
emits: ['load', 'error', 'delete'],
|
||||
props: [...props, 'src', 'fit', 'lazy', 'scrollContainer', 'previewSrcList', 'zIndex'],
|
||||
|
|
|
|||
|
|
@ -28,11 +28,15 @@
|
|||
highlightClass
|
||||
]"
|
||||
>
|
||||
<span v-if="state.select.multiple && (state.select.optimization || !state.select.state.multipleLimit)">
|
||||
<span
|
||||
v-if="state.select.multiple && (state.select.optimization || !state.select.state.multipleLimit)"
|
||||
class="tiny-option__checkbox-wrap"
|
||||
>
|
||||
<tiny-checkbox
|
||||
:model-value="state.itemSelected"
|
||||
:disabled="disabled || state.groupDisabled || state.limitReached"
|
||||
></tiny-checkbox>
|
||||
>
|
||||
</tiny-checkbox>
|
||||
</span>
|
||||
<slot>
|
||||
<span>{{ state.currentLabel }}</span>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@
|
|||
"name": "@opentiny/vue-rich-text-editor",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"main": "lib/index.js",
|
||||
"module": "index.ts",
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -219,8 +219,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="tsx">
|
||||
import { setup, directive, h } from '@opentiny/vue-common'
|
||||
<script lang="ts">
|
||||
import { setup, directive, h, isVue2 } from '@opentiny/vue-common'
|
||||
import { renderless, api } from '@opentiny/vue-renderless/tree-node/vue'
|
||||
import CollapseTransition from '@opentiny/vue-collapse-transition'
|
||||
import {
|
||||
|
|
@ -348,7 +348,7 @@ export default {
|
|||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api, mono: true })
|
||||
return setup({ props, context, renderless, api, mono: true, extendOptions: { isVue2 } })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue