@eturnity/eturnity_reusable_components 8.22.6 → 8.22.7

package/dist/main.es20.js

@@ -1,4 +1,229 @@
-const Test_vue_vue_type_style_index_0_lang = "";
+import styled from "./main.es7.js";
+import "./main.es3.js";
+import _export_sfc from "./main.es11.js";
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode } from "./main.es6.js";
+import { toDisplayString } from "./main.es16.js";
+const Container = styled.div`
+    position: relative;
+    display: flex;
+    height: 47px;
+    width: ${(props) => props.width};
+  `;
+const TopValueContainer = styled("div", {
+  position: String
+})`
+    font-size: 11px;
+    left: ${(props) => props.position};
+    position: absolute;
+    display: flex;
+    justify-content: center
+    width: 0px;
+    color:${(props) => props.theme.colors.black};
+    item-align: center;
+
+  `;
+const BottomValueContainer = styled("div", {
+  position: String
+})`
+    font-size: 12px;
+    left: ${(props) => props.position};
+    width: 0px;
+    bottom: -2px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    item-align: center;
+    border-radius: 4px;
+    color: white;
+  `;
+const TextWrapper = styled("div", {
+  backgroundColor: String
+})`
+    padding: 2px 6px;
+    background-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: 4px;
+  `;
+const Arrow = styled("div", {
+  backgroundColor: String
+})`
+    position: absolute;
+    bottom: -10px;
+    left: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-top-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+  `;
+const MainLine = styled.div`
+    display: block;
+    position: absolute;
+    bottom: 16px;
+    height: 4px;
+    width: 100%;
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.grey4};
+  `;
+const MainLineHighlight = styled("div", {
+  minPercent: Number,
+  maxPercent: Number
+})`
+    display: block;
+    position: absolute;
+    left: ${(props) => props.minPercent + "%"};
+    right: ${(props) => 100 - props.maxPercent + "%"};
+    bottom: 16px;
+    height: 4px;
+    background-color: white;
+  `;
+const VerticalMarker = styled("div")`
+    position: absolute;
+    width: 1px;
+    height: 8px;
+    background-color: white;
+    display: inline-block;
+    top: -6px;
+    left: 0px;
+  `;
+const VerticalMarkerArrow = styled("div", {
+  color: String
+})`
+    position: absolute;
+    width: 1px;
+    height: 4px;
+    background-color: ${(props) => props.color};
+    display: inline-block;
+    bottom: -14px;
+    left: 0px;
+  `;
+const _sfc_main = {
+  name: "ProgressBar",
+  components: {
+    Container,
+    MainLineHighlight,
+    Arrow,
+    TopValueContainer,
+    BottomValueContainer,
+    MainLine,
+    VerticalMarker,
+    VerticalMarkerArrow,
+    TextWrapper
+  },
+  props: {
+    minValue: {
+      required: true,
+      type: Number
+    },
+    maxValue: {
+      required: true,
+      type: Number
+    },
+    value: {
+      required: true,
+      type: Number
+    },
+    arrowColor: {
+      required: false,
+      type: String,
+      default: "white"
+    },
+    width: {
+      required: false,
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    minPercent() {
+      if (this.maxValue === this.minValue) {
+        return 50;
+      } else {
+        return 30;
+      }
+    },
+    maxPercent() {
+      if (this.maxValue === this.minValue) {
+        return 50;
+      } else {
+        return 70;
+      }
+    },
+    valuePercent() {
+      let percent;
+      if (this.maxValue === this.minValue) {
+        percent = this.minPercent + 10 * (this.value - this.minValue);
+      } else {
+        percent = this.minPercent + (this.maxPercent - this.minPercent) / (this.maxValue - this.minValue) * (this.value - this.minValue);
+      }
+      return Math.max(0, Math.min(100, percent));
+    },
+    colorVerticalMarkerArrow() {
+      if (this.value < this.maxValue && this.value > this.minValue) {
+        return "black";
+      } else {
+        return "white";
+      }
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MainLine = resolveComponent("MainLine");
+  const _component_MainLineHighlight = resolveComponent("MainLineHighlight");
+  const _component_TextWrapper = resolveComponent("TextWrapper");
+  const _component_Arrow = resolveComponent("Arrow");
+  const _component_VerticalMarkerArrow = resolveComponent("VerticalMarkerArrow");
+  const _component_TopValueContainer = resolveComponent("TopValueContainer");
+  const _component_VerticalMarker = resolveComponent("VerticalMarker");
+  const _component_BottomValueContainer = resolveComponent("BottomValueContainer");
+  const _component_Container = resolveComponent("Container");
+  return openBlock(), createBlock(_component_Container, {
+    width: $props.width
+  }, {
+    default: withCtx(() => [createVNode(_component_MainLine), createTextVNode(), createVNode(_component_MainLineHighlight, {
+      "max-percent": $options.maxPercent,
+      "min-percent": $options.minPercent
+    }, null, 8, ["max-percent", "min-percent"]), createTextVNode(), createVNode(_component_TopValueContainer, {
+      position: $options.valuePercent + "%"
+    }, {
+      default: withCtx(() => [createVNode(_component_TextWrapper, {
+        "background-color": $props.arrowColor
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString($props.value), 1)]),
+        _: 1
+      }, 8, ["background-color"]), createTextVNode(), createVNode(_component_Arrow, {
+        "background-color": $props.arrowColor
+      }, null, 8, ["background-color"]), createTextVNode(), createVNode(_component_VerticalMarkerArrow, {
+        color: $options.colorVerticalMarkerArrow
+      }, null, 8, ["color"])]),
+      _: 1
+    }, 8, ["position"]), createTextVNode(), createVNode(_component_BottomValueContainer, {
+      position: $options.minPercent + "%"
+    }, {
+      default: withCtx(() => [createVNode(_component_TextWrapper, null, {
+        default: withCtx(() => [createTextVNode(toDisplayString($props.minValue), 1)]),
+        _: 1
+      }), createTextVNode(), createVNode(_component_VerticalMarker, {
+        side: "bottom"
+      })]),
+      _: 1
+    }, 8, ["position"]), createTextVNode(), createVNode(_component_BottomValueContainer, {
+      position: $options.maxPercent + "%"
+    }, {
+      default: withCtx(() => [createVNode(_component_TextWrapper, null, {
+        default: withCtx(() => [createTextVNode(toDisplayString($props.maxValue), 1)]),
+        _: 1
+      }), createTextVNode(), createVNode(_component_VerticalMarker, {
+        side: "bottom"
+      })]),
+      _: 1
+    }, 8, ["position"])]),
+    _: 1
+  }, 8, ["width"]);
+}
+const PanelRangeInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  Test_vue_vue_type_style_index_0_lang as default
+  PanelRangeInfo as default
 };