@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.3 → 7.12.7

package/src/components/draggableInputHandle/index.vue

@@ -1,46 +1,47 @@
-<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 'vue-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"
+}
+

package/src/components/dropdown/index.vue

@@ -1,138 +1,119 @@
-<template>
-  <wrapper ref="dropdown" :openingMode="openingMode">
-    <WrapperButton @click="isOpenByClick = !isOpenByClick">
-      <slot name="trigger" />
-    </WrapperButton>
-    <WrapperDropdown
-      class="dropdown-content"
-      :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
-      :justify="justify"
-      :position="position"
-      :width="width"
-      :backgroundColor="backgroundColor"
-    >
-      <DropdownWindow
-        :gap="gap"
-        :backgroundColor="backgroundColor"
-        :width="width"
-      >
-        <slot name="dropdown" />
-      </DropdownWindow>
-    </WrapperDropdown>
-  </wrapper>
-</template>
-
-<script>
-// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-//  How to use:
-//<DropdownComponent
-//    width="300px"
-//    backgroundColor="red">
-
-// <DropdownComponent/>
-
-import styled from 'vue3-styled-components'
-
-const wrapperAttrs = {
-  width: String,
-  backgroundColor: String,
-  openingMode: String,
-  gap: String,
-  justify: String
-}
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
-  position: relative;
-
-  &:hover .dropdown-content {
-    ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
-  }
-  & .openDropdown {
-    ${(props) =>
-      props.openingMode == 'click' ? 'display:block !important' : ''}
-  }
-`
-const WrapperDropdown = styled('div', wrapperAttrs)`
-  margin-top: 0;
-  display: none;
-  position: absolute;
-  z-index: 1;
-  ${(props) => (props.justify == 'right' ? 'right:0;' : '')}
-`
-const DropdownWindow = styled('div', wrapperAttrs)`
-  width: ${(props) => props.width};
-  background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor] || props.backgroundColor};
-  margin-top: ${(props) => props.gap};
-  border-radius: 4px;
-  position: relative;
-  min-width: 160px;
-  box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
-  z-index: 1;
-`
-
-const WrapperButton = styled('div', wrapperAttrs)`
-  display: inline-block;
-`
-
-export default {
-  name: 'DropdownComponent',
-  components: {
-    WrapperDropdown,
-    WrapperButton,
-    Wrapper,
-    DropdownWindow
-  },
-  props: {
-    width: {
-      required: false,
-      default: '300px'
-    },
-    gap: {
-      required: false,
-      default: '10px'
-    },
-    position: {
-      required: false,
-      default: 'bottom'
-    },
-    justify: {
-      required: false,
-      default: 'left'
-    },
-    openingMode: {
-      required: false,
-      default: 'hover'
-    },
-    backgroundColor: {
-      required: false,
-      default: 'white'
-    }
-  },
-  data() {
-    return {
-      isOpenByClick: false
-    }
-  },
-  methods: {
-    clickOutside(event) {
-      if (this.openingMode != 'click') return
-      if (
-        this.$refs.dropdown &&
-        (this.$refs.dropdown.$el == event.target ||
-          this.$refs.dropdown.$el.contains(event.target))
-      ) {
-        return
-      } else {
-        this.isOpenByClick = false
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.clickOutside)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.clickOutside)
-  }
-}
-</script>
+<template>
+    <wrapper ref="dropdown" :openingMode="openingMode">
+        <WrapperButton @click="isOpenByClick=!isOpenByClick">
+            <slot name="trigger"/>
+        </WrapperButton>
+        <WrapperDropdown class="dropdown-content" :class="{openDropdown:isOpenByClick && openingMode=='click'}" :justify="justify" :position="position" :width="width" :backgroundColor="backgroundColor">
+          <DropdownWindow :gap="gap" :backgroundColor="backgroundColor" :width="width">
+            <slot name="dropdown"/>
+          </DropdownWindow>
+        </WrapperDropdown>
+    </wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<DropdownComponent
+  //    width="300px"
+  //    backgroundColor="red">
+
+  // <DropdownComponent/>
+  
+  import styled from 'vue-styled-components'
+  
+  const wrapperAttrs = { width: String, backgroundColor:String,openingMode:String,gap:String,justify:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    display: inline-block;
+    position: relative;
+
+    &:hover .dropdown-content {
+        ${props=>props.openingMode=='hover'?"display:block":""}
+    }
+    & .openDropdown{
+        ${props=>props.openingMode=='click'?"display:block !important":""}
+    }
+  `
+  const WrapperDropdown = styled('div', wrapperAttrs)`
+    margin-top: 0;
+    display: none;
+    position: absolute;
+    z-index: 1;
+    ${(props) => props.justify=="right"?"right:0;":""}
+  `
+  const DropdownWindow = styled('div', wrapperAttrs)`
+    width: ${(props) => props.width};
+    background-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    margin-top: ${(props) => props.gap};
+    border-radius: 4px;
+    position: relative;
+    min-width: 160px;
+    box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
+    z-index: 1;
+  `
+  
+  const WrapperButton = styled('div', wrapperAttrs)`
+    display: inline-block;
+  `
+  
+  export default {
+    name: 'DropdownComponent',
+    components: {
+        WrapperDropdown,
+        WrapperButton,
+        Wrapper,
+        DropdownWindow
+    },
+    props: {
+      width: {
+        required: false,
+        default: '300px'
+      },
+      gap: {
+        required: false,
+        default: '10px'
+      },
+      position: {
+        required: false,
+        default: 'bottom'
+      },
+      justify: {
+        required: false,
+        default: 'left'
+      },
+      openingMode: {
+        required: false,
+        default: 'hover'
+      },
+      backgroundColor: {
+        required: false,
+        default: 'white'
+      }
+    },
+    data() {
+      return {
+        isOpenByClick:false
+      }
+    },
+    methods:{
+        clickOutside(event) {
+            if (this.openingMode!="click") return
+            if (
+                this.$refs.dropdown.$el == event.target ||
+                this.$refs.dropdown.$el.contains(event.target)
+            ) {
+                return
+            } else {
+                this.isOpenByClick=false
+            }
+        },
+    },
+    mounted() {
+        document.addEventListener('click', this.clickOutside)
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.clickOutside)
+    },
+  }
+  </script>
+  

