@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/LinkSettingModal.vue

@@ -0,0 +1,173 @@
+<template>
+  <Modal ref="modal" width="360" height="420">
+    <template v-slot:head>
+      <div class="relative p-5">
+        <h3>Add Menu</h3>
+        <div class="absolute top-0 right-0 p-2">
+          <button type="button" class="p-2" @click="$refs.modal.close()">
+            <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>
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <template #default>
+      <div class="flex-1 p-5 flex flex-col gap-4">
+
+        <div class="flex flex-row gap-4">
+          <div>
+            <label class="text-text-400">Image</label>
+            <Image ref="image"
+                   class="w-[64px] aspect-square bg-base-300 border-[1px] border-border-200 rounded-lg"
+                   :src="imageSrc(instance.image)"
+                   :editable="true"
+                   @click="$refs.image.edit()"
+                   @change="(_, file) => instance.image = file" />
+          </div>
+          <div class="flex-1">
+            <label class="text-text-400">Text</label>
+            <Textbox v-model="instance.text" maxlength="50" />
+          </div>
+        </div>
+
+        <div>
+          <label class="text-text-400">Mode</label>
+          <Dropdown v-model="instance.mode">
+            <option disabled selected>-Select Mode-</option>
+            <option value="parent">Parent</option>
+            <option value="route">Route</option>
+            <option value="action">Action</option>
+            <option value="link">Link</option>
+          </Dropdown>
+        </div>
+
+        <div v-if="instance.mode === 'route'"
+             class="flex flex-col gap-4">
+          <div>
+            <label class="text-text-400">Target</label>
+            <div class="flex flex-row gap-2">
+              <Dropdown v-model="instance.route.type"
+                        class="w-[100px]">
+                <option disabled selected>Choose Type</option>
+                <option value="name">Name</option>
+                <option value="path">Path</option>
+                <option value="hash">Hash</option>
+              </Dropdown>
+              <Dropdown v-if="instance.route.type === 'name'"
+                        v-model="instance.route.name"
+                        class="flex-1">
+                <option value="Home">Home</option>
+                <option value="Cart">Cart</option>
+                <option value="Search">Search</option>
+                <option value="AccountProfile">Account Profile</option>
+                <option value="AccountHistory">Account History</option>
+              </Dropdown>
+              <Textbox v-else-if="instance.route.type === 'path'" class="flex-1" v-model="instance.route.path" />
+              <Textbox v-else-if="instance.route.type === 'hash'" class="flex-1" v-model="instance.route.hash" />
+            </div>
+          </div>
+        </div>
+
+        <div v-else-if="instance.mode === 'action'"
+             class="flex flex-col gap-4">
+          <Dropdown v-model="instance.action.name">
+            <option value="" disabled selected>-Choose-</option>
+            <option value="search">Search</option>
+          </Dropdown>
+        </div>
+
+        <div v-if="instance.mode === 'link'" class="flex flex-col gap-4">
+          <div>
+            <label class="text-text-400">Target</label>
+            <div class="flex flex-row gap-2">
+              <Textbox class="flex-1" v-model="instance.link.href" />
+            </div>
+          </div>
+
+          <div>
+            <label class="text-text-400">Target</label>
+            <Dropdown v-model="instance.link.target">
+              <option value="_self">Self</option>
+              <option value="_blank">Blank</option>
+              <option value="_parent">Parent</option>
+              <option value="_top">Top</option>
+            </Dropdown>
+          </div>
+        </div>
+
+      </div>
+    </template>
+
+    <template #foot>
+      <div class="p-5">
+        <Button ref="saveBtn" class="w-[90px]"
+                :state="canSave ? 1 : -1"
+                @click="save">
+          Save
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+
+import {computed, inject, ref, useTemplateRef} from "vue";
+
+const modal = useTemplateRef('modal')
+const imageSrc = inject('imageSrc')
+const instance = ref(null)
+const callback = ref(null)
+
+const canSave = computed(() => {
+  return !!instance.value.text
+})
+
+function open(obj = {}, cb){
+  instance.value = Object.assign({
+    route:{},
+    action:{},
+    link:{
+      target: "_self"
+    },
+    download:{}
+  }, obj)
+
+  callback.value = cb
+
+  modal.value.open()
+}
+
+function save(){
+  if(!canSave.value) return
+
+  const obj = {
+    image: instance.value.image,
+    text: instance.value.text,
+    mode: instance.value.mode,
+    [instance.value.mode]: instance.value[instance.value.mode]
+  }
+  if(obj.mode === 'parent')
+    obj.items = []
+
+  if(typeof callback.value === 'function')
+    callback.value(obj)
+
+  modal.value.close()
+}
+
+defineExpose({
+  open
+})
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/LogViewer.vue

