hisonvue 1.0.0

package/dist/HGap-DzGrfWVt.mjs

@@ -0,0 +1,233 @@
+import { defineComponent as D, ref as n, computed as i, onMounted as P, onBeforeUnmount as q, watch as s, nextTick as O, createElementBlock as S, openBlock as L, normalizeClass as U, createElementVNode as j, normalizeStyle as T, createCommentVNode as M } from "vue";
+import { z as Y, A as K, B as J, f as b, g as Q, u as X, F as V, o as Z, h as c, e as ee, t as te, b as W, a as le, r as ne, c as se, d as ae } from "./index-DUh7pai4.mjs";
+import { _ as oe } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const ie = {
+  /**
+   * Unique identifier for the gap.
+   * - Access methods via `hison.component.getGap(id)`
+   * - Duplicate `id` will throw at mount time
+   */
+  id: { type: String, required: !1 },
+  /**
+   * Custom class applied to the gap wrapper (string / array / object).
+   * - Works with responsive classes like `hison-col-*`, `hison-size-*`, `hison-color-*`, `hison-pos-*`
+   * - If no `hison-col-*` is provided, `hison-col-12` is added by default.
+   */
+  class: {
+    type: [String, Array, Object],
+    required: !1
+  },
+  /**
+   * Inline style for the gap element (string, object, or an array of objects).
+   */
+  style: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Controls visibility of the gap.
+   * - Boolean only. Use `:visible="false"`
+   */
+  visible: { type: Boolean, default: !0 },
+  /**
+   * Whether to show border (rendered as subtle box-shadow).
+   * - Default: false (no border)
+   */
+  border: { type: Boolean, default: !1 },
+  /**
+   * Background type.
+   * - 'filled' | 'empty' | 'transparent'
+   * - Default: 'empty'
+   */
+  backgroundType: {
+    type: String,
+    default: b.empty,
+    validator: (t) => J.includes(t)
+  },
+  /**
+   * Drawing rule of the gap:
+   * - 'none' (default): renders empty space only
+   * - 'horizontal': renders a horizontal line (like hr)
+   * - 'vertical'  : renders a vertical line
+   */
+  line: {
+    type: String,
+    default: "none",
+    validator: (t) => K.includes(t)
+  },
+  /**
+   * Style of the divider line.
+   * - 'solid' (default)
+   * - 'dashed'
+   * - 'dotted'
+   * - 'double'
+   * - 'groove'
+   * - 'ridge'
+   * - 'inset'
+   * - 'outset'
+   */
+  lineStyle: {
+    type: String,
+    default: "solid",
+    validator: (t) => Y.includes(t)
+  },
+  /**
+   * Thickness of the divider line.
+   * - Number → pixels (e.g. `2` → `2px`)
+   * - String → any valid CSS unit (e.g. `'0.5rem'`)
+   * - Default: 1
+   */
+  lineWidth: {
+    type: [Number, String],
+    default: 1
+    // number -> px
+  },
+  /**
+   * Color of the divider line.
+   * - Any valid CSS color string (hex, rgb, etc.)
+   * - Empty string (`''`) uses theme auto color
+   */
+  lineColor: {
+    type: String,
+    default: ""
+    // '' -> theme auto
+  }
+}, re = D({
+  name: "HGap",
+  props: ie,
+  inheritAttrs: !1,
+  emits: ["mounted", "responsive-change"],
+  setup(t, { emit: h }) {
+    const k = n(null), y = n(null), a = t.id ? t.id : Q(), m = `hgap:${a}`, $ = X(), d = n(t.visible), v = n(t.border ?? !1), g = n(t.backgroundType ?? b.empty), p = n(t.line), r = n(t.lineStyle || "solid"), u = n(t.lineWidth ?? 1), f = n(t.lineColor || ""), B = i(() => {
+      var R, _;
+      const e = String(f.value || "").trim(), l = V(e);
+      if (l) return l;
+      if (e) return e;
+      const H = Z(o.value, "color"), N = H ? V(H) : null;
+      return N || ((_ = (R = c) == null ? void 0 : R.componentStyle) == null ? void 0 : _.mutedColor) || "#999999";
+    }), z = i(() => {
+      const e = u.value;
+      return typeof e == "number" ? `${e}px` : String(e || "1px");
+    }), I = i(() => ({
+      borderTop: `${z.value} ${r.value} ${B.value}`
+    })), w = i(() => ({
+      borderLeft: `${z.value} ${r.value} ${B.value}`
+    })), F = i(() => d.value ? "" : "hison-display-none"), G = i(() => v.value ? "hison-border" : ""), x = i(() => {
+      switch (g.value) {
+        case b.empty:
+          return "hison-bg-empty";
+        case b.transparent:
+          return "hison-bg-transparent";
+        default:
+          return "hison-bg-filled";
+      }
+    }), o = n([]), C = () => {
+      o.value = ee(te(t.class) || "", $.value), W(o.value, "size", c.componentStyle.size), W(o.value, "color", "primary"), le(o.value, "col") === -1 && o.value.push("hison-col-12");
+    }, A = () => {
+      c.component.gapList[a] && c.component.gapList[a].isHisonvueComponent && console.warn(`[Hisonvue] The gap ID is at risk of being duplicated. ${a}`), ne(m, () => {
+        E(), O(A);
+      }), C(), y.value = {
+        isHisonvueComponent: !0,
+        getId: () => a,
+        getType: () => "gap",
+        isVisible: () => d.value,
+        setVisible: (e) => {
+          d.value = e;
+        },
+        isBorder: () => v.value,
+        setBorder: (e) => {
+          v.value = e;
+        },
+        getBackgroundType: () => g.value,
+        setBackgroundType: (e) => {
+          g.value = e;
+        },
+        getLine: () => p.value,
+        setLine: (e) => {
+          p.value = e;
+        },
+        getLineStyle: () => r.value,
+        setLineStyle: (e) => {
+          r.value = e;
+        },
+        getLineWidth: () => u.value,
+        setLineWidth: (e) => {
+          u.value = e;
+        },
+        getLineColor: () => f.value,
+        setLineColor: (e) => {
+          f.value = e ?? "";
+        },
+        reload: () => se(m)
+      }, c.component.gapList[a] = y.value, h("mounted", y.value);
+    }, E = () => {
+      ae(m), delete c.component.gapList[a];
+    };
+    return P(A), q(E), s($, (e) => {
+      C(), h("responsive-change", e);
+    }), s(() => t.visible, (e) => {
+      const l = !!e;
+      l !== d.value && (d.value = l);
+    }), s(() => t.border, (e) => {
+      const l = !!e;
+      l !== v.value && (v.value = l);
+    }), s(() => t.backgroundType, (e) => {
+      e && e !== g.value && (g.value = e);
+    }), s(() => t.line, (e) => {
+      (e === "none" || e === "horizontal" || e === "vertical") && e !== p.value && (p.value = e);
+    }), s(() => t.lineStyle, (e) => {
+      ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"].includes(e) && e !== r.value && (r.value = e);
+    }), s(() => t.lineWidth, (e) => {
+      const l = typeof e == "number" && Number.isFinite(e) && e >= 0 || typeof e == "string" ? e : u.value;
+      l !== u.value && (u.value = l);
+    }), s(() => t.lineColor, (e) => {
+      const l = (e ?? "").toString();
+      l !== f.value && (f.value = l);
+    }), s(() => t.class, () => {
+      C();
+    }), {
+      gapRef: k,
+      props: t,
+      line: p,
+      visibleClass: F,
+      borderClass: G,
+      backgroundTypeClass: x,
+      responsiveClassList: o,
+      horizontalStyle: I,
+      verticalStyle: w
+    };
+  }
+});
+function ue(t, h, k, y, a, m) {
+  return L(), S("div", {
+    class: U([
+      "hison-wrapper",
+      ...t.responsiveClassList,
+      t.visibleClass
+    ])
+  }, [
+    j("div", {
+      ref: "gapRef",
+      class: U([
+        "hison-gap",
+        t.borderClass,
+        t.backgroundTypeClass
+      ]),
+      style: T(t.props.style)
+    }, [
+      t.line === "horizontal" ? (L(), S("div", {
+        key: 0,
+        class: "hison-gap-line-horizontal",
+        style: T(t.horizontalStyle)
+      }, null, 4)) : t.line === "vertical" ? (L(), S("div", {
+        key: 1,
+        class: "hison-gap-line-vertical",
+        style: T(t.verticalStyle)
+      }, null, 4)) : M("", !0)
+    ], 6)
+  ], 2);
+}
+const ge = /* @__PURE__ */ oe(re, [["render", ue]]);
+export {
+  ge as default
+};

