@bitrix24/b24ui-nuxt 0.6.0 → 0.6.2

package/dist/runtime/components/InputNumber.vue

@@ -1,17 +1,15 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/input-number";
-import { tv } from "../utils/tv";
-const appConfigInputNumber = _appConfig;
-const inputNumber = tv({ extend: tv(theme), ...appConfigInputNumber.b24ui?.inputNumber || {} });
 </script>
 
 <script setup>
 import { onMounted, ref, computed } from "vue";
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
 defineOptions({ inheritAttrs: false });
@@ -52,6 +50,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
+const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { t, code: codeLocale } = useLocale();
@@ -59,7 +58,7 @@ const locale = computed(() => props.locale || codeLocale.value);
 const isTag = computed(() => {
   return props.tag;
 });
-const b24ui = computed(() => inputNumber({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.inputNumber || {} })({
   color: color.value,
   size: size.value,
   tagColor: props.tagColor,

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

@@ -1,429 +1,9 @@
-import type { VariantProps } from 'tailwind-variants';
 import type { NumberFieldRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/input-number';
 import type { ButtonProps, IconComponent } from '../types';
-import type { PartialString } from '../types/utils';
-declare const inputNumber: import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    tagColor: {
-        default: {
-            tag: string;
-        };
-        danger: {
-            tag: string;
-        };
-        success: {
-            tag: string;
-        };
-        warning: {
-            tag: string;
-        };
-        primary: {
-            tag: string;
-        };
-        secondary: {
-            tag: string;
-        };
-        collab: {
-            tag: string;
-        };
-        ai: {
-            tag: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    noPadding: {
-        true: {
-            base: string;
-        };
-    };
-    noBorder: {
-        true: string;
-    };
-    underline: {
-        true: string;
-    };
-    disabled: {
-        true: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-            increment: string;
-            decrement: string;
-        };
-        vertical: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    highlight: {
-        true: string;
-    };
-}, {
-    root: string;
-    base: string;
-    increment: string;
-    decrement: string;
-    tag: string;
-}, undefined, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    tagColor: {
-        default: {
-            tag: string;
-        };
-        danger: {
-            tag: string;
-        };
-        success: {
-            tag: string;
-        };
-        warning: {
-            tag: string;
-        };
-        primary: {
-            tag: string;
-        };
-        secondary: {
-            tag: string;
-        };
-        collab: {
-            tag: string;
-        };
-        ai: {
-            tag: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    noPadding: {
-        true: {
-            base: string;
-        };
-    };
-    noBorder: {
-        true: string;
-    };
-    underline: {
-        true: string;
-    };
-    disabled: {
-        true: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-            increment: string;
-            decrement: string;
-        };
-        vertical: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    highlight: {
-        true: string;
-    };
-}, {
-    root: string;
-    base: string;
-    increment: string;
-    decrement: string;
-    tag: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    tagColor: {
-        default: {
-            tag: string;
-        };
-        danger: {
-            tag: string;
-        };
-        success: {
-            tag: string;
-        };
-        warning: {
-            tag: string;
-        };
-        primary: {
-            tag: string;
-        };
-        secondary: {
-            tag: string;
-        };
-        collab: {
-            tag: string;
-        };
-        ai: {
-            tag: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    noPadding: {
-        true: {
-            base: string;
-        };
-    };
-    noBorder: {
-        true: string;
-    };
-    underline: {
-        true: string;
-    };
-    disabled: {
-        true: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-            increment: string;
-            decrement: string;
-        };
-        vertical: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    highlight: {
-        true: string;
-    };
-}, {
-    root: string;
-    base: string;
-    increment: string;
-    decrement: string;
-    tag: string;
-}, undefined, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    tagColor: {
-        default: {
-            tag: string;
-        };
-        danger: {
-            tag: string;
-        };
-        success: {
-            tag: string;
-        };
-        warning: {
-            tag: string;
-        };
-        primary: {
-            tag: string;
-        };
-        secondary: {
-            tag: string;
-        };
-        collab: {
-            tag: string;
-        };
-        ai: {
-            tag: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    noPadding: {
-        true: {
-            base: string;
-        };
-    };
-    noBorder: {
-        true: string;
-    };
-    underline: {
-        true: string;
-    };
-    disabled: {
-        true: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-            increment: string;
-            decrement: string;
-        };
-        vertical: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    highlight: {
-        true: string;
-    };
-}, {
-    root: string;
-    base: string;
-    increment: string;
-    decrement: string;
-    tag: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    tagColor: {
-        default: {
-            tag: string;
-        };
-        danger: {
-            tag: string;
-        };
-        success: {
-            tag: string;
-        };
-        warning: {
-            tag: string;
-        };
-        primary: {
-            tag: string;
-        };
-        secondary: {
-            tag: string;
-        };
-        collab: {
-            tag: string;
-        };
-        ai: {
-            tag: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    noPadding: {
-        true: {
-            base: string;
-        };
-    };
-    noBorder: {
-        true: string;
-    };
-    underline: {
-        true: string;
-    };
-    disabled: {
-        true: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-            increment: string;
-            decrement: string;
-        };
-        vertical: {
-            increment: string;
-            decrement: string;
-        };
-    };
-    highlight: {
-        true: string;
-    };
-}, {
-    root: string;
-    base: string;
-    increment: string;
-    decrement: string;
-    tag: string;
-}, undefined, unknown, unknown, undefined>>>;
-type InputNumberVariants = VariantProps<typeof inputNumber>;
+import type { ComponentConfig } from '../types/utils';
+type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>;
 export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'stepSnapping' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange'> {
     /**
      * The element or component this component should render as.
@@ -437,11 +17,11 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     /**
      * @defaultValue 'primary'
      */
-    color?: InputNumberVariants['color'];
+    color?: InputNumber['variants']['color'];
     /**
      * @defaultValue 'md'
      */
-    size?: InputNumberVariants['size'];
+    size?: InputNumber['variants']['size'];
     /**
      * Removes padding from input
      * @defaultValue false
@@ -466,7 +46,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     /**
      * @defaultValue 'primary'
      */
-    tagColor?: InputNumberVariants['tagColor'];
+    tagColor?: InputNumber['variants']['tagColor'];
     /**
      * Highlight the ring color like a focus state
      * @defaultValue false
@@ -513,7 +93,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      */
     locale?: string;
     class?: any;
-    b24ui?: PartialString<typeof inputNumber.slots>;
+    b24ui?: InputNumber['slots'];
 }
 export interface InputNumberEmits {
     (e: 'update:modelValue', payload: number): void;
@@ -629,9 +209,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         };
     }) | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    size: "md" | "xs" | "sm" | "lg";
+    size: InputNumber["variants"]["size"];
     orientation: "vertical" | "horizontal";
-    color: "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai";
+    color: InputNumber["variants"]["color"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<InputNumberSlots> & InputNumberSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/dist/runtime/components/Kbd.vue

@@ -1,14 +1,13 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/kbd";
-import { tv } from "../utils/tv";
-const appConfigKbd = _appConfig;
-const kbd = tv({ extend: tv(theme), ...appConfigKbd.b24ui?.kbd || {} });
 </script>
 
 <script setup>
+import { computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useKbd } from "../composables/useKbd";
+import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false, default: "kbd" },
   value: { type: null, required: false },
@@ -18,10 +17,12 @@ const props = defineProps({
 });
 defineSlots();
 const { getKbdKey } = useKbd();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.kbd || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="kbd({ depth, size, class: props.class })">
+  <Primitive :as="as" :class="b24ui({ depth, size, class: props.class })">
     <slot>
       {{ getKbdKey(value) }}
     </slot>

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

@@ -1,62 +1,8 @@
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/kbd';
 import type { KbdKey } from '../composables/useKbd';
-declare const kbd: import("tailwind-variants").TVReturnType<{
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string, {
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string, {
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string, unknown, unknown, undefined>>>;
-type KbdVariants = VariantProps<typeof kbd>;
+import type { ComponentConfig } from '../types/utils';
+type Kbd = ComponentConfig<typeof theme, AppConfig, 'kbd'>;
 export interface KbdProps {
     /**
      * The element or component this component should render as.
@@ -67,11 +13,11 @@ export interface KbdProps {
     /**
      * @defaultValue 'light'
      */
-    depth?: KbdVariants['depth'];
+    depth?: Kbd['variants']['depth'];
     /**
      * @defaultValue 'md'
      */
-    size?: KbdVariants['size'];
+    size?: Kbd['variants']['size'];
     class?: any;
 }
 export interface KbdSlots {

package/dist/runtime/components/Link.vue

@@ -1,17 +1,15 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/link";
-import { tv } from "../utils/tv";
-const appConfigLink = _appConfig;
-const link = tv({ extend: tv(theme), ...appConfigLink.b24ui?.link || {} });
 </script>
 
 <script setup>
 import { computed } from "vue";
+import { defu } from "defu";
 import { isEqual, diff } from "ohash/utils";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
-import { useRoute } from "#imports";
+import { useRoute, useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
 import B24LinkBase from "./LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -45,15 +43,18 @@ const props = defineProps({
 });
 defineSlots();
 const route = useRoute();
+const appConfig = useAppConfig();
 const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "raw", "class"));
 const b24ui = computed(() => tv({
-  extend: link,
-  variants: {
-    active: {
-      true: props.activeClass,
-      false: props.inactiveClass
+  extend: tv(theme),
+  ...defu({
+    variants: {
+      active: {
+        true: props.activeClass,
+        false: props.inactiveClass
+      }
     }
-  }
+  }, appConfig.b24ui?.link || {})
 }));
 function isPartiallyEqual(item1, item2) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {

package/dist/runtime/components/Modal.vue

@@ -1,16 +1,14 @@
 <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>
 
 <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(() => modal({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.modal || {} })({
   transition: props.transition,
   fullscreen: props.fullscreen,
   overlayBlur: props.overlayBlur