@api-components/api-type-document 4.2.15 → 4.2.18

package/README.md

@@ -1,10 +1,8 @@
-[![Published on NPM](https://img.shields.io/npm/v/@api-components/api-type-document.svg)](https://www.npmjs.com/package/@api-components/api-type-document)
+# DEPRECATED
 
-[![Build Status](https://travis-ci.com/advanced-rest-client/api-type-document.svg)](https://travis-ci.com/advanced-rest-client/api-type-document)
+This component is being deprecated. The code base has been moved to [api-documentation](https://github.com/advanced-rest-client/api-documentation) module. This module will be archived when [PR 37](https://github.com/advanced-rest-client/api-documentation/pull/37) is merged.
 
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/advanced-rest-client/api-type-document)
-
-## <api-type-document>
+-----
 
 A documentation table for RAML type / OAS schema properties. Works with AMF data model.
 
@@ -19,7 +17,7 @@ For compatibility with previous model version use `3.x.x` version of the compone
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--api-type-document` | Mixin applied to this elment | `{}`
+`--api-type-document` | Mixin applied to this element | `{}`
 `--api-type-document-union-button-background-color` | Background color of union selector button | `#fff`
 `--api-type-document-union-button-color` | Color of union selector button | `#000`
 `--api-type-document-union-button-active-background-color` | Background color of active union selector button | `#CDDC39`
@@ -29,7 +27,7 @@ From `property-shape-document`
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--property-shape-document` | Mixin applied each proeprty element | `{}`
+`--property-shape-document` | Mixin applied each property element | `{}`
 `--property-shape-document-array-color` | Property border color when type is an array | `#8BC34A`
 `--property-shape-document-object-color` | Property border color when type is an object | `#FF9800`
 `--property-shape-document-union-color` | Property border color when type is an union | `#FFEB3B`
@@ -41,17 +39,17 @@ Custom property | Description | Default
 `--api-type-document-type-color` | Color of the "type" trait | `white`
 `--api-type-document-type-background-color` | Background color of the "type" trait | `#2196F3`
 `--api-type-document-trait-background-color` | Background color to main range trait (type, required, enum) | `#EEEEEE`,
-`--api-type-document-trait-border-radius` | Border radious of a main property traits like type, required, enum | `3px`
+`--api-type-document-trait-border-radius` | Border radius of a main property traits like type, required, enum | `3px`
 
 From `property-range-document`
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--property-range-document` | Mixin applied to this elment | `{}`
+`--property-range-document` | Mixin applied to this element | `{}`
 `--api-type-document-type-attribute-color` | Color of each attribute that describes a property | `#616161`
 `--api-type-document-examples-title-color` | Color of examples section title | ``
 `--api-type-document-examples-border-color` | Example section border color | `transparent`
-`--code-background-color` | Background color of the examples section | ``
+ `--code-background-color` | Background color of the examples section |``
 `--arc-font-body1` | Mixin applied to an example name label | `{}`
 `--arc-font-body2` | Mixin applied to the examples section title | `{}`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-type-document",
   "description": "A documentation table for type (resource) properties. Works with AMF data model",
-  "version": "4.2.15",
+  "version": "4.2.18",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",
@@ -27,31 +27,31 @@
   "dependencies": {
     "@advanced-rest-client/arc-marked": "^1.1.0",
     "@advanced-rest-client/markdown-styles": "^3.1.4",
-    "@anypoint-web-components/anypoint-button": "^1.2.0",
-    "@api-components/amf-helper-mixin": "^4.4.0",
+    "@anypoint-web-components/anypoint-button": "^1.2.3",
+    "@api-components/amf-helper-mixin": "^4.5.6",
     "@api-components/api-annotation-document": "^4.1.0",
-    "@api-components/api-resource-example-document": "^4.1.2",
+    "@api-components/api-resource-example-document": "^4.3.3",
     "@open-wc/dedupe-mixin": "^1.3.0",
     "lit-element": "^2.4.0"
   },
   "devDependencies": {
-    "@advanced-rest-client/arc-demo-helper": "^2.2.6",
-    "@anypoint-web-components/anypoint-checkbox": "^1.1.4",
-    "@anypoint-web-components/anypoint-styles": "^1.0.1",
-    "@api-components/api-model-generator": "^0.2.13",
-    "@commitlint/cli": "^12.0.1",
-    "@commitlint/config-conventional": "^12.0.1",
+    "@advanced-rest-client/arc-demo-helper": "^3.0.3",
+    "@anypoint-web-components/anypoint-checkbox": "^1.2.2",
+    "@anypoint-web-components/anypoint-styles": "^1.0.2",
+    "@api-components/api-model-generator": "^0.2.14",
+    "@commitlint/cli": "^13.2.0",
+    "@commitlint/config-conventional": "^13.2.0",
     "@open-wc/eslint-config": "^4.2.0",
     "@open-wc/testing": "^2.5.15",
-    "@web/dev-server": "^0.1.18",
-    "@web/test-runner": "^0.12.16",
-    "@web/test-runner-playwright": "^0.8.6",
-    "eslint": "^7.30.0",
+    "@web/dev-server": "^0.1.24",
+    "@web/test-runner": "^0.13.18",
+    "@web/test-runner-playwright": "^0.8.8",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.1.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "sinon": "^9.2.4",
-    "typescript": "^4.3.5",
+    "husky": "^7.0.2",
+    "lint-staged": "^11.1.2",
+    "sinon": "^11.1.2",
+    "typescript": "^4.4.3",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "scripts": {

package/src/ApiTypeDocument.js

@@ -652,59 +652,73 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     );
   }
 
+  _arrayPropertyTemplate(label, value, title) {
+    return html`
+        <div class="property-attribute" part="property-attribute">
+          <span class="attribute-label" part="attribute-label">${label}</span>
+          <span class="attribute-value" part="attribute-value" title=${title}>${value}</span>
+        </div>
+        `
+  }
+
+  _arrayPropertiesTemplate() {
+    const minCount = this._getValue(this._resolvedType, this.ns.w3.shacl.minCount)
+    const maxCount = this._getValue(this._resolvedType, this.ns.w3.shacl.maxCount)
+
+    return html`
+      ${minCount !== undefined ? this._arrayPropertyTemplate('Minimum array length:', minCount, 'Minimum amount of items in array') : ''}
+      ${maxCount !== undefined ? this._arrayPropertyTemplate('Maximum array length:', maxCount, 'Maximum amount of items in array') : ''}
+    `
+  }
+
   /**
    * @return {TemplateResult} Templates for object properties
    */
-  _arrayTemplate() {
+   _arrayTemplate() {
     const items = this._computeArrayProperties(this._resolvedType) || [];
-    return html`
-      ${this.hasParentType
-        ? html`<property-shape-document
-            class="array-document"
-            .amf="${this.amf}"
-            .shape="${this._resolvedType}"
-            .parentTypeName="${this.parentTypeName}"
-            ?narrow="${this.narrow}"
-            ?noExamplesActions="${this.noExamplesActions}"
-            ?compatibility="${this.compatibility}"
-            .mediaType="${this.mediaType}"
-            ?graph="${this.graph}"
-          ></property-shape-document>`
-        : html`<span>Array of:</span>`}
+    const documents = items.map(
+      (item) => html`
+        ${item.isShape
+          ? html`<property-shape-document
+              class="array-document"
+              .amf="${this.amf}"
+              .shape="${item}"
+              parentTypeName="${this._computeArrayParentName(this.parentTypeName)}"
+              ?narrow="${this.narrow}"
+              ?noExamplesActions="${this.noExamplesActions}"
+              ?compatibility="${this.compatibility}"
+              .mediaType="${this.mediaType}"
+              ?graph="${this.graph}"
+            ></property-shape-document>`
+          : ''}
+        ${item.isType
+          ? html`<api-type-document
+              class="union-document"
+              .amf="${this.amf}"
+              .parentTypeName="${this.parentTypeName}"
+              .type="${item}"
+              ?narrow="${this.narrow}"
+              ?noExamplesActions="${this.noExamplesActions}"
+              ?noMainExample="${this._renderMainExample}"
+              ?compatibility="${this.compatibility}"
+              .mediaType="${this.mediaType}"
+              ?graph="${this.graph}"
+            ></api-type-document>`
+          : ''}
+      `
+    );
 
-      <div class="array-children">
-        ${items.map(
-          (item) => html`
-            ${item.isShape
-              ? html`<property-shape-document
-                  class="array-document"
-                  .amf="${this.amf}"
-                  .shape="${item}"
-                  parentTypeName="${this._computeArrayParentName(this.parentTypeName)}"
-                  ?narrow="${this.narrow}"
-                  ?noExamplesActions="${this.noExamplesActions}"
-                  ?compatibility="${this.compatibility}"
-                  .mediaType="${this.mediaType}"
-                  ?graph="${this.graph}"
-                ></property-shape-document>`
-              : ''}
-            ${item.isType
-              ? html`<api-type-document
-                  class="union-document"
-                  .amf="${this.amf}"
-                  .parentTypeName="${this.parentTypeName}"
-                  .type="${item}"
-                  ?narrow="${this.narrow}"
-                  ?noExamplesActions="${this.noExamplesActions}"
-                  ?noMainExample="${this._renderMainExample}"
-                  ?compatibility="${this.compatibility}"
-                  .mediaType="${this.mediaType}"
-                  ?graph="${this.graph}"
-                ></api-type-document>`
-              : ''}
-          `
-        )}
-      </div>
+    return html`
+      ${!this.hasParentType ?
+        html`
+        <span>Array of:</span>
+        <div class="array-children">
+          ${documents}
+        </div>` 
+        : html`${documents}`
+        }
+    
+      ${this._arrayPropertiesTemplate()}
     `;
   }
 

package/src/PropertyDocumentMixin.d.ts

@@ -115,6 +115,17 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    */
   _computeIsAnyOf(range: Object): boolean
 
+
+  /**
+   * Computes value for `isAllOf` property.
+   * AllOf type is identified as `http://www.w3.org/ns/shacl#and`
+   * Returns true if `and` property is present in shape. Otherwise returns false.
+   *
+   * @param {Object} range Range object of current shape.
+   * @returns {boolean}
+   */
+  _computeIsAllOf(range: Object): boolean
+
   /**
    * Computes list of type labels to render.
    *

package/src/PropertyDocumentMixin.js

@@ -190,10 +190,9 @@ const mxFunction = (base) => {
           return 'Boolean';
         case this._getAmfKey(sc.dateTime):
         case sc.dateTime:
-          return 'DateTime';
         case this._getAmfKey(rs.dateTimeOnly):
         case rs.dateTimeOnly:
-          return 'Time';
+          return 'DateTime';
         case this._getAmfKey(sc.time):
         case sc.time:
           return 'Time';
@@ -345,6 +344,18 @@ const mxFunction = (base) => {
       return this._hasProperty(range, this.ns.w3.shacl.or);
     }
 
+
+    /**
+     * Computes value for `isAllOf` property.
+     * Returns true if `and` property is present in shape. Otherwise returns false.
+     *
+     * @param {Object} range Range object of current shape.
+     * @returns {boolean}
+     */
+    _computeIsAllOf(range) {
+      return this._hasProperty(range, this.ns.w3.shacl.and);
+    }
+
     /**
      * Computes list of type labels to render.
      *

package/src/PropertyShapeDocument.js

@@ -272,12 +272,14 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     this.isReadOnly = this._isReadOnly(range);
     this.isAnyOf = this._computeIsAnyOf(range);
     this.isOneOf = this._computeIsOneOf(range);
+    this.isAllOf = this._computeIsAllOf(range);
     this.isComplex = this._computeIsComplex(
       this.isUnion,
       this.isObject,
       this.isArray,
       this.isAnyOf,
-      this.isOneOf
+      this.isOneOf,
+      this.isAllOf
     );
     this.isScalarArray = this.isArray
       ? this._computeIsScalarArray(range)
@@ -465,10 +467,13 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
    * @param {boolean} isUnion
    * @param {boolean} isObject
    * @param {boolean} isArray
+   * @param {boolean} isAnyOf
+   * @param {boolean} isOneOf
+   * @param {boolean} isAllOf
    * @return {boolean}
    */
-  _computeIsComplex(isUnion, isObject, isArray, isAnyOf, isOneOf) {
-    return isUnion || isObject || isArray || isAnyOf || isOneOf;
+  _computeIsComplex(isUnion, isObject, isArray, isAnyOf, isOneOf, isAllOf) {
+    return isUnion || isObject || isArray || isAnyOf || isOneOf || isAllOf;
   }
 
   _evaluateGraph() {

package/src/TypeStyles.js

@@ -85,4 +85,15 @@ export default css`
   .union-type-selector {
     margin: 12px 0;
   }
+
+  .property-attribute {
+    margin: 4px 0;
+    padding: 0;
+    color: var(--api-type-document-type-attribute-color, #616161);
+  }
+
+  .attribute-label {
+    font-weight: var(--api-type-document-property-range-attribute-label-font-weight, 500);
+    margin-right: 12px;
+  }
 `;