@mixd-id/web-scaffold 0.1.230406331 → 0.1.230406333

package/package.json

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

package/src/components/List.vue

@@ -120,57 +120,77 @@
             </div>
           </slot>
 
-          <div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
-            <svg class="animate-spin" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-          </div>
+          <div class="flex-1 flex" ref="content">
+            <div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
+              <svg class="animate-spin" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+            </div>
 
-          <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
-            <VirtualTable
-                          ref="table"
-                          :columns="columns"
-                          class="flex-1 rounded-lg panel-400"
-                          :items="data.items"
-                          :enumCache="enumCache"
-                          @scroll-end="loadNext"
-                          @item-click="onTableItemClick">
-
-              <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
-                <div :class="getHeader(slot.replace('col-', ''))">
-                  <slot :name="slot" :item="item" :index="index"></slot>
-                </div>
-              </template>
+            <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
+              <VirtualTable
+                  ref="table"
+                  :columns="columns"
+                  class="flex-1 rounded-lg panel-400"
+                  :items="data.items"
+                  :enumCache="enumCache"
+                  @scroll-end="loadNext"
+                  @item-click="onTableItemClick">
+
+                <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
+                  <div :class="getHeader(slot.replace('col-', ''))">
+                    <slot :name="slot" :item="item" :index="index"></slot>
+                  </div>
+                </template>
 
-              <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
-                <slot :name="slot" :item="item" :index="index"></slot>
-              </template>
+                <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
+                  <slot :name="slot" :item="item" :index="index"></slot>
+                </template>
+
+                <template #end>
+                  <div v-if="data?.hasNext" class="flex justify-center p-3">
+                    <svg v-if="readyState === 4" class="animate-spin aspect-square w-[14px] h-[14px] fill-text-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                    <button v-else type="button" class="text-text-300" @click="loadNext()">
+                      {{ $t('Load More' )}}
+                    </button>
+                  </div>
+                </template>
 
-            </VirtualTable>
-          </div>
+              </VirtualTable>
+            </div>
 
-          <VirtualGrid v-else-if="presetView === 'grid'"
-                       ref="grid"
-                       :items="dataItems"
-                       :column="computedGridColumn"
-                       :class="gridClass"
-                       @scroll-end="loadNext"
-                       :container-class="`${gridContainerClass}`"
-                       :config="config">
-            <template #item="{ item }">
-              <slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
-                <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
-                  <div>
-                    <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
-                  </div>
-                  <div class="flex-1 flex flex-col leading-tight">
-                    <small>{{ item.code }}</small>
-                    <strong>{{ item.name }}</strong>
+            <VirtualGrid v-else-if="presetView === 'grid'"
+                         ref="grid"
+                         :items="dataItems"
+                         :column="computedGridColumn"
+                         :class="gridClass"
+                         @scroll-end="loadNext"
+                         :container-class="`${gridContainerClass}`"
+                         :config="config">
+              <template #item="{ item }">
+                <slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
+                  <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
+                    <div>
+                      <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
+                    </div>
+                    <div class="flex-1 flex flex-col leading-tight">
+                      <small>{{ item.code }}</small>
+                      <strong>{{ item.name }}</strong>
+                    </div>
                   </div>
+                </slot>
+              </template>
+
+              <template #end>
+                <div v-if="data?.hasNext" class="flex justify-center p-3">
+                  <svg v-if="readyState === 4" class="animate-spin aspect-square w-[14px] h-[14px] fill-text-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                  <button v-else type="button" class="text-text-300" @click="loadNext()">
+                    {{ $t('Load More' )}}
+                  </button>
                 </div>
-              </slot>
-            </template>
-          </VirtualGrid>
+              </template>
+            </VirtualGrid>
 
-          <PresetSelector ref="presetSelector" :config="config" @select="load" />
+            <PresetSelector ref="presetSelector" :config="config" @select="load" />
+          </div>
         </div>
 
         <div v-if="extBar.open && pivotEnabled"
