@bitrix24/b24ui-nuxt 0.2.2 → 0.2.4

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.DgnM0VWe.cjs');
+const templates = require('./shared/b24ui-nuxt.DGjopCKm.cjs');
 require('node:url');
 require('scule');
 
@@ -41,6 +41,7 @@ const module$1 = kit.defineNuxtModule({
       await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
     }
     kit.addPlugin({ src: resolve("./runtime/plugins/colors") });
+    kit.addPlugin({ src: resolve("./runtime/plugins/modal") });
     kit.addComponentsDir({
       path: resolve("./runtime/components"),
       prefix: "B24",

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.13.1"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CYvh5VlN.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.V9TzyCqH.mjs';
 import 'node:url';
 import 'scule';
 
@@ -38,6 +38,7 @@ const module = defineNuxtModule({
       await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
+    addPlugin({ src: resolve("./runtime/plugins/modal") });
     addComponentsDir({
       path: resolve("./runtime/components"),
       prefix: "B24",

package/dist/runtime/components/App.vue

@@ -23,7 +23,7 @@ import { toRef, useId, provide } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import B24Toaster from './Toaster.vue'
-// import B24ModalProvider from './ModalProvider.vue'
+import B24ModalProvider from './ModalProvider.vue'
 // import B24SlideoverProvider from './SlideoverProvider.vue'
 
 const props = defineProps<AppProps>()
@@ -44,7 +44,7 @@ provide(localeContextInjectionKey, locale)
         <slot />
       </B24Toaster>
       <slot v-else />
-      <!-- B24ModalProvider / -->
+      <B24ModalProvider />
       <!-- B24SlideoverProvider / -->
     </TooltipProvider>
   </ConfigProvider>

package/dist/runtime/components/DropdownMenu.vue

@@ -89,7 +89,7 @@ import { defu } from 'defu'
 import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { omit } from '../utils'
-import UDropdownMenuContent from './DropdownMenuContent.vue'
+import B24DropdownMenuContent from './DropdownMenuContent.vue'
 
 const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
   portal: true,
@@ -115,7 +115,7 @@ const b24ui = computed(() => dropdownMenu({
       <slot :open="open" />
     </DropdownMenuTrigger>
 
-    <UDropdownMenuContent
+    <B24DropdownMenuContent
       :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
       :b24ui="b24ui"
       :b24ui-override="props.b24ui"
@@ -130,6 +130,6 @@ const b24ui = computed(() => dropdownMenu({
       </template>
 
       <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
-    </UDropdownMenuContent>
+    </B24DropdownMenuContent>
   </DropdownMenuRoot>
 </template>

package/dist/runtime/components/InputNumber.vue

@@ -0,0 +1,218 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { NumberFieldRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/input-number'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+
+const appConfigInputNumber = _appConfig as AppConfig & { b24ui: { inputNumber: Partial<typeof theme> } }
+
+const inputNumber = tv({ extend: tv(theme), ...(appConfigInputNumber.b24ui?.inputNumber || {}) })
+
+type InputNumberVariants = VariantProps<typeof inputNumber>
+
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  color?: InputNumberVariants['color']
+  size?: InputNumberVariants['size']
+  /** Removes padding from input. */
+  noPadding?: boolean
+  /** removes all borders (rings). */
+  noBorder?: boolean
+  /** removes all borders (rings) except the bottom one. */
+  underline?: boolean
+  /** Rounds the corners of the button. */
+  rounded?: boolean
+  tag?: string
+  tagColor?: InputNumberVariants['tagColor']
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  b24ui?: Partial<typeof inputNumber.slots>
+  /**
+   * The orientation of the input menu.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: 'vertical' | 'horizontal'
+  /**
+   * Configure the increment button. The `size` is inherited.
+   * @defaultValue { color: 'link', depth: 'light' }
+   */
+  increment?: ButtonProps
+  /**
+   * The icon displayed to increment the value.
+   * @defaultValue icons.plus = Plus30Icon
+   */
+  incrementIcon?: IconComponent
+  /**
+   * Configure the decrement button. The `size` is inherited.
+   * @defaultValue { color: 'link', depth: 'light' }
+   */
+  decrement?: ButtonProps
+  /**
+   * The icon displayed to decrement the value.
+   * @defaultValue icons.minus = Minus30Icon
+   */
+  decrementIcon?: IconComponent
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   * @defaultValue B24App.locale.code
+   */
+  locale?: string
+}
+
+export interface InputNumberEmits {
+  (e: 'update:modelValue', payload: number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', payload: Event): void
+}
+
+export interface InputNumberSlots {
+  increment(props?: {}): any
+  decrement(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Button from './Button.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  orientation: 'horizontal',
+  color: 'primary',
+  size: 'md'
+})
+const emits = defineEmits<InputNumberEmits>()
+defineSlots<InputNumberSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'formatOptions'), emits)
+
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
+
+const { t, code: codeLocale } = useLocale()
+const locale = computed(() => props.locale || codeLocale.value)
+
+const isTag = computed(() => {
+  return props.tag
+})
+
+const b24ui = computed(() => inputNumber({
+  color: color.value,
+  size: size.value,
+  tagColor: props.tagColor,
+  highlight: highlight.value,
+  rounded: Boolean(props.rounded),
+  noPadding: Boolean(props.noPadding),
+  noBorder: Boolean(props.noBorder),
+  underline: Boolean(props.underline),
+  orientation: props.orientation
+}))
+
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? icons.plus : icons.chevronUp))
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? icons.minus : icons.chevronDown))
+
+const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.$el?.focus()
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+function onUpdate(value: number) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="rootProps"
+    :id="id"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    :name="name"
+    :disabled="disabled"
+    :locale="locale"
+    @update:model-value="onUpdate"
+  >
+    <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
+      {{ props.tag }}
+    </div>
+
+    <NumberFieldInput
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      ref="inputRef"
+      :placeholder="placeholder"
+      :required="required"
+      :class="b24ui.base({ class: props.b24ui?.base })"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+
+    <div :class="b24ui.increment({ class: props.b24ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="disabled">
+        <slot name="increment">
+          <B24Button
+            :icon="incrementIcon"
+            :size="size"
+            color="link"
+            depth="light"
+            :aria-label="t('inputNumber.increment')"
+            v-bind="typeof increment === 'object' ? increment : undefined"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div :class="b24ui.decrement({ class: props.b24ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="disabled">
+        <slot name="decrement">
+          <B24Button
+            :icon="decrementIcon"
+            :size="size"
+            color="link"
+            depth="light"
+            :aria-label="t('inputNumber.decrement')"
+            v-bind="typeof decrement === 'object' ? decrement : undefined"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
+</template>

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/modal'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+
+const appConfigModal = _appConfig as AppConfig & { b24ui: { modal: Partial<typeof theme> } }
+
+const modal = tv({ extend: tv(theme), ...(appConfigModal.b24ui?.modal || {}) })
+
+export interface ModalProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the modal. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the modal.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the modal when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  /**
+   * When `true`, the modal will take up the full screen.
+   * @defaultValue false
+   */
+  fullscreen?: boolean
+  /**
+   * Render the modal in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the modal.
+   * `{ size: 'xs', color: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   */
+  closeIcon?: IconComponent
+  /**
+   * When `false`, the modal will not close when clicking outside or pressing escape.
+   * @defaultValue true
+   */
+  dismissible?: boolean
+  class?: any
+  b24ui?: Partial<typeof modal.slots>
+}
+
+export interface ModalEmits extends DialogRootEmits {}
+
+export interface ModalSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { b24ui: any }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Button from './Button.vue'
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true,
+  dismissible: true
+})
+const emits = defineEmits<ModalEmits>()
+const slots = defineSlots<ModalSlots>()
+
+const { t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    return {
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {}
+})
+
+const b24ui = computed(() => modal({
+  transition: props.transition,
+  fullscreen: props.fullscreen
+}))
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal :disabled="!portal">
+      <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
+
+      <DialogContent :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="b24ui.header({ class: props.b24ui?.header })">
+            <slot name="header">
+              <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                <slot name="description">
+                  {{ description }}
+                </slot>
+              </DialogDescription>
+
+              <DialogClose as-child>
+                <slot name="close" :b24ui="b24ui">
+                  <B24Button
+                    v-if="close"
+                    :icon="closeIcon || icons.close"
+                    size="xs"
+                    color="link"
+                    :aria-label="t('modal.close')"
+                    v-bind="typeof close === 'object' ? close : undefined"
+                    :class="b24ui.close({ class: props.b24ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div v-if="!!slots.body" :class="b24ui.body({ class: props.b24ui?.body })">
+            <slot name="body" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+            <slot name="footer" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/dist/runtime/components/ModalDialogClose.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+export interface ModalDialogCloseSlots {
+  default(props: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from 'reka-ui'
+
+defineSlots<ModalDialogCloseSlots>()
+</script>
+
+<template>
+  <DialogClose as-child>
+    <slot />
+  </DialogClose>
+</template>

package/dist/runtime/components/ModalProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useModal, modalInjectionKey } from '../composables/useModal'
+
+const modalState = inject(modalInjectionKey)
+
+const { isOpen } = useModal()
+</script>
+
+<template>
+  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model:open="isOpen" />
+</template>

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

@@ -0,0 +1,17 @@
+import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ModalProps } from '../types';
+export interface ModalState {
+    component: Component | string;
+    props: ModalProps;
+}
+export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
+declare function _useModal(): {
+    open: <T extends Component>(component: T, props?: ModalProps & ComponentProps<T>) => void;
+    close: () => Promise<void>;
+    reset: () => void;
+    patch: <T extends Component = Record<string, never>>(props: Partial<ModalProps & ComponentProps<T>>) => void;
+    isOpen: import("vue").Ref<boolean, boolean>;
+};
+export declare const useModal: typeof _useModal;
+export {};

package/dist/runtime/composables/useModal.js

@@ -0,0 +1,46 @@
+import { ref, inject } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+export const modalInjectionKey = Symbol("bitrix24-ui.modal");
+function _useModal() {
+  const modalState = inject(modalInjectionKey);
+  const isOpen = ref(false);
+  function open(component, props) {
+    if (!modalState) {
+      throw new Error("useModal() is called without provider");
+    }
+    modalState.value = {
+      component,
+      props: props ?? {}
+    };
+    isOpen.value = true;
+  }
+  async function close() {
+    if (!modalState) return;
+    isOpen.value = false;
+  }
+  function reset() {
+    if (!modalState) return;
+    modalState.value = {
+      component: "div",
+      props: {}
+    };
+  }
+  function patch(props) {
+    if (!modalState) return;
+    modalState.value = {
+      ...modalState.value,
+      props: {
+        ...modalState.value.props,
+        ...props
+      }
+    };
+  }
+  return {
+    open,
+    close,
+    reset,
+    patch,
+    isOpen
+  };
+}
+export const useModal = createSharedComposable(_useModal);

package/dist/runtime/plugins/modal.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/modal.js

@@ -0,0 +1,10 @@
+import { shallowRef } from "vue";
+import { defineNuxtPlugin } from "#imports";
+import { modalInjectionKey } from "../composables/useModal.js";
+export default defineNuxtPlugin((nuxtApp) => {
+  const modalState = shallowRef({
+    component: "div",
+    props: {}
+  });
+  nuxtApp.vueApp.provide(modalInjectionKey, modalState);
+});

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

@@ -15,8 +15,11 @@ export * from '../components/Form.vue';
 export * from '../components/FormField.vue';
 export * from '../components/Input.vue';
 export * from '../components/InputMenu.vue';
+export * from '../components/InputNumber.vue';
 export * from '../components/Kbd.vue';
 export * from '../components/Link.vue';
+export * from '../components/Modal.vue';
+export * from '../components/ModalDialogClose.vue';
 export * from '../components/Progress.vue';
 export * from '../components/RadioGroup.vue';
 export * from '../components/Range.vue';

package/dist/runtime/types/index.js

@@ -15,8 +15,11 @@ export * from "../components/Form.vue";
 export * from "../components/FormField.vue";
 export * from "../components/Input.vue";
 export * from "../components/InputMenu.vue";
+export * from "../components/InputNumber.vue";
 export * from "../components/Kbd.vue";
 export * from "../components/Link.vue";
+export * from "../components/Modal.vue";
+export * from "../components/ModalDialogClose.vue";
 export * from "../components/Progress.vue";
 export * from "../components/RadioGroup.vue";
 export * from "../components/Range.vue";