diff --git a/packages/v1-components/docs/profiles/components/UiPopconfirm.yml b/packages/v1-components/docs/profiles/components/UiPopconfirm.yml new file mode 100644 index 00000000..f840fb79 --- /dev/null +++ b/packages/v1-components/docs/profiles/components/UiPopconfirm.yml @@ -0,0 +1,164 @@ +component: UiPopconfirm +summary: > + UiPopconfirm is a non-modal floating confirmation dialog anchored to a trigger. + Use it for short action confirmations where a modal would be too heavy. + +public_import: + from: '@retailcrm/embed-ui-v1-components/remote' + named: + - UiPopconfirm + +related_components: + - UiButton + - UiPopper + - UiModalWindow + +examples: + - title: Basic confirmation + code: | + + + + - title: Destructive action + code: | + + + + +use_when: + - You need a short confirmation for a single nearby action. + - You need confirm and cancel events without blocking the whole page. + - You need a destructive confirmation through okVariant="danger". + +avoid_when: + - You need a form, long explanation, or multi-step confirmation. + - You need to block page interaction; use UiModalWindow instead. + - You only need helper text; use UiTooltip instead. + +api: + key_props: + - name: title + notes: Text title shown above the description. + - name: okVariant + notes: Confirmation button variant; use danger for destructive actions. + - name: placement + notes: Preferred floating position relative to the trigger. + - name: visible + notes: Controlled open state for v-model:visible. + props: + - name: okTitle + notes: Confirmation button text. + - name: cancelTitle + notes: Cancel button text. + - name: cancelAppearance + notes: Cancel button appearance. + - name: cancelVariant + notes: Cancel button variant. + - name: buttonSize + notes: Size of both action buttons. + - name: popperClass + notes: Extra class for the floating popper root. + - name: popperOptions + notes: Additional UiPopper options. + slots: + - name: trigger + zone: trigger + creates: Target element that opens the confirmation. + notes: Receives open for active trigger styling when supported. + - name: title + zone: header + creates: Custom title content. + - name: default + zone: body + creates: Confirmation description. + - name: cancel-text + zone: footer + creates: Cancel button content. + - name: ok-text + zone: footer + creates: Confirmation button content. + emits: + - name: ok + payload: undefined + notes: Fired when the confirmation button is clicked. + - name: cancel + payload: undefined + notes: Fired when the cancel button is clicked or the popup closes by outside click. + - name: toggle + payload: boolean + notes: Fired when open state changes. + - name: update:visible + payload: boolean + notes: v-model:visible update channel. + +rendered_structure: + descriptive_only: true + root: + shape: div.ui-v1-popper.ui-v1-popconfirm via UiPopper + tag: div + zones: + - .ui-v1-popconfirm__title + - .ui-v1-popconfirm__content + - .ui-v1-popconfirm__footer + +geometry: + layout: floating dialog outside normal document flow + root_display: block + width_behavior: content-sized with max width + notes: + - Defaults to bottom-start placement. + - The layer is anchored to the component trigger wrapper. + +ai_notes: + do: + - Use UiPopconfirm for short confirmations instead of building UiPopper and UiButton manually. + - Pass open from the trigger slot into UiButton active when possible. + - Use okVariant="danger" for destructive actions. + avoid: + - Do not put forms or complex flows into UiPopconfirm. + - Do not use it as a tooltip or notification. + +accessibility: + notes: + - Renders a non-modal dialog with aria-modal="false". + - Title content is connected through aria-labelledby when present. + - Use an accessible trigger component such as UiButton. + +styling: + notes: + - Use props and slots first; use popperClass only for local layout integrations. + - CSS variables can tune the floating surface width. + root_classes: + - .ui-v1-popconfirm + zones: + - .ui-v1-popconfirm__title + - .ui-v1-popconfirm__content + - .ui-v1-popconfirm__footer + css_variables: + public_theme_variables: + - name: --ui-v1-popconfirm-width-max + effect: Maximum width of the floating confirmation. diff --git a/packages/v1-components/docs/profiles/components/UiPopper.yml b/packages/v1-components/docs/profiles/components/UiPopper.yml index 300b8351..a7008b73 100644 --- a/packages/v1-components/docs/profiles/components/UiPopper.yml +++ b/packages/v1-components/docs/profiles/components/UiPopper.yml @@ -12,6 +12,7 @@ public_import: related_components: - UiPopperConnector - UiPopperTarget + - UiPopconfirm - UiSelect - UiTooltip @@ -87,6 +88,7 @@ use_when: avoid_when: - You need a regular block in normal document flow. - You need a high-level dropdown or tooltip and do not need low-level control. + - You need a short action confirmation; use UiPopconfirm instead. api: key_props: diff --git a/packages/v1-components/src/common/components/popconfirm.ts b/packages/v1-components/src/common/components/popconfirm.ts new file mode 100644 index 00000000..95ad3802 --- /dev/null +++ b/packages/v1-components/src/common/components/popconfirm.ts @@ -0,0 +1,53 @@ +import type { APPEARANCE } from '@/common/components/button' +import type { Locale } from '@/common/components/date' +import type { SIZE } from '@/common/components/button' +import type { UiPopperProperties } from '@/common/components/popper' +import type { VARIANT } from '@/common/components/button' + +export type UiPopconfirmPopperOptions = Partial> + +export type UiPopconfirmTriggerProperties = { + visible?: boolean; +} + +export type UiPopconfirmPopperProperties = { + id?: string; + visible?: boolean; + title?: string; + okVariant?: VARIANT | `${VARIANT}`; + okTitle?: string | null; + cancelTitle?: string | null; + cancelAppearance?: APPEARANCE | `${APPEARANCE}`; + cancelVariant?: VARIANT | `${VARIANT}`; + buttonSize?: SIZE | `${SIZE}`; + placement?: UiPopperProperties['placement']; + popperClass?: string | null; + popperOptions?: UiPopconfirmPopperOptions; + locale?: Locale; +} + +export type UiPopconfirmProperties = UiPopconfirmPopperProperties + +export type UiPopconfirmPopperMethods = { + adjust (): Promise; + close (): void; + dispose (): void; + open (): void; +} + +export type UiPopconfirmMethods = { + adjust (): Promise; + close (): void; + dispose (): void; + open (): void; + toggle (): void; +} diff --git a/packages/v1-components/src/host.ts b/packages/v1-components/src/host.ts index 80dcac9b..fc54ff72 100644 --- a/packages/v1-components/src/host.ts +++ b/packages/v1-components/src/host.ts @@ -2,6 +2,14 @@ import '@/host/components/field/field.less' export * from '@/host/components' export * from '@/host/provider' +export { + type UiPopconfirmMethods, + type UiPopconfirmPopperMethods, + type UiPopconfirmPopperOptions, + type UiPopconfirmPopperProperties, + type UiPopconfirmProperties, + type UiPopconfirmTriggerProperties, +} from '@/common/components/popconfirm' export * from '@/common/components/table' export { ANIMATION as SKELETON_ANIMATION, diff --git a/packages/v1-components/src/host/components/index.ts b/packages/v1-components/src/host/components/index.ts index 04d9182f..de0dc4e5 100644 --- a/packages/v1-components/src/host/components/index.ts +++ b/packages/v1-components/src/host/components/index.ts @@ -30,6 +30,8 @@ export { default as UiNumberStepper } from '@/host/components/number-stepper/UiN export { default as UiPageHeader } from '@/host/components/page-header/UiPageHeader.vue' export { default as UiPageHeaderLayout } from '@/host/components/page-header/UiPageHeaderLayout.vue' export { default as UiPageHeaderTitle } from '@/host/components/page-header/UiPageHeaderTitle.vue' +export { default as UiPopconfirmPopper } from '@/host/components/popconfirm/UiPopconfirmPopper.vue' +export { default as UiPopconfirmTrigger } from '@/host/components/popconfirm/UiPopconfirmTrigger.vue' export { default as UiPopper } from '@/host/components/popper/UiPopper.vue' export { default as UiPopperConnector } from '@/host/components/popper/UiPopperConnector.vue' export { default as UiPopperTarget } from '@/host/components/popper/UiPopperTarget.vue' diff --git a/packages/v1-components/src/host/components/popconfirm/UiPopconfirmPopper.vue b/packages/v1-components/src/host/components/popconfirm/UiPopconfirmPopper.vue new file mode 100644 index 00000000..9b2165db --- /dev/null +++ b/packages/v1-components/src/host/components/popconfirm/UiPopconfirmPopper.vue @@ -0,0 +1,231 @@ + + + + +