@koi-design/uxd-ui 12.1.36-beta.0

package/es/components/Popup/hooks/usePopper.mjs

@@ -0,0 +1,56 @@
+import { createPopper } from '@popperjs/core';
+import { ref, shallowRef } from 'vue';
+import '../../../utils/index.mjs';
+import { findDOMNode } from '../../../utils/slots.mjs';
+
+function usePopper(props) {
+  let popperInstance = null;
+  const reference = ref(null);
+  const popup = shallowRef(null);
+  const createPopper$1 = () => {
+    const referenceDom = findDOMNode(reference.value);
+    if (popup.value) {
+      popperInstance = createPopper(referenceDom, popup.value, {
+        placement: props.placement,
+        modifiers: [
+          {
+            name: "computeStyles",
+            options: {
+              gpuAcceleration: false
+            }
+          },
+          {
+            name: "offset",
+            options: {
+              offset: props.offset || [0, 0]
+            }
+          },
+          ...props.modifiers || []
+        ]
+      });
+    }
+  };
+  const updatePopper = () => {
+    if (popperInstance) {
+      popperInstance.update();
+    } else {
+      createPopper$1();
+    }
+  };
+  const destroyPopper = () => {
+    if (popperInstance) {
+      popperInstance.destroy();
+      popperInstance = null;
+    }
+  };
+  return {
+    reference,
+    popup,
+    createPopper: createPopper$1,
+    updatePopper,
+    destroyPopper
+  };
+}
+
+export { usePopper as default };
+//# sourceMappingURL=usePopper.mjs.map

package/es/components/Popup/hooks/usePopper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopper.mjs","sources":["../../../../../src/components/Popup/hooks/usePopper.ts"],"sourcesContent":["import { createPopper as _createPopper } from '@popperjs/core';\nimport type { Instance } from '@popperjs/core';\nimport { ref, shallowRef } from 'vue';\nimport type { Placements } from '../../../utils/placements';\nimport { findDOMNode } from '../../../utils';\n\nexport default function usePopper(props: { placement: Placements; offset?: number[]; modifiers?: any[] }) {\n  let popperInstance: Instance | null = null;\n  const reference = ref<any | null>(null);\n  // const uuid = inject('popupUUID', generateUUID());\n  // provide('popupUUID', uuid);\n  // const uuid = generateUUID();\n  const popup = shallowRef<HTMLElement | null>(null);\n  const createPopper = () => {\n    const referenceDom = findDOMNode(reference.value);\n    // const referenceDom = document.querySelector(`[data-popup-uuid=\"${uuid}\"]`);\n    if (popup.value) {\n      popperInstance = _createPopper(referenceDom, popup.value, {\n        placement: props.placement,\n        modifiers: [\n          {\n            name: 'computeStyles',\n            options: {\n              gpuAcceleration: false\n            }\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: props.offset || [0, 0]\n            }\n          },\n          ...(props.modifiers || [])\n        ]\n      });\n    }\n  };\n\n  const updatePopper = () => {\n    if (popperInstance) {\n      popperInstance.update();\n    } else {\n      createPopper();\n    }\n  };\n\n  const destroyPopper = () => {\n    if (popperInstance) {\n      popperInstance.destroy();\n      popperInstance = null;\n    }\n  };\n\n  return {\n    reference,\n    popup,\n    createPopper,\n    updatePopper,\n    destroyPopper\n  };\n}\n"],"names":["createPopper","_createPopper"],"mappings":";;;;;SAMwB,UAAU,OAAwE;AACxG,MAAI,iBAAkC;AACtC,QAAM,YAAY,IAAgB,IAAI;AAItC,QAAM,QAAQ,WAA+B,IAAI;AACjD,QAAMA,iBAAe,MAAM;AACzB,UAAM,eAAe,YAAY,UAAU,KAAK;AAEhD,QAAI,MAAM,OAAO;AACf,uBAAiBC,aAAc,cAAc,MAAM,OAAO;AAAA,QACxD,WAAW,MAAM;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,YACE,MAAM;AAAA,YACN,SAAS;AAAA,cACP,iBAAiB;AAAA;AACnB;AACF,UACA;AAAA,YACE,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ,MAAM,UAAU,CAAC,GAAG,CAAC;AAAA;AAC/B;AACF,UACA,GAAI,MAAM,aAAa;AAAC;AAC1B,OACD;AAAA;AACH;AAGF,QAAM,eAAe,MAAM;AACzB,QAAI,gBAAgB;AAClB,qBAAe;AAAO,WACjB;AACL;AAAa;AACf;AAGF,QAAM,gBAAgB,MAAM;AAC1B,QAAI,gBAAgB;AAClB,qBAAe;AACf,uBAAiB;AAAA;AACnB;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,kBACAD;AAAA,IACA;AAAA,IACA;AAAA;AAEJ;;;;"}

package/es/components/Popup/index.d.ts

@@ -0,0 +1,3 @@
+import Popup from './Popup';
+export default Popup;
+export * from './Popup.type';

package/es/components/Popup/index.mjs

@@ -0,0 +1,4 @@
+import Popup from './Popup.mjs';
+export { default } from './Popup.mjs';
+export { popupEmits, popupProps, popupTrigger } from './Popup.type.mjs';
+//# sourceMappingURL=index.mjs.map

package/es/components/Popup/index.mjs.map

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

package/es/components/Progress/Circle.d.ts

@@ -0,0 +1,72 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    percent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    successPercent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    status: {
+        type: PropType<"normal" | "active" | "success" | "wrong">;
+        default: string;
+        validator: (val: "normal" | "active" | "success" | "wrong") => boolean;
+    };
+    hideInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeColor: {
+        type: PropType<string | string[]>;
+    };
+    textInside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'status-change': (status: "normal" | "active" | "success" | "wrong") => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    percent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    successPercent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    status: {
+        type: PropType<"normal" | "active" | "success" | "wrong">;
+        default: string;
+        validator: (val: "normal" | "active" | "success" | "wrong") => boolean;
+    };
+    hideInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeColor: {
+        type: PropType<string | string[]>;
+    };
+    textInside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onStatus-change"?: (status: "normal" | "active" | "success" | "wrong") => any;
+}, {
+    strokeWidth: number;
+    status: "normal" | "active" | "success" | "wrong";
+    percent: number;
+    successPercent: number;
+    hideInfo: boolean;
+    textInside: boolean;
+}, {}>;
+export default _default;

