@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Modal.vue

@@ -1,118 +1,140 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/modal";
-import { tv } from "../utils/tv";
-const appConfigModal = _appConfig;
-const modal = tv({ extend: tv(theme), ...appConfigModal.b24ui?.modal || {} });
+<script lang="ts">
+import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/modal'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+import type { EmitsToProps } from '../types/utils'
+
+const appConfigModal = _appConfig as AppConfig & { b24ui: { modal: Partial<typeof theme> } }
+
+const modal = tv({ extend: tv(theme), ...(appConfigModal.b24ui?.modal || {}) })
+
+type ModalVariants = VariantProps<typeof modal>
+
+export interface ModalProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /**
+   * The content of the modal
+   */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
+  /**
+   * Render an overlay behind the modal.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Render an overlay blur behind the modal.
+   * `auto` use `motion-safe`.
+   * @defaultValue 'auto'
+   */
+  overlayBlur?: ModalVariants['overlayBlur']
+  /**
+   * Animate the modal when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  /**
+   * When `true`, the modal will take up the full screen.
+   * @defaultValue false
+   */
+  fullscreen?: boolean
+  /**
+   * Render the modal in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the modal.
+   * `{ size: 'xs', color: 'link' }`{lang="ts"}
+   * @defaultValue true
+   */
+  close?: boolean | Partial<ButtonProps>
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   * @IconComponent
+   */
+  closeIcon?: IconComponent
+  /**
+   * When `false`, the modal will not close when clicking outside or pressing escape.
+   * @defaultValue false
+   */
+  dismissible?: boolean
+  /**
+   * @defaultValue true
+   */
+  scrollbarThin?: boolean
+  class?: any
+  b24ui?: Partial<typeof modal.slots>
+}
+
+export interface ModalEmits extends DialogRootEmits {
+  'after:leave': []
+}
+
+export interface ModalSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { b24ui: ReturnType<typeof modal> }): 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
-  },
-  fullscreen: {
-    type: Boolean,
-    required: false
-  },
-  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<ModalProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true,
+  dismissible: true,
+  scrollbarThin: true,
+  overlayBlur: 'auto'
+})
+const emits = defineEmits<ModalEmits>()
+const slots = defineSlots<ModalSlots>()
+
+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(() => modal({
   transition: props.transition,
   fullscreen: props.fullscreen,
   overlayBlur: props.overlayBlur
-}));
+}))
 </script>
 
 <template>
@@ -125,7 +147,7 @@ const b24ui = computed(() => modal({
       <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
 
       <DialogContent :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 }}
@@ -164,7 +186,7 @@ const b24ui = computed(() => modal({
                     size="xs"
                     color="link"
                     :aria-label="t('modal.close')"
-                    v-bind="typeof close === 'object' ? close : {}"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
                     :class="b24ui.close({ class: props.b24ui?.close })"
                   />
                 </slot>

package/dist/runtime/components/ModalDialogClose.vue

@@ -1,9 +1,13 @@
-<script>
-
+<script lang="ts">
+export interface ModalDialogCloseSlots {
+  default(props: {}): any
+}
 </script>
 
-<script setup>
-defineSlots();
+<script setup lang="ts">
+import { DialogClose } from 'reka-ui'
+
+defineSlots<ModalDialogCloseSlots>()
 </script>
 
 <template>

package/dist/runtime/components/Navbar.vue

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

package/dist/runtime/components/NavbarDivider.vue

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

package/dist/runtime/components/NavbarSection.vue

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

package/dist/runtime/components/NavbarSpacer.vue

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