@mixd-id/web-scaffold 0.1.240411076 → 0.1.240411078

package/package.json

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

package/src/components/List.vue

@@ -5,7 +5,7 @@
          class="flex-1 flex flex-row">
 
       <div v-if="computedPresetMode === 'sidebar' && sidebar.open"
-           class="relative flex flex-col border-r-[1px] border-text-50"
+           class="relative flex flex-col border-x-[1px] border-text-50"
            :style="sidebarStyle">
 
         <PresetBar :config="cConfig"
@@ -31,12 +31,12 @@
 
       <div v-if="preset" class="flex-1 flex flex-col relative">
 
-        <div class="flex-1 flex flex-col" :class="containerClass">
+        <div class="flex-1 flex flex-col gap-2" :class="containerClass">
           <slot name="head"
                 :preset="preset"
                 :presetSelector="$refs.presetSelector"
                 :compPrefix="compPrefix">
-            <div class="flex flex-col md:flex-row gap-3 md:items-start overflow-hidden p-3 md:p-0 bg-base-400 md:panel-none border-b-[1px] border-text-50 md:border-none"
+            <div class="flex flex-col md:flex-row gap-3 md:items-start overflow-hidden p-3 md:p-0 panel-400 md:panel-none border-b-[1px] border-text-50 md:border-none"
                  :class="headerClass">
 
               <div class="flex md:flex-1 flex-row items-start gap-3">
@@ -52,7 +52,7 @@
                         <svg width="13" height="13" class="fill-text group-hover:fill-primary relative top-[-1px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
                       </div>
                     </div>
-                    <ContextMenu ref="contextMenu" class="bg-base-400 mt-4">
+                    <ContextMenu ref="contextMenu" class="panel-400 mt-4">
                       <div class="flex flex-col min-w-[300px] divide-y divide-text-50">
 
                         <div class="flex flex-col gap-1 bg-base-300">
@@ -87,14 +87,14 @@
                 <slot name="toolbar"></slot>
               </div>
 
-              <div class="flex flex-row gap-2" v-if="Boolean(toolbar)">
+              <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
                 <Textbox v-if="canSearch"
                          class="flex-1 md:w-[240px] bg-base-400 border-text-50"
                          placeholder="Search..."
                          clearable="1"
                          maxlength="100"
                          v-model="preset.search"
-                         @clear="clearSearch"
+                         @clear="delete preset.search; load()"
                          @keyup.enter="load">
                   <template #start>
                     <div class="p-2 pr-0">
@@ -132,11 +132,11 @@
               <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 flex-col" :class="pivotEnabled ? 'p-3 bg-base-400 md:p-0' : ''">
+            <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex flex-col" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
               <VirtualTable
                   ref="table"
                   :columns="columns"
-                  class="flex-1"
+                  class="flex-1 bg-base-400"
                   :items="dataItems"
                   :enumCache="enumCache"
                   :freeze-left="freezeLeft"
@@ -179,7 +179,7 @@
                          :config="cConfig">
               <template #item="{ item }">
                 <slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
-                  <div class="flex flex-row bg-base-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
+                  <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>
@@ -215,7 +215,7 @@
           <VirtualTable v-else-if="presetView === 'table'"
                         ref="table"
                         :columns="preset.columns"
-                        class="flex-1 bg-base-400"
+                        class="flex-1 panel-400"
                         :items="data.extItems"
                         :enumCache="enumCache"
                         @scroll-end="loadExtNext">
@@ -242,7 +242,7 @@
                        :config="cConfig">
             <template #item="{ item }">
               <slot name="gridItem" :item="item" :getEnumText="getEnumText">
-                <div class="flex flex-row bg-base-400 rounded-lg md:rounded-lg overflow-hidden p-3 gap-3">
+                <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>
@@ -355,21 +355,6 @@ export default{
 
     },
 
