@bitrix24/b24ui-nuxt 0.4.0 → 0.4.1

package/dist/runtime/components/Switch.vue

@@ -20,18 +20,34 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SwitchVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: SwitchVariants['size']
-  /** When `true`, the loading icon will be displayed. */
+  /**
+   * When `true`, the loading icon will be displayed
+   * @defaultValue false
+   */
   loading?: boolean
   /**
    * The icon when the `loading` prop is `true`.
    * @defaultValue icons.refresh
+   * @IconComponent
    */
   loadingIcon?: IconComponent
-  /** Display an icon when the switch is checked. */
+  /**
+   * Display an icon when the switch is checked.
+   * @IconComponent
+   */
   checkedIcon?: IconComponent
-  /** Display an icon when the switch is unchecked. */
+  /**
+   * Display an icon when the switch is unchecked.
+   * @IconComponent
+   */
   uncheckedIcon?: IconComponent
   label?: string
   description?: string

package/dist/runtime/components/Tabs.vue

@@ -14,6 +14,9 @@ const tabs = tv({ extend: tv(theme), ...(appConfigTabs.b24ui?.tabs || {}) })
 
 export interface TabsItem {
   label?: string
+  /**
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
   slot?: string
@@ -32,8 +35,17 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    */
   as?: any
   items?: T[]
+  /**
+   * @defaultValue 'default'
+   */
   color?: TabsVariants['color']
+  /**
+   * @defaultValue 'link'
+   */
   variant?: TabsVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TabsVariants['size']
   /**
    * The orientation of the tabs.

package/dist/runtime/components/Textarea.vue

@@ -20,27 +20,71 @@ export interface TextareaProps {
   as?: any
   id?: string
   name?: string
-  /** The placeholder text when the textarea is empty. */
+  /**
+   * The placeholder text when the textarea is empty
+   */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TextareaVariants['color']
-  /** Removes padding from input. */
+  /**
+   * Removes padding from input
+   * @defaultValue false
+   */
   noPadding?: boolean
-  /** removes all borders (rings). */
+  /**
+   * Removes all borders (rings)
+   * @defaultValue false
+   */
   noBorder?: boolean
-  /** removes all borders (rings) except the bottom one. */
+  /**
+   * Removes all borders (rings) except the bottom one
+   * @defaultValue false
+   */
   underline?: boolean
-  /** Rounds the corners of the button. */
+  /**
+   * Rounds the corners of the button
+   * @defaultValue false
+   */
   rounded?: boolean
+  /**
+   * @defaultValue false
+   */
   required?: boolean
+  /**
+   * @defaultValue false
+   */
   autofocus?: boolean
+  /**
+   * @defaultValue 0
+   */
   autofocusDelay?: number
+  /**
+   * @defaultValue false
+   */
   disabled?: boolean
+  /**
+   * @defaultValue 3
+   */
   rows?: number
+  /**
+   * @defaultValue 5
+   */
   maxrows?: number
+  /**
+   * @defaultValue false
+   */
   autoresize?: boolean
   tag?: string
+  /**
+   * @defaultValue 'primary'
+   */
   tagColor?: TextareaVariants['tagColor']
-  /** Highlight the ring color like a focus state. */
+  /**
+   * Highlight the ring color like a focus state
+   * @defaultValue false
+   */
   highlight?: boolean
   class?: any
   b24ui?: PartialString<typeof textarea.slots>

package/dist/runtime/components/Toast.vue

@@ -22,26 +22,37 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   as?: any
   title?: StringOrVNode
   description?: StringOrVNode
+  /**
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'default'
+   */
   color?: ToastVariants['color']
+  /**
+   * The orientation between the content and the actions
+   * @defaultValue 'vertical'
+   */
   orientation?: ToastVariants['orientation']
   /**
    * Display a list of actions:
    * - under the title and description when orientation is `vertical`
    * - next to the close button when orientation is `horizontal`
-   * `{ size: 'xs' }`{lang="ts-type"}
+   * `{ size: 'xs' }`{lang="ts"}
    */
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the toast.
-   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
    * @defaultValue true
    */
   close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
+   * @IconComponent
    */
   closeIcon?: IconComponent
   class?: any

package/dist/runtime/components/Toaster.vue

@@ -13,6 +13,10 @@ const toaster = tv({ extend: tv(theme), ...(appConfigToaster.b24ui?.toaster || {
 type ToasterVariants = VariantProps<typeof toaster>
 
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
+  /**
+   * The position on the screen to display the toasts.
+   * @defaultValue 'top-right'
+   */
   position?: ToasterVariants['position']
   /**
    * Expand the toasts to show multiple toasts at once.
@@ -24,6 +28,10 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
    * @defaultValue true
    */
   portal?: boolean
+  /**
+   * @defaultValue 5000
+   */
+  duration?: number
   class?: any
   b24ui?: Partial<typeof toaster.slots>
 }

package/dist/runtime/components/{prose → content}/TableWrapper.vue

@@ -2,12 +2,12 @@
 import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/prose/table-wrapper'
+import theme from '#build/b24ui/content/table-wrapper'
 import { tv } from '../../utils/tv'
 
-const appConfigTableWrapper = _appConfig as AppConfig & { b24ui: { prose: { tableWrapper: Partial<typeof theme> } } }
+const appConfigTableWrapper = _appConfig as AppConfig & { b24ui: { content: { tableWrapper: Partial<typeof theme> } } }
 
-const tableWrapper = tv({ extend: tv(theme), ...(appConfigTableWrapper.b24ui?.prose?.tableWrapper || {}) })
+const tableWrapper = tv({ extend: tv(theme), ...(appConfigTableWrapper.b24ui?.content?.tableWrapper || {}) })
 
 type TableWrapperVariants = VariantProps<typeof tableWrapper>
 
@@ -17,13 +17,37 @@ export interface TableWrapperProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: TableWrapperVariants['size']
+  /**
+   * @defaultValue false
+   */
   rounded?: boolean
+  /**
+   * @defaultValue false
+   */
   zebra?: boolean
+  /**
+   * @defaultValue false
+   */
   pinRows?: boolean
+  /**
+   * @defaultValue false
+   */
   pinCols?: boolean
+  /**
+   * @defaultValue false
+   */
   rowHover?: boolean
+  /**
+   * @defaultValue false
+   */
   bordered?: boolean
+  /**
+   * @defaultValue true
+   */
   scrollbarThin?: boolean
   class?: any
   b24ui?: Partial<typeof tableWrapper.slots>

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -1,7 +1,11 @@
 import { type MaybeRefOrGetter } from 'vue';
 import type { AvatarProps, IconComponent } from '../types';
 export interface UseComponentIconsProps {
-    /** Display an icon on the left side. */
+    /**
+     * Display an icon on the left side.
+     * @defaultValue icons.loading
+     * @IconComponent
+     */
     icon?: IconComponent;
     /** Display an avatar on the left side. */
     avatar?: AvatarProps;
@@ -9,12 +13,15 @@ export interface UseComponentIconsProps {
     loading?: boolean;
     /** When `true`, the icon will be displayed on the right side. */
     trailing?: boolean;
-    /** Display an icon on the right side. */
+    /**
+     * Display an icon on the right side.
+     * @IconComponent
+     */
     trailingIcon?: IconComponent;
 }
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<any>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<IconComponent | undefined>;
-    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
+    trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
 };

package/dist/runtime/index.css

@@ -1 +1 @@
-@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased scheme-light dark:scheme-dark}.scrollbar-thin{scrollbar-width:thin}}
+@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}}@layer theme{:host,:root{--spacing:.25rem}}

