@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/SidebarSpacer.vue

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

package/dist/runtime/components/Skeleton.vue

@@ -1,22 +1,27 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/skeleton";
-import { tv } from "../utils/tv";
-const appConfigSkeleton = _appConfig;
-const skeleton = tv({ extend: tv(theme), ...appConfigSkeleton.b24ui?.skeleton || {} });
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/skeleton'
+import { tv } from '../utils/tv'
+
+const appConfigSkeleton = _appConfig as AppConfig & { b24ui: { skeleton: Partial<typeof theme> } }
+
+const skeleton = tv({ extend: tv(theme), ...(appConfigSkeleton.b24ui?.skeleton || {}) })
+
+export interface SkeletonProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+}
 </script>
 
-<script setup>
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  }
-});
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<SkeletonProps>()
 </script>
 
 <template>

package/dist/runtime/components/Slideover.vue

@@ -1,119 +1,142 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/slideover";
-import { tv } from "../utils/tv";
-const appConfigSlideover = _appConfig;
-const slideover = tv({ extend: tv(theme), ...appConfigSlideover.b24ui?.slideover || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/slideover'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+import type { EmitsToProps } from '../types/utils'
+
+const appConfigSlideover = _appConfig as AppConfig & { b24ui: { slideover: Partial<typeof theme> } }
+
+const slideover = tv({ extend: tv(theme), ...(appConfigSlideover.b24ui?.slideover || {}) })
+
+type SlideoverVariants = VariantProps<typeof slideover>
+
+export interface SlideoverProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /**
+   * The content of the slideover
+   */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
+  /**
+   * Render an overlay behind the slideover.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Render an overlay blur behind the slideover.
+   * `auto` use `motion-safe`.
+   * @defaultValue 'auto'
+   */
+  overlayBlur?: SlideoverVariants['overlayBlur']
+  /**
+   * Animate the slideover when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  /**
+   * The side of the slideover.
+   * @defaultValue 'right'
+   */
+  side?: SlideoverVariants['side']
+  /**
+   * Render the slideover in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the slideover.
+   * `{ color: 'primary' }`{lang="ts"} for `left`, `right`
+   * `{ color: 'link' }`{lang="ts"} for `top`, `bottom`
+   * @defaultValue true
+   */
+  close?: boolean | Partial<ButtonProps>
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   * @IconifyIcon
+   */
+  closeIcon?: IconComponent
+  /**
+   * When `false`, the slideover will not close when clicking outside or pressing escape.
+   * @defaultValue false
+   */
+  dismissible?: boolean
+  /**
+   * @defaultValue true
+   */
+  scrollbarThin?: boolean
+  class?: any
+  b24ui?: Partial<typeof slideover.slots>
+}
+
+export interface SlideoverEmits extends DialogRootEmits {
+  'after:leave': []
+}
+
+export interface SlideoverSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { b24ui: ReturnType<typeof slideover> }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
 </script>
 
-<script setup>
-import { computed, toRef } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { useLocale } from "../composables/useLocale";
-const props = defineProps({
-  title: {
-    type: String,
-    required: false
-  },
-  description: {
-    type: String,
-    required: false
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  overlay: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  overlayBlur: {
-    type: null,
-    required: false,
-    default: "auto"
-  },
-  transition: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  side: {
-    type: null,
-    required: false,
-    default: "right"
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  close: {
-    type: [Boolean, Object],
-    required: false,
-    default: true
-  },
-  closeIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  dismissible: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  scrollbarThin: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  modal: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-});
-const emits = defineEmits(["after:leave", "update:open"]);
-const slots = defineSlots();
-const { t } = useLocale();
-const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
-const contentProps = toRef(() => props.content);
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Button from './Button.vue'
+
+const props = withDefaults(defineProps<SlideoverProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true,
+  dismissible: true,
+  side: 'right',
+  scrollbarThin: true,
+  overlayBlur: 'auto'
+})
+const emits = defineEmits<SlideoverEmits>()
+const slots = defineSlots<SlideoverSlots>()
+
+const { t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
   const events = {
-    closeAutoFocus: (e) => e.preventDefault()
-  };
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
+
   if (!props.dismissible) {
     return {
-      pointerDownOutside: (e) => e.preventDefault(),
-      interactOutside: (e) => e.preventDefault(),
-      escapeKeyDown: (e) => e.preventDefault(),
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault(),
       ...events
-    };
+    }
   }
-  return events;
-});
+
+  return events
+})
+
 const b24ui = computed(() => slideover({
   transition: props.transition,
   side: props.side,
   overlayBlur: props.overlayBlur
-}));
+}))
 </script>
 
 <template>
@@ -126,7 +149,7 @@ const b24ui = computed(() => slideover({
       <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
 
       <DialogContent :data-side="side" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">
               {{ title }}
@@ -167,9 +190,9 @@ const b24ui = computed(() => slideover({
                     :color="['left', 'right'].includes(props?.side) ? 'primary' : 'link'"
                     :aria-label="t('slideover.close')"
                     :b24ui="{
-  leadingIcon: ['left', 'right'].includes(props?.side) ? 'group-hover:rounded-full group-hover:border-1 group-hover:border-current' : ''
-}"
-                    v-bind="typeof close === 'object' ? close : {}"
+                      leadingIcon: ['left', 'right'].includes(props?.side) ? 'group-hover:rounded-full group-hover:border-1 group-hover:border-current' : ''
+                    }"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
                     :class="b24ui.close({ class: props.b24ui?.close })"
                   />
                 </slot>

package/dist/runtime/components/StackedLayout.vue

@@ -1,57 +1,90 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/stacked-layout";
-import { tv } from "../utils/tv";
-const appConfigStackedLayout = _appConfig;
-const stackedLayout = tv({ extend: tv(theme), ...appConfigStackedLayout.b24ui?.stackedLayout || {} });
+<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/stacked-layout'
+import { tv } from '../utils/tv'
+import { useRoute } from 'vue-router'
+
+const appConfigStackedLayout = _appConfig as AppConfig & { b24ui: { stackedLayout: Partial<typeof theme> } }
+
+const stackedLayout = tv({ extend: tv(theme), ...(appConfigStackedLayout.b24ui?.stackedLayout || {}) })
+
+// type StackedLayoutVariants = VariantProps<typeof stackedLayout>
+
+export interface StackedLayoutProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  useLightContent?: boolean
+  class?: any
+  b24ui?: Partial<typeof stackedLayout.slots>
+}
+
+export interface StackedLayoutSlots {
+  /**
+   * Menu for mobile screen sizes.
+   * @param props
+   * @param props.handleClick - Handler for navigation click events
+   */
+  sidebar(props: { handleClick: () => void }): any
+  /**
+   * Menu for desktop 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<StackedLayoutProps>(), {
+  as: 'div',
+  useLightContent: true
+})
+const slots = defineSlots<StackedLayoutSlots>()
+
+const route = useRoute()
+const isUseSideBar = computed(() => !!slots.sidebar)
+const openSidebarSlideover = ref(false)
+
 const b24ui = computed(() => stackedLayout({
   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>