ts-glitter 20.7.4 → 20.7.6

package/lowcode/backend-manager/bg-widget.js

@@ -142,14 +142,14 @@ export class BgWidget {
     }
     static disableButton(text, obj) {
         var _a;
-        return html ` <button class="btn btn-gray-disable" style="" type="button">
+        return html ` <button class="btn btn-gray-disable" type="button">
       <i class="${obj && obj.icon && obj.icon.length > 0 ? obj.icon : 'd-none'}" style="color: #393939"></i>
       ${text.length > 0 ? html `<span class="tx_700" style="${(_a = obj === null || obj === void 0 ? void 0 : obj.textStyle) !== null && _a !== void 0 ? _a : ''}">${text}</span>` : ''}
     </button>`;
     }
     static grayButton(text, event, obj) {
         var _a;
-        return html ` <button class="btn btn-gray ${(obj === null || obj === void 0 ? void 0 : obj.class) || ''}" style="" type="button" onclick="${event}">
+        return html ` <button class="btn btn-gray ${(obj === null || obj === void 0 ? void 0 : obj.class) || ''}" type="button" onclick="${event}">
       <i class="${obj && obj.icon && obj.icon.length > 0 ? obj.icon : 'd-none'}" style="color: #393939"></i>
       ${text.length > 0 ? html `<span class="tx_700" style="${(_a = obj === null || obj === void 0 ? void 0 : obj.textStyle) !== null && _a !== void 0 ? _a : ''}">${text}</span>` : ''}
     </button>`;
@@ -241,7 +241,6 @@ export class BgWidget {
       ></i>
       <div class="w-100 d-none" style="position: absolute;left: 0;top: 100%;z-index:2;">
         <div
-          class=""
           style="height: 100vh;width: 100vw;position: fixed;left: 0;top: 0;z-index:3;"
           onclick="${gvc.event(e => {
             if (e.parentElement) {
@@ -525,15 +524,16 @@ export class BgWidget {
                     gvc.notifyDataChange('editDialog');
                 };
                 reload();
-                return `<div class="${vm.edit_mode ? `m-n3` : `m-n2`}">${gvc.bindView({
+                return html `<div class="${vm.edit_mode ? `m-n3` : `m-n2`}">
+          ${gvc.bindView({
                     bind: 'editDialog',
                     view: () => __awaiter(this, void 0, void 0, function* () {
                         reload = () => {
                             gvc.recreateView();
                         };
                         return html `
-              <div class="d-flex flex-column" style="left: 0;top:0;background-color: white;z-index:1;">
-                ${BgWidget.tableV3({
+                <div class="d-flex flex-column" style="left: 0;top:0;background-color: white;z-index:1;">
+                  ${BgWidget.tableV3({
                             gvc: gvc,
                             getData: vmi => {
                                 if (!vm.loading) {
@@ -545,32 +545,32 @@ export class BgWidget {
                                                     : {
                                                         key: '',
                                                         value: html `
-                                    <div
-                                      class="w-100"
-                                      style="justify-content: center; align-items: center; gap: 4px; display: flex;color: #3366BB;cursor: pointer;"
-                                      data-bs-toggle="dropdown"
-                                      aria-haspopup="true"
-                                      aria-expanded="false"
-                                      onclick="${gvc.event(() => {
+                                      <div
+                                        class="w-100"
+                                        style="justify-content: center; align-items: center; gap: 4px; display: flex;color: #3366BB;cursor: pointer;"
+                                        data-bs-toggle="dropdown"
+                                        aria-haspopup="true"
+                                        aria-expanded="false"
+                                        onclick="${gvc.event(() => {
                                                             obj.callback(dd.tag);
                                                             gvc.closeDialog();
                                                         })}"
-                                    >
-                                      <div
-                                        style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
                                       >
-                                        選擇
+                                        <div
+                                          style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                                        >
+                                          選擇
+                                        </div>
                                       </div>
-                                    </div>
-                                  `,
+                                    `,
                                                     },
                                                 {
                                                     key: '標籤',
                                                     value: html ` <div
-                                class="d-flex flex-shrink-0"
-                                style="width:${elementLength}px;font-size: 16px;font-style: normal;font-weight: 700;"
-                              >
-                                ${BgWidget.editeInput({
+                                  class="d-flex flex-shrink-0"
+                                  style="width:${elementLength}px;font-size: 16px;font-style: normal;font-weight: 700;"
+                                >
+                                  ${BgWidget.editeInput({
                                                         gvc: gvc,
                                                         title: ``,
                                                         placeHolder: '請輸入標籤',
@@ -581,16 +581,16 @@ export class BgWidget {
                                                         default: dd.tag || '',
                                                         readonly: !vm.edit_mode,
                                                     })}
-                              </div>`,
+                                </div>`,
                                                 },
                                                 ...Language.languageSupport().map(d1 => {
                                                     return {
                                                         key: d1.value,
                                                         value: html ` <div
-                                  class="d-flex flex-shrink-0"
-                                  style="width:${elementLength}px;font-size: 16px;font-style: normal;font-weight: 700;"
-                                >
-                                  ${BgWidget.editeInput({
+                                    class="d-flex flex-shrink-0"
+                                    style="width:${elementLength}px;font-size: 16px;font-style: normal;font-weight: 700;"
+                                  >
+                                    ${BgWidget.editeInput({
                                                             gvc: gvc,
                                                             title: ``,
                                                             placeHolder: '請輸入內文',
@@ -601,7 +601,7 @@ export class BgWidget {
                                                             default: dd[d1.key] || '',
                                                             readonly: !vm.edit_mode,
                                                         })}
-                                </div>`,
+                                  </div>`,
                                                     };
                                                 }),
                                             ].filter(dd => {
@@ -639,12 +639,11 @@ export class BgWidget {
                                 ]
                                 : [],
                         })}
-              </div>
-            `;
+                </div>
+              `;
                     }),
-                    divCreate: {},
-                    onCreate: () => { },
-                })}</div>`;
+                })}
+        </div>`;
             },
             footer_html: (gvc) => {
                 if (vm.edit_mode) {
@@ -898,13 +897,20 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
             componentFresh();
         };
         obj.gvc.addStyle(`
-            #${dropMenu.elementClass} {
-                font-size: 14px;
-                margin-top: 8px;
-                white-space: normal;
-                word-break: break-all;
-            }
-        `);
+      #${dropMenu.elementClass} {
+        font-size: 14px;
+        margin-top: 8px;
+        white-space: normal;
+        word-break: break-all;
+      }
+      .tag-icon-bgr {
+        width: 25px;
+        height: 25px;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+    `);
         return obj.gvc.bindView({
             bind: vm.id,
             view: () => {
@@ -922,7 +928,9 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                             if (linkComp.loading) {
                                 return html ` <div
                       class="bgw-input border rounded-3"
-                      style="${linkComp.text.length > 0 ? '' : 'padding: 9.5px 12px;'} ${(_a = obj.style) !== null && _a !== void 0 ? _a : ''}"
+                      style="${linkComp.text.length > 0
+                                    ? 'padding: 8px 18px; height: 41.75px'
+                                    : 'padding: 9.5px 12px;'} ${(_a = obj.style) !== null && _a !== void 0 ? _a : ''}"
                       id="${dropMenu.elementClass}"
                       onclick="${obj.gvc.event(() => {
                                     componentFresh();
