@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/widgets/IconListSetting.vue

@@ -1,64 +1,66 @@
 <template>
 	<div :class="$style.comp">
 
-		<div>
-			<div class="flex flex-row gap-2">
-				<label class="flex-1 text-text-400">Icons</label>
-				<button type="button" class="text-primary"
-								@click="addIcon()">Add Icon</button>
-			</div>
-			<ListItem :items="item.props.icons" class="mt-4" body-class="divide-y divide-text-50"
-								@reorder="(from, to) => { item.props.icons.splice(to, 0, item.props.icons.splice(from, 1)[0]); apply() }">
-				<template v-slot="{ item, index }">
-					<div class="flex flex-row gap-1 p-2 bg-text-50 rounded-md mb-1">
-						<div data-reorder>
-							<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
-						</div>
-						<div class="flex-1 flex flex-row gap-1" @click="openIcon(item)">
-							<Image :src="imageSrc(item)"
-										 class="w-[36px] aspect-square rounded-lg" />
-							<div class="flex-1 flex flex-col px-3 leading-0">
-								<p class="text-ellipsis overflow-hidden whitespace-nowrap">{{ item.text }}</p>
-								<small class="text-ellipsis overflow-hidden whitespace-nowrap">{{ item.target }}</small>
-							</div>
-						</div>
-						<div>
-							<button type="button" @click="removeIcon(index)">
-								<svg class="fill-text-300 hover:fill-red-500" width="16" height="16" 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>
-				</template>
-			</ListItem>
-		</div>
-
-		<div class="flex flex-row items-center gap-4">
-			<label class="flex-1 text-text-400">Columns</label>
-			<Dropdown v-for="(_viewType, idx) in viewTypes" class="w-[80px]"
-								v-model="item.props.columns[idx]"
-								v-show="_viewType.value === viewType"
-								@change="apply">
-				<option :value="`${viewType}grid-cols-1`">1</option>
-				<option :value="`${viewType}grid-cols-2`">2</option>
-				<option :value="`${viewType}grid-cols-3`">3</option>
-				<option :value="`${viewType}grid-cols-4`">4</option>
-				<option :value="`${viewType}grid-cols-5`">5</option>
-				<option :value="`${viewType}grid-cols-6`">6</option>
-				<option :value="`${viewType}grid-cols-7`">7</option>
-				<option :value="`${viewType}grid-cols-8`">8</option>
-				<option :value="`${viewType}grid-cols-9`">9</option>
-				<option :value="`${viewType}grid-cols-10`">10</option>
-				<option :value="`${viewType}grid-cols-11`">11</option>
-				<option :value="`${viewType}grid-cols-12`">12</option>
-			</Dropdown>
-		</div>
-
-		<ComponentSetting ref="componentSetting"
-											:item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="grid"
-											@change="apply" />
+		<div class="p-6 py-4 flex flex-col gap-4">
+      <div>
+        <div class="flex flex-row gap-2">
+          <label class="flex-1 text-text-400">Icons</label>
+          <button type="button" class="text-primary"
+                  @click="addIcon()">Add Icon</button>
+        </div>
+        <ListItem :items="item.props.icons" class="mt-4" body-class="divide-y divide-border-50"
+                  @reorder="(from, to) => { item.props.icons.splice(to, 0, item.props.icons.splice(from, 1)[0]); apply() }">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row gap-1 p-2 bg-text-50 rounded-md mb-1">
+              <div data-reorder>
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+              <div class="flex-1 flex flex-row gap-1" @click="openIcon(item)">
+                <Image :src="imageSrc(item)"
+                       class="w-[36px] aspect-square rounded-lg" />
+                <div class="flex-1 flex flex-col px-3 leading-0">
+                  <p class="text-ellipsis overflow-hidden whitespace-nowrap">{{ item.text }}</p>
+                  <small class="text-ellipsis overflow-hidden whitespace-nowrap">{{ item.target }}</small>
+                </div>
+              </div>
+              <div>
+                <button type="button" @click="removeIcon(index)">
+                  <svg class="fill-text-300 hover:fill-red-500" width="16" height="16" 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>
+          </template>
+        </ListItem>
+      </div>
+
+      <div class="flex flex-row items-center gap-4">
+        <label class="flex-1 text-text-400">Columns</label>
+        <Dropdown v-for="(_viewType, idx) in viewTypes" class="w-[80px]"
+                  v-model="item.props.columns[idx]"
+                  v-show="_viewType.value === viewType"
+                  @change="apply">
+          <option :value="`${viewType}grid-cols-1`">1</option>
+          <option :value="`${viewType}grid-cols-2`">2</option>
+          <option :value="`${viewType}grid-cols-3`">3</option>
+          <option :value="`${viewType}grid-cols-4`">4</option>
+          <option :value="`${viewType}grid-cols-5`">5</option>
+          <option :value="`${viewType}grid-cols-6`">6</option>
+          <option :value="`${viewType}grid-cols-7`">7</option>
+          <option :value="`${viewType}grid-cols-8`">8</option>
+          <option :value="`${viewType}grid-cols-9`">9</option>
+          <option :value="`${viewType}grid-cols-10`">10</option>
+          <option :value="`${viewType}grid-cols-11`">11</option>
+          <option :value="`${viewType}grid-cols-12`">12</option>
+        </Dropdown>
+      </div>
+    </div>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 		<Modal ref="iconModal" width="400" height="320">
 			<template v-slot:head>
