@g1cloud/bluesea 5.0.0-alpha.3 → 5.0.0-alpha.5

package/css/component.scss

@@ -32,6 +32,7 @@
 
   input {
     border: 0;
+    border-radius: 3px;
     outline: 0;
     align-self: stretch;
     flex-grow: 1;

package/css/variable.scss

@@ -16,29 +16,35 @@ textarea {
   font-size: var(--font-size-input);
 }
 
-$color-text: #555;
-$color-text-light: #B0B1BA;
+$color-text: #555 !default;
+$color-text-light: #B0B1BA !default;
 
-$color-gray: #8993A4;
-$color-gray-border: #BCC6D3;
+$color-gray: #8993A4 !default;
+$color-gray-border: #BCC6D3 !default;
 
-$color-blue: #2A52BE;
-$color-blue-border: #C1CBE4;
-$color-blue-bg: #E8EEFC;
+$color-blue: #5672EF !default;
+$color-blue-border: #C1CBE4 !default;
+$color-blue-bg: #DDEEFF !default;
 
-$color-darkblue: #00234D;
+$color-darkblue: #00234D !default;
 
-$color-red: #E72F34;
-$color-red-border: #FA9A9E;
-$color-red-bg: #FFE8E8;
+$color-red: #E72F34 !default;
+$color-red-border: #FA9A9E !default;
+$color-red-bg: #FFE8E8 !default;
 
-$color-green: #4FA348;
-$color-green-border: #7ECE78;
-$color-green-bg: #E9FEE7;
+$color-orange: #F99341 !default;
+$color-orange-border: #F99341 !default;
+$color-orange-bg: #F99341 !default;
 
-$color-icon-light: #D5D5D5;
-$color-border-light: #DBE0EF;
-$color-hover: #E8EEFC;
+$color-green: #4FA348 !default;
+$color-green-border: #7ECE78 !default;
+$color-green-bg: #E9FEE7 !default;
+
+$color-icon-light: #D5D5D5 !default;
+$color-border: #E5E5E5 !default;
+$color-border-light: #DBE0EF !default;
+$color-border-dark: #444 !default;
+$color-hover: #E8EEFC !default;
 
 $border-input: 0.8px solid $color-border-light;
 

package/dist/bluesea.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, openBlock, createElementBlock, toDisplayString, ref, watch, normalizeClass, normalizeStyle, createElementVNode, withDirectives, mergeProps, isRef, toHandlers, vModelText, unref, Fragment, renderList, createCommentVNode, computed, createVNode, useSlots, renderSlot, createBlock, Transition, withCtx, onMounted, onBeforeUnmount, withModifiers, withKeys, createTextVNode, reactive, nextTick, vShow, inject, resolveComponent, markRaw, provide, resolveDynamicComponent, shallowReactive } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, withDirectives, createElementVNode, unref, ref, watch, normalizeStyle, mergeProps, isRef, toHandlers, vModelDynamic, Fragment, renderList, vModelText, computed, createVNode, useSlots, renderSlot, createBlock, Transition, withCtx, onMounted, onBeforeUnmount, withModifiers, withKeys, createTextVNode, reactive, nextTick, vShow, inject, resolveComponent, markRaw, provide, resolveDynamicComponent, shallowReactive } from "vue";
 import dayjs from "dayjs";
 import { useRouter, useRoute } from "vue-router";
 class BlueseaConfig {
@@ -25,18 +25,136 @@ const blueseaConfig = new BlueseaConfig();
 const configureBluesea = (options) => {
   blueseaConfig.configure(options);
 };
-const _hoisted_1$F = { class: "bs-button" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+class I18NTexts {
+  constructor() {
+    __publicField(this, "localeTexts", {});
+    __publicField(this, "defaultLocale");
+  }
+  setDefaultLocale(locale) {
+    this.defaultLocale = locale;
+  }
+  addTexts(locale, textList) {
+    const text = this.ensureAddLocale(locale);
+    textList.forEach((t) => text[t.key] = t);
+  }
+  text(locale, key, args) {
+    var _a, _b, _c;
+    let text = (_a = this.localeTexts[locale]) == null ? void 0 : _a[key];
+    let parentLocale = locale;
+    while (parentLocale && !text) {
+      parentLocale = parentLocale.substring(0, parentLocale.lastIndexOf("-"));
+      text = (_b = this.localeTexts[parentLocale]) == null ? void 0 : _b[key];
+    }
+    const defLocale = this.ensureGetDefaultLocale();
+    if (!text && defLocale && defLocale !== locale) {
+      text = (_c = this.localeTexts[defLocale]) == null ? void 0 : _c[key];
+    }
+    const resolved = text ? this.resolveText(text, args) : key;
+    const html = text ? !!text.html : false;
+    return { key, text: resolved, html };
+  }
+  // {0} {1} 등의 변수를 args 로 대치한다.
+  resolveText(text, args) {
+    let result = text.text;
+    const re = /\{\s*(\d+)\s*}/g;
+    const slots = [];
+    let exec;
+    while (exec = re.exec(result)) {
+      slots.push(exec);
+    }
+    slots.reverse();
+    for (const slot of slots) {
+      if (result.charAt(slot.index - 1) === "\\") {
+        result = result.substring(0, slot.index - 1) + result.substring(slot.index);
+      } else {
+        const index = Number(slot[1]);
+        if ((args == null ? void 0 : args[index]) !== void 0) {
+          result = result.substring(0, slot.index) + args[index] + result.substring(slot.index + slot[0].length);
+        }
+      }
+    }
+    return result;
+  }
+  ensureAddLocale(locale) {
+    return this.localeTexts[locale] = this.localeTexts[locale] || {};
+  }
+  ensureGetDefaultLocale() {
+    if (!this.defaultLocale) {
+      this.defaultLocale = blueseaConfig.defaultLocale;
+    }
+    return this.defaultLocale;
+  }
+}
+const getCurrentLocale = () => {
+  return document.documentElement.lang || navigator.language;
+};
+const i18n = new I18NTexts();
+const parseBinding = (binding) => {
+  const type = binding.modifiers.html ? "HTML" : "TEXT";
+  if (typeof binding.value === "string") {
+    return { key: binding.value, type, multiLang: false };
+  } else if (Array.isArray(binding.value)) {
+    const key = String(binding.value[0]);
+    const args = binding.value.toSpliced(0, 1);
+    return { key, args, type, multiLang: true };
+  } else if (typeof binding.value === "object") {
+    const key = binding.value.key || "";
+    const args = Array.isArray(binding.value.args) ? binding.value.args : void 0;
+    return { key, args, type, multiLang: true };
+  } else {
+    return { multiLang: false };
+  }
+};
+const vT = {
+  mounted: (el, binding) => {
+    const { multiLang, key, args, type } = parseBinding(binding);
+    if (key) {
+      if (multiLang) {
+        const locale = getCurrentLocale();
+        const text = i18n.text(locale, key, args);
+        el[type === "HTML" ? "innerHTML" : "innerText"] = text.text;
+        el.setAttribute("data-bs-text-key", key);
+      } else {
+        el[type === "HTML" ? "innerHTML" : "innerText"] = key;
+      }
+    }
+  }
+};
+const _hoisted_1$G = ["disabled"];
+const _hoisted_2$v = {
+  key: 0,
+  class: "font-icon"
+};
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "BSButton",
   props: {
-    caption: {}
+    caption: {},
+    buttonColor: { default: "default" },
+    leftIcon: {},
+    disabled: { type: Boolean, default: false }
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", _hoisted_1$F, toDisplayString(_ctx.caption), 1);
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass([[_ctx.buttonColor], "bs-button inline-flex items-center justify-center"]),
+        disabled: _ctx.disabled
+      }, [
+        _ctx.leftIcon ? (openBlock(), createElementBlock("span", _hoisted_2$v, toDisplayString(_ctx.leftIcon), 1)) : createCommentVNode("", true),
+        withDirectives(createElementVNode("span", null, null, 512), [
+          [unref(vT), _ctx.caption]
+        ])
+      ], 10, _hoisted_1$G);
     };
   }
 });
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const BSButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-6d6c76d8"]]);
 const fieldValidator = (option) => {
   const value = ref(option.initialValue);
   const valid = ref(false);
@@ -111,11 +229,11 @@ const componentUtil = {
     }
   }
 };
