@bitrix24/b24ui-nuxt 0.5.11 → 0.6.0

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

@@ -0,0 +1,437 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui';
+import type { DateValue } from '@internationalized/date';
+import type { IconComponent, ButtonProps } from '../types';
+import type { PartialString } from '../types/utils';
+declare const calendar: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            cellTrigger: string;
+        };
+        danger: {
+            cellTrigger: string;
+        };
+        success: {
+            cellTrigger: string;
+        };
+        warning: {
+            cellTrigger: string;
+        };
+        primary: {
+            cellTrigger: string;
+        };
+        secondary: {
+            cellTrigger: string;
+        };
+        collab: {
+            cellTrigger: string;
+        };
+        ai: {
+            cellTrigger: string;
+        };
+    };
+    size: {
+        xs: {
+            heading: string;
+            cell: string;
+            headCell: string;
+            cellTrigger: string;
+            body: string;
+        };
+        sm: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        md: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        lg: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    body: string;
+    heading: string;
+    grid: string;
+    gridRow: string;
+    gridWeekDaysRow: string;
+    gridBody: string;
+    headCell: string;
+    cell: string;
+    cellTrigger: string;
+}, undefined, {
+    color: {
+        default: {
+            cellTrigger: string;
+        };
+        danger: {
+            cellTrigger: string;
+        };
+        success: {
+            cellTrigger: string;
+        };
+        warning: {
+            cellTrigger: string;
+        };
+        primary: {
+            cellTrigger: string;
+        };
+        secondary: {
+            cellTrigger: string;
+        };
+        collab: {
+            cellTrigger: string;
+        };
+        ai: {
+            cellTrigger: string;
+        };
+    };
+    size: {
+        xs: {
+            heading: string;
+            cell: string;
+            headCell: string;
+            cellTrigger: string;
+            body: string;
+        };
+        sm: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        md: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        lg: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    body: string;
+    heading: string;
+    grid: string;
+    gridRow: string;
+    gridWeekDaysRow: string;
+    gridBody: string;
+    headCell: string;
+    cell: string;
+    cellTrigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            cellTrigger: string;
+        };
+        danger: {
+            cellTrigger: string;
+        };
+        success: {
+            cellTrigger: string;
+        };
+        warning: {
+            cellTrigger: string;
+        };
+        primary: {
+            cellTrigger: string;
+        };
+        secondary: {
+            cellTrigger: string;
+        };
+        collab: {
+            cellTrigger: string;
+        };
+        ai: {
+            cellTrigger: string;
+        };
+    };
+    size: {
+        xs: {
+            heading: string;
+            cell: string;
+            headCell: string;
+            cellTrigger: string;
+            body: string;
+        };
+        sm: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        md: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        lg: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    body: string;
+    heading: string;
+    grid: string;
+    gridRow: string;
+    gridWeekDaysRow: string;
+    gridBody: string;
+    headCell: string;
+    cell: string;
+    cellTrigger: string;
+}, undefined, {
+    color: {
+        default: {
+            cellTrigger: string;
+        };
+        danger: {
+            cellTrigger: string;
+        };
+        success: {
+            cellTrigger: string;
+        };
+        warning: {
+            cellTrigger: string;
+        };
+        primary: {
+            cellTrigger: string;
+        };
+        secondary: {
+            cellTrigger: string;
+        };
+        collab: {
+            cellTrigger: string;
+        };
+        ai: {
+            cellTrigger: string;
+        };
+    };
+    size: {
+        xs: {
+            heading: string;
+            cell: string;
+            headCell: string;
+            cellTrigger: string;
+            body: string;
+        };
+        sm: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        md: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        lg: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    body: string;
+    heading: string;
+    grid: string;
+    gridRow: string;
+    gridWeekDaysRow: string;
+    gridBody: string;
+    headCell: string;
+    cell: string;
+    cellTrigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            cellTrigger: string;
+        };
+        danger: {
+            cellTrigger: string;
+        };
+        success: {
+            cellTrigger: string;
+        };
+        warning: {
+            cellTrigger: string;
+        };
+        primary: {
+            cellTrigger: string;
+        };
+        secondary: {
+            cellTrigger: string;
+        };
+        collab: {
+            cellTrigger: string;
+        };
+        ai: {
+            cellTrigger: string;
+        };
+    };
+    size: {
+        xs: {
+            heading: string;
+            cell: string;
+            headCell: string;
+            cellTrigger: string;
+            body: string;
+        };
+        sm: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        md: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+        lg: {
+            heading: string;
+            headCell: string;
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    body: string;
+    heading: string;
+    grid: string;
+    gridRow: string;
+    gridWeekDaysRow: string;
+    gridBody: string;
+    headCell: string;
+    cell: string;
+    cellTrigger: string;
+}, undefined, unknown, unknown, undefined>>>;
+type CalendarVariants = VariantProps<typeof calendar>;
+type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true ? DateRange : M extends true ? DateValue[] : DateValue;
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? (DateRange | null) : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
+export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon to use for the next year control.
+     * @defaultValue icons.chevronDoubleRight
+     * @IconComponent
+     */
+    nextYearIcon?: IconComponent;
+    /**
+     * Configure the next year button.
+     * `{ color: 'link' }`{lang="ts"}
+     */
+    nextYear?: ButtonProps;
+    /**
+     * The icon to use for the next month control.
+     * @defaultValue icons.chevronRight
+     * @IconComponent
+     */
+    nextMonthIcon?: IconComponent;
+    /**
+     * Configure the next month button.
+     * `{ color: 'link' }`{lang="ts"}
+     */
+    nextMonth?: ButtonProps;
+    /**
+     * The icon to use for the previous year control.
+     * @defaultValue icons.chevronDoubleLeft
+     * @IconComponent
+     */
+    prevYearIcon?: IconComponent;
+    /**
+     * Configure the prev year button.
+     * `{ color: 'link' }`{lang="ts"}
+     */
+    prevYear?: ButtonProps;
+    /**
+     * The icon to use for the previous month control.
+     * @defaultValue icons.chevronLeft
+     * @IconComponent
+     */
+    prevMonthIcon?: IconComponent;
+    /**
+     * Configure the prev month button.
+     * `{ color: 'link' }`{lang="ts"}
+     */
+    prevMonth?: ButtonProps;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: CalendarVariants['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: CalendarVariants['size'];
+    /** Whether a range of dates can be selected */
+    range?: R & boolean;
+    /** Whether multiple dates can be selected */
+    multiple?: M & boolean;
+    /** Show month controls */
+    monthControls?: boolean;
+    /** Show year controls */
+    yearControls?: boolean;
+    defaultValue?: CalendarDefaultValue<R, M>;
+    modelValue?: CalendarModelValue<R, M>;
+    class?: any;
+    b24ui?: PartialString<typeof calendar.slots>;
+}
+export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+    'update:modelValue': [date: CalendarModelValue<R, M>];
+}
+export interface CalendarSlots {
+    'heading': (props: {
+        value: string;
+    }) => any;
+    'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any;
+    'week-day': (props: {
+        day: string;
+    }) => any;
+}
+declare const _default: <R extends boolean, M extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<any & CalendarProps<R, M> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<CalendarSlots> & CalendarSlots;
+    emit: ((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Checkbox.vue

@@ -1,86 +1,55 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { CheckboxRootProps } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/checkbox'
-import { tv } from '../utils/tv'
-
-const appConfigCheckbox = _appConfig as AppConfig & { b24ui: { checkbox: Partial<typeof theme> } }
-
-const checkbox = tv({ extend: tv(theme), ...(appConfigCheckbox.b24ui?.checkbox || {}) })
-
-type CheckboxVariants = VariantProps<typeof checkbox>
-
-export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  label?: string
-  description?: string
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: CheckboxVariants['color']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: CheckboxVariants['size']
-  class?: any
-  b24ui?: Partial<typeof checkbox.slots>
-}
-
-export type CheckboxEmits = {
-  change: [payload: Event]
-}
-
-export interface CheckboxSlots {
-  label(props: { label?: string }): any
-  description(props: { description?: string }): any
-}
+<script>
+import _appConfig from "#build/app.config";
+import theme from "#build/b24ui/checkbox";
+import { tv } from "../utils/tv";
+const appConfigCheckbox = _appConfig;
+const checkbox = tv({ extend: tv(theme), ...appConfigCheckbox.b24ui?.checkbox || {} });
 </script>
 
-<script setup lang="ts">
-import { computed, useId } from 'vue'
-import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useFormField } from '../composables/useFormField'
-import Minus20Icon from '@bitrix24/b24icons-vue/actions/Minus20Icon'
-import CheckIcon from '@bitrix24/b24icons-vue/main/CheckIcon'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps<CheckboxProps>()
-const slots = defineSlots<CheckboxSlots>()
-const emits = defineEmits<CheckboxEmits>()
-
-const modelValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
-
-const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
-
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<CheckboxProps>(props)
-const id = _id.value ?? useId()
-
+<script setup>
+import { computed, useId } from "vue";
+import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useFormField } from "../composables/useFormField";
+import Minus20Icon from "@bitrix24/b24icons-vue/actions/Minus20Icon";
+import CheckIcon from "@bitrix24/b24icons-vue/main/CheckIcon";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  value: { type: [String, Number, Object, null], required: false },
+  id: { type: String, required: false },
+  defaultValue: { type: [Boolean, String], required: false }
+});
+const slots = defineSlots();
+const emits = defineEmits(["change"]);
+const modelValue = defineModel({ type: [Boolean, String], ...{ default: void 0 } });
+const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
+const id = _id.value ?? useId();
 const b24ui = computed(() => checkbox({
   size: size.value,
   color: color.value,
   required: props.required,
   disabled: disabled.value,
   checked: Boolean(modelValue.value ?? props.defaultValue)
-}))
-
-function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emits('change', event)
-  emitFormChange()
-  emitFormInput()
+}));
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
 }
 </script>
 
-<!-- eslint-disable vue/no-template-shadow -->
 <template>
   <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
     <div :class="b24ui.container({ class: props.b24ui?.container })">
@@ -102,7 +71,7 @@ function onUpdate(value: any) {
       </CheckboxRoot>
     </div>
 
-    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
       <Label v-if="label || !!slots.label" :for="id" :class="b24ui.label({ class: props.b24ui?.label })">
         <slot name="label" :label="label">
           {{ label }}