@mixd-id/web-scaffold 0.2.250801014 → 0.2.260801002

package/src/directives/tooltip.js

@@ -0,0 +1,131 @@
+// directives/tooltip.js
+//
+// `v-tooltip` — thin trigger layer on top of the shared tooltip controller.
+// All rendering lives in components/Tooltip.vue.
+//
+//   v-tooltip="'Save changes'"
+//   v-tooltip:bottom="'Save changes'"
+//   v-tooltip.bottom.light="'Save changes'"
+//   v-tooltip="{ title: 'Save', text: 'Writes to the server', shortcut: '⌘S' }"
+
+import {
+  TOOLTIP_PLACEMENTS, TOOLTIP_TOUCH_DELAY, TOOLTIP_TOUCH_TIMEOUT, TOOLTIP_VARIANTS,
+  hideTooltip, hideTooltipNow, isKeyboardFocus, mountTooltipLayer, normalizeTooltipOptions,
+  registerDisabledTarget, showTooltip, unregisterDisabledTarget
+} from '../utils/tooltip.mjs'
+
+const resolveOptions = (binding) => {
+
+  const defaults = {}
+
+  const placement = TOOLTIP_PLACEMENTS.find(_ => binding.modifiers[_]) ||
+    (TOOLTIP_PLACEMENTS.includes(binding.arg) ? binding.arg : null)
+  if(placement) defaults.placement = placement
+
+  const variant = TOOLTIP_VARIANTS.find(_ => binding.modifiers[_])
+  if(variant) defaults.variant = variant
+
+  if(binding.modifiers.now) defaults.delay = 0
+
+  return normalizeTooltipOptions(binding.value, defaults)
+}
+
+const isDisabled = (el) => el.disabled === true || el.getAttribute('aria-disabled') === 'true'
+
+export default {
+
+  mounted(el, binding){
+
+    if(typeof document === 'undefined') return
+
+    mountTooltipLayer()
+
+    const ctx = {
+      options: resolveOptions(binding),
+      touchTimer: null,
+      touchTimeout: null
+    }
+
+    ctx.show = () => {
+      if(!ctx.options.text && !ctx.options.title) return
+      showTooltip(el, ctx.options)
+    }
+
+    ctx.hide = () => hideTooltip(el)
+
+    const hideNow = () => {
+      clearTimeout(ctx.touchTimer)
+      clearTimeout(ctx.touchTimeout)
+      hideTooltipNow(el)
+    }
+
+    const onFocus = () => {
+      // Keyboard focus only — pointer users already get it on hover.
+      if(!isKeyboardFocus(el)) return
+      ctx.show()
+    }
+
+    const onTouchStart = () => {
+      clearTimeout(ctx.touchTimer)
+      ctx.touchTimer = setTimeout(() => {
+        ctx.show()
+        ctx.touchTimeout = setTimeout(hideNow, TOOLTIP_TOUCH_TIMEOUT)
+      }, TOOLTIP_TOUCH_DELAY)
+    }
+
+    ctx.sync = () => {
+      // Disabled controls swallow mouse events; the controller hit-tests those.
+      if(isDisabled(el) && (ctx.options.text || ctx.options.title)){
+        registerDisabledTarget(el, { show: ctx.show, hide: ctx.hide })
+      }
+      else{
+        unregisterDisabledTarget(el)
+      }
+    }
+
+    el.addEventListener('mouseenter', ctx.show)
+    el.addEventListener('mouseleave', ctx.hide)
+    el.addEventListener('click', hideNow)
+    el.addEventListener('focus', onFocus, true)
+    el.addEventListener('blur', hideNow, true)
+    el.addEventListener('touchstart', onTouchStart, { passive: true })
+    el.addEventListener('touchend', hideNow, { passive: true })
+    el.addEventListener('touchcancel', hideNow, { passive: true })
+
+    ctx.destroy = () => {
+      clearTimeout(ctx.touchTimer)
+      clearTimeout(ctx.touchTimeout)
+      unregisterDisabledTarget(el)
+      hideTooltipNow(el)
+      el.removeEventListener('mouseenter', ctx.show)
+      el.removeEventListener('mouseleave', ctx.hide)
+      el.removeEventListener('click', hideNow)
+      el.removeEventListener('focus', onFocus, true)
+      el.removeEventListener('blur', hideNow, true)
+      el.removeEventListener('touchstart', onTouchStart)
+      el.removeEventListener('touchend', hideNow)
+      el.removeEventListener('touchcancel', hideNow)
+    }
+
+    el._tooltip = ctx
+    ctx.sync()
+  },
+
+  updated(el, binding){
+
+    const ctx = el._tooltip
+    if(!ctx) return
+
+    ctx.options = resolveOptions(binding)
+    ctx.sync()
+
+    // Text removed while it was on screen.
+    if(!ctx.options.text && !ctx.options.title) hideTooltipNow(el)
+  },
+
+  unmounted(el){
+    el._tooltip?.destroy()
+    delete el._tooltip
+  }
+
+}

