@mixd-id/web-scaffold 0.1.230406194 → 0.1.230406196

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406194",
+  "version": "0.1.230406196",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Link.vue

@@ -1,5 +1,18 @@
 <template>
-  <a v-if="isExternalLink && items.length > 0" :target="target">
+  <a v-if="mode === 'download' && items.length > 0"
+     :href="download.url"
+     :download="download.as ?? (download.originalName ?? '')">
+    <component v-for="(item, idx) in items"
+               :is="item.type"
+               :key="idx"
+               :="item" />
+  </a>
+  <a v-else-if="mode === 'download'"
+     :href="download.url"
+     :download="download.as ?? (download.originalName ?? '')">
+    {{ text }}
+  </a>
+  <a v-else-if="isExternalLink && items.length > 0" :target="target">
     <component v-for="(item, idx) in items"
                :is="item.type"
                :key="idx"
@@ -29,8 +42,10 @@ export default{
       type: String,
       default: ''
     },
+    mode: String,
     target: String,
     text: String,
+    download: Object,
   },
 
   computed: {

package/src/components/Radio.vue

@@ -5,7 +5,7 @@
         <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
       </div>
     </div>
-    <input type="radio" class="hidden" :checked="cChecked"/>
+    <input type="radio" :name="name" class="hidden" :checked="cChecked"/>
     <slot></slot>
 	</div>
 </template>

package/src/widgets/LinkSetting.vue

@@ -4,25 +4,67 @@
 		<div class="flex flex-col gap-4">
 
       <div>
-        <label class="flex-1 text-text-400">Text</label>
+        <label class="text-text-400">Text</label>
         <Textbox v-model="item.props.text" @keyup.enter="$emit('change')"/>
       </div>
 
       <div>
-        <label class="flex-1 text-text-400">To</label>
-        <Textbox v-model="item.props.href" @keyup.enter="$emit('change')"/>
+        <label class="text-text-400">Mode</label>
+        <Dropdown v-model="item.props.mode">
+          <option disabled selected>Select Mode</option>
+          <option value="link">Link</option>
+          <option value="download">Download</option>
+        </Dropdown>
       </div>
 
-      <div v-if="isExternalLink">
-        <label class="flex-1 text-text-400">Target</label>
-        <Dropdown v-model="item.props.target" @change="$emit('change')">
-          <option value="_self">Self</option>
-          <option value="_blank">Blank</option>
-          <option value="_parent">Parent</option>
-          <option value="_top">Top</option>
-        </Dropdown>
+      <div v-if="item.props.mode === 'link'" class="flex flex-col gap-4">
+        <div>
+          <label class="text-text-400">To</label>
+          <Textbox v-model="item.props.href" @keyup.enter="$emit('change')"/>
+        </div>
+
+        <div v-if="isExternalLink">
+          <label class="text-text-400">Target</label>
+          <Dropdown v-model="item.props.target" @change="$emit('change')">
+            <option value="_self">Self</option>
+            <option value="_blank">Blank</option>
+            <option value="_parent">Parent</option>
+            <option value="_top">Top</option>
+          </Dropdown>
+        </div>
       </div>
 
+      <div v-else-if="item.props.mode === 'download'" class="flex flex-col gap-4">
+
+        <div>
+          <label class="text-text-400">File</label>
+          <div>
+            <input type="file" ref="file" class="hidden"
+                   accept=".jpg,.jpeg,.png,.gif,.xls,.xlsx,.doc,.docx,.ppt,.pptx,.csv,.pdf"
+                   @change="onChange" />
+            <button v-if="!download.url" type="button"
+                    @click="$refs.file.click()"
+                    class="w-full p-2 text-center bg-text-50 rounded-lg text-text-300">
+              Click to Add File
+            </button>
+            <div v-else class="p-2 border-l-[2px] border-primary bg-text-50 flex flex-row items-center rounded-r-lg">
+              <div class="flex-1 px-1 text-ellipsis overflow-hidden whitespace-nowrap">
+                {{ placeholder }}
+              </div>
+              <button type="button" @click="this.item.props.download = {}">
+                <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="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <label class="text-text-400">As</label>
+          <Textbox v-model="download.as" @keyup.enter="$emit('change')" :placeholder="placeholder"/>
+        </div>
+      </div>
+
+
     </div>
 
 		<ComponentSetting :item="item"
@@ -58,10 +100,19 @@ export default{
 		}
 	},
 
-	inject: [ 'confirm', 'imageSrc' ],
+	inject: [ 'alert', 'confirm', 'imageSrc', 'uploadImage' ],
 
 	methods: {
 
+    onChange(){
+      this.uploadImage(this.$refs.file.files[0], { target:'downloads' })
+          .then((obj) => {
+            console.log(obj)
+            Object.assign(this.download, obj)
+            this.$emit('change')
+          })
+          .catch(err => this.alert(err))
+    }
 
 	},
 
@@ -71,6 +122,18 @@ 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
+    }
+
 	}
 
 }

package/src/widgets/WebPageBuilder.vue

@@ -945,14 +945,14 @@ export default{
     },
 
     onHooks(model, event, items){
-      if(model === 'page' && event === 'update'){
+      /*if(model === 'page' && event === 'update'){
         items.forEach((item) => {
           if(item.id === this.page.id){
             Object.assign(this.page, item)
             //this.reloadIframe()
           }
         })
-      }
+      }*/
     },
 
     onKeyDown(e){
@@ -1326,12 +1326,12 @@ export default{
       }
     },
 
-    async uploadImage(image){
+    async uploadImage(image, extra = {}){
 
       return axios({
             method: this.uploadConfig.method,
             url: this.uploadConfig.url,
-            data: createFormData({ image })
+            data: createFormData({ image, ...extra })
           })
           .then((res) => {
             return res.data