@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

package/src/components/Modal.vue

@@ -112,9 +112,10 @@ export default{
       this.context = context
 
       if(this.hash){
+        const hash = context.hash ?? this.hash
         this.$router.push({
           ...this.$route,
-          hash: this.$route.hash.replace(this.hash, '') + this.hash
+          hash: this.$route.hash.replace(hash, '') + hash
         })
       }
       else{
@@ -331,10 +332,8 @@ export default{
 	@apply panel-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
-  background-color: rgba(255, 255, 255, .6)
 }
 html[data-theme='dark'] .modal{
-  background-color: rgba(0, 0, 0, .6)
 }
 
 .modal.v-show{

package/src/components/PresetSelectorFilterItem.vue

@@ -5,6 +5,7 @@
       <div v-if="type === 'date'" class="flex-1 flex flex-row gap-2">
         <div class="flex-1 flex flex-row gap-2">
           <Dropdown v-model="value.operator"
+                    :readonly="readonly"
                     :class="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
                     @change="apply">
             <option value="=">=</option>
@@ -24,10 +25,12 @@
                class="flex-1 flex flex-row gap-2">
             <Datepicker class="flex-1"
                         mode="popup"
+                        :readonly="readonly"
                         v-model="value.value"
                         @change="apply" />
             <Datepicker v-if="value.operator === 'between'"
                         class="flex-1"
+                        :readonly="readonly"
                         mode="popup"
                         v-model="value.value2"
                         @change="apply" />
@@ -38,6 +41,7 @@
       <div v-else-if="type === 'number'" class="flex flex-row gap-2">
         <Dropdown v-model="value.operator"
                   class="w-[100px]"
+                  :readonly="readonly"
                   @change="apply">
           <option value="=">=</option>
           <option value=">">&gt;</option>
@@ -49,13 +53,16 @@
         </Dropdown>
         <Textbox v-model="value.value"
                  class="flex-1"
+                 :readonly="readonly"
                  @keyup.enter="apply"
                  @blur="apply" />
       </div>
 
       <div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
-        <Radio :name="value.key" :value="true" v-model="value.value" @change="apply">True</Radio>
-        <Radio :name="value.key" :value="false" v-model="value.value" @change="apply">False</Radio>
+        <Radio :name="value.key"
+               :readonly="readonly" :value="true" v-model="value.value" @change="apply">True</Radio>
+        <Radio :name="value.key"
+               :readonly="readonly" :value="false" v-model="value.value" @change="apply">False</Radio>
       </div>
 
       <div v-else-if="type === 'enum' && Array.isArray(cTypeParams) && cTypeParams.length > 0"
@@ -64,6 +71,7 @@
         <Checkbox v-for="param in cTypeParams"
                   v-model="cValue.value"
                   class="flex-1"
+                  :readonly="readonly"
                   :value="param.value"
                   @change="apply">
           {{ param.text }}
@@ -74,11 +82,13 @@
       <div v-else-if="type === 'component'">
         <component :is="column.component"
                    :value="value"
+                   :readonly="readonly"
                    @change="apply" />
       </div>
 
       <div v-else class="flex flex-row gap-2">
         <Dropdown v-model="value.operator" class="w-[100px]"
+                  :readonly="readonly"
                   @change="apply">
           <option value="eq">Equal</option>
           <option value="not">Not Equal</option>
@@ -91,6 +101,7 @@
           <option value="regex">Regex</option>
         </Dropdown>
         <Textbox v-model="value.value"
+                 :readonly="readonly"
                  class="flex-1"
                  @keyup.enter="apply"
                  @blur="apply" />
@@ -120,6 +131,8 @@ export default{
 
     value: Object,
 
+    readonly: [ Boolean, Number ],
+
     enumCache: Object,
 
   },

package/src/components/Switch.vue

@@ -91,6 +91,9 @@ export default{
 .switch>input:checked + label>span{
 	@apply ml-[1.3rem] border-base bg-white
 }
+.switch>input:checked:disabled + label{
+  @apply bg-text-50;
+}
 
 .switch>input:checked + label + *,
 .switch>input:not(:checked) + label + * + *{

package/src/components/Tabs.vue

@@ -2,7 +2,7 @@
 	<div :class="computedClass">
 		<button v-for="(item, index) in filteredItems" :class="tabClass(item)"
             class="whitespace-nowrap"
-			@click="onClick(item)" type="button" >
+			@click="item.disabled !== true ? onClick(item) : ''" type="button" >
 			<slot name="default" :="{ item, index }">
         <label class="px-1">
           {{ item.text }}

package/src/components/TextWithTag.vue

@@ -2,18 +2,20 @@
 	<div :class="$style.comp">
 
 		<div class="flex flex-row items-start">
-      <p contenteditable="true" spellcheck="false" class="flex-1 whitespace-pre-line"
+      <span contenteditable="true" spellcheck="false"
          ref="html"
          v-html="html"
-         :class="itemClass"
-         @input="onInput"></p>
+         :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>
 
-    <div v-if="variant !== 'minimal'" class="flex flex-row bg-base-300">
+    <div v-if="variant !== 'minimal'" 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>
@@ -59,7 +61,8 @@
 </template>
 
 <script>
-import groupBy from "lodash/groupBy";
+
+import {restoreSelection, saveSelection} from "../utils/selection";
 
 export default{
 
@@ -69,6 +72,8 @@ export default{
 
     addFn: Function,
 
+    itemFn: Function,
+
     modelValue: String,
 
     items: Array,
@@ -82,7 +87,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 +109,8 @@ export default{
   },
 
   methods: {
+    restoreSelection,
+    saveSelection,
 
     insertElement(newNode){
       let selection = window.getSelection();
@@ -123,12 +135,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,22 +148,47 @@ 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)
     },
 
+    onPaste(e){
+      e.preventDefault()
+      const text = e.clipboardData.getData('text/plain')
+      document.execCommand('insertText', false, text)
+    },
+
     onInput(){
 
       const arr = []
       for(let i = 0 ; i < this.$refs.html.childNodes.length ; i++){
-        if(this.$refs.html.childNodes[i].nodeType === 1 && this.$refs.html.childNodes[i].classList.contains(this.$style.tag)){
-          arr.push(this.$refs.html.childNodes[i].getAttribute('data-value'))
-        }
-        else if(this.$refs.html.childNodes[i].nodeType === 3){
-          arr.push(this.$refs.html.childNodes[i].textContent)
+        if(this.$refs.html.childNodes[i].nodeType === 3){
+          arr.push(this.$refs.html.childNodes[i].nodeValue)
         }
-        else{
-          arr.push((arr.length > 0 ? "\n\n" : '') + this.$refs.html.childNodes[i].innerText)
+        else if(this.$refs.html.childNodes[i].nodeType === 1 && this.$refs.html.childNodes[i].classList.contains(this.$style.tag)){
+          arr.push(this.$refs.html.childNodes[i].getAttribute('data-value'))
         }
       }
 
@@ -179,10 +212,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
@@ -204,8 +246,8 @@ export default{
   @apply divide-y divide-text-100;
 }
 
-.comp p{
-  @apply outline-none p-2 align-baseline;
+.content{
+  @apply flex-1 whitespace-pre-line outline-none p-2;
 }
 
 .comp .tag{

package/src/components/Textbox.vue

@@ -72,6 +72,7 @@ export default{
 		computedClass(){
 			return [
 				this.$style.textbox,
+				this.$style['variant-' + this.variant],
 				this.$style['state-' + this.computedState],
 				this.readonly ? this.$style.readonly : '',
 				this.isActive && !this.readonly ? this.$style.active : '',
@@ -218,4 +219,8 @@ export default{
 	@apply text-right
 }
 
+.textbox.variant-minimal{
+  @apply border-transparent;
+}
+
 </style>