@bitrix24/b24ui-nuxt 0.5.11 → 0.6.0

package/dist/runtime/components/OverlayProvider.vue

@@ -1,19 +1,15 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useOverlay, type Overlay } from '../composables/useOverlay'
-
-const { overlays, unMount, close } = useOverlay()
-
-const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))
-
-const onAfterLeave = (id: symbol) => {
-  close(id)
-  unMount(id)
-}
-
-const onClose = (id: symbol, value: any) => {
-  close(id, value)
-}
+<script setup>
+import { computed } from "vue";
+import { useOverlay } from "../composables/useOverlay";
+const { overlays, unMount, close } = useOverlay();
+const mountedOverlays = computed(() => overlays.filter((overlay) => overlay.isMounted));
+const onAfterLeave = (id) => {
+  close(id);
+  unMount(id);
+};
+const onClose = (id, value) => {
+  close(id, value);
+};
 </script>
 
 <template>
@@ -22,8 +18,8 @@ const onClose = (id: symbol, value: any) => {
     v-for="overlay in mountedOverlays"
     :key="overlay.id"
     v-bind="overlay.props"
-    v-model:open="overlay.modelValue"
-    @close="(value:any) => onClose(overlay.id, value)"
+    v-model:open="overlay.isOpen"
+    @close="(value) => onClose(overlay.id, value)"
     @after:leave="onAfterLeave(overlay.id)"
   />
 </template>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Popover.vue

@@ -1,92 +1,51 @@
-<script lang="ts">
-import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/popover'
-import { tv } from '../utils/tv'
-import type { EmitsToProps } from '../types/utils'
-
-const appConfigPopover = _appConfig as AppConfig & { b24ui: { popover: Partial<typeof theme> } }
-
-const popover = tv({ extend: tv(theme), ...(appConfigPopover.b24ui?.popover || {}) })
-
-export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
-  /**
-   * The display mode of the popover.
-   * @defaultValue 'click'
-   */
-  mode?: 'click' | 'hover'
-  /**
-   * The content of the popover.
-   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
-   */
-  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<PopoverContentEmits>>
-  /**
-   * Display an arrow alongside the popover.
-   * @defaultValue false
-   */
-  arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
-  /**
-   * Render the popover in a portal.
-   * @defaultValue true
-   */
-  portal?: boolean
-  /**
-   * When `false`, the popover will not close when clicking outside or pressing escape.
-   * @defaultValue true
-   */
-  dismissible?: boolean
-  class?: any
-  b24ui?: Partial<typeof popover.slots>
-}
-
-export interface PopoverEmits extends PopoverRootEmits {}
-
-export interface PopoverSlots {
-  default(props: { open: boolean }): any
-  content(props?: {}): any
-}
+<script>
+import _appConfig from "#build/app.config";
+import theme from "#build/b24ui/popover";
+import { tv } from "../utils/tv";
+const appConfigPopover = _appConfig;
+const popover = tv({ extend: tv(theme), ...appConfigPopover.b24ui?.popover || {} });
 </script>
 
-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { defu } from 'defu'
-import { useForwardPropsEmits } from 'reka-ui'
-import { Popover, HoverCard } from 'reka-ui/namespaced'
-import { reactivePick } from '@vueuse/core'
-
-const props = withDefaults(defineProps<PopoverProps>(), {
-  portal: true,
-  mode: 'click',
-  openDelay: 0,
-  closeDelay: 0,
-  dismissible: true
-})
-const emits = defineEmits<PopoverEmits>()
-const slots = defineSlots<PopoverSlots>()
-
-const pick = props.mode === 'hover' ? reactivePick(props, 'defaultOpen', 'open', 'openDelay', 'closeDelay') : reactivePick(props, 'defaultOpen', 'open', 'modal')
-const rootProps = useForwardPropsEmits(pick, emits)
-const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
+<script setup>
+import { computed, toRef } from "vue";
+import { defu } from "defu";
+import { useForwardPropsEmits } from "reka-ui";
+import { Popover, HoverCard } from "reka-ui/namespaced";
+import { reactivePick } from "@vueuse/core";
+const props = defineProps({
+  mode: { type: String, required: false, default: "click" },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: Boolean, required: false, default: true },
+  dismissible: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+  openDelay: { type: Number, required: false, default: 0 },
+  closeDelay: { type: Number, required: false, default: 0 }
+});
+const emits = defineEmits(["update:open"]);
+const slots = defineSlots();
+const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
+const rootProps = useForwardPropsEmits(pick, emits);
+const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const contentEvents = computed(() => {
   if (!props.dismissible) {
     return {
-      pointerDownOutside: (e: Event) => e.preventDefault(),
-      interactOutside: (e: Event) => e.preventDefault(),
-      escapeKeyDown: (e: Event) => e.preventDefault()
-    }
+      pointerDownOutside: (e) => e.preventDefault(),
+      interactOutside: (e) => e.preventDefault(),
+      escapeKeyDown: (e) => e.preventDefault()
+    };
   }
-
-  return {}
-})
-const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
-
-// eslint-disable-next-line vue/no-dupe-keys
+  return {};
+});
+const arrowProps = toRef(() => props.arrow);
 const b24ui = computed(() => popover({
   side: contentProps.value.side
-}))
-
-const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
+}));
+const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 </script>
 
 <template>

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

