@mixd-id/web-scaffold 0.1.230406254 → 0.1.230406256

package/package.json

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

package/src/components/Alert.vue

@@ -190,9 +190,12 @@ export default{
 
 .alert{
 	@apply fixed top-0 left-0 flex w-screen h-screen;
-	@apply items-center justify-center bg-black/70 backdrop-blur-md;
+	@apply items-center justify-center bg-white/50 backdrop-blur-md;
 	z-index: 60;
 }
+[data-theme="dark"] .alert{
+  @apply bg-black/50;
+}
 
 .alert>*{
 	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;

package/src/components/Confirm.vue

@@ -112,9 +112,12 @@ export default{
 
 .confirm{
 	@apply fixed top-0 left-0 flex w-screen h-screen px-8;
-	@apply items-center justify-center bg-black/70 backdrop-blur-md;
+	@apply items-center justify-center bg-white/50 backdrop-blur-md;
 	z-index: 60;
 }
+[data-theme="dark"] .confirm{
+  @apply bg-black/50;
+}
 
 .confirm>*{
 	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;

package/src/components/ContextMenu.vue

@@ -65,7 +65,8 @@ export default {
 			computedStyle: null,
 			isOpen: false,
 			context: null,
-			closing: false
+			closing: false,
+      currentCaller: null
 		}
 	},
 
@@ -114,7 +115,8 @@ export default {
 
 		open(caller, context){
 
-			if(this.isOpen){
+      const originalCaller = caller
+			if(this.isOpen && this.currentCaller !== caller){
 				return this.close(() => {
 					window.setTimeout(() => {
 						this.open(caller, context)
@@ -126,7 +128,7 @@ export default {
 				this.isOpen = true
 			}
 
-			caller = caller ?? this.caller
+      caller = caller ?? this.caller
 
 			if(caller){
 
@@ -248,6 +250,8 @@ export default {
 							this.onOpen()
 						})
 					}
+
+          this.currentCaller = originalCaller
 				}
 				else{
 					console.error('Undefined caller for context menu')
@@ -301,7 +305,7 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-xl;
+	@apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-xl;
 	@apply border-[2px] border-text-50 shadow-2xl whitespace-nowrap;
 	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 	opacity: 0;
@@ -315,7 +319,7 @@ export default {
 @media screen(md){
 
 	.contextMenu{
-		@apply fixed z-20 bg-base-400 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg;
+		@apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-lg;
 		@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
 		transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 		opacity: 0;

package/src/components/ImportModal.vue

@@ -1,15 +1,15 @@
 <template>
 	<Modal :state="isOpen" width="480" height="560">
 		<template v-slot:head>
-			<div class="relative p-5">
-				<div v-if="step !== 3">
+			<div class="relative flex flex-row">
+				<div v-if="step !== 3" class="flex-1 p-6 leading-relaxed">
 					<h3>{{ title }}</h3>
           <slot v-if="step === 1 && 'description' in $slots" name="description"></slot>
 					<p v-else-if="step === 1" class="mt-1 text-text-400" v-html="description"></p>
           <slot v-else-if="step === 2 && 'description2' in $slots" name="description2"></slot>
 					<p v-else-if="step === 2" class="mt-1 text-text-400" v-html="description2"></p>
 				</div>
-				<div class="absolute top-0 right-0 p-2">
+				<div class="p-2 pl-0">
 					<button type="button" class="p-2" @click="isOpen = false">
 						<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
 							<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>

package/src/components/List.vue

@@ -4,7 +4,7 @@
          class="flex-1 flex flex-row">
 
       <div v-if="computedPresetMode === 'sidebar' && config.sidebarOpen"
-           class="relative flex flex-col border-r-[1px] border-text-50 backdrop-blur-lg"
+           class="relative flex flex-col border-r-[1px] border-text-50 panel-400"
            :style="sidebarWidth">
 
         <PresetBar :config="config"
@@ -48,7 +48,7 @@
             </div>
 
             <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
-              <Textbox class="flex-1 backdrop-blur-lg md:w-[240px]" placeholder="Search..." clearable="1"
+              <Textbox class="flex-1 md:w-[240px]" placeholder="Search..." clearable="1"
                        v-model="preset.search"
                        @clear="delete preset.search; load()"
                        @keyup.enter="load">
@@ -85,7 +85,7 @@
 
         <VirtualTable v-if="presetView === 'table'"
                       :columns="columns"
-                      class="flex-1 rounded-lg backdrop-blur-lg"
+                      class="flex-1 rounded-lg panel-400"
                       :items="data.items"
                       @scroll-end="loadNext">
 
@@ -110,7 +110,7 @@
                      :config="config">
           <template #item="{ item }">
             <slot name="gridItem" :item="item">
-              <div class="flex flex-row bg-base-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden">
+              <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden">
                 <div>
                   <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
                 </div>
@@ -344,7 +344,7 @@ export default{
             id: items.map(item => item.id)
           })
             .then(({ items:nextItems }) => {
-              nextItems.forEach(item => this.$util.push(this.data.items, item))
+              nextItems.forEach(item => this.$util.unshift(this.data.items, item))
               const destroyedItems = items.filter(_ => !nextItems.find(i => i.id === _.id))
               this.$util.remove(this.data.items, destroyedItems)
             })

package/src/components/ListView.vue

@@ -133,7 +133,7 @@
 											ref="table1"
 											:columns="presetColumns"
 											:items="items"
-											class="flex-1 bg-base-500 dark:bg-base-400"
+											class="flex-1 panel-400"
 											@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))">

package/src/components/Modal.vue

@@ -288,13 +288,16 @@ export default{
 
 .bW9k{
 	@apply z-20 hidden w-[100vw] h-[100vh];
-	@apply bg-black/50 backdrop-blur-md;
+	@apply bg-white/50 backdrop-blur-md;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }
+[data-theme="dark"] .bW9k{
+  @apply bg-black/50;
+}
 .bW9l{
 	@apply flex items-center justify-center;
 }
@@ -305,7 +308,7 @@ export default{
 
 .modal{
 	@apply fixed;
-	@apply bg-base-400 dark:bg-base-300;
+	@apply panel-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
 }

package/src/components/Radio.vue

@@ -85,7 +85,7 @@ export default{
 }
 
 .indicator{
-  @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-50;
+  @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 panel-500;
   @apply flex items-center justify-center overflow-hidden;
   transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/Textbox.vue

@@ -178,7 +178,7 @@ export default{
 
 .textbox{
 	@apply flex items-center;
-  @apply border-[1px] border-text-200 bg-base-50 rounded-lg;
+  @apply border-[1px] border-text-200 panel-500 rounded-lg;
 	@apply overflow-hidden;
 }
 

package/src/themes/default/index.js

@@ -1,6 +1,6 @@
 const Plugin = require('tailwindcss/plugin')
 
-const plugin = Plugin(function({ addBase, config, theme }) {
+const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
 
   addBase({
 
@@ -16,6 +16,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       "--h-cp": '2.7rem',
       "--h-cp-lg": '3.6rem',
 
+      '--base-50': '235, 237, 240',
       '--base-300': '235, 237, 240',
       '--base-400': '245, 247, 250',
       '--base-500': '255, 255, 255',
@@ -100,7 +101,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       'text-rendering': 'optimizeLegibility',
       'fontSize': '15px',
       'touchAction': "pan-x pan-y",
-      'backgroundColor': 'rgba(var(--base-300), 100)'
+      'backgroundColor': 'rgb(var(--base-300))'
     },
 
     '@media screen and (orientation: portrait)': {
@@ -172,6 +173,10 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       transform: 'scale(1)',
     },
 
+  })
+
+  addUtilities({
+
     '.slidedown-enter-active, .slidedown-leave-active': {
       transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
       transform: 'translate3d(0, 0, 0)'
@@ -220,7 +225,31 @@ const plugin = Plugin(function({ addBase, config, theme }) {
     '.slideout-enter-from, .slideout-leave-to': {
       opacity: 0,
       transform: 'scale(.9)'
-    }
+    },
+
+    '.panel-50': {
+      '--webkit-backdrop-filter': 'var(--panel-50-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-50-backdrop-filter)',
+      'background-color': 'rgb(var(--base-50))',
+    },
+
+    '.panel-300': {
+      '--webkit-backdrop-filter': 'var(--panel-300-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-300-backdrop-filter)',
+      'background-color': 'rgb(var(--base-300))',
+    },
+
+    '.panel-400': {
+      '--webkit-backdrop-filter': 'var(--panel-400-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-400-backdrop-filter)',
+      'background-color': 'rgb(var(--base-400))',
+    },
+
+    '.panel-500': {
+      '--webkit-backdrop-filter': 'var(--panel-500-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-500-backdrop-filter)',
+      'background-color': 'rgb(var(--base-500))',
+    },
 
   })