@eturnity/eturnity_reusable_components 7.24.3-EPDM-11250.0 → 7.24.3-EPDM-8441.0

package/src/components/collapsableInfoText/index.vue

@@ -1,125 +1,125 @@
-<template>
-  <div>
-    <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
-    <ToggleContainer>
-      <ToggleButton
-        @click="toggleHandler"
-        v-if="showButton && !showAll"
-        :fontSize="fontSize"
-      >
-        {{ $gettext('Show more') }}
-      </ToggleButton>
-      <ToggleButton
-        @click="toggleHandler"
-        v-if="showButton && showAll"
-        :fontSize="fontSize"
-      >
-        {{ $gettext('Show less') }}
-      </ToggleButton>
-    </ToggleContainer>
-  </div>
-</template>
-
-<script>
-import styled from 'vue3-styled-components'
-import theme from '@/assets/theme.js'
-
-const TextAttrs = {
-  expand: Boolean,
-  fontSize: String
-}
-const Text = styled('p', TextAttrs)`
-  display: block;
-  display: -webkit-box;
-  line-height: 1.3em;
-  -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-size: ${(props) => props.fontSize}px;
-  text-overflow: ellipsis;
-`
-
-const ToggleContainer = styled.div`
-  display: flex;
-  width: 100%;
-`
-
-const ToggleButton = styled('p', TextAttrs)`
-  font-size: ${(props) => props.fontSize}px;
-  cursor: pointer;
-  color: ${(props) => props.theme.colors.blue};
-`
-
-export default {
-  name: 'collapsable-info-text',
-  props: {
-    text: {
-      type: String,
-      required: true
-    },
-    fontSize: {
-      type: String,
-      default: '16px'
-    },
-    lineCount: {
-      type: Number,
-      default: 3
-    },
-    minWidth: {
-      type: String,
-      default: '100%'
-    }
-  },
-  components: {
-    Text,
-    ToggleButton,
-    ToggleContainer
-  },
-  data() {
-    return {
-      showButton: true,
-      showAll: false,
-      lineBreaks: []
-    }
-  },
-  computed: {
-    theme() {
-      return theme
-    }
-  },
-  methods: {
-    displayText() {
-      if (!this.showButton) {
-        return this.text
-      }
-      if (!this.showAll) {
-        let countIndex = 0
-        this.lineBreaks.forEach((el, index) => {
-          if (index < this.lineCount) {
-            countIndex += el.length
-          }
-        })
-
-        return this.text.slice(0, countIndex + 2) + '...'
-      } else {
-        return this.text
-      }
-    },
-    toggleHandler() {
-      this.showAll = !this.showAll
-    }
-  },
-  created() {
-    // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
-    // this.lineBreaks = this.text.split('\n')
-
-    // if (this.lineBreaks.length <= this.lineCount) {
-    //   this.showButton = false
-    // }
-
-    if (this.text.length <= 170) {
-      this.showButton = false
-    }
-  }
-}
-</script>
+<template>
+  <div>
+    <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
+    <ToggleContainer>
+      <ToggleButton
+        @click="toggleHandler"
+        v-if="showButton && !showAll"
+        :fontSize="fontSize"
+      >
+        {{ $gettext('Show more') }}
+      </ToggleButton>
+      <ToggleButton
+        @click="toggleHandler"
+        v-if="showButton && showAll"
+        :fontSize="fontSize"
+      >
+        {{ $gettext('Show less') }}
+      </ToggleButton>
+    </ToggleContainer>
+  </div>
+</template>
+
+<script>
+import styled from 'vue3-styled-components'
+import theme from '@/assets/theme.js'
+
+const TextAttrs = {
+  expand: Boolean,
+  fontSize: String
+}
+const Text = styled('p', TextAttrs)`
+  display: block;
+  display: -webkit-box;
+  line-height: 1.3em;
+  -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: ${(props) => props.fontSize}px;
+  text-overflow: ellipsis;
+`
+
+const ToggleContainer = styled.div`
+  display: flex;
+  width: 100%;
+`
+
+const ToggleButton = styled('p', TextAttrs)`
+  font-size: ${(props) => props.fontSize}px;
+  cursor: pointer;
+  color: ${(props) => props.theme.colors.blue};
+`
+
+export default {
+  name: 'collapsable-info-text',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    fontSize: {
+      type: String,
+      default: '16px'
+    },
+    lineCount: {
+      type: Number,
+      default: 3
+    },
+    minWidth: {
+      type: String,
+      default: '100%'
+    }
+  },
+  components: {
+    Text,
+    ToggleButton,
+    ToggleContainer
+  },
+  data() {
+    return {
+      showButton: true,
+      showAll: false,
+      lineBreaks: []
+    }
+  },
+  computed: {
+    theme() {
+      return theme
+    }
+  },
+  methods: {
+    displayText() {
+      if (!this.showButton) {
+        return this.text
+      }
+      if (!this.showAll) {
+        let countIndex = 0
+        this.lineBreaks.forEach((el, index) => {
+          if (index < this.lineCount) {
+            countIndex += el.length
+          }
+        })
+
+        return this.text.slice(0, countIndex + 2) + '...'
+      } else {
+        return this.text
+      }
+    },
+    toggleHandler() {
+      this.showAll = !this.showAll
+    }
+  },
+  created() {
+    // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
+    // this.lineBreaks = this.text.split('\n')
+
+    // if (this.lineBreaks.length <= this.lineCount) {
+    //   this.showButton = false
+    // }
+
+    if (this.text.length <= 170) {
+      this.showButton = false
+    }
+  }
+}
+</script>

