@mixd-id/web-scaffold 0.2.250801014 → 0.2.260801002

package/src/components/Alert.vue

@@ -3,41 +3,44 @@
 		<Transition name="alert-outer">
 			<div v-if="isOpen" :class="$style.alert" ref="alert">
 				<Transition name="alert" @after-appear="onAfterAppear" appear>
-					<div :class="$style.cont1">
-
-						<div :class="$style.cont2">
-							<slot v-if="$slots['icon']" name="icon"></slot>
-							<svg width="100" height="100" class="fill-red-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-								<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
-								<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
-								<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
-							</svg>
-							<h5 :class="$style.title">{{ title }}</h5>
-						</div>
-
-						<div :class="$style.details">
-							<p class="text-center break-words whitespace-pre-line" v-if="message">{{ message }}</p>
-							<p class="text-center break-words max-w-[420px] whitespace-pre-line" v-if="stack">{{ stack }}</p>
-						</div>
+					<div :class="$style.cont1" role="alertdialog" aria-modal="true">
+
+						<div :class="$style.body">
+
+							<div :class="$style.cont2">
+								<slot v-if="$slots['icon']" name="icon"></slot>
+								<svg v-else-if="alert.icon !== false" width="100" height="100" class="fill-red-500 shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
+									<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
+								</svg>
+								<h5 :class="$style.title">{{ title }}</h5>
+							</div>
 
-						<div :class="$style.details" v-if="details">
-							<div v-if="!showDetails" class="text-center">
-								<button type="button" class="text-primary" @click="showDetails = true">Open Details</button>
+							<div :class="$style.details">
+								<p class="text-center break-words whitespace-pre-line" v-if="message">{{ message }}</p>
+								<p class="text-center break-words whitespace-pre-line" v-if="stack">{{ stack }}</p>
 							</div>
-							<div v-else class="flex flex-col gap-4">
-								<div v-for="(v, k) in details">
-									<small class="font-bold">{{ k }}</small>
-									<div class="block break-all text-sm">{{ v }}</div>
-								</div>
 
-								<div class="self-stretch text-center">
-									<button type="button" class="text-primary text-sm" @click="copy">Copy Details</button>
+							<div :class="$style.details" v-if="details">
+								<div v-if="!showDetails" class="text-center">
+									<button type="button" class="text-primary" @click="showDetails = true">Open Details</button>
+								</div>
+								<div v-else class="flex flex-col gap-4">
+									<div v-for="(v, k) in details">
+										<small class="font-bold">{{ k }}</small>
+										<div class="block break-all text-sm">{{ v }}</div>
+									</div>
+
+									<div class="self-stretch text-center">
+										<button type="button" class="text-primary text-sm" @click="copy">Copy Details</button>
+									</div>
 								</div>
 							</div>
+
 						</div>
 
-						<div>
-							<br />
+						<div :class="$style.footer">
 							<Button ref="btnOK" @click="onConfirm">
 								<strong class="px-4">
 									{{ buttonText }}
