@j-solution/components 2.0.4 → 2.0.6

package/assets/styles/main.css

@@ -19,6 +19,28 @@
   /* 다크 모드 변수는 각 테마에서 정의됨 */
 }
 
+/* ── 반응형 토큰 오버라이드 ─────────────────────────────── */
+/* 모바일 (<768px): 터치 타겟 증가, 폰트 스케일링 */
+@media (max-width: 767px) {
+  :root {
+    --j-grid-row-h: 36px;
+    --j-grid-header-h: 32px;
+    --j-grid-footer-h: 28px;
+    --j-control-h: 36px;
+  }
+  body {
+    font-size: 14px;
+  }
+}
+
+/* 태블릿 (768px ~ 1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  :root {
+    --j-grid-row-h: 28px;
+    --j-grid-header-h: 28px;
+  }
+}
+
 * {
   border-color: hsl(var(--border));
 }

package/components/atoms/JCombo.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");const g=require("../shadcn/Select.vue.cjs"),v=require("../shadcn/SelectTrigger.vue.cjs"),y=require("../shadcn/SelectValue.vue.cjs"),b=require("../shadcn/SelectContent.vue.cjs"),V=require("../shadcn/SelectItem.vue.cjs"),d="__EMPTY_STRING__",x=e.defineComponent({__name:"JCombo",props:{modelValue:{},options:{default:()=>[]},placeholder:{default:"선택하세요"},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},id:{},multiple:{type:Boolean,default:!1},class:{},styletype:{default:"default"}},emits:["update:modelValue","change","focus","blur"],setup(r,{emit:c}){const a=r,s=c,n={default:{class:""},error:{class:"border-destructive focus:ring-destructive"},success:{class:"border-green-500 focus:ring-green-500"},warning:{class:"border-amber-500 focus:ring-amber-500"},sm:{class:"h-7 text-xs px-2"},lg:{class:"h-12 text-base px-4"}},i=e.computed(()=>{const t=a.styletype||"default";return[(n[t]??n.default)?.class,a.class].filter(Boolean).join(" ")}),o=t=>t===""||t===void 0?d:String(t),f=t=>t===d?"":t,_=e.computed(()=>a.options.map(t=>({...t,value:o(t.value)}))),p=e.computed(()=>o(a.modelValue)),m=t=>{const l=f(t);s("update:modelValue",l),s("change",l)};return(t,l)=>(e.openBlock(),e.createBlock(e.unref(g.default),{"model-value":p.value,disabled:r.disabled,required:r.required,name:r.name,"onUpdate:modelValue":l[0]||(l[0]=u=>m(u)),onFocus:l[1]||(l[1]=u=>s("focus",u)),onBlur:l[2]||(l[2]=u=>s("blur",u))},{default:e.withCtx(()=>[e.createVNode(e.unref(v.default),{id:r.id,class:e.normalizeClass(i.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(y.default),{placeholder:r.placeholder},null,8,["placeholder"])]),_:1},8,["id","class"]),e.createVNode(e.unref(b.default),null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,u=>(e.openBlock(),e.createBlock(e.unref(V.default),{key:u.value,value:u.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.label),1)]),_:2},1032,["value"]))),128))]),_:1})]),_:1},8,["model-value","disabled","required","name"]))}});exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const g=require("../shadcn/Select.vue.cjs"),v=require("../shadcn/SelectTrigger.vue.cjs"),y=require("../shadcn/SelectValue.vue.cjs"),b=require("../shadcn/SelectContent.vue.cjs"),V=require("../shadcn/SelectItem.vue.cjs"),d="__EMPTY_STRING__",x=e.defineComponent({__name:"JCombo",props:{modelValue:{},options:{default:()=>[]},placeholder:{default:""},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},id:{},multiple:{type:Boolean,default:!1},class:{},styletype:{default:"default"}},emits:["update:modelValue","change","focus","blur"],setup(r,{emit:c}){const a=r,s=c,n={default:{class:""},error:{class:"border-destructive focus:ring-destructive"},success:{class:"border-green-500 focus:ring-green-500"},warning:{class:"border-amber-500 focus:ring-amber-500"},sm:{class:"h-7 text-xs px-2"},lg:{class:"h-12 text-base px-4"}},i=e.computed(()=>{const t=a.styletype||"default";return[(n[t]??n.default)?.class,a.class].filter(Boolean).join(" ")}),o=t=>t===""||t===void 0?d:String(t),f=t=>t===d?"":t,_=e.computed(()=>a.options.map(t=>({...t,value:o(t.value)}))),p=e.computed(()=>o(a.modelValue)),m=t=>{const l=f(t);s("update:modelValue",l),s("change",l)};return(t,l)=>(e.openBlock(),e.createBlock(e.unref(g.default),{"model-value":p.value,disabled:r.disabled,required:r.required,name:r.name,"onUpdate:modelValue":l[0]||(l[0]=u=>m(u)),onFocus:l[1]||(l[1]=u=>s("focus",u)),onBlur:l[2]||(l[2]=u=>s("blur",u))},{default:e.withCtx(()=>[e.createVNode(e.unref(v.default),{id:r.id,class:e.normalizeClass(i.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(y.default),{placeholder:r.placeholder},null,8,["placeholder"])]),_:1},8,["id","class"]),e.createVNode(e.unref(b.default),null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,u=>(e.openBlock(),e.createBlock(e.unref(V.default),{key:u.value,value:u.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.label),1)]),_:2},1032,["value"]))),128))]),_:1})]),_:1},8,["model-value","disabled","required","name"]))}});exports.default=x;
 //# sourceMappingURL=JCombo.vue.cjs.map

package/components/atoms/JCombo.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JCombo.vue.cjs","sources":["../../../../src/components/atoms/JCombo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn'\n\n// 빈 문자열 value를 위한 내부 플레이스홀더\n// reka-ui SelectItem이 빈 문자열을 처리하지 못하는 버그 우회\nconst EMPTY_VALUE_PLACEHOLDER = '__EMPTY_STRING__'\n\nexport interface Option {\n  value: string | number\n  label: string\n}\n\ntype StyleType =\n  | 'default'   // 기본 스타일\n  | 'error'     // 에러 상태\n  | 'success'   // 성공 상태\n  | 'warning'   // 경고 상태\n  | 'sm'        // 작은 크기\n  | 'lg'        // 큰 크기\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number\n    options?: Option[]\n    placeholder?: string\n    disabled?: boolean\n    required?: boolean\n    name?: string\n    id?: string\n    multiple?: boolean\n    class?: string\n    /** 스타일 프리셋 */\n    styletype?: StyleType\n  }>(),\n  {\n    options: () => [],\n    placeholder: '선택하세요',\n    disabled: false,\n    required: false,\n    multiple: false,\n    styletype: 'default',\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number]\n  'change': [value: string | number]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n/**\n * styletype -> class 매핑\n */\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\n  default: { class: '' },\n  error: { \n    class: 'border-destructive focus:ring-destructive',\n  },\n  success: { \n    class: 'border-green-500 focus:ring-green-500',\n  },\n  warning: { \n    class: 'border-amber-500 focus:ring-amber-500',\n  },\n  sm: { \n    class: 'h-7 text-xs px-2',\n  },\n  lg: { \n    class: 'h-12 text-base px-4',\n  },\n}\n\nconst triggerClass = computed(() => {\n  const styleKey = props.styletype || 'default'\n  const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\n  return [preset?.class, props.class].filter(Boolean).join(' ')\n})\n\n/**\n * 외부 value를 내부 value로 변환\n * 빈 문자열 -> __EMPTY_STRING__\n */\nconst toInternalValue = (value: string | number | undefined): string => {\n  if (value === '' || value === undefined) {\n    return EMPTY_VALUE_PLACEHOLDER\n  }\n  return String(value)\n}\n\n/**\n * 내부 value를 외부 value로 변환\n * __EMPTY_STRING__ -> ''\n */\nconst toExternalValue = (value: string): string | number => {\n  if (value === EMPTY_VALUE_PLACEHOLDER) {\n    return ''\n  }\n  return value\n}\n\n/**\n * 옵션의 value를 내부 형식으로 변환\n * 빈 문자열 value를 가진 옵션 -> __EMPTY_STRING__으로 변환\n */\nconst processedOptions = computed(() => {\n  return props.options.map((option) => ({\n    ...option,\n    value: toInternalValue(option.value),\n  }))\n})\n\n/**\n * 현재 modelValue를 내부 형식으로 변환\n */\nconst internalModelValue = computed(() => toInternalValue(props.modelValue))\n\nconst handleChange = (internalValue: string) => {\n  const externalValue = toExternalValue(internalValue)\n  emit('update:modelValue', externalValue)\n  emit('change', externalValue)\n}\n</script>\n\n<template>\n  <Select\n    :model-value=\"internalModelValue\"\n    :disabled=\"disabled\"\n    :required=\"required\"\n    :name=\"name\"\n    @update:model-value=\"(value) => handleChange(value as string)\"\n    @focus=\"emit('focus', $event as FocusEvent)\"\n    @blur=\"emit('blur', $event as FocusEvent)\"\n  >\n    <SelectTrigger :id=\"id\" :class=\"triggerClass\">\n      <SelectValue :placeholder=\"placeholder\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectItem\n        v-for=\"option in processedOptions\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n      >\n        {{ option.label }}\n      </SelectItem>\n    </SelectContent>\n  </Select>\n</template>\n"],"names":["EMPTY_VALUE_PLACEHOLDER","props","__props","emit","__emit","STYLE_PRESETS","triggerClass","computed","styleKey","toInternalValue","value","toExternalValue","processedOptions","option","internalModelValue","handleChange","internalValue","externalValue","_createBlock","_unref","Select","_cache","$event","_createVNode","SelectTrigger","SelectValue","SelectContent","_createElementBlock","_Fragment","_renderList","SelectItem","_createTextVNode","_toDisplayString"],"mappings":"6XAMMA,EAA0B,yWAehC,MAAMC,EAAQC,EAwBRC,EAAOC,EAUPC,EAAsD,CAC1D,QAAS,CAAE,MAAO,EAAA,EAClB,MAAO,CACL,MAAO,2CAAA,EAET,QAAS,CACP,MAAO,uCAAA,EAET,QAAS,CACP,MAAO,uCAAA,EAET,GAAI,CACF,MAAO,kBAAA,EAET,GAAI,CACF,MAAO,qBAAA,CACT,EAGIC,EAAeC,EAAAA,SAAS,IAAM,CAClC,MAAMC,EAAWP,EAAM,WAAa,UAEpC,MAAO,EADQI,EAAcG,CAAQ,GAAKH,EAAc,UACxC,MAAOJ,EAAM,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,CAC9D,CAAC,EAMKQ,EAAmBC,GACnBA,IAAU,IAAMA,IAAU,OACrBV,EAEF,OAAOU,CAAK,EAOfC,EAAmBD,GACnBA,IAAUV,EACL,GAEFU,EAOHE,EAAmBL,EAAAA,SAAS,IACzBN,EAAM,QAAQ,IAAKY,IAAY,CACpC,GAAGA,EACH,MAAOJ,EAAgBI,EAAO,KAAK,CAAA,EACnC,CACH,EAKKC,EAAqBP,EAAAA,SAAS,IAAME,EAAgBR,EAAM,UAAU,CAAC,EAErEc,EAAgBC,GAA0B,CAC9C,MAAMC,EAAgBN,EAAgBK,CAAa,EACnDb,EAAK,oBAAqBc,CAAa,EACvCd,EAAK,SAAUc,CAAa,CAC9B,8BAIEC,EAAAA,YAqBSC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CApBN,cAAaN,EAAA,MACb,SAAUZ,EAAA,SACV,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,sBAAkBmB,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAGX,GAAUK,EAAaL,CAAK,GACjD,QAAKW,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEnB,EAAI,QAAUmB,CAAM,GAC3B,OAAID,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEnB,EAAI,OAASmB,CAAM,EAAA,qBAE1B,IAEgB,CAFhBC,cAEgBJ,EAAAA,MAAAK,EAAAA,OAAA,EAAA,CAFA,GAAItB,EAAA,GAAK,uBAAOI,EAAA,KAAY,CAAA,qBAC1C,IAA0C,CAA1CiB,EAAAA,YAA0CJ,EAAAA,MAAAM,SAAA,EAAA,CAA5B,YAAavB,EAAA,aAAW,KAAA,EAAA,CAAA,aAAA,CAAA,CAAA,0BAExCqB,EAAAA,YAQgBJ,EAAAA,MAAAO,SAAA,EAAA,KAAA,mBANZ,IAAkC,kBADpCC,EAAAA,mBAMaC,EAAAA,SAAA,KAAAC,EAAAA,WALMjB,EAAA,MAAVC,kBADTK,EAAAA,YAMaC,EAAAA,MAAAW,EAAAA,OAAA,EAAA,CAJV,IAAKjB,EAAO,MACZ,MAAOA,EAAO,KAAA,qBAEf,IAAkB,CAAfkB,EAAAA,gBAAAC,EAAAA,gBAAAnB,EAAO,KAAK,EAAA,CAAA,CAAA"}
+{"version":3,"file":"JCombo.vue.cjs","sources":["../../../../src/components/atoms/JCombo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn'\n\n// 빈 문자열 value를 위한 내부 플레이스홀더\n// reka-ui SelectItem이 빈 문자열을 처리하지 못하는 버그 우회\nconst EMPTY_VALUE_PLACEHOLDER = '__EMPTY_STRING__'\n\nexport interface Option {\n  value: string | number\n  label: string\n}\n\ntype StyleType =\n  | 'default'   // 기본 스타일\n  | 'error'     // 에러 상태\n  | 'success'   // 성공 상태\n  | 'warning'   // 경고 상태\n  | 'sm'        // 작은 크기\n  | 'lg'        // 큰 크기\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number\n    options?: Option[]\n    placeholder?: string\n    disabled?: boolean\n    required?: boolean\n    name?: string\n    id?: string\n    multiple?: boolean\n    class?: string\n    /** 스타일 프리셋 */\n    styletype?: StyleType\n  }>(),\n  {\n    options: () => [],\n    placeholder: '',\n    disabled: false,\n    required: false,\n    multiple: false,\n    styletype: 'default',\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number]\n  'change': [value: string | number]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n/**\n * styletype -> class 매핑\n */\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\n  default: { class: '' },\n  error: { \n    class: 'border-destructive focus:ring-destructive',\n  },\n  success: { \n    class: 'border-green-500 focus:ring-green-500',\n  },\n  warning: { \n    class: 'border-amber-500 focus:ring-amber-500',\n  },\n  sm: { \n    class: 'h-7 text-xs px-2',\n  },\n  lg: { \n    class: 'h-12 text-base px-4',\n  },\n}\n\nconst triggerClass = computed(() => {\n  const styleKey = props.styletype || 'default'\n  const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\n  return [preset?.class, props.class].filter(Boolean).join(' ')\n})\n\n/**\n * 외부 value를 내부 value로 변환\n * 빈 문자열 -> __EMPTY_STRING__\n */\nconst toInternalValue = (value: string | number | undefined): string => {\n  if (value === '' || value === undefined) {\n    return EMPTY_VALUE_PLACEHOLDER\n  }\n  return String(value)\n}\n\n/**\n * 내부 value를 외부 value로 변환\n * __EMPTY_STRING__ -> ''\n */\nconst toExternalValue = (value: string): string | number => {\n  if (value === EMPTY_VALUE_PLACEHOLDER) {\n    return ''\n  }\n  return value\n}\n\n/**\n * 옵션의 value를 내부 형식으로 변환\n * 빈 문자열 value를 가진 옵션 -> __EMPTY_STRING__으로 변환\n */\nconst processedOptions = computed(() => {\n  return props.options.map((option) => ({\n    ...option,\n    value: toInternalValue(option.value),\n  }))\n})\n\n/**\n * 현재 modelValue를 내부 형식으로 변환\n */\nconst internalModelValue = computed(() => toInternalValue(props.modelValue))\n\nconst handleChange = (internalValue: string) => {\n  const externalValue = toExternalValue(internalValue)\n  emit('update:modelValue', externalValue)\n  emit('change', externalValue)\n}\n</script>\n\n<template>\n  <Select\n    :model-value=\"internalModelValue\"\n    :disabled=\"disabled\"\n    :required=\"required\"\n    :name=\"name\"\n    @update:model-value=\"(value) => handleChange(value as string)\"\n    @focus=\"emit('focus', $event as FocusEvent)\"\n    @blur=\"emit('blur', $event as FocusEvent)\"\n  >\n    <SelectTrigger :id=\"id\" :class=\"triggerClass\">\n      <SelectValue :placeholder=\"placeholder\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectItem\n        v-for=\"option in processedOptions\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n      >\n        {{ option.label }}\n      </SelectItem>\n    </SelectContent>\n  </Select>\n</template>\n"],"names":["EMPTY_VALUE_PLACEHOLDER","props","__props","emit","__emit","STYLE_PRESETS","triggerClass","computed","styleKey","toInternalValue","value","toExternalValue","processedOptions","option","internalModelValue","handleChange","internalValue","externalValue","_createBlock","_unref","Select","_cache","$event","_createVNode","SelectTrigger","SelectValue","SelectContent","_createElementBlock","_Fragment","_renderList","SelectItem","_createTextVNode","_toDisplayString"],"mappings":"6XAMMA,EAA0B,oWAehC,MAAMC,EAAQC,EAwBRC,EAAOC,EAUPC,EAAsD,CAC1D,QAAS,CAAE,MAAO,EAAA,EAClB,MAAO,CACL,MAAO,2CAAA,EAET,QAAS,CACP,MAAO,uCAAA,EAET,QAAS,CACP,MAAO,uCAAA,EAET,GAAI,CACF,MAAO,kBAAA,EAET,GAAI,CACF,MAAO,qBAAA,CACT,EAGIC,EAAeC,EAAAA,SAAS,IAAM,CAClC,MAAMC,EAAWP,EAAM,WAAa,UAEpC,MAAO,EADQI,EAAcG,CAAQ,GAAKH,EAAc,UACxC,MAAOJ,EAAM,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,CAC9D,CAAC,EAMKQ,EAAmBC,GACnBA,IAAU,IAAMA,IAAU,OACrBV,EAEF,OAAOU,CAAK,EAOfC,EAAmBD,GACnBA,IAAUV,EACL,GAEFU,EAOHE,EAAmBL,EAAAA,SAAS,IACzBN,EAAM,QAAQ,IAAKY,IAAY,CACpC,GAAGA,EACH,MAAOJ,EAAgBI,EAAO,KAAK,CAAA,EACnC,CACH,EAKKC,EAAqBP,EAAAA,SAAS,IAAME,EAAgBR,EAAM,UAAU,CAAC,EAErEc,EAAgBC,GAA0B,CAC9C,MAAMC,EAAgBN,EAAgBK,CAAa,EACnDb,EAAK,oBAAqBc,CAAa,EACvCd,EAAK,SAAUc,CAAa,CAC9B,8BAIEC,EAAAA,YAqBSC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CApBN,cAAaN,EAAA,MACb,SAAUZ,EAAA,SACV,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,sBAAkBmB,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAGX,GAAUK,EAAaL,CAAK,GACjD,QAAKW,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEnB,EAAI,QAAUmB,CAAM,GAC3B,OAAID,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEnB,EAAI,OAASmB,CAAM,EAAA,qBAE1B,IAEgB,CAFhBC,cAEgBJ,EAAAA,MAAAK,EAAAA,OAAA,EAAA,CAFA,GAAItB,EAAA,GAAK,uBAAOI,EAAA,KAAY,CAAA,qBAC1C,IAA0C,CAA1CiB,EAAAA,YAA0CJ,EAAAA,MAAAM,SAAA,EAAA,CAA5B,YAAavB,EAAA,aAAW,KAAA,EAAA,CAAA,aAAA,CAAA,CAAA,0BAExCqB,EAAAA,YAQgBJ,EAAAA,MAAAO,SAAA,EAAA,KAAA,mBANZ,IAAkC,kBADpCC,EAAAA,mBAMaC,EAAAA,SAAA,KAAAC,EAAAA,WALMjB,EAAA,MAAVC,kBADTK,EAAAA,YAMaC,EAAAA,MAAAW,EAAAA,OAAA,EAAA,CAJV,IAAKjB,EAAO,MACZ,MAAOA,EAAO,KAAA,qBAEf,IAAkB,CAAfkB,EAAAA,gBAAAC,EAAAA,gBAAAnB,EAAO,KAAK,EAAA,CAAA,CAAA"}

