Skip to content

Commit 9779982

Browse files
pmPaulispmPaulis
authored
Merge pull request #7374 from ProcessMaker/feature/FOUR-19000
FOUR-19000: Create a NEW VIEW for cases Part List
2 parents 9b16023 + 22483ec commit 9779982

32 files changed

Lines changed: 1616 additions & 132 deletions

‎resources/jscomposition/base/form/Dropdown.vue‎

Lines changed: 75 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
<template>
2-
<div class="t-relative">
2+
<div class="tw-relative">
33
<slot
44
v-bind="{
55
toogleShow,
6-
data,
6+
data
77
}"
8-
name="input">
8+
name="input"
9+
>
910
<button
10-
@click.prevent.stop="show = !show"
11-
class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
12-
<span>{{ data?.label || data?.value || "" }} </span>
11+
class="tw-flex tw-w-full tw-justify-between tw-items-center
12+
tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset tw-ring-gray-300 tw-rounded-lg
13+
focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
14+
@click.prevent.stop="toogleShow"
15+
>
16+
<span>{{ data?.label || data?.value }} </span>
1317

1418
<i class="fas fa-chevron-down" />
1519
</button>
@@ -18,29 +22,39 @@
1822
<transition :name="animation">
1923
<div
2024
v-if="show"
21-
:class="'bg-' + color + '-500'"
22-
class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
23-
<ul class="list-none overflow-hidden rounded">
24-
<li
25-
v-for="(option, index) in optionsModel"
26-
:key="index"
27-
class="hover:bg-gray-200"
28-
:class="{
29-
'bg-gray-300': option?.value === data?.value,
25+
class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
26+
>
27+
<ul class="tw-list-none tw-overflow-hidden tw-rounded">
28+
<slot
29+
name="options"
30+
v-bind="{
31+
options: optionsModel,
32+
data,
33+
onClick
3034
}"
31-
@click.prevent.stop="onClick(option, index)">
32-
<slot
33-
name="option"
34-
v-bind="{
35-
option,
36-
}">
37-
<span
38-
class="flex py-2 px-4 transition duration-300"
39-
:class="'theme-' + color"
40-
>{{ option.label || option.value }}</span
35+
>
36+
<li
37+
v-for="(option, index ) in optionsModel"
38+
:key="index"
39+
class="hover:tw-bg-gray-200"
40+
@click.prevent.stop="onClick(option, index)"
41+
>
42+
<slot
43+
name="option"
44+
v-bind="{
45+
option,
46+
data
47+
}"
4148
>
42-
</slot>
43-
</li>
49+
<span
50+
:class="{
51+
'tw-bg-gray-300': option?.value === data?.value
52+
}"
53+
class="tw-flex tw-py-2 tw-px-4 transition duration-300"
54+
>{{ option.label || option.value }}</span>
55+
</slot>
56+
</li>
57+
</slot>
4458
</ul>
4559
</div>
4660
</transition>
@@ -49,19 +63,22 @@
4963

