Add flyout

README.md

@@ -115,6 +115,8 @@ Now you can use [VS Code Extension Readme](https://github.com/fomantic/Fomantic-
 | **Embed** | |
 | `ui-embed` | An embed can display any web content |
 | `ui-embed-simple` | An embed can display any web content with no JavaScript |
+| **Flyout** | |
+| `ui-flyout` | Flyouts are the result of a marriage between Modal and Sidebar |
 | **Emoji** | |
 | `ui-emoji` | You can provide the emoji shortname with or without colons |
 | **Feed** | |
@@ -365,6 +367,8 @@ Now you can use [VS Code Extension Readme](https://github.com/fomantic/Fomantic-
 | `ui-dropdown` | Initializes dropdown with jQuery |
 | **Embed** | |
 | `ui-embed` | Creates a container |
+| **Flyout** | |
+| `ui-flyout` | Initializes flyout with jQuery |
 | **Form** | |
 | `ui-form` | A form validation behavior checks data against a set of criteria before passing it along to the server |
 | **Modal** | |

package.json

@@ -41,7 +41,7 @@
     "devDependencies": {
         "@types/node": "^14.0.26",
         "typescript": "^3.9.7",
-        "webpack": "^4.44.0",
+        "webpack": "^5.88.2",
         "webpack-cli": "^3.3.12"
     },
     "dependencies": {

snippets/fomantic-css.code-snippets

@@ -867,6 +867,24 @@
       "<i class=\"${0:ae} flag\"></i>$0"
     ]
   },
+  "Fomantic-UI Default Flyout CSS": {
+    "prefix": "ui-flyout",
+    "description": "A standard flyout",
+    "body": [
+      "<div class=\"ui flyout\">",
+      "    <i class=\"close icon\"></i>",
+      "    <div class=\"ui header\">",
+      "        <i class=\"${1:question} icon\"></i>",
+      "        <div class=\"content\">",
+      "           ${2:Some header}",
+      "        </div>",
+      "    </div>",
+      "    <div class=\"content\">",
+      "        <p>${3:Some text}</p>",
+      "    </div>",
+      "</div>"
+    ]
+  },
   "Fomantic-UI Default Form": {
     "prefix": "ui-form",
     "description": "A form",

snippets/fomantic-js.code-snippets

@@ -48,6 +48,13 @@
       "$('${1:.ui.embed}').embed($2);"
     ]
   },
+  "Fomantic-UI Default Flyout": {
+    "prefix": "ui-flyout",
+    "description": "A standard flyout",
+    "body": [
+      "$('${1:.ui.flyout}').flyout($2);"
+    ]
+  },
   "Fomantic-UI Default Form Validation": {
     "prefix": "ui-form",
     "description": "A form validation behavior checks data against a set of criteria before passing it along to the server",

src/components/flyout-css.code-snippets

@@ -0,0 +1,20 @@
+{
+    "Fomantic-UI Default Flyout CSS": {
+        "prefix": "ui-flyout",
+        "description": "A standard flyout",
+        "body": [
+            "<div class=\"ui flyout\">",
+            "    <i class=\"close icon\"></i>",
+            "    <div class=\"ui header\">",
+            "        <i class=\"${1:question} icon\"></i>",
+            "        <div class=\"content\">",
+            "           ${2:Some header}",
+            "        </div>",
+            "    </div>",
+            "    <div class=\"content\">",
+            "        <p>${3:Some text}</p>",
+            "    </div>",
+            "</div>"
+        ]
+    }
+}

src/components/flyout-js.code-snippets

@@ -0,0 +1,9 @@
+{
+    "Fomantic-UI Default Flyout": {
+        "prefix": "ui-flyout",
+        "description": "A standard flyout",
+        "body": [
+            "$('${1:.ui.flyout}').flyout($2);"
+        ]
+    }
+}