package/es/components/Progress/Circle.mjs

@@ -0,0 +1,150 @@
+import { defineComponent, watch, onMounted, createVNode, mergeProps, createTextVNode } from 'vue';
+import { UIcon } from '../Icon/index.mjs';
+import { oneOf } from '../../utils/propsValidators.mjs';
+import useGlobalConfig from '../base/hooks/useGlobalConfig.mjs';
+import Render from '../base/Render.mjs';
+import useProgress from './hooks/useProgress.mjs';
+import { progressStatus, progressEmits } from './Progress.type.mjs';
+import { getSlot } from '../../utils/slots.mjs';
+
+const defineProps = {
+  percent: {
+    type: Number,
+    default: 0
+  },
+  successPercent: {
+    type: Number,
+    default: 0
+  },
+  status: {
+    type: String,
+    default: "normal",
+    validator: oneOf(progressStatus)
+  },
+  hideInfo: {
+    type: Boolean,
+    default: false
+  },
+  strokeWidth: {
+    type: Number,
+    default: 6
+  },
+  strokeColor: {
+    type: [String, Array]
+  },
+  textInside: {
+    type: Boolean,
+    default: false
+  }
+};
+var UCircle = defineComponent({
+  name: "UCircle",
+  components: {
+    URender: Render,
+    UIcon
+  },
+  props: defineProps,
+  emits: progressEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      prefixCls
+    } = useGlobalConfig("progress");
+    const patchColor = "#F3F3F3";
+    const statusColorMap = {
+      normal: "#4d9bee",
+      active: "#4d9bee",
+      wrong: "#ed3f14",
+      success: "#19be6b"
+    };
+    const radius = Math.ceil(44 - props.strokeWidth / 2);
+    const len = Math.ceil(Math.PI * 2 * radius);
+    const {
+      currentStatus,
+      isStatus,
+      statusIcon,
+      handleStatus
+    } = useProgress(props, {
+      emit
+    });
+    watch(() => props.percent, (nv, ov) => {
+      if (nv < ov) {
+        handleStatus(true);
+      } else {
+        handleStatus();
+      }
+    });
+    watch(() => props.status, (nv) => {
+      currentStatus.value = nv;
+    });
+    onMounted(() => {
+      handleStatus();
+    });
+    const circleStyle = {
+      cx: "50%",
+      cy: "50%",
+      r: "40",
+      transform: "rotate(-90 50 50)",
+      "stroke-width": props.strokeWidth
+    };
+    return () => {
+      const {
+        strokeColor,
+        successPercent,
+        percent
+      } = props;
+      const gradientRender = strokeColor !== void 0 ? createVNode("defs", null, [createVNode("linearGradient", {
+        "id": "svg-gradient",
+        "gradientUnits": "userSpaceOnUse",
+        "x1": "100%",
+        "y1": "100%",
+        "x2": "0",
+        "y2": "0"
+      }, [createVNode("stop", {
+        "offset": "0%",
+        "stop-color": Array.isArray(props.strokeColor) ? props.strokeColor[0] : props.strokeColor
+      }, null), createVNode("stop", {
+        "offset": "100%",
+        "stop-color": Array.isArray(props.strokeColor) ? props.strokeColor[1] : props.strokeColor
+      }, null)])]) : null;
+      const pathRender = createVNode("circle", mergeProps(circleStyle, {
+        "stroke": patchColor
+      }), null);
+      const percentRender = createVNode("circle", mergeProps(circleStyle, {
+        "stroke": !props.strokeColor || isStatus.value ? statusColorMap[currentStatus.value] : "url(#svg-gradient)",
+        "stroke-dasharray": `${Math.ceil(props.percent / 100 * len)}, ${len}`
+      }), null);
+      const successPercentRender = successPercent ? createVNode("circle", mergeProps(circleStyle, {
+        "stroke": statusColorMap.success,
+        "stroke-dasharray": `${Math.ceil(props.successPercent / 100 * len)}, ${len}`
+      }), null) : null;
+      const iconSvg = statusIcon.value;
+      const defaultTextRender = isStatus.value ? createVNode("span", {
+        "class": `${prefixCls.value}-text-inner`
+      }, [createVNode(UIcon, {
+        "style": "font-size: 24px"
+      }, {
+        default: () => [createVNode(iconSvg, null, null)]
+      })]) : createVNode("span", {
+        "class": `${prefixCls.value}-text-inner`
+      }, [percent, createTextVNode("%")]);
+      return createVNode("div", {
+        "class": [`${prefixCls.value}`, `${prefixCls.value}-circle`, `${prefixCls.value}-${currentStatus.value}`]
+      }, [createVNode("div", {
+        "class": `${prefixCls.value}-inner`
+      }, [createVNode("svg", {
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "100%",
+        "width": "100%",
+        "viewBox": "0 0 100 100"
+      }, [gradientRender, pathRender, percentRender, successPercentRender]), createVNode("div", {
+        "class": `${prefixCls.value}-text`
+      }, [getSlot(slots).length ? getSlot(slots) : defaultTextRender])])]);
+    };
+  }
+});
+
+export { UCircle as default };
+//# sourceMappingURL=Circle.mjs.map

