How to use openBlock method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Layout.8ab6c7a4.js

Source:Layout.8ab6c7a4.js Github

copy

Full Screen

...22const _sfc_main$j = {};23const _hoisted_1$f = { class: "theme-default-content custom" };24function _sfc_render(_ctx, _cache) {25 const _component_Content = resolveComponent("Content");26 return openBlock(), createElementBlock("div", _hoisted_1$f, [27 createVNode(_component_Content)28 ]);29}30var HomeContent = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render]]);31const _hoisted_1$e = {32 key: 0,33 class: "features"34};35const _sfc_main$i = /* @__PURE__ */ defineComponent({36 setup(__props) {37 const frontmatter = usePageFrontmatter();38 const features = computed(() => {39 if (isArray(frontmatter.value.features)) {40 return frontmatter.value.features;41 }42 return [];43 });44 return (_ctx, _cache) => {45 return unref(features).length ? (openBlock(), createElementBlock("div", _hoisted_1$e, [46 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(features), (feature) => {47 return openBlock(), createElementBlock("div", {48 key: feature.title,49 class: "feature"50 }, [51 createBaseVNode("h2", null, toDisplayString(feature.title), 1),52 createBaseVNode("p", null, toDisplayString(feature.details), 1)53 ]);54 }), 128))55 ])) : createCommentVNode("", true);56 };57 }58});59const _hoisted_1$d = ["innerHTML"];60const _hoisted_2$7 = ["textContent"];61const _sfc_main$h = /* @__PURE__ */ defineComponent({62 setup(__props) {63 const frontmatter = usePageFrontmatter();64 const footer = computed(() => frontmatter.value.footer);65 const footerHtml = computed(() => frontmatter.value.footerHtml);66 return (_ctx, _cache) => {67 return unref(footer) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [68 unref(footerHtml) ? (openBlock(), createElementBlock("div", {69 key: 0,70 class: "footer",71 innerHTML: unref(footer)72 }, null, 8, _hoisted_1$d)) : (openBlock(), createElementBlock("div", {73 key: 1,74 class: "footer",75 textContent: toDisplayString(unref(footer))76 }, null, 8, _hoisted_2$7))77 ], 64)) : createCommentVNode("", true);78 };79 }80});81const _hoisted_1$c = ["href", "rel", "target", "aria-label"];82const __default__ = defineComponent({83 inheritAttrs: false84});85const _sfc_main$g = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {86 props: {87 item: {88 type: Object,89 required: true90 }91 },92 setup(__props) {93 const props = __props;94 const route = useRoute();95 const site = useSiteData();96 const { item } = toRefs(props);97 const hasHttpProtocol = computed(() => isLinkHttp(item.value.link));98 const hasNonHttpProtocol = computed(() => isLinkMailto(item.value.link) || isLinkTel(item.value.link));99 const linkTarget = computed(() => {100 if (hasNonHttpProtocol.value)101 return void 0;102 if (item.value.target)103 return item.value.target;104 if (hasHttpProtocol.value)105 return "_blank";106 return void 0;107 });108 const isBlankTarget = computed(() => linkTarget.value === "_blank");109 const isRouterLink = computed(() => !hasHttpProtocol.value && !hasNonHttpProtocol.value && !isBlankTarget.value);110 const linkRel = computed(() => {111 if (hasNonHttpProtocol.value)112 return void 0;113 if (item.value.rel)114 return item.value.rel;115 if (isBlankTarget.value)116 return "noopener noreferrer";117 return void 0;118 });119 const linkAriaLabel = computed(() => item.value.ariaLabel || item.value.text);120 const shouldBeActiveInSubpath = computed(() => {121 const localeKeys = Object.keys(site.value.locales);122 if (localeKeys.length) {123 return !localeKeys.some((key) => key === item.value.link);124 }125 return item.value.link !== "/";126 });127 const isActiveInSubpath = computed(() => {128 if (!shouldBeActiveInSubpath.value) {129 return false;130 }131 return route.path.startsWith(item.value.link);132 });133 const isActive = computed(() => {134 if (!isRouterLink.value) {135 return false;136 }137 if (item.value.activeMatch) {138 return new RegExp(item.value.activeMatch).test(route.path);139 }140 return isActiveInSubpath.value;141 });142 return (_ctx, _cache) => {143 const _component_RouterLink = resolveComponent("RouterLink");144 const _component_ExternalLinkIcon = resolveComponent("ExternalLinkIcon");145 return unref(isRouterLink) ? (openBlock(), createBlock(_component_RouterLink, mergeProps({146 key: 0,147 class: { "router-link-active": unref(isActive) },148 to: unref(item).link,149 "aria-label": unref(linkAriaLabel)150 }, _ctx.$attrs), {151 default: withCtx(() => [152 renderSlot(_ctx.$slots, "before"),153 createTextVNode(" " + toDisplayString(unref(item).text) + " ", 1),154 renderSlot(_ctx.$slots, "after")155 ]),156 _: 3157 }, 16, ["class", "to", "aria-label"])) : (openBlock(), createElementBlock("a", mergeProps({158 key: 1,159 class: "external-link",160 href: unref(item).link,161 rel: unref(linkRel),162 target: unref(linkTarget),163 "aria-label": unref(linkAriaLabel)164 }, _ctx.$attrs), [165 renderSlot(_ctx.$slots, "before"),166 createTextVNode(" " + toDisplayString(unref(item).text) + " ", 1),167 unref(isBlankTarget) ? (openBlock(), createBlock(_component_ExternalLinkIcon, { key: 0 })) : createCommentVNode("", true),168 renderSlot(_ctx.$slots, "after")169 ], 16, _hoisted_1$c));170 };171 }172}));173const _hoisted_1$b = { class: "hero" };174const _hoisted_2$6 = {175 key: 0,176 id: "main-title"177};178const _hoisted_3$5 = {179 key: 1,180 class: "description"181};182const _hoisted_4$3 = {183 key: 2,184 class: "actions"185};186const _sfc_main$f = /* @__PURE__ */ defineComponent({187 setup(__props) {188 const frontmatter = usePageFrontmatter();189 const siteLocale = useSiteLocaleData();190 const isDarkMode = useDarkMode();191 const heroImage = computed(() => {192 if (isDarkMode.value && frontmatter.value.heroImageDark !== void 0) {193 return frontmatter.value.heroImageDark;194 }195 return frontmatter.value.heroImage;196 });197 const heroText = computed(() => {198 if (frontmatter.value.heroText === null) {199 return null;200 }201 return frontmatter.value.heroText || siteLocale.value.title || "Hello";202 });203 const heroAlt = computed(() => frontmatter.value.heroAlt || heroText.value || "hero");204 const tagline = computed(() => {205 if (frontmatter.value.tagline === null) {206 return null;207 }208 return frontmatter.value.tagline || siteLocale.value.description || "Welcome to your VuePress site";209 });210 const actions = computed(() => {211 if (!isArray(frontmatter.value.actions)) {212 return [];213 }214 return frontmatter.value.actions.map(({ text, link, type = "primary" }) => ({215 text,216 link,217 type218 }));219 });220 const HomeHeroImage = () => {221 if (!heroImage.value)222 return null;223 const img = h("img", {224 src: withBase(heroImage.value),225 alt: heroAlt.value226 });227 if (frontmatter.value.heroImageDark === void 0) {228 return img;229 }230 return h(ClientOnly, img);231 };232 return (_ctx, _cache) => {233 return openBlock(), createElementBlock("header", _hoisted_1$b, [234 createVNode(HomeHeroImage),235 unref(heroText) ? (openBlock(), createElementBlock("h1", _hoisted_2$6, toDisplayString(unref(heroText)), 1)) : createCommentVNode("", true),236 unref(tagline) ? (openBlock(), createElementBlock("p", _hoisted_3$5, toDisplayString(unref(tagline)), 1)) : createCommentVNode("", true),237 unref(actions).length ? (openBlock(), createElementBlock("p", _hoisted_4$3, [238 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(actions), (action) => {239 return openBlock(), createBlock(_sfc_main$g, {240 key: action.text,241 class: normalizeClass(["action-button", [action.type]]),242 item: action243 }, null, 8, ["class", "item"]);244 }), 128))245 ])) : createCommentVNode("", true)246 ]);247 };248 }249});250const _hoisted_1$a = { class: "home" };251const _sfc_main$e = /* @__PURE__ */ defineComponent({252 setup(__props) {253 return (_ctx, _cache) => {254 return openBlock(), createElementBlock("main", _hoisted_1$a, [255 createVNode(_sfc_main$f),256 createVNode(_sfc_main$i),257 createVNode(HomeContent),258 createVNode(_sfc_main$h)259 ]);260 };261 }262});263const _sfc_main$d = /* @__PURE__ */ defineComponent({264 setup(__props) {265 const routeLocale = useRouteLocale();266 const siteLocale = useSiteLocaleData();267 const themeLocale = useThemeLocaleData();268 const isDarkMode = useDarkMode();269 const navbarBrandLink = computed(() => themeLocale.value.home || routeLocale.value);270 const navbarBrandTitle = computed(() => siteLocale.value.title);271 const navbarBrandLogo = computed(() => {272 if (isDarkMode.value && themeLocale.value.logoDark !== void 0) {273 return themeLocale.value.logoDark;274 }275 return themeLocale.value.logo;276 });277 const NavbarBrandLogo = () => {278 if (!navbarBrandLogo.value)279 return null;280 const img = h("img", {281 class: "logo",282 src: withBase(navbarBrandLogo.value),283 alt: navbarBrandTitle.value284 });285 if (themeLocale.value.logoDark === void 0) {286 return img;287 }288 return h(ClientOnly, img);289 };290 return (_ctx, _cache) => {291 const _component_RouterLink = resolveComponent("RouterLink");292 return openBlock(), createBlock(_component_RouterLink, { to: unref(navbarBrandLink) }, {293 default: withCtx(() => [294 createVNode(NavbarBrandLogo),295 unref(navbarBrandTitle) ? (openBlock(), createElementBlock("span", {296 key: 0,297 class: normalizeClass(["site-name", { "can-hide": unref(navbarBrandLogo) }])298 }, toDisplayString(unref(navbarBrandTitle)), 3)) : createCommentVNode("", true)299 ]),300 _: 1301 }, 8, ["to"]);302 };303 }304});305const _sfc_main$c = /* @__PURE__ */ defineComponent({306 setup(__props) {307 const setHeight = (items) => {308 items.style.height = items.scrollHeight + "px";309 };310 const unsetHeight = (items) => {311 items.style.height = "";312 };313 return (_ctx, _cache) => {314 return openBlock(), createBlock(Transition, {315 name: "dropdown",316 onEnter: setHeight,317 onAfterEnter: unsetHeight,318 onBeforeLeave: setHeight319 }, {320 default: withCtx(() => [321 renderSlot(_ctx.$slots, "default")322 ]),323 _: 3324 });325 };326 }327});328const _hoisted_1$9 = ["aria-label"];329const _hoisted_2$5 = { class: "title" };330const _hoisted_3$4 = /* @__PURE__ */ createBaseVNode("span", { class: "arrow down" }, null, -1);331const _hoisted_4$2 = ["aria-label"];332const _hoisted_5$1 = { class: "title" };333const _hoisted_6$1 = { class: "navbar-dropdown" };334const _hoisted_7$1 = { class: "navbar-dropdown-subtitle" };335const _hoisted_8$1 = { key: 1 };336const _hoisted_9$1 = { class: "navbar-dropdown-subitem-wrapper" };337const _sfc_main$b = /* @__PURE__ */ defineComponent({338 props: {339 item: {340 type: Object,341 required: true342 }343 },344 setup(__props) {345 const props = __props;346 const { item } = toRefs(props);347 const dropdownAriaLabel = computed(() => item.value.ariaLabel || item.value.text);348 const open = ref(false);349 const route = useRoute();350 watch(() => route.path, () => {351 open.value = false;352 });353 const handleDropdown = (e) => {354 const isTriggerByTab = e.detail === 0;355 if (isTriggerByTab) {356 open.value = !open.value;357 } else {358 open.value = false;359 }360 };361 const isLastItemOfArray = (item2, arr) => arr[arr.length - 1] === item2;362 return (_ctx, _cache) => {363 return openBlock(), createElementBlock("div", {364 class: normalizeClass(["navbar-dropdown-wrapper", { open: open.value }])365 }, [366 createBaseVNode("button", {367 class: "navbar-dropdown-title",368 type: "button",369 "aria-label": unref(dropdownAriaLabel),370 onClick: handleDropdown371 }, [372 createBaseVNode("span", _hoisted_2$5, toDisplayString(unref(item).text), 1),373 _hoisted_3$4374 ], 8, _hoisted_1$9),375 createBaseVNode("button", {376 class: "navbar-dropdown-title-mobile",377 type: "button",378 "aria-label": unref(dropdownAriaLabel),379 onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)380 }, [381 createBaseVNode("span", _hoisted_5$1, toDisplayString(unref(item).text), 1),382 createBaseVNode("span", {383 class: normalizeClass(["arrow", open.value ? "down" : "right"])384 }, null, 2)385 ], 8, _hoisted_4$2),386 createVNode(_sfc_main$c, null, {387 default: withCtx(() => [388 withDirectives(createBaseVNode("ul", _hoisted_6$1, [389 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(item).children, (child) => {390 return openBlock(), createElementBlock("li", {391 key: child.text,392 class: "navbar-dropdown-item"393 }, [394 child.children ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [395 createBaseVNode("h4", _hoisted_7$1, [396 child.link ? (openBlock(), createBlock(_sfc_main$g, {397 key: 0,398 item: child,399 onFocusout: ($event) => isLastItemOfArray(child, unref(item).children) && child.children.length === 0 && (open.value = false)400 }, null, 8, ["item", "onFocusout"])) : (openBlock(), createElementBlock("span", _hoisted_8$1, toDisplayString(child.text), 1))401 ]),402 createBaseVNode("ul", _hoisted_9$1, [403 (openBlock(true), createElementBlock(Fragment, null, renderList(child.children, (grandchild) => {404 return openBlock(), createElementBlock("li", {405 key: grandchild.link,406 class: "navbar-dropdown-subitem"407 }, [408 createVNode(_sfc_main$g, {409 item: grandchild,410 onFocusout: ($event) => isLastItemOfArray(grandchild, child.children) && isLastItemOfArray(child, unref(item).children) && (open.value = false)411 }, null, 8, ["item", "onFocusout"])412 ]);413 }), 128))414 ])415 ], 64)) : (openBlock(), createBlock(_sfc_main$g, {416 key: 1,417 item: child,418 onFocusout: ($event) => isLastItemOfArray(child, unref(item).children) && (open.value = false)419 }, null, 8, ["item", "onFocusout"]))420 ]);421 }), 128))422 ], 512), [423 [vShow, open.value]424 ])425 ]),426 _: 1427 })428 ], 2);429 };430 }431});432const normalizePath = (path) => decodeURI(path).replace(/#.*$/, "").replace(/(index)?\.(md|html)$/, "");433const isActiveLink = (link, route) => {434 if (route.hash === link) {435 return true;436 }437 const currentPath = normalizePath(route.path);438 const targetPath = normalizePath(link);439 return currentPath === targetPath;440};441const isActiveSidebarItem = (item, route) => {442 if (item.link && isActiveLink(item.link, route)) {443 return true;444 }445 if (item.children) {446 return item.children.some((child) => isActiveSidebarItem(child, route));447 }448 return false;449};450const resolveRepoType = (repo) => {451 if (!isLinkHttp(repo) || /github\.com/.test(repo))452 return "GitHub";453 if (/bitbucket\.org/.test(repo))454 return "Bitbucket";455 if (/gitlab\.com/.test(repo))456 return "GitLab";457 if (/gitee\.com/.test(repo))458 return "Gitee";459 return null;460};461const editLinkPatterns = {462 GitHub: ":repo/edit/:branch/:path",463 GitLab: ":repo/-/edit/:branch/:path",464 Gitee: ":repo/edit/:branch/:path",465 Bitbucket: ":repo/src/:branch/:path?mode=edit&spa=0&at=:branch&fileviewer=file-view-default"466};467const resolveEditLinkPatterns = ({ docsRepo, editLinkPattern }) => {468 if (editLinkPattern) {469 return editLinkPattern;470 }471 const repoType = resolveRepoType(docsRepo);472 if (repoType !== null) {473 return editLinkPatterns[repoType];474 }475 return null;476};477const resolveEditLink = ({ docsRepo, docsBranch, docsDir, filePathRelative, editLinkPattern }) => {478 if (!filePathRelative)479 return null;480 const pattern = resolveEditLinkPatterns({ docsRepo, editLinkPattern });481 if (!pattern)482 return null;483 return pattern.replace(/:repo/, isLinkHttp(docsRepo) ? docsRepo : `https://github.com/${docsRepo}`).replace(/:branch/, docsBranch).replace(/:path/, removeLeadingSlash(`${removeEndingSlash(docsDir)}/${filePathRelative}`));484};485const _hoisted_1$8 = {486 key: 0,487 class: "navbar-items"488};489const _sfc_main$a = /* @__PURE__ */ defineComponent({490 setup(__props) {491 const useNavbarSelectLanguage = () => {492 const router = useRouter();493 const routeLocale = useRouteLocale();494 const siteLocale = useSiteLocaleData();495 const themeLocale = useThemeLocaleData();496 return computed(() => {497 var _a, _b;498 const localePaths = Object.keys(siteLocale.value.locales);499 if (localePaths.length < 2) {500 return [];501 }502 const currentPath = router.currentRoute.value.path;503 const currentFullPath = router.currentRoute.value.fullPath;504 const languageDropdown = {505 text: (_a = themeLocale.value.selectLanguageText) != null ? _a : "unknown language",506 ariaLabel: (_b = themeLocale.value.selectLanguageAriaLabel) != null ? _b : "unkown language",507 children: localePaths.map((targetLocalePath) => {508 var _a2, _b2, _c, _d, _e, _f;509 const targetSiteLocale = (_b2 = (_a2 = siteLocale.value.locales) == null ? void 0 : _a2[targetLocalePath]) != null ? _b2 : {};510 const targetThemeLocale = (_d = (_c = themeLocale.value.locales) == null ? void 0 : _c[targetLocalePath]) != null ? _d : {};511 const targetLang = `${targetSiteLocale.lang}`;512 const text = (_e = targetThemeLocale.selectLanguageName) != null ? _e : targetLang;513 let link;514 if (targetLang === siteLocale.value.lang) {515 link = currentFullPath;516 } else {517 const targetLocalePage = currentPath.replace(routeLocale.value, targetLocalePath);518 if (router.getRoutes().some((item) => item.path === targetLocalePage)) {519 link = targetLocalePage;520 } else {521 link = (_f = targetThemeLocale.home) != null ? _f : targetLocalePath;522 }523 }524 return {525 text,526 link527 };528 })529 };530 return [languageDropdown];531 });532 };533 const useNavbarRepo = () => {534 const themeLocale = useThemeLocaleData();535 const repo = computed(() => themeLocale.value.repo);536 const repoType = computed(() => repo.value ? resolveRepoType(repo.value) : null);537 const repoLink = computed(() => {538 if (repo.value && !isLinkHttp(repo.value)) {539 return `https://github.com/${repo.value}`;540 }541 return repo.value;542 });543 const repoLabel = computed(() => {544 if (!repoLink.value)545 return null;546 if (themeLocale.value.repoLabel)547 return themeLocale.value.repoLabel;548 if (repoType.value === null)549 return "Source";550 return repoType.value;551 });552 return computed(() => {553 if (!repoLink.value || !repoLabel.value) {554 return [];555 }556 return [557 {558 text: repoLabel.value,559 link: repoLink.value560 }561 ];562 });563 };564 const resolveNavbarItem = (item) => {565 if (isString(item)) {566 return useNavLink(item);567 }568 if (item.children) {569 return __spreadProps(__spreadValues({}, item), {570 children: item.children.map(resolveNavbarItem)571 });572 }573 return item;574 };575 const useNavbarConfig = () => {576 const themeLocale = useThemeLocaleData();577 return computed(() => (themeLocale.value.navbar || []).map(resolveNavbarItem));578 };579 const navbarConfig = useNavbarConfig();580 const navbarSelectLanguage = useNavbarSelectLanguage();581 const navbarRepo = useNavbarRepo();582 const navbarLinks = computed(() => [583 ...navbarConfig.value,584 ...navbarSelectLanguage.value,585 ...navbarRepo.value586 ]);587 return (_ctx, _cache) => {588 return unref(navbarLinks).length ? (openBlock(), createElementBlock("nav", _hoisted_1$8, [589 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(navbarLinks), (item) => {590 return openBlock(), createElementBlock("div", {591 key: item.text,592 class: "navbar-item"593 }, [594 item.children ? (openBlock(), createBlock(_sfc_main$b, {595 key: 0,596 item597 }, null, 8, ["item"])) : (openBlock(), createBlock(_sfc_main$g, {598 key: 1,599 item600 }, null, 8, ["item"]))601 ]);602 }), 128))603 ])) : createCommentVNode("", true);604 };605 }606});607const _hoisted_1$7 = ["title"];608const _hoisted_2$4 = {609 class: "icon",610 focusable: "false",611 viewBox: "0 0 32 32"612};613const _hoisted_3$3 = /* @__PURE__ */ createStaticVNode('<path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path>', 9);614const _hoisted_12 = [615 _hoisted_3$3616];617const _hoisted_13 = {618 class: "icon",619 focusable: "false",620 viewBox: "0 0 32 32"621};622const _hoisted_14 = /* @__PURE__ */ createBaseVNode("path", {623 d: "M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z",624 fill: "currentColor"625}, null, -1);626const _hoisted_15 = [627 _hoisted_14628];629const _sfc_main$9 = /* @__PURE__ */ defineComponent({630 setup(__props) {631 const themeLocale = useThemeLocaleData();632 const isDarkMode = useDarkMode();633 const toggleDarkMode = () => {634 isDarkMode.value = !isDarkMode.value;635 };636 return (_ctx, _cache) => {637 return openBlock(), createElementBlock("button", {638 class: "toggle-dark-button",639 title: unref(themeLocale).toggleDarkMode,640 onClick: toggleDarkMode641 }, [642 withDirectives((openBlock(), createElementBlock("svg", _hoisted_2$4, _hoisted_12, 512)), [643 [vShow, !unref(isDarkMode)]644 ]),645 withDirectives((openBlock(), createElementBlock("svg", _hoisted_13, _hoisted_15, 512)), [646 [vShow, unref(isDarkMode)]647 ])648 ], 8, _hoisted_1$7);649 };650 }651});652const _hoisted_1$6 = ["title"];653const _hoisted_2$3 = /* @__PURE__ */ createBaseVNode("div", {654 class: "icon",655 "aria-hidden": "true"656}, [657 /* @__PURE__ */ createBaseVNode("span"),658 /* @__PURE__ */ createBaseVNode("span"),659 /* @__PURE__ */ createBaseVNode("span")660], -1);661const _hoisted_3$2 = [662 _hoisted_2$3663];664const _sfc_main$8 = /* @__PURE__ */ defineComponent({665 emits: ["toggle"],666 setup(__props) {667 const themeLocale = useThemeLocaleData();668 return (_ctx, _cache) => {669 return openBlock(), createElementBlock("div", {670 class: "toggle-sidebar-button",671 title: unref(themeLocale).toggleSidebar,672 "aria-expanded": "false",673 role: "button",674 tabindex: "0",675 onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggle"))676 }, _hoisted_3$2, 8, _hoisted_1$6);677 };678 }679});680const _sfc_main$7 = /* @__PURE__ */ defineComponent({681 emits: ["toggle-sidebar"],682 setup(__props) {683 const themeLocale = useThemeLocaleData();684 const navbar = ref(null);685 const navbarBrand = ref(null);686 const linksWrapperMaxWidth = ref(0);687 const linksWrapperStyle = computed(() => {688 if (!linksWrapperMaxWidth.value) {689 return {};690 }691 return {692 maxWidth: linksWrapperMaxWidth.value + "px"693 };694 });695 const enableDarkMode = computed(() => themeLocale.value.darkMode);696 onMounted(() => {697 const MOBILE_DESKTOP_BREAKPOINT = 719;698 const navbarHorizontalPadding = getCssValue(navbar.value, "paddingLeft") + getCssValue(navbar.value, "paddingRight");699 const handleLinksWrapWidth = () => {700 var _a;701 if (window.innerWidth <= MOBILE_DESKTOP_BREAKPOINT) {702 linksWrapperMaxWidth.value = 0;703 } else {704 linksWrapperMaxWidth.value = navbar.value.offsetWidth - navbarHorizontalPadding - (((_a = navbarBrand.value) == null ? void 0 : _a.offsetWidth) || 0);705 }706 };707 handleLinksWrapWidth();708 window.addEventListener("resize", handleLinksWrapWidth, false);709 window.addEventListener("orientationchange", handleLinksWrapWidth, false);710 });711 function getCssValue(el, property) {712 var _a, _b, _c;713 const val = (_c = (_b = (_a = el == null ? void 0 : el.ownerDocument) == null ? void 0 : _a.defaultView) == null ? void 0 : _b.getComputedStyle(el, null)) == null ? void 0 : _c[property];714 const num = Number.parseInt(val, 10);715 return Number.isNaN(num) ? 0 : num;716 }717 return (_ctx, _cache) => {718 const _component_NavbarSearch = resolveComponent("NavbarSearch");719 return openBlock(), createElementBlock("header", {720 ref_key: "navbar",721 ref: navbar,722 class: "navbar"723 }, [724 createVNode(_sfc_main$8, {725 onToggle: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("toggle-sidebar"))726 }),727 createBaseVNode("span", {728 ref_key: "navbarBrand",729 ref: navbarBrand730 }, [731 createVNode(_sfc_main$d)732 ], 512),733 createBaseVNode("div", {734 class: "navbar-items-wrapper",735 style: normalizeStyle(unref(linksWrapperStyle))736 }, [737 renderSlot(_ctx.$slots, "before"),738 createVNode(_sfc_main$a, { class: "can-hide" }),739 renderSlot(_ctx.$slots, "after"),740 unref(enableDarkMode) ? (openBlock(), createBlock(_sfc_main$9, { key: 0 })) : createCommentVNode("", true),741 createVNode(_component_NavbarSearch)742 ], 4)743 ], 512);744 };745 }746});747const _hoisted_1$5 = { class: "page-meta" };748const _hoisted_2$2 = {749 key: 0,750 class: "meta-item edit-link"751};752const _hoisted_3$1 = {753 key: 1,754 class: "meta-item last-updated"755};756const _hoisted_4$1 = { class: "meta-item-label" };757const _hoisted_5 = { class: "meta-item-info" };758const _hoisted_6 = {759 key: 2,760 class: "meta-item contributors"761};762const _hoisted_7 = { class: "meta-item-label" };763const _hoisted_8 = { class: "meta-item-info" };764const _hoisted_9 = ["title"];765const _hoisted_10 = /* @__PURE__ */ createTextVNode(", ");766const _sfc_main$6 = /* @__PURE__ */ defineComponent({767 setup(__props) {768 const useEditNavLink = () => {769 const themeLocale2 = useThemeLocaleData();770 const page = usePageData();771 const frontmatter = usePageFrontmatter();772 return computed(() => {773 var _a, _b, _c;774 const showEditLink = (_b = (_a = frontmatter.value.editLink) != null ? _a : themeLocale2.value.editLink) != null ? _b : true;775 if (!showEditLink) {776 return null;777 }778 const {779 repo,780 docsRepo = repo,781 docsBranch = "main",782 docsDir = "",783 editLinkText784 } = themeLocale2.value;785 if (!docsRepo)786 return null;787 const editLink = resolveEditLink({788 docsRepo,789 docsBranch,790 docsDir,791 filePathRelative: page.value.filePathRelative,792 editLinkPattern: (_c = frontmatter.value.editLinkPattern) != null ? _c : themeLocale2.value.editLinkPattern793 });794 if (!editLink)795 return null;796 return {797 text: editLinkText != null ? editLinkText : "Edit this page",798 link: editLink799 };800 });801 };802 const useLastUpdated = () => {803 const themeLocale2 = useThemeLocaleData();804 const page = usePageData();805 const frontmatter = usePageFrontmatter();806 return computed(() => {807 var _a, _b, _c, _d;808 const showLastUpdated = (_b = (_a = frontmatter.value.lastUpdated) != null ? _a : themeLocale2.value.lastUpdated) != null ? _b : true;809 if (!showLastUpdated)810 return null;811 if (!((_c = page.value.git) == null ? void 0 : _c.updatedTime))812 return null;813 const updatedDate = new Date((_d = page.value.git) == null ? void 0 : _d.updatedTime);814 return updatedDate.toLocaleString();815 });816 };817 const useContributors = () => {818 const themeLocale2 = useThemeLocaleData();819 const page = usePageData();820 const frontmatter = usePageFrontmatter();821 return computed(() => {822 var _a, _b, _c, _d;823 const showContributors = (_b = (_a = frontmatter.value.contributors) != null ? _a : themeLocale2.value.contributors) != null ? _b : true;824 if (!showContributors)825 return null;826 return (_d = (_c = page.value.git) == null ? void 0 : _c.contributors) != null ? _d : null;827 });828 };829 const themeLocale = useThemeLocaleData();830 const editNavLink = useEditNavLink();831 const lastUpdated = useLastUpdated();832 const contributors = useContributors();833 return (_ctx, _cache) => {834 const _component_ClientOnly = resolveComponent("ClientOnly");835 return openBlock(), createElementBlock("footer", _hoisted_1$5, [836 unref(editNavLink) ? (openBlock(), createElementBlock("div", _hoisted_2$2, [837 createVNode(_sfc_main$g, {838 class: "meta-item-label",839 item: unref(editNavLink)840 }, null, 8, ["item"])841 ])) : createCommentVNode("", true),842 unref(lastUpdated) ? (openBlock(), createElementBlock("div", _hoisted_3$1, [843 createBaseVNode("span", _hoisted_4$1, toDisplayString(unref(themeLocale).lastUpdatedText) + ": ", 1),844 createVNode(_component_ClientOnly, null, {845 default: withCtx(() => [846 createBaseVNode("span", _hoisted_5, toDisplayString(unref(lastUpdated)), 1)847 ]),848 _: 1849 })850 ])) : createCommentVNode("", true),851 unref(contributors) && unref(contributors).length ? (openBlock(), createElementBlock("div", _hoisted_6, [852 createBaseVNode("span", _hoisted_7, toDisplayString(unref(themeLocale).contributorsText) + ": ", 1),853 createBaseVNode("span", _hoisted_8, [854 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(contributors), (contributor, index) => {855 return openBlock(), createElementBlock(Fragment, { key: index }, [856 createBaseVNode("span", {857 class: "contributor",858 title: `email: ${contributor.email}`859 }, toDisplayString(contributor.name), 9, _hoisted_9),860 index !== unref(contributors).length - 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [861 _hoisted_10862 ], 64)) : createCommentVNode("", true)863 ], 64);864 }), 128))865 ])866 ])) : createCommentVNode("", true)867 ]);868 };869 }870});871const _hoisted_1$4 = {872 key: 0,873 class: "page-nav"874};875const _hoisted_2$1 = { class: "inner" };876const _hoisted_3 = {877 key: 0,878 class: "prev"879};880const _hoisted_4 = {881 key: 1,882 class: "next"883};884const _sfc_main$5 = /* @__PURE__ */ defineComponent({885 setup(__props) {886 const resolveFromFrontmatterConfig = (conf) => {887 if (conf === false) {888 return null;889 }890 if (isString(conf)) {891 return useNavLink(conf);892 }893 if (isPlainObject(conf)) {894 return conf;895 }896 return false;897 };898 const resolveFromSidebarItems = (sidebarItems2, currentPath, offset) => {899 const index = sidebarItems2.findIndex((item) => item.link === currentPath);900 if (index !== -1) {901 const targetItem = sidebarItems2[index + offset];902 if (!(targetItem == null ? void 0 : targetItem.link)) {903 return null;904 }905 return targetItem;906 }907 for (const item of sidebarItems2) {908 if (item.children) {909 const childResult = resolveFromSidebarItems(item.children, currentPath, offset);910 if (childResult) {911 return childResult;912 }913 }914 }915 return null;916 };917 const frontmatter = usePageFrontmatter();918 const sidebarItems = useSidebarItems();919 const route = useRoute();920 const prevNavLink = computed(() => {921 const prevConfig = resolveFromFrontmatterConfig(frontmatter.value.prev);922 if (prevConfig !== false) {923 return prevConfig;924 }925 return resolveFromSidebarItems(sidebarItems.value, route.path, -1);926 });927 const nextNavLink = computed(() => {928 const nextConfig = resolveFromFrontmatterConfig(frontmatter.value.next);929 if (nextConfig !== false) {930 return nextConfig;931 }932 return resolveFromSidebarItems(sidebarItems.value, route.path, 1);933 });934 return (_ctx, _cache) => {935 return unref(prevNavLink) || unref(nextNavLink) ? (openBlock(), createElementBlock("nav", _hoisted_1$4, [936 createBaseVNode("p", _hoisted_2$1, [937 unref(prevNavLink) ? (openBlock(), createElementBlock("span", _hoisted_3, [938 createVNode(_sfc_main$g, { item: unref(prevNavLink) }, null, 8, ["item"])939 ])) : createCommentVNode("", true),940 unref(nextNavLink) ? (openBlock(), createElementBlock("span", _hoisted_4, [941 createVNode(_sfc_main$g, { item: unref(nextNavLink) }, null, 8, ["item"])942 ])) : createCommentVNode("", true)943 ])944 ])) : createCommentVNode("", true);945 };946 }947});948const _hoisted_1$3 = { class: "page" };949const _hoisted_2 = { class: "theme-default-content" };950const _sfc_main$4 = /* @__PURE__ */ defineComponent({951 setup(__props) {952 return (_ctx, _cache) => {953 const _component_Content = resolveComponent("Content");954 return openBlock(), createElementBlock("main", _hoisted_1$3, [955 renderSlot(_ctx.$slots, "top"),956 createBaseVNode("div", _hoisted_2, [957 createVNode(_component_Content)958 ]),959 createVNode(_sfc_main$6),960 createVNode(_sfc_main$5),961 renderSlot(_ctx.$slots, "bottom")962 ]);963 };964 }965});966const _hoisted_1$2 = { class: "sidebar-item-children" };967const _sfc_main$3 = /* @__PURE__ */ defineComponent({968 props: {969 item: {970 type: Object,971 required: true972 },973 depth: {974 type: Number,975 required: false,976 default: 0977 }978 },979 setup(__props) {980 const props = __props;981 const { item, depth } = toRefs(props);982 const route = useRoute();983 const router = useRouter();984 const isActive = computed(() => isActiveSidebarItem(item.value, route));985 const itemClass = computed(() => ({986 "sidebar-item": true,987 "sidebar-heading": depth.value === 0,988 "active": isActive.value,989 "collapsible": item.value.collapsible990 }));991 const isOpen = ref(true);992 const onClick = ref(void 0);993 if (item.value.collapsible) {994 isOpen.value = isActive.value;995 onClick.value = () => {996 isOpen.value = !isOpen.value;997 };998 router.afterEach(() => {999 isOpen.value = isActive.value;1000 });1001 }1002 return (_ctx, _cache) => {1003 var _a;1004 const _component_SidebarItem = resolveComponent("SidebarItem", true);1005 return openBlock(), createElementBlock("li", null, [1006 unref(item).link ? (openBlock(), createBlock(_sfc_main$g, {1007 key: 0,1008 class: normalizeClass(unref(itemClass)),1009 item: unref(item)1010 }, null, 8, ["class", "item"])) : (openBlock(), createElementBlock("p", {1011 key: 1,1012 class: normalizeClass(unref(itemClass)),1013 onClick: _cache[0] || (_cache[0] = (...args) => onClick.value && onClick.value(...args))1014 }, [1015 createTextVNode(toDisplayString(unref(item).text) + " ", 1),1016 unref(item).collapsible ? (openBlock(), createElementBlock("span", {1017 key: 0,1018 class: normalizeClass(["arrow", isOpen.value ? "down" : "right"])1019 }, null, 2)) : createCommentVNode("", true)1020 ], 2)),1021 ((_a = unref(item).children) == null ? void 0 : _a.length) ? (openBlock(), createBlock(_sfc_main$c, { key: 2 }, {1022 default: withCtx(() => [1023 withDirectives(createBaseVNode("ul", _hoisted_1$2, [1024 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(item).children, (child) => {1025 return openBlock(), createBlock(_component_SidebarItem, {1026 key: `${unref(depth)}${child.text}${child.link}`,1027 item: child,1028 depth: unref(depth) + 11029 }, null, 8, ["item", "depth"]);1030 }), 128))1031 ], 512), [1032 [vShow, isOpen.value]1033 ])1034 ]),1035 _: 11036 })) : createCommentVNode("", true)1037 ]);1038 };1039 }1040});1041const _hoisted_1$1 = {1042 key: 0,1043 class: "sidebar-items"1044};1045const _sfc_main$2 = /* @__PURE__ */ defineComponent({1046 setup(__props) {1047 const sidebarItems = useSidebarItems();1048 return (_ctx, _cache) => {1049 return unref(sidebarItems).length ? (openBlock(), createElementBlock("ul", _hoisted_1$1, [1050 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sidebarItems), (item) => {1051 return openBlock(), createBlock(_sfc_main$3, {1052 key: item.link || item.text,1053 item1054 }, null, 8, ["item"]);1055 }), 128))1056 ])) : createCommentVNode("", true);1057 };1058 }1059});1060const _hoisted_1 = { class: "sidebar" };1061const _sfc_main$1 = /* @__PURE__ */ defineComponent({1062 setup(__props) {1063 return (_ctx, _cache) => {1064 return openBlock(), createElementBlock("aside", _hoisted_1, [1065 createVNode(_sfc_main$a),1066 renderSlot(_ctx.$slots, "top"),1067 createVNode(_sfc_main$2),1068 renderSlot(_ctx.$slots, "bottom")1069 ]);1070 };1071 }1072});1073const _sfc_main = /* @__PURE__ */ defineComponent({1074 setup(__props) {1075 const page = usePageData();1076 const frontmatter = usePageFrontmatter();1077 const themeLocale = useThemeLocaleData();1078 const shouldShowNavbar = computed(() => frontmatter.value.navbar !== false && themeLocale.value.navbar !== false);1079 const sidebarItems = useSidebarItems();1080 const isSidebarOpen = ref(false);1081 const toggleSidebar = (to) => {1082 isSidebarOpen.value = typeof to === "boolean" ? to : !isSidebarOpen.value;1083 };1084 const touchStart = { x: 0, y: 0 };1085 const onTouchStart = (e) => {1086 touchStart.x = e.changedTouches[0].clientX;1087 touchStart.y = e.changedTouches[0].clientY;1088 };1089 const onTouchEnd = (e) => {1090 const dx = e.changedTouches[0].clientX - touchStart.x;1091 const dy = e.changedTouches[0].clientY - touchStart.y;1092 if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {1093 if (dx > 0 && touchStart.x <= 80) {1094 toggleSidebar(true);1095 } else {1096 toggleSidebar(false);1097 }1098 }1099 };1100 const containerClass = computed(() => [1101 {1102 "no-navbar": !shouldShowNavbar.value,1103 "no-sidebar": !sidebarItems.value.length,1104 "sidebar-open": isSidebarOpen.value1105 },1106 frontmatter.value.pageClass1107 ]);1108 let unregisterRouterHook;1109 onMounted(() => {1110 const router = useRouter();1111 unregisterRouterHook = router.afterEach(() => {1112 toggleSidebar(false);1113 });1114 });1115 onUnmounted(() => {1116 unregisterRouterHook();1117 });1118 const scrollPromise = useScrollPromise();1119 const onBeforeEnter = scrollPromise.resolve;1120 const onBeforeLeave = scrollPromise.pending;1121 return (_ctx, _cache) => {1122 return openBlock(), createElementBlock("div", {1123 class: normalizeClass(["theme-container", unref(containerClass)]),1124 onTouchstart: onTouchStart,1125 onTouchend: onTouchEnd1126 }, [1127 renderSlot(_ctx.$slots, "navbar", {}, () => [1128 unref(shouldShowNavbar) ? (openBlock(), createBlock(_sfc_main$7, {1129 key: 0,1130 onToggleSidebar: toggleSidebar1131 }, {1132 before: withCtx(() => [1133 renderSlot(_ctx.$slots, "navbar-before")1134 ]),1135 after: withCtx(() => [1136 renderSlot(_ctx.$slots, "navbar-after")1137 ]),1138 _: 31139 })) : createCommentVNode("", true)1140 ]),1141 createBaseVNode("div", {1142 class: "sidebar-mask",1143 onClick: _cache[0] || (_cache[0] = ($event) => toggleSidebar(false))1144 }),1145 renderSlot(_ctx.$slots, "sidebar", {}, () => [1146 createVNode(_sfc_main$1, null, {1147 top: withCtx(() => [1148 renderSlot(_ctx.$slots, "sidebar-top")1149 ]),1150 bottom: withCtx(() => [1151 renderSlot(_ctx.$slots, "sidebar-bottom")1152 ]),1153 _: 31154 })1155 ]),1156 renderSlot(_ctx.$slots, "page", {}, () => [1157 unref(frontmatter).home ? (openBlock(), createBlock(_sfc_main$e, { key: 0 })) : (openBlock(), createBlock(Transition, {1158 key: 1,1159 name: "fade-slide-y",1160 mode: "out-in",1161 onBeforeEnter: unref(onBeforeEnter),1162 onBeforeLeave: unref(onBeforeLeave)1163 }, {1164 default: withCtx(() => [1165 (openBlock(), createBlock(_sfc_main$4, {1166 key: unref(page).path1167 }, {1168 top: withCtx(() => [1169 renderSlot(_ctx.$slots, "page-top")1170 ]),1171 bottom: withCtx(() => [1172 renderSlot(_ctx.$slots, "page-bottom")1173 ]),1174 _: 31175 }))1176 ]),1177 _: 31178 }, 8, ["onBeforeEnter", "onBeforeLeave"]))1179 ])...

Full Screen

Full Screen

vue-navigation-bar.umd.js

Source:vue-navigation-bar.umd.js Github

copy

Full Screen

...32 };33 var _hoisted_1$7 = ["href"];34 function render$8(_ctx, _cache, $props, $setup, $data, $options) {35 var _component_router_link = vue.resolveComponent("router-link");36 return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [37 vue.createElementVNode("template", null, [38 ($props.isLinkAction)39 ? vue.renderSlot(_ctx.$slots, "content", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.$attrs)))40 : vue.createCommentVNode("v-if", true)41 ]),42 ($props.isUsingVueRouter)43 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [44 ($props.path.name)45 ? (vue.openBlock(), vue.createBlock(_component_router_link, vue.mergeProps({ key: 0 }, _ctx.$attrs, {46 to: {name: this.path.name}47 }), {48 default: vue.withCtx(function () { return [49 vue.renderSlot(_ctx.$slots, "content")50 ]; }),51 _: 3 /* FORWARDED */52 }, 16 /* FULL_PROPS */, ["to"]))53 : (vue.openBlock(), vue.createBlock(_component_router_link, vue.mergeProps({ key: 1 }, _ctx.$attrs, {54 to: {path: this.path}55 }), {56 default: vue.withCtx(function () { return [57 vue.renderSlot(_ctx.$slots, "content")58 ]; }),59 _: 3 /* FORWARDED */60 }, 16 /* FULL_PROPS */, ["to"]))61 ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))62 : (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 1 }, _ctx.$attrs, { href: $props.path }), [63 vue.renderSlot(_ctx.$slots, "content")64 ], 16 /* FULL_PROPS */, _hoisted_1$7))65 ], 64 /* STABLE_FRAGMENT */))66 }67 script$8.render = render$8;68 script$8.__file = "src/components/DynamicLink.vue";69 var script$7 = {70 name: 'brand-image',71 props: {72 options: {73 type: Object,74 required: true,75 },76 },77 data: function data () {78 return {};79 },80 components: {81 DynamicLink: script$8,82 },83 emits: [84 'vnb-item-clicked' ]85 };86 var _hoisted_1$6 = { class: "vnb__brand-image-wrapper" };87 var _hoisted_2$4 = ["src", "alt"];88 function render$7(_ctx, _cache, $props, $setup, $data, $options) {89 var _component_dynamic_link = vue.resolveComponent("dynamic-link");90 return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [91 vue.createVNode(_component_dynamic_link, {92 path: $props.options.brandImagePath,93 isUsingVueRouter: $props.options.isUsingVueRouter,94 class: "vnb__brand-image-wrapper__link",95 "aria-label": "Homepage",96 isLinkAction: false,97 onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.$emit('vnb-item-clicked', 'brand-image')); })98 }, {99 content: vue.withCtx(function () { return [100 ($props.options.brandImage)101 ? (vue.openBlock(), vue.createElementBlock("img", {102 key: 0,103 src: $props.options.brandImage,104 alt: $props.options.brandImageAltText,105 class: "vnb-image vnb__brand-image-wrapper__link__image"106 }, null, 8 /* PROPS */, _hoisted_2$4))107 : vue.createCommentVNode("v-if", true)108 ]; }),109 _: 1 /* STABLE */110 }, 8 /* PROPS */, ["path", "isUsingVueRouter"])111 ]))112 }113 script$7.render = render$7;114 script$7.__file = "src/components/BrandImage.vue";115 var script$6 = {116 name: 'collapse-button',117 mixins: [vueScreenSize.VueScreenSizeMixin],118 props: {119 options: {120 type: Object,121 required: true,122 },123 menuIsVisible: {124 type: Boolean,125 required: true,126 },127 },128 data: function data () {129 return {};130 },131 methods: {132 collapseButtonClicked: function collapseButtonClicked () {133 this.$emit('collapse-button-clicked');134 },135 },136 emits: [137 'collapse-button-clicked' ]138 };139 var _hoisted_1$5 = ["aria-expanded"];140 var _hoisted_2$3 = ["src"];141 var _hoisted_3$2 = /*#__PURE__*/vue.createElementVNode("title", null, "Menu", -1 /* HOISTED */);142 var _hoisted_4$2 = /*#__PURE__*/vue.createElementVNode("g", { transform: "matrix(.1 0 0 -.1 0 100)" }, [143 /*#__PURE__*/vue.createElementVNode("path", { d: "m0 850v-40h500 500v40 40h-500-500z" }),144 /*#__PURE__*/vue.createElementVNode("path", { d: "m0 495v-45h500 500v45 45h-500-500z" }),145 /*#__PURE__*/vue.createElementVNode("path", { d: "m0 140v-40h500 500v40 40h-500-500z" })146 ], -1 /* HOISTED */);147 var _hoisted_5$2 = [148 _hoisted_3$2,149 _hoisted_4$2150 ];151 function render$6(_ctx, _cache, $props, $setup, $data, $options) {152 return (_ctx.$vssWidth < $props.options.mobileBreakpoint)153 ? (vue.openBlock(), vue.createElementBlock("button", {154 key: 0,155 class: "vnb__collapse-button",156 onClick: _cache[0] || (_cache[0] = function () {157 var args = [], len = arguments.length;158 while ( len-- ) args[ len ] = arguments[ len ];159 return ($options.collapseButtonClicked && $options.collapseButtonClicked.apply($options, args));160 }),161 type: "button",162 "aria-expanded": $props.menuIsVisible ? 'true' : 'false'163 }, [164 ($props.options.collapseButtonImageOpen)165 ? (vue.openBlock(), vue.createElementBlock("img", {166 key: 0,167 src: $props.options.collapseButtonImageOpen,168 alt: 'Menu',169 class: "vnb__collapse-button__image"170 }, null, 8 /* PROPS */, _hoisted_2$3))171 : (vue.openBlock(), vue.createElementBlock("svg", {172 key: 1,173 height: "100pt",174 preserveAspectRatio: "xMidYMid meet",175 viewBox: "0 0 100 100",176 width: "100pt",177 xmlns: "http://www.w3.org/2000/svg",178 class: "vnb__collapse-button__image",179 style: vue.normalizeStyle({fill: $props.options.collapseButtonOpenColor})180 }, _hoisted_5$2, 4 /* STYLE */))181 ], 8 /* PROPS */, _hoisted_1$5))182 : vue.createCommentVNode("v-if", true)183 }184 script$6.render = render$6;185 script$6.__file = "src/components/CollapseButton.vue";186 var script$5 = {187 name: 'desktop-menu-item-button',188 props: {189 option: {190 type: Object,191 required: true,192 },193 options: {194 type: Object,195 required: true,196 },197 },198 data: function data () {199 return {};200 },201 components: {202 DynamicLink: script$8,203 },204 emits: [205 'vnb-item-clicked' ]206 };207 var _hoisted_1$4 = ["innerHTML"];208 var _hoisted_2$2 = ["innerHTML"];209 function render$5(_ctx, _cache, $props, $setup, $data, $options) {210 var _component_dynamic_link = vue.resolveComponent("dynamic-link");211 return (vue.openBlock(), vue.createBlock(_component_dynamic_link, {212 path: $props.option.path,213 isUsingVueRouter: $props.options.isUsingVueRouter,214 class: vue.normalizeClass(['vnb__menu-options__option__button', 'vnb-button', $props.option.class]),215 "aria-label": $props.option.text,216 isLinkAction: $props.option.isLinkAction ? true : false,217 onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.$emit('vnb-item-clicked', $props.option.text)); })218 }, {219 content: vue.withCtx(function () { return [220 ($props.option.iconLeft)221 ? (vue.openBlock(), vue.createElementBlock("span", {222 key: 0,223 class: "vnb__menu-options__option__button__icon vnb__menu-options__option__button__icon--left",224 innerHTML: $props.option.iconLeft225 }, null, 8 /* PROPS */, _hoisted_1$4))226 : vue.createCommentVNode("v-if", true),227 vue.createTextVNode(" " + vue.toDisplayString($props.option.text) + " ", 1 /* TEXT */),228 ($props.option.iconRight)229 ? (vue.openBlock(), vue.createElementBlock("span", {230 key: 1,231 class: "vnb__menu-options__option__button__icon vnb__menu-options__option__button__icon--right",232 innerHTML: $props.option.iconRight233 }, null, 8 /* PROPS */, _hoisted_2$2))234 : vue.createCommentVNode("v-if", true)235 ]; }),236 _: 1 /* STABLE */237 }, 8 /* PROPS */, ["path", "isUsingVueRouter", "class", "aria-label", "isLinkAction"]))238 }239 script$5.render = render$5;240 script$5.__file = "src/components/DesktopMenuItemButton.vue";241 var script$4 = {242 name: 'desktop-menu-item-link',243 props: {244 option: {245 type: Object,246 required: true,247 },248 options: {249 type: Object,250 required: true,251 },252 },253 data: function data () {254 return {255 currentExpandedStatus: 'closed',256 };257 },258 computed: {259 isExpanded: function isExpanded () {260 if (this.currentExpandedStatus === 'open') {261 return true;262 }263 return false;264 },265 },266 methods: {267 // Each time a sub-menu-option is clicked, close all the tooltips268 subMenuItemSelected: function subMenuItemSelected (text) {269 this.closeAllTooltips();270 },271 // When we keydown tab on the last sub-menu-option, we want to close272 // all the tooltips273 subMenuItemTabbed: function subMenuItemTabbed (text) {274 // Let's check to see if this item is the last275 // item in the subMenuOptions array276 if (this.option.subMenuOptions[this.option.subMenuOptions.length - 1].text === text) {277 this.closeAllTooltips();278 }279 },280 menuShown: function menuShown () {281 this.currentExpandedStatus = 'open';282 },283 menuHidden: function menuHidden () {284 this.currentExpandedStatus = 'closed';285 },286 closeAllTooltips: function closeAllTooltips () {287 // https://atomiks.github.io/tippyjs/v6/methods/#hideall288 tippy.hideAll();289 },290 initTippy: function initTippy () {291 var this$1$1 = this;292 var el = document.getElementById('dropdown-menu-parent-' + this.option.id);293 var template = document.getElementById('sub-menu-options-' + this.option.id);294 template.style.display = 'block';295 tippy__default["default"](el, {296 theme: 'light',297 content: template,298 interactive: true,299 animation: this.options.tooltipAnimationType,300 role: 'Menu',301 // trigger: 'click', // for testing302 trigger: 'click mouseenter focus',303 appendTo: 'parent',304 arrow: true,305 inertia: false,306 placement: this.options.tooltipPlacement,307 popperOptions: {308 modifiers: [309 {310 name: 'flip',311 options: {312 fallbackPlacements: [this.options.tooltipPlacement],313 },314 } ],315 },316 onShow: function (instance) {317 tippy.hideAll({exclude: instance});318 // fire the menuShown function319 this$1$1.menuShown();320 },321 onHide: function () {322 // fire the menuHidden function323 this$1$1.menuHidden();324 },325 });326 },327 },328 mounted: function mounted () {329 // Let's setup our tippy here in mounted330 if (this.option.subMenuOptions && this.option.subMenuOptions.length) {331 this.initTippy();332 }333 },334 components: {335 DynamicLink: script$8,336 },337 emits: [338 'vnb-item-clicked' ]339 };340 var _hoisted_1$3 = ["innerHTML"];341 var _hoisted_2$1 = ["innerHTML"];342 var _hoisted_3$1 = ["id", "aria-expanded", "aria-label"];343 var _hoisted_4$1 = ["innerHTML"];344 var _hoisted_5$1 = ["innerHTML"];345 var _hoisted_6$1 = /*#__PURE__*/vue.createElementVNode("title", null, "Toggle Arrow", -1 /* HOISTED */);346 var _hoisted_7$1 = /*#__PURE__*/vue.createElementVNode("path", {347 d: "m12 268c-7-7-12-17-12-23 0-13 232-245 245-245 6 0 64 54 129 119 119 119 132 142 90 158-11 4-44-23-113-91-53-53-101-96-106-96-6 0-53 43-105 95s-99 95-105 95-16-5-23-12z",348 transform: "matrix(.1 0 0 -.1 0 28)"349 }, null, -1 /* HOISTED */);350 var _hoisted_8$1 = [351 _hoisted_6$1,352 _hoisted_7$1353 ];354 var _hoisted_9$1 = ["id"];355 var _hoisted_10$1 = {356 class: "vnb__sub-menu-options__option",357 tabindex: "-1"358 };359 var _hoisted_11$1 = ["innerHTML"];360 var _hoisted_12$1 = { class: "vnb__sub-menu-options__option__link__text-wrapper" };361 var _hoisted_13$1 = { class: "vnb__sub-menu-options__option__link__text-wrapper__text" };362 var _hoisted_14$1 = {363 key: 0,364 class: "vnb__sub-menu-options__option__link__text-wrapper__sub-text"365 };366 var _hoisted_15$1 = ["innerHTML"];367 var _hoisted_16$1 = {368 key: 1,369 class: "vnb__sub-menu-options__option__hr",370 tabindex: "-1"371 };372 function render$4(_ctx, _cache, $props, $setup, $data, $options) {373 var _component_dynamic_link = vue.resolveComponent("dynamic-link");374 return (!$props.option.subMenuOptions || !$props.option.subMenuOptions.length)375 ? (vue.openBlock(), vue.createBlock(_component_dynamic_link, {376 key: 0,377 path: $props.option.path,378 isUsingVueRouter: $props.options.isUsingVueRouter,379 class: "vnb__menu-options__option__link",380 "aria-label": $props.option.text,381 tabindex: "0",382 isLinkAction: $props.option.isLinkAction ? true : false,383 onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.$emit('vnb-item-clicked', $props.option.text)); })384 }, {385 content: vue.withCtx(function () { return [386 ($props.option.iconLeft)387 ? (vue.openBlock(), vue.createElementBlock("span", {388 key: 0,389 class: "vnb__menu-options__option__link__icon vnb__menu-options__option__button__icon--left",390 innerHTML: $props.option.iconLeft391 }, null, 8 /* PROPS */, _hoisted_1$3))392 : vue.createCommentVNode("v-if", true),393 vue.createTextVNode(" " + vue.toDisplayString($props.option.text) + " ", 1 /* TEXT */),394 ($props.option.iconRight)395 ? (vue.openBlock(), vue.createElementBlock("span", {396 key: 1,397 class: "vnb__menu-options__option__link__icon vnb__menu-options__option__button__icon--right",398 innerHTML: $props.option.iconRight399 }, null, 8 /* PROPS */, _hoisted_2$1))400 : vue.createCommentVNode("v-if", true)401 ]; }),402 _: 1 /* STABLE */403 }, 8 /* PROPS */, ["path", "isUsingVueRouter", "aria-label", "isLinkAction"]))404 : (vue.openBlock(), vue.createElementBlock("span", {405 key: 1,406 class: "vnb__menu-options__option__link",407 id: 'dropdown-menu-parent-' + $props.option.id,408 "aria-haspopup": "true",409 "aria-expanded": $options.isExpanded ? 'true' : 'false',410 "aria-label": $props.option.text,411 tabindex: "0"412 }, [413 ($props.option.iconLeft)414 ? (vue.openBlock(), vue.createElementBlock("span", {415 key: 0,416 class: "vnb__menu-options__option__link__icon vnb__menu-options__option__button__icon--left",417 innerHTML: $props.option.iconLeft418 }, null, 8 /* PROPS */, _hoisted_4$1))419 : vue.createCommentVNode("v-if", true),420 vue.createTextVNode(" " + vue.toDisplayString($props.option.text) + " ", 1 /* TEXT */),421 ($props.option.iconRight)422 ? (vue.openBlock(), vue.createElementBlock("span", {423 key: 1,424 class: "vnb__menu-options__option__link__icon vnb__menu-options__option__button__icon--right",425 innerHTML: $props.option.iconRight426 }, null, 8 /* PROPS */, _hoisted_5$1))427 : vue.createCommentVNode("v-if", true),428 (vue.openBlock(), vue.createElementBlock("svg", {429 height: "28pt",430 preserveAspectRatio: "xMidYMid meet",431 viewBox: "0 0 49 28",432 width: "49pt",433 xmlns: "http://www.w3.org/2000/svg",434 style: vue.normalizeStyle({fill: $props.option.arrowColor}),435 class: vue.normalizeClass([436 'vnb__menu-options__option__arrow',437 {'vnb__menu-options__option__arrow--hover': $options.isExpanded} ])438 }, _hoisted_8$1, 6 /* CLASS, STYLE */)),439 ($props.option.type === 'link')440 ? (vue.openBlock(), vue.createElementBlock("div", {441 key: 2,442 class: "vnb__sub-menu-options",443 id: 'sub-menu-options-' + $props.option.id444 }, [445 vue.createElementVNode("div", _hoisted_10$1, [446 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.option.subMenuOptions, function (subOption, index) {447 return (vue.openBlock(), vue.createElementBlock("div", null, [448 (subOption.type === 'link')449 ? (vue.openBlock(), vue.createBlock(_component_dynamic_link, {450 path: subOption.path,451 isUsingVueRouter: $props.options.isUsingVueRouter,452 key: index,453 class: "vnb__sub-menu-options__option__link",454 onClick: function ($event) {455 $options.subMenuItemSelected(subOption.text);456 _ctx.$emit('vnb-item-clicked', subOption.text);457 },458 "aria-label": subOption.text,459 tabindex: "0",460 onKeydown: vue.withKeys(function ($event) { return ($options.subMenuItemTabbed(subOption.text)); }, ["tab"]),461 isLinkAction: subOption.isLinkAction ? true : false462 }, {463 content: vue.withCtx(function () { return [464 (subOption.iconLeft)465 ? (vue.openBlock(), vue.createElementBlock("span", {466 key: 0,467 class: "vnb__sub-menu-options__option__link__icon vnb__sub-menu-options__option__link__icon--left",468 innerHTML: subOption.iconLeft469 }, null, 8 /* PROPS */, _hoisted_11$1))470 : vue.createCommentVNode("v-if", true),471 vue.createElementVNode("span", _hoisted_12$1, [472 vue.createElementVNode("span", _hoisted_13$1, vue.toDisplayString(subOption.text), 1 /* TEXT */),473 (subOption.subText)474 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14$1, vue.toDisplayString(subOption.subText), 1 /* TEXT */))475 : vue.createCommentVNode("v-if", true)476 ]),477 (subOption.iconRight)478 ? (vue.openBlock(), vue.createElementBlock("span", {479 key: 1,480 class: "vnb__sub-menu-options__option__link__icon vnb__sub-menu-options__option__link__icon--right",481 innerHTML: subOption.iconRight482 }, null, 8 /* PROPS */, _hoisted_15$1))483 : vue.createCommentVNode("v-if", true)484 ]; }),485 _: 2 /* DYNAMIC */486 }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["path", "isUsingVueRouter", "onClick", "aria-label", "onKeydown", "isLinkAction"]))487 : (vue.openBlock(), vue.createElementBlock("hr", _hoisted_16$1))488 ]))489 }), 256 /* UNKEYED_FRAGMENT */))490 ])491 ], 8 /* PROPS */, _hoisted_9$1))492 : vue.createCommentVNode("v-if", true)493 ], 8 /* PROPS */, _hoisted_3$1))494 }495 script$4.render = render$4;496 script$4.__file = "src/components/DesktopMenuItemLink.vue";497 var script$3 = {498 name: 'desktop-menu-item-spacer',499 props: {500 option: {501 type: Object,502 required: true503 }504 },505 data: function data () {506 return {507 }508 }509 };510 var _hoisted_1$2 = { class: "vnb__menu-options__option__spacer" };511 function render$3(_ctx, _cache, $props, $setup, $data, $options) {512 return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2))513 }514 script$3.render = render$3;515 script$3.__file = "src/components/DesktopMenuItemSpacer.vue";516 var script$2 = {517 name: 'menu-options',518 mixins: [vueScreenSize.VueScreenSizeMixin],519 props: {520 options: {521 type: Object,522 required: true,523 },524 type: {525 type: String,526 required: true,527 },528 },529 data: function data () {530 return {};531 },532 methods: {533 vnbItemClicked: function vnbItemClicked (text) {534 this.$emit('vnb-item-clicked', text);535 },536 },537 components: {538 DesktopMenuItemLink: script$4,539 DesktopMenuItemButton: script$5,540 DesktopMenuItemSpacer: script$3,541 },542 emits: [543 'vnb-item-clicked' ]544 };545 function render$2(_ctx, _cache, $props, $setup, $data, $options) {546 var _component_desktop_menu_item_link = vue.resolveComponent("desktop-menu-item-link");547 var _component_desktop_menu_item_button = vue.resolveComponent("desktop-menu-item-button");548 var _component_desktop_menu_item_spacer = vue.resolveComponent("desktop-menu-item-spacer");549 return (_ctx.$vssWidth > $props.options.mobileBreakpoint)550 ? (vue.openBlock(), vue.createElementBlock("div", {551 key: 0,552 class: vue.normalizeClass([553 'vnb__menu-options',554 {'vnb__menu-options--left': $props.type === 'left'},555 {'vnb__menu-options--right': $props.type === 'right'} ])556 }, [557 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.type === 'left'558 ? $props.options.menuOptionsLeft559 : $props.options.menuOptionsRight, function (option, index) {560 return (vue.openBlock(), vue.createElementBlock("div", {561 key: index,562 class: "vnb__menu-options__option"563 }, [564 (option.type === 'link')565 ? (vue.openBlock(), vue.createBlock(_component_desktop_menu_item_link, {566 key: 0,567 option: option,568 options: $props.options,569 onVnbItemClicked: $options.vnbItemClicked570 }, null, 8 /* PROPS */, ["option", "options", "onVnbItemClicked"]))571 : (option.type === 'button')572 ? (vue.openBlock(), vue.createBlock(_component_desktop_menu_item_button, {573 key: 1,574 option: option,575 options: $props.options,576 onVnbItemClicked: $options.vnbItemClicked577 }, null, 8 /* PROPS */, ["option", "options", "onVnbItemClicked"]))578 : (vue.openBlock(), vue.createBlock(_component_desktop_menu_item_spacer, {579 key: 2,580 option: option581 }, null, 8 /* PROPS */, ["option"]))582 ]))583 }), 128 /* KEYED_FRAGMENT */))584 ], 2 /* CLASS */))585 : vue.createCommentVNode("v-if", true)586 }587 script$2.render = render$2;588 script$2.__file = "src/components/MenuOptions.vue";589 var script$1 = {590 name: 'popup',591 props: {592 options: {593 type: Object,594 required: true,595 },596 menuIsVisible: {597 type: Boolean,598 required: true,599 },600 },601 data: function data () {602 return {};603 },604 computed: {605 combinedMenuItems: function combinedMenuItems () {606 var combinedArray = this.options.menuOptionsLeft.concat(this.options.menuOptionsRight);607 return combinedArray;608 },609 },610 methods: {611 closeButtonClicked: function closeButtonClicked () {612 this.$emit('close-button-clicked');613 },614 itemSelected: function itemSelected (option) {615 this.$emit('vnb-item-clicked', option.text);616 this.closeButtonClicked();617 },618 },619 components: {620 DynamicLink: script$8,621 },622 emits: [623 'close-button-clicked',624 'vnb-item-clicked' ]625 };626 var _hoisted_1$1 = {627 key: 0,628 class: "vnb__popup"629 };630 var _hoisted_2 = { class: "vnb__popup__top" };631 var _hoisted_3 = ["src", "alt"];632 var _hoisted_4 = ["aria-expanded"];633 var _hoisted_5 = ["src"];634 var _hoisted_6 = /*#__PURE__*/vue.createElementVNode("title", null, "Close button", -1 /* HOISTED */);635 var _hoisted_7 = /*#__PURE__*/vue.createElementVNode("path", {636 d: "m42 967c-12-13-22-27-22-33 0-5 93-102 207-216l208-208-208-208c-114-114-207-214-207-223 0-8 11-26 25-39l26-24 214 214 215 215 215-215 214-214 26 24c14 13 25 28 25 34s-92 103-205 216-205 209-205 215 92 102 205 215 205 210 205 216c0 12-42 54-55 54-5 0-104-94-220-210l-210-210-210 210c-115 116-212 210-216 210-3 0-15-10-27-23z",637 transform: "matrix(.1 0 0 -.1 0 100)"638 }, null, -1 /* HOISTED */);639 var _hoisted_8 = [640 _hoisted_6,641 _hoisted_7642 ];643 var _hoisted_9 = { class: "vnb__popup__bottom" };644 var _hoisted_10 = {645 key: 0,646 class: "vnb__popup__bottom__custom-section"647 };648 var _hoisted_11 = { class: "vnb__popup__bottom__menu-options" };649 var _hoisted_12 = ["innerHTML"];650 var _hoisted_13 = ["innerHTML"];651 var _hoisted_14 = {652 key: 1,653 class: "vnb__popup__bottom__menu-options__option__link vnb__popup__bottom__menu-options__option__link--no-highlight"654 };655 var _hoisted_15 = { class: "vnb__popup__bottom__sub-menu-options" };656 var _hoisted_16 = { class: "vnb__popup__bottom__sub-menu-options__option__link__sub-text" };657 function render$1(_ctx, _cache, $props, $setup, $data, $options) {658 var _component_dynamic_link = vue.resolveComponent("dynamic-link");659 return ($props.menuIsVisible)660 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [661 vue.createElementVNode("div", _hoisted_2, [662 ($props.options.showBrandImageInMobilePopup && $props.options.brandImage)663 ? (vue.openBlock(), vue.createElementBlock("img", {664 key: 0,665 src: $props.options.brandImage,666 alt: $props.options.brandImageAltText,667 class: "vnb-image vnb__popup__top__image"668 }, null, 8 /* PROPS */, _hoisted_3))669 : vue.createCommentVNode("v-if", true),670 vue.createElementVNode("button", {671 class: "vnb__popup__top__close-button",672 onClick: _cache[0] || (_cache[0] = function () {673 var args = [], len = arguments.length;674 while ( len-- ) args[ len ] = arguments[ len ];675 return ($options.closeButtonClicked && $options.closeButtonClicked.apply($options, args));676 }),677 "aria-label": "Close Button",678 title: "Close",679 "aria-expanded": $props.menuIsVisible ? 'true' : 'false'680 }, [681 ($props.options.collapseButtonImageClose)682 ? (vue.openBlock(), vue.createElementBlock("img", {683 key: 0,684 src: $props.options.collapseButtonImageClose,685 alt: 'Close button',686 class: "vnb__popup__top__close-button__image"687 }, null, 8 /* PROPS */, _hoisted_5))688 : (vue.openBlock(), vue.createElementBlock("svg", {689 key: 1,690 height: "100pt",691 preserveAspectRatio: "xMidYMid meet",692 viewBox: "0 0 100 100",693 width: "100pt",694 xmlns: "http://www.w3.org/2000/svg",695 class: "vnb__popup__top__close-button__image",696 style: vue.normalizeStyle({fill: $props.options.collapseButtonCloseColor})697 }, _hoisted_8, 4 /* STYLE */))698 ], 8 /* PROPS */, _hoisted_4)699 ]),700 vue.createElementVNode("div", _hoisted_9, [701 (!!this.$slots['custom-section'])702 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [703 vue.renderSlot(_ctx.$slots, "custom-section")704 ]))705 : vue.createCommentVNode("v-if", true),706 vue.createElementVNode("ul", _hoisted_11, [707 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.combinedMenuItems, function (option, index) {708 return (vue.openBlock(), vue.createElementBlock("li", {709 key: index,710 class: "vnb__popup__bottom__menu-options__option"711 }, [712 (!option.subMenuOptions)713 ? (vue.openBlock(), vue.createBlock(_component_dynamic_link, {714 key: 0,715 path: option.path,716 isUsingVueRouter: $props.options.isUsingVueRouter,717 class: vue.normalizeClass(['vnb__popup__bottom__menu-options__option__link', option.class]),718 onClick: function ($event) { return ($options.itemSelected(option)); },719 "aria-label": option.text,720 isLinkAction: option.isLinkAction ? true : false721 }, {722 content: vue.withCtx(function () { return [723 (option.iconLeft)724 ? (vue.openBlock(), vue.createElementBlock("span", {725 key: 0,726 class: "vnb__popup__bottom__menu-options__option__link__icon vnb__popup__bottom__menu-options__option__link__icon--left",727 innerHTML: option.iconLeft728 }, null, 8 /* PROPS */, _hoisted_12))729 : vue.createCommentVNode("v-if", true),730 vue.createTextVNode(" " + vue.toDisplayString(option.text) + " ", 1 /* TEXT */),731 (option.iconRight)732 ? (vue.openBlock(), vue.createElementBlock("span", {733 key: 1,734 class: "vnb__popup__bottom__menu-options__option__link__icon vnb__popup__bottom__menu-options__option__link__icon--right",735 innerHTML: option.iconRight736 }, null, 8 /* PROPS */, _hoisted_13))737 : vue.createCommentVNode("v-if", true)738 ]; }),739 _: 2 /* DYNAMIC */740 }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["path", "isUsingVueRouter", "class", "onClick", "aria-label", "isLinkAction"]))741 : (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString(option.text), 1 /* TEXT */)),742 vue.createElementVNode("div", _hoisted_15, [743 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(option.subMenuOptions, function (subOption, index) {744 return (vue.openBlock(), vue.createElementBlock("div", {745 key: index,746 class: "vnb__popup__bottom__sub-menu-options__option"747 }, [748 (subOption.type === 'link')749 ? (vue.openBlock(), vue.createBlock(_component_dynamic_link, {750 key: 0,751 path: subOption.path,752 isUsingVueRouter: $props.options.isUsingVueRouter,753 class: "vnb__popup__bottom__sub-menu-options__option__link",754 onClick: function ($event) { return ($options.itemSelected(subOption)); },755 "aria-label": subOption.text,756 isLinkAction: option.isLinkAction ? true : false757 }, {758 content: vue.withCtx(function () { return [759 vue.createTextVNode(vue.toDisplayString(subOption.text) + " ", 1 /* TEXT */),760 vue.createElementVNode("span", _hoisted_16, vue.toDisplayString(subOption.subText), 1 /* TEXT */)761 ]; }),762 _: 2 /* DYNAMIC */763 }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["path", "isUsingVueRouter", "onClick", "aria-label", "isLinkAction"]))764 : vue.createCommentVNode("v-if", true)765 ]))766 }), 128 /* KEYED_FRAGMENT */))767 ])768 ]))769 }), 128 /* KEYED_FRAGMENT */))770 ])771 ])772 ]))773 : vue.createCommentVNode("v-if", true)774 }775 script$1.render = render$1;776 script$1.__file = "src/components/Popup.vue";777 var script = {778 name: 'vue-navigation-bar',779 mixins: [vueScreenSize.VueScreenSizeMixin],780 props: {781 options: {782 type: Object,783 required: true,784 },785 },786 data: function data () {787 return {788 menuIsVisible: false,789 };790 },791 computed: {792 finalOptions: function finalOptions () {793 // What we're doing here is giving each top-level menu-option a unique id794 if (this.options.menuOptionsLeft) {795 for (var x = 0; x < this.options.menuOptionsLeft.length; x++) {796 this.options.menuOptionsLeft[x].id = uuidV4();797 }798 }799 if (this.options.menuOptionsRight) {800 for (var x$1 = 0; x$1 < this.options.menuOptionsRight.length; x$1++) {801 this.options.menuOptionsRight[x$1].id = uuidV4();802 }803 }804 return {805 elementId: this.options.elementId ? this.options.elementId : uuidV4(),806 isUsingVueRouter: this.options.isUsingVueRouter ? true : false,807 mobileBreakpoint: this.options.mobileBreakpoint ? this.options.mobileBreakpoint : 992,808 brandImagePath: this.options.brandImagePath ? this.options.brandImagePath : '/',809 brandImage: this.options.brandImage ? this.options.brandImage : null,810 brandImageAltText: this.options.brandImageAltText811 ? this.options.brandImageAltText812 : 'brand-image',813 collapseButtonImageOpen: this.options.collapseButtonImageOpen814 ? this.options.collapseButtonImageOpen815 : null,816 collapseButtonImageClose: this.options.collapseButtonImageClose817 ? this.options.collapseButtonImageClose818 : null,819 collapseButtonOpenColor: this.options.collapseButtonOpenColor820 ? this.options.collapseButtonOpenColor821 : '#373737',822 collapseButtonCloseColor: this.options.collapseButtonCloseColor823 ? this.options.collapseButtonCloseColor824 : '#373737',825 showBrandImageInMobilePopup: this.options.showBrandImageInMobilePopup ? true : false,826 ariaLabelMainNav: this.options.ariaLabelMainNav827 ? this.options.ariaLabelMainNav828 : 'Main Navigation',829 tooltipAnimationType: this.options.tooltipAnimationType830 ? this.options.tooltipAnimationType831 : 'shift-away',832 tooltipPlacement: this.options.tooltipPlacement || 'bottom',833 menuOptionsLeft: this.options.menuOptionsLeft ? this.options.menuOptionsLeft : [],834 menuOptionsRight: this.options.menuOptionsRight ? this.options.menuOptionsRight : [],835 };836 },837 },838 methods: {839 closeMobilePopup: function closeMobilePopup () {840 this.menuIsVisible = false;841 this.$emit('vnb-mobile-popup-hidden');842 },843 showMobilePopup: function showMobilePopup () {844 this.menuIsVisible = true;845 this.$emit('vnb-mobile-popup-shown');846 },847 vnbItemClicked: function vnbItemClicked (text) {848 this.$emit('vnb-item-clicked', text);849 },850 },851 components: {852 BrandImage: script$7,853 MenuOptions: script$2,854 CollapseButton: script$6,855 Popup: script$1,856 },857 emits: [858 'vnb-mobile-popup-hidden',859 'vnb-mobile-popup-shown',860 'vnb-item-clicked' ]861 };862 var _hoisted_1 = ["id", "aria-label"];863 function render(_ctx, _cache, $props, $setup, $data, $options) {864 var _component_brand_image = vue.resolveComponent("brand-image");865 var _component_menu_options = vue.resolveComponent("menu-options");866 var _component_collapse_button = vue.resolveComponent("collapse-button");867 var _component_popup = vue.resolveComponent("popup");868 return (vue.openBlock(), vue.createElementBlock("nav", {869 class: "vnb",870 id: $options.finalOptions.elementId,871 "aria-label": $options.finalOptions.ariaLabelMainNav872 }, [873 vue.createVNode(_component_brand_image, {874 options: $options.finalOptions,875 onVnbItemClicked: $options.vnbItemClicked876 }, null, 8 /* PROPS */, ["options", "onVnbItemClicked"]),877 vue.createVNode(_component_menu_options, {878 options: $options.finalOptions,879 type: 'left',880 onVnbItemClicked: $options.vnbItemClicked881 }, null, 8 /* PROPS */, ["options", "onVnbItemClicked"]),882 (_ctx.$vssWidth > $props.options.mobileBreakpoint)883 ? vue.renderSlot(_ctx.$slots, "custom-section", { key: 0 })884 : vue.createCommentVNode("v-if", true),885 vue.createVNode(_component_menu_options, {886 options: $options.finalOptions,887 type: 'right',888 onVnbItemClicked: $options.vnbItemClicked889 }, null, 8 /* PROPS */, ["options", "onVnbItemClicked"]),890 ($options.finalOptions.menuOptionsLeft.length || $options.finalOptions.menuOptionsRight.length)891 ? (vue.openBlock(), vue.createBlock(_component_collapse_button, {892 key: 1,893 options: $options.finalOptions,894 menuIsVisible: $data.menuIsVisible,895 onCollapseButtonClicked: $options.showMobilePopup896 }, null, 8 /* PROPS */, ["options", "menuIsVisible", "onCollapseButtonClicked"]))897 : vue.createCommentVNode("v-if", true),898 ($options.finalOptions.menuOptionsLeft.length || $options.finalOptions.menuOptionsRight.length)899 ? (vue.openBlock(), vue.createBlock(_component_popup, {900 key: 2,901 options: $options.finalOptions,902 menuIsVisible: $data.menuIsVisible,903 onCloseButtonClicked: $options.closeMobilePopup,904 onVnbItemClicked: $options.vnbItemClicked905 }, {906 "custom-section": vue.withCtx(function () { return [907 vue.renderSlot(_ctx.$slots, "custom-section")908 ]; }),909 _: 3 /* FORWARDED */910 }, 8 /* PROPS */, ["options", "menuIsVisible", "onCloseButtonClicked", "onVnbItemClicked"]))911 : vue.createCommentVNode("v-if", true)912 ], 8 /* PROPS */, _hoisted_1))913 }...

Full Screen

Full Screen

vue-navigation-bar.esm.js

Source:vue-navigation-bar.esm.js Github

copy

Full Screen

...28};29var _hoisted_1$7 = ["href"];30function render$8(_ctx, _cache, $props, $setup, $data, $options) {31 var _component_router_link = resolveComponent("router-link");32 return (openBlock(), createElementBlock(Fragment, null, [33 createElementVNode("template", null, [34 ($props.isLinkAction)35 ? renderSlot(_ctx.$slots, "content", normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)))36 : createCommentVNode("v-if", true)37 ]),38 ($props.isUsingVueRouter)39 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [40 ($props.path.name)41 ? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, _ctx.$attrs, {42 to: {name: this.path.name}43 }), {44 default: withCtx(function () { return [45 renderSlot(_ctx.$slots, "content")46 ]; }),47 _: 3 /* FORWARDED */48 }, 16 /* FULL_PROPS */, ["to"]))49 : (openBlock(), createBlock(_component_router_link, mergeProps({ key: 1 }, _ctx.$attrs, {50 to: {path: this.path}51 }), {52 default: withCtx(function () { return [53 renderSlot(_ctx.$slots, "content")54 ]; }),55 _: 3 /* FORWARDED */56 }, 16 /* FULL_PROPS */, ["to"]))57 ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))58 : (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, _ctx.$attrs, { href: $props.path }), [59 renderSlot(_ctx.$slots, "content")60 ], 16 /* FULL_PROPS */, _hoisted_1$7))61 ], 64 /* STABLE_FRAGMENT */))62}63script$8.render = render$8;64script$8.__file = "src/components/DynamicLink.vue";65var script$7 = {66 name: 'brand-image',67 props: {68 options: {69 type: Object,70 required: true,71 },72 },73 data: function data () {74 return {};75 },76 components: {77 DynamicLink: script$8,78 },79 emits: [80 'vnb-item-clicked' ]81};82var _hoisted_1$6 = { class: "vnb__brand-image-wrapper" };83var _hoisted_2$4 = ["src", "alt"];84function render$7(_ctx, _cache, $props, $setup, $data, $options) {85 var _component_dynamic_link = resolveComponent("dynamic-link");86 return (openBlock(), createElementBlock("div", _hoisted_1$6, [87 createVNode(_component_dynamic_link, {88 path: $props.options.brandImagePath,89 isUsingVueRouter: $props.options.isUsingVueRouter,90 class: "vnb__brand-image-wrapper__link",91 "aria-label": "Homepage",92 isLinkAction: false,93 onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.$emit('vnb-item-clicked', 'brand-image')); })94 }, {95 content: withCtx(function () { return [96 ($props.options.brandImage)97 ? (openBlock(), createElementBlock("img", {98 key: 0,99 src: $props.options.brandImage,100 alt: $props.options.brandImageAltText,101 class: "vnb-image vnb__brand-image-wrapper__link__image"102 }, null, 8 /* PROPS */, _hoisted_2$4))103 : createCommentVNode("v-if", true)104 ]; }),105 _: 1 /* STABLE */106 }, 8 /* PROPS */, ["path", "isUsingVueRouter"])107 ]))108}109script$7.render = render$7;110script$7.__file = "src/components/BrandImage.vue";111var script$6 = {112 name: 'collapse-button',113 mixins: [VueScreenSizeMixin],114 props: {115 options: {116 type: Object,117 required: true,118 },119 menuIsVisible: {120 type: Boolean,121 required: true,122 },123 },124 data: function data () {125 return {};126 },127 methods: {128 collapseButtonClicked: function collapseButtonClicked () {129 this.$emit('collapse-button-clicked');130 },131 },132 emits: [133 'collapse-button-clicked' ]134};135var _hoisted_1$5 = ["aria-expanded"];136var _hoisted_2$3 = ["src"];137var _hoisted_3$2 = /*#__PURE__*/createElementVNode("title", null, "Menu", -1 /* HOISTED */);138var _hoisted_4$2 = /*#__PURE__*/createElementVNode("g", { transform: "matrix(.1 0 0 -.1 0 100)" }, [139 /*#__PURE__*/createElementVNode("path", { d: "m0 850v-40h500 500v40 40h-500-500z" }),140 /*#__PURE__*/createElementVNode("path", { d: "m0 495v-45h500 500v45 45h-500-500z" }),141 /*#__PURE__*/createElementVNode("path", { d: "m0 140v-40h500 500v40 40h-500-500z" })142], -1 /* HOISTED */);143var _hoisted_5$2 = [144 _hoisted_3$2,145 _hoisted_4$2146];147function render$6(_ctx, _cache, $props, $setup, $data, $options) {148 return (_ctx.$vssWidth < $props.options.mobileBreakpoint)149 ? (openBlock(), createElementBlock("button", {150 key: 0,151 class: "vnb__collapse-button",152 onClick: _cache[0] || (_cache[0] = function () {153 var args = [], len = arguments.length;154 while ( len-- ) args[ len ] = arguments[ len ];155 return ($options.collapseButtonClicked && $options.collapseButtonClicked.apply($options, args));156 }),157 type: "button",158 "aria-expanded": $props.menuIsVisible ? 'true' : 'false'159 }, [160 ($props.options.collapseButtonImageOpen)161 ? (openBlock(), createElementBlock("img", {162 key: 0,163 src: $props.options.collapseButtonImageOpen,164 alt: 'Menu',165 class: "vnb__collapse-button__image"166 }, null, 8 /* PROPS */, _hoisted_2$3))167 : (openBlock(), createElementBlock("svg", {168 key: 1,169 height: "100pt",170 preserveAspectRatio: "xMidYMid meet",171 viewBox: "0 0 100 100",172 width: "100pt",173 xmlns: "http://www.w3.org/2000/svg",174 class: "vnb__collapse-button__image",175 style: normalizeStyle({fill: $props.options.collapseButtonOpenColor})176 }, _hoisted_5$2, 4 /* STYLE */))177 ], 8 /* PROPS */, _hoisted_1$5))178 : createCommentVNode("v-if", true)179}180script$6.render = render$6;181script$6.__file = "src/components/CollapseButton.vue";182var script$5 = {183 name: 'desktop-menu-item-button',184 props: {185 option: {186 type: Object,187 required: true,188 },189 options: {190 type: Object,191 required: true,192 },193 },194 data: function data () {195 return {};196 },197 components: {198 DynamicLink: script$8,199 },200 emits: [201 'vnb-item-clicked' ]202};203var _hoisted_1$4 = ["innerHTML"];204var _hoisted_2$2 = ["innerHTML"];205function render$5(_ctx, _cache, $props, $setup, $data, $options) {206 var _component_dynamic_link = resolveComponent("dynamic-link");207 return (openBlock(), createBlock(_component_dynamic_link, {208 path: $props.option.path,209 isUsingVueRouter: $props.options.isUsingVueRouter,210 class: normalizeClass(['vnb__menu-options__option__button', 'vnb-button', $props.option.class]),211 "aria-label": $props.option.text,212 isLinkAction: $props.option.isLinkAction ? true : false,213 onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.$emit('vnb-item-clicked', $props.option.text)); })214 }, {215 content: withCtx(function () { return [216 ($props.option.iconLeft)217 ? (openBlock(), createElementBlock("span", {218 key: 0,219 class: "vnb__menu-options__option__button__icon vnb__menu-options__option__button__icon--left",220 innerHTML: $props.option.iconLeft221 }, null, 8 /* PROPS */, _hoisted_1$4))222 : createCommentVNode("v-if", true),223 createTextVNode(" " + toDisplayString($props.option.text) + " ", 1 /* TEXT */),224 ($props.option.iconRight)225 ? (openBlock(), createElementBlock("span", {226 key: 1,227 class: "vnb__menu-options__option__button__icon vnb__menu-options__option__button__icon--right",228 innerHTML: $props.option.iconRight229 }, null, 8 /* PROPS */, _hoisted_2$2))230 : createCommentVNode("v-if", true)231 ]; }),232 _: 1 /* STABLE */233 }, 8 /* PROPS */, ["path", "isUsingVueRouter", "class", "aria-label", "isLinkAction"]))234}235script$5.render = render$5;236script$5.__file = "src/components/DesktopMenuItemButton.vue";237var script$4 = {238 name: 'desktop-menu-item-link',239 props: {240 option: {241 type: Object,242 required: true,243 },244 options: {245 type: Object,246 required: true,247 },248 },249 data: function data () {250 return {251 currentExpandedStatus: 'closed',252 };253 },254 computed: {255 isExpanded: function isExpanded () {256 if (this.currentExpandedStatus === 'open') {257 return true;258 }259 return false;260 },261 },262 methods: {263 // Each time a sub-menu-option is clicked, close all the tooltips264 subMenuItemSelected: function subMenuItemSelected (text) {265 this.closeAllTooltips();266 },267 // When we keydown tab on the last sub-menu-option, we want to close268 // all the tooltips269 subMenuItemTabbed: function subMenuItemTabbed (text) {270 // Let's check to see if this item is the last271 // item in the subMenuOptions array272 if (this.option.subMenuOptions[this.option.subMenuOptions.length - 1].text === text) {273 this.closeAllTooltips();274 }275 },276 menuShown: function menuShown () {277 this.currentExpandedStatus = 'open';278 },279 menuHidden: function menuHidden () {280 this.currentExpandedStatus = 'closed';281 },282 closeAllTooltips: function closeAllTooltips () {283 // https://atomiks.github.io/tippyjs/v6/methods/#hideall284 hideAll();285 },286 initTippy: function initTippy () {287 var this$1$1 = this;288 var el = document.getElementById('dropdown-menu-parent-' + this.option.id);289 var template = document.getElementById('sub-menu-options-' + this.option.id);290 template.style.display = 'block';291 tippy(el, {292 theme: 'light',293 content: template,294 interactive: true,295 animation: this.options.tooltipAnimationType,296 role: 'Menu',297 // trigger: 'click', // for testing298 trigger: 'click mouseenter focus',299 appendTo: 'parent',300 arrow: true,301 inertia: false,302 placement: this.options.tooltipPlacement,303 popperOptions: {304 modifiers: [305 {306 name: 'flip',307 options: {308 fallbackPlacements: [this.options.tooltipPlacement],309 },310 } ],311 },312 onShow: function (instance) {313 hideAll({exclude: instance});314 // fire the menuShown function315 this$1$1.menuShown();316 },317 onHide: function () {318 // fire the menuHidden function319 this$1$1.menuHidden();320 },321 });322 },323 },324 mounted: function mounted () {325 // Let's setup our tippy here in mounted326 if (this.option.subMenuOptions && this.option.subMenuOptions.length) {327 this.initTippy();328 }329 },330 components: {331 DynamicLink: script$8,332 },333 emits: [334 'vnb-item-clicked' ]335};336var _hoisted_1$3 = ["innerHTML"];337var _hoisted_2$1 = ["innerHTML"];338var _hoisted_3$1 = ["id", "aria-expanded", "aria-label"];339var _hoisted_4$1 = ["innerHTML"];340var _hoisted_5$1 = ["innerHTML"];341var _hoisted_6$1 = /*#__PURE__*/createElementVNode("title", null, "Toggle Arrow", -1 /* HOISTED */);342var _hoisted_7$1 = /*#__PURE__*/createElementVNode("path", {343 d: "m12 268c-7-7-12-17-12-23 0-13 232-245 245-245 6 0 64 54 129 119 119 119 132 142 90 158-11 4-44-23-113-91-53-53-101-96-106-96-6 0-53 43-105 95s-99 95-105 95-16-5-23-12z",344 transform: "matrix(.1 0 0 -.1 0 28)"345}, null, -1 /* HOISTED */);346var _hoisted_8$1 = [347 _hoisted_6$1,348 _hoisted_7$1349];350var _hoisted_9$1 = ["id"];351var _hoisted_10$1 = {352 class: "vnb__sub-menu-options__option",353 tabindex: "-1"354};355var _hoisted_11$1 = ["innerHTML"];356var _hoisted_12$1 = { class: "vnb__sub-menu-options__option__link__text-wrapper" };357var _hoisted_13$1 = { class: "vnb__sub-menu-options__option__link__text-wrapper__text" };358var _hoisted_14$1 = {359 key: 0,360 class: "vnb__sub-menu-options__option__link__text-wrapper__sub-text"361};362var _hoisted_15$1 = ["innerHTML"];363var _hoisted_16$1 = {364 key: 1,365 class: "vnb__sub-menu-options__option__hr",366 tabindex: "-1"367};368function render$4(_ctx, _cache, $props, $setup, $data, $options) {369 var _component_dynamic_link = resolveComponent("dynamic-link");370 return (!$props.option.subMenuOptions || !$props.option.subMenuOptions.length)371 ? (openBlock(), createBlock(_component_dynamic_link, {372 key: 0,373 path: $props.option.path,374 isUsingVueRouter: $props.options.isUsingVueRouter,375 class: "vnb__menu-options__option__link",376 "aria-label": $props.option.text,377 tabindex: "0",378 isLinkAction: $props.option.isLinkAction ? true : false,379 onClick: _cache[0] || (_cache[0] = function ($event) { return (_ctx.$emit('vnb-item-clicked', $props.option.text)); })380 }, {381 content: withCtx(function () { return [382 ($props.option.iconLeft)383 ? (openBlock(), createElementBlock("span", {384 key: 0,385 class: "vnb__menu-options__option__link__icon vnb__menu-options__option__button__icon--left",386 innerHTML: $props.option.iconLeft387 }, null, 8 /* PROPS */, _hoisted_1$3))388 : createCommentVNode("v-if", true),389 createTextVNode(" " + toDisplayString($props.option.text) + " ", 1 /* TEXT */),390 ($props.option.iconRight)391 ? (openBlock(), createElementBlock("span", {392 key: 1,393 class: "vnb__menu-options__option__link__icon vnb__menu-options__option__button__icon--right",394 innerHTML: $props.option.iconRight395 }, null, 8 /* PROPS */, _hoisted_2$1))396 : createCommentVNode("v-if", true)397 ]; }),398 _: 1 /* STABLE */399 }, 8 /* PROPS */, ["path", "isUsingVueRouter", "aria-label", "isLinkAction"]))400 : (openBlock(), createElementBlock("span", {401 key: 1,402 class: "vnb__menu-options__option__link",403 id: 'dropdown-menu-parent-' + $props.option.id,404 "aria-haspopup": "true",405 "aria-expanded": $options.isExpanded ? 'true' : 'false',406 "aria-label": $props.option.text,407 tabindex: "0"408 }, [409 ($props.option.iconLeft)410 ? (openBlock(), createElementBlock("span", {411 key: 0,412 class: "vnb__menu-options__option__link__icon vnb__menu-options__option__button__icon--left",413 innerHTML: $props.option.iconLeft414 }, null, 8 /* PROPS */, _hoisted_4$1))415 : createCommentVNode("v-if", true),416 createTextVNode(" " + toDisplayString($props.option.text) + " ", 1 /* TEXT */),417 ($props.option.iconRight)418 ? (openBlock(), createElementBlock("span", {419 key: 1,420 class: "vnb__menu-options__option__link__icon vnb__menu-options__option__button__icon--right",421 innerHTML: $props.option.iconRight422 }, null, 8 /* PROPS */, _hoisted_5$1))423 : createCommentVNode("v-if", true),424 (openBlock(), createElementBlock("svg", {425 height: "28pt",426 preserveAspectRatio: "xMidYMid meet",427 viewBox: "0 0 49 28",428 width: "49pt",429 xmlns: "http://www.w3.org/2000/svg",430 style: normalizeStyle({fill: $props.option.arrowColor}),431 class: normalizeClass([432 'vnb__menu-options__option__arrow',433 {'vnb__menu-options__option__arrow--hover': $options.isExpanded} ])434 }, _hoisted_8$1, 6 /* CLASS, STYLE */)),435 ($props.option.type === 'link')436 ? (openBlock(), createElementBlock("div", {437 key: 2,438 class: "vnb__sub-menu-options",439 id: 'sub-menu-options-' + $props.option.id440 }, [441 createElementVNode("div", _hoisted_10$1, [442 (openBlock(true), createElementBlock(Fragment, null, renderList($props.option.subMenuOptions, function (subOption, index) {443 return (openBlock(), createElementBlock("div", null, [444 (subOption.type === 'link')445 ? (openBlock(), createBlock(_component_dynamic_link, {446 path: subOption.path,447 isUsingVueRouter: $props.options.isUsingVueRouter,448 key: index,449 class: "vnb__sub-menu-options__option__link",450 onClick: function ($event) {451 $options.subMenuItemSelected(subOption.text);452_ctx.$emit('vnb-item-clicked', subOption.text);453 },454 "aria-label": subOption.text,455 tabindex: "0",456 onKeydown: withKeys(function ($event) { return ($options.subMenuItemTabbed(subOption.text)); }, ["tab"]),457 isLinkAction: subOption.isLinkAction ? true : false458 }, {459 content: withCtx(function () { return [460 (subOption.iconLeft)461 ? (openBlock(), createElementBlock("span", {462 key: 0,463 class: "vnb__sub-menu-options__option__link__icon vnb__sub-menu-options__option__link__icon--left",464 innerHTML: subOption.iconLeft465 }, null, 8 /* PROPS */, _hoisted_11$1))466 : createCommentVNode("v-if", true),467 createElementVNode("span", _hoisted_12$1, [468 createElementVNode("span", _hoisted_13$1, toDisplayString(subOption.text), 1 /* TEXT */),469 (subOption.subText)470 ? (openBlock(), createElementBlock("span", _hoisted_14$1, toDisplayString(subOption.subText), 1 /* TEXT */))471 : createCommentVNode("v-if", true)472 ]),473 (subOption.iconRight)474 ? (openBlock(), createElementBlock("span", {475 key: 1,476 class: "vnb__sub-menu-options__option__link__icon vnb__sub-menu-options__option__link__icon--right",477 innerHTML: subOption.iconRight478 }, null, 8 /* PROPS */, _hoisted_15$1))479 : createCommentVNode("v-if", true)480 ]; }),481 _: 2 /* DYNAMIC */482 }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["path", "isUsingVueRouter", "onClick", "aria-label", "onKeydown", "isLinkAction"]))483 : (openBlock(), createElementBlock("hr", _hoisted_16$1))484 ]))485 }), 256 /* UNKEYED_FRAGMENT */))486 ])487 ], 8 /* PROPS */, _hoisted_9$1))488 : createCommentVNode("v-if", true)489 ], 8 /* PROPS */, _hoisted_3$1))490}491script$4.render = render$4;492script$4.__file = "src/components/DesktopMenuItemLink.vue";493var script$3 = {494 name: 'desktop-menu-item-spacer',495 props: {496 option: {497 type: Object,498 required: true499 }500 },501 data: function data () {502 return {503 }504 }505};506var _hoisted_1$2 = { class: "vnb__menu-options__option__spacer" };507function render$3(_ctx, _cache, $props, $setup, $data, $options) {508 return (openBlock(), createElementBlock("div", _hoisted_1$2))509}510script$3.render = render$3;511script$3.__file = "src/components/DesktopMenuItemSpacer.vue";512var script$2 = {513 name: 'menu-options',514 mixins: [VueScreenSizeMixin],515 props: {516 options: {517 type: Object,518 required: true,519 },520 type: {521 type: String,522 required: true,523 },524 },525 data: function data () {526 return {};527 },528 methods: {529 vnbItemClicked: function vnbItemClicked (text) {530 this.$emit('vnb-item-clicked', text);531 },532 },533 components: {534 DesktopMenuItemLink: script$4,535 DesktopMenuItemButton: script$5,536 DesktopMenuItemSpacer: script$3,537 },538 emits: [539 'vnb-item-clicked' ]540};541function render$2(_ctx, _cache, $props, $setup, $data, $options) {542 var _component_desktop_menu_item_link = resolveComponent("desktop-menu-item-link");543 var _component_desktop_menu_item_button = resolveComponent("desktop-menu-item-button");544 var _component_desktop_menu_item_spacer = resolveComponent("desktop-menu-item-spacer");545 return (_ctx.$vssWidth > $props.options.mobileBreakpoint)546 ? (openBlock(), createElementBlock("div", {547 key: 0,548 class: normalizeClass([549 'vnb__menu-options',550 {'vnb__menu-options--left': $props.type === 'left'},551 {'vnb__menu-options--right': $props.type === 'right'} ])552 }, [553 (openBlock(true), createElementBlock(Fragment, null, renderList($props.type === 'left'554 ? $props.options.menuOptionsLeft555 : $props.options.menuOptionsRight, function (option, index) {556 return (openBlock(), createElementBlock("div", {557 key: index,558 class: "vnb__menu-options__option"559 }, [560 (option.type === 'link')561 ? (openBlock(), createBlock(_component_desktop_menu_item_link, {562 key: 0,563 option: option,564 options: $props.options,565 onVnbItemClicked: $options.vnbItemClicked566 }, null, 8 /* PROPS */, ["option", "options", "onVnbItemClicked"]))567 : (option.type === 'button')568 ? (openBlock(), createBlock(_component_desktop_menu_item_button, {569 key: 1,570 option: option,571 options: $props.options,572 onVnbItemClicked: $options.vnbItemClicked573 }, null, 8 /* PROPS */, ["option", "options", "onVnbItemClicked"]))574 : (openBlock(), createBlock(_component_desktop_menu_item_spacer, {575 key: 2,576 option: option577 }, null, 8 /* PROPS */, ["option"]))578 ]))579 }), 128 /* KEYED_FRAGMENT */))580 ], 2 /* CLASS */))581 : createCommentVNode("v-if", true)582}583script$2.render = render$2;584script$2.__file = "src/components/MenuOptions.vue";585var script$1 = {586 name: 'popup',587 props: {588 options: {589 type: Object,590 required: true,591 },592 menuIsVisible: {593 type: Boolean,594 required: true,595 },596 },597 data: function data () {598 return {};599 },600 computed: {601 combinedMenuItems: function combinedMenuItems () {602 var combinedArray = this.options.menuOptionsLeft.concat(this.options.menuOptionsRight);603 return combinedArray;604 },605 },606 methods: {607 closeButtonClicked: function closeButtonClicked () {608 this.$emit('close-button-clicked');609 },610 itemSelected: function itemSelected (option) {611 this.$emit('vnb-item-clicked', option.text);612 this.closeButtonClicked();613 },614 },615 components: {616 DynamicLink: script$8,617 },618 emits: [619 'close-button-clicked',620 'vnb-item-clicked' ]621};622var _hoisted_1$1 = {623 key: 0,624 class: "vnb__popup"625};626var _hoisted_2 = { class: "vnb__popup__top" };627var _hoisted_3 = ["src", "alt"];628var _hoisted_4 = ["aria-expanded"];629var _hoisted_5 = ["src"];630var _hoisted_6 = /*#__PURE__*/createElementVNode("title", null, "Close button", -1 /* HOISTED */);631var _hoisted_7 = /*#__PURE__*/createElementVNode("path", {632 d: "m42 967c-12-13-22-27-22-33 0-5 93-102 207-216l208-208-208-208c-114-114-207-214-207-223 0-8 11-26 25-39l26-24 214 214 215 215 215-215 214-214 26 24c14 13 25 28 25 34s-92 103-205 216-205 209-205 215 92 102 205 215 205 210 205 216c0 12-42 54-55 54-5 0-104-94-220-210l-210-210-210 210c-115 116-212 210-216 210-3 0-15-10-27-23z",633 transform: "matrix(.1 0 0 -.1 0 100)"634}, null, -1 /* HOISTED */);635var _hoisted_8 = [636 _hoisted_6,637 _hoisted_7638];639var _hoisted_9 = { class: "vnb__popup__bottom" };640var _hoisted_10 = {641 key: 0,642 class: "vnb__popup__bottom__custom-section"643};644var _hoisted_11 = { class: "vnb__popup__bottom__menu-options" };645var _hoisted_12 = ["innerHTML"];646var _hoisted_13 = ["innerHTML"];647var _hoisted_14 = {648 key: 1,649 class: "vnb__popup__bottom__menu-options__option__link vnb__popup__bottom__menu-options__option__link--no-highlight"650};651var _hoisted_15 = { class: "vnb__popup__bottom__sub-menu-options" };652var _hoisted_16 = { class: "vnb__popup__bottom__sub-menu-options__option__link__sub-text" };653function render$1(_ctx, _cache, $props, $setup, $data, $options) {654 var _component_dynamic_link = resolveComponent("dynamic-link");655 return ($props.menuIsVisible)656 ? (openBlock(), createElementBlock("div", _hoisted_1$1, [657 createElementVNode("div", _hoisted_2, [658 ($props.options.showBrandImageInMobilePopup && $props.options.brandImage)659 ? (openBlock(), createElementBlock("img", {660 key: 0,661 src: $props.options.brandImage,662 alt: $props.options.brandImageAltText,663 class: "vnb-image vnb__popup__top__image"664 }, null, 8 /* PROPS */, _hoisted_3))665 : createCommentVNode("v-if", true),666 createElementVNode("button", {667 class: "vnb__popup__top__close-button",668 onClick: _cache[0] || (_cache[0] = function () {669 var args = [], len = arguments.length;670 while ( len-- ) args[ len ] = arguments[ len ];671 return ($options.closeButtonClicked && $options.closeButtonClicked.apply($options, args));672 }),673 "aria-label": "Close Button",674 title: "Close",675 "aria-expanded": $props.menuIsVisible ? 'true' : 'false'676 }, [677 ($props.options.collapseButtonImageClose)678 ? (openBlock(), createElementBlock("img", {679 key: 0,680 src: $props.options.collapseButtonImageClose,681 alt: 'Close button',682 class: "vnb__popup__top__close-button__image"683 }, null, 8 /* PROPS */, _hoisted_5))684 : (openBlock(), createElementBlock("svg", {685 key: 1,686 height: "100pt",687 preserveAspectRatio: "xMidYMid meet",688 viewBox: "0 0 100 100",689 width: "100pt",690 xmlns: "http://www.w3.org/2000/svg",691 class: "vnb__popup__top__close-button__image",692 style: normalizeStyle({fill: $props.options.collapseButtonCloseColor})693 }, _hoisted_8, 4 /* STYLE */))694 ], 8 /* PROPS */, _hoisted_4)695 ]),696 createElementVNode("div", _hoisted_9, [697 (!!this.$slots['custom-section'])698 ? (openBlock(), createElementBlock("div", _hoisted_10, [699 renderSlot(_ctx.$slots, "custom-section")700 ]))701 : createCommentVNode("v-if", true),702 createElementVNode("ul", _hoisted_11, [703 (openBlock(true), createElementBlock(Fragment, null, renderList($options.combinedMenuItems, function (option, index) {704 return (openBlock(), createElementBlock("li", {705 key: index,706 class: "vnb__popup__bottom__menu-options__option"707 }, [708 (!option.subMenuOptions)709 ? (openBlock(), createBlock(_component_dynamic_link, {710 key: 0,711 path: option.path,712 isUsingVueRouter: $props.options.isUsingVueRouter,713 class: normalizeClass(['vnb__popup__bottom__menu-options__option__link', option.class]),714 onClick: function ($event) { return ($options.itemSelected(option)); },715 "aria-label": option.text,716 isLinkAction: option.isLinkAction ? true : false717 }, {718 content: withCtx(function () { return [719 (option.iconLeft)720 ? (openBlock(), createElementBlock("span", {721 key: 0,722 class: "vnb__popup__bottom__menu-options__option__link__icon vnb__popup__bottom__menu-options__option__link__icon--left",723 innerHTML: option.iconLeft724 }, null, 8 /* PROPS */, _hoisted_12))725 : createCommentVNode("v-if", true),726 createTextVNode(" " + toDisplayString(option.text) + " ", 1 /* TEXT */),727 (option.iconRight)728 ? (openBlock(), createElementBlock("span", {729 key: 1,730 class: "vnb__popup__bottom__menu-options__option__link__icon vnb__popup__bottom__menu-options__option__link__icon--right",731 innerHTML: option.iconRight732 }, null, 8 /* PROPS */, _hoisted_13))733 : createCommentVNode("v-if", true)734 ]; }),735 _: 2 /* DYNAMIC */736 }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["path", "isUsingVueRouter", "class", "onClick", "aria-label", "isLinkAction"]))737 : (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(option.text), 1 /* TEXT */)),738 createElementVNode("div", _hoisted_15, [739 (openBlock(true), createElementBlock(Fragment, null, renderList(option.subMenuOptions, function (subOption, index) {740 return (openBlock(), createElementBlock("div", {741 key: index,742 class: "vnb__popup__bottom__sub-menu-options__option"743 }, [744 (subOption.type === 'link')745 ? (openBlock(), createBlock(_component_dynamic_link, {746 key: 0,747 path: subOption.path,748 isUsingVueRouter: $props.options.isUsingVueRouter,749 class: "vnb__popup__bottom__sub-menu-options__option__link",750 onClick: function ($event) { return ($options.itemSelected(subOption)); },751 "aria-label": subOption.text,752 isLinkAction: option.isLinkAction ? true : false753 }, {754 content: withCtx(function () { return [755 createTextVNode(toDisplayString(subOption.text) + " ", 1 /* TEXT */),756 createElementVNode("span", _hoisted_16, toDisplayString(subOption.subText), 1 /* TEXT */)757 ]; }),758 _: 2 /* DYNAMIC */759 }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["path", "isUsingVueRouter", "onClick", "aria-label", "isLinkAction"]))760 : createCommentVNode("v-if", true)761 ]))762 }), 128 /* KEYED_FRAGMENT */))763 ])764 ]))765 }), 128 /* KEYED_FRAGMENT */))766 ])767 ])768 ]))769 : createCommentVNode("v-if", true)770}771script$1.render = render$1;772script$1.__file = "src/components/Popup.vue";773var script = {774 name: 'vue-navigation-bar',775 mixins: [VueScreenSizeMixin],776 props: {777 options: {778 type: Object,779 required: true,780 },781 },782 data: function data () {783 return {784 menuIsVisible: false,785 };786 },787 computed: {788 finalOptions: function finalOptions () {789 // What we're doing here is giving each top-level menu-option a unique id790 if (this.options.menuOptionsLeft) {791 for (var x = 0; x < this.options.menuOptionsLeft.length; x++) {792 this.options.menuOptionsLeft[x].id = uuidV4();793 }794 }795 if (this.options.menuOptionsRight) {796 for (var x$1 = 0; x$1 < this.options.menuOptionsRight.length; x$1++) {797 this.options.menuOptionsRight[x$1].id = uuidV4();798 }799 }800 return {801 elementId: this.options.elementId ? this.options.elementId : uuidV4(),802 isUsingVueRouter: this.options.isUsingVueRouter ? true : false,803 mobileBreakpoint: this.options.mobileBreakpoint ? this.options.mobileBreakpoint : 992,804 brandImagePath: this.options.brandImagePath ? this.options.brandImagePath : '/',805 brandImage: this.options.brandImage ? this.options.brandImage : null,806 brandImageAltText: this.options.brandImageAltText807 ? this.options.brandImageAltText808 : 'brand-image',809 collapseButtonImageOpen: this.options.collapseButtonImageOpen810 ? this.options.collapseButtonImageOpen811 : null,812 collapseButtonImageClose: this.options.collapseButtonImageClose813 ? this.options.collapseButtonImageClose814 : null,815 collapseButtonOpenColor: this.options.collapseButtonOpenColor816 ? this.options.collapseButtonOpenColor817 : '#373737',818 collapseButtonCloseColor: this.options.collapseButtonCloseColor819 ? this.options.collapseButtonCloseColor820 : '#373737',821 showBrandImageInMobilePopup: this.options.showBrandImageInMobilePopup ? true : false,822 ariaLabelMainNav: this.options.ariaLabelMainNav823 ? this.options.ariaLabelMainNav824 : 'Main Navigation',825 tooltipAnimationType: this.options.tooltipAnimationType826 ? this.options.tooltipAnimationType827 : 'shift-away',828 tooltipPlacement: this.options.tooltipPlacement || 'bottom',829 menuOptionsLeft: this.options.menuOptionsLeft ? this.options.menuOptionsLeft : [],830 menuOptionsRight: this.options.menuOptionsRight ? this.options.menuOptionsRight : [],831 };832 },833 },834 methods: {835 closeMobilePopup: function closeMobilePopup () {836 this.menuIsVisible = false;837 this.$emit('vnb-mobile-popup-hidden');838 },839 showMobilePopup: function showMobilePopup () {840 this.menuIsVisible = true;841 this.$emit('vnb-mobile-popup-shown');842 },843 vnbItemClicked: function vnbItemClicked (text) {844 this.$emit('vnb-item-clicked', text);845 },846 },847 components: {848 BrandImage: script$7,849 MenuOptions: script$2,850 CollapseButton: script$6,851 Popup: script$1,852 },853 emits: [854 'vnb-mobile-popup-hidden',855 'vnb-mobile-popup-shown',856 'vnb-item-clicked' ]857};858var _hoisted_1 = ["id", "aria-label"];859function render(_ctx, _cache, $props, $setup, $data, $options) {860 var _component_brand_image = resolveComponent("brand-image");861 var _component_menu_options = resolveComponent("menu-options");862 var _component_collapse_button = resolveComponent("collapse-button");863 var _component_popup = resolveComponent("popup");864 return (openBlock(), createElementBlock("nav", {865 class: "vnb",866 id: $options.finalOptions.elementId,867 "aria-label": $options.finalOptions.ariaLabelMainNav868 }, [869 createVNode(_component_brand_image, {870 options: $options.finalOptions,871 onVnbItemClicked: $options.vnbItemClicked872 }, null, 8 /* PROPS */, ["options", "onVnbItemClicked"]),873 createVNode(_component_menu_options, {874 options: $options.finalOptions,875 type: 'left',876 onVnbItemClicked: $options.vnbItemClicked877 }, null, 8 /* PROPS */, ["options", "onVnbItemClicked"]),878 (_ctx.$vssWidth > $props.options.mobileBreakpoint)879 ? renderSlot(_ctx.$slots, "custom-section", { key: 0 })880 : createCommentVNode("v-if", true),881 createVNode(_component_menu_options, {882 options: $options.finalOptions,883 type: 'right',884 onVnbItemClicked: $options.vnbItemClicked885 }, null, 8 /* PROPS */, ["options", "onVnbItemClicked"]),886 ($options.finalOptions.menuOptionsLeft.length || $options.finalOptions.menuOptionsRight.length)887 ? (openBlock(), createBlock(_component_collapse_button, {888 key: 1,889 options: $options.finalOptions,890 menuIsVisible: $data.menuIsVisible,891 onCollapseButtonClicked: $options.showMobilePopup892 }, null, 8 /* PROPS */, ["options", "menuIsVisible", "onCollapseButtonClicked"]))893 : createCommentVNode("v-if", true),894 ($options.finalOptions.menuOptionsLeft.length || $options.finalOptions.menuOptionsRight.length)895 ? (openBlock(), createBlock(_component_popup, {896 key: 2,897 options: $options.finalOptions,898 menuIsVisible: $data.menuIsVisible,899 onCloseButtonClicked: $options.closeMobilePopup,900 onVnbItemClicked: $options.vnbItemClicked901 }, {902 "custom-section": withCtx(function () { return [903 renderSlot(_ctx.$slots, "custom-section")904 ]; }),905 _: 3 /* FORWARDED */906 }, 8 /* PROPS */, ["options", "menuIsVisible", "onCloseButtonClicked", "onVnbItemClicked"]))907 : createCommentVNode("v-if", true)908 ], 8 /* PROPS */, _hoisted_1))909}...

Full Screen

Full Screen

ele-easy-table-next.es.js

Source:ele-easy-table-next.es.js Github

copy

Full Screen

...130 emit("get-list");131 }132 return (_ctx, _cache) => {133 const _directive_loading = resolveDirective("loading");134 return openBlock(), createElementBlock("div", _hoisted_1$1, [135 Object.keys(__props.form).length > 0 ? (openBlock(), createBlock(unref(ElForm), mergeProps({136 key: 0,137 class: __props.form.class,138 inline: true,139 model: __props.formData,140 style: __spreadValues({ position: "relative" }, __props.form.style)141 }, __props.form.config), {142 default: withCtx(() => [143 (openBlock(true), createElementBlock(Fragment, null, renderList(__props.form.list, (item, key) => {144 return withDirectives((openBlock(), createElementBlock("span", { key }, [145 item.type !== "slot" ? (openBlock(), createBlock(unref(ElFormItem), mergeProps({146 key: 0,147 label: item.label ? item.label + "\uFF1A" : ""148 }, item.formConfig), {149 default: withCtx(() => [150 item.type === "datePicker" ? (openBlock(), createBlock(unref(ElDatePicker), mergeProps({151 key: 0,152 style: item.style || __props.form.formItemStyle,153 onChange: ($event) => getDate(item),154 "end-placeholder": "\u7ED3\u675F\u65E5\u671F",155 "start-placeholder": "\u5F00\u59CB\u65E5\u671F",156 type: "daterange"157 }, item.config, {158 modelValue: __props.formData[item.key],159 "onUpdate:modelValue": ($event) => __props.formData[item.key] = $event,160 "value-format": "yyyy-MM-dd"161 }), null, 16, ["style", "onChange", "modelValue", "onUpdate:modelValue"])) : createCommentVNode("", true),162 item.type === "input" ? (openBlock(), createBlock(unref(ElInput), mergeProps({163 key: 1,164 placeholder: item.placeholder ? item.placeholder : "\u8BF7\u8F93\u5165" + item.label,165 style: item.style || __props.form.formItemStyle,166 onKeyup: _cache[0] || (_cache[0] = withKeys(($event) => _ctx.$emit("get-list"), ["enter", "native"]))167 }, item.config, {168 modelValue: __props.formData[item.key],169 "onUpdate:modelValue": ($event) => __props.formData[item.key] = $event170 }), null, 16, ["placeholder", "style", "modelValue", "onUpdate:modelValue"])) : createCommentVNode("", true),171 item.type === "select" ? (openBlock(), createBlock(unref(ElSelect), mergeProps({172 key: 2,173 placeholder: item.placeholder ? item.placeholder : "\u8BF7\u9009\u62E9" + item.label,174 style: item.style || __props.form.formItemStyle175 }, item.config, {176 modelValue: __props.formData[item.key],177 "onUpdate:modelValue": ($event) => __props.formData[item.key] = $event178 }), {179 default: withCtx(() => [180 (openBlock(true), createElementBlock(Fragment, null, renderList(item.options, (option) => {181 return openBlock(), createBlock(unref(ElOption), {182 key: typeof option.value !== "undefined" ? option.value : option,183 label: typeof option.label !== "undefined" ? option.label : option,184 value: typeof option.value !== "undefined" ? option.value : option185 }, null, 8, ["label", "value"]);186 }), 128))187 ]),188 _: 2189 }, 1040, ["placeholder", "style", "modelValue", "onUpdate:modelValue"])) : createCommentVNode("", true),190 item.type === "button" ? (openBlock(), createBlock(unref(ElButton), mergeProps({191 key: 3,192 disabled: item.disabled ? item.disabled() : false,193 style: item.style,194 onClick: ($event) => item.handleClick(item, key),195 type: "primary"196 }, item.config), {197 default: withCtx(() => [198 createTextVNode(toDisplayString(typeof item.text === "function" ? item.text() : item.text), 1)199 ]),200 _: 2201 }, 1040, ["disabled", "style", "onClick"])) : createCommentVNode("", true)202 ]),203 _: 2204 }, 1040, ["label"])) : renderSlot(_ctx.$slots, item.slot, { key: 1 })205 ])), [206 [vShow, showFormItem(item, key)]207 ]);208 }), 128)),209 unref(showFold) ? (openBlock(), createElementBlock("div", _hoisted_2$1, [210 createVNode(unref(ElButton), {211 onClick: _cache[1] || (_cache[1] = ($event) => handleExpand()),212 type: "text"213 }, {214 default: withCtx(() => [215 createTextVNode(toDisplayString(isExpand.value ? "\u6536\u8D77" : "\u5C55\u5F00") + " ", 1),216 (openBlock(), createElementBlock("svg", {217 style: normalizeStyle(unref(svgStyle)),218 fill: "#409EFF",219 height: "12px",220 viewBox: "0 0 48 48",221 width: "12px"222 }, _hoisted_4$1, 4))223 ]),224 _: 1225 })226 ])) : createCommentVNode("", true)227 ]),228 _: 3229 }, 16, ["class", "model", "style"])) : createCommentVNode("", true),230 Object.keys(__props.table).length > 0 ? withDirectives((openBlock(), createBlock(unref(ElTable), mergeProps({231 key: 1,232 data: __props.table.list,233 border: "",234 "element-loading-text": "\u62FC\u547D\u52A0\u8F7D\u4E2D",235 stripe: "",236 style: { "overflow": "visible", "margin-top": "20px" },237 "tooltip-effect": "light"238 }, _ctx.$attrs), {239 default: withCtx(() => [240 __props.table.selection && __props.table.selection.show && __props.table.list.length > 0 ? (openBlock(), createBlock(unref(ElTableColumn), mergeProps({241 key: 0,242 align: "center",243 type: "selection"244 }, __props.table.selection.config), null, 16)) : createCommentVNode("", true),245 __props.table.showIndex !== false ? (openBlock(), createBlock(unref(ElTableColumn), {246 key: 1,247 fixed: __props.table.indexFixed || false,248 label: __props.table.indexLabel || "\u5E8F\u53F7",249 align: "center",250 type: "index",251 index: tableIndex.value,252 width: "55"253 }, null, 8, ["fixed", "label", "index"])) : createCommentVNode("", true),254 (openBlock(true), createElementBlock(Fragment, null, renderList(__props.table.columns, (column) => {255 return openBlock(), createBlock(unref(ElTableColumn), mergeProps({256 key: column.key + column.label,257 label: column.label,258 prop: column.key,259 align: "center"260 }, column.config), {261 header: withCtx((scope) => [262 column.header ? renderSlot(_ctx.$slots, column.header, {263 key: 0,264 row: scope.row265 }) : (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(column.label), 1))266 ]),267 default: withCtx((scope) => [268 !column.hasOwnProperty("type") ? (openBlock(), createElementBlock("span", _hoisted_6$1, toDisplayString(scope.row[column.key]), 1)) : createCommentVNode("", true),269 column.type === "format" ? (openBlock(), createElementBlock("span", _hoisted_7$1, [270 createElementVNode("span", {271 innerHTML: column.format(scope.row, scope)272 }, null, 8, _hoisted_8$1)273 ])) : createCommentVNode("", true),274 column.type === "textBtn" ? (openBlock(), createElementBlock("span", _hoisted_9$1, [275 (openBlock(true), createElementBlock(Fragment, null, renderList(column.textBtn, (btn, key) => {276 return openBlock(), createElementBlock("span", { key }, [277 btn.text || btn.funcText(scope.row, scope) ? (openBlock(), createBlock(unref(ElButton), mergeProps({278 key: 0,279 onClick: ($event) => btn.handleClick(scope.row, scope),280 style: { "margin-right": "10px" },281 type: "text"282 }, btn.config || btn.funcConfig ? btn.funcConfig(scope.row, scope) : {}, {283 innerHTML: btn.text || btn.funcText(scope.row, scope)284 }), null, 16, ["onClick", "innerHTML"])) : createCommentVNode("", true)285 ]);286 }), 128))287 ])) : createCommentVNode("", true),288 column.type === "slot" ? (openBlock(), createElementBlock("span", _hoisted_10$1, [289 renderSlot(_ctx.$slots, column.slot, {290 row: scope.row291 })292 ])) : createCommentVNode("", true)293 ]),294 _: 2295 }, 1040, ["label", "prop"]);296 }), 128))297 ]),298 _: 3299 }, 16, ["data"])), [300 [_directive_loading, __props.table.isLoading]301 ]) : createCommentVNode("", true),302 Object.keys(__props.table).length > 0 && __props.pagination && Array.isArray(__props.table.list) && __props.table.list.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_11, [303 createVNode(unref(ElPagination), mergeProps({304 "current-page": __props.formData.pageIndex || 1,305 layout: typeof __props.pagination === "object" ? __props.pagination.layout : "total, sizes, prev, pager, next, jumper",306 "page-size": __props.formData.pageSize || 10,307 "page-sizes": typeof __props.pagination === "object" ? __props.pagination.pageSizes : [10, 20, 50, 100],308 total: 11,309 onCurrentChange: handleCurrentChange,310 onSizeChange: handleSizeChange311 }, typeof __props.pagination === "object" ? __props.pagination : {}), null, 16, ["current-page", "layout", "page-size", "page-sizes"])312 ])) : createCommentVNode("", true)313 ]);314 };315 }316}));317var index_vue_vue_type_style_index_0_lang = "";318const _hoisted_1 = { class: "custom-column-wrapper" };319const _hoisted_2 = { class: "custom-column-title-wrapper" };320const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "custom-column-title" }, "\u81EA\u5B9A\u4E49\u5217", -1);321const _hoisted_4 = /* @__PURE__ */ createElementVNode("span", { class: "custom-column-search" }, "\u641C\u7D22\u5217\uFF1A", -1);322const _hoisted_5 = /* @__PURE__ */ createTextVNode("\u5168\u9009");323const _hoisted_6 = {324 class: "text-center",325 slot: "footer"326};327const _hoisted_7 = /* @__PURE__ */ createTextVNode("\u53D6 \u6D88");328const _hoisted_8 = /* @__PURE__ */ createTextVNode("\u786E \u5B9A");329const _hoisted_9 = /* @__PURE__ */ createElementVNode("p", { class: "text-center custom-column-search" }, "\u6682\u65E0\u5217\u6570\u636E", -1);330const _hoisted_10 = [331 _hoisted_9332];333const __default__ = defineComponent({334 name: "CustomColumn"335});336const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {337 props: {338 localName: null,339 show: { type: Boolean, default: false },340 baseColumns: null,341 columns: null,342 defaultColumns: null343 },344 emits: ["update:show", "update:columns"],345 setup(__props, { emit }) {346 const props = __props;347 const keyWord = ref("");348 const visible = ref(false);349 const checkAll = ref(true);350 const allColumns = ref([]);351 const showColumns = ref([]);352 const checkedColumns = ref([]);353 const disabledCustoms = ref([]);354 const isIndeterminate = ref(false);355 watch(() => props.show, (val) => {356 if (val)357 initShow();358 visible.value = val;359 }, { immediate: true });360 watch(visible, (val) => {361 emit("update:show", val);362 });363 function setLStorage(key, value) {364 const str = window.JSON.stringify(value);365 window.localStorage.setItem(key, str);366 }367 function getLStorage(key) {368 const str = window.localStorage.getItem(key);369 if (!str)370 return "";371 try {372 return window.JSON.parse(str);373 } catch (error) {374 window.localStorage.removeItem(key);375 window.location.reload();376 }377 }378 function searchColumns(word = "") {379 showColumns.value = allColumns.value.filter((val) => val.label.toUpperCase().includes(word.toUpperCase())).map((v) => v.key);380 handleCheckedColumnsChange();381 }382 async function initLocalStorage() {383 var _a;384 let checkedColumns2 = getLStorage(props.localName) || props.defaultColumns || [];385 if (Array.isArray(checkedColumns2) && checkedColumns2.length > 0) {386 let hadCheckedColumns = [], checkedColumn;387 checkedColumns2.forEach((v, i) => {388 var _a2;389 checkedColumn = (_a2 = props.baseColumns) == null ? void 0 : _a2.find((item) => item.key === v);390 checkedColumn && checkedColumn.key ? hadCheckedColumns.push(checkedColumn) : checkedColumns2.splice(i, 1);391 });392 (_a = props.baseColumns) == null ? void 0 : _a.forEach((item) => {393 if (!checkedColumns2.includes(item.key))394 allColumns.value.push(item);395 });396 allColumns.value = hadCheckedColumns.concat(allColumns.value);397 disabledCustoms.value = allColumns.value.filter((item) => item.disabledCustom).map((v) => v.key);398 showColumns.value = allColumns.value.map((v) => v.key);399 await nextTick();400 emit("update:columns", hadCheckedColumns);401 return setLStorage(props.localName, checkedColumns2);402 }403 if (props.baseColumns)404 allColumns.value = props.baseColumns;405 disabledCustoms.value = allColumns.value.filter((item) => item.disabledCustom).map((v) => v.key);406 showColumns.value = allColumns.value.map((v) => v.key);407 emit("update:columns", props.baseColumns);408 }409 function initShow() {410 keyWord.value = "";411 searchColumns(keyWord.value);412 if (props.columns)413 checkedColumns.value = props.columns.map((v) => v.key);414 handleCheckedColumnsChange();415 }416 function cancel() {417 visible.value = false;418 }419 async function confirm() {420 let hadCheckedColumns = [], newCheckedColumns = [];421 allColumns.value.forEach((item) => {422 if (checkedColumns.value.includes(item.key)) {423 hadCheckedColumns.push(item);424 newCheckedColumns.push(item.key);425 }426 });427 setLStorage(props.localName, newCheckedColumns);428 emit("update:columns", []);429 await nextTick();430 emit("update:columns", hadCheckedColumns);431 visible.value = false;432 }433 function handleCheckAllChange(bool) {434 const showColumnsKeys = bool ? showColumns.value : showColumns.value.filter((v) => !disabledCustoms.value.includes(v));435 checkedColumns.value = bool ? checkedColumns.value = [.../* @__PURE__ */ new Set([...checkedColumns.value, ...showColumnsKeys])] : checkedColumns.value.filter((key) => !showColumnsKeys.includes(key));436 handleCheckedColumnsChange();437 }438 function handleCheckedColumnsChange() {439 checkAll.value = showColumns.value.every((v) => checkedColumns.value.includes(v));440 isIndeterminate.value = !checkAll.value && showColumns.value.some((v) => checkedColumns.value.includes(v));441 }442 initLocalStorage();443 return (_ctx, _cache) => {444 return openBlock(), createElementBlock("div", _hoisted_1, [445 createVNode(unref(ElDialog), {446 modelValue: visible.value,447 "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => visible.value = $event),448 "show-close": false,449 width: "880px"450 }, {451 title: withCtx(() => [452 createElementVNode("div", _hoisted_2, [453 _hoisted_3,454 _hoisted_4,455 createVNode(unref(ElInput), {456 onInput: searchColumns,457 placeholder: "\u8BF7\u8F93\u5165\u5217\u540D\u79F0",458 size: "small",459 style: { "width": "200px" },460 modelValue: keyWord.value,461 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => keyWord.value = $event)462 }, null, 8, ["modelValue"])463 ])464 ]),465 default: withCtx(() => [466 withDirectives(createElementVNode("div", null, [467 createVNode(unref(ElCheckbox), {468 indeterminate: isIndeterminate.value,469 onChange: handleCheckAllChange,470 modelValue: checkAll.value,471 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => checkAll.value = $event)472 }, {473 default: withCtx(() => [474 _hoisted_5475 ]),476 _: 1477 }, 8, ["indeterminate", "modelValue"]),478 createVNode(unref(ElCheckboxGroup), {479 onChange: handleCheckedColumnsChange,480 modelValue: checkedColumns.value,481 "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => checkedColumns.value = $event)482 }, {483 default: withCtx(() => [484 createVNode(unref(Draggable), {485 animation: 166,486 group: { name: "customColumn" },487 class: "el-checkbox-wrapper",488 ghostClass: "ghost",489 handle: ".el-checkbox__label",490 "item-key": "key",491 tag: "ul",492 modelValue: allColumns.value,493 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => allColumns.value = $event)494 }, {495 item: withCtx(({ element }) => [496 createElementVNode("li", null, [497 withDirectives((openBlock(), createBlock(unref(ElCheckbox), {498 disabled: element.disabledCustom,499 key: element.key,500 label: element.key501 }, {502 default: withCtx(() => [503 createTextVNode(toDisplayString(element.label), 1)504 ]),505 _: 2506 }, 1032, ["disabled", "label"])), [507 [vShow, showColumns.value.includes(element.key)]508 ])509 ])510 ]),511 _: 1...

Full Screen

Full Screen

mine.js

Source:mine.js Github

copy

Full Screen

...12 cY = parseInt(id.substring(id.indexOf('-') + 1)); //Ëùµã»÷·½¸ñµÄY×ø±ê 13 if(inGame == 1) { 14 if(e.which == 1) { 15 if(clicked.hasClass('hidden') && !clicked.hasClass('flag')) { 16 openBlock(cX,cY); //×ó¼üµã»÷δ½Ò¿ªÇÒδ²åÆì·½¿é¼´Ö´ÐвÙ×÷1 17 } else if(!clicked.hasClass('hidden')) { 18 openNearBlock(cX,cY); //ÓÉÓÚͬʱµã»÷×óÓÒ¼üʵÏÖÆðÀ´±È½ÏÂé·³£¬ËùÒԸijÉÓõã»÷×ó¼üʵÏÖ²Ù×÷4 19 } 20 } else if(e.which == 3 && clicked.hasClass('hidden')) { //ÓÒ¼üµã»÷²Ù×÷2£¬Èç¹ûÔÊÐíʹÓÃÎʺűê¼Ç£¬Ôò¿ÉÖ´ÐвÙ×÷3 21 if(clicked.hasClass('flag')) { 22 clicked.removeClass('flag'); 23 if($('#check').attr('checked')) clicked.addClass('check'); 24 lastNum ++; 25 countNum ++; 26 } else if(clicked.hasClass('check')) { 27 clicked.removeClass('check'); 28 } else { 29 clicked.addClass('flag'); 30 lastNum --; 31 countNum --; 32 } 33 $('#lastnum').text(lastNum); 34 } 35 if(lastNum == countNum) endGame(1); //ÒòΪ×îºóʣϵķ½¿é¾ùΪÀ×ʱӦֱ½Ó½áÊøÓÎÏ·£¬Òò´ËÉèÖÃΪʣÓàÀ×ÊýºÍδ±»½Ò¿ªµÄ·½¿éÊýÏàµÈµÄʱºò½áÊøÓÎÏ· 36 } else if(inGame == 2) { 37 if(e.which == 1) { //³õʼ»¯Íê±ÏºóÖ»ÔÊÐíµã»÷×ó¼ü¿ªÊ¼ÓÎÏ· 38 openBlock(cX,cY); 39 inGame = 1; 40 var now = new Date(); 41 startTime = now.getTime(); 42 timer(); 43 } 44 } 45 }); 46 $('#main').bind('contextmenu', function(){ return false; }); //×èֹĬÈÏÓÒ»÷ʼþ 47}); 48//³õʼ»¯ 49function init(x, y, mine) { 50 countNum = x * y; 51 inGame = 2; 52 lastNum = mine; 53 mineArray = new Array(y + 2); 54 $.each(mineArray, function(key) { 55 mineArray[key] = new Array(x + 2); 56 }); 57 for(var i = 1; i <= y; i ++) { 58 for(var j = 1; j <= x; j ++) { 59 mineArray[i][j] = 0; 60 } 61 } 62 while(mine > 0) { //Ëæ»ú²¼À×£¬-1ΪÓÐÀ× 63 var i = Math.ceil(Math.random() * y); 64 var j = Math.ceil(Math.random() * x); 65 if(mineArray[i][j] != -1) { 66 mineArray[i][j] = -1; 67 mine --; 68 } 69 } 70 for(var i = 1; i <= y; i ++) { //±éÀúµØÀ×Êý×飬ͳ¼Æÿ¸ö¸ñ×ÓËÄÖܵØÀ×µÄÊýÁ¿ 71 for(var j = 1; j <= x; j ++) { 72 if(mineArray[i][j] != -1) { 73 if(i > 1 && j > 1 && mineArray[i - 1][j - 1] == -1) mineArray[i][j] ++; 74 if(i > 1 && mineArray[i - 1][j] == -1) mineArray[i][j] ++; 75 if(i > 1 && j < x && mineArray[i - 1][j + 1] == -1) mineArray[i][j] ++; 76 if(j < x && mineArray[i][j + 1] == -1) mineArray[i][j] ++; 77 if(i < y && j < x && mineArray[i + 1][j + 1] == -1) mineArray[i][j] ++; 78 if(i < y && mineArray[i + 1][j] == -1) mineArray[i][j] ++; 79 if(i < y && j > 1 && mineArray[i + 1][j - 1] == -1) mineArray[i][j] ++; 80 if(j > 1 && mineArray[i][j - 1] == -1) mineArray[i][j] ++; 81 } 82 } 83 } 84 var block = ''; 85 for(var i = 1, row = mineArray.length - 1; i < row; i ++) { 86 for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) { 87 block += '<div id="b' + i + '-' + j + '" style="left:' + (j - 1) * 20 + 'px;top:' + (i - 1) * 20 + 'px;" class="hidden"></div>'; 88 } 89 } 90 $('#main').html(block).width(x * 20 + 1).height(y * 20 + 1).show(); //»æͼ 91 $('#warning').html(''); 92 $('#submenu').show(); 93 $('#lastnum').text(lastNum); 94} 95//½Ò¿ª·½¿é 96function openBlock(x, y) { 97 var current = $('#b' + x + '-' + y); 98 if(mineArray[x][y] == -1) { 99 if(inGame == 1) { //´¥À×ʱÈçÓÎÏ·½øÐÐÖУ¬Ôòʧ°Ü½áÊøÓÎÏ· 100 current.addClass('cbomb'); 101 endGame(); 102 } else if(inGame == 2) { //ÈçÓÎÏ·³õʼ»¯ºó»¹Î´¿ªÊ¼£¬ÔòÖØгõʼ»¯µØÀ×Õó£¬ÔÙ½Ò¿ª´Ë·½¿é£¬ÒÔ±£Ö¤µÚÒ»´Îµã»÷²»´¥À× 103 init(mineArray[0].length - 2, mineArray.length - 2, lastNum); 104 openBlock(x, y); 105 } else { //ÓÎÏ·½áÊøʱÐè½Ò¿ªÈ«²¿·½¿é£¬±ê¼ÇµØÀ×λÖà 106 if(!current.hasClass('flag')) current.addClass('bomb'); 107 } 108 } else if(mineArray[x][y] > 0) { 109 if(current.hasClass('flag')) { //ÈôÔÚÎÞÀ׵ķ½¿éÉϱê¼ÇÁËСÆ죬Èç¹ûÖÜΧµÄ¹ã³¡Ö´ÐвÙ×÷4ʱ²¨¼°µ½´Ë·½¿é£¬Ôò´¥·¢Ê§°Ü½áÊøÓÎÏ· 110 current.addClass('wrong'); 111 if(inGame) endGame(); 112 } else { 113 current.html(mineArray[x][y]).addClass('num' + mineArray[x][y]).removeClass('hidden'); //ÏÔʾÖܱߵĵØÀ×ÊýÁ¿ 114 if(current.hasClass('check')) current.removeClass('check'); 115 if(inGame) countNum --; 116 } 117 } else { 118 if(current.hasClass('flag')) { //ͬÉÏ 119 current.addClass('wrong'); 120 if(inGame) endGame(); 121 } else { 122 current.removeClass('hidden'); 123 if(current.hasClass('check')) current.removeClass('check'); 124 if(inGame) { //µã»÷µ½ÖܱßÎÞÀ׵ķ½¿éʱ£¬×Ô¶¯½Ò¿ªÖÜΧ·½¿é 125 countNum --; 126 var row = mineArray.length - 2, col = mineArray[0].length - 2; 127 if(x > 1 && y > 1 && $('#b' + (x - 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x - 1, y - 1); 128 if(x > 1 && $('#b' + (x - 1) + '-' + y).hasClass('hidden')) openBlock(x - 1, y); 129 if(x > 1 && y < col && $('#b' + (x - 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x - 1, y + 1); 130 if(y < col && $('#b' + x + '-' + (y + 1)).hasClass('hidden')) openBlock(x, y + 1); 131 if(x < row && y < col && $('#b' + (x + 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x + 1, y + 1); 132 if(x < row && $('#b' + (x + 1) + '-' + y).hasClass('hidden')) openBlock(x + 1, y); 133 if(x < row && y > 1 && $('#b' + (x + 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x + 1, y - 1); 134 if(y > 1 && $('#b' + x + '-' + (y - 1)).hasClass('hidden')) openBlock(x, y - 1); 135 } 136 } 137 } 138} 139//½Ò¿ª¸ñ×ÓÁÚ½üÈ·ÈÏÎÞÀ׵ķ½¿é 140function openNearBlock(x, y) { 141 var flagNum = 0, hiddenNum = 0; 142 for(i = x - 1; i < x + 2; i ++) { 143 for(j = y - 1; j < y + 2; j ++) { 144 if(mineArray[i][j] != undefined) { 145 if($('#b' + i + '-' + j).hasClass('flag')) flagNum ++; //ͳ¼Æ·½¿éÖÜΧµÄÆìÖÄÊýºÍδ½Ò¿ªµÄ·½¿éÊý 146 if($('#b' + i + '-' + j).hasClass('hidden')) hiddenNum ++; 147 } 148 } 149 } 150 if(flagNum == mineArray[x][y] && hiddenNum > flagNum) { //ÆìÖÄÊýºÍÀ×ÊýÏàµÈÇÒÓÐδ½Ò¿ª·½¿éÇÒδ²åÆìµÄ·½¿éʱ£¬Ôò½Ò¿ªËü 151 for(i = x - 1; i < x + 2; i ++) { 152 for(j = y - 1; j < y + 2; j ++) { 153 if(mineArray[i][j] >= 0 && $('#b' + i + '-' + j).hasClass('hidden')) openBlock(i, j); 154 } 155 } 156 } 157} 158//¼Æʱ 159function timer(){ 160 if(inGame == 1) { //Ö»ÔÚÓÎÏ·½øÐÐÖмÆʱ 161 var now = new Date(), 162 ms = now.getTime(); 163 $('#time').text(Math.ceil((ms - startTime) / 1000)); 164 if(inGame == 1) setTimeout(function() { timer(); }, 500); 165 } else if(inGame == 2) { 166 $('#time').text('0'); 167 } 168} 169//½áÊøÓÎÏ· 170function endGame(isWin) { 171 inGame = 0; 172 for(var i = 1, row = mineArray.length - 1; i < row; i ++) { 173 for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) { 174 if(isWin) { 175 if($('#b' + i + '-' + j).hasClass('hidden') && !$('#b' + i + '-' + j).hasClass('flag')) $('#b' + i + '-' + j).addClass('flag'); 176 lastNum = 0; 177 $('#lastnum').text(lastNum); 178 } else { 179 openBlock(i, j); 180 } 181 } 182 } 183 $('#warning').text(isWin ? 'You Win!' : 'You Lose!'); ...

Full Screen

Full Screen

gui-es.js

Source:gui-es.js Github

copy

Full Screen

...93 emit("update:modelValue", "");94 };95 const { isShowIcon, passwordVisible, wordCount } = toRefs(state);96 return (_ctx, _cache) => {97 return __props.type !== "textarea" ? (openBlock(), createElementBlock("section", {98 key: 0,99 class: normalizeClass([unref(classes), "gui-input-wrap"]),100 onMouseenter: onMouseEnter,101 onMouseleave: onMouseLeave102 }, [103 _ctx.$slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_1$2, [104 renderSlot(_ctx.$slots, "prepend")105 ])) : createCommentVNode("v-if", true),106 createElementVNode("span", _hoisted_2$1, [107 renderSlot(_ctx.$slots, "prefix"),108 __props.prefixIcon ? (openBlock(), createBlock(script$3, { key: 0 }, {109 default: withCtx(() => [110 (openBlock(), createBlock(resolveDynamicComponent(__props.prefixIcon)))111 ]),112 _: 1113 })) : createCommentVNode("v-if", true)114 ]),115 createElementVNode("input", mergeProps({116 value: __props.modelValue,117 type: __props.showPassword ? unref(passwordVisible) ? "text" : "password" : __props.type,118 disabled: __props.disabled119 }, _ctx.$attrs, { onInput: handleInput }), null, 16, _hoisted_3$1),120 createCommentVNode(" clearable "),121 withDirectives(createVNode(unref(RiCloseCircleLine), {122 onClick: handleClear,123 class: "gui-input-clear"124 }, null, 512), [125 [vShow, __props.clearable && unref(isShowIcon)]126 ]),127 createCommentVNode(" \u9650\u5236\u5B57\u7B26\u957F\u5EA6 "),128 unref(isWordLimitVisible) ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(unref(wordCount)) + "/" + toDisplayString(_ctx.$attrs.maxlength || 0), 1)) : createCommentVNode("v-if", true),129 createCommentVNode(" \u663E\u793A\u5BC6\u7801 "),130 __props.showPassword ? (openBlock(), createElementBlock("div", {131 key: 2,132 onClick: _cache[0] || (_cache[0] = ($event) => passwordVisible.value = !unref(passwordVisible))133 }, [134 withDirectives(createVNode(unref(RiEyeLine), { width: "20" }, null, 512), [135 [vShow, unref(passwordVisible)]136 ]),137 withDirectives(createVNode(unref(RiEyeOffLine), { width: "20" }, null, 512), [138 [vShow, !unref(passwordVisible)]139 ])140 ])) : createCommentVNode("v-if", true),141 createElementVNode("span", _hoisted_5, [142 renderSlot(_ctx.$slots, "suffix"),143 __props.suffixIcon ? (openBlock(), createBlock(script$3, { key: 0 }, {144 default: withCtx(() => [145 (openBlock(), createBlock(resolveDynamicComponent(__props.suffixIcon)))146 ]),147 _: 1148 })) : createCommentVNode("v-if", true)149 ]),150 _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_6, [151 renderSlot(_ctx.$slots, "append")152 ])) : createCommentVNode("v-if", true)153 ], 34)) : (openBlock(), createElementBlock("section", _hoisted_7, [154 createElementVNode("textarea", {155 value: __props.modelValue,156 name: "",157 id: "",158 cols: "30",159 rows: "10"160 }, null, 8, _hoisted_8)161 ]));162 };163 }164});165script$2.__file = "components/input/index.vue";166const MONTHS = [167 { label: "Jan", value: 0 },168 { label: "Feb", value: 1 },169 { label: "Mar", value: 2 },170 { label: "Apr", value: 3 },171 { label: "May", value: 4 },172 { label: "Jun", value: 5 },173 { label: "Jul", value: 6 },174 { label: "Aug", value: 7 },175 { label: "Sept", value: 8 },176 { label: "Oct", value: 9 },177 { label: "Nov", value: 10 },178 { label: "Dec", value: 11 }179];180const _hoisted_1$1 = ["onClick"];181var script$1 = /* @__PURE__ */ defineComponent({182 emits: ["select"],183 setup(__props, { emit }) {184 useAttrs();185 reactive({});186 const rows = computed(() => {187 const tableRows = [[], [], []];188 for (let i = 0; i < 3; i += 1) {189 const row = tableRows[i];190 for (let j = 0; j < 4; j += 1) {191 row.push(MONTHS[i * 4 + j]);192 }193 }194 return tableRows;195 });196 const handleSelect = (val) => {197 console.log(val);198 emit("select", val);199 };200 return (_ctx, _cache) => {201 return openBlock(), createElementBlock("table", null, [202 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, index) => {203 return openBlock(), createElementBlock("tr", { key: index }, [204 (openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell) => {205 return openBlock(), createElementBlock("td", {206 key: cell.label207 }, [208 createElementVNode("span", {209 onClick: ($event) => handleSelect(cell.value)210 }, toDisplayString(cell.label), 9, _hoisted_1$1)211 ]);212 }), 128))213 ]);214 }), 128))215 ]);216 };217 }218});219script$1.__file = "components/date-picker/comp/month-panel.vue";220const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "date-top-bar" }, [221 /* @__PURE__ */ createElementVNode("span")222], -1);223const _hoisted_2 = { key: 0 };224const _hoisted_3 = { key: 1 };225const _hoisted_4 = { key: 2 };226var script = /* @__PURE__ */ defineComponent({227 props: {228 modelValue: {229 type: String,230 default: ""231 },232 type: {233 type: String,234 default: "dates"235 }236 },237 emits: ["update:modelValue"],238 setup(__props, { emit }) {239 useAttrs();240 const state = reactive({241 panelVisible: false242 });243 const openPanel = () => {244 state.panelVisible = true;245 };246 const handleSelect = (val) => {247 emit("update:modelValue", val);248 };249 const handleClosePanel = () => {250 state.panelVisible = false;251 };252 const { panelVisible } = toRefs(state);253 return (_ctx, _cache) => {254 return openBlock(), createElementBlock("section", { onClick: handleClosePanel }, [255 createVNode(script$2, mergeProps({ value: __props.modelValue }, _ctx.$attrs, { onFocus: openPanel }), null, 16, ["value"]),256 createVNode(Transition, null, {257 default: withCtx(() => [258 withDirectives(createElementVNode("div", null, [259 _hoisted_1,260 __props.type === "year" ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("v-if", true),261 __props.type === "month" ? (openBlock(), createElementBlock("div", _hoisted_3, [262 createVNode(script$1, { onSelect: handleSelect })263 ])) : (openBlock(), createElementBlock("div", _hoisted_4))264 ], 512), [265 [vShow, unref(panelVisible)]266 ])267 ]),268 _: 1269 })270 ]);271 };272 }273});274script.__file = "components/date-picker/index.vue";...

