@forsakringskassan/docs-live-example 2.2.0 → 2.4.0

package/README.md

@@ -45,6 +45,10 @@ Om exemplet behöver spara ett värde (till exempel `v-model`) så skickas detta
 
 Om exemplet behöver köra en metod så skickas detta in genom `livemethods`.
 
+#### `forceSingleColumn` (optional)
+
+Om exemplets exempelyta hindras av kontrollytan i den högra kolumnen går det att ange `forceSingleColumn` för att forcera exemplet att visas i en kolumn.
+
 ### Konfigurera exemplet
 
 För att skapa ett konfigurerbart exempel börjar vi med att skapa en ny komponent `AwesomeComponentLiveExample.vue`.

package/dist/LiveExample.vue.d.ts

@@ -1,4 +1,6 @@
 import { type PropType } from "vue";
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      * Explicitly render example in given language.
@@ -38,11 +40,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         required: false;
         default: () => {};
     };
+    forceSingleColumn: {
+        type: BooleanConstructor;
+        required: false;
+    };
 }>, {}, {
     /** Language declared by parent element via `data-language`, if any */
     parentLanguage: string;
     exampleElement: HTMLElement | undefined;
 }, {
+    containerClasses(): string[];
     templateLanguage(): "vue" | "html";
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
@@ -83,11 +90,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         required: false;
         default: () => {};
     };
+    forceSingleColumn: {
+        type: BooleanConstructor;
+        required: false;
+    };
 }>> & Readonly<{}>, {
     language: "html" | "vue" | "auto";
     components: Record<string, any>;
     livedata: Record<string, any>;
     livemethods: Record<string, any>;
+    forceSingleColumn: boolean;
 }, {}, {
     LiveExampleSourcecode: import("vue").DefineComponent<{
         element: HTMLElement;
@@ -134,5 +146,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/cjs/index.js

@@ -928,7 +928,7 @@ var require_core = __commonJS({
     };
     var escape = escapeHTML;
     var inherit = inherit$1;
-    var NO_MATCH = Symbol("nomatch");
+    var NO_MATCH = /* @__PURE__ */ Symbol("nomatch");
     var MAX_KEYWORD_HITS = 7;
     var HLJS = function(hljs) {
       const languages = /* @__PURE__ */ Object.create(null);
@@ -2289,6 +2289,10 @@ var LiveExample_default = (0, import_vue5.defineComponent)({
       default: () => {
         return {};
       }
+    },
+    forceSingleColumn: {
+      type: Boolean,
+      required: false
     }
   },
   data() {
@@ -2299,6 +2303,13 @@ var LiveExample_default = (0, import_vue5.defineComponent)({
     };
   },
   computed: {
+    containerClasses() {
+      const classes = ["live-example__container"];
+      if (this.forceSingleColumn) {
+        classes.push("live-example__container--single-column");
+      }
+      return classes;
+    },
     templateLanguage() {
       if (this.language !== "auto") {
         return this.language;
@@ -2321,67 +2332,74 @@ var LiveExample_default = (0, import_vue5.defineComponent)({
 
 // sfc-template:/home/runner/work/docs-live-example/docs-live-example/src/LiveExample.vue?type=template
 var import_vue6 = require("vue");
-var _hoisted_14 = { class: "live-example__container" };
-var _hoisted_22 = {
+var _hoisted_14 = {
   ref: "example",
-  class: "live-example__example"
+  class: "live-example__example user-background"
 };
-var _hoisted_32 = { key: 0 };
-var _hoisted_42 = ["innerHTML"];
-var _hoisted_52 = { key: 2 };
-var _hoisted_62 = { class: "live-example__controls" };
-var _hoisted_72 = {
+var _hoisted_22 = { key: 0 };
+var _hoisted_32 = ["innerHTML"];
+var _hoisted_42 = { key: 2 };
+var _hoisted_52 = { class: "live-example__controls" };
+var _hoisted_62 = {
   key: 0,
   class: "live-example__code"
 };
 function render2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_live_vue_code = (0, import_vue6.resolveComponent)("live-vue-code");
   const _component_live_example_sourcecode = (0, import_vue6.resolveComponent)("live-example-sourcecode");
-  return (0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_14, [
-    (0, import_vue6.createElementVNode)(
-      "div",
-      _hoisted_22,
-      [
-        _ctx.templateLanguage === "vue" ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_32, [
-          (0, import_vue6.createVNode)(_component_live_vue_code, {
-            components: _ctx.components,
-            template: _ctx.template,
-            livedata: _ctx.livedata,
-            livemethods: _ctx.livemethods
-          }, null, 8, ["components", "template", "livedata", "livemethods"])
-        ])) : _ctx.templateLanguage === "html" ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)(
-          import_vue6.Fragment,
-          { key: 1 },
-          [
-            (0, import_vue6.createCommentVNode)(" eslint-disable-next-line vue/no-v-html -- expected to show rendered html "),
-            (0, import_vue6.createElementVNode)("div", { innerHTML: _ctx.template }, null, 8, _hoisted_42)
-          ],
-          2112
-          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-        )) : ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_52, [..._cache[0] || (_cache[0] = [
-          (0, import_vue6.createElementVNode)(
-            "pre",
-            null,
-            "Unknown language, cannot render example",
-            -1
-            /* CACHED */
-          )
-        ])]))
-      ],
-      512
-      /* NEED_PATCH */
-    ),
-    (0, import_vue6.createElementVNode)("div", _hoisted_62, [
-      (0, import_vue6.renderSlot)(_ctx.$slots, "default")
-    ]),
-    _ctx.exampleElement ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_72, [
-      (0, import_vue6.createVNode)(_component_live_example_sourcecode, {
-        element: _ctx.exampleElement,
-        template: _ctx.template,
-        "template-language": _ctx.templateLanguage
-      }, null, 8, ["element", "template", "template-language"])
-    ])) : (0, import_vue6.createCommentVNode)("v-if", true)
-  ]);
+  return (0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)(
+    "div",
+    {
+      class: (0, import_vue6.normalizeClass)(_ctx.containerClasses)
+    },
+    [
+      (0, import_vue6.createElementVNode)(
+        "div",
+        _hoisted_14,
+        [
+          _ctx.templateLanguage === "vue" ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_22, [
+            (0, import_vue6.createVNode)(_component_live_vue_code, {
+              components: _ctx.components,
+              template: _ctx.template,
+              livedata: _ctx.livedata,
+              livemethods: _ctx.livemethods
+            }, null, 8, ["components", "template", "livedata", "livemethods"])
+          ])) : _ctx.templateLanguage === "html" ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)(
+            import_vue6.Fragment,
+            { key: 1 },
+            [
+              (0, import_vue6.createCommentVNode)(" eslint-disable-next-line vue/no-v-html -- expected to show rendered html "),
+              (0, import_vue6.createElementVNode)("div", { innerHTML: _ctx.template }, null, 8, _hoisted_32)
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) : ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_42, [..._cache[0] || (_cache[0] = [
+            (0, import_vue6.createElementVNode)(
+              "pre",
+              null,
+              "Unknown language, cannot render example",
+              -1
+              /* CACHED */
+            )
+          ])]))
+        ],
+        512
+        /* NEED_PATCH */
+      ),
+      (0, import_vue6.createElementVNode)("div", _hoisted_52, [
+        (0, import_vue6.renderSlot)(_ctx.$slots, "default")
+      ]),
+      _ctx.exampleElement ? ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_62, [
+        (0, import_vue6.createVNode)(_component_live_example_sourcecode, {
+          element: _ctx.exampleElement,
+          template: _ctx.template,
+          "template-language": _ctx.templateLanguage
+        }, null, 8, ["element", "template", "template-language"])
+      ])) : (0, import_vue6.createCommentVNode)("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
 }
 
 // src/LiveExample.vue

