Skip to content

Commit b8f5448

Browse files
vis97cvis97c
committed
feat: support optional pagination defaults
1 parent 7036ea3 commit b8f5448

File tree

13 files changed

+183
-119
lines changed

13 files changed

+183
-119
lines changed

‎packages/components-vue/src/components/Modal.vue‎

Lines changed: 85 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,101 @@
11
<template>
22
<slot v-if="$slots.toggle" name="toggle" v-bind="{ toggleModal, model }"></slot>
3-
<dialog
4-
v-if="!disabled"
5-
:id="modalId"
6-
:key="modalId"
7-
ref="modalRef"
8-
@close="closeModal"
9-
@mousedown="clickOutside"
10-
>
11-
<div
12-
v-show="!loading && !hide"
13-
class="modal"
14-
role="document"
15-
:class="[modalClass ?? 'flx --flxColumn --flx-start-stretch --width', themeClasses]"
16-
v-bind="$attrs"
17-
>
18-
<slot name="modal-header" v-bind="{ toggleModal, model, invertedTheme }">
19-
<div v-if="title" class="flx --flxRow --flx-between-center">
20-
<div class="txt --gaping-none">
21-
<h5>{{ title }}</h5>
22-
<p v-if="subtitle" class="--txtSize-xs">{{ subtitle }}</p>
3+
<BaseWrapper v-if="!disabled" :key="modalId" :el="Teleport" :wrap="!!target" :to="target">
4+
<dialog :id="modalId" ref="modalRef" @close="closeModal" @mousedown="clickOutside">
5+
<div
6+
v-show="!loading && !hide"
7+
class="modal"
8+
role="document"
9+
:class="[modalClass ?? 'flx --flxColumn --flx-start-stretch --width', themeClasses]"
10+
v-bind="$attrs"
11+
>
12+
<slot name="modal-header" v-bind="{ toggleModal, model, invertedTheme }">
13+
<div v-if="title" class="flx --flxRow --flx-between-center">
14+
<div class="txt --gaping-none">
15+
<h5>{{ title }}</h5>
16+
<p v-if="subtitle" class="--txtSize-xs">{{ subtitle }}</p>
17+
</div>
18+
<ActionLink
19+
:theme="invertedTheme"
20+
:aria-label="cancelButtonOptions.title"
21+
@click.stop="closeModal()"
22+
>
23+
<IconFa name="xmark" size="20" />
24+
</ActionLink>
2325
</div>
24-
<ActionLink
25-
:theme="invertedTheme"
26-
:aria-label="cancelButtonOptions.title"
27-
@click.stop="closeModal()"
28-
>
29-
<IconFa name="xmark" size="20" />
30-
</ActionLink>
26+
</slot>
27+
<div class="scroll --vertical">
28+
<!-- Main modal content -->
29+
<slot v-bind="{ toggleModal, model, invertedTheme }"></slot>
3130
</div>
32-
</slot>
33-
<div class="scroll --vertical">
34-
<!-- Main modal content -->
35-
<slot v-bind="{ toggleModal, model, invertedTheme }"></slot>
31+
<slot name="modal-footer" v-bind="{ toggleModal, model, invertedTheme }">
32+
<div v-if="!hideFooter" class="flx --flxRow --flx-end-center">
33+
<ActionButton
34+
v-if="saveButtonOptions.visible"
35+
:theme="invertedTheme"
36+
:aria-label="saveButtonOptions.title"
37+
:class="saveButtonOptions.btnClass"
38+
@click="emit('save', closeModal, $event)"
39+
>
40+
{{ saveButtonOptions.title }}
41+
</ActionButton>
42+
<ActionButtonToggle
43+
v-if="cancelButtonOptions.visible"
44+
:theme="invertedTheme"
45+
:aria-label="cancelButtonOptions.title"
46+
:class="cancelButtonOptions.btnClass"
47+
data-dismiss="modal"
48+
round=":sm-inv"
49+
@click.stop="closeModal()"
50+
>
51+
<IconFa name="xmark" hidden="-full:sm" />
52+
<IconFa name="xmark" regular hidden="-full:sm" />
53+
<span class="--hidden-full:sm-inv">
54+
{{ cancelButtonOptions.title }}
55+
</span>
56+
</ActionButtonToggle>
57+
</div>
58+
</slot>
3659
</div>
37-
<slot name="modal-footer" v-bind="{ toggleModal, model, invertedTheme }">
38-
<div v-if="!hideFooter" class="flx --flxRow --flx-end-center">
39-
<ActionButton
40-
v-if="saveButtonOptions.visible"
41-
:theme="invertedTheme"
42-
:aria-label="saveButtonOptions.title"
43-
:class="saveButtonOptions.btnClass"
44-
@click="emit('save', closeModal, $event)"
60+
<LoaderSimple v-if="loading || hide" :theme="invertedTheme">
61+
<transition name="fade">
62+
<div
63+
v-if="loadingTooLong || (props.hide && props.hideMessage)"
64+
class="txt --txtAlignFlx-center --gaping-5"
4565
>
46-
{{ saveButtonOptions.title }}
47-
</ActionButton>
48-
<ActionButtonToggle
49-
v-if="cancelButtonOptions.visible"
50-
:theme="invertedTheme"
51-
:aria-label="cancelButtonOptions.title"
52-
:class="cancelButtonOptions.btnClass"
53-
data-dismiss="modal"
54-
round=":sm-inv"
55-
@click.stop="closeModal()"
56-
>
57-
<IconFa name="xmark" hidden="-full:sm" />
58-
<IconFa name="xmark" regular hidden="-full:sm" />
59-
<span class="--hidden-full:sm-inv">
60-
{{ cancelButtonOptions.title }}
61-
</span>
62-
</ActionButtonToggle>
63-
</div>
64-
</slot>
65-
</div>
66-
<LoaderSimple v-if="loading || hide" :theme="invertedTheme">
67-
<transition name="fade">
68-
<div
69-
v-if="loadingTooLong || (props.hide && props.hideMessage)"
70-
class="txt --txtAlignFlx-center --gaping-5"
71-
>
72-
<p class="--txtColor-light --txtShadow --txtSize-sm">
73-
{{ props.hideMessage ? props.hideMessage : t("modal_taking_too_long") }}
74-
</p>
75-
<ActionButton
76-
:theme="invertedTheme"
77-
:aria-label="t('close')"
78-
@click="closeModal()"
79-
>
80-
{{ t("close") }}
81-
</ActionButton>
82-
</div>
83-
</transition>
84-
</LoaderSimple>
85-
</dialog>
66+
<p class="--txtColor-light --txtShadow --txtSize-sm">
67+
{{ props.hideMessage ? props.hideMessage : t("modal_taking_too_long") }}
68+
</p>
69+
<ActionButton
70+
:theme="invertedTheme"
71+
:aria-label="t('close')"
72+
@click="closeModal()"
73+
>
74+
{{ t("close") }}
75+
</ActionButton>
76+
</div>
77+
</transition>
78+
</LoaderSimple>
79+
</dialog>
80+
</BaseWrapper>
8681
<slot v-else v-bind="{ toggleModal, model, invertedTheme }"></slot>
8782
</template>
8883

