@mixd-id/web-scaffold 0.1.230406367 → 0.1.230406368

package/package.json

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

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/utils/helpers.js

@@ -525,11 +525,9 @@ 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();
+  });
 }
 
 module.exports = {

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) => {