@bitrix24/b24ui-nuxt 0.7.2 → 1.0.1

package/dist/runtime/components/SidebarLayout.vue

@@ -3,31 +3,42 @@ import theme from "#build/b24ui/sidebar-layout";
 </script>
 
 <script setup>
-import { ref, computed, watch, onUnmounted } from "vue";
+import { ref, computed, watch, onUnmounted, readonly, provide, inject } from "vue";
 import { useRoute } from "vue-router";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { sidebarLayoutInjectionKey } from "../composables/useSidebarLayout";
 import { tv } from "../utils/tv";
 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 HamburgerMenuIcon from "@bitrix24/b24icons-vue/outline/HamburgerMenuIcon";
 import Cross50Icon from "@bitrix24/b24icons-vue/actions/Cross50Icon";
+import BtnSpinnerIcon from "@bitrix24/b24icons-vue/button-specialized/BtnSpinnerIcon";
 const props = defineProps({
   as: { type: null, required: false, default: "div" },
   useLightContent: { type: Boolean, required: false, default: true },
+  isInner: { type: Boolean, required: false, default: false },
+  offContentScrollbar: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const { t } = useLocale();
 const appConfig = useAppConfig();
 const route = useRoute();
 const isUseSideBar = computed(() => !!slots.sidebar);
+const isUseNavbar = computed(() => !!slots.navbar);
 const openSidebarSlideover = ref(false);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.sidebarLayout || {} })({
   useSidebar: isUseSideBar.value,
-  useLightContent: Boolean(props.useLightContent)
+  useNavbar: isUseNavbar.value,
+  useLightContent: Boolean(props.useLightContent),
+  loading: Boolean(isLoading.value),
+  inner: Boolean(props.isInner),
+  offContentScrollbar: Boolean(props.offContentScrollbar)
 }));
 const closeModal = () => {
   if (openSidebarSlideover.value) {
@@ -35,7 +46,7 @@ const closeModal = () => {
   }
 };
 const stopWatcher = watch(
-  () => route.path,
+  () => route?.path,
   () => closeModal(),
   { immediate: true }
 );
@@ -45,81 +56,155 @@ onUnmounted(() => {
 const handleNavigationClick = () => {
   closeModal();
 };
+const parentApi = inject(sidebarLayoutInjectionKey, null);
+const rootRef = parentApi ? parentApi.rootRef : ref(false);
+const isLoading = ref(false);
+const isParentLoading = computed(
+  () => parentApi?.isLoading.value ?? false
+);
+const isRootLoading = computed(
+  () => rootRef.value
+);
+const api = {
+  isLoading: readonly(isLoading),
+  isParentLoading: readonly(isParentLoading),
+  isRootLoading: readonly(isRootLoading),
+  setLoading: (value) => {
+    isLoading.value = value;
+  },
+  setParentLoading: (value) => {
+    if (parentApi) {
+      parentApi.setLoading(value);
+    }
+  },
+  setRootLoading: (value) => {
+    rootRef.value = value;
+  },
+  rootRef
+};
+provide(sidebarLayoutInjectionKey, api);
+defineExpose({
+  api,
+  isLoading,
+  setLoading: api.setLoading,
+  setRootLoading: api.setRootLoading
+});
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive
+    :data-state="isLoading ? 'loading' : 'show'"
+    :as="as"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+  >
+    <!-- isLoading -->
+    <slot name="loading" :is-loading="isLoading">
+      <div
+        v-if="isLoading"
+        :class="b24ui.loadingWrapper({ class: props.b24ui?.loadingWrapper })"
+      >
+        <BtnSpinnerIcon
+          :class="b24ui.loadingIcon({ class: props.b24ui?.loadingIcon })"
+          aria-hidden="true"
+        />
+      </div>
+    </slot>
     <template v-if="isUseSideBar">
       <div :class="b24ui.sidebar({ class: props.b24ui?.sidebar })">
         <B24Sidebar>
-          <slot name="sidebar" :handle-click="handleNavigationClick" />
+          <slot name="sidebar" :handle-click="handleNavigationClick" :is-loading="isLoading" />
         </B24Sidebar>
       </div>
     </template>
 
-    <header :class="b24ui.header({ class: props.b24ui?.header })">
-      <div
-        v-if="isUseSideBar"
-        :class="b24ui.headerMenuIcon({ class: props.b24ui?.headerMenuIcon })"
+    <div :class="b24ui.contentWrapper({ class: props.b24ui?.contentWrapper })">
+      <header
+        v-if="isUseNavbar"
+        :class="b24ui.header({ class: props.b24ui?.header })"
       >
-        <!-- @todo: lang -->
-        <B24Slideover
-          v-model:open="openSidebarSlideover"
-          title="Navigation"
-          description="Content navigation"
-          side="left"
-          :b24ui="{ content: b24ui.sidebarSlideoverContainer({ class: props.b24ui?.sidebarSlideoverContainer }) }"
+        <div
+          v-if="isUseSideBar"
+          :class="b24ui.headerMenuIcon({ class: props.b24ui?.headerMenuIcon })"
         >
-          <!-- @todo: lang -->
-          <B24Button
-            aria-label="Open navigation"
-            color="link"
-            size="sm"
-            :class="b24ui.headerPaddings({ class: props.b24ui?.headerPaddings })"
-            :icon="MenuIcon"
-          />
+          <B24Slideover
+            v-model:open="openSidebarSlideover"
+            :title="t('sidebarLayout.slideoverTitle')"
+            :description="t('sidebarLayout.slideoverDescription')"
+            side="left"
+            :b24ui="{
+  content: b24ui.sidebarSlideoverContainer({ class: props.b24ui?.sidebarSlideoverContainer })
+}"
+          >
+            <B24Button
+              color="air-tertiary"
+              size="md"
+              :icon="HamburgerMenuIcon"
+              :aria-label="t('sidebarLayout.open')"
+            />
+
+            <template #content>
+              <div :class="b24ui.sidebarSlideover({ class: props.b24ui?.sidebarSlideover })">
+                <B24Sidebar>
+                  <div :class="b24ui.sidebarSlideoverBtnClose({ class: props.b24ui?.sidebarSlideoverBtnClose })">
+                    <B24ModalDialogClose>
+                      <B24Button
+                        color="air-tertiary"
+                        size="lg"
+                        :icon="Cross50Icon"
+                        :aria-label="t('sidebarLayout.close')"
+                      />
+                    </B24ModalDialogClose>
+                  </div>
+
+                  <slot name="sidebar" :handle-click="handleNavigationClick" :is-loading="isLoading" />
+                </B24Sidebar>
+              </div>
+            </template>
+          </B24Slideover>
+        </div>
+        <div :class="b24ui.headerWrapper({ class: props.b24ui?.headerWrapper })">
+          <B24Navbar>
+            <slot name="navbar" :is-loading="isLoading" />
+          </B24Navbar>
+        </div>
+      </header>
 
-          <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>
+      <template v-if="!!slots['content-top'] || !!slots['content-actions'] || !!slots['default']">
+        <main :class="b24ui.container({ class: props.b24ui?.container })">
+          <template v-if="!!slots['content-top']">
+            <!-- Page Top -->
+            <div :class="b24ui.pageTopWrapper({ class: props.b24ui?.pageTopWrapper })">
+              <slot name="content-top" :is-loading="isLoading" />
+            </div>
+          </template>
 
-                <slot name="sidebar" :handle-click="handleNavigationClick" />
-              </B24Sidebar>
+          <template v-if="!!slots['content-actions']">
+            <!-- Page Actions -->
+            <div :class="b24ui.pageActionsWrapper({ class: props.b24ui?.pageActionsWrapper })">
+              <slot name="content-actions" :is-loading="isLoading" />
             </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 -->
-    <slot name="content-top" />
+          <template v-if="!!slots['default']">
+            <!-- Page Content -->
+            <div
+              :data-content="props.useLightContent ? 'use-light' : 'not-set'"
+              :class="b24ui.containerWrapper({ class: props.b24ui?.containerWrapper })"
+            >
+              <div :class="b24ui.containerWrapperInner({ class: props.b24ui?.containerWrapperInner })">
+                <slot :is-loading="isLoading" />
+              </div>
+            </div>
+          </template>
+        </main>
+      </template>
 
-    <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>
+      <template v-if="!!slots['content-bottom']">
+        <!-- Page Bottom -->
+        <div :class="b24ui.pageBottomWrapper({ class: props.b24ui?.pageBottomWrapper })">
+          <slot name="content-bottom" :is-loading="isLoading" />
         </div>
-      </main>
-    </template>
-
-    <slot name="content-bottom" />
-  </Primitive>
+      </template>
+    </div>
+  </primitive>
 </template>

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

@@ -1,6 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/sidebar-layout';
 import type { ComponentConfig } from '../types/utils';
+import type { Ref } from 'vue';
+import type { SidebarLayoutApi } from '../composables/useSidebarLayout';
 type SidebarLayout = ComponentConfig<typeof theme, AppConfig, 'sidebarLayout'>;
 export interface SidebarLayoutProps {
     /**
@@ -8,33 +10,84 @@ export interface SidebarLayoutProps {
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * The content is placed on a light background.
+     * @defaultValue 'true'
+     */
     useLightContent?: boolean;
+    /**
+     * Set inner mode. Use in slider, modal and etc
+     * @defaultValue 'false'
+     */
+    isInner?: boolean;
+    /**
+     * Off scrollbar control of the content area in inner mode.
+     * @defaultValue 'false'
+     */
+    offContentScrollbar?: boolean;
     class?: any;
-    b24ui?: SidebarLayout['slots'];
+    b24ui?: Pick<SidebarLayout['slots'], 'root' | 'sidebar' | 'sidebarSlideoverContainer' | 'sidebarSlideover' | 'sidebarSlideoverBtnClose' | 'contentWrapper' | 'header' | 'headerMenuIcon' | 'headerWrapper' | 'container' | 'containerWrapper' | 'pageTopWrapper' | 'pageActionsWrapper' | 'containerWrapperInner' | 'pageBottomWrapper' | 'loadingWrapper' | 'loadingIcon'>;
 }
 export interface SidebarLayoutSlots {
     /**
-     * Menu for all screen sizes.
+     * Left menu.
      * @param props
      * @param props.handleClick - Handler for navigation click events
+     * @param props.isLoading - loading state
      */
     'sidebar'(props: {
         handleClick: () => void;
+        isLoading: boolean;
+    }): any;
+    /**
+     * Top menu.
+     */
+    'navbar'(props?: {
+        handleClick: () => void;
+        isLoading: boolean;
     }): any;
     /**
-     * Menu for mobile screen sizes.
+     * Content above the page. Used for title, filter, etc.
+     */
+    'content-top': (props?: {
+        isLoading: boolean;
+    }) => any;
+    /**
+     * Content above the page. Use for show actions.
      */
-    'navbar'(props?: {}): any;
+    'content-actions': (props?: {
+        isLoading: boolean;
+    }) => any;
     /**
      * The page content.
      */
-    'default'(props?: {}): any;
-    'content-top': (props?: {}) => any;
-    'content-bottom': (props?: {}) => any;
+    'default'(props?: {
+        isLoading: boolean;
+    }): any;
+    /**
+     * Content below the page.
+     */
+    'content-bottom': (props?: {
+        isLoading: boolean;
+    }) => any;
+    /**
+     * Loading state. You need to use `useSidebarLayout` to control it.
+     */
+    'loading': (props?: {
+        isLoading: boolean;
+    }) => any;
+}
+export interface SidebarLayoutInstance {
+    api: SidebarLayoutApi;
+    isLoading: Readonly<Ref<boolean>>;
+    setLoading: (value: boolean) => void;
+    setRootLoading: (value: boolean) => void;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarLayoutProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarLayoutProps, SidebarLayoutInstance, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarLayoutProps> & Readonly<{}>, {
     as: any;
+    offContentScrollbar: boolean;
     useLightContent: boolean;
+    isInner: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarLayoutSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -11,10 +11,13 @@ export interface SidebarSectionProps {
     class?: any;
     b24ui?: SidebarSection['slots'];
 }
+/**
+ * @todo add Pick<Xxxx
+ */
 export interface SidebarSectionSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSectionProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarSectionProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSectionProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSectionSlots>;
 export default _default;

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

@@ -11,10 +11,13 @@ export interface SidebarSpacerProps {
     class?: any;
     b24ui?: SidebarSpacer['slots'];
 }
+/**
+ * @todo add Pick<Xxxx
+ */
 export interface SidebarSpacerSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarSpacerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSpacerProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidebarSpacerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SidebarSpacerProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SidebarSpacerSlots>;
 export default _default;

package/dist/runtime/components/Skeleton.vue

@@ -8,11 +8,15 @@ import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
 const props = defineProps({
+  accent: { type: null, required: false, default: "default" },
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false }
 });
 const appConfig = useAppConfig();
-const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.skeleton || {} }));
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.skeleton || {} })({
+  accent: props.accent
+}));
 </script>
 
 <template>
@@ -22,7 +26,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.skeleto
     aria-label="loading"
     aria-live="polite"
     role="alert"
-    :class="b24ui({ class: props.class })"
+    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
   >
     <slot />
   </Primitive>

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

@@ -1,12 +1,23 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/skeleton';
+import type { ComponentConfig } from '../types/utils';
+type Skeleton = ComponentConfig<typeof theme, AppConfig, 'skeleton'>;
 export interface SkeletonProps {
+    /**
+     * @defaultValue 'default'
+     */
+    accent?: Skeleton['variants']['accent'];
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
     class?: any;
+    b24ui?: Skeleton['slots'];
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
+    accent: Skeleton["variants"]["accent"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 export default _default;