ts-glitter 20.8.6 → 20.8.9

package/lowcode/public-components/headers/sy-02.js

@@ -14,9 +14,8 @@ export class Sy02 {
         return HeadInitial.initial({
             browser: () => {
                 var _a, _b, _c, _d, _e;
-                let changePage = (index, type, subData) => {
-                };
-                gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
+                let changePage = (index, type, subData) => { };
+                gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, cl => {
                     changePage = cl.changePage;
                 });
                 const colors = Color.getTheme(gvc, widget.formData);
@@ -28,7 +27,9 @@ export class Sy02 {
               
 "
             >
-                <div class="mx-auto header-place  h-100" style="max-width: 100% !important; ${document.body.clientWidth > 1300 ? `min-width: 1280px !important;` : `width:100%;
+                <div class="mx-auto header-place  h-100" style="max-width: 100% !important; ${document.body.clientWidth > 1300
+                    ? `min-width: 1280px !important;`
+                    : `width:100%;
                 padding-left: 10px;padding-right: 10px;
                 `}">
                     <!--LOGO顯示區塊-->
@@ -45,72 +46,71 @@ export class Sy02 {
                             bind: id,
                             view: () => {
                                 var _a;
-                                return html `
-                                                    <div
-                                                        class="div d-flex align-items-center flex-column w-100 p-3"
-                                                        style="border-bottom:1px solid ${widget.formData.theme_color['title']};"
-                                                    >
-                                                        <div class="d-flex align-items-center ">
-                                                            <div>
-                                                                <div
-                                                                    class="h-100"
-                                                                    onclick="${gvc.event(() => {
+                                return html ` <div
+                                          class="div d-flex align-items-center flex-column w-100 p-3"
+                                          style="border-bottom:1px solid ${widget.formData.theme_color['title']};"
+                                        >
+                                          <div class="d-flex align-items-center ">
+                                            <div>
+                                              <div
+                                                class="h-100"
+                                                onclick="${gvc.event(() => {
                                     changePage('index', 'home', {});
                                 })}"
-                                                                >
-                                                                    ${widget.formData.logo.type === 'text'
+                                              >
+                                                ${widget.formData.logo.type === 'text'
                                     ? html `
-                                                                            <div
-                                                                                class=" fw-bold d-flex align-items-center justify-content-center"
-                                                                                style="width: 150px;    margin-bottom: 20px;font-size: 36px;color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'};"
-                                                                            >
-                                                                                ${widget.formData.logo.value}
-                                                                            </div>
-                                                                        `
+                                                      <div
+                                                        class=" fw-bold d-flex align-items-center justify-content-center"
+                                                        style="width: 150px;    margin-bottom: 20px;font-size: 36px;color: ${(_a = widget
+                                        .formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'};"
+                                                      >
+                                                        ${widget.formData.logo.value}
+                                                      </div>
+                                                    `
                                     : html `<img
-                                                                            style="width: 150px;
+                                                      style="width: 150px;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     border-radius: 10px;
     margin-bottom: 20px;"
-                                                                            src="${widget.formData.logo.value}"
-                                                                        /> `}
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="mb-3">${LanguageView.selectLanguage(gvc, colors)}
-                                                        </div>
-                                                        <div class="position-relative">
-                                                            <input
-                                                                class="form-control fw-500 "
-                                                                placeholder="${Language.text('find_product')}"
-                                                                autocomplete="off"
-                                                                value=""
-                                                                onchange="${gvc.event((e, event) => {
+                                                      src="${widget.formData.logo.value}"
+                                                    /> `}
+                                              </div>
+                                            </div>
+                                          </div>
+                                          <div class="mb-3">${LanguageView.selectLanguage(gvc, colors)}</div>
+                                          <div class="position-relative">
+                                            <input
+                                              class="form-control fw-500 "
+                                              placeholder="${Language.text('find_product')}"
+                                              autocomplete="off"
+                                              value=""
+                                              onchange="${gvc.event((e, event) => {
                                     gvc.glitter.href = `/all-product?search=${e.value}`;
                                 })}"
