@mixd-id/web-scaffold 0.1.230406001

package/src/components/VirtualTable.vue

@@ -0,0 +1,497 @@
+<template>
+	<div :class="$style.comp">
+		<div :class="$style.header" v-if="visibleColumns.length > 0">
+			<table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
+				<thead>
+				<tr>
+					<th v-for="column in visibleColumns" :style="thStyle(column)">
+						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
+						<div v-else :class="headerColumnClass(column)">
+							<span v-if="column.label && !column.label.startsWith('(')">{{ column.label }}</span>
+						</div>
+						<div :class="$style.separator" @mousedown="startResize($event, column)"></div>
+					</th>
+					<th :class="$style.spacer"></th>
+				</tr>
+				</thead>
+			</table>
+		</div>
+
+		<div ref="cont">
+			<div ref="scroller" v-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
+				<div :class="$style.spacer" ref="spacer" :style="spacerStyle">
+					<table :class="$style.table">
+						<thead>
+						<tr>
+							<th v-for="column in visibleColumns" :style="thStyle(column)"></th>
+							<th :class="$style.spacer"></th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr v-for="(item, index) in visibleItems" :key="item"
+								@click="select(item, index)"
+								:class="[ selectedIndex === ((item && item.id) ? item.id : visibleStartIndex + index) ? $style.trSelected : '', item._highlight ? $style.highlight : '' ].join(' ')">
+							<td v-for="column in visibleColumns">
+								<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
+								<div v-else :class="columnClass(column)" v-html="formatColumn(item[column.key ?? ''] ?? '', column)"></div>
+							</td>
+							<td :class="$style.spacer"></td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
+			<div :class="$style.calc" v-if="visibleColumns.length > 0 && items && items.length > 0" ref="calc">
+				<table :class="$style.table">
+					<tbody>
+					<tr>
+						<td v-for="column in columns" :style="thStyle(column)">
+							<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="items[0]"></slot>
+							<div v-else :class="columnClass(column)" v-html="formatColumn(items[0][column.key ?? ''] ?? '', column)"></div>
+						</td>
+						<td :class="$style.spacer"></td>
+					</tr>
+					</tbody>
+				</table>
+			</div>
+			<div v-else-if="visibleColumns.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+				<h5 class="text-text-300">No active column</h5>
+			</div>
+			<div v-else  class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+				<h5 class="text-text-300">No data available</h5>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import throttle from "lodash/throttle";
+import dayjs from "dayjs";
+
+const _DEFAULT_COLUMN_WIDTH = '100px'
+
+export default{
+
+	emits: [ 'scroll-end' ],
+
+	props:{
+		columns: Array,
+
+		items: Array,
+
+		pinned: Function,
+
+		defaultColumnWidth: {
+			type: String,
+			default: _DEFAULT_COLUMN_WIDTH
+		},
+
+		appearances: {
+			type: Object,
+			default: {}
+		}
+	},
+
+	data(){
+		return {
+			scrollTop: 0,
+			scrollLeft: 0,
+			itemHeight: 0,
+			maxVisibleItems: 0,
+			isOnEndScroll: false,
+			selectedIndex: -1
+		}
+	},
+
+	computed:{
+
+		visibleStartIndex(){
+			return Math.round(this.scrollTop / this.itemHeight)
+		},
+
+		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
+		},
+
+		visibleItems(){
+			if(this.itemHeight <= 0) return []
+			return this.sortedItems.slice(this.visibleStartIndex, this.visibleStartIndex + this.maxVisibleItems)
+		},
+
+		spacerStyle(){
+			return {
+				transform: "translateY(" + (this.visibleStartIndex * this.itemHeight) + "px)"
+			}
+		},
+
+		scrollerStyle(){
+			if(!this.items || this.items.length < 1)
+				return {}
+
+			const height = (this.items.length * this.itemHeight)
+			const width = this.visibleColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
+
+			//console.log('scrollerStyle', { width, height, columns:this.columns })
+
+			return {
+				height: height + 'px',
+				width: width + 'px'
+			}
+		},
+
+		tableHeadStyle(){
+			return {
+				transform: "translate3d(" + (this.scrollLeft * -1) + "px, 0, 0)"
+			}
+		},
+
+		visibleColumns(){
+			const columns = this.columns.filter(_ => _.visible)
+			return columns
+		}
+
+	},
+
+	mounted(){
+
+		this.$refs.cont.addEventListener(
+			"scroll",
+			this.handleScroll,
+			this.passiveScrollSupported() ? { passive: true } : false
+		)
+
+		this.resize()
+
+	},
+
+	methods: {
+
+		select(item, index){
+			this.selectedIndex = (item && item.id) ? item.id : this.visibleStartIndex + index
+			if(item._highlight){
+				delete item._highlight
+			}
+		},
+
+		thStyle(column){
+			const width = parseInt(column.width ?? this.defaultColumnWidth)
+			return {
+				width: width + 'px'
+			}
+		},
+
+		async resize(){
+
+			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)
+					this.itemHeight = parseInt(window.getComputedStyle(this.$refs.calc).height)
+					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.items.length
+
+					//console.log('Virtual table scroll resize', { elHeight, itemHeight:this.itemHeight, maxVisibleItems:this.maxVisibleItems })
+
+					if(this.itemHeight <= 0){
+						console.error('[VirtualTable] Unable to calculate item height, make sure not async component.')
+					}
+				}
+			})
+
+		},
+
+		handleScroll: throttle(function(){
+			this.scrollTop = this.$refs.cont.scrollTop
+			this.scrollLeft = this.$refs.cont.scrollLeft
+
+			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$refs.cont.clientHeight - this.itemHeight){
+				if(!this.isOnEndScroll){
+					this.$emit('scroll-end')
+					this.isOnEndScroll = true
+				}
+			}
+			else{
+				if(this.isOnEndScroll){
+					this.isOnEndScroll = false
+				}
+			}
+		}, 10),
+
+		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;
+		},
+
+		startResize(e, column){
+
+			const idx = this.columns.findIndex((_) => _ === column)
+			let x1 = e.touches ? e.touches[0].clientX : e.clientX
+
+			const onMouseMove = (e) => {
+				const x2 = e.touches ? e.touches[0].clientX : e.clientX
+				const d = x2 - x1
+				x1 = x2
+
+				let width = parseInt(this.columns[idx].width ?? _DEFAULT_COLUMN_WIDTH) + d
+				if(width < 20) width = 20
+				this.columns[idx].width = width
+			}
+
+			const onMouseUp = (e) => {
+				window.removeEventListener('mousemove', onMouseMove)
+				window.removeEventListener('mouseup', onMouseUp)
+			}
+
+			window.addEventListener('mousemove', onMouseMove)
+			window.addEventListener('mouseup', onMouseUp)
+		},
+
+		columnClass(column){
+
+			let align
+			if(!column.align){
+				switch(column.type){
+					case 'currency':
+						align = 'right'
+						break
+				}
+			}
+
+			return [
+				this.$style.tdDiv,
+				this.$style['align-' + align]
+			]
+				.join(' ')
+		},
+
+		headerColumnClass(column){
+
+			let align
+			if(!column.align){
+				switch(column.type){
+					case 'currency':
+						align = 'right'
+						break
+				}
+			}
+
+			return [
+				this.$style.headerCol,
+				this.$style['align-' + align]
+			]
+		},
+
+		formatColumn(value, column){
+
+			if(this.appearances[column.key] && this.appearances[column.key].length){
+				const formatted = this.appearances[column.key].filter((appearance) => {
+					if(appearance.value === value){
+						return true
+					}
+					return false
+				}).pop()
+
+				if(formatted){
+					const fStyle = this.$style['style' + formatted.style]
+					const fColor = this.$style['color-' + formatted.color]
+					const fValue = formatted.text ?? value
+					return `<div class="${fStyle} ${fColor}">${fValue}</div>`
+				}
+			}
+
+			let text = value
+			let dateFormat, val
+			switch(column.type){
+
+				case 'date':
+					dateFormat = column.format ?? 'D MMM YY HH:mm:ss'
+					val = dayjs(value)
+					text = val.isValid() ? val.format(dateFormat) : value
+					break
+
+				case 'currency':
+					const num = parseInt(value)
+					text = !isNaN(num) ? num.toLocaleString() : ''
+					break
+
+				case 'enum':
+					const enumObj = column.typeParams.filter((_) => _.value === value).pop()
+					text = enumObj ? enumObj.text : value
+					break
+			}
+
+			return text
+		}
+
+	},
+
+	watch: {
+
+		items: {
+			deep: true,
+			handler(){
+				this.resize()
+			}
+		},
+
+		columns: {
+			deep: true,
+			handler(){
+				this.resize()
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col overflow-hidden;
+	@apply border-[1px] border-text-50 rounded-sm bg-base-500;
+}
+
+.comp>*:last-child{
+	@apply flex-1 overflow-auto relative max-h-[100vh];
+}
+
+.header{
+	@apply border-b-[1px] border-text-50 bg-base-500;
+}
+
+.headerCol{
+	@apply p-2 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.scroller{
+	position: relative;
+	overflow: hidden;
+	will-change: auto;
+	min-width: 100%;
+	@apply bg-base-500;
+}
+
+.spacer{
+	will-change: auto;
+	position: relative;
+	height: 0;
+}
+
+.calc{
+	@apply absolute top-[-100vh] invisible;
+}
+
+.table{
+	@apply border-collapse;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.table th{
+	@apply relative text-left;
+}
+.table th:nth-child(odd){
+}
+
+.table tbody td{
+	@apply border-b-[1px] border-text-50;
+}
+.table tbody td:nth-child(odd){
+}
+
+.table tbody tr:hover{
+	@apply bg-primary-50;
+}
+
+.table tbody tr.trSelected{
+	@apply bg-primary-200;
+}
+
+.table tbody tr.highlight{
+	animation: highlight 1s 1 forwards;
+}
+@keyframes highlight {
+	0% {
+		@apply bg-transparent;
+	}
+
+	100% {
+		@apply bg-primary-100;
+	}
+}
+
+.tdDiv{
+	@apply p-2 whitespace-nowrap text-ellipsis overflow-hidden;
+}
+
+.separator{
+	@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;
+}
+
+.spacer{
+	@apply w-full
+}
+
+.align-left{ @apply text-left; }
+.align-center{ @apply text-center; }
+.align-right{ @apply text-right; }
+
+.style40{
+	@apply inline-block m-1 rounded-md px-2 text-sm;
+}
+.style40.color-red{ @apply bg-red-600 text-white; }
+.style40.color-orange{ @apply bg-orange-600 text-white; }
+.style40.color-yellow{ @apply bg-yellow-600 text-white; }
+.style40.color-green{ @apply bg-green-600 text-white; }
+.style40.color-teal{ @apply bg-teal-600 text-white; }
+.style40.color-indigo{ @apply bg-indigo-600 text-white; }
+.style40.color-purple{ @apply bg-purple-600 text-white; }
+.style40.color-fuchsia{ @apply bg-fuchsia-600 text-white; }
+
+
+.style41{
+	@apply inline-block m-1 rounded-md bg-red-600 border-red-400 text-white px-2 text-sm;
+}
+.style42{
+	@apply inline-block m-1 rounded-md bg-orange-600 text-white px-2 text-sm;
+}
+
+</style>

package/src/entry-client.js

@@ -0,0 +1,27 @@
+import { createApp } from './main'
+import NProgress from "nprogress";
+import 'nprogress/nprogress.css';
+
+const { app, router, pinia } = createApp()
+
+if(typeof window.__hydration !== 'undefined'){
+  pinia.state.value = window.__hydration ?? {}
+  document.getElementById('aHlj').remove()
+  document.getElementById('aHlk').remove()
+}
+
+NProgress.configure({ showSpinner: false });
+
+router.beforeEach(async (to, from, next) => {
+  NProgress.start()
+  next()
+})
+
+router.afterEach(() => {
+  NProgress.done()
+})
+
+// wait until router is ready before mounting to ensure hydration match
+router.isReady().then(() => {
+  app.mount(document.body.firstElementChild)
+})

package/src/entry-server.js

@@ -0,0 +1,73 @@
+import { createApp } from './main'
+import { renderToString } from 'vue/server-renderer'
+import path, { basename } from 'path'
+
+export async function render(req, manifest) {
+
+  let url = req.originalUrl
+  let redirect = undefined
+  let cookie = []
+
+  const { app, router, pinia } = createApp()
+
+  // set the router to the desired URL before rendering
+  router.push({ path:url })
+  await router.isReady()
+
+  const ctx = {}
+  const html = await renderToString(app, ctx)
+
+  const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
+  const serializePinia = "null"
+  const modalOverlay = ctx.teleports ? ctx.teleports['.bW9k'] ?? '' : ''
+  const contextOverlay = ctx.teleports ? ctx.teleports['.Y29u'] ?? '' : ''
+  const alertOverlay = ctx.teleports ? ctx.teleports['.YWxl'] ?? '' : ''
+  const toastOverlay = ctx.teleports ? ctx.teleports['.dG9h'] ?? '' : ''
+
+  return [ html, preloadLinks, serializePinia, redirect, cookie, modalOverlay, alertOverlay, contextOverlay, toastOverlay ]
+}
+
+function renderPreloadLinks(modules, manifest) {
+  let links = ''
+  const seen = new Set()
+  modules.forEach((id) => {
+    const files = manifest[id]
+    if (files) {
+      files.forEach((file) => {
+        if (!seen.has(file)) {
+          seen.add(file)
+          const filename = basename(file)
+          if (manifest[filename]) {
+            for (const depFile of manifest[filename]) {
+              links += renderPreloadLink(depFile)
+              seen.add(depFile)
+            }
+          }
+          links += renderPreloadLink(file)
+        }
+      })
+    }
+  })
+  return links
+}
+
+function renderPreloadLink(file) {
+  if (file.endsWith('.js')) {
+    return `<link rel="modulepreload" crossorigin href="${file}">`
+  } else if (file.endsWith('.css')) {
+    return `<link rel="stylesheet" href="${file}">`
+  } else if (file.endsWith('.woff')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
+  } else if (file.endsWith('.woff2')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
+  } else if (file.endsWith('.gif')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`
+  } else if (file.endsWith('.jpg') || file.endsWith('.jpeg')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`
+  } else if (file.endsWith('.png')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/png">`
+  } else {
+    // TODO
+    return ''
+  }
+}

package/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;