Container #

VmContainer #

input element로 구성된 영역인 조회조건과 같은 폼입력 영역에 사용한다.
style 기본값은 display:flex, flex-wrap: wrap이 적용된다.
VmCell만 사용하면 줄바꿈된다. 강제로 줄바꿈 하려면 VmRow와 조합한다.

• Props
  • col? - string | number
• Emits
  • 없음
• attrs
  • 너비지정. class="w-1/3".
• Slots
  • VmRow 또는 VmCell을 여러개 배치한다.
• expose

  const defineExpose: <{
    required: (
      data?: {  [index: string]: any }, 
      option?: {
        errorMsg: boolean;
        fn: (data: any, element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement) => void
      }
    ) => Promise<boolean | {
        msg: string;
        element: any;
    }[]>;
    focus: (name: string) => void;
    getElement: (name: string) => HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null | undefined
    element?: HTMLDivElement | undefined
  }>
  

  • required 하위의 Vm컴포넌트에서 required가 설정된 것의 값이 입력되었는지 검사한다.

      import VmContainerVue from "@/core/components/container/VmContainer.vue"
      const containerRef = ref<InstanceType<typeof VmContainerVue>>()
      async function query() {
        await containerRef.value.required()
      }
    

  • focus name 항목에 포커스 한다.
  • getElement name을 가진 HTMLElement를 반환한다.
  • element container div 자체를 참조한다.
• Usage

  기본으로 VmContainer와 VmCell만 사용해서 가로 방향 배치
  <VmContainer>
    <VmCell></VmCell>
    ...
  </VmContainer>
  
  VmRow로 행을 나누면서 가로 방향 배치
  <VmContainer>
    <VmRow>
      <VmCell></VmCell>
      <VmCell></VmCell>
      <VmCell></VmCell>
    </VmRow>
  </VmContainer>
  
  col 옵션으로 열맞춤
  <VmContainer col="칸수">
    <VmRow>
      <VmCell></VmCell>
      <VmCell></VmCell>
      <VmCell></VmCell>
    </VmRow>
  </VmContainer>
  

• Sample
  • 샘플 > 배치 > VmContainer
  • @/views-sample/arrange/VmContainerDoc.vue

VmContainerToggle #

평소에는 접혀 있다가 펼침버튼을 누르면 펼쳐지는 컴포넌트.
조회조건에서 항상 보이는 부분 아래쪽에 더보기 할 영역에 사용.
slot으로 새로운 VmContainer를 작성한다.

• Props
  • expand? - boolean 처음부터 펼침여부
• Emits
  • 없음
• attrs
  • class="w-1/3"로 너비 지정 가능
• Slots
  • VmContainer 외에 다른 컴포넌트, element 가능.
• Usage

기본 접힘 상태
<VmContainerToggle>
  <VmContainer>
  </VmContainer>
</VmContainerToggle>

펼쳐진 상태로 시작
<VmContainerToggle expand>
  <VmContainer>
  </VmContainer>
</VmContainerToggle>

VmRow #

VmContainer 에서 행을 나눠준다.

• Props
  • 없음
• Emits
  • 없음
• attrs
  • 너비지정. class="w-1/3".
• Slots
  • VmCell을 여러개 배치한다.

VmCell #

VmContainer에서 내부에 label과 input element를 가지는 입력영역의 셀을 생성한다.
기본값으로 셀의 위쪽에 라벨, 아래에 입력항목을 배치해준다.
style 기본값은 display:flex, flex-direction: column 이다.

• Props
  • label? - string 입력항목 제목
  • isRequire? - boolean 필수입력 여부
  • row? - boolean. 내부 아이템을 가로로 배치한다.
• Emits
  • 없음
• Slots
  • VmSearch등의 입력 컴포넌트
• Usage

  기본값. 셀 내부 세로 방향. 위쪽에는 라벨, 아래쪽에는 입력항목
  <VmContainer>
    <VmCell>
      <VmSearch label="위쪽 라벨" v-model=""/>
    </VmCell>
  </VmContainer>
  
  셀 내부 가로 방향. 왼쪽 라벨, 오른쪽 입력항목
  마지막 셀에 버튼은 가로 배치
  <VmContainer>
    <VmCell row>
      <VmSearch label="왼쪽 라벨" v-model=""/>
    </VmCell>
    <VmCell row>
      <VmButton />
      <VmButtonQuery />
      <VmButtonSave />
    </VmCell>
    <VmCell row>
      <VmLabel class="w-full">마지막 cell 버튼 VmLabel class="w-full"</VmLabel>
      <VmButton />
      <VmButtonQuery />
      <VmButtonSave />
    </VmCell>
  </VmContainer>
  
  내부 컴포넌트에 라벨을 설정하기 어려울 경우 VmCell에 label과 isRequire로 필수여부 표시
  <VmContainer>
    <VmCell>
      <VmSearch v-model="none" placeholder="label없음" />
    </VmCell>
    <VmCell label="VmCell label=''">
      <VmSearch v-model="none" />
    </VmCell>
    <VmCell>
      <VmLabel>제목</VmLabel>
      <VmSearch v-model="none" />
    </VmCell>
  </VmContainer>
  

VmLabel #

VmCell 내부에서 제목을 생성해준다.

• Props
  • isRequire? - boolean 필수입력 여부
• Emits
  • 없음
• Slots
  • 제목 텍스트

VmLineBreak #

위쪽 컴포넌트와 아래쪽 컴포넌트 사이에 여백을 생성한다.

• Props
  • 없음
• Emits
  • 없음
• Slots
  • 없음
• Usage

<VmContainer>
위쪽 컴포넌트
</VmContainer>

<VmLineBreak /> <!-- 중간에 여백 -->

<VmGrid >
아래쪽 컴포넌트
</VmGrid>

VmVertLine #

조회조건에서 셀사이에 | 표시로 칸나눔 표시한다.

회계 > 경비승인관리.
ExpenseApprovalManagement.vue

• Props
  • 없음
• Emits
  • 없음
• Slots
  • 없음
• Usage

  <VmContainer>
    <VmCell>
      <VmRadio
        label="고용형태"
        radio-name="hireType"
        v-model="condData.hireType"
        :items="[{ code: '1', name: '정규직' }, { code: '2', name: '비정규직' }]"
      />
    </VmCell>
    <VmVertLine />
    <VmCell>
      <VmCheckbox v-model="condData.excludeComplete" item-label="완료건 제외" />
    </VmCell>
  </VmContainer>