silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add field appearance

This commit is contained in:
philipp lang 2024-06-28 14:04:20 +02:00
parent f100135f33
commit d22e4b597f
6 changed files with 41 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/components/form/Editor.vue
View File

@ -1,12 +1,10 @@
<template> <template>
<div> <div>
<div> <div class="flex flex-col group" :for="id" :class="sizeClass(size)">
<span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span> <f-label v-if="label" :required="required" :value="label"></f-label>
<div class="relative w-full h-full"> <div class="relative w-full h-full">
<div :id="id" :class="[defaultFieldClass, fieldClass(size)]"></div> <div :id="id" :class="[fieldAppearance, paddingX, paddingY]"></div>
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2"> <f-hint v-if="hint" :value="hint"></f-hint>
<ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
</div>
</div> </div>
</div> </div>
@ -34,7 +32,7 @@ import Alert from 'editorjs-alert';
import useFieldSize from '../../composables/useFieldSize.js'; import useFieldSize from '../../composables/useFieldSize.js';
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const {labelClass, fieldClass, defaultFieldClass} = useFieldSize(); const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
const props = defineProps({ const props = defineProps({
required: { required: {
@ -42,14 +40,15 @@ const props = defineProps({
default: false, default: false,
}, },
size: { size: {
default: null, type: String,
default: () => 'base',
}, },
rows: { rows: {
default: function () { type: Number,
return 4; default: () => 4,
},
}, },
id: { id: {
type: String,
required: true, required: true,
}, },
conditions: { conditions: {
@ -58,16 +57,15 @@ const props = defineProps({
default: () => false, default: () => false,
}, },
hint: { hint: {
default: null, type: String,
default: () => '',
}, },
modelValue: { modelValue: {
default: undefined, default: undefined,
}, },
label: { label: {
default: false, type: String,
}, default: () => '',
placeholder: {
default: '',
}, },
}); });

4
resources/js/components/form/Hint.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="h-full items-center flex absolute top-0 right-0"> <div class="h-full items-center flex absolute top-0 right-0">
<div v-tooltip="value"> <div v-tooltip="value" class="mr-2">
<ui-sprite src="info-button" class="w-5 h-5 text-primary-700 mr-2"></ui-sprite> <ui-sprite src="info-button" class="w-5 h-5 text-primary-700"></ui-sprite>
</div> </div>
</div> </div>
</template> </template>

28
resources/js/components/form/Select.vue
View File

@ -1,38 +1,22 @@
<template> <template>
<label class="flex flex-col group" :for="id" :class="sizes[size]"> <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
<span v-if="label" class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs"> <f-label v-if="label" :required="required" :value="label"></f-label>
{{ label }}
<span v-show="required" class="text-red-800">&nbsp;*</span>
</span>
<div class="relative flex-none flex"> <div class="relative flex-none flex">
<select <select v-model="inner" :disabled="disabled" :name="name" :class="[fieldHeight, fieldAppearance]" class="py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full">
v-model="inner"
:disabled="disabled"
:name="name"
class="group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px] group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full"
>
<option v-if="placeholder" :value="def">{{ placeholder }}</option> <option v-if="placeholder" :value="def">{{ placeholder }}</option>
<option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option> <option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
</select> </select>
<div class="h-full items-center flex absolute top-0 right-0"> <f-hint v-if="hint" :value="hint"></f-hint>
<div v-if="hint" v-tooltip="hint">
<ui-sprite src="info-button" class="info-button"></ui-sprite>
</div>
</div>
</div> </div>
</label> </label>
</template> </template>
<script setup> <script setup>
import {computed, ref} from 'vue'; import {computed, ref} from 'vue';
import useFieldSize from '../../composables/useFieldSize.js';
import map from 'lodash/map'; import map from 'lodash/map';
const sizes = ref({ const {fieldHeight, fieldAppearance, sizeClass} = useFieldSize();
sm: 'field-sm',
base: 'field-base',
lg: 'field-lg',
});
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);

11
resources/js/components/form/Text.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<label class="flex flex-col group" :for="id" :class="sizes[size]"> <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
<f-label :required="required" :value="label"></f-label> <f-label v-if="label" :required="required" :value="label"></f-label>
<div class="relative flex-none flex"> <div class="relative flex-none flex">
<input <input
:id="id" :id="id"
@ -27,7 +27,7 @@ import wNumb from 'wnumb';
import {ref, computed} from 'vue'; import {ref, computed} from 'vue';
import useFieldSize from '../../composables/useFieldSize'; import useFieldSize from '../../composables/useFieldSize';
const {fieldHeight, fieldAppearance, paddingX} = useFieldSize(); const {fieldHeight, fieldAppearance, paddingX, sizeClass} = useFieldSize();
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
@ -136,11 +136,6 @@ const props = defineProps({
}); });
const focus = ref(false); const focus = ref(false);
const sizes = ref({
sm: 'field-sm',
base: 'field-base',
lg: 'field-lg',
});
const transformedValue = computed({ const transformedValue = computed({
get: () => transformers[props.mode][focus.value ? 'edit' : 'display'].to(props.modelValue), get: () => transformers[props.mode][focus.value ? 'edit' : 'display'].to(props.modelValue),

14
resources/js/components/form/Textarea.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<label class="flex flex-col"> <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
<span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span> <f-label v-if="label" :required="required" :value="label"></f-label>
<div class="relative w-full h-full"> <div class="relative flex-none flex">
<textarea class="h-full w-full outline-none" :class="[defaultFieldClass, fieldClass(size)]" :rows="rows" @input="trigger" v-text="modelValue"></textarea> <textarea class="w-full h-full" :class="[fieldAppearance, paddingX, paddingY]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2"> <f-hint v-if="hint" :value="hint"></f-hint>
<ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
</div>
</div> </div>
</label> </label>
</template> </template>
@ -14,7 +12,7 @@
import useFieldSize from '../../composables/useFieldSize.js'; import useFieldSize from '../../composables/useFieldSize.js';
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const {labelClass, fieldClass, defaultFieldClass} = useFieldSize(); const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
const props = defineProps({ const props = defineProps({
required: { required: {

37
resources/js/composables/useFieldSize.js vendored
View File

@ -1,41 +1,24 @@
import {ref, inject, computed, onBeforeUnmount} from 'vue';
import {router} from '@inertiajs/vue3';
import useQueueEvents from './useQueueEvents.js';
export default function () { export default function () {
const sizes = { function sizeClass(size) {
sm: { return {
label: 'text-xs', sm: 'field-sm',
field: 'text-xs', base: 'field-base',
}, lg: 'field-lg',
default: { }[size];
label: 'text-sm', }
field: 'text-sm',
},
};
const defaultFieldClass = 'border-2 p-2 rounded-lg bg-gray-700 border-gray-600 text-gray-300 border-solid';
const fieldHeight = 'group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px]'; const fieldHeight = 'group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px]';
const fieldAppearance = const fieldAppearance =
'group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs'; 'group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs';
const paddingX = 'group-[.field-base]:px-2 group-[.field-sm]:px-1'; const paddingX = 'group-[.field-base]:px-2 group-[.field-sm]:px-1';
const paddingY = 'group-[.field-base]:py-2 group-[.field-sm]:py-1';
function labelClass(size) {
return sizes[size ? size : 'default'].label;
}
function fieldClass(size) {
return sizes[size ? size : 'default'].field;
}
return { return {
labelClass,
fieldClass,
defaultFieldClass,
fieldHeight, fieldHeight,
fieldAppearance, fieldAppearance,
paddingX, paddingX,
paddingY,
sizeClass,
}; };
} }