@eturnity/eturnity_reusable_components 8.16.8 → 8.16.9-EPDM-13618.0

package/src/components/panelRangeInfo/index.vue

@@ -1,196 +1,196 @@
-<template>
-  <Container :width="width">
-    <MainLine />
-    <MainLineHighlight :max-percent="maxPercent" :min-percent="minPercent" />
-    <TopValueContainer :position="valuePercent + '%'">
-      <TextWrapper :background-color="arrowColor">{{ value }}</TextWrapper>
-      <Arrow :background-color="arrowColor" />
-      <VerticalMarkerArrow :color="colorVerticalMarkerArrow" />
-    </TopValueContainer>
-    <BottomValueContainer :position="minPercent + '%'">
-      <TextWrapper>{{ minValue }}</TextWrapper>
-      <VerticalMarker side="bottom" />
-    </BottomValueContainer>
-    <BottomValueContainer :position="maxPercent + '%'">
-      <TextWrapper>{{ maxValue }}</TextWrapper>
-      <VerticalMarker side="bottom" />
-    </BottomValueContainer>
-  </Container>
-</template>
-
-<script>
-  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
-  //To Use:
-  // <progress-bar
-  //   fillColor="#000"
-  //   backgroundColor="#888"
-  //   minWidth="150px"
-  //   maxWidth="100%"
-  //   :fillProgress="50" //should be a number for percent
-  //   stepNumber="4"
-  //   :labelText="translate('step')"
-  // />
-  import styled from 'vue3-styled-components'
-  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;
-  `
-  export default {
-    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'
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <Container :width="width">
+    <MainLine />
+    <MainLineHighlight :max-percent="maxPercent" :min-percent="minPercent" />
+    <TopValueContainer :position="valuePercent + '%'">
+      <TextWrapper :background-color="arrowColor">{{ value }}</TextWrapper>
+      <Arrow :background-color="arrowColor" />
+      <VerticalMarkerArrow :color="colorVerticalMarkerArrow" />
+    </TopValueContainer>
+    <BottomValueContainer :position="minPercent + '%'">
+      <TextWrapper>{{ minValue }}</TextWrapper>
+      <VerticalMarker side="bottom" />
+    </BottomValueContainer>
+    <BottomValueContainer :position="maxPercent + '%'">
+      <TextWrapper>{{ maxValue }}</TextWrapper>
+      <VerticalMarker side="bottom" />
+    </BottomValueContainer>
+  </Container>
+</template>
+
+<script>
+  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
+  //To Use:
+  // <progress-bar
+  //   fillColor="#000"
+  //   backgroundColor="#888"
+  //   minWidth="150px"
+  //   maxWidth="100%"
+  //   :fillProgress="50" //should be a number for percent
+  //   stepNumber="4"
+  //   :labelText="translate('step')"
+  // />
+  import styled from 'vue3-styled-components'
+  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;
+  `
+  export default {
+    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'
+        }
+      },
+    },
+  }
+</script>

package/src/components/progressBar/index.vue

