@bitrix24/b24ui-nuxt 0.5.10 → 0.6.0

package/dist/runtime/components/SidebarHeader.vue

@@ -7,20 +7,11 @@ const sidebarHeader = tv({ extend: tv(theme), ...appConfigSidebarHeader.b24ui?.s
 </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 = sidebarHeader();

package/dist/runtime/components/SidebarHeading.vue

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

package/dist/runtime/components/SidebarLayout.vue

@@ -2,31 +2,25 @@
 import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/sidebar-layout";
 import { tv } from "../utils/tv";
+import { useRoute } from "vue-router";
 const appConfigSidebarLayout = _appConfig;
 const sidebarLayout = tv({ extend: tv(theme), ...appConfigSidebarLayout.b24ui?.sidebarLayout || {} });
 </script>
 
 <script setup>
 import { ref, computed, watch, onUnmounted } from "vue";
+import { Primitive } from "reka-ui";
+import B24Slideover from "./Slideover.vue";
+import B24Sidebar from "./Sidebar.vue";
+import B24ModalDialogClose from "./ModalDialogClose.vue";
+import B24Navbar from "./Navbar.vue";
+import MenuIcon from "@bitrix24/b24icons-vue/main/MenuIcon";
+import Cross50Icon from "@bitrix24/b24icons-vue/actions/Cross50Icon";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  useLightContent: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false, default: "div" },
+  useLightContent: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const route = useRoute();

package/dist/runtime/components/SidebarSection.vue

@@ -7,20 +7,11 @@ const sidebarSection = tv({ extend: tv(theme), ...appConfigSidebarSection.b24ui?
 </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 = sidebarSection();

package/dist/runtime/components/SidebarSpacer.vue

@@ -7,20 +7,11 @@ const sidebarSpacer = tv({ extend: tv(theme), ...appConfigSidebarSpacer.b24ui?.s
 </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 = sidebarSpacer();

package/dist/runtime/components/Skeleton.vue

@@ -7,15 +7,10 @@ const skeleton = tv({ extend: tv(theme), ...appConfigSkeleton.b24ui?.skeleton ||
 </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 }
 });
 </script>
 

package/dist/runtime/components/Slideover.vue

@@ -8,87 +8,29 @@ const slideover = tv({ extend: tv(theme), ...appConfigSlideover.b24ui?.slideover
 
 <script setup>
 import { computed, toRef } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+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 = defineProps({
-  title: {
-    type: String,
-    required: false
-  },
-  description: {
-    type: String,
-    required: false
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  overlay: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  overlayBlur: {
-    type: null,
-    required: false,
-    default: "auto"
-  },
-  transition: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  side: {
-    type: null,
-    required: false,
-    default: "right"
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  close: {
-    type: [Boolean, Object],
-    required: false,
-    default: true
-  },
-  closeIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  dismissible: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  scrollbarThin: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  modal: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  overlayBlur: { type: null, required: false, default: "auto" },
+  transition: { type: Boolean, required: false, default: true },
+  side: { type: null, required: false, default: "right" },
+  portal: { type: Boolean, required: false, default: true },
+  close: { type: [Boolean, Object], required: false, default: true },
+  closeIcon: { type: [Function, Object], required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  scrollbarThin: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["after:leave", "update:open"]);
 const slots = defineSlots();

package/dist/runtime/components/StackedLayout.vue

@@ -2,31 +2,25 @@
 import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/stacked-layout";
 import { tv } from "../utils/tv";
+import { useRoute } from "vue-router";
 const appConfigStackedLayout = _appConfig;
 const stackedLayout = tv({ extend: tv(theme), ...appConfigStackedLayout.b24ui?.stackedLayout || {} });
 </script>
 
 <script setup>
 import { ref, computed, watch, onUnmounted } from "vue";
+import { Primitive } from "reka-ui";
+import B24Slideover from "./Slideover.vue";
+import B24Sidebar from "./Sidebar.vue";
+import B24ModalDialogClose from "./ModalDialogClose.vue";
+import B24Navbar from "./Navbar.vue";
+import MenuIcon from "@bitrix24/b24icons-vue/main/MenuIcon";
+import Cross50Icon from "@bitrix24/b24icons-vue/actions/Cross50Icon";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  useLightContent: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false, default: "div" },
+  useLightContent: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const route = useRoute();

package/dist/runtime/components/Switch.vue

@@ -8,88 +8,34 @@ const switchTv = tv({ extend: tv(theme), ...appConfigSwitch.b24ui?.switch || {}
 
 <script setup>
 import { computed, useId } from "vue";
-import { useForwardProps } from "reka-ui";
+import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useFormField } from "../composables/useFormField";
+import { omit } from "../utils";
+import icons from "../dictionary/icons";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  loadingIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  checkedIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  uncheckedIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  description: {
-    type: String,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  value: {
-    type: String,
-    required: false
-  },
-  defaultValue: {
-    type: Boolean,
-    required: false
-  }
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [Function, Object], required: false },
+  checkedIcon: { type: [Function, Object], required: false },
+  uncheckedIcon: { type: [Function, Object], required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  value: { type: String, required: false },
+  defaultValue: { type: Boolean, required: false }
 });
 const slots = defineSlots();
 const emits = defineEmits(["change"]);
-const modelValue = defineModel({
-  "type": Boolean,
-  ...{
-    default: void 0
-  }
-});
+const modelValue = defineModel({ type: Boolean, ...{ 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/Tabs.vue

@@ -8,74 +8,32 @@ const tabs = tv({ extend: tv(theme), ...appConfigTabs.b24ui?.tabs || {} });
 
 <script setup>
 import { computed } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import { get } from "../utils";
+import B24Avatar from "./Avatar.vue";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  items: {
-    type: Array,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  variant: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  content: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  labelKey: {
-    type: String,
-    required: false,
-    default: "label"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  defaultValue: {
-    type: null,
-    required: false,
-    default: "0"
-  },
-  modelValue: {
-    type: null,
-    required: false
-  },
-  activationMode: {
-    type: String,
-    required: false
-  },
-  unmountOnHide: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
+  as: { type: null, required: false },
+  items: { type: Array, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  content: { type: Boolean, required: false, default: true },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  defaultValue: { type: null, required: false, default: "0" },
+  modelValue: { type: null, required: false },
+  activationMode: { type: String, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "activationMode", "unmountOnHide"), emits);
+const getLabel = (item) => {
+  return get(item, props.labelKey);
+};
 const b24ui = computed(() => tabs({
   color: props.color,
   variant: props.variant,
@@ -99,8 +57,8 @@ const b24ui = computed(() => tabs({
           <B24Avatar v-else-if="item.avatar" :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()" v-bind="item.avatar" :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })" />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || !!slots.default" :class="b24ui.label({ class: props.b24ui?.label })">
-          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
+        <span v-if="getLabel(item) || !!slots.default" :class="b24ui.label({ class: props.b24ui?.label })">
+          <slot :item="item" :index="index">{{ getLabel(item) }}</slot>
         </span>
 
         <slot name="trailing" :item="item" :index="index" />