@@ -57,6 +60,8 @@ import {copyToClipboard, unPascalCase} from "../utils/helpers.mjs";
 
 export default{
 
+  emits: [ 'appear' ],
+
 	methods: {
 
 		/**
@@ -70,10 +75,16 @@ export default{
 			this.alert = obj
 			this.isOpen = true
 			this.showDetails = false
+			if(typeof window !== 'undefined') window.addEventListener('keydown', this.onKeydown)
 		},
 
 		close(){
 			this.isOpen = false
+			if(typeof window !== 'undefined') window.removeEventListener('keydown', this.onKeydown)
+		},
+
+		onKeydown(e){
+			if(e.key === 'Escape') this.onConfirm()
 		},
 
 		copy(){
@@ -180,6 +191,10 @@ export default{
 
 	},
 
+	unmounted(){
+		if(typeof window !== 'undefined') window.removeEventListener('keydown', this.onKeydown)
+	},
+
 	data(){
 		return {
 			alert: {},
@@ -204,28 +219,36 @@ export default{
 }
 
 .alert>*{
-	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
+	@apply max-h-[80vh] bg-base-400 dark:bg-base-300 rounded-xl;
 	@apply border-[1px] border-border-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }
 
 .cont1{
-	@apply flex flex-col items-center p-6 gap-1;
+	@apply flex flex-col p-6 gap-1 overflow-hidden;
+}
+
+.body{
+	@apply flex-1 min-h-0 min-w-0 overflow-y-auto flex flex-col items-center gap-1;
+}
+.body::-webkit-scrollbar {
+	display: none;
 }
 
 .cont2{
-	@apply flex flex-col items-center;
+	@apply flex flex-col items-center min-w-0 self-stretch;
 }
 
 .title{
-	@apply text-center;
+	@apply text-center break-words min-w-0 max-w-full;
 }
 
 .details{
-	@apply flex-1 flex flex-col gap-4 overflow-auto min-h-[1.6rem] self-stretch;
+	@apply flex flex-col gap-4 min-h-[1.6rem] min-w-0 self-stretch;
 }
-.details::-webkit-scrollbar {
-	display: none;
+
+.footer{
+	@apply shrink-0 pt-4 flex justify-center;
 }
 
 </style>

package/src/components/Card.vue

@@ -19,13 +19,13 @@
           </div>
         </slot>
 
-        <slot name="default" :context="context"></slot>
+        <slot name="default" :context="context" :caller="caller"></slot>
 
       </div>
     </Transition>
   </Teleport>
 	<div v-else :class="computedClass">
-    <slot name="default" :context="context"></slot>
+    <slot name="default" :context="context" :caller="caller"></slot>
 	</div>
 </template>
 
@@ -39,6 +39,8 @@ const onDismiss = (e) => {
 
 document.querySelector('.bW9k').addEventListener('click', onDismiss)
 
+const openCards = []
+
 export default{
 
   emits: [ 'show' ],
@@ -49,7 +51,8 @@ export default{
       return [
         this.float ? this.$style.modal : this.$style.static,
         this.class,
-        this.computedState ? this.$style['state-open'] : ''
+        this.computedState ? this.$style['state-open'] : '',
+        this.blurred ? this.$style['state-blurred'] : ''
       ]
           .join(' ')
           .trim()
@@ -74,7 +77,9 @@ export default{
   data(){
     return {
       _state: false,
-      context: {}
+      context: {},
+      caller: null,
+      blurred: false
     }
   },
 
@@ -125,6 +130,30 @@ export default{
       }
     },
 
+    // Registers this card as the topmost one, remembering whichever card was on
+    // top before it as the caller and blurring it.
+    attach(){
+      if(openCards.indexOf(this) > -1) return
+
+      this.caller = openCards[openCards.length - 1] ?? null
+      openCards.push(this)
+
+      if(this.caller) this.caller.blurred = true
+    },
+
+    detach(){
+      const index = openCards.indexOf(this)
+      if(index > -1) openCards.splice(index, 1)
+
+      if(this.caller){
+        // A caller can be shared, keep it blurred while any other card sits on it
+        this.caller.blurred = openCards.some(card => card.caller === this.caller)
+        this.caller = null
+      }
+
+      this.blurred = false
+    },
+
     onAfterLeave(){
       this.$nextTick(() => {
         let overlay = document.querySelector('.bW9k')
@@ -142,6 +171,10 @@ export default{
     this.mounted = true
   },
 
+  unmounted(){
+    this.detach()
+  },
+
   props:{
 
     class: String,
@@ -177,6 +210,10 @@ export default{
       handler(state){
         if(!this.float) return
 
+        state ? this.attach() : this.detach()
+
+        if(state) this.$emit('show', { context: this.context, caller: this.caller })
+
         let overlay = document.querySelector('.bW9k')
         if(overlay){
           if(state){
@@ -224,10 +261,13 @@ export default{
   @apply fixed;
   @apply bg-base-400 dark:bg-base-300;
   @apply border-[1px] border-border-50 flex max-h-[90vh] max-w-full;
-  @apply rounded-xl overflow-hidden transition-all;
+  @apply rounded-xl overflow-hidden;
   @apply flex flex-col;
   z-index: 101;
-  transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1);
+  /* transform/opacity only — animating `all` drags `filter` into the
+     transition, which re-rasterizes the whole card on every frame */
+  transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1),
+              opacity 200ms cubic-bezier(0.25, 1, 0.5, 1);
   transform: scale(0);
   opacity: 0;
 }
@@ -236,6 +276,15 @@ export default{
   opacity: 1;
 }
 
