@mixd-id/web-scaffold 0.1.230406053 → 0.1.230406054

package/package.json

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

package/src/components/ImagePreview.vue

@@ -1,8 +1,8 @@
 <template>
 	<Modal :state="isOpen" width="400" height="400" :class="$style.previewModal">
-		<div class="flex-1">
+		<div class="flex-1 flex flex-col">
 			<div class="flex flex-row justify-end items-center p-3">
-				<a :href="imageUrl" download>
+				<a v-if="download" :href="imageUrl" download>
 					<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" class="fill-text"><path class="primary" d="M15 15v-3a3 3 0 0 0-6 0v3H6a4 4 0 0 1-.99-7.88 5.5 5.5 0 0 1 10.86-.82A4.49 4.49 0 0 1 22 10.5a4.5 4.5 0 0 1-4.5 4.5H15z"/><path class="secondary" d="M11 18.59V12a1 1 0 0 1 2 0v6.59l1.3-1.3a1 1 0 0 1 1.4 1.42l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l1.3 1.3z"/></svg>
 				</a>
 				<button class="ml-3" @click="close">
@@ -10,7 +10,7 @@
 				</button>
 			</div>
 			<div class="flex items-center justify-center">
-				<img :src="imageUrl" class="max-h-[85vh]"/>
+				<img :src="imageUrl" class="max-h-[75vh]"/>
 			</div>
 		</div>
 	</Modal>
@@ -20,6 +20,15 @@
 
 export default{
 
+	props: {
+
+		download: {
+			type: Boolean,
+			default: false
+		},
+
+	},
+
 	data(){
 		return {
 			isOpen: false,
@@ -68,4 +77,4 @@ export default{
 	max-height: unset !important;
 }
 
-</style>
+</style>

package/src/components/ListPage1Filter.vue

@@ -167,4 +167,4 @@ export default{
 	@apply py-4;
 }
 
-</style>
+</style>

package/src/components/ListView.vue

@@ -2,7 +2,7 @@
 	<div :class="$style.comp" v-if="configLoaded">
 
 		<slot v-if="$slots.head" name="head"></slot>
-		<div v-else class="flex flex-row items-center gap-4 px-6 md:px-0 py-4 md:py-0">
+		<div v-else class="flex flex-row items-center gap-4 px-6 md:px-0 py-4 md:py-0 bg-base-400 dark:bg-base-300 md:bg-transparent">
 			<div class="flex-1 flex flex-row gap-4">
 				<button type="button" ref="presetSelectorBtn"
 								class="flex-1 md:flex-none flex flex-row gap-1 items-center text-left md:ml-2"
@@ -60,7 +60,7 @@
 			</Textbox>
 		</div>
 
-		<div v-if="mediaPrefix === 'sm'" class="px-6 py-4 border-b-[1px] border-text-50">
+		<div v-if="mediaPrefix === 'sm'" class="px-6 py-4 border-b-[1px] border-text-50 bg-base-400 dark:bg-base-300">
 			<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
 							 @keyup.enter="load" :class="$style.searchBox">
 				<template #start>
@@ -72,7 +72,8 @@
 		</div>
 
 		<div class="flex-1 flex" v-if="mediaPrefix">
-			<VirtualTable v-if="mediaPrefix !== 'sm'" ref="table1" :columns="presetColumns" :items="items" class="flex-1"
+			<VirtualTable v-if="mediaPrefix !== 'sm'" ref="table1" :columns="presetColumns" :items="items"
+										class="flex-1 bg-base-400 dark:bg-base-300"
 										@scroll-end="loadNext">
 				<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
 					<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
@@ -106,7 +107,7 @@
 					<slot :name="slot" :item="item" :index="index"></slot>
 				</template>
 			</VirtualTable>
-			<VirtualScroll v-else :items="items" class="flex-1" @scroll-end="loadNext">
+			<VirtualScroll v-else :items="items" class="flex-1 bg-base-400 dark:bg-base-300" @scroll-end="loadNext">
 				<template #item="{ item }">
 					<slot name="mobileItem" :item="item"></slot>
 				</template>
@@ -136,7 +137,7 @@
 					</div>
 					<div v-if="presetCurrentFilters.length > 0">
 						<ListPage1Filter v-if="preset.filters" v-for="filter in presetCurrentFilters"
-														 :filter="filter" :column="config.columns[filter.key]"
+														 :filter="filter" :column="config.columns[config.columns.findIndex((_) => _.key === filter.key)]"
 														 @remove="removeFilter(filter)" @change="load" />
 					</div>
 					<div v-else>
@@ -289,7 +290,10 @@ export default{
 		},
 
 		async loadConfig(){
-      if(!this.configStoreObj) return
+			if(!this.configStoreObj || 'reset' in ((this.$route ?? {}).query ?? {})){
+				this.configLoaded = true
+				return
+			}
 
 			switch(this.configStoreObj.type){
 				case 'socket':
@@ -568,6 +572,10 @@ export default{
 	@apply flex-1 flex flex-col md:gap-4;
 }
 
+.searchBox{
+	@apply !bg-base-300 dark:!bg-base-400;
+}
+
 .header{
 	@apply p-2 cursor-pointer border-b-[2px] border-transparent overflow-hidden;
 }

package/src/components/ListViewSettings.vue

@@ -75,7 +75,7 @@
         <div class="flex flex-col" v-else-if="config.presetTab === 'filter'">
           <div v-if="filterableColumns.length > 0">
             <ListPage1Filter v-if="preset.filters" v-for="filter in preset.filters"
-                             :filter="filter" :column="config.columns[filter.key]"
+                             :filter="filter" :column="config.columns[config.columns.findIndex((_) => _.key === filter.key)]"
                              @remove="removeFilter(filter)" @change="$emit('change')"/>
             <div class="py-8">
               <Dropdown @change="addFilter" v-model="presetFilterSelector">

package/src/components/PageBuilder.vue

@@ -406,7 +406,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-4 bg-base-300;
+	@apply flex flex-col gap-4;
 }
 
 .column{