@@ -969,42 +977,39 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                     `;
                             }
                         },
-                        divCreate: {},
-                        onCreate: () => { },
                     })}
               ${obj.gvc.bindView({
                         bind: dropMenu.id,
-                        view: () => {
+                        view: () => __awaiter(this, void 0, void 0, function* () {
                             if (dropMenu.loading) {
                                 return '';
                             }
                             else {
-                                let h1 = '';
-                                if (dropMenu.prevList.length > 0) {
-                                    h1 += html ` <div
-                          class="m-3 cursor_pointer"
-                          style="font-size: 16px; font-weight: 500; gap: 6px; line-height: 140%;"
-                          onclick=${obj.gvc.event(() => {
+                                const barHTML = dropMenu.prevList.length > 0
+                                    ? html ` <div
+                              class="m-3 cursor_pointer"
+                              style="font-size: 16px; font-weight: 500; gap: 6px; line-height: 140%;"
+                              onclick=${obj.gvc.event(() => {
                                         dataList = dropMenu.prevList[dropMenu.prevList.length - 1];
                                         dropMenu.prevList.pop();
                                         dropMenu.recentParent.pop();
                                         dropMenu.search = '';
                                         obj.gvc.notifyDataChange(dropMenu.id);
                                     })}
-                        >
-                          <i class="fa-solid fa-chevron-left me-2 hoverF2"></i>
-                          <span>${dropMenu.recentParent[dropMenu.recentParent.length - 1]}</span>
-                        </div>
-                        <input
-                          class="form-control m-2"
-                          style="width: 92%"
-                          type="text"
-                          placeholder="搜尋"
-                          onchange="${obj.gvc.event(e => {
+                            >
+                              <i class="fa-solid fa-chevron-left me-2 hoverF2"></i>
+                              <span>${dropMenu.recentParent[dropMenu.recentParent.length - 1]}</span>
+                            </div>
+                            <input
+                              class="form-control m-2"
+                              style="width: calc(100% - 16.875px)"
+                              type="text"
+                              placeholder="搜尋"
+                              onchange="${obj.gvc.event(e => {
                                         dropMenu.search = e.value;
                                         obj.gvc.notifyDataChange(dropMenu.id);
                                     })}"
-                          oninput="${obj.gvc.event(e => {
+                              oninput="${obj.gvc.event(e => {
                                         if (obj.pattern) {
                                             const value = e.value;
                                             const regex = new RegExp(`[^${obj.pattern}]`, 'g');
@@ -1014,78 +1019,122 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                                             }
                                         }
                                     })}"
-                          value="${dropMenu.search}"
-                        />`;
+                              value="${dropMenu.search}"
+                            />`
+                                    : '';
+                                function getProductHTML() {
+                                    return BgWidget.tableV3({
+                                        gvc: obj.gvc,
+                                        getData: vmi => {
+                                            const limit = 10;
+                                            ApiShop.getProduct({
+                                                page: vmi.page - 1,
+                                                limit: limit,
+                                                search: dropMenu.search.trim(),
+                                                searchType: 'title',
+                                                status: 'inRange',
+                                            }).then(data => {
+                                                dataList = (data.response.data || []).map((item) => {
+                                                    const { id, title, preview_image } = item.content;
+                                                    const icon = preview_image && preview_image[0] ? preview_image[0] : '';
+                                                    return {
+                                                        name: title,
+                                                        icon: icon,
+                                                        link: `/products?product_id=${id}`,
+                                                    };
+                                                });
+                                                vmi.tableData = dataList.map(item => {
+                                                    return [
+                                                        {
+                                                            key: '商品名稱',
+                                                            value: html ` <div class="d-flex align-items-center" style="line-height: 32px;">
+                                    ${BgWidget.validImageBox({
+                                                                gvc: obj.gvc,
+                                                                image: item.icon,
+                                                                width: 32,
+                                                                class: 'rounded border me-2',
+                                                            })}
+                                    <div class="d-flex flex-column">
+                                      <div>${Tool.truncateString(item.name)}</div>
+                                    </div>
+                                  </div>`,
+                                                        },
+                                                    ];
+                                                });
+                                                vmi.pageSize = Math.ceil(data.response.total / limit);
+                                                vmi.originalData = data.response.data;
+                                                vmi.loading = false;
+                                                vmi.callback();
+                                            });
+                                        },
+                                        rowClick: (_, index) => {
+                                            callbackEvent(dataList[index]);
+                                        },
+                                        filter: [],
+                                    });
                                 }
-                                let h2 = '';
-                                dataList
-                                    .filter(tag => {
-                                    return tag.name.includes(dropMenu.search);
-                                })
-                                    .map(tag => {
-                                    h2 += html `
-                          <div
-                            class="m-2"
-                            style="cursor:pointer;display: flex; align-items: center; justify-content: space-between;"
-                          >
+                                function getDataListHTML() {
+                                    return dataList
+                                        .filter(tag => {
+                                        return tag.name.includes(dropMenu.search);
+                                    })
+                                        .map(tag => {
+                                        return html `
                             <div
-                              class="w-100 p-1 link-item-container hoverF2 cursor_pointer text-wrap"
-                              onclick=${obj.gvc.event(() => {
-                                        if (tag.link && tag.link.length > 0 && !tag.ignoreFirst) {
-                                            callbackEvent(tag);
-                                        }
-                                        else {
+                              class="m-2"
+                              style="cursor:pointer;display: flex; align-items: center; justify-content: space-between;"
+                            >
+                              <div
+                                class="w-100 p-1 link-item-container hoverF2 cursor_pointer text-wrap"
+                                onclick=${obj.gvc.event(() => {
+                                            if (tag.link && tag.link.length > 0 && !tag.ignoreFirst) {
+                                                callbackEvent(tag);
+                                            }
+                                            else {
+                                                dropMenu.prevList.push(dataList);
+                                                dropMenu.recentParent.push(tag.name);
+                                                tag.items && (dataList = tag.items);
+                                                obj.gvc.notifyDataChange(dropMenu.id);
+                                            }
+                                        })}
+                              >
+                                <div
+                                  style="min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;"
+                                >
+                                  ${tag.icon.includes('https://')
+                                            ? html ` <div
+                                        class="tag-icon-bgr"
+                                        style="background-image: url('${tag.icon}');"
+                                      ></div>`
+                                            : html `<i class="${tag.icon.length > 0 ? tag.icon : 'fa-regular fa-image'}"></i>`}
+                                </div>
+                                ${tag.name}
+                              </div>
+                              <div
+                                class="py-1 px-3 hoverF2 ${tag.items && tag.items.length > 0 ? '' : 'd-none'}"
+                                onclick=${obj.gvc.event(() => {
                                             dropMenu.prevList.push(dataList);
                                             dropMenu.recentParent.push(tag.name);
                                             tag.items && (dataList = tag.items);
                                             obj.gvc.notifyDataChange(dropMenu.id);
-                                        }
-                                    })}
-                            >
-                              <div
-                                style="min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;"
+                                        })}
                               >
-                                ${(() => {
-                                        if (tag.icon.includes('https://')) {
-                                            return html ` <div
-                                      style="
-                                                                                width: 25px; height: 25px;
-                                                                                background-image: url('${tag.icon}');
-                                                                                background-position: center;
-                                                                                background-size: cover;
-                                                                                background-repeat: no-repeat;
-                                                                            "
-                                    ></div>`;
-                                        }
-                                        return html `<i
-                                    class="${tag.icon.length > 0 ? tag.icon : 'fa-regular fa-image'}"
-                                  ></i>`;
-                                    })()}
+                                <i class="fa-solid fa-chevron-right cursor_pointer"></i>
                               </div>
-                              ${tag.name}
                             </div>
-                            <div
-                              class="py-1 px-3 hoverF2 ${tag.items && tag.items.length > 0 ? '' : 'd-none'}"
-                              onclick=${obj.gvc.event(() => {
-                                        dropMenu.prevList.push(dataList);
-                                        dropMenu.recentParent.push(tag.name);
-                                        tag.items && (dataList = tag.items);
-                                        obj.gvc.notifyDataChange(dropMenu.id);
-                                    })}
-                            >
-                              <i class="fa-solid fa-chevron-right cursor_pointer"></i>
-                            </div>
-                          </div>
-                        `;
-                                });
+                          `;
+                                    })
+                                        .join('');
+                                }
+                                const listHTML = dropMenu.recentParent[0] === '所有商品' ? getProductHTML() : getDataListHTML();
                                 return html `
                       <div class="border border-2 rounded-2 p-2" style="width: ${dropMenu.elementWidth}px;">
-                        ${h1}
-                        <div style="overflow-y: auto; max-height: 42.5vh;">${h2}</div>
+                        ${barHTML}
+                        <div style="overflow-y: auto; max-height: 42.5vh;">${listHTML}</div>
                       </div>
                     `;
                             }
-                        },
+                        }),
                         divCreate: {
                             style: 'position: absolute; top: 44px; left: 0; z-index: 1; background-color: #fff;',
                         },
@@ -1093,7 +1142,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
             </div>`;
                 }
             },
-            divCreate: {},
             onCreate: () => {
                 if (vm.loading) {
                     const acticleList = [];
@@ -1110,20 +1158,12 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                             });
                         }),
                         new Promise(resolve => {
-                            ApiShop.getProduct({ page: 0, limit: 50000, search: '' }).then((data) => {
-                                if (data.result) {
-                                    (data.response.data || []).map((item) => {
-                                        const { id, title, preview_image } = item.content;
-                                        const icon = preview_image && preview_image[0] ? preview_image[0] : '';
-                                        productList.push({
-                                            name: title,
-                                            icon: icon,
-                                            link: `/products?product_id=${id}`,
-                                        });
-                                    });
-                                    resolve();
-                                }
+                            productList.push({
+                                name: '',
+                                icon: '',
+                                link: `/products?product_id=`,
                             });
+                            resolve();
                         }),
                         new Promise(resolve => {
                             Article.get({
@@ -1517,12 +1557,12 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                 divCreate: {
                     class: `card`,
                     style: `
-                        width: 100%;
-                        overflow: hidden;
-                        border-radius: 10px;
-                        background: #fff;
-                        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
-                    `,
+            width: 100%;
+            overflow: hidden;
+            border-radius: 10px;
+            background: #fff;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
+          `,
                 },
                 onCreate: () => {
                     if (vm.loading) {
@@ -1649,7 +1689,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
             </div>`;
                     }
                 },
-                divCreate: {},
                 onCreate: () => {
                     if (vm.loading) {
                         getData();
@@ -1682,7 +1721,7 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
             table: false,
         };
         gvc.addStyle(`
-      .tb_v3 {
+      .tb-v3 {
         text-align: left !important;
         padding-right: 0.25rem !important;
         padding-left: 0.25rem !important;
@@ -1694,6 +1733,33 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
         font-size: 24px;
         font-weight: 700;
       }
+      .td-tooltip {
+        position: absolute;
+        top: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #333;
+        color: white;
+        padding: 8px 12px;
+        border-radius: 4px;
+        font-size: 14px;
+        white-space: nowrap;
+        visibility: hidden;
+        opacity: 0;
+        transition:
+          opacity 0.3s,
+          visibility 0.3s;
+      }
+      .td-tooltip::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: #333 transparent transparent transparent;
+      }
     `);
         return gvc.bindView(() => {
             var _a;
@@ -1742,6 +1808,7 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                             target.style.position = checked ? 'sticky' : 'relative';
                             target.style.top = checked ? '0' : '';
                             target.style.left = checked ? '0' : '';
+                            target.style.zIndex = checked ? '1' : '';
                         }
                         function initCheckData() {
                             const checkedMap = new Map(vm.checkedArray.map(item => [item.dataPin, item]));
@@ -1895,7 +1962,7 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                                         return vm.tableData[0]
                                             .map((dd, index) => {
                                             return html ` <div
-                              class="${ids.headerCell} ${ids.textClass} tb_v3 tx_700"
+                              class="${ids.headerCell} ${ids.textClass} tb-v3 tx_700"
                               style="min-width: ${widthList[index]}px;"
                             >
                               ${dd.key}
@@ -1942,7 +2009,9 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                     ${vm.tableData
                             .map((dd, trIndex) => {
                             return html ` <tr
-                          class="${trIndex === 0 ? ids.tr : ''}"
+                          class="${trIndex === 0 ? ids.tr : ''} ${dd.find(d3 => d3.tooltip)
+                                ? 'tr-tooltip-container'
+                                : ''}"
                           onclick="${gvc.event(() => {
                                 obj.rowClick && obj.rowClick(dd, trIndex);
                             })}"
@@ -1965,12 +2034,19 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                                 ${dd.length === 1 ? 'border-radius: 10px;' : ''}
                               `;
                                 return html ` <td
-                                class="${ids.textClass} ${tdClass} tb_v3 tx_normal"
+                                class="${ids.textClass} ${tdClass} tb-v3 tx_normal position-relative"
                                 style="${style}"
                                 ${obj.filter.length !== 0 && tdIndex === 0 ? `gvc-checkbox="checkbox${trIndex}"` : ''}
                                 onclick="${d3.stopClick ? gvc.event((_, event) => event.stopPropagation()) : ''}"
                               >
-                                <div class="text-nowrap" style="color: #393939 !important;">${d3.value}</div>
+                                <div
+                                  class="text-nowrap ${d3.tooltip ? 'hover-element' : ''}"
+                                  style="color: #393939 !important;"
+                                  ${d3.tooltip ? `data-tooltip="${d3.tooltip}"` : ''}
+                                >
+                                  ${d3.value}
+                                </div>
+                                ${d3.tooltip ? html `<div class="td-tooltip">${d3.tooltip}</div>` : ''}
                               </td>`;
                             })
                                 .join('')}
@@ -2000,7 +2076,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                         return '';
                     }
                 },
-                divCreate: {},
                 onCreate: () => {
                     if (vm.loading) {
                         setTimeout(() => obj.getData(vm));
@@ -2040,6 +2115,27 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                                 }
                             }, 50);
                         }
+                        else {
+                            const tooltipContainers = document.querySelectorAll('.tr-tooltip-container');
+                            tooltipContainers.forEach(container => {
+                                const hoverElement = container.querySelector('.hover-element');
+                                const tooltip = container.querySelector('.td-tooltip');
+                                if (hoverElement && tooltip) {
+                                    const tooltipText = hoverElement.getAttribute('data-tooltip');
+                                    if (tooltipText) {
+                                        tooltip.textContent = tooltipText;
+                                    }
+                                    hoverElement.addEventListener('mouseenter', () => {
+                                        tooltip.style.visibility = 'visible';
+                                        tooltip.style.opacity = '1';
+                                    });
+                                    hoverElement.addEventListener('mouseleave', () => {
+                                        tooltip.style.visibility = 'hidden';
+                                        tooltip.style.opacity = '0';
+                                    });
+                                }
+                            });
+                        }
                     }
                 },
             };
@@ -2469,7 +2565,7 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
     >
       <div class="fs-5 mb-0"><strong>${title}</strong></div>
       ${messageList && messageList.length > 0
-            ? `<div class="mt-2" style="white-space: normal; word-break: break-all;">${h}</div>`
+            ? html `<div class="mt-2" style="white-space: normal; word-break: break-all;">${h}</div>`
             : ``}
     </div>`;
     }
@@ -2685,7 +2781,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
           </div>
         </div>`;
             },
-            divCreate: {},
             onCreate: () => {
                 if (obj.openOnInit) {
                     const si = setInterval(() => {
@@ -3540,7 +3635,7 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
               ${opt.note ? html ` <div class="tx_gray_12">${opt.note}</div> ` : ''}
             </div>
           </div>
-          <div class="d-flex align-items-center" style="gap: 6px">
+          <div class="d-flex align-items-center justify-content-end" style="gap: 6px; min-width: 115px;">
             <div>庫存量</div>
             <div style="color: #393939; font-size: 24px; font-weight: 600;">${opt.stock}</div>
           </div>
@@ -3638,7 +3733,7 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                                             const newOptions = vm.options.slice(startIdx, endIdx);
                                             newOptions.forEach(option => {
                                                 const optionElement = document.createElement('div');
-                                                optionElement.classList.add('d-flex', 'align-items-center');
+                                                optionElement.classList.add('d-flex', 'align-items-center', 'justify-content-between');
                                                 optionElement.style.gap = '24px';
                                                 optionElement.innerHTML = printOptionSt(option);
                                                 dialogContainer.appendChild(optionElement);
@@ -3711,7 +3806,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                 </div>
               </div>`;
                 },
-                onCreate: () => { },
             })}
         </div>`;
         }, obj.gvc.glitter.getUUID(), {
@@ -4397,7 +4491,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
           </div>`;
                 }
             },
