@mixd-id/web-scaffold 0.2.250801014 → 0.2.260801002

package/src/components/ImagePreview.vue

@@ -1,80 +1,61 @@
 <template>
-	<Card :float="true" :state="isOpen" width="400" height="400" :class="$style.previewModal">
+	<Card ref="card" :float="true" width="400" height="400" :class="$style.previewModal">
 		<div class="flex-1 flex flex-col gap-3">
 			<div class="flex flex-row gap-4 justify-end items-center p-3 pr-6">
         <slot name="moreButtons"></slot>
 				<a v-if="canDownload" :href="imageUrl" target="_blank" download>
           <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" class="fill-text" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z"/></svg>
         </a>
-				<button @click="close">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="fill-text" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
-        </button>
 			</div>
 			<div class="flex items-center justify-center">
-				<img :src="imageUrl" class="max-h-[75vh]"/>
+				<img v-if="imageUrl" :src="imageUrl" class="max-h-[75vh]"/>
 			</div>
 		</div>
 	</Card>
 </template>
 
-<script>
+<script setup>
 
-export default{
+import {computed, ref, useTemplateRef} from "vue";
 
-	props: {
+const props = defineProps({
 
-		download: {
-			type: [ Boolean, String ],
-			default: false
-		},
-
-
-
-	},
-
-  computed: {
-
-    canDownload(){
-      return this.download || this.downloadable
-    }
-
-  },
+	download: {
+		type: [ Boolean, String ],
+		default: false
+	}
 
-	data(){
-		return {
-      downloadable: false,
-			isOpen: false,
-			imageUrl: null
-		}
-	},
+})
 
-	methods: {
+const card = useTemplateRef('card')
+const imageUrl = ref(null)
+const downloadable = ref(false)
 
-		open(imageUrl, opt = {}){
-			this.imageUrl = imageUrl
-			this.isOpen = true
-      this.downloadable = opt.download || this.downloadable
-			window.addEventListener('keyup', this.onKeyUp)
-		},
+const canDownload = computed(() => props.download || downloadable.value)
 
-		close(){
-			this.isOpen = false
-			this.imageUrl = null
-			window.removeEventListener('keyup', this.onKeyUp)
-		},
+function onKeyUp(e){
+	if(e.key !== 'Escape') return
 
-		onKeyUp(e){
-			if(e.keyCode === 27){
-				e.preventDefault()
-				e.stopPropagation()
-				this.close()
-			}
-		}
+	e.preventDefault()
+	e.stopPropagation()
+	close()
+}
 
-	}
+function open(url, opt = {}){
+	imageUrl.value = url
+	downloadable.value = opt.download || downloadable.value
+	card.value.open()
+	window.addEventListener('keyup', onKeyUp)
+}
 
+function close(){
+	card.value.close()
+	imageUrl.value = null
+	window.removeEventListener('keyup', onKeyUp)
 }
 
+defineExpose({ open, close })
+
 </script>
 
 <style module>

package/src/components/List.vue

@@ -95,7 +95,7 @@
                 <slot name="right-toolbar">
                   <div class="hidden md:flex flex-row gap-2" v-if="Boolean(toolbar)">
                     <Textbox v-if="canSearch"
-                             class="flex-1 md:w-[240px]"
+                             class="flex-1 md:w-[240px] bg-base-500"
                              placeholder="Search..."
                              clearable="1"
                              maxlength="100"
@@ -108,6 +108,22 @@
                         </div>
                       </template>
                     </Textbox>
+
+                    <div v-if="canToggleView" :class="$style.viewToggle">
+                      <button type="button"
+                              title="Grid view"
+                              :class="presetView === 'grid' ? $style.viewOn : $style.viewOff"
+                              @click="setView('grid')">
+                        <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M96 0H32C14.33 0 0 14.33 0 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V32C128 14.33 113.7 0 96 0zM288 0H224C206.3 0 192 14.33 192 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V32C320 14.33 305.7 0 288 0zM480 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V32C512 14.33 497.7 0 480 0zM96 384H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64C128 398.3 113.7 384 96 384zM288 384H224c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64C320 398.3 305.7 384 288 384zM480 384h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64C512 398.3 497.7 384 480 384zM96 192H32C14.33 192 0 206.3 0 224v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V224C128 206.3 113.7 192 96 192zM288 192H224C206.3 192 192 206.3 192 224v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V224C320 206.3 305.7 192 288 192zM480 192h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V224C512 206.3 497.7 192 480 192z"/></svg>
+                      </button>
+                      <button type="button"
+                              title="Table view"
+                              :class="presetView === 'table' ? $style.viewOn : $style.viewOff"
+                              @click="setView('table')">
+                        <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M448 32H64.05C28.7 32 .0492 60.65 .0492 96v320c0 35.35 28.65 64 64 64h383.1c35.35 0 64-28.65 64-64V96C512 60.65 483.4 32 448 32zM224 416H64v-96h160V416zM224 256H64V160h160V256zM448 416h-160v-96h160V416zM448 256h-160V160h160V256z"/></svg>
+                      </button>
+                    </div>
+
                     <button v-if="presetView === 'table' && canAssist"
                             type="button" class="p-1"
                             :title="assistant.open ? 'Hide AI Assistant' : 'Show AI Assistant'"
@@ -151,7 +167,7 @@
               <VirtualTable
                   ref="table"
                   :columns="columns"
-                  class="flex-1 bg-base-300"
+                  class="flex-1"
                   :items="dataItems"
                   :enumCache="enumCache"
                   :freeze-left="freezeLeft"
@@ -309,11 +325,11 @@
 
 import VirtualTable from "./VirtualTable.vue";
 import VirtualGrid from "./VirtualGrid.vue";
-import PresetSelector from "../widgets/PresetSelector.vue";
+import PresetSelector from "./PresetSelector.vue";
 import {generatePivotColumns, generateTotalColumns, getPresetUid, parsePivotKey, pickColumns, setupConfig, sortsFn} from "../utils/preset-selector.mjs";
-import PresetBar from "../widgets/PresetBar.vue";
+import PresetBar from "./PresetBar.vue";
 import {invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
-import LLMChat from "../widgets/LLMChat.vue";
+import LLMChat from "./LLMChat.vue";
 
 export default{
 
@@ -367,11 +383,11 @@ export default{
     itemsFn: Function,
     onSignalFn: Function,
     searchable: {
-      type: undefined,
+      type: [ Boolean, String ],
       default: true
     },
     useAssistant: {
-      type: undefined,
+      type: [ Boolean, String ],
       default: false
     }
   },
@@ -711,6 +727,11 @@ export default{
       }
     },
 
+    setView(value){
+      if(this.preset)
+        this.preset.view = value
+    },
+
     savePreset: invokeAfterIdle(function() {
       if(this.presetKey) {
         this.useSocket().send(this.presetSrc,
@@ -812,7 +833,7 @@ export default{
         if(!this._pivotReload){
           this._pivotReload = invokeAfterIdle(() => {
             if(this.pivotEnabled) this.load()
-          }, { delay: 800 })
+          }, { delay: 800, flushOnExit: false })
         }
         this._pivotReload()
         this.$emit('signal', event, items)
@@ -1165,6 +1186,10 @@ export default{
           (this.view ?? this.preset.view)
     },
 
+    canToggleView(){
+      return !this.view && !this.pivotEnabled
+    },
+
     configParams(){
       if(!this.cConfig.params)
         this.cConfig.params = {}
@@ -1313,6 +1338,18 @@ export default{
 
 <style module>
 
+.viewToggle{
+  @apply flex flex-row items-center rounded-md overflow-hidden border-[1px] border-border-50 px-1;
+}
+
+.viewOn{
+  @apply p-2 px-3 bg-primary fill-white rounded-md;
+}
+
+.viewOff{
+  @apply p-2 px-3 bg-base-400 fill-text-300 hover:fill-primary;
+}
+
 .resize1{
   @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
 }

package/src/components/MarkdownEdit.vue

@@ -314,7 +314,7 @@ export default{
 
 .comp{
 	@apply flex flex-col divide-y divide-border-50 relative;
-	@apply border-[1px] border-border-200 bg-base-300 hover:border-border-300 rounded-lg;
+	@apply border-[1px] border-border-200 bg-base-200 hover:border-border-300 rounded-lg;
 }
 
 .toolbar{

package/src/components/MarkdownPreview.vue

@@ -93,7 +93,10 @@ const markedText = computed(() => {
   @apply rounded-2xl overflow-hidden;
 }
 .comp code{
-  @apply !bg-primary-100 p-1 text-sm;
+  @apply p-1 text-sm;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .comp code *{
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;

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

@@ -41,6 +41,7 @@
 </template>
 
 <script setup>
+defineEmits([ 'change' ])
 
 import {computed, inject} from "vue";
 import LinkSettingModal from "./LinkSettingModal.vue";

package/src/components/Metric.vue

@@ -1,15 +1,15 @@
 <template>
-  <div :class="$style.comp">
+  <div :class="[ $style.comp, compact ? $style.compact : '' ]">
 
     <div :class="$style.header">
-      <span :class="$style.label">{{ label || 'Metric' }}</span>
+      <span :class="$style.label" :title="label || 'Metric'">{{ label || 'Metric' }}</span>
       <div v-if="icon" :class="$style.iconWrap" v-html="icon"></div>
     </div>
 
     <div :class="$style.valueWrap">
-      <span :class="$style.prefix">{{ prefix }}</span>
+      <span v-if="prefix" :class="$style.prefix">{{ prefix }}</span>
       <span :class="$style.value">{{ formattedValue }}</span>
-      <span :class="$style.suffix">{{ suffix }}</span>
+      <span v-if="suffix" :class="$style.suffix">{{ suffix }}</span>
     </div>
 
   </div>
@@ -31,6 +31,9 @@ export default {
     suffix:      { type: String,  default: '' },
     decimals:    { type: Number,  default: 0 },
     icon:        { type: String,  default: '' },
+    // tighter padding and type, for dense rows where the tile is a detail
+    // rather than the headline
+    compact:     { type: Boolean, default: false },
   },
 
   computed: {
@@ -78,7 +81,9 @@ export default {
 }
 
 .label {
-  @apply text-sm text-text-400 leading-tight;
+  @apply text-xs text-text-400 leading-tight;
+  /* tiles sit in a grid — a wrapping label would make one row taller than the rest */
+  @apply min-w-0 text-ellipsis-nowrap;
 }
 
 .iconWrap {
@@ -86,7 +91,7 @@ export default {
 }
 
 .valueWrap {
-  @apply flex items-baseline gap-1 flex-1;
+  @apply flex items-baseline gap-1 flex-wrap;
 }
 
 .prefix {
@@ -98,8 +103,26 @@ export default {
 }
 
 .suffix {
-  @apply text-lg text-text-400;
+  @apply text-xs text-text-400 relative top-[-1px] ml-[1px];
+}
+
+.compact {
+  @apply p-2 px-3 gap-0.5 min-h-0;
+}
+
+.compact .label {
+  @apply text-xs;
+}
+
+/* not `text-base` — this theme has a `base` colour family, so that utility also
+   sets color: var(--base-500) and paints the value in the surface colour */
+.compact .value {
+  @apply text-lg;
 }
 
+.compact .prefix,
+.compact .suffix {
+  @apply text-xs;
+}
 
 </style>

package/src/components/MultiDropdown.vue

@@ -37,6 +37,8 @@
 
 export default{
 
+  emits: [ 'update:modelValue' ],
+
   props: {
     containerClass: String,
 
@@ -112,7 +114,7 @@ export default{
 
 .dropdown{
   @apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-  @apply border-[1px] border-border-200 bg-base-300;
+  @apply border-[1px] border-border-200 bg-base-200;
 }
 .dropdown:not(.readonly){
   @apply hover:border-border-300;

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

@@ -40,7 +40,7 @@ export default{
 
     keys: {
       type: Array,
-      default: [
+      default: () => [
         [ 'p-' ],
         [ 'px-', 'py-' ],
         [ 'pl-', 'pt-', 'pr-', 'pb-' ]
@@ -49,7 +49,7 @@ export default{
 
     values: {
       type: Array,
-      default: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
+      default: () => [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
     },
 
     viewType: String,

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

@@ -53,7 +53,7 @@ export default{
 
     keys: {
       type: Array,
-      default: [
+      default: () => [
         [ 'p-' ],
         [ 'px-', 'py-' ],
         [ 'pl-', 'pt-', 'pr-', 'pb-' ]
@@ -62,7 +62,7 @@ export default{
 
     values: {
       type: Array,
-      default: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto' ]
+      default: () => [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto' ]
     },
 
     viewType: String,

package/src/components/OTPField.vue

@@ -19,6 +19,8 @@
 
 export default{
 
+  emits: [ 'update:modelValue' ],
+
 	props: {
 
 		modelValue: String,
@@ -115,7 +117,7 @@ export default{
 }
 
 .input{
-  @apply outline-none text-center bg-base-300 text-lg;
+  @apply outline-none text-center bg-base-200 text-lg;
   @apply border-[1px] border-border-200 rounded-lg p-3;
 }
 .input:focus{