{"version":3,"file":"JProgress.vue.cjs","sources":["../../../../src/components/atoms/JProgress.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport Progress from '@/components/shadcn/Progress.vue'\r\n\r\ntype StyleType =\r\n  | 'default'   // 기본 스타일\r\n  | 'primary'   // 강조 스타일 (파랑)\r\n  | 'success'   // 성공 스타일 (초록)\r\n  | 'warning'   // 경고 스타일 (주황)\r\n  | 'danger'    // 위험 스타일 (빨강)\r\n\r\ntype SizeType = 'xs' | 'sm' | 'md' | 'lg'\n\r\ntype VariantType = 'linear' | 'circular'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    value?: number\r\n    max?: number\r\n    class?: string\r\n    /** 스타일 프리셋 */\r\n    styletype?: StyleType\r\n    /** 크기 프리셋 */\r\n    size?: SizeType\r\n    /** 라벨 텍스트 */\r\n    label?: string\r\n    /** 진행률 퍼센트 표시 여부 */\r\n    showLabel?: boolean\r\n    /** 설명 텍스트 */\r\n    description?: string\r\n    /** 프로그레스 바 모양 */\r\n    variant?: VariantType\r\n    /** 무한 로딩 애니메이션 여부 */\r\n    indeterminate?: boolean\r\n  }>(),\r\n  {\n    value: 0,\n    max: 100,\n    styletype: 'default',\n    size: 'sm',\n    label: '',\n    showLabel: true,\n    description: '',\n    variant: 'linear',\n    indeterminate: false,\n  },\r\n)\r\n\r\n/**\r\n * styletype -> class 매핑\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\r\n  default: { class: '' },\r\n  primary: { \r\n    class: '[&>div]:bg-blue-500',\r\n  },\r\n  success: { \r\n    class: '[&>div]:bg-green-500',\r\n  },\r\n  warning: { \r\n    class: '[&>div]:bg-amber-500',\r\n  },\r\n  danger: { \r\n    class: '[&>div]:bg-red-500',\r\n  },\r\n}\r\n\r\n/**\r\n * size -> class 매핑\r\n */\r\nconst SIZE_PRESETS: Record<SizeType, { class: string }> = {\n  xs: { \n    class: 'h-1',\n  },\n  sm: { \n    class: 'h-2',\n  },\n  md: { \n    class: 'h-3',\n  },\n  lg: { \n    class: 'h-4',\n  },\n}\n\r\n/**\r\n * variant -> size 매핑 (circular용)\r\n */\r\nconst CIRCULAR_SIZE_PRESETS: Record<SizeType, { size: number }> = {\n  xs: { \n    size: 48,\n  },\n  sm: { \n    size: 60,\n  },\n  md: { \n    size: 72,\n  },\n  lg: { \n    size: 88,\n  },\n}\r\n\r\n/** 진행률 퍼센트 계산 */\r\nconst percentage = computed(() => {\r\n  return Math.round((props.value! / props.max!) * 100)\r\n})\r\n\r\n/** 최종 바인딩: 직접 넘긴 class가 있으면 styletype과 size 기본값과 병합 */\r\nconst mapped = computed(() => {\r\n  const stylePreset = STYLE_PRESETS[props.styletype!]\r\n  const sizePreset = SIZE_PRESETS[props.size!]\r\n  const finalClass = [stylePreset.class, sizePreset.class, props.class].filter(Boolean).join(' ')\r\n  \r\n  return {\r\n    modelValue: props.value,\r\n    max: props.max,\r\n    class: finalClass,\r\n  }\r\n})\r\n\r\n/** 원형 프로그레스 바 스타일 계산 */\r\nconst circularStyle = computed(() => {\r\n  const sizePreset = CIRCULAR_SIZE_PRESETS[props.size!]\r\n  \r\n  // 색상 추출 - linear와 동일한 색상 사용\r\n  let color = '#000000' // default: 검은색 (linear의 기본 색상과 동일)\r\n  if (props.styletype === 'primary') color = '#3b82f6' // blue-500\r\n  else if (props.styletype === 'success') color = '#10b981' // green-500\r\n  else if (props.styletype === 'warning') color = '#f59e0b' // amber-500\r\n  else if (props.styletype === 'danger') color = '#ef4444' // red-500\r\n  \r\n  return {\r\n    size: sizePreset.size,\r\n    color,\r\n  }\r\n})\r\n\r\n/** indeterminate 상태에서 표시할 텍스트 */\r\nconst indeterminateText = computed(() => {\r\n  return props.indeterminate ? '로딩 중...' : `${percentage.value}%`\r\n})\r\n\r\n/** Linear indeterminate 색상 계산 */\r\nconst linearIndeterminateColor = computed(() => {\r\n  let color = '#000000' // default: 검은색\r\n  if (props.styletype === 'primary') color = '#3b82f6' // blue-500\r\n  else if (props.styletype === 'success') color = '#10b981' // green-500\r\n  else if (props.styletype === 'warning') color = '#f59e0b' // amber-500\r\n  else if (props.styletype === 'danger') color = '#ef4444' // red-500\r\n  \r\n  return color\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div class=\"space-y-2\">\r\n    <!-- Linear Progress용 상단 라벨 -->\r\n    <div v-if=\"props.variant === 'linear' && (props.label || props.showLabel || props.indeterminate)\" class=\"flex justify-between items-center\">\r\n      <p v-if=\"props.label\" class=\"text-sm font-medium text-gray-700\">\r\n        {{ props.label }}\r\n      </p>\r\n      <p v-if=\"props.showLabel || props.indeterminate\" class=\"text-sm font-medium text-gray-600\">\r\n        {{ indeterminateText }}\r\n      </p>\r\n    </div>\r\n    \r\n    <!-- Circular Progress용 상단 라벨 -->\r\n    <div v-if=\"props.variant === 'circular' && props.label\" class=\"text-center mb-2\">\r\n      <p class=\"text-sm font-medium text-gray-700\">{{ props.label }}</p>\r\n    </div>\r\n    \r\n    <!-- Linear Progress -->\r\n    <div v-if=\"props.variant === 'linear'\">\r\n      <!-- Indeterminate Linear -->\r\n      <div v-if=\"props.indeterminate\" class=\"relative overflow-hidden rounded-full bg-gray-200\" :class=\"SIZE_PRESETS[props.size!].class\">\r\n        <div \r\n          class=\"absolute h-full w-full animate-pulse\"\r\n          :style=\"{ backgroundColor: linearIndeterminateColor }\"\r\n        />\r\n        <div \r\n          class=\"absolute h-full w-1/3 animate-[indeterminate-linear_2s_infinite]\"\r\n          :style=\"{ backgroundColor: linearIndeterminateColor }\"\r\n        />\r\n      </div>\r\n      <!-- Determinate Linear -->\r\n      <Progress v-else v-bind=\"mapped\" />\r\n    </div>\r\n    \r\n    <!-- Circular Progress -->\r\n    <div v-else-if=\"props.variant === 'circular'\" class=\"flex justify-center\">\r\n      <div class=\"relative\" :style=\"{ width: circularStyle.size + 'px', height: circularStyle.size + 'px' }\">\r\n        <!-- Indeterminate Circular -->\r\n        <div v-if=\"props.indeterminate\">\r\n          <svg class=\"w-full h-full animate-spin\" viewBox=\"0 0 100 100\">\r\n            <circle\r\n              cx=\"50\"\r\n              cy=\"50\"\r\n              r=\"45\"\r\n              stroke=\"#e5e7eb\"\r\n              stroke-width=\"8\"\r\n              fill=\"none\"\r\n            />\r\n            <circle\r\n              cx=\"50\"\r\n              cy=\"50\"\r\n              r=\"45\"\r\n              :stroke=\"circularStyle.color\"\r\n              stroke-width=\"8\"\r\n              fill=\"none\"\r\n              stroke-linecap=\"round\"\r\n              stroke-dasharray=\"70 213\"\r\n              stroke-dashoffset=\"0\"\r\n              class=\"animate-[indeterminate-circular_2s_ease-in-out_infinite]\"\r\n            />\r\n          </svg>\r\n        </div>\r\n        <!-- Determinate Circular -->\r\n        <div v-else>\r\n          <svg class=\"w-full h-full transform -rotate-90\" viewBox=\"0 0 100 100\">\r\n            <!-- Background circle -->\r\n            <circle\r\n              cx=\"50\"\r\n              cy=\"50\"\r\n              r=\"45\"\r\n              stroke=\"#e5e7eb\"\r\n              stroke-width=\"8\"\r\n              fill=\"none\"\r\n            />\r\n            <!-- Progress circle -->\r\n            <circle\r\n              cx=\"50\"\r\n              cy=\"50\"\r\n              r=\"45\"\r\n              :stroke=\"circularStyle.color\"\r\n              stroke-width=\"8\"\r\n              fill=\"none\"\r\n              stroke-linecap=\"round\"\r\n              :stroke-dasharray=\"283\"\r\n              :stroke-dashoffset=\"283 - (283 * percentage / 100)\"\r\n              class=\"transition-all duration-300 ease-in-out\"\r\n            />\r\n          </svg>\r\n        </div>\r\n        <!-- Center text -->\r\n        <div v-if=\"props.showLabel || props.indeterminate\" class=\"absolute inset-0 flex items-center justify-center\">\r\n          <span class=\"text-sm font-medium text-gray-700\">{{ indeterminateText }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Circular Progress용 하단 description -->\r\n    <div v-if=\"props.variant === 'circular' && props.description\" class=\"text-center mt-2\">\r\n      <p class=\"text-xs text-gray-500\">{{ props.description }}</p>\r\n    </div>\r\n    \r\n    <!-- Linear Progress용 하단 description -->\r\n    <p v-if=\"props.variant === 'linear' && props.description\" class=\"text-xs text-gray-500\">\r\n      {{ props.description }}\r\n    </p>\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n@keyframes indeterminate-linear {\r\n  0% {\r\n    transform: translateX(-100%);\r\n  }\r\n  100% {\r\n    transform: translateX(400%);\r\n  }\r\n}\r\n\r\n@keyframes indeterminate-circular {\r\n  0% {\r\n    stroke-dasharray: 70 213;\r\n    stroke-dashoffset: 0;\r\n  }\r\n  50% {\r\n    stroke-dasharray: 140 143;\r\n    stroke-dashoffset: -70;\r\n  }\r\n  100% {\r\n    stroke-dasharray: 70 213;\r\n    stroke-dashoffset: -213;\r\n  }\r\n}\r\n</style>\r\n"],"names":["props","__props","STYLE_PRESETS","SIZE_PRESETS","CIRCULAR_SIZE_PRESETS","percentage","computed","mapped","stylePreset","sizePreset","finalClass","circularStyle","color","indeterminateText","linearIndeterminateColor","_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4","_hoisted_5","_createElementVNode","_hoisted_6","_hoisted_7","_normalizeClass","_createBlock","Progress","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_12","_hoisted_13","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19"],"mappings":"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"}