@j-solution/components 2.0.6 → 2.0.7

package/README.md

@@ -6,14 +6,11 @@
 
 J-Component는 Vue.js 3와 TypeScript를 기반으로 한 재사용 가능한 UI 컴포넌트 라이브러리입니다. shadcn/ui 디자인 시스템과 Atomic Design 패턴을 적용하여 일관성 있고 확장 가능한 컴포넌트를 제공합니다.
 
-## 🚀 현재 버전: v2.0.6
+## 🚀 현재 버전: v2.0.7
 
 **최신 업데이트 (2026년 3월 6일)**
-- **반응형 브레이크포인트 시스템**: `useBreakpoint` composable 추가 — mobile/tablet/desktop 실시간 감지
-- **JLayout 모바일 사이드바 오버레이**: 모바일에서 사이드바가 슬라이드 드로어로 전환, 백드롭 클릭 닫기 지원
-- **JSplitter 모바일 자동 전환**: `responsive` prop으로 모바일에서 horizontal→vertical 자동 전환 및 50:50 균등 분할
-- **JFormField 반응형 orientation**: `orientation="responsive"` — 데스크톱 horizontal, 모바일 vertical 자동 전환
-- **반응형 CSS 토큰**: 모바일/태블릿 뷰포트별 grid·control 높이 및 폰트 크기 자동 조정
+- **NPM 패키지 composables 누락 수정**: `useBreakpoint` 등 composable이 NPM 패키지에 포함되지 않던 문제 해결
+- **v2.0.6 반응형 시스템 포함**: `useBreakpoint` composable, JLayout 모바일 오버레이, JSplitter/JFormField 반응형 전환, CSS 토큰
 
 [전체 릴리즈 노트 보기](./RELEASE_NOTES.md)
 

package/composables/useBreakpoint.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),i={md:768,lg:1024};function c(){const n=e.ref("desktop"),a=e.ref(!1),l=e.ref(!1),o=e.ref(!0);let s=null,u=null;function t(){const r=s?.matches??!0,d=u?.matches??!0;r?d?(n.value="desktop",a.value=!1,l.value=!1,o.value=!0):(n.value="tablet",a.value=!1,l.value=!0,o.value=!1):(n.value="mobile",a.value=!0,l.value=!1,o.value=!1)}return e.onMounted(()=>{typeof window>"u"||(s=window.matchMedia(`(min-width: ${i.md}px)`),u=window.matchMedia(`(min-width: ${i.lg}px)`),s.addEventListener("change",t),u.addEventListener("change",t),t())}),e.onUnmounted(()=>{s?.removeEventListener("change",t),u?.removeEventListener("change",t)}),{breakpoint:e.readonly(n),isMobile:e.readonly(a),isTablet:e.readonly(l),isDesktop:e.readonly(o)}}exports.useBreakpoint=c;
+//# sourceMappingURL=useBreakpoint.cjs.map

