@touchvue/ui 1.0.0-beta.2 → 1.0.0-beta.3

package/es/packages/components/progress/src/Progress.vue2.mjs

@@ -0,0 +1,256 @@
+import { defineComponent, ref, computed, onMounted, nextTick, onBeforeUnmount, watch } from 'vue';
+
+var _sfc_main = defineComponent({
+  name: "ToProgress",
+  props: {
+    // 类型：normal 或 loading
+    type: {
+      type: String,
+      default: "",
+      validator: (val) => ["normal", "loading", "circle"].includes(val)
+    },
+    // 进度条百分比，0~100的数字
+    value: {
+      type: [Number, String],
+      default: 0,
+      required: true
+    },
+    // 模式
+    mode: {
+      type: String,
+      default: "default"
+    },
+    // 文字
+    text: {
+      type: String,
+      default: ""
+    },
+    // 标题
+    title: {
+      type: String,
+      default: void 0
+    },
+    // 内容
+    content: {
+      type: String,
+      default: ""
+    },
+    // 进度位置：outer(在外)、inner(在内)、none(不显示进度)
+    textPosition: {
+      type: String,
+      default: "inner",
+      validator: (val) => ["outer", "inner", "none"].includes(val)
+    },
+    // 显示值的宽度设置
+    textWidth: {
+      type: [Number, String],
+      default: "auto"
+    },
+    // 颜色
+    color: {
+      type: String,
+      default: "primary"
+    },
+    // 宽度
+    width: {
+      type: [Number, String],
+      default: ""
+    },
+    // 进度条大小
+    barSize: {
+      type: [Number, String],
+      default: 1
+    }
+  },
+  setup(props) {
+    const elRef = ref(null);
+    const radius = ref(0);
+    const thick = ref(0);
+    const barRadius = ref(0);
+    const barThick = ref(0);
+    const em = ref(0);
+    const offsetWidth = ref(0);
+    const iPercentage = ref("");
+    const getColor = (color) => {
+      let c = color;
+      let colors = ["primary", "success", "warning", "danger", "info", "secondary", "fg"];
+      let number = Math.round(Math.random() * 6);
+      if (color === "radam") {
+        c = colors[number];
+      }
+      switch (c) {
+        case "fg":
+          return "#000";
+        case "info":
+          return "#999";
+        case "warning":
+          return "#f3b100";
+        case "success":
+          return "#8fc320";
+        case "danger":
+          return "#e40077";
+        case "secondary":
+          return "#4d5b65";
+        case "primary":
+          return "#0085d0";
+        default:
+          return color;
+      }
+    };
+    const circumference = computed(() => 2 * Math.PI * radius.value);
+    const strokeDasharray = computed(() => circumference.value);
+    const strokeDashoffset = computed(() => circumference.value * (1 - Number(props.value) / 100));
+    const textValue = computed(() => {
+      if (props.text) {
+        return props.text;
+      } else {
+        return iPercentage.value;
+      }
+    });
+    const titleValue = computed(() => {
+      if (props.title !== void 0) {
+        return props.title;
+      } else {
+        const percentValue = Number(iPercentage.value.replace("%", ""));
+        if (percentValue >= 100 && props.type === "circle") {
+          return "100%";
+        }
+        return iPercentage.value;
+      }
+    });
+    const setClass = computed(() => {
+      const arr = [];
+      arr.push(`color-${props.color}`);
+      if (props.textPosition) {
+        arr.push(`text-position-${props.textPosition}`);
+      }
+      if (props.type) {
+        arr.push(`type-${props.type}`);
+      }
+      if (props.mode) {
+        arr.push(`mode-${props.mode}`);
+      }
+      return arr;
+    });
+    const setStyle = computed(() => {
+      const obj = {};
+      if (props.width) {
+        if (props.type === "circle") {
+          if (!isNaN(Number(props.width))) {
+            const size = Number(props.width) + "em";
+            obj.width = size;
+            obj.height = size;
+          } else if (props.width === "full") {
+            obj.width = "100%";
+            obj.aspectRatio = "1/1";
+          } else {
+            obj.width = props.width;
+            obj.height = props.width;
+          }
+        } else {
+          if (!isNaN(Number(props.width))) {
+            obj.width = props.width + "em";
+          } else if (props.width === "full") {
+            obj.width = "100%";
+          } else {
+            obj.width = props.width;
+          }
+        }
+      }
+      return obj;
+    });
+    const setBarStyle = computed(() => {
+      return "width:" + iPercentage.value;
+    });
+    const setTextStyle = computed(() => {
+      if (props.textWidth === "auto") {
+        return "";
+      } else {
+        return "width:" + props.textWidth + "em";
+      }
+    });
+    const setPercentage = () => {
+      let p = 0;
+      if ((props.value + "").indexOf("%") > -1) {
+        p = Number(props.value.replace("%", ""));
+      } else {
+        p = Number(props.value);
+      }
+      if (p < 0) {
+        p = 0;
+      }
+      iPercentage.value = p + "%";
+    };
+    const init = () => {
+      let timer = null;
+      timer = window.setTimeout(() => {
+        em.value = 12;
+        const el = document.querySelector(".to-progress");
+        if (el) {
+          if (props.type === "circle") {
+            const circleBgTick = parseFloat(
+              getComputedStyle(elRef.value).getPropertyValue("--thick")
+            );
+            const circleBarTick = parseFloat(
+              getComputedStyle(elRef.value).getPropertyValue("--bar-thick")
+            );
+            const width = parseFloat(getComputedStyle(elRef.value).getPropertyValue("--width"));
+            thick.value = circleBgTick / width * 100;
+            barThick.value = circleBarTick / width * 100;
+            radius.value = 50 - Math.max(thick.value, barThick.value) / 2;
+            offsetWidth.value = 120;
+            if (typeof props.width === "number") {
+              offsetWidth.value = props.width * 16;
+            } else if (props.width === "full" && el.parentElement) {
+              offsetWidth.value = el.parentElement.offsetWidth;
+            }
+          } else {
+            offsetWidth.value = el.offsetWidth;
+          }
+        }
+        if (timer) {
+          clearTimeout(timer);
+          timer = null;
+        }
+      }, 200);
+    };
+    onMounted(() => {
+      window.addEventListener("resize", init);
+      nextTick(() => {
+        init();
+      });
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", init);
+    });
+    watch(
+      () => props.value,
+      () => {
+        setPercentage();
+      }
+    );
+    setPercentage();
+    return {
+      thick,
+      elRef,
+      em,
+      barThick,
+      barRadius,
+      offsetWidth,
+      iPercentage,
+      getColor,
+      radius,
+      strokeDasharray,
+      strokeDashoffset,
+      textValue,
+      titleValue,
+      setClass,
+      setStyle,
+      setBarStyle,
+      setTextStyle
+    };
+  }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=Progress.vue2.mjs.map

package/es/packages/components/progress/src/Progress.vue2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.vue2.mjs","sources":["../../../../../../packages/components/progress/src/Progress.vue"],"sourcesContent":["<template>\n\t<span ref=\"elRef\" class=\"to-progress\" :class=\"setClass\" :style=\"setStyle\">\n\t\t<template v-if=\"type === 'circle'\">\n\t\t\t<svg class=\"svg\" viewBox=\"0 0 100 100\">\n\t\t\t\t<circle\n\t\t\t\t\tcx=\"50\"\n\t\t\t\t\tcy=\"50\"\n\t\t\t\t\t:r=\"radius\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t:stroke-width=\"thick\"\n\t\t\t\t\tclass=\"to-progress-bg\"\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tcx=\"50\"\n\t\t\t\t\tcy=\"50\"\n\t\t\t\t\t:r=\"radius\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t:stroke-width=\"barThick\"\n\t\t\t\t\ttransform=\"rotate(-90, 50, 50)\"\n\t\t\t\t\t:stroke-dashoffset=\"strokeDashoffset\"\n\t\t\t\t\t:stroke-dasharray=\"strokeDasharray\"\n\t\t\t\t\tclass=\"to-progress-bar\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t\t<div class=\"to-progress-text\">\n\t\t\t\t<slot :title=\"titleValue\" :content=\"content\">\n\t\t\t\t\t<div class=\"to-progress-text-title\">{{ titleValue }}</div>\n\t\t\t\t\t<div v-if=\"content\" class=\"to-progress-text-content\">{{ content }}</div>\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</template>\n\t\t<template v-else>\n\t\t\t<span class=\"to-progress-bg\">\n\t\t\t\t<span :style=\"setBarStyle\" class=\"to-progress-bar\">\n\t\t\t\t\t<span v-if=\"textPosition === 'inner'\" class=\"to-progress-text\">{{ textValue }}</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tv-if=\"textPosition === 'outer' && type !== 'loading'\"\n\t\t\t\tclass=\"to-progress-text\"\n\t\t\t\t:style=\"setTextStyle\"\n\t\t\t>\n\t\t\t\t{{ textValue }}\n\t\t\t</span>\n\t\t</template>\n\t</span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'\n\nexport default defineComponent({\n\tname: 'ToProgress',\n\tprops: {\n\t\t// 类型：normal 或 loading\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator: (val: string) => ['normal', 'loading', 'circle'].includes(val),\n\t\t},\n\t\t// 进度条百分比，0~100的数字\n\t\tvalue: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 0,\n\t\t\trequired: true,\n\t\t},\n\t\t// 模式\n\t\tmode: {\n\t\t\ttype: String,\n\t\t\tdefault: 'default',\n\t\t},\n\t\t// 文字\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t// 标题\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t// 内容\n\t\tcontent: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t// 进度位置：outer(在外)、inner(在内)、none(不显示进度)\n\t\ttextPosition: {\n\t\t\ttype: String,\n\t\t\tdefault: 'inner',\n\t\t\tvalidator: (val: string) => ['outer', 'inner', 'none'].includes(val),\n\t\t},\n\t\t// 显示值的宽度设置\n\t\ttextWidth: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 'auto',\n\t\t},\n\t\t// 颜色\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t},\n\t\t// 宽度\n\t\twidth: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: '',\n\t\t},\n\t\t// 进度条大小\n\t\tbarSize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 1,\n\t\t},\n\t},\n\tsetup(props) {\n\t\t// 响应式状态\n\t\tconst elRef = ref<HTMLElement | null>(null)\n\t\tconst radius = ref<number>(0)\n\t\tconst thick = ref<number>(0)\n\t\tconst barRadius = ref<number>(0)\n\t\tconst barThick = ref<number>(0)\n\t\tconst em = ref(0)\n\t\tconst offsetWidth = ref(0)\n\t\tconst iPercentage = ref('')\n\n\t\tconst getColor = (color: string) => {\n\t\t\tlet c = color\n\t\t\t// 随机色彩逻辑，实际项目中可能需要根据实际环境调整\n\t\t\tlet colors = ['primary', 'success', 'warning', 'danger', 'info', 'secondary', 'fg']\n\t\t\tlet number = Math.round(Math.random() * 6)\n\t\t\tif (color === 'radam') {\n\t\t\t\tc = colors[number]\n\t\t\t}\n\n\t\t\tswitch (c) {\n\t\t\t\tcase 'fg':\n\t\t\t\t\treturn '#000'\n\t\t\t\tcase 'info':\n\t\t\t\t\treturn '#999'\n\t\t\t\tcase 'warning':\n\t\t\t\t\treturn '#f3b100'\n\t\t\t\tcase 'success':\n\t\t\t\t\treturn '#8fc320'\n\t\t\t\tcase 'danger':\n\t\t\t\t\treturn '#e40077'\n\t\t\t\tcase 'secondary':\n\t\t\t\t\treturn '#4d5b65'\n\t\t\t\tcase 'primary':\n\t\t\t\t\treturn '#0085d0'\n\t\t\t\tdefault:\n\t\t\t\t\treturn color\n\t\t\t}\n\t\t}\n\n\t\tconst circumference = computed(() => 2 * Math.PI * radius.value)\n\t\tconst strokeDasharray = computed(() => circumference.value)\n\t\tconst strokeDashoffset = computed(() => circumference.value * (1 - Number(props.value) / 100))\n\n\t\tconst textValue = computed(() => {\n\t\t\tif (props.text) {\n\t\t\t\treturn props.text\n\t\t\t} else {\n\t\t\t\treturn iPercentage.value\n\t\t\t}\n\t\t})\n\n\t\tconst titleValue = computed(() => {\n\t\t\tif (props.title !== undefined) {\n\t\t\t\treturn props.title\n\t\t\t} else {\n\t\t\t\t// 如果是100%，可以显示完成标识\n\t\t\t\tconst percentValue = Number(iPercentage.value.replace('%', ''))\n\t\t\t\tif (percentValue >= 100 && props.type === 'circle') {\n\t\t\t\t\treturn '100%'\n\t\t\t\t}\n\t\t\t\treturn iPercentage.value\n\t\t\t}\n\t\t})\n\n\t\tconst setClass = computed(() => {\n\t\t\tconst arr: string[] = []\n\t\t\tarr.push(`color-${props.color}`)\n\t\t\tif (props.textPosition) {\n\t\t\t\tarr.push(`text-position-${props.textPosition}`)\n\t\t\t}\n\t\t\tif (props.type) {\n\t\t\t\tarr.push(`type-${props.type}`)\n\t\t\t}\n\t\t\tif (props.mode) {\n\t\t\t\tarr.push(`mode-${props.mode}`)\n\t\t\t}\n\t\t\treturn arr\n\t\t})\n\n\t\tconst setStyle = computed(() => {\n\t\t\tconst obj: Record<string, string> = {}\n\t\t\tif (props.width) {\n\t\t\t\tif (props.type === 'circle') {\n\t\t\t\t\tif (!isNaN(Number(props.width))) {\n\t\t\t\t\t\t// 保持1:1的宽高比\n\t\t\t\t\t\tconst size = Number(props.width) + 'em'\n\t\t\t\t\t\tobj.width = size\n\t\t\t\t\t\tobj.height = size\n\t\t\t\t\t} else if (props.width === 'full') {\n\t\t\t\t\t\tobj.width = '100%'\n\t\t\t\t\t\t// 强制保持1:1的宽高比\n\t\t\t\t\t\tobj.aspectRatio = '1/1'\n\t\t\t\t\t} else {\n\t\t\t\t\t\tobj.width = props.width as string\n\t\t\t\t\t\tobj.height = props.width as string\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (!isNaN(Number(props.width))) {\n\t\t\t\t\t\tobj.width = props.width + 'em'\n\t\t\t\t\t} else if (props.width === 'full') {\n\t\t\t\t\t\tobj.width = '100%'\n\t\t\t\t\t} else {\n\t\t\t\t\t\tobj.width = props.width as string\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn obj\n\t\t})\n\n\t\tconst setBarStyle = computed(() => {\n\t\t\treturn 'width:' + iPercentage.value\n\t\t})\n\n\t\tconst setTextStyle = computed(() => {\n\t\t\tif (props.textWidth === 'auto') {\n\t\t\t\treturn ''\n\t\t\t} else {\n\t\t\t\treturn 'width:' + props.textWidth + 'em'\n\t\t\t}\n\t\t})\n\n\t\t// 方法\n\t\tconst setPercentage = () => {\n\t\t\tlet p = 0\n\t\t\tif ((props.value + '').indexOf('%') > -1) {\n\t\t\t\tp = Number((props.value as string).replace('%', ''))\n\t\t\t} else {\n\t\t\t\tp = Number(props.value)\n\t\t\t}\n\t\t\tif (p < 0) {\n\t\t\t\tp = 0\n\t\t\t}\n\t\t\tiPercentage.value = p + '%'\n\t\t}\n\n\t\tconst init = () => {\n\t\t\tlet timer: number | null = null\n\t\t\ttimer = window.setTimeout(() => {\n\t\t\t\tem.value = 12 // 基础单位，可能需要根据实际项目调整\n\t\t\t\tconst el = document.querySelector('.to-progress') as HTMLElement\n\t\t\t\tif (el) {\n\t\t\t\t\tif (props.type === 'circle') {\n\t\t\t\t\t\t// 获取基础值\n\t\t\t\t\t\tconst circleBgTick = parseFloat(\n\t\t\t\t\t\t\tgetComputedStyle(elRef.value).getPropertyValue('--thick')\n\t\t\t\t\t\t)\n\t\t\t\t\t\tconst circleBarTick = parseFloat(\n\t\t\t\t\t\t\tgetComputedStyle(elRef.value).getPropertyValue('--bar-thick')\n\t\t\t\t\t\t)\n\t\t\t\t\t\tconst width = parseFloat(getComputedStyle(elRef.value).getPropertyValue('--width'))\n\n\t\t\t\t\t\t// 计算半径\n\t\t\t\t\t\tthick.value = (circleBgTick / width) * 100\n\t\t\t\t\t\tbarThick.value = (circleBarTick / width) * 100\n\t\t\t\t\t\tradius.value = 50 - Math.max(thick.value, barThick.value) / 2\n\n\t\t\t\t\t\t// 环形进度条使用固定尺寸\n\t\t\t\t\t\toffsetWidth.value = 120 // 默认大小为120px\n\n\t\t\t\t\t\t// 如果指定了width属性，则覆盖默认值\n\t\t\t\t\t\tif (typeof props.width === 'number') {\n\t\t\t\t\t\t\toffsetWidth.value = props.width * 16 // 转换em为px\n\t\t\t\t\t\t} else if (props.width === 'full' && el.parentElement) {\n\t\t\t\t\t\t\toffsetWidth.value = el.parentElement.offsetWidth\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\toffsetWidth.value = el.offsetWidth\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (timer) {\n\t\t\t\t\tclearTimeout(timer)\n\t\t\t\t\ttimer = null\n\t\t\t\t}\n\t\t\t}, 200)\n\t\t}\n\n\t\t// 生命周期钩子\n\t\tonMounted(() => {\n\t\t\twindow.addEventListener('resize', init)\n\t\t\tnextTick(() => {\n\t\t\t\tinit()\n\t\t\t})\n\t\t})\n\n\t\tonBeforeUnmount(() => {\n\t\t\twindow.removeEventListener('resize', init)\n\t\t})\n\n\t\t// 监听属性变化\n\t\twatch(\n\t\t\t() => props.value,\n\t\t\t() => {\n\t\t\t\tsetPercentage()\n\t\t\t}\n\t\t)\n\n\t\t// 初始化\n\t\tsetPercentage()\n\n\t\treturn {\n\t\t\tthick,\n\t\t\telRef,\n\t\t\tem,\n\t\t\tbarThick,\n\t\t\tbarRadius,\n\t\t\toffsetWidth,\n\t\t\tiPercentage,\n\t\t\tgetColor,\n\t\t\tradius,\n\t\t\tstrokeDasharray,\n\t\t\tstrokeDashoffset,\n\t\t\ttextValue,\n\t\t\ttitleValue,\n\t\t\tsetClass,\n\t\t\tsetStyle,\n\t\t\tsetBarStyle,\n\t\t\tsetTextStyle,\n\t\t}\n\t},\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/packages/components/progress/src/progress.mjs

@@ -0,0 +1,71 @@
+const progressProps = {
+  // 类型：normal或loading
+  type: {
+    type: String,
+    default: "normal"
+  },
+  // 进度条百分比，0~100的数字
+  percentage: {
+    type: [Number, String],
+    default: 0,
+    required: true
+  },
+  // 圆角：normal(一般形式)、pill(药片形式)、none(无圆角)
+  fillet: {
+    type: String,
+    default: "normal"
+  },
+  // 内部文字
+  innerText: {
+    type: String,
+    default: ""
+  },
+  // 外部文字
+  outerText: {
+    type: String,
+    default: ""
+  },
+  // 标题
+  title: {
+    type: String,
+    default: void 0
+  },
+  // 内容
+  content: {
+    type: String,
+    default: ""
+  },
+  // 进度位置：outer(在外)、inner(在内)、none(不显示进度)
+  textPosition: {
+    type: String,
+    default: "inner"
+  },
+  // 显示值的宽度设置
+  textWidth: {
+    type: [Number, String],
+    default: "auto"
+  },
+  // 文本大小
+  textSize: {
+    type: [Number, String],
+    default: 1
+  },
+  // 颜色
+  color: {
+    type: String,
+    default: "primary"
+  },
+  // 宽度
+  width: {
+    type: [Number, String],
+    default: 25
+  },
+  // 进度条大小
+  barSize: {
+    type: [Number, String],
+    default: 1
+  }
+};
+
+export { progressProps };
+//# sourceMappingURL=progress.mjs.map

package/es/packages/components/progress/src/progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.mjs","sources":["../../../../../../packages/components/progress/src/progress.ts"],"sourcesContent":["import type { PropType } from 'vue';\n\nexport const progressProps = {\n  // 类型：normal或loading\n  type: {\n    type: String as PropType<'normal' | 'loading' | 'circle'>,\n    default: 'normal',\n  },\n  // 进度条百分比，0~100的数字\n  percentage: {\n    type: [Number, String],\n    default: 0,\n    required: true,\n  },\n  // 圆角：normal(一般形式)、pill(药片形式)、none(无圆角)\n  fillet: {\n    type: String as PropType<'normal' | 'pill' | 'none'>,\n    default: 'normal',\n  },\n  // 内部文字\n  innerText: {\n    type: String,\n    default: '',\n  },\n  // 外部文字\n  outerText: {\n    type: String,\n    default: '',\n  },\n  // 标题\n  title: {\n    type: String,\n    default: undefined,\n  },\n  // 内容\n  content: {\n    type: String,\n    default: '',\n  },\n  // 进度位置：outer(在外)、inner(在内)、none(不显示进度)\n  textPosition: {\n    type: String as PropType<'outer' | 'inner' | 'none'>,\n    default: 'inner',\n  },\n  // 显示值的宽度设置\n  textWidth: {\n    type: [Number, String],\n    default: 'auto',\n  },\n  // 文本大小\n  textSize: {\n    type: [Number, String],\n    default: 1,\n  },\n  // 颜色\n  color: {\n    type: String,\n    default: 'primary',\n  },\n  // 宽度\n  width: {\n    type: [Number, String],\n    default: 25,\n  },\n  // 进度条大小\n  barSize: {\n    type: [Number, String],\n    default: 1,\n  },\n};\n\nexport type ProgressProps = typeof progressProps;\n"],"names":[],"mappings":"AAEO,MAAM,aAAgB,GAAA;AAAA;AAAA,EAE3B,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,QAAA;AAAA,GACX;AAAA;AAAA,EAEA,UAAY,EAAA;AAAA,IACV,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,CAAA;AAAA,IACT,QAAU,EAAA,IAAA;AAAA,GACZ;AAAA;AAAA,EAEA,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,QAAA;AAAA,GACX;AAAA;AAAA,EAEA,SAAW,EAAA;AAAA,IACT,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA;AAAA,EAEA,SAAW,EAAA;AAAA,IACT,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA;AAAA,EAEA,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,KAAA,CAAA;AAAA,GACX;AAAA;AAAA,EAEA,OAAS,EAAA;AAAA,IACP,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA;AAAA,EAEA,YAAc,EAAA;AAAA,IACZ,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,OAAA;AAAA,GACX;AAAA;AAAA,EAEA,SAAW,EAAA;AAAA,IACT,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,MAAA;AAAA,GACX;AAAA;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,CAAA;AAAA,GACX;AAAA;AAAA,EAEA,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,SAAA;AAAA,GACX;AAAA;AAAA,EAEA,KAAO,EAAA;AAAA,IACL,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,EAAA;AAAA,GACX;AAAA;AAAA,EAEA,OAAS,EAAA;AAAA,IACP,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA,CAAA;AAAA,GACX;AACF;;;;"}

package/es/packages/components/range/index.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './src/range.vue2.mjs';
+import { withInstall } from '../../utils/types.mjs';
+
+const ToRange = withInstall(_sfc_main);
+
+export { ToRange };
+//# sourceMappingURL=index.mjs.map

package/es/packages/components/range/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/range/index.ts"],"sourcesContent":["import Range from './src/range.vue'\nimport { SFCWithInstall, withInstall } from '@touchvue/utils'\n\nexport const ToRange: SFCWithInstall<typeof Range> = withInstall(Range)\n\nexport * from './src/instance'\n"],"names":["Range"],"mappings":";;;AAGa,MAAA,OAAA,GAAwC,YAAYA,SAAK;;;;"}

package/es/packages/components/range/src/instance.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=instance.mjs.map

package/es/packages/components/range/src/instance.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"instance.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/es/packages/components/range/src/range.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './range.vue2.mjs';
+
+
+
+export { _sfc_main as default };
+//# sourceMappingURL=range.vue.mjs.map

package/es/packages/components/range/src/range.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/packages/components/range/src/range.vue2.mjs

@@ -0,0 +1,259 @@
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createCommentVNode, createVNode, unref } from 'vue';
+import { ToInput } from '../../input/index.mjs';
+
+const __default__ = defineComponent({
+  name: "ToRange"
+});
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    mode: { default: "default" },
+    modelValue: { default: 0 },
+    disabled: { type: Boolean, default: false },
+    inputable: { type: Boolean, default: false },
+    max: { default: 100 },
+    min: { default: 0 },
+    ruler: { type: Boolean, default: false },
+    start: { type: Boolean, default: false },
+    step: { default: 1 },
+    width: { default: 20 },
+    inputWidth: { default: 6 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const endProgress = ref(0);
+    const startProgress = ref(0);
+    const progressRef = ref(null);
+    const endRef = ref(null);
+    const startRef = ref(null);
+    const barRef = ref(null);
+    const endDragX = ref(0);
+    const startDragX = ref(0);
+    const endProgressWidth = ref(0);
+    const startLeft = ref(0);
+    const emit = __emit;
+    watch(
+      () => endProgress.value,
+      (val) => {
+        let value = 0;
+        let valueWidth = Number(props.max) - Number(props.min);
+        let endValue = Math.round(valueWidth * (val / 100));
+        let startValue = Math.round(valueWidth * (startProgress.value / 100));
+        if (props.start) {
+          value = `${startValue},${endValue}`;
+        } else {
+          value = endValue;
+        }
+        emit("update:modelValue", value);
+      }
+    );
+    watch(
+      () => startProgress.value,
+      (val) => {
+        let value = 0;
+        let valueWidth = Number(props.max) - Number(props.min);
+        let endValue = Math.round(valueWidth * (endProgress.value / 100));
+        let startValue = Math.round(valueWidth * (val / 100));
+        if (props.start) {
+          value = `${startValue},${endValue}`;
+        } else {
+          value = endValue;
+        }
+        emit("update:modelValue", value);
+      }
+    );
+    watch(
+      () => props.modelValue,
+      (val) => {
+        let valueWidth = Number(props.max) - Number(props.min);
+        if (props.start && typeof val === "string") {
+          let arr = val.split(",");
+          endProgress.value = Number(arr[1]);
+          startProgress.value = Number(arr[0]);
+        } else {
+          let width = Number(val) / valueWidth * 100;
+          endProgress.value = width;
+        }
+      },
+      { immediate: true }
+    );
+    const setClass = computed(() => {
+      let arr = [];
+      if (props.mode) {
+        arr.push(`mode-${props.mode}`);
+      }
+      return arr;
+    });
+    const setStyle = computed(() => {
+      let obj = {};
+      if (props.width) {
+        obj.width = isNaN(Number(props.width)) ? props.width : `${props.width}em`;
+      }
+      return obj;
+    });
+    function onButtonDown(event) {
+      if (props.disabled)
+        return false;
+      event.preventDefault();
+      onEndDragStart(event);
+      window.addEventListener("mousemove", onDragging);
+      window.addEventListener("touchmove", onDragging);
+      window.addEventListener("mouseup", onDragEnd);
+      window.addEventListener("touchend", onDragEnd);
+      window.addEventListener("contextmenu", onDragEnd);
+    }
+    function onStartButtonDown(event) {
+      if (props.disabled)
+        return false;
+      event.preventDefault();
+      onStartDragStart(event);
+      window.addEventListener("mousemove", onStartDragging);
+      window.addEventListener("touchmove", onStartDragging);
+      window.addEventListener("mouseup", onStartDragEnd);
+      window.addEventListener("touchend", onStartDragEnd);
+      window.addEventListener("contextmenu", onStartDragEnd);
+    }
+    function onStartDragStart(event) {
+      startDragX.value = event.clientX;
+      startLeft.value = Number(progressRef.value.style.left.split("%")[0]);
+    }
+    function onEndDragStart(event) {
+      endDragX.value = event.clientX;
+      endProgressWidth.value = progressRef.value.offsetWidth;
+    }
+    function onStartDragging(e) {
+      let width = e.clientX - startDragX.value;
+      let barWidth = barRef.value.offsetWidth;
+      if (width > 0) {
+        let per = startLeft.value + width / barWidth * 100;
+        if (per < endProgress.value) {
+          startProgress.value = per;
+        }
+      } else if (width <= 0) {
+        let per = startLeft.value + width / barWidth * 100;
+        if (per <= 0) {
+          startProgress.value = 0;
+        } else {
+          startProgress.value = per;
+        }
+      }
+    }
+    function onDragging(e) {
+      let width = e.clientX - endDragX.value;
+      let barWidth = barRef.value.offsetWidth;
+      let startWidth = startProgress.value / 100 * barWidth;
+      if (props.start) {
+        if (width > 0) {
+          if (width > barWidth - startWidth) {
+            endProgress.value = 100;
+          } else {
+            if (width / barWidth * 100 + (endProgressWidth.value + startWidth) * 100 / barWidth <= 100) {
+              endProgress.value = width / barWidth * 100 + (endProgressWidth.value + startWidth) * 100 / barWidth;
+            } else {
+              endProgress.value = 100;
+            }
+          }
+        } else if (width <= 0) {
+          if (Math.abs(width) > barWidth - startWidth) {
+            endProgress.value = startProgress.value;
+          } else {
+            endProgress.value = width / barWidth * 100 + (endProgressWidth.value + startWidth) * 100 / barWidth;
+          }
+        }
+      } else {
+        if (width > 0) {
+          if (width > barWidth) {
+            endProgress.value = 100;
+          } else {
+            let per = endProgressWidth.value / barWidth + width / barWidth;
+            if (per <= 1) {
+              endProgress.value = per * 100;
+            } else {
+              endProgress.value = 100;
+            }
+          }
+        } else if (width <= 0) {
+          let gap = width / barWidth * 100 + endProgressWidth.value / barWidth * 100;
+          if (gap >= 0) {
+            endProgress.value = gap;
+          } else if (gap < 0) {
+            endProgress.value = 0;
+          }
+        }
+      }
+    }
+    function onDragEnd() {
+      window.removeEventListener("mousemove", onDragging);
+      window.removeEventListener("touchmove", onDragging);
+      window.removeEventListener("mouseup", onDragEnd);
+      window.removeEventListener("touchend", onDragEnd);
+      window.removeEventListener("contextmenu", onDragEnd);
+    }
+    function onStartDragEnd() {
+      window.removeEventListener("mousemove", onStartDragging);
+      window.removeEventListener("touchmove", onStartDragging);
+      window.removeEventListener("mouseup", onStartDragEnd);
+      window.removeEventListener("touchend", onStartDragEnd);
+      window.removeEventListener("contextmenu", onStartDragEnd);
+    }
+    function endStartHandle(event) {
+      console.log("endStartHandle", event);
+    }
+    function moveHandle(event) {
+      console.log("moveHandle", event);
+    }
+    function endHandle(event) {
+      console.log("moveHandle", event);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["to-range", setClass.value]),
+        style: normalizeStyle(setStyle.value),
+        onTouchmove: ($event) => moveHandle($event),
+        onTouchend: ($event) => endHandle($event)
+      }, [
+        createElementVNode("span", {
+          ref_key: "barRef",
+          ref: barRef,
+          class: "to-range-bar"
+        }, [
+          createElementVNode("span", {
+            ref_key: "progressRef",
+            ref: progressRef,
+            class: "to-range-progress",
+            style: normalizeStyle({ width: endProgress.value - startProgress.value + "%", left: startProgress.value + "%" })
+          }, [
+            _ctx.start ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              ref_key: "startRef",
+              ref: startRef,
+              class: "to-range-start",
+              onMousedown: onStartButtonDown
+            }, null, 544)) : createCommentVNode("", true),
+            createElementVNode("span", {
+              ref_key: "endRef",
+              ref: endRef,
+              class: "to-range-end",
+              onMousedown: onButtonDown,
+              onTouchstart: ($event) => endStartHandle($event)
+            }, null, 40, ["onTouchstart"])
+          ], 4)
+        ], 512),
+        _ctx.inputable ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: "to-range-input"
+        }, [
+          createVNode(unref(ToInput), {
+            modelValue: endProgress.value,
+            "onUpdate:modelValue": ($event) => endProgress.value = $event,
+            width: _ctx.inputWidth
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "width"])
+        ])) : createCommentVNode("", true)
+      ], 46, ["onTouchmove", "onTouchend"]);
+    };
+  }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=range.vue2.mjs.map