cc1-ui 0.0.1

package/dist/index-BGzY32VF.js

@@ -0,0 +1,145 @@
+import { defineComponent, reactive, watch, onMounted, ref, createElementBlock, openBlock, normalizeStyle } from 'vue';
+
+const viewBoxStr = "#{viewBox}";
+const viewBoxDefault = "0 0 1024 1024";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    /**
+     * 加载静态资源地址，如https://cdn.xx.xx/vicon或者/static/vicon
+     */
+    url: { default: "" },
+    /**
+     * 使用的图标库名称，默认为'ant'
+     */
+    lib: { default: "" },
+    /**
+     * 使用的图标名称，默认为'up'
+     */
+    name: { default: "" },
+    /**
+     * 使用的图标大小，默认为'20'
+     */
+    size: { default: "" },
+    /**
+     * 使用的图标颜色，默认为'currentColor'
+     */
+    color: { default: "" },
+    /**
+     * 如果为true，使用设计的图标颜色使得color属性无效。默认为false，一般用于多色或固定色图标
+     */
+    nofill: { default: false },
+    /**
+     * 图标宽高显示单位，默认为px
+     */
+    unit: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const conf = reactive({
+      props: {
+        url: "",
+        lib: "",
+        name: "",
+        size: "",
+        color: "",
+        nofill: "",
+        unit: ""
+      }
+    });
+    const viconConf = VConf.vicon;
+    const loadProps = () => {
+      Object.keys(conf.props).forEach((key) => {
+        conf.props[key] = StrUtil.isNull(props[key]) ? viconConf[key] : props[key];
+      });
+    };
+    watch(
+      () => [props.name, props.lib, props.color, props.size, props.nofill],
+      () => {
+        init();
+      }
+    );
+    onMounted(() => {
+      init();
+    });
+    const iconRef = ref({});
+    const str = {
+      svg: [
+        `<svg style="width: 1em;height: 1em;vertical-align: middle;overflow: hidden;" viewBox="${viewBoxStr}" version="1.1" xmlns="http://www.w3.org/2000/svg">`,
+        "</svg>"
+      ],
+      get0: (replacestr) => {
+        return str.svg[0].replace(viewBoxStr, replacestr);
+      },
+      getPath: (param) => {
+        return `<path d="${param.d}" fill="${param.fill ?? "currentColor"}" />`;
+      }
+    };
+    const init = async () => {
+      loadProps();
+      const color = ["color:black;", "color:red;"];
+      if (StrUtil.isNull(conf.props.name)) return;
+      const _url = `${conf.props.url}/${conf.props.lib}/${conf.props.name}.json`;
+      const _urlAll = `${conf.props.url}/${conf.props.lib}/_all.json`;
+      let filestr;
+      let _icon_resource_all = await viconConf.fun.getRes(_urlAll);
+      let _icon_resource = await viconConf.fun.getRes(_url);
+      if (_icon_resource_all) {
+        if (typeof _icon_resource_all === "string") _icon_resource_all = JSON.parse(_icon_resource_all);
+        filestr = _icon_resource_all[conf.props.name];
+      } else if (_icon_resource) {
+        filestr = _icon_resource;
+      } else {
+        filestr = await viconConf.fun.getResorce(_url, true);
+      }
+      if (!filestr) {
+        console.info(
+          `%c icon <%c${conf.props.lib}-${conf.props.name}%c> 不存在`,
+          `${color[0]} font-size:12px`,
+          color[1],
+          color[0]
+        );
+        return;
+      }
+      if (typeof filestr === "string") filestr = JSON.parse(filestr);
+      let res = "";
+      let objt = filestr;
+      objt.fill = objt.fill ?? { currentColor: [0] };
+      res = str.get0(objt.viewBox ?? viewBoxDefault);
+      const getFill = (fill, index) => {
+        const fillkeys = Object.keys(fill);
+        const colors = conf.props.color;
+        for (let i = 0; i < fillkeys.length; i++) {
+          const key = fillkeys[i];
+          const nums = fill[key];
+          if (nums.includes(index)) {
+            if (!conf.props.nofill && colors) {
+              if (Array.isArray(colors)) return colors[i] ?? colors[colors.length - 1];
+              return colors;
+            } else {
+              return key;
+            }
+          }
+        }
+        return "currentColor";
+      };
+      objt.d.forEach((item, index) => {
+        res += str.getPath({
+          d: item,
+          fill: getFill(objt.fill, index)
+        });
+      });
+      res += str.svg[1];
+      if (iconRef.value) iconRef.value.innerHTML = res;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "iconRef",
+        ref: iconRef,
+        style: normalizeStyle([{ "display": "inline-flex" }, { fontSize: `${conf.props.size}${conf.props.unit}`, color: conf.props.color }])
+      }, null, 4);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/index-BlU8Q4GS.js