package/composables/useBreakpoint.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.cjs","sources":["../../../src/composables/useBreakpoint.ts"],"sourcesContent":["import { ref, readonly, onMounted, onUnmounted } from 'vue'\r\n\r\ntype Breakpoint = 'mobile' | 'tablet' | 'desktop'\r\n\r\nconst BREAKPOINTS = {\r\n  md: 768,\r\n  lg: 1024,\r\n} as const\r\n\r\n/**\r\n * useBreakpoint - 반응형 브레이크포인트 감지 composable\r\n *\r\n * @returns isMobile (<768px), isTablet (768~1023px), isDesktop (>=1024px), breakpoint\r\n *\r\n * @example\r\n * ```vue\r\n * const { isMobile, isDesktop } = useBreakpoint()\r\n * // template: v-if=\"isMobile\"\r\n * ```\r\n */\r\nexport function useBreakpoint() {\r\n  const breakpoint = ref<Breakpoint>('desktop')\r\n  const isMobile = ref(false)\r\n  const isTablet = ref(false)\r\n  const isDesktop = ref(true)\r\n\r\n  let mdQuery: MediaQueryList | null = null\r\n  let lgQuery: MediaQueryList | null = null\r\n\r\n  function update() {\r\n    const mdMatch = mdQuery?.matches ?? true\r\n    const lgMatch = lgQuery?.matches ?? true\r\n\r\n    if (!mdMatch) {\r\n      breakpoint.value = 'mobile'\r\n      isMobile.value = true\r\n      isTablet.value = false\r\n      isDesktop.value = false\r\n    } else if (!lgMatch) {\r\n      breakpoint.value = 'tablet'\r\n      isMobile.value = false\r\n      isTablet.value = true\r\n      isDesktop.value = false\r\n    } else {\r\n      breakpoint.value = 'desktop'\r\n      isMobile.value = false\r\n      isTablet.value = false\r\n      isDesktop.value = true\r\n    }\r\n  }\r\n\r\n  onMounted(() => {\r\n    if (typeof window === 'undefined') return\r\n\r\n    mdQuery = window.matchMedia(`(min-width: ${BREAKPOINTS.md}px)`)\r\n    lgQuery = window.matchMedia(`(min-width: ${BREAKPOINTS.lg}px)`)\r\n\r\n    mdQuery.addEventListener('change', update)\r\n    lgQuery.addEventListener('change', update)\r\n\r\n    update()\r\n  })\r\n\r\n  onUnmounted(() => {\r\n    mdQuery?.removeEventListener('change', update)\r\n    lgQuery?.removeEventListener('change', update)\r\n  })\r\n\r\n  return {\r\n    breakpoint: readonly(breakpoint),\r\n    isMobile: readonly(isMobile),\r\n    isTablet: readonly(isTablet),\r\n    isDesktop: readonly(isDesktop),\r\n  }\r\n}\r\n"],"names":["BREAKPOINTS","useBreakpoint","breakpoint","ref","isMobile","isTablet","isDesktop","mdQuery","lgQuery","update","mdMatch","lgMatch","onMounted","onUnmounted","readonly"],"mappings":"uGAIMA,EAAc,CAClB,GAAI,IACJ,GAAI,IACN,EAaO,SAASC,GAAgB,CAC9B,MAAMC,EAAaC,EAAAA,IAAgB,SAAS,EACtCC,EAAWD,EAAAA,IAAI,EAAK,EACpBE,EAAWF,EAAAA,IAAI,EAAK,EACpBG,EAAYH,EAAAA,IAAI,EAAI,EAE1B,IAAII,EAAiC,KACjCC,EAAiC,KAErC,SAASC,GAAS,CAChB,MAAMC,EAAUH,GAAS,SAAW,GAC9BI,EAAUH,GAAS,SAAW,GAE/BE,EAKOC,GAMVT,EAAW,MAAQ,UACnBE,EAAS,MAAQ,GACjBC,EAAS,MAAQ,GACjBC,EAAU,MAAQ,KARlBJ,EAAW,MAAQ,SACnBE,EAAS,MAAQ,GACjBC,EAAS,MAAQ,GACjBC,EAAU,MAAQ,KARlBJ,EAAW,MAAQ,SACnBE,EAAS,MAAQ,GACjBC,EAAS,MAAQ,GACjBC,EAAU,MAAQ,GAYtB,CAEAM,OAAAA,EAAAA,UAAU,IAAM,CACV,OAAO,OAAW,MAEtBL,EAAU,OAAO,WAAW,eAAeP,EAAY,EAAE,KAAK,EAC9DQ,EAAU,OAAO,WAAW,eAAeR,EAAY,EAAE,KAAK,EAE9DO,EAAQ,iBAAiB,SAAUE,CAAM,EACzCD,EAAQ,iBAAiB,SAAUC,CAAM,EAEzCA,EAAA,EACF,CAAC,EAEDI,EAAAA,YAAY,IAAM,CAChBN,GAAS,oBAAoB,SAAUE,CAAM,EAC7CD,GAAS,oBAAoB,SAAUC,CAAM,CAC/C,CAAC,EAEM,CACL,WAAYK,EAAAA,SAASZ,CAAU,EAC/B,SAAUY,EAAAA,SAASV,CAAQ,EAC3B,SAAUU,EAAAA,SAAST,CAAQ,EAC3B,UAAWS,EAAAA,SAASR,CAAS,CAAA,CAEjC"}

package/composables/useBreakpoint.js

@@ -0,0 +1,27 @@
+import { ref as i, onMounted as v, onUnmounted as f, readonly as u } from "vue";
+const r = {
+  md: 768,
+  lg: 1024
+};
+function p() {
+  const t = i("desktop"), n = i(!1), a = i(!1), l = i(!0);
+  let s = null, o = null;
+  function e() {
+    const d = s?.matches ?? !0, c = o?.matches ?? !0;
+    d ? c ? (t.value = "desktop", n.value = !1, a.value = !1, l.value = !0) : (t.value = "tablet", n.value = !1, a.value = !0, l.value = !1) : (t.value = "mobile", n.value = !0, a.value = !1, l.value = !1);
+  }
+  return v(() => {
+    typeof window > "u" || (s = window.matchMedia(`(min-width: ${r.md}px)`), o = window.matchMedia(`(min-width: ${r.lg}px)`), s.addEventListener("change", e), o.addEventListener("change", e), e());
+  }), f(() => {
+    s?.removeEventListener("change", e), o?.removeEventListener("change", e);
+  }), {
+    breakpoint: u(t),
+    isMobile: u(n),
+    isTablet: u(a),
+    isDesktop: u(l)
+  };
+}
+export {
+  p as useBreakpoint
+};
+//# sourceMappingURL=useBreakpoint.js.map

