@mixd-id/web-scaffold 0.2.250801014 → 0.2.260801002

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

@@ -628,7 +628,7 @@ export default{
     enumCache: Object,
 
     useAssistant: {
-      type: undefined,
+      type: [ Boolean, String ],
       default: false
     }
 

package/src/components/PresetSelectorFilterItem.vue

@@ -124,7 +124,7 @@ export default{
 
     column: {
       type: Object,
-      default: {}
+      default: () => ({})
     },
 
     enabled: Boolean,

package/src/components/Radio.vue

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

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

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

package/src/components/SvgEditor.vue

@@ -160,7 +160,7 @@ function sizeChanged(){
 }
 
 .comp code{
-  @apply border-[1px] border-border-200 bg-base-300 rounded-lg flex flex-col overflow-hidden;
+  @apply border-[1px] border-border-200 bg-base-200 rounded-lg flex flex-col overflow-hidden;
 	@apply p-6;
 	white-space: pre-wrap;
 	tab-size: 1rem;

package/src/components/Switch.vue

@@ -75,7 +75,7 @@ export default{
 }
 
 .switch label{
-	@apply w-[3rem] inline-block rounded-2xl bg-base-300 h-[2rem];
+	@apply w-[3rem] inline-block rounded-2xl bg-base-200 h-[2rem];
 	@apply border-[1px] border-border-200 hover:border-border-300;
 }
 

package/src/components/TextWithTag.vue

@@ -17,7 +17,7 @@
       </slot>
     </div>
 
-    <div v-if="variant !== 'minimal' && !readonly" class="flex flex-row bg-base-300" @dblclick.alt="log(JSON.stringify(modelValue))">
+    <div v-if="variant !== 'minimal' && !readonly" class="flex flex-row bg-base-200" @dblclick.alt="log(JSON.stringify(modelValue))">
       <div class="flex-1 flex flex-row gap-2 overflow-x-auto p-1" :class="$style.noScrollbar">
         <button type="button" v-for="item in viewedItems" :class="$style.tag2" class="text-xs" @click="add(item)">{{ item.text ?? item.value }}</button>
       </div>
@@ -271,7 +271,7 @@ export default{
 <style module>
 
 .comp {
-  @apply border-[1px] border-border-200 bg-base-300 rounded-lg min-w-[100px];
+  @apply border-[1px] border-border-200 bg-base-200 rounded-lg min-w-[100px];
   @apply flex flex-col gap-2;
   @apply overflow-hidden;
   @apply divide-y divide-text-100;

package/src/components/Textbox.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="computedClass">
 		<slot name="start"></slot>
-		<input :type="computedType" :disabled="isDisabled" @focus="isActive = true"
+		<input :type="computedType" :disabled="isDisabled" @focus="onFocus"
            @input="onInput"
            @blur="onBlur"
            @keyup="(e) => $emit('keyup', e)"
@@ -10,7 +10,7 @@
            :class="itemClass" @click="$emit('input-click')"
 			@keydown="onKeyDown"/>
 		<button class="mr-2" v-show="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
-			<svg :class="$style.svg" width="19" height="19" viewBox="0 0 24 24" class="fill-text-200 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+			<svg :class="$style.svg" width="19" height="19" 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"/>
 			</svg>
 		</button>
@@ -86,9 +86,19 @@ export default{
 			return this.state === 2
 		},
 
+		// What this locale writes a decimal point as — a dot in en, a comma in id,
+		// de, fr and most of Europe. `tel` accepts either key and shows this one,
+		// so the number reads the way the person typing it expects.
+		decimalSeparator(){
+			return new Intl.NumberFormat().formatToParts(1.1).find(part => part.type === 'decimal')?.value ?? '.'
+		},
+
 		displayedValue(){
 			if(this.isActive){
-				return this.modelValue ?? this.value
+				// While typing, what was typed — the value behind it is always
+				// written with a dot, and swapping it back mid-keystroke would
+				// take the separator away as soon as it was pressed.
+				return this.draft ?? this.modelValue ?? this.value
 			}
 			else{
 				switch(this.type){
@@ -97,6 +107,9 @@ export default{
 						const val = parseFloat(this.modelValue)
 						return isNaN(val) ? '' : val.toLocaleString()
 
+					case 'tel':
+						return `${this.modelValue ?? this.value ?? ''}`.replace('.', this.decimalSeparator)
+
 					default:
 						return this.modelValue ?? this.value
 
@@ -120,7 +133,10 @@ export default{
 
 	data(){
 		return {
-			isActive: false
+			isActive: false,
+			// What is on screen while the field has focus, which is not the same
+			// as the value behind it once a comma is involved.
+			draft: null
 		}
 	},
 
@@ -135,12 +151,50 @@ export default{
 		},
 
 		onInput(e){
+			if(this.type === 'tel'){
+				const text = this.asDecimal(e.target.value)
+
+				// The box shows the separator this locale uses; what goes out is
+				// written with a dot, so `Number()` and `v-model.number` read it
+				// the same wherever it was typed.
+				this.draft = text
+
+				// Only when something was actually dropped: assigning on every
+				// keystroke puts the caret back at the end, which makes editing
+				// the middle of a number impossible.
+				if(e.target.value !== text) e.target.value = text
+
+				this.$emit('update:modelValue', text.replace(this.decimalSeparator, '.'))
+				this.$emit('input', e)
+				return
+			}
+
 			this.$emit('update:modelValue', e.target.value)
       this.$emit('input', e)
 		},
 
+		// Either key means the same thing, and only the first one is a separator:
+		// everything after it belongs to the fraction.
+		asDecimal(value){
+			const separator = this.decimalSeparator
+			const text = `${value ?? ''}`.replace(/[^0-9.,]/g, '').replace(/[.,]/g, separator)
+
+			const first = text.indexOf(separator)
+			if(first < 0) return text
+
+			return text.slice(0, first + 1) + text.slice(first + 1).split(separator).join('')
+		},
+
+		onFocus(){
+			this.isActive = true
+			this.draft = this.type === 'tel'
+				? `${this.modelValue ?? this.value ?? ''}`.replace('.', this.decimalSeparator)
+				: null
+		},
+
 		onBlur(e){
 			this.isActive = false
+			this.draft = null
 			this.$emit('blur', e)
 		},
 
@@ -150,7 +204,7 @@ export default{
 			let text = (e.clipboardData || window.clipboardData).getData("text");
 			switch(this.type){
 				case 'tel':
-					text = text.replace(/[^0-9]/g, '')
+					text = this.asDecimal(text)
 					break
 			}
 			if(parseInt(this.maxlength) > 0){
@@ -162,6 +216,10 @@ export default{
 
 		onKeyDown(e){
 			if([ 'number', 'tel' ].includes(this.type)){
+				// Matched on the character rather than the key code: which key
+				// carries a comma moves with the layout, the character does not.
+				if(this.type === 'tel' && (e.key === '.' || e.key === ',')) return
+
 				if(((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) ||
 					[ 8, 9, 13, 27, 37, 38, 39, 40, 46 ].includes(e.keyCode)) && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey);
 				else if(e.keyCode === 65 && (e.ctrlKey || e.metaKey));

package/src/components/Toast.vue

@@ -105,12 +105,13 @@ export default{
 <style module>
 
 .toast{
+	@apply absolute top-0 left-0 w-full pointer-events-none;
 }
 
 .item{
 	@apply flex p-3 gap-4;
 	@apply max-w-[90vw] md:max-w-[480px] bg-base-500 mx-auto rounded-xl border-[1px] border-border-100;
-	@apply min-h-[var(--h-cp)];
+	@apply min-h-[var(--h-cp)] pointer-events-auto;
 	z-index: 61;
 }