@cloudbase/weda-ui 3.11.11 → 3.12.0

package/dist/configs/utils/field.js

@@ -0,0 +1,508 @@
+const $index_container_template = `
+
+[[template.items.items.items]]
+component = "Container"
+label= "序号"
+scopedStyle = """
+.wd-pc-form-obj-root .table-option-box{
+  position: sticky;
+  right: 0;
+  width: 50px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #fff;
+}
+.wd-h5-form-obj-root .table-option-box{
+ background-color: #f1f2f5;
+ padding: 10px;
+}
+.wd-mp-form-obj-root .table-option-box{
+ background-color: #f1f2f5;
+ padding: 10px;
+}"""
+[template.items.items.items.attributes]
+class = "table-option-box"
+
+
+[[template.items.items.items.items]]
+component = "Container"
+scopedStyle = """
+.wd-pc-form-obj-root .table-option-wrap{
+width: 100%;
+height: 52px;
+background-color: #f3f3f3;
+align-items: center;
+justify-content: center;
+}"""
+
+  [template.items.items.items.items.attributes]
+  class = "table-option-wrap"
+
+  [[template.items.items.items.items.items]]
+  component = "WdText"
+
+    [template.items.items.items.items.items.attributes]
+    inheritColor = true
+    maxLines = "1"
+    text = "序号"
+
+    [template.items.items.items.items.items.directives]
+    ":if" = true
+
+    [template.items.items.items.items.items.extra]
+
+  [template.items.items.items.items.directives]
+  ":if" = "$w.wedaContext.platforms.includes('PCWEB')"
+
+  [template.items.items.items.items.extra]
+
+[[template.items.items.items.items]]
+component = "Container"
+
+  [template.items.items.items.items.attributes]
+  data = { }
+
+    [template.items.items.items.items.attributes.style]
+    flex = 1
+    display = "flex"
+    alignItems = "center"
+
+  [[template.items.items.items.items.items]]
+  id = "text4"
+  component = "WdText"
+
+    [template.items.items.items.items.items.attributes]
+    inheritColor = true
+    maxLines = "1"
+    ":text" = "$w.index_{{$self.id}}+1"
+`;
+const $delete_button_template = `
+[[template.items.items.items]]
+component = "Container"
+label= "操作列"
+ scopedStyle = """
+.wd-pc-form-obj-root .table-option-box{
+ position: sticky;
+  right: 0;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #fff;
+  border-top: 1px solid #dcdcdc;
+}
+.wd-pc-form-obj-root  .table-option-box::before{
+  content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -25px;
+    width: 25px;
+    box-shadow: inset -8px 0 4px -7px rgb(0 0 0 / 10%)
+}
+.wd-mp-form-obj-root .delete-option{
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
+.wd-h5-form-obj-root .delete-option{
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}"""
+[template.items.items.items.attributes]
+class = "table-option-box delete-option"
+[[template.items.items.items.items]]
+component = "Container"
+        scopedStyle = """
+.wd-pc-form-obj-root .table-option-wrap{
+  width: 100%;
+  height: 52px;
+  background-color: #f3f3f3;
+  align-items: center;
+  justify-content: center;
+}"""
+
+  [template.items.items.items.items.attributes]
+          class = "table-option-wrap"
+
+          [[template.items.items.items.items.items]]
+          component = "WdText"
+
+            [template.items.items.items.items.items.attributes]
+            inheritColor = true
+            maxLines = "1"
+            text = "操作"
+
+
+          [template.items.items.items.items.directives]
+          ":if" = "$w.wedaContext.platforms.includes('PCWEB')"
+
+
+        [[template.items.items.items.items]]
+        component = "Container"
+
+          [template.items.items.items.items.attributes]
+
+            [template.items.items.items.items.attributes.style]
+            flex = 1
+            display = "flex"
+            alignItems = "center"
+
+          [[template.items.items.items.items.items]]
+          component = "WdIcon"
+          scopedStyle = """
+:scope {
+  right: var(--wd-card-heder-pd-bordered);
+  top: var(--wd-card-heder-pd-bordered);
+  color: var(--wd-color-brand);
+}
+
+:scope.wd-mp-icon {
+  top: var(--wd-card-heder-pd-bordered);
+}"""
+
+            [template.items.items.items.items.items.attributes]
+            name = "td:delete"
+            size = "sm"
+
+            [[template.items.items.items.items.items.listeners]]
+            eventName = "tap"
+            type = "platform"
+            isCapturePhase = false
+            noPropagation = false
+
+              [template.items.items.items.items.items.listeners.handler]
+              name = "invoke"
+              module = "platform"
+
+                [template.items.items.items.items.items.listeners.handler.params]
+                component = "{{$self.id}}"
+                method = "remove"
+
+                  [template.items.items.items.items.items.listeners.handler.params.params]
+                  ":index" = "$w.index_{{$self.id}}"
+`;
+const $add_button_template = `
+[[template]]
+component = 'Container'
+label= "新增按钮"
+scopedStyle = """
+:scope {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  color: var(--wd-color-brand);
+  margin-top: 5px;
+  padding:0 10px;
+}"""
+[[template.listeners]]
+eventName = "tap"
+type = "platform"
+[template.listeners.handler]
+module = "platform"
+name = "invoke"
+[template.listeners.handler.params]
+component = "{{$self.id}}"
+method = "add"
+[[template.items]]
+component = 'WdIcon'
+scopedStyle = ":scope{\n  margin-right: 5px;\n}"
+[template.items.attributes]
+name = "td:add-circle"
+[[template.items]]
+component = 'WdText'
+scopedStyle = ":scope{\n    color: var(--wd-color-brand);\n}"
+[template.items.attributes]
+text = "新增"
+`;
+// 表格模板
+export const $table_template = `
+[attributes]
+value = [{}]
+":addDefaultValue"="{}"
+[[template]]
+component = "Container"
+label= "表格模板"
+scopedStyle = """
+.wd-pc-form-obj-root .table-wrap{
+  width: 900px;
+  overflow: auto;
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  position: relative;
+}
+.wd-pc-form-obj-root .table-wrap .table-container .table .wd-form-item-wrap__label {
+  display: none;
+}
+.wd-pc-form-obj-root .table-wrap .table-container:first-child .table .wd-form-item-wrap__label {
+  display: flex;
+  height: 52px;
+}
+.wd-pc-form-obj-root .table-wrap .table-container .table-option-wrap {
+  display: none;
+}
+.wd-pc-form-obj-root .table-wrap .table-container:first-child .table-option-wrap {
+  display: flex;
+}
+
+.wd-pc-form-obj-root .table-wrap .table-container .table .wd-form-item{
+  margin-top: 0 !important;
+}
+.wd-pc-form-obj-root .table-wrap .table-container:first-child .table-field-box{
+  border-top: 0 !important;
+}
+.wd-pc-form-obj-root .table-wrap .table-container:first-child .table-option-box{
+  border-top: 0 !important;
+}
+
+.wd-h5-form-obj-root .table-wrap{
+  border: 1px solid #dcdcdc;
+}
+.wd-mp-form-obj-root .table-wrap{
+  border: 1px solid #dcdcdc;
+}"""
+
+[template.attributes]
+class = "table-wrap"
+
+[[template.items]]
+component = "Repeater"
+
+[template.items.attributes]
+":data" = "($w.{{$self.id}}.value || [])"
+suffix = '{{$self.id}}'
+forItem = 'item_{{$self.id}}'
+forIndex = 'index_{{$self.id}}'
+
+[[template.items.items]]
+component = "Container"
+ scopedStyle = """
+.wd-pc-form-obj-root  .table-container{
+  display: flex;
+}
+.wd-pc-form-obj-root .table-container .wd-form-obj-item{
+ padding: 0;
+}
+
+.wd-h5-form-obj-root .table-container {
+  position: relative;
+}
+.wd-mp-form-obj-root .table-container {
+  position: relative;
+}"""
+
+[template.items.items.attributes]
+class = "table-container"
+
+${$index_container_template}
+
+[[template.items.items.items]]
+component = "Container"
+label= "表单子项"
+scopedStyle = """
+.wd-pc-form-obj-root .table-field-box{
+  flex: 1;
+  border-top: 1px solid #dcdcdc;
+}"""
+[template.items.items.items.attributes]
+class = "table-field-box"
+
+[[template.items.items.items.items]]
+component = "WdFormObj"
+
+[template.items.items.items.items.attributes]
+isRoot = false
+mode = "custom"
+":label" = "\`\${$w.{{$self.id}}.label}[\${$w.index_{{$self.id}} + 1}]\`"
+":name" = "$w.index_{{$self.id}}"
+status = "edit"
+
+
+[[template.items.items.items.items.items]]
+component = "Container"
+scopedStyle = """
+.wd-pc-form-obj-root .table{
+   display: flex;
+}
+.wd-pc-form-obj-root .table .wd-form-item-wrap{
+  flex-direction: column !important;
+}
+.wd-pc-form-obj-root .table .wd-form-item-wrap .wd-form-item-wrap__label{
+  background-color: #f3f3f3;
+  margin: 0;
+  padding: 10px;
+  width: 100%;
+}
+.wd-pc-form-obj-root .table .wd-form-item-wrap .wd-form-item-wrap__control{
+  padding: 10px;
+}
+/* .table .wd-form-item-wrap  .wd-form-item-wrap__control{
+  min-width:320px;
+} */
+.wd-pc-form-obj-root .table .wd-form-item-wrap {
+  min-width:300px;
+}
+
+.wd-h5-form-obj-root .table{
+   padding: 0 10px;
+}
+
+.wd-mp-form-obj-root .table{
+   padding: 0 10px;
+}"""
+
+[template.items.items.items.items.items.attributes]
+class = "table"
+templateContainer=true
+
+
+
+${$delete_button_template}
+
+${$add_button_template}
+`;
+// 默认卡片模板
+export const $attached_template = `
+[attributes]
+value = [{}]
+":addDefaultValue"="{}"
+[[template]]
+component = "Repeater"
+[template.attributes]
+":data" = "($w.{{$self.id}}.value || [])"
+suffix = '{{$self.id}}'
+forItem = 'item_{{$self.id}}'
+forIndex = 'index_{{$self.id}}'
+[[template.items]]
+component = "Container"
+label= "表单子项"
+scopedStyle = ":scope {\n  position: relative;\n  width: 100%;\n}"
+[[template.items.items]]
+component = 'WdFormObj'
+[template.items.items.attributes]
+":label" = "\`\${$w.{{$self.id}}.label}[\${$w.index_{{$self.id}} + 1}]\`"
+":name" = "$w.index_{{$self.id}}"
+isRoot = false
+value = {}
+
+templateContainer=true
+
+[[template.items.items]]
+component = 'WdIcon'
+label= "删除按钮"
+scopedStyle = ":scope {\n  position: absolute;\n  right: var(--wd-card-heder-pd-bordered);\n  top: var(--wd-card-heder-pd-bordered);\n  color: var(--wd-color-brand);\n}\n\n:scope.wd-mp-icon {\n  top: var(--wd-card-heder-pd-bordered);\n}"
+[template.items.items.attributes]
+name = "td:delete"
+size = "sm"
+[[template.items.items.listeners]]
+eventName = "tap"
+type = "platform"
+[template.items.items.listeners.handler]
+module = "platform"
+name = "invoke"
+[template.items.items.listeners.handler.params]
+component = "{{$self.id}}"
+method = "remove"
+[template.items.items.listeners.handler.params.params]
+":index" = "$w.index_{{$self.id}}"
+
+${$add_button_template}
+`;
+// 自定义模板
+export const $custom_template = `
+[attributes]
+value = [{}]
+":addDefaultValue"="{}"
+[[template]]
+component = "Repeater"
+[template.attributes]
+":data" = "($w.{{$self.id}}.value || [])"
+suffix = '{{$self.id}}'
+forItem = 'item_{{$self.id}}'
+forIndex = 'index_{{$self.id}}'
+[[template.items]]
+component = "Container"
+label= "表单子项"
+[template.items.attributes.style]
+display = "flex"
+alignItems = "center"
+
+[[template.items.items]]
+component = 'WdFormObj'
+[template.items.items.attributes]
+":label" = "\`\${$w.{{$self.id}}.label}[\${$w.index_{{$self.id}} + 1}]\`"
+":name" = "$w.index_{{$self.id}}"
+isRoot = false
+value = {}
+mode = "custom"
+templateContainer=true
+
+[[template.items.items]]
+component = 'WdIcon'
+label= "删除按钮"
+scopedStyle =  ":scope {\n  color: var(--wd-color-brand);\n}"
+[template.items.items.attributes]
+name = "td:delete"
+size = "sm"
+[[template.items.items.listeners]]
+eventName = "tap"
+type = "platform"
+[template.items.items.listeners.handler]
+module = "platform"
+name = "invoke"
+[template.items.items.listeners.handler.params]
+component = "{{$self.id}}"
+method = "remove"
+[template.items.items.listeners.handler.params.params]
+":index" = "$w.index_{{$self.id}}"
+
+${$add_button_template}
+`;
+// 值数组模版
+export const $field_template = `
+[attributes]
+value = ['']
+":addDefaultValue"="undefined"
+[[template]]
+component = "Repeater"
+[template.attributes]
+":data" = "($w.{{$self.id}}.value || [])"
+suffix = '{{$self.id}}'
+forItem = 'item_{{$self.id}}'
+forIndex = 'index_{{$self.id}}'
+[[template.items]]
+component = "Container"
+scopedStyle = ":scope {\n display: flex;\n align-items: center;\n width: 100%;\n}"
+[[template.items.items]]
+component = 'WdInput'
+[template.items.items.attributes]
+":name" = "$w.index_{{$self.id}}"
+labelVisible = false
+value = {}
+[[template.items.items]]
+label= "删除按钮"
+component = 'WdIcon'
+scopedStyle = ":scope {\n  color: var(--wd-color-brand);\n  margin-left: 10px;\n}"
+[template.items.items.attributes]
+name = "td:delete"
+size = "sm"
+[[template.items.items.listeners]]
+eventName = "tap"
+type = "platform"
+[template.items.items.listeners.handler]
+module = "platform"
+name = "invoke"
+[template.items.items.listeners.handler.params]
+component = "{{$self.id}}"
+method = "remove"
+[template.items.items.listeners.handler.params.params]
+":index" = "$w.index_{{$self.id}}"
+
+${$add_button_template}
+`;

