ts-glitter 22.4.7 → 22.4.9

package/lowcode/official_view_component/form-widget/input-custom.ts

@@ -119,11 +119,11 @@ white-space: normal;`;
               }
             })()}" value="${value}"
                    placeholder="${place_holder}"
-                   type="${type==='date'?'text':type}"
+                   type="${type === 'date' ? 'text' : type}"
                    id="${input_id}" onchange="${gvc.event((e, event) => {
                      widget.bundle.form_data[widget.bundle.form_key] = e.value;
                      widget.bundle.refresh && widget.bundle.refresh();
-                   })}" > </input>`;
+                   })}"> </input>`;
         },
         divCreate: {},
         onCreate: () => {
@@ -137,7 +137,7 @@ white-space: normal;`;
               () => {
                 const cf: any = {
                   locale: 'zh', // locale for this instance only,
-                  disableMobile: "true"
+                  disableMobile: 'true',
                 };
                 if (min) {
                   cf.minDate = new Date(`${min} 00:00:00`);
@@ -147,25 +147,24 @@ white-space: normal;`;
                 }
                 //@ts-ignore
                 let fp = flatpickr('#' + input_id, cf);
-                if(min){
-                  if(value && (new Date(value).getTime() < new Date(min).getTime())   ){
+                if (min) {
+                  if (value && new Date(value).getTime() < new Date(min).getTime()) {
                     widget.bundle.form_data[widget.bundle.form_key] = '';
-                    value=''
-                    gvc.notifyDataChange(id)
+                    value = '';
+                    gvc.notifyDataChange(id);
                   }
                 }
-                if(max){
-                  if(value && (new Date(value).getTime() > new Date(`${max} 23:59:59`).getTime())   ){
+                if (max) {
+                  if (value && new Date(value).getTime() > new Date(`${max} 23:59:59`).getTime()) {
                     widget.bundle.form_data[widget.bundle.form_key] = '';
-                    value=''
-                    gvc.notifyDataChange(id)
+                    value = '';
+                    gvc.notifyDataChange(id);
                   }
                 }
-
               },
               () => {}
             );
-          }else if(type === 'time'){
+          } else if (type === 'time') {
             gvc.glitter.addStyleLink(['https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css']);
             gvc.glitter.addMtScript(
               [
@@ -175,15 +174,121 @@ white-space: normal;`;
               () => {
                 const cf: any = {
                   locale: 'zh', // locale for this instance only,
-                  disableMobile: "true",
+                  disableMobile: 'true',
                   noCalendar: true,
                   enableTime: true,
-                  dateFormat: 'H:i'
+                  dateFormat: 'H:i',
                 };
                 //@ts-ignore
                 let fp = flatpickr('#' + input_id, cf);
+              },
+              () => {}
+            );
+          }
+        },
+      };
+    });
+  }
 
+  public static globalUse(obj: { gvc: GVC; title: string; title_class?: string; title_style?: string,input_class?:string ,input_style?:string,
+    place_holder:string,
+    type:string,
+  value:string ,
+    min?:string,
+    max?:string,
+  callback:(text:string)=>void}) {
+    const html = String.raw;
+    const glitter = obj.gvc.glitter;
 
+    const gvc = obj.gvc;
+    return gvc.bindView(() => {
+      const id = gvc.glitter.getUUID();
+      const input_id = gvc.glitter.getUUID();
+      return {
+        bind: id,
+        view: () => {
+          return html`
+            <div
+              class="${obj.title_class}"
+              style="${(() => {
+                try {
+                  return (
+                    obj.title_style ||
+                    `color: black;
+margin-bottom: 5px;
+white-space: normal;`
+                  );
+                } catch {
+                  return `color: black;
+margin-bottom: 5px;
+white-space: normal;`;
+                }
+              })()}"
+            >
+              ${obj.title}
+            </div>
+            <input class="${obj.input_class}" style="${obj.input_style ?? ''}" value="${obj.value}"
+                   placeholder="${obj.place_holder}"
+                   type="${obj.type === 'date' ? 'text' : obj.type}"
+                   id="${input_id}" onchange="${gvc.event((e, event) => {
+                     obj.value = e.value;
+                     obj.callback(e.value);
+                   })}"> </input>`;
+        },
+        divCreate: {},
+        onCreate: () => {
+          if (obj.type === 'date') {
+            gvc.glitter.addStyleLink(['https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css']);
+            gvc.glitter.addMtScript(
+              [
+                'https://cdn.jsdelivr.net/npm/flatpickr',
+                new URL('./jslib/picker-zh-tw.js', gvc.glitter.root_path).href,
+              ],
+              () => {
+                const cf: any = {
+                  locale: 'zh', // locale for this instance only,
+                  disableMobile: 'true',
+                };
+                if (obj.min) {
+                  cf.minDate = new Date(`${obj.min} 00:00:00`);
+                }
+                if (obj.max) {
+                  cf.maxDate = new Date(`${obj.max} 23:59:59`);
+                }
+                //@ts-ignore
+                let fp = flatpickr('#' + input_id, cf);
+                if (obj.min) {
+                  if (obj.value && new Date(obj.value).getTime() < new Date(obj.min).getTime()) {
+                    obj.value = '';
+                    gvc.notifyDataChange(id);
+                  }
+                }
+                if (obj.max) {
+                  if (obj.value && new Date(obj.value).getTime() > new Date(`${obj.max} 23:59:59`).getTime()) {
+                    obj.value = '';
+                    gvc.notifyDataChange(id);
+                  }
+                }
+              },
+              () => {}
+            );
+          } else if (obj.type === 'time') {
+            gvc.glitter.addStyleLink(['https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css']);
+            gvc.glitter.addMtScript(
+              [
+                'https://cdn.jsdelivr.net/npm/flatpickr',
+                new URL('./jslib/picker-zh-tw.js', gvc.glitter.root_path).href,
+              ],
+              () => {
+                const cf: any = {
+                  locale: 'zh', // locale for this instance only,
+                  disableMobile: 'true',
+                  noCalendar: true,
+                  enableTime: true,
+                  dateFormat: 'H:i',
+                };
+                //@ts-ignore
+                let fp = flatpickr('#' + input_id, cf);
               },
               () => {}
             );
@@ -193,5 +298,5 @@ white-space: normal;`;
     });
   }
 }
-
+export default InputCustom;
 (window as any).glitter.setModule(import.meta.url, InputCustom);

package/lowcode/public-components/headers/header-class.js

@@ -14,6 +14,7 @@ import { Currency } from '../../glitter-base/global/currency.js';
 import { PdClass } from '../product/pd-class.js';
 import { CartModule } from '../modules/cart-module.js';
 const html = String.raw;
+const css = String.raw;
 export class HeaderClass {
     static hideShopperBtn() {
         return !window.store_info.web_type.find((dd) => {
@@ -391,4 +392,66 @@ export class HeaderClass {
             }
         });
     }
+    static getChangePagePath(gvc) {
+        return new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href;
+    }
+    static addStyle(gvc) {
+        gvc.addStyle(css `
+      .h-logo-image {
+        width: 150px;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        border-radius: 10px;
+        margin-bottom: 20px;
+      }
+
+      .h-logo-text-1 {
+        width: 150px;
+        margin-bottom: 20px;
+        font-size: 36px;
+      }
+
+      .h-logo-text-2 {
+        margin-bottom: 20px;
+        font-size: 20px;
+      }
+
+      .h-glass-div {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: rgb(107, 114, 128);
+      }
+
+      .h-20px-pointer {
+        cursor: pointer;
+        font-size: 20px;
+      }
+
+      .h-checkout-count-icon {
+        width: 18px;
+        height: 18px;
+        color: white !important;
+        background: #fe5541;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        display: flex;
+        font-weight: 500;
+      }
+
+      .h-member-button {
+        cursor: pointer;
+        display: flex;
+        width: 100px;
+        padding: 7px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: 5px;
+      }
+    `);
+    }
 }

package/lowcode/public-components/headers/header-class.ts

@@ -7,6 +7,7 @@ import { PdClass } from '../product/pd-class.js';
 import { CartModule } from '../modules/cart-module.js';
 
 const html = String.raw;
+const css = String.raw;
 
 export class HeaderClass {
   static hideShopperBtn() {
@@ -428,4 +429,68 @@ export class HeaderClass {
       }
     );
   }
+
+  static getChangePagePath(gvc: GVC) {
+    return new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href;
+  }
+
+  static addStyle(gvc: GVC) {
+    gvc.addStyle(css`
+      .h-logo-image {
+        width: 150px;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        border-radius: 10px;
+        margin-bottom: 20px;
+      }
+
+      .h-logo-text-1 {
+        width: 150px;
+        margin-bottom: 20px;
+        font-size: 36px;
+      }
+
+      .h-logo-text-2 {
+        margin-bottom: 20px;
+        font-size: 20px;
+      }
+
+      .h-glass-div {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: rgb(107, 114, 128);
+      }
+
+      .h-20px-pointer {
+        cursor: pointer;
+        font-size: 20px;
+      }
+
+      .h-checkout-count-icon {
+        width: 18px;
+        height: 18px;
+        color: white !important;
+        background: #fe5541;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        display: flex;
+        font-weight: 500;
+      }
+
+      .h-member-button {
+        cursor: pointer;
+        display: flex;
+        width: 100px;
+        padding: 7px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: 5px;
+      }
+    `);
+  }
 }