@mixd-id/web-scaffold 0.1.240411028 → 0.1.240411029

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411028",
+  "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/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")))