@bitrix24/b24ui-nuxt 0.5.10 → 0.6.0

package/dist/runtime/components/Textarea.vue

@@ -8,129 +8,44 @@ const textarea = tv({ extend: tv(theme), ...appConfigTextarea.b24ui?.textarea ||
 
 <script setup>
 import { ref, computed, onMounted, nextTick, watch } from "vue";
+import { Primitive } from "reka-ui";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
+import B24Avatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  noPadding: {
-    type: Boolean,
-    required: false
-  },
-  noBorder: {
-    type: Boolean,
-    required: false
-  },
-  underline: {
-    type: Boolean,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  autofocus: {
-    type: Boolean,
-    required: false
-  },
-  autofocusDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  autoresize: {
-    type: Boolean,
-    required: false
-  },
-  autoresizeDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  rows: {
-    type: Number,
-    required: false,
-    default: 3
-  },
-  maxrows: {
-    type: Number,
-    required: false,
-    default: 5
-  },
-  tag: {
-    type: String,
-    required: false
-  },
-  tagColor: {
-    type: null,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  trailing: {
-    type: Boolean,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  }
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  color: { type: null, required: false },
+  noPadding: { type: Boolean, required: false },
+  noBorder: { type: Boolean, required: false },
+  underline: { type: Boolean, required: false },
+  rounded: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  autoresize: { type: Boolean, required: false },
+  autoresizeDelay: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false },
+  rows: { type: Number, required: false, default: 3 },
+  maxrows: { type: Number, required: false, default: 5 },
+  tag: { type: String, required: false },
+  tagColor: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [Function, Object], required: false }
 });
 const slots = defineSlots();
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
-const [modelValue, modelModifiers] = defineModel({
-  "type": [String, Number, null]
-});
+const [modelValue, modelModifiers] = defineModel({ type: [String, Number, null] });
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const isTag = computed(() => {

package/dist/runtime/components/Toast.vue

@@ -8,76 +8,29 @@ const toast = tv({ extend: tv(theme), ...appConfigToast.b24ui?.toast || {} });
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useLocale } from "../composables/useLocale";
+import icons from "../dictionary/icons";
+import B24Avatar from "./Avatar.vue";
+import B24Button from "./Button.vue";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  title: {
-    type: [String, Object, Function],
-    required: false
-  },
-  description: {
-    type: [String, Object, Function],
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "vertical"
-  },
-  actions: {
-    type: Array,
-    required: false
-  },
-  close: {
-    type: [Boolean, Object],
-    required: false,
-    default: true
-  },
-  closeIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  type: {
-    type: String,
-    required: false
-  },
-  duration: {
-    type: Number,
-    required: false
-  }
+  as: { type: null, required: false },
+  title: { type: [String, Object, Function], required: false },
+  description: { type: [String, Object, Function], required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  actions: { type: Array, required: false },
+  close: { type: [Boolean, Object], required: false, default: true },
+  closeIcon: { type: [Function, Object], required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  duration: { type: Number, required: false }
 });
 const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "swipeMove", "swipeCancel", "swipeEnd", "update:open"]);
 const slots = defineSlots();

package/dist/runtime/components/Toaster.vue

