@bitrix24/b24ui-nuxt 0.5.10 → 0.6.0

package/dist/runtime/components/Select.vue

@@ -8,7 +8,7 @@ const select = tv({ extend: tv(theme), ...appConfigSelect.b24ui?.select || {} })
 
 <script setup>
 import { computed, toRef } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import { Primitive, SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectScrollUpButton, SelectScrollDownButton, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useButtonGroup } from "../composables/useButtonGroup";
@@ -16,147 +16,44 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { compare, get, isArrayOfArray } from "../utils";
 import icons from "../dictionary/icons";
+import B24Avatar from "./Avatar.vue";
+import B24Chip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  noPadding: {
-    type: Boolean,
-    required: false
-  },
-  noBorder: {
-    type: Boolean,
-    required: false
-  },
-  underline: {
-    type: Boolean,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  tag: {
-    type: String,
-    required: false
-  },
-  tagColor: {
-    type: null,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  selectedIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  arrow: {
-    type: [Boolean, Object],
-    required: false
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  valueKey: {
-    type: null,
-    required: false,
-    default: "value"
-  },
-  labelKey: {
-    type: null,
-    required: false,
-    default: "label"
-  },
-  items: {
-    type: null,
-    required: false
-  },
-  defaultValue: {
-    type: null,
-    required: false
-  },
-  modelValue: {
-    type: null,
-    required: false
-  },
-  multiple: {
-    type: Boolean,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  autocomplete: {
-    type: String,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  trailing: {
-    type: Boolean,
-    required: false
-  }
+  id: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  noPadding: { type: Boolean, required: false },
+  noBorder: { type: Boolean, required: false },
+  underline: { type: Boolean, required: false },
+  rounded: { type: Boolean, required: false },
+  tag: { type: String, required: false },
+  tagColor: { type: null, required: false },
+  trailingIcon: { type: [Function, Object], required: false },
+  selectedIcon: { type: [Function, Object], required: false },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: Boolean, required: false, default: true },
+  valueKey: { type: null, required: false, default: "value" },
+  labelKey: { type: null, required: false, default: "label" },
+  items: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  autocomplete: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  trailing: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:open", "change", "blur", "focus", "update:modelValue"]);
 const slots = defineSlots();
@@ -255,7 +152,7 @@ function isSelectItem(item) {
               {{ displayedModelValue }}
             </span>
             <span v-else :class="b24ui.placeholder({ class: props.b24ui?.placeholder })">
-              {{ placeholder ?? "\xA0" }}
+              {{ placeholder ?? '\xA0' }}
             </span>
           </template>
         </slot>
@@ -293,6 +190,7 @@ function isSelectItem(item) {
                   :class="b24ui.item({ class: props.b24ui?.item, colorItem: isSelectItem(item) ? item?.color : void 0 })"
                   :disabled="isSelectItem(item) && item.disabled"
                   :value="isSelectItem(item) ? get(item, props.valueKey) : item"
+                  @select="isSelectItem(item) && item.onSelect?.($event)"
                 >
                   <slot name="item" :item="item" :index="index">
                     <slot name="item-leading" :item="item" :index="index">

package/dist/runtime/components/Select.vue.d.ts

@@ -1057,6 +1057,7 @@ interface SelectItemBase {
     type?: 'label' | 'separator' | 'item';
     value?: string | number;
     disabled?: boolean;
+    onSelect?(e?: Event): void;
     [key: string]: any;
 }
 export type SelectItem = SelectItemBase | AcceptableValue | boolean;

package/dist/runtime/components/SelectMenu.vue

@@ -9,8 +9,24 @@ const selectMenu = tv({ extend: tv(theme), ...appConfigSelectMenu.b24ui?.selectM
 <script setup>
 import { computed, toRef, toRaw } from "vue";
 import {
+  ComboboxRoot,
+  ComboboxArrow,
+  ComboboxAnchor,
+  ComboboxInput,
+  ComboboxTrigger,
+  ComboboxPortal,
+  ComboboxContent,
+  ComboboxViewport,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxSeparator,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  FocusScope,
   useForwardPropsEmits,
-  useFilter
+  useFilter,
+  Primitive
 } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
@@ -20,180 +36,58 @@ import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { compare, get, isArrayOfArray } from "../utils";
 import icons from "../dictionary/icons";
+import B24Avatar from "./Avatar.vue";
+import B24Chip from "./Chip.vue";
+import B24Input from "./Input.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  searchInput: {
-    type: [Boolean, Object],
-    required: false,
-    default: true
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  noPadding: {
-    type: Boolean,
-    required: false
-  },
-  noBorder: {
-    type: Boolean,
-    required: false
-  },
-  underline: {
-    type: Boolean,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  tag: {
-    type: String,
-    required: false
-  },
-  tagColor: {
-    type: null,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  selectedIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  arrow: {
-    type: [Boolean, Object],
-    required: false
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  valueKey: {
-    type: null,
-    required: false
-  },
-  labelKey: {
-    type: null,
-    required: false,
-    default: "label"
-  },
-  items: {
-    type: null,
-    required: false
-  },
-  defaultValue: {
-    type: null,
-    required: false
-  },
-  modelValue: {
-    type: null,
-    required: false
-  },
-  multiple: {
-    type: Boolean,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  createItem: {
-    type: [Boolean, String, Object],
-    required: false
-  },
-  filterFields: {
-    type: Array,
-    required: false
-  },
-  ignoreFilter: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  resetSearchTermOnBlur: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  highlightOnHover: {
-    type: Boolean,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  trailing: {
-    type: Boolean,
-    required: false
-  }
+  id: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  searchInput: { type: [Boolean, Object], required: false, default: true },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  noPadding: { type: Boolean, required: false },
+  noBorder: { type: Boolean, required: false },
+  underline: { type: Boolean, required: false },
+  rounded: { type: Boolean, required: false },
+  tag: { type: String, required: false },
+  tagColor: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  trailingIcon: { type: [Function, Object], required: false },
+  selectedIcon: { type: [Function, Object], required: false },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: Boolean, required: false, default: true },
+  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  items: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  createItem: { type: [Boolean, String, Object], required: false },
+  filterFields: { type: Array, required: false },
+  ignoreFilter: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  resetSearchTermOnBlur: { type: Boolean, required: false, default: true },
+  resetSearchTermOnSelect: { type: Boolean, required: false, default: true },
+  highlightOnHover: { type: Boolean, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  trailing: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:open", "change", "blur", "focus", "create", "highlight", "update:modelValue"]);
 const slots = defineSlots();
-const searchTerm = defineModel("searchTerm", {
-  "type": String,
-  ...{
-    default: ""
-  }
-});
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const { contains } = useFilter({ sensitivity: "base" });
-const rootProps = useForwardPropsEmits(reactivePick(props, "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "highlightOnHover"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover"), emits);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), type: "search" }));
@@ -273,6 +167,9 @@ function onUpdate(value) {
   emits("change", event);
   emitFormChange();
   emitFormInput();
+  if (props.resetSearchTermOnSelect) {
+    searchTerm.value = "";
+  }
 }
 function onUpdateOpen(value) {
   let timeoutId;
@@ -295,6 +192,16 @@ function onUpdateOpen(value) {
     }
   }
 }
+function onSelect(e, item) {
+  if (!isSelectItem(item)) {
+    return;
+  }
+  if (item.disabled) {
+    e.preventDefault();
+    return;
+  }
+  item.onSelect?.(e);
+}
 function isSelectItem(item) {
   return typeof item === "object" && item !== null;
 }
@@ -315,7 +222,7 @@ function isSelectItem(item) {
                 :is="icons.plus"
                 :class="b24ui.itemLeadingIcon({ addNew: true, class: props.b24ui?.itemLeadingIcon })"
               />
-              {{ t("selectMenu.create", { label: searchTerm }) }}
+              {{ t('selectMenu.create', { label: searchTerm }) }}
             </slot>
           </span>
         </ComboboxItem>
@@ -355,7 +262,7 @@ function isSelectItem(item) {
                 {{ displayedModelValue }}
               </span>
               <span v-else :class="b24ui.placeholder({ class: props.b24ui?.placeholder })">
-                {{ placeholder ?? "\xA0" }}
+                {{ placeholder ?? '\xA0' }}
               </span>
             </template>
           </slot>
@@ -381,7 +288,7 @@ function isSelectItem(item) {
 
             <ComboboxEmpty :class="b24ui.empty({ class: props.b24ui?.empty })">
               <slot name="empty" :search-term="searchTerm">
-                {{ searchTerm ? t("selectMenu.noMatch", { searchTerm }) : t("selectMenu.noData") }}
+                {{ searchTerm ? t('selectMenu.noMatch', { searchTerm }) : t('selectMenu.noData') }}
               </slot>
             </ComboboxEmpty>
 
@@ -401,7 +308,7 @@ function isSelectItem(item) {
                     :class="b24ui.item({ class: props.b24ui?.item, colorItem: isSelectItem(item) ? item?.color : void 0 })"
                     :disabled="isSelectItem(item) && item.disabled"
                     :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey) : item"
-                    @select="isSelectItem(item) && item.onSelect?.($event)"
+                    @select="onSelect($event, item)"
                   >
                     <slot name="item" :item="item" :index="index">
                       <slot name="item-leading" :item="item" :index="index">

package/dist/runtime/components/SelectMenu.vue.d.ts

@@ -1110,7 +1110,7 @@ interface _SelectMenuItem {
 }
 export type SelectMenuItem = _SelectMenuItem | AcceptableValue | boolean;
 type SelectMenuVariants = VariantProps<typeof selectMenu>;
-export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
+export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
     id?: string;
     /** The placeholder text when the select is empty. */
     placeholder?: string;

package/dist/runtime/components/Separator.vue

@@ -8,54 +8,21 @@ const separator = tv({ extend: tv(theme), ...appConfigSeparator.b24ui?.separator
 
 <script setup>
 import { computed } from "vue";
-import { useForwardProps } from "reka-ui";
+import { Separator, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import B24Avatar from "./Avatar.vue";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  type: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  decorative: {
-    type: Boolean,
-    required: false
-  }
+  as: { type: null, required: false },
+  label: { type: String, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  type: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  decorative: { type: Boolean, required: false }
 });
 const slots = defineSlots();
 const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));

package/dist/runtime/components/Sidebar.vue

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

package/dist/runtime/components/SidebarBody.vue

@@ -8,25 +8,12 @@ const sidebarBody = tv({ extend: tv(theme), ...appConfigSidebarBody.b24ui?.sideb
 
 <script setup>
 import { computed } from "vue";
+import { Primitive } from "reka-ui";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  scrollbarThin: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false, default: "div" },
+  scrollbarThin: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const b24ui = computed(() => sidebarBody({

package/dist/runtime/components/SidebarFooter.vue

@@ -7,20 +7,11 @@ const sidebarFooter = tv({ extend: tv(theme), ...appConfigSidebarFooter.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 = sidebarFooter();