@ninebone/table 0.1.32 → 0.1.34

package/dist/css/nxTab.css

@@ -1,193 +0,0 @@
-:host {
-	position: relative;
-}
-:host(nx-tab.theme-1) {
-	.tabs {
-		--border-bottom: 1px solid #eee;
-		gap: 3px;
-	}
-	.tab-button {
-		color: #666;
-		font-weight: 500;
-		transform: translateY(1px);
-		z-index: 1;
-		--border-bottom: 1px solid #ccc;
-	}
-	.tab-button.active {
-		color: #666;
-		font-weight: 700;
-		border-bottom: 1px solid white;
-	}
-	.tab-pages {
-		border: 1px solid #ccc;
-	}
-}
-
-:host(.theme-2) {
-	.tabs {
-		border-bottom: 1px solid #eee;
-		gap: 40px;
-	}
-	.tab-button {
-		color: #666;
-		font-weight: 500;
-		border: none;
-	}
-	.tab-button.active {
-		color: green;
-		font-weight: 700;
-		border-bottom: 3px solid green;
-	}
-}
-
-:host(.theme-3) {
-	.tabs {
-		border-bottom: 1px solid #eee;
-		gap: 16px;
-		button {
-			display: block;
-		}
-	}
-	.tab-button {
-		color: #666;
-		font-weight: 500;
-		border: none;
-		padding: 4px;
-		font-size: 12px;
-	}
-	.tab-button.active {
-		color: green;
-		font-weight: 700;
-		border-bottom: 3px solid green;
-	}
-	.tab-pages {
-		border-bottom: 1px solid #f0f0f0;
-		height: 100%;
-	}
-	.tab-page {
-		padding: 4px 16px;
-		font-size: 12px;
-		display: flex;
-		justify-content: center;
-		align-items: stretch;
-		button.search {
-			margin-top: -4px;
-			margin-bottom: -4px;
-			margin-right: -16px;
-			cursor: pointer;
-		}
-	}
-}
-
-:host(.theme-4) {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	height: 100%;
-
-
-	.tabs {
-		border-bottom: 1px solid #eee;
-		gap: 16px;
-		button {
-			display: block;
-		}
-	}
-	.tab-button {
-		color: #666;
-		font-weight: 500;
-		border: none;
-		padding: 4px;
-		font-size: 12px;
-	}
-	.tab-button.active {
-		color: green;
-		font-weight: 700;
-		border-bottom: 3px solid green;
-	}
-	.tab-pages {
-		border-bottom: 1px solid #f0f0f0;
-		height: 100% !important;
-		div {
-			height: 100%;
-		}
-	}
-	.tab-page {
-		padding: 4px 0 0;
-		font-size: 12px;
-		display: flex;
-		justify-content: center;
-		align-items: stretch;
-		button.search {
-			margin-top: -4px;
-			margin-bottom: -4px;
-			margin-right: -16px;
-			cursor: pointer;
-		}
-	}
-}
-
-.tabs {
-	display: flex;
-	button {
-		display: none;
-		position: absolute;
-		--top: 2px;
-		right: 2px;
-		cursor: pointer;
-		width: 16px;
-		height: 16px;
-		border: none;
-		background-color: transparent;
-		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="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
-		animation: rotate-out 0.3s ease-in-out forwards;
-	}
-}
-.tab-button {
-	padding: 8px;
-	border: 1px solid #ccc;
-	text-align: center;
-	outline: 0;
-	cursor: pointer;
-	transition: all 0.3s ease;
-}
-.tab-button:hover {
-	filter: brightness(80%);
-	--background-color: #777;            /* 진한 배경으로 강조 */
-	--box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 입체감 glow */
-	transform: scale(1.05);            /* 약간 확대 */
-}
-.tab-pages {
-	position: relative;
-	width: 100%;
-	overflow: hidden;
-	transition: height 0.5s ease-in-out;
-	transform: translateY(-1px);
-}
-.tab-page {
-	position: absolute;
-	width: 100%;
-	top: 0;
-	transition: left 0.5s ease-in-out;
-	padding: 16px;
-	box-sizing: border-box;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	text-align: left;
-}
-.tab-page.active {
-	left: 0;
-}
-.tab-page.exit-left {
-	left: -100%;
-}
-.tab-page.exit-right {
-	left: 100%;
-}
-
-
-

package/dist/css/nxTitle.css