package/components/atoms/JCombo.vue.js

@@ -10,7 +10,7 @@ const p = "__EMPTY_STRING__", F = /* @__PURE__ */ y({
   props: {
     modelValue: {},
     options: { default: () => [] },
-    placeholder: { default: "선택하세요" },
+    placeholder: { default: "" },
     disabled: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
     name: {},

package/components/atoms/JCombo.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JCombo.vue.js","sources":["../../../../src/components/atoms/JCombo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn'\n\n// 빈 문자열 value를 위한 내부 플레이스홀더\n// reka-ui SelectItem이 빈 문자열을 처리하지 못하는 버그 우회\nconst EMPTY_VALUE_PLACEHOLDER = '__EMPTY_STRING__'\n\nexport interface Option {\n  value: string | number\n  label: string\n}\n\ntype StyleType =\n  | 'default'   // 기본 스타일\n  | 'error'     // 에러 상태\n  | 'success'   // 성공 상태\n  | 'warning'   // 경고 상태\n  | 'sm'        // 작은 크기\n  | 'lg'        // 큰 크기\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number\n    options?: Option[]\n    placeholder?: string\n    disabled?: boolean\n    required?: boolean\n    name?: string\n    id?: string\n    multiple?: boolean\n    class?: string\n    /** 스타일 프리셋 */\n    styletype?: StyleType\n  }>(),\n  {\n    options: () => [],\n    placeholder: '선택하세요',\n    disabled: false,\n    required: false,\n    multiple: false,\n    styletype: 'default',\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number]\n  'change': [value: string | number]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n/**\n * styletype -> class 매핑\n */\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\n  default: { class: '' },\n  error: { \n    class: 'border-destructive focus:ring-destructive',\n  },\n  success: { \n    class: 'border-green-500 focus:ring-green-500',\n  },\n  warning: { \n    class: 'border-amber-500 focus:ring-amber-500',\n  },\n  sm: { \n    class: 'h-7 text-xs px-2',\n  },\n  lg: { \n    class: 'h-12 text-base px-4',\n  },\n}\n\nconst triggerClass = computed(() => {\n  const styleKey = props.styletype || 'default'\n  const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\n  return [preset?.class, props.class].filter(Boolean).join(' ')\n})\n\n/**\n * 외부 value를 내부 value로 변환\n * 빈 문자열 -> __EMPTY_STRING__\n */\nconst toInternalValue = (value: string | number | undefined): string => {\n  if (value === '' || value === undefined) {\n    return EMPTY_VALUE_PLACEHOLDER\n  }\n  return String(value)\n}\n\n/**\n * 내부 value를 외부 value로 변환\n * __EMPTY_STRING__ -> ''\n */\nconst toExternalValue = (value: string): string | number => {\n  if (value === EMPTY_VALUE_PLACEHOLDER) {\n    return ''\n  }\n  return value\n}\n\n/**\n * 옵션의 value를 내부 형식으로 변환\n * 빈 문자열 value를 가진 옵션 -> __EMPTY_STRING__으로 변환\n */\nconst processedOptions = computed(() => {\n  return props.options.map((option) => ({\n    ...option,\n    value: toInternalValue(option.value),\n  }))\n})\n\n/**\n * 현재 modelValue를 내부 형식으로 변환\n */\nconst internalModelValue = computed(() => toInternalValue(props.modelValue))\n\nconst handleChange = (internalValue: string) => {\n  const externalValue = toExternalValue(internalValue)\n  emit('update:modelValue', externalValue)\n  emit('change', externalValue)\n}\n</script>\n\n<template>\n  <Select\n    :model-value=\"internalModelValue\"\n    :disabled=\"disabled\"\n    :required=\"required\"\n    :name=\"name\"\n    @update:model-value=\"(value) => handleChange(value as string)\"\n    @focus=\"emit('focus', $event as FocusEvent)\"\n    @blur=\"emit('blur', $event as FocusEvent)\"\n  >\n    <SelectTrigger :id=\"id\" :class=\"triggerClass\">\n      <SelectValue :placeholder=\"placeholder\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectItem\n        v-for=\"option in processedOptions\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n      >\n        {{ option.label }}\n      </SelectItem>\n    </SelectContent>\n  </Select>\n</template>\n"],"names":["EMPTY_VALUE_PLACEHOLDER","props","__props","emit","__emit","STYLE_PRESETS","triggerClass","computed","styleKey","toInternalValue","value","toExternalValue","processedOptions","option","internalModelValue","handleChange","internalValue","externalValue","_createBlock","_unref","Select","_cache","$event","_createVNode","SelectTrigger","SelectValue","SelectContent","_createElementBlock","_Fragment","_renderList","SelectItem","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;AAMA,MAAMA,IAA0B;;;;;;;;;;;;;;;;AAehC,UAAMC,IAAQC,GAwBRC,IAAOC,GAUPC,IAAsD;AAAA,MAC1D,SAAS,EAAE,OAAO,GAAA;AAAA,MAClB,OAAO;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,IAAI;AAAA,QACF,OAAO;AAAA,MAAA;AAAA,MAET,IAAI;AAAA,QACF,OAAO;AAAA,MAAA;AAAA,IACT,GAGIC,IAAeC,EAAS,MAAM;AAClC,YAAMC,IAAWP,EAAM,aAAa;AAEpC,aAAO,EADQI,EAAcG,CAAQ,KAAKH,EAAc,UACxC,OAAOJ,EAAM,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IAC9D,CAAC,GAMKQ,IAAkB,CAACC,MACnBA,MAAU,MAAMA,MAAU,SACrBV,IAEF,OAAOU,CAAK,GAOfC,IAAkB,CAACD,MACnBA,MAAUV,IACL,KAEFU,GAOHE,IAAmBL,EAAS,MACzBN,EAAM,QAAQ,IAAI,CAACY,OAAY;AAAA,MACpC,GAAGA;AAAA,MACH,OAAOJ,EAAgBI,EAAO,KAAK;AAAA,IAAA,EACnC,CACH,GAKKC,IAAqBP,EAAS,MAAME,EAAgBR,EAAM,UAAU,CAAC,GAErEc,IAAe,CAACC,MAA0B;AAC9C,YAAMC,IAAgBN,EAAgBK,CAAa;AACnD,MAAAb,EAAK,qBAAqBc,CAAa,GACvCd,EAAK,UAAUc,CAAa;AAAA,IAC9B;2BAIEC,EAqBSC,EAAAC,CAAA,GAAA;AAAA,MApBN,eAAaN,EAAA;AAAA,MACb,UAAUZ,EAAA;AAAA,MACV,UAAUA,EAAA;AAAA,MACV,MAAMA,EAAA;AAAA,MACN,uBAAkBmB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAGX,MAAUK,EAAaL,CAAK;AAAA,MACjD,SAAKW,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEnB,EAAI,SAAUmB,CAAM;AAAA,MAC3B,QAAID,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEnB,EAAI,QAASmB,CAAM;AAAA,IAAA;iBAE1B,MAEgB;AAAA,QAFhBC,EAEgBJ,EAAAK,CAAA,GAAA;AAAA,UAFA,IAAItB,EAAA;AAAA,UAAK,SAAOI,EAAA,KAAY;AAAA,QAAA;qBAC1C,MAA0C;AAAA,YAA1CiB,EAA0CJ,EAAAM,CAAA,GAAA,EAA5B,aAAavB,EAAA,eAAW,MAAA,GAAA,CAAA,aAAA,CAAA;AAAA,UAAA;;;QAExCqB,EAQgBJ,EAAAO,CAAA,GAAA,MAAA;AAAA,qBANZ,MAAkC;AAAA,oBADpCC,EAMaC,GAAA,MAAAC,EALMjB,EAAA,OAAgB,CAA1BC,YADTK,EAMaC,EAAAW,CAAA,GAAA;AAAA,cAJV,KAAKjB,EAAO;AAAA,cACZ,OAAOA,EAAO;AAAA,YAAA;yBAEf,MAAkB;AAAA,gBAAfkB,EAAAC,EAAAnB,EAAO,KAAK,GAAA,CAAA;AAAA,cAAA;;;;;;;;;;;"}
+{"version":3,"file":"JCombo.vue.js","sources":["../../../../src/components/atoms/JCombo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn'\n\n// 빈 문자열 value를 위한 내부 플레이스홀더\n// reka-ui SelectItem이 빈 문자열을 처리하지 못하는 버그 우회\nconst EMPTY_VALUE_PLACEHOLDER = '__EMPTY_STRING__'\n\nexport interface Option {\n  value: string | number\n  label: string\n}\n\ntype StyleType =\n  | 'default'   // 기본 스타일\n  | 'error'     // 에러 상태\n  | 'success'   // 성공 상태\n  | 'warning'   // 경고 상태\n  | 'sm'        // 작은 크기\n  | 'lg'        // 큰 크기\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number\n    options?: Option[]\n    placeholder?: string\n    disabled?: boolean\n    required?: boolean\n    name?: string\n    id?: string\n    multiple?: boolean\n    class?: string\n    /** 스타일 프리셋 */\n    styletype?: StyleType\n  }>(),\n  {\n    options: () => [],\n    placeholder: '',\n    disabled: false,\n    required: false,\n    multiple: false,\n    styletype: 'default',\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number]\n  'change': [value: string | number]\n  'focus': [event: FocusEvent]\n  'blur': [event: FocusEvent]\n}>()\n\n/**\n * styletype -> class 매핑\n */\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\n  default: { class: '' },\n  error: { \n    class: 'border-destructive focus:ring-destructive',\n  },\n  success: { \n    class: 'border-green-500 focus:ring-green-500',\n  },\n  warning: { \n    class: 'border-amber-500 focus:ring-amber-500',\n  },\n  sm: { \n    class: 'h-7 text-xs px-2',\n  },\n  lg: { \n    class: 'h-12 text-base px-4',\n  },\n}\n\nconst triggerClass = computed(() => {\n  const styleKey = props.styletype || 'default'\n  const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\n  return [preset?.class, props.class].filter(Boolean).join(' ')\n})\n\n/**\n * 외부 value를 내부 value로 변환\n * 빈 문자열 -> __EMPTY_STRING__\n */\nconst toInternalValue = (value: string | number | undefined): string => {\n  if (value === '' || value === undefined) {\n    return EMPTY_VALUE_PLACEHOLDER\n  }\n  return String(value)\n}\n\n/**\n * 내부 value를 외부 value로 변환\n * __EMPTY_STRING__ -> ''\n */\nconst toExternalValue = (value: string): string | number => {\n  if (value === EMPTY_VALUE_PLACEHOLDER) {\n    return ''\n  }\n  return value\n}\n\n/**\n * 옵션의 value를 내부 형식으로 변환\n * 빈 문자열 value를 가진 옵션 -> __EMPTY_STRING__으로 변환\n */\nconst processedOptions = computed(() => {\n  return props.options.map((option) => ({\n    ...option,\n    value: toInternalValue(option.value),\n  }))\n})\n\n/**\n * 현재 modelValue를 내부 형식으로 변환\n */\nconst internalModelValue = computed(() => toInternalValue(props.modelValue))\n\nconst handleChange = (internalValue: string) => {\n  const externalValue = toExternalValue(internalValue)\n  emit('update:modelValue', externalValue)\n  emit('change', externalValue)\n}\n</script>\n\n<template>\n  <Select\n    :model-value=\"internalModelValue\"\n    :disabled=\"disabled\"\n    :required=\"required\"\n    :name=\"name\"\n    @update:model-value=\"(value) => handleChange(value as string)\"\n    @focus=\"emit('focus', $event as FocusEvent)\"\n    @blur=\"emit('blur', $event as FocusEvent)\"\n  >\n    <SelectTrigger :id=\"id\" :class=\"triggerClass\">\n      <SelectValue :placeholder=\"placeholder\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectItem\n        v-for=\"option in processedOptions\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n      >\n        {{ option.label }}\n      </SelectItem>\n    </SelectContent>\n  </Select>\n</template>\n"],"names":["EMPTY_VALUE_PLACEHOLDER","props","__props","emit","__emit","STYLE_PRESETS","triggerClass","computed","styleKey","toInternalValue","value","toExternalValue","processedOptions","option","internalModelValue","handleChange","internalValue","externalValue","_createBlock","_unref","Select","_cache","$event","_createVNode","SelectTrigger","SelectValue","SelectContent","_createElementBlock","_Fragment","_renderList","SelectItem","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;AAMA,MAAMA,IAA0B;;;;;;;;;;;;;;;;AAehC,UAAMC,IAAQC,GAwBRC,IAAOC,GAUPC,IAAsD;AAAA,MAC1D,SAAS,EAAE,OAAO,GAAA;AAAA,MAClB,OAAO;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,IAAI;AAAA,QACF,OAAO;AAAA,MAAA;AAAA,MAET,IAAI;AAAA,QACF,OAAO;AAAA,MAAA;AAAA,IACT,GAGIC,IAAeC,EAAS,MAAM;AAClC,YAAMC,IAAWP,EAAM,aAAa;AAEpC,aAAO,EADQI,EAAcG,CAAQ,KAAKH,EAAc,UACxC,OAAOJ,EAAM,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IAC9D,CAAC,GAMKQ,IAAkB,CAACC,MACnBA,MAAU,MAAMA,MAAU,SACrBV,IAEF,OAAOU,CAAK,GAOfC,IAAkB,CAACD,MACnBA,MAAUV,IACL,KAEFU,GAOHE,IAAmBL,EAAS,MACzBN,EAAM,QAAQ,IAAI,CAACY,OAAY;AAAA,MACpC,GAAGA;AAAA,MACH,OAAOJ,EAAgBI,EAAO,KAAK;AAAA,IAAA,EACnC,CACH,GAKKC,IAAqBP,EAAS,MAAME,EAAgBR,EAAM,UAAU,CAAC,GAErEc,IAAe,CAACC,MAA0B;AAC9C,YAAMC,IAAgBN,EAAgBK,CAAa;AACnD,MAAAb,EAAK,qBAAqBc,CAAa,GACvCd,EAAK,UAAUc,CAAa;AAAA,IAC9B;2BAIEC,EAqBSC,EAAAC,CAAA,GAAA;AAAA,MApBN,eAAaN,EAAA;AAAA,MACb,UAAUZ,EAAA;AAAA,MACV,UAAUA,EAAA;AAAA,MACV,MAAMA,EAAA;AAAA,MACN,uBAAkBmB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAGX,MAAUK,EAAaL,CAAK;AAAA,MACjD,SAAKW,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEnB,EAAI,SAAUmB,CAAM;AAAA,MAC3B,QAAID,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEnB,EAAI,QAASmB,CAAM;AAAA,IAAA;iBAE1B,MAEgB;AAAA,QAFhBC,EAEgBJ,EAAAK,CAAA,GAAA;AAAA,UAFA,IAAItB,EAAA;AAAA,UAAK,SAAOI,EAAA,KAAY;AAAA,QAAA;qBAC1C,MAA0C;AAAA,YAA1CiB,EAA0CJ,EAAAM,CAAA,GAAA,EAA5B,aAAavB,EAAA,eAAW,MAAA,GAAA,CAAA,aAAA,CAAA;AAAA,UAAA;;;QAExCqB,EAQgBJ,EAAAO,CAAA,GAAA,MAAA;AAAA,qBANZ,MAAkC;AAAA,oBADpCC,EAMaC,GAAA,MAAAC,EALMjB,EAAA,OAAgB,CAA1BC,YADTK,EAMaC,EAAAW,CAAA,GAAA;AAAA,cAJV,KAAKjB,EAAO;AAAA,cACZ,OAAOA,EAAO;AAAA,YAAA;yBAEf,MAAkB;AAAA,gBAAfkB,EAAAC,EAAAnB,EAAO,KAAK,GAAA,CAAA;AAAA,cAAA;;;;;;;;;;;"}

package/components/atoms/JEditor.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-f2b1f27c"]]);exports.default=u;
+};,u=t(e.default,[["__scopeId","data-v-0b947eae"]]);exports.default=u;
 //# sourceMappingURL=JEditor.vue.cjs.map

package/components/atoms/JEditor.vue.js

@@ -6,8 +6,8 @@ const t = (t_comp, t_opts) => {
     t_merged[t_key] = t_val;
   return t_merged;
 };
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-f2b1f27c"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0b947eae"]]);
 export {
-  p as default
+  m as default
 };
 //# sourceMappingURL=JEditor.vue.js.map

