@retailcrm/embed-ui-v1-components 0.9.22 → 0.9.23-alpha.2

package/dist/remote.cjs

@@ -1347,6 +1347,15 @@ const UiNumberStepper = remote.defineRemoteComponent(
     "violation"
   ]
 );
+const UiPageFooterType = "UiPageFooter";
+const UiPageFooter = remote.defineRemoteComponent(
+  UiPageFooterType,
+  [],
+  [
+    "actions",
+    "aside"
+  ]
+);
 const events$1 = [
   "blur",
   "change",
@@ -4111,6 +4120,7 @@ const createEndpointRoot = async (channel) => {
     "UiModalWindow",
     "UiModalWindowSurface",
     "UiNumberStepper",
+    "UiPageFooter",
     "UiPageHeader",
     "UiPageHeaderLayout",
     "UiPageHeaderTitle",
@@ -4302,6 +4312,8 @@ exports.UiModalWindowSurfaceType = UiModalWindowSurfaceType;
 exports.UiModalWindowType = UiModalWindowType;
 exports.UiNumberStepper = UiNumberStepper;
 exports.UiNumberStepperType = UiNumberStepperType;
+exports.UiPageFooter = UiPageFooter;
+exports.UiPageFooterType = UiPageFooterType;
 exports.UiPageHeader = _sfc_main$b;
 exports.UiPopconfirm = _sfc_main$a;
 exports.UiPopper = UiPopper;

package/dist/remote.d.ts

@@ -3879,6 +3879,52 @@ declare type UiNumberStepperProperties = {
     textboxOptions?: Partial<Omit<UiTextboxProperties, 'id' | 'value' | 'type' | 'min' | 'max' | 'step' | 'decimals' | 'clearable' | 'disabled' | 'readonly' | 'required' | 'size' | 'outlined' | 'autofit' | 'inputAttributes'>>;
 };
 export declare const UiNumberStepperType: SchemaType<"UiNumberStepper", RemoteProperties<UiNumberStepperProperties>, RemoteCallable<UiNumberStepperMethods>>;
+export declare const UiPageFooter: {
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<ExtractPropTypes<RemoteProperties<UiPageFooterProperties>>>, {
+        [x: string]: unknown;
+    }, {
+        [x: string]: never;
+    }, {
+        [x: string]: never;
+    }, MethodOptions, never[], ComponentOptionsMixin, {}, PublicProps, {}, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: ComputedOptions;
+        M: MethodOptions;
+        Defaults: {};
+    } & {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<ExtractPropTypes<RemoteProperties<UiPageFooterProperties>>>, {
+        [x: string]: unknown;
+    }, {
+        [x: string]: never;
+    }, ComputedOptions & {
+        [x: string]: never;
+    }, MethodOptions, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & ComponentOptionsBase<Readonly<ExtractPropTypes<RemoteProperties<UiPageFooterProperties>>>, {
+    [x: string]: unknown;
+}, {
+    [x: string]: never;
+}, {
+    [x: string]: never;
+}, MethodOptions, never[], ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+    $slots: {
+        [x: string]: never;
+    } & {
+        default?: (...args: never[]) => unknown;
+    };
+});
+declare type UiPageFooterProperties = Record<string, never>;
+export declare const UiPageFooterType: SchemaType<"UiPageFooter", RemoteProperties<UiPageFooterProperties>>;
 export declare const UiPageHeader: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 declare type UiPageHeaderProperties = {
     id?: string;

package/dist/remote.js

@@ -1345,6 +1345,15 @@ const UiNumberStepper = defineRemoteComponent(
     "violation"
   ]
 );
+const UiPageFooterType = "UiPageFooter";
+const UiPageFooter = defineRemoteComponent(
+  UiPageFooterType,
+  [],
+  [
+    "actions",
+    "aside"
+  ]
+);
 const events$1 = [
   "blur",
   "change",
@@ -4109,6 +4118,7 @@ const createEndpointRoot = async (channel) => {
     "UiModalWindow",
     "UiModalWindowSurface",
     "UiNumberStepper",
+    "UiPageFooter",
     "UiPageHeader",
     "UiPageHeaderLayout",
     "UiPageHeaderTitle",
@@ -4301,6 +4311,8 @@ export {
   UiModalWindowType,
   UiNumberStepper,
   UiNumberStepperType,
+  UiPageFooter,
+  UiPageFooterType,
   _sfc_main$b as UiPageHeader,
   _sfc_main$a as UiPopconfirm,
   UiPopper,

package/docs/AI.md

@@ -62,6 +62,7 @@ When building a basic form or settings screen, start from patterns like:
 import {
   UiButton,
   UiField,
+  UiPageFooter,
   UiPageHeader,
   UiSelect,
   UiTextbox,
@@ -85,6 +86,7 @@ Default screen rules:
 - use [`PageComposition.yml`](./profiles/pages/PageComposition.yml) to choose between an entity list,
   card/settings page, multi-column page, collapse-block page, modal sidebar, or modal window;
 - use `UiPageHeader` for page identity and top-level actions;
+- use `UiPageFooter` for page-level save/cancel/delete actions instead of recreating a local footer;
 - keep filters and controls near the content they affect;
 - use `UiField` around labeled form controls;
 - use `UiTable` for structured result lists;
@@ -168,6 +170,7 @@ The preferred styling signal is:
 - [`UiTextbox`](./profiles/components/UiTextbox.yml)
 - [`UiButton`](./profiles/components/UiButton.yml)
 - [`UiPageHeader`](./profiles/components/UiPageHeader.yml)
+- [`UiPageFooter`](./profiles/components/UiPageFooter.yml)
 - [`UiSelect`](./profiles/components/UiSelect.yml)
 - [`UiRadioSwitch`](./profiles/components/UiRadioSwitch.yml)
 - [`UiTabGroup`](./profiles/components/UiTabGroup.yml)

package/docs/COMPONENTS.md

@@ -45,6 +45,7 @@ Detailed AI-friendly profiles are collected in [`PROFILES.md`](./PROFILES.md).
 ## Layout And Structure
 
 - [`UiPageHeader`](./profiles/components/UiPageHeader.yml): page or section header with an editable title and action zone
+- [`UiPageFooter`](./profiles/components/UiPageFooter.yml): page action footer with primary action and aside zones
 - [`UiCollapse`](./profiles/components/UiCollapse.yml): collapsible section
 - [`UiCollapseBox`](./profiles/components/UiCollapseBox.yml): collapsible container
 - [`UiCollapseGroup`](./profiles/components/UiCollapseGroup.yml): multiple collapse coordination

package/docs/PROFILES.md

@@ -43,6 +43,7 @@ Current high-signal core profiles:
 - [`UiToggleButton`](./profiles/components/UiToggleButton.yml)
 - [`UiToggleGroup`](./profiles/components/UiToggleGroup.yml)
 - [`UiPageHeader`](./profiles/components/UiPageHeader.yml)
+- [`UiPageFooter`](./profiles/components/UiPageFooter.yml)
 - [`UiSelect`](./profiles/components/UiSelect.yml)
 - [`UiRadioSwitch`](./profiles/components/UiRadioSwitch.yml)
 - [`UiTabGroup`](./profiles/components/UiTabGroup.yml)

package/docs/profiles/components/UiPageFooter.yml

@@ -0,0 +1,166 @@
+component: UiPageFooter
+summary: >
+  UiPageFooter is a page-level action footer for extension screens. It provides
+  visual structure and spacing for primary actions on the left and an optional
+  aside action area on the right. The component does not create buttons by itself;
+  compose it with UiButton or other public action components in its slots.
+
+public_import:
+  from: '@retailcrm/embed-ui-v1-components/remote'
+  named:
+    - UiPageFooter
+
+related_components:
+  - UiButton
+  - UiPageHeader
+
+examples:
+  - title: Settings page footer
+    code: |
+      <template>
+          <UiPageFooter>
+              <template #actions>
+                  <UiButton variant="success" @click="save">
+                      Save
+                  </UiButton>
+
+                  <UiButton appearance="secondary" @click="saveAndExit">
+                      Save and exit
+                  </UiButton>
+              </template>
+
+              <template #aside>
+                  <UiButton
+                      aria-label="Delete"
+                      appearance="tertiary"
+                      variant="danger"
+                      @click="remove"
+                  >
+                      <IconDelete aria-hidden="true" />
+                  </UiButton>
+              </template>
+          </UiPageFooter>
+      </template>
+
+      <script lang="ts" setup>
+      import IconDelete from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/delete-outlined.svg'
+      import {
+        UiButton,
+        UiPageFooter,
+      } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const save = () => {}
+      const saveAndExit = () => {}
+      const remove = () => {}
+      </script>
+
+use_when:
+  - You need a page-level action strip for a settings or edit screen.
+  - You need primary and secondary actions grouped on the left.
+  - You need a separate right-side zone for a destructive or secondary standalone action.
+  - You want CRM footer spacing and border styling instead of custom footer markup.
+
+avoid_when:
+  - You need a modal footer, use the modal component footer slot instead.
+  - You need a table footer, use UiTable footer slots and table footer primitives.
+  - You need the component to be fixed to the viewport bottom by itself.
+  - You need automatic button creation from props.
+
+api:
+  key_props: []
+  props: []
+  slots:
+    - name: actions
+      zone: left-side action group
+      creates: Primary action area.
+      accepts:
+        recommended:
+          - UiButton
+          - UiToolbarButton
+          - UiToolbarLink
+          - compact action components
+        avoid:
+          - full form layouts
+          - wide content blocks
+          - nested page sections
+      layout_effect: Renders as the flexible left area and can contain multiple actions.
+      notes: Use this slot for save, apply, cancel, or save-and-exit actions.
+    - name: aside
+      zone: right-side aside action group
+      creates: Separate aside action area.
+      accepts:
+        recommended:
+          - UiButton
+          - one compact destructive action
+          - one compact secondary action
+        avoid:
+          - main save actions
+          - wide content blocks
+          - multi-row form content
+      layout_effect: Renders at the right edge on desktop and below the actions area on narrow screens.
+      notes: Commonly used for delete or another separated secondary action.
+  emits: []
+  methods: []
+
+rendered_structure:
+  descriptive_only: true
+  notes: >
+    This structure is useful for reasoning and debugging, not as a public styling API.
+  root:
+    shape: footer.ui-v1-page-footer
+    tag: footer
+  zones:
+    - .ui-v1-page-footer__actions
+    - .ui-v1-page-footer__aside
+
+geometry:
+  layout: page action footer
+  root_display: flex
+  width_behavior: stretches to container width by default
+  notes:
+    - Root uses flex layout with space between the actions and aside zones.
+    - The actions zone flexes and the aside zone stays content-sized on desktop.
+    - On narrow screens the root switches to a vertical layout and action groups can wrap.
+    - The component renders where it is called and does not fix itself to the bottom of the viewport.
+
+styling:
+  notes:
+    - UiPageFooter provides the visual footer shell: spacing, border, background, and action grouping.
+    - The CRM shell may position the root footer according to page layout needs.
+    - Internal classes are descriptive hooks, not a stable public selector API unless documented by the host integration.
+  root_classes:
+    - .ui-v1-page-footer
+  zones:
+    - .ui-v1-page-footer__actions
+    - .ui-v1-page-footer__aside
+  css_variables: {}
+  typography:
+    notes:
+      - The footer itself does not impose action text typography.
+      - Typography comes from slotted components such as UiButton.
+
+behavior:
+  states: []
+  notes:
+    - UiPageFooter has no own state props.
+    - It does not create, disable, lock, or submit actions by itself.
+    - Pass disabled, locked, click handlers, icons, and labels to the slotted UiButton or action component.
+    - It renders as a regular footer in place and does not apply fixed or sticky positioning by itself.
+
+accessibility:
+  notes:
+    - The root uses a semantic footer element.
+    - Slotted action components are responsible for accessible labels, disabled state, and click behavior.
+
+ai_notes:
+  do:
+    - Import UiPageFooter from @retailcrm/embed-ui-v1-components/remote.
+    - Use the actions slot for primary and secondary page actions.
+    - Use the aside slot for a separated destructive or secondary action.
+    - Put UiButton or another public action component inside slots.
+    - Add page-level positioning only in the host/page layout when the footer must stick to a specific shell area.
+  avoid:
+    - Do not recreate a local footer when UiPageFooter is available.
+    - Do not import UiPageFooter from internal package paths.
+    - Do not expect UiPageFooter to create buttons from props.
+    - Do not expect UiPageFooter to be fixed to the bottom of the window automatically.

package/docs/profiles/components/UiPopper.yml

@@ -77,7 +77,7 @@ examples:
       </template>
 
       <script lang="ts" setup>
-      import IconTrash from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/delete.svg'
+      import IconTrash from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/delete-outlined.svg'
       import { UiButton, UiPopper, UiPopperConnector, UiPopperTarget } from '@retailcrm/embed-ui-v1-components/remote'
       </script>
 use_when:

package/docs/profiles/pages/ModalSidebar.yml

@@ -65,7 +65,7 @@ examples:
       <script lang="ts" setup>
       import { ref } from 'vue'
 
-      import IconDelete from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/delete.svg'
+      import IconDelete from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/delete-outlined.svg'
       import {
         UiButton,
         UiModalSidebar,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@retailcrm/embed-ui-v1-components",
   "bin": "bin/embed-ui-v1-components.mjs",
   "type": "module",
-  "version": "0.9.22",
+  "version": "0.9.23-alpha.2",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": {