update function-random

Author: b3008

src/stories/FunctionRandom.stories.ts

@@ -1,21 +1,41 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+const makeSource = (name: string, min: number, max: number) =>
+  `<aa-session name="${name}">
+  <div style="display:flex; align-items:center; gap:12px;">
+    <button onclick="
+      var container = this.parentElement.querySelector('.result-container');
+      container.innerHTML = '';
+      var el = document.createElement('aa-function-random');
+      el.setAttribute('name', 'randomValue');
+      el.setAttribute('min', '${min}');
+      el.setAttribute('max', '${max}');
+      el.setAttribute('debug', '');
+      container.appendChild(el);
+      this.parentElement.querySelector('.result-value').textContent = el.value;
+    ">Generate</button>
+    <span>Result: <strong class="result-value">—</strong></span>
+    <span class="result-container" style="display:none;"></span>
+  </div>
+</aa-session>`;
 
 const meta = {
   title: "Data & Utility/Function Random",
   tags: ["autodocs"],
-  argTypes: {
-    min: { control: "number" },
-    max: { control: "number" },
+  render: (args) => {
+    const source = makeSource("random-demo", args.min, args.max);
+    return html`${unsafeHTML(source)}`;
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<aa-function-random name="randomValue" min="1" max="100"></aa-function-random>`,
+        language: "html",
+      },
+    },
   },
-  render: (args) => html`
-    <aa-function-random
-      name="randomValue"
-      min="${args.min}"
-      max="${args.max}"
-      debug
-    ></aa-function-random>
-  `,
 } satisfies Meta;
 
 export default meta;