diff --git a/.changeset/sixty-rocks-sin.md b/.changeset/sixty-rocks-sin.md new file mode 100644 index 000000000..3a12a0af2 --- /dev/null +++ b/.changeset/sixty-rocks-sin.md @@ -0,0 +1,6 @@ +--- +"@wizleap-inc/wiz-ui-next": minor +"@wizleap-inc/wiz-ui-react": minor +--- + +Feat(search-input): ラベルの位置を揃える diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue index e78953fbe..edf714613 100644 --- a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue +++ b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue @@ -107,6 +107,7 @@ align="center" nowrap gap="xs2" + :pl="!allOptionsHaveChildren && !singleSelect ? 'lg' : 'no'" >
{{ item.label }} @@ -303,6 +304,9 @@ const activeItem = ref(); const activeItemIndex = ref(null); const hasFocus = ref(false); const isBorder = ref(false); +const allOptionsHaveChildren = props.options.every( + (option) => !!option.children +); const valueToOption = computed(() => { const map = new Map(); diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue index 6d6a5fcdf..8711112ba 100644 --- a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue +++ b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue @@ -47,6 +47,11 @@ align="center" nowrap gap="xs2" + :pl=" + !allOptionsHaveChildren(option.children) && !singleSelect + ? 'lg' + : 'no' + " >
{{ item.label }} @@ -192,6 +197,8 @@ const activeItemIndex = ref(null); const ITEM_HEIGHT = 44; const DIVIDER_HEIGHT = 0.8; +const allOptionsHaveChildren = (options: SearchInputOption[]) => + options.every((option) => !!option.children); const checkValues = computed({ get: () => props.modelValue, diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx index 57973dacc..7e9f06291 100644 --- a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx +++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx @@ -68,6 +68,8 @@ export const SearchPopupPanel: FC = ({ setActiveValue(null); }, [options]); + const allOptionsHaveChildren = options.every((option) => !!option.children); + return ( <>
= ({ )} >