@mixd-id/web-scaffold 0.1.240411027 → 0.1.240411029

package/package.json

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

package/src/components/ContextMenu.vue

@@ -177,6 +177,17 @@ export default {
                 left = Math.round(rect.x)
                 top = Math.round(rect.y + rect.height)
                 transformOrigin = 'top left'
+                maxHeight = window.innerHeight - top - 16
+                this.transition = 'slidedown'
+
+                if(top > window.innerHeight * .8){
+                  top = null
+                  bottom = window.innerHeight - rect.top + 8
+                  transformOrigin = 'bottom'
+                  maxHeight = Math.round(rect.top - 16)
+                  console.log('maxHeight', maxHeight)
+                  this.transition = 'slideup'
+                }
                 break
             }
 
@@ -234,7 +245,7 @@ export default {
 
 .contextMenu{
 	@apply fixed bg-base-300 min-w-[150px] overflow-y-auto rounded-xl z-50;
-	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-50 mt-[1px];
+	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-200 mt-[1px];
 }
 
 @media screen and (min-width: 640px){

package/src/components/ListContextMenu.vue

@@ -0,0 +1,88 @@
+<template>
+  <ContextMenu ref="contextMenu" class="mt-1">
+    <div class="flex flex-col min-w-[200px]">
+
+      <div class="p-1 sticky top-0 bg-base-500" @click.stop>
+        <Textbox :clearable="true" @clear="search = ''" placeholder="Search or add..." v-model="search" />
+      </div>
+
+      <button v-if="viewedItems.length > 0" v-for="text in viewedItems" class="w-full p-3 text-left flex flex-row menu-item"
+              @click="select(text)">
+        {{ text }}
+      </button>
+
+      <button v-else-if="search.length > 0" type="button" class="w-full p-3 text-primary" @click="add(search)">
+        Tambah {{ search }}
+      </button>
+
+    </div>
+  </ContextMenu>
+</template>
+
+<script>
+import ContextMenu from "./ContextMenu.vue";
+
+export default{
+  components: {ContextMenu},
+
+  emits: [ 'select' ],
+
+  props: {
+    items: Array
+  },
+
+  computed: {
+
+    viewedItems(){
+      return (this.items ?? [])
+        .filter(text => {
+          return text.toLowerCase().includes(this.search.toLowerCase())
+        })
+        .sort((a, b) => {
+          return a.toLowerCase().localeCompare(b.toLowerCase())
+        })
+    }
+
+  },
+
+  data(){
+    return {
+      search: '',
+      cb: null
+    }
+  },
+
+  methods: {
+
+    add(text){
+      if(`${text}`.length < 1) return
+
+      this.items.push(text)
+      this.select(text)
+    },
+
+    select(text){
+      this.$emit('select', text)
+      if(typeof this.cb === 'function')
+        this.cb(text)
+    },
+
+    open(caller, cb){
+      this.search = ''
+      this.cb = cb
+      this.$refs.contextMenu.open(caller)
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/PresetSelectorFilterItem.vue

@@ -88,7 +88,8 @@
       </div>
 
       <div v-else class="flex flex-row gap-2">
-        <Dropdown v-model="value.operator" class="w-[100px]"
+        <Dropdown v-model="value.operator"
+                  :class="![ 'notEmpty' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
                   :readonly="readonly"
                   @change="apply">
           <option value="eq">Equal</option>
@@ -100,8 +101,10 @@
           <option value="in">Multiple with comma</option>
           <option value="notIn">Except with comma</option>
           <option value="regex">Regex</option>
+          <option value="notEmpty">Not Empty</option>
         </Dropdown>
-        <Textbox v-model="value.value"
+        <Textbox v-if="![ 'notEmpty' ].includes(value.operator)"
+                 v-model="value.value"
                  :readonly="readonly"
                  class="flex-1"
                  @keyup.enter="apply"

package/src/components/Textbox.vue

@@ -74,6 +74,7 @@ export default{
 				this.$style.textbox,
 				this.$style['state-' + this.computedState],
 				this.readonly ? this.$style.readonly : '',
+				this.disabled ? this.$style.disabled : '',
 				this.isActive && !this.readonly ? this.$style.active : '',
 				this.align ? this.$style['align-' + this.align] : '',
 				this.size ? this.$style['size-' + this.size] : ''
@@ -186,7 +187,6 @@ export default{
 }
 
 .textbox.readonly{
-	@apply bg-text-50;
 }
 
 .size-sm input{ @apply text-sm; }

package/src/index.js

@@ -489,6 +489,7 @@ export default{
     app.component('MultiDropdown', defineAsyncComponent(() => import("./components/MultiDropdown.vue")))
     app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
     app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
+    app.component('ListContextMenu', defineAsyncComponent(() => import("./components/ListContextMenu.vue")))
     app.component('FAQ', defineAsyncComponent(() => import("./widgets/FAQ.vue")))
     app.component('Flex', defineAsyncComponent(() => import("./components/Flex.vue")))
     app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))

package/src/utils/helpers.mjs

@@ -560,34 +560,37 @@ const arrayRemove = (arr, items, opt = {}) => {
   }
 }
 
-const arrayUnshift = (arr, item, opt = {}) => {
+const arrayUnshift = (arr, items, opt = { update:true }) => {
   if(!Array.isArray(arr)) return
+  if(!Array.isArray(items)) items = [ items ]
   if(!opt.key){
-    opt.key = item && item.uid ? 'uid' : 'id'
+    opt.key = items[0] && items[0].uid ? 'uid' : 'id'
   }
 
-  opt = Object.assign({ key:"id", highlight:false }, opt)
+  if(!Array.isArray(opt.key)){
+    opt.key = [ opt.key ]
+  }
 
-  const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
-  if(index >= 0){
+  for(let item of items){
+    if(!item) continue
 
-    const keys = []
-    for(let key in item){
-      if(!(key in arr[index]) || arr[index][key] !== item[key]){
-        keys.push(key)
+    const index = arr.findIndex((_) => {
+      for(let key of opt.key){
+        if(_[key] !== item[key]){
+          return false
+        }
       }
-    }
+      return true
+    })
 
-    if(opt.highlight){
-      item._highlight = keys
+    if(index >= 0){
+      if(opt.update !== false){
+        Object.assign(arr[index], item)
+      }
     }
-    Object.assign(arr[index], item)
-  }
-  else{
-    if(opt.highlight){
-      item._highlight = true
+    else{
+      arr.unshift(item)
     }
-    arr.unshift(item)
   }
 }
 

package/src/utils/preset-selector.cjs

@@ -307,6 +307,17 @@ const getValue = (filter, opt) => {
             }
           break
 
+        case 'notEmpty':
+          whereObj = {
+            [key]:{
+              [Op.or]: [
+                { [Op.ne]: null },
+                { [Op.ne]: '' }
+              ]
+            }
+          }
+          break
+
         case 'in':
           withoutKey ?
             whereObj = {
@@ -676,6 +687,17 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             }
             break
 
+          case 'notEmpty':
+            whereObj = {
+              [key]:{
+                [Op.or]: [
+                  { [Op.ne]: null },
+                  { [Op.ne]: '' }
+                ]
+              }
+            }
+            break
+
           case 'in':
             whereObj = {
               [key]:{

package/src/utils/preset-selector.js

@@ -307,6 +307,17 @@ const getValue = (filter, opt) => {
             }
           break
 
+        case 'notEmpty':
+          whereObj = {
+            [key]:{
+              [Op.or]: [
+                { [Op.ne]: null },
+                { [Op.ne]: '' }
+              ]
+            }
+          }
+          break
+
         case 'in':
           withoutKey ?
             whereObj = {
@@ -676,6 +687,17 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             }
             break
 
+          case 'notEmpty':
+            whereObj = {
+              [key]:{
+                [Op.or]: [
+                  { [Op.ne]: null },
+                  { [Op.ne]: '' }
+                ]
+              }
+            }
+            break
+
           case 'in':
             whereObj = {
               [key]:{