@bitrix24/b24ui-nuxt 0.6.0 → 0.6.2

package/dist/runtime/components/Separator.vue

@@ -1,15 +1,13 @@
 <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>
 
 <script setup>
 import { computed } from "vue";
 import { Separator, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 const props = defineProps({
   as: { type: null, required: false },
@@ -21,12 +19,13 @@ const props = defineProps({
   type: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false },
+  b24ui: { type: null, required: false },
   decorative: { type: Boolean, required: false }
 });
 const slots = defineSlots();
+const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
-const b24ui = computed(() => separator({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.separator || {} })({
   color: props.color,
   orientation: props.orientation,
   size: props.size,

package/dist/runtime/components/Separator.vue.d.ts

@@ -1,333 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
+import { Separator } from 'reka-ui';
 import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/separator';
 import type { AvatarProps, IconComponent } from '../types';
-declare const separator: import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            border: string;
-        };
-        danger: {
-            border: string;
-        };
-        success: {
-            border: string;
-        };
-        warning: {
-            border: string;
-        };
-        primary: {
-            border: string;
-        };
-        secondary: {
-            border: string;
-        };
-        collab: {
-            border: string;
-        };
-        ai: {
-            border: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            border: string;
-            container: string;
-        };
-        vertical: {
-            root: string;
-            border: string;
-            container: string;
-        };
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    type: {
-        solid: {
-            border: string;
-        };
-        dashed: {
-            border: string;
-        };
-        dotted: {
-            border: string;
-        };
-    };
-}, {
-    root: string;
-    border: string;
-    container: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-}, undefined, {
-    color: {
-        default: {
-            border: string;
-        };
-        danger: {
-            border: string;
-        };
-        success: {
-            border: string;
-        };
-        warning: {
-            border: string;
-        };
-        primary: {
-            border: string;
-        };
-        secondary: {
-            border: string;
-        };
-        collab: {
-            border: string;
-        };
-        ai: {
-            border: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            border: string;
-            container: string;
-        };
-        vertical: {
-            root: string;
-            border: string;
-            container: string;
-        };
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    type: {
-        solid: {
-            border: string;
-        };
-        dashed: {
-            border: string;
-        };
-        dotted: {
-            border: string;
-        };
-    };
-}, {
-    root: string;
-    border: string;
-    container: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            border: string;
-        };
-        danger: {
-            border: string;
-        };
-        success: {
-            border: string;
-        };
-        warning: {
-            border: string;
-        };
-        primary: {
-            border: string;
-        };
-        secondary: {
-            border: string;
-        };
-        collab: {
-            border: string;
-        };
-        ai: {
-            border: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            border: string;
-            container: string;
-        };
-        vertical: {
-            root: string;
-            border: string;
-            container: string;
-        };
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    type: {
-        solid: {
-            border: string;
-        };
-        dashed: {
-            border: string;
-        };
-        dotted: {
-            border: string;
-        };
-    };
-}, {
-    root: string;
-    border: string;
-    container: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-}, undefined, {
-    color: {
-        default: {
-            border: string;
-        };
-        danger: {
-            border: string;
-        };
-        success: {
-            border: string;
-        };
-        warning: {
-            border: string;
-        };
-        primary: {
-            border: string;
-        };
-        secondary: {
-            border: string;
-        };
-        collab: {
-            border: string;
-        };
-        ai: {
-            border: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            border: string;
-            container: string;
-        };
-        vertical: {
-            root: string;
-            border: string;
-            container: string;
-        };
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    type: {
-        solid: {
-            border: string;
-        };
-        dashed: {
-            border: string;
-        };
-        dotted: {
-            border: string;
-        };
-    };
-}, {
-    root: string;
-    border: string;
-    container: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            border: string;
-        };
-        danger: {
-            border: string;
-        };
-        success: {
-            border: string;
-        };
-        warning: {
-            border: string;
-        };
-        primary: {
-            border: string;
-        };
-        secondary: {
-            border: string;
-        };
-        collab: {
-            border: string;
-        };
-        ai: {
-            border: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            border: string;
-            container: string;
-        };
-        vertical: {
-            root: string;
-            border: string;
-            container: string;
-        };
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    type: {
-        solid: {
-            border: string;
-        };
-        dashed: {
-            border: string;
-        };
-        dotted: {
-            border: string;
-        };
-    };
-}, {
-    root: string;
-    border: string;
-    container: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-}, undefined, unknown, unknown, undefined>>>;
-type SeparatorVariants = VariantProps<typeof separator>;
+import type { ComponentConfig } from '../types/utils';
+type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>;
 export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     /**
      * The element or component this component should render as.
@@ -348,22 +25,22 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     /**
      * @defaultValue 'default'
      */
-    color?: SeparatorVariants['color'];
+    color?: Separator['variants']['color'];
     /**
      * @defaultValue 'xs'
      */
-    size?: SeparatorVariants['size'];
+    size?: Separator['variants']['size'];
     /**
      * @defaultValue 'solid'
      */
-    type?: SeparatorVariants['type'];
+    type?: Separator['variants']['type'];
     /**
      * The orientation of the separator.
      * @defaultValue 'horizontal'
      */
     orientation?: _SeparatorProps['orientation'];
     class?: any;
-    b24ui?: Partial<typeof separator.slots>;
+    b24ui?: Separator['slots'];
 }
 export interface SeparatorSlots {
     default(props?: {}): any;

package/dist/runtime/components/Sidebar.vue

@@ -1,20 +1,20 @@
 <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>
 
 <script setup>
+import { computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false, default: "div" },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false }
+  b24ui: { type: null, required: false }
 });
 defineSlots();
