@sunggang/ui-lib 0.3.59 → 0.3.61

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/index.esm.css +9 -2
  2. package/index.esm2.js +87 -51
  3. package/package.json +1 -1
  4. package/src/lib/DragDrop/PrimaryDragDropImage.d.ts +2 -0
  5. package/src/lib/Form/demo.d.ts +4 -0
  6. package/src/lib/Form/types.d.ts +1 -0
package/index.esm.css CHANGED
@@ -1264,6 +1264,9 @@ video {
1264
1264
  .gap-5 {
1265
1265
  gap: 1.25rem;
1266
1266
  }
1267
+ .gap-6 {
1268
+ gap: 1.5rem;
1269
+ }
1267
1270
  .gap-8 {
1268
1271
  gap: 2rem;
1269
1272
  }
@@ -1842,8 +1845,8 @@ video {
1842
1845
  .pt-1 {
1843
1846
  padding-top: 0.25rem;
1844
1847
  }
1845
- .pt-2 {
1846
- padding-top: 0.5rem;
1848
+ .pt-3 {
1849
+ padding-top: 0.75rem;
1847
1850
  }
1848
1851
  .pt-4 {
1849
1852
  padding-top: 1rem;
@@ -2024,6 +2027,10 @@ video {
2024
2027
  --tw-text-opacity: 1;
2025
2028
  color: rgb(239 85 51 / var(--tw-text-opacity, 1));
2026
2029
  }
2030
+ .text-\[\#F24822\] {
2031
+ --tw-text-opacity: 1;
2032
+ color: rgb(242 72 34 / var(--tw-text-opacity, 1));
2033
+ }
2027
2034
  .text-\[\#fff\] {
2028
2035
  --tw-text-opacity: 1;
2029
2036
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
package/index.esm2.js CHANGED
@@ -17772,54 +17772,64 @@ function _object_spread_props$l(target, source) {
17772
17772
  return target;
17773
17773
  }
17774
17774
  var PrimaryDragDropImage = function(param) {
17775
- var imageUrls = param.imageUrls, handleRemove = param.handleRemove, isDropDisabled = param.isDropDisabled;
17775
+ var imageUrls = param.imageUrls, handleRemove = param.handleRemove, isDropDisabled = param.isDropDisabled, _param_maxTotalImages = param.maxTotalImages, maxTotalImages = _param_maxTotalImages === void 0 ? 1 : _param_maxTotalImages, _param_showLimitWarning = param.showLimitWarning, showLimitWarning = _param_showLimitWarning === void 0 ? false : _param_showLimitWarning;
17776
17776
  return /*#__PURE__*/ jsx(ConnectedDroppable, {
17777
17777
  droppableId: "droppable-imageUrls",
17778
17778
  direction: "horizontal",
17779
17779
  isDropDisabled: isDropDisabled || false,
17780
17780
  children: function(provided) {
17781
- return /*#__PURE__*/ jsx("div", _object_spread_props$l(_object_spread$q({
17781
+ return /*#__PURE__*/ jsxs("div", _object_spread_props$l(_object_spread$q({
17782
17782
  ref: provided.innerRef
17783
17783
  }, provided.droppableProps), {
17784
- children: /*#__PURE__*/ jsxs("div", {
17785
- className: "flex gap-9 mt-2",
17786
- children: [
17787
- imageUrls.map(function(item, index) {
17788
- return /*#__PURE__*/ jsx(PublicDraggable, {
17789
- draggableId: String(item === null || item === void 0 ? void 0 : item.id),
17790
- index: index,
17791
- children: function(provided) {
17792
- return /*#__PURE__*/ jsxs("div", _object_spread_props$l(_object_spread$q({
17793
- ref: provided.innerRef
17794
- }, provided.draggableProps, provided.dragHandleProps), {
17795
- className: "w-[172px] my-2 rounded-lg relative p-2 bg-[#F1F1F1] border border-[#B8B8B8] shadow-[2px_6px_8px_0px_rgba(0,0,0,0.12)]",
17796
- children: [
17797
- /*#__PURE__*/ jsx(Icon, {
17798
- className: "absolute -right-0 -top-0 rounded-full z-10 text-black",
17799
- icon: "carbon:close-filled",
17800
- width: "30",
17801
- height: "30",
17802
- onClick: function() {
17803
- return handleRemove(item);
17804
- },
17805
- style: {
17806
- color: "white",
17807
- backgroundColor: "black"
17808
- }
17809
- }),
17810
- /*#__PURE__*/ jsx("img", {
17811
- className: "w-[156px] h-[100px] object-cover",
17812
- src: (item === null || item === void 0 ? void 0 : item.url) || (item === null || item === void 0 ? void 0 : item.preview),
17813
- alt: ""
17814
- })
17815
- ]
17816
- }));
17817
- }
17818
- }, item === null || item === void 0 ? void 0 : item.id);
17819
- }),
17820
- provided.placeholder
17821
- ]
17822
- })
17784
+ children: [
17785
+ /*#__PURE__*/ jsxs("div", {
17786
+ className: "flex gap-6",
17787
+ children: [
17788
+ imageUrls.map(function(item, index) {
17789
+ return /*#__PURE__*/ jsx(PublicDraggable, {
17790
+ draggableId: String(item === null || item === void 0 ? void 0 : item.id),
17791
+ index: index,
17792
+ children: function(provided) {
17793
+ return /*#__PURE__*/ jsxs("div", _object_spread_props$l(_object_spread$q({
17794
+ ref: provided.innerRef
17795
+ }, provided.draggableProps, provided.dragHandleProps), {
17796
+ className: "w-[172px] rounded-lg relative p-2 bg-[#F1F1F1] border border-[#B8B8B8] shadow-[2px_6px_8px_0px_rgba(0,0,0,0.12)]",
17797
+ children: [
17798
+ /*#__PURE__*/ jsx(Icon, {
17799
+ className: "absolute -right-0 -top-0 rounded-full z-10 text-black",
17800
+ icon: "carbon:close-filled",
17801
+ width: "30",
17802
+ height: "30",
17803
+ onClick: function() {
17804
+ return handleRemove(item);
17805
+ },
17806
+ style: {
17807
+ color: "white",
17808
+ backgroundColor: "black"
17809
+ }
17810
+ }),
17811
+ /*#__PURE__*/ jsx("img", {
17812
+ className: "w-[156px] h-[100px] object-cover",
17813
+ src: (item === null || item === void 0 ? void 0 : item.url) || (item === null || item === void 0 ? void 0 : item.preview),
17814
+ alt: ""
17815
+ })
17816
+ ]
17817
+ }));
17818
+ }
17819
+ }, item === null || item === void 0 ? void 0 : item.id);
17820
+ }),
17821
+ provided.placeholder
17822
+ ]
17823
+ }),
17824
+ showLimitWarning && /*#__PURE__*/ jsxs("div", {
17825
+ className: "pt-1 text-[#F24822] font-medium",
17826
+ children: [
17827
+ "註：已到達最大上傳量",
17828
+ maxTotalImages,
17829
+ "張，請刪除部分照片再上傳。"
17830
+ ]
17831
+ })
17832
+ ]
17823
17833
  }));
17824
17834
  }
17825
17835
  });
@@ -18195,7 +18205,7 @@ var DropImage = function(param) {
18195
18205
  /*#__PURE__*/ jsxs(DragDropContext, {
18196
18206
  onDragEnd: onDragEnd,
18197
18207
  children: [
18198
- !canUploadMore ? /*#__PURE__*/ jsx("div", {
18208
+ !canUploadMore && (imageStyleType === "base" || imageStyleType === "custom") ? /*#__PURE__*/ jsx("div", {
18199
18209
  className: "w-full mb-4",
18200
18210
  children: /*#__PURE__*/ jsxs("div", {
18201
18211
  className: "border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 p-8 text-center",
@@ -18220,7 +18230,7 @@ var DropImage = function(param) {
18220
18230
  })
18221
18231
  ]
18222
18232
  })
18223
- }) : /*#__PURE__*/ jsxs("div", _object_spread_props$k(_object_spread$p({}, getRootProps({
18233
+ }) : !canUploadMore && imageStyleType === "primary" ? null : /*#__PURE__*/ jsxs("div", _object_spread_props$k(_object_spread$p({}, getRootProps({
18224
18234
  className: "dropzone"
18225
18235
  })), {
18226
18236
  children: [
@@ -18243,6 +18253,19 @@ var DropImage = function(param) {
18243
18253
  className: "font-normal text-[#777777] pb-2 text-center",
18244
18254
  children: "或用上傳按鈕選擇檔案"
18245
18255
  }),
18256
+ /*#__PURE__*/ jsxs("div", {
18257
+ className: "font-normal text-xs text-[#999999] pb-2 text-center",
18258
+ children: [
18259
+ "(已上傳 ",
18260
+ currentImageCount,
18261
+ "/",
18262
+ maxTotalImages,
18263
+ "張，還可上傳",
18264
+ " ",
18265
+ remainingSlots,
18266
+ " 張)"
18267
+ ]
18268
+ }),
18246
18269
  /*#__PURE__*/ jsx("div", {
18247
18270
  className: "flex justify-center",
18248
18271
  children: /*#__PURE__*/ jsx("div", {
@@ -18279,11 +18302,13 @@ var DropImage = function(param) {
18279
18302
  /*#__PURE__*/ jsxs("p", {
18280
18303
  className: "font-normal text-xs text-[#999999] pb-4",
18281
18304
  children: [
18282
- "還可上傳 ",
18283
- remainingSlots,
18284
- " 張圖片 (總限制:",
18285
- " ",
18305
+ "(已上傳 ",
18306
+ currentImageCount,
18307
+ "/",
18286
18308
  maxTotalImages,
18309
+ "張，還可上傳",
18310
+ " ",
18311
+ remainingSlots,
18287
18312
  " 張)"
18288
18313
  ]
18289
18314
  })
@@ -18296,7 +18321,7 @@ var DropImage = function(param) {
18296
18321
  ]
18297
18322
  })),
18298
18323
  preview && /*#__PURE__*/ jsxs("div", {
18299
- className: "flex pt-2 overflow-auto",
18324
+ className: "flex pt-3 overflow-auto",
18300
18325
  children: [
18301
18326
  imageStyleType === "base" && /*#__PURE__*/ jsx(DragDropImages, {
18302
18327
  imageUrls: previewFiles,
@@ -18308,7 +18333,9 @@ var DropImage = function(param) {
18308
18333
  }),
18309
18334
  imageStyleType === "primary" && /*#__PURE__*/ jsx(PrimaryDragDropImage, {
18310
18335
  imageUrls: previewFiles,
18311
- handleRemove: handleRemove
18336
+ handleRemove: handleRemove,
18337
+ maxTotalImages: maxTotalImages,
18338
+ showLimitWarning: !canUploadMore
18312
18339
  })
18313
18340
  ]
18314
18341
  })
@@ -47733,7 +47760,7 @@ var DropdownList = function(param) {
47733
47760
  });
47734
47761
  }
47735
47762
  }),
47736
- /*#__PURE__*/ jsx("div", {
47763
+ (item === null || item === void 0 ? void 0 : item.hiddenText) ? null : /*#__PURE__*/ jsx("div", {
47737
47764
  className: "inviable h-5 pt-1",
47738
47765
  children: errors.funeralLocation && /*#__PURE__*/ jsx("p", {
47739
47766
  className: "text-left text-xs text-[#EF5533]",
@@ -50194,7 +50221,16 @@ var FlatpickrInput = /*#__PURE__*/ forwardRef(function(param, ref) {
50194
50221
  mode: "single",
50195
50222
  allowInput: true,
50196
50223
  clickOpens: true,
50197
- time_24hr: true
50224
+ time_24hr: true,
50225
+ onOpen: function(_, __, instance) {
50226
+ var monthSelect = instance.calendarContainer.querySelector(".flatpickr-monthDropdown-months");
50227
+ var yearInput = instance.calendarContainer.querySelector(".numInputWrapper");
50228
+ if (monthSelect && yearInput && yearInput.parentNode) {
50229
+ var parent = yearInput.parentNode;
50230
+ // 把月和年 select 調整順序
50231
+ parent.insertBefore(yearInput, monthSelect); // 年在月前
50232
+ }
50233
+ }
50198
50234
  }, item === null || item === void 0 ? void 0 : item.flatpickrOptions);
50199
50235
  // 移除錯誤的 closeOnSelect 設定，改用事件控制
50200
50236
  if (options.mode === "range") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sunggang/ui-lib",
3
- "version": "0.3.59",
3
+ "version": "0.3.61",
4
4
  "dependencies": {
5
5
  "@emotion/react": "^11.14.0",
6
6
  "@emotion/styled": "^11.14.0",
package/src/lib/DragDrop/PrimaryDragDropImage.d.ts CHANGED
@@ -8,6 +8,8 @@ interface PrimaryDragDropImagesProps {
8
8
  imageUrls: ImageItem[];
9
9
  handleRemove: (item: ImageItem) => void;
10
10
  isDropDisabled?: boolean;
11
+ maxTotalImages?: number;
12
+ showLimitWarning?: boolean;
11
13
  }
12
14
  export declare const PrimaryDragDropImage: React.FC<PrimaryDragDropImagesProps>;
13
15
  export {};
package/src/lib/Form/demo.d.ts CHANGED
@@ -26,7 +26,9 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
26
26
  option?: undefined;
27
27
  placeholder?: undefined;
28
28
  noDataText?: undefined;
29
+ hiddenText?: undefined;
29
30
  dropStyle?: undefined;
31
+ className?: undefined;
30
32
  } | {
31
33
  type: string;
32
34
  name: string;
@@ -40,11 +42,13 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
40
42
  };
41
43
  placeholder: string;
42
44
  noDataText: string;
45
+ hiddenText: boolean;
43
46
  dropStyle: {
44
47
  bgClass: string;
45
48
  hoverClass: string;
46
49
  selectedClass: string;
47
50
  };
51
+ className: string;
48
52
  icon?: undefined;
49
53
  flatpickrOptions?: undefined;
50
54
  })[] | {
package/src/lib/Form/types.d.ts CHANGED
@@ -117,6 +117,7 @@ export interface FormItem {
117
117
  limitSize?: number;
118
118
  imageStyleType?: string;
119
119
  noDataText?: string;
120
+ hiddenText?: boolean;
120
121
  dropStyle?: {
121
122
  bgClass?: string;
122
123
  hoverClass?: string;