-            divCreate: {},
             onCreate: () => {
                 if (imageVM.loading) {
                     this.isImageUrlValid(obj.image).then(isValid => {
@@ -4465,7 +4558,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
             </div>`;
                 },
                 divCreate: { class: 'h-100' },
-                onCreate: () => { },
             })}
       </div>`;
         }, windowID);
@@ -4583,7 +4675,6 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
                         return ``;
                     }
                 },
-                divCreate: {},
             };
         })());
     }
@@ -4747,6 +4838,40 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
     </div>`;
     }
 }
+BgWidget.richTextQuickList = [
+    {
+        title: '商家名稱',
+        value: '@{{app_name}}',
+    },
+    {
+        title: '訂單號碼',
+        value: '@{{訂單號碼}}',
+    },
+    {
+        title: '會員姓名',
+        value: '@{{user_name}}',
+    },
+    {
+        title: '訂單金額',
+        value: '@{{訂單金額}}',
+    },
+    {
+        title: '姓名',
+        value: '@{{姓名}}',
+    },
+    {
+        title: '電話',
+        value: '@{{電話}}',
+    },
+    {
+        title: '地址',
+        value: '@{{地址}}',
+    },
+    {
+        title: '信箱',
+        value: '@{{信箱}}',
+    },
+];
 BgWidget.dotlottieJS = 'https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs';
 BgWidget.getContainerWidth = (obj) => {
     const clientWidth = document.body.clientWidth;