Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 8x 8x 8x 12x 12x 12x 2x 12x 12x | <template>
<div class="env-selector-section">
<div
v-if="!isMounted"
class="env-dropdown-skeleton"
>
<label class="dropdown-label">Environment</label>
<div class="skeleton-input" />
</div>
<Dropdown
v-else
v-model="selectedEnvironment"
name="environment"
label="Environment"
:options="environmentOptions"
:required="false"
class="env-dropdown"
:data-testid="dataTestId"
/>
</div>
</template>
<script setup>
/* eslint-disable no-undef */
import { ref, onMounted } from 'vue';
import Dropdown from '@atomic-ui/dropdown';
import useEnvironmentSelector from '../composables/useEnvironmentSelector';
defineProps({
dataTestId: {
type: String,
default: 'env-dropdown',
},
});
const isMounted = ref(false);
onMounted(() => {
isMounted.value = true;
});
const emit = defineEmits(['change']);
function onEnvironmentChange(newEnv) {
emit('change', newEnv);
}
const { selectedEnvironment, environmentOptions } = useEnvironmentSelector(onEnvironmentChange);
defineExpose({
selectedEnvironment,
});
</script>
<style lang="scss" scoped>
.env-selector-section {
width: 200px;
}
.env-dropdown {
width: 100%;
}
.env-dropdown-skeleton {
width: 100%;
.dropdown-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: $black;
}
.skeleton-input {
width: 100%;
height: 40px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
border: 1px solid #d0d0d0;
}
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
</style>
|