@ohos-ports/histoire-app 1.0.0-beta.0

package/dist/bundled/components/panel/PaneTabs.vue2.js

@@ -0,0 +1,114 @@
+import { defineComponent, toRefs, computed, createBlock, openBlock, withCtx, createVNode, createTextVNode, normalizeClass, unref, createCommentVNode, toDisplayString } from "@histoire/vendors/vue";
+import { useEventsStore } from "../../stores/events.js";
+import "../base/BaseOverflowMenu.vue.js";
+import BaseOverflowTab from "../base/BaseOverflowTab.vue.js";
+import BaseTab from "../base/BaseTab.vue.js";
+import BaseTag from "../base/BaseTag.vue.js";
+import "./StoryDocs.vue.js";
+import { useStoryDoc } from "./StoryDocs.vue2.js";
+import _sfc_main$1 from "../base/BaseOverflowMenu.vue2.js";
+"use strict";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PaneTabs",
+  props: {
+    story: {},
+    variant: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { story } = toRefs(props);
+    const { renderedDoc } = useStoryDoc(story);
+    const eventsStore = useEventsStore();
+    const hasEvents = computed(() => eventsStore.events.length);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, { class: "histoire-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750" }, {
+        overflow: withCtx(() => [
+          createVNode(BaseOverflowTab, {
+            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "" } },
+            matched: !_ctx.$route.query.tab
+          }, {
+            default: withCtx(() => [..._cache[3] || (_cache[3] = [
+              createTextVNode(" Controls ", -1)
+            ])]),
+            _: 1
+          }, 8, ["to", "matched"]),
+          createVNode(BaseOverflowTab, {
+            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "docs" } },
+            matched: _ctx.$route.query.tab === "docs",
+            class: normalizeClass({
+              "opacity-50": !unref(renderedDoc)
+            })
+          }, {
+            default: withCtx(() => [..._cache[4] || (_cache[4] = [
+              createTextVNode(" Docs ", -1)
+            ])]),
+            _: 1
+          }, 8, ["to", "matched", "class"]),
+          createVNode(BaseOverflowTab, {
+            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "events" } },
+            matched: _ctx.$route.query.tab === "events",
+            class: normalizeClass({
+              "htw-opacity-50": !hasEvents.value
+            })
+          }, {
+            default: withCtx(() => [
+              _cache[5] || (_cache[5] = createTextVNode(" Events ", -1)),
+              unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag, { key: 0 }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(eventsStore).unseen <= 99 ? unref(eventsStore).unseen : "99+"), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["to", "matched", "class"])
+        ]),
+        default: withCtx(() => [
+          createVNode(BaseTab, {
+            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "" } },
+            matched: !_ctx.$route.query.tab
+          }, {
+            default: withCtx(() => [..._cache[0] || (_cache[0] = [
+              createTextVNode(" Controls ", -1)
+            ])]),
+            _: 1
+          }, 8, ["to", "matched"]),
+          createVNode(BaseTab, {
+            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "docs" } },
+            matched: _ctx.$route.query.tab === "docs",
+            class: normalizeClass({
+              "htw-opacity-50": !unref(renderedDoc)
+            })
+          }, {
+            default: withCtx(() => [..._cache[1] || (_cache[1] = [
+              createTextVNode(" Docs ", -1)
+            ])]),
+            _: 1
+          }, 8, ["to", "matched", "class"]),
+          createVNode(BaseTab, {
+            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "events" } },
+            matched: _ctx.$route.query.tab === "events",
+            class: normalizeClass({
+              "htw-opacity-50": !hasEvents.value
+            })
+          }, {
+            default: withCtx(() => [
+              _cache[2] || (_cache[2] = createTextVNode(" Events ", -1)),
+              unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag, { key: 0 }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(eventsStore).unseen <= 99 ? unref(eventsStore).unseen : "99+"), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["to", "matched", "class"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StatePresets.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./StatePresets.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StatePresets.vue2.js

@@ -0,0 +1,193 @@
+import { defineComponent, computed, onMounted, ref, resolveDirective, createElementBlock, openBlock, createElementVNode, withDirectives, createVNode, withKeys, unref, isRef, withCtx, createCommentVNode, toDisplayString, createBlock, withModifiers, vModelText, normalizeClass, nextTick } from "@histoire/vendors/vue";
+import { clone, omit, applyState } from "@histoire/shared";
+import { Icon } from "@histoire/vendors/iconify";
+import { useStorage, useTimeoutFn, onClickOutside } from "@histoire/vendors/vue-use";
+import { toRawDeep } from "../../util/state.js";
+import "../base/BaseSelect.vue.js";
+import _sfc_main$1 from "../base/BaseSelect.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center" };
+const _hoisted_2 = ["onUpdate:modelValue"];
+const _hoisted_3 = {
+  key: 1,
+  class: "htw-flex htw-items-center htw-gap-2"
+};
+const _hoisted_4 = { class: "htw-flex-1 htw-truncate" };
+const _hoisted_5 = { class: "htw-flex htw-gap-2 htw-items-center" };
+const _hoisted_6 = { class: "htw-flex-1 htw-truncate" };
+const DEFAULT_ID = "default";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StatePresets",
+  props: {
+    story: {},
+    variant: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const saveId = computed(() => `${props.story.id}:${props.variant.id}`);
+    const omitKeys = ["_hPropDefs"];
+    const defaultState = clone(omit(toRawDeep(props.variant.state), omitKeys));
+    const selectedOption = useStorage(
+      `_histoire-presets/${saveId.value}/selected`,
+      DEFAULT_ID
+    );
+    const presetStates = useStorage(
+      `_histoire-presets/${saveId.value}/states`,
+      /* @__PURE__ */ new Map()
+    );
+    const presetsOptions = computed(() => {
+      const options = { [DEFAULT_ID]: "Initial state" };
+      presetStates.value.forEach((value, key) => {
+        options[key] = value.label;
+      });
+      return options;
+    });
+    function resetState() {
+      selectedOption.value = DEFAULT_ID;
+      applyState(props.variant.state, clone(defaultState));
+    }
+    function applyPreset(id) {
+      if (id === DEFAULT_ID) {
+        resetState();
+      } else if (presetStates.value.has(id)) {
+        applyState(props.variant.state, clone(toRawDeep(presetStates.value.get(id).state)));
+      }
+    }
+    onMounted(() => {
+      if (selectedOption.value !== DEFAULT_ID) {
+        applyPreset(selectedOption.value);
+      }
+    });
+    const input = ref();
+    const select = ref();
+    const canEdit = computed(() => selectedOption.value !== DEFAULT_ID);
+    const isEditing = ref(false);
+    async function createPreset() {
+      const id = (/* @__PURE__ */ new Date()).getTime().toString();
+      presetStates.value.set(id, { state: clone(omit(toRawDeep(props.variant.state), omitKeys)), label: "New preset" });
+      selectedOption.value = id;
+      isEditing.value = true;
+      await nextTick();
+      input.value.select();
+    }
+    const savedNotif = ref(false);
+    const savedTimeout = useTimeoutFn(() => {
+      savedNotif.value = false;
+    }, 1e3);
+    async function savePreset() {
+      if (!canEdit.value) return;
+      const preset = presetStates.value.get(selectedOption.value);
+      preset.state = clone(omit(toRawDeep(props.variant.state), omitKeys));
+      savedNotif.value = true;
+      savedTimeout.start();
+    }
+    function deletePreset(id) {
+      if (!confirm("Are you sure you want to delete this preset?")) {
+        return;
+      }
+      if (selectedOption.value === id) {
+        resetState();
+      }
+      presetStates.value.delete(id);
+    }
+    async function startEditing() {
+      if (!canEdit.value) {
+        return;
+      }
+      isEditing.value = true;
+      await nextTick();
+      input.value.select();
+    }
+    function stopEditing() {
+      isEditing.value = false;
+    }
+    onClickOutside(select, stopEditing);
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          ref_key: "select",
+          ref: select,
+          class: "htw-flex-1 htw-min-w-0"
+        }, [
+          createVNode(_sfc_main$1, {
+            modelValue: unref(selectedOption),
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null),
+            options: presetsOptions.value,
+            onDblclick: _cache[3] || (_cache[3] = ($event) => startEditing()),
+            onKeydown: [
+              _cache[4] || (_cache[4] = withKeys(($event) => stopEditing(), ["enter"])),
+              _cache[5] || (_cache[5] = withKeys(($event) => stopEditing(), ["escape"]))
+            ],
+            onSelect: _cache[6] || (_cache[6] = (id) => applyPreset(id))
+          }, {
+            default: withCtx(({ label }) => [
+              isEditing.value ? withDirectives((openBlock(), createElementBlock("input", {
+                key: 0,
+                ref_key: "input",
+                ref: input,
+                "onUpdate:modelValue": ($event) => unref(presetStates).get(unref(selectedOption)).label = $event,
+                type: "text",
+                class: "htw-text-inherit htw-bg-transparent htw-w-full htw-h-full htw-outline-none",
+                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["stop", "prevent"]))
+              }, null, 8, _hoisted_2)), [
+                [vModelText, unref(presetStates).get(unref(selectedOption)).label]
+              ]) : (openBlock(), createElementBlock("div", _hoisted_3, [
+                createElementVNode("span", _hoisted_4, toDisplayString(label), 1),
+                canEdit.value ? withDirectives((openBlock(), createBlock(unref(Icon), {
+                  key: 0,
+                  icon: "carbon:edit",
+                  class: "htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
+                  onClick: _cache[1] || (_cache[1] = withModifiers(($event) => startEditing(), ["stop"]))
+                }, null, 512)), [
+                  [_directive_tooltip, "Rename this preset"]
+                ]) : createCommentVNode("", true)
+              ]))
+            ]),
+            option: withCtx(({ label, value }) => [
+              createElementVNode("div", _hoisted_5, [
+                createElementVNode("span", _hoisted_6, toDisplayString(label), 1),
+                value !== DEFAULT_ID ? withDirectives((openBlock(), createBlock(unref(Icon), {
+                  key: 0,
+                  icon: "carbon:trash-can",
+                  class: "htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
+                  onClick: withModifiers(($event) => deletePreset(value), ["stop"])
+                }, null, 8, ["onClick"])), [
+                  [_directive_tooltip, "Delete this preset"]
+                ]) : createCommentVNode("", true)
+              ])
+            ]),
+            _: 1
+          }, 8, ["modelValue", "options"])
+        ], 512),
+        withDirectives(createVNode(unref(Icon), {
+          icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
+          class: normalizeClass(["htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", [
+            canEdit.value ? "htw-opacity-50 hover:htw-opacity-100" : "htw-opacity-25 htw-pointer-events-none"
+          ]]),
+          onClick: _cache[7] || (_cache[7] = ($event) => savePreset())
+        }, null, 8, ["icon", "class"]), [
+          [_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]
+        ]),
+        withDirectives(createVNode(unref(Icon), {
+          icon: "carbon:add-alt",
+          class: "htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
+          onClick: _cache[8] || (_cache[8] = ($event) => createPreset())
+        }, null, 512), [
+          [_directive_tooltip, "Create new preset"]
+        ]),
+        withDirectives(createVNode(unref(Icon), {
+          icon: "carbon:reset",
+          class: "htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
+          onClick: _cache[9] || (_cache[9] = ($event) => resetState())
+        }, null, 512), [
+          [_directive_tooltip, "Reset to initial state"]
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StoryControls.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./StoryControls.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StoryControls.vue2.js

@@ -0,0 +1,87 @@
+import { defineComponent, ref, watch, computed, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, createVNode, withCtx, unref, Fragment, renderList } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import BaseEmpty from "../base/BaseEmpty.vue.js";
+import "../story/GenericRenderStory.vue.js";
+import "./ControlsComponentProps.vue.js";
+import "./ControlsComponentState.vue.js";
+import "./StatePresets.vue.js";
+import _sfc_main$1 from "./StatePresets.vue2.js";
+import _sfc_main$2 from "../story/GenericRenderStory.vue2.js";
+import _sfc_main$3 from "./ControlsComponentState.vue2.js";
+import _sfc_main$4 from "./ControlsComponentProps.vue2.js";
+"use strict";
+const _hoisted_1 = {
+  "data-test-id": "story-controls",
+  class: "histoire-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
+};
+const _hoisted_2 = { class: "htw-h-9 htw-flex-none htw-px-2 htw-flex htw-items-center" };
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = { key: 3 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryControls",
+  props: {
+    variant: {
+      type: Object,
+      required: true
+    },
+    story: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const ready = ref(false);
+    watch(() => props.variant, () => {
+      ready.value = false;
+    });
+    const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls);
+    const hasInitState = computed(() => Object.entries(props.variant.state || {}).filter(([key]) => !key.startsWith("_h")).length > 0);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          ready.value || !hasCustomControls.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            story: __props.story,
+            variant: __props.variant
+          }, null, 8, ["story", "variant"])) : createCommentVNode("", true)
+        ]),
+        hasCustomControls.value ? (openBlock(), createBlock(_sfc_main$2, {
+          key: `${__props.story.id}-${__props.variant.id}`,
+          "slot-name": "controls",
+          variant: __props.variant,
+          story: __props.story,
+          class: "__histoire-render-custom-controls htw-flex-none",
+          onReady: _cache[0] || (_cache[0] = ($event) => ready.value = true)
+        }, null, 8, ["variant", "story"])) : hasInitState.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createVNode(_sfc_main$3, {
+            class: "htw-flex-none htw-my-2",
+            variant: __props.variant
+          }, null, 8, ["variant"])
+        ])) : !__props.variant.state?._hPropDefs?.length ? (openBlock(), createBlock(BaseEmpty, { key: 2 }, {
+          default: withCtx(() => [
+            createVNode(unref(Icon), {
+              icon: "carbon:audio-console",
+              class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+            }),
+            _cache[1] || (_cache[1] = createElementVNode("span", null, "No controls available for this story", -1))
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        __props.variant.state?._hPropDefs?.length ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.variant.state._hPropDefs, (def, index) => {
+            return openBlock(), createBlock(_sfc_main$4, {
+              key: index,
+              variant: __props.variant,
+              definition: def,
+              class: "htw-flex-none htw-my-2"
+            }, null, 8, ["variant", "definition"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StoryDocs.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./StoryDocs.vue2.js";
+import { useStoryDoc } from "./StoryDocs.vue2.js";
+"use strict";
+export {
+  _sfc_main as default,
+  useStoryDoc
+};

package/dist/bundled/components/panel/StoryDocs.vue2.js

@@ -0,0 +1,161 @@
+import { defineComponent, toRefs, watch, ref, computed, createElementBlock, openBlock, createCommentVNode, createBlock, unref, normalizeClass, withCtx, createVNode, createTextVNode, watchEffect, nextTick } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { markdownFiles } from "../../_virtual/histoire-markdown-files.js";
+import { useRouter, useRoute } from "@histoire/vendors/vue-router";
+import { histoireConfig } from "../../util/config.js";
+import BaseEmpty from "../base/BaseEmpty.vue.js";
+import "../toolbar/DevOnlyToolbarOpenInEditor.vue.js";
+import _sfc_main$1 from "../toolbar/DevOnlyToolbarOpenInEditor.vue2.js";
+"use strict";
+const _hoisted_1 = ["innerHTML"];
+function useStoryDoc(story) {
+  const renderedDoc = ref("");
+  watchEffect(async () => {
+    const mdKey = story.value.file.filePath.replace(/\.(\w*)$/, ".md");
+    if (markdownFiles[mdKey]) {
+      const md = await markdownFiles[mdKey]();
+      renderedDoc.value = md.html;
+      return;
+    }
+    let comp = story.value.file?.component;
+    if (comp) {
+      if (comp.__asyncResolved) {
+        comp = comp.__asyncResolved;
+      } else if (comp.__asyncLoader) {
+        comp = await comp.__asyncLoader();
+      } else if (typeof comp === "function") {
+        try {
+          comp = await comp();
+        } catch (e) {
+        }
+      }
+      if (comp?.default) {
+        comp = comp.default;
+      }
+      renderedDoc.value = comp.doc;
+    }
+  });
+  return {
+    renderedDoc
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryDocs",
+  props: {
+    story: {
+      type: Object,
+      required: true
+    },
+    standalone: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["scrollTop"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { story } = toRefs(props);
+    const { renderedDoc } = useStoryDoc(story);
+    const router = useRouter();
+    const fakeHost = `http://a.com`;
+    function onClick(e) {
+      const link = e.target.closest("a");
+      if (link && link.getAttribute("data-route") && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && link.target !== `_blank`) {
+        e.preventDefault();
+        const url = new URL(link.href, fakeHost);
+        const targetHref = url.pathname + url.search + url.hash;
+        router.push(targetHref);
+      }
+    }
+    function getHash() {
+      const hash = location.hash;
+      if (histoireConfig.routerMode === "hash") {
+        const index = hash.indexOf("#", 1);
+        if (index !== -1) {
+          return hash.slice(index);
+        } else {
+          return void 0;
+        }
+      }
+      return hash;
+    }
+    async function scrollToAnchor() {
+      await nextTick();
+      const hash = getHash();
+      if (hash) {
+        const anchor = document.querySelector(decodeURIComponent(hash));
+        if (anchor) {
+          anchor.scrollIntoView();
+          return;
+        }
+      }
+      emit("scrollTop");
+    }
+    watch(renderedDoc, () => {
+      scrollToAnchor();
+    }, {
+      immediate: true
+    });
+    const renderedEl = ref();
+    const route = useRoute();
+    async function patchAnchorLinks() {
+      await nextTick();
+      if (histoireConfig.routerMode === "hash" && renderedEl.value) {
+        const links = renderedEl.value.querySelectorAll("a.header-anchor");
+        for (const link of links) {
+          const href = link.getAttribute("href");
+          if (href) {
+            link.setAttribute("href", `#${route.path + href}`);
+          }
+        }
+      }
+    }
+    watch(renderedDoc, () => {
+      patchAnchorLinks();
+    }, {
+      immediate: true
+    });
+    const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standalone && story.value.file?.filePath));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "histoire-story-docs",
+        onClickCapture: onClick
+      }, [
+        _ctx.__HISTOIRE_DEV__ && unref(renderedDoc) && filePath.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["htw-flex htw-items-center htw-gap-2 htw-p-2", {
+            "htw-pt-4": !__props.standalone
+          }])
+        }, [
+          filePath.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            file: filePath.value,
+            tooltip: "Edit docs in editor"
+          }, null, 8, ["file"])) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        !unref(renderedDoc) ? (openBlock(), createBlock(BaseEmpty, { key: 1 }, {
+          default: withCtx(() => [
+            createVNode(unref(Icon), {
+              icon: "carbon:document-unknown",
+              class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
+            }),
+            _cache[0] || (_cache[0] = createTextVNode(" No documentation available ", -1))
+          ]),
+          _: 1
+        })) : (openBlock(), createElementBlock("div", {
+          key: 2,
+          ref_key: "renderedEl",
+          ref: renderedEl,
+          class: "htw-prose dark:htw-prose-invert htw-p-4 htw-max-w-none",
+          "data-test-id": "story-docs",
+          innerHTML: unref(renderedDoc)
+        }, null, 8, _hoisted_1))
+      ], 32);
+    };
+  }
+});
+export {
+  _sfc_main as default,
+  useStoryDoc
+};

