@eturnity/eturnity_reusable_components 7.32.1 → 7.33.0-EPDM-11313.0

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

@@ -1,140 +1,144 @@
-<template>
-  <PageContainer>
-    <ButtonContainer
-      :id="id"
-      :custom-color="customColor"
-      :data-id="dataId"
-      :font-color="fontColor"
-      :is-disabled="isDisabled"
-      :min-width="minWidth"
-      :no-wrap="noWrap"
-      :type="type"
-    >
-      <Label :has-icon="Boolean(icon)">
-        <Icon v-if="icon" :name="icon" size="14px" />
-        {{ text }}
-      </Label>
-    </ButtonContainer>
-  </PageContainer>
-</template>
-
-<script>
-// To use:
-// import RCMainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
-// <RCMainButton
-//   text="Click Me"
-//   customColor="#ab5348"
-//   type="secondary" // primary, secondary, cancel
-//   icon="icon-name" // icon name from icon component
-//   :isDisabled="true"
-//   :minWidth="minWidth"
-//   :data-id="test_data_id"
-// />
-
-  import styled from 'vue3-styled-components'
-  import Icon from '../../icon'
-
-  const PageContainer = styled.div``
-
-  const ButtonAttrs = {
-    type: String,
-    isDisabled: Boolean,
-    minWidth: String,
-    customColor: String,
-    fontColor: String,
-    noWrap: Boolean,
-  }
-  const ButtonContainer = styled('div', ButtonAttrs)`
-    padding: 7px 15px;
-    font-size: 13px;
-    color: ${(props) =>
-      props.fontColor ? props.fontColor : props.theme.colors.white};
-    background-color: ${(props) =>
-      props.isDisabled
-        ? props.theme.colors.disabled
-        : props.customColor
-        ? props.customColor
-        : props.type === 'primary'
-        ? props.theme.colors.black
-        : props.type === 'secondary'
-        ? props.theme.colors.grey3
-        : props.type === 'cancel'
-        ? props.theme.colors.red
-        : props.theme.colors.black};
-    border-radius: 4px;
-    text-align: center;
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    user-select: none;
-    ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
-    ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
-
-    &:hover {
-      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
-    }
-
-    &:active {
-      opacity: 1;
-    }
-  `
-
-  const LabelAttrs = {
-    hasIcon: Boolean,
-  }
-
-  const Label = styled('span', LabelAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: ${(props) => (props.hasIcon ? '5px' : '0')};
-  `
-
-  export default {
-    name: 'MainButton',
-    components: {
-      Icon,
-      Label,
-      PageContainer,
-      ButtonContainer,
-    },
-    props: {
-      type: {
-        required: false,
-        default: 'primary',
-      },
-      isDisabled: {
-        required: false,
-        default: false,
-      },
-      icon: {
-        required: false,
-        default: null,
-      },
-      text: {
-        required: true,
-      },
-      customColor: {
-        required: false,
-        default: null,
-      },
-      fontColor: {
-        required: false,
-      },
-      noWrap: {
-        required: false,
-        default: false,
-      },
-      minWidth: {
-        required: false,
-        default: null,
-      },
-      id: {
-        required: false,
-        default: null,
-      },
-      dataId: {
-        type: String,
-        default: '',
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer>
+    <ButtonContainer
+      :id="id"
+      :custom-color="customColor"
+      :data-id="dataId"
+      :font-color="fontColor"
+      :is-disabled="isDisabled"
+      :min-width="minWidth"
+      :no-wrap="noWrap"
+      :type="type"
+    >
+      <Label :has-icon="Boolean(icon)">
+        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
+        {{ text }}
+      </Label>
+    </ButtonContainer>
+  </PageContainer>
+</template>
+
+<script>
+  // To use:
+  // import RCMainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
+  // <RCMainButton
+  //   text="Click Me"
+  //   customColor="#ab5348"
+  //   type="secondary" // primary, secondary, cancel
+  //   icon="icon-name" // icon name from icon component
+  //   :isDisabled="true"
+  //   :minWidth="minWidth"
+  //   :data-id="test_data_id"
+  // />
+
+  import styled from 'vue3-styled-components'
+  import Icon from '../../icon'
+
+  const PageContainer = styled.div``
+
+  const ButtonAttrs = {
+    type: String,
+    isDisabled: Boolean,
+    minWidth: String,
+    customColor: String,
+    fontColor: String,
+    noWrap: Boolean,
+  }
+  const ButtonContainer = styled('div', ButtonAttrs)`
+    padding: 7px 15px;
+    font-size: 13px;
+    color: ${(props) =>
+      props.fontColor ? props.fontColor : props.theme.colors.white};
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.colors.disabled
+        : props.customColor
+        ? props.customColor
+        : props.type === 'primary'
+        ? props.theme.colors.black
+        : props.type === 'secondary'
+        ? props.theme.colors.grey3
+        : props.type === 'cancel'
+        ? props.theme.colors.red
+        : props.theme.colors.black};
+    border-radius: 4px;
+    text-align: center;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+    ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
+    ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
+
+    &:hover {
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+    }
+
+    &:active {
+      opacity: 1;
+    }
+  `
+
+  const LabelAttrs = {
+    hasIcon: Boolean,
+  }
+
+  const Label = styled('span', LabelAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${(props) => (props.hasIcon ? '5px' : '0')};
+  `
+
+  export default {
+    name: 'MainButton',
+    components: {
+      Icon,
+      Label,
+      PageContainer,
+      ButtonContainer,
+    },
+    props: {
+      type: {
+        required: false,
+        default: 'primary',
+      },
+      isDisabled: {
+        required: false,
+        default: false,
+      },
+      icon: {
+        required: false,
+        default: null,
+      },
+      iconColor: {
+        required: false,
+        type: String,
+      },
+      text: {
+        required: true,
+      },
+      customColor: {
+        required: false,
+        default: null,
+      },
+      fontColor: {
+        required: false,
+      },
+      noWrap: {
+        required: false,
+        default: false,
+      },
+      minWidth: {
+        required: false,
+        default: null,
+      },
+      id: {
+        required: false,
+        default: null,
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+    },
+  }
+</script>

package/src/components/card/index.vue

@@ -1,96 +1,96 @@
-<template>
-  <Wrapper
-    v-show="!isLoading"
-    :class="viewCardClass"
-    :min-width="minWidth"
-    :width="width"
-  >
-    <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
-    <CardWrapper v-else>
-      <CardTitle :class="titleClass">
-        {{ $gettext(title) }}
-        <EtPopover
-          v-if="showPopover && popoverText !== ''"
-          :text="popoverText"
-        />
-      </CardTitle>
-      <slot></slot>
-    </CardWrapper>
-  </Wrapper>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import Spinner from '../spinner'
-
-  const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
-  const Wrapper = styled('div', WrapperProps)`
-    max-width: ${(props) => props.width};
-    min-width: ${(props) => props.minWidth};
-    padding: 20px;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 4px;
-    background-color: ${(props) => props.theme.colors.white};
-    height: 100%;
-  `
-
-  const CardWrapper = styled('div')`
-    height: 100%;
-    width: auto;
-  `
-
-  const CardTitle = styled('p')`
-    font-size: 14px;
-    line-height: 1;
-    color: ${(props) => props.theme.colors.black};
-    font-weight: 700;
-    margin-bottom: 10px;
-  `
-
-  export default {
-    name: 'Card',
-    components: {
-      Spinner,
-      Wrapper,
-      CardTitle,
-      CardWrapper,
-    },
-    props: {
-      title: {
-        type: String,
-        default: '',
-      },
-      width: {
-        type: [Number, String],
-        required: false,
-        default: '400px',
-      },
-      minWidth: {
-        type: [Number, String],
-        required: false,
-        default: null,
-      },
-      titleClass: {
-        type: String,
-        default: '',
-      },
-      showPopover: {
-        type: Boolean,
-        default: false,
-      },
-      viewCardClass: {
-        type: String,
-        default: '',
-      },
-      popoverText: {
-        type: String,
-        default: '',
-      },
-      isLoading: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper
+    v-show="!isLoading"
+    :class="viewCardClass"
+    :min-width="minWidth"
+    :width="width"
+  >
+    <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
+    <CardWrapper v-else>
+      <CardTitle :class="titleClass">
+        {{ $gettext(title) }}
+        <EtPopover
+          v-if="showPopover && popoverText !== ''"
+          :text="popoverText"
+        />
+      </CardTitle>
+      <slot></slot>
+    </CardWrapper>
+  </Wrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import Spinner from '../spinner'
+
+  const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
+  const Wrapper = styled('div', WrapperProps)`
+    max-width: ${(props) => props.width};
+    min-width: ${(props) => props.minWidth};
+    padding: 20px;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.white};
+    height: 100%;
+  `
+
+  const CardWrapper = styled('div')`
+    height: 100%;
+    width: auto;
+  `
+
+  const CardTitle = styled('p')`
+    font-size: 14px;
+    line-height: 1;
+    color: ${(props) => props.theme.colors.black};
+    font-weight: 700;
+    margin-bottom: 10px;
+  `
+
+  export default {
+    name: 'Card',
+    components: {
+      Spinner,
+      Wrapper,
+      CardTitle,
+      CardWrapper,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '',
+      },
+      width: {
+        type: [Number, String],
+        required: false,
+        default: '400px',
+      },
+      minWidth: {
+        type: [Number, String],
+        required: false,
+        default: null,
+      },
+      titleClass: {
+        type: String,
+        default: '',
+      },
+      showPopover: {
+        type: Boolean,
+        default: false,
+      },
+      viewCardClass: {
+        type: String,
+        default: '',
+      },
+      popoverText: {
+        type: String,
+        default: '',
+      },
+      isLoading: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  }
+</script>