@bitrix24/b24ui-nuxt 0.5.10 → 0.6.0

package/dist/runtime/components/Form.vue

@@ -13,51 +13,18 @@ import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, f
 import { validateSchema } from "../utils/form";
 import { FormValidationException } from "../types/form";
 const props = defineProps({
-  id: {
-    type: [String, Number],
-    required: false
-  },
-  schema: {
-    type: null,
-    required: false
-  },
-  state: {
-    type: Object,
-    required: true
-  },
-  validate: {
-    type: Function,
-    required: false
-  },
-  validateOn: {
-    type: Array,
-    required: false,
-    default() {
-      return ["input", "blur", "change"];
-    }
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  validateOnInputDelay: {
-    type: Number,
-    required: false,
-    default: 300
-  },
-  transform: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  onSubmit: {
-    type: Function,
-    required: false
-  }
+  id: { type: [String, Number], required: false },
+  schema: { type: null, required: false },
+  state: { type: Object, required: true },
+  validate: { type: Function, required: false },
+  validateOn: { type: Array, required: false, default() {
+    return ["input", "blur", "change"];
+  } },
+  disabled: { type: Boolean, required: false },
+  validateOnInputDelay: { type: Number, required: false, default: 300 },
+  transform: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  onSubmit: { type: Function, required: false }
 });
 const emits = defineEmits(["submit", "error"]);
 defineSlots();

package/dist/runtime/components/FormField.vue

@@ -8,64 +8,24 @@ const formField = tv({ extend: tv(theme), ...appConfigFormField.b24ui?.formField
 
 <script setup>
 import { computed, ref, inject, provide, useId } from "vue";
+import { Primitive, Label } from "reka-ui";
 import { formFieldInjectionKey, inputIdInjectionKey } from "../composables/useFormField";
+import WarningIcon from "@bitrix24/b24icons-vue/main/WarningIcon";
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  errorPattern: {
-    type: null,
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  description: {
-    type: String,
-    required: false
-  },
-  help: {
-    type: String,
-    required: false
-  },
-  error: {
-    type: [String, Boolean],
-    required: false
-  },
-  hint: {
-    type: String,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  eagerValidation: {
-    type: Boolean,
-    required: false
-  },
-  validateOnInputDelay: {
-    type: Number,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  errorPattern: { type: null, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  help: { type: String, required: false },
+  error: { type: [String, Boolean], required: false },
+  hint: { type: String, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  eagerValidation: { type: Boolean, required: false },
+  validateOnInputDelay: { type: Number, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const b24ui = computed(() => formField({

package/dist/runtime/components/Input.vue

@@ -8,125 +8,44 @@ const input = tv({ extend: tv(theme), ...appConfigInput.b24ui?.input || {} });
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
+import { Primitive } from "reka-ui";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
+import B24Avatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  type: {
-    type: null,
-    required: false,
-    default: "text"
-  },
-  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
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  autocomplete: {
-    type: null,
-    required: false,
-    default: "off"
-  },
-  autofocus: {
-    type: Boolean,
-    required: false
-  },
-  autofocusDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  tag: {
-    type: String,
-    required: false
-  },
-  tagColor: {
-    type: null,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  trailing: {
-    type: Boolean,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  }
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  type: { type: null, required: false, default: "text" },
+  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 },
+  required: { type: Boolean, required: false },
+  autocomplete: { type: null, required: false, default: "off" },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false },
+  tag: { type: String, required: false },
+  tagColor: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [Function, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
-const [modelValue, modelModifiers] = defineModel({
-  "type": [String, Number, null]
-});
+const [modelValue, modelModifiers] = defineModel({ type: [String, Number, null] });
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);

package/dist/runtime/components/InputMenu.vue

@@ -7,8 +7,8 @@ const inputMenu = tv({ extend: tv(theme), ...appConfigInputMenu.b24ui?.inputMenu
 </script>
 
 <script setup>
-import { computed, ref, toRef, onMounted, toRaw, nextTick } from "vue";
-import { useForwardPropsEmits, useFilter } from "reka-ui";
+import { computed, ref, toRef, onMounted, toRaw } from "vue";
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from "reka-ui";
 import { defu } from "defu";
 import { isEqual } from "ohash/utils";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
@@ -18,196 +18,61 @@ 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";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  type: {
-    type: null,
-    required: false,
-    default: "text"
-  },
-  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
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  autofocus: {
-    type: Boolean,
-    required: false
-  },
-  autofocusDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  selectedIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  deleteIcon: {
-    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
-  },
-  tag: {
-    type: String,
-    required: false
-  },
-  tagColor: {
-    type: null,
-    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
-  },
-  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
-  }
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  type: { type: null, required: false, default: "text" },
+  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 },
+  required: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  trailingIcon: { type: [Function, Object], required: false },
+  selectedIcon: { type: [Function, Object], required: false },
+  deleteIcon: { 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 },
+  tag: { type: String, required: false },
+  tagColor: { type: null, 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, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "highlightOnHover", "ignoreFilter"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover", "ignoreFilter"), emits);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
@@ -292,6 +157,9 @@ function onUpdate(value) {
   emits("change", event);
   emitFormChange();
   emitFormInput();
+  if (props.resetSearchTermOnSelect) {
+    searchTerm.value = "";
+  }
 }
 function onBlur(event) {
   emits("blur", event);
@@ -302,17 +170,23 @@ function onFocus(event) {
   emitFormFocus();
 }
 function onUpdateOpen(value) {
+  let timeoutId;
   if (!value) {
     const event = new FocusEvent("blur");
     emits("blur", event);
     emitFormBlur();
+    if (props.resetSearchTermOnBlur) {
+      const STATE_ANIMATION_DELAY_MS = 100;
+      timeoutId = setTimeout(() => {
+        searchTerm.value = "";
+      }, STATE_ANIMATION_DELAY_MS);
+    }
   } else {
     const event = new FocusEvent("focus");
     emits("focus", event);
+    emitFormFocus();
+    clearTimeout(timeoutId);
   }
-  nextTick(() => {
-    searchTerm.value = "";
-  });
 }
 function onRemoveTag(event) {
   if (props.multiple) {
@@ -322,6 +196,16 @@ function onRemoveTag(event) {
     onUpdate(filteredValue);
   }
 }
+function onSelect(e, item) {
+  if (!isInputItem(item)) {
+    return;
+  }
+  if (item.disabled) {
+    e.preventDefault();
+    return;
+  }
+  item.onSelect?.(e);
+}
 function isInputItem(item) {
   return typeof item === "object" && item !== null;
 }
@@ -344,7 +228,7 @@ defineExpose({
               :is="icons.plus"
               :class="b24ui.itemLeadingIcon({ addNew: true, class: props.b24ui?.itemLeadingIcon })"
             />
-            {{ t("inputMenu.create", { label: searchTerm }) }}
+            {{ t('inputMenu.create', { label: searchTerm }) }}
           </slot>
         </span>
       </ComboboxItem>
@@ -397,7 +281,7 @@ defineExpose({
           </TagsInputItemDelete>
         </TagsInputItem>
 
-        <ComboboxInput as-child @update:model-value="searchTerm = $event">
+        <ComboboxInput v-model="searchTerm" as-child>
           <TagsInputInput
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
@@ -447,7 +331,7 @@ defineExpose({
       <ComboboxContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
         <ComboboxEmpty :class="b24ui.empty({ class: props.b24ui?.empty })">
           <slot name="empty" :search-term="searchTerm">
-            {{ searchTerm ? t("inputMenu.noMatch", { searchTerm }) : t("inputMenu.noData") }}
+            {{ searchTerm ? t('inputMenu.noMatch', { searchTerm }) : t('inputMenu.noData') }}
           </slot>
         </ComboboxEmpty>
 
@@ -467,7 +351,7 @@ defineExpose({
                 :class="b24ui.item({ class: props.b24ui?.item, colorItem: isInputItem(item) ? item?.color : void 0 })"
                 :disabled="isInputItem(item) && item.disabled"
                 :value="props.valueKey && isInputItem(item) ? get(item, String(props.valueKey)) : item"
-                @select="isInputItem(item) && item.onSelect?.($event)"
+                @select="onSelect($event, item)"
               >
                 <slot name="item" :item="item" :index="index">
                   <slot name="item-leading" :item="item" :index="index">