ts-glitter 20.8.7 → 20.9.1

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

@@ -13,18 +13,19 @@ import { HeaderMobile } from './header-mobile.js';
 const html = String.raw;
 
 export class Sy04 {
-    public static main(gvc: GVC, widget: any, subData: any) {
-      return HeadInitial.initial({
-        browser:()=>{
-          let changePage = (index: string, type: 'page' | 'home', subData: any) => {};
-          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);
-          return html` <div style="height: 76px;"></div>
+  public static main(gvc: GVC, widget: any, subData: any) {
+    return HeadInitial.initial({
+      browser: () => {
+        let changePage = (index: string, type: 'page' | 'home', subData: any) => {};
+        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);
+        return html` <div style="height: 76px;"></div>
           <nav
             class="navbar navbar-expand-lg vw-100 header header-place shadow  position-fixed top-0 left-0  py-0"
-            style="background:  ${widget.formData.theme_color['background'] ?? '#000'} !important;height: 76px;z-index:9999;"
+            style="background:  ${widget.formData.theme_color['background'] ??
+            '#000'} !important;height: 76px;z-index:9999;"
           >
             <div class="container header-place  h-100">
               <!--LOGO顯示區塊-->
@@ -40,147 +41,158 @@ export class Sy04 {
                         return {
                           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(() => {
-                              changePage('index', 'home', {});
-                            })}"
-                                                                >
-                                                                    ${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: ${widget.formData.theme_color['title'] ?? '#000'};"
-                                                                              >
-                                                                                  ${widget.formData.logo.value}
-                                                                              </div>
-                                                                          `
-                              : html`<img
-                                                                              style="width: 150px;
+                            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'
+                                        ? html`
+                                            <div
+                                              class=" fw-bold d-flex align-items-center justify-content-center"
+                                              style="margin-bottom: 20px;font-size: 20px;color: ${widget.formData
+                                                .theme_color['title'] ?? '#000'};"
+                                            >
+                                              ${widget.formData.logo.value}
+                                            </div>
+                                          `
+                                        : html`<img
+                                            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) => {
-                              gvc.glitter.href = `/all-product?search=${e.value}`;
-                            })}"
-                                                            />
+                                            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(() => {
-                              const id = gvc.glitter.getUUID();
-                              const vm = {
-                                data: [],
-                              };
-                              ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then((res) => {
-                                vm.data = res.response.value[Language.getLanguage()];
+                              <div class="offcanvas-body p-0 ">
+                                ${gvc.bindView(() => {
+                                  const id = gvc.glitter.getUUID();
+                                  const vm = {
+                                    data: [],
+                                  };
+                                  ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then(
+                                    res => {
+                                      vm.data = res.response.value[Language.getLanguage()];
 
-                                gvc.notifyDataChange(id);
-                              });
-                              return {
-                                bind: id,
-                                view: () => {
-                                  function resetToggle() {
-                                    function loop(data: any) {
-                                      data.map((dd: any) => {
-                                        (dd as any).open = false;
-                                        loop((dd as any).items ?? []);
-                                      });
+                                      gvc.notifyDataChange(id);
                                     }
+                                  );
+                                  return {
+                                    bind: id,
+                                    view: () => {
+                                      function resetToggle() {
+                                        function loop(data: any) {
+                                          data.map((dd: any) => {
+                                            (dd as any).open = false;
+                                            loop((dd as any).items ?? []);
+                                          });
+                                        }
 
-                                    loop(vm.data);
-                                  }
+                                        loop(vm.data);
+                                      }
 
-                                  function loopItems(data: any, show_border: boolean) {
-                                    return data
-                                      .map((dd: any) => {
-                                        return html`
-                                                                                    <li
-                                                                                        style="${show_border
-                                          ? `border-bottom: 1px solid ${widget.formData.theme_color['title'] ?? '#000'} !important;`
-                                          : ``}"
-                                                                                    >
-                                                                                        <div
-                                                                                            class="nav-link d-flex justify-content-between"
-                                                                                            style="padding: 16px;"
-                                                                                            onclick="${gvc.event(() => {
-                                          if (((dd as any).items ?? []).length === 0) {
-                                            if (dd.link) {
-                                              gvc.glitter.href = dd.link;
-                                              gvc.glitter.closeDrawer();
-                                            }
-                                          } else {
-                                            let og = dd.open;
-                                            resetToggle();
-                                            if (!og) {
-                                              dd.open = true;
-                                            }
-                                            gvc.notifyDataChange(id);
-                                          }
-                                        })}"
-                                                                                        >
-                                                                                            <div
-                                                                                                style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;"
-                                                                                                onclick="${gvc.event((e, event) => {
-                                          if (dd.link) {
-                                            gvc.glitter.href = dd.link;
-                                            gvc.glitter.closeDrawer();
-                                          }
-                                          event.stopPropagation();
-                                          event.preventDefault();
-                                        })}"
-                                                                                            >
-                                                                                                ${dd.title}
-                                                                                            </div>
-                                                                                            ${(dd.items ?? []).length
-                                          ? `<i class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
+                                      function loopItems(data: any, show_border: boolean) {
+                                        return data
+                                          .map((dd: any) => {
+                                            return html`
+                                              <li
+                                                style="${show_border
+                                                  ? `border-bottom: 1px solid ${widget.formData.theme_color['title'] ?? '#000'} !important;`
+                                                  : ``}"
+                                              >
+                                                <div
+                                                  class="nav-link d-flex justify-content-between"
+                                                  style="padding: 16px;"
+                                                  onclick="${gvc.event(() => {
+                                                    if (((dd as any).items ?? []).length === 0) {
+                                                      if (dd.link) {
+                                                        gvc.glitter.href = dd.link;
+                                                        gvc.glitter.closeDrawer();
+                                                      }
+                                                    } else {
+                                                      let og = dd.open;
+                                                      resetToggle();
+                                                      if (!og) {
+                                                        dd.open = true;
+                                                      }
+                                                      gvc.notifyDataChange(id);
+                                                    }
+                                                  })}"
+                                                >
+                                                  <div
+                                                    style="color: ${widget.formData.theme_color['title'] ??
+                                                    '#000'} !important;"
+                                                    onclick="${gvc.event((e, event) => {
+                                                      if (dd.link) {
+                                                        gvc.glitter.href = dd.link;
+                                                        gvc.glitter.closeDrawer();
+                                                      }
+                                                      event.stopPropagation();
+                                                      event.preventDefault();
+                                                    })}"
+                                                  >
+                                                    ${dd.title}
+                                                  </div>
+                                                  ${(dd.items ?? []).length
+                                                    ? `<i class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
                                                                                    style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;"></i>`
-                                          : ``}
-                                                                                        </div>
-                                                                                        ${dd.open ? `<ul class="ps-3  pb-2">${loopItems(dd.items ?? [], false)}</ul>` : ``}
-                                                                                    </li>
-                                                                                `;
-                                      })
-                                      .join('');
-                                  }
+                                                    : ``}
+                                                </div>
+                                                ${dd.open
+                                                  ? `<ul class="ps-3  pb-2">${loopItems(dd.items ?? [], false)}</ul>`
+                                                  : ``}
+                                              </li>
+                                            `;
+                                          })
+                                          .join('');
+                                      }
 
