@bitrix24/b24ui-nuxt 0.5.10 → 0.6.0

package/dist/runtime/components/NavbarSpacer.vue

@@ -7,20 +7,11 @@ const navbarSpacer = tv({ extend: tv(theme), ...appConfigNavbarSpacer.b24ui?.nav
 </script>
 
 <script setup>
+import { Primitive } from "reka-ui";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false, default: "div" },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const b24ui = navbarSpacer();

package/dist/runtime/components/NavigationMenu.vue

@@ -8,112 +8,41 @@ const navigationMenu = tv({ extend: tv(theme), ...appConfigNavigationMenu.b24ui?
 
 <script setup>
 import { computed, toRef } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
-import { isArrayOfArray } from "../utils";
+import { 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 B24Badge from "./Badge.vue";
+import B24Collapsible from "./Collapsible.vue";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  externalIcon: {
-    type: [Boolean, Function, Object],
-    required: false,
-    default: true
-  },
-  items: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  variant: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  collapsed: {
-    type: Boolean,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  highlightColor: {
-    type: null,
-    required: false
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  contentOrientation: {
-    type: null,
-    required: false,
-    default: "vertical"
-  },
-  arrow: {
-    type: Boolean,
-    required: false
-  },
-  labelKey: {
-    type: null,
-    required: false,
-    default: "label"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  modelValue: {
-    type: String,
-    required: false
-  },
-  defaultValue: {
-    type: String,
-    required: false
-  },
-  delayDuration: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  disableClickTrigger: {
-    type: Boolean,
-    required: false
-  },
-  disableHoverTrigger: {
-    type: Boolean,
-    required: false
-  },
-  skipDelayDuration: {
-    type: Number,
-    required: false
-  },
-  disablePointerLeaveClose: {
-    type: Boolean,
-    required: false
-  },
-  unmountOnHide: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
+  as: { type: null, required: false },
+  trailingIcon: { type: [Function, Object], required: false },
+  externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
+  items: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  collapsed: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  highlightColor: { type: null, required: false },
+  content: { type: Object, required: false },
+  contentOrientation: { type: null, required: false, default: "vertical" },
+  arrow: { type: Boolean, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  modelValue: { type: String, required: false },
+  defaultValue: { type: String, required: false },
+  delayDuration: { type: Number, required: false, default: 0 },
+  disableClickTrigger: { type: Boolean, required: false },
+  disableHoverTrigger: { type: Boolean, required: false },
+  skipDelayDuration: { type: Number, required: false },
+  disablePointerLeaveClose: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
@@ -142,6 +71,9 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
     }
   }
 });
+const getLabel = (item) => {
+  return get(item, props.labelKey);
+};
 const b24ui = computed(() => navigationMenu({
   orientation: props.orientation,
   contentOrientation: props.contentOrientation,
@@ -170,11 +102,11 @@ const lists = computed(
         </slot>
 
         <span
-          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+          v-if="(!collapsed || orientation !== 'vertical') && (getLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
           :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel, active })"
         >
           <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
-            {{ get(item, props.labelKey) }}
+            {{ getLabel(item) }}
           </slot>
 
           <Component
@@ -256,7 +188,7 @@ const lists = computed(
 
                       <div :class="b24ui.childLinkWrapper({ class: props.b24ui?.childLinkWrapper })">
                         <p :class="b24ui.childLinkLabel({ class: props.b24ui?.childLinkLabel, active: childActive })">
-                          {{ get(childItem, props.labelKey) }}
+                          {{ getLabel(childItem) }}
 
                           <Component
                             :is="typeof externalIcon === 'string' ? externalIcon : icons.external"

package/dist/runtime/components/OverlayProvider.vue

@@ -18,7 +18,7 @@ const onClose = (id, value) => {
     v-for="overlay in mountedOverlays"
     :key="overlay.id"
     v-bind="overlay.props"
-    v-model:open="overlay.modelValue"
+    v-model:open="overlay.isOpen"
     @close="(value) => onClose(overlay.id, value)"
     @after:leave="onAfterLeave(overlay.id)"
   />

package/dist/runtime/components/Popover.vue

@@ -13,59 +13,18 @@ import { useForwardPropsEmits } from "reka-ui";
 import { Popover, HoverCard } from "reka-ui/namespaced";
 import { reactivePick } from "@vueuse/core";
 const props = defineProps({
-  mode: {
-    type: String,
-    required: false,
-    default: "click"
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  arrow: {
-    type: [Boolean, Object],
-    required: false
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  dismissible: {
-    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
-  },
-  modal: {
-    type: Boolean,
-    required: false
-  },
-  openDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  closeDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  }
+  mode: { type: String, required: false, default: "click" },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: Boolean, required: false, default: true },
+  dismissible: { 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 },
+  modal: { type: Boolean, required: false },
+  openDelay: { type: Number, required: false, default: 0 },
+  closeDelay: { type: Number, required: false, default: 0 }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();

package/dist/runtime/components/Progress.vue

@@ -8,61 +8,22 @@ const progress = tv({ extend: tv(theme), ...appConfigProgress.b24ui?.progress ||
 
 <script setup>
 import { computed } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import { Primitive, ProgressRoot, ProgressIndicator, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useLocale } from "../composables/useLocale";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  max: {
-    type: [Number, Array],
-    required: false
-  },
-  status: {
-    type: Boolean,
-    required: false
-  },
-  inverted: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  animation: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  getValueLabel: {
-    type: Function,
-    required: false
-  },
-  modelValue: {
-    type: [Number, null],
-    required: false,
-    default: null
-  }
+  as: { type: null, required: false },
+  max: { type: [Number, Array], required: false },
+  status: { type: Boolean, required: false },
+  inverted: { type: Boolean, required: false, default: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  animation: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  getValueLabel: { type: Function, required: false },
+  modelValue: { type: [Number, null], required: false, default: null }
 });
 const emits = defineEmits(["update:modelValue", "update:max"]);
 const slots = defineSlots();

package/dist/runtime/components/RadioGroup.vue

@@ -8,91 +8,30 @@ const radioGroup = tv({ extend: tv(theme), ...appConfigRadioGroup.b24ui?.radioGr
 
 <script setup>
 import { computed, useId } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useFormField } from "../composables/useFormField";
 import { get } from "../utils";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  legend: {
-    type: String,
-    required: false
-  },
-  valueKey: {
-    type: String,
-    required: false,
-    default: "value"
-  },
-  labelKey: {
-    type: String,
-    required: false,
-    default: "label"
-  },
-  descriptionKey: {
-    type: String,
-    required: false,
-    default: "description"
-  },
-  items: {
-    type: Array,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  variant: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "vertical"
-  },
-  indicator: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  defaultValue: {
-    type: [String, Number, Object, null],
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  loop: {
-    type: Boolean,
-    required: false
-  },
-  modelValue: {
-    type: [String, Number, Object, null],
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  }
+  as: { type: null, required: false },
+  legend: { type: String, required: false },
+  valueKey: { type: String, required: false, default: "value" },
+  labelKey: { type: String, required: false, default: "label" },
+  descriptionKey: { type: String, required: false, default: "description" },
+  items: { type: Array, required: false },
+  size: { type: null, required: false },
+  variant: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  indicator: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  defaultValue: { type: [String, Number, Object, null], required: false },
+  disabled: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  modelValue: { type: [String, Number, Object, null], required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue", "change"]);
 const slots = defineSlots();

package/dist/runtime/components/Range.vue

@@ -8,75 +8,27 @@ const range = tv({ extend: tv(theme), ...appConfigRange.b24ui?.range || {} });
 
 <script setup>
 import { computed } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useFormField } from "../composables/useFormField";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  defaultValue: {
-    type: [Number, Array],
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  inverted: {
-    type: Boolean,
-    required: false
-  },
-  min: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  max: {
-    type: Number,
-    required: false,
-    default: 100
-  },
-  step: {
-    type: Number,
-    required: false,
-    default: 1
-  },
-  minStepsBetweenThumbs: {
-    type: Number,
-    required: false
-  }
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  defaultValue: { type: [Number, Array], required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  name: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  inverted: { type: Boolean, required: false },
+  min: { type: Number, required: false, default: 0 },
+  max: { type: Number, required: false, default: 100 },
+  step: { type: Number, required: false, default: 1 },
+  minStepsBetweenThumbs: { type: Number, required: false }
 });
 const emits = defineEmits(["update:modelValue", "change"]);
-const modelValue = defineModel({
-  "type": [Number, Array]
-});
+const modelValue = defineModel({ type: [Number, Array] });
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
 const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const defaultRangeValue = computed(() => {