@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Separator.vue

@@ -1,70 +1,80 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/separator";
-import { tv } from "../utils/tv";
-const appConfigSeparator = _appConfig;
-const separator = tv({ extend: tv(theme), ...appConfigSeparator.b24ui?.separator || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { SeparatorProps as _SeparatorProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/separator'
+import { tv } from '../utils/tv'
+import type { AvatarProps, IconComponent } from '../types'
+
+const appConfigSeparator = _appConfig as AppConfig & { b24ui: { separator: Partial<typeof theme> } }
+
+const separator = tv({ extend: tv(theme), ...(appConfigSeparator.b24ui?.separator || {}) })
+
+type SeparatorVariants = VariantProps<typeof separator>
+
+export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** Display a label in the middle. */
+  label?: string
+  /**
+   * Display an icon in the middle
+   * @IconComponent
+   */
+  icon?: IconComponent
+  /**
+   * Display an avatar in the middle
+   */
+  avatar?: AvatarProps
+  /**
+   * @defaultValue 'default'
+   */
+  color?: SeparatorVariants['color']
+  /**
+   * @defaultValue 'xs'
+   */
+  size?: SeparatorVariants['size']
+  /**
+   * @defaultValue 'solid'
+   */
+  type?: SeparatorVariants['type']
+  /**
+   * The orientation of the separator.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: _SeparatorProps['orientation']
+  class?: any
+  b24ui?: Partial<typeof separator.slots>
+}
+
+export interface SeparatorSlots {
+  default(props?: {}): any
+}
 </script>
 
-<script setup>
-import { computed } from "vue";
-import { useForwardProps } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  type: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  decorative: {
-    type: Boolean,
-    required: false
-  }
-});
-const slots = defineSlots();
-const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Separator, useForwardProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import B24Avatar from './Avatar.vue'
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+  orientation: 'horizontal'
+})
+const slots = defineSlots<SeparatorSlots>()
+
+const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
+
 const b24ui = computed(() => separator({
   color: props.color,
   orientation: props.orientation,
   size: props.size,
   type: props.type
-}));
+}))
 </script>
 
 <template>
@@ -76,7 +86,7 @@ const b24ui = computed(() => separator({
         <slot>
           <span v-if="label" :class="b24ui.label({ class: props.b24ui?.label })">{{ label }}</span>
           <Component :is="icon" v-else-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-          <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+          <B24Avatar v-else-if="avatar" :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
         </slot>
       </div>
 

package/dist/runtime/components/Sidebar.vue

@@ -1,29 +1,38 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/sidebar";
-import { tv } from "../utils/tv";
-const appConfigSidebar = _appConfig;
-const sidebar = tv({ extend: tv(theme), ...appConfigSidebar.b24ui?.sidebar || {} });
+<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>
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-defineSlots();
-const b24ui = sidebar();
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = sidebar()
 </script>
 
 <template>

package/dist/runtime/components/SidebarBody.vue

@@ -1,37 +1,45 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/sidebar-body";
-import { tv } from "../utils/tv";
-const appConfigSidebarBody = _appConfig;
-const sidebarBody = tv({ extend: tv(theme), ...appConfigSidebarBody.b24ui?.sidebarBody || {} });
+<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>
-import { computed } from "vue";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  scrollbarThin: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-defineSlots();
+<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>

package/dist/runtime/components/SidebarFooter.vue

@@ -1,29 +1,38 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/sidebar-footer";
-import { tv } from "../utils/tv";
-const appConfigSidebarFooter = _appConfig;
-const sidebarFooter = tv({ extend: tv(theme), ...appConfigSidebarFooter.b24ui?.sidebarFooter || {} });
+<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>
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-defineSlots();
-const b24ui = sidebarFooter();
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarFooterProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarFooterSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = sidebarFooter()
 </script>
 
 <template>

package/dist/runtime/components/SidebarHeader.vue

@@ -1,29 +1,38 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/sidebar-header";
-import { tv } from "../utils/tv";
-const appConfigSidebarHeader = _appConfig;
-const sidebarHeader = tv({ extend: tv(theme), ...appConfigSidebarHeader.b24ui?.sidebarHeader || {} });
+<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>
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-defineSlots();
-const b24ui = sidebarHeader();
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarHeaderProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarHeaderSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = sidebarHeader()
 </script>
 
 <template>

package/dist/runtime/components/SidebarHeading.vue

@@ -1,29 +1,38 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/sidebar-heading";
-import { tv } from "../utils/tv";
-const appConfigSidebarHeading = _appConfig;
-const sidebarHeading = tv({ extend: tv(theme), ...appConfigSidebarHeading.b24ui?.sidebarHeading || {} });
+<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>
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "h6"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-defineSlots();
-const b24ui = sidebarHeading();
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarHeadingProps>(), {
+  as: 'h6'
+})
+defineSlots<SidebarHeadingSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = sidebarHeading()
 </script>
 
 <template>

package/dist/runtime/components/SidebarLayout.vue

@@ -1,57 +1,87 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/sidebar-layout";
-import { tv } from "../utils/tv";
-const appConfigSidebarLayout = _appConfig;
-const sidebarLayout = tv({ extend: tv(theme), ...appConfigSidebarLayout.b24ui?.sidebarLayout || {} });
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/sidebar-layout'
+import { tv } from '../utils/tv'
+import { useRoute } from 'vue-router'
+
+const appConfigSidebarLayout = _appConfig as AppConfig & { b24ui: { sidebarLayout: Partial<typeof theme> } }
+
+const sidebarLayout = tv({ extend: tv(theme), ...(appConfigSidebarLayout.b24ui?.sidebarLayout || {}) })
+
+export interface SidebarLayoutProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  useLightContent?: boolean
+  class?: any
+  b24ui?: Partial<typeof sidebarLayout.slots>
+}
+
+export interface SidebarLayoutSlots {
+  /**
+   * Menu for all screen sizes.
+   * @param props
+   * @param props.handleClick - Handler for navigation click events
+   */
+  sidebar(props: { handleClick: () => void }): any
+  /**
+   * Menu for mobile screen sizes.
+   */
+  navbar(props?: {}): any
+  /**
+   * The page content.
+   */
+  default(props?: {}): any
+}
 </script>
 
-<script setup>
-import { ref, computed, watch, onUnmounted } from "vue";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  useLightContent: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-const slots = defineSlots();
-const route = useRoute();
-const isUseSideBar = computed(() => !!slots.sidebar);
-const openSidebarSlideover = ref(false);
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } 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 route = useRoute()
+const isUseSideBar = computed(() => !!slots.sidebar)
+const openSidebarSlideover = ref(false)
+
 const b24ui = computed(() => sidebarLayout({
   useSidebar: isUseSideBar.value,
   useLightContent: Boolean(props.useLightContent)
-}));
+}))
+
 const closeModal = () => {
   if (openSidebarSlideover.value) {
-    openSidebarSlideover.value = false;
+    openSidebarSlideover.value = false
   }
-};
+}
+
 const stopWatcher = watch(
   () => route.path,
   () => closeModal(),
   { immediate: true }
-);
+)
+
 onUnmounted(() => {
-  stopWatcher();
-});
+  stopWatcher()
+})
+
 const handleNavigationClick = () => {
-  closeModal();
-};
+  closeModal()
+}
 </script>
 
 <template>

package/dist/runtime/components/SidebarSection.vue

@@ -1,29 +1,38 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/sidebar-section";
-import { tv } from "../utils/tv";
-const appConfigSidebarSection = _appConfig;
-const sidebarSection = tv({ extend: tv(theme), ...appConfigSidebarSection.b24ui?.sidebarSection || {} });
+<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>
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-defineSlots();
-const b24ui = sidebarSection();
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<SidebarSectionProps>(), {
+  as: 'div'
+})
+defineSlots<SidebarSectionSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = sidebarSection()
 </script>
 
 <template>