mirror of https://github.com/status-im/consul.git
Remove shadow-template/host and related components
This commit is contained in:
wenincode
parent
b34244c62d
commit
6a4cd42a2b
|
|
@ -1,87 +0,0 @@
|
|||
# CustomElement
|
||||
|
||||
A renderless component to aid with the creation of HTML custom elements a.k.a
|
||||
WebComponents.
|
||||
|
||||
All of the CustomElement component arguments are only used at construction
|
||||
time (within the components constructor) therefore they are, by design, static.
|
||||
You shouldn't be dynamically updating these values at all. They are only for
|
||||
type checking and documention purposes and therefore once defined/hardcoded
|
||||
they should only change if you as the author wishes to change them.
|
||||
|
||||
The component is built from various other components, also see their documentaton
|
||||
for further details (`<ShadowHost />`, `<ShadowTemplate />`).
|
||||
|
||||
```hbs preview-template
|
||||
<CustomElement
|
||||
@element="x-component"
|
||||
@attrs={{array
|
||||
(array 'type' '"awesome" | "sauce"' 'awesome' 'Set the type of the x-component')
|
||||
(array 'x' 'number' 0 'The x-ness of the x-component')
|
||||
}}
|
||||
@cssprops={{array
|
||||
(array '--awesome-x-sauce' 'length' '[x]' 'Makes the x-ness of the sauce available to CSS, automatically synced/tracked from the x attributes')
|
||||
(array '--awesome-color' 'color' undefined 'This CSS property can be used to set the color of the awesome')
|
||||
}}
|
||||
@cssparts={{array
|
||||
(array 'base' 'Style base from The Outside via ::part(base)')
|
||||
}}
|
||||
@slots={{array
|
||||
(array 'header' "You'll want to document the slots also")
|
||||
(array '' 'Including the default slot')
|
||||
}}
|
||||
as |custom element|>
|
||||
<x-component
|
||||
{{did-insert custom.connect}}
|
||||
{{will-destroy custom.disconnect}}
|
||||
aria-hidden="true"
|
||||
...attributes
|
||||
>
|
||||
<custom.Template
|
||||
@styles={{css-map
|
||||
}}
|
||||
>
|
||||
<div part="base"
|
||||
data-x={{element.attrs.x}}
|
||||
data-type={{element.attrs.type}}
|
||||
>
|
||||
<slot name="header"></slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</custom.Template>
|
||||
</x-component>
|
||||
</CustomElement>
|
||||
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
All `descriptions` in attributes will be compiled out at build time as well as the `@description` attribute itself.
|
||||
|
||||
| Attribute | Type | Default | Description |
|
||||
| :------------ | :------------- | :------ | :------------------------------------------------------------------------- |
|
||||
| element | string | | The custom tag to be used for the custom element. Must include a dash |
|
||||
| description | string | | Short 1 line description for the element. Think "git commit title" style |
|
||||
| attrs | attrInfo[] | | An array of attributes that can be used on the element |
|
||||
| slots | slotsInfo[] | | An array of slots that can be used for the element (100% compiled out) |
|
||||
| cssprops | cssPropsInfo[] | | An array of CSS properties that are relevant to the component |
|
||||
| cssparts | cssPartsInfo[] | | An array of CSS parts that can be used for the element (100% compiled out) |
|
||||
| args | argsInfo[] | | An array of Glimmer arguments used for the component (100% compiled out) |
|
||||
|
||||
## Exports
|
||||
|
||||
### custom
|
||||
|
||||
| Attribute | Type | Description |
|
||||
| :--------- | :------- | :---------------------------------------------------------------------------------- |
|
||||
| connect | function | A did-insert-able callback for tagging an element to be used for the custom element |
|
||||
| disconnect | function | A will-destroy-able callback for destroying an element used for the custom element |
|
||||
|
||||
### element
|
||||
|
||||
| Attribute | Type | Description |
|
||||
| :--------- | :------- | :------------------------------------------------------------------------------- |
|
||||
| attributes | object | An object containing a reference to all the custom elements' observed properties |
|
||||
| * | | All other properties proxy through to the CustomElements class |
|
||||
|
||||
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<ShadowHost as |shadow|>
|
||||
{{yield
|
||||
(hash
|
||||
root=(fn this.setHost (fn shadow.host))
|
||||
connect=(fn this.setHost (fn shadow.host))
|
||||
Template=shadow.Template
|
||||
disconnect=(fn this.disconnect)
|
||||
)
|
||||
this.element
|
||||
}}
|
||||
</ShadowHost>
|
||||
|
|
@ -1,189 +0,0 @@
|
|||
import Component from '@glimmer/component';
|
||||
import { action } from '@ember/object';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
import { assert } from '@ember/debug';
|
||||
|
||||
const ATTRIBUTE_CHANGE = 'custom-element.attributeChange';
|
||||
const elements = new Map();
|
||||
const proxies = new WeakMap();
|
||||
|
||||
const typeCast = (attributeInfo, value) => {
|
||||
let type = attributeInfo.type;
|
||||
const d = attributeInfo.default;
|
||||
value = value == null ? attributeInfo.default : value;
|
||||
if (type.indexOf('|') !== -1) {
|
||||
assert(
|
||||
`"${value} is not of type '${type}'"`,
|
||||
type
|
||||
.split('|')
|
||||
.map((item) => item.replaceAll('"', '').trim())
|
||||
.includes(value)
|
||||
);
|
||||
type = 'string';
|
||||
}
|
||||
switch (type) {
|
||||
case '<length>':
|
||||
case '<percentage>':
|
||||
case '<dimension>':
|
||||
case 'number': {
|
||||
const num = parseFloat(value);
|
||||
if (isNaN(num)) {
|
||||
return typeof d === 'undefined' ? 0 : d;
|
||||
} else {
|
||||
return num;
|
||||
}
|
||||
}
|
||||
case '<integer>':
|
||||
return parseInt(value);
|
||||
case '<string>':
|
||||
case 'string':
|
||||
return (value || '').toString();
|
||||
}
|
||||
};
|
||||
|
||||
const attributeChangingElement = (name, Cls = HTMLElement, attributes = {}, cssprops = {}) => {
|
||||
const attrs = Object.keys(attributes);
|
||||
|
||||
const customClass = class extends Cls {
|
||||
static get observedAttributes() {
|
||||
return attrs;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
const prev = typeCast(attributes[name], oldValue);
|
||||
const value = typeCast(attributes[name], newValue);
|
||||
|
||||
const cssProp = cssprops[`--${name}`];
|
||||
if (typeof cssProp !== 'undefined' && cssProp.track === `[${name}]`) {
|
||||
this.style.setProperty(`--${name}`, value);
|
||||
}
|
||||
|
||||
if (typeof super.attributeChangedCallback === 'function') {
|
||||
super.attributeChangedCallback(name, prev, value);
|
||||
}
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(ATTRIBUTE_CHANGE, {
|
||||
detail: {
|
||||
name: name,
|
||||
previousValue: prev,
|
||||
value: value,
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
customElements.define(name, customClass);
|
||||
return () => {};
|
||||
};
|
||||
|
||||
const infoFromArray = (arr, keys) => {
|
||||
return (arr || []).reduce((prev, info) => {
|
||||
let key;
|
||||
const obj = {};
|
||||
keys.forEach((item, i) => {
|
||||
if (item === '_') {
|
||||
key = i;
|
||||
return;
|
||||
}
|
||||
obj[item] = info[i];
|
||||
});
|
||||
prev[info[key]] = obj;
|
||||
return prev;
|
||||
}, {});
|
||||
};
|
||||
const debounceRAF = (cb, prev) => {
|
||||
if (typeof prev !== 'undefined') {
|
||||
cancelAnimationFrame(prev);
|
||||
}
|
||||
return requestAnimationFrame(cb);
|
||||
};
|
||||
const createElementProxy = ($element, component) => {
|
||||
return new Proxy($element, {
|
||||
get: (target, prop, receiver) => {
|
||||
switch (prop) {
|
||||
case 'attrs':
|
||||
return component.attributes;
|
||||
default:
|
||||
if (typeof target[prop] === 'function') {
|
||||
// need to ensure we use a MultiWeakMap here
|
||||
// if(this.methods.has(prop)) {
|
||||
// return this.methods.get(prop);
|
||||
// }
|
||||
const method = target[prop].bind(target);
|
||||
// this.methods.set(prop, method);
|
||||
return method;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export default class CustomElementComponent extends Component {
|
||||
@tracked $element;
|
||||
@tracked _attributes = {};
|
||||
|
||||
__attributes;
|
||||
_attchange;
|
||||
|
||||
constructor(owner, args) {
|
||||
super(...arguments);
|
||||
if (!elements.has(args.element)) {
|
||||
const cb = attributeChangingElement(
|
||||
args.element,
|
||||
args.class,
|
||||
infoFromArray(args.attrs, ['_', 'type', 'default', 'description']),
|
||||
infoFromArray(args.cssprops, ['_', 'type', 'track', 'description'])
|
||||
);
|
||||
elements.set(args.element, cb);
|
||||
}
|
||||
}
|
||||
|
||||
get attributes() {
|
||||
return this._attributes;
|
||||
}
|
||||
|
||||
get element() {
|
||||
if (this.$element) {
|
||||
if (proxies.has(this.$element)) {
|
||||
return proxies.get(this.$element);
|
||||
}
|
||||
const proxy = createElementProxy(this.$element, this);
|
||||
proxies.set(this.$element, proxy);
|
||||
return proxy;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
@action
|
||||
setHost(attachShadow, $element) {
|
||||
attachShadow($element);
|
||||
this.$element = $element;
|
||||
this.$element.addEventListener(ATTRIBUTE_CHANGE, this.attributeChange);
|
||||
|
||||
(this.args.attrs || []).forEach((entry) => {
|
||||
const value = $element.getAttribute(entry[0]);
|
||||
$element.attributeChangedCallback(entry[0], value, value);
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
disconnect() {
|
||||
this.$element.removeEventListener(ATTRIBUTE_CHANGE, this.attributeChange);
|
||||
}
|
||||
|
||||
@action
|
||||
attributeChange(e) {
|
||||
e.stopImmediatePropagation();
|
||||
// currently if one single attribute changes
|
||||
// they all change
|
||||
this.__attributes = {
|
||||
...this.__attributes,
|
||||
[e.detail.name]: e.detail.value,
|
||||
};
|
||||
this._attchange = debounceRAF(() => {
|
||||
// tell glimmer we changed the attrs
|
||||
this._attributes = this.__attributes;
|
||||
}, this._attchange);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
<!-- START component-docs:@tagName -->
|
||||
# DisclosureCard
|
||||
<!-- END component-docs:@tagName -->
|
||||
|
||||
```hbs preview-template
|
||||
|
||||
<figure>
|
||||
|
||||
<figcaption>
|
||||
Use the component
|
||||
</figcaption>
|
||||
|
||||
<DisclosureCard as |disclosure|>
|
||||
|
||||
<header>
|
||||
<h4>api-service-1</h4>
|
||||
</header>
|
||||
<Consul::Bucket::List
|
||||
@item={{hash
|
||||
Namespace="different-nspace"
|
||||
Partition="different-partition"
|
||||
}}
|
||||
@nspace={{'nspace'}}
|
||||
@partition={{'partition'}}
|
||||
/>
|
||||
<DistributionMeter
|
||||
type="linear"
|
||||
as |meter|>
|
||||
<meter.Meter class="warning" percentage="50" />
|
||||
<meter.Meter class="critical" percentage="30" />
|
||||
</DistributionMeter>
|
||||
|
||||
<disclosure.Details
|
||||
|
||||
as |details|>
|
||||
<Consul::Bucket::List
|
||||
@item={{hash
|
||||
Namespace="different-nspace"
|
||||
Partition="different-partition"
|
||||
}}
|
||||
@nspace={{'nspace'}}
|
||||
@partition={{'partition'}}
|
||||
/>
|
||||
<DistributionMeter
|
||||
type="linear"
|
||||
as |meter|>
|
||||
<meter.Meter class="warning" percentage="80" />
|
||||
<meter.Meter class="critical" percentage="10" />
|
||||
</DistributionMeter>
|
||||
|
||||
<Consul::Bucket::List
|
||||
@item={{hash
|
||||
Namespace="different-nspace"
|
||||
Partition="different-partition"
|
||||
}}
|
||||
@nspace={{'nspace'}}
|
||||
@partition={{'partition'}}
|
||||
/>
|
||||
|
||||
<DistributionMeter
|
||||
type="linear"
|
||||
as |meter|>
|
||||
<meter.Meter class="warning" percentage="10" />
|
||||
<meter.Meter class="critical" percentage="40" />
|
||||
</DistributionMeter>
|
||||
|
||||
<Consul::Bucket::List
|
||||
@item={{hash
|
||||
Namespace="different-nspace"
|
||||
Partition="different-partition"
|
||||
}}
|
||||
@nspace={{'nspace'}}
|
||||
@partition={{'partition'}}
|
||||
/>
|
||||
|
||||
<DistributionMeter
|
||||
type="linear"
|
||||
as |meter|>
|
||||
<meter.Meter class="warning" percentage="50" />
|
||||
<meter.Meter class="critical" percentage="30" />
|
||||
</DistributionMeter>
|
||||
|
||||
</disclosure.Details>
|
||||
|
||||
<disclosure.Action
|
||||
slot="action"
|
||||
{{on 'click' disclosure.toggle}}
|
||||
>
|
||||
{{if disclosure.expanded "View less" "View more"}}
|
||||
</disclosure.Action>
|
||||
|
||||
</DisclosureCard>
|
||||
|
||||
</figure>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
<!-- START component-docs:@attrs -->
|
||||
<!-- END component-docs:@attrs -->
|
||||
|
||||
## Arguments
|
||||
|
||||
<!-- START component-docs:@args -->
|
||||
<!-- END component-docs:@args -->
|
||||
|
||||
## Slots
|
||||
|
||||
<!-- START component-docs:@slots -->
|
||||
<!-- END component-docs:@slots -->
|
||||
|
||||
## CSS Parts
|
||||
|
||||
<!-- START component-docs:@cssparts -->
|
||||
<!-- END component-docs:@cssparts -->
|
||||
|
||||
## CSS Properties
|
||||
|
||||
<!-- START component-docs:@cssprops -->
|
||||
<!-- END component-docs:@cssprops -->
|
||||
|
||||
## Contextual Components
|
||||
|
||||
<!-- START component-docs:@components -->
|
||||
<!-- END component-docs:@components -->
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<CustomElement
|
||||
@element="disclosure-card"
|
||||
@description="Block level component with extra disclosable content"
|
||||
@attrs={{array
|
||||
}}
|
||||
as |custom element|>
|
||||
<Disclosure as |disclosure|>
|
||||
<disclosure-card
|
||||
{{did-insert custom.connect}}
|
||||
{{will-destroy custom.disconnect}}
|
||||
expanded={{disclosure.expanded}}
|
||||
>
|
||||
|
||||
<custom.Template
|
||||
@styles={{css-map
|
||||
(require '/styles/base/icons/base-keyframes.css' from='/components/disclosure-card')
|
||||
(require '/styles/base/icons/icons/chevron-down/index.css' from='/components/disclosure-card')
|
||||
(require '/components/panel/index.css' from='/components/disclosure-card')
|
||||
(css "
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
slot[name='action']::slotted(button) {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
background-color: rgb(var(--tone-gray-050));
|
||||
color: rgb(var(--tone-gray-800));
|
||||
padding-top: var(--padding-y);
|
||||
padding-bottom: var(--padding-y);
|
||||
}
|
||||
slot[name='action']::slotted(button)::after {
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 300ms;
|
||||
transition-property: transform;
|
||||
--icon-name: icon-chevron-down;
|
||||
--icon-size: icon-000;
|
||||
content: '';
|
||||
}
|
||||
|
||||
:host([expanded]) slot[name='action']::slotted(button)::after {
|
||||
transform: scaleY(-100%);
|
||||
}
|
||||
|
||||
:host([expanded]) [style*='max-height'] {
|
||||
transition-duration: 50ms;
|
||||
}
|
||||
[style*='max-height'] {
|
||||
transition-timing-function: ease-out;
|
||||
transition-property: max-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
padding: var(--padding-y) var(--padding-x);
|
||||
}
|
||||
")
|
||||
}}
|
||||
>
|
||||
<div part="base"
|
||||
class={{class-map
|
||||
"panel"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
{{on-resize (dom-position (array
|
||||
(array 'height' 'max-height')
|
||||
))}}
|
||||
class={{class-map
|
||||
'content'
|
||||
}}
|
||||
>
|
||||
<slot>
|
||||
</slot>
|
||||
</div>
|
||||
<hr
|
||||
class={{class-map
|
||||
'panel-separator'
|
||||
}}
|
||||
/>
|
||||
<slot name="action">
|
||||
</slot>
|
||||
</div>
|
||||
</custom.Template>
|
||||
|
||||
{{yield disclosure}}
|
||||
|
||||
</disclosure-card>
|
||||
</Disclosure>
|
||||
</CustomElement>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
---
|
||||
type: custom-element
|
||||
---
|
||||
<!-- START component-docs:@tagName -->
|
||||
# DistributionMeter
|
||||
<!-- END component-docs:@tagName -->
|
||||
|
||||
<!-- START component-docs:@description -->
|
||||
A meter-like component to show a distribution of values.
|
||||
<!-- END component-docs:@description -->
|
||||
|
||||
```hbs preview-template
|
||||
<figure>
|
||||
<figcaption>
|
||||
Provide a widget so we can try switching between all types of meter
|
||||
</figcaption>
|
||||
<select
|
||||
onchange={{action (mut this.type) value="target.value"}}
|
||||
>
|
||||
<option>linear</option>
|
||||
<option>radial</option>
|
||||
<option>circular</option>
|
||||
</select>
|
||||
</figure>
|
||||
<figure>
|
||||
|
||||
<DataSource
|
||||
@src={{uri '/partition/namespace/dc-1/services'}}
|
||||
as |source|>
|
||||
{{#let
|
||||
(group-by "MeshStatus" (or source.data (array)))
|
||||
as |grouped|}}
|
||||
<DistributionMeter type={{or this.type 'linear'}} as |meter|>
|
||||
{{#each (array 'passing' 'warning' 'critical') as |status|}}
|
||||
{{#let
|
||||
(concat (percentage-of (get grouped (concat status '.length')) source.data.length) '%')
|
||||
as |percentage|}}
|
||||
<meter.Meter
|
||||
description={{capitalize status}}
|
||||
percentage={{percentage}}
|
||||
class={{class-map
|
||||
status
|
||||
}}
|
||||
as |meter|></meter.Meter>
|
||||
{{/let}}
|
||||
{{/each}}
|
||||
</DistributionMeter>
|
||||
{{/let}}
|
||||
</DataSource>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
<!-- START component-docs:@attrs -->
|
||||
| Attribute | Type | Default | Description |
|
||||
| :-------- | :--------------------------------- | :------ | :------------------------------------ |
|
||||
| type | "linear" \| "radial" \| "circular" | linear | The type of distribution meter to use |
|
||||
|
||||
<!-- END component-docs:@attrs -->
|
||||
|
||||
## Contextual Components
|
||||
|
||||
<!-- START component-docs:@components -->
|
||||
|
||||
### DistributionMeter::Meter
|
||||
|
||||
#### Attributes
|
||||
|
||||
| Attribute | Type | Default | Description |
|
||||
| :---------- | :----- | :------ | :----------------------------------------- |
|
||||
| percentage | number | 0 | The percentage to be used for the meter |
|
||||
| description | string | | Textual value to describe the meters value |
|
||||
|
||||
|
||||
#### CSS Properties
|
||||
|
||||
| Property | Type | Tracks | Description |
|
||||
| :---------------------- | :--------- | :----------- | :---------------------------------------------------------------- |
|
||||
| --percentage | percentage | [percentage] | Read-only alias of the percentage attribute |
|
||||
| --aggregated-percentage | percentage | | Aggregated percentage of all meters within the distribution meter |
|
||||
|
||||
<!-- END component-docs:@components -->
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
export default (css) => {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
dl {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
:host([type='linear']) {
|
||||
height: 3px;
|
||||
}
|
||||
:host([type='radial']),
|
||||
:host([type='circular']) {
|
||||
height: 300px;
|
||||
}
|
||||
:host([type='linear']) dl {
|
||||
background-color: currentColor;
|
||||
color: rgb(var(--tone-gray-100));
|
||||
border-radius: var(--decor-radius-999);
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
:host([type='linear']) dl:hover {
|
||||
transform: scaleY(3);
|
||||
box-shadow: var(--decor-elevation-200);
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<CustomElement
|
||||
@element="distribution-meter"
|
||||
@description="A meter-like component to show a distribution of values."
|
||||
@attrs={{array
|
||||
(array 'type' '"linear" | "radial" | "circular"' 'linear'
|
||||
'The type of distribution meter to use'
|
||||
)
|
||||
}}
|
||||
as |custom element|>
|
||||
<distribution-meter
|
||||
{{did-insert custom.connect}}
|
||||
{{will-destroy custom.disconnect}}
|
||||
...attributes
|
||||
>
|
||||
<custom.Template
|
||||
@styles={{css-map
|
||||
(require './index.css' from='/components/distribution-meter')
|
||||
}}
|
||||
>
|
||||
<dl>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</custom.Template>
|
||||
{{yield (hash
|
||||
Meter=(component 'distribution-meter/meter'
|
||||
type=element.attrs.type
|
||||
)
|
||||
)}}
|
||||
</distribution-meter>
|
||||
</CustomElement>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
const parseFloatWithDefault = (val, d = 0) => {
|
||||
const num = parseFloat(val);
|
||||
return isNaN(num) ? d : num;
|
||||
};
|
||||
|
||||
export default (Component) => {
|
||||
return class extends Component {
|
||||
attributeChangedCallback(name, prev, value) {
|
||||
const target = this;
|
||||
switch (name) {
|
||||
case 'percentage': {
|
||||
let prevSibling = target;
|
||||
while (prevSibling) {
|
||||
const nextSibling = prevSibling.nextElementSibling;
|
||||
const aggregatedPercentage = nextSibling
|
||||
? parseFloatWithDefault(nextSibling.style.getPropertyValue('--aggregated-percentage'))
|
||||
: 0;
|
||||
const perc =
|
||||
parseFloatWithDefault(prevSibling.getAttribute('percentage')) + aggregatedPercentage;
|
||||
prevSibling.style.setProperty('--aggregated-percentage', perc);
|
||||
prevSibling.setAttribute('aggregated-percentage', perc);
|
||||
prevSibling = prevSibling.previousElementSibling;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
export default (css) => {
|
||||
return css`
|
||||
/*@import '~/styles/base/decoration/visually-hidden.css';*/
|
||||
|
||||
:host(.critical) {
|
||||
color: rgb(var(--tone-red-500));
|
||||
}
|
||||
:host(.warning) {
|
||||
color: rgb(var(--tone-orange-500));
|
||||
}
|
||||
:host(.passing) {
|
||||
color: rgb(var(--tone-green-500));
|
||||
}
|
||||
|
||||
:host {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
dt,
|
||||
dd meter {
|
||||
animation-name: visually-hidden;
|
||||
animation-fill-mode: forwards;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
:host(.type-linear) {
|
||||
transition-property: width;
|
||||
width: calc(var(--aggregated-percentage) * 1%);
|
||||
height: 100%;
|
||||
background-color: currentColor;
|
||||
border-radius: var(--decor-radius-999);
|
||||
}
|
||||
|
||||
:host svg {
|
||||
height: 100%;
|
||||
}
|
||||
:host(.type-radial),
|
||||
:host(.type-circular) {
|
||||
transition-property: none;
|
||||
}
|
||||
:host(.type-radial) dd,
|
||||
:host(.type-circular) dd {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
:host(.type-radial) circle,
|
||||
:host(.type-circular) circle {
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.5s;
|
||||
pointer-events: stroke;
|
||||
transition-property: stroke-dashoffset, stroke-width;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50%;
|
||||
fill: transparent;
|
||||
stroke: currentColor;
|
||||
stroke-dasharray: 100, 100;
|
||||
stroke-dashoffset: calc(calc(100 - var(--aggregated-percentage)) * 1px);
|
||||
}
|
||||
:host([aggregated-percentage='100']) circle {
|
||||
stroke-dasharray: 0 !important;
|
||||
}
|
||||
:host([aggregated-percentage='0']) circle {
|
||||
stroke-dasharray: 0, 100 !important;
|
||||
}
|
||||
:host(.type-radial) circle,
|
||||
:host(.type-circular]) svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
:host(.type-radial) circle {
|
||||
stroke-width: 32;
|
||||
}
|
||||
:host(.type-circular) circle {
|
||||
stroke-width: 14;
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<CustomElement
|
||||
@element="distribution-meter-meter"
|
||||
@class={{require './element'
|
||||
from='/components/distribution-meter/meter'}}
|
||||
|
||||
@attrs={{array
|
||||
(array 'percentage' 'number' 0
|
||||
'The percentage to be used for the meter'
|
||||
)
|
||||
(array 'description' 'string' ''
|
||||
'Textual value to describe the meters value'
|
||||
)
|
||||
}}
|
||||
|
||||
@cssprops={{array
|
||||
(array '--percentage' 'percentage' '[percentage]'
|
||||
'Read-only alias of the percentage attribute'
|
||||
)
|
||||
(array '--aggregated-percentage' 'percentage' undefined
|
||||
'Aggregated percentage of all meters within the distribution meter'
|
||||
)
|
||||
}}
|
||||
as |custom element|>
|
||||
|
||||
<distribution-meter-meter
|
||||
{{did-insert custom.connect}}
|
||||
{{will-destroy custom.disconnect}}
|
||||
class={{class-map
|
||||
(array (concat 'type-' @type) @type)
|
||||
}}
|
||||
...attributes
|
||||
>
|
||||
<custom.Template
|
||||
@styles={{css-map
|
||||
(require '/styles/base/decoration/visually-hidden.css'
|
||||
from='/components/distribution-meter/meter')
|
||||
(require './index.css'
|
||||
from='/components/distribution-meter/meter')
|
||||
}}
|
||||
>
|
||||
<dt>{{element.attrs.description}}</dt>
|
||||
<dd aria-label={{concat element.attrs.percentage '%'}}>
|
||||
<meter min="0" max="100" value={{element.attrs.percentage}}>
|
||||
<slot>{{concat element.attrs.percentage '%'}}</slot>
|
||||
</meter>
|
||||
{{#if (or (eq @type 'circular') (eq @type 'radial'))}}
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 32 32"
|
||||
clip-path="circle()"
|
||||
>
|
||||
<circle
|
||||
r="16"
|
||||
cx="16"
|
||||
cy="16"
|
||||
/>
|
||||
</svg>
|
||||
{{/if}}
|
||||
</dd>
|
||||
</custom.Template>
|
||||
</distribution-meter-meter>
|
||||
|
||||
</CustomElement>
|
||||
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
# ShadowHost
|
||||
|
||||
`ShadowHost` is a small renderless mainly utility component for easily attaching
|
||||
ShadowDOM to any applicable DOM node. It mainly exists to provide a context for
|
||||
passing around a reference to the element to be used for the shadow template,
|
||||
but named appropriately for recognition.
|
||||
|
||||
If you are looking to write a custom element, please use the `CustomElement`
|
||||
component. If you are simply attaching ShadowDOM to a native HTML element then
|
||||
this is the component for you.
|
||||
|
||||
```hbs preview-template
|
||||
<ShadowHost as |shadow|>
|
||||
<div
|
||||
{{did-insert shadow.host}}
|
||||
>
|
||||
<shadow.Template>
|
||||
<p>hi</p>
|
||||
</shadow.Template>
|
||||
</div>
|
||||
</ShadowHost>
|
||||
```
|
||||
|
||||
## Exports
|
||||
|
||||
| Attribute | Type | Description |
|
||||
| :-------- | :---------------------- | :------------------------------------------------------------------------------- |
|
||||
| host | function | A did-insert-able callback for tagging an element to be used for the shadow root |
|
||||
| Template | ShadowTemplateComponent | ShadowTemplate component pre-configured with the shadow host |
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{{yield (hash
|
||||
host=(fn this.attachShadow)
|
||||
root=this.shadowRoot
|
||||
Template=(component 'shadow-template' shadowRoot=this.shadowRoot)
|
||||
)}}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import Component from '@glimmer/component';
|
||||
import { action } from '@ember/object';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
|
||||
export default class ShadowHostComponent extends Component {
|
||||
@tracked shadowRoot;
|
||||
|
||||
@action
|
||||
attachShadow($element) {
|
||||
this.shadowRoot = $element.attachShadow({ mode: 'open' });
|
||||
}
|
||||
}
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
# ShadowTemplate
|
||||
|
||||
A component to aid creating ShadowDOM based components (when required), heavily
|
||||
inspired by the upcoming Declarative Shadow DOM spec, a new way to implement and
|
||||
use Shadow DOM directly in HTML.
|
||||
|
||||
Instead of passing `shadowroot="open|closed"` as you would with Declarative
|
||||
Shadow DOM we have a `@shadowRoot` argument to which you would pass the actual
|
||||
Shadow DOM element (which itself either open or closed). You can get a reference
|
||||
to this by using the `{{attach-shadow}}` modifier.
|
||||
|
||||
Additionally a `@styles` argument is made available for you to optionally
|
||||
pass completely isolated, scoped, constructable stylesheets to be used for the
|
||||
Shadow DOM tree (you can also continue to use `<style>` within the template
|
||||
itself also if necessary).
|
||||
|
||||
For the moment we'd generally use a standard div element and add Shadow DOM to
|
||||
it, but as shown in the second example, you could also use it to make
|
||||
Glimmerized native custom-elements using Declarative ShadowDOM and
|
||||
Constructable Stylesheets.
|
||||
|
||||
**Important:** As ShadowDOM elements are completely isolated please take care
|
||||
to use the features available (slots/parts etc) to make sure components built in
|
||||
this way can make use of a11y functionality, i.e. any elements having necessary
|
||||
`id` relationships for a11y reasons should be slotted to ensure that the all
|
||||
`id`s remain in the LightDOM. Native form controls such as inputs etc should
|
||||
also be slotted in order to keep them in the LightDOM to ensure that native
|
||||
form functionality continues to work.
|
||||
|
||||
Beside several advantages of isolated DOM/CSS ShadowDOM slots can also be used
|
||||
within conditionals, something which is currently not possible with
|
||||
Glimmer/Ember slots. Mixing Glimmer/Handlebars conditionals with native
|
||||
ShadowDOM slots will give you this additional feature (see truthy conditional in
|
||||
the example below).
|
||||
|
||||
```hbs preview-template
|
||||
<div
|
||||
class={{class-map
|
||||
"component-name"
|
||||
}}
|
||||
...attributes
|
||||
{{attach-shadow (set this 'shadow')}}
|
||||
>
|
||||
<ShadowTemplate
|
||||
@shadowRoot={{this.shadow}}
|
||||
@styles={{css '
|
||||
:host {
|
||||
background-color: rgb(var(--tone-strawberry-500) / 20%);
|
||||
padding: 1rem; /* 16px */
|
||||
}
|
||||
header {
|
||||
color: purple;
|
||||
}
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
|
||||
::slotted(header) {
|
||||
color: blue;
|
||||
}
|
||||
::slotted(p) {
|
||||
color: red;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
header::before {
|
||||
margin-right: 0.375rem; /* 6px */
|
||||
}
|
||||
'}}
|
||||
>
|
||||
<header part="header">
|
||||
<slot name="header">
|
||||
<h1>Default Header</h1>
|
||||
</slot>
|
||||
</header>
|
||||
<!-- Wrap the slot in a conditional -->
|
||||
{{#if true}}
|
||||
<slot name="body">
|
||||
<p>Default Body</p>
|
||||
</slot>
|
||||
{{/if}}
|
||||
<slot>
|
||||
<!-- The default slot -->
|
||||
</slot>
|
||||
</ShadowTemplate>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.component-name::part(header)::before {
|
||||
@extend %with-logo-consul-color-icon, %as-pseudo;
|
||||
width: 2rem; /* 32px */
|
||||
height: 2rem; /* 32px */
|
||||
}
|
||||
```
|
||||
|
||||
Example with a custom element. **Please note:** These must still be instantiated
|
||||
using Glimmer syntax i.e. `<ComponentName />` not `<component-name />` but a
|
||||
`<component-name />` element will be rendered to the DOM instead of a `<div>`.
|
||||
|
||||
```hbs preview-template
|
||||
<component-name
|
||||
...attributes
|
||||
{{attach-shadow (set this 'shadow')}}
|
||||
>
|
||||
<ShadowTemplate
|
||||
@shadowRoot={{this.shadow}}
|
||||
@styles={{css '
|
||||
header {
|
||||
color: purple;
|
||||
}
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
|
||||
::slotted(header) {
|
||||
color: blue;
|
||||
}
|
||||
::slotted(p) {
|
||||
color: red;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
header::before {
|
||||
margin-right: 0.375rem; /* 6px */
|
||||
}
|
||||
'}}
|
||||
>
|
||||
<header part="header">
|
||||
<slot name="header">
|
||||
<h1>Default Header</h1>
|
||||
</slot>
|
||||
</header>
|
||||
{{#if true}}
|
||||
<slot name="body">
|
||||
<p>Default Body</p>
|
||||
</slot>
|
||||
{{/if}}
|
||||
<slot>
|
||||
<!-- The default slot -->
|
||||
</slot>
|
||||
</ShadowTemplate>
|
||||
</component-name>
|
||||
```
|
||||
|
||||
```css
|
||||
component-name::part(header)::before {
|
||||
@extend %with-logo-consul-color-icon, %as-pseudo;
|
||||
width: 2rem; /* 32px */
|
||||
height: 2rem; /* 32px */
|
||||
}
|
||||
```
|
||||
## Arguments
|
||||
|
||||
| Argument | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `shadowRoot` | `ShadowRoot` | | A reference to a shadow root (probably retrived using the `{{attach-shadow}}` modifier |
|
||||
| `styles` | `CSSResultGroup` | | Styles to be adopted by the ShadowRoot |
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
[id^='docfy-demo-preview-shadow-template'] .component-name::part(header)::before,
|
||||
[id^='docfy-demo-preview-shadow-template'] component-name::part(header)::before {
|
||||
@extend %with-logo-consul-color-icon, %as-pseudo;
|
||||
width: 2rem; /* 32px */
|
||||
height: 2rem; /* 32px */
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
{{#if @shadowRoot}}
|
||||
{{#in-element @shadowRoot}}
|
||||
{{#if @styles}}
|
||||
{{adopt-styles
|
||||
@shadowRoot
|
||||
@styles
|
||||
}}
|
||||
{{/if}}
|
||||
{{yield}}
|
||||
{{/in-element}}
|
||||
{{/if}}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { setModifierManager, capabilities } from '@ember/modifier';
|
||||
|
||||
export default setModifierManager(
|
||||
() => ({
|
||||
capabilities: capabilities('3.13', { disableAutoTracking: true }),
|
||||
|
||||
createModifier() {},
|
||||
|
||||
installModifier(_state, element, { positional: [fn, ...args], named }) {
|
||||
let shadow;
|
||||
try {
|
||||
shadow = element.attachShadow({ mode: 'open' });
|
||||
} catch (e) {
|
||||
// shadow = false;
|
||||
console.error(e);
|
||||
}
|
||||
fn(shadow);
|
||||
},
|
||||
updateModifier() {},
|
||||
destroyModifier() {},
|
||||
}),
|
||||
class CustomElementModifier {}
|
||||
);
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
# attach-shadow
|
||||
|
||||
`{{attach-shadow (set this 'shadow')}}` attaches a `ShadowRoot` to the modified DOM element
|
||||
and pass a reference to that `ShadowRoot` to the setter function.
|
||||
|
||||
|
||||
Please note: This should be used as a utility modifier for when having access
|
||||
to the shadow DOM is handy, not really for building full blown shadow DOM
|
||||
based Web Components.
|
||||
|
||||
```hbs preview-template
|
||||
<div
|
||||
{{attach-shadow (set this 'shadow')}}
|
||||
>
|
||||
{{#if this.shadow}}
|
||||
{{#in-element this.shadow}}
|
||||
<slot name="name"></slot>
|
||||
{{/in-element}}
|
||||
{{/if}}
|
||||
<p slot="name">Hello from the shadows!</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Positional Arguments
|
||||
|
||||
| Argument | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `setter` | `function` | | Usually `set` or `mut` or similar |
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
@import 'consul-ui/components/badge/debug';
|
||||
@import 'consul-ui/components/panel/debug';
|
||||
@import 'consul-ui/components/tile/debug';
|
||||
@import 'consul-ui/components/shadow-template/debug';
|
||||
@import 'consul-ui/components/csv-list/debug';
|
||||
@import 'consul-ui/components/horizontal-kv-list/debug';
|
||||
@import 'consul-ui/components/icon-definition/debug';
|
||||
|
|
|
|||
Loading…
Reference in New Issue