mirror of
https://github.com/bitinflow/ui-old.git
synced 2026-03-13 13:45:57 +00:00
Change structure
This commit is contained in:
René Preuß
119
README.md
119
README.md
@@ -57,67 +57,80 @@ This example skeleton provides the default ui experience for dashboards, featuri
|
||||
third-level menus.
|
||||
|
||||
```html
|
||||
|
||||
<template>
|
||||
<FloatingBanner></FloatingBanner>
|
||||
<FirstLevelMenu>
|
||||
<template v-slot:top>
|
||||
<FirstLevelLink icon="fa-home">Home</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-location-dot">Pull Zones</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-bucket">Buckets</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-meteor">Spaces</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-globe">Domains</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-list">Zones</FirstLevelLink>
|
||||
</template>
|
||||
<FloatingBanner></FloatingBanner>
|
||||
<FirstLevelMenu>
|
||||
<template v-slot:top>
|
||||
<FirstLevelLink icon="fa-home">Home</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-location-dot">Pull Zones</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-bucket">Buckets</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-meteor">Spaces</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-globe">Domains</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-list">Zones</FirstLevelLink>
|
||||
</template>
|
||||
|
||||
<template v-slot:bottom>
|
||||
<FirstLevelLink icon="fa-wallet">Billing</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-fingerprint">Account</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-arrow-right-from-bracket">Logout</FirstLevelLink>
|
||||
</template>
|
||||
<template v-slot:bottom>
|
||||
<FirstLevelLink icon="fa-wallet">Billing</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-fingerprint">Account</FirstLevelLink>
|
||||
<FirstLevelLink icon="fa-arrow-right-from-bracket">Logout</FirstLevelLink>
|
||||
</template>
|
||||
|
||||
<SecondLevelMenu>
|
||||
<template v-slot:title>Domains</template>
|
||||
<SecondLevelMenu>
|
||||
<template v-slot:title>Domains</template>
|
||||
|
||||
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
|
||||
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
|
||||
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
|
||||
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
|
||||
</SecondLevelMenu>
|
||||
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
|
||||
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
|
||||
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
|
||||
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
|
||||
</SecondLevelMenu>
|
||||
|
||||
<FlexAuto>
|
||||
<ScreenScrollContainer>
|
||||
<ThirdLevelMenu>
|
||||
<template v-slot:title>Test</template>
|
||||
</ThirdLevelMenu>
|
||||
<Container>
|
||||
<HeroCard>
|
||||
<div class="text-3xl">Yeet!</div>
|
||||
</HeroCard>
|
||||
<Card>
|
||||
<CardHeader>Test</CardHeader>
|
||||
<CardBody>Test</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>Test</CardHeader>
|
||||
<CardBody>Test</CardBody>
|
||||
</Card>
|
||||
</Container>
|
||||
</ScreenScrollContainer>
|
||||
</FlexAuto>
|
||||
</FirstLevelMenu>
|
||||
<FlexAuto>
|
||||
<ScreenScrollContainer>
|
||||
<ThirdLevelMenu>
|
||||
<template v-slot:title>Test</template>
|
||||
</ThirdLevelMenu>
|
||||
<Container>
|
||||
<HeroCard>
|
||||
<div class="text-3xl">Yeet!</div>
|
||||
</HeroCard>
|
||||
<Card>
|
||||
<CardHeader>Test</CardHeader>
|
||||
<CardBody>Test</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>Test</CardHeader>
|
||||
<CardBody>Test</CardBody>
|
||||
</Card>
|
||||
</Container>
|
||||
</ScreenScrollContainer>
|
||||
</FlexAuto>
|
||||
</FirstLevelMenu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from "@bitinflow/ui/components/Card";
|
||||
import CardHeader from "@bitinflow/ui/components/CardHeader";
|
||||
import CardBody from "@bitinflow/ui/components/CardBody";
|
||||
import SecondLevelMenu from "@bitinflow/ui/components/SecondLevelMenu";
|
||||
import FloatingBanner from "@bitinflow/ui/components/FloatingBanner";
|
||||
import FirstLevelMenu from "@bitinflow/ui/components/FirstLevelMenu";
|
||||
import ScreenScrollContainer from "@bitinflow/ui/components/ScreenScrollContainer";
|
||||
import components from "@bitinflow/ui/components";
|
||||
import {useMenu} from "@bitinflow/ui/composables";
|
||||
|
||||
export default {
|
||||
components: {FloatingBanner, ScreenScrollContainer, FirstLevelMenu, SecondLevelMenu, CardBody, CardHeader, Card},
|
||||
}
|
||||
export default {
|
||||
components,
|
||||
setup() {
|
||||
useMenu({
|
||||
thirdLevelLinks: [
|
||||
{
|
||||
name: 'Test',
|
||||
icon: 'fa-star',
|
||||
to: 'test'
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleDarkMode() {
|
||||
document.body.classList.toggle('dark')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -22,4 +22,4 @@ const colors = {
|
||||
},
|
||||
};
|
||||
|
||||
export default colors
|
||||
module.exports = (colors.__esModule ? colors : { default: colors }).default
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="container mx-auto px-4 lg:px-16">
|
||||
<div class="hidden xl:block space-x-4">
|
||||
<Button v-for="link in thirdLevelLinks">
|
||||
<i :class="link.icon" class="icon"></i> {{ link.name }}
|
||||
<i :class="['far', link.icon]" class="icon"></i> {{ link.name }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
<script>
|
||||
import {mapState} from "pinia";
|
||||
import {useMenuStore} from "../stores/menu";
|
||||
import {useMenuStore} from "../stores/menu.js";
|
||||
import Button from "./Button.vue";
|
||||
|
||||
export default {
|
||||
@@ -1,4 +1,4 @@
|
||||
import {useMenuStore} from "../stores/menu";
|
||||
import {useMenuStore} from "../stores/menu.js";
|
||||
|
||||
export const useMenu = (data) => {
|
||||
const menu = useMenuStore()
|
||||
571
dist/library.cjs
vendored
571
dist/library.cjs
vendored
@@ -1,571 +0,0 @@
|
||||
'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("<div class=\"mx-auto max-w-7xl px-2 sm:px-6 lg:px-8\"><div class=\"rounded-lg bg-primary-500 p-2 shadow-lg sm:p-3\"><div class=\"flex flex-wrap items-center justify-between\"><div class=\"flex w-0 flex-1 items-center\"><span class=\"flex rounded-lg bg-primary-800 p-2\"><!-- Heroicon name: outline/megaphone --><svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46\"></path></svg></span><p class=\"ml-3 truncate font-medium text-white\"><span class=\"md:hidden\">We announced a new product!</span><span class=\"hidden md:inline\">Big news! We're excited to announce a brand new product.</span></p></div><div class=\"order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto\"><a href=\"#\" class=\"flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-primary-500 shadow-sm hover:bg-zinc-200\">Learn more</a></div><div class=\"order-2 flex-shrink-0 sm:order-3 sm:ml-2\"><button type=\"button\" class=\"-mr-1 flex rounded-md p-2 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white\"><span class=\"sr-only\">Dismiss</span><!-- Heroicon name: outline/x-mark --><svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"></path></svg></button></div></div></div></div>", 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;
|
||||
566
dist/library.mjs
vendored
566
dist/library.mjs
vendored
@@ -1,566 +0,0 @@
|
||||
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("<div class=\"mx-auto max-w-7xl px-2 sm:px-6 lg:px-8\"><div class=\"rounded-lg bg-primary-500 p-2 shadow-lg sm:p-3\"><div class=\"flex flex-wrap items-center justify-between\"><div class=\"flex w-0 flex-1 items-center\"><span class=\"flex rounded-lg bg-primary-800 p-2\"><!-- Heroicon name: outline/megaphone --><svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46\"></path></svg></span><p class=\"ml-3 truncate font-medium text-white\"><span class=\"md:hidden\">We announced a new product!</span><span class=\"hidden md:inline\">Big news! We're excited to announce a brand new product.</span></p></div><div class=\"order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto\"><a href=\"#\" class=\"flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-primary-500 shadow-sm hover:bg-zinc-200\">Learn more</a></div><div class=\"order-2 flex-shrink-0 sm:order-3 sm:ml-2\"><button type=\"button\" class=\"-mr-1 flex rounded-md p-2 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white\"><span class=\"sr-only\">Dismiss</span><!-- Heroicon name: outline/x-mark --><svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"></path></svg></button></div></div></div></div>", 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 };
|
||||
23
dist/library.mjs.css
vendored
23
dist/library.mjs.css
vendored
@@ -1,23 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
16
package.json
16
package.json
@@ -2,27 +2,11 @@
|
||||
"name": "@bitinflow/ui",
|
||||
"version": "0.0.1",
|
||||
"description": "bitinflow UI Kit",
|
||||
"main": "dist/library.cjs",
|
||||
"module": "dist/library.mjs",
|
||||
"type": "module",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "rollup -c"
|
||||
},
|
||||
"author": "René Preuß <rene@bitinflow.com>",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
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()
|
||||
]
|
||||
}
|
||||
]
|
||||
17
src/index.js
17
src/index.js
@@ -1,17 +0,0 @@
|
||||
import components from './components'
|
||||
import colors from './colors.js'
|
||||
|
||||
const plugin = {
|
||||
install (Vue) {
|
||||
for (const prop in components) {
|
||||
if (components.hasOwnProperty(prop)) {
|
||||
const component = components[prop]
|
||||
Vue.component(component.name, component)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export {colors}
|
||||
|
||||
export default plugin
|
||||
Reference in New Issue
Block a user