ts-glitter 13.8.822 → 13.8.825

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 (31) hide show
  1. package/lowcode/Entry.js +1 -1
  2. package/lowcode/Entry.ts +1 -1
  3. package/lowcode/backend-manager/bg-widget.js +124 -22
  4. package/lowcode/backend-manager/bg-widget.ts +123 -21
  5. package/lowcode/cms-plugin/shopping-product-setting.js +22 -14
  6. package/lowcode/cms-plugin/shopping-product-setting.ts +28 -22
  7. package/lowcode/glitterBundle/plugins/editor-elem.js +626 -749
  8. package/lowcode/glitterBundle/plugins/editor-elem.ts +1367 -1600
  9. package/lowcode/jspage/function-page/main_editor.js +4 -4
  10. package/lowcode/jspage/function-page/main_editor.ts +4 -4
  11. package/lowcode/jspage/function-page/setting_editor.js +4 -4
  12. package/lowcode/jspage/function-page/setting_editor.ts +3 -3
  13. package/lowcode/modules/image-library-clone.js +3 -3
  14. package/lowcode/modules/image-library-clone.ts +3 -3
  15. package/lowcode/modules/image-library.js +21 -6
  16. package/lowcode/modules/image-library.ts +23 -7
  17. package/lowcode/public-components/footer/footer-01.js +1 -1
  18. package/lowcode/public-components/footer/footer-01.ts +1 -1
  19. package/lowcode/public-components/footer/footer-02.js +1 -1
  20. package/lowcode/public-components/footer/footer-02.ts +1 -1
  21. package/lowcode/public-components/footer/footer-03.js +1 -1
  22. package/lowcode/public-components/footer/footer-03.ts +1 -1
  23. package/lowcode/public-components/product/pd-card-01.js +14 -5
  24. package/lowcode/public-components/product/pd-card-01.ts +24 -15
  25. package/lowcode/public-components/product/pd-card-02.js +15 -5
  26. package/lowcode/public-components/product/pd-card-02.ts +25 -15
  27. package/lowcode/public-components/product/pd-card-03.js +15 -5
  28. package/lowcode/public-components/product/pd-card-03.ts +25 -15
  29. package/lowcode/public-components/product/product-detail.js +155 -61
  30. package/lowcode/public-components/product/product-detail.ts +226 -134
  31. package/package.json +1 -1
package/lowcode/Entry.js CHANGED
@@ -70,7 +70,7 @@ export class Entry {
70
70
  }
71
71
  window.renderClock = (_a = window.renderClock) !== null && _a !== void 0 ? _a : clockF();
72
72
  console.log(`Entry-time:`, window.renderClock.stop());
73
- glitter.share.editerVersion = 'V_13.8.822';
73
+ glitter.share.editerVersion = 'V_13.8.825';
74
74
  glitter.share.start = new Date();
