balala-revogrid 1.0.0

package/dist/collection/components/header/resizable.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.element.js","sourceRoot":"","sources":["../../../src/components/header/resizable.element.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,CAAC,EAAc,MAAM,eAAe,CAAC;AACxE,OAAO,EAEL,eAAe,EACf,YAAY,GACb,MAAM,uBAAuB,CAAC;AAK/B,MAAM,CAAC,MAAM,gBAAgB,GAAwB,CACnD,KAAqC,EACrC,QAAiB,EACjB,EAAE;IACF,MAAM,SAAS,GAAY,EAAE,CAAC;IAC9B,MAAM,SAAS,GACb,CAAC,KAAK,CAAC,SAAS;QACd,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE;;YAC7B,IAAI,CAAC,CAAC,SAAS,KAAK,YAAY,CAAC,GAAG,EAAE,CAAC;gBACrC,MAAA,KAAK,CAAC,QAAQ,sDAAG,CAAC,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QACL,IAAI,CAAC;IAEP,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACpB,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC3B,SAAS,CAAC,IAAI,CACZ,WACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAChC,UAAU,EAAE,CAAC,CAAC,EAAE;wBACd,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACtB,CAAC,EACD,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,CAAC,CAAC,EACxD,YAAY,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,CAAC,CAAC,EACzD,KAAK,EAAE,uBAAuB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAC/C,CACH,CAAC;YACJ,CAAC;QACH,CAAC;aAAM,CAAC;YACN,KAAK,IAAI,EAAE,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC5B,SAAS,CAAC,IAAI,CACZ,WACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAChC,YAAY,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACnD,UAAU,EAAE,CAAC,CAAC,EAAE;wBACd,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACtB,CAAC,EACD,KAAK,EAAE,WAAW,GAClB,CACH,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,CACL,2BAAS,KAAK,IAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,CAAC,CAAC,CAAA;QAC7C,QAAQ;QACR,SAAS,CACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { type FunctionalComponent, h, type VNode } from '@stencil/core';\nimport {\n  ResizeProps,\n  ResizeDirective,\n  ResizeEvents,\n} from './resizable.directive';\nimport type { CellProps } from '@type';\n\nexport type ResizableElementHTMLAttributes = Partial<ResizeProps> & CellProps;\n\nexport const ResizableElement: FunctionalComponent = (\n  props: ResizableElementHTMLAttributes,\n  children: VNode[],\n) => {\n  const resizeEls: VNode[] = [];\n  const directive =\n    (props.canResize &&\n      new ResizeDirective(props, e => {\n        if (e.eventName === ResizeEvents.end) {\n          props.onResize?.(e);\n        }\n      })) ||\n    null;\n\n  if (props.active) {\n    if (props.canResize) {\n      for (let p in props.active) {\n        resizeEls.push(\n          <div\n            onClick={e => e.preventDefault()}\n            onDblClick={e => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            onMouseDown={(e: MouseEvent) => directive?.handleDown(e)}\n            onTouchStart={(e: TouchEvent) => directive?.handleDown(e)}\n            class={`resizable resizable-${props.active[p]}`}\n          />,\n        );\n      }\n    } else {\n      for (let _p in props.active) {\n        resizeEls.push(\n          <div\n            onClick={e => e.preventDefault()}\n            onTouchStart={(e: TouchEvent) => e.preventDefault()}\n            onDblClick={e => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            class={`no-resize`}\n          />,\n        );\n      }\n    }\n  }\n  return (\n    <div {...props} ref={e => e && directive?.set(e)}>\n      {children}\n      {resizeEls}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/header/revogr-header-style.css

@@ -0,0 +1,164 @@
+@charset "UTF-8";
+revogr-header {
+  position: relative;
+  z-index: 5;
+  display: block;
+}
+revogr-header .header-rgRow {
+  display: block;
+  position: relative;
+}
+revogr-header .header-rgRow.group {
+  z-index: 0;
+}
+revogr-header .group-rgRow {
+  position: relative;
+  overflow: visible;
+}
+revogr-header .group-rgRow .rgHeaderCell.merged-header {
+  z-index: 5;
+  top: 0;
+  align-items: center;
+}
+revogr-header .rgHeaderCell {
+  position: absolute;
+  box-sizing: border-box;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  user-select: text;
+}
+revogr-header .rgHeaderCell:has(.resizable-r:hover), revogr-header .rgHeaderCell:has(.resizable-l:hover) {
+  z-index: 92;
+}
+revogr-header .rgHeaderCell.group-header {
+  text-align: center;
+}
+revogr-header .rgHeaderCell.align-center {
+  text-align: center;
+}
+revogr-header .rgHeaderCell.align-left {
+  text-align: left;
+}
+revogr-header .rgHeaderCell.align-right {
+  text-align: right;
+}
+revogr-header .rgHeaderCell.sortable {
+  cursor: pointer;
+}
+revogr-header .rgHeaderCell i.asc:after, revogr-header .rgHeaderCell i.desc:after {
+  font-size: 13px;
+}
+revogr-header .rgHeaderCell i.asc:after {
+  content: "↑";
+}
+revogr-header .rgHeaderCell i.desc:after {
+  content: "↓";
+}
+revogr-header .rgHeaderCell.active {
+  z-index: 10;
+}
+revogr-header .rgHeaderCell.active .resizable {
+  background-color: deepskyblue;
+}
+revogr-header .rgHeaderCell .header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+revogr-header .rgHeaderCell .resizable {
+  display: block;
+  position: absolute;
+  z-index: 90;
+  touch-action: none;
+  user-select: none;
+}
+revogr-header .rgHeaderCell .resizable:not(.resizable-r):not(.resizable-l):hover {
+  background-color: deepskyblue;
+}
+revogr-header .rgHeaderCell > .resizable-r {
+  cursor: col-resize;
+  width: 14px;
+  right: -7px;
+  top: 0;
+  height: 100%;
+  background-color: transparent !important;
+}
+revogr-header .rgHeaderCell > .resizable-r::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  width: 2px;
+  min-width: 2px;
+  max-width: 2px;
+  height: 100%;
+  background-color: transparent;
+  z-index: 100;
+}
+revogr-header .rgHeaderCell > .resizable-rb {
+  cursor: se-resize;
+  width: 6px;
+  height: 6px;
+  right: 0;
+  bottom: 0;
+}
+revogr-header .rgHeaderCell > .resizable-b {
+  cursor: s-resize;
+  height: 6px;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+}
+revogr-header .rgHeaderCell > .resizable-lb {
+  cursor: sw-resize;
+  width: 6px;
+  height: 6px;
+  left: 0;
+  bottom: 0;
+}
+revogr-header .rgHeaderCell > .resizable-l {
+  cursor: col-resize;
+  width: 14px;
+  left: -7px;
+  height: 100%;
+  top: 0;
+  background-color: transparent !important;
+}
+revogr-header .rgHeaderCell > .resizable-l::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background-color: transparent;
+  z-index: 100;
+}
+revogr-header .rgHeaderCell > .resizable-lt {
+  cursor: nw-resize;
+  width: 6px;
+  height: 6px;
+  left: 0;
+  top: 0;
+}
+revogr-header .rgHeaderCell > .resizable-t {
+  cursor: n-resize;
+  height: 6px;
+  top: 0;
+  width: 100%;
+  left: 0;
+}
+revogr-header .rgHeaderCell > .resizable-rt {
+  cursor: ne-resize;
+  width: 6px;
+  height: 6px;
+  right: 0;
+  top: 0;
+}
+revogr-header .rv-filter {
+  visibility: hidden;
+}

package/dist/collection/components/header/revogr-header-unified-style.css

@@ -0,0 +1,205 @@
+@charset "UTF-8";
+revogr-header-unified {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  pointer-events: none;
+  background: transparent;
+}
+revogr-header-unified .header-area {
+  position: relative;
+  display: block;
+  pointer-events: auto;
+  background: var(--revo-grid-header-bg, #f8f9fa);
+  z-index: 5;
+  box-shadow: -1px 0 0 0 var(--revo-grid-header-border), -1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border);
+}
+revogr-header-unified .header-area .group-rgRow,
+revogr-header-unified .header-area .header-rgRow {
+  display: block;
+  position: relative;
+}
+revogr-header-unified .header-area .group-rgRow {
+  z-index: 2;
+  overflow: visible;
+}
+revogr-header-unified .header-area .group-rgRow .rgHeaderCell.merged-header {
+  z-index: 5;
+  top: 0;
+  align-items: center;
+}
+revogr-header-unified .header-area .group-rgRow.header-rgRow.group {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revogr-header-unified .header-area .header-rgRow.group {
+  z-index: 0;
+}
+revogr-header-unified .header-area .header-rgRow:not(.group) {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revogr-header-unified .header-area .header-rgRow.actual-rgRow {
+  z-index: 1;
+}
+revogr-header-unified .header-area .rgHeaderCell {
+  position: absolute;
+  box-sizing: border-box;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  user-select: text;
+}
+revogr-header-unified .header-area .rgHeaderCell:has(.resizable-r:hover), revogr-header-unified .header-area .rgHeaderCell:has(.resizable-l:hover) {
+  z-index: 92;
+}
+revogr-header-unified .header-area .rgHeaderCell.group-header {
+  text-align: center;
+}
+revogr-header-unified .header-area .rgHeaderCell.align-center {
+  text-align: center;
+}
+revogr-header-unified .header-area .rgHeaderCell.align-left {
+  text-align: left;
+}
+revogr-header-unified .header-area .rgHeaderCell.align-right {
+  text-align: right;
+}
+revogr-header-unified .header-area .rgHeaderCell.sortable {
+  cursor: pointer;
+}
+revogr-header-unified .header-area .rgHeaderCell i.asc:after, revogr-header-unified .header-area .rgHeaderCell i.desc:after {
+  font-size: 13px;
+}
+revogr-header-unified .header-area .rgHeaderCell i.asc:after {
+  content: "↑";
+}
+revogr-header-unified .header-area .rgHeaderCell i.desc:after {
+  content: "↓";
+}
+revogr-header-unified .header-area .rgHeaderCell.active {
+  z-index: 10;
+}
+revogr-header-unified .header-area .rgHeaderCell.active .resizable {
+  background-color: deepskyblue;
+}
+revogr-header-unified .header-area .rgHeaderCell .header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+revogr-header-unified .header-area .rgHeaderCell .resizable {
+  display: block;
+  position: absolute;
+  z-index: 90;
+  touch-action: none;
+  user-select: none;
+  pointer-events: auto;
+}
+revogr-header-unified .header-area .rgHeaderCell .resizable:not(.resizable-r):not(.resizable-l):hover {
+  background-color: deepskyblue;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-r {
+  cursor: col-resize;
+  width: 14px;
+  right: -7px;
+  top: 0;
+  height: 100%;
+  background-color: transparent !important;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-r::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  width: 2px;
+  min-width: 2px;
+  max-width: 2px;
+  height: 100%;
+  background-color: transparent;
+  z-index: 100;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-l {
+  cursor: col-resize;
+  width: 14px;
+  left: -7px;
+  height: 100%;
+  top: 0;
+  background-color: transparent !important;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-l::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background-color: transparent;
+  z-index: 100;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-rb {
+  cursor: se-resize;
+  width: 6px;
+  height: 6px;
+  right: 0;
+  bottom: 0;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-b {
+  cursor: s-resize;
+  height: 6px;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-lb {
+  cursor: sw-resize;
+  width: 6px;
+  height: 6px;
+  left: 0;
+  bottom: 0;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-lt {
+  cursor: nw-resize;
+  width: 6px;
+  height: 6px;
+  left: 0;
+  top: 0;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-t {
+  cursor: n-resize;
+  height: 6px;
+  top: 0;
+  width: 100%;
+  left: 0;
+}
+revogr-header-unified .header-area .rgHeaderCell > .resizable-rt {
+  cursor: ne-resize;
+  width: 6px;
+  height: 6px;
+  right: 0;
+  top: 0;
+}
+revogr-header-unified .header-area .rv-filter {
+  visibility: hidden;
+}
+revogr-header-unified .header-area-colPinStart {
+  flex: 0 0 auto;
+  z-index: 13;
+}
+revogr-header-unified .header-area-rgCol {
+  flex: 0 1 auto;
+  min-width: 0;
+  z-index: 12;
+  overflow-x: hidden;
+  overflow-y: visible;
+}
+revogr-header-unified .header-area-colPinEnd {
+  flex: 0 0 auto;
+  z-index: 13;
+}