Support custom boxes

docs/example/tipBoxDocs.vue

@@ -1,5 +1,6 @@
 <template>
     <doc-section id="tipBoxDocs" name="TipBox">
+        <p>Alias: box</p>
         <div class="bs-example">
             <tip-box>
                 default
@@ -52,6 +53,62 @@
                 definition
             </tip-box>
         </doc-code>
+        <br>
+        <h4>Custom boxes</h4>
+        <div class="bs-example">
+            <box background-color="white" border-color="grey" border-left-color="blue">
+                default, styled as empty box with blue left border
+            </box>
+            <box type="info" icon=":rocket:">
+                info, with rocket icon
+            </box>
+        </div>
+        <doc-code language="markup">
+            <box background-color="white" border-color="grey" border-left-color="blue">
+                default, styled as empty box with blue left border
+            </box>
+            <box type="info" icon=":rocket:">
+                info, with rocket icon
+            </box>
+        </doc-code>
+        <doc-table name="TipBox">
+          <div>
+            <p>background-color</p>
+            <p><code>String</code></p>
+            <p><code>null</code></p>
+            <p></p>
+          </div>
+          <div>
+            <p>border-color</p>
+            <p><code>String</code></p>
+            <p><code>null</code></p>
+            <p></p>
+          </div>
+          <div>
+            <p>border-left-color</p>
+            <p><code>String</code></p>
+            <p><code>null</code></p>
+            <p>Overrides border-color for the left border.</p>
+          </div>
+          <div>
+            <p>color</p>
+            <p><code>String</code></p>
+            <p><code>null</code></p>
+            <p>Color of the text.</p>
+          </div>
+          <div>
+            <p>icon</p>
+            <p><code>String</code></p>
+            <p><code>null</code></p>
+            <p></p>
+          </div>
+          <div>
+            <p>type</p>
+            <p><code>String</code></p>
+            <p><code>'none'</code></p>
+            <p>Support: <code>info</code>, <code>warning</code>, <code>success</code>, <code>important</code>, <code>wrong</code>, <code>tip</code>, <code>definition</code>, or empty for default.</p></p>
+          </div>
+        </doc-table>
     </doc-section>
 </template>
 

src/TipBox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="alert container" :class="[boxStyle]">
+    <div class="alert container" :class="[boxStyle]" :style="customStyle">
         <div class="icon-wrapper" v-if="!isDefault">
             <span>{{{iconType}}}</span>
         </div>
@@ -13,6 +13,26 @@
   import md from './utils/markdown.js'
   export default {
     props: {
+      backgroundColor: {
+        type: String,
+        default: null
+      },
+      borderColor: {
+        type: String,
+        default: null
+      },
+      borderLeftColor: {
+        type: String,
+        default: null
+      },
+      color: {
+        type: String,
+        default: null
+      },
+      icon: {
+        type: String,
+        default: null
+      },
       type: {
         type: String,
         default: 'none'
@@ -39,8 +59,27 @@
             return 'alert-default'
         }
       },
-
+      customStyle() {
+        var style = {};
+        if (this.backgroundColor) {
+          style.backgroundColor = this.backgroundColor;
+          style.borderColor = this.backgroundColor;
+        }
+        if (this.borderColor) {
+          style.borderColor = this.borderColor;
+        }
+        if (this.borderLeftColor) {
+          style.borderLeft = `5px solid ${this.borderLeftColor}`;
+        }
+        if (this.color) {
+          style.color = this.color;
+        }
+        return style;
+      },
       iconType() {
+        if (this.icon) {
+          return md.renderInline(this.icon);
+        }
         switch (this.type) {
           case 'wrong':
             return '❌'

src/index.js

@@ -30,6 +30,7 @@ const components = {
   accordion,
   affix,
   aside,
+  box: tipBox,
   checkbox,
   dropdown,
   dynamicPanel,