@eventcatalog/core 2.0.7 → 2.0.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.0.9
+
+### Patch Changes
+
+- d4916a0: fix(core): configure width for nodes in visualiser (#560)
+
+## 2.0.8
+
+### Patch Changes
+
+- 5bde1d4: feat(core): versions now show as a dropdown
+
 ## 2.0.7
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Lists/VersionList.astro

@@ -9,21 +9,27 @@ interface Props {
 
 const { versions, collectionItem } = Astro.props;
 const currentPath = Astro.url.pathname;
+
 ---
 
 <div class="space-y-2 my-2 mb-8">
   <span class="font-light text-black group-data-[hover]:text-black/80 capitalize">Versions ({collectionItem.data.versions?.length})</span>
-  <ul class="space-x-2 flex">
-  {versions.map((version) => {
-    const isCurrent = currentPath.includes(version);
-    return <li>
-      <a href={`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`} class={`inline-flex items-center rounded-md  px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}>
+  <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs"> 
+    {versions.map((version) => {
+      const isCurrent = currentPath.includes(version);
+      return <option selected={isCurrent} value={`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`} class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}>
         <span>
           v{version} 
           {version === collectionItem.data.latestVersion && <span>(latest)</span>}
         </span>
-      </a>
-    </li>
-  })}
-  </ul>
-</div>
+      </option>
+    })}
+  </select>
+</div>
+
+<script>
+  document.getElementById('version')?.addEventListener('change', (e: any) => {
+    if (!e.target) return
+    window.location.href = e.target.value;
+  })
+</script>

package/src/components/MDX/NodeGraph/Nodes/Command.tsx

@@ -40,7 +40,7 @@ export default function CommandNode({ data, sourcePosition, targetPosition }: an
           </span>
         )}
       </div>
-      <div className="p-1">
+      <div className="p-1 min-w-60 max-w-[min-content]">
         {renderTarget && <Handle type="target" position={targetPosition} />}
         {renderSource && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>

package/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -40,7 +40,7 @@ export default function EventNode({ data, sourcePosition, targetPosition }: any)
           </span>
         )}
       </div>
-      <div className="p-1">
+      <div className="p-1 min-w-60 max-w-[min-content]">
         {renderTarget && <Handle type="target" position={targetPosition} />}
         {renderSource && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>

package/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -39,7 +39,7 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
           </span>
         )}
       </div>
-      <div className="p-1">
+      <div className="p-1 min-w-60 max-w-[min-content]">
         {showTarget && <Handle type="target" position={targetPosition} />}
         {showSource && <Handle type="source" position={sourcePosition} />}
         {/* {mode === 'full' && (