@bitrix24/b24ui-nuxt 0.5.4 → 0.5.6

package/dist/meta.mjs

@@ -64252,13 +64252,13 @@ const B24UIMeta = {
           "description": "",
           "tags": [],
           "required": false,
-          "type": "Partial<{ root: string; sidebar: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }> | undefined",
+          "type": "Partial<{ root: string; sidebar: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerMenuIcon: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }> | undefined",
           "schema": {
             "kind": "enum",
-            "type": "Partial<{ root: string; sidebar: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }> | undefined",
+            "type": "Partial<{ root: string; sidebar: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerMenuIcon: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }> | undefined",
             "schema": {
               "0": "undefined",
-              "1": "Partial<{ root: string; sidebar: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }>"
+              "1": "Partial<{ root: string; sidebar: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerMenuIcon: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }>"
             }
           }
         }
@@ -65312,28 +65312,102 @@ const B24UIMeta = {
           "schema": "any",
           "default": "\"div\""
         },
+        {
+          "name": "useSidebar",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          }
+        },
+        {
+          "name": "useLightContent",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          }
+        },
         {
           "name": "b24ui",
           "global": false,
           "description": "",
           "tags": [],
           "required": false,
-          "type": "Partial<{ root: string; container: string; }> | undefined",
+          "type": "Partial<{ root: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerMenuIcon: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }> | undefined",
           "schema": {
             "kind": "enum",
-            "type": "Partial<{ root: string; container: string; }> | undefined",
+            "type": "Partial<{ root: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerMenuIcon: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }> | undefined",
             "schema": {
               "0": "undefined",
-              "1": "Partial<{ root: string; container: string; }>"
+              "1": "Partial<{ root: string; sidebarSlideoverContainer: string; sidebarSlideover: string; sidebarSlideoverBtnClose: string; header: string; headerMenuIcon: string; headerPaddings: string; headerWrapper: string; container: string; containerWrapper: string; containerWrapperInner: string; }>"
             }
           }
         }
       ],
       "slots": [
+        {
+          "name": "sidebar",
+          "type": "{ handleClick: () => void; }",
+          "description": "Menu for mobile screen sizes.",
+          "schema": {
+            "kind": "object",
+            "type": "{ handleClick: () => void; }",
+            "schema": {
+              "handleClick": {
+                "name": "handleClick",
+                "global": false,
+                "description": "",
+                "tags": [],
+                "required": true,
+                "type": "() => void",
+                "schema": {
+                  "kind": "event",
+                  "type": "(): void"
+                }
+              }
+            }
+          }
+        },
+        {
+          "name": "navbar",
+          "type": "{} | undefined",
+          "description": "Menu for desktop screen sizes.",
+          "schema": {
+            "kind": "enum",
+            "type": "{} | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": {
+                "kind": "object",
+                "type": "{}",
+                "schema": {}
+              }
+            }
+          }
+        },
         {
           "name": "default",
           "type": "{} | undefined",
-          "description": "",
+          "description": "The page content.",
           "schema": {
             "kind": "enum",
             "type": "{} | undefined",

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.BfU7TRfz.cjs');
+const templates = require('./shared/b24ui-nuxt.GF6icKT2.cjs');
 require('node:url');
 require('scule');
 

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CTERD7XY.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.Cdw6m70Y.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Form.vue

@@ -216,6 +216,7 @@ async function onSubmitWrapper(payload: Event) {
   try {
     event.data = await _validate({ nested: true, transform: props.transform })
     await props.onSubmit?.(event)
+    dirtyFields.clear()
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
       throw error

package/dist/runtime/components/FormField.vue

@@ -91,6 +91,7 @@ provide(formFieldInjectionKey, computed(() => ({
   errorPattern: props.errorPattern,
   hint: props.hint,
   description: props.description,
+  help: props.help,
   ariaId
 }) as FormFieldInjectedOptions<FormFieldProps>))
 </script>

package/dist/runtime/components/InputMenu.vue

@@ -223,7 +223,7 @@ export interface InputMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
-import { computed, ref, toRef, onMounted, toRaw } from 'vue'
+import { computed, ref, toRef, onMounted, toRaw, nextTick } 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'
@@ -322,11 +322,7 @@ const filteredGroups = computed(() => {
 
     return fields.some(field => contains(get(item, field), searchTerm.value))
   })).filter(group => group.filter(item =>
-    /**
-     * @memo fix not obj
-     * @see selectMenu
-     */
-    typeof item !== 'object' || (isInputItem(item) && (!item.type || !['label', 'separator'].includes(item.type)))
+    !isInputItem(item) || (isInputItem(item) && (!item.type || !['label', 'separator'].includes(item.type)))
   ).length > 0)
 })
 const filteredItems = computed(() => filteredGroups.value.flatMap(group => group))
@@ -390,6 +386,10 @@ function onUpdateOpen(value: boolean) {
     const event = new FocusEvent('focus')
     emits('focus', event)
   }
+
+  nextTick(() => {
+    searchTerm.value = ''
+  })
 }
 
 function onRemoveTag(event: any) {
@@ -477,7 +477,7 @@ defineExpose({
           </TagsInputItemDelete>
         </TagsInputItem>
 
-        <ComboboxInput v-model="searchTerm" :display-value="displayValue" as-child>
+        <ComboboxInput as-child @update:model-value="searchTerm = $event">
           <TagsInputInput
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
@@ -491,7 +491,6 @@ defineExpose({
       <ComboboxInput
         v-else
         ref="inputRef"
-        v-model="searchTerm"
         :display-value="displayValue"
         v-bind="{ ...$attrs, ...ariaAttrs }"
         :type="type"
@@ -499,6 +498,7 @@ defineExpose({
         :required="required"
         @blur="onBlur"
         @focus="onFocus"
+        @update:model-value="searchTerm = $event"
       />
 
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">

package/dist/runtime/components/SelectMenu.vue

@@ -328,11 +328,7 @@ const filteredGroups = computed(() => {
 
     return fields.some(field => contains(get(item, field), searchTerm.value))
   })).filter(group => group.filter(item =>
-    /**
-     * @memo fix not obj
-     * @see inputMenu
-     */
-    typeof item !== 'object' || (isSelectItem(item) && (!item.type || !['label', 'separator'].includes(item.type)))
+    !isSelectItem(item) || (isSelectItem(item) && (!item.type || !['label', 'separator'].includes(item.type)))
   ).length > 0)
 })
 const filteredItems = computed(() => filteredGroups.value.flatMap(group => group))

package/dist/runtime/components/SidebarLayout.vue

@@ -98,8 +98,9 @@ const handleNavigationClick = () => {
     <header :class="b24ui.header({ class: props.b24ui?.header })">
       <div
         v-if="isUseSideBar"
-        :class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })"
+        :class="b24ui.headerMenuIcon({ class: props.b24ui?.headerMenuIcon })"
       >
+        <!-- @todo: lang -->
         <B24Slideover
           v-model:open="openSidebarSlideover"
           title="Navigation"
@@ -112,6 +113,7 @@ const handleNavigationClick = () => {
             aria-label="Open navigation"
             color="link"
             size="sm"
+            :class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })"
             :icon="MenuIcon"
           />
 

package/dist/runtime/components/StackedLayout.vue

@@ -4,6 +4,7 @@ import type { AppConfig } from '@nuxt/schema'
 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 as AppConfig & { b24ui: { stackedLayout: Partial<typeof theme> } }
 
@@ -17,33 +18,136 @@ export interface StackedLayoutProps {
    * @defaultValue 'div'
    */
   as?: any
+  useSidebar?: boolean
+  useLightContent?: boolean
   class?: any
   b24ui?: Partial<typeof stackedLayout.slots>
 }
 
 export interface StackedLayoutSlots {
+  /**
+   * Menu for mobile screen sizes.
+   * @param props
+   * @param props.handleClick - Handler for navigation click events
+   */
+  sidebar(props: { handleClick: () => void }): any
+  /**
+   * Menu for desktop screen sizes.
+   */
+  navbar(props?: {}): any
+  /**
+   * The page content.
+   */
   default(props?: {}): any
 }
 </script>
 
 <script setup lang="ts">
+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 = withDefaults(defineProps<StackedLayoutProps>(), {
   as: 'div'
 })
 const slots = defineSlots<StackedLayoutSlots>()
 
-// eslint-disable-next-line vue/no-dupe-keys
-const b24ui = stackedLayout()
+const route = useRoute()
+const isUseSideBar = computed(() => !!slots.sidebar)
+const openSidebarSlideover = ref(false)
+
+const b24ui = computed(() => stackedLayout({
+  useSidebar: isUseSideBar.value,
+  useLightContent: Boolean(props.useLightContent)
+}))
+
+const closeModal = () => {
+  if (openSidebarSlideover.value) {
+    openSidebarSlideover.value = false
+  }
+}
+
+const stopWatcher = watch(
+  () => route.path,
+  () => closeModal(),
+  { immediate: true }
+)
+
+onUnmounted(() => {
+  stopWatcher()
+})
+
+const handleNavigationClick = () => {
+  closeModal()
+}
 </script>
 
 <template>
   <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
-    <template v-if="!!slots.default">
-      <div :class="b24ui.container({ class: props.b24ui?.container })">
-        <slot />
+    <header :class="b24ui.header({ class: props.b24ui?.header })">
+      <div
+        v-if="isUseSideBar"
+        :class="b24ui.headerMenuIcon({ class: props.b24ui?.headerMenuIcon })"
+      >
+        <!-- @todo: lang -->
+        <B24Slideover
+          v-model:open="openSidebarSlideover"
+          title="Navigation"
+          description="Content navigation"
+          side="left"
+          :b24ui="{ content: b24ui.sidebarSlideoverContainer({ class: props.b24ui?.sidebarSlideoverContainer }) }"
+        >
+          <!-- @todo: lang -->
+          <B24Button
+            aria-label="Open navigation"
+            color="link"
+            size="sm"
+            :class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })"
+            :icon="MenuIcon"
+          />
+
+          <template #content>
+            <div :class="b24ui.sidebarSlideover({ class: props.b24ui?.sidebarSlideover })">
+              <B24Sidebar>
+                <div :class="b24ui.sidebarSlideoverBtnClose({ class: props.b24ui?.sidebarSlideoverBtnClose })">
+                  <!-- @todo: lang -->
+                  <B24ModalDialogClose>
+                    <B24Button
+                      color="link"
+                      size="lg"
+                      :icon="Cross50Icon"
+                      aria-label="Close navigation"
+                    />
+                  </B24ModalDialogClose>
+                </div>
+
+                <slot name="sidebar" :handle-click="handleNavigationClick" />
+              </B24Sidebar>
+            </div>
+          </template>
+        </B24Slideover>
+      </div>
+      <div :class="b24ui.headerWrapper({ class: props.b24ui?.headerWrapper })">
+        <B24Navbar :class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })">
+          <slot name="navbar" />
+        </B24Navbar>
       </div>
