@j-solution/components 1.6.0 → 1.7.0

package/components/molecules/JBreadcrumb.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JBreadcrumb.vue.cjs","sources":["../../../../src/components/molecules/JBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\nimport JLink from '@/components/atoms/JLink.vue'\r\nimport { cn } from '@/lib/utils'\r\n\r\n/**\r\n * JBreadcrumb - 브레드크럼 네비게이션 컴포넌트 (molecules)\r\n * Breadcrumb Navigation Component\r\n * \r\n * @description\r\n * 페이지의 네비게이션 경로를 표시하는 브레드크럼 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 경로 아이템 표시\r\n * - 클릭 가능한 링크 지원\r\n * - 아이콘 지원\r\n * - 커스터마이징 가능한 구분자\r\n * \r\n * @example\r\n * ```vue\r\n * <JBreadcrumb \r\n *   :items=\"[\r\n *     { label: '홈', href: '/' },\r\n *     { label: '제품', href: '/products' },\r\n *     { label: '상세' }\r\n *   ]\"\r\n * />\r\n * ```\r\n */\r\n\r\nexport type BreadcrumbItem = {\r\n  /** 라벨 텍스트 */\r\n  label: string\r\n  /** 링크 URL (없으면 텍스트만 표시) */\r\n  href?: string\r\n  /** 아이콘 이름 */\r\n  icon?: string\r\n  /** 클릭 핸들러 */\r\n  onClick?: () => void\r\n}\r\n\r\ntype StyleType =\r\n  | 'default'   // 기본 스타일\r\n  | 'minimal'   // 최소 스타일 (작은 크기, 얇은 구분자)\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /** 브레드크럼 아이템 목록 */\r\n    items: BreadcrumbItem[]\r\n    /** 구분자 (기본값: /) */\r\n    separator?: string\r\n    /** 스타일 타입 */\r\n    styletype?: StyleType\r\n    /** 추가 CSS 클래스 */\r\n    class?: string\r\n  }>(),\r\n  {\r\n    separator: '/',\r\n    styletype: 'default',\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  /** 아이템 클릭 이벤트 */\r\n  itemClick: [item: BreadcrumbItem, index: number]\r\n}>()\r\n\r\n/**\r\n * 스타일 프리셋\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  containerClass: string\r\n  itemClass: string\r\n  separatorClass: string\r\n  lastItemClass: string\r\n}> = {\r\n  default: {\r\n    containerClass: 'flex items-center gap-2 px-4 py-2',\r\n    itemClass: 'text-sm text-muted-foreground hover:text-foreground transition-colors',\r\n    separatorClass: 'text-muted-foreground/50 text-sm',\r\n    lastItemClass: 'text-foreground font-medium',\r\n  },\r\n  minimal: {\r\n    containerClass: 'flex items-center gap-1.5 px-2 py-1',\r\n    itemClass: 'text-xs text-muted-foreground hover:text-foreground transition-colors',\r\n    separatorClass: 'text-muted-foreground/40 text-xs',\r\n    lastItemClass: 'text-foreground font-medium',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 아이템 클릭 핸들러\r\n */\r\nconst handleItemClick = (item: BreadcrumbItem, index: number) => {\r\n  item.onClick?.()\r\n  emit('itemClick', item, index)\r\n}\r\n\r\n/**\r\n * 마지막 아이템인지 확인\r\n */\r\nconst isLastItem = (index: number) => {\r\n  return index === props.items.length - 1\r\n}\r\n</script>\r\n\r\n<template>\r\n  <nav \r\n    :class=\"cn(preset.containerClass, props.class)\"\r\n    aria-label=\"브레드크럼 네비게이션\"\r\n  >\r\n    <ol class=\"flex items-center gap-2 list-none p-0 m-0\">\r\n      <li\r\n        v-for=\"(item, index) in items\"\r\n        :key=\"index\"\r\n        class=\"flex items-center gap-2\"\r\n      >\r\n        <!-- 아이템 -->\r\n        <span\r\n          v-if=\"isLastItem(index) || (!item.href && !item.onClick)\"\r\n          :class=\"cn(preset.itemClass, preset.lastItemClass, isLastItem(index) && 'cursor-default')\"\r\n        >\r\n          <!-- 아이콘 -->\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1\"\r\n          />\r\n          {{ item.label }}\r\n        </span>\r\n        \r\n        <JLink\r\n          v-else\r\n          :href=\"item.href\"\r\n          :class=\"cn(preset.itemClass)\"\r\n          @click=\"handleItemClick(item, index)\"\r\n        >\r\n          <!-- 아이콘 -->\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1\"\r\n          />\r\n          {{ item.label }}\r\n        </JLink>\r\n\r\n        <!-- 구분자 (마지막 아이템이 아니면 표시) -->\r\n        <span\r\n          v-if=\"!isLastItem(index)\"\r\n          :class=\"preset.separatorClass\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <JIcon\r\n            v-if=\"separator === 'chevron'\"\r\n            name=\"chevronRight\"\r\n            size=\"sm\"\r\n          />\r\n          <span v-else>{{ separator }}</span>\r\n        </span>\r\n      </li>\r\n    </ol>\r\n  </nav>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","STYLE_PRESETS","preset","computed","handleItemClick","item","index","isLastItem","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_openBlock","_Fragment","_renderList","cn","_createBlock","JIcon","_toDisplayString","JLink","$event"],"mappings":"4cA8CA,MAAMA,EAAQC,EAiBRC,EAAOC,EAQPC,EAKD,CACH,QAAS,CACP,eAAgB,oCAChB,UAAW,wEACX,eAAgB,mCAChB,cAAe,6BAAA,EAEjB,QAAS,CACP,eAAgB,sCAChB,UAAW,wEACX,eAAgB,mCAChB,cAAe,6BAAA,CACjB,EAGIC,EAASC,EAAAA,SAAS,IACfF,EAAcJ,EAAM,SAAS,GAAKI,EAAc,OACxD,EAKKG,EAAkB,CAACC,EAAsBC,IAAkB,CAC/DD,EAAK,UAAA,EACLN,EAAK,YAAaM,EAAMC,CAAK,CAC/B,EAKMC,EAAcD,GACXA,IAAUT,EAAM,MAAM,OAAS,8BAKtCW,EAAAA,mBAwDM,MAAA,CAvDH,MAAKC,EAAAA,eAAEC,EAAAA,YAAGR,EAAA,MAAO,eAAgBL,EAAM,KAAK,CAAA,EAC7C,aAAW,aAAA,GAEXc,EAAAA,mBAmDK,KAnDLC,EAmDK,EAlDHC,EAAAA,UAAA,EAAA,EAAAL,EAAAA,mBAiDKM,WAAA,KAAAC,EAAAA,WAhDqBjB,EAAA,MAAK,CAArBO,EAAMC,mBADhBE,EAAAA,mBAiDK,KAAA,CA/CF,IAAKF,EACN,MAAM,yBAAA,GAIEC,EAAWD,CAAK,GAAA,CAAOD,EAAK,MAAI,CAAKA,EAAK,uBADlDG,EAAAA,mBAYO,OAAA,OAVJ,MAAKC,EAAAA,eAAEC,EAAAA,MAAAM,EAAAA,EAAA,EAAGd,EAAA,MAAO,UAAWA,EAAA,MAAO,cAAeK,EAAWD,CAAK,GAAA,gBAAA,CAAA,CAAA,GAI3DD,EAAK,oBADbY,EAAAA,YAKEC,EAAAA,QAAA,OAHC,KAAMb,EAAK,KACZ,KAAK,KACL,MAAM,MAAA,kEACN,IACFc,EAAAA,gBAAGd,EAAK,KAAK,EAAA,CAAA,CAAA,qBAGfY,EAAAA,YAcQG,EAAAA,QAAA,OAZL,KAAMf,EAAK,KACX,MAAKI,EAAAA,eAAEC,QAAAM,EAAAA,EAAA,EAAGd,EAAA,MAAO,SAAS,CAAA,EAC1B,QAAKmB,GAAEjB,EAAgBC,EAAMC,CAAK,CAAA,qBAGnC,IAKE,CAJMD,EAAK,oBADbY,EAAAA,YAKEC,EAAAA,QAAA,OAHC,KAAMb,EAAK,KACZ,KAAK,KACL,MAAM,MAAA,kEACN,IACFc,EAAAA,gBAAGd,EAAK,KAAK,EAAA,CAAA,CAAA,0CAKNE,EAAWD,CAAK,6CADzBE,EAAAA,mBAWO,OAAA,OATJ,MAAKC,EAAAA,eAAEP,EAAA,MAAO,cAAc,EAC7B,cAAY,MAAA,GAGJJ,EAAA,YAAS,yBADjBmB,EAAAA,YAIEC,EAAAA,QAAA,OAFA,KAAK,eACL,KAAK,IAAA,KAEPL,EAAAA,YAAAL,EAAAA,mBAAmC,2BAAnBV,EAAA,SAAS,EAAA,CAAA,EAAA"}
+{"version":3,"file":"JBreadcrumb.vue.cjs","sources":["../../../../src/components/molecules/JBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\nimport JLink from '@/components/atoms/JLink.vue'\r\nimport { cn } from '@/lib/utils'\r\n\r\n/**\r\n * JBreadcrumb - 브레드크럼 네비게이션 컴포넌트 (molecules)\r\n * Breadcrumb Navigation Component\r\n * \r\n * @description\r\n * 페이지의 네비게이션 경로를 표시하는 브레드크럼 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 경로 아이템 표시\r\n * - 클릭 가능한 링크 지원\r\n * - 아이콘 지원\r\n * - 커스터마이징 가능한 구분자\r\n * \r\n * @example\r\n * ```vue\r\n * <JBreadcrumb \r\n *   :items=\"[\r\n *     { label: '홈', href: '/' },\r\n *     { label: '제품', href: '/products' },\r\n *     { label: '상세' }\r\n *   ]\"\r\n * />\r\n * ```\r\n */\r\n\r\nexport type BreadcrumbItem = {\r\n  /** 라벨 텍스트 */\r\n  label: string\r\n  /** 링크 URL (없으면 텍스트만 표시) */\r\n  href?: string\r\n  /** 아이콘 이름 */\r\n  icon?: string\r\n  /** 클릭 핸들러 */\r\n  onClick?: () => void\r\n}\r\n\r\ntype StyleType =\r\n  | 'default'   // 기본 스타일\r\n  | 'minimal'   // 최소 스타일 (작은 크기, 얇은 구분자)\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /** 브레드크럼 아이템 목록 */\r\n    items: BreadcrumbItem[]\r\n    /** 구분자 (기본값: /) */\r\n    separator?: string\r\n    /** 스타일 타입 */\r\n    styletype?: StyleType\r\n    /** 추가 CSS 클래스 */\r\n    class?: string\r\n  }>(),\r\n  {\r\n    separator: '/',\r\n    styletype: 'default',\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  /** 아이템 클릭 이벤트 */\r\n  itemClick: [item: BreadcrumbItem, index: number]\r\n}>()\r\n\r\n/**\r\n * 스타일 프리셋\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  containerClass: string\r\n  itemClass: string\r\n  separatorClass: string\r\n  lastItemClass: string\r\n}> = {\r\n  default: {\n    containerClass: 'flex items-center gap-2 px-4 py-1.5',\n    itemClass: 'text-xs text-muted-foreground hover:text-foreground transition-colors',\n    separatorClass: 'text-muted-foreground/50 text-xs',\n    lastItemClass: 'text-foreground font-medium',\n  },\n  minimal: {\r\n    containerClass: 'flex items-center gap-1.5 px-2 py-1',\r\n    itemClass: 'text-xs text-muted-foreground hover:text-foreground transition-colors',\r\n    separatorClass: 'text-muted-foreground/40 text-xs',\r\n    lastItemClass: 'text-foreground font-medium',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 아이템 클릭 핸들러\r\n */\r\nconst handleItemClick = (item: BreadcrumbItem, index: number) => {\r\n  item.onClick?.()\r\n  emit('itemClick', item, index)\r\n}\r\n\r\n/**\r\n * 마지막 아이템인지 확인\r\n */\r\nconst isLastItem = (index: number) => {\r\n  return index === props.items.length - 1\r\n}\r\n</script>\r\n\r\n<template>\r\n  <nav \r\n    :class=\"cn(preset.containerClass, props.class)\"\r\n    aria-label=\"브레드크럼 네비게이션\"\r\n  >\r\n    <ol class=\"flex items-center gap-2 list-none p-0 m-0\">\r\n      <li\r\n        v-for=\"(item, index) in items\"\r\n        :key=\"index\"\r\n        class=\"flex items-center gap-2\"\r\n      >\r\n        <!-- 아이템 -->\r\n        <span\r\n          v-if=\"isLastItem(index) || (!item.href && !item.onClick)\"\r\n          :class=\"cn(preset.itemClass, preset.lastItemClass, isLastItem(index) && 'cursor-default')\"\r\n        >\r\n          <!-- 아이콘 -->\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1\"\r\n          />\r\n          {{ item.label }}\r\n        </span>\r\n        \r\n        <JLink\r\n          v-else\r\n          :href=\"item.href\"\r\n          :class=\"cn(preset.itemClass)\"\r\n          @click=\"handleItemClick(item, index)\"\r\n        >\r\n          <!-- 아이콘 -->\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1\"\r\n          />\r\n          {{ item.label }}\r\n        </JLink>\r\n\r\n        <!-- 구분자 (마지막 아이템이 아니면 표시) -->\r\n        <span\r\n          v-if=\"!isLastItem(index)\"\r\n          :class=\"preset.separatorClass\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <JIcon\r\n            v-if=\"separator === 'chevron'\"\r\n            name=\"chevronRight\"\r\n            size=\"sm\"\r\n          />\r\n          <span v-else>{{ separator }}</span>\r\n        </span>\r\n      </li>\r\n    </ol>\r\n  </nav>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","STYLE_PRESETS","preset","computed","handleItemClick","item","index","isLastItem","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_openBlock","_Fragment","_renderList","cn","_createBlock","JIcon","_toDisplayString","JLink","$event"],"mappings":"4cA8CA,MAAMA,EAAQC,EAiBRC,EAAOC,EAQPC,EAKD,CACH,QAAS,CACP,eAAgB,sCAChB,UAAW,wEACX,eAAgB,mCAChB,cAAe,6BAAA,EAEjB,QAAS,CACP,eAAgB,sCAChB,UAAW,wEACX,eAAgB,mCAChB,cAAe,6BAAA,CACjB,EAGIC,EAASC,EAAAA,SAAS,IACfF,EAAcJ,EAAM,SAAS,GAAKI,EAAc,OACxD,EAKKG,EAAkB,CAACC,EAAsBC,IAAkB,CAC/DD,EAAK,UAAA,EACLN,EAAK,YAAaM,EAAMC,CAAK,CAC/B,EAKMC,EAAcD,GACXA,IAAUT,EAAM,MAAM,OAAS,8BAKtCW,EAAAA,mBAwDM,MAAA,CAvDH,MAAKC,EAAAA,eAAEC,EAAAA,YAAGR,EAAA,MAAO,eAAgBL,EAAM,KAAK,CAAA,EAC7C,aAAW,aAAA,GAEXc,EAAAA,mBAmDK,KAnDLC,EAmDK,EAlDHC,EAAAA,UAAA,EAAA,EAAAL,EAAAA,mBAiDKM,WAAA,KAAAC,EAAAA,WAhDqBjB,EAAA,MAAK,CAArBO,EAAMC,mBADhBE,EAAAA,mBAiDK,KAAA,CA/CF,IAAKF,EACN,MAAM,yBAAA,GAIEC,EAAWD,CAAK,GAAA,CAAOD,EAAK,MAAI,CAAKA,EAAK,uBADlDG,EAAAA,mBAYO,OAAA,OAVJ,MAAKC,EAAAA,eAAEC,EAAAA,MAAAM,EAAAA,EAAA,EAAGd,EAAA,MAAO,UAAWA,EAAA,MAAO,cAAeK,EAAWD,CAAK,GAAA,gBAAA,CAAA,CAAA,GAI3DD,EAAK,oBADbY,EAAAA,YAKEC,EAAAA,QAAA,OAHC,KAAMb,EAAK,KACZ,KAAK,KACL,MAAM,MAAA,kEACN,IACFc,EAAAA,gBAAGd,EAAK,KAAK,EAAA,CAAA,CAAA,qBAGfY,EAAAA,YAcQG,EAAAA,QAAA,OAZL,KAAMf,EAAK,KACX,MAAKI,EAAAA,eAAEC,QAAAM,EAAAA,EAAA,EAAGd,EAAA,MAAO,SAAS,CAAA,EAC1B,QAAKmB,GAAEjB,EAAgBC,EAAMC,CAAK,CAAA,qBAGnC,IAKE,CAJMD,EAAK,oBADbY,EAAAA,YAKEC,EAAAA,QAAA,OAHC,KAAMb,EAAK,KACZ,KAAK,KACL,MAAM,MAAA,kEACN,IACFc,EAAAA,gBAAGd,EAAK,KAAK,EAAA,CAAA,CAAA,0CAKNE,EAAWD,CAAK,6CADzBE,EAAAA,mBAWO,OAAA,OATJ,MAAKC,EAAAA,eAAEP,EAAA,MAAO,cAAc,EAC7B,cAAY,MAAA,GAGJJ,EAAA,YAAS,yBADjBmB,EAAAA,YAIEC,EAAAA,QAAA,OAFA,KAAK,eACL,KAAK,IAAA,KAEPL,EAAAA,YAAAL,EAAAA,mBAAmC,2BAAnBV,EAAA,SAAS,EAAA,CAAA,EAAA"}