package/dist/HGrid-BiIhVCv_.mjs

@@ -0,0 +1,345 @@
+import { defineComponent as V, ref as f, computed as L, onMounted as _, onBeforeUnmount as x, watch as F, triggerRef as I, nextTick as M, createElementBlock as N, openBlock as T, normalizeStyle as U, normalizeClass as $, createElementVNode as P, mergeProps as K } from "vue";
+import { G as j, I as W, J as Y, K as Z, L as J, M as X, h as v, g as Q, u as ee, e as R, t as H, o as y, a as te, l as q, F as z, v as g, r as ie, c as le, d as re } from "./index-DUh7pai4.mjs";
+import { _ as oe } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const ne = {
+  modelValue: Array,
+  id: { type: String, required: !0 },
+  columns: {
+    type: Array,
+    required: !0
+  },
+  class: {
+    type: [String, Array, Object],
+    required: !1
+  },
+  style: {
+    type: [String, Object],
+    required: !1
+  },
+  /* The name of the grid. If null, the grid Id is inserted. */
+  name: { type: String, required: !1 },
+  /* Indicates whether the cell is editable. If true, the cell cannot be edited. */
+  locked: { type: Boolean, default: !1 },
+  /* Indicates whether to display the background color representing the locked state of a locked cell. */
+  lockedColor: { type: Boolean, default: !0 },
+  /* Indicates whether the column width can be adjusted by the user with the mouse. */
+  resizable: { type: Boolean, default: !0 },
+  /* Indicates whether the user can use undo and redo shortcuts while editing the grid. */
+  redoable: { type: Boolean, default: !0 },
+  /* The number of times the grid edit state is recorded for undo and redo. */
+  redoCount: { type: Number, required: !1 },
+  /* Indicates whether the grid is visible. If false, it will be display none. */
+  visible: { type: Boolean, default: !0 },
+  /* Indicates whether the grid header is visible. If false, it will be display none. */
+  headerVisible: { type: Boolean, default: !0 },
+  /* Indicates whether to display the row number column (v-g-rownum) on the screen. */
+  rownumVisible: { type: Boolean, default: !0 },
+  /* The width size of the row number column (v-g-rownum). */
+  rownumSize: { type: String, required: !1 },
+  /* Indicates whether to display the locked color of the row number column (v-g-rownum). */
+  rownumLockedColor: { type: Boolean, default: !1 },
+  /* Indicates whether to display the status column (v-g-status) on the screen. */
+  statusVisible: { type: Boolean, default: !0 },
+  /* Indicates whether to display the locked color of the status column (v-g-status). */
+  statusLockedColor: { type: Boolean, default: !1 },
+  /* The user selection range policy of the grid. 'range': range selection, 'single': single cell selection, 'none': no selection) */
+  selectionPolicy: {
+    type: String,
+    required: !1,
+    validator: (e) => X.includes(e)
+  },
+  /* Value representing null in the grid. */
+  nullValue: { type: String, required: !1 },
+  /**
+   * The format of the date in the grid.
+   * 'yyyy-mm-dd', 'yyyy/mm/dd', 'yyyy. mm. dd', 'yyyymmdd'
+   * 'mm-dd-yyyy', 'mm/dd/yyyy', 'mm. dd. yyyy', 'mmddyyyy'
+   * 'dd-mm-yyyy', 'dd/mm/yyyy', 'dd. mm. yyyy', 'ddmmyyyy' are possible.
+   */
+  dateFormat: {
+    type: String,
+    required: !1,
+    validator: (e) => J.includes(e)
+  },
+  /**
+   * The format of the month in the grid.
+   * 'yyyymm', 'yyyy-mm', 'yyyy/mm', 'yyyy. mm'
+   * 'mmyyyy', 'mm-yyyy', 'mm/yyyy', 'mm. yyyy' are possible.
+   */
+  monthFormat: {
+    type: String,
+    required: !1,
+    validator: (e) => Z.includes(e)
+  },
+  /* Sets the alter-row of the grid (the function that alternates the colors of each row). */
+  alterRow: { type: Boolean, default: !0 },
+  /**
+   * Sets the frozen columns of the grid. The number should be set by calculating the invisible columns as well.
+   * (Column 1 is v-g-rownum, and column 2 is v-g-status. The user column starts from at least 3 columns.)
+   */
+  frozenColCount: { type: Number, required: !1 },
+  /* Sets the frozen rows of the grid. */
+  frozenRowCount: { type: Number, required: !1 },
+  /* Indicates whether to use the sorting feature of the grid. */
+  sortable: { type: Boolean, default: !0 },
+  /* Indicates whether to use the filtering feature of the grid. */
+  filterable: { type: Boolean, default: !0 },
+  /* Indicates whether to use the feature that checks or unchecks the column checkboxes when double-clicking the header of a checkbox. */
+  allCheckable: { type: Boolean, default: !0 },
+  /* The value a checkbox type cell has when checked. */
+  checkedValue: { type: String, required: !1 },
+  /* The value a checkbox type cell has when unchecked. */
+  uncheckedValue: { type: String, required: !1 },
+  /* The width of the grid. Insert cssText. */
+  width: { type: String, required: !1 },
+  /* The height of the grid. Insert cssText. */
+  height: { type: String, required: !1 },
+  /* The margin of the grid. Insert cssText. */
+  margin: { type: String, required: !1 },
+  /* The padding of the grid. Insert cssText. */
+  padding: { type: String, required: !1 },
+  /* Specifies the size level of the grid. Enter a positive integer. 5 is the standard ratio. */
+  sizeLevel: { type: Number, required: !1 },
+  /* Sets the default vertical-align of the grid cell. Choose from 'top', 'center', 'bottom'. */
+  verticalAlign: {
+    type: String,
+    required: !1,
+    validator: (e) => Y.includes(e)
+  },
+  /* Specifies the default font-size of the grid cell. Enter a css text. The unit is px. */
+  cellFontSize: { type: String, required: !1 },
+  /* Specifies the default min-height of the grid cell. Enter a css text. The unit is px. */
+  cellMinHeight: { type: String, required: !1 },
+  /* Sets the horizontal border size of the grid cell. The unit is px. Enter 0 or a positive integer. */
+  horizenBorderSize: { type: Number, required: !1 },
+  /* Sets the vertical border size of the grid cell. The unit is px. Enter 0 or a positive integer. */
+  verticalBorderSize: { type: Number, required: !1 },
+  /* Sets the font-family of the grid cell. Enter the font-family in cssText. */
+  gridFontFamily: { type: String, required: !1 },
+  /* Sets the font-family of the grid editor. Enter the font-family in cssText. */
+  editorFontFamily: { type: String, required: !1 },
+  /* Sets the overflow-wrap of the grid cell. Enter the overflow-wrap in cssText. */
+  overflowWrap: { type: String, required: !1 },
+  /* Sets the word-break of the grid cell. Enter the word-break in cssText. */
+  wordBreak: { type: String, required: !1 },
+  /* Sets the white-space of the grid cell. Enter the white-space in cssText. */
+  whiteSpace: { type: String, required: !1 },
+  /* Indicates whether to display the underline for link type cells. */
+  linkHasUnderLine: { type: Boolean, required: !1 },
+  /* Inverts the colors of the grid. */
+  invertColor: { type: Boolean, default: !1 },
+  /* Sets the main color of the grid. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  color: {
+    type: String,
+    required: !1,
+    validator: (e) => j.includes(e) || W(e)
+  },
+  /* Sets the border color of the grid. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  gridBorderColor: { type: String, required: !1 },
+  /* Sets the background color of the header cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  headerCellBackColor: { type: String, required: !1 },
+  /* Sets the border color of the header cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  headerCellBorderColor: { type: String, required: !1 },
+  /* Sets the font color of the header cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  headerCellFontColor: { type: String, required: !1 },
+  /* Sets the background color of the footer cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  footerCellBackColor: { type: String, required: !1 },
+  /* Sets the border color of the footer cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  footerCellBorderColor: { type: String, required: !1 },
+  /* Sets the font color of the footer cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  footerCellFontColor: { type: String, required: !1 },
+  /* Sets the background color of the grid body. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  bodyBackColor: { type: String, required: !1 },
+  /* Sets the background color of the grid body cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  bodyCellBackColor: { type: String, required: !1 },
+  /* Sets the border color of the grid body cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  bodyCellBorderColor: { type: String, required: !1 },
+  /* Sets the font color of the grid body cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  bodyCellFontColor: { type: String, required: !1 },
+  /* Sets the background color of the editor. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  editorBackColor: { type: String, required: !1 },
+  /* Sets the font color of the editor. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  editorFontColor: { type: String, required: !1 },
+  /* Sets the background color of the selected cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  selectCellBackColor: { type: String, required: !1 },
+  /* Sets the font color of the selected cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  selectCellFontColor: { type: String, required: !1 },
+  /* Sets the background color of the selected column header. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  selectColBackColor: { type: String, required: !1 },
+  /* Sets the font color of the selected column header. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  selectColFontColor: { type: String, required: !1 },
+  /* Sets the background color of the selected row. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  selectRowBackColor: { type: String, required: !1 },
+  /* Sets the font color of the selected row. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  selectRowFontColor: { type: String, required: !1 },
+  /* Sets the background color of the mouseover cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  mouseoverCellBackColor: { type: String, required: !1 },
+  /* Sets the font color of the mouseover cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  mouseoverCellFontColor: { type: String, required: !1 },
+  /* Sets the background color of the locked cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  lockCellBackColor: { type: String, required: !1 },
+  /* Sets the font color of the locked cell editor. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  lockCellFontColor: { type: String, required: !1 },
+  /* Sets the background color of the alternate rows. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  alterRowBackColor: { type: String, required: !1 },
+  /* Sets the font color of the alternate rows. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  alterRowFontColor: { type: String, required: !1 },
+  /* Sets the font color of the button type cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  buttonFontColor: { type: String, required: !1 },
+  /* Sets the border color of the button type cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  buttonBorderColor: { type: String, required: !1 },
+  /* Sets the background color of the button type cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  buttonBackColor: { type: String, required: !1 },
+  /* Sets the font color of the button type cell on hover. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  buttonHoverFontColor: { type: String, required: !1 },
+  /* Sets the background color of the button type cell on hover. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  buttonHoverBackColor: { type: String, required: !1 },
+  /* Sets the font color of the button type cell on active. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  buttonActiveFontColor: { type: String, required: !1 },
+  /* Sets the background color of the button type cell on active. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  buttonActiveBackColor: { type: String, required: !1 },
+  /* Sets the font color of the link type cell. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  linkFontColor: { type: String, required: !1 },
+  /* Sets the font color of the link type cell on hover. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  linkHoverFontColor: { type: String, required: !1 },
+  /* Sets the font color of the link type cell on active. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  linkActiveFontColor: { type: String, required: !1 },
+  /* Sets the font color of the link type cell on visited. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  linkVisitedFontColor: { type: String, required: !1 },
+  /* Sets the font color of the link type cell on focus. Enter the 16-digit color code in cssText. Ex) '#ffffff' */
+  linkFocusFontColor: { type: String, required: !1 }
+}, ae = {
+  activeCell: Function,
+  activeCells: Function,
+  activeRow: Function,
+  activeRows: Function,
+  activeCol: Function,
+  activeCols: Function,
+  beforeChange: Function,
+  afterChange: Function,
+  beforeClickCell: Function,
+  afterClickCell: Function,
+  clickSelect: Function,
+  clickCheckbox: Function,
+  clickButton: Function,
+  clickLink: Function,
+  beforeDblClickCell: Function,
+  afterDblClickCell: Function,
+  beforeClickHeader: Function,
+  afterClickHeader: Function,
+  beforeDblClickHeader: Function,
+  afterDblClickHeader: Function,
+  beforeEditEnter: Function,
+  afterEditEnter: Function,
+  editEnding: Function,
+  clickFilter: Function,
+  chooseFilter: Function,
+  paste: Function,
+  copy: Function,
+  resize: Function,
+  keydownEditor: Function,
+  inputEditor: Function,
+  keydownGrid: Function
+}, ue = V({
+  name: "HGrid",
+  props: {
+    ...ne,
+    ...ae
+  },
+  emits: ["mounted", "responsive-change"],
+  setup(e, { emit: k }) {
+    const d = v.grid, u = f(null), t = f(null), s = e.id ? e.id : Q(), b = `hgrid:${s}`, S = ee(), C = f(e.visible), D = L(() => C.value ? "" : "hison-display-none"), m = f([]), p = ["columns", "id", "class", "style", "visible"], h = f(0), B = () => {
+      I(h);
+    }, E = f(""), G = L(() => {
+      h.value;
+      const l = R(H(e.class) || "", S.value), r = y(l, "color"), o = y(l, "size");
+      te(l, "col") === -1 && l.push("hison-col-12"), m.value = l;
+      const i = {};
+      i["data-id"] = s;
+      for (const [c, a] of Object.entries(e))
+        p.includes(c) || a != null && (i[c.replace(/[A-Z]/g, (n) => "-" + n.toLowerCase())] = String(a));
+      return i["size-level"] = i["size-level"] && q.utils.isNumber(i["size-level"]) ? String(Math.min(Math.max(Number(i["size-level"]), 1), 9)) : w(5, o), r && !i.color && (i.color = r), i.color && (i.color = z(i.color) ?? i.color), (e.invertColor || v.componentStyle.invertColor) && (i["invert-color"] = "true"), E.value = i.color, i;
+    }), w = (l, r) => {
+      switch (r = r ?? v.componentStyle.size, r) {
+        case g.s:
+          l -= 2;
+          break;
+        case g.m:
+          break;
+        case g.l:
+          l += 2;
+          break;
+        case g.xl:
+          l += 3;
+          break;
+      }
+      return String(Math.min(Math.max(l, 1), 9));
+    }, A = () => {
+      if (ie(b, () => {
+        O(), B(), M(A);
+      }), d.init(), !u.value) return;
+      const l = u.value.querySelector("[data-vanillagrid]");
+      if (!l) return;
+      e.columns.forEach((o) => {
+        const i = document.createElement("div");
+        i.setAttribute("data-col", "");
+        for (const c in o) {
+          const a = o[c];
+          if (a != null) {
+            const n = c.replace(/([A-Z])/g, "-$1").toLowerCase();
+            i.setAttribute(n, String(a));
+          }
+        }
+        l.appendChild(i);
+      }), d.mountGrid(u.value), l.style.border = "none", l.style.boxShadow = `0 0.5px 1px 0.5px ${E.value}`;
+      const r = d.getGrid(s);
+      if (r && (r.getId = () => s), t.value = r, t.value) {
+        t.value.isHisonvueComponent = !0, t.value.getId = () => s, t.value.getType = () => "grid", "isGridVisible" in t.value && delete t.value.isGridVisible, "setGridVisible" in t.value && delete t.value.setGridVisible, t.value.isVisible = () => C.value, t.value.setVisible = (i) => {
+          C.value = i;
+        }, t.value.getDataModel = () => new q.data.DataModel(t.value.getValues()), t.value.setDataModel = (i) => {
+          if (!(!i || i.getRowCount() == 0))
+            return t.value.load(i);
+        }, t.value.reload = () => le(b);
+        const o = t.value.load.bind(t.value);
+        t.value.load = (i) => i && i.getIsDataModel && i.getIsDataModel() ? o(i.getRows()) : o(i);
+      }
+      t.value && (typeof e.activeCell == "function" && t.value.setOnActiveCell(e.activeCell), typeof e.activeCells == "function" && t.value.setOnActiveCells(e.activeCells), typeof e.activeRow == "function" && t.value.setOnActiveRow(e.activeRow), typeof e.activeRows == "function" && t.value.setOnActiveRows(e.activeRows), typeof e.activeCol == "function" && t.value.setOnActiveCol(e.activeCol), typeof e.activeCols == "function" && t.value.setOnActiveCols(e.activeCols), typeof e.beforeChange == "function" && t.value.setOnBeforeChange(e.beforeChange), typeof e.afterChange == "function" && t.value.setOnAfterChange(e.afterChange), typeof e.beforeClickCell == "function" && t.value.setOnBeforeClickCell(e.beforeClickCell), typeof e.afterClickCell == "function" && t.value.setOnAfterClickCell(e.afterClickCell), typeof e.clickSelect == "function" && t.value.setOnClickSelect(e.clickSelect), typeof e.clickCheckbox == "function" && t.value.setOnClickCheckbox(e.clickCheckbox), typeof e.clickButton == "function" && t.value.setOnClickButton(e.clickButton), typeof e.clickLink == "function" && t.value.setOnClickLink(e.clickLink), typeof e.beforeDblClickCell == "function" && t.value.setOnBeforeDblClickCell(e.beforeDblClickCell), typeof e.afterDblClickCell == "function" && t.value.setOnAfterDblClickCell(e.afterDblClickCell), typeof e.beforeClickHeader == "function" && t.value.setOnBeforeClickHeader(e.beforeClickHeader), typeof e.afterClickHeader == "function" && t.value.setOnAfterClickHeader(e.afterClickHeader), typeof e.beforeDblClickHeader == "function" && t.value.setOnBeforeDblClickHeader(e.beforeDblClickHeader), typeof e.afterDblClickHeader == "function" && t.value.setOnAfterDblClickHeader(e.afterDblClickHeader), typeof e.beforeEditEnter == "function" && t.value.setOnBeforeEditEnter(e.beforeEditEnter), typeof e.afterEditEnter == "function" && t.value.setOnAfterEditEnter(e.afterEditEnter), typeof e.editEnding == "function" && t.value.setOnEditEnding(e.editEnding), typeof e.clickFilter == "function" && t.value.setOnClickFilter(e.clickFilter), typeof e.chooseFilter == "function" && t.value.setOnChooseFilter(e.chooseFilter), typeof e.paste == "function" && t.value.setOnPaste(e.paste), typeof e.copy == "function" && t.value.setOnCopy(e.copy), typeof e.resize == "function" && t.value.setOnResize(e.resize), typeof e.keydownEditor == "function" && t.value.setOnKeydownEditor(e.keydownEditor), typeof e.inputEditor == "function" && t.value.setOnInputEditor(e.inputEditor), typeof e.keydownGrid == "function" && t.value.setOnKeydownGrid(e.keydownGrid)), k("mounted", t.value);
+    }, O = () => {
+      re(b), u.value && d.unmountGrid(u.value);
+    };
+    return _(A), x(O), F(S, (l) => {
+      const r = t.value;
+      if (r) {
+        const o = R(H(e.class) || "", S.value), i = y(o, "color"), c = y(o, "size"), a = e.sizeLevel && q.utils.isNumber(String(e.sizeLevel)) ? String(Math.min(Math.max(Number(e.sizeLevel), 1), 9)) : w(5, c);
+        r.setGridSizeLevel(Number(a));
+        let n = "";
+        i && !e.color && (n = i), n && (n = z(n) ?? n, r.setGridColor(n), (e.invertColor || v.componentStyle.invertColor) && r.invertColor(!0));
+      }
+      k("responsive-change", l);
+    }), F(() => e.visible, (l) => {
+      const r = !!l;
+      r !== C.value && (C.value = r);
+    }), F(() => e.class, () => {
+      B();
+    }), {
+      editorWrap: u,
+      props: e,
+      bindAttrs: G,
+      responsiveClassList: m,
+      visibleClass: D
+    };
+  }
+});
+function ce(e, k, d, u, t, s) {
+  return T(), N("div", {
+    ref: "editorWrap",
+    class: $(["hison-grid", "hison-wrapper", ...e.responsiveClassList, e.visibleClass]),
+    style: U(e.props.style)
+  }, [
+    P("div", K({ "data-vanillagrid": "" }, e.bindAttrs), null, 16)
+  ], 6);
+}
+const Ce = /* @__PURE__ */ oe(ue, [["render", ce]]);
+export {
+  Ce as default
+};

