@mixd-id/web-scaffold 0.1.230406387 → 0.1.230406388

package/package.json

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

package/src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <button :class="compClass" @click="onClick" :style="computedStyle"
-          v-tooltip="disabledText">
+          v-tooltip="disabledText" :disabled="isDisabled">
     <slot>{{ text }}</slot>
     <div v-if="isLoading" :class="$style.loadingPane">
       <svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

package/src/components/List.vue

@@ -976,7 +976,7 @@ export default{
       if(!this.configParams.sidebar || !('open' in this.configParams.sidebar))
         this.configParams.sidebar = {
           open: false,
-          width: 270
+          width: 380
         }
 
       return this.configParams.sidebar

package/src/components/Modal.vue

@@ -8,7 +8,13 @@
            ref="modal"
            :class="computedClass"
            :style="computedStyle"
-           :data-state="computedState ? 1 : 0">
+           :data-state="computedState ? 1 : 0"
+           @dragover.prevent="dragging = true"
+           @dragstart.prevent
+           @dragend.prevent
+           @dragenter.prevent
+           @dragleave.prevent
+           @drop.prevent="onDrop">
         <component v-if="Array.isArray(items) && items.length > 0"
                    v-for="(item, idx) in items"
                    :is="item.type"
@@ -38,6 +44,12 @@
           </div>
           <div v-if="isDisabled" :class="$style.overlay"></div>
         </div>
+
+        <div :class="$style.dropzone">
+          <div class="p-5 bg-text-50 border-text-200 border-[1px] rounded-lg">
+            <svg width="48" height="48" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M448 416v-64c0-17.67-14.33-32-32-32s-32 14.33-32 32v64c0 17.67-14.33 32-32 32H96c-17.67 0-32-14.33-32-32v-64c0-17.67-14.33-32-32-32s-32 14.33-32 32v64c0 53.02 42.98 96 96 96h256C405 512 448 469 448 416zM246.6 342.6l128-128c12.51-12.51 12.49-32.76 0-45.25c-12.5-12.5-32.75-12.5-45.25 0L256 242.8V32c0-17.69-14.31-32-32-32S192 14.31 192 32v210.8L118.6 169.4c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25l128 128C213.9 355.1 234.1 355.1 246.6 342.6z"/></svg>
+          </div>
+        </div>
       </div>
     </Transition>
   </Teleport>
@@ -70,7 +82,7 @@ export default{
 
   mixins: [ componentMixin ],
 
-	emits: [ 'submit', 'apply', 'dismiss', 'show', 'hide' ],
+	emits: [ 'drop', 'submit', 'apply', 'dismiss', 'show', 'hide' ],
 
   props:{
     class:{ type: String, default: '' },
@@ -171,6 +183,11 @@ export default{
 			}
 		},
 
+    onDrop(e){
+      this.dragging = false
+      this.$emit('drop', e)
+    },
+
 		onKeyDown(e){
 			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
         this.dismiss()
@@ -212,7 +229,8 @@ export default{
 				this.$style['modal-' + (this.dock ?? this.position)],
         this.class,
         this.mode === 'v-show' ? this.$style['v-show'] : '',
-        this.computedState ? this.$style.open : ''
+        this.computedState ? this.$style.open : '',
+        this.dragging ? this.$style['dragging'] : ''
       ]
         .join(' ')
         .trim()
@@ -261,7 +279,8 @@ export default{
 		return {
 			isDisabled: 0,
 			_state: false,
-			context: null
+			context: null,
+      dragging: false,
 		}
 	},
 
@@ -339,6 +358,16 @@ export default{
 html[data-theme='dark'] .modal{
 }
 
+.dropzone{
+  @apply hidden;
+  @apply absolute left-0 top-0 right-0 bottom-0;
+  @apply bg-black/50;
+  @apply items-center justify-center;
+}
+.modal.dragging .dropzone{
+  @apply flex;
+}
+
 .modal.v-show{
   transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1);
   transform: scale(0);

package/src/components/PresetSelectorFilterItem.vue

@@ -168,13 +168,20 @@ export default{
   methods: {
 
     apply(){
-
-      if((!this.valueRequired && this.value.operator) ||
-          (this.value.operator && this.value.operator !== 'between' && this.value.value) ||
-          (this.value.operator === 'between' && !!this.value.value && !!this.value.value2)){
-        this.$emit('change')
+      switch(this.type){
+
+        case 'bool':
+        case 'boolean':
+          this.$emit('change')
+          break
+
+        default:
+          if((!this.valueRequired && this.value.operator) ||
+              (this.value.operator && this.value.operator !== 'between' && this.value.value) ||
+              (this.value.operator === 'between' && !!this.value.value && !!this.value.value2)){
+            this.$emit('change')
+          }
       }
-
     }
 
   }

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"
+        <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/PresetBar.vue

@@ -90,8 +90,23 @@
 
         <div class="flex-1 overflow-y-auto">
 
-          <div v-if="configParams.presetBarTabIndex === 1" class="flex-1 flex flex-col p-5">
-            <ListItem :items="presetColumns"
+          <div v-if="configParams.presetBarTabIndex === 1" class="flex-1 flex flex-col gap-3 p-5">
+            <div>
+              <Textbox placeholder="Cari..."
+                       v-model="configParams.columnSearchKey"
+                       :clearable="true"
+                       @clear="delete configParams.columnSearchKey">
+                <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>
+
+            <ListItem v-if="presetColumns.length > 0"
+                      :items="presetColumns"
+                      class="flex-1"
                       body-class="divide-y divide-text-50 rounded-lg border-[1px] border-text-50 bg-base-300"
                       @reorder="(from, to) => { presetColumns.splice(to, 0, presetColumns.splice(from, 1)[0]); }">
               <template v-slot="{ item }">
@@ -695,6 +710,12 @@ export default{
         this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
       }
 
+      if(this.configParams.columnSearchKey){
+        return this.preset.columns.filter(_ => {
+          return _.label.toLowerCase().includes(this.configParams.columnSearchKey.toLowerCase()) ||
+                  _.key.toLowerCase().includes(this.configParams.columnSearchKey.toLowerCase())
+        })
+      }
       return this.preset.columns
     },
 
@@ -706,7 +727,7 @@ export default{
     },
 
     sortColumns(){
-      return this.presetColumns.filter(_ => _.key && !_.key.startsWith('_'))
+      return this.presetColumns.filter(_ => _.key && !_.key.startsWith('_') && (_.sortable ?? false) !== false)
     },
 
     xAxis(){

package/src/widgets/PresetBarPivot.vue

@@ -4,7 +4,7 @@
     <div>
       <Checkbox v-model="pivot.enabled"
                 @change="apply()">
-        Pivot Enabled
+        Enabled
       </Checkbox>
     </div>
 
@@ -13,7 +13,7 @@
       <div>
         <div class="flex flex-row items-center gap-2">
           <label>Groups</label>
-          <button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), columns)">
+          <button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), pivotColumns)">
             <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
           </button>
         </div>
@@ -147,6 +147,14 @@ export default{
 
   emits: [ 'apply' ],
 
+  computed: {
+
+    pivotColumns(){
+      return this.columns.filter(_ => _.filterable === true && (_.pivot ?? true) !== false)
+    },
+
+  },
+
   methods: {
 
     apply(){