@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/components/prose/Thead.vue

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/thead";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
@@ -12,11 +13,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.thead", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.thead || {} })());
 </script>
 
 <template>
-  <thead data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+  <thead data-slot="base" :class="b24ui.base({ class: [uiProp?.base, props.class] })">
     <slot />
   </thead>
 </template>

package/dist/runtime/components/prose/Thead.vue.d.ts

@@ -6,9 +6,6 @@ export interface ProseTheadProps {
     class?: any;
     b24ui?: ProseThead['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseTheadSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/prose/Tr.d.vue.ts

@@ -6,9 +6,6 @@ export interface ProseTrProps {
     class?: any;
     b24ui?: ProseTr['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseTrSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/prose/Tr.vue

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/tr";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
@@ -12,11 +13,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.tr", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.tr || {} })());
 </script>
 
 <template>
-  <tr data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+  <tr data-slot="base" :class="b24ui.base({ class: [uiProp?.base, props.class] })">
     <slot />
   </tr>
 </template>

package/dist/runtime/components/prose/Tr.vue.d.ts

@@ -6,9 +6,6 @@ export interface ProseTrProps {
     class?: any;
     b24ui?: ProseTr['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseTrSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/prose/Ul.d.vue.ts

@@ -6,9 +6,6 @@ export interface ProseUlProps {
     class?: any;
     b24ui?: ProseUl['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseUlSlots {
     default(props?: {}): any;
 }

package/dist/runtime/components/prose/Ul.vue

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/ul";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
@@ -12,11 +13,12 @@ const props = defineProps({
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.ul", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.ul || {} })());
 </script>
 
 <template>
-  <ul data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+  <ul data-slot="base" :class="b24ui.base({ class: [uiProp?.base, props.class] })">
     <slot />
   </ul>
 </template>

package/dist/runtime/components/prose/Ul.vue.d.ts

@@ -6,9 +6,6 @@ export interface ProseUlProps {
     class?: any;
     b24ui?: ProseUl['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseUlSlots {
     default(props?: {}): any;
 }

package/dist/runtime/composables/color-mode/useColorMode.d.ts

@@ -4,9 +4,15 @@
  */
 export declare const useColorMode: () => {
     forced: boolean;
+    modeKeysList?: undefined;
+    colorModeInitialValue?: undefined;
+    colorModeTypeLight?: undefined;
     preference?: undefined;
     readonly value?: undefined;
 } | {
+    modeKeysList: ("auto" | "edge-dark" | "edge-light" | "dark" | "light")[];
+    colorModeInitialValue: string;
+    colorModeTypeLight: string;
     preference: string;
     readonly value: string;
     forced: boolean;

package/dist/runtime/composables/color-mode/useColorMode.js

@@ -6,16 +6,25 @@ export const useColorMode = () => {
       forced: true
     };
   }
+  const colorModeTypeLight = appConfig?.colorModeTypeLight || "light";
+  const colorModeInitialValue = appConfig?.colorModeInitialValue || "light";
+  const modes = {
+    "auto": "auto",
+    "light": colorModeTypeLight,
+    "edge-dark": "edge-dark",
+    "edge-light": "edge-light",
+    "dark": "dark"
+  };
+  const modeKeysList = Object.keys(modes);
   const { store, system } = useColorModeVueUse({
     attribute: "class",
-    initialValue: appConfig?.colorModeTypeLight || "light",
-    modes: {
-      auto: "auto",
-      light: appConfig?.colorModeTypeLight || "light",
-      dark: "dark"
-    }
+    initialValue: colorModeInitialValue,
+    modes
   });
   return {
+    modeKeysList,
+    colorModeInitialValue,
+    colorModeTypeLight,
     get preference() {
       return store.value === "auto" ? "system" : store.value;
     },

package/dist/runtime/composables/defineShortcuts.js

@@ -95,7 +95,10 @@ export function defineShortcuts(config, options = {}) {
       if (e.ctrlKey !== shortcut.ctrlKey) {
         continue;
       }
-      if ((alphabetKey || shiftableKey || shortcut.shiftKey || e.shiftKey) && e.shiftKey !== shortcut.shiftKey) {
+      if (e.altKey !== shortcut.altKey) {
+        continue;
+      }
+      if ((alphabetKey || shiftableKey || shortcut.shiftKey || e.shiftKey && (e.metaKey || e.ctrlKey)) && e.shiftKey !== shortcut.shiftKey) {
         continue;
       }
       if (shortcut.enabled) {

package/dist/runtime/composables/internal/useFilter.d.ts

@@ -0,0 +1,9 @@
+export declare function useFilter(): {
+    score: (value: string, searchTerm: string) => number | null;
+    scoreItem: (item: any, searchTerm: string, fields: string[]) => number | null;
+    filter: <T>(items: T[], searchTerm: string, fields: string[]) => T[];
+    filterGroups: <T>(groups: T[][], searchTerm: string, options: {
+        fields: string[];
+        isStructural?: (item: T) => boolean;
+    }) => T[][];
+};

package/dist/runtime/composables/internal/useFilter.js

@@ -0,0 +1,60 @@
+import { useFilter as useRekaFilter } from "reka-ui";
+import { get } from "../../utils/index.js";
+export function useFilter() {
+  const { contains, startsWith } = useRekaFilter({ sensitivity: "base" });
+  function score(value, searchTerm) {
+    if (!contains(value, searchTerm)) return null;
+    if (contains(searchTerm, value)) return 0;
+    if (startsWith(value, searchTerm)) return 1;
+    return 2;
+  }
+  function scoreItem(item, searchTerm, fields) {
+    if (typeof item !== "object" || item === null) {
+      return score(String(item), searchTerm);
+    }
+    let bestScore = null;
+    for (const field of fields) {
+      const value = get(item, field);
+      if (value == null) continue;
+      const values = Array.isArray(value) ? value.map(String) : [String(value)];
+      for (const v of values) {
+        const s = score(v, searchTerm);
+        if (s !== null && (bestScore === null || s < bestScore)) bestScore = s;
+        if (bestScore === 0) return 0;
+      }
+    }
+    return bestScore;
+  }
+  function filter(items, searchTerm, fields) {
+    if (!searchTerm) return items;
+    const scored = [];
+    for (const item of items) {
+      const s = scoreItem(item, searchTerm, fields);
+      if (s !== null) {
+        scored.push({ item, score: s });
+      }
+    }
+    scored.sort((a, b) => a.score - b.score);
+    return scored.map(({ item }) => item);
+  }
+  function filterGroups(groups, searchTerm, options) {
+    if (!searchTerm) return groups;
+    return groups.map((group) => {
+      const result = [];
+      for (const item of group) {
+        if (item === void 0 || item === null) continue;
+        if (options.isStructural?.(item)) {
+          result.push({ item, score: -1 });
+          continue;
+        }
+        const s = scoreItem(item, searchTerm, options.fields);
+        if (s !== null) {
+          result.push({ item, score: s });
+        }
+      }
+      result.sort((a, b) => a.score - b.score);
+      return result.map(({ item }) => item);
+    }).filter((group) => group.some((item) => !options.isStructural?.(item)));
+  }
+  return { score, scoreItem, filter, filterGroups };
+}

package/dist/runtime/composables/useAvatarGroup.d.ts

@@ -6,5 +6,5 @@ export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
 export declare function useAvatarGroup(props: {
     size: AvatarGroupProps['size'];
 }): {
-    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
+    size: ComputedRef<"lg" | "sm" | "md" | "xl" | "3xs" | "2xs" | "xs" | "2xl" | "3xl" | undefined>;
 };

package/dist/runtime/composables/useComponentUI.d.ts

@@ -0,0 +1,33 @@
+import type { ComputedRef } from 'vue';
+import type { ClassValue } from 'tailwind-variants';
+import type { TVConfig } from '../types/tv';
+import type * as b24ui from '#build/b24ui';
+type UIConfig = TVConfig<typeof b24ui>;
+type ExtractUISlots<C> = C extends {
+    slots?: infer S;
+} ? NonNullable<S> : never;
+type UIConfigSlots<T extends keyof UIConfig> = 'slots' extends keyof NonNullable<UIConfig[T]> ? ExtractUISlots<NonNullable<UIConfig[T]>> : {
+    base?: ClassValue;
+};
+type ThemeSlotOverrides<T> = T extends {
+    slots: infer S extends Record<string, any>;
+} ? {
+    [K in keyof S]?: ClassValue;
+} : {
+    [K in keyof T]?: T[K] extends Record<string, any> ? ThemeSlotOverrides<T[K]> : ClassValue;
+};
+export type ThemeUI = {
+    [K in keyof typeof b24ui]?: ThemeSlotOverrides<(typeof b24ui)[K]>;
+};
+export type ThemeRootContext = {
+    b24ui: ComputedRef<ThemeUI>;
+};
+declare const provideThemeContext: (contextValue: ThemeRootContext) => ThemeRootContext;
+export { provideThemeContext };
+type ComponentUIProps<T extends keyof UIConfig> = {
+    b24ui?: UIConfigSlots<T>;
+};
+export declare function useComponentUI<T extends keyof UIConfig>(name: T, props: ComponentUIProps<T>): ComputedRef<UIConfigSlots<T>>;
+export declare function useComponentUI(name: string, props: {
+    b24ui?: any;
+}): ComputedRef<any>;

package/dist/runtime/composables/useComponentUI.js

@@ -0,0 +1,13 @@
+import { computed } from "vue";
+import defu from "defu";
+import { createContext } from "reka-ui";
+import { get } from "../utils/index.js";
+const [injectThemeContext, provideThemeContext] = createContext("B24Theme", "RootContext");
+export { provideThemeContext };
+export function useComponentUI(name, props) {
+  const { b24ui } = injectThemeContext({ b24ui: computed(() => ({})) });
+  return computed(() => {
+    const themeOverrides = get(b24ui.value, name) || {};
+    return defu(props.b24ui ?? {}, themeOverrides);
+  });
+}

package/dist/runtime/composables/useEditorMenu.d.ts

@@ -24,11 +24,21 @@ export interface EditorMenuOptions<T = any> {
      * Function to filter items based on query
      */
     filter?: (items: T[], query: string) => T[];
+    /**
+     * Whether to ignore the default filtering.
+     * When `true`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+     * @defaultValue false
+     */
+    ignoreFilter?: boolean;
     /**
      * Maximum number of items to display
      * @defaultValue 42
      */
     limit?: number;
+    /**
+     * Ref to sync the current search term with
+     */
+    searchTerm?: Ref<string>;
     /**
      * Function to execute when an item is selected
      */
@@ -61,4 +71,5 @@ export declare function useEditorMenu<T = any>(options: EditorMenuOptions<T>): {
     plugin: import("@tiptap/pm/state").Plugin<any>;
     destroy: () => void;
     filteredItems: Ref<T[], T[]>;
+    searchTerm: Ref<string, string>;
 };