@api-client/ui 0.2.7 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,6 +12,10 @@ export interface ActionButtonInit {
|
|
|
12
12
|
* Whether the button is disabled.
|
|
13
13
|
*/
|
|
14
14
|
disabled?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Optional callback to be called when the button is clicked.
|
|
17
|
+
*/
|
|
18
|
+
callback?: (e: MouseEvent) => void;
|
|
15
19
|
}
|
|
16
20
|
/**
|
|
17
21
|
* A special kind of activity that renders content in a modal dialog.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalActivity.d.ts","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAI7E,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"ModalActivity.d.ts","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAI7E,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CACnC;AAED;;;;;;;;;GASG;AACH,8BAAsB,aAAc,SAAQ,QAAQ;IAClD;;OAEG;IACH,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAK;IACrD;;OAEG;IACM,QAAQ,CAAC,MAAM,UAAO;IAE/B;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IAEhB,QAAQ,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQtC,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW,CAAC,qBAAqB,CAAC,GAAG,IAAI;IASzE;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKpD;;;;OAIG;IAEH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAIpD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAI5C;;;OAGG;IACH,YAAY,IAAI,cAAc;IAW9B;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc;IAc5E;;;OAGG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc;IAO3E;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc;IAgB3E;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;CAGrD"}
|
|
@@ -134,7 +134,9 @@ let ModalActivity = (() => {
|
|
|
134
134
|
*/
|
|
135
135
|
renderNegativeButton(init = {}) {
|
|
136
136
|
const { label = 'Cancel' } = init;
|
|
137
|
-
return html `<ui-text-button slot="button" type="button" value="dismiss"
|
|
137
|
+
return html `<ui-text-button slot="button" type="button" value="dismiss" @click="${init.callback}"
|
|
138
|
+
>${label}</ui-text-button
|
|
139
|
+
>`;
|
|
138
140
|
}
|
|
139
141
|
/**
|
|
140
142
|
* Renders the submit button for the dialog.
|
|
@@ -153,6 +155,7 @@ let ModalActivity = (() => {
|
|
|
153
155
|
type="${type}"
|
|
154
156
|
value="confirm"
|
|
155
157
|
form="${ifDefined(formId)}"
|
|
158
|
+
@click="${init.callback}"
|
|
156
159
|
>${label}</ui-text-button
|
|
157
160
|
>`;
|
|
158
161
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalActivity.js","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;
|
|
1
|
+
{"version":3,"file":"ModalActivity.js","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type TemplateResult } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { Activity } from './Activity.js'\nimport type { UiDialogClosingReason } from '../md/dialog/internals/Dialog.js'\nimport state from '../decorators/state.js'\nimport { IntentResult } from './ActivityManager.js'\n\nimport '../md/dialog/ui-dialog.js'\nimport '../md/button/ui-text-button.js'\n\nexport interface ActionButtonInit {\n /**\n * The label to use for the button.\n */\n label?: string\n /**\n * Whether the button is disabled.\n */\n disabled?: boolean\n /**\n * Optional callback to be called when the button is clicked.\n */\n callback?: (e: MouseEvent) => void\n}\n\n/**\n * A special kind of activity that renders content in a modal dialog.\n * When a modal activity is running the underlying activities are paused.\n *\n * A modal activity uses the UiDialogElement to render its content. The dialog\n * is inserted directly into the `<body>` element of the document and rendered\n * in the top layer. Because of that, the modal activity does not support\n * regular rendering logic. It creates its own render root that is used to render\n * the template.\n */\nexport abstract class ModalActivity extends Activity {\n /**\n * The list of classes to apply to the dialog.\n */\n protected dialogClasses: Record<string, boolean> = {}\n /**\n * Controls dialog visibility without controlling the activity state.\n */\n @state() accessor opened = true\n\n /**\n * The id of the form used to render the dialog.\n */\n protected formId?: string\n\n override onResume(): void | Promise<void> {\n this.renderRoot = document.createElement('div')\n this.renderRoot.classList.add('modal-activity-container')\n document.body.appendChild(this.renderRoot)\n super.onResume()\n this.requestUpdate()\n }\n\n override async finish(): Promise<void> {\n if (this.renderRoot) {\n document.body.removeChild(this.renderRoot)\n this.renderRoot = undefined\n }\n await super.finish()\n }\n\n protected handleDialogClosed(e: CustomEvent<UiDialogClosingReason>): void {\n const { cancelled, value } = e.detail\n if (cancelled) {\n this.handleNegativeAction(value)\n } else {\n this.handlePositiveAction(value)\n }\n }\n\n /**\n * Called when the dialog is closed with a negative action.\n * Override this function to handle the negative action.\n * @param value The value passed to the dialog when it is closed.\n */\n protected handleNegativeAction(value: unknown): void {\n this.setResult(IntentResult.RESULT_CANCELED, value)\n this.finish()\n }\n\n /**\n * Called when the dialog is closed with a positive action.\n * Override this function to handle the positive action.\n * @param value The value passed to the dialog when it is closed.\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected handlePositiveAction(value: unknown): void {\n this.finish()\n }\n\n /**\n * Override this method to handle the form submission.\n * @param e The submit event.\n */\n protected handleSubmit(e: SubmitEvent): void {\n e.preventDefault()\n }\n\n /**\n * The function called by the rendered when rendering this dialog.\n * This way, the `render()` function is still used as the primary template provider.\n */\n renderDialog(): TemplateResult {\n const classes = {\n activityDialog: true,\n [this.constructor.name.toLowerCase()]: true,\n ...this.dialogClasses,\n }\n return html`<ui-dialog modal .open=\"${this.opened}\" class=\"${classMap(classes)}\" @close=\"${this.handleDialogClosed}\"\n >${this.render()}</ui-dialog\n >`\n }\n\n /**\n * Used with dialogs that render forms. Override the `handleSubmit` method\n * to handle the form submission.\n * @param content The content to render in the form.\n * @param name Optional form name\n */\n protected renderForm(content: TemplateResult, name?: string): TemplateResult {\n if (!this.formId) {\n this.formId = `form-${this.constructor.name.toLowerCase()}`\n }\n return html`<form\n id=\"${this.formId}\"\n name=\"${ifDefined(name)}\"\n class=\"dialog-content\"\n @submit=\"${this.handleSubmit}\"\n >\n ${content}\n </form>`\n }\n\n /**\n * Renders the cancel button for the dialog.\n * @param label The label to use for the cancel button.\n */\n protected renderNegativeButton(init: ActionButtonInit = {}): TemplateResult {\n const { label = 'Cancel' } = init\n return html`<ui-text-button slot=\"button\" type=\"button\" value=\"dismiss\" @click=\"${init.callback}\"\n >${label}</ui-text-button\n >`\n }\n\n /**\n * Renders the submit button for the dialog.\n * If the formId is set, the button will be a submit button.\n * Otherwise, it will be a regular button.\n * @param label The label to use for the submit button.\n */\n protected renderPositiveButton(init: ActionButtonInit = {}): TemplateResult {\n const { label = 'OK', disabled = false } = init\n const { formId } = this\n const type = formId ? 'submit' : 'button'\n // UI buttons have a proper support for form association.\n return html`<ui-text-button\n slot=\"button\"\n ?disabled=\"${disabled}\"\n type=\"${type}\"\n value=\"confirm\"\n form=\"${ifDefined(formId)}\"\n @click=\"${init.callback}\"\n >${label}</ui-text-button\n >`\n }\n\n /**\n * Renders the title for the dialog.\n * @param title The title to render in the dialog.\n */\n protected renderTitle(title: string): TemplateResult {\n return html`<span slot=\"title\">${title}</span>`\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -18,6 +18,10 @@ export interface ActionButtonInit {
|
|
|
18
18
|
* Whether the button is disabled.
|
|
19
19
|
*/
|
|
20
20
|
disabled?: boolean
|
|
21
|
+
/**
|
|
22
|
+
* Optional callback to be called when the button is clicked.
|
|
23
|
+
*/
|
|
24
|
+
callback?: (e: MouseEvent) => void
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
/**
|
|
@@ -139,7 +143,9 @@ export abstract class ModalActivity extends Activity {
|
|
|
139
143
|
*/
|
|
140
144
|
protected renderNegativeButton(init: ActionButtonInit = {}): TemplateResult {
|
|
141
145
|
const { label = 'Cancel' } = init
|
|
142
|
-
return html`<ui-text-button slot="button" type="button" value="dismiss"
|
|
146
|
+
return html`<ui-text-button slot="button" type="button" value="dismiss" @click="${init.callback}"
|
|
147
|
+
>${label}</ui-text-button
|
|
148
|
+
>`
|
|
143
149
|
}
|
|
144
150
|
|
|
145
151
|
/**
|
|
@@ -159,6 +165,7 @@ export abstract class ModalActivity extends Activity {
|
|
|
159
165
|
type="${type}"
|
|
160
166
|
value="confirm"
|
|
161
167
|
form="${ifDefined(formId)}"
|
|
168
|
+
@click="${init.callback}"
|
|
162
169
|
>${label}</ui-text-button
|
|
163
170
|
>`
|
|
164
171
|
}
|