1import { c as createComponent, a as computed, h, g as getCurrentInstance, a2 as createDirective, a3 as isKeyCode, a4 as addEvt, a5 as cleanEvt, a1 as stop, a6 as position, r as ref, d as onBeforeUnmount, T as Transition, v as withDirectives, U as stopAndPrevent, $ as prevent, f as listenOpts } from "./index.9f81da9c.js"; 2import { a as useSizeProps, u as useSize, d as vmHasRouter, Q as QSpinner } from "./vm.b4937834.js"; 3import { h as hSlot, a as hMergeSlot } from "./render.a8d00335.js"; 4import { c as css } from "./dom.68b939c4.js"; 5const defaultViewBox = "0 0 24 24"; 6const sameFn = (i) => i; 7const ionFn = (i) => `ionicons ${i}`; 8const libMap = { 9 "mdi-": (i) => `mdi ${i}`, 10 "icon-": sameFn, 11 "bt-": (i) => `bt ${i}`, 12 "eva-": (i) => `eva ${i}`, 13 "ion-md": ionFn, 14 "ion-ios": ionFn, 15 "ion-logo": ionFn, 16 "iconfont ": sameFn, 17 "ti-": (i) => `themify-icon ${i}`, 18 "bi-": (i) => `bootstrap-icons ${i}` 19}; 20const matMap = { 21 o_: "-outlined", 22 r_: "-round", 23 s_: "-sharp" 24}; 25const symMap = { 26 sym_o_: "-outlined", 27 sym_r_: "-rounded", 28 sym_s_: "-sharp" 29}; 30const libRE = new RegExp("^(" + Object.keys(libMap).join("|") + ")"); 31const matRE = new RegExp("^(" + Object.keys(matMap).join("|") + ")"); 32const symRE = new RegExp("^(" + Object.keys(symMap).join("|") + ")"); 33const mRE = /^[Mm]\s?[-+]?\.?\d/; 34const imgRE = /^img:/; 35const svgUseRE = /^svguse:/; 36const ionRE = /^ion-/; 37const faRE = /^(fa-(classic|sharp|solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /; 38var QIcon = createComponent({ 39 name: "QIcon", 40 props: { 41 ...useSizeProps, 42 tag: { 43 type: String, 44 default: "i" 45 }, 46 name: String, 47 color: String, 48 left: Boolean, 49 right: Boolean 50 }, 51 setup(props, { slots }) { 52 const { proxy: { $q } } = getCurrentInstance(); 53 const sizeStyle = useSize(props); 54 const classes = computed( 55 () => "q-icon" + (props.left === true ? " on-left" : "") + (props.right === true ? " on-right" : "") + (props.color !== void 0 ? ` text-${props.color}` : "") 56 ); 57 const type = computed(() => { 58 let cls; 59 let icon = props.name; 60 if (icon === "none" || !icon) { 61 return { none: true }; 62 } 63 if ($q.iconMapFn !== null) { 64 const res = $q.iconMapFn(icon); 65 if (res !== void 0) { 66 if (res.icon !== void 0) { 67 icon = res.icon; 68 if (icon === "none" || !icon) { 69 return { none: true }; 70 } 71 } else { 72 return { 73 cls: res.cls, 74 content: res.content !== void 0 ? res.content : " " 75 }; 76 } 77 } 78 } 79 if (mRE.test(icon) === true) { 80 const [def, viewBox = defaultViewBox] = icon.split("|"); 81 return { 82 svg: true,
83 viewBox, 84 nodes: def.split("&&").map((path) => { 85 const [d, style, transform] = path.split("@@"); 86 return h("path", { style, d, transform }); 87 }) 88 }; 89 } 90 if (imgRE.test(icon) === true) { 91 return { 92 img: true, 93 src: icon.substring(4) 94 }; 95 } 96 if (svgUseRE.test(icon) === true) { 97 const [def, viewBox = defaultViewBox] = icon.split("|"); 98 return { 99 svguse: true, 100 src: def.substring(7), 101 viewBox 102 }; 103 } 104 let content = " "; 105 const matches = icon.match(libRE); 106 if (matches !== null) { 107 cls = libMap[matches[1]](icon); 108 } else if (faRE.test(icon) === true) { 109 cls = icon; 110 } else if (ionRE.test(icon) === true) { 111 cls = `ionicons ion-${$q.platform.is.ios === true ? "ios" : "md"}${icon.substring(3)}`; 112 } else if (symRE.test(icon) === true) { 113 cls = "notranslate material-symbols"; 114 const matches2 = icon.match(symRE); 115 if (matches2 !== null) { 116 icon = icon.substring(6); 117 cls += symMap[matches2[1]]; 118 } 119 content = icon; 120 } else { 121 cls = "notranslate material-icons"; 122 const matches2 = icon.match(matRE); 123 if (matches2 !== null) { 124 icon = icon.substring(2); 125 cls += matMap[matches2[1]]; 126 } 127 content = icon; 128 } 129 return { 130 cls, 131 content 132 }; 133 }); 134 return () => { 135 const data = { 136 class: classes.value, 137 style: sizeStyle.value, 138 "aria-hidden": "true", 139 role: "presentation" 140 }; 141 if (type.value.none === true) { 142 return h(props.tag, data, hSlot(slots.default)); 143 } 144 if (type.value.img === true) { 145 return h(props.tag, data, hMergeSlot(slots.default, [ 146 h("img", { src: type.value.src }) 147 ])); 148 } 149 if (type.value.svg === true) { 150 return h(props.tag, data, hMergeSlot(slots.default, [ 151 h("svg", {
152 viewBox: type.value.viewBox || "0 0 24 24" 153 }, type.value.nodes) 154 ])); 155 } 156 if (type.value.svguse === true) { 157 return h(props.tag, data, hMergeSlot(slots.default, [ 158 h("svg", { 159 viewBox: type.value.viewBox 160 }, [ 161 h("use", { "xlink:href": type.value.src }) 162 ]) 163 ])); 164 } 165 if (type.value.cls !== void 0) { 166 data.class += " " + type.value.cls; 167 } 168 return h(props.tag, data, hMergeSlot(slots.default, [ 169 type.value.content 170 ])); 171 }; 172 } 173}); 174function throttle(fn, limit = 250) { 175 let wait = false, result; 176 return function() { 177 if (wait === false) { 178 wait = true; 179 setTimeout(() => { 180 wait = false; 181 }, limit); 182 result = fn.apply(this, arguments); 183 } 184 return result; 185 }; 186} 187function showRipple(evt, el, ctx, forceCenter) { 188 ctx.modifiers.stop === true && stop(evt); 189 const color = ctx.modifiers.color; 190 let center = ctx.modifiers.center; 191 center = center === true || forceCenter === true; 192 const node = document.createElement("span"), innerNode = document.createElement("span"), pos = position(evt), { left, top, width, height } = el.getBoundingClientRect(), diameter = Math.sqrt(width * width + height * height), radius = diameter / 2, centerX = `${(width - diameter) / 2}px`, x = center ? centerX : `${pos.left - left - radius}px`, centerY = `${(height - diameter) / 2}px`, y = center ? centerY : `${pos.top - top - radius}px`; 193 innerNode.className = "q-ripple__inner"; 194 css(innerNode, { 195 height: `${diameter}px`, 196 width: `${diameter}px`, 197 transform: `translate3d(${x},${y},0) scale3d(.2,.2,1)`, 198 opacity: 0 199 }); 200 node.className = `q-ripple${color ? " text-" + color : ""}`; 201 node.setAttribute("dir", "ltr"); 202 node.appendChild(innerNode); 203 el.appendChild(node); 204 const abort = () => { 205 node.remove(); 206 clearTimeout(timer); 207 }; 208 ctx.abort.push(abort); 209 let timer = setTimeout(() => { 210 innerNode.classList.add("q-ripple__inner--enter"); 211 innerNode.style.transform = `translate3d(${centerX},${centerY},0) scale3d(1,1,1)`; 212 innerNode.style.opacity = 0.2; 213 timer = setTimeout(() => { 214 innerNode.classList.remove("q-ripple__inner--enter"); 215 innerNode.classList.add("q-ripple__inner--leave"); 216 innerNode.style.opacity = 0; 217 timer = setTimeout(() => { 218 node.remove(); 219 ctx.abort.splice(ctx.abort.indexOf(abort), 1); 220 }, 275); 221 }, 250); 222 }, 50); 223} 224function updateModifiers(ctx, { modifiers, value, arg }) { 225 const cfg = Object.assign({}, ctx.cfg.ripple, modifiers, value); 226 ctx.modifiers = { 227 early: cfg.early === true, 228 stop: cfg.stop === true, 229 center: cfg.center === true, 230 color: cfg.color || arg, 231 keyCodes: [].concat(cfg.keyCodes || 13) 232 }; 233} 234var Ripple = createDirective( 235 { 236 name: "ripple", 237 beforeMount(el, binding) { 238 const cfg = binding.instance.$.appContext.config.globalProperties.$q.config || {}; 239 if (cfg.ripple === false) { 240 return; 241 } 242 const ctx = { 243 cfg, 244 enabled: binding.value !== false, 245 modifiers: {}, 246 abort: [], 247 start(evt) { 248 if (ctx.enabled === true && evt.qSkipRipple !== true && evt.type === (ctx.modifiers.early === true ? "pointerdown" : "click")) { 249 showRipple(evt, el, ctx, evt.qKeyEvent === true); 250 } 251 }, 252 keystart: throttle((evt) => { 253 if (ctx.enabled === true && evt.qSkipRipple !== true && isKeyCode(evt, ctx.modifiers.keyCodes) === true && evt.type === `key${ctx.modifiers.early === true ? "down" : "up"}`) { 254 showRipple(evt, el, ctx, true); 255 } 256 }, 300) 257 }; 258 updateModifiers(ctx, binding); 259 el.__qripple = ctx; 260 addEvt(ctx, "main", [ 261 [el, "pointerdown", "start", "passive"], 262 [el, "click", "start", "passive"], 263 [el, "keydown", "keystart", "passive"], 264 [el, "keyup", "keystart", "passive"] 265 ]); 266 }, 267 updated(el, binding) { 268 if (binding.oldValue !== binding.value) { 269 const ctx = el.__qripple; 270 if (ctx !== void 0) { 271 ctx.enabled = binding.value !== false; 272 if (ctx.enabled === true && Object(binding.value) === binding.value) { 273 updateModifiers(ctx, binding); 274 } 275 } 276 } 277 }, 278 beforeUnmount(el) { 279 const ctx = el.__qripple; 280 if (ctx !== void 0) { 281 ctx.abort.forEach((fn) => { 282 fn(); 283 }); 284 cleanEvt(ctx, "main"); 285 delete el._qripple; 286 } 287 } 288 } 289);
290const alignMap = { 291 left: "start", 292 center: "center", 293 right: "end", 294 between: "between", 295 around: "around", 296 evenly: "evenly", 297 stretch: "stretch" 298}; 299const alignValues = Object.keys(alignMap); 300const useAlignProps = { 301 align: { 302 type: String, 303 validator: (v) => alignValues.includes(v) 304 } 305}; 306function useAlign(props) { 307 return computed(() => { 308 const align = props.align === void 0 ? props.vertical === true ? "stretch" : "left" : props.align; 309 return `${props.vertical === true ? "items" : "justify"}-${alignMap[align]}`; 310 }); 311} 312function getOriginalPath(record) { 313 return record ? record.aliasOf ? record.aliasOf.path : record.path : ""; 314} 315function isSameRouteRecord(a, b) { 316 return (a.aliasOf || a) === (b.aliasOf || b); 317} 318function includesParams(outer, inner) { 319 for (const key in inner) { 320 const innerValue = inner[key], outerValue = outer[key]; 321 if (typeof innerValue === "string") { 322 if (innerValue !== outerValue) { 323 return false; 324 } 325 } else if (Array.isArray(outerValue) === false || outerValue.length !== innerValue.length || innerValue.some((value, i) => value !== outerValue[i])) { 326 return false; 327 } 328 } 329 return true; 330} 331function isEquivalentArray(a, b) { 332 return Array.isArray(b) === true ? a.length === b.length && a.every((value, i) => value === b[i]) : a.length === 1 && a[0] === b; 333} 334function isSameRouteLocationParamsValue(a, b) { 335 return Array.isArray(a) === true ? isEquivalentArray(a, b) : Array.isArray(b) === true ? isEquivalentArray(b, a) : a === b; 336} 337function isSameRouteLocationParams(a, b) { 338 if (Object.keys(a).length !== Object.keys(b).length) { 339 return false; 340 } 341 for (const key in a) { 342 if (isSameRouteLocationParamsValue(a[key], b[key]) === false) { 343 return false; 344 } 345 } 346 return true; 347} 348const useRouterLinkNonMatchingProps = { 349 to: [String, Object], 350 replace: Boolean, 351 href: String, 352 target: String, 353 disable: Boolean 354}; 355function useRouterLink({ fallbackTag, useDisableForRouterLinkProps = true } = {}) { 356 const vm = getCurrentInstance(); 357 const { props, proxy, emit } = vm; 358 const hasRouter = vmHasRouter(vm); 359 const hasHrefLink = computed(() => props.disable !== true && props.href !== void 0); 360 const hasRouterLinkProps = useDisableForRouterLinkProps === true ? computed( 361 () => hasRouter === true && props.disable !== true && hasHrefLink.value !== true && props.to !== void 0 && props.to !== null && props.to !== "" 362 ) : computed( 363 () => hasRouter === true && hasHrefLink.value !== true && props.to !== void 0 && props.to !== null && props.to !== "" 364 ); 365 const resolvedLink = computed(() => hasRouterLinkProps.value === true ? getLink(props.to) : null); 366 const hasRouterLink = computed(() => resolvedLink.value !== null); 367 const hasLink = computed(() => hasHrefLink.value === true || hasRouterLink.value === true); 368 const linkTag = computed(() => props.type === "a" || hasLink.value === true ? "a" : props.tag || fallbackTag || "div"); 369 const linkAttrs = computed(() => hasHrefLink.value === true ? { 370 href: props.href, 371 target: props.target 372 } : hasRouterLink.value === true ? { 373 href: resolvedLink.value.href, 374 target: props.target 375 } : {}); 376 const linkActiveIndex = computed(() => { 377 if (hasRouterLink.value === false) { 378 return -1; 379 } 380 const { matched } = resolvedLink.value, { length } = matched, routeMatched = matched[length - 1]; 381 if (routeMatched === void 0) { 382 return -1; 383 } 384 const currentMatched = proxy.$route.matched; 385 if (currentMatched.length === 0) { 386 return -1; 387 } 388 const index = currentMatched.findIndex( 389 isSameRouteRecord.bind(null, routeMatched) 390 ); 391 if (index !== -1) { 392 return index; 393 } 394 const parentRecordPath = getOriginalPath(matched[length - 2]); 395 return length > 1 && getOriginalPath(routeMatched) === parentRecordPath && currentMatched[currentMatched.length - 1].path !== parentRecordPath ? currentMatched.findIndex( 396 isSameRouteRecord.bind(null, matched[length - 2]) 397 ) : index; 398 }); 399 const linkIsActive = computed( 400 () => hasRouterLink.value === true && linkActiveIndex.value !== -1 && includesParams(proxy.$route.params, resolvedLink.value.params) 401 ); 402 const linkIsExactActive = computed( 403 () => linkIsActive.value === true && linkActiveIndex.value === proxy.$route.matched.length - 1 && isSameRouteLocationParams(proxy.$route.params, resolvedLink.value.params) 404 ); 405 const linkClass = computed(() => hasRouterLink.value === true ? linkIsExactActive.value === true ? ` ${props.exactActiveClass} ${props.activeClass}` : props.exact === true ? "" : linkIsActive.value === true ? ` ${props.activeClass}` : "" : ""); 406 function getLink(to) { 407 try { 408 return proxy.$router.resolve(to); 409 } catch (_) { 410 } 411 return null; 412 } 413 function navigateToRouterLink(e, { returnRouterError, to = props.to, replace = props.replace } = {}) { 414 if (props.disable === true) { 415 e.preventDefault(); 416 return Promise.resolve(false); 417 } 418 if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey || e.button !== void 0 && e.button !== 0 || props.target === "_blank") { 419 return Promise.resolve(false); 420 } 421 e.preventDefault(); 422 const promise = proxy.$router[replace === true ? "replace" : "push"](to); 423 return returnRouterError === true ? promise : promise.then(() => { 424 }).catch(() => { 425 }); 426 } 427 function navigateOnClick(e) { 428 if (hasRouterLink.value === true) { 429 const go = (opts) => navigateToRouterLink(e, opts); 430 emit("click", e, go); 431 e.defaultPrevented !== true && go(); 432 } else { 433 emit("click", e); 434 } 435 } 436 return { 437 hasRouterLink, 438 hasHrefLink, 439 hasLink, 440 linkTag, 441 resolvedLink, 442 linkIsActive, 443 linkIsExactActive, 444 linkClass, 445 linkAttrs, 446 getLink, 447 navigateToRouterLink, 448 navigateOnClick 449 }; 450} 451const btnPadding = { 452 none: 0, 453 xs: 4, 454 sm: 8, 455 md: 16, 456 lg: 24, 457 xl: 32 458}; 459const defaultSizes = { 460 xs: 8, 461 sm: 10, 462 md: 14, 463 lg: 20, 464 xl: 24 465}; 466const formTypes = ["button", "submit", "reset"]; 467const mediaTypeRE = /[^\s]\/[^\s]/; 468const btnDesignOptions = ["flat", "outline", "push", "unelevated"]; 469function getBtnDesign(props, defaultValue) { 470 if (props.flat === true) 471 return "flat"; 472 if (props.outline === true) 473 return "outline"; 474 if (props.push === true) 475 return "push"; 476 if (props.unelevated === true) 477 return "unelevated"; 478 return defaultValue; 479} 480const nonRoundBtnProps = { 481 ...useSizeProps, 482 ...useRouterLinkNonMatchingProps, 483 type: { 484 type: String, 485 default: "button" 486 }, 487 label: [Number, String], 488 icon: String, 489 iconRight: String, 490 ...btnDesignOptions.reduce( 491 (acc, val) => (acc[val] = Boolean) && acc, 492 {} 493 ), 494 square: Boolean, 495 rounded: Boolean, 496 glossy: Boolean, 497 size: String, 498 fab: Boolean, 499 fabMini: Boolean, 500 padding: String, 501 color: String, 502 textColor: String, 503 noCaps: Boolean, 504 noWrap: Boolean, 505 dense: Boolean, 506 tabindex: [Number, String], 507 ripple: { 508 type: [Boolean, Object], 509 default: true 510 }, 511 align: { 512 ...useAlignProps.align, 513 default: "center" 514 }, 515 stack: Boolean, 516 stretch: Boolean, 517 loading: { 518 type: Boolean, 519 default: null 520 }, 521 disable: Boolean 522}; 523const useBtnProps = { 524 ...nonRoundBtnProps, 525 round: Boolean 526}; 527function useBtn(props) { 528 const sizeStyle = useSize(props, defaultSizes); 529 const alignClass = useAlign(props); 530 const { hasRouterLink, hasLink, linkTag, linkAttrs, navigateOnClick } = useRouterLink({ 531 fallbackTag: "button" 532 }); 533 const style = computed(() => { 534 const obj = props.fab === false && props.fabMini === false ? sizeStyle.value : {}; 535 return props.padding !== void 0 ? Object.assign({}, obj, { 536 padding: props.padding.split(/\s+/).map((v) => v in btnPadding ? btnPadding[v] + "px" : v).join(" "), 537 minWidth: "0", 538 minHeight: "0" 539 }) : obj; 540 }); 541 const isRounded = computed( 542 () => props.rounded === true || props.fab === true || props.fabMini === true 543 ); 544 const isActionable = computed( 545 () => props.disable !== true && props.loading !== true 546 ); 547 const tabIndex = computed(() => isActionable.value === true ? props.tabindex || 0 : -1); 548 const design = computed(() => getBtnDesign(props, "standard")); 549 const attributes = computed(() => { 550 const acc = { tabindex: tabIndex.value }; 551 if (hasLink.value === true) { 552 Object.assign(acc, linkAttrs.value); 553 } else if (formTypes.includes(props.type) === true) { 554 acc.type = props.type; 555 } 556 if (linkTag.value === "a") { 557 if (props.disable === true) { 558 acc["aria-disabled"] = "true"; 559 } else if (acc.href === void 0) { 560 acc.role = "button"; 561 } 562 if (hasRouterLink.value !== true && mediaTypeRE.test(props.type) === true) { 563 acc.type = props.type; 564 } 565 } else if (props.disable === true) { 566 acc.disabled = ""; 567 acc["aria-disabled"] = "true"; 568 } 569 if (props.loading === true && props.percentage !== void 0) { 570 Object.assign(acc, { 571 role: "progressbar", 572 "aria-valuemin": 0, 573 "aria-valuemax": 100, 574 "aria-valuenow": props.percentage 575 }); 576 } 577 return acc; 578 }); 579 const classes = computed(() => {
580 let colors; 581 if (props.color !== void 0) { 582 if (props.flat === true || props.outline === true) { 583 colors = `text-${props.textColor || props.color}`; 584 } else { 585 colors = `bg-${props.color} text-${props.textColor || "white"}`; 586 } 587 } else if (props.textColor) { 588 colors = `text-${props.textColor}`; 589 } 590 const shape = props.round === true ? "round" : `rectangle${isRounded.value === true ? " q-btn--rounded" : props.square === true ? " q-btn--square" : ""}`; 591 return `q-btn--${design.value} q-btn--${shape}` + (colors !== void 0 ? " " + colors : "") + (isActionable.value === true ? " q-btn--actionable q-focusable q-hoverable" : props.disable === true ? " disabled" : "") + (props.fab === true ? " q-btn--fab" : props.fabMini === true ? " q-btn--fab-mini" : "") + (props.noCaps === true ? " q-btn--no-uppercase" : "") + (props.dense === true ? " q-btn--dense" : "") + (props.stretch === true ? " no-border-radius self-stretch" : "") + (props.glossy === true ? " glossy" : "") + (props.square ? " q-btn--square" : ""); 592 }); 593 const innerClasses = computed( 594 () => alignClass.value + (props.stack === true ? " column" : " row") + (props.noWrap === true ? " no-wrap text-no-wrap" : "") + (props.loading === true ? " q-btn__content--hidden" : "") 595 ); 596 return { 597 classes, 598 style, 599 innerClasses, 600 attributes, 601 hasLink, 602 linkTag, 603 navigateOnClick, 604 isActionable 605 }; 606} 607const { passiveCapture } = listenOpts; 608let touchTarget = null, keyboardTarget = null, mouseTarget = null; 609var QBtn = createComponent({ 610 name: "QBtn", 611 props: { 612 ...useBtnProps, 613 percentage: Number, 614 darkPercentage: Boolean, 615 onTouchstart: [Function, Array] 616 }, 617 emits: ["click", "keydown", "mousedown", "keyup"], 618 setup(props, { slots, emit }) { 619 const { proxy } = getCurrentInstance(); 620 const { 621 classes, 622 style, 623 innerClasses, 624 attributes, 625 hasLink, 626 linkTag, 627 navigateOnClick, 628 isActionable 629 } = useBtn(props); 630 const rootRef = ref(null); 631 const blurTargetRef = ref(null); 632 let localTouchTargetEl = null, avoidMouseRipple, mouseTimer = null; 633 const hasLabel = computed( 634 () => props.label !== void 0 && props.label !== null && props.label !== "" 635 ); 636 const ripple = computed(() => props.disable === true || props.ripple === false ? false : { 637 keyCodes: hasLink.value === true ? [13, 32] : [13], 638 ...props.ripple === true ? {} : props.ripple 639 }); 640 const rippleProps = computed(() => ({ center: props.round })); 641 const percentageStyle = computed(() => { 642 const val = Math.max(0, Math.min(100, props.percentage)); 643 return val > 0 ? { transition: "transform 0.6s", transform: `translateX(${val - 100}%)` } : {}; 644 }); 645 const onEvents = computed(() => { 646 if (props.loading === true) { 647 return { 648 onMousedown: onLoadingEvt, 649 onTouchstart: onLoadingEvt, 650 onClick: onLoadingEvt, 651 onKeydown: onLoadingEvt, 652 onKeyup: onLoadingEvt 653 }; 654 } 655 if (isActionable.value === true) { 656 const acc = { 657 onClick, 658 onKeydown, 659 onMousedown 660 }; 661 if (proxy.$q.platform.has.touch === true) { 662 const suffix = props.onTouchstart !== void 0 ? "" : "Passive"; 663 acc[`onTouchstart${suffix}`] = onTouchstart; 664 } 665 return acc; 666 } 667 return { 668 onClick: stopAndPrevent 669 }; 670 }); 671 const nodeProps = computed(() => ({ 672 ref: rootRef, 673 class: "q-btn q-btn-item non-selectable no-outline " + classes.value, 674 style: style.value, 675 ...attributes.value, 676 ...onEvents.value 677 })); 678 function onClick(e) { 679 if (rootRef.value === null) 680 return; 681 if (e !== void 0) { 682 if (e.defaultPrevented === true) { 683 return; 684 } 685 const el = document.activeElement; 686 if (props.type === "submit" && el !== document.body && rootRef.value.contains(el) === false && el.contains(rootRef.value) === false) { 687 rootRef.value.focus(); 688 const onClickCleanup = () => { 689 document.removeEventListener("keydown", stopAndPrevent, true); 690 document.removeEventListener("keyup", onClickCleanup, passiveCapture); 691 rootRef.value !== null && rootRef.value.removeEventListener("blur", onClickCleanup, passiveCapture); 692 }; 693 document.addEventListener("keydown", stopAndPrevent, true); 694 document.addEventListener("keyup", onClickCleanup, passiveCapture); 695 rootRef.value.addEventListener("blur", onClickCleanup, passiveCapture); 696 } 697 } 698 navigateOnClick(e); 699 } 700 function onKeydown(e) { 701 if (rootRef.value === null) 702 return; 703 emit("keydown", e); 704 if (isKeyCode(e, [13, 32]) === true && keyboardTarget !== rootRef.value) { 705 keyboardTarget !== null && cleanup(); 706 if (e.defaultPrevented !== true) { 707 rootRef.value.focus(); 708 keyboardTarget = rootRef.value; 709 rootRef.value.classList.add("q-btn--active"); 710 document.addEventListener("keyup", onPressEnd, true); 711 rootRef.value.addEventListener("blur", onPressEnd, passiveCapture); 712 } 713 stopAndPrevent(e); 714 } 715 } 716 function onTouchstart(e) { 717 if (rootRef.value === null) 718 return; 719 emit("touchstart", e); 720 if (e.defaultPrevented === true) 721 return; 722 if (touchTarget !== rootRef.value) { 723 touchTarget !== null && cleanup(); 724 touchTarget = rootRef.value; 725 localTouchTargetEl = e.target; 726 localTouchTargetEl.addEventListener("touchcancel", onPressEnd, passiveCapture); 727 localTouchTargetEl.addEventListener("touchend", onPressEnd, passiveCapture); 728 } 729 avoidMouseRipple = true; 730 mouseTimer !== null && clearTimeout(mouseTimer); 731 mouseTimer = setTimeout(() => { 732 mouseTimer = null; 733 avoidMouseRipple = false;
734 }, 200); 735 } 736 function onMousedown(e) { 737 if (rootRef.value === null) 738 return; 739 e.qSkipRipple = avoidMouseRipple === true; 740 emit("mousedown", e); 741 if (e.defaultPrevented !== true && mouseTarget !== rootRef.value) { 742 mouseTarget !== null && cleanup(); 743 mouseTarget = rootRef.value; 744 rootRef.value.classList.add("q-btn--active"); 745 document.addEventListener("mouseup", onPressEnd, passiveCapture); 746 } 747 } 748 function onPressEnd(e) { 749 if (rootRef.value === null) 750 return; 751 if (e !== void 0 && e.type === "blur" && document.activeElement === rootRef.value) { 752 return; 753 } 754 if (e !== void 0 && e.type === "keyup") { 755 if (keyboardTarget === rootRef.value && isKeyCode(e, [13, 32]) === true) { 756 const evt = new MouseEvent("click", e); 757 evt.qKeyEvent = true; 758 e.defaultPrevented === true && prevent(evt); 759 e.cancelBubble === true && stop(evt); 760 rootRef.value.dispatchEvent(evt); 761 stopAndPrevent(e); 762 e.qKeyEvent = true; 763 } 764 emit("keyup", e); 765 } 766 cleanup(); 767 } 768 function cleanup(destroying) { 769 const blurTarget = blurTargetRef.value; 770 if (destroying !== true && (touchTarget === rootRef.value || mouseTarget === rootRef.value) && blurTarget !== null && blurTarget !== document.activeElement) { 771 blurTarget.setAttribute("tabindex", -1); 772 blurTarget.focus(); 773 } 774 if (touchTarget === rootRef.value) { 775 if (localTouchTargetEl !== null) { 776 localTouchTargetEl.removeEventListener("touchcancel", onPressEnd, passiveCapture); 777 localTouchTargetEl.removeEventListener("touchend", onPressEnd, passiveCapture); 778 } 779 touchTarget = localTouchTargetEl = null; 780 } 781 if (mouseTarget === rootRef.value) { 782 document.removeEventListener("mouseup", onPressEnd, passiveCapture); 783 mouseTarget = null; 784 } 785 if (keyboardTarget === rootRef.value) { 786 document.removeEventListener("keyup", onPressEnd, true); 787 rootRef.value !== null && rootRef.value.removeEventListener("blur", onPressEnd, passiveCapture); 788 keyboardTarget = null; 789 } 790 rootRef.value !== null && rootRef.value.classList.remove("q-btn--active"); 791 } 792 function onLoadingEvt(evt) { 793 stopAndPrevent(evt); 794 evt.qSkipRipple = true; 795 } 796 onBeforeUnmount(() => { 797 cleanup(true); 798 }); 799 Object.assign(proxy, { 800 click: (e) => { 801 if (isActionable.value === true) { 802 onClick(e); 803 } 804 } 805 }); 806 return () => { 807 let inner = []; 808 props.icon !== void 0 && inner.push( 809 h(QIcon, { 810 name: props.icon, 811 left: props.stack !== true && hasLabel.value === true, 812 role: "img" 813 }) 814 ); 815 hasLabel.value === true && inner.push( 816 h("span", { class: "block" }, [props.label]) 817 ); 818 inner = hMergeSlot(slots.default, inner); 819 if (props.iconRight !== void 0 && props.round === false) { 820 inner.push( 821 h(QIcon, { 822 name: props.iconRight, 823 right: props.stack !== true && hasLabel.value === true, 824 role: "img" 825 }) 826 ); 827 } 828 const child = [ 829 h("span", { 830 class: "q-focus-helper", 831 ref: blurTargetRef 832 }) 833 ]; 834 if (props.loading === true && props.percentage !== void 0) { 835 child.push( 836 h("span", { 837 class: "q-btn__progress absolute-full overflow-hidden" + (props.darkPercentage === true ? " q-btn__progress--dark" : "") 838 }, [ 839 h("span", { 840 class: "q-btn__progress-indicator fit block", 841 style: percentageStyle.value 842 }) 843 ]) 844 ); 845 } 846 child.push( 847 h("span", { 848 class: "q-btn__content text-center col items-center q-anchor--skip " + innerClasses.value 849 }, inner) 850 ); 851 props.loading !== null && child.push( 852 h(Transition, { 853 name: "q-transition--fade" 854 }, () => props.loading === true ? [ 855 h("span", { 856 key: "loading", 857 class: "absolute-full flex flex-center" 858 }, slots.loading !== void 0 ? slots.loading() : [h(QSpinner)]) 859 ] : null) 860 ); 861 return withDirectives( 862 h( 863 linkTag.value, 864 nodeProps.value, 865 child 866 ), 867 [[ 868 Ripple, 869 ripple.value, 870 void 0, 871 rippleProps.value 872 ]] 873 ); 874 }; 875 } 876}); 877export { QIcon as Q, QBtn as a };
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.