https://vanillaos.org/src/components/BentoCardCarousel.vue

1import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/components/BentoCardCarousel.vue");import { defineComponent } from "/node_modules/.vite/deps/vue.js?v=29a8cdb8";
2const _sfc_main = defineComponent({
3  name: "BentoCard",
4  props: {
5    pages: {
6      type: Array,
7      required: true
8    }
9  },
10  data() {
11    return {
12      currentPage: 0,
13      interval: null
14    };
15  },
16  mounted() {
17    this.startAutoSwitch();
18  },
19  beforeUnmount() {
20    this.stopAutoSwitch();
21  },
22  methods: {
23    nextPage() {
24      this.currentPage = (this.currentPage + 1) % this.pages.length;
25    },
26    setCurrentPage(index) {
27      this.currentPage = index;
28      this.resetAutoSwitch();
29    },
30    startAutoSwitch() {
31      this.interval = setInterval(this.nextPage, 5e3);
32    },
33    stopAutoSwitch() {
34      clearInterval(this.interval);
35    },
36    resetAutoSwitch() {
37      this.stopAutoSwitch();
38      this.startAutoSwitch();
39    }
40  }
41});
42import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, vShow as _vShow, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives, normalizeClass as _normalizeClass } from "/node_modules/.vite/deps/vue.js?v=29a8cdb8";
43const _hoisted_1 = { class: "Bento-card Bento-card--carousel" };
44const _hoisted_2 = { class: "Bento-card-carousel" };
45const _hoisted_3 = { class: "Bento-card-carousel-pages" };
46const _hoisted_4 = { class: "Bento-card-carousel-page-title" };
47const _hoisted_5 = ["src"];
48const _hoisted_6 = ["src"];
49const _hoisted_7 = { class: "Bento-card-carousel-dots" };
50const _hoisted_8 = ["onClick"];
51function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
52  return _openBlock(), _createElementBlock("div", _hoisted_1, [
53    _createElementVNode("div", _hoisted_2, [
54      _createElementVNode("div", _hoisted_3, [
55        (_openBlock(true), _createElementBlock(
56          _Fragment,
57          null,
58          _renderList(_ctx.pages, (page, index) => {
59            return _withDirectives((_openBlock(), _createElementBlock(
60              "div",
61              {
62                class: "Bento-card-carousel-page",
63                key: page.logo,
64                style: _normalizeStyle({ backgroundColor: page.bgcolor })
65              },
66              [
67                _createElementVNode("div", _hoisted_4, [
68                  _createElementVNode(
69                    "h2",
70                    null,
71                    _toDisplayString(page.title),
72                    1
73                    /* TEXT */
74                  ),
75                  _createElementVNode("img", {
76                    src: page.logo
77                  }, null, 8, _hoisted_5)
78                ]),
79                _createElementVNode("img", {
80                  src: page.image,
81                  class: "Bento-card-carousel-page-image"
82                }, null, 8, _hoisted_6)
83              ],
84              4
85              /* STYLE */
86            )), [
87              [_vShow, index === _ctx.currentPage]
88            ]);
89          }),
90          128
91          /* KEYED_FRAGMENT */
92        ))
93      ]),
94      _createElementVNode("div", _hoisted_7, [
95        (_openBlock(true), _createElementBlock(
96          _Fragment,
97          null,
98          _renderList(_ctx.pages, (page, index) => {
99            return _openBlock(), _createElementBlock("span", {
100              class: _normalizeClass(["Bento-card-carousel-dot", { active: index === _ctx.currentPage }]),
101              key: index,
102              onClick: ($event) => _ctx.setCurrentPage(index)
103            }, null, 10, _hoisted_8);
104          }),
105          128
106          /* KEYED_FRAGMENT */
107        ))
108      ])
109    ])
110  ]);
111}
112_sfc_main.__hmrId = "ae56f7ca";
113typeof __VUE_HMR_RUNTIME__ !== "undefined" && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main);
114import.meta.hot.accept((mod) => {
115  if (!mod) return;
116  const { default: updated, _rerender_only } = mod;
117  if (_rerender_only) {
118    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render);
119  } else {
120    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated);
121  }
122});
123import _export_sfc from "/@id/__x00__plugin-vue:export-helper";

124export default /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/app/src/components/BentoCardCarousel.vue"]]);
125
126//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBdUJBLFNBQVMsdUJBQXVCO0FBU2hDLE1BQUssWUFBYSxnQkFBYTtBQUFBLEVBQzNCLE1BQU07QUFBQSxFQUNOLE9BQU87QUFBQSxJQUNILE9BQU87QUFBQSxNQUNILE1BQU07QUFBQSxNQUNOLFVBQVU7QUFBQSxJQUNkO0FBQUEsRUFDSjtBQUFBLEVBQ0EsT0FBTztBQUNILFdBQU87QUFBQSxNQUNILGFBQWE7QUFBQSxNQUNiLFVBQVU7QUFBQSxJQUNkO0FBQUEsRUFDSjtBQUFBLEVBQ0EsVUFBVTtBQUNOLFNBQUssZ0JBQWdCO0FBQUEsRUFDekI7QUFBQSxFQUNBLGdCQUFnQjtBQUNaLFNBQUssZUFBZTtBQUFBLEVBQ3hCO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDTCxXQUFXO0FBQ1AsV0FBSyxlQUFlLEtBQUssY0FBYyxLQUFLLEtBQUssTUFBTTtBQUFBLElBQzNEO0FBQUEsSUFDQSxlQUFlLE9BQWU7QUFDMUIsV0FBSyxjQUFjO0FBQ25CLFdBQUssZ0JBQWdCO0FBQUEsSUFDekI7QUFBQSxJQUNBLGtCQUFrQjtBQUVkLFdBQUssV0FBVyxZQUFZLEtBQUssVUFBVSxHQUFJO0FBQUEsSUFDbkQ7QUFBQSxJQUNBLGlCQUFpQjtBQUNiLG9CQUFjLEtBQUssUUFBUTtBQUFBLElBQy9CO0FBQUEsSUFDQSxrQkFBa0I7QUFDZCxXQUFLLGVBQWU7QUFDcEIsV0FBSyxnQkFBZ0I7QUFBQSxJQUN6QjtBQUFBLEVBQ0o7QUFDSixDQUFDOztxQkF2RVEsT0FBTSxrQ0FBaUM7cUJBQ25DLE9BQU0sc0JBQXFCO3FCQUN2QixPQUFNLDRCQUEyQjtxQkFHekIsT0FBTSxpQ0FBZ0M7bUJBTi9EO21CQUFBO3FCQWFpQixPQUFNLDJCQUEwQjttQkFiakQ7O3VCQUNJLG9CQWlCTSxPQWpCTixZQWlCTTtBQUFBLElBaEJGLG9CQWVNLE9BZk4sWUFlTTtBQUFBLE1BZEYsb0JBU00sT0FUTixZQVNNO0FBQUEsMkJBUkY7QUFBQSxVQU9NO0FBQUE7QUFBQSxVQVh0QixZQUk4RSxZQUo5RSxDQUk4RCxNQUFNLFVBQUs7a0RBQXpEO0FBQUEsY0FPTTtBQUFBO0FBQUEsZ0JBUEQsT0FBTTtBQUFBLGdCQUEyRCxLQUFLLEtBQUs7QUFBQSxnQkFDNUMsT0FMcEQsbUNBSzhFLEtBQUssUUFBTztBQUFBOztnQkFDdEUsb0JBR00sT0FITixZQUdNO0FBQUEsa0JBRkY7QUFBQSxvQkFBeUI7QUFBQTtBQUFBLHFDQUFsQixLQUFLLEtBQUs7QUFBQTtBQUFBO0FBQUE7QUFBQSxrQkFDakIsb0JBQXdCO0FBQUEsb0JBQWxCLEtBQUssS0FBSztBQUFBLDhCQVJ4QztBQUFBO2dCQVVvQixvQkFBZ0U7QUFBQSxrQkFBMUQsS0FBSyxLQUFLO0FBQUEsa0JBQU8sT0FBTTtBQUFBLDRCQVZqRDtBQUFBOzs7O3VCQUs0QixVQUFVLGdCQUFXO0FBQUE7Ozs7OztNQVFyQyxvQkFHTSxPQUhOLFlBR007QUFBQSwyQkFGRjtBQUFBLFVBQ3FGO0FBQUE7QUFBQSxVQWZyRyxZQWM4RSxZQWQ5RSxDQWM4RCxNQUFNLFVBQUs7aUNBQXpELG9CQUNxRjtBQUFBLGNBRC9FLE9BZHRCLGlCQWM0QiwyQkFBeUIsVUFDZixVQUFVLGlCQUFXO0FBQUEsY0FEMkIsS0FBSztBQUFBLGNBQzNCLFNBQUssWUFBRSxvQkFBZSxLQUFLO0FBQUEseUJBZjNGO0FBQUEiLCJuYW1lcyI6W10sImlnbm9yZUxpc3QiOltdLCJzb3VyY2VzIjpbIkJlbnRvQ2FyZENhcm91c2VsLnZ1ZSJdLCJzb3VyY2VzQ29udGVudCI6WyI8dGVtcGxhdGU+XG4gICAgPGRpdiBjbGFzcz1cIkJlbnRvLWNhcmQgQmVudG8tY2FyZC0tY2Fyb3VzZWxcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIkJlbnRvLWNhcmQtY2Fyb3VzZWxcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJCZW50by1jYXJkLWNhcm91c2VsLXBhZ2VzXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIkJlbnRvLWNhcmQtY2Fyb3VzZWwtcGFnZVwiIHYtZm9yPVwiKHBhZ2UsIGluZGV4KSBpbiBwYWdlc1wiIDprZXk9XCJwYWdlLmxvZ29cIlxuICAgICAgICAgICAgICAgICAgICB2LXNob3c9XCJpbmRleCA9PT0gY3VycmVudFBhZ2VcIiA6c3R5bGU9XCJ7IGJhY2tncm91bmRDb2xvcjogcGFnZS5iZ2NvbG9yIH1cIj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIkJlbnRvLWNhcmQtY2Fyb3VzZWwtcGFnZS10aXRsZVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPGgyPnt7IHBhZ2UudGl0bGUgfX08L2gyPlxuICAgICAgICAgICAgICAgICAgICAgICAgPGltZyA6c3JjPVwicGFnZS5sb2dvXCIgLz5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDxpbWcgOnNyYz1cInBhZ2UuaW1hZ2VcIiBjbGFzcz1cIkJlbnRvLWNhcmQtY2Fyb3VzZWwtcGFnZS1pbWFnZVwiIC8+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJCZW50by1jYXJkLWNhcm91c2VsLWRvdHNcIj5cbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIkJlbnRvLWNhcmQtY2Fyb3VzZWwtZG90XCIgdi1mb3I9XCIocGFnZSwgaW5kZXgpIGluIHBhZ2VzXCIgOmtleT1cImluZGV4XCJcbiAgICAgICAgICAgICAgICAgICAgOmNsYXNzPVwieyBhY3RpdmU6IGluZGV4ID09PSBjdXJyZW50UGFnZSB9XCIgQGNsaWNrPVwic2V0Q3VycmVudFBhZ2UoaW5kZXgpXCI+PC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuXG48c2NyaXB0IGxhbmc9XCJ0c1wiPlxuaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJztcblxuaW50ZXJmYWNlIFBhZ2Uge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgbG9nbzogc3RyaW5nO1xuICAgIGltYWdlOiBzdHJpbmc7XG4gICAgYmdjb2xvcjogc3RyaW5nO1xufVxuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoe1xuICAgIG5hbWU6ICdCZW50b0NhcmQnLFxuICAgIHByb3BzOiB7XG4gICAgICAgIHBhZ2VzOiB7XG4gICAgICAgICAgICB0eXBlOiBBcnJheSBhcyAoKSA9PiBQYWdlW10sXG4gICAgICAgICAgICByZXF1aXJlZDogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICB9LFxuICAgIGRhdGEoKSB7XG4gICAgICAgI

126HJldHVybiB7XG4gICAgICAgICAgICBjdXJyZW50UGFnZTogMCxcbiAgICAgICAgICAgIGludGVydmFsOiBudWxsIGFzIHVua25vd24gYXMgbnVtYmVyLFxuICAgICAgICB9O1xuICAgIH0sXG4gICAgbW91bnRlZCgpIHtcbiAgICAgICAgdGhpcy5zdGFydEF1dG9Td2l0Y2goKTtcbiAgICB9LFxuICAgIGJlZm9yZVVubW91bnQoKSB7XG4gICAgICAgIHRoaXMuc3RvcEF1dG9Td2l0Y2goKTtcbiAgICB9LFxuICAgIG1ldGhvZHM6IHtcbiAgICAgICAgbmV4dFBhZ2UoKSB7XG4gICAgICAgICAgICB0aGlzLmN1cnJlbnRQYWdlID0gKHRoaXMuY3VycmVudFBhZ2UgKyAxKSAlIHRoaXMucGFnZXMubGVuZ3RoO1xuICAgICAgICB9LFxuICAgICAgICBzZXRDdXJyZW50UGFnZShpbmRleDogbnVtYmVyKSB7XG4gICAgICAgICAgICB0aGlzLmN1cnJlbnRQYWdlID0gaW5kZXg7XG4gICAgICAgICAgICB0aGlzLnJlc2V0QXV0b1N3aXRjaCgpO1xuICAgICAgICB9LFxuICAgICAgICBzdGFydEF1dG9Td2l0Y2goKSB7XG4gICAgICAgICAgICAvLyBAdHMtaWdub3JlXG4gICAgICAgICAgICB0aGlzLmludGVydmFsID0gc2V0SW50ZXJ2YWwodGhpcy5uZXh0UGFnZSwgNTAwMCk7XG4gICAgICAgIH0sXG4gICAgICAgIHN0b3BBdXRvU3dpdGNoKCkge1xuICAgICAgICAgICAgY2xlYXJJbnRlcnZhbCh0aGlzLmludGVydmFsKTtcbiAgICAgICAgfSxcbiAgICAgICAgcmVzZXRBdXRvU3dpdGNoKCkge1xuICAgICAgICAgICAgdGhpcy5zdG9wQXV0b1N3aXRjaCgpO1xuICAgICAgICAgICAgdGhpcy5zdGFydEF1dG9Td2l0Y2goKTtcbiAgICAgICAgfSxcbiAgICB9LFxufSk7XG48L3NjcmlwdD4iXSwiZmlsZSI6Ii9hcHAvc3JjL2NvbXBvbmVudHMvQmVudG9DYXJkQ2Fyb3VzZWwudnVlIn0=