package/es/components/Progress/Circle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Circle.mjs","sources":["../../../../src/components/Progress/Circle.tsx"],"sourcesContent":["import { defineComponent, watch, onMounted } from 'vue';\nimport type { PropType } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport { oneOf } from '../../utils/propsValidators';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport URender from '../base/Render';\nimport useProgress from './hooks/useProgress';\nimport { progressEmits, progressStatus, type ProgressStauts } from './Progress.type';\nimport { getSlot } from '../../utils/slots';\n\nconst defineProps = {\n  percent: {\n    type: Number,\n    default: 0\n  },\n  successPercent: {\n    type: Number,\n    default: 0\n  },\n  status: {\n    type: String as PropType<ProgressStauts>,\n    default: 'normal',\n    validator: oneOf(progressStatus)\n  },\n  hideInfo: {\n    type: Boolean,\n    default: false\n  },\n  strokeWidth: {\n    type: Number,\n    default: 6\n  },\n  strokeColor: {\n    type: [String, Array] as PropType<string | string[]>\n  },\n  textInside: {\n    type: Boolean,\n    default: false\n  }\n};\n\nexport default defineComponent({\n  name: 'UCircle',\n  components: {\n    URender,\n    UIcon\n  },\n  props: defineProps,\n  emits: progressEmits,\n  setup(props, { emit, slots }) {\n    const { prefixCls } = useGlobalConfig('progress');\n    // data\n    const patchColor = '#F3F3F3';\n    const statusColorMap: Record<ProgressStauts, string> = {\n      normal: '#4d9bee',\n      active: '#4d9bee',\n      wrong: '#ed3f14',\n      success: '#19be6b'\n    };\n    const radius = Math.ceil(44 - props.strokeWidth / 2);\n    const len = Math.ceil(Math.PI * 2 * radius);\n\n    const { currentStatus, isStatus, statusIcon, handleStatus } = useProgress(props, { emit });\n    // computed\n\n    // watch\n    watch(\n      () => props.percent,\n      (nv, ov) => {\n        if (nv < ov) {\n          handleStatus(true);\n        } else {\n          handleStatus();\n        }\n      }\n    );\n    watch(\n      () => props.status,\n      (nv) => {\n        currentStatus.value = nv;\n      }\n    );\n    // lifecycle\n    onMounted(() => {\n      handleStatus();\n    });\n    // methods\n    const circleStyle = {\n      cx: '50%',\n      cy: '50%',\n      r: '40',\n      transform: 'rotate(-90 50 50)',\n      'stroke-width': props.strokeWidth\n    };\n\n    return () => {\n      const { strokeColor, successPercent, percent } = props;\n\n      const gradientRender =\n        strokeColor !== undefined ? (\n          <defs>\n            <linearGradient id=\"svg-gradient\" gradientUnits=\"userSpaceOnUse\" x1=\"100%\" y1=\"100%\" x2=\"0\" y2=\"0\">\n              <stop offset=\"0%\" stop-color={Array.isArray(props.strokeColor) ? props.strokeColor[0] : props.strokeColor} />\n              <stop offset=\"100%\" stop-color={Array.isArray(props.strokeColor) ? props.strokeColor[1] : props.strokeColor} />\n            </linearGradient>\n          </defs>\n        ) : null;\n\n      const pathRender = <circle {...circleStyle} stroke={patchColor}></circle>;\n      const percentRender = (\n        <circle\n          {...circleStyle}\n          stroke={!props.strokeColor || isStatus.value ? statusColorMap[currentStatus.value] : 'url(#svg-gradient)'}\n          stroke-dasharray={`${Math.ceil((props.percent / 100) * len)}, ${len}`}\n        ></circle>\n      );\n\n      const successPercentRender = successPercent ? (\n        <circle\n          {...circleStyle}\n          stroke={statusColorMap.success}\n          stroke-dasharray={`${Math.ceil((props.successPercent / 100) * len)}, ${len}`}\n        ></circle>\n      ) : null;\n\n      const iconSvg = statusIcon.value;\n\n      const defaultTextRender = isStatus.value ? (\n        <span class={`${prefixCls.value}-text-inner`}>\n          <UIcon style=\"font-size: 24px\">\n            <iconSvg></iconSvg>\n          </UIcon>\n        </span>\n      ) : (\n        <span class={`${prefixCls.value}-text-inner`}>{percent}%</span>\n      );\n\n      return (\n        <div class={[`${prefixCls.value}`, `${prefixCls.value}-circle`, `${prefixCls.value}-${currentStatus.value}`]}>\n          <div class={`${prefixCls.value}-inner`}>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100%\" width=\"100%\" viewBox=\"0 0 100 100\">\n              {gradientRender}\n              {pathRender}\n              {percentRender}\n              {successPercentRender}\n            </svg>\n            <div class={`${prefixCls.value}-text`}>{getSlot(slots).length ? getSlot(slots) : defaultTextRender}</div>\n          </div>\n        </div>\n      );\n    };\n  }\n});\n"],"names":["defineProps","percent","type","Number","default","successPercent","status","String","validator","oneOf","progressStatus","hideInfo","Boolean","strokeWidth","strokeColor","Array","textInside","defineComponent","name","components","URender","UIcon","props","emits","progressEmits","setup","emit","slots","prefixCls","useGlobalConfig","patchColor","statusColorMap","normal","active","wrong","success","radius","Math","ceil","len","PI","currentStatus","isStatus","statusIcon","handleStatus","useProgress","watch","nv","ov","value","onMounted","circleStyle","cx","cy","r","transform","gradientRender","undefined","_createVNode","isArray","pathRender","_mergeProps","percentRender","successPercentRender","iconSvg","defaultTextRender","_createTextVNode","getSlot","length"],"mappings":"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"}

package/es/components/Progress/Line.mjs

@@ -0,0 +1,169 @@
+import { defineComponent, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, createCommentVNode, createVNode, withCtx, createBlock, resolveDynamicComponent } from 'vue';
+import { UIcon } from '../Icon/index.mjs';
+import { oneOf } from '../../utils/propsValidators.mjs';
+import useGlobalConfig from '../base/hooks/useGlobalConfig.mjs';
+import useProgress from './hooks/useProgress.mjs';
+import { progressStatus, progressEmits } from './Progress.type.mjs';
+import _export_sfc from '../../_virtual/plugin-vue_export-helper.mjs';
+
+const lineProps = {
+  percent: {
+    type: Number,
+    default: 0
+  },
+  successPercent: {
+    type: Number,
+    default: 0
+  },
+  status: {
+    type: String,
+    default: "normal",
+    validator: oneOf(progressStatus)
+  },
+  hideInfo: {
+    type: Boolean,
+    default: false
+  },
+  strokeWidth: {
+    type: Number,
+    default: 8
+  },
+  strokeColor: {
+    type: [String, Array]
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  textInside: {
+    type: Boolean,
+    default: false
+  }
+};
+const _sfc_main = defineComponent({
+  name: "ULine",
+  components: {
+    UIcon
+  },
+  props: lineProps,
+  emits: progressEmits,
+  setup(props, { emit }) {
+    const { prefixCls } = useGlobalConfig("progress");
+    const { currentStatus, isStatus, statusIcon, handleStatus } = useProgress(props, { emit });
+    const bgStyle = computed(() => {
+      const style = {};
+      if (props.vertical) {
+        style.height = `${props.percent}%`;
+        style.width = `${props.strokeWidth}px`;
+      } else {
+        style.width = `${props.percent}%`;
+        style.height = `${props.strokeWidth}px`;
+      }
+      if (props.strokeColor) {
+        if (typeof props.strokeColor === "string") {
+          style.backgroundColor = props.strokeColor;
+        } else {
+          style.backgroundImage = `linear-gradient(to right, ${props.strokeColor[0]} 0%, ${props.strokeColor[1]} 100%)`;
+        }
+      }
+      return style;
+    });
+    const successBgStyle = computed(() => {
+      const style = {};
+      if (props.vertical) {
+        style.height = `${props.successPercent}%`;
+        style.width = `${props.strokeWidth}px`;
+      } else {
+        style.width = `${props.successPercent}%`;
+        style.height = `${props.strokeWidth}px`;
+      }
+      return style;
+    });
+    watch(
+      () => props.percent,
+      (nv, ov) => {
+        if (nv < ov) {
+          handleStatus(true);
+        } else {
+          handleStatus();
+        }
+      }
+    );
+    watch(
+      () => props.status,
+      (nv) => {
+        currentStatus.value = nv;
+      }
+    );
+    onMounted(() => {
+      handleStatus();
+    });
+    return {
+      prefixCls,
+      currentStatus,
+      isStatus,
+      statusIcon,
+      bgStyle,
+      successBgStyle
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_UIcon = resolveComponent("UIcon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      `${_ctx.prefixCls}`,
+      `${_ctx.prefixCls}-line`,
+      `${_ctx.prefixCls}-${_ctx.currentStatus}`,
+      {
+        [`${_ctx.prefixCls}-show-info`]: !_ctx.hideInfo && !_ctx.textInside,
+        [`${_ctx.prefixCls}-vertical`]: _ctx.vertical
+      }
+    ])
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(`${_ctx.prefixCls}-outer`)
+    }, [
+      createElementVNode("div", {
+        class: normalizeClass(`${_ctx.prefixCls}-inner`)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`${_ctx.prefixCls}-bg`),
+          style: normalizeStyle(_ctx.bgStyle)
+        }, [
+          _ctx.textInside ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(`${_ctx.prefixCls}-inner-text`)
+          }, toDisplayString(_ctx.percent) + "%", 3)) : createCommentVNode("v-if", true)
+        ], 6),
+        createElementVNode("div", {
+          class: normalizeClass(`${_ctx.prefixCls}-success-bg`),
+          style: normalizeStyle(_ctx.successBgStyle)
+        }, null, 6)
+      ], 2)
+    ], 2),
+    !_ctx.hideInfo && !_ctx.textInside ? (openBlock(), createElementBlock("span", {
+      key: 0,
+      class: normalizeClass(`${_ctx.prefixCls}-text`)
+    }, [
+      _ctx.isStatus ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass(`${_ctx.prefixCls}-text-inner`)
+      }, [
+        createVNode(_component_UIcon, null, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.statusIcon)))
+          ]),
+          _: 1
+        })
+      ], 2)) : (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: normalizeClass(`${_ctx.prefixCls}-text-inner`)
+      }, toDisplayString(_ctx.percent) + "% ", 3))
+    ], 2)) : createCommentVNode("v-if", true)
+  ], 2);
+}
+var ULine = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "E:\\br-fe\\uxd-ui\\src\\components\\Progress\\Line.vue"]]);
+
+export { ULine as default };
+//# sourceMappingURL=Line.mjs.map

