diff --git a/src/Umbraco.Web.UI.Client/.gitignore b/src/Umbraco.Web.UI.Client/.gitignore index bd660ad477..e9a0cf944d 100644 --- a/src/Umbraco.Web.UI.Client/.gitignore +++ b/src/Umbraco.Web.UI.Client/.gitignore @@ -42,7 +42,7 @@ playwright/.cache/ storybook-static/ # API Docs -api-docs/ +ui-api/ custom-elements.json diff --git a/src/Umbraco.Web.UI.Client/examples/manifest-picker/README.md b/src/Umbraco.Web.UI.Client/examples/manifest-picker/README.md new file mode 100644 index 0000000000..73944c495c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/manifest-picker/README.md @@ -0,0 +1,3 @@ +# Manifest Picker Example + +This example demonstrates the Manifest picker input UI. diff --git a/src/Umbraco.Web.UI.Client/examples/manifest-picker/index.ts b/src/Umbraco.Web.UI.Client/examples/manifest-picker/index.ts new file mode 100644 index 0000000000..a7c90f8564 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/manifest-picker/index.ts @@ -0,0 +1,15 @@ +import type { ManifestDashboard } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'dashboard', + name: 'Example Manifest Picker Dashboard', + alias: 'example.dashboard.manifestPicker', + element: () => import('./manifest-picker-dashboard.js'), + weight: 1000, + meta: { + label: 'Manifest Picker example', + pathname: 'example-manifest-picker', + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts new file mode 100644 index 0000000000..8d34ad80e7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts @@ -0,0 +1,97 @@ +import { css, html, customElement, state, when, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbInputManifestElement } from '@umbraco-cms/backoffice/components'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; + +@customElement('example-manifest-picker-dashboard') +export class ExampleManifestPickerDashboard extends UmbLitElement { + #options: Array