package/src/components/errorMessage/index.vue

@@ -1,59 +1,59 @@
-<template>
-  <component-wrapper>
-    <text-overlay>
-      <slot></slot>
-    </text-overlay>
-  </component-wrapper>
-</template>
-
-<script>
-// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
-//To use:
-// <error-message />
-
-import styled from 'vue3-styled-components'
-
-const TextOverlay = styled.div`
-  position: absolute;
-  top: calc(100% + 13px);
-  background: ${(props) => props.theme.colors.red};
-  padding: 10px;
-  width: max-content;
-  max-width: 100%;
-  min-width: min-content;
-  font-size: 11px;
-  font-weight: 400;
-  border-radius: 4px;
-  z-index: 999;
-  color: ${(props) => props.theme.colors.white};
-
-  :before {
-    content: '';
-    background-color: ${(props) => props.theme.colors.red};
-    position: absolute;
-    top: 2px;
-    left: 40px;
-    height: 11px;
-    width: 11px;
-    transform-origin: center center;
-    transform: translate(-2em, -0.5em) rotate(45deg);
-  }
-`
-
-const ComponentWrapper = styled.div`
-  display: block;
-`
-
-export default {
-  name: 'info-text',
-  components: {
-    TextOverlay,
-    ComponentWrapper
-  },
-  props: {},
-  methods: {},
-  data() {
-    return {}
-  }
-}
-</script>
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
+//To use:
+// <error-message />
+
+import styled from 'vue-styled-components'
+
+const TextOverlay = styled.div`
+  position: absolute;
+  top: calc(100% + 13px);
+  background: ${(props) => props.theme.colors.red};
+  padding: 10px;
+  width: max-content;
+  max-width: 100%;
+  min-width: min-content;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  z-index: 999;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.red};
+    position: absolute;
+    top: 2px;
+    left: 40px;
+    height: 11px;
+    width: 11px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {},
+  methods: {},
+  data() {
+    return {}
+  }
+}
+</script>