@@ -79,7 +79,7 @@ export default{
 }
 
 .container{
-  @apply flex flex-col divide-y divide-text-50;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/MarginSetting.vue

@@ -131,12 +131,12 @@ export default{
 }
 
 .comp button{
-	@apply border-[1px] border-text-200 bg-text-100 rounded-lg p-1 px-3;
+	@apply border-[1px] border-border-200 bg-text-100 rounded-lg p-1 px-3;
 }
 
 .comp select{
 	@apply appearance-none outline-none p-1 px-2 bg-transparent cursor-pointer w-full;
-	@apply border-[1px] border-text-200 rounded-lg;
+	@apply border-[1px] border-border-200 rounded-lg;
 }
 
 </style>

package/src/widgets/MenuEditor.vue

@@ -42,7 +42,7 @@
                   type="button"
                   @click="instance.icon = svg"
                   class="border-[1px] rounded-lg flex items-center justify-center p-4 bg-base-500"
-                  :class="instance.icon === svg ? 'border-primary' : 'border-text-200'"
+                  :class="instance.icon === svg ? 'border-primary' : 'border-border-200'"
                   v-html="$util.addHTMLAttribute(svg, { width:21, height:21, class:'fill-text-500' })">
           </button>
           <button v-if="isCustomIcon"

package/src/widgets/MenuItem1Setting.vue

@@ -0,0 +1,78 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="p-6 px-4 flex flex-col gap-4">
+
+      <div>
+        <div class="flex flex-row gap-2 items-center">
+          <small class="flex-1 text-text-400">Menu</small>
+          <button type="button"
+                  class="text-primary text-sm"
+                  @click="$refs.modal.open({}, item => menu.push(item))">
+            Add Menu
+          </button>
+        </div>
+
+        <TreeView class="mt-2"
+                  v-model="menu"
+                  @add="(items) => openComponentSelector({ callback:(component) => items.push(component) })"
+                  @duplicate="duplicate">
+          <template #default="{ item }">
+            <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
+                 @click="$refs.modal.open(item, updatedItem => Object.assign(item, updatedItem))">
+              {{ item.text }}
+            </div>
+          </template>
+        </TreeView>
+      </div>
+
+    </div>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
+
+    <LinkSettingModal ref="modal" />
+
+  </div>
+</template>
+
+<script setup>
+
+import {computed, inject} from "vue";
+import LinkSettingModal from "./LinkSettingModal.vue";
+
+const { item } = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+
+  viewType: String,
+
+  viewIndex: Number,
+
+  viewTypes: Array,
+})
+
+const duplicate = inject('duplicate')
+const openComponentSelector = inject('openComponentSelector')
+
+const menu = computed(() => {
+  if(!Array.isArray(item.props.menu))
+    item.props.menu = []
+  return item.props.menu
+})
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-col divide-y divide-border-50;
+}
+
+</style>

package/src/widgets/ModalSetting.vue

@@ -1,54 +1,47 @@
 <template>
   <div :class="$style.comp">
 
-    <div class="flex flex-col gap-4">
+    <div class="p-6 py-4">
+
+      <div class="flex flex-col">
+        <small class="text-text-400">Open</small>
+        <Switch v-model="item.props.debugState" />
+      </div>
+
+    </div>
+
+    <div class="p-6 py-4 flex flex-col gap-4">
+
       <div>
-        <strong class="flex-1 text-text-400">Modal</strong>
-        <div class="h-[1px] bg-text-100 mt-2"></div>
+        <small class="text-text-400">Hash</small>
+        <Textbox v-model="item.props.hash" placeholder="With hash # prefix" />
       </div>
 