-                                                            />
+                                            />
 
-                                                            <div
-                                                                style=" position: absolute;
+                                            <div
+                                              style=" position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     color: rgb(107, 114, 128);"
-                                                            >
-                                                                <i class="fa-solid fa-magnifying-glass"></i>
-                                                            </div>
-                                                        </div>
-                                                    </div>
+                                            >
+                                              <i class="fa-solid fa-magnifying-glass"></i>
+                                            </div>
+                                          </div>
+                                        </div>
 
-                                                    <div class="offcanvas-body p-0 ">
-                                                        ${gvc.bindView(() => {
+                                        <div class="offcanvas-body p-0 ">
+                                          ${gvc.bindView(() => {
                                     const id = gvc.glitter.getUUID();
                                     const vm = {
                                         data: [],
                                     };
-                                    ApiUser.getPublicConfig('menu-setting', 'manager', window.appName).then((res) => {
+                                    ApiUser.getPublicConfig('menu-setting', 'manager', window.appName).then(res => {
                                         vm.data = res.response.value[Language.getLanguage()];
                                         gvc.notifyDataChange(id);
                                     });
@@ -132,15 +132,15 @@ export class Sy02 {
                                                     .map((dd) => {
                                                     var _a, _b, _c, _d, _e;
                                                     return html `
-                                                                                    <li
-                                                                                        style="${show_border
+                                                        <li
+                                                          style="${show_border
                                                         ? `border-bottom: 1px solid ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;`
                                                         : ``}"
-                                                                                    >
-                                                                                        <div
-                                                                                            class="nav-link d-flex justify-content-between"
-                                                                                            style="padding: 16px;"
-                                                                                            onclick="${gvc.event(() => {
+                                                        >
+                                                          <div
+                                                            class="nav-link d-flex justify-content-between"
+                                                            style="padding: 16px;"
+                                                            onclick="${gvc.event(() => {
                                                         var _a;
                                                         if (((_a = dd.items) !== null && _a !== void 0 ? _a : []).length === 0) {
                                                             if (dd.link) {
@@ -157,10 +157,10 @@ export class Sy02 {
                                                             gvc.notifyDataChange(id);
                                                         }
                                                     })}"
-                                                                                        >
-                                                                                            <div
-                                                                                                style="color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'} !important;"
-                                                                                                onclick="${gvc.event((e, event) => {
+                                                          >
+                                                            <div
+                                                              style="color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'} !important;"
+                                                              onclick="${gvc.event((e, event) => {
                                                         if (dd.link) {
                                                             gvc.glitter.href = dd.link;
                                                             gvc.glitter.closeDrawer();
@@ -168,19 +168,23 @@ export class Sy02 {
                                                         event.stopPropagation();
                                                         event.preventDefault();
                                                     })}"
-                                                                                            >
-                                                                                                ${dd.title}
-                                                                                            </div>
-                                                                                            ${((_c = dd.items) !== null && _c !== void 0 ? _c : []).length
+                                                            >
+                                                              ${dd.title}
+                                                            </div>
+                                                            ${((_c = dd.items) !== null && _c !== void 0 ? _c : []).length
                                                         ? html ` <i
-                                                                                                    class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
-                                                                                                    style="color: ${(_d = widget.formData.theme_color['title']) !== null && _d !== void 0 ? _d : '#000'} !important;"
-                                                                                                ></i>`
+                                                                  class="fa-solid ${dd.open
+                                                            ? `fa-angle-up`
+                                                            : `fa-angle-down`}"
+                                                                  style="color: ${(_d = widget.formData.theme_color['title']) !== null && _d !== void 0 ? _d : '#000'} !important;"
+                                                                ></i>`
+                                                        : ``}
+                                                          </div>
+                                                          ${dd.open
+                                                        ? `<ul class="ps-3  pb-2">${loopItems((_e = dd.items) !== null && _e !== void 0 ? _e : [], false)}</ul>`
                                                         : ``}
-                                                                                        </div>
-                                                                                        ${dd.open ? `<ul class="ps-3  pb-2">${loopItems((_e = dd.items) !== null && _e !== void 0 ? _e : [], false)}</ul>` : ``}
-                                                                                    </li>
-                                                                                `;
+                                                        </li>
+                                                      `;
                                                 })
                                                     .join('');
                                             }
@@ -193,7 +197,7 @@ export class Sy02 {
                                         },
                                     };
                                 })}
-                                                    </div>`;
+                                        </div>`;
                             },
                             divCreate: {
                                 class: `w-100 h-100`,
@@ -217,15 +221,21 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                     changePage('index', 'home', {});
                 })}"> ${widget.formData.logo.type === 'text'
                     ? html `
-                                    <div class=" fw-bold d-flex align-items-center h-100 mb-1 mb-sm-auto"
-                                         style="font-size: 28px;line-height: 28px;color: ${(_c = widget.formData.theme_color['title']) !== null && _c !== void 0 ? _c : '#000'};">
-                                        ${widget.formData.logo.value}
-                                    </div>
-                                `
+                                     <div
+                                       class=" fw-bold d-flex align-items-center h-100 mb-1 mb-sm-auto"
+                                       style="font-size: 28px;line-height: 28px;color: ${(_c = widget.formData.theme_color['title']) !== null && _c !== void 0 ? _c : '#000'};"
+                                     >
+                                       ${widget.formData.logo.value}
+                                     </div>
+                                   `
                     : html `
