Initial commit
This commit is contained in:
Julien Nahum
88
resources/js/components/forms/components/VCheckbox.vue
Normal file
88
resources/js/components/forms/components/VCheckbox.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
:id="id || name"
|
||||
:name="name"
|
||||
:checked="internalValue"
|
||||
type="checkbox"
|
||||
:class="sizeClasses"
|
||||
class="rounded border-gray-500 cursor-pointer"
|
||||
:disabled="disabled"
|
||||
@click="handleClick"
|
||||
>
|
||||
<label :for="id || name" class="text-gray-700 dark:text-gray-300 ml-2" :class="{'cursor-not-allowed':disabled}">
|
||||
<slot />
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VCheckbox',
|
||||
|
||||
props: {
|
||||
id: { type: String, default: null },
|
||||
name: { type: String, default: 'checkbox' },
|
||||
value: { type: [Boolean, String], default: false },
|
||||
checked: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false },
|
||||
size: { type: String, default: 'normal' }
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
internalValue: false
|
||||
}),
|
||||
|
||||
computed: {
|
||||
sizeClasses () {
|
||||
if (this.size === 'small') {
|
||||
return 'w-3 h-3'
|
||||
}
|
||||
return 'w-5 h-5'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value (val) {
|
||||
this.internalValue = val
|
||||
},
|
||||
|
||||
checked (val) {
|
||||
this.internalValue = val
|
||||
},
|
||||
|
||||
internalValue (val, oldVal) {
|
||||
// Support form data string checkbox (string 1 or 0)
|
||||
if (val === 0 || val === '0') val = false
|
||||
if (val === 1 || val === '1') val = true
|
||||
|
||||
if (val !== oldVal) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.internalValue = this.value
|
||||
|
||||
if ('checked' in this.$options.propsData) {
|
||||
this.internalValue = this.checked
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$emit('input', this.internalValue)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick (e) {
|
||||
this.$emit('click', e)
|
||||
|
||||
if (!e.isPropagationStopped) {
|
||||
this.internalValue = e.target.checked
|
||||
this.$emit('input', this.internalValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
223
resources/js/components/forms/components/VSelect.vue
Normal file
223
resources/js/components/forms/components/VSelect.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="v-select">
|
||||
<label v-if="label"
|
||||
:class="[theme.SelectInput.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
|
||||
>
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-500 required-dot">*</span>
|
||||
</label>
|
||||
|
||||
<div v-on-clickaway="closeDropdown"
|
||||
class="relative"
|
||||
>
|
||||
<span class="inline-block w-full rounded-md">
|
||||
<button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
|
||||
class="cursor-pointer"
|
||||
:style="inputStyle" :class="[theme.SelectInput.input,{'py-2':!multiple || loading,'py-1': multiple, 'ring-red-500 ring-2': hasError}]"
|
||||
@click="openDropdown"
|
||||
>
|
||||
<div :class="{'h-6':!multiple, 'min-h-8':multiple && !loading}">
|
||||
<transition name="fade" mode="out-in">
|
||||
<loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
<div v-else-if="value" key="value" class="flex" :class="{'min-h-8':multiple}">
|
||||
<slot name="selected" :option="value" />
|
||||
</div>
|
||||
<div v-else key="placeholder">
|
||||
<slot name="placeholder">
|
||||
<div class="text-gray-400 dark:text-gray-500 w-full text-left" :class="{'py-1':multiple && !loading}">
|
||||
{{ placeholder }}
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
|
||||
<path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button></span>
|
||||
<!-- Select popover, show/hide based on select state. -->
|
||||
<div v-show="isOpen" :dusk="dusk+'_dropdown'"
|
||||
class="absolute mt-1 w-full rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10"
|
||||
>
|
||||
<ul tabindex="-1" role="listbox" aria-labelled by="listbox-label" aria-activedescendant="listbox-item-3"
|
||||
class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
|
||||
:class="{'max-h-42 py-1': !isSearchable,'max-h-48 pb-1': isSearchable}"
|
||||
>
|
||||
<div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark:bg-notion-dark-light z-10">
|
||||
<text-input name="search" :color="color" v-model="searchTerm" :theme="theme"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</div>
|
||||
<div v-if="loading" class="w-full py-2 flex justify-center">
|
||||
<loader class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
</div>
|
||||
<template v-if="filteredOptions.length>0">
|
||||
<li v-for="item in filteredOptions" :key="item[optionKey]" role="option"
|
||||
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
|
||||
:dusk="dusk+'_option'" @click="select(item)"
|
||||
>
|
||||
<slot name="option" :option="item" :selected="isSelected(item)" />
|
||||
</li>
|
||||
</template>
|
||||
<p v-else-if="!loading" class="w-full text-gray-500 text-center py-2">
|
||||
No option available.
|
||||
</p>
|
||||
<li v-if="allowCreation && searchTerm" role="option"
|
||||
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
|
||||
@click="createOption(searchTerm)"
|
||||
>
|
||||
Create <b class="px-1 bg-gray-300 rounded group-hover:text-black">{{searchTerm}}</b>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { directive as onClickaway } from 'vue-clickaway'
|
||||
import TextInput from '../TextInput'
|
||||
import Fuse from 'fuse.js'
|
||||
import { themes } from '~/config/form-themes'
|
||||
import debounce from 'debounce'
|
||||
|
||||
export default {
|
||||
name: 'VSelect',
|
||||
components: { TextInput },
|
||||
directives: {
|
||||
onClickaway: onClickaway
|
||||
},
|
||||
props: {
|
||||
data: Array,
|
||||
value: { default: null },
|
||||
label: { type: String, default: null },
|
||||
dusk: { type: String, default: null },
|
||||
loading: { type: Boolean, default: false },
|
||||
required: { type: Boolean, default: false },
|
||||
multiple: { type: Boolean, default: false },
|
||||
searchable: { type: Boolean, default: false },
|
||||
hasError: { type: Boolean, default: false },
|
||||
remote: { type: Function, default: null },
|
||||
searchKeys: { type: Array, default: () => ['name'] },
|
||||
optionKey: { type: String, default: 'id' },
|
||||
emitKey: { type: String, default: null }, // Key used for emitted value, emit object if null,
|
||||
color: { type: String, default: '#3B82F6' },
|
||||
placeholder: { type: String, default: null },
|
||||
uppercaseLabels: { type: Boolean, default: true },
|
||||
theme: { type: Object, default: () => themes.default },
|
||||
allowCreation: { type: Boolean, default: false },
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isOpen: false,
|
||||
searchTerm: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputStyle () {
|
||||
return {
|
||||
'--tw-ring-color': this.color
|
||||
}
|
||||
},
|
||||
debouncedRemote () {
|
||||
if (this.remote) {
|
||||
return debounce(this.remote, 300)
|
||||
}
|
||||
return null
|
||||
},
|
||||
filteredOptions () {
|
||||
if (!this.data) return []
|
||||
if (!this.searchable || this.remote || this.searchTerm === '') {
|
||||
return this.data
|
||||
}
|
||||
|
||||
// Fuze search
|
||||
const fuzeOptions = {
|
||||
keys: this.searchKeys
|
||||
}
|
||||
const fuse = new Fuse(this.data, fuzeOptions)
|
||||
return fuse.search(this.searchTerm).map((res) => {
|
||||
return res.item
|
||||
})
|
||||
},
|
||||
isSearchable () {
|
||||
return this.searchable || this.remote !== null || this.allowCreation
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'searchTerm': function (val) {
|
||||
if (!this.debouncedRemote) return
|
||||
if ((this.remote && val) || (val === '' && !this.value) || (val === '' && this.isOpen)) {
|
||||
return this.debouncedRemote(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isSelected (value) {
|
||||
if (!this.value) return false
|
||||
|
||||
if (this.emitKey && value[this.emitKey]) {
|
||||
value = value[this.emitKey]
|
||||
}
|
||||
|
||||
if (this.multiple) {
|
||||
return this.value.includes(value)
|
||||
}
|
||||
return this.value === value
|
||||
},
|
||||
closeDropdown () {
|
||||
this.isOpen = false
|
||||
this.searchTerm = ''
|
||||
},
|
||||
openDropdown () {
|
||||
this.isOpen = !this.isOpen
|
||||
},
|
||||
select (value) {
|
||||
if (!this.multiple) {
|
||||
this.closeDropdown()
|
||||
}
|
||||
|
||||
if (this.emitKey) {
|
||||
value = value[this.emitKey]
|
||||
}
|
||||
|
||||
if (this.multiple) {
|
||||
const emitValue = Array.isArray(this.value) ? [...this.value] : []
|
||||
|
||||
// Already in value, remove it
|
||||
if (this.isSelected(value)) {
|
||||
this.$emit('input', emitValue.filter((item) => {
|
||||
if (this.emitKey) {
|
||||
return item !== value
|
||||
}
|
||||
return item[this.optionKey] !== value && item[this.optionKey] !== value[this.optionKey]
|
||||
}))
|
||||
return
|
||||
}
|
||||
|
||||
// Otherwise add value
|
||||
emitValue.push(value)
|
||||
this.$emit('input', emitValue)
|
||||
} else {
|
||||
if (this.value === value) {
|
||||
this.$emit('input', null)
|
||||
} else {
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
createOption(newOption) {
|
||||
if(newOption){
|
||||
let newItem = {
|
||||
'name': newOption,
|
||||
'value': newOption,
|
||||
}
|
||||
this.$emit("update-options", newItem)
|
||||
this.select(newItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
79
resources/js/components/forms/components/VSwitch.vue
Normal file
79
resources/js/components/forms/components/VSwitch.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<Motion
|
||||
v-model="value"
|
||||
:options="{
|
||||
duration: 150,
|
||||
}"
|
||||
:trigger="[
|
||||
'bg-gray-200 border-gray-300 duration-100 dark:bg-gray-700 dark:border-gray-600',
|
||||
'bg-gray-200 dark:bg-gray-700',
|
||||
'bg-nt-blue border-nt-blue',
|
||||
'bg-nt-blue duration-100',
|
||||
]"
|
||||
class="inline-flex items-center h-6 w-12 p-1 border rounded-full cursor-pointer focus:outline-none"
|
||||
@click="$emit('input',!internalValue)"
|
||||
>
|
||||
<Motion
|
||||
v-model="internalValue"
|
||||
tag="span"
|
||||
:options="{
|
||||
duration: 150,
|
||||
}"
|
||||
:trigger="[
|
||||
'translate-x-0 duration-150',
|
||||
'rounded-2xl scale-75 duration-100',
|
||||
'translate-x-6 duration-100',
|
||||
'scale-100 duration-150',
|
||||
]"
|
||||
class="inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-500 shadow"
|
||||
/>
|
||||
</Motion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Motion from 'tinymotion'
|
||||
export default {
|
||||
name: 'VSwitch',
|
||||
components: { Motion },
|
||||
|
||||
props: {
|
||||
value: { type: Boolean, default: false }
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
internalValue: this.value
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
sizeClasses () {
|
||||
if (this.size === 'small') {
|
||||
return 'w-3 h-3'
|
||||
}
|
||||
return 'w-5 h-5'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value (val) {
|
||||
this.internalValue = val
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.internalValue = this.value
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.translate-x-6 {
|
||||
--tw-translate-x: 1.4rem !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user