Add Tabler Icons and Refactor Form Components (#771)
- Updated `package.json` and `package-lock.json` to include `@iconify-json/tabler` for additional icon support. - Refactored `ImageInput.vue` to utilize `nuxt/icon` for icon rendering, enhancing consistency across components. - Introduced `OptionSelectorInput.vue` as a new form component for selecting options in a grid layout, integrating with the form system. - Updated `FormCustomization.vue` and `FormEditorPreview.vue` to utilize the new `OptionSelectorInput` for improved user experience in form settings. - Enhanced `HiddenRequiredDisabled.vue` to replace manual button rendering with `OptionSelectorInput`, streamlining the component structure. These changes aim to improve the iconography and form component functionality, providing a more cohesive and user-friendly interface.
This commit is contained in:
Chirag Chhatrala
GitHub
parent
9a42aacc3a
commit
a140f789c2
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<input-wrapper v-bind="inputWrapperProps">
|
||||
<InputWrapper v-bind="inputWrapperProps">
|
||||
<template #label>
|
||||
<slot name="label" />
|
||||
</template>
|
||||
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<span class="inline-block w-full rounded-md shadow-xs">
|
||||
<button
|
||||
type="button"
|
||||
aria-haspopup="listbox"
|
||||
|
|
@ -24,52 +24,37 @@
|
|||
>
|
||||
<div
|
||||
v-if="currentUrl == null"
|
||||
class="text-gray-600 dark:text-gray-400"
|
||||
class="text-gray-600 dark:text-gray-400 flex justify-center"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 inline"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
<Icon
|
||||
name="heroicons:cloud-arrow-up"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
</svg>
|
||||
Upload image
|
||||
<span class="ml-2">
|
||||
Upload
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="h-6 text-gray-600 dark:text-gray-400 flex"
|
||||
class=" text-gray-600 dark:text-gray-400 flex"
|
||||
>
|
||||
<div class="flex-grow">
|
||||
<img
|
||||
:src="currentUrl"
|
||||
class="h-6 rounded shadow-md"
|
||||
:src="tmpFile ?? currentUrl"
|
||||
class="h-5 rounded shadow-md border"
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="hover:text-nt-blue flex"
|
||||
class="text-gray-500 hover:text-red-500 flex items-center"
|
||||
@click.prevent="clearUrl"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/></svg></a>
|
||||
<Icon
|
||||
name="heroicons:trash"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</button>
|
||||
</span>
|
||||
|
|
@ -105,7 +90,7 @@
|
|||
v-if="loading"
|
||||
class="text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
<Loader class="h-6 w-6 mx-auto m-10" />
|
||||
<loader class="h-5 w-5 mx-auto m-10" />
|
||||
<p class="text-center mt-6">
|
||||
Uploading your file...
|
||||
</p>
|
||||
|
|
@ -127,20 +112,10 @@
|
|||
accept="image/png, image/gif, image/jpeg, image/bmp, image/svg+xml"
|
||||
@change="manualFileUpload"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mx-auto h-24 w-24 text-gray-200"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
<Icon
|
||||
name="heroicons:cloud-arrow-up"
|
||||
class="x-auto h-24 w-24 text-gray-200"
|
||||
/>
|
||||
</svg>
|
||||
<p class="mt-5 text-sm text-gray-600">
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -161,7 +136,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</input-wrapper>
|
||||
</InputWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,199 @@
|
|||
<template>
|
||||
<input-wrapper v-bind="inputWrapperProps">
|
||||
<template #label>
|
||||
<slot name="label" />
|
||||
</template>
|
||||
|
||||
<div
|
||||
class="grid"
|
||||
:class="[gridClass, { 'gap-2': !seamless }]"
|
||||
:style="optionStyle"
|
||||
role="listbox"
|
||||
:aria-multiselectable="multiple ? 'true' : 'false'"
|
||||
:tabindex="disabled ? -1 : 0"
|
||||
@keydown="onKeydown"
|
||||
ref="root"
|
||||
>
|
||||
<button
|
||||
v-for="(option, idx) in options"
|
||||
:key="option[optionKey]"
|
||||
class="flex flex-col items-center justify-center p-1.5 border transition-colors text-gray-500 focus:outline-none"
|
||||
:class="[
|
||||
option.class ? (typeof option.class === 'function' ? option.class(isSelected(option)) : option.class) : {},
|
||||
{
|
||||
'border-form-color text-form-color bg-form-color/10': isSelected(option),
|
||||
'hover:bg-gray-100 border-gray-300': !isSelected(option),
|
||||
'opacity-50 pointer-events-none': disabled || option.disabled,
|
||||
// Seamless mode: only first and last have radius
|
||||
'rounded-lg': !seamless,
|
||||
'rounded-l-lg': seamless && idx === 0,
|
||||
'rounded-r-lg': seamless && idx === options.length - 1,
|
||||
// Seamless mode: overlap borders with negative margin, keep all borders
|
||||
'-ml-px': seamless && idx > 0,
|
||||
// Seamless mode: z-index hierarchy - selected > hovered/focused > default
|
||||
'relative z-20': seamless && isSelected(option),
|
||||
'relative z-10': seamless && !isSelected(option) && focusedIdx === idx,
|
||||
'relative z-0': seamless && !isSelected(option) && focusedIdx !== idx,
|
||||
// Add hover z-index for seamless mode (but lower than selected)
|
||||
'hover:z-10': seamless && !isSelected(option)
|
||||
}
|
||||
]"
|
||||
:aria-selected="isSelected(option) ? 'true' : 'false'"
|
||||
:tabindex="disabled || option.disabled ? -1 : 0"
|
||||
:disabled="disabled || option.disabled"
|
||||
@click="selectOption(option)"
|
||||
@focus="focusedIdx = idx"
|
||||
@mouseenter="focusedIdx = idx"
|
||||
:title="option.tooltip || ''"
|
||||
role="option"
|
||||
>
|
||||
<slot name="icon" :option="option" :selected="isSelected(option)">
|
||||
<Icon
|
||||
v-if="option.icon"
|
||||
:name="isSelected(option) && option.selectedIcon ? option.selectedIcon : option.icon"
|
||||
:class="[
|
||||
'w-4 h-4',
|
||||
option.label ? 'mb-1' : '',
|
||||
isSelected(option) ? 'text-form-color' : 'text-inherit',
|
||||
option.iconClass ? (typeof option.iconClass === 'function' ? option.iconClass(isSelected(option)) : option.iconClass) : {}
|
||||
]"
|
||||
/>
|
||||
</slot>
|
||||
<span
|
||||
v-if="option.label || !option.icon"
|
||||
class="text-xs"
|
||||
:class="{
|
||||
'text-form-color': isSelected(option),
|
||||
'text-inherit': !isSelected(option),
|
||||
}"
|
||||
>{{ isSelected(option) ? option.selectedLabel ?? option.label : option.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<template #help>
|
||||
<slot name="help" />
|
||||
</template>
|
||||
|
||||
<template #error>
|
||||
<slot name="error" />
|
||||
</template>
|
||||
</input-wrapper>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
import { inputProps, useFormInput } from './useFormInput.js'
|
||||
import InputWrapper from './components/InputWrapper.vue'
|
||||
|
||||
/**
|
||||
* OptionSelectorInput.vue
|
||||
*
|
||||
* A form input component for selecting options in a grid layout with icons.
|
||||
* Integrates with the form system using InputWrapper and useFormInput.
|
||||
*
|
||||
* Props:
|
||||
* - options: Array<{ name, label, icon, selectedIcon?, iconClass?, tooltip?, disabled? }>
|
||||
* - multiple: Boolean (default: false)
|
||||
* - optionKey: String (default: 'name')
|
||||
* - columns: Number (default: 3, for grid layout)
|
||||
* - seamless: Boolean (default: false, removes gaps and only applies radius to first/last items)
|
||||
*
|
||||
* Features:
|
||||
* - Keyboard navigation (arrow keys, enter/space to select)
|
||||
* - Focus management
|
||||
* - Optional tooltips per option
|
||||
* - Form validation integration
|
||||
* - Notion-style look by default
|
||||
* - Seamless mode for connected button appearance
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
...inputProps,
|
||||
options: { type: Array, required: true },
|
||||
multiple: { type: Boolean, default: false },
|
||||
optionKey: { type: String, default: 'name' },
|
||||
columns: { type: Number, default: 3 },
|
||||
seamless: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
|
||||
|
||||
// Use form input composable
|
||||
const {
|
||||
compVal,
|
||||
inputWrapperProps
|
||||
} = useFormInput(props, { emit })
|
||||
|
||||
// Local state
|
||||
const focusedIdx = ref(-1)
|
||||
const root = ref(null)
|
||||
|
||||
// Computed properties
|
||||
const gridClass = computed(() => `grid-cols-${props.columns}`)
|
||||
|
||||
const optionStyle = computed(() => ({
|
||||
'--bg-form-color': props.color
|
||||
}))
|
||||
|
||||
// Methods
|
||||
function isSelected(option) {
|
||||
if (props.multiple) {
|
||||
return Array.isArray(compVal.value) && compVal.value.includes(option[props.optionKey])
|
||||
}
|
||||
return compVal.value === option[props.optionKey]
|
||||
}
|
||||
|
||||
function selectOption(option) {
|
||||
if (props.disabled || option.disabled) return
|
||||
|
||||
if (props.multiple) {
|
||||
let newValue = Array.isArray(compVal.value) ? [...compVal.value] : []
|
||||
const idx = newValue.indexOf(option[props.optionKey])
|
||||
if (idx > -1) {
|
||||
newValue.splice(idx, 1)
|
||||
} else {
|
||||
newValue.push(option[props.optionKey])
|
||||
}
|
||||
compVal.value = newValue
|
||||
} else {
|
||||
compVal.value = isSelected(option) ? null : option[props.optionKey]
|
||||
}
|
||||
}
|
||||
|
||||
function onKeydown(e) {
|
||||
if (props.disabled) return
|
||||
const len = props.options.length
|
||||
if (len === 0) return
|
||||
|
||||
if (["ArrowRight", "ArrowDown"].includes(e.key)) {
|
||||
e.preventDefault()
|
||||
focusedIdx.value = (focusedIdx.value + 1) % len
|
||||
focusButton(focusedIdx.value)
|
||||
} else if (["ArrowLeft", "ArrowUp"].includes(e.key)) {
|
||||
e.preventDefault()
|
||||
focusedIdx.value = (focusedIdx.value - 1 + len) % len
|
||||
focusButton(focusedIdx.value)
|
||||
} else if (["Enter", " ", "Spacebar"].includes(e.key)) {
|
||||
e.preventDefault()
|
||||
if (focusedIdx.value >= 0 && focusedIdx.value < len) {
|
||||
selectOption(props.options[focusedIdx.value])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function focusButton(idx) {
|
||||
nextTick(() => {
|
||||
const btns = root.value?.querySelectorAll('button')
|
||||
if (btns && btns[idx]) btns[idx].focus()
|
||||
})
|
||||
}
|
||||
|
||||
// Watchers
|
||||
watch(compVal, (val) => {
|
||||
// Keep focus on selected
|
||||
if (!props.multiple && val != null) {
|
||||
const idx = props.options.findIndex(opt => opt[props.optionKey] === val)
|
||||
if (idx !== -1) focusedIdx.value = idx
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -17,70 +17,84 @@
|
|||
:form="form"
|
||||
label="Form Theme"
|
||||
/>
|
||||
|
||||
<color-input
|
||||
name="color"
|
||||
:form="form"
|
||||
label="Accent Color"
|
||||
class="my-4"
|
||||
>
|
||||
<template #help>
|
||||
<InputHelp>
|
||||
<span class="text-gray-500">
|
||||
Color (for buttons & inputs border) - <a
|
||||
class="text-blue-500"
|
||||
href="#"
|
||||
<template #label>
|
||||
<InputLabel>Accent Color - <a
|
||||
href="#" class="text-blue-500"
|
||||
@click.prevent="form.color = DEFAULT_COLOR"
|
||||
>Reset</a>
|
||||
</span>
|
||||
</InputHelp>
|
||||
>Reset</a></InputLabel>
|
||||
</template>
|
||||
</color-input>
|
||||
<select-input
|
||||
name="dark_mode"
|
||||
:options="[
|
||||
{ name: 'Auto', value: 'auto' },
|
||||
{ name: 'Light Mode', value: 'light' },
|
||||
{ name: 'Dark Mode', value: 'dark' },
|
||||
]"
|
||||
|
||||
<OptionSelectorInput
|
||||
v-model="form.dark_mode"
|
||||
:form="form"
|
||||
name="dark_mode"
|
||||
label="Color Mode"
|
||||
help="Use Auto to use device system preferences"
|
||||
:options="[
|
||||
{ name: 'auto', label: 'System', icon: 'i-heroicons-computer-desktop' },
|
||||
{ name: 'light', label: 'Light', icon: 'i-heroicons-sun' },
|
||||
{ name: 'dark', label: 'Dark', icon: 'i-heroicons-moon' },
|
||||
]"
|
||||
:multiple="false"
|
||||
:columns="3"
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<EditorSectionHeader
|
||||
icon="octicon:typography-16"
|
||||
title="Typography"
|
||||
title="Text & Language"
|
||||
/>
|
||||
<template v-if="useFeatureFlag('services.google.fonts')">
|
||||
<label class="text-gray-700 font-medium text-sm">Font Style</label>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex-grow my-1" v-if="useFeatureFlag('services.google.fonts')">
|
||||
<label class="text-gray-700 font-semibold text-sm mb-1 block">Font Family</label>
|
||||
<v-button
|
||||
color="white"
|
||||
class="w-full mb-4"
|
||||
class="w-full py-1.5"
|
||||
size="small"
|
||||
@click="showGoogleFontPicker = true"
|
||||
>
|
||||
<span :style="{ 'font-family': (form.font_family?form.font_family+' !important':null) }">
|
||||
<span :style="{ 'font-family': (form.font_family ? form.font_family + ' !important' : null) }">
|
||||
{{ form.font_family || 'Default' }}
|
||||
</span>
|
||||
</v-button>
|
||||
<GoogleFontPicker
|
||||
:show="showGoogleFontPicker"
|
||||
:font="form.font_family || null"
|
||||
@close="showGoogleFontPicker=false"
|
||||
@close="showGoogleFontPicker = false"
|
||||
@apply="onApplyFont"
|
||||
/>
|
||||
</template>
|
||||
<toggle-switch-input
|
||||
name="uppercase_labels"
|
||||
:form="form"
|
||||
label="Uppercase Input Labels"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow">
|
||||
<select-input
|
||||
name="language"
|
||||
class="mt-4"
|
||||
searchable
|
||||
:options="availableLocales"
|
||||
:form="form"
|
||||
label="Form Language"
|
||||
label="Language"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ToggleSwitchInput
|
||||
name="layout_rtl"
|
||||
:form="form"
|
||||
class="mt-4"
|
||||
label="Right-to-Left Layout"
|
||||
/>
|
||||
|
||||
<toggle-switch-input
|
||||
name="uppercase_labels"
|
||||
:form="form"
|
||||
class="mt-4"
|
||||
label="Uppercase Input Labels"
|
||||
/>
|
||||
|
||||
<EditorSectionHeader
|
||||
|
|
@ -88,74 +102,87 @@
|
|||
title="Layout & Sizing"
|
||||
/>
|
||||
<div class="flex space-x-4 justify-stretch">
|
||||
<select-input
|
||||
name="size"
|
||||
class="flex-grow"
|
||||
:options="[
|
||||
{ name: 'Small', value: 'sm' },
|
||||
{ name: 'Medium', value: 'md' },
|
||||
{ name: 'Large', value: 'lg' },
|
||||
]"
|
||||
:form="form"
|
||||
<div class="flex-grow">
|
||||
<OptionSelectorInput
|
||||
seamless
|
||||
label="Input Size"
|
||||
/>
|
||||
|
||||
<select-input
|
||||
name="border_radius"
|
||||
class="flex-grow"
|
||||
:options="[
|
||||
{ name: 'None', value: 'none' },
|
||||
{ name: 'Small', value: 'small' },
|
||||
{ name: 'Full', value: 'full' },
|
||||
]"
|
||||
v-model="form.size"
|
||||
:form="form"
|
||||
label="Input Roundness"
|
||||
name="size"
|
||||
:options="[
|
||||
{ name: 'sm', label:'S'},
|
||||
{ name: 'md', label:'M' },
|
||||
{ name: 'lg', label:'L' },
|
||||
]"
|
||||
:multiple="false"
|
||||
:columns="3"
|
||||
class="mb-4"
|
||||
/>
|
||||
</div>
|
||||
<select-input
|
||||
name="width"
|
||||
:options="[
|
||||
{ name: 'Centered', value: 'centered' },
|
||||
{ name: 'Full Width', value: 'full' },
|
||||
]"
|
||||
:form="form"
|
||||
label="Form Width"
|
||||
help="Useful when embedding your form"
|
||||
/>
|
||||
|
||||
<ToggleSwitchInput
|
||||
name="layout_rtl"
|
||||
<div class="flex-grow">
|
||||
<OptionSelectorInput
|
||||
label="Input Roundness"
|
||||
v-model="form.border_radius"
|
||||
seamless
|
||||
:form="form"
|
||||
class="mt-4"
|
||||
label="Right-to-Left Layout"
|
||||
help="Adjusts layout for RTL languages"
|
||||
name="border_radius"
|
||||
:options="[
|
||||
{ name: 'none', icon: 'i-tabler-border-corner-square' },
|
||||
{ name: 'small', icon: 'i-tabler-border-corner-rounded' },
|
||||
{ name: 'full', icon: 'i-tabler-border-corner-pill' },
|
||||
]"
|
||||
:multiple="false"
|
||||
:columns="3"
|
||||
class="mb-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OptionSelectorInput
|
||||
v-model="form.width"
|
||||
label="Form Width"
|
||||
:form="form"
|
||||
name="width"
|
||||
seamless
|
||||
:options="[
|
||||
{ name: 'centered', label: 'Centered' },
|
||||
{ name: 'full', label: 'Full Width' },
|
||||
]"
|
||||
:multiple="false"
|
||||
:columns="2"
|
||||
class="mb-4 w-2/3"
|
||||
/>
|
||||
|
||||
<EditorSectionHeader
|
||||
icon="heroicons:tag-16-solid"
|
||||
title="Branding & Media"
|
||||
/>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<image-input
|
||||
name="logo_picture"
|
||||
:form="form"
|
||||
label="Logo"
|
||||
help="Not visible when form is embedded"
|
||||
:required="false"
|
||||
/>
|
||||
|
||||
<image-input
|
||||
name="cover_picture"
|
||||
:form="form"
|
||||
label="Cover image"
|
||||
help="Not visible when form is embedded"
|
||||
label="Cover (~1500px)"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<toggle-switch-input
|
||||
name="no_branding"
|
||||
:form="form"
|
||||
class="mt-4"
|
||||
@update:model-value="onChangeNoBranding"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-sm">
|
||||
Remove OpnForm Branding
|
||||
Hide OpnForm Branding
|
||||
</span>
|
||||
<pro-tag
|
||||
upgrade-modal-title="Upgrade today to remove OpnForm branding"
|
||||
|
|
@ -182,7 +209,7 @@
|
|||
name="transparent_background"
|
||||
:form="form"
|
||||
label="Transparent Background"
|
||||
help="Only applies when form is embedded"
|
||||
help="When form is embedded"
|
||||
/>
|
||||
<toggle-switch-input
|
||||
name="confetti_on_submission"
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
class="border rounded-lg bg-white dark:bg-notion-dark w-full block shadow-sm transition-all flex flex-col"
|
||||
:class="{ 'max-w-5xl': !isExpanded, 'h-full': isExpanded }"
|
||||
>
|
||||
<div class="w-full bg-white dark:bg-gray-950 border-b border-gray-300 dark:border-blue-900 dark:border-gray-700 rounded-t-lg p-1.5 px-4 flex items-center gap-x-1.5">
|
||||
<div class="w-full bg-white dark:bg-gray-950 border-b border-gray-300 dark:border-blue-900 dark:border-gray-700 rounded-t-lg p-1.5 pl-4 pr-1.5 flex items-center gap-x-1.5">
|
||||
<div class="bg-red-500 rounded-full w-2.5 h-2.5" />
|
||||
<div class="bg-yellow-500 rounded-full w-2.5 h-2.5" />
|
||||
<div class="bg-green-500 rounded-full w-2.5 h-2.5" />
|
||||
|
|
|
|||
|
|
@ -1,41 +1,16 @@
|
|||
<template>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
v-for="option in availableOptions"
|
||||
:key="option.name"
|
||||
class="flex flex-col items-center justify-center p-1.5 border rounded-lg transition-colors text-gray-500"
|
||||
:class="[
|
||||
option.class ? (typeof option.class === 'function' ? option.class(isSelected(option.name)) : option.class) : {},
|
||||
{
|
||||
'border-blue-500 bg-blue-50': isSelected(option.name),
|
||||
'hover:bg-gray-100 border-gray-300': !isSelected(option.name)
|
||||
}
|
||||
]"
|
||||
@click="toggleOption(option.name)"
|
||||
>
|
||||
<Icon
|
||||
:name="isSelected(option.name) && option.selectedIcon ? option.selectedIcon : option.icon"
|
||||
:class="[
|
||||
'w-4 h-4 mb-1',
|
||||
{
|
||||
'text-blue-500': isSelected(option.name),
|
||||
'text-inherit': !isSelected(option.name),
|
||||
},
|
||||
option.iconClass ? (typeof option.iconClass === 'function' ? option.iconClass(isSelected(option.name)) : option.iconClass) : {}
|
||||
]"
|
||||
<OptionSelectorInput
|
||||
:options="availableOptions"
|
||||
v-model="selectedOption"
|
||||
:multiple="false"
|
||||
:disabled="false"
|
||||
:columns="3"
|
||||
name="field_state"
|
||||
/>
|
||||
<span
|
||||
class="text-xs"
|
||||
:class="{
|
||||
'text-blue-500': isSelected(option.name),
|
||||
'text-inherit': !isSelected(option.name),
|
||||
}"
|
||||
>{{ isSelected(option.name) ? option.selectedLabel ?? option.label : option.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
field: {
|
||||
|
|
@ -55,33 +30,32 @@ const props = defineProps({
|
|||
default: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:field'])
|
||||
|
||||
defineEmits(['update:field'])
|
||||
|
||||
const options = ref([
|
||||
const options = [
|
||||
{
|
||||
name: 'required',
|
||||
label: 'Required',
|
||||
icon: 'i-ph-asterisk-bold',
|
||||
selectedIcon: 'i-ph-asterisk-bold',
|
||||
icon: 'ph:asterisk-bold',
|
||||
selectedIcon: 'ph:asterisk-bold',
|
||||
iconClass: (isActive) => isActive ? 'text-red-500' : '',
|
||||
},
|
||||
{
|
||||
name: 'hidden',
|
||||
label: 'Hidden',
|
||||
icon: 'i-heroicons-eye',
|
||||
selectedIcon: 'i-heroicons-eye-slash-solid',
|
||||
icon: 'heroicons:eye',
|
||||
selectedIcon: 'heroicons:eye-slash-solid',
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
label: 'Disabled',
|
||||
icon: 'i-heroicons-lock-open',
|
||||
selectedIcon: 'i-heroicons-lock-closed-solid',
|
||||
icon: 'heroicons:lock-open',
|
||||
selectedIcon: 'heroicons:lock-closed-solid',
|
||||
}
|
||||
])
|
||||
]
|
||||
|
||||
const availableOptions = computed(() => {
|
||||
return options.value.filter(option => {
|
||||
return options.filter(option => {
|
||||
if (option.name === 'disabled') return props.canBeDisabled
|
||||
if (option.name === 'required') return props.canBeRequired
|
||||
if (option.name === 'hidden') return props.canBeHidden
|
||||
|
|
@ -89,28 +63,34 @@ const availableOptions = computed(() => {
|
|||
})
|
||||
})
|
||||
|
||||
const isSelected = (optionName) => {
|
||||
return props.field[optionName]
|
||||
}
|
||||
|
||||
const toggleOption = (optionName) => {
|
||||
const newValue = !props.field[optionName]
|
||||
|
||||
if (optionName === 'required' && newValue) {
|
||||
const selectedOption = computed({
|
||||
get() {
|
||||
// Only one can be true at a time, priority: required > hidden > disabled
|
||||
if (props.field.required) return 'required'
|
||||
if (props.field.hidden) return 'hidden'
|
||||
if (props.field.disabled) return 'disabled'
|
||||
return null
|
||||
},
|
||||
set(optionName) {
|
||||
// Reset all
|
||||
props.field.required = false
|
||||
props.field.hidden = false
|
||||
} else if (optionName === 'hidden' && newValue) {
|
||||
props.field.disabled = false
|
||||
// Apply business logic
|
||||
if (optionName === 'required') {
|
||||
props.field.required = true
|
||||
props.field.hidden = false
|
||||
} else if (optionName === 'hidden') {
|
||||
props.field.hidden = true
|
||||
props.field.required = false
|
||||
props.field.disabled = false
|
||||
props.field.generates_uuid = false
|
||||
props.field.generates_auto_increment_id = false
|
||||
} else if (optionName === 'disabled' && newValue) {
|
||||
} else if (optionName === 'disabled') {
|
||||
props.field.disabled = true
|
||||
props.field.hidden = false
|
||||
}
|
||||
|
||||
if ((optionName === 'disabled' && props.canBeDisabled) ||
|
||||
(optionName === 'required' && props.canBeRequired) ||
|
||||
(optionName === 'hidden' && props.canBeHidden)) {
|
||||
props.field[optionName] = newValue
|
||||
emit('update:field', { ...props.field })
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -57,6 +57,7 @@
|
|||
"@iconify-json/clarity": "^1.2.1",
|
||||
"@iconify-json/ic": "^1.2.1",
|
||||
"@iconify-json/octicon": "^1.2.1",
|
||||
"@iconify-json/tabler": "^1.2.1",
|
||||
"@nuxt/eslint-config": "^1.3.0",
|
||||
"@nuxt/icon": "^1.12.0",
|
||||
"@nuxtjs/i18n": "^9.0.0",
|
||||
|
|
@ -1588,6 +1589,15 @@
|
|||
"@iconify/types": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify-json/tabler": {
|
||||
"version": "1.2.18",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.2.18.tgz",
|
||||
"integrity": "sha512-W+8qiJhJpb4dmBw3P7JSM9QhGsFG8GIS3BJWAmrJ/92rzK6NPGUOPfGmswoO+/MuPzQV96ColY9lcUktUKv0pg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@iconify/types": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify/collections": {
|
||||
"version": "1.0.546",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.546.tgz",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"@iconify-json/clarity": "^1.2.1",
|
||||
"@iconify-json/ic": "^1.2.1",
|
||||
"@iconify-json/octicon": "^1.2.1",
|
||||
"@iconify-json/tabler": "^1.2.1",
|
||||
"@nuxt/eslint-config": "^1.3.0",
|
||||
"@nuxt/icon": "^1.12.0",
|
||||
"@nuxtjs/i18n": "^9.0.0",
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ module.exports = {
|
|||
border: 'rgba(15, 15, 15, 0.1)',
|
||||
borderDark: 'rgba(255, 255, 255, 0.1)'
|
||||
},
|
||||
"form-color": "var(--bg-form-color)",
|
||||
'form-color': 'rgb(from var(--form-color, var(--bg-form-color)) r g b / <alpha-value>)'
|
||||
},
|
||||
transitionProperty: {
|
||||
height: "height",
|
||||
|
|
|
|||
Loading…
Reference in New Issue