@mixd-id/web-scaffold 0.1.230406258 → 0.1.230406260

package/package.json

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

package/src/components/Chart.vue

@@ -196,10 +196,12 @@ export default{
 
                       const columnKey = yAxe.key
                       const column = this.config.columns.find(column => column.key === columnKey)
-                      switch (column.type) {
-                        case 'enum':
-                          label = column.typeParams.find(_ => `${_.value}` === `${value}`)?.text ?? label
-                          break
+                      if(column){
+                        switch (column.type) {
+                          case 'enum':
+                            label = column.typeParams.find(_ => `${_.value}` === `${value}`)?.text ?? label
+                            break
+                        }
                       }
 
                       datasets.push({

package/src/components/DayTimeRange.vue

@@ -19,15 +19,15 @@
       <div class="flex-1 flex flex-col gap-1 pl-2 border-l-[1px] border-text-100 divide-y divide-text-100">
         <div v-for="(range, i) in val.value" class="flex flex-row">
           <div class="flex-1 flex flex-row">
-            <input type="time" v-model="val.value[i][0]">
+            <input type="time" v-model="val.value[i][0]" @blur="updateModelValue()">
             <div class="py-2">-</div>
-            <input type="time" v-model="val.value[i][1]">
+            <input type="time" v-model="val.value[i][1]" @blur="updateModelValue()">
           </div>
           <div class="p-2 flex flex-row gap-2">
-            <button v-if="val.value.length > 1" type="button" @click="val.value.splice(i, 1)">
+            <button v-if="val.value.length > 1" type="button" @click="val.value.splice(i, 1);updateModelValue()">
               <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M140 274c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v12c0 6.6-5.4 12-12 12H140zm364-18c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>
             </button>
-            <button type="button" @click="val.value.push([ '00:00', '23:59' ])">
+            <button type="button" @click="val.value.push([ '00:00', '23:59' ]);updateModelValue()">
               <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 248.5l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L241 419.9V44c0-6.6-5.4-12-12-12h-10c-6.6 0-12 5.4-12 12v375.9L28.5 241.4c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.8 4.8-12.3.1-17z"/></svg>
             </button>
           </div>
@@ -78,8 +78,6 @@ export default{
         modelValue[val.key] = val.value
       })
 
-      console.log(modelValue)
-
       this.$emit('update:modelValue', modelValue)
       this.$emit('change', modelValue)
     },

package/src/components/List.vue

@@ -85,7 +85,7 @@
 
         <VirtualTable v-if="presetView === 'table'"
                       :columns="columns"
-                      class="flex-1 rounded-lg"
+                      class="flex-1 rounded-lg panel-400"
                       :items="data.items"
                       @scroll-end="loadNext">
 
@@ -344,7 +344,7 @@ export default{
             id: items.map(item => item.id)
           })
             .then(({ items:nextItems }) => {
-              nextItems.forEach(item => this.$util.unshift(this.data.items, item))
+              nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
               const destroyedItems = items.filter(_ => !nextItems.find(i => i.id === _.id))
               this.$util.remove(this.data.items, destroyedItems)
             })

package/src/components/Tabs.vue

@@ -1,11 +1,12 @@
 <template>
 	<div :class="computedClass">
 		<button v-for="(item, index) in filteredItems" :class="tabClass(item)"
+            class=" whitespace-nowrap text-ellipsis overflow-hidden"
 			@click="onClick(item)" type="button" >
 			<slot name="default" :="{ item, index }">
-        <div class="px-2">
+        <label class="px-1">
           {{ item.text }}
-        </div>
+        </label>
       </slot>
 		</button>
 	</div>

package/src/components/TextWithTag.vue

@@ -2,7 +2,7 @@
 	<div :class="$style.comp">
 
 		<div class="flex flex-row items-start">
-      <p contenteditable="true" spellcheck="false" class="flex-1" ref="html" v-html="html" @input="onInput"></p>
+      <p contenteditable="true" spellcheck="false" class="flex-1 whitespace-pre-line" ref="html" v-html="html" @input="onInput"></p>
 
       <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>
@@ -136,14 +136,20 @@ export default{
 
       const arr = []
       for(let i = 0 ; i < this.$refs.html.childNodes.length ; i++){
-        if(this.$refs.html.childNodes[i].nodeType === 3){
+        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)
         }
-        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'))
+        else{
+          arr.push((arr.length > 0 ? "\n\n" : '') + this.$refs.html.childNodes[i].innerText)
         }
       }
-      this.$emit('update:modelValue', arr.join(''))
+
+      const text = arr.filter(_ => _).join('')
+
+      this.$emit('update:modelValue', text)
 
       this.isInternal = true
     }

package/src/components/VirtualGrid.vue

@@ -272,8 +272,9 @@ export default{
 }
 
 .calc{
-	@apply absolute invisible;
+	@apply absolute invisible max-w-full;
 	top: -10000px;
+
 }
 
 </style>

package/src/components/VirtualTable.vue

@@ -431,7 +431,7 @@ export default{
 
 .comp{
 	@apply flex flex-col overflow-hidden bg-base-500;
-	@apply border-[1px] border-text-200 rounded-sm;
+	@apply border-[1px] border-text-50 rounded-sm;
 }
 
 .comp>*:last-child{
@@ -439,7 +439,7 @@ export default{
 }
 
 .header{
-	@apply border-b-[1px] border-text-200;
+	@apply border-b-[1px] border-text-50;
 }
 
 .headerCol{
@@ -460,7 +460,7 @@ export default{
 }
 
 .calc{
-	@apply absolute top-[-100vh] invisible;
+	@apply absolute top-[-100vh] invisible max-w-full;
 }
 
 .table{
@@ -476,7 +476,7 @@ export default{
 }
 
 .table tbody td{
-	@apply border-b-[1px] border-text-200;
+	@apply border-b-[1px] border-text-50;
 }
 .table tbody td:nth-child(odd){
 }
@@ -498,11 +498,11 @@ export default{
 }
 
 .separator{
-	@apply w-[5px] absolute top-0 bottom-0 right-0 cursor-e-resize border-text-200;
+	@apply w-[5px] absolute top-0 bottom-0 right-0 cursor-e-resize border-text-50;
 	@apply border-r-[1px];
 }
 .table th:hover .separator{
-	@apply border-text-100;
+	@apply border-text-50;
 }
 
 .spacer{

package/src/themes/default/index.js

@@ -22,9 +22,9 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       '--base-500': '255, 255, 255',
       '--base': '255, 255, 255',
 
-      "--text-50": '220, 220, 220',
-      "--text-100": '210, 210, 210',
-      "--text-200": '201, 201, 201',
+      "--text-50": '224, 224, 224',
+      "--text-100": '218, 218, 218',
+      "--text-200": '212, 212, 212',
       "--text-300": '191, 191, 191',
       "--text-400": '116, 116, 116',
       "--text-500": '86, 86, 86',
@@ -70,7 +70,7 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       "--base-50": '22, 26, 33',
       "--base-300": '0, 0, 0',
       "--base-400": '17, 21, 28',
-      "--base-500": '27, 31, 38',
+      "--base-500": '22, 26, 33',
       "--base": '22, 26, 33',
 
       "--text-50": '33, 39, 46',