package/components/atoms/JEditor.vue2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JEditor.vue2.cjs","sources":["../../../../src/components/atoms/JEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted } from 'vue'\nimport { MdEditor } from 'md-editor-v3'\nimport 'md-editor-v3/lib/style.css'\n\nconst props = withDefaults(\n  defineProps<{\n    /** 마크다운 내용 (v-model) */\n    modelValue?: string\n    /** 플레이스홀더 텍스트 */\n    placeholder?: string\n    /** 비활성화 상태 */\n    disabled?: boolean\n    /** 읽기 전용 상태 */\n    readonly?: boolean\n    /** 에디터 높이 */\n    height?: string | number\n    /** 테마 (light/dark) - 설정하지 않으면 자동으로 다크모드 감지 */\n    theme?: 'light' | 'dark'\n    /** 추가 CSS 클래스 */\n    class?: string\n  }>(),\n  {\n    modelValue: '',\n    placeholder: '마크다운을 입력하세요...',\n    disabled: false,\n    readonly: false,\n    height: '300px',\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'change': [value: string]\n  'save': [value: string]\n}>()\n\n// 다크모드 상태\nconst isDarkMode = ref(false)\n\n// 다크모드 감지 함수\nconst detectDarkMode = () => {\n  isDarkMode.value = document.documentElement.classList.contains('dark')\n}\n\n// 현재 테마 계산 (props.theme이 있으면 그것 사용, 없으면 자동 감지)\nconst currentTheme = computed(() => {\n  if (props.theme) {\n    return props.theme\n  }\n  return isDarkMode.value ? 'dark' : 'light'\n})\n\n// MutationObserver로 다크모드 변경 감지\nlet darkModeObserver: MutationObserver | null = null\n\nonMounted(() => {\n  // 초기 다크모드 상태 감지\n  detectDarkMode()\n  \n  // MutationObserver로 class 변경 감지\n  darkModeObserver = new MutationObserver(() => {\n    detectDarkMode()\n  })\n  \n  darkModeObserver.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['class'],\n  })\n})\n\nonUnmounted(() => {\n  if (darkModeObserver) {\n    darkModeObserver.disconnect()\n  }\n})\n\nconst handleChange = (value: string) => {\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nconst handleSave = (value: string) => {\n  emit('save', value)\n}\n</script>\n\n<template>\n  <div :class=\"['j-editor-wrapper', props.class]\">\n    <MdEditor\n      :model-value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :read-only=\"readonly\"\n      :editor-class-name=\"'j-editor'\"\n      :preview-class-name=\"'j-editor-preview'\"\n      :style=\"{ height: typeof height === 'number' ? `${height}px` : height }\"\n      :theme=\"currentTheme\"\n      language=\"en-US\"\n      @update:model-value=\"handleChange\"\n      @on-save=\"handleSave\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.j-editor-wrapper {\n  @apply w-full;\n}\n</style>\n"],"names":["props","__props","emit","__emit","isDarkMode","ref","detectDarkMode","currentTheme","computed","darkModeObserver","onMounted","onUnmounted","handleChange","value","handleSave","_createElementBlock","_normalizeClass","_createVNode","_unref","MdEditor","_normalizeStyle"],"mappings":"+jBAKA,MAAMA,EAAQC,EA0BRC,EAAOC,EAOPC,EAAaC,EAAAA,IAAI,EAAK,EAGtBC,EAAiB,IAAM,CAC3BF,EAAW,MAAQ,SAAS,gBAAgB,UAAU,SAAS,MAAM,CACvE,EAGMG,EAAeC,EAAAA,SAAS,IACxBR,EAAM,MACDA,EAAM,MAERI,EAAW,MAAQ,OAAS,OACpC,EAGD,IAAIK,EAA4C,KAEhDC,EAAAA,UAAU,IAAM,CAEdJ,EAAA,EAGAG,EAAmB,IAAI,iBAAiB,IAAM,CAC5CH,EAAA,CACF,CAAC,EAEDG,EAAiB,QAAQ,SAAS,gBAAiB,CACjD,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAAA,CAC1B,CACH,CAAC,EAEDE,EAAAA,YAAY,IAAM,CACZF,GACFA,EAAiB,WAAA,CAErB,CAAC,EAED,MAAMG,EAAgBC,GAAkB,CACtCX,EAAK,oBAAqBW,CAAK,EAC/BX,EAAK,SAAUW,CAAK,CACtB,EAEMC,EAAcD,GAAkB,CACpCX,EAAK,OAAQW,CAAK,CACpB,8BAIEE,EAAAA,mBAcM,MAAA,CAdA,MAAKC,EAAAA,eAAA,CAAA,mBAAuBhB,EAAM,KAAK,CAAA,CAAA,GAC3CiB,cAYEC,EAAAA,MAAAC,EAAAA,QAAA,EAAA,CAXC,cAAalB,EAAA,WACb,YAAaA,EAAA,YACb,SAAUA,EAAA,SACV,YAAWA,EAAA,SACX,oBAAmB,WACnB,qBAAoB,mBACpB,MAAKmB,EAAAA,eAAA,CAAA,OAAA,OAAmBnB,EAAA,QAAM,SAAA,GAAmBA,EAAA,MAAM,KAAOA,EAAA,OAAM,EACpE,MAAOM,EAAA,MACR,SAAS,QACR,sBAAoBK,EACpB,SAASE,CAAA"}
+{"version":3,"file":"JEditor.vue2.cjs","sources":["../../../../src/components/atoms/JEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted } from 'vue'\nimport { MdEditor } from 'md-editor-v3'\nimport 'md-editor-v3/lib/style.css'\n\nconst props = withDefaults(\n  defineProps<{\n    /** 마크다운 내용 (v-model) */\n    modelValue?: string\n    /** 플레이스홀더 텍스트 */\n    placeholder?: string\n    /** 비활성화 상태 */\n    disabled?: boolean\n    /** 읽기 전용 상태 */\n    readonly?: boolean\n    /** 에디터 높이 */\n    height?: string | number\n    /** 테마 (light/dark) - 설정하지 않으면 자동으로 다크모드 감지 */\n    theme?: 'light' | 'dark'\n    /** 추가 CSS 클래스 */\n    class?: string\n  }>(),\n  {\n    modelValue: '',\n    placeholder: '마크다운을 입력하세요...',\n    disabled: false,\n    readonly: false,\n    height: '300px',\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'change': [value: string]\n  'save': [value: string]\n}>()\n\n// 다크모드 상태\nconst isDarkMode = ref(false)\n\n// 다크모드 감지 함수\nconst detectDarkMode = () => {\n  isDarkMode.value = document.documentElement.classList.contains('dark')\n}\n\n// 현재 테마 계산 (props.theme이 있으면 그것 사용, 없으면 자동 감지)\nconst currentTheme = computed(() => {\n  if (props.theme) {\n    return props.theme\n  }\n  return isDarkMode.value ? 'dark' : 'light'\n})\n\n// MutationObserver로 다크모드 변경 감지\nlet darkModeObserver: MutationObserver | null = null\n\nonMounted(() => {\n  // 초기 다크모드 상태 감지\n  detectDarkMode()\n  \n  // MutationObserver로 class 변경 감지\n  darkModeObserver = new MutationObserver(() => {\n    detectDarkMode()\n  })\n  \n  darkModeObserver.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['class'],\n  })\n})\n\nonUnmounted(() => {\n  if (darkModeObserver) {\n    darkModeObserver.disconnect()\n  }\n})\n\nconst handleChange = (value: string) => {\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nconst handleSave = (value: string) => {\n  emit('save', value)\n}\n</script>\n\n<template>\n  <div :class=\"['j-editor-wrapper', props.class]\">\n    <MdEditor\n      :model-value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :read-only=\"readonly\"\n      :editor-class-name=\"'j-editor'\"\n      :preview-class-name=\"'j-editor-preview'\"\n      :style=\"{ height: typeof height === 'number' ? `${height}px` : height }\"\n      :theme=\"currentTheme\"\n      language=\"en-US\"\n      @update:model-value=\"handleChange\"\n      @on-save=\"handleSave\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.j-editor-wrapper {\n  @apply w-full h-full;\n}\n</style>\n"],"names":["props","__props","emit","__emit","isDarkMode","ref","detectDarkMode","currentTheme","computed","darkModeObserver","onMounted","onUnmounted","handleChange","value","handleSave","_createElementBlock","_normalizeClass","_createVNode","_unref","MdEditor","_normalizeStyle"],"mappings":"+jBAKA,MAAMA,EAAQC,EA0BRC,EAAOC,EAOPC,EAAaC,EAAAA,IAAI,EAAK,EAGtBC,EAAiB,IAAM,CAC3BF,EAAW,MAAQ,SAAS,gBAAgB,UAAU,SAAS,MAAM,CACvE,EAGMG,EAAeC,EAAAA,SAAS,IACxBR,EAAM,MACDA,EAAM,MAERI,EAAW,MAAQ,OAAS,OACpC,EAGD,IAAIK,EAA4C,KAEhDC,EAAAA,UAAU,IAAM,CAEdJ,EAAA,EAGAG,EAAmB,IAAI,iBAAiB,IAAM,CAC5CH,EAAA,CACF,CAAC,EAEDG,EAAiB,QAAQ,SAAS,gBAAiB,CACjD,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAAA,CAC1B,CACH,CAAC,EAEDE,EAAAA,YAAY,IAAM,CACZF,GACFA,EAAiB,WAAA,CAErB,CAAC,EAED,MAAMG,EAAgBC,GAAkB,CACtCX,EAAK,oBAAqBW,CAAK,EAC/BX,EAAK,SAAUW,CAAK,CACtB,EAEMC,EAAcD,GAAkB,CACpCX,EAAK,OAAQW,CAAK,CACpB,8BAIEE,EAAAA,mBAcM,MAAA,CAdA,MAAKC,EAAAA,eAAA,CAAA,mBAAuBhB,EAAM,KAAK,CAAA,CAAA,GAC3CiB,cAYEC,EAAAA,MAAAC,EAAAA,QAAA,EAAA,CAXC,cAAalB,EAAA,WACb,YAAaA,EAAA,YACb,SAAUA,EAAA,SACV,YAAWA,EAAA,SACX,oBAAmB,WACnB,qBAAoB,mBACpB,MAAKmB,EAAAA,eAAA,CAAA,OAAA,OAAmBnB,EAAA,QAAM,SAAA,GAAmBA,EAAA,MAAM,KAAOA,EAAA,OAAM,EACpE,MAAOM,EAAA,MACR,SAAS,QACR,sBAAoBK,EACpB,SAASE,CAAA"}

package/components/atoms/JEditor.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"JEditor.vue2.js","sources":["../../../../src/components/atoms/JEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted } from 'vue'\nimport { MdEditor } from 'md-editor-v3'\nimport 'md-editor-v3/lib/style.css'\n\nconst props = withDefaults(\n  defineProps<{\n    /** 마크다운 내용 (v-model) */\n    modelValue?: string\n    /** 플레이스홀더 텍스트 */\n    placeholder?: string\n    /** 비활성화 상태 */\n    disabled?: boolean\n    /** 읽기 전용 상태 */\n    readonly?: boolean\n    /** 에디터 높이 */\n    height?: string | number\n    /** 테마 (light/dark) - 설정하지 않으면 자동으로 다크모드 감지 */\n    theme?: 'light' | 'dark'\n    /** 추가 CSS 클래스 */\n    class?: string\n  }>(),\n  {\n    modelValue: '',\n    placeholder: '마크다운을 입력하세요...',\n    disabled: false,\n    readonly: false,\n    height: '300px',\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'change': [value: string]\n  'save': [value: string]\n}>()\n\n// 다크모드 상태\nconst isDarkMode = ref(false)\n\n// 다크모드 감지 함수\nconst detectDarkMode = () => {\n  isDarkMode.value = document.documentElement.classList.contains('dark')\n}\n\n// 현재 테마 계산 (props.theme이 있으면 그것 사용, 없으면 자동 감지)\nconst currentTheme = computed(() => {\n  if (props.theme) {\n    return props.theme\n  }\n  return isDarkMode.value ? 'dark' : 'light'\n})\n\n// MutationObserver로 다크모드 변경 감지\nlet darkModeObserver: MutationObserver | null = null\n\nonMounted(() => {\n  // 초기 다크모드 상태 감지\n  detectDarkMode()\n  \n  // MutationObserver로 class 변경 감지\n  darkModeObserver = new MutationObserver(() => {\n    detectDarkMode()\n  })\n  \n  darkModeObserver.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['class'],\n  })\n})\n\nonUnmounted(() => {\n  if (darkModeObserver) {\n    darkModeObserver.disconnect()\n  }\n})\n\nconst handleChange = (value: string) => {\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nconst handleSave = (value: string) => {\n  emit('save', value)\n}\n</script>\n\n<template>\n  <div :class=\"['j-editor-wrapper', props.class]\">\n    <MdEditor\n      :model-value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :read-only=\"readonly\"\n      :editor-class-name=\"'j-editor'\"\n      :preview-class-name=\"'j-editor-preview'\"\n      :style=\"{ height: typeof height === 'number' ? `${height}px` : height }\"\n      :theme=\"currentTheme\"\n      language=\"en-US\"\n      @update:model-value=\"handleChange\"\n      @on-save=\"handleSave\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.j-editor-wrapper {\n  @apply w-full;\n}\n</style>\n"],"names":["props","__props","emit","__emit","isDarkMode","ref","detectDarkMode","currentTheme","computed","darkModeObserver","onMounted","onUnmounted","handleChange","value","handleSave","_createElementBlock","_normalizeClass","_createVNode","_unref","MdEditor","_normalizeStyle"],"mappings":";;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GA0BRC,IAAOC,GAOPC,IAAaC,EAAI,EAAK,GAGtBC,IAAiB,MAAM;AAC3B,MAAAF,EAAW,QAAQ,SAAS,gBAAgB,UAAU,SAAS,MAAM;AAAA,IACvE,GAGMG,IAAeC,EAAS,MACxBR,EAAM,QACDA,EAAM,QAERI,EAAW,QAAQ,SAAS,OACpC;AAGD,QAAIK,IAA4C;AAEhD,IAAAC,EAAU,MAAM;AAEd,MAAAJ,EAAA,GAGAG,IAAmB,IAAI,iBAAiB,MAAM;AAC5C,QAAAH,EAAA;AAAA,MACF,CAAC,GAEDG,EAAiB,QAAQ,SAAS,iBAAiB;AAAA,QACjD,YAAY;AAAA,QACZ,iBAAiB,CAAC,OAAO;AAAA,MAAA,CAC1B;AAAA,IACH,CAAC,GAEDE,EAAY,MAAM;AAChB,MAAIF,KACFA,EAAiB,WAAA;AAAA,IAErB,CAAC;AAED,UAAMG,IAAe,CAACC,MAAkB;AACtC,MAAAX,EAAK,qBAAqBW,CAAK,GAC/BX,EAAK,UAAUW,CAAK;AAAA,IACtB,GAEMC,IAAa,CAACD,MAAkB;AACpC,MAAAX,EAAK,QAAQW,CAAK;AAAA,IACpB;2BAIEE,EAcM,OAAA;AAAA,MAdA,OAAKC,EAAA,CAAA,oBAAuBhB,EAAM,KAAK,CAAA;AAAA,IAAA;MAC3CiB,EAYEC,EAAAC,CAAA,GAAA;AAAA,QAXC,eAAalB,EAAA;AAAA,QACb,aAAaA,EAAA;AAAA,QACb,UAAUA,EAAA;AAAA,QACV,aAAWA,EAAA;AAAA,QACX,qBAAmB;AAAA,QACnB,sBAAoB;AAAA,QACpB,OAAKmB,EAAA,EAAA,QAAA,OAAmBnB,EAAA,UAAM,WAAA,GAAmBA,EAAA,MAAM,OAAOA,EAAA,QAAM;AAAA,QACpE,OAAOM,EAAA;AAAA,QACR,UAAS;AAAA,QACR,uBAAoBK;AAAA,QACpB,UAASE;AAAA,MAAA;;;;"}
+{"version":3,"file":"JEditor.vue2.js","sources":["../../../../src/components/atoms/JEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted } from 'vue'\nimport { MdEditor } from 'md-editor-v3'\nimport 'md-editor-v3/lib/style.css'\n\nconst props = withDefaults(\n  defineProps<{\n    /** 마크다운 내용 (v-model) */\n    modelValue?: string\n    /** 플레이스홀더 텍스트 */\n    placeholder?: string\n    /** 비활성화 상태 */\n    disabled?: boolean\n    /** 읽기 전용 상태 */\n    readonly?: boolean\n    /** 에디터 높이 */\n    height?: string | number\n    /** 테마 (light/dark) - 설정하지 않으면 자동으로 다크모드 감지 */\n    theme?: 'light' | 'dark'\n    /** 추가 CSS 클래스 */\n    class?: string\n  }>(),\n  {\n    modelValue: '',\n    placeholder: '마크다운을 입력하세요...',\n    disabled: false,\n    readonly: false,\n    height: '300px',\n  },\n)\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'change': [value: string]\n  'save': [value: string]\n}>()\n\n// 다크모드 상태\nconst isDarkMode = ref(false)\n\n// 다크모드 감지 함수\nconst detectDarkMode = () => {\n  isDarkMode.value = document.documentElement.classList.contains('dark')\n}\n\n// 현재 테마 계산 (props.theme이 있으면 그것 사용, 없으면 자동 감지)\nconst currentTheme = computed(() => {\n  if (props.theme) {\n    return props.theme\n  }\n  return isDarkMode.value ? 'dark' : 'light'\n})\n\n// MutationObserver로 다크모드 변경 감지\nlet darkModeObserver: MutationObserver | null = null\n\nonMounted(() => {\n  // 초기 다크모드 상태 감지\n  detectDarkMode()\n  \n  // MutationObserver로 class 변경 감지\n  darkModeObserver = new MutationObserver(() => {\n    detectDarkMode()\n  })\n  \n  darkModeObserver.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['class'],\n  })\n})\n\nonUnmounted(() => {\n  if (darkModeObserver) {\n    darkModeObserver.disconnect()\n  }\n})\n\nconst handleChange = (value: string) => {\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nconst handleSave = (value: string) => {\n  emit('save', value)\n}\n</script>\n\n<template>\n  <div :class=\"['j-editor-wrapper', props.class]\">\n    <MdEditor\n      :model-value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :read-only=\"readonly\"\n      :editor-class-name=\"'j-editor'\"\n      :preview-class-name=\"'j-editor-preview'\"\n      :style=\"{ height: typeof height === 'number' ? `${height}px` : height }\"\n      :theme=\"currentTheme\"\n      language=\"en-US\"\n      @update:model-value=\"handleChange\"\n      @on-save=\"handleSave\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.j-editor-wrapper {\n  @apply w-full h-full;\n}\n</style>\n"],"names":["props","__props","emit","__emit","isDarkMode","ref","detectDarkMode","currentTheme","computed","darkModeObserver","onMounted","onUnmounted","handleChange","value","handleSave","_createElementBlock","_normalizeClass","_createVNode","_unref","MdEditor","_normalizeStyle"],"mappings":";;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GA0BRC,IAAOC,GAOPC,IAAaC,EAAI,EAAK,GAGtBC,IAAiB,MAAM;AAC3B,MAAAF,EAAW,QAAQ,SAAS,gBAAgB,UAAU,SAAS,MAAM;AAAA,IACvE,GAGMG,IAAeC,EAAS,MACxBR,EAAM,QACDA,EAAM,QAERI,EAAW,QAAQ,SAAS,OACpC;AAGD,QAAIK,IAA4C;AAEhD,IAAAC,EAAU,MAAM;AAEd,MAAAJ,EAAA,GAGAG,IAAmB,IAAI,iBAAiB,MAAM;AAC5C,QAAAH,EAAA;AAAA,MACF,CAAC,GAEDG,EAAiB,QAAQ,SAAS,iBAAiB;AAAA,QACjD,YAAY;AAAA,QACZ,iBAAiB,CAAC,OAAO;AAAA,MAAA,CAC1B;AAAA,IACH,CAAC,GAEDE,EAAY,MAAM;AAChB,MAAIF,KACFA,EAAiB,WAAA;AAAA,IAErB,CAAC;AAED,UAAMG,IAAe,CAACC,MAAkB;AACtC,MAAAX,EAAK,qBAAqBW,CAAK,GAC/BX,EAAK,UAAUW,CAAK;AAAA,IACtB,GAEMC,IAAa,CAACD,MAAkB;AACpC,MAAAX,EAAK,QAAQW,CAAK;AAAA,IACpB;2BAIEE,EAcM,OAAA;AAAA,MAdA,OAAKC,EAAA,CAAA,oBAAuBhB,EAAM,KAAK,CAAA;AAAA,IAAA;MAC3CiB,EAYEC,EAAAC,CAAA,GAAA;AAAA,QAXC,eAAalB,EAAA;AAAA,QACb,aAAaA,EAAA;AAAA,QACb,UAAUA,EAAA;AAAA,QACV,aAAWA,EAAA;AAAA,QACX,qBAAmB;AAAA,QACnB,sBAAoB;AAAA,QACpB,OAAKmB,EAAA,EAAA,QAAA,OAAmBnB,EAAA,UAAM,WAAA,GAAmBA,EAAA,MAAM,OAAOA,EAAA,QAAM;AAAA,QACpE,OAAOM,EAAA;AAAA,QACR,UAAS;AAAA,QACR,uBAAoBK;AAAA,QACpB,UAASE;AAAA,MAAA;;;;"}

