zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(packages): error dialog component (#1077)

Browse Source
This commit is contained in:
Sam Potts
2026-03-31 17:00:45 -07:00
committed by GitHub
parent 29465609c5
commit 3430fe1a49
42 changed files with 612 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+14
View File
@@ -5,6 +5,7 @@ import {
button,
buttonGroup,
controls,
error,
icon,
iconContainer,
iconFlipped,
@@ -22,6 +23,7 @@ import { SkinMixin } from '../skin-mixin';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
@@ -42,6 +44,18 @@ function getTemplateHTML() {
<slot name="media"></slot>
<slot></slot>
<media-error-dialog class="${error.root}">
<div class="${error.dialog}">
<div class="${error.content}">
<media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title>
<media-alert-dialog-description class="${error.description}"></media-alert-dialog-description>
</div>
<div class="${error.actions}">
<media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close>
</div>
</div>
</media-error-dialog>
<div class="${controls}">
<media-tooltip-group>
<div class="${buttonGroup}">
packages/html/src/define/audio/minimal-skin.ts
+13
View File
@@ -6,6 +6,7 @@ import styles from './minimal-skin.css?inline';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
@@ -26,6 +27,18 @@ function getTemplateHTML() {
<slot name="media"></slot>
<slot></slot>
<media-error-dialog class="media-error">
<div class="media-error__dialog">
<div class="media-error__content">
<media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
<media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
</div>
<div class="media-error__actions">
<media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close>
</div>
</div>
</media-error-dialog>
<div class="media-controls">
<media-tooltip-group>
<div class="media-button-group">
packages/html/src/define/audio/skin.tailwind.ts
+14
View File
@@ -4,6 +4,7 @@ import {
button,
buttonGroup,
controls,
error,
icon,
iconContainer,
iconFlipped,
@@ -22,6 +23,7 @@ import { SkinMixin } from '../skin-mixin';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
@@ -42,6 +44,18 @@ function getTemplateHTML() {
<slot name="media"></slot>
<slot></slot>
<media-error-dialog class="${error.root}">
<div class="${error.dialog}">
<div class="${error.content}">
<media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title>
<media-alert-dialog-description class="${error.description}"></media-alert-dialog-description>
</div>
<div class="${error.actions}">
<media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close>
</div>
</div>
</media-error-dialog>
<div class="${controls}">
<media-tooltip-group>
<div class="${buttonGroup}">
packages/html/src/define/audio/skin.ts
+13
View File
@@ -6,6 +6,7 @@ import styles from './skin.css?inline';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
@@ -26,6 +27,18 @@ function getTemplateHTML() {
<slot name="media"></slot>
<slot></slot>
<media-error-dialog class="media-error">
<div class="media-error__dialog">
<div class="media-error__content">
<media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
<media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
</div>
<div class="media-error__actions">
<media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close>
</div>
</div>
</media-error-dialog>
<div class="media-surface media-controls">
<media-tooltip-group>
<div class="media-button-group">
packages/html/src/define/ui/error-dialog.ts
+17
View File
@@ -0,0 +1,17 @@
import { AlertDialogCloseElement } from '../../ui/alert-dialog/alert-dialog-close-element';
import { AlertDialogDescriptionElement } from '../../ui/alert-dialog/alert-dialog-description-element';
import { AlertDialogTitleElement } from '../../ui/alert-dialog/alert-dialog-title-element';
import { ErrorDialogElement } from '../../ui/error-dialog/error-dialog-element';
import { safeDefine } from '../safe-define';
// Parent first — child elements consume its context.
safeDefine(ErrorDialogElement);
safeDefine(AlertDialogCloseElement);
safeDefine(AlertDialogDescriptionElement);
safeDefine(AlertDialogTitleElement);
declare global {
interface HTMLElementTagNameMap {
[ErrorDialogElement.tagName]: ErrorDialogElement;
}
}
packages/html/src/define/video/minimal-skin.tailwind.ts
+14
View File
@@ -6,6 +6,7 @@ import {
buttonGroupEnd,
buttonGroupStart,
controls,
error,
icon,
iconContainer,
iconFlipped,
@@ -30,6 +31,7 @@ import '../media/container';
import '../ui/buffering-indicator';
import '../ui/captions-button';
import '../ui/controls';
import '../ui/error-dialog';
import '../ui/fullscreen-button';
import '../ui/mute-button';
import '../ui/pip-button';
@@ -61,6 +63,18 @@ function getTemplateHTML() {
${renderIcon('spinner')}
</media-buffering-indicator>
<media-error-dialog class="${error.root}">
<div class="${error.dialog}">
<div class="${error.content}">
<media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title>
<media-alert-dialog-description class="${error.description}"></media-alert-dialog-description>
</div>
<div class="${error.actions}">
<media-alert-dialog-close class="${cn(button.base, button.primary)}">OK</media-alert-dialog-close>
</div>
</div>
</media-error-dialog>
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<div class="${buttonGroupStart}">
packages/html/src/define/video/minimal-skin.ts
+13
View File
@@ -8,6 +8,7 @@ import styles from './minimal-skin.css?inline';
import '../media/container';
import '../ui/buffering-indicator';
import '../ui/controls';
import '../ui/error-dialog';
import '../ui/fullscreen-button';
import '../ui/mute-button';
import '../ui/pip-button';
@@ -39,6 +40,18 @@ function getTemplateHTML() {
${renderIcon('spinner', { class: 'media-icon' })}
</media-buffering-indicator>
<media-error-dialog class="media-error">
<div class="media-error__dialog">
<div class="media-error__content">
<media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
<media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
</div>
<div class="media-error__actions">
<media-alert-dialog-close class="media-button media-button--primary">OK</media-alert-dialog-close>
</div>
</div>
</media-error-dialog>
<media-controls class="media-controls">
<media-tooltip-group>
<div class="media-button-group">
packages/html/src/define/video/skin.tailwind.ts
+14
View File
@@ -6,6 +6,7 @@ import {
buttonGroupEnd,
buttonGroupStart,
controls,
error,
icon,
iconContainer,
iconFlipped,
@@ -29,6 +30,7 @@ import { SkinMixin } from '../skin-mixin';
import '../media/container';
import '../ui/buffering-indicator';
import '../ui/captions-button';
import '../ui/error-dialog';
import '../ui/controls';
import '../ui/fullscreen-button';
import '../ui/mute-button';
@@ -63,6 +65,18 @@ function getTemplateHTML() {
</div>
</media-buffering-indicator>
<media-error-dialog class="${error.root}">
<div class="${error.dialog}">
<div class="${error.content}">
<media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title>
<media-alert-dialog-description class="${error.description}"></media-alert-dialog-description>
</div>
<div class="${error.actions}">
<media-alert-dialog-close class="${cn(button.base, button.primary)}">OK</media-alert-dialog-close>
</div>
</div>
</media-error-dialog>
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<div class="${buttonGroupStart}">
packages/html/src/define/video/skin.ts
+13
View File
@@ -8,6 +8,7 @@ import styles from './skin.css?inline';
import '../media/container';
import '../ui/buffering-indicator';
import '../ui/captions-button';
import '../ui/error-dialog';
import '../ui/controls';
import '../ui/fullscreen-button';
import '../ui/mute-button';
@@ -42,6 +43,18 @@ function getTemplateHTML() {
</div>
</media-buffering-indicator>
<media-error-dialog class="media-error">
<div class="media-error__dialog media-surface">
<div class="media-error__content">
<media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
<media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
</div>
<div class="media-error__actions">
<media-alert-dialog-close class="media-button media-button--primary">OK</media-alert-dialog-close>
</div>
</div>
</media-error-dialog>
<media-controls class="media-surface media-controls">
<media-tooltip-group>
<div class="media-button-group">