+/* The card that opened whichever card is currently on top. The blur is applied
+   in one step so the browser rasterizes it once and caches it; only the opacity
+   fades, which stays on the compositor. */
+.modal.state-blurred,
+.static.state-blurred{
+  @apply blur-[3px] pointer-events-none select-none;
+  opacity: .8;
+}
+
 .overlay{
   @apply absolute z-20 left-0 bottom-0 top-0 right-0 bg-white/50 backdrop-blur-sm;
 }

package/src/components/Carousel.vue

@@ -60,7 +60,7 @@ export default{
     items: Array,
 
 		infinite: {
-			type: undefined,
+			type: [ Boolean, String ],
 			default: false
 		},
 

package/src/{widgets → components}/CartSetting.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script setup>
+defineEmits([ 'change' ])
 
 defineProps({
   item: {

package/src/components/Chart.vue

@@ -57,7 +57,7 @@
 
 import { Bar, Line, Doughnut, Pie } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
-import PresetSelector from "../widgets/PresetSelector.vue";
+import PresetSelector from "./PresetSelector.vue";
 import throttle from "lodash/throttle";
 import dayjs from "dayjs";
 
@@ -72,7 +72,7 @@ export default{
   props: {
     config: {
       type: Object,
-      default: {}
+      default: () => ({})
     },
 
     presetKey: undefined,

package/src/components/Checkbox.vue

@@ -9,9 +9,9 @@
 					</div>
 				</Transition>
 			</span>
-      <div v-if="$slots.default" class="ml-2">
+      <template v-if="$slots.default">
         <slot name="default"></slot>
-      </div>
+      </template>
 		</label>
 	</div>
 </template>
@@ -22,15 +22,17 @@ import {parseBoolean} from "../utils/helpers.mjs";
 
 export default {
 
+	emits: [ 'update:modelValue' ],
+
 	props:{
-    default: undefined,
-		modelValue: undefined,
-    value: undefined,
-		trueValue: undefined,
-		falseValue: undefined,
-		disabled: undefined,
+    default: { type: [ Boolean, String, Number ], default: undefined },
+		modelValue: { type: [ Boolean, String, Number, Array ], default: undefined },
+    value: { type: [ Boolean, String, Number ], default: undefined },
+		trueValue: { type: [ Boolean, String, Number ], default: undefined },
+		falseValue: { type: [ Boolean, String, Number ], default: undefined },
+		disabled: { type: [ Boolean, String ], default: undefined },
 		showIcon: {
-			type: undefined,
+			type: [ Boolean, String, Number ],
 			default: true
 		},
     itemClass: String
@@ -87,35 +89,31 @@ export default {
 
 		onChange(e){
 
+      const checked = e.target.checked
       let value
 
       if(this.value !== undefined){
         if(Array.isArray(this.modelValue)){
-					if(e.target.checked){
-            this.modelValue.push(this.value)
-						this.modelValue.filter((value, index, self) => self.indexOf(value) === index)
-					}
-          else{
-            this.modelValue.splice(this.modelValue.indexOf(this.value), 1)
-					}
+          value = checked ?
+            [ ...new Set([ ...this.modelValue, this.value ]) ] :
+            this.modelValue.filter(v => v !== this.value)
 				}
-        else if(e.target.checked){
+        else if(checked){
           value = this.value
 				}
 			}
       else if(this.trueValue !== undefined && this.falseValue !== undefined) {
         if(Array.isArray(this.modelValue)){
-          if(e.target.checked){
-            this.modelValue.push(this.trueValue)
-            this.modelValue.filter((value, index, self) => self.indexOf(value) === index)
+          if(checked){
+            value = [ ...new Set([ ...this.modelValue, this.trueValue ]) ]
 					}
         }
         else{
-          value = e.target.checked ? this.trueValue : this.falseValue
+          value = checked ? this.trueValue : this.falseValue
         }
       }
       else{
-				value = e.target.checked
+				value = checked
       }
 
       if(value !== undefined){
@@ -140,7 +138,7 @@ export default {
 }
 
 .comp label{
-	@apply flex flex-row items-start;
+	@apply flex flex-row items-center gap-2;
 }
 
 .comp label *{
@@ -160,7 +158,7 @@ export default {
 }
 
 .indicator{
-	@apply min-w-[21px] w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-300;
+	@apply min-w-[21px] w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-200;
 	@apply flex items-center justify-center overflow-hidden;
 	transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/CodeEditor.vue

@@ -19,6 +19,8 @@ import prismCSS from 'prismjs/themes/prism-tomorrow.css?inline'
 
 export default{
 
+  emits: [ 'update:modelValue' ],
+
 	props:{
 
 		modelValue: String,

package/src/{widgets → components}/CollapsiblePanelSetting.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script setup>
+defineEmits([ 'change' ])
 
 const { item } = defineProps({
   item: {

package/src/components/ColorPicker.vue

@@ -232,7 +232,7 @@ export default {
 		// Predefined color swatches for class mode
 		colors: {
 			type: Array,
-			default: [
+			default: () => [
 				'primary-50', 'primary-100', 'primary-200', 'primary-300', 'primary-400', 'primary-500',
 				'primary-600', 'primary-700', 'primary-800', 'primary-900',
 				'gray-50', 'gray-100', 'gray-200', 'gray-300', 'gray-400', 'gray-500', 'gray-600', 'gray-700',
@@ -610,7 +610,7 @@ export default {
 }
 
 .input {
-	@apply flex-1 bg-base-300 rounded-md px-2 py-1 text-xs text-center border-[1px] border-border-100 outline-none;
+	@apply flex-1 bg-base-200 rounded-md px-2 py-1 text-xs text-center border-[1px] border-border-100 outline-none;
 	min-width: 0;
 }
 

package/src/{widgets → components}/ComponentSetting2.vue

@@ -137,7 +137,7 @@ export default{
 
     excludes: {
       type: Array,
-      default: []
+      default: () => []
     },
 
 	},

package/src/components/Confirm.vue

@@ -41,6 +41,8 @@
 
 export default{
 
+  emits: [ 'appear' ],
+
 	methods: {
 
 		/**

package/src/{widgets → components}/ContactForm.vue

@@ -68,7 +68,7 @@ export default{
 		description: String,
 		fields: {
 			type: Array,
-			default: []
+			default: () => []
 		},
     variant: String,
 		onSubmit: Array,

package/src/components/CopyToClipboard.vue

@@ -14,7 +14,6 @@ export default{
 
 	props: {
 		value: {
-			type: undefined,
 			required: true
 		}
 	},

package/src/components/Datepicker.vue

@@ -132,6 +132,8 @@ for(let i = -100 ; i < 50 ; i++){
 
 export default{
 
+  emits: [ 'update:modelValue', 'change' ],
+
   setup(props, { emit }){
 
     const resolveValue = (v) => (v === 'today' ? dayjs().format('YYYY-MM-DD') : v)

package/src/components/Datetimepicker.vue

@@ -348,7 +348,7 @@ export default{
 }
 
 .timeSelect{
-  @apply appearance-none bg-base-300 rounded-lg p-2 text-center outline-none;
+  @apply appearance-none bg-base-200 rounded-lg p-2 text-center outline-none;
   @apply border-[1px] border-border-200 hover:border-border-300;
 }
 

package/src/components/Dropdown.vue

@@ -244,7 +244,7 @@ export default {
 
 .dropdown{
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-	@apply border-[1px] border-border-200 bg-base-400;
+	@apply border-[1px] border-border-200 bg-base-200;
 }
 .dropdown:not(.readonly){
 	@apply hover:border-border-300;

package/src/{widgets → components}/FeatureList.vue

@@ -42,7 +42,7 @@ export default{
 		items: Array,
 		columns: {
 			type: Array,
-			default: [ 2, 4 ]
+			default: () => [ 2, 4 ]
 		},
 		variant: Array,
 

package/src/components/Gmaps.vue

@@ -16,7 +16,7 @@ export default{
 
 		config: {
       type: Object,
-      default: {}
+      default: () => ({})
     },
 	},
 

package/src/{widgets → components}/IconList.vue

@@ -22,7 +22,7 @@ export default{
 
 		columns: {
 			type: Array,
-			default: [ 4, 8 ]
+			default: () => [ 4, 8 ]
 		},
 
 		icons: Array,

package/src/components/Image.vue

@@ -58,7 +58,7 @@ export default{
 
 		ratio: {
 			type: Array,
-			default: []
+			default: () => []
 		},
 
     src: undefined,