package/es/components/Progress/Line.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.mjs","sources":["../../../../src/components/Progress/Line.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `${prefixCls}`,\n      `${prefixCls}-line`,\n      `${prefixCls}-${currentStatus}`,\n      {\n        [`${prefixCls}-show-info`]: !hideInfo && !textInside,\n        [`${prefixCls}-vertical`]: vertical\n      }\n    ]\"\n  >\n    <div :class=\"`${prefixCls}-outer`\">\n      <div :class=\"`${prefixCls}-inner`\">\n        <div :class=\"`${prefixCls}-bg`\" :style=\"bgStyle\">\n          <div v-if=\"textInside\" :class=\"`${prefixCls}-inner-text`\">{{ percent }}%</div>\n        </div>\n        <div :class=\"`${prefixCls}-success-bg`\" :style=\"successBgStyle\" />\n      </div>\n    </div>\n    <span v-if=\"!hideInfo && !textInside\" :class=\"`${prefixCls}-text`\">\n      <span v-if=\"isStatus\" :class=\"`${prefixCls}-text-inner`\">\n        <UIcon>\n          <component :is=\"statusIcon\" />\n        </UIcon>\n      </span>\n      <span v-else :class=\"`${prefixCls}-text-inner`\"> {{ percent }}% </span>\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, watch, onMounted } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport { oneOf } from '../../utils/propsValidators';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport useProgress from './hooks/useProgress';\nimport { progressEmits, progressStatus, type ProgressStauts } from './Progress.type';\n\nconst lineProps = {\n  percent: {\n    type: Number,\n    default: 0\n  },\n  successPercent: {\n    type: Number,\n    default: 0\n  },\n  status: {\n    type: String as PropType<ProgressStauts>,\n    default: 'normal',\n    validator: oneOf(progressStatus)\n  },\n  hideInfo: {\n    type: Boolean,\n    default: false\n  },\n  strokeWidth: {\n    type: Number,\n    default: 8\n  },\n  strokeColor: {\n    type: [String, Array] as PropType<string | string[]>\n  },\n  vertical: {\n    type: Boolean,\n    default: false\n  },\n  textInside: {\n    type: Boolean,\n    default: false\n  }\n};\n\nexport default defineComponent({\n  name: 'ULine',\n  components: {\n    UIcon\n  },\n  props: lineProps,\n  emits: progressEmits,\n  setup(props, { emit }) {\n    const { prefixCls } = useGlobalConfig('progress');\n    // data\n    const { currentStatus, isStatus, statusIcon, handleStatus } = useProgress(props, { emit });\n    // computed\n    const bgStyle = computed(() => {\n      const style = {} as CSSProperties;\n      if (props.vertical) {\n        style.height = `${props.percent}%`;\n        style.width = `${props.strokeWidth}px`;\n      } else {\n        style.width = `${props.percent}%`;\n        style.height = `${props.strokeWidth}px`;\n      }\n\n      if (props.strokeColor) {\n        if (typeof props.strokeColor === 'string') {\n          style.backgroundColor = props.strokeColor;\n        } else {\n          style.backgroundImage = `linear-gradient(to right, ${props.strokeColor[0]} 0%, ${props.strokeColor[1]} 100%)`;\n        }\n      }\n      return style;\n    });\n    const successBgStyle = computed(() => {\n      const style = {} as CSSProperties;\n      if (props.vertical) {\n        style.height = `${props.successPercent}%`;\n        style.width = `${props.strokeWidth}px`;\n      } else {\n        style.width = `${props.successPercent}%`;\n        style.height = `${props.strokeWidth}px`;\n      }\n\n      return style;\n    });\n    // watch\n    watch(\n      () => props.percent,\n      (nv, ov) => {\n        if (nv < ov) {\n          handleStatus(true);\n        } else {\n          handleStatus();\n        }\n      }\n    );\n    watch(\n      () => props.status,\n      (nv) => {\n        currentStatus.value = nv;\n      }\n    );\n    // lifecycle\n    onMounted(() => {\n      handleStatus();\n    });\n    // methods\n\n    return {\n      prefixCls,\n      currentStatus,\n      isStatus,\n      statusIcon,\n      bgStyle,\n      successBgStyle\n    };\n  }\n});\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_createVNode","_createBlock","_resolveDynamicComponent"],"mappings":"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"}

