Merge branch 'addFullSearch' of https://github.com/jingting1412/markbind

 into addFullSearch

packages/cli/test/functional/test_site/expected/index.html

@@ -654,6 +654,17 @@ <h2 id="panel-inside-modal">Panel inside modal<a class="fa fa-anchor" href="#pan
             <p><strong>Panel content inside modal</strong></p>
           </panel>
         </modal>
+        <p><strong>The button of modal inside dismissible box should be properly positioned</strong></p>
+        <box dismissible>
+          <div>
+            <p>
+              <trigger for="modal-a">modal trigger</trigger>.
+            </p>
+            <modal id="modal-a"><template #header>modal header</template>
+              Lorem ipsum
+            </modal>
+          </div>
+        </box>
         <p><strong>Unexpanded panel</strong></p>
         <panel panelId="unexpanded-panel-header"><template #header>
             <h2 id="unexpanded-panel-header">Unexpanded panel header<a class="fa fa-anchor" href="#unexpanded-panel-header" onclick="event.stopPropagation()"></a></h2>

packages/cli/test/functional/test_site/index.md

@@ -303,6 +303,13 @@ and **this**.
   </panel>
 </modal>
 
+**The button of modal inside dismissible box should be properly positioned**
+<box dismissible>
+
+<include src="testModal/DismissibleBox.md#example"/>
+
+</box>
+
 **Unexpanded panel**
 
 <panel header="## Unexpanded panel header">

packages/cli/test/functional/test_site/testModal/DismissibleBox.md

@@ -0,0 +1,9 @@
+<div id="example">
+
+<trigger for="modal-a">modal trigger</trigger>.
+
+<modal header="modal header" id="modal-a" >
+  Lorem ipsum
+</modal>
+
+</div>

packages/core/src/html/MdAttributeRenderer.ts

@@ -75,10 +75,23 @@ export class MdAttributeRenderer {
     return hasAttribute;
   }
 
-  processPopoverAttributes(node: MbNode) {
-    if (!this.hasSlotOverridingAttribute(node, 'header')) {
-      this.processAttributeWithoutOverride(node, 'header', true);
+  /**
+   * Checks if there is a pre-existing slot for the attribute.
+   * If there is a slot, it deletes the attribute and logs a warning.
+   * If there is no slot, it processes the markdown attribute.
+   * @param node Element to process
+   * @param attribute Attribute name to process
+   * @param isInline Whether to process the attribute with only inline markdown-it rules
+   * @param slotName Name attribute of the <slot> element to insert, which defaults to the attribute name
+   */
+  processSlotAttribute(node: MbNode, attribute: string, isInline: boolean, slotName = attribute) {
+    if (!this.hasSlotOverridingAttribute(node, attribute, slotName)) {
+      this.processAttributeWithoutOverride(node, attribute, isInline, slotName);
     }
+  }
+
+  processPopoverAttributes(node: MbNode) {
+    this.processSlotAttribute(node, 'header', true);
 
     // Warn if there is a content slot overriding the attributes 'content' or 'src'
     const hasSlotAndContentAttribute = this.hasSlotOverridingAttribute(node, 'content', 'content');
@@ -96,69 +109,63 @@ export class MdAttributeRenderer {
   }
 
   processTooltip(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'content', true);
+    this.processSlotAttribute(node, 'content', true);
   }
 
   processModalAttributes(node: MbNode) {
-    if (!this.hasSlotOverridingAttribute(node, 'header')) {
-      this.processAttributeWithoutOverride(node, 'header', true);
-    }
+    this.processSlotAttribute(node, 'header', true);
   }
 
   /*
    * Panels
    */
 
   processPanelAttributes(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'alt', false, '_alt');
-    if (!this.hasSlotOverridingAttribute(node, 'header')) {
-      this.processAttributeWithoutOverride(node, 'header', false);
-    }
+    this.processSlotAttribute(node, 'alt', false, '_alt');
+    this.processSlotAttribute(node, 'header', false);
   }
 
   /*
    * Questions, QOption, and Quizzes
    */
 
   processQuestion(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'header', false);
-    this.processAttributeWithoutOverride(node, 'hint', false);
-    this.processAttributeWithoutOverride(node, 'answer', false);
+    this.processSlotAttribute(node, 'header', false);
+    this.processSlotAttribute(node, 'hint', false);
+    this.processSlotAttribute(node, 'answer', false);
   }
 
   processQOption(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'reason', false);
+    this.processSlotAttribute(node, 'reason', false);
   }
 
   processQuiz(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'intro', false);
+    this.processSlotAttribute(node, 'intro', false);
   }
 
   /*
    * Tabs
    */
 
   processTabAttributes(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'header', true);
+    this.processSlotAttribute(node, 'header', true);
   }
 
   /*
    * Boxes
    */
 
   processBoxAttributes(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'icon', true);
-    this.processAttributeWithoutOverride(node, 'header', false);
+    this.processSlotAttribute(node, 'icon', true);
+    this.processSlotAttribute(node, 'header', false);
   }
 
   /*
    * Dropdowns
    */
 
   processDropdownAttributes(node: MbNode) {
-    if (!this.hasSlotOverridingAttribute(node, 'header')) {
-      this.processAttributeWithoutOverride(node, 'header', true);
-    }
+    this.processSlotAttribute(node, 'header', true);
   }
 
   /**
@@ -186,12 +193,12 @@ export class MdAttributeRenderer {
   }
 
   processScrollTopButtonAttributes(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'icon', true);
+    this.processSlotAttribute(node, 'icon', true);
   }
 
   processAnnotationPointAttributes(node: MbNode) {
-    this.processAttributeWithoutOverride(node, 'content', false);
-    this.processAttributeWithoutOverride(node, 'header', false);
-    this.processAttributeWithoutOverride(node, 'label', false);
+    this.processSlotAttribute(node, 'content', false);
+    this.processSlotAttribute(node, 'header', false);
+    this.processSlotAttribute(node, 'label', false);
   }
 }

packages/vue-components/src/Box.vue

@@ -30,7 +30,7 @@
       <!-- Header wrapper, not rendered if there is no header attribute -->
       <div
         v-if="headerBool()"
-        :class="['box-header-wrapper', { 'alert-dismissible': dismissible }]"
+        :class="['box-header-wrapper', { 'alert-dismissible-box': dismissible }]"
       >
         <!-- icon on the left of the header -->
         <div
@@ -64,7 +64,7 @@
         :class="[
           'box-body-wrapper',
           {
-            'alert-dismissible': dismissible && !headerBool(),
+            'alert-dismissible-box': dismissible && !headerBool(),
             'box-body-wrapper-with-heading': headerBool(),
           },
         ]"
@@ -328,7 +328,7 @@ export default {
         padding-top: 0.5rem;
     }
 
-    .alert-dismissible {
+    .alert-dismissible-box {
         padding-right: 4rem;
     }
 
@@ -354,7 +354,7 @@ export default {
         vertical-align: text-top;
     }
 
-    .alert-dismissible .btn-close {
+    .alert-dismissible-box .btn-close {
         padding: 1rem;
     }
 

packages/vue-components/src/__tests__/__snapshots__/Box.spec.js.snap

@@ -778,7 +778,7 @@ exports[`Box with dismissible option renders correctly 1`] = `
     <!---->
      
     <div
-      class="box-body-wrapper alert-dismissible"
+      class="box-body-wrapper alert-dismissible-box"
     >
       <!---->