package/dist/runtime/prose/ProseH1.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/prose-h1'
+import { tv } from '../utils/tv'
+
+const appConfigProseH1 = _appConfig as AppConfig & { b24ui: { prose: { h1: Partial<typeof theme> } } }
+
+const proseH1 = tv({ extend: tv(theme), ...(appConfigProseH1.b24ui?.prose?.h1 || {}) })
+
+export interface proseH1Props {
+  class?: any
+  b24ui?: Partial<typeof proseH1.slots>
+}
+
+export interface proseH1Slots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<proseH1Props>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseH1({})
+</script>
+
+<template>
+  <h1
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </h1>
+</template>

package/dist/runtime/prose/ProseH2.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/prose-h2'
+import { tv } from '../utils/tv'
+
+const appConfigProseH2 = _appConfig as AppConfig & { b24ui: { prose: { h2: Partial<typeof theme> } } }
+
+const proseH2 = tv({ extend: tv(theme), ...(appConfigProseH2.b24ui?.prose?.h2 || {}) })
+
+export interface proseH2Props {
+  class?: any
+  b24ui?: Partial<typeof proseH2.slots>
+}
+
+export interface proseH2Slots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<proseH2Props>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseH2({})
+</script>
+
+<template>
+  <h2
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </h2>
+</template>

