@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/EmbeddedVideoSetting.vue

@@ -1,11 +1,13 @@
 <template>
 	<div :class="$style.comp">
 
-		<div>
-			<label class="text-text-400">Video URL</label>
-			<Textbox v-model="item.props.videoUrl"
-							 @keyup.enter="$emit('change')" />
-		</div>
+    <div class="p-6 py-4 flex flex-col gap-4">
+      <div>
+        <label class="text-text-400">Video URL</label>
+        <Textbox v-model="item.props.videoUrl"
+                 @keyup.enter="$emit('change')" />
+      </div>
+    </div>
 
 		<ComponentSetting2 :item="item"
 											:view-type="viewType"

package/src/widgets/FAQ.vue

@@ -3,8 +3,8 @@
 		<h3>{{ title }}</h3>
 		<div :class="$style.items">
 			<div v-for="(item, idx) in items" :class="$style.item">
-				<input type="checkbox" :name="$style.comp" :id="`${$style.comp}${id}${idx}`" />
-				<label :for="`${$style.comp}${id}${idx}`" class="text-lg">{{ item.question }}</label>
+				<input type="checkbox" :name="$style.comp" :id="getId(idx)" />
+				<label :for="getId(idx)" class="text-lg">{{ item.question }}</label>
 				<div>
 					<div class="p-4 pt-0 pb-8 text-lg" v-html="item.answer"></div>
 				</div>
@@ -33,8 +33,21 @@ export default{
 
   data(){
     return {
-      id: this.uniqid()
+      id: this.uniqid(),
+      mounted: false
     }
+  },
+
+  methods: {
+
+    getId(idx){
+      return this.mounted ? `${this.$style.comp}${this.id}${idx}` : ''
+    }
+
+  },
+
+  mounted() {
+    this.mounted = true
   }
 
 }

package/src/widgets/FAQSetting.vue

@@ -1,46 +1,50 @@
 <template>
 	<div :class="$style.comp">
 
-		<div>
-			<label class="flex-1 text-text-400">Title</label>
-			<Textbox class="mt-1" v-model="item.props.title" @keyup.enter="$emit('change')"/>
-		</div>
-
-		<div>
-			<div class="flex flex-row gap-4">
-				<label class="flex-1 text-text-400">FAQ</label>
-				<button type="button" class="text-primary" @click="addFAQ">{{ $t('Add')}}</button>
-			</div>
-			<ListItem :items="item.props.items"
-								class="mt-2"
-								@reorder="(from, to) => { item.props.items.splice(to, 0, item.props.items.splice(from, 1)[0]); $emit('change') }">
-				<template v-slot="{ item:obj }">
-					<div v-if="obj._edit" class="flex flex-col gap-2 mb-1">
-						<Textbox v-model="obj.question" :placeholder="$t('Question')" maxlength="60" />
-						<Textarea v-model="obj.answer" rows="4" :placeholder="$t('Answer')" />
-						<Button type="button" @click="() => { delete obj._edit; $emit('change'); }">OK</Button>
-					</div>
-					<div v-else class="flex flex-row gap-2 bg-base-500 p-2 rounded-md mb-1">
-						<div data-reorder class="flex items-center">
-							<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-col cursor-pointer" @click="obj._edit = true">
-							<p class="text-ellipsis overflow-x-hidden whitespace-nowrap">{{ obj.question }}</p>
-							<small class="text-text-400 text-ellipsis overflow-x-hidden whitespace-nowrap">{{ obj.answer }}</small>
-						</div>
-						<button type="button" @click="confirm($t('Remove this obj?'), '', () => { obj.props.images[idx].splice(index, 1); $emit('change') })">
-							<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>
-				</template>
-			</ListItem>
-		</div>
-
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="flex"
-											@change="$emit('change')" />
+    <div class="p-6 py-4 flex flex-col gap-5">
+      <div>
+        <label class="flex-1 text-text-400">Title</label>
+        <Textbox class="mt-1" v-model="item.props.title" @keyup.enter="$emit('change')"/>
+      </div>
+
+      <div>
+        <div class="flex flex-row gap-4">
+          <label class="flex-1 text-text-400">FAQ</label>
+          <button type="button" class="text-primary" @click="addFAQ">{{ $t('Add')}}</button>
+        </div>
+        <ListItem :items="item.props.items"
+                  class="mt-2 bg-base-300 border-border-200 border-[1px] rounded-lg overflow-hidden"
+                  container-class="divide-y divide-border-50"
+                  @reorder="(from, to) => { item.props.items.splice(to, 0, item.props.items.splice(from, 1)[0]); $emit('change') }">
+          <template v-slot="{ item:obj }">
+            <div v-if="obj._edit" class="flex flex-col gap-2 mb-1 p-3">
+              <Textbox v-model="obj.question" :placeholder="$t('Question')" maxlength="60" />
+              <Textarea v-model="obj.answer" rows="4" :placeholder="$t('Answer')" />
+              <Button type="button" @click="() => { delete obj._edit; $emit('change'); }">OK</Button>
+            </div>
+            <div v-else class="flex flex-row gap-3 p-2 rounded-md mb-1">
+              <div data-reorder class="flex items-center">
+                <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-col cursor-pointer" @click="obj._edit = true">
+                <p class="text-ellipsis overflow-x-hidden whitespace-nowrap">{{ obj.question }}</p>
+                <small class="text-text-400 text-ellipsis overflow-x-hidden whitespace-nowrap">{{ obj.answer }}</small>
+              </div>
+              <button type="button" @click="confirm($t('Remove this obj?'), '', () => { obj.props.images[idx].splice(index, 1); $emit('change') })">
+                <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>
+          </template>
+        </ListItem>
+      </div>
+    </div>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 	</div>
 </template>