package/dist/esm/index.js

@@ -922,7 +922,7 @@ var require_core = __commonJS({
     };
     var escape = escapeHTML;
     var inherit = inherit$1;
-    var NO_MATCH = Symbol("nomatch");
+    var NO_MATCH = /* @__PURE__ */ Symbol("nomatch");
     var MAX_KEYWORD_HITS = 7;
     var HLJS = function(hljs) {
       const languages = /* @__PURE__ */ Object.create(null);
@@ -2275,6 +2275,10 @@ var LiveExample_default = defineComponent2({
       default: () => {
         return {};
       }
+    },
+    forceSingleColumn: {
+      type: Boolean,
+      required: false
     }
   },
   data() {
@@ -2285,6 +2289,13 @@ var LiveExample_default = defineComponent2({
     };
   },
   computed: {
+    containerClasses() {
+      const classes = ["live-example__container"];
+      if (this.forceSingleColumn) {
+        classes.push("live-example__container--single-column");
+      }
+      return classes;
+    },
     templateLanguage() {
       if (this.language !== "auto") {
         return this.language;
@@ -2306,68 +2317,75 @@ var LiveExample_default = defineComponent2({
 });
 
 // sfc-template:/home/runner/work/docs-live-example/docs-live-example/src/LiveExample.vue?type=template
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock2, createElementBlock as _createElementBlock2, createCommentVNode as _createCommentVNode2, createElementVNode as _createElementVNode2, Fragment as _Fragment2, renderSlot as _renderSlot } from "vue";
-var _hoisted_14 = { class: "live-example__container" };
-var _hoisted_22 = {
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock2, createElementBlock as _createElementBlock2, createCommentVNode as _createCommentVNode2, createElementVNode as _createElementVNode2, Fragment as _Fragment2, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
+var _hoisted_14 = {
   ref: "example",
-  class: "live-example__example"
+  class: "live-example__example user-background"
 };
-var _hoisted_32 = { key: 0 };
-var _hoisted_42 = ["innerHTML"];
-var _hoisted_52 = { key: 2 };
-var _hoisted_62 = { class: "live-example__controls" };
-var _hoisted_72 = {
+var _hoisted_22 = { key: 0 };
+var _hoisted_32 = ["innerHTML"];
+var _hoisted_42 = { key: 2 };
+var _hoisted_52 = { class: "live-example__controls" };
+var _hoisted_62 = {
   key: 0,
   class: "live-example__code"
 };
 function render2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_live_vue_code = _resolveComponent("live-vue-code");
   const _component_live_example_sourcecode = _resolveComponent("live-example-sourcecode");
-  return _openBlock2(), _createElementBlock2("div", _hoisted_14, [
-    _createElementVNode2(
-      "div",
-      _hoisted_22,
-      [
-        _ctx.templateLanguage === "vue" ? (_openBlock2(), _createElementBlock2("div", _hoisted_32, [
-          _createVNode(_component_live_vue_code, {
-            components: _ctx.components,
-            template: _ctx.template,
-            livedata: _ctx.livedata,
-            livemethods: _ctx.livemethods
-          }, null, 8, ["components", "template", "livedata", "livemethods"])
-        ])) : _ctx.templateLanguage === "html" ? (_openBlock2(), _createElementBlock2(
-          _Fragment2,
-          { key: 1 },
-          [
-            _createCommentVNode2(" eslint-disable-next-line vue/no-v-html -- expected to show rendered html "),
-            _createElementVNode2("div", { innerHTML: _ctx.template }, null, 8, _hoisted_42)
-          ],
-          2112
-          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-        )) : (_openBlock2(), _createElementBlock2("div", _hoisted_52, [..._cache[0] || (_cache[0] = [
-          _createElementVNode2(
-            "pre",
-            null,
-            "Unknown language, cannot render example",
-            -1
-            /* CACHED */
-          )
-        ])]))
-      ],
-      512
-      /* NEED_PATCH */
-    ),
-    _createElementVNode2("div", _hoisted_62, [
-      _renderSlot(_ctx.$slots, "default")
-    ]),
-    _ctx.exampleElement ? (_openBlock2(), _createElementBlock2("div", _hoisted_72, [
-      _createVNode(_component_live_example_sourcecode, {
-        element: _ctx.exampleElement,
-        template: _ctx.template,
-        "template-language": _ctx.templateLanguage
-      }, null, 8, ["element", "template", "template-language"])
-    ])) : _createCommentVNode2("v-if", true)
-  ]);
+  return _openBlock2(), _createElementBlock2(
+    "div",
+    {
+      class: _normalizeClass(_ctx.containerClasses)
+    },
+    [
+      _createElementVNode2(
+        "div",
+        _hoisted_14,
+        [
+          _ctx.templateLanguage === "vue" ? (_openBlock2(), _createElementBlock2("div", _hoisted_22, [
+            _createVNode(_component_live_vue_code, {
+              components: _ctx.components,
+              template: _ctx.template,
+              livedata: _ctx.livedata,
+              livemethods: _ctx.livemethods
+            }, null, 8, ["components", "template", "livedata", "livemethods"])
+          ])) : _ctx.templateLanguage === "html" ? (_openBlock2(), _createElementBlock2(
+            _Fragment2,
+            { key: 1 },
+            [
+              _createCommentVNode2(" eslint-disable-next-line vue/no-v-html -- expected to show rendered html "),
+              _createElementVNode2("div", { innerHTML: _ctx.template }, null, 8, _hoisted_32)
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) : (_openBlock2(), _createElementBlock2("div", _hoisted_42, [..._cache[0] || (_cache[0] = [
+            _createElementVNode2(
+              "pre",
+              null,
+              "Unknown language, cannot render example",
+              -1
+              /* CACHED */
+            )
+          ])]))
+        ],
+        512
+        /* NEED_PATCH */
+      ),
+      _createElementVNode2("div", _hoisted_52, [
+        _renderSlot(_ctx.$slots, "default")
+      ]),
+      _ctx.exampleElement ? (_openBlock2(), _createElementBlock2("div", _hoisted_62, [
+        _createVNode(_component_live_example_sourcecode, {
+          element: _ctx.exampleElement,
+          template: _ctx.template,
+          "template-language": _ctx.templateLanguage
+        }, null, 8, ["element", "template", "template-language"])
+      ])) : _createCommentVNode2("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
 }
 
 // src/LiveExample.vue

package/dist/main.css

@@ -25,7 +25,7 @@
   grid-template-areas: "example" "controls" "code";
 }
 @container example-container (width >= 43.0379746835rem) {
-  .live-example__container {
+  :not(.live-example__container--single-column) {
     grid-template-columns: 1fr var(--live-example-controls-width);
     grid-template-areas: "example controls" "code code";
   }
@@ -35,16 +35,6 @@
   padding: var(--live-example-space);
   overflow: auto;
 }
-@media (prefers-color-scheme: light) {
-  .live-example__example {
-    background: repeating-conic-gradient(#fff 0 90deg, rgb(235, 235, 235) 0 180deg) 0 0/20px 20px round;
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .live-example__example {
-    background: repeating-conic-gradient(#1b1e23 0 90deg, #313438 0 180deg) 0 0/20px 20px round;
-  }
-}
 .live-example__controls {
   grid-area: controls;
   padding: var(--live-example-space);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/docs-live-example",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Components used for live examples",
   "keywords": [
     "documentation"