From 23d25500401b4116b66c02118acfd1236f66e3b2 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Thu, 26 Sep 2024 20:38:44 +0800 Subject: [PATCH 01/13] refactor: apply new styles to props panel --- designer-demo/public/mock/bundle.json | 229 ++++++++++-------- packages/common/component/MetaChildItem.vue | 18 +- packages/common/component/MetaList.vue | 9 + .../ArrayItemConfigurator.vue | 25 +- .../ButtonGroupConfigurator.vue | 30 ++- packages/plugins/materials/src/js/options.js | 9 +- 6 files changed, 200 insertions(+), 120 deletions(-) diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json index f60003e403..dc4dc60f2a 100644 --- a/designer-demo/public/mock/bundle.json +++ b/designer-demo/public/mock/bundle.json @@ -88,10 +88,10 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { - "component": "MyInputConfigurator", + "component": "InputConfigurator", "props": {} } }, @@ -109,7 +109,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "defaultValue": "default", "widget": { @@ -146,7 +146,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -167,7 +167,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "I18nConfigurator", @@ -189,7 +189,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "number", "widget": { "component": "NumberConfigurator", @@ -211,7 +211,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": false, "type": "boolean", "widget": { @@ -380,7 +380,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "defaultValue": "default", "widget": { @@ -417,7 +417,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -438,7 +438,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "SwitchConfigurator", @@ -460,7 +460,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "SwitchConfigurator", @@ -482,7 +482,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "SwitchConfigurator", @@ -504,7 +504,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "SwitchConfigurator", @@ -526,7 +526,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "SwitchConfigurator", @@ -548,7 +548,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "SwitchConfigurator", @@ -570,7 +570,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "SwitchConfigurator", @@ -592,7 +592,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": false, "type": "boolean", "widget": { @@ -761,7 +761,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "boolean", "widget": { "component": "SwitchConfigurator", @@ -782,7 +782,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "defaultValue": "right", "widget": { @@ -819,7 +819,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -841,7 +841,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -884,11 +884,11 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "defaultValue": "left", "widget": { - "component": "SelectConfigurator", + "component": "ButtonGroupConfigurator", "props": { "options": [ { @@ -983,7 +983,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": true, "type": "boolean", "widget": { @@ -1005,7 +1005,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "defaultValue": "default", "widget": { @@ -1042,7 +1042,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": false, "type": "boolean", "widget": { @@ -1184,7 +1184,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -1205,7 +1205,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -1226,7 +1226,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -1247,7 +1247,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "boolean", "widget": { "component": "SwitchConfigurator", @@ -1268,7 +1268,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "object", "widget": { "component": "CodeConfigurator", @@ -1291,7 +1291,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -1354,7 +1354,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "defaultValue": "default", "widget": { @@ -1391,7 +1391,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -1412,7 +1412,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "SelectConfigurator", @@ -1548,7 +1548,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "array", "widget": { "component": "CodeConfigurator", @@ -2180,7 +2180,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "number", "widget": { "component": "NumberConfigurator", @@ -2202,7 +2202,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "widget": { "component": "InputConfigurator", @@ -2224,7 +2224,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": false, "type": "boolean", "widget": { @@ -2246,7 +2246,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": false, "type": "boolean", "widget": { @@ -2268,7 +2268,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "type": "string", "defaultValue": "default", "widget": { @@ -2305,7 +2305,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": true, "type": "boolean", "widget": { @@ -2327,7 +2327,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": true, "type": "boolean", "widget": { @@ -2349,7 +2349,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": false, "type": "boolean", "widget": { @@ -2393,7 +2393,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "widget": { "component": "InputConfigurator", "props": {} @@ -2435,7 +2435,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "widget": { "component": "InputConfigurator", "props": {} @@ -2489,7 +2489,7 @@ "readOnly": false, "disabled": false, "cols": 12, - "labelPosition": "top", + "labelPosition": "left", "defaultValue": false, "type": "boolean", "widget": { @@ -5157,8 +5157,7 @@ }, "description": { "zh_CN": "必填标识 * 是否占位" - }, - "labelPosition": "left" + } }, { "property": "label-suffix", @@ -5177,7 +5176,8 @@ }, "description": { "zh_CN": "表单中标签后缀" - } + }, + "labelPosition": "left" }, { "property": "label-position", @@ -5211,7 +5211,8 @@ }, "description": { "zh_CN": "表单中标签的布局位置" - } + }, + "labelPosition": "left" } ] }, @@ -5258,7 +5259,8 @@ }, "description": { "zh_CN": "表单验证规则" - } + }, + "labelPosition": "left" } ], "description": { @@ -5483,7 +5485,8 @@ }, "description": { "zh_CN": "表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的" - } + }, + "labelPosition": "left" }, { "property": "required", @@ -5904,7 +5907,8 @@ }, "description": { "zh_CN": "按钮文字" - } + }, + "labelPosition": "left" }, { "property": "size", @@ -5945,7 +5949,8 @@ }, "description": { "zh_CN": "按钮大小" - } + }, + "labelPosition": "left" }, { "property": "disabled", @@ -6079,7 +6084,8 @@ }, "description": { "zh_CN": "设置禁用时间，防止重复提交，单位毫秒" - } + }, + "labelPosition": "left" }, { "property": "circle", @@ -6282,7 +6288,8 @@ }, "description": { "zh_CN": "设置input框的type属性" - } + }, + "labelPosition": "left" }, { "property": "rows", @@ -6296,7 +6303,8 @@ }, "description": { "zh_CN": "输入框行数，只对 type='textarea' 有效" - } + }, + "labelPosition": "left" }, { "property": "placeholder", @@ -6389,7 +6397,8 @@ }, "description": { "zh_CN": "输入框尺寸。该属性的可选值为 medium / small / mini" - } + }, + "labelPosition": "left" } ] }, @@ -6416,8 +6425,7 @@ }, "description": { "zh_CN": "设置 input 框的maxLength" - }, - "labelPosition": "left" + } }, { "property": "autofocus", @@ -7363,7 +7371,8 @@ }, "description": { "zh_CN": "绑定默认值" - } + }, + "labelPosition": "left" }, { "property": "true-value", @@ -7950,7 +7959,8 @@ }, "description": { "zh_CN": "没有选中时的值" - } + }, + "labelPosition": "left" }, { "property": "true-label", @@ -7969,7 +7979,8 @@ }, "description": { "zh_CN": "选中时的值" - } + }, + "labelPosition": "left" } ], "description": { @@ -8363,7 +8374,8 @@ }, "description": { "zh_CN": "checkbox组件列表" - } + }, + "labelPosition": "left" }, { "property": "type", @@ -8825,8 +8837,7 @@ }, "description": { "zh_CN": "是否显示标题后编辑 ICON" - }, - "labelPosition": "left" + } }, { "property": "tabs", @@ -9269,7 +9280,8 @@ }, "description": { "zh_CN": "单独使用 Breadcrumb，通过 option 配置生成面包屑" - } + }, + "labelPosition": "left" }, { "property": "textField", @@ -9288,7 +9300,8 @@ }, "description": { "zh_CN": "指定面包屑的显示键值，结合 options 使用" - } + }, + "labelPosition": "left" } ] } @@ -9503,8 +9516,7 @@ }, "description": { "zh_CN": "双向绑定当前激活的面板" - }, - "labelPosition": "left" + } } ] } @@ -9773,7 +9785,8 @@ "onChange": "this.delProp('fetchData')", "description": { "zh_CN": "设置表格的数据" - } + }, + "labelPosition": "left" }, { "property": "columns", @@ -10096,7 +10109,8 @@ }, "description": { "zh_CN": "服务端数据查询方法" - } + }, + "labelPosition": "left" }, { "property": "pager", @@ -10123,7 +10137,8 @@ }, "description": { "zh_CN": "分页配置，需结合fetchData使用" - } + }, + "labelPosition": "left" }, { "property": "resizable", @@ -10186,8 +10201,7 @@ }, "description": { "zh_CN": "表格行数据复选框配置项" - }, - "labelPosition": "left" + } }, { "property": "edit-rules", @@ -10226,7 +10240,8 @@ }, "description": { "zh_CN": "表格编辑配置项" - } + }, + "labelPosition": "left" }, { "property": "expand-config", @@ -10421,8 +10436,7 @@ }, "description": { "zh_CN": "设置表格内容区域（不含表格头部，底部）的最大高度。" - }, - "labelPosition": "left" + } }, { "property": "row-span", @@ -11084,8 +11098,7 @@ }, "description": { "zh_CN": "设置弹出面板中表格组件的配置信息" - }, - "labelPosition": "left" + } }, { "property": "pager-op", @@ -11363,7 +11376,8 @@ }, "description": { "zh_CN": "可配置静态数据源和动态数据源" - } + }, + "labelPosition": "left" }, { "property": "node-key", @@ -11424,8 +11438,7 @@ }, "description": { "zh_CN": "点击图标展开节点时是否触发 node-click 事件" - }, - "labelPosition": "left" + } }, { "property": "expand-icon", @@ -11492,8 +11505,7 @@ }, "description": { "zh_CN": "是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点" - }, - "labelPosition": "left" + } }, { "property": "filter-node-method", @@ -11972,7 +11984,8 @@ }, "description": { "zh_CN": "显示的内容，也可以通过 slot#content 传入 DOM" - } + }, + "labelPosition": "left" }, { "property": "render-content", @@ -12242,7 +12255,8 @@ }, "description": { "zh_CN": "触发方式，该属性的可选值为 click / focus / hover / manual，该属性的默认值为 click" - } + }, + "labelPosition": "left" }, { "property": "popper-class", @@ -12338,7 +12352,8 @@ }, "description": { "zh_CN": "触发方式为 hover 时的隐藏延迟，单位为毫秒" - } + }, + "labelPosition": "left" }, { "property": "content", @@ -12357,7 +12372,8 @@ }, "description": { "zh_CN": "显示的内容，也可以通过 slot 传入 DOM" - } + }, + "labelPosition": "left" }, { "property": "disabled", @@ -12395,7 +12411,8 @@ }, "description": { "zh_CN": "出现位置的偏移量" - } + }, + "labelPosition": "left" }, { "property": "open-delay", @@ -12414,7 +12431,8 @@ }, "description": { "zh_CN": "触发方式为 hover 时的显示延迟，单位为毫秒" - } + }, + "labelPosition": "left" }, { "property": "popper-options", @@ -12433,7 +12451,8 @@ }, "description": { "zh_CN": "popper.js 的参数" - } + }, + "labelPosition": "left" }, { "property": "title", @@ -12452,7 +12471,8 @@ }, "description": { "zh_CN": "提示内容标题" - } + }, + "labelPosition": "left" }, { "property": "transform-origin", @@ -12490,7 +12510,8 @@ }, "description": { "zh_CN": "该属性的默认值为 fade-in-linear" - } + }, + "labelPosition": "left" }, { "property": "width", @@ -12509,7 +12530,8 @@ }, "description": { "zh_CN": "宽度" - } + }, + "labelPosition": "left" } ] } @@ -12667,7 +12689,8 @@ }, "description": { "zh_CN": "设置日期框的type属性" - } + }, + "labelPosition": "left" }, { "property": "placeholder", @@ -12779,7 +12802,8 @@ }, "description": { "zh_CN": "日期框尺寸。该属性的可选值为 medium / small / mini" - } + }, + "labelPosition": "left" } ] }, @@ -12806,8 +12830,7 @@ }, "description": { "zh_CN": "设置 input 框的maxLength" - }, - "labelPosition": "left" + } }, { "property": "autofocus", @@ -13147,7 +13170,8 @@ }, "description": { "zh_CN": "输入框尺寸。该属性的可选值为 medium / small / mini" - } + }, + "labelPosition": "left" }, { "property": "controls", @@ -13196,8 +13220,7 @@ }, "description": { "zh_CN": "加减按钮位置" - }, - "labelPosition": "left" + } }, { "property": "precision", diff --git a/packages/common/component/MetaChildItem.vue b/packages/common/component/MetaChildItem.vue index 1278de0e24..d2a822c6e1 100644 --- a/packages/common/component/MetaChildItem.vue +++ b/packages/common/component/MetaChildItem.vue @@ -1,5 +1,6 @@ @@ -48,7 +52,7 @@ diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less index ec6fb9581c..f3f31fe2ea 100644 --- a/packages/theme/base/src/component-common.less +++ b/packages/theme/base/src/component-common.less @@ -732,7 +732,6 @@ // 22、开关 .tiny-switch { background-color: var(--te-common-bg-switch); - border: none; &.tiny-switch-checked { background-color: var(--te-common-bg-primary-checked); } From 784d878c570474651207750f77b99fca5c84736f Mon Sep 17 00:00:00 2001 From: gene9831 Date: Sun, 29 Sep 2024 17:28:10 +0800 Subject: [PATCH 03/13] add add-row icon --- .../ArrayItemConfigurator.vue | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue b/packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue index 2e9ffc83dd..b3a2393800 100644 --- a/packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue +++ b/packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue @@ -40,8 +40,7 @@ @@ -196,15 +195,16 @@ export default { display: block; } .add { + display: flex; + align-items: center; color: var(--te-common-text-emphasize); &:hover { cursor: pointer; } -} -.add-icon { - display: inline-block; - width: 14px; - height: 14px; - margin-right: 5px; + + & .icon-plus { + font-size: 14px; + margin-right: 5px; + } } From 74e5d0fb3ea8299c7b3db119f409b2ae0d324152 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Wed, 9 Oct 2024 15:54:43 +0800 Subject: [PATCH 04/13] refactor(styles): rewrite styles of border settings in style panel --- .../ButtonGroupConfigurator.vue | 19 +- .../color-configurator/ColorConfigurator.vue | 1 - packages/design-core/assets/border-all.svg | 26 +- packages/design-core/assets/border-bottom.svg | 35 +- packages/design-core/assets/border-left.svg | 35 +- packages/design-core/assets/border-right.svg | 35 +- packages/design-core/assets/border-top.svg | 35 +- .../src/components/border/BorderGroup.vue | 327 ++++++++---------- .../src/components/buttons/ButtonGroup.vue | 90 +++++ .../settings/styles/src/components/index.js | 1 + 10 files changed, 347 insertions(+), 257 deletions(-) create mode 100644 packages/settings/styles/src/components/buttons/ButtonGroup.vue diff --git a/packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue b/packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue index a34fb8d148..3dc6bf8b99 100644 --- a/packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue +++ b/packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue @@ -4,7 +4,9 @@ type="mini" v-model="value" :data="optionsData" - @update:modelValue="change"> + @update:modelValue="change" + > + + + diff --git a/packages/settings/styles/src/components/index.js b/packages/settings/styles/src/components/index.js index ec2f4c1c78..c055a48c5e 100644 --- a/packages/settings/styles/src/components/index.js +++ b/packages/settings/styles/src/components/index.js @@ -12,6 +12,7 @@ export { default as BackgroundGroup } from './background/BackgroundGroup.vue' export { default as BorderGroup } from './border/BorderGroup.vue' +export { default as ButtonGroup } from './buttons/ButtonGroup.vue' export { default as EffectGroup } from './effects/EffectGroup.vue' export { default as ImageSelect } from './inputs/ImageSelect.vue' export { default as ResetButton } from './inputs/ResetButton.vue' From 2877e00625606244c561a627a428872abdba7d40 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Wed, 9 Oct 2024 16:15:45 +0800 Subject: [PATCH 05/13] fix: build error --- packages/settings/styles/src/components/border/BorderGroup.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue index 266904a617..4667dddd73 100644 --- a/packages/settings/styles/src/components/border/BorderGroup.vue +++ b/packages/settings/styles/src/components/border/BorderGroup.vue @@ -190,7 +190,7 @@ import { Tooltip } from '@opentiny/vue' import ModalMask, { useModal } from '../inputs/ModalMask.vue' import NumericSelect from '../inputs/NumericSelect.vue' import ResetButton from '../inputs/ResetButton.vue' -import ButtonGroup from '../buttons/ButtonGroup' +import ButtonGroup from '../buttons/ButtonGroup.vue' import { ColorConfigurator, SliderConfigurator } from '@opentiny/tiny-engine-configurator' import useEvent from '../../js/useEvent' import { useProperties } from '../../js/useStyle' From fc47cfbe5143700c014ddf6fa20f029045ef3c96 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Wed, 9 Oct 2024 16:19:48 +0800 Subject: [PATCH 06/13] fix: correct the misspelling of 'radius' --- .../src/components/border/BorderGroup.vue | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue index 4667dddd73..f3cdeb9c3f 100644 --- a/packages/settings/styles/src/components/border/BorderGroup.vue +++ b/packages/settings/styles/src/components/border/BorderGroup.vue @@ -10,12 +10,12 @@
-
+
-
+
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
+
+
+
+
+
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + +
@@ -610,6 +609,15 @@ export default { .radius-content-input { margin-left: 4px; + :deep(.slider-container) { + grid-template-columns: 64px 1fr; + column-gap: 8px; + } + + :deep(.meta-numeric-input) { + width: 70px; + } + :deep(.tiny-input__suffix) { right: 0; } @@ -617,46 +625,19 @@ export default { } } -.radius-multiple { - display: flex; - flex-wrap: wrap; - position: relative; - &::after { - content: ''; - height: 1px; - width: calc(100% + 32px); - background: var(--ti-lowcode-toolbar-border-color); - position: absolute; - bottom: 0; - left: -16px; - } - - svg { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - font-size: 16px; - } - - .radius-content { - flex: 1; +.radius-multiple-container { + flex: 1; + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 6px; + column-gap: 18px; + & > div { display: flex; align-items: center; - margin: 5px 0; - - .radius-content-svg { - flex: 0 0 24px; - padding: 4px; - margin: 0 1px; - } - :deep(.tiny-input__inner) { - background: var(--ti-lowcode-tabs-active-bg); - padding: 0 20px 0 0; - border-radius: 0; - border-width: 0; - &:hover, - &:focus { - border-bottom: 1px solid var(--ti-lowcode-property-active-color); - } - } + gap: 6px; + } + svg { + font-size: 14px; } } @@ -724,10 +705,6 @@ export default { } } -.adjust-vertical { - margin-top: 5px; -} - .is-setting { color: var(--ti-lowcode-style-setting-label-color); background: var(--ti-lowcode-style-setting-label-bg); From 66fd9db06e15967781d1a4354124a1236b485d86 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Thu, 10 Oct 2024 17:01:06 +0800 Subject: [PATCH 09/13] fix: labelPosition set to 'none' when hide label --- packages/common/component/ConfigItem.vue | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue index 7863ea0f13..57271c7120 100644 --- a/packages/common/component/ConfigItem.vue +++ b/packages/common/component/ConfigItem.vue @@ -8,7 +8,8 @@ { active: property === currentProperty } - ]"> + ]" + >
+ :disabled="!propDescription || propDescription === propLabel" + >
{{ property.property }}
@@ -41,7 +43,8 @@ { 'verify-failed': verification.failed } - ]"> + ]" + >
{{ '已绑定：' + widget.props.modelValue?.value }}
@@ -57,7 +60,8 @@ :metaComponents="metaComponents" @update:modelValue="onModelUpdate" @focus="handleFocus" - @blur="handleBlur"> + @blur="handleBlur" + >
{{ verification.message }} @@ -75,7 +79,8 @@ :meta="property" :label="propLabel" language="json" - @update:modelValue="onModelUpdate"> + @update:modelValue="onModelUpdate" + >