feat(docs): upgrade to gitart-vue-dialog@0.2.0

Author: MichaelGitArt

docs/package.json

@@ -19,7 +19,7 @@
     "@mdi/js": "^5.9.55",
     "@vueuse/core": "^6.0.0",
     "balm-ui": "9.36.0",
-    "gitart-vue-dialog": "^0.2.0-alpha.3",
+    "gitart-vue-dialog": "0.2.0",
     "markdown-it-container": "^3.0.0",
     "prismjs": "^1.24.1",
     "sass": "^1.38.0"

docs/src/components/Examples/Introduction/GettingStartedExampleStyled.vue

@@ -46,8 +46,6 @@ export default {
 
 <style lang="scss">
   .getting-started-example-styled {
-    background: #fff;
-
     &__content {
       padding: 20px;
     }

docs/src/docs/components/g-dialog.md

@@ -19,8 +19,10 @@ z-index of the component is 200. So be careful. Don't make z-index of the header
 | [height](#height) |  `string` `number` | `'auto'` |
 | [max-width](#max-width) | `string` `number` | `'none'` |
 | [model-value](#model-value) | `boolean` | `false` |
+| [overlay-background](#overlay-background) | `boolean` `string` | `true` |
 | [persistent](#persistent) | `boolean` | `false` |
 | [scrollable](#scrollable) | `boolean` | `false` |
+| [transition](#transition) | `string` | `g-dialog-transition` |
 | [width](#width) | `string` `number` | `'auto'` |
 
 
@@ -32,6 +34,12 @@ z-index of the component is 200. So be careful. Don't make z-index of the header
 - **Details:** <br/>
   Sets background to the dialog content
 
+  - `true` - remains [default](#content-bg) backround, 
+  - `false` - removes background
+  - `String` - sets some backround to the current dialog content
+
+  You can set default value for all dialogs by CSS var [--g-dialog-content-bg](#content-bg)
+
 ---
 
 ### `border-radius`
@@ -42,6 +50,12 @@ z-index of the component is 200. So be careful. Don't make z-index of the header
 - **Details:** <br/>
   Sets border-radius to the dialog content
 
+  - `true` - remains [default](#content-border-radius) border-radius, 
+  - `false` - removes border-radius
+  - `String` - sets some border-radius to the current dialog content
+
+  You can set default value for all dialogs by CSS var [--g-dialog-content-border-radius](#content-border-radius)
+
 ---
 
 ### `content-class`
@@ -93,6 +107,21 @@ v-model props to activate and deactivate the dialog
 
 ---
 
+### `overlay-background`
+- **Type:** `Boolean | String`
+
+- **Default:** `true`
+
+- **Details:** <br/>
+Sets dialog overlay background. 
+  - `true` - remains [default](#overlay-bg) backround, 
+  - `false` - removes background
+  - `String` - sets some backround to the current dialog overlay
+
+  You can set default value for all dialogs by CSS var [--g-dialog-overlay-bg](#overlay-bg)
+
+---
+
 ### `persistent`
 - **Type:** `Boolean`
 
@@ -110,6 +139,44 @@ Makes clicking outside of the element will not deactivate the dialog
 
 <!-- - **Details:** <br/> -->
 
+---
+### `transition`
+- **Type:** `String`
+
+- **Default:** `'g-dialog-transition'`
+
+- **Details:** <br/>
+Sets the component custom transition name (leaving and entering the dialog). Here is example:
+
+```scss
+// transition="custom-rotate-transition"
+.custom-rotate-transition {
+  &-enter-active,
+  &-leave-active {
+    transition-timing-function: linear;
+    transition-duration: 0.1s; // not higher than 200ms
+  }
+
+  &-enter-from {
+    transform: translate(0, 30px) rotate(12deg);
+    opacity: 0;
+  }
+
+  &-leave-to {
+    transform: translate(0, 30px) rotate(4deg);
+    opacity: 0;
+  }
+}
+```
+
+::: warning
+  On leaving don't set `transition-duration` higher than `150ms`-`200ms` if you are using
+  plugin method [addDialog](/docs/guide/plugin-usage#adddialog-data).
+
+  [removeDialog](/docs/guide/plugin-usage#removedialog-index) disables a dialog and deletes it after 150ms
+  completely, so the custom transition may be truncated
+:::
+
 ---
 ### `width`
 - **Type:** `String | Number`
@@ -125,7 +192,7 @@ Sets width for the dialog
 
 | Name | Description |
 |:---|:---|
-| default | The default Vue slot
+| default | The default Vue slot |
 
 
 ## Events
@@ -177,4 +244,37 @@ Or use CSS variables to do it globally. Put the vars into your global css file o
   ```css
   --g-dialog-border-radius: 0;
   ```
+---
+
+### content-shadow
+- **Name:** `--g-dialog-content-shadow`
+
+- **Default:** <br/>
+  `0 11px 15px -7px rgb(0 0 0 / 20%),` <br/>
+  `0 24px 38px 3px rgb(0 0 0 / 14%),` <br/>
+  `0 9px 46px 8px rgb(0 0 0 / 12%)` <br/>
+
+- **Details:**<br/>
+  Sets default `box-shadow` for the dialog content
+
+- **Usage:**
+
+  ```css
+  --g-dialog-content-shadow: 0 11px 15px -7px rgb(0 0 0 / 20%);
+  ```
+---
+
+### overlay-bg
+- **Name:** `--g-dialog-overlay-bg`
+
+- **Default:** `rgba(33, 33, 33, 0.46)`
+
+- **Details:**<br/>
+  Sets default `background` for the dialog overlay
+
+- **Usage:**
+
+  ```css
+  --g-dialog-overlay-bg: rgba(143, 108, 249, 0.4);
+  ```
 ---

docs/yarn.lock

@@ -1407,10 +1407,10 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-gitart-vue-dialog@^0.2.0-alpha.3:
-  version "0.2.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-0.2.0-alpha.3.tgz#2e3372c327f7fd932ce4050a870ee22a59b64b7f"
-  integrity sha512-eRzWZc+7O52TkOXrx6r70CahOpfRa9mbVeV5Oq5j39GiZ9IeSwfEUlPIQ65L/lxQ+fTtZ0Xa433U0HyJNgQDew==
+gitart-vue-dialog@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-0.2.0.tgz#1775f2fedb715587e9c00ca5b8ba4a55d94c9c18"
+  integrity sha512-F9D5VYESUa52xbDIz42GmWBbgruh86/GDmjBnrQb3zmLAH1osLbi/JfvCAvi4V39lBtRWbk1zc1XNRiC+5uB2Q==
 
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"