@bitrix24/b24ui-nuxt 0.5.10 → 0.6.0

package/dist/runtime/components/Checkbox.vue

@@ -8,72 +8,30 @@ const checkbox = tv({ extend: tv(theme), ...appConfigCheckbox.b24ui?.checkbox ||
 
 <script setup>
 import { computed, useId } from "vue";
-import { useForwardProps } from "reka-ui";
+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
-  }
+  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 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();

package/dist/runtime/components/Chip.vue

@@ -8,55 +8,22 @@ const chip = tv({ extend: tv(theme), ...appConfigChip.b24ui?.chip || {} });
 
 <script setup>
 import { computed } from "vue";
+import { Primitive, Slot } from "reka-ui";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  text: {
-    type: [String, Number],
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  position: {
-    type: null,
-    required: false
-  },
-  inset: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  standalone: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false },
+  text: { type: [String, Number], required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  position: { type: null, required: false },
+  inset: { type: Boolean, required: false, default: false },
+  standalone: { type: Boolean, required: false, default: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
-const show = defineModel("show", {
-  "type": Boolean,
-  ...{
-    default: true
-  }
-});
+const show = defineModel("show", { type: Boolean, ...{ default: true } });
 const { size } = useAvatarGroup(props);
 const b24ui = computed(() => chip({
   color: props.color,

package/dist/runtime/components/Collapsible.vue

@@ -7,38 +7,16 @@ const collapsible = tv({ extend: tv(theme), ...appConfigCollapsible.b24ui?.colla
 </script>
 
 <script setup>
-import { useForwardPropsEmits } from "reka-ui";
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  unmountOnHide: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();

package/dist/runtime/components/Container.vue

@@ -7,15 +7,10 @@ const container = tv({ extend: tv(theme), ...appConfigContainer.b24ui?.container
 </script>
 
 <script setup>
+import { Primitive } from "reka-ui";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  }
+  as: { type: null, required: false },
+  class: { type: null, required: false }
 });
 defineSlots();
 </script>

package/dist/runtime/components/Countdown.vue

@@ -9,72 +9,27 @@ const countdown = tv({ extend: tv(theme), ...appConfigCountdown.b24ui?.countdown
 <script setup>
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 import { useComponentIcons } from "../composables/useComponentIcons";
+import { Primitive } from "reka-ui";
+import B24Avatar from "./Avatar.vue";
 const MILLISECONDS_SECOND = 1e3;
 const MILLISECONDS_MINUTE = 60 * MILLISECONDS_SECOND;
 const MILLISECONDS_HOUR = 60 * MILLISECONDS_MINUTE;
 const MILLISECONDS_DAY = 24 * MILLISECONDS_HOUR;
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "span"
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  emitEvents: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  seconds: {
-    type: [Number, String],
-    required: false,
-    default: 0
-  },
-  showMinutes: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  useCircle: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  interval: {
-    type: Number,
-    required: false,
-    default: 1e3
-  },
-  needStartImmediately: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  now: {
-    type: Function,
-    required: false,
-    default: () => Date.now()
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false, default: "span" },
+  size: { type: null, required: false },
+  emitEvents: { type: Boolean, required: false, default: true },
+  seconds: { type: [Number, String], required: false, default: 0 },
+  showMinutes: { type: Boolean, required: false, default: true },
+  useCircle: { type: Boolean, required: false, default: false },
+  interval: { type: Number, required: false, default: 1e3 },
+  needStartImmediately: { type: Boolean, required: false, default: true },
+  now: { type: Function, required: false, default: () => Date.now() },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false }
 });
 const emits = defineEmits(["start", "end", "abort", "progress"]);
 defineSlots();

package/dist/runtime/components/DescriptionList.vue

@@ -9,41 +9,17 @@ const descriptionList = tv({ extend: tv(theme), ...appConfigDescriptionList.b24u
 <script setup>
 import { computed } from "vue";
 import { get } from "../utils";
+import B24Avatar from "./Avatar.vue";
+import B24Button from "./Button.vue";
 const props = defineProps({
-  legend: {
-    type: String,
-    required: false
-  },
-  text: {
-    type: String,
-    required: false
-  },
-  labelKey: {
-    type: String,
-    required: false,
-    default: "label"
-  },
-  descriptionKey: {
-    type: String,
-    required: false,
-    default: "description"
-  },
-  items: {
-    type: Array,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  legend: { type: String, required: false },
+  text: { type: String, required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  descriptionKey: { type: String, required: false, default: "description" },
+  items: { type: Array, required: false },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const b24ui = computed(() => descriptionList({

package/dist/runtime/components/DropdownMenu.vue

@@ -9,70 +9,25 @@ const dropdownMenu = tv({ extend: tv(theme), ...appConfigDropdownMenu.b24ui?.dro
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import { useForwardPropsEmits } from "reka-ui";
+import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { omit } from "../utils";
+import B24DropdownMenuContent from "./DropdownMenuContent.vue";
 const props = defineProps({
-  size: {
-    type: null,
-    required: false
-  },
-  items: {
-    type: null,
-    required: false
-  },
-  checkedIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  externalIcon: {
-    type: [Boolean, Function, Object],
-    required: false,
-    default: true
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  arrow: {
-    type: [Boolean, Object],
-    required: false
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  labelKey: {
-    type: null,
-    required: false,
-    default: "label"
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  modal: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
+  size: { type: null, required: false },
+  items: { type: null, required: false },
+  checkedIcon: { type: [Function, Object], required: false },
+  externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: Boolean, required: false, default: true },
+  labelKey: { type: null, required: false, default: "label" },
+  disabled: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();

package/dist/runtime/components/DropdownMenuContent.vue

@@ -6,118 +6,53 @@ const _dropdownMenu = tv(theme)();
 
 <script setup>
 import { computed } from "vue";
+import { DropdownMenu } from "reka-ui/namespaced";
 import { useForwardPropsEmits } from "reka-ui";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useLocale } from "../composables/useLocale";
-import { omit, isArrayOfArray } from "../utils";
+import { omit, get, isArrayOfArray } from "../utils";
+import { pickLinkProps } from "../utils/link";
 import icons from "../dictionary/icons";
+import B24LinkBase from "./LinkBase.vue";
+import B24Link from "./Link.vue";
+import B24Avatar from "./Avatar.vue";
+import B24Kbd from "./Kbd.vue";
+import B24DropdownMenuContent from "./DropdownMenuContent.vue";
 const props = defineProps({
-  items: {
-    type: null,
-    required: false
-  },
-  portal: {
-    type: Boolean,
-    required: false
-  },
-  sub: {
-    type: Boolean,
-    required: false
-  },
-  labelKey: {
-    type: null,
-    required: true
-  },
-  checkedIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  externalIcon: {
-    type: [Boolean, Function, Object],
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: true
-  },
-  b24uiOverride: {
-    type: null,
-    required: false
-  },
-  loop: {
-    type: Boolean,
-    required: false
-  },
-  side: {
-    type: null,
-    required: false
-  },
-  sideOffset: {
-    type: Number,
-    required: false
-  },
-  align: {
-    type: null,
-    required: false
-  },
-  alignOffset: {
-    type: Number,
-    required: false
-  },
-  avoidCollisions: {
-    type: Boolean,
-    required: false
-  },
-  collisionBoundary: {
-    type: null,
-    required: false
-  },
-  collisionPadding: {
-    type: [Number, Object],
-    required: false
-  },
-  arrowPadding: {
-    type: Number,
-    required: false
-  },
-  sticky: {
-    type: String,
-    required: false
-  },
-  hideWhenDetached: {
-    type: Boolean,
-    required: false
-  },
-  positionStrategy: {
-    type: String,
-    required: false
-  },
-  updatePositionStrategy: {
-    type: String,
-    required: false
-  },
-  disableUpdateOnLayoutShift: {
-    type: Boolean,
-    required: false
-  },
-  prioritizePosition: {
-    type: Boolean,
-    required: false
-  },
-  reference: {
-    type: null,
-    required: false
-  }
+  items: { type: null, required: false },
+  portal: { type: Boolean, required: false },
+  sub: { type: Boolean, required: false },
+  labelKey: { type: null, required: true },
+  checkedIcon: { type: [Function, Object], required: false },
+  externalIcon: { type: [Boolean, Function, Object], required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: true },
+  b24uiOverride: { type: null, required: false },
+  loop: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  positionStrategy: { type: String, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  disableUpdateOnLayoutShift: { type: Boolean, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  reference: { type: null, required: false }
 });
 const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"]);
 const slots = defineSlots();
 const { dir } = useLocale();
 const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "checkedIcon", "externalIcon", "class", "b24ui", "b24uiOverride"), emits);
 const proxySlots = omit(slots, ["default"]);
+const getLabel = (item) => {
+  return get(item, props.labelKey);
+};
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate();
 const childrenIcon = computed(() => dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight);
 const groups = computed(
@@ -147,9 +82,9 @@ const groups = computed(
         />
       </slot>
 
-      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="b24ui.itemLabel({ class: b24uiOverride?.itemLabel, active })">
+      <span v-if="getLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="b24ui.itemLabel({ class: b24uiOverride?.itemLabel, active })">
         <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
-          {{ get(item, props.labelKey) }}
+          {{ getLabel(item) }}
         </slot>
         <Component
           :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
@@ -193,7 +128,7 @@ const groups = computed(
               as="button"
               type="button"
               :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
+              :text-value="getLabel(item)"
               :class="b24ui.item({ class: b24uiOverride?.item, color: item?.color })"
             >
               <ReuseItemTemplate :item="item" :index="index" />
@@ -223,7 +158,7 @@ const groups = computed(
             v-else-if="item.type === 'checkbox'"
             :model-value="item.checked"
             :disabled="item.disabled"
-            :text-value="get(item, props.labelKey)"
+            :text-value="getLabel(item)"
             :class="b24ui.item({ class: [b24uiOverride?.item, item.class], color: item?.color })"
             @update:model-value="item.onUpdateChecked"
             @select="item.onSelect"
@@ -234,7 +169,7 @@ const groups = computed(
             v-else
             as-child
             :disabled="item.disabled"
-            :text-value="get(item, props.labelKey)"
+            :text-value="getLabel(item)"
             @select="item.onSelect"
           >
             <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>