@sunggang/ui-lib 0.4.61 → 0.4.63

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.
Files changed (6) hide show
  1. package/Form.cjs.js +123 -102
  2. package/Form.esm.js +123 -102
  3. package/index.cjs.css +6 -4
  4. package/index.esm.css +6 -4
  5. package/package.json +1 -1
  6. package/src/lib/Form/types.d.ts +2 -1
package/Form.cjs.js CHANGED
@@ -8040,11 +8040,11 @@ var FieldArray = function(param) {
8040
8040
  var config = item === null || item === void 0 ? void 0 : item.fieldArrayConfig;
8041
8041
  var fieldConfigs = (config === null || config === void 0 ? void 0 : config.fields) || [];
8042
8042
  var addButtonText = (config === null || config === void 0 ? void 0 : config.addButtonText) || "新增";
8043
- var removeButtonText = (config === null || config === void 0 ? void 0 : config.removeButtonText) || "刪除";
8044
8043
  var maxItems = config === null || config === void 0 ? void 0 : config.maxItems;
8045
8044
  var minItems = (config === null || config === void 0 ? void 0 : config.minItems) || 0;
8046
8045
  var defaultItemCount = (config === null || config === void 0 ? void 0 : config.defaultItemCount) || 1;
8047
8046
  var addButtonPosition = (config === null || config === void 0 ? void 0 : config.addButtonPosition) || "bottom";
8047
+ var addButtonClassName = config === null || config === void 0 ? void 0 : config.addButtonClassName;
8048
8048
  var canAdd = !maxItems || fields.length < maxItems;
8049
8049
  var canRemove = fields.length > minItems;
8050
8050
  // 初始化：確保至少有 defaultItemCount 個項目
@@ -8112,127 +8112,148 @@ var FieldArray = function(param) {
8112
8112
  (item === null || item === void 0 ? void 0 : item.className) || "w-full"
8113
8113
  ].join(" "),
8114
8114
  children: [
8115
- /*#__PURE__*/ jsxRuntime.jsx(FieldLabel.FieldLabel, {
8115
+ (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsxRuntime.jsx(FieldLabel.FieldLabel, {
8116
8116
  item: item
8117
8117
  }),
8118
+ addButtonPosition === "top" && canAdd && /*#__PURE__*/ jsxRuntime.jsxs("button", {
8119
+ type: "button",
8120
+ onClick: handleAdd,
8121
+ className: addButtonClassName || [
8122
+ "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
8123
+ "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
8124
+ "transition-colors duration-200",
8125
+ "flex items-center whitespace-nowrap mb-4"
8126
+ ].join(" "),
8127
+ children: [
8128
+ "+ ",
8129
+ addButtonText
8130
+ ]
8131
+ }),
8118
8132
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
8119
- className: "space-y-4",
8133
+ className: "space-y-2",
8120
8134
  children: [
8121
8135
  fields.map(function(field, index) {
8122
8136
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
8123
- className: "border border-[#C8C8C8] rounded-xl p-4 bg-white overflow-scroll",
8124
- children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
8125
- className: "flex items-start gap-2 flex-wrap lg:flex-nowrap",
8126
- children: [
8127
- fieldConfigs.map(function(fieldConfig, fieldIndex) {
8128
- var _fieldConfig_validateOption;
8129
- var fieldName = "".concat(item.name, ".").concat(index, ".").concat(fieldConfig.name);
8130
- var fieldError = getFieldError(index, fieldConfig.name);
8131
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
8132
- className: "flex-1 min-w-[200px]",
8133
- children: [
8134
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
8135
- className: "font-medium mb-2 text-sm",
8137
+ className: "bg-white overflow-scroll",
8138
+ children: /*#__PURE__*/ jsxRuntime.jsx("div", {
8139
+ className: "flex items-start gap-2 flex-wrap lg:flex-nowrap h-[96px]",
8140
+ children: fieldConfigs.map(function(fieldConfig, fieldIndex) {
8141
+ var _fieldConfig_validateOption;
8142
+ var fieldName = "".concat(item.name, ".").concat(index, ".").concat(fieldConfig.name);
8143
+ var fieldError = getFieldError(index, fieldConfig.name);
8144
+ var isLastField = fieldIndex === fieldConfigs.length - 1;
8145
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
8146
+ className: [
8147
+ isLastField ? "flex items-start gap-1 flex-1" : "flex-1",
8148
+ "min-w-[200px]"
8149
+ ].join(" "),
8150
+ children: [
8151
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
8152
+ className: "flex-1",
8153
+ children: [
8154
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
8155
+ className: "font-medium mb-2",
8156
+ children: [
8157
+ fieldConfig.label,
8158
+ (fieldConfig === null || fieldConfig === void 0 ? void 0 : (_fieldConfig_validateOption = fieldConfig.validateOption) === null || _fieldConfig_validateOption === void 0 ? void 0 : _fieldConfig_validateOption.required) && /*#__PURE__*/ jsxRuntime.jsx("span", {
8159
+ className: "pl-1 text-[#EF5533] font-bold",
8160
+ children: "*"
8161
+ })
8162
+ ]
8163
+ }),
8164
+ /*#__PURE__*/ jsxRuntime.jsx(index_esm.Controller, {
8165
+ name: fieldName,
8166
+ control: control,
8167
+ rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
8168
+ render: function(param) {
8169
+ var controllerField = param.field;
8170
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
8171
+ className: "relative",
8172
+ children: [
8173
+ /*#__PURE__*/ jsxRuntime.jsx("input", _object_spread_props(_object_spread({}, controllerField), {
8174
+ list: "".concat(fieldName, "-datalist"),
8175
+ type: "text",
8176
+ className: [
8177
+ (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
8178
+ "w-full h-11 rounded-2xl px-4 border border-solid border-[#B4B4B4]"
8179
+ ].join(" "),
8180
+ placeholder: fieldConfig.placeholder || fieldConfig.label,
8181
+ disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
8182
+ })),
8183
+ fieldConfig.options && fieldConfig.options.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("datalist", {
8184
+ id: "".concat(fieldName, "-datalist"),
8185
+ children: fieldConfig.options.map(function(option, optIndex) {
8186
+ return /*#__PURE__*/ jsxRuntime.jsx("option", {
8187
+ value: option.value || option.name,
8188
+ children: option.name
8189
+ }, optIndex);
8190
+ })
8191
+ })
8192
+ ]
8193
+ });
8194
+ }
8195
+ }),
8196
+ (fieldError === null || fieldError === void 0 ? void 0 : fieldError.message) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
8197
+ className: "pt-1 text-xs text-[#EF5533]",
8198
+ children: [
8199
+ "*",
8200
+ String(fieldError.message)
8201
+ ]
8202
+ })
8203
+ ]
8204
+ }),
8205
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
8206
+ className: "flex gap-1 items-center",
8207
+ children: isLastField && /*#__PURE__*/ jsxRuntime.jsxs("div", {
8208
+ className: [
8209
+ "flex items-center justify-center flex-shrink-0",
8210
+ "mt-[30px]"
8211
+ ].join(" "),
8136
8212
  children: [
8137
- fieldConfig.label,
8138
- (fieldConfig === null || fieldConfig === void 0 ? void 0 : (_fieldConfig_validateOption = fieldConfig.validateOption) === null || _fieldConfig_validateOption === void 0 ? void 0 : _fieldConfig_validateOption.required) && /*#__PURE__*/ jsxRuntime.jsx("span", {
8139
- className: "pl-1 text-[#EF5533] font-bold",
8140
- children: "*"
8141
- })
8142
- ]
8143
- }),
8144
- /*#__PURE__*/ jsxRuntime.jsx(index_esm.Controller, {
8145
- name: fieldName,
8146
- control: control,
8147
- rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
8148
- render: function(param) {
8149
- var controllerField = param.field;
8150
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
8151
- className: "relative",
8213
+ addButtonPosition === "inline" && canAdd && index === fields.length - 1 && /*#__PURE__*/ jsxRuntime.jsxs("button", {
8214
+ type: "button",
8215
+ onClick: handleAdd,
8216
+ className: addButtonClassName || [
8217
+ "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
8218
+ "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
8219
+ "transition-colors duration-200",
8220
+ "flex items-center gap-2 whitespace-nowrap flex-shrink-0"
8221
+ ].join(" "),
8152
8222
  children: [
8153
- /*#__PURE__*/ jsxRuntime.jsx("input", _object_spread_props(_object_spread({}, controllerField), {
8154
- list: "".concat(fieldName, "-datalist"),
8155
- type: "text",
8156
- className: [
8157
- (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
8158
- "w-full h-11 rounded-2xl px-4 border border-solid border-[#B4B4B4]"
8159
- ].join(" "),
8160
- placeholder: fieldConfig.placeholder || fieldConfig.label,
8161
- disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
8162
- })),
8163
- fieldConfig.options && fieldConfig.options.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("datalist", {
8164
- id: "".concat(fieldName, "-datalist"),
8165
- children: fieldConfig.options.map(function(option, optIndex) {
8166
- return /*#__PURE__*/ jsxRuntime.jsx("option", {
8167
- value: option.value || option.name,
8168
- children: option.name
8169
- }, optIndex);
8170
- })
8171
- })
8223
+ /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
8224
+ icon: "mdi:plus",
8225
+ className: "w-5 h-5"
8226
+ }),
8227
+ addButtonText
8172
8228
  ]
8173
- });
8174
- }
8175
- }),
8176
- (fieldError === null || fieldError === void 0 ? void 0 : fieldError.message) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
8177
- className: "pt-1 text-xs text-[#EF5533]",
8178
- children: [
8179
- "*",
8180
- String(fieldError.message)
8229
+ }),
8230
+ canRemove && fields.length > 1 && /*#__PURE__*/ jsxRuntime.jsx("div", {
8231
+ className: "p-2 rounded-2xl text-[#EF5533] bg-white hover:bg-[#FFF5F3] transition-colors duration-200",
8232
+ children: /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
8233
+ icon: "fluent-mdl2:delete",
8234
+ className: "w-6 h-6",
8235
+ onClick: function() {
8236
+ return handleRemove(index);
8237
+ }
8238
+ })
8239
+ })
8181
8240
  ]
8182
8241
  })
8183
- ]
8184
- }, fieldIndex);
8185
- }),
8186
- addButtonPosition === "inline" && canAdd && index === fields.length - 1 && /*#__PURE__*/ jsxRuntime.jsxs("button", {
8187
- type: "button",
8188
- onClick: handleAdd,
8189
- className: [
8190
- "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
8191
- "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
8192
- "transition-colors duration-200",
8193
- "flex items-center gap-2 whitespace-nowrap",
8194
- "mt-[30px]"
8195
- ].join(" "),
8196
- children: [
8197
- /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
8198
- icon: "mdi:plus",
8199
- className: "w-5 h-5"
8200
- }),
8201
- addButtonText
8202
- ]
8203
- }),
8204
- canRemove && /*#__PURE__*/ jsxRuntime.jsxs("button", {
8205
- type: "button",
8206
- onClick: function() {
8207
- return handleRemove(index);
8208
- },
8209
- className: [
8210
- "h-11 px-4 rounded-2xl border border-solid border-[#EF5533]",
8211
- "text-[#EF5533] bg-white hover:bg-[#FFF5F3]",
8212
- "transition-colors duration-200",
8213
- "flex items-center gap-2 whitespace-nowrap",
8214
- "mt-[30px]"
8215
- ].join(" "),
8216
- children: [
8217
- /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
8218
- icon: "mdi:delete-outline",
8219
- className: "w-5 h-5"
8220
- }),
8221
- removeButtonText
8242
+ })
8222
8243
  ]