-      <div class="grid grid-cols-2 gap-4">
-
-        <div class="col-span-2 flex flex-row items-center">
-          <label :class="$style.label" class="flex-1">Hash</label>
-          <div class="flex flex-row items-center gap-1">
-            <Textbox v-model="item.props.hash" class="w-[150px]" placeholder="With hash # prefix"/>
-          </div>
-        </div>
-
-        <div class="col-span-2 flex flex-row items-center">
-          <label :class="$style.label" class="flex-1">Position</label>
-          <div class="flex flex-row items-center gap-1">
-            <Dropdown v-model="item.props.dock">
-              <option disabled selected>Choose Position</option>
-              <option value="center">Center</option>
-              <option value="top">Top</option>
-              <option value="bottom">Bottom</option>
-              <option value="left">Left</option>
-              <option value="right">Right</option>
-            </Dropdown>
-          </div>
-        </div>
-
-        <div class="col-span-2 flex flex-row items-center">
-          <label :class="$style.label" class="flex-1">Dismissable</label>
-          <Checkbox v-model="item.props.dismissable" />
-        </div>
-
-        <div class="col-span-2 flex flex-row items-center">
-          <label :class="$style.label" class="flex-1">Debug</label>
-          <Switch v-model="item.props.debugState" />
-        </div>
+      <div>
+        <small class="text-text-400">Position</small>
+        <Dropdown v-model="item.props.dock">
+          <option disabled selected>Choose Position</option>
+          <option value="center">Center</option>
+          <option value="top">Top</option>
+          <option value="bottom">Bottom</option>
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+        </Dropdown>
+      </div>
 
+      <div>
+        <small class="text-text-400">Dismissable</small>
+        <Checkbox v-model="item.props.dismissable" />
       </div>
 
     </div>
 
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											default-display="block"
-											@change="$emit('change')" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 	</div>
 </template>
 
