diff --git a/scss/components/form/_form.scss b/scss/components/form/_form.scss index 9842fe95..92df57ba 100644 --- a/scss/components/form/_form.scss +++ b/scss/components/form/_form.scss @@ -1,264 +1,265 @@ .#{$ns}Form { - font-size: $Form-fontSize; - position: relative; + font-size: $Form-fontSize; + position: relative; - &--quickEdit .#{$ns}Form-item:last-child { - margin-bottom: 0; - } + &--quickEdit .#{$ns}Form-item:last-child { + margin-bottom: 0; + } - &--inline { - >.#{$ns}PlainField { - display: inline-block; - padding-top: $Form-input-paddingY; - // padding-bottom: $Form-input-paddingY; - } + &--inline { + > .#{$ns}PlainField { + display: inline-block; + padding-top: $Form-input-paddingY; + // padding-bottom: $Form-input-paddingY; } + } } .#{$ns}Form-label { - font-weight: $fontWeightNormal; - margin-bottom: px2rem(5px); - display: inline-block; - max-width: 100%; - position: relative; + font-weight: $fontWeightNormal; + margin-bottom: px2rem(5px); + display: inline-block; + max-width: 100%; + position: relative; - >span { - position: relative; - } + > span { + position: relative; + } } .#{$ns}Form-star { - color: $red; - font-size: $fontSizeXs; - position: absolute; - left: px2rem(-6px); - top: px2rem(3px); - line-height: 1; + color: $red; + font-size: $fontSizeXs; + position: absolute; + left: px2rem(-6px); + top: px2rem(3px); + line-height: 1; } .#{$ns}Form-feedback { - color: $danger; - margin: $Form-input-marginBottom 0 0; - padding-left: $gap-base; - font-size: $fontSizeSm; + color: $danger; + margin: $Form-input-marginBottom 0 0; + padding-left: $gap-base; + font-size: $fontSizeSm; } .#{$ns}Form-description { - display: block; - color: $Form-description-color; - margin: $Form-input-marginBottom 0 0; - font-size: $Form-description-fontSize; + display: block; + color: $Form-description-color; + margin: $Form-input-marginBottom 0 0; + font-size: $Form-description-fontSize; } .#{$ns}Form-hint { - display: inline-block; - margin-left: $gap-sm; - padding-top: $Form-input-paddingY; - vertical-align: top; + display: inline-block; + margin-left: $gap-sm; + padding-top: $Form-input-paddingY; + vertical-align: top; } .#{$ns}Form-item { - margin-bottom: $Form-item-gap; + margin-bottom: $Form-item-gap; - .#{$ns}Grid-form>&:last-child { - margin-bottom: 0; + .#{$ns}Grid-form > &:last-child { + margin-bottom: 0; + } + + .#{$ns}Form--inline > &--inline { + margin-bottom: $Form-item-gap/2; + margin-right: $Form-item-gap/2; + + &:last-child { + margin-right: 0; + margin-bottom: 0; } + } - .#{$ns}Form--inline>&--inline { - margin-bottom: $Form-item-gap/2; - margin-right: $Form-item-gap/2; + .#{$ns}Form-remark { + margin-top: ($Form-input-height - $fontSizeBase) / 2; + vertical-align: top; + } - &:last-child { - margin-right: 0; - margin-bottom: 0; - } + &--horizontal { + > .#{$ns}Form-label { + text-align: $Form--horizontal-label-align; + white-space: $Form--horizontal-label-whiteSpace; } + } - .#{$ns}Form-remark { - margin-top: ($Form-input-height - $fontSizeBase) / 2; - vertical-align: top; + &--normal { + > .#{$ns}Form-label { + display: block; } + } - &--horizontal { - >.#{$ns}Form-label { - text-align: $Form--horizontal-label-align; - white-space: $Form--horizontal-label-whiteSpace; - } - } - - &--normal { - >.#{$ns}Form-label { - display: block; - } - } - - &.is-error>.#{$ns}Form-label { - color: $danger; - } + &.is-error > .#{$ns}Form-label { + color: $danger; + } } .#{$ns}Form-placeholder { - color: $Form-input-placeholderColor; + color: $Form-input-placeholderColor; } @include media-breakpoint-up(sm) { - .#{$ns}Form-control--sizeXs { - min-width: $Form-control-widthXs; - width: auto; - display: inline-block; - vertical-align: top; - } + .#{$ns}Form-control--sizeXs { + min-width: $Form-control-widthXs; + width: auto; + display: inline-block; + vertical-align: top; + } - .#{$ns}Form-control--sizeSm { - min-width: $Form-control-widthSm; - width: auto; - display: inline-block; - vertical-align: top; - } + .#{$ns}Form-control--sizeSm { + min-width: $Form-control-widthSm; + width: auto; + display: inline-block; + vertical-align: top; + } - .#{$ns}Form-control--sizeMd { - min-width: $Form-control-widthMd; - width: auto; - display: inline-block; - vertical-align: top; - } + .#{$ns}Form-control--sizeMd { + min-width: $Form-control-widthMd; + width: auto; + display: inline-block; + vertical-align: top; + } - .#{$ns}Form-control--sizeLg { - min-width: $Form-control-widthLg; - width: auto; - display: inline-block; - vertical-align: top; - } + .#{$ns}Form-control--sizeLg { + min-width: $Form-control-widthLg; + width: auto; + display: inline-block; + vertical-align: top; + } - .#{$ns}Form-item { - &--horizontal { - display: flex; - flex-wrap: nowrap; - margin-left: -$Form--horizontal-gutterWidth / 2; - margin-right: -$Form--horizontal-gutterWidth / 2; + .#{$ns}Form-item { + &--horizontal { + display: flex; + flex-wrap: nowrap; + margin-left: -$Form--horizontal-gutterWidth / 2; + margin-right: -$Form--horizontal-gutterWidth / 2; - >* { - padding-left: $Form--horizontal-gutterWidth / 2; - padding-right: $Form--horizontal-gutterWidth / 2; - } + > * { + padding-left: $Form--horizontal-gutterWidth / 2; + padding-right: $Form--horizontal-gutterWidth / 2; + } - >.#{$ns}Form-label, - >.#{$ns}Form-value { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - - .#{$ns}Form-itemColumn--xs, - .#{$ns}Form-itemColumn--sm, - .#{$ns}Form-itemColumn--normal, - .#{$ns}Form-itemColumn--md, - .#{$ns}Form-itemColumn--lg { - flex-grow: unset; - flex-basis: unset; - } - - >.#{$ns}Form-label { - padding-top: $Form-label-paddingTop; - margin-bottom: 0; - } - - .#{$ns}Form-itemColumn--xs { - width: $Form--horizontal-label-widthXs; - } - - .#{$ns}Form-itemColumn--sm { - width: $Form--horizontal-label-widthSm; - } - - .#{$ns}Form-itemColumn--normal { - width: $Form--horizontal-label-widthBase; - } - - .#{$ns}Form-itemColumn--md { - width: $Form--horizontal-label-widthMd; - } - - .#{$ns}Form-itemColumn--lg { - width: $Form--horizontal-label-widthLg; - } - - @for $i from (1) through $Form--horizontal-columns { - .#{$ns}Form-itemColumn--#{$i} { - flex: 0 0 percentage($i / $Form--horizontal-columns); - max-width: percentage($i / $Form--horizontal-columns); - min-height: 1px; - } - } - } - - &--inline { - display: inline-block; - vertical-align: top; - - >.#{$ns}Form-label { - padding-top: $Form-label-paddingTop; - margin-bottom: 0; - margin-right: $Form-item-gap/2; - - .#{$ns}Form-star { - position: static; - } - } - - >.#{$ns}Form-value { - display: inline; - - >.#{$ns}Form-control { - vertical-align: top; - display: inline-block; - } - - >.#{$ns}Form-control.#{$ns}InputGroup { - display: inline-flex; - } - - >.#{$ns}TextControl--withAddOn { - display: inline-flex; - } - } - } - } - - .#{$ns}Form-row { - display: flex; - flex-wrap: wrap; - - margin-left: -$Form-row-gutterWidth / 2; - margin-right: -$Form-row-gutterWidth / 2; - align-items: flex-start; - - >* { - padding-left: $Form-row-gutterWidth / 2; - padding-right: $Form-row-gutterWidth / 2; - } - } - - .#{$ns}Form-col { + > .#{$ns}Form-label, + > .#{$ns}Form-value { flex-basis: 0; flex-grow: 1; - flex-shrink: 1; + max-width: 100%; + width: 0; + } + + .#{$ns}Form-itemColumn--xs, + .#{$ns}Form-itemColumn--sm, + .#{$ns}Form-itemColumn--normal, + .#{$ns}Form-itemColumn--md, + .#{$ns}Form-itemColumn--lg { + flex-grow: unset; + flex-basis: unset; + } + + > .#{$ns}Form-label { + padding-top: $Form-label-paddingTop; + margin-bottom: 0; + } + + .#{$ns}Form-itemColumn--xs { + width: $Form--horizontal-label-widthXs; + } + + .#{$ns}Form-itemColumn--sm { + width: $Form--horizontal-label-widthSm; + } + + .#{$ns}Form-itemColumn--normal { + width: $Form--horizontal-label-widthBase; + } + + .#{$ns}Form-itemColumn--md { + width: $Form--horizontal-label-widthMd; + } + + .#{$ns}Form-itemColumn--lg { + width: $Form--horizontal-label-widthLg; + } + + @for $i from (1) through $Form--horizontal-columns { + .#{$ns}Form-itemColumn--#{$i} { + flex: 0 0 percentage($i / $Form--horizontal-columns); + max-width: percentage($i / $Form--horizontal-columns); + min-height: 1px; + } + } } - .#{$ns}Form-rowInner { - display: flex; - flex-wrap: nowrap; + &--inline { + display: inline-block; + vertical-align: top; - >.#{$ns}Form-label { - display: inline-block; - vertical-align: top; - padding-top: $Form-label-paddingTop; - padding-right: $Form-row-gutterWidth; + > .#{$ns}Form-label { + padding-top: $Form-label-paddingTop; + margin-bottom: 0; + margin-right: $Form-item-gap/2; + + .#{$ns}Form-star { + position: static; + } + } + + > .#{$ns}Form-value { + display: inline; + + > .#{$ns}Form-control { + vertical-align: top; + display: inline-block; } - >.#{$ns}Form-control { - flex-basis: 0; - flex-grow: 1; + > .#{$ns}Form-control.#{$ns}InputGroup { + display: inline-flex; } + + > .#{$ns}TextControl--withAddOn { + display: inline-flex; + } + } } -} \ No newline at end of file + } + + .#{$ns}Form-row { + display: flex; + flex-wrap: wrap; + + margin-left: -$Form-row-gutterWidth / 2; + margin-right: -$Form-row-gutterWidth / 2; + align-items: flex-start; + + > * { + padding-left: $Form-row-gutterWidth / 2; + padding-right: $Form-row-gutterWidth / 2; + } + } + + .#{$ns}Form-col { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + } + + .#{$ns}Form-rowInner { + display: flex; + flex-wrap: nowrap; + + > .#{$ns}Form-label { + display: inline-block; + vertical-align: top; + padding-top: $Form-label-paddingTop; + padding-right: $Form-row-gutterWidth; + } + + > .#{$ns}Form-control { + flex-basis: 0; + flex-grow: 1; + } + } +} diff --git a/src/store/formItem.ts b/src/store/formItem.ts index 66e1d646..03b7d82a 100644 --- a/src/store/formItem.ts +++ b/src/store/formItem.ts @@ -85,9 +85,6 @@ export const FormItemStore = types return self.errorData.map(item => item.msg); } - let lastQueryValue: any; - let lastResult: any = []; - return { get form(): any { return getForm(); @@ -117,13 +114,8 @@ export const FormItemStore = types }, getSelectedOptions: (value: any = getValue()) => { - if (value === lastQueryValue) { - return lastResult; - } - lastQueryValue = value; - if (typeof value === 'undefined') { - return (lastResult = []); + return []; } const selected = Array.isArray(value) @@ -183,7 +175,7 @@ export const FormItemStore = types unMatched && selectedOptions.push(unMatched); }); - return (lastResult = selectedOptions); + return selectedOptions; } }; })