-                                  return loopItems(vm.data, true);
-                                },
-                                divCreate: {
-                                  class: `navbar-nav me-auto mb-2 mb-lg-0`,
-                                  style: ``,
-                                  elem: `ul`,
-                                },
-                              };
-                            })}
-                                                    </div>`;
+                                      return loopItems(vm.data, true);
+                                    },
+                                    divCreate: {
+                                      class: `navbar-nav me-auto mb-2 mb-lg-0`,
+                                      style: ``,
+                                      elem: `ul`,
+                                    },
+                                  };
+                                })}
+                              </div>`;
                           },
                           divCreate: {
                             class: `w-100 h-100`,
@@ -209,25 +221,43 @@ background: ${colors.bgr ?? '#000'};overflow-x: hidden;`,
                 >
                   ${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: ${widget.formData.theme_color['title'] ?? '#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: ${widget.formData
+                            .theme_color['title'] ?? '#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 as any).appName).then((res) => {
+                    ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then(res => {
                       vm.data = res.response.value[Language.getLanguage()];
                       gvc.notifyDataChange(id);
                     });
@@ -238,22 +268,24 @@ background: ${colors.bgr ?? '#000'};overflow-x: hidden;`,
                           return data
                             .map((dd: any) => {
                               return html` <li class="nav-item dropdown">
-                                                        <a
-                                                            class="nav-link header-link "
-                                                            style="color: ${widget.formData.theme_color['title'] ?? '#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
-                                ? `<ul class="dropdown-menu" style="background:${widget.formData.theme_color['background'] ?? '#000'} !important;
+                                <a
+                                  class="nav-link header-link "
+                                  style="color: ${widget.formData.theme_color['title'] ??
+                                  '#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
+                                  ? `<ul class="dropdown-menu" style="background:${widget.formData.theme_color['background'] ?? '#000'} !important;
     cursor: pointer;
     z-index: 99999;">${loopItems(dd.items)}</ul>`
-                                : ``}
-                                                    </li>`;
+                                  : ``}
+                              </li>`;
                             })
                             .join('');
                         }