-const _hoisted_1$E = { class: "input-area" };
-const _hoisted_2$t = ["id", "autocomplete", "disabled", "maxlength", "name", "placeholder", "tabindex"];
-const _hoisted_3$i = { key: 0 };
+const _hoisted_1$F = { class: "input-area" };
+const _hoisted_2$u = ["id", "autocomplete", "disabled", "maxlength", "name", "placeholder", "tabindex", "type"];
+const _hoisted_3$j = { key: 0 };
 const _hoisted_4$c = ["textContent"];
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "BSTextInput",
   props: {
     id: {},
@@ -127,7 +245,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     required: { type: Boolean },
     width: { default: "200px" },
     autocomplete: {},
-    tabindex: { default: 0 }
+    tabindex: { default: 0 },
+    inputType: { default: "text" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -165,7 +284,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         class: normalizeClass([{ required: _ctx.required }, "bs-text-input"]),
         style: normalizeStyle({ width: _ctx.width })
       }, [
-        createElementVNode("div", _hoisted_1$E, [
+        createElementVNode("div", _hoisted_1$F, [
           withDirectives(createElementVNode("input", mergeProps({
             id: _ctx.id,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
@@ -175,12 +294,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             name: _ctx.name,
             placeholder: _ctx.placeholder,
             tabindex: _ctx.tabindex,
-            type: "text"
-          }, toHandlers(handlers, true)), null, 16, _hoisted_2$t), [
-            [vModelText, unref(value)]
+            type: _ctx.inputType
+          }, toHandlers(handlers, true)), null, 16, _hoisted_2$u), [
+            [vModelDynamic, unref(value)]
           ])
         ]),
-        unref(errors).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$i, [
+        unref(errors).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$j, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(errors), (error) => {
             return openBlock(), createElementBlock("div", {
               key: error.code,
@@ -193,10 +312,10 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$D = { class: "input-area" };
-const _hoisted_2$s = ["id", "autocomplete", "disabled", "maxlength", "name", "placeholder", "tabindex"];
-const _hoisted_3$h = /* @__PURE__ */ createElementVNode("div", { class: "message-area" }, null, -1);
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$E = { class: "input-area" };
+const _hoisted_2$t = ["id", "autocomplete", "disabled", "maxlength", "name", "placeholder", "tabindex"];
+const _hoisted_3$i = /* @__PURE__ */ createElementVNode("div", { class: "message-area" }, null, -1);
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "BSNumberInput",
   props: {
     id: {},
@@ -223,7 +342,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         style: normalizeStyle({ width: _ctx.width }),
         class: "bs-number-input"
       }, [
-        createElementVNode("div", _hoisted_1$D, [
+        createElementVNode("div", _hoisted_1$E, [
           withDirectives(createElementVNode("input", mergeProps({
             id: _ctx.id,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
@@ -235,10 +354,64 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             tabindex: _ctx.tabindex,
             pattern: "\\d*",
             type: "text"
-          }, toHandlers(handlers, true)), null, 16, _hoisted_2$s), [
+          }, toHandlers(handlers, true)), null, 16, _hoisted_2$t), [
             [vModelText, value.value]
           ])
         ]),
+        _hoisted_3$i
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$D = { class: "input-area" };
+const _hoisted_2$s = ["id", "name", "value"];
+const _hoisted_3$h = /* @__PURE__ */ createElementVNode("div", { class: "message-area" }, null, -1);
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
+  __name: "BSPriceInput",
+  props: {
+    id: {},
+    name: {},
+    modelValue: {},
+    prefix: { type: Boolean },
+    maxlength: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    width: { default: "200px" },
+    autocomplete: {},
+    tabindex: { default: 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const locale = window.navigator.language;
+    console.log("locale ", locale);
+    const moneyRef = ref(props.modelValue);
+    const formattedValue = computed(() => moneyRef.value.value ? Number(moneyRef.value.value).toLocaleString(locale) : "");
+    const emitValue = (event) => {
+      const inputValue = event.target.value;
+      moneyRef.value.displayValue = Number(inputValue).toLocaleString(locale, {
+        style: "currency",
+        currency: moneyRef.value.currenyCode
+      });
+      moneyRef.value.value = Number(inputValue);
+      emit("update:modelValue", moneyRef.value);
+    };
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ width: _ctx.width }),
+        class: "bs-number-input"
+      }, [
+        createElementVNode("div", _hoisted_1$D, [
+          createElementVNode("input", {
+            id: _ctx.id,
+            name: _ctx.name,
+            value: formattedValue.value,
+            pattern: "\\d*",
+            type: "text",
+            onChange: emitValue
+          }, null, 40, _hoisted_2$s)
+        ]),
         _hoisted_3$h
       ], 4);
     };
@@ -578,13 +751,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
 const _sfc_main$A = {};
 const _hoisted_1$w = { class: "bs-popup" };
 function _sfc_render(_ctx, _cache) {
@@ -1134,9 +1300,32 @@ const formatUtil = {
    * @return
    */
   formatNumber(value) {
+    const regexp = /\B(?=(\d{3})+(?!\d))/g;
+    if (value || typeof value === "number") {
+      const splitValue = value.toString().split(".");
+      return splitValue[0].replace(regexp, ",").concat(".", splitValue[1]);
+    }
+    return null;
+  },
+  formatNumberByCode(value, locale) {
+    if (typeof value === "undefined") {
+      return null;
+    }
     if (value || typeof value === "number") {
-      const regexp = /\B(?=(\d{3})+(?!\d))/g;
-      return String(value).replace(regexp, ",");
+      return value.toLocaleString(locale);
+    }
+    return null;
+  },
+  /**
+   * 통화단위와 표시위치를 받아 출력한다
+   * @param value 값
+   * @param withUnit 통화단위
+   * @param prefix true 이면 withUnit을 앞에 붙이고, false 이면 뒤에 붙인다.
+   */
+  formatPrice(value, withUnit, prefix = false) {
+    if (value || typeof value === "number") {
+      const formattedValue = this.formatNumber(value);
+      return prefix ? `${withUnit}${formattedValue}` : `${formattedValue}${withUnit}`;
     }
     return null;
   },
@@ -1933,7 +2122,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           "date-filter": _ctx.config.dateFilter
         }, null, 8, ["modelValue", "date-filter"])) : createCommentVNode("", true),
         createElementVNode("div", null, [
-          createVNode(_sfc_main$J, {
+          createVNode(BSButton, {
             caption: "Search",
             onClick: emitSearch
           })
@@ -2373,7 +2562,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.locales, (locale) => {
           return openBlock(), createElementBlock(Fragment, { key: locale }, [
             _ctx.expandLocale || locale === unref(blueseaConfig).defaultLocale ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
-              createVNode(_sfc_main$I, {
+              createVNode(_sfc_main$J, {
                 id: _ctx.id ? `${_ctx.id}_${locale}` : void 0,
                 autocomplete: _ctx.autocomplete,
                 disabled: _ctx.disabled,
@@ -2624,101 +2813,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-class I18NTexts {
-  constructor() {
-    __publicField(this, "localeTexts", {});
-    __publicField(this, "defaultLocale");
-  }
-  setDefaultLocale(locale) {
-    this.defaultLocale = locale;
-  }
-  addTexts(locale, textList) {
-    const text = this.ensureAddLocale(locale);
-    textList.forEach((t) => text[t.key] = t);
-  }
-  text(locale, key, args) {
-    var _a, _b, _c;
-    let text = (_a = this.localeTexts[locale]) == null ? void 0 : _a[key];
-    let parentLocale = locale;
-    while (parentLocale && !text) {
-      parentLocale = parentLocale.substring(0, parentLocale.lastIndexOf("-"));
-      text = (_b = this.localeTexts[parentLocale]) == null ? void 0 : _b[key];
-    }
-    const defLocale = this.ensureGetDefaultLocale();
-    if (!text && defLocale && defLocale !== locale) {
-      text = (_c = this.localeTexts[defLocale]) == null ? void 0 : _c[key];
-    }
-    const resolved = text ? this.resolveText(text, args) : key;
-    const html = text ? !!text.html : false;
-    return { key, text: resolved, html };
-  }
-  // {0} {1} 등의 변수를 args 로 대치한다.
-  resolveText(text, args) {
-    let result = text.text;
-    const re = /\{\s*(\d+)\s*}/g;
-    const slots = [];
-    let exec;
-    while (exec = re.exec(result)) {
-      slots.push(exec);
-    }
-    slots.reverse();
-    for (const slot of slots) {
-      if (result.charAt(slot.index - 1) === "\\") {
-        result = result.substring(0, slot.index - 1) + result.substring(slot.index);
-      } else {
-        const index = Number(slot[1]);
-        if ((args == null ? void 0 : args[index]) !== void 0) {
-          result = result.substring(0, slot.index) + args[index] + result.substring(slot.index + slot[0].length);
-        }
-      }
-    }
-    return result;
-  }
-  ensureAddLocale(locale) {
-    return this.localeTexts[locale] = this.localeTexts[locale] || {};
-  }
-  ensureGetDefaultLocale() {
-    if (!this.defaultLocale) {
-      this.defaultLocale = blueseaConfig.defaultLocale;
-    }
-    return this.defaultLocale;
-  }
-}
-const getCurrentLocale = () => {
-  return document.documentElement.lang || navigator.language;
-};
-const i18n = new I18NTexts();
-const parseBinding = (binding) => {
-  const type = binding.modifiers.html ? "HTML" : "TEXT";
-  if (typeof binding.value === "string") {
-    return { key: binding.value, type, multiLang: false };
-  } else if (Array.isArray(binding.value)) {
-    const key = String(binding.value[0]);
-    const args = binding.value.toSpliced(0, 1);
-    return { key, args, type, multiLang: true };
-  } else if (typeof binding.value === "object") {
-    const key = binding.value.key || "";
-    const args = Array.isArray(binding.value.args) ? binding.value.args : void 0;
-    return { key, args, type, multiLang: true };
-  } else {
-    return { multiLang: false };
-  }
-};
-const vT = {
-  mounted: (el, binding) => {
-    const { multiLang, key, args, type } = parseBinding(binding);
-    if (key) {
-      if (multiLang) {
-        const locale = getCurrentLocale();
-        const text = i18n.text(locale, key, args);
-        el[type === "HTML" ? "innerHTML" : "innerText"] = text.text;
-        el.setAttribute("data-bs-text-key", key);
-      } else {
-        el[type === "HTML" ? "innerHTML" : "innerText"] = key;
-      }
-    }
-  }
-};
 const _hoisted_1$7 = {
   key: 0,
   class: "menu separator"
@@ -2893,7 +2987,7 @@ class PageManager {
         pageId: page.pageId,
         path: pagePath,
         active: false,
-        component: markRaw(page.component),
+        component: page.component ? markRaw(page.component) : void 0,
         // component 는 reactive 하지 않아야 한다.
         hideTab: page === this.firstPage
       });
@@ -2941,7 +3035,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
       }, {
         default: withCtx(() => [
-          createTextVNode(toDisplayString(_ctx.menu.caption), 1)
+          withDirectives(createElementVNode("span", null, null, 512), [
+            [unref(vT), { key: `menu.${_ctx.menu.menuId}` }]
+          ])
         ]),
         _: 1
       }, 8, ["to"])) : (openBlock(), createElementBlock("div", {
@@ -2950,7 +3046,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         tabindex: "0",
         onClick: _cache[1] || (_cache[1] = ($event) => emit("click")),
         onKeyup: _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => emit("click"), ["prevent"]), ["enter"]))
-      }, toDisplayString(_ctx.menu.caption), 33));
+      }, [
+        withDirectives(createElementVNode("span", null, null, 512), [
+          [unref(vT), { key: `menu.${_ctx.menu.menuId}` }]
+        ])
+      ], 32));
     };
   }
 });
@@ -3170,7 +3270,7 @@ const parsePathParam = (route) => {
 const BLUESEA_VERSION = "5.0.0";
 export {
   BLUESEA_VERSION,
-  _sfc_main$J as BSButton,
+  BSButton,
   _sfc_main$E as BSCheckbox,
   _sfc_main$D as BSCheckboxGroup,
   _sfc_main$8 as BSContextMenuContainer,
@@ -3187,14 +3287,15 @@ export {
   _sfc_main$d as BSMultiLangTextArea,
   _sfc_main$e as BSMultiLangTextInput,
   _sfc_main$x as BSMultiSelect,
-  _sfc_main$H as BSNumberInput,
+  _sfc_main$I as BSNumberInput,
+  _sfc_main$H as BSPriceInput,
   _sfc_main$C as BSRadioButton,
   _sfc_main$B as BSRadioButtonGroup,
   _sfc_main$y as BSSelect,
   _sfc_main$j as BSTabSheet,
   _sfc_main$v as BSTextArea,
   _sfc_main$o as BSTextFilter,
-  _sfc_main$I as BSTextInput,
+  _sfc_main$J as BSTextInput,
   _sfc_main$f as BSTree,
   _sfc_main$w as BSTreeSelect,
   _sfc_main as DefaultBody,