75
75
  const vm = {
76
76
  appConfig: [],
package/lowcode/Entry.ts CHANGED
@@ -71,7 +71,7 @@ export class Entry {
71
71
  }
72
72
  (window as any).renderClock = (window as any).renderClock ?? clockF();
73
73
  console.log(`Entry-time:`, (window as any).renderClock.stop());
74
- glitter.share.editerVersion = 'V_13.8.822';
74
+ glitter.share.editerVersion = 'V_13.8.825';
75
75
  glitter.share.start = new Date();
76
76
  const vm: {
77
77
  appConfig: any;
@@ -1332,7 +1332,7 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
1332
1332
  </div>`;
1333
1333
  }
1334
1334
  catch (e) {
1335
- console.log(e);
1335
+ console.error(e);
1336
1336
  return `${e}`;
1337
1337
  }
1338
1338
  },
@@ -1348,7 +1348,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
1348
1348
  timer++;
1349
1349
  if (created.header) {
1350
1350
  const checkbox = obj.filter.length > 0;
1351
- console.log(`query==>`, ids.tr);
1352
1351
  const tr = gvc.glitter.document.querySelector(`.${ids.tr}`);
1353
1352
  tr === null || tr === void 0 ? void 0 : tr.querySelectorAll('td').forEach((td, index) => {
1354
1353
  if (checkbox && index === 0) {
@@ -1881,6 +1880,76 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
1881
1880
  },
1882
1881
  });
1883
1882
  }
1883
+ static richTextView(text) {
1884
+ return html `<div style="width: 100%; height: 150px; position: relative; background: white; border-radius: 10px; overflow: hidden; border: 1px #DDDDDD solid">
1885
+ <div
1886
+ style="left: 18px; right: 18px; top: 59px; position: absolute; color: ${text.length > 0
1887
+ ? '#393939'
1888
+ : '#8D8D8D'}; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
1889
+ >
1890
+ ${text.length > 0 ? text : '點擊填寫商品描述及說明'}
1891
+ </div>
1892
+ <div
1893
+ style="width: 100%; padding-top: 10px; padding-bottom: 10px; padding-left: 18px; padding-right: 18px; left: 0px; top: 0px; position: absolute; background: white; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; border-bottom: 1px #DDDDDD solid; justify-content: flex-start; align-items: center; display: inline-flex"
1894
+ >
1895
+ <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 24px; display: inline-flex">
1896
+ <div style="justify-content: flex-start; align-items: center; gap: 44px; display: flex">
1897
+ <div style="color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">段落</div>
1898
+ <svg xmlns="http://www.w3.org/2000/svg" width="9" height="5" viewBox="0 0 9 5" fill="none">
1899
+ <path d="M8 1L4.5 4L1 1" stroke="#393939" stroke-linecap="round" stroke-linejoin="round" />
1900
+ </svg>
1901
+ </div>
1902
+ <div style="width: 0px; height: 16px; border-radius: 1px; border: 1px #8D8D8D solid"></div>
1903
+ <div style="justify-content: flex-start; align-items: center; gap: 16px; display: flex">
1904
+ <div style="width: 12px; position: relative">
1905
+ <svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 12 15" fill="none">
1906
+ <path
1907
+ d="M0 2.25C0 1.76602 0.446875 1.375 1 1.375H2.5H3H7C9.20938 1.375 11 2.9418 11 4.875C11 5.73086 10.6469 6.51836 10.0625 7.12539C11.2219 7.73789 12 8.85078 12 10.125C12 12.0582 10.2094 13.625 8 13.625H3H2.5H1C0.446875 13.625 0 13.234 0 12.75C0 12.266 0.446875 11.875 1 11.875H1.5V7.5V3.125H1C0.446875 3.125 0 2.73398 0 2.25ZM7 6.625C8.10312 6.625 9 5.84023 9 4.875C9 3.90977 8.10312 3.125 7 3.125H3.5V6.625H7ZM3.5 8.375V11.875H8C9.10312 11.875 10 11.0902 10 10.125C10 9.15977 9.10312 8.375 8 8.375H7H3.5Z"
1908
+ fill="#393939"
1909
+ />
1910
+ </svg>
1911
+ </div>
1912
+ <div style="width: 12px; position: relative">
1913
+ <svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 12 15" fill="none">
1914
+ <g clip-path="url(#clip0_9874_190584)">
1915
+ <path
1916
+ d="M0.163923 2.25C0.163923 1.76602 0.546959 1.375 1.02107 1.375H3.59249C4.0666 1.375 4.44964 1.76602 4.44964 2.25C4.44964 2.73398 4.0666 3.125 3.59249 3.125H3.16392V6.625C3.16392 8.07422 4.31571 9.25 5.73535 9.25C7.15499 9.25 8.30678 8.07422 8.30678 6.625V3.125H7.87821C7.4041 3.125 7.02107 2.73398 7.02107 2.25C7.02107 1.76602 7.4041 1.375 7.87821 1.375H10.4496C10.9237 1.375 11.3068 1.76602 11.3068 2.25C11.3068 2.73398 10.9237 3.125 10.4496 3.125H10.0211V6.625C10.0211 9.04219 8.10321 11 5.73535 11C3.36749 11 1.44964 9.04219 1.44964 6.625V3.125H1.02107C0.546959 3.125 0.163923 2.73398 0.163923 2.25ZM-0.264648 12.75C-0.264648 12.266 0.118387 11.875 0.592494 11.875H10.8782C11.3523 11.875 11.7354 12.266 11.7354 12.75C11.7354 13.234 11.3523 13.625 10.8782 13.625H0.592494C0.118387 13.625 -0.264648 13.234 -0.264648 12.75Z"
1917
+ fill="#393939"
1918
+ />
1919
+ </g>
1920
+ <defs>
1921
+ <clipPath id="clip0_9874_190584">
1922
+ <rect width="12" height="14" fill="white" transform="translate(0 0.5)" />
1923
+ </clipPath>
1924
+ </defs>
1925
+ </svg>
1926
+ </div>
1927
+ <div style="width: 14px; position: relative">
1928
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
1929
+ <path
1930
+ d="M4.41055 4.43771C4.49805 3.96739 4.79336 3.61466 5.33203 3.38224C5.90898 3.13614 6.74844 3.04591 7.75469 3.2045C8.08008 3.25646 9.08906 3.45333 9.39805 3.53263C9.86563 3.65568 10.3441 3.3795 10.4699 2.91192C10.5957 2.44435 10.3168 1.96583 9.84922 1.84005C9.4582 1.73614 8.38359 1.52833 8.02812 1.47364C6.80586 1.28224 5.61367 1.3588 4.6457 1.77169C3.64766 2.19825 2.88477 2.99669 2.68242 4.1588C2.67969 4.17521 2.67695 4.18888 2.67695 4.20528C2.60039 4.8588 2.69062 5.45216 2.95312 5.97169C3.07617 6.21778 3.23203 6.4338 3.40977 6.62521H0.875C0.391016 6.62521 0 7.01622 0 7.50021C0 7.98419 0.391016 8.37521 0.875 8.37521H13.125C13.609 8.37521 14 7.98419 14 7.50021C14 7.01622 13.609 6.62521 13.125 6.62521H7.38555C7.38281 6.62521 7.37734 6.62247 7.37461 6.62247L7.34453 6.61427C6.36016 6.31896 5.56172 6.07833 5.01484 5.70919C4.76055 5.53693 4.60469 5.36466 4.51719 5.18692C4.43242 5.02013 4.375 4.78771 4.41328 4.43771H4.41055ZM9.54023 9.72052C9.61406 9.89825 9.66055 10.1525 9.59219 10.5436C9.51016 11.0248 9.21484 11.3858 8.66523 11.6209C8.08828 11.867 7.25156 11.9572 6.24531 11.7986C5.75312 11.7193 4.90273 11.4295 4.21094 11.1943C4.05781 11.1424 3.91016 11.0932 3.77617 11.0467C3.3168 10.8936 2.82187 11.1424 2.66875 11.6018C2.51562 12.0611 2.76445 12.5561 3.22383 12.7092C3.32227 12.742 3.43984 12.783 3.57109 12.8268C4.25195 13.0592 5.31016 13.4201 5.96641 13.5268H5.97187C7.19414 13.7182 8.38633 13.6416 9.3543 13.2287C10.3523 12.8022 11.1152 12.0037 11.3176 10.8416C11.416 10.2674 11.3914 9.73693 11.2328 9.25294H9.16289C9.3543 9.40607 9.47461 9.55919 9.54297 9.72325L9.54023 9.72052Z"
1931
+ fill="#393939"
1932
+ />
1933
+ </svg>
1934
+ </div>
1935
+ </div>
1936
+ <div style="width: 0px; height: 16px; border-radius: 1px; border: 1px #8D8D8D solid"></div>
1937
+ <div style="justify-content: flex-start; align-items: center; gap: 8px; display: flex">
1938
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
1939
+ <path
1940
+ d="M9 1.5C9 2.05313 8.55312 2.5 8 2.5H1C0.446875 2.5 0 2.05313 0 1.5C0 0.946875 0.446875 0.5 1 0.5H8C8.55312 0.5 9 0.946875 9 1.5ZM9 9.5C9 10.0531 8.55312 10.5 8 10.5H1C0.446875 10.5 0 10.0531 0 9.5C0 8.94688 0.446875 8.5 1 8.5H8C8.55312 8.5 9 8.94688 9 9.5ZM0 5.5C0 4.94688 0.446875 4.5 1 4.5H13C13.5531 4.5 14 4.94688 14 5.5C14 6.05313 13.5531 6.5 13 6.5H1C0.446875 6.5 0 6.05313 0 5.5ZM14 13.5C14 14.0531 13.5531 14.5 13 14.5H1C0.446875 14.5 0 14.0531 0 13.5C0 12.9469 0.446875 12.5 1 12.5H13C13.5531 12.5 14 12.9469 14 13.5Z"
1941
+ fill="#393939"
1942
+ />
1943
+ </svg>
1944
+ <svg xmlns="http://www.w3.org/2000/svg" width="9" height="5" viewBox="0 0 9 5" fill="none">
1945
+ <path d="M8 1L4.5 4L1 1" stroke="#393939" stroke-linecap="round" stroke-linejoin="round" />
1946
+ </svg>
1947
+ </div>
1948
+ <div style="width: 0px; height: 16px; border-radius: 1px; border: 1px #8D8D8D solid"></div>
1949
+ </div>
1950
+ </div>
1951
+ </div>`;
1952
+ }
1884
1953
  static selectFilter(obj) {
1885
1954
  var _a;
1886
1955
  return html `<select
@@ -2601,7 +2670,12 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
2601
2670
  id: obj.gvc.glitter.getUUID(),
2602
2671
  loading: false,
2603
2672
  };