5064
<script>
5165
import {
52-
defineComponent,
53-
ref,
54-
computed,
55-
onMounted,
56-
onUnmounted,
66+
defineComponent, ref, computed, onMounted, onUnmounted,
5767
} from "vue";
5868
69+
/**
70+
* <Dropdown
71+
* animation="fade"
72+
* :options='{"label":"Label 1" , "value": "1"}'
73+
* :value="model"
74+
* />
75+
*
76+
* slot::input -> dropdown button
77+
* slot:option -> Custom component dropdown option
78+
*/
79+
5980
export default defineComponent({
6081
props: {
61-
color: {
62-
type: String,
63-
default: () => "blue",
64-
},
6582
animation: {
6683
type: String,
6784
default: () => "fade",
@@ -71,22 +88,21 @@ export default defineComponent({
7188
type: Array,
7289
default: () => [],
7390
},
74-
modelValue: {
91+
value: {
7592
type: Object,
7693
default: () => null,
7794
},
7895
},
79-
emits: ["update:modelValue", "change"],
96+
emits: ["input", "change"],
8097
setup(props, { emit }) {
8198
const show = ref(false);
82-
const count = ref(0);
8399
84100
const data = computed({
85101
get() {
86-
return props.modelValue;
102+
return props.value;
87103
},
88104
set(value) {
89-
emit("update:modelValue", value);
105+
emit("input", value);
90106
},
91107
});
92108
@@ -126,7 +142,6 @@ export default defineComponent({
126142
show,
127143
data,
128144
optionsModel,
129-
count,
130145
onClick,
131146
toogleShow,
132147
};
@@ -136,71 +151,59 @@ export default defineComponent({
136151

137152
<style scoped>
138153
/* Animations */
139-
.fade-enter-active,
140-
.fade-leave-active {
141-
transition: opacity 0.1s;
154+
.fade-enter-active, .fade-leave-active {
155+
transition: opacity .1s;
142156
}
143-
.fade-enter,
144-
.fade-leave-to {
157+
.fade-enter, .fade-leave-to {
145158
opacity: 0;
146159
}
147160
148161
/* Slide-in-up animation*/
149-
.slide-in-up-enter-active,
150-
.slide-in-up-leave-active {
151-
transition: all 0.5s;
162+
.slide-in-up-enter-active, .slide-in-up-leave-active {
163+
transition: all .5s;
152164
transform: translateY(0);
153165
}
154-
.slide-in-up-enter,
155-
.slide-in-up-leave-to {
166+
.slide-in-up-enter, .slide-in-up-leave-to {
156167
opacity: 0;
157168
transform: translateY(20px);
158169
}
159170
160171
/* Slide-in-right animation*/
161-
.slide-in-right-enter-active,
162-
.slide-in-right-leave-active {
163-
transition: all 0.5s;
172+
.slide-in-right-enter-active, .slide-in-right-leave-active {
173+
transition: all .5s;
164174
transform: translateX(0);
165175
}
166-
.slide-in-right-enter,
167-
.slide-in-right-leave-to {
176+
.slide-in-right-enter, .slide-in-right-leave-to {
168177
opacity: 0;
169178
transform: translateX(20px);
170179
}
171180
172181
/* Slide-in-left animation*/
173-
.slide-in-left-enter-active,
174-
.slide-in-left-leave-active {
175-
transition: all 0.5s;
182+
.slide-in-left-enter-active, .slide-in-left-leave-active {
183+
transition: all .5s;
176184
transform: translateX(0);
177185
}
178-
.slide-in-left-enter,
179-
.slide-in-left-leave-to {
186+
.slide-in-left-enter, .slide-in-left-leave-to {
180187
opacity: 0;
181188
transform: translateX(-20px);
182189
}
183190
184191
/* Scale animation*/
185-
.scale-enter-active,
186-
.scale-leave-active {
187-
transition: all 0.5s;
192+
.scale-enter-active, .scale-leave-active {
193+
transition: all .5s;
188194
transform: scale(1);
189195
}
190-
.scale-enter,
191-
.scale-leave-to {
196+
.scale-enter, .scale-leave-to {
192197
opacity: 0;
193198
transform: scale(0);
194199
}
195200
196201
/* Rotate animation*/
197-
.rotate-enter-active,
198-
.rotate-leave-active {
199-
transition: all 0.5s;
202+
.rotate-enter-active, .rotate-leave-active {
203+
transition: all .5s;
200204
transform: scale(1) rotate(-360deg);
201205
}
202-
.rotate-enter,
203-
.rotate-leave-to {
206+
.rotate-enter, .rotate-leave-to {
204207
opacity: 0;
205208
transform: scale(0) rotate(360deg);
206209
}

‎resources/jscomposition/base/form/InputLeading.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<i :class="icon"></i>
66
</slot>
77
</div>
8-
<input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10
8+
<input class="tw-block tw-w-full tw-rounded-lg tw-border-0 tw-py-2 tw-pl-10
99
tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300
1010
placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
1111
focus-visible:tw-outline-none
@@ -23,7 +23,7 @@ export default defineComponent({
2323
},
2424
icon: {
2525
type: String,
26-
default: () => ("fa-solid fa-magnifying-glass")
26+
default: () => ("fas fa-search")
2727
}
2828
},
2929
setup(props, { emit }) {

‎resources/jscomposition/base/table/BaseTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
33
tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
44
<table class="tw-w-full tw-border-collapse">
5-
<thead class="tw-border-b tw-sticky tw-top-0 tw-bg-gray-100">
5+
<thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
66
<tr>
77
<THeader
88
v-for="(column, index) in columns"

‎resources/jscomposition/base/table/Pagination.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-bg-white tw-tw-px-4 tw-py-3 sm:tw-px-6">
3+
class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-bg-white">
44
<div>
55
<svg
66
class="tw-h-5 tw-w-5"

‎resources/jscomposition/base/table/TCell.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
<template>
22
<td class="tw-p-3">
3-
<slot
3+
<div
44
v-if="!column.cellRenderer"
5+
:style="{ maxWidth: `${column.width}px` }">
6+
<slot
7+
:columns="columns"
8+
:column="column"
9+
:row="row">
10+
{{ getValue() }}
11+
</slot>
12+
</div>
13+
<component
14+
v-else
15+
:is="column.cellRenderer()"
516
:columns="columns"
617
:column="column"
7-
:row="row">
8-
{{ getValue() }}
9-
</slot>
10-
11-
<component v-else :is="column.cellRenderer()" />
18+
:row="row" />
1219
</td>
1320
</template>
1421

‎resources/jscomposition/base/ui/AppAvatar.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<span v-if="initials"
3+
class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
4+
<span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
5+
</span>
6+
7+
<img v-else
8+
class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
9+
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
10+
alt="" />
11+
</template>
12+
<script>
13+
import { defineComponent } from "vue";
14+
export default defineComponent({
15+
props: {
16+
src: {
17+
type: String,
18+
default: () => null,
19+
},
20+
initials: {
21+
type: String,
22+
default: () => "NA",
23+
},
24+
},
25+
setup(props, {emit}) {
26+
return {};
27+
},
28+
});
29+
</script>

0 commit comments

Comments
 (0)