@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/CartSetting.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="p-6 px-4 flex flex-col gap-4">
+
+      <div>
+        <small class="text-text-400">API Url</small>
+        <Textbox v-model="item.props.apiUrl" />
+      </div>
+
+    </div>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
+
+  </div>
+</template>
+
+<script setup>
+
+defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+
+  viewType: String,
+
+  viewIndex: Number,
+
+  viewTypes: Array,
+})
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-col divide-y divide-border-50;
+}
+
+</style>

package/src/widgets/CheckoutSetting.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="p-6 px-4 flex flex-col gap-4">
+
+      <div>
+        <small class="text-text-400">API Url</small>
+        <Textbox v-model="item.props.apiUrl" />
+      </div>
+
+    </div>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
+
+  </div>
+</template>
+
+<script setup>
+
+defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+
+  viewType: String,
+
+  viewIndex: Number,
+
+  viewTypes: Array,
+})
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-col divide-y divide-border-50;
+}
+
+</style>

package/src/widgets/CollapsiblePanelSetting.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="p-6 px-4 flex flex-col gap-4">
+
+      <div>
+        <small class="text-text-400">Text</small>
+        <Textbox v-model="item.props.text" maxlength="50" />
+      </div>
+
+    </div>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
+
+  </div>
+</template>
+
+<script setup>
+
+const { item } = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+
+  viewType: String,
+
+  viewIndex: Number,
+
+  viewTypes: Array,
+})
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-col divide-y divide-border-50;
+}
+
+</style>

package/src/widgets/ColumnSelector.vue

@@ -1,5 +1,5 @@
 <template>
-	<Modal :state="isOpen" width="320" height="400">
+	<Modal :state="isOpen" width="360" height="480">
 	  <template v-slot:head>
 	    <div class="relative p-5">
 	      <h3>{{ $t('Select Column') }}</h3>
@@ -10,15 +10,28 @@
 	          </svg>
 	        </button>
 	      </div>
+
+        <div class="mt-5">
+          <Textbox placeholder="Cari..."
+                   v-model="search"
+                   :clearable="true"
+                   @clear="search = ''">
+            <template #start>
+              <div class="pl-3">
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+              </div>
+            </template>
+          </Textbox>
+        </div>
 	    </div>
 	  </template>
     <template #foot>
       <div class="pb-6"></div>
     </template>
-	  <div class="flex-1 px-3">
+	  <div class="flex-1 px-5">
 
-      <div class="flex flex-col divide-y divide-text-50 bg-base-400 border-[1px] border-text-50 rounded-lg overflow-hidden">
-        <button v-for="column in columns"
+      <div class="flex flex-col divide-y divide-border-50 bg-base-400 border-[1px] border-border-50 rounded-lg overflow-hidden">
+        <button v-for="column in viewedColumns"
                 type="button" class="p-3 px-5 text-left hover:bg-primary hover:text-white"
                 @click="select(column)">
           {{ column.label ? column.label : column.key }}
@@ -35,11 +48,22 @@ export default{
 
 	emits: [ 'select' ],
 
+  computed: {
+
+    viewedColumns(){
+      if(this.search)
+        return this.columns.filter(column => column.label.toLowerCase().includes(this.search.toLowerCase()))
+      return this.columns
+    }
+
+  },
+
 	data(){
 		return {
 			isOpen: false,
       context: null,
-      columns: []
+      columns: [],
+      search: ''
 		}
 	},
 

package/src/widgets/ComponentSetting.vue

@@ -823,7 +823,7 @@
                    :editable="true"
                    @click="$refs.bgImage[index].edit()"
                    @change="(base64, file) => { uploadImage(file).then((res) => bgImage[index].imageUrl = res.name); }"
-                   class="cursor-pointer w-[120px] aspect-[2/1] rounded-lg bg-text-50 border-text-100 border-[1px]"></Image>
+                   class="cursor-pointer w-[120px] aspect-[2/1] rounded-lg bg-text-50 border-border-100 border-[1px]"></Image>
           </div>
         </div>