@@ -11,49 +11,26 @@ export default {
 
 <script setup>
 import { ref, computed } from "vue";
-import { useForwardProps } from "reka-ui";
+import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useToast } from "../composables/useToast";
+import { omit } from "../utils";
+import B24Toast from "./Toast.vue";
 const props = defineProps({
-  position: {
-    type: null,
-    required: false,
-    default: "top-right"
-  },
-  expand: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  duration: {
-    type: Number,
-    required: false,
-    default: 5e3
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  swipeThreshold: {
-    type: Number,
-    required: false
-  }
+  position: { type: null, required: false, default: "top-right" },
+  expand: { type: Boolean, required: false, default: true },
+  portal: { type: Boolean, required: false, default: true },
+  duration: { type: Number, required: false, default: 5e3 },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  label: { type: String, required: false },
+  swipeThreshold: { type: Number, required: false }
 });
 defineSlots();
 const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold"));
+const proxyToastProps = (toast) => {
+  return omit(toast, ["id", "close"]);
+};
 const { toasts, remove } = useToast();
 const swipeDirection = computed(() => {
   switch (props.position) {
@@ -98,7 +75,7 @@ function getOffset(index) {
       v-for="(toast, index) in toasts"
       :key="toast.id"
       ref="refs"
-      v-bind="omit(toast, ['id', 'close'])"
+      v-bind="proxyToastProps(toast)"
       :close="toast.close"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"

package/dist/runtime/components/Tooltip.vue

@@ -9,66 +9,24 @@ const tooltip = tv({ extend: tv(theme), ...appConfigTooltip.b24ui?.tooltip || {}
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import { useForwardPropsEmits } from "reka-ui";
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import B24Kbd from "./Kbd.vue";
 const props = defineProps({
-  text: {
-    type: String,
-    required: false
-  },
-  kbds: {
-    type: Array,
-    required: false
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  arrow: {
-    type: [Boolean, Object],
-    required: false
-  },
-  portal: {
-    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
-  },
-  delayDuration: {
-    type: Number,
-    required: false
-  },
-  disableHoverableContent: {
-    type: Boolean,
-    required: false
-  },
-  disableClosingTrigger: {
-    type: Boolean,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  ignoreNonKeyboardFocus: {
-    type: Boolean,
-    required: false
-  }
+  text: { type: String, required: false },
+  kbds: { type: Array, required: false },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { 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 },
+  delayDuration: { type: Number, required: false },
+  disableHoverableContent: { type: Boolean, required: false },
+  disableClosingTrigger: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  ignoreNonKeyboardFocus: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();

package/dist/runtime/components/content/TableWrapper.vue

@@ -8,54 +8,20 @@ const tableWrapper = tv({ extend: tv(theme), ...appConfigTableWrapper.b24ui?.con
 
 <script setup>
 import { computed } from "vue";
+import { Primitive } from "reka-ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  zebra: {
-    type: Boolean,
-    required: false
-  },
-  pinRows: {
-    type: Boolean,
-    required: false
-  },
-  pinCols: {
-    type: Boolean,
-    required: false
-  },
-  rowHover: {
-    type: Boolean,
-    required: false
-  },
-  bordered: {
-    type: Boolean,
-    required: false
-  },
-  scrollbarThin: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false, default: "div" },
+  size: { type: null, required: false },
+  rounded: { type: Boolean, required: false },
+  zebra: { type: Boolean, required: false },
+  pinRows: { type: Boolean, required: false },
+  pinCols: { type: Boolean, required: false },
+  rowHover: { type: Boolean, required: false },
+  bordered: { type: Boolean, required: false },
+  scrollbarThin: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const b24ui = computed(() => tableWrapper({
   size: props.size,

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

@@ -31,7 +31,7 @@ export declare function useFormField<T>(props?: Props<T>, opts?: {
     highlight: ComputedRef<boolean | undefined>;
     disabled: ComputedRef<boolean | undefined>;
     emitFormBlur: () => void;
-    emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
+    emitFormInput: import("@vueuse/core").UseDebounceFnReturn<() => void>;
     emitFormChange: () => void;
     emitFormFocus: () => void;
     ariaAttrs: ComputedRef<{

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

@@ -6,22 +6,29 @@ export type OverlayOptions<OverlayAttrs = Record<string, any>> = {
     props?: OverlayAttrs;
     destroyOnClose?: boolean;
 };
-type ManagedOverlayOptionsPrivate<T extends Component> = {
+interface ManagedOverlayOptionsPrivate<T extends Component> {
     component?: T;
     id: symbol;
     isMounted: boolean;
-    modelValue: boolean;
-    resolvePromise?: (value: unknown) => void;
-};
+    isOpen: boolean;
+    resolvePromise?: (value: any) => void;
+}
 export type Overlay = OverlayOptions<Component> & ManagedOverlayOptionsPrivate<Component>;
-interface OverlayInstance<T> {
-    open: (props?: ComponentProps<T>) => Promise<CloseEventArgType<ComponentEmit<T>>>;
+interface OverlayInstance<T extends Component> extends Omit<ManagedOverlayOptionsPrivate<T>, 'component'> {
+    id: symbol;
+    result: Promise<CloseEventArgType<ComponentEmit<T>>>;
+    open: (props?: ComponentProps<T>) => Omit<OverlayInstance<T>, 'open' | 'close' | 'patch' | 'modelValue' | 'resolvePromise'>;
     close: (value?: any) => void;
     patch: (props: Partial<ComponentProps<T>>) => void;
 }
 declare function _useOverlay(): {
     overlays: import("vue").ShallowReactive<Overlay[]>;
-    open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => Promise<any>;
+    open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => {
+        id: symbol;
+        isMounted: boolean;
+        isOpen: boolean;
+        result: Promise<any>;
+    };
     close: (id: symbol, value?: any) => void;
     create: <T extends Component>(component: T, _options?: OverlayOptions<ComponentProps<T>>) => OverlayInstance<T>;
     patch: <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>) => void;

package/dist/runtime/composables/useOverlay.js

@@ -6,7 +6,7 @@ function _useOverlay() {
     const { props, defaultOpen, destroyOnClose } = _options || {};
     const options = reactive({
       id: Symbol(import.meta.dev ? "useOverlay" : ""),
-      modelValue: !!defaultOpen,
+      isOpen: !!defaultOpen,
       component: markRaw(component),
       isMounted: !!defaultOpen,
       destroyOnClose: !!destroyOnClose,
@@ -14,6 +14,9 @@ function _useOverlay() {
     });
     overlays.push(options);
     return {
+      ...options,
+      result: new Promise(() => {
+      }),
       open: (props2) => open(options.id, props2),
       close: (value) => close(options.id, value),
       patch: (props2) => patch(options.id, props2)
@@ -24,15 +27,20 @@ function _useOverlay() {
     if (props) {
       patch(overlay.id, props);
     }
-    overlay.modelValue = true;
+    overlay.isOpen = true;
     overlay.isMounted = true;
-    return new Promise((resolve) => {
-      overlay.resolvePromise = resolve;
-    });
+    return {
+      id,
+      isMounted: overlay.isMounted,
+      isOpen: overlay.isOpen,
+      result: new Promise((resolve) => {
+        overlay.resolvePromise = resolve;
+      })
+    };
   };
   const close = (id, value) => {
     const overlay = getOverlay(id);
-    overlay.modelValue = false;
+    overlay.isOpen = false;
     if (overlay.resolvePromise) {
       overlay.resolvePromise(value);
       overlay.resolvePromise = void 0;

package/dist/runtime/prose/A.vue

@@ -8,14 +8,8 @@ const proseA = tv({ extend: tv(theme), ...appConfigProseA.b24ui?.prose?.a || {}
 
 <script setup>
 const props = defineProps({
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const b24ui = proseA({});
 </script>

package/dist/runtime/prose/Blockquote.vue

@@ -8,14 +8,8 @@ const proseBlockquote = tv({ extend: tv(theme), ...appConfigProseBlockquote.b24u
 
 <script setup>
 const props = defineProps({
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const b24ui = proseBlockquote({});
 </script>

package/dist/runtime/prose/Code.vue

@@ -9,18 +9,9 @@ const proseCode = tv({ extend: tv(theme), ...appConfigProseCode.b24ui?.prose?.co
 <script setup>
 import { computed } from "vue";
 const props = defineProps({
-  color: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  color: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const b24ui = computed(() => proseCode({
   color: props.color

package/dist/runtime/prose/Em.vue

@@ -8,14 +8,8 @@ const proseEm = tv({ extend: tv(theme), ...appConfigProseEm.b24ui?.prose?.em ||
 
 <script setup>
 const props = defineProps({
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const b24ui = proseEm({});
 </script>

package/dist/runtime/prose/H1.vue

@@ -8,14 +8,8 @@ const proseH1 = tv({ extend: tv(theme), ...appConfigProseH1.b24ui?.prose?.h1 ||
 
 <script setup>
 const props = defineProps({
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const b24ui = proseH1({});
 </script>

package/dist/runtime/prose/H2.vue

@@ -8,14 +8,8 @@ const proseH2 = tv({ extend: tv(theme), ...appConfigProseH2.b24ui?.prose?.h2 ||
 
 <script setup>
 const props = defineProps({
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const b24ui = proseH2({});
 </script>