@j-solution/components 1.0.0

package/components/organisms/JDynamicForm.vue2.js

@@ -0,0 +1,401 @@
+import { defineComponent as X, reactive as Z, watch as _, computed as ee, createElementBlock as c, openBlock as i, normalizeClass as p, withModifiers as te, createCommentVNode as D, Fragment as g, renderList as h, normalizeStyle as q, createVNode as z, unref as w, mergeProps as U, createBlock as oe, withCtx as le, createElementVNode as W, toDisplayString as M } from "vue";
+import B from "../molecules/JFormField.vue.js";
+/* empty css                           */
+import "../shadcn/index.js";
+import "@vueuse/core";
+import "reka-ui";
+import "clsx";
+import "tailwind-merge";
+import "lucide-vue-next";
+/* empty css                      */
+/* empty css                            */
+/* empty css                             */
+import re from "../molecules/JCard.vue.js";
+import "@internationalized/date";
+import "../shadcn/badge-variants.js";
+/* empty css                      */
+import "../shadcn/avatar-variants.js";
+import "ag-grid-vue3";
+import "ag-grid-community";
+import "ag-grid-enterprise";
+/* empty css                                                                                                          */
+/* empty css                                                                                                          */
+/* empty css                                                                                                          */
+/* empty css                  */
+import { resolveGlobalStyle as se } from "../../lib/styleTypePreset.js";
+const ae = {
+  key: 1,
+  class: "space-y-6"
+}, ne = {
+  key: 2,
+  class: "space-y-4"
+}, ie = { class: "font-semibold text-lg" }, ce = {
+  key: 0,
+  class: "text-muted-foreground text-sm mb-2"
+}, qe = /* @__PURE__ */ X({
+  __name: "JDynamicForm",
+  props: {
+    schema: {},
+    modelValue: {}
+  },
+  emits: ["update:modelValue", "submit", "change", "error"],
+  setup(u, { expose: Y, emit: j }) {
+    const r = u, b = j, y = ["checkbox", "switch"], s = Z({});
+    _(
+      () => r.modelValue,
+      (e) => {
+        e && Object.assign(s, e);
+      },
+      { immediate: !0, deep: !0 }
+    );
+    function C(e, o) {
+      return e.controlId || e.controlName || e.name || e.label || `field-${o}`;
+    }
+    function x(e) {
+      return e.controlName || e.name || "";
+    }
+    function v(e) {
+      return e.isRequired !== void 0 ? e.isRequired : e.required || !1;
+    }
+    _(
+      () => r.schema,
+      (e) => {
+        const o = [];
+        e.type === "simple" && e.fields ? o.push(...e.fields) : e.type === "sectioned" && e.sections ? e.sections.forEach((t) => {
+          t.fields && o.push(...t.fields);
+        }) : e.type === "wizard" && e.steps && e.steps.forEach((t) => {
+          t.fields && o.push(...t.fields);
+        }), o.forEach((t) => {
+          const l = x(t);
+          if (l && s[l] === void 0)
+            if (y.includes(t.type))
+              s[l] = "N";
+            else if (t.type === "radio")
+              s[l] = t.options?.[0]?.value ?? "";
+            else if (t.type === "select" || t.type === "searchcombo") {
+              const n = t.addAll !== void 0 ? t.addAll : t.allowAll || !1;
+              s[l] = n ? "ALL" : "SELECT";
+            } else
+              s[l] = "";
+        });
+      },
+      { immediate: !0 }
+    ), _(s, (e) => b("update:modelValue", e), { deep: !0 });
+    function P() {
+      b("submit", { ...s }), typeof r.schema.events?.onSubmit == "function" && r.schema.events.onSubmit({ ...s });
+    }
+    function G(e, o) {
+      b("change", { field: e, value: o }), typeof r.schema.events?.onChange == "function" && r.schema.events.onChange(e, o);
+    }
+    function H(e) {
+      b("error", e), typeof r.schema.events?.onError == "function" && r.schema.events.onError(e);
+    }
+    function A(e) {
+      return e.filter((t) => t.isVisible !== !1).sort((t, l) => {
+        if (t.sortOrder !== void 0 && l.sortOrder !== void 0 && t.sortOrder !== l.sortOrder)
+          return t.sortOrder - l.sortOrder;
+        const n = t.controlName || t.name || t.label || "", f = l.controlName || l.name || l.label || "";
+        return n.localeCompare(f);
+      });
+    }
+    const S = ee(() => {
+      const e = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"), o = I(e);
+      let t = "";
+      switch (e) {
+        case "row-1":
+          t = `flex flex-col ${o}`;
+          break;
+        case "row":
+        case "row-2":
+          t = `flex flex-col md:grid md:grid-flow-row md:items-start ${o} md:grid-cols-2 auto-rows-min`;
+          break;
+        case "row-3":
+          t = `flex flex-col md:grid md:grid-flow-row md:items-start ${o} md:grid-cols-2 lg:grid-cols-3 auto-rows-min`;
+          break;
+        case "row-4":
+          t = `flex flex-col md:grid md:grid-flow-row md:items-start ${o} md:grid-cols-2 lg:grid-cols-4 auto-rows-min`;
+          break;
+        case "row-5":
+          t = `flex flex-col md:grid md:grid-flow-row md:items-start ${o} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 auto-rows-min`;
+          break;
+        case "row-6":
+          t = `flex flex-col md:grid md:grid-flow-row md:items-start ${o} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 auto-rows-min`;
+          break;
+        case "row-7":
+          t = `flex flex-col md:grid md:grid-flow-row md:items-start ${o} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-7 auto-rows-min`;
+          break;
+        case "row-8":
+          t = `flex flex-col md:grid md:grid-flow-row md:items-start ${o} md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 auto-rows-min`;
+          break;
+        default:
+          t = `flex flex-col ${o}`;
+      }
+      return t;
+    });
+    function k(e) {
+      return y.includes(e.type) ? "min-w-0 w-auto inline-flex items-center" : "min-w-0 w-full";
+    }
+    function E(e) {
+      switch (e) {
+        case "row":
+        case "row-2":
+          return 2;
+        case "row-3":
+          return 3;
+        case "row-4":
+          return 4;
+        case "row-5":
+          return 5;
+        case "row-6":
+          return 6;
+        case "row-7":
+          return 7;
+        case "row-8":
+          return 8;
+        default:
+          return 1;
+      }
+    }
+    function I(e) {
+      switch (e) {
+        case "row-1":
+          return "gap-6";
+        case "row":
+        case "row-2":
+          return "gap-4";
+        case "row-3":
+          return "gap-4";
+        case "row-4":
+          return "gap-3";
+        case "row-5":
+          return "gap-2";
+        case "row-6":
+          return "gap-2";
+        case "row-7":
+          return "gap-2";
+        case "row-8":
+          return "gap-2";
+        default:
+          return "gap-6";
+      }
+    }
+    function V() {
+      const e = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"), o = E(e);
+      return o >= 6 ? "6rem" : o >= 5 ? "7rem" : "8rem";
+    }
+    function $() {
+      return r.schema.globalStyle?.labelPosition || "horizontal";
+    }
+    function N() {
+      return r.schema.globalStyle?.labelAlign || "left";
+    }
+    function L(e) {
+      const o = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"), t = E(o);
+      return {
+        gridColumn: `span ${Math.min(t, Math.max(1, e.colSpan || 1))}`
+      };
+    }
+    function T(e) {
+      const o = x(e), t = e.isDisabled !== void 0 ? e.isDisabled : e.disabled || !1, l = e.isReadonly !== void 0 ? e.isReadonly : e.readonly || !1, n = y.includes(e.type) ? "inline-flex items-center gap-2 w-auto" : "w-full", f = se(r.schema.globalStyle), K = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"), O = E(K);
+      let m = f.controlSize;
+      O >= 6 || O >= 5 ? m = "sm" : O >= 4 && f.controlSize === "lg" && (m = "md");
+      const d = (a, F) => {
+        if (o && (s[o] = F, G(o, F)), e.events?.[a]) {
+          const Q = e.events[a];
+          console.log(`Event ${a}: Calling handler "${Q}" with value:`, F);
+        }
+      };
+      return y.includes(e.type) ? {
+        modelValue: s[o] === "Y" ? "Y" : "N",
+        disabled: t,
+        styleType: m,
+        class: n,
+        "onUpdate:modelValue": (a) => {
+          o && (s[o] = a), d("onChange", a === "Y");
+        }
+      } : e.type === "radio" ? {
+        modelValue: String(s[o] ?? ""),
+        options: e.options ?? [],
+        multiple: e.multiple,
+        disabled: t,
+        styleType: m,
+        class: n,
+        "onUpdate:modelValue": (a) => {
+          d("onChange", a);
+        }
+      } : e.type === "select" || e.type === "combo" ? {
+        modelValue: String(s[o] ?? ""),
+        options: R(e),
+        multiple: e.multiple,
+        disabled: t,
+        styleType: m,
+        class: n,
+        "onUpdate:modelValue": (a) => {
+          d("onChange", a);
+        }
+      } : e.type === "searchcombo" ? {
+        modelValue: String(s[o] ?? ""),
+        options: R(e),
+        disabled: t,
+        styleType: m,
+        class: n,
+        "onUpdate:modelValue": (a) => {
+          d("onChange", a);
+        }
+      } : e.type === "textarea" ? {
+        modelValue: String(s[o] ?? ""),
+        placeholder: e.placeholder ?? "",
+        disabled: t,
+        readonly: l,
+        styleType: m,
+        class: n,
+        "onUpdate:modelValue": (a) => {
+          d("onChange", a);
+        }
+      } : e.type === "datepicker" ? {
+        modelValue: String(s[o] ?? ""),
+        placeholder: e.placeholder ?? "",
+        disabled: t,
+        readonly: l,
+        styleType: m,
+        class: n,
+        "onUpdate:modelValue": (a) => {
+          d("onChange", a);
+        }
+      } : {
+        modelValue: String(s[o] ?? ""),
+        inputType: e.inputType || (e.dataType === "number" ? "number" : "text"),
+        placeholder: e.placeholder ?? "",
+        disabled: t,
+        readonly: l,
+        styleType: m,
+        class: n,
+        "onUpdate:modelValue": (a) => {
+          d("onChange", a);
+        }
+      };
+    }
+    function R(e) {
+      const o = e.addAll !== void 0 ? e.addAll : e.allowAll || !1;
+      return [{
+        value: o ? "ALL" : "SELECT",
+        label: o ? "전체" : "선택"
+      }, ...e.options || []];
+    }
+    function J() {
+      Object.keys(s).forEach((o) => {
+        delete s[o];
+      });
+      const e = [];
+      r.schema.type === "simple" && r.schema.fields ? e.push(...r.schema.fields) : r.schema.type === "sectioned" && r.schema.sections ? r.schema.sections.forEach((o) => {
+        o.fields && e.push(...o.fields);
+      }) : r.schema.type === "wizard" && r.schema.steps && r.schema.steps.forEach((o) => {
+        o.fields && e.push(...o.fields);
+      }), e.forEach((o) => {
+        const t = x(o);
+        if (t)
+          if (y.includes(o.type))
+            s[t] = "N";
+          else if (o.type === "radio")
+            s[t] = o.options?.[0]?.value ?? "";
+          else if (o.type === "select" || o.type === "searchcombo") {
+            const l = o.addAll !== void 0 ? o.addAll : o.allowAll || !1;
+            s[t] = l ? "ALL" : "SELECT";
+          } else
+            s[t] = "";
+      });
+    }
+    return Y({
+      formState: s,
+      submit: P,
+      reset: J,
+      handleError: H
+    }), (e, o) => (i(), c("form", {
+      onSubmit: te(P, ["prevent"]),
+      class: p(S.value)
+    }, [
+      u.schema.type === "simple" ? (i(!0), c(g, { key: 0 }, h(A(u.schema.fields || []), (t, l) => (i(), c("div", {
+        key: C(t, l),
+        class: p(k(t)),
+        style: q(L(t))
+      }, [
+        z(w(B), U({
+          label: t.label,
+          required: v(t),
+          orientation: $(),
+          labelAlign: N(),
+          labelWidth: V(),
+          type: t.type === "searchcombo" ? "searchCombo" : t.type,
+          "input-type": t.inputType,
+          description: t.description,
+          "inline-label": t.inlineLabel
+        }, { ref_for: !0 }, T(t)), null, 16, ["label", "required", "orientation", "labelAlign", "labelWidth", "type", "input-type", "description", "inline-label"])
+      ], 6))), 128)) : u.schema.type === "sectioned" ? (i(), c("div", ae, [
+        (i(!0), c(g, null, h(u.schema.sections, (t) => (i(), oe(w(re), {
+          key: t.id,
+          title: t.title,
+          collapsible: t.collapsible,
+          "default-collapsed": t.defaultCollapsed
+        }, {
+          default: le(() => [
+            W("div", {
+              class: p(S.value)
+            }, [
+              (i(!0), c(g, null, h(A(t.fields || []), (l, n) => (i(), c("div", {
+                key: C(l, n),
+                class: p(k(l)),
+                style: q(L(l))
+              }, [
+                z(w(B), U({
+                  label: l.label,
+                  required: v(l),
+                  orientation: $(),
+                  labelAlign: N(),
+                  labelWidth: V(),
+                  type: l.type === "searchcombo" ? "searchCombo" : l.type,
+                  "input-type": l.inputType,
+                  description: l.description,
+                  "inline-label": l.inlineLabel
+                }, { ref_for: !0 }, T(l)), null, 16, ["label", "required", "orientation", "labelAlign", "labelWidth", "type", "input-type", "description", "inline-label"])
+              ], 6))), 128))
+            ], 2)
+          ]),
+          _: 2
+        }, 1032, ["title", "collapsible", "default-collapsed"]))), 128))
+      ])) : u.schema.type === "wizard" ? (i(), c("div", ne, [
+        (i(!0), c(g, null, h(u.schema.steps, (t) => (i(), c("div", {
+          key: t.id,
+          class: "p-4 border rounded-xl"
+        }, [
+          W("h3", ie, M(t.title), 1),
+          t.description ? (i(), c("p", ce, M(t.description), 1)) : D("", !0),
+          W("div", {
+            class: p(S.value)
+          }, [
+            (i(!0), c(g, null, h(A(t.fields || []), (l, n) => (i(), c("div", {
+              key: C(l, n),
+              class: p(k(l)),
+              style: q(L(l))
+            }, [
+              z(w(B), U({
+                label: l.label,
+                required: v(l),
+                orientation: $(),
+                labelAlign: N(),
+                labelWidth: V(),
+                type: l.type === "searchcombo" ? "searchCombo" : l.type,
+                "input-type": l.inputType,
+                description: l.description,
+                "inline-label": l.inlineLabel
+              }, { ref_for: !0 }, T(l)), null, 16, ["label", "required", "orientation", "labelAlign", "labelWidth", "type", "input-type", "description", "inline-label"])
+            ], 6))), 128))
+          ], 2)
+        ]))), 128))
+      ])) : D("", !0)
+    ], 34));
+  }
+});
+export {
+  qe as default
+};
+//# sourceMappingURL=JDynamicForm.vue2.js.map