package/es/components/Progress/Line.vue.d.ts

@@ -0,0 +1,88 @@
+import type { PropType, CSSProperties } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    percent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    successPercent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    status: {
+        type: PropType<"success" | "normal" | "active" | "wrong">;
+        default: string;
+        validator: (val: "success" | "normal" | "active" | "wrong") => boolean;
+    };
+    hideInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeColor: {
+        type: PropType<string | string[]>;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textInside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    prefixCls: import("vue").ComputedRef<string>;
+    currentStatus: import("vue").Ref<"success" | "normal" | "active" | "wrong", "success" | "normal" | "active" | "wrong">;
+    isStatus: import("vue").ComputedRef<boolean>;
+    statusIcon: import("vue").ComputedRef<import("../..").IconPropType>;
+    bgStyle: import("vue").ComputedRef<CSSProperties>;
+    successBgStyle: import("vue").ComputedRef<CSSProperties>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'status-change': (status: "success" | "normal" | "active" | "wrong") => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    percent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    successPercent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    status: {
+        type: PropType<"success" | "normal" | "active" | "wrong">;
+        default: string;
+        validator: (val: "success" | "normal" | "active" | "wrong") => boolean;
+    };
+    hideInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeColor: {
+        type: PropType<string | string[]>;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textInside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onStatus-change"?: (status: "success" | "normal" | "active" | "wrong") => any;
+}, {
+    percent: number;
+    status: "success" | "normal" | "active" | "wrong";
+    vertical: boolean;
+    successPercent: number;
+    hideInfo: boolean;
+    strokeWidth: number;
+    textInside: boolean;
+}, {}>;
+export default _default;

package/es/components/Progress/Progress.mjs

@@ -0,0 +1,59 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, withCtx, renderSlot } from 'vue';
+import ULine from './Line.mjs';
+import UCircle from './Circle.mjs';
+import UWater from './Water.mjs';
+import { progressProps } from './Progress.type.mjs';
+import _export_sfc from '../../_virtual/plugin-vue_export-helper.mjs';
+
+const _sfc_main = defineComponent({
+  name: "UProgress",
+  components: {
+    ULine,
+    UCircle,
+    UWater
+  },
+  props: progressProps,
+  setup(props) {
+    const wrapperComponent = computed(() => {
+      const { type } = props;
+      let wrapComponent = "";
+      switch (type) {
+        case "circle":
+          wrapComponent = "u-circle";
+          break;
+        case "water":
+          wrapComponent = "u-water";
+          break;
+        default:
+          wrapComponent = "u-line";
+      }
+      return wrapComponent;
+    });
+    return {
+      props,
+      wrapperComponent
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.wrapperComponent), {
+    percent: _ctx.percent,
+    "success-percent": _ctx.successPercent,
+    status: _ctx.status,
+    "hide-info": _ctx.hideInfo,
+    "stroke-width": _ctx.strokeWidth,
+    "stroke-color": _ctx.strokeColor,
+    vertical: _ctx.vertical,
+    "text-inside": _ctx.textInside,
+    "data-color": _ctx.color
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["percent", "success-percent", "status", "hide-info", "stroke-width", "stroke-color", "vertical", "text-inside", "data-color"]);
+}
+var Progress = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "E:\\br-fe\\uxd-ui\\src\\components\\Progress\\Progress.vue"]]);
+
+export { Progress as default };
+//# sourceMappingURL=Progress.mjs.map

