@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/ArticleSetting.vue

@@ -1,15 +1,11 @@
 <template>
-	<div :class="$style.comp">
+  <div :class="$style.comp">
 
-    <div class="flex flex-col gap-4" v-if="viewType === ''">
-      <div>
-        <strong class="flex-1 text-text-400">Article</strong>
-        <div class="h-[1px] bg-text-100 mt-2"></div>
-      </div>
+    <div class="flex flex-col">
 
-      <div class="overflow-x-auto">
-        <label class="text-text-400">Action</label>
-        <div class="flex flex-row bg-text-50 mt-1">
+      <div class="p-6 py-4">
+        <small class="text-text-400">Format</small>
+        <div class="flex flex-row flex-wrap bg-text-50 mt-1">
           <button class="p-3" type="button" @click="format('bold')">
             <svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
           </button>
@@ -61,17 +57,6 @@
         </div>
       </div>
 
-      <div class="flex flex-row gap-4">
-        <label class="flex-1 text-text-400">Color</label>
-        <ColorPicker v-for="(_viewType, index) in viewTypes"
-                     v-show="_viewType.value === viewType"
-                     v-model="textColor[index]"
-                     @change="$emit('change')"
-                     :prefix="`${viewType}text-`"
-                     :custom-color="true">
-        </ColorPicker>
-      </div>
-
       <ContextMenu ref="headingContext">
         <div class="flex flex-col">
           <button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h1')">
@@ -240,13 +225,14 @@
 
     </div>
 
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="block"
-											@change="$emit('change')" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
-	</div>
+  </div>
 </template>
 
 <script>
@@ -270,6 +256,8 @@ export default{
 
 		viewType: String,
 
+    viewIndex: Number,
+
 		viewTypes: Array,
 
 	},
@@ -463,7 +451,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-6;
+	@apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/BackgroundColorSetting.vue