@@ -0,0 +1,184 @@
+import { defineComponent, reactive, getCurrentInstance, watch, onMounted, createElementBlock, openBlock, mergeProps } from 'vue';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    /**
+     * 加载静态资源地址，如https://cdn.xx.xx/vsicon或者/static/vsicon
+     */
+    url: { default: "" },
+    /**
+     * 使用的图标库名称，默认为''
+     */
+    lib: { default: "" },
+    /**
+     * 使用的图标名称，默认为'up'
+     */
+    name: { default: "" },
+    /**
+     * 使用的图标大小，默认为'20'
+     */
+    size: { default: "" },
+    /**
+     * 图标大小-宽
+     */
+    width: { default: void 0 },
+    /**
+     * 图标大小-高
+     */
+    height: { default: void 0 },
+    /**
+     * 使用的图标颜色，默认为[]
+     */
+    color: { default: [] },
+    /**
+     * 鼠标悬浮时使用的图标颜色，默认为[]
+     */
+    hoverColor: { default: void 0 },
+    /**
+     * 用于hover时的dom元素id或者class，默认为undefined
+     */
+    pid: { default: void 0 },
+    /**
+     * 图标宽高显示单位，默认为px
+     */
+    unit: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const viconConf = VConf.vsicon;
+    const svgToUrl = (url) => {
+      var encoded = url.replace(/<!--(.*)-->/g, "").replace(/[\r\n]/g, " ").replace(/"/g, `'`).replace(/%/g, "%25").replace(/&/g, "%26").replace(/#/g, "%23").replace(/{/g, "%7B").replace(/}/g, "%7D").replace(/</g, "%3C").replace(/>/g, "%3E");
+      let res = `"data:image/svg+xml,${encoded}"`;
+      return res;
+    };
+    const colorTag = ["stop-color", "fill", "stroke"];
+    const replaceColor = (str, colorStr, _color) => {
+      for (let i = 0; i < colorTag.length; i++) {
+        const _tag = colorTag[i];
+        str = str.replace(new RegExp(`${_tag}="${colorStr}"`, "g"), `${_tag}="${_color}"`);
+      }
+      return str;
+    };
+    const conf = reactive({
+      props: {
+        url: "",
+        lib: "",
+        name: "",
+        size: "",
+        width: void 0,
+        height: void 0,
+        color: [],
+        pid: void 0,
+        hoverColor: void 0,
+        unit: "px"
+      },
+      getProps: () => {
+        Object.keys(conf.props).forEach((key) => {
+          if (!StrUtil.isNull(viconConf[key])) {
+            conf.props[key] = viconConf[key];
+          }
+          if (!StrUtil.isNull(props[key])) {
+            conf.props[key] = props[key];
+          }
+        });
+      },
+      dom: null,
+      domHover: false,
+      domMouseenter: () => {
+        conf.domHover = true;
+        conf.init();
+      },
+      domMouseleave: () => {
+        conf.domHover = false;
+        conf.init();
+      },
+      setHover: (ischange) => {
+        if (ischange) {
+          if (conf.dom) {
+            conf.dom.removeEventListener("mouseenter", conf.domMouseenter);
+            conf.dom.removeEventListener("mouseleave", conf.domMouseleave);
+          }
+          conf.domHover = false;
+          conf.dom = null;
+        }
+        if (conf.dom || !props.hoverColor) return;
+        if (!props.pid) {
+          conf.dom = getCurrentInstance()?.proxy?.$el?.parentElement;
+        } else {
+          conf.dom = document.getElementById(props.pid);
+        }
+        if (!conf.dom) return;
+        conf.dom.addEventListener("mouseenter", conf.domMouseenter);
+        conf.dom.addEventListener("mouseleave", conf.domMouseleave);
+      },
+      content: "",
+      colorsObj: {},
+      /**
+       * 渲染图标
+       */
+      init: async () => {
+        const sourceColor = Array.isArray(conf.props.color) ? conf.props.color : [conf.props.color];
+        const sourceHoverColor = Array.isArray(conf.props.hoverColor) ? conf.props.hoverColor : [conf.props.hoverColor];
+        let color = conf.domHover ? sourceHoverColor : sourceColor;
+        if (StrUtil.isNull(conf.props.name)) return;
+        const _url = `${conf.props.url?.length ? conf.props.url : ""}/${conf.props.lib?.length ? conf.props.lib + "/" : ""}${conf.props.name}.svg`;
+        let filestr;
+        let _icon_resource = await viconConf.fun.getRes(_url);
+        if (_icon_resource) {
+          filestr = _icon_resource;
+        } else {
+          filestr = await viconConf.fun.getResorce(_url, true);
+        }
+        let colors = [];
+        if (conf.colorsObj[conf.props.name]) {
+          colors = conf.colorsObj[conf.props.name];
+        } else {
+          const colorRegex = /(?:stop-color|fill|stroke)="(#?\w+)"/g;
+          let match;
+          while ((match = colorRegex.exec(filestr)) !== null) {
+            colors.push(match[1]);
+          }
+          colors = colors.filter((v) => v !== "none" && v.length > 0);
+          colors = [...new Set(colors)];
+          conf.colorsObj[conf.props.name] = colors;
+        }
+        for (let i = 0; i < colors.length; i++) {
+          const colorStr = colors[i];
+          const _color = color[i];
+          if (_color) {
+            filestr = replaceColor(filestr, colorStr, _color);
+          }
+        }
+        conf.content = svgToUrl(filestr);
+      }
+    });
+    watch(
+      () => [props.name, props.lib, props.color, props.hoverColor],
+      () => {
+        if (props.hoverColor !== conf.props.hoverColor) {
+          conf.setHover(true);
+        }
+        conf.getProps();
+        conf.init();
+      }
+    );
+    conf.getProps();
+    conf.init();
+    onMounted(() => {
+      conf.setHover();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        style: [{ "display": "inline-flex" }, {
+          "background-image": "url(" + conf.content + ")",
+          "background-size": "100% 100%",
+          width: (__props.width ? conf.props.width : conf.props.size) + conf.props.unit,
+          height: (__props.height ? conf.props.height : conf.props.size) + conf.props.unit
+        }]
+      }, _ctx.$attrs), null, 16);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/index-BvvdDtUd.js