@@ -0,0 +1,147 @@
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui';
+import type { EmitsToProps } from '../types/utils';
+declare const popover: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+}, import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    content: string;
+    arrow: string;
+}, undefined, unknown, unknown, undefined>>>;
+export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+    /**
+     * The display mode of the popover.
+     * @defaultValue 'click'
+     */
+    mode?: 'click' | 'hover';
+    /**
+     * The content of the popover.
+     * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+     */
+    content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<PopoverContentEmits>>;
+    /**
+     * Display an arrow alongside the popover.
+     * @defaultValue false
+     */
+    arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>;
+    /**
+     * Render the popover in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean;
+    /**
+     * When `false`, the popover will not close when clicking outside or pressing escape.
+     * @defaultValue true
+     */
+    dismissible?: boolean;
+    class?: any;
+    b24ui?: Partial<typeof popover.slots>;
+}
+export interface PopoverEmits extends PopoverRootEmits {
+}
+export interface PopoverSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PopoverProps>, {
+    portal: boolean;
+    mode: string;
+    openDelay: number;
+    closeDelay: number;
+    dismissible: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    portal: boolean;
+    dismissible: boolean;
+    openDelay: number;
+    closeDelay: number;
+    mode: "click" | "hover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<PopoverSlots> & PopoverSlots>;
+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/components/Progress.vue

@@ -1,178 +1,112 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { ProgressRootProps, ProgressRootEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/progress'
-import { tv } from '../utils/tv'
-
-const appConfigProgress = _appConfig as AppConfig & { b24ui: { progress: Partial<typeof theme> } }
-
-const progress = tv({ extend: tv(theme), ...(appConfigProgress.b24ui?.progress || {}) })
-
-type ProgressVariants = VariantProps<typeof progress>
-
-export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'modelValue'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /**
-   * The maximum progress value
-   */
-  max?: number | Array<any>
-  /**
-   * Display the current progress value
-   */
-  status?: boolean
-  /**
-   * Whether the progress is visually inverted
-   * @defaultValue false
-   */
-  inverted?: boolean
-  /**
-   * @defaultValue 'md'
-   */
-  size?: ProgressVariants['size']
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: ProgressVariants['color']
-  /**
-   * The orientation of the progress bar.
-   * @defaultValue 'horizontal'
-   */
-  orientation?: ProgressVariants['orientation']
-  /**
-   * @defaultValue 'loading'
-   */
-  animation?: ProgressVariants['animation']
-  class?: any
-  b24ui?: Partial<typeof progress.slots>
-}
-
-export interface ProgressEmits extends ProgressRootEmits {}
-
-export type ProgressSlots = {
-  status(props: { percent?: number }): any
-} & {
-  [key: string]: (props: { step: number }) => any
-}
-
+<script>
+import _appConfig from "#build/app.config";
+import theme from "#build/b24ui/progress";
+import { tv } from "../utils/tv";
+const appConfigProgress = _appConfig;
+const progress = tv({ extend: tv(theme), ...appConfigProgress.b24ui?.progress || {} });
 </script>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Primitive, ProgressRoot, ProgressIndicator, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useLocale } from '../composables/useLocale'