package/es/components/Progress/Progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.mjs","sources":["../../../../src/components/Progress/Progress.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"wrapperComponent\"\n    :percent=\"percent\"\n    :success-percent=\"successPercent\"\n    :status=\"status\"\n    :hide-info=\"hideInfo\"\n    :stroke-width=\"strokeWidth\"\n    :stroke-color=\"strokeColor\"\n    :vertical=\"vertical\"\n    :text-inside=\"textInside\"\n    :data-color=\"color\"\n  >\n    <slot />\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue';\nimport ULine from './Line.vue';\nimport UCircle from './Circle';\nimport UWater from './Water.vue';\n\nimport { progressProps } from './Progress.type';\n\nexport default defineComponent({\n  name: 'UProgress',\n  components: {\n    ULine,\n    UCircle,\n    UWater\n  },\n  props: progressProps,\n  setup(props) {\n    const wrapperComponent = computed(() => {\n      const { type } = props;\n      let wrapComponent = '';\n      switch (type) {\n        case 'circle':\n          wrapComponent = 'u-circle';\n          break;\n        case 'water':\n          wrapComponent = 'u-water';\n          break;\n        default:\n          wrapComponent = 'u-line';\n      }\n      return wrapComponent;\n    });\n    return {\n      props,\n      wrapperComponent\n    };\n  }\n});\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_renderSlot"],"mappings":";;;;;;;AAyBA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AACF,EACA,OAAO;AAAA,EACP,MAAM,OAAO;UACL,mBAAmB,SAAS,MAAM;YAChC,EAAE,SAAS;UACb,gBAAgB;cACZ;AAAA,aACD;0BACa;;aAEb;0BACa;;;0BAGA;AAAA;aAEb;AAAA,KACR;WACM;AAAA,MACL;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;sBArDCA,YAaYC,wBAZL,qBAAgB;IACpB,SAAS;IACT,mBAAiB;IACjB,QAAQ;IACR,aAAW;IACX,gBAAc;IACd,gBAAc;IACd,UAAU;IACV,eAAa;IACb,cAAY;;qBAEb,MAAQ;AAAA,MAARC,WAAQ;;;;;;;;;"}