package/components/organisms/JDynamicForm.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JDynamicForm.vue2.js","sources":["../../../../src/components/organisms/JDynamicForm.vue"],"sourcesContent":["<template>\n  <form @submit.prevent=\"handleSubmit\" :class=\"formClasses\">\n    <!-- 🧱 단순형 폼 -->\n    <template v-if=\"schema.type === 'simple'\">\n      <div\n        v-for=\"(field, index) in getOrderedFields(schema.fields || [])\"\n        :key=\"getFieldKey(field, index)\"\n        :class=\"fieldBaseClass(field)\"\n        :style=\"getFieldStyle(field)\"\n      >\n        <JFormField\n          :label=\"field.label\"\n          :required=\"getFieldRequired(field)\"\n          :orientation=\"getLabelPosition()\"\n          :labelAlign=\"getLabelAlign()\"\n          :labelWidth=\"getLabelWidth()\"\n          :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n          :input-type=\"field.inputType\"\n          :description=\"field.description\"\n          :inline-label=\"field.inlineLabel\"\n          v-bind=\"getFieldProps(field)\"\n        />\n      </div>\n    </template>\n\n    <!-- 📦 섹션형 폼 -->\n    <template v-else-if=\"schema.type === 'sectioned'\">\n      <div class=\"space-y-6\">\n        <JCard\n          v-for=\"section in schema.sections\"\n          :key=\"section.id\"\n          :title=\"section.title\"\n          :collapsible=\"section.collapsible\"\n          :default-collapsed=\"section.defaultCollapsed\"\n        >\n          <div :class=\"formClasses\">\n            <div\n              v-for=\"(field, index) in getOrderedFields(section.fields || [])\"\n              :key=\"getFieldKey(field, index)\"\n              :class=\"fieldBaseClass(field)\"\n              :style=\"getFieldStyle(field)\"\n            >\n              <JFormField\n                :label=\"field.label\"\n                :required=\"getFieldRequired(field)\"\n                :orientation=\"getLabelPosition()\"\n                :labelAlign=\"getLabelAlign()\"\n                :labelWidth=\"getLabelWidth()\"\n                :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n                :input-type=\"field.inputType\"\n                :description=\"field.description\"\n                :inline-label=\"field.inlineLabel\"\n                v-bind=\"getFieldProps(field)\"\n              />\n            </div>\n          </div>\n        </JCard>\n      </div>\n    </template>\n\n    <!-- 🪜 스텝형 (Wizard) -->\n    <template v-else-if=\"schema.type === 'wizard'\">\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"step in schema.steps\"\n          :key=\"step.id\"\n          class=\"p-4 border rounded-xl\"\n        >\n          <h3 class=\"font-semibold text-lg\">{{ step.title }}</h3>\n          <p v-if=\"step.description\" class=\"text-muted-foreground text-sm mb-2\">\n            {{ step.description }}\n          </p>\n          <div :class=\"formClasses\">\n            <div\n              v-for=\"(field, index) in getOrderedFields(step.fields || [])\"\n              :key=\"getFieldKey(field, index)\"\n              :class=\"fieldBaseClass(field)\"\n              :style=\"getFieldStyle(field)\"\n            >\n              <JFormField\n                :label=\"field.label\"\n                :required=\"getFieldRequired(field)\"\n                :orientation=\"getLabelPosition()\"\n                :labelAlign=\"getLabelAlign()\"\n                :labelWidth=\"getLabelWidth()\"\n                :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n                :input-type=\"field.inputType\"\n                :description=\"field.description\"\n                :inline-label=\"field.inlineLabel\"\n                v-bind=\"getFieldProps(field)\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n\n  </form>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, watch } from 'vue';\nimport { JFormField, JCard } from '@/components/molecules';\nimport type { FormSchema, DynamicFormField } from '@/types/dynamic-form';\nimport { resolveGlobalStyle } from '@/lib/styleTypePreset';\n\n// props\nconst props = defineProps<{\n  schema: FormSchema;\n  modelValue?: Record<string, any>;\n}>();\n\nconst emit = defineEmits(['update:modelValue', 'submit', 'change', 'error']);\n\nconst BOOLEAN_TYPES: Array<DynamicFormField['type']> = ['checkbox', 'switch'];\n\n// 폼 상태 관리\nconst formState = reactive<Record<string, any>>({});\n\n// 초기값 설정\nwatch(\n  () => props.modelValue,\n  (newValues) => {\n    if (newValues) {\n      Object.assign(formState, newValues);\n    }\n  },\n  { immediate: true, deep: true }\n);\n\n// 필드 키 가져오기 (controlId > controlName > name > label 순서)\nfunction getFieldKey(field: DynamicFormField, index: number): string {\n  return field.controlId || field.controlName || (field as any).name || field.label || `field-${index}`;\n}\n\n// 필드 이름 가져오기 (controlName > name 순서)\nfunction getFieldName(field: DynamicFormField): string {\n  return field.controlName || (field as any).name || '';\n}\n\n// 필드 required 가져오기 (isRequired > required 순서)\nfunction getFieldRequired(field: DynamicFormField): boolean {\n  return field.isRequired !== undefined ? field.isRequired : ((field as any).required || false);\n}\n\n// 필드 초기화\nwatch(\n  () => props.schema,\n  (newSchema) => {\n    const allFields: DynamicFormField[] = [];\n    \n    if (newSchema.type === 'simple' && newSchema.fields) {\n      allFields.push(...newSchema.fields);\n    } else if (newSchema.type === 'sectioned' && newSchema.sections) {\n      newSchema.sections.forEach(section => {\n        if (section.fields) allFields.push(...section.fields);\n      });\n    } else if (newSchema.type === 'wizard' && newSchema.steps) {\n      newSchema.steps.forEach(step => {\n        if (step.fields) allFields.push(...step.fields);\n      });\n    }\n    \n    allFields.forEach((field) => {\n      const fieldName = getFieldName(field);\n      if (fieldName && formState[fieldName] === undefined) {\n        if (BOOLEAN_TYPES.includes(field.type)) {\n          formState[fieldName] = 'N';\n        } else if (field.type === 'radio') {\n          formState[fieldName] = field.options?.[0]?.value ?? '';\n        } else if (field.type === 'select' || field.type === 'searchcombo') {\n          const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n          formState[fieldName] = addAll ? 'ALL' : 'SELECT';\n        } else {\n          formState[fieldName] = '';\n        }\n      }\n    });\n  },\n  { immediate: true }\n);\n\n// 값 변경 감지 → 상위 emit\nwatch(formState, (val) => emit('update:modelValue', val), { deep: true });\n\n// 이벤트 핸들러\nfunction handleSubmit() {\n  emit('submit', { ...formState });\n  if (typeof props.schema.events?.onSubmit === 'function') {\n    props.schema.events.onSubmit({ ...formState });\n  }\n}\n\nfunction handleChange(field: string, value: any) {\n  emit('change', { field, value });\n  if (typeof props.schema.events?.onChange === 'function') {\n    props.schema.events.onChange(field, value);\n  }\n}\n\nfunction handleError(errs: any) {\n  emit('error', errs);\n  if (typeof props.schema.events?.onError === 'function') {\n    props.schema.events.onError(errs);\n  }\n}\n\n// 정렬된 필드 가져오기\nfunction getOrderedFields(fields: DynamicFormField[]): DynamicFormField[] {\n  const visibleFields = fields.filter((field) => field.isVisible !== false);\n  return visibleFields.sort((a, b) => {\n    // sortOrder 기준으로 정렬\n    if (a.sortOrder !== undefined && b.sortOrder !== undefined) {\n      if (a.sortOrder !== b.sortOrder) {\n        return a.sortOrder - b.sortOrder;\n      }\n    }\n    const aName = a.controlName || (a as any).name || a.label || '';\n    const bName = b.controlName || (b as any).name || b.label || '';\n    return aName.localeCompare(bName);\n  });\n}\n\n// 폼 클래스 계산\nconst formClasses = computed(() => {\n  const colCount = props.schema.globalStyle?.colCount || \n    (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n  const gapClass = getGapClass(colCount);\n  \n  // 반응형: 화면 크기에 따라 열 수 자동 조정\n  let classes = '';\n  switch (colCount) {\n    case 'row-1':\n      classes = `flex flex-col ${gapClass}`;\n      break;\n    case 'row':\n    case 'row-2':\n      classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 auto-rows-min`;\n      break;\n    case 'row-3':\n      classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 auto-rows-min`;\n      break;\n    case 'row-4':\n      classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-4 auto-rows-min`;\n      break;\n    case 'row-5':\n      classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 auto-rows-min`;\n      break;\n    case 'row-6':\n      classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 auto-rows-min`;\n      break;\n    case 'row-7':\n      classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-7 auto-rows-min`;\n      break;\n    case 'row-8':\n      classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 auto-rows-min`;\n      break;\n    default:\n      classes = `flex flex-col ${gapClass}`;\n  }\n  \n  return classes;\n});\n\n// 필드 기본 클래스\nfunction fieldBaseClass(field: DynamicFormField): string {\n  return BOOLEAN_TYPES.includes(field.type)\n    ? 'min-w-0 w-auto inline-flex items-center'\n    : 'min-w-0 w-full';\n}\n\n// 최대 열 수 계산\nfunction getMaxCols(colCount?: string): number {\n  switch (colCount) {\n    case 'row':\n    case 'row-2': return 2;\n    case 'row-3': return 3;\n    case 'row-4': return 4;\n    case 'row-5': return 5;\n    case 'row-6': return 6;\n    case 'row-7': return 7;\n    case 'row-8': return 8;\n    default: return 1;\n  }\n}\n\n// 열 수에 따른 gap 계산\nfunction getGapClass(colCount: string): string {\n  switch (colCount) {\n    case 'row-1': return 'gap-6';\n    case 'row':\n    case 'row-2': return 'gap-4';\n    case 'row-3': return 'gap-4';\n    case 'row-4': return 'gap-3';\n    case 'row-5': return 'gap-2';\n    case 'row-6': return 'gap-2';\n    case 'row-7': return 'gap-2';\n    case 'row-8': return 'gap-2';\n    default: return 'gap-6';\n  }\n}\n\n// 열 수에 따른 라벨 너비 계산\nfunction getLabelWidth(): string {\n  const colCount = props.schema.globalStyle?.colCount || \n    (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n  const maxCols = getMaxCols(colCount);\n  if (maxCols >= 6) return '6rem';\n  if (maxCols >= 5) return '7rem';\n  return '8rem';\n}\n\n// 라벨 위치 가져오기\nfunction getLabelPosition(): 'horizontal' | 'vertical' {\n  return props.schema.globalStyle?.labelPosition || 'horizontal';\n}\n\n// 라벨 정렬 가져오기\nfunction getLabelAlign(): 'left' | 'middle' | 'right' {\n  return props.schema.globalStyle?.labelAlign || 'left';\n}\n\n// 필드 스타일 계산\nfunction getFieldStyle(field: DynamicFormField): Record<string, string> {\n  const colCount = props.schema.globalStyle?.colCount || \n    (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n  const maxCols = getMaxCols(colCount);\n  const span = Math.min(maxCols, Math.max(1, field.colSpan || 1));\n  return {\n    gridColumn: `span ${span}`\n  };\n}\n\n// 필드 props 생성\nfunction getFieldProps(field: DynamicFormField) {\n  const fieldName = getFieldName(field);\n  const disabled = field.isDisabled !== undefined ? field.isDisabled : ((field as any).disabled || false);\n  const readonly = field.isReadonly !== undefined ? field.isReadonly : ((field as any).readonly || false);\n  \n  // baseClass 조정\n  const baseClass = BOOLEAN_TYPES.includes(field.type)\n    ? 'inline-flex items-center gap-2 w-auto'\n    : 'w-full';\n  \n  // 전역 스타일 해결\n  const resolvedStyle = resolveGlobalStyle(props.schema.globalStyle);\n  \n  // 열 수에 따라 컨트롤 크기 동적 조정\n  const colCount = props.schema.globalStyle?.colCount || \n    (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n  const maxCols = getMaxCols(colCount);\n  let finalSize = resolvedStyle.controlSize;\n  \n  // 4열 이상일 때 컨트롤 크기를 작게 조정\n  if (maxCols >= 6) {\n    finalSize = 'sm';\n  } else if (maxCols >= 5) {\n    finalSize = 'sm';\n  } else if (maxCols >= 4) {\n    if (resolvedStyle.controlSize === 'lg') {\n      finalSize = 'md';\n    }\n  }\n\n  const createEventHandler = (eventType: string, value: any) => {\n    if (fieldName) {\n      formState[fieldName] = value;\n      handleChange(fieldName, value);\n    }\n    \n    if (field.events?.[eventType as keyof typeof field.events]) {\n      const handlerName = field.events[eventType as keyof typeof field.events];\n      console.log(`Event ${eventType}: Calling handler \"${handlerName}\" with value:`, value);\n    }\n  };\n\n  if (BOOLEAN_TYPES.includes(field.type)) {\n    return {\n      modelValue: formState[fieldName] === 'Y' ? 'Y' : 'N',\n      disabled,\n      styleType: finalSize,\n      class: baseClass,\n      'onUpdate:modelValue': (value: string) => {\n        if (fieldName) {\n          formState[fieldName] = value;\n        }\n        createEventHandler('onChange', value === 'Y');\n      }\n    };\n  }\n\n  if (field.type === 'radio') {\n    return {\n      modelValue: String(formState[fieldName] ?? ''),\n      options: field.options ?? [],\n      multiple: field.multiple,\n      disabled,\n      styleType: finalSize,\n      class: baseClass,\n      'onUpdate:modelValue': (value: string) => {\n        createEventHandler('onChange', value);\n      }\n    };\n  }\n\n  if (field.type === 'select' || field.type === 'combo') {\n    return {\n      modelValue: String(formState[fieldName] ?? ''),\n      options: getSelectOptions(field),\n      multiple: field.multiple,\n      disabled,\n      styleType: finalSize,\n      class: baseClass,\n      'onUpdate:modelValue': (value: string) => {\n        createEventHandler('onChange', value);\n      }\n    };\n  }\n\n  if (field.type === 'searchcombo') {\n    return {\n      modelValue: String(formState[fieldName] ?? ''),\n      options: getSelectOptions(field),\n      disabled,\n      styleType: finalSize,\n      class: baseClass,\n      'onUpdate:modelValue': (value: string) => {\n        createEventHandler('onChange', value);\n      }\n    };\n  }\n\n  if (field.type === 'textarea') {\n    return {\n      modelValue: String(formState[fieldName] ?? ''),\n      placeholder: field.placeholder ?? '',\n      disabled,\n      readonly,\n      styleType: finalSize,\n      class: baseClass,\n      'onUpdate:modelValue': (value: string) => {\n        createEventHandler('onChange', value);\n      }\n    };\n  }\n\n  if (field.type === 'datepicker') {\n    return {\n      modelValue: String(formState[fieldName] ?? ''),\n      placeholder: field.placeholder ?? '',\n      disabled,\n      readonly,\n      styleType: finalSize,\n      class: baseClass,\n      'onUpdate:modelValue': (value: string) => {\n        createEventHandler('onChange', value);\n      }\n    };\n  }\n\n  // 기본 input\n  return {\n    modelValue: String(formState[fieldName] ?? ''),\n    inputType: field.inputType || (field.dataType === 'number' ? 'number' : 'text'),\n    placeholder: field.placeholder ?? '',\n    disabled,\n    readonly,\n    styleType: finalSize,\n    class: baseClass,\n    'onUpdate:modelValue': (value: string | number) => {\n      createEventHandler('onChange', value);\n    }\n  };\n}\n\n// Select 옵션 생성\nfunction getSelectOptions(field: DynamicFormField) {\n  const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n  const defaultOption = {\n    value: addAll ? 'ALL' : 'SELECT',\n    label: addAll ? '전체' : '선택'\n  };\n  return [defaultOption, ...(field.options || [])];\n}\n\n// 폼 리셋\nfunction reset() {\n  Object.keys(formState).forEach(key => {\n    delete formState[key];\n  });\n  \n  // 모든 필드 수집\n  const allFields: DynamicFormField[] = [];\n  \n  if (props.schema.type === 'simple' && props.schema.fields) {\n    allFields.push(...props.schema.fields);\n  } else if (props.schema.type === 'sectioned' && props.schema.sections) {\n    props.schema.sections.forEach(section => {\n      if (section.fields) allFields.push(...section.fields);\n    });\n  } else if (props.schema.type === 'wizard' && props.schema.steps) {\n    props.schema.steps.forEach(step => {\n      if (step.fields) allFields.push(...step.fields);\n    });\n  }\n  \n  // 초기값으로 재설정\n  allFields.forEach((field) => {\n    const fieldName = getFieldName(field);\n    if (fieldName) {\n      if (BOOLEAN_TYPES.includes(field.type)) {\n        formState[fieldName] = 'N';\n      } else if (field.type === 'radio') {\n        formState[fieldName] = field.options?.[0]?.value ?? '';\n      } else if (field.type === 'select' || field.type === 'searchcombo') {\n        const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n        formState[fieldName] = addAll ? 'ALL' : 'SELECT';\n      } else {\n        formState[fieldName] = '';\n      }\n    }\n  });\n}\n\n// 폼 상태 노출\ndefineExpose({\n  formState,\n  submit: handleSubmit,\n  reset,\n  handleError\n});\n</script>\n\n<style scoped>\nform {\n  width: 100%;\n}\n</style>\n"],"names":["props","__props","emit","__emit","BOOLEAN_TYPES","formState","reactive","watch","newValues","getFieldKey","field","index","getFieldName","getFieldRequired","newSchema","allFields","section","step","fieldName","addAll","val","handleSubmit","handleChange","value","handleError","errs","getOrderedFields","fields","a","b","aName","bName","formClasses","computed","colCount","gapClass","getGapClass","classes","fieldBaseClass","getMaxCols","getLabelWidth","maxCols","getLabelPosition","getLabelAlign","getFieldStyle","getFieldProps","disabled","readonly","baseClass","resolvedStyle","resolveGlobalStyle","finalSize","createEventHandler","eventType","handlerName","getSelectOptions","reset","key","__expose","_createElementBlock","_Fragment","_renderList","_normalizeClass","_normalizeStyle","_createVNode","_unref","_mergeProps","_openBlock","_hoisted_1","_createBlock","JCard","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4"],"mappings":"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"}