package/dist/HGrid-C3EV_pgM.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),l=require("./index-BmKMHsSZ.js"),A=require("./_plugin-vue_export-helper-BHFhmbuH.js"),L={modelValue:Array,id:{type:String,required:!0},columns:{type:Array,required:!0},class:{type:[String,Array,Object],required:!1},style:{type:[String,Object],required:!1},name:{type:String,required:!1},locked:{type:Boolean,default:!1},lockedColor:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},redoable:{type:Boolean,default:!0},redoCount:{type:Number,required:!1},visible:{type:Boolean,default:!0},headerVisible:{type:Boolean,default:!0},rownumVisible:{type:Boolean,default:!0},rownumSize:{type:String,required:!1},rownumLockedColor:{type:Boolean,default:!1},statusVisible:{type:Boolean,default:!0},statusLockedColor:{type:Boolean,default:!1},selectionPolicy:{type:String,required:!1,validator:e=>l.SELECTION_POLICY_VALUES.includes(e)},nullValue:{type:String,required:!1},dateFormat:{type:String,required:!1,validator:e=>l.GRID_DATE_FORMAT_VALUES.includes(e)},monthFormat:{type:String,required:!1,validator:e=>l.GRID_MONTH_FORMAT_VALUES.includes(e)},alterRow:{type:Boolean,default:!0},frozenColCount:{type:Number,required:!1},frozenRowCount:{type:Number,required:!1},sortable:{type:Boolean,default:!0},filterable:{type:Boolean,default:!0},allCheckable:{type:Boolean,default:!0},checkedValue:{type:String,required:!1},uncheckedValue:{type:String,required:!1},width:{type:String,required:!1},height:{type:String,required:!1},margin:{type:String,required:!1},padding:{type:String,required:!1},sizeLevel:{type:Number,required:!1},verticalAlign:{type:String,required:!1,validator:e=>l.GRID_VERTICAL_ALIGN_VALUES.includes(e)},cellFontSize:{type:String,required:!1},cellMinHeight:{type:String,required:!1},horizenBorderSize:{type:Number,required:!1},verticalBorderSize:{type:Number,required:!1},gridFontFamily:{type:String,required:!1},editorFontFamily:{type:String,required:!1},overflowWrap:{type:String,required:!1},wordBreak:{type:String,required:!1},whiteSpace:{type:String,required:!1},linkHasUnderLine:{type:Boolean,required:!1},invertColor:{type:Boolean,default:!1},color:{type:String,required:!1,validator:e=>l.COLOR_SET_VALUES.includes(e)||l.isCssColorLike(e)},gridBorderColor:{type:String,required:!1},headerCellBackColor:{type:String,required:!1},headerCellBorderColor:{type:String,required:!1},headerCellFontColor:{type:String,required:!1},footerCellBackColor:{type:String,required:!1},footerCellBorderColor:{type:String,required:!1},footerCellFontColor:{type:String,required:!1},bodyBackColor:{type:String,required:!1},bodyCellBackColor:{type:String,required:!1},bodyCellBorderColor:{type:String,required:!1},bodyCellFontColor:{type:String,required:!1},editorBackColor:{type:String,required:!1},editorFontColor:{type:String,required:!1},selectCellBackColor:{type:String,required:!1},selectCellFontColor:{type:String,required:!1},selectColBackColor:{type:String,required:!1},selectColFontColor:{type:String,required:!1},selectRowBackColor:{type:String,required:!1},selectRowFontColor:{type:String,required:!1},mouseoverCellBackColor:{type:String,required:!1},mouseoverCellFontColor:{type:String,required:!1},lockCellBackColor:{type:String,required:!1},lockCellFontColor:{type:String,required:!1},alterRowBackColor:{type:String,required:!1},alterRowFontColor:{type:String,required:!1},buttonFontColor:{type:String,required:!1},buttonBorderColor:{type:String,required:!1},buttonBackColor:{type:String,required:!1},buttonHoverFontColor:{type:String,required:!1},buttonHoverBackColor:{type:String,required:!1},buttonActiveFontColor:{type:String,required:!1},buttonActiveBackColor:{type:String,required:!1},linkFontColor:{type:String,required:!1},linkHoverFontColor:{type:String,required:!1},linkActiveFontColor:{type:String,required:!1},linkVisitedFontColor:{type:String,required:!1},linkFocusFontColor:{type:String,required:!1}},R={activeCell:Function,activeCells:Function,activeRow:Function,activeRows:Function,activeCol:Function,activeCols:Function,beforeChange:Function,afterChange:Function,beforeClickCell:Function,afterClickCell:Function,clickSelect:Function,clickCheckbox:Function,clickButton:Function,clickLink:Function,beforeDblClickCell:Function,afterDblClickCell:Function,beforeClickHeader:Function,afterClickHeader:Function,beforeDblClickHeader:Function,afterDblClickHeader:Function,beforeEditEnter:Function,afterEditEnter:Function,editEnding:Function,clickFilter:Function,chooseFilter:Function,paste:Function,copy:Function,resize:Function,keydownEditor:Function,inputEditor:Function,keydownGrid:Function},z=r.defineComponent({name:"HGrid",props:{...L,...R},emits:["mounted","responsive-change"],setup(e,{emit:y}){const C=l.hisonCloser.grid,s=r.ref(null),t=r.ref(null),d=e.id?e.id:l.getUUID(),g=`hgrid:${d}`,S=l.useDevice(),v=r.ref(e.visible),E=r.computed(()=>v.value?"":"hison-display-none"),k=r.ref([]),w=["columns","id","class","style","visible"],b=r.ref(0),F=()=>{r.triggerRef(b)},q=r.ref(""),O=r.computed(()=>{b.value;const o=l.extractResponsiveClasses(l.toClassString(e.class)||"",S.value),n=l.getSpecificClassValueFromClassList(o,"color"),a=l.getSpecificClassValueFromClassList(o,"size");l.getIndexSpecificClassNameFromClassList(o,"col")===-1&&o.push("hison-col-12"),k.value=o;const i={};i["data-id"]=d;for(const[f,c]of Object.entries(e))w.includes(f)||c!=null&&(i[f.replace(/[A-Z]/g,u=>"-"+u.toLowerCase())]=String(c));return i["size-level"]=i["size-level"]&&l.hison.utils.isNumber(i["size-level"])?String(Math.min(Math.max(Number(i["size-level"]),1),9)):m(5,a),n&&!i.color&&(i.color=n),i.color&&(i.color=l.getHexCodeFromColorText(i.color)??i.color),(e.invertColor||l.hisonCloser.componentStyle.invertColor)&&(i["invert-color"]="true"),q.value=i.color,i}),m=(o,n)=>{switch(n=n??l.hisonCloser.componentStyle.size,n){case l.Size.s:o-=2;break;case l.Size.m:break;case l.Size.l:o+=2;break;case l.Size.xl:o+=3;break}return String(Math.min(Math.max(o,1),9))},h=()=>{if(l.registerReloadable(g,()=>{B(),F(),r.nextTick(h)}),C.init(),!s.value)return;const o=s.value.querySelector("[data-vanillagrid]");if(!o)return;e.columns.forEach(a=>{const i=document.createElement("div");i.setAttribute("data-col","");for(const f in a){const c=a[f];if(c!=null){const u=f.replace(/([A-Z])/g,"-$1").toLowerCase();i.setAttribute(u,String(c))}}o.appendChild(i)}),C.mountGrid(s.value),o.style.border="none",o.style.boxShadow=`0 0.5px 1px 0.5px ${q.value}`;const n=C.getGrid(d);if(n&&(n.getId=()=>d),t.value=n,t.value){t.value.isHisonvueComponent=!0,t.value.getId=()=>d,t.value.getType=()=>"grid","isGridVisible"in t.value&&delete t.value.isGridVisible,"setGridVisible"in t.value&&delete t.value.setGridVisible,t.value.isVisible=()=>v.value,t.value.setVisible=i=>{v.value=i},t.value.getDataModel=()=>new l.hison.data.DataModel(t.value.getValues()),t.value.setDataModel=i=>{if(!(!i||i.getRowCount()==0))return t.value.load(i)},t.value.reload=()=>l.reloadHisonComponent(g);const a=t.value.load.bind(t.value);t.value.load=i=>i&&i.getIsDataModel&&i.getIsDataModel()?a(i.getRows()):a(i)}t.value&&(typeof e.activeCell=="function"&&t.value.setOnActiveCell(e.activeCell),typeof e.activeCells=="function"&&t.value.setOnActiveCells(e.activeCells),typeof e.activeRow=="function"&&t.value.setOnActiveRow(e.activeRow),typeof e.activeRows=="function"&&t.value.setOnActiveRows(e.activeRows),typeof e.activeCol=="function"&&t.value.setOnActiveCol(e.activeCol),typeof e.activeCols=="function"&&t.value.setOnActiveCols(e.activeCols),typeof e.beforeChange=="function"&&t.value.setOnBeforeChange(e.beforeChange),typeof e.afterChange=="function"&&t.value.setOnAfterChange(e.afterChange),typeof e.beforeClickCell=="function"&&t.value.setOnBeforeClickCell(e.beforeClickCell),typeof e.afterClickCell=="function"&&t.value.setOnAfterClickCell(e.afterClickCell),typeof e.clickSelect=="function"&&t.value.setOnClickSelect(e.clickSelect),typeof e.clickCheckbox=="function"&&t.value.setOnClickCheckbox(e.clickCheckbox),typeof e.clickButton=="function"&&t.value.setOnClickButton(e.clickButton),typeof e.clickLink=="function"&&t.value.setOnClickLink(e.clickLink),typeof e.beforeDblClickCell=="function"&&t.value.setOnBeforeDblClickCell(e.beforeDblClickCell),typeof e.afterDblClickCell=="function"&&t.value.setOnAfterDblClickCell(e.afterDblClickCell),typeof e.beforeClickHeader=="function"&&t.value.setOnBeforeClickHeader(e.beforeClickHeader),typeof e.afterClickHeader=="function"&&t.value.setOnAfterClickHeader(e.afterClickHeader),typeof e.beforeDblClickHeader=="function"&&t.value.setOnBeforeDblClickHeader(e.beforeDblClickHeader),typeof e.afterDblClickHeader=="function"&&t.value.setOnAfterDblClickHeader(e.afterDblClickHeader),typeof e.beforeEditEnter=="function"&&t.value.setOnBeforeEditEnter(e.beforeEditEnter),typeof e.afterEditEnter=="function"&&t.value.setOnAfterEditEnter(e.afterEditEnter),typeof e.editEnding=="function"&&t.value.setOnEditEnding(e.editEnding),typeof e.clickFilter=="function"&&t.value.setOnClickFilter(e.clickFilter),typeof e.chooseFilter=="function"&&t.value.setOnChooseFilter(e.chooseFilter),typeof e.paste=="function"&&t.value.setOnPaste(e.paste),typeof e.copy=="function"&&t.value.setOnCopy(e.copy),typeof e.resize=="function"&&t.value.setOnResize(e.resize),typeof e.keydownEditor=="function"&&t.value.setOnKeydownEditor(e.keydownEditor),typeof e.inputEditor=="function"&&t.value.setOnInputEditor(e.inputEditor),typeof e.keydownGrid=="function"&&t.value.setOnKeydownGrid(e.keydownGrid)),y("mounted",t.value)},B=()=>{l.unregisterReloadable(g),s.value&&C.unmountGrid(s.value)};return r.onMounted(h),r.onBeforeUnmount(B),r.watch(S,o=>{const n=t.value;if(n){const a=l.extractResponsiveClasses(l.toClassString(e.class)||"",S.value),i=l.getSpecificClassValueFromClassList(a,"color"),f=l.getSpecificClassValueFromClassList(a,"size"),c=e.sizeLevel&&l.hison.utils.isNumber(String(e.sizeLevel))?String(Math.min(Math.max(Number(e.sizeLevel),1),9)):m(5,f);n.setGridSizeLevel(Number(c));let u="";i&&!e.color&&(u=i),u&&(u=l.getHexCodeFromColorText(u)??u,n.setGridColor(u),(e.invertColor||l.hisonCloser.componentStyle.invertColor)&&n.invertColor(!0))}y("responsive-change",o)}),r.watch(()=>e.visible,o=>{const n=!!o;n!==v.value&&(v.value=n)}),r.watch(()=>e.class,()=>{F()}),{editorWrap:s,props:e,bindAttrs:O,responsiveClassList:k,visibleClass:E}}});function H(e,y,C,s,t,d){return r.openBlock(),r.createElementBlock("div",{ref:"editorWrap",class:r.normalizeClass(["hison-grid","hison-wrapper",...e.responsiveClassList,e.visibleClass]),style:r.normalizeStyle(e.props.style)},[r.createElementVNode("div",r.mergeProps({"data-vanillagrid":""},e.bindAttrs),null,16)],6)}const p=A._export_sfc(z,[["render",H]]);exports.default=p;