@@ -1,210 +0,0 @@
-:host(nx-title) {
-
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	height: 0;
-
-	.wrapper {
-		display: flex;
-
-		.title-wrapper {
-			background: darkcyan;
-			--opacity: 0.3;
-			height: 24px;
-			display: flex;
-			align-items: center;
-			--font-weight: 700;
-			padding: 0 32px 4px;
-			--background-color: #666;
-			border-top: none;
-			border-bottom-right-radius: 8px;
-			border-bottom-left-radius: 8px;
-			--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
-			--gap: 4px;
-			.title-icon {
-				display: none;
-				--width: 16px;
-				height: 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="16" height="16" fill="rgb(200,200,200)" class="bi bi-grid" viewBox="0 0 16 16"><path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/></svg>');
-			}
-			span {
-				padding-left: 8px;
-				padding-right: 8px;
-				color: white;
-				font-weight: 700;
-				font-size: 14px;
-			}
-
-			.bar1, .bar8 {
-				display: none;
-				width: 4px;
-				height: 4px;
-				border-radius: 50%;
-				background: green;
-			}
-			.bar2, .bar7 {
-				display: none;
-				width: 32px;
-				height: 1px;
-				background: green;
-			}
-		}
-	}
-
-	/* Breadcrumb CSS */
-	.breadcrumb-container {
-		position: absolute;
-		right: 4px;
-		margin-top: 2px;
-		padding: 0px 4px;
-		font-size: 10px;
-		color: #777;
-		display: flex; /* 가로 정렬 */
-		align-items: center;
-		justify-content: flex-end; /* 오른쪽 정렬 */
-		--border-left: 2px solid #666;
-		border-right: 2px solid #666;
-	}
-	.breadcrumb-item {
-		white-space: nowrap; /* 줄바꿈 방지 */
-	}
-	.breadcrumb-separator {
-		margin: 0 5px;
-		color: #bbb;
-	}
-	.breadcrumb-current {
-		--font-weight: bold;
-		color: #333;
-	}
-
-	/* Title CSS (아이콘 및 텍스트 스타일) */
-	.title-wrapper {
-		display: flex;
-		align-items: center;
-		padding-bottom: 2px;
-		--border-bottom: 2px solid #eee;
-		--margin-bottom: 15px;
-	}
-	.title-icon {
-		margin-right: 10px;
-		font-size: 20px;
-		color: #333;
-		/* Font Awesome 등 외부 아이콘 라이브러리를 사용하는 경우 */
-		/* font-family: 'Font Awesome 5 Free'; */
-		/* font-weight: 900; */
-		/* content: '054'; */
-	}
-	.title-text {
-		font-size: 18px;
-		font-weight: bold;
-		color: #333;
-	}
-
-	a {
-		color: #007bff; /* 파란색 계열로 링크임을 강조 */
-		text-decoration: none; /* 기본 밑줄 제거 */
-		transition: color 0.3s, background-color 0.3s; /* 호버 효과를 부드럽게 */
-	}
-	/* 마우스 오버 시 */
-	a:hover {
-		color: #0056b3; /* 기본색보다 어둡게 변경 */
-		text-decoration: underline; /* 밑줄을 다시 추가하여 클릭 유도 */
-	}
-
-	/* 클릭 중일 때 */
-	a:active {
-		color: #004085; /* 더 어둡게 변경 */
-	}
-
-	/* 방문한 링크 */
-	a:visited {
-		color: #007bff; /* 방문한 링크는 다른 색으로 변경 */
-	}
-}
-
-
-:host(nx-title.sub) {
-
-	.wrapper {
-		display: flex; /* 아이콘과 텍스트를 한 줄에 정렬 */
-		justify-content: space-between;
-		align-items: flex-end;
-		--padding: 10px 15px; /* 내부 여백 */
-		border-bottom: 2px solid #eee; /* 아래쪽 구분선 */
-		margin-bottom: 15px; /* 아래쪽 여백 */
-	}
-
-
-	/* Breadcrumb CSS */
-	.breadcrumb-container {
-		padding: 0 4px 0 0;
-		--background-color: #f5f5f5;
-		--border-bottom: 1px solid #eee;
-		font-size: 10px;
-		color: #777;
-		display: flex; /* 가로 정렬 */
-		align-items: center;
-		justify-content: flex-end; /* 오른쪽 정렬 */
-		--margin-bottom: 15px; /* 제목과의 간격 */
-	}
-	.breadcrumb-item {
-		white-space: nowrap; /* 줄바꿈 방지 */
-	}
-	.breadcrumb-separator {
-		margin: 0 5px;
-		color: #bbb;
-	}
-	.breadcrumb-current {
-		--font-weight: bold;
-		color: #333;
-	}
-
-	/* Title CSS (아이콘 및 텍스트 스타일) */
-	.title-wrapper {
-		display: flex;
-		align-items: center;
-		padding-bottom: 2px;
-		--border-bottom: 2px solid #eee;
-		--margin-bottom: 15px;
-	}
-	.title-icon {
-		margin-right: 10px;
-		font-size: 20px;
-		color: #333;
-		/* Font Awesome 등 외부 아이콘 라이브러리를 사용하는 경우 */
-		/* font-family: 'Font Awesome 5 Free'; */
-		/* font-weight: 900; */
-		/* content: '054'; */
-	}
-	.title-text {
-		font-size: 18px;
-		font-weight: bold;
-		color: #333;
-	}
-
-	a {
-		color: #007bff; /* 파란색 계열로 링크임을 강조 */
-		text-decoration: none; /* 기본 밑줄 제거 */
-		transition: color 0.3s, background-color 0.3s; /* 호버 효과를 부드럽게 */
-	}
-	/* 마우스 오버 시 */
-	a:hover {
-		color: #0056b3; /* 기본색보다 어둡게 변경 */
-		text-decoration: underline; /* 밑줄을 다시 추가하여 클릭 유도 */
-	}
-
-	/* 클릭 중일 때 */
-	a:active {
-		color: #004085; /* 더 어둡게 변경 */
-	}
-
-	/* 방문한 링크 */
-	a:visited {
-		color: #007bff; /* 방문한 링크는 다른 색으로 변경 */
-	}
-}
-

package/dist/css/nxTitle2.css

@@ -1,33 +0,0 @@
-:host(nx-title2) {
-
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	border-bottom: 1px solid #ccc;
-
-	.left {
-		display: flex;
-		padding: 0 8px;
-		border-bottom: 2px solid green;
-		margin-bottom: -1px;
-		font-weight: bold;
-		color: green;
-		font-size: 16px;
-	}
-
-	nx-buttons {
-		padding-bottom: 2px;
-		padding-right: 4px;
-	}
-}
-
-:host(nx-title2.changed) .left span::after {
-	content: '*';
-	color: red;
-	font-size: 12px;
-	font-weight: normal;
-	margin-left: 4px;
-}
-
-
-

package/dist/index.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <title>태그 라이브러리 테스트</title>
-
-
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <script src="../src/_back/etc/object-observe.js"></script>
-
-  <script type="module" src="../dist/bundle.cjs.js"></script>
-
-  <script>
-    //ninegrid.cssPath = "/src/css";
-    //console.log(ninegrid);
-  </script>
-</head>
-<body>
-  <nine-table display-row-count="3" row-resizable="true" col-movable="true" css-path="/src/css">
- <table>
-  <colgroup>
-   <col width="40" fixed="left">
-   <col width="100" fixed="left">
-   <col width="100">
-   <col width="100">
-   <col width="200">
-   <col width="100">
-   <col width="100">
-   <col width="100">
-  </colgroup>
-  <thead>
-   <tr>
-    <th>No.</th>
-    <th><nx-i18n><datalist><option locale="ko" label="이름"></option><option locale="en" label="Name"></option></datalist></nx-i18n></th>
-    <th><nx-i18n><datalist><option locale="ko" label="성별"></option><option locale="en" label="Gender"></option></datalist></nx-i18n></th>
-    <th><nx-i18n><datalist><option locale="ko" label="나이"></option><option locale="en" label="Age"></option></datalist></nx-i18n></th>
-    <th><nx-i18n><datalist><option locale="ko" label="연락처"></option><option locale="en" label="Contact"></option></datalist></nx-i18n></th>
-    <th><nx-i18n><datalist><option locale="ko" label="국어"></option><option locale="en" label="Korean"></option></datalist></nx-i18n></th>
-    <th><nx-i18n><datalist><option locale="ko" label="수학"></option><option locale="en" label="Math"></option></datalist></nx-i18n></th>
-    <th><nx-i18n><datalist><option locale="ko" label="영어"></option><option locale="en" label="English"></option></datalist></nx-i18n></th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <th data-bind="rowState" data-expr="data.__ng._[ninegrid.ROW.ORDER]" text-align="center">
-     <ng-row-indicator has-icon-pin="true" has-icon-detail="true" class="ng-left"></ng-row-indicator>
-    </th>
-    <td data-bind="NAME"></td>
-    <td data-bind="SEX" text-align="center"></td>
-    <td data-bind="AGE" text-align="right"></td>
-    <td data-bind="TEL"></td>
-    <td data-bind="REC1" text-align="right"></td>
-    <td data-bind="REC2" text-align="right"></td>
-    <td data-bind="REC3" text-align="right"></td>
-   </tr>
-  </tbody>
- </table>
-</nine-table>
-</body>
-</html>