8223
- })
8224
- ]
8244
+ }, fieldIndex);
8245
+ })
8225
8246
  })
8226
8247
  }, field.id);
8227
8248
  }),
8228
8249
  addButtonPosition === "bottom" && canAdd && /*#__PURE__*/ jsxRuntime.jsxs("button", {
8229
8250
  type: "button",
8230
8251
  onClick: handleAdd,
8231
- className: [
8232
- "h-11 px-6 rounded-2xl border border-solid border-[#6f6f6f]",
8252
+ className: addButtonClassName || [
8253
+ "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
8233
8254
  "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
8234
8255
  "transition-colors duration-200",
8235
- "flex items-center gap-2"
8256
+ "flex items-center gap-2 whitespace-nowrap"
8236
8257
  ].join(" "),
8237
8258
  children: [
8238
8259
  /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
package/Form.esm.js CHANGED
@@ -8013,11 +8013,11 @@ var FieldArray = function(param) {
8013
8013
  var config = item === null || item === void 0 ? void 0 : item.fieldArrayConfig;
8014
8014
  var fieldConfigs = (config === null || config === void 0 ? void 0 : config.fields) || [];
8015
8015
  var addButtonText = (config === null || config === void 0 ? void 0 : config.addButtonText) || "新增";
8016
- var removeButtonText = (config === null || config === void 0 ? void 0 : config.removeButtonText) || "刪除";
8017
8016
  var maxItems = config === null || config === void 0 ? void 0 : config.maxItems;
8018
8017
  var minItems = (config === null || config === void 0 ? void 0 : config.minItems) || 0;
8019
8018
  var defaultItemCount = (config === null || config === void 0 ? void 0 : config.defaultItemCount) || 1;
8020
8019
  var addButtonPosition = (config === null || config === void 0 ? void 0 : config.addButtonPosition) || "bottom";
8020
+ var addButtonClassName = config === null || config === void 0 ? void 0 : config.addButtonClassName;
8021
8021
  var canAdd = !maxItems || fields.length < maxItems;
8022
8022
  var canRemove = fields.length > minItems;
8023
8023
  // 初始化：確保至少有 defaultItemCount 個項目
@@ -8085,127 +8085,148 @@ var FieldArray = function(param) {
8085
8085
  (item === null || item === void 0 ? void 0 : item.className) || "w-full"
8086
8086
  ].join(" "),
8087
8087
  children: [
8088
- /*#__PURE__*/ jsx$1(FieldLabel, {
8088
+ (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsx$1(FieldLabel, {
8089
8089
  item: item
8090
8090
  }),
8091
+ addButtonPosition === "top" && canAdd && /*#__PURE__*/ jsxs("button", {
8092
+ type: "button",
8093
+ onClick: handleAdd,
8094
+ className: addButtonClassName || [
8095
+ "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
8096
+ "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
8097
+ "transition-colors duration-200",
8098
+ "flex items-center whitespace-nowrap mb-4"
8099
+ ].join(" "),
8100
+ children: [
8101
+ "+ ",
8102
+ addButtonText
8103
+ ]
8104
+ }),
8091
8105
  /*#__PURE__*/ jsxs("div", {
8092
- className: "space-y-4",
8106
+ className: "space-y-2",
8093
8107
  children: [
8094
8108
  fields.map(function(field, index) {
8095
8109
  return /*#__PURE__*/ jsx$1("div", {
8096
- className: "border border-[#C8C8C8] rounded-xl p-4 bg-white overflow-scroll",
8097
- children: /*#__PURE__*/ jsxs("div", {
8098
- className: "flex items-start gap-2 flex-wrap lg:flex-nowrap",
8099
- children: [
8100
- fieldConfigs.map(function(fieldConfig, fieldIndex) {
8101
- var _fieldConfig_validateOption;
8102
- var fieldName = "".concat(item.name, ".").concat(index, ".").concat(fieldConfig.name);
8103
- var fieldError = getFieldError(index, fieldConfig.name);
8104
- return /*#__PURE__*/ jsxs("div", {
8105
- className: "flex-1 min-w-[200px]",
8106
- children: [
8107
- /*#__PURE__*/ jsxs("div", {
8108
- className: "font-medium mb-2 text-sm",
8110
+ className: "bg-white overflow-scroll",
8111
+ children: /*#__PURE__*/ jsx$1("div", {
8112
+ className: "flex items-start gap-2 flex-wrap lg:flex-nowrap h-[96px]",
8113
+ children: fieldConfigs.map(function(fieldConfig, fieldIndex) {
8114
+ var _fieldConfig_validateOption;
8115
+ var fieldName = "".concat(item.name, ".").concat(index, ".").concat(fieldConfig.name);
8116
+ var fieldError = getFieldError(index, fieldConfig.name);
8117
+ var isLastField = fieldIndex === fieldConfigs.length - 1;
8118
+ return /*#__PURE__*/ jsxs("div", {
8119
+ className: [
8120
+ isLastField ? "flex items-start gap-1 flex-1" : "flex-1",
8121
+ "min-w-[200px]"
8122
+ ].join(" "),
8123
+ children: [
8124
+ /*#__PURE__*/ jsxs("div", {
8125
+ className: "flex-1",
8126
+ children: [
8127
+ /*#__PURE__*/ jsxs("div", {
8128
+ className: "font-medium mb-2",
8129
+ children: [
8130
+ fieldConfig.label,
8131
+ (fieldConfig === null || fieldConfig === void 0 ? void 0 : (_fieldConfig_validateOption = fieldConfig.validateOption) === null || _fieldConfig_validateOption === void 0 ? void 0 : _fieldConfig_validateOption.required) && /*#__PURE__*/ jsx$1("span", {
8132
+ className: "pl-1 text-[#EF5533] font-bold",
8133
+ children: "*"
8134
+ })
8135
+ ]
8136
+ }),
8137
+ /*#__PURE__*/ jsx$1(Controller, {
8138
+ name: fieldName,
8139
+ control: control,
8140
+ rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
8141
+ render: function(param) {
8142
+ var controllerField = param.field;
8143
+ return /*#__PURE__*/ jsxs("div", {
8144
+ className: "relative",
8145
+ children: [
8146
+ /*#__PURE__*/ jsx$1("input", _object_spread_props(_object_spread({}, controllerField), {
8147
+ list: "".concat(fieldName, "-datalist"),
8148
+ type: "text",
8149
+ className: [
8150
+ (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
8151
+ "w-full h-11 rounded-2xl px-4 border border-solid border-[#B4B4B4]"
8152
+ ].join(" "),
8153
+ placeholder: fieldConfig.placeholder || fieldConfig.label,
8154
+ disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
8155
+ })),
8156
+ fieldConfig.options && fieldConfig.options.length > 0 && /*#__PURE__*/ jsx$1("datalist", {
8157
+ id: "".concat(fieldName, "-datalist"),
8158
+ children: fieldConfig.options.map(function(option, optIndex) {
8159
+ return /*#__PURE__*/ jsx$1("option", {
8160
+ value: option.value || option.name,
8161
+ children: option.name
8162
+ }, optIndex);
8163
+ })
8164
+ })
8165
+ ]
8166
+ });
8167
+ }
8168
+ }),
8169
+ (fieldError === null || fieldError === void 0 ? void 0 : fieldError.message) && /*#__PURE__*/ jsxs("div", {
8170
+ className: "pt-1 text-xs text-[#EF5533]",
8171
+ children: [
8172
+ "*",
8173
+ String(fieldError.message)
8174
+ ]
8175
+ })
8176
+ ]
8177
+ }),
8178
+ /*#__PURE__*/ jsx$1("div", {
8179
+ className: "flex gap-1 items-center",
8180
+ children: isLastField && /*#__PURE__*/ jsxs("div", {
8181
+ className: [
8182
+ "flex items-center justify-center flex-shrink-0",
8183
+ "mt-[30px]"
8184
+ ].join(" "),
8109
8185
  children: [
8110
- fieldConfig.label,
8111
- (fieldConfig === null || fieldConfig === void 0 ? void 0 : (_fieldConfig_validateOption = fieldConfig.validateOption) === null || _fieldConfig_validateOption === void 0 ? void 0 : _fieldConfig_validateOption.required) && /*#__PURE__*/ jsx$1("span", {
8112
- className: "pl-1 text-[#EF5533] font-bold",
8113
- children: "*"
8114
- })
8115
- ]
8116
- }),
8117
- /*#__PURE__*/ jsx$1(Controller, {
8118
- name: fieldName,
8119
- control: control,
8120
- rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
8121
- render: function(param) {
8122
- var controllerField = param.field;
8123
- return /*#__PURE__*/ jsxs("div", {
8124
- className: "relative",
8186
+ addButtonPosition === "inline" && canAdd && index === fields.length - 1 && /*#__PURE__*/ jsxs("button", {
8187
+ type: "button",
8188
+ onClick: handleAdd,
8189
+ className: addButtonClassName || [
8190
+ "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
8191
+ "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
8192
+ "transition-colors duration-200",
8193
+ "flex items-center gap-2 whitespace-nowrap flex-shrink-0"
8194
+ ].join(" "),
8125
8195
  children: [
8126
- /*#__PURE__*/ jsx$1("input", _object_spread_props(_object_spread({}, controllerField), {
8127
- list: "".concat(fieldName, "-datalist"),
8128
- type: "text",
8129
- className: [
8130
- (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
8131
- "w-full h-11 rounded-2xl px-4 border border-solid border-[#B4B4B4]"
8132
- ].join(" "),
8133
- placeholder: fieldConfig.placeholder || fieldConfig.label,
8134
- disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
8135
- })),
8136
- fieldConfig.options && fieldConfig.options.length > 0 && /*#__PURE__*/ jsx$1("datalist", {
8137
- id: "".concat(fieldName, "-datalist"),
8138
- children: fieldConfig.options.map(function(option, optIndex) {
8139
- return /*#__PURE__*/ jsx$1("option", {
8140
- value: option.value || option.name,
8141
- children: option.name
8142
- }, optIndex);
8143
- })
8144
- })
8196
+ /*#__PURE__*/ jsx$1(Icon, {
8197
+ icon: "mdi:plus",
8198
+ className: "w-5 h-5"
8199
+ }),
8200
+ addButtonText
8145
8201
  ]
8146
- });
8147
- }
8148
- }),
8149
- (fieldError === null || fieldError === void 0 ? void 0 : fieldError.message) && /*#__PURE__*/ jsxs("div", {
8150
- className: "pt-1 text-xs text-[#EF5533]",
8151
- children: [
8152
- "*",
8153
- String(fieldError.message)
8202
+ }),
8203
+ canRemove && fields.length > 1 && /*#__PURE__*/ jsx$1("div", {
8204
+ className: "p-2 rounded-2xl text-[#EF5533] bg-white hover:bg-[#FFF5F3] transition-colors duration-200",
8205
+ children: /*#__PURE__*/ jsx$1(Icon, {
8206
+ icon: "fluent-mdl2:delete",
8207
+ className: "w-6 h-6",
8208
+ onClick: function() {
8209
+ return handleRemove(index);
8210
+ }
8211
+ })
8212
+ })
8154
8213
  ]
8155
8214
  })
8156
- ]
8157
- }, fieldIndex);
8158
- }),
8159
- addButtonPosition === "inline" && canAdd && index === fields.length - 1 && /*#__PURE__*/ jsxs("button", {
8160
- type: "button",
8161
- onClick: handleAdd,
8162
- className: [
8163
- "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
8164
- "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
8165
- "transition-colors duration-200",
8166
- "flex items-center gap-2 whitespace-nowrap",
8167
- "mt-[30px]"
8168
- ].join(" "),
8169
- children: [
8170
- /*#__PURE__*/ jsx$1(Icon, {
8171
- icon: "mdi:plus",
8172
- className: "w-5 h-5"
8173
- }),
8174
- addButtonText
8175
- ]
8176
- }),
8177
- canRemove && /*#__PURE__*/ jsxs("button", {
8178
- type: "button",
8179
- onClick: function() {
8180
- return handleRemove(index);
8181
- },
8182
- className: [
8183
- "h-11 px-4 rounded-2xl border border-solid border-[#EF5533]",
8184
- "text-[#EF5533] bg-white hover:bg-[#FFF5F3]",
8185
- "transition-colors duration-200",
8186
- "flex items-center gap-2 whitespace-nowrap",
8187
- "mt-[30px]"
8188
- ].join(" "),
8189
- children: [
8190
- /*#__PURE__*/ jsx$1(Icon, {
8191
- icon: "mdi:delete-outline",
8192
- className: "w-5 h-5"
8193
- }),
8194
- removeButtonText
8215
+ })
8195
8216
  ]
8196
- })
8197
- ]
8217
+ }, fieldIndex);
8218
+ })
8198
8219
  })
8199
8220
  }, field.id);
8200
8221
  }),
8201
8222
  addButtonPosition === "bottom" && canAdd && /*#__PURE__*/ jsxs("button", {
8202
8223
  type: "button",
8203
8224
  onClick: handleAdd,
8204
- className: [
8205
- "h-11 px-6 rounded-2xl border border-solid border-[#6f6f6f]",
8225
+ className: addButtonClassName || [
8226
+ "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
8206
8227
  "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
8207
8228
  "transition-colors duration-200",
8208
- "flex items-center gap-2"
8229
+ "flex items-center gap-2 whitespace-nowrap"
8209
8230
  ].join(" "),
8210
8231
  children: [
8211
8232
  /*#__PURE__*/ jsx$1(Icon, {
package/index.cjs.css CHANGED
@@ -1768,6 +1768,9 @@ video {
1768
1768
  .h-\[44px\] {
1769
1769
  height: 44px;
1770
1770
  }
1771
+ .h-\[96px\] {
1772
+ height: 96px;
1773
+ }
1771
1774
  .h-\[var\(--radix-select-trigger-height\)\] {
1772
1775
  height: var(--radix-select-trigger-height);
1773
1776
  }
@@ -1956,6 +1959,9 @@ video {
1956
1959
  .flex-shrink {
1957
1960
  flex-shrink: 1;
1958
1961
  }
1962
+ .flex-shrink-0 {
1963
+ flex-shrink: 0;
1964
+ }
1959
1965
  .shrink {
1960
1966
  flex-shrink: 1;
1961
1967
  }
@@ -2355,10 +2361,6 @@ video {
2355
2361
  --tw-border-opacity: 1;
2356
2362
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
2357
2363
  }
2358
- .border-\[\#EF5533\] {
2359
- --tw-border-opacity: 1;
2360
- border-color: rgb(239 85 51 / var(--tw-border-opacity, 1));
2361
- }
2362
2364
  .border-\[\#ccc\] {
2363
2365
  --tw-border-opacity: 1;
2364
2366
  border-color: rgb(204 204 204 / var(--tw-border-opacity, 1));
package/index.esm.css CHANGED
@@ -1768,6 +1768,9 @@ video {
1768
1768
  .h-\[44px\] {
1769
1769
  height: 44px;
1770
1770
  }
1771
+ .h-\[96px\] {
1772
+ height: 96px;
1773
+ }
1771
1774
  .h-\[var\(--radix-select-trigger-height\)\] {
1772
1775
  height: var(--radix-select-trigger-height);
1773
1776
  }
@@ -1956,6 +1959,9 @@ video {
1956
1959
  .flex-shrink {
1957
1960
  flex-shrink: 1;
1958
1961
  }
1962
+ .flex-shrink-0 {
1963
+ flex-shrink: 0;
1964
+ }
1959
1965
  .shrink {
1960
1966
  flex-shrink: 1;
1961
1967
  }
@@ -2355,10 +2361,6 @@ video {
2355
2361
  --tw-border-opacity: 1;
2356
2362
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
2357
2363
  }
2358
- .border-\[\#EF5533\] {
2359
- --tw-border-opacity: 1;
2360
- border-color: rgb(239 85 51 / var(--tw-border-opacity, 1));
2361
- }
2362
2364
  .border-\[\#ccc\] {
2363
2365
  --tw-border-opacity: 1;
2364
2366
  border-color: rgb(204 204 204 / var(--tw-border-opacity, 1));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sunggang/ui-lib",
3
- "version": "0.4.61",
3
+ "version": "0.4.63",
4
4
  "sideEffects": [
5
5
  "*.css",
6
6
  "./src/style.css",
package/src/lib/Form/types.d.ts CHANGED
@@ -175,7 +175,8 @@ export interface FormItem {
175
175
  maxItems?: number;
176
176
  minItems?: number;
177
177
  defaultItemCount?: number;
178
- addButtonPosition?: 'inline' | 'bottom';
178
+ addButtonPosition?: 'inline' | 'bottom' | 'top';
179
+ addButtonClassName?: string;
179
180
  };
180
181
  }
181
182
  export interface FormType {