package/components/atoms/JSplitter.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-25c4d908"]]);exports.default=u;
+};,u=t(e.default,[["__scopeId","data-v-ebf6747f"]]);exports.default=u;
 //# sourceMappingURL=JSplitter.vue.cjs.map

package/components/atoms/JSplitter.vue.js

@@ -6,8 +6,8 @@ const o = (o_comp, o_opts) => {
     o_merged[o_key] = o_val;
   return o_merged;
 };
-const _ = /* @__PURE__ */ o(t, [["__scopeId", "data-v-25c4d908"]]);
+const e = /* @__PURE__ */ o(t, [["__scopeId", "data-v-ebf6747f"]]);
 export {
-  _ as default
+  e as default
 };
 //# sourceMappingURL=JSplitter.vue.js.map

package/components/atoms/JSplitter.vue2.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("../../lib/utils.cjs"),r=require("../shadcn/resizable/ResizableHandle.vue.cjs"),u=require("../shadcn/resizable/ResizablePanelGroup.vue.cjs"),l=require("reka-ui"),o=e.defineComponent({__name:"JSplitter",props:{direction:{default:"horizontal"},defaultSize:{default:40},minSize:{default:20},maxSize:{},secondMinSize:{},secondMaxSize:{},withHandle:{type:Boolean,default:!1},gap:{default:2},class:{}},setup(t){const i=t,n=e.computed(()=>100-i.defaultSize);return(a,d)=>(e.openBlock(),e.createBlock(e.unref(u.default),{direction:t.direction,class:e.normalizeClass(e.unref(s.cn)("jsplitter-group min-h-0 min-w-0",a.$props.class))},{default:e.withCtx(()=>[e.createVNode(e.unref(l.SplitterPanel),{"default-size":t.defaultSize,"min-size":t.minSize,"max-size":t.maxSize,class:e.normalizeClass(t.gap>0?t.direction==="horizontal"?"pr-[calc(var(--gap)/2)]":"pb-[calc(var(--gap)/2)]":""),style:e.normalizeStyle(t.gap>0?{"--gap":`${t.gap}px`}:{})},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"first",{},void 0,!0),e.renderSlot(a.$slots,"left",{},void 0,!0),e.renderSlot(a.$slots,"top",{},void 0,!0)]),_:3},8,["default-size","min-size","max-size","class","style"]),e.createVNode(e.unref(r.default),{"with-handle":t.withHandle,class:"jsplitter-handle"},null,8,["with-handle"]),e.createVNode(e.unref(l.SplitterPanel),{"default-size":n.value,"min-size":t.secondMinSize,"max-size":t.secondMaxSize,class:e.normalizeClass(t.gap>0?t.direction==="horizontal"?"pl-[calc(var(--gap)/2)]":"pt-[calc(var(--gap)/2)]":""),style:e.normalizeStyle(t.gap>0?{"--gap":`${t.gap}px`}:{})},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"second",{},void 0,!0),e.renderSlot(a.$slots,"right",{},void 0,!0),e.renderSlot(a.$slots,"bottom",{},void 0,!0)]),_:3},8,["default-size","min-size","max-size","class","style"])]),_:3},8,["direction","class"]))}});exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("../../lib/utils.cjs"),d=require("../shadcn/resizable/ResizableHandle.vue.cjs"),c=require("../shadcn/resizable/ResizablePanelGroup.vue.cjs"),s=require("reka-ui"),f=require("../../composables/useBreakpoint.cjs"),z=e.defineComponent({__name:"JSplitter",props:{direction:{default:"horizontal"},defaultSize:{default:40},minSize:{default:20},maxSize:{},secondMinSize:{},secondMaxSize:{},withHandle:{type:Boolean,default:!1},gap:{default:2},class:{},responsive:{type:Boolean,default:!0}},setup(t){const i=t,{isMobile:r}=f.useBreakpoint(),l=e.computed(()=>i.responsive&&r.value&&i.direction==="horizontal"?"vertical":i.direction),n=e.computed(()=>i.responsive&&r.value&&i.direction==="horizontal"?50:i.defaultSize),o=e.computed(()=>100-n.value);return(a,p)=>(e.openBlock(),e.createBlock(e.unref(c.default),{direction:l.value,class:e.normalizeClass(e.unref(u.cn)("jsplitter-group min-h-0 min-w-0",a.$props.class))},{default:e.withCtx(()=>[e.createVNode(e.unref(s.SplitterPanel),{"default-size":n.value,"min-size":t.minSize,"max-size":t.maxSize,class:e.normalizeClass(t.gap>0?l.value==="horizontal"?"pr-[calc(var(--gap)/2)]":"pb-[calc(var(--gap)/2)]":""),style:e.normalizeStyle(t.gap>0?{"--gap":`${t.gap}px`}:{})},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"first",{},void 0,!0),e.renderSlot(a.$slots,"left",{},void 0,!0),e.renderSlot(a.$slots,"top",{},void 0,!0)]),_:3},8,["default-size","min-size","max-size","class","style"]),e.createVNode(e.unref(d.default),{"with-handle":t.withHandle,class:"jsplitter-handle"},null,8,["with-handle"]),e.createVNode(e.unref(s.SplitterPanel),{"default-size":o.value,"min-size":t.secondMinSize,"max-size":t.secondMaxSize,class:e.normalizeClass(t.gap>0?l.value==="horizontal"?"pl-[calc(var(--gap)/2)]":"pt-[calc(var(--gap)/2)]":""),style:e.normalizeStyle(t.gap>0?{"--gap":`${t.gap}px`}:{})},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"second",{},void 0,!0),e.renderSlot(a.$slots,"right",{},void 0,!0),e.renderSlot(a.$slots,"bottom",{},void 0,!0)]),_:3},8,["default-size","min-size","max-size","class","style"])]),_:3},8,["direction","class"]))}});exports.default=z;
 //# sourceMappingURL=JSplitter.vue2.cjs.map

