ketekny-ui-kit 1.0.82 → 1.0.84
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/index.js +5 -3
- package/package.json +1 -1
- package/src/layout/kSingleColPage.vue +88 -0
- package/src/layout/kTwoColPage.vue +103 -0
- package/src/ui/kDatatable.vue +1 -1
- package/src/ui/kForm.vue +88 -0
- package/src/ui/vue3-easy-data-table.css +1 -0
package/index.js
CHANGED
|
@@ -13,6 +13,7 @@ import kSelect from './src/ui/kSelect.vue'
|
|
|
13
13
|
import kTable from './src/ui/kTable.vue'
|
|
14
14
|
import kTabs from './src/ui/kTabs.vue'
|
|
15
15
|
import kToggle from './src/ui/kToggle.vue'
|
|
16
|
+
import kForm from './src/ui/kForm.vue'
|
|
16
17
|
import kUploader from './src/ui/kUploader.vue'
|
|
17
18
|
import kEditor from './src/ui/kEditor.vue'
|
|
18
19
|
import kSpinner from './src/ui/kSpinner.vue'
|
|
@@ -35,6 +36,8 @@ import kAppHeader from './src/layout/kAppHeader.vue'
|
|
|
35
36
|
import kAppFooter from './src/layout/kAppFooter.vue'
|
|
36
37
|
import kAppMain from './src/layout/kAppMain.vue'
|
|
37
38
|
import kHero from './src/layout/kHero.vue'
|
|
39
|
+
import kSingleColPage from './src/layout/kSingleColPage.vue'
|
|
40
|
+
import kTwoColPage from './src/layout/kTwoColPage.vue'
|
|
38
41
|
import twoColLayout from './src/layout/twoColLayout.vue'
|
|
39
42
|
|
|
40
43
|
// Toast/Confirm/Alert Plugins
|
|
@@ -53,13 +56,13 @@ export {
|
|
|
53
56
|
kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
|
|
54
57
|
|
|
55
58
|
// Form Components
|
|
56
|
-
kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
|
|
59
|
+
kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea, kForm,
|
|
57
60
|
|
|
58
61
|
// Dialogs
|
|
59
62
|
kDialog, kDrawer,
|
|
60
63
|
|
|
61
64
|
// Layout Components
|
|
62
|
-
kAppHeader, kAppFooter, kAppMain, kHero, twoColLayout,
|
|
65
|
+
kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout,
|
|
63
66
|
|
|
64
67
|
// Plugins
|
|
65
68
|
toastPlugin, confirmPlugin, alertPlugin, tooltipPlugin, inputDialogPlugin,
|
|
@@ -67,4 +70,3 @@ export {
|
|
|
67
70
|
// Tailwind Config
|
|
68
71
|
tailwindPreset
|
|
69
72
|
}
|
|
70
|
-
|
package/package.json
CHANGED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<main class="flex min-h-screen w-full max-w-none flex-col bg-slate-100">
|
|
3
|
+
<section class="bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8">
|
|
4
|
+
<div class="mx-auto flex w-full max-w-none flex-col gap-5">
|
|
5
|
+
<div
|
|
6
|
+
v-if="pageTitle || pageDescription"
|
|
7
|
+
class="flex flex-wrap items-start justify-between gap-4"
|
|
8
|
+
>
|
|
9
|
+
<div class="min-w-0">
|
|
10
|
+
<p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-slate-500">
|
|
11
|
+
{{ appTitle }}
|
|
12
|
+
</p>
|
|
13
|
+
<h1 class="mt-1 text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl">
|
|
14
|
+
{{ pageTitle }}
|
|
15
|
+
</h1>
|
|
16
|
+
<p v-if="pageDescription" class="mt-1 text-sm font-medium text-slate-500">
|
|
17
|
+
{{ pageDescription }}
|
|
18
|
+
</p>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="flex flex-wrap items-center gap-2">
|
|
21
|
+
<slot name="header-actions" />
|
|
22
|
+
<kButton
|
|
23
|
+
v-if="externalUrl"
|
|
24
|
+
:label="externalUrlLabel"
|
|
25
|
+
icon="ExternalLink"
|
|
26
|
+
variant="soft"
|
|
27
|
+
@click="openExternalUrl"
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
|
+
|
|
34
|
+
<div class="sticky top-0 z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8">
|
|
35
|
+
<div class="mx-auto flex w-full max-w-none items-center">
|
|
36
|
+
<slot name="header-extra" />
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="flex-1 bg-slate-100 px-4 pb-8 pt-4 sm:px-6 lg:px-8">
|
|
41
|
+
<div class="mx-auto w-full max-w-none">
|
|
42
|
+
<slot />
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</main>
|
|
46
|
+
</template>
|
|
47
|
+
|
|
48
|
+
<script>
|
|
49
|
+
import packageJson from '../../package.json'
|
|
50
|
+
import kButton from '../ui/kButton.vue'
|
|
51
|
+
|
|
52
|
+
export default {
|
|
53
|
+
name: 'PageShell',
|
|
54
|
+
components: { kButton },
|
|
55
|
+
props: {
|
|
56
|
+
appTitle: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: packageJson.description || packageJson.name || 'App',
|
|
59
|
+
},
|
|
60
|
+
pageTitle: {
|
|
61
|
+
type: String,
|
|
62
|
+
default: '',
|
|
63
|
+
},
|
|
64
|
+
pageDescription: {
|
|
65
|
+
type: String,
|
|
66
|
+
default: '',
|
|
67
|
+
},
|
|
68
|
+
externalUrl: {
|
|
69
|
+
type: String,
|
|
70
|
+
default: '',
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
computed: {
|
|
74
|
+
externalUrlLabel() {
|
|
75
|
+
const target = String(this.externalUrl || '').trim()
|
|
76
|
+
if (!target) return ''
|
|
77
|
+
return target.replace(/^https?:\/\//i, '').replace(/\/$/, '')
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
methods: {
|
|
81
|
+
openExternalUrl() {
|
|
82
|
+
const target = String(this.externalUrl || '').trim()
|
|
83
|
+
if (!target) return
|
|
84
|
+
window.open(target, '_blank', 'noopener,noreferrer')
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
}
|
|
88
|
+
</script>
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<main class="flex h-screen w-full max-w-none flex-col overflow-hidden bg-slate-100">
|
|
3
|
+
<section class="shrink-0 bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8">
|
|
4
|
+
<div class="mx-auto flex w-full max-w-none flex-col gap-5">
|
|
5
|
+
<div
|
|
6
|
+
v-if="pageTitle || pageDescription"
|
|
7
|
+
class="flex flex-wrap items-start justify-between gap-4"
|
|
8
|
+
>
|
|
9
|
+
<div class="min-w-0">
|
|
10
|
+
<p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-slate-500">
|
|
11
|
+
{{ appTitle }}
|
|
12
|
+
</p>
|
|
13
|
+
<h1 class="mt-1 text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl">
|
|
14
|
+
{{ pageTitle }}
|
|
15
|
+
</h1>
|
|
16
|
+
<p v-if="pageDescription" class="mt-1 text-sm font-medium text-slate-500">
|
|
17
|
+
{{ pageDescription }}
|
|
18
|
+
</p>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="flex flex-wrap items-center gap-2">
|
|
21
|
+
<slot name="header-actions" />
|
|
22
|
+
<kButton
|
|
23
|
+
v-if="externalUrl"
|
|
24
|
+
:label="externalUrlLabel"
|
|
25
|
+
icon="ExternalLink"
|
|
26
|
+
variant="soft"
|
|
27
|
+
@click="openExternalUrl"
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
|
+
|
|
34
|
+
<div class="shrink-0 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur">
|
|
35
|
+
<div class="mx-auto flex w-full max-w-none items-center">
|
|
36
|
+
<slot name="header-extra" />
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="min-h-0 flex-1 overflow-hidden bg-slate-100 py-4">
|
|
41
|
+
<div class="mx-auto flex h-full min-h-0 w-full max-w-none gap-2">
|
|
42
|
+
<aside class="ml-8 min-h-0 shrink-0 overflow-y-auto pr-4" :style="sidebarStyle">
|
|
43
|
+
<slot name="sidebar" />
|
|
44
|
+
</aside>
|
|
45
|
+
<section class="min-h-0 min-w-0 flex-1 overflow-y-auto px-2">
|
|
46
|
+
<slot name="content" />
|
|
47
|
+
</section>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</main>
|
|
51
|
+
</template>
|
|
52
|
+
|
|
53
|
+
<script>
|
|
54
|
+
import packageJson from '../../package.json'
|
|
55
|
+
import kButton from '../ui/kButton.vue'
|
|
56
|
+
|
|
57
|
+
export default {
|
|
58
|
+
name: 'PageTwoColShell',
|
|
59
|
+
components: { kButton },
|
|
60
|
+
props: {
|
|
61
|
+
appTitle: {
|
|
62
|
+
type: String,
|
|
63
|
+
default: packageJson.description || packageJson.name || 'App',
|
|
64
|
+
},
|
|
65
|
+
pageTitle: {
|
|
66
|
+
type: String,
|
|
67
|
+
default: '',
|
|
68
|
+
},
|
|
69
|
+
pageDescription: {
|
|
70
|
+
type: String,
|
|
71
|
+
default: '',
|
|
72
|
+
},
|
|
73
|
+
externalUrl: {
|
|
74
|
+
type: String,
|
|
75
|
+
default: '',
|
|
76
|
+
},
|
|
77
|
+
sidebarWidth: {
|
|
78
|
+
type: String,
|
|
79
|
+
default: '300px',
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
computed: {
|
|
83
|
+
externalUrlLabel() {
|
|
84
|
+
const target = String(this.externalUrl || '').trim()
|
|
85
|
+
if (!target) return ''
|
|
86
|
+
return target.replace(/^https?:\/\//i, '').replace(/\/$/, '')
|
|
87
|
+
},
|
|
88
|
+
sidebarStyle() {
|
|
89
|
+
return {
|
|
90
|
+
minWidth: this.sidebarWidth,
|
|
91
|
+
maxWidth: this.sidebarWidth,
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
methods: {
|
|
96
|
+
openExternalUrl() {
|
|
97
|
+
const target = String(this.externalUrl || '').trim()
|
|
98
|
+
if (!target) return
|
|
99
|
+
window.open(target, '_blank', 'noopener,noreferrer')
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
}
|
|
103
|
+
</script>
|
package/src/ui/kDatatable.vue
CHANGED
package/src/ui/kForm.vue
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex flex-col gap-2">
|
|
3
|
+
<template v-for="(item, idx) in formInputs" :key="item.id ?? idx">
|
|
4
|
+
<component
|
|
5
|
+
:is="components[item.type]"
|
|
6
|
+
v-bind="item.props"
|
|
7
|
+
:label="item.label + (item.required ? '*' : '')"
|
|
8
|
+
:required="item.required"
|
|
9
|
+
:modelValue="formModel[item.id]"
|
|
10
|
+
:error="errors[item.id]?.message"
|
|
11
|
+
@update:modelValue="(val) => updateField(item.id, val)"
|
|
12
|
+
/>
|
|
13
|
+
</template>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
import kButton from './kButton.vue'
|
|
19
|
+
import kEditor from './kEditor.vue'
|
|
20
|
+
import kInput from './kInput.vue'
|
|
21
|
+
import kSelect from './kSelect.vue'
|
|
22
|
+
import kToggle from './kToggle.vue'
|
|
23
|
+
|
|
24
|
+
const componentsMap = { kInput, kToggle, kButton, kSelect, kEditor }
|
|
25
|
+
|
|
26
|
+
export default {
|
|
27
|
+
name: 'DynamicForm',
|
|
28
|
+
props: {
|
|
29
|
+
formInputs: { type: Array, default: () => [] },
|
|
30
|
+
formModel: { type: Object, default: () => ({}) },
|
|
31
|
+
},
|
|
32
|
+
emits: ['update:formModel', 'validated'],
|
|
33
|
+
data() {
|
|
34
|
+
return {
|
|
35
|
+
errors: {},
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
computed: {
|
|
39
|
+
components() {
|
|
40
|
+
return componentsMap
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
methods: {
|
|
44
|
+
validate() {
|
|
45
|
+
const errors = {}
|
|
46
|
+
|
|
47
|
+
for (const item of this.formInputs) {
|
|
48
|
+
const id = item.id
|
|
49
|
+
const val = this.formModel[id]
|
|
50
|
+
|
|
51
|
+
if (item.required) {
|
|
52
|
+
const empty =
|
|
53
|
+
val === null ||
|
|
54
|
+
val === undefined ||
|
|
55
|
+
(typeof val === 'string' && val.trim() === '') ||
|
|
56
|
+
(Array.isArray(val) && val.length === 0) ||
|
|
57
|
+
(typeof val === 'boolean' && val === false && item.type !== 'kToggle')
|
|
58
|
+
if (empty) {
|
|
59
|
+
errors[id] = { message: item.requiredMessage || 'Απαιτείται πεδίο.' }
|
|
60
|
+
continue
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
if (item.pattern instanceof RegExp && typeof val === 'string' && !item.pattern.test(val)) {
|
|
65
|
+
errors[id] = { message: item.patternMessage || 'Μη έγκυρη τιμή.' }
|
|
66
|
+
continue
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
if (typeof item.validator === 'function') {
|
|
70
|
+
const res = item.validator(val, this.formModel, item)
|
|
71
|
+
if (res !== true) {
|
|
72
|
+
errors[id] = { message: res || 'Μη έγκυρη τιμή.' }
|
|
73
|
+
continue
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
this.errors = errors
|
|
79
|
+
const valid = Object.keys(errors).length === 0
|
|
80
|
+
this.$emit('validated', { valid, errors })
|
|
81
|
+
return { valid, errors }
|
|
82
|
+
},
|
|
83
|
+
updateField(key, value) {
|
|
84
|
+
this.$emit('update:formModel', { ...this.formModel, [key]: value })
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
}
|
|
88
|
+
</script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.easy-checkbox[data-v-e0a0b7f0]{position:relative;width:1.3em;height:1.3em;font-size:var(--easy-table-body-row-font-size);margin:0 auto}.easy-checkbox label[data-v-e0a0b7f0]{cursor:pointer;display:inline;line-height:1.3em;vertical-align:top;clear:both}.easy-checkbox label[data-v-e0a0b7f0]:before,.easy-checkbox label[data-v-e0a0b7f0]:after{content:"";position:absolute;left:0;top:0}.easy-checkbox label[data-v-e0a0b7f0]:before{width:1.3em;height:1.3em;background:#fff;border:1px solid rgba(0,0,0,.54);border-radius:.125em;cursor:pointer;transition:background .3s}.easy-checkbox input[type=checkbox][data-v-e0a0b7f0]{outline:0;visibility:hidden;width:1.3em;margin:0;display:block;float:left;font-size:inherit}.easy-checkbox input[type=checkbox]:checked+label[data-v-e0a0b7f0]:before{border:none}.easy-checkbox input[type=checkbox]:checked+label[data-v-e0a0b7f0]:after{transform:translate(.2em,.3038461538em) rotate(-45deg);width:.9em;height:.45em;border:.13em solid #fff;border-top-style:none;border-right-style:none}.easy-checkbox input[type=checkbox].allSelected+label[data-v-e0a0b7f0]:before{border:none}.easy-checkbox input[type=checkbox].allSelected+label[data-v-e0a0b7f0]:after{transform:translate(.2em,.3038461538em) rotate(-45deg);width:.9em;height:.45em;border:.13em solid #fff;border-top-style:none;border-right-style:none}.easy-checkbox input[type=checkbox].partSelected+label[data-v-e0a0b7f0]:before{border:none}.easy-checkbox input[type=checkbox].partSelected+label[data-v-e0a0b7f0]:after{transform:translate(.2em,.5875em);width:.9em;height:.45em;border:.125em solid #fff;border-bottom-style:none;border-right-style:none;border-left-style:none}*[data-v-e0a0b7f0],*[data-v-e0a0b7f0]:before,*[data-v-e0a0b7f0]:after{box-sizing:border-box}.easy-checkbox input[type=checkbox].allSelected+label[data-v-e0a0b7f0]:before,.easy-checkbox input[type=checkbox].partSelected+label[data-v-e0a0b7f0]:before{background:var(--51ab8a49)}.easy-checkbox[data-v-7e69a276]{position:relative;width:1.3em;height:1.3em;font-size:var(--easy-table-body-row-font-size);margin:0 auto}.easy-checkbox label[data-v-7e69a276]{cursor:pointer;display:inline;line-height:1.3em;vertical-align:top;clear:both}.easy-checkbox label[data-v-7e69a276]:before,.easy-checkbox label[data-v-7e69a276]:after{content:"";position:absolute;left:0;top:0}.easy-checkbox label[data-v-7e69a276]:before{width:1.3em;height:1.3em;background:#fff;border:1px solid rgba(0,0,0,.54);border-radius:.125em;cursor:pointer;transition:background .3s}.easy-checkbox input[type=checkbox][data-v-7e69a276]{outline:0;visibility:hidden;width:1.3em;margin:0;display:block;float:left;font-size:inherit}.easy-checkbox input[type=checkbox]:checked+label[data-v-7e69a276]:before{border:none}.easy-checkbox input[type=checkbox]:checked+label[data-v-7e69a276]:after{transform:translate(.2em,.3038461538em) rotate(-45deg);width:.9em;height:.45em;border:.13em solid #fff;border-top-style:none;border-right-style:none}.easy-checkbox input[type=checkbox].allSelected+label[data-v-7e69a276]:before{border:none}.easy-checkbox input[type=checkbox].allSelected+label[data-v-7e69a276]:after{transform:translate(.2em,.3038461538em) rotate(-45deg);width:.9em;height:.45em;border:.13em solid #fff;border-top-style:none;border-right-style:none}.easy-checkbox input[type=checkbox].partSelected+label[data-v-7e69a276]:before{border:none}.easy-checkbox input[type=checkbox].partSelected+label[data-v-7e69a276]:after{transform:translate(.2em,.5875em);width:.9em;height:.45em;border:.125em solid #fff;border-bottom-style:none;border-right-style:none;border-left-style:none}*[data-v-7e69a276],*[data-v-7e69a276]:before,*[data-v-7e69a276]:after{box-sizing:border-box}.easy-checkbox input[type=checkbox]:checked+label[data-v-7e69a276]:before{background:var(--fdaf7e9e)}.easy-data-table__rows-selector[data-v-4ca5de3a]{display:inline-block;min-width:45px;position:relative;margin:0 10px;width:var(--easy-table-rows-per-page-selector-width)}.easy-data-table__rows-selector .rows-input__wrapper[data-v-4ca5de3a]{height:20px;border-bottom:1px solid var(--easy-table-footer-font-color);display:flex;align-items:center;justify-content:space-between;padding:0 5px;cursor:pointer}.easy-data-table__rows-selector .rows-input__wrapper .triangle[data-v-4ca5de3a]{display:inline-block;vertical-align:middle;width:0px;height:0px;border-top:solid 6px var(--easy-table-footer-font-color);border-left:solid 6px transparent;border-right:solid 6px transparent}.easy-data-table__rows-selector ul.select-items[data-v-4ca5de3a]{position:absolute;top:20px;left:0px;width:100%;display:none;margin:0;padding:0;text-align:left;list-style-type:none;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;z-index:var(--easy-table-rows-per-page-selector-z-index)}.easy-data-table__rows-selector ul.select-items.show[data-v-4ca5de3a]{display:block}.easy-data-table__rows-selector ul.select-items.inside[data-v-4ca5de3a]{bottom:0px;top:auto}.easy-data-table__rows-selector ul.select-items li[data-v-4ca5de3a]{cursor:pointer;padding:var(--easy-table-rows-per-page-selector-option-padding);background-color:var(--easy-table-footer-background-color)}.easy-data-table__rows-selector ul.select-items li.selected[data-v-4ca5de3a]{color:#fff;background-color:var(--1b889342)}.lds-ring[data-v-1fa3a520]{display:inline-block;position:relative;width:60px;height:60px}.lds-ring div[data-v-1fa3a520]{box-sizing:border-box;display:block;position:absolute;width:80%;height:80%;margin:8px;border:8px solid #fff;border-radius:50%;animation:lds-ring-1fa3a520 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--26774109) transparent transparent transparent}.lds-ring div[data-v-1fa3a520]:nth-child(1){animation-delay:-.45s}.lds-ring div[data-v-1fa3a520]:nth-child(2){animation-delay:-.3s}.lds-ring div[data-v-1fa3a520]:nth-child(3){animation-delay:-.15s}@keyframes lds-ring-1fa3a520{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-line[data-v-7d281cac]{width:100%;height:3px;position:relative;overflow:hidden;background-color:#ddd;margin:0x auto}.loader-line[data-v-7d281cac]:before{content:"";position:absolute;left:-50%;height:3px;width:40%;background-color:var(--0d327f57);-webkit-animation:lineAnim-7d281cac 1s linear infinite;-moz-animation:lineAnim-7d281cac 1s linear infinite;animation:lineAnim-7d281cac 1s linear infinite}@keyframes lineAnim-7d281cac{0%{left:-40%}50%{left:20%;width:80%}to{left:100%;width:100%}}.buttons-pagination[data-v-4c681fa2]{box-sizing:border-box;display:flex;padding:0;border-radius:4px}.buttons-pagination .item[data-v-4c681fa2]{box-sizing:border-box;cursor:pointer;min-width:calc(var(--easy-table-footer-font-size) * 1.8);line-height:calc(var(--easy-table-footer-font-size) * 1.8);border-top:var(--easy-table-buttons-pagination-border);border-bottom:var(--easy-table-buttons-pagination-border);border-right:var(--easy-table-buttons-pagination-border);text-align:center}.buttons-pagination .item[data-v-4c681fa2]:first-of-type{border-left:var(--easy-table-buttons-pagination-border);border-top-left-radius:4px;border-bottom-left-radius:4px}.buttons-pagination .item[data-v-4c681fa2]:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.buttons-pagination .item.button.active[data-v-4c681fa2]{background-color:var(--40dd4f07);border-left:var(--easy-table-buttons-pagination-border);border-color:var(--40dd4f07)!important;color:#fff}.buttons-pagination .item.button.active-prev[data-v-4c681fa2]{border-right:none}.previous-page__click-button[data-v-c9da5286],.next-page__click-button[data-v-c9da5286]{margin:0 5px;cursor:pointer}.previous-page__click-button .arrow[data-v-c9da5286],.next-page__click-button .arrow[data-v-c9da5286]{display:inline-block;width:8px;height:8px;border-top:2px solid #000;border-left:2px solid #000}.previous-page__click-button .arrow.arrow-left[data-v-c9da5286],.next-page__click-button .arrow.arrow-left[data-v-c9da5286]{transform:rotate(135deg)}.previous-page__click-button .arrow.arrow-right[data-v-c9da5286],.next-page__click-button .arrow.arrow-right[data-v-c9da5286]{transform:rotate(-45deg)}.previous-page__click-button.first-page[data-v-c9da5286],.next-page__click-button.last-page[data-v-c9da5286]{cursor:not-allowed}.previous-page__click-button.first-page .arrow[data-v-c9da5286],.next-page__click-button.last-page .arrow[data-v-c9da5286]{border-color:#e0e0e0}:root{--easy-table-border: 1px solid #e0e0e0;--easy-table-row-border: 1px solid #e0e0e0;--easy-table-header-font-size: 12px;--easy-table-header-height: 36px;--easy-table-header-font-color: #373737;--easy-table-header-background-color: #fff;--easy-table-header-item-padding: 0px 10px;--easy-table-body-row-height: 36px;--easy-table-body-row-font-size: 12px;--easy-table-body-row-font-color: #212121;--easy-table-body-row-background-color: #fff;--easy-table-body-row-hover-font-color: #212121;--easy-table-body-row-hover-background-color: #eee;--easy-table-body-even-row-font-color: #212121;--easy-table-body-even-row-background-color: #fafafa;--easy-table-body-item-padding: 0px 10px;--easy-table-footer-background-color: #fff;--easy-table-footer-font-color: #212121;--easy-table-footer-font-size: 12px;--easy-table-footer-padding: 0px 5px;--easy-table-footer-height: 36px;--easy-table-rows-per-page-selector-width: auto;--easy-table-rows-per-page-selector-option-padding: 5px;--easy-table-rows-per-page-selector-z-index: auto;--easy-table-message-font-color: #212121;--easy-table-message-font-size: 12px;--easy-table-message-padding: 20px;--easy-table-loading-mask-background-color: #fff;--easy-table-loading-mask-opacity: .5;--easy-table-scrollbar-track-color: #fff;--easy-table-scrollbar-color: #fff;--easy-table-scrollbar-thumb-color: #c1c1c1;--easy-table-scrollbar-corner-color: #fff;--easy-table-buttons-pagination-border: 1px solid #e0e0e0}.vue3-easy-data-table[data-v-32683533]{border:var(--easy-table-border);position:relative;box-sizing:border-box}.vue3-easy-data-table__main[data-v-32683533]{border:none;width:100%;overflow:auto;background-color:var(--easy-table-body-row-background-color)}.vue3-easy-data-table__main[data-v-32683533]::-webkit-scrollbar-track{border-radius:10px;background-color:var(--easy-table-scrollbar-track-color)}.vue3-easy-data-table__main[data-v-32683533]::-webkit-scrollbar{width:7px;height:7px;background-color:var(--easy-table-scrollbar-color)}.vue3-easy-data-table__main[data-v-32683533]::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--easy-table-scrollbar-thumb-color)}.vue3-easy-data-table__main[data-v-32683533]::-webkit-scrollbar-corner{background-color:var(--easy-table-scrollbar-corner-color)}.vue3-easy-data-table__main.table-fixed table[data-v-32683533]{table-layout:fixed}.vue3-easy-data-table__main.show-shadow th.shadow[data-v-32683533]:after,.vue3-easy-data-table__main.show-shadow td.shadow[data-v-32683533]:after{box-shadow:inset 6px 0 5px -3px #0003}.vue3-easy-data-table__main.fixed-header th[data-v-32683533]{position:sticky;top:0;z-index:2}.vue3-easy-data-table__main.hoverable tr:hover td[data-v-32683533]{background-color:var(--easy-table-body-row-hover-background-color);color:var(--easy-table-body-row-hover-font-color)}.vue3-easy-data-table__main.hoverable .vue3-easy-data-table__body.row-alternation .even-row:hover td[data-v-32683533]{color:var(--easy-table-body-row-hover-font-color);background-color:var(--easy-table-body-row-hover-background-color)}.vue3-easy-data-table__main.border-cell .vue3-easy-data-table__header th[data-v-32683533]{border-right:var(--easy-table-row-border)}.vue3-easy-data-table__main.border-cell .vue3-easy-data-table__header th[data-v-32683533]:last-of-type{border-right:none}.vue3-easy-data-table__main.border-cell .vue3-easy-data-table__body td[data-v-32683533]{border-right:var(--easy-table-row-border)}.vue3-easy-data-table__main.border-cell .vue3-easy-data-table__body td[data-v-32683533]:last-of-type{border-right:none}.vue3-easy-data-table__body.row-alternation tr.even-row td[data-v-32683533]{color:var(--easy-table-body-even-row-font-color);background-color:var(--easy-table-body-even-row-background-color)}table[data-v-32683533]{border-collapse:initial;display:table;width:100%;border-spacing:0;margin:0}.vue3-easy-data-table__header[data-v-32683533],vue3-easy-data-table__body[data-v-32683533]{position:relative}.vue3-easy-data-table__header tr[data-v-32683533]{font-size:var(--easy-table-header-font-size);border:none;height:var(--easy-table-header-height)}.vue3-easy-data-table__header th[data-v-32683533]{background-color:var(--easy-table-header-background-color);color:var(--easy-table-header-font-color);border:none;border-bottom:var(--easy-table-row-border);padding:var(--easy-table-header-item-padding);position:relative}.vue3-easy-data-table__header th .header[data-v-32683533]{display:flex;align-items:center}.vue3-easy-data-table__header th .header.direction-left[data-v-32683533]{justify-content:flex-start}.vue3-easy-data-table__header th .header.direction-center[data-v-32683533]{justify-content:center}.vue3-easy-data-table__header th .header.direction-right[data-v-32683533]{justify-content:flex-end}.vue3-easy-data-table__header th.sortable[data-v-32683533]{cursor:pointer}.vue3-easy-data-table__header th.sortable .sortType-icon[data-v-32683533]{border:5px solid transparent;margin-top:-3px;margin-left:4px;display:inline-block;height:0;width:0;position:relative;border-bottom-color:var(--easy-table-header-font-color)}.vue3-easy-data-table__header th.sortable .multi-sort__number[data-v-32683533]{border-radius:50%;height:1.5em;width:1.5em;line-height:1.5em;margin-left:4px;background-color:var(--easy-table-header-font-color);color:var(--easy-table-header-background-color)}.vue3-easy-data-table__header th.sortable.none:hover .sortType-icon[data-v-32683533]{opacity:1}.vue3-easy-data-table__header th.sortable.none .sortType-icon[data-v-32683533]{opacity:0;transition:.5s ease}.vue3-easy-data-table__header th.sortable.desc .sortType-icon[data-v-32683533]{margin-top:5px;transform:rotate(180deg)}.vue3-easy-data-table__header th.shadow[data-v-32683533]:after,.vue3-easy-data-table__body td.shadow[data-v-32683533]:after{pointer-events:none;content:"";width:36px;display:inline-block;height:100%;position:absolute;top:0px;right:-36px;box-shadow:none}.vue3-easy-data-table__body tr[data-v-32683533]{height:var(--easy-table-body-row-height);color:var(--easy-table-body-row-font-color);font-size:var(--easy-table-body-row-font-size)}.vue3-easy-data-table__body tr:last-child td[data-v-32683533]{border-bottom:none}.vue3-easy-data-table__body tr:first-child td[data-v-32683533]{border-bottom:var(--easy-table-row-border)}.vue3-easy-data-table__body td[data-v-32683533]{padding:var(--easy-table-body-item-padding);background-color:var(--easy-table-body-row-background-color);border:none;border-bottom:var(--easy-table-row-border);position:relative}.vue3-easy-data-table__body td.direction-left[data-v-32683533]{text-align:left}.vue3-easy-data-table__body td.direction-center[data-v-32683533]{text-align:center}.vue3-easy-data-table__body td.direction-right[data-v-32683533]{text-align:right}.vue3-easy-data-table__body td .expand-icon[data-v-32683533]{border:solid;border-color:var(--easy-table-body-row-font-color);border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(-45deg);transition:.2s}.vue3-easy-data-table__body td .expand-icon.expanding[data-v-32683533]{transform:rotate(45deg)}.vue3-easy-data-table__body td.expand[data-v-32683533]{position:relative}.vue3-easy-data-table__body td.expand .expand-loading[data-v-32683533]{position:absolute;top:0px;left:0px}.vue3-easy-data-table__body td.can-expand[data-v-32683533]{cursor:pointer}.vue3-easy-data-table__footer[data-v-32683533]{background-color:var(--easy-table-footer-background-color);color:var(--easy-table-footer-font-color);border-top:var(--easy-table-row-border);font-size:var(--easy-table-footer-font-size);height:var(--easy-table-footer-height);padding:var(--easy-table-footer-padding);box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:flex-end}.vue3-easy-data-table__footer .pagination__rows-per-page[data-v-32683533]{display:flex;align-items:center}.vue3-easy-data-table__footer .pagination__items-index[data-v-32683533]{margin:0 20px 0 10px}.vue3-easy-data-table__message[data-v-32683533]{color:var(--easy-table-message-font-color);font-size:var(--easy-table-message-font-size);padding:var(--easy-table-message-padding);text-align:center}.vue3-easy-data-table__loading[data-v-32683533]{z-index:3;overflow:hidden;position:absolute;width:100%;height:100%;top:0px;left:0px;display:flex;align-items:center;justify-content:center}.vue3-easy-data-table__loading .loading-entity[data-v-32683533]{z-index:1}.vue3-easy-data-table__loading-mask[data-v-32683533]{background-color:var(--easy-table-loading-mask-background-color);opacity:var(--easy-table-loading-mask-opacity);position:absolute;width:100%;height:100%;top:0px;left:0px;z-index:1}.vue3-easy-data-table__main[data-v-32683533]{min-height:var(--da0d4328)}.vue3-easy-data-table__main.fixed-height[data-v-32683533]{height:var(--3037e504)}
|