LWC 조건 판단 어셈블리 자체 제작

1. 목적
LWC의 조건판단은 if:true 또는 if:false일 수밖에 없기 때문에 이번에는 true와 false에 얽매이지 않고 복잡한 조건을 판단할 수 있는 부품을 제작할 예정이다.
2. 소스 구성도

lwc
├─conditionJudge
└─conditionJudgeContainer

conditionJudge

conditionJudge.html

<template>
    <template if:true={result}>
        <slot></slot>
    </template>
</template>

conditionJudge.js

import { LightningElement, api, track } from 'lwc';
export default class ConditionJudge extends LightningElement {

    // eq,noteq,gt:>,ge:>=,lt:<,le<:=,contains,not_contains 
    @api condition
    @api leftParam
    @api rightParam
    @track result

    connectedCallback() {
        const { condition, leftParam, rightParam } = this;
        try {
            // console.log(rightParam)
            switch (condition) {
                case "eq":
                    this.result = parseInt(leftParam) === parseInt(rightParam)
                    break;
                case "noteq":
                    this.result = parseInt(leftParam) !== parseInt(rightParam)
                    break;
                case "gt":
                    this.result = parseInt(leftParam) > parseInt(rightParam)
                    break;
                case "ge":
                    this.result = parseInt(leftParam) >= parseInt(rightParam)
                    break;
                case "lt":
                    this.result = parseInt(leftParam) < parseInt(rightParam)
                    break;
                case "le":
                    this.result = parseInt(leftParam) <= parseInt(rightParam)
                    break;
                case "contains":
                    this.result = leftParam.split(",").indexOf(String(rightParam)) !== -1
                    break;
                case "not_contains":
                    this.result = leftParam.split(",").indexOf(String(rightParam)) === -1
                    break;
                default:
                    break;
            }
        } catch (e) {
            console.error(e);
        }
    }
}

conditionJudge.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

conditionJudgeContainer

conditionJudgeContainer.html

<template>
    <!-- 単一の判断 -->
    単一の判断：
    <div class="slds-card" style="width:500px">
        <c-condition-judge condition="eq" left-param="1" right-param="1">
            <div class="slds-grid">
                <div class="slds-col" style="background-color: aliceblue;">等しい条件</div>
            </div>
        </c-condition-judge>
        <c-condition-judge condition="gt" left-param="2" right-param="1">
            <div class="slds-grid">
                <div class="slds-col" style="background-color: aliceblue;">大きい条件</div>
            </div>
        </c-condition-judge>
        <c-condition-judge condition="lt" left-param="1" right-param="2">
            <div class="slds-grid">
                <div class="slds-col" style="background-color: aliceblue;">小さい条件</div>
            </div>

        </c-condition-judge>
        <c-condition-judge condition="gt" left-param="2" right-param="1">
            <div class="slds-grid">
                <div class="slds-col" style="background-color: aliceblue;">大きいまたは等しい条件</div>
            </div>
        </c-condition-judge>

        <c-condition-judge condition="lt" left-param="1" right-param="2">
            <div class="slds-grid">
                <div class="slds-col" style="background-color: aliceblue;">小さいまたは等しい条件</div>
            </div>
        </c-condition-judge>

        <c-condition-judge condition="contains" left-param="1,2,3,4" right-param="2">
            <div class="slds-grid">
                <div class="slds-col" style="background-color: aliceblue;">含む条件</div>
            </div>
        </c-condition-judge>

        <c-condition-judge condition="contains" left-param="1,2,3,4" right-param="5">
            <div class="slds-grid">
                <div class="slds-col" style="background-color: aliceblue;">含まない条件</div>
            </div>
        </c-condition-judge>
    </div>
    <!-- 複雑の判断 -->
    複雑の判断：
    <div class="slds-card" style="width:500px">
        <c-condition-judge condition="noteq" left-param="1" right-param={targetValue}>

            <c-condition-judge condition="lt" left-param="12" right-param={targetValue}>
                12より小さい
            </c-condition-judge>
            <c-condition-judge condition="ge" left-param="12" right-param={targetValue}>
                12より大きいまたは等しい
            </c-condition-judge>
        </c-condition-judge>
    </div>
</template>

conditionJudgeContainer.js

import { LightningElement } from 'lwc';

export default class ConditionJudgeContainer extends LightningElement {
    targetValue = 12;
}

conditionJudgeContainer.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

3. 롤업으로 동작 확인
condition JudgeContaainer를 마우스 오른쪽 버튼으로 클릭하고 SFDX:Preview Component Locally
선택Use Desktop Browser
서버 시작, 브라우저 자동 열기