cleanup and stuff

scratchuz4k · Jun 26, 2024 · 2341c45 · 2341c45
1 parent 1620b77
commit 2341c45
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # Site Builder
 
-With this you can build an website with just a json object
+With this you can build an website with just a json object, i also include some components.
+
+[Demo](https://scratchuz4k.github.io/site-builder/)
 
 ## Recommended Installation
 
@@ -29,6 +31,8 @@ app.use(components).mount("#app");
   - Column
   - Row
   - Content
+- Misc
+  - Tree
 
 
 ## Example

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@scratchuz4k/site-builder",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/App.vue b/src/App.vue
@@ -56,6 +56,7 @@ const items = ref([
             ],
           },
           {
+            is_selected: true,
             component: 'form-buttons',
           }
         ]
@@ -89,7 +90,10 @@ const value = ref({ "name": "adaaaw", "username": "adw", "password": "wdd" })
   <tree v-model="items">
     <template v-slot="{ element, parent, stats }">
       <div style="display: flex;justify-content: space-between;width:100%">
-        <p>{{ element.component }}</p>
+        <div style="display: flex;align-items: center;">
+          <input type="checkbox" :checked="element.is_selected" style="width: 14px; height: 14px" />
+          <p>{{ element.component }}</p>
+        </div>
         <button v-if="element.children && element.children.length" type="button"
           @click="orderTree(element.children, stats)">
           <font-awesome-icon v-if="stats.sortOrder == 'asc'" icon="fas fa-sort-amount-up"></font-awesome-icon>

diff --git a/src/components/misc/TreeContent.vue b/src/components/misc/TreeContent.vue
@@ -1,27 +1,26 @@
 <template>
     <li :class="[
         dragged.item === props.modelValue ? 'selected' : '',
-        props.modelValue.children && props.modelValue.children.length ? 'has-child' : '',
+        props.modelValue.children && props.modelValue.children.length ? 'has-child' : ''
     ]">
-        <div @dragstart="dragStart($event)" style="cursor: pointer; display: flex; align-items: center">
+        <div :class="['tree-content', showParentPlaceHolder ? 'hovered' : '']" @dragstart="dragStart($event)">
             <div draggable="true" @dragover="dragOverParent($event)" @drop="drop($event, props.parent, props.index)"
-                style="width: 5px" @dragleave="dragEndParent()">
+                style="width: 8px" @dragleave="dragEndParent()">
                 <button style="margin-left: -8px" :class="{
                     hide: !(props.modelValue.children && props.modelValue.children.length),
                 }" @click="() => (show = !show)">
                     <font-awesome-icon v-if="show" :icon="['fas', 'square-minus']" />
                     <font-awesome-icon v-else :icon="['fas', 'square-plus']" />
                 </button>
             </div>
-            <div style="cursor: pointer; display: flex; align-items: center; width: 100%" draggable="true"
-                @dragleave="dragEnd()" @dragover="dragOver($event)" @drop="drop($event, props.modelValue, 0)">
-                <input type="checkbox" checked style="width: 14px; height: 14px" />
+            <div class="tree-item" draggable="true" @dragleave="dragEnd()" @dragover="dragOver($event)"
+                @drop="drop($event, props.modelValue, 0)">
                 <slot :element="props.modelValue" :parent="props.parent" :stats="stats"></slot>
             </div>
         </div>
         <ul v-if="showPlaceHolder">
             <li>
-                <div style="border: dotted 1px #bcbec0; background: antiquewhite; height: 20px"></div>
+                <div class="tree-placeholder"></div>
             </li>
         </ul>
         <ul v-if="show" v-for="(child, childIndex) in props.modelValue.children">
@@ -32,9 +31,6 @@
             </TreeContent>
         </ul>
     </li>
-    <li v-if="showParentPlaceHolder">
-        <div style="border: dotted 1px #bcbec0; background: antiquewhite; height: 20px"></div>
-    </li>
 </template>
 <script setup>
 import { ref, reactive } from "vue";
@@ -52,7 +48,7 @@ const showPlaceHolder = ref(false);
 const show = ref(true);
 const stats = reactive({
     sortkey: props.index,
-    sortOrder: "asc",
+    sortOrder: "asc"
 });
 
 const dragStart = (event) => {
@@ -128,4 +124,27 @@ const drop = (event, item, index) => {
 .selected {
     background-color: azure;
 }
+
+.hovered {
+    background: antiquewhite;
+}
+
+.tree-content {
+    cursor: pointer;
+    display: flex;
+    align-items: center
+}
+
+.tree-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: 100%
+}
+
+.tree-placeholder {
+    border: dotted 1px #bcbec0;
+    background: antiquewhite;
+    height: 20px
+}
 </style>
diff --git a/src/composables/useTree.js b/src/composables/useTree.js
@@ -1,4 +1,4 @@
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 
 const dragged = reactive({
@@ -7,15 +7,8 @@ const dragged = reactive({
     parent: null,
 })
 
-const temp = reactive({
-    item: null,
-    index: null,
-    parent: null,
-})
-
 export default function useTree() {
     return {
-        dragged,
-        temp
+        dragged
     }
 }
diff --git a/src/stories/Tree.stories.js b/src/stories/Tree.stories.js
@@ -20,7 +20,7 @@ export const Main = {
                     component: 'form', children: [{ component: 'title', class: ["mt-10"], children: [] }, {
                         component: 'row', children: [{ component: 'column', children: [{ configs: { label: 'Nome Completo', name: 'name' }, component: 'input', }] },
                         ],
-                    }, { component: 'form-buttons', }]
+                    }, { is_selected: true, component: 'form-buttons', }]
                 }]
             }, {
                 component: 'row', children: [{ component: 'column2', children: [{ configs: { label: 'Username', name: 'username' }, component: 'input', }] }, { component: 'column1', children: [{ configs: { label: 'Password', name: 'password' }, component: 'input', }] }
@@ -42,11 +42,13 @@ export const Main = {
         <Tree v-model="items">
             <template v-slot="{ element, parent, stats }">
                 <div style="display: flex;justify-content: space-between;width:100%">
-                    <p>{{ element.component }}</p>
-                    <button v-if="element.children && element.children.length" type="button"
-                    @click="orderTree(element.children, stats)">
-                    <font-awesome-icon v-if="stats.sortOrder == 'asc'" icon="fas fa-sort-amount-up"></font-awesome-icon>
-                    <font-awesome-icon v-else icon="fas fa-sort-amount-down"></font-awesome-icon>
+                    <div style="display: flex;align-items: center;">
+                        <input type="checkbox" :checked="element.is_selected" style="width: 14px; height: 14px" />
+                        <p>{{ element.component }}</p>
+                    </div>
+                    <button v-if="element.children && element.children.length" type="button" @click="orderTree(element.children, stats)">
+                        <font-awesome-icon v-if="stats.sortOrder == 'asc'" icon="fas fa-sort-amount-up"></font-awesome-icon>
+                        <font-awesome-icon v-else icon="fas fa-sort-amount-down"></font-awesome-icon>
                     </button>
                 </div>
             </template>