@eturnity/eturnity_reusable_components 8.26.2 → 8.26.4--EPDM-15979.0

package/dist/main.es2.js

@@ -1,6 +1,6 @@
 import { ThemeProvider } from "./main.es7.js";
 import theme from "./main.es8.js";
-import ProTag from "./main.es9.js";
+import ConversionTag from "./main.es9.js";
 import "./main.es3.js";
 import "./main.es10.js";
 import _export_sfc from "./main.es11.js";
@@ -9,7 +9,7 @@ const _sfc_main = {
   name: "App",
   components: {
     ThemeProvider,
-    ProTag
+    ConversionTag
   },
   setup() {
     return {
@@ -19,7 +19,7 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_RouterView = resolveComponent("RouterView");
-  const _component_ProTag = resolveComponent("ProTag");
+  const _component_ConversionTag = resolveComponent("ConversionTag");
   const _component_ThemeProvider = resolveComponent("ThemeProvider");
   return openBlock(), createBlock(_component_ThemeProvider, {
     style: {
@@ -27,7 +27,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     },
     theme: $setup.theme
   }, {
-    default: withCtx(() => [createVNode(_component_RouterView), createTextVNode(), createVNode(_component_ProTag)]),
+    default: withCtx(() => [createVNode(_component_RouterView), createTextVNode(), createVNode(_component_ConversionTag)]),
     _: 1
   }, 8, ["theme"]);
 }

package/dist/main.es21.js

@@ -318,7 +318,7 @@ const _sfc_main = {
       };
     };
     const showInfo = async () => {
-      isVisible.value = true;
+      isVisible.value = !props.hideInfoText;
       await nextTick();
       await nextTick();
       await updatePosition();

package/dist/main.es9.js

@@ -3,9 +3,27 @@ import "./main.es3.js";
 import _export_sfc from "./main.es11.js";
 import { resolveComponent, openBlock, createBlock } from "./main.es6.js";
 const _sfc_main = {
-  name: "ProTag",
+  name: "ConversionTag",
   components: {
     RCButton
+  },
+  props: {
+    text: {
+      type: String,
+      default: "PRO"
+    },
+    isUpperCase: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    textToDisplay() {
+      if (this.isUpperCase) {
+        return this.text.toUpperCase();
+      }
+      return this.text;
+    }
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -14,12 +32,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "button-size": "tiny",
     icon: "star",
     "icon-color": "yellow",
-    text: "PRO",
+    text: $options.textToDisplay,
     type: "protag",
     variant: "main"
-  });
+  }, null, 8, ["text"]);
 }
-const ProTag = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const ConversionTag = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  ProTag as default
+  ConversionTag as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.26.2",
+  "version": "8.26.4--EPDM-15979.0",
   "files": [
     "dist",
     "src"

package/src/App.vue

@@ -1,19 +1,19 @@
 <template>
   <ThemeProvider :style="{ height: '100%' }" :theme="theme">
     <RouterView />
-    <ProTag />
+    <ConversionTag />
   </ThemeProvider>
 </template>
 
 <script>
   import { ThemeProvider } from 'vue3-styled-components'
   import theme from '@/assets/theme.js'
-  import ProTag from '@/components/tag/proTag'
+  import ConversionTag from '@/components/tag/conversionTag'
   export default {
     name: 'App',
     components: {
       ThemeProvider,
-      ProTag,
+      ConversionTag,
     },
     setup() {
       return {

package/src/components/buttons/buttonIcon/index.vue

@@ -50,6 +50,7 @@
           numberCount
         }}</NumberText>
       </NumberContainer>
+      <BetaTag v-if="isBeta" :is-disabled="isDisabled"> Beta </BetaTag>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -70,7 +71,9 @@
   import styled from 'vue3-styled-components'
   import Theme from '@/assets/theme'
 
-  const PageContainer = styled.div``
+  const PageContainer = styled.div`
+    position: relative;
+  `
 
   const ButtonAttrs = {
     type: String,
@@ -200,6 +203,23 @@
     background-color: ${(props) => props.theme.semanticColors.purple[50]};
   `
 
+  const BetaTag = styled('div', { isDisabled: Boolean })`
+    position: absolute;
+    top: -5px;
+    right: -8px;
+    padding: 4px;
+    border-radius: 4px;
+    font-size: 10px;
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.colors.disabled
+        : props.theme.semanticColors.red[500]};
+    color: ${(props) => props.theme.colors.white};
+    font-weight: 700;
+    transform: rotate(20deg);
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -210,6 +230,7 @@
       Icon,
       NumberContainer,
       NumberText,
+      BetaTag,
     },
     props: {
       type: {
@@ -293,6 +314,10 @@
         type: String,
         default: 'auto',
       },
+      isBeta: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

package/src/components/infoText/index.vue

@@ -488,7 +488,7 @@
       }
 
       const showInfo = async () => {
-        isVisible.value = true
+        isVisible.value = true && !props.hideInfoText
         // Wait for two render cycles to ensure content is stable
         await nextTick()
         await nextTick()

package/src/components/inputs/inputNumber/index.vue

@@ -230,6 +230,7 @@
   //</inputNumber>
   import styled from 'vue3-styled-components'
   import {
+    roundViaInteger,
     stringToNumber,
     numberToString,
   } from '../../../helpers/numberConverter'
@@ -861,7 +862,7 @@
             this.inputValue = this.value
             this.enteredValue =
               typeof this.value === 'number' && !isNaN(this.value)
-                ? Number(this.value.toFixed(this.numberPrecision))
+                ? roundViaInteger(this.value, this.numberPrecision)
                 : this.value
           }
         },