package/dist/runtime/prose/ProseH3.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/prose-h3'
+import { tv } from '../utils/tv'
+
+const appConfigProseH3 = _appConfig as AppConfig & { b24ui: { prose: { h3: Partial<typeof theme> } } }
+
+const proseH3 = tv({ extend: tv(theme), ...(appConfigProseH3.b24ui?.prose?.h3 || {}) })
+
+export interface proseH3Props {
+  class?: any
+  b24ui?: Partial<typeof proseH3.slots>
+}
+
+export interface proseH3Slots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<proseH3Props>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseH3({})
+</script>
+
+<template>
+  <h3
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </h3>
+</template>

package/dist/runtime/prose/ProseLi.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/prose-li'
+import { tv } from '../utils/tv'
+
+const appConfigProseLi = _appConfig as AppConfig & { b24ui: { prose: { li: Partial<typeof theme> } } }
+
+const proseLi = tv({ extend: tv(theme), ...(appConfigProseLi.b24ui?.prose?.li || {}) })
+
+export interface proseLiProps {
+  class?: any
+  b24ui?: Partial<typeof proseLi.slots>
+}
+
+export interface proseLiSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<proseLiProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseLi({})
+</script>
+
+<template>
+  <li
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </li>
+</template>

package/dist/runtime/prose/ProseOl.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/prose-ol'
+import { tv } from '../utils/tv'
+
+const appConfigProseOl = _appConfig as AppConfig & { b24ui: { prose: { ol: Partial<typeof theme> } } }
+
+const proseOl = tv({ extend: tv(theme), ...(appConfigProseOl.b24ui?.prose?.ol || {}) })
+
+export interface proseOlProps {
+  class?: any
+  b24ui?: Partial<typeof proseOl.slots>
+}
+
+export interface proseOlSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<proseOlProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseOl({})
+</script>
+
+<template>
+  <ol
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </ol>
+</template>

package/dist/runtime/prose/ProseP.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/prose-p'
+import { tv } from '../utils/tv'
+
+const appConfigProseP = _appConfig as AppConfig & { b24ui: { prose: { p: Partial<typeof theme> } } }
+
+const proseP = tv({ extend: tv(theme), ...(appConfigProseP.b24ui?.prose?.p || {}) })
+
+export interface prosePProps {
+  class?: any
+  b24ui?: Partial<typeof proseP.slots>
+}
+
+export interface prosePSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<prosePProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseP({})
+</script>
+
+<template>
+  <p
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </p>
+</template>

