hy-dispatch-ui-v3 0.1.4 → 0.1.6

package/lib/components/appConfirmDialog/appConfirmMethod.js

@@ -6,8 +6,8 @@ var vue = require('vue');
 var useApi = require('../../hooks/useApi.js');
 var index = require('../appConfigProvider/index.js');
 var appConfirmDialog = require('./appConfirmDialog.vue.js');
-var useGlobalConfig = require('../../hooks/useGlobalConfig.js');
 var useLocale = require('../../hooks/useLocale.js');
+var useGlobalConfig = require('../../hooks/useGlobalConfig.js');
 
 function appConfirmMethod(config) {
   let container = document.createDocumentFragment();
@@ -56,9 +56,9 @@ function appConfirmMethod(config) {
 appConfirmDialog.default.tip = (props) => {
   const { t } = useLocale.useLocale();
   return appConfirmMethod({
-    dialogTitle: t("confirmDialog.prompt"),
-    title: t("confirmDialog.prompt"),
-    content: t("confirmDialog.content"),
+    dialogTitle: t("dialog.prompt"),
+    title: t("dialog.prompt"),
+    content: t("dialog.content"),
     showCancel: false,
     ...props
   });
@@ -66,19 +66,19 @@ appConfirmDialog.default.tip = (props) => {
 appConfirmDialog.default.confirm = (props) => {
   const { t } = useLocale.useLocale();
   return appConfirmMethod({
-    dialogTitle: t("confirmDialog.prompt"),
-    title: t("confirmDialog.prompt"),
-    content: t("confirmDialog.content"),
+    dialogTitle: t("dialog.prompt"),
+    title: t("dialog.prompt"),
+    content: t("dialog.content"),
     ...props
   });
 };
 appConfirmDialog.default.warning = (props) => {
   const { t } = useLocale.useLocale();
   return appConfirmMethod({
-    dialogTitle: t("confirmDialog.riskWarning"),
-    title: t("confirmDialog.prompt"),
+    dialogTitle: t("dialog.riskWarning"),
+    title: t("dialog.prompt"),
     titleClass: "text-warning",
-    content: t("confirmDialog.content"),
+    content: t("dialog.content"),
     iconColor: "rgb(var(--hy-warning))",
     ...props
   });
@@ -86,10 +86,10 @@ appConfirmDialog.default.warning = (props) => {
 appConfirmDialog.default.danger = (props) => {
   const { t } = useLocale.useLocale();
   return appConfirmMethod({
-    dialogTitle: t("confirmDialog.dangerousOperation"),
+    dialogTitle: t("dialog.dangerousOperation"),
     titleClass: "text-danger",
-    title: t("confirmDialog.prompt"),
-    content: t("confirmDialog.content"),
+    title: t("dialog.prompt"),
+    content: t("dialog.content"),
     submitType: "danger",
     iconColor: "rgb(var(--hy-danger))",
     ...props

package/lib/components/appCutter/appCutter.vue.js

@@ -0,0 +1,289 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vueCropper = require('vue-cropper');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+var index = require('../appDialog/index.js');
+var is = require('../../utils/is.js');
+var file$1 = require('../../utils/file.js');
+var useLocale = require('../../hooks/useLocale.js');
+
+import "vue-cropper/dist/index.css";
+
+import "./style/appCutter.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppCutter"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ vue.mergeModels({
+    dialogWidth: { type: [String, Number], default: 1e3 },
+    defaultImg: { type: String },
+    uploadText: {
+      type: String,
+      default: () => {
+        const { t } = useLocale.useLocale();
+        return t("cutter.uploadPicture");
+      }
+    },
+    showUpload: { type: Boolean, default: true },
+    showText: { type: Boolean, default: true },
+    showDelete: { type: Boolean, default: true },
+    maxSize: { type: Number, default: 1024 * 1024 * 2 },
+    accept: { type: String, default: "image/png,image/jpg,image/jpeg,image/gif" },
+    info: { type: Boolean, default: true },
+    outputSize: { type: Number, default: 1 },
+    outputType: { type: String, default: "jpeg" },
+    autoCrop: { type: Boolean, default: true },
+    autoCropWidth: { type: Number, default: 100 },
+    autoCropHeight: { type: Number, default: 100 },
+    fixedBox: { type: Boolean, default: false },
+    fixed: { type: Boolean, default: true },
+    fixedNumber: { type: Array },
+    full: { type: Boolean, default: true },
+    canMoveBox: { type: Boolean, default: false },
+    original: { type: Boolean, default: false },
+    centerBox: { type: Boolean, default: true },
+    infoTrue: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: String },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["confirm"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale.useLocale();
+    const modelValue = vue.useModel(__props, "modelValue");
+    const cropperRef = vue.useTemplateRef("cropperRef");
+    const uploadRef = vue.useTemplateRef("uploadRef");
+    const visible = vue.ref(false);
+    const imgSrc = vue.ref();
+    const fileInfo = vue.ref({
+      name: "",
+      src: ""
+    });
+    const imageSrc = vue.computed(() => imgSrc.value || props.defaultImg);
+    const options = vue.computed(() => ({
+      info: props.info,
+      // 裁剪框的大小信息
+      outputSize: props.outputSize,
+      // 裁剪生成图片的质量
+      outputType: props.outputType,
+      // 裁剪生成图片的格式
+      canScale: props.canScale,
+      // 图片是否允许滚轮缩放
+      autoCrop: props.autoCrop,
+      // 是否默认生成截图框
+      autoCropWidth: props.autoCropWidth,
+      // 默认生成截图框宽度
+      autoCropHeight: props.autoCropHeight,
+      // 默认生成截图框高度
+      fixedBox: props.fixedBox,
+      // 固定截图框大小 不允许改变
+      fixed: props.fixed,
+      // 是否开启截图框宽高固定比例
+      fixedNumber: props.fixedNumber,
+      // 截图框的宽高比例
+      full: props.full,
+      // 是否输出原图比例的截图
+      canMoveBox: props.canMoveBox,
+      // 截图框能否拖动
+      original: props.original,
+      // 上传图片按照原始比例渲染
+      centerBox: props.centerBox,
+      // 截图框是否被限制在图片里面
+      infoTrue: props.infoTrue
+      // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+    }));
+    function openFilePicker(param, name = "img.png") {
+      if (typeof param === "string") {
+        openCutter(param, name);
+        return;
+      }
+      if (is.isFile(param)) {
+        beforeAvatarUpload(file);
+        return;
+      }
+      uploadRef.value.click();
+    }
+    async function beforeAvatarUpload(file2) {
+      const limit = file2.size < props.maxSize;
+      if (!limit) {
+        elementPlus.ElMessage.error(
+          t("cutter.uploadPictureLimit", [file$1.sizeToTextHandler(props.maxSize)])
+        );
+        return false;
+      }
+      const result = await file$1.blobToDataURL(file2);
+      openCutter(result, file2.name);
+      return false;
+    }
+    function openCutter(src, name) {
+      visible.value = true;
+      fileInfo.value.src = src;
+      fileInfo.value.name = name;
+    }
+    function onClearHandler() {
+      imgSrc.value = "";
+      modelValue.value = null;
+      fileInfo.value = {
+        name: "",
+        src: ""
+      };
+    }
+    async function onSubmitHandler() {
+      return new Promise((resolve, reject) => {
+        cropperRef.value.getCropBlob(async (data) => {
+          var _a, _b;
+          data.name = fileInfo.value.name;
+          const res = await file$1.fileUpload(data).catch((res2) => {
+            elementPlus.ElMessage.error(res2.msg || res2);
+            reject();
+          });
+          if (res.code === 200) {
+            imgSrc.value = await file$1.blobToDataURL(data);
+            modelValue.value = ((_a = res.data) == null ? void 0 : _a.key) || ((_b = res.data) == null ? void 0 : _b.url) || res.data;
+            emits("confirm", res);
+            resolve();
+          } else {
+            elementPlus.ElMessage.error(res.msg || res);
+            reject();
+          }
+        });
+      });
+    }
+    __expose({
+      open: openFilePicker,
+      clear: onClearHandler
+    });
+    return (_ctx, _cache) => {
+      const _component_User = vue.resolveComponent("User");
+      return vue.openBlock(), vue.createElementBlock("div", { class: "inline-block" }, [
+        vue.withDirectives(vue.createVNode(
+          vue.unref(elementPlus.ElUpload),
+          {
+            accept: ".png,.jpg,.gif,.jpeg",
+            "before-upload": beforeAvatarUpload,
+            action: "",
+            class: "upload_box",
+            "show-file-list": false
+          },
+          {
+            default: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                {
+                  ref_key: "uploadRef",
+                  ref: uploadRef,
+                  class: "app-cutter-upload-box"
+                },
+                [
+                  vue.renderSlot(_ctx.$slots, "default", { src: imgSrc.value }, () => [
+                    vue.createElementVNode(
+                      "div",
+                      {
+                        class: "app-cutter-upload-card",
+                        style: vue.normalizeStyle({
+                          width: `${__props.autoCropWidth}px`,
+                          height: `${__props.autoCropHeight}px`
+                        })
+                      },
+                      [
+                        modelValue.value && imageSrc.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElImage), {
+                          key: 0,
+                          src: imageSrc.value,
+                          style: vue.normalizeStyle({
+                            width: `${__props.autoCropWidth}px`,
+                            height: `${__props.autoCropHeight}px`
+                          })
+                        }, null, 8, ["src", "style"])) : (vue.openBlock(), vue.createElementBlock(
+                          vue.Fragment,
+                          { key: 1 },
+                          [
+                            vue.createCommentVNode(' <AppIcon\n              v-else\n              svg-name="emptyHead"\n              style="width: 70px; height: 70px"\n            /> '),
+                            vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                              color: "rgb(var(--hy-auxiliary))",
+                              size: "64"
+                            }, {
+                              default: vue.withCtx(() => [
+                                vue.createVNode(_component_User)
+                              ]),
+                              _: 1
+                              /* STABLE */
+                            })
+                          ],
+                          2112
+                          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                        ))
+                      ],
+                      4
+                      /* STYLE */
+                    )
+                  ]),
+                  __props.uploadText && __props.showText ? (vue.openBlock(), vue.createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: "app-cutter-tip"
+                    },
+                    vue.toDisplayString(__props.uploadText),
+                    1
+                    /* TEXT */
+                  )) : vue.createCommentVNode("v-if", true),
+                  __props.showDelete ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                    key: 1,
+                    class: "app-cutter-delete",
+                    onClick: vue.withModifiers(($event) => onClearHandler(), ["stop"])
+                  }, [
+                    vue.createCommentVNode(' <AppIcon svg-name="delete" /> '),
+                    vue.createVNode(vue.unref(elementPlus.ElIcon), { color: "rgb(var(--hy-danger-2))" }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconsVue.Delete))
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ], 8, ["onClick"])), [
+                    [vue.vShow, modelValue.value]
+                  ]) : vue.createCommentVNode("v-if", true)
+                ],
+                512
+                /* NEED_PATCH */
+              )
+            ]),
+            _: 3
+            /* FORWARDED */
+          },
+          512
+          /* NEED_PATCH */
+        ), [
+          [vue.vShow, __props.showUpload]
+        ]),
+        vue.createVNode(vue.unref(index.AppDialog), {
+          modelValue: visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          title: vue.unref(t)("cutter.imageSegmentation"),
+          onSubmit: onSubmitHandler
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", { class: "h-[500px]" }, [
+              vue.createVNode(vue.unref(vueCropper.VueCropper), vue.mergeProps({
+                ref_key: "cropperRef",
+                ref: cropperRef,
+                img: fileInfo.value.src
+              }, options.value), null, 16, ["img"])
+            ])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["modelValue", "onUpdate:modelValue", "title"])
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appCutter/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appCutter = require('./appCutter.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppCutter = handler.withInstall(appCutter.default);
+
+exports.AppCutter = AppCutter;
+exports.default = AppCutter;

package/lib/components/appCutter/style/appCutter.scss

@@ -0,0 +1,51 @@
+.app-cutter-upload-box {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  .app-cutter-delete {
+    width: 100%;
+    height: 23px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: -23px;
+    z-index: 3;
+    transition: all 0.3s;
+    background: rgba(0, 0, 0, 0.6);
+  }
+  .app-cutter-tip {
+    width: 100%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    font-size: 14px;
+    color: rgb(var(--hy-theme));
+    text-align: center;
+    user-select: none;
+    opacity: 0;
+    transition: all 0.3s;
+  }
+  &:hover {
+    .app-cutter-delete {
+      bottom: 0;
+    }
+    .app-cutter-tip {
+      opacity: 1;
+    }
+  }
+  .app-cutter-upload-card {
+    width: 70px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(var(--hy-border));
+    border-radius: 4px;
+    background-color: rgb(var(--hy-background-2));
+    position: relative;
+  }
+}

package/lib/components/appDialog/appDialog.vue.js

@@ -0,0 +1,209 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+var useLocale = require('../../hooks/useLocale.js');
+var index = require('../appButton/index.js');
+
+import "./style/appDialog.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppDialog"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ vue.mergeModels({
+    title: { type: String, default: "\u6807\u9898" },
+    titleAlign: { type: String, default: "default" },
+    // default、center
+    showClose: { type: Boolean, default: true },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    cancelType: {
+      type: String,
+      default: "default"
+    },
+    cancelText: {
+      type: String
+    },
+    showSubmit: {
+      type: Boolean,
+      default: true
+    },
+    submitType: {
+      type: String,
+      default: "primary"
+    },
+    submitText: {
+      type: String
+    },
+    onClose: Function,
+    onCancel: Function,
+    onSubmit: Function
+  }, {
+    "modelValue": { type: Boolean, default: false },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["hide"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale.useLocale();
+    const visible = vue.useModel(__props, "modelValue");
+    const loading = vue.ref(false);
+    async function onSubmitHandler() {
+      if (loading.value) return;
+      loading.value = true;
+      if (props.onSubmit) {
+        try {
+          await props.onSubmit();
+        } catch (err) {
+          console.error(err);
+          loading.value = false;
+          return;
+        }
+      }
+      visible.value = false;
+      loading.value = false;
+      emits("hide");
+    }
+    async function onCancelHandler() {
+      if (loading.value) return;
+      loading.value = true;
+      if (props.onCancel) {
+        try {
+          await props.onCancel();
+        } catch (err) {
+          console.error(err);
+          loading.value = false;
+          return;
+        }
+      }
+      visible.value = false;
+      loading.value = false;
+      emits("hide");
+    }
+    async function onCloseHandler() {
+      if (loading.value) return;
+      loading.value = true;
+      if (props.onClose) {
+        try {
+          await props.onClose();
+        } catch (err) {
+          console.error(err);
+          loading.value = false;
+          return;
+        }
+      }
+      visible.value = false;
+      loading.value = false;
+      emits("hide");
+    }
+    __expose({});
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElDialog), vue.mergeProps({
+        modelValue: visible.value,
+        "onUpdate:modelValue": ($event) => visible.value = $event,
+        "append-to-body": true,
+        "close-on-click-modal": false,
+        "close-on-press-escape": false,
+        "show-close": false,
+        width: "37.5rem"
+      }, _ctx.$attrs), {
+        header: vue.withCtx(() => [
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(["box-border w-full border-0 border-b border-solid border-background-3 px-4 py-[10px] text-main text-sm font-bold flex justify-between items-center relative", { "!justify-center": __props.titleAlign === "center" }])
+            },
+            [
+              vue.createElementVNode(
+                "span",
+                null,
+                vue.toDisplayString(__props.title),
+                1
+                /* TEXT */
+              ),
+              __props.showClose ? (vue.openBlock(), vue.createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: vue.normalizeClass(["text-lg absolute right-4 cursor-pointer text-danger-2", { "cursor-not-allowed": loading.value }]),
+                  onClick: onCloseHandler
+                },
+                [
+                  vue.createCommentVNode(' <AppIcon svg-name="close" class="!w-[20px] !h-[20px]" /> '),
+                  vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                    size: "18",
+                    color: "rgb(var(--hy-danger-2))"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.CircleClose))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ],
+                2
+                /* CLASS */
+              )) : vue.createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", { class: "text-main" }, [
+            vue.createElementVNode("div", { class: "p-6 box-border" }, [
+              vue.renderSlot(_ctx.$slots, "default"),
+              vue.createElementVNode("div", { class: "flex items-center justify-between pt-5" }, [
+                __props.showCancel ? (vue.openBlock(), vue.createBlock(vue.unref(index.AppButton), {
+                  key: 0,
+                  type: __props.cancelType,
+                  disabled: loading.value,
+                  class: "!min-w-[120px]",
+                  onClick: onCancelHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(
+                      vue.toDisplayString(vue.unref(t)("dialog.cancel")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["type", "disabled"])) : vue.createCommentVNode("v-if", true),
+                __props.showSubmit ? (vue.openBlock(), vue.createBlock(vue.unref(index.AppButton), {
+                  key: 1,
+                  type: __props.submitType,
+                  disabled: loading.value,
+                  class: "!min-w-[120px]",
+                  onClick: onSubmitHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(
+                      vue.toDisplayString(vue.unref(t)("dialog.confirm")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["type", "disabled"])) : vue.createCommentVNode("v-if", true)
+              ])
+            ])
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["modelValue", "onUpdate:modelValue"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appDialog/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appDialog = require('./appDialog.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppDialog = handler.withInstall(appDialog.default);
+
+exports.AppDialog = AppDialog;
+exports.default = AppDialog;

package/lib/components/appSearch/appSearch.vue.js

@@ -94,10 +94,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       shrinkDestroy();
     });
     function onChangeHandler(value, column) {
-      var _a;
-      if ((_a = column.attrs) == null ? void 0 : _a.onChange) {
-        column.attrs.onChange(value);
-      }
       emits("search");
     }
     function onKeydownEnterHander(e) {
@@ -285,7 +281,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                                               }, { ref_for: true }, column.attrs, {
                                                 disabled: vue.unref(index.isDisabled)(props, column),
                                                 onKeydown: vue.withKeys(($event) => onKeydownEnterHander(), ["enter"]),
-                                                onChange: ($event) => onChangeHandler($event, column)
+                                                onChange: ($event) => onChangeHandler()
                                               }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onKeydown", "onChange"])
                                             ],
                                             2112
@@ -300,7 +296,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                                                 "onUpdate:modelValue": ($event) => __props.model[column.field] = $event
                                               }, { ref_for: true }, column.attrs, {
                                                 disabled: vue.unref(index.isDisabled)(props, column),
-                                                onChange: ($event) => onChangeHandler($event, column)
+                                                onChange: ($event) => onChangeHandler()
                                               }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onChange"])
                                             ],
                                             2112
@@ -326,7 +322,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                                               }, { ref_for: true }, column.attrs, {
                                                 disabled: vue.unref(index.isDisabled)(props, column),
                                                 timeRangeFill: column.timeRangeFill,
-                                                onChange: ($event) => onChangeHandler($event, column)
+                                                onChange: ($event) => onChangeHandler()
                                               }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "disabled", "timeRangeFill", "onChange"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$1.AppDatePicker), vue.mergeProps({
                                                 key: 1,
                                                 modelValue: __props.model[column.field],
@@ -336,7 +332,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                                               }, { ref_for: true }, column.attrs, {
                                                 disabled: vue.unref(index.isDisabled)(props, column),
                                                 timeRangeFill: column.timeRangeFill,
-                                                onChange: ($event) => onChangeHandler($event, column)
+                                                onChange: ($event) => onChangeHandler()
                                               }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "timeRangeFill", "onChange"]))
                                             ],
                                             64