@kp-ui/lowcode-pc 1.0.0-alpha.1

package/assets/styles/style.css

@@ -0,0 +1,630 @@
+@charset "UTF-8";
+.context-menu-trigger[data-v-8adfdf56] {
+        width: 1px;
+        height: 1px;
+        z-index: 9999;
+}
+.drag-handler[data-v-f7343dfb] {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  height: 20px;
+  line-height: 20px;
+  z-index: 10;
+  background: var(--ant-primary-color);
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  visibility: hidden;
+}
+.drag-handler.selected[data-v-f7343dfb] {
+  opacity: 0.6;
+  visibility: visible;
+}
+.drag-handler.selected[data-v-f7343dfb]:hover {
+  opacity: 1;
+}
+.drag-handler i[data-v-f7343dfb] {
+  font-size: 12px;
+  font-style: normal;
+  color: #fff;
+  margin: 0 2px;
+  cursor: move;
+  display: flex;
+  align-items: center;
+}/* 调试面板样式 */
+.debug-panel[data-v-68185782] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 400px;
+  height: 100vh;
+  background-color: #fff;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.debug-panel[data-v-68185782] .jv-container .jv-code {
+  padding: 0;
+}
+.debug-panel.collapsed[data-v-68185782] {
+  transform: translateX(400px);
+}
+.debug-panel.collapsed .debug-toggle[data-v-68185782] {
+  left: -40px;
+  border-radius: 8px 0 0 8px;
+  width: 40px;
+}
+.debug-panel .debug-toggle[data-v-68185782] {
+  position: absolute;
+  left: -40px;
+  top: 20px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--ant-primary-color);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 8px 0 0 8px;
+  font-size: 12px;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  writing-mode: vertical-lr;
+  padding: 8px 0;
+  user-select: none;
+}
+.debug-panel .debug-content[data-v-68185782] {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  background-color: #f5f7fa;
+}
+.debug-panel .debug-content .debug-section[data-v-68185782] {
+  margin-bottom: 24px;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+.debug-panel .debug-content .debug-section h3[data-v-68185782] {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 8px;
+}
+.debug-panel .debug-content .debug-section .empty-state[data-v-68185782] {
+  color: #999;
+  font-size: 12px;
+  text-align: center;
+  padding: 20px;
+}
+.debug-panel .debug-content .debug-section .widget-list[data-v-68185782] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.debug-panel .debug-content .debug-section .widget-list .widget-item[data-v-68185782] {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 2px 4px;
+  line-height: 1.2;
+  background-color: #fafafa;
+  cursor: pointer;
+}
+.debug-panel .debug-content .debug-section .widget-list .widget-item .widget-key[data-v-68185782] {
+  font-weight: 600;
+  color: var(--ant-primary-color);
+  font-size: 12px;
+}
+.debug-panel .debug-content pre[data-v-68185782] {
+  margin: 0;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  padding: 8px;
+  border-radius: 4px;
+  color: #333;
+}
+
+.designer-widget-list[data-v-18b73e97] {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.designer-widget-list.empty-list[data-v-18b73e97] {
+  min-height: 100px;
+}
+.designer-widget-list .empty-drop-zone[data-v-18b73e97] {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+}
+.designer-widget-list[data-v-18b73e97] .sortable-ghost {
+  z-index: 99;
+}
+.list-transition-container[data-v-18b73e97] {
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+}
+.transition-group-el[data-v-18b73e97] {
+  position: relative;
+  padding: 1px;
+}
+.transition-group-el .sortable-ghost[data-v-18b73e97] {
+  width: 100%;
+}
+
+/* SortableJS 自动应用的类 */
+.ghost-placeholder[data-v-18b73e97] {
+  opacity: 0.5;
+  background: #c8ebfb;
+  border: 2px dashed var(--ant-primary-color);
+  height: 40px;
+  margin: 4px 0;
+  border-radius: 4px;
+}
+.sortable-chosen[data-v-18b73e97] {
+  background: #fdfdfd;
+}
+.empty-drop-zone[data-v-18b73e97] {
+  margin: 2px 0;
+  height: 90px;
+  background: #f5f5f5;
+  border: 1px dashed #d9d9d9;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 14px;
+}
+.desginer-canvas[data-v-18b73e97] .ant-form-item {
+  margin-bottom: 0;
+}.widget-wrapper[data-v-d7dcbe52] {
+  position: relative;
+  padding: 2px;
+  min-height: 20px;
+  cursor: pointer;
+  border: 1px dashed #cccccc;
+  gap: 3px;
+}
+.widget-wrapper.container-wrapper[data-v-d7dcbe52] {
+  border-width: 2px;
+}
+.widget-wrapper.container-wrapper.selected[data-v-d7dcbe52] {
+  outline: solid var(--ant-primary-color);
+}
+.widget-wrapper.selected[data-v-d7dcbe52] {
+  /* background-color: rgba(24, 144, 255, 0.1); */
+  outline: 2px solid var(--ant-primary-color);
+}
+.widget-wrapper .action-buttons[data-v-d7dcbe52] {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  height: 22px;
+  width: 22px;
+  background-color: var(--ant-primary-color);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 11;
+  font-size: 14px;
+}
+.widget-wrapper .action-buttons[data-v-d7dcbe52]:hover {
+  background-color: #ff4d4f;
+}.sub-form-container[data-v-ddd06b7d] {
+  margin-bottom: 16px;
+  text-align: left;
+  background: #fafafa;
+  border-radius: 8px;
+  padding: 10px;
+}
+.sub-form-container .header-row[data-v-ddd06b7d] {
+  margin-top: 15px;
+}
+.sub-form-container .header-row[data-v-ddd06b7d] .action-button {
+  height: 35px;
+}
+.sub-form-container .sub-form-row[data-v-ddd06b7d] {
+  display: flex;
+  align-items: center;
+  background: white;
+  margin: 8px 0;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+.sub-form-container .sub-form-row .row-number-span[data-v-ddd06b7d] {
+  margin-left: 16px;
+}
+.sub-form-action-column[data-v-ddd06b7d] {
+  display: inline-block;
+  align-items: center;
+  text-align: center;
+  padding: 8px;
+}
+.grid-sub-form-data-row[data-v-ddd06b7d] {
+  display: inline-block;
+  flex: 1;
+  padding: 10px;
+  position: relative;
+}
+.grid-sub-form-data-row[data-v-ddd06b7d]:before, .grid-sub-form-data-row[data-v-ddd06b7d]:after {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 60%;
+  background: #e1e2e3;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.grid-sub-form-data-row[data-v-ddd06b7d]:before {
+  left: 0;
+}
+.grid-sub-form-data-row[data-v-ddd06b7d]:after {
+  right: 0;
+}
+.grid-sub-form-data-row[data-v-ddd06b7d] .ant-form-item {
+  margin-bottom: 0;
+}
+div.row-no-column[data-v-ddd06b7d] {
+  display: flex;
+  align-items: center;
+  width: 50px;
+  border-radius: 10px;
+  background: #f1f2f3;
+  padding: 5px 0;
+  margin: 0 6px;
+  font-size: 14px;
+  color: #666;
+}
+.action-button-column[data-v-ddd06b7d] {
+  width: 140px;
+}.grid-cell[data-v-13ad810a] {
+  padding: 3px;
+  position: relative;
+}
+.grid-cell .form-widget-list[data-v-13ad810a] {
+  min-height: 28px;
+}.button-list-container[data-v-37429548] {
+  flex: 1;
+  display: flex;
+  justify-content: var(--flex);
+}
+.button-list-container .button-icon[data-v-37429548] {
+  margin-right: 4px;
+}.dialog-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 300px;
+}
+.talbe-wrapper[data-v-598f1ef3] {
+  width: 100%;
+}
+.talbe-wrapper .vxe-grid[data-v-598f1ef3] {
+  width: 100%;
+}
+.talbe-wrapper__pagination[data-v-598f1ef3] {
+  margin-top: 10px;
+  display: flex;
+  justify-content: end;
+}.collapse-container[data-v-43370f9c] {
+  display: flex;
+  margin: 2px;
+  height: 100%;
+  width: 100%;
+  flex: 1 0 0;
+}
+.collapse-container .form-widget-list[data-v-43370f9c] {
+  min-height: 28px;
+}
+.collapse-container[data-v-43370f9c] .header-right .form-widget-list {
+  min-width: 200px;
+}
+.tpf-collapse[data-v-43370f9c] .tpf-collapse-content-wrapper {
+  padding: 10px 12px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.box-container[data-v-053bd1ae] {
+  width: 100%;
+  position: relative;
+}
+.tab-container .form-widget-list[data-v-1080446b] {
+  min-height: 28px;
+}
+.tab-container[data-v-1080446b] .ant-tabs.ant-tabs-bottom .ant-tabs-nav-wrap, .tab-container[data-v-1080446b] .ant-tabs.ant-tabs-top .ant-tabs-nav-wrap {
+  padding-left: 26px;
+}
+.tab-container[data-v-1080446b] .tab-content-wrapper {
+  min-height: 100px;
+}.loading-wrapper[data-v-bedb1a87] {
+  min-height: 300px;
+  padding: 20px;
+}
+.ant-form .ant-form-item-explain.ant-form-item-explain-connected[data-v-bedb1a87] {
+  display: none;
+}
+
+.field-wrapper[data-v-4322845c] {
+  position: relative;
+}
+.ant-form-item[data-v-4322845c] {
+  position: relative;
+  /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
+}
+.ant-form-item[data-v-4322845c] .ant-form-item-label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ant-form-item span.custom-label[data-v-4322845c] {
+  display: flex;
+}
+.ant-form-item span.custom-label i[data-v-4322845c] {
+  margin: 0 3px;
+}
+.ant-form-item[data-v-4322845c] .hide-spin-button input::-webkit-outer-spin-button,
+.ant-form-item[data-v-4322845c] .hide-spin-button input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+[data-v-038cba28] .bjs-powered-by {
+  display: none;
+}
+[data-v-038cba28] .bjs-breadcrumbs {
+  display: none;
+}.flex[data-v-b51e000d] {
+  flex: 1;
+  display: flex;
+  justify-content: var(--flex);
+}.hide-text-span[data-v-7e3e590f] span {
+  display: none;
+}
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+.auto-full-width[data-v-deec5b65] {
+  width: 100%;
+}
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+.auto-full-width[data-v-932f89e4] {
+  width: 100%;
+}
+.auto-full-width[data-v-932f89e4] .ant-picker {
+  width: 100% !important;
+}.hide-text-span[data-v-41213ad4] span {
+  display: none;
+}.fileUploadTip[data-v-fd798690] {
+  font-size: 12px;
+  margin-top: 10px;
+}
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+/* form-item-wrapper已引入，还需要重复引入吗？ */.rich-editor-widget[data-v-c4e08a91] .ql-toolbar.ql-snow {
+  border-color: #d9d9d9;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+.rich-editor-widget[data-v-c4e08a91] .ql-container.ql-snow {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-color: #d9d9d9;
+}
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+.design-select-box[data-v-c3c936a7] {
+  display: flex;
+  width: 100%;
+}
+.design-select-box.useModal[data-v-c3c936a7] .ant-select-selector {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.design-select-box .ant-select[data-v-c3c936a7] {
+  flex: 1 0 0;
+  min-width: 0;
+}
+.design-select-box .useModal-svg[data-v-c3c936a7] {
+  border: 1px solid #d9d9d9;
+  cursor: pointer;
+  width: 40px;
+  background: #fafafa;
+  line-height: 30px;
+  border-left: 0;
+  text-align: center;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+.readonly-mode-switch[data-v-55619f83] {
+  display: none;
+}.readonly-mode-field[data-v-04869c36] {
+  display: inline-block;
+  white-space: pre-wrap;
+  line-height: 1.5;
+  max-height: 100px;
+  overflow-y: auto;
+}
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+.auto-full-width[data-v-1b009c7b] {
+  width: 100%;
+}
+.auto-full-width[data-v-1b009c7b] .ant-picker {
+  width: 100% !important;
+}
+.readonly-mode-time-range[data-v-1b009c7b] .ant-picker {
+  display: none;
+}
+/* form-item-wrapper已引入，还需要重复引入吗？ */
+.auto-full-width[data-v-5c22cb89] {
+  width: 100%;
+}
+.auto-full-width[data-v-5c22cb89] .ant-picker {
+  width: 100% !important;
+}
+.readonly-mode-time[data-v-5c22cb89] .ant-picker {
+  display: none;
+}[data-v-bad9595c] .ant-tree {
+  background: transparent;
+}
+[data-v-bad9595c] .ant-tree .ant-tree-checkbox {
+  margin-block-start: 0;
+}.grid-cell[data-v-a00bba10] {
+  min-height: 38px !important;
+  padding: 3px;
+  border: 1px dashed #336699;
+  position: relative;
+}
+.grid-cell.selected[data-v-a00bba10] {
+  outline: 1px solid var(--ant-primary-color) !important;
+}
+.grid-cell[data-v-a00bba10] .widget-wrapper.container-wrapper {
+  border-width: 1px !important;
+}
+.grid-cell[data-v-a00bba10] .widget-wrapper.container-wrapper.selected {
+  outline: 1px solid var(--ant-primary-color) !important;
+}
+.grid-cell .form-widget-list[data-v-a00bba10] {
+  min-height: 28px;
+}
+.grid-cell .grid-col-action[data-v-a00bba10] {
+  position: absolute;
+  bottom: 0;
+  right: -2px;
+  height: 28px;
+  line-height: 28px;
+  background: var(--ant-primary-4);
+  z-index: 999;
+}
+.grid-cell .grid-col-action i[data-v-a00bba10] {
+  font-size: 14px;
+  color: #fff;
+  margin: 0 5px;
+  cursor: pointer;
+}
+.grid-cell .grid-col-handler[data-v-a00bba10] {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  height: 22px;
+  line-height: 22px;
+  background: var(--ant-primary-4);
+  z-index: 9;
+}
+.grid-cell .grid-col-handler i[data-v-a00bba10] {
+  font-size: 14px;
+  font-style: normal;
+  color: #fff;
+  margin: 4px;
+  cursor: default;
+}
+.grid-col-action[data-v-a00bba10] .svg-icon,
+.grid-col-handler[data-v-a00bba10] .svg-icon {
+  margin-left: 0.1em;
+  margin-right: 0.1em;
+}.grid-container[data-v-40047deb] {
+  min-height: 50px;
+  padding: 5px 10px;
+}
+.grid-container .form-widget-list[data-v-40047deb] {
+  min-height: 28px;
+}.talbe-wrapper[data-v-ad6fb3c4] {
+  width: 100%;
+}
+.talbe-wrapper .vxe-grid[data-v-ad6fb3c4] {
+  width: 100%;
+}
+.talbe-wrapper__pagination[data-v-ad6fb3c4] {
+  margin-top: 10px;
+  display: flex;
+  justify-content: end;
+}.sub-form-container[data-v-49c81f5e] {
+  min-height: 100px;
+}.tab-container .form-widget-list[data-v-3280ee5e] {
+  min-height: 28px;
+}
+.tab-container[data-v-3280ee5e] .ant-tabs.ant-tabs-bottom .ant-tabs-nav-wrap, .tab-container[data-v-3280ee5e] .ant-tabs.ant-tabs-top .ant-tabs-nav-wrap {
+  padding-left: 26px;
+}.collapse-container[data-v-3032d8b6] {
+  display: flex;
+  margin: 2px;
+  height: 100%;
+  width: 100%;
+  flex: 1 0 0;
+}
+.collapse-container .form-widget-list[data-v-3032d8b6] {
+  min-height: 28px;
+}
+.collapse-container[data-v-3032d8b6] .header-right {
+  background-color: #fff;
+}
+.collapse-container[data-v-3032d8b6] .header-right .form-widget-list {
+  min-width: 200px;
+}
+.tpf-collapse[data-v-3032d8b6] {
+  padding: 5px;
+}
+.tpf-collapse .collapse-right[data-v-3032d8b6] {
+  min-width: 200px;
+  min-height: 30px;
+  border: 1px dashed #666;
+}
+.tpf-collapse .collapse-right[data-v-3032d8b6] .designer-widget-list {
+  min-height: 34px;
+}
+.tpf-collapse .collapse-right[data-v-3032d8b6] .designer-widget-list .empty-drop-zone {
+  height: 30px;
+  top: 0;
+}
+.tpf-collapse[data-v-3032d8b6] .design-time-bottom-margin {
+  margin-bottom: 0;
+}
+.tpf-collapse[data-v-3032d8b6] .design-time-bottom-margin .static-content-item {
+  margin-bottom: 0;
+  padding: 3px;
+}
+.tpf-collapse[data-v-3032d8b6] .tpf-collapse-content-wrapper {
+  overflow: hidden;
+  background-color: #fff;
+}
+.dialog-container[data-v-59c990aa] {
+  width: 100%;
+  min-height: 30px;
+  position: relative;
+}
+.dialog-container .dialog-title[data-v-59c990aa] {
+  font-size: 14px;
+  color: #666;
+  line-height: 30px;
+  text-align: center;
+}
+.dialog-container .right-btns[data-v-59c990aa] {
+  display: flex;
+  align-items: center;
+  height: 35px;
+}.box-container[data-v-e33faf2b] {
+  width: 100%;
+  position: relative;
+  padding-bottom: 20px;
+  display: flex;
+  min-height: 100px;
+}
+.box-container[data-v-e33faf2b] .designer-widget-list {
+  flex: 1;
+}

package/assets/switch-widget.mjs

@@ -0,0 +1,60 @@
+import { defineComponent, resolveComponent, createBlock, createCommentVNode, unref, openBlock, mergeProps, withCtx, createVNode, normalizeStyle, isRef } from "vue";
+import FormItemWrapper from "./form-item-wrapper.mjs";
+import { u as useField } from "./useField.mjs";
+import { C as ComponentNameEnum, W as WidgetTypeEnum, _ as _export_sfc } from "./install.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: WidgetTypeEnum.switch,
+    componentName: ComponentNameEnum.FieldWidget
+  },
+  __name: "switch-widget",
+  props: {
+    widget: {},
+    field: {},
+    designer: {},
+    parentWidget: {},
+    parentList: {},
+    indexOfParentList: {},
+    subFormRowIndex: {},
+    subFormRowId: {},
+    subFormColIndex: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const {
+      rules,
+      fieldEditor,
+      field,
+      fieldModel,
+      isReadMode,
+      handleHidden,
+      handleDisabled,
+      defineExposed
+    } = useField(props);
+    __expose({
+      ...defineExposed
+    });
+    return (_ctx, _cache) => {
+      const _component_a_switch = resolveComponent("a-switch");
+      return !unref(handleHidden) ? (openBlock(), createBlock(FormItemWrapper, mergeProps({ key: 0 }, props, { rules: unref(rules) }), {
+        default: withCtx(() => [
+          createVNode(_component_a_switch, {
+            ref_key: "fieldEditor",
+            ref: fieldEditor,
+            checked: unref(fieldModel),
+            "onUpdate:checked": _cache[0] || (_cache[0] = ($event) => isRef(fieldModel) ? fieldModel.value = $event : null),
+            disabled: unref(isReadMode) || unref(handleDisabled),
+            checkedValue: unref(field).options.checkedValue,
+            unCheckedValue: unref(field).options.unCheckedValue,
+            style: normalizeStyle({ width: unref(field).options.switchWidth + "px" })
+          }, null, 8, ["checked", "disabled", "checkedValue", "unCheckedValue", "style"])
+        ]),
+        _: 1
+      }, 16, ["rules"])) : createCommentVNode("", true);
+    };
+  }
+});
+const switchWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-55619f83"]]);
+export {
+  switchWidget as default
+};