poi-plugin-kai-planner 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-kai-planner",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "index.js",
   "author": "aulu",
   "contributors": ["aulu"],

package/src/app/components/EquipTypeIconFilter.js

@@ -0,0 +1,63 @@
+/* src/app/components/EquipTypeIconFilter.js */
+
+const React = require("react");
+const { SlotitemTypeIcon } = require("./SlotitemTypeIcon");
+
+function EquipTypeIconFilter({ options, selectedKeys, onToggle, onClear, iconSize }) {
+  if (!Array.isArray(options) || options.length === 0) return null;
+
+  const selectedSet = new Set((selectedKeys || []).map(String));
+  const size = Number.isFinite(iconSize) ? iconSize : 12;
+  const baseButtonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 28,
+    height: 28,
+    padding: 0,
+    borderRadius: 8,
+    border: "1px solid rgba(255,255,255,0.12)",
+    background: "rgba(255,255,255,0.04)",
+    color: "#e5e7eb",
+    cursor: "pointer",
+    flexShrink: 0,
+  };
+
+  return React.createElement(
+    "div",
+    { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" } },
+    React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        style: {
+          ...baseButtonStyle,
+          padding: "0 10px",
+          background: selectedSet.size === 0 ? "rgba(255,255,255,0.14)" : "rgba(255,255,255,0.04)",
+        },
+      },
+      "全部"
+    ),
+    ...options.map((option) => {
+      const key = String(option.key);
+      const active = selectedSet.has(key);
+      return React.createElement(
+        "button",
+        {
+          key,
+          type: "button",
+          onClick: () => onToggle(key),
+          'aria-label': option.name || key,
+          style: {
+            ...baseButtonStyle,
+            background: active ? "rgba(255,255,255,0.14)" : "rgba(255,255,255,0.04)",
+          },
+        },
+        React.createElement(SlotitemTypeIcon, { iconType: option.iconType, style: { width: size, height: size } })
+      );
+    })
+  );
+}
+
+module.exports = { EquipTypeIconFilter };

package/src/app/components/SlotitemTypeIcon.js

@@ -1,30 +1,49 @@
-/* src/app/components/SlotitemTypeIcon.js */
-
-const React = require("react");
-
-let SlotitemIcon = null;
-try {
-  ({ SlotitemIcon } = require("views/components/etc/icon"));
-} catch {}
-
-function SlotitemTypeIcon({ iconType, title, style }) {
-  if (!iconType || !SlotitemIcon) return null;
-  return React.createElement(
-    "span",
-    {
-      title: title || "",
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 20,
-        height: 20,
-        flexShrink: 0,
-        ...(style || {}),
-      },
-    },
-    React.createElement(SlotitemIcon, { slotitemId: iconType })
-  );
-}
-
-module.exports = { SlotitemTypeIcon };
+/* src/app/components/SlotitemTypeIcon.js */
+
+const React = require("react");
+
+let SlotitemIcon = null;
+try {
+  ({ SlotitemIcon } = require("views/components/etc/icon"));
+} catch {}
+
+function SlotitemTypeIcon({ iconType, title, style }) {
+  if (!iconType || !SlotitemIcon) return null;
+  const baseSize = 20;
+  const width = style && Number.isFinite(style.width) ? style.width : baseSize;
+  const height = style && Number.isFinite(style.height) ? style.height : baseSize;
+  const scale = Math.min(width / baseSize, height / baseSize);
+
+  return React.createElement(
+    "span",
+    {
+      title: title || "",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width,
+        height,
+        flexShrink: 0,
+        lineHeight: 0,
+        ...(style || {}),
+      },
+    },
+    React.createElement(
+      "span",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: baseSize,
+          height: baseSize,
+          zoom: scale,
+        },
+      },
+      React.createElement(SlotitemIcon, { slotitemId: iconType })
+    )
+  );
+}
+
+module.exports = { SlotitemTypeIcon };