@cloudbase/weda-ui-mp 3.6.0

package/components/formdetail/index.wxss

@@ -0,0 +1,277 @@
+@import '../../style/wd-design.wxss';
+@import './wd-form-detail.wxss';
+
+.form-detail-wrap {
+  width: 100%;
+}
+.form-detail-wrap .form-detail-content-wrap {
+  border: 1px solid #dcdcdc;
+  margin-top: 12px;
+  overflow: hidden;
+}
+.form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container {
+  margin-top: 0;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #f1f2f5;
+  padding: 13px 20px;
+  border-bottom: 1px solid #dcdcdc;
+}
+.form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container
+  .form-detail-title-container {
+  display: flex;
+  color: rgba(0, 0, 0, 0.9);
+}
+.form-detail-wrap .form-detail-content-wrap .form-detail-header-text {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgba(0, 0, 0, 0.9);
+  flex: 1;
+}
+.form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-content-container {
+  padding: 15px 16px;
+}
+.form-detail-wrap .form-detail-add-button,
+.form-detail-wrap .form-detail-delete-button {
+  cursor: pointer;
+  color: var(--wd-color-brand, #0052d9);
+  font-size: 14px;
+}
+
+.form-detail-wrap .form-detail-add-button {
+  padding: 8px 16px 16px 16px;
+  display: inline-flex;
+  align-items: center;
+}
+.form-detail-wrap .form-detail-add-button > .weda-ui {
+  vertical-align: text-bottom;
+  padding-right: 5px;
+}
+.h5-form-detail-wrap {
+  width: 100%;
+}
+.h5-form-detail-wrap .form-detail-content-wrap {
+  margin: 0;
+  border: none;
+}
+.h5-form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container {
+  height: 40px;
+  border: none;
+}
+.h5-form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-content-container {
+  width: 100%;
+  padding: 0;
+}
+.form-detail-wrap .form-detail-title-index {
+  padding-left: 5px;
+}
+.form-detail-wrap .form-detail-title-index::before {
+  content: '(';
+}
+.form-detail-wrap .form-detail-title-index::after {
+  content: ')';
+}
+.h5-form-detail-wrap .form-detail-add-button {
+  font-size: 16px;
+  line-height: 1;
+}
+.h5-form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container {
+  position: relative;
+}
+.h5-form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container::before {
+  content: '';
+  width: 100%;
+  position: absolute;
+  height: 1px;
+  background: #f1f2f5;
+  top: -1px;
+  left: 0;
+  z-index: 5;
+}
+.h5-form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container::after {
+  content: '';
+  width: 100%;
+  position: absolute;
+  height: 1px;
+  background: #f1f2f5;
+  bottom: -1px;
+  left: 0;
+  z-index: 5;
+}
+/* 子表单样式更新 */
+.form-detail-flex-wrap {
+  display: flex;
+}
+.form-detail-flex-wrap.h5-form-detail-wrap {
+  flex-direction: column;
+  padding: 0 5px;
+}
+.form-detail-flex-wrap.h5-form-detail-wrap .form-detail-content-wrap {
+  border: 1px solid #dcdcdc;
+  border-bottom: none;
+  border-top: none;
+  position: relative;
+}
+.form-detail-flex-wrap.h5-form-detail-wrap
+  .form-detail-content-wrap:first-child {
+  border-top: 1px solid #dcdcdc;
+}
+.form-detail-flex-wrap.h5-form-detail-wrap .form-detail-content-wrap::after {
+  content: '';
+  width: 100%;
+  position: absolute;
+  height: 1px;
+  background: #dcdcdc;
+  bottom: 0px;
+  left: 0;
+  z-index: 5;
+}
+.form-detail-flex-wrap.h5-form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container::before {
+  display: none;
+}
+.form-detail-group-parent-container {
+  flex: 1;
+}
+.form-detail-flex-wrap.h5-form-detail-wrap .form-detail-group-label-container {
+  padding: 16px 16px 16px 11px;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  width: auto;
+}
+
+.form-detail-group-label-container {
+  padding: 7px 4px 7px 0;
+  width: 102px;
+}
+.form-detail-wrap.form-detail-flex-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container {
+  padding: 13px 15px;
+}
+.form-detail-wrap.form-detail-flex-wrap .form-detail-title-index {
+  padding-left: 0;
+}
+/* 子表单禁用样式 */
+.form-detail-wrap.disabled .form-detail-delete-button,
+.form-detail-wrap.disabled .form-detail-add-button {
+  cursor: not-allowed;
+  color: #bbd3fb;
+}
+.form-detail-wrap.disabled .form-detail-add-button .t-icon {
+  color: #bbd3fb !important;
+}
+.form-detail-wrap.disabled .form-detail-group-content-container {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.form-detail-wrap.disabled .form-detail-delete-button .wd-typography,
+.form-detail-wrap.disabled .form-detail-add-button .wd-typography {
+  cursor: not-allowed;
+  color: #bbd3fb;
+}
+.form-detail-wrap.disabled
+  .form-detail-group-content-container
+  .weui-uploader__input {
+  z-index: -1;
+}
+.form-detail-wrap.readOnly .form-detail-delete-button,
+.form-detail-wrap.readOnly .form-detail-add-button {
+  display: none;
+}
+/* 升级后组件样式兼容 */
+/* theme */
+.form-detail-wrap .form-detail-add-button .wd-typography,
+.form-detail-wrap .form-detail-delete-button .wd-typography {
+  color: var(--wd-color-brand, #0052d9);
+  margin-bottom: 0;
+}
+.form-detail-wrap .form-detail-add-button .wd-icon {
+  color: var(--wd-color-brand, #0052d9);
+}
+
+.form-detail-wrap .wd-grid-col.wd-g-align-self-auto {
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+.form-detail-wrap .wd-grid-col.formrichtext {
+  display: none;
+}
+.form-detail-wrap.mp-form-detail-wrap
+  .form-detail-content-wrap
+  .form-detail-group-header-container {
+  border-top: 1px solid #dcdcdc;
+}
+.form-detail-flex-wrap.mp-form-detail-wrap.h5-form-detail-wrap
+  .form-detail-content-wrap:first-child {
+  border-top: none;
+}
+.form-detail-wrap.form-detail-list .wd-grid-col.tableIndexContainer {
+  display: none;
+}
+
+.form-detail-flex-wrap .wd-grid-row > view,
+.form-detail-wrap .wd-grid .wd-grid-row > view {
+  margin: 0;
+}
+
+.form-detail-flex-wrap .form-detail-content-wrap .wd-grid-row {
+  margin: 0;
+}
+
+/* 标准化 start */
+
+.wd-form.wd-form--weui
+  .wd-form-item.wd-mp-form-detail-root
+  > .wd-form-item-wrap,
+.wd-form-item.wd-mp-form-detail-root > .wd-form-item-wrap {
+  border-bottom: none;
+}
+
+.wd-form-item.wd-mp-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-left,
+.wd-form-item.wd-mp-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-right {
+  padding: 0;
+}
+
+.wd-form-item.wd-mp-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-left
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__label,
+.wd-form-item.wd-mp-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-right
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__label {
+  padding: var(--wd-form-item-pd);
+}
+
+.wd-form-item.wd-mp-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-left
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__control,
+.wd-form-item.wd-mp-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-right
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__control {
+  padding: 0;
+  min-height: auto;
+}
+/* 标准化 end */

package/components/formdetail/wd-form-detail.wxss

@@ -0,0 +1,245 @@
+@charset "UTF-8";
+.wd-g-text-default {
+  color: var(--wd-color-text-default);
+}
+
+.wd-g-text-secondary {
+  color: var(--wd-color-text-secondary);
+}
+
+.wd-g-text-placeholder {
+  color: var(--wd-color-text-placeholder);
+}
+
+.wd-g-text-disabled {
+  color: var(--wd-color-text-disabled);
+}
+
+.wd-g-text-brand {
+  color: var(--wd-color-text-brand);
+}
+
+.wd-g-text-error {
+  color: var(--wd-color-text-error);
+}
+
+.wd-g-text-success {
+  color: var(--wd-color-text-success);
+}
+
+.wd-g-text-refresh {
+  color: var(--wd-color-brand);
+}
+
+.wd-g-text-warning,
+.wd-g-text-warn {
+  color: var(--wd-color-text-warning);
+}
+
+.wd-g-text-ellipsis-1 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 1;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-2 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 2;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-3 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 3;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-4 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 4;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-5 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 5;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-6 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 6;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-7 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 7;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-8 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 8;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-9 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 9;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-text-ellipsis-10 {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 10;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+
+.wd-g-user-select-auto {
+  user-select: auto;
+}
+
+.wd-g-user-select-none {
+  user-select: none;
+}
+
+.wd-g-white-space-pre-line {
+  white-space: pre-line;
+}
+
+.wd-g-white-space-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.wd-g-white-space-pre {
+  white-space: pre;
+}
+
+.wd-g-word-break {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.wd-form-item.wd-form-item--detail-vertical-right > .wd-form-item-wrap {
+  align-items: flex-end;
+  flex-direction: column;
+}
+.wd-form-item.wd-form-item--detail-vertical-right > .wd-form-item-wrap > .wd-form-item-wrap__label {
+  width: 100%;
+  justify-content: flex-start;
+  margin-right: 0;
+  text-align: right;
+  line-height: 0;
+  padding-bottom: calc(var(--wd-space-base) * 2);
+}
+.wd-form-item.wd-form-item--detail-vertical-right > .wd-form-item-wrap > .wd-form-item-wrap__label > label {
+  line-height: var(--wd-font-line-height-default) !important;
+}
+.wd-form-item.wd-form-item--detail-vertical-right > .wd-form-item-wrap > .wd-form-item-wrap__label.is-nowrap.wd-form-item-wrap__label > label {
+  justify-content: flex-end;
+}
+.wd-form-item.wd-form-item--detail-vertical-right > .wd-form-item__help {
+  padding-left: 0;
+}
+.wd-form-item.wd-form-item--detail-vertical-right .wd-form-item-wrap__control {
+  flex: auto;
+}
+
+.wd-form-item.wd-form-item--detail-vertical-left > .wd-form-item-wrap {
+  align-items: flex-start;
+  flex-direction: column;
+}
+.wd-form-item.wd-form-item--detail-vertical-left > .wd-form-item-wrap > .wd-form-item-wrap__label {
+  width: 100%;
+  justify-content: flex-start;
+  margin-right: 0;
+  line-height: 0;
+  padding-bottom: calc(var(--wd-space-base) * 2);
+}
+.wd-form-item.wd-form-item--detail-vertical-left > .wd-form-item-wrap > .wd-form-item-wrap__label > label {
+  line-height: var(--wd-font-line-height-default) !important;
+}
+.wd-form-item.wd-form-item--detail-vertical-left > .wd-form-item-wrap > .wd-form-item-wrap__label.is-nowrap.wd-form-item-wrap__label > label {
+  justify-content: flex-start;
+}
+.wd-form-item.wd-form-item--detail-vertical-left > .wd-form-item__help {
+  padding-left: 0;
+}
+.wd-form-item.wd-form-item--detail-vertical-left .wd-form-item-wrap__control {
+  flex: auto;
+}
+
+.wd-form-item.wd-form-item--detail-horizontal-left > .wd-form-item-wrap > .wd-form-item-wrap__label {
+  text-align: left;
+}
+.wd-form-item.wd-form-item--detail-horizontal-left > .wd-form-item-wrap > .wd-form-item-wrap__label.is-nowrap.wd-form-item-wrap__label > label {
+  justify-content: flex-start;
+}
+.wd-form-item.wd-form-item--detail-horizontal-left .wd-form-item-wrap__control {
+  flex: auto;
+}
+
+.wd-form-item.wd-form-item--detail-horizontal-right > .wd-form-item-wrap > .wd-form-item-wrap__label {
+  text-align: right;
+}
+.wd-form-item.wd-form-item--detail-horizontal-right > .wd-form-item-wrap > .wd-form-item-wrap__label.is-nowrap.wd-form-item-wrap__label > label {
+  justify-content: flex-end;
+}
+.wd-form-item.wd-form-item--detail-horizontal-right .wd-form-item-wrap__control {
+  flex: auto;
+}
+
+.wd-form-item.wd-form-item--detail-horizontal-left > .wd-form-item-wrap,
+.wd-form-item.wd-form-item--detail-horizontal-right > .wd-form-item-wrap {
+  flex-direction: row;
+}
+.wd-form-item.wd-form-item--detail-horizontal-left > .wd-form-item-wrap > .wd-form-item-wrap__label,
+.wd-form-item.wd-form-item--detail-horizontal-right > .wd-form-item-wrap > .wd-form-item-wrap__label {
+  width: var(--wd-form-item-label-width);
+  margin-right: var(--wd-form-item-label-mr);
+}
+.wd-form-item.wd-form-item--detail-horizontal-left .wd-form-item-wrap__control,
+.wd-form-item.wd-form-item--detail-horizontal-right .wd-form-item-wrap__control {
+  flex: auto;
+}

package/components/graphicCard/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0857 7.49988L8.43938 3.85359L9.14649 3.14648L13.7878 7.78777C13.9049 7.90493 13.9049 8.09488 13.7878 8.21204L9.14649 12.8533L8.43938 12.1462L12.0857 8.49988L2 8.49971L2.00002 7.49971L12.0857 7.49988Z" fill="#0052D9"/>
+</svg>