内容居中/单选多选分组

apps/editor/src/data/materials.ts

@@ -28,13 +28,17 @@ export const materialList: IMaterial[] = [
         name: "LcTitle",
         title: "文字",
         thumbnail: "",
-        version: "0.0.1",
-        source: "/lc-title.0.0.1.umd.js",
+        version: "0.0.2",
+        source: "/lc-title.0.0.2.umd.js",
         data: [
             {
                 version: "0.0.1",
                 source: "/lc-title.0.0.1.umd.js",
             },
+            {
+                version: "0.0.2",
+                source: "/lc-title.0.0.2.umd.js",
+            }
         ],
     },
     {
@@ -64,13 +68,17 @@ export const materialList: IMaterial[] = [
         name: "LcCheckbox",
         title: "复选框",
         thumbnail: "",
-        version: "0.0.1",
-        source: "/lc-checkbox.0.0.1.umd.js",
+        version: "0.0.2",
+        source: "/lc-checkbox.0.0.2.umd.js",
         data: [
             {
                 version: "0.0.1",
                 source: "/lc-checkbox.0.0.1.umd.js",
             },
+            {
+                version: "0.0.2",
+                source: "/lc-checkbox.0.0.2.umd.js",
+            },
         ],
     },
     {
@@ -118,13 +126,17 @@ export const materialList: IMaterial[] = [
         name: "LcSlider",
         title: "滑条",
         thumbnail: "",
-        version: "0.0.1",
-        source: "/lc-slider.0.0.1.umd.js",
+        version: "0.0.2",
+        source: "/lc-slider.0.0.2.umd.js",
         data: [
             {
                 version: "0.0.1",
                 source: "/lc-slider.0.0.1.umd.js",
             },
+            {
+                version: "0.0.2",
+                source: "/lc-slider.0.0.2.umd.js",
+            },
         ],
     },
 ];

apps/editor/src/pages/editor/components/EditorContent/DargResize.less

@@ -1,4 +1,10 @@
 
+.vdr > div:first-child {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .vdr-stick {
   width: 8px !important;
   height: 8px !important;

apps/editor/src/pages/editor/components/EditorRight/EditorRight.vue

@@ -108,13 +108,39 @@
                     @change="onPropsChange($event, key, 'boolean')"
                     type="checkbox"
                 />
-                <select
-                    v-if="editorProps[key].type === 'group'"
-                    :value="projectStore.currentElement.props[key]"
-                    @change="onPropsChange($event, key)"
-                >
-                    <option disabled>请选择</option>
-                </select>
+                <div v-if="editorProps[key].type === 'group'">
+                    <div v-if="projectStore.currentElement.mId === 5">
+                        <select
+                            class="eventSelect"
+                            :value="projectStore.currentElement.props[key]"
+                            @change="onPropsChange($event, key)"
+                        >
+                            <option
+                                class="eventOption"
+                                v-for="groupName in projectStore.currentRadioGroups"
+                            >
+                                {{ groupName }}
+                            </option>
+                        </select>
+                    </div>
+                    <div v-else>
+                        <select
+                            class="eventSelect"
+                            :value="projectStore.currentElement.props[key]"
+                            @change="onPropsChange($event, key)"
+                        >
+                            <option
+                                class="eventOption"
+                                v-for="groupName in projectStore.currentCheckboxGroups"
+                            >
+                                {{ groupName }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <input v-model="newGroup" />
+                    <a-button @click="onAddGroup">添加</a-button>
+                </div>
             </div>
             <div class="plugItemEvent">
                 <p class="display">自定义事件</p>
@@ -184,6 +210,7 @@ let image = ref(null);
 const imageInput = ref(null);
 let image_file = "";
 const isLocalImage = ref(true);
+let newGroup = ref("");
 function onPropsChange(e: Event, key: string, type?: string) {
     if (type === "boolean") {
         projectStore.changeElementProps({
@@ -223,7 +250,7 @@ function onChangeColor(color, key: string) {
     });
 }
 
-function onUpload(e: Event, key: string) {
+function onUpload(e: Event, key?: string) {
     const element = projectStore.currentElement;
     let input = (e.target as HTMLInputElement).files;
     if (input) {
@@ -243,6 +270,11 @@ function onReset() {
     image.value = null;
     projectStore.changeElementProps({ src: preview.value });
 }
+
+function onAddGroup() {
+    projectStore.changeElementProps({ group: newGroup.value });
+    console.log(projectStore.currentRadioGroups);
+}
 </script>
 
 <style scoped></style>

apps/editor/src/store/project.ts

@@ -56,6 +56,27 @@ export const useProjectStore = defineStore("project", () => {
     const currentCopyStack = reactive({
         value: [],
     });
+    // 所有已添加的组
+    const currentRadioGroups = computed(() => {
+        let groups = [];
+        currentPageElements.value.map((element) => {
+            if (element.mId != 5 || !element.props.group || groups.includes(element.props.group)) {
+                return;
+            }
+            groups.push(element.props.group);
+        });
+        return groups;
+    });
+    const currentCheckboxGroups = computed(() => {
+        let groups = [];
+        currentPageElements.value.map((element) => {
+            if (element.mId != 4 || !element.props.group || groups.includes(element.props.group)) {
+                return;
+            }
+            groups.push(element.props.group);
+        });
+        return groups;
+    });
 
     function setCurrentElement(element: PageElement) {
         currentElementId.value = element.id;
@@ -72,14 +93,17 @@ export const useProjectStore = defineStore("project", () => {
         project.value = p.getJson();
     }
 
-    function changeElementProps(props: Record<string, any>, element?: PageElement) {
+    function changeElementProps(
+        props: Record<string, any>,
+        element?: PageElement
+    ) {
         if (!currentElement.value) {
             return;
         }
-        if(!element) {
+        if (!element) {
             var element = p
-            .getPageByIndex(currentPageIndex.value)
-            .getElementById(currentElement.value.id);
+                .getPageByIndex(currentPageIndex.value)
+                .getElementById(currentElement.value.id);
         }
         element.props = {
             ...element.props,
@@ -131,7 +155,7 @@ export const useProjectStore = defineStore("project", () => {
     }
 
     function publishProject() {
-        return p.getJson()
+        return p.getJson();
     }
 
     function setCurrentPageIndex(index: number) {
@@ -152,7 +176,7 @@ export const useProjectStore = defineStore("project", () => {
     }
 
     function saveSnapshot() {
-        if(currentSnapshotIndex.value < currentSnapshots.value.length - 1) {
+        if (currentSnapshotIndex.value < currentSnapshots.value.length - 1) {
             removeSnapshots(currentSnapshotIndex.value);
         }
         currentSnapshots.value.push(
@@ -222,7 +246,9 @@ export const useProjectStore = defineStore("project", () => {
         page.addElement(PageElement.create(...currentCopyStack.value, true));
         project.value = p.getJson();
         // For multi-selected, just spread the array
-        setCurrentElement(currentPageElements.value[currentPageElements.value.length - 1]);
+        setCurrentElement(
+            currentPageElements.value[currentPageElements.value.length - 1]
+        );
     }
 
     function removeElement() {
@@ -248,12 +274,16 @@ export const useProjectStore = defineStore("project", () => {
         project.value = p.getJson();
     }
 
+    // 获取元素的所有分组
+
     return {
         currentPage,
         currentPageIndex,
         currentPageElements,
         currentElement,
         currentElementId,
+        currentRadioGroups,
+        currentCheckboxGroups,
         project,
 
         addElement,

packages/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowcode512/lc-checkbox",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

packages/checkbox/src/index.css

@@ -5,4 +5,7 @@
     text-overflow: ellipsis;
     border-radius: 2px;
     border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

packages/checkbox/src/index.ts

@@ -23,6 +23,6 @@ export default {
             type: 'group',
             defaultValue: 2,
             display: '组别'
-        }
+        },
     }
 };

packages/checkbox/src/index.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
     color: string;
     size: number;
     group: string;
+    checkAll: boolean;
     events?: Record<string, any[]>;
 }>();
 </script>

packages/checkbox/vite.config.ts

@@ -1,23 +1,10 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import AutoImport from "unplugin-auto-import/vite";
-import Components from "unplugin-vue-components/vite";
-import { ArcoResolver } from "unplugin-vue-components/resolvers";
 import pkg from "./package.json";
 
 export default defineConfig({
     plugins: [
         vue(),
-        AutoImport({
-            resolvers: [ArcoResolver()],
-        }),
-        Components({
-            resolvers: [
-                ArcoResolver({
-                    sideEffect: true,
-                }),
-            ],
-        }),
     ],
     build: {
         lib: {

packages/radio/src/index.css

@@ -5,4 +5,7 @@
     text-overflow: ellipsis;
     border-radius: 2px;
     border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

packages/radio/src/index.ts

@@ -21,7 +21,7 @@ export default {
         },
         group: {
             type: 'group',
-            defaultValue: 2,
+            defaultValue: undefined,
             display: '组别'
         }
     }

packages/radio/src/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { nanoid } from "nanoid";
 
-const id = nanoid();
 const props = defineProps<{
     title: string;
     color: string;
@@ -16,9 +14,9 @@ const props = defineProps<{
 
 <template>
     <div class="lc-radio">
-        <input :group="group" type="radio" :name="id" />
+        <input type="radio" :name="group" />
         <label
-            :for="id"
+            :for="group"
             :style="{
                 fontSize: size + 'px',
                 color: color,