@forsakringskassan/docs-live-example 1.5.6 → 2.1.0

package/dist/LiveExample.vue.d.ts

@@ -105,7 +105,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: PropType<"vue" | "html">;
             required: true;
         };
-    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         element: {
             type: {
                 new (): HTMLElement;
@@ -121,9 +121,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: PropType<"vue" | "html">;
             required: true;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
-        expandable: HTMLDivElement;
-    }, any>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     LiveVueCode: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         template: {
             type: StringConstructor;

package/dist/LiveExampleSourcecode.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"vue" | "html">;
         required: true;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     element: {
         type: {
             new (): HTMLElement;
@@ -31,7 +31,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<"vue" | "html">;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
-    expandable: HTMLDivElement;
-}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/cjs/index.js

@@ -1721,8 +1721,8 @@ function generateId(template) {
 }
 
 // src/utils/highlight.ts
-var import_standalone = __toESM(require("prettier/standalone"));
-var import_parser_html = __toESM(require("prettier/parser-html"));
+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);
@@ -1958,14 +1958,14 @@ function xml(hljs) {
 core_default.registerLanguage("html", xml);
 var prettierConfig = {
   parser: "html",
-  plugins: [import_parser_html.default],
+  plugins: [import_html.default],
   singleQuote: false,
   arrowParens: "always",
   tabWidth: 4,
   printWidth: 80
 };
 async function highlight(code) {
-  const formatted = await import_standalone.default.format(code, prettierConfig);
+  const formatted = await (0, import_standalone.format)(code, prettierConfig);
   const { value } = core_default.highlight(formatted, { language: "html" });
   return `<code class="hljs lang-html" tabindex="0">${value}</code>`;
 }
@@ -1988,6 +1988,14 @@ 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",
@@ -2110,7 +2118,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),
@@ -2132,7 +2140,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, [
@@ -2365,7 +2373,7 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
             null,
             "Unknown language, cannot render example",
             -1
-            /* HOISTED */
+            /* CACHED */
           )
         ])))
       ],
@@ -2455,7 +2463,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

@@ -1707,8 +1707,8 @@ function generateId(template) {
 }
 
 // src/utils/highlight.ts
-import prettier from "prettier/standalone";
-import htmlPlugin from "prettier/parser-html";
+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);
@@ -1951,7 +1951,7 @@ var prettierConfig = {
   printWidth: 80
 };
 async function highlight(code) {
-  const formatted = await prettier.format(code, prettierConfig);
+  const formatted = await format(code, prettierConfig);
   const { value } = core_default.highlight(formatted, { language: "html" });
   return `<code class="hljs lang-html" tabindex="0">${value}</code>`;
 }
@@ -1974,6 +1974,14 @@ 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",
@@ -2096,7 +2104,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             { class: "icon icon--code" },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           )),
           _createTextVNode(
             " " + _toDisplayString($setup.codeToggleText),
@@ -2118,7 +2126,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, [
@@ -2351,7 +2359,7 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
             null,
             "Unknown language, cannot render example",
             -1
-            /* HOISTED */
+            /* CACHED */
           )
         ])))
       ],
@@ -2441,7 +2449,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/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": "1.5.6",
+  "version": "2.1.0",
   "description": "Components used for live examples",
   "keywords": [
     "documentation"
@@ -35,7 +35,7 @@
   ],
   "peerDependencies": {
     "html-validate": ">= 7.9.0",
-    "prettier": "^2.3 || ^3",
+    "prettier": "^3.0.0",
     "vue": "^3.4.15"
   },
   "peerDependenciesMeta": {