@eturnity/eturnity_reusable_components 8.10.3-EPDM-11600.2 → 8.10.3-EPDM-14085.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/assets/svgIcons/erase.svg +3 -2
- package/src/assets/theme.js +1 -0
- package/src/components/draggableCard/defaultProps.js +16 -0
- package/src/components/draggableCard/draggableCard.spec.js +99 -0
- package/src/components/draggableCard/draggableCard.stories.js +79 -0
- package/src/components/draggableCard/index.vue +347 -0
- package/src/components/infoCard/index.vue +3 -3
- package/src/components/inputs/checkbox/index.vue +2 -2
- package/src/components/inputs/inputNumber/InputNumber.stories.js +5 -19
- package/src/components/inputs/inputNumber/index.vue +2 -14
package/package.json
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
|
|
1
|
+
<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<circle cx="20" cy="20" r="7"></circle>
|
|
3
|
+
<path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
|
|
3
4
|
</svg>
|
package/src/assets/theme.js
CHANGED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const defaultProps = {
|
|
2
|
+
title: 'Sample Title',
|
|
3
|
+
infoText: 'Sample Info Text',
|
|
4
|
+
initialPosition: { top: '0px', left: '0px' },
|
|
5
|
+
minWidth: '284px',
|
|
6
|
+
maxWidth: '284px',
|
|
7
|
+
dragTargets: ['document'],
|
|
8
|
+
dragBounds: {},
|
|
9
|
+
sampleBody1:
|
|
10
|
+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
|
11
|
+
sampleBody2:
|
|
12
|
+
'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
|
|
13
|
+
sampleFooter: 'Sample footer',
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default defaultProps
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { mount } from '@vue/test-utils'
|
|
2
|
+
import DraggableCard from '@/components/draggableCard'
|
|
3
|
+
import defaultProps from './defaultProps'
|
|
4
|
+
|
|
5
|
+
jest.mock('@/components/icon/iconCache.mjs', () => ({
|
|
6
|
+
// need to mock this due to how jest handles import.meta
|
|
7
|
+
fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
|
|
8
|
+
}))
|
|
9
|
+
|
|
10
|
+
describe('DraggableCard.vue', () => {
|
|
11
|
+
it('renders properly with required props', () => {
|
|
12
|
+
const wrapper = mount(DraggableCard, { props: defaultProps })
|
|
13
|
+
expect(
|
|
14
|
+
wrapper.find('[data-test-id="draggable_card_header"]').text()
|
|
15
|
+
).toContain(defaultProps.title)
|
|
16
|
+
|
|
17
|
+
// Expect no footer rendered if not provided
|
|
18
|
+
const footerElement = wrapper.find('[data-test-id="draggable_card_footer"]')
|
|
19
|
+
expect(footerElement.exists()).toBe(false)
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
it('renders body slot content correctly', () => {
|
|
23
|
+
const wrapper = mount(DraggableCard, {
|
|
24
|
+
props: defaultProps,
|
|
25
|
+
slots: {
|
|
26
|
+
body: `
|
|
27
|
+
<div class="custom_body1">${defaultProps.sampleBody1}</div>
|
|
28
|
+
<div class="custom_body2">${defaultProps.sampleBody2}</div>
|
|
29
|
+
`,
|
|
30
|
+
},
|
|
31
|
+
})
|
|
32
|
+
expect(wrapper.find('.custom_body1').exists()).toBe(true)
|
|
33
|
+
expect(wrapper.text()).toContain(defaultProps.sampleBody1)
|
|
34
|
+
expect(wrapper.find('.custom_body2').exists()).toBe(true)
|
|
35
|
+
expect(wrapper.text()).toContain(defaultProps.sampleBody2)
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
it('renders footer slot content correctly', () => {
|
|
39
|
+
const wrapper = mount(DraggableCard, {
|
|
40
|
+
props: defaultProps,
|
|
41
|
+
slots: {
|
|
42
|
+
footer: `<div class="custom_footer">${defaultProps.sampleFooter}</div>`,
|
|
43
|
+
},
|
|
44
|
+
})
|
|
45
|
+
expect(
|
|
46
|
+
wrapper.find('[data-test-id="draggable_card_footer"]').exists()
|
|
47
|
+
).toBe(true)
|
|
48
|
+
expect(wrapper.find('.custom_footer').exists()).toBe(true)
|
|
49
|
+
expect(wrapper.text()).toContain(defaultProps.sampleFooter)
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
it('emits "on-close" when close button is clicked', async () => {
|
|
53
|
+
const wrapper = mount(DraggableCard, { props: defaultProps })
|
|
54
|
+
await wrapper
|
|
55
|
+
.find('[data-test-id="draggable_card_close_button"]')
|
|
56
|
+
.trigger('click')
|
|
57
|
+
expect(wrapper.emitted('on-close')).toBeTruthy()
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
it('toggles collapse state when arrow icon is clicked', async () => {
|
|
61
|
+
const wrapper = mount(DraggableCard, {
|
|
62
|
+
props: { ...defaultProps, isCollapsible: true },
|
|
63
|
+
})
|
|
64
|
+
expect(wrapper.vm.isCollapsed).toBe(false)
|
|
65
|
+
await wrapper
|
|
66
|
+
.find('[data-test-id="draggable_card_collapse_button"]')
|
|
67
|
+
.trigger('click')
|
|
68
|
+
expect(wrapper.vm.isCollapsed).toBe(true)
|
|
69
|
+
})
|
|
70
|
+
|
|
71
|
+
it('handles drag start event', async () => {
|
|
72
|
+
const wrapper = mount(DraggableCard, { props: defaultProps })
|
|
73
|
+
await wrapper
|
|
74
|
+
.find('[data-test-id="draggable_card_drag_icon"]')
|
|
75
|
+
.trigger('mousedown', { clientX: 100, clientY: 100 })
|
|
76
|
+
expect(wrapper.vm.isDragging).toBe(true)
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
it('handles drag move event', async () => {
|
|
80
|
+
const wrapper = mount(DraggableCard, { props: defaultProps })
|
|
81
|
+
wrapper.vm.onDragStart(
|
|
82
|
+
{ preventDefault: () => {}, clientX: 100, clientY: 100 },
|
|
83
|
+
false
|
|
84
|
+
)
|
|
85
|
+
wrapper.vm.onDrag({ preventDefault: () => {}, clientX: 120, clientY: 120 })
|
|
86
|
+
expect(wrapper.vm.eventCoordinates.x).toBe(120)
|
|
87
|
+
expect(wrapper.vm.eventCoordinates.y).toBe(120)
|
|
88
|
+
})
|
|
89
|
+
|
|
90
|
+
it('handles drag end event', async () => {
|
|
91
|
+
const wrapper = mount(DraggableCard, { props: defaultProps })
|
|
92
|
+
wrapper.vm.onDragStart(
|
|
93
|
+
{ preventDefault: () => {}, clientX: 100, clientY: 100 },
|
|
94
|
+
false
|
|
95
|
+
)
|
|
96
|
+
wrapper.vm.onDragEnd()
|
|
97
|
+
expect(wrapper.vm.isDragging).toBe(false)
|
|
98
|
+
})
|
|
99
|
+
})
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import defaultProps from './defaultProps'
|
|
2
|
+
import DraggableCard from './index.vue'
|
|
3
|
+
import styled from 'vue3-styled-components'
|
|
4
|
+
import theme from '@/assets/theme'
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'DraggableCard',
|
|
8
|
+
component: DraggableCard,
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const TextContainer = styled.div`
|
|
13
|
+
font-family: ${theme.fonts.mainFont};
|
|
14
|
+
color: ${theme.colors.white};
|
|
15
|
+
font-weight: 400;
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
line-height: 21px;
|
|
18
|
+
letter-spacing: 0%;
|
|
19
|
+
`
|
|
20
|
+
|
|
21
|
+
const CompleteTemplate = (args) => {
|
|
22
|
+
return {
|
|
23
|
+
components: { DraggableCard, TextContainer },
|
|
24
|
+
setup() {
|
|
25
|
+
return { args }
|
|
26
|
+
},
|
|
27
|
+
template: `
|
|
28
|
+
<DraggableCard v-bind="args">
|
|
29
|
+
<template #body>
|
|
30
|
+
<TextContainer>{{ args.sampleBody1 }}</TextContainer>
|
|
31
|
+
<TextContainer>{{ args.sampleBody2 }}</TextContainer>
|
|
32
|
+
</template>
|
|
33
|
+
<template #footer>
|
|
34
|
+
<TextContainer>{{ args.sampleFooter }}</TextContainer>
|
|
35
|
+
</template>
|
|
36
|
+
</DraggableCard>
|
|
37
|
+
`,
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export const Default = CompleteTemplate.bind({})
|
|
42
|
+
Default.args = {
|
|
43
|
+
...defaultProps,
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export const NotCollapsible = CompleteTemplate.bind({})
|
|
47
|
+
NotCollapsible.args = {
|
|
48
|
+
...defaultProps,
|
|
49
|
+
isCollapsible: false,
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export const AdjustWidth = CompleteTemplate.bind({})
|
|
53
|
+
AdjustWidth.args = {
|
|
54
|
+
...defaultProps,
|
|
55
|
+
minWidth: '100px',
|
|
56
|
+
maxWidth: '500px',
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const NoFooterTemplate = (args) => {
|
|
60
|
+
return {
|
|
61
|
+
components: { DraggableCard, TextContainer },
|
|
62
|
+
setup() {
|
|
63
|
+
return { args }
|
|
64
|
+
},
|
|
65
|
+
template: `
|
|
66
|
+
<DraggableCard v-bind="args">
|
|
67
|
+
<template #body>
|
|
68
|
+
<TextContainer>{{ args.sampleBody1 }}</TextContainer>
|
|
69
|
+
<TextContainer>{{ args.sampleBody2 }}</TextContainer>
|
|
70
|
+
</template>
|
|
71
|
+
</DraggableCard>
|
|
72
|
+
`,
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export const NoFooter = NoFooterTemplate.bind({})
|
|
77
|
+
NoFooter.args = {
|
|
78
|
+
...defaultProps,
|
|
79
|
+
}
|
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<CardContainer
|
|
3
|
+
data-test-id="draggable_card_container"
|
|
4
|
+
:initial-position="initialPosition"
|
|
5
|
+
:max-width="maxWidth"
|
|
6
|
+
:min-width="minWidth"
|
|
7
|
+
>
|
|
8
|
+
<HeaderContainer data-test-id="draggable_card_header">
|
|
9
|
+
<SubHeaderWrapper>
|
|
10
|
+
<LeftIconsContainer>
|
|
11
|
+
<DragHandleWrapper :class="{ dragging: isDragging }">
|
|
12
|
+
<RCIcon
|
|
13
|
+
:color="theme.colors.grey3"
|
|
14
|
+
data-test-id="draggable_card_drag_icon"
|
|
15
|
+
name="drag_icon"
|
|
16
|
+
size="14px"
|
|
17
|
+
:title="$gettext('drag_drop')"
|
|
18
|
+
@mousedown="(event) => onDragStart(event, false)"
|
|
19
|
+
@touchstart="
|
|
20
|
+
(event) => {
|
|
21
|
+
onDragStart(event, true)
|
|
22
|
+
}
|
|
23
|
+
"
|
|
24
|
+
/>
|
|
25
|
+
</DragHandleWrapper>
|
|
26
|
+
<ArrowIconWrapper
|
|
27
|
+
v-if="isCollapsible"
|
|
28
|
+
data-test-id="draggable_card_collapse_button"
|
|
29
|
+
:is-collapsed="isCollapsed"
|
|
30
|
+
@click="toggleCollapse"
|
|
31
|
+
>
|
|
32
|
+
<CollapseArrowIcon />
|
|
33
|
+
</ArrowIconWrapper>
|
|
34
|
+
</LeftIconsContainer>
|
|
35
|
+
<TitleContainer>
|
|
36
|
+
<TextContainer>{{ title }}</TextContainer>
|
|
37
|
+
<InfoText v-if="infoText?.length" :text="infoText" />
|
|
38
|
+
</TitleContainer>
|
|
39
|
+
</SubHeaderWrapper>
|
|
40
|
+
<CloseButton
|
|
41
|
+
class="close"
|
|
42
|
+
data-test-id="draggable_card_close_button"
|
|
43
|
+
@click="$emit('on-close')"
|
|
44
|
+
/>
|
|
45
|
+
</HeaderContainer>
|
|
46
|
+
<BodyContainer v-if="!isCollapsed" data-test-id="draggable_card_body">
|
|
47
|
+
<slot name="body"></slot>
|
|
48
|
+
</BodyContainer>
|
|
49
|
+
<FooterContainer v-if="$slots.footer" data-test-id="draggable_card_footer">
|
|
50
|
+
<slot name="footer"></slot>
|
|
51
|
+
</FooterContainer>
|
|
52
|
+
</CardContainer>
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script>
|
|
56
|
+
import styled from 'vue3-styled-components'
|
|
57
|
+
import theme from '../../assets/theme.js'
|
|
58
|
+
import RCIcon from '../icon'
|
|
59
|
+
import CloseButton from '../buttons/closeButton'
|
|
60
|
+
import InfoText from '../infoText'
|
|
61
|
+
import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
|
|
62
|
+
|
|
63
|
+
const CardContainerAttr = {
|
|
64
|
+
initialPosition: Object,
|
|
65
|
+
minWidth: String,
|
|
66
|
+
maxWidth: String,
|
|
67
|
+
}
|
|
68
|
+
const CardContainer = styled('div', CardContainerAttr)`
|
|
69
|
+
position: absolute;
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-direction: column;
|
|
72
|
+
border-radius: 4px;
|
|
73
|
+
min-width: ${(props) => props.minWidth};
|
|
74
|
+
max-width: ${(props) => props.maxWidth};
|
|
75
|
+
background: ${theme.colors.transparentBlack2};
|
|
76
|
+
z-index: 5;
|
|
77
|
+
${(props) =>
|
|
78
|
+
props.initialPosition?.top && `top: ${props.initialPosition.top};`}
|
|
79
|
+
${(props) =>
|
|
80
|
+
props.initialPosition?.right && `right: ${props.initialPosition.right};`}
|
|
81
|
+
${(props) =>
|
|
82
|
+
props.initialPosition?.left && `left: ${props.initialPosition.left};`}
|
|
83
|
+
${(props) =>
|
|
84
|
+
props.initialPosition?.bottom &&
|
|
85
|
+
`bottom: ${props.initialPosition.bottom};`}
|
|
86
|
+
`
|
|
87
|
+
|
|
88
|
+
const HeaderContainer = styled.div`
|
|
89
|
+
display: flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
justify-content: space-between;
|
|
92
|
+
padding: 8px;
|
|
93
|
+
`
|
|
94
|
+
|
|
95
|
+
const SubHeaderWrapper = styled.div`
|
|
96
|
+
display: flex;
|
|
97
|
+
min-width: 180px;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: space-between;
|
|
100
|
+
height: fit-content;
|
|
101
|
+
margin-right: 14px;
|
|
102
|
+
`
|
|
103
|
+
|
|
104
|
+
const LeftIconsContainer = styled.div`
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
gap: 4px;
|
|
108
|
+
margin-right: 14px;
|
|
109
|
+
`
|
|
110
|
+
|
|
111
|
+
const TitleContainer = styled.div`
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
gap: 8px;
|
|
115
|
+
`
|
|
116
|
+
|
|
117
|
+
const TextContainer = styled.div`
|
|
118
|
+
font-family: ${theme.fonts.mainFont};
|
|
119
|
+
font-weight: 600;
|
|
120
|
+
font-size: 14px;
|
|
121
|
+
line-height: 19.6px;
|
|
122
|
+
letter-spacing: -1%;
|
|
123
|
+
color: ${theme.colors.white};
|
|
124
|
+
word-break: break-word;
|
|
125
|
+
overflow-wrap: break-word;
|
|
126
|
+
white-space: normal;
|
|
127
|
+
`
|
|
128
|
+
|
|
129
|
+
const DragHandleWrapper = styled.div`
|
|
130
|
+
display: grid;
|
|
131
|
+
align-items: center;
|
|
132
|
+
justify-items: center;
|
|
133
|
+
width: 26px;
|
|
134
|
+
height: 26px;
|
|
135
|
+
cursor: grab;
|
|
136
|
+
&.dragging {
|
|
137
|
+
cursor: grabbing;
|
|
138
|
+
}
|
|
139
|
+
`
|
|
140
|
+
|
|
141
|
+
const collapsedAttrs = {
|
|
142
|
+
isCollapsed: Boolean,
|
|
143
|
+
}
|
|
144
|
+
const ArrowIconWrapper = styled('div', collapsedAttrs)`
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
width: 8px;
|
|
149
|
+
transition: transform 0.3s ease;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
path {
|
|
152
|
+
fill: ${theme.colors.white};
|
|
153
|
+
}
|
|
154
|
+
${(props) => props.isCollapsed && 'transform: rotate(-180deg);'}
|
|
155
|
+
`
|
|
156
|
+
|
|
157
|
+
const BodyContainer = styled.div`
|
|
158
|
+
display: flex;
|
|
159
|
+
flex-direction: column;
|
|
160
|
+
gap: 16px;
|
|
161
|
+
padding-top: 8px;
|
|
162
|
+
padding-right: 16px;
|
|
163
|
+
padding-bottom: 8px;
|
|
164
|
+
padding-left: 16px;
|
|
165
|
+
word-break: break-word;
|
|
166
|
+
overflow-wrap: break-word;
|
|
167
|
+
white-space: normal;
|
|
168
|
+
`
|
|
169
|
+
|
|
170
|
+
const FooterContainer = styled.div`
|
|
171
|
+
display: flex;
|
|
172
|
+
border-radius: 4px;
|
|
173
|
+
align-items: center;
|
|
174
|
+
justify-content: space-between;
|
|
175
|
+
padding: 8px;
|
|
176
|
+
background: ${theme.colors.eturnityGrey};
|
|
177
|
+
word-break: break-word;
|
|
178
|
+
overflow-wrap: break-word;
|
|
179
|
+
white-space: normal;
|
|
180
|
+
`
|
|
181
|
+
|
|
182
|
+
export default {
|
|
183
|
+
name: 'DraggableCard',
|
|
184
|
+
components: {
|
|
185
|
+
CardContainer,
|
|
186
|
+
HeaderContainer,
|
|
187
|
+
SubHeaderWrapper,
|
|
188
|
+
LeftIconsContainer,
|
|
189
|
+
TextContainer,
|
|
190
|
+
DragHandleWrapper,
|
|
191
|
+
ArrowIconWrapper,
|
|
192
|
+
CollapseArrowIcon,
|
|
193
|
+
RCIcon,
|
|
194
|
+
CloseButton,
|
|
195
|
+
InfoText,
|
|
196
|
+
TitleContainer,
|
|
197
|
+
BodyContainer,
|
|
198
|
+
FooterContainer,
|
|
199
|
+
},
|
|
200
|
+
props: {
|
|
201
|
+
minWidth: {
|
|
202
|
+
required: true,
|
|
203
|
+
type: String,
|
|
204
|
+
},
|
|
205
|
+
maxWidth: {
|
|
206
|
+
required: true,
|
|
207
|
+
type: String,
|
|
208
|
+
},
|
|
209
|
+
initialPosition: {
|
|
210
|
+
required: true,
|
|
211
|
+
type: Object,
|
|
212
|
+
},
|
|
213
|
+
title: {
|
|
214
|
+
required: true,
|
|
215
|
+
type: String,
|
|
216
|
+
},
|
|
217
|
+
isCollapsible: {
|
|
218
|
+
required: false,
|
|
219
|
+
type: Boolean,
|
|
220
|
+
default: true,
|
|
221
|
+
},
|
|
222
|
+
infoText: {
|
|
223
|
+
required: false,
|
|
224
|
+
type: String,
|
|
225
|
+
default: '',
|
|
226
|
+
},
|
|
227
|
+
dragTargets: {
|
|
228
|
+
required: false,
|
|
229
|
+
type: Array,
|
|
230
|
+
default: () => ['document'],
|
|
231
|
+
},
|
|
232
|
+
dragBounds: {
|
|
233
|
+
required: false,
|
|
234
|
+
type: Object,
|
|
235
|
+
default: () => {},
|
|
236
|
+
},
|
|
237
|
+
},
|
|
238
|
+
emits: ['on-close'],
|
|
239
|
+
data() {
|
|
240
|
+
return {
|
|
241
|
+
isCollapsed: false,
|
|
242
|
+
isDragging: false,
|
|
243
|
+
isTouchStart: false,
|
|
244
|
+
eventCoordinates: {
|
|
245
|
+
x: 0,
|
|
246
|
+
y: 0,
|
|
247
|
+
},
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
computed: {
|
|
251
|
+
dragBoundsEnabled() {
|
|
252
|
+
const minPosition = this.dragBounds?.min
|
|
253
|
+
const maxPosition = this.dragBounds?.max
|
|
254
|
+
return (
|
|
255
|
+
minPosition?.top &&
|
|
256
|
+
minPosition?.left &&
|
|
257
|
+
maxPosition?.top &&
|
|
258
|
+
maxPosition?.left
|
|
259
|
+
)
|
|
260
|
+
},
|
|
261
|
+
theme() {
|
|
262
|
+
return theme
|
|
263
|
+
},
|
|
264
|
+
},
|
|
265
|
+
beforeUnmount() {
|
|
266
|
+
this.removeEvents()
|
|
267
|
+
},
|
|
268
|
+
methods: {
|
|
269
|
+
toggleCollapse() {
|
|
270
|
+
this.isCollapsed = !this.isCollapsed
|
|
271
|
+
},
|
|
272
|
+
onDragStart(e, isTouchStart) {
|
|
273
|
+
e.preventDefault()
|
|
274
|
+
this.isDragging = true
|
|
275
|
+
this.isTouchStart = isTouchStart
|
|
276
|
+
this.eventCoordinates.x = isTouchStart
|
|
277
|
+
? e.touches[0].clientX
|
|
278
|
+
: e.clientX
|
|
279
|
+
this.eventCoordinates.y = isTouchStart
|
|
280
|
+
? e.touches[0].clientY
|
|
281
|
+
: e.clientY
|
|
282
|
+
this.dragTargets.forEach((id) => {
|
|
283
|
+
const target =
|
|
284
|
+
id === 'document' ? document : document.getElementById(id)
|
|
285
|
+
if (target && target.addEventListener) {
|
|
286
|
+
target.addEventListener(
|
|
287
|
+
isTouchStart ? 'touchend' : 'mouseup',
|
|
288
|
+
this.onDragEnd
|
|
289
|
+
)
|
|
290
|
+
target.addEventListener(
|
|
291
|
+
isTouchStart ? 'touchmove' : 'mousemove',
|
|
292
|
+
this.onDrag
|
|
293
|
+
)
|
|
294
|
+
}
|
|
295
|
+
})
|
|
296
|
+
document.addEventListener(
|
|
297
|
+
isTouchStart ? 'touchend' : 'mouseup',
|
|
298
|
+
this.onDragEnd
|
|
299
|
+
)
|
|
300
|
+
},
|
|
301
|
+
onDrag(e) {
|
|
302
|
+
e.preventDefault()
|
|
303
|
+
const eventX = this.isTouchStart ? e.touches[0].clientX : e.clientX
|
|
304
|
+
const eventY = this.isTouchStart ? e.touches[0].clientY : e.clientY
|
|
305
|
+
const deltaX = this.eventCoordinates.x - eventX
|
|
306
|
+
const deltaY = this.eventCoordinates.y - eventY
|
|
307
|
+
this.eventCoordinates.x = eventX
|
|
308
|
+
this.eventCoordinates.y = eventY
|
|
309
|
+
const element = this.$el
|
|
310
|
+
let positionY = element.offsetTop - deltaY
|
|
311
|
+
let positionX = element.offsetLeft - deltaX
|
|
312
|
+
if (this.dragBoundsEnabled) {
|
|
313
|
+
const minPosition = this.dragBounds.min
|
|
314
|
+
const maxPosition = this.dragBounds.max
|
|
315
|
+
positionY = Math.min(
|
|
316
|
+
Math.max(positionY, minPosition.top),
|
|
317
|
+
maxPosition.top
|
|
318
|
+
)
|
|
319
|
+
positionX = Math.min(
|
|
320
|
+
Math.max(positionX, minPosition.left),
|
|
321
|
+
maxPosition.left
|
|
322
|
+
)
|
|
323
|
+
}
|
|
324
|
+
element.style.top = positionY + 'px'
|
|
325
|
+
element.style.left = positionX + 'px'
|
|
326
|
+
},
|
|
327
|
+
onDragEnd() {
|
|
328
|
+
this.isDragging = false
|
|
329
|
+
this.removeEvents()
|
|
330
|
+
},
|
|
331
|
+
removeEvents() {
|
|
332
|
+
this.dragTargets.forEach((id) => {
|
|
333
|
+
const target =
|
|
334
|
+
id === 'document' ? document : document.getElementById(id)
|
|
335
|
+
if (target && target.removeEventListener) {
|
|
336
|
+
target.removeEventListener('mouseup', this.onDragEnd)
|
|
337
|
+
target.removeEventListener('touchend', this.onDragEnd)
|
|
338
|
+
target.removeEventListener('mousemove', this.onDrag)
|
|
339
|
+
target.removeEventListener('touchmove', this.onDrag)
|
|
340
|
+
}
|
|
341
|
+
})
|
|
342
|
+
document.removeEventListener('mouseup', this.onDragEnd)
|
|
343
|
+
document.removeEventListener('touchend', this.onDragEnd)
|
|
344
|
+
},
|
|
345
|
+
},
|
|
346
|
+
}
|
|
347
|
+
</script>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<RCIcon
|
|
13
13
|
:color="iconColor ? iconColor : presetStyles.iconColor"
|
|
14
14
|
data-test-id="info_card_icon"
|
|
15
|
-
|
|
15
|
+
name="info"
|
|
16
16
|
size="24px"
|
|
17
17
|
/>
|
|
18
18
|
<TextContainer data-test-id="info_card_text_container">
|
|
@@ -138,8 +138,8 @@
|
|
|
138
138
|
stylesCollection.iconColor = theme.colors.white
|
|
139
139
|
} else if (this.isErrorMinor) {
|
|
140
140
|
stylesCollection.borderStyle = 'dashed'
|
|
141
|
-
stylesCollection.borderColor = theme.colors.
|
|
142
|
-
stylesCollection.iconColor = theme.colors.
|
|
141
|
+
stylesCollection.borderColor = theme.colors.pureRed
|
|
142
|
+
stylesCollection.iconColor = theme.colors.pureRed
|
|
143
143
|
} else {
|
|
144
144
|
stylesCollection.borderStyle = 'dashed'
|
|
145
145
|
stylesCollection.borderColor = theme.colors.grey4
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
import styled from 'vue3-styled-components'
|
|
45
45
|
|
|
46
46
|
const ComponentWrapper = styled.div`
|
|
47
|
-
min-height:
|
|
47
|
+
min-height: 16px;
|
|
48
48
|
`
|
|
49
49
|
|
|
50
50
|
const CheckWrapper = styled('div', { hasLabel: Boolean })`
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
font-size: 13px;
|
|
180
180
|
display: grid;
|
|
181
181
|
align-items: center;
|
|
182
|
-
min-height:
|
|
182
|
+
min-height: 16px;
|
|
183
183
|
color: ${(props) =>
|
|
184
184
|
props.isDisabled ? props.theme.colors.grey2 : 'unset'};
|
|
185
185
|
`
|
|
@@ -3,15 +3,15 @@ import InputNumber from './index.vue'
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'InputNumber',
|
|
5
5
|
component: InputNumber,
|
|
6
|
+
// argTypes: {},
|
|
6
7
|
}
|
|
7
8
|
|
|
8
|
-
const Template = (args) => ({
|
|
9
|
+
const Template = (args, { argTypes }) => ({
|
|
9
10
|
// Components used in your story `template` are defined in the `components` object
|
|
10
11
|
components: { InputNumber },
|
|
11
|
-
setup()
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
template: `<InputNumber v-bind="args" />`,
|
|
12
|
+
// The story's `args` need to be mapped into the template through the `setup()` method
|
|
13
|
+
props: Object.keys(argTypes),
|
|
14
|
+
template: '<input-number v-bind="$props" />',
|
|
15
15
|
|
|
16
16
|
// import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
|
|
17
17
|
// How to use:
|
|
@@ -73,20 +73,6 @@ Disabled.args = {
|
|
|
73
73
|
showLinearUnitName: false,
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
export const DisabledAndPreDefined = Template.bind({})
|
|
77
|
-
DisabledAndPreDefined.args = {
|
|
78
|
-
placeholder: 'Enter Value',
|
|
79
|
-
disabled: true,
|
|
80
|
-
isPreDefined: true,
|
|
81
|
-
value: '',
|
|
82
|
-
inputWidth: '200px',
|
|
83
|
-
isError: false,
|
|
84
|
-
numberPrecision: 0,
|
|
85
|
-
noBorder: false,
|
|
86
|
-
textAlign: 'left',
|
|
87
|
-
showLinearUnitName: false,
|
|
88
|
-
}
|
|
89
|
-
|
|
90
76
|
export const LinearUnit = Template.bind({})
|
|
91
77
|
LinearUnit.args = {
|
|
92
78
|
placeholder: 'Enter Value',
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
:color-mode="colorMode"
|
|
43
43
|
:data-id="inputDataId"
|
|
44
44
|
:data-qa-id="dataQaId"
|
|
45
|
+
:disabled="disabled"
|
|
45
46
|
:font-color="colorMode === 'transparent' ? 'white' : fontColor"
|
|
46
47
|
:font-size="fontSize"
|
|
47
48
|
:has-label-slot="hasLabelSlot"
|
|
@@ -51,7 +52,6 @@
|
|
|
51
52
|
:is-disabled="disabled"
|
|
52
53
|
:is-error="isError"
|
|
53
54
|
:is-interactive="isInteractive"
|
|
54
|
-
:is-pre-defined="isPreDefined"
|
|
55
55
|
:min-width="minWidth"
|
|
56
56
|
:no-border="noBorder"
|
|
57
57
|
:placeholder="displayedPlaceholder"
|
|
@@ -194,7 +194,6 @@
|
|
|
194
194
|
slotSize: String,
|
|
195
195
|
inputHeight: String,
|
|
196
196
|
isInteractive: Boolean,
|
|
197
|
-
isPreDefined: Boolean,
|
|
198
197
|
alignItems: String,
|
|
199
198
|
labelFontColor: String,
|
|
200
199
|
labelFontWeight: String,
|
|
@@ -255,7 +254,7 @@
|
|
|
255
254
|
color: ${(props) =>
|
|
256
255
|
props.isError
|
|
257
256
|
? props.theme.colors.grey6
|
|
258
|
-
: props.isDisabled
|
|
257
|
+
: props.isDisabled
|
|
259
258
|
? props.colorMode === 'transparent'
|
|
260
259
|
? props.theme.colors.white
|
|
261
260
|
: props.theme.colors.grey2
|
|
@@ -525,11 +524,6 @@
|
|
|
525
524
|
required: false,
|
|
526
525
|
default: 0,
|
|
527
526
|
},
|
|
528
|
-
isPreDefined: {
|
|
529
|
-
type: Boolean,
|
|
530
|
-
required: false,
|
|
531
|
-
default: false,
|
|
532
|
-
},
|
|
533
527
|
minDecimals: {
|
|
534
528
|
type: Number,
|
|
535
529
|
required: false,
|
|
@@ -650,18 +644,12 @@
|
|
|
650
644
|
required: false,
|
|
651
645
|
default: '',
|
|
652
646
|
},
|
|
653
|
-
labelDataTestId: {
|
|
654
|
-
type: String,
|
|
655
|
-
required: false,
|
|
656
|
-
default: '',
|
|
657
|
-
},
|
|
658
647
|
inputDataId: {
|
|
659
648
|
type: String,
|
|
660
649
|
required: false,
|
|
661
650
|
default: '',
|
|
662
651
|
},
|
|
663
652
|
dataQaId: {
|
|
664
|
-
type: String,
|
|
665
653
|
required: false,
|
|
666
654
|
default: '',
|
|
667
655
|
},
|