mirror of
https://github.com/discourse/discourse.git
synced 2025-05-24 01:14:12 +08:00
DEV: FloatKit (#23312)
This PR introduces three new UI elements to Discourse codebase through an addon called "FloatKit":
- menu
- tooltip
- toast
Simple cases can be express with an API similar to DButton:
```hbs
<DTooltip
@label={{i18n "foo.bar"}}
@icon="check"
@content="Something"
/>
```
More complex cases can use blocks:
```hbs
<DTooltip>
<:trigger>
{{d-icon "check"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
Something
</:content>
</DTooltip>
```
You can manually show a tooltip using the `tooltip` service:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
options
)
// and later manually close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();
// you can also just close any open tooltip through the service
this.tooltip.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const tooltipInstance = this.tooltip.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
Menus are very similar to tooltips and provide the same kind of APIs:
```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</DMenu>
```
They also support blocks:
```hbs
<DMenu>
<:trigger>
{{d-icon "plus"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</:content>
</DMenu>
```
You can manually show a menu using the `menu` service:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
options
)
// and later manually close or destroy it
menuInstance.close();
menuInstance.destroy();
// you can also just close any open tooltip through the service
this.menu.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const menuInstance = this.menu.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
Interacting with toasts is made only through the `toasts` service.
A default component is provided (DDefaultToast) and can be used through dedicated service methods:
- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });
```javascript
this.toasts.success({
data: {
title: "Foo",
message: "Bar",
actions: [
{
label: "Ok",
class: "btn-primary",
action: (componentArgs) => {
// eslint-disable-next-line no-alert
alert("Closing toast:" + componentArgs.data.title);
componentArgs.close();
},
}
]
},
});
```
You can also provide your own component:
```javascript
this.toasts.show(MyComponent, {
autoClose: false,
class: "foo",
data: { baz: 1 },
})
```
Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
This commit is contained in:
Joffrey JAFFEUX
@ -0,0 +1,7 @@
|
||||
import Component from "@glimmer/component";
|
||||
|
||||
export default class DummyComponent extends Component {
|
||||
<template>
|
||||
My custom component with foo: {{@model.foo}}
|
||||
</template>
|
||||
}
|
||||
@ -0,0 +1,103 @@
|
||||
<StyleguideExample @title="<Dmenu />">
|
||||
<Styleguide::Component @tag="dmenu component">
|
||||
<:sample>
|
||||
<DMenu
|
||||
@label={{this.label}}
|
||||
@offset={{this.offset}}
|
||||
@arrow={{this.arrow}}
|
||||
@maxWidth={{this.maxWidth}}
|
||||
@identifier={{this.identifier}}
|
||||
@interactive={{this.interactive}}
|
||||
@triggers={{this.triggers}}
|
||||
@untriggers={{this.untriggers}}
|
||||
@content={{this.content}}
|
||||
>
|
||||
{{this.content}}
|
||||
</DMenu>
|
||||
</:sample>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="dmenu component">
|
||||
<:sample>
|
||||
<DMenu
|
||||
@offset={{this.offset}}
|
||||
@arrow={{this.arrow}}
|
||||
@maxWidth={{this.maxWidth}}
|
||||
@identifier={{this.identifier}}
|
||||
@interactive={{this.interactive}}
|
||||
@triggers={{this.triggers}}
|
||||
@untriggers={{this.untriggers}}
|
||||
@content={{this.content}}
|
||||
>
|
||||
<:trigger>
|
||||
{{this.label}}
|
||||
</:trigger>
|
||||
<:content>
|
||||
{{this.content}}
|
||||
</:content>
|
||||
</DMenu>
|
||||
</:sample>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="menu service">
|
||||
<:sample>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-default"
|
||||
id="menu-instance"
|
||||
>{{this.label}}</button>
|
||||
</:sample>
|
||||
<:actions>
|
||||
<DButton @action={{this.registerMenu}}>Register</DButton>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="menu service">
|
||||
<:sample>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-default"
|
||||
id="menu-instance-with-component"
|
||||
>{{this.label}}</button>
|
||||
</:sample>
|
||||
<:actions>
|
||||
<DButton @action={{this.registerMenuWithComponent}}>Register</DButton>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Controls>
|
||||
<Styleguide::Controls::Row @name="Example label">
|
||||
<Input @value={{this.label}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@content]">
|
||||
<Input @value={{this.content}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@identifier]">
|
||||
<Input @value={{this.identifier}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@offset]">
|
||||
<Input @value={{this.offset}} @type="number" />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@triggers]">
|
||||
<Input @value={{this.triggers}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@untriggers]">
|
||||
<Input @value={{this.untriggers}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@maxWidth]">
|
||||
<Input @value={{this.maxWidth}} @type="number" />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@interactive]">
|
||||
<DToggleSwitch
|
||||
@state={{this.interactive}}
|
||||
{{on "click" this.toggleInteractive}}
|
||||
/>
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@arrow]">
|
||||
<DToggleSwitch @state={{this.arrow}} {{on "click" this.toggleArrow}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@inline]">
|
||||
<DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
|
||||
</Styleguide::Controls::Row>
|
||||
</Styleguide::Controls>
|
||||
</StyleguideExample>
|
||||
@ -0,0 +1,112 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { action } from "@ember/object";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import { MENU } from "float-kit/lib/constants";
|
||||
|
||||
export default class Menus extends Component {
|
||||
@service menu;
|
||||
|
||||
@tracked label = "What is this?";
|
||||
@tracked triggers = MENU.options.triggers;
|
||||
@tracked untriggers = MENU.options.untriggers;
|
||||
@tracked arrow = MENU.options.arrow;
|
||||
@tracked inline = MENU.options.inline;
|
||||
@tracked interactive = MENU.options.interactive;
|
||||
@tracked maxWidth = MENU.options.maxWidth;
|
||||
@tracked identifier;
|
||||
@tracked offset = MENU.options.offset;
|
||||
@tracked _content = htmlSafe("<ul><li>Hello</li><li>World!</li></ul>");
|
||||
|
||||
get content() {
|
||||
return this._content;
|
||||
}
|
||||
|
||||
set content(value) {
|
||||
this._content = htmlSafe(value);
|
||||
}
|
||||
|
||||
get templateCode() {
|
||||
return `<DMenu
|
||||
@label={{html-safe "${this.label}"}}
|
||||
@content={{html-safe "${this.content}"}}
|
||||
/>`;
|
||||
}
|
||||
|
||||
get templateCodeContent() {
|
||||
return `<DMenu @maxWidth={{100}}>
|
||||
<:trigger>
|
||||
${this.label}
|
||||
</:trigger>
|
||||
<:content>
|
||||
${this.content}
|
||||
</:content>
|
||||
</DMenu>`;
|
||||
}
|
||||
|
||||
get serviceCode() {
|
||||
return `this.menu.register(
|
||||
document.queryselector(".my-element"),
|
||||
{ content: htmlSafe(${this.content}) }
|
||||
);`;
|
||||
}
|
||||
|
||||
get serviceCodeComponent() {
|
||||
return `this.menu.register(
|
||||
document.queryselector(".my-element"),
|
||||
{ component: MyComponent, data: { foo: 1 } }
|
||||
);`;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleArrow() {
|
||||
this.arrow = !this.arrow;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleInteractive() {
|
||||
this.interactive = !this.interactive;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleInline() {
|
||||
this.inline = !this.inline;
|
||||
}
|
||||
|
||||
@action
|
||||
registerMenu() {
|
||||
this.menuInstance?.destroy();
|
||||
this.menuInstance = this.menu.register(
|
||||
document.querySelector("#menu-instance"),
|
||||
this.options
|
||||
);
|
||||
}
|
||||
|
||||
@action
|
||||
registerMenuWithComponent() {
|
||||
this.menuInstanceWithComponent?.destroy();
|
||||
this.menuInstanceWithComponent = this.menu.register(
|
||||
document.querySelector("#menu-instance-with-component"),
|
||||
{
|
||||
...this.options,
|
||||
component: DummyComponent,
|
||||
data: { foo: 1 },
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
get options() {
|
||||
return {
|
||||
offset: this.offset,
|
||||
arrow: this.arrow,
|
||||
maxWidth: this.maxWidth,
|
||||
identifier: this.identifier,
|
||||
interactive: this.interactive,
|
||||
triggers: this.triggers ?? ["click"],
|
||||
untriggers: this.untriggers ?? ["click"],
|
||||
content: this.content,
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
<StyleguideExample @title="<DTooltip>">
|
||||
<DButton>
|
||||
{{i18n "styleguide.sections.rich_tooltip.hover_to_see"}}
|
||||
|
||||
<DTooltip>
|
||||
<h3>{{i18n "styleguide.sections.rich_tooltip.header"}}</h3>
|
||||
{{i18n "styleguide.sections.rich_tooltip.description"}}
|
||||
</DTooltip>
|
||||
</DButton>
|
||||
</StyleguideExample>
|
||||
@ -0,0 +1,93 @@
|
||||
{{! template-lint-disable no-potential-path-strings }}
|
||||
<StyleguideExample @title="Toasts service">
|
||||
<Styleguide::Component @tag="default">
|
||||
<:actions>
|
||||
<DButton
|
||||
@translatedLabel="Show default toast"
|
||||
@action={{fn this.showToast "default"}}
|
||||
/>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="success">
|
||||
<:actions>
|
||||
<DButton
|
||||
@translatedLabel="Show success toast"
|
||||
@action={{fn this.showToast "success"}}
|
||||
/>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="warning">
|
||||
<:actions>
|
||||
<DButton
|
||||
@translatedLabel="Show warning toast"
|
||||
@action={{fn this.showToast "warning"}}
|
||||
/>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="info">
|
||||
<:actions>
|
||||
<DButton
|
||||
@translatedLabel="Show info toast"
|
||||
@action={{fn this.showToast "info"}}
|
||||
/>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="error">
|
||||
<:actions>
|
||||
<DButton
|
||||
@translatedLabel="Show error toast"
|
||||
@action={{fn this.showToast "error"}}
|
||||
/>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="custom component">
|
||||
<:actions>
|
||||
<DButton
|
||||
@translatedLabel="Show toast"
|
||||
@action={{this.showCustomComponentToast}}
|
||||
/>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Controls>
|
||||
<Styleguide::Controls::Row @name="[@options.autoClose]">
|
||||
<DToggleSwitch
|
||||
@state={{this.autoClose}}
|
||||
{{on "click" this.toggleAutoClose}}
|
||||
/>
|
||||
</Styleguide::Controls::Row>
|
||||
{{#if this.autoClose}}
|
||||
<Styleguide::Controls::Row @name="[@options.duration] ms">
|
||||
<Input @value={{this.duration}} @type="number" />
|
||||
</Styleguide::Controls::Row>
|
||||
{{/if}}
|
||||
<Styleguide::Controls::Row @name="[@options.class]">
|
||||
<Input @value={{this.class}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row>
|
||||
<b>Model props for default:</b>
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@options.data.title]">
|
||||
<Input @value={{this.title}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@options.data.message]">
|
||||
<Input @value={{this.message}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@options.data.icon]">
|
||||
<IconPicker
|
||||
@name="icon"
|
||||
@value={{this.icon}}
|
||||
@options={{hash maximum=1}}
|
||||
@onChange={{action (mut this.icon)}}
|
||||
/>
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="With an action">
|
||||
<DToggleSwitch @state={{this.action}} {{on "click" this.toggleAction}} />
|
||||
</Styleguide::Controls::Row>
|
||||
</Styleguide::Controls>
|
||||
</StyleguideExample>
|
||||
@ -0,0 +1,70 @@
|
||||
import { action } from "@ember/object";
|
||||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { TOAST } from "float-kit/lib/constants";
|
||||
import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
|
||||
|
||||
export default class Toasts extends Component {
|
||||
@service toasts;
|
||||
|
||||
@tracked title = "Title";
|
||||
@tracked message = "Message";
|
||||
@tracked duration = TOAST.options.duration;
|
||||
@tracked autoClose = TOAST.options.autoClose;
|
||||
@tracked class;
|
||||
@tracked action = true;
|
||||
@tracked icon;
|
||||
|
||||
@action
|
||||
showCustomComponentToast() {
|
||||
this.toasts.show({
|
||||
duration: this.duration,
|
||||
autoClose: this.autoClose,
|
||||
class: this.class,
|
||||
component: DummyComponent,
|
||||
data: {
|
||||
foo: 1,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
showToast(theme) {
|
||||
const actions = [];
|
||||
|
||||
if (this.action) {
|
||||
actions.push({
|
||||
label: "Ok",
|
||||
class: "btn-primary",
|
||||
action: (args) => {
|
||||
// eslint-disable-next-line no-alert
|
||||
alert("Closing toast:" + args.data.title);
|
||||
args.close();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
this.toasts[theme]({
|
||||
duration: this.duration,
|
||||
autoClose: this.autoClose,
|
||||
class: this.class,
|
||||
data: {
|
||||
title: this.title,
|
||||
message: this.message,
|
||||
icon: this.icon,
|
||||
actions,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
toggleAction() {
|
||||
this.action = !this.action;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleAutoClose() {
|
||||
this.autoClose = !this.autoClose;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
<StyleguideExample @title="<DTooltip />">
|
||||
<Styleguide::Component @tag="tooltip component">
|
||||
<:sample>
|
||||
<DTooltip
|
||||
@label={{this.label}}
|
||||
@offset={{this.offset}}
|
||||
@arrow={{this.arrow}}
|
||||
@maxWidth={{this.maxWidth}}
|
||||
@identifier={{this.identifier}}
|
||||
@interactive={{this.interactive}}
|
||||
@triggers={{this.triggers}}
|
||||
@untriggers={{this.untriggers}}
|
||||
@content={{this.content}}
|
||||
@inline={{this.inline}}
|
||||
/>
|
||||
</:sample>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="tooltip component">
|
||||
<:sample>
|
||||
<DTooltip
|
||||
@offset={{this.offset}}
|
||||
@arrow={{this.arrow}}
|
||||
@maxWidth={{this.maxWidth}}
|
||||
@identifier={{this.identifier}}
|
||||
@interactive={{this.interactive}}
|
||||
@triggers={{this.triggers}}
|
||||
@untriggers={{this.untriggers}}
|
||||
@content={{this.content}}
|
||||
@inline={{this.inline}}
|
||||
>
|
||||
<:trigger>
|
||||
{{this.label}}
|
||||
</:trigger>
|
||||
<:content>
|
||||
{{this.content}}
|
||||
</:content>
|
||||
</DTooltip>
|
||||
</:sample>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="tooltip service">
|
||||
<:sample>
|
||||
<span id="tooltip-instance">{{this.label}}</span>
|
||||
</:sample>
|
||||
<:actions>
|
||||
<DButton @action={{this.registerTooltip}}>Register</DButton>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Component @tag="tooltip service">
|
||||
<:sample>
|
||||
<span id="tooltip-instance-with-component">{{this.label}}</span>
|
||||
</:sample>
|
||||
<:actions>
|
||||
<DButton @action={{this.registerTooltipWithComponent}}>Register</DButton>
|
||||
</:actions>
|
||||
</Styleguide::Component>
|
||||
|
||||
<Styleguide::Controls>
|
||||
<Styleguide::Controls::Row @name="Example label">
|
||||
<Input @value={{this.label}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@content]">
|
||||
<Input @value={{this.content}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@identifier]">
|
||||
<Input @value={{this.identifier}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@offset]">
|
||||
<Input @value={{this.offset}} @type="number" />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@triggers]">
|
||||
<Input @value={{this.triggers}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@untriggers]">
|
||||
<Input @value={{this.untriggers}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@maxWidth]">
|
||||
<Input @value={{this.maxWidth}} @type="number" />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@interactive]">
|
||||
<DToggleSwitch
|
||||
@state={{this.interactive}}
|
||||
{{on "click" this.toggleInteractive}}
|
||||
/>
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@arrow]">
|
||||
<DToggleSwitch @state={{this.arrow}} {{on "click" this.toggleArrow}} />
|
||||
</Styleguide::Controls::Row>
|
||||
<Styleguide::Controls::Row @name="[@inline]">
|
||||
<DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
|
||||
</Styleguide::Controls::Row>
|
||||
</Styleguide::Controls>
|
||||
</StyleguideExample>
|
||||
@ -0,0 +1,112 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { action } from "@ember/object";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
|
||||
import { TOOLTIP } from "float-kit/lib/constants";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
|
||||
export default class Tooltips extends Component {
|
||||
@service tooltip;
|
||||
|
||||
@tracked label = "What is this?";
|
||||
@tracked triggers = TOOLTIP.options.triggers;
|
||||
@tracked untriggers = TOOLTIP.options.untriggers;
|
||||
@tracked arrow = TOOLTIP.options.arrow;
|
||||
@tracked inline = TOOLTIP.options.inline;
|
||||
@tracked interactive = TOOLTIP.options.interactive;
|
||||
@tracked maxWidth = TOOLTIP.options.maxWidth;
|
||||
@tracked identifier;
|
||||
@tracked offset = TOOLTIP.options.offset;
|
||||
@tracked _content = "Hello World!";
|
||||
|
||||
get content() {
|
||||
return this._content;
|
||||
}
|
||||
|
||||
set content(value) {
|
||||
this._content = htmlSafe(value);
|
||||
}
|
||||
|
||||
get templateCode() {
|
||||
return `<DTooltip
|
||||
@label="${this.label}"
|
||||
@content="${this.content}"
|
||||
/>`;
|
||||
}
|
||||
|
||||
get templateCodeContent() {
|
||||
return `<DTooltip @maxWidth={{100}}>
|
||||
<:trigger>
|
||||
${this.label}
|
||||
</:trigger>
|
||||
<:content>
|
||||
${this.content}
|
||||
</:content>
|
||||
</DTooltip>`;
|
||||
}
|
||||
|
||||
get serviceCode() {
|
||||
return `this.tooltip.register(
|
||||
document.queryselector(".my-element"),
|
||||
{ content: "${this.content}" }
|
||||
);`;
|
||||
}
|
||||
|
||||
get serviceCodeComponent() {
|
||||
return `this.tooltip.register(
|
||||
document.queryselector(".my-element"),
|
||||
{ component: MyComponent, data: { foo: 1 } }
|
||||
);`;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleArrow() {
|
||||
this.arrow = !this.arrow;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleInteractive() {
|
||||
this.interactive = !this.interactive;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleInline() {
|
||||
this.inline = !this.inline;
|
||||
}
|
||||
|
||||
@action
|
||||
registerTooltip() {
|
||||
this.tooltipInstance?.destroy();
|
||||
this.tooltipInstance = this.tooltip.register(
|
||||
document.querySelector("#tooltip-instance"),
|
||||
this.options
|
||||
);
|
||||
}
|
||||
|
||||
@action
|
||||
registerTooltipWithComponent() {
|
||||
this.tooltipInstanceWithComponent?.destroy();
|
||||
this.tooltipInstanceWithComponent = this.tooltip.register(
|
||||
document.querySelector("#tooltip-instance-with-component"),
|
||||
{
|
||||
...this.options,
|
||||
component: DummyComponent,
|
||||
data: { foo: 1 },
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
get options() {
|
||||
return {
|
||||
offset: this.offset,
|
||||
arrow: this.arrow,
|
||||
maxWidth: this.maxWidth,
|
||||
identifier: this.identifier,
|
||||
interactive: this.interactive,
|
||||
triggers: this.triggers,
|
||||
untriggers: this.untriggers,
|
||||
content: this.content,
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,35 @@
|
||||
<div class="component">
|
||||
{{yield}}
|
||||
<div class="styleguide__component">
|
||||
{{#if @tag}}
|
||||
<span class="styleguide__component-tag">{{@tag}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if (has-block "title")}}
|
||||
<div class="styleguide__component-title">
|
||||
{{yield to="title"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (or (has-block) (has-block "sample"))}}
|
||||
<div class="styleguide__component-sample">
|
||||
{{#if (has-block)}}
|
||||
{{yield}}
|
||||
{{/if}}
|
||||
|
||||
{{#if (has-block "sample")}}
|
||||
{{yield to="sample"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (has-block "actions")}}
|
||||
<div class="styleguide__component-actions">
|
||||
{{yield to="actions"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (has-block "code")}}
|
||||
<div class="styleguide__component-code">
|
||||
{{yield to="code"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -18,7 +18,9 @@ import headerIcons from "../components/sections/molecules/header-icons";
|
||||
import navigationBar from "../components/sections/molecules/navigation-bar";
|
||||
import navigationStacked from "../components/sections/molecules/navigation-stacked";
|
||||
import postMenu from "../components/sections/molecules/post-menu";
|
||||
import richTooltip from "../components/sections/molecules/rich-tooltip";
|
||||
import tooltips from "../components/sections/molecules/tooltips";
|
||||
import menus from "../components/sections/molecules/menus";
|
||||
import toasts from "../components/sections/molecules/toasts";
|
||||
import signupCta from "../components/sections/molecules/signup-cta";
|
||||
import topicListItem from "../components/sections/molecules/topic-list-item";
|
||||
import topicNotifications from "../components/sections/molecules/topic-notifications";
|
||||
@ -70,7 +72,9 @@ const SECTIONS = [
|
||||
id: "navigation-stacked",
|
||||
},
|
||||
{ component: postMenu, category: "molecules", id: "post-menu" },
|
||||
{ component: richTooltip, category: "molecules", id: "rich-tooltip" },
|
||||
{ component: tooltips, category: "molecules", id: "tooltips" },
|
||||
{ component: menus, category: "molecules", id: "menus" },
|
||||
{ component: toasts, category: "molecules", id: "toasts" },
|
||||
{ component: signupCta, category: "molecules", id: "signup-cta" },
|
||||
{ component: topicListItem, category: "molecules", id: "topic-list-item" },
|
||||
{
|
||||
|
||||
@ -75,12 +75,6 @@
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.component {
|
||||
padding: 2rem;
|
||||
border: 2px dotted var(--primary-low);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.component-properties {
|
||||
width: 100%;
|
||||
|
||||
@ -235,3 +229,42 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.styleguide__component {
|
||||
border: 2px dotted var(--primary-low);
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
|
||||
&-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 3px 6px;
|
||||
background: var(--primary-low);
|
||||
max-width: 25%;
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
&-sample {
|
||||
display: flex;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
&-code {
|
||||
display: flex;
|
||||
|
||||
.ember-view {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,10 @@ en:
|
||||
paragraph: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
||||
date_time_inputs:
|
||||
title: "Date/Time inputs"
|
||||
menus:
|
||||
title: "Menus"
|
||||
toasts:
|
||||
title: "Toasts"
|
||||
font_scale:
|
||||
title: "Font System"
|
||||
colors:
|
||||
@ -83,12 +87,12 @@ en:
|
||||
title: "Spinners"
|
||||
empty_state:
|
||||
title: "Empty State"
|
||||
rich_tooltip:
|
||||
title: "Rich Tooltip"
|
||||
tooltips:
|
||||
title: "Tooltips"
|
||||
description: "Description"
|
||||
header: "Header"
|
||||
hover_to_see: "Hover to see a tooltip"
|
||||
char_counter:
|
||||
title: "Character Counter"
|
||||
placeholder: "Enter your text here..."
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user