@@ -965,7 +966,7 @@
             minDecimals: this.minDecimals,
           })
         } else if (typeof evaluated === 'number') {
-          evaluated = evaluated.toFixed(this.numberPrecision)
+          evaluated = roundViaInteger(evaluated, this.numberPrecision)
         }
         return evaluated
       },

package/src/components/progressStep/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <ProgressionStepContainer :number-of-steps="progressionSteps.length">
+    <template v-for="(step, stepIndex) in progressionSteps" :key="step.index">
+      <ProgressionStepItem>
+        <BoxContainer
+          :is-active="stepIndex == currentStepIndex"
+          :is-valid="stepIndex < currentStepIndex"
+          @click="
+            stepIndex < currentStepIndex ? $emit('on-step-click', step) : null
+          "
+        >
+          <RcIcon
+            v-if="stepIndex < currentStepIndex"
+            color="white"
+            hovered-color="white"
+            name="all_good"
+            :size="'20px'"
+          />
+          <NumberContainer
+            v-else
+            :is-active="stepIndex === currentStepIndex"
+            :is-valid="stepIndex < currentStepIndex"
+          >
+            {{ step.number }}
+          </NumberContainer>
+        </BoxContainer>
+        <StepLabel>{{ step.label }}</StepLabel>
+      </ProgressionStepItem>
+      <StepIntermediateLine
+        v-if="stepIndex < progressionSteps.length - 1"
+        :is-valid="stepIndex < currentStepIndex"
+      />
+    </template>
+  </ProgressionStepContainer>
+</template>
+
+<script>
+  // import progressStep from "@eturnity/eturnity_reusable_components/src/components/progressStep"
+  //To use:
+  //  <ProgressionSteps
+  //         :current-step="ProgressionStep"
+  //         :progression-steps="ProgressionSteps" [{label,value,number}]
+  //         @on-step-click="onStepClick"
+  // />
+  import styled from 'vue3-styled-components'
+  import RcIcon from '../icon'
+
+  const StyledComponents = {
+    ProgressionStepContainer: styled('div', { numberOfSteps: Number })`
+      display: grid;
+      grid-template-columns:
+        repeat(${({ numberOfSteps }) => numberOfSteps - 1}, auto 1fr)
+        auto;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    `,
+    ProgressionStepItem: styled.div`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    `,
+    BoxContainer: styled('div', {
+      isActive: Boolean,
+      isValid: Boolean,
+    })`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 32px;
+      height: 32px;
+      font-size: 16px;
+      background-color: ${({ theme, isValid, isActive }) =>
+        isActive
+          ? theme.semanticColors.purple[500]
+          : isValid
+          ? theme.semanticColors.purple[200]
+          : theme.semanticColors.purple[100]};
+      color: ${({ theme, isValid, isActive }) =>
+        isActive ? theme.colors.white : theme.semanticColors.teal[800]};
+      margin: 0 10px;
+      border-radius: 5px;
+      cursor: ${({ isValid }) => (isValid ? 'pointer' : 'default')};
+      &:hover {
+        ${({ theme, isValid, isActive }) =>
+          isValid
+            ? 'background-color:' + theme.semanticColors.purple[100] + ';'
+            : ''}
+      }
+    `,
+    StepIntermediateLine: styled('div', { isValid: Boolean })`
+      height: 2px;
+      margin: 0 10px;
+      background-color: ${({ theme, isValid }) =>
+        isValid
+          ? theme.semanticColors.purple[500]
+          : theme.semanticColors.teal[200]};
+    `,
+    StepLabel: styled.div`
+      max-width: 220px;
+      margin: 0 10px;
+    `,
+    NumberContainer: styled.div``,
+  }
+  export default {
+    name: 'ProgressionSteps',
+    components: {
+      ...StyledComponents,
+      RcIcon,
+    },
+    props: {
+      progressionSteps: {
+        type: Array,
+        required: true,
+      },
+      currentStep: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      currentStepIndex() {
+        return this.progressionSteps.findIndex(
+          (step) => step.value === this.currentStep
+        )
+      },
+    },
+  }
+</script>

