@bitrix24/b24ui-nuxt 0.4.9 → 0.4.10

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.CH0xlXgy.cjs');
+const templates = require('./shared/b24ui-nuxt.CY35QViH.cjs');
 require('node:url');
 require('scule');
 

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.D6rkGFKm.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt._rviRWFf.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Navbar.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navbar'
+import { tv } from '../utils/tv'
+
+const appConfigNavbar = _appConfig as AppConfig & { b24ui: { navbar: Partial<typeof theme> } }
+
+const navbar = tv({ extend: tv(theme), ...(appConfigNavbar.b24ui?.navbar || {}) })
+
+export interface NavbarProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'nav'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof navbar.slots>
+}
+
+export interface NavbarSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<NavbarProps>(), {
+  as: 'nav'
+})
+defineSlots<NavbarSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => navbar({}))
+</script>
+
+<template>
+  <!-- Navbar -->
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/NavbarDivider.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navbar-divider'
+import { tv } from '../utils/tv'
+
+const appConfigNavbarDivider = _appConfig as AppConfig & { b24ui: { navbarDivider: Partial<typeof theme> } }
+
+const navbarDivider = tv({ extend: tv(theme), ...(appConfigNavbarDivider.b24ui?.navbarDivider || {}) })
+
+export interface NavbarDividerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof navbarDivider.slots>
+}
+
+export interface NavbarDividerSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<NavbarDividerProps>(), {
+  as: 'div'
+})
+defineSlots<NavbarDividerSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => navbarDivider({}))
+</script>
+
+<template>
+  <Primitive :as="as" aria-hidden="true" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/NavbarSection.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navbar-section'
+import { tv } from '../utils/tv'
+
+const appConfigNavSection = _appConfig as AppConfig & { b24ui: { navbarSection: Partial<typeof theme> } }
+
+const navbarSection = tv({ extend: tv(theme), ...(appConfigNavSection.b24ui?.navbarSection || {}) })
+
+export interface NavbarSectionProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof navbarSection.slots>
+}
+
+export interface NavbarSectionSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<NavbarSectionProps>(), {
+  as: 'div'
+})
+defineSlots<NavbarSectionSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => navbarSection({}))
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    data-slot="section"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/NavbarSpacer.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/navbar-spacer'
+import { tv } from '../utils/tv'
+
+const appConfigNavbarSpacer = _appConfig as AppConfig & { b24ui: { navbarSpacer: Partial<typeof theme> } }
+
+const navbarSpacer = tv({ extend: tv(theme), ...(appConfigNavbarSpacer.b24ui?.navbarSpacer || {}) })
+
+export interface NavbarSpacerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof navbarSpacer.slots>
+}
+
+export interface NavbarSpacerSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<NavbarSpacerProps>(), {
+  as: 'div'
+})
+defineSlots<NavbarSpacerSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => navbarSpacer({}))
+</script>
+
+<template>
+  <Primitive :as="as" aria-hidden="true" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/Sidebar.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar'
+import { tv } from '../utils/tv'
+
+const appConfigSidebar = _appConfig as AppConfig & { b24ui: { sidebar: Partial<typeof theme> } }
+
+const sidebar = tv({ extend: tv(theme), ...(appConfigSidebar.b24ui?.sidebar || {}) })
+
+export interface SidebarProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof sidebar.slots>
+}
+
+export interface SidebarSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => sidebar({}))
+</script>
+
+<template>
+  <!-- Sidebar -->
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/SidebarBody.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar-body'
+import { tv } from '../utils/tv'
+
+const appConfigSidebarBody = _appConfig as AppConfig & { b24ui: { sidebarBody: Partial<typeof theme> } }
+
+const sidebarBody = tv({ extend: tv(theme), ...(appConfigSidebarBody.b24ui?.sidebarBody || {}) })
+
+export interface SidebarBodyProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * @defaultValue true
+   */
+  scrollbarThin?: boolean
+  class?: any
+  b24ui?: Partial<typeof sidebarBody.slots>
+}
+
+export interface SidebarBodySlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarBodyProps>(), {
+  as: 'div',
+  scrollbarThin: true
+})
+defineSlots<SidebarBodySlots>()
+
+const b24ui = computed(() => sidebarBody({
+  scrollbarThin: Boolean(props.scrollbarThin)
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/SidebarFooter.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar-footer'
+import { tv } from '../utils/tv'
+
+const appConfigSidebarFooter = _appConfig as AppConfig & { b24ui: { sidebarFooter: Partial<typeof theme> } }
+
+const sidebarFooter = tv({ extend: tv(theme), ...(appConfigSidebarFooter.b24ui?.sidebarFooter || {}) })
+
+export interface SidebarFooterProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof sidebarFooter.slots>
+}
+
+export interface SidebarFooterSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarFooterProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarFooterSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => sidebarFooter({}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/SidebarHeader.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar-header'
+import { tv } from '../utils/tv'
+
+const appConfigSidebarHeader = _appConfig as AppConfig & { b24ui: { sidebarHeader: Partial<typeof theme> } }
+
+const sidebarHeader = tv({ extend: tv(theme), ...(appConfigSidebarHeader.b24ui?.sidebarHeader || {}) })
+
+export interface SidebarHeaderProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof sidebarHeader.slots>
+}
+
+export interface SidebarHeaderSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarHeaderProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarHeaderSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => sidebarHeader({}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/SidebarHeading.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar-heading'
+import { tv } from '../utils/tv'
+
+const appConfigSidebarHeading = _appConfig as AppConfig & { b24ui: { sidebarHeading: Partial<typeof theme> } }
+
+const sidebarHeading = tv({ extend: tv(theme), ...(appConfigSidebarHeading.b24ui?.sidebarHeading || {}) })
+
+export interface SidebarHeadingProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'h6'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof sidebarHeading.slots>
+}
+
+export interface SidebarHeadingSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarHeadingProps>(), {
+  as: 'h6'
+})
+defineSlots<SidebarHeadingSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => sidebarHeading({}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/SidebarLayout.vue

@@ -0,0 +1,131 @@
+<script lang="ts">
+// import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar-layout'
+import { tv } from '../utils/tv'
+
+const appConfigSidebarLayout = _appConfig as AppConfig & { b24ui: { sidebarLayout: Partial<typeof theme> } }
+
+const sidebarLayout = tv({ extend: tv(theme), ...(appConfigSidebarLayout.b24ui?.sidebarLayout || {}) })
+
+// type SidebarLayoutVariants = VariantProps<typeof sidebarLayout>
+
+export interface SidebarLayoutProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  useSidebar?: boolean
+  useLightContent?: boolean
+  class?: any
+  b24ui?: Partial<typeof sidebarLayout.slots>
+}
+
+export interface SidebarLayoutSlots {
+  /**
+   * Menu for all screen sizes.
+   */
+  sidebar(props?: {}): any
+  /**
+   * Menu for mobile screen sizes.
+   */
+  navbar(props?: {}): any
+  /**
+   * The page content.
+   */
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import B24Slideover from './Slideover.vue'
+import B24Sidebar from './Sidebar.vue'
+import B24ModalDialogClose from './ModalDialogClose.vue'
+import B24Navbar from './Navbar.vue'
+import MenuIcon from '@bitrix24/b24icons-vue/main/MenuIcon'
+import Cross50Icon from '@bitrix24/b24icons-vue/actions/Cross50Icon'
+
+const props = withDefaults(defineProps<SidebarLayoutProps>(), {
+  as: 'div',
+  useLightContent: true
+})
+const slots = defineSlots<SidebarLayoutSlots>()
+
+const isUseSideBar = computed(() => !!slots.sidebar)
+
+const b24ui = computed(() => sidebarLayout({
+  useSidebar: isUseSideBar.value,
+  useLightContent: Boolean(props.useLightContent)
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <template v-if="isUseSideBar">
+      <div :class="b24ui.sidebar({ class: props.b24ui?.sidebar })">
+        <B24Sidebar>
+          <slot name="sidebar" />
+        </B24Sidebar>
+      </div>
+    </template>
+
+    <header :class="b24ui.header({ class: props.b24ui?.header })">
+      <div :class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })">
+        <B24Slideover
+          title="Navigation"
+          description="Content navigation"
+          side="left"
+          :b24ui="{ content: b24ui.sidebarSlideoverContainer({ class: props.b24ui?.sidebarSlideoverContainer }) }"
+        >
+          <!-- @todo: lang -->
+          <B24Button
+            aria-label="Open navigation"
+            color="link"
+            size="sm"
+            :icon="MenuIcon"
+          />
+
+          <template #content>
+            <div :class="b24ui.sidebarSlideover({ class: props.b24ui?.sidebarSlideover })">
+              <B24Sidebar>
+                <div :class="b24ui.sidebarSlideoverBtnClose({ class: props.b24ui?.sidebarSlideoverBtnClose })">
+                  <!-- @todo: lang -->
+                  <B24ModalDialogClose>
+                    <B24Button
+                      color="link"
+                      size="lg"
+                      :icon="Cross50Icon"
+                      aria-label="Close navigation"
+                    />
+                  </B24ModalDialogClose>
+                </div>
+
+                <slot name="sidebar" />
+              </B24Sidebar>
+            </div>
+          </template>
+        </B24Slideover>
+      </div>
+      <div :class="b24ui.headerWrapper({ class: props.b24ui?.headerWrapper })">
+        <B24Navbar :class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })">
+          <slot name="navbar" />
+        </B24Navbar>
+      </div>
+    </header>
+
+    <!-- Page Content -->
+    <template v-if="!!slots.default">
+      <main :class="b24ui.container({ class: props.b24ui?.container })">
+        <div :class="b24ui.containerWrapper({ class: props.b24ui?.containerWrapper })">
+          <div :class="b24ui.containerWrapperInner({ class: props.b24ui?.containerWrapperInner })">
+            <slot />
+          </div>
+        </div>
+      </main>
+    </template>
+  </Primitive>
+</template>

package/dist/runtime/components/SidebarSection.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar-section'
+import { tv } from '../utils/tv'
+
+const appConfigSidebarSection = _appConfig as AppConfig & { b24ui: { sidebarSection: Partial<typeof theme> } }
+
+const sidebarSection = tv({ extend: tv(theme), ...(appConfigSidebarSection.b24ui?.sidebarSection || {}) })
+
+export interface SidebarSectionProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof sidebarSection.slots>
+}
+
+export interface SidebarSectionSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarSectionProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarSectionSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => sidebarSection({}))
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    data-slot="section"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/SidebarSpacer.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar-spacer'
+import { tv } from '../utils/tv'
+
+const appConfigSidebarSpacer = _appConfig as AppConfig & { b24ui: { sidebarSpacer: Partial<typeof theme> } }
+
+const sidebarSpacer = tv({ extend: tv(theme), ...(appConfigSidebarSpacer.b24ui?.sidebarSpacer || {}) })
+
+export interface SidebarSpacerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  b24ui?: Partial<typeof sidebarSpacer.slots>
+}
+
+export interface SidebarSpacerSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarSpacerProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarSpacerSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => sidebarSpacer({}))
+</script>
+
+<template>
+  <Primitive :as="as" aria-hidden="true" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <slot />
+  </Primitive>
+</template>