mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 07:21:46 +01:00
chore: move to tsup
This commit is contained in:
Benjamin Canac
105
components/forms/Checkbox.vue
Normal file
105
components/forms/Checkbox.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="relative flex" :class="{ 'items-start': label, 'items-center': !label }">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
:id="name"
|
||||
:checked="isChecked"
|
||||
:name="name"
|
||||
:required="required"
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
type="checkbox"
|
||||
:class="inputClass"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false"
|
||||
@change="onChange"
|
||||
>
|
||||
</div>
|
||||
<div v-if="label" class="ml-3 text-sm">
|
||||
<label :for="name" class="font-medium text-tw-gray-700">
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-400">*</span>
|
||||
</label>
|
||||
<p v-if="help" class="text-tw-gray-500">
|
||||
{{ help }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
model: {
|
||||
prop: 'checked',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Boolean],
|
||||
default: null
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
checked: {
|
||||
type: [Array, Boolean],
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
help: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
baseClass: {
|
||||
type: String,
|
||||
default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 border-tw-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
focused: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isChecked () {
|
||||
return Array.isArray(this.checked) ? this.checked.includes(this.value) : this.checked
|
||||
},
|
||||
inputClass () {
|
||||
return [
|
||||
this.baseClass,
|
||||
this.customClass
|
||||
].join(' ')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange () {
|
||||
// We check if we have validation error and clean it as the user as typed a new value
|
||||
if (this.newValidation) { this.newValidation = null }
|
||||
|
||||
if (!Array.isArray(this.checked)) { return this.$emit('change', !this.checked) }
|
||||
|
||||
if (this.checked.includes(this.value)) { this.$emit('change', this.checked.filter(c => c !== this.value)) } else { this.$emit('change', this.checked.concat(this.value)) }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
265
components/forms/Input.vue
Normal file
265
components/forms/Input.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div :class="wrapperClass">
|
||||
<div
|
||||
v-if="isLeading"
|
||||
class="absolute inset-y-0 left-0 flex items-center pointer-events-none"
|
||||
>
|
||||
<Icon
|
||||
:name="iconName"
|
||||
class="text-tw-gray-400"
|
||||
:class="iconClass"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
:id="name"
|
||||
ref="input"
|
||||
:name="name"
|
||||
:value="modelValue"
|
||||
:type="type"
|
||||
:required="required"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:autocomplete="autocomplete"
|
||||
:spellcheck="spellcheck"
|
||||
:class="[baseClass, sizeClass, paddingClass, paddingIconClass, appearanceClass, customClass]"
|
||||
@input="onInput($event.target.value)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@blur="$emit('blur', $event)"
|
||||
>
|
||||
<slot />
|
||||
<div
|
||||
v-if="isTrailing"
|
||||
class="absolute inset-y-0 right-0 flex items-center pointer-events-none"
|
||||
>
|
||||
<Icon
|
||||
:name="iconName"
|
||||
class="text-tw-gray-400"
|
||||
:class="iconClass"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../elements/Icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autocomplete: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
spellcheck: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
trailing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
leading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator (value) {
|
||||
return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
|
||||
}
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: 'relative'
|
||||
},
|
||||
baseClass: {
|
||||
type: String,
|
||||
default: 'block w-full bg-tw-white text-tw-gray-700 disabled:cursor-not-allowed disabled:bg-tw-gray-50 focus:outline-none'
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
appearance: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator (value) {
|
||||
return ['default', 'none'].includes(value)
|
||||
}
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'focus', 'blur'],
|
||||
setup (props, { emit }) {
|
||||
const input = ref(null)
|
||||
|
||||
const autoFocus = () => {
|
||||
if (props.autofocus) {
|
||||
input.value.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const onInput = (value) => {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
autoFocus()
|
||||
}, 100)
|
||||
})
|
||||
|
||||
const sizeClass = computed(() => ({
|
||||
xxs: 'text-xs',
|
||||
xs: 'text-xs',
|
||||
sm: 'text-sm leading-4',
|
||||
md: 'text-sm',
|
||||
lg: 'text-base',
|
||||
xl: 'text-base'
|
||||
})[props.size])
|
||||
|
||||
const paddingClass = computed(() => ({
|
||||
xxs: 'px-1 py-0.5',
|
||||
xs: 'px-2.5 py-1.5',
|
||||
sm: 'px-3 py-2',
|
||||
md: 'px-4 py-2',
|
||||
lg: 'px-4 py-2',
|
||||
xl: 'px-6 py-3'
|
||||
})[props.size])
|
||||
|
||||
const appearanceClass = computed(() => ({
|
||||
default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm',
|
||||
none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
|
||||
})[props.appearance])
|
||||
|
||||
const paddingIconClass = computed(() => {
|
||||
return [
|
||||
props.isLeading && ({
|
||||
xxs: 'pl-7',
|
||||
xs: 'pl-7',
|
||||
sm: 'pl-10',
|
||||
md: 'pl-10',
|
||||
lg: 'pl-10',
|
||||
xl: 'pl-10'
|
||||
})[props.size],
|
||||
props.isTrailing && ({
|
||||
xxs: 'pr-10',
|
||||
xs: 'pr-10',
|
||||
sm: 'pr-10',
|
||||
md: 'pr-10',
|
||||
lg: 'pr-10',
|
||||
xl: 'pr-10'
|
||||
})[props.size]
|
||||
].join(' ')
|
||||
})
|
||||
|
||||
const isLeading = computed(() => {
|
||||
return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing)
|
||||
})
|
||||
|
||||
const isTrailing = computed(() => {
|
||||
return (props.icon && props.trailing) || (props.loading && props.trailing)
|
||||
})
|
||||
|
||||
const iconName = computed(() => {
|
||||
if (props.loading) {
|
||||
return props.loadingIcon || 'custom/loading'
|
||||
}
|
||||
|
||||
return props.icon
|
||||
})
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return [
|
||||
({
|
||||
xxs: 'h-3 w-3',
|
||||
xs: 'h-4 w-4',
|
||||
sm: 'h-5 w-5',
|
||||
md: 'h-5 w-5',
|
||||
lg: 'h-5 w-5',
|
||||
xl: 'h-5 w-5'
|
||||
})[props.size || 'sm'],
|
||||
props.isLeading && ({
|
||||
xxs: 'ml-2',
|
||||
xs: 'ml-2',
|
||||
sm: 'ml-3',
|
||||
md: 'ml-3',
|
||||
lg: 'ml-3',
|
||||
xl: 'ml-3'
|
||||
})[props.size || 'sm'],
|
||||
props.isTrailing && ({
|
||||
xxs: 'mr-2',
|
||||
xs: 'mr-2',
|
||||
sm: 'mr-3',
|
||||
md: 'mr-3',
|
||||
lg: 'mr-3',
|
||||
xl: 'mr-3'
|
||||
})[props.size || 'sm'],
|
||||
({
|
||||
true: 'animate-spin'
|
||||
})[props.loading]
|
||||
]
|
||||
})
|
||||
|
||||
return {
|
||||
input,
|
||||
onInput,
|
||||
sizeClass,
|
||||
paddingClass,
|
||||
paddingIconClass,
|
||||
appearanceClass,
|
||||
iconClass,
|
||||
iconName,
|
||||
isLeading,
|
||||
isTrailing
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
63
components/forms/InputGroup.vue
Normal file
63
components/forms/InputGroup.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-tw-gray-200': inline }"
|
||||
>
|
||||
<slot name="label">
|
||||
<div :class="{ 'flex content-center justify-between': !inline }">
|
||||
<label
|
||||
v-if="label"
|
||||
:for="name"
|
||||
class="block text-sm font-medium leading-5 text-tw-gray-700"
|
||||
:class="{'sm:mt-px sm:pt-2': inline }"
|
||||
>
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-400">*</span>
|
||||
</label>
|
||||
<span
|
||||
v-if="$slots.hint || hint"
|
||||
class="text-sm leading-5 text-tw-gray-500"
|
||||
:class="{ 'mt-1 max-w-2xl': inline }"
|
||||
><slot name="hint">{{ hint }}</slot></span>
|
||||
</div>
|
||||
</slot>
|
||||
<div
|
||||
:class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
|
||||
>
|
||||
<slot />
|
||||
<p v-if="help" class="mt-2 text-sm text-tw-gray-500">
|
||||
{{ help }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
help: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
hint: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
89
components/forms/Radio.vue
Normal file
89
components/forms/Radio.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<label :for="`${name}-${value}`" class="relative flex cursor-pointer">
|
||||
<input
|
||||
:id="`${name}-${value}`"
|
||||
:checked="checked"
|
||||
:name="name"
|
||||
:required="required"
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
type="radio"
|
||||
:class="inputClass"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false"
|
||||
@change="onChange"
|
||||
>
|
||||
<div v-if="label" class="flex flex-col ml-3">
|
||||
<span class="block text-sm font-medium text-tw-gray-900">
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-400">*</span>
|
||||
</span>
|
||||
<span v-if="help" class="block text-sm text-tw-gray-500">{{ help }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
model: {
|
||||
prop: 'checked',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Boolean, Object],
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
help: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
baseClass: {
|
||||
type: String,
|
||||
default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 border-tw-gray-300 bg-tw-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
focused: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputClass () {
|
||||
return [
|
||||
this.baseClass,
|
||||
this.customClass
|
||||
].join(' ')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange () {
|
||||
this.$emit('change', this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
72
components/forms/RadioGroup.vue
Normal file
72
components/forms/RadioGroup.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<fieldset :id="name">
|
||||
<legend v-if="label" class="sr-only">
|
||||
{{ label }}
|
||||
</legend>
|
||||
|
||||
<div :class="wrapperClass">
|
||||
<Radio
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
:checked="option.value === value"
|
||||
:disabled="disabled"
|
||||
:name="name"
|
||||
v-bind="option"
|
||||
:class="inputClass"
|
||||
@change="onChange"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Radio from './Radio'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Radio
|
||||
},
|
||||
model: {
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
type: [String, Number, Boolean, Object],
|
||||
default: null
|
||||
},
|
||||
options: {
|
||||
type: [Array],
|
||||
required: true
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (value) {
|
||||
this.$emit('change', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
211
components/forms/Select.vue
Normal file
211
components/forms/Select.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div :class="wrapperClass">
|
||||
<select
|
||||
:id="name"
|
||||
:name="name"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:class="selectClass"
|
||||
@input="updateValue($event.target.value)"
|
||||
>
|
||||
<template v-for="(option, index) in normalizedOptionsWithPlaceholder">
|
||||
<optgroup
|
||||
v-if="option.children"
|
||||
:key="`${option[valueAttribute]}-optgroup-${index}`"
|
||||
:value="option[valueAttribute]"
|
||||
:label="option[textAttribute]"
|
||||
>
|
||||
<option
|
||||
v-for="(childOption, index2) in option.children"
|
||||
:key="`${childOption[valueAttribute]}-${index}-${index2}`"
|
||||
:value="childOption[valueAttribute]"
|
||||
:selected="childOption[valueAttribute] === normalizedValue"
|
||||
v-text="childOption[textAttribute]"
|
||||
/>
|
||||
</optgroup>
|
||||
<option
|
||||
v-else
|
||||
:key="`${option[valueAttribute]}-${index}`"
|
||||
:value="option[valueAttribute]"
|
||||
:selected="option[valueAttribute] === normalizedValue"
|
||||
v-text="option[textAttribute]"
|
||||
/>
|
||||
</template>
|
||||
</select>
|
||||
<div v-if="icon" class="absolute inset-y-0 left-0 flex items-center pointer-events-none" :class="iconPadding">
|
||||
<Icon :name="icon" :class="iconClass" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import get from 'lodash/get'
|
||||
|
||||
import Icon from '../elements/Icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [String, Number, Object],
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator (value) {
|
||||
return ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
|
||||
}
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: 'relative'
|
||||
},
|
||||
baseClass: {
|
||||
type: String,
|
||||
default: 'block w-full disabled:cursor-not-allowed bg-tw-white text-tw-gray-700 disabled:bg-tw-gray-50 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm focus:outline-none'
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
textAttribute: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
valueAttribute: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
sizeClass () {
|
||||
return {
|
||||
xxs: 'text-xs',
|
||||
xs: 'text-xs',
|
||||
sm: 'text-sm leading-4',
|
||||
md: 'text-sm',
|
||||
lg: 'text-base',
|
||||
xl: 'text-base'
|
||||
}[this.size]
|
||||
},
|
||||
paddingClass () {
|
||||
return ({
|
||||
xxs: `${this.icon ? 'pl-7' : 'pl-2'} pr-7 py-1.5`,
|
||||
xs: `${this.icon ? 'pl-8' : 'pl-3'} pr-9 py-1.5`,
|
||||
sm: `${this.icon ? 'pl-8' : 'pl-3'} pr-9 py-2`,
|
||||
md: `${this.icon ? 'pl-10' : 'pl-3'} pr-10 py-2`,
|
||||
lg: `${this.icon ? 'pl-10' : 'pl-3'} pr-10 py-2`,
|
||||
xl: `${this.icon ? 'pl-12' : 'pl-4'} pr-12 py-3`
|
||||
})[this.size]
|
||||
},
|
||||
iconClass () {
|
||||
return ({
|
||||
xxs: 'w-3 h-3',
|
||||
xs: 'w-4 h-4',
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-5 h-5',
|
||||
lg: 'w-5 h-5',
|
||||
xl: 'w-5 h-5'
|
||||
})[this.size]
|
||||
},
|
||||
iconPadding () {
|
||||
return ({
|
||||
xxs: 'pl-3',
|
||||
xs: 'pl-3',
|
||||
sm: 'pl-3',
|
||||
md: 'pl-3',
|
||||
lg: 'pl-3',
|
||||
xl: 'pl-4'
|
||||
})[this.size]
|
||||
},
|
||||
selectClass () {
|
||||
return [
|
||||
this.baseClass,
|
||||
this.customClass,
|
||||
this.sizeClass,
|
||||
this.paddingClass
|
||||
].join(' ')
|
||||
},
|
||||
normalizedOptions () {
|
||||
return this.options.map(option => this.normalizeOption(option))
|
||||
},
|
||||
normalizedOptionsWithPlaceholder () {
|
||||
if (!this.placeholder) {
|
||||
return this.normalizedOptions
|
||||
}
|
||||
const { normalizedOptions } = this
|
||||
normalizedOptions.unshift({
|
||||
[this.valueAttribute]: null,
|
||||
[this.textAttribute]: this.placeholder
|
||||
})
|
||||
return normalizedOptions
|
||||
},
|
||||
normalizedValue () {
|
||||
const foundOption = this.normalizedOptionsWithPlaceholder.find(option => option.value === this.modelValue)
|
||||
if (!foundOption) {
|
||||
return null
|
||||
}
|
||||
|
||||
return foundOption.value
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
guessOptionValue (option) {
|
||||
return get(option, this.valueAttribute, get(option, this.textAttribute))
|
||||
},
|
||||
guessOptionText (option) {
|
||||
return get(option, this.textAttribute, get(option, this.valueAttribute))
|
||||
},
|
||||
normalizeOption (option) {
|
||||
if (['string', 'number', 'boolean'].includes(typeof option)) {
|
||||
return {
|
||||
[this.valueAttribute]: option,
|
||||
[this.textAttribute]: option
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...option,
|
||||
[this.valueAttribute]: this.guessOptionValue(option),
|
||||
[this.textAttribute]: this.guessOptionText(option)
|
||||
}
|
||||
},
|
||||
updateValue (value) {
|
||||
this.$emit('update:modelValue', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
448
components/forms/SelectCustom.vue
Normal file
448
components/forms/SelectCustom.vue
Normal file
@@ -0,0 +1,448 @@
|
||||
<template>
|
||||
<div ref="container">
|
||||
<input :value="value" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default">
|
||||
|
||||
<slot :toggle="toggle" :open="open">
|
||||
<TwButton
|
||||
icon="solid/selector"
|
||||
icon-class="text-tw-gray-400"
|
||||
trailing
|
||||
:size="size"
|
||||
:variant="variant"
|
||||
base-class="w-full cursor-default focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
|
||||
:disabled="disabled || !options || !options.length"
|
||||
@click.native="!disabled && options && options.length && toggle()"
|
||||
>
|
||||
<div v-if="selectedOptions && selectedOptions.length" class="inline-flex w-full px-3 py-2 -my-2 -ml-3 truncate">
|
||||
<span v-for="(selectedOption, index) of selectedOptions" :key="index" class="inline-flex items-center pr-2">
|
||||
<slot name="label" :option="selectedOption">
|
||||
<span class="text-tw-gray-700">{{ selectedOption[textAttribute] }}</span>
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="inline-flex w-full text-tw-gray-400">
|
||||
{{ placeholder || '' }}
|
||||
</div>
|
||||
</TwButton>
|
||||
</slot>
|
||||
|
||||
<transition
|
||||
enter-class=""
|
||||
enter-active-class=""
|
||||
enter-to-class=""
|
||||
leave-class="opacity-100"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-show="open" ref="tooltip" class="z-10 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700" :class="dropdownClass">
|
||||
<div v-if="searchable" class="w-full border-b border-gray-200 dark:border-gray-700">
|
||||
<TwInput
|
||||
ref="search"
|
||||
v-model="q"
|
||||
type="search"
|
||||
:name="`select-search-${name}`"
|
||||
block
|
||||
autocomplete="off"
|
||||
appearance="none"
|
||||
:placeholder="placeholderSearch"
|
||||
/>
|
||||
</div>
|
||||
<ul
|
||||
ref="options"
|
||||
tabindex="-1"
|
||||
role="listbox"
|
||||
class="overflow-y-auto max-h-60 sm:text-sm focus:outline-none"
|
||||
>
|
||||
<li
|
||||
v-if="showNewOption"
|
||||
ref="option-new"
|
||||
role="option"
|
||||
class="relative pl-3 pr-12 cursor-default select-none group hover:text-white hover:bg-primary-600"
|
||||
:class="{
|
||||
'bg-primary-600 text-white': active === -1,
|
||||
'text-tw-gray-900': active !== -1,
|
||||
'py-2': dropdownSize === 'md',
|
||||
'py-1 text-sm': dropdownSize === 'sm'
|
||||
}"
|
||||
@mouseover="active = -1"
|
||||
@click="active === -1 && newOption()"
|
||||
>
|
||||
<slot name="newOption" :optionName="q">
|
||||
<span class="block truncate">Add new option: "{{ q }}"</span>
|
||||
</slot>
|
||||
</li>
|
||||
<li
|
||||
v-for="(option, index) in filteredNormalizedOptions"
|
||||
:key="index"
|
||||
:ref="`option-${index}`"
|
||||
role="option"
|
||||
class="relative pl-3 pr-12 cursor-default select-none group hover:text-white hover:bg-primary-600"
|
||||
:class="{
|
||||
'font-semibold': isOptionSelected(option),
|
||||
'bg-primary-600 text-white': active === index,
|
||||
'text-tw-gray-900': active !== index,
|
||||
'py-2': dropdownSize === 'md',
|
||||
'py-1 text-sm': dropdownSize === 'sm'
|
||||
}"
|
||||
@mouseover="active = index"
|
||||
@click.prevent="active === index && selectOption(option)"
|
||||
>
|
||||
<slot name="option" :option="option">
|
||||
<span class="block truncate">{{ option[textAttribute] }}</span>
|
||||
</slot>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<Icon
|
||||
v-if="isOptionSelected(option)"
|
||||
name="solid/check"
|
||||
class=" group-hover:text-white"
|
||||
:class="{
|
||||
'text-white': active === index,
|
||||
'text-primary-600': active !== index,
|
||||
'h-5 w-5': dropdownSize === 'md',
|
||||
'h-4 w-4': dropdownSize === 'sm'
|
||||
}"
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import get from 'lodash/get'
|
||||
import { createPopper } from '@popperjs/core'
|
||||
// import { directive as onClickaway } from 'vue-clickaway'
|
||||
|
||||
import Icon from '../elements/Icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon
|
||||
},
|
||||
// directives: {
|
||||
// onClickaway
|
||||
// },
|
||||
shortcuts: {
|
||||
disabled () {
|
||||
return !this.open
|
||||
},
|
||||
up: 'prev',
|
||||
down: 'next',
|
||||
enter: 'enter',
|
||||
esc: {
|
||||
handler: 'close',
|
||||
stop: true,
|
||||
prevent: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Object, Array],
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
textAttribute: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
valueAttribute: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
searchAttributes: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
placeholderSearch: {
|
||||
type: String,
|
||||
default: 'Search...'
|
||||
},
|
||||
searchable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
newEnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator (value) {
|
||||
return ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
|
||||
}
|
||||
},
|
||||
dropdownClass: {
|
||||
type: String,
|
||||
default: 'w-full'
|
||||
},
|
||||
dropdownSize: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator (value) {
|
||||
return ['sm', 'md'].includes(value)
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'gray'
|
||||
},
|
||||
strategy: {
|
||||
type: String,
|
||||
default: 'absolute'
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom-start'
|
||||
},
|
||||
unselectable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: false,
|
||||
active: 0,
|
||||
q: '',
|
||||
instance: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showNewOption () {
|
||||
return this.newEnabled && this.q && !this.filteredNormalizedOptions.find(option => option[this.textAttribute].toLowerCase() === this.q.toLowerCase())
|
||||
},
|
||||
selectedOptions () {
|
||||
if (this.multiple) {
|
||||
return this.value.map(value => this.normalizedOptions.find(option => option[this.valueAttribute] === value)).filter(Boolean)
|
||||
} else {
|
||||
return [this.normalizedOptions.find(option => option[this.valueAttribute] === this.value)].filter(Boolean)
|
||||
}
|
||||
},
|
||||
normalizedOptions () {
|
||||
return this.options.map(option => this.normalizeOption(option))
|
||||
},
|
||||
filteredNormalizedOptions () {
|
||||
let filteredNormalizedOptions = this.normalizedOptions
|
||||
|
||||
if (!this.q) {
|
||||
return filteredNormalizedOptions
|
||||
}
|
||||
|
||||
try {
|
||||
filteredNormalizedOptions = this.normalizedOptions.filter((option) => {
|
||||
return (this.searchAttributes?.length ? this.searchAttributes : [this.textAttribute]).some((searchAttribute) => {
|
||||
return option[searchAttribute] && option[searchAttribute].search(new RegExp(this.q, 'i')) !== -1
|
||||
})
|
||||
})
|
||||
} catch (e) {}
|
||||
|
||||
return filteredNormalizedOptions
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
disabled (value) {
|
||||
if (value && open) { this.close() }
|
||||
},
|
||||
open (value) {
|
||||
this.$emit('open', value)
|
||||
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.searchable) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.search.$refs.input.focus()
|
||||
this.$refs.search.$refs.input.select()
|
||||
})
|
||||
}
|
||||
|
||||
if (this.multiple) {
|
||||
if (this.value.length) {
|
||||
this.active = this.filteredNormalizedOptions.findIndex(option => this.value.includes(option[this.valueAttribute]))
|
||||
}
|
||||
} else if (this.value) {
|
||||
this.active = this.filteredNormalizedOptions.findIndex(option => option[this.valueAttribute] === this.value)
|
||||
}
|
||||
|
||||
if (this.instance) {
|
||||
this.instance.destroy()
|
||||
this.instance = null
|
||||
}
|
||||
|
||||
this.instance = createPopper(this.$refs.container, this.$refs.tooltip, {
|
||||
strategy: this.strategy,
|
||||
placement: this.placement,
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 8]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'computeStyles',
|
||||
options: {
|
||||
gpuAcceleration: false,
|
||||
adaptive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
padding: 8
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.scrollIntoView()
|
||||
})
|
||||
},
|
||||
filteredNormalizedOptions () {
|
||||
this.updateActive()
|
||||
},
|
||||
q () {
|
||||
this.updateActive()
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.instance) {
|
||||
this.instance.destroy()
|
||||
this.instance = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
this.open = !this.open
|
||||
},
|
||||
close () {
|
||||
this.open = false
|
||||
},
|
||||
newOption () {
|
||||
this.$emit('new', this.q)
|
||||
},
|
||||
isOptionSelected (option) {
|
||||
if (this.multiple) {
|
||||
return this.value && this.value.find(it => it === option[this.valueAttribute])
|
||||
}
|
||||
|
||||
return this.value && this.value === option[this.valueAttribute]
|
||||
},
|
||||
selectOption (option) {
|
||||
if (this.multiple) {
|
||||
const value = [...this.value]
|
||||
const index = value.findIndex(it => it === option[this.valueAttribute])
|
||||
if (index > -1) {
|
||||
value.splice(index, 1)
|
||||
} else {
|
||||
value.push(option[this.valueAttribute])
|
||||
}
|
||||
this.$emit('input', value)
|
||||
} else {
|
||||
if (this.isOptionSelected(option)) {
|
||||
if (this.unselectable) {
|
||||
this.$emit('input', null)
|
||||
}
|
||||
} else {
|
||||
this.$emit('input', option[this.valueAttribute])
|
||||
}
|
||||
this.open = false
|
||||
}
|
||||
},
|
||||
guessOptionValue (option) {
|
||||
return get(option, this.valueAttribute, get(option, this.textAttribute))
|
||||
},
|
||||
guessOptionText (option) {
|
||||
return get(option, this.textAttribute, get(option, this.valueAttribute))
|
||||
},
|
||||
normalizeOption (option) {
|
||||
if (['string', 'number', 'boolean'].includes(typeof option)) {
|
||||
return {
|
||||
[this.valueAttribute]: option,
|
||||
[this.textAttribute]: option
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...option,
|
||||
[this.valueAttribute]: this.guessOptionValue(option),
|
||||
[this.textAttribute]: this.guessOptionText(option)
|
||||
}
|
||||
},
|
||||
prev () {
|
||||
if (this.active - 1 >= (this.showNewOption ? -1 : 0)) {
|
||||
this.active--
|
||||
}
|
||||
|
||||
this.scrollIntoView()
|
||||
},
|
||||
next () {
|
||||
if (this.active + 1 <= (this.filteredNormalizedOptions.length - 1)) {
|
||||
this.active++
|
||||
}
|
||||
|
||||
this.scrollIntoView()
|
||||
},
|
||||
enter () {
|
||||
if (this.active === -1) {
|
||||
if (this.showNewOption) {
|
||||
this.newOption()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const option = this.filteredNormalizedOptions[this.active]
|
||||
if (!option) {
|
||||
return
|
||||
}
|
||||
|
||||
this.selectOption(option)
|
||||
},
|
||||
scrollIntoView () {
|
||||
let child
|
||||
if (this.active === -1) {
|
||||
child = this.$refs['option-new']
|
||||
} else {
|
||||
child = this.$refs[`option-${this.active}`][0]
|
||||
}
|
||||
|
||||
if (!child) {
|
||||
return
|
||||
}
|
||||
|
||||
child.scrollIntoView({ block: 'nearest' })
|
||||
},
|
||||
updateActive () {
|
||||
this.active = this.showNewOption && !this.filteredNormalizedOptions.length ? -1 : 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
165
components/forms/Textarea.vue
Normal file
165
components/forms/Textarea.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div :class="wrapperClass">
|
||||
<textarea
|
||||
:id="name"
|
||||
ref="textarea"
|
||||
:value="modelValue"
|
||||
:name="name"
|
||||
:rows="rows"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:autocomplete="autocomplete"
|
||||
:class="[baseClass, customClass, sizeClass, paddingClass, appearanceClass, resizeClass]"
|
||||
@input="onInput($event.target.value)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@blur="$emit('blur', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
autoresize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autocomplete: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
appearance: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator (value) {
|
||||
return ['default', 'none'].includes(value)
|
||||
}
|
||||
},
|
||||
resize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator (value) {
|
||||
return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
|
||||
}
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: 'relative'
|
||||
},
|
||||
baseClass: {
|
||||
type: String,
|
||||
default: 'block w-full bg-tw-white text-tw-gray-700 disabled:cursor-not-allowed disabled:bg-tw-gray-50 focus:outline-none'
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'focus', 'blur'],
|
||||
setup (props, { emit }) {
|
||||
const textarea = ref(null)
|
||||
|
||||
const autoFocus = () => {
|
||||
if (props.autofocus) {
|
||||
textarea.value.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const autoResize = () => {
|
||||
if (props.autoresize) {
|
||||
const styles = window.getComputedStyle(textarea.value)
|
||||
const paddingTop = parseInt(styles.paddingTop)
|
||||
const paddingBottom = parseInt(styles.paddingBottom)
|
||||
const padding = paddingTop + paddingBottom
|
||||
const initialHeight = (parseInt(styles.height) - padding) / textarea.value.rows
|
||||
const scrollHeight = textarea.value.scrollHeight - padding
|
||||
const newRows = Math.ceil(scrollHeight / initialHeight)
|
||||
|
||||
textarea.value.rows = newRows
|
||||
}
|
||||
}
|
||||
|
||||
const onInput = (value) => {
|
||||
autoResize()
|
||||
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
autoFocus()
|
||||
autoResize()
|
||||
}, 100)
|
||||
})
|
||||
|
||||
const sizeClass = computed(() => ({
|
||||
xxs: 'text-xs',
|
||||
xs: 'text-xs',
|
||||
sm: 'text-sm leading-4',
|
||||
md: 'text-sm',
|
||||
lg: 'text-base',
|
||||
xl: 'text-base'
|
||||
})[props.size])
|
||||
|
||||
const paddingClass = computed(() => ({
|
||||
xxs: 'px-1 py-0.5',
|
||||
xs: 'px-2.5 py-1.5',
|
||||
sm: 'px-3 py-2',
|
||||
md: 'px-4 py-2',
|
||||
lg: 'px-4 py-2',
|
||||
xl: 'px-6 py-3'
|
||||
})[props.size])
|
||||
|
||||
const appearanceClass = computed(() => ({
|
||||
default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm',
|
||||
none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
|
||||
})[props.appearance])
|
||||
|
||||
const resizeClass = computed(() => {
|
||||
return props.resize ? '' : 'resize-none'
|
||||
})
|
||||
|
||||
return {
|
||||
textarea,
|
||||
onInput,
|
||||
sizeClass,
|
||||
paddingClass,
|
||||
appearanceClass,
|
||||
resizeClass
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user