Skip to content

Commit f14b68c

Browse files
vis97cvis97c
committed
fix: optimize & solve table, form, modal & pagination issues
1 parent 34c5947 commit f14b68c

File tree

22 files changed

+290
-229
lines changed

22 files changed

+290
-229
lines changed

‎packages/common-enums/src/components.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/**
2+
* Available components
3+
*/
14
export const componentNames = [
25
// base
36
"BaseImg",
@@ -17,6 +20,7 @@ export const componentNames = [
1720
"InputFile",
1821
"InputText",
1922
"InputToggle",
23+
"InputColor",
2024
// select
2125
"Select",
2226
"SelectFilter",

‎packages/common-helpers/src/locale/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export const localeBase: iLocaleBase = {
5656
* @locale en
5757
*/
5858
export const localeInput: iLocaleInput = {
59+
select_selected: "Selected",
5960
select_placeholder: "--SELECT--",
6061
select_restablish_field: "Restablish field",
6162
select_filter_options: "Type or Double click for options",

‎packages/common-helpers/src/locale/es.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export const localeBase: iLocaleBase = {
5656
* @locale es
5757
*/
5858
export const localeInput: iLocaleInput = {
59+
select_selected: "Seleccionado",
5960
select_placeholder: "--SELECCIONAR--",
6061
select_restablish_field: "Restablecer campo",
6162
select_filter_options: "Escribe o haz doble click para las opciones",

‎packages/common-types/src/form.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,8 @@ export interface iFormResponse<R = any, T = any> {
171171
errors?: any;
172172
/**
173173
* Swal target
174+
*
175+
* If the swal was triggered from a modal, then use it as render target
174176
*/
175177
modalTarget?: T;
176178
}

‎packages/common-types/src/locale.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ export interface iLocaleBase {
7272
* @localeType
7373
*/
7474
export interface iLocaleInput {
75+
/** @example "Selected" */
76+
select_selected: string;
7577
/** @example "--SELECT--" */
7678
select_placeholder: string;
7779
/** @example "Restablish field" */

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@
6060
}
6161
6262
/**
63-
* Dropdown Prototype
63+
* Dropdown Component
6464
*
65-
* @prototype
65+
* @component
6666
*/
6767
6868
defineOptions({ name: "DropdownSimple", inheritAttrs: false });

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

Lines changed: 80 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,93 @@
11
<template>
22
<slot v-if="$slots.toggle" name="toggle" v-bind="{ toggleModal, model }"></slot>
3-
<Teleport v-if="!disabled" :id="modalId" :key="modalId" :to="target || 'body'">
4-
<dialog 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>
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>
2523
</div>
26-
</slot>
27-
<div class="scroll --vertical">
28-
<!-- Main modal content -->
29-
<slot v-bind="{ toggleModal, model, invertedTheme }"></slot>
24+
<ActionLink
25+
:theme="invertedTheme"
26+
:aria-label="cancelButtonOptions.title"
27+
@click.stop="closeModal()"
28+
>
29+
<IconFa name="xmark" size="20" />
30+
</ActionLink>
3031
</div>
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>
32+
</slot>
33+
<div class="scroll --vertical">
34+
<!-- Main modal content -->
35+
<slot v-bind="{ toggleModal, model, invertedTheme }"></slot>
5936
</div>
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"
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)"
6545
>
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-
</Teleport>
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>
8186
<slot v-else v-bind="{ toggleModal, model, invertedTheme }"></slot>
8287
</template>
8388

8489
<script setup lang="ts">
85-
import { type RendererElement, computed, onMounted, onUnmounted, ref, watch } from "vue";
90+
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
8691
import _ from "lodash";
8792
8893
import { useI18n, useSwal } from "@open-xamu-co/ui-common-helpers";
@@ -146,7 +151,6 @@
146151
* @private
147152
*/
148153
modelValue?: boolean;
149-
target?: string | RendererElement;
150154
}
151155
152156
/**

0 commit comments

Comments
 (0)