package/src/components/progressStep/progressStep.stories.js

@@ -0,0 +1,58 @@
+import progressStep from './index.vue'
+
+export default {
+  title: 'progressStep',
+  component: progressStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import progressStep from "@eturnity/eturnity_reusable_components/src/components/progressStep"
+//To use:
+//  <ProgressionSteps
+//         :current-step="ProgressionStep"
+//         :progression-steps="ProgressionSteps" [{label,value,number}]
+//         @on-step-click="onStepClick"
+// />
+
+const PROGRESSION_STEP_LIST = [
+  {
+    label: 'progression step label 1',
+    value: 'step1',
+    number: 1,
+  },
+  {
+    label: 'progression step label 2',
+    value: 'step2',
+    number: 2,
+  },
+  {
+    label: 'progression step label 3',
+    value: 'step3',
+    number: 3,
+  },
+]
+
+export const Default = {
+  args: {
+    'current-step': 'step1',
+    'progression-steps': PROGRESSION_STEP_LIST,
+  },
+}
+
+export const Template = {
+  args: {
+    ...Default.args,
+  },
+  render: (args) => ({
+    components: { progressStep },
+    setup() {
+      return { args }
+    },
+    template: `
+      <progressStep v-bind="args"/>
+    `,
+  }),
+}

package/src/components/tag/conversionTag/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <RCButton
+    button-size="tiny"
+    icon="star"
+    icon-color="yellow"
+    :text="textToDisplay"
+    type="protag"
+    variant="main"
+  />
+</template>
+<script>
+  import RCButton from '../../buttons/mainButton'
+  export default {
+    name: 'ConversionTag',
+    components: {
+      RCButton,
+    },
+    props: {
+      text: {
+        type: String,
+        default: 'PRO',
+      },
+      isUpperCase: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      textToDisplay() {
+        if (this.isUpperCase) {
+          return this.text.toUpperCase()
+        }
+        return this.text
+      },
+    },
+  }
+</script>

package/src/components/tag/{proTag → freeTrialTag}/index.vue

@@ -2,18 +2,24 @@
   <RCButton
     button-size="tiny"
     icon="star"
-    icon-color="yellow"
-    text="PRO"
-    type="protag"
+    icon-color="blue"
+    :text="text || $gettext('free_trial')"
+    type="freeTrialTag"
     variant="main"
   />
 </template>
 <script>
   import RCButton from '../../buttons/mainButton'
   export default {
-    name: 'ProTag',
+    name: 'FreeTrialTag',
     components: {
       RCButton,
     },
+    props: {
+      text: {
+        type: String,
+        default: '',
+      },
+    },
   }
 </script>

package/src/helpers/numberConverter.js

@@ -87,11 +87,20 @@ export const stringToNumber = ({
   }
   newVal = parseFloat(newVal)
   if (numberPrecision !== false) {
-    newVal = newVal.toFixed(numberPrecision)
+    newVal = roundViaInteger(newVal, numberPrecision)
   }
   return parseFloat(newVal)
 }
 
+export const roundViaInteger = (value, numberPrecision) => {
+  if (typeof value === 'string') {
+    value = parseFloat(value)
+  }
+  const factor = Math.pow(10, numberPrecision)
+  const roundedValue = Math.round(value * factor) / factor
+  return roundedValue
+}
+
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
   value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0