Skip to content

Commit 61c772c

Browse files
vis97cvis97c
committed
feat: no values message on input loop
1 parent bcda348 commit 61c772c

File tree

19 files changed

+202
-108
lines changed

19 files changed

+202
-108
lines changed

‎packages/common-helpers/src/form/input.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,9 @@ export class FormInput<V extends iFormValue = iFormValue>
150150

151151
this._values = formInput.values?.length ? formInput.values : values;
152152

153-
// autoset single value
153+
// autoset single value if required
154154
if (
155+
this.required &&
155156
isChoiceType(this.type) &&
156157
this.options.length === 1 &&
157158
this._values[0] !== this.options[0].value
@@ -172,7 +173,9 @@ export class FormInput<V extends iFormValue = iFormValue>
172173
set options(updatedOptions: iSelectOption[] | undefined) {
173174
this._options = updatedOptions || [];
174175

176+
// autoset single value if required
175177
if (
178+
this.required &&
176179
isChoiceType(this.type) &&
177180
this.options.length === 1 &&
178181
this.values[0] !== this.options[0].value

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,8 @@ export const localeForm: tLocaleForm = {
128128
form_use_valid_cellphone: "You should use a valid cellphone number",
129129
form_unmatching_passwords: "The passwords are unmatching",
130130
form_invalid_data: "Invalid data",
131+
form_no_values: "No values",
132+
form_new_value: "New value",
131133
// swal: {},
132134
};
133135

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ export const localeForm: tLocaleForm = {
129129
form_use_valid_cellphone: "Debes usar un numero de celular valido",
130130
form_unmatching_passwords: "Las contraseñas no coinciden",
131131
form_invalid_data: "Informacion invalida",
132+
form_no_values: "Sin valores",
133+
form_new_value: "Nuevo valor",
132134
// swal: {},
133135
};
134136

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,10 @@ export type tLocaleForm = {
192192
form_unmatching_passwords: string;
193193
/** @example "Invalid data" */
194194
form_invalid_data: string;
195+
/** @example "No values" */
196+
form_no_values: string;
197+
/** @example "New value" */
198+
form_new_value: string;
195199
// swal: {};
196200
};
197201

‎packages/components-vue/src/components/base/Box.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<component
3+
:is="el || 'div'"
4+
class="box"
5+
:class="[
6+
modifiersClasses,
7+
stateClasses,
8+
themeClasses,
9+
GMC(button ?? false, { modifier: 'button' }),
10+
{ ' --bdr-dashed': dashed },
11+
{ ' --bdr-solid': solid && !dashed },
12+
{ '--bgColor-none': transparent },
13+
colorClasses,
14+
]"
15+
v-bind="$attrs"
16+
>
17+
<slot></slot>
18+
</component>
19+
</template>
20+
<script setup lang="ts">
21+
import {
22+
type Component as VueComponent,
23+
type FunctionalComponent,
24+
type DefineComponent,
25+
computed,
26+
} from "vue";
27+
28+
import { useUtils } from "@open-xamu-co/ui-common-helpers";
29+
30+
import type { iUseModifiersProps, iUseStateProps, iUseThemeProps } from "../../types/props";
31+
import useModifiers from "../../composables/modifiers";
32+
import useState from "../../composables/state";
33+
import useTheme from "../../composables/theme";
34+
import { useHelpers } from "../../composables/utils";
35+
36+
interface iBaseBoxProps extends iUseModifiersProps, iUseStateProps, iUseThemeProps {
37+
/**
38+
* Component or tag to render
39+
*/
40+
el?: VueComponent | FunctionalComponent | DefineComponent | string;
41+
/**
42+
* less padding
43+
*/
44+
button?: boolean;
45+
dashed?: boolean;
46+
solid?: boolean;
47+
transparent?: boolean;
48+
withColor?: boolean;
49+
}
50+
51+
/**
52+
* Basic box
53+
*
54+
* @component
55+
* @example
56+
* <BaseBox></BaseBox>
57+
*/
58+
59+
defineOptions({ name: "BaseBox", inheritAttrs: false });
60+
61+
const props = defineProps<iBaseBoxProps>();
62+
63+
const { getModifierClasses: GMC } = useHelpers(useUtils);
64+
const { modifiersClasses } = useModifiers(props);
65+
const { stateClasses } = useState(props);
66+
const { themeClasses, themeValues } = useTheme(props);
67+
68+
const colorClasses = computed(() => {
69+
const classes = GMC([themeValues.value[0]], { modifier: "txtColor", divider: "-" });
70+
71+
return props.withColor ? classes : [];
72+
});
73+
</script>

‎packages/components-vue/src/components/base/ErrorBoundary.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,14 @@
2525
}
2626
2727
/**
28-
* Content loader
29-
*
30-
* Display or hide content while it is loading
28+
* Error handling
3129
*
3230
* @component
3331
* @example
34-
* <LoaderContent></LoaderContent>
32+
* <BaseErrorBoundary></BaseErrorBoundary>
3533
*/
3634
37-
defineOptions({ name: "LoaderContent", inheritAttrs: false });
35+
defineOptions({ name: "BaseErrorBoundary", inheritAttrs: false });
3836
3937
const props = defineProps<iLoaderContentProps>();
4038

‎packages/components-vue/src/components/base/Select.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@
7979
watch(
8080
selectOptions,
8181
(options) => {
82-
// set single option as value
83-
if (options.length === 1 && props.modelValue !== options[0].value) {
82+
// set single option as value if required
83+
if (props.required && options.length === 1 && props.modelValue !== options[0].value) {
8484
emit("update:model-value", options[0].value);
8585
}
8686
},

‎packages/components-vue/src/components/box/Action.vue‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<BaseAction
2+
<BaseBox
3+
:el="BaseAction"
34
v-bind="{ ...$attrs, ...props, ...tooltipAttributes }"
4-
:class="[modifiersClasses, stateClasses, themeClasses]"
5-
class="box --button"
65
:aria-label="label"
6+
button
77
>
88
<div v-if="icon || src" :class="innerThemeClasses" class="box --square">
99
<IconFa v-if="icon" v-bind="{ size: 35, ...iconProps, name: icon }" />
@@ -18,7 +18,7 @@
1818
<!-- Since we only accept label there is no room for slot here -->
1919
<b>{{ label }}</b>
2020
</p>
21-
</BaseAction>
21+
</BaseBox>
2222
</template>
2323

2424
<script setup lang="ts">
@@ -27,9 +27,10 @@
2727
import type { iFormIconProps } from "@open-xamu-co/ui-common-types";
2828
import { eColors } from "@open-xamu-co/ui-common-enums";
2929
30+
import BaseBox from "../base/Box.vue";
3031
import BaseImg from "../base/Img.vue";
31-
import IconFa from "../icon/Fa.vue";
3232
import BaseAction from "../base/Action.vue";
33+
import IconFa from "../icon/Fa.vue";
3334
3435
import type {
3536
iUseModifiersProps,
@@ -38,8 +39,6 @@
3839
iActionProps,
3940
iUseThemeTooltipProps,
4041
} from "../../types/props";
41-
import useModifiers from "../../composables/modifiers";
42-
import useState from "../../composables/state";
4342
import useTheme from "../../composables/theme";
4443
4544
interface iBoxActionProps
@@ -77,8 +76,6 @@
7776
7877
const props = defineProps<iBoxActionProps>();
7978
80-
const { modifiersClasses } = useModifiers(props);
81-
const { stateClasses } = useState(props);
82-
const { themeClasses, tooltipAttributes } = useTheme(props);
79+
const { tooltipAttributes } = useTheme(props);
8380
const { themeClasses: innerThemeClasses } = useTheme({ theme: eColors.LIGHT });
8481
</script>

‎packages/components-vue/src/components/box/Message.vue‎

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,24 @@
11
<!-- eslint-disable vue/no-v-html -->
22
<template>
3-
<div :class="modifiersClasses" class="flx --flxColumn --flx-center --width" v-bind="$attrs">
3+
<div class="flx --flxColumn --flx-center" v-bind="$attrs">
44
<div class="txt --txtAlign-center --width">
5-
<div
6-
:class="[
7-
modifiersClasses,
8-
stateClasses,
9-
themeClasses,
10-
GMC([themeValues[0]], { modifier: 'txtColor', divider: '-' }),
11-
GMC(button ?? false, { modifier: 'button' }),
12-
]"
13-
class="box --width"
14-
>
5+
<BaseBox class="--width" with-color v-bind="props">
156
<p v-if="text" v-html="text"></p>
167
<slot v-else></slot>
17-
</div>
8+
</BaseBox>
189
</div>
1910
</div>
2011
</template>
2112

2213
<script setup lang="ts">
23-
import { useUtils } from "@open-xamu-co/ui-common-helpers";
14+
import BaseBox from "../base/Box.vue";
2415
2516
import type {
2617
iUseModifiersProps,
2718
iUseStateProps,
2819
iUseThemeProps,
2920
iActionProps,
3021
} from "../../types/props";
31-
import useModifiers from "../../composables/modifiers";
32-
import useState from "../../composables/state";
33-
import useTheme from "../../composables/theme";
34-
import { useHelpers } from "../../composables/utils";
3522
3623
interface iBoxMessageProps
3724
extends iActionProps,
@@ -42,10 +29,6 @@
4229
* Text or html
4330
*/
4431
text?: string;
45-
/**
46-
* less padding
47-
*/
48-
button?: boolean;
4932
}
5033
5134
/**
@@ -61,9 +44,4 @@
6144
defineOptions({ name: "BoxMessage", inheritAttrs: false });
6245
6346
const props = defineProps<iBoxMessageProps>();
64-
65-
const { getModifierClasses: GMC } = useHelpers(useUtils);
66-
const { modifiersClasses } = useModifiers(props);
67-
const { stateClasses } = useState(props);
68-
const { themeClasses, themeValues } = useTheme(props);
6947
</script>

‎packages/components-vue/src/components/form/Input.vue‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
v-else-if="!input.defaults && input.type === eFT.FILE"
6262
:theme="theme"
6363
:disabled="readonly"
64-
class="--flx"
64+
class="--flx --width"
6565
:file-prefix="_.snakeCase(input.placeholder)"
6666
:model-value="modelValue"
6767
:invalid="isInvalidByValidation"
@@ -239,25 +239,30 @@
239239
<!-- TODO: build schedule input component -->
240240
<p>Schedule Component Here</p>
241241
</FormInputNValues>
242-
<label v-else-if="input.type === eFT.BOOLEAN" class="--flx">
243-
<BoxMessage :theme="theme" class="--txtAlign" :active="models[i].value" button>
244-
<!-- TODO: use switch type (unsupported style) -->
245-
<InputToggle
246-
v-model="models[i].value"
247-
v-bind="inputProps"
248-
:placeholder="getInputPlaceholder()"
249-
type="checkbox"
250-
:theme="theme"
251-
:disabled="readonly"
252-
full-width
253-
show-placeholder
254-
>
255-
<p v-if="input.placeholder" class="--txtSize-sm --txtWeight --txtWrap">
256-
{{ tet(input.placeholder) }}
257-
</p>
258-
</InputToggle>
259-
</BoxMessage>
260-
</label>
242+
<BaseBox
243+
v-else-if="input.type === eFT.BOOLEAN"
244+
el="label"
245+
class="--flx --width --txtAlign"
246+
:theme="theme"
247+
:active="models[i].value"
248+
button
249+
>
250+
<!-- TODO: use switch type (unsupported style) -->
251+
<InputToggle
252+
v-model="models[i].value"
253+
v-bind="inputProps"
254+
:placeholder="getInputPlaceholder()"
255+
type="checkbox"
256+
:theme="theme"
257+
:disabled="readonly"
258+
full-width
259+
show-placeholder
260+
>
261+
<p v-if="input.placeholder" class="--txtSize-sm --txtWeight --txtWrap">
262+
{{ tet(input.placeholder) }}
263+
</p>
264+
</InputToggle>
265+
</BaseBox>
261266
<FormInputOptions
262267
v-else-if="input.type === eFT.SELECT || input.type === eFT.SELECT_FILTER"
263268
v-slot="{ options }"
@@ -324,6 +329,7 @@
324329
useForm,
325330
} from "@open-xamu-co/ui-common-helpers";
326331
332+
import BaseBox from "../base/Box.vue";
327333
import BaseErrorBoundary from "../base/ErrorBoundary.vue";
328334
import IconFa from "../icon/Fa.vue";
329335
import ActionButton from "../action/Button.vue";
@@ -334,7 +340,6 @@
334340
import InputFile from "../input/File.vue";
335341
import SelectSimple from "../select/Simple.vue";
336342
import SelectFilter from "../select/Filter.vue";
337-
import BoxMessage from "../box/Message.vue";
338343
339344
// input helper components
340345
import FormInputOptions from "./InputOptions.vue";

0 commit comments

Comments
 (0)