@bitrix24/b24ui-nuxt 0.6.1 → 0.6.2

package/dist/runtime/inertia/components/Link.vue

@@ -0,0 +1,153 @@
+<script>
+import theme from "#build/b24ui/link";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { defu } from "defu";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+import { usePage, Link as InertiaLink } from "@inertiajs/vue3";
+import { hasProtocol } from "ufo";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+import B24LinkBase from "./../../components/LinkBase.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  type: { type: null, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  exact: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false, default: "" },
+  custom: { type: Boolean, required: false },
+  isAction: { type: Boolean, required: false, default: false },
+  raw: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  activeClass: { type: String, required: false, default: "" },
+  to: { type: String, required: false },
+  href: { type: String, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  ariaCurrentValue: { type: String, required: false },
+  data: { type: Object, required: false },
+  method: { type: String, required: false },
+  headers: { type: Object, required: false },
+  onClick: { type: Function, required: false },
+  preserveScroll: { type: [Boolean, String, Function], required: false },
+  preserveState: { type: [Boolean, String, Function], required: false },
+  replace: { type: Boolean, required: false },
+  only: { type: Array, required: false },
+  except: { type: Array, required: false },
+  onCancelToken: { type: Function, required: false },
+  onBefore: { type: Function, required: false },
+  onStart: { type: Function, required: false },
+  onProgress: { type: Function, required: false },
+  onFinish: { type: Function, required: false },
+  onCancel: { type: Function, required: false },
+  onSuccess: { type: Function, required: false },
+  onError: { type: Function, required: false },
+  queryStringArrayFormat: { type: String, required: false },
+  async: { type: Boolean, required: false },
+  prefetch: { type: [Boolean, String, Array], required: false },
+  cacheFor: { type: [Number, String, Array], required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "activeClass", "inactiveClass", "to", "raw", "class"));
+const b24ui = computed(() => tv({
+  extend: tv(theme),
+  ...defu({
+    variants: {
+      active: {
+        true: props.activeClass,
+        false: props.inactiveClass
+      }
+    }
+  }, appConfig.b24ui?.link || {})
+}));
+const isExternal = computed(() => {
+  if (!props.to) return false;
+  return typeof props.to === "string" && hasProtocol(props.to, { acceptRelative: true });
+});
+const linkClass = computed(() => {
+  const active = isActive.value;
+  if (props.raw) {
+    return [props.class, active ? props.activeClass : props.inactiveClass];
+  }
+  return b24ui.value({
+    class: props.class,
+    active,
+    disabled: props.disabled,
+    isAction: Boolean(props.isAction)
+  });
+});
+const page = usePage();
+const url = computed(() => props.to ?? props.href ?? "#");
+const isActive = computed(() => props.active || (props.exact ? url.value === props.href : page?.url.startsWith(url.value)));
+</script>
+
+<template>
+  <template v-if="!isExternal">
+    <InertiaLink v-bind="routerLinkProps" :href="url" custom>
+      <template v-if="custom">
+        <slot
+          v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href: url,
+  active: isActive
+}"
+        />
+      </template>
+      <B24LinkBase
+        v-else
+        v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href: url,
+  active: isActive
+}"
+        :class="linkClass"
+      >
+        <slot :active="isActive" />
+      </B24LinkBase>
+    </InertiaLink>
+  </template>
+
+  <template v-else>
+    <template v-if="custom">
+      <slot
+        v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href: to,
+  target: isExternal ? '_blank' : void 0,
+  active: isActive
+}"
+      />
+    </template>
+    <B24LinkBase
+      v-else
+      v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href: url,
+  target: isExternal ? '_blank' : void 0,
+  active: isActive
+}"
+      :is-external="isExternal"
+      :class="linkClass"
+    >
+      <slot :active="isActive" />
+    </B24LinkBase>
+  </template>
+</template>

package/dist/runtime/inertia/components/Link.vue.d.ts