package/dist/style/index.css

@@ -353,7 +353,7 @@ page[theme-mode=light],
   --wd-color-success-focus: var(--wd-color-success-2);
   --wd-color-success-active: var(--wd-color-success-6);
   --wd-color-success-disabled: var(--wd-color-success-3);
-  --wd-bg-mask: rgba(var(--wd-black-rgb), 80%);
+  --wd-bg-mask: rgba(var(--wd-black-rgb), 50%);
   --wd-bg-mask-inverse: rgba(var(--wd-white-rgb), 60%);
   --wd-color-bg-page: var(--wd-color-gray-1);
   --wd-color-bg-container: var(--wd-white);
@@ -1497,6 +1497,8 @@ body .wd-h5-root {
   right: 0;
   top: 0;
   bottom: 0;
+  width: 80%;
+  margin: 0 auto;
 }
 
 .wd-image-mask {
@@ -1551,6 +1553,33 @@ body .wd-h5-root {
   height: 100%;
 }
 
+.wd-image__zoom-in {
+  cursor: zoom-in;
+}
+
+.wd-image-preview-toolbar {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1002;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 150px;
+  color: #fff;
+}
+.wd-image-preview-toolbar .wd-icon-wrap {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--wd-font-gray-2);
+  cursor: pointer;
+}
+
 .wd-table-wrap {
   --wd-table-font-size: var(--wd-font-size-default);
   --wd-table-shadow: var(--wd-shadow-sm);
@@ -7155,7 +7184,7 @@ page[theme-mode=light],
   --wd-color-success-focus: var(--wd-color-success-2);
   --wd-color-success-active: var(--wd-color-success-6);
   --wd-color-success-disabled: var(--wd-color-success-3);
-  --wd-bg-mask: rgba(var(--wd-black-rgb), 80%);
+  --wd-bg-mask: rgba(var(--wd-black-rgb), 50%);
   --wd-bg-mask-inverse: rgba(var(--wd-white-rgb), 60%);
   --wd-color-bg-page: var(--wd-color-gray-1);
   --wd-color-bg-container: var(--wd-white);
@@ -10318,6 +10347,15 @@ page,
   width: fit-content;
   width: 100%;
 }
+.wd-form-obj-root .wd-form-obj .wd-form-item.size-width-sm {
+  width: 100%;
+}
+.wd-form-obj-root .wd-form-obj .wd-form-item.size-width-md {
+  width: 100%;
+}
+.wd-form-obj-root .wd-form-obj .wd-form-item.size-width-lg {
+  width: 100%;
+}
 .wd-form-obj-root.size-width-sm {
   width: 100%;
 }
@@ -10331,7 +10369,7 @@ page,
   width: 100%;
 }
 .wd-form-obj-root .wd-form-item-wrap .wd-form-item-wrap__control {
-  overflow: hidden;
+  overflow: unset;
 }
 .wd-form-obj-root .wd-form-item-wrap .wd-card-root {
   width: 100%;