vue-leaflet-sidepanel/dist/vue-leaflet-sidepanel.es.js

Slide side panel plugin for vue-leaflet

import { defineComponent as k, createElementBlock as s, openBlock as l, createElementVNode as o, renderSlot as b, mergeModels as $, useModel as z, watch as D, ref as m, useSlots as q, onMounted as F, unref as t, createCommentVNode as C, Fragment as T, renderList as O, createVNode as R, withCtx as S, createTextVNode as L, toDisplayString as M, toRefs as j, createBlock as A, resolveDynamicComponent as G } from "vue";
import * as H from "leaflet";
import "leaflet.sidepanel";
const I = { class: "sidepanel-tab" }, J = ["data-tab-link"], K = /* @__PURE__ */ k({
  __name: "LSidepanelTabNav",
  props: {
    link: {}
  },
  setup(u) {
    return (i, a) => (l(), s("li", I, [
      o("a", {
        href: "#",
        class: "sidebar-tab-link",
        role: "tab",
        "data-tab-link": `tab-${i.link}`
      }, [
        b(i.$slots, "default")
      ], 8, J)
    ]));
  }
}), Q = ["id"], U = { class: "sidepanel-inner-wrapper" }, W = {
  key: 0,
  class: "sidepanel-tabs-wrapper",
  "aria-label": "sidepanel tab navigation"
}, X = { class: "sidepanel-tabs" }, Y = { class: "sidepanel-content-wrapper" }, Z = { class: "sidepanel-content" }, le = /* @__PURE__ */ k({
  __name: "LSidepanel",
  props: /* @__PURE__ */ $({
    id: {},
    headings: { default: void 0 },
    position: { default: "left" },
    tabsPosition: { default: "top" },
    darkMode: { type: Boolean, default: !1 },
    defaultTab: { default: 1 },
    pushControls: { type: Boolean, default: !1 },
    size: { default: "400px" }
  }, {
    modelValue: { type: Boolean, default: !1, required: !1 },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ $(["tabClick"], ["update:modelValue"]),
  setup(u, { emit: i }) {
    const a = z(u, "modelValue");
    D(a, (n) => {
      f.value && (n ? y() : g());
    });
    const _ = u, {
      id: p,
      headings: e,
      position: h,
      tabsPosition: P,
      darkMode: V,
      defaultTab: B,
      pushControls: w,
      size: N
    } = _, E = i, x = q(), v = m(null), f = m(null), d = m();
    F(() => {
      var n;
      if (!f.value) return console.error("Panel not found");
      if (v.value = f.value.parentElement, !v.value) return console.error("Map not found");
      d.value = H.control.sidepanel(p, {
        panelPosition: h,
        hasTabs: e && e.length > 0,
        tabsPosition: P,
        darkMode: V,
        defaultTab: B || ((n = e == null ? void 0 : e[0]) == null ? void 0 : n.key),
        pushControls: w,
        size: N,
        onTabClick: (r) => E("tabClick", r),
        onToggle: (r) => a.value = r
      }), d.value.addTo(v.value), a.value ? y() : g();
    });
    const y = () => {
      if (!d.value) return console.error("Panel not found");
      d.value.open(), a.value = !0;
    }, g = () => {
      if (!d.value) return console.error("Panel not found");
      d.value.close(), a.value = !1;
    };
    return (n, r) => (l(), s("div", {
      id: t(p),
      ref_key: "panel",
      ref: f,
      class: "sidepanel",
      "aria-label": "side panel",
      "aria-hidden": "false"
    }, [
      o("div", U, [
        t(e) && t(e).length > 0 ? (l(), s("nav", W, [
          o("ul", X, [
            (l(!0), s(T, null, O(t(e), (c) => (l(), s("li", {
              key: c.key
            }, [
              R(K, {
                link: c.key
              }, {
                default: S(() => [
                  t(x)[`heading.${c.key}`] ? b(n.$slots, `heading.${c.key}`, { key: 0 }) : (l(), s(T, { key: 1 }, [
                    L(M(c.value), 1)
                  ], 64))
                ]),
                _: 2
              }, 1032, ["link"])
            ]))), 128))
          ])
        ])) : C("", !0),
        o("div", Y, [
          o("div", Z, [
            b(n.$slots, "default")
          ])
        ])
      ]),
      r[0] || (r[0] = o("div", { class: "sidepanel-toggle-container" }, [
        o("button", {
          class: "sidepanel-toggle-button",
          type: "button",
          "aria-label": "toggle side panel"
        })
      ], -1))
    ], 8, Q));
  }
}), ee = ["data-tab-content"], ne = /* @__PURE__ */ k({
  __name: "LSidepanelTab",
  props: {
    link: {},
    level: { default: "h3" },
    heading: { default: void 0 }
  },
  setup(u) {
    const i = u, { link: a, level: _, heading: p } = j(i);
    return (e, h) => (l(), s("div", {
      class: "sidepanel-tab-content",
      "data-tab-content": `tab-${t(a)}`
    }, [
      t(p) ? (l(), A(G(t(_)), { key: 0 }, {
        default: S(() => [
          L(M(t(p)), 1)
        ]),
        _: 1
      })) : C("", !0),
      b(e.$slots, "default")
    ], 8, ee));
  }
});
export {
  le as LSidepanel,
  ne as LSidepanelTab
};