package/src/index.js

@@ -3,6 +3,7 @@ import {arrayPush, arrayRemove, arrayUnshift, downloadUrl, invokeAfterIdle, obse
 import dayjs from "dayjs";
 import {useDevice} from './hooks/device.js'
 import IntersectDirective from './directives/intersect';
+import TooltipDirective from './directives/tooltip';
 
 
 let _UNIQID = 0
@@ -253,105 +254,6 @@ export default{
 
   install: (app, options) => {
 
-    // Inject tooltip CSS once — independent of whether Tooltip.vue is ever mounted
-    if(typeof document !== 'undefined' && !document.getElementById('vt-styles')){
-      const s = document.createElement('style')
-      s.id = 'vt-styles'
-      s.textContent = `
-        .vt-tip{position:fixed;z-index:9999;font-size:.75rem;line-height:1rem;padding:3px 8px;
-          border-radius:6px;pointer-events:none;max-width:240px;word-break:break-word;
-          background:rgba(30,30,30,.92);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);
-          opacity:0;transition:opacity .12s ease;}
-        .vt-tip.vt-tip--on{opacity:1;}
-      `
-      document.head.appendChild(s)
-    }
-
-    const VT_OFFSET = 8
-
-    function vtPosition(tip, rect, placement){
-      const tw = tip.offsetWidth
-      const th = tip.offsetHeight
-      let top, left
-
-      switch(placement){
-        case 'bottom':
-          top  = rect.bottom + VT_OFFSET
-          left = rect.left + rect.width / 2 - tw / 2
-          break
-        case 'left':
-          top  = rect.top + rect.height / 2 - th / 2
-          left = rect.left - tw - VT_OFFSET
-          break
-        case 'right':
-          top  = rect.top + rect.height / 2 - th / 2
-          left = rect.right + VT_OFFSET
-          break
-        default: // top
-          top  = rect.top  - th - VT_OFFSET
-          left = rect.left + rect.width / 2 - tw / 2
-      }
-
-      // Clamp to viewport
-      tip.style.top  = Math.max(8, Math.min(window.innerHeight - th - 8, top))  + 'px'
-      tip.style.left = Math.max(8, Math.min(window.innerWidth  - tw - 8, left)) + 'px'
-    }
-
-    app.directive('tooltip', {
-      mounted(el, binding){
-        if(!binding.value) return
-
-        const tip = document.createElement('div')
-        tip.className = 'vt-tip'
-        document.body.appendChild(tip)
-
-        let timer = null
-
-        const show = () => {
-          const value     = binding.value
-          const text      = typeof value === 'string' ? value : value?.text
-          const placement = (typeof value === 'object' ? value?.placement : null) || binding.arg || 'top'
-          if(!text) return
-
-          // XSS-safe: textContent instead of innerHTML
-          tip.textContent = text
-          vtPosition(tip, el.getBoundingClientRect(), placement)
-          tip.classList.add('vt-tip--on')
-        }
-
-        const hide = () => {
-          clearTimeout(timer)
-          tip.classList.remove('vt-tip--on')
-        }
-
-        const onEnter = () => {
-          clearTimeout(timer)
-          timer = setTimeout(show, 400)
-        }
-
-        el.addEventListener('mouseenter', onEnter)
-        el.addEventListener('mouseleave', hide)
-        el.addEventListener('click',      hide)
-
-        // Store cleanup so unmounted can remove everything
-        el._vtCleanup = () => {
-          clearTimeout(timer)
-          el.removeEventListener('mouseenter', onEnter)
-          el.removeEventListener('mouseleave', hide)
-          el.removeEventListener('click',      hide)
-          tip.remove()
-        }
-      },
-
-      updated(el, binding){
-        // Nothing needed — show() reads binding.value at call time
-      },
-
-      unmounted(el){
-        el._vtCleanup?.()
-      }
-    })
-
     const privateVars = {}
 
     app.config.globalProperties.$t = t => t
@@ -428,7 +330,7 @@ export default{
         })
 
         resizeEvents.forEach((fn) => fn())
-      }, 100)
+      }, { delay: 100, flushOnExit: false })
       window.addEventListener('resize', onWindowResize)
 
       app.config.globalProperties.$addResizeListener = (el, fn) => {
@@ -495,141 +397,15 @@ export default{
     }
 
     app.directive('intersect', IntersectDirective)
-
-    app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
-    app.component('Paragraph', defineAsyncComponent(() => import("./components/Paragraph.vue")))
-    app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
-    app.component('Article', defineAsyncComponent(() => import("./components/Article.vue")))
-    app.component('BarChart', defineAsyncComponent(() => import("./components/BarChart.vue")))
-    app.component('LineChart', defineAsyncComponent(() => import("./components/LineChart.vue")))
-    app.component('PieChart', defineAsyncComponent(() => import("./components/PieChart.vue")))
-    app.component('DoughnutChart', defineAsyncComponent(() => import("./components/DoughnutChart.vue")))
-    app.component('Dashboard', defineAsyncComponent(() => import("./components/Dashboard.vue")))
-    app.component('AIDashboard', defineAsyncComponent(() => import("./components/AIDashboard.vue")))
-    app.component('AIChat', defineAsyncComponent(() => import("./components/AIChat.vue")))
-    app.component('Metric', defineAsyncComponent(() => import("./components/Metric.vue")))
-    app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
-    app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
-    app.component('Card', defineAsyncComponent(() => import("./components/Card.vue")))
-    app.component('ColorPicker', defineAsyncComponent(() => import("./components/ColorPicker.vue")))
-    app.component('Confirm', defineAsyncComponent(() => import("./components/Confirm.vue")))
-    app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))
-    app.component('Checkbox', defineAsyncComponent(() => import("./components/Checkbox.vue")))
-    app.component('CodeEditor', defineAsyncComponent(() => import("./components/CodeEditor.vue")))
-    app.component('SvgEditor', defineAsyncComponent(() => import("./components/SvgEditor.vue")))
-    app.component('CopyToClipboard', defineAsyncComponent(() => import("./components/CopyToClipboard.vue")))
-    app.component('Countdown', defineAsyncComponent(() => import("./components/Countdown.vue")))
-    app.component('Datepicker', defineAsyncComponent(() => import("./components/Datepicker.vue")))
-    app.component('Dropdown', defineAsyncComponent(() => import("./components/Dropdown.vue")))
-    app.component('Gmaps', defineAsyncComponent(() => import("./components/Gmaps.vue")))
-    app.component('HTMLEditor', defineAsyncComponent(() => import("./components/HTMLEditor.vue")))
-    app.component('Switch', defineAsyncComponent(() => import("./components/Switch.vue")))
-    app.component('IconMenu2', defineAsyncComponent(() => import("./components/IconMenu2.vue")))
-    app.component('Image', defineAsyncComponent(() => import("./components/Image.vue")))
-    app.component('ImageUploader', defineAsyncComponent(() => import("./components/ImageUploader.vue")))
-    app.component('Video', defineAsyncComponent(() => import("./components/Video.vue")))
-    app.component('ImagePreview', defineAsyncComponent(() => import("./components/ImagePreview.vue")))
-    app.component('Link', defineAsyncComponent(() => import("./components/Link.vue")))
-    app.component('ListItem', defineAsyncComponent(() => import("./components/ListItem.vue")))
-    app.component('MultiDropdown', defineAsyncComponent(() => import("./components/MultiDropdown.vue")))
-    app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
-    app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
-    app.component('ContextMenuItem', defineAsyncComponent(() => import("./components/ContextMenuItem.vue")))
-    app.component('FAQ', defineAsyncComponent(() => import("./widgets/FAQ.vue")))
-    app.component('Flex', defineAsyncComponent(() => import("./components/Flex.vue")))
-    app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))
-    app.component('OTPField', defineAsyncComponent(() => import("./components/OTPField.vue")))
-    app.component('Radio', defineAsyncComponent(() => import("./components/Radio.vue")))
-    app.component('Tabs', defineAsyncComponent(() => import("./components/Tabs.vue")))
-    app.component('Textbox', defineAsyncComponent(() => import("./components/Textbox.vue")))
-    app.component('Textarea', defineAsyncComponent(() => import("./components/Textarea.vue")))
-    app.component('Timepicker', defineAsyncComponent(() => import("./components/Timepicker.vue")))
-    app.component('Datetimepicker', defineAsyncComponent(() => import("./components/Datetimepicker.vue")))
-    app.component('Toast', defineAsyncComponent(() => import("./components/Toast.vue")))
-    app.component('TreeView', defineAsyncComponent(() => import("./components/TreeView.vue")))
-    app.component('TreeViewItem', defineAsyncComponent(() => import("./components/TreeViewItem.vue")))
-    app.component('Uploader', defineAsyncComponent(() => import("./components/Uploader.vue")))
-    app.component('VirtualGrid', defineAsyncComponent(() => import("./components/VirtualGrid.vue")))
-    app.component('VirtualTable', defineAsyncComponent(() => import("./components/VirtualTable.vue")))
-    app.component('Slider', defineAsyncComponent(() => import("./components/Slider.vue")))
-    app.component('Table', defineAsyncComponent(() => import("./components/Table.vue")))
-    app.component('Thumbnail', defineAsyncComponent(() => import("./components/Thumbnail.vue")))
-    app.component('Testimonial', defineAsyncComponent(() => import("./components/Testimonial.vue")))
-    app.component('TextBlock', defineAsyncComponent(() => import("./components/TextBlock.vue")))
-    app.component('YoutubeVideo', defineAsyncComponent(() => import("./components/YoutubeVideo.vue")))
-    app.component('Svg', defineAsyncComponent(() => import("./components/Svg.vue")))
-    app.component('TextWithTag', defineAsyncComponent(() => import("./components/TextWithTag.vue")))
-    app.component('List', defineAsyncComponent(() => import("./components/List.vue")))
-    app.component('Chart', defineAsyncComponent(() => import("./components/Chart.vue")))
-
-    app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
-    app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
-    app.component('BlockSetting', defineAsyncComponent(() => import("./widgets/BlockSetting.vue")))
-    app.component('ButtonSetting', defineAsyncComponent(() => import("./widgets/ButtonSetting.vue")))
-    app.component('CarouselSetting', defineAsyncComponent(() => import("./widgets/CarouselSetting.vue")))
-    app.component('CountdownSetting', defineAsyncComponent(() => import("./widgets/CountdownSetting.vue")))
-    app.component('ComponentSetting', defineAsyncComponent(() => import("./widgets/ComponentSetting.vue")))
-    app.component('ComponentSetting2', defineAsyncComponent(() => import("./widgets/ComponentSetting2.vue")))
-    app.component('ContactForm', defineAsyncComponent(() => import("./widgets/ContactForm.vue")))
-    app.component('ContactFormSetting', defineAsyncComponent(() => import("./widgets/ContactFormSetting.vue")))
-    app.component('EmbeddedVideo', defineAsyncComponent(() => import("./widgets/EmbeddedVideo.vue")))
-    app.component('EmbeddedVideoSetting', defineAsyncComponent(() => import("./widgets/EmbeddedVideoSetting.vue")))
-    app.component('FAQSetting', defineAsyncComponent(() => import("./widgets/FAQSetting.vue")))
-    app.component('FeatureList', defineAsyncComponent(() => import("./widgets/FeatureList.vue")))
-    app.component('FeatureListSetting', defineAsyncComponent(() => import("./widgets/FeatureListSetting.vue")))
-    app.component('BackgroundColorSetting', defineAsyncComponent(() => import("./widgets/BackgroundColorSetting.vue")))
-    app.component('BorderColorSetting', defineAsyncComponent(() => import("./widgets/BorderColorSetting.vue")))
-    app.component('FlexSetting', defineAsyncComponent(() => import("./widgets/FlexSetting.vue")))
-    app.component('GridSetting', defineAsyncComponent(() => import("./widgets/GridSetting.vue")))
-    app.component('Header2', defineAsyncComponent(() => import("./widgets/Header2.vue")))
-    app.component('Header2Setting', defineAsyncComponent(() => import("./widgets/Header2Setting.vue")))
-    app.component('IconList', defineAsyncComponent(() => import("./widgets/IconList.vue")))
-    app.component('IconListSetting', defineAsyncComponent(() => import("./widgets/IconListSetting.vue")))
-    app.component('LinkSetting', defineAsyncComponent(() => import("./widgets/LinkSetting.vue")))
-    app.component('ImageSetting', defineAsyncComponent(() => import("./widgets/ImageSetting.vue")))
-    app.component('MultiValueSetting', defineAsyncComponent(() => import("./widgets/MultiValueSetting.vue")))
-    app.component('MultiValueSetting2', defineAsyncComponent(() => import("./widgets/MultiValueSetting2.vue")))
-    app.component('PositionSetting', defineAsyncComponent(() => import("./widgets/PositionSetting.vue")))
-    app.component('ParagraphSetting', defineAsyncComponent(() => import("./widgets/ParagraphSetting.vue")))
-    app.component('Review', defineAsyncComponent(() => import("./widgets/Review.vue")))
-    app.component('ReviewSetting', defineAsyncComponent(() => import("./widgets/ReviewSetting.vue")))
-    app.component('Share', defineAsyncComponent(() => import("./widgets/Share.vue")))
-    app.component('ShareSetting', defineAsyncComponent(() => import("./widgets/ShareSetting.vue")))
-    app.component('TableSetting', defineAsyncComponent(() => import("./widgets/TableSetting.vue")))
-    app.component('ThumbnailSetting', defineAsyncComponent(() => import("./widgets/ThumbnailSetting.vue")))
-    app.component('TestimonialSetting', defineAsyncComponent(() => import("./widgets/TestimonialSetting.vue")))
-    app.component('TextBlockSetting', defineAsyncComponent(() => import("./widgets/TextBlockSetting.vue")))
-    app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
-    app.component('WebComponentSelector', defineAsyncComponent(() => import("./widgets/WebComponentSelector.vue")))
-    app.component('WebDatasourceSelector', defineAsyncComponent(() => import("./widgets/WebDatasourceSelector.vue")))
-    app.component('WebLayoutSelector', defineAsyncComponent(() => import("./widgets/WebLayoutSelector.vue")))
-    app.component('ModalSetting', defineAsyncComponent(() => import("./widgets/ModalSetting.vue")))
-    app.component('DataListSetting', defineAsyncComponent(() => import("./widgets/DataListSetting.vue")))
-    app.component('YoutubeVideoSetting', defineAsyncComponent(() => import("./widgets/YoutubeVideoSetting.vue")))
-    app.component('SvgSetting', defineAsyncComponent(() => import("./widgets/SvgSetting.vue")))
-    app.component('PresetBar', defineAsyncComponent(() => import("./widgets/PresetBar.vue")))
-    app.component('PresetSelector', defineAsyncComponent(() => import("./widgets/PresetSelector.vue")))
-    app.component('PresetBarPivotColumnEdit', defineAsyncComponent(() => import("./widgets/PresetBarPivotColumnEdit.vue")))
-    app.component('ColumnSelector', defineAsyncComponent(() => import("./widgets/ColumnSelector.vue")))
-    app.component('Text', defineAsyncComponent(() => import("./components/Text.vue")))
-    app.component('MenuItem1', defineAsyncComponent(() => import("./components/MenuItem1.vue")))
-    app.component('MenuItem1Setting', defineAsyncComponent(() => import("./widgets/MenuItem1Setting.vue")))
-    app.component('CollapsiblePanel', defineAsyncComponent(() => import("./components/CollapsiblePanel.vue")))
-    app.component('CollapsiblePanelSetting', defineAsyncComponent(() => import("./widgets/CollapsiblePanelSetting.vue")))
-    app.component('LLMChat', defineAsyncComponent(() => import("./widgets/LLMChat.vue")))
-
-    app.component('AccountIcon', defineAsyncComponent(() => import("./components/AccountIcon.vue")))
-    app.component('CartIcon', defineAsyncComponent(() => import("./components/CartIcon.vue")))
-
-    app.component('SearchModal', defineAsyncComponent(() => import("./components/SearchModal.vue")))
-    app.component('SearchModalSetting', defineAsyncComponent(() => import("./widgets/SearchModalSetting.vue")))
-
-    app.component('Cart', defineAsyncComponent(() => import("./components/Cart.vue")))
-    app.component('CartSetting', defineAsyncComponent(() => import("./widgets/CartSetting.vue")))
-
-    app.component('TreeMenu', defineAsyncComponent(() => import("./components/TreeMenu.vue")))
-    app.component('MarkdownEdit', defineAsyncComponent(() => import("./components/MarkdownEdit.vue")))
-    app.component('MarkdownPreview', defineAsyncComponent(() => import("./components/MarkdownPreview.vue")))
+    app.directive('tooltip', TooltipDirective)
+
+    // Auto-register every component in ./components as a lazy global component,
+    // named after its file (e.g. Button.vue -> <Button>).
+    const componentModules = import.meta.glob('./components/*.vue')
+    for(const path in componentModules){
+      const name = path.split('/').pop().replace(/\.vue$/, '')
+      app.component(name, defineAsyncComponent(componentModules[path]))
+    }
   }
 
 }

package/src/themes/default/index.js

@@ -253,7 +253,23 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
           900: "var(--secondary-900)",
           DEFAULT: "var(--secondary-500)"
         },
+        // Third tone for tri-tone themes. Themes that only define two tones
+        // fall back to secondary, so accent-* is always safe to use.
+        accent: {
+          50: "var(--accent-50, var(--secondary-50))",
+          100: "var(--accent-100, var(--secondary-100))",
+          200: "var(--accent-200, var(--secondary-200))",
+          300: "var(--accent-300, var(--secondary-300))",
+          400: "var(--accent-400, var(--secondary-400))",
+          500: "var(--accent-500, var(--secondary-500))",
+          600: "var(--accent-600, var(--secondary-600))",
+          700: "var(--accent-700, var(--secondary-700))",
+          800: "var(--accent-800, var(--secondary-800))",
+          900: "var(--accent-900, var(--secondary-900))",
+          DEFAULT: "var(--accent-500, var(--secondary-500))"
+        },
         base: {
+          200: "var(--base-200, var(--base-400))",
           300: "var(--base-300)",
           400: "var(--base-400)",
           500: "var(--base-500)",