How to use openBlock method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Layout.8ab6c7a4.js

Source:Layout.8ab6c7a4.js

...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        ])...

vue-navigation-bar.umd.js

Source:vue-navigation-bar.umd.js

...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  }...

vue-navigation-bar.esm.js

Source:vue-navigation-bar.esm.js

...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}...

ele-easy-table-next.es.js

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

...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...

mine.js

Source:mine.js

...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);  //ÓÉÓÚÍ¬Ê±µã»÷×óÓÒ¼üÊµÏÖÆðÀ´±È½ÏÂé·³£¬ËùÒÔ¸Ä³ÉÓÃµã»÷×ó¼üÊµÏÖ²Ù×÷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!'); ...

gui-es.js

Source:gui-es.js

...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";...

script15.js

Source:script15.js

...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!'); ...

index.es.js

Source:index.es.js

...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}...

Using AI Code Generation

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})();

Using AI Code Generation

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(

Using AI Code Generation

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})();

Using AI Code Generation

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

Using AI Code Generation

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 {

Using AI Code Generation

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'});

Using AI Code Generation

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 });

Using AI Code Generation

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)

Using AI Code Generation

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();

Using AI Code Generation

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);

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:

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.
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.
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.
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.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
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.
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.
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.
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.
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.
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.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.