ts-glitter 21.6.2 → 21.6.6

package/lowcode/Entry.js

@@ -146,7 +146,7 @@ export class Entry {
             }
             window.renderClock = (_b = window.renderClock) !== null && _b !== void 0 ? _b : createClock();
             console.log(`Entry-time:`, window.renderClock.stop());
-            glitter.share.editerVersion = 'V_21.6.2';
+            glitter.share.editerVersion = 'V_21.6.6';
             glitter.share.start = new Date();
             const vm = { appConfig: [] };
             window.saasConfig = {

package/lowcode/Entry.ts

@@ -150,7 +150,7 @@ export class Entry {
       }
       (window as any).renderClock = (window as any).renderClock ?? createClock();
       console.log(`Entry-time:`, (window as any).renderClock.stop());
-      glitter.share.editerVersion = 'V_21.6.2';
+      glitter.share.editerVersion = 'V_21.6.6';
       glitter.share.start = new Date();
       const vm = { appConfig: [] };
       (window as any).saasConfig = {

package/lowcode/backend-manager/bg-blog.js

@@ -1132,7 +1132,7 @@ function detail(gvc, cf, vm, cVm, page_tab) {
         }, 400);
         function checkSwitchToUiEditor() {
             function next() {
-                Object.keys(window.glitterInitialHelper.share).map((dd) => {
+                Object.keys(window.glitterInitialHelper.share).map(dd => {
                     if (dd.startsWith('getPageData-')) {
                         window.glitterInitialHelper.share[dd] = undefined;
                     }
@@ -1359,7 +1359,7 @@ function detail(gvc, cf, vm, cVm, page_tab) {
                                                                                     BgWidget.fullDialog({
                                                                                         gvc: gvc,
                                                                                         title: gvc2 => {
-                                                                                            return html `<div
+                                                                                            return html ` <div
                                                           class="d-flex align-items-center"
                                                           style="gap:10px;"
                                                         >
@@ -1501,6 +1501,187 @@ function detail(gvc, cf, vm, cVm, page_tab) {
                                                             html ` <div class="my-2"></div>`,
                                                             [
                                                                 html `${(() => {
+                                                                    const subVM = {
+                                                                        dataList: [],
+                                                                        id: gvc.glitter.getUUID(),
+                                                                        containerId: Tool.randomString(6),
+                                                                        loading: true,
+                                                                    };
+                                                                    console.log(`d1---->`, d1);
+                                                                    return gvc.bindView(() => {
+                                                                        return {
+                                                                            bind: subVM.id,
+                                                                            view: () => {
+                                                                                if (subVM.loading) {
+                                                                                    return BgWidget.spinner();
+                                                                                }
+                                                                                return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                                                                                    subVM.dataList = yield (() => __awaiter(this, void 0, void 0, function* () {
+                                                                                        try {
+                                                                                            switch (d1.select) {
+                                                                                                case 'product':
+                                                                                                    return yield BgProduct.getProductOpts(d1.value);
+                                                                                                case 'collection':
+                                                                                                    return d1.value;
+                                                                                                default:
+                                                                                                    return [];
+                                                                                            }
+                                                                                        }
+                                                                                        catch (e) {
+                                                                                            return [];
+                                                                                        }
+                                                                                    }))();
+                                                                                    resolve(html ` <div class="d-flex flex-column py-2">
+                                                      <div class="mx-n3  border-top"></div>
+                                                      <div
+                                                        class="d-flex align-items-center  pb-2 pt-3"
+                                                        style="gap: 10px; justify-content: space-between;"
+                                                      >
+                                                        <div class="flex-fill ">
+                                                          ${EditorElem.select({
+                                                                                        title: '',
+                                                                                        gvc: gvc,
+                                                                                        def: d1.select,
+                                                                                        array: [
+                                                                                            { value: 'collection', title: '商品系列' },
+                                                                                            { value: 'product', title: '特定商品' },
+                                                                                            { value: 'all', title: '所有商品' },
+                                                                                        ],
+                                                                                        callback: text => {
+                                                                                            d1.select = text;
+                                                                                            d1.value = [];
+                                                                                            gvc.notifyDataChange(subVM.id);
+                                                                                        },
+                                                                                    })}
+                                                        </div>
+                                                        <div
+                                                          class="${d1.select === 'all' ? `d-none` : ``}"
+                                                          style=""
+                                                        >
+                                                          ${BgWidget.save(gvc.event(() => {
+                                                                                        var _a, _b;
+                                                                                        if (d1.select === 'product') {
+                                                                                            d1.value = (_a = d1.value) !== null && _a !== void 0 ? _a : [];
+                                                                                            BgProduct.productsDialog({
+                                                                                                gvc: gvc,
+                                                                                                default: d1.value,
+                                                                                                callback: (value) => __awaiter(this, void 0, void 0, function* () {
+                                                                                                    d1.value = value;
+                                                                                                    gvc.notifyDataChange(subVM.id);
+                                                                                                }),
+                                                                                            });
+                                                                                        }
+                                                                                        else if (d1.select === 'collection') {
+                                                                                            d1.value = (_b = d1.value) !== null && _b !== void 0 ? _b : [];
+                                                                                            BgProduct.collectionsDialog({
+                                                                                                gvc: gvc,
+                                                                                                default: d1.value,
+                                                                                                callback: (value) => __awaiter(this, void 0, void 0, function* () {
+                                                                                                    d1.value = value;
+                                                                                                    gvc.notifyDataChange(subVM.id);
+                                                                                                }),
+                                                                                            });
+                                                                                        }
+                                                                                    }), (() => {
+                                                                                        switch (d1.select) {
+                                                                                            case 'product':
+                                                                                            case 'collection':
+                                                                                                return `選取`;
+                                                                                        }
+                                                                                        return ``;
+                                                                                    })())}
+                                                        </div>
+                                                      </div>
+                                                      <div class="d-flex flex-column gap-2" id="${subVM.containerId}">
+                                                        ${gvc.map(subVM.dataList.map((opt, index) => {
+                                                                                        switch (d1.select) {
+                                                                                            case 'collection':
+                                                                                                return html ` <div
+                                                                  class="d-flex align-items-center form-check-label c_updown_label gap-3"
+                                                                >
+                                                                  <span class="tx_normal">${index + 1} . ${opt}</span>
+                                                                </div>`;
+                                                                                            case 'product':
+                                                                                                return html ` <div
+                                                                  class="d-flex align-items-center form-check-label c_updown_label px-1"
+                                                                  style="justify-content: space-between"
+                                                                  data-index="${opt.key}"
+                                                                >
+                                                                  <div
+                                                                    class="d-flex align-items-center gap-3 cursor_move"
+                                                                    style="max-width: calc(100% - 50px);"
+                                                                  >
+                                                                    <i
+                                                                      class="fa-solid fa-grip-dots-vertical dragItem"
+                                                                    ></i>
+                                                                    ${BgWidget.validImageBox({
+                                                                                                    gvc,
+                                                                                                    image: opt.image,
+                                                                                                    width: 40,
+                                                                                                })}
+                                                                    <div
+                                                                      class="tx_normal ${opt.note ? 'mb-1' : ''}"
+                                                                      style="white-space:normal;"
+                                                                    >
+                                                                      ${opt.value}
+                                                                    </div>
+                                                                  </div>
+                                                                  <i
+                                                                    class="fa-regular fa-trash cursor_pointer"
+                                                                    onclick="${gvc.event(() => {
+                                                                                                    d1.value = d1.value.filter((id) => {
+                                                                                                        return id !== opt.key;
+                                                                                                    });
+                                                                                                    gvc.notifyDataChange(subVM.id);
+                                                                                                })}"
+                                                                  ></i>
+                                                                </div>`;
+                                                                                            case 'all':
+                                                                                                return ``;
+                                                                                        }
+                                                                                    }))}
+                                                      </div>
+                                                      <div class="mx-n3  border-top mt-3"></div>
+                                                    </div>`);
+                                                                                }));
+                                                                            },
+                                                                            onCreate: () => {
+                                                                                if (subVM.loading) {
+                                                                                    gvc.addMtScript([
+                                                                                        {
+                                                                                            src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js',
+                                                                                        },
+                                                                                    ], () => {
+                                                                                        const si = setInterval(() => {
+                                                                                            if (window.Sortable !== undefined) {
+                                                                                                subVM.loading = false;
+                                                                                                clearInterval(si);
+                                                                                                gvc.notifyDataChange(subVM.id);
+                                                                                            }
+                                                                                        }, 300);
+                                                                                    }, () => { });
+                                                                                }
+                                                                                else {
+                                                                                    const el = document.querySelector(`#${subVM.containerId}`);
+                                                                                    window.Sortable.create(el, {
+                                                                                        animation: 150,
+                                                                                        handle: '.dragItem',
+                                                                                        onEnd: function () {
+                                                                                            const elements = el.querySelectorAll('[data-index]');
+                                                                                            const dataIndices = Array.from(elements).map(element => element.getAttribute('data-index'));
+                                                                                            const value = dataIndices.map(index => {
+                                                                                                if (index) {
+                                                                                                    return parseInt(index, 10);
+                                                                                                }
+                                                                                            });
+                                                                                            d1.value = value;
+                                                                                            gvc.notifyDataChange(subVM.id);
+                                                                                        },
+                                                                                    });
+                                                                                }
+                                                                            },
+                                                                        };
+                                                                    });
                                                                     return gvc.bindView(() => {
                                                                         const subVM = {
                                                                             id: gvc.glitter.getUUID(),
@@ -1546,7 +1727,7 @@ function detail(gvc, cf, vm, cVm, page_tab) {
                                                     </div>
                                                     ${dataList
                                                                                     .map((opt, index) => {
-                                                                                    return html `<div
+                                                                                    return html ` <div
                                                           class="d-flex align-items-center form-check-label c_updown_label px-1"
                                                           style="justify-content: space-between"
                                                           data-index="${opt.key}"
@@ -1674,7 +1855,7 @@ function detail(gvc, cf, vm, cVm, page_tab) {
                                                     `;
                                                                             })
                                                                                 .join('') ||
-                                                                                html `<div
+                                                                                html ` <div
                                                   class="w-100 d-flex align-content-center justify-content-center"
                                                 >
                                                   尚未加入任何賣場商品
@@ -2166,10 +2347,7 @@ function loopFindProducts(config) {
     function loop(array, container_cf) {
         array.map((dd) => {
             if (dd.type === 'component' && dd.data.tag === 'SY00-normal-products') {
-                if (dd.data.refer_form_data.product_select.select !== 'product') {
-                    dd.data.refer_form_data.product_select.select = 'product';
-                    dd.data.refer_form_data.product_select.value = [];
-                }
+                console.log(`loopFindProducts`, dd.data);
                 product_select.push(dd.data.refer_form_data.product_select);
             }
             else if (dd.type === 'container') {

package/lowcode/backend-manager/bg-blog.ts

@@ -1266,11 +1266,11 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
 
     function checkSwitchToUiEditor() {
       function next() {
-        Object.keys((window as any).glitterInitialHelper.share).map((dd)=>{
-          if(dd.startsWith('getPageData-')){
-            (window as any).glitterInitialHelper.share[dd]=undefined
+        Object.keys((window as any).glitterInitialHelper.share).map(dd => {
+          if (dd.startsWith('getPageData-')) {
+            (window as any).glitterInitialHelper.share[dd] = undefined;
           }
-        })
+        });
         localStorage.setItem('preview_data', JSON.stringify(vm.data.content));
         (window.parent as any).glitter.setUrlParameter('page-id', vm.data.id);
         (window.parent as any).glitter.setUrlParameter('language', language);
@@ -1530,7 +1530,7 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                     BgWidget.fullDialog({
                                                       gvc: gvc,
                                                       title: gvc2 => {
-                                                        return html`<div
+                                                        return html` <div
                                                           class="d-flex align-items-center"
                                                           style="gap:10px;"
                                                         >
@@ -1673,6 +1673,7 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                     auth: 'all',
                     value: '',
                   };
+
                   return gvc.bindView(() => {
                     const id = gvc.glitter.getUUID();
                     return {
@@ -1692,6 +1693,199 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                       html` <div class="my-2"></div>`,
                                       [
                                         html`${(() => {
+                                          const subVM: any = {
+                                            dataList: [],
+                                            id: gvc.glitter.getUUID(),
+                                            containerId: Tool.randomString(6),
+                                            loading: true,
+                                          };
+                                          console.log(`d1---->`, d1);
+                                          return gvc.bindView(() => {
+                                            return {
+                                              bind: subVM.id,
+                                              view: () => {
+                                                if (subVM.loading) {
+                                                  return BgWidget.spinner();
+                                                }
+                                                // d1=d1.
+                                                return new Promise(async resolve => {
+                                                  subVM.dataList = await (async () => {
+                                                    try {
+                                                      switch (d1.select) {
+                                                        case 'product':
+                                                          return await BgProduct.getProductOpts(d1.value);
+                                                        case 'collection':
+                                                          return d1.value;
+                                                        default:
+                                                          return [];
+                                                      }
+                                                    } catch (e) {
+                                                      return [];
+                                                    }
+                                                  })();
+                                                  resolve(
+                                                    html` <div class="d-flex flex-column py-2">
+                                                      <div class="mx-n3  border-top"></div>
+                                                      <div
+                                                        class="d-flex align-items-center  pb-2 pt-3"
+                                                        style="gap: 10px; justify-content: space-between;"
+                                                      >
+                                                        <div class="flex-fill ">
+                                                          ${EditorElem.select({
+                                                            title: '',
+                                                            gvc: gvc,
+                                                            def: d1.select,
+                                                            array: [
+                                                              { value: 'collection', title: '商品系列' },
+                                                              { value: 'product', title: '特定商品' },
+                                                              { value: 'all', title: '所有商品' },
+                                                            ],
+                                                            callback: text => {
+                                                              d1.select = text;
+                                                              d1.value = [];
+                                                              gvc.notifyDataChange(subVM.id);
+                                                            },
+                                                          })}
+                                                        </div>
+                                                        <div
+                                                          class="${d1.select === 'all' ? `d-none` : ``}"
+                                                          style=""
+                                                        >
+                                                          ${BgWidget.save(
+                                                            gvc.event(() => {
+                                                              if (d1.select === 'product') {
+                                                                d1.value = d1.value ?? [];
+                                                                BgProduct.productsDialog({
+                                                                  gvc: gvc,
+                                                                  default: d1.value,
+                                                                  callback: async value => {
+                                                                    d1.value = value;
+                                                                    gvc.notifyDataChange(subVM.id);
+                                                                  },
+                                                                });
+                                                              } else if (d1.select === 'collection') {
+                                                                d1.value = d1.value ?? [];
+                                                                BgProduct.collectionsDialog({
+                                                                  gvc: gvc,
+                                                                  default: d1.value,
+                                                                  callback: async value => {
+                                                                    d1.value = value;
+                                                                    gvc.notifyDataChange(subVM.id);
+                                                                  },
+                                                                });
+                                                              }
+                                                            }),
+                                                            (() => {
+                                                              switch (d1.select) {
+                                                                case 'product':
+                                                                case 'collection':
+                                                                  return `選取`;
+                                                              }
+                                                              return ``;
+                                                            })()
+                                                          )}
+                                                        </div>
+                                                      </div>
+                                                      <div class="d-flex flex-column gap-2" id="${subVM.containerId}">
+                                                        ${gvc.map(
+                                                          subVM.dataList.map((opt: any, index: number) => {
+                                                            switch (d1.select) {
+                                                              case 'collection':
+                                                                return html` <div
+                                                                  class="d-flex align-items-center form-check-label c_updown_label gap-3"
+                                                                >
+                                                                  <span class="tx_normal">${index + 1} . ${opt}</span>
+                                                                </div>`;
+                                                              case 'product':
+                                                                return html` <div
+                                                                  class="d-flex align-items-center form-check-label c_updown_label px-1"
+                                                                  style="justify-content: space-between"
+                                                                  data-index="${opt.key}"
+                                                                >
+                                                                  <div
+                                                                    class="d-flex align-items-center gap-3 cursor_move"
+                                                                    style="max-width: calc(100% - 50px);"
+                                                                  >
+                                                                    <i
+                                                                      class="fa-solid fa-grip-dots-vertical dragItem"
+                                                                    ></i>
+                                                                    ${BgWidget.validImageBox({
+                                                                      gvc,
+                                                                      image: opt.image,
+                                                                      width: 40,
+                                                                    })}
+                                                                    <div
+                                                                      class="tx_normal ${opt.note ? 'mb-1' : ''}"
+                                                                      style="white-space:normal;"
+                                                                    >
+                                                                      ${opt.value}
+                                                                    </div>
+                                                                  </div>
+                                                                  <i
+                                                                    class="fa-regular fa-trash cursor_pointer"
+                                                                    onclick="${gvc.event(() => {
+                                                                      d1.value = d1.value.filter((id: number) => {
+                                                                        return id !== opt.key;
+                                                                      });
+                                                                      gvc.notifyDataChange(subVM.id);
+                                                                    })}"
+                                                                  ></i>
+                                                                </div>`;
+                                                              case 'all':
+                                                                return ``;
+                                                            }
+                                                          })
+                                                        )}
+                                                      </div>
+                                                      <div class="mx-n3  border-top mt-3"></div>
+                                                    </div>`
+                                                  );
+                                                });
+                                              },
+                                              onCreate: () => {
+                                                if (subVM.loading) {
+                                                  gvc.addMtScript(
+                                                    [
+                                                      {
+                                                        src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js',
+                                                      },
+                                                    ],
+                                                    () => {
+                                                      const si = setInterval(() => {
+                                                        if ((window as any).Sortable !== undefined) {
+                                                          subVM.loading = false;
+                                                          clearInterval(si);
+                                                          gvc.notifyDataChange(subVM.id);
+                                                        }
+                                                      }, 300);
+                                                    },
+                                                    () => {}
+                                                  );
+                                                } else {
+                                                  const el = document.querySelector(
+                                                    `#${subVM.containerId}`
+                                                  ) as HTMLElement;
+                                                  (window as any).Sortable.create(el, {
+                                                    animation: 150,
+                                                    handle: '.dragItem',
+                                                    onEnd: function () {
+                                                      const elements = el.querySelectorAll('[data-index]');
+                                                      const dataIndices = Array.from(elements).map(element =>
+                                                        element.getAttribute('data-index')
+                                                      );
+                                                      const value = dataIndices.map(index => {
+                                                        if (index) {
+                                                          return parseInt(index, 10);
+                                                        }
+                                                      });
+                                                      d1.value = value;
+                                                      gvc.notifyDataChange(subVM.id);
+                                                    },
+                                                  });
+                                                }
+                                              },
+                                            };
+                                          });
                                           return gvc.bindView(() => {
                                             const subVM = {
                                               id: gvc.glitter.getUUID(),
@@ -1741,7 +1935,7 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                     </div>
                                                     ${dataList
                                                       .map((opt, index) => {
-                                                        return html`<div
+                                                        return html` <div
                                                           class="d-flex align-items-center form-check-label c_updown_label px-1"
                                                           style="justify-content: space-between"
                                                           data-index="${opt.key}"
@@ -1884,7 +2078,7 @@ function detail(gvc: GVC, cf: any, vm: any, cVm: any, page_tab: 'page' | 'hidden
                                                     `;
                                                   })
                                                   .join('') ||
-                                                html`<div
+                                                html` <div
                                                   class="w-100 d-flex align-content-center justify-content-center"
                                                 >
                                                   尚未加入任何賣場商品
@@ -2415,10 +2609,11 @@ function loopFindProducts(config: any) {
   function loop(array: any, container_cf: any) {
     array.map((dd: any) => {
       if (dd.type === 'component' && dd.data.tag === 'SY00-normal-products') {
-        if (dd.data.refer_form_data.product_select.select !== 'product') {
-          dd.data.refer_form_data.product_select.select = 'product';
-          dd.data.refer_form_data.product_select.value = [];
-        }
+        // if (dd.data.refer_form_data.product_select.select !== 'product') {
+        //   dd.data.refer_form_data.product_select.select = 'product';
+        //   dd.data.refer_form_data.product_select.value = [];
+        // }
+        console.log(`loopFindProducts`, dd.data);
         product_select.push(dd.data.refer_form_data.product_select);
       } else if (dd.type === 'container') {
         loop(dd.data.setting, dd);

package/lowcode/backend-manager/bg-widget.js

@@ -2329,8 +2329,8 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
     static multiCheckboxContainer(gvc, data, def, callback, obj) {
         var _b;
         const id = gvc.glitter.getUUID();
-        const inputColor = obj && obj.readonly ? '#808080' : undefined;
-        const randomString = obj && obj.single ? this.getWhiteDotClass(gvc, inputColor) : this.getCheckedClass(gvc, inputColor);
+        const isReadonly = Boolean(obj && obj.readonly);
+        const randomString = (obj === null || obj === void 0 ? void 0 : obj.single) ? this.getWhiteDotClass(gvc, isReadonly) : this.getCheckedClass(gvc, isReadonly);
         const viewId = Tool.randomString(5);
         return gvc.bindView({
             bind: viewId,
@@ -2394,9 +2394,8 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
         });
     }
     static tripletCheckboxContainer(gvc, name, def, callback, obj) {
-        const inputColor = undefined;
-        const checkedString = this.getCheckedClass(gvc, inputColor);
-        const squareString = this.getSquareClass(gvc, inputColor);
+        const checkedString = this.getCheckedClass(gvc);
+        const squareString = this.getSquareClass(gvc);
         const viewId = Tool.randomString(5);
         const randomKey = Tool.randomString(5);
         return gvc.bindView({
@@ -2458,8 +2457,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
         var _b;
         obj.type = (_b = obj.type) !== null && _b !== void 0 ? _b : 'single';
         const gvc = obj.gvc;
-        const inputColor = undefined;
-        const randomString = obj.type === 'single' ? this.getWhiteDotClass(gvc, inputColor) : this.getCheckedClass(gvc, inputColor);
+        const randomString = obj.type === 'single' ? this.getWhiteDotClass(gvc) : this.getCheckedClass(gvc);
         return html `
       ${obj.title ? html ` <div class="tx_normal fw-normal">${obj.title}</div>` : ``}
       ${obj.gvc.bindView(() => {
@@ -4406,9 +4404,14 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
         color = color.replace('#', '%23');
         return `"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='${color}'%3e%3cpath d='M225.813 48.907L128 146.72 30.187 48.907 0 79.093l128 128 128-128z'/%3e%3c/svg%3e"`;
     }
-    static checkedDataImage(color) {
-        color = color.replace('#', '%23');
-        return `"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='${color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"`;
+    static checkedDataImage() {
+        const color = '#fff'.replace('#', '%23');
+        return `"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%3E%0A%20%20%3Crect%20y%3D%220.5%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22%23393939%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4.5%209L7%2011.5L11.5%205.5%22%20stroke%3D%22${color}%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E"`;
+    }
+    static readonlyCheckedDataImage() {
+        const color = '#fff'.replace('#', '%23');
+        const bgr = '#8d8d8d'.replace('#', '%23');
+        return `"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%3E%0A%20%20%3Crect%20y%3D%220.5%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22${bgr}%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4.5%209L7%2011.5L11.5%205.5%22%20stroke%3D%22${color}%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E"`;
     }
     static squareDataImage(color) {
         color = color.replace('#', '%23');
@@ -4422,17 +4425,17 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
         color = color.replace('#', '%23');
         return `"data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='16' height='16' rx='8' fill='${color}'/%3e%3crect x='4' y='4' width='8' height='8' rx='4' fill='white'/%3e%3c/svg%3e"`;
     }
-    static getCheckedClass(gvc, color) {
-        const className = color ? 'checked-image' : 'checked-image-readonly';
+    static getCheckedClass(gvc, readonly) {
+        const className = readonly ? 'checked-image-readonly' : 'checked-image';
         gvc.addStyle(`
       .${className} {
         min-width: 1.25rem;
         min-height: 1.25rem;
       }
       .${className}:checked[type='checkbox'] {
-        border: 2px solid ${color !== null && color !== void 0 ? color : '#000'};
+        border: 0;
         background-color: #fff;
-        background-image: url(${this.checkedDataImage(color !== null && color !== void 0 ? color : '#000')});
+        background-image: url(${readonly ? this.readonlyCheckedDataImage() : this.checkedDataImage()});
         background-position: center center;
       }
     `);
@@ -4469,8 +4472,8 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
     `);
         return className;
     }
-    static getWhiteDotClass(gvc, color) {
-        const className = color ? 'white-dot-image' : 'white-dot-image-readonly';
+    static getWhiteDotClass(gvc, readonly) {
+        const className = readonly ? 'white-dot-image-readonly' : 'white-dot-image';
         gvc.addStyle(`
       .${className} {
         min-width: 1.15rem;
@@ -4480,7 +4483,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
       .${className}:checked[type='radio'] {
         border: 0px solid #000;
         background-color: #fff;
-        background-image: url(${this.whiteDotDataImage(color !== null && color !== void 0 ? color : '#000')});
+        background-image: url(${this.whiteDotDataImage(readonly ? '#808080' : '#000')});
         background-position: center center;
       }
     `);