@mixd-id/web-scaffold 0.2.240706 → 0.2.250801009

package/src/widgets/ComponentSetting2.vue

@@ -1,55 +1,74 @@
 <template>
 	<div :class="$style.comp">
 
-    <div>
-      <div class="flex flex-row gap-1 items-center cursor-pointer">
-        <svg v-if="!expanded['custom']" width="12" height="12" @click="expanded['custom'] = !expanded['custom']" 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['custom'] = !expanded['custom']" 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['custom'] = !expanded['custom']">Custom Property</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 class="flex flex-col divide-y divide-border-50">
+
+      <div v-for="(values, key) in viewedItems" class="p-6 py-4 relative">
+        <div class="absolute top-0 right-0">
+          <button type="button" class="p-3" @click="delete item.props[key]">
+            <svg width="14" height="14" 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>
+
+        <component v-if="keys[key].values.type"
+                   :is="keys[key].values.type"
+                   :="keys[key].values"
+                   :item="item"
+                   :view-types="viewTypes"
+                   :view-index="viewIndex"
+                   :view-type="viewType"
+                   :name="key"
+                   :text="keys[key].text" />
+
+        <div v-else class="flex flex-col gap-1 mt-1">
+          <small class="flex-1 text-text-400">{{ keys[key].text }}</small>
+
+          <Dropdown v-model="values[viewIndex]" class="flex-1 w-full max-w-[300px]">
+            <option value="">Default</option>
+            <option v-for="kValue in keys[key].values" :value="`${viewType}${kValue[0]}`">{{ kValue[1] ?? kValue[0] }}</option>
+          </Dropdown>
+        </div>
+
       </div>
 
-      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+      <div class="p-3">
+        <div class="text-center">
+          <button type="button" class="text-primary p-3" ref="addBtn" @click="select">Add Property</button>
+        </div>
 
-      <div v-if="expanded['custom']" class="flex flex-col gap-10">
+        <ContextMenu ref="contextMenu"
+                     position="bottom"
+                     @dismiss="search = ''"
+                     class="rounded-none"
+                     @open="$refs.search.select()">
+          <div class="flex flex-col min-w-[200px] h-[80vh]" @click.stop>
 
-        <div v-for="(values, key) in viewedItems">
-          <div class="flex flex-row items-center gap-2">
-            <label class="flex-1 text-text-400">{{ keys[key].text }}</label>
-            <button type="button" v-if="values.length < 2" @click="values.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>
-            <button type="button" @click="delete item.props[key]">
-              <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="mt-1 flex flex-row gap-2">
-            <div v-for="(_, index) in values" class="items-start">
-              <div class="flex flex-row items-center" v-if="values.length > 1">
-                <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
-                <button type="button" v-if="index > 0" @click="values.splice(index, 1)">
-                  <svg width="11" height="11" 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-if="Array.isArray(keys[key].values)" v-model="values[index]" class="flex-1 max-w-[300px]">
-                  <option value="">Default</option>
-                  <option v-for="kValue in keys[key].values" :value="`${viewTypes[index].value}${kValue[0]}`">{{ kValue[1] ?? kValue[0] }}</option>
-                </Dropdown>
-                <component v-else
-                           :is="keys[key].values.type"
-                           :="keys[key].values"
-                           :keys="componentKeysForIndex(keys[key].values, index)"
-                           v-model="values[index]"
-                           class="flex-1 max-w-[300px]" />
+            <div class="p-3">
+              <strong>Select Property</strong>
+              <Textbox ref="search" class="mt-3" v-model="search" placeholder="Search..." :clearable="true" @clear="search = ''"></Textbox>
+            </div>
+
+            <div class="flex-1 flex flex-col gap-3 overflow-y-auto px-3">
+              <div v-for="group in viewedGroups" class="flex flex-col gap-2">
+                <div class="px-5">
+                  <strong class="text-text-400">{{ group.text }}</strong>
+                </div>
+                <div class="h-[1px] bg-text-100"></div>
+                <div class="">
+                  <div v-for="item in group.items">
+                    <button :class="appStyle.menuItem"
+                            type="button" @click="add(item);$refs.contextMenu.close()">
+                      {{ item.text }}
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
 
+          </div>
+        </ContextMenu>
       </div>
+
     </div>
 
     <Modal ref="modal" width="480" height="480" hash="#select-property"
@@ -58,7 +77,7 @@
         <div class="relative p-6 flex flex-col gap-4">
           <h3>Add Property</h3>
           <div class="absolute top-0 right-0 p-2">
-            <button type="button" class="p-2" @click="$router.replace({ hash:'' })">
+            <button type="button" class="p-2" @click="$router.replace({ hash:$route.hash.replace('#select-property', '') })">
               <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
                 <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
               </svg>