Full Screen

Full Screen

script15.js

Source:script15.js Github

copy

Full Screen

...12cY = parseInt(id.substring(id.indexOf('-') + 1)); //所点击方格的Y坐标 13if(inGame == 1) { 14if(e.which == 1) { 15if(clicked.hasClass('hidden') && !clicked.hasClass('flag')) { 16openBlock(cX,cY); //左键点击未揭开且未插旗方块即执行操作1 17} else if(!clicked.hasClass('hidden')) { 18openNearBlock(cX,cY); //由于同时点击左右键实现起来比较麻烦，所以改成用点击左键实现操作4 19} 20} else if(e.which == 3 && clicked.hasClass('hidden')) { //右键点击操作2，如果允许使用问号标记，则可执行操作3 21if(clicked.hasClass('flag')) { 22clicked.removeClass('flag'); 23if($('#check').attr('checked')) clicked.addClass('check'); 24lastNum ++; 25countNum ++; 26} else if(clicked.hasClass('check')) { 27clicked.removeClass('check'); 28} else { 29clicked.addClass('flag'); 30lastNum --; 31countNum --; 32} 33$('#lastnum').text(lastNum); 34} 35if(lastNum == countNum) endGame(1); //因为最后剩下的方块均为雷时应直接结束游戏，因此设置为剩余雷数和未被揭开的方块数相等的时候结束游戏 36} else if(inGame == 2) { 37if(e.which == 1) { //初始化完毕后只允许点击左键开始游戏 38openBlock(cX,cY); 39inGame = 1; 40var now = new Date(); 41startTime = now.getTime(); 42timer(); 43} 44} 45}); 46$('#main').bind('contextmenu', function(){ return false; }); //阻止默认右击事件 47}); 48//初始化 49function init(x, y, mine) { 50countNum = x * y; 51inGame = 2; 52lastNum = mine; 53mineArray = new Array(y + 2); 54$.each(mineArray, function(key) { 55mineArray[key] = new Array(x + 2); 56}); 57for(var i = 1; i <= y; i ++) { 58for(var j = 1; j <= x; j ++) { 59mineArray[i][j] = 0; 60} 61} 62while(mine > 0) { //随机布雷，-1为有雷 63var i = Math.ceil(Math.random() * y); 64var j = Math.ceil(Math.random() * x); 65if(mineArray[i][j] != -1) { 66mineArray[i][j] = -1; 67mine --; 68} 69} 70for(var i = 1; i <= y; i ++) { //遍历地雷数组，统计每个格子四周地雷的数量 71for(var j = 1; j <= x; j ++) { 72if(mineArray[i][j] != -1) { 73if(i > 1 && j > 1 && mineArray[i - 1][j - 1] == -1) mineArray[i][j] ++; 74if(i > 1 && mineArray[i - 1][j] == -1) mineArray[i][j] ++; 75if(i > 1 && j < x && mineArray[i - 1][j + 1] == -1) mineArray[i][j] ++; 76if(j < x && mineArray[i][j + 1] == -1) mineArray[i][j] ++; 77if(i < y && j < x && mineArray[i + 1][j + 1] == -1) mineArray[i][j] ++; 78if(i < y && mineArray[i + 1][j] == -1) mineArray[i][j] ++; 79if(i < y && j > 1 && mineArray[i + 1][j - 1] == -1) mineArray[i][j] ++; 80if(j > 1 && mineArray[i][j - 1] == -1) mineArray[i][j] ++; 81} 82} 83} 84var block = ''; 85for(var i = 1, row = mineArray.length - 1; i < row; i ++) { 86for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) { 87block += '<div id="b' + i + '-' + j + '" style="left:' + (j - 1) * 20 + 'px;top:' + (i - 1) * 20 + 'px;" class="hidden"></div>'; 88} 89} 90$('#main').html(block).width(x * 20 + 1).height(y * 20 + 1).show(); //绘图 91$('#warning').html(''); 92$('#submenu').show(); 93$('#lastnum').text(lastNum); 94} 95//揭开方块 96function openBlock(x, y) { 97var current = $('#b' + x + '-' + y); 98if(mineArray[x][y] == -1) { 99if(inGame == 1) { //触雷时如游戏进行中，则失败结束游戏 100current.addClass('cbomb'); 101endGame(); 102} else if(inGame == 2) { //如游戏初始化后还未开始，则重新初始化地雷阵，再揭开此方块，以保证第一次点击不触雷 103init(mineArray[0].length - 2, mineArray.length - 2, lastNum); 104openBlock(x, y); 105} else { //游戏结束时需揭开全部方块，标记地雷位置 106if(!current.hasClass('flag')) current.addClass('bomb'); 107} 108} else if(mineArray[x][y] > 0) { 109if(current.hasClass('flag')) { //若在无雷的方块上标记了小旗，如果周围的广场执行操作4时波及到此方块，则触发失败结束游戏 110current.addClass('wrong'); 111if(inGame) endGame(); 112} else { 113current.html(mineArray[x][y]).addClass('num' + mineArray[x][y]).removeClass('hidden'); //显示周边的地雷数量 114if(current.hasClass('check')) current.removeClass('check'); 115if(inGame) countNum --; 116} 117} else { 118if(current.hasClass('flag')) { //同上 119current.addClass('wrong'); 120if(inGame) endGame(); 121} else { 122current.removeClass('hidden'); 123if(current.hasClass('check')) current.removeClass('check'); 124if(inGame) { //点击到周边无雷的方块时，自动揭开周围方块 125countNum --; 126var row = mineArray.length - 2, col = mineArray[0].length - 2; 127if(x > 1 && y > 1 && $('#b' + (x - 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x - 1, y - 1); 128if(x > 1 && $('#b' + (x - 1) + '-' + y).hasClass('hidden')) openBlock(x - 1, y); 129if(x > 1 && y < col && $('#b' + (x - 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x - 1, y + 1); 130if(y < col && $('#b' + x + '-' + (y + 1)).hasClass('hidden')) openBlock(x, y + 1); 131if(x < row && y < col && $('#b' + (x + 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x + 1, y + 1); 132if(x < row && $('#b' + (x + 1) + '-' + y).hasClass('hidden')) openBlock(x + 1, y); 133if(x < row && y > 1 && $('#b' + (x + 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x + 1, y - 1); 134if(y > 1 && $('#b' + x + '-' + (y - 1)).hasClass('hidden')) openBlock(x, y - 1); 135} 136} 137} 138} 139//揭开格子邻近确认无雷的方块 140function openNearBlock(x, y) { 141var flagNum = 0, hiddenNum = 0; 142for(i = x - 1; i < x + 2; i ++) { 143for(j = y - 1; j < y + 2; j ++) { 144if(mineArray[i][j] != undefined) { 145if($('#b' + i + '-' + j).hasClass('flag')) flagNum ++; //统计方块周围的旗帜数和未揭开的方块数 146if($('#b' + i + '-' + j).hasClass('hidden')) hiddenNum ++; 147} 148} 149} 150if(flagNum == mineArray[x][y] && hiddenNum > flagNum) { //旗帜数和雷数相等且有未揭开方块且未插旗的方块时，则揭开它 151for(i = x - 1; i < x + 2; i ++) { 152for(j = y - 1; j < y + 2; j ++) { 153if(mineArray[i][j] >= 0 && $('#b' + i + '-' + j).hasClass('hidden')) openBlock(i, j); 154} 155} 156} 157} 158//计时 159function timer(){ 160if(inGame == 1) { //只在游戏进行中计时 161var now = new Date(), 162ms = now.getTime(); 163$('#time').text(Math.ceil((ms - startTime) / 1000)); 164if(inGame == 1) setTimeout(function() { timer(); }, 500); 165} else if(inGame == 2) { 166$('#time').text('0'); 167} 168} 169//结束游戏 170function endGame(isWin) { 171inGame = 0; 172for(var i = 1, row = mineArray.length - 1; i < row; i ++) { 173for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) { 174if(isWin) { 175if($('#b' + i + '-' + j).hasClass('hidden') && !$('#b' + i + '-' + j).hasClass('flag')) $('#b' + i + '-' + j).addClass('flag'); 176lastNum = 0; 177$('#lastnum').text(lastNum); 178} else { 179openBlock(i, j); 180} 181} 182} 183$('#warning').text(isWin ? 'You Win!' : 'You Lose!'); ...

