@mixd-id/web-scaffold 0.1.230406261 → 0.1.230406262

package/package.json

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

package/src/components/List.vue

@@ -181,6 +181,11 @@ export default{
 
     load(){
       if(this.src){
+
+        if(!this.preset.columns){
+          this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
+        }
+
         return this.socket.send(this.src, {
           ...this.preset,
           itemsPerPage: this.data.itemsPerPage,

package/src/components/PresetSelectorFilterItem.vue

@@ -6,7 +6,7 @@
         <div class="flex-1 flex flex-row gap-2">
           <Dropdown v-model="value.operator"
                     class="w-[100px]"
-                    @change="value.value ? $emit('change') : null">
+                    @change="apply">
             <option value="=">=</option>
             <option value=">">&gt;</option>
             <option value=">=">&gt;=</option>
@@ -24,12 +24,12 @@
             <Datepicker class="flex-1"
                         mode="popup"
                         v-model="value.value"
-                        @change="value.operator ? $emit('change') : null" />
+                        @change="apply" />
             <Datepicker v-if="value.operator === 'between'"
                         class="flex-1"
                         mode="popup"
                         v-model="value.value2"
-                        @change="value.operator ? $emit('change') : null" />
+                        @change="apply" />
           </div>
         </div>
       </div>
@@ -37,7 +37,7 @@
       <div v-else-if="type === 'number'" class="flex flex-row gap-2">
         <Dropdown v-model="value.operator"
                   class="w-[100px]"
-                  @change="value.value ? $emit('change') : null">
+                  @change="apply">
           <option value="=">=</option>
           <option value=">">&gt;</option>
           <option value=">=">&gt;=</option>
@@ -48,18 +48,18 @@
         </Dropdown>
         <Textbox v-model="value.value"
                  class="flex-1"
-                 @keyup.enter="value.operator ? $emit('change') : null"
-                 @blur="value.operator ? $emit('change') : null" />
+                 @keyup.enter="apply"
+                 @blur="apply" />
       </div>
 
       <div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
-        <Radio :name="value.key" :value="true" v-model="value.value" @change="$emit('change')">True</Radio>
-        <Radio :name="value.key" :value="false" v-model="value.value" @change="$emit('change')">False</Radio>
+        <Radio :name="value.key" :value="true" v-model="value.value" @change="apply">True</Radio>
+        <Radio :name="value.key" :value="false" v-model="value.value" @change="apply">False</Radio>
       </div>
 
       <div v-else class="flex flex-row gap-2">
         <Dropdown v-model="value.operator" class="w-[100px]"
-                  @change="value.value ? $emit('change') : null">
+                  @change="apply">
           <option value="eq">Equal</option>
           <option value="not">Not Equal</option>
           <option value="startsWith">Starts With</option>
@@ -72,8 +72,8 @@
         </Dropdown>
         <Textbox v-model="value.value"
                  class="flex-1"
-                 @keyup.enter="value.operator ? $emit('change') : null"
-                 @blur="value.operator ? $emit('change') : null" />
+                 @keyup.enter="apply"
+                 @blur="apply" />
       </div>
 
     </div>
@@ -94,9 +94,26 @@ export default{
 
   },
 
+  computed:{
+
+    valueRequired(){
+      return (!(['yesterday', 'today', 'thisWeek', 'thisMonth', 'thisYear'].includes(this.value.operator) ||
+          this.type === 'boolean'));
+    }
+
+  },
+
   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')
+      }
 
+    }
 
   }
 

package/src/utils/preset-selector.mjs

@@ -29,8 +29,6 @@ const pickColumns = function(columns, keys){
       return acc
     }, {})
 
-  console.log('#1', groupedColumns)
-
   for(let key of keys){
     if(groupedColumns[key]){
       groupedColumns[key].visible = true

package/src/widgets/ColumnSelector.vue

@@ -1,7 +1,7 @@
 <template>
-	<Modal :state="isOpen" width="320" height="400" class="bg-base-500">
+	<Modal :state="isOpen" width="320" height="400">
 	  <template v-slot:head>
-	    <div class="relative p-5 bg-base-400">
+	    <div class="relative p-5">
 	      <h3>{{ $t('Select Column') }}</h3>
 	      <div class="absolute top-0 right-0 p-2">
 	        <button type="button" class="p-2" @click="close">
@@ -12,11 +12,14 @@
 	      </div>
 	    </div>
 	  </template>
-	  <div class="flex-1">
+    <template #foot>
+      <div class="pb-6"></div>
+    </template>
+	  <div class="flex-1 px-3">
 
-      <div class="flex flex-col divide-y divide-border-50">
+      <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"
-                type="button" class="p-3 px-5 text-left hover:bg-primary-100"
+                type="button" class="p-3 px-5 text-left hover:bg-primary hover:text-white"
                 @click="select(column)">
           {{ column.label ? column.label : column.key }}
         </button>

package/src/widgets/PresetBar.vue

@@ -78,7 +78,7 @@
         <Tabs :items="tabItems[config.type ?? 'list']" v-model="config.presetBarTabIndex" />
       </div>
 
-      <div class="flex-1 overflow-y-auto bg-base-500 dark:bg-base-400">
+      <div class="flex-1 overflow-y-auto">
 
         <div v-if="config.presetBarTabIndex === 1" class="flex-1 flex flex-col p-5">
           <ListItem :items="presetColumns"
@@ -102,7 +102,7 @@
 
         <div v-else-if="config.presetBarTabIndex === 2" class="flex-1 flex flex-col p-5">
 
-          <div class="flex-1 flex flex-col">
+          <div class="flex-1 flex flex-col gap-6">
 
             <div v-for="(filter, idx) in preset.filters">
 
@@ -247,7 +247,7 @@
                 </button>
               </div>
               <ListItem :items="xAxis"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-1"
                         body-class="flex flex-col gap-1"
                         @reorder="(from, to) => { xAxis.splice(to, 0, xAxis.splice(from, 1)[0]); }">
                 <template v-slot="{ item, index }">
@@ -287,7 +287,7 @@
                 </button>
               </div>
               <ListItem :items="yAxis"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-1"
                         body-class="flex flex-col gap-1"
                         @reorder="(from, to) => { yAxis.splice(to, 0, yAxis.splice(from, 1)[0]); }">
                 <template v-slot="{ item, index }">
@@ -338,7 +338,7 @@
                 </button>
               </div>
               <ListItem :items="yAxis"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
                         body-class="flex flex-col gap-1"
                         @reorder="(from, to) => { yAxis.splice(to, 0, yAxis.splice(from, 1)[0]); }">
                 <template v-slot="{ item, index }">
@@ -370,7 +370,7 @@
                 </button>
               </div>
               <ListItem :items="xAxis"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
                         body-class="flex flex-col gap-1"
                         @reorder="(from, to) => { xAxis.splice(to, 0, xAxis.splice(from, 1)[0]); }">
                 <template v-slot="{ item, index }">
@@ -448,7 +448,7 @@
               </div>
               <ListItem :items="presetPivot.rows"
                         @reorder="(from, to) => { presetPivot.rows.splice(to, 0, presetPivot.rows.splice(from, 1)[0]); apply() }"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5">
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5">
                 <template v-slot="{ item, index }">
                   <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
                     <div data-reorder v-if="(presetPivot.rows ?? []).length > 1">
@@ -484,7 +484,7 @@
               </div>
               <ListItem :items="presetPivot.values"
                         @reorder="(from, to) => { presetPivot.values.splice(to, 0, presetPivot.values.splice(from, 1)[0]); }"
-                        class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5">
+                        class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5">
                 <template v-slot="{ item, index }">
                   <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
                     <div data-reorder v-if="(presetPivot.values ?? []).length > 1">