-const b24ui = sidebar();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebar || {} })());
 </script>
 
 <template>

package/dist/runtime/components/Sidebar.vue.d.ts

@@ -1,62 +1,7 @@
-declare const sidebar: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-}, import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
-    root: string;
-}, undefined, unknown, unknown, undefined>>>;
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/sidebar';
+import type { ComponentConfig } from '../types/utils';
+type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
 export interface SidebarProps {
     /**
      * The element or component this component should render as.
@@ -64,7 +9,7 @@ export interface SidebarProps {
      */
     as?: any;
     class?: any;
-    b24ui?: Partial<typeof sidebar.slots>;
+    b24ui?: Sidebar['slots'];
 }
 export interface SidebarSlots {
     default(props?: {}): any;

package/dist/runtime/components/SidebarBody.vue

@@ -1,22 +1,21 @@
 <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>
 
 <script setup>
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
 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 }
+  b24ui: { type: null, required: false }
 });
 defineSlots();
-const b24ui = computed(() => sidebarBody({
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarBody || {} })({
   scrollbarThin: Boolean(props.scrollbarThin)
 }));
 </script>

package/dist/runtime/components/SidebarBody.vue.d.ts

@@ -1,44 +1,7 @@
-declare const sidebarBody: import("tailwind-variants").TVReturnType<{
-    scrollbarThin: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-}, undefined, {
-    scrollbarThin: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-}, import("tailwind-variants").TVReturnType<{
-    scrollbarThin: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-}, undefined, {
-    scrollbarThin: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-}, import("tailwind-variants").TVReturnType<{
-    scrollbarThin: {
-        true: {
-            root: string;
-        };
-    };
-}, {
-    root: string;
-}, undefined, unknown, unknown, undefined>>>;
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/sidebar-body';
+import type { ComponentConfig } from '../types/utils';
+type SidebarBody = ComponentConfig<typeof theme, AppConfig, 'sidebarBody'>;
 export interface SidebarBodyProps {
     /**
      * The element or component this component should render as.
@@ -50,7 +13,7 @@ export interface SidebarBodyProps {
      */
     scrollbarThin?: boolean;
     class?: any;
-    b24ui?: Partial<typeof sidebarBody.slots>;
+    b24ui?: SidebarBody['slots'];
 }
 export interface SidebarBodySlots {
     default(props?: {}): any;

package/dist/runtime/components/SidebarFooter.vue

@@ -1,20 +1,20 @@
 <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>
 
 <script setup>
+import { computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false, default: "div" },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false }
+  b24ui: { type: null, required: false }
 });
 defineSlots();
-const b24ui = sidebarFooter();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarFooter || {} })());
 </script>
 
 <template>

package/dist/runtime/components/SidebarFooter.vue.d.ts

@@ -1,62 +1,7 @@
-declare const sidebarFooter: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-}, import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
-    root: string;
-}, undefined, unknown, unknown, undefined>>>;
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/sidebar-footer';
+import type { ComponentConfig } from '../types/utils';
+type SidebarFooter = ComponentConfig<typeof theme, AppConfig, 'sidebarFooter'>;
 export interface SidebarFooterProps {
     /**
      * The element or component this component should render as.
@@ -64,7 +9,7 @@ export interface SidebarFooterProps {
      */
     as?: any;
     class?: any;
-    b24ui?: Partial<typeof sidebarFooter.slots>;
+    b24ui?: SidebarFooter['slots'];
 }
 export interface SidebarFooterSlots {
     default(props?: {}): any;