@bitrix24/b24ui-nuxt 0.6.0 → 0.6.1

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

@@ -1,519 +1,9 @@
-import type { VariantProps } from 'tailwind-variants';
 import type { SwitchRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/switch';
 import type { IconComponent } from '../types';
-import type { PartialString } from '../types/utils';
-declare const switchTv: import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            base: string;
-            icon: string;
-            thumb: string;
-        };
-        danger: {
-            base: string;
-            icon: string;
-        };
-        success: {
-            base: string;
-            icon: string;
-        };
-        warning: {
-            base: string;
-            icon: string;
-        };
-        primary: {
-            base: string;
-            icon: string;
-        };
-        secondary: {
-            base: string;
-            icon: string;
-        };
-        collab: {
-            base: string;
-            icon: string;
-        };
-        ai: {
-            base: string;
-            icon: string;
-        };
-    };
-    size: {
-        xs: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        sm: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        md: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        lg: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    checked: {
-        true: {
-            icon: string;
-        };
-    };
-    unchecked: {
-        true: {
-            icon: string;
-        };
-    };
-    loading: {
-        true: {
-            icon: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-    disabled: {
-        true: {
-            base: string;
-            label: string;
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-    container: string;
-    thumb: string;
-    icon: string;
-    wrapper: string;
-    label: string;
-    description: string;
-}, undefined, {
-    color: {
-        default: {
-            base: string;
-            icon: string;
-            thumb: string;
-        };
-        danger: {
-            base: string;
-            icon: string;
-        };
-        success: {
-            base: string;
-            icon: string;
-        };
-        warning: {
-            base: string;
-            icon: string;
-        };
-        primary: {
-            base: string;
-            icon: string;
-        };
-        secondary: {
-            base: string;
-            icon: string;
-        };
-        collab: {
-            base: string;
-            icon: string;
-        };
-        ai: {
-            base: string;
-            icon: string;
-        };
-    };
-    size: {
-        xs: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        sm: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        md: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        lg: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    checked: {
-        true: {
-            icon: string;
-        };
-    };
-    unchecked: {
-        true: {
-            icon: string;
-        };
-    };
-    loading: {
-        true: {
-            icon: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-    disabled: {
-        true: {
-            base: string;
-            label: string;
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-    container: string;
-    thumb: string;
-    icon: string;
-    wrapper: string;
-    label: string;
-    description: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            base: string;
-            icon: string;
-            thumb: string;
-        };
-        danger: {
-            base: string;
-            icon: string;
-        };
-        success: {
-            base: string;
-            icon: string;
-        };
-        warning: {
-            base: string;
-            icon: string;
-        };
-        primary: {
-            base: string;
-            icon: string;
-        };
-        secondary: {
-            base: string;
-            icon: string;
-        };
-        collab: {
-            base: string;
-            icon: string;
-        };
-        ai: {
-            base: string;
-            icon: string;
-        };
-    };
-    size: {
-        xs: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        sm: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        md: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        lg: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    checked: {
-        true: {
-            icon: string;
-        };
-    };
-    unchecked: {
-        true: {
-            icon: string;
-        };
-    };
-    loading: {
-        true: {
-            icon: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-    disabled: {
-        true: {
-            base: string;
-            label: string;
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-    container: string;
-    thumb: string;
-    icon: string;
-    wrapper: string;
-    label: string;
-    description: string;
-}, undefined, {
-    color: {
-        default: {
-            base: string;
-            icon: string;
-            thumb: string;
-        };
-        danger: {
-            base: string;
-            icon: string;
-        };
-        success: {
-            base: string;
-            icon: string;
-        };
-        warning: {
-            base: string;
-            icon: string;
-        };
-        primary: {
-            base: string;
-            icon: string;
-        };
-        secondary: {
-            base: string;
-            icon: string;
-        };
-        collab: {
-            base: string;
-            icon: string;
-        };
-        ai: {
-            base: string;
-            icon: string;
-        };
-    };
-    size: {
-        xs: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        sm: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        md: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        lg: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    checked: {
-        true: {
-            icon: string;
-        };
-    };
-    unchecked: {
-        true: {
-            icon: string;
-        };
-    };
-    loading: {
-        true: {
-            icon: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-    disabled: {
-        true: {
-            base: string;
-            label: string;
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-    container: string;
-    thumb: string;
-    icon: string;
-    wrapper: string;
-    label: string;
-    description: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            base: string;
-            icon: string;
-            thumb: string;
-        };
-        danger: {
-            base: string;
-            icon: string;
-        };
-        success: {
-            base: string;
-            icon: string;
-        };
-        warning: {
-            base: string;
-            icon: string;
-        };
-        primary: {
-            base: string;
-            icon: string;
-        };
-        secondary: {
-            base: string;
-            icon: string;
-        };
-        collab: {
-            base: string;
-            icon: string;
-        };
-        ai: {
-            base: string;
-            icon: string;
-        };
-    };
-    size: {
-        xs: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        sm: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        md: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-        lg: {
-            base: string;
-            container: string;
-            thumb: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    checked: {
-        true: {
-            icon: string;
-        };
-    };
-    unchecked: {
-        true: {
-            icon: string;
-        };
-    };
-    loading: {
-        true: {
-            icon: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-    disabled: {
-        true: {
-            base: string;
-            label: string;
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-    container: string;
-    thumb: string;
-    icon: string;
-    wrapper: string;
-    label: string;
-    description: string;
-}, undefined, unknown, unknown, undefined>>>;
-type SwitchVariants = VariantProps<typeof switchTv>;
+import type { ComponentConfig } from '../types/utils';
+type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
 export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
     /**
      * The element or component this component should render as.
@@ -523,11 +13,11 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
     /**
      * @defaultValue 'primary'
      */
-    color?: SwitchVariants['color'];
+    color?: Switch['variants']['color'];
     /**
      * @defaultValue 'md'
      */
-    size?: SwitchVariants['size'];
+    size?: Switch['variants']['size'];
     /**
      * When `true`, the loading icon will be displayed
      * @defaultValue false
@@ -552,7 +42,7 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
     label?: string;
     description?: string;
     class?: any;
-    b24ui?: PartialString<typeof switchTv.slots>;
+    b24ui?: Switch['slots'];
 }
 export type SwitchEmits = {
     change: [payload: Event];

package/dist/runtime/components/Tabs.vue

@@ -1,16 +1,14 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/tabs";
-import { tv } from "../utils/tv";
-const appConfigTabs = _appConfig;
-const tabs = tv({ extend: tv(theme), ...appConfigTabs.b24ui?.tabs || {} });
 </script>
 
 <script setup>
 import { computed } from "vue";
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
 import { get } from "../utils";
+import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 const props = defineProps({
   as: { type: null, required: false },
@@ -30,11 +28,12 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
+const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "activationMode", "unmountOnHide"), emits);
 const getLabel = (item) => {
   return get(item, props.labelKey);
 };
-const b24ui = computed(() => tabs({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tabs || {} })({
   color: props.color,
   variant: props.variant,
   size: props.size,
@@ -47,6 +46,8 @@ const b24ui = computed(() => tabs({
     <TabsList :class="b24ui.list({ class: props.b24ui?.list })">
       <TabsIndicator :class="b24ui.indicator({ class: props.b24ui?.indicator })" />
 
+      <slot name="list-leading" />
+
       <TabsTrigger v-for="(item, index) in items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="b24ui.trigger({ class: props.b24ui?.trigger })">
         <slot name="leading" :item="item" :index="index">
           <Component
@@ -63,6 +64,8 @@ const b24ui = computed(() => tabs({
 
         <slot name="trailing" :item="item" :index="index" />
       </TabsTrigger>
+
+      <slot name="list-trailing" />
     </TabsList>
 
     <template v-if="!!content">