@@ -0,0 +1,153 @@
+<template>
+	<div :class="$style.comp">
+
+    <div>
+      <small class="text-text-400">Background Color</small>
+      <ColorPicker3 class="mt-1" v-model="bgColors[this.viewIndex]" />
+    </div>
+
+    <div>
+      <div class="flex flex-row">
+        <small class="flex-1 text-text-400">Background Image</small>
+        <button v-if="bgImages[viewIndex]" type="button" class="text-primary text-sm"
+                @click="delete bgImages[viewIndex]">Remove</button>
+      </div>
+      <Image :src="imageSrc(bgImages[viewIndex])"
+             :editable="true"
+             item-class="object-contain"
+             ref="image"
+             class="mt-1 w-[80px] bg-text-50 aspect-square rounded-lg border-[1px] border-border-200"
+             @click="$refs.image.edit()"
+             @change="(_, file) => upload(file)" />
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <small class="text-text-400">Position</small>
+        <Dropdown v-model="bgPosition[viewIndex]">
+          <option value="">-</option>
+          <option value="bg-center">Center</option>
+          <option value="bg-top">Top</option>
+          <option value="bg-right">Right</option>
+          <option value="bg-bottom">Bottom</option>
+          <option value="bg-left">Left</option>
+          <option value="bg-top-right">Top Right</option>
+          <option value="bg-top-left">Top Left</option>
+          <option value="bg-bottom-right">Bottom Right</option>
+          <option value="bg-bottom-left">Bottom Left</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <small class="text-text-400">Size</small>
+        <Dropdown v-model="bgSize[viewIndex]">
+          <option value="">-</option>
+          <option value="bg-auto">Auto</option>
+          <option value="bg-cover">Cover</option>
+          <option value="bg-contain">Contain</option>
+          <option value="bg-50%">50%</option>
+          <option value="bg-20%">20%</option>
+          <option value="bg-10%">10%</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <small class="text-text-400">Repeat</small>
+        <Dropdown v-model="bgRepeat[viewIndex]">
+          <option value="">-</option>
+          <option value="bg-repeat">Repeat</option>
+          <option value="bg-no-repeat">No Repeat</option>
+          <option value="bg-repeat-x">Repeat X</option>
+          <option value="bg-repeat-y">Repeat Y</option>
+          <option value="bg-repeat-round">Repeat Round</option>
+          <option value="bg-repeat-space">Repeat Space</option>
+        </Dropdown>
+      </div>
+    </div>
+
+	</div>
+</template>
+
+<script>
+import ColorPicker3 from "../components/ColorPicker3.vue"
+
+export default{
+
+  components: { ColorPicker3 },
+
+  inject: [ 'alert', 'imageSrc', 'uploadImage' ],
+
+  computed: {
+
+    bgColors(){
+      if(!Array.isArray(this.item.props.bgColors))
+        this.item.props.bgColors = []
+
+      return this.item.props.bgColors
+    },
+
+    bgImages(){
+      if(!Array.isArray(this.item.props.bgImages))
+        this.item.props.bgImages = []
+      return this.item.props.bgImages
+    },
+
+    bgPosition(){
+      if(!Array.isArray(this.item.props.bgPosition))
+        this.item.props.bgPosition = []
+      return this.item.props.bgPosition
+    },
+
+    bgRepeat(){
+      if(!Array.isArray(this.item.props.bgRepeat))
+        this.item.props.bgRepeat = []
+      return this.item.props.bgRepeat
+    },
+
+    bgSize(){
+      if(!Array.isArray(this.item.props.bgSize))
+        this.item.props.bgSize = []
+      return this.item.props.bgSize
+    }
+
+  },
+
+  methods: {
+
+    upload(file){
+      this.uploadImage(file)
+          .then((res) => {
+            this.bgImages[this.viewIndex] = res.name
+          })
+          .catch(err => this.alert(err))
+    }
+
+  },
+
+
+  props:{
+
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewIndex: Number,
+
+    viewType: String,
+
+    viewTypes: Array,
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-4
+}
+
+</style>

package/src/widgets/BorderColorSetting.vue

@@ -0,0 +1,57 @@
+<template>
+	<div :class="$style.comp">
+
+    <div>
+      <small class="text-text-400">Border Color</small>
+      <ColorPicker3 class="mt-1" v-model="bdColor[this.viewIndex]" />
+    </div>
+
+	</div>
+</template>
+
+<script>
+import ColorPicker3 from "../components/ColorPicker3.vue"
+
+export default{
+
+  components: { ColorPicker3 },
+
+  inject: [ 'alert', 'imageSrc', 'uploadImage' ],
+
+  computed: {
+
+    bdColor(){
+      if(!Array.isArray(this.item.props.bdColor))
+        this.item.props.bdColor = []
+
+      return this.item.props.bdColor
+    }
+
+  },
+
+  props:{
+
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewIndex: Number,
+
+    viewType: String,
+
+    viewTypes: Array,
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-4
+}
+
+</style>

package/src/widgets/BotEditor/BotEditorActions.vue

@@ -5,7 +5,7 @@
 
   <div v-else class="flex-1 flex flex-col">
 
-    <div class="flex flex-row items-center p-2 pt-3 px-6 bg-base-300 border-b-[1px] border-text-50">
+    <div class="flex flex-row items-center p-2 pt-3 px-6 bg-base-300 border-b-[1px] border-border-50">
       <div class="flex-1">
         <strong>{{ action.name }}</strong>
       </div>
@@ -21,7 +21,7 @@
       </div>
 
       <div :style="sidebarStyle"
-           class="relative flex flex-col border-l-[1px] border-text-50 panel-400 overflow-hidden">
+           class="relative flex flex-col border-l-[1px] border-border-50 panel-400 overflow-hidden">
         <div :class="$style.resize1"
              @mousedown="(e) => $util.dragResize(e, resize1)"></div>
 
@@ -112,6 +112,7 @@ export default{
       this.socket.send(`${this.controller}.open-action`, { uid })
           .then(_ => {
             this.action = _.item
+            this.config.selectedUid = this.action.uid
             this.initialAction = JSON.stringify(this.action)
           })
     },

package/src/widgets/BotEditor/BotEditorSettings.vue

@@ -0,0 +1,21 @@
+<template>
+	<div :class="$style.comp">
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply p-6;
+}
+
+</style>

package/src/widgets/BotEditor.vue

@@ -2,7 +2,7 @@
 	<div v-if="cConfig" :class="$style.comp">
 
     <div :style="sidebarStyle"
-         class="relative flex flex-col border-r-[1px] border-text-50 panel-400 overflow-hidden">
+         class="relative flex flex-col border-r-[1px] border-border-50 panel-400 overflow-hidden">
 
       <div v-if="page !== 'Actions'" class="flex-1 flex flex-col">
         <div class="p-5">
@@ -12,7 +12,7 @@
 
         <div class="flex-1">
 
-          <div class="flex flex-col divide-y divide-text-50 border-y-[1px] border-text-50">
+          <div class="flex flex-col divide-y divide-border-50 border-y-[1px] border-border-50">
             <router-link :to="{ query:{ t:'actions' } }" type="button" class="p-3 px-5 text-left">Actions</router-link>
             <router-link :to="{ query:{ t:'knowledge' } }" type="button" class="p-3 px-5 text-left">Knowledge</router-link>
             <router-link :to="{ query:{ t:'classifications' } }" type="button" class="p-3 px-5 text-left">Classifications</router-link>
@@ -33,7 +33,7 @@
         <br />
 
         <ListItem :items="actions"
-                  container-class="divide-y divide-text-50"
+                  container-class="divide-y divide-border-50"
                   @reorder="(from, to) => { actions.splice(to, 0, actions.splice(from, 1)[0]); }">
           <template v-slot="{ item }">
             <div class="p-3 hover:bg-base-500 flex flex-row gap-3 items-center">
@@ -53,14 +53,13 @@
 
       </div>
 
-      <div class="flex flex-col border-t-[1px] border-text-50 relative" :style="bottombarStyle">
+      <div class="flex flex-col border-t-[1px] border-border-50 relative" :style="bottombarStyle">
         <div :class="$style.resize2"
              @mousedown="(e) => $util.dragResize(e, resize2)"></div>
 
         <UserActionConsole class="flex-1"
                            ref="console"
-                           @test-message="testMessage"
-                           @test-reset="testReset" />
+                           :controller="controller" />
 
       </div>
 
@@ -85,6 +84,7 @@ import {capitalize} from "../utils/helpers.mjs";
 import BotEditorActions from "./BotEditor/BotEditorActions.vue";
 import VirtualGrid from "../components/VirtualGrid.vue";
 import UserActionConsole from "./UserActionBuilder/UserActionConsole.vue";
+import BotEditorSettings from "./BotEditor/BotEditorSettings.vue";
 
 
 export default{
@@ -93,6 +93,7 @@ export default{
     UserActionConsole,
     VirtualGrid,
     BotEditorActions,
+    BotEditorSettings,
   },
 
   inject: [ 'alert', 'confirm', 'socket', 'toast' ],
@@ -140,12 +141,17 @@ export default{
   data(){
     return {
       actions: null,
+      user: null,
       page: '',
     }
   },
 
   methods: {
 
+    getUser(){
+      return this.user
+    },
+
     load(){
 
     },
@@ -157,6 +163,13 @@ export default{
           })
     },
 
+    open(id){
+      this.socket.send(`${this.controller}.open`, { id })
+          .then(res => {
+            this.user = res.user
+          })
+    },
+
     resize1(w) {
       if (this.sidebar.width + w >= 200 && this.sidebar.width + w <= 600) {
         this.sidebar.width += w
@@ -169,14 +182,6 @@ export default{
       }
     },
 
-    testMessage(){
-
-    },
-
-    testReset(){
-
-    },
-
   },
 
   props: {
@@ -186,6 +191,14 @@ export default{
 
     controller: String,
 
+    id: String,
+
+  },
+
+  provide(){
+    return {
+      getUser: this.getUser
+    }
   },
 
   watch: {
@@ -197,6 +210,13 @@ export default{
       }
     },
 
+    id: {
+      immediate: true,
+      handler(to){
+        this.open(to)
+      }
+    },
+
     page: {
       immediate: true,
       handler(to){
@@ -222,7 +242,7 @@ export default{
 }
 
 .resize2 {
-  @apply h-[3px] cursor-n-resize absolute top-0 right-0 left-0 bg-red-500 z-50;
+  @apply h-[3px] cursor-n-resize absolute top-0 right-0 left-0 z-50;
 }
 
 </style>

package/src/widgets/ButtonSetting.vue

@@ -1,11 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="flex flex-col gap-4">
-      <div>
-        <strong class="flex-1 text-text-400">Button</strong>
-        <div class="h-[1px] bg-text-100 mt-2"></div>
-      </div>
+		<div class="p-6 py-4 flex flex-col gap-4">
 
       <div>
         <label class="flex-1 text-text-400">Text</label>
@@ -48,11 +44,12 @@
       </div>
     </div>
 
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="flex"
-											@change="$emit('change')" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 	</div>
 </template>
@@ -72,9 +69,11 @@ export default{
 			required: true
 		},
 
-		viewType: String,
+    viewType: String,
+
+    viewIndex: Number,
 
-		viewTypes: Array,
+    viewTypes: Array,
 
 	},
 
@@ -108,7 +107,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-6;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/CarouselSetting.vue

@@ -1,51 +1,28 @@
 <template>
 	<div :class="$style.comp">
 
-    <div>
-      <div class="flex flex-row gap-1 items-center cursor-pointer">
-        <svg v-if="!expanded['carousel']" width="12" height="12" @click="expanded['carousel'] = !expanded['carousel']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
-        <svg v-else width="12" height="12" @click="expanded['carousel'] = !expanded['carousel']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-        <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['carousel'] = !expanded['carousel']">Carousel</strong>
-        <button type="button" class="text-primary" @click="$router.replace({ hash:'#select-property' })">
-          <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>
-        </button>
-      </div>
-
-      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+    <div class="flex flex-col">
 
-      <div v-if="expanded['carousel']" class="flex flex-col gap-8">
+      <div class="p-6 py-4 grid grid-cols-2 gap-4">
 
         <div>
           <div class="flex flex-row items-center gap-2">
             <label class="flex-1 text-text-400">Gap</label>
-            <button type="button" v-if="containerGap.length < 2" @click="containerGap.push('')">
-              <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>
-            </button>
           </div>
           <div class="flex flex-row gap-2">
-            <div v-for="(_, index) in containerGap" class="items-start">
-              <div class="flex flex-row">
-                <small class="w-[60px] flex-1 text-text-300">{{ viewTypes[index].text }}</small>
-                <button type="button" v-if="index > 0" @click="containerGap.splice(index, 1)">
-                  <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
-                </button>
-              </div>
-              <div class="flex flex-row items-start gap-2">
-                <Dropdown v-model="containerGap[index]" class="mt-1 min-w-[100px]" @change="apply">
-                  <option :value="`${viewType}gap-0`">0</option>
-                  <option :value="`${viewType}gap-1`">1</option>
-                  <option :value="`${viewType}gap-2`">2</option>
-                  <option :value="`${viewType}gap-3`">3</option>
-                  <option :value="`${viewType}gap-4`">4</option>
-                  <option :value="`${viewType}gap-5`">5</option>
-                  <option :value="`${viewType}gap-6`">6</option>
-                </Dropdown>
-              </div>
-            </div>
+            <Dropdown v-model="containerGap[viewIndex]" class="mt-1 w-full" @change="apply">
+              <option :value="`${viewType}gap-0`">0</option>
+              <option :value="`${viewType}gap-1`">1</option>
+              <option :value="`${viewType}gap-2`">2</option>
+              <option :value="`${viewType}gap-3`">3</option>
+              <option :value="`${viewType}gap-4`">4</option>
+              <option :value="`${viewType}gap-5`">5</option>
+              <option :value="`${viewType}gap-6`">6</option>
+            </Dropdown>
           </div>
         </div>
 
-        <div class="grid grid-cols-2 gap-4">
+        <div>
           <div>
             <label class="text-text-400">Autoplay</label>
             <Dropdown v-model="item.props.autoPlay" class="mt-1" @change="apply">
@@ -53,17 +30,25 @@
               <option v-for="i in 10" :value="i * 1000">{{ i }} seconds</option>
             </Dropdown>
           </div>
+        </div>
 
+        <div class="col-span-2">
           <div class="flex flex-row gap-4">
             <div>
               <label class="text-text-400">Legend</label>
-              <div class="mt-1 py-2">
+              <div class="mt-1">
                 <Checkbox v-model="item.props.useLegend" @change="apply"/>
               </div>
             </div>
+            <div>
+              <label class="text-text-400">Prev/Next</label>
+              <div class="mt-1">
+                <Checkbox v-model="item.props.useNextPrev" @change="apply"/>
+              </div>
+            </div>
             <div>
               <label class="text-text-400">Infinite</label>
-              <div class="mt-1 py-2">
+              <div class="mt-1">
                 <Checkbox v-model="item.props.infinite" @change="apply"/>
               </div>
             </div>
@@ -74,11 +59,12 @@
 
     </div>
 
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="flex"
-											@change="apply" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 		<Modal ref="imageModal" width="320" height="640">
 			<template #head="{ context }">
@@ -134,9 +120,11 @@ export default{
 			required: true
 		},
 
-		viewType: String,
+    viewType: String,
+
+    viewIndex: Number,
 
-		viewTypes: Array,
+    viewTypes: Array,
 
 	},
 
@@ -187,7 +175,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-8;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>