@mixd-id/web-scaffold 0.2.250801014 → 0.2.260801002

package/src/components/Tooltip.vue

@@ -0,0 +1,626 @@
+<template>
+
+  <!-- Singleton mode: the one layer that actually renders tooltips. Mounted
+       automatically by the tooltip controller, driven by `tooltipState`. -->
+  <Teleport v-if="singleton" to="body">
+    <Transition name="mx-tooltip">
+      <div v-if="state.open"
+           ref="tip"
+           :id="tooltipId"
+           role="tooltip"
+           class="mx-tooltip"
+           :class="tipClass"
+           :data-placement="resolvedPlacement"
+           :style="tipStyle">
+
+        <div class="mx-tooltip__surface">
+          <div class="mx-tooltip__content">
+            <div v-if="state.title" class="mx-tooltip__title">{{ state.title }}</div>
+            <div v-if="state.text" class="mx-tooltip__text">{{ state.text }}</div>
+          </div>
+          <kbd v-if="state.shortcut" class="mx-tooltip__kbd">{{ state.shortcut }}</kbd>
+        </div>
+
+        <span v-if="state.arrow !== false" class="mx-tooltip__arrow" :style="arrowStyle"></span>
+      </div>
+    </Transition>
+  </Teleport>
+
+  <!-- Wrapper mode: <Tooltip text="…"><button/></Tooltip> -->
+  <component v-else
+             :is="tag"
+             ref="trigger"
+             class="mx-tooltip-trigger"
+             @mouseenter="onEnter"
+             @mouseleave="onLeave"
+             @focus.capture="onFocus"
+             @blur.capture="onLeaveNow"
+             @click="onLeaveNow">
+    <slot></slot>
+  </component>
+
+</template>
+
+<script>
+
+import {
+  TOOLTIP_ID, TOOLTIP_OFFSET, TOOLTIP_PLACEMENTS,
+  hideTooltip, hideTooltipNow, isKeyboardFocus, mountTooltipLayer, showTooltip, tooltipState
+} from '../utils/tooltip.mjs'
+
+const VIEWPORT_PADDING = 8
+const ARROW_INSET = 14
+const OPPOSITE = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }
+
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value))
+
+export default {
+
+  name: 'Tooltip',
+
+  emits: [ 'show', 'hide', 'update:open' ],
+
+  props: {
+
+    /** Renders the shared tooltip layer instead of a trigger. Set by the controller. */
+    singleton: Boolean,
+
+    text: String,
+
+    /** Optional stronger first line, for a label + description tooltip. */
+    title: String,
+
+    /** Optional keyboard hint rendered as a chip, e.g. `⌘S`. */
+    shortcut: String,
+
+    placement: {
+      type: String,
+      default: 'top' // top|bottom|left|right — flips automatically when it doesn't fit
+    },
+
+    variant: {
+      type: String,
+      default: 'base' // base|primary|secondary|accent|danger|success
+    },
+
+    /** Hover intent in ms before showing. `null` uses the shared default (400). */
+    delay: {
+      type: Number,
+      default: null
+    },
+
+    offset: {
+      type: Number,
+      default: TOOLTIP_OFFSET
+    },
+
+    maxWidth: {
+      type: [ Number, String ],
+      default: null
+    },
+
+    arrow: {
+      type: Boolean,
+      default: true
+    },
+
+    disabled: Boolean,
+
+    /** Controlled mode — when set, hover/focus is ignored. */
+    open: {
+      type: Boolean,
+      default: null
+    },
+
+    tag: {
+      type: String,
+      default: 'span'
+    }
+
+  },
+
+  computed: {
+
+    state(){
+      return tooltipState
+    },
+
+    tooltipId(){
+      return TOOLTIP_ID
+    },
+
+    tipClass(){
+      return [
+        `mx-tooltip--${this.state.variant}`,
+        this.state.arrow === false ? 'mx-tooltip--no-arrow' : ''
+      ]
+        .filter(_ => _)
+        .join(' ')
+    },
+
+    tipStyle(){
+
+      const style = {
+        top: `${this.position.top}px`,
+        left: `${this.position.left}px`,
+        visibility: this.positioned ? null : 'hidden'
+      }
+
+      if(this.state.maxWidth){
+        style['--mx-tooltip-max-width'] = typeof this.state.maxWidth === 'number' ?
+          `${this.state.maxWidth}px` :
+          this.state.maxWidth
+      }
+
+      return style
+    },
+
+    active(){
+      if(this.singleton) return false
+      const el = this.anchorEl()
+      return !!el && this.state.open && this.state.anchor === el
+    },
+
+    options(){
+      return {
+        text: this.text,
+        title: this.title,
+        shortcut: this.shortcut,
+        placement: this.placement,
+        variant: this.variant,
+        delay: this.delay,
+        offset: this.offset,
+        maxWidth: this.maxWidth,
+        arrow: this.arrow
+      }
+    }
+
+  },
+
+  data(){
+    return {
+      position: { top: 0, left: 0 },
+      arrowStyle: {},
+      resolvedPlacement: 'top',
+      positioned: false
+    }
+  },
+
+  watch: {
+
+    'state.open'(open){
+      if(!this.singleton) return
+      open ? this.onOpened() : this.onClosed()
+    },
+
+    'state.anchor'(){
+      if(this.singleton && this.state.open) this.schedulePosition()
+    },
+
+    'state.text'(){
+      if(this.singleton && this.state.open) this.schedulePosition()
+    },
+
+    open(value){
+      if(this.singleton || value === null) return
+      value ? this.show() : this.hide(true)
+    },
+
+    active(value){
+      this.$emit(value ? 'show' : 'hide')
+      this.$emit('update:open', value)
+    }
+
+  },
+
+  mounted(){
+    if(!this.singleton){
+      mountTooltipLayer()
+      if(this.open) this.show()
+    }
+  },
+
+  beforeUnmount(){
+
+    if(this.singleton){
+      this.unbindViewportEvents()
+      return
+    }
+
+    hideTooltipNow(this.anchorEl())
+  },
+
+  methods: {
+
+    // --- wrapper mode ---
+
+    anchorEl(){
+      const trigger = this.$refs.trigger
+      return trigger && trigger.$el ? trigger.$el : trigger
+    },
+
+    /** Shows this tooltip programmatically. */
+    show(){
+      if(this.disabled) return
+      showTooltip(this.anchorEl(), this.options)
+    },
+
+    /** Hides this tooltip programmatically. */
+    hide(immediate){
+      immediate ? hideTooltipNow(this.anchorEl()) : hideTooltip(this.anchorEl())
+    },
+
+    onEnter(){
+      if(this.open !== null) return
+      this.show()
+    },
+
+    onLeave(){
+      if(this.open !== null) return
+      this.hide()
+    },
+
+    onLeaveNow(){
+      if(this.open !== null) return
+      this.hide(true)
+    },
+
+    onFocus(e){
+      if(this.open !== null) return
+      // Only on keyboard focus — a mouse click already had its hover chance.
+      if(!isKeyboardFocus(e.target)) return
+      this.show()
+    },
+
+    // --- singleton mode ---
+
+    onOpened(){
+      this.positioned = false
+      this.resolvedPlacement = this.state.placement
+      this.bindViewportEvents()
+      this.schedulePosition()
+    },
+
+    onClosed(){
+      this.unbindViewportEvents()
+      this.positioned = false
+    },
+
+    schedulePosition(){
+      this.$nextTick(this.updatePosition)
+    },
+
+    anchorRect(){
+
+      const anchor = this.state.anchor
+      if(!anchor) return null
+
+      if(typeof anchor.getBoundingClientRect === 'function'){
+        if(anchor.isConnected === false) return null
+        return anchor.getBoundingClientRect()
+      }
+
+      return anchor // plain rect-like { top, left, width, height, bottom, right }
+    },
+
+    updatePosition(){
+
+      const tip = this.$refs.tip
+      const rect = this.anchorRect()
+
+      if(!tip || !rect) return
+
+      const vw = document.documentElement.clientWidth
+      const vh = document.documentElement.clientHeight
+
+      // Anchor scrolled out of sight — nothing left to point at.
+      if(rect.bottom < 0 || rect.right < 0 || rect.top > vh || rect.left > vw){
+        hideTooltipNow()
+        return
+      }
+
+      const tw = tip.offsetWidth
+      const th = tip.offsetHeight
+      const offset = this.state.offset ?? TOOLTIP_OFFSET
+
+      let placement = TOOLTIP_PLACEMENTS.includes(this.state.placement) ? this.state.placement : 'top'
+
+      const space = {
+        top: rect.top,
+        bottom: vh - rect.bottom,
+        left: rect.left,
+        right: vw - rect.right
+      }
+      const needed = (placement === 'top' || placement === 'bottom' ? th : tw) + offset + VIEWPORT_PADDING
+
+      // Flip only when the opposite side genuinely has more room.
+      if(space[placement] < needed && space[OPPOSITE[placement]] > space[placement]){
+        placement = OPPOSITE[placement]
+      }
+
+      let top, left
+
+      if(placement === 'top' || placement === 'bottom'){
+        top  = placement === 'top' ? rect.top - th - offset : rect.bottom + offset
+        left = clamp(rect.left + rect.width / 2 - tw / 2, VIEWPORT_PADDING, Math.max(VIEWPORT_PADDING, vw - tw - VIEWPORT_PADDING))
+        this.arrowStyle = {
+          left: `${clamp(rect.left + rect.width / 2 - left, ARROW_INSET, Math.max(ARROW_INSET, tw - ARROW_INSET))}px`
+        }
+      }
+      else{
+        left = placement === 'left' ? rect.left - tw - offset : rect.right + offset
+        top  = clamp(rect.top + rect.height / 2 - th / 2, VIEWPORT_PADDING, Math.max(VIEWPORT_PADDING, vh - th - VIEWPORT_PADDING))
+        this.arrowStyle = {
+          top: `${clamp(rect.top + rect.height / 2 - top, ARROW_INSET, Math.max(ARROW_INSET, th - ARROW_INSET))}px`
+        }
+      }
+
+      this.resolvedPlacement = placement
+      this.position = { top: Math.round(top), left: Math.round(left) }
+      this.positioned = true
+    },
+
+    onViewportChange(){
+      if(this.frame) return
+      this.frame = requestAnimationFrame(() => {
+        this.frame = null
+        if(this.state.open) this.updatePosition()
+      })
+    },
+
+    onKeydown(e){
+      if(e.key === 'Escape') hideTooltipNow()
+    },
+
+    bindViewportEvents(){
+      if(this.bound) return
+      this.bound = true
+      window.addEventListener('scroll', this.onViewportChange, { capture: true, passive: true })
+      window.addEventListener('resize', this.onViewportChange, { passive: true })
+      window.addEventListener('keydown', this.onKeydown)
+    },
+
+    unbindViewportEvents(){
+      if(!this.bound) return
+      this.bound = false
+      if(this.frame){
+        cancelAnimationFrame(this.frame)
+        this.frame = null
+      }
+      window.removeEventListener('scroll', this.onViewportChange, { capture: true })
+      window.removeEventListener('resize', this.onViewportChange)
+      window.removeEventListener('keydown', this.onKeydown)
+    }
+
+  }
+
+}
+
+</script>
+
+<style>
+
+/* Deliberately global (not `module`): a single layer renders every tooltip, and
+   apps should be able to restyle it by overriding these custom properties. */
+
+.mx-tooltip{
+  --mx-tooltip-max-width: 260px;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--mx-tooltip-z, 9999);
+  pointer-events: none;
+  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .18)) drop-shadow(0 1px 3px rgba(0, 0, 0, .14));
+  will-change: transform, opacity;
+}
+
+html[data-theme="dark"] .mx-tooltip{
+  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55)) drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
+}
+
+.mx-tooltip__surface{
+  @apply bg-base-500 border-border-100;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: var(--mx-tooltip-max-width);
+  padding: 6px 9px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 8px;
+}
+
+.mx-tooltip__arrow{
+  @apply bg-base-500 border-border-100;
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 1.5px;
+}
+
+.mx-tooltip__content{
+  min-width: 0;
+}
+
+.mx-tooltip__title,
+.mx-tooltip__text{
+  @apply text-text;
+  font-size: 12px;
+  line-height: 1.45;
+  text-align: left;
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+.mx-tooltip__title{
+  font-weight: 600;
+  letter-spacing: .01em;
+}
+
+.mx-tooltip__title + .mx-tooltip__text{
+  @apply text-text-400;
+  margin-top: 1px;
+  font-size: 11.5px;
+}
+
+.mx-tooltip__kbd{
+  @apply bg-base-300 text-text-400;
+  flex: none;
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 10.5px;
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: .02em;
+}
+
+/* Variants: the theme's own tones. `-50` is the far end of each scale, so it
+   stays readable on `-500` in both the light and the dark palette. */
+
+.mx-tooltip--primary .mx-tooltip__surface,
+.mx-tooltip--primary .mx-tooltip__arrow{
+  @apply bg-primary-500 border-primary-400;
+}
+.mx-tooltip--primary .mx-tooltip__title,
+.mx-tooltip--primary .mx-tooltip__text{
+  @apply text-primary-50;
+}
+.mx-tooltip--primary .mx-tooltip__title + .mx-tooltip__text{
+  @apply text-primary-100;
+}
+.mx-tooltip--primary .mx-tooltip__kbd{
+  @apply bg-primary-600 text-primary-50;
+}
+
+.mx-tooltip--secondary .mx-tooltip__surface,
+.mx-tooltip--secondary .mx-tooltip__arrow{
+  @apply bg-secondary-500 border-secondary-400;
+}
+.mx-tooltip--secondary .mx-tooltip__title,
+.mx-tooltip--secondary .mx-tooltip__text{
+  @apply text-secondary-50;
+}
+.mx-tooltip--secondary .mx-tooltip__title + .mx-tooltip__text{
+  @apply text-secondary-100;
+}
+.mx-tooltip--secondary .mx-tooltip__kbd{
+  @apply bg-secondary-600 text-secondary-50;
+}
+
+.mx-tooltip--accent .mx-tooltip__surface,
+.mx-tooltip--accent .mx-tooltip__arrow{
+  @apply bg-accent-500 border-accent-400;
+}
+.mx-tooltip--accent .mx-tooltip__title,
+.mx-tooltip--accent .mx-tooltip__text{
+  @apply text-accent-50;
+}
+.mx-tooltip--accent .mx-tooltip__title + .mx-tooltip__text{
+  @apply text-accent-100;
+}
+.mx-tooltip--accent .mx-tooltip__kbd{
+  @apply bg-accent-600 text-accent-50;
+}
+
+.mx-tooltip--danger .mx-tooltip__surface,
+.mx-tooltip--danger .mx-tooltip__arrow{
+  @apply bg-red-500 border-red-400;
+}
+.mx-tooltip--danger .mx-tooltip__title,
+.mx-tooltip--danger .mx-tooltip__text,
+.mx-tooltip--danger .mx-tooltip__title + .mx-tooltip__text,
+.mx-tooltip--danger .mx-tooltip__kbd{
+  @apply text-white;
+}
+.mx-tooltip--danger .mx-tooltip__kbd{
+  @apply bg-red-600;
+}
+
+.mx-tooltip--success .mx-tooltip__surface,
+.mx-tooltip--success .mx-tooltip__arrow{
+  @apply bg-lime-600 border-lime-500;
+}
+.mx-tooltip--success .mx-tooltip__title,
+.mx-tooltip--success .mx-tooltip__text,
+.mx-tooltip--success .mx-tooltip__title + .mx-tooltip__text,
+.mx-tooltip--success .mx-tooltip__kbd{
+  @apply text-white;
+}
+.mx-tooltip--success .mx-tooltip__kbd{
+  @apply bg-lime-700;
+}
+
+.mx-tooltip[data-placement="top"] .mx-tooltip__arrow{
+  bottom: -5px;
+  transform: translateX(-50%) rotate(45deg);
+}
+.mx-tooltip[data-placement="bottom"] .mx-tooltip__arrow{
+  top: -5px;
+  transform: translateX(-50%) rotate(45deg);
+}
+.mx-tooltip[data-placement="left"] .mx-tooltip__arrow{
+  right: -5px;
+  transform: translateY(-50%) rotate(45deg);
+}
+.mx-tooltip[data-placement="right"] .mx-tooltip__arrow{
+  left: -5px;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.mx-tooltip[data-placement="top"]{ transform-origin: bottom center; }
+.mx-tooltip[data-placement="bottom"]{ transform-origin: top center; }
+.mx-tooltip[data-placement="left"]{ transform-origin: right center; }
+.mx-tooltip[data-placement="right"]{ transform-origin: left center; }
+
+.mx-tooltip-enter-active{
+  transition: opacity .13s ease-out, transform .17s cubic-bezier(.16, 1, .3, 1);
+}
+
+.mx-tooltip-leave-active{
+  transition: opacity .1s ease-in, transform .1s ease-in;
+}
+
+.mx-tooltip-enter-from,
+.mx-tooltip-leave-to{
+  opacity: 0;
+  transform: scale(.96) translate3d(0, 3px, 0);
+}
+
+.mx-tooltip[data-placement="bottom"].mx-tooltip-enter-from,
+.mx-tooltip[data-placement="bottom"].mx-tooltip-leave-to{
+  transform: scale(.96) translate3d(0, -3px, 0);
+}
+
+.mx-tooltip[data-placement="left"].mx-tooltip-enter-from,
+.mx-tooltip[data-placement="left"].mx-tooltip-leave-to{
+  transform: scale(.96) translate3d(3px, 0, 0);
+}
+
+.mx-tooltip[data-placement="right"].mx-tooltip-enter-from,
+.mx-tooltip[data-placement="right"].mx-tooltip-leave-to{
+  transform: scale(.96) translate3d(-3px, 0, 0);
+}
+
+@media (prefers-reduced-motion: reduce){
+  .mx-tooltip-enter-active,
+  .mx-tooltip-leave-active{
+    transition: opacity .08s linear;
+  }
+  .mx-tooltip-enter-from,
+  .mx-tooltip-leave-to{
+    transform: none;
+  }
+}
+
+.mx-tooltip-trigger{
+  display: inline-flex;
+  max-width: 100%;
+}
+
+</style>

package/src/components/VirtualGrid.vue

@@ -272,7 +272,7 @@ export default{
 
 .virtualGrid{
   @apply flex-1 overflow-y-auto;
-  @apply md:border-[1px] border-border-50 md:bg-base-400;
+  @apply md:bg-base-400;
 }
 
 .scroller{
@@ -285,7 +285,7 @@ export default{
 .spacer{
   will-change: auto;
   position: relative;
-  @apply grid divide-y divide-border-50 border-t-[1px] border-border-50;
+  @apply grid;
 }
 
 .calc{

package/src/components/VirtualTable.vue

@@ -250,7 +250,7 @@ export default{
 
 		appearances: {
 			type: Object,
-			default: {}
+			default: () => ({})
 		},
 
     type: String,
@@ -927,7 +927,7 @@ export default{
 
 .comp{
 	@apply flex flex-col overflow-hidden;
-	@apply border-[1px] border-border-50 rounded-md bg-base-400;
+	@apply border-[1px] border-border-50 rounded-md bg-base-500;
 }
 
 .comp>*:last-child{
@@ -1031,8 +1031,9 @@ export default{
   @apply px-3 uppercase font-bold;
 }
 
+/* one step off .comp so the frozen header stays readable as its own pane */
 .freezed{
-  @apply bg-base-500;
+  @apply bg-base-400;
 }
 
 /* elevation cue on the frozen pane once the main pane is scrolled sideways;

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

@@ -67,6 +67,8 @@
 
 export default{
 
+  emits: [ 'apply' ],
+
   inject: [ 'alert', 'socketEmit2' ],
 
   props: {

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

@@ -52,7 +52,7 @@ export default{
 
 		templates: {
 			type: Array,
-			default: [
+			default: () => [
 				{
 					imageUrl: '/assets/templates/empty1.png',
 					layout: {