Full Screen

Full Screen

index.es.js

Source:index.es.js Github

copy

Full Screen

...75 const _component_el_tag = resolveComponent("el-tag");76 const _component_el_scrollbar = resolveComponent("el-scrollbar");77 const _component_el_tab_pane = resolveComponent("el-tab-pane");78 const _component_el_tabs = resolveComponent("el-tabs");79 return openBlock(), createElementBlock("div", _hoisted_1, [80 createVNode(_component_el_tabs, {81 modelValue: _ctx.activeName,82 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.activeName = $event)83 }, {84 default: withCtx(() => [85 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index2) => {86 return openBlock(), createBlock(_component_el_tab_pane, {87 label: item.title,88 key: index2,89 name: item.title90 }, {91 default: withCtx(() => [92 createVNode(_component_el_scrollbar, { "max-height": "200px" }, {93 default: withCtx(() => [94 (openBlock(true), createElementBlock(Fragment, null, renderList(item.content, (val, i) => {95 return openBlock(), createElementBlock("div", {96 class: "container",97 key: i,98 onClick: ($event) => _ctx.clickItem(val, i)99 }, [100 val.avatar ? (openBlock(), createElementBlock("div", _hoisted_3, [101 createVNode(_component_el_avatar, {102 size: 50,103 src: val.avatar104 }, null, 8, ["src"])105 ])) : createCommentVNode("", true),106 createElementVNode("div", _hoisted_4, [107 val.title ? (openBlock(), createElementBlock("div", _hoisted_5, [108 createElementVNode("p", null, toDisplayString(val.title), 1),109 val.tag ? (openBlock(), createBlock(_component_el_tag, {110 key: 0,111 type: val.tagType,112 size: "small"113 }, {114 default: withCtx(() => [115 createTextVNode(toDisplayString(val.tag), 1)116 ]),117 _: 2118 }, 1032, ["type"])) : createCommentVNode("", true)119 ])) : createCommentVNode("", true),120 val.desc ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(val.desc), 1)) : createCommentVNode("", true),121 val.time ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(val.time), 1)) : createCommentVNode("", true)122 ])123 ], 8, _hoisted_2);124 }), 128))125 ]),126 _: 2127 }, 1024),128 createElementVNode("div", _hoisted_8, [129 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actions, (action, k) => {130 return openBlock(), createElementBlock("div", {131 class: "actions_item",132 key: k,133 onClick: ($event) => _ctx.clickAction(action, k)134 }, [135 action.icon ? (openBlock(), createElementBlock("div", _hoisted_10, [136 (openBlock(), createBlock(resolveDynamicComponent(`el-icon-${_ctx.toLines(action.icon)}`)))137 ])) : createCommentVNode("", true),138 createElementVNode("div", _hoisted_11, toDisplayString(action.text), 1)139 ], 8, _hoisted_9);140 }), 128))141 ])142 ]),143 _: 2144 }, 1032, ["label", "name"]);145 }), 128))146 ]),147 _: 1148 }, 8, ["modelValue"])149 ]);150}...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text=Sign in');7 await page.type('input[name="identifier"]', 'your email');8 await page.click('input[type="submit"]');9 await page.type('input[name="password"]', 'your password');10 await page.click('input[type="submit"]');11 await page.waitForNavigation();12 await page.screenshot({ path: `example.png` });13 await browser.close();14})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.waitForTimeout(5000);7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.waitForTimeout(5000);15 await page.waitForTimeout(5000);16 await browser.close();17})();18const { chromium } = require('playwright');19(async () => {20 const browser = await chromium.launch();21 const context = await browser.newContext();22 const page = await context.newPage();23 await page.waitForTimeout(5000);24 await page.waitForTimeout(

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { openBlock } = require('@playwright/test');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await openBlock('test');8 await browser.close();9})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.evaluate(() => {6 const element = document.querySelector('#features');7 const boundingBox = element.getBoundingClientRect();8 const centerX = boundingBox.x + boundingBox.width / 2;9 const centerY = boundingBox.y + boundingBox.height / 2;10 const topLeftX = boundingBox.x;11 const topLeftY = boundingBox.y;12 const bottomRightX = boundingBox.x + boundingBox.width;13 const bottomRightY = boundingBox.y + boundingBox.height;14 const topRightX = boundingBox.x + boundingBox.width;15 const topRightY = boundingBox.y;16 const bottomLeftX = boundingBox.x;17 const bottomLeftY = boundingBox.y + boundingBox.height;18 const topCenterX = boundingBox.x + boundingBox.width / 2;19 const topCenterY = boundingBox.y;20 const bottomCenterX = boundingBox.x + boundingBox.width / 2;21 const bottomCenterY = boundingBox.y + boundingBox.height;22 const leftCenterX = boundingBox.x;23 const leftCenterY = boundingBox.y + boundingBox.height / 2;24 const rightCenterX = boundingBox.x + boundingBox.width;25 const rightCenterY = boundingBox.y + boundingBox.height / 2;26 const center = { x

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2const { openBlock, closeBlock } = require('playwright/lib/utils/recorderActions');3(async () => {4 const browser = await playwright.chromium.launch();5 const context = await browser.newContext();6 await openBlock({ title: 'My Block' });7 const page = await context.newPage();8 await page.click('text="Get started"');9 await closeBlock();10 await browser.close();11})();12const { test, expect } = require('@playwright/test');13test('recording', async ({ page }) => {14 await page.click('text="Get started"');15});16const {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1await page.openBlock('blockName');2await page.closeBlock('blockName');3await page.openBlock('blockName', {param1: 'value1', param2: 'value2'});4await page.closeBlock('blockName', {param1: 'value1', param2: 'value2'});5await page.openBlock('blockName', {param1: 'value1', param2: 'value2'}, {param3: 'value3', param4: 'value4'});6await page.closeBlock('blockName', {param1: 'value1', param2: 'value2'}, {param3: 'value3', param4: 'value4'});7await page.openBlock('blockName', {param1: 'value1', param2: 'value2'}, {param3: 'value3', param4: 'value4'}, {param5: 'value5', param6: 'value6'});8await page.closeBlock('blockName', {param1: 'value1', param2: 'value2'}, {param3: 'value3', param4: 'value4'}, {param5: 'value5', param6: 'value6'});9await page.openBlock('blockName', {param1: 'value1', param2: 'value2'}, {param3: 'value3', param4: 'value4'}, {param5: 'value5', param6: 'value6'}, {param7: 'value7', param8: 'value8'});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2const { openBrowser, openBlock } = require('playwright/lib/server/chromium/crBrowser');3const { chromium } = playwright;4(async () => {5 const browser = await openBrowser({ headless: false });6 const context = await browser.newContext();7 const page = await context.newPage();8 await block.evaluate(() => {9 const div = document.createElement('div');10 div.textContent = 'Hello World';11 document.body.appendChild(div);12 });13 await page.close();14 await context.close();15 await browser.close();16})();17const playwright = require('playwright');18const { openBrowser, openBlock } = require('playwright/lib/server/chromium/crBrowser');19const { chromium } = playwright;20(async () => {21 const browser = await openBrowser({ headless: false });22 const context = await browser.newContext();23 const page = await context.newPage();24 const newPage = await block.newPage();25 await page.close();26 await context.close();27 await browser.close();28})();29const playwright = require('playwright');30const { openBrowser, openBlock } = require('playwright/lib/server/chromium/crBrowser');31const { chromium } = playwright;32(async () => {33 const browser = await openBrowser({ headless: false });

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { openBlock } = require("@playwright/test");2const path = require("path");3(async () => {4 const block = await openBlock({5 path: path.join(__dirname, "blocks"),6 });7 await block.step("My first step", async ({ page }) => {8 });9 await block.close();10})();11### openBlock(options)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require("playwright");2const { openBrowser } = require('playwright/lib/server/browserServer');3const { openBlock } = require('playwright/lib/server/blocker');4(async () => {5 const browser = await chromium.launch({6 });7 const context = await browser.newContext();8 const page = await context.newPage();9 const newPage = await context.newPage();10 const blocker = await openBlock(newPage);11 await blocker.enable([12 {13 }14 ]);15 await newPage.screenshot({ path: `example.png` });16 await browser.close();17})();18const { chromium } = require("playwright");19const { openBrowser } = require('playwright/lib/server/browserServer');20const { openBlock } = require('playwright/lib/server/blocker');21(async () => {22 const browser = await chromium.launch({23 });24 const context = await browser.newContext();25 const page = await context.newPage();26 const newPage = await context.newPage();27 const blocker = await openBlock(newPage);28 await blocker.enable([29 {30 }31 ]);32 await newPage.screenshot({ path: `example.png` });33 await browser.close();34})();35const { chromium } = require("playwright");36const { openBrowser } = require('playwright/lib/server/browserServer');37const { openBlock } = require('playwright/lib/server/blocker');38(async () => {39 const browser = await chromium.launch({40 });41 const context = await browser.newContext();42 const page = await context.newPage();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { openBlock } = require('@playwright/test/lib/server/traceViewer/ui/util');2const block = openBlock('test');3console.log(block);4{5}6const { openAction } = require('@playwright/test/lib/server/traceViewer/ui/util');7const action = openAction('test', 'testAction');8console.log(action);9{10}11const { openPage } = require('@playwright/test/lib/server/traceViewer/ui/util');12const page = openPage('test', 'testPage');13console.log(page);14{15}16const { openStep } = require('@playwright/test/lib/server/traceViewer/ui/util');17const step = openStep('test', 'testStep');18console.log(step);

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful