diff --git a/dist/library.cjs b/dist/library.cjs new file mode 100644 index 0000000..eab8df2 --- /dev/null +++ b/dist/library.cjs @@ -0,0 +1,571 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var vue = require('vue'); +var pinia = require('pinia'); + +var script$d = { + name: "Button", + + methods: { + click() { + this.$emit('click'); + } + } +}; + +const _hoisted_1$c = { + href: "#", + class: "truncate text-black dark:text-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 dark:text-white rounded-lg px-4 py-2" +}; + +function render$d(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("a", _hoisted_1$c, [ + vue.renderSlot(_ctx.$slots, "default") + ])) +} + +script$d.render = render$d; +script$d.__file = "src/components/Button.vue"; + +var script$c = { + name: "Card" +}; + +const _hoisted_1$b = { class: "bg-white text-black dark:bg-base-700 dark:text-white rounded shadow mb-8" }; + +function render$c(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [ + vue.renderSlot(_ctx.$slots, "default") + ])) +} + +script$c.render = render$c; +script$c.__file = "src/components/Card.vue"; + +var script$b = { + name: "CardBody" +}; + +const _hoisted_1$a = { class: "p-8 rounded-b" }; + +function render$b(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [ + vue.renderSlot(_ctx.$slots, "default") + ])) +} + +script$b.render = render$b; +script$b.__file = "src/components/CardBody.vue"; + +var script$a = { + name: "CardHeader" +}; + +const _hoisted_1$9 = { class: "py-4 px-8 border-b dark:border-base-800 rounded-t" }; +const _hoisted_2$4 = { class: "text-xl font-medium" }; + +function render$a(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [ + vue.createElementVNode("div", _hoisted_2$4, [ + vue.renderSlot(_ctx.$slots, "default") + ]) + ])) +} + +script$a.render = render$a; +script$a.__file = "src/components/CardHeader.vue"; + +var script$9 = { + name: "Container" +}; + +const _hoisted_1$8 = { class: "container mx-auto px-4 lg:px-16 py-8 space-y-8" }; + +function render$9(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [ + vue.renderSlot(_ctx.$slots, "default") + ])) +} + +script$9.render = render$9; +script$9.__file = "src/components/Container.vue"; + +var script$8 = { + name: "FirstLevelLink", + props: { + icon: { + type: String, + default: 'fa-arrow-up-right-from-square' + } + } +}; + +const _hoisted_1$7 = { + class: "hover:bg-primary-500 rounded-lg text-center text-xs py-4 flex flex-col space-y-2", + href: "#" +}; + +function render$8(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("a", _hoisted_1$7, [ + vue.createElementVNode("i", { + class: vue.normalizeClass(['fal text-xl', $props.icon]) + }, null, 2 /* CLASS */), + vue.createElementVNode("span", null, [ + vue.renderSlot(_ctx.$slots, "default") + ]) + ])) +} + +script$8.render = render$8; +script$8.__file = "src/components/FirstLevelLink.vue"; + +var script$7 = { + name: "FirstLevelMenu", + data() { + return { + primaryMenu: [ + {name: 'Home', icon: 'fal fa-home', to: '/', exact: true}, + {name: 'Buckets', icon: 'fal fa-bucket', to: '/buckets', exact: false}, + {name: 'Domains', icon: 'fal fa-globe', to: '/domains', exact: false}, + {name: 'Spaces', icon: 'fal fa-meteor', to: '/spaces', exact: false}, + {name: 'Zones', icon: 'fal fa-list-ul', to: '/zones', exact: false}, + ], + secondaryMenu: [ + {name: 'Logout', icon: 'fal fa-sign-out', to: '/logout'}, + ], + }; + }, + methods: { + toggleMenu() { + this.$refs.overlay.classList.toggle('hidden'); + this.$refs.sidebar.classList.toggle('-translate-x-full'); + }, + closeMenu() { + this.$refs.overlay.classList.add('hidden'); + this.$refs.sidebar.classList.add('-translate-x-full'); + }, + toggleDarkMode() { + document.body.classList.toggle('dark'); + } + }, +}; + +const _withScopeId = n => (vue.pushScopeId("data-v-42eb52e3"),n=n(),vue.popScopeId(),n); +const _hoisted_1$6 = { class: "bg-gray-100 dark:bg-base min-h-screen flex flex-col relative" }; +const _hoisted_2$3 = { + ref: "overlay", + class: "sm:hidden hidden bg-gray-800 opacity-50 w-full min-h-screen absolute z-10" +}; +const _hoisted_3$3 = { class: "bg-white relative shadow sm:hidden z-10" }; +const _hoisted_4$2 = { class: "container flex justify-between items-center py-4" }; +const _hoisted_5$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("img", { + src: "/img/icon-light.svg", + class: "h-4", + alt: "bitinflow" +}, null, -1 /* HOISTED */)); +const _hoisted_6$1 = { class: "flex items-center space-x-4" }; +const _hoisted_7$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("img", { + class: "h-8 w-8 rounded-full", + alt: "profile", + src: "/img/avatar.jpg" +}, null, -1 /* HOISTED */)); +const _hoisted_8$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("svg", { + xmlns: "http://www.w3.org/2000/svg", + class: "h-6 w-6", + fill: "none", + viewBox: "0 0 24 24", + stroke: "currentColor" +}, [ + /*#__PURE__*/vue.createElementVNode("path", { + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-width": "2", + d: "M4 6h16M4 12h16M4 18h16" + }) +], -1 /* HOISTED */)); +const _hoisted_9$1 = [ + _hoisted_8$1 +]; +const _hoisted_10 = { class: "flex flex-grow" }; +const _hoisted_11 = { + ref: "sidebar", + class: "flex h-screen flex-col w-36 bg-base-800 dark:border-r dark:border-base text-gray-100 shadow sm:relative absolute inset-y-0 transform -translate-x-full sm:translate-x-0 transition transition-transform z-20" +}; +const _hoisted_12 = { class: "flex-none bg-primary-500 h-16 sm:h-20 py-3 sm:py-6 text-white flex flex-initial justify-center" }; +const _hoisted_13 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("img", { + src: "/img/icon-light.svg", + class: "h-8 w-auto", + alt: "Logo" +}, null, -1 /* HOISTED */)); +const _hoisted_14 = [ + _hoisted_13 +]; +const _hoisted_15 = { class: "flex-auto flex flex-col overflow-y-auto py-6 space-y-6" }; +const _hoisted_16 = { class: "primary flex flex-grow flex-col space-y-4 px-6" }; +const _hoisted_17 = { class: "flex flex-initial flex-col space-y-4 px-6" }; +const _hoisted_18 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("div", { class: "flex-none" }, null, -1 /* HOISTED */)); +const _hoisted_19 = { class: "flex flex-1" }; + +function render$7(_ctx, _cache, $props, $setup, $data, $options) { + const _component_nuxt_link = vue.resolveComponent("nuxt-link"); + + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [ + vue.createCommentVNode(" Overlay "), + vue.createElementVNode("div", _hoisted_2$3, null, 512 /* NEED_PATCH */), + vue.createCommentVNode(" Header "), + vue.createElementVNode("header", _hoisted_3$3, [ + vue.createElementVNode("div", _hoisted_4$2, [ + _hoisted_5$1, + vue.createElementVNode("div", _hoisted_6$1, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.secondaryMenu, (link) => { + return (vue.openBlock(), vue.createBlock(_component_nuxt_link, { + key: link.name, + to: link.to + }, { + default: vue.withCtx(() => [ + vue.createElementVNode("i", { + class: vue.normalizeClass([link.icon, "icon"]) + }, null, 2 /* CLASS */), + vue.createTextVNode(" " + vue.toDisplayString(link.name), 1 /* TEXT */) + ]), + _: 2 /* DYNAMIC */ + }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to"])) + }), 128 /* KEYED_FRAGMENT */)), + vue.createVNode(_component_nuxt_link, { + class: "inline-block flex", + to: "/" + }, { + default: vue.withCtx(() => [ + _hoisted_7$1 + ]), + _: 1 /* STABLE */ + }), + vue.createElementVNode("button", { + onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggleMenu && $options.toggleMenu(...args))), + class: "focus-within:outline-none pl-4" + }, _hoisted_9$1) + ]) + ]) + ]), + vue.createCommentVNode(" Sidenav with Content "), + vue.createElementVNode("div", _hoisted_10, [ + vue.createCommentVNode(" Sidenav "), + vue.createElementVNode("nav", _hoisted_11, [ + vue.createCommentVNode(" logo "), + vue.createElementVNode("div", _hoisted_12, [ + vue.createElementVNode("button", { + onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleDarkMode && $options.toggleDarkMode(...args))) + }, _hoisted_14) + ]), + vue.createElementVNode("div", _hoisted_15, [ + vue.createCommentVNode(" nav "), + vue.createElementVNode("nav", _hoisted_16, [ + vue.renderSlot(_ctx.$slots, "top") + ]), + vue.createElementVNode("nav", _hoisted_17, [ + vue.renderSlot(_ctx.$slots, "bottom") + ]) + ]), + _hoisted_18 + ], 512 /* NEED_PATCH */), + vue.createCommentVNode(" Content "), + vue.createElementVNode("main", _hoisted_19, [ + vue.renderSlot(_ctx.$slots, "default") + ]) + ]) + ])) +} + +script$7.render = render$7; +script$7.__scopeId = "data-v-42eb52e3"; +script$7.__file = "src/components/FirstLevelMenu.vue"; + +var script$6 = { + name: "Flex" +}; + +const _hoisted_1$5 = { class: "flex-auto" }; + +function render$6(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [ + vue.renderSlot(_ctx.$slots, "default") + ])) +} + +script$6.render = render$6; +script$6.__file = "src/components/FlexAuto.vue"; + +var script$5 = { + name: "FloatingBanner" +}; + +const _hoisted_1$4 = { class: "fixed inset-x-0 bottom-0 pb-2 sm:pb-5 z-[100]" }; +const _hoisted_2$2 = /*#__PURE__*/vue.createStaticVNode("

We announced a new product!Big news! We're excited to announce a brand new product.

Learn more
", 1); +const _hoisted_3$2 = [ + _hoisted_2$2 +]; + +function render$5(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, _hoisted_3$2)) +} + +script$5.render = render$5; +script$5.__file = "src/components/FloatingBanner.vue"; + +var script$4 = { + name: "HeroCard" +}; + +const _hoisted_1$3 = { class: "bg-gradient-to-tr from-primary-600 to-primary-400 text-white rounded shadow p-8" }; + +function render$4(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [ + vue.renderSlot(_ctx.$slots, "default") + ])) +} + +script$4.render = render$4; +script$4.__file = "src/components/HeroCard.vue"; + +var script$3 = { + name: "ScreenScrollContainer" +}; + +const _hoisted_1$2 = { class: "overflow-y-auto h-screen" }; + +function render$3(_ctx, _cache, $props, $setup, $data, $options) { + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [ + vue.renderSlot(_ctx.$slots, "default") + ])) +} + +script$3.render = render$3; +script$3.__file = "src/components/ScreenScrollContainer.vue"; + +var script$2 = { + name: "SecondLevelLink", + components: {Button: script$d}, + props: { + icon: { + type: String, + default: 'fa-arrow-up-right-from-square' + } + } +}; + +function render$2(_ctx, _cache, $props, $setup, $data, $options) { + const _component_Button = vue.resolveComponent("Button"); + + return (vue.openBlock(), vue.createBlock(_component_Button, { class: "flex items-center gap-2" }, { + default: vue.withCtx(() => [ + vue.createElementVNode("i", { + class: vue.normalizeClass(['fal', $props.icon]) + }, null, 2 /* CLASS */), + vue.createTextVNode(), + vue.renderSlot(_ctx.$slots, "default") + ]), + _: 3 /* FORWARDED */ + })) +} + +script$2.render = render$2; +script$2.__file = "src/components/SecondLevelLink.vue"; + +var script$1 = { + name: "SecondLevelMenu", + components: {SecondLevelLink: script$2}, + props: { + items: { + type: Array, + default: [ + {name: 'Test', href: 'Test'} + ] + } + } +}; + +const _hoisted_1$1 = { class: "w-64 bg-white text-black shadow dark:bg-base-700 dark:text-white dark:border-base-900 dark:border-l flex flex-col overflow-y-auto h-screen absolute sm:relative transform -translate-x-full sm:translate-x-0 pt-10 pb-4 px-4 space-y-2" }; +const _hoisted_2$1 = { class: "font-semibold px-4" }; +const _hoisted_3$1 = { class: "flex flex-col gap-2 justify-between flex-1" }; +const _hoisted_4$1 = { class: "flex flex-col gap-2" }; + +function render$1(_ctx, _cache, $props, $setup, $data, $options) { + const _component_SecondLevelLink = vue.resolveComponent("SecondLevelLink"); + + return (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$1, [ + vue.createElementVNode("span", _hoisted_2$1, [ + vue.renderSlot(_ctx.$slots, "title") + ]), + vue.createElementVNode("div", _hoisted_3$1, [ + vue.createElementVNode("div", _hoisted_4$1, [ + vue.renderSlot(_ctx.$slots, "default") + ]), + vue.createElementVNode("div", null, [ + vue.createVNode(_component_SecondLevelLink, { + class: "bg-zinc-100 hover:bg-zinc-200 dark:bg-base-500 dark:hover:bg-base-600", + icon: "fa-plus" + }, { + default: vue.withCtx(() => [ + vue.createTextVNode(" Create Resource ") + ]), + _: 1 /* STABLE */ + }) + ]) + ]) + ])) +} + +script$1.render = render$1; +script$1.__scopeId = "data-v-05ca9b6f"; +script$1.__file = "src/components/SecondLevelMenu.vue"; + +const useMenuStore = pinia.defineStore('menu', { + state: () => { + return { + thirdLevelLinks: [] + } + }, + actions: { + updateThirdLevelLinks(links) { + this.thirdLevelLinks = links; + }, + }, +}); + +var script = { + name: "ThirdLevelMenu", + components: {Button: script$d}, + data() { + return { + link: '' + } + }, + computed: { + ...pinia.mapState(useMenuStore, ['thirdLevelLinks']) + }, + methods: { + onChange(event) { + this.link = event.target.value; + this.$router.push(event.target.value); + } + } +}; + +const _hoisted_1 = { class: "flex-1 dark:border-l dark:border-base shadow text-black dark:text-white" }; +const _hoisted_2 = { class: "bg-white border-b dark:bg-base-600 dark:border-base" }; +const _hoisted_3 = { class: "container mx-auto px-4 lg:px-16 py-10" }; +const _hoisted_4 = { class: "text-3xl font-semibold" }; +const _hoisted_5 = { class: "bg-white dark:bg-base-700 py-4" }; +const _hoisted_6 = { class: "container mx-auto px-4 lg:px-16" }; +const _hoisted_7 = { class: "hidden xl:block space-x-4" }; +const _hoisted_8 = { class: "flex flex-col xl:hidden" }; +const _hoisted_9 = ["to", "value"]; + +function render(_ctx, _cache, $props, $setup, $data, $options) { + const _component_Button = vue.resolveComponent("Button"); + + return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [ + vue.createElementVNode("div", _hoisted_2, [ + vue.createElementVNode("div", _hoisted_3, [ + vue.createElementVNode("div", _hoisted_4, [ + vue.renderSlot(_ctx.$slots, "title") + ]) + ]) + ]), + vue.createElementVNode("nav", _hoisted_5, [ + vue.createElementVNode("div", _hoisted_6, [ + vue.createElementVNode("div", _hoisted_7, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.thirdLevelLinks, (link) => { + return (vue.openBlock(), vue.createBlock(_component_Button, null, { + default: vue.withCtx(() => [ + vue.createElementVNode("i", { + class: vue.normalizeClass([link.icon, "icon"]) + }, null, 2 /* CLASS */), + vue.createTextVNode(" " + vue.toDisplayString(link.name), 1 /* TEXT */) + ]), + _: 2 /* DYNAMIC */ + }, 1024 /* DYNAMIC_SLOTS */)) + }), 256 /* UNKEYED_FRAGMENT */)) + ]), + vue.createElementVNode("div", _hoisted_8, [ + vue.withDirectives(vue.createElementVNode("select", { + onChange: _cache[0] || (_cache[0] = (...args) => ($options.onChange && $options.onChange(...args))), + "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.link) = $event)), + class: "bg-white" + }, [ + (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.thirdLevelLinks, (link) => { + return (vue.openBlock(), vue.createElementBlock("option", { + key: link.name, + to: link.to, + value: link.to + }, vue.toDisplayString(link.name), 9 /* TEXT, PROPS */, _hoisted_9)) + }), 128 /* KEYED_FRAGMENT */)) + ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [ + [vue.vModelSelect, $data.link] + ]) + ]) + ]) + ]) + ])) +} + +script.render = render; +script.__scopeId = "data-v-4c63018c"; +script.__file = "src/components/ThirdLevelMenu.vue"; + +var components = { + Button: script$d, + Card: script$c, + CardBody: script$b, + CardHeader: script$a, + Container: script$9, + FirstLevelLink: script$8, + FirstLevelMenu: script$7, + FlexAuto: script$6, + FloatingBanner: script$5, + HeroCard: script$4, + ScreenScrollContainer: script$3, + SecondLevelLink: script$2, + SecondLevelMenu: script$1, + ThirdLevelMenu: script, +}; + +const colors = { + primary: { + DEFAULT: '#00BFA5', + '50': '#A6FFF3', + '100': '#8CFFEF', + '200': '#59FFE8', + '300': '#26FFE1', + '400': '#00F2D1', + '500': '#00BFA5', + '600': '#00917D', + '700': '#006356', + '800': '#00352E', + '900': '#000706' + }, + base: { + DEFAULT: '#070709', + '500': '#3a3a3d', + '600': '#26262c', + '700': '#1f1f23', + '800': '#18181b', + '900': '#0e0e10' + }, +}; + +const plugin = { + install (Vue) { + for (const prop in components) { + if (components.hasOwnProperty(prop)) { + const component = components[prop]; + Vue.component(component.name, component); + } + } + } +}; + +exports.colors = colors; +exports.default = plugin; diff --git a/dist/library.mjs b/dist/library.mjs new file mode 100644 index 0000000..2152fd7 --- /dev/null +++ b/dist/library.mjs @@ -0,0 +1,566 @@ +import { openBlock, createElementBlock, renderSlot, createElementVNode, normalizeClass, resolveComponent, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, pushScopeId, popScopeId, createStaticVNode, withDirectives, vModelSelect } from 'vue'; +import { defineStore, mapState } from 'pinia'; + +var script$d = { + name: "Button", + + methods: { + click() { + this.$emit('click'); + } + } +}; + +const _hoisted_1$c = { + href: "#", + class: "truncate text-black dark:text-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 dark:text-white rounded-lg px-4 py-2" +}; + +function render$d(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("a", _hoisted_1$c, [ + renderSlot(_ctx.$slots, "default") + ])) +} + +script$d.render = render$d; +script$d.__file = "src/components/Button.vue"; + +var script$c = { + name: "Card" +}; + +const _hoisted_1$b = { class: "bg-white text-black dark:bg-base-700 dark:text-white rounded shadow mb-8" }; + +function render$c(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("div", _hoisted_1$b, [ + renderSlot(_ctx.$slots, "default") + ])) +} + +script$c.render = render$c; +script$c.__file = "src/components/Card.vue"; + +var script$b = { + name: "CardBody" +}; + +const _hoisted_1$a = { class: "p-8 rounded-b" }; + +function render$b(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("div", _hoisted_1$a, [ + renderSlot(_ctx.$slots, "default") + ])) +} + +script$b.render = render$b; +script$b.__file = "src/components/CardBody.vue"; + +var script$a = { + name: "CardHeader" +}; + +const _hoisted_1$9 = { class: "py-4 px-8 border-b dark:border-base-800 rounded-t" }; +const _hoisted_2$4 = { class: "text-xl font-medium" }; + +function render$a(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("div", _hoisted_1$9, [ + createElementVNode("div", _hoisted_2$4, [ + renderSlot(_ctx.$slots, "default") + ]) + ])) +} + +script$a.render = render$a; +script$a.__file = "src/components/CardHeader.vue"; + +var script$9 = { + name: "Container" +}; + +const _hoisted_1$8 = { class: "container mx-auto px-4 lg:px-16 py-8 space-y-8" }; + +function render$9(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("div", _hoisted_1$8, [ + renderSlot(_ctx.$slots, "default") + ])) +} + +script$9.render = render$9; +script$9.__file = "src/components/Container.vue"; + +var script$8 = { + name: "FirstLevelLink", + props: { + icon: { + type: String, + default: 'fa-arrow-up-right-from-square' + } + } +}; + +const _hoisted_1$7 = { + class: "hover:bg-primary-500 rounded-lg text-center text-xs py-4 flex flex-col space-y-2", + href: "#" +}; + +function render$8(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("a", _hoisted_1$7, [ + createElementVNode("i", { + class: normalizeClass(['fal text-xl', $props.icon]) + }, null, 2 /* CLASS */), + createElementVNode("span", null, [ + renderSlot(_ctx.$slots, "default") + ]) + ])) +} + +script$8.render = render$8; +script$8.__file = "src/components/FirstLevelLink.vue"; + +var script$7 = { + name: "FirstLevelMenu", + data() { + return { + primaryMenu: [ + {name: 'Home', icon: 'fal fa-home', to: '/', exact: true}, + {name: 'Buckets', icon: 'fal fa-bucket', to: '/buckets', exact: false}, + {name: 'Domains', icon: 'fal fa-globe', to: '/domains', exact: false}, + {name: 'Spaces', icon: 'fal fa-meteor', to: '/spaces', exact: false}, + {name: 'Zones', icon: 'fal fa-list-ul', to: '/zones', exact: false}, + ], + secondaryMenu: [ + {name: 'Logout', icon: 'fal fa-sign-out', to: '/logout'}, + ], + }; + }, + methods: { + toggleMenu() { + this.$refs.overlay.classList.toggle('hidden'); + this.$refs.sidebar.classList.toggle('-translate-x-full'); + }, + closeMenu() { + this.$refs.overlay.classList.add('hidden'); + this.$refs.sidebar.classList.add('-translate-x-full'); + }, + toggleDarkMode() { + document.body.classList.toggle('dark'); + } + }, +}; + +const _withScopeId = n => (pushScopeId("data-v-42eb52e3"),n=n(),popScopeId(),n); +const _hoisted_1$6 = { class: "bg-gray-100 dark:bg-base min-h-screen flex flex-col relative" }; +const _hoisted_2$3 = { + ref: "overlay", + class: "sm:hidden hidden bg-gray-800 opacity-50 w-full min-h-screen absolute z-10" +}; +const _hoisted_3$3 = { class: "bg-white relative shadow sm:hidden z-10" }; +const _hoisted_4$2 = { class: "container flex justify-between items-center py-4" }; +const _hoisted_5$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("img", { + src: "/img/icon-light.svg", + class: "h-4", + alt: "bitinflow" +}, null, -1 /* HOISTED */)); +const _hoisted_6$1 = { class: "flex items-center space-x-4" }; +const _hoisted_7$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("img", { + class: "h-8 w-8 rounded-full", + alt: "profile", + src: "/img/avatar.jpg" +}, null, -1 /* HOISTED */)); +const _hoisted_8$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("svg", { + xmlns: "http://www.w3.org/2000/svg", + class: "h-6 w-6", + fill: "none", + viewBox: "0 0 24 24", + stroke: "currentColor" +}, [ + /*#__PURE__*/createElementVNode("path", { + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-width": "2", + d: "M4 6h16M4 12h16M4 18h16" + }) +], -1 /* HOISTED */)); +const _hoisted_9$1 = [ + _hoisted_8$1 +]; +const _hoisted_10 = { class: "flex flex-grow" }; +const _hoisted_11 = { + ref: "sidebar", + class: "flex h-screen flex-col w-36 bg-base-800 dark:border-r dark:border-base text-gray-100 shadow sm:relative absolute inset-y-0 transform -translate-x-full sm:translate-x-0 transition transition-transform z-20" +}; +const _hoisted_12 = { class: "flex-none bg-primary-500 h-16 sm:h-20 py-3 sm:py-6 text-white flex flex-initial justify-center" }; +const _hoisted_13 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("img", { + src: "/img/icon-light.svg", + class: "h-8 w-auto", + alt: "Logo" +}, null, -1 /* HOISTED */)); +const _hoisted_14 = [ + _hoisted_13 +]; +const _hoisted_15 = { class: "flex-auto flex flex-col overflow-y-auto py-6 space-y-6" }; +const _hoisted_16 = { class: "primary flex flex-grow flex-col space-y-4 px-6" }; +const _hoisted_17 = { class: "flex flex-initial flex-col space-y-4 px-6" }; +const _hoisted_18 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("div", { class: "flex-none" }, null, -1 /* HOISTED */)); +const _hoisted_19 = { class: "flex flex-1" }; + +function render$7(_ctx, _cache, $props, $setup, $data, $options) { + const _component_nuxt_link = resolveComponent("nuxt-link"); + + return (openBlock(), createElementBlock("div", _hoisted_1$6, [ + createCommentVNode(" Overlay "), + createElementVNode("div", _hoisted_2$3, null, 512 /* NEED_PATCH */), + createCommentVNode(" Header "), + createElementVNode("header", _hoisted_3$3, [ + createElementVNode("div", _hoisted_4$2, [ + _hoisted_5$1, + createElementVNode("div", _hoisted_6$1, [ + (openBlock(true), createElementBlock(Fragment, null, renderList($data.secondaryMenu, (link) => { + return (openBlock(), createBlock(_component_nuxt_link, { + key: link.name, + to: link.to + }, { + default: withCtx(() => [ + createElementVNode("i", { + class: normalizeClass([link.icon, "icon"]) + }, null, 2 /* CLASS */), + createTextVNode(" " + toDisplayString(link.name), 1 /* TEXT */) + ]), + _: 2 /* DYNAMIC */ + }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to"])) + }), 128 /* KEYED_FRAGMENT */)), + createVNode(_component_nuxt_link, { + class: "inline-block flex", + to: "/" + }, { + default: withCtx(() => [ + _hoisted_7$1 + ]), + _: 1 /* STABLE */ + }), + createElementVNode("button", { + onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggleMenu && $options.toggleMenu(...args))), + class: "focus-within:outline-none pl-4" + }, _hoisted_9$1) + ]) + ]) + ]), + createCommentVNode(" Sidenav with Content "), + createElementVNode("div", _hoisted_10, [ + createCommentVNode(" Sidenav "), + createElementVNode("nav", _hoisted_11, [ + createCommentVNode(" logo "), + createElementVNode("div", _hoisted_12, [ + createElementVNode("button", { + onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleDarkMode && $options.toggleDarkMode(...args))) + }, _hoisted_14) + ]), + createElementVNode("div", _hoisted_15, [ + createCommentVNode(" nav "), + createElementVNode("nav", _hoisted_16, [ + renderSlot(_ctx.$slots, "top") + ]), + createElementVNode("nav", _hoisted_17, [ + renderSlot(_ctx.$slots, "bottom") + ]) + ]), + _hoisted_18 + ], 512 /* NEED_PATCH */), + createCommentVNode(" Content "), + createElementVNode("main", _hoisted_19, [ + renderSlot(_ctx.$slots, "default") + ]) + ]) + ])) +} + +script$7.render = render$7; +script$7.__scopeId = "data-v-42eb52e3"; +script$7.__file = "src/components/FirstLevelMenu.vue"; + +var script$6 = { + name: "Flex" +}; + +const _hoisted_1$5 = { class: "flex-auto" }; + +function render$6(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("div", _hoisted_1$5, [ + renderSlot(_ctx.$slots, "default") + ])) +} + +script$6.render = render$6; +script$6.__file = "src/components/FlexAuto.vue"; + +var script$5 = { + name: "FloatingBanner" +}; + +const _hoisted_1$4 = { class: "fixed inset-x-0 bottom-0 pb-2 sm:pb-5 z-[100]" }; +const _hoisted_2$2 = /*#__PURE__*/createStaticVNode("

We announced a new product!Big news! We're excited to announce a brand new product.

Learn more
", 1); +const _hoisted_3$2 = [ + _hoisted_2$2 +]; + +function render$5(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("div", _hoisted_1$4, _hoisted_3$2)) +} + +script$5.render = render$5; +script$5.__file = "src/components/FloatingBanner.vue"; + +var script$4 = { + name: "HeroCard" +}; + +const _hoisted_1$3 = { class: "bg-gradient-to-tr from-primary-600 to-primary-400 text-white rounded shadow p-8" }; + +function render$4(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("div", _hoisted_1$3, [ + renderSlot(_ctx.$slots, "default") + ])) +} + +script$4.render = render$4; +script$4.__file = "src/components/HeroCard.vue"; + +var script$3 = { + name: "ScreenScrollContainer" +}; + +const _hoisted_1$2 = { class: "overflow-y-auto h-screen" }; + +function render$3(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createElementBlock("div", _hoisted_1$2, [ + renderSlot(_ctx.$slots, "default") + ])) +} + +script$3.render = render$3; +script$3.__file = "src/components/ScreenScrollContainer.vue"; + +var script$2 = { + name: "SecondLevelLink", + components: {Button: script$d}, + props: { + icon: { + type: String, + default: 'fa-arrow-up-right-from-square' + } + } +}; + +function render$2(_ctx, _cache, $props, $setup, $data, $options) { + const _component_Button = resolveComponent("Button"); + + return (openBlock(), createBlock(_component_Button, { class: "flex items-center gap-2" }, { + default: withCtx(() => [ + createElementVNode("i", { + class: normalizeClass(['fal', $props.icon]) + }, null, 2 /* CLASS */), + createTextVNode(), + renderSlot(_ctx.$slots, "default") + ]), + _: 3 /* FORWARDED */ + })) +} + +script$2.render = render$2; +script$2.__file = "src/components/SecondLevelLink.vue"; + +var script$1 = { + name: "SecondLevelMenu", + components: {SecondLevelLink: script$2}, + props: { + items: { + type: Array, + default: [ + {name: 'Test', href: 'Test'} + ] + } + } +}; + +const _hoisted_1$1 = { class: "w-64 bg-white text-black shadow dark:bg-base-700 dark:text-white dark:border-base-900 dark:border-l flex flex-col overflow-y-auto h-screen absolute sm:relative transform -translate-x-full sm:translate-x-0 pt-10 pb-4 px-4 space-y-2" }; +const _hoisted_2$1 = { class: "font-semibold px-4" }; +const _hoisted_3$1 = { class: "flex flex-col gap-2 justify-between flex-1" }; +const _hoisted_4$1 = { class: "flex flex-col gap-2" }; + +function render$1(_ctx, _cache, $props, $setup, $data, $options) { + const _component_SecondLevelLink = resolveComponent("SecondLevelLink"); + + return (openBlock(), createElementBlock("nav", _hoisted_1$1, [ + createElementVNode("span", _hoisted_2$1, [ + renderSlot(_ctx.$slots, "title") + ]), + createElementVNode("div", _hoisted_3$1, [ + createElementVNode("div", _hoisted_4$1, [ + renderSlot(_ctx.$slots, "default") + ]), + createElementVNode("div", null, [ + createVNode(_component_SecondLevelLink, { + class: "bg-zinc-100 hover:bg-zinc-200 dark:bg-base-500 dark:hover:bg-base-600", + icon: "fa-plus" + }, { + default: withCtx(() => [ + createTextVNode(" Create Resource ") + ]), + _: 1 /* STABLE */ + }) + ]) + ]) + ])) +} + +script$1.render = render$1; +script$1.__scopeId = "data-v-05ca9b6f"; +script$1.__file = "src/components/SecondLevelMenu.vue"; + +const useMenuStore = defineStore('menu', { + state: () => { + return { + thirdLevelLinks: [] + } + }, + actions: { + updateThirdLevelLinks(links) { + this.thirdLevelLinks = links; + }, + }, +}); + +var script = { + name: "ThirdLevelMenu", + components: {Button: script$d}, + data() { + return { + link: '' + } + }, + computed: { + ...mapState(useMenuStore, ['thirdLevelLinks']) + }, + methods: { + onChange(event) { + this.link = event.target.value; + this.$router.push(event.target.value); + } + } +}; + +const _hoisted_1 = { class: "flex-1 dark:border-l dark:border-base shadow text-black dark:text-white" }; +const _hoisted_2 = { class: "bg-white border-b dark:bg-base-600 dark:border-base" }; +const _hoisted_3 = { class: "container mx-auto px-4 lg:px-16 py-10" }; +const _hoisted_4 = { class: "text-3xl font-semibold" }; +const _hoisted_5 = { class: "bg-white dark:bg-base-700 py-4" }; +const _hoisted_6 = { class: "container mx-auto px-4 lg:px-16" }; +const _hoisted_7 = { class: "hidden xl:block space-x-4" }; +const _hoisted_8 = { class: "flex flex-col xl:hidden" }; +const _hoisted_9 = ["to", "value"]; + +function render(_ctx, _cache, $props, $setup, $data, $options) { + const _component_Button = resolveComponent("Button"); + + return (openBlock(), createElementBlock("div", _hoisted_1, [ + createElementVNode("div", _hoisted_2, [ + createElementVNode("div", _hoisted_3, [ + createElementVNode("div", _hoisted_4, [ + renderSlot(_ctx.$slots, "title") + ]) + ]) + ]), + createElementVNode("nav", _hoisted_5, [ + createElementVNode("div", _hoisted_6, [ + createElementVNode("div", _hoisted_7, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.thirdLevelLinks, (link) => { + return (openBlock(), createBlock(_component_Button, null, { + default: withCtx(() => [ + createElementVNode("i", { + class: normalizeClass([link.icon, "icon"]) + }, null, 2 /* CLASS */), + createTextVNode(" " + toDisplayString(link.name), 1 /* TEXT */) + ]), + _: 2 /* DYNAMIC */ + }, 1024 /* DYNAMIC_SLOTS */)) + }), 256 /* UNKEYED_FRAGMENT */)) + ]), + createElementVNode("div", _hoisted_8, [ + withDirectives(createElementVNode("select", { + onChange: _cache[0] || (_cache[0] = (...args) => ($options.onChange && $options.onChange(...args))), + "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.link) = $event)), + class: "bg-white" + }, [ + (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.thirdLevelLinks, (link) => { + return (openBlock(), createElementBlock("option", { + key: link.name, + to: link.to, + value: link.to + }, toDisplayString(link.name), 9 /* TEXT, PROPS */, _hoisted_9)) + }), 128 /* KEYED_FRAGMENT */)) + ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [ + [vModelSelect, $data.link] + ]) + ]) + ]) + ]) + ])) +} + +script.render = render; +script.__scopeId = "data-v-4c63018c"; +script.__file = "src/components/ThirdLevelMenu.vue"; + +var components = { + Button: script$d, + Card: script$c, + CardBody: script$b, + CardHeader: script$a, + Container: script$9, + FirstLevelLink: script$8, + FirstLevelMenu: script$7, + FlexAuto: script$6, + FloatingBanner: script$5, + HeroCard: script$4, + ScreenScrollContainer: script$3, + SecondLevelLink: script$2, + SecondLevelMenu: script$1, + ThirdLevelMenu: script, +}; + +const colors = { + primary: { + DEFAULT: '#00BFA5', + '50': '#A6FFF3', + '100': '#8CFFEF', + '200': '#59FFE8', + '300': '#26FFE1', + '400': '#00F2D1', + '500': '#00BFA5', + '600': '#00917D', + '700': '#006356', + '800': '#00352E', + '900': '#000706' + }, + base: { + DEFAULT: '#070709', + '500': '#3a3a3d', + '600': '#26262c', + '700': '#1f1f23', + '800': '#18181b', + '900': '#0e0e10' + }, +}; + +const plugin = { + install (Vue) { + for (const prop in components) { + if (components.hasOwnProperty(prop)) { + const component = components[prop]; + Vue.component(component.name, component); + } + } + } +}; + +export { colors, plugin as default }; diff --git a/dist/library.mjs.css b/dist/library.mjs.css new file mode 100644 index 0000000..ab69d3a --- /dev/null +++ b/dist/library.mjs.css @@ -0,0 +1,23 @@ +.nuxt-link-active[data-v-42eb52e3] { + background: #00BFA5; +} + +.nuxt-link-active[data-v-42eb52e3]:hover { + background: #004F44; +} + +.nuxt-link-active[data-v-4c63018c] { + background: #f3f3f3; +} + +.dark .nuxt-link-active[data-v-4c63018c] { + background: #464649; +} + +.nuxt-link-active[data-v-05ca9b6f] { + background: #f3f3f3; +} + +.dark .nuxt-link-active[data-v-05ca9b6f] { + background: #464649; +} \ No newline at end of file diff --git a/package.json b/package.json index e8021c2..d119ce6 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,28 @@ { "name": "@bitinflow/ui", "version": "0.0.1", - "description": "Bitinflow UI Kit", + "description": "bitinflow UI Kit", + "main": "dist/library.cjs", + "module": "dist/library.mjs", + "type": "module", + "files": [ + "dist" + ], + "scripts": { + "build": "rollup -c" + }, "author": "René Preuß ", "license": "Apache-2.0", "dependencies": { - "pinia": "^2.0.23" + "@nuxt/kit": "^3.0.0-rc.12", + "pinia": ">=2.0.23", + "vue": "^3.2.41" + }, + "devDependencies": { + "rollup": "^3.2.3", + "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-scss": "^3.0.0", + "rollup-plugin-vue": "^6.0.0", + "sass": "^1.55.0" } } diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..c3b82ef --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,22 @@ +import vue from 'rollup-plugin-vue' +import peerDepsExternal from 'rollup-plugin-peer-deps-external' +import scss from "rollup-plugin-scss"; + +export default [ + { + input: 'src/index.js', + output: [ + { + format: 'esm', + file: 'dist/library.mjs' + }, + { + format: 'cjs', + file: 'dist/library.cjs' + } + ], + plugins: [ + vue(), peerDepsExternal(), scss() + ] + } +] \ No newline at end of file diff --git a/colors.js b/src/colors.js similarity index 84% rename from colors.js rename to src/colors.js index ffaf462..fbd5d49 100644 --- a/colors.js +++ b/src/colors.js @@ -1,4 +1,4 @@ -let colors = { +const colors = { primary: { DEFAULT: '#00BFA5', '50': '#A6FFF3', @@ -22,4 +22,4 @@ let colors = { }, }; -module.exports = (colors.__esModule ? colors : { default: colors }).default \ No newline at end of file +export default colors \ No newline at end of file diff --git a/src/components.js b/src/components.js new file mode 100644 index 0000000..53b4273 --- /dev/null +++ b/src/components.js @@ -0,0 +1,31 @@ +import Button from './components/Button.vue' +import Card from './components/Card.vue' +import CardBody from './components/CardBody.vue' +import CardHeader from './components/CardHeader.vue' +import Container from './components/Container.vue' +import FirstLevelLink from './components/FirstLevelLink.vue' +import FirstLevelMenu from './components/FirstLevelMenu.vue' +import FlexAuto from './components/FlexAuto.vue' +import FloatingBanner from './components/FloatingBanner.vue' +import HeroCard from './components/HeroCard.vue' +import ScreenScrollContainer from './components/ScreenScrollContainer.vue' +import SecondLevelLink from './components/SecondLevelLink.vue' +import SecondLevelMenu from './components/SecondLevelMenu.vue' +import ThirdLevelMenu from './components/ThirdLevelMenu.vue' + +export default { + Button, + Card, + CardBody, + CardHeader, + Container, + FirstLevelLink, + FirstLevelMenu, + FlexAuto, + FloatingBanner, + HeroCard, + ScreenScrollContainer, + SecondLevelLink, + SecondLevelMenu, + ThirdLevelMenu, +} \ No newline at end of file diff --git a/components/Button.vue b/src/components/Button.vue similarity index 100% rename from components/Button.vue rename to src/components/Button.vue diff --git a/components/Card.vue b/src/components/Card.vue similarity index 100% rename from components/Card.vue rename to src/components/Card.vue diff --git a/components/CardBody.vue b/src/components/CardBody.vue similarity index 100% rename from components/CardBody.vue rename to src/components/CardBody.vue diff --git a/components/CardHeader.vue b/src/components/CardHeader.vue similarity index 100% rename from components/CardHeader.vue rename to src/components/CardHeader.vue diff --git a/components/Container.vue b/src/components/Container.vue similarity index 100% rename from components/Container.vue rename to src/components/Container.vue diff --git a/components/FirstLevelLink.vue b/src/components/FirstLevelLink.vue similarity index 100% rename from components/FirstLevelLink.vue rename to src/components/FirstLevelLink.vue diff --git a/components/FirstLevelMenu.vue b/src/components/FirstLevelMenu.vue similarity index 100% rename from components/FirstLevelMenu.vue rename to src/components/FirstLevelMenu.vue diff --git a/components/FlexAuto.vue b/src/components/FlexAuto.vue similarity index 100% rename from components/FlexAuto.vue rename to src/components/FlexAuto.vue diff --git a/components/FloatingBanner.vue b/src/components/FloatingBanner.vue similarity index 100% rename from components/FloatingBanner.vue rename to src/components/FloatingBanner.vue diff --git a/components/HeroCard.vue b/src/components/HeroCard.vue similarity index 100% rename from components/HeroCard.vue rename to src/components/HeroCard.vue diff --git a/components/ScreenScrollContainer.vue b/src/components/ScreenScrollContainer.vue similarity index 100% rename from components/ScreenScrollContainer.vue rename to src/components/ScreenScrollContainer.vue diff --git a/components/SecondLevelLink.vue b/src/components/SecondLevelLink.vue similarity index 89% rename from components/SecondLevelLink.vue rename to src/components/SecondLevelLink.vue index b9f61bf..9deceb9 100644 --- a/components/SecondLevelLink.vue +++ b/src/components/SecondLevelLink.vue @@ -5,7 +5,8 @@