2604
- return html ` <div class="bg-white shadow ${document.body.clientWidth < 800 ? `` : `rounded-3`}" style="overflow-y: auto; width: calc(100% - ${document.body.clientWidth > 768 ? 70 : 0}px); ${document.body.clientWidth > 768 ? `height: calc(100% - 70px);` : `height:${window.parent.innerHeight}px;`};padding-top:${gvc.glitter.share.top_inset || 0}px;">
2673
+ return html ` <div
2674
+ class="bg-white shadow ${document.body.clientWidth < 800 ? `` : `rounded-3`}"
2675
+ style="overflow-y: auto; width: calc(100% - ${document.body.clientWidth > 768 ? 70 : 0}px); ${document.body.clientWidth > 768
2676
+ ? `height: calc(100% - 70px);`
2677
+ : `height:${window.parent.innerHeight}px;`};padding-top:${gvc.glitter.share.top_inset || 0}px;"
2678
+ >
2605
2679
  ${gvc.bindView({
2606
2680
  bind: vm.id,
2607
2681
  view: () => {
@@ -2718,36 +2792,64 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
2718
2792
  var _a, _b;
2719
2793
  const imageVM = {
2720
2794
  id: obj.gvc.glitter.getUUID(),
2721
- class: Tool.randomString(6),
2722
2795
  loading: true,
2723
2796
  url: this.noImageURL,
2724
2797
  };
2725
- obj.gvc.addStyle(`
2726
- .${imageVM.class} {
2727
- display: flex;
2728
- min-width: ${obj.width}px;
2729
- min-height: ${(_a = obj.height) !== null && _a !== void 0 ? _a : obj.width}px;
2730
- max-width: ${obj.width}px;
2731
- max-height: ${(_b = obj.height) !== null && _b !== void 0 ? _b : obj.width}px;
2732
- }
2733
- `);
2798
+ const wh = `
2799
+ display: flex;
2800
+ min-width: ${obj.width}px;
2801
+ min-height: ${(_a = obj.height) !== null && _a !== void 0 ? _a : obj.width}px;
2802
+ max-width: ${obj.width}px;
2803
+ max-height: ${(_b = obj.height) !== null && _b !== void 0 ? _b : obj.width}px; */
2804
+ width: 100%;
2805
+ height: 100%;
2806
+ object-fit: cover;
2807
+ object-position: center;
2808
+ `;
2734
2809
  return obj.gvc.bindView({
2735
2810
  bind: imageVM.id,
2736
2811
  view: () => {
2737
- var _a, _b, _c, _d;
2738
2812
  if (imageVM.loading) {
2739
- return html ` <div class="${imageVM.class} ${(_a = obj.class) !== null && _a !== void 0 ? _a : ''}" style="${(_b = obj.style) !== null && _b !== void 0 ? _b : ''}">
2740
- ${this.spinner({
2741
- container: { class: 'mt-0' },
2742
- text: { visible: false },
2743
- })}
2744
- </div>`;
2813
+ return obj.gvc.bindView(() => {
2814
+ var _a, _b;
2815
+ return {
2816
+ bind: obj.gvc.glitter.getUUID(),
2817
+ view: () => {
2818
+ return this.spinner({
2819
+ container: { class: 'mt-0' },
2820
+ text: { visible: false },
2821
+ });
2822
+ },
2823
+ divCreate: {
2824
+ style: `${wh}${(_a = obj.style) !== null && _a !== void 0 ? _a : ''}`,
2825
+ class: (_b = obj.class) !== null && _b !== void 0 ? _b : '',
2826
+ },
2827
+ };
2828
+ });
2745
2829
  }
2746
2830
  else {
2747
- return html `<img class="${imageVM.class} ${(_c = obj.class) !== null && _c !== void 0 ? _c : ''}" style="${(_d = obj.style) !== null && _d !== void 0 ? _d : ''}" src="${imageVM.url}" />`;
2831
+ return obj.gvc.bindView(() => {
2832
+ var _a, _b;
2833
+ return {
2834
+ bind: obj.gvc.glitter.getUUID(),
2835
+ view: () => {
2836
+ return '';
2837
+ },
2838
+ divCreate: {
2839
+ elem: 'img',
2840
+ style: `${wh}${(_a = obj.style) !== null && _a !== void 0 ? _a : ''}`,
2841
+ class: (_b = obj.class) !== null && _b !== void 0 ? _b : '',
2842
+ option: [
2843
+ {
2844
+ key: 'src',
2845
+ value: imageVM.url,
2846
+ },
2847
+ ],
2848
+ },
2849
+ };
2850
+ });
2748
2851
  }
2749
2852
  },
2750
- divCreate: {},
2751
2853
  onCreate: () => {
2752
2854
  if (imageVM.loading) {
2753
2855
  this.isImageUrlValid(obj.image).then((isValid) => {
@@ -1596,7 +1596,7 @@ ${obj.default ?? ''}</textarea
1596
1596
  )}
1597
1597
  </div>`;
1598
1598
  } catch (e) {
1599
- console.log(e);
1599
+ console.error(e);
1600
1600
  return `${e}`;
1601
1601
  }
1602
1602
  },
@@ -1611,7 +1611,6 @@ ${obj.default ?? ''}</textarea
1611
1611
  timer++;
1612
1612
  if (created.header) {
1613
1613
  const checkbox = obj.filter.length > 0;
1614
- console.log(`query==>`, ids.tr);
1615
1614
  const tr = gvc.glitter.document.querySelector(`.${ids.tr}`) as HTMLElement;
1616
1615
 
1617
1616
  tr?.querySelectorAll('td').forEach((td: any, index: number) => {
@@ -2246,6 +2245,77 @@ ${obj.default ?? ''}</textarea
2246
2245
  });
2247
2246
  }
2248
2247
 
2248
+ static richTextView(text: string) {
2249
+ return html`<div style="width: 100%; height: 150px; position: relative; background: white; border-radius: 10px; overflow: hidden; border: 1px #DDDDDD solid">
2250
+ <div
2251
+ style="left: 18px; right: 18px; top: 59px; position: absolute; color: ${text.length > 0
2252
+ ? '#393939'
2253
+ : '#8D8D8D'}; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
2254
+ >
2255
+ ${text.length > 0 ? text : '點擊填寫商品描述及說明'}
2256
+ </div>
2257
+ <div
2258
+ style="width: 100%; padding-top: 10px; padding-bottom: 10px; padding-left: 18px; padding-right: 18px; left: 0px; top: 0px; position: absolute; background: white; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; border-bottom: 1px #DDDDDD solid; justify-content: flex-start; align-items: center; display: inline-flex"
2259
+ >
2260
+ <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 24px; display: inline-flex">
2261
+ <div style="justify-content: flex-start; align-items: center; gap: 44px; display: flex">
2262
+ <div style="color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">段落</div>
2263
+ <svg xmlns="http://www.w3.org/2000/svg" width="9" height="5" viewBox="0 0 9 5" fill="none">
2264
+ <path d="M8 1L4.5 4L1 1" stroke="#393939" stroke-linecap="round" stroke-linejoin="round" />
2265
+ </svg>
2266
+ </div>
2267
+ <div style="width: 0px; height: 16px; border-radius: 1px; border: 1px #8D8D8D solid"></div>
2268
+ <div style="justify-content: flex-start; align-items: center; gap: 16px; display: flex">
2269
+ <div style="width: 12px; position: relative">
2270
+ <svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 12 15" fill="none">
2271
+ <path
2272
+ d="M0 2.25C0 1.76602 0.446875 1.375 1 1.375H2.5H3H7C9.20938 1.375 11 2.9418 11 4.875C11 5.73086 10.6469 6.51836 10.0625 7.12539C11.2219 7.73789 12 8.85078 12 10.125C12 12.0582 10.2094 13.625 8 13.625H3H2.5H1C0.446875 13.625 0 13.234 0 12.75C0 12.266 0.446875 11.875 1 11.875H1.5V7.5V3.125H1C0.446875 3.125 0 2.73398 0 2.25ZM7 6.625C8.10312 6.625 9 5.84023 9 4.875C9 3.90977 8.10312 3.125 7 3.125H3.5V6.625H7ZM3.5 8.375V11.875H8C9.10312 11.875 10 11.0902 10 10.125C10 9.15977 9.10312 8.375 8 8.375H7H3.5Z"
2273
+ fill="#393939"
2274
+ />
2275
+ </svg>
2276
+ </div>
2277
+ <div style="width: 12px; position: relative">
2278
+ <svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 12 15" fill="none">
2279
+ <g clip-path="url(#clip0_9874_190584)">
2280
+ <path
2281
+ d="M0.163923 2.25C0.163923 1.76602 0.546959 1.375 1.02107 1.375H3.59249C4.0666 1.375 4.44964 1.76602 4.44964 2.25C4.44964 2.73398 4.0666 3.125 3.59249 3.125H3.16392V6.625C3.16392 8.07422 4.31571 9.25 5.73535 9.25C7.15499 9.25 8.30678 8.07422 8.30678 6.625V3.125H7.87821C7.4041 3.125 7.02107 2.73398 7.02107 2.25C7.02107 1.76602 7.4041 1.375 7.87821 1.375H10.4496C10.9237 1.375 11.3068 1.76602 11.3068 2.25C11.3068 2.73398 10.9237 3.125 10.4496 3.125H10.0211V6.625C10.0211 9.04219 8.10321 11 5.73535 11C3.36749 11 1.44964 9.04219 1.44964 6.625V3.125H1.02107C0.546959 3.125 0.163923 2.73398 0.163923 2.25ZM-0.264648 12.75C-0.264648 12.266 0.118387 11.875 0.592494 11.875H10.8782C11.3523 11.875 11.7354 12.266 11.7354 12.75C11.7354 13.234 11.3523 13.625 10.8782 13.625H0.592494C0.118387 13.625 -0.264648 13.234 -0.264648 12.75Z"
2282
+ fill="#393939"
2283
+ />
2284
+ </g>
2285
+ <defs>
2286
+ <clipPath id="clip0_9874_190584">
2287
+ <rect width="12" height="14" fill="white" transform="translate(0 0.5)" />
2288
+ </clipPath>
2289
+ </defs>
2290
+ </svg>
2291
+ </div>
2292
+ <div style="width: 14px; position: relative">
2293
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
2294
+ <path
2295
+ d="M4.41055 4.43771C4.49805 3.96739 4.79336 3.61466 5.33203 3.38224C5.90898 3.13614 6.74844 3.04591 7.75469 3.2045C8.08008 3.25646 9.08906 3.45333 9.39805 3.53263C9.86563 3.65568 10.3441 3.3795 10.4699 2.91192C10.5957 2.44435 10.3168 1.96583 9.84922 1.84005C9.4582 1.73614 8.38359 1.52833 8.02812 1.47364C6.80586 1.28224 5.61367 1.3588 4.6457 1.77169C3.64766 2.19825 2.88477 2.99669 2.68242 4.1588C2.67969 4.17521 2.67695 4.18888 2.67695 4.20528C2.60039 4.8588 2.69062 5.45216 2.95312 5.97169C3.07617 6.21778 3.23203 6.4338 3.40977 6.62521H0.875C0.391016 6.62521 0 7.01622 0 7.50021C0 7.98419 0.391016 8.37521 0.875 8.37521H13.125C13.609 8.37521 14 7.98419 14 7.50021C14 7.01622 13.609 6.62521 13.125 6.62521H7.38555C7.38281 6.62521 7.37734 6.62247 7.37461 6.62247L7.34453 6.61427C6.36016 6.31896 5.56172 6.07833 5.01484 5.70919C4.76055 5.53693 4.60469 5.36466 4.51719 5.18692C4.43242 5.02013 4.375 4.78771 4.41328 4.43771H4.41055ZM9.54023 9.72052C9.61406 9.89825 9.66055 10.1525 9.59219 10.5436C9.51016 11.0248 9.21484 11.3858 8.66523 11.6209C8.08828 11.867 7.25156 11.9572 6.24531 11.7986C5.75312 11.7193 4.90273 11.4295 4.21094 11.1943C4.05781 11.1424 3.91016 11.0932 3.77617 11.0467C3.3168 10.8936 2.82187 11.1424 2.66875 11.6018C2.51562 12.0611 2.76445 12.5561 3.22383 12.7092C3.32227 12.742 3.43984 12.783 3.57109 12.8268C4.25195 13.0592 5.31016 13.4201 5.96641 13.5268H5.97187C7.19414 13.7182 8.38633 13.6416 9.3543 13.2287C10.3523 12.8022 11.1152 12.0037 11.3176 10.8416C11.416 10.2674 11.3914 9.73693 11.2328 9.25294H9.16289C9.3543 9.40607 9.47461 9.55919 9.54297 9.72325L9.54023 9.72052Z"
2296
+ fill="#393939"
2297
+ />
2298
+ </svg>
2299
+ </div>
2300
+ </div>
2301
+ <div style="width: 0px; height: 16px; border-radius: 1px; border: 1px #8D8D8D solid"></div>
2302
+ <div style="justify-content: flex-start; align-items: center; gap: 8px; display: flex">
2303
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
2304
+ <path
2305
+ d="M9 1.5C9 2.05313 8.55312 2.5 8 2.5H1C0.446875 2.5 0 2.05313 0 1.5C0 0.946875 0.446875 0.5 1 0.5H8C8.55312 0.5 9 0.946875 9 1.5ZM9 9.5C9 10.0531 8.55312 10.5 8 10.5H1C0.446875 10.5 0 10.0531 0 9.5C0 8.94688 0.446875 8.5 1 8.5H8C8.55312 8.5 9 8.94688 9 9.5ZM0 5.5C0 4.94688 0.446875 4.5 1 4.5H13C13.5531 4.5 14 4.94688 14 5.5C14 6.05313 13.5531 6.5 13 6.5H1C0.446875 6.5 0 6.05313 0 5.5ZM14 13.5C14 14.0531 13.5531 14.5 13 14.5H1C0.446875 14.5 0 14.0531 0 13.5C0 12.9469 0.446875 12.5 1 12.5H13C13.5531 12.5 14 12.9469 14 13.5Z"
2306
+ fill="#393939"
2307
+ />
2308
+ </svg>
2309
+ <svg xmlns="http://www.w3.org/2000/svg" width="9" height="5" viewBox="0 0 9 5" fill="none">
2310
+ <path d="M8 1L4.5 4L1 1" stroke="#393939" stroke-linecap="round" stroke-linejoin="round" />
2311
+ </svg>
2312
+ </div>
2313
+ <div style="width: 0px; height: 16px; border-radius: 1px; border: 1px #8D8D8D solid"></div>
2314
+ </div>
2315
+ </div>
2316
+ </div>`;
2317
+ }
2318
+
2249
2319
  // 視窗
2250
2320
  static selectFilter(obj: { gvc: GVC; callback: (value: any) => void; default: string; options: OptionsItem[]; style?: string }) {
2251
2321
  return html`<select
@@ -3067,7 +3137,12 @@ ${obj.default ?? ''}</textarea
3067
3137
  loading: false,
3068
3138
  };
3069
3139
 
3070
- return html` <div class="bg-white shadow ${document.body.clientWidth<800 ? ``:`rounded-3`}" style="overflow-y: auto; width: calc(100% - ${document.body.clientWidth > 768 ? 70 : 0}px); ${document.body.clientWidth > 768 ? `height: calc(100% - 70px);`:`height:${(window.parent as any).innerHeight}px;`};padding-top:${gvc.glitter.share.top_inset || 0}px;">
3140
+ return html` <div
3141
+ class="bg-white shadow ${document.body.clientWidth < 800 ? `` : `rounded-3`}"
3142
+ style="overflow-y: auto; width: calc(100% - ${document.body.clientWidth > 768 ? 70 : 0}px); ${document.body.clientWidth > 768
3143
+ ? `height: calc(100% - 70px);`
3144
+ : `height:${(window.parent as any).innerHeight}px;`};padding-top:${gvc.glitter.share.top_inset || 0}px;"
3145
+ >
3071
3146
  ${gvc.bindView({
3072
3147
  bind: vm.id,
3073
3148
  view: () => {
@@ -3194,34 +3269,61 @@ ${obj.default ?? ''}</textarea
3194
3269
  static validImageBox(obj: { gvc: GVC; image: string; width: number; height?: number; class?: string; style?: string }) {
3195
3270
  const imageVM = {
3196
3271
  id: obj.gvc.glitter.getUUID(),
3197
- class: Tool.randomString(6),
3198
3272
  loading: true,
3199
3273
  url: this.noImageURL,
3200
3274
  };
3201
- obj.gvc.addStyle(`
3202
- .${imageVM.class} {
3203
- display: flex;
3204
- min-width: ${obj.width}px;
3205
- min-height: ${obj.height ?? obj.width}px;
3206
- max-width: ${obj.width}px;
3207
- max-height: ${obj.height ?? obj.width}px;
3208
- }
3209
- `);
3275
+ const wh = `
3276
+ display: flex;
3277
+ min-width: ${obj.width}px;
3278
+ min-height: ${obj.height ?? obj.width}px;
3279
+ max-width: ${obj.width}px;
3280
+ max-height: ${obj.height ?? obj.width}px; */
3281
+ width: 100%;
3282
+ height: 100%;
3283
+ object-fit: cover;
3284
+ object-position: center;
3285
+ `;
3210
3286
  return obj.gvc.bindView({
3211
3287
  bind: imageVM.id,
3212
3288
  view: () => {
3213
3289
  if (imageVM.loading) {
3214
- return html` <div class="${imageVM.class} ${obj.class ?? ''}" style="${obj.style ?? ''}">
3215
- ${this.spinner({
3216
- container: { class: 'mt-0' },
3217
- text: { visible: false },
3218
- })}
3219
- </div>`;
3290
+ return obj.gvc.bindView(() => {
3291
+ return {
3292
+ bind: obj.gvc.glitter.getUUID(),
3293
+ view: () => {
3294
+ return this.spinner({
3295
+ container: { class: 'mt-0' },
3296
+ text: { visible: false },
3297
+ });
3298
+ },
3299
+ divCreate: {
3300
+ style: `${wh}${obj.style ?? ''}`,
3301
+ class: obj.class ?? '',
3302
+ },
3303
+ };
3304
+ });
3220
3305
  } else {
3221
- return html`<img class="${imageVM.class} ${obj.class ?? ''}" style="${obj.style ?? ''}" src="${imageVM.url}" />`;
3306
+ return obj.gvc.bindView(() => {
3307
+ return {
3308
+ bind: obj.gvc.glitter.getUUID(),
3309
+ view: () => {
3310
+ return '';
3311
+ },
3312
+ divCreate: {
3313
+ elem: 'img',
3314
+ style: `${wh}${obj.style ?? ''}`,
3315
+ class: obj.class ?? '',
3316
+ option: [
3317
+ {
3318
+ key: 'src',
3319
+ value: imageVM.url,
3320
+ },
3321
+ ],
3322
+ },
3323
+ };
3324
+ });
3222
3325
  }
3223
3326
  },
3224
- divCreate: {},
3225
3327
  onCreate: () => {
3226
3328
  if (imageVM.loading) {
3227
3329
  this.isImageUrlValid(obj.image).then((isValid) => {
@@ -366,9 +366,6 @@ class Excel {
366
366
  }
367
367
  export class ShoppingProductSetting {
368
368
  static main(gvc, type = 'product') {
369
- window.parent.glitter.share.checkData = () => {
370
- return false;
371
- };
372
369
  const html = String.raw;
373
370
  const glitter = gvc.glitter;
374
371
  const vm = {
@@ -2260,7 +2257,7 @@ export class ShoppingProductSetting {
2260
2257
  bind: id,
2261
2258
  view: () => {
2262
2259
  return html `<div
2263
- class="d-flex justify-content-between align-items-center gap-3 px-2 mb-1"
2260
+ class="d-flex justify-content-between align-items-center gap-3 mb-1"
2264
2261
  style="cursor: pointer;"
2265
2262
  onclick="${gvc.event(() => {
2266
2263
  const originContent = `${postMD.content}`;
@@ -2275,11 +2272,18 @@ export class ShoppingProductSetting {
2275
2272
  setHeight: '100vh',
2276
2273
  hiddenBorder: true,
2277
2274
  insertImageEvent: (editor) => {
2275
+ const mark = `{{${Tool.randomString(8)}}}`;
2276
+ editor.selection.setAtEnd(editor.$el.get(0));
2277
+ editor.html.insert(mark);
2278
+ editor.undo.saveStep();
2278
2279
  imageLibrary.selectImageLibrary(gvc, (urlArray) => {
2279
2280
  if (urlArray.length > 0) {
2280
- for (const url of urlArray) {
2281
- editor.html.insert(html `<img src="${url.data}" />`);
2282
- }
2281
+ const imgHTML = urlArray
2282
+ .map((url) => {
2283
+ return html `<img src="${url.data}" />`;
2284
+ })
2285
+ .join('');
2286
+ editor.html.set(editor.html.get(0).replace(mark, imgHTML));
2283
2287
  editor.undo.saveStep();
2284
2288
  }
2285
2289
  else {
@@ -2291,11 +2295,18 @@ export class ShoppingProductSetting {
2291
2295
  style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;"
2292
2296
  >
2293
2297
  圖片庫
2294
- </div>`, { mul: true });
2298
+ </div>`, {
2299
+ mul: true,
2300
+ cancelEvent: () => {
2301
+ editor.html.set(editor.html.get(0).replace(mark, ''));
2302
+ editor.undo.saveStep();
2303
+ },
2304
+ });
2295
2305
  },
2296
2306
  callback: (text) => {
2297
2307
  postMD.content = text;
2298
2308
  },
2309
+ rich_height: `calc(${window.parent.innerHeight}px - 70px - 58px - 49px - 64px - 40px)`
2299
2310
  })}
2300
2311
  </div>`;
2301
2312
  },
@@ -2317,13 +2328,10 @@ export class ShoppingProductSetting {
2317
2328
  });
2318
2329
  })}"
2319
2330
  >
2320
- <div style="word-break: break-all;">
2321
- ${Tool.truncateString((() => {
2331
+ ${(() => {
2322
2332
  const text = gvc.glitter.utText.removeTag(postMD.content);
2323
- return text.length > 0 ? text : '點擊填寫商品描述';
2324
- })(), 40)}
2325
- </div>
2326
- <i class="fa-solid fa-angle-right" style="font-size: 1.25rem; font-weight: 700;"></i>
2333
+ return BgWidget.richTextView(Tool.truncateString(text, 100));
2334
+ })()}
2327
2335
  </div>`;
2328
2336
  },
2329
2337
  };
@@ -443,9 +443,6 @@ class Excel {
443
443
 
444
444
  export class ShoppingProductSetting {
445
445
  public static main(gvc: GVC, type: 'product' | 'addProduct' | 'giveaway' | 'hidden' = 'product') {
446
- (window.parent as any).glitter.share.checkData=()=>{
447
- return false
448
- }
449
446
  const html = String.raw;
450
447
  const glitter = gvc.glitter;
451
448
 
@@ -2210,10 +2207,10 @@ export class ShoppingProductSetting {
2210
2207
  } else {
2211
2208
  obj.vm.replaceData = postMD;
2212
2209
  }
2213
- const origin_data=JSON.stringify(postMD);
2214
- (window.parent as any).glitter.share.checkData=()=>{
2215
- return origin_data===JSON.stringify(postMD)
2216
- }
2210
+ const origin_data = JSON.stringify(postMD);
2211
+ (window.parent as any).glitter.share.checkData = () => {
2212
+ return origin_data === JSON.stringify(postMD);
2213
+ };
2217
2214
  const html = String.raw;
2218
2215
  const gvc = obj.gvc;
2219
2216
  const seoID = gvc.glitter.getUUID();
@@ -2660,7 +2657,7 @@ export class ShoppingProductSetting {
2660
2657
  bind: id,
2661
2658
  view: () => {
2662
2659
  return html`<div
2663
- class="d-flex justify-content-between align-items-center gap-3 px-2 mb-1"
2660
+ class="d-flex justify-content-between align-items-center gap-3 mb-1"
2664
2661
  style="cursor: pointer;"
2665
2662
  onclick="${gvc.event(() => {
2666
2663
  const originContent = `${postMD.content}`;
@@ -2675,13 +2672,21 @@ export class ShoppingProductSetting {
2675
2672
  setHeight: '100vh',
2676
2673
  hiddenBorder: true,
2677
2674
  insertImageEvent: (editor) => {
2675
+ const mark = `{{${Tool.randomString(8)}}}`;
2676
+ editor.selection.setAtEnd(editor.$el.get(0));
2677
+ editor.html.insert(mark);
2678
+ editor.undo.saveStep();
2679
+
2678
2680
  imageLibrary.selectImageLibrary(
2679
2681
  gvc,
2680
2682
  (urlArray) => {
2681
2683
  if (urlArray.length > 0) {
2682
- for (const url of urlArray) {
2683
- editor.html.insert(html`<img src="${url.data}" />`);
2684
- }
2684
+ const imgHTML = urlArray
2685
+ .map((url) => {
2686
+ return html`<img src="${url.data}" />`;
2687
+ })
2688
+ .join('');
2689
+ editor.html.set(editor.html.get(0).replace(mark, imgHTML));
2685
2690
  editor.undo.saveStep();
2686
2691
  } else {
2687
2692
  const dialog = new ShareDialog(gvc.glitter);
@@ -2694,12 +2699,19 @@ export class ShoppingProductSetting {
2694
2699
  >
2695
2700
  圖片庫
2696
2701
  </div>`,
2697
- { mul: true }
2702
+ {
2703
+ mul: true,
2704
+ cancelEvent: () => {
2705
+ editor.html.set(editor.html.get(0).replace(mark, ''));
2706
+ editor.undo.saveStep();
2707
+ },
2708
+ }
2698
2709
  );
2699
2710
  },
2700
2711
  callback: (text) => {
2701
2712
  postMD.content = text;
2702
2713
  },
2714
+ rich_height: `calc(${(window.parent as any).innerHeight}px - 70px - 58px - 49px - 64px - 40px)`
2703
2715
  })}
2704
2716
  </div>`;
2705
2717
  },
@@ -2725,16 +2737,10 @@ export class ShoppingProductSetting {
2725
2737
  });
2726
2738
  })}"
2727
2739
  >
2728
- <div style="word-break: break-all;">
2729
- ${Tool.truncateString(
2730
- (() => {
2731
- const text = gvc.glitter.utText.removeTag(postMD.content);
2732
- return text.length > 0 ? text : '點擊填寫商品描述';
2733
- })(),
2734
- 40
2735
- )}
2736
- </div>
2737
- <i class="fa-solid fa-angle-right" style="font-size: 1.25rem; font-weight: 700;"></i>
2740
+ ${(() => {
2741
+ const text = gvc.glitter.utText.removeTag(postMD.content);
2742
+ return BgWidget.richTextView(Tool.truncateString(text, 100));
2743
+ })()}
2738
2744
  </div>`;
2739
2745
  },
2740
2746
  };