@bitrix24/b24ui-nuxt 0.6.0 → 0.6.2

package/dist/runtime/components/Slideover.vue

@@ -1,16 +1,14 @@
 <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>
 
 <script setup>
 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 { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
 const props = defineProps({
@@ -27,7 +25,7 @@ const props = defineProps({
   dismissible: { type: Boolean, required: false, default: true },
   scrollbarThin: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false },
+  b24ui: { type: null, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
@@ -35,6 +33,7 @@ const props = defineProps({
 const emits = defineEmits(["after:leave", "update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
+const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
@@ -51,7 +50,7 @@ const contentEvents = computed(() => {
   }
   return events;
 });
-const b24ui = computed(() => slideover({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideover || {} })({
   transition: props.transition,
   side: props.side,
   overlayBlur: props.overlayBlur

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

@@ -1,244 +1,9 @@
-import type { VariantProps } from 'tailwind-variants';
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/slideover';
 import type { ButtonProps, IconComponent } from '../types';
-import type { EmitsToProps } from '../types/utils';
-declare const slideover: import("tailwind-variants").TVReturnType<{
-    overlayBlur: {
-        auto: {
-            overlay: string;
-        };
-        on: {
-            overlay: string;
-        };
-        off: {
-            overlay: string;
-        };
-    };
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
-    transition: {
-        true: {
-            overlay: string;
-        };
-    };
-    scrollbarThin: {
-        true: {
-            body: string;
-        };
-    };
-}, {
-    overlay: string;
-    content: string;
-    header: string;
-    wrapper: string;
-    body: string;
-    footer: string;
-    title: string;
-    description: string;
-    close: string;
-    safeList: string;
-}, undefined, {
-    overlayBlur: {
-        auto: {
-            overlay: string;
-        };
-        on: {
-            overlay: string;
-        };
-        off: {
-            overlay: string;
-        };
-    };
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
-    transition: {
-        true: {
-            overlay: string;
-        };
-    };
-    scrollbarThin: {
-        true: {
-            body: string;
-        };
-    };
-}, {
-    overlay: string;
-    content: string;
-    header: string;
-    wrapper: string;
-    body: string;
-    footer: string;
-    title: string;
-    description: string;
-    close: string;
-    safeList: string;
-}, import("tailwind-variants").TVReturnType<{
-    overlayBlur: {
-        auto: {
-            overlay: string;
-        };
-        on: {
-            overlay: string;
-        };
-        off: {
-            overlay: string;
-        };
-    };
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
-    transition: {
-        true: {
-            overlay: string;
-        };
-    };
-    scrollbarThin: {
-        true: {
-            body: string;
-        };
-    };
-}, {
-    overlay: string;
-    content: string;
-    header: string;
-    wrapper: string;
-    body: string;
-    footer: string;
-    title: string;
-    description: string;
-    close: string;
-    safeList: string;
-}, undefined, {
-    overlayBlur: {
-        auto: {
-            overlay: string;
-        };
-        on: {
-            overlay: string;
-        };
-        off: {
-            overlay: string;
-        };
-    };
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
-    transition: {
-        true: {
-            overlay: string;
-        };
-    };
-    scrollbarThin: {
-        true: {
-            body: string;
-        };
-    };
-}, {
-    overlay: string;
-    content: string;
-    header: string;
-    wrapper: string;
-    body: string;
-    footer: string;
-    title: string;
-    description: string;
-    close: string;
-    safeList: string;
-}, import("tailwind-variants").TVReturnType<{
-    overlayBlur: {
-        auto: {
-            overlay: string;
-        };
-        on: {
-            overlay: string;
-        };
-        off: {
-            overlay: string;
-        };
-    };
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
-    transition: {
-        true: {
-            overlay: string;
-        };
-    };
-    scrollbarThin: {
-        true: {
-            body: string;
-        };
-    };
-}, {
-    overlay: string;
-    content: string;
-    header: string;
-    wrapper: string;
-    body: string;
-    footer: string;
-    title: string;
-    description: string;
-    close: string;
-    safeList: string;
-}, undefined, unknown, unknown, undefined>>>;
-type SlideoverVariants = VariantProps<typeof slideover>;
+import type { EmitsToProps, ComponentConfig } from '../types/utils';
+type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
 export interface SlideoverProps extends DialogRootProps {
     title?: string;
     description?: string;
@@ -256,7 +21,7 @@ export interface SlideoverProps extends DialogRootProps {
      * `auto` use `motion-safe`.
      * @defaultValue 'auto'
      */
-    overlayBlur?: SlideoverVariants['overlayBlur'];
+    overlayBlur?: Slideover['variants']['overlayBlur'];
     /**
      * Animate the slideover when opening or closing.
      * @defaultValue true
@@ -266,7 +31,7 @@ export interface SlideoverProps extends DialogRootProps {
      * The side of the slideover.
      * @defaultValue 'right'
      */
-    side?: SlideoverVariants['side'];
+    side?: Slideover['variants']['side'];
     /**
      * Render the slideover in a portal.
      * @defaultValue true
@@ -295,7 +60,7 @@ export interface SlideoverProps extends DialogRootProps {
      */
     scrollbarThin?: boolean;
     class?: any;
-    b24ui?: Partial<typeof slideover.slots>;
+    b24ui?: Slideover['slots'];
 }
 export interface SlideoverEmits extends DialogRootEmits {
     'after:leave': [];
@@ -309,7 +74,9 @@ export interface SlideoverSlots {
     title(props?: {}): any;
     description(props?: {}): any;
     close(props: {
-        b24ui: ReturnType<typeof slideover>;
+        b24ui: {
+            [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string;
+        };
     }): any;
     body(props?: {}): any;
     footer(props?: {}): any;
@@ -325,15 +92,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     scrollbarThin: boolean;
     overlayBlur: string;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    modal: boolean;
     close: boolean | Partial<ButtonProps>;
+    modal: boolean;
+    transition: boolean;
     portal: boolean;
     overlay: boolean;
-    side: "right" | "left" | "top" | "bottom";
-    overlayBlur: "off" | "auto" | "on";
-    transition: boolean;
-    scrollbarThin: boolean;
+    side: Slideover["variants"]["side"];
+    overlayBlur: Slideover["variants"]["overlayBlur"];
     dismissible: boolean;
+    scrollbarThin: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<SlideoverSlots> & SlideoverSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/dist/runtime/components/StackedLayout.vue

@@ -1,15 +1,13 @@
 <script>
-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;
-const stackedLayout = tv({ extend: tv(theme), ...appConfigStackedLayout.b24ui?.stackedLayout || {} });
 </script>
 
 <script setup>
 import { ref, computed, watch, onUnmounted } from "vue";
+import { useRoute } from "vue-router";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
 import B24Slideover from "./Slideover.vue";
 import B24Sidebar from "./Sidebar.vue";
 import B24ModalDialogClose from "./ModalDialogClose.vue";
@@ -20,13 +18,14 @@ 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 }
+  b24ui: { type: null, required: false }
 });
 const slots = defineSlots();
+const appConfig = useAppConfig();
 const route = useRoute();
 const isUseSideBar = computed(() => !!slots.sidebar);
 const openSidebarSlideover = ref(false);
-const b24ui = computed(() => stackedLayout({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.stackedLayout || {} })({
   useSidebar: isUseSideBar.value,
   useLightContent: Boolean(props.useLightContent)
 }));

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

@@ -1,134 +1,7 @@
-declare const stackedLayout: import("tailwind-variants").TVReturnType<{
-    useSidebar: {
-        true: string;
-        false: string;
-    };
-    useLightContent: {
-        true: {
-            root: string;
-            containerWrapper: string;
-        };
-        false: {
-            container: string;
-        };
-    };
-}, {
-    root: string;
-    sidebarSlideoverContainer: string;
-    sidebarSlideover: string;
-    sidebarSlideoverBtnClose: string;
-    header: string;
-    headerMenuIcon: string;
-    headerPaddings: string;
-    headerWrapper: string;
-    container: string;
-    containerWrapper: string;
-    containerWrapperInner: string;
-}, undefined, {
-    useSidebar: {
-        true: string;
-        false: string;
-    };
-    useLightContent: {
-        true: {
-            root: string;
-            containerWrapper: string;
-        };
-        false: {
-            container: string;
-        };
-    };
-}, {
-    root: string;
-    sidebarSlideoverContainer: string;
-    sidebarSlideover: string;
-    sidebarSlideoverBtnClose: string;
-    header: string;
-    headerMenuIcon: string;
-    headerPaddings: string;
-    headerWrapper: string;
-    container: string;
-    containerWrapper: string;
-    containerWrapperInner: string;
-}, import("tailwind-variants").TVReturnType<{
-    useSidebar: {
-        true: string;
-        false: string;
-    };
-    useLightContent: {
-        true: {
-            root: string;
-            containerWrapper: string;
-        };
-        false: {
-            container: string;
-        };
-    };
-}, {
-    root: string;
-    sidebarSlideoverContainer: string;
-    sidebarSlideover: string;
-    sidebarSlideoverBtnClose: string;
-    header: string;
-    headerMenuIcon: string;
-    headerPaddings: string;
-    headerWrapper: string;
-    container: string;
-    containerWrapper: string;
-    containerWrapperInner: string;
-}, undefined, {
-    useSidebar: {
-        true: string;
-        false: string;
-    };
-    useLightContent: {
-        true: {
-            root: string;
-            containerWrapper: string;
-        };
-        false: {
-            container: string;
-        };
-    };
-}, {
-    root: string;
-    sidebarSlideoverContainer: string;
-    sidebarSlideover: string;
-    sidebarSlideoverBtnClose: string;
-    header: string;
-    headerMenuIcon: string;
-    headerPaddings: string;
-    headerWrapper: string;
-    container: string;
-    containerWrapper: string;
-    containerWrapperInner: string;
-}, import("tailwind-variants").TVReturnType<{
-    useSidebar: {
-        true: string;
-        false: string;
-    };
-    useLightContent: {
-        true: {
-            root: string;
-            containerWrapper: string;
-        };
-        false: {
-            container: string;
-        };
-    };
-}, {
-    root: string;
-    sidebarSlideoverContainer: string;
-    sidebarSlideover: string;
-    sidebarSlideoverBtnClose: string;
-    header: string;
-    headerMenuIcon: string;
-    headerPaddings: string;
-    headerWrapper: string;
-    container: string;
-    containerWrapper: string;
-    containerWrapperInner: string;
-}, undefined, unknown, unknown, undefined>>>;
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/stacked-layout';
+import type { ComponentConfig } from '../types/utils';
+type StackedLayout = ComponentConfig<typeof theme, AppConfig, 'stackedLayout'>;
 export interface StackedLayoutProps {
     /**
      * The element or component this component should render as.
@@ -137,7 +10,7 @@ export interface StackedLayoutProps {
     as?: any;
     useLightContent?: boolean;
     class?: any;
-    b24ui?: Partial<typeof stackedLayout.slots>;
+    b24ui?: StackedLayout['slots'];
 }
 export interface StackedLayoutSlots {
     /**

package/dist/runtime/components/Switch.vue

@@ -1,16 +1,14 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/switch";
-import { tv } from "../utils/tv";
-const appConfigSwitch = _appConfig;
-const switchTv = tv({ extend: tv(theme), ...appConfigSwitch.b24ui?.switch || {} });
 </script>
 
 <script setup>
 import { computed, useId } from "vue";
 import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
+import { tv } from "../utils/tv";
 import { omit } from "../utils";
 import icons from "../dictionary/icons";
 defineOptions({ inheritAttrs: false });
@@ -36,10 +34,11 @@ const props = defineProps({
 const slots = defineSlots();
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: Boolean, ...{ default: void 0 } });
+const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const id = _id.value ?? useId();
-const b24ui = computed(() => switchTv({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.switch || {} })({
   size: size.value,
   color: color.value,
   required: props.required,