@@ -0,0 +1,97 @@
+import type { ButtonHTMLAttributes } from 'vue';
+import type { InertiaLinkProps } from '@inertiajs/vue3';
+interface NuxtLinkProps extends Omit<InertiaLinkProps, 'href'> {
+    activeClass?: string;
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: string;
+    /**
+     * An alias for `to`. If used with `to`, `href` will be ignored
+     */
+    href?: NuxtLinkProps['to'];
+    /**
+     * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+     */
+    external?: boolean;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
+    ariaCurrentValue?: string;
+}
+export interface LinkProps extends NuxtLinkProps {
+    /**
+     * The element or component this component should render as when not a link.
+     * @defaultValue 'button'
+     */
+    as?: any;
+    /**
+     * The type of the button when not a link.
+     * @defaultValue 'button'
+     */
+    type?: ButtonHTMLAttributes['type'];
+    disabled?: boolean;
+    /** Force the link to be active independent of the current route. */
+    active?: boolean;
+    /** Will only be active if the current route is an exact match. */
+    exact?: boolean;
+    /** The class to apply when the link is inactive. */
+    inactiveClass?: string;
+    custom?: boolean;
+    /** When `true`, uses special underlined styling. */
+    isAction?: boolean;
+    /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+    raw?: boolean;
+    class?: any;
+}
+export interface LinkSlots {
+    default(props: {
+        active: boolean;
+    }): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LinkProps>, {
+    as: string;
+    type: string;
+    active: undefined;
+    isAction: boolean;
+    activeClass: string;
+    inactiveClass: string;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LinkProps>, {
+    as: string;
+    type: string;
+    active: undefined;
+    isAction: boolean;
+    activeClass: string;
+    inactiveClass: string;
+}>>> & Readonly<{}>, {
+    as: any;
+    type: "reset" | "submit" | "button";
+    activeClass: string;
+    active: boolean;
+    inactiveClass: string;
+    isAction: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<LinkSlots> & LinkSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/inertia/stubs.d.ts

@@ -0,0 +1,45 @@
+import type { Ref } from 'vue';
+import type { NuxtApp } from '#app';
+export { useHead } from '@unhead/vue';
+export { defineShortcuts } from '../composables/defineShortcuts';
+export { defineLocale } from '../composables/defineLocale';
+export { useLocale } from '../composables/useLocale';
+export { useConfetti } from '../composables/useConfetti';
+export { useOverlay } from '../composables/useOverlay';
+export declare const useRoute: () => {
+    fullPath: string;
+};
+export declare const useRouter: () => void;
+export declare const useColorMode: () => {
+    forced: boolean;
+    preference?: undefined;
+    readonly value?: undefined;
+} | {
+    preference: "light" | "dark" | "system";
+    readonly value: import("@vueuse/core").BasicColorMode;
+    forced: boolean;
+};
+export declare const useAppConfig: () => any;
+export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
+    value: Ref<T, T>;
+    get: () => T;
+    set: () => void;
+    update: () => void;
+    refresh: () => Promise<Awaited<T>>;
+    remove: () => void;
+};
+export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
+export declare function useNuxtApp(): {
+    isHydrating: boolean;
+    payload: {
+        serverRendered: boolean;
+    };
+    hooks: import("hookable").Hookable<Record<string, any>, string>;
+    hook: <NameT extends string>(name: NameT, function_: any, options?: {
+        allowDeprecated?: boolean;
+    }) => () => void;
+};
+export declare function useRuntimeHook(name: string, fn: (...args: any[]) => void): void;
+export declare function defineNuxtPlugin(plugin: (nuxtApp: NuxtApp) => void): {
+    install(app: import("vue").App<any>): void;
+};

package/dist/runtime/inertia/stubs.js

@@ -0,0 +1,84 @@
+import { ref, onScopeDispose } from "vue";
+import { createHooks } from "hookable";
+import appConfig from "#build/app.config";
+import { useColorMode as useColorModeVueUse } from "@vueuse/core";
+import { usePage } from "@inertiajs/vue3";
+export { useHead } from "@unhead/vue";
+export { defineShortcuts } from "../composables/defineShortcuts.js";
+export { defineLocale } from "../composables/defineLocale.js";
+export { useLocale } from "../composables/useLocale.js";
+export { useConfetti } from "../composables/useConfetti.js";
+export { useOverlay } from "../composables/useOverlay.js";
+export const useRoute = () => {
+  const page = usePage();
+  return {
+    fullPath: page.url
+  };
+};
+export const useRouter = () => {
+};
+export const useColorMode = () => {
+  if (!appConfig.colorMode) {
+    return {
+      forced: true
+    };
+  }
+  const { store, system } = useColorModeVueUse();
+  return {
+    get preference() {
+      return store.value === "auto" ? "system" : store.value;
+    },
+    set preference(value) {
+      store.value = value === "system" ? "auto" : value;
+    },
+    get value() {
+      return store.value === "auto" ? system.value : store.value;
+    },
+    forced: false
+  };
+};
+export const useAppConfig = () => appConfig;
+export const useCookie = (_name, _options = {}) => {
+  const value = ref(null);
+  return {
+    value,
+    get: () => value.value,
+    set: () => {
+    },
+    update: () => {
+    },
+    refresh: () => Promise.resolve(value.value),
+    remove: () => {
+    }
+  };
+};
+const state = {};
+export const useState = (key, init) => {
+  if (state[key]) {
+    return state[key];
+  }
+  const value = ref(init());
+  state[key] = value;
+  return value;
+};
+const hooks = createHooks();
+export function useNuxtApp() {
+  return {
+    isHydrating: true,
+    payload: { serverRendered: false },
+    hooks,
+    hook: hooks.hook
+  };
+}
+export function useRuntimeHook(name, fn) {
+  const nuxtApp = useNuxtApp();
+  const unregister = nuxtApp.hook(name, fn);
+  onScopeDispose(unregister);
+}
+export function defineNuxtPlugin(plugin) {
+  return {
+    install(app) {
+      app.runWithContext(() => plugin({ vueApp: app }));
+    }
+  };
+}

package/dist/runtime/types/utils.d.ts

@@ -9,14 +9,15 @@ export type DeepPartial<T, O = any> = {
 } & {
     [key: string]: O | TightMap<O>;
 };
+export type DynamicSlotsKeys<Name extends string | undefined, Suffix extends string | undefined = undefined> = (Name extends string ? Suffix extends string ? Name | `${Name}-${Suffix}` : Name : never);
 export type DynamicSlots<T extends {
     slot?: string;
-}, S extends string | undefined = undefined, D extends object = {}> = {
-    [K in T['slot'] as K extends string ? S extends string ? (K | `${K}-${S}`) : K : never]?: (props: {
+}, Suffix extends string | undefined = undefined, ExtraProps extends object = {}> = {
+    [K in DynamicSlotsKeys<T['slot'], Suffix>]: (props: {
         item: Extract<T, {
-            slot: K extends `${infer Base}-${S}` ? Base : K;
+            slot: K extends `${infer Base}-${Suffix}` ? Base : K;
         }>;
-    } & D) => any;
+    } & ExtraProps) => any;
 };
 export type GetObjectField<MaybeObject, Key extends string> = MaybeObject extends Record<string, any> ? MaybeObject[Key] : never;
 export type AcceptableValue = Exclude<_AcceptableValue, Record<string, any>>;

package/dist/runtime/vue/components/Link.vue

@@ -9,8 +9,8 @@ import { isEqual, diff } from "ohash/utils";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { hasProtocol } from "ufo";
-import { useRoute, useAppConfig } from "#imports";
-import { RouterLink } from "vue-router";
+import { useRoute, RouterLink } from "vue-router";
+import { useAppConfig } from "#imports";
 import { tv } from "../../utils/tv";
 import B24LinkBase from "./../../components/LinkBase.vue";
 defineOptions({ inheritAttrs: false });

package/dist/runtime/vue/stubs.d.ts

@@ -12,7 +12,7 @@ export declare const useColorMode: () => {
     preference?: undefined;
     readonly value?: undefined;
 } | {
-    preference: "dark" | "light" | "system";
+    preference: "light" | "dark" | "system";
     readonly value: import("@vueuse/core").BasicColorMode;
     forced: boolean;
 };

package/dist/unplugin.d.mts

@@ -25,6 +25,10 @@ interface Bitrix24UIOptions extends Omit<ModuleOptions, 'colorMode'> {
      * Override options for `unplugin-vue-components`
      */
     components?: Partial<Options$1>;
+    /**
+     * Enables compatibility layer for InertiaJS
+     */
+    inertia?: boolean;
 }
 declare const runtimeDir: string;
 declare const Bitrix24UIPlugin: unplugin.UnpluginInstance<Bitrix24UIOptions | undefined, boolean>;

package/dist/unplugin.mjs

@@ -107,6 +107,8 @@ function ComponentImportPlugin(options, meta) {
   const componentNames = new Set(components.map((c) => `B24${c.replace(/\.vue$/, "")}`));
   const componentsContent = globSync("**/*.vue", { cwd: join(runtimeDir, "components/content") });
   const componentContentNames = new Set(componentsContent.map((c) => `B24${c.replace(/\.vue$/, "")}`));
+  const inertiaOverrides = globSync("**/*.vue", { cwd: join(runtimeDir, "inertia/components") });
+  const inertiaOverrideNames = new Set(inertiaOverrides.map((c) => `B24${c.replace(/\.vue$/, "")}`));
   const componentsProse = globSync("**/*.vue", { cwd: join(runtimeDir, "prose") });
   const componentProseNames = new Set(componentsProse.map((c) => `Prose${c.replace(/\.vue$/, "")}`));
   const overrides = globSync("**/*.vue", { cwd: join(runtimeDir, "vue/components") });
@@ -120,6 +122,9 @@ function ComponentImportPlugin(options, meta) {
     ],
     resolvers: [
       (componentName) => {
+        if (options.inertia && inertiaOverrideNames.has(componentName)) {
+          return { name: "default", from: join(runtimeDir, "inertia/components", `${componentName.slice("B24".length)}.vue`) };
+        }
         if (overrideNames.has(componentName))
           return { name: "default", from: join(runtimeDir, "vue/components", `${componentName.slice("B24".length)}.vue`) };
         if (componentProseNames.has(componentName))
@@ -147,6 +152,9 @@ function ComponentImportPlugin(options, meta) {
           return;
         }
         const filename = id.match(/([^/]+)\.vue$/)?.[1];
+        if (filename && options.inertia && inertiaOverrideNames.has(`B24${filename}`)) {
+          return join(runtimeDir, "inertia/components", `${filename}.vue`);
+        }
         if (filename && overrideNames.has(`B24${filename}`)) {
           return join(runtimeDir, "vue/components", `${filename}.vue`);
         }
@@ -157,8 +165,8 @@ function ComponentImportPlugin(options, meta) {
 }
 const RELATIVE_IMPORT_RE = /^\.{1,2}\//;
 
-function Bitrix24EnvironmentPlugin() {
-  const stubPath = resolvePathSync("../runtime/vue/stubs", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url });
+function Bitrix24EnvironmentPlugin(options) {
+  const stubPath = resolvePathSync(options.inertia ? "../runtime/inertia/stubs" : "../runtime/vue/stubs", { extensions: [".ts", ".mjs", ".js"], url: import.meta.url });
   return {
     name: "bitrix24:b24ui",
     enforce: "pre",
@@ -198,7 +206,7 @@ const Bitrix24UIPlugin = createUnplugin((_options = {}, meta) => {
   const options = defu(_options, {}, defaultOptions);
   const appConfig = defu({ b24ui: options.b24ui, colorMode: options.colorMode }, { b24ui: getDefaultUiConfig() });
   return [
-    Bitrix24EnvironmentPlugin(),
+    Bitrix24EnvironmentPlugin(options),
     ComponentImportPlugin(options, meta),
     AutoImportPlugin(options, meta),
     tailwind(),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
   "description": "Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"
@@ -102,14 +102,14 @@
   "dependencies": {
     "@bitrix24/b24icons-vue": "^1.0.5",
     "@bitrix24/b24style": "^1.0.1",
-    "@internationalized/date": "^3.7.0",
-    "@internationalized/number": "^3.6.0",
+    "@internationalized/date": "^3.8.0",
+    "@internationalized/number": "^3.6.1",
     "@nuxt/kit": "^3.16.2",
     "@nuxt/schema": "^3.16.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.3",
-    "@tailwindcss/vite": "^4.1.3",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.4",
     "@tanstack/vue-table": "^8.21.2",
     "@unhead/vue": "^2.0.3",
     "@vueuse/core": "^13.0.0",
@@ -135,14 +135,12 @@
     "reka-ui": "^2.2.0",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.3",
+    "tailwindcss": "^4.1.4",
     "tinyglobby": "^0.2.12",
-    "unplugin": "^2.3.0",
+    "unplugin": "^2.3.2",
     "unplugin-auto-import": "^19.1.2",
-    "unplugin-vue-components": "^28.4.1",
-    "vaul-vue": "^0.4.1",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "unplugin-vue-components": "^28.5.0",
+    "vaul-vue": "^0.4.1"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^1.3.0",
@@ -161,14 +159,19 @@
     "vue-tsc": "^2.2.0"
   },
   "peerDependencies": {
+    "@inertiajs/vue3": "^2.0.7",
     "joi": "^17.13.0",
     "superstruct": "^2.0.0",
     "typescript": "^5.6.3",
     "valibot": "^1.0.0",
+    "vue-router": "^4.5.0",
     "yup": "^1.6.0",
     "zod": "^3.24.0"
   },
   "peerDependenciesMeta": {
+    "@inertiajs/vue3": {
+      "optional": true
+    },
     "joi": {
       "optional": true
     },
@@ -178,6 +181,9 @@
     "superstruct": {
       "optional": true
     },
+    "vue-router": {
+      "optional": true
+    },
     "yup": {
       "optional": true
     },
@@ -190,7 +196,7 @@
     "chokidar": "3.6.0",
     "debug": "4.3.7",
     "rollup": "4.34.9",
-    "unplugin": "^2.3.0",
+    "unplugin": "^2.3.2",
     "vue-tsc": "2.2.0"
   },
   "keywords": [