@mixd-id/web-scaffold 0.1.230406293 → 0.1.230406295

package/package.json

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

package/src/components/List.vue

@@ -124,26 +124,28 @@
             <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>
 
-          <VirtualTable v-else-if="presetView === 'table' || pivotEnabled"
-                        ref="table"
-                        :columns="columns"
-                        class="flex-1 rounded-lg panel-400"
-                        :items="data.items"
-                        :enumCache="enumCache"
-                        @scroll-end="loadNext"
-                        @item-click="onTableItemClick">
+          <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
+            <VirtualTable
+                          ref="table"
+                          :columns="columns"
+                          class="flex-1 rounded-lg panel-400"
+                          :items="data.items"
+                          :enumCache="enumCache"
+                          @scroll-end="loadNext"
+                          @item-click="onTableItemClick">
+
+              <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
+                <div :class="getHeader(slot.replace('col-', ''))">
+                  <slot :name="slot" :item="item" :index="index"></slot>
+                </div>
+              </template>
 
-            <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
-              <div :class="getHeader(slot.replace('col-', ''))">
+              <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
                 <slot :name="slot" :item="item" :index="index"></slot>
-              </div>
-            </template>
+              </template>
 
-            <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
-              <slot :name="slot" :item="item" :index="index"></slot>
-            </template>
-
-          </VirtualTable>
+            </VirtualTable>
+          </div>
 
           <VirtualGrid v-else-if="presetView === 'grid'"
                        ref="grid"
@@ -154,7 +156,7 @@
                        :container-class="`${gridContainerClass}`"
                        :config="config">
             <template #item="{ item }">
-              <slot name="gridItem" :item="item" :enumCache="enumCache">
+              <slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
                 <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" />
@@ -174,17 +176,6 @@
         <div v-if="extBar.open && pivotEnabled"
              :style="extStyle" class="border-t-[1px] border-text-50 flex flex-col relative md:p-5">
 
-          <div :class="$style.resize2" class="group"
-               @mousedown="(e) => $util.dragResize(e, resize2)">
-            <button type="button" @click.prevent="extBar.open = false"
-                    :class="$style.extClose" class="group-hover:bg-primary">
-              <svg width="14"
-                   height="14"
-                   class="fill-text-300 group-hover:fill-white cursor-pointer"
-                   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>
-            </button>
-          </div>
-
           <div v-if="readyState === 3" class="flex-1 flex items-center justify-center">
             <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>
@@ -218,7 +209,7 @@
                        :container-class="`${gridContainerClass}`"
                        :config="config">
             <template #item="{ item }">
-              <slot name="gridItem" :item="item">
+              <slot name="gridItem" :item="item" :getEnumText="getEnumText">
                 <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" />
@@ -232,6 +223,17 @@
             </template>
           </VirtualGrid>
 
+          <div :class="$style.resize2" class="group"
+               @mousedown="(e) => $util.dragResize(e, resize2)">
+            <button type="button" @click.prevent="extBar.open = false"
+                    :class="$style.extClose" class="group-hover:bg-primary">
+              <svg width="14"
+                   height="14"
+                   class="fill-text-300 group-hover:fill-white cursor-pointer"
+                   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>
+            </button>
+          </div>
+
         </div>
 
       </div>
