visualpython · minjk-bl · Aug 22, 2023 · Aug 22, 2023 · Aug 22, 2023 · Aug 22, 2023
diff --git a/README.md b/README.md
@@ -5,7 +5,10 @@
 [![License: GPLv3](https://img.shields.io/badge/License-GPLv3-brightgreen)](https://github.com/visualpython/visualpython/blob/main/LICENSE)
 [![Downloads](https://static.pepy.tech/personalized-badge/visualpython?period=total&units=international_system&left_color=grey&right_color=orange&left_text=Downloads)](https://pepy.tech/project/visualpython)
 [![Issues: ](https://img.shields.io/github/issues/visualpython/visualpython?color=%23FF6347)](https://github.com/visualpython/visualpython/issues)
-[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/visualpython/visualpython-binder/HEAD?labpath=index.ipynb)
+[![lite-badge]][lite]
+
+[lite-badge]: https://jupyterlite.rtfd.io/en/latest/_static/badge.svg
+[lite]: https://visualpython.github.io/visualpython-lite/lab/index.html
 
 ## Introduction
 Visual Python is a GUI-based Python code generator, developed on the **Jupyter Lab**, **Jupyter Notebook** and **Google Colab** as an extension. <br>
@@ -27,7 +30,7 @@ Try Visual Python if you would like to: <br>
 
 Visual Python is an extension to Jupyter Lab, so you must have Jupyter Lab installed already.<br>
 - Python version 3.x
-- Jupyter lab environment
+- Jupyter lab environment(<= 3.6.3)
 
 ### 2. How to Install
 
@@ -92,6 +95,26 @@ Visual Python is an extension to Google Colab, so you must have Google Colab ope
 
 **3)  Activate Visual Python on Google Colab**
 
+
+## Getting Started with Visual Python Desktop
+### 1. Introduction
+Visual Python Desktop is an installer to create an isolated jupyter environment and enable to use Visual Python easily.
+
+It simplifies the process of configuring an independent Python environment, installing essential packages, and setting up a Jupyter environment, allowing users to focus on data analysis using python.
+
+### 2. Requirements
+- Operating System: Windows 10 or later (macOS and Linux support coming soon)
+- Minimum 4GB RAM, recommended 8GB RAM or higher
+- Minimum 10GB of disk space
+
+### 3. How to Install
+1) Download the Visual Python Desktop installer.
+- [Link to Visual Python Desktop installer page](https://visualpython.ai/visualpython-desktop)
+
+2) Run the installer and follow the provided instructions for the installation process.
+
+3) Use the shortcut created in Start menu or on Desktop to execute Jupyter Notebook (Visual Python), Jupyter Lab (Visual Python), and Visual Python Prompt according to your needs.
+
 ## Contributing
 If you are interested in contributing to the Visual Python, please see [`CONTRIBUTING.md`](CONTRIBUTING.md). <br>
 All skills from programmers, non-programmers, designers are welcomed.
@@ -113,4 +136,4 @@ To create an environment where everyone can learn and use big data analytical sk
 Love Visual Python? <br>
 Your support will help us continue to actively develop and improve Visual Python.☕
 
-[![donate_banner](https://user-images.githubusercontent.com/83636412/229679467-4fee93a2-d6d2-4229-a53c-80a5eb2b9240.png)](https://github.com/sponsors/visualpython?frequency=recurring)
+[![donate_banner](https://user-images.githubusercontent.com/83636412/229679467-4fee93a2-d6d2-4229-a53c-80a5eb2b9240.png)](https://github.com/sponsors/visualpython?frequency=recurring)
diff --git a/visualpython/css/component/packageManager.css b/visualpython/css/component/packageManager.css
@@ -74,6 +74,7 @@
 }
 .vp-pm-func-right {
     float: right;
+    display: flex;
 }
 .vp-pm-sort {
     cursor: pointer;
@@ -100,6 +101,14 @@
 .vp-pm-sort-menu-item:hover {
     color: var(--vp-font-highlight);
 }
+.vp-pm-func-reload {
+    width: 22px;
+    height: 22px;
+    display: inline-block;
+    margin-top: 4px;
+    margin-right: 10px;
+    cursor: pointer;
+}
 /* Empty List */
 .vp-pm-table {
     margin-top: 10px;

diff --git a/visualpython/css/component/popupComponent.css b/visualpython/css/component/popupComponent.css
@@ -160,7 +160,7 @@
     width: 100%;
     height: calc(100% - 80px);
     padding: 15px;
-    overflow: auto;
+    /* overflow: auto; */
 }
 .vp-popup-content {
     min-height: calc(100% - 30px);
@@ -284,7 +284,7 @@
     padding: 1px 8px 0 5px;
 }
 /* checkbox */
-.vp-popup-frame input[type=checkbox]:not(.vp-checkbox),
+.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle),
 .vp-popup-frame input[type=radio]:not(.vp-radio) {
 	position: absolute;
 	width: 1px;
@@ -295,9 +295,9 @@
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }
-.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label,
+.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + label,
 .vp-popup-frame input[type=radio]:not(.vp-radio) + label,
-.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span,
+.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + span,
 .vp-popup-frame label input[type=radio]:not(.vp-radio) + span {
 	display: inline-block;
 	position: relative;
@@ -307,14 +307,14 @@
     line-height: 15px;
     vertical-align: middle;
 }
-.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label,
+.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + label,
 .vp-popup-frame input[type=radio]:not(.vp-radio):disabled + label,
-.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span,
+.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + span,
 .vp-popup-frame label input[type=radio]:not(.vp-radio):disabled + span {
 	color: var(--vp-gray-color);
 }
-.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label::before,
-.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span::before {
+.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + label::before,
+.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + span::before {
 	content: '';
 	position: absolute;
 	left: 0;
@@ -328,8 +328,8 @@
 	border: none;
 	box-sizing: border-box;
 }
-.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):checked + label::before,
-.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):checked + span::before {
+.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):checked + label::before,
+.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):checked + span::before {
 	content: '';
 	position: absolute;
 	left: 0;
@@ -342,8 +342,8 @@
 	border: none;
 	box-sizing: border-box;
 }
-.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label::before,
-.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span::before {
+.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + label::before,
+.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + span::before {
 	content: '';
 	position: absolute;
 	left: 0;
@@ -449,6 +449,56 @@
 .vp-popup-frame select::-ms-expand {
     display: none;
 }
+/* toggle slider: <label><input class="vp-toggle" type="checkbox"/><span></span></label> */
+.vp-popup-frame input.vp-toggle { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.vp-popup-frame input.vp-toggle + span {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    width: 27px;
+    height: 15px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 34px;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.vp-popup-frame input[type=checkbox].vp-toggle + span:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    bottom: 1.1px;
+    border-radius: 50%;
+    background: none;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.vp-popup-frame input.vp-toggle:checked + span {
+    background-color: #2196F3;
+}
+
+.vp-popup-frame input.vp-toggle:focus + span {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+.vp-popup-frame input.vp-toggle:checked + span:before {
+    -webkit-transform: translateX(12px);
+    -ms-transform: translateX(12px);
+    transform: translateX(12px);
+}
 /* Big Selector */
 .vp-popup-frame .vp-big-select {
     border: 2px solid #FFCF73;

diff --git a/visualpython/css/m_ml/gridSearch.css b/visualpython/css/m_ml/gridSearch.css
@@ -0,0 +1,82 @@
+.vp-inner-param-list-box {
+    width: 245px;
+    height: 140px;
+    border: 0.25px solid var(--vp-border-gray-color);
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: 5px 0;
+}
+.vp-inner-param-list-item {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    padding: 0px 10px;
+    border-bottom: 0.25px solid var(--vp-border-gray-color);
+    background-color: var(--vp-background-color);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+.vp-inner-param-list-item:hover {
+    cursor: pointer;
+    background-color: var(--vp-background-hover-color);
+}
+.vp-inner-param-list-item.selected {
+    color: var(--vp-font-highlight);
+    background-color: var(--vp-light-gray-color);
+}
+.vp-param-grid-title {
+    line-height: 30px;
+}
+.vp-param-grid-box {
+    margin-bottom: 10px;
+}
+.vp-param-set {
+
+}
+.vp-param-set-del {
+    cursor: pointer;
+    float: right;
+}
+.vp-param-set-add {
+    cursor: pointer;
+}
+.vp-param-item > label {
+    align-self: center;
+}
+.vp-param-item-del {
+    cursor: pointer;
+    height: 42px;
+}
+.vp-param-result-input-box {
+    width: 100%;
+    border: 0.25px solid var(--vp-border-gray-color);
+    padding: 5px;
+    display: flex;
+    gap: 5px;
+}
+.vp-param-result-box {
+    display: inline-flex;
+    gap: 5px;
+}
+.vp-param-result-item {
+    border: 0.25px solid var(--vp-light-gray-color);
+    background: var(--vp-light-gray-color);
+    border-radius: 10px;
+    padding: 5px 7px;
+    display: flex;
+    gap: 5px;
+    align-items: center;
+}
+.vp-param-result-item:hover {
+    border: 0.25px solid var(--vp-font-highlight);
+    color: var(--vp-font-highlight);
+}
+.vp-param-result-item-del {
+    width: 15px;
+    display: inline-block;
+}
+input.vp-param-val {
+    border: 0px !important;
+    width: 100% !important;
+}