@bitrix24/b24ui-nuxt 0.6.0 → 0.6.1

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

@@ -1,629 +1,9 @@
 import type { InputHTMLAttributes } from 'vue';
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { PartialString } from '../types/utils';
-declare const input: import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: {
-            root: string;
-            base: string;
-        };
-        vertical: {
-            root: string;
-            base: string;
-        };
-    };
-    noSplit: {
-        false: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: 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;
-    };
-    leading: {
-        true: string;
-    };
-    trailing: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    highlight: {
-        true: string;
-    };
-    type: {
-        file: string;
-    };
-}, {
-    root: string;
-    base: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailing: string;
-    trailingIcon: string;
-    tag: string;
-}, undefined, {
-    buttonGroup: {
-        horizontal: {
-            root: string;
-            base: string;
-        };
-        vertical: {
-            root: string;
-            base: string;
-        };
-    };
-    noSplit: {
-        false: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: 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;
-    };
-    leading: {
-        true: string;
-    };
-    trailing: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    highlight: {
-        true: string;
-    };
-    type: {
-        file: string;
-    };
-}, {
-    root: string;
-    base: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailing: string;
-    trailingIcon: string;
-    tag: string;
-}, import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: {
-            root: string;
-            base: string;
-        };
-        vertical: {
-            root: string;
-            base: string;
-        };
-    };
-    noSplit: {
-        false: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: 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;
-    };
-    leading: {
-        true: string;
-    };
-    trailing: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    highlight: {
-        true: string;
-    };
-    type: {
-        file: string;
-    };
-}, {
-    root: string;
-    base: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailing: string;
-    trailingIcon: string;
-    tag: string;
-}, undefined, {
-    buttonGroup: {
-        horizontal: {
-            root: string;
-            base: string;
-        };
-        vertical: {
-            root: string;
-            base: string;
-        };
-    };
-    noSplit: {
-        false: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: 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;
-    };
-    leading: {
-        true: string;
-    };
-    trailing: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    highlight: {
-        true: string;
-    };
-    type: {
-        file: string;
-    };
-}, {
-    root: string;
-    base: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailing: string;
-    trailingIcon: string;
-    tag: string;
-}, import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: {
-            root: string;
-            base: string;
-        };
-        vertical: {
-            root: string;
-            base: string;
-        };
-    };
-    noSplit: {
-        false: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            leading: string;
-            trailing: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: 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;
-    };
-    leading: {
-        true: string;
-    };
-    trailing: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    highlight: {
-        true: string;
-    };
-    type: {
-        file: string;
-    };
-}, {
-    root: string;
-    base: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailing: string;
-    trailingIcon: string;
-    tag: string;
-}, undefined, unknown, unknown, undefined>>>;
-type InputVariants = VariantProps<typeof input>;
+import type { ComponentConfig } from '../types/utils';
+type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
 export interface InputProps extends UseComponentIconsProps {
     /**
      * The element or component this component should render as.
@@ -643,11 +23,11 @@ export interface InputProps extends UseComponentIconsProps {
     /**
      * @defaultValue 'primary'
      */
-    color?: InputVariants['color'];
+    color?: Input['variants']['color'];
     /**
      * @defaultValue 'md'
      */
-    size?: InputVariants['size'];
+    size?: Input['variants']['size'];
     /**
      * Removes padding from input
      * @defaultValue false
@@ -692,14 +72,14 @@ export interface InputProps extends UseComponentIconsProps {
     /**
      * @defaultValue 'primary'
      */
-    tagColor?: InputVariants['tagColor'];
+    tagColor?: Input['variants']['tagColor'];
     /**
      * Highlight the ring color like a focus state
      * @defaultValue false
      */
     highlight?: boolean;
     class?: any;
-    b24ui?: PartialString<typeof input.slots>;
+    b24ui?: Input['slots'];
 }
 export interface InputEmits {
     (e: 'update:modelValue', payload: string | number): void;

package/dist/runtime/components/InputMenu.vue

@@ -1,9 +1,5 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/input-menu";
-import { tv } from "../utils/tv";
-const appConfigInputMenu = _appConfig;
-const inputMenu = tv({ extend: tv(theme), ...appConfigInputMenu.b24ui?.inputMenu || {} });
 </script>
 
 <script setup>
@@ -12,11 +8,13 @@ import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTri
 import { defu } from "defu";
 import { isEqual } from "ohash/utils";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { compare, get, isArrayOfArray } from "../utils";
+import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Avatar from "./Avatar.vue";
 import B24Chip from "./Chip.vue";
@@ -71,6 +69,7 @@ const emits = defineEmits(["update:open", "change", "blur", "focus", "create", "
 const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
+const appConfig = useAppConfig();
 const { contains } = useFilter({ sensitivity: "base" });
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover", "ignoreFilter"), emits);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
@@ -83,7 +82,7 @@ const isTag = computed(() => {
   return props.tag;
 });
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
-const b24ui = computed(() => inputMenu({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.inputMenu || {} })({
   color: color.value,
   size: inputSize?.value,
   loading: props.loading,