Arno Kaimbacher
49bd96ee77
Some checks failed
CI Pipeline / japa-tests (push) Failing after 1m8s
- **AdminuserController.ts**: enable editing `first_name` and `last_name` for user creation and updates - **MimetypeController.ts**: add creation support for mimetypes with selectable extensions - **Models**: add `Mimetype` model (mime_type.ts); add `SnakeCaseNamingStrategy` for User model - **Validators**: - **updateDatasetValidator**: increase title length to 255 and description length to 2500 - **User Validators**: refine `createUserValidator` and `updateUserValidator` to include `first_name` and `last_name` - **vanilla_error_reporter**: improve error reporting for wildcard fields - **SKOS Query**: refine keyword request in `SearchCategoryAutocomplete.vue` - **UI Enhancements**: - improve icon design in wizard (Wizard.vue) - add components for mimetype creation (Create.vue and button in Index.vue) - **Routes**: update `routes.ts` to include new AdonisJS routes
51 lines
2.1 KiB
Vue
51 lines
2.1 KiB
Vue
<template>
|
|
<div class="flex items-center relative">
|
|
<!-- The main circular icon with dynamic classes based on the state of the step -->
|
|
<div class="text-gray-500 rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2"
|
|
:class="[
|
|
isCurrent ? 'text-white bg-teal-600 border-teal-600' : 'border-gray-300',
|
|
isChecked && 'text-teal-600 border-teal-600',
|
|
]">
|
|
<!-- Slot for custom content inside the circle -->
|
|
<slot></slot>
|
|
<!-- Label displayed above the icon, visibility controlled by isCurrent and isDark -->
|
|
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase invisible sm:visible"
|
|
:class="[!isDark && isCurrent ? 'font-black text-green-600' : '']">
|
|
{{ label }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Divider line between steps, only visible if this is not the last step -->
|
|
<div v-if="!isLastStep" class="flex-auto border-t-2 transition duration-500 ease-in-out invisible sm:visible"
|
|
:class="[isChecked ? 'border-teal-600' : 'border-gray-300']"></div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { StyleService } from '@/Stores/style.service';
|
|
|
|
const styleService = StyleService();
|
|
|
|
export default {
|
|
name: 'Icon_Multistep',
|
|
props: {
|
|
isCurrent: Boolean, // Indicates if this step is the current one
|
|
isChecked: Boolean, // Indicates if this step has been checked
|
|
isLastStep: Boolean, // Indicates if this step is the last one
|
|
label: String, // Label to display above the icon
|
|
},
|
|
data() {
|
|
return {
|
|
mode: 'light', // Light mode setting
|
|
checkedClass: 'border-teal-600', // Class for checked state
|
|
uncheckedClass: 'border-gray-300', // Class for unchecked state
|
|
};
|
|
},
|
|
computed: {
|
|
// Computed property to determine if dark mode is enabled
|
|
isDark() {
|
|
return styleService.darkMode === true; // Return true if dark mode is active
|
|
}
|
|
},
|
|
};
|
|
</script>
|