@bitrix24/b24ui-nuxt 0.5.10 → 0.6.0

package/dist/runtime/components/Avatar.vue

@@ -8,46 +8,20 @@ const avatar = tv({ extend: tv(theme), ...appConfigAvatar.b24ui?.avatar || {} })
 
 <script setup>
 import { ref, computed, watch } from "vue";
+import { Primitive, Slot } from "reka-ui";
+import ImageComponent from "#build/b24ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "span"
-  },
-  src: {
-    type: String,
-    required: false
-  },
-  alt: {
-    type: String,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  text: {
-    type: String,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  style: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false, default: "span" },
+  src: { type: String, required: false },
+  alt: { type: String, required: false },
+  icon: { type: [Function, Object], required: false },
+  text: { type: String, required: false },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  style: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const fallback = computed(
   () => props.text || (props.alt || "").replace(/[+\-*)(}\][{]/g, "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2)
@@ -96,7 +70,7 @@ function onError() {
     <Slot v-else v-bind="$attrs">
       <slot>
         <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-        <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || "\xA0" }}</span>
+        <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || '\xA0' }}</span>
       </slot>
     </Slot>
   </Primitive>

package/dist/runtime/components/AvatarGroup.vue

@@ -8,28 +8,15 @@ const avatarGroup = tv({ extend: tv(theme), ...appConfigAvatarGroup.b24ui?.avata
 
 <script setup>
 import { computed, provide } from "vue";
+import { Primitive } from "reka-ui";
 import { avatarGroupInjectionKey } from "../composables/useAvatarGroup";
+import B24Avatar from "./Avatar.vue";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  max: {
-    type: [Number, String],
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  max: { type: [Number, String], required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const b24ui = computed(() => avatarGroup({

package/dist/runtime/components/Badge.vue

@@ -8,70 +8,27 @@ const badge = tv({ extend: tv(theme), ...appConfigBadge.b24ui?.badge || {} });
 
 <script setup>
 import { computed } from "vue";
+import { Primitive } from "reka-ui";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
+import Cross20Icon from "@bitrix24/b24icons-vue/actions/Cross20Icon";
+import B24Avatar from "./Avatar.vue";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "span"
-  },
-  label: {
-    type: [String, Number],
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  depth: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  useLink: {
-    type: Boolean,
-    required: false
-  },
-  useClose: {
-    type: Boolean,
-    required: false
-  },
-  onCloseClick: {
-    type: [Function, Array],
-    required: false
-  },
-  useFill: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  trailing: {
-    type: Boolean,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  }
+  as: { type: null, required: false, default: "span" },
+  label: { type: [String, Number], required: false },
+  color: { type: null, required: false },
+  depth: { type: null, required: false },
+  size: { type: null, required: false },
+  useLink: { type: Boolean, required: false },
+  useClose: { type: Boolean, required: false },
+  onCloseClick: { type: [Function, Array], required: false },
+  useFill: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [Function, Object], required: false }
 });
 defineSlots();
 async function onCloseClickWrapper(event) {

package/dist/runtime/components/Button.vue

@@ -12,187 +12,65 @@ import { useForwardProps } from "reka-ui";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
+import { omit } from "../utils";
 import { pickLinkProps } from "../utils/link";
+import B24Avatar from "./Avatar.vue";
+import B24Link from "./Link.vue";
+import B24LinkBase from "./LinkBase.vue";
+import ChevronDownIcon from "@bitrix24/b24icons-vue/actions/ChevronDownIcon";
+import LoaderWaitIcon from "@bitrix24/b24icons-vue/animated/LoaderWaitIcon";
+import LoaderClockIcon from "@bitrix24/b24icons-vue/animated/LoaderClockIcon";
+import SpinnerIcon from "@bitrix24/b24icons-vue/specialized/SpinnerIcon";
 const props = defineProps({
-  label: {
-    type: String,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  activeColor: {
-    type: null,
-    required: false
-  },
-  depth: {
-    type: null,
-    required: false
-  },
-  activeDepth: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  block: {
-    type: Boolean,
-    required: false
-  },
-  loadingAuto: {
-    type: Boolean,
-    required: false
-  },
-  normalCase: {
-    type: Boolean,
-    required: false
-  },
-  useWait: {
-    type: Boolean,
-    required: false
-  },
-  useClock: {
-    type: Boolean,
-    required: false
-  },
-  useDropdown: {
-    type: Boolean,
-    required: false
-  },
-  onClick: {
-    type: [Function, Array],
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  activeClass: {
-    type: String,
-    required: false,
-    default: ""
-  },
-  inactiveClass: {
-    type: String,
-    required: false,
-    default: ""
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  as: {
-    type: null,
-    required: false
-  },
-  type: {
-    type: null,
-    required: false,
-    default: "button"
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  active: {
-    type: Boolean,
-    required: false,
-    default: void 0
-  },
-  exact: {
-    type: Boolean,
-    required: false
-  },
-  exactQuery: {
-    type: [Boolean, String],
-    required: false
-  },
-  exactHash: {
-    type: Boolean,
-    required: false
-  },
-  isAction: {
-    type: Boolean,
-    required: false
-  },
-  to: {
-    type: null,
-    required: false
-  },
-  href: {
-    type: null,
-    required: false
-  },
-  external: {
-    type: Boolean,
-    required: false
-  },
-  target: {
-    type: [String, Object, null],
-    required: false
-  },
-  rel: {
-    type: [String, Object, null],
-    required: false
-  },
-  noRel: {
-    type: Boolean,
-    required: false
-  },
-  prefetchedClass: {
-    type: String,
-    required: false
-  },
-  prefetch: {
-    type: Boolean,
-    required: false
-  },
-  prefetchOn: {
-    type: [String, Object],
-    required: false
-  },
-  noPrefetch: {
-    type: Boolean,
-    required: false
-  },
-  exactActiveClass: {
-    type: String,
-    required: false
-  },
-  ariaCurrentValue: {
-    type: String,
-    required: false
-  },
-  viewTransition: {
-    type: Boolean,
-    required: false
-  },
-  replace: {
-    type: Boolean,
-    required: false
-  }
+  label: { type: String, required: false },
+  color: { type: null, required: false },
+  activeColor: { type: null, required: false },
+  depth: { type: null, required: false },
+  activeDepth: { type: null, required: false },
+  size: { type: null, required: false },
+  rounded: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  normalCase: { type: Boolean, required: false },
+  useWait: { type: Boolean, required: false },
+  useClock: { type: Boolean, required: false },
+  useDropdown: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
+  class: { type: null, required: false },
+  activeClass: { type: String, required: false, default: "" },
+  inactiveClass: { type: String, required: false, default: "" },
+  b24ui: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  isAction: { type: Boolean, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
 });
 const slots = defineSlots();
 const linkProps = useForwardProps(pickLinkProps(props));
+const proxyLinkProps = computed(() => {
+  return omit(linkProps.value, ["type", "disabled", "onClick"]);
+});
 const { orientation, size: buttonSize, noSplit } = useButtonGroup(props);
 const loadingAutoState = ref(false);
 const formLoading = inject(formLoadingInjectionKey, void 0);
@@ -254,7 +132,7 @@ const b24ui = computed(() => tv({
     :type="type"
     :disabled="disabled || isLoading"
     :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
-    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
+    v-bind="proxyLinkProps"
     custom
   >
     <B24LinkBase

package/dist/runtime/components/ButtonGroup.vue

@@ -8,30 +8,14 @@ const buttonGroup = tv({ extend: tv(theme), ...appConfigButtonGroup.b24ui?.butto
 
 <script setup>
 import { provide, computed } from "vue";
+import { Primitive } from "reka-ui";
 import { buttonGroupInjectionKey } from "../composables/useButtonGroup";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  noSplit: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  class: {
-    type: null,
-    required: false
-  }
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  noSplit: { type: Boolean, required: false, default: false },
+  class: { type: null, required: false }
 });
 defineSlots();
 provide(buttonGroupInjectionKey, computed(() => ({

package/dist/runtime/components/Calendar.vue

@@ -13,158 +13,45 @@ import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
 import { reactiveOmit } from "@vueuse/core";
 import { useLocale } from "../composables/useLocale";
 import icons from "../dictionary/icons";
+import B24Button from "./Button.vue";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  nextYearIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  nextYear: {
-    type: Object,
-    required: false
-  },
-  nextMonthIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  nextMonth: {
-    type: Object,
-    required: false
-  },
-  prevYearIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  prevYear: {
-    type: Object,
-    required: false
-  },
-  prevMonthIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  prevMonth: {
-    type: Object,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  range: {
-    type: Boolean,
-    required: false
-  },
-  multiple: {
-    type: Boolean,
-    required: false
-  },
-  monthControls: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  yearControls: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  defaultValue: {
-    type: null,
-    required: false
-  },
-  modelValue: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  defaultPlaceholder: {
-    type: null,
-    required: false
-  },
-  placeholder: {
-    type: null,
-    required: false
-  },
-  allowNonContiguousRanges: {
-    type: Boolean,
-    required: false
-  },
-  pagedNavigation: {
-    type: Boolean,
-    required: false
-  },
-  preventDeselect: {
-    type: Boolean,
-    required: false
-  },
-  weekStartsOn: {
-    type: Number,
-    required: false
-  },
-  weekdayFormat: {
-    type: String,
-    required: false
-  },
-  fixedWeeks: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  maxValue: {
-    type: null,
-    required: false
-  },
-  minValue: {
-    type: null,
-    required: false
-  },
-  numberOfMonths: {
-    type: Number,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  readonly: {
-    type: Boolean,
-    required: false
-  },
-  initialFocus: {
-    type: Boolean,
-    required: false
-  },
-  isDateDisabled: {
-    type: Function,
-    required: false
-  },
-  isDateUnavailable: {
-    type: Function,
-    required: false
-  },
-  nextPage: {
-    type: Function,
-    required: false
-  },
-  prevPage: {
-    type: Function,
-    required: false
-  }
+  as: { type: null, required: false },
+  nextYearIcon: { type: [Function, Object], required: false },
+  nextYear: { type: Object, required: false },
+  nextMonthIcon: { type: [Function, Object], required: false },
+  nextMonth: { type: Object, required: false },
+  prevYearIcon: { type: [Function, Object], required: false },
+  prevYear: { type: Object, required: false },
+  prevMonthIcon: { type: [Function, Object], required: false },
+  prevMonth: { type: Object, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  range: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  monthControls: { type: Boolean, required: false, default: true },
+  yearControls: { type: Boolean, required: false, default: true },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  defaultPlaceholder: { type: null, required: false },
+  placeholder: { type: null, required: false },
+  allowNonContiguousRanges: { type: Boolean, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  weekStartsOn: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false, default: true },
+  maxValue: { type: null, required: false },
+  minValue: { type: null, required: false },
+  numberOfMonths: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  initialFocus: { type: Boolean, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  nextPage: { type: Function, required: false },
+  prevPage: { type: Function, required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder", "update:startValue"]);
 defineSlots();