package/components/atoms/JSplitter.vue2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JSplitter.vue2.cjs","sources":["../../../../src/components/atoms/JSplitter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n} from '@/components/shadcn/resizable'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nconst props = withDefaults(\n  defineProps<{\n    /** 분할 방향 (horizontal: 좌우, vertical: 상하) */\n    direction?: Orientation\n    /** 첫 번째 패널의 기본 크기 (%) */\n    defaultSize?: number\n    /** 첫 번째 패널의 최소 크기 (%) */\n    minSize?: number\n    /** 첫 번째 패널의 최대 크기 (%) */\n    maxSize?: number\n    /** 두 번째 패널의 최소 크기 (%) */\n    secondMinSize?: number\n    /** 두 번째 패널의 최대 크기 (%) */\n    secondMaxSize?: number\n    /** ResizableHandle에 grip 아이콘 표시 여부 */\n    withHandle?: boolean\n    /** 패널 간 여백 (px) */\n    gap?: number\n    /** 추가 CSS 클래스 */\n    class?: string\n  }>(),\n  {\n    direction: 'horizontal',\n    defaultSize: 40,\n    minSize: 20,\n    withHandle: false,\n    gap: 2,\n  },\n)\n\n// 두 번째 패널의 기본 크기 계산\nconst secondDefaultSize = computed(() => 100 - props.defaultSize)\n</script>\n\n<template>\n  <ResizablePanelGroup :direction=\"direction\" :class=\"cn('jsplitter-group min-h-0 min-w-0', $props.class)\">\n    <!-- 첫 번째 패널 (좌측/상단) -->\n    <ResizablePanel \n      :default-size=\"defaultSize\" \n      :min-size=\"minSize\" \n      :max-size=\"maxSize\"\n      :class=\"gap > 0 ? (direction === 'horizontal' ? 'pr-[calc(var(--gap)/2)]' : 'pb-[calc(var(--gap)/2)]') : ''\"\n      :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n    >\n      <slot name=\"first\" />\n      <!-- direction=\"horizontal\"일 때 left, vertical일 때 top으로도 사용 가능 -->\n      <slot name=\"left\" />\n      <slot name=\"top\" />\n    </ResizablePanel>\n\n    <!-- 크기 조정 핸들 -->\n    <ResizableHandle :with-handle=\"withHandle\" class=\"jsplitter-handle\" />\n\n    <!-- 두 번째 패널 (우측/하단) -->\n    <ResizablePanel\n      :default-size=\"secondDefaultSize\"\n      :min-size=\"secondMinSize\"\n      :max-size=\"secondMaxSize\"\n      :class=\"gap > 0 ? (direction === 'horizontal' ? 'pl-[calc(var(--gap)/2)]' : 'pt-[calc(var(--gap)/2)]') : ''\"\n      :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n    >\n      <slot name=\"second\" />\n      <!-- direction=\"horizontal\"일 때 right, vertical일 때 bottom으로도 사용 가능 -->\n      <slot name=\"right\" />\n      <slot name=\"bottom\" />\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n\n<style scoped>\n/* ── overflow 보호 ──────────────────────────────────────────────────── */\n:deep(.jsplitter-group [data-panel]) {\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ── horizontal 핸들: 8px 히트영역 ─────────────────────────────────── */\n:deep(.jsplitter-handle[data-orientation=\"horizontal\"]) {\n  width: 8px !important;\n  background: transparent !important;\n  position: relative;\n  z-index: 3;\n  transition: background 0.15s ease;\n}\n\n/* ── vertical 핸들: 8px 히트영역 ───────────────────────────────────── */\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]) {\n  height: 8px !important;\n  background: transparent !important;\n  position: relative;\n  z-index: 3;\n  transition: background 0.15s ease;\n}\n\n/* ── 시각선: 1px (after:w-1 override) ──────────────────────────────── */\n:deep(.jsplitter-handle::after) {\n  width: 1px !important;\n  background: hsl(var(--border)) !important;\n  transition: background 0.15s ease, width 0.12s ease !important;\n}\n\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]::after) {\n  height: 1px !important;\n  width: 100% !important;\n}\n\n/* ── 그립 도트 인디케이터 (::before) ───────────────────────────────── */\n:deep(.jsplitter-handle::before) {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3px;\n  height: 20px;\n  background-image: radial-gradient(circle, hsl(var(--muted-foreground) / 0.5) 1px, transparent 1px);\n  background-size: 3px 6px;\n  background-repeat: repeat-y;\n  border-radius: 2px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  pointer-events: none;\n  z-index: 4;\n}\n\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]::before) {\n  width: 20px;\n  height: 3px;\n  background-size: 6px 3px;\n  background-repeat: repeat-x;\n  background-image: radial-gradient(circle, hsl(var(--muted-foreground) / 0.5) 1px, transparent 1px);\n}\n\n/* ── hover ──────────────────────────────────────────────────────────── */\n:deep(.jsplitter-handle:hover) {\n  background: hsl(var(--primary) / 0.04) !important;\n}\n\n:deep(.jsplitter-handle:hover::after) {\n  width: 2px !important;\n  background: hsl(var(--primary) / 0.55) !important;\n}\n\n:deep(.jsplitter-handle:hover::before) {\n  opacity: 1;\n}\n\n/* ── drag / active ──────────────────────────────────────────────────── */\n:deep(.jsplitter-handle[data-state=\"drag\"]),\n:deep(.jsplitter-handle:active) {\n  background: hsl(var(--primary) / 0.06) !important;\n}\n\n:deep(.jsplitter-handle[data-state=\"drag\"]::after),\n:deep(.jsplitter-handle:active::after) {\n  width: 2px !important;\n  background: hsl(var(--primary)) !important;\n}\n\n:deep(.jsplitter-handle[data-state=\"drag\"]::before),\n:deep(.jsplitter-handle:active::before) {\n  opacity: 1;\n  background-image: radial-gradient(circle, hsl(var(--primary) / 0.65) 1px, transparent 1px);\n}\n</style>\n"],"names":["props","__props","secondDefaultSize","computed","_createBlock","_unref","ResizablePanelGroup","_normalizeClass","cn","$props","_createVNode","ResizablePanel","_normalizeStyle","_renderSlot","_ctx","ResizableHandle"],"mappings":"kiBAWA,MAAMA,EAAQC,EA+BRC,EAAoBC,EAAAA,SAAS,IAAM,IAAMH,EAAM,WAAW,8BAI9DI,EAAAA,YA+BsBC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CA/BA,UAAWL,EAAA,UAAY,MAAKM,EAAAA,eAAEF,EAAAA,MAAAG,EAAAA,EAAA,EAAE,kCAAoCC,EAAAA,OAAO,KAAK,CAAA,CAAA,qBAEpG,IAWiB,CAXjBC,cAWiBL,EAAAA,MAAAM,EAAAA,aAAA,EAAA,CAVd,eAAcV,EAAA,YACd,WAAUA,EAAA,QACV,WAAUA,EAAA,QACV,MAAKM,EAAAA,eAAEN,EAAA,IAAG,EAAQA,EAAA,YAAS,aAAA,0BAAA,0BAAA,EAAA,EAC3B,MAAKW,EAAAA,eAAEX,EAAA,IAAG,EAAA,CAAA,QAAA,GAAqBA,EAAA,GAAG,IAAA,EAAA,CAAA,CAAA,CAAA,qBAEnC,IAAqB,CAArBY,EAAAA,WAAqBC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,EAErBD,EAAAA,WAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,EACpBD,EAAAA,WAAmBC,EAAA,OAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kEAIrBJ,cAAsEL,EAAAA,MAAAU,EAAAA,OAAA,EAAA,CAApD,cAAad,EAAA,WAAY,MAAM,kBAAA,0BAGjDS,cAWiBL,EAAAA,MAAAM,EAAAA,aAAA,EAAA,CAVd,eAAcT,EAAA,MACd,WAAUD,EAAA,cACV,WAAUA,EAAA,cACV,MAAKM,EAAAA,eAAEN,EAAA,IAAG,EAAQA,EAAA,YAAS,aAAA,0BAAA,0BAAA,EAAA,EAC3B,MAAKW,EAAAA,eAAEX,EAAA,IAAG,EAAA,CAAA,QAAA,GAAqBA,EAAA,GAAG,IAAA,EAAA,CAAA,CAAA,CAAA,qBAEnC,IAAsB,CAAtBY,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,EAEtBD,EAAAA,WAAqBC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,EACrBD,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA"}
+{"version":3,"file":"JSplitter.vue2.cjs","sources":["../../../../src/components/atoms/JSplitter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n} from '@/components/shadcn/resizable'\nimport { useBreakpoint } from '@/composables/useBreakpoint'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nconst props = withDefaults(\n  defineProps<{\n    /** 분할 방향 (horizontal: 좌우, vertical: 상하) */\n    direction?: Orientation\n    /** 첫 번째 패널의 기본 크기 (%) */\n    defaultSize?: number\n    /** 첫 번째 패널의 최소 크기 (%) */\n    minSize?: number\n    /** 첫 번째 패널의 최대 크기 (%) */\n    maxSize?: number\n    /** 두 번째 패널의 최소 크기 (%) */\n    secondMinSize?: number\n    /** 두 번째 패널의 최대 크기 (%) */\n    secondMaxSize?: number\n    /** ResizableHandle에 grip 아이콘 표시 여부 */\n    withHandle?: boolean\n    /** 패널 간 여백 (px) */\n    gap?: number\n    /** 추가 CSS 클래스 */\n    class?: string\n    /** 모바일에서 자동 수직 전환 (기본: true) */\n    responsive?: boolean\n  }>(),\n  {\n    direction: 'horizontal',\n    defaultSize: 40,\n    minSize: 20,\n    withHandle: false,\n    gap: 2,\n    responsive: true,\n  },\n)\n\nconst { isMobile } = useBreakpoint()\n\n// 모바일에서 horizontal → vertical 자동 전환\nconst effectiveDirection = computed<Orientation>(() => {\n  if (props.responsive && isMobile.value && props.direction === 'horizontal') {\n    return 'vertical'\n  }\n  return props.direction\n})\n\n// 모바일 수직 전환 시 50:50 균등 분할\nconst effectiveDefaultSize = computed(() => {\n  if (props.responsive && isMobile.value && props.direction === 'horizontal') {\n    return 50\n  }\n  return props.defaultSize\n})\n\n// 두 번째 패널의 기본 크기 계산\nconst secondDefaultSize = computed(() => 100 - effectiveDefaultSize.value)\n</script>\n\n<template>\n  <ResizablePanelGroup :direction=\"effectiveDirection\" :class=\"cn('jsplitter-group min-h-0 min-w-0', $props.class)\">\n    <!-- 첫 번째 패널 (좌측/상단) -->\n    <ResizablePanel \n      :default-size=\"effectiveDefaultSize\" \n      :min-size=\"minSize\" \n      :max-size=\"maxSize\"\n      :class=\"gap > 0 ? (effectiveDirection === 'horizontal' ? 'pr-[calc(var(--gap)/2)]' : 'pb-[calc(var(--gap)/2)]') : ''\"\n      :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n    >\n      <slot name=\"first\" />\n      <!-- direction=\"horizontal\"일 때 left, vertical일 때 top으로도 사용 가능 -->\n      <slot name=\"left\" />\n      <slot name=\"top\" />\n    </ResizablePanel>\n\n    <!-- 크기 조정 핸들 -->\n    <ResizableHandle :with-handle=\"withHandle\" class=\"jsplitter-handle\" />\n\n    <!-- 두 번째 패널 (우측/하단) -->\n    <ResizablePanel\n      :default-size=\"secondDefaultSize\"\n      :min-size=\"secondMinSize\"\n      :max-size=\"secondMaxSize\"\n      :class=\"gap > 0 ? (effectiveDirection === 'horizontal' ? 'pl-[calc(var(--gap)/2)]' : 'pt-[calc(var(--gap)/2)]') : ''\"\n      :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n    >\n      <slot name=\"second\" />\n      <!-- direction=\"horizontal\"일 때 right, vertical일 때 bottom으로도 사용 가능 -->\n      <slot name=\"right\" />\n      <slot name=\"bottom\" />\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n\n<style scoped>\n/* ── overflow 보호 ──────────────────────────────────────────────────── */\n:deep(.jsplitter-group [data-panel]) {\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ── horizontal 핸들: 8px 히트영역 ─────────────────────────────────── */\n:deep(.jsplitter-handle[data-orientation=\"horizontal\"]) {\n  width: 8px !important;\n  background: transparent !important;\n  position: relative;\n  z-index: 3;\n  transition: background 0.15s ease;\n}\n\n/* ── vertical 핸들: 8px 히트영역 ───────────────────────────────────── */\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]) {\n  height: 8px !important;\n  background: transparent !important;\n  position: relative;\n  z-index: 3;\n  transition: background 0.15s ease;\n}\n\n/* ── 시각선: 1px (after:w-1 override) ──────────────────────────────── */\n:deep(.jsplitter-handle::after) {\n  width: 1px !important;\n  background: hsl(var(--border)) !important;\n  transition: background 0.15s ease, width 0.12s ease !important;\n}\n\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]::after) {\n  height: 1px !important;\n  width: 100% !important;\n}\n\n/* ── 그립 도트 인디케이터 (::before) ───────────────────────────────── */\n:deep(.jsplitter-handle::before) {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3px;\n  height: 20px;\n  background-image: radial-gradient(circle, hsl(var(--muted-foreground) / 0.5) 1px, transparent 1px);\n  background-size: 3px 6px;\n  background-repeat: repeat-y;\n  border-radius: 2px;\n  opacity: 0.5;\n  transition: opacity 0.15s ease;\n  pointer-events: none;\n  z-index: 4;\n}\n\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]::before) {\n  width: 20px;\n  height: 3px;\n  background-size: 6px 3px;\n  background-repeat: repeat-x;\n  background-image: radial-gradient(circle, hsl(var(--muted-foreground) / 0.5) 1px, transparent 1px);\n}\n\n/* ── hover ──────────────────────────────────────────────────────────── */\n:deep(.jsplitter-handle:hover) {\n  background: hsl(var(--primary) / 0.04) !important;\n}\n\n:deep(.jsplitter-handle:hover::after) {\n  width: 2px !important;\n  background: hsl(var(--primary) / 0.55) !important;\n}\n\n:deep(.jsplitter-handle:hover::before) {\n  opacity: 1;\n}\n\n/* ── drag / active ──────────────────────────────────────────────────── */\n:deep(.jsplitter-handle[data-state=\"drag\"]),\n:deep(.jsplitter-handle:active) {\n  background: hsl(var(--primary) / 0.06) !important;\n}\n\n:deep(.jsplitter-handle[data-state=\"drag\"]::after),\n:deep(.jsplitter-handle:active::after) {\n  width: 2px !important;\n  background: hsl(var(--primary)) !important;\n}\n\n:deep(.jsplitter-handle[data-state=\"drag\"]::before),\n:deep(.jsplitter-handle:active::before) {\n  opacity: 1;\n  background-image: radial-gradient(circle, hsl(var(--primary) / 0.65) 1px, transparent 1px);\n}\n</style>\n"],"names":["props","__props","isMobile","useBreakpoint","effectiveDirection","computed","effectiveDefaultSize","secondDefaultSize","_createBlock","_unref","ResizablePanelGroup","_normalizeClass","cn","$props","_createVNode","ResizablePanel","_normalizeStyle","_renderSlot","_ctx","ResizableHandle"],"mappings":"wnBAYA,MAAMA,EAAQC,EAiCR,CAAE,SAAAC,CAAA,EAAaC,gBAAA,EAGfC,EAAqBC,EAAAA,SAAsB,IAC3CL,EAAM,YAAcE,EAAS,OAASF,EAAM,YAAc,aACrD,WAEFA,EAAM,SACd,EAGKM,EAAuBD,EAAAA,SAAS,IAChCL,EAAM,YAAcE,EAAS,OAASF,EAAM,YAAc,aACrD,GAEFA,EAAM,WACd,EAGKO,EAAoBF,EAAAA,SAAS,IAAM,IAAMC,EAAqB,KAAK,8BAIvEE,EAAAA,YA+BsBC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CA/BA,UAAWN,EAAA,MAAqB,MAAKO,EAAAA,eAAEF,EAAAA,MAAAG,EAAAA,EAAA,EAAE,kCAAoCC,EAAAA,OAAO,KAAK,CAAA,CAAA,qBAE7G,IAWiB,CAXjBC,cAWiBL,EAAAA,MAAAM,EAAAA,aAAA,EAAA,CAVd,eAAcT,EAAA,MACd,WAAUL,EAAA,QACV,WAAUA,EAAA,QACV,MAAKU,EAAAA,eAAEV,EAAA,IAAG,EAAQG,EAAA,QAAkB,aAAA,0BAAA,0BAAA,EAAA,EACpC,MAAKY,EAAAA,eAAEf,EAAA,IAAG,EAAA,CAAA,QAAA,GAAqBA,EAAA,GAAG,IAAA,EAAA,CAAA,CAAA,CAAA,qBAEnC,IAAqB,CAArBgB,EAAAA,WAAqBC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,EAErBD,EAAAA,WAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,EACpBD,EAAAA,WAAmBC,EAAA,OAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kEAIrBJ,cAAsEL,EAAAA,MAAAU,EAAAA,OAAA,EAAA,CAApD,cAAalB,EAAA,WAAY,MAAM,kBAAA,0BAGjDa,cAWiBL,EAAAA,MAAAM,EAAAA,aAAA,EAAA,CAVd,eAAcR,EAAA,MACd,WAAUN,EAAA,cACV,WAAUA,EAAA,cACV,MAAKU,EAAAA,eAAEV,EAAA,IAAG,EAAQG,EAAA,QAAkB,aAAA,0BAAA,0BAAA,EAAA,EACpC,MAAKY,EAAAA,eAAEf,EAAA,IAAG,EAAA,CAAA,QAAA,GAAqBA,EAAA,GAAG,IAAA,EAAA,CAAA,CAAA,CAAA,qBAEnC,IAAsB,CAAtBgB,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,EAEtBD,EAAAA,WAAqBC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,EACrBD,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA"}

