@eturnity/eturnity_reusable_components 7.8.1-EPDM-9696.0 → 7.8.1-EPDM-9696.1

package/.eslintrc

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:prettier/recommended", "plugin:vue/essential"],
+
+  "plugins": ["prettier"],
+
+  "rules": {
+    "prettier/prettier": "error",
+    "vue/no-parsing-error": "off",
+    "vue/no-side-effects-in-computed-properties": "off",
+    "vue/invalid-first-character-of-tag-name": "off"
+  },
+
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "parser": "babel-eslint",
+    "sourceType": "module"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.8.1-EPDM-9696.0",
+  "version": "7.8.1-EPDM-9696.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/draggableInputHandle/index.vue

@@ -0,0 +1,47 @@
+<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/inputs/select/index.vue

@@ -46,7 +46,9 @@
           @keydown.native="onKeyDown"
           :showBorder="showBorder"
           :data-id="dataId"
-        >
+          :isDraggable="isDraggable"
+        > 
+          <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
           <inputText
             v-if="isSearchBarVisible"
             ref="searchInput"
@@ -141,6 +143,7 @@ import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
+import draggableInputHandle from '../../draggableInputHandle'
 
 const Caret = styled.div`
   display: flex;
@@ -200,13 +203,14 @@ const selectButtonAttrs = {
   height: String,
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
-  showBorder: Boolean
+  showBorder: Boolean,
+  isDraggable: Boolean,
 }
 const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
+  padding-left:${(props) => (props.isSearchBarVisible ? '0' : props.isDraggable?'30px':'15px')};
   text-align: left;
   border-radius: 4px;
   min-height: ${(props) =>
@@ -236,6 +240,10 @@ const selectButton = styled('div', selectButtonAttrs)`
       ? props.theme.colors[props.fontColor]
       : props.fontColor};
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
+  overflow: hidden;
+  & >.handle{
+    border-right:${(props) =>props.hasError ? props.theme.colors.red : props.theme.colors.grey4} 1px solid;
+  }
 `
 const selectDropdownAttrs = {
   hoveredBgColor: String,
@@ -401,6 +409,10 @@ export default {
     dataId: {
       type: String,
       default: ''
+    },
+    isDraggable: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -418,7 +430,8 @@ export default {
     icon,
     Caret,
     Selector,
-    inputText
+    inputText,
+    draggableInputHandle
   },
 
   data() {