amis 1.4.2-beta.1 → 1.4.2-beta.11

package/scss/components/form/_checks.scss

@@ -283,354 +283,3 @@
     color: #999;
   }
 }
-
-.#{$ns}Checkboxes {
-  > .#{$ns}Checkbox {
-    display: block;
-    height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm)
-      calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      calc(var(--gap-sm) + var(--Checkbox-size));
-  }
-
-  &--inline > .#{$ns}Checkbox {
-    display: inline-block;
-  }
-
-  &-addBtn {
-    display: block;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    > svg {
-      width: px2rem(14px);
-      height: px2rem(14px);
-      margin-right: var(--Checkbox-gap);
-    }
-  }
-}
-
-.#{$ns}ListCheckboxes,
-.#{$ns}ListRadios {
-  &-group:not(:first-child) > &-itemLabel {
-    border-top: px2rem(1px) solid var(--ListMenu-divider-color);
-  }
-
-  &-group > &-itemLabel {
-    font-size: var(--fontSizeSm);
-    padding: var(--gap-xs) var(--gap-xs);
-    color: var(--text--muted-color);
-  }
-
-  &-item {
-    display: flex;
-    height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
-    flex-direction: row;
-
-    > .#{$ns}Checkbox {
-      margin-right: 0;
-    }
-    cursor: pointer;
-    user-select: none;
-
-    &.is-active {
-      color: var(--Form-select-menu-onActive-color);
-      background: var(--Form-select-menu-onActive-bg);
-    }
-
-    &:hover {
-      background: var(--Tree-item-onHover-bg);
-    }
-
-    &.is-disabled {
-      pointer-events: none;
-      color: var(--text--muted-color);
-    }
-  }
-
-  &-group > &-items > &-item {
-    padding-left: var(--gap-base);
-  }
-
-  &-itemLabel {
-    flex-grow: 1;
-
-    span {
-      white-space: nowrap; // 避免在条件组合中折行
-    }
-  }
-
-  &-placeholder {
-    @include checkboxes-placeholder();
-  }
-}
-
-.#{$ns}TableCheckboxes {
-  .#{$ns}Table-content {
-    border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
-  }
-
-  .#{$ns}Table-table > thead > tr > th,
-  .#{$ns}Table-table > tbody > tr > td {
-    font-size: var(--fontSizeSm);
-    padding-top: var(--gap-xs);
-    padding-bottom: px2rem(6px);
-    vertical-align: middle;
-  }
-
-  .#{$ns}Table-table > thead > tr > th {
-    padding-top: px2rem(6px);
-  }
-
-  .#{$ns}Table-table > thead > tr > th:first-child,
-  .#{$ns}Table-table > tbody > tr > td:first-child {
-    padding-left: px2rem(10px);
-    padding-right: 0;
-  }
-
-  .#{$ns}Table-table > thead > tr > th:last-child,
-  .#{$ns}Table-table > tbody > tr > td:last-child {
-    padding-right: var(--gap-md);
-  }
-
-  .#{$ns}Table-table > tbody > tr {
-    cursor: pointer;
-  }
-}
-
-.#{$ns}TreeCheckboxes,
-.#{$ns}TreeRadios {
-  .#{$ns}Table-expandBtn {
-    color: var(--icon-color);
-    margin-right: 5px;
-  }
-
-  &-sublist {
-    position: relative;
-    margin: 0 0 0 px2rem(35px);
-    display: none;
-
-    &:before {
-      width: 1px;
-      content: '';
-      display: block;
-      position: absolute;
-      top: calc(var(--gap-xs) * -1);
-      bottom: calc(var(--Form-input-height) / 2);
-      left: -19px;
-      border-left: dashed 1px var(--icon-color);
-    }
-  }
-
-  &-item {
-    position: relative;
-  }
-  &-item.is-expanded > &-sublist {
-    display: block;
-  }
-
-  &-item:not(:last-child) > &-sublist:before {
-    bottom: 0;
-  }
-
-  &-sublist &-item:before {
-    height: 1px;
-    content: '';
-    display: block;
-    position: absolute;
-    top: calc(var(--Form-input-height) / 2);
-    width: 19px;
-    left: -19px;
-    border-top: dashed 1px var(--icon-color);
-  }
-
-  &-itemInner {
-    display: flex;
-    align-items: center;
-    height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
-    flex-direction: row;
-
-    > .#{$ns}Checkbox {
-      margin-right: 0;
-      margin-left: var(--gap-sm);
-    }
-    cursor: pointer;
-    user-select: none;
-
-    position: relative;
-    & > * {
-      position: relative;
-      z-index: 2;
-    }
-
-    &:hover:after {
-      position: absolute;
-      content: '';
-      z-index: 1;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: -99999px;
-      background: var(--Tree-item-onHover-bg);
-    }
-
-    &.is-active {
-      color: var(--Form-select-menu-onActive-color);
-    }
-
-    &.is-disabled {
-      pointer-events: none;
-      color: var(--text--muted-color);
-    }
-  }
-
-  &-itemLabel {
-    flex-grow: 1;
-  }
-
-  &-placeholder {
-    @include checkboxes-placeholder();
-  }
-}
-
-.#{$ns}ChainedCheckboxes {
-  display: flex;
-  flex-direction: row;
-
-  &-col {
-    flex-grow: 1;
-    min-width: 150px;
-  }
-
-  &-col:not(:last-child) {
-    border-right: 1px solid var(--borderColor);
-  }
-
-  &-subTitle {
-    font-size: var(--fontSizeSm);
-    padding: var(--gap-xs) var(--gap-xs);
-    color: var(--text--muted-color);
-  }
-
-  &-item {
-    display: flex;
-    height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
-    flex-direction: row;
-
-    > .#{$ns}Checkbox {
-      margin-right: 0;
-    }
-    cursor: pointer;
-    user-select: none;
-
-    &.is-active {
-      color: var(--Form-select-menu-onActive-color);
-      background: var(--Form-select-menu-onActive-bg);
-    }
-
-    &:hover {
-      background: var(--Tree-item-onHover-bg);
-    }
-
-    &.is-disabled {
-      pointer-events: none;
-      color: var(--text--muted-color);
-    }
-  }
-
-  &-itemLabel {
-    flex-grow: 1;
-  }
-
-  &-placeholder {
-    @include checkboxes-placeholder();
-  }
-}
-
-.#{$ns}AssociatedCheckboxes {
-  display: flex;
-  flex-direction: row;
-
-  &-left,
-  &-right {
-    flex-grow: 1;
-    width: 0;
-    height: px2rem(175px);
-    overflow: auto;
-  }
-
-  &-left {
-    border-right: 1px solid var(--borderColor);
-  }
-
-  &-reload {
-    text-align: center;
-    color: var(--info);
-    margin: 20px 0 0;
-
-    &.is-clickable {
-      cursor: pointer;
-    }
-  }
-
-  &-box {
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--fontSizeSm);
-    color: var(--text--muted-color);
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-
-    > p {
-      text-align: center;
-      margin: 10px 0 20px;
-      color: var(--text--muted-color);
-    }
-  }
-}