package/components/atoms/JSplitter.vue2.js

@@ -1,9 +1,10 @@
-import { defineComponent as m, computed as u, createBlock as f, openBlock as z, unref as t, normalizeClass as l, withCtx as s, createVNode as n, normalizeStyle as o, renderSlot as i } from "vue";
+import { defineComponent as p, computed as s, createBlock as v, openBlock as h, unref as l, normalizeClass as n, withCtx as r, createVNode as u, normalizeStyle as f, renderSlot as a } from "vue";
 import { cn as S } from "../../lib/utils.js";
 import g from "../shadcn/resizable/ResizableHandle.vue.js";
-import h from "../shadcn/resizable/ResizablePanelGroup.vue.js";
-import { SplitterPanel as d } from "reka-ui";
-const M = /* @__PURE__ */ m({
+import $ from "../shadcn/resizable/ResizablePanelGroup.vue.js";
+import { SplitterPanel as m } from "reka-ui";
+import { useBreakpoint as y } from "../../composables/useBreakpoint.js";
+const D = /* @__PURE__ */ p({
   __name: "JSplitter",
   props: {
     direction: { default: "horizontal" },
@@ -14,44 +15,45 @@ const M = /* @__PURE__ */ m({
     secondMaxSize: {},
     withHandle: { type: Boolean, default: !1 },
     gap: { default: 2 },
-    class: {}
+    class: {},
+    responsive: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const c = e, r = u(() => 100 - c.defaultSize);
-    return (a, p) => (z(), f(t(h), {
-      direction: e.direction,
-      class: l(t(S)("jsplitter-group min-h-0 min-w-0", a.$props.class))
+    const i = e, { isMobile: c } = y(), o = s(() => i.responsive && c.value && i.direction === "horizontal" ? "vertical" : i.direction), d = s(() => i.responsive && c.value && i.direction === "horizontal" ? 50 : i.defaultSize), z = s(() => 100 - d.value);
+    return (t, w) => (h(), v(l($), {
+      direction: o.value,
+      class: n(l(S)("jsplitter-group min-h-0 min-w-0", t.$props.class))
     }, {
-      default: s(() => [
-        n(t(d), {
-          "default-size": e.defaultSize,
+      default: r(() => [
+        u(l(m), {
+          "default-size": d.value,
           "min-size": e.minSize,
           "max-size": e.maxSize,
-          class: l(e.gap > 0 ? e.direction === "horizontal" ? "pr-[calc(var(--gap)/2)]" : "pb-[calc(var(--gap)/2)]" : ""),
-          style: o(e.gap > 0 ? { "--gap": `${e.gap}px` } : {})
+          class: n(e.gap > 0 ? o.value === "horizontal" ? "pr-[calc(var(--gap)/2)]" : "pb-[calc(var(--gap)/2)]" : ""),
+          style: f(e.gap > 0 ? { "--gap": `${e.gap}px` } : {})
         }, {
-          default: s(() => [
-            i(a.$slots, "first", {}, void 0, !0),
-            i(a.$slots, "left", {}, void 0, !0),
-            i(a.$slots, "top", {}, void 0, !0)
+          default: r(() => [
+            a(t.$slots, "first", {}, void 0, !0),
+            a(t.$slots, "left", {}, void 0, !0),
+            a(t.$slots, "top", {}, void 0, !0)
           ]),
           _: 3
         }, 8, ["default-size", "min-size", "max-size", "class", "style"]),
-        n(t(g), {
+        u(l(g), {
           "with-handle": e.withHandle,
           class: "jsplitter-handle"
         }, null, 8, ["with-handle"]),
-        n(t(d), {
-          "default-size": r.value,
+        u(l(m), {
+          "default-size": z.value,
           "min-size": e.secondMinSize,
           "max-size": e.secondMaxSize,
-          class: l(e.gap > 0 ? e.direction === "horizontal" ? "pl-[calc(var(--gap)/2)]" : "pt-[calc(var(--gap)/2)]" : ""),
-          style: o(e.gap > 0 ? { "--gap": `${e.gap}px` } : {})
+          class: n(e.gap > 0 ? o.value === "horizontal" ? "pl-[calc(var(--gap)/2)]" : "pt-[calc(var(--gap)/2)]" : ""),
+          style: f(e.gap > 0 ? { "--gap": `${e.gap}px` } : {})
         }, {
-          default: s(() => [
-            i(a.$slots, "second", {}, void 0, !0),
-            i(a.$slots, "right", {}, void 0, !0),
-            i(a.$slots, "bottom", {}, void 0, !0)
+          default: r(() => [
+            a(t.$slots, "second", {}, void 0, !0),
+            a(t.$slots, "right", {}, void 0, !0),
+            a(t.$slots, "bottom", {}, void 0, !0)
           ]),
           _: 3
         }, 8, ["default-size", "min-size", "max-size", "class", "style"])
@@ -61,6 +63,6 @@ const M = /* @__PURE__ */ m({
   }
 });
 export {
-  M as default
+  D as default
 };
 //# sourceMappingURL=JSplitter.vue2.js.map

package/components/atoms/JSplitter.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSplitter.vue2.js","sources":["../../../../src/components/atoms/JSplitter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n} from '@/components/shadcn/resizable'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nconst props = withDefaults(\n  defineProps<{\n    /** 분할 방향 (horizontal: 좌우, vertical: 상하) */\n    direction?: Orientation\n    /** 첫 번째 패널의 기본 크기 (%) */\n    defaultSize?: number\n    /** 첫 번째 패널의 최소 크기 (%) */\n    minSize?: number\n    /** 첫 번째 패널의 최대 크기 (%) */\n    maxSize?: number\n    /** 두 번째 패널의 최소 크기 (%) */\n    secondMinSize?: number\n    /** 두 번째 패널의 최대 크기 (%) */\n    secondMaxSize?: number\n    /** ResizableHandle에 grip 아이콘 표시 여부 */\n    withHandle?: boolean\n    /** 패널 간 여백 (px) */\n    gap?: number\n    /** 추가 CSS 클래스 */\n    class?: string\n  }>(),\n  {\n    direction: 'horizontal',\n    defaultSize: 40,\n    minSize: 20,\n    withHandle: false,\n    gap: 2,\n  },\n)\n\n// 두 번째 패널의 기본 크기 계산\nconst secondDefaultSize = computed(() => 100 - props.defaultSize)\n</script>\n\n<template>\n  <ResizablePanelGroup :direction=\"direction\" :class=\"cn('jsplitter-group min-h-0 min-w-0', $props.class)\">\n    <!-- 첫 번째 패널 (좌측/상단) -->\n    <ResizablePanel \n      :default-size=\"defaultSize\" \n      :min-size=\"minSize\" \n      :max-size=\"maxSize\"\n      :class=\"gap > 0 ? (direction === 'horizontal' ? 'pr-[calc(var(--gap)/2)]' : 'pb-[calc(var(--gap)/2)]') : ''\"\n      :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n    >\n      <slot name=\"first\" />\n      <!-- direction=\"horizontal\"일 때 left, vertical일 때 top으로도 사용 가능 -->\n      <slot name=\"left\" />\n      <slot name=\"top\" />\n    </ResizablePanel>\n\n    <!-- 크기 조정 핸들 -->\n    <ResizableHandle :with-handle=\"withHandle\" class=\"jsplitter-handle\" />\n\n    <!-- 두 번째 패널 (우측/하단) -->\n    <ResizablePanel\n      :default-size=\"secondDefaultSize\"\n      :min-size=\"secondMinSize\"\n      :max-size=\"secondMaxSize\"\n      :class=\"gap > 0 ? (direction === 'horizontal' ? 'pl-[calc(var(--gap)/2)]' : 'pt-[calc(var(--gap)/2)]') : ''\"\n      :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n    >\n      <slot name=\"second\" />\n      <!-- direction=\"horizontal\"일 때 right, vertical일 때 bottom으로도 사용 가능 -->\n      <slot name=\"right\" />\n      <slot name=\"bottom\" />\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n\n<style scoped>\n/* ── overflow 보호 ──────────────────────────────────────────────────── */\n:deep(.jsplitter-group [data-panel]) {\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ── horizontal 핸들: 8px 히트영역 ─────────────────────────────────── */\n:deep(.jsplitter-handle[data-orientation=\"horizontal\"]) {\n  width: 8px !important;\n  background: transparent !important;\n  position: relative;\n  z-index: 3;\n  transition: background 0.15s ease;\n}\n\n/* ── vertical 핸들: 8px 히트영역 ───────────────────────────────────── */\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]) {\n  height: 8px !important;\n  background: transparent !important;\n  position: relative;\n  z-index: 3;\n  transition: background 0.15s ease;\n}\n\n/* ── 시각선: 1px (after:w-1 override) ──────────────────────────────── */\n:deep(.jsplitter-handle::after) {\n  width: 1px !important;\n  background: hsl(var(--border)) !important;\n  transition: background 0.15s ease, width 0.12s ease !important;\n}\n\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]::after) {\n  height: 1px !important;\n  width: 100% !important;\n}\n\n/* ── 그립 도트 인디케이터 (::before) ───────────────────────────────── */\n:deep(.jsplitter-handle::before) {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3px;\n  height: 20px;\n  background-image: radial-gradient(circle, hsl(var(--muted-foreground) / 0.5) 1px, transparent 1px);\n  background-size: 3px 6px;\n  background-repeat: repeat-y;\n  border-radius: 2px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  pointer-events: none;\n  z-index: 4;\n}\n\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]::before) {\n  width: 20px;\n  height: 3px;\n  background-size: 6px 3px;\n  background-repeat: repeat-x;\n  background-image: radial-gradient(circle, hsl(var(--muted-foreground) / 0.5) 1px, transparent 1px);\n}\n\n/* ── hover ──────────────────────────────────────────────────────────── */\n:deep(.jsplitter-handle:hover) {\n  background: hsl(var(--primary) / 0.04) !important;\n}\n\n:deep(.jsplitter-handle:hover::after) {\n  width: 2px !important;\n  background: hsl(var(--primary) / 0.55) !important;\n}\n\n:deep(.jsplitter-handle:hover::before) {\n  opacity: 1;\n}\n\n/* ── drag / active ──────────────────────────────────────────────────── */\n:deep(.jsplitter-handle[data-state=\"drag\"]),\n:deep(.jsplitter-handle:active) {\n  background: hsl(var(--primary) / 0.06) !important;\n}\n\n:deep(.jsplitter-handle[data-state=\"drag\"]::after),\n:deep(.jsplitter-handle:active::after) {\n  width: 2px !important;\n  background: hsl(var(--primary)) !important;\n}\n\n:deep(.jsplitter-handle[data-state=\"drag\"]::before),\n:deep(.jsplitter-handle:active::before) {\n  opacity: 1;\n  background-image: radial-gradient(circle, hsl(var(--primary) / 0.65) 1px, transparent 1px);\n}\n</style>\n"],"names":["props","__props","secondDefaultSize","computed","_createBlock","_unref","ResizablePanelGroup","_normalizeClass","cn","$props","_createVNode","ResizablePanel","_normalizeStyle","_renderSlot","_ctx","ResizableHandle"],"mappings":";;;;;;;;;;;;;;;;;;;AAWA,UAAMA,IAAQC,GA+BRC,IAAoBC,EAAS,MAAM,MAAMH,EAAM,WAAW;2BAI9DI,EA+BsBC,EAAAC,CAAA,GAAA;AAAA,MA/BA,WAAWL,EAAA;AAAA,MAAY,OAAKM,EAAEF,EAAAG,CAAA,EAAE,mCAAoCC,EAAAA,OAAO,KAAK,CAAA;AAAA,IAAA;iBAEpG,MAWiB;AAAA,QAXjBC,EAWiBL,EAAAM,CAAA,GAAA;AAAA,UAVd,gBAAcV,EAAA;AAAA,UACd,YAAUA,EAAA;AAAA,UACV,YAAUA,EAAA;AAAA,UACV,OAAKM,EAAEN,EAAA,MAAG,IAAQA,EAAA,cAAS,eAAA,4BAAA,4BAAA,EAAA;AAAA,UAC3B,OAAKW,EAAEX,EAAA,MAAG,IAAA,EAAA,SAAA,GAAqBA,EAAA,GAAG,KAAA,IAAA,CAAA,CAAA;AAAA,QAAA;qBAEnC,MAAqB;AAAA,YAArBY,EAAqBC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAErBD,EAAoBC,EAAA,QAAA,QAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YACpBD,EAAmBC,EAAA,QAAA,OAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;;QAIrBJ,EAAsEL,EAAAU,CAAA,GAAA;AAAA,UAApD,eAAad,EAAA;AAAA,UAAY,OAAM;AAAA,QAAA;QAGjDS,EAWiBL,EAAAM,CAAA,GAAA;AAAA,UAVd,gBAAcT,EAAA;AAAA,UACd,YAAUD,EAAA;AAAA,UACV,YAAUA,EAAA;AAAA,UACV,OAAKM,EAAEN,EAAA,MAAG,IAAQA,EAAA,cAAS,eAAA,4BAAA,4BAAA,EAAA;AAAA,UAC3B,OAAKW,EAAEX,EAAA,MAAG,IAAA,EAAA,SAAA,GAAqBA,EAAA,GAAG,KAAA,IAAA,CAAA,CAAA;AAAA,QAAA;qBAEnC,MAAsB;AAAA,YAAtBY,EAAsBC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAEtBD,EAAqBC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YACrBD,EAAsBC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;;;;;;;"}
+{"version":3,"file":"JSplitter.vue2.js","sources":["../../../../src/components/atoms/JSplitter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n} from '@/components/shadcn/resizable'\nimport { useBreakpoint } from '@/composables/useBreakpoint'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nconst props = withDefaults(\n  defineProps<{\n    /** 분할 방향 (horizontal: 좌우, vertical: 상하) */\n    direction?: Orientation\n    /** 첫 번째 패널의 기본 크기 (%) */\n    defaultSize?: number\n    /** 첫 번째 패널의 최소 크기 (%) */\n    minSize?: number\n    /** 첫 번째 패널의 최대 크기 (%) */\n    maxSize?: number\n    /** 두 번째 패널의 최소 크기 (%) */\n    secondMinSize?: number\n    /** 두 번째 패널의 최대 크기 (%) */\n    secondMaxSize?: number\n    /** ResizableHandle에 grip 아이콘 표시 여부 */\n    withHandle?: boolean\n    /** 패널 간 여백 (px) */\n    gap?: number\n    /** 추가 CSS 클래스 */\n    class?: string\n    /** 모바일에서 자동 수직 전환 (기본: true) */\n    responsive?: boolean\n  }>(),\n  {\n    direction: 'horizontal',\n    defaultSize: 40,\n    minSize: 20,\n    withHandle: false,\n    gap: 2,\n    responsive: true,\n  },\n)\n\nconst { isMobile } = useBreakpoint()\n\n// 모바일에서 horizontal → vertical 자동 전환\nconst effectiveDirection = computed<Orientation>(() => {\n  if (props.responsive && isMobile.value && props.direction === 'horizontal') {\n    return 'vertical'\n  }\n  return props.direction\n})\n\n// 모바일 수직 전환 시 50:50 균등 분할\nconst effectiveDefaultSize = computed(() => {\n  if (props.responsive && isMobile.value && props.direction === 'horizontal') {\n    return 50\n  }\n  return props.defaultSize\n})\n\n// 두 번째 패널의 기본 크기 계산\nconst secondDefaultSize = computed(() => 100 - effectiveDefaultSize.value)\n</script>\n\n<template>\n  <ResizablePanelGroup :direction=\"effectiveDirection\" :class=\"cn('jsplitter-group min-h-0 min-w-0', $props.class)\">\n    <!-- 첫 번째 패널 (좌측/상단) -->\n    <ResizablePanel \n      :default-size=\"effectiveDefaultSize\" \n      :min-size=\"minSize\" \n      :max-size=\"maxSize\"\n      :class=\"gap > 0 ? (effectiveDirection === 'horizontal' ? 'pr-[calc(var(--gap)/2)]' : 'pb-[calc(var(--gap)/2)]') : ''\"\n      :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n    >\n      <slot name=\"first\" />\n      <!-- direction=\"horizontal\"일 때 left, vertical일 때 top으로도 사용 가능 -->\n      <slot name=\"left\" />\n      <slot name=\"top\" />\n    </ResizablePanel>\n\n    <!-- 크기 조정 핸들 -->\n    <ResizableHandle :with-handle=\"withHandle\" class=\"jsplitter-handle\" />\n\n    <!-- 두 번째 패널 (우측/하단) -->\n    <ResizablePanel\n      :default-size=\"secondDefaultSize\"\n      :min-size=\"secondMinSize\"\n      :max-size=\"secondMaxSize\"\n      :class=\"gap > 0 ? (effectiveDirection === 'horizontal' ? 'pl-[calc(var(--gap)/2)]' : 'pt-[calc(var(--gap)/2)]') : ''\"\n      :style=\"gap > 0 ? { '--gap': `${gap}px` } : {}\"\n    >\n      <slot name=\"second\" />\n      <!-- direction=\"horizontal\"일 때 right, vertical일 때 bottom으로도 사용 가능 -->\n      <slot name=\"right\" />\n      <slot name=\"bottom\" />\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n\n<style scoped>\n/* ── overflow 보호 ──────────────────────────────────────────────────── */\n:deep(.jsplitter-group [data-panel]) {\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ── horizontal 핸들: 8px 히트영역 ─────────────────────────────────── */\n:deep(.jsplitter-handle[data-orientation=\"horizontal\"]) {\n  width: 8px !important;\n  background: transparent !important;\n  position: relative;\n  z-index: 3;\n  transition: background 0.15s ease;\n}\n\n/* ── vertical 핸들: 8px 히트영역 ───────────────────────────────────── */\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]) {\n  height: 8px !important;\n  background: transparent !important;\n  position: relative;\n  z-index: 3;\n  transition: background 0.15s ease;\n}\n\n/* ── 시각선: 1px (after:w-1 override) ──────────────────────────────── */\n:deep(.jsplitter-handle::after) {\n  width: 1px !important;\n  background: hsl(var(--border)) !important;\n  transition: background 0.15s ease, width 0.12s ease !important;\n}\n\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]::after) {\n  height: 1px !important;\n  width: 100% !important;\n}\n\n/* ── 그립 도트 인디케이터 (::before) ───────────────────────────────── */\n:deep(.jsplitter-handle::before) {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3px;\n  height: 20px;\n  background-image: radial-gradient(circle, hsl(var(--muted-foreground) / 0.5) 1px, transparent 1px);\n  background-size: 3px 6px;\n  background-repeat: repeat-y;\n  border-radius: 2px;\n  opacity: 0.5;\n  transition: opacity 0.15s ease;\n  pointer-events: none;\n  z-index: 4;\n}\n\n:deep(.jsplitter-handle[data-orientation=\"vertical\"]::before) {\n  width: 20px;\n  height: 3px;\n  background-size: 6px 3px;\n  background-repeat: repeat-x;\n  background-image: radial-gradient(circle, hsl(var(--muted-foreground) / 0.5) 1px, transparent 1px);\n}\n\n/* ── hover ──────────────────────────────────────────────────────────── */\n:deep(.jsplitter-handle:hover) {\n  background: hsl(var(--primary) / 0.04) !important;\n}\n\n:deep(.jsplitter-handle:hover::after) {\n  width: 2px !important;\n  background: hsl(var(--primary) / 0.55) !important;\n}\n\n:deep(.jsplitter-handle:hover::before) {\n  opacity: 1;\n}\n\n/* ── drag / active ──────────────────────────────────────────────────── */\n:deep(.jsplitter-handle[data-state=\"drag\"]),\n:deep(.jsplitter-handle:active) {\n  background: hsl(var(--primary) / 0.06) !important;\n}\n\n:deep(.jsplitter-handle[data-state=\"drag\"]::after),\n:deep(.jsplitter-handle:active::after) {\n  width: 2px !important;\n  background: hsl(var(--primary)) !important;\n}\n\n:deep(.jsplitter-handle[data-state=\"drag\"]::before),\n:deep(.jsplitter-handle:active::before) {\n  opacity: 1;\n  background-image: radial-gradient(circle, hsl(var(--primary) / 0.65) 1px, transparent 1px);\n}\n</style>\n"],"names":["props","__props","isMobile","useBreakpoint","effectiveDirection","computed","effectiveDefaultSize","secondDefaultSize","_createBlock","_unref","ResizablePanelGroup","_normalizeClass","cn","$props","_createVNode","ResizablePanel","_normalizeStyle","_renderSlot","_ctx","ResizableHandle"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,UAAMA,IAAQC,GAiCR,EAAE,UAAAC,EAAA,IAAaC,EAAA,GAGfC,IAAqBC,EAAsB,MAC3CL,EAAM,cAAcE,EAAS,SAASF,EAAM,cAAc,eACrD,aAEFA,EAAM,SACd,GAGKM,IAAuBD,EAAS,MAChCL,EAAM,cAAcE,EAAS,SAASF,EAAM,cAAc,eACrD,KAEFA,EAAM,WACd,GAGKO,IAAoBF,EAAS,MAAM,MAAMC,EAAqB,KAAK;2BAIvEE,EA+BsBC,EAAAC,CAAA,GAAA;AAAA,MA/BA,WAAWN,EAAA;AAAA,MAAqB,OAAKO,EAAEF,EAAAG,CAAA,EAAE,mCAAoCC,EAAAA,OAAO,KAAK,CAAA;AAAA,IAAA;iBAE7G,MAWiB;AAAA,QAXjBC,EAWiBL,EAAAM,CAAA,GAAA;AAAA,UAVd,gBAAcT,EAAA;AAAA,UACd,YAAUL,EAAA;AAAA,UACV,YAAUA,EAAA;AAAA,UACV,OAAKU,EAAEV,EAAA,MAAG,IAAQG,EAAA,UAAkB,eAAA,4BAAA,4BAAA,EAAA;AAAA,UACpC,OAAKY,EAAEf,EAAA,MAAG,IAAA,EAAA,SAAA,GAAqBA,EAAA,GAAG,KAAA,IAAA,CAAA,CAAA;AAAA,QAAA;qBAEnC,MAAqB;AAAA,YAArBgB,EAAqBC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAErBD,EAAoBC,EAAA,QAAA,QAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YACpBD,EAAmBC,EAAA,QAAA,OAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;;QAIrBJ,EAAsEL,EAAAU,CAAA,GAAA;AAAA,UAApD,eAAalB,EAAA;AAAA,UAAY,OAAM;AAAA,QAAA;QAGjDa,EAWiBL,EAAAM,CAAA,GAAA;AAAA,UAVd,gBAAcR,EAAA;AAAA,UACd,YAAUN,EAAA;AAAA,UACV,YAAUA,EAAA;AAAA,UACV,OAAKU,EAAEV,EAAA,MAAG,IAAQG,EAAA,UAAkB,eAAA,4BAAA,4BAAA,EAAA;AAAA,UACpC,OAAKY,EAAEf,EAAA,MAAG,IAAA,EAAA,SAAA,GAAqBA,EAAA,GAAG,KAAA,IAAA,CAAA,CAAA;AAAA,QAAA;qBAEnC,MAAsB;AAAA,YAAtBgB,EAAsBC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAEtBD,EAAqBC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YACrBD,EAAsBC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;;;;;;;"}

package/components/molecules/JFormField.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-df250d3d"]]);exports.default=u;
+};,u=t(e.default,[["__scopeId","data-v-37f35843"]]);exports.default=u;
 //# sourceMappingURL=JFormField.vue.cjs.map

package/components/molecules/JFormField.vue.js

@@ -6,8 +6,8 @@ const r = (r_comp, r_opts) => {
     r_merged[r_key] = r_val;
   return r_merged;
 };
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-df250d3d"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-37f35843"]]);
 export {
-  f as default
+  p as default
 };
 //# sourceMappingURL=JFormField.vue.js.map

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