8984
<script setup lang="ts">
90-
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
85+
import {
86+
computed,
87+
onMounted,
88+
onUnmounted,
89+
ref,
90+
watch,
91+
Teleport,
92+
type RendererElement,
93+
} from "vue";
9194
import _ from "lodash";
9295
9396
import { useI18n, useSwal } from "@open-xamu-co/ui-common-helpers";
9497
98+
import BaseWrapper from "./base/Wrapper.vue";
9599
import IconFa from "./icon/Fa.vue";
96100
import ActionLink from "./action/Link.vue";
97101
import ActionButton from "./action/Button.vue";
@@ -151,6 +155,7 @@
151155
* @private
152156
*/
153157
modelValue?: boolean;
158+
target?: string | RendererElement;
154159
}
155160
156161
/**

‎packages/components-vue/src/components/Table.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -251,17 +251,19 @@
251251
>
252252
<IconFa name="chevron-up" indicator />
253253
</ActionLink>
254-
<ActionLink
254+
<ActionButtonLink
255+
v-if="createNodeChildren"
255256
:theme="theme || themeValues"
256257
size="sm"
257258
:tooltip="t('table_create_new')"
258259
tooltip-position="right"
259-
:disabled="!createNodeChildren"
260-
class="--p-5"
261-
@click="createNodeChildren?.(node)"
260+
class="--p-5:md-inv"
261+
link-button
262+
round
263+
@click="createNodeChildren(node)"
262264
>
263265
<IconFa name="plus" />
264-
</ActionLink>
266+
</ActionButtonLink>
265267
</div>
266268
</th>
267269
<td
@@ -323,6 +325,7 @@
323325
import IconFa from "./icon/Fa.vue";
324326
import ActionLink from "./action/Link.vue";
325327
import ActionButton from "./action/Button.vue";
328+
import ActionButtonLink from "./action/ButtonLink.vue";
326329
import ActionButtonToggle from "./action/ButtonToggle.vue";
327330
import InputToggle from "./input/Toggle.vue";
328331
import ValueComplex from "./value/Complex.vue";

‎packages/components-vue/src/components/action/ButtonLink.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<template v-if="tabletMqRange">
2+
<template v-if="inRange">
33
<ActionButtonToggle v-if="asToggle" v-bind="{ ...$attrs, ...props }">
44
<slot></slot>
55
</ActionButtonToggle>
@@ -11,6 +11,8 @@
1111
</template>
1212

1313
<script setup lang="ts">
14+
import { computed } from "vue";
15+
1416
import ActionButton from "./Button.vue";
1517
import ActionButtonToggle from "./ButtonToggle.vue";
1618
import ActionLink from "./Link.vue";
@@ -34,6 +36,10 @@
3436
* Use ActionButtonToggle instead of ActionButton
3537
*/
3638
asToggle?: boolean;
39+
/**
40+
* Reverse behavior
41+
*/
42+
linkButton?: boolean;
3743
}
3844
3945
/**
@@ -50,4 +56,10 @@
5056
const props = defineProps<iActionButtonLinkProps>();
5157
5258
const { tabletMqRange } = useBrowser();
59+
60+
const inRange = computed<boolean>(() => {
61+
if (props.linkButton) return !tabletMqRange.value;
62+
63+
return tabletMqRange.value;
64+
});
5365
</script>

‎packages/components-vue/src/components/pagination/Content.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<LoaderContentFetch
33
v-slot="{ content, refresh }"
44
:promise="page"
5-
:payload="[pagination]"
5+
:payload="[{ ...pagination, ...defaults }]"
66
v-bind="{ ...$attrs, preventAutoload, theme }"
77
>
88
<slot
@@ -52,6 +52,10 @@
5252
*/
5353
hideControls?: boolean;
5454
preventAutoload?: boolean;
55+
/**
56+
* Additional parameters to send every request
57+
*/
58+
defaults?: Record<string, any>;
5559
}
5660
5761
/**

‎packages/styles/src/components/action/_buttonY.scss‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
.#{module.$component-button-y} {
1010
@include module.action-styles;
1111
@include module.action-aligment-styles;
12+
13+
@include module.action-size-styles(false) using($size) {
14+
padding: #{$size * 0.8} #{$size * 0.2};
15+
}
16+
17+
@include module.action-border-styles using($radius) {
18+
border-radius: 0.4 * $radius;
19+
}
20+
1221
@include module.action-theme-union-styles;
1322
@include module.action-disabled-styles(false);
14-
15-
padding: 0.8rem 0.2rem;
16-
border-radius: 0.4rem * module.$radius-action;
17-
border-width: 2px;
1823
}
1924
}
2025
}

‎packages/styles/src/components/action/_inputCheckbox.scss‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
//
55
// @group Components
66
@mixin input-checkbox {
7+
$radius-action: module.strip-unit(module.$size-radius-action);
8+
79
@layer definitions {
8-
.#{module.$component-input-checkbox} {
9-
@at-root input[type^="c"]#{&} {
10-
@include module.action-toggle-styles;
10+
input[type^="c"].#{module.$component-input-checkbox} {
11+
@include module.action-toggle-styles;
1112

13+
// Toggle size
14+
@include module.extend-sizes($all-viewports: true) using($size, $unit) {
1215
+ label::after {
13-
border-radius: 0.7rem * module.$radius-action;
16+
border-radius: 0.7 * $size * $radius-action;
1417
}
18+
}
1519

16-
&:checked + label::after {
17-
content: "\f00c";
18-
}
20+
&:checked + label::after {
21+
content: "\f00c";
1922
}
2023
}
2124
}

‎packages/styles/src/components/action/_inputColor.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,16 @@
1212
width: $size;
1313
}
1414

15-
@include module.action-border-styles;
15+
@include module.action-border-styles using($radius) {
16+
&::-webkit-color-swatch {
17+
border-radius: $radius;
18+
}
19+
20+
&::-moz-color-swatch {
21+
border-radius: $radius;
22+
}
23+
}
24+
1625
@include module.action-disabled-styles;
1726

1827
display: block;
@@ -25,14 +34,12 @@
2534

2635
&::-webkit-color-swatch {
2736
border: none;
28-
border-radius: 50%;
2937
width: 50%;
3038
height: 50%;
3139
}
3240

3341
&::-moz-color-swatch {
3442
border: none;
35-
border-radius: 50%;
3643
width: 50%;
3744
height: 50%;
3845
}

‎packages/styles/src/components/action/_inputRadio.scss‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
//
55
// @group Components
66
@mixin input-radio {
7+
$radius-action-round: module.strip-unit(module.$size-radius-action-round);
8+
79
@layer definitions {
8-
.#{module.$component-input-radio} {
9-
@at-root input[type^="r"]#{&} {
10-
@include module.action-toggle-styles;
10+
input[type^="r"].#{module.$component-input-radio} {
11+
@include module.action-toggle-styles;
1112

13+
// Toggle size
14+
@include module.extend-sizes($all-viewports: true) using($size, $unit) {
1215
+ label::after {
13-
border-radius: 50% * module.$radius-action;
16+
border-radius: $size * $radius-action-round;
1417
}
18+
}
1519

16-
&:checked + label::after {
17-
content: "\f111";
18-
}
20+
&:checked + label::after {
21+
content: "\f111";
1922
}
2023
}
2124
}

0 commit comments

Comments
 (0)