@eturnity/eturnity_reusable_components 8.31.6-dev-03-elisee-8.37.0 → 8.31.6-dev-03-elisee-8.37.1

package/dist/main.es17.js

@@ -1,229 +1,252 @@
-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.es24.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;
-  `;
+import styled from "./main.es7.js";
+import { fetchIcon } from "./main.es27.js";
+import { reactive } from "./main.es19.js";
+import { computed, onMounted, watch, openBlock, createBlock, withCtx, createVNode, createElementVNode as createBaseVNode, createTextVNode, createCommentVNode } from "./main.es6.js";
+import { toDisplayString } from "./main.es16.js";
+const _hoisted_1 = ["innerHTML"];
 const _sfc_main = {
-  name: "ProgressBar",
-  components: {
-    Container,
-    MainLineHighlight,
-    Arrow,
-    TopValueContainer,
-    BottomValueContainer,
-    MainLine,
-    VerticalMarker,
-    VerticalMarkerArrow,
-    TextWrapper
-  },
+  __name: "index",
   props: {
-    minValue: {
-      required: true,
-      type: Number
+    disabled: {
+      required: false,
+      default: false,
+      type: Boolean
     },
-    maxValue: {
+    name: {
       required: true,
-      type: Number
+      type: String
     },
-    value: {
-      required: true,
-      type: Number
+    color: {
+      required: false,
+      default: null,
+      type: String
     },
-    arrowColor: {
+    hoveredColor: {
       required: false,
-      type: String,
-      default: "white"
+      default: null,
+      type: String
+    },
+    size: {
+      required: false,
+      default: "30px",
+      type: String
     },
     width: {
+      type: String,
       required: false,
+      default: ""
+    },
+    height: {
       type: String,
-      default: null
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    minPercent() {
-      if (this.maxValue === this.minValue) {
-        return 50;
-      } else {
-        return 30;
-      }
+      required: false,
+      default: ""
     },
-    maxPercent() {
-      if (this.maxValue === this.minValue) {
-        return 50;
-      } else {
-        return 70;
-      }
+    cursor: {
+      required: false,
+      default: null,
+      type: String
     },
-    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));
+    isStriked: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    backgroundColor: {
+      required: false,
+      default: null,
+      type: String
+    },
+    count: {
+      required: false,
+      default: 0,
+      type: Number
+    },
+    animation: {
+      required: false,
+      default: "none",
+      type: String
+    },
+    fillType: {
+      required: false,
+      default: "fill",
+      type: String
+    },
+    disableHover: {
+      type: Boolean,
+      default: false
     },
-    colorVerticalMarkerArrow() {
-      if (this.value < this.maxValue && this.value > this.minValue) {
-        return "black";
-      } else {
-        return "white";
+    showCount: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const Wrapper = styled("div", {
+      height: String,
+      width: String,
+      disabled: Boolean,
+      cursor: String
+    })`
+    display: flex;
+    position: relative;
+    align-content: center;
+    justify-content: center;
+    width: ${(props2) => props2.width};
+    height: ${(props2) => props2.height};
+    min-width: ${(props2) => props2.width};
+    min-height: ${(props2) => props2.height};
+    cursor: ${(props2) => props2.disabled ? "not-allowed" : props2.cursor};
+    line-height: 0;
+  `;
+    const CountWrapper = styled("div")`
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    background-color: ${({
+      theme
+    }) => theme.colors.red};
+    color: ${({
+      theme
+    }) => theme.colors.white};
+    border-radius: 100%;
+    width: 15px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  `;
+    const StrikedLine = styled("div", {
+      color: String
+    })`
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    align-content: center;
+    justify-content: center;
+    width: 143%;
+    height: 8%;
+    background-color: ${({
+      theme,
+      color
+    }) => theme.colors[color] || color};
+    min-height: 0;
+    line-height: 0;
+    transform-origin: 0% 100%;
+    transform: rotate(-45deg);
+  `;
+    const IconImageAttrs = {
+      color: String,
+      backgroundColor: String,
+      hoveredColor: String,
+      animation: String,
+      fillType: String,
+      disableHover: Boolean,
+      showCount: Boolean
+    };
+    const IconImage = styled("div", IconImageAttrs)`
+    animation: ${(props2) => props2.animation};
+    width: 100%;
+    svg {
+      width: 100%;
+      height: 100%;
+      background-color: ${(props2) => props2.backgroundColor ? props2.backgroundColor : "transparent"};
+      padding: ${(props2) => props2.backgroundColor ? "3px" : "0"};
+      border-radius: ${(props2) => props2.showCount ? "8px 0 0  8px" : props2.backgroundColor ? "8px" : "0"};
+    }
+    svg path:not(.fix, .isStrokePath) {
+      ${({
+      theme,
+      color,
+      fillType
+    }) => color && `${fillType}: ${theme.colors[color] || color};`}
+    }
+    svg .isStroke {
+      ${({
+      theme,
+      color
+    }) => color && `stroke: ${theme.colors[color] || color};`}
+    }
+    svg .isFill {
+      ${({
+      theme,
+      color
+    }) => color && `fill: ${theme.colors[color] || color};`}
+    }
+    svg .isStrokePath:not(.fix) {
+      ${({
+      theme,
+      color
+    }) => color && `stroke: ${theme.colors[color] || color};`}
+    }
+    ${(props2) => !props2.disableHover && `
+     &:hover svg path:not(.fix, .isStrokePath) {
+      ${`${props2.fillType}: ${props2.theme.colors[props2.hoveredColor] || props2.color};`}
+     &:hover svg isStrokePath:not(.fix) {
+      ${`stroke: ${props2.theme.colors[props2.hoveredColor] || props2.color};`}
+    }
+    &:hover + div {
+      background-color: ${props2.hoveredColor};
+    }
+    `}
+
+    @keyframes fade {
+      50% {
+        opacity: 0.3;
       }
     }
