ts-glitter 20.8.6 → 20.8.9

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

@@ -15,7 +15,7 @@ export class Sy04 {
             browser: () => {
                 var _a, _b, _c, _d;
                 let changePage = (index, type, subData) => { };
-                gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
+                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);
@@ -39,66 +39,72 @@ export class Sy04 {
                             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="margin-bottom: 20px;font-size: 20px;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="margin-bottom: 20px;font-size: 20px;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;
     margin-bottom: 20px;"
-                                                                              src="${widget.formData.logo.value}"
-                                                                          /> `}
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        ${LanguageView.selectLanguage(gvc, colors) ? `<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>
+                                ${LanguageView.selectLanguage(gvc, colors)
+                                    ? `<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);
                                     });
@@ -120,15 +126,15 @@ export class Sy04 {
                                                     .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) {
@@ -145,10 +151,10 @@ export class Sy04 {
                                                             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();
@@ -156,17 +162,19 @@ export class Sy04 {
                                                         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
                                                         ? `<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>` : ``}
-                                                                                    </li>
-                                                                                `;
+                                                </div>
+                                                ${dd.open
+                                                        ? `<ul class="ps-3  pb-2">${loopItems((_e = dd.items) !== null && _e !== void 0 ? _e : [], false)}</ul>`
+                                                        : ``}
+                                              </li>
+                                            `;
                                                 })
                                                     .join('');
                                             }
@@ -179,7 +187,7 @@ export class Sy04 {
                                         },
                                     };
                                 })}
-                                                    </div>`;
+                              </div>`;
                             },
                             divCreate: {
                                 class: `w-100 h-100`,
@@ -206,25 +214,43 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                 >
                   ${widget.formData.logo.type === 'text'
                     ? html `
-                                      <div
-                                          class="fw-bold d-flex align-items-center h-100 mb-1 mb-sm-auto"
-                                          style="letter-spacing: 1.5px; font-size: 19px;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" style="${document.body.clientWidth < 800 ? `max-width:calc(100vw - 200px);` : `max-width:200px;`}"><img src="${widget.formData.logo.value}" style="max-height: 100%;${document.body.clientWidth < 800 ? `max-width:calc(100vw - 200px);` : `max-width:200px;`}" /></div> `}
+                        <div
+                          class="fw-bold d-flex align-items-center h-100 mb-1 mb-sm-auto"
+                          style="letter-spacing: 1.5px; font-size: 19px;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"
+                          style="${document.body.clientWidth < 800
+                        ? `max-width:calc(100vw - 200px);`
+                        : `max-width:200px;`}"
+                        >
+                          <img
+                            src="${widget.formData.logo.value}"
+                            style="max-height: 100%;${document.body.clientWidth < 800
+                        ? `max-width:calc(100vw - 200px);`
+                        : `max-width:200px;`}"
+                          />
+                        </div>
+                      `}
                 </div>
               </div>
               <div class="">
                 <!--選單列表顯示區塊-->
-                <ul class="navbar-nav position-absolute start-50 top-50 d-none d-lg-block" style="transform: translate(-50%, -50%);">
+                <ul
+                  class="navbar-nav position-absolute start-50 top-50 d-none d-lg-block"
+                  style="transform: translate(-50%, -50%);"
+                >
                   ${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);
                     });
@@ -236,22 +262,23 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                                     .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;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
-                                                            onclick="${gvc.event(() => {
+                                <a
+                                  class="nav-link header-link "
+                                  style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                                  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
+                                  >${dd.title}
+                                  ${dd.items.length > 0 ? `<i class="fa-solid fa-angle-down ms-2"></i>` : ``}</a
+                                >
+                                ${dd.items.length > 0
                                         ? `<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('');
                             }
@@ -272,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);
@@ -307,56 +334,58 @@ padding-bottom: 2px;
                         },
                     };
                 })}
-                  ${(HeaderClass.hideShopperBtn()) ? `` : `<li class="nav-item d-none d-sm-flex align-items-center justify-content-center" style="">
+                  ${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;">
                     ${gvc.bindView(() => {
@@ -369,35 +398,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 `,
@@ -432,10 +467,10 @@ padding-bottom: 2px;
             mobile: () => {
                 return HeaderMobile.mian({
                     gvc: gvc,
-                    widget: widget
+                    widget: widget,
                 });
             },
-            gvc: gvc
+            gvc: gvc,
         });
     }
 }