package/dist/bundled/components/panel/StoryEvent.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./StoryEvent.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StoryEvent.vue2.js

@@ -0,0 +1,59 @@
+import { defineComponent, computed, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, toDisplayString, normalizeClass, createElementBlock, createCommentVNode } from "@histoire/vendors/vue";
+"use strict";
+const _hoisted_1 = {
+  key: 0,
+  class: "htw-text-xs htw-opacity-50 htw-truncate"
+};
+const _hoisted_2 = { class: "htw-overflow-auto htw-max-w-[400px] htw-max-h-[400px]" };
+const _hoisted_3 = { class: "htw-p-4" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryEvent",
+  props: {
+    event: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const formattedArgument = computed(() => {
+      switch (typeof props.event.argument) {
+        case "string":
+          return `"${props.event.argument}"`;
+        case "object":
+          return `{ ${Object.keys(props.event.argument).map((key) => `${key}: ${props.event.argument[key]}`).join(", ")} }`;
+        default:
+          return props.event.argument;
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_VDropdown = resolveComponent("VDropdown");
+      return openBlock(), createBlock(_component_VDropdown, {
+        class: "histoire-story-event htw-group",
+        placement: "right",
+        "data-test-id": "event-item"
+      }, {
+        default: withCtx(({ shown }) => [
+          createElementVNode("div", {
+            class: normalizeClass(["group-hover:htw-bg-primary-100 dark:group-hover:htw-bg-primary-700 htw-cursor-pointer htw-py-2 htw-px-4 htw-flex htw-items-baseline htw-gap-1 htw-leading-normal", [
+              shown ? "htw-bg-primary-50 dark:htw-bg-primary-600" : "group-odd:htw-bg-gray-100/50 dark:group-odd:htw-bg-gray-750/40"
+            ]])
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass({
+                "htw-text-primary-500": shown
+              })
+            }, toDisplayString(__props.event.name), 3),
+            __props.event.argument ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(formattedArgument.value), 1)) : createCommentVNode("", true)
+          ], 2)
+        ]),
+        popper: withCtx(() => [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("pre", _hoisted_3, toDisplayString(__props.event.argument), 1)
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StoryEvents.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./StoryEvents.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};