svem/dist/plugins/tab.js

Svelte in Markdown preprocessor

let tabIndex = 0;
function createTab(children, attrId) {
  if (typeof attrId !== "object") {
    attrId = { id: attrId };
  }
  if (typeof attrId.class === "string") {
    attrId.class = attrId.class.split(" ");
  }
  const tabId = attrId.id ?? `tab-${tabIndex++}`;
  return {
    name: "tab-list",
    type: "html-node",
    tagName: "div",
    attributes: {
      ...attrId,
      id: tabId,
      role: "tablist",
      class: ["tab-list", ...attrId.class ?? []]
    },
    children: [
      {
        name: "tab-button-list",
        type: "html-node",
        tagName: "div",
        attributes: {
          class: ["tab-button-list"]
        },
        children: children.map((child) => {
          return {
            name: "tab-button",
            type: "html-node",
            tagName: "button",
            value: child.attributes.label ?? "",
            attributes: {
              id: `${tabId}-${child.attributes.id ?? ""}-button`,
              role: "tab",
              class: ["tab-button"],
              "aria-label": child.attributes.label ?? "",
              "aria-controls": `${tabId}-${child.attributes.id ?? ""}-panel`,
              "aria-selected": child.attributes.active ? "true" : "false",
              "data-tab": tabId,
              "data-tab-active": child.attributes.active
            }
          };
        })
      },
      ...children.map((child, i) => {
        return {
          name: "tab-content",
          type: "html-node",
          tagName: "div",
          attributes: {
            id: `${tabId}-${child.attributes.id ?? i}-panel`,
            role: "tabpanel",
            class: [
              "tab-content",
              !child.attributes.active ? "hidden" : "",
              child.attributes?.class?.join(" ") ?? ""
            ].filter(Boolean),
            "aria-labelledby": `${tabId}-${child.attributes.id ?? i}-button`,
            "aria-hidden": child.attributes.active ? "false" : "true",
            "data-tab": tabId,
            "data-tab-active": child.attributes.active
          },
          children: [child]
        };
      })
    ]
  };
}
export {
  createTab
};