-  }
-};
-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
+  `;
+    const icon = reactive({
+      html: ""
+    });
+    const loadSvg = async () => {
+      icon.html = await fetchIcon(props.name.toLowerCase());
+    };
+    const counter = computed(() => props.count > 9 ? "9+" : props.count.toString());
+    onMounted(() => loadSvg());
+    watch(() => props.name, loadSvg);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Wrapper, {
+        cursor: __props.cursor,
+        "data-test-id": "icon_wrapper",
+        disabled: __props.disabled,
+        height: __props.height ? __props.height : __props.size,
+        width: __props.width ? __props.width : __props.size
       }, {
-        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)]),
+        default: withCtx(() => [createVNode(IconImage, {
+          animation: __props.animation,
+          "background-color": __props.backgroundColor,
+          color: __props.color,
+          "data-test-id": "icon_image",
+          "disable-hover": __props.disableHover,
+          "fill-type": __props.fillType,
+          "hovered-color": __props.hoveredColor,
+          "show-count": __props.showCount
+        }, {
+          default: withCtx(() => [createBaseVNode("i", {
+            "data-test-id": "icon_svg",
+            innerHTML: icon.html
+          }, null, 8, _hoisted_1)]),
+          _: 1
+        }, 8, ["animation", "background-color", "color", "disable-hover", "fill-type", "hovered-color", "show-count"]), createTextVNode(), __props.isStriked ? (openBlock(), createBlock(StrikedLine, {
+          key: 0,
+          color: __props.color,
+          "data-test-id": "icon_striked_line"
+        }, null, 8, ["color"])) : createCommentVNode("", true), createTextVNode(), __props.count > 0 ? (openBlock(), createBlock(CountWrapper, {
+          key: 1,
+          "data-test-id": "icon_count"
+        }, {
+          default: withCtx(() => [createTextVNode(toDisplayString(counter.value), 1)]),
+          _: 1
+        })) : createCommentVNode("", true)]),
         _: 1
-      }), createTextVNode(), createVNode(_component_VerticalMarker, {
-        side: "bottom"
-      })]),
-      _: 1
-    }, 8, ["position"])]),
-    _: 1
-  }, 8, ["width"]);
-}
-const PanelRangeInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+      }, 8, ["cursor", "disabled", "height", "width"]);
+    };
+  }
+};
 export {
-  PanelRangeInfo as default
+  _sfc_main as default
 };