Skip to content

Commit

Permalink
feat(element-container): support disabled state
Browse files Browse the repository at this point in the history
  • Loading branch information
stfsy committed Apr 2, 2023
1 parent ffd31a9 commit bb2e7f0
Showing 1 changed file with 16 additions and 7 deletions.
23 changes: 16 additions & 7 deletions src/components/form-element-container-with-label.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<div :id="parentId" :class="parentClazz" @mouseover="onFocus" @mouseleave="onBlur"
class="dsq-form-element-container-with-label border-solid cursor-text flex flex-col rounded">
<div :id="parentId" :class="parentClazz" @mouseover="onFocus" @mouseleave="onBlur">
<div class="relative">
<label :for="id" :class="labelClazz" @mousedown="onFocusRequest">{{ label }}</label>
<Transition name="form-element-hint">
Expand Down Expand Up @@ -61,6 +60,10 @@ const props = defineProps({
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
focussed: {
type: Boolean,
},
Expand Down Expand Up @@ -108,7 +111,14 @@ const showFormat = computed(() => {
return props.format && props.showFormatHint && props.focussed
})
const parentClazz = computed(() => {
const clazz = [getThemeProperty(FORM_ELEMENT_BORDER_SIZE_DEFAULT).value]
const clazz = ['dsq-form-element-container-with-label border-solid flex flex-col rounded']
clazz.push([getThemeProperty(FORM_ELEMENT_BORDER_SIZE_DEFAULT).value])
if (props.disabled) {
clazz.push('cursor-not-allowed')
} else {
clazz.push('cursor-text')
}
if (hasFocus.value || props.focussed) {
clazz.push(getThemeProperty(FORM_ELEMENT_BORDER_COLOR_ACTIVE).value)
clazz.push(getThemeProperty(FORM_ELEMENT_BORDER_RING_SIZE_DEFAULT).value, getThemeProperty(FORM_ELEMENT_BORDER_RING_COLOR_DEFAULT).value)
Expand All @@ -121,12 +131,12 @@ const parentClazz = computed(() => {
})
const labelClazz = computed(() => {
const clazz = [
'cursor-text -left-3 -top-3.5 py-1 px-2 absolute leading-7',
'-left-3 -top-3.5 py-1 px-2 absolute leading-7',
getThemeProperty(FORM_ELEMENT_LABEL_SIZE_DEFAULT).value,
getThemeProperty(FORM_ELEMENT_LABEL_BACKGROUND_DEFAULT).value,
getThemeProperty(FORM_ELEMENT_LABEL_WEIGHT_DEFAULT).value
]
if (isInvalid.value) {
clazz.push(getThemeProperty(FORM_ELEMENT_LABEL_COLOR_ATTENTION).value)
} else {
Expand All @@ -137,11 +147,10 @@ const labelClazz = computed(() => {
})
const hintClazz = computed(() => {
const clazz = [
'absolute cursor-text -top-2 p-1.5 right-0 leading-7 italic ml-auto transition-opacity duration-200 ease-in',
'absolute -top-2 p-1.5 right-0 leading-7 italic ml-auto transition-opacity duration-200 ease-in',
getThemeProperty(FORM_ELEMENT_HINT_COLOR_DEFAULT).value,
getThemeProperty(FORM_ELEMENT_HINT_SIZE_DEFAULT).value,
getThemeProperty(FORM_ELEMENT_HINT_WEIGHT_DEFAULT).value,
]
return clazz.join(' ')
Expand Down

0 comments on commit bb2e7f0

Please sign in to comment.