Merge branch 'main' into dhristov/add-sidenav

Author: Dobromir Hristov

src/assets/img/[email protected]

@@ -33,7 +33,7 @@
 <script>
 import { PortalTarget } from 'portal-vue';
 
-import NavigationBar from 'docc-render/components/Tutorial/NavigationBar.vue';
+import NavigationBar from 'theme/components/Tutorial/NavigationBar.vue';
 import pageTitle from 'docc-render/mixins/pageTitle';
 import Body from './Article/Body.vue';
 import CallToAction from './Article/CallToAction.vue';

src/components/Article.vue

@@ -9,44 +9,12 @@
 -->
 
 <script>
-import { BreakpointName } from 'docc-render/utils/breakpoints';
+import {
+  BreakpointAttributes,
+  BreakpointName,
+  BreakpointScopes,
+} from 'docc-render/utils/breakpoints';
 
-const BreakpointScopes = {
-  default: 'default',
-  nav: 'nav',
-};
-
-const BreakpointAttributes = {
-  [BreakpointScopes.default]: {
-    [BreakpointName.large]: {
-      minWidth: 1069,
-      contentWidth: 980,
-    },
-    [BreakpointName.medium]: {
-      minWidth: 736,
-      maxWidth: 1068,
-      contentWidth: 692,
-    },
-    [BreakpointName.small]: {
-      minWidth: 320,
-      maxWidth: 735,
-      contentWidth: 280,
-    },
-  },
-  [BreakpointScopes.nav]: {
-    [BreakpointName.large]: {
-      minWidth: 1024,
-    },
-    [BreakpointName.medium]: {
-      minWidth: 768,
-      maxWidth: 1023,
-    },
-    [BreakpointName.small]: {
-      minWidth: 320,
-      maxWidth: 767,
-    },
-  },
-};
 const maxQuery = maxWidth => (maxWidth ? `(max-width: ${maxWidth}px)` : '');
 const minQuery = minWidth => (minWidth ? `(min-width: ${minWidth}px)` : '');
 

src/components/BreakpointEmitter.vue

@@ -225,6 +225,10 @@ export default {
       type: Array,
       required: false,
     },
