feat/layout-cleaning: penyesuaian kecil doc-entry
This commit is contained in:
@@ -52,13 +52,15 @@ const settingClass = computed(() => {
|
|||||||
'[&_.cell]:xl:flex',
|
'[&_.cell]:xl:flex',
|
||||||
'[&_.cell]:2xl:flex',
|
'[&_.cell]:2xl:flex',
|
||||||
][getBreakpointIdx(props.cellFlexPoint)]
|
][getBreakpointIdx(props.cellFlexPoint)]
|
||||||
cls += ' ' + [
|
cls += ' [&_.label]:flex-shrink-0 ' + [
|
||||||
'[&_.label]:md:w-12 [&_.label]:xl:w-20',
|
'[&_.label]:md:w-12 [&_.label]:xl:w-20',
|
||||||
'[&_.label]:md:w-16 [&_.label]:xl:w-24',
|
'[&_.label]:md:w-16 [&_.label]:xl:w-24',
|
||||||
'[&_.label]:md:w-24 [&_.label]:xl:w-32',
|
'[&_.label]:md:w-24 [&_.label]:xl:w-32',
|
||||||
'[&_.label]:md:w-32 [&_.label]:xl:w-40',
|
'[&_.label]:md:w-32 [&_.label]:xl:w-40',
|
||||||
'[&_.label]:md:w-44 [&_.label]:xl:w-52',
|
'[&_.label]:md:w-44 [&_.label]:xl:w-52',
|
||||||
][getLabelSizeIdx(props.labelSize)]
|
][getLabelSizeIdx(props.labelSize)]
|
||||||
|
} else {
|
||||||
|
cls += ' [&_.label]:pb-1 ';
|
||||||
}
|
}
|
||||||
cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
|
cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
|
||||||
cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
|
cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const props = defineProps({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const settingClass = computed(() => {
|
const settingClass = computed(() => {
|
||||||
let cls = 'cell'
|
let cls = ' cell'
|
||||||
if (props.colSpan) {
|
if (props.colSpan) {
|
||||||
cls += ' ' + [
|
cls += ' ' + [
|
||||||
'col-span-1', 'col-span-2', 'col-span-3', 'col-span-4', 'col-span-5',
|
'col-span-1', 'col-span-2', 'col-span-3', 'col-span-4', 'col-span-5',
|
||||||
@@ -36,7 +36,7 @@ const settingClass = computed(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="settingClass">
|
<div :class="`w-full${settingClass}`">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
errMessage: { type: String, default: '' },
|
errMessage: { type: String, default: '' },
|
||||||
defaultClass: { type: String, default: 'field grow shrink-0 overflow-hidden' },
|
defaultClass: { type: String, default: 'grow shrink-0 overflow-hidden' },
|
||||||
class: { type: String, default: '' },
|
class: { type: String, default: '' },
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="`${props.defaultClass} ${props.class}`">
|
<div :class="`field ${props.defaultClass} ${props.class}`">
|
||||||
<slot />
|
<slot />
|
||||||
<div v-if="props.errMessage" class="mt-1 text-xs font-medium text-red-500">{{ props.errMessage }}</div>
|
<div v-if="props.errMessage" class="mt-1 text-xs font-medium text-red-500">{{ props.errMessage }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
export { default as Block } from './block.vue'
|
export { default as Block } from './block.vue'
|
||||||
export { default as Cell } from './cell.vue'
|
export { default as Cell } from './cell.vue'
|
||||||
// export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'
|
export { default as Label } from './label.vue'
|
||||||
|
export { default as Field } from './field.vue'
|
||||||
|
|||||||
Reference in New Issue
Block a user