package/components/molecules/JBreadcrumb.vue.js

@@ -14,9 +14,9 @@ const L = { class: "flex items-center gap-2 list-none p-0 m-0" }, N = { key: 1 }
   setup(n, { emit: h }) {
     const m = n, y = h, x = {
       default: {
-        containerClass: "flex items-center gap-2 px-4 py-2",
-        itemClass: "text-sm text-muted-foreground hover:text-foreground transition-colors",
-        separatorClass: "text-muted-foreground/50 text-sm",
+        containerClass: "flex items-center gap-2 px-4 py-1.5",
+        itemClass: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+        separatorClass: "text-muted-foreground/50 text-xs",
         lastItemClass: "text-foreground font-medium"
       },
       minimal: {

package/components/molecules/JBreadcrumb.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBreadcrumb.vue.js","sources":["../../../../src/components/molecules/JBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\nimport JLink from '@/components/atoms/JLink.vue'\r\nimport { cn } from '@/lib/utils'\r\n\r\n/**\r\n * JBreadcrumb - 브레드크럼 네비게이션 컴포넌트 (molecules)\r\n * Breadcrumb Navigation Component\r\n * \r\n * @description\r\n * 페이지의 네비게이션 경로를 표시하는 브레드크럼 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 경로 아이템 표시\r\n * - 클릭 가능한 링크 지원\r\n * - 아이콘 지원\r\n * - 커스터마이징 가능한 구분자\r\n * \r\n * @example\r\n * ```vue\r\n * <JBreadcrumb \r\n *   :items=\"[\r\n *     { label: '홈', href: '/' },\r\n *     { label: '제품', href: '/products' },\r\n *     { label: '상세' }\r\n *   ]\"\r\n * />\r\n * ```\r\n */\r\n\r\nexport type BreadcrumbItem = {\r\n  /** 라벨 텍스트 */\r\n  label: string\r\n  /** 링크 URL (없으면 텍스트만 표시) */\r\n  href?: string\r\n  /** 아이콘 이름 */\r\n  icon?: string\r\n  /** 클릭 핸들러 */\r\n  onClick?: () => void\r\n}\r\n\r\ntype StyleType =\r\n  | 'default'   // 기본 스타일\r\n  | 'minimal'   // 최소 스타일 (작은 크기, 얇은 구분자)\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /** 브레드크럼 아이템 목록 */\r\n    items: BreadcrumbItem[]\r\n    /** 구분자 (기본값: /) */\r\n    separator?: string\r\n    /** 스타일 타입 */\r\n    styletype?: StyleType\r\n    /** 추가 CSS 클래스 */\r\n    class?: string\r\n  }>(),\r\n  {\r\n    separator: '/',\r\n    styletype: 'default',\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  /** 아이템 클릭 이벤트 */\r\n  itemClick: [item: BreadcrumbItem, index: number]\r\n}>()\r\n\r\n/**\r\n * 스타일 프리셋\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  containerClass: string\r\n  itemClass: string\r\n  separatorClass: string\r\n  lastItemClass: string\r\n}> = {\r\n  default: {\r\n    containerClass: 'flex items-center gap-2 px-4 py-2',\r\n    itemClass: 'text-sm text-muted-foreground hover:text-foreground transition-colors',\r\n    separatorClass: 'text-muted-foreground/50 text-sm',\r\n    lastItemClass: 'text-foreground font-medium',\r\n  },\r\n  minimal: {\r\n    containerClass: 'flex items-center gap-1.5 px-2 py-1',\r\n    itemClass: 'text-xs text-muted-foreground hover:text-foreground transition-colors',\r\n    separatorClass: 'text-muted-foreground/40 text-xs',\r\n    lastItemClass: 'text-foreground font-medium',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 아이템 클릭 핸들러\r\n */\r\nconst handleItemClick = (item: BreadcrumbItem, index: number) => {\r\n  item.onClick?.()\r\n  emit('itemClick', item, index)\r\n}\r\n\r\n/**\r\n * 마지막 아이템인지 확인\r\n */\r\nconst isLastItem = (index: number) => {\r\n  return index === props.items.length - 1\r\n}\r\n</script>\r\n\r\n<template>\r\n  <nav \r\n    :class=\"cn(preset.containerClass, props.class)\"\r\n    aria-label=\"브레드크럼 네비게이션\"\r\n  >\r\n    <ol class=\"flex items-center gap-2 list-none p-0 m-0\">\r\n      <li\r\n        v-for=\"(item, index) in items\"\r\n        :key=\"index\"\r\n        class=\"flex items-center gap-2\"\r\n      >\r\n        <!-- 아이템 -->\r\n        <span\r\n          v-if=\"isLastItem(index) || (!item.href && !item.onClick)\"\r\n          :class=\"cn(preset.itemClass, preset.lastItemClass, isLastItem(index) && 'cursor-default')\"\r\n        >\r\n          <!-- 아이콘 -->\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1\"\r\n          />\r\n          {{ item.label }}\r\n        </span>\r\n        \r\n        <JLink\r\n          v-else\r\n          :href=\"item.href\"\r\n          :class=\"cn(preset.itemClass)\"\r\n          @click=\"handleItemClick(item, index)\"\r\n        >\r\n          <!-- 아이콘 -->\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1\"\r\n          />\r\n          {{ item.label }}\r\n        </JLink>\r\n\r\n        <!-- 구분자 (마지막 아이템이 아니면 표시) -->\r\n        <span\r\n          v-if=\"!isLastItem(index)\"\r\n          :class=\"preset.separatorClass\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <JIcon\r\n            v-if=\"separator === 'chevron'\"\r\n            name=\"chevronRight\"\r\n            size=\"sm\"\r\n          />\r\n          <span v-else>{{ separator }}</span>\r\n        </span>\r\n      </li>\r\n    </ol>\r\n  </nav>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","STYLE_PRESETS","preset","computed","handleItemClick","item","index","isLastItem","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_openBlock","_Fragment","_renderList","cn","_createBlock","JIcon","_toDisplayString","JLink","$event"],"mappings":";;;;;;;;;;;;;;AA8CA,UAAMA,IAAQC,GAiBRC,IAAOC,GAQPC,IAKD;AAAA,MACH,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,eAAe;AAAA,MAAA;AAAA,MAEjB,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,eAAe;AAAA,MAAA;AAAA,IACjB,GAGIC,IAASC,EAAS,MACfF,EAAcJ,EAAM,SAAS,KAAKI,EAAc,OACxD,GAKKG,IAAkB,CAACC,GAAsBC,MAAkB;AAC/D,MAAAD,EAAK,UAAA,GACLN,EAAK,aAAaM,GAAMC,CAAK;AAAA,IAC/B,GAKMC,IAAa,CAACD,MACXA,MAAUT,EAAM,MAAM,SAAS;2BAKtCW,EAwDM,OAAA;AAAA,MAvDH,OAAKC,EAAEC,KAAGR,EAAA,MAAO,gBAAgBL,EAAM,KAAK,CAAA;AAAA,MAC7C,cAAW;AAAA,IAAA;MAEXc,EAmDK,MAnDLC,GAmDK;AAAA,SAlDHC,EAAA,EAAA,GAAAL,EAiDKM,GAAA,MAAAC,EAhDqBjB,EAAA,OAAK,CAArBO,GAAMC,YADhBE,EAiDK,MAAA;AAAA,UA/CF,KAAKF;AAAA,UACN,OAAM;AAAA,QAAA;UAIEC,EAAWD,CAAK,KAAA,CAAOD,EAAK,QAAI,CAAKA,EAAK,gBADlDG,EAYO,QAAA;AAAA;YAVJ,OAAKC,EAAEC,EAAAM,CAAA,EAAGd,EAAA,MAAO,WAAWA,EAAA,MAAO,eAAeK,EAAWD,CAAK,KAAA,gBAAA,CAAA;AAAA,UAAA;YAI3DD,EAAK,aADbY,EAKEC,GAAA;AAAA;cAHC,MAAMb,EAAK;AAAA,cACZ,MAAK;AAAA,cACL,OAAM;AAAA,YAAA;cACN,MACFc,EAAGd,EAAK,KAAK,GAAA,CAAA;AAAA,UAAA,eAGfY,EAcQG,GAAA;AAAA;YAZL,MAAMf,EAAK;AAAA,YACX,OAAKI,EAAEC,EAAAM,CAAA,EAAGd,EAAA,MAAO,SAAS,CAAA;AAAA,YAC1B,SAAK,CAAAmB,MAAEjB,EAAgBC,GAAMC,CAAK;AAAA,UAAA;uBAGnC,MAKE;AAAA,cAJMD,EAAK,aADbY,EAKEC,GAAA;AAAA;gBAHC,MAAMb,EAAK;AAAA,gBACZ,MAAK;AAAA,gBACL,OAAM;AAAA,cAAA;gBACN,MACFc,EAAGd,EAAK,KAAK,GAAA,CAAA;AAAA,YAAA;;;UAKNE,EAAWD,CAAK,sBADzBE,EAWO,QAAA;AAAA;YATJ,OAAKC,EAAEP,EAAA,MAAO,cAAc;AAAA,YAC7B,eAAY;AAAA,UAAA;YAGJJ,EAAA,cAAS,kBADjBmB,EAIEC,GAAA;AAAA;cAFA,MAAK;AAAA,cACL,MAAK;AAAA,YAAA,OAEPL,KAAAL,EAAmC,aAAnBV,EAAA,SAAS,GAAA,CAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"JBreadcrumb.vue.js","sources":["../../../../src/components/molecules/JBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport JIcon from '@/components/atoms/JIcon.vue'\r\nimport JLink from '@/components/atoms/JLink.vue'\r\nimport { cn } from '@/lib/utils'\r\n\r\n/**\r\n * JBreadcrumb - 브레드크럼 네비게이션 컴포넌트 (molecules)\r\n * Breadcrumb Navigation Component\r\n * \r\n * @description\r\n * 페이지의 네비게이션 경로를 표시하는 브레드크럼 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 경로 아이템 표시\r\n * - 클릭 가능한 링크 지원\r\n * - 아이콘 지원\r\n * - 커스터마이징 가능한 구분자\r\n * \r\n * @example\r\n * ```vue\r\n * <JBreadcrumb \r\n *   :items=\"[\r\n *     { label: '홈', href: '/' },\r\n *     { label: '제품', href: '/products' },\r\n *     { label: '상세' }\r\n *   ]\"\r\n * />\r\n * ```\r\n */\r\n\r\nexport type BreadcrumbItem = {\r\n  /** 라벨 텍스트 */\r\n  label: string\r\n  /** 링크 URL (없으면 텍스트만 표시) */\r\n  href?: string\r\n  /** 아이콘 이름 */\r\n  icon?: string\r\n  /** 클릭 핸들러 */\r\n  onClick?: () => void\r\n}\r\n\r\ntype StyleType =\r\n  | 'default'   // 기본 스타일\r\n  | 'minimal'   // 최소 스타일 (작은 크기, 얇은 구분자)\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /** 브레드크럼 아이템 목록 */\r\n    items: BreadcrumbItem[]\r\n    /** 구분자 (기본값: /) */\r\n    separator?: string\r\n    /** 스타일 타입 */\r\n    styletype?: StyleType\r\n    /** 추가 CSS 클래스 */\r\n    class?: string\r\n  }>(),\r\n  {\r\n    separator: '/',\r\n    styletype: 'default',\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  /** 아이템 클릭 이벤트 */\r\n  itemClick: [item: BreadcrumbItem, index: number]\r\n}>()\r\n\r\n/**\r\n * 스타일 프리셋\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, {\r\n  containerClass: string\r\n  itemClass: string\r\n  separatorClass: string\r\n  lastItemClass: string\r\n}> = {\r\n  default: {\n    containerClass: 'flex items-center gap-2 px-4 py-1.5',\n    itemClass: 'text-xs text-muted-foreground hover:text-foreground transition-colors',\n    separatorClass: 'text-muted-foreground/50 text-xs',\n    lastItemClass: 'text-foreground font-medium',\n  },\n  minimal: {\r\n    containerClass: 'flex items-center gap-1.5 px-2 py-1',\r\n    itemClass: 'text-xs text-muted-foreground hover:text-foreground transition-colors',\r\n    separatorClass: 'text-muted-foreground/40 text-xs',\r\n    lastItemClass: 'text-foreground font-medium',\r\n  },\r\n}\r\n\r\nconst preset = computed(() => {\r\n  return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\r\n})\r\n\r\n/**\r\n * 아이템 클릭 핸들러\r\n */\r\nconst handleItemClick = (item: BreadcrumbItem, index: number) => {\r\n  item.onClick?.()\r\n  emit('itemClick', item, index)\r\n}\r\n\r\n/**\r\n * 마지막 아이템인지 확인\r\n */\r\nconst isLastItem = (index: number) => {\r\n  return index === props.items.length - 1\r\n}\r\n</script>\r\n\r\n<template>\r\n  <nav \r\n    :class=\"cn(preset.containerClass, props.class)\"\r\n    aria-label=\"브레드크럼 네비게이션\"\r\n  >\r\n    <ol class=\"flex items-center gap-2 list-none p-0 m-0\">\r\n      <li\r\n        v-for=\"(item, index) in items\"\r\n        :key=\"index\"\r\n        class=\"flex items-center gap-2\"\r\n      >\r\n        <!-- 아이템 -->\r\n        <span\r\n          v-if=\"isLastItem(index) || (!item.href && !item.onClick)\"\r\n          :class=\"cn(preset.itemClass, preset.lastItemClass, isLastItem(index) && 'cursor-default')\"\r\n        >\r\n          <!-- 아이콘 -->\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1\"\r\n          />\r\n          {{ item.label }}\r\n        </span>\r\n        \r\n        <JLink\r\n          v-else\r\n          :href=\"item.href\"\r\n          :class=\"cn(preset.itemClass)\"\r\n          @click=\"handleItemClick(item, index)\"\r\n        >\r\n          <!-- 아이콘 -->\r\n          <JIcon\r\n            v-if=\"item.icon\"\r\n            :name=\"item.icon\"\r\n            size=\"sm\"\r\n            class=\"mr-1\"\r\n          />\r\n          {{ item.label }}\r\n        </JLink>\r\n\r\n        <!-- 구분자 (마지막 아이템이 아니면 표시) -->\r\n        <span\r\n          v-if=\"!isLastItem(index)\"\r\n          :class=\"preset.separatorClass\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <JIcon\r\n            v-if=\"separator === 'chevron'\"\r\n            name=\"chevronRight\"\r\n            size=\"sm\"\r\n          />\r\n          <span v-else>{{ separator }}</span>\r\n        </span>\r\n      </li>\r\n    </ol>\r\n  </nav>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","STYLE_PRESETS","preset","computed","handleItemClick","item","index","isLastItem","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_openBlock","_Fragment","_renderList","cn","_createBlock","JIcon","_toDisplayString","JLink","$event"],"mappings":";;;;;;;;;;;;;;AA8CA,UAAMA,IAAQC,GAiBRC,IAAOC,GAQPC,IAKD;AAAA,MACH,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,eAAe;AAAA,MAAA;AAAA,MAEjB,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,eAAe;AAAA,MAAA;AAAA,IACjB,GAGIC,IAASC,EAAS,MACfF,EAAcJ,EAAM,SAAS,KAAKI,EAAc,OACxD,GAKKG,IAAkB,CAACC,GAAsBC,MAAkB;AAC/D,MAAAD,EAAK,UAAA,GACLN,EAAK,aAAaM,GAAMC,CAAK;AAAA,IAC/B,GAKMC,IAAa,CAACD,MACXA,MAAUT,EAAM,MAAM,SAAS;2BAKtCW,EAwDM,OAAA;AAAA,MAvDH,OAAKC,EAAEC,KAAGR,EAAA,MAAO,gBAAgBL,EAAM,KAAK,CAAA;AAAA,MAC7C,cAAW;AAAA,IAAA;MAEXc,EAmDK,MAnDLC,GAmDK;AAAA,SAlDHC,EAAA,EAAA,GAAAL,EAiDKM,GAAA,MAAAC,EAhDqBjB,EAAA,OAAK,CAArBO,GAAMC,YADhBE,EAiDK,MAAA;AAAA,UA/CF,KAAKF;AAAA,UACN,OAAM;AAAA,QAAA;UAIEC,EAAWD,CAAK,KAAA,CAAOD,EAAK,QAAI,CAAKA,EAAK,gBADlDG,EAYO,QAAA;AAAA;YAVJ,OAAKC,EAAEC,EAAAM,CAAA,EAAGd,EAAA,MAAO,WAAWA,EAAA,MAAO,eAAeK,EAAWD,CAAK,KAAA,gBAAA,CAAA;AAAA,UAAA;YAI3DD,EAAK,aADbY,EAKEC,GAAA;AAAA;cAHC,MAAMb,EAAK;AAAA,cACZ,MAAK;AAAA,cACL,OAAM;AAAA,YAAA;cACN,MACFc,EAAGd,EAAK,KAAK,GAAA,CAAA;AAAA,UAAA,eAGfY,EAcQG,GAAA;AAAA;YAZL,MAAMf,EAAK;AAAA,YACX,OAAKI,EAAEC,EAAAM,CAAA,EAAGd,EAAA,MAAO,SAAS,CAAA;AAAA,YAC1B,SAAK,CAAAmB,MAAEjB,EAAgBC,GAAMC,CAAK;AAAA,UAAA;uBAGnC,MAKE;AAAA,cAJMD,EAAK,aADbY,EAKEC,GAAA;AAAA;gBAHC,MAAMb,EAAK;AAAA,gBACZ,MAAK;AAAA,gBACL,OAAM;AAAA,cAAA;gBACN,MACFc,EAAGd,EAAK,KAAK,GAAA,CAAA;AAAA,YAAA;;;UAKNE,EAAWD,CAAK,sBADzBE,EAWO,QAAA;AAAA;YATJ,OAAKC,EAAEP,EAAA,MAAO,cAAc;AAAA,YAC7B,eAAY;AAAA,UAAA;YAGJJ,EAAA,cAAS,kBADjBmB,EAIEC,GAAA;AAAA;cAFA,MAAK;AAAA,cACL,MAAK;AAAA,YAAA,OAEPL,KAAAL,EAAmC,aAAnBV,EAAA,SAAS,GAAA,CAAA;AAAA,UAAA;;;;;;"}

package/components/molecules/JFormField.vue.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");require("lucide-vue-next");const h=require("../atoms/JInput.vue.cjs"),F=require("../atoms/JTextarea.vue.cjs"),N=require("../atoms/JCheckbox.vue.cjs"),z=require("../atoms/JCombo.vue.cjs"),T=require("../atoms/JSearchCombo.vue.cjs"),S=require("../atoms/JRadio.vue.cjs"),J=require("../atoms/JSwitch.vue.cjs"),M=require("../atoms/JDatepicker.vue.cjs");require("md-editor-v3");;/* empty css                                                                                                                 */;/* empty css                      */require("clsx");require("tailwind-merge");require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");require("dompurify");;/* empty css                       */require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */require("vue-sonner");const i=require("../shadcn/FieldGroup.vue.cjs"),g=require("../shadcn/Field.vue.cjs"),k=require("../shadcn/FieldLabel.vue.cjs"),q=require("../shadcn/FieldContent.vue.cjs"),P=require("../shadcn/FieldDescription.vue.cjs"),E=require("../shadcn/FieldError.vue.cjs"),L={key:0,class:"text-destructive ml-1"},j=e.defineComponent({__name:"JFormField",props:{label:{},description:{},errorMsg:{},type:{default:"input"},inlineLabel:{},orientation:{default:"vertical"},labelAlign:{default:"left"},labelWidth:{default:"8rem"},id:{},modelValue:{},placeholder:{},disabled:{type:Boolean},readonly:{type:Boolean},required:{type:Boolean},name:{},styleType:{},inputType:{},options:{},multiple:{type:Boolean},radioDirection:{default:"horizontal"}},emits:["update:modelValue","change","focus","blur"],setup(l,{expose:C,emit:x}){const b=["label","description","errorMsg","type","inlineLabel","orientation","labelAlign","labelWidth","radioDirection"],r=l,n=x,o=e.ref(""),c=e.computed(()=>r.errorMsg||o.value),s=e.computed(()=>{const t={},a=r;for(const u in a)b.includes(u)||(t[u]=a[u]);if(r.inputType&&r.type==="input"&&(t.type=r.inputType,delete t.inputType,!r.placeholder)){const u={text:"텍스트를 입력하세요",email:"이메일을 입력하세요",password:"비밀번호를 입력하세요",tel:"전화번호를 입력하세요",url:"URL을 입력하세요",number:"숫자를 입력하세요",search:"검색어를 입력하세요",date:"날짜를 선택하세요",time:"시간을 선택하세요","datetime-local":"날짜와 시간을 선택하세요",month:"월을 선택하세요",week:"주를 선택하세요"};t.placeholder=u[r.inputType]||"입력하세요"}return r.radioDirection&&r.type==="radio"&&(t.styletype=r.radioDirection,delete t.radioDirection),t}),d=t=>{if(!r.required)return;o.value="";const a=t!==void 0?t:r.modelValue;r.type==="checkbox"||r.type==="switch"?a!=="Y"&&(o.value="필수 항목입니다."):(a==null||a==="")&&(o.value="필수 입력 항목입니다.")},B=e.computed(()=>!(r.modelValue!==null&&r.modelValue!==void 0&&r.modelValue!=="")),p=t=>{n("update:modelValue",t),d(t)},f=t=>{n("change",t),d(t)},_=t=>{n("focus",t)},m=t=>{B.value&&d(),n("blur",t)},V=e.computed(()=>{const t={left:"justify-start",middle:"justify-center",right:"justify-end"},a={left:"text-left",middle:"text-center",right:"text-right"};return r.orientation==="horizontal"?t[r.labelAlign]:a[r.labelAlign]}),w=e.computed(()=>{switch(r.styleType){case"sm":return"form-density-sm";case"lg":return"form-density-lg";default:return"form-density-md"}}),v=e.computed(()=>{const t="h-[var(--ctl-h)] leading-[var(--ctl-h)]";return r.type==="datepicker"?`${t} max-w-xs`:r.type==="radio"&&r.radioDirection==="vertical"?"":t}),D={input:h.default,textarea:F.default,checkbox:N.default,switch:J.default,combo:z.default,radio:S.default,searchCombo:T.default,datepicker:M.default},y=e.computed(()=>D[r.type]||h.default);return C({clearError:()=>{o.value=""}}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["space-y-2 flex-1 min-w-0",w.value])},[e.createVNode(e.unref(i.default),null,{default:e.withCtx(()=>[e.createVNode(e.unref(g.default),{class:e.normalizeClass([l.orientation==="horizontal"?"grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2":"space-y-1 gap-1"]),style:e.normalizeStyle(l.orientation==="horizontal"?`--label-w:${l.labelWidth};`:"")},{default:e.withCtx(()=>[e.createVNode(e.unref(k.default),{for:l.id,class:e.normalizeClass([l.orientation==="horizontal"?"flex items-center h-[var(--ctl-h)] w-full":"flex items-center",V.value])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.label)+" ",1),l.required?(e.openBlock(),e.createElementBlock("span",L,"*")):e.createCommentVNode("",!0)]),_:1},8,["for","class"]),e.createVNode(e.unref(q.default),{class:e.normalizeClass([l.orientation==="horizontal"?"min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0":"space-y-2 gap-0"])},{default:e.withCtx(()=>[l.type==="checkbox"||l.type==="switch"?(e.openBlock(),e.createBlock(e.unref(i.default),{key:0,"data-slot":"checkbox-group"},{default:e.withCtx(()=>[e.createVNode(e.unref(g.default),{orientation:"horizontal",class:"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(y.value),e.mergeProps(s.value,{"onUpdate:modelValue":p,onChange:f,onFocus:_,onBlur:m}),null,16)),l.inlineLabel?(e.openBlock(),e.createBlock(e.unref(k.default),{key:0,for:l.id,class:"font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.inlineLabel),1)]),_:1},8,["for"])):e.createCommentVNode("",!0)]),_:1})]),_:1})):l.type==="radio"?(e.openBlock(),e.createBlock(e.unref(i.default),{key:1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(y.value),e.mergeProps(s.value,{"onUpdate:modelValue":p,onChange:f,onFocus:_,onBlur:m,class:v.value}),null,16,["class"]))]),_:1})):(e.openBlock(),e.createBlock(e.unref(i.default),{key:2},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(y.value),e.mergeProps(s.value,{"onUpdate:modelValue":p,onChange:f,onFocus:_,onBlur:m,class:v.value}),null,16,["class"]))]),_:1})),l.description||c.value?(e.openBlock(),e.createBlock(e.unref(q.default),{key:3},{default:e.withCtx(()=>[l.description?(e.openBlock(),e.createBlock(e.unref(P.default),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.description),1)]),_:1})):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createBlock(e.unref(E.default),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.value),1)]),_:1})):e.createCommentVNode("",!0)]),_:1})):e.createCommentVNode("",!0)]),_:1},8,["class"])]),_:1},8,["class","style"])]),_:1})],2))}});exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");require("lucide-vue-next");const h=require("../atoms/JInput.vue.cjs"),F=require("../atoms/JTextarea.vue.cjs"),N=require("../atoms/JCheckbox.vue.cjs"),z=require("../atoms/JCombo.vue.cjs"),T=require("../atoms/JSearchCombo.vue.cjs"),S=require("../atoms/JRadio.vue.cjs"),J=require("../atoms/JSwitch.vue.cjs"),M=require("../atoms/JDatepicker.vue.cjs");require("md-editor-v3");;/* empty css                                                                                                                 */;/* empty css                      */require("clsx");require("tailwind-merge");require("../shadcn/badge-variants.cjs");require("@vueuse/core");require("reka-ui");;/* empty css                        */require("../shadcn/avatar-variants.cjs");require("dompurify");;/* empty css                       */require("ag-grid-vue3");require("ag-grid-community");require("ag-grid-enterprise");;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                                                                                                            */;/* empty css                    */require("vue-sonner");const i=require("../shadcn/FieldGroup.vue.cjs"),g=require("../shadcn/Field.vue.cjs"),k=require("../shadcn/FieldLabel.vue.cjs"),x=require("../shadcn/FieldContent.vue.cjs"),P=require("../shadcn/FieldDescription.vue.cjs"),E=require("../shadcn/FieldError.vue.cjs"),L={key:0,class:"text-destructive ml-1"},j=e.defineComponent({__name:"JFormField",props:{label:{},description:{},errorMsg:{},type:{default:"input"},inlineLabel:{},orientation:{default:"vertical"},labelAlign:{default:"left"},labelWidth:{default:"8rem"},id:{},modelValue:{},placeholder:{},disabled:{type:Boolean},readonly:{type:Boolean},required:{type:Boolean},name:{},styleType:{},inputType:{},options:{},multiple:{type:Boolean},radioDirection:{default:"horizontal"}},emits:["update:modelValue","change","focus","blur"],setup(l,{expose:q,emit:C}){const b=["label","description","errorMsg","type","inlineLabel","orientation","labelAlign","labelWidth","radioDirection"],r=l,n=C,o=e.ref(""),c=e.computed(()=>r.errorMsg||o.value),s=e.computed(()=>{const t={},a=r;for(const u in a)b.includes(u)||(t[u]=a[u]);if(r.inputType&&r.type==="input"&&(t.type=r.inputType,delete t.inputType,!r.placeholder)){const u={text:"텍스트를 입력하세요",email:"이메일을 입력하세요",password:"비밀번호를 입력하세요",tel:"전화번호를 입력하세요",url:"URL을 입력하세요",number:"숫자를 입력하세요",search:"검색어를 입력하세요",date:"날짜를 선택하세요",time:"시간을 선택하세요","datetime-local":"날짜와 시간을 선택하세요",month:"월을 선택하세요",week:"주를 선택하세요"};t.placeholder=u[r.inputType]||"입력하세요"}return r.radioDirection&&r.type==="radio"&&(t.styletype=r.radioDirection,delete t.radioDirection),t}),d=t=>{if(!r.required)return;o.value="";const a=t!==void 0?t:r.modelValue;r.type==="checkbox"||r.type==="switch"?a!=="Y"&&(o.value="필수 항목입니다."):(a==null||a==="")&&(o.value="필수 입력 항목입니다.")},B=e.computed(()=>!(r.modelValue!==null&&r.modelValue!==void 0&&r.modelValue!=="")),p=t=>{n("update:modelValue",t),d(t)},f=t=>{n("change",t),d(t)},_=t=>{n("focus",t)},m=t=>{B.value&&d(),n("blur",t)},V=e.computed(()=>{const t={left:"justify-start",middle:"justify-center",right:"justify-end"},a={left:"text-left",middle:"text-center",right:"text-right"};return r.orientation==="horizontal"?t[r.labelAlign]:a[r.labelAlign]}),w=e.computed(()=>{switch(r.styleType){case"md":return"form-density-md";case"lg":return"form-density-lg";default:return"form-density-sm"}}),v=e.computed(()=>{const t="h-[var(--ctl-h)] leading-[var(--ctl-h)]";return r.type==="datepicker"?`${t} max-w-xs`:r.type==="radio"&&r.radioDirection==="vertical"?"":t}),D={input:h.default,textarea:F.default,checkbox:N.default,switch:J.default,combo:z.default,radio:S.default,searchCombo:T.default,datepicker:M.default},y=e.computed(()=>D[r.type]||h.default);return q({clearError:()=>{o.value=""}}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["space-y-2 flex-1 min-w-0",w.value])},[e.createVNode(e.unref(i.default),null,{default:e.withCtx(()=>[e.createVNode(e.unref(g.default),{class:e.normalizeClass([l.orientation==="horizontal"?"grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2":"space-y-1 gap-1"]),style:e.normalizeStyle(l.orientation==="horizontal"?`--label-w:${l.labelWidth};`:"")},{default:e.withCtx(()=>[e.createVNode(e.unref(k.default),{for:l.id,class:e.normalizeClass(["text-xs",l.orientation==="horizontal"?"flex items-center h-[var(--ctl-h)] w-full":"flex items-center",V.value])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.label)+" ",1),l.required?(e.openBlock(),e.createElementBlock("span",L,"*")):e.createCommentVNode("",!0)]),_:1},8,["for","class"]),e.createVNode(e.unref(x.default),{class:e.normalizeClass([l.orientation==="horizontal"?"min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0":"space-y-2 gap-0"])},{default:e.withCtx(()=>[l.type==="checkbox"||l.type==="switch"?(e.openBlock(),e.createBlock(e.unref(i.default),{key:0,"data-slot":"checkbox-group"},{default:e.withCtx(()=>[e.createVNode(e.unref(g.default),{orientation:"horizontal",class:"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(y.value),e.mergeProps(s.value,{"onUpdate:modelValue":p,onChange:f,onFocus:_,onBlur:m}),null,16)),l.inlineLabel?(e.openBlock(),e.createBlock(e.unref(k.default),{key:0,for:l.id,class:"text-xs font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.inlineLabel),1)]),_:1},8,["for"])):e.createCommentVNode("",!0)]),_:1})]),_:1})):l.type==="radio"?(e.openBlock(),e.createBlock(e.unref(i.default),{key:1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(y.value),e.mergeProps(s.value,{"onUpdate:modelValue":p,onChange:f,onFocus:_,onBlur:m,class:v.value}),null,16,["class"]))]),_:1})):(e.openBlock(),e.createBlock(e.unref(i.default),{key:2},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(y.value),e.mergeProps(s.value,{"onUpdate:modelValue":p,onChange:f,onFocus:_,onBlur:m,class:v.value}),null,16,["class"]))]),_:1})),l.description||c.value?(e.openBlock(),e.createBlock(e.unref(x.default),{key:3},{default:e.withCtx(()=>[l.description?(e.openBlock(),e.createBlock(e.unref(P.default),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.description),1)]),_:1})):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createBlock(e.unref(E.default),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.value),1)]),_:1})):e.createCommentVNode("",!0)]),_:1})):e.createCommentVNode("",!0)]),_:1},8,["class"])]),_:1},8,["class","style"])]),_:1})],2))}});exports.default=j;
 //# sourceMappingURL=JFormField.vue.cjs.map

package/components/molecules/JFormField.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JFormField.vue.cjs","sources":["../../../../src/components/molecules/JFormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Field, FieldContent, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@/components/shadcn'\nimport { JInput, JTextarea, JCheckbox, JSwitch, JCombo, JRadio, JSearchCombo, JDatepicker } from '@/components/atoms'\n\n// 컴포넌트 타입 정의\ntype ComponentType = 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker'\n\n// FormField 자체의 props (레이아웃 관련)\nconst FORM_FIELD_PROPS = [\n  'label',\n  'description',\n  'errorMsg',\n  'type',\n  'inlineLabel',\n  'orientation',\n  'labelAlign',\n  'labelWidth',\n  'radioDirection',\n] as const\n\nconst props = withDefaults(\n  defineProps<{\n    // ============ FormField 자체 props (레이아웃만) ============\n    /** 필드 레이블 */\n    label?: string\n    /** 필드 설명 (레이블 아래 표시) */\n    description?: string\n    /** 에러 메시지 */\n    errorMsg?: string\n    /** 컴포넌트 타입 (렌더링할 컴포넌트 지정) */\n    type?: ComponentType\n    /** 체크박스/스위치 타입일 때만 사용하는 옆 라벨 */\n    inlineLabel?: string\n    /** 레이블과 컨트롤의 배치 방향 */\n    orientation?: 'vertical' | 'horizontal' | 'responsive'\n    /** 레이블 텍스트 정렬 */\n    labelAlign?: 'left' | 'middle' | 'right'\n    /** 레이블 영역 너비 (horizontal orientation일 때만 적용) */\n    labelWidth?: string\n\n    // ============ 내부 컴포넌트로 전달할 공통 props ============\n    /** Input 요소의 id (label for와 연결) */\n    id?: string\n    /** v-model로 양방향 데이터 바인딩 */\n    modelValue?: any\n    /** 입력 전 표시되는 안내문 (Input/Textarea/Select/Combobox) */\n    placeholder?: string\n    /** 비활성화 상태 (전체) */\n    disabled?: boolean\n    /** 읽기 전용 상태 (Input/Textarea) */\n    readonly?: boolean\n    /** 필수 입력/선택 여부 (전체) */\n    required?: boolean\n    /** form 데이터 전송 시 키 이름 (전체) */\n    name?: string\n    /** 스타일 테마 지정 (J-prefixed 컴포넌트의 styleType) */\n    styleType?: string\n\n    // ============ Input 전용 props ============\n    /** Input 타입 (text, email, password 등) */\n    inputType?: string\n\n\n    // ============ Select/Combobox/Radio 전용 props ============\n    /** 선택 가능한 항목 배열 */\n    options?: Array<{ label: string; value: string | number; disabled?: boolean }>\n    \n    // ============ Select/Combobox 전용 props ============\n    /** 다중 선택 허용 여부 */\n    multiple?: boolean\n\n\n    // ============ Radio 전용 props ============\n    /** Radio 옵션 나열 방향 */\n    radioDirection?: 'horizontal' | 'vertical'\n  }>(),\n  {\n    type: 'input',\n    orientation: 'vertical',\n    labelAlign: 'left',\n    labelWidth: '8rem',\n    radioDirection: 'horizontal',\n  }\n)\n\n// 이벤트 정의\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n  'change': [value: any]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n// 내부 에러 상태 (props.error가 없을 때만 사용)\nconst internalError = ref<string>('')\n\n// 최종 에러 메시지 (외부 errorMsg가 우선)\nconst finalError = computed(() => props.errorMsg || internalError.value)\n\n// FormField 자체 props와 내부 컴포넌트 props 분리\nconst controlProps = computed(() => {\n  const result: Record<string, any> = {}\n  const propsObj = props as Record<string, any>\n  \n  for (const key in propsObj) {\n    // FormField 자체 props는 제외\n    if (!FORM_FIELD_PROPS.includes(key as any)) {\n      result[key] = propsObj[key]\n    }\n  }\n  \n  // inputType을 type으로 변환 (JInput 컴포넌트에서 사용)\n  if (props.inputType && props.type === 'input') {\n    result.type = props.inputType\n    delete result.inputType // inputType은 제거\n    \n    // placeholder가 없으면 inputType에 따라 기본값 설정\n    if (!props.placeholder) {\n      const defaultPlaceholders: Record<string, string> = {\n        'text': '텍스트를 입력하세요',\n        'email': '이메일을 입력하세요',\n        'password': '비밀번호를 입력하세요',\n        'tel': '전화번호를 입력하세요',\n        'url': 'URL을 입력하세요',\n        'number': '숫자를 입력하세요',\n        'search': '검색어를 입력하세요',\n        'date': '날짜를 선택하세요',\n        'time': '시간을 선택하세요',\n        'datetime-local': '날짜와 시간을 선택하세요',\n        'month': '월을 선택하세요',\n        'week': '주를 선택하세요',\n      }\n      \n      result.placeholder = defaultPlaceholders[props.inputType] || '입력하세요'\n    }\n  }\n  \n  // radioDirection을 styletype으로 변환 (JRadio 컴포넌트에서 사용)\n  if (props.radioDirection && props.type === 'radio') {\n    result.styletype = props.radioDirection\n    delete result.radioDirection // radioDirection은 제거\n  }\n  \n  return result\n})\n\n  // Built-in validation\n  const validateField = (currentValue?: any) => {\n    if (!props.required) return\n\n    internalError.value = ''\n\n    // 현재 값 또는 props.modelValue 사용\n    const value = currentValue !== undefined ? currentValue : props.modelValue\n\n    // Required 체크\n    if (props.type === 'checkbox' || props.type === 'switch') {\n      if (value !== 'Y') {\n        internalError.value = '필수 항목입니다.'\n      }\n    } else {\n      if (value === null || value === undefined || value === '') {\n        internalError.value = '필수 입력 항목입니다.'\n      }\n    }\n  }\n\n  // 초기 로드 시 validation 실행 (blur 이벤트에서만)\n  const shouldValidateOnMount = computed(() => {\n    // Storybook에서 초기값이 있는 경우 validation 스킵\n    if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {\n      return false\n    }\n    return true\n  })\n\n// 이벤트 핸들러\nconst handleUpdateModelValue = (value: any) => {\n  emit('update:modelValue', value)\n  \n  // 값이 변경되면 즉시 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleChange = (value: any) => {\n  emit('change', value)\n  \n  // change 이벤트에서도 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\n  const handleBlur = (event: FocusEvent) => {\n    // blur 시에만 validation 실행 (초기 로드 시에는 실행하지 않음)\n    if (shouldValidateOnMount.value) {\n      validateField()\n    }\n    emit('blur', event)\n  }\n\n// 레이블 정렬 클래스 (레이블 영역 내에서 레이블의 위치 제어)\nconst labelAlignClass = computed(() => {\n  // horizontal일 때는 레이블 영역 내에서 레이블의 위치를 제어\n  const mapHorizontal = { \n    left: 'justify-start',    // 레이블 영역의 왼쪽에 레이블 위치\n    middle: 'justify-center', // 레이블 영역의 가운데에 레이블 위치\n    right: 'justify-end'      // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)\n  }\n  // vertical일 때는 텍스트 정렬만 제어\n  const mapVertical = { left: 'text-left', middle: 'text-center', right: 'text-right' }\n  return props.orientation === 'horizontal' ? mapHorizontal[props.labelAlign] : mapVertical[props.labelAlign]\n})\n\n/** 행높이 토큰 클래스 매핑 */\nconst densityClass = computed(() => {\n  switch (props.styleType) {\n    case 'sm': return 'form-density-sm'\n    case 'lg': return 'form-density-lg'\n    default:   return 'form-density-md'\n  }\n})\n\n/** 컨트롤 클래스 (datepicker는 최대 너비 제한, radio vertical은 높이 제한 없음) */\nconst controlClass = computed(() => {\n  const baseClass = 'h-[var(--ctl-h)] leading-[var(--ctl-h)]'\n  \n  if (props.type === 'datepicker') {\n    return `${baseClass} max-w-xs`\n  }\n  \n  // Radio vertical일 때는 높이 제한 없음\n  if (props.type === 'radio' && props.radioDirection === 'vertical') {\n    return ''\n  }\n  \n  return baseClass\n})\n\n// 컴포넌트 매핑\nconst componentMap: Record<ComponentType, any> = {\n  input: JInput,\n  textarea: JTextarea,\n  checkbox: JCheckbox,\n  switch: JSwitch,\n  combo: JCombo,\n  radio: JRadio,\n  searchCombo: JSearchCombo,\n  datepicker: JDatepicker,\n}\n\n// type에 따라 렌더링할 컴포넌트 결정\nconst resolvedComponent = computed(() => {\n  return componentMap[props.type!] || JInput\n})\n\n// 외부에서 수동으로 에러 클리어 가능하도록 expose\ndefineExpose({\n  clearError: () => { internalError.value = '' }\n})\n</script>\n\n<template>\n  <div :class=\"['space-y-2 flex-1 min-w-0', densityClass]\">\n    <FieldGroup >\n      <Field :class=\"[\n          orientation === 'horizontal'\n            ? 'grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2'\n            : 'space-y-1 gap-1'\n        ]\"\n        :style=\"orientation === 'horizontal' ? `--label-w:${labelWidth};` : ''\"\n      >\n        <!-- 메인 라벨 (필수표기 포함) -->\n        <FieldLabel \n          :for=\"id\" \n          :class=\"[\n            orientation === 'horizontal'\n              ? 'flex items-center h-[var(--ctl-h)] w-full'\n              : 'flex items-center',\n            labelAlignClass\n          ]\"\n        >\n          {{ label }}\n          <span v-if=\"required\" class=\"text-destructive ml-1\">*</span>\n        </FieldLabel>\n\n        <FieldContent \n          :class=\"[\n            orientation === 'horizontal'\n            ? 'min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0'\n            : 'space-y-2 gap-0'\n          ]\"\n        >\n          <!-- 체크박스/스위치: 항상 가로 정렬로 컨트롤 + 인라인 라벨 묶기 -->\n          <FieldGroup v-if=\"type === 'checkbox' || type === 'switch'\" data-slot=\"checkbox-group\">\n            <!-- 부모 orientation과 무관하게 수평 정렬 고정 -->\n            <Field orientation=\"horizontal\" class=\"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center\">\n              <component\n                :is=\"resolvedComponent\"\n                v-bind=\"controlProps\"\n                @update:modelValue=\"handleUpdateModelValue\"\n                @change=\"handleChange\"\n                @focus=\"handleFocus\"\n                @blur=\"handleBlur\"\n              />\n              <FieldLabel\n                v-if=\"inlineLabel\"\n                :for=\"id\"\n                class=\"font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]\"\n              >\n                {{ inlineLabel }}\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n\n          <!-- Radio 버튼: radioDirection에 따라 분기 처리 -->\n          <FieldGroup v-else-if=\"type === 'radio'\">\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n\n          <!-- 그 외 컨트롤: orientation 규칙 그대로 따름 -->\n          <FieldGroup v-else>\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n          \n          <!-- 설명/에러: 항상 컨트롤 '바로 아래'에 표시 -->\n          <FieldContent v-if=\"description || finalError\">\n            <FieldDescription v-if=\"description\">\n              {{ description }}\n            </FieldDescription>\n            <FieldError v-if=\"finalError\">\n              {{ finalError }}\n            </FieldError>\n          </FieldContent>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  </div>\n</template>\n\n\n\n<style>\n/* ⬇⬇ 높이 토큰(밀도) — 프로젝트 전역/레이아웃에 한 번 정의해두고 재사용하세요 */\n.form-density-sm { --ctl-h: 2rem;    /* 32px */ }\n.form-density-md { --ctl-h: 2.25rem; /* 36px (shadcn 기본에 근접) */ }\n.form-density-lg { --ctl-h: 2.5rem;  /* 40px */ }\n</style>"],"names":["FORM_FIELD_PROPS","props","__props","emit","__emit","internalError","ref","finalError","computed","controlProps","result","propsObj","key","defaultPlaceholders","validateField","currentValue","value","shouldValidateOnMount","handleUpdateModelValue","handleChange","handleFocus","event","handleBlur","labelAlignClass","mapHorizontal","mapVertical","densityClass","controlClass","baseClass","componentMap","JInput","JTextarea","JCheckbox","JSwitch","JCombo","JRadio","JSearchCombo","JDatepicker","resolvedComponent","__expose","_createElementBlock","_createVNode","_unref","FieldGroup","Field","_normalizeClass","_normalizeStyle","FieldLabel","_createTextVNode","_toDisplayString","_hoisted_1","FieldContent","_createBlock","_openBlock","_resolveDynamicComponent","_mergeProps","FieldDescription","FieldError"],"mappings":"quEASA,MAAMA,EAAmB,CACvB,QACA,cACA,WACA,OACA,cACA,cACA,aACA,aACA,gBAAA,EAGIC,EAAQC,EAkERC,EAAOC,EAQPC,EAAgBC,EAAAA,IAAY,EAAE,EAG9BC,EAAaC,EAAAA,SAAS,IAAMP,EAAM,UAAYI,EAAc,KAAK,EAGjEI,EAAeD,EAAAA,SAAS,IAAM,CAClC,MAAME,EAA8B,CAAA,EAC9BC,EAAWV,EAEjB,UAAWW,KAAOD,EAEXX,EAAiB,SAASY,CAAU,IACvCF,EAAOE,CAAG,EAAID,EAASC,CAAG,GAK9B,GAAIX,EAAM,WAAaA,EAAM,OAAS,UACpCS,EAAO,KAAOT,EAAM,UACpB,OAAOS,EAAO,UAGV,CAACT,EAAM,aAAa,CACtB,MAAMY,EAA8C,CAClD,KAAQ,aACR,MAAS,aACT,SAAY,cACZ,IAAO,cACP,IAAO,aACP,OAAU,YACV,OAAU,aACV,KAAQ,YACR,KAAQ,YACR,iBAAkB,gBAClB,MAAS,WACT,KAAQ,UAAA,EAGVH,EAAO,YAAcG,EAAoBZ,EAAM,SAAS,GAAK,OAC/D,CAIF,OAAIA,EAAM,gBAAkBA,EAAM,OAAS,UACzCS,EAAO,UAAYT,EAAM,eACzB,OAAOS,EAAO,gBAGTA,CACT,CAAC,EAGOI,EAAiBC,GAAuB,CAC5C,GAAI,CAACd,EAAM,SAAU,OAErBI,EAAc,MAAQ,GAGtB,MAAMW,EAAQD,IAAiB,OAAYA,EAAed,EAAM,WAG5DA,EAAM,OAAS,YAAcA,EAAM,OAAS,SAC1Ce,IAAU,MACZX,EAAc,MAAQ,cAGpBW,GAAU,MAA+BA,IAAU,MACrDX,EAAc,MAAQ,eAG5B,EAGMY,EAAwBT,EAAAA,SAAS,IAEjC,EAAAP,EAAM,aAAe,MAAQA,EAAM,aAAe,QAAaA,EAAM,aAAe,GAIzF,EAGGiB,EAA0BF,GAAe,CAC7Cb,EAAK,oBAAqBa,CAAK,EAG/BF,EAAcE,CAAK,CACrB,EAEMG,EAAgBH,GAAe,CACnCb,EAAK,SAAUa,CAAK,EAGpBF,EAAcE,CAAK,CACrB,EAEMI,EAAeC,GAAsB,CACzClB,EAAK,QAASkB,CAAK,CACrB,EAEQC,EAAcD,GAAsB,CAEpCJ,EAAsB,OACxBH,EAAA,EAEFX,EAAK,OAAQkB,CAAK,CACpB,EAGIE,EAAkBf,EAAAA,SAAS,IAAM,CAErC,MAAMgB,EAAgB,CACpB,KAAM,gBACN,OAAQ,iBACR,MAAO,aAAA,EAGHC,EAAc,CAAE,KAAM,YAAa,OAAQ,cAAe,MAAO,YAAA,EACvE,OAAOxB,EAAM,cAAgB,aAAeuB,EAAcvB,EAAM,UAAU,EAAIwB,EAAYxB,EAAM,UAAU,CAC5G,CAAC,EAGKyB,EAAelB,EAAAA,SAAS,IAAM,CAClC,OAAQP,EAAM,UAAA,CACZ,IAAK,KAAM,MAAO,kBAClB,IAAK,KAAM,MAAO,kBAClB,QAAW,MAAO,iBAAA,CAEtB,CAAC,EAGK0B,EAAenB,EAAAA,SAAS,IAAM,CAClC,MAAMoB,EAAY,0CAElB,OAAI3B,EAAM,OAAS,aACV,GAAG2B,CAAS,YAIjB3B,EAAM,OAAS,SAAWA,EAAM,iBAAmB,WAC9C,GAGF2B,CACT,CAAC,EAGKC,EAA2C,CAC/C,MAAOC,EAAAA,QACP,SAAUC,EAAAA,QACV,SAAUC,EAAAA,QACV,OAAQC,EAAAA,QACR,MAAOC,EAAAA,QACP,MAAOC,EAAAA,QACP,YAAaC,EAAAA,QACb,WAAYC,EAAAA,OAAA,EAIRC,EAAoB9B,EAAAA,SAAS,IAC1BqB,EAAa5B,EAAM,IAAK,GAAK6B,EAAAA,OACrC,EAGD,OAAAS,EAAa,CACX,WAAY,IAAM,CAAElC,EAAc,MAAQ,EAAG,CAAA,CAC9C,wBAICmC,EAAAA,mBA0FM,MAAA,CA1FA,mDAAoCd,EAAA,KAAY,CAAA,CAAA,GACpDe,EAAAA,YAwFaC,EAAAA,MAAAC,SAAA,EAAA,KAAA,mBAvFX,IAsFQ,CAtFRF,cAsFQC,EAAAA,MAAAE,EAAAA,OAAA,EAAA,CAtFA,MAAKC,EAAAA,eAAA,CAAc3C,EAAA,cAAW,wGAKnC,MAAK4C,EAAAA,eAAE5C,EAAA,cAAW,aAAA,aAAiCA,EAAA,UAAU,IAAA,EAAA,CAAA,qBAG9D,IAWa,CAXbuC,cAWaC,EAAAA,MAAAK,EAAAA,OAAA,EAAA,CAVV,IAAK7C,EAAA,GACL,MAAK2C,EAAAA,eAAA,CAAgB3C,EAAA,cAAW,6EAA+HqB,EAAA,KAAA,uBAOhK,IAAW,CAARyB,EAAAA,gBAAAC,EAAAA,gBAAA/C,EAAA,KAAK,EAAG,IACX,CAAA,EAAYA,EAAA,wBAAZsC,qBAA4D,OAA5DU,EAAoD,GAAC,yDAGvDT,cAgEeC,EAAAA,MAAAS,EAAAA,OAAA,EAAA,CA/DZ,MAAKN,EAAAA,eAAA,CAAgB3C,EAAA,cAAW,qHAOjC,IAmBa,CAnBKA,EAAA,mBAAuBA,EAAA,OAAI,wBAA7CkD,EAAAA,YAmBaV,EAAAA,MAAAC,EAAAA,OAAA,EAAA,OAnB+C,YAAU,gBAAA,qBAEpE,IAgBQ,CAhBRF,cAgBQC,EAAAA,MAAAE,EAAAA,OAAA,EAAA,CAhBD,YAAY,aAAa,MAAM,2EAAA,qBACpC,IAOE,EAPFS,YAAA,EAAAD,EAAAA,YAOEE,0BANKhB,EAAA,KAAiB,EADxBiB,EAAAA,WAEU9C,EAKR,MALoB,CACnB,sBAAmBS,EACnB,SAAQC,EACR,QAAOC,EACP,OAAME,CAAA,aAGDpB,EAAA,2BADRkD,EAAAA,YAMaV,EAAAA,MAAAK,EAAAA,OAAA,EAAA,OAJV,IAAK7C,EAAA,GACN,MAAM,yDAAA,qBAEN,IAAiB,qCAAdA,EAAA,WAAW,EAAA,CAAA,CAAA,iEAMGA,EAAA,OAAI,uBAA3BkD,cAUaV,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CAAA,IAAA,GAAA,mBATX,IAQE,EARFU,YAAA,EAAAD,EAAAA,YAQEE,0BAPKhB,EAAA,KAAiB,EADxBiB,EAAAA,WAEU9C,EAMR,MANoB,CACnB,sBAAmBS,EACnB,SAAQC,EACR,QAAOC,EACP,OAAME,EACN,MAAOK,EAAA,KAAA,+CAKZyB,cAUaV,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CAAA,IAAA,GAAA,mBATX,IAQE,EARFU,YAAA,EAAAD,EAAAA,YAQEE,0BAPKhB,EAAA,KAAiB,EADxBiB,EAAAA,WAEU9C,EAMR,MANoB,CACnB,sBAAmBS,EACnB,SAAQC,EACR,QAAOC,EACP,OAAME,EACN,MAAOK,EAAA,KAAA,gCAKQzB,EAAA,aAAeK,EAAA,qBAAnC6C,cAOeV,EAAAA,MAAAS,EAAAA,OAAA,EAAA,CAAA,IAAA,GAAA,mBANb,IAEmB,CAFKjD,EAAA,2BAAxBkD,EAAAA,YAEmBV,QAAAc,EAAAA,OAAA,EAAA,CAAA,IAAA,GAAA,mBADjB,IAAiB,qCAAdtD,EAAA,WAAW,EAAA,CAAA,CAAA,sCAEEK,EAAA,qBAAlB6C,EAAAA,YAEaV,QAAAe,EAAAA,OAAA,EAAA,CAAA,IAAA,GAAA,mBADX,IAAgB,qCAAblD,EAAA,KAAU,EAAA,CAAA,CAAA"}
+{"version":3,"file":"JFormField.vue.cjs","sources":["../../../../src/components/molecules/JFormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Field, FieldContent, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@/components/shadcn'\nimport { JInput, JTextarea, JCheckbox, JSwitch, JCombo, JRadio, JSearchCombo, JDatepicker } from '@/components/atoms'\n\n// 컴포넌트 타입 정의\ntype ComponentType = 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker'\n\n// FormField 자체의 props (레이아웃 관련)\nconst FORM_FIELD_PROPS = [\n  'label',\n  'description',\n  'errorMsg',\n  'type',\n  'inlineLabel',\n  'orientation',\n  'labelAlign',\n  'labelWidth',\n  'radioDirection',\n] as const\n\nconst props = withDefaults(\n  defineProps<{\n    // ============ FormField 자체 props (레이아웃만) ============\n    /** 필드 레이블 */\n    label?: string\n    /** 필드 설명 (레이블 아래 표시) */\n    description?: string\n    /** 에러 메시지 */\n    errorMsg?: string\n    /** 컴포넌트 타입 (렌더링할 컴포넌트 지정) */\n    type?: ComponentType\n    /** 체크박스/스위치 타입일 때만 사용하는 옆 라벨 */\n    inlineLabel?: string\n    /** 레이블과 컨트롤의 배치 방향 */\n    orientation?: 'vertical' | 'horizontal' | 'responsive'\n    /** 레이블 텍스트 정렬 */\n    labelAlign?: 'left' | 'middle' | 'right'\n    /** 레이블 영역 너비 (horizontal orientation일 때만 적용) */\n    labelWidth?: string\n\n    // ============ 내부 컴포넌트로 전달할 공통 props ============\n    /** Input 요소의 id (label for와 연결) */\n    id?: string\n    /** v-model로 양방향 데이터 바인딩 */\n    modelValue?: any\n    /** 입력 전 표시되는 안내문 (Input/Textarea/Select/Combobox) */\n    placeholder?: string\n    /** 비활성화 상태 (전체) */\n    disabled?: boolean\n    /** 읽기 전용 상태 (Input/Textarea) */\n    readonly?: boolean\n    /** 필수 입력/선택 여부 (전체) */\n    required?: boolean\n    /** form 데이터 전송 시 키 이름 (전체) */\n    name?: string\n    /** 스타일 테마 지정 (J-prefixed 컴포넌트의 styleType) */\n    styleType?: string\n\n    // ============ Input 전용 props ============\n    /** Input 타입 (text, email, password 등) */\n    inputType?: string\n\n\n    // ============ Select/Combobox/Radio 전용 props ============\n    /** 선택 가능한 항목 배열 */\n    options?: Array<{ label: string; value: string | number; disabled?: boolean }>\n    \n    // ============ Select/Combobox 전용 props ============\n    /** 다중 선택 허용 여부 */\n    multiple?: boolean\n\n\n    // ============ Radio 전용 props ============\n    /** Radio 옵션 나열 방향 */\n    radioDirection?: 'horizontal' | 'vertical'\n  }>(),\n  {\n    type: 'input',\n    orientation: 'vertical',\n    labelAlign: 'left',\n    labelWidth: '8rem',\n    radioDirection: 'horizontal',\n  }\n)\n\n// 이벤트 정의\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n  'change': [value: any]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n// 내부 에러 상태 (props.error가 없을 때만 사용)\nconst internalError = ref<string>('')\n\n// 최종 에러 메시지 (외부 errorMsg가 우선)\nconst finalError = computed(() => props.errorMsg || internalError.value)\n\n// FormField 자체 props와 내부 컴포넌트 props 분리\nconst controlProps = computed(() => {\n  const result: Record<string, any> = {}\n  const propsObj = props as Record<string, any>\n  \n  for (const key in propsObj) {\n    // FormField 자체 props는 제외\n    if (!FORM_FIELD_PROPS.includes(key as any)) {\n      result[key] = propsObj[key]\n    }\n  }\n  \n  // inputType을 type으로 변환 (JInput 컴포넌트에서 사용)\n  if (props.inputType && props.type === 'input') {\n    result.type = props.inputType\n    delete result.inputType // inputType은 제거\n    \n    // placeholder가 없으면 inputType에 따라 기본값 설정\n    if (!props.placeholder) {\n      const defaultPlaceholders: Record<string, string> = {\n        'text': '텍스트를 입력하세요',\n        'email': '이메일을 입력하세요',\n        'password': '비밀번호를 입력하세요',\n        'tel': '전화번호를 입력하세요',\n        'url': 'URL을 입력하세요',\n        'number': '숫자를 입력하세요',\n        'search': '검색어를 입력하세요',\n        'date': '날짜를 선택하세요',\n        'time': '시간을 선택하세요',\n        'datetime-local': '날짜와 시간을 선택하세요',\n        'month': '월을 선택하세요',\n        'week': '주를 선택하세요',\n      }\n      \n      result.placeholder = defaultPlaceholders[props.inputType] || '입력하세요'\n    }\n  }\n  \n  // radioDirection을 styletype으로 변환 (JRadio 컴포넌트에서 사용)\n  if (props.radioDirection && props.type === 'radio') {\n    result.styletype = props.radioDirection\n    delete result.radioDirection // radioDirection은 제거\n  }\n  \n  return result\n})\n\n  // Built-in validation\n  const validateField = (currentValue?: any) => {\n    if (!props.required) return\n\n    internalError.value = ''\n\n    // 현재 값 또는 props.modelValue 사용\n    const value = currentValue !== undefined ? currentValue : props.modelValue\n\n    // Required 체크\n    if (props.type === 'checkbox' || props.type === 'switch') {\n      if (value !== 'Y') {\n        internalError.value = '필수 항목입니다.'\n      }\n    } else {\n      if (value === null || value === undefined || value === '') {\n        internalError.value = '필수 입력 항목입니다.'\n      }\n    }\n  }\n\n  // 초기 로드 시 validation 실행 (blur 이벤트에서만)\n  const shouldValidateOnMount = computed(() => {\n    // Storybook에서 초기값이 있는 경우 validation 스킵\n    if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {\n      return false\n    }\n    return true\n  })\n\n// 이벤트 핸들러\nconst handleUpdateModelValue = (value: any) => {\n  emit('update:modelValue', value)\n  \n  // 값이 변경되면 즉시 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleChange = (value: any) => {\n  emit('change', value)\n  \n  // change 이벤트에서도 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\n  const handleBlur = (event: FocusEvent) => {\n    // blur 시에만 validation 실행 (초기 로드 시에는 실행하지 않음)\n    if (shouldValidateOnMount.value) {\n      validateField()\n    }\n    emit('blur', event)\n  }\n\n// 레이블 정렬 클래스 (레이블 영역 내에서 레이블의 위치 제어)\nconst labelAlignClass = computed(() => {\n  // horizontal일 때는 레이블 영역 내에서 레이블의 위치를 제어\n  const mapHorizontal = { \n    left: 'justify-start',    // 레이블 영역의 왼쪽에 레이블 위치\n    middle: 'justify-center', // 레이블 영역의 가운데에 레이블 위치\n    right: 'justify-end'      // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)\n  }\n  // vertical일 때는 텍스트 정렬만 제어\n  const mapVertical = { left: 'text-left', middle: 'text-center', right: 'text-right' }\n  return props.orientation === 'horizontal' ? mapHorizontal[props.labelAlign] : mapVertical[props.labelAlign]\n})\n\n/** 행높이 토큰 클래스 매핑 */\nconst densityClass = computed(() => {\n  switch (props.styleType) {\n    case 'md': return 'form-density-md'\n    case 'lg': return 'form-density-lg'\n    default:   return 'form-density-sm'  // 기본값 변경: md → sm (컴팩트 디자인)\n  }\n})\n\n/** 컨트롤 클래스 (datepicker는 최대 너비 제한, radio vertical은 높이 제한 없음) */\nconst controlClass = computed(() => {\n  const baseClass = 'h-[var(--ctl-h)] leading-[var(--ctl-h)]'\n  \n  if (props.type === 'datepicker') {\n    return `${baseClass} max-w-xs`\n  }\n  \n  // Radio vertical일 때는 높이 제한 없음\n  if (props.type === 'radio' && props.radioDirection === 'vertical') {\n    return ''\n  }\n  \n  return baseClass\n})\n\n// 컴포넌트 매핑\nconst componentMap: Record<ComponentType, any> = {\n  input: JInput,\n  textarea: JTextarea,\n  checkbox: JCheckbox,\n  switch: JSwitch,\n  combo: JCombo,\n  radio: JRadio,\n  searchCombo: JSearchCombo,\n  datepicker: JDatepicker,\n}\n\n// type에 따라 렌더링할 컴포넌트 결정\nconst resolvedComponent = computed(() => {\n  return componentMap[props.type!] || JInput\n})\n\n// 외부에서 수동으로 에러 클리어 가능하도록 expose\ndefineExpose({\n  clearError: () => { internalError.value = '' }\n})\n</script>\n\n<template>\n  <div :class=\"['space-y-2 flex-1 min-w-0', densityClass]\">\n    <FieldGroup >\n      <Field :class=\"[\n          orientation === 'horizontal'\n            ? 'grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2'\n            : 'space-y-1 gap-1'\n        ]\"\n        :style=\"orientation === 'horizontal' ? `--label-w:${labelWidth};` : ''\"\n      >\n        <!-- 메인 라벨 (필수표기 포함) -->\n        <FieldLabel \n          :for=\"id\" \n          :class=\"[\n            'text-xs',  // 컴팩트 디자인을 위해 폰트 크기 축소\n            orientation === 'horizontal'\n              ? 'flex items-center h-[var(--ctl-h)] w-full'\n              : 'flex items-center',\n            labelAlignClass\n          ]\"\n        >\n          {{ label }}\n          <span v-if=\"required\" class=\"text-destructive ml-1\">*</span>\n        </FieldLabel>\n\n        <FieldContent \n          :class=\"[\n            orientation === 'horizontal'\n            ? 'min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0'\n            : 'space-y-2 gap-0'\n          ]\"\n        >\n          <!-- 체크박스/스위치: 항상 가로 정렬로 컨트롤 + 인라인 라벨 묶기 -->\n          <FieldGroup v-if=\"type === 'checkbox' || type === 'switch'\" data-slot=\"checkbox-group\">\n            <!-- 부모 orientation과 무관하게 수평 정렬 고정 -->\n            <Field orientation=\"horizontal\" class=\"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center\">\n              <component\n                :is=\"resolvedComponent\"\n                v-bind=\"controlProps\"\n                @update:modelValue=\"handleUpdateModelValue\"\n                @change=\"handleChange\"\n                @focus=\"handleFocus\"\n                @blur=\"handleBlur\"\n              />\n              <FieldLabel\n                v-if=\"inlineLabel\"\n                :for=\"id\"\n                class=\"text-xs font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]\"\n              >\n                {{ inlineLabel }}\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n\n          <!-- Radio 버튼: radioDirection에 따라 분기 처리 -->\n          <FieldGroup v-else-if=\"type === 'radio'\">\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n\n          <!-- 그 외 컨트롤: orientation 규칙 그대로 따름 -->\n          <FieldGroup v-else>\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n          \n          <!-- 설명/에러: 항상 컨트롤 '바로 아래'에 표시 -->\n          <FieldContent v-if=\"description || finalError\">\n            <FieldDescription v-if=\"description\">\n              {{ description }}\n            </FieldDescription>\n            <FieldError v-if=\"finalError\">\n              {{ finalError }}\n            </FieldError>\n          </FieldContent>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  </div>\n</template>\n\n\n\n<style>\n/* ⬇⬇ 높이 토큰(밀도) — 프로젝트 전역/레이아웃에 한 번 정의해두고 재사용하세요 */\n.form-density-sm { --ctl-h: 2rem;    /* 32px */ }\n.form-density-md { --ctl-h: 2.25rem; /* 36px (shadcn 기본에 근접) */ }\n.form-density-lg { --ctl-h: 2.5rem;  /* 40px */ }\n</style>"],"names":["FORM_FIELD_PROPS","props","__props","emit","__emit","internalError","ref","finalError","computed","controlProps","result","propsObj","key","defaultPlaceholders","validateField","currentValue","value","shouldValidateOnMount","handleUpdateModelValue","handleChange","handleFocus","event","handleBlur","labelAlignClass","mapHorizontal","mapVertical","densityClass","controlClass","baseClass","componentMap","JInput","JTextarea","JCheckbox","JSwitch","JCombo","JRadio","JSearchCombo","JDatepicker","resolvedComponent","__expose","_createElementBlock","_createVNode","_unref","FieldGroup","Field","_normalizeClass","_normalizeStyle","FieldLabel","_createTextVNode","_toDisplayString","_hoisted_1","FieldContent","_createBlock","_openBlock","_resolveDynamicComponent","_mergeProps","FieldDescription","FieldError"],"mappings":"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"}

package/components/molecules/JFormField.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as N, ref as R, computed as c, createElementBlock as D, openBlock as o, normalizeClass as p, createVNode as u, unref as a, withCtx as i, normalizeStyle as S, createTextVNode as y, createCommentVNode as d, toDisplayString as h, createBlock as n, resolveDynamicComponent as w, mergeProps as B } from "vue";
+import { defineComponent as N, ref as R, computed as s, createElementBlock as D, openBlock as o, normalizeClass as p, createVNode as d, unref as a, withCtx as i, normalizeStyle as S, createTextVNode as y, createCommentVNode as u, toDisplayString as h, createBlock as n, resolveDynamicComponent as w, mergeProps as B } from "vue";
 import "../shadcn/index.js";
 import "lucide-vue-next";
 import F from "../atoms/JInput.vue.js";
@@ -74,7 +74,7 @@ const Z = {
       "labelAlign",
       "labelWidth",
       "radioDirection"
-    ], t = l, f = A, s = R(""), g = c(() => t.errorMsg || s.value), b = c(() => {
+    ], t = l, f = A, c = R(""), g = s(() => t.errorMsg || c.value), b = s(() => {
       const e = {}, r = t;
       for (const m in r)
         E.includes(m) || (e[m] = r[m]);
@@ -98,10 +98,10 @@ const Z = {
       return t.radioDirection && t.type === "radio" && (e.styletype = t.radioDirection, delete e.radioDirection), e;
     }), x = (e) => {
       if (!t.required) return;
-      s.value = "";
+      c.value = "";
       const r = e !== void 0 ? e : t.modelValue;
-      t.type === "checkbox" || t.type === "switch" ? r !== "Y" && (s.value = "필수 항목입니다.") : (r == null || r === "") && (s.value = "필수 입력 항목입니다.");
-    }, P = c(() => !(t.modelValue !== null && t.modelValue !== void 0 && t.modelValue !== "")), k = (e) => {
+      t.type === "checkbox" || t.type === "switch" ? r !== "Y" && (c.value = "필수 항목입니다.") : (r == null || r === "") && (c.value = "필수 입력 항목입니다.");
+    }, P = s(() => !(t.modelValue !== null && t.modelValue !== void 0 && t.modelValue !== "")), k = (e) => {
       f("update:modelValue", e), x(e);
     }, _ = (e) => {
       f("change", e), x(e);
@@ -109,7 +109,7 @@ const Z = {
       f("focus", e);
     }, C = (e) => {
       P.value && x(), f("blur", e);
-    }, U = c(() => {
+    }, U = s(() => {
       const e = {
         left: "justify-start",
         // 레이블 영역의 왼쪽에 레이블 위치
@@ -119,16 +119,16 @@ const Z = {
         // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)
       }, r = { left: "text-left", middle: "text-center", right: "text-right" };
       return t.orientation === "horizontal" ? e[t.labelAlign] : r[t.labelAlign];
-    }), O = c(() => {
+    }), O = s(() => {
       switch (t.styleType) {
-        case "sm":
-          return "form-density-sm";
+        case "md":
+          return "form-density-md";
         case "lg":
           return "form-density-lg";
         default:
-          return "form-density-md";
+          return "form-density-sm";
       }
-    }), z = c(() => {
+    }), z = s(() => {
       const e = "h-[var(--ctl-h)] leading-[var(--ctl-h)]";
       return t.type === "datepicker" ? `${e} max-w-xs` : t.type === "radio" && t.radioDirection === "vertical" ? "" : e;
     }), q = {
@@ -140,37 +140,39 @@ const Z = {
       radio: Y,
       searchCombo: J,
       datepicker: K
-    }, V = c(() => q[t.type] || F);
+    }, V = s(() => q[t.type] || F);
     return j({
       clearError: () => {
-        s.value = "";
+        c.value = "";
       }
     }), (e, r) => (o(), D("div", {
       class: p(["space-y-2 flex-1 min-w-0", O.value])
     }, [
-      u(a(v), null, {
+      d(a(v), null, {
         default: i(() => [
-          u(a(T), {
+          d(a(T), {
             class: p([
               l.orientation === "horizontal" ? "grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2" : "space-y-1 gap-1"
             ]),
             style: S(l.orientation === "horizontal" ? `--label-w:${l.labelWidth};` : "")
           }, {
             default: i(() => [
-              u(a(M), {
+              d(a(M), {
                 for: l.id,
                 class: p([
+                  "text-xs",
+                  // 컴팩트 디자인을 위해 폰트 크기 축소
                   l.orientation === "horizontal" ? "flex items-center h-[var(--ctl-h)] w-full" : "flex items-center",
                   U.value
                 ])
               }, {
                 default: i(() => [
                   y(h(l.label) + " ", 1),
-                  l.required ? (o(), D("span", Z, "*")) : d("", !0)
+                  l.required ? (o(), D("span", Z, "*")) : u("", !0)
                 ]),
                 _: 1
               }, 8, ["for", "class"]),
-              u(a(L), {
+              d(a(L), {
                 class: p([
                   l.orientation === "horizontal" ? "min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0" : "space-y-2 gap-0"
                 ])
@@ -181,7 +183,7 @@ const Z = {
                     "data-slot": "checkbox-group"
                   }, {
                     default: i(() => [
-                      u(a(T), {
+                      d(a(T), {
                         orientation: "horizontal",
                         class: "flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center"
                       }, {
@@ -195,13 +197,13 @@ const Z = {
                           l.inlineLabel ? (o(), n(a(M), {
                             key: 0,
                             for: l.id,
-                            class: "font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]"
+                            class: "text-xs font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]"
                           }, {
                             default: i(() => [
                               y(h(l.inlineLabel), 1)
                             ]),
                             _: 1
-                          }, 8, ["for"])) : d("", !0)
+                          }, 8, ["for"])) : u("", !0)
                         ]),
                         _: 1
                       })
@@ -237,16 +239,16 @@ const Z = {
                           y(h(l.description), 1)
                         ]),
                         _: 1
-                      })) : d("", !0),
+                      })) : u("", !0),
                       g.value ? (o(), n(a(X), { key: 1 }, {
                         default: i(() => [
                           y(h(g.value), 1)
                         ]),
                         _: 1
-                      })) : d("", !0)
+                      })) : u("", !0)
                     ]),
                     _: 1
-                  })) : d("", !0)
+                  })) : u("", !0)
                 ]),
                 _: 1
               }, 8, ["class"])

package/components/molecules/JFormField.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JFormField.vue.js","sources":["../../../../src/components/molecules/JFormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Field, FieldContent, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@/components/shadcn'\nimport { JInput, JTextarea, JCheckbox, JSwitch, JCombo, JRadio, JSearchCombo, JDatepicker } from '@/components/atoms'\n\n// 컴포넌트 타입 정의\ntype ComponentType = 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker'\n\n// FormField 자체의 props (레이아웃 관련)\nconst FORM_FIELD_PROPS = [\n  'label',\n  'description',\n  'errorMsg',\n  'type',\n  'inlineLabel',\n  'orientation',\n  'labelAlign',\n  'labelWidth',\n  'radioDirection',\n] as const\n\nconst props = withDefaults(\n  defineProps<{\n    // ============ FormField 자체 props (레이아웃만) ============\n    /** 필드 레이블 */\n    label?: string\n    /** 필드 설명 (레이블 아래 표시) */\n    description?: string\n    /** 에러 메시지 */\n    errorMsg?: string\n    /** 컴포넌트 타입 (렌더링할 컴포넌트 지정) */\n    type?: ComponentType\n    /** 체크박스/스위치 타입일 때만 사용하는 옆 라벨 */\n    inlineLabel?: string\n    /** 레이블과 컨트롤의 배치 방향 */\n    orientation?: 'vertical' | 'horizontal' | 'responsive'\n    /** 레이블 텍스트 정렬 */\n    labelAlign?: 'left' | 'middle' | 'right'\n    /** 레이블 영역 너비 (horizontal orientation일 때만 적용) */\n    labelWidth?: string\n\n    // ============ 내부 컴포넌트로 전달할 공통 props ============\n    /** Input 요소의 id (label for와 연결) */\n    id?: string\n    /** v-model로 양방향 데이터 바인딩 */\n    modelValue?: any\n    /** 입력 전 표시되는 안내문 (Input/Textarea/Select/Combobox) */\n    placeholder?: string\n    /** 비활성화 상태 (전체) */\n    disabled?: boolean\n    /** 읽기 전용 상태 (Input/Textarea) */\n    readonly?: boolean\n    /** 필수 입력/선택 여부 (전체) */\n    required?: boolean\n    /** form 데이터 전송 시 키 이름 (전체) */\n    name?: string\n    /** 스타일 테마 지정 (J-prefixed 컴포넌트의 styleType) */\n    styleType?: string\n\n    // ============ Input 전용 props ============\n    /** Input 타입 (text, email, password 등) */\n    inputType?: string\n\n\n    // ============ Select/Combobox/Radio 전용 props ============\n    /** 선택 가능한 항목 배열 */\n    options?: Array<{ label: string; value: string | number; disabled?: boolean }>\n    \n    // ============ Select/Combobox 전용 props ============\n    /** 다중 선택 허용 여부 */\n    multiple?: boolean\n\n\n    // ============ Radio 전용 props ============\n    /** Radio 옵션 나열 방향 */\n    radioDirection?: 'horizontal' | 'vertical'\n  }>(),\n  {\n    type: 'input',\n    orientation: 'vertical',\n    labelAlign: 'left',\n    labelWidth: '8rem',\n    radioDirection: 'horizontal',\n  }\n)\n\n// 이벤트 정의\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n  'change': [value: any]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n// 내부 에러 상태 (props.error가 없을 때만 사용)\nconst internalError = ref<string>('')\n\n// 최종 에러 메시지 (외부 errorMsg가 우선)\nconst finalError = computed(() => props.errorMsg || internalError.value)\n\n// FormField 자체 props와 내부 컴포넌트 props 분리\nconst controlProps = computed(() => {\n  const result: Record<string, any> = {}\n  const propsObj = props as Record<string, any>\n  \n  for (const key in propsObj) {\n    // FormField 자체 props는 제외\n    if (!FORM_FIELD_PROPS.includes(key as any)) {\n      result[key] = propsObj[key]\n    }\n  }\n  \n  // inputType을 type으로 변환 (JInput 컴포넌트에서 사용)\n  if (props.inputType && props.type === 'input') {\n    result.type = props.inputType\n    delete result.inputType // inputType은 제거\n    \n    // placeholder가 없으면 inputType에 따라 기본값 설정\n    if (!props.placeholder) {\n      const defaultPlaceholders: Record<string, string> = {\n        'text': '텍스트를 입력하세요',\n        'email': '이메일을 입력하세요',\n        'password': '비밀번호를 입력하세요',\n        'tel': '전화번호를 입력하세요',\n        'url': 'URL을 입력하세요',\n        'number': '숫자를 입력하세요',\n        'search': '검색어를 입력하세요',\n        'date': '날짜를 선택하세요',\n        'time': '시간을 선택하세요',\n        'datetime-local': '날짜와 시간을 선택하세요',\n        'month': '월을 선택하세요',\n        'week': '주를 선택하세요',\n      }\n      \n      result.placeholder = defaultPlaceholders[props.inputType] || '입력하세요'\n    }\n  }\n  \n  // radioDirection을 styletype으로 변환 (JRadio 컴포넌트에서 사용)\n  if (props.radioDirection && props.type === 'radio') {\n    result.styletype = props.radioDirection\n    delete result.radioDirection // radioDirection은 제거\n  }\n  \n  return result\n})\n\n  // Built-in validation\n  const validateField = (currentValue?: any) => {\n    if (!props.required) return\n\n    internalError.value = ''\n\n    // 현재 값 또는 props.modelValue 사용\n    const value = currentValue !== undefined ? currentValue : props.modelValue\n\n    // Required 체크\n    if (props.type === 'checkbox' || props.type === 'switch') {\n      if (value !== 'Y') {\n        internalError.value = '필수 항목입니다.'\n      }\n    } else {\n      if (value === null || value === undefined || value === '') {\n        internalError.value = '필수 입력 항목입니다.'\n      }\n    }\n  }\n\n  // 초기 로드 시 validation 실행 (blur 이벤트에서만)\n  const shouldValidateOnMount = computed(() => {\n    // Storybook에서 초기값이 있는 경우 validation 스킵\n    if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {\n      return false\n    }\n    return true\n  })\n\n// 이벤트 핸들러\nconst handleUpdateModelValue = (value: any) => {\n  emit('update:modelValue', value)\n  \n  // 값이 변경되면 즉시 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleChange = (value: any) => {\n  emit('change', value)\n  \n  // change 이벤트에서도 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\n  const handleBlur = (event: FocusEvent) => {\n    // blur 시에만 validation 실행 (초기 로드 시에는 실행하지 않음)\n    if (shouldValidateOnMount.value) {\n      validateField()\n    }\n    emit('blur', event)\n  }\n\n// 레이블 정렬 클래스 (레이블 영역 내에서 레이블의 위치 제어)\nconst labelAlignClass = computed(() => {\n  // horizontal일 때는 레이블 영역 내에서 레이블의 위치를 제어\n  const mapHorizontal = { \n    left: 'justify-start',    // 레이블 영역의 왼쪽에 레이블 위치\n    middle: 'justify-center', // 레이블 영역의 가운데에 레이블 위치\n    right: 'justify-end'      // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)\n  }\n  // vertical일 때는 텍스트 정렬만 제어\n  const mapVertical = { left: 'text-left', middle: 'text-center', right: 'text-right' }\n  return props.orientation === 'horizontal' ? mapHorizontal[props.labelAlign] : mapVertical[props.labelAlign]\n})\n\n/** 행높이 토큰 클래스 매핑 */\nconst densityClass = computed(() => {\n  switch (props.styleType) {\n    case 'sm': return 'form-density-sm'\n    case 'lg': return 'form-density-lg'\n    default:   return 'form-density-md'\n  }\n})\n\n/** 컨트롤 클래스 (datepicker는 최대 너비 제한, radio vertical은 높이 제한 없음) */\nconst controlClass = computed(() => {\n  const baseClass = 'h-[var(--ctl-h)] leading-[var(--ctl-h)]'\n  \n  if (props.type === 'datepicker') {\n    return `${baseClass} max-w-xs`\n  }\n  \n  // Radio vertical일 때는 높이 제한 없음\n  if (props.type === 'radio' && props.radioDirection === 'vertical') {\n    return ''\n  }\n  \n  return baseClass\n})\n\n// 컴포넌트 매핑\nconst componentMap: Record<ComponentType, any> = {\n  input: JInput,\n  textarea: JTextarea,\n  checkbox: JCheckbox,\n  switch: JSwitch,\n  combo: JCombo,\n  radio: JRadio,\n  searchCombo: JSearchCombo,\n  datepicker: JDatepicker,\n}\n\n// type에 따라 렌더링할 컴포넌트 결정\nconst resolvedComponent = computed(() => {\n  return componentMap[props.type!] || JInput\n})\n\n// 외부에서 수동으로 에러 클리어 가능하도록 expose\ndefineExpose({\n  clearError: () => { internalError.value = '' }\n})\n</script>\n\n<template>\n  <div :class=\"['space-y-2 flex-1 min-w-0', densityClass]\">\n    <FieldGroup >\n      <Field :class=\"[\n          orientation === 'horizontal'\n            ? 'grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2'\n            : 'space-y-1 gap-1'\n        ]\"\n        :style=\"orientation === 'horizontal' ? `--label-w:${labelWidth};` : ''\"\n      >\n        <!-- 메인 라벨 (필수표기 포함) -->\n        <FieldLabel \n          :for=\"id\" \n          :class=\"[\n            orientation === 'horizontal'\n              ? 'flex items-center h-[var(--ctl-h)] w-full'\n              : 'flex items-center',\n            labelAlignClass\n          ]\"\n        >\n          {{ label }}\n          <span v-if=\"required\" class=\"text-destructive ml-1\">*</span>\n        </FieldLabel>\n\n        <FieldContent \n          :class=\"[\n            orientation === 'horizontal'\n            ? 'min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0'\n            : 'space-y-2 gap-0'\n          ]\"\n        >\n          <!-- 체크박스/스위치: 항상 가로 정렬로 컨트롤 + 인라인 라벨 묶기 -->\n          <FieldGroup v-if=\"type === 'checkbox' || type === 'switch'\" data-slot=\"checkbox-group\">\n            <!-- 부모 orientation과 무관하게 수평 정렬 고정 -->\n            <Field orientation=\"horizontal\" class=\"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center\">\n              <component\n                :is=\"resolvedComponent\"\n                v-bind=\"controlProps\"\n                @update:modelValue=\"handleUpdateModelValue\"\n                @change=\"handleChange\"\n                @focus=\"handleFocus\"\n                @blur=\"handleBlur\"\n              />\n              <FieldLabel\n                v-if=\"inlineLabel\"\n                :for=\"id\"\n                class=\"font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]\"\n              >\n                {{ inlineLabel }}\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n\n          <!-- Radio 버튼: radioDirection에 따라 분기 처리 -->\n          <FieldGroup v-else-if=\"type === 'radio'\">\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n\n          <!-- 그 외 컨트롤: orientation 규칙 그대로 따름 -->\n          <FieldGroup v-else>\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n          \n          <!-- 설명/에러: 항상 컨트롤 '바로 아래'에 표시 -->\n          <FieldContent v-if=\"description || finalError\">\n            <FieldDescription v-if=\"description\">\n              {{ description }}\n            </FieldDescription>\n            <FieldError v-if=\"finalError\">\n              {{ finalError }}\n            </FieldError>\n          </FieldContent>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  </div>\n</template>\n\n\n\n<style>\n/* ⬇⬇ 높이 토큰(밀도) — 프로젝트 전역/레이아웃에 한 번 정의해두고 재사용하세요 */\n.form-density-sm { --ctl-h: 2rem;    /* 32px */ }\n.form-density-md { --ctl-h: 2.25rem; /* 36px (shadcn 기본에 근접) */ }\n.form-density-lg { --ctl-h: 2.5rem;  /* 40px */ }\n</style>"],"names":["FORM_FIELD_PROPS","props","__props","emit","__emit","internalError","ref","finalError","computed","controlProps","result","propsObj","key","defaultPlaceholders","validateField","currentValue","value","shouldValidateOnMount","handleUpdateModelValue","handleChange","handleFocus","event","handleBlur","labelAlignClass","mapHorizontal","mapVertical","densityClass","controlClass","baseClass","componentMap","JInput","JTextarea","JCheckbox","JSwitch","JCombo","JRadio","JSearchCombo","JDatepicker","resolvedComponent","__expose","_createElementBlock","_createVNode","_unref","FieldGroup","Field","_normalizeClass","_normalizeStyle","FieldLabel","_createTextVNode","_toDisplayString","_hoisted_1","FieldContent","_createBlock","_openBlock","_resolveDynamicComponent","_mergeProps","FieldDescription","FieldError"],"mappings":"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"}
+{"version":3,"file":"JFormField.vue.js","sources":["../../../../src/components/molecules/JFormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Field, FieldContent, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@/components/shadcn'\nimport { JInput, JTextarea, JCheckbox, JSwitch, JCombo, JRadio, JSearchCombo, JDatepicker } from '@/components/atoms'\n\n// 컴포넌트 타입 정의\ntype ComponentType = 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker'\n\n// FormField 자체의 props (레이아웃 관련)\nconst FORM_FIELD_PROPS = [\n  'label',\n  'description',\n  'errorMsg',\n  'type',\n  'inlineLabel',\n  'orientation',\n  'labelAlign',\n  'labelWidth',\n  'radioDirection',\n] as const\n\nconst props = withDefaults(\n  defineProps<{\n    // ============ FormField 자체 props (레이아웃만) ============\n    /** 필드 레이블 */\n    label?: string\n    /** 필드 설명 (레이블 아래 표시) */\n    description?: string\n    /** 에러 메시지 */\n    errorMsg?: string\n    /** 컴포넌트 타입 (렌더링할 컴포넌트 지정) */\n    type?: ComponentType\n    /** 체크박스/스위치 타입일 때만 사용하는 옆 라벨 */\n    inlineLabel?: string\n    /** 레이블과 컨트롤의 배치 방향 */\n    orientation?: 'vertical' | 'horizontal' | 'responsive'\n    /** 레이블 텍스트 정렬 */\n    labelAlign?: 'left' | 'middle' | 'right'\n    /** 레이블 영역 너비 (horizontal orientation일 때만 적용) */\n    labelWidth?: string\n\n    // ============ 내부 컴포넌트로 전달할 공통 props ============\n    /** Input 요소의 id (label for와 연결) */\n    id?: string\n    /** v-model로 양방향 데이터 바인딩 */\n    modelValue?: any\n    /** 입력 전 표시되는 안내문 (Input/Textarea/Select/Combobox) */\n    placeholder?: string\n    /** 비활성화 상태 (전체) */\n    disabled?: boolean\n    /** 읽기 전용 상태 (Input/Textarea) */\n    readonly?: boolean\n    /** 필수 입력/선택 여부 (전체) */\n    required?: boolean\n    /** form 데이터 전송 시 키 이름 (전체) */\n    name?: string\n    /** 스타일 테마 지정 (J-prefixed 컴포넌트의 styleType) */\n    styleType?: string\n\n    // ============ Input 전용 props ============\n    /** Input 타입 (text, email, password 등) */\n    inputType?: string\n\n\n    // ============ Select/Combobox/Radio 전용 props ============\n    /** 선택 가능한 항목 배열 */\n    options?: Array<{ label: string; value: string | number; disabled?: boolean }>\n    \n    // ============ Select/Combobox 전용 props ============\n    /** 다중 선택 허용 여부 */\n    multiple?: boolean\n\n\n    // ============ Radio 전용 props ============\n    /** Radio 옵션 나열 방향 */\n    radioDirection?: 'horizontal' | 'vertical'\n  }>(),\n  {\n    type: 'input',\n    orientation: 'vertical',\n    labelAlign: 'left',\n    labelWidth: '8rem',\n    radioDirection: 'horizontal',\n  }\n)\n\n// 이벤트 정의\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n  'change': [value: any]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n// 내부 에러 상태 (props.error가 없을 때만 사용)\nconst internalError = ref<string>('')\n\n// 최종 에러 메시지 (외부 errorMsg가 우선)\nconst finalError = computed(() => props.errorMsg || internalError.value)\n\n// FormField 자체 props와 내부 컴포넌트 props 분리\nconst controlProps = computed(() => {\n  const result: Record<string, any> = {}\n  const propsObj = props as Record<string, any>\n  \n  for (const key in propsObj) {\n    // FormField 자체 props는 제외\n    if (!FORM_FIELD_PROPS.includes(key as any)) {\n      result[key] = propsObj[key]\n    }\n  }\n  \n  // inputType을 type으로 변환 (JInput 컴포넌트에서 사용)\n  if (props.inputType && props.type === 'input') {\n    result.type = props.inputType\n    delete result.inputType // inputType은 제거\n    \n    // placeholder가 없으면 inputType에 따라 기본값 설정\n    if (!props.placeholder) {\n      const defaultPlaceholders: Record<string, string> = {\n        'text': '텍스트를 입력하세요',\n        'email': '이메일을 입력하세요',\n        'password': '비밀번호를 입력하세요',\n        'tel': '전화번호를 입력하세요',\n        'url': 'URL을 입력하세요',\n        'number': '숫자를 입력하세요',\n        'search': '검색어를 입력하세요',\n        'date': '날짜를 선택하세요',\n        'time': '시간을 선택하세요',\n        'datetime-local': '날짜와 시간을 선택하세요',\n        'month': '월을 선택하세요',\n        'week': '주를 선택하세요',\n      }\n      \n      result.placeholder = defaultPlaceholders[props.inputType] || '입력하세요'\n    }\n  }\n  \n  // radioDirection을 styletype으로 변환 (JRadio 컴포넌트에서 사용)\n  if (props.radioDirection && props.type === 'radio') {\n    result.styletype = props.radioDirection\n    delete result.radioDirection // radioDirection은 제거\n  }\n  \n  return result\n})\n\n  // Built-in validation\n  const validateField = (currentValue?: any) => {\n    if (!props.required) return\n\n    internalError.value = ''\n\n    // 현재 값 또는 props.modelValue 사용\n    const value = currentValue !== undefined ? currentValue : props.modelValue\n\n    // Required 체크\n    if (props.type === 'checkbox' || props.type === 'switch') {\n      if (value !== 'Y') {\n        internalError.value = '필수 항목입니다.'\n      }\n    } else {\n      if (value === null || value === undefined || value === '') {\n        internalError.value = '필수 입력 항목입니다.'\n      }\n    }\n  }\n\n  // 초기 로드 시 validation 실행 (blur 이벤트에서만)\n  const shouldValidateOnMount = computed(() => {\n    // Storybook에서 초기값이 있는 경우 validation 스킵\n    if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {\n      return false\n    }\n    return true\n  })\n\n// 이벤트 핸들러\nconst handleUpdateModelValue = (value: any) => {\n  emit('update:modelValue', value)\n  \n  // 값이 변경되면 즉시 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleChange = (value: any) => {\n  emit('change', value)\n  \n  // change 이벤트에서도 validation 실행 (현재 값 전달)\n  validateField(value)\n}\n\nconst handleFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\n  const handleBlur = (event: FocusEvent) => {\n    // blur 시에만 validation 실행 (초기 로드 시에는 실행하지 않음)\n    if (shouldValidateOnMount.value) {\n      validateField()\n    }\n    emit('blur', event)\n  }\n\n// 레이블 정렬 클래스 (레이블 영역 내에서 레이블의 위치 제어)\nconst labelAlignClass = computed(() => {\n  // horizontal일 때는 레이블 영역 내에서 레이블의 위치를 제어\n  const mapHorizontal = { \n    left: 'justify-start',    // 레이블 영역의 왼쪽에 레이블 위치\n    middle: 'justify-center', // 레이블 영역의 가운데에 레이블 위치\n    right: 'justify-end'      // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)\n  }\n  // vertical일 때는 텍스트 정렬만 제어\n  const mapVertical = { left: 'text-left', middle: 'text-center', right: 'text-right' }\n  return props.orientation === 'horizontal' ? mapHorizontal[props.labelAlign] : mapVertical[props.labelAlign]\n})\n\n/** 행높이 토큰 클래스 매핑 */\nconst densityClass = computed(() => {\n  switch (props.styleType) {\n    case 'md': return 'form-density-md'\n    case 'lg': return 'form-density-lg'\n    default:   return 'form-density-sm'  // 기본값 변경: md → sm (컴팩트 디자인)\n  }\n})\n\n/** 컨트롤 클래스 (datepicker는 최대 너비 제한, radio vertical은 높이 제한 없음) */\nconst controlClass = computed(() => {\n  const baseClass = 'h-[var(--ctl-h)] leading-[var(--ctl-h)]'\n  \n  if (props.type === 'datepicker') {\n    return `${baseClass} max-w-xs`\n  }\n  \n  // Radio vertical일 때는 높이 제한 없음\n  if (props.type === 'radio' && props.radioDirection === 'vertical') {\n    return ''\n  }\n  \n  return baseClass\n})\n\n// 컴포넌트 매핑\nconst componentMap: Record<ComponentType, any> = {\n  input: JInput,\n  textarea: JTextarea,\n  checkbox: JCheckbox,\n  switch: JSwitch,\n  combo: JCombo,\n  radio: JRadio,\n  searchCombo: JSearchCombo,\n  datepicker: JDatepicker,\n}\n\n// type에 따라 렌더링할 컴포넌트 결정\nconst resolvedComponent = computed(() => {\n  return componentMap[props.type!] || JInput\n})\n\n// 외부에서 수동으로 에러 클리어 가능하도록 expose\ndefineExpose({\n  clearError: () => { internalError.value = '' }\n})\n</script>\n\n<template>\n  <div :class=\"['space-y-2 flex-1 min-w-0', densityClass]\">\n    <FieldGroup >\n      <Field :class=\"[\n          orientation === 'horizontal'\n            ? 'grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2'\n            : 'space-y-1 gap-1'\n        ]\"\n        :style=\"orientation === 'horizontal' ? `--label-w:${labelWidth};` : ''\"\n      >\n        <!-- 메인 라벨 (필수표기 포함) -->\n        <FieldLabel \n          :for=\"id\" \n          :class=\"[\n            'text-xs',  // 컴팩트 디자인을 위해 폰트 크기 축소\n            orientation === 'horizontal'\n              ? 'flex items-center h-[var(--ctl-h)] w-full'\n              : 'flex items-center',\n            labelAlignClass\n          ]\"\n        >\n          {{ label }}\n          <span v-if=\"required\" class=\"text-destructive ml-1\">*</span>\n        </FieldLabel>\n\n        <FieldContent \n          :class=\"[\n            orientation === 'horizontal'\n            ? 'min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0'\n            : 'space-y-2 gap-0'\n          ]\"\n        >\n          <!-- 체크박스/스위치: 항상 가로 정렬로 컨트롤 + 인라인 라벨 묶기 -->\n          <FieldGroup v-if=\"type === 'checkbox' || type === 'switch'\" data-slot=\"checkbox-group\">\n            <!-- 부모 orientation과 무관하게 수평 정렬 고정 -->\n            <Field orientation=\"horizontal\" class=\"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center\">\n              <component\n                :is=\"resolvedComponent\"\n                v-bind=\"controlProps\"\n                @update:modelValue=\"handleUpdateModelValue\"\n                @change=\"handleChange\"\n                @focus=\"handleFocus\"\n                @blur=\"handleBlur\"\n              />\n              <FieldLabel\n                v-if=\"inlineLabel\"\n                :for=\"id\"\n                class=\"text-xs font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]\"\n              >\n                {{ inlineLabel }}\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n\n          <!-- Radio 버튼: radioDirection에 따라 분기 처리 -->\n          <FieldGroup v-else-if=\"type === 'radio'\">\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n\n          <!-- 그 외 컨트롤: orientation 규칙 그대로 따름 -->\n          <FieldGroup v-else>\n            <component\n              :is=\"resolvedComponent\"\n              v-bind=\"controlProps\"\n              @update:modelValue=\"handleUpdateModelValue\"\n              @change=\"handleChange\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              :class=\"controlClass\"\n            />\n          </FieldGroup>\n          \n          <!-- 설명/에러: 항상 컨트롤 '바로 아래'에 표시 -->\n          <FieldContent v-if=\"description || finalError\">\n            <FieldDescription v-if=\"description\">\n              {{ description }}\n            </FieldDescription>\n            <FieldError v-if=\"finalError\">\n              {{ finalError }}\n            </FieldError>\n          </FieldContent>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  </div>\n</template>\n\n\n\n<style>\n/* ⬇⬇ 높이 토큰(밀도) — 프로젝트 전역/레이아웃에 한 번 정의해두고 재사용하세요 */\n.form-density-sm { --ctl-h: 2rem;    /* 32px */ }\n.form-density-md { --ctl-h: 2.25rem; /* 36px (shadcn 기본에 근접) */ }\n.form-density-lg { --ctl-h: 2.5rem;  /* 40px */ }\n</style>"],"names":["FORM_FIELD_PROPS","props","__props","emit","__emit","internalError","ref","finalError","computed","controlProps","result","propsObj","key","defaultPlaceholders","validateField","currentValue","value","shouldValidateOnMount","handleUpdateModelValue","handleChange","handleFocus","event","handleBlur","labelAlignClass","mapHorizontal","mapVertical","densityClass","controlClass","baseClass","componentMap","JInput","JTextarea","JCheckbox","JSwitch","JCombo","JRadio","JSearchCombo","JDatepicker","resolvedComponent","__expose","_createElementBlock","_createVNode","_unref","FieldGroup","Field","_normalizeClass","_normalizeStyle","FieldLabel","_createTextVNode","_toDisplayString","_hoisted_1","FieldContent","_createBlock","_openBlock","_resolveDynamicComponent","_mergeProps","FieldDescription","FieldError"],"mappings":"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"}

package/components/molecules/JTabs.vue.cjs

@@ -3,5 +3,5 @@
   for (const [t_key, t_val] of t_opts)
     t_merged[t_key] = t_val;
   return t_merged;
-};,u=t(e.default,[["__scopeId","data-v-0b269232"]]);exports.default=u;
+};,u=t(e.default,[["__scopeId","data-v-587d4336"]]);exports.default=u;
 //# sourceMappingURL=JTabs.vue.cjs.map

package/components/molecules/JTabs.vue.js

@@ -6,7 +6,7 @@ const t = (t_comp, t_opts) => {
     t_merged[t_key] = t_val;
   return t_merged;
 };
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0b269232"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-587d4336"]]);
 export {
   p as default
 };

package/components/molecules/JTabs.vue2.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const k=require("lucide-vue-next"),h=require("../../lib/utils.cjs"),x=require("../atoms/JIcon.vue.cjs"),y=require("../shadcn/Tabs.vue.cjs"),T=require("../shadcn/TabsList.vue.cjs"),b=require("../shadcn/TabsTrigger.vue.cjs"),B=require("../shadcn/TabsContent.vue.cjs"),N={class:"flex-1 truncate"},S=["aria-label","onClick"],E={class:"flex-1 w-full overflow-auto"},P={key:1,class:"p-4"},q={class:"text-muted-foreground"},V=e.defineComponent({__name:"JTabs",props:{tabs:{},activeTabId:{},className:{},listClassName:{},styletype:{default:"default"}},emits:["tabChange","tabClose","update:activeTabId"],setup(p,{emit:f}){const a=p,r=f,c=e.computed(()=>Array.isArray(a.tabs)?a.tabs:[]),s=e.ref(a.activeTabId||(c.value.length>0?c.value[0]?.id:"")||"");let o=!1;e.watch(()=>a.activeTabId,t=>{t!==void 0&&t!==s.value&&(s.value=t)},{immediate:!0}),e.watch(c,t=>{!a.activeTabId&&t.length>0&&!t.find(n=>n.id===s.value)&&t[0]&&(s.value=t[0].id)});const v=t=>{if(o)return;const n=String(t);n!==s.value&&(o=!0,s.value=n,r("update:activeTabId",n),r("tabChange",n),e.nextTick(()=>{o=!1}))},_=t=>{o||t===s.value||(o=!0,s.value=t,r("update:activeTabId",t),r("tabChange",t),e.nextTick(()=>{o=!1}))},m=(t,n)=>{t.stopPropagation(),r("tabClose",n)},C=e.computed(()=>{const t=["flex","flex-col","w-full","h-full"];return a.className&&t.push(a.className),t.join(" ")}),i={default:{tabPaddingClass:"px-3 py-2",tabTextSizeClass:"text-sm",listPaddingClass:"p-2"},minimal:{tabPaddingClass:"px-2 py-1",tabTextSizeClass:"text-xs",listPaddingClass:"p-1"}},u=e.computed(()=>i[a.styletype]??i.default),g=e.computed(()=>{const t=["w-full","justify-start",u.value.listPaddingClass];return a.listClassName&&t.push(a.listClassName),t.join(" ")});return(t,n)=>(e.openBlock(),e.createBlock(e.unref(y.default),{"model-value":s.value,"onUpdate:modelValue":v,orientation:"horizontal",class:e.normalizeClass(C.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(T.default),{class:e.normalizeClass(g.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,l=>(e.openBlock(),e.createBlock(e.unref(b.default),{key:l.id,value:l.id,onClick:d=>_(l.id),class:e.normalizeClass(e.unref(h.cn)("!flex !items-center !gap-2",u.value.tabPaddingClass,u.value.tabTextSizeClass))},{default:e.withCtx(()=>[l.icon?(e.openBlock(),e.createBlock(x.default,{key:0,name:l.icon,size:"sm",class:"flex-shrink-0"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",N,e.toDisplayString(l.label),1),l.closable?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"flex-shrink-0 h-4 w-4 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center","aria-label":`${l.label} 탭 닫기`,onClick:d=>m(d,l.id)},[e.createVNode(e.unref(k.X),{class:"h-3 w-3"})],8,S)):e.createCommentVNode("",!0)]),_:2},1032,["value","onClick","class"]))),128))]),_:1},8,["class"]),e.createElementVNode("div",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,l=>(e.openBlock(),e.createBlock(e.unref(B.default),{key:`content-${l.id}`,value:l.id,class:"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,`content-${l.id}`,{tab:l},()=>[l.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.component),e.mergeProps({key:0,ref_for:!0},l.props||{}),null,16)):(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("p",q,e.toDisplayString(l.label)+" 콘텐츠",1)]))],!0)]),_:2},1032,["value"]))),128))])]),_:3},8,["model-value","class"]))}});exports.default=V;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const k=require("lucide-vue-next"),h=require("../../lib/utils.cjs"),x=require("../atoms/JIcon.vue.cjs"),y=require("../shadcn/Tabs.vue.cjs"),T=require("../shadcn/TabsList.vue.cjs"),b=require("../shadcn/TabsTrigger.vue.cjs"),B=require("../shadcn/TabsContent.vue.cjs"),N={class:"flex-1 truncate"},S=["aria-label","onClick"],E={class:"flex-1 w-full overflow-auto"},P={key:1,class:"p-4"},q={class:"text-muted-foreground"},V=e.defineComponent({__name:"JTabs",props:{tabs:{},activeTabId:{},className:{},listClassName:{},styletype:{default:"default"}},emits:["tabChange","tabClose","update:activeTabId"],setup(p,{emit:f}){const a=p,r=f,c=e.computed(()=>Array.isArray(a.tabs)?a.tabs:[]),s=e.ref(a.activeTabId||(c.value.length>0?c.value[0]?.id:"")||"");let o=!1;e.watch(()=>a.activeTabId,t=>{t!==void 0&&t!==s.value&&(s.value=t)},{immediate:!0}),e.watch(c,t=>{!a.activeTabId&&t.length>0&&!t.find(n=>n.id===s.value)&&t[0]&&(s.value=t[0].id)});const v=t=>{if(o)return;const n=String(t);n!==s.value&&(o=!0,s.value=n,r("update:activeTabId",n),r("tabChange",n),e.nextTick(()=>{o=!1}))},_=t=>{o||t===s.value||(o=!0,s.value=t,r("update:activeTabId",t),r("tabChange",t),e.nextTick(()=>{o=!1}))},m=(t,n)=>{t.stopPropagation(),r("tabClose",n)},C=e.computed(()=>{const t=["flex","flex-col","w-full","h-full"];return a.className&&t.push(a.className),t.join(" ")}),i={default:{tabPaddingClass:"px-2.5 py-1",tabTextSizeClass:"text-xs",listPaddingClass:"p-0.5"},minimal:{tabPaddingClass:"px-2 py-0.5",tabTextSizeClass:"text-xs",listPaddingClass:"p-0.5"}},u=e.computed(()=>i[a.styletype]??i.default),g=e.computed(()=>{const t=["w-full","justify-start",u.value.listPaddingClass];return a.listClassName&&t.push(a.listClassName),t.join(" ")});return(t,n)=>(e.openBlock(),e.createBlock(e.unref(y.default),{"model-value":s.value,"onUpdate:modelValue":v,orientation:"horizontal",class:e.normalizeClass(C.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(T.default),{class:e.normalizeClass(g.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,l=>(e.openBlock(),e.createBlock(e.unref(b.default),{key:l.id,value:l.id,onClick:d=>_(l.id),class:e.normalizeClass(e.unref(h.cn)("!flex !items-center !gap-2",u.value.tabPaddingClass,u.value.tabTextSizeClass))},{default:e.withCtx(()=>[l.icon?(e.openBlock(),e.createBlock(x.default,{key:0,name:l.icon,size:"sm",class:"flex-shrink-0"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",N,e.toDisplayString(l.label),1),l.closable?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"flex-shrink-0 h-3.5 w-3.5 rounded-sm hover:bg-destructive/10 hover:text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring flex items-center justify-center","aria-label":`${l.label} 탭 닫기`,onClick:d=>m(d,l.id)},[e.createVNode(e.unref(k.X),{class:"h-2.5 w-2.5"})],8,S)):e.createCommentVNode("",!0)]),_:2},1032,["value","onClick","class"]))),128))]),_:1},8,["class"]),e.createElementVNode("div",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,l=>(e.openBlock(),e.createBlock(e.unref(B.default),{key:`content-${l.id}`,value:l.id,class:"h-full mt-0 data-[state=active]:flex data-[state=active]:flex-col"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,`content-${l.id}`,{tab:l},()=>[l.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.component),e.mergeProps({key:0,ref_for:!0},l.props||{}),null,16)):(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("p",q,e.toDisplayString(l.label)+" 콘텐츠",1)]))],!0)]),_:2},1032,["value"]))),128))])]),_:3},8,["model-value","class"]))}});exports.default=V;
 //# sourceMappingURL=JTabs.vue2.cjs.map