@forsakringskassan/docs-live-example 2.0.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;
-        };
-    }>, {}, {}, {}, {}, 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;
-    };
-}>, {}, {}, {}, {}, 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",
@@ -1988,29 +1988,28 @@ async function getSourceCode(options) {
   }
 }
 
+// src/utils/to-kebab-case.ts
+function toKebabCase(input) {
+  return input.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    ($, ofs) => (ofs ? "-" : "") + $.toLowerCase()
+  );
+}
+
 // sfc-script:/home/runner/work/docs-live-example/docs-live-example/src/LiveExampleSourcecode.vue?type=script
 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() {
@@ -2110,7 +2109,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             { class: "icon icon--code" },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           )),
           (0, import_vue3.createTextVNode)(
             " " + (0, import_vue3.toDisplayString)($setup.codeToggleText),
@@ -2121,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] "),
@@ -2132,7 +2131,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               { class: "label fieldset__label" },
               "Kodspr\xE5k",
               -1
-              /* HOISTED */
+              /* CACHED */
             )),
             (0, import_vue3.createElementVNode)("div", _hoisted_6, [
               $props.templateLanguage === "vue" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_7, [
@@ -2359,15 +2358,15 @@ 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,
             "Unknown language, cannot render example",
             -1
-            /* HOISTED */
+            /* CACHED */
           )
-        ])))
+        ])]))
       ],
       512
       /* NEED_PATCH */
@@ -2444,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}` : [];
@@ -2455,7 +2454,9 @@ function serializeAttribute(key, value, prefix = "") {
 }
 function serializeAttributes(attrs) {
   const entries = Object.entries(attrs);
-  const kv = entries.map(([key, value]) => serializeAttribute(key, value));
+  const kv = entries.map(
+    ([key, value]) => serializeAttribute(toKebabCase(key), value)
+  );
   const flat = kv.flat();
   if (flat.length > 0) {
     return ` ${kv.flat().join(" ")}`;

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",
@@ -1974,29 +1974,28 @@ async function getSourceCode(options) {
   }
 }
 
+// src/utils/to-kebab-case.ts
+function toKebabCase(input) {
+  return input.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    ($, ofs) => (ofs ? "-" : "") + $.toLowerCase()
+  );
+}
+
 // sfc-script:/home/runner/work/docs-live-example/docs-live-example/src/LiveExampleSourcecode.vue?type=script
 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() {
@@ -2096,7 +2095,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             { class: "icon icon--code" },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           )),
           _createTextVNode(
             " " + _toDisplayString($setup.codeToggleText),
@@ -2107,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] "),
@@ -2118,7 +2117,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               { class: "label fieldset__label" },
               "Kodspr\xE5k",
               -1
-              /* HOISTED */
+              /* CACHED */
             )),
             _createElementVNode("div", _hoisted_6, [
               $props.templateLanguage === "vue" ? (_openBlock(), _createElementBlock("div", _hoisted_7, [
@@ -2174,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: {
@@ -2345,15 +2344,15 @@ 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,
             "Unknown language, cannot render example",
             -1
-            /* HOISTED */
+            /* CACHED */
           )
-        ])))
+        ])]))
       ],
       512
       /* NEED_PATCH */
@@ -2430,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}` : [];
@@ -2441,7 +2440,9 @@ function serializeAttribute(key, value, prefix = "") {
 }
 function serializeAttributes(attrs) {
   const entries = Object.entries(attrs);
-  const kv = entries.map(([key, value]) => serializeAttribute(key, value));
+  const kv = entries.map(
+    ([key, value]) => serializeAttribute(toKebabCase(key), value)
+  );
   const flat = kv.flat();
   if (flat.length > 0) {
     return ` ${kv.flat().join(" ")}`;

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/dist/utils/index.d.ts

@@ -2,3 +2,4 @@ export { generateId } from "./generate-id";
 export { getSourceCode } from "./get-source-code";
 export { highlight } from "./highlight";
 export { stripComments } from "./strip-comments";
+export { toKebabCase } from "./to-kebab-case";

package/dist/utils/to-kebab-case.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @internal
+ */
+export declare function toKebabCase(input: string): string;

package/package.json

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