diff --git a/packages/fineui/package.json b/packages/fineui/package.json index 0bd7ddf2e..f467aa097 100644 --- a/packages/fineui/package.json +++ b/packages/fineui/package.json @@ -1,6 +1,6 @@ { "name": "@fui/core", - "version": "3.0.20230727164622", + "version": "3.0.20231204103846", "description": "fineui", "main": "dist/fineui.min.js", "module": "dist/lib/index.js", diff --git a/packages/fineui/src/base/collection/collection.js b/packages/fineui/src/base/collection/collection.js index 2019bfa7a..9f933ed20 100644 --- a/packages/fineui/src/base/collection/collection.js +++ b/packages/fineui/src/base/collection/collection.js @@ -124,6 +124,12 @@ export class CollectionView extends Widget { this.element.scrollLeft(scrollLeft); } } + + destroyed() { + each(this.renderedCells, (i, cell) => { + cell.el._destroy(); + }); + } _calculateSizeAndPositionData() { const { items, cellSizeAndPositionGetter } = this.options; diff --git a/packages/fineui/src/base/combination/bubble.js b/packages/fineui/src/base/combination/bubble.js index c78fcf111..af3da3cef 100644 --- a/packages/fineui/src/base/combination/bubble.js +++ b/packages/fineui/src/base/combination/bubble.js @@ -520,6 +520,7 @@ export class Bubble extends Widget { this.combo.setValue(v); if (isNull(this.popupView)) { this.options.popup.value = v; + !isNull(this.options.popup.el) && (this.options.popup.el.value = v); } else { this.popupView.setValue(v); } diff --git a/packages/fineui/src/base/list/listview.js b/packages/fineui/src/base/list/listview.js index ae1add7fb..29162ff54 100644 --- a/packages/fineui/src/base/list/listview.js +++ b/packages/fineui/src/base/list/listview.js @@ -111,11 +111,6 @@ export class ListView extends Widget { } } _calculateBlocksToRender() { - // BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。 - // 这样从不可见状态变为可见状态能够重新触发线段树初始化 - if (!this.element.is(":visible")) { - return; - } this._renderMoreIf(); } diff --git a/packages/fineui/src/case/colorchooser/colorchooser.trigger.long.js b/packages/fineui/src/case/colorchooser/colorchooser.trigger.long.js index 73c9e2a88..8460e5f09 100644 --- a/packages/fineui/src/case/colorchooser/colorchooser.trigger.long.js +++ b/packages/fineui/src/case/colorchooser/colorchooser.trigger.long.js @@ -27,6 +27,7 @@ export class LongColorChooserTrigger extends Trigger { } _init() { + const {height} = this.options; super._init(...arguments); this.colorContainer = createWidget({ type: HTapeLayout.xtype, @@ -51,7 +52,7 @@ export class LongColorChooserTrigger extends Trigger { }, textAlign: "left", hgap: 5, - height: 18, + height: height - 4, text: i18nText("BI-Basic_Auto"), }, } diff --git a/packages/fineui/src/core/2.base.js b/packages/fineui/src/core/2.base.js index 23fc68095..3bbf2d00d 100644 --- a/packages/fineui/src/core/2.base.js +++ b/packages/fineui/src/core/2.base.js @@ -912,7 +912,8 @@ export const delay = lodashFns.delay; export const defer = lodashFns.defer; export const wrap = lodashFns.wrap; -export const nextTick = (function () { + +export let nextTick = /*!PURE*/(function () { const callbacks = []; let pending = false; let timerFunc = void 0; @@ -971,7 +972,7 @@ export const nextTick = (function () { pending = true; timerFunc(); } - // $flow-disable-line + if (!cb && typeof Promise !== "undefined") { return new Promise((resolve, reject) => { _resolve = resolve; @@ -980,6 +981,10 @@ export const nextTick = (function () { }; })(); +export const setNextTick = (fn) => { + nextTick = fn; +} + // 数字相关方法 _.each(["random"], name => { lodashFns[name] = _apply(name); diff --git a/packages/fineui/src/core/4.widget.js b/packages/fineui/src/core/4.widget.js index 826cc5f84..c8fbe5d2f 100644 --- a/packages/fineui/src/core/4.widget.js +++ b/packages/fineui/src/core/4.widget.js @@ -868,13 +868,13 @@ export class Widget extends OB { callLifeHook(this, "destroyed"); this.destroyed = null; this._isDestroyed = true; - // this._purgeRef(); // 清除ref的时机还是要仔细考虑一下 } _unMount() { this._assetMounted(); this.__destroy(); this.fireEvent(Events.UNMOUNT); + // this._purgeRef(); // 子组件unmount ref置为null了，父组件拿不到ref，导致报错 this.purgeListeners(); } diff --git a/packages/fineui/src/core/constant/writable.var.js b/packages/fineui/src/core/constant/writable.var.js index 4d4f90484..d8a503c29 100644 --- a/packages/fineui/src/core/constant/writable.var.js +++ b/packages/fineui/src/core/constant/writable.var.js @@ -1,51 +1,50 @@ /** * 可写的常量 */ -import { isNumber } from "../2.base"; +import { isNumber, nextTick, setNextTick } from "../2.base"; import { _global } from "../0.foundation"; import { Cache } from "../structure"; +import { Element, setElement } from "../element/element"; import { setDom, DOM } from "../utils"; const PropertyDescriptors = {}; +export function _defineVarProperties(libName) { + Object.defineProperties(libName, PropertyDescriptors); +} + +function addDescriptor(key, options) { + options.enumerable = options.enumerable === undefined ? true : options.enumerable; + options.configurable = options.configurable === undefined ? true : options.configurable; + PropertyDescriptors[key] = options; +} + export let EVENT_RESPONSE_TIME = 200; export const setEventResponseTime = v => { EVENT_RESPONSE_TIME = v; }; -PropertyDescriptors["EVENT_RESPONSE_TIME"] = { - enumerable: true, - configurable: true, - get: function() { - return EVENT_RESPONSE_TIME; - }, +addDescriptor("EVENT_RESPONSE_TIME", { + get: () => EVENT_RESPONSE_TIME, set: setEventResponseTime, -}; +}); export let pixUnit = "px"; export const setPixUnit = v => { pixUnit = v; }; -PropertyDescriptors["pixUnit"] = { - enumerable: true, - configurable: true, - get: function() { - return pixUnit; - }, +addDescriptor("pixUnit", { + get: () => pixUnit, set: setPixUnit, -}; +}); export let pixRatio = 1; export const setPixRatio = v => { pixRatio = v; }; -PropertyDescriptors["pixRatio"] = { - enumerable: true, - configurable: true, - get: function() { - return pixRatio; - }, +addDescriptor("pixRatio", { + get: () => pixRatio, set: setPixRatio, -}; +}); export let StartOfWeek = 1; export const setStartOfWeek = v => { @@ -55,27 +54,19 @@ export const setStartOfWeek = v => { } StartOfWeek = v; }; -PropertyDescriptors["StartOfWeek"] = { - enumerable: true, - configurable: true, - get: function() { - return StartOfWeek; - }, +addDescriptor("StartOfWeek", { + get: () => StartOfWeek, set: setStartOfWeek, -}; +}); export let BlankSplitChar = "\u200b \u200b"; export const setBlankSplitChar = v => { BlankSplitChar = v; }; -PropertyDescriptors["BlankSplitChar"] = { - enumerable: true, - configurable: true, - get: function() { - return BlankSplitChar; - }, +addDescriptor("BlankSplitChar", { + get: () => BlankSplitChar, set: setBlankSplitChar, -}; +}); // 一定返回最终的单位 export let pixFormat = (pix, border) => { @@ -95,14 +86,10 @@ export let pixFormat = (pix, border) => { export const setPixFormat = v => { pixFormat = v; }; -PropertyDescriptors["pixFormat"] = { - enumerable: true, - configurable: true, - get: function() { - return pixFormat; - }, +addDescriptor("pixFormat", { + get: () => pixFormat, set: setPixFormat, -}; +}); export let toPix = (pix, border) => { if (!isNumber(pix)) { @@ -120,14 +107,10 @@ export let toPix = (pix, border) => { export let setToPix = v => { toPix = v; }; -PropertyDescriptors["toPix"] = { - enumerable: true, - configurable: true, - get: function() { - return toPix; - }, +addDescriptor("toPix", { + get: () => toPix, set: setToPix, -}; +}); const getCacheItem = key => { Cache.getItem(key, { typeConversion: true, defaultValue: true }); @@ -137,24 +120,22 @@ export const setEventBlur = v => { EVENT_BLUR = v; Cache.setItem("event.blur", v); }; -PropertyDescriptors["EVENT_BLUR"] = { - enumerable: true, - configurable: true, - get: function() { - return EVENT_BLUR; - }, +addDescriptor("EVENT_BLUR", { + get: () => EVENT_BLUR, set: setEventBlur, -}; +}); + +addDescriptor("Element", { + get: () => Element, + set: setElement, +}); -PropertyDescriptors["DOM"] = { - enumerable: true, - configurable: true, - get: function() { - return DOM; - }, +addDescriptor("DOM", { + get: () => DOM, set: setDom, -}; +}); -export function _defineVarProperties(libName) { - Object.defineProperties(libName, PropertyDescriptors); -} +addDescriptor("nextTick", { + get: () => nextTick, + set: setNextTick, +}); \ No newline at end of file diff --git a/packages/fineui/src/core/element/element.js b/packages/fineui/src/core/element/element.js index 9b08c0762..111605ad3 100644 --- a/packages/fineui/src/core/element/element.js +++ b/packages/fineui/src/core/element/element.js @@ -1,76 +1,78 @@ import { registFunction } from "./plugins"; import { isWidget, isString } from "../2.base"; -export function Element(widget, attribs) { - this.l = this.r = this.t = this.b = 0; // 边框 - this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距 - this.position = {}; - this.classMap = {}; - this.classList = []; - this.children = []; - this.attribs = attribs || {}; - this.styles = {}; - // 兼容处理 - this["0"] = this; - this.style = {}; - if (!widget) { - this.nodeName = "body"; - this.position.x = 0; - this.position.y = 0; - this.attribs.id = "body"; - } else if (isWidget(widget)) { - this.widget = widget; - this.nodeName = widget.options.tagName; - this.textBaseLine = widget.options.textBaseLine; - } else if (isString(widget)) { - this.nodeName = widget; +export let Element = class { + constructor(widget, attribs) { + this.l = this.r = this.t = this.b = 0; // 边框 + this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距 + this.position = {}; + this.classMap = {}; + this.classList = []; + this.children = []; + this.attribs = attribs || {}; + this.styles = {}; + // 兼容处理 + this["0"] = this; + this.style = {}; + if (!widget) { + this.nodeName = "body"; + this.position.x = 0; + this.position.y = 0; + this.attribs.id = "body"; + } else if (isWidget(widget)) { + this.widget = widget; + this.nodeName = widget.options.tagName; + this.textBaseLine = widget.options.textBaseLine; + } else if (isString(widget)) { + this.nodeName = widget; + } } -} -initElement(Element); -registFunction(Element); + appendChild(child) { + child.parent = this; + if (this.children.push(child) !== 1) { + const sibling = this.children[this.children.length - 2]; + sibling.next = child; + child.prev = sibling; + child.next = null; + } + } + + append(child) { + child.parent = this; + if (this.children.push(child) !== 1) { + const sibling = this.children[this.children.length - 2]; + sibling.next = child; + child.prev = sibling; + child.next = null; + } + } -function initElement(element) { - element.prototype = { - appendChild(child) { - child.parent = this; - if (this.children.push(child) !== 1) { - const sibling = this.children[this.children.length - 2]; - sibling.next = child; - child.prev = sibling; - child.next = null; - } - }, - append(child) { - child.parent = this; - if (this.children.push(child) !== 1) { - const sibling = this.children[this.children.length - 2]; - sibling.next = child; - child.prev = sibling; - child.next = null; - } - }, - getParent() { - return this.parent; - }, - getSiblings() { - const parent = this.getParent(); - - return parent ? parent.getChildren() : [this]; - }, - getChildren() { - return this.children; - }, + getParent() { + return this.parent; + } - getBounds() { - return {}; - }, + getSiblings() { + const parent = this.getParent(); - width() { + return parent ? parent.getChildren() : [this]; + } - }, - height() { + getChildren() { + return this.children; + } + + getBounds() { + return {}; + } + + width() {} + + height() {} +} + +registFunction(Element); - }, - }; +export function setElement(element) { + Element = element; } diff --git a/packages/fineui/src/fix/fix.js b/packages/fineui/src/fix/fix.js index ddc37b044..c2f0ddd12 100644 --- a/packages/fineui/src/fix/fix.js +++ b/packages/fineui/src/fix/fix.js @@ -205,7 +205,7 @@ const nextTick = (function () { pending = true; timerFunc(); } - // $flow-disable-line + if (!cb && typeof Promise !== "undefined") { return new Promise((resolve, reject) => { _resolve = resolve; @@ -1380,10 +1380,13 @@ class Model { }); }); this._watchers && (this._watchers = []); + this._computedWatchers && (this._computedWatchers = []); this.destroyed && this.destroyed(); this.$$model = null; this.$$computed = null; this.$$state = null; + this.$$context = null; + this.model = null; this._destroyHandler && this._destroyHandler(); } } diff --git a/packages/fineui/src/less/base/single/button/button.less b/packages/fineui/src/less/base/single/button/button.less index 6d96e3c83..6f186ef0f 100644 --- a/packages/fineui/src/less/base/single/button/button.less +++ b/packages/fineui/src/less/base/single/button/button.less @@ -1,4 +1,5 @@ @import "../../../index.less"; + @hoverVal: opacity .3s ease; @activeVal: transform .5s ease, opacity 1s ease; @activeStopVal: transform 0s; @@ -6,6 +7,7 @@ body .bi-button, #body .bi-button { &.hack { .border-radius(0px); } + .border-radius(2px); outline: 0; border: 1px solid @color-bi-border-button; @@ -14,41 +16,51 @@ body .bi-button, #body .bi-button { text-align: center; vertical-align: middle; cursor: pointer; + &.loading { cursor: not-allowed; } + &.block { font-size: inherit; border-width: 0; .border-radius(0px); } + &.clear { font-size: inherit; border-width: 0; background-color: transparent; + &:hover, &:focus { .opacity(0.8); } + &:active { .opacity(1); } + &:after { display: none; } } + &.plain { font-size: inherit; border-width: 0; background-color: transparent; } + &.ghost { font-size: inherit; background-color: transparent; } + &.button-common { &, & .b-font:before { color: @color-bi-text-common-button; } + &.light { border-width: 0; background-color: @color-bi-background-common-light-button; @@ -65,81 +77,101 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-active-common-light-button; } } + &.clear, &.clear .b-font:before { color: @color-bi-text-common-clear-button; } + &.plain, &.plain .b-font:before { background-color: transparent; color: @color-bi-text-common-plain-button; } + &.plain { &:hover { background-color: @color-bi-background-hover-plain-button; } + &:focus { background-color: @color-bi-background-active-plain-button; } } + &.ghost { &, & .b-font:before { color: @color-bi-text-common-ghost-button; } + &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { color: @color-bi-text; background-color: @color-bi-background-hover-common-ghost-button; } + &:active { background-color: @color-bi-background-active-common-ghost-button; } } } + &.button-ignore { & { background-color: @color-bi-background-ignore-button; + &:not(.clear, .ghost) { border-color: @color-bi-border-ignore-button; } } + &:not(.clear, .ghost) { &, & .b-font:before { color: @color-bi-text-ignore-button; } } + &.clear { background-color: transparent; border-width: 0; } + &.ghost { &:hover, &:focus { border-color: @color-bi-border-ignore-button; + &, & .b-font:before { color: @color-bi-text-ignore-button; } } + background-color: transparent; border-color: @color-bi-border-dark-gray-line; } + &.plain, &.plain .b-font:before { background-color: transparent; color: @color-bi-text-ignore-plain-button; } + &.plain { &:hover { background-color: @color-bi-background-hover-plain-button; } + &:focus { background-color: @color-bi-background-active-plain-button; } } } + &.button-success { & { &, & .b-font:before { color: @color-bi-text-success-button; } + background-color: @color-bi-background-success-button; border-color: @color-bi-border-success-button; } + &.light { border-width: 0; background-color: @color-bi-background-success-light-button; @@ -156,47 +188,59 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-active-success-light-button; } } + &.clear { &, & .b-font:before { color: @color-bi-text-success-clear-button; } + background-color: transparent; border-width: 0; } + &.ghost { &, & .b-font:before { color: @color-bi-text-success-ghost-button; } + background-color: transparent; + &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { color: @color-bi-text; background-color: @color-bi-background-success-button; } + &:active { background-color: @color-bi-background-success-button; } } + &.plain, &.plain .b-font:before { background-color: transparent; color: @color-bi-text-success-plain-button; } + &.plain { &:hover { background-color: @color-bi-background-hover-plain-button; } + &:focus { background-color: @color-bi-background-active-plain-button; } } } + &.button-warning { & { &, & .b-font:before { color: @color-bi-text-warning-button; } + background-color: @color-bi-background-warning-button; border-color: @color-bi-border-warning-button; } + &.light { border-width: 0; background-color: @color-bi-background-warning-light-button; @@ -213,47 +257,59 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-active-warning-light-button; } } + &.clear { &, & .b-font:before { color: @color-bi-text-warning-clear-button; } + background-color: transparent; border-width: 0; } + &.ghost { &, & .b-font:before { color: @color-bi-text-warning-ghost-button; } + background-color: transparent; + &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { color: @color-bi-text; background-color: @color-bi-background-warning-button; } + &:active { background-color: @color-bi-background-warning-button; } } + &.plain, &.plain .b-font:before { background-color: transparent; color: @color-bi-text-warning-plain-button; } + &.plain { &:hover { background-color: @color-bi-background-hover-plain-button; } + &:focus { background-color: @color-bi-background-active-plain-button; } } } + &.button-error { & { &, & .b-font:before { color: @color-bi-text-error-button; } + background-color: @color-bi-background-error-button; border-color: @color-bi-border-error-button; } + &.light { border-width: 0; background-color: @color-bi-background-error-light-button; @@ -270,39 +326,49 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-active-error-light-button; } } + &.clear { &, & .b-font:before { color: @color-bi-text-error-clear-button; } + background-color: transparent; border-width: 0; } + &.ghost { &, & .b-font:before { color: @color-bi-text-error-ghost-button; } + background-color: transparent; + &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before { color: @color-bi-text; background-color: @color-bi-background-error-button; } + &:active { background-color: @color-bi-background-error-button; } } + &.plain, &.plain .b-font:before { background-color: transparent; color: @color-bi-text-error-plain-button; } + &.plain { &:hover { background-color: @color-bi-background-hover-plain-button; } + &:focus { background-color: @color-bi-background-active-plain-button; } } } + &.button-common.disabled, &.button-success.disabled, &.button-error.disabled, @@ -311,25 +377,30 @@ body .bi-button, #body .bi-button { &, & .b-font:before { color: @color-bi-text-disabled-button !important; } + background-color: fade(@color-bi-background-disabled-button, 20%) !important; @ieColor: argb(fade(@color-bi-background-disabled-button, 20%)); - filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; border-color: @color-bi-border-disabled-button !important; } + &:after { display: none; } } + &.button-ignore.disabled { &, & .b-font:before { color: @color-bi-text-disabled-ignore-button !important; } + background: @color-bi-background-disabled-ignore-button !important; border-color: @color-bi-border-disabled-ignore-button !important; + &:after { display: none; } } + &.button-common.disabled, &.button-success.disabled, &.button-warning.disabled, @@ -339,65 +410,81 @@ body .bi-button, #body .bi-button { &, & .b-font:before { color: @color-bi-text-disabled-ignore-clear-button !important; } + background: transparent !important; border-width: 0 !important; + &:hover, &:focus, &:active { .opacity(1); } } + &.plain { &, & .b-font:before { color: @color-bi-text-disabled-plain-clear-button !important; } + background: transparent !important; border-width: 0 !important; + &:hover, &:focus, &:active { .opacity(1); } } + &.ghost { &, & .b-font:before { // color: @color-bi-text-disabled-ignore-ghost-button !important; } + background: transparent !important; // border-color: @color-bi-border-disabled-ignore-ghost-button !important; .opacity(0.5); } } + &.button-ignore.disabled { &.ghost { .opacity(1); } } + &.button-common.disabled { &.ghost { &, & .b-font:before { color: @color-bi-text-disabled-common-ghost-button !important; } + border-color: @color-bi-border-disabled-common-ghost-button !important; } } + &.button-success.disabled { &.ghost { &, & .b-font:before { color: @color-bi-text-disabled-success-ghost-button !important; } + border-color: @color-bi-border-disabled-success-ghost-button !important; } } + &.button-warning.disabled { &.ghost { &, & .b-font:before { color: @color-bi-text-disabled-warning-ghost-button !important; } + border-color: @color-bi-border-disabled-warning-ghost-button !important; } } + &.button-error.disabled { &.ghost { &, & .b-font:before { color: @color-bi-text-disabled-error-ghost-button !important; } + border-color: @color-bi-border-disabled-error-ghost-button !important; } } @@ -424,14 +511,17 @@ body .bi-button, #body .bi-button { top: 0; pointer-events: none; } + &.hack:after { content: none; } + &:active:after { transform: scale(0, 1); .opacity(0.1); .transition(@activeStopVal) } + &:hover, &:focus { & .bi-button-mask { .opacity(0.1); @@ -440,6 +530,7 @@ body .bi-button, #body .bi-button { } } } + &.button-ignore { &:after { content: ""; @@ -456,24 +547,30 @@ body .bi-button, #body .bi-button { top: 0; pointer-events: none; } + &.hack:after { content: none; } + &:active:after { transform: scale(0, 1); .opacity(0.1); .transition(@activeStopVal) } + &:hover, &:focus { &:not(.clear, .ghost) { background-color: @color-bi-background-hover-ignore-button-mask; } + .transition(@hoverVal); } } - & .popup-content{ + + & .popup-content { font-size: @font-size-14; } + .bi-button-mask { pointer-events: none; } @@ -483,15 +580,19 @@ body .bi-button, #body .bi-button { .bi-button { &.button-ignore { background-color: @color-bi-background-ignore-button-theme-dark; + &:hover, &:focus { background-color: @color-bi-background-hover-ignore-button-theme-dark; } + &:active { background-color: @color-bi-background-active-ignore-button-theme-dark; } + &.clear { background-color: transparent; } + &.ghost { border-color: @color-bi-border-dark-gray-line-theme-dark; } @@ -506,31 +607,36 @@ body .bi-button, #body .bi-button { border-color: @color-bi-border-dark-gray-line-theme-dark !important; background-color: fade(@color-bi-background-disabled-button-theme-dark, 20%) !important; @ieColor: argb(fade(@color-bi-background-disabled-button-theme-dark, 20%)); - filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; &.clear { background-color: transparent !important; } + &.ghost { // 深色系下灰化就统一用灰化色 &, & .b-font:before { color: @color-bi-text-disabled-theme-dark !important; } + background: transparent !important; .opacity(1); } } } + &.button-ignore.disabled { &, &.base-disabled { &, & .b-font:before { color: @color-bi-text-disabled-theme-dark !important; } + border-color: @color-bi-border-dark-gray-line-theme-dark !important; background-color: @color-bi-background-ignore-button-theme-dark !important; + &.clear { background-color: transparent !important; } + &.ghost { background: transparent !important; .opacity(1); diff --git a/packages/fineui/src/less/base/single/input/radio.less b/packages/fineui/src/less/base/single/input/radio.less index a1aaa4071..52e569874 100644 --- a/packages/fineui/src/less/base/single/input/radio.less +++ b/packages/fineui/src/less/base/single/input/radio.less @@ -15,6 +15,9 @@ border-color: @color-bi-border-hover-active-radio; } } + .bi-radio-icon { + background-color: @color-bi-background-active-radio-content; + } &.active { & .radio-content, &.radio-content { border-color: @color-bi-border-hover-active-radio; diff --git a/packages/fineui/src/less/core/utils/common.less b/packages/fineui/src/less/core/utils/common.less index 7e0d85ff0..3da0ab1c0 100644 --- a/packages/fineui/src/less/core/utils/common.less +++ b/packages/fineui/src/less/core/utils/common.less @@ -2,16 +2,20 @@ .base-disabled { cursor: not-allowed !important; + .cursor-pointer { cursor: not-allowed !important; } + .cursor-default { cursor: not-allowed !important; } + .cursor-move { cursor: not-allowed !important; } - .cursor-text{ + + .cursor-text { cursor: not-allowed !important; } @@ -54,16 +58,20 @@ .base-invalid { cursor: default !important; + .cursor-pointer { cursor: default !important; } + .cursor-default { cursor: default !important; } + .cursor-move { cursor: default !important; } - .cursor-text{ + + .cursor-text { cursor: default !important; } } @@ -73,6 +81,7 @@ &:focus, &:hover { border-color: @color-bi-border-highlight; } + // ie下不支持focus-within， 和上面写在一起会导致ie下:hover不生效 &:focus-within { border-color: @color-bi-border-highlight; @@ -125,6 +134,7 @@ & .bi-input { color: @color-bi-text-background; } + & .bi-textarea { color: @color-bi-text-background; } @@ -134,9 +144,11 @@ .bi-background { background-color: @color-bi-background-normal-theme-dark; color: @color-bi-text-background-theme-dark; + & .bi-input { color: @color-bi-text-background-theme-dark; } + & .bi-textarea { color: @color-bi-text-background-theme-dark; } @@ -146,9 +158,11 @@ .bi-header-background { background-color: @color-bi-background-header-background; color: @color-bi-text-header-background; + & .bi-input { color: @color-bi-text-header-background; } + & .bi-textarea { color: @color-bi-text-header-background; } @@ -158,9 +172,11 @@ .bi-header-background { background-color: @color-bi-background-header-background-theme-dark; color: @color-bi-text-header-background-theme-dark; + & .bi-input { color: @color-bi-text-header-background-theme-dark; } + & .bi-textarea { color: @color-bi-text-header-background-theme-dark; } @@ -171,12 +187,15 @@ .bi-card { background-color: @color-bi-background-card; color: @color-bi-text-card; + & .bi-input { color: @color-bi-text-card; } + & .bi-textarea { color: @color-bi-text-card; } + &.bi-primary { background-color: @background-color-card-primary; color: @color-card-primary; @@ -184,12 +203,14 @@ } .bi-theme-dark { - .bi-card { + .bi-card, &.bi-card { background-color: @color-bi-background-card-theme-dark; color: @color-bi-text-card-theme-dark; + & .bi-input { color: @color-bi-text-card-theme-dark; } + & .bi-textarea { color: @color-bi-text-card-theme-dark; } @@ -199,20 +220,24 @@ //灰化 .bi-disabled { color: @color-bi-text-disabled; + & .bi-input { color: @color-bi-text-disabled; } + & .bi-textarea { color: @color-bi-text-disabled; } } .bi-theme-dark { - .bi-disabled { + .bi-disabled, &.bi-disabled { color: @color-bi-text-disabled-theme-dark; + & .bi-input { color: @color-bi-text-disabled-theme-dark; } + & .bi-textarea { color: @color-bi-text-disabled-theme-dark; } @@ -222,20 +247,24 @@ // 提示区域, 灰色字体 .bi-tips { color: @color-bi-text-tips; + & .bi-input { color: @color-bi-text-tips; } + & .bi-textarea { color: @color-bi-text-tips; } } .bi-theme-dark { - .bi-tips { + .bi-tips, &.bi-tips { color: @color-bi-text-tips-theme-dark; + & .bi-input { color: @color-bi-text-tips-theme-dark;; } + & .bi-textarea { color: @color-bi-text-tips-theme-dark; } @@ -245,9 +274,11 @@ // 边框 .bi-border { border: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -255,9 +286,11 @@ .bi-border-top { border-top: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -265,9 +298,11 @@ .bi-border-right { border-right: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -275,9 +310,11 @@ .bi-border-bottom { border-bottom: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -285,9 +322,11 @@ .bi-border-left { border-left: 1px solid @color-bi-border-line; + &.disabled { border-color: @color-bi-border-disabled !important; } + &.error { border-color: @border-color-negative; } @@ -296,6 +335,7 @@ .bi-theme-dark { .bi-border { border: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -303,6 +343,7 @@ .bi-border-top { border-top: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -310,6 +351,7 @@ .bi-border-right { border-right: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -317,6 +359,7 @@ .bi-border-bottom { border-bottom: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -324,6 +367,7 @@ .bi-border-left { border-left: 1px solid @color-bi-border-line-theme-dark; + &.disabled { border-color: @color-bi-border-disabled-theme-dark !important; } @@ -421,9 +465,11 @@ // 标红 .bi-keyword-red-mark { color: @color-bi-text-redmark; + & .bi-input { color: @color-bi-text-redmark; } + & .bi-textarea { color: @color-bi-text-redmark; } @@ -432,9 +478,11 @@ // 高亮 .bi-high-light { color: @color-bi-text-highlight; + & .bi-input { color: @color-bi-text-highlight; } + & .bi-textarea { color: @color-bi-text-highlight; } @@ -442,9 +490,11 @@ .bi-error { color: @color-bi-text-failure; + & .bi-input { color: @color-bi-text-failure; } + & .bi-textarea { color: @color-bi-text-failure; } @@ -453,9 +503,11 @@ .bi-high-light-background { background-color: @color-bi-background-highlight; color: @color-bi-text; + & .bi-input { color: @color-bi-text; } + & .bi-textarea { color: @color-bi-text; } @@ -464,9 +516,11 @@ .bi-error-background { background-color: @color-bi-background-failure; color: @color-bi-text; + & .bi-input { color: @color-bi-text; } + & .bi-textarea { color: @color-bi-text; } @@ -474,6 +528,7 @@ .bi-high-light-border { border: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -481,6 +536,7 @@ .bi-high-light-border-top { border-top: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -488,6 +544,7 @@ .bi-high-light-border-right { border-right: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -495,6 +552,7 @@ .bi-high-light-border-bottom { border-bottom: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -502,6 +560,7 @@ .bi-high-light-border-left { border-left: 1px solid @color-bi-border-highlight; + &.disabled { border-color: @color-bi-border-disabled !important; } @@ -512,9 +571,11 @@ color: @color-bi-text-water-mark; cursor: text; .user-select-disable(); + & .bi-input { color: @color-bi-text-water-mark; } + & .bi-textarea { color: @color-bi-text-water-mark; } @@ -523,9 +584,11 @@ .bi-theme-dark { .bi-water-mark { color: @color-bi-text-water-mark-theme-dark; + & .bi-input { color: @color-bi-text-water-mark-theme-dark; } + & .bi-textarea { color: @color-bi-text-water-mark-theme-dark; } @@ -548,24 +611,30 @@ // 蒙板 .bi-mask { color: @color-bi-text; + & .bi-input { color: @color-bi-text; } + & .bi-textarea { color: @color-bi-text; } + .background-color(@color-bi-background-black, 20%); } .bi-theme-dark { .bi-mask { color: @color-bi-text-white-theme-dark; + & .bi-input { color: @color-bi-text-white-theme-dark; } + & .bi-textarea { color: @color-bi-text-white-theme-dark; } + .background-color(@color-bi-background-default, 20%); } } @@ -576,7 +645,7 @@ } .bi-theme-dark { - .bi-z-index-mask { + .bi-z-index-mask, &.bi-z-index-mask { //color: @color-bi-background-default; //& .bi-input { // color: @color-bi-background-default; diff --git a/packages/fineui/src/less/visual.less b/packages/fineui/src/less/visual.less index 3c7601937..daaec256a 100644 --- a/packages/fineui/src/less/visual.less +++ b/packages/fineui/src/less/visual.less @@ -43,13 +43,11 @@ .background-color(@color, @alpha) { background-color: fade(@color, @alpha); @ieColor: argb(fade(@color, @alpha)); - filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } .opacity(@opa) { opacity: @opa; @opa-ie: @opa*100; - filter: ~'alpha(opacity=@{opa-ie})'; } .transition(@transition) { diff --git a/packages/fineui/src/less/widget/intervalslider/intervalslider.label.less b/packages/fineui/src/less/widget/intervalslider/intervalslider.label.less deleted file mode 100644 index fa4882c00..000000000 --- a/packages/fineui/src/less/widget/intervalslider/intervalslider.label.less +++ /dev/null @@ -1,3 +0,0 @@ -.bi-interval-slider-label { - min-height: 50px; -} \ No newline at end of file diff --git a/packages/fineui/src/less/widget/intervalslider/intervalslider.less b/packages/fineui/src/less/widget/intervalslider/intervalslider.less deleted file mode 100644 index f875baf5d..000000000 --- a/packages/fineui/src/less/widget/intervalslider/intervalslider.less +++ /dev/null @@ -1,3 +0,0 @@ -.bi-interval-slider { - min-height: 50px; -} \ No newline at end of file diff --git a/packages/fineui/src/widget/datepane/datepane.js b/packages/fineui/src/widget/datepane/datepane.js index a408c3287..8ba860c66 100644 --- a/packages/fineui/src/widget/datepane/datepane.js +++ b/packages/fineui/src/widget/datepane/datepane.js @@ -30,6 +30,7 @@ export class DynamicDatePane extends Widget { minDate: "1900-01-01", maxDate: "2099-12-31", supportDynamic: true, + isPreview: false, // 是否是预览状态 }; render() { @@ -63,17 +64,11 @@ export class DynamicDatePane extends Widget { { eventName: ButtonGroup.EVENT_CHANGE, action: () => { - let date; const value = this.switcher.getValue()[0]; this.dateTab.setSelect(value); switch (value) { case DynamicDatePane.Static: - date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue()); - this.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1, - day: date.getDate(), - }); + this._setStaticValueByDynamicValue(this.dynamicPane.getValue()); break; case DynamicDatePane.Dynamic: this.dynamicPane.setValue({ @@ -195,7 +190,7 @@ export class DynamicDatePane extends Widget { } created() { - this.setValue(this.options.value); + this._initValue(this.options.value); } _checkValueValid(value) { @@ -212,6 +207,31 @@ export class DynamicDatePane extends Widget { } } + _initValue(v) { + v = v || {}; + const type = v.type || DynamicDateCombo.Static; + const value = v.value || v; + + const { isPreview } = this.options; + + // 如果是初始化且是预览状态 直接打开静态页面 + this.switcher.setValue(isPreview ? DynamicDateCombo.Static : type); + this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type); + switch (type) { + case DynamicDateCombo.Dynamic: + if (isPreview) { + this._setStaticValueByDynamicValue(value); + } else { + this.dynamicPane.setValue(value); + } + break; + case DynamicDateCombo.Static: + default: + this._setStaticValue(value); + break; + } + } + setMinDate(minDate) { if (this.options.minDate !== minDate) { this.options.minDate = minDate; @@ -238,19 +258,32 @@ export class DynamicDatePane extends Widget { break; case DynamicDateCombo.Static: default: - if (this._checkValueValid(value)) { - const date = getDate(); - this.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1, - }); - } else { - this.ymd.setValue(value); - } + this._setStaticValue(value); break; } } + _setStaticValue(value) { + if (this._checkValueValid(value)) { + const date = getDate(); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + }); + } else { + this.ymd.setValue(value); + } + } + + _setStaticValueByDynamicValue(value) { + const date = DynamicDateHelper.getCalculation(value); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + } + getValue() { const type = this.dateTab.getSelect(); diff --git a/packages/fineui/src/widget/downlist/popup.downlist.js b/packages/fineui/src/widget/downlist/popup.downlist.js index c4171246c..ebb1e48ce 100644 --- a/packages/fineui/src/widget/downlist/popup.downlist.js +++ b/packages/fineui/src/widget/downlist/popup.downlist.js @@ -1,23 +1,23 @@ import { ButtonTree, Pane } from "@/base"; import { - Selection, - VerticalLayout, - Layout, - shortcut, - extend, - createWidget, - createItems, - isNotNull, + BlankSplitChar, contains, + createItems, + createWidget, + deepClone, each, + extend, isEmpty, - map, - isNotEmptyString, isNotEmptyArray, - some, - deepClone, + isNotEmptyString, + isNotNull, + Layout, + map, + Selection, + shortcut, SIZE_CONSANTS, - BlankSplitChar + some, + VerticalLayout, } from "@/core"; import { DownListGroup } from "./group.downlist"; @@ -63,14 +63,14 @@ export class DownListPopup extends Pane { {}, { adjustLength: -2, - } + }, ), layouts: [ { type: VerticalLayout.xtype, hgap: this.constants.hgap, vgap: this.constants.vgap, - } + }, ], value: this._digest(o.value), chooseType: o.chooseType, @@ -142,7 +142,7 @@ export class DownListPopup extends Pane { layouts: [ { type: VerticalLayout.xtype, - } + }, ], }, innerVgap: 5, @@ -163,11 +163,9 @@ export class DownListPopup extends Pane { item_done.items.push(el_done); storeItem.push(item); }); - if (this._isGroup(item_done.items)) { - each(item_done.items, (i, item) => { - this.singleValues.push(item.el.value); - }); - } + each(item_done.items, (i, item) => { + this.singleValues.push(item.el.value); + }); result.push(item_done); this.items.push(storeItem); @@ -181,7 +179,7 @@ export class DownListPopup extends Pane { cls: "bi-down-list-spliter bi-split-top cursor-pointer", height: 0, }, - } + }, ], cls: "bi-down-list-spliter-container cursor-pointer", vgap: 5, @@ -220,10 +218,6 @@ export class DownListPopup extends Pane { }); } - _isGroup(i) { - return i.length > 1; - } - _needSpliter(i, itemLength) { return i < itemLength - 1; } @@ -276,7 +270,7 @@ export class DownListPopup extends Pane { return true; } - }) + }), ); return value; @@ -295,7 +289,7 @@ export class DownListPopup extends Pane { {}, { adjustLength: -2, - } + }, ); this.popup.populate(popupItem); } diff --git a/packages/fineui/src/widget/dynamicdate/dynamicdate.combo.js b/packages/fineui/src/widget/dynamicdate/dynamicdate.combo.js index 684776f8c..3fa097e55 100644 --- a/packages/fineui/src/widget/dynamicdate/dynamicdate.combo.js +++ b/packages/fineui/src/widget/dynamicdate/dynamicdate.combo.js @@ -53,6 +53,7 @@ export class DynamicDateCombo extends Single { }, isNeedAdjustHeight: false, isNeedAdjustWidth: false, + isPreview: false, // 是否是预览状态 }; _init() { @@ -200,6 +201,7 @@ export class DynamicDateCombo extends Single { popup: { el: { type: DynamicDatePopup.xtype, + isPreview: opts.isPreview, width: opts.isNeedAdjustWidth ? opts.width : undefined, supportDynamic: opts.supportDynamic, behaviors: opts.behaviors, diff --git a/packages/fineui/src/widget/dynamicdate/dynamicdate.popup.js b/packages/fineui/src/widget/dynamicdate/dynamicdate.popup.js index 907303d1e..c4eafa71e 100644 --- a/packages/fineui/src/widget/dynamicdate/dynamicdate.popup.js +++ b/packages/fineui/src/widget/dynamicdate/dynamicdate.popup.js @@ -34,6 +34,7 @@ export class DynamicDatePopup extends Widget { baseCls: "bi-dynamic-date-popup", width: 272, supportDynamic: true, + isPreview: false, // 是否是预览状态 }; static EVENT_CHANGE = "EVENT_CHANGE"; @@ -282,10 +283,23 @@ export class DynamicDatePopup extends Widget { v = v || {}; const type = v.type || DynamicDateCombo.Static; const value = v.value || v; - this.dateTab.setSelect(type); + const { isPreview } = this.options; + let date; + + // 如果是预览状态 直接打开静态页面 + this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type); switch (type) { case DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); + if (isPreview) { + date = DynamicDateHelper.getCalculation(value); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + } else { + this.dynamicPane.setValue(value); + } this._setInnerValue(); break; case DynamicDateCombo.Static: diff --git a/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js b/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js index 0fc27ae09..e65e12768 100644 --- a/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js +++ b/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js @@ -44,6 +44,7 @@ export class DynamicDateTimeCombo extends Single { }, isNeedAdjustHeight: false, isNeedAdjustWidth: false, + isPreview: false, // 是否是预览状态 }; static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; @@ -207,6 +208,7 @@ export class DynamicDateTimeCombo extends Single { popup: { el: { type: DynamicDateTimePopup.xtype, + isPreview: opts.isPreview, timeSelectTypes: opts.timeSelectTypes, width: opts.isNeedAdjustWidth ? opts.width : undefined, supportDynamic: opts.supportDynamic, diff --git a/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.popup.js b/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.popup.js index 33678a041..e54ae49b8 100644 --- a/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.popup.js +++ b/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.popup.js @@ -36,6 +36,7 @@ export class DynamicDateTimePopup extends Widget { baseCls: "bi-dynamic-date-time-popup", width: 272, supportDynamic: true, + isPreview: false, // 是否是预览状态 }; static EVENT_CHANGE = "EVENT_CHANGE"; @@ -292,10 +293,24 @@ export class DynamicDateTimePopup extends Widget { v = v || {}; const type = v.type || DynamicDateCombo.Static; const value = v.value || v; - this.dateTab.setSelect(type); + const { isPreview } = this.options; + let date; + + // 如果是预览状态 直接打开静态页面 + this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type); switch (type) { case DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); + if (isPreview) { + date = DynamicDateHelper.getCalculation(value); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + this.timeSelect.setValue(); + } else { + this.dynamicPane.setValue(value); + } this._setInnerValue(); break; case DynamicDateCombo.Static: diff --git a/packages/fineui/src/widget/intervalslider/intervalslider.js b/packages/fineui/src/widget/intervalslider/intervalslider.js index b24a795af..63c1af7b8 100644 --- a/packages/fineui/src/widget/intervalslider/intervalslider.js +++ b/packages/fineui/src/widget/intervalslider/intervalslider.js @@ -23,19 +23,17 @@ import { Single, Editor } from "@/base"; import { AccurateCalculationModel } from "./model.accuratecalculation"; import { SignTextEditor, SliderIconButton } from "../singleslider"; +const CONSTANTS = { + EDITOR_WIDTH: 58, + EDITOR_HEIGHT: 20, + LABEL_HEIGHT: 30, + SLIDER_HEIGHT: 30, +}; + @shortcut() export class IntervalSlider extends Single { static xtype = "bi.interval_slider"; - _constant = { - EDITOR_WIDTH: 58, - EDITOR_R_GAP: 60, - EDITOR_HEIGHT: 20, - SLIDER_WIDTH_HALF: 15, - LABEL_HEIGHT: 30, - SLIDER_WIDTH: 30, - SLIDER_HEIGHT: 30, - TRACK_HEIGHT: 24, - }; + props = { baseCls: "bi-interval-slider bi-slider-track", digit: false, @@ -45,6 +43,8 @@ export class IntervalSlider extends Single { value: { min: "", max: "" }, lAlign: "center", rAlign: "center", + labelHeight: CONSTANTS.LABEL_HEIGHT, + sliderHeight: CONSTANTS.SLIDER_HEIGHT, }; static EVENT_CHANGE = "EVENT_CHANGE"; @@ -59,8 +59,11 @@ export class IntervalSlider extends Single { this.populate(); } + getConstant() { + return CONSTANTS; + } + render() { - const c = this._constant; const o = this.options; this.enable = false; this.valueOne = ""; @@ -86,8 +89,8 @@ export class IntervalSlider extends Single { text: unit, allowBlank: false, textAlign: lAlign, - width: BI.isNull(editorWidth) ? BI.toPix(c.EDITOR_WIDTH, 2) : BI.toPix(editorWidth, 2), - height: toPix(c.EDITOR_HEIGHT, 2), + width: isNull(editorWidth) ? toPix(CONSTANTS.EDITOR_WIDTH, 2) : toPix(editorWidth, 2), + height: toPix(CONSTANTS.EDITOR_HEIGHT, 2), validationChecker: v => this._checkValidation(v), }); this.labelOne.element.hover( @@ -116,8 +119,8 @@ export class IntervalSlider extends Single { text: unit, allowBlank: false, textAlign: rAlign, - width: BI.isNull(editorWidth) ? BI.toPix(c.EDITOR_WIDTH, 2) : BI.toPix(editorWidth, 2), - height: toPix(c.EDITOR_HEIGHT, 2), + width: isNull(editorWidth) ? toPix(CONSTANTS.EDITOR_WIDTH, 2) : toPix(editorWidth, 2), + height: toPix(CONSTANTS.EDITOR_HEIGHT, 2), validationChecker: v => this._checkValidation(v), }); this.labelTwo.element.hover( @@ -152,7 +155,7 @@ export class IntervalSlider extends Single { return { type: VerticalFillLayout.xtype, - rowSize: [o.labelHeight || c.LABEL_HEIGHT, o.sliderHeight || c.SLIDER_HEIGHT], + rowSize: [o.labelHeight, o.sliderHeight], items: [ this._createLabelWrapper(), { @@ -253,7 +256,6 @@ export class IntervalSlider extends Single { _createLabelWrapper() { const o = this.options; - const c = this._constant; return { el: { @@ -275,7 +277,7 @@ export class IntervalSlider extends Single { ], }, ], - height: o.labelHeight || c.LABEL_HEIGHT, + height: o.labelHeight, }, top: 0, left: 0, @@ -372,24 +374,6 @@ export class IntervalSlider extends Single { return valid; } - _checkOverlap() { - const labelOneLeft = this.labelOne.element[0].offsetLeft; - const labelTwoLeft = this.labelTwo.element[0].offsetLeft; - if (labelOneLeft <= labelTwoLeft) { - if (labelTwoLeft - labelOneLeft < 90) { - this.labelTwo.element.css({ top: 40 }); - } else { - this.labelTwo.element.css({ top: 0 }); - } - } else { - if (labelOneLeft - labelTwoLeft < 90) { - this.labelTwo.element.css({ top: 40 }); - } else { - this.labelTwo.element.css({ top: 0 }); - } - } - } - _checkLabelPosition(oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) { oldValueOne = parseFloat(oldValueOne); oldValueTwo = parseFloat(oldValueTwo); diff --git a/packages/fineui/src/widget/multiselect/search/multiselect.search.loader.js b/packages/fineui/src/widget/multiselect/search/multiselect.search.loader.js index b601a572c..c7fe5a076 100644 --- a/packages/fineui/src/widget/multiselect/search/multiselect.search.loader.js +++ b/packages/fineui/src/widget/multiselect/search/multiselect.search.loader.js @@ -191,6 +191,7 @@ export class MultiSelectSearchLoader extends Widget { return { text: o.valueFormatter(v) || v, value: v, + keyword: keyword, }; }); if (isKey(keyword)) { diff --git a/packages/fineui/src/widget/multiselect/trigger/searcher.multiselect.insert.js b/packages/fineui/src/widget/multiselect/trigger/searcher.multiselect.insert.js index 66249b148..c54bba3c8 100644 --- a/packages/fineui/src/widget/multiselect/trigger/searcher.multiselect.insert.js +++ b/packages/fineui/src/widget/multiselect/trigger/searcher.multiselect.insert.js @@ -1,4 +1,17 @@ -import { shortcut, Widget, extend, emptyFn, i18nText, createWidget, isNotNull, isEmptyArray, size, each, BlankSplitChar, Selection } from "@/core"; +import { + shortcut, + Widget, + extend, + emptyFn, + i18nText, + createWidget, + isNotNull, + isEmptyArray, + size, + each, + BlankSplitChar, + Selection +} from "@/core"; import { MultiSelectEditor } from "./editor.multiselect"; import { Searcher } from "@/base"; import { MultiSelectSearchInsertPane } from "../search/multiselect.search.insert.pane"; @@ -80,7 +93,7 @@ export class MultiSelectInsertSearcher extends Widget { op.keywords = [keyword]; this.setKeyword(keyword); o.itemsCreator(op, function () { - if (keyword === self.editor.getValue()) { + if (keyword === self.editor.getKeyword()) { callback(...arguments); } }); diff --git a/packages/fineui/src/widget/singleslider/button/editor.sign.text.js b/packages/fineui/src/widget/singleslider/button/editor.sign.text.js index da7c44cb9..c03ba34bc 100644 --- a/packages/fineui/src/widget/singleslider/button/editor.sign.text.js +++ b/packages/fineui/src/widget/singleslider/button/editor.sign.text.js @@ -106,7 +106,7 @@ export class SignTextEditor extends Widget { _checkText() { const o = this.options; nextTick( - bind(() => { + () => { if (this.editor.getValue() === "") { this.text.setValue(o.watermark || ""); this.text.element.addClass("bi-water-mark"); @@ -116,7 +116,7 @@ export class SignTextEditor extends Widget { this.text.setValue(v); this.text.element.removeClass("bi-water-mark"); } - }, this) + } ); } diff --git a/packages/fineui/src/widget/timeinterval/dateinterval.js b/packages/fineui/src/widget/timeinterval/dateinterval.js index 76a7ff381..4c7f784da 100644 --- a/packages/fineui/src/widget/timeinterval/dateinterval.js +++ b/packages/fineui/src/widget/timeinterval/dateinterval.js @@ -23,6 +23,7 @@ export class DateInterval extends Single { lgap: 15, offset: 0, timeErrorCls: "time-error", + isPreview: false, // 是否是预览状态 }; static EVENT_VALID = "EVENT_VALID"; @@ -78,6 +79,7 @@ export class DateInterval extends Single { const o = this.options; const combo = createWidget({ type: DynamicDateCombo.xtype, + isPreview: o.isPreview, supportDynamic: o.supportDynamic, minDate: o.minDate, maxDate: o.maxDate, diff --git a/packages/fineui/src/widget/timeinterval/timeinterval.js b/packages/fineui/src/widget/timeinterval/timeinterval.js index 47e6d0210..85deda173 100644 --- a/packages/fineui/src/widget/timeinterval/timeinterval.js +++ b/packages/fineui/src/widget/timeinterval/timeinterval.js @@ -23,6 +23,7 @@ export class TimeInterval extends Single { lgap: 15, offset: 0, timeErrorCls: "time-error", + isPreview: false, // 是否是预览状态 }; static EVENT_VALID = "EVENT_VALID"; @@ -76,6 +77,7 @@ export class TimeInterval extends Single { const o = this.options; const combo = createWidget({ type: DynamicDateTimeCombo.xtype, + isPreview: o.isPreview, timeSelectTypes: o.timeSelectTypes, simple: o.simple, supportDynamic: o.supportDynamic, diff --git a/packages/fineui/src/widget/year/combo.year.js b/packages/fineui/src/widget/year/combo.year.js index b1ce3612f..50056e22e 100644 --- a/packages/fineui/src/widget/year/combo.year.js +++ b/packages/fineui/src/widget/year/combo.year.js @@ -27,6 +27,7 @@ export class DynamicYearCombo extends Widget { maxDate: "2099-12-31", // 最大日期 height: 24, supportDynamic: true, + isPreview: false, // 是否是预览状态 }; _init() { @@ -95,6 +96,7 @@ export class DynamicYearCombo extends Widget { el: { type: DynamicYearPopup.xtype, supportDynamic: o.supportDynamic, + isPreview: o.isPreview, ref: _ref => { this.popup = _ref; }, diff --git a/packages/fineui/src/widget/year/popup.year.js b/packages/fineui/src/widget/year/popup.year.js index 5400407c0..520e5978e 100644 --- a/packages/fineui/src/widget/year/popup.year.js +++ b/packages/fineui/src/widget/year/popup.year.js @@ -30,6 +30,7 @@ export class DynamicYearPopup extends Widget { max: "2099-12-31", width: 180, supportDynamic: true, + isPreview: false, // 是否是预览状态 }; constants = { tabHeight: 40, @@ -266,10 +267,15 @@ export class DynamicYearPopup extends Widget { v = v || {}; const type = v.type || DynamicDateCombo.Static; const value = v.value || v; - this.dateTab.setSelect(type); + const { isPreview } = this.options; + + // 如果是预览状态 直接打开静态页面 + this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type); switch (type) { case DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); + isPreview + ? this.year.setValue({ year: DynamicDateHelper.getCalculation(value).getFullYear() }) + : this.dynamicPane.setValue(value); this._setInnerValue(); break; case DynamicDateCombo.Static: diff --git a/packages/fineui/src/widget/yearmonth/combo.yearmonth.js b/packages/fineui/src/widget/yearmonth/combo.yearmonth.js index 55e0c24da..79dfa5da8 100644 --- a/packages/fineui/src/widget/yearmonth/combo.yearmonth.js +++ b/packages/fineui/src/widget/yearmonth/combo.yearmonth.js @@ -38,6 +38,7 @@ export class DynamicYearMonthCombo extends Single { supportDynamic: true, isNeedAdjustHeight: false, isNeedAdjustWidth: false, + isPreview: false, // 是否是预览状态 }; _init() { @@ -106,6 +107,7 @@ export class DynamicYearMonthCombo extends Single { type: DynamicYearMonthPopup.xtype, width: o.isNeedAdjustWidth ? o.width : undefined, supportDynamic: o.supportDynamic, + isPreview: o.isPreview, ref: _ref => { this.popup = _ref; }, diff --git a/packages/fineui/src/widget/yearmonth/popup.yearmonth.js b/packages/fineui/src/widget/yearmonth/popup.yearmonth.js index a269169b8..f81dae5f2 100644 --- a/packages/fineui/src/widget/yearmonth/popup.yearmonth.js +++ b/packages/fineui/src/widget/yearmonth/popup.yearmonth.js @@ -31,6 +31,7 @@ export class DynamicYearMonthPopup extends Widget { max: "2099-12-31", width: 180, supportDynamic: true, + isPreview: false, // 是否是预览状态 }; static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; @@ -262,11 +263,22 @@ export class DynamicYearMonthPopup extends Widget { v = v || {}; const type = v.type || DynamicDateCombo.Static; const value = v.value || v; + const { isPreview } = this.options; + let date; - this.dateTab.setSelect(type); + // 如果是预览状态 直接打开静态页面 + this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type); switch (type) { case DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); + if (isPreview) { + date = DynamicDateHelper.getCalculation(value); + this.year.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + }); + } else { + this.dynamicPane.setValue(value); + } this._setInnerValue(); break; case DynamicDateCombo.Static: diff --git a/packages/fineui/src/widget/yearmonthinterval/yearmonthinterval.js b/packages/fineui/src/widget/yearmonthinterval/yearmonthinterval.js index d5689f43b..c6bc874bb 100644 --- a/packages/fineui/src/widget/yearmonthinterval/yearmonthinterval.js +++ b/packages/fineui/src/widget/yearmonthinterval/yearmonthinterval.js @@ -34,6 +34,7 @@ export class YearMonthInterval extends Single { supportDynamic: true, height: 24, simple: false, + isPreview: false, // 是否是预览状态 }; render() { @@ -71,6 +72,7 @@ export class YearMonthInterval extends Single { const o = this.options; const combo = createWidget({ type: DynamicYearMonthCombo.xtype, + isPreview: o.isPreview, simple: o.simple, supportDynamic: o.supportDynamic, height: o.height, diff --git a/packages/fineui/src/widget/yearquarter/combo.yearquarter.js b/packages/fineui/src/widget/yearquarter/combo.yearquarter.js index 8255bf054..c14100a38 100644 --- a/packages/fineui/src/widget/yearquarter/combo.yearquarter.js +++ b/packages/fineui/src/widget/yearquarter/combo.yearquarter.js @@ -33,6 +33,7 @@ export class DynamicYearQuarterCombo extends Widget { supportDynamic: true, isNeedAdjustHeight: false, isNeedAdjustWidth: false, + isPreview: false, // 是否是预览状态 }; static EVENT_CONFIRM = "EVENT_CONFIRM"; @@ -109,6 +110,7 @@ export class DynamicYearQuarterCombo extends Widget { type: DynamicYearQuarterPopup.xtype, width: o.isNeedAdjustWidth ? o.width : undefined, supportDynamic: o.supportDynamic, + isPreview: o.isPreview, ref: _ref => { this.popup = _ref; }, diff --git a/packages/fineui/src/widget/yearquarter/popup.yearquarter.js b/packages/fineui/src/widget/yearquarter/popup.yearquarter.js index 5ac06d6a0..7e95378e9 100644 --- a/packages/fineui/src/widget/yearquarter/popup.yearquarter.js +++ b/packages/fineui/src/widget/yearquarter/popup.yearquarter.js @@ -32,6 +32,7 @@ export class DynamicYearQuarterPopup extends Widget { max: "2099-12-31", width: 180, supportDynamic: true, + isPreview: false, // 是否是预览状态 }; static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; @@ -41,7 +42,7 @@ export class DynamicYearQuarterPopup extends Widget { render() { this.storeValue = { type: DynamicYearQuarterCombo.Static }; - + return { type: VerticalLayout.xtype, items: [ @@ -157,7 +158,7 @@ export class DynamicYearQuarterPopup extends Widget { _checkTodayValid() { const o = this.options; const today = getDate(); - + return !!checkDateVoid( today.getFullYear(), today.getMonth() + 1, @@ -169,7 +170,7 @@ export class DynamicYearQuarterPopup extends Widget { _getTabJson() { const o = this.options; - + return { type: Tab.xtype, logic: { @@ -263,8 +264,8 @@ export class DynamicYearQuarterPopup extends Widget { default: if ( this.storeValue && - this.storeValue.type === - DynamicYearQuarterCombo.Dynamic + this.storeValue.type === + DynamicYearQuarterCombo.Dynamic ) { this.dynamicPane.setValue( this.storeValue.value @@ -304,10 +305,22 @@ export class DynamicYearQuarterPopup extends Widget { v = v || {}; const type = v.type || DynamicDateCombo.Static; const value = v.value || v; - this.dateTab.setSelect(type); + const { isPreview } = this.options; + let date; + + // 如果是预览状态 直接打开静态页面 + this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type); switch (type) { case DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); + if (isPreview) { + date = DynamicDateHelper.getCalculation(value); + this.year.setValue({ + year: date.getFullYear(), + quarter: getQuarter(date), + }); + } else { + this.dynamicPane.setValue(value); + } this._setInnerValue(); break; case DynamicDateCombo.Static: