@ninebone/table 0.0.1

package/dist/css/nxPanel.css

@@ -0,0 +1,129 @@
+:host(nx-panel) {
+	font-size: var(--font-size);
+	font-family: var(--font-family);
+	color: var(--color);
+
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	min-height: 0;
+	overflow: hidden;
+	flex: 1 1 0;
+
+	*, *::before, *::after {
+		box-sizing: border-box;
+	}
+
+	.head::before {
+		content: '';
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background-repeat: no-repeat;
+		background-color: green; /* 구의 기본 색상 */
+	}
+
+	.head.hide {
+		display: none;
+	}
+
+	.head {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 0 4px;
+		width: 100%;
+
+		.caption {
+			display: flex;
+			margin-left: 4px;
+
+			span {
+				font-weight: bold;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.body {
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		width: 100%;
+		height: 100%;
+		padding: 8px;
+
+
+	}
+
+	input {
+		color: var(--input-color);
+		background-color: 1px solid var(--input-background-color);
+		border: 1px solid var(--input-border-color);
+		outline: none;
+		padding: var(--input-padding);
+		border-radius: 2px;
+		font-size: var(--input-font-size);
+	}
+
+	input:hover {
+		border: 1px solid var(--input-hover-border-color);
+	}
+
+	input:focus {
+		border: 1px solid var(--input-focus-border-color);
+	}
+
+	nx-layout2 {
+		display: grid;
+		--flex-direction: column;
+		width: 100%;
+		text-align: left;
+		gap: 8px;
+		height: 100%;
+		/* 너비 초과 방지 핵심 */
+		min-width: 0;
+		overflow: hidden;
+
+		grid-template-rows: var(--rows-template, repeat(auto-fill, minmax(32px, 1fr)));
+
+		label {
+			--margin: 0 8px 0 16px;
+			gap: 8px;
+		}
+
+		input[type="text"] {
+			width: 100%;
+		}
+
+		.row {
+			display: flex;
+			--flex: 1 1 0;
+			width: 100%;
+			gap: 8px;
+			overflow: hidden;
+			--height: 32px;
+		}
+
+		.row > * {
+			display: flex;
+			flex: 1 1 0;
+			align-items: center;
+		}
+
+		.row * {
+			min-width: 0;
+			overflow: hidden;
+			--white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+}
+
+:host(nx-panel.theme-1) {
+	.body {
+		border: none;
+	}
+}

package/dist/css/nxSideMenu.css

@@ -0,0 +1,62 @@
+:host {
+	opacity: 0.95;
+	width: unset;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	display: block;
+	z-index: 1002;
+	color: #fff;
+	font-weight: 200;
+	background: #181A31;
+	--background: #333;
+	-webkit-box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
+	-moz-box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
+	box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
+	overflow: hidden;
+	width: var(--min-width);
+	--transition: all .3s;
+	transition: width 0.2s ease-in-out;
+}
+
+:host(.collapse) {
+	width: var(--min-width);
+}
+:host(:not(.collapse)) {
+	width: var(--max-width);
+}
+:host(.collapse:hover)  {
+	width: var(--max-width);
+	--animation: bounce 0.5s ease-in-out 1;
+}
+
+
+@keyframes bounce {
+	0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
+	40% { transform: translateX(-10px); }
+	60% { left: -10px; transform: translateX(10px); }
+}
+
+:host(.collapse) {
+	--width: var(--min-width);
+}
+
+:host(:not(.collapse)) {
+	width: var(--max-width);
+}
+
+:host .body {
+	display: flex;
+	align-items: flex-start;
+	--align-items: center; /* 수직 중앙 정렬 */
+	margin-top: 32px; /* 여백 추가 */
+}
+
+::slotted([slot="body-content"]) {
+	width: 100%;
+	padding: 0;
+}
+
+
+

package/dist/css/nxSideMenuBody.css

@@ -0,0 +1,8 @@
+:host {
+	display: flex;
+	--align-items: flex-start;
+	align-items: center; /* 수직 중앙 정렬 */
+	padding: 10px; /* 여백 추가 */
+	height: 40px;
+	justify-content: center;
+}

package/dist/css/nxSideMenuFoot.css

@@ -0,0 +1,78 @@
+:host {
+	display: flex;
+	--align-items: flex-start;
+	align-items: center; /* 수직 중앙 정렬 */
+	padding: 10px; /* 여백 추가 */
+	height: 40px;
+}
+
+:host(.collapse) .logo-box { justify-content: center; }
+:host(.collapse:hover) .logo-box, .logo-box { justify-content: space-between; }
+
+.logo-box
+{
+	color: #f0f0f0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: center;
+	width: 100%;
+}
+
+:host(.collapse) .logo-box {
+	width: 0;
+	transition: width 0.5s ease-out;
+}
+:host(.collapse:hover) .logo-box {
+	width: 100%;
+}
+
+.icon-box {
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+}
+
+.icon {
+	fill: var(--icon-color); /* 아이콘 색상 */
+	cursor: pointer;
+	transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
+}
+
+.icon-box svg {
+	display: none;
+	opacity: 0;
+	transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
+}
+
+:host(.collapse) .icon:first-child {
+	display: block;
+	opacity: 1;
+}
+
+:host(:not(.collapse)) .icon:first-child {
+	display: none;
+	opacity: 0;
+}
+
+:host(:not(.collapse)) .icon:nth-child(2) {
+	display: block;
+	opacity: 1;
+}
+
+:host(:not(.collapse)) .icon:nth-child(3) {
+	display: none;
+	opacity: 0;
+}
+
+:host(:not(.collapse)) .icon-box:hover .icon:nth-child(2) {
+	display: none;
+}
+
+:host(:not(.collapse)) .icon-box:hover .icon:nth-child(3) {
+	display: block;
+	opacity: 1;
+}
+
+
+

package/dist/css/nxSideMenuHead.css

@@ -0,0 +1,82 @@
+:host {
+	display: flex;
+	--align-items: flex-start;
+	align-items: center; /* 수직 중앙 정렬 */
+	padding: 10px; /* 여백 추가 */
+	height: 40px;
+	justify-content: center;
+	--border: 2px solid red;
+}
+
+/**
+:host(.collapse) .logo-box { justify-content: center; }
+:host(.collapse:hover) .logo-box, .logo-box { justify-content: space-between; }
+*/
+
+.logo-box
+{
+	color: #f0f0f0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: center;
+	width: 100%;
+}
+
+:host(.collapse) .logo-box {
+	width: 0;
+	transition: width 0.5s ease-out;
+}
+:host(:not(.collapse)) .logo-box, :host(.hover) .logo-box {
+	width: 100%;
+}
+
+.icon-box {
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+}
+
+.icon {
+	fill: var(--icon-color); /* 아이콘 색상 */
+	cursor: pointer;
+	transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
+}
+
+.icon-box svg {
+	display: none;
+	opacity: 0;
+	transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
+}
+
+:host(.collapse) .icon:first-child {
+	display: block;
+	opacity: 1;
+}
+
+:host(:not(.collapse)) .icon:first-child {
+	display: none;
+	opacity: 0;
+}
+
+:host(:not(.collapse)) .icon:nth-child(2) {
+	display: block;
+	opacity: 1;
+}
+
+:host(:not(.collapse)) .icon:nth-child(3) {
+	display: none;
+	opacity: 0;
+}
+
+:host(:not(.collapse)) .icon-box:hover .icon:nth-child(2) {
+	display: none;
+}
+
+:host(:not(.collapse)) .icon-box:hover .icon:nth-child(3) {
+	display: block;
+	opacity: 1;
+}
+
+
+

package/dist/css/nxSideMenuItem.css

@@ -0,0 +1,203 @@
+:host {
+	padding: 0;
+	margin: 0;
+	position: relative;
+	display: flex;
+	align-items: unset;
+	--background-color: #333;
+	background-color: unset;
+	cursor: pointer;
+	transition: opacity 0.5s ease-out, height 0.5s ease-out;
+}
+:host(.group) {
+	height: 48px;
+}
+:host(:not(.group)) {
+	height: 32px;
+}
+
+:host(.active) {
+	--background-color: #999;
+	color: #9FF2FF;
+}
+
+:host(.collapse:not(.group):not(.hover)) {
+	opacity: 0;
+	height: 0;
+}
+
+:host(:hover) {
+	filter: brightness(90%);
+}
+
+
+
+.menubar {
+	display: inline-block;
+	--padding-left: 16px;
+	--margin-left: 16px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	transition: height 0.5s ease-out, padding 0.5s ease-out;
+	text-align: left;
+	--width: calc(100% - 36px);
+	--margin: 0;
+}
+:host(.group) .menubar {
+	font-weight: 700;
+}
+:host(:not(.group)) .menubar {
+	font-weight: 400;
+}
+:host(.collapse:not(.hover)) .menubar {
+	transition: width 0.5s ease-out, padding-left 0.5s ease-out;
+	width: 0;
+	padding-left: unset;
+}
+
+li {
+	display: flex;
+	align-items: center;
+	padding: 0;
+	margin: 0;
+	position: relative;
+	color: unset;
+	font-weight: bold;
+	width: calc(100% + 36px);
+}
+
+:host(.collapse:not(.hover)) li {
+	justify-content: center;
+}
+
+
+:host(.group) li {
+	list-style-type: none;
+}
+:host(:not(.group)) li {
+	list-style-type: unset;
+}
+:host(:not(.group)) li::before {
+	content: '•';
+	margin-right: 8px;
+	margin-left: 16px;
+}
+
+
+
+.icon {
+	position: relative;
+	left: 0;
+	--top: 50%;
+	--transform: translateY(-50%);
+	width: 16px;
+	height: 16px;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
+	--margin-right: 16px;
+	transition: width 0.5s ease-out, height 0.5s ease-out;
+}
+:host(.collapse:not(.hover)) .icon {
+	width: 20px;
+	height: 20px;
+}
+:host(.collapse:not(.hover)) .menubar,
+:host(.collapse:not(.hover)) .expand-icon {
+	display: none;
+}
+.icon-home {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgray" viewBox="0 0 16 16"><path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5"/></svg>');
+}
+
+.icon-base {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M0 .5A.5.5 0 0 1 .5 0h15a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H14v2h1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H14v2h1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5H2v-2H.5a.5.5 0 0 1-.5-.5v-3A.5.5 0 0 1 .5 6H2V4H.5a.5.5 0 0 1-.5-.5zM3 4v2h4.5V4zm5.5 0v2H13V4zM3 10v2h4.5v-2zm5.5 0v2H13v-2zM1 1v2h3.5V1zm4.5 0v2h5V1zm6 0v2H15V1zM1 7v2h3.5V7zm4.5 0v2h5V7zm6 0v2H15V7zM1 13v2h3.5v-2zm4.5 0v2h5v-2zm6 0v2H15v-2z"/></svg>');
+}
+
+.menubar {
+	margin-left: 8px;
+}
+
+
+.expand-icon {
+	width: 8px;
+	height: 8px;
+	--border-left: 4px solid transparent;
+	--border-right: 4px solid transparent;
+	--border-top: 4px solid #ccc;
+	position: absolute;
+	right: 16px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: auto;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="white" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
+	animation: rotate-out 0.3s ease-in-out forwards;
+}
+:host(:not(.expand)) .expand-icon {
+	transform: rotate(180deg);
+	animation: rotate-in 0.3s ease-in-out forwards;
+}
+@keyframes rotate-in {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(180deg);
+	}
+}
+@keyframes rotate-out {
+	from {
+		transform: rotate(180deg);
+	}
+	to {
+		transform: rotate(0deg);
+	}
+}
+
+:host(.collapse:not(.hover)) .expand-icon {
+	display: none;
+}
+:host(:not(.group)) .expand-icon {
+	display: none;
+}
+
+a {
+	color: #999; /* 금색 */
+	text-decoration: none; /* 밑줄 제거 */
+}
+
+a:hover {
+	color: #ccc; /* 주황색 */
+	text-decoration: underline; /* 호버 시 밑줄 추가 */
+}
+
+:host(:not(.group)) {
+	.icon {
+		display: none;
+	}
+}
+
+:host {
+	.icon {
+		margin-left: 8px;
+	}
+}
+:host(.collapse:not(.hover)) {
+	.icon {
+		margin-left: 4px;
+	}
+}
+
+:host {
+	--overflow: hidden;
+	max-height: 64px; /* 기본 높이 */
+	opacity: 1;
+	transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+:host(.hide) {
+	--display: none;
+	max-height: 0;
+	opacity: 0;
+	padding: 0;
+}

package/dist/css/nxSplitter.css

@@ -0,0 +1,63 @@
+:host(.h) {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	--border: 1px solid red;
+	--width: 8px;
+
+	div.inner-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+	}
+}
+
+
+div.grip-h {
+	cursor: col-resize;
+	display: flex;
+	height: 100%;
+	width: 8px;
+	--border: 1px solid red;
+	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='15'><circle cx='10' cy='3' r='1.5' fill='%23999'/><circle cx='10' cy='8' r='1.5' fill='%23999'/><circle cx='10' cy='13' r='1.5' fill='%23999'/></svg>");
+	background-repeat: no-repeat;
+	background-position: center;
+	filter: drop-shadow(0 0 0.5px #666);
+	transition: filter 0.2s ease;
+}
+div.grip-h:hover {
+	filter: drop-shadow(0 0 1px #333);
+}
+
+:host(.v) {
+	display: flex;
+	flex-direction: row;
+	--justify-content: center;
+	--border: 1px solid red;
+	height: 8px;
+
+	div.inner-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+}
+
+div.grip-v {
+	cursor: row-resize;
+	display: flex;
+	width: 100%;
+	height: 8px;
+	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='20'><circle cx='3' cy='10' r='1.5' fill='%23999'/><circle cx='8' cy='10' r='1.5' fill='%23999'/><circle cx='13' cy='10' r='1.5' fill='%23999'/></svg>");
+	background-repeat: no-repeat;
+	background-position: center;
+	filter: drop-shadow(0 0 0.5px #666);
+	transition: filter 0.2s ease;
+}
+div.grip-v:hover {
+	filter: drop-shadow(0 0 1px #333);
+}