@eslamdevui/ui 3.2.0-beta.2 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.nuxt/ui/auth-form.ts +20 -0
- package/.nuxt/ui/banner.ts +105 -0
- package/.nuxt/ui/blog-post.ts +140 -0
- package/.nuxt/ui/blog-posts.ts +14 -0
- package/.nuxt/ui/changelog-version.ts +41 -0
- package/.nuxt/ui/changelog-versions.ts +8 -0
- package/.nuxt/ui/chat-palette.ts +8 -0
- package/.nuxt/ui/content/content-navigation.ts +6 -4
- package/.nuxt/ui/content-navigation.ts +6 -4
- package/.nuxt/ui/footer-columns.ts +28 -0
- package/.nuxt/ui/footer.ts +11 -0
- package/.nuxt/ui/header.ts +30 -0
- package/.nuxt/ui/index.ts +32 -1
- package/.nuxt/ui/main.ts +3 -0
- package/.nuxt/ui/page-accordion.ts +7 -0
- package/.nuxt/ui/page-anchors.ts +30 -0
- package/.nuxt/ui/page-aside.ts +10 -0
- package/.nuxt/ui/page-body.ts +3 -0
- package/.nuxt/ui/page-card.ts +276 -0
- package/.nuxt/ui/page-columns.ts +3 -0
- package/.nuxt/ui/page-cta.ts +72 -0
- package/.nuxt/ui/page-feature.ts +31 -0
- package/.nuxt/ui/page-grid.ts +3 -0
- package/.nuxt/ui/page-header.ts +18 -0
- package/.nuxt/ui/page-hero.ts +46 -0
- package/.nuxt/ui/page-links.ts +25 -0
- package/.nuxt/ui/page-list.ts +8 -0
- package/.nuxt/ui/page-logos.ts +15 -0
- package/.nuxt/ui/page-marquee.ts +66 -0
- package/.nuxt/ui/page-section.ts +88 -0
- package/.nuxt/ui/page.ts +32 -0
- package/.nuxt/ui/pricing-plan.ts +101 -0
- package/.nuxt/ui/pricing-plans.ts +27 -0
- package/.nuxt/ui/pricing-table.ts +51 -0
- package/.nuxt/ui/user.ts +106 -0
- package/LICENSE.md +9 -9
- package/README.md +147 -147
- package/cli/commands/make/component.mjs +95 -95
- package/cli/commands/make/index.mjs +14 -14
- package/cli/commands/make/locale.mjs +64 -64
- package/cli/index.mjs +15 -15
- package/cli/package.json +13 -13
- package/cli/templates.mjs +236 -236
- package/cli/utils.mjs +31 -31
- package/dist/module.json +1 -1
- package/dist/module.mjs +2 -2
- package/dist/runtime/components/Accordion.vue +36 -36
- package/dist/runtime/components/Alert.vue +46 -46
- package/dist/runtime/components/App.vue +10 -10
- package/dist/runtime/components/AuthForm.vue +195 -0
- package/dist/runtime/components/AuthForm.vue.d.ts +85 -0
- package/dist/runtime/components/Avatar.vue +27 -27
- package/dist/runtime/components/AvatarGroup.vue +4 -4
- package/dist/runtime/components/Badge.vue +16 -16
- package/dist/runtime/components/Banner.vue +113 -0
- package/dist/runtime/components/Banner.vue.d.ts +68 -0
- package/dist/runtime/components/BlogPost.vue +141 -0
- package/dist/runtime/components/BlogPost.vue.d.ts +59 -0
- package/dist/runtime/components/BlogPosts.vue +33 -0
- package/dist/runtime/components/BlogPosts.vue.d.ts +30 -0
- package/dist/runtime/components/Breadcrumb.vue +32 -32
- package/dist/runtime/components/Button.vue +28 -28
- package/dist/runtime/components/ButtonGroup.vue +3 -3
- package/dist/runtime/components/Calendar.vue +74 -74
- package/dist/runtime/components/Card.vue +13 -13
- package/dist/runtime/components/Carousel.vue +58 -58
- package/dist/runtime/components/ChangelogVersion.vue +165 -0
- package/dist/runtime/components/ChangelogVersion.vue.d.ts +58 -0
- package/dist/runtime/components/ChangelogVersions.vue +54 -0
- package/dist/runtime/components/ChangelogVersions.vue.d.ts +74 -0
- package/dist/runtime/components/ChatMessage.vue +35 -35
- package/dist/runtime/components/ChatMessages.vue +55 -55
- package/dist/runtime/components/ChatPalette.vue +32 -0
- package/dist/runtime/components/ChatPalette.vue.d.ts +24 -0
- package/dist/runtime/components/ChatPrompt.vue +26 -26
- package/dist/runtime/components/ChatPrompt.vue.d.ts +1 -1
- package/dist/runtime/components/ChatPromptSubmit.vue +10 -10
- package/dist/runtime/components/Checkbox.vue +33 -33
- package/dist/runtime/components/CheckboxGroup.vue +32 -32
- package/dist/runtime/components/Chip.vue +11 -11
- package/dist/runtime/components/Collapsible.vue +9 -9
- package/dist/runtime/components/ColorPicker.vue +30 -30
- package/dist/runtime/components/CommandPalette.vue +117 -117
- package/dist/runtime/components/CommandPalette.vue.d.ts +3 -3
- package/dist/runtime/components/Container.vue +3 -3
- package/dist/runtime/components/ContextMenu.vue +22 -22
- package/dist/runtime/components/ContextMenuContent.vue +105 -105
- package/dist/runtime/components/DashboardGroup.vue +3 -3
- package/dist/runtime/components/DashboardNavbar.vue +40 -40
- package/dist/runtime/components/DashboardPanel.vue +27 -27
- package/dist/runtime/components/DashboardResizeHandle.vue +7 -7
- package/dist/runtime/components/DashboardSearch.vue +20 -20
- package/dist/runtime/components/DashboardSearchButton.vue +43 -43
- package/dist/runtime/components/DashboardSidebar.vue +74 -74
- package/dist/runtime/components/DashboardSidebarCollapse.vue +7 -7
- package/dist/runtime/components/DashboardSidebarToggle.vue +7 -7
- package/dist/runtime/components/DashboardSidebarToggle.vue.d.ts +1 -1
- package/dist/runtime/components/Drawer.vue +55 -55
- package/dist/runtime/components/DropdownMenu.vue +24 -24
- package/dist/runtime/components/DropdownMenuContent.vue +107 -107
- package/dist/runtime/components/Error.vue +22 -22
- package/dist/runtime/components/Error.vue.d.ts +1 -1
- package/dist/runtime/components/Footer.vue +44 -0
- package/dist/runtime/components/Footer.vue.d.ts +29 -0
- package/dist/runtime/components/FooterColumns.vue +68 -0
- package/dist/runtime/components/FooterColumns.vue.d.ts +52 -0
- package/dist/runtime/components/Form.vue +8 -8
- package/dist/runtime/components/FormField.vue +37 -37
- package/dist/runtime/components/Header.vue +137 -0
- package/dist/runtime/components/Header.vue.d.ts +72 -0
- package/dist/runtime/components/Icon.vue +1 -1
- package/dist/runtime/components/Input.vue +34 -34
- package/dist/runtime/components/InputMenu.vue +163 -163
- package/dist/runtime/components/InputMenu.vue.d.ts +3 -3
- package/dist/runtime/components/InputNumber.vue +49 -49
- package/dist/runtime/components/InputTags.vue +55 -55
- package/dist/runtime/components/Kbd.vue +5 -5
- package/dist/runtime/components/Link.vue +14 -14
- package/dist/runtime/components/LinkBase.vue +8 -8
- package/dist/runtime/components/Main.vue +23 -0
- package/dist/runtime/components/Main.vue.d.ts +20 -0
- package/dist/runtime/components/Modal.vue +69 -69
- package/dist/runtime/components/NavigationMenu.vue +166 -166
- package/dist/runtime/components/OverlayProvider.vue +9 -9
- package/dist/runtime/components/Page.vue +37 -0
- package/dist/runtime/components/Page.vue.d.ts +25 -0
- package/dist/runtime/components/PageAccordion.vue +26 -0
- package/dist/runtime/components/PageAccordion.vue.d.ts +21 -0
- package/dist/runtime/components/PageAnchors.vue +50 -0
- package/dist/runtime/components/PageAnchors.vue.d.ts +42 -0
- package/dist/runtime/components/PageAside.vue +36 -0
- package/dist/runtime/components/PageAside.vue.d.ts +27 -0
- package/dist/runtime/components/PageBody.vue +23 -0
- package/dist/runtime/components/PageBody.vue.d.ts +18 -0
- package/dist/runtime/components/PageCTA.vue +58 -0
- package/dist/runtime/components/PageCTA.vue.d.ts +49 -0
- package/dist/runtime/components/PageCard.vue +121 -0
- package/dist/runtime/components/PageCard.vue.d.ts +71 -0
- package/dist/runtime/components/PageColumns.vue +23 -0
- package/dist/runtime/components/PageColumns.vue.d.ts +18 -0
- package/dist/runtime/components/PageFeature.vue +71 -0
- package/dist/runtime/components/PageFeature.vue.d.ts +43 -0
- package/dist/runtime/components/PageGrid.vue +23 -0
- package/dist/runtime/components/PageGrid.vue.d.ts +18 -0
- package/dist/runtime/components/PageHeader.vue +58 -0
- package/dist/runtime/components/PageHeader.vue.d.ts +35 -0
- package/dist/runtime/components/PageHero.vue +67 -0
- package/dist/runtime/components/PageHero.vue.d.ts +49 -0
- package/dist/runtime/components/PageLinks.vue +55 -0
- package/dist/runtime/components/PageLinks.vue.d.ts +44 -0
- package/dist/runtime/components/PageList.vue +24 -0
- package/dist/runtime/components/PageList.vue.d.ts +21 -0
- package/dist/runtime/components/PageLogos.vue +64 -0
- package/dist/runtime/components/PageLogos.vue.d.ts +32 -0
- package/dist/runtime/components/PageMarquee.vue +40 -0
- package/dist/runtime/components/PageMarquee.vue.d.ts +30 -0
- package/dist/runtime/components/PageSection.vue +88 -0
- package/dist/runtime/components/PageSection.vue.d.ts +64 -0
- package/dist/runtime/components/Pagination.vue +47 -47
- package/dist/runtime/components/PinInput.vue +20 -20
- package/dist/runtime/components/Popover.vue +17 -17
- package/dist/runtime/components/PricingPlan.vue +129 -0
- package/dist/runtime/components/PricingPlan.vue.d.ts +109 -0
- package/dist/runtime/components/PricingPlans.vue +45 -0
- package/dist/runtime/components/PricingPlans.vue.d.ts +41 -0
- package/dist/runtime/components/PricingTable.vue +235 -0
- package/dist/runtime/components/PricingTable.vue.d.ts +98 -0
- package/dist/runtime/components/Progress.vue +19 -19
- package/dist/runtime/components/RadioGroup.vue +43 -43
- package/dist/runtime/components/Select.vue +96 -96
- package/dist/runtime/components/SelectMenu.vue +130 -130
- package/dist/runtime/components/SelectMenu.vue.d.ts +3 -3
- package/dist/runtime/components/Separator.vue +15 -15
- package/dist/runtime/components/Skeleton.vue +10 -10
- package/dist/runtime/components/Slideover.vue +76 -76
- package/dist/runtime/components/Slider.vue +27 -27
- package/dist/runtime/components/Stepper.vue +51 -51
- package/dist/runtime/components/Switch.vue +33 -33
- package/dist/runtime/components/Table.vue +77 -77
- package/dist/runtime/components/Tabs.vue +38 -37
- package/dist/runtime/components/Textarea.vue +33 -33
- package/dist/runtime/components/Timeline.vue +38 -38
- package/dist/runtime/components/Toast.vue +69 -69
- package/dist/runtime/components/Toaster.vue +28 -28
- package/dist/runtime/components/Tooltip.vue +19 -19
- package/dist/runtime/components/Tree.vue +60 -60
- package/dist/runtime/components/User.vue +69 -0
- package/dist/runtime/components/User.vue.d.ts +46 -0
- package/dist/runtime/components/color-mode/ColorModeAvatar.vue +2 -2
- package/dist/runtime/components/color-mode/ColorModeButton.vue +16 -16
- package/dist/runtime/components/color-mode/ColorModeImage.vue +2 -2
- package/dist/runtime/components/color-mode/ColorModeSelect.vue +19 -19
- package/dist/runtime/components/color-mode/ColorModeSwitch.vue +19 -19
- package/dist/runtime/components/content/ContentNavigation.vue +109 -109
- package/dist/runtime/components/content/ContentSearch.vue +25 -25
- package/dist/runtime/components/content/ContentSearchButton.vue +38 -38
- package/dist/runtime/components/content/ContentSearchButton.vue.d.ts +58 -12
- package/dist/runtime/components/content/ContentSurround.vue +31 -31
- package/dist/runtime/components/content/ContentSurround.vue.d.ts +52 -59
- package/dist/runtime/components/content/ContentToc.vue +88 -76
- package/dist/runtime/components/content/ContentToc.vue.d.ts +86 -88
- package/dist/runtime/components/locale/LocaleSelect.vue +20 -20
- package/dist/runtime/components/prose/A.vue +3 -3
- package/dist/runtime/components/prose/Accordion.vue +5 -5
- package/dist/runtime/components/prose/AccordionItem.vue +5 -5
- package/dist/runtime/components/prose/Badge.vue +3 -3
- package/dist/runtime/components/prose/Blockquote.vue +3 -3
- package/dist/runtime/components/prose/Callout.vue +27 -27
- package/dist/runtime/components/prose/Card.vue +43 -43
- package/dist/runtime/components/prose/CardGroup.vue +3 -3
- package/dist/runtime/components/prose/Code.vue +3 -3
- package/dist/runtime/components/prose/CodeCollapse.vue +16 -16
- package/dist/runtime/components/prose/CodeGroup.vue +15 -15
- package/dist/runtime/components/prose/CodeIcon.vue +1 -1
- package/dist/runtime/components/prose/CodePreview.vue +9 -9
- package/dist/runtime/components/prose/CodeTree.vue +61 -61
- package/dist/runtime/components/prose/Collapsible.vue +15 -15
- package/dist/runtime/components/prose/Em.vue +1 -1
- package/dist/runtime/components/prose/Field.vue +23 -23
- package/dist/runtime/components/prose/FieldGroup.vue +3 -3
- package/dist/runtime/components/prose/H1.vue +6 -6
- package/dist/runtime/components/prose/H2.vue +10 -10
- package/dist/runtime/components/prose/H3.vue +10 -10
- package/dist/runtime/components/prose/H4.vue +6 -6
- package/dist/runtime/components/prose/Hr.vue +1 -1
- package/dist/runtime/components/prose/Icon.vue +1 -1
- package/dist/runtime/components/prose/Img.vue +8 -8
- package/dist/runtime/components/prose/Kbd.vue +1 -1
- package/dist/runtime/components/prose/Li.vue +3 -3
- package/dist/runtime/components/prose/Ol.vue +3 -3
- package/dist/runtime/components/prose/P.vue +3 -3
- package/dist/runtime/components/prose/Pre.vue +20 -20
- package/dist/runtime/components/prose/Script.vue +3 -3
- package/dist/runtime/components/prose/Steps.vue +3 -3
- package/dist/runtime/components/prose/Strong.vue +3 -3
- package/dist/runtime/components/prose/Table.vue +5 -5
- package/dist/runtime/components/prose/Tabs.vue +14 -14
- package/dist/runtime/components/prose/TabsItem.vue +5 -5
- package/dist/runtime/components/prose/Tbody.vue +3 -3
- package/dist/runtime/components/prose/Td.vue +3 -3
- package/dist/runtime/components/prose/Th.vue +3 -3
- package/dist/runtime/components/prose/Thead.vue +3 -3
- package/dist/runtime/components/prose/Tr.vue +3 -3
- package/dist/runtime/components/prose/Ul.vue +3 -3
- package/dist/runtime/components/prose/callout/Caution.vue +3 -3
- package/dist/runtime/components/prose/callout/Note.vue +3 -3
- package/dist/runtime/components/prose/callout/Tip.vue +3 -3
- package/dist/runtime/components/prose/callout/Warning.vue +3 -3
- package/dist/runtime/inertia/components/Link.vue +12 -12
- package/dist/runtime/inertia/components/LinkBase.vue +15 -15
- package/dist/runtime/types/app.config.d.ts +6 -6
- package/dist/runtime/types/index.d.ts +33 -0
- package/dist/runtime/types/index.js +33 -0
- package/dist/runtime/vue/components/Icon.vue +1 -1
- package/dist/runtime/vue/components/Link.vue +31 -31
- package/dist/runtime/vue/components/color-mode/ColorModeButton.vue +7 -7
- package/dist/runtime/vue/components/color-mode/ColorModeSelect.vue +7 -7
- package/dist/runtime/vue/components/color-mode/ColorModeSwitch.vue +7 -7
- package/dist/shared/{ui.DQZ75GCP.mjs → ui.DErCA3YU.mjs} +1247 -50
- package/dist/unplugin.mjs +1 -1
- package/dist/vite.mjs +1 -1
- package/package.json +1 -1
- package/vue-plugin.d.ts +5 -5
- package/.nuxt/ui/prose.ts +0 -321
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import theme from '#build/ui/page-aside';
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
3
|
+
import type { ComponentConfig } from '../types';
|
|
4
|
+
type PageAside = ComponentConfig<typeof theme, AppConfig, 'pageAside'>;
|
|
5
|
+
export interface PageAsideProps {
|
|
6
|
+
/**
|
|
7
|
+
* The element or component this component should render as.
|
|
8
|
+
* @defaultValue 'aside'
|
|
9
|
+
*/
|
|
10
|
+
as?: any;
|
|
11
|
+
class?: any;
|
|
12
|
+
ui?: PageAside['slots'];
|
|
13
|
+
}
|
|
14
|
+
export interface PageAsideSlots {
|
|
15
|
+
top(props?: {}): any;
|
|
16
|
+
default(props?: {}): any;
|
|
17
|
+
bottom(props?: {}): any;
|
|
18
|
+
}
|
|
19
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageAsideProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageAsideProps> & Readonly<{}>, {
|
|
20
|
+
as: any;
|
|
21
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageAsideSlots>;
|
|
22
|
+
export default _default;
|
|
23
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
24
|
+
new (): {
|
|
25
|
+
$slots: S;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/page-body";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useAppConfig } from "#imports";
|
|
9
|
+
import { tv } from "../utils/tv";
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
as: { type: null, required: false },
|
|
12
|
+
class: { type: null, required: false }
|
|
13
|
+
});
|
|
14
|
+
defineSlots();
|
|
15
|
+
const appConfig = useAppConfig();
|
|
16
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageBody || {} }));
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<template>
|
|
20
|
+
<Primitive :as="as" :class="ui({ class: props.class })">
|
|
21
|
+
<slot />
|
|
22
|
+
</Primitive>
|
|
23
|
+
</template>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface PageBodyProps {
|
|
2
|
+
/**
|
|
3
|
+
* The element or component this component should render as.
|
|
4
|
+
* @defaultValue 'div'
|
|
5
|
+
*/
|
|
6
|
+
as?: any;
|
|
7
|
+
class?: any;
|
|
8
|
+
}
|
|
9
|
+
export interface PageBodySlots {
|
|
10
|
+
default(props?: {}): any;
|
|
11
|
+
}
|
|
12
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageBodyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageBodySlots>;
|
|
13
|
+
export default _default;
|
|
14
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
15
|
+
new (): {
|
|
16
|
+
$slots: S;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/page-cta";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useAppConfig } from "#imports";
|
|
9
|
+
import { tv } from "../utils/tv";
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
as: { type: null, required: false },
|
|
12
|
+
class: { type: null, required: false },
|
|
13
|
+
title: { type: String, required: false },
|
|
14
|
+
description: { type: String, required: false },
|
|
15
|
+
orientation: { type: null, required: false, default: "vertical" },
|
|
16
|
+
reverse: { type: Boolean, required: false },
|
|
17
|
+
variant: { type: null, required: false },
|
|
18
|
+
links: { type: Array, required: false },
|
|
19
|
+
ui: { type: null, required: false }
|
|
20
|
+
});
|
|
21
|
+
const slots = defineSlots();
|
|
22
|
+
const appConfig = useAppConfig();
|
|
23
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageCTA || {} })({
|
|
24
|
+
variant: props.variant,
|
|
25
|
+
orientation: props.orientation,
|
|
26
|
+
reverse: props.reverse,
|
|
27
|
+
title: !!props.title || !!slots.title
|
|
28
|
+
}));
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<template>
|
|
32
|
+
<Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
|
33
|
+
<UContainer :class="ui.container({ class: props.ui?.container })">
|
|
34
|
+
<div :class="ui.wrapper({ class: props.ui?.wrapper })">
|
|
35
|
+
<h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
|
|
36
|
+
<slot name="title">
|
|
37
|
+
{{ title }}
|
|
38
|
+
</slot>
|
|
39
|
+
</h2>
|
|
40
|
+
|
|
41
|
+
<div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
|
|
42
|
+
<slot name="description">
|
|
43
|
+
{{ description }}
|
|
44
|
+
</slot>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
|
|
48
|
+
<slot name="links">
|
|
49
|
+
<UButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
|
|
50
|
+
</slot>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<slot v-if="!!slots.default" />
|
|
55
|
+
<div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
|
|
56
|
+
</UContainer>
|
|
57
|
+
</Primitive>
|
|
58
|
+
</template>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import theme from '#build/ui/page-cta';
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
3
|
+
import type { ButtonProps, ComponentConfig } from '../types';
|
|
4
|
+
type PageCTA = ComponentConfig<typeof theme, AppConfig, 'pageCTA'>;
|
|
5
|
+
export interface PageCTAProps {
|
|
6
|
+
/**
|
|
7
|
+
* The element or component this component should render as.
|
|
8
|
+
* @defaultValue 'div'
|
|
9
|
+
*/
|
|
10
|
+
as?: any;
|
|
11
|
+
class?: any;
|
|
12
|
+
title?: string;
|
|
13
|
+
description?: string;
|
|
14
|
+
/**
|
|
15
|
+
* The orientation of the page cta.
|
|
16
|
+
* @defaultValue 'vertical'
|
|
17
|
+
*/
|
|
18
|
+
orientation?: PageCTA['variants']['orientation'];
|
|
19
|
+
/**
|
|
20
|
+
* Reverse the order of the default slot.
|
|
21
|
+
* @defaultValue false
|
|
22
|
+
*/
|
|
23
|
+
reverse?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* @defaultValue 'outline'
|
|
26
|
+
*/
|
|
27
|
+
variant?: PageCTA['variants']['variant'];
|
|
28
|
+
/**
|
|
29
|
+
* Display a list of Button under the description.
|
|
30
|
+
* `{ size: 'lg' }`{lang="ts-type"}
|
|
31
|
+
*/
|
|
32
|
+
links?: ButtonProps[];
|
|
33
|
+
ui?: PageCTA['slots'];
|
|
34
|
+
}
|
|
35
|
+
export interface PageCTASlots {
|
|
36
|
+
default(props?: {}): any;
|
|
37
|
+
title(props?: {}): any;
|
|
38
|
+
description(props?: {}): any;
|
|
39
|
+
links(props?: {}): any;
|
|
40
|
+
}
|
|
41
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageCTAProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageCTAProps> & Readonly<{}>, {
|
|
42
|
+
orientation: PageCTA["variants"]["orientation"];
|
|
43
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageCTASlots>;
|
|
44
|
+
export default _default;
|
|
45
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
46
|
+
new (): {
|
|
47
|
+
$slots: S;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/page-card";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed, ref, watch } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useMouseInElement, pausableFilter } from "@vueuse/core";
|
|
9
|
+
import { useAppConfig } from "#imports";
|
|
10
|
+
import { getSlotChildrenText } from "../utils";
|
|
11
|
+
import { tv } from "../utils/tv";
|
|
12
|
+
defineOptions({ inheritAttrs: false });
|
|
13
|
+
const props = defineProps({
|
|
14
|
+
as: { type: null, required: false },
|
|
15
|
+
icon: { type: String, required: false },
|
|
16
|
+
title: { type: String, required: false },
|
|
17
|
+
description: { type: String, required: false },
|
|
18
|
+
orientation: { type: null, required: false, default: "vertical" },
|
|
19
|
+
reverse: { type: Boolean, required: false },
|
|
20
|
+
highlight: { type: Boolean, required: false },
|
|
21
|
+
highlightColor: { type: null, required: false },
|
|
22
|
+
spotlight: { type: Boolean, required: false },
|
|
23
|
+
spotlightColor: { type: null, required: false },
|
|
24
|
+
variant: { type: null, required: false },
|
|
25
|
+
to: { type: null, required: false },
|
|
26
|
+
target: { type: [String, Object, null], required: false },
|
|
27
|
+
onClick: { type: Function, required: false },
|
|
28
|
+
class: { type: null, required: false },
|
|
29
|
+
ui: { type: null, required: false }
|
|
30
|
+
});
|
|
31
|
+
const slots = defineSlots();
|
|
32
|
+
const cardRef = ref();
|
|
33
|
+
const motionControl = pausableFilter();
|
|
34
|
+
const appConfig = useAppConfig();
|
|
35
|
+
const { elementX, elementY } = useMouseInElement(cardRef, {
|
|
36
|
+
eventFilter: motionControl.eventFilter
|
|
37
|
+
});
|
|
38
|
+
const spotlight = computed(() => props.spotlight && (elementX.value !== 0 || elementY.value !== 0));
|
|
39
|
+
watch(() => props.spotlight, (value) => {
|
|
40
|
+
if (value) {
|
|
41
|
+
motionControl.resume();
|
|
42
|
+
} else {
|
|
43
|
+
motionControl.pause();
|
|
44
|
+
}
|
|
45
|
+
}, { immediate: true });
|
|
46
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageCard || {} })({
|
|
47
|
+
orientation: props.orientation,
|
|
48
|
+
reverse: props.reverse,
|
|
49
|
+
variant: props.variant,
|
|
50
|
+
to: !!props.to || !!props.onClick,
|
|
51
|
+
title: !!props.title || !!slots.title,
|
|
52
|
+
highlight: props.highlight,
|
|
53
|
+
highlightColor: props.highlightColor,
|
|
54
|
+
spotlight: spotlight.value,
|
|
55
|
+
spotlightColor: props.spotlightColor
|
|
56
|
+
}));
|
|
57
|
+
const ariaLabel = computed(() => {
|
|
58
|
+
const slotText = slots.title && getSlotChildrenText(slots.title());
|
|
59
|
+
return (slotText || props.title || "Card link").trim();
|
|
60
|
+
});
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
<template>
|
|
64
|
+
<Primitive
|
|
65
|
+
ref="cardRef"
|
|
66
|
+
:as="as"
|
|
67
|
+
:data-orientation="orientation"
|
|
68
|
+
:class="ui.root({ class: [props.ui?.root, props.class] })"
|
|
69
|
+
:style="spotlight && { '--spotlight-x': `${elementX}px`, '--spotlight-y': `${elementY}px` }"
|
|
70
|
+
@click="onClick"
|
|
71
|
+
>
|
|
72
|
+
<div v-if="props.spotlight" :class="ui.spotlight({ class: props.ui?.spotlight })" />
|
|
73
|
+
|
|
74
|
+
<div :class="ui.container({ class: props.ui?.container })">
|
|
75
|
+
<div v-if="!!slots.header || !!slots.body || (icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" :class="ui.wrapper({ class: props.ui?.wrapper })">
|
|
76
|
+
<div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
|
|
77
|
+
<slot name="header" />
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
|
|
81
|
+
<slot name="leading">
|
|
82
|
+
<UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
|
|
83
|
+
</slot>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" :class="ui.body({ class: props.ui?.body })">
|
|
87
|
+
<slot name="body">
|
|
88
|
+
<div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
|
|
89
|
+
<slot name="title">
|
|
90
|
+
{{ title }}
|
|
91
|
+
</slot>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
|
|
95
|
+
<slot name="description">
|
|
96
|
+
{{ description }}
|
|
97
|
+
</slot>
|
|
98
|
+
</div>
|
|
99
|
+
</slot>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
|
|
103
|
+
<slot name="footer" />
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<slot />
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<ULink
|
|
111
|
+
v-if="to"
|
|
112
|
+
:aria-label="ariaLabel"
|
|
113
|
+
v-bind="{ to, target, ...$attrs }"
|
|
114
|
+
class="focus:outline-none peer"
|
|
115
|
+
tabindex="-1"
|
|
116
|
+
raw
|
|
117
|
+
>
|
|
118
|
+
<span class="absolute inset-0" aria-hidden="true" />
|
|
119
|
+
</ULink>
|
|
120
|
+
</Primitive>
|
|
121
|
+
</template>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import theme from '#build/ui/page-card';
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
3
|
+
import type { LinkProps, ComponentConfig } from '../types';
|
|
4
|
+
type PageCard = ComponentConfig<typeof theme, AppConfig, 'pageCard'>;
|
|
5
|
+
export interface PageCardProps {
|
|
6
|
+
/**
|
|
7
|
+
* The element or component this component should render as.
|
|
8
|
+
* @defaultValue 'div'
|
|
9
|
+
*/
|
|
10
|
+
as?: any;
|
|
11
|
+
/**
|
|
12
|
+
* The icon displayed above the title.
|
|
13
|
+
* @IconifyIcon
|
|
14
|
+
*/
|
|
15
|
+
icon?: string;
|
|
16
|
+
title?: string;
|
|
17
|
+
description?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The orientation of the page card.
|
|
20
|
+
* @defaultValue 'vertical'
|
|
21
|
+
*/
|
|
22
|
+
orientation?: PageCard['variants']['orientation'];
|
|
23
|
+
/**
|
|
24
|
+
* Reverse the order of the default slot.
|
|
25
|
+
* @defaultValue false
|
|
26
|
+
*/
|
|
27
|
+
reverse?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Display a line around the page card.
|
|
30
|
+
*/
|
|
31
|
+
highlight?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* @defaultValue 'primary'
|
|
34
|
+
*/
|
|
35
|
+
highlightColor?: PageCard['variants']['highlightColor'];
|
|
36
|
+
/**
|
|
37
|
+
* Display a spotlight effect that follows your mouse cursor and highlights borders on hover.
|
|
38
|
+
*/
|
|
39
|
+
spotlight?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* @defaultValue 'primary'
|
|
42
|
+
*/
|
|
43
|
+
spotlightColor?: PageCard['variants']['spotlightColor'];
|
|
44
|
+
/**
|
|
45
|
+
* @defaultValue 'outline'
|
|
46
|
+
*/
|
|
47
|
+
variant?: PageCard['variants']['variant'];
|
|
48
|
+
to?: LinkProps['to'];
|
|
49
|
+
target?: LinkProps['target'];
|
|
50
|
+
onClick?: (event: MouseEvent) => void | Promise<void>;
|
|
51
|
+
class?: any;
|
|
52
|
+
ui?: PageCard['slots'];
|
|
53
|
+
}
|
|
54
|
+
export interface PageCardSlots {
|
|
55
|
+
header(props?: {}): any;
|
|
56
|
+
body(props?: {}): any;
|
|
57
|
+
leading(props?: {}): any;
|
|
58
|
+
title(props?: {}): any;
|
|
59
|
+
description(props?: {}): any;
|
|
60
|
+
footer(props?: {}): any;
|
|
61
|
+
default(props?: {}): any;
|
|
62
|
+
}
|
|
63
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageCardProps> & Readonly<{}>, {
|
|
64
|
+
orientation: PageCard["variants"]["orientation"];
|
|
65
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageCardSlots>;
|
|
66
|
+
export default _default;
|
|
67
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
68
|
+
new (): {
|
|
69
|
+
$slots: S;
|
|
70
|
+
};
|
|
71
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/page-columns";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useAppConfig } from "#imports";
|
|
9
|
+
import { tv } from "../utils/tv";
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
as: { type: null, required: false },
|
|
12
|
+
class: { type: null, required: false }
|
|
13
|
+
});
|
|
14
|
+
defineSlots();
|
|
15
|
+
const appConfig = useAppConfig();
|
|
16
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageColumns || {} }));
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<template>
|
|
20
|
+
<Primitive :as="as" :class="ui({ class: props.class })">
|
|
21
|
+
<slot />
|
|
22
|
+
</Primitive>
|
|
23
|
+
</template>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface PageColumnsProps {
|
|
2
|
+
/**
|
|
3
|
+
* The element or component this component should render as.
|
|
4
|
+
* @defaultValue 'div'
|
|
5
|
+
*/
|
|
6
|
+
as?: any;
|
|
7
|
+
class?: any;
|
|
8
|
+
}
|
|
9
|
+
export interface PageColumnsSlots {
|
|
10
|
+
default(props?: {}): any;
|
|
11
|
+
}
|
|
12
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageColumnsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageColumnsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageColumnsSlots>;
|
|
13
|
+
export default _default;
|
|
14
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
15
|
+
new (): {
|
|
16
|
+
$slots: S;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/page-feature";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { getSlotChildrenText } from "../utils";
|
|
9
|
+
import { useAppConfig } from "#imports";
|
|
10
|
+
import { tv } from "../utils/tv";
|
|
11
|
+
defineOptions({ inheritAttrs: false });
|
|
12
|
+
const props = defineProps({
|
|
13
|
+
as: { type: null, required: false },
|
|
14
|
+
icon: { type: String, required: false },
|
|
15
|
+
title: { type: String, required: false },
|
|
16
|
+
description: { type: String, required: false },
|
|
17
|
+
orientation: { type: null, required: false, default: "horizontal" },
|
|
18
|
+
to: { type: null, required: false },
|
|
19
|
+
target: { type: [String, Object, null], required: false },
|
|
20
|
+
onClick: { type: Function, required: false },
|
|
21
|
+
class: { type: null, required: false },
|
|
22
|
+
ui: { type: null, required: false }
|
|
23
|
+
});
|
|
24
|
+
const slots = defineSlots();
|
|
25
|
+
const appConfig = useAppConfig();
|
|
26
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageFeature || {} })({
|
|
27
|
+
orientation: props.orientation,
|
|
28
|
+
title: !!props.title || !!slots.title
|
|
29
|
+
}));
|
|
30
|
+
const ariaLabel = computed(() => {
|
|
31
|
+
const slotText = slots.title && getSlotChildrenText(slots.title());
|
|
32
|
+
return (slotText || props.title || "Feature link").trim();
|
|
33
|
+
});
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<template>
|
|
37
|
+
<Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
|
|
38
|
+
<div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
|
|
39
|
+
<slot name="leading">
|
|
40
|
+
<UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
|
|
41
|
+
</slot>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div :class="ui.wrapper({ class: props.ui?.wrapper })">
|
|
45
|
+
<ULink
|
|
46
|
+
v-if="to"
|
|
47
|
+
:aria-label="ariaLabel"
|
|
48
|
+
v-bind="{ to, target, ...$attrs }"
|
|
49
|
+
class="focus:outline-none peer"
|
|
50
|
+
tabindex="-1"
|
|
51
|
+
raw
|
|
52
|
+
>
|
|
53
|
+
<span class="absolute inset-0" aria-hidden="true" />
|
|
54
|
+
</ULink>
|
|
55
|
+
|
|
56
|
+
<slot>
|
|
57
|
+
<div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
|
|
58
|
+
<slot name="title">
|
|
59
|
+
{{ title }}
|
|
60
|
+
</slot>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
|
|
64
|
+
<slot name="description">
|
|
65
|
+
{{ description }}
|
|
66
|
+
</slot>
|
|
67
|
+
</div>
|
|
68
|
+
</slot>
|
|
69
|
+
</div>
|
|
70
|
+
</Primitive>
|
|
71
|
+
</template>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import theme from '#build/ui/page-feature';
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
3
|
+
import type { LinkProps, ComponentConfig } from '../types';
|
|
4
|
+
type PageFeature = ComponentConfig<typeof theme, AppConfig, 'pageFeature'>;
|
|
5
|
+
export interface PageFeatureProps {
|
|
6
|
+
/**
|
|
7
|
+
* The element or component this component should render as.
|
|
8
|
+
* @defaultValue 'div'
|
|
9
|
+
*/
|
|
10
|
+
as?: any;
|
|
11
|
+
/**
|
|
12
|
+
* The icon displayed next to the title when `orientation` is `horizontal` and above the title when `orientation` is `vertical`.
|
|
13
|
+
* @IconifyIcon
|
|
14
|
+
*/
|
|
15
|
+
icon?: string;
|
|
16
|
+
title?: string;
|
|
17
|
+
description?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The orientation of the page feature.
|
|
20
|
+
* @defaultValue 'horizontal'
|
|
21
|
+
*/
|
|
22
|
+
orientation?: PageFeature['variants']['orientation'];
|
|
23
|
+
to?: LinkProps['to'];
|
|
24
|
+
target?: LinkProps['target'];
|
|
25
|
+
onClick?: (event: MouseEvent) => void | Promise<void>;
|
|
26
|
+
class?: any;
|
|
27
|
+
ui?: PageFeature['slots'];
|
|
28
|
+
}
|
|
29
|
+
export interface PageFeatureSlots {
|
|
30
|
+
leading(props?: {}): any;
|
|
31
|
+
title(props?: {}): any;
|
|
32
|
+
description(props?: {}): any;
|
|
33
|
+
default(props?: {}): any;
|
|
34
|
+
}
|
|
35
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageFeatureProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageFeatureProps> & Readonly<{}>, {
|
|
36
|
+
orientation: PageFeature["variants"]["orientation"];
|
|
37
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageFeatureSlots>;
|
|
38
|
+
export default _default;
|
|
39
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
40
|
+
new (): {
|
|
41
|
+
$slots: S;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/page-grid";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useAppConfig } from "#imports";
|
|
9
|
+
import { tv } from "../utils/tv";
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
as: { type: null, required: false },
|
|
12
|
+
class: { type: null, required: false }
|
|
13
|
+
});
|
|
14
|
+
defineSlots();
|
|
15
|
+
const appConfig = useAppConfig();
|
|
16
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageGrid || {} }));
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<template>
|
|
20
|
+
<Primitive :as="as" :class="ui({ class: props.class })">
|
|
21
|
+
<slot />
|
|
22
|
+
</Primitive>
|
|
23
|
+
</template>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface PageGridProps {
|
|
2
|
+
/**
|
|
3
|
+
* The element or component this component should render as.
|
|
4
|
+
* @defaultValue 'div'
|
|
5
|
+
*/
|
|
6
|
+
as?: any;
|
|
7
|
+
class?: any;
|
|
8
|
+
}
|
|
9
|
+
export interface PageGridSlots {
|
|
10
|
+
default(props?: {}): any;
|
|
11
|
+
}
|
|
12
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageGridSlots>;
|
|
13
|
+
export default _default;
|
|
14
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
15
|
+
new (): {
|
|
16
|
+
$slots: S;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/ui/page-header";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { Primitive } from "reka-ui";
|
|
8
|
+
import { useAppConfig } from "#imports";
|
|
9
|
+
import { tv } from "../utils/tv";
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
as: { type: null, required: false },
|
|
12
|
+
headline: { type: String, required: false },
|
|
13
|
+
title: { type: String, required: false },
|
|
14
|
+
description: { type: String, required: false },
|
|
15
|
+
links: { type: Array, required: false },
|
|
16
|
+
class: { type: null, required: false },
|
|
17
|
+
ui: { type: null, required: false }
|
|
18
|
+
});
|
|
19
|
+
const slots = defineSlots();
|
|
20
|
+
const appConfig = useAppConfig();
|
|
21
|
+
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageHeader || {} })({
|
|
22
|
+
title: !!props.title || !!slots.title
|
|
23
|
+
}));
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
|
28
|
+
<div v-if="headline || !!slots.headline" :class="ui.headline({ class: props.ui?.headline })">
|
|
29
|
+
<slot name="headline">
|
|
30
|
+
{{ headline }}
|
|
31
|
+
</slot>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div :class="ui.container({ class: props.ui?.container })">
|
|
35
|
+
<div :class="ui.wrapper({ class: props.ui?.wrapper })">
|
|
36
|
+
<h1 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
|
|
37
|
+
<slot name="title">
|
|
38
|
+
{{ title }}
|
|
39
|
+
</slot>
|
|
40
|
+
</h1>
|
|
41
|
+
|
|
42
|
+
<div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
|
|
43
|
+
<slot name="links">
|
|
44
|
+
<UButton v-for="(link, index) in links" :key="index" color="neutral" variant="outline" v-bind="link" />
|
|
45
|
+
</slot>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
|
|
50
|
+
<slot name="description">
|
|
51
|
+
{{ description }}
|
|
52
|
+
</slot>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<slot />
|
|
56
|
+
</div>
|
|
57
|
+
</Primitive>
|
|
58
|
+
</template>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import theme from '#build/ui/page-header';
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
3
|
+
import type { ButtonProps, ComponentConfig } from '../types';
|
|
4
|
+
type PageHeader = ComponentConfig<typeof theme, AppConfig, 'pageHeader'>;
|
|
5
|
+
export interface PageHeaderProps {
|
|
6
|
+
/**
|
|
7
|
+
* The element or component this component should render as.
|
|
8
|
+
* @defaultValue 'div'
|
|
9
|
+
*/
|
|
10
|
+
as?: any;
|
|
11
|
+
headline?: string;
|
|
12
|
+
title?: string;
|
|
13
|
+
description?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Display a list of Button next to the title.
|
|
16
|
+
* `{ color: 'neutral', variant: 'outline' }`{lang="ts-type"}
|
|
17
|
+
*/
|
|
18
|
+
links?: ButtonProps[];
|
|
19
|
+
class?: any;
|
|
20
|
+
ui?: PageHeader['slots'];
|
|
21
|
+
}
|
|
22
|
+
export interface PageHeaderSlots {
|
|
23
|
+
headline(props?: {}): any;
|
|
24
|
+
title(props?: {}): any;
|
|
25
|
+
description(props?: {}): any;
|
|
26
|
+
links(props?: {}): any;
|
|
27
|
+
default(props?: {}): any;
|
|
28
|
+
}
|
|
29
|
+
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageHeaderSlots>;
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
32
|
+
new (): {
|
|
33
|
+
$slots: S;
|
|
34
|
+
};
|
|
35
|
+
};
|