@forsakringskassan/docs-live-example 2.1.0 → 2.2.0

package/dist/LiveExample.vue.d.ts

@@ -1,5 +1,5 @@
 import { type PropType } from "vue";
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      * Explicitly render example in given language.
      *
@@ -89,39 +89,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     livedata: Record<string, any>;
     livemethods: Record<string, any>;
 }, {}, {
-    LiveExampleSourcecode: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        element: {
-            type: {
-                new (): HTMLElement;
-                prototype: HTMLElement;
-            };
-            required: true;
-        };
-        template: {
-            type: StringConstructor;
-            required: true;
-        };
-        templateLanguage: {
-            type: PropType<"vue" | "html">;
-            required: true;
-        };
-    }>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        element: {
-            type: {
-                new (): HTMLElement;
-                prototype: HTMLElement;
-            };
-            required: true;
-        };
-        template: {
-            type: StringConstructor;
-            required: true;
-        };
-        templateLanguage: {
-            type: PropType<"vue" | "html">;
-            required: true;
-        };
-    }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    LiveExampleSourcecode: import("vue").DefineComponent<{
+        element: HTMLElement;
+        template: string;
+        templateLanguage: "vue" | "html";
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+        element: HTMLElement;
+        template: string;
+        templateLanguage: "vue" | "html";
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
     LiveVueCode: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         template: {
             type: StringConstructor;
@@ -158,4 +134,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/LiveExampleSourcecode.vue.d.ts

@@ -1,35 +1,8 @@
-import { type PropType } from "vue";
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    element: {
-        type: {
-            new (): HTMLElement;
-            prototype: HTMLElement;
-        };
-        required: true;
-    };
-    template: {
-        type: StringConstructor;
-        required: true;
-    };
-    templateLanguage: {
-        type: PropType<"vue" | "html">;
-        required: true;
-    };
-}>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    element: {
-        type: {
-            new (): HTMLElement;
-            prototype: HTMLElement;
-        };
-        required: true;
-    };
-    template: {
-        type: StringConstructor;
-        required: true;
-    };
-    templateLanguage: {
-        type: PropType<"vue" | "html">;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    element: HTMLElement;
+    template: string;
+    templateLanguage: "vue" | "html";
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/cjs/index.js

@@ -1626,7 +1626,7 @@ function expandAnimation(element) {
   };
   function shrink() {
     isClosing = true;
-    const startHeight = `${element.offsetHeight}px`;
+    const startHeight = `${String(element.offsetHeight)}px`;
     const endHeight = `0px`;
     element.classList.add(ClassNames.COLLAPSING);
     if (animation) {
@@ -1655,7 +1655,9 @@ function expandAnimation(element) {
       currentHeight = element.getBoundingClientRect().height;
     }
     element.setAttribute("aria-expanded", "true");
-    window.requestAnimationFrame(() => expand(currentHeight));
+    window.requestAnimationFrame(() => {
+      expand(currentHeight);
+    });
   }
   function expand(currentHeight) {
     isExpanding = true;
@@ -1663,8 +1665,8 @@ function expandAnimation(element) {
       animation.cancel();
       element.style.height = "";
     }
-    const startHeight = `${currentHeight}px`;
-    const endHeight = `${element.offsetHeight}px`;
+    const startHeight = `${String(currentHeight)}px`;
+    const endHeight = `${String(element.offsetHeight)}px`;
     element.classList.add(ClassNames.EXPANDING);
     animation = element.animate(
       {
@@ -1720,10 +1722,6 @@ function generateId(template) {
   return `le-${hash.toString(16)}`;
 }
 
-// src/utils/highlight.ts
-var import_standalone = require("prettier/standalone");
-var import_html = __toESM(require("prettier/plugins/html"));
-
 // node_modules/highlight.js/es/core.js
 var import_core = __toESM(require_core(), 1);
 var core_default = import_core.default;
@@ -1955,6 +1953,8 @@ function xml(hljs) {
 }
 
 // src/utils/highlight.ts
+var import_html = __toESM(require("prettier/plugins/html"));
+var import_standalone = require("prettier/standalone");
 core_default.registerLanguage("html", xml);
 var prettierConfig = {
   parser: "html",
@@ -2000,25 +2000,16 @@ function toKebabCase(input) {
 var LiveExampleSourcecode_default = /* @__PURE__ */ (0, import_vue.defineComponent)({
   __name: "LiveExampleSourcecode",
   props: {
-    element: {
-      type: HTMLElement,
-      required: true
-    },
-    template: {
-      type: String,
-      required: true
-    },
-    templateLanguage: {
-      type: String,
-      required: true
-    }
+    element: { type: null, required: true },
+    template: { type: String, required: true },
+    templateLanguage: { type: String, required: true }
   },
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
     let idPrefix = generateId(props.template);
     const sourcecode = (0, import_vue2.ref)("");
-    const expandable = (0, import_vue2.ref)(null);
+    const expandable = (0, import_vue2.useTemplateRef)("expandableRef");
     const animation = (0, import_vue2.ref)({
       isOpen: false,
       toggle() {
@@ -2129,7 +2120,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       (0, import_vue3.createElementVNode)("div", {
         id: $setup.id("code-expand"),
-        ref: "expandable",
+        ref: "expandableRef",
         class: "collapsed"
       }, [
         (0, import_vue3.createCommentVNode)(" [html-validate-disable-next wcag/h32 -- this form is not meant to be submitted] "),
@@ -2367,7 +2358,7 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
           ],
           2112
           /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-        )) : ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_52, _cache[0] || (_cache[0] = [
+        )) : ((0, import_vue6.openBlock)(), (0, import_vue6.createElementBlock)("div", _hoisted_52, [..._cache[0] || (_cache[0] = [
           (0, import_vue6.createElementVNode)(
             "pre",
             null,
@@ -2375,7 +2366,7 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
             -1
             /* CACHED */
           )
-        ])))
+        ])]))
       ],
       512
       /* NEED_PATCH */
@@ -2452,7 +2443,7 @@ function serializeAttribute(key, value, prefix = "") {
     return [];
   }
   if (typeof value === "string" || typeof value === "number") {
-    return `${prefix}${key}="${value}"`;
+    return `${prefix}${key}="${String(value)}"`;
   }
   if (typeof value === "boolean") {
     return value ? `${prefix}${key}` : [];

package/dist/esm/index.js

@@ -1567,7 +1567,7 @@ import { defineComponent as defineComponent2 } from "vue";
 
 // sfc-script:/home/runner/work/docs-live-example/docs-live-example/src/LiveExampleSourcecode.vue?type=script
 import { defineComponent as _defineComponent } from "vue";
-import { ref, computed, onMounted, watch, nextTick } from "vue";
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
 
 // src/expand-animation.ts
 var DURATION = 400;
@@ -1612,7 +1612,7 @@ function expandAnimation(element) {
   };
   function shrink() {
     isClosing = true;
-    const startHeight = `${element.offsetHeight}px`;
+    const startHeight = `${String(element.offsetHeight)}px`;
     const endHeight = `0px`;
     element.classList.add(ClassNames.COLLAPSING);
     if (animation) {
@@ -1641,7 +1641,9 @@ function expandAnimation(element) {
       currentHeight = element.getBoundingClientRect().height;
     }
     element.setAttribute("aria-expanded", "true");
-    window.requestAnimationFrame(() => expand(currentHeight));
+    window.requestAnimationFrame(() => {
+      expand(currentHeight);
+    });
   }
   function expand(currentHeight) {
     isExpanding = true;
@@ -1649,8 +1651,8 @@ function expandAnimation(element) {
       animation.cancel();
       element.style.height = "";
     }
-    const startHeight = `${currentHeight}px`;
-    const endHeight = `${element.offsetHeight}px`;
+    const startHeight = `${String(currentHeight)}px`;
+    const endHeight = `${String(element.offsetHeight)}px`;
     element.classList.add(ClassNames.EXPANDING);
     animation = element.animate(
       {
@@ -1706,10 +1708,6 @@ function generateId(template) {
   return `le-${hash.toString(16)}`;
 }
 
-// src/utils/highlight.ts
-import { format } from "prettier/standalone";
-import htmlPlugin from "prettier/plugins/html";
-
 // node_modules/highlight.js/es/core.js
 var import_core = __toESM(require_core(), 1);
 var core_default = import_core.default;
@@ -1941,6 +1939,8 @@ function xml(hljs) {
 }
 
 // src/utils/highlight.ts
+import htmlPlugin from "prettier/plugins/html";
+import { format } from "prettier/standalone";
 core_default.registerLanguage("html", xml);
 var prettierConfig = {
   parser: "html",
@@ -1986,25 +1986,16 @@ function toKebabCase(input) {
 var LiveExampleSourcecode_default = /* @__PURE__ */ _defineComponent({
   __name: "LiveExampleSourcecode",
   props: {
-    element: {
-      type: HTMLElement,
-      required: true
-    },
-    template: {
-      type: String,
-      required: true
-    },
-    templateLanguage: {
-      type: String,
-      required: true
-    }
+    element: { type: null, required: true },
+    template: { type: String, required: true },
+    templateLanguage: { type: String, required: true }
   },
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
     let idPrefix = generateId(props.template);
     const sourcecode = ref("");
-    const expandable = ref(null);
+    const expandable = useTemplateRef("expandableRef");
     const animation = ref({
       isOpen: false,
       toggle() {
@@ -2115,7 +2106,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _createElementVNode("div", {
         id: $setup.id("code-expand"),
-        ref: "expandable",
+        ref: "expandableRef",
         class: "collapsed"
       }, [
         _createCommentVNode(" [html-validate-disable-next wcag/h32 -- this form is not meant to be submitted] "),
@@ -2182,7 +2173,7 @@ LiveExampleSourcecode_default.__scopeId = "data-v-7a98eb26";
 var LiveExampleSourcecode_default2 = LiveExampleSourcecode_default;
 
 // src/live-vue-code.ts
-import { defineComponent, compile, h } from "vue";
+import { compile, defineComponent, h } from "vue";
 var live_vue_code_default = defineComponent({
   name: "LiveVueCode",
   props: {
@@ -2353,7 +2344,7 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
           ],
           2112
           /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-        )) : (_openBlock2(), _createElementBlock2("div", _hoisted_52, _cache[0] || (_cache[0] = [
+        )) : (_openBlock2(), _createElementBlock2("div", _hoisted_52, [..._cache[0] || (_cache[0] = [
           _createElementVNode2(
             "pre",
             null,
@@ -2361,7 +2352,7 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
             -1
             /* CACHED */
           )
-        ])))
+        ])]))
       ],
       512
       /* NEED_PATCH */
@@ -2438,7 +2429,7 @@ function serializeAttribute(key, value, prefix = "") {
     return [];
   }
   if (typeof value === "string" || typeof value === "number") {
-    return `${prefix}${key}="${value}"`;
+    return `${prefix}${key}="${String(value)}"`;
   }
   if (typeof value === "boolean") {
     return value ? `${prefix}${key}` : [];

package/dist/main.css

@@ -33,9 +33,18 @@
 .live-example__example {
   grid-area: example;
   padding: var(--live-example-space);
-  background: repeating-conic-gradient(#fff 0 90deg, rgb(235, 235, 235) 0 180deg) 0 0/20px 20px round;
   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.1.0",
+  "version": "2.2.0",
   "description": "Components used for live examples",
   "keywords": [
     "documentation"