@mixd-id/web-scaffold 0.1.230406357 → 0.1.230406359

package/package.json

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

package/src/components/Datepicker.vue

@@ -266,7 +266,7 @@ export default{
 .datepicker {
 	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-  @apply border-[1px] border-text-200;
+  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
 	@apply cursor-pointer;
 }
 .datepicker:not(.readonly){
@@ -290,12 +290,18 @@ export default{
 .button{
 	@apply rounded-full aspect-square;
 }
+.button:hover{
+  @apply bg-primary-200;
+}
+.button.selected{
+  @apply bg-primary text-white;
+}
 .button.otherMonth{
 	@apply text-text-300;
 }
 
 .arrow{
-	@apply absolute right-0 pointer-events-none bg-base-50 px-2;
+	@apply absolute right-0 pointer-events-none px-2;
 	top: 50%;
 	transform: translate3d(0, -50%, 0);
 }
@@ -303,10 +309,6 @@ export default{
 	@apply block fill-text-300;
 }
 
-.selected{
-	@apply bg-primary;
-}
-
 .mode-calendar{
   @apply p-2 h-auto;
 }

package/src/components/List.vue

@@ -368,7 +368,6 @@ export default{
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
-              console.log(data)
               generatePivotColumns(this.preset, data.items)
               generateTotalColumns(this.preset, data.items)
               this.loadEnums(data.items)
@@ -388,8 +387,6 @@ export default{
           ((this.data ?? {}).hasNext !== false) &&
           !(this.preset.pivot ?? {}).enabled) {
 
-        //console.log('last id', this.dataItems[this.dataItems.length - 1].id)
-
         this.readyState = 4
         this.socket.send(this.src, {
           ...this.preset,
@@ -397,7 +394,6 @@ export default{
           afterItem: this.data.items[this.data.items.length - 1],
         })
             .then(data => {
-              //console.log('next id', data.items[0].id)
 
               this.data.items.push(...data.items)
               this.loadEnums(data.items)
@@ -505,10 +501,10 @@ export default{
         ],
         pivot: null
       })
-        .then((res) => {
-          this.data.extItems = res.items
-        })
-        .finally(_ => this.readyState = 1)
+          .then((res) => {
+            this.data.extItems = res.items
+          })
+          .finally(_ => this.readyState = 1)
     },
 
     loadExtNext(){
@@ -600,12 +596,12 @@ export default{
             ...this.preset,
             [key]: items.map(item => item[key])
           })
-            .then(({ items:nextItems }) => {
-              nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
+              .then(({ items:nextItems }) => {
+                nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
 
-              const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
-              this.$util.remove(this.data.items, destroyedItems)
-            })
+                const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
+                this.$util.remove(this.data.items, destroyedItems)
+              })
           break
       }
 

package/src/components/VirtualGrid.vue

@@ -1,44 +1,37 @@
 <template>
-	<div :class="$style.virtualGrid" @click="resize">
-
-    <div ref="container" class="flex-1 overflow-y-auto">
-      <div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
-        <div :class="spacerClass" ref="spacer" :style="spacerStyle">
-          <div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
-               @click="">
-            <slot name="item" :item="item" :index="index">
-              {{ item }}
-            </slot>
-          </div>
-          <slot name="end"></slot>
+  <div :class="$style.virtualGrid" @click="resize">
+
+    <div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
+      <div :class="spacerClass" ref="spacer" :style="spacerStyle">
+        <div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
+             @click="">
+          <slot name="item" :item="item" :index="index"></slot>
         </div>
       </div>
     </div>
 
-		<div :class="$style.calc" v-if="items && items.length > 0" ref="calc">
-			<slot name="item" :item="items[0]" :index="0">
-        {{ items[0] }}
-      </slot>
-		</div>
-
-		<Teleport v-if="optBar" :to="optBar">
-			<div class="flex flex-row gap-2 items-center">
-				<small class="text-text-400">Column</small>
-				<select v-model="config.gridColumn"
-								class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
-					<option v-for="i in 8" :value="i">{{ i }}</option>
-				</select>
-			</div>
-			<div class="flex flex-row gap-2 items-center">
-				<small class="text-text-400">Gap</small>
-				<select v-model="config.gridGap"
-								class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
-					<option v-for="i in 8" :value="`gap-${i}`">{{ i }}</option>
-				</select>
-			</div>
-		</Teleport>
-
-	</div>
+    <div :class="$style.calc" v-if="items && items.length > 0" ref="calc">
+      <slot name="item" :item="items[0]" :index="0"></slot>
+    </div>
+
+    <Teleport v-if="optBar" :to="optBar">
+      <div class="flex flex-row gap-2 items-center">
+        <small class="text-text-400">Column</small>
+        <select v-model="config.gridColumn"
+                class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
+          <option v-for="i in 8" :value="i">{{ i }}</option>
+        </select>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <small class="text-text-400">Gap</small>
+        <select v-model="config.gridGap"
+                class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
+          <option v-for="i in 8" :value="`gap-${i}`">{{ i }}</option>
+        </select>
+      </div>
+    </Teleport>
+
+  </div>
 </template>
 
 <script>
@@ -47,202 +40,200 @@ import throttle from "lodash/throttle";
 
 export default{
 
-	emits: [ 'scroll-end' ],
+  emits: [ 'scroll-end' ],
 
-	props: {
+  props: {
 
-		column: {
-			type: [ Number, String ],
-			default: 1
-		},
+    column: {
+      type: [ Number, String ],
+      default: 1
+    },
 
-		gap: {
-			type: [ String ],
-			default: 'gap-0'
-		},
+    gap: {
+      type: [ String ],
+      default: 'gap-0'
+    },
 
     containerClass: String,
 
-		items: Array,
+    items: Array,
 
-		pinned: Function,
+    pinned: Function,
 
-		optBar: String,
+    optBar: String,
 
-		config: Object
+    config: Object
 
-	},
+  },
 
-	methods: {
+  methods: {
 
-		handleScroll: throttle(function(){
-      if(!this.$refs.scroller) return
+    handleScroll: throttle(function(){
+      this.scrollTop = this.$el.scrollTop
 
-			this.scrollTop = this.$refs.container.scrollTop
+      if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$el.clientHeight - this.itemHeight){
+        if(!this.isOnEndScroll){
+          this.$emit('scroll-end')
+          this.isOnEndScroll = true
+        }
+      }
+      else{
+        if(this.isOnEndScroll){
+          this.isOnEndScroll = false
+        }
+      }
+    }, 16),
 
-			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$refs.container.clientHeight - this.itemHeight){
-				if(!this.isOnEndScroll){
-					this.$emit('scroll-end')
-					this.isOnEndScroll = true
-				}
-			}
-			else{
-				if(this.isOnEndScroll){
-					this.isOnEndScroll = false
-				}
-			}
-		}, 16),
+    init(){
+      this.$el.addEventListener(
+          "scroll",
+          this.handleScroll,
+          this.passiveScrollSupported() ? { passive: true } : false
+      )
 
-		init(){
-			this.$refs.container.addEventListener(
-				"scroll",
-				this.handleScroll,
-				this.passiveScrollSupported() ? { passive: true } : false
-			)
+      this.resize()
+    },
 
-			this.resize()
-		},
+    passiveScrollSupported() {
+      let passiveSupported = false;
+
+      try {
+        const options = {
+          get passive() {
+            passiveSupported = true;
+            return false;
+          }
+        };
+        window.addEventListener("test", null, options);
+        window.removeEventListener("test", null, options);
+      } catch (err) {
+        passiveSupported = false;
+      }
+      return passiveSupported;
+    },
 
-		passiveScrollSupported() {
-			let passiveSupported = false;
+    resetState(){
+      this.state = 1
+    },
 
-			try {
-				const options = {
-					get passive() {
-						passiveSupported = true;
-						return false;
-					}
-				};
-				window.addEventListener("test", null, options);
-				window.removeEventListener("test", null, options);
-			} catch (err) {
-				passiveSupported = false;
-			}
-			return passiveSupported;
-		},
+    async resize(){
 
-		resetState(){
-			this.state = 1
-		},
+      this.$nextTick(() => {
+        if(this.$refs.calc){
+          const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
+              window.getComputedStyle(this.$el).height :
+              window.getComputedStyle(this.$el).maxHeight)
 
-		async resize(){
+          if(isNaN(elHeight)) return
 
-			this.$nextTick(() => {
-				if(this.$refs.calc){
-					const elHeight = parseInt(window.getComputedStyle(this.$refs.container).height !== '0px' ?
-						window.getComputedStyle(this.$refs.container).height :
-						window.getComputedStyle(this.$refs.container).maxHeight)
+          this.itemHeight = parseFloat(window.getComputedStyle(this.$refs.calc).height.replace('px', ''))
 
-					if(isNaN(elHeight)) return
+          this.itemGap = parseFloat(window.getComputedStyle(this.$refs.spacer)['row-gap'].replace('px', ''));
 
-					this.itemHeight = parseFloat(window.getComputedStyle(this.$refs.calc).height.replace('px', ''))
+          this.maxVisibleItems = elHeight > 0 ? (Math.ceil(elHeight / this.itemHeight) * this.column) : this.items.length
 
-					this.itemGap = parseFloat(window.getComputedStyle(this.$refs.spacer)['row-gap'].replace('px', ''));
+          if(this.itemHeight <= 0){
+            console.error('Unable to calculate virtual grid item height, async component not supported.')
+          }
+        }
+      })
 
-					this.maxVisibleItems = elHeight > 0 ? (Math.ceil(elHeight / this.itemHeight) * this.column) : this.items.length
+    },
 
-					if(this.itemHeight <= 0){
-						console.error('Unable to calculate virtual grid item height, async component not supported.')
-					}
-				}
-			})
+    setState(state){
+      this.state = state
+    }
 
-		},
+  },
 
-		setState(state){
-			this.state = state
-		}
+  computed: {
 
-	},
+    scrollerStyle(){
+      if(!this.items || this.items.length < 1)
+        return {}
 
-	computed: {
+      const rowCount = Math.ceil((this.items.length / this.column))
+      const height = (rowCount * this.itemHeight) + (this.itemGap * (rowCount - 1))
 
-		scrollerStyle(){
-			if(!this.items || this.items.length < 1)
-				return {}
+      return {
+        height: height + 'px'
+      }
+    },
 
-			const rowCount = Math.ceil((this.items.length / this.column))
-			const height = (rowCount * this.itemHeight) + (this.itemGap * (rowCount - 1))
-
-			return {
-				height: height + 'px'
-			}
-		},
-
-		sortedItems(){
-			if(!Array.isArray(this.items)) return []
-
-			if(typeof this.pinned === 'function'){
-				const pinnedItems = []
-				const unpinnedItems = []
-				this.items.forEach((item) => {
-					if(this.pinned(item))
-						pinnedItems.push(item)
-					else
-						unpinnedItems.push(item)
-				})
-
-				return [
-					...pinnedItems,
-					...unpinnedItems
-				]
-			}
-			return this.items
-		},
-
-		spacerClass(){
-			return [
-				this.$style.spacer,
+    sortedItems(){
+      if(!Array.isArray(this.items)) return []
+
+      if(typeof this.pinned === 'function'){
+        const pinnedItems = []
+        const unpinnedItems = []
+        this.items.forEach((item) => {
+          if(this.pinned(item))
+            pinnedItems.push(item)
+          else
+            unpinnedItems.push(item)
+        })
+
+        return [
+          ...pinnedItems,
+          ...unpinnedItems
+        ]
+      }
+      return this.items
+    },
+
+    spacerClass(){
+      return [
+        this.$style.spacer,
         this.containerClass,
-				this.gap
-			]
-				.join(' ')
-		},
-
-		spacerStyle(){
-			return {
-				transform: "translateY(" + (this.visibleStartIndex * (this.itemHeight + this.itemGap)) + "px)",
-				'grid-template-columns': `repeat(${this.column}, minmax(0, 1fr))`,
-				gap: this.gap
-			}
-		},
-
-		visibleItems(){
-			if(this.itemHeight <= 0) return []
-			return this.sortedItems.slice(this.visibleStartIndex * this.column, (this.visibleStartIndex * this.column) + this.maxVisibleItems)
-		},
-
-		visibleStartIndex(){
-			return Math.floor((this.scrollTop < 0 ? 0 : this.scrollTop) / (this.itemHeight + this.itemGap))
-		},
-
-	},
-
-	data(){
-		return {
-			scrollTop: 0,
-			itemHeight: 0,
-			itemGap: 0,
-			maxVisibleItems: 0,
-			isOnEndScroll: false,
-			selectedIndex: -1,
-			state: 1,
-		}
-	},
-
-	mounted() {
-		this.init()
-	},
-
-	watch: {
-
-		column(to){
-			this.resize()
-		},
-
-		gap(to){
-			this.resize()
-		},
+        this.gap
+      ]
+          .join(' ')
+    },
+
+    spacerStyle(){
+      return {
+        transform: "translateY(" + (this.visibleStartIndex * (this.itemHeight + this.itemGap)) + "px)",
+        'grid-template-columns': `repeat(${this.column}, minmax(0, 1fr))`,
+        gap: this.gap
+      }
+    },
+
+    visibleItems(){
+      if(this.itemHeight <= 0) return []
+      return this.sortedItems.slice(this.visibleStartIndex * this.column, (this.visibleStartIndex * this.column) + this.maxVisibleItems)
+    },
+
+    visibleStartIndex(){
+      return Math.floor((this.scrollTop < 0 ? 0 : this.scrollTop) / (this.itemHeight + this.itemGap))
+    },
+
+  },
+
+  data(){
+    return {
+      scrollTop: 0,
+      itemHeight: 0,
+      itemGap: 0,
+      maxVisibleItems: 0,
+      isOnEndScroll: false,
+      selectedIndex: -1,
+      state: 1,
+    }
+  },
+
+  mounted() {
+    this.init()
+  },
+
+  watch: {
+
+    column(to){
+      this.resize()
+    },
+
+    gap(to){
+      this.resize()
+    },
 
     items: {
       deep: true,
@@ -255,7 +246,7 @@ export default{
       }
     },
 
-	}
+  }
 
 }
 
@@ -264,25 +255,25 @@ export default{
 <style module>
 
 .virtualGrid{
-	@apply flex flex-col gap-3;
+  @apply flex-1 overflow-y-auto;
 }
 
 .scroller{
-	position: relative;
-	overflow: hidden;
-	will-change: auto;
-	@apply min-w-full;
+  position: relative;
+  overflow: hidden;
+  will-change: auto;
+  @apply min-w-full;
 }
 
 .spacer{
-	will-change: auto;
-	position: relative;
-	@apply grid;
+  will-change: auto;
+  position: relative;
+  @apply grid;
 }
 
 .calc{
-	@apply absolute invisible max-w-full;
-	top: -10000px;
+  @apply absolute invisible max-w-full;
+  top: -10000px;
 
 }