@histoire/app - npm Package Compare versions

Comparing version 0.11.6 to 0.11.7

dist/bundled/components/story/GenericRenderStory.vue_vue_type_script_setup_true_lang.js

@@ -26,3 +26,3 @@ import { defineComponent, ref, watchEffect, markRaw, openBlock, createBlock, resolveDynamicComponent, mergeProps, createCommentVNode } from "@histoire/vendors/vue";
         key: 0,
-        class: "histoire-generic-render-story",
+        class: "histoire-generic-render-story htw-sandbox-contain",
         story: __props.story
@@ -29,0 +29,0 @@ }, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true);

dist/bundled/components/story/StoryVariantGrid.vue_vue_type_script_setup_true_lang.js

@@ -14,2 +14,3 @@ import { defineComponent, computed, ref, watch, onMounted, openBlock, createElementBlock, unref, createVNode, createCommentVNode, createElementVNode, normalizeStyle, Fragment, renderList, createBlock } from "@histoire/vendors/vue";
 };
+const _hoisted_3 = { class: "htw-overflow-y-auto htw-flex htw-flex-1" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -71,2 +72,3 @@ __name: "StoryVariantGrid",
     watch(() => storyStore.currentVariant, () => {
+      maxItemHeight.value = 0;
       updateMaxCount();
@@ -83,6 +85,7 @@ });
         return;
-      const firstCellEl = gridEl.value.children[0];
-      if (!firstCellEl)
-        return;
-      gridColumnWidth.value = firstCellEl.clientWidth;
+      if (gridTemplateWidth.value.endsWith("%")) {
+        gridColumnWidth.value = viewWidth.value * parseInt(gridTemplateWidth.value) / 100 - gap;
+      } else {
+        gridColumnWidth.value = parseInt(gridTemplateWidth.value);
+      }
     }
@@ -102,33 +105,35 @@ onMounted(() => {
         ])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          ref_key: "el",
-          ref: el,
-          class: "htw-overflow-y-auto htw-flex htw-flex-1",
-          onScroll: _cache[0] || (_cache[0] = ($event) => updateMaxCount())
-        }, [
+        createElementVNode("div", _hoisted_3, [
           createElementVNode("div", {
-            class: "htw-m-auto",
-            style: normalizeStyle({
-              minHeight: `${unref(storyStore).currentStory.variants.length / countPerRow.value * (maxItemHeight.value + gap) - gap}px`
-            })
+            ref_key: "el",
+            ref: el,
+            class: "htw-flex htw-w-0 htw-flex-1 htw-mx-4",
+            onScroll: _cache[0] || (_cache[0] = ($event) => updateMaxCount())
           }, [
             createElementVNode("div", {
-              ref_key: "gridEl",
-              ref: gridEl,
-              class: "htw-grid htw-gap-4 htw-m-4",
+              class: "htw-m-auto",
               style: normalizeStyle({
-                gridTemplateColumns: `repeat(${unref(columnCount)}, ${unref(gridTemplateWidth)})`
+                minHeight: `${unref(storyStore).currentStory.variants.length / countPerRow.value * (maxItemHeight.value + gap) - gap}px`
               })
             }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants.slice(0, maxCount.value), (variant, index) => {
-                return openBlock(), createBlock(StoryVariantGridItem, {
-                  key: index,
-                  variant,
-                  story: unref(storyStore).currentStory,
-                  onResize: onItemResize
-                }, null, 8, ["variant", "story"]);
-              }), 128))
+              createElementVNode("div", {
+                ref_key: "gridEl",
+                ref: gridEl,
+                class: "htw-grid htw-gap-4 htw-my-4",
+                style: normalizeStyle({
+                  gridTemplateColumns: `repeat(${unref(columnCount)}, ${gridColumnWidth.value}px)`
+                })
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants.slice(0, maxCount.value), (variant, index) => {
+                  return openBlock(), createBlock(StoryVariantGridItem, {
+                    key: index,
+                    variant,
+                    story: unref(storyStore).currentStory,
+                    onResize: onItemResize
+                  }, null, 8, ["variant", "story"]);
+                }), 128))
+              ], 4)
             ], 4)
-          ], 4)
-        ], 544)
+          ], 544)
+        ])
       ]);
@@ -135,0 +140,0 @@ };

package.json

 {
   "name": "@histoire/app",
-  "version": "0.11.6",
+  "version": "0.11.7",
   "description": "Pre-bundled UI for Histoire",
@@ -27,5 +27,5 @@ "license": "MIT",
   "dependencies": {
-    "@histoire/controls": "^0.11.6",
-    "@histoire/shared": "^0.11.6",
-    "@histoire/vendors": "^0.11.6",
+    "@histoire/controls": "^0.11.7",
+    "@histoire/shared": "^0.11.7",
+    "@histoire/vendors": "^0.11.7",
     "@types/flexsearch": "^0.7.3",
@@ -32,0 +32,0 @@ "flexsearch": "0.7.21",

No alert changes

Improved metrics

Total package byte prevSize

494572

increased by0.16%

Lines of code

9039

increased by0.23%

Dependency changes

• Updated@histoire/controls@^0.11.7

• Updated@histoire/shared@^0.11.7

• Updated@histoire/vendors@^0.11.7