-
-const props = withDefaults(defineProps<ProgressProps>(), {
-  inverted: false,
-  modelValue: null,
-  orientation: 'horizontal'
-})
-const emits = defineEmits<ProgressEmits>()
-const slots = defineSlots<ProgressSlots>()
-
-const { dir } = useLocale()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'modelValue'), emits)
-
-const isIndeterminate = computed(() => rootProps.value.modelValue === null)
-const hasSteps = computed(() => Array.isArray(props.max))
-
+<script setup>
+import { computed } from "vue";
+import { Primitive, ProgressRoot, ProgressIndicator, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useLocale } from "../composables/useLocale";
+const props = defineProps({
+  as: { type: null, required: false },
+  max: { type: [Number, Array], required: false },
+  status: { type: Boolean, required: false },
+  inverted: { type: Boolean, required: false, default: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  animation: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  getValueLabel: { type: Function, required: false },
+  modelValue: { type: [Number, null], required: false, default: null }
+});
+const emits = defineEmits(["update:modelValue", "update:max"]);
+const slots = defineSlots();
+const { dir } = useLocale();
+const rootProps = useForwardPropsEmits(reactivePick(props, "getValueLabel", "modelValue"), emits);
+const isIndeterminate = computed(() => rootProps.value.modelValue === null);
+const hasSteps = computed(() => Array.isArray(props.max));
 const realMax = computed(() => {
   if (isIndeterminate.value || !props.max) {
-    return undefined
+    return void 0;
   }
-
   if (Array.isArray(props.max)) {
-    return props.max.length - 1
+    return props.max.length - 1;
   }
-
-  return Number(props.max)
-})
-
+  return Number(props.max);
+});
 const percent = computed(() => {
   if (isIndeterminate.value) {
-    return undefined
+    return void 0;
   }
-
   switch (true) {
-    case rootProps.value.modelValue! < 0: return 0
-    case rootProps.value.modelValue! > (realMax.value ?? 100): return 100
-    default: return Math.round((rootProps.value.modelValue! / (realMax.value ?? 100)) * 100)
+    case rootProps.value.modelValue < 0:
+      return 0;
+    case rootProps.value.modelValue > (realMax.value ?? 100):
+      return 100;
+    default:
+      return Math.round(rootProps.value.modelValue / (realMax.value ?? 100) * 100);
   }
-})
-
+});
 const indicatorStyle = computed(() => {
-  if (percent.value === undefined) {
-    return
+  if (percent.value === void 0) {
+    return;
   }
-
-  if (props.orientation === 'vertical') {
+  if (props.orientation === "vertical") {
     return {
-      transform: `translateY(${props.inverted ? '' : '-'}${100 - percent.value}%)`
-    }
+      transform: `translateY(${props.inverted ? "" : "-"}${100 - percent.value}%)`
+    };
   } else {
-    if (dir.value === 'rtl') {
+    if (dir.value === "rtl") {
       return {
-        transform: `translateX(${props.inverted ? '-' : ''}${100 - percent.value}%)`
-      }
+        transform: `translateX(${props.inverted ? "-" : ""}${100 - percent.value}%)`
+      };
     } else {
       return {
-        transform: `translateX(${props.inverted ? '' : '-'}${100 - percent.value}%)`
-      }
+        transform: `translateX(${props.inverted ? "" : "-"}${100 - percent.value}%)`
+      };
     }
   }
-})
-
+});
 const statusStyle = computed(() => {
   return {
-    [props.orientation === 'vertical' ? 'height' : 'width']: percent.value ? `${percent.value}%` : 'fit-content'
-  }
-})
-
-function isActive(index: number) {
-  return index === Number(props.modelValue)
+    [props.orientation === "vertical" ? "height" : "width"]: percent.value ? `${percent.value}%` : "fit-content"
+  };
+});
+function isActive(index) {
+  return index === Number(props.modelValue);
 }
-
-function isFirst(index: number) {
-  return index === 0
+function isFirst(index) {
+  return index === 0;
 }
-
-function isLast(index: number) {
-  return index === realMax.value
+function isLast(index) {
+  return index === realMax.value;
 }
-
-function stepVariant(index: number | string) {
-  index = Number(index)
-
+function stepVariant(index) {
+  index = Number(index);
   if (isActive(index) && !isFirst(index)) {
-    return 'active'
+    return "active";
   }
-
   if (isFirst(index) && isActive(index)) {
-    return 'first'
+    return "first";
   }
-
   if (isLast(index) && isActive(index)) {
-    return 'last'
+    return "last";
   }
-
-  return 'other'
+  return "other";
 }
-
 const b24ui = computed(() => progress({
   animation: props.animation,
   size: props.size,
   color: props.color,
   orientation: props.orientation,
   inverted: props.inverted
-}))
+}));
 </script>
 
 <template>