add directive style2

olton · Feb 24, 2025 · f184765 · f184765
1 parent 62cbd44
commit f184765
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 11 deletions.
diff --git a/__html__/directive2.html b/__html__/directive2.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link href="../lib/metro.css" rel="stylesheet">
+
+    <title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
+
+</head>
+<body class="cloak">
+<nav data-role="appbar" class="border-bottom bd-default">
+    <span class="app-bar-item">Any</span>
+    <div class="app-bar-item-static no-hover">
+        <input type="checkbox" data-role="theme-switcher"/>
+    </div>
+    <div class="app-bar-item-static no-hover">
+        <div class="text-leader">Component Test</div>
+    </div>
+</nav>
+    <div class="container-fluid">
+        <div class="container">
+            <div data-role="directive" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="tip" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="success" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="info" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="warning" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="caution"  data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="bug" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="fuck" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="important" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="shit" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+            <div data-role="directive" data-directive="air" data-style="2">
+                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, vel.</div>
+                <code>const that = this;</code>
+            </div>
+        </div>
+    </div>
+
+<script src="../lib/metro.js"></script>
+<script>
+    Metro.welcome()
+</script>
+</body>
+</html>
diff --git a/lib/metro.all.css b/lib/metro.all.css
@@ -57148,6 +57148,28 @@ aside::after {
 .directive.directive-air .icon::before {
   content: "\1f4a8";
 }
+.directive-style-2 {
+  border: solid var(--directive-border-color);
+  border-width: 0 0 0 10px;
+}
+.directive-style-2 .icon {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  font-size: 24px;
+  transform: rotate(0);
+  left: -21px;
+  top: 10px;
+  border: 1px solid var(--directive-border-color);
+  background: var(--default-background);
+  padding: 6px;
+  z-index: 1;
+}
+.directive-style-2 .icon::before {
+  font-size: 20px !important;
+  position: relative;
+  margin-top: -3px;
+}
 
 /* source/components/donut/donut.less */
 .donut {

diff --git a/lib/metro.all.css.map b/lib/metro.all.css.map
diff --git a/lib/metro.all.js b/lib/metro.all.js
@@ -20548,6 +20548,8 @@
       directive: "note",
       showIcon: true,
       title: "",
+      style: 1,
+      // default - 1, vue - 2
       onDirectiveCreate: Metro2.noop
     };
     Metro2.directiveSetup = function(options) {
@@ -20571,7 +20573,7 @@
       },
       _createStructure: function() {
         const that = this, element2 = this.element, o2 = this.options;
-        const directive = element2.wrap("<div>").addClass("directive").addClass(`directive-${o2.directive}`);
+        const directive = element2.wrap("<div>").addClass("directive").addClass(`directive-style-${o2.style}`).addClass(`directive-${o2.directive}`);
         const title3 = $3("<div>").addClass("directive-title").html(o2.title ? o2.title : this.strings[`label_${o2.directive.toLowerCase()}`].toUpperCase());
         if (o2.showIcon) {
           title3.prepend($3("<span>").addClass("icon").html(icons[o2.directive]));

diff --git a/lib/metro.all.js.map b/lib/metro.all.js.map
diff --git a/lib/metro.css b/lib/metro.css
@@ -57148,6 +57148,28 @@ aside::after {
 .directive.directive-air .icon::before {
   content: "\1f4a8";
 }
+.directive-style-2 {
+  border: solid var(--directive-border-color);
+  border-width: 0 0 0 10px;
+}
+.directive-style-2 .icon {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  font-size: 24px;
+  transform: rotate(0);
+  left: -21px;
+  top: 10px;
+  border: 1px solid var(--directive-border-color);
+  background: var(--default-background);
+  padding: 6px;
+  z-index: 1;
+}
+.directive-style-2 .icon::before {
+  font-size: 20px !important;
+  position: relative;
+  margin-top: -3px;
+}
 
 /* source/components/donut/donut.less */
 .donut {

diff --git a/lib/metro.css.map b/lib/metro.css.map
diff --git a/lib/metro.js b/lib/metro.js
@@ -20548,6 +20548,8 @@
       directive: "note",
       showIcon: true,
       title: "",
+      style: 1,
+      // default - 1, vue - 2
       onDirectiveCreate: Metro2.noop
     };
     Metro2.directiveSetup = function(options) {
@@ -20571,7 +20573,7 @@
       },
       _createStructure: function() {
         const that = this, element2 = this.element, o2 = this.options;
-        const directive = element2.wrap("<div>").addClass("directive").addClass(`directive-${o2.directive}`);
+        const directive = element2.wrap("<div>").addClass("directive").addClass(`directive-style-${o2.style}`).addClass(`directive-${o2.directive}`);
         const title3 = $3("<div>").addClass("directive-title").html(o2.title ? o2.title : this.strings[`label_${o2.directive.toLowerCase()}`].toUpperCase());
         if (o2.showIcon) {
           title3.prepend($3("<span>").addClass("icon").html(icons[o2.directive]));

diff --git a/lib/metro.js.map b/lib/metro.js.map
diff --git a/source/components/directive/directive.js b/source/components/directive/directive.js
@@ -68,6 +68,7 @@
         directive: "note",
         showIcon: true,
         title: "",
+        style: 1, // default - 1, vue - 2
         onDirectiveCreate: Metro.noop
     };
 
@@ -98,7 +99,7 @@
 
         _createStructure: function(){
             const that = this, element = this.element, o = this.options;
-            const directive = element.wrap("<div>").addClass("directive").addClass(`directive-${o.directive}`);
+            const directive = element.wrap("<div>").addClass("directive").addClass(`directive-style-${o.style}`).addClass(`directive-${o.directive}`);
             const title = $("<div>").addClass("directive-title").html(o.title ? o.title : this.strings[`label_${o.directive.toLowerCase()}`].toUpperCase());
             if (o.showIcon) {
                 title.prepend($("<span>").addClass("icon").html(icons[o.directive]));                

diff --git a/source/components/directive/directive.less b/source/components/directive/directive.less
@@ -199,4 +199,27 @@
             content: "💨";
         }
     }
+}
+
+.directive-style-2 {
+    border: solid var(--directive-border-color);
+    border-width: 0 0 0 10px;
+    .icon {
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        font-size: 24px;
+        transform: rotate(0);
+        left: -21px;
+        top: 10px;
+        border: 1px solid var(--directive-border-color);
+        background: var(--default-background);
+        padding: 6px;
+        z-index: 1;
+        &::before {
+            font-size: 20px!important;          
+            position: relative;
+            margin-top: -3px;
+        }
+    }
 }