@@ -115,14 +117,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
 
-		viewType: String,
+    viewIndex: Number,
 
-		viewTypes: Array,
+    viewTypes: Array,
 
 	},
 
@@ -178,7 +182,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-4;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/ImageSetting.vue

@@ -1,82 +1,61 @@
 <template>
-	<div :class="computedComp">
-
+  <div :class="$style.comp">
     <div>
-      <div class="flex flex-row gap-1 items-center cursor-pointer">
-        <svg v-if="!expanded['image']" width="12" height="12" 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" 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['image'] = !expanded['image']">Image</strong>
-      </div>
-
-      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
-
-      <div v-if="expanded['image']" class="flex flex-col gap-4">
-
+      <div class="flex flex-col gap-4 p-6 py-4">
         <div>
-          <div class="flex flex-row items-center gap-2">
-            <label class="flex-1 text-text-400">Src</label>
-            <button type="button" v-if="src.length < 2" @click="src.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 class="flex flex-row gap-3">
+            <small class="flex-1 text-text-400" @dbclick="log(item.props)">Image</small>
+            <ImageUploader ref="uploader" @change="image => item.props.src[viewIndex] = image" :upload-fn="uploadImage" class="text-sm"></ImageUploader>
           </div>
-          <div class="flex flex-col gap-2">
-            <div v-for="(_, index) in src" class="items-start">
-              <small class="w-[60px] text-text-300">{{ viewTypes[index].text }}</small>
-              <div class="flex flex-row items-start gap-2">
-                <Image :ref="`image${index}`"
-                       :src="imageSrc(item.props.src[index])"
-                       class="flex-1 min-h-[60px] bg-text-50 rounded-lg"
-                       :editable="true"
-                       @click="$refs[`image${index}`][0].edit()"
-                       @change="(base64, file) => { uploadImage(file).then((res) => item.props.src[index] = res.name); apply() }">
-                  <button type="button" class="absolute top-1 right-1 rounded-full bg-white" v-if="item.props.src[index]"
-                          @click.stop="$refs[`image${index}`][0].reset()">
-                    <svg width="19" height="19" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg>
-                  </button>
-                  <template #empty>
-                    <div class="flex items-center justify-center absolute left-0 top-0 right-0 bottom-0">
-                      <label class="text-text-300">Upload</label>
-                    </div>
-                  </template>
-                </Image>
-                <button type="button" v-if="index > 0" class="py-2" @click="src.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>
+          <div class="mt-1">
+            <div class="flex flex-row items-start gap-2">
+              <Image :ref="`image`"
+                     :src="item.props.src[viewIndex]"
+                     class="w-[100px] aspect-square rounded-xl bg-white"
+                     @click="$refs.uploader.edit(item.props.src[viewIndex])"
+                     item-class="object-cover">
+                <button type="button" class="absolute top-1 right-1 rounded-full bg-white" v-if="item.props.src[viewIndex]"
+                        @click.stop="$refs[`image`].reset()">
+                  <svg width="19" height="19" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg>
                 </button>
-              </div>
-
+              </Image>
             </div>
           </div>
         </div>
 
         <div>
-          <label class="flex-1 text-text-400">Target</label>
+          <small class="flex-1 text-text-400">Target</small>
           <Textbox v-model="item.props.target" @keyup.enter="apply"/>
         </div>
 
         <div>
-          <label class="flex-1 text-text-400">Alt</label>
+          <small class="flex-1 text-text-400">Alt</small>
           <Textbox v-model="item.props.alt" @keyup.enter="apply"/>
         </div>
 
       </div>
     </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')" />
 
 	</div>
 </template>
 
 <script>
 