package/scss/components/form/_fieldset.scss

@@ -41,10 +41,14 @@ fieldset.#{$ns}Collapse {
     margin: var(--gap-base) 0;
     padding: 0 0 0 14px;
     cursor: pointer;
-    border-bottom: 0;
+    border-bottom: none !important;
+    background: transparent;
     display: flex;
     flex-direction: row;
     // width: 100%;
+    &:hover {
+      background: transparent;
+    }
   }
 
   &--xs {

package/scss/components/form/_selection.scss

@@ -0,0 +1,354 @@
+.#{$ns}Selection {
+  > .#{$ns}Checkbox {
+    display: block;
+    height: var(--Form-input-height);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm)
+      calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      calc(var(--gap-sm) + var(--Checkbox-size));
+  }
+
+  &--inline > .#{$ns}Checkbox {
+    display: inline-block;
+  }
+
+  &-addBtn {
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    > svg {
+      width: px2rem(14px);
+      height: px2rem(14px);
+      margin-right: var(--Checkbox-gap);
+    }
+  }
+}
+
+.#{$ns}GroupedSelection {
+  &-group:not(:first-child) > &-itemLabel {
+    border-top: px2rem(1px) solid var(--ListMenu-divider-color);
+  }
+
+  &-group > &-itemLabel {
+    font-size: var(--fontSizeSm);
+    padding: var(--gap-xs) var(--gap-xs);
+    color: var(--text--muted-color);
+  }
+
+  &-item {
+    display: flex;
+    height: var(--Form-input-height);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm);
+    flex-direction: row;
+
+    > .#{$ns}Checkbox {
+      margin-right: 0;
+    }
+    cursor: pointer;
+    user-select: none;
+
+    &.is-active {
+      color: var(--Form-select-menu-onActive-color);
+      background: var(--Form-select-menu-onActive-bg);
+    }
+
+    &:hover {
+      background: var(--Tree-item-onHover-bg);
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      color: var(--text--muted-color);
+    }
+  }
+
+  &-group > &-items > &-item {
+    padding-left: var(--gap-base);
+  }
+
+  &-itemLabel {
+    flex-grow: 1;
+
+    span {
+      white-space: nowrap; // 避免在条件组合中折行
+    }
+  }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+}
+
+.#{$ns}TableSelection {
+  .#{$ns}Table-content {
+    border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
+  }
+
+  .#{$ns}Table-table > thead > tr > th,
+  .#{$ns}Table-table > tbody > tr > td {
+    font-size: var(--fontSizeSm);
+    padding-top: var(--gap-xs);
+    padding-bottom: px2rem(6px);
+    vertical-align: middle;
+  }
+
+  .#{$ns}Table-table > thead > tr > th {
+    padding-top: px2rem(6px);
+  }
+
+  .#{$ns}Table-table > thead > tr > th:first-child,
+  .#{$ns}Table-table > tbody > tr > td:first-child {
+    padding-left: px2rem(10px);
+    padding-right: 0;
+  }
+
+  .#{$ns}Table-table > thead > tr > th:last-child,
+  .#{$ns}Table-table > tbody > tr > td:last-child {
+    padding-right: var(--gap-md);
+  }
+
+  .#{$ns}Table-table > tbody > tr {
+    cursor: pointer;
+  }
+
+  .#{$ns}Table-table > tbody > tr.is-active {
+    color: var(--Form-select-menu-onActive-color);
+    background: var(--Form-select-menu-onActive-bg);
+  }
+}
+
+.#{$ns}TreeSelection {
+  .#{$ns}Table-expandBtn {
+    color: var(--icon-color);
+    margin-right: 5px;
+  }
+
+  &-sublist {
+    position: relative;
+    margin: 0 0 0 px2rem(35px);
+    display: none;
+
+    &:before {
+      width: 1px;
+      content: '';
+      display: block;
+      position: absolute;
+      top: calc(var(--gap-xs) * -1);
+      bottom: calc(var(--Form-input-height) / 2);
+      left: -19px;
+      border-left: dashed 1px var(--icon-color);
+    }
+  }
+
+  &-item {
+    position: relative;
+  }
+  &-item.is-expanded > &-sublist {
+    display: block;
+  }
+
+  &-item:not(:last-child) > &-sublist:before {
+    bottom: 0;
+  }
+
+  &-sublist &-item:before {
+    height: 1px;
+    content: '';
+    display: block;
+    position: absolute;
+    top: calc(var(--Form-input-height) / 2);
+    width: 19px;
+    left: -19px;
+    border-top: dashed 1px var(--icon-color);
+  }
+
+  &-itemInner {
+    display: flex;
+    align-items: center;
+    height: var(--Form-input-height);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm);
+    flex-direction: row;
+
+    > .#{$ns}Checkbox {
+      margin-right: 0;
+      margin-left: var(--gap-sm);
+    }
+    cursor: pointer;
+    user-select: none;
+
+    position: relative;
+    & > * {
+      position: relative;
+      z-index: 2;
+    }
+
+    &:hover:after {
+      position: absolute;
+      content: '';
+      z-index: 1;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: -99999px;
+      background: var(--Tree-item-onHover-bg);
+    }
+
+    &.is-active {
+      color: var(--Form-select-menu-onActive-color);
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      color: var(--text--muted-color);
+    }
+  }
+
+  &-itemLabel {
+    flex-grow: 1;
+  }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+}
+
+.#{$ns}ChainedSelection {
+  display: flex;
+  flex-direction: row;
+
+  &-col {
+    flex-grow: 1;
+    min-width: 150px;
+  }
+
+  &-col:not(:last-child) {
+    border-right: 1px solid var(--borderColor);
+  }
+
+  &-subTitle {
+    font-size: var(--fontSizeSm);
+    padding: var(--gap-xs) var(--gap-xs);
+    color: var(--text--muted-color);
+  }
+
+  &-item {
+    display: flex;
+    height: var(--Form-input-height);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm);
+    flex-direction: row;
+
+    > .#{$ns}Checkbox {
+      margin-right: 0;
+    }
+    cursor: pointer;
+    user-select: none;
+
+    &.is-active {
+      color: var(--Form-select-menu-onActive-color);
+      background: var(--Form-select-menu-onActive-bg);
+    }
+
+    &:hover {
+      background: var(--Tree-item-onHover-bg);
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      color: var(--text--muted-color);
+    }
+  }
+
+  &-itemLabel {
+    flex-grow: 1;
+  }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+}
+
+.#{$ns}AssociatedSelection {
+  display: flex;
+  flex-direction: row;
+
+  &-left,
+  &-right {
+    flex-grow: 1;
+    width: 0;
+    min-height: px2rem(200px);
+    max-height: px2rem(400px);
+    overflow: auto;
+  }
+
+  &-left {
+    border-right: 1px solid var(--borderColor);
+  }
+
+  &-reload {
+    text-align: center;
+    color: var(--info);
+    margin: 20px 0 0;
+
+    &.is-clickable {
+      cursor: pointer;
+    }
+  }
+
+  &-box {
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--fontSizeSm);
+    color: var(--text--muted-color);
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    > p {
+      text-align: center;
+      margin: 10px 0 20px;
+      color: var(--text--muted-color);
+    }
+  }
+}