@@ -55,14 +59,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
 
-		viewType: String,
+    viewType: String,
 
-		viewTypes: Array,
+    viewIndex: Number,
+
+    viewTypes: Array,
 
 	},
 
@@ -82,7 +88,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/FeatureList.vue

@@ -11,6 +11,7 @@
 			<div v-for="item in items" class="flex gap-4" :class="computedItemClass">
 				<div>
 					<Image :src="imageUrl(item.imageUrl)"
+                 @click="previewImage(imageUrl(item.imageUrl))"
                  :class="`object-contain ${item.sizeClass} rounded-xl`"
                  edit-selectable="false" />
 				</div>
@@ -29,6 +30,8 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
+  inject: [ 'previewImage' ],
+
 	mixins: [ componentMixin ],
 
 	props:{

package/src/widgets/FeatureListSetting.vue

@@ -1,100 +1,107 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="flex flex-col gap-1">
-			<label class="text-text-400">Title</label>
-			<Textbox v-model="item.props.title" maxlength="40" @keyup.enter="$emit('change')" placeholder="Title" />
-			<Textarea v-model="item.props.description" rows="3" @blur="$emit('change')" placeholder="Description" />
-		</div>
-
-		<div class="flex flex-col gap-1">
-			<label class="text-text-400">Mode</label>
-			<Dropdown v-model="item.props.mode" @change="item.props.items = []">
-				<option value="">Static</option>
-				<option value="dynamic">Dynamic</option>
-			</Dropdown>
-			<Textbox v-if="item.props.mode === 'dynamic'"
-							 placeholder="Var" v-model="item.props.src"
-							 @blur="$emit('change')"
-							 @keyup.enter="$emit('change')" />
-		</div>
-
-		<div v-if="item.props.mode !== 'dynamic'">
-			<div class="flex flex-row gap-4">
-				<label class="flex-1 text-text-400">Items</label>
-				<button type="button" class="text-primary"
-								@click="$refs.imageModal.open({ image:{} })">Add Item</button>
-			</div>
-			<ListItem :items="item.props.items.filter((_) => _)" class="mt-1"
-								@reorder="(from, to) => { item.props.items.splice(to, 0, item.props.items.splice(from, 1)[0]); $emit('change') }">
-				<template v-slot="{ item:image, index }">
-					<div class="flex flex-row gap-3 p-2 bg-base-500 items-center rounded-lg mb-2">
-						<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 @click="$refs.imageModal.open({ image, idx, index })">
-							<Image :src="imageUrl(image)" class="w-[32px] rounded-md" />
-						</div>
-						<div class="flex-1 flex flex-col leading-4" @click="$refs.imageModal.open({ image, idx, index })">
-							<p class="text-ellipsis whitespace-nowrap overflow-hidden">{{ image.title }}</p>
-							<p class="text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ image.description }}</p>
-						</div>
-						<div>
-							<button type="button" @click="confirm('Hapus gambar ini?', '', () => { item.props.items.splice(index, 1); $emit('change') })">
-								<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>
-				</template>
-			</ListItem>
-		</div>
-
-		<div v-else>
-			<label class="flex-1 text-text-400">Item</label>
-			<div class="mt-1 flex flex-col gap-1">
-				<Textbox v-model="itemPropsItem.title" placeholder="Title var"
-								 @blur="$emit('change')"
-								 @keyup.enter="$emit('change')"/>
-				<Textbox v-model="itemPropsItem.description" placeholder="Description var"
-								 @blur="$emit('change')"
-								 @keyup.enter="$emit('change')"/>
-				<Textbox v-model="itemPropsItem.imageUrl" placeholder="Image var"
-								 @blur="$emit('change')"
-								 @keyup.enter="$emit('change')"/>
-			</div>
-		</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-[60px]"
-								v-model="containerGridColumn[idx]"
-								v-show="_viewType.value === viewType"
-								@change="$emit('change')">
-				<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>
-			</Dropdown>
-		</div>
-
-		<div class="flex flex-row items-center gap-4">
-			<label class="flex-1 text-text-400">Style</label>
-			<Dropdown v-for="(_viewType, idx) in viewTypes" class="w-[150px]"
-								v-model="itemVariant[idx]"
-								v-show="_viewType.value === viewType"
-								@change="$emit('change')">
-				<option :value="`${viewType}flex-row ${viewType}text-left ${viewType}fl-uO88`">Style 1</option>
-				<option :value="`${viewType}flex-col ${viewType}items-center ${viewType}text-center ${viewType}fl-uO89`">Style 2</option>
-			</Dropdown>
-		</div>
-
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="flex"
-											@change="$emit('change')" />
+		<div class="p-6 py-4 flex flex-col gap-4">
+      <div class="flex flex-col gap-1">
+        <label class="text-text-400">Title</label>
+        <Textbox v-model="item.props.title" maxlength="40" @keyup.enter="$emit('change')" placeholder="Title" />
+        <Textarea v-model="item.props.description" rows="3" @blur="$emit('change')" placeholder="Description" />
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <label class="text-text-400">Mode</label>
+        <Dropdown v-model="item.props.mode" @change="item.props.items = []">
+          <option value="">Static</option>
+          <option value="dynamic">Dynamic</option>
+        </Dropdown>
+        <Textbox v-if="item.props.mode === 'dynamic'"
+                 placeholder="Var" v-model="item.props.src"
+                 @blur="$emit('change')"
+                 @keyup.enter="$emit('change')" />
+      </div>
+
+      <div v-if="item.props.mode !== 'dynamic'">
+        <div class="flex flex-row gap-4">
+          <label class="flex-1 text-text-400">Items</label>
+          <button type="button" class="text-primary"
+                  @click="$refs.imageModal.open({ image:{} })">Add Item</button>
+        </div>
+        <ListItem :items="item.props.items.filter((_) => _)"
+                  class="mt-1 border-[1px] border-border-200 bg-base-300 rounded-lg overflow-hidden"
+                  container-class="divide-y divide-border-50"
+                  @reorder="(from, to) => { item.props.items.splice(to, 0, item.props.items.splice(from, 1)[0]); $emit('change') }">
+          <template v-slot="{ item:image, index }">
+            <div class="flex flex-row gap-3 p-2 px-3 items-center rounded-lg">
+              <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 @click="$refs.imageModal.open({ image, idx, index })">
+                <Image :src="imageUrl(image)"
+                       class="w-[32px] aspect-square rounded-md"
+                       item-class="object-cover" />
+              </div>
+              <div class="flex-1 flex flex-col leading-4" @click="$refs.imageModal.open({ image, idx, index })">
+                <p class="text-ellipsis whitespace-nowrap overflow-hidden">{{ image.title }}</p>
+                <p class="text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ image.description }}</p>
+              </div>
+              <div>
+                <button type="button" @click="confirm('Hapus gambar ini?', '', () => { item.props.items.splice(index, 1); $emit('change') })">
+                  <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>
+          </template>
+        </ListItem>
+      </div>
+
+      <div v-else>
+        <label class="flex-1 text-text-400">Item</label>
+        <div class="mt-1 flex flex-col gap-1">
+          <Textbox v-model="itemPropsItem.title" placeholder="Title var"
+                   @blur="$emit('change')"
+                   @keyup.enter="$emit('change')"/>
+          <Textbox v-model="itemPropsItem.description" placeholder="Description var"
+                   @blur="$emit('change')"
+                   @keyup.enter="$emit('change')"/>
+          <Textbox v-model="itemPropsItem.imageUrl" placeholder="Image var"
+                   @blur="$emit('change')"
+                   @keyup.enter="$emit('change')"/>
+        </div>
+      </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-[60px]"
+                  v-model="containerGridColumn[idx]"
+                  v-show="_viewType.value === viewType"
+                  @change="$emit('change')">
+          <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>
+        </Dropdown>
+      </div>
+
+      <div class="flex flex-row items-center gap-4">
+        <label class="flex-1 text-text-400">Style</label>
+        <Dropdown v-for="(_viewType, idx) in viewTypes" class="w-[150px]"
+                  v-model="itemVariant[idx]"
+                  v-show="_viewType.value === viewType"
+                  @change="$emit('change')">
+          <option :value="`${viewType}flex-row ${viewType}text-left ${viewType}fl-uO88`">Style 1</option>
+          <option :value="`${viewType}flex-col ${viewType}items-center ${viewType}text-center ${viewType}fl-uO89`">Style 2</option>
+        </Dropdown>
+      </div>
+    </div>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 		<Modal ref="imageModal" width="360" height="460">
 			<template #head="{ context }">
@@ -127,7 +134,8 @@
 							<label class="flex-1 text-text-400">Gambar</label>
 							<button type="button" class="text-primary" @click="$refs.imageUpload.edit()">Ubah</button>
 						</div>
-						<Image ref="imageUpload" :src="imageUrl(context.image)" class="w-[120px] bg-text-50 mt-1 aspect-square"
+						<Image ref="imageUpload" :src="imageUrl(context.image)"
+                   class="w-[120px] bg-text-50 mt-1 aspect-square"
 									 :editable="true"
 									 @click="$refs.imageUpload.edit()"
                    @change="(base64, file) => { uploadImage(file).then((res) => context.image.imageUrl = res.name); }"/>
@@ -177,14 +185,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
 
-		viewType: String,
+    viewIndex: Number,
 
-		viewTypes: Array,
+    viewTypes: Array,
 
 	},
 
@@ -217,7 +227,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-4;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>