package/components/organisms/JDynamicTabs.vue.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),C=require("../molecules/JTabs.vue.cjs"),_={key:1,class:"flex items-center justify-center h-full w-full"},N={class:"text-center"},k={class:"text-muted-foreground text-lg"},B=a.defineComponent({__name:"JDynamicTabs",props:{initialTabs:{default:()=>[]},defaultActiveId:{},maxTabs:{default:0},emptyMessage:{default:"탭을 추가해주세요."},className:{},contentClassName:{},styletype:{default:"default"}},emits:["tabChange","tabClose","tabAdd"],setup(d,{expose:v,emit:f}){const s=d,i=f,t=a.ref(Array.isArray(s.initialTabs)?[...s.initialTabs]:[]),r=a.ref(s.defaultActiveId||(Array.isArray(s.initialTabs)&&s.initialTabs.length>0?s.initialTabs[0]?.id:"")||"");a.watch(()=>s.initialTabs,e=>{if(!e){t.value=[];return}Array.isArray(e)&&e.length>0?(t.value=[...e],!r.value&&e[0]&&(r.value=e[0].id)):Array.isArray(e)?t.value=[]:t.value=[]},{immediate:!0});const m=e=>{if(Array.isArray(t.value)||(t.value=[]),t.value.find(n=>n.id===e.id)){u(e.id);return}if(s.maxTabs>0&&t.value.length>=s.maxTabs){console.warn(`최대 ${s.maxTabs}개의 탭만 열 수 있습니다.`);return}t.value.push({...e,closable:e.closable!==!1}),u(e.id),i("tabAdd",e)},o=e=>{if(!Array.isArray(t.value))return;const l=t.value.findIndex(n=>n.id===e);if(l!==-1){if(t.value.splice(l,1),r.value===e)if(t.value.length>0){const n=Math.min(l,t.value.length-1);r.value=t.value[n]?.id||""}else r.value="";i("tabClose",e)}},u=e=>{if(!Array.isArray(t.value))return;t.value.find(n=>n.id===e)&&(r.value=e)},b=e=>{if(Array.isArray(t.value))return t.value.find(l=>l.id===e)},y=()=>{if(!Array.isArray(t.value))return;t.value.filter(l=>l.closable).forEach(l=>o(l.id))},p=e=>{r.value=e,i("tabChange",e)},A=e=>{o(e)};v({addTab:m,closeTab:o,activateTab:u,findTab:b,closeAllTabs:y});const c=a.computed(()=>Array.isArray(t.value)?t.value:[]),h=a.computed(()=>c.value.length>0),T=a.computed(()=>{const e=["w-full","h-full"];return s.className&&e.push(s.className),e.join(" ")}),g=a.computed(()=>{const e=[];return s.contentClassName&&e.push(s.contentClassName),e.join(" ")});return(e,l)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(T.value)},[h.value?(a.openBlock(),a.createBlock(C.default,{key:0,tabs:c.value,"active-tab-id":r.value,styletype:s.styletype,class:a.normalizeClass(g.value),onTabChange:p,onTabClose:A},a.createSlots({_:2},[a.renderList(c.value,n=>({name:`content-${n.id}`,fn:a.withCtx(x=>[a.renderSlot(e.$slots,`content-${n.id}`,a.normalizeProps(a.guardReactiveProps(x)))])}))]),1032,["tabs","active-tab-id","styletype","class"])):(a.openBlock(),a.createElementBlock("div",_,[a.createElementVNode("div",N,[a.createElementVNode("p",k,a.toDisplayString(d.emptyMessage),1),l[0]||(l[0]=a.createElementVNode("p",{class:"text-muted-foreground/60 text-sm mt-2"}," 메뉴를 클릭하여 탭을 추가하세요. ",-1))])]))],2))}});exports.default=B;
+//# sourceMappingURL=JDynamicTabs.vue.cjs.map

