@ninebone/table 0.0.1

package/dist/css/nxDialog.css

@@ -0,0 +1,606 @@
+dialog::backdrop {
+	background: rgba(0, 0, 0, 0.3);
+}
+
+dialog:modal {
+	width: calc(100% - 50px);
+	height: calc(100% - 50px);
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+	overflow: hidden;
+	border: 1px solid darkgreen;
+	outline: none;
+	resize: both;
+	box-shadow: 0 0 4px 0 darkgreen;
+}
+
+div.head .rect1, div.head .rect2, div.head .rect3 {
+	display: none;
+	width: 50px;
+	height: 100%;
+}
+div.head .rect1 {
+	background-color: red;
+}
+div.head .rect2 {
+	background-color: darkgreen;
+}
+div.head .rect3 {
+	background-color: olive;
+}
+
+div.head {
+	display: flex;
+	align-items: center;
+	--height: 30px;
+	background-color: darkgreen;
+	padding: 4px;
+	cursor: move;
+}
+div.head:hover {
+	filter: brightness(110%);
+}
+
+div.head span {
+	font-size: 12px;
+	position: relative;
+}
+
+div.head span.title {
+	color: #ddd;
+	margin-left: 4px;
+	font-weight: bold;
+}
+
+div.head span.sub-title {
+	color: #ccc;
+	margin-left: 8px;
+	font-style: italic;
+}
+
+div.head form {
+	margin: 0;
+}
+div.head button {
+	margin-right: 4px;
+	background-color: transparent;
+	border: none;
+	color: #ccc;
+	font-size: x-small;
+}
+div.head button:hover {
+	cursor: pointer;
+}
+
+div.contents {
+	display: flex;
+	width: 100%;
+	height: 100%;
+}
+div.left {
+	position: relative;
+	width: 16px;
+	height: 100%;
+	background-color: #ddd;
+	display: none;
+}
+
+div.left span {
+	writing-mode: vertical-rl;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	color: #ccc;
+	font-weight: 700;
+	width: 100%;
+	height: 100%;
+	margin-left: 3px;
+	margin-top: 3px;
+}
+div.close2 {
+	display: none;
+	position: absolute;
+	right: 0;
+	top: 3px;
+	cursor: pointer;
+	color: #666;
+}
+div.close2 svg:hover {
+	color: #999;
+}
+
+div.body {
+	display: flex;
+	width: 100%;
+	height: unset;
+	--border: 3px solid #999;
+	--border-top: none;
+	overflow-x: hidden;
+	overflow-y: auto;
+	padding: 16px;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+
+
+
+ng-sphere.icon {
+	margin-left: 8px;
+}
+
+buttons {
+	display: flex;
+	position: absolute;
+	right: 4px;
+}
+
+ng-sphere {
+	display: flex;
+	position: relative;
+	--width: 16px;
+	--height: 16px;
+	cursor: pointer;
+	margin-right: 4px;
+}
+ng-sphere:hover {
+	filter: brightness(90%);
+}
+ng-sphere:active {
+	filter: brightness(80%);
+}
+
+ng-sphere:hover::after {
+	content: "";
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+ng-sphere.apply:hover::after {
+	background-size: 14px 14px;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><polyline points="2.5,7 6,10 11,3" style="fill:none;stroke:white;stroke-width:2px;" /></svg>');
+}
+
+ng-sphere.reset:hover::after {
+	background-size: 12px 12px;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill:none;stroke:white;stroke-width:2px;" focusable="false" aria-hidden="true"><path d="M10 5h5V0"></path><path d="M15 8a6.957 6.957 0 0 1-7 7 6.957 6.957 0 0 1-7-7 6.957 6.957 0 0 1 7-7 6.87 6.87 0 0 1 6.3 4"></path></svg>');
+}
+
+ng-sphere.close:hover::after {
+	background-size: 12px 12px;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:white;stroke-width:2px;" focusable="false" aria-hidden="true" viewBox="0 0 16 16"><path d="M2 2l12 12M14 2L2 14"></path></svg>');
+}
+
+:host(.run) {
+	dialog {
+		transform:translateX(-1500px);
+		animation: runIn .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		transform:translateX(-1500px);
+		animation: runOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes runIn {
+	0% {
+		transform:translateX(-1500px) skewX(30deg) scaleX(1.3);
+	}
+	70% {
+		transform:translateX(30px) skewX(0deg) scaleX(.9);
+	}
+	100% {
+		transform:translateX(0px) skewX(0deg) scaleX(1);
+	}
+}
+@keyframes runOut {
+	0% {
+		transform:translateX(0px) skewX(0deg) scaleX(1);
+	}
+	30% {
+		transform:translateX(-30px) skewX(-5deg) scaleX(.9);
+	}
+	100% {
+		transform:translateX(1500px) skewX(30deg) scaleX(1.3);
+	}
+}
+
+:host(.reverseRun) {
+	dialog {
+		transform:translateX(-1500px);
+		animation: reverseRunIn .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		transform:translateX(-1500px);
+		animation: reverseRunOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes reverseRunIn {
+	0% {
+		transform:translateX(1500px) skewX(-30deg) scaleX(1.3);
+	}
+	70% {
+		transform:translateX(-40px) skewX(0deg) scaleX(.9);
+	}
+	100% {
+		transform:translateX(0px) skewX(0deg) scaleX(1);
+	}
+}
+@keyframes reverseRunOut {
+	0% {
+		transform:translateX(0px) skewX(0deg) scaleX(1);
+	}
+	30% {
+		transform:translateX(30px) skewX(5deg) scaleX(.9);
+	}
+	100% {
+		transform:translateX(-1500px) skewX(-30deg) scaleX(1.3);
+	}
+}
+
+
+:host(.moveUp) {
+	dialog {
+		animation: moveUpIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: moveUpOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes moveUpIn {
+	0% {
+		transform:scale(.5) translateY(1000px);
+		opacity:0;
+	}
+	100% {
+		transform:scale(1) translateY(0px);
+		opacity:1;
+	}
+}
+@keyframes moveUpOut {
+	0% {
+		transform:scale(1) translateY(0px);
+		opacity:1;
+	}
+	100% {
+		transform:scale(.5) translateY(1000px);
+		opacity:0;
+	}
+}
+
+:host(.moveDown) {
+	dialog {
+		animation: moveDownIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: moveDownOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes moveDownIn {
+	0% {
+		transform:scale(.8) translateY(-1000px);
+		opacity:0;
+	}
+	100% {
+		transform:scale(1) translateY(0px);
+		opacity:1;
+	}
+}
+@keyframes moveDownOut {
+	0% {
+		transform:scale(1) translateY(0px);
+		opacity:1;
+	}
+	100% {
+		transform:scale(.8) translateY(-1000px);
+		opacity:0;
+	}
+}
+
+
+:host(.zoom) {
+	dialog {
+		animation: zoomIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: zoomOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes zoomIn {
+	0% {
+		transform:scale(0);
+	}
+	100% {
+		transform:scale(1);
+	}
+}
+
+@keyframes zoomOut {
+	0% {
+		transform:scale(1);
+	}
+	100% {
+		transform:scale(0);
+	}
+}
+
+:host(.fade) {
+	dialog {
+		animation: fadeIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: fadeOut 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes fadeOut {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+:host(.shake) {
+	dialog {
+		animation: shake 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: runOut 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes shake {
+	0%, 100% { transform: translate(0, 0); opacity: 1; }
+	10%, 30%, 50%, 70%, 90% { transform: translate(-3px, -3px); opacity: 0.8; }
+	20%, 40%, 60%, 80% { transform: translate(3px, 3px); opacity: 0.8; }
+}
+
+
+
+/**
+:host(.unfold) {
+	dialog {
+		transform:translateX(-1500px);
+		animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		transform:translateX(-1500px);
+		animation:unfoldOut 1s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}*/
+
+
+@keyframes unfoldIn {
+	0% {
+		transform:scaleY(.005) scaleX(0);
+	}
+	50% {
+		transform:scaleY(.005) scaleX(1);
+	}
+	100% {
+		transform:scaleY(1) scaleX(1);
+	}
+}
+
+@keyframes unfoldOut {
+	0% {
+		transform:scaleY(1) scaleX(1);
+	}
+	50% {
+		transform:scaleY(.005) scaleX(1);
+	}
+	100% {
+		transform:scaleY(.005) scaleX(0);
+	}
+}
+
+
+
+
+
+
+@keyframes scaleBack {
+	0% {
+		transform:scale(1);
+	}
+	100% {
+		transform:scale(.85);
+	}
+}
+
+@keyframes scaleForward {
+	0% {
+		transform:scale(.85);
+	}
+	100% {
+		transform:scale(1);
+	}
+}
+
+@keyframes quickScaleDown {
+	0% {
+		transform:scale(1);
+	}
+	99.9% {
+		transform:scale(1);
+	}
+	100% {
+		transform:scale(0);
+	}
+}
+
+@keyframes slideUpLarge {
+	0% {
+		transform:translateY(0%);
+	}
+	100% {
+		transform:translateY(-100%);
+	}
+}
+
+@keyframes slideDownLarge {
+	0% {
+		transform:translateY(-100%);
+	}
+	100% {
+		transform:translateY(0%);
+	}
+}
+
+
+@keyframes moveDown {
+	0% {
+		transform:translateY(0px);
+	}
+	100% {
+		transform:translateY(150px);
+	}
+}
+
+
+@keyframes blowUp {
+	0% {
+		transform:scale(0);
+	}
+	100% {
+		transform:scale(1);
+	}
+}
+
+@keyframes blowUpOut {
+	0% {
+		transform:scale(1);
+		opacity:1;
+	}
+	100% {
+		transform:scale(0);
+		opacity:0;
+	}
+}
+
+
+
+@keyframes sketchIn {
+	0% {
+		stroke-dashoffset: 778;
+	}
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes sketchOut {
+	0% {
+		stroke-dashoffset: 0;
+	}
+	100% {
+		stroke-dashoffset: 778;
+	}
+}
+
+@keyframes modalFadeIn {
+	0% {
+		background-color:transparent;
+	}
+	100% {
+		background-color:white;
+	}
+}
+
+@keyframes modalFadeOut {
+	0% {
+		background-color:white;
+	}
+	100% {
+		background-color:transparent;
+	}
+}
+
+@keyframes modalContentFadeIn {
+	0% {
+		opacity:0;
+		top:-20px;
+	}
+	100% {
+		opacity:1;
+		top:0;
+	}
+}
+
+@keyframes modalContentFadeOut {
+	0% {
+		opacity:1;
+		top:0px;
+	}
+	100% {
+		opacity:0;
+		top:-20px;
+	}
+}
+
+@keyframes bondJamesBond {
+	0% {
+		transform:translateX(1000px);
+	}
+	80% {
+		transform:translateX(0px);
+		border-radius:75px;
+		height:75px;
+		width:75px;
+	}
+	90% {
+		border-radius:3px;
+		height:182px;
+		width:247px;
+	}
+	100% {
+		border-radius:3px;
+		height:162px;
+		width:227px;
+	}
+}
+
+@keyframes killShot {
+	0% {
+		transform:translateY(0) rotate(0deg);
+		opacity:1;
+	}
+	100% {
+		transform:translateY(300px) rotate(45deg);
+		opacity:0;
+	}
+}
+
+@keyframes fadeToRed {
+	0% {
+		background-color:rgba(black,.6);
+	}
+	100% {
+		background-color:rgba(red,.8);
+	}
+}
+
+@keyframes slowFade {
+	0% {
+		opacity:1;
+	}
+	99.9% {
+		opacity:0;
+		transform:scale(1);
+	}
+	100% {
+		transform:scale(0);
+	}
+}
+

package/dist/css/nxDiv.css

@@ -0,0 +1,120 @@
+.search-box {
+
+}
+.search-container {
+	--margin-top: 16px;
+	--margin-left: 16px;
+	--margin-right: 16px;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 16px 32px;
+	background-color: #f0f1fd;
+	--border: 2px solid red;
+	border-radius: 5px;
+	position: relative;
+	transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
+	margin-bottom: 16px;
+
+	input[type=text] {
+		background-color: white;
+	}
+
+	.toggle-icon {
+		position: absolute;
+		top: 2px;
+		right: 2px;
+		cursor: pointer;
+		width: 16px;
+		height: 16px;
+		border: none;
+		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;
+	}
+
+	.search-content {
+		width: 100%;
+	}
+}
+
+.search-container.collapse {
+	--width: 16px;
+	height: 0;
+	padding: 0;
+	--overflow: hidden;
+	top: -32px;
+	--right: 0px;
+	background-color: unset;
+	--z-index: 1;
+	margin-bottom: 0;
+
+	.search-content {
+		display: none;
+	}
+
+	.toggle-icon {
+		right: -32px;
+		--top: -4px;
+		--width: 0;
+		--height: 0;
+		--transition: right 0.3s ease-in-out;
+		transform: rotate(180deg);
+		animation: rotate-in 0.3s ease-in-out forwards;
+		--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-down-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M9.636 2.5a.5.5 0 0 0-.5-.5H2.5A1.5 1.5 0 0 0 1 3.5v10A1.5 1.5 0 0 0 2.5 15h10a1.5 1.5 0 0 0 1.5-1.5V6.864a.5.5 0 0 0-1 0V13.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M5 10.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1H6.707l8.147-8.146a.5.5 0 0 0-.708-.708L6 9.293V5.5a.5.5 0 0 0-1 0z"/></svg>');
+	}
+}
+
+@keyframes rotate-in {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(180deg);
+	}
+}
+
+@keyframes rotate-out {
+	from {
+		transform: rotate(180deg);
+	}
+	to {
+		transform: rotate(0deg);
+	}
+}
+
+.search-content {
+	display: flex;
+	gap: 16px;
+	label {
+		font-weight: normal;
+	}
+
+	input {
+		outline: none;
+		border-radius: 4px;
+		--width: 400px;
+		height: 26px;
+		border: 1px solid #b1b2c8;
+		padding: 0 4px;
+		--margin-top: 8px;
+		color: #666;
+	}
+
+	input:focus {
+		border-color: dodgerblue;
+	}
+
+	input[type=date] {
+		width: 130px;
+	}
+
+	button {
+		--width: 80px;
+		cursor: pointer;
+		width: auto;
+		--border-radius: 4px;
+	}
+}