@forsakringskassan/docs-live-example 1.4.4 → 1.4.6

package/README.md

@@ -52,7 +52,7 @@ Vi rekommenderar att använda `LiveExample` som suffix på alla live-exempel.
 
 Följande boilerplate kan användas:
 
-```vue
+```vue static
 <template>
     <live-example :components :template :livedata>
         <!-- Example configuration -->
@@ -136,6 +136,61 @@ Det går också med fördel att använda `createElement` (se beskrivning längre
          },
 ```
 
+Resultatet:
+
+```vue live-example
+<template>
+    <live-example :template>
+        <div>
+            <label for="config-element"> Element </label>
+            <select id="config-element" v-model="tagName">
+                <option value="div">div</option>
+                <option value="p">p</option>
+                <option value="em">em</option>
+            </select>
+        </div>
+        <div>
+            <label>
+                <input
+                    type="checkbox"
+                    v-model="placeholderText"
+                    :value="true"
+                />
+                Use placeholder text
+            </label>
+        </div>
+    </live-example>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import {
+    LiveExample,
+    createElement,
+} from "@forsakringskassan/docs-live-example";
+
+export default defineComponent({
+    name: "AwesomeComponentLiveExample",
+    components: { LiveExample },
+    data() {
+        return {
+            tagName: "div",
+            placeholderText: false,
+        };
+    },
+    computed: {
+        template(): string {
+            const { tagName, placeholderText } = this;
+            const message = placeholderText
+                ? "Lorem ipsum dolor sit amet"
+                : "Hello World!";
+            return createElement(tagName, message);
+        },
+    },
+});
+</script>
+```
+
 ## `createElement`
 
 A helper function to render the markup for the live example.

package/dist/LiveExample.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
      * time).
      */
     language: {
-        type: PropType<"html" | "auto" | "vue">;
+        type: PropType<"vue" | "html" | "auto">;
         required: false;
         default: string;
         validator(value: string): boolean;
@@ -59,7 +59,7 @@ declare const _default: import("vue").DefineComponent<{
      * time).
      */
     language: {
-        type: PropType<"html" | "auto" | "vue">;
+        type: PropType<"vue" | "html" | "auto">;
         required: false;
         default: string;
         validator(value: string): boolean;

package/dist/LiveExampleSourcecode.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     templateLanguage: {
-        type: PropType<"html" | "vue">;
+        type: PropType<"vue" | "html">;
         required: true;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     templateLanguage: {
-        type: PropType<"html" | "vue">;
+        type: PropType<"vue" | "html">;
         required: true;
     };
 }>>, {}, {}>;

package/dist/cjs/index.js

@@ -918,7 +918,7 @@ var require_core = __commonJS({
       }
       return mode;
     }
-    var version = "11.9.0";
+    var version = "11.10.0";
     var HTMLInjectionError = class extends Error {
       constructor(reason, html) {
         super(reason);

package/dist/esm/index.js

@@ -912,7 +912,7 @@ var require_core = __commonJS({
       }
       return mode;
     }
-    var version = "11.9.0";
+    var version = "11.10.0";
     var HTMLInjectionError = class extends Error {
       constructor(reason, html) {
         super(reason);

package/dist/main.css

@@ -9,14 +9,26 @@
 
 :root {
   --live-example-space: 1.5rem;
+  --live-example-controls-width: 17rem;
+}
+
+.code-preview {
+  container-type: inline-size;
+  container-name: example-container;
 }
 
 .live-example__container {
   border: var(--f-border-width-small) solid #ddddde;
   border-radius: 4px;
   display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "example controls" "code code";
+  grid-template-columns: 1fr;
+  grid-template-areas: "example" "controls" "code";
+}
+@container example-container (width >= 43.0379746835rem) {
+  .live-example__container {
+    grid-template-columns: 1fr var(--live-example-controls-width);
+    grid-template-areas: "example controls" "code code";
+  }
 }
 .live-example__example {
   grid-area: example;

package/package.json

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