fix(style): fix material design

affects: @he-tree/vue
phphe · Sep 17, 2023 · 67d8854 · 67d8854
1 parent 903f29b
commit 67d8854
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 4 deletions.
diff --git a/packages/he-tree-vue/package.json b/packages/he-tree-vue/package.json
@@ -47,9 +47,9 @@
   "scripts": {
     "dev": "node switch-virtual-list.js 3 && npx vue-demi-switch 3 && vite --config vite.dev.js --host 0.0.0.0",
     "dev2": "node switch-virtual-list.js 2 && npx vue-demi-switch 2 && cd sub-vue2 && vite --config vite.dev.js",
-    "build": "npm run build2 && npm run build3 && cp dist/v3/style.css style/default.css",
-    "build3": "node switch-virtual-list.js 3 && npx vue-demi-switch 3 && vite build && vite build -- --iife && cp src/assets/material-design.css dist/v3/material-design.css",
-    "build2": "node switch-virtual-list.js 2 && npx vue-demi-switch 2 && cd sub-vue2 && vite build && vite build -- --iife &&  cd .. && cp src/assets/material-design.css dist/v2/material-design.css",
+    "build": "npm run build2 && npm run build3 && cp dist/v3/style.css style/default.css && cp src/assets/material-design.css style/material-design.css",
+    "build3": "node switch-virtual-list.js 3 && npx vue-demi-switch 3 && vite build && vite build -- --iife",
+    "build2": "node switch-virtual-list.js 2 && npx vue-demi-switch 2 && cd sub-vue2 && vite build && vite build -- --iife",
     "preview": "vite preview"
   },
   "dependencies": {

diff --git a/packages/he-tree-vue/src/examples/Other1.vue b/packages/he-tree-vue/src/examples/Other1.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h3>he-tree</h3>
-    <DraggableTree class="mtl-tree" v-model="data" ref="tree" treeLine dragCopy>
+    <DraggableTree class="mtl-tree" v-model="data" ref="tree" treeLine>
       <template #default="{ node, stat }">
         <OpenIcon v-if="stat.children.length" :open="stat.open" class="mtl-mr" @click.native="stat.open = !stat.open" />
         <input class="mtl-checkbox mtl-mr" type="checkbox" v-model="stat.checked" />

diff --git a/packages/he-tree-vue/style/material-design.css b/packages/he-tree-vue/style/material-design.css
@@ -0,0 +1,57 @@
+.mtl-tree .tree-node-inner {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.mtl-tree .tree-node {
+  padding: 1px 0;
+}
+
+.mtl-tree .tree-node:hover {
+  background-color: #ededed;
+  /* recommend: active #ddeff9, active & hover: #cfe6f2 */
+}
+
+.mtl-checkbox {
+  width: 14px;
+  height: 14px;
+}
+
+.mtl-ml {
+  margin-left: 4px;
+}
+
+.mtl-mr {
+  margin-right: 4px;
+}
+
+.mtl-tree table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+
+.mtl-tree td,
+.mtl-tree th {
+  border-bottom: 1px solid rgba(224, 224, 224, 1);
+  line-height: 1.5;
+}
+
+.mtl-tree tr:last-child td,
+.mtl-tree tr:last-child tr {
+  border-bottom: 0px;
+}
+
+.mtl-text-left {
+  text-align: left;
+}
+
+.mtl-text-center {
+  text-align: center;
+}
+
+.mtl-text-right {
+  text-align: right;
+}