+    </header>
+
+    <!-- Page Content -->
+    <template v-if="!!slots.default">
+      <main :class="b24ui.container({ class: props.b24ui?.container })">
+        <div :class="b24ui.containerWrapper({ class: props.b24ui?.containerWrapper })">
+          <div :class="b24ui.containerWrapperInner({ class: props.b24ui?.containerWrapperInner })">
+            <slot />
+          </div>
+        </div>
+      </main>
     </template>
   </Primitive>
 </template>

package/dist/runtime/composables/useFormField.js

@@ -55,7 +55,7 @@ export function useFormField(props, opts) {
     emitFormFocus,
     ariaAttrs: computed(() => {
       if (!formField?.value) return;
-      const descriptiveAttrs = ["error", "hint", "description"].filter((type) => formField?.value?.[type]).map((type) => `${formField?.value.ariaId}-${type}`) || [];
+      const descriptiveAttrs = ["error", "hint", "description", "help"].filter((type) => formField?.value?.[type]).map((type) => `${formField?.value.ariaId}-${type}`) || [];
       return {
         "aria-describedby": descriptiveAttrs.join(" "),
         "aria-invalid": !!formField?.value.error

package/dist/runtime/types/form.d.ts

@@ -68,6 +68,7 @@ export interface FormFieldInjectedOptions<T> {
     errorPattern?: RegExp;
     hint?: string;
     description?: string;
+    help?: string;
     ariaId: string;
 }
 export interface ValidateReturnSchema<T> {

package/dist/runtime/types/index.d.ts

@@ -40,7 +40,6 @@ export * from '../components/Toast.vue';
 export * from '../components/Toaster.vue';
 export * from '../components/Tooltip.vue';
 export * from '../components/SidebarLayout.vue';
-export * from '../components/StackedLayout.vue';
 export * from '../components/Sidebar.vue';
 export * from '../components/SidebarHeader.vue';
 export * from '../components/SidebarBody.vue';
@@ -48,6 +47,7 @@ export * from '../components/SidebarFooter.vue';
 export * from '../components/SidebarSection.vue';
 export * from '../components/SidebarHeading.vue';
 export * from '../components/SidebarSpacer.vue';
+export * from '../components/StackedLayout.vue';
 export * from '../components/Navbar.vue';
 export * from '../components/NavbarSection.vue';
 export * from '../components/NavbarDivider.vue';

package/dist/runtime/types/index.js

@@ -40,7 +40,6 @@ export * from "../components/Toast.vue";
 export * from "../components/Toaster.vue";
 export * from "../components/Tooltip.vue";
 export * from "../components/SidebarLayout.vue";
-export * from "../components/StackedLayout.vue";
 export * from "../components/Sidebar.vue";
 export * from "../components/SidebarHeader.vue";
 export * from "../components/SidebarBody.vue";
@@ -48,6 +47,7 @@ export * from "../components/SidebarFooter.vue";
 export * from "../components/SidebarSection.vue";
 export * from "../components/SidebarHeading.vue";
 export * from "../components/SidebarSpacer.vue";
+export * from "../components/StackedLayout.vue";
 export * from "../components/Navbar.vue";
 export * from "../components/NavbarSection.vue";
 export * from "../components/NavbarDivider.vue";

package/dist/shared/{b24ui-nuxt.CTERD7XY.mjs → b24ui-nuxt.Cdw6m70Y.mjs}

@@ -2204,7 +2204,7 @@ const formField = {
 
 const input = {
   slots: {
-    root: "relative inline-flex items-center w-full",
+    root: "isolate relative inline-flex items-center w-full",
     base: [
       "px-3",
       "w-full py-0 border-0 focus:outline-none",
@@ -2997,7 +2997,7 @@ const inputNumber = () => {
   const input$1 = input;
   return {
     slots: {
-      root: "relative inline-flex items-center",
+      root: "isolate relative inline-flex items-center",
       base: [
         "w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
         "placeholder:text-base-400",
@@ -4287,6 +4287,7 @@ const navigationMenu = {
       class: {
         viewportWrapper: [
           "top-[calc(100%+0.4rem)]"
+          // perspective-[2000px]
         ].join(" "),
         viewport: [
           "rounded-b-md",
@@ -5178,7 +5179,7 @@ const select = () => {
   return defuFn(
     {
       slots: {
-        root: () => "relative inline-flex items-center w-full",
+        root: () => "isolate relative inline-flex items-center w-full",
         base: () => [
           "px-3",
           "relative inline-flex items-center group",
@@ -6005,7 +6006,7 @@ const tabs = {
 
 const textarea = {
   slots: {
-    root: "relative inline-flex items-center w-full",
+    root: "isolate relative inline-flex items-center w-full",
     base: [
       "w-full px-3 py-1.5 border-0 focus:outline-none",
       "disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
@@ -6530,6 +6531,7 @@ const sidebarLayout = {
       "flex items-center",
       "lg:hidden"
     ].join(" "),
+    headerMenuIcon: "",
     headerPaddings: [
       "py-2.5"
     ].join(" "),
@@ -6586,12 +6588,88 @@ const sidebarLayout = {
 
 const stackedLayout = {
   slots: {
-    root: "",
-    container: ""
+    root: [
+      "min-h-svh w-full",
+      "flex flex-col",
+      "lg:px-2",
+      "relative isolate"
+    ].join(" "),
+    sidebarSlideoverContainer: [
+      "max-w-80",
+      "p-2",
+      "bg-transparent dark:bg-transparent sm:shadow-none"
+    ].join(" "),
+    sidebarSlideover: [
+      "h-full",
+      "overflow-hidden",
+      "flex flex-col",
+      "bg-white dark:bg-base-dark",
+      "ring-1 ring-base-950/5 dark:ring-white/10",
+      "shadow-xs",
+      "rounded-lg"
+    ].join(" "),
+    sidebarSlideoverBtnClose: [
+      "-mb-3",
+      "px-4 pt-3"
+    ].join(" "),
+    header: [
+      "px-4",
+      "flex items-center",
+      /**
+       * @memo this sync with NavigationMenu
+       */
+      "h-[84px]"
+    ].join(" "),
+    headerMenuIcon: [
+      "lg:hidden"
+    ].join(" "),
+    headerPaddings: [
+      "py-2.5"
+    ].join(" "),
+    headerWrapper: [
+      "min-w-0",
+      "flex-1"
+    ].join(" "),
+    container: [
+      "flex-1 flex flex-col",
+      "lg:min-w-0",
+      "pb-2"
+    ].join(" "),
+    containerWrapper: [
+      "grow"
+    ].join(" "),
+    containerWrapperInner: ""
+  },
+  variants: {
+    useSidebar: {
+      true: "",
+      false: ""
+    },
+    useLightContent: {
+      true: {
+        root: [
+          "bg-white dark:bg-white/10",
+          "lg:bg-base-50 dark:lg:bg-base-dark"
+        ].join(" "),
+        containerWrapper: [
+          "p-6 lg:p-10",
+          "lg:bg-white dark:lg:bg-white/10",
+          "lg:ring-1 lg:ring-base-950/5 dark:lg:ring-white/10",
+          "lg:shadow-xs",
+          "lg:rounded-lg"
+        ].join(" ")
+      },
+      false: {
+        container: [
+          "px-4"
+        ].join(" ")
+      }
+    }
   },
-  variants: {},
   compoundVariants: [],
-  defaultVariants: {}
+  defaultVariants: {
+    useLightContent: true
+  }
 };
 
 const sidebar = {