@@ -298,6 +300,24 @@ export default{
 
   methods: {
 
+    getEnumText(key, value){
+
+      let enumText
+
+      const column = this.config.columns.find(_ => _.key === key)
+
+      if(Array.isArray(column.typeParams)){
+        const typeParam = (column.typeParams ?? []).filter((_) => _.value === value).pop()
+        enumText = typeParam && typeParam.text ? typeParam.text : enumText
+      }
+
+      if(this.enumCache && this.enumCache[column.key] && this.enumCache[column.key][value]){
+        enumText = this.enumCache[column.key][value].text ?? enumText
+      }
+
+      return enumText ? enumText : value
+    },
+
     getHeader(column){
 
       return [
@@ -836,6 +856,12 @@ export default{
     }
   },
 
+  provide(){
+    return {
+      listStyle: this.$style
+    }
+  },
+
   watch: {
 
     config: {
@@ -865,4 +891,221 @@ export default{
   @apply w-[21px] h-[21px] rounded-full bg-text-50 flex items-center justify-center hover:bg-red-600;
 }
 
+.pv-green1, .pv-green2, .pv-green3, .pv-green4, .pv-green5{
+  @apply rounded-lg text-center text-text cursor-pointer;
+}
+.pv-green1{
+  background-color: #d3f3df;
+}
+.pv-green2{
+  background-color: #bdeecf;
+}
+.pv-green3{
+  background-color: #a7e8bf;
+}
+.pv-green4{
+  background-color: #91e2af;
+}
+.pv-green5{
+  background-color: #7adc9e;
+}
+html[data-theme="dark"] .pv-green1{
+  @apply text-text;
+  background-color: #031409;
+}
+html[data-theme="dark"] .pv-green2{
+  @apply text-text;
+  background-color: #072713;
+}
+html[data-theme="dark"] .pv-green3{
+  @apply text-text;
+  background-color: #0a3b1c;
+}
+html[data-theme="dark"] .pv-green4{
+  @apply text-text;
+  background-color: #0e4f26;
+}
+html[data-theme="dark"] .pv-green5{
+  @apply text-text;
+  background-color: #11632f;
+}
+
+.pv-red1, .pv-red2, .pv-red3, .pv-red4, .pv-red5{
+  @apply rounded-lg text-center text-text cursor-pointer;
+}
+.pv-red1{
+  background-color: #fce9e9;
+}
+.pv-red2{
+  background-color: #f8d4d4;
+}
+.pv-red3{
+  background-color: #f5bebe;
+}
+.pv-red4{
+  background-color: #f1a8a8;
+}
+.pv-red5{
+  background-color: #ee9393;
+}
+html[data-theme="dark"] .pv-red1{
+  @apply text-text;
+  background-color: #160404;
+}
+html[data-theme="dark"] .pv-red2{
+  @apply text-text;
+  background-color: #2c0808;
+}
+html[data-theme="dark"] .pv-red3{
+  @apply text-text;
+  background-color: #420b0b;
+}
+html[data-theme="dark"] .pv-red4{
+  @apply text-text;
+  background-color: #580f0f;
+}
+html[data-theme="dark"] .pv-red5{
+  @apply text-text;
+  background-color: #6e1313;
+}
+
+.pv-blue1, .pv-blue2, .pv-blue3, .pv-blue4, .pv-blue5{
+  @apply rounded-lg text-center text-text cursor-pointer;
+}
+.pv-blue1{
+  background-color: #e9effd;
+}
+.pv-blue2{
+  background-color: #d3e0fb;
+}
+.pv-blue3{
+  background-color: #bed0f9;
+}
+.pv-blue4{
+  background-color: #a8c1f7;
+}
+.pv-blue5{
+  background-color: #92b1f5;
+}
+html[data-theme="dark"] .pv-blue1{
+  @apply text-text;
+  background-color: #040a17;
+}
+html[data-theme="dark"] .pv-blue2{
+  @apply text-text;
+  background-color: #07142f;
+}
+html[data-theme="dark"] .pv-blue3{
+  @apply text-text;
+  background-color: #0b1e46;
+}
+html[data-theme="dark"] .pv-blue4{
+  @apply text-text;
+  background-color: #0f285e;
+}
+html[data-theme="dark"] .pv-blue5{
+  @apply text-text;
+  background-color: #133276;
+}
+
+.pv-yellow1, .pv-yellow2, .pv-yellow3, .pv-yellow4, .pv-yellow5{
+  @apply rounded-lg text-center text-text cursor-pointer;
+}
+.pv-yellow1{
+  background-color: #fdf7e6;
+}
+.pv-yellow2{
+  background-color: #fbf0ce;
+}
+.pv-yellow3{
+  background-color: #f9e8b5;
+}
+.pv-yellow4{
+  background-color: #f7e19c;
+}
+.pv-yellow5{
+  background-color: #f5d984;
+}
+html[data-theme="dark"] .pv-yellow1{
+  @apply text-text;
+  background-color: #171201;
+}
+html[data-theme="dark"] .pv-yellow2{
+  @apply text-text;
+  background-color: #2f2402;
+}
+html[data-theme="dark"] .pv-yellow3{
+  @apply text-text;
+  background-color: #463602;
+}
+html[data-theme="dark"] .pv-yellow4{
+  @apply text-text;
+  background-color: #5e4803;
+}
+html[data-theme="dark"] .pv-yellow5{
+  @apply text-text;
+  background-color: #755a04;
+}
+
+.pv-fuchsia1, .pv-fuchsia2, .pv-fuchsia3, .pv-fuchsia4, .pv-fuchsia5{
+  @apply rounded-lg text-center text-text cursor-pointer;
+}
+.pv-fuchsia1{
+  background-color: #f6e8f7;
+}
+.pv-fuchsia2{
+  background-color: #edd2ef;
+}
+.pv-fuchsia3{
+  background-color: #e3bbe7;
+}
+.pv-fuchsia4{
+  background-color: #daa4df;
+}
+.pv-fuchsia5{
+  background-color: #d18ed7;
+}
+html[data-theme="dark"] .pv-fuchsia1{
+  @apply text-text;
+  background-color: #100311;
+}
+html[data-theme="dark"] .pv-fuchsia2{
+  @apply text-text;
+  background-color: #210623;
+}
+html[data-theme="dark"] .pv-fuchsia3{
+  @apply text-text;
+  background-color: #310834;
+}
+html[data-theme="dark"] .pv-fuchsia4{
+  @apply text-text;
+  background-color: #410b46;
+}
+html[data-theme="dark"] .pv-fuchsia5{
+  @apply text-text;
+  background-color: #520e58;
+}
+
+.pv-gradient1, .pv-gradient2, .pv-gradient3, .pv-gradient4, .pv-gradient5, .pv-default{
+  @apply rounded-lg text-center text-text cursor-pointer;
+}
+.pv-gradient1{
+  @apply bg-gradient-to-r from-cyan-500 to-blue-500;
+}
+.pv-gradient2{
+  @apply bg-gradient-to-r from-sky-500 to-indigo-500;
+}
+.pv-gradient3{
+  @apply bg-gradient-to-r from-violet-500 to-fuchsia-500;
+}
+.pv-gradient4{
+  @apply bg-gradient-to-r from-purple-500 to-pink-500;
+}
+.pv-gradient5{
+  @apply bg-gradient-to-r from-pink-500 to-teal-500;
+}
+.pv-default{
+  @apply text-primary;
+}
+
 </style>

package/src/components/Textbox.vue

@@ -47,9 +47,9 @@ export default{
 			default: ''
 		},
 
-		modelValue: [ String, Number ],
+		modelValue: undefined,
 
-		value: String,
+		value: undefined,
 
 		placeholder: String,
 		readonly: undefined,

package/src/components/VirtualTable.vue

@@ -88,6 +88,8 @@ const _DEFAULT_COLUMN_WIDTH = '100px'
 
 export default{
 
+  inject: [ 'listStyle' ],
+
 	emits: [ 'scroll-end', 'item-click' ],
 
 	props:{
@@ -251,7 +253,7 @@ export default{
 					const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
 						window.getComputedStyle(this.$el).height :
 						window.getComputedStyle(this.$el).maxHeight)
-					this.itemHeight = parseInt(window.getComputedStyle(this.$refs.calc).height)
+					this.itemHeight = Math.ceil(parseFloat(window.getComputedStyle(this.$refs.calc).height))
 					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.items.length
 
 					if(this.itemHeight <= 0 && import.meta.env.DEV){
@@ -433,8 +435,6 @@ export default{
             if(conditionMatched) break
           }
 
-          console.log('value', value, conditionMatched)
-
           if(conditionMatched){
             appearanceClass = appearance.class
             break
@@ -445,7 +445,7 @@ export default{
 			return [
 				this.$style.tdDiv,
 				this.$style['align-' + align],
-        appearanceClass
+        this.listStyle ? this.listStyle[appearanceClass] : ''
 			]
 				.join(' ')
 		},

package/src/widgets/PresetBarPivotColumnEdit.vue

@@ -45,23 +45,44 @@
                   <Textbox v-if="condition.operator !== 'none'" v-model.numberconditions="condition.value" class="w-[100px]"/>
                 </div>
               </div>
-              <div :class="item.class" class="px-2">
+              <div :class="listStyle[item.class]" class="px-2">
                 Sample
               </div>
               <div>
                 <Dropdown class="w-[120px]" v-model="item.class">
-                  <option value="text-primary cursor-pointer">Default</option>
-                  <option value="bg-red-100 text-red-600">Red 1</option>
-                  <option value="bg-red-200 text-red-600">Red 2</option>
-                  <option value="bg-red-300 text-red-600">Red 3</option>
-                  <option value="bg-red-400 text-white">Red 4</option>
-                  <option value="bg-red-500 text-white">Red 5</option>
-                  <option value="bg-green-100 text-green-700">Green 1</option>
-                  <option value="bg-green-200 text-green-700">Green 2</option>
-                  <option value="bg-green-300 text-green-700">Green 3</option>
-                  <option value="bg-green-400 text-white">Green 4</option>
-                  <option value="bg-green-500 border-[1px] border-green-600 text-white">Green 5</option>
-                  <option value="text-primary underline cursor-pointer">Underline</option>
+                  <option value="pv-default">Default</option>
+                  <option value="pv-red1">Red 1</option>
+                  <option value="pv-red2">Red 2</option>
+                  <option value="pv-red3">Red 3</option>
+                  <option value="pv-red4">Red 4</option>
+                  <option value="pv-red5">Red 5</option>
+                  <option value="pv-green1">Green 1</option>
+                  <option value="pv-green2">Green 2</option>
+                  <option value="pv-green3">Green 3</option>
+                  <option value="pv-green4">Green 4</option>
+                  <option value="pv-green5">Green 5</option>
+                  <option value="pv-blue5">Blue 5</option>
+                  <option value="pv-blue1">Blue 1</option>
+                  <option value="pv-blue2">Blue 2</option>
+                  <option value="pv-blue3">Blue 3</option>
+                  <option value="pv-blue4">Blue 4</option>
+                  <option value="pv-blue5">Blue 5</option>
+                  <option value="pv-yellow5">Yellow 5</option>
+                  <option value="pv-yellow1">Yellow 1</option>
+                  <option value="pv-yellow2">Yellow 2</option>
+                  <option value="pv-yellow3">Yellow 3</option>
+                  <option value="pv-yellow4">Yellow 4</option>
+                  <option value="pv-yellow5">Yellow 5</option>
+                  <option value="pv-fuchsia1">Fuchsia 1</option>
+                  <option value="pv-fuchsia2">Fuchsia 2</option>
+                  <option value="pv-fuchsia3">Fuchsia 3</option>
+                  <option value="pv-fuchsia4">Fuchsia 4</option>
+                  <option value="pv-fuchsia5">Fuchsia 5</option>
+                  <option value="pv-gradient1">Gradient 1</option>
+                  <option value="pv-gradient2">Gradient 2</option>
+                  <option value="pv-gradient3">Gradient 3</option>
+                  <option value="pv-gradient4">Gradient 4</option>
+                  <option value="pv-gradient5">Gradient 5</option>
                 </Dropdown>
               </div>
               <div>
@@ -83,7 +104,7 @@ export default{
 
   emits: [ 'apply' ],
 
-	inject: [ 'socketEmit2' ],
+	inject: [ 'listStyle', 'socketEmit2' ],
 
   props: {