+    symbolKind: {
+      type: String,
+      required: false,
+    },
     variants: {
       type: Array,
       default: () => ([]),
@@ -265,6 +269,7 @@ export default {
       identifier: this.identifier,
       languages: new Set(Object.keys(this.languagePaths)),
       interfaceLanguage: this.interfaceLanguage,
+      symbolKind: this.symbolKind,
     };
   },
   data() {

src/components/DocumentationTopic.vue

@@ -19,8 +19,8 @@
     </p>
     <Source
       :tokens="declaration.tokens"
-      :simple-indent="isSwift && !isCocoaApi"
-      :smart-indent="isCocoaApi"
+      :simple-indent="shouldSimpleIndent"
+      :smart-indent="shouldSmartIndent"
       :language="interfaceLanguage"
     />
   </div>
@@ -30,6 +30,7 @@
 import DeclarationSource from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationSource.vue';
 import Language from 'docc-render/constants/Language';
 import { APIChangesMultipleLines } from 'docc-render/mixins/apiChangesHelpers';
+import { isParentSymbolKind } from 'docc-render/utils/symbols';
 
 /**
  * Renders a code source with an optional caption.
@@ -47,6 +48,9 @@ export default {
     interfaceLanguage: {
       default: () => Language.swift.key.api,
     },
+    symbolKind: {
+      default: () => undefined,
+    },
   },
   props: {
     declaration: {
@@ -79,7 +83,9 @@ export default {
       return this.declaration.platforms.join(', ');
     },
     isSwift: ({ interfaceLanguage }) => interfaceLanguage === Language.swift.key.api,
-    isCocoaApi: ({ languages }) => languages.has(Language.objectiveC.key.api),
+    shouldSimpleIndent: ({ isSwift, shouldSmartIndent }) => isSwift && !shouldSmartIndent,
+    shouldSmartIndent: ({ languages, symbolKind }) => languages.has(Language.objectiveC.key.api)
+      && !isParentSymbolKind(symbolKind),
   },
 };
 </script>

src/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue

@@ -14,7 +14,7 @@
     <dl class="datalist">
       <template v-for="value in values">
         <dt class="param-name" :key="`${value.name}:name`">
-          <code>{{value.name}}</code>
+          <WordBreak tag="code">{{value.name}}</WordBreak>
         </dt>
         <dd v-if="value.content" class="value-content" :key="`${value.name}:content`">
           <ContentNode :content="value.content" />
@@ -27,10 +27,11 @@
 <script>
 import OnThisPageSection from 'docc-render/components/DocumentationTopic/OnThisPageSection.vue';
 import ContentNode from 'docc-render/components/ContentNode.vue';
+import WordBreak from 'docc-render/components/WordBreak.vue';
 
 export default {
   name: 'PossibleValues',
-  components: { ContentNode, OnThisPageSection },
+  components: { ContentNode, OnThisPageSection, WordBreak },
   props: {
     values: {
       type: Array,

src/components/DocumentationTopic/PrimaryContent/PossibleValues.vue

@@ -117,7 +117,7 @@ export default {
     async closeAndFocusToggler() {
       this.closeDropdown();
       await this.$nextTick();
-      this.$refs.dropdownToggle.focus();
+      this.$refs.dropdownToggle.focus({ preventScroll: true });
     },
     closeDropdown() {
       this.isOpen = false;
@@ -151,7 +151,7 @@ export default {
         return;
       }
       // focus the new element
-      nextElement.focus();
+      nextElement.focus({ preventScroll: true });
     },
     /**
      * Focuses the currently active option
@@ -161,7 +161,7 @@ export default {
       const currentOption = this.$el.querySelector(`.${ActiveOptionClass}`);
       if (!currentOption) return;
       await this.$nextTick();
-      currentOption.focus();
+      currentOption.focus({ preventScroll: true });
     },
   },
 };
@@ -237,6 +237,7 @@ $focus-shadow: 0 0 0 2px var(--color-focus-color);
 // the wrapping in `dropdown-custom` is needed to properly apply the /deep/ selector
 .dropdown-custom {
   border-radius: $border-radius;
+
   &.is-open {
     border-radius: $border-radius $border-radius 0 0;
   }

src/components/DropdownCustom.vue

@@ -28,7 +28,7 @@
         >
           <CloseIcon />
         </button>
-        <div class="modal-content">
+        <div class="modal-content" ref="content">
           <slot />
         </div>
       </div>
@@ -137,7 +137,7 @@ export default {
   },
   mounted() {
     this.focusTrapInstance = new FocusTrap();
-    document.addEventListener('keydown', this.onEscapeClick);
+    document.addEventListener('keydown', this.onKeydown);
     // add listeners for dynamic themes
     if (this.isThemeDynamic) {
       const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
@@ -155,7 +155,7 @@ export default {
     if (this.isVisible) {
       scrollLock.unlockScroll(this.$refs.container);
     }
-    document.removeEventListener('keydown', this.onEscapeClick);
+    document.removeEventListener('keydown', this.onKeydown);
     this.focusTrapInstance.destroy();
   },
   methods: {
@@ -190,6 +190,14 @@ export default {
     closeModal() {
       this.isVisible = false;
     },
+    /**
+     * Select all modal's content
+     */
+    selectContent() {
+      window.getSelection().selectAllChildren(
+        this.$refs.content,
+      );
+    },
     /**
      * Closes the modal when clicking on the backdrop
      */
@@ -198,12 +206,23 @@ export default {
     },
     /**
      * Handle the keydown body event listener.
-     * Used to close the modal on `Escape` click.
+     * Used to:
+     * - Overwrite cmd+a and ctrl+a behaviour to select modal content only
+     * - Close the modal on `Escape` click.
      * @param {KeyboardEvent} params
      * @param {String} params.key
      */
-    onEscapeClick({ key }) {
-      if (!this.isVisible || key !== 'Escape') return;
+    onKeydown(event) {
+      const {
+        metaKey = false, ctrlKey = false, key,
+      } = event;
+
+      if (!this.isVisible) return;
+      if (key === 'a' && (metaKey || ctrlKey)) {
+        event.preventDefault();
+        this.selectContent();
+      }
+      if (key !== 'Escape') return;
       this.closeModal();
     },
     /**
@@ -269,12 +288,8 @@ $modal-close-color: light-color(figure-gray-tertiary) !default;
   &-standard {
     padding: 20px;
 
-    &.modal-with-close .container {
-      padding-top: 80px;
-    }
-
     .container {
-      padding: 50px;
+      padding: 60px;
       border-radius: $big-border-radius;
       @include prefers-dark {
         background: rgb(29, 29, 31);

src/components/GenericModal.vue

@@ -9,7 +9,13 @@
 -->
 
 <template>
-  <picture>
+  <img
+    v-if="fallbackImageSrcSet"
+    class="fallback"
+    :alt="`${alt} Image failed to load.`"
+    :srcset="fallbackImageSrcSet"
+  />
+  <picture v-else>
     <!--
       if "Auto" is selected, provide an alternate dark variant if available
       using the appropriate media query
@@ -24,6 +30,7 @@
       v-if="prefersDark && darkVariantAttributes"
       v-bind="darkVariantAttributes"
       :alt="alt"
+      @error="handleImageLoadError"
     >
     <!--
       otherwise use the default variant (light preferred over dark if both available)
@@ -32,6 +39,7 @@
       v-else
       v-bind="defaultAttributes"
       :alt="alt"
+      @error="handleImageLoadError"
     >
   </picture>
 </template>
@@ -41,6 +49,7 @@
 import imageAsset from 'docc-render/mixins/imageAsset';
 import AppStore from 'docc-render/stores/AppStore';
 import ColorScheme from 'docc-render/constants/ColorScheme';
+import noImage from 'theme/assets/img/[email protected]';
 import { normalizeAssetUrl } from 'docc-render/utils/assets';
 
 function constructAttributes(sources) {
@@ -70,7 +79,10 @@ function constructAttributes(sources) {
 export default {
   name: 'ImageAsset',
   mixins: [imageAsset],
-  data: () => ({ appState: AppStore.state }),
+  data: () => ({
+    appState: AppStore.state,
+    fallbackImageSrcSet: null,
+  }),
   computed: {
     defaultAttributes: ({
       lightVariantAttributes,
@@ -92,5 +104,12 @@ export default {
       required: true,
     },
   },
+  methods: {
+    handleImageLoadError() {
+      // fall back to a default DocC-Render provided image if the specificed
+      // image fails to load for any reason
+      this.fallbackImageSrcSet = `${noImage} 2x`;
+    },
+  },
 };
 </script>

src/components/ImageAsset.vue

@@ -21,9 +21,8 @@ export default {
     };
   },
   created() {
-    this.$router.onReady(() => {
-      this.loaded = true;
-    });
+    const cb = () => { this.loaded = true; };
+    this.$router.onReady(cb, cb);
   },
 };
 </script>