@@ -1,125 +1,116 @@
-<template>
-  <Container>
-    <ProgressContainer
-      :background-color="backgroundColor"
-      class="progress-container"
-      :max-width="maxWidth"
-      :min-width="minWidth"
-    >
-      <ProgressFill
-        class="progress-bar"
-        :fill-color="fillColor"
-        :fill-progress="fillProgress"
-      />
-    </ProgressContainer>
-    <LabelText v-if="stepNumber || labelText" class="progress-text">
-      {{ labelText ? labelText : '' }}
-      {{ stepNumber ? stepNumber : '' }}
-    </LabelText>
-  </Container>
-</template>
-
-<script>
-  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
-  //To Use:
-  // <progress-bar
-  //   fillColor="#000"
-  //   backgroundColor="#888"
-  //   minWidth="150px"
-  //   maxWidth="100%"
-  //   :fillProgress="50" //should be a number for percent
-  //   stepNumber="4"
-  //   :labelText="translate('step')"
-  // />
-  import styled from 'vue3-styled-components'
-
-  const Container = styled.div`
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-row-gap: 16px;
-    @media (max-width: ${(props) => props.theme.screen.tablet}) {
-      grid-row-gap: 20px;
-      grid-template-rows: auto 1fr;
-    }
-  `
-
-  const containerProps = {
-    backgroundColor: String,
-    maxWidth: String,
-    minWidth: String,
-  }
-  const ProgressContainer = styled('div', containerProps)`
-    width: 100%;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : 'auto')};
-    max-width: ${(props) => (props.maxWidth ? props.maxWidth : 'none')};
-    height: 6px;
-    background-color: ${(props) =>
-      props.backgroundColor
-        ? props.backgroundColor
-        : props.theme.colors.lightGray};
-    @media (max-width: ${(props) => props.theme.screen.mobile}) {
-      height: 4px;
-    }
-  `
-
-  const fillProps = { fillColor: String, fillProgress: String | Number }
-  const ProgressFill = styled('div', fillProps)`
-    height: 100%;
-    width: ${(props) => props.fillProgress + '%'};
-    background-color: ${(props) =>
-      props.fillColor ? props.fillColor : props.theme.colors.secondary};
-  `
-
-  const LabelText = styled.div`
-    color: ${(props) => props.theme.colors.darkGray};
-    font-size: 16px;
-
-    @media (max-width: ${(props) => props.theme.screen.tablet}) {
-      padding-left: 16px;
-    }
-  `
-
-  export default {
-    name: 'ProgressBar',
-    components: {
-      Container,
-      ProgressContainer,
-      ProgressFill,
-      LabelText,
-    },
-    props: {
-      fillColor: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      backgroundColor: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      minWidth: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      maxWidth: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      fillProgress: {
-        required: false,
-        default: 0,
-      },
-      labelText: {
-        required: false,
-        default: null,
-      },
-      stepNumber: {
-        required: false,
-        default: null,
-      },
-    },
-  }
-</script>
+<template>
+  <Container>
+    <ProgressContainer
+      :app-theme="appTheme"
+      :max-width="maxWidth"
+      :min-width="minWidth"
+    >
+      <ProgressFill :app-theme="appTheme" :fill-progress="fillProgress" />
+    </ProgressContainer>
+    <LabelText v-if="stepNumber || labelText" :app-theme="appTheme">
+      {{ labelText ? labelText : '' }}
+      {{ stepNumber ? stepNumber : '' }}
+    </LabelText>
+  </Container>
+</template>
+
+<script>
+  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
+  //To Use:
+  // <progress-bar
+  //   minWidth="150px"
+  //   maxWidth="100%"
+  //   :fillProgress="50" //should be a number for percent
+  //   stepNumber="4"
+  //   :labelText="translate('step')"
+  // />
+  import styled from 'vue3-styled-components'
+
+  const Container = styled.div`
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-row-gap: 16px;
+    @media (max-width: ${(props) => props.theme.screen.tablet}) {
+      grid-row-gap: 20px;
+      grid-template-rows: auto 1fr;
+    }
+  `
+
+  const containerProps = {
+    appTheme: String,
+    maxWidth: String,
+    minWidth: String,
+  }
+  const ProgressContainer = styled('div', containerProps)`
+    width: 100%;
+    min-width: ${(props) => (props.minWidth ? props.minWidth : 'auto')};
+    max-width: ${(props) => (props.maxWidth ? props.maxWidth : 'none')};
+    height: 6px;
+    background-color: ${(props) =>
+      props.theme.progressBar[props.appTheme].backgroundColor};
+    @media (max-width: ${(props) => props.theme.screen.mobile}) {
+      height: 4px;
+    }
+  `
+
+  const fillProps = {
+    appTheme: String,
+    fillProgress: String | Number,
+  }
+  const ProgressFill = styled('div', fillProps)`
+    height: 100%;
+    width: ${(props) => props.fillProgress + '%'};
+    background-color: ${(props) =>
+      props.theme.progressBar[props.appTheme].fillColor};
+  `
+
+  const labelTextProps = {
+    appTheme: String,
+  }
+  const LabelText = styled('div', labelTextProps)`
+    color: ${(props) => props.theme.progressBar[props.appTheme].labelColor};
+    font-size: 16px;
+
+    @media (max-width: ${(props) => props.theme.screen.tablet}) {
+      padding-left: 16px;
+    }
+  `
+
+  export default {
+    name: 'ProgressBar',
+    components: {
+      Container,
+      ProgressContainer,
+      ProgressFill,
+      LabelText,
+    },
+    props: {
+      minWidth: {
+        required: false,
+        type: String,
+        default: null,
+      },
+      maxWidth: {
+        required: false,
+        type: String,
+        default: null,
+      },
+      fillProgress: {
+        required: false,
+        default: 0,
+      },
+      labelText: {
+        required: false,
+        default: null,
+      },
+      stepNumber: {
+        required: false,
+        default: null,
+      },
+      appTheme: {
+        type: String,
+        default: 'light',
+      },
+    },
+  }
+</script>