@@ -71,11 +64,16 @@ export default{
 
 	props: {
 
-		item: Object,
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
 
-		viewTypes: Array,
+    viewIndex: Number,
 
-		viewType: String
+    viewTypes: Array,
 
 	},
 
@@ -90,7 +88,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/MultiValueSetting.vue

@@ -110,12 +110,12 @@ export default{
 }
 
 .comp button{
-  @apply border-[1px] border-text-200 bg-text-100 rounded-lg p-1 px-3;
+  @apply border-[1px] border-border-200 bg-text-100 rounded-lg p-1 px-3;
 }
 
 .comp select{
   @apply appearance-none outline-none p-1 px-2 bg-transparent cursor-pointer w-full;
-  @apply border-[1px] border-text-200 rounded-lg;
+  @apply border-[1px] border-border-200 rounded-lg;
 }
 
 </style>

package/src/widgets/MultiValueSetting2.vue

@@ -1,26 +1,34 @@
 <template>
   <div :class="$style.comp">
 
+    <small class="text-text-400">
+      {{ text }}
+    </small>
+
     <div class="flex flex-row gap-1">
-      <button v-for="_type in types" type="button" @click="setType(_type)">
-        <slot :name="`icon${_type}`">
-          <svg v-if="_type === 1" width="12" height="12" :class="_type === type ? 'fill-primary-500' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352z"/></svg>
-          <svg v-else-if="_type === 2" width="12" height="12" :class="_type === type ? 'fill-primary-500' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M120 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h72a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8zm280 0h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a16 16 0 0 1 16 16v352a16 16 0 0 1-16 16h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>
-          <svg v-else-if="_type === 4" width="12" height="12" :class="_type === type ? 'fill-primary-500' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80zm240-16v176H32V80c0-8.837 7.163-16 16-16h192zM32 432V272h208v176H48c-8.837 0-16-7.163-16-16zm240 16V272h208v160c0 8.837-7.163 16-16 16H272zm208-208H272V64h192c8.837 0 16 7.163 16 16v160z"/></svg>
-        </slot>
-      </button>
+      <Radio v-for="(_, index) in keys.length"
+             :custom="true"
+             :value="index"
+             v-model.number="type" @change="resetValue">
+        <button type="button">
+          <svg v-if="index === 0" width="12" height="12" :class="index === type ? 'fill-primary-500' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352z"/></svg>
+          <svg v-else-if="index === 1" width="12" height="12" :class="index === type ? 'fill-primary-500' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M120 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h72a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8zm280 0h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a16 16 0 0 1 16 16v352a16 16 0 0 1-16 16h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>
+          <svg v-else-if="index === 2" width="12" height="12" :class="index === type ? 'fill-primary-500' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80zm240-16v176H32V80c0-8.837 7.163-16 16-16h192zM32 432V272h208v176H48c-8.837 0-16-7.163-16-16zm240 16V272h208v160c0 8.837-7.163 16-16 16H272zm208-208H272V64h192c8.837 0 16 7.163 16 16v160z"/></svg>
+        </button>
+      </Radio>
     </div>
 
-    <div class="grid gap-1 mt-1" :class="`grid-cols-${type}`">
-      <select v-for="(__, _index) in type" @change="setValue()"
-              :ref="`value`"
-              :value="`${value[_index]}`" class="max-w-[100px]">
-        <option value="">-</option>
-        <option v-for="_value in values"
-                :value="Array.isArray(_value) ? `${keys[index][_index]}${_value[0]}` : `${keys[index][_index]}${_value}`">
-          {{ `${Array.isArray(_value) ? _value[1] : _value}` }}
-        </option>
-      </select>
+    <div class="grid gap-1 mt-1" :class="`grid-cols-${gridCols[type]}`">
+      <div v-for="(_key, _index) in keys[type]">
+        <small class="text-text-400">{{ texts[type][_index] }}</small>
+        <select v-model="value[_index]">
+          <option value="">-</option>
+          <option v-for="_value in values"
+                  :value="`${viewType}${_key}${Array.isArray(_value) ? _value[0] : _value}`">
+            {{ Array.isArray(_value) ? _value[1] : _value }}
+          </option>
+        </select>
+      </div>
     </div>
 
   </div>
@@ -30,11 +38,18 @@
 
 export default{
 
-  emits: [ 'change', 'update:modelValue' ],
+  emits: [ 'change' ],
 
   props: {
 
-    modelValue: String,
+    name: String,
+
+    text: String,
+
+    item: {
+      type: Object,
+      required: true
+    },
 
     keys: {
       type: Array,
@@ -47,47 +62,65 @@ export default{
 
     values: {
       type: Array,
-      default: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
+      default: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto' ]
     },
 
+    viewType: String,
+
+    viewIndex: Number,
+
+    viewTypes: Array,
+
   },
 
-  methods: {
+  data(){
+    return {
+      value: [],
+      type: 0,
+      gridCols: {
+        0: 1,
+        1: 2,
+        2: 4
+      },
+      texts: {
+        0: [ 'All' ],
+        1: [ 'X', 'Y' ],
+        2: [ 'Left', 'Top', 'Right', 'Bottom' ]
+      }
+    }
+  },
 
-    setType(type){
-      let val = []
-      for(let i = 0; i < type - 1; i++)
-        val.push(' ')
+  methods: {
 
-      this.$emit('update:modelValue', val.join(''))
+    resetValue(){
+      const value = []
+      for(let i = 0 ; i < this.gridCols[this.type] ; i++)
+        value.push('')
+      this.value = value
     },
 
     setValue(){
-      this.$emit('update:modelValue', this.$refs.value.map(_ => _.value).join(' '))
+      this.value = (this.item.props[this.name][this.viewIndex] ?? '').split(' ')
+      this.type = Object.values(this.gridCols).indexOf(this.value.length)
     }
 
   },
 
-  computed: {
-
-    viewIndex(){
-      return this.viewTypes.findIndex(_ => _.value === this.viewType)
-    },
-
-    types(){
-      return (this.keys ?? []).map(_ => _.length)
-    },
+  mounted() {
+    this.setValue()
+  },
 
-    type(){
-      return this.value.length
-    },
+  watch: {
 
-    index(){
-      return this.keys.findIndex(_ => _.length === this.type)
+    value: {
+      deep: true,
+      handler(){
+        this.item.props[this.name][this.viewIndex] = this.value.join(' ')
+      }
     },
 
-    value(){
-      return (this.modelValue ?? '').split(' ')
+    viewIndex(){
+      this.setValue()
     }
 
   }
@@ -103,12 +136,12 @@ export default{
 }
 
 .comp button{
-  @apply border-[1px] border-text-200 bg-text-100 rounded-lg p-1 px-3;
+  @apply border-[1px] border-border-200 bg-text-100 rounded-lg p-1 px-3;
 }
 
 .comp select{
   @apply appearance-none outline-none p-1 px-2 bg-transparent cursor-pointer w-full;
-  @apply border-[1px] border-text-200 rounded-lg;
+  @apply border-[1px] border-border-200 rounded-lg;
 }
 
 </style>