@@ -101,7 +120,7 @@ export default{
 
 	emits: [ 'change' ],
 
-	inject: [ 'imageUrl', 'store', 'uploadImage' ],
+	inject: [ 'appStyle', 'getRightPane' ],
 
 	props: {
 
@@ -110,79 +129,39 @@ export default{
 			required: true
 		},
 
+    viewIndex: Number,
+
 		viewType: String,
 
 		viewTypes: Array,
 
-    excludes: Array,
+    excludes: {
+      type: Array,
+      default: []
+    },
 
 	},
 
 	methods: {
 
     add(item){
-      if(!this.item.props[item.key])
+      if(!Array.isArray(this.item.props[item.key]))
         this.item.props[item.key] = []
 
       this.item.props[item.key].push('')
 
-      this.$router.replace({ hash:'' })
-    },
-
-    componentKeysForIndex(values, index){
-
-      let keys
-      if(values.keys){
-
-        const prefix = this.viewTypes[index].value
-
-        keys = values.keys.map(arr => {
-          arr = arr.map(_ => prefix + _)
-          return arr
-        })
-      }
-      return keys
+      this.$router.replace({ hash:this.$route.hash.replace('#select-property', '') })
     },
 
-    emptyComponentText(key, index){
-      if(index > 0){
-        let text = '-'
-        for(let i = index - 1 ; i >= 0 ; i--){
-          let prevValue = this[key][i]
-          if(prevValue && typeof prevValue === 'string'){
-            prevValue = prevValue.substring(prevValue.indexOf(':') + 1)
-            const prevOpt = this.components[key].filter(_ => _[1] === prevValue).pop()
-            if(prevOpt){
-              text = prevOpt[0]
-              break
-            }
-          }
-        }
-        return text
-      }
-      return '-'
+    select(){
+      const ref = this.getRightPane() ?? this.$refs.addBtn
+      this.$refs.contextMenu.open(ref)
     },
 
 	},
 
 	computed: {
 
-    componentStore(){
-      if(this.store && this.store.components){
-        if(!this.store.components.compsetting)
-          this.store.components.compsetting = {}
-
-        return this.store.components.compsetting
-      }
-      return {}
-    },
-
-    expanded(){
-      if(!this.componentStore['expanded'])
-        this.componentStore['expanded'] = {}
-      return this.componentStore['expanded']
-    },
-
     keys(){
       const items = {}
 
@@ -200,11 +179,8 @@ export default{
       let items = {}
 
       for(let key in this.item.props){
-        if(this.keys[key] && (!Array.isArray(this.excludes) || !this.excludes.includes(key)) &&
-            (
-                Array.isArray(this.item.props[key]) &&
-                this.item.props[key].length > 0
-            )){
+        if(this.keys[key] && !this.excludes.includes(key) &&
+            ( Array.isArray(this.item.props[key]) && this.item.props[key].length > 0)){
           items[key] = this.item.props[key]
         }
       }
@@ -267,13 +243,7 @@ export default{
                 [ 'aspect-[8/9]', '8/9' ],
               ]},
 
-            { text:'Position', key:'position', values: [
-                [ 'static', 'Static' ],
-                [ 'fixed', 'Fixed' ],
-                [ 'absolute', 'Absolute' ],
-                [ 'relative', 'Relative' ],
-                [ 'sticky', 'Sticky' ],
-              ]},
+            { text:'Position', key:'position', values: { type: 'PositionSetting' }},
 
             { text:'Display', key:'display', values: [
                 [ 'hidden', 'Hidden' ],
@@ -306,74 +276,14 @@ export default{
                 [ 'overflow-y-scroll', 'Y Scroll' ],
               ]},
 
-            { text:'Top', key:'top', values: [
-                [ 'top-0', '0' ],
-                [ 'top-4', '4' ],
-                [ 'top-6', '6' ],
-                [ 'top-8', '8' ],
-                [ 'top-12', '12' ],
-                [ 'top-16', '16' ],
-                [ 'top-20', '20' ],
-                [ 'top-24', '24' ],
-                [ 'top-28', '28' ],
-                [ 'top-32', '32' ],
-                [ 'top-36', '36' ],
-                [ 'top-48', '48' ],
-              ]},
-
-            { text:'Left', key:'left', values: [
-                [ 'left-0', '0' ],
-                [ 'left-4', '4' ],
-                [ 'left-6', '6' ],
-                [ 'left-8', '8' ],
-                [ 'left-12', '12' ],
-                [ 'left-16', '16' ],
-                [ 'left-20', '20' ],
-                [ 'left-24', '24' ],
-                [ 'left-28', '28' ],
-                [ 'left-32', '32' ],
-                [ 'left-36', '36' ],
-                [ 'left-48', '48' ],
-              ]},
-
-            { text:'Right', key:'right', values: [
-                [ 'right-0', '0' ],
-                [ 'right-4', '4' ],
-                [ 'right-6', '6' ],
-                [ 'right-8', '8' ],
-                [ 'right-12', '12' ],
-                [ 'right-16', '16' ],
-                [ 'right-20', '20' ],
-                [ 'right-24', '24' ],
-                [ 'right-28', '28' ],
-                [ 'right-32', '32' ],
-                [ 'right-36', '36' ],
-                [ 'right-48', '48' ],
-              ]},
-
-            { text:'Bottom', key:'bottom', values: [
-                [ 'bottom-0', '0' ],
-                [ 'bottom-4', '4' ],
-                [ 'bottom-6', '6' ],
-                [ 'bottom-8', '8' ],
-                [ 'bottom-12', '12' ],
-                [ 'bottom-16', '16' ],
-                [ 'bottom-20', '20' ],
-                [ 'bottom-24', '24' ],
-                [ 'bottom-28', '28' ],
-                [ 'bottom-32', '32' ],
-                [ 'bottom-36', '36' ],
-                [ 'bottom-48', '48' ],
-              ]},
-
-            { text:'Z Index', key:'zIndex', zIndex: [
+            { text:'Z Index', key:'zIndex', values: [
                 [ 'z-0', '0' ],
                 [ 'z-10', '10' ],
                 [ 'z-20', '20' ],
                 [ 'z-30', '30' ],
                 [ 'z-40', '40' ],
                 [ 'z-50', '50' ],
-              ]}
+              ]},
 
         ]},
 
@@ -390,9 +300,9 @@ export default{
             { text:'Flex Align', key:'flexAlign', values: [
                 [ 'items-start', 'Start' ],
                 [ 'items-end', 'End' ],
-                [ 'Center', 'items-center' ],
-                [ 'Baseline', 'items-baseline' ],
-                [ 'Stretch', 'items-stretch' ],
+                [ 'items-center', 'Center' ],
+                [ 'items-baseline', 'Baseline' ],
+                [ 'items-stretch', 'Stretch' ],
               ]},
 
             { text:'Flex Basis', key:'flexBasis', values: [
@@ -480,49 +390,13 @@ export default{
 
         { text:'Backgrounds', items: [
 
-            { text:'Background Color', key:'bgColors', values:{
-              type:'ColorPicker2',
-              keys: [ ['bg-']]
-            }},
-
-            { text:'Background Position', key:'bgPosition', values: [
-                [ 'bg-center', 'Center' ],
-                [ 'bg-top', 'Top' ],
-                [ 'bg-right', 'Right' ],
-                [ 'bg-bottom', 'Bottom' ],
-                [ 'bg-left', 'Left' ],
-                [ 'bg-top-right', 'Top Right' ],
-                [ 'bg-top-left', 'Top Left' ],
-                [ 'bg-bottom-right', 'Bottom Right' ],
-                [ 'bg-bottom-left', 'Bottom Left' ],
-              ]},
-
-            { text:'Background Repeat', bgRepeat:'', values: [
-                [ 'bg-repeat', 'Repeat' ],
-                [ 'bg-no-repeat', 'No Repeat' ],
-                [ 'bg-repeat-x', 'Repeat X' ],
-                [ 'bg-repeat-y', 'Repeat Y' ],
-                [ 'bg-repeat-round', 'Repeat Round' ],
-                [ 'bg-repeat-space', 'Repeat Space' ],
-              ]},
-
-            { text:'Background Size', key:'bgSize', values: [
-                [ 'bg-auto', 'Auto' ],
-                [ 'bg-cover', 'Cover' ],
-                [ 'bg-contain', 'Contain' ],
-                [ 'bg-50%', '50%' ],
-                [ 'bg-20%', '20%' ],
-                [ 'bg-10%', '10%' ],
-              ]}
+            { text:'Background', key:'bgColors', values:{ type:'BackgroundColorSetting' }},
 
           ]},
 
         { text:'Borders', items: [
 
-            { text:'Border Color', key:'bdColor', values:{
-                type:'ColorPicker2',
-                keys: [ ['border-']]
-              }},
+            { text:'Border Color', key:'bdColor', values:{ type:'BorderColorSetting' }},
 
             { text:'Border Size', key:'bdSize', values: {
                 type: 'MultiValueSetting2',
@@ -533,10 +407,10 @@ export default{
             { text:'Border Radius', key:'bdRadius', values: [
                 [ 'rounded-none', 'None' ],
                 [ 'rounded', 'Normal' ],
-                [ 'rounded-sm', 'Sm' ],
-                [ 'rounded-md', 'Md' ],
-                [ 'rounded-lg', 'Lg' ],
-                [ 'rounded-xl', 'Xl' ],
+                [ 'rounded-sm', 'Small' ],
+                [ 'rounded-md', 'Medium' ],
+                [ 'rounded-lg', 'Large' ],
+                [ 'rounded-xl', 'Extra Large' ],
                 [ 'rounded-2xl', '2xl' ],
                 [ 'rounded-3xl', '3xl' ],
                 [ 'rounded-full', 'Full' ],
@@ -678,16 +552,16 @@ export default{
                 [ 'h-32', '32' ],
                 [ 'h-36', '36' ],
                 [ 'h-48', '48' ],
-                [ 'h-10vh', '10vh' ],
-                [ 'h-20vh', '20vh' ],
-                [ 'h-30vh', '30vh' ],
-                [ 'h-40vh', '40vh' ],
-                [ 'h-50vh', '50vh' ],
-                [ 'h-60vh', '60vh' ],
-                [ 'h-70vh', '70vh' ],
-                [ 'h-80vh', '80vh' ],
-                [ 'h-90vh', '90vh' ],
-                [ 'h-100vh', '100vh' ]
+                [ 'h-[10vh]', '10vh' ],
+                [ 'h-[20vh]', '20vh' ],
+                [ 'h-[30vh]', '30vh' ],
+                [ 'h-[40vh]', '40vh' ],
+                [ 'h-[50vh]', '50vh' ],
+                [ 'h-[60vh]', '60vh' ],
+                [ 'h-[70vh]', '70vh' ],
+                [ 'h-[80vh]', '80vh' ],
+                [ 'h-[90vh]', '90vh' ],
+                [ 'h-[100vh]', '100vh' ]
               ]},
 
             { text:'Min Height', key:'minHeight', values: [
@@ -821,17 +695,15 @@ export default{
                 [ 'w-[360px]', '360px' ],
                 [ 'w-[420px]', '420px' ],
                 [ 'w-[480px]', '480px' ],
-                [ 'w-1/12', '1/12' ],
-                [ 'w-2/12', '2/12' ],
-                [ 'w-3/12', '3/12' ],
-                [ 'w-4/12', '4/12' ],
-                [ 'w-5/12', '5/12' ],
-                [ 'w-6/12', '6/12' ],
-                [ 'w-7/12', '7/12' ],
-                [ 'w-8/12', '8/12' ],
-                [ 'w-9/12', '9/12' ],
-                [ 'w-10/12', '10/12' ],
-                [ 'w-11/12', '11/12' ],
+                [ 'w-[10vw]', '10vw' ],
+                [ 'w-[20vw]', '20vw' ],
+                [ 'w-[30vw]', '30vw' ],
+                [ 'w-[40vw]', '40vw' ],
+                [ 'w-[50vw]', '50vw' ],
+                [ 'w-[60vw]', '60vw' ],
+                [ 'w-[70vw]', '70vw' ],
+                [ 'w-[80vw]', '80vw' ],
+                [ 'w-[90vw]', '90vw' ],
               ]}
 
           ]},
@@ -912,6 +784,12 @@ export default{
                 [ 'text-end', 'End' ],
               ]},
 
+            { text:'Text Color', key:'textColor', values:{
+                type:'ColorPicker2',
+                keys: [ ['text-']],
+                title: "Text Color"
+              }},
+
             { text:'Text Decoration', key:'textDecoration', values: [
                 [ 'underline', 'Underline' ],
                 [ 'overline', 'Overline' ],

package/src/widgets/ComponentSetting3.vue

@@ -225,7 +225,7 @@ export default{
 <style module>
 
 .comp{
-  @apply flex-1 flex flex-col divide-y divide-text-50;
+  @apply flex-1 flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/ContactForm.vue

@@ -35,7 +35,7 @@
 		</div>
 
 		<div>
-      <Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
+      <Button ref="submitBtn" class="w-full" @click="submitForm" :state="canSubmit ? 1 : -1">
         <h5>Kirim</h5>
       </Button>
     </div>
@@ -106,7 +106,7 @@ export default{
 			this.$refs.submitBtn.setState(2)
 			this.axios({
 				method: this.submitMethod ?? 'post',
-				url: import.meta.env.VITE_API_HOST + this.submitUrl,
+				url: this.submitUrl,
 				data: {
 					url: this.$route.path,
           host: location.hostname,
@@ -186,7 +186,7 @@ export default{
 
 .comp{
 	@apply flex-1 w-full max-w-[480px] mx-auto rounded-lg overflow-hidden;
-  @apply border-text-200 border-[1px] p-6;
+  @apply border-border-200 border-[1px] p-6;
 	@apply flex flex-col gap-12 bg-base;
 }