@j-solution/components 1.4.0 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -5
- package/assets/jwms-portal-frontend-ZDGjD3Lz.css +1 -0
- package/assets/styles/j-components.css +1 -1
- package/components/atoms/JCombo.vue.cjs +1 -1
- package/components/atoms/JCombo.vue.cjs.map +1 -1
- package/components/atoms/JCombo.vue.js +40 -36
- package/components/atoms/JCombo.vue.js.map +1 -1
- package/components/atoms/JGrid.vue.cjs +1 -1
- package/components/atoms/JGrid.vue.js +2 -2
- package/components/atoms/JGrid.vue2.cjs +1 -1
- package/components/atoms/JGrid.vue2.cjs.map +1 -1
- package/components/atoms/JGrid.vue2.js +59 -43
- package/components/atoms/JGrid.vue2.js.map +1 -1
- package/components/organisms/JFilterBar.vue.cjs +1 -1
- package/components/organisms/JFilterBar.vue.cjs.map +1 -1
- package/components/organisms/JFilterBar.vue.js +112 -30
- package/components/organisms/JFilterBar.vue.js.map +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.cjs +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.cjs.map +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.js +32 -28
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.js.map +1 -1
- package/package.json +1 -1
- package/types/index.d.ts +51 -4
- package/assets/jwms-portal-frontend-Cs1trVbC.css +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../shadcn/index.cjs");const
|
|
1
|
+
"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-8 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;
|
|
2
2
|
//# sourceMappingURL=JCombo.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JCombo.vue.cjs","sources":["../../../../src/components/atoms/JCombo.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn'\r\n\r\nexport interface Option {\r\n value: string | number\r\n label: string\r\n}\r\n\r\ntype StyleType =\r\n | 'default' // 기본 스타일\r\n | 'error' // 에러 상태\r\n | 'success' // 성공 상태\r\n | 'warning' // 경고 상태\r\n | 'sm' // 작은 크기\r\n | 'lg' // 큰 크기\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n modelValue?: string | number\r\n options?: Option[]\r\n placeholder?: string\r\n disabled?: boolean\r\n required?: boolean\r\n name?: string\r\n id?: string\r\n multiple?: boolean\r\n class?: string\r\n /** 스타일 프리셋 */\r\n styletype?: StyleType\r\n }>(),\r\n {\r\n options: () => [],\r\n placeholder: '선택하세요',\r\n disabled: false,\r\n required: false,\r\n multiple: false,\r\n styletype: 'default',\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n 'update:modelValue': [value: string | number]\r\n 'change': [value: string | number]\r\n 'focus': [event: FocusEvent]\r\n 'blur': [event: FocusEvent]\r\n}>()\r\n\r\n/**\r\n * styletype -> class 매핑\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\r\n default: { class: '' },\r\n error: { \r\n class: 'border-destructive focus:ring-destructive',\r\n },\r\n success: { \r\n class: 'border-green-500 focus:ring-green-500',\r\n },\r\n warning: { \r\n class: 'border-amber-500 focus:ring-amber-500',\r\n },\r\n sm: { \r\n class: 'h-8 text-xs px-2',\r\n },\r\n lg: { \r\n class: 'h-12 text-base px-4',\r\n },\r\n}\r\n\r\nconst triggerClass = computed(() => {\r\n const styleKey = props.styletype || 'default'\r\n const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\r\n return [preset?.class, props.class].filter(Boolean).join(' ')\r\n})\r\n\r\nconst
|
|
1
|
+
{"version":3,"file":"JCombo.vue.cjs","sources":["../../../../src/components/atoms/JCombo.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn'\r\n\r\n// 빈 문자열 value를 위한 내부 플레이스홀더\r\n// reka-ui SelectItem이 빈 문자열을 처리하지 못하는 버그 우회\r\nconst EMPTY_VALUE_PLACEHOLDER = '__EMPTY_STRING__'\r\n\r\nexport interface Option {\r\n value: string | number\r\n label: string\r\n}\r\n\r\ntype StyleType =\r\n | 'default' // 기본 스타일\r\n | 'error' // 에러 상태\r\n | 'success' // 성공 상태\r\n | 'warning' // 경고 상태\r\n | 'sm' // 작은 크기\r\n | 'lg' // 큰 크기\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n modelValue?: string | number\r\n options?: Option[]\r\n placeholder?: string\r\n disabled?: boolean\r\n required?: boolean\r\n name?: string\r\n id?: string\r\n multiple?: boolean\r\n class?: string\r\n /** 스타일 프리셋 */\r\n styletype?: StyleType\r\n }>(),\r\n {\r\n options: () => [],\r\n placeholder: '선택하세요',\r\n disabled: false,\r\n required: false,\r\n multiple: false,\r\n styletype: 'default',\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n 'update:modelValue': [value: string | number]\r\n 'change': [value: string | number]\r\n 'focus': [event: FocusEvent]\r\n 'blur': [event: FocusEvent]\r\n}>()\r\n\r\n/**\r\n * styletype -> class 매핑\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\r\n default: { class: '' },\r\n error: { \r\n class: 'border-destructive focus:ring-destructive',\r\n },\r\n success: { \r\n class: 'border-green-500 focus:ring-green-500',\r\n },\r\n warning: { \r\n class: 'border-amber-500 focus:ring-amber-500',\r\n },\r\n sm: { \r\n class: 'h-8 text-xs px-2',\r\n },\r\n lg: { \r\n class: 'h-12 text-base px-4',\r\n },\r\n}\r\n\r\nconst triggerClass = computed(() => {\r\n const styleKey = props.styletype || 'default'\r\n const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\r\n return [preset?.class, props.class].filter(Boolean).join(' ')\r\n})\r\n\r\n/**\r\n * 외부 value를 내부 value로 변환\r\n * 빈 문자열 -> __EMPTY_STRING__\r\n */\r\nconst toInternalValue = (value: string | number | undefined): string => {\r\n if (value === '' || value === undefined) {\r\n return EMPTY_VALUE_PLACEHOLDER\r\n }\r\n return String(value)\r\n}\r\n\r\n/**\r\n * 내부 value를 외부 value로 변환\r\n * __EMPTY_STRING__ -> ''\r\n */\r\nconst toExternalValue = (value: string): string | number => {\r\n if (value === EMPTY_VALUE_PLACEHOLDER) {\r\n return ''\r\n }\r\n return value\r\n}\r\n\r\n/**\r\n * 옵션의 value를 내부 형식으로 변환\r\n * 빈 문자열 value를 가진 옵션 -> __EMPTY_STRING__으로 변환\r\n */\r\nconst processedOptions = computed(() => {\r\n return props.options.map((option) => ({\r\n ...option,\r\n value: toInternalValue(option.value),\r\n }))\r\n})\r\n\r\n/**\r\n * 현재 modelValue를 내부 형식으로 변환\r\n */\r\nconst internalModelValue = computed(() => toInternalValue(props.modelValue))\r\n\r\nconst handleChange = (internalValue: string) => {\r\n const externalValue = toExternalValue(internalValue)\r\n emit('update:modelValue', externalValue)\r\n emit('change', externalValue)\r\n}\r\n</script>\r\n\r\n<template>\r\n <Select\r\n :model-value=\"internalModelValue\"\r\n :disabled=\"disabled\"\r\n :required=\"required\"\r\n :name=\"name\"\r\n @update:model-value=\"(value) => handleChange(value as string)\"\r\n @focus=\"emit('focus', $event as FocusEvent)\"\r\n @blur=\"emit('blur', $event as FocusEvent)\"\r\n >\r\n <SelectTrigger :id=\"id\" :class=\"triggerClass\">\r\n <SelectValue :placeholder=\"placeholder\" />\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectItem\r\n v-for=\"option in processedOptions\"\r\n :key=\"option.value\"\r\n :value=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </SelectItem>\r\n </SelectContent>\r\n </Select>\r\n</template>\r\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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as y, computed as u, createBlock as f, openBlock as d, unref as r, withCtx as n, createVNode as i, normalizeClass as E, createElementBlock as B, Fragment as C, renderList as h, createTextVNode as S, toDisplayString as T } from "vue";
|
|
2
2
|
import "../shadcn/index.js";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
const
|
|
3
|
+
import L from "../shadcn/Select.vue.js";
|
|
4
|
+
import $ from "../shadcn/SelectTrigger.vue.js";
|
|
5
|
+
import k from "../shadcn/SelectValue.vue.js";
|
|
6
|
+
import q from "../shadcn/SelectContent.vue.js";
|
|
7
|
+
import P from "../shadcn/SelectItem.vue.js";
|
|
8
|
+
const p = "__EMPTY_STRING__", F = /* @__PURE__ */ y({
|
|
9
9
|
__name: "JCombo",
|
|
10
10
|
props: {
|
|
11
11
|
modelValue: {},
|
|
@@ -20,8 +20,8 @@ const z = /* @__PURE__ */ g({
|
|
|
20
20
|
styletype: { default: "default" }
|
|
21
21
|
},
|
|
22
22
|
emits: ["update:modelValue", "change", "focus", "blur"],
|
|
23
|
-
setup(
|
|
24
|
-
const
|
|
23
|
+
setup(a, { emit: g }) {
|
|
24
|
+
const s = a, o = g, c = {
|
|
25
25
|
default: { class: "" },
|
|
26
26
|
error: {
|
|
27
27
|
class: "border-destructive focus:ring-destructive"
|
|
@@ -38,39 +38,43 @@ const z = /* @__PURE__ */ g({
|
|
|
38
38
|
lg: {
|
|
39
39
|
class: "h-12 text-base px-4"
|
|
40
40
|
}
|
|
41
|
-
},
|
|
42
|
-
const
|
|
43
|
-
return [(
|
|
44
|
-
}), p = (
|
|
45
|
-
|
|
41
|
+
}, b = u(() => {
|
|
42
|
+
const e = s.styletype || "default";
|
|
43
|
+
return [(c[e] ?? c.default)?.class, s.class].filter(Boolean).join(" ");
|
|
44
|
+
}), m = (e) => e === "" || e === void 0 ? p : String(e), V = (e) => e === p ? "" : e, _ = u(() => s.options.map((e) => ({
|
|
45
|
+
...e,
|
|
46
|
+
value: m(e.value)
|
|
47
|
+
}))), v = u(() => m(s.modelValue)), x = (e) => {
|
|
48
|
+
const l = V(e);
|
|
49
|
+
o("update:modelValue", l), o("change", l);
|
|
46
50
|
};
|
|
47
|
-
return (
|
|
48
|
-
"model-value":
|
|
49
|
-
disabled:
|
|
50
|
-
required:
|
|
51
|
-
name:
|
|
52
|
-
"onUpdate:modelValue":
|
|
53
|
-
onFocus:
|
|
54
|
-
onBlur:
|
|
51
|
+
return (e, l) => (d(), f(r(L), {
|
|
52
|
+
"model-value": v.value,
|
|
53
|
+
disabled: a.disabled,
|
|
54
|
+
required: a.required,
|
|
55
|
+
name: a.name,
|
|
56
|
+
"onUpdate:modelValue": l[0] || (l[0] = (t) => x(t)),
|
|
57
|
+
onFocus: l[1] || (l[1] = (t) => o("focus", t)),
|
|
58
|
+
onBlur: l[2] || (l[2] = (t) => o("blur", t))
|
|
55
59
|
}, {
|
|
56
|
-
default:
|
|
57
|
-
|
|
58
|
-
id:
|
|
59
|
-
class:
|
|
60
|
+
default: n(() => [
|
|
61
|
+
i(r($), {
|
|
62
|
+
id: a.id,
|
|
63
|
+
class: E(b.value)
|
|
60
64
|
}, {
|
|
61
|
-
default:
|
|
62
|
-
|
|
65
|
+
default: n(() => [
|
|
66
|
+
i(r(k), { placeholder: a.placeholder }, null, 8, ["placeholder"])
|
|
63
67
|
]),
|
|
64
68
|
_: 1
|
|
65
69
|
}, 8, ["id", "class"]),
|
|
66
|
-
|
|
67
|
-
default:
|
|
68
|
-
(d(!0),
|
|
69
|
-
key:
|
|
70
|
-
value:
|
|
70
|
+
i(r(q), null, {
|
|
71
|
+
default: n(() => [
|
|
72
|
+
(d(!0), B(C, null, h(_.value, (t) => (d(), f(r(P), {
|
|
73
|
+
key: t.value,
|
|
74
|
+
value: t.value
|
|
71
75
|
}, {
|
|
72
|
-
default:
|
|
73
|
-
|
|
76
|
+
default: n(() => [
|
|
77
|
+
S(T(t.label), 1)
|
|
74
78
|
]),
|
|
75
79
|
_: 2
|
|
76
80
|
}, 1032, ["value"]))), 128))
|
|
@@ -83,6 +87,6 @@ const z = /* @__PURE__ */ g({
|
|
|
83
87
|
}
|
|
84
88
|
});
|
|
85
89
|
export {
|
|
86
|
-
|
|
90
|
+
F as default
|
|
87
91
|
};
|
|
88
92
|
//# sourceMappingURL=JCombo.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JCombo.vue.js","sources":["../../../../src/components/atoms/JCombo.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn'\r\n\r\nexport interface Option {\r\n value: string | number\r\n label: string\r\n}\r\n\r\ntype StyleType =\r\n | 'default' // 기본 스타일\r\n | 'error' // 에러 상태\r\n | 'success' // 성공 상태\r\n | 'warning' // 경고 상태\r\n | 'sm' // 작은 크기\r\n | 'lg' // 큰 크기\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n modelValue?: string | number\r\n options?: Option[]\r\n placeholder?: string\r\n disabled?: boolean\r\n required?: boolean\r\n name?: string\r\n id?: string\r\n multiple?: boolean\r\n class?: string\r\n /** 스타일 프리셋 */\r\n styletype?: StyleType\r\n }>(),\r\n {\r\n options: () => [],\r\n placeholder: '선택하세요',\r\n disabled: false,\r\n required: false,\r\n multiple: false,\r\n styletype: 'default',\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n 'update:modelValue': [value: string | number]\r\n 'change': [value: string | number]\r\n 'focus': [event: FocusEvent]\r\n 'blur': [event: FocusEvent]\r\n}>()\r\n\r\n/**\r\n * styletype -> class 매핑\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\r\n default: { class: '' },\r\n error: { \r\n class: 'border-destructive focus:ring-destructive',\r\n },\r\n success: { \r\n class: 'border-green-500 focus:ring-green-500',\r\n },\r\n warning: { \r\n class: 'border-amber-500 focus:ring-amber-500',\r\n },\r\n sm: { \r\n class: 'h-8 text-xs px-2',\r\n },\r\n lg: { \r\n class: 'h-12 text-base px-4',\r\n },\r\n}\r\n\r\nconst triggerClass = computed(() => {\r\n const styleKey = props.styletype || 'default'\r\n const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\r\n return [preset?.class, props.class].filter(Boolean).join(' ')\r\n})\r\n\r\nconst
|
|
1
|
+
{"version":3,"file":"JCombo.vue.js","sources":["../../../../src/components/atoms/JCombo.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn'\r\n\r\n// 빈 문자열 value를 위한 내부 플레이스홀더\r\n// reka-ui SelectItem이 빈 문자열을 처리하지 못하는 버그 우회\r\nconst EMPTY_VALUE_PLACEHOLDER = '__EMPTY_STRING__'\r\n\r\nexport interface Option {\r\n value: string | number\r\n label: string\r\n}\r\n\r\ntype StyleType =\r\n | 'default' // 기본 스타일\r\n | 'error' // 에러 상태\r\n | 'success' // 성공 상태\r\n | 'warning' // 경고 상태\r\n | 'sm' // 작은 크기\r\n | 'lg' // 큰 크기\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n modelValue?: string | number\r\n options?: Option[]\r\n placeholder?: string\r\n disabled?: boolean\r\n required?: boolean\r\n name?: string\r\n id?: string\r\n multiple?: boolean\r\n class?: string\r\n /** 스타일 프리셋 */\r\n styletype?: StyleType\r\n }>(),\r\n {\r\n options: () => [],\r\n placeholder: '선택하세요',\r\n disabled: false,\r\n required: false,\r\n multiple: false,\r\n styletype: 'default',\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n 'update:modelValue': [value: string | number]\r\n 'change': [value: string | number]\r\n 'focus': [event: FocusEvent]\r\n 'blur': [event: FocusEvent]\r\n}>()\r\n\r\n/**\r\n * styletype -> class 매핑\r\n */\r\nconst STYLE_PRESETS: Record<StyleType, { class: string }> = {\r\n default: { class: '' },\r\n error: { \r\n class: 'border-destructive focus:ring-destructive',\r\n },\r\n success: { \r\n class: 'border-green-500 focus:ring-green-500',\r\n },\r\n warning: { \r\n class: 'border-amber-500 focus:ring-amber-500',\r\n },\r\n sm: { \r\n class: 'h-8 text-xs px-2',\r\n },\r\n lg: { \r\n class: 'h-12 text-base px-4',\r\n },\r\n}\r\n\r\nconst triggerClass = computed(() => {\r\n const styleKey = props.styletype || 'default'\r\n const preset = STYLE_PRESETS[styleKey] ?? STYLE_PRESETS.default\r\n return [preset?.class, props.class].filter(Boolean).join(' ')\r\n})\r\n\r\n/**\r\n * 외부 value를 내부 value로 변환\r\n * 빈 문자열 -> __EMPTY_STRING__\r\n */\r\nconst toInternalValue = (value: string | number | undefined): string => {\r\n if (value === '' || value === undefined) {\r\n return EMPTY_VALUE_PLACEHOLDER\r\n }\r\n return String(value)\r\n}\r\n\r\n/**\r\n * 내부 value를 외부 value로 변환\r\n * __EMPTY_STRING__ -> ''\r\n */\r\nconst toExternalValue = (value: string): string | number => {\r\n if (value === EMPTY_VALUE_PLACEHOLDER) {\r\n return ''\r\n }\r\n return value\r\n}\r\n\r\n/**\r\n * 옵션의 value를 내부 형식으로 변환\r\n * 빈 문자열 value를 가진 옵션 -> __EMPTY_STRING__으로 변환\r\n */\r\nconst processedOptions = computed(() => {\r\n return props.options.map((option) => ({\r\n ...option,\r\n value: toInternalValue(option.value),\r\n }))\r\n})\r\n\r\n/**\r\n * 현재 modelValue를 내부 형식으로 변환\r\n */\r\nconst internalModelValue = computed(() => toInternalValue(props.modelValue))\r\n\r\nconst handleChange = (internalValue: string) => {\r\n const externalValue = toExternalValue(internalValue)\r\n emit('update:modelValue', externalValue)\r\n emit('change', externalValue)\r\n}\r\n</script>\r\n\r\n<template>\r\n <Select\r\n :model-value=\"internalModelValue\"\r\n :disabled=\"disabled\"\r\n :required=\"required\"\r\n :name=\"name\"\r\n @update:model-value=\"(value) => handleChange(value as string)\"\r\n @focus=\"emit('focus', $event as FocusEvent)\"\r\n @blur=\"emit('blur', $event as FocusEvent)\"\r\n >\r\n <SelectTrigger :id=\"id\" :class=\"triggerClass\">\r\n <SelectValue :placeholder=\"placeholder\" />\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectItem\r\n v-for=\"option in processedOptions\"\r\n :key=\"option.value\"\r\n :value=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </SelectItem>\r\n </SelectContent>\r\n </Select>\r\n</template>\r\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;;;;;;;;;;;"}
|
|
@@ -6,8 +6,8 @@ const r = (r_comp, r_opts) => {
|
|
|
6
6
|
r_merged[r_key] = r_val;
|
|
7
7
|
return r_merged;
|
|
8
8
|
};
|
|
9
|
-
const
|
|
9
|
+
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-cf2b44a2"]]);
|
|
10
10
|
export {
|
|
11
|
-
|
|
11
|
+
m as default
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=JGrid.vue.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),v=require("ag-grid-vue3"),u=require("ag-grid-community"),b=require("ag-grid-enterprise");;/* empty css */;/* empty css */;/* empty css */const x={class:"ag-grid-container"},D=l.defineComponent({__name:"JGrid",props:{rowData:{},columnDefs:{},theme:{default:"ag-theme-balham"},pagination:{type:Boolean,default:!1},checkbox:{type:Boolean,default:!1},summaryColumn:{type:Boolean,default:!1},hiddenColumn:{type:Boolean,default:!1},enableGrouping:{type:Boolean,default:!1},enablePivot:{type:Boolean,default:!1},enableExcelExport:{type:Boolean,default:!1}},emits:["rowClicked","rowDoubleClicked","cellClicked","selectionChanged","cellValueChanged","gridReady"],setup(a,{expose:r,emit:c}){u.ModuleRegistry.registerModules([u.AllCommunityModule,b.AllEnterpriseModule]);const o=a,t=c,n=l.ref(null),s=l.ref(null),i=l.computed(()=>{if(!o.checkbox)return o.columnDefs;const e=[...o.columnDefs];return e.length>0&&(e[0]={...e[0],checkboxSelection:!0,headerCheckboxSelection:!0}),e}),d=l.computed(()=>({columnDefs:i.value,rowData:o.rowData,pagination:o.pagination,rowSelection:o.checkbox?"multiple":void 0,suppressRowClickSelection:o.checkbox,sideBar:o.enableGrouping||o.enablePivot?{toolPanels:[{id:"columns",labelDefault:"Columns",labelKey:"columns",iconKey:"columns",toolPanel:"agColumnsToolPanel",toolPanelParams:{suppressRowGroups:!o.enableGrouping,suppressValues:!o.enablePivot,suppressPivots:!o.enablePivot,suppressPivotMode:!o.enablePivot}}],defaultToolPanel:"columns",hiddenByDefault:!1}:void 0,groupDefaultExpanded:o.enableGrouping?1:void 0,suppressAggFuncInHeader:!1}));r({gridApi:n,gridColumnApi:s,exportToExcel:()=>{n.value&&o.enableExcelExport&&n.value.exportDataAsExcel({fileName:"grid-export.xlsx"})}});const p=e=>{n.value=e.api,s.value=e.api,t("gridReady",e)},f=e=>{t("rowClicked",e)},m=e=>{t("rowDoubleClicked",e)},g=e=>{t("cellClicked",e)},C=e=>{t("selectionChanged",e)},h=e=>{t("cellValueChanged",e)};return l.watch(()=>o.columnDefs,()=>{n.value&&n.value.setGridOption("columnDefs",i.value)},{deep:!0}),l.watch(()=>o.rowData,()=>{n.value&&n.value.setGridOption("rowData",o.rowData)},{deep:!0}),(e,y)=>(l.openBlock(),l.createElementBlock("div",x,[l.createVNode(l.unref(v.AgGridVue),{"column-defs":i.value,"row-data":a.rowData,"grid-options":d.value,class:l.normalizeClass(a.theme),style:{height:"100%",width:"100%"},onGridReady:p,onRowClicked:f,onRowDoubleClicked:m,onCellClicked:g,onSelectionChanged:C,onCellValueChanged:h},null,8,["column-defs","row-data","grid-options","class"])]))}});exports.default=D;
|
|
2
2
|
//# sourceMappingURL=JGrid.vue2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JGrid.vue2.cjs","sources":["../../../../src/components/atoms/JGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from 'vue'\r\nimport { AgGridVue } from 'ag-grid-vue3'\r\nimport type {
|
|
1
|
+
{"version":3,"file":"JGrid.vue2.cjs","sources":["../../../../src/components/atoms/JGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from 'vue'\r\nimport { AgGridVue } from 'ag-grid-vue3'\r\nimport type {\r\n ColDef,\r\n GridOptions,\r\n RowClickedEvent,\r\n CellClickedEvent,\r\n SelectionChangedEvent,\r\n CellValueChangedEvent,\r\n RowDoubleClickedEvent,\r\n GridReadyEvent,\r\n} from 'ag-grid-community'\r\nimport { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'\r\n// Enterprise 모듈 import (Grouping, Pivot, Excel Export 등)\r\nimport { AllEnterpriseModule } from 'ag-grid-enterprise'\r\n// ag-grid.css는 제거 - v34에서 Theming API와 충돌 방지\r\n// 테마 CSS 파일만 사용 (클래스 기반 테마)\r\n// v34에서는 dark 테마가 같은 CSS 파일 안에 포함되어 있음\r\n// 예: ag-theme-quartz.css에 .ag-theme-quartz-dark 클래스 포함\r\nimport 'ag-grid-community/styles/ag-theme-quartz.css'\r\nimport 'ag-grid-community/styles/ag-theme-alpine.css'\r\nimport 'ag-grid-community/styles/ag-theme-balham.css'\r\n\r\n// AG Grid 모듈 등록 (Community + Enterprise)\r\nModuleRegistry.registerModules([AllCommunityModule, AllEnterpriseModule])\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n /** 그리드에 표시할 데이터 배열 */\r\n rowData: any[]\r\n /** 컬럼 정의 배열 */\r\n columnDefs: ColDef[]\r\n /** ag-Grid 테마 */\r\n theme?: string\r\n /** 페이지네이션 활성화 여부 */\r\n pagination?: boolean\r\n /** 체크박스 선택 활성화 여부 */\r\n checkbox?: boolean\r\n /** 요약 컬럼 표시 여부 */\r\n summaryColumn?: boolean\r\n /** 숨김 컬럼 관리 활성화 여부 */\r\n hiddenColumn?: boolean\r\n /** 그룹핑 기능 활성화 여부 (Enterprise) */\r\n enableGrouping?: boolean\r\n /** 피벗 기능 활성화 여부 (Enterprise) */\r\n enablePivot?: boolean\r\n /** Excel 내보내기 기능 활성화 여부 (Enterprise) */\r\n enableExcelExport?: boolean\r\n }>(),\r\n {\r\n theme: 'ag-theme-balham',\r\n pagination: false,\r\n checkbox: false,\r\n summaryColumn: false,\r\n hiddenColumn: false,\r\n enableGrouping: false,\r\n enablePivot: false,\r\n enableExcelExport: false,\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n /** 행 클릭 이벤트 */\r\n rowClicked: [event: RowClickedEvent]\r\n /** 행 더블클릭 이벤트 */\r\n rowDoubleClicked: [event: RowDoubleClickedEvent]\r\n /** 셀 클릭 이벤트 */\r\n cellClicked: [event: CellClickedEvent]\r\n /** 선택 변경 이벤트 (체크박스 등) */\r\n selectionChanged: [event: SelectionChangedEvent]\r\n /** 셀 값 변경 이벤트 */\r\n cellValueChanged: [event: CellValueChangedEvent]\r\n /** 그리드 준비 완료 이벤트 */\r\n gridReady: [event: GridReadyEvent]\r\n}>()\r\n\r\n// ag-Grid 인스턴스 참조\r\nconst gridApi = ref<any>(null)\r\nconst gridColumnApi = ref<any>(null)\r\n\r\n// checkbox 활성화 시 첫 번째 컬럼에 checkboxSelection 추가\r\nconst processedColumnDefs = computed(() => {\r\n if (!props.checkbox) {\r\n return props.columnDefs\r\n }\r\n\r\n const columnDefs = [...props.columnDefs]\r\n if (columnDefs.length > 0) {\r\n // 첫 번째 컬럼에 checkboxSelection 추가\r\n columnDefs[0] = {\r\n ...columnDefs[0],\r\n checkboxSelection: true,\r\n headerCheckboxSelection: true,\r\n }\r\n }\r\n return columnDefs\r\n})\r\n\r\n// Grid 옵션 설정\r\nconst gridOptions = computed<GridOptions>(() => {\r\n const options: GridOptions = {\r\n // theme 옵션 제거 - 클래스 기반 테마(:class=\"theme\") 사용\r\n columnDefs: processedColumnDefs.value,\r\n rowData: props.rowData,\r\n pagination: props.pagination,\r\n rowSelection: props.checkbox ? 'multiple' : undefined,\r\n // 체크박스 모드일 때 row 클릭으로 선택이 변경되지 않도록 설정\r\n // 체크박스만으로 선택을 제어하도록 함\r\n suppressRowClickSelection: props.checkbox,\r\n // suppressColumnsToolPanel은 ag-grid v34에서 더 이상 지원되지 않음\r\n // summaryColumn은 pinnedBottomRowData 또는 다른 옵션으로 구현 가능\r\n \r\n // Enterprise 기능 옵션\r\n sideBar: props.enableGrouping || props.enablePivot ? {\r\n toolPanels: [\r\n {\r\n id: 'columns',\r\n labelDefault: 'Columns',\r\n labelKey: 'columns',\r\n iconKey: 'columns',\r\n toolPanel: 'agColumnsToolPanel',\r\n toolPanelParams: {\r\n suppressRowGroups: !props.enableGrouping,\r\n suppressValues: !props.enablePivot,\r\n suppressPivots: !props.enablePivot,\r\n suppressPivotMode: !props.enablePivot,\r\n },\r\n },\r\n ],\r\n defaultToolPanel: 'columns',\r\n hiddenByDefault: false,\r\n } : undefined,\r\n \r\n // 그룹핑 기본 설정\r\n groupDefaultExpanded: props.enableGrouping ? 1 : undefined,\r\n suppressAggFuncInHeader: false,\r\n }\r\n\r\n return options\r\n})\r\n\r\n// Excel 내보내기 함수 (외부에서 사용 가능하도록 expose)\r\nconst exportToExcel = () => {\r\n if (gridApi.value && props.enableExcelExport) {\r\n gridApi.value.exportDataAsExcel({\r\n fileName: 'grid-export.xlsx',\r\n })\r\n }\r\n}\r\n\r\n// 그리드 API를 외부에 노출\r\ndefineExpose({\r\n gridApi,\r\n gridColumnApi,\r\n exportToExcel,\r\n})\r\n\r\n// Grid ready 이벤트 핸들러\r\nconst onGridReady = (params: GridReadyEvent) => {\r\n gridApi.value = params.api\r\n gridColumnApi.value = params.api // v34에서 columnApi는 deprecated\r\n emit('gridReady', params)\r\n}\r\n\r\n// 행 클릭 이벤트 핸들러\r\nconst onRowClicked = (event: RowClickedEvent) => {\r\n emit('rowClicked', event)\r\n}\r\n\r\n// 행 더블클릭 이벤트 핸들러\r\nconst onRowDoubleClicked = (event: RowDoubleClickedEvent) => {\r\n emit('rowDoubleClicked', event)\r\n}\r\n\r\n// 셀 클릭 이벤트 핸들러\r\nconst onCellClicked = (event: CellClickedEvent) => {\r\n emit('cellClicked', event)\r\n}\r\n\r\n// 선택 변경 이벤트 핸들러\r\nconst onSelectionChanged = (event: SelectionChangedEvent) => {\r\n emit('selectionChanged', event)\r\n}\r\n\r\n// 셀 값 변경 이벤트 핸들러\r\nconst onCellValueChanged = (event: CellValueChangedEvent) => {\r\n emit('cellValueChanged', event)\r\n}\r\n\r\n// columnDefs 변경 감지\r\nwatch(\r\n () => props.columnDefs,\r\n () => {\r\n if (gridApi.value) {\r\n gridApi.value.setGridOption('columnDefs', processedColumnDefs.value)\r\n }\r\n },\r\n { deep: true },\r\n)\r\n\r\n// rowData 변경 감지\r\nwatch(\r\n () => props.rowData,\r\n () => {\r\n if (gridApi.value) {\r\n gridApi.value.setGridOption('rowData', props.rowData)\r\n }\r\n },\r\n { deep: true },\r\n)\r\n</script>\r\n\r\n<template>\r\n <div class=\"ag-grid-container\">\r\n <AgGridVue\r\n :column-defs=\"processedColumnDefs\"\r\n :row-data=\"rowData\"\r\n :grid-options=\"gridOptions\"\r\n :class=\"theme\"\r\n style=\"height: 100%; width: 100%\"\r\n @grid-ready=\"onGridReady\"\r\n @row-clicked=\"onRowClicked\"\r\n @row-double-clicked=\"onRowDoubleClicked\"\r\n @cell-clicked=\"onCellClicked\"\r\n @selection-changed=\"onSelectionChanged\"\r\n @cell-value-changed=\"onCellValueChanged\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n.ag-grid-container {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n</style>\r\n"],"names":["ModuleRegistry","AllCommunityModule","AllEnterpriseModule","props","__props","emit","__emit","gridApi","ref","gridColumnApi","processedColumnDefs","computed","columnDefs","gridOptions","__expose","onGridReady","params","onRowClicked","event","onRowDoubleClicked","onCellClicked","onSelectionChanged","onCellValueChanged","watch","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","AgGridVue"],"mappings":"6mCAyBAA,EAAAA,eAAe,gBAAgB,CAACC,EAAAA,mBAAoBC,EAAAA,mBAAmB,CAAC,EAExE,MAAMC,EAAQC,EAmCRC,EAAOC,EAgBPC,EAAUC,EAAAA,IAAS,IAAI,EACvBC,EAAgBD,EAAAA,IAAS,IAAI,EAG7BE,EAAsBC,EAAAA,SAAS,IAAM,CACzC,GAAI,CAACR,EAAM,SACT,OAAOA,EAAM,WAGf,MAAMS,EAAa,CAAC,GAAGT,EAAM,UAAU,EACvC,OAAIS,EAAW,OAAS,IAEtBA,EAAW,CAAC,EAAI,CACd,GAAGA,EAAW,CAAC,EACf,kBAAmB,GACnB,wBAAyB,EAAA,GAGtBA,CACT,CAAC,EAGKC,EAAcF,EAAAA,SAAsB,KACX,CAE3B,WAAYD,EAAoB,MAChC,QAASP,EAAM,QACf,WAAYA,EAAM,WAClB,aAAcA,EAAM,SAAW,WAAa,OAG5C,0BAA2BA,EAAM,SAKjC,QAASA,EAAM,gBAAkBA,EAAM,YAAc,CACnD,WAAY,CACV,CACE,GAAI,UACJ,aAAc,UACd,SAAU,UACV,QAAS,UACT,UAAW,qBACX,gBAAiB,CACf,kBAAmB,CAACA,EAAM,eAC1B,eAAgB,CAACA,EAAM,YACvB,eAAgB,CAACA,EAAM,YACvB,kBAAmB,CAACA,EAAM,WAAA,CAC5B,CACF,EAEF,iBAAkB,UAClB,gBAAiB,EAAA,EACf,OAGJ,qBAAsBA,EAAM,eAAiB,EAAI,OACjD,wBAAyB,EAAA,EAI5B,EAYDW,EAAa,CACX,QAAAP,EACA,cAAAE,EACA,cAZoB,IAAM,CACtBF,EAAQ,OAASJ,EAAM,mBACzBI,EAAQ,MAAM,kBAAkB,CAC9B,SAAU,kBAAA,CACX,CAEL,CAME,CACD,EAGD,MAAMQ,EAAeC,GAA2B,CAC9CT,EAAQ,MAAQS,EAAO,IACvBP,EAAc,MAAQO,EAAO,IAC7BX,EAAK,YAAaW,CAAM,CAC1B,EAGMC,EAAgBC,GAA2B,CAC/Cb,EAAK,aAAca,CAAK,CAC1B,EAGMC,EAAsBD,GAAiC,CAC3Db,EAAK,mBAAoBa,CAAK,CAChC,EAGME,EAAiBF,GAA4B,CACjDb,EAAK,cAAea,CAAK,CAC3B,EAGMG,EAAsBH,GAAiC,CAC3Db,EAAK,mBAAoBa,CAAK,CAChC,EAGMI,EAAsBJ,GAAiC,CAC3Db,EAAK,mBAAoBa,CAAK,CAChC,EAGAK,OAAAA,EAAAA,MACE,IAAMpB,EAAM,WACZ,IAAM,CACAI,EAAQ,OACVA,EAAQ,MAAM,cAAc,aAAcG,EAAoB,KAAK,CAEvE,EACA,CAAE,KAAM,EAAA,CAAK,EAIfa,EAAAA,MACE,IAAMpB,EAAM,QACZ,IAAM,CACAI,EAAQ,OACVA,EAAQ,MAAM,cAAc,UAAWJ,EAAM,OAAO,CAExD,EACA,CAAE,KAAM,EAAA,CAAK,UAKbqB,YAAA,EAAAC,qBAcM,MAdNC,EAcM,CAbJC,cAYEC,EAAAA,MAAAC,EAAAA,SAAA,EAAA,CAXC,cAAanB,EAAA,MACb,WAAUN,EAAA,QACV,eAAcS,EAAA,MACd,uBAAOT,EAAA,KAAK,EACb,MAAA,CAAA,OAAA,OAAA,MAAA,MAAA,EACC,YAAAW,EACA,aAAAE,EACA,mBAAAE,EACA,cAAAC,EACA,mBAAAC,EACA,mBAAAC,CAAA"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { AgGridVue as
|
|
3
|
-
import { ModuleRegistry as
|
|
4
|
-
import { AllEnterpriseModule as
|
|
1
|
+
import { defineComponent as v, ref as i, computed as r, watch as u, createElementBlock as x, openBlock as D, createVNode as w, unref as k, normalizeClass as y } from "vue";
|
|
2
|
+
import { AgGridVue as P } from "ag-grid-vue3";
|
|
3
|
+
import { ModuleRegistry as B, AllCommunityModule as E } from "ag-grid-community";
|
|
4
|
+
import { AllEnterpriseModule as G } from "ag-grid-enterprise";
|
|
5
5
|
/* empty css */
|
|
6
6
|
/* empty css */
|
|
7
7
|
/* empty css */
|
|
8
|
-
const
|
|
8
|
+
const R = { class: "ag-grid-container" }, z = /* @__PURE__ */ v({
|
|
9
9
|
__name: "JGrid",
|
|
10
10
|
props: {
|
|
11
11
|
rowData: {},
|
|
@@ -19,30 +19,31 @@ const w = { class: "ag-grid-container" }, S = /* @__PURE__ */ d({
|
|
|
19
19
|
enablePivot: { type: Boolean, default: !1 },
|
|
20
20
|
enableExcelExport: { type: Boolean, default: !1 }
|
|
21
21
|
},
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
emits: ["rowClicked", "rowDoubleClicked", "cellClicked", "selectionChanged", "cellValueChanged", "gridReady"],
|
|
23
|
+
setup(n, { expose: c, emit: d }) {
|
|
24
|
+
B.registerModules([E, G]);
|
|
25
|
+
const o = n, t = d, l = i(null), s = i(null), a = r(() => {
|
|
26
|
+
if (!o.checkbox)
|
|
27
|
+
return o.columnDefs;
|
|
28
|
+
const e = [...o.columnDefs];
|
|
29
|
+
return e.length > 0 && (e[0] = {
|
|
30
|
+
...e[0],
|
|
30
31
|
checkboxSelection: !0,
|
|
31
32
|
headerCheckboxSelection: !0
|
|
32
|
-
}),
|
|
33
|
-
}),
|
|
33
|
+
}), e;
|
|
34
|
+
}), p = r(() => ({
|
|
34
35
|
// theme 옵션 제거 - 클래스 기반 테마(:class="theme") 사용
|
|
35
|
-
columnDefs:
|
|
36
|
-
rowData:
|
|
37
|
-
pagination:
|
|
38
|
-
rowSelection:
|
|
36
|
+
columnDefs: a.value,
|
|
37
|
+
rowData: o.rowData,
|
|
38
|
+
pagination: o.pagination,
|
|
39
|
+
rowSelection: o.checkbox ? "multiple" : void 0,
|
|
39
40
|
// 체크박스 모드일 때 row 클릭으로 선택이 변경되지 않도록 설정
|
|
40
41
|
// 체크박스만으로 선택을 제어하도록 함
|
|
41
|
-
suppressRowClickSelection:
|
|
42
|
+
suppressRowClickSelection: o.checkbox,
|
|
42
43
|
// suppressColumnsToolPanel은 ag-grid v34에서 더 이상 지원되지 않음
|
|
43
44
|
// summaryColumn은 pinnedBottomRowData 또는 다른 옵션으로 구현 가능
|
|
44
45
|
// Enterprise 기능 옵션
|
|
45
|
-
sideBar:
|
|
46
|
+
sideBar: o.enableGrouping || o.enablePivot ? {
|
|
46
47
|
toolPanels: [
|
|
47
48
|
{
|
|
48
49
|
id: "columns",
|
|
@@ -51,10 +52,10 @@ const w = { class: "ag-grid-container" }, S = /* @__PURE__ */ d({
|
|
|
51
52
|
iconKey: "columns",
|
|
52
53
|
toolPanel: "agColumnsToolPanel",
|
|
53
54
|
toolPanelParams: {
|
|
54
|
-
suppressRowGroups: !
|
|
55
|
-
suppressValues: !
|
|
56
|
-
suppressPivots: !
|
|
57
|
-
suppressPivotMode: !
|
|
55
|
+
suppressRowGroups: !o.enableGrouping,
|
|
56
|
+
suppressValues: !o.enablePivot,
|
|
57
|
+
suppressPivots: !o.enablePivot,
|
|
58
|
+
suppressPivotMode: !o.enablePivot
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
61
|
],
|
|
@@ -62,46 +63,61 @@ const w = { class: "ag-grid-container" }, S = /* @__PURE__ */ d({
|
|
|
62
63
|
hiddenByDefault: !1
|
|
63
64
|
} : void 0,
|
|
64
65
|
// 그룹핑 기본 설정
|
|
65
|
-
groupDefaultExpanded:
|
|
66
|
+
groupDefaultExpanded: o.enableGrouping ? 1 : void 0,
|
|
66
67
|
suppressAggFuncInHeader: !1
|
|
67
68
|
}));
|
|
68
|
-
|
|
69
|
+
c({
|
|
69
70
|
gridApi: l,
|
|
70
|
-
gridColumnApi:
|
|
71
|
+
gridColumnApi: s,
|
|
71
72
|
exportToExcel: () => {
|
|
72
|
-
l.value &&
|
|
73
|
+
l.value && o.enableExcelExport && l.value.exportDataAsExcel({
|
|
73
74
|
fileName: "grid-export.xlsx"
|
|
74
75
|
});
|
|
75
76
|
}
|
|
76
77
|
});
|
|
77
|
-
const
|
|
78
|
-
l.value =
|
|
78
|
+
const m = (e) => {
|
|
79
|
+
l.value = e.api, s.value = e.api, t("gridReady", e);
|
|
80
|
+
}, f = (e) => {
|
|
81
|
+
t("rowClicked", e);
|
|
82
|
+
}, g = (e) => {
|
|
83
|
+
t("rowDoubleClicked", e);
|
|
84
|
+
}, C = (e) => {
|
|
85
|
+
t("cellClicked", e);
|
|
86
|
+
}, h = (e) => {
|
|
87
|
+
t("selectionChanged", e);
|
|
88
|
+
}, b = (e) => {
|
|
89
|
+
t("cellValueChanged", e);
|
|
79
90
|
};
|
|
80
91
|
return u(
|
|
81
|
-
() =>
|
|
92
|
+
() => o.columnDefs,
|
|
82
93
|
() => {
|
|
83
|
-
l.value && l.value.setGridOption("columnDefs",
|
|
94
|
+
l.value && l.value.setGridOption("columnDefs", a.value);
|
|
84
95
|
},
|
|
85
96
|
{ deep: !0 }
|
|
86
97
|
), u(
|
|
87
|
-
() =>
|
|
98
|
+
() => o.rowData,
|
|
88
99
|
() => {
|
|
89
|
-
l.value && l.value.setGridOption("rowData",
|
|
100
|
+
l.value && l.value.setGridOption("rowData", o.rowData);
|
|
90
101
|
},
|
|
91
102
|
{ deep: !0 }
|
|
92
|
-
), (
|
|
93
|
-
|
|
94
|
-
"column-defs":
|
|
95
|
-
"row-data":
|
|
96
|
-
"grid-options":
|
|
97
|
-
class:
|
|
103
|
+
), (e, V) => (D(), x("div", R, [
|
|
104
|
+
w(k(P), {
|
|
105
|
+
"column-defs": a.value,
|
|
106
|
+
"row-data": n.rowData,
|
|
107
|
+
"grid-options": p.value,
|
|
108
|
+
class: y(n.theme),
|
|
98
109
|
style: { height: "100%", width: "100%" },
|
|
99
|
-
onGridReady:
|
|
110
|
+
onGridReady: m,
|
|
111
|
+
onRowClicked: f,
|
|
112
|
+
onRowDoubleClicked: g,
|
|
113
|
+
onCellClicked: C,
|
|
114
|
+
onSelectionChanged: h,
|
|
115
|
+
onCellValueChanged: b
|
|
100
116
|
}, null, 8, ["column-defs", "row-data", "grid-options", "class"])
|
|
101
117
|
]));
|
|
102
118
|
}
|
|
103
119
|
});
|
|
104
120
|
export {
|
|
105
|
-
|
|
121
|
+
z as default
|
|
106
122
|
};
|
|
107
123
|
//# sourceMappingURL=JGrid.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JGrid.vue2.js","sources":["../../../../src/components/atoms/JGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from 'vue'\r\nimport { AgGridVue } from 'ag-grid-vue3'\r\nimport type {
|
|
1
|
+
{"version":3,"file":"JGrid.vue2.js","sources":["../../../../src/components/atoms/JGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from 'vue'\r\nimport { AgGridVue } from 'ag-grid-vue3'\r\nimport type {\r\n ColDef,\r\n GridOptions,\r\n RowClickedEvent,\r\n CellClickedEvent,\r\n SelectionChangedEvent,\r\n CellValueChangedEvent,\r\n RowDoubleClickedEvent,\r\n GridReadyEvent,\r\n} from 'ag-grid-community'\r\nimport { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'\r\n// Enterprise 모듈 import (Grouping, Pivot, Excel Export 등)\r\nimport { AllEnterpriseModule } from 'ag-grid-enterprise'\r\n// ag-grid.css는 제거 - v34에서 Theming API와 충돌 방지\r\n// 테마 CSS 파일만 사용 (클래스 기반 테마)\r\n// v34에서는 dark 테마가 같은 CSS 파일 안에 포함되어 있음\r\n// 예: ag-theme-quartz.css에 .ag-theme-quartz-dark 클래스 포함\r\nimport 'ag-grid-community/styles/ag-theme-quartz.css'\r\nimport 'ag-grid-community/styles/ag-theme-alpine.css'\r\nimport 'ag-grid-community/styles/ag-theme-balham.css'\r\n\r\n// AG Grid 모듈 등록 (Community + Enterprise)\r\nModuleRegistry.registerModules([AllCommunityModule, AllEnterpriseModule])\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n /** 그리드에 표시할 데이터 배열 */\r\n rowData: any[]\r\n /** 컬럼 정의 배열 */\r\n columnDefs: ColDef[]\r\n /** ag-Grid 테마 */\r\n theme?: string\r\n /** 페이지네이션 활성화 여부 */\r\n pagination?: boolean\r\n /** 체크박스 선택 활성화 여부 */\r\n checkbox?: boolean\r\n /** 요약 컬럼 표시 여부 */\r\n summaryColumn?: boolean\r\n /** 숨김 컬럼 관리 활성화 여부 */\r\n hiddenColumn?: boolean\r\n /** 그룹핑 기능 활성화 여부 (Enterprise) */\r\n enableGrouping?: boolean\r\n /** 피벗 기능 활성화 여부 (Enterprise) */\r\n enablePivot?: boolean\r\n /** Excel 내보내기 기능 활성화 여부 (Enterprise) */\r\n enableExcelExport?: boolean\r\n }>(),\r\n {\r\n theme: 'ag-theme-balham',\r\n pagination: false,\r\n checkbox: false,\r\n summaryColumn: false,\r\n hiddenColumn: false,\r\n enableGrouping: false,\r\n enablePivot: false,\r\n enableExcelExport: false,\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n /** 행 클릭 이벤트 */\r\n rowClicked: [event: RowClickedEvent]\r\n /** 행 더블클릭 이벤트 */\r\n rowDoubleClicked: [event: RowDoubleClickedEvent]\r\n /** 셀 클릭 이벤트 */\r\n cellClicked: [event: CellClickedEvent]\r\n /** 선택 변경 이벤트 (체크박스 등) */\r\n selectionChanged: [event: SelectionChangedEvent]\r\n /** 셀 값 변경 이벤트 */\r\n cellValueChanged: [event: CellValueChangedEvent]\r\n /** 그리드 준비 완료 이벤트 */\r\n gridReady: [event: GridReadyEvent]\r\n}>()\r\n\r\n// ag-Grid 인스턴스 참조\r\nconst gridApi = ref<any>(null)\r\nconst gridColumnApi = ref<any>(null)\r\n\r\n// checkbox 활성화 시 첫 번째 컬럼에 checkboxSelection 추가\r\nconst processedColumnDefs = computed(() => {\r\n if (!props.checkbox) {\r\n return props.columnDefs\r\n }\r\n\r\n const columnDefs = [...props.columnDefs]\r\n if (columnDefs.length > 0) {\r\n // 첫 번째 컬럼에 checkboxSelection 추가\r\n columnDefs[0] = {\r\n ...columnDefs[0],\r\n checkboxSelection: true,\r\n headerCheckboxSelection: true,\r\n }\r\n }\r\n return columnDefs\r\n})\r\n\r\n// Grid 옵션 설정\r\nconst gridOptions = computed<GridOptions>(() => {\r\n const options: GridOptions = {\r\n // theme 옵션 제거 - 클래스 기반 테마(:class=\"theme\") 사용\r\n columnDefs: processedColumnDefs.value,\r\n rowData: props.rowData,\r\n pagination: props.pagination,\r\n rowSelection: props.checkbox ? 'multiple' : undefined,\r\n // 체크박스 모드일 때 row 클릭으로 선택이 변경되지 않도록 설정\r\n // 체크박스만으로 선택을 제어하도록 함\r\n suppressRowClickSelection: props.checkbox,\r\n // suppressColumnsToolPanel은 ag-grid v34에서 더 이상 지원되지 않음\r\n // summaryColumn은 pinnedBottomRowData 또는 다른 옵션으로 구현 가능\r\n \r\n // Enterprise 기능 옵션\r\n sideBar: props.enableGrouping || props.enablePivot ? {\r\n toolPanels: [\r\n {\r\n id: 'columns',\r\n labelDefault: 'Columns',\r\n labelKey: 'columns',\r\n iconKey: 'columns',\r\n toolPanel: 'agColumnsToolPanel',\r\n toolPanelParams: {\r\n suppressRowGroups: !props.enableGrouping,\r\n suppressValues: !props.enablePivot,\r\n suppressPivots: !props.enablePivot,\r\n suppressPivotMode: !props.enablePivot,\r\n },\r\n },\r\n ],\r\n defaultToolPanel: 'columns',\r\n hiddenByDefault: false,\r\n } : undefined,\r\n \r\n // 그룹핑 기본 설정\r\n groupDefaultExpanded: props.enableGrouping ? 1 : undefined,\r\n suppressAggFuncInHeader: false,\r\n }\r\n\r\n return options\r\n})\r\n\r\n// Excel 내보내기 함수 (외부에서 사용 가능하도록 expose)\r\nconst exportToExcel = () => {\r\n if (gridApi.value && props.enableExcelExport) {\r\n gridApi.value.exportDataAsExcel({\r\n fileName: 'grid-export.xlsx',\r\n })\r\n }\r\n}\r\n\r\n// 그리드 API를 외부에 노출\r\ndefineExpose({\r\n gridApi,\r\n gridColumnApi,\r\n exportToExcel,\r\n})\r\n\r\n// Grid ready 이벤트 핸들러\r\nconst onGridReady = (params: GridReadyEvent) => {\r\n gridApi.value = params.api\r\n gridColumnApi.value = params.api // v34에서 columnApi는 deprecated\r\n emit('gridReady', params)\r\n}\r\n\r\n// 행 클릭 이벤트 핸들러\r\nconst onRowClicked = (event: RowClickedEvent) => {\r\n emit('rowClicked', event)\r\n}\r\n\r\n// 행 더블클릭 이벤트 핸들러\r\nconst onRowDoubleClicked = (event: RowDoubleClickedEvent) => {\r\n emit('rowDoubleClicked', event)\r\n}\r\n\r\n// 셀 클릭 이벤트 핸들러\r\nconst onCellClicked = (event: CellClickedEvent) => {\r\n emit('cellClicked', event)\r\n}\r\n\r\n// 선택 변경 이벤트 핸들러\r\nconst onSelectionChanged = (event: SelectionChangedEvent) => {\r\n emit('selectionChanged', event)\r\n}\r\n\r\n// 셀 값 변경 이벤트 핸들러\r\nconst onCellValueChanged = (event: CellValueChangedEvent) => {\r\n emit('cellValueChanged', event)\r\n}\r\n\r\n// columnDefs 변경 감지\r\nwatch(\r\n () => props.columnDefs,\r\n () => {\r\n if (gridApi.value) {\r\n gridApi.value.setGridOption('columnDefs', processedColumnDefs.value)\r\n }\r\n },\r\n { deep: true },\r\n)\r\n\r\n// rowData 변경 감지\r\nwatch(\r\n () => props.rowData,\r\n () => {\r\n if (gridApi.value) {\r\n gridApi.value.setGridOption('rowData', props.rowData)\r\n }\r\n },\r\n { deep: true },\r\n)\r\n</script>\r\n\r\n<template>\r\n <div class=\"ag-grid-container\">\r\n <AgGridVue\r\n :column-defs=\"processedColumnDefs\"\r\n :row-data=\"rowData\"\r\n :grid-options=\"gridOptions\"\r\n :class=\"theme\"\r\n style=\"height: 100%; width: 100%\"\r\n @grid-ready=\"onGridReady\"\r\n @row-clicked=\"onRowClicked\"\r\n @row-double-clicked=\"onRowDoubleClicked\"\r\n @cell-clicked=\"onCellClicked\"\r\n @selection-changed=\"onSelectionChanged\"\r\n @cell-value-changed=\"onCellValueChanged\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n.ag-grid-container {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n</style>\r\n"],"names":["ModuleRegistry","AllCommunityModule","AllEnterpriseModule","props","__props","emit","__emit","gridApi","ref","gridColumnApi","processedColumnDefs","computed","columnDefs","gridOptions","__expose","onGridReady","params","onRowClicked","event","onRowDoubleClicked","onCellClicked","onSelectionChanged","onCellValueChanged","watch","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","AgGridVue"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("lucide-vue-next"),B=require("../atoms/JBadge.vue.cjs"),f=require("../atoms/JButton.vue.cjs"),_={class:"w-full rounded-lg border bg-card text-card-foreground"},v={class:"flex items-center justify-between px-4 py-2"},k={class:"flex items-center gap-2"},x={key:1,class:"flex items-center gap-1 flex-wrap"},b={class:"text-muted-foreground"},w=["onClick"],C={class:"flex items-center gap-2"},N={class:"px-4 pb-4"},E=e.defineComponent({__name:"JFilterBar",props:{collapsed:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},filterValues:{default:()=>({})},filterConfig:{default:()=>({})},showResetButton:{type:Boolean,default:!1},showSearchButton:{type:Boolean,default:!1},resetButtonText:{default:"초기화"},searchButtonText:{default:"조회"}},emits:["update:collapsed","update:filterValues","search"],setup(n,{emit:p}){const r=n,s=p,c=e.computed(()=>r.collapsible?!r.collapsed:!0);function m(t){return!!(t==null||typeof t=="string"&&t.trim()===""||Array.isArray(t)&&t.length===0)}const i=e.computed(()=>{const t=[];for(const[l,o]of Object.entries(r.filterConfig)){const a=r.filterValues[l];if(m(a))continue;const u=o.displayValue?o.displayValue(a):String(a);u.trim()!==""&&t.push({key:l,label:o.label,value:u})}return t});function y(){s("update:collapsed",!r.collapsed)}function h(){const t={};for(const l of Object.keys(r.filterValues)){const o=r.filterValues[l];typeof o=="string"?t[l]="":Array.isArray(o)?t[l]=[]:t[l]=null}s("update:filterValues",t)}function g(){s("search")}function V(t){const l={...r.filterValues},o=l[t];typeof o=="string"?l[t]="":Array.isArray(o)?l[t]=[]:l[t]=null,s("update:filterValues",l)}return(t,l)=>(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",v,[e.createElementVNode("div",k,[n.collapsible?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"flex items-center justify-center h-7 w-7 rounded hover:bg-accent hover:text-accent-foreground transition-colors",onClick:y},[e.createVNode(e.unref(d.ChevronDown),{class:e.normalizeClass(["h-4 w-4 transition-transform",c.value?"rotate-0":"-rotate-90"])},null,8,["class"])])):e.createCommentVNode("",!0),i.value.length>0?(e.openBlock(),e.createElementBlock("div",x,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,o=>(e.openBlock(),e.createBlock(B.default,{key:o.key,variant:"secondary",size:"sm",class:"flex items-center gap-1 cursor-default"},{default:e.withCtx(()=>[e.createElementVNode("span",b,e.toDisplayString(o.label)+":",1),e.createElementVNode("span",null,e.toDisplayString(o.value),1),e.createElementVNode("button",{type:"button",class:"ml-0.5 rounded-full hover:bg-gray-300 p-0.5 transition-colors",onClick:e.withModifiers(a=>V(o.key),["stop"])},[e.createVNode(e.unref(d.X),{class:"h-3 w-3"})],8,w)]),_:2},1024))),128))])):e.createCommentVNode("",!0)]),e.createElementVNode("div",C,[e.renderSlot(t.$slots,"actions"),n.showResetButton?(e.openBlock(),e.createBlock(f.default,{key:0,variant:"outline",size:"sm",onClick:h},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.resetButtonText),1)]),_:1})):e.createCommentVNode("",!0),n.showSearchButton?(e.openBlock(),e.createBlock(f.default,{key:1,styletype:"primary",size:"sm",onClick:g},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.searchButtonText),1)]),_:1})):e.createCommentVNode("",!0)])]),e.withDirectives(e.createElementVNode("div",N,[e.renderSlot(t.$slots,"filters")],512),[[e.vShow,c.value]])]))}});exports.default=E;
|
|
2
2
|
//# sourceMappingURL=JFilterBar.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JFilterBar.vue.cjs","sources":["../../../../src/components/organisms/JFilterBar.vue"],"sourcesContent":["<template>\r\n <div class=\"w-full rounded-lg border bg-card text-card-foreground\">\r\n <!-- Row 1: toolbar -->\r\n <div class=\"flex items-center justify-between px-4 py-2\">\r\n <div class=\"flex items-center\">\r\n <button\r\n v-if=\"
|
|
1
|
+
{"version":3,"file":"JFilterBar.vue.cjs","sources":["../../../../src/components/organisms/JFilterBar.vue"],"sourcesContent":["<template>\r\n <div class=\"w-full rounded-lg border bg-card text-card-foreground\">\r\n <!-- Row 1: toolbar -->\r\n <div class=\"flex items-center justify-between px-4 py-2\">\r\n <div class=\"flex items-center gap-2\">\r\n <button\r\n v-if=\"collapsible\"\r\n type=\"button\"\r\n class=\"flex items-center justify-center h-7 w-7 rounded hover:bg-accent hover:text-accent-foreground transition-colors\"\r\n @click=\"toggleCollapsed\"\r\n >\r\n <ChevronDown\r\n :class=\"[\r\n 'h-4 w-4 transition-transform',\r\n isExpanded ? 'rotate-0' : '-rotate-90',\r\n ]\"\r\n />\r\n </button>\r\n <!-- 선택된 필터 뱃지 표시 -->\r\n <div v-if=\"activeFilters.length > 0\" class=\"flex items-center gap-1 flex-wrap\">\r\n <JBadge\r\n v-for=\"filter in activeFilters\"\r\n :key=\"filter.key\"\r\n variant=\"secondary\"\r\n size=\"sm\"\r\n class=\"flex items-center gap-1 cursor-default\"\r\n >\r\n <span class=\"text-muted-foreground\">{{ filter.label }}:</span>\r\n <span>{{ filter.value }}</span>\r\n <button\r\n type=\"button\"\r\n class=\"ml-0.5 rounded-full hover:bg-gray-300 p-0.5 transition-colors\"\r\n @click.stop=\"removeFilter(filter.key)\"\r\n >\r\n <X class=\"h-3 w-3\" />\r\n </button>\r\n </JBadge>\r\n </div>\r\n </div>\r\n <div class=\"flex items-center gap-2\">\r\n <slot name=\"actions\" />\r\n <JButton\r\n v-if=\"showResetButton\"\r\n variant=\"outline\"\r\n size=\"sm\"\r\n @click=\"handleReset\"\r\n >\r\n {{ resetButtonText }}\r\n </JButton>\r\n <JButton\r\n v-if=\"showSearchButton\"\r\n styletype=\"primary\"\r\n size=\"sm\"\r\n @click=\"handleSearch\"\r\n >\r\n {{ searchButtonText }}\r\n </JButton>\r\n </div>\r\n </div>\r\n\r\n <!-- Row 2: filters -->\r\n <div v-show=\"isExpanded\" class=\"px-4 pb-4\">\r\n <slot name=\"filters\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue'\r\nimport { ChevronDown, X } from 'lucide-vue-next'\r\nimport JBadge from '@/components/atoms/JBadge.vue'\r\nimport JButton from '@/components/atoms/JButton.vue'\r\n\r\n/** 활성 필터 아이템 타입 */\r\nexport interface ActiveFilterItem {\r\n /** 필터 식별 키 */\r\n key: string\r\n /** 표시할 라벨 (필터명) */\r\n label: string\r\n /** 표시할 값 */\r\n value: string\r\n}\r\n\r\n/** 필터 설정 타입 */\r\nexport interface FilterConfigItem {\r\n /** 표시할 라벨 */\r\n label: string\r\n /** 값을 표시용 문자열로 변환 (예: combo value -> label) */\r\n displayValue?: (value: unknown) => string\r\n}\r\n\r\nexport interface JFilterBarProps {\r\n /** 필터 접힘 상태 (v-model 지원) */\r\n collapsed?: boolean\r\n /** 접기/펼치기 가능 여부. false면 토글 버튼 숨김 & 필터 항상 표시 */\r\n collapsible?: boolean\r\n /** 필터 값 객체 (v-model:filterValues 지원) */\r\n filterValues?: Record<string, unknown>\r\n /** 필터 설정 (label, displayValue 등) */\r\n filterConfig?: Record<string, FilterConfigItem>\r\n /** 초기화 버튼 표시 여부 */\r\n showResetButton?: boolean\r\n /** 조회 버튼 표시 여부 */\r\n showSearchButton?: boolean\r\n /** 초기화 버튼 텍스트 */\r\n resetButtonText?: string\r\n /** 조회 버튼 텍스트 */\r\n searchButtonText?: string\r\n}\r\n\r\nconst props = withDefaults(defineProps<JFilterBarProps>(), {\r\n collapsed: false,\r\n collapsible: true,\r\n filterValues: () => ({}),\r\n filterConfig: () => ({}),\r\n showResetButton: false,\r\n showSearchButton: false,\r\n resetButtonText: '초기화',\r\n searchButtonText: '조회',\r\n})\r\n\r\nconst emit = defineEmits<{\r\n 'update:collapsed': [value: boolean]\r\n 'update:filterValues': [value: Record<string, unknown>]\r\n /** 조회 버튼 클릭 */\r\n search: []\r\n}>()\r\n\r\nconst isExpanded = computed(() => {\r\n if (!props.collapsible) return true\r\n return !props.collapsed\r\n})\r\n\r\n/** 값이 비어있는지 확인 */\r\nfunction isEmpty(value: unknown): boolean {\r\n if (value === null || value === undefined) return true\r\n if (typeof value === 'string' && value.trim() === '') return true\r\n if (Array.isArray(value) && value.length === 0) return true\r\n return false\r\n}\r\n\r\n/** filterValues + filterConfig 기반으로 활성 필터 목록 자동 생성 */\r\nconst activeFilters = computed<ActiveFilterItem[]>(() => {\r\n const filters: ActiveFilterItem[] = []\r\n\r\n for (const [key, config] of Object.entries(props.filterConfig)) {\r\n const value = props.filterValues[key]\r\n if (isEmpty(value)) continue\r\n\r\n const displayValue = config.displayValue ? config.displayValue(value) : String(value)\r\n if (displayValue.trim() === '') continue\r\n\r\n filters.push({\r\n key,\r\n label: config.label,\r\n value: displayValue,\r\n })\r\n }\r\n\r\n return filters\r\n})\r\n\r\nfunction toggleCollapsed() {\r\n emit('update:collapsed', !props.collapsed)\r\n}\r\n\r\nfunction handleReset() {\r\n // filterValues의 모든 값을 초기화\r\n const resetValues: Record<string, unknown> = {}\r\n for (const key of Object.keys(props.filterValues)) {\r\n const currentValue = props.filterValues[key]\r\n if (typeof currentValue === 'string') {\r\n resetValues[key] = ''\r\n } else if (Array.isArray(currentValue)) {\r\n resetValues[key] = []\r\n } else {\r\n resetValues[key] = null\r\n }\r\n }\r\n emit('update:filterValues', resetValues)\r\n}\r\n\r\nfunction handleSearch() {\r\n emit('search')\r\n}\r\n\r\nfunction removeFilter(key: string) {\r\n // filterValues 업데이트 (해당 키 값을 초기화)\r\n const newValues = { ...props.filterValues }\r\n const currentValue = newValues[key]\r\n\r\n // 타입에 따라 적절한 초기값으로 설정\r\n if (typeof currentValue === 'string') {\r\n newValues[key] = ''\r\n } else if (Array.isArray(currentValue)) {\r\n newValues[key] = []\r\n } else {\r\n newValues[key] = null\r\n }\r\n\r\n emit('update:filterValues', newValues)\r\n}\r\n</script>\r\n"],"names":["props","__props","emit","__emit","isExpanded","computed","isEmpty","value","activeFilters","filters","key","config","displayValue","toggleCollapsed","handleReset","resetValues","currentValue","handleSearch","removeFilter","newValues","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_createVNode","_unref","ChevronDown","_normalizeClass","_hoisted_4","_Fragment","_renderList","filter","_createBlock","JBadge","_hoisted_5","_toDisplayString","_withModifiers","$event","X","_hoisted_7","_renderSlot","_ctx","JButton","_withDirectives","_hoisted_8"],"mappings":"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"}
|