@mixd-id/web-scaffold 0.1.230406367 → 0.1.230406369

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406367",
+  "version": "0.1.230406369",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -55,7 +55,7 @@
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.2",
+    "pinia": "^2.3.0",
     "prismjs": "^1.28.0",
     "redis": "^4.6.13",
     "serve-static": "^1.15.0",

package/src/components/Image.vue

@@ -41,7 +41,7 @@ export default{
 
 	mixins: [ componentMixin ],
 
-	emits: [ 'change' ],
+	emits: [ 'click', 'change' ],
 
   props:{
 
@@ -256,10 +256,12 @@ export default{
       }
 		},
 
-		onClick(){
+		onClick(e){
 			if(!this.moved && this.target){
 				this.$router.push(this.target)
 			}
+
+      this.$emit('click', e, this)
 		},
 
 		onMouseDown(){

package/src/components/TextWithTag.vue

@@ -1,21 +1,23 @@
 <template>
-	<div :class="$style.comp">
-
-		<div class="flex flex-row items-start">
-      <span contenteditable="true" spellcheck="false"
-         ref="html"
-         v-html="html"
-         :class="`${$style.content}${itemClass ? ' ' + itemClass : ''}`"
-         @blur="saveSelection($refs.html)"
-          @paste="onPaste"
-         @input="onInput"></span>
-
-      <button v-if="variant === 'minimal'" type="button" class="p-3" @click="$refs.modal.open()">
-        <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>
-      </button>
+  <div :class="$style.comp">
+
+    <div class="flex flex-row items-start">
+      <span :contenteditable="!readonly" spellcheck="false"
+            ref="html"
+            v-html="html"
+            :class="`${$style.content}${itemClass ? ' ' + itemClass : ''}`"
+            @blur="onBlur"
+            @paste="onPaste"
+            @input="onInput"></span>
+
+      <slot name="end" :comp="this">
+        <button v-if="variant === 'minimal' && !readonly" type="button" class="p-3" @click="$refs.modal.open()">
+          <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>
+        </button>
+      </slot>
     </div>
 
-    <div v-if="variant !== 'minimal'" class="flex flex-row bg-base-300" @dblclick.alt="log(JSON.stringify(modelValue))">
+    <div v-if="variant !== 'minimal' && !readonly" class="flex flex-row bg-base-300" @dblclick.alt="log(JSON.stringify(modelValue))">
       <div class="flex-1 flex flex-row gap-2 overflow-x-auto p-1" :class="$style.noScrollbar">
         <button type="button" v-for="item in viewedItems" :class="$style.tag2" class="text-xs" @click="add(item)">{{ item.text ?? item.value }}</button>
       </div>
@@ -57,7 +59,7 @@
 
       </div>
     </Modal>
-	</div>
+  </div>
 </template>
 
 <script>
@@ -66,7 +68,7 @@ import {restoreSelection, saveSelection} from "../utils/selection";
 
 export default{
 
-  emits: [ 'update:modelValue' ],
+  emits: [ 'blur', 'update:modelValue' ],
 
   props:{
 
@@ -78,6 +80,8 @@ export default{
 
     items: Array,
 
+    readonly: Boolean,
+
     variant: String,
 
     itemClass: String,
@@ -118,7 +122,7 @@ export default{
 
       let range = selection.getRangeAt(0);
       if(range.commonAncestorContainer.parentNode !== this.$refs.html &&
-        range.commonAncestorContainer !== this.$refs.html) return
+          range.commonAncestorContainer !== this.$refs.html) return
 
       let currentNode = range.startContainer;
 
@@ -146,6 +150,10 @@ export default{
 
       this.insertElement(el)
       this.onInput()
+
+      const itemExists = this.items.find(_ => _.value === item.value)
+      if(!itemExists)
+        this.items.push(item)
     },
 
     add(item){
@@ -174,6 +182,11 @@ export default{
       e.target.parentNode.removeChild(e.target)
     },
 
+    onBlur(e){
+      this.saveSelection(this.$refs.html)
+      this.$emit('blur')
+    },
+
     onPaste(e){
       e.preventDefault()
       const text = e.clipboardData.getData('text/plain')
@@ -205,8 +218,8 @@ export default{
 
     modelValue: {
       immediate: true,
-      handler(val){
-        if(this.isInternal){
+      handler(val) {
+        if (this.isInternal) {
           this.isInternal = false
           return
         }
@@ -214,7 +227,7 @@ export default{
         let html = val ?? ''
 
         let customItems = []
-        if(typeof this.itemFn === 'function'){
+        if (typeof this.itemFn === 'function') {
           customItems = this.itemFn(html)
         }
 
@@ -223,7 +236,7 @@ export default{
           ...customItems
         ]
 
-        for(let item of items){
+        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')
         }
 
@@ -239,28 +252,28 @@ export default{
 
 <style module>
 
-.comp{
+.comp {
   @apply border-[1px] border-text-200 bg-base-50 rounded-lg min-w-[100px];
   @apply flex flex-col gap-2;
   @apply overflow-hidden;
   @apply divide-y divide-text-100;
 }
 
-.content{
+.content {
   @apply flex-1 whitespace-pre-line outline-none p-2;
 }
 
-.comp .tag{
+.comp .tag {
   @apply bg-text-100 p-1 rounded-lg whitespace-nowrap relative top-[-1px];
   @apply font-mono text-sm;
 }
 
-.tag2{
+.tag2 {
   @apply bg-text-50 p-1 rounded-lg px-2 cursor-pointer whitespace-nowrap;
   @apply hover:bg-text-100 hover:text-white;
 }
 
-.noScrollbar::-webkit-scrollbar{
+.noScrollbar::-webkit-scrollbar {
   display: none;
 }
 

package/src/index.js

@@ -618,7 +618,7 @@ export default{
     app.component('Header1', defineAsyncComponent(() => import("./widgets/Header1.vue")))
     app.component('Header2', defineAsyncComponent(() => import("./widgets/Header2.vue")))
     app.component('HeaderSetting', defineAsyncComponent(() => import("./widgets/HeaderSetting.vue")))
-    app.component('Header1Setting', defineAsyncComponent(() => import("./widgets/Header1Setting.vue")))
+    //app.component('Header1Setting', defineAsyncComponent(() => import("./widgets/Header1Setting.vue")))
     app.component('Header2Setting', defineAsyncComponent(() => import("./widgets/Header2Setting.vue")))
     app.component('IconList', defineAsyncComponent(() => import("./widgets/IconList.vue")))
     app.component('IconListSetting', defineAsyncComponent(() => import("./widgets/IconListSetting.vue")))

package/src/utils/helpers.js

@@ -525,11 +525,22 @@ const dayTimeRange = (params, value) => {
 }
 
 function capitalize(str) {
-  return (str ?? '')
-    .toString()
-    .split(' ')
-    .map(_ => _.charAt(0).toUpperCase() + _.slice(1).toLowerCase())
-    .join(' ')
+  return (str ?? '').toLowerCase().replace(/\b\w/g, function(char) {
+    return char.toUpperCase();
+  });
+}
+
+const removeUnderscoredKey = (obj) => {
+  if(typeof obj === 'object' && obj !== null){
+    for(let key in obj){
+      if(key.startsWith('_')){
+        delete obj[key]
+      }
+      else if(Array.isArray(obj[key])){
+        obj[key].forEach(_ => removeUnderscoredKey(_))
+      }
+    }
+  }
 }
 
 module.exports = {
@@ -561,4 +572,5 @@ module.exports = {
   datasourceGet,
   datasourceLoad,
   dayTimeRange,
+  removeUnderscoredKey
 }

package/src/utils/helpers.mjs

@@ -361,7 +361,7 @@ function applyDatasourceReplacer(value, datasource){
 }
 
 function capitalize(str) {
-  return str.replace(/\b\w/g, function(char) {
+  return (str ?? '').toLowerCase().replace(/\b\w/g, function(char) {
     return char.toUpperCase();
   });
 }

package/src/utils/preset-selector.mjs

@@ -24,13 +24,34 @@ const sortsFn = function(a, b, sorts, index){
 const pickColumns = function(columns, keys){
   if(!Array.isArray(columns)) return []
 
-  const picked = JSON.parse(JSON.stringify(columns))
+  columns = JSON.parse(JSON.stringify(columns))
 
-  for(let idx in picked){
-    picked[idx].visible = keys.includes(picked[idx].key)
+  columns = columns.reduce((cur, obj) => {
+    cur[obj.key] = obj
+    return cur
+  }, {})
+
+  const res = []
+
+  for(let key of keys){
+    if(typeof key === 'string'){
+      if(columns[key]){
+        columns[key].visible = true
+        res.push(columns[key])
+        delete columns[key]
+      }
+    }
+    else if(typeof key === 'object' && key !== null && key.key){
+      if(columns[key.key]){
+        res.push(Object.assign(columns[key.key], key, { visible:true }))
+        delete columns[key.key]
+      }
+    }
   }
 
-  return picked
+  res.push(...Object.values(columns))
+
+  return res
 }
 
 const setupConfig = (config) => {

package/src/widgets/Dashboard/DataTableSetting.vue

@@ -73,6 +73,11 @@
         </VirtualGrid>
 
       </div>
+
+      <div v-else-if="value.tabIndex === 3" class="flex-1 flex flex-col gap-5 p-6">
+
+      </div>
+
     </div>
 
 	</div>
@@ -119,6 +124,9 @@ export default{
       return [
         { text:'General', value:1 },
         this.value.props.datasourceUid ? { text:'Columns', value:2 } : null,
+        this.value.props.datasourceUid ? { text:'Filters', value:3 } : null,
+        this.value.props.datasourceUid ? { text:'Sorts', value:4 } : null,
+        this.value.props.datasourceUid ? { text:'Pivot', value:5 } : null,
       ]
         .filter(_ => _)
     },

package/src/widgets/PresetSelector.vue

@@ -53,7 +53,7 @@
 
     <div v-if="mode === 'select'" class="flex-1 flex flex-col">
       <div class="flex flex-col bg-base-300 border-t-[1px] border-b-[1px] border-text-50 divide-y divide-text-50">
-        <button v-for="(preset, idx) in config.presets" type="button"
+        <div v-for="(preset, idx) in config.presets"
                 class="px-6 text-left hover:bg-primary-200 hover:text-white flex flex-row items-center">
           <div class="flex-1 py-4" @click="select(idx)">
             {{ preset.name }}
@@ -64,7 +64,7 @@
                   @click="$refs.contextMenu.open($refs.btn[idx], { idx })">
             <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
           </button>
-        </button>
+        </div>
       </div>
 
       <ContextMenu ref="contextMenu" position="bottom-right">