-                                    <div class="d-flex align-items-center justify-content-center h-100 py-2"><img
-                                        src="${widget.formData.logo.value}" style="max-height: 100%;max-width:200px;" />
-                                    </div> `}
+                                     <div class="d-flex align-items-center justify-content-center h-100 py-2">
+                                       <img
+                                         src="${widget.formData.logo.value}"
+                                         style="max-height: 100%;max-width:200px;"
+                                       />
+                                     </div>
+                                   `}
                         </div>
                         <!--選單列表顯示區塊-->
                         <ul class="navbar-nav  d-none d-md-block flex-fill ps-2" style="">
@@ -234,7 +244,7 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                     const vm = {
                         data: [],
                     };
-                    ApiUser.getPublicConfig('menu-setting', 'manager', window.appName).then((res) => {
+                    ApiUser.getPublicConfig('menu-setting', 'manager', window.appName).then(res => {
                         vm.data = res.response.value[Language.getLanguage()];
                         gvc.notifyDataChange(id);
                     });
@@ -245,29 +255,29 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                                 return data
                                     .map((dd) => {
                                     var _a, _b;
-                                    return html `
-                                                        <li class="nav-item dropdown">
-                                                            <a
-                                                                class="nav-link header-link "
-                                                                style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;font-size: 15px;"
-                                                                onclick="${gvc.event(() => {
+                                    return html ` <li class="nav-item dropdown">
+                                          <a
+                                            class="nav-link header-link "
+                                            style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;font-size: 15px;"
+                                            onclick="${gvc.event(() => {
                                         if (dd.link) {
                                             gvc.glitter.href = dd.link;
                                         }
                                     })}"
-                                                            >${dd.title}
-                                                                ${dd.items.length > 0 ? `<i class="fa-solid fa-angle-down ms-2"></i>` : ``}</a
-                                                            >
-                                                            ${dd.items.length > 0
-                                        ? html `
-                                                                    <ul
-                                                                        class="dropdown-menu"
-                                                                        style="background:${(_b = widget.formData.theme_color['background']) !== null && _b !== void 0 ? _b : '#000'} !important; cursor: pointer; z-index: 99999;"
-                                                                    >
-                                                                        ${loopItems(dd.items)}
-                                                                    </ul>`
+                                            >${dd.title}
+                                            ${dd.items.length > 0
+                                        ? `<i class="fa-solid fa-angle-down ms-2"></i>`
+                                        : ``}</a
+                                          >
+                                          ${dd.items.length > 0
+                                        ? html ` <ul
+                                                class="dropdown-menu"
+                                                style="background:${(_b = widget.formData.theme_color['background']) !== null && _b !== void 0 ? _b : '#000'} !important; cursor: pointer; z-index: 99999;"
+                                              >
+                                                ${loopItems(dd.items)}
+                                              </ul>`
                                         : ``}
-                                                        </li>`;
+                                        </li>`;
                                 })
                                     .join('');
                             }