@@ -300,6 +320,14 @@ export default{
 
   methods: {
 
+    calcItemsPerPage(){
+
+      if(this.$refs.content){
+        this.data.itemsPerPage = Math.round((this.$refs.content.clientHeight - 36) / 36) + 3
+      }
+
+    },
+
     getEnumText(key, value){
 
       let enumText
@@ -361,6 +389,7 @@ export default{
 
         //console.log('last id', this.dataItems[this.dataItems.length - 1].id)
 
+        this.readyState = 4
         this.socket.send(this.src, {
           ...this.preset,
           itemsPerPage: this.data.itemsPerPage,
@@ -373,6 +402,7 @@ export default{
               this.loadEnums(data.items)
             })
             .catch(err => this.toast(err))
+            .finally(_ => this.readyState = 1)
       }
       return new Promise(resolve => resolve())
     },
@@ -761,8 +791,11 @@ export default{
     this.loadPreset()
         .then(() => {
           this.readyState = 1
-          this.load()
-          this.loadExt()
+          this.$nextTick(() => {
+            this.calcItemsPerPage()
+            this.load()
+            this.loadExt()
+          })
         })
 
     if(this.subscribeKey){

package/src/components/TextWithTag.vue

@@ -6,6 +6,7 @@
          ref="html"
          v-html="html"
          :class="itemClass"
+         @blur="saveSelection($refs.html)"
          @input="onInput"></p>
 
       <button v-if="variant === 'minimal'" type="button" class="p-3" @click="$refs.modal.open()">
@@ -59,7 +60,8 @@
 </template>
 
 <script>
-import groupBy from "lodash/groupBy";
+
+import {restoreSelection, saveSelection} from "../utils/selection";
 
 export default{
 
@@ -69,6 +71,8 @@ export default{
 
     addFn: Function,
 
+    itemFn: Function,
+
     modelValue: String,
 
     items: Array,
@@ -82,7 +86,12 @@ export default{
   computed:{
 
     groupedItems(){
-      return groupBy(this.items ?? [], 'group')
+      return this.items.reduce((acc, item) => {
+        const key = item.group ?? ''
+        if(!acc[key]) acc[key] = []
+        acc[key].push(item)
+        return acc
+      }, {})
     },
 
     viewedItems(){
@@ -99,6 +108,8 @@ export default{
   },
 
   methods: {
+    restoreSelection,
+    saveSelection,
 
     insertElement(newNode){
       let selection = window.getSelection();
@@ -123,12 +134,8 @@ export default{
       selection.addRange(range);
     },
 
-    add(item){
-      this.$refs.modal.close()
-
-      if(typeof this.addFn === 'function'){
-        item = this.addFn(item)
-      }
+    addItem(item){
+      this.restoreSelection()
 
       const el = document.createElement('span')
       el.setAttribute('contenteditable', 'false')
@@ -140,6 +147,28 @@ export default{
       this.onInput()
     },
 
+    add(item){
+      this.$refs.modal.close()
+
+      if(typeof this.addFn === 'function'){
+
+        if(this.addFn.constructor.name === 'AsyncFunction'){
+          this.addFn(item).then(newItem => {
+            if(newItem === false) return
+            item = newItem ? newItem : item
+            this.addItem(item)
+          })
+          return
+        }
+
+        const newItem = this.addFn(item)
+        if(newItem === false) return
+        item = newItem ? newItem : item
+      }
+
+      this.addItem(item)
+    },
+
     remove(e){
       e.target.parentNode.removeChild(e.target)
     },
@@ -179,10 +208,19 @@ export default{
         }
 
         let html = val ?? ''
-        if(Array.isArray(this.items)){
-          for(let item of this.items){
-            html = html.replaceAll(item.value, `<span class="${this.$style.tag}" contenteditable="false" @click="remove" data-value="${item.value}">${item.text ?? item.value}</span>`, 'gi')
-          }
+
+        let customItems = []
+        if(typeof this.itemFn === 'function'){
+          customItems = this.itemFn(html)
+        }
+
+        const items = [
+          ...Array.isArray(this.items) ? this.items : [],
+          ...customItems
+        ]
+
+        for(let item of items){
+          html = html.replaceAll(item.value, `<span title="${item.value.replaceAll('"', '')}" class="${this.$style.tag}" contenteditable="false" data-value="${item.value}">${item.text ?? item.value}</span>`, 'gi')
         }
 
         this.html = html

package/src/components/VirtualGrid.vue

@@ -7,6 +7,7 @@
 						 @click="">
 					<slot name="item" :item="item" :index="index"></slot>
 				</div>
+        <slot name="end"></slot>
 			</div>
 		</div>
 

package/src/components/VirtualTable.vue

@@ -56,6 +56,7 @@
 							<svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
 						</div>
 					</div>
+          <slot name="end"></slot>
 				</div>
 			</div>
 			<div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">