@lv-x-software-house/x_view 1.3.6 → 1.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +138 -17
- package/dist/index.mjs +149 -18
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6778,7 +6778,9 @@ function CustomPropertyDisplay({
|
|
|
6778
6778
|
if (!file || targetIndex === null || !onUploadFile) return;
|
|
6779
6779
|
const MAX_SIZE = 10 * 1024 * 1024;
|
|
6780
6780
|
if (file.size > MAX_SIZE) {
|
|
6781
|
-
alert(
|
|
6781
|
+
alert(
|
|
6782
|
+
"Upload de imagens acima de 10MB n\xE3o est\xE1 dispon\xEDvel neste momento. Recomendamos armazen\xE1-la em um servi\xE7o de personal cloud storage e guardar apenas o link no x.plore."
|
|
6783
|
+
);
|
|
6782
6784
|
return;
|
|
6783
6785
|
}
|
|
6784
6786
|
try {
|
|
@@ -6872,7 +6874,9 @@ function CustomPropertyDisplay({
|
|
|
6872
6874
|
const baseInput = "w-full bg-slate-800/70 p-2 text-sm rounded-lg border border-white/10 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-400/60 transition-all duration-150";
|
|
6873
6875
|
const renderEditView = () => {
|
|
6874
6876
|
var _a;
|
|
6875
|
-
const isKeyFixed = ["links", "images", "date", "documents"].includes(
|
|
6877
|
+
const isKeyFixed = ["links", "images", "date", "documents"].includes(
|
|
6878
|
+
tempProp.type
|
|
6879
|
+
);
|
|
6876
6880
|
const availableOptions = [
|
|
6877
6881
|
{ value: "links", label: "Links", unique: true },
|
|
6878
6882
|
{ value: "images", label: "Images", unique: true },
|
|
@@ -6881,7 +6885,9 @@ function CustomPropertyDisplay({
|
|
|
6881
6885
|
{ value: "text", label: "Texto", unique: false },
|
|
6882
6886
|
{ value: "number", label: "N\xFAmero", unique: false },
|
|
6883
6887
|
{ value: "list", label: "Lista", unique: false }
|
|
6884
|
-
].filter(
|
|
6888
|
+
].filter(
|
|
6889
|
+
(opt) => !opt.unique || !unavailableTypes.includes(opt.value) || tempProp.type === opt.value
|
|
6890
|
+
);
|
|
6885
6891
|
const currentTypeLabel = ((_a = availableOptions.find((o) => o.value === tempProp.type)) == null ? void 0 : _a.label) || tempProp.type;
|
|
6886
6892
|
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full space-y-2" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react4.default.createElement(
|
|
6887
6893
|
"input",
|
|
@@ -6901,7 +6907,12 @@ function CustomPropertyDisplay({
|
|
|
6901
6907
|
className: "w-full flex items-center justify-between gap-2 bg-slate-800/70 p-2 text-sm rounded-lg border border-white/10 focus:outline-none focus:ring-1 focus:ring-indigo-400/60 hover:bg-slate-700/70 transition-colors"
|
|
6902
6908
|
},
|
|
6903
6909
|
/* @__PURE__ */ import_react4.default.createElement("span", { className: "truncate" }, currentTypeLabel),
|
|
6904
|
-
/* @__PURE__ */ import_react4.default.createElement(
|
|
6910
|
+
/* @__PURE__ */ import_react4.default.createElement(
|
|
6911
|
+
import_fi3.FiChevronDown,
|
|
6912
|
+
{
|
|
6913
|
+
className: `text-slate-400 transition-transform ${isTypeDropdownOpen ? "rotate-180" : ""}`
|
|
6914
|
+
}
|
|
6915
|
+
)
|
|
6905
6916
|
), isTypeDropdownOpen && /* @__PURE__ */ import_react4.default.createElement("ul", { className: "absolute right-0 top-full mt-1 z-50 w-32 bg-slate-800 border border-white/10 rounded-lg shadow-xl overflow-y-auto max-h-48 custom-scrollbar py-1" }, availableOptions.map((opt) => /* @__PURE__ */ import_react4.default.createElement("li", { key: opt.value }, /* @__PURE__ */ import_react4.default.createElement(
|
|
6906
6917
|
"button",
|
|
6907
6918
|
{
|
|
@@ -6914,7 +6925,16 @@ function CustomPropertyDisplay({
|
|
|
6914
6925
|
var _a2, _b, _c, _d, _e;
|
|
6915
6926
|
switch (tempProp.type) {
|
|
6916
6927
|
case "number":
|
|
6917
|
-
return /* @__PURE__ */ import_react4.default.createElement(
|
|
6928
|
+
return /* @__PURE__ */ import_react4.default.createElement(
|
|
6929
|
+
"input",
|
|
6930
|
+
{
|
|
6931
|
+
type: "number",
|
|
6932
|
+
placeholder: "Valor num\xE9rico",
|
|
6933
|
+
value: tempProp.value,
|
|
6934
|
+
onChange: (e) => handlePropChange("value", e.target.value),
|
|
6935
|
+
className: baseInput
|
|
6936
|
+
}
|
|
6937
|
+
);
|
|
6918
6938
|
case "date": {
|
|
6919
6939
|
const dateType = ((_a2 = tempProp.value) == null ? void 0 : _a2.type) || "Data";
|
|
6920
6940
|
const noSpinnerClass = "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none";
|
|
@@ -6931,15 +6951,20 @@ function CustomPropertyDisplay({
|
|
|
6931
6951
|
handlePropChange("value", newValue);
|
|
6932
6952
|
};
|
|
6933
6953
|
const handleDateValueChange = (dateField, dateValue) => {
|
|
6934
|
-
handlePropChange("value", {
|
|
6954
|
+
handlePropChange("value", {
|
|
6955
|
+
...tempProp.value,
|
|
6956
|
+
[dateField]: dateValue
|
|
6957
|
+
});
|
|
6935
6958
|
};
|
|
6936
6959
|
const handleFullDateChange = (e) => {
|
|
6937
6960
|
const rawValue = e.target.value;
|
|
6938
6961
|
const digits = rawValue.replace(/\D/g, "");
|
|
6939
6962
|
const len = digits.length;
|
|
6940
6963
|
let formattedValue = digits;
|
|
6941
|
-
if (len > 2 && len <= 4)
|
|
6942
|
-
|
|
6964
|
+
if (len > 2 && len <= 4)
|
|
6965
|
+
formattedValue = `${digits.slice(0, 2)}/${digits.slice(2)}`;
|
|
6966
|
+
else if (len > 4)
|
|
6967
|
+
formattedValue = `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
|
|
6943
6968
|
handleDateValueChange("value", formattedValue);
|
|
6944
6969
|
};
|
|
6945
6970
|
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-2 p-2 bg-slate-900/60 rounded-lg border border-white/10" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center justify-center gap-1 rounded-lg bg-slate-800/50 p-1" }, ["Data", "Ano", "Date Interval"].map((t) => /* @__PURE__ */ import_react4.default.createElement(
|
|
@@ -6951,7 +6976,17 @@ function CustomPropertyDisplay({
|
|
|
6951
6976
|
className: `flex-1 text-xs px-2 py-1.5 rounded-md transition-colors ${dateType === t ? "bg-indigo-600 text-white font-semibold shadow" : "hover:bg-slate-700/50"}`
|
|
6952
6977
|
},
|
|
6953
6978
|
t === "Date Interval" ? "Intervalo" : t
|
|
6954
|
-
))), dateType === "Data" && /* @__PURE__ */ import_react4.default.createElement(
|
|
6979
|
+
))), dateType === "Data" && /* @__PURE__ */ import_react4.default.createElement(
|
|
6980
|
+
"input",
|
|
6981
|
+
{
|
|
6982
|
+
type: "text",
|
|
6983
|
+
placeholder: "DD/MM/AAAA",
|
|
6984
|
+
value: ((_b = tempProp.value) == null ? void 0 : _b.value) || "",
|
|
6985
|
+
onChange: handleFullDateChange,
|
|
6986
|
+
maxLength: "10",
|
|
6987
|
+
className: baseInput
|
|
6988
|
+
}
|
|
6989
|
+
), dateType === "Ano" && /* @__PURE__ */ import_react4.default.createElement(
|
|
6955
6990
|
"input",
|
|
6956
6991
|
{
|
|
6957
6992
|
type: "number",
|
|
@@ -6999,7 +7034,11 @@ function CustomPropertyDisplay({
|
|
|
6999
7034
|
type: "text",
|
|
7000
7035
|
placeholder: tempProp.type === "images" || tempProp.type === "documents" ? "ID" : "Nome",
|
|
7001
7036
|
value: item.name,
|
|
7002
|
-
onChange: (e) => handleListItemChange(
|
|
7037
|
+
onChange: (e) => handleListItemChange(
|
|
7038
|
+
itemIndex,
|
|
7039
|
+
"name",
|
|
7040
|
+
e.target.value
|
|
7041
|
+
),
|
|
7003
7042
|
className: "min-w-0 flex-1 bg-slate-800/70 p-2 text-xs rounded-md border border-white/10 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-400/60"
|
|
7004
7043
|
}
|
|
7005
7044
|
), /* @__PURE__ */ import_react4.default.createElement(
|
|
@@ -7008,7 +7047,11 @@ function CustomPropertyDisplay({
|
|
|
7008
7047
|
type: "text",
|
|
7009
7048
|
placeholder: tempProp.type === "images" ? "URL da Imagem" : tempProp.type === "documents" ? "URL do Documento" : "Valor",
|
|
7010
7049
|
value: item.value,
|
|
7011
|
-
onChange: (e) => handleListItemChange(
|
|
7050
|
+
onChange: (e) => handleListItemChange(
|
|
7051
|
+
itemIndex,
|
|
7052
|
+
"value",
|
|
7053
|
+
e.target.value
|
|
7054
|
+
),
|
|
7012
7055
|
className: "min-w-0 flex-1 bg-slate-800/70 p-2 text-xs rounded-md border border-white/10 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-400/60"
|
|
7013
7056
|
}
|
|
7014
7057
|
), (tempProp.type === "images" || tempProp.type === "documents") && /* @__PURE__ */ import_react4.default.createElement(
|
|
@@ -7021,11 +7064,53 @@ function CustomPropertyDisplay({
|
|
|
7021
7064
|
title: "Upload de Arquivo"
|
|
7022
7065
|
},
|
|
7023
7066
|
uploadingItemIndex === itemIndex ? /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiLoader, { className: "animate-spin" }) : /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiUpload, { size: 12 })
|
|
7024
|
-
), /* @__PURE__ */ import_react4.default.createElement(
|
|
7067
|
+
), /* @__PURE__ */ import_react4.default.createElement(
|
|
7068
|
+
"button",
|
|
7069
|
+
{
|
|
7070
|
+
type: "button",
|
|
7071
|
+
onClick: () => handleRemoveListItem(itemIndex),
|
|
7072
|
+
className: "flex-shrink-0 w-7 h-7 grid place-items-center bg-red-600/60 hover:bg-red-600 rounded-full text-xs font-bold transition-colors",
|
|
7073
|
+
"aria-label": "Remover item"
|
|
7074
|
+
},
|
|
7075
|
+
"\xD7"
|
|
7076
|
+
))), /* @__PURE__ */ import_react4.default.createElement(
|
|
7077
|
+
"button",
|
|
7078
|
+
{
|
|
7079
|
+
type: "button",
|
|
7080
|
+
onClick: () => handleAddListItem(),
|
|
7081
|
+
className: "mt-1 w-full px-2 py-1.5 bg-slate-700/70 hover:bg-slate-600 rounded-md transition-colors text-xs"
|
|
7082
|
+
},
|
|
7083
|
+
"Adicionar Item"
|
|
7084
|
+
));
|
|
7025
7085
|
default:
|
|
7026
|
-
return /* @__PURE__ */ import_react4.default.createElement(
|
|
7086
|
+
return /* @__PURE__ */ import_react4.default.createElement(
|
|
7087
|
+
"input",
|
|
7088
|
+
{
|
|
7089
|
+
type: "text",
|
|
7090
|
+
placeholder: "Valor",
|
|
7091
|
+
value: tempProp.value,
|
|
7092
|
+
onChange: (e) => handlePropChange("value", e.target.value),
|
|
7093
|
+
className: baseInput
|
|
7094
|
+
}
|
|
7095
|
+
);
|
|
7027
7096
|
}
|
|
7028
|
-
})()), /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex justify-end items-center gap-2 pt-1" }, /* @__PURE__ */ import_react4.default.createElement(
|
|
7097
|
+
})()), /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex justify-end items-center gap-2 pt-1" }, /* @__PURE__ */ import_react4.default.createElement(
|
|
7098
|
+
"button",
|
|
7099
|
+
{
|
|
7100
|
+
onClick: handleCancel,
|
|
7101
|
+
type: "button",
|
|
7102
|
+
className: "w-8 h-8 grid place-items-center rounded-lg hover:bg-white/10 transition-colors"
|
|
7103
|
+
},
|
|
7104
|
+
/* @__PURE__ */ import_react4.default.createElement(import_fi3.FiX, { className: "text-red-400" })
|
|
7105
|
+
), /* @__PURE__ */ import_react4.default.createElement(
|
|
7106
|
+
"button",
|
|
7107
|
+
{
|
|
7108
|
+
onClick: handleSave,
|
|
7109
|
+
type: "button",
|
|
7110
|
+
className: "w-8 h-8 grid place-items-center rounded-lg hover:bg-white/10 transition-colors"
|
|
7111
|
+
},
|
|
7112
|
+
/* @__PURE__ */ import_react4.default.createElement(import_fi3.FiCheck, { className: "text-green-400" })
|
|
7113
|
+
)));
|
|
7029
7114
|
};
|
|
7030
7115
|
const renderDisplayView = () => /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full space-y-2 text-sm" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ import_react4.default.createElement("p", { className: "font-semibold text-slate-200" }, prop.key), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-xs capitalize bg-slate-700/50 px-2 py-0.5 rounded text-slate-400" }, prop.type)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-slate-300 pl-1" }, (() => {
|
|
7031
7116
|
switch (prop.type) {
|
|
@@ -7053,7 +7138,10 @@ function CustomPropertyDisplay({
|
|
|
7053
7138
|
if (isTextureMode) {
|
|
7054
7139
|
onSelectTexture(item.value);
|
|
7055
7140
|
} else {
|
|
7056
|
-
onOpenImageViewer == null ? void 0 : onOpenImageViewer(
|
|
7141
|
+
onOpenImageViewer == null ? void 0 : onOpenImageViewer(
|
|
7142
|
+
prop.value.map((img) => ({ ...img })),
|
|
7143
|
+
index
|
|
7144
|
+
);
|
|
7057
7145
|
}
|
|
7058
7146
|
},
|
|
7059
7147
|
className: `w-16 h-16 rounded-md bg-cover bg-center bg-slate-700 outline-none transition-all shadow-md ${isSelected ? "ring-4 ring-green-500 scale-105 z-10" : isTextureMode ? "hover:ring-4 hover:ring-indigo-400/50 cursor-pointer" : "hover:ring-2 hover:ring-indigo-400 cursor-zoom-in"}`,
|
|
@@ -7063,7 +7151,17 @@ function CustomPropertyDisplay({
|
|
|
7063
7151
|
), isSelected && /* @__PURE__ */ import_react4.default.createElement("div", { className: "absolute -top-2 -right-2 bg-green-500 text-white rounded-full p-0.5 shadow-sm" }, /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiCheck, { size: 12 })));
|
|
7064
7152
|
}));
|
|
7065
7153
|
case "links":
|
|
7066
|
-
return /* @__PURE__ */ import_react4.default.createElement("ul", { className: "space-y-1.5 max-h-40 overflow-y-auto custom-scrollbar" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ import_react4.default.createElement("li", { key: item.id }, /* @__PURE__ */ import_react4.default.createElement(
|
|
7154
|
+
return /* @__PURE__ */ import_react4.default.createElement("ul", { className: "space-y-1.5 max-h-40 overflow-y-auto custom-scrollbar" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ import_react4.default.createElement("li", { key: item.id }, /* @__PURE__ */ import_react4.default.createElement(
|
|
7155
|
+
"a",
|
|
7156
|
+
{
|
|
7157
|
+
href: item.value,
|
|
7158
|
+
target: "_blank",
|
|
7159
|
+
rel: "noopener noreferrer",
|
|
7160
|
+
className: "inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 hover:underline transition-colors"
|
|
7161
|
+
},
|
|
7162
|
+
item.name,
|
|
7163
|
+
/* @__PURE__ */ import_react4.default.createElement(import_fi3.FiExternalLink, { className: "opacity-60", size: 12 })
|
|
7164
|
+
))));
|
|
7067
7165
|
case "documents":
|
|
7068
7166
|
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-2 mt-1" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ import_react4.default.createElement(
|
|
7069
7167
|
"a",
|
|
@@ -7091,7 +7189,30 @@ function CustomPropertyDisplay({
|
|
|
7091
7189
|
onMouseLeave: () => setIsHovered(false)
|
|
7092
7190
|
},
|
|
7093
7191
|
isEditing ? renderEditView() : renderDisplayView(),
|
|
7094
|
-
!isEditing && !readOnly && /* @__PURE__ */ import_react4.default.createElement(
|
|
7192
|
+
!isEditing && !readOnly && /* @__PURE__ */ import_react4.default.createElement(
|
|
7193
|
+
"div",
|
|
7194
|
+
{
|
|
7195
|
+
className: `absolute top-2 right-2 flex items-center gap-1 transition-opacity ${isHovered ? "opacity-100" : "opacity-0"}`
|
|
7196
|
+
},
|
|
7197
|
+
/* @__PURE__ */ import_react4.default.createElement(
|
|
7198
|
+
"button",
|
|
7199
|
+
{
|
|
7200
|
+
onClick: () => setIsEditing(true),
|
|
7201
|
+
className: "w-7 h-7 grid place-items-center rounded-lg bg-slate-700/80 hover:bg-slate-600/80 text-slate-200 transition-colors",
|
|
7202
|
+
title: "Editar"
|
|
7203
|
+
},
|
|
7204
|
+
/* @__PURE__ */ import_react4.default.createElement(import_fi3.FiEdit3, { size: 14 })
|
|
7205
|
+
),
|
|
7206
|
+
/* @__PURE__ */ import_react4.default.createElement(
|
|
7207
|
+
"button",
|
|
7208
|
+
{
|
|
7209
|
+
onClick: onRemove,
|
|
7210
|
+
className: "w-7 h-7 grid place-items-center rounded-lg bg-red-700/80 hover:bg-red-600/80 text-slate-200 transition-colors",
|
|
7211
|
+
title: "Remover"
|
|
7212
|
+
},
|
|
7213
|
+
/* @__PURE__ */ import_react4.default.createElement(import_fi3.FiTrash2, { size: 14 })
|
|
7214
|
+
)
|
|
7215
|
+
)
|
|
7095
7216
|
);
|
|
7096
7217
|
}
|
|
7097
7218
|
|
package/dist/index.mjs
CHANGED
|
@@ -6690,7 +6690,17 @@ import { v4 as uuidv43 } from "uuid";
|
|
|
6690
6690
|
|
|
6691
6691
|
// src/components/CustomPropertyDisplay.jsx
|
|
6692
6692
|
import React3, { useState as useState4, useRef as useRef3, useEffect as useEffect3 } from "react";
|
|
6693
|
-
import {
|
|
6693
|
+
import {
|
|
6694
|
+
FiCheck,
|
|
6695
|
+
FiX,
|
|
6696
|
+
FiEdit3,
|
|
6697
|
+
FiTrash2,
|
|
6698
|
+
FiExternalLink,
|
|
6699
|
+
FiFileText,
|
|
6700
|
+
FiChevronDown,
|
|
6701
|
+
FiUpload,
|
|
6702
|
+
FiLoader
|
|
6703
|
+
} from "react-icons/fi";
|
|
6694
6704
|
function CustomPropertyDisplay({
|
|
6695
6705
|
prop,
|
|
6696
6706
|
onUpdate,
|
|
@@ -6739,7 +6749,9 @@ function CustomPropertyDisplay({
|
|
|
6739
6749
|
if (!file || targetIndex === null || !onUploadFile) return;
|
|
6740
6750
|
const MAX_SIZE = 10 * 1024 * 1024;
|
|
6741
6751
|
if (file.size > MAX_SIZE) {
|
|
6742
|
-
alert(
|
|
6752
|
+
alert(
|
|
6753
|
+
"Upload de imagens acima de 10MB n\xE3o est\xE1 dispon\xEDvel neste momento. Recomendamos armazen\xE1-la em um servi\xE7o de personal cloud storage e guardar apenas o link no x.plore."
|
|
6754
|
+
);
|
|
6743
6755
|
return;
|
|
6744
6756
|
}
|
|
6745
6757
|
try {
|
|
@@ -6833,7 +6845,9 @@ function CustomPropertyDisplay({
|
|
|
6833
6845
|
const baseInput = "w-full bg-slate-800/70 p-2 text-sm rounded-lg border border-white/10 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-400/60 transition-all duration-150";
|
|
6834
6846
|
const renderEditView = () => {
|
|
6835
6847
|
var _a;
|
|
6836
|
-
const isKeyFixed = ["links", "images", "date", "documents"].includes(
|
|
6848
|
+
const isKeyFixed = ["links", "images", "date", "documents"].includes(
|
|
6849
|
+
tempProp.type
|
|
6850
|
+
);
|
|
6837
6851
|
const availableOptions = [
|
|
6838
6852
|
{ value: "links", label: "Links", unique: true },
|
|
6839
6853
|
{ value: "images", label: "Images", unique: true },
|
|
@@ -6842,7 +6856,9 @@ function CustomPropertyDisplay({
|
|
|
6842
6856
|
{ value: "text", label: "Texto", unique: false },
|
|
6843
6857
|
{ value: "number", label: "N\xFAmero", unique: false },
|
|
6844
6858
|
{ value: "list", label: "Lista", unique: false }
|
|
6845
|
-
].filter(
|
|
6859
|
+
].filter(
|
|
6860
|
+
(opt) => !opt.unique || !unavailableTypes.includes(opt.value) || tempProp.type === opt.value
|
|
6861
|
+
);
|
|
6846
6862
|
const currentTypeLabel = ((_a = availableOptions.find((o) => o.value === tempProp.type)) == null ? void 0 : _a.label) || tempProp.type;
|
|
6847
6863
|
return /* @__PURE__ */ React3.createElement("div", { className: "w-full space-y-2" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React3.createElement(
|
|
6848
6864
|
"input",
|
|
@@ -6862,7 +6878,12 @@ function CustomPropertyDisplay({
|
|
|
6862
6878
|
className: "w-full flex items-center justify-between gap-2 bg-slate-800/70 p-2 text-sm rounded-lg border border-white/10 focus:outline-none focus:ring-1 focus:ring-indigo-400/60 hover:bg-slate-700/70 transition-colors"
|
|
6863
6879
|
},
|
|
6864
6880
|
/* @__PURE__ */ React3.createElement("span", { className: "truncate" }, currentTypeLabel),
|
|
6865
|
-
/* @__PURE__ */ React3.createElement(
|
|
6881
|
+
/* @__PURE__ */ React3.createElement(
|
|
6882
|
+
FiChevronDown,
|
|
6883
|
+
{
|
|
6884
|
+
className: `text-slate-400 transition-transform ${isTypeDropdownOpen ? "rotate-180" : ""}`
|
|
6885
|
+
}
|
|
6886
|
+
)
|
|
6866
6887
|
), isTypeDropdownOpen && /* @__PURE__ */ React3.createElement("ul", { className: "absolute right-0 top-full mt-1 z-50 w-32 bg-slate-800 border border-white/10 rounded-lg shadow-xl overflow-y-auto max-h-48 custom-scrollbar py-1" }, availableOptions.map((opt) => /* @__PURE__ */ React3.createElement("li", { key: opt.value }, /* @__PURE__ */ React3.createElement(
|
|
6867
6888
|
"button",
|
|
6868
6889
|
{
|
|
@@ -6875,7 +6896,16 @@ function CustomPropertyDisplay({
|
|
|
6875
6896
|
var _a2, _b, _c, _d, _e;
|
|
6876
6897
|
switch (tempProp.type) {
|
|
6877
6898
|
case "number":
|
|
6878
|
-
return /* @__PURE__ */ React3.createElement(
|
|
6899
|
+
return /* @__PURE__ */ React3.createElement(
|
|
6900
|
+
"input",
|
|
6901
|
+
{
|
|
6902
|
+
type: "number",
|
|
6903
|
+
placeholder: "Valor num\xE9rico",
|
|
6904
|
+
value: tempProp.value,
|
|
6905
|
+
onChange: (e) => handlePropChange("value", e.target.value),
|
|
6906
|
+
className: baseInput
|
|
6907
|
+
}
|
|
6908
|
+
);
|
|
6879
6909
|
case "date": {
|
|
6880
6910
|
const dateType = ((_a2 = tempProp.value) == null ? void 0 : _a2.type) || "Data";
|
|
6881
6911
|
const noSpinnerClass = "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none";
|
|
@@ -6892,15 +6922,20 @@ function CustomPropertyDisplay({
|
|
|
6892
6922
|
handlePropChange("value", newValue);
|
|
6893
6923
|
};
|
|
6894
6924
|
const handleDateValueChange = (dateField, dateValue) => {
|
|
6895
|
-
handlePropChange("value", {
|
|
6925
|
+
handlePropChange("value", {
|
|
6926
|
+
...tempProp.value,
|
|
6927
|
+
[dateField]: dateValue
|
|
6928
|
+
});
|
|
6896
6929
|
};
|
|
6897
6930
|
const handleFullDateChange = (e) => {
|
|
6898
6931
|
const rawValue = e.target.value;
|
|
6899
6932
|
const digits = rawValue.replace(/\D/g, "");
|
|
6900
6933
|
const len = digits.length;
|
|
6901
6934
|
let formattedValue = digits;
|
|
6902
|
-
if (len > 2 && len <= 4)
|
|
6903
|
-
|
|
6935
|
+
if (len > 2 && len <= 4)
|
|
6936
|
+
formattedValue = `${digits.slice(0, 2)}/${digits.slice(2)}`;
|
|
6937
|
+
else if (len > 4)
|
|
6938
|
+
formattedValue = `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
|
|
6904
6939
|
handleDateValueChange("value", formattedValue);
|
|
6905
6940
|
};
|
|
6906
6941
|
return /* @__PURE__ */ React3.createElement("div", { className: "space-y-2 p-2 bg-slate-900/60 rounded-lg border border-white/10" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center justify-center gap-1 rounded-lg bg-slate-800/50 p-1" }, ["Data", "Ano", "Date Interval"].map((t) => /* @__PURE__ */ React3.createElement(
|
|
@@ -6912,7 +6947,17 @@ function CustomPropertyDisplay({
|
|
|
6912
6947
|
className: `flex-1 text-xs px-2 py-1.5 rounded-md transition-colors ${dateType === t ? "bg-indigo-600 text-white font-semibold shadow" : "hover:bg-slate-700/50"}`
|
|
6913
6948
|
},
|
|
6914
6949
|
t === "Date Interval" ? "Intervalo" : t
|
|
6915
|
-
))), dateType === "Data" && /* @__PURE__ */ React3.createElement(
|
|
6950
|
+
))), dateType === "Data" && /* @__PURE__ */ React3.createElement(
|
|
6951
|
+
"input",
|
|
6952
|
+
{
|
|
6953
|
+
type: "text",
|
|
6954
|
+
placeholder: "DD/MM/AAAA",
|
|
6955
|
+
value: ((_b = tempProp.value) == null ? void 0 : _b.value) || "",
|
|
6956
|
+
onChange: handleFullDateChange,
|
|
6957
|
+
maxLength: "10",
|
|
6958
|
+
className: baseInput
|
|
6959
|
+
}
|
|
6960
|
+
), dateType === "Ano" && /* @__PURE__ */ React3.createElement(
|
|
6916
6961
|
"input",
|
|
6917
6962
|
{
|
|
6918
6963
|
type: "number",
|
|
@@ -6960,7 +7005,11 @@ function CustomPropertyDisplay({
|
|
|
6960
7005
|
type: "text",
|
|
6961
7006
|
placeholder: tempProp.type === "images" || tempProp.type === "documents" ? "ID" : "Nome",
|
|
6962
7007
|
value: item.name,
|
|
6963
|
-
onChange: (e) => handleListItemChange(
|
|
7008
|
+
onChange: (e) => handleListItemChange(
|
|
7009
|
+
itemIndex,
|
|
7010
|
+
"name",
|
|
7011
|
+
e.target.value
|
|
7012
|
+
),
|
|
6964
7013
|
className: "min-w-0 flex-1 bg-slate-800/70 p-2 text-xs rounded-md border border-white/10 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-400/60"
|
|
6965
7014
|
}
|
|
6966
7015
|
), /* @__PURE__ */ React3.createElement(
|
|
@@ -6969,7 +7018,11 @@ function CustomPropertyDisplay({
|
|
|
6969
7018
|
type: "text",
|
|
6970
7019
|
placeholder: tempProp.type === "images" ? "URL da Imagem" : tempProp.type === "documents" ? "URL do Documento" : "Valor",
|
|
6971
7020
|
value: item.value,
|
|
6972
|
-
onChange: (e) => handleListItemChange(
|
|
7021
|
+
onChange: (e) => handleListItemChange(
|
|
7022
|
+
itemIndex,
|
|
7023
|
+
"value",
|
|
7024
|
+
e.target.value
|
|
7025
|
+
),
|
|
6973
7026
|
className: "min-w-0 flex-1 bg-slate-800/70 p-2 text-xs rounded-md border border-white/10 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-400/60"
|
|
6974
7027
|
}
|
|
6975
7028
|
), (tempProp.type === "images" || tempProp.type === "documents") && /* @__PURE__ */ React3.createElement(
|
|
@@ -6982,11 +7035,53 @@ function CustomPropertyDisplay({
|
|
|
6982
7035
|
title: "Upload de Arquivo"
|
|
6983
7036
|
},
|
|
6984
7037
|
uploadingItemIndex === itemIndex ? /* @__PURE__ */ React3.createElement(FiLoader, { className: "animate-spin" }) : /* @__PURE__ */ React3.createElement(FiUpload, { size: 12 })
|
|
6985
|
-
), /* @__PURE__ */ React3.createElement(
|
|
7038
|
+
), /* @__PURE__ */ React3.createElement(
|
|
7039
|
+
"button",
|
|
7040
|
+
{
|
|
7041
|
+
type: "button",
|
|
7042
|
+
onClick: () => handleRemoveListItem(itemIndex),
|
|
7043
|
+
className: "flex-shrink-0 w-7 h-7 grid place-items-center bg-red-600/60 hover:bg-red-600 rounded-full text-xs font-bold transition-colors",
|
|
7044
|
+
"aria-label": "Remover item"
|
|
7045
|
+
},
|
|
7046
|
+
"\xD7"
|
|
7047
|
+
))), /* @__PURE__ */ React3.createElement(
|
|
7048
|
+
"button",
|
|
7049
|
+
{
|
|
7050
|
+
type: "button",
|
|
7051
|
+
onClick: () => handleAddListItem(),
|
|
7052
|
+
className: "mt-1 w-full px-2 py-1.5 bg-slate-700/70 hover:bg-slate-600 rounded-md transition-colors text-xs"
|
|
7053
|
+
},
|
|
7054
|
+
"Adicionar Item"
|
|
7055
|
+
));
|
|
6986
7056
|
default:
|
|
6987
|
-
return /* @__PURE__ */ React3.createElement(
|
|
7057
|
+
return /* @__PURE__ */ React3.createElement(
|
|
7058
|
+
"input",
|
|
7059
|
+
{
|
|
7060
|
+
type: "text",
|
|
7061
|
+
placeholder: "Valor",
|
|
7062
|
+
value: tempProp.value,
|
|
7063
|
+
onChange: (e) => handlePropChange("value", e.target.value),
|
|
7064
|
+
className: baseInput
|
|
7065
|
+
}
|
|
7066
|
+
);
|
|
6988
7067
|
}
|
|
6989
|
-
})()), /* @__PURE__ */ React3.createElement("div", { className: "flex justify-end items-center gap-2 pt-1" }, /* @__PURE__ */ React3.createElement(
|
|
7068
|
+
})()), /* @__PURE__ */ React3.createElement("div", { className: "flex justify-end items-center gap-2 pt-1" }, /* @__PURE__ */ React3.createElement(
|
|
7069
|
+
"button",
|
|
7070
|
+
{
|
|
7071
|
+
onClick: handleCancel,
|
|
7072
|
+
type: "button",
|
|
7073
|
+
className: "w-8 h-8 grid place-items-center rounded-lg hover:bg-white/10 transition-colors"
|
|
7074
|
+
},
|
|
7075
|
+
/* @__PURE__ */ React3.createElement(FiX, { className: "text-red-400" })
|
|
7076
|
+
), /* @__PURE__ */ React3.createElement(
|
|
7077
|
+
"button",
|
|
7078
|
+
{
|
|
7079
|
+
onClick: handleSave,
|
|
7080
|
+
type: "button",
|
|
7081
|
+
className: "w-8 h-8 grid place-items-center rounded-lg hover:bg-white/10 transition-colors"
|
|
7082
|
+
},
|
|
7083
|
+
/* @__PURE__ */ React3.createElement(FiCheck, { className: "text-green-400" })
|
|
7084
|
+
)));
|
|
6990
7085
|
};
|
|
6991
7086
|
const renderDisplayView = () => /* @__PURE__ */ React3.createElement("div", { className: "w-full space-y-2 text-sm" }, /* @__PURE__ */ React3.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React3.createElement("p", { className: "font-semibold text-slate-200" }, prop.key), /* @__PURE__ */ React3.createElement("span", { className: "text-xs capitalize bg-slate-700/50 px-2 py-0.5 rounded text-slate-400" }, prop.type)), /* @__PURE__ */ React3.createElement("div", { className: "text-slate-300 pl-1" }, (() => {
|
|
6992
7087
|
switch (prop.type) {
|
|
@@ -7014,7 +7109,10 @@ function CustomPropertyDisplay({
|
|
|
7014
7109
|
if (isTextureMode) {
|
|
7015
7110
|
onSelectTexture(item.value);
|
|
7016
7111
|
} else {
|
|
7017
|
-
onOpenImageViewer == null ? void 0 : onOpenImageViewer(
|
|
7112
|
+
onOpenImageViewer == null ? void 0 : onOpenImageViewer(
|
|
7113
|
+
prop.value.map((img) => ({ ...img })),
|
|
7114
|
+
index
|
|
7115
|
+
);
|
|
7018
7116
|
}
|
|
7019
7117
|
},
|
|
7020
7118
|
className: `w-16 h-16 rounded-md bg-cover bg-center bg-slate-700 outline-none transition-all shadow-md ${isSelected ? "ring-4 ring-green-500 scale-105 z-10" : isTextureMode ? "hover:ring-4 hover:ring-indigo-400/50 cursor-pointer" : "hover:ring-2 hover:ring-indigo-400 cursor-zoom-in"}`,
|
|
@@ -7024,7 +7122,17 @@ function CustomPropertyDisplay({
|
|
|
7024
7122
|
), isSelected && /* @__PURE__ */ React3.createElement("div", { className: "absolute -top-2 -right-2 bg-green-500 text-white rounded-full p-0.5 shadow-sm" }, /* @__PURE__ */ React3.createElement(FiCheck, { size: 12 })));
|
|
7025
7123
|
}));
|
|
7026
7124
|
case "links":
|
|
7027
|
-
return /* @__PURE__ */ React3.createElement("ul", { className: "space-y-1.5 max-h-40 overflow-y-auto custom-scrollbar" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ React3.createElement("li", { key: item.id }, /* @__PURE__ */ React3.createElement(
|
|
7125
|
+
return /* @__PURE__ */ React3.createElement("ul", { className: "space-y-1.5 max-h-40 overflow-y-auto custom-scrollbar" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ React3.createElement("li", { key: item.id }, /* @__PURE__ */ React3.createElement(
|
|
7126
|
+
"a",
|
|
7127
|
+
{
|
|
7128
|
+
href: item.value,
|
|
7129
|
+
target: "_blank",
|
|
7130
|
+
rel: "noopener noreferrer",
|
|
7131
|
+
className: "inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 hover:underline transition-colors"
|
|
7132
|
+
},
|
|
7133
|
+
item.name,
|
|
7134
|
+
/* @__PURE__ */ React3.createElement(FiExternalLink, { className: "opacity-60", size: 12 })
|
|
7135
|
+
))));
|
|
7028
7136
|
case "documents":
|
|
7029
7137
|
return /* @__PURE__ */ React3.createElement("div", { className: "space-y-2 mt-1" }, Array.isArray(prop.value) && prop.value.map((item) => /* @__PURE__ */ React3.createElement(
|
|
7030
7138
|
"a",
|
|
@@ -7052,7 +7160,30 @@ function CustomPropertyDisplay({
|
|
|
7052
7160
|
onMouseLeave: () => setIsHovered(false)
|
|
7053
7161
|
},
|
|
7054
7162
|
isEditing ? renderEditView() : renderDisplayView(),
|
|
7055
|
-
!isEditing && !readOnly && /* @__PURE__ */ React3.createElement(
|
|
7163
|
+
!isEditing && !readOnly && /* @__PURE__ */ React3.createElement(
|
|
7164
|
+
"div",
|
|
7165
|
+
{
|
|
7166
|
+
className: `absolute top-2 right-2 flex items-center gap-1 transition-opacity ${isHovered ? "opacity-100" : "opacity-0"}`
|
|
7167
|
+
},
|
|
7168
|
+
/* @__PURE__ */ React3.createElement(
|
|
7169
|
+
"button",
|
|
7170
|
+
{
|
|
7171
|
+
onClick: () => setIsEditing(true),
|
|
7172
|
+
className: "w-7 h-7 grid place-items-center rounded-lg bg-slate-700/80 hover:bg-slate-600/80 text-slate-200 transition-colors",
|
|
7173
|
+
title: "Editar"
|
|
7174
|
+
},
|
|
7175
|
+
/* @__PURE__ */ React3.createElement(FiEdit3, { size: 14 })
|
|
7176
|
+
),
|
|
7177
|
+
/* @__PURE__ */ React3.createElement(
|
|
7178
|
+
"button",
|
|
7179
|
+
{
|
|
7180
|
+
onClick: onRemove,
|
|
7181
|
+
className: "w-7 h-7 grid place-items-center rounded-lg bg-red-700/80 hover:bg-red-600/80 text-slate-200 transition-colors",
|
|
7182
|
+
title: "Remover"
|
|
7183
|
+
},
|
|
7184
|
+
/* @__PURE__ */ React3.createElement(FiTrash2, { size: 14 })
|
|
7185
|
+
)
|
|
7186
|
+
)
|
|
7056
7187
|
);
|
|
7057
7188
|
}
|
|
7058
7189
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lv-x-software-house/x_view",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.7",
|
|
4
4
|
"description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
|
|
5
5
|
"author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
|
|
6
6
|
"license": "UNLICENSED",
|