@@ -289,7 +299,7 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                     const vm = {
                         visible: false,
                     };
-                    ApiUser.getPublicConfig('store-information', 'manager').then((res) => {
+                    ApiUser.getPublicConfig('store-information', 'manager').then(res => {
                         if (res.response.value.ai_search) {
                             vm.visible = true;
                             gvc.notifyDataChange(id);
@@ -299,18 +309,17 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                         bind: id,
                         view: () => {
                             var _a, _b;
-                            return html `
-                                                <div
-                                                    class="d-flex align-items-center justify-content-center "
-                                                    style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;width:30px;height:30px;font-size: 15px;
+                            return html ` <div
+                                        class="d-flex align-items-center justify-content-center "
+                                        style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;width:30px;height:30px;font-size: 15px;
 border: 2px solid ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'} !important;
 border-radius: 50%;
 font-weight: 700 !important;
 padding-bottom: 2px;
 "
-                                                >
-                                                    AI
-                                                </div>`;
+                                      >
+                                        AI
+                                      </div>`;
                         },
                         divCreate: () => {
                             return {
@@ -328,58 +337,59 @@ padding-bottom: 2px;
                         },
                     };
                 })}
-                                ${(HeaderClass.hideShopperBtn()) ? `` : `<li class="nav-item d-none d-sm-flex align-items-center justify-content-center "
+                                ${HeaderClass.hideShopperBtn()
+                    ? ``
+                    : `<li class="nav-item d-none d-sm-flex align-items-center justify-content-center "
                                     style="">
                                     ${gvc.bindView(() => {
-                    const vm = {
-                        id: gvc.glitter.getUUID(),
-                        toggle: false,
-                    };
-                    return {
-                        bind: vm.id,
-                        view: () => {
-                            var _a, _b;
-                            if (!vm.toggle) {
-                                return html `<i
-                                                    class="fa-regular fa-magnifying-glass"
-                                                    style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'};cursor: pointer;font-size:20px;"
-                                                    onclick="${gvc.event(() => {
-                                    vm.toggle = !vm.toggle;
-                                    gvc.notifyDataChange(vm.id);
-                                })}"
-                                                ></i>`;
-                            }
-                            else {
-                                return html `<a
-                                                    class="nav-link search-container d-flex align-items-center"
-                                                ><i
-                                                    class="fa-regular fa-circle-xmark"
-                                                    style="color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'};cursor: pointer;font-size:20px;"
-                                                    onclick="${gvc.event(() => {
-                                    vm.toggle = !vm.toggle;
-                                    gvc.notifyDataChange(vm.id);
-                                })}"
-                                                ></i
-                                                ><input
-                                                    class="ms-3 form-control"
-                                                    style="height:40px;"
-                                                    placeholder="${Language.text('input_product_keyword')}"
-                                                    autocomplete="off"
-                                                    onchange="${gvc.event((e, event) => {
-                                    gvc.glitter.href = `/all-product?search=${e.value}`;
-                                    vm.toggle = !vm.toggle;
-                                    gvc.notifyDataChange(vm.id);
-                                })}"
-                                                />
-                                                </a>`;
-                            }
-                        },
-                        divCreate: {
-                            class: `nav-link search-container`,
-                            elem: `a`,
-                        },
-                    };
-                })}
+                        const vm = {
+                            id: gvc.glitter.getUUID(),
+                            toggle: false,
+                        };
+                        return {
+                            bind: vm.id,
+                            view: () => {
+                                var _a, _b;
+                                if (!vm.toggle) {
+                                    return html `<i
+                                              class="fa-regular fa-magnifying-glass"
+                                              style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'};cursor: pointer;font-size:20px;"
+                                              onclick="${gvc.event(() => {
+                                        vm.toggle = !vm.toggle;
+                                        gvc.notifyDataChange(vm.id);
+                                    })}"
+                                            ></i>`;
+                                }
+                                else {
+                                    return html `<a class="nav-link search-container d-flex align-items-center"
+                                              ><i
+                                                class="fa-regular fa-circle-xmark"
+                                                style="color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'};cursor: pointer;font-size:20px;"
+                                                onclick="${gvc.event(() => {
+                                        vm.toggle = !vm.toggle;
+                                        gvc.notifyDataChange(vm.id);
+                                    })}"
+                                              ></i
+                                              ><input
+                                                class="ms-3 form-control"
+                                                style="height:40px;"
+                                                placeholder="${Language.text('input_product_keyword')}"
+                                                autocomplete="off"
+                                                onchange="${gvc.event((e, event) => {
+                                        gvc.glitter.href = `/all-product?search=${`${e.value}`.trim()}`;
+                                        vm.toggle = !vm.toggle;
+                                        gvc.notifyDataChange(vm.id);
+                                    })}"
+                                              />
+                                            </a>`;
+                                }
+                            },
+                            divCreate: {
+                                class: `nav-link search-container`,
+                                elem: `a`,
+                            },
+                        };
+                    })}
                                 </li>`}
                                 <li class="nav-item  d-flex align-items-center justify-content-center"
                                     style="width:40px !important;">
@@ -393,40 +403,41 @@ padding-bottom: 2px;
                         view: () => {
                             var _a;
                             return html `<span
