Vue components

Using script setup with TypeScript

All Vue components use the Composition API with <script setup lang="ts">.

Single responsibility principle (SRP)

Each component has one clear purpose.

• Avoid large or complex components.
• Extract functionality into separate composable functions or child components when complexity grows.

State management

When sharing data between components, prefer a store (see State management) over passing many props. Universal components used in several contexts keep props and emits.

Descriptive component naming

Component names should clearly indicate functionality or purpose.

• Use descriptive, consistent naming conventions, e.g., EasySlider, DataSourceActionsCell.
• Avoid ambiguous or generic names like Item or Widget.

Test attributes (data-cy)

Elements with interactive capabilities or those critical for functionality should include the data-cy attribute for easier automated testing.

Example component

<template>
  <EasySlider
    v-model="depthValue"
    :max="3"
    :min="1"
    :step="1"
    data-cy="slider__depth--data-source-url"
    name="depth"
  >
    <template #label>
      {{ t("easy_ai.data_source.label_depth") }}
      <DSIcon
        v-easy-tooltip="t('easy_ai.data_source.info_depth')"
        icon="c-info"
        class="ml-ms-2"
      />
    </template>
  </EasySlider>
</template>

<script setup lang="ts">
import EasySlider from "@/src/easy-ui/components/EasySlider.vue";
import { DSIcon } from "@/src/design_system";
import { computed } from "vue";
import { useDataSourceWebStore } from "@/src/easy-ai/dataSourceWeb/shared/store/dataSourceWebStore";

const t = window.EasyLocale.getLocale;
const dataSourceWebStore = useDataSourceWebStore();

const depthValue = computed({
  get: () => dataSourceWebStore.depth,
  set: (value: number) => dataSourceWebStore.setDepth(value),
});
</script>