feat: show whether the property is static (#190)

Author: bendera

.changeset/lazy-crabs-yell.md

@@ -0,0 +1,9 @@
+---
+'@api-viewer/common': patch
+'@api-viewer/demo': patch
+'@api-viewer/docs': patch
+'@api-viewer/tabs': patch
+'api-viewer-element': patch
+---
+
+Added the ability to show whether a property is static

docs/assets/custom-elements.json

@@ -105,6 +105,16 @@
               "name": "_boundBodyKeyup",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'1.0.0'",
+              "description": "Version of the component"
+            },
             {
               "kind": "method",
               "name": "focus",
@@ -334,6 +344,16 @@
               "privacy": "private",
               "default": "this._onOpened.bind(this)"
             },
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'1.0.0'",
+              "description": "Version of the component"
+            },
             {
               "kind": "field",
               "name": "focused",
@@ -500,6 +520,16 @@
               "default": "'en-GB'",
               "description": "Locale code used for formatting.",
               "attribute": "locale"
+            },
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'1.0.0'",
+              "description": "Version of the component"
             }
           ],
           "attributes": [
@@ -691,6 +721,16 @@
               "attribute": "indeterminate",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'1.0.0'",
+              "description": "Version of the component"
+            },
             {
               "kind": "method",
               "name": "setBounds",

docs/docs/api/styling.md

@@ -24,6 +24,9 @@ The following custom CSS properties are available:
 | `--ave-tab-color`                | Inactive tabs color                             |
 | `--ave-tab-selected-color`       | Selected tab color                              |
 | `--ave-tab-indicator-size`       | Size of the selected tab indicator              |
+| `--ave-tag-background-color`     | Background color of tags (e.g., `static`)       |
+| `--ave-tag-border-color`         | Color of tag borders                            |
+| `--ave-tag-color`                | Color of tags                                   |
 
 ## CSS shadow parts
 

fixtures/lit/src/expansion-panel.ts

@@ -51,6 +51,11 @@ export class ExpansionPanel extends OpenedMixin(LitElement) {
 
   private _boundBodyKeyup = this._onBodyKeyup.bind(this);
 
+  /**
+   * Version of the component
+   */
+  static version = '1.0.0';
+
   static get styles(): CSSResult {
     return css`
       :host {

fixtures/lit/src/fancy-accordion.ts

@@ -41,6 +41,11 @@ export class FancyAccordion extends LitElement {
 
   private _boundOnOpened = this._onOpened.bind(this) as EventListener;
 
+  /**
+   * Version of the component
+   */
+  static version = '1.0.0';
+
   static get styles(): CSSResult {
     return css`
       :host {

fixtures/lit/src/intl-currency.ts

@@ -44,6 +44,11 @@ export class IntlCurrency extends LitElement {
    */
   @property() locale: string | null | undefined = 'en-GB';
 
+  /**
+   * Version of the component
+   */
+  static version = '1.0.0';
+
   static get styles(): CSSResult {
     return css`
       :host {

fixtures/lit/src/progress-bar.ts

@@ -59,6 +59,11 @@ export class ProgressBar extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) indeterminate = false;
 
+  /**
+   * Version of the component
+   */
+  static version = '1.0.0';
+
   static get styles(): CSSResult {
     return css`
       :host {

packages/api-common/src/shared-styles.ts

@@ -25,6 +25,9 @@ export default css`
     --ave-link-hover-color: #d63200;
     --ave-tab-indicator-size: 2px;
     --ave-tab-color: rgba(0, 0, 0, 0.54);
+    --ave-tag-background-color: #e2e3e5;
+    --ave-tag-border-color: #d6d8db;
+    --ave-tag-color: #383d41;
     --ave-monospace-font: Menlo, 'DejaVu Sans Mono', 'Liberation Mono', Consolas,
       'Courier New', monospace;
   }

packages/api-docs/src/layout.ts

@@ -25,9 +25,13 @@ const renderItem = (
   description?: string,
   valueType?: string,
   value?: unknown,
-  attribute?: string
+  attribute?: string,
+  isStatic?: boolean
 ): TemplateResult => html`
   <div part="docs-item">
+    ${isStatic
+      ? html`<div part="docs-row"><div part="docs-tag">static</div></div>`
+      : nothing}
     <div part="docs-row">
       <div part="docs-column" class="column-name-${prefix}">
         <div part="docs-label">Name</div>
@@ -140,6 +144,8 @@ class ApiDocsLayout extends LitElement {
       cssParts
     ].every((arr) => arr.length === 0);
 
+    props.sort((p) => (p.static ? -1 : 1));
+
     const attributes = attrs.filter(
       (x) => !props.some((y) => y.name === x.fieldName)
     );
@@ -158,15 +164,16 @@ class ApiDocsLayout extends LitElement {
               props,
               html`
                 ${props.map((prop) => {
-                  const { name, description, type } = prop;
+                  const { name, description, type, static: isStatic } = prop;
                   const attribute = attrs.find((x) => x.fieldName === name);
                   return renderItem(
                     'prop',
                     name,
                     description,
                     type?.text,
                     prop.default,
-                    attribute?.name
+                    attribute?.name,
+                    isStatic
                   );
                 })}
               `

packages/api-docs/src/styles.ts

@@ -40,6 +40,16 @@ export default css`
     border-top: solid 1px var(--ave-border-color);
   }
 
+  [part='docs-tag'] {
+    background-color: var(--ave-tag-background-color);
+    border: 1px solid var(--ave-tag-border-color);
+    border-radius: 3px;
+    color: var(--ave-tag-color);
+    display: inline-block;
+    font-size: 0.75rem;
+    padding: 1px 5px;
+  }
+
   [part='docs-description'] {
     display: block;
     padding: 0 1rem;