-    clearSearch(){
-      delete this.preset.search;
-
-      if('search' in this.$route.query){
-        const query = { ...this.$route.query }
-        delete query.search
-        this.$router.push({
-          ...this.$route,
-          query
-        })
-      }
-
-      this.load()
-    },
-
     getEnumText(key, value){
 
       let enumText
@@ -400,22 +385,16 @@ export default{
 
     load(){
       if(this.computedSrc){
-        if(!this.preset?.columns){
+        if(!this.preset.columns){
           this.preset.columns = JSON.parse(JSON.stringify(this.cConfig.columns))
         }
 
-        let search = this.preset.search
-        if(this.preset.search && this.preset.params?.searchPrefix){
-          search = this.preset.params.searchPrefix + this.preset.search
-        }
-
         this.readyState = 2
         return this.useSocket().send(this.computedSrc, {
           ...this.preset,
           id: undefined,
           uid: undefined,
           itemsPerPage: this.data.itemsPerPage,
-          search
         })
             .then(data => {
               if(data?.items){
@@ -437,11 +416,6 @@ export default{
           !(this.preset.pivot ?? {}).enabled &&
           this.dataItems) {
 
-        let search = this.preset.search
-        if(this.preset.search && this.preset.params?.searchPrefix){
-          search = this.preset.params.searchPrefix + this.preset.search
-        }
-
         const afterItem = this.dataItems[this.dataItems.length - 1]
 
         this.readyState = 4
@@ -450,7 +424,6 @@ export default{
           id: undefined,
           uid: undefined,
           itemsPerPage: this.data.itemsPerPage,
-          search,
           afterItem,
         })
             .then(data => {
@@ -479,10 +452,8 @@ export default{
               Object.assign(this.cConfig, defaultConfig)
             }
 
-            if(this.$route.query?.search){
+            if(this.$route.query?.search)
               this.preset.search = this.$route.query.search
-              delete this.preset.params.searchPrefix
-            }
           }
         }
         else{
@@ -493,10 +464,8 @@ export default{
         }
       }
       else{
-        if(this.defaultConfig){
-          const defaultConfig = setupConfig(await this.defaultConfig())
-          Object.assign(this.cConfig, defaultConfig)
-        }
+        const defaultConfig = setupConfig(await this.defaultConfig())
+        Object.assign(this.cConfig, defaultConfig)
 
         return new Promise((resolve) => {
           const query = {}
@@ -568,11 +537,6 @@ export default{
     loadExt(){
       if(!this.extBar.open) return
 
-      let search = this.preset.search
-      if(this.preset.search && this.preset.params?.searchPrefix){
-        search = this.preset.params.searchPrefix + this.preset.search
-      }
-
       this.readyState = 3
       return this.useSocket().send(this.computedSrc, {
         ...this.preset,
@@ -582,8 +546,7 @@ export default{
           ...(this.preset.filters ?? []),
           ...(this.extBar.filters ?? [])
         ],
-        pivot: null,
-        search
+        pivot: null
       })
           .then((res) => {
             this.data.extItems = res.items
@@ -594,11 +557,6 @@ export default{
     loadExtNext(){
       if(!this.preset.filters) return
 
-      let search = this.preset.search
-      if(this.preset.search && this.preset.params?.searchPrefix){
-        search = this.preset.params.searchPrefix + this.preset.search
-      }
-
       return this.useSocket().send(this.computedSrc, {
         ...this.preset,
         id: undefined,
@@ -609,7 +567,6 @@ export default{
         ],
         pivot: null,
         afterItem: this.data.extItems[this.data.extItems.length - 1],
-        search
       })
           .then(data => {
             this.data.extItems.push(...data.items)
@@ -691,18 +648,12 @@ export default{
     loadQueued(items){
       const key = items[0] && items[0].uid ? 'uid' : 'id'
 
-      let search = this.preset.search
-      if(this.preset.search && this.preset.params?.searchPrefix){
-        search = this.preset.params.searchPrefix + this.preset.search
-      }
-
       this.useSocket().send(this.computedSrc, {
         ...this.preset,
         id: undefined,
         uid: undefined,
         [key]: items.map(item => item[key]),
-        _signal: true,
-        search
+        _signal: true
       })
           .then(({ items:nextItems }) => {
 
@@ -1085,11 +1036,8 @@ export default{
           this.configSharedPresets.find(_ => _.uid === this.configParams.presetIdx)
 
       if(preset){
-        if(this.$route.query?.search){
-          preset.search = this.$route.query.search
-          if(preset.params)
-            delete preset.params.searchPrefix
-        }
+        if(!preset.search) preset.search = ''
+        preset.search = this.$route.query?.search ? this.$route.query.search : preset.search
       }
 
       return preset

package/src/widgets/ColumnSelector.vue

@@ -52,7 +52,9 @@ export default{
 
     viewedColumns(){
       if(this.search)
-        return this.columns.filter(column => column.label.toLowerCase().includes(this.search.toLowerCase()))
+        return this.columns.filter(column => `${column.label ?? ''}`.toLowerCase().includes(
+            `${this.search ?? ''}`.toLowerCase())
+        )
       return this.columns
     }