@webitel/ui

Appearance

Card Tools: Usage ​

На прикладі карточки розділу в crm'ці.

Для вкладеної карточки див. Nested Card Usage.

Creating a store ​

crm/../caseSourcesCardStore.ts

ts
// crm/../caseSourcesCardStore.ts

import { CaseSourcesAPI } from '@webitel/api-services/api';
import {CreateSourceBody as standardValidationSchema} from "@webitel/api-services/gen-wire"; 
import { WebitelCasesSource } from "@webitel/api-services/gen";
import {createCardStore} from "@webitel/ui-datalist/card"; 

import { CaseSourcesNamespace } from "../../namespace"; // pinia namespace

export const useCaseSourcesCardStore = createCardStore<WebitelCasesSource>({ 
    namespace: `${CaseSourcesNamespace}/card`,
    apiModule: CaseSourcesAPI,
    standardValidationSchema, // NOTE!
});

Using composables ​

Tabs-wrapper component ​

crm/../opened-source.vue

ts
// opened-source.vue

<template>
    // ...
  <router-view v-slot="{ Component }">
    <component // tabs component!
      :is="Component"
      v-model="modelValue"
      :validation-fields="validationFields"
      :access="{ ... }"
    />
  </router-view>
    // ...
</template>

<script lang="ts" setup>
    // ...
import { useCardComponent } from '@webitel/ui-datalist/card'; 

import { useCaseSourcesCardStore } from '../stores'; 
import {WebitelCasesSource} from "@webitel/api-services/gen";

// ...

const {
    // models
    modelValue, 

    // state
    debouncedIsLoading,
    originalItemInstance, // readonly!

    // computed
    isNew,
    saveText,
    hasValidationErrors,
    isAnyFieldEdited,
    validationFields,

    // actions
    save,
} = useCardComponent<WebitelCasesSource>({ 
    useCardStore: useCaseSourcesCardStore, 
});
// ...
</script>

Tab component ​

crm/../opened-source-general.vue

ts
// opened-source-general.vue

<template>
    // ...
    <wt-input-text
        v-model="modelValue.name" //note: v-model is preffered
        :label="t('reusable.name')"
        :regle-validation="validationFields?.name" //note: prop name
        :disabled="disableUserInput"
        required 
    />
        
    <wt-single-select
        v-model="modelValue.type"
        :label="t('vocabulary.type')"
        :options="typesSourcesOptions"
        :regle-validation="validationFields?.type"
        :disabled="disableUserInput"
        option-value="id"
        required
    />
    // ...
<template>

<script lang="ts" setup>
    import {RegleSchemaFieldStatus} from '@regle/schemas';
    import {WebitelCasesSourceType} from '@webitel/api-services/gen/models'; 
    import {WebitelCasesSource} from '@webitel/api-services/gen/models';
    import {WtInputText, WtSingleSelect} from '@webitel/ui-sdk/components';
    
    // ...

    const modelValue = defineModel<WebitelCasesSource>(); 
    
    defineProps<{ 
        validationFields: { 
            /* keys as in CaseSource, but values are Regle schema objects */
            [K in keyof WebitelCasesSource]: RegleSchemaFieldStatus<WebitelCasesSource[K]>
        };
    }>();
    
    // ...
</script>