Merge pull request #19 from RH-Xie/branch

add Unselect
heartD-bytesD · Aug 26, 2022 · 5ed0710 · 5ed0710
2 parents 6350809 + 461a3d3
commit 5ed0710
Show file tree

Hide file tree

Showing 14 changed files with 83 additions and 56 deletions.
diff --git a/apps/editor/public/lc-button.0.0.1.umd.js b/apps/editor/public/lc-button.0.0.1.umd.js
diff --git a/packages/button/dist/lc-button.0.0.1.umd.js → apps/editor/public/lc-button.0.0.2.umd.js b/packages/button/dist/lc-button.0.0.1.umd.js → apps/editor/public/lc-button.0.0.2.umd.js
diff --git a/apps/editor/public/lc-radio.0.0.1.umd.js b/apps/editor/public/lc-radio.0.0.1.umd.js
diff --git a/apps/editor/public/lc-slider.0.0.2.umd.js b/apps/editor/public/lc-slider.0.0.2.umd.js
diff --git a/apps/editor/src/data/materials.ts b/apps/editor/src/data/materials.ts
@@ -50,13 +50,17 @@ export const materialList: IMaterial[] = [
         name: "LcButton",
         title: "按钮",
         thumbnail: "",
-        version: "0.0.1",
-        source: "/lc-button.0.0.1.umd.js",
+        version: "0.0.2",
+        source: "/lc-button.0.0.2.umd.js",
         data: [
             {
                 version: "0.0.1",
                 source: "/lc-button.0.0.1.umd.js",
             },
+            {
+                version: "0.0.2",
+                source: "/lc-button.0.0.2.umd.js",
+            }
         ],
     },
     {

diff --git a/apps/editor/src/pages/editor/components/EditorContent/EditorContent.vue b/apps/editor/src/pages/editor/components/EditorContent/EditorContent.vue
@@ -25,7 +25,7 @@
 
             <div class="editor-body-page" ref="pageRef">
                 <!-- 添加网格  -->
-                <Grid />
+                <Grid @click.native="onClickAir"/>
                 <div v-for="item in projectStore.currentPageElements" :key="item.id" class="element">
                 <!-- 虚线框 VueDragResize-->
                     <VueDragResize @mousedown="projectStore.setCurrentElement(item)"
@@ -92,5 +92,9 @@ function onSaveSnapshot() {
     projectStore.saveSnapshot()
 }
 
+function onClickAir() {
+    projectStore.currentElementId = undefined;
+}
+
 </script>
 
diff --git a/apps/editor/src/pages/editor/components/EditorRight/EditorRight.vue b/apps/editor/src/pages/editor/components/EditorRight/EditorRight.vue
@@ -143,6 +143,14 @@
                     <input v-model="newGroup" />
                     <a-button @click="onAddGroup">添加</a-button>
                 </div>
+                <input
+                    v-if="editorProps[key].type === 'slider'"
+                    :value="projectStore.currentElement.props[key]"
+                    @change="onPropsChange($event, key, 'number')"
+                    :min="projectStore.currentElement.props[key].min"
+                    :max="projectStore.currentElement.props[key].max"
+                    type="range"
+                />
             </div>
             <div class="plugItemEvent">
                 <p class="display">自定义事件</p>

diff --git a/packages/button/package.json b/packages/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lowcode512/lc-button",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

diff --git a/packages/button/src/index.css b/packages/button/src/index.css
@@ -2,15 +2,18 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-    color: #606266;
+    color: var(--color);
     text-overflow: ellipsis;
     text-align: center;
     border: 1px solid #ddd;
-    background-color: #fff;
+    background-color: var(--bgc);
+    transition: all 0.1s linear;
 }
 
-
 button:hover {
-    color: #206CCF;
-    background-color: #E8F7FF;
+    filter: brightness(85%);
 }
+
+button:active {
+    transform: translateY(2px);
+}
diff --git a/packages/button/src/index.ts b/packages/button/src/index.ts
@@ -1,28 +1,35 @@
-import App from './index.vue'
-import './index.css'
+import App from "./index.vue";
+import "./index.css";
 
 export default {
     render: App,
     editorProps: {
         title: {
-            type: 'string', // 类型，并非值的类型，而是在渲染时决定显示什么类型的输入框（如选择器、滑块）
-            defaultValue: '按钮',// 默认图的cdn
-            display: '内容' // 在输入框上方显示的名称，无则不显示
+            type: "string", // 类型，并非值的类型，而是在渲染时决定显示什么类型的输入框（如选择器、滑块）
+            defaultValue: "按钮", // 默认图的cdn
+            display: "内容", // 在输入框上方显示的名称，无则不显示
+        },
+        color: {
+            type: "color",
+            defaultValue: "#333",
+            display: "文字颜色",
+        },
+        backgroundColor: {
+            type: "color",
+            defaultValue: "#fff",
+            display: "背景颜色",
         },
-        // color: {
-        //     type: 'color',
-        //     defaultValue: '#333',
-        //     display: '颜色'
-        // },
         size: {
-            type: 'number',
+            type: "number",
             defaultValue: 15,
-            display: '字体大小'
+            display: "字体大小",
         },
         borderRadius: {
-            type: 'number',
+            type: "slider",
             defaultValue: 1,
-            display: '圆角'
-        }
-    }
+            display: "圆角",
+            min: 0,
+            max: 200,
+        },
+    },
 };
diff --git a/packages/button/src/index.vue b/packages/button/src/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 const props = defineProps<{
     title: string;
-    // color: string;
+    color: string;
     size: number;
     borderRadius: number;
+    backgroundColor: string;
     events?: Record<string, any[]>;
 }>();
 
@@ -17,8 +18,9 @@ function onClick() {
     <button
         :style="{
             fontSize: size + 'px',
-            // color: color,
             borderRadius: borderRadius + 'px',
+            '--bgc': backgroundColor,
+            '--color': color,
         }"
         class="lc-button"
         @click="onClick"

diff --git a/packages/radio/src/index.vue b/packages/radio/src/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const props = defineProps<{
     title: string;
     color: string;
@@ -14,17 +13,17 @@ const props = defineProps<{
 
 <template>
     <div class="lc-radio">
-        <input type="radio" :name="group" />
         <label
             :for="group"
             :style="{
                 fontSize: size + 'px',
-                color: color,
                 backgroundColor: backgroundColor,
                 fontWeight: bold ? 'bold' : 'normal',
                 fontStyle: italic ? 'italic' : 'normal',
+                color: color,
             }"
-            >{{ props.title }}</label
-        >
+            ><input type="radio" :name="group" />
+            <span>{{ props.title }}</span>
+        </label>
     </div>
 </template>
diff --git a/packages/slider/src/index.ts b/packages/slider/src/index.ts
@@ -4,11 +4,11 @@ import './index.css'
 export default {
     render: App,
     editorProps: {
-        // title: {
-        //     type: 'string',
-        //     defaultValue: '50',
-        //     display: '内容'
-        // },
+        title: {
+            type: 'string',
+            defaultValue: '',
+            display: '内容'
+        },
         color: {
             type: 'color',
             defaultValue: '#165DFF',

diff --git a/packages/slider/src/index.vue b/packages/slider/src/index.vue
@@ -18,11 +18,11 @@ const radius = computed(() => (round ? 0 : 10));
 <template>
     <div class="lc-div">
         <div class="lc-slider">
-            <!-- <div
+            <div
                 :style="{
                     fontSize: textSize + 'px',
                 }"
-            >{{ title }}</div> -->
+            >{{ title }}</div>
             <input
                 type="range"
                 min="1"