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

package/dist/bundled/components/search/SearchPane.vue2.js

@@ -0,0 +1,272 @@
+import { defineComponent, ref, watch, computed, createElementBlock, openBlock, Fragment, createElementVNode, createBlock, createCommentVNode, createVNode, withDirectives, unref, withKeys, withModifiers, vModelText, withCtx, createTextVNode, renderList } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { useFocus, useDebounce } from "@histoire/vendors/vue-use";
+import Fuse from "fuse.js";
+import { registeredCommands } from "../../_virtual/histoire-commands.js";
+import { useCommandStore } from "../../stores/command.js";
+import { useStoryStore } from "../../stores/story.js";
+import { getCommandContext, builtinCommands } from "../../util/commands.js";
+import { useSelection } from "../../util/select.js";
+import BaseEmpty from "../base/BaseEmpty.vue.js";
+import { onUpdate, searchData } from "./search-title-data.js";
+import SearchItem from "./SearchItem.vue.js";
+"use strict";
+const _hoisted_1 = {
+  key: 1,
+  class: "htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchPane",
+  props: {
+    shown: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup(__props, { emit: __emit }) {
+    const DocSearchData = () => import("./search-docs-data.js");
+    const props = __props;
+    const emit = __emit;
+    function close() {
+      emit("close");
+    }
+    const input = ref();
+    const { focused } = useFocus(input, {
+      initialValue: true
+    });
+    watch(() => props.shown, (value) => {
+      if (value) {
+        requestAnimationFrame(() => {
+          focused.value = true;
+          input.value.select();
+        });
+      }
+    });
+    const searchInputText = ref("");
+    const rateLimitedSearch = useDebounce(searchInputText, 50);
+    const storyStore = useStoryStore();
+    let titleSearchIndex;
+    let titleIdMap;
+    function createIndex() {
+      return new Fuse([], {
+        keys: ["text"]
+      });
+    }
+    async function loadSearchIndex(data) {
+      titleSearchIndex = createIndex();
+      for (const document of data.index) {
+        titleSearchIndex.add(document);
+      }
+      titleIdMap = data.idMap;
+    }
+    loadSearchIndex(searchData);
+    onUpdate((searchData2) => {
+      loadSearchIndex(searchData2);
+    });
+    let docSearchIndex;
+    let docIdMap;
+    async function loadDocSearchIndex() {
+      async function load(data) {
+        docSearchIndex = createIndex();
+        for (const document of data.index) {
+          docSearchIndex.add(document);
+        }
+        docIdMap = data.idMap;
+        if (rateLimitedSearch.value) {
+          await searchOnDocField(rateLimitedSearch.value);
+        }
+      }
+      const searchDataModule = await DocSearchData();
+      await load(searchDataModule.searchData);
+      searchDataModule.onUpdate((searchData2) => {
+        load(searchData2);
+      });
+    }
+    loadDocSearchIndex();
+    const titleResults = ref([]);
+    watch(rateLimitedSearch, async (value) => {
+      const list = [];
+      const result = titleSearchIndex.search(value);
+      let rank = 0;
+      for (const document of result) {
+        const idMapData = titleIdMap[document.item.id];
+        if (!idMapData) continue;
+        switch (idMapData.kind) {
+          case "story": {
+            list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
+            rank++;
+            break;
+          }
+          case "variant": {
+            const [storyId] = idMapData.id.split(":");
+            const story = storyStore.getStoryById(storyId);
+            const variant = storyStore.getVariantById(idMapData.id);
+            list.push(variantResultFactory(story, variant, rank));
+            rank++;
+            break;
+          }
+        }
+      }
+      titleResults.value = list;
+    });
+    const docsResults = ref([]);
+    async function searchOnDocField(query) {
+      if (docSearchIndex) {
+        const list = [];
+        const result = docSearchIndex.search(query);
+        let rank = 0;
+        for (const document of result) {
+          const idMapData = docIdMap[document.item.id];
+          if (!idMapData) continue;
+          switch (idMapData.kind) {
+            case "story": {
+              list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, "docs"));
+              rank++;
+              break;
+            }
+          }
+        }
+        docsResults.value = list;
+      }
+    }
+    watch(rateLimitedSearch, searchOnDocField);
+    function storyResultFactory(story, rank, type = "title") {
+      return {
+        kind: "story",
+        rank,
+        id: `story:${story.id}`,
+        title: story.title,
+        route: {
+          name: "story",
+          params: {
+            storyId: story.id
+          },
+          query: {
+            ...type === "docs" ? { tab: "docs" } : {}
+          }
+        },
+        path: story.file.path.slice(0, -1),
+        icon: story.icon,
+        iconColor: story.iconColor
+      };
+    }
+    function variantResultFactory(story, variant, rank, type = "title") {
+      return {
+        kind: "variant",
+        rank,
+        id: `variant:${story.id}:${variant.id}`,
+        title: variant.title,
+        route: {
+          name: "story",
+          params: {
+            storyId: story.id
+          },
+          query: {
+            variantId: variant.id,
+            ...type === "docs" ? { tab: "docs" } : {}
+          }
+        },
+        path: [...story.file.path ?? [], story.title],
+        icon: variant.icon,
+        iconColor: variant.iconColor
+      };
+    }
+    const allCommands = [
+      ...builtinCommands,
+      ...registeredCommands
+    ];
+    const commandResults = computed(() => {
+      if (__HISTOIRE_DEV__) {
+        const commandCtx = getCommandContext();
+        const searchText = searchInputText.value.toLowerCase();
+        return allCommands.filter((command) => !command.showIf || command.showIf(commandCtx)).filter((command) => command.label.toLowerCase().includes(searchText) || command.searchText?.toLowerCase().includes(searchText)).map((command) => commandResultFactory(command, 0));
+      }
+      return [];
+    });
+    const commandStore = useCommandStore();
+    function commandResultFactory(command, rank) {
+      return {
+        kind: "command",
+        rank,
+        id: `_command:${command.id}`,
+        title: command.label,
+        icon: command.icon ?? "carbon:chevron-right",
+        onActivate: () => {
+          commandStore.activateCommand(command);
+        }
+      };
+    }
+    const results = computed(() => {
+      const list = [
+        ...commandResults.value,
+        ...titleResults.value
+      ];
+      const seen = {};
+      for (const r of titleResults.value) {
+        seen[r.id] = true;
+      }
+      for (const r of docsResults.value) {
+        if (!seen[r.id]) {
+          list.push(r);
+        }
+      }
+      return list;
+    });
+    const {
+      selectedIndex,
+      selectNext,
+      selectPrevious
+    } = useSelection(results);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: "histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500",
+          onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
+        }, [
+          createVNode(unref(Icon), {
+            icon: "carbon:search",
+            class: "flex-none htw-w-4 htw-h-4"
+          }),
+          withDirectives(createElementVNode("input", {
+            ref_key: "input",
+            ref: input,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
+            placeholder: "Search for stories, variants...",
+            class: "htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none",
+            onKeydown: [
+              _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
+              _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),
+              _cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"]))
+            ]
+          }, null, 544), [
+            [vModelText, searchInputText.value]
+          ])
+        ]),
+        unref(rateLimitedSearch) && !results.value.length ? (openBlock(), createBlock(BaseEmpty, {
+          key: 0,
+          class: "no-animation"
+        }, {
+          default: withCtx(() => [..._cache[6] || (_cache[6] = [
+            createTextVNode(" No results ", -1)
+          ])]),
+          _: 1
+        })) : results.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
+            return openBlock(), createBlock(SearchItem, {
+              key: result.id,
+              result,
+              selected: index === unref(selectedIndex),
+              onClose: _cache[5] || (_cache[5] = ($event) => close())
+            }, null, 8, ["result", "selected"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/search/search-docs-data.js

@@ -0,0 +1,11 @@
+import { searchData as searchData$1, onUpdate as onUpdate$1 } from "../../_virtual/histoire-search-docs-data.js";
+import { markRaw } from "@histoire/vendors/vue";
+"use strict";
+const searchData = markRaw(searchData$1);
+function onUpdate(cb) {
+  onUpdate$1(cb);
+}
+export {
+  onUpdate,
+  searchData
+};

package/dist/bundled/components/search/search-title-data.js

@@ -0,0 +1,11 @@
+import { searchData as searchData$1, onUpdate as onUpdate$1 } from "../../_virtual/histoire-search-title-data.js";
+import { markRaw } from "@histoire/vendors/vue";
+"use strict";
+const searchData = markRaw(searchData$1);
+function onUpdate(cb) {
+  onUpdate$1(cb);
+}
+export {
+  onUpdate,
+  searchData
+};

package/dist/bundled/components/story/GenericMountStory.vue.js

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

package/dist/bundled/components/story/GenericMountStory.vue2.js

@@ -0,0 +1,34 @@
+import { defineComponent, ref, watchEffect, markRaw, createBlock, createCommentVNode, openBlock, resolveDynamicComponent, mergeProps } from "@histoire/vendors/vue";
+import { clientSupportPlugins } from "../../_virtual/histoire-support-plugins-client.js";
+"use strict";
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "GenericMountStory",
+  props: {
+    story: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const mountComponent = ref(null);
+    watchEffect(async () => {
+      const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+      if (clientPlugin) {
+        const pluginModule = await clientPlugin();
+        mountComponent.value = markRaw(pluginModule.MountStory);
+      }
+    });
+    return (_ctx, _cache) => {
+      return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({
+        key: 0,
+        class: "histoire-generic-mount-story",
+        story: __props.story
+      }, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/story/GenericRenderStory.vue.js

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

package/dist/bundled/components/story/GenericRenderStory.vue2.js

@@ -0,0 +1,39 @@
+import { defineComponent, ref, watchEffect, markRaw, createBlock, createCommentVNode, openBlock, resolveDynamicComponent, mergeProps } from "@histoire/vendors/vue";
+import { clientSupportPlugins } from "../../_virtual/histoire-support-plugins-client.js";
+"use strict";
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "GenericRenderStory",
+  props: {
+    story: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const mountComponent = ref(null);
+    watchEffect(async () => {
+      const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+      if (clientPlugin) {
+        try {
+          const pluginModule = await clientPlugin();
+          mountComponent.value = markRaw(pluginModule.RenderStory);
+        } catch (e) {
+          console.error(e);
+          throw e;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({
+        key: 0,
+        class: "histoire-generic-render-story __histoire-render-story",
+        story: __props.story
+      }, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/story/StoryResponsivePreview.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./StoryResponsivePreview.vue2.js";
+/* empty css                            */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+"use strict";
+const StoryResponsivePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18122333"]]);
+export {
+  StoryResponsivePreview as default
+};

package/dist/bundled/components/story/StoryResponsivePreview.vue2.js

@@ -0,0 +1,207 @@
+import { defineComponent, useCssVars, unref, ref, onUnmounted, computed, createElementBlock, openBlock, createCommentVNode, createElementVNode, createVNode, normalizeClass, createBlock, createStaticVNode, renderSlot, Fragment, withDirectives } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { useEventListener } from "@histoire/vendors/vue-use";
+import { VTooltip } from "@histoire/vendors/floating-vue";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import CheckerboardPattern from "../misc/CheckerboardPattern.vue.js";
+import HatchedPattern from "../misc/HatchedPattern.vue.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden" };
+const _hoisted_2 = {
+  key: 0,
+  class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden"
+};
+const _hoisted_3 = {
+  class: "bind-preview-bg htw-rounded-lg htw-h-full",
+  "data-test-id": "responsive-preview-bg"
+};
+const _hoisted_4 = { class: "htw-p-8 htw-h-full htw-relative" };
+const _hoisted_5 = { class: "htw-w-full htw-h-full htw-relative" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryResponsivePreview",
+  props: {
+    variant: {}
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v5f6f4ee9": unref(settings).backgroundColor
+    }));
+    const props = __props;
+    const settings = usePreviewSettingsStore().currentSettings;
+    const resizing = ref(false);
+    const onUnmountedCleanupFns = [];
+    onUnmounted(() => {
+      onUnmountedCleanupFns.forEach((fn) => fn());
+    });
+    function addWindowListener(event, listener) {
+      window.addEventListener(event, listener);
+      const removeListener = () => window.removeEventListener(event, listener);
+      onUnmountedCleanupFns.push(removeListener);
+      return () => {
+        removeListener();
+        onUnmountedCleanupFns.splice(onUnmountedCleanupFns.indexOf(removeListener), 1);
+      };
+    }
+    function useDragger(el, value, min, max, axis) {
+      function onMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const start = axis === "x" ? event.clientX : event.clientY;
+        const startValue = value.value ?? (axis === "x" ? previewWrapper.value.clientWidth - 67 : previewWrapper.value.clientHeight - 70);
+        resizing.value = true;
+        const removeListeners = [
+          addWindowListener("mousemove", onMouseMove),
+          addWindowListener("mouseup", onMouseUp)
+        ];
+        function onMouseMove(event2) {
+          const snapTarget = axis === "x" ? previewWrapper.value.clientWidth : previewWrapper.value.clientHeight;
+          const delta = (axis === "x" ? event2.clientX : event2.clientY) - start;
+          value.value = Math.max(min, Math.min(max, startValue + delta));
+          if (Math.abs(value.value - (snapTarget - 67)) < 16) {
+            value.value = null;
+          }
+        }
+        function onMouseUp() {
+          removeListeners.forEach((fn) => fn());
+          resizing.value = false;
+        }
+      }
+      useEventListener(el, "mousedown", onMouseDown);
+      function onTouchStart(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const start = axis === "x" ? event.touches[0].clientX : event.touches[0].clientY;
+        const startValue = value.value;
+        resizing.value = true;
+        const removeListeners = [
+          addWindowListener("touchmove", onTouchMove),
+          addWindowListener("touchend", onTouchEnd),
+          addWindowListener("touchcancel", onTouchEnd)
+        ];
+        function onTouchMove(event2) {
+          const delta = (axis === "x" ? event2.touches[0].clientX : event2.touches[0].clientY) - start;
+          value.value = Math.max(min, Math.min(max, startValue + delta));
+        }
+        function onTouchEnd() {
+          removeListeners.forEach((fn) => fn());
+          resizing.value = false;
+        }
+      }
+      useEventListener(el, "touchstart", onTouchStart);
+    }
+    const responsiveWidth = computed({
+      get: () => settings[settings.rotate ? "responsiveHeight" : "responsiveWidth"],
+      set: (value) => {
+        settings[settings.rotate ? "responsiveHeight" : "responsiveWidth"] = value;
+      }
+    });
+    const responsiveHeight = computed({
+      get: () => settings[settings.rotate ? "responsiveWidth" : "responsiveHeight"],
+      set: (value) => {
+        settings[settings.rotate ? "responsiveWidth" : "responsiveHeight"] = value;
+      }
+    });
+    const horizontalDragger = ref();
+    const verticalDragger = ref();
+    const cornerDragger = ref();
+    const previewWrapper = ref();
+    useDragger(horizontalDragger, responsiveWidth, 32, 2e4, "x");
+    useDragger(verticalDragger, responsiveHeight, 32, 2e4, "y");
+    useDragger(cornerDragger, responsiveWidth, 32, 2e4, "x");
+    useDragger(cornerDragger, responsiveHeight, 32, 2e4, "y");
+    const finalWidth = computed(() => settings.rotate ? settings.responsiveHeight : settings.responsiveWidth);
+    const finalHeight = computed(() => settings.rotate ? settings.responsiveWidth : settings.responsiveHeight);
+    const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled);
+    const sizeTooltip = computed(() => `${responsiveWidth.value ?? "Auto"} × ${responsiveHeight.value ?? "Auto"}`);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        isResponsiveEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(HatchedPattern, { class: "htw-w-full htw-h-full htw-text-black/[1%] dark:htw-text-white/[1%]" })
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "previewWrapper",
+          ref: previewWrapper,
+          class: "htw-h-full htw-overflow-auto htw-relative"
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(["htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-relative", isResponsiveEnabled.value ? {
+              "htw-w-fit": !!finalWidth.value,
+              "htw-h-fit": !!finalHeight.value,
+              "htw-h-full": !finalHeight.value
+            } : "htw-h-full"])
+          }, [
+            createElementVNode("div", _hoisted_3, [
+              unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern, {
+                key: 0,
+                class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
+              })) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_5, [
+                  _cache[0] || (_cache[0] = createElementVNode("div", { class: "htw-absolute htw-inset-0" }, null, -1)),
+                  renderSlot(_ctx.$slots, "default", {
+                    isResponsiveEnabled: isResponsiveEnabled.value,
+                    finalWidth: finalWidth.value,
+                    finalHeight: finalHeight.value,
+                    resizing: resizing.value
+                  }, void 0, true)
+                ]),
+                _cache[1] || (_cache[1] = createStaticVNode('<div class="htw-absolute htw-top-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-top-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-bottom-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-bottom-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-left-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-left-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-right-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-18122333></div><div class="htw-absolute htw-right-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-18122333></div>', 8))
+              ]),
+              isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                withDirectives((openBlock(), createElementBlock("div", {
+                  ref_key: "horizontalDragger",
+                  ref: horizontalDragger,
+                  class: "htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500"
+                }, [
+                  createVNode(unref(Icon), {
+                    icon: "mdi:drag-vertical-variant",
+                    class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+                  })
+                ])), [
+                  [
+                    unref(VTooltip),
+                    sizeTooltip.value,
+                    void 0,
+                    { right: true }
+                  ]
+                ]),
+                withDirectives((openBlock(), createElementBlock("div", {
+                  ref_key: "verticalDragger",
+                  ref: verticalDragger,
+                  class: "htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500"
+                }, [
+                  createVNode(unref(Icon), {
+                    icon: "mdi:drag-horizontal-variant",
+                    class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+                  })
+                ])), [
+                  [
+                    unref(VTooltip),
+                    sizeTooltip.value,
+                    void 0,
+                    { bottom: true }
+                  ]
+                ]),
+                withDirectives(createElementVNode("div", {
+                  ref_key: "cornerDragger",
+                  ref: cornerDragger,
+                  class: "htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500"
+                }, null, 512), [
+                  [
+                    unref(VTooltip),
+                    sizeTooltip.value,
+                    void 0,
+                    { bottom: true }
+                  ]
+                ])
+              ], 64)) : createCommentVNode("", true)
+            ])
+          ], 2)
+        ], 512)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/story/StoryVariantGrid.vue.js

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