package/composables/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sources":["../../../src/composables/useBreakpoint.ts"],"sourcesContent":["import { ref, readonly, onMounted, onUnmounted } from 'vue'\r\n\r\ntype Breakpoint = 'mobile' | 'tablet' | 'desktop'\r\n\r\nconst BREAKPOINTS = {\r\n  md: 768,\r\n  lg: 1024,\r\n} as const\r\n\r\n/**\r\n * useBreakpoint - 반응형 브레이크포인트 감지 composable\r\n *\r\n * @returns isMobile (<768px), isTablet (768~1023px), isDesktop (>=1024px), breakpoint\r\n *\r\n * @example\r\n * ```vue\r\n * const { isMobile, isDesktop } = useBreakpoint()\r\n * // template: v-if=\"isMobile\"\r\n * ```\r\n */\r\nexport function useBreakpoint() {\r\n  const breakpoint = ref<Breakpoint>('desktop')\r\n  const isMobile = ref(false)\r\n  const isTablet = ref(false)\r\n  const isDesktop = ref(true)\r\n\r\n  let mdQuery: MediaQueryList | null = null\r\n  let lgQuery: MediaQueryList | null = null\r\n\r\n  function update() {\r\n    const mdMatch = mdQuery?.matches ?? true\r\n    const lgMatch = lgQuery?.matches ?? true\r\n\r\n    if (!mdMatch) {\r\n      breakpoint.value = 'mobile'\r\n      isMobile.value = true\r\n      isTablet.value = false\r\n      isDesktop.value = false\r\n    } else if (!lgMatch) {\r\n      breakpoint.value = 'tablet'\r\n      isMobile.value = false\r\n      isTablet.value = true\r\n      isDesktop.value = false\r\n    } else {\r\n      breakpoint.value = 'desktop'\r\n      isMobile.value = false\r\n      isTablet.value = false\r\n      isDesktop.value = true\r\n    }\r\n  }\r\n\r\n  onMounted(() => {\r\n    if (typeof window === 'undefined') return\r\n\r\n    mdQuery = window.matchMedia(`(min-width: ${BREAKPOINTS.md}px)`)\r\n    lgQuery = window.matchMedia(`(min-width: ${BREAKPOINTS.lg}px)`)\r\n\r\n    mdQuery.addEventListener('change', update)\r\n    lgQuery.addEventListener('change', update)\r\n\r\n    update()\r\n  })\r\n\r\n  onUnmounted(() => {\r\n    mdQuery?.removeEventListener('change', update)\r\n    lgQuery?.removeEventListener('change', update)\r\n  })\r\n\r\n  return {\r\n    breakpoint: readonly(breakpoint),\r\n    isMobile: readonly(isMobile),\r\n    isTablet: readonly(isTablet),\r\n    isDesktop: readonly(isDesktop),\r\n  }\r\n}\r\n"],"names":["BREAKPOINTS","useBreakpoint","breakpoint","ref","isMobile","isTablet","isDesktop","mdQuery","lgQuery","update","mdMatch","lgMatch","onMounted","onUnmounted","readonly"],"mappings":";AAIA,MAAMA,IAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,SAASC,IAAgB;AAC9B,QAAMC,IAAaC,EAAgB,SAAS,GACtCC,IAAWD,EAAI,EAAK,GACpBE,IAAWF,EAAI,EAAK,GACpBG,IAAYH,EAAI,EAAI;AAE1B,MAAII,IAAiC,MACjCC,IAAiC;AAErC,WAASC,IAAS;AAChB,UAAMC,IAAUH,GAAS,WAAW,IAC9BI,IAAUH,GAAS,WAAW;AAEpC,IAAKE,IAKOC,KAMVT,EAAW,QAAQ,WACnBE,EAAS,QAAQ,IACjBC,EAAS,QAAQ,IACjBC,EAAU,QAAQ,OARlBJ,EAAW,QAAQ,UACnBE,EAAS,QAAQ,IACjBC,EAAS,QAAQ,IACjBC,EAAU,QAAQ,OARlBJ,EAAW,QAAQ,UACnBE,EAAS,QAAQ,IACjBC,EAAS,QAAQ,IACjBC,EAAU,QAAQ;AAAA,EAYtB;AAEA,SAAAM,EAAU,MAAM;AACd,IAAI,OAAO,SAAW,QAEtBL,IAAU,OAAO,WAAW,eAAeP,EAAY,EAAE,KAAK,GAC9DQ,IAAU,OAAO,WAAW,eAAeR,EAAY,EAAE,KAAK,GAE9DO,EAAQ,iBAAiB,UAAUE,CAAM,GACzCD,EAAQ,iBAAiB,UAAUC,CAAM,GAEzCA,EAAA;AAAA,EACF,CAAC,GAEDI,EAAY,MAAM;AAChB,IAAAN,GAAS,oBAAoB,UAAUE,CAAM,GAC7CD,GAAS,oBAAoB,UAAUC,CAAM;AAAA,EAC/C,CAAC,GAEM;AAAA,IACL,YAAYK,EAASZ,CAAU;AAAA,IAC/B,UAAUY,EAASV,CAAQ;AAAA,IAC3B,UAAUU,EAAST,CAAQ;AAAA,IAC3B,WAAWS,EAASR,CAAS;AAAA,EAAA;AAEjC;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@j-solution/components",
   "description": "Vue 3 Atomic Design component kit for enterprise dashboards",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -31,6 +31,7 @@
   "files": [
     "assets",
     "components",
+    "composables",
     "lib",
     "types",
     "chunks",