@dumiflex/wp-kit 0.14.0 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.15.1](https://github.com/DumiFlex/wp-kit/compare/v0.15.0...v0.15.1) (2026-11-09)
+
+
+### Bug Fixes
+
+* **PostCard:** show sample values as one line of text ([#115](https://github.com/DumiFlex/wp-kit/issues/115)) ([ced88a1](https://github.com/DumiFlex/wp-kit/commit/ced88a1e4c54ac6c20859b9d858f30f79a4e9edf))
+
+## [0.15.0](https://github.com/DumiFlex/wp-kit/compare/v0.14.0...v0.15.0) (2026-11-09)
+
+
+### Features
+
+* **post-card:** show a few sample values from the pack ([#111](https://github.com/DumiFlex/wp-kit/issues/111)) ([c01cdc2](https://github.com/DumiFlex/wp-kit/commit/c01cdc27db3c33c33c7ff59aa96b38473ac6e57e))
+
+
+### Bug Fixes
+
+* **preview:** weight multiplier wraps under the chance on narrow cards ([#110](https://github.com/DumiFlex/wp-kit/issues/110)) ([3ad37b8](https://github.com/DumiFlex/wp-kit/commit/3ad37b80c6f2cc724025b86d407ac9e383817767))
+
 ## [0.14.0](https://github.com/DumiFlex/wp-kit/compare/v0.13.0...v0.14.0) (2026-11-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
   "keywords": [
     "vue",

package/src/PostCard.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * A community post as a card: type chip, NSFW / Featured / recommended
- * badges, version, `owner/name` slug, bundle contents, description, up to
- * four tags, then stars, downloads and when it was updated. A coloured stripe
+ * badges, version, `owner/name` slug, bundle contents, a few sample values
+ * from the pack, description, up to four tags, then stars, downloads and when it was updated. A coloured stripe
  * on top says the type; a featured card is tinted, a deleted one faded.
  *
  * The whole card is one link. It renders an `<a>` by default; pass the app's
@@ -38,6 +38,8 @@ export interface PostCardData {
   deleted?: boolean | undefined;
   version?: number | null | undefined;
   bundleModules?: { count: number; names: string[] } | null | undefined;
+  /** A few values the pack rolls (its options), shown as "what it makes". */
+  samples?: string[] | undefined;
 }
 
 const props = withDefaults(defineProps<{
@@ -52,6 +54,7 @@ const type = computed(() => itemType(props.post.kind, props.post.subtype));
 const owner = computed(() => props.post.slug.split("/")[0]);
 const name = computed(() => props.post.slug.split("/").slice(1).join("/"));
 const tags = computed(() => props.post.tags ?? []);
+const samples = computed(() => (props.post.samples ?? []).filter((v) => v.trim()).slice(0, 4));
 </script>
 
 <template>
@@ -83,6 +86,14 @@ const tags = computed(() => props.post.tags ?? []);
       :names="post.bundleModules.names"
     />
 
+    <p v-if="samples.length" class="wp-post-card__samples" :title="samples.join(' · ')">
+      <span class="wp-post-card__samples-k">Rolls</span>
+      <template v-for="(v, i) in samples" :key="i">
+        <span v-if="i" class="wp-post-card__samples-sep" aria-hidden="true"> · </span>
+        <span class="wp-post-card__sample">{{ v }}</span>
+      </template>
+    </p>
+
     <p v-if="post.description" class="wp-post-card__desc">{{ post.description }}</p>
 
     <div v-if="tags.length" class="wp-post-card__tags">
@@ -185,6 +196,23 @@ const tags = computed(() => props.post.tags ?? []);
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
+.wp-post-card__samples {
+  margin: 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--wp-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wp-post-card__samples-k {
+  margin-right: 8px;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--wp-text-muted);
+}
+.wp-post-card__samples-sep { color: var(--wp-text-muted); }
 .wp-post-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
 .wp-post-card__tags .wp-chip { padding: 2px 8px; font-size: 11px; }
 .wp-post-card__foot {

package/src/WildcardPreview.vue

@@ -405,7 +405,10 @@ function isLong(o: WildcardOption): boolean {
                   >{{ expanded.has(`${g.name}|${oidx}`) ? "Show less" : "Show all" }}</Button>
                 </td>
                 <td class="wp-wc__chance">
-                  <span>{{ totalWeight ? pct(Math.max(0, o.weight)) : "—" }}<template v-if="o.weight !== 1"> · ×{{ fmt(o.weight) }}</template></span>
+                  <span>{{ totalWeight ? pct(Math.max(0, o.weight)) : "—" }}<span
+                    v-if="o.weight !== 1"
+                    class="wp-wc__mult"
+                  ><span class="wp-wc__sep"> · </span>×{{ fmt(o.weight) }}</span></span>
                   <span
                     v-if="o.fallback"
                     class="wp-pv-fbtag"
@@ -549,6 +552,13 @@ function isLong(o: WildcardOption): boolean {
   .wp-wc__col-chance {
     width: 56px;
   }
+  /* "29% · ×2" doesn't fit 56px: the weight goes on its own line. */
+  .wp-wc__mult {
+    display: block;
+  }
+  .wp-wc__sep {
+    display: none;
+  }
   .wp-wc__bar {
     display: none;
   }