+import ImageUploader from "../components/ImageUploader.vue";
+
 export default{
+  components: {ImageUploader},
 
 	emits: [ 'change' ],
 
-  inject: [ 'confirm', 'imageSrc', 'uploadImage', 'store' ],
+  inject: [ 'alert', 'confirm', 'imageSrc', 'uploadImage', 'store' ],
 
 	props: {
 
@@ -87,6 +66,8 @@ export default{
 
 		viewType: String,
 
+    viewIndex: Number,
+
 		viewTypes: Array,
 
 	},
@@ -95,20 +76,12 @@ export default{
 
 		apply(){
 			this.$emit('change')
-		},
+		}
 
 	},
 
   computed: {
 
-    computedComp(){
-      return [
-        this.$style.comp,
-        this.width > 240 ? 'grid-cols-2' : ''
-      ]
-        .join(' ')
-    },
-
     componentStore(){
       if(this.store && this.store.components){
         if(!this.store.components.compsetting)
@@ -131,7 +104,7 @@ export default{
       return this.item.props.src
     }
 
-	},
+	}
 
 }
 
@@ -140,7 +113,7 @@ export default{
 <style module>
 
 .comp{
-	@apply grid gap-10;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/LinkSetting.vue

@@ -1,15 +1,15 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="flex flex-col gap-4">
+		<div class="p-6 py-4 flex flex-col gap-4">
 
-      <div>
-        <label class="text-text-400">Text</label>
-        <Textbox v-model="item.props.text" @keyup.enter="$emit('change')"/>
+      <div v-if="item.items.length < 1">
+        <small class="text-text-400">Text</small>
+        <Textbox v-model="item.props.text" maxlength="50" />
       </div>
 
       <div>
-        <label class="text-text-400">Mode</label>
+        <small class="text-text-400">Mode</small>
         <Dropdown v-model="item.props.mode">
           <option disabled selected>Select Mode</option>
           <option value="link">Link</option>
@@ -20,15 +20,15 @@
 
       <div v-if="item.props.mode === 'link'" class="flex flex-col gap-4">
         <div>
-          <label class="text-text-400">To</label>
+          <small class="text-text-400">To</small>
           <div class="flex flex-row gap-2">
-            <Textbox class="flex-1" v-model="item.props.href" @keyup.enter="$emit('change')"/>
+            <Textbox class="flex-1" v-model="link.href"/>
           </div>
         </div>
 
         <div v-if="isExternalLink">
-          <label class="text-text-400">Target</label>
-          <Dropdown v-model="item.props.target" @change="$emit('change')">
+          <small class="text-text-400">Target</small>
+          <Dropdown v-model="link.target">
             <option value="_self">Self</option>
             <option value="_blank">Blank</option>
             <option value="_parent">Parent</option>
@@ -39,15 +39,29 @@
 
       <div v-else-if="item.props.mode === 'route'" class="flex flex-col gap-4">
         <div>
-          <label class="text-text-400">To</label>
+          <small class="text-text-400">To</small>
           <div class="flex flex-row gap-2">
             <Dropdown v-model="route.type" class="w-[70px]"
-                      @change="delete route.path; delete route.hash; delete route.removeHash">
+                      @change="item.props.route = { type:route.type }">
               <option disabled selected>Choose Type</option>
+              <option value="name">Name</option>
               <option value="path">Path</option>
               <option value="hash">Hash</option>
             </Dropdown>
-            <Textbox v-if="route.type === 'path'" class="flex-1" v-model="route.path" @keyup.enter="$emit('change')"/>
+
+            <Dropdown v-if="route.type === 'name'"
+                      class="flex-1"
+                      v-model="route.name">
+              <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="route.type === 'path'"
+                     class="flex-1"
+                     v-model="route.path"
+                     maxlength="100" />
             <Textbox v-else-if="route.type === 'hash'" class="flex-1" v-model="route.hash" @keyup.enter="$emit('change')"/>
           </div>
         </div>
@@ -56,7 +70,7 @@
       <div v-else-if="item.props.mode === 'download'" class="flex flex-col gap-4">
 
         <div>
-          <label class="text-text-400">File</label>
+          <small class="text-text-400">File</small>
           <div>
             <input type="file" ref="file" class="hidden"
                    accept=".jpg,.jpeg,.png,.gif,.xls,.xlsx,.doc,.docx,.ppt,.pptx,.csv,.pdf"
@@ -81,19 +95,19 @@
         </div>
 
         <div>
-          <label class="text-text-400">As</label>
-          <Textbox v-model="download.as" @keyup.enter="$emit('change')" :placeholder="placeholder"/>
+          <small class="text-text-400">As</small>
+          <Textbox v-model="download.as" :placeholder="placeholder"/>
         </div>
       </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>
@@ -106,14 +120,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
 
-		viewType: String,
+    viewIndex: Number,
 
-		viewTypes: Array,
+    viewTypes: Array,
 
 	},
 
@@ -152,14 +168,6 @@ export default{
       return (this.item.props.href ?? '').indexOf('://') > -1;
     },
 
-    download(){
-      if(!this.item.props.download){
-        this.item.props.download = {}
-      }
-
-      return this.item.props.download
-    },
-
     placeholder(){
       return this.download.originalName ?? this.download.name
     },
@@ -169,7 +177,22 @@ export default{
         this.item.props.route = {}
 
       return this.item.props.route
-    }
+    },
+
+    link(){
+      if(!this.item.props.link)
+        this.item.props.link = {}
+
+      return this.item.props.link
+    },
+
+    download(){
+      if(!this.item.props.download){
+        this.item.props.download = {}
+      }
+
+      return this.item.props.download
+    },
 
 	}
 
@@ -180,7 +203,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-8;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>