@@ -275,7 +307,7 @@ background: ${colors.bgr ?? '#000'};overflow-x: hidden;`,
                     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);
@@ -309,54 +341,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: () => {
-                        if (!vm.toggle) {
-                          return html`<i
-                                                    class="fa-regular fa-magnifying-glass"
-                                                    style="color: ${widget.formData.theme_color['title'] ?? '#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: ${widget.formData.theme_color['title'] ?? '#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: () => {
+                                      if (!vm.toggle) {
+                                        return html`<i
+                                          class="fa-regular fa-magnifying-glass"
+                                          style="color: ${widget.formData.theme_color['title'] ??
+                                          '#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: ${widget.formData.theme_color['title'] ??
+                                            '#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(() => {
@@ -368,37 +404,44 @@ padding-bottom: 2px;
                         bind: vm.id,
                         view: () => {
                           return html`<span
-                                                class="position-relative"
-                                                onclick="${gvc.event(() => {
-                            HeaderClass.rightCartMenu(gvc, widget);
-                          })}"
+                            class="position-relative"
+                            onclick="${gvc.event(() => {
+                              HeaderClass.rightCartMenu(gvc, widget);
+                            })}"
+                          >
+                            <i
+                              class="fa-duotone fa-cart-shopping"
+                              style="color: ${widget.formData.theme_color['title'] ??
+                              '#000'} !important;cursor: pointer;font-size:20px;"
+                            ></i>
+                            ${gvc.bindView(() => {
+                              return {
+                                bind: gvc.glitter.getUUID(),
+                                view: () => {
+                                  return new Promise((resolve, reject) => {
+                                    getCheckoutCount(count => {
+                                      vm.count = count;
+                                      resolve(
+                                        vm.count
+                                          ? html`<div
+                                              class="position-absolute"
+                                              style="font-size: 10px;right: -10px;top: -6px;"
                                             >
-                                                <i class="fa-duotone fa-cart-shopping" style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;cursor: pointer;font-size:20px;"></i>
-                                                ${gvc.bindView(() => {
-                            return {
-                              bind: gvc.glitter.getUUID(),
-                              view: () => {
-                                return new Promise((resolve, reject) => {
-                                  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>`
-                                        : ``
-                                    );
+                                              <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 `,
@@ -428,17 +471,16 @@ padding-bottom: 2px;
               </div>
             </div>
           </nav>`;
-        },
-        mobile:()=>{
-          return HeaderMobile.mian({
-            gvc:gvc,
-            widget:widget
-          })
-        },
-        gvc:gvc
-      })
-
-    }
+      },
+      mobile: () => {
+        return HeaderMobile.mian({
+          gvc: gvc,
+          widget: widget,
+        });
+      },
+      gvc: gvc,
+    });
+  }
 }
 
 (window as any).glitter.setModule(import.meta.url, Sy04);