@bitrix24/b24ui-nuxt 0.4.9 → 0.4.11
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/b24ui/collapsible.ts +6 -0
- package/.nuxt/b24ui/index.ts +15 -0
- package/.nuxt/b24ui/navbar-divider.ts +5 -0
- package/.nuxt/b24ui/navbar-section.ts +5 -0
- package/.nuxt/b24ui/navbar-spacer.ts +5 -0
- package/.nuxt/b24ui/navbar.ts +5 -0
- package/.nuxt/b24ui/navigation-menu.ts +299 -0
- package/.nuxt/b24ui/sidebar-body.ts +15 -0
- package/.nuxt/b24ui/sidebar-footer.ts +5 -0
- package/.nuxt/b24ui/sidebar-header.ts +5 -0
- package/.nuxt/b24ui/sidebar-heading.ts +5 -0
- package/.nuxt/b24ui/sidebar-layout.ts +38 -0
- package/.nuxt/b24ui/sidebar-section.ts +5 -0
- package/.nuxt/b24ui/sidebar-spacer.ts +5 -0
- package/.nuxt/b24ui/sidebar.ts +5 -0
- package/.nuxt/b24ui/stacked-layout.ts +9 -0
- package/cli/package.json +1 -1
- package/dist/meta.cjs +10969 -846
- package/dist/meta.d.cts +10969 -846
- package/dist/meta.d.mts +10969 -846
- package/dist/meta.d.ts +10969 -846
- package/dist/meta.mjs +10969 -846
- package/dist/module.cjs +1 -1
- package/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/components/Collapsible.vue +56 -0
- package/dist/runtime/components/DropdownMenu.vue +2 -0
- package/dist/runtime/components/Navbar.vue +43 -0
- package/dist/runtime/components/NavbarDivider.vue +42 -0
- package/dist/runtime/components/NavbarSection.vue +46 -0
- package/dist/runtime/components/NavbarSpacer.vue +42 -0
- package/dist/runtime/components/NavigationMenu.vue +340 -0
- package/dist/runtime/components/Sidebar.vue +43 -0
- package/dist/runtime/components/SidebarBody.vue +49 -0
- package/dist/runtime/components/SidebarFooter.vue +42 -0
- package/dist/runtime/components/SidebarHeader.vue +42 -0
- package/dist/runtime/components/SidebarHeading.vue +42 -0
- package/dist/runtime/components/SidebarLayout.vue +157 -0
- package/dist/runtime/components/SidebarSection.vue +46 -0
- package/dist/runtime/components/SidebarSpacer.vue +42 -0
- package/dist/runtime/components/StackedLayout.vue +49 -0
- package/dist/runtime/composables/defineLocale.js +1 -0
- package/dist/runtime/composables/defineShortcuts.js +1 -0
- package/dist/runtime/composables/useComponentIcons.d.ts +2 -2
- package/dist/runtime/composables/useKbd.js +1 -1
- package/dist/runtime/composables/useLocale.js +2 -2
- package/dist/runtime/composables/useOverlay.js +1 -1
- package/dist/runtime/index.css +1 -1
- package/dist/runtime/plugins/colors.js +2 -5
- package/dist/runtime/types/index.d.ts +15 -0
- package/dist/runtime/types/index.js +15 -0
- package/dist/runtime/utils/link.d.ts +7 -7
- package/dist/runtime/utils/tv.js +1 -1
- package/dist/runtime/vue/plugins/head.js +3 -0
- package/dist/runtime/vue/stubs.d.ts +1 -2
- package/dist/runtime/vue/stubs.js +1 -2
- package/dist/shared/{b24ui-nuxt.D6rkGFKm.mjs → b24ui-nuxt.CJqO7fYv.mjs} +495 -0
- package/dist/shared/{b24ui-nuxt.CH0xlXgy.cjs → b24ui-nuxt.CltBJi1M.cjs} +495 -0
- package/dist/unplugin.cjs +6 -2
- package/dist/unplugin.mjs +6 -2
- package/dist/vite.cjs +1 -1
- package/dist/vite.mjs +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema'
|
|
3
|
+
import _appConfig from '#build/app.config'
|
|
4
|
+
import theme from '#build/b24ui/sidebar-body'
|
|
5
|
+
import { tv } from '../utils/tv'
|
|
6
|
+
|
|
7
|
+
const appConfigSidebarBody = _appConfig as AppConfig & { b24ui: { sidebarBody: Partial<typeof theme> } }
|
|
8
|
+
|
|
9
|
+
const sidebarBody = tv({ extend: tv(theme), ...(appConfigSidebarBody.b24ui?.sidebarBody || {}) })
|
|
10
|
+
|
|
11
|
+
export interface SidebarBodyProps {
|
|
12
|
+
/**
|
|
13
|
+
* The element or component this component should render as.
|
|
14
|
+
* @defaultValue 'div'
|
|
15
|
+
*/
|
|
16
|
+
as?: any
|
|
17
|
+
/**
|
|
18
|
+
* @defaultValue true
|
|
19
|
+
*/
|
|
20
|
+
scrollbarThin?: boolean
|
|
21
|
+
class?: any
|
|
22
|
+
b24ui?: Partial<typeof sidebarBody.slots>
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export interface SidebarBodySlots {
|
|
26
|
+
default(props?: {}): any
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
import { computed } from 'vue'
|
|
32
|
+
import { Primitive } from 'reka-ui'
|
|
33
|
+
|
|
34
|
+
const props = withDefaults(defineProps<SidebarBodyProps>(), {
|
|
35
|
+
as: 'div',
|
|
36
|
+
scrollbarThin: true
|
|
37
|
+
})
|
|
38
|
+
defineSlots<SidebarBodySlots>()
|
|
39
|
+
|
|
40
|
+
const b24ui = computed(() => sidebarBody({
|
|
41
|
+
scrollbarThin: Boolean(props.scrollbarThin)
|
|
42
|
+
}))
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<template>
|
|
46
|
+
<Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
|
|
47
|
+
<slot />
|
|
48
|
+
</Primitive>
|
|
49
|
+
</template>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema'
|
|
3
|
+
import _appConfig from '#build/app.config'
|
|
4
|
+
import theme from '#build/b24ui/sidebar-footer'
|
|
5
|
+
import { tv } from '../utils/tv'
|
|
6
|
+
|
|
7
|
+
const appConfigSidebarFooter = _appConfig as AppConfig & { b24ui: { sidebarFooter: Partial<typeof theme> } }
|
|
8
|
+
|
|
9
|
+
const sidebarFooter = tv({ extend: tv(theme), ...(appConfigSidebarFooter.b24ui?.sidebarFooter || {}) })
|
|
10
|
+
|
|
11
|
+
export interface SidebarFooterProps {
|
|
12
|
+
/**
|
|
13
|
+
* The element or component this component should render as.
|
|
14
|
+
* @defaultValue 'div'
|
|
15
|
+
*/
|
|
16
|
+
as?: any
|
|
17
|
+
class?: any
|
|
18
|
+
b24ui?: Partial<typeof sidebarFooter.slots>
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface SidebarFooterSlots {
|
|
22
|
+
default(props?: {}): any
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { Primitive } from 'reka-ui'
|
|
28
|
+
|
|
29
|
+
const props = withDefaults(defineProps<SidebarFooterProps>(), {
|
|
30
|
+
as: 'div'
|
|
31
|
+
})
|
|
32
|
+
defineSlots<SidebarFooterSlots>()
|
|
33
|
+
|
|
34
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
35
|
+
const b24ui = sidebarFooter()
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
|
|
40
|
+
<slot />
|
|
41
|
+
</Primitive>
|
|
42
|
+
</template>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema'
|
|
3
|
+
import _appConfig from '#build/app.config'
|
|
4
|
+
import theme from '#build/b24ui/sidebar-header'
|
|
5
|
+
import { tv } from '../utils/tv'
|
|
6
|
+
|
|
7
|
+
const appConfigSidebarHeader = _appConfig as AppConfig & { b24ui: { sidebarHeader: Partial<typeof theme> } }
|
|
8
|
+
|
|
9
|
+
const sidebarHeader = tv({ extend: tv(theme), ...(appConfigSidebarHeader.b24ui?.sidebarHeader || {}) })
|
|
10
|
+
|
|
11
|
+
export interface SidebarHeaderProps {
|
|
12
|
+
/**
|
|
13
|
+
* The element or component this component should render as.
|
|
14
|
+
* @defaultValue 'div'
|
|
15
|
+
*/
|
|
16
|
+
as?: any
|
|
17
|
+
class?: any
|
|
18
|
+
b24ui?: Partial<typeof sidebarHeader.slots>
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface SidebarHeaderSlots {
|
|
22
|
+
default(props?: {}): any
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { Primitive } from 'reka-ui'
|
|
28
|
+
|
|
29
|
+
const props = withDefaults(defineProps<SidebarHeaderProps>(), {
|
|
30
|
+
as: 'div'
|
|
31
|
+
})
|
|
32
|
+
defineSlots<SidebarHeaderSlots>()
|
|
33
|
+
|
|
34
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
35
|
+
const b24ui = sidebarHeader()
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
|
|
40
|
+
<slot />
|
|
41
|
+
</Primitive>
|
|
42
|
+
</template>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema'
|
|
3
|
+
import _appConfig from '#build/app.config'
|
|
4
|
+
import theme from '#build/b24ui/sidebar-heading'
|
|
5
|
+
import { tv } from '../utils/tv'
|
|
6
|
+
|
|
7
|
+
const appConfigSidebarHeading = _appConfig as AppConfig & { b24ui: { sidebarHeading: Partial<typeof theme> } }
|
|
8
|
+
|
|
9
|
+
const sidebarHeading = tv({ extend: tv(theme), ...(appConfigSidebarHeading.b24ui?.sidebarHeading || {}) })
|
|
10
|
+
|
|
11
|
+
export interface SidebarHeadingProps {
|
|
12
|
+
/**
|
|
13
|
+
* The element or component this component should render as.
|
|
14
|
+
* @defaultValue 'h6'
|
|
15
|
+
*/
|
|
16
|
+
as?: any
|
|
17
|
+
class?: any
|
|
18
|
+
b24ui?: Partial<typeof sidebarHeading.slots>
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface SidebarHeadingSlots {
|
|
22
|
+
default(props?: {}): any
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { Primitive } from 'reka-ui'
|
|
28
|
+
|
|
29
|
+
const props = withDefaults(defineProps<SidebarHeadingProps>(), {
|
|
30
|
+
as: 'h6'
|
|
31
|
+
})
|
|
32
|
+
defineSlots<SidebarHeadingSlots>()
|
|
33
|
+
|
|
34
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
35
|
+
const b24ui = sidebarHeading()
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
|
|
40
|
+
<slot />
|
|
41
|
+
</Primitive>
|
|
42
|
+
</template>
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema'
|
|
3
|
+
import _appConfig from '#build/app.config'
|
|
4
|
+
import theme from '#build/b24ui/sidebar-layout'
|
|
5
|
+
import { tv } from '../utils/tv'
|
|
6
|
+
import { useRoute } from 'vue-router'
|
|
7
|
+
|
|
8
|
+
const appConfigSidebarLayout = _appConfig as AppConfig & { b24ui: { sidebarLayout: Partial<typeof theme> } }
|
|
9
|
+
|
|
10
|
+
const sidebarLayout = tv({ extend: tv(theme), ...(appConfigSidebarLayout.b24ui?.sidebarLayout || {}) })
|
|
11
|
+
|
|
12
|
+
export interface SidebarLayoutProps {
|
|
13
|
+
/**
|
|
14
|
+
* The element or component this component should render as.
|
|
15
|
+
* @defaultValue 'div'
|
|
16
|
+
*/
|
|
17
|
+
as?: any
|
|
18
|
+
useSidebar?: boolean
|
|
19
|
+
useLightContent?: boolean
|
|
20
|
+
class?: any
|
|
21
|
+
b24ui?: Partial<typeof sidebarLayout.slots>
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface SidebarLayoutSlots {
|
|
25
|
+
/**
|
|
26
|
+
* Menu for all screen sizes.
|
|
27
|
+
* @param props
|
|
28
|
+
* @param props.handleClick - Handler for navigation click events
|
|
29
|
+
*/
|
|
30
|
+
sidebar(props: { handleClick: () => void }): any
|
|
31
|
+
/**
|
|
32
|
+
* Menu for mobile screen sizes.
|
|
33
|
+
*/
|
|
34
|
+
navbar(props?: {}): any
|
|
35
|
+
/**
|
|
36
|
+
* The page content.
|
|
37
|
+
*/
|
|
38
|
+
default(props?: {}): any
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<script setup lang="ts">
|
|
43
|
+
import { ref, computed, watch, onUnmounted } from 'vue'
|
|
44
|
+
import { Primitive } from 'reka-ui'
|
|
45
|
+
import B24Slideover from './Slideover.vue'
|
|
46
|
+
import B24Sidebar from './Sidebar.vue'
|
|
47
|
+
import B24ModalDialogClose from './ModalDialogClose.vue'
|
|
48
|
+
import B24Navbar from './Navbar.vue'
|
|
49
|
+
import MenuIcon from '@bitrix24/b24icons-vue/main/MenuIcon'
|
|
50
|
+
import Cross50Icon from '@bitrix24/b24icons-vue/actions/Cross50Icon'
|
|
51
|
+
|
|
52
|
+
const props = withDefaults(defineProps<SidebarLayoutProps>(), {
|
|
53
|
+
as: 'div',
|
|
54
|
+
useLightContent: true
|
|
55
|
+
})
|
|
56
|
+
const slots = defineSlots<SidebarLayoutSlots>()
|
|
57
|
+
|
|
58
|
+
const route = useRoute()
|
|
59
|
+
const isUseSideBar = computed(() => !!slots.sidebar)
|
|
60
|
+
const openSidebarSlideover = ref(false)
|
|
61
|
+
|
|
62
|
+
const b24ui = computed(() => sidebarLayout({
|
|
63
|
+
useSidebar: isUseSideBar.value,
|
|
64
|
+
useLightContent: Boolean(props.useLightContent)
|
|
65
|
+
}))
|
|
66
|
+
|
|
67
|
+
const closeModal = () => {
|
|
68
|
+
if (openSidebarSlideover.value) {
|
|
69
|
+
openSidebarSlideover.value = false
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
const stopWatcher = watch(
|
|
74
|
+
() => route.path,
|
|
75
|
+
() => closeModal(),
|
|
76
|
+
{ immediate: true }
|
|
77
|
+
)
|
|
78
|
+
|
|
79
|
+
onUnmounted(() => {
|
|
80
|
+
stopWatcher()
|
|
81
|
+
})
|
|
82
|
+
|
|
83
|
+
const handleNavigationClick = () => {
|
|
84
|
+
closeModal()
|
|
85
|
+
}
|
|
86
|
+
</script>
|
|
87
|
+
|
|
88
|
+
<template>
|
|
89
|
+
<Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
|
|
90
|
+
<template v-if="isUseSideBar">
|
|
91
|
+
<div :class="b24ui.sidebar({ class: props.b24ui?.sidebar })">
|
|
92
|
+
<B24Sidebar>
|
|
93
|
+
<slot name="sidebar" :handle-click="handleNavigationClick" />
|
|
94
|
+
</B24Sidebar>
|
|
95
|
+
</div>
|
|
96
|
+
</template>
|
|
97
|
+
|
|
98
|
+
<header :class="b24ui.header({ class: props.b24ui?.header })">
|
|
99
|
+
<div
|
|
100
|
+
v-if="isUseSideBar"
|
|
101
|
+
:class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })"
|
|
102
|
+
>
|
|
103
|
+
<B24Slideover
|
|
104
|
+
v-model:open="openSidebarSlideover"
|
|
105
|
+
title="Navigation"
|
|
106
|
+
description="Content navigation"
|
|
107
|
+
side="left"
|
|
108
|
+
:b24ui="{ content: b24ui.sidebarSlideoverContainer({ class: props.b24ui?.sidebarSlideoverContainer }) }"
|
|
109
|
+
>
|
|
110
|
+
<!-- @todo: lang -->
|
|
111
|
+
<B24Button
|
|
112
|
+
aria-label="Open navigation"
|
|
113
|
+
color="link"
|
|
114
|
+
size="sm"
|
|
115
|
+
:icon="MenuIcon"
|
|
116
|
+
/>
|
|
117
|
+
|
|
118
|
+
<template #content>
|
|
119
|
+
<div :class="b24ui.sidebarSlideover({ class: props.b24ui?.sidebarSlideover })">
|
|
120
|
+
<B24Sidebar>
|
|
121
|
+
<div :class="b24ui.sidebarSlideoverBtnClose({ class: props.b24ui?.sidebarSlideoverBtnClose })">
|
|
122
|
+
<!-- @todo: lang -->
|
|
123
|
+
<B24ModalDialogClose>
|
|
124
|
+
<B24Button
|
|
125
|
+
color="link"
|
|
126
|
+
size="lg"
|
|
127
|
+
:icon="Cross50Icon"
|
|
128
|
+
aria-label="Close navigation"
|
|
129
|
+
/>
|
|
130
|
+
</B24ModalDialogClose>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<slot name="sidebar" :handle-click="handleNavigationClick" />
|
|
134
|
+
</B24Sidebar>
|
|
135
|
+
</div>
|
|
136
|
+
</template>
|
|
137
|
+
</B24Slideover>
|
|
138
|
+
</div>
|
|
139
|
+
<div :class="b24ui.headerWrapper({ class: props.b24ui?.headerWrapper })">
|
|
140
|
+
<B24Navbar :class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })">
|
|
141
|
+
<slot name="navbar" />
|
|
142
|
+
</B24Navbar>
|
|
143
|
+
</div>
|
|
144
|
+
</header>
|
|
145
|
+
|
|
146
|
+
<!-- Page Content -->
|
|
147
|
+
<template v-if="!!slots.default">
|
|
148
|
+
<main :class="b24ui.container({ class: props.b24ui?.container })">
|
|
149
|
+
<div :class="b24ui.containerWrapper({ class: props.b24ui?.containerWrapper })">
|
|
150
|
+
<div :class="b24ui.containerWrapperInner({ class: props.b24ui?.containerWrapperInner })">
|
|
151
|
+
<slot />
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</main>
|
|
155
|
+
</template>
|
|
156
|
+
</Primitive>
|
|
157
|
+
</template>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema'
|
|
3
|
+
import _appConfig from '#build/app.config'
|
|
4
|
+
import theme from '#build/b24ui/sidebar-section'
|
|
5
|
+
import { tv } from '../utils/tv'
|
|
6
|
+
|
|
7
|
+
const appConfigSidebarSection = _appConfig as AppConfig & { b24ui: { sidebarSection: Partial<typeof theme> } }
|
|
8
|
+
|
|
9
|
+
const sidebarSection = tv({ extend: tv(theme), ...(appConfigSidebarSection.b24ui?.sidebarSection || {}) })
|
|
10
|
+
|
|
11
|
+
export interface SidebarSectionProps {
|
|
12
|
+
/**
|
|
13
|
+
* The element or component this component should render as.
|
|
14
|
+
* @defaultValue 'div'
|
|
15
|
+
*/
|
|
16
|
+
as?: any
|
|
17
|
+
class?: any
|
|
18
|
+
b24ui?: Partial<typeof sidebarSection.slots>
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface SidebarSectionSlots {
|
|
22
|
+
default(props?: {}): any
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { Primitive } from 'reka-ui'
|
|
28
|
+
|
|
29
|
+
const props = withDefaults(defineProps<SidebarSectionProps>(), {
|
|
30
|
+
as: 'div'
|
|
31
|
+
})
|
|
32
|
+
defineSlots<SidebarSectionSlots>()
|
|
33
|
+
|
|
34
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
35
|
+
const b24ui = sidebarSection()
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<Primitive
|
|
40
|
+
:as="as"
|
|
41
|
+
:class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
|
|
42
|
+
data-slot="section"
|
|
43
|
+
>
|
|
44
|
+
<slot />
|
|
45
|
+
</Primitive>
|
|
46
|
+
</template>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { AppConfig } from '@nuxt/schema'
|
|
3
|
+
import _appConfig from '#build/app.config'
|
|
4
|
+
import theme from '#build/b24ui/sidebar-spacer'
|
|
5
|
+
import { tv } from '../utils/tv'
|
|
6
|
+
|
|
7
|
+
const appConfigSidebarSpacer = _appConfig as AppConfig & { b24ui: { sidebarSpacer: Partial<typeof theme> } }
|
|
8
|
+
|
|
9
|
+
const sidebarSpacer = tv({ extend: tv(theme), ...(appConfigSidebarSpacer.b24ui?.sidebarSpacer || {}) })
|
|
10
|
+
|
|
11
|
+
export interface SidebarSpacerProps {
|
|
12
|
+
/**
|
|
13
|
+
* The element or component this component should render as.
|
|
14
|
+
* @defaultValue 'div'
|
|
15
|
+
*/
|
|
16
|
+
as?: any
|
|
17
|
+
class?: any
|
|
18
|
+
b24ui?: Partial<typeof sidebarSpacer.slots>
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface SidebarSpacerSlots {
|
|
22
|
+
default(props?: {}): any
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { Primitive } from 'reka-ui'
|
|
28
|
+
|
|
29
|
+
const props = withDefaults(defineProps<SidebarSpacerProps>(), {
|
|
30
|
+
as: 'div'
|
|
31
|
+
})
|
|
32
|
+
defineSlots<SidebarSpacerSlots>()
|
|
33
|
+
|
|
34
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
35
|
+
const b24ui = sidebarSpacer()
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<Primitive :as="as" aria-hidden="true" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
|
|
40
|
+
<slot />
|
|
41
|
+
</Primitive>
|
|
42
|
+
</template>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
// import type { VariantProps } from 'tailwind-variants'
|
|
3
|
+
import type { AppConfig } from '@nuxt/schema'
|
|
4
|
+
import _appConfig from '#build/app.config'
|
|
5
|
+
import theme from '#build/b24ui/stacked-layout'
|
|
6
|
+
import { tv } from '../utils/tv'
|
|
7
|
+
|
|
8
|
+
const appConfigStackedLayout = _appConfig as AppConfig & { b24ui: { stackedLayout: Partial<typeof theme> } }
|
|
9
|
+
|
|
10
|
+
const stackedLayout = tv({ extend: tv(theme), ...(appConfigStackedLayout.b24ui?.stackedLayout || {}) })
|
|
11
|
+
|
|
12
|
+
// type StackedLayoutVariants = VariantProps<typeof stackedLayout>
|
|
13
|
+
|
|
14
|
+
export interface StackedLayoutProps {
|
|
15
|
+
/**
|
|
16
|
+
* The element or component this component should render as.
|
|
17
|
+
* @defaultValue 'div'
|
|
18
|
+
*/
|
|
19
|
+
as?: any
|
|
20
|
+
class?: any
|
|
21
|
+
b24ui?: Partial<typeof stackedLayout.slots>
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface StackedLayoutSlots {
|
|
25
|
+
default(props?: {}): any
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<script setup lang="ts">
|
|
30
|
+
import { Primitive } from 'reka-ui'
|
|
31
|
+
|
|
32
|
+
const props = withDefaults(defineProps<StackedLayoutProps>(), {
|
|
33
|
+
as: 'div'
|
|
34
|
+
})
|
|
35
|
+
const slots = defineSlots<StackedLayoutSlots>()
|
|
36
|
+
|
|
37
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
38
|
+
const b24ui = stackedLayout()
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
|
|
43
|
+
<template v-if="!!slots.default">
|
|
44
|
+
<div :class="b24ui.container({ class: props.b24ui?.container })">
|
|
45
|
+
<slot />
|
|
46
|
+
</div>
|
|
47
|
+
</template>
|
|
48
|
+
</Primitive>
|
|
49
|
+
</template>
|
|
@@ -22,6 +22,6 @@ export interface UseComponentIconsProps {
|
|
|
22
22
|
export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
|
|
23
23
|
isLeading: import("vue").ComputedRef<any>;
|
|
24
24
|
isTrailing: import("vue").ComputedRef<boolean>;
|
|
25
|
-
leadingIconName: import("vue").ComputedRef<
|
|
26
|
-
trailingIconName: import("vue").ComputedRef<
|
|
25
|
+
leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
|
|
26
|
+
trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
|
|
27
27
|
};
|
|
@@ -2,9 +2,9 @@ import { computed, inject, toRef } from "vue";
|
|
|
2
2
|
import { createSharedComposable } from "@vueuse/core";
|
|
3
3
|
import { buildLocaleContext } from "../utils/locale.js";
|
|
4
4
|
import en from "../locale/en.js";
|
|
5
|
-
export const localeContextInjectionKey = Symbol("bitrix24-ui.locale-context");
|
|
5
|
+
export const localeContextInjectionKey = Symbol.for("bitrix24-ui.locale-context");
|
|
6
6
|
const _useLocale = (localeOverrides) => {
|
|
7
7
|
const locale = localeOverrides || toRef(inject(localeContextInjectionKey));
|
|
8
8
|
return buildLocaleContext(computed(() => locale.value || en));
|
|
9
9
|
};
|
|
10
|
-
export const useLocale = createSharedComposable(_useLocale);
|
|
10
|
+
export const useLocale = /* @__PURE__ */ createSharedComposable(_useLocale);
|
package/dist/runtime/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{--b24ui-header-height:calc(var(--spacing)*16);body{@apply antialiased scheme-light dark:scheme-dark}.scrollbar-thin{scrollbar-width:thin}}
|
|
1
|
+
@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{--b24ui-header-height:calc(var(--spacing)*16);body{@apply antialiased scheme-light dark:scheme-dark}}@layer theme{:host,:root{--spacing:.25rem}}.scrollbar-thin{scrollbar-width:thin}.scrollbar-transparent{scrollbar-color:hsla(0,0%,100%,.21) transparent}.scrollbar-transparent:hover{scrollbar-color:rgba(82,92,105,.36) transparent}.dark .scrollbar-transparent{scrollbar-color:rgba(0,0,0,.21) transparent}.dark .scrollbar-transparent:hover{scrollbar-color:#515a67 transparent}
|
|
@@ -23,8 +23,7 @@ export default defineNuxtPlugin(() => {
|
|
|
23
23
|
style: [{
|
|
24
24
|
innerHTML: () => root.value,
|
|
25
25
|
tagPriority: -2,
|
|
26
|
-
id: "bitrix24-ui-colors"
|
|
27
|
-
type: "text/css"
|
|
26
|
+
id: "bitrix24-ui-colors"
|
|
28
27
|
}]
|
|
29
28
|
};
|
|
30
29
|
if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
|
|
@@ -38,7 +37,5 @@ export default defineNuxtPlugin(() => {
|
|
|
38
37
|
}];
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
|
-
|
|
42
|
-
useHead(headData);
|
|
43
|
-
}
|
|
40
|
+
useHead(headData);
|
|
44
41
|
});
|
|
@@ -9,6 +9,7 @@ export * from '../components/ButtonGroup.vue';
|
|
|
9
9
|
export * from '../components/Calendar.vue';
|
|
10
10
|
export * from '../components/Checkbox.vue';
|
|
11
11
|
export * from '../components/Chip.vue';
|
|
12
|
+
export * from '../components/Collapsible.vue';
|
|
12
13
|
export * from '../components/Container.vue';
|
|
13
14
|
export * from '../components/Countdown.vue';
|
|
14
15
|
export * from '../components/DescriptionList.vue';
|
|
@@ -22,6 +23,7 @@ export * from '../components/Kbd.vue';
|
|
|
22
23
|
export * from '../components/Link.vue';
|
|
23
24
|
export * from '../components/Modal.vue';
|
|
24
25
|
export * from '../components/ModalDialogClose.vue';
|
|
26
|
+
export * from '../components/NavigationMenu.vue';
|
|
25
27
|
export * from '../components/Popover.vue';
|
|
26
28
|
export * from '../components/Progress.vue';
|
|
27
29
|
export * from '../components/RadioGroup.vue';
|
|
@@ -37,6 +39,19 @@ export * from '../components/Textarea.vue';
|
|
|
37
39
|
export * from '../components/Toast.vue';
|
|
38
40
|
export * from '../components/Toaster.vue';
|
|
39
41
|
export * from '../components/Tooltip.vue';
|
|
42
|
+
export * from '../components/SidebarLayout.vue';
|
|
43
|
+
export * from '../components/StackedLayout.vue';
|
|
44
|
+
export * from '../components/Sidebar.vue';
|
|
45
|
+
export * from '../components/SidebarHeader.vue';
|
|
46
|
+
export * from '../components/SidebarBody.vue';
|
|
47
|
+
export * from '../components/SidebarFooter.vue';
|
|
48
|
+
export * from '../components/SidebarSection.vue';
|
|
49
|
+
export * from '../components/SidebarHeading.vue';
|
|
50
|
+
export * from '../components/SidebarSpacer.vue';
|
|
51
|
+
export * from '../components/Navbar.vue';
|
|
52
|
+
export * from '../components/NavbarSection.vue';
|
|
53
|
+
export * from '../components/NavbarDivider.vue';
|
|
54
|
+
export * from '../components/NavbarSpacer.vue';
|
|
40
55
|
export * from '../components/content/TableWrapper.vue';
|
|
41
56
|
export * from '../prose/H1.vue';
|
|
42
57
|
export * from '../prose/H2.vue';
|
|
@@ -9,6 +9,7 @@ export * from "../components/ButtonGroup.vue";
|
|
|
9
9
|
export * from "../components/Calendar.vue";
|
|
10
10
|
export * from "../components/Checkbox.vue";
|
|
11
11
|
export * from "../components/Chip.vue";
|
|
12
|
+
export * from "../components/Collapsible.vue";
|
|
12
13
|
export * from "../components/Container.vue";
|
|
13
14
|
export * from "../components/Countdown.vue";
|
|
14
15
|
export * from "../components/DescriptionList.vue";
|
|
@@ -22,6 +23,7 @@ export * from "../components/Kbd.vue";
|
|
|
22
23
|
export * from "../components/Link.vue";
|
|
23
24
|
export * from "../components/Modal.vue";
|
|
24
25
|
export * from "../components/ModalDialogClose.vue";
|
|
26
|
+
export * from "../components/NavigationMenu.vue";
|
|
25
27
|
export * from "../components/Popover.vue";
|
|
26
28
|
export * from "../components/Progress.vue";
|
|
27
29
|
export * from "../components/RadioGroup.vue";
|
|
@@ -37,6 +39,19 @@ export * from "../components/Textarea.vue";
|
|
|
37
39
|
export * from "../components/Toast.vue";
|
|
38
40
|
export * from "../components/Toaster.vue";
|
|
39
41
|
export * from "../components/Tooltip.vue";
|
|
42
|
+
export * from "../components/SidebarLayout.vue";
|
|
43
|
+
export * from "../components/StackedLayout.vue";
|
|
44
|
+
export * from "../components/Sidebar.vue";
|
|
45
|
+
export * from "../components/SidebarHeader.vue";
|
|
46
|
+
export * from "../components/SidebarBody.vue";
|
|
47
|
+
export * from "../components/SidebarFooter.vue";
|
|
48
|
+
export * from "../components/SidebarSection.vue";
|
|
49
|
+
export * from "../components/SidebarHeading.vue";
|
|
50
|
+
export * from "../components/SidebarSpacer.vue";
|
|
51
|
+
export * from "../components/Navbar.vue";
|
|
52
|
+
export * from "../components/NavbarSection.vue";
|
|
53
|
+
export * from "../components/NavbarDivider.vue";
|
|
54
|
+
export * from "../components/NavbarSpacer.vue";
|
|
40
55
|
export * from "../components/content/TableWrapper.vue";
|
|
41
56
|
export * from "../prose/H1.vue";
|
|
42
57
|
export * from "../prose/H2.vue";
|
|
@@ -6,24 +6,24 @@ export declare function pickLinkProps(link: LinkProps & {
|
|
|
6
6
|
replace: any;
|
|
7
7
|
type: any;
|
|
8
8
|
title: any;
|
|
9
|
+
href: any;
|
|
10
|
+
target: any;
|
|
11
|
+
as: any;
|
|
12
|
+
prefetch: any;
|
|
13
|
+
rel: any;
|
|
14
|
+
external: any;
|
|
9
15
|
exact: any;
|
|
10
16
|
active: any;
|
|
17
|
+
disabled: any;
|
|
11
18
|
activeClass: any;
|
|
12
19
|
ariaCurrentValue: any;
|
|
13
20
|
ariaLabel: any;
|
|
14
|
-
as: any;
|
|
15
|
-
disabled: any;
|
|
16
21
|
exactActiveClass: any;
|
|
17
22
|
exactHash: any;
|
|
18
23
|
exactQuery: any;
|
|
19
|
-
external: any;
|
|
20
|
-
href: any;
|
|
21
24
|
inactiveClass: any;
|
|
22
25
|
noPrefetch: any;
|
|
23
26
|
noRel: any;
|
|
24
|
-
prefetch: any;
|
|
25
27
|
prefetchedClass: any;
|
|
26
|
-
rel: any;
|
|
27
|
-
target: any;
|
|
28
28
|
to: any;
|
|
29
29
|
};
|
package/dist/runtime/utils/tv.js
CHANGED