ts-glitter 20.8.6 → 20.8.9

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

@@ -15,7 +15,7 @@ export class Sy03 {
             browser: () => {
                 var _a, _b, _c;
                 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);
@@ -25,10 +25,15 @@ export class Sy03 {
             style="background:  ${(_a = widget.formData.theme_color['background']) !== null && _a !== void 0 ? _a : '#000'} !important;z-index:9999;
 "
           >
-            <div class="container header-place  h-100 align-items-center justify-content-center d-flex" style="${document.body.clientWidth < 800 ? `height:76px !important;` : ``}">
+            <div
+              class="container header-place  h-100 align-items-center justify-content-center d-flex"
+              style="${document.body.clientWidth < 800 ? `height:76px !important;` : ``}"
+            >
               <div class="d-flex flex-column align-items-center justify-content-center pb-md-3 pt-md-3 flex-fill">
                 <!--LOGO顯示區塊-->
-                <div class="d-flex align-items-center justify-content-start justify-content-md-center h-100 w-100 gap-2">
+                <div
+                  class="d-flex align-items-center justify-content-start justify-content-md-center h-100 w-100 gap-2"
+                >
                   <!--手機版選單-->
                   <div
                     class="d-flex align-items-center justify-content-center d-md-none"
@@ -41,60 +46,60 @@ export class Sy03 {
                             bind: id,
                             view: () => {
                                 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(() => {
+                                  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', {});
                                 })}"
-                                                                    >
-                                                                        <img
-                                                                            style="width: 150px;
+                                      >
+                                        <img
+                                          style="width: 150px;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     border-radius: 10px;
     margin-bottom: 20px;"
-                                                                            src="${widget.formData.logo}"
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                            <div class="mb-3">${LanguageView.selectLanguage(gvc, colors)}</div>
-                                                            <div class="position-relative ${HeaderClass.hideShopperBtn() ? `d-none` : ``}">
-                                                                <input
-                                                                    class="form-control fw-500 "
-                                                                    placeholder="${Language.text('find_product')}"
-                                                                    autocomplete="off"
-                                                                    value=""
-                                                                    onchange="${gvc.event((e, event) => {
+                                          src="${widget.formData.logo}"
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="mb-3">${LanguageView.selectLanguage(gvc, colors)}</div>
+                                  <div class="position-relative ${HeaderClass.hideShopperBtn() ? `d-none` : ``}">
+                                    <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);
                                     });
@@ -116,15 +121,15 @@ export class Sy03 {
                                                     .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) {
@@ -141,10 +146,10 @@ export class Sy03 {
                                                             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();
@@ -152,17 +157,19 @@ export class Sy03 {
                                                         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('');
                                             }
@@ -175,7 +182,7 @@ export class Sy03 {
                                         },
                                     };
                                 })}
-                                                        </div>`;
+                                </div>`;
                             },
                             divCreate: {
                                 class: `w-100 h-100`,
@@ -202,7 +209,7 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                   >
                     <img
                       src="${widget.formData.logo}"
-                      style="${(document.body.clientWidth < 800 || (gvc.glitter.getUrlParameter('page') === 'checkout'))
+                      style="${document.body.clientWidth < 800 || gvc.glitter.getUrlParameter('page') === 'checkout'
                     ? `max-height: 100%;max-width:200px;max-height:60px;`
                     : `height: ${(() => {
                         try {
@@ -226,7 +233,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);
                     });
@@ -238,22 +245,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;"
-                                                            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;"
+                                  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('');
                             }
@@ -269,7 +277,9 @@ background: ${(_a = colors.bgr) !== null && _a !== void 0 ? _a : '#000'};overflo
                 </ul>
               </div>
               <div
-                class="d-flex align-items-center ${document.body.clientWidth >= 800 ? `position-lg-absolute` : `position-relative`} "
+                class="d-flex align-items-center ${document.body.clientWidth >= 800
+                    ? `position-lg-absolute`
+                    : `position-relative`} "
                 style="${document.body.clientWidth > 800 ? `top:10px;right:30px;` : ``}"
               >
                 <!--固定按鈕顯示區塊-->
@@ -279,7 +289,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);
@@ -328,36 +338,36 @@ padding-bottom: 2px;
                                 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(() => {
+                                          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>`;
+                                        ></i>`;
                                 }
                                 else {
                                     return html `<a class="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(() => {
+                                          ><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}`;
+                                          ></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>`;
+                                          />
+                                        </a>`;
                                 }
                             },
                             divCreate: {
@@ -367,7 +377,12 @@ padding-bottom: 2px;
                         };
                     })}
                             </li>`}
-                  <li class="nav-item  ${HeaderClass.hideShopperBtn() ? `d-none` : `d-flex`} align-items-center justify-content-center" style="width:45px !important;">
+                  <li
+                    class="nav-item  ${HeaderClass.hideShopperBtn()
+                    ? `d-none`
+                    : `d-flex`} align-items-center justify-content-center"
+                    style="width:45px !important;"
+                  >
                     ${gvc.bindView(() => {
                     const vm = {
                         id: gvc.glitter.getUUID(),
@@ -378,35 +393,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 `,
@@ -414,7 +435,12 @@ padding-bottom: 2px;
                     };
                 })}
                   </li>
-                  <li class="nav-item d-flex align-items-center justify-content-center ${HeaderClass.hideShopperBtn() ? `d-none` : `d-flex`}" style="width:45px !important;">
+                  <li
+                    class="nav-item d-flex align-items-center justify-content-center ${HeaderClass.hideShopperBtn()
+                    ? `d-none`
+                    : `d-flex`}"
+                    style="width:45px !important;"
+                  >
                     <a class="nav-link search-container">
                       <i
                         class="fw-500  fa-regular fa-user "
@@ -441,10 +467,10 @@ padding-bottom: 2px;
             mobile: () => {
                 return HeaderMobile.mian({
                     gvc: gvc,
-                    widget: widget
+                    widget: widget,
                 });
             },
-            gvc: gvc
+            gvc: gvc,
         });
     }
 }