@@ -0,0 +1,56 @@
+import { defineComponent, ref, reactive, onMounted, createElementBlock, openBlock, createElementVNode, normalizeStyle, withDirectives, toDisplayString, vShow } from 'vue';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    theme: { default: "default" },
+    value: { default: false },
+    offLabel: { default: "" },
+    onLabel: { default: "" }
+  },
+  emits: ["update:value"],
+  setup(__props, { emit: __emit }) {
+    const switchRef = ref({});
+    const conf = reactive({
+      width: 0,
+      theme: {
+        default: {
+          bgColor: ["#FF7C43", "#A57E71"],
+          btnColor: ["#FFFFFF", "#FFFFFF"]
+        }
+      }
+    });
+    onMounted(() => {
+      conf.width = switchRef.value.clientWidth;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "v-switch-container",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:value", !__props.value)),
+        ref_key: "switchRef",
+        ref: switchRef
+      }, [
+        createElementVNode("div", {
+          class: "v-switch-circle",
+          style: normalizeStyle({ background: `${__props.value ? conf.theme[__props.theme].bgColor[0] : conf.theme[__props.theme].bgColor[1]}` })
+        }, [
+          withDirectives(createElementVNode("span", { style: { "left": "5px" } }, toDisplayString(__props.onLabel), 513), [
+            [vShow, __props.value]
+          ]),
+          withDirectives(createElementVNode("span", { style: { "right": "5px" } }, toDisplayString(__props.offLabel), 513), [
+            [vShow, !__props.value]
+          ]),
+          createElementVNode("span", {
+            class: "v-switch-btn",
+            style: normalizeStyle({
+              transform: `translateX(${__props.value ? conf.width - 18 - 5 : "3"}px)`,
+              background: `${__props.value ? conf.theme[__props.theme].btnColor[0] : conf.theme[__props.theme].btnColor[1]}`
+            })
+          }, null, 4)
+        ], 4)
+      ], 512);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/index-CpyM3z5X.js

@@ -0,0 +1,185 @@
+import { defineComponent, ref, reactive, watch, onMounted, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, withDirectives, vModelText, normalizeStyle, Transition, withCtx, withModifiers, normalizeClass, Fragment, renderList, toDisplayString, vShow } from 'vue';
+import { Scope } from 'tools-vue3';
+
+const _hoisted_1 = { style: { "width": "calc(100% - 18px)" } };
+const _hoisted_2 = ["readonly", "autocomplete", "placeholder"];
+const _hoisted_3 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    list: { default: [] },
+    active: { default: "" },
+    placeholder: { default: "请选择" },
+    /**
+     * 可输入进行过滤
+     */
+    filterable: { default: null }
+  },
+  emits: ["update:active", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const dialogRef = ref({});
+    const inputRef = ref({});
+    const timer = Scope.Timer();
+    const conf = reactive({
+      activeItem: { value: "", label: "" },
+      input: {
+        /**
+         * 初始化选项
+         */
+        initValue: () => {
+          const _item = props.list.find((item) => item.value === props.active);
+          if (_item) {
+            if (conf.activeItem.value !== _item.value) {
+              conf.activeItem = _item;
+              conf.input.setValue(_item);
+            }
+          }
+        },
+        label: "",
+        setValue: (item) => {
+          const bvalue = conf.activeItem.value;
+          if (props.filterable === null || item) {
+            if (item?.label) {
+              conf.activeItem = item;
+              const _item = props.list.find((item2) => item2.value === conf.activeItem.value);
+              conf.input.label = _item ? _item.label : "";
+            }
+          } else {
+            const _item = props.list.find((item2) => item2.value === conf.input.label);
+            if (_item) {
+              conf.activeItem = _item;
+              conf.input.label = _item.label;
+            } else {
+              conf.input.label = conf.activeItem.label;
+            }
+          }
+          emit("update:active", conf.activeItem.value);
+          if (bvalue !== conf.activeItem.value) {
+            emit("change", conf.activeItem);
+          }
+        },
+        readonly: props.filterable == null,
+        autocomplete: "off"
+      },
+      dialog: {
+        show: false,
+        transition: "fade-up",
+        position: {
+          maxHeight: 274
+        },
+        click: (item) => {
+          conf.dialog.close(item);
+        },
+        closeFun: () => {
+        },
+        close: (item) => {
+          conf.dialog.show = false;
+          conf.dialog.closeFun();
+          conf.input.readonly = true;
+          conf.input.setValue(item);
+        },
+        open: () => {
+          conf.dialog.closeFun();
+          if (conf.dialog.show) {
+            conf.dialog.close();
+            return;
+          }
+          conf.dialog.show = true;
+          conf.input.readonly = props.filterable == null;
+          setTimeout(() => {
+            conf.dialog.closeFun = DomUtil.listener(window, "click", conf.dialog.close).remove;
+          }, 10);
+        }
+      }
+    });
+    watch(
+      () => props.active,
+      () => conf.input.initValue()
+    );
+    onMounted(() => {
+      conf.input.initValue();
+      timer.on(() => {
+        if (!conf.dialog.show) return;
+        if (inputRef.value?.getBoundingClientRect) {
+          const inputrect = inputRef.value.getBoundingClientRect();
+          if (dialogRef.value?.getBoundingClientRect) {
+            const rect = dialogRef.value.getBoundingClientRect();
+            if (inputrect.top + inputrect.height + rect.height > document.body.clientHeight) {
+              dialogRef.value.style.top = "";
+              dialogRef.value.style.bottom = inputrect.height + 10 + "px";
+              conf.dialog.transition = "fade-down";
+            } else {
+              dialogRef.value.style.top = inputrect.height + 10 + "px";
+              dialogRef.value.style.bottom = "";
+              conf.dialog.transition = "fade-up";
+            }
+          }
+        }
+      }, 10);
+    });
+    return (_ctx, _cache) => {
+      const _component_VIcon = resolveComponent("VIcon");
+      return openBlock(), createElementBlock("div", {
+        class: "v-select",
+        onClick: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => conf.dialog.open && conf.dialog.open(...args)),
+        ref_key: "inputRef",
+        ref: inputRef
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => conf.input.label = $event),
+            type: "text",
+            readonly: conf.input.readonly,
+            autocomplete: conf.input.autocomplete,
+            placeholder: __props.placeholder
+          }, null, 8, _hoisted_2), [
+            [vModelText, conf.input.label]
+          ])
+        ]),
+        createElementVNode("div", {
+          style: normalizeStyle([{ "display": "inline-flex", "transition": "all 0.3s" }, { transform: conf.dialog.show ? "rotateZ(90deg)" : "" }])
+        }, [
+          createVNode(_component_VIcon, {
+            type: "right",
+            color: "currentColor"
+          })
+        ], 4),
+        createVNode(Transition, {
+          name: conf.dialog.transition
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              class: "v-select-dialog",
+              onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+              }, ["stop"])),
+              ref_key: "dialogRef",
+              ref: dialogRef
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(["v-select-dialog-arrows", [conf.dialog.transition === "fade-up" ? "down" : "up"]])
+              }, null, 2),
+              createElementVNode("div", {
+                style: normalizeStyle([{ maxHeight: conf.dialog.position.maxHeight + "px" }, { "overflow-y": "auto" }])
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item) => {
+                  return openBlock(), createElementBlock("div", {
+                    class: normalizeClass(["v-select-dialog-item", [conf.activeItem.value === item.value ? "selected" : ""]]),
+                    onClick: withModifiers(($event) => conf.dialog.click(item), ["stop"])
+                  }, toDisplayString(item.label), 11, _hoisted_3);
+                }), 256))
+              ], 4)
+            ], 512), [
+              [vShow, conf.dialog.show]
+            ])
+          ]),
+          _: 1
+        }, 8, ["name"])
+      ], 512);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/index-l4J1-e0K.js

@@ -0,0 +1,50 @@
+import { defineComponent, reactive, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, normalizeStyle, renderSlot } from 'vue';
+
+const _hoisted_1 = { class: "v-scale-box" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const conf = reactive({
+      transform: "scale(1)",
+      top: 0,
+      left: 0
+    });
+    const autoSize = () => {
+      const w = document.body.scrollWidth;
+      const h = document.body.scrollHeight;
+      const sw = w / 1920;
+      const sh = h / 1080;
+      let res = 1;
+      res = sw < sh ? sw : sh;
+      const resW = 1920 * res;
+      const resH = 1080 * res;
+      conf.top = (h - resH) / 2;
+      conf.left = (w - resW) / 2;
+      conf.transform = "scale(" + res.toFixed(4) + ")";
+    };
+    onMounted(() => {
+      autoSize();
+      window.addEventListener("resize", autoSize);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", autoSize);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: "v-scale-container",
+          style: normalizeStyle({ top: `${conf.top}px`, left: `${conf.left}px` })
+        }, [
+          createElementVNode("div", {
+            class: "v-scale-content",
+            style: normalizeStyle({ transform: conf.transform })
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 4)
+        ], 4)
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };