From 6a4cd42a2bd4ca1bc1b513bbb287cb61968e9822 Mon Sep 17 00:00:00 2001 From: wenincode Date: Wed, 26 Oct 2022 08:07:35 -0600 Subject: [PATCH] Remove shadow-template/host and related components --- .../app/components/custom-element/README.mdx | 87 -------- .../app/components/custom-element/index.hbs | 11 - .../app/components/custom-element/index.js | 189 ------------------ .../app/components/disclosure-card/README.mdx | 125 ------------ .../app/components/disclosure-card/index.hbs | 90 --------- .../components/distribution-meter/README.mdx | 83 -------- .../distribution-meter/index.css.js | 32 --- .../components/distribution-meter/index.hbs | 30 --- .../distribution-meter/meter/element.js | 29 --- .../distribution-meter/meter/index.css.js | 80 -------- .../distribution-meter/meter/index.hbs | 64 ------ .../app/components/shadow-host/README.mdx | 29 --- .../app/components/shadow-host/index.hbs | 5 - .../app/components/shadow-host/index.js | 12 -- .../app/components/shadow-template/README.mdx | 162 --------------- .../app/components/shadow-template/debug.scss | 6 - .../app/components/shadow-template/index.hbs | 11 - .../consul-ui/app/modifiers/attach-shadow.js | 23 --- .../consul-ui/app/modifiers/attach-shadow.mdx | 28 --- ui/packages/consul-ui/app/styles/debug.scss | 1 - 20 files changed, 1097 deletions(-) delete mode 100644 ui/packages/consul-ui/app/components/custom-element/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/custom-element/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/custom-element/index.js delete mode 100644 ui/packages/consul-ui/app/components/disclosure-card/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/disclosure-card/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/distribution-meter/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/distribution-meter/index.css.js delete mode 100644 ui/packages/consul-ui/app/components/distribution-meter/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/distribution-meter/meter/element.js delete mode 100644 ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js delete mode 100644 ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/shadow-host/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/shadow-host/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/shadow-host/index.js delete mode 100644 ui/packages/consul-ui/app/components/shadow-template/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/shadow-template/debug.scss delete mode 100644 ui/packages/consul-ui/app/components/shadow-template/index.hbs delete mode 100644 ui/packages/consul-ui/app/modifiers/attach-shadow.js delete mode 100644 ui/packages/consul-ui/app/modifiers/attach-shadow.mdx diff --git a/ui/packages/consul-ui/app/components/custom-element/README.mdx b/ui/packages/consul-ui/app/components/custom-element/README.mdx deleted file mode 100644 index 4aa9d64c80..0000000000 --- a/ui/packages/consul-ui/app/components/custom-element/README.mdx +++ /dev/null @@ -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 (``, ``). - -```hbs preview-template - - - - -``` - -## 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 | - - diff --git a/ui/packages/consul-ui/app/components/custom-element/index.hbs b/ui/packages/consul-ui/app/components/custom-element/index.hbs deleted file mode 100644 index a040d5eca9..0000000000 --- a/ui/packages/consul-ui/app/components/custom-element/index.hbs +++ /dev/null @@ -1,11 +0,0 @@ - - {{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 - }} - diff --git a/ui/packages/consul-ui/app/components/custom-element/index.js b/ui/packages/consul-ui/app/components/custom-element/index.js deleted file mode 100644 index 7e1605a68a..0000000000 --- a/ui/packages/consul-ui/app/components/custom-element/index.js +++ /dev/null @@ -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 '': - case '': - case '': - case 'number': { - const num = parseFloat(value); - if (isNaN(num)) { - return typeof d === 'undefined' ? 0 : d; - } else { - return num; - } - } - case '': - return parseInt(value); - case '': - 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); - } -} diff --git a/ui/packages/consul-ui/app/components/disclosure-card/README.mdx b/ui/packages/consul-ui/app/components/disclosure-card/README.mdx deleted file mode 100644 index 0984564529..0000000000 --- a/ui/packages/consul-ui/app/components/disclosure-card/README.mdx +++ /dev/null @@ -1,125 +0,0 @@ - -# DisclosureCard - - -```hbs preview-template - -
- -
- Use the component -
- - - -
-