package/components/organisms/JDynamicTabs.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"JDynamicTabs.vue.cjs","sources":["../../../../src/components/organisms/JDynamicTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from 'vue'\r\nimport JTabs from '@/components/molecules/JTabs.vue'\r\nimport type { \r\n  JDynamicTabsProps, \r\n  JDynamicTabsEmits, \r\n  JDynamicTabsMethods,\r\n  DynamicTab \r\n} from '@/types/dynamic-tabs.types'\r\n\r\n/**\r\n * JDynamicTabs - 동적 탭 컴포넌트 (organisms)\r\n * Dynamic Tabs Component\r\n * \r\n * @description\r\n * 사이드 메뉴 클릭으로 탭을 동적으로 추가/제거할 수 있는 탭 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 탭 동적 추가/제거\r\n * - 중복 탭 방지 (이미 있으면 활성화)\r\n * - 닫기 버튼으로 탭 제거\r\n * - 활성 탭 자동 재설정\r\n * - 최대 탭 개수 제한\r\n * \r\n * @example\r\n * const tabsRef = ref()\r\n * \r\n * const handleMenuClick = (menuItem) => {\r\n *   tabsRef.value?.addTab({\r\n *     id: menuItem.id,\r\n *     label: menuItem.label,\r\n *     component: menuItem.component,\r\n *     closable: true\r\n *   })\r\n * }\r\n */\r\n\r\nconst props = withDefaults(defineProps<JDynamicTabsProps>(), {\r\n  initialTabs: () => [],\r\n  maxTabs: 0, // 0 = unlimited\r\n  emptyMessage: '탭을 추가해주세요.',\r\n  styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JDynamicTabsEmits>()\r\n\r\n/**\r\n * 탭 목록 (내부 상태)\r\n * Tabs list (internal state)\r\n */\r\nconst tabs = ref<DynamicTab[]>(Array.isArray(props.initialTabs) ? [...props.initialTabs] : [])\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst activeTabId = ref<string>(\r\n  props.defaultActiveId || (Array.isArray(props.initialTabs) && props.initialTabs.length > 0 ? props.initialTabs[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * initialTabs가 변경되면 내부 상태 업데이트\r\n * Update internal state when initialTabs changes\r\n */\r\nwatch(() => props.initialTabs, (newTabs) => {\r\n  if (!newTabs) {\r\n    tabs.value = []\r\n    return\r\n  }\r\n  \r\n  if (Array.isArray(newTabs) && newTabs.length > 0) {\r\n    tabs.value = [...newTabs]\r\n    if (!activeTabId.value && newTabs[0]) {\r\n      activeTabId.value = newTabs[0].id\r\n    }\r\n  } else if (Array.isArray(newTabs)) {\r\n    // 빈 배열인 경우\r\n    tabs.value = []\r\n  } else {\r\n    // 배열이 아닌 경우\r\n    tabs.value = []\r\n  }\r\n}, { immediate: true })\r\n\r\n/**\r\n * 탭 추가\r\n * Add tab (if exists, activate it; otherwise, add to array and activate)\r\n * \r\n * @param tab - 추가할 탭 정보\r\n */\r\nconst addTab = (tab: DynamicTab) => {\r\n  // tabs.value가 배열이 아니면 초기화\r\n  if (!Array.isArray(tabs.value)) {\r\n    tabs.value = []\r\n  }\r\n  \r\n  // 이미 존재하는 탭인지 확인\r\n  const existingTab = tabs.value.find(t => t.id === tab.id)\r\n  \r\n  if (existingTab) {\r\n    // 이미 있으면 해당 탭 활성화\r\n    activateTab(tab.id)\r\n    return\r\n  }\r\n  \r\n  // 최대 탭 개수 체크\r\n  if (props.maxTabs > 0 && tabs.value.length >= props.maxTabs) {\r\n    console.warn(`최대 ${props.maxTabs}개의 탭만 열 수 있습니다.`)\r\n    return\r\n  }\r\n  \r\n  // 새 탭 추가\r\n  tabs.value.push({\r\n    ...tab,\r\n    closable: tab.closable !== false, // 기본값 true\r\n  })\r\n  \r\n  // 새로 추가된 탭 활성화\r\n  activateTab(tab.id)\r\n  \r\n  // 이벤트 발생\r\n  emit('tabAdd', tab)\r\n}\r\n\r\n/**\r\n * 탭 닫기\r\n * Close tab (remove from array and reset active tab)\r\n * \r\n * @param id - 닫을 탭 ID\r\n */\r\nconst closeTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  \r\n  const tabIndex = tabs.value.findIndex(t => t.id === id)\r\n  \r\n  if (tabIndex === -1) return\r\n  \r\n  // 탭 제거\r\n  tabs.value.splice(tabIndex, 1)\r\n  \r\n  // 활성 탭 재설정\r\n  if (activeTabId.value === id) {\r\n    if (tabs.value.length > 0) {\r\n      // 이전 탭이 있으면 이전 탭 활성화, 없으면 다음 탭 활성화\r\n      const newIndex = Math.min(tabIndex, tabs.value.length - 1)\r\n      activeTabId.value = tabs.value[newIndex]?.id || ''\r\n    } else {\r\n      activeTabId.value = ''\r\n    }\r\n  }\r\n  \r\n  // 이벤트 발생\r\n  emit('tabClose', id)\r\n}\r\n\r\n/**\r\n * 탭 활성화\r\n * Activate tab\r\n * \r\n * @param id - 활성화할 탭 ID\r\n */\r\nconst activateTab = (id: string) => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const tab = tabs.value.find(t => t.id === id)\r\n  if (tab) {\r\n    activeTabId.value = id\r\n  }\r\n}\r\n\r\n/**\r\n * 특정 탭 찾기\r\n * Find specific tab\r\n * \r\n * @param id - 찾을 탭 ID\r\n */\r\nconst findTab = (id: string): DynamicTab | undefined => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return undefined\r\n  }\r\n  return tabs.value.find(t => t.id === id)\r\n}\r\n\r\n/**\r\n * 모든 탭 닫기 (closable이 true인 탭만)\r\n * Close all tabs (only closable tabs)\r\n */\r\nconst closeAllTabs = () => {\r\n  if (!Array.isArray(tabs.value)) {\r\n    return\r\n  }\r\n  const closableTabs = tabs.value.filter(t => t.closable)\r\n  closableTabs.forEach(tab => closeTab(tab.id))\r\n}\r\n\r\n/**\r\n * 탭 변경 핸들러\r\n * Tab change handler\r\n */\r\nconst handleTabChange = (id: string) => {\r\n  activeTabId.value = id\r\n  emit('tabChange', id)\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleTabClose = (id: string) => {\r\n  closeTab(id)\r\n}\r\n\r\n/**\r\n * 외부에서 호출 가능한 메서드 노출\r\n * Expose methods for external use\r\n */\r\ndefineExpose<JDynamicTabsMethods>({\r\n  addTab,\r\n  closeTab,\r\n  activateTab,\r\n  findTab,\r\n  closeAllTabs,\r\n})\r\n\r\n/**\r\n * 안전한 tabs 배열\r\n * Safe tabs array\r\n */\r\nconst safeTabs = computed(() => {\r\n  return Array.isArray(tabs.value) ? tabs.value : []\r\n})\r\n\r\n/**\r\n * 탭이 있는지 여부\r\n * Whether there are tabs\r\n */\r\nconst hasTabs = computed(() => safeTabs.value.length > 0)\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n  const classes = ['w-full', 'h-full']\r\n  \r\n  if (props.className) {\r\n    classes.push(props.className)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n\r\n/**\r\n * 콘텐츠 클래스\r\n * Content classes\r\n */\r\nconst contentClasses = computed(() => {\r\n  const classes = []\r\n  \r\n  if (props.contentClassName) {\r\n    classes.push(props.contentClassName)\r\n  }\r\n  \r\n  return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"rootClasses\">\r\n    <!-- 탭이 있을 경우 / When there are tabs -->\r\n    <JTabs\r\n      v-if=\"hasTabs\"\r\n      :tabs=\"safeTabs\"\r\n      :active-tab-id=\"activeTabId\"\r\n      :styletype=\"props.styletype\"\r\n      :class=\"contentClasses\"\r\n      @tab-change=\"handleTabChange\"\r\n      @tab-close=\"handleTabClose\"\r\n    >\r\n      <!-- 각 탭 콘텐츠 슬롯 전달 / Forward slots for each tab content -->\r\n      <template\r\n        v-for=\"tab in safeTabs\"\r\n        :key=\"tab.id\"\r\n        #[`content-${tab.id}`]=\"slotProps\"\r\n      >\r\n        <slot :name=\"`content-${tab.id}`\" v-bind=\"slotProps\" />\r\n      </template>\r\n    </JTabs>\r\n    \r\n    <!-- 탭이 없을 경우 / When there are no tabs -->\r\n    <div\r\n      v-else\r\n      class=\"flex items-center justify-center h-full w-full\"\r\n    >\r\n      <div class=\"text-center\">\r\n        <p class=\"text-muted-foreground text-lg\">{{ emptyMessage }}</p>\r\n        <p class=\"text-muted-foreground/60 text-sm mt-2\">\r\n          메뉴를 클릭하여 탭을 추가하세요.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","tabs","ref","activeTabId","watch","newTabs","addTab","tab","t","activateTab","closeTab","id","tabIndex","newIndex","findTab","closeAllTabs","handleTabChange","handleTabClose","__expose","safeTabs","computed","hasTabs","rootClasses","classes","contentClasses","_createElementBlock","_createBlock","JTabs","_renderList","_withCtx","slotProps","_renderSlot","_ctx","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_cache"],"mappings":"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"}

