gridjs-spreadsheet 25.7.0 → 25.9.0

package/xspreadsheet.css

@@ -2112,12 +2112,26 @@ dialog p {
 .x-spreadsheet-contextmenu-submenu {
   position: absolute;
   display: none;
-  padding: 5px 0;
   background: #fff;
   border: 1px solid #e0e2e4;
   box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
   z-index: 101;
-  width: 260px;
+  width: max-content;
+}
+.x-spreadsheet-custom-button {
+  border: 1px solid #ddd;
+  background-color: white;
+  color: #333;
+  padding: 4px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background-color 0.2s ease;
+  outline: none;
+}
+.x-spreadsheet-custom-button:hover {
+  background-color: #e9ecef;
+  border-color: #ccc;
 }
 .x-spreadsheet-item.parent .label {
   float: right;
@@ -2125,4 +2139,141 @@ dialog p {
   color: #999;
   line-height: inherit;
 }
+.x-spreadsheet-alignment-page {
+  display: flex;
+  padding: 15px;
+  gap: 25px;
+  height: 100%;
+}
+.x-spreadsheet-alignment-page .left-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex: 1;
+}
+.x-spreadsheet-alignment-page .right-section {
+  flex: 0 0 160px;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-section-container {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e0e2e4;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-section-container:last-child {
+  border-bottom: none;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-dropdown {
+  width: 100%;
+  align-items: center;
+  flex-direction: row;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-dropdown label {
+  flex: 0 0 80px;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-dropdown select {
+  flex: 1;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-checkbox {
+  margin-top: 5px;
+}
+.x-spreadsheet-orientation-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  min-width: unset;
+}
+.x-spreadsheet-orientation-box-container {
+  display: flex;
+  height: 200px;
+  align-items: stretch;
+}
+.x-spreadsheet-orientation-box {
+  width: 150px;
+  height: 200px;
+  border: 1px solid #999;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+}
+.x-spreadsheet-orientation-pointer {
+  width: 100%;
+  position: absolute;
+  top: 45%;
+  left: calc(10px + 5%);
+  transform-origin: 0 50%;
+  display: flex;
+  align-items: center;
+}
+.x-spreadsheet-orientation-pointer .degree-text {
+  color: #333;
+  padding-right: 5px;
+}
+.x-spreadsheet-orientation-line {
+  width: 35%;
+  height: 2px;
+  background-color: red;
+  margin-left: 2px;
+}
+.x-spreadsheet-orientation-line::after {
+  content: '';
+  position: absolute;
+  right: 58%;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  width: 8px;
+  height: 8px;
+  background-color: red;
+}
+.x-spreadsheet-orientation-v-btn {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 5px;
+  margin-right: 10px;
+  border: 1px solid #999;
+  cursor: pointer;
+  background-color: #fff;
+  width: 30px;
+  box-sizing: border-box;
+}
+.x-spreadsheet-orientation-v-btn span {
+  display: block;
+  line-height: 1.2;
+}
+.x-spreadsheet-orientation-v-btn.active {
+  background-color: #000;
+  border-color: #000;
+  color: #fff;
+}
+.x-spreadsheet-orientation-input-container {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+.x-spreadsheet-orientation-input-container .x-spreadsheet-modal-component-input-div {
+  width: 60px;
+}
+.x-spreadsheet-orientation-input-container .x-spreadsheet-modal-component-input-div input {
+  text-align: right;
+}
+.x-spreadsheet-orientation-input-container span {
+  margin-left: 5px;
+}
+.x-spreadsheet-orientation-point {
+  position: absolute;
+  background-color: black;
+}
+.x-spreadsheet-orientation-point.minor {
+  width: 4px;
+  height: 4px;
+  transform: translate(-50%, -50%);
+}
+.x-spreadsheet-orientation-point:not(.minor) {
+  width: 8px;
+  height: 8px;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.x-spreadsheet-orientation-point.active {
+  background-color: red;
+}