api-service-1

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{if disclosure.expanded "View less" "View more"}} - - - - -
-``` - -## Attributes - - - - -## Arguments - - - - -## Slots - - - - -## CSS Parts - - - - -## CSS Properties - - - - -## Contextual Components - - - diff --git a/ui/packages/consul-ui/app/components/disclosure-card/index.hbs b/ui/packages/consul-ui/app/components/disclosure-card/index.hbs deleted file mode 100644 index 9ce8bb5ed0..0000000000 --- a/ui/packages/consul-ui/app/components/disclosure-card/index.hbs +++ /dev/null @@ -1,90 +0,0 @@ - - - - - -
-
- - -
-
- - -
- - - {{yield disclosure}} - - - - diff --git a/ui/packages/consul-ui/app/components/distribution-meter/README.mdx b/ui/packages/consul-ui/app/components/distribution-meter/README.mdx deleted file mode 100644 index 2fd1c1016a..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/README.mdx +++ /dev/null @@ -1,83 +0,0 @@ ---- -type: custom-element ---- - -# DistributionMeter - - - -A meter-like component to show a distribution of values. - - -```hbs preview-template -
-
- Provide a widget so we can try switching between all types of meter -
- -
-
- - - {{#let - (group-by "MeshStatus" (or source.data (array))) - as |grouped|}} - - {{#each (array 'passing' 'warning' 'critical') as |status|}} - {{#let - (concat (percentage-of (get grouped (concat status '.length')) source.data.length) '%') - as |percentage|}} - - {{/let}} - {{/each}} - - {{/let}} - -
-``` - -## Attributes - - -| Attribute | Type | Default | Description | -| :-------- | :--------------------------------- | :------ | :------------------------------------ | -| type | "linear" \| "radial" \| "circular" | linear | The type of distribution meter to use | - - - -## Contextual 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 | - - diff --git a/ui/packages/consul-ui/app/components/distribution-meter/index.css.js b/ui/packages/consul-ui/app/components/distribution-meter/index.css.js deleted file mode 100644 index 336511f681..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/index.css.js +++ /dev/null @@ -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); - } - `; -}; diff --git a/ui/packages/consul-ui/app/components/distribution-meter/index.hbs b/ui/packages/consul-ui/app/components/distribution-meter/index.hbs deleted file mode 100644 index 7e5a71ffc0..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/index.hbs +++ /dev/null @@ -1,30 +0,0 @@ - - - -
- -
- - {{yield (hash - Meter=(component 'distribution-meter/meter' - type=element.attrs.type - ) - )}} - - diff --git a/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js b/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js deleted file mode 100644 index 5c058fdf0c..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js +++ /dev/null @@ -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; - } - } - } - }; -}; diff --git a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js b/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js deleted file mode 100644 index 7f105a8d9b..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js +++ /dev/null @@ -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; - } - `; -}; diff --git a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs b/ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs deleted file mode 100644 index a557e1701c..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs +++ /dev/null @@ -1,64 +0,0 @@ - - - - -
{{element.attrs.description}}
-
- - {{concat element.attrs.percentage '%'}} - - {{#if (or (eq @type 'circular') (eq @type 'radial'))}} - - {{/if}} -
- - - - - diff --git a/ui/packages/consul-ui/app/components/shadow-host/README.mdx b/ui/packages/consul-ui/app/components/shadow-host/README.mdx deleted file mode 100644 index c83c58eb94..0000000000 --- a/ui/packages/consul-ui/app/components/shadow-host/README.mdx +++ /dev/null @@ -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 - -
- -

hi

- -
- -``` - -## 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 | diff --git a/ui/packages/consul-ui/app/components/shadow-host/index.hbs b/ui/packages/consul-ui/app/components/shadow-host/index.hbs deleted file mode 100644 index 3c70ea8f0b..0000000000 --- a/ui/packages/consul-ui/app/components/shadow-host/index.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{yield (hash - host=(fn this.attachShadow) - root=this.shadowRoot - Template=(component 'shadow-template' shadowRoot=this.shadowRoot) -)}} diff --git a/ui/packages/consul-ui/app/components/shadow-host/index.js b/ui/packages/consul-ui/app/components/shadow-host/index.js deleted file mode 100644 index d13e34c199..0000000000 --- a/ui/packages/consul-ui/app/components/shadow-host/index.js +++ /dev/null @@ -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' }); - } -} diff --git a/ui/packages/consul-ui/app/components/shadow-template/README.mdx b/ui/packages/consul-ui/app/components/shadow-template/README.mdx deleted file mode 100644 index 64d352a7d2..0000000000 --- a/ui/packages/consul-ui/app/components/shadow-template/README.mdx +++ /dev/null @@ -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 `