package/dist/runtime/prose/ProseUl.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/prose-ul'
+import { tv } from '../utils/tv'
+
+const appConfigProseUl = _appConfig as AppConfig & { b24ui: { prose: { ul: Partial<typeof theme> } } }
+
+const proseUl = tv({ extend: tv(theme), ...(appConfigProseUl.b24ui?.prose?.ul || {}) })
+
+export interface proseUlProps {
+  class?: any
+  b24ui?: Partial<typeof proseUl.slots>
+}
+
+export interface proseUlSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<proseUlProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseUl({})
+</script>
+
+<template>
+  <ul
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </ul>
+</template>

package/dist/runtime/types/index.d.ts

@@ -10,6 +10,7 @@ export * from '../components/Checkbox.vue';
 export * from '../components/Chip.vue';
 export * from '../components/Container.vue';
 export * from '../components/Countdown.vue';
+export * from '../components/DescriptionList.vue';
 export * from '../components/DropdownMenu.vue';
 export * from '../components/Form.vue';
 export * from '../components/FormField.vue';
@@ -34,8 +35,14 @@ export * from '../components/Textarea.vue';
 export * from '../components/Toast.vue';
 export * from '../components/Toaster.vue';
 export * from '../components/Tooltip.vue';
-export * from '../components/content/DescriptionList.vue';
-export * from '../components/prose/TableWrapper.vue';
+export * from '../components/content/TableWrapper.vue';
+export * from '../prose/ProseH1.vue';
+export * from '../prose/ProseH2.vue';
+export * from '../prose/ProseH3.vue';
+export * from '../prose/ProseLi.vue';
+export * from '../prose/ProseOl.vue';
+export * from '../prose/ProseP.vue';
+export * from '../prose/ProseUl.vue';
 export * from './form';
 export * from './icons';
 export * from './locale';

package/dist/runtime/types/index.js

@@ -10,6 +10,7 @@ export * from "../components/Checkbox.vue";
 export * from "../components/Chip.vue";
 export * from "../components/Container.vue";
 export * from "../components/Countdown.vue";
+export * from "../components/DescriptionList.vue";
 export * from "../components/DropdownMenu.vue";
 export * from "../components/Form.vue";
 export * from "../components/FormField.vue";
@@ -34,8 +35,14 @@ export * from "../components/Textarea.vue";
 export * from "../components/Toast.vue";
 export * from "../components/Toaster.vue";
 export * from "../components/Tooltip.vue";
-export * from "../components/content/DescriptionList.vue";
-export * from "../components/prose/TableWrapper.vue";
+export * from "../components/content/TableWrapper.vue";
+export * from "../prose/ProseH1.vue";
+export * from "../prose/ProseH2.vue";
+export * from "../prose/ProseH3.vue";
+export * from "../prose/ProseLi.vue";
+export * from "../prose/ProseOl.vue";
+export * from "../prose/ProseP.vue";
+export * from "../prose/ProseUl.vue";
 export * from "./form.js";
 export * from "./icons.js";
 export * from "./locale.js";

package/dist/runtime/utils/index.js

@@ -1,4 +1,4 @@
-import { isEqual } from "ohash";
+import { isEqual } from "ohash/utils";
 export function pick(data, keys) {
   const result = {};
   for (const key of keys) {

package/dist/runtime/vue/components/Link.vue

@@ -93,7 +93,7 @@ export interface LinkSlots {
 
 <script setup lang="ts">
 import { computed, getCurrentInstance } from 'vue'
-import { isEqual, diff } from 'ohash'
+import { isEqual, diff } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { hasProtocol } from 'ufo'
@@ -144,11 +144,15 @@ const b24ui = computed(() => tv({
 function isPartiallyEqual(item1: any, item2: any) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
     if (q.type === 'added') {
-      filtered.push(q.key)
+      filtered.add(q.key)
     }
     return filtered
-  }, [] as string[])
-  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+  }, new Set<string>())
+
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
+
+  return isEqual(item1Filtered, item2Filtered)
 }
 
 const isExternal = computed(() => {