-                                                    class="position-relative"
-                                                    onclick="${gvc.event(() => {
+                                            class="position-relative"
+                                            onclick="${gvc.event(() => {
                                 HeaderClass.rightCartMenu(gvc, widget);
                             })}"
-                                                >
-                                                    <i
-                                                        class="fa-duotone fa-cart-shopping"
-                                                        style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;font-size:20px;"
-                                                    ></i>
-                                                    ${gvc.bindView(() => {
+                                          >
+                                            <i
+                                              class="fa-duotone fa-cart-shopping"
+                                              style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;font-size:20px;"
+                                            ></i>
+                                            ${gvc.bindView(() => {
                                 return {
                                     bind: gvc.glitter.getUUID(),
                                     view: () => {
                                         return new Promise((resolve, reject) => {
-                                            getCheckoutCount((count) => {
+                                            getCheckoutCount(count => {
                                                 vm.count = count;
                                                 resolve(vm.count
-                                                    ? html `
-                                                                                    <div class="position-absolute"
-                                                                                         style="font-size: 10px;right: -10px;top: -6px;">
-                                                                                        <div
-                                                                                            class="rounded-circle bg-danger text-white  align-items-center justify-content-center fw-500 d-flex"
-                                                                                            style="width:18px;height: 18px;color: white !important;background:#fe5541;"
-                                                                                        >
-                                                                                            ${vm.count}
-                                                                                        </div>
-                                                                                    </div>`
+                                                    ? html ` <div
+                                                              class="position-absolute"
+                                                              style="font-size: 10px;right: -10px;top: -6px;"
+                                                            >
+                                                              <div
+                                                                class="rounded-circle bg-danger text-white  align-items-center justify-content-center fw-500 d-flex"
+                                                                style="width:18px;height: 18px;color: white !important;background:#fe5541;"
+                                                              >
+                                                                ${vm.count}
+                                                              </div>
+                                                            </div>`
                                                     : ``);
                                             });
                                         });
                                     },
                                 };
                             })}
-                                                </span>`;
+                                          </span>`;
                         },
                         divCreate: {
                             class: `nav-link js-cart-count `,
@@ -472,10 +483,10 @@ border-radius: 5px;"
             mobile: () => {
                 return HeaderMobile.mian({
                     gvc: gvc,
-                    widget: widget
+                    widget: widget,
                 });
             },
-            gvc: gvc
+            gvc: gvc,
         });
     }
 }