@vielzeug/refine 2.4.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -18
- package/dist/accordion-item.cjs.map +1 -1
- package/dist/accordion-item.js.map +1 -1
- package/dist/accordion.cjs.map +1 -1
- package/dist/accordion.js.map +1 -1
- package/dist/async.cjs +1 -1
- package/dist/async.cjs.map +1 -1
- package/dist/async.js +3 -3
- package/dist/async.js.map +1 -1
- package/dist/box.cjs.map +1 -1
- package/dist/box.js.map +1 -1
- package/dist/button.cjs +6 -4
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +11 -9
- package/dist/button.js.map +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.cjs.map +1 -1
- package/dist/card.js +6 -4
- package/dist/card.js.map +1 -1
- package/dist/checkbox-group.cjs +1 -1
- package/dist/checkbox-group.cjs.map +1 -1
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox-group.js.map +1 -1
- package/dist/combobox.cjs +2 -2
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +7 -3
- package/dist/combobox.js.map +1 -1
- package/dist/command-palette.cjs +1 -1
- package/dist/command-palette.cjs.map +1 -1
- package/dist/command-palette.js +6 -2
- package/dist/command-palette.js.map +1 -1
- package/dist/content/card/card.css.cjs +1 -1
- package/dist/content/card/card.css.cjs.map +1 -1
- package/dist/content/card/card.css.js +1 -1
- package/dist/content/card/card.css.js.map +1 -1
- package/dist/content/card/card.d.ts +2 -2
- package/dist/content/card/card.d.ts.map +1 -1
- package/dist/content/pagination/pagination.css.cjs +1 -1
- package/dist/content/pagination/pagination.css.cjs.map +1 -1
- package/dist/content/pagination/pagination.css.js +1 -1
- package/dist/content/pagination/pagination.css.js.map +1 -1
- package/dist/core/field-base.cjs +1 -1
- package/dist/core/field-base.cjs.map +1 -1
- package/dist/core/field-base.d.ts +1 -1
- package/dist/core/field-base.js +1 -1
- package/dist/core/field-base.js.map +1 -1
- package/dist/core/nav.cjs +1 -1
- package/dist/core/nav.cjs.map +1 -1
- package/dist/core/nav.d.ts +4 -1
- package/dist/core/nav.d.ts.map +1 -1
- package/dist/core/nav.js +41 -28
- package/dist/core/nav.js.map +1 -1
- package/dist/core/option-list.cjs +1 -1
- package/dist/core/option-list.cjs.map +1 -1
- package/dist/core/option-list.d.ts.map +1 -1
- package/dist/core/option-list.js +30 -28
- package/dist/core/option-list.js.map +1 -1
- package/dist/core/slider.cjs +1 -1
- package/dist/core/slider.cjs.map +1 -1
- package/dist/core/slider.js +1 -1
- package/dist/core/slider.js.map +1 -1
- package/dist/core/spinner.cjs +1 -1
- package/dist/core/spinner.cjs.map +1 -1
- package/dist/core/spinner.js +1 -1
- package/dist/core/spinner.js.map +1 -1
- package/dist/custom-elements.json +231 -19
- package/dist/datagrid.cjs +73 -73
- package/dist/datagrid.cjs.map +1 -1
- package/dist/datagrid.js +331 -332
- package/dist/datagrid.js.map +1 -1
- package/dist/disclosure/accordion/accordion.css.cjs +1 -1
- package/dist/disclosure/accordion/accordion.css.cjs.map +1 -1
- package/dist/disclosure/accordion/accordion.css.js +1 -1
- package/dist/disclosure/accordion/accordion.css.js.map +1 -1
- package/dist/disclosure/accordion/accordion.d.ts +5 -5
- package/dist/disclosure/accordion/accordion.d.ts.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.d.ts +3 -3
- package/dist/disclosure/accordion-item/accordion-item.d.ts.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js.map +1 -1
- package/dist/disclosure/tab-item/tab-item.d.ts +3 -3
- package/dist/disclosure/tab-item/tab-item.d.ts.map +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs.map +1 -1
- package/dist/disclosure/tabs/tabs.css.js +1 -1
- package/dist/disclosure/tabs/tabs.css.js.map +1 -1
- package/dist/disclosure/tabs/tabs.d.ts +5 -5
- package/dist/disclosure/tabs/tabs.d.ts.map +1 -1
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.cjs.map +1 -1
- package/dist/drawer.js +1 -1
- package/dist/drawer.js.map +1 -1
- package/dist/feedback/skeleton/skeleton.css.cjs +1 -1
- package/dist/feedback/skeleton/skeleton.css.cjs.map +1 -1
- package/dist/feedback/skeleton/skeleton.css.js +1 -1
- package/dist/feedback/skeleton/skeleton.css.js.map +1 -1
- package/dist/feedback/skeleton/skeleton.d.ts +1 -1
- package/dist/feedback/toast/toast.d.ts.map +1 -1
- package/dist/file-input.cjs +1 -1
- package/dist/file-input.cjs.map +1 -1
- package/dist/file-input.js +2 -2
- package/dist/file-input.js.map +1 -1
- package/dist/frameworks/elements.d.ts +4 -86
- package/dist/frameworks/react.d.ts +5 -4
- package/dist/frameworks/vue.d.ts +4 -4
- package/dist/grid.cjs +2 -2
- package/dist/grid.cjs.map +1 -1
- package/dist/grid.js +21 -18
- package/dist/grid.js.map +1 -1
- package/dist/inputs/combobox/combobox.d.ts +12 -1
- package/dist/inputs/combobox/combobox.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid.d.ts +24 -32
- package/dist/inputs/datagrid/datagrid.d.ts.map +1 -1
- package/dist/inputs/date-picker/date-picker.css.cjs +1 -1
- package/dist/inputs/date-picker/date-picker.css.cjs.map +1 -1
- package/dist/inputs/date-picker/date-picker.css.js +1 -1
- package/dist/inputs/date-picker/date-picker.css.js.map +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs.map +1 -1
- package/dist/inputs/file-input/file-input-upload.js +1 -1
- package/dist/inputs/file-input/file-input-upload.js.map +1 -1
- package/dist/inputs/index.d.ts +2 -3
- package/dist/inputs/index.d.ts.map +1 -1
- package/dist/inputs/input/input.css.cjs +1 -1
- package/dist/inputs/input/input.css.cjs.map +1 -1
- package/dist/inputs/input/input.css.js +1 -1
- package/dist/inputs/input/input.css.js.map +1 -1
- package/dist/inputs/shared/field-binding.cjs +1 -1
- package/dist/inputs/shared/field-binding.cjs.map +1 -1
- package/dist/inputs/shared/field-binding.js +6 -6
- package/dist/inputs/shared/field-binding.js.map +1 -1
- package/dist/layout/box/box.css.cjs +1 -1
- package/dist/layout/box/box.css.cjs.map +1 -1
- package/dist/layout/box/box.css.js +1 -1
- package/dist/layout/box/box.css.js.map +1 -1
- package/dist/layout/box/box.d.ts +3 -3
- package/dist/layout/box/box.d.ts.map +1 -1
- package/dist/layout/grid/grid.d.ts.map +1 -1
- package/dist/layout/navbar/navbar.css.cjs +1 -1
- package/dist/layout/navbar/navbar.css.cjs.map +1 -1
- package/dist/layout/navbar/navbar.css.js +1 -1
- package/dist/layout/navbar/navbar.css.js.map +1 -1
- package/dist/layout/navbar/navbar.d.ts +7 -1
- package/dist/layout/navbar/navbar.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebar-item.css.cjs +1 -1
- package/dist/layout/sidebar/sidebar-item.css.cjs.map +1 -1
- package/dist/layout/sidebar/sidebar-item.css.js +1 -1
- package/dist/layout/sidebar/sidebar-item.css.js.map +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs.map +1 -1
- package/dist/layout/sidebar/sidebar.css.js +1 -1
- package/dist/layout/sidebar/sidebar.css.js.map +1 -1
- package/dist/layout/sidebar/sidebar.d.ts.map +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +6 -6
- package/dist/menu.js.map +1 -1
- package/dist/navbar.cjs +10 -10
- package/dist/navbar.cjs.map +1 -1
- package/dist/navbar.js +99 -95
- package/dist/navbar.js.map +1 -1
- package/dist/navigation-menu.cjs +1 -1
- package/dist/navigation-menu.cjs.map +1 -1
- package/dist/navigation-menu.js +1 -1
- package/dist/navigation-menu.js.map +1 -1
- package/dist/number-input.cjs +1 -1
- package/dist/number-input.cjs.map +1 -1
- package/dist/number-input.js +1 -1
- package/dist/number-input.js.map +1 -1
- package/dist/overlay/popover/popover.d.ts.map +1 -1
- package/dist/overlay/tooltip/tooltip.d.ts.map +1 -1
- package/dist/popover.cjs +1 -1
- package/dist/popover.cjs.map +1 -1
- package/dist/popover.js +6 -6
- package/dist/popover.js.map +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +5 -5
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +1 -1
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +1 -1
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +241 -224
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +297 -280
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +251 -234
- package/dist/refine.js.map +1 -1
- package/dist/shared/types.d.ts +0 -2
- package/dist/shared/types.d.ts.map +1 -1
- package/dist/sidebar.cjs +1 -1
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +83 -83
- package/dist/sidebar.js.map +1 -1
- package/dist/skeleton.cjs +1 -1
- package/dist/skeleton.cjs.map +1 -1
- package/dist/skeleton.js +11 -9
- package/dist/skeleton.js.map +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.js +20 -20
- package/dist/slider.js.map +1 -1
- package/dist/stats.cjs +1 -1
- package/dist/stats.cjs.map +1 -1
- package/dist/stats.js +2 -2
- package/dist/stats.js.map +1 -1
- package/dist/styles/mixins/field-variants.css.cjs +15 -0
- package/dist/styles/mixins/field-variants.css.cjs.map +1 -1
- package/dist/styles/mixins/field-variants.css.d.ts.map +1 -1
- package/dist/styles/mixins/field-variants.css.js +15 -0
- package/dist/styles/mixins/field-variants.css.js.map +1 -1
- package/dist/styles/mixins/variants.css.cjs +4 -4
- package/dist/styles/mixins/variants.css.cjs.map +1 -1
- package/dist/styles/mixins/variants.css.js +4 -4
- package/dist/styles/mixins/variants.css.js.map +1 -1
- package/dist/tab-item.cjs.map +1 -1
- package/dist/tab-item.js.map +1 -1
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js.map +1 -1
- package/dist/toast.cjs +8 -8
- package/dist/toast.cjs.map +1 -1
- package/dist/toast.js +32 -33
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.js +2 -2
- package/dist/tooltip.js.map +1 -1
- package/dist/types/elements.d.ts +207 -0
- package/package.json +13 -13
package/dist/tooltip.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./core/parse.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./overlay/shared/use-floating-trigger.cjs"),i=require("./overlay/tooltip/tooltip.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=4,c=[`hover`,`focus`],l=new Set([`click`,`focus`,`hover`]),u=e=>{if(e==null||e.trim()===``)return 0;let t=Number(e);return Number.isFinite(t)&&t>=0?t:0},d=e=>e==null?void 0:e===``||e===`true`,f=e=>t.parseStringTriggers(e,l,c),p=`ore-tooltip`;(0,a.define)(p,{props:{...n.sizableBundle,...n.disablableBundle,"close-delay":{default:0,parse:u},content:a.prop.string(),"default-open":a.prop.bool(!1),delay:{default:0,parse:u},open:{default:void 0,parse:d},placement:a.prop.oneOf([`top`,`bottom`,`left`,`right`],`top`),trigger:a.prop.string(`hover,focus`),variant:a.prop.string()},setup(e){let t=(0,a.getHost)(),n=(0,a.useEmit)(),i=(0,a.useSlots)(),c=t.shadowRoot,l=(0,o.computed)(()=>!!e.disabled.value),u=(0,o.computed)(()=>e.open.value!==void 0),d=(0,o.signal)(`top`),p=(0,a.
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./core/parse.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./overlay/shared/use-floating-trigger.cjs"),i=require("./overlay/tooltip/tooltip.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=4,c=[`hover`,`focus`],l=new Set([`click`,`focus`,`hover`]),u=e=>{if(e==null||e.trim()===``)return 0;let t=Number(e);return Number.isFinite(t)&&t>=0?t:0},d=e=>e==null?void 0:e===``||e===`true`,f=e=>t.parseStringTriggers(e,l,c),p=`ore-tooltip`;(0,a.define)(p,{props:{...n.sizableBundle,...n.disablableBundle,"close-delay":{default:0,parse:u},content:a.prop.string(),"default-open":a.prop.bool(!1),delay:{default:0,parse:u},open:{default:void 0,parse:d},placement:a.prop.oneOf([`top`,`bottom`,`left`,`right`],`top`),trigger:a.prop.string(`hover,focus`),variant:a.prop.string()},setup(e){let t=(0,a.getHost)(),n=(0,a.useEmit)(),i=(0,a.useSlots)(),c=t.shadowRoot,l=(0,o.computed)(()=>!!e.disabled.value),u=(0,o.computed)(()=>e.open.value!==void 0),d=(0,o.signal)(`top`),p=(0,a.createId)(`tooltip`),m=(0,o.computed)(()=>f(e.trigger.value)),h=null,g=null,_=null,v=()=>{g&&=(clearTimeout(g),null)},y=()=>{_&&=(clearTimeout(_),null)},b=r.useFloatingTrigger({bindTriggerAria:e=>(0,a.bind)({attr:{"aria-describedby":()=>p}},{target:e}),defaultOpen:e[`default-open`],disabled:l,getPanel:()=>h,offset:8,onCleanup:a.onCleanup,onClose:e=>n(`open-change`,{open:!1,reason:e}),onOpen:e=>n(`open-change`,{open:!0,reason:e}),onPlacementChange:e=>{let t=e.split(`-`)[0];d.value=t,t===`left`&&h&&(h.style.left=`${parseFloat(h.style.left)-s}px`)},openProp:e.open,placement:(0,o.computed)(()=>e.placement.value),slot:()=>c?.querySelector(`slot:not([name])`)??null,slotElements:i.elements(),triggers:(0,o.computed)(()=>[])});function x(t=`hover`){if(u.value||l.value||!e.content.value&&!i.has(`content`).value)return;y(),v();let n=Number(e.delay.value)||0;n>0?g=setTimeout(()=>{g=null,b.open(t),b.updatePosition()},n):(b.open(t),b.updatePosition())}function S(){if(u.value)return;v();let t=Number(e[`close-delay`].value)||0;t>0?(y(),_=setTimeout(()=>{_=null,b.close(`trigger`)},t)):b.close(`trigger`)}return(0,a.onMounted)(()=>{let e=c?.querySelector(`slot:not([name])`),t=[],n=(e,n,r)=>{e.addEventListener(n,r),t.push(()=>e.removeEventListener(n,r))},r=()=>{for(let e of t)e();t=[];let r=e?.assignedElements({flatten:!0})[0];if(!r)return;let i=m.value;i.includes(`hover`)&&(n(r,`pointerenter`,()=>x(`hover`)),n(r,`pointerleave`,S)),i.includes(`focus`)&&(n(r,`focusin`,()=>x(`focus`)),n(r,`focusout`,S)),i.includes(`click`)&&n(r,`click`,()=>b.visible.value?S():x(`click`))};e?.addEventListener(`slotchange`,r),r();let i=b.mount();return()=>{e?.removeEventListener(`slotchange`,r);for(let e of t)e();v(),y(),i()}}),a.html`
|
|
2
2
|
<slot></slot>
|
|
3
3
|
<div
|
|
4
4
|
class="tooltip"
|
package/dist/tooltip.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.cjs","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n bind,\n createStableId,\n define,\n getHost,\n html,\n onCleanup,\n onMounted,\n prop,\n useEmit,\n useSlots,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { type OverlayOpenChangeDetail, type OverlayOpenReason, parseStringTriggers } from '../../core';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport { useFloatingTrigger } from '../shared/use-floating-trigger';\nimport styles from './tooltip.css?inline';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'click' | 'focus' | 'hover';\n\nconst LEFT_GAP_COMPENSATION = 4;\nconst DEFAULT_TOOLTIP_TRIGGERS: TooltipTrigger[] = ['hover', 'focus'];\nconst VALID_TOOLTIP_TRIGGERS = new Set<TooltipTrigger>(['click', 'focus', 'hover']);\n\nconst parseDelayMs = (value: string | null): number => {\n if (value == null || value.trim() === '') return 0;\n\n const parsed = Number(value);\n\n return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n value == null ? undefined : value === '' || value === 'true';\n\nconst normalizeTriggers = (value: string | null | undefined): TooltipTrigger[] =>\n parseStringTriggers(value, VALID_TOOLTIP_TRIGGERS, DEFAULT_TOOLTIP_TRIGGERS);\n\n/** Tooltip component properties */\nexport type OreTooltipEvents = {\n 'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreTooltipProps = {\n /** Hide delay in ms */\n 'close-delay'?: number;\n /** Tooltip text content */\n content?: string;\n /** Initial uncontrolled open state. Ignored when `open` is set. */\n 'default-open'?: boolean;\n /** Show delay in ms */\n delay?: number;\n /** Disable the tooltip */\n disabled?: boolean;\n /** Controlled open state */\n open?: boolean;\n /** Preferred placement relative to trigger */\n placement?: TooltipPlacement;\n /** Tooltip size */\n size?: ComponentSize;\n /** Which trigger(s) show/hide the tooltip */\n trigger?: string;\n /** Visual variant */\n variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element ore-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n * @fires open-change - Fired when the tooltip state changes. detail: { open, reason }\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @part tooltip - Tooltip container.\n * @example\n * ```html\n * <!-- Simple text tooltip -->\n * <ore-tooltip content=\"Copy to clipboard\">\n * <button>Copy</button>\n * </ore-tooltip>\n *\n * <!-- Placement and delay -->\n * <ore-tooltip content=\"Save your work\" placement=\"right\" delay=\"300\">\n * <ore-icon name=\"save\"></ore-icon>\n * </ore-tooltip>\n *\n * <!-- Hover + focus trigger -->\n * <ore-tooltip content=\"Required field\" trigger=\"hover,focus\" placement=\"top\">\n * <ore-input label=\"Email\" type=\"email\"></ore-input>\n * </ore-tooltip>\n *\n * <!-- Rich content slot -->\n * <ore-tooltip>\n * <ore-button>Help</ore-button>\n * <div slot=\"content\">\n * <strong>Keyboard shortcuts</strong>\n * <p>Press Ctrl+S to save.</p>\n * </div>\n * </ore-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = 'ore-tooltip' as const;\ndefine<OreTooltipProps>(TOOLTIP_TAG, {\n props: {\n ...sizableBundle,\n ...disablableBundle,\n 'close-delay': { default: 0, parse: parseDelayMs },\n content: prop.string(),\n 'default-open': prop.bool(false),\n delay: { default: 0, parse: parseDelayMs },\n open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n placement: prop.oneOf(['top', 'bottom', 'left', 'right'] as const, 'top'),\n trigger: prop.string('hover,focus'),\n variant: prop.string<'dark' | 'light'>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreTooltipEvents>();\n const slots = useSlots();\n\n const shadowRoot = el.shadowRoot;\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const isControlled = computed(() => props.open.value !== undefined);\n const activePlacement = signal<TooltipPlacement>('top');\n const tooltipId = createStableId('tooltip');\n const triggers = computed<TooltipTrigger[]>(() => normalizeTriggers(props.trigger.value));\n let tooltipEl: HTMLElement | null = null;\n let showTimer: ReturnType<typeof setTimeout> | null = null;\n let hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n const clearShowTimer = (): void => {\n if (!showTimer) return;\n\n clearTimeout(showTimer);\n showTimer = null;\n };\n const clearHideTimer = (): void => {\n if (!hideTimer) return;\n\n clearTimeout(hideTimer);\n hideTimer = null;\n };\n\n const floating = useFloatingTrigger({\n bindTriggerAria: (triggerEl) => bind({ aria: { describedby: () => tooltipId } }, { target: triggerEl }),\n defaultOpen: props['default-open'],\n disabled: isDisabled,\n getPanel: () => tooltipEl,\n offset: 8,\n onCleanup,\n onClose: (reason) => emit('open-change', { open: false, reason }),\n onOpen: (reason) => emit('open-change', { open: true, reason }),\n onPlacementChange: (p) => {\n const side = p.split('-')[0] as TooltipPlacement;\n\n activePlacement.value = side;\n\n if (side === 'left' && tooltipEl) {\n tooltipEl.style.left = `${parseFloat(tooltipEl.style.left) - LEFT_GAP_COMPENSATION}px`;\n }\n },\n openProp: props.open as typeof props.open & { value: boolean | undefined },\n placement: computed(() => props.placement.value as Placement),\n slot: () => shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])') ?? null,\n slotElements: slots.elements(),\n triggers: computed(() => [] as TooltipTrigger[]),\n });\n\n function show(reason: OverlayOpenReason = 'hover'): void {\n if (isControlled.value) return;\n\n if (isDisabled.value || (!props.content.value && !slots.has('content').value)) return;\n\n clearHideTimer();\n clearShowTimer();\n\n const delay = Number(props.delay.value) || 0;\n\n if (delay > 0) {\n showTimer = setTimeout(() => {\n showTimer = null;\n floating.open(reason);\n floating.updatePosition();\n }, delay);\n } else {\n floating.open(reason);\n floating.updatePosition();\n }\n }\n\n function hide(): void {\n if (isControlled.value) return;\n\n clearShowTimer();\n\n const closeDelay = Number(props['close-delay'].value) || 0;\n\n if (closeDelay > 0) {\n clearHideTimer();\n hideTimer = setTimeout(() => {\n hideTimer = null;\n floating.close('trigger');\n }, closeDelay);\n } else {\n floating.close('trigger');\n }\n }\n\n onMounted(() => {\n // Manually bind trigger events so we can wrap show/hide with delay timers.\n // useFloatingTrigger handles ARIA, positioning, controlled mode, and keyboard dismiss.\n const triggerSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n let eventCleanups: Array<() => void> = [];\n\n const addEvent = (target: EventTarget, event: string, handler: EventListener): void => {\n target.addEventListener(event, handler);\n eventCleanups.push(() => target.removeEventListener(event, handler));\n };\n\n const bindTriggerEvents = (): void => {\n for (const cleanup of eventCleanups) cleanup();\n eventCleanups = [];\n\n const triggerEl = triggerSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n if (!triggerEl) return;\n\n const t = triggers.value;\n\n if (t.includes('hover')) {\n addEvent(triggerEl, 'pointerenter', () => show('hover'));\n addEvent(triggerEl, 'pointerleave', hide);\n }\n\n if (t.includes('focus')) {\n addEvent(triggerEl, 'focusin', () => show('focus'));\n addEvent(triggerEl, 'focusout', hide);\n }\n\n if (t.includes('click')) {\n addEvent(triggerEl, 'click', () => (floating.visible.value ? hide() : show('click')));\n }\n };\n\n triggerSlot?.addEventListener('slotchange', bindTriggerEvents);\n bindTriggerEvents();\n\n const destroyFloating = floating.mount();\n\n return () => {\n triggerSlot?.removeEventListener('slotchange', bindTriggerEvents);\n for (const cleanup of eventCleanups) cleanup();\n clearShowTimer();\n clearHideTimer();\n destroyFloating();\n };\n });\n\n return html`\n <slot></slot>\n <div\n class=\"tooltip\"\n part=\"tooltip\"\n id=\"${tooltipId}\"\n role=\"tooltip\"\n popover=\"manual\"\n ref=${(ref: HTMLElement) => {\n tooltipEl = ref;\n }}\n data-placement=\"${activePlacement}\"\n aria-hidden=\"${() => String(!floating.visible.value)}\">\n <slot name=\"content\"><span class=\"tooltip-text\">${props.content}</span></slot>\n </div>\n `;\n },\n styles: [forcedColorsMixin, styles],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.cjs","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport { bind, createId, define, getHost, html, onCleanup, onMounted, prop, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { type OverlayOpenChangeDetail, type OverlayOpenReason, parseStringTriggers } from '../../core';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport { useFloatingTrigger } from '../shared/use-floating-trigger';\nimport styles from './tooltip.css?inline';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'click' | 'focus' | 'hover';\n\nconst LEFT_GAP_COMPENSATION = 4;\nconst DEFAULT_TOOLTIP_TRIGGERS: TooltipTrigger[] = ['hover', 'focus'];\nconst VALID_TOOLTIP_TRIGGERS = new Set<TooltipTrigger>(['click', 'focus', 'hover']);\n\nconst parseDelayMs = (value: string | null): number => {\n if (value == null || value.trim() === '') return 0;\n\n const parsed = Number(value);\n\n return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n value == null ? undefined : value === '' || value === 'true';\n\nconst normalizeTriggers = (value: string | null | undefined): TooltipTrigger[] =>\n parseStringTriggers(value, VALID_TOOLTIP_TRIGGERS, DEFAULT_TOOLTIP_TRIGGERS);\n\n/** Tooltip component properties */\nexport type OreTooltipEvents = {\n 'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreTooltipProps = {\n /** Hide delay in ms */\n 'close-delay'?: number;\n /** Tooltip text content */\n content?: string;\n /** Initial uncontrolled open state. Ignored when `open` is set. */\n 'default-open'?: boolean;\n /** Show delay in ms */\n delay?: number;\n /** Disable the tooltip */\n disabled?: boolean;\n /** Controlled open state */\n open?: boolean;\n /** Preferred placement relative to trigger */\n placement?: TooltipPlacement;\n /** Tooltip size */\n size?: ComponentSize;\n /** Which trigger(s) show/hide the tooltip */\n trigger?: string;\n /** Visual variant */\n variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element ore-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n * @fires open-change - Fired when the tooltip state changes. detail: { open, reason }\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @part tooltip - Tooltip container.\n * @example\n * ```html\n * <!-- Simple text tooltip -->\n * <ore-tooltip content=\"Copy to clipboard\">\n * <button>Copy</button>\n * </ore-tooltip>\n *\n * <!-- Placement and delay -->\n * <ore-tooltip content=\"Save your work\" placement=\"right\" delay=\"300\">\n * <ore-icon name=\"save\"></ore-icon>\n * </ore-tooltip>\n *\n * <!-- Hover + focus trigger -->\n * <ore-tooltip content=\"Required field\" trigger=\"hover,focus\" placement=\"top\">\n * <ore-input label=\"Email\" type=\"email\"></ore-input>\n * </ore-tooltip>\n *\n * <!-- Rich content slot -->\n * <ore-tooltip>\n * <ore-button>Help</ore-button>\n * <div slot=\"content\">\n * <strong>Keyboard shortcuts</strong>\n * <p>Press Ctrl+S to save.</p>\n * </div>\n * </ore-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = 'ore-tooltip' as const;\ndefine<OreTooltipProps>(TOOLTIP_TAG, {\n props: {\n ...sizableBundle,\n ...disablableBundle,\n 'close-delay': { default: 0, parse: parseDelayMs },\n content: prop.string(),\n 'default-open': prop.bool(false),\n delay: { default: 0, parse: parseDelayMs },\n open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n placement: prop.oneOf(['top', 'bottom', 'left', 'right'] as const, 'top'),\n trigger: prop.string('hover,focus'),\n variant: prop.string<'dark' | 'light'>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreTooltipEvents>();\n const slots = useSlots();\n\n const shadowRoot = el.shadowRoot;\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const isControlled = computed(() => props.open.value !== undefined);\n const activePlacement = signal<TooltipPlacement>('top');\n const tooltipId = createId('tooltip');\n const triggers = computed<TooltipTrigger[]>(() => normalizeTriggers(props.trigger.value));\n let tooltipEl: HTMLElement | null = null;\n let showTimer: ReturnType<typeof setTimeout> | null = null;\n let hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n const clearShowTimer = (): void => {\n if (!showTimer) return;\n\n clearTimeout(showTimer);\n showTimer = null;\n };\n const clearHideTimer = (): void => {\n if (!hideTimer) return;\n\n clearTimeout(hideTimer);\n hideTimer = null;\n };\n\n const floating = useFloatingTrigger({\n bindTriggerAria: (triggerEl) => bind({ attr: { 'aria-describedby': () => tooltipId } }, { target: triggerEl }),\n defaultOpen: props['default-open'],\n disabled: isDisabled,\n getPanel: () => tooltipEl,\n offset: 8,\n onCleanup,\n onClose: (reason) => emit('open-change', { open: false, reason }),\n onOpen: (reason) => emit('open-change', { open: true, reason }),\n onPlacementChange: (p) => {\n const side = p.split('-')[0] as TooltipPlacement;\n\n activePlacement.value = side;\n\n if (side === 'left' && tooltipEl) {\n tooltipEl.style.left = `${parseFloat(tooltipEl.style.left) - LEFT_GAP_COMPENSATION}px`;\n }\n },\n openProp: props.open as typeof props.open & { value: boolean | undefined },\n placement: computed(() => props.placement.value as Placement),\n slot: () => shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])') ?? null,\n slotElements: slots.elements(),\n triggers: computed(() => [] as TooltipTrigger[]),\n });\n\n function show(reason: OverlayOpenReason = 'hover'): void {\n if (isControlled.value) return;\n\n if (isDisabled.value || (!props.content.value && !slots.has('content').value)) return;\n\n clearHideTimer();\n clearShowTimer();\n\n const delay = Number(props.delay.value) || 0;\n\n if (delay > 0) {\n showTimer = setTimeout(() => {\n showTimer = null;\n floating.open(reason);\n floating.updatePosition();\n }, delay);\n } else {\n floating.open(reason);\n floating.updatePosition();\n }\n }\n\n function hide(): void {\n if (isControlled.value) return;\n\n clearShowTimer();\n\n const closeDelay = Number(props['close-delay'].value) || 0;\n\n if (closeDelay > 0) {\n clearHideTimer();\n hideTimer = setTimeout(() => {\n hideTimer = null;\n floating.close('trigger');\n }, closeDelay);\n } else {\n floating.close('trigger');\n }\n }\n\n onMounted(() => {\n // Manually bind trigger events so we can wrap show/hide with delay timers.\n // useFloatingTrigger handles ARIA, positioning, controlled mode, and keyboard dismiss.\n const triggerSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n let eventCleanups: Array<() => void> = [];\n\n const addEvent = (target: EventTarget, event: string, handler: EventListener): void => {\n target.addEventListener(event, handler);\n eventCleanups.push(() => target.removeEventListener(event, handler));\n };\n\n const bindTriggerEvents = (): void => {\n for (const cleanup of eventCleanups) cleanup();\n eventCleanups = [];\n\n const triggerEl = triggerSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n if (!triggerEl) return;\n\n const t = triggers.value;\n\n if (t.includes('hover')) {\n addEvent(triggerEl, 'pointerenter', () => show('hover'));\n addEvent(triggerEl, 'pointerleave', hide);\n }\n\n if (t.includes('focus')) {\n addEvent(triggerEl, 'focusin', () => show('focus'));\n addEvent(triggerEl, 'focusout', hide);\n }\n\n if (t.includes('click')) {\n addEvent(triggerEl, 'click', () => (floating.visible.value ? hide() : show('click')));\n }\n };\n\n triggerSlot?.addEventListener('slotchange', bindTriggerEvents);\n bindTriggerEvents();\n\n const destroyFloating = floating.mount();\n\n return () => {\n triggerSlot?.removeEventListener('slotchange', bindTriggerEvents);\n for (const cleanup of eventCleanups) cleanup();\n clearShowTimer();\n clearHideTimer();\n destroyFloating();\n };\n });\n\n return html`\n <slot></slot>\n <div\n class=\"tooltip\"\n part=\"tooltip\"\n id=\"${tooltipId}\"\n role=\"tooltip\"\n popover=\"manual\"\n ref=${(ref: HTMLElement) => {\n tooltipEl = ref;\n }}\n data-placement=\"${activePlacement}\"\n aria-hidden=\"${() => String(!floating.visible.value)}\">\n <slot name=\"content\"><span class=\"tooltip-text\">${props.content}</span></slot>\n </div>\n `;\n },\n styles: [forcedColorsMixin, styles],\n});\n"],"mappings":"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"}
|
package/dist/tooltip.js
CHANGED
|
@@ -3,7 +3,7 @@ import { parseStringTriggers as t } from "./core/parse.js";
|
|
|
3
3
|
import { disablableBundle as n, sizableBundle as r } from "./shared/prop-bundles.js";
|
|
4
4
|
import { useFloatingTrigger as i } from "./overlay/shared/use-floating-trigger.js";
|
|
5
5
|
import a from "./overlay/tooltip/tooltip.css.js";
|
|
6
|
-
import { bind as o,
|
|
6
|
+
import { bind as o, createId as s, define as c, getHost as l, html as u, onCleanup as d, onMounted as f, prop as p, useEmit as m, useSlots as h } from "@vielzeug/ore";
|
|
7
7
|
import { computed as g, signal as _ } from "@vielzeug/ripple";
|
|
8
8
|
//#region src/overlay/tooltip/tooltip.ts
|
|
9
9
|
var v = 4, y = ["hover", "focus"], b = /* @__PURE__ */ new Set([
|
|
@@ -48,7 +48,7 @@ c(w, {
|
|
|
48
48
|
}, D = () => {
|
|
49
49
|
T &&= (clearTimeout(T), null);
|
|
50
50
|
}, O = i({
|
|
51
|
-
bindTriggerAria: (e) => o({
|
|
51
|
+
bindTriggerAria: (e) => o({ attr: { "aria-describedby": () => b } }, { target: e }),
|
|
52
52
|
defaultOpen: e["default-open"],
|
|
53
53
|
disabled: c,
|
|
54
54
|
getPanel: () => S,
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n bind,\n createStableId,\n define,\n getHost,\n html,\n onCleanup,\n onMounted,\n prop,\n useEmit,\n useSlots,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { type OverlayOpenChangeDetail, type OverlayOpenReason, parseStringTriggers } from '../../core';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport { useFloatingTrigger } from '../shared/use-floating-trigger';\nimport styles from './tooltip.css?inline';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'click' | 'focus' | 'hover';\n\nconst LEFT_GAP_COMPENSATION = 4;\nconst DEFAULT_TOOLTIP_TRIGGERS: TooltipTrigger[] = ['hover', 'focus'];\nconst VALID_TOOLTIP_TRIGGERS = new Set<TooltipTrigger>(['click', 'focus', 'hover']);\n\nconst parseDelayMs = (value: string | null): number => {\n if (value == null || value.trim() === '') return 0;\n\n const parsed = Number(value);\n\n return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n value == null ? undefined : value === '' || value === 'true';\n\nconst normalizeTriggers = (value: string | null | undefined): TooltipTrigger[] =>\n parseStringTriggers(value, VALID_TOOLTIP_TRIGGERS, DEFAULT_TOOLTIP_TRIGGERS);\n\n/** Tooltip component properties */\nexport type OreTooltipEvents = {\n 'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreTooltipProps = {\n /** Hide delay in ms */\n 'close-delay'?: number;\n /** Tooltip text content */\n content?: string;\n /** Initial uncontrolled open state. Ignored when `open` is set. */\n 'default-open'?: boolean;\n /** Show delay in ms */\n delay?: number;\n /** Disable the tooltip */\n disabled?: boolean;\n /** Controlled open state */\n open?: boolean;\n /** Preferred placement relative to trigger */\n placement?: TooltipPlacement;\n /** Tooltip size */\n size?: ComponentSize;\n /** Which trigger(s) show/hide the tooltip */\n trigger?: string;\n /** Visual variant */\n variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element ore-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n * @fires open-change - Fired when the tooltip state changes. detail: { open, reason }\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @part tooltip - Tooltip container.\n * @example\n * ```html\n * <!-- Simple text tooltip -->\n * <ore-tooltip content=\"Copy to clipboard\">\n * <button>Copy</button>\n * </ore-tooltip>\n *\n * <!-- Placement and delay -->\n * <ore-tooltip content=\"Save your work\" placement=\"right\" delay=\"300\">\n * <ore-icon name=\"save\"></ore-icon>\n * </ore-tooltip>\n *\n * <!-- Hover + focus trigger -->\n * <ore-tooltip content=\"Required field\" trigger=\"hover,focus\" placement=\"top\">\n * <ore-input label=\"Email\" type=\"email\"></ore-input>\n * </ore-tooltip>\n *\n * <!-- Rich content slot -->\n * <ore-tooltip>\n * <ore-button>Help</ore-button>\n * <div slot=\"content\">\n * <strong>Keyboard shortcuts</strong>\n * <p>Press Ctrl+S to save.</p>\n * </div>\n * </ore-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = 'ore-tooltip' as const;\ndefine<OreTooltipProps>(TOOLTIP_TAG, {\n props: {\n ...sizableBundle,\n ...disablableBundle,\n 'close-delay': { default: 0, parse: parseDelayMs },\n content: prop.string(),\n 'default-open': prop.bool(false),\n delay: { default: 0, parse: parseDelayMs },\n open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n placement: prop.oneOf(['top', 'bottom', 'left', 'right'] as const, 'top'),\n trigger: prop.string('hover,focus'),\n variant: prop.string<'dark' | 'light'>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreTooltipEvents>();\n const slots = useSlots();\n\n const shadowRoot = el.shadowRoot;\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const isControlled = computed(() => props.open.value !== undefined);\n const activePlacement = signal<TooltipPlacement>('top');\n const tooltipId = createStableId('tooltip');\n const triggers = computed<TooltipTrigger[]>(() => normalizeTriggers(props.trigger.value));\n let tooltipEl: HTMLElement | null = null;\n let showTimer: ReturnType<typeof setTimeout> | null = null;\n let hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n const clearShowTimer = (): void => {\n if (!showTimer) return;\n\n clearTimeout(showTimer);\n showTimer = null;\n };\n const clearHideTimer = (): void => {\n if (!hideTimer) return;\n\n clearTimeout(hideTimer);\n hideTimer = null;\n };\n\n const floating = useFloatingTrigger({\n bindTriggerAria: (triggerEl) => bind({ aria: { describedby: () => tooltipId } }, { target: triggerEl }),\n defaultOpen: props['default-open'],\n disabled: isDisabled,\n getPanel: () => tooltipEl,\n offset: 8,\n onCleanup,\n onClose: (reason) => emit('open-change', { open: false, reason }),\n onOpen: (reason) => emit('open-change', { open: true, reason }),\n onPlacementChange: (p) => {\n const side = p.split('-')[0] as TooltipPlacement;\n\n activePlacement.value = side;\n\n if (side === 'left' && tooltipEl) {\n tooltipEl.style.left = `${parseFloat(tooltipEl.style.left) - LEFT_GAP_COMPENSATION}px`;\n }\n },\n openProp: props.open as typeof props.open & { value: boolean | undefined },\n placement: computed(() => props.placement.value as Placement),\n slot: () => shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])') ?? null,\n slotElements: slots.elements(),\n triggers: computed(() => [] as TooltipTrigger[]),\n });\n\n function show(reason: OverlayOpenReason = 'hover'): void {\n if (isControlled.value) return;\n\n if (isDisabled.value || (!props.content.value && !slots.has('content').value)) return;\n\n clearHideTimer();\n clearShowTimer();\n\n const delay = Number(props.delay.value) || 0;\n\n if (delay > 0) {\n showTimer = setTimeout(() => {\n showTimer = null;\n floating.open(reason);\n floating.updatePosition();\n }, delay);\n } else {\n floating.open(reason);\n floating.updatePosition();\n }\n }\n\n function hide(): void {\n if (isControlled.value) return;\n\n clearShowTimer();\n\n const closeDelay = Number(props['close-delay'].value) || 0;\n\n if (closeDelay > 0) {\n clearHideTimer();\n hideTimer = setTimeout(() => {\n hideTimer = null;\n floating.close('trigger');\n }, closeDelay);\n } else {\n floating.close('trigger');\n }\n }\n\n onMounted(() => {\n // Manually bind trigger events so we can wrap show/hide with delay timers.\n // useFloatingTrigger handles ARIA, positioning, controlled mode, and keyboard dismiss.\n const triggerSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n let eventCleanups: Array<() => void> = [];\n\n const addEvent = (target: EventTarget, event: string, handler: EventListener): void => {\n target.addEventListener(event, handler);\n eventCleanups.push(() => target.removeEventListener(event, handler));\n };\n\n const bindTriggerEvents = (): void => {\n for (const cleanup of eventCleanups) cleanup();\n eventCleanups = [];\n\n const triggerEl = triggerSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n if (!triggerEl) return;\n\n const t = triggers.value;\n\n if (t.includes('hover')) {\n addEvent(triggerEl, 'pointerenter', () => show('hover'));\n addEvent(triggerEl, 'pointerleave', hide);\n }\n\n if (t.includes('focus')) {\n addEvent(triggerEl, 'focusin', () => show('focus'));\n addEvent(triggerEl, 'focusout', hide);\n }\n\n if (t.includes('click')) {\n addEvent(triggerEl, 'click', () => (floating.visible.value ? hide() : show('click')));\n }\n };\n\n triggerSlot?.addEventListener('slotchange', bindTriggerEvents);\n bindTriggerEvents();\n\n const destroyFloating = floating.mount();\n\n return () => {\n triggerSlot?.removeEventListener('slotchange', bindTriggerEvents);\n for (const cleanup of eventCleanups) cleanup();\n clearShowTimer();\n clearHideTimer();\n destroyFloating();\n };\n });\n\n return html`\n <slot></slot>\n <div\n class=\"tooltip\"\n part=\"tooltip\"\n id=\"${tooltipId}\"\n role=\"tooltip\"\n popover=\"manual\"\n ref=${(ref: HTMLElement) => {\n tooltipEl = ref;\n }}\n data-placement=\"${activePlacement}\"\n aria-hidden=\"${() => String(!floating.visible.value)}\">\n <slot name=\"content\"><span class=\"tooltip-text\">${props.content}</span></slot>\n </div>\n `;\n },\n styles: [forcedColorsMixin, styles],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.js","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport { bind, createId, define, getHost, html, onCleanup, onMounted, prop, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { type OverlayOpenChangeDetail, type OverlayOpenReason, parseStringTriggers } from '../../core';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport { useFloatingTrigger } from '../shared/use-floating-trigger';\nimport styles from './tooltip.css?inline';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'click' | 'focus' | 'hover';\n\nconst LEFT_GAP_COMPENSATION = 4;\nconst DEFAULT_TOOLTIP_TRIGGERS: TooltipTrigger[] = ['hover', 'focus'];\nconst VALID_TOOLTIP_TRIGGERS = new Set<TooltipTrigger>(['click', 'focus', 'hover']);\n\nconst parseDelayMs = (value: string | null): number => {\n if (value == null || value.trim() === '') return 0;\n\n const parsed = Number(value);\n\n return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n value == null ? undefined : value === '' || value === 'true';\n\nconst normalizeTriggers = (value: string | null | undefined): TooltipTrigger[] =>\n parseStringTriggers(value, VALID_TOOLTIP_TRIGGERS, DEFAULT_TOOLTIP_TRIGGERS);\n\n/** Tooltip component properties */\nexport type OreTooltipEvents = {\n 'open-change': OverlayOpenChangeDetail;\n};\n\nexport type OreTooltipProps = {\n /** Hide delay in ms */\n 'close-delay'?: number;\n /** Tooltip text content */\n content?: string;\n /** Initial uncontrolled open state. Ignored when `open` is set. */\n 'default-open'?: boolean;\n /** Show delay in ms */\n delay?: number;\n /** Disable the tooltip */\n disabled?: boolean;\n /** Controlled open state */\n open?: boolean;\n /** Preferred placement relative to trigger */\n placement?: TooltipPlacement;\n /** Tooltip size */\n size?: ComponentSize;\n /** Which trigger(s) show/hide the tooltip */\n trigger?: string;\n /** Visual variant */\n variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element ore-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n * @fires open-change - Fired when the tooltip state changes. detail: { open, reason }\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @part tooltip - Tooltip container.\n * @example\n * ```html\n * <!-- Simple text tooltip -->\n * <ore-tooltip content=\"Copy to clipboard\">\n * <button>Copy</button>\n * </ore-tooltip>\n *\n * <!-- Placement and delay -->\n * <ore-tooltip content=\"Save your work\" placement=\"right\" delay=\"300\">\n * <ore-icon name=\"save\"></ore-icon>\n * </ore-tooltip>\n *\n * <!-- Hover + focus trigger -->\n * <ore-tooltip content=\"Required field\" trigger=\"hover,focus\" placement=\"top\">\n * <ore-input label=\"Email\" type=\"email\"></ore-input>\n * </ore-tooltip>\n *\n * <!-- Rich content slot -->\n * <ore-tooltip>\n * <ore-button>Help</ore-button>\n * <div slot=\"content\">\n * <strong>Keyboard shortcuts</strong>\n * <p>Press Ctrl+S to save.</p>\n * </div>\n * </ore-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = 'ore-tooltip' as const;\ndefine<OreTooltipProps>(TOOLTIP_TAG, {\n props: {\n ...sizableBundle,\n ...disablableBundle,\n 'close-delay': { default: 0, parse: parseDelayMs },\n content: prop.string(),\n 'default-open': prop.bool(false),\n delay: { default: 0, parse: parseDelayMs },\n open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n placement: prop.oneOf(['top', 'bottom', 'left', 'right'] as const, 'top'),\n trigger: prop.string('hover,focus'),\n variant: prop.string<'dark' | 'light'>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreTooltipEvents>();\n const slots = useSlots();\n\n const shadowRoot = el.shadowRoot;\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const isControlled = computed(() => props.open.value !== undefined);\n const activePlacement = signal<TooltipPlacement>('top');\n const tooltipId = createId('tooltip');\n const triggers = computed<TooltipTrigger[]>(() => normalizeTriggers(props.trigger.value));\n let tooltipEl: HTMLElement | null = null;\n let showTimer: ReturnType<typeof setTimeout> | null = null;\n let hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n const clearShowTimer = (): void => {\n if (!showTimer) return;\n\n clearTimeout(showTimer);\n showTimer = null;\n };\n const clearHideTimer = (): void => {\n if (!hideTimer) return;\n\n clearTimeout(hideTimer);\n hideTimer = null;\n };\n\n const floating = useFloatingTrigger({\n bindTriggerAria: (triggerEl) => bind({ attr: { 'aria-describedby': () => tooltipId } }, { target: triggerEl }),\n defaultOpen: props['default-open'],\n disabled: isDisabled,\n getPanel: () => tooltipEl,\n offset: 8,\n onCleanup,\n onClose: (reason) => emit('open-change', { open: false, reason }),\n onOpen: (reason) => emit('open-change', { open: true, reason }),\n onPlacementChange: (p) => {\n const side = p.split('-')[0] as TooltipPlacement;\n\n activePlacement.value = side;\n\n if (side === 'left' && tooltipEl) {\n tooltipEl.style.left = `${parseFloat(tooltipEl.style.left) - LEFT_GAP_COMPENSATION}px`;\n }\n },\n openProp: props.open as typeof props.open & { value: boolean | undefined },\n placement: computed(() => props.placement.value as Placement),\n slot: () => shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])') ?? null,\n slotElements: slots.elements(),\n triggers: computed(() => [] as TooltipTrigger[]),\n });\n\n function show(reason: OverlayOpenReason = 'hover'): void {\n if (isControlled.value) return;\n\n if (isDisabled.value || (!props.content.value && !slots.has('content').value)) return;\n\n clearHideTimer();\n clearShowTimer();\n\n const delay = Number(props.delay.value) || 0;\n\n if (delay > 0) {\n showTimer = setTimeout(() => {\n showTimer = null;\n floating.open(reason);\n floating.updatePosition();\n }, delay);\n } else {\n floating.open(reason);\n floating.updatePosition();\n }\n }\n\n function hide(): void {\n if (isControlled.value) return;\n\n clearShowTimer();\n\n const closeDelay = Number(props['close-delay'].value) || 0;\n\n if (closeDelay > 0) {\n clearHideTimer();\n hideTimer = setTimeout(() => {\n hideTimer = null;\n floating.close('trigger');\n }, closeDelay);\n } else {\n floating.close('trigger');\n }\n }\n\n onMounted(() => {\n // Manually bind trigger events so we can wrap show/hide with delay timers.\n // useFloatingTrigger handles ARIA, positioning, controlled mode, and keyboard dismiss.\n const triggerSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n let eventCleanups: Array<() => void> = [];\n\n const addEvent = (target: EventTarget, event: string, handler: EventListener): void => {\n target.addEventListener(event, handler);\n eventCleanups.push(() => target.removeEventListener(event, handler));\n };\n\n const bindTriggerEvents = (): void => {\n for (const cleanup of eventCleanups) cleanup();\n eventCleanups = [];\n\n const triggerEl = triggerSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n if (!triggerEl) return;\n\n const t = triggers.value;\n\n if (t.includes('hover')) {\n addEvent(triggerEl, 'pointerenter', () => show('hover'));\n addEvent(triggerEl, 'pointerleave', hide);\n }\n\n if (t.includes('focus')) {\n addEvent(triggerEl, 'focusin', () => show('focus'));\n addEvent(triggerEl, 'focusout', hide);\n }\n\n if (t.includes('click')) {\n addEvent(triggerEl, 'click', () => (floating.visible.value ? hide() : show('click')));\n }\n };\n\n triggerSlot?.addEventListener('slotchange', bindTriggerEvents);\n bindTriggerEvents();\n\n const destroyFloating = floating.mount();\n\n return () => {\n triggerSlot?.removeEventListener('slotchange', bindTriggerEvents);\n for (const cleanup of eventCleanups) cleanup();\n clearShowTimer();\n clearHideTimer();\n destroyFloating();\n };\n });\n\n return html`\n <slot></slot>\n <div\n class=\"tooltip\"\n part=\"tooltip\"\n id=\"${tooltipId}\"\n role=\"tooltip\"\n popover=\"manual\"\n ref=${(ref: HTMLElement) => {\n tooltipEl = ref;\n }}\n data-placement=\"${activePlacement}\"\n aria-hidden=\"${() => String(!floating.visible.value)}\">\n <slot name=\"content\"><span class=\"tooltip-text\">${props.content}</span></slot>\n </div>\n `;\n },\n styles: [forcedColorsMixin, styles],\n});\n"],"mappings":"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"}
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Global HTMLElementTagNameMap augmentations for all supported Refine tags.
|
|
3
|
+
* This file is the single source of truth for DOM and framework element types.
|
|
4
|
+
*
|
|
5
|
+
* Every type referenced below is imported explicitly. The root tsconfig sets
|
|
6
|
+
* `skipLibCheck: true`, which exempts `.d.ts` files from having their contents verified — an
|
|
7
|
+
* unresolvable bare type name here doesn't raise `TS2304: Cannot find name`, it silently
|
|
8
|
+
* resolves to `any`, which then collapses the entire intersection it's part of to `any` too.
|
|
9
|
+
* That turns every property/method access on the affected tag into a silent no-op for
|
|
10
|
+
* consumers — no autocomplete, no error, nothing — which is a much worse failure mode than a
|
|
11
|
+
* build error. Importing the real types is what keeps this file honest under `skipLibCheck`;
|
|
12
|
+
* see `src/types/elements.test.ts` for the regression test that would have caught this.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
import type { OreAvatarProps } from '../content/avatar/avatar.js';
|
|
16
|
+
import type { OreAvatarGroupProps } from '../content/avatar/avatar-group.js';
|
|
17
|
+
import type { OreBreadcrumbItemProps, OreBreadcrumbProps } from '../content/breadcrumb/breadcrumb.js';
|
|
18
|
+
import type { OreCardEvents, OreCardProps } from '../content/card/card.js';
|
|
19
|
+
import type { OreCarouselEvents, OreCarouselProps } from '../content/carousel/carousel.js';
|
|
20
|
+
import type { OreChatMessageEvents, OreChatMessageProps } from '../content/chat-message/chat-message.js';
|
|
21
|
+
import type { OreCodeWindowProps } from '../content/code-window/code-window.js';
|
|
22
|
+
import type { OreCopyCommandEvents, OreCopyCommandProps } from '../content/copy-command/copy-command.js';
|
|
23
|
+
import type { OreIconProps } from '../content/icon/icon.js';
|
|
24
|
+
import type { OreListEvents, OreListProps } from '../content/list/list.js';
|
|
25
|
+
import type { OreListItemEvents, OreListItemProps } from '../content/list/list-item.js';
|
|
26
|
+
import type { OreMarqueeProps } from '../content/marquee/marquee.js';
|
|
27
|
+
import type { OrePaginationEvents, OrePaginationProps } from '../content/pagination/pagination.js';
|
|
28
|
+
import type { OreSeparatorProps } from '../content/separator/separator.js';
|
|
29
|
+
import type { OreStatsProps } from '../content/stats/stats.js';
|
|
30
|
+
import type { OreStepProps } from '../content/stepper/step.js';
|
|
31
|
+
import type { OreStepperEvents, OreStepperProps } from '../content/stepper/stepper.js';
|
|
32
|
+
import type { OreTableProps } from '../content/table/table.js';
|
|
33
|
+
import type { OreTextProps } from '../content/text/text.js';
|
|
34
|
+
import type { OreAccordionEvents, OreAccordionProps } from '../disclosure/accordion/accordion.js';
|
|
35
|
+
import type { OreAccordionItemEvents, OreAccordionItemProps } from '../disclosure/accordion-item/accordion-item.js';
|
|
36
|
+
import type { OreTabItemProps } from '../disclosure/tab-item/tab-item.js';
|
|
37
|
+
import type { OreTabPanelProps } from '../disclosure/tab-panel/tab-panel.js';
|
|
38
|
+
import type { OreTabsEvents, OreTabsProps } from '../disclosure/tabs/tabs.js';
|
|
39
|
+
import type { OreAlertEvents, OreAlertProps } from '../feedback/alert/alert.js';
|
|
40
|
+
import type { OreAsyncEvents, OreAsyncProps } from '../feedback/async/async.js';
|
|
41
|
+
import type { OreBadgeProps } from '../feedback/badge/badge.js';
|
|
42
|
+
import type { OreChipEvents, OreChipProps } from '../feedback/chip/chip.js';
|
|
43
|
+
import type { OrePasswordStrengthProps } from '../feedback/password-strength/password-strength.js';
|
|
44
|
+
import type { OreProgressProps } from '../feedback/progress/progress.js';
|
|
45
|
+
import type { OreSkeletonProps } from '../feedback/skeleton/skeleton.js';
|
|
46
|
+
import type { OreToastEvents, OreToastProps } from '../feedback/toast/toast.js';
|
|
47
|
+
import type { OreTypingIndicatorProps } from '../feedback/typing-indicator/typing-indicator.js';
|
|
48
|
+
import type { OreButtonProps } from '../inputs/button/button.js';
|
|
49
|
+
import type { OreButtonGroupProps } from '../inputs/button-group/button-group.js';
|
|
50
|
+
import type { OreCalendarEvents, OreCalendarProps } from '../inputs/calendar/calendar.js';
|
|
51
|
+
import type { OreCheckboxEvents, OreCheckboxProps } from '../inputs/checkbox/checkbox.js';
|
|
52
|
+
import type { OreCheckboxGroupEvents, OreCheckboxGroupProps } from '../inputs/checkbox-group/checkbox-group.js';
|
|
53
|
+
import type { OreComboboxEvents, OreComboboxOptionProps, OreComboboxProps } from '../inputs/combobox/combobox.types.js';
|
|
54
|
+
import type { OreDataGridEvents, OreDataGridProps } from '../inputs/datagrid/datagrid.js';
|
|
55
|
+
import type { OreDatePickerEvents, OreDatePickerProps } from '../inputs/date-picker/date-picker.js';
|
|
56
|
+
import type { OreFileInputEvents, OreFileInputProps } from '../inputs/file-input/file-input.js';
|
|
57
|
+
import type { OreInputEvents, OreInputProps } from '../inputs/input/input.js';
|
|
58
|
+
import type { OreMessageComposerEvents, OreMessageComposerProps } from '../inputs/message-composer/message-composer.js';
|
|
59
|
+
import type { OreNumberInputEvents, OreNumberInputProps } from '../inputs/number-input/number-input.js';
|
|
60
|
+
import type { OreOtpInputEvents, OreOtpInputProps } from '../inputs/otp-input/otp-input.js';
|
|
61
|
+
import type { OreRadioEvents, OreRadioProps } from '../inputs/radio/radio.js';
|
|
62
|
+
import type { OreRadioGroupEvents, OreRadioGroupProps } from '../inputs/radio-group/radio-group.js';
|
|
63
|
+
import type { OreRatingEvents, OreRatingProps } from '../inputs/rating/rating.js';
|
|
64
|
+
import type { OreSelectEvents, OreSelectProps } from '../inputs/select/select.js';
|
|
65
|
+
import type { OreSliderEvents, OreSliderProps } from '../inputs/slider/slider.js';
|
|
66
|
+
import type { OreSwitchEvents, OreSwitchProps } from '../inputs/switch/switch.js';
|
|
67
|
+
import type { OreTextareaEvents, OreTextareaProps } from '../inputs/textarea/textarea.js';
|
|
68
|
+
import type { OreTimePickerEvents, OreTimePickerProps } from '../inputs/time-picker/time-picker.js';
|
|
69
|
+
import type { OreBoxProps } from '../layout/box/box.js';
|
|
70
|
+
import type { OreGridProps } from '../layout/grid/grid.js';
|
|
71
|
+
import type { OreGridItemProps } from '../layout/grid-item/grid-item.js';
|
|
72
|
+
import type { NavbarElement, OreNavbarEvents, OreNavbarItemProps } from '../layout/navbar/navbar.js';
|
|
73
|
+
import type {
|
|
74
|
+
OreSidebarEvents,
|
|
75
|
+
OreSidebarGroupEvents,
|
|
76
|
+
OreSidebarGroupProps,
|
|
77
|
+
OreSidebarItemProps,
|
|
78
|
+
SidebarElement,
|
|
79
|
+
} from '../layout/sidebar/sidebar.js';
|
|
80
|
+
import type {
|
|
81
|
+
CommandPaletteItemInput,
|
|
82
|
+
OreCommandPaletteEvents,
|
|
83
|
+
OreCommandPaletteProps,
|
|
84
|
+
} from '../overlay/command-palette/command-palette.types.js';
|
|
85
|
+
import type { OreDialogEvents, OreDialogProps } from '../overlay/dialog/dialog.js';
|
|
86
|
+
import type { DrawerElement, OreDrawerEvents } from '../overlay/drawer/drawer.js';
|
|
87
|
+
import type { OreMenuEvents, OreMenuItemProps, OreMenuProps } from '../overlay/menu/menu.js';
|
|
88
|
+
import type {
|
|
89
|
+
OreNavigationMenuEvents,
|
|
90
|
+
OreNavigationMenuItemProps,
|
|
91
|
+
OreNavigationMenuProps,
|
|
92
|
+
} from '../overlay/navigation-menu/navigation-menu.js';
|
|
93
|
+
import type { OrePopoverEvents, OrePopoverProps } from '../overlay/popover/popover.js';
|
|
94
|
+
import type { OreTooltipEvents, OreTooltipProps } from '../overlay/tooltip/tooltip.js';
|
|
95
|
+
import type { AddEventListeners, FormValidityMethods } from '../shared/index.js';
|
|
96
|
+
|
|
97
|
+
export interface RefineElementMap {
|
|
98
|
+
// disclosure
|
|
99
|
+
'ore-accordion': HTMLElement & OreAccordionProps & AddEventListeners<OreAccordionEvents>;
|
|
100
|
+
'ore-accordion-item': HTMLElement & OreAccordionItemProps & AddEventListeners<OreAccordionItemEvents>;
|
|
101
|
+
// feedback
|
|
102
|
+
'ore-alert': HTMLElement & OreAlertProps & AddEventListeners<OreAlertEvents>;
|
|
103
|
+
'ore-async': HTMLElement & OreAsyncProps & AddEventListeners<OreAsyncEvents>;
|
|
104
|
+
// content
|
|
105
|
+
'ore-avatar': HTMLElement & OreAvatarProps;
|
|
106
|
+
'ore-avatar-group': HTMLElement & OreAvatarGroupProps;
|
|
107
|
+
'ore-badge': HTMLElement & OreBadgeProps;
|
|
108
|
+
// layout
|
|
109
|
+
'ore-box': HTMLElement & OreBoxProps;
|
|
110
|
+
'ore-breadcrumb': HTMLElement & OreBreadcrumbProps;
|
|
111
|
+
'ore-breadcrumb-item': HTMLElement & OreBreadcrumbItemProps;
|
|
112
|
+
// inputs
|
|
113
|
+
'ore-button': HTMLElement & OreButtonProps;
|
|
114
|
+
'ore-button-group': HTMLElement & OreButtonGroupProps;
|
|
115
|
+
'ore-calendar': HTMLElement & OreCalendarProps & AddEventListeners<OreCalendarEvents>;
|
|
116
|
+
'ore-card': HTMLElement & OreCardProps & AddEventListeners<OreCardEvents>;
|
|
117
|
+
'ore-carousel': HTMLElement & OreCarouselProps & AddEventListeners<OreCarouselEvents>;
|
|
118
|
+
'ore-carousel-slide': HTMLElement;
|
|
119
|
+
'ore-chat-message': HTMLElement & OreChatMessageProps & AddEventListeners<OreChatMessageEvents>;
|
|
120
|
+
'ore-checkbox': HTMLElement & OreCheckboxProps & FormValidityMethods & AddEventListeners<OreCheckboxEvents>;
|
|
121
|
+
'ore-checkbox-group': HTMLElement &
|
|
122
|
+
OreCheckboxGroupProps &
|
|
123
|
+
FormValidityMethods &
|
|
124
|
+
AddEventListeners<OreCheckboxGroupEvents>;
|
|
125
|
+
'ore-chip': HTMLElement & OreChipProps & AddEventListeners<OreChipEvents>;
|
|
126
|
+
'ore-code-window': HTMLElement & OreCodeWindowProps;
|
|
127
|
+
'ore-column': HTMLElement;
|
|
128
|
+
'ore-combobox': HTMLElement & OreComboboxProps & FormValidityMethods & AddEventListeners<OreComboboxEvents>;
|
|
129
|
+
'ore-combobox-option': HTMLElement & OreComboboxOptionProps;
|
|
130
|
+
'ore-command-palette': HTMLElement & OreCommandPaletteProps & AddEventListeners<OreCommandPaletteEvents>;
|
|
131
|
+
'ore-command-palette-item': HTMLElement & CommandPaletteItemInput;
|
|
132
|
+
'ore-copy-command': HTMLElement & OreCopyCommandProps & AddEventListeners<OreCopyCommandEvents>;
|
|
133
|
+
'ore-datagrid': HTMLElement & OreDataGridProps & AddEventListeners<OreDataGridEvents>;
|
|
134
|
+
'ore-date-picker': HTMLElement & OreDatePickerProps & AddEventListeners<OreDatePickerEvents>;
|
|
135
|
+
// overlay
|
|
136
|
+
'ore-dialog': HTMLElement & OreDialogProps & AddEventListeners<OreDialogEvents>;
|
|
137
|
+
'ore-drawer': DrawerElement & AddEventListeners<OreDrawerEvents>;
|
|
138
|
+
'ore-file-input': HTMLElement & OreFileInputProps & FormValidityMethods & AddEventListeners<OreFileInputEvents>;
|
|
139
|
+
'ore-grid': HTMLElement & OreGridProps;
|
|
140
|
+
'ore-grid-item': HTMLElement & OreGridItemProps;
|
|
141
|
+
'ore-icon': HTMLElement & OreIconProps;
|
|
142
|
+
'ore-input': HTMLElement & OreInputProps & FormValidityMethods & AddEventListeners<OreInputEvents>;
|
|
143
|
+
'ore-list': HTMLElement & OreListProps & AddEventListeners<OreListEvents>;
|
|
144
|
+
'ore-list-item': HTMLElement & OreListItemProps & AddEventListeners<OreListItemEvents>;
|
|
145
|
+
'ore-marquee': HTMLElement & OreMarqueeProps;
|
|
146
|
+
'ore-menu': HTMLElement & OreMenuProps & AddEventListeners<OreMenuEvents>;
|
|
147
|
+
'ore-menu-item': HTMLElement & OreMenuItemProps;
|
|
148
|
+
'ore-menu-separator': HTMLElement;
|
|
149
|
+
'ore-message-composer': HTMLElement &
|
|
150
|
+
OreMessageComposerProps &
|
|
151
|
+
FormValidityMethods &
|
|
152
|
+
AddEventListeners<OreMessageComposerEvents>;
|
|
153
|
+
'ore-navbar': NavbarElement & AddEventListeners<OreNavbarEvents>;
|
|
154
|
+
'ore-navbar-item': HTMLElement & OreNavbarItemProps;
|
|
155
|
+
'ore-navigation-menu': HTMLElement & OreNavigationMenuProps & AddEventListeners<OreNavigationMenuEvents>;
|
|
156
|
+
'ore-navigation-menu-item': HTMLElement & OreNavigationMenuItemProps;
|
|
157
|
+
'ore-navigation-menu-panel': HTMLElement;
|
|
158
|
+
'ore-number-input': HTMLElement & OreNumberInputProps & FormValidityMethods & AddEventListeners<OreNumberInputEvents>;
|
|
159
|
+
'ore-otp-input': HTMLElement & OreOtpInputProps & AddEventListeners<OreOtpInputEvents>;
|
|
160
|
+
'ore-pagination': HTMLElement & OrePaginationProps & AddEventListeners<OrePaginationEvents>;
|
|
161
|
+
'ore-password-strength': HTMLElement & OrePasswordStrengthProps;
|
|
162
|
+
'ore-popover': HTMLElement & OrePopoverProps & AddEventListeners<OrePopoverEvents>;
|
|
163
|
+
'ore-progress': HTMLElement & OreProgressProps;
|
|
164
|
+
'ore-radio': HTMLElement & OreRadioProps & FormValidityMethods & AddEventListeners<OreRadioEvents>;
|
|
165
|
+
'ore-radio-group': HTMLElement & OreRadioGroupProps & FormValidityMethods & AddEventListeners<OreRadioGroupEvents>;
|
|
166
|
+
'ore-rating': HTMLElement & OreRatingProps & FormValidityMethods & AddEventListeners<OreRatingEvents>;
|
|
167
|
+
'ore-select': HTMLElement & OreSelectProps & FormValidityMethods & AddEventListeners<OreSelectEvents>;
|
|
168
|
+
'ore-separator': HTMLElement & OreSeparatorProps;
|
|
169
|
+
'ore-sidebar': SidebarElement & AddEventListeners<OreSidebarEvents>;
|
|
170
|
+
'ore-sidebar-group': HTMLElement & OreSidebarGroupProps & AddEventListeners<OreSidebarGroupEvents>;
|
|
171
|
+
'ore-sidebar-item': HTMLElement & OreSidebarItemProps;
|
|
172
|
+
'ore-skeleton': HTMLElement & OreSkeletonProps;
|
|
173
|
+
'ore-slider': HTMLElement & OreSliderProps & FormValidityMethods & AddEventListeners<OreSliderEvents>;
|
|
174
|
+
'ore-stats': HTMLElement & OreStatsProps;
|
|
175
|
+
'ore-step': HTMLElement & OreStepProps;
|
|
176
|
+
'ore-stepper': HTMLElement & OreStepperProps & AddEventListeners<OreStepperEvents>;
|
|
177
|
+
'ore-switch': HTMLElement & OreSwitchProps & FormValidityMethods & AddEventListeners<OreSwitchEvents>;
|
|
178
|
+
'ore-tab-item': HTMLElement & OreTabItemProps;
|
|
179
|
+
'ore-tab-panel': HTMLElement & OreTabPanelProps;
|
|
180
|
+
'ore-table': HTMLElement & OreTableProps;
|
|
181
|
+
'ore-tabs': HTMLElement & OreTabsProps & AddEventListeners<OreTabsEvents>;
|
|
182
|
+
'ore-td': HTMLElement & {
|
|
183
|
+
colspan?: number | string;
|
|
184
|
+
headers?: string;
|
|
185
|
+
rowspan?: number | string;
|
|
186
|
+
};
|
|
187
|
+
'ore-text': HTMLElement & OreTextProps;
|
|
188
|
+
'ore-textarea': HTMLElement & OreTextareaProps & FormValidityMethods & AddEventListeners<OreTextareaEvents>;
|
|
189
|
+
'ore-th': HTMLElement & {
|
|
190
|
+
abbr?: string;
|
|
191
|
+
axis?: string;
|
|
192
|
+
colspan?: number | string;
|
|
193
|
+
headers?: string;
|
|
194
|
+
rowspan?: number | string;
|
|
195
|
+
scope?: 'col' | 'colgroup' | 'row' | 'rowgroup' | string;
|
|
196
|
+
};
|
|
197
|
+
'ore-time-picker': HTMLElement & OreTimePickerProps & AddEventListeners<OreTimePickerEvents>;
|
|
198
|
+
'ore-toast': HTMLElement & OreToastProps & AddEventListeners<OreToastEvents>;
|
|
199
|
+
'ore-tooltip': HTMLElement & OreTooltipProps & AddEventListeners<OreTooltipEvents>;
|
|
200
|
+
// table markers (light-DOM authoring API used by ore-table)
|
|
201
|
+
'ore-tr': HTMLElement & { foot?: boolean; head?: boolean };
|
|
202
|
+
'ore-typing-indicator': HTMLElement & OreTypingIndicatorProps;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
declare global {
|
|
206
|
+
interface HTMLElementTagNameMap extends RefineElementMap {}
|
|
207
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vielzeug/refine",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Accessible, themeable web components built on Ore custom element primitives",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -636,18 +636,17 @@
|
|
|
636
636
|
"test:e2e": "playwright test"
|
|
637
637
|
},
|
|
638
638
|
"dependencies": {
|
|
639
|
-
"@vielzeug/arsenal": "
|
|
640
|
-
"@vielzeug/
|
|
641
|
-
"@vielzeug/
|
|
642
|
-
"@vielzeug/
|
|
643
|
-
"@vielzeug/
|
|
644
|
-
"@vielzeug/
|
|
645
|
-
"@vielzeug/
|
|
646
|
-
"@vielzeug/
|
|
647
|
-
"@vielzeug/
|
|
648
|
-
"@vielzeug/
|
|
649
|
-
"
|
|
650
|
-
"lucide": "^1.41.0"
|
|
639
|
+
"@vielzeug/arsenal": "3.0.0",
|
|
640
|
+
"@vielzeug/dnd": "3.0.0",
|
|
641
|
+
"@vielzeug/focus": "3.0.0",
|
|
642
|
+
"@vielzeug/gesture": "3.0.0",
|
|
643
|
+
"@vielzeug/keymap": "3.0.0",
|
|
644
|
+
"@vielzeug/orbit": "3.0.0",
|
|
645
|
+
"@vielzeug/ore": "3.0.0",
|
|
646
|
+
"@vielzeug/ripple": "3.0.0",
|
|
647
|
+
"@vielzeug/sentinel": "3.0.0",
|
|
648
|
+
"@vielzeug/tempo": "3.0.0",
|
|
649
|
+
"lucide": "^1.43.0"
|
|
651
650
|
},
|
|
652
651
|
"devDependencies": {
|
|
653
652
|
"@axe-core/playwright": "^4.13.0",
|
|
@@ -656,6 +655,7 @@
|
|
|
656
655
|
"@playwright/test": "^1.63.0",
|
|
657
656
|
"@types/culori": "^4.0.1",
|
|
658
657
|
"@types/node": "^26.4.1",
|
|
658
|
+
"@vielzeug/assay": "3.0.0",
|
|
659
659
|
"axe-core": "^4.13.0",
|
|
660
660
|
"browserslist": "^4.28.9",
|
|
661
661
|
"culori": "^4.0.2",
|