package/components/organisms/JDynamicTabs.vue.js

@@ -0,0 +1,116 @@
+import { defineComponent as $, ref as m, watch as j, computed as n, createElementBlock as b, openBlock as d, normalizeClass as y, createBlock as B, createSlots as E, renderList as M, withCtx as S, renderSlot as z, normalizeProps as D, guardReactiveProps as J, createElementVNode as f, toDisplayString as P } from "vue";
+import L from "../molecules/JTabs.vue.js";
+const R = {
+  key: 1,
+  class: "flex items-center justify-center h-full w-full"
+}, V = { class: "text-center" }, q = { class: "text-muted-foreground text-lg" }, G = /* @__PURE__ */ $({
+  __name: "JDynamicTabs",
+  props: {
+    initialTabs: { default: () => [] },
+    defaultActiveId: {},
+    maxTabs: { default: 0 },
+    emptyMessage: { default: "탭을 추가해주세요." },
+    className: {},
+    contentClassName: {},
+    styletype: { default: "default" }
+  },
+  emits: ["tabChange", "tabClose", "tabAdd"],
+  setup(v, { expose: p, emit: A }) {
+    const t = v, r = A, a = m(Array.isArray(t.initialTabs) ? [...t.initialTabs] : []), i = m(
+      t.defaultActiveId || (Array.isArray(t.initialTabs) && t.initialTabs.length > 0 ? t.initialTabs[0]?.id : "") || ""
+    );
+    j(() => t.initialTabs, (e) => {
+      if (!e) {
+        a.value = [];
+        return;
+      }
+      Array.isArray(e) && e.length > 0 ? (a.value = [...e], !i.value && e[0] && (i.value = e[0].id)) : Array.isArray(e) ? a.value = [] : a.value = [];
+    }, { immediate: !0 });
+    const h = (e) => {
+      if (Array.isArray(a.value) || (a.value = []), a.value.find((l) => l.id === e.id)) {
+        u(e.id);
+        return;
+      }
+      if (t.maxTabs > 0 && a.value.length >= t.maxTabs) {
+        console.warn(`최대 ${t.maxTabs}개의 탭만 열 수 있습니다.`);
+        return;
+      }
+      a.value.push({
+        ...e,
+        closable: e.closable !== !1
+        // 기본값 true
+      }), u(e.id), r("tabAdd", e);
+    }, o = (e) => {
+      if (!Array.isArray(a.value))
+        return;
+      const s = a.value.findIndex((l) => l.id === e);
+      if (s !== -1) {
+        if (a.value.splice(s, 1), i.value === e)
+          if (a.value.length > 0) {
+            const l = Math.min(s, a.value.length - 1);
+            i.value = a.value[l]?.id || "";
+          } else
+            i.value = "";
+        r("tabClose", e);
+      }
+    }, u = (e) => {
+      if (!Array.isArray(a.value))
+        return;
+      a.value.find((l) => l.id === e) && (i.value = e);
+    }, T = (e) => {
+      if (Array.isArray(a.value))
+        return a.value.find((s) => s.id === e);
+    }, g = () => {
+      if (!Array.isArray(a.value))
+        return;
+      a.value.filter((s) => s.closable).forEach((s) => o(s.id));
+    }, x = (e) => {
+      i.value = e, r("tabChange", e);
+    }, C = (e) => {
+      o(e);
+    };
+    p({
+      addTab: h,
+      closeTab: o,
+      activateTab: u,
+      findTab: T,
+      closeAllTabs: g
+    });
+    const c = n(() => Array.isArray(a.value) ? a.value : []), _ = n(() => c.value.length > 0), N = n(() => {
+      const e = ["w-full", "h-full"];
+      return t.className && e.push(t.className), e.join(" ");
+    }), I = n(() => {
+      const e = [];
+      return t.contentClassName && e.push(t.contentClassName), e.join(" ");
+    });
+    return (e, s) => (d(), b("div", {
+      class: y(N.value)
+    }, [
+      _.value ? (d(), B(L, {
+        key: 0,
+        tabs: c.value,
+        "active-tab-id": i.value,
+        styletype: t.styletype,
+        class: y(I.value),
+        onTabChange: x,
+        onTabClose: C
+      }, E({ _: 2 }, [
+        M(c.value, (l) => ({
+          name: `content-${l.id}`,
+          fn: S((k) => [
+            z(e.$slots, `content-${l.id}`, D(J(k)))
+          ])
+        }))
+      ]), 1032, ["tabs", "active-tab-id", "styletype", "class"])) : (d(), b("div", R, [
+        f("div", V, [
+          f("p", q, P(v.emptyMessage), 1),
+          s[0] || (s[0] = f("p", { class: "text-muted-foreground/60 text-sm mt-2" }, " 메뉴를 클릭하여 탭을 추가하세요. ", -1))
+        ])
+      ]))
+    ], 2));
+  }
+});
+export {
+  G as default
+};
+//# sourceMappingURL=JDynamicTabs.vue.js.map