https://svi.nl/public/generated/js/styleguide.js

1import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveDirective, createElementVNode, withDirectives, createCommentVNode, toDisplayString } from "vue";
2import { _ as _export_sfc } from "./assets/_plugin-vue_export-helper-1tPrXgE0.js";
3import { c as commonjsGlobal, g as getDefaultExportFromCjs } from "./assets/_commonjsHelpers-CcAunmGO.js";
4import { createPopper } from "@popperjs/core";
5const _sfc_main$3 = {
6  name: "Button",
7  props: {
8    variant: {
9      type: String,
10      required: false,
11      default: "primary"
12    },
13    sm: {
14      type: Boolean
15    }
16  }
17};
18function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
19  return openBlock(), createElementBlock("button", {
20    type: "button",
21    class: normalizeClass(["btn", `btn-${$props.variant}`, { "btn-sm": $props.sm }])
22  }, [
23    renderSlot(_ctx.$slots, "default")
24  ], 2);
25}
26const Button = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
27var vClickOutside_umd = { exports: {} };
28(function(module, exports) {
29  !function(e, n) {
30    module.exports = n();
31  }(commonjsGlobal, function() {
32    var e = "__v-click-outside", n = "undefined" != typeof window, t = "undefined" != typeof navigator, r = n && ("ontouchstart" in window || t && navigator.msMaxTouchPoints > 0) ? ["touchstart"] : ["click"], i = function(e2) {
33      var n2 = e2.event, t2 = e2.handler;
34      (0, e2.middleware)(n2) && t2(n2);
35    }, a = function(n2, t2) {
36      var a2 = function(e2) {
37        var n3 = "function" == typeof e2;
38        if (!n3 && "object" != typeof e2) throw new Error("v-click-outside: Binding value must be a function or an object");
39        return { handler: n3 ? e2 : e2.handler, middleware: e2.middleware || function(e3) {
40          return e3;
41        }, events: e2.events || r, isActive: !(false === e2.isActive), detectIframe: !(false === e2.detectIframe), capture: Boolean(e2.capture) };
42      }(t2.value), o2 = a2.handler, d2 = a2.middleware, c = a2.detectIframe, u = a2.capture;
43      if (a2.isActive) {
44        if (n2[e] = a2.events.map(function(e2) {
45          return { event: e2, srcTarget: document.documentElement, handler: function(e3) {
46            return function(e4) {
47              var n3 = e4.el, t3 = e4.event, r2 = e4.handler, a3 = e4.middleware, o3 = t3.path || t3.composedPath && t3.composedPath();
48              (o3 ? o3.indexOf(n3) < 0 : !n3.contains(t3.target)) && i({ event: t3, handler: r2, middleware: a3 });
49            }({ el: n2, event: e3, handler: o2, middleware: d2 });
50          }, capture: u };
51        }), c) {
52          var l = { event: "blur", srcTarget: window, handler: function(e2) {
53            return function(e3) {
54              var n3 = e3.el, t3 = e3.event, r2 = e3.handler, a3 = e3.middleware;
55              setTimeout(function() {
56                var e4 = document.activeElement;
57                e4 && "IFRAME" === e4.tagName && !n3.contains(e4) && i({ event: t3, handler: r2, middleware: a3 });
58              }, 0);
59            }({ el: n2, event: e2, handler: o2, middleware: d2 });
60          }, capture: u };
61          n2[e] = [].concat(n2[e], [l]);
62        }
63        n2[e].forEach(function(t3) {
64          var r2 = t3.event, i2 = t3.srcTarget, a3 = t3.handler;
65          return setTimeout(function() {
66            n2[e] && i2.addEventListener(r2, a3, u);
67          }, 0);
68        });
69      }
70    }, o = function(n2) {
71      (n2[e] || []).forEach(function(e2) {
72        return e2.srcTarget.removeEventListener(e2.event, e2.handler, e2.capture);
73      }), delete n2[e];
74    }, d = n ? { beforeMount: a, updated: function(e2, n2) {
75      var t2 = n2.value, r2 = n2.oldValue;
76      JSON.stringify(t2) !== JSON.stringify(r2) && (o(e2), a(e2, { value: t2 }));
77    }, unmounted: o } : {};
78    return { install: function(e2) {
79      e2.directive("click-outside", d);
80    }, directive: d };
81  });
82})(vClickOutside_umd);
83var vClickOutside_umdExports = vClickOutside_umd.exports;
84const vClickOutside = /* @__PURE__ */ getDefaultExportFromCjs(vClickOutside_umdExports);
85const _sfc_main$2 = {
86  name: "Dropdown",
87  directives: {
88    clickOutside: vClickOutside.directive
89  },
90  beforeUnmount() {
91    if (this.popper) this.destroyPopper();
92  },
93  props: {
94    variant: {
95      type: String,
96      required: false,
97      default: "primary"
98    },
99    sm: {
100      type: Boolean
101    }
102  },
103  data: function() {
104    return {
105      showMenu: false,
106      popper: null
107    };
108  },
109  methods: {
110    initPopper: function() {
111      this.popper = createPopper(this.$refs.button, this.$refs.dropdown, {
112        placement: "bottom-start",
113        modifiers: [
114          {
115            name: "offset",
116            options: {
117              offset: [0, 5]
118            }
119          }
120        ]
121      });
122    },
123    destroyPopper: function() {
124      this.popper.destroy();
125    },
126    handleToggleMenu: function() {
127      this.showMenu = !this.showMenu;
128      if (this.showMenu) {
129        this.$nextTick(() => {
130          this.initPopper();
131        });
132      } else if (this.popper) {
133        this.destroyPopper();
134      }
135    },
136    onClickOutside(event) {
137      this.showMenu = false;

138      if (this.popper) this.destroyPopper();
139    }
140  }
141};
142const _hoisted_1$2 = { class: "dropdown" };
143const _hoisted_2$2 = {
144  key: 0,
145  ref: "dropdown",
146  class: "dropdown-menu d-block",
147  "aria-labelledby": "dropdownMenuButton"
148};
149function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
150  const _directive_click_outside = resolveDirective("click-outside");
151  return openBlock(), createElementBlock("div", _hoisted_1$2, [
152    createElementVNode("button", {
153      ref: "button",
154      type: "button",
155      class: normalizeClass(["btn", `btn-${$props.variant}`, { "btn-sm": $props.sm }]),
156      onClick: _cache[0] || (_cache[0] = (...args) => $options.handleToggleMenu && $options.handleToggleMenu(...args))
157    }, [
158      renderSlot(_ctx.$slots, "dropdown-button")
159    ], 2),
160    _ctx.showMenu ? withDirectives((openBlock(), createElementBlock("div", _hoisted_2$2, [
161      renderSlot(_ctx.$slots, "dropdown-menu")
162    ])), [
163      [_directive_click_outside, $options.onClickOutside]
164    ]) : createCommentVNode("", true)
165  ]);
166}
167const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
168const _sfc_main$1 = {
169  name: "Card",
170  props: {
171    title: {
172      type: String,
173      required: false,
174      default: ""
175    }
176  }
177};
178const _hoisted_1$1 = { class: "card" };
179const _hoisted_2$1 = { class: "card-body" };
180const _hoisted_3$1 = {
181  key: 0,
182  class: "card-title"
183};
184const _hoisted_4$1 = { class: "card-text" };
185function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
186  return openBlock(), createElementBlock("div", _hoisted_1$1, [
187    createElementVNode("div", _hoisted_2$1, [
188      $props.title ? (openBlock(), createElementBlock("h5", _hoisted_3$1, toDisplayString($props.title), 1)) : createCommentVNode("", true),
189      createElementVNode("p", _hoisted_4$1, [
190        renderSlot(_ctx.$slots, "default")
191      ])
192    ])
193  ]);
194}
195const Card = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
196const _sfc_main = {
197  name: "Sidebar",
198  data: function() {
199    return {
200      hideSidebar: true
201    };
202  },
203  methods: {
204    handleToggleSidebar: function(event) {
205      this.hideSidebar = !this.hideSidebar;
206    }
207  }
208};
209const _hoisted_1 = { class: "grid-container" };
210const _hoisted_2 = {
211  key: 0,
212  class: "fas fa-chevron-left"
213};
214const _hoisted_3 = {
215  key: 1,
216  class: "fas fa-chevron-right"
217};
218const _hoisted_4 = { class: "sidebar-content" };
219const _hoisted_5 = {
220  key: 1,
221  class: "sidebar-content-big"
222};
223function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
224  return openBlock(), createElementBlock("div", _hoisted_1, [
225    createElementVNode("div", {
226      class: normalizeClass(["sidebar", { "sidebar-small": _ctx.hideSidebar }])
227    }, [
228      createElementVNode("button", {
229        class: "btn btn-light btn-sm mt-2 float-end",
230        onClick: _cache[0] || (_cache[0] = (...args) => $options.handleToggleSidebar && $options.handleToggleSidebar(...args))
231      }, [
232        !_ctx.hideSidebar ? (openBlock(), createElementBlock("i", _hoisted_2)) : createCommentVNode("", true),
233        _ctx.hideSidebar ? (openBlock(), createElementBlock("i", _hoisted_3)) : createCommentVNode("", true)
234      ]),
235      createElementVNode("div", _hoisted_4, [
236        _ctx.hideSidebar ? (openBlock(), createElementBlock("div", {
237          key: 0,
238          class: "sidebar-content-small",
239          onClick: _cache[1] || (_cache[1] = (...args) => $options.handleToggleSidebar && $options.handleToggleSidebar(...args))
240        })) : createCommentVNode("", true),
241        !_ctx.hideSidebar ? (openBlock(), createElementBlock("div", _hoisted_5, [
242          renderSlot(_ctx.$slots, "sidebar-content", {}, void 0, true)
243        ])) : createCommentVNode("", true)
244      ])
245    ], 2),
246    createElementVNode("div", {
247      class: normalizeClass(["main-content", { "main-content-large": _ctx.hideSidebar }])
248    }, [
249      renderSlot(_ctx.$slots, "default", {}, void 0, true)
250    ], 2)
251  ]);
252}
253const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a83c37c9"]]);
254export {
255  Button,
256  Card,
257  Dropdown,
258  Sidebar
259};