package/src/components/deleteIcon/DeleteIcon.stories.js

@@ -1,29 +1,29 @@
-import DeleteIcon from './index.vue'
-
-export default {
-  title: 'DeleteIcon',
-  component: DeleteIcon
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { DeleteIcon },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<delete-icon v-bind="$props" />'
-
-  // import DeleteIcon from "@eturnity/eturnity_reusable_components/src/components/deleteIcon"
-  // To use:
-  // <delete-icon color="gray" @click="onDeleteItem(item)" :isDisabled="true" />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  isDisabled: false
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  isDisabled: true
-}
+import DeleteIcon from './index.vue'
+
+export default {
+  title: 'DeleteIcon',
+  component: DeleteIcon
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { DeleteIcon },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<delete-icon v-bind="$props" />'
+
+  // import DeleteIcon from "@eturnity/eturnity_reusable_components/src/components/deleteIcon"
+  // To use:
+  // <delete-icon color="gray" @click="onDeleteItem(item)" :isDisabled="true" />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isDisabled: false
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isDisabled: true
+}

package/src/components/deleteIcon/index.vue

@@ -1,78 +1,78 @@
-<template>
-  <wrapper :isDisabled="isDisabled">
-    <delete-icon-red class="icon-red" :hoverBg="hoverBg" />
-    <delete-icon-gray class="icon-gray" />
-  </wrapper>
-</template>
-
-<script>
-// To use:
-// <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
-import styled from 'vue3-styled-components'
-import SvgDelete from '../../assets/icons/delete_icon.svg'
-import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
-
-const wrapperAttrs = { isDisabled: Boolean }
-const Wrapper = styled('div', wrapperAttrs)`
-  width: 30px;
-  height: 30px;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-
-  .icon-red {
-    display: none;
-  }
-
-  .icon-gray {
-    display: inline;
-  }
-
-  ${(props) =>
-    !props.isDisabled &&
-    `
-      &:hover {
-        .icon-red {
-          display: inline;
-        }
-
-        .icon-gray {
-          display: none;
-        }
-      }
-    `}
-`
-
-const IconImageAttrs = { hoverBg: String }
-const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
-  &:hover {
-    background-color: ${(props) =>
-      props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
-    border-radius: 4px;
-  }
-`
-
-const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-    border-radius: 4px;
-  }
-`
-
-export default {
-  name: 'delete-icon',
-  components: {
-    Wrapper,
-    DeleteIconRed,
-    DeleteIconGray
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    hoverBg: {
-      required: false,
-      default: ''
-    }
-  }
-}
-</script>
+<template>
+  <wrapper :isDisabled="isDisabled">
+    <delete-icon-red class="icon-red" :hoverBg="hoverBg" />
+    <delete-icon-gray class="icon-gray" />
+  </wrapper>
+</template>
+
+<script>
+// To use:
+// <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
+import styled from 'vue3-styled-components'
+import SvgDelete from '../../assets/icons/delete_icon.svg'
+import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
+
+const wrapperAttrs = { isDisabled: Boolean }
+const Wrapper = styled('div', wrapperAttrs)`
+  width: 30px;
+  height: 30px;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+
+  .icon-red {
+    display: none;
+  }
+
+  .icon-gray {
+    display: inline;
+  }
+
+  ${(props) =>
+    !props.isDisabled &&
+    `
+      &:hover {
+        .icon-red {
+          display: inline;
+        }
+
+        .icon-gray {
+          display: none;
+        }
+      }
+    `}
+`
+
+const IconImageAttrs = { hoverBg: String }
+const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
+  &:hover {
+    background-color: ${(props) =>
+      props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
+    border-radius: 4px;
+  }
+`
+
+const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
+  }
+`
+
+export default {
+  name: 'delete-icon',
+  components: {
+    Wrapper,
+    DeleteIconRed,
+    DeleteIconGray
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    hoverBg: {
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>

package/src/components/draggableInputHandle/index.vue

@@ -1,46 +1,46 @@
-<template>
-  <Handle :height="height" class="handle">
-    <Dot></Dot>
-    <Dot></Dot>
-    <Dot></Dot>
-  </Handle>
-</template>
-
-<script>
-import styled from 'vue3-styled-components'
-
-const Handle = styled('div', { height: String })`
-  position: absolute;
-  left: 0;
-  margin-right: 10px;
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  justify-content: center;
-  width: 14px;
-  height: ${(props) => props.height};
-  padding: 0 5px;
-  background-color: #f3f3f7;
-  cursor: pointer;
-  align-items: center;
-`
-const Dot = styled.div`
-  display: inline-block;
-  width: 4px;
-  height: 4px;
-  margin: 2px;
-  background-color: #0068de;
-`
-
-export default {
-  name: 'draggableInputHandle',
-  props: ['height'],
-  components: {
-    Handle,
-    Dot
-  },
-  data() {
-    return {}
-  }
-}
-</script>
+<template>
+  <Handle :height="height" class="handle">
+    <Dot></Dot>
+    <Dot></Dot>
+    <Dot></Dot>
+  </Handle>
+</template>
+
+<script>
+import styled from 'vue3-styled-components'
+
+const Handle = styled('div', { height: String })`
+  position: absolute;
+  left: 0;
+  margin-right: 10px;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  justify-content: center;
+  width: 14px;
+  height: ${(props) => props.height};
+  padding: 0 5px;
+  background-color: #f3f3f7;
+  cursor: pointer;
+  align-items: center;
+`
+const Dot = styled.div`
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin: 2px;
+  background-color: #0068de;
+`
+
+export default {
+  name: 'draggableInputHandle',
+  props: ['height'],
+  components: {
+    Handle,
+    Dot
+  },
+  data() {
+    return {}
+  }
+}
+</script>

package/src/components/dropdown/Dropdown.stories.js

@@ -1,54 +1,54 @@
-import Dropdown from './index.vue'
-
-export default {
-  title: 'Dropdown',
-  component: Dropdown
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Dropdown },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: `<Dropdown v-bind="$props">
-  <template #trigger>
-      trigger button
-  </template>
-  <template #dropdown>
-      <div>
-        <h3>fully customizable dropdown</h3>
-        <ul>
-          <li>item</li>
-          <li>item</li>
-          <li>item</li>
-        </ul>
-      </div>
-  </template>
-</Dropdown>`,
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<icon
-  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-  //   color="red"
-  //   hoveredColor="blue"
-  //   size="60px" by default, this is 30px
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  openingMode:"click",
-  gap:"0px",
-  justify:"left",
-  width:"150px"
-}
-
-export const withHover = Template.bind({})
-withHover.args = {
-  openingMode:"hover",
-  gap:"20px",
-  justify:"right",
-  width:"250px"
-}
-
+import Dropdown from './index.vue'
+
+export default {
+  title: 'Dropdown',
+  component: Dropdown
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Dropdown },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: `<Dropdown v-bind="$props">
+  <template #trigger>
+      trigger button
+  </template>
+  <template #dropdown>
+      <div>
+        <h3>fully customizable dropdown</h3>
+        <ul>
+          <li>item</li>
+          <li>item</li>
+          <li>item</li>
+        </ul>
+      </div>
+  </template>
+</Dropdown>`,
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  openingMode:"click",
+  gap:"0px",
+  justify:"left",
+  width:"150px"
+}
+
+export const withHover = Template.bind({})
+withHover.args = {
+  openingMode:"hover",
+  gap:"20px",
+  justify:"right",
+  width:"250px"
+}
+