@rpg-engine/long-bow 0.2.46 → 0.2.48

package/dist/components/shared/Ellipsis.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 interface IProps {
     children: React.ReactNode;
     maxLines: 1 | 2 | 3;
-    maxWidth: number;
+    maxWidth: string;
     fontSize?: string;
+    center?: boolean;
 }
-export declare const Ellipsis: ({ children, maxLines, maxWidth, fontSize, }: IProps) => JSX.Element;
+export declare const Ellipsis: ({ children, maxLines, maxWidth, fontSize, center, }: IProps) => JSX.Element;
 export {};

package/dist/long-bow.cjs.development.js

@@ -27350,21 +27350,23 @@ var Ellipsis = function Ellipsis(_ref) {
   var children = _ref.children,
     maxLines = _ref.maxLines,
     maxWidth = _ref.maxWidth,
-    fontSize = _ref.fontSize;
+    fontSize = _ref.fontSize,
+    center = _ref.center;
   return React__default.createElement(Container$1, {
     maxWidth: maxWidth,
-    fontSize: fontSize
-  }, React__default.createElement("p", {
+    fontSize: fontSize,
+    center: center
+  }, React__default.createElement("div", {
     className: "ellipsis-" + maxLines + "-lines"
   }, children));
 };
 var Container$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ellipsis__Container",
   componentId: "sc-ysrlju-0"
-})(["p{font-size:", ";}.ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", "px;}.ellipsis-2-lines{display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}.ellipsis-3-lines{display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}"], function (props) {
-  return props.fontSize || '1rem';
-}, function (props) {
+})([".ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";", "}.ellipsis-2-lines{display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}.ellipsis-3-lines{display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}"], function (props) {
   return props.maxWidth;
+}, function (props) {
+  return props.center && "margin: 0 auto;";
 }, function (props) {
   return props.maxWidth;
 }, function (props) {
@@ -27401,10 +27403,11 @@ var PropertySelect = function PropertySelect(_ref) {
     }
     return '';
   };
-  return React__default.createElement(Container$2, null, React__default.createElement(TextOverlay, null, React__default.createElement(Item, null, React__default.createElement(Ellipsis, {
+  return React__default.createElement(Container$2, null, React__default.createElement(TextOverlay, null, React__default.createElement("p", null, React__default.createElement(Item, null, React__default.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: 200
-  }, getCurrentSelectionName()))), React__default.createElement("div", {
+    maxWidth: "60%",
+    center: true
+  }, getCurrentSelectionName())))), React__default.createElement("div", {
     className: "rpgui-progress-track"
   }), React__default.createElement(SelectArrow, {
     direction: "left",
@@ -28051,17 +28054,19 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       setContextActions(generateContextMenu(item, containerType));
     }
   }, [item]);
-  var getLeftPositionValue = function getLeftPositionValue(quantity) {
-    if (quantity > 0 && quantity < 10) return '2.5rem';else if (quantity > 9 && quantity < 100) return '2.0rem';else if (quantity > 99) return '1rem';
-    return '2.5rem';
-  };
   var getStackInfo = function getStackInfo(itemId, stackQty) {
     // if (itemToRender?.isStackable && itemToRender?.stackQty) {
+    var isFractionalStackQty = stackQty % 1 !== 0;
+    var isLargerThan999 = stackQty > 999;
     if (stackQty > 1) {
-      return React__default.createElement(ItemQty, {
-        left: getLeftPositionValue(stackQty),
+      return React__default.createElement(ItemQtyContainer, {
         key: "qty-" + itemId
-      }, ' ', stackQty, ' ');
+      }, React__default.createElement(Ellipsis, {
+        maxLines: 1,
+        maxWidth: "48px"
+      }, React__default.createElement(ItemQty, {
+        className: isFractionalStackQty || isLargerThan999 ? 'small' : 'regular'
+      }, ' ', stackQty, ' ')));
     }
     return undefined;
   };
@@ -28168,12 +28173,14 @@ var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;}position:relative;"]);
+var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSlot__ItemQtyContainer",
+  componentId: "sc-l2j5ef-1"
+})(["position:relative;width:85%;height:16px;top:25px;left:2px;display:flex;justify-content:flex-end;"]);
 var ItemQty = /*#__PURE__*/styled.span.withConfig({
   displayName: "ItemSlot__ItemQty",
-  componentId: "sc-l2j5ef-1"
-})(["position:relative;top:1.5rem;left:", ";"], function (props) {
-  return props.left;
-});
+  componentId: "sc-l2j5ef-2"
+})(["&.regular{font-size:", ";}&.small{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall);
 
 var EquipmentSet = function EquipmentSet(_ref) {
   var equipmentSet = _ref.equipmentSet,
@@ -29432,10 +29439,10 @@ var TradingItemRow = function TradingItemRow(_ref) {
     atlasJSON: atlasJSON,
     spriteKey: traderItem.texturePath,
     imgScale: 2.5
-  }))), React__default.createElement(ItemNameContainer, null, React__default.createElement(NameValue, null, React__default.createElement(Ellipsis, {
+  }))), React__default.createElement(ItemNameContainer, null, React__default.createElement(NameValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: 250
-  }, capitalize(traderItem.name)), React__default.createElement("p", null, "$", traderItem.price))), React__default.createElement(QuantityContainer, null, React__default.createElement(SelectArrow, {
+    maxWidth: "250px"
+  }, capitalize(traderItem.name))), React__default.createElement("p", null, "$", traderItem.price))), React__default.createElement(QuantityContainer, null, React__default.createElement(SelectArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",