96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<button
|
||
|
|
v-if="hasPermission"
|
||
|
|
v-bind="$attrs"
|
||
|
|
:class="buttonClass"
|
||
|
|
:disabled="disabled"
|
||
|
|
@click="handleClick"
|
||
|
|
>
|
||
|
|
<slot>{{ buttonText }}</slot>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
interface Props {
|
||
|
|
/** 버튼 코드 (권한 체크용) */
|
||
|
|
buttonCode: string;
|
||
|
|
/** 버튼 비활성화 여부 */
|
||
|
|
disabled?: boolean;
|
||
|
|
/** 추가 CSS 클래스 */
|
||
|
|
class?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Emits {
|
||
|
|
/** 클릭 이벤트 */
|
||
|
|
(e: "click", event: MouseEvent): void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
disabled: false,
|
||
|
|
class: "",
|
||
|
|
});
|
||
|
|
|
||
|
|
const emit = defineEmits<Emits>();
|
||
|
|
|
||
|
|
// 권한 체크 - usePermission composable만 사용
|
||
|
|
const permission = usePermission();
|
||
|
|
const hasPermission = computed(() =>
|
||
|
|
permission.hasComponentPermission(props.buttonCode)
|
||
|
|
);
|
||
|
|
|
||
|
|
// 버튼 텍스트 가져오기 - usePermission composable 사용
|
||
|
|
const buttonText = computed(() => {
|
||
|
|
const component = permission.getResourceByCode(props.buttonCode);
|
||
|
|
return component?.name || props.buttonCode;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 버튼 클래스 계산
|
||
|
|
const buttonClass = computed(() => {
|
||
|
|
const baseClass = "permission-button";
|
||
|
|
const disabledClass = props.disabled ? "permission-button--disabled" : "";
|
||
|
|
const customClass = props.class || "";
|
||
|
|
|
||
|
|
return [baseClass, disabledClass, customClass].filter(Boolean).join(" ");
|
||
|
|
});
|
||
|
|
|
||
|
|
// 클릭 이벤트 처리
|
||
|
|
const handleClick = (event: MouseEvent) => {
|
||
|
|
if (!props.disabled && hasPermission.value) {
|
||
|
|
emit("click", event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.permission-button {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
background-color: #3b82f6;
|
||
|
|
color: white;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s ease-in-out;
|
||
|
|
outline: none;
|
||
|
|
user-select: none;
|
||
|
|
min-height: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.permission-button:hover:not(.permission-button--disabled) {
|
||
|
|
background-color: #2563eb;
|
||
|
|
}
|
||
|
|
|
||
|
|
.permission-button:focus {
|
||
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.permission-button--disabled {
|
||
|
|
opacity: 0.6;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
</style>
|