Skip to content

Commit af74ce8

Browse files
adambereczadamberecz
committed
1.2.0
1 parent 9d87fdc commit af74ce8

13 files changed

+178
-122
lines changed

‎CHANGELOG.md

+12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
[//]: # (Don't use <tags>)
22

3+
## v1.2.0
4+
5+
> `2024-02-19`
6+
7+
### 🎉 Feature
8+
- Dark mode 🌙
9+
- Define list of condition operators for custom elements.
10+
11+
### 🐞 Bug Fixes
12+
- No padding on right panel fix #34
13+
- Condition selector for custom elements #38 #39
14+
315
## v1.1.10
416

517
> `2024-02-09`

‎index.css

+78-52
Original file line numberDiff line numberDiff line change
@@ -1322,7 +1322,7 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
13221322
}
13231323

13241324
.vfb-btn-transparent {
1325-
@apply form-color-btn-secondary border-transparent hover:text-gray-900;
1325+
@apply form-color-btn-secondary border-transparent hover:text-gray-900 dark:hover:text-dark-200;
13261326
}
13271327

13281328
.vfb-btn-sm {
@@ -1428,34 +1428,34 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
14281428
animation-delay: 0;
14291429
animation-fill-mode: both;
14301430
animation-name: vfb-fade-in-up;
1431-
@apply max-w-modal bg-white mx-auto shadow-box-strong rounded-lg transition-transform transform -translate-y-1/4;
1431+
@apply max-w-modal bg-white mx-auto shadow-box-strong rounded-lg transition-transform transform -translate-y-1/4 dark:bg-dark-700;
14321432
}
14331433

14341434
.vfb-modal-header {
1435-
@apply px-7 py-5 bg-gray-100 flex items-center justify-between rounded-t-lg;
1435+
@apply px-7 py-5 bg-gray-100 flex items-center justify-between rounded-t-lg dark:bg-dark-600;
14361436
}
14371437

14381438
.vfb-modal-title {
1439-
@apply text-xl font-semibold leading-none;
1439+
@apply text-xl font-semibold leading-none dark:text-dark-100;
14401440
}
14411441

14421442
.vfb-modal-subtitle {
1443-
@apply text-gray-500 text-0.5md;
1443+
@apply text-gray-500 text-0.5md dark:text-dark-400;
14441444
}
14451445

14461446
.vfb-modal-close {
1447-
@apply text-lg text-gray-500 transition-colors hover:text-gray-900;
1447+
@apply text-lg text-gray-500 transition-colors hover:text-gray-900 dark:text-dark-400 dark:hover:text-dark-100;
14481448
}
14491449

14501450
.vfb-modal-content {
1451-
@apply px-8 py-6 mt-4;
1451+
@apply px-8 py-6 mt-4 dark:text-dark-100;
14521452
}
14531453
.vfb-modal-content form {
14541454
@apply -mt-4;
14551455
}
14561456

14571457
.vfb-modal-buttons {
1458-
@apply flex items-end justify-between pl-7 pr-3 py-5 border-t border-gray-200;
1458+
@apply flex items-end justify-between pl-7 pr-3 py-5 border-t border-gray-200 dark:border-dark-500;
14591459
}
14601460

14611461
.vfb-modal-buttons-left > div, .vfb-modal-buttons-left > button {
@@ -1491,27 +1491,27 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
14911491
}
14921492

14931493
.vfb-conditions-empty-subtitle {
1494-
@apply text-gray-500 leading-none mb-4;
1494+
@apply text-gray-500 leading-none mb-4 dark:text-dark-400;
14951495
}
14961496

14971497
.vfb-condition-list {
14981498
@apply pl-10 relative;
14991499
}
15001500
.vfb-condition-list:before {
15011501
content: "";
1502-
@apply w-px absolute top-0 bottom-11.5 left-4 ml-0.5 bg-gray-300;
1502+
@apply w-px absolute top-0 bottom-11.5 left-4 ml-0.5 bg-gray-300 dark:bg-dark-500;
15031503
}
15041504

15051505
.vfb-condition-list-item-and {
15061506
@apply relative;
15071507
}
15081508
.vfb-condition-list-item-and:before {
15091509
content: "";
1510-
@apply absolute top-3 h-4 -left-10 w-10 bg-white;
1510+
@apply absolute top-3 h-4 -left-10 w-10 bg-white dark:bg-dark-700;
15111511
}
15121512
.vfb-condition-list-item-and:after {
15131513
content: "and";
1514-
@apply absolute top-3.5 -left-10 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400;
1514+
@apply absolute top-3.5 -left-10 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400 dark:text-dark-400;
15151515
}
15161516

15171517
.vfb-condition-list-add {
@@ -1523,19 +1523,19 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
15231523
}
15241524
.vfb-condition-sublist:before {
15251525
content: "";
1526-
@apply w-px absolute top-14 bottom-0 left-4 ml-0.5 bg-gray-300;
1526+
@apply w-px absolute top-14 bottom-0 left-4 ml-0.5 bg-gray-300 dark:bg-dark-500;
15271527
}
15281528

15291529
.vfb-condition-sublist-item-or {
15301530
@apply pl-10 relative;
15311531
}
15321532
.vfb-condition-sublist-item-or:before {
15331533
content: "";
1534-
@apply absolute top-3 h-4 left-0 w-10 bg-white;
1534+
@apply absolute top-3 h-4 left-0 w-10 bg-white dark:bg-dark-700;
15351535
}
15361536
.vfb-condition-sublist-item-or:after {
15371537
content: "or";
1538-
@apply absolute top-3.5 left-0 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400;
1538+
@apply absolute top-3.5 left-0 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400 dark:text-dark-400;
15391539
}
15401540

15411541
.vfb-conditions-render {
@@ -1679,7 +1679,7 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
16791679
}
16801680

16811681
.vfb-field-text-primary {
1682-
@apply text-sm leading-tighter pr-1 h-4 whitespace-nowrap overflow-hidden text-ellipsis;
1682+
@apply text-sm leading-tighter pr-1 h-4 whitespace-nowrap overflow-hidden text-ellipsis dark:text-dark-100;
16831683
}
16841684

16851685
.vfb-field-text-secondary {
@@ -1736,55 +1736,46 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
17361736
@apply text-0.5md;
17371737
}
17381738

1739-
.vfb-config-form *, .vfb-config-form :before, .vfb-config-form :after, .vfb-config-form :root {
1739+
*, :before, :after, :root {
1740+
--vf-dark-50: #EFEFEF;
1741+
--vf-dark-100: #DCDCDC;
1742+
--vf-dark-200: #BDBDBD;
1743+
--vf-dark-300: #A0A0A0;
1744+
--vf-dark-400: #848484;
1745+
--vf-dark-500: #737373;
1746+
--vf-dark-550: #555555;
1747+
--vf-dark-600: #393939;
1748+
--vf-dark-700: #323232;
1749+
--vf-dark-750: #292929;
1750+
--vf-dark-800: #262626;
1751+
--vf-dark-900: #191919;
1752+
--vf-dark-1000: #121212;
1753+
}
1754+
1755+
.vfb-config-form *, .vfb-config-form :before, .vfb-config-form :after {
17401756
--vf-gutter-sm: 0.5rem;
17411757
--vf-min-height-input-sm: 2.125rem;
17421758
--vf-py-input-sm: 0.375rem;
17431759
--vf-px-input-sm: 0.675rem;
17441760
--vf-radius-input: 6px;
1761+
--vf-radius-checkbox-sm: 4px;
17451762
--vf-bg-input: var(--vf-gray-100);
17461763
--vf-bg-passive: var(--vf-gray-200);
17471764
--vf-border-color-passive: var(--vf-gray-200);
17481765
--vf-border-color-input: var(--vf-gray-200);
17491766
--vf-color-input: var(--vf-gray-900);
17501767
--vf-color-placeholder: var(--vf-gray-400);
1751-
--vf-radius-checkbox-sm: 4px;
17521768
}
17531769

1754-
.dark .vfb-config-form *, .dark .vfb-config-form :before, .dark .vfb-config-form :after, .dark .vfb-config-form :root {
1755-
--vf-primary: theme("colors.dark.550");
1756-
--vf-on-primary: #ffffff;
1757-
--vf-ring-color: #ffffff66;
1758-
--vf-bg-input: theme("colors.dark.700");
1759-
--vf-bg-passive: theme("colors.dark.600");
1760-
--vf-bg-selected: theme("colors.dark.550");
1761-
--vf-border-color-passive: theme("colors.dark.600");
1762-
--vf-border-color-input: theme("colors.dark.700");
1763-
--vf-bg-icon: theme("colors.dark.500");
1764-
--vf-color-muted: theme("colors.dark.400");
1765-
--vf-color-input: #ffffff;
1766-
--vf-color-placeholder: theme("colors.dark.400");
1767-
}
1768-
.dark .vfb-config-slider *, .dark .vfb-config-slider :before, .dark .vfb-config-slider :after, .dark .vfb-config-slider :root {
1769-
--vf-primary: theme("colors.primary.500");
1770-
--vf-bg-passive:theme("colors.dark.900");
1771-
--vf-bg-slider-handle: #ffffff;
1772-
--vf-shadow-handles: 0px 0px 0px 0px theme("colors.dark.900");
1773-
--vf-shadow-handles-hover: 0px 0px 0px 2px theme("colors.dark.500");
1774-
--vf-shadow-handles-focus: 0px 0px 0px 2px theme("colors.dark.300");
1775-
}
1776-
.dark .vfb-config-toggle *, .dark .vfb-config-toggle :before, .dark .vfb-config-toggle :after, .dark .vfb-config-toggle :root {
1777-
--vf-primary: theme("colors.primary.500");
1778-
--vf-bg-toggle-handle: #ffffff;
1779-
--vf-shadow-handles: 0px 0px 0px 0px theme("colors.dark.900");
1780-
--vf-shadow-handles-hover: 0px 0px 0px 2px theme("colors.dark.500");
1781-
--vf-shadow-handles-focus: 0px 0px 0px 2px theme("colors.dark.300");
1782-
}
1783-
.dark .vfb-config-list-remove *, .dark .vfb-config-list-remove :before, .dark .vfb-config-list-remove :after, .dark .vfb-config-list-remove :root {
1784-
--vf-color-passive: #ffffff !important;
1785-
}
1786-
.dark .vfb-config-datepicker .flatpickr-calendar, .dark .vfb-config-datepicker .flatpickr-calendar *, .dark .vfb-config-datepicker .flatpickr-calendar :before, .dark .vfb-config-datepicker .flatpickr-calendar :after, .dark .vfb-config-datepicker .flatpickr-calendar :root {
1787-
--vf-color-input: #000000;
1770+
.dark .vfb-config-form *, .dark .vfb-config-form :before, .dark .vfb-config-form :after {
1771+
--vf-bg-input: var(--vf-dark-700);
1772+
--vf-bg-passive: var(--vf-dark-700);
1773+
--vf-bg-selected: var(--vf-dark-600);
1774+
--vf-color-input: var(--vf-dark-100);
1775+
--vf-color-placeholder: var(--vf-dark-500);
1776+
--vf-border-color-passive: var(--vf-dark-700);
1777+
--vf-border-color-input: var(--vf-dark-800);
1778+
--vf-border-color-checkbox: var(--vf-dark-800);
17881779
}
17891780

17901781
.vfb-config-toggle + .vfb-config-toggle {
@@ -2252,6 +2243,13 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
22522243
@apply px-5 pb-6;
22532244
}
22542245

2246+
.vfb-panels-container-standalone .vfb-panels-wrapper {
2247+
@apply absolute top-0 left-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden z-0;
2248+
}
2249+
.vfb-panels-container-standalone .vfb-panel {
2250+
@apply px-5 pb-6;
2251+
}
2252+
22552253
.vfb-panels-container-icons {
22562254
@apply flex;
22572255
}
@@ -2317,6 +2315,16 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
23172315
@apply bg-white rounded-lg shadow-box-circle mx-auto w-full relative transition-all p-10;
23182316
}
23192317

2318+
.vfb-preview-wrapper-dark {
2319+
@apply bg-dark-900 text-white;
2320+
}
2321+
.vfb-preview-wrapper-dark .vfb-preview-empty-title {
2322+
@apply text-white;
2323+
}
2324+
.vfb-preview-wrapper-dark .vfb-preview-empty-description {
2325+
@apply text-dark-400;
2326+
}
2327+
23202328
.vfb-preview-drag-wrapper {
23212329
@apply bg-primary-500 absolute h-1 rounded-full pointer-events-none -left-2 -right-2 -top-0.5 mt-8;
23222330
}
@@ -2760,6 +2768,14 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
27602768
@apply absolute inset-0 overflow-y-auto px-16;
27612769
}
27622770

2771+
.dark .vfb-center-wrapper-dark {
2772+
@apply bg-[rgb(14,14,14)];
2773+
}
2774+
2775+
.vfb-center-wrapper-dark-changing * {
2776+
transition: none !important;
2777+
}
2778+
27632779
.vfb-center-loader-container {
27642780
@apply w-full flex flex-col items-center justify-center h-full dark:text-white;
27652781
}
@@ -3317,6 +3333,16 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
33173333
--vf-container-bg-dynamic-5: rgb(0 0 0 / 12%);
33183334
}
33193335

3336+
.vfb-preview-wrapper-dark .vfb-preview-element-container-nested,
3337+
.vfb-preview-wrapper-dark .vfb-preview-element-container-list {
3338+
--vf-container-bg-neutral: rgb(255 255 255 / 10%);
3339+
--vf-container-bg-dynamic-1: rgb(0 208 255 / 20%);
3340+
--vf-container-bg-dynamic-2: rgb(2 215 130 / 20%);
3341+
--vf-container-bg-dynamic-3: rgb(0 255 12 / 20%);
3342+
--vf-container-bg-dynamic-4: rgb(0 3 255 / 20%);
3343+
--vf-container-bg-dynamic-5: rgb(0 0 0 / 20%);
3344+
}
3345+
33203346
.vfb-preview-element-container-nested {
33213347
--vf-container-bg: var(--vf-container-bg-neutral);
33223348
}

‎index.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": false,
33
"name": "@vueform/builder",
4-
"version": "1.1.10",
4+
"version": "1.2.0",
55
"description": "Vueform Builder development build.",
66
"homepage": "https://vueform.com",
77
"license": "SEE LICENSE IN LICENSE.txt",

‎scss/_builder.scss

+8
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,14 @@
5454
@apply absolute inset-0 overflow-y-auto px-16;
5555
}
5656

57+
.dark .vfb-center-wrapper-dark {
58+
@apply bg-[rgb(14,14,14)];
59+
}
60+
61+
.vfb-center-wrapper-dark-changing * {
62+
transition: none !important;
63+
}
64+
5765
.vfb-center-loader-container {
5866
@apply w-full flex flex-col items-center justify-center h-full dark:text-white;
5967
}

‎scss/_conditions.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737

3838
.vfb-conditions-empty-subtitle {
39-
@apply text-gray-500 leading-none mb-4;
39+
@apply text-gray-500 leading-none mb-4 dark:text-dark-400;
4040
}
4141

4242
.vfb-condition-list {
@@ -48,7 +48,7 @@
4848

4949
&:before {
5050
content: "";
51-
@apply w-px absolute top-0 bottom-11.5 left-4 ml-0.5 bg-gray-300;
51+
@apply w-px absolute top-0 bottom-11.5 left-4 ml-0.5 bg-gray-300 dark:bg-dark-500;
5252
}
5353
}
5454

@@ -57,12 +57,12 @@
5757

5858
&:before {
5959
content: "";
60-
@apply absolute top-3 h-4 -left-10 w-10 bg-white;
60+
@apply absolute top-3 h-4 -left-10 w-10 bg-white dark:bg-dark-700;
6161
}
6262

6363
&:after {
6464
content: "and";
65-
@apply absolute top-3.5 -left-10 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400;
65+
@apply absolute top-3.5 -left-10 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400 dark:text-dark-400;
6666
}
6767
}
6868

@@ -76,7 +76,7 @@
7676

7777
&:before {
7878
content: "";
79-
@apply w-px absolute top-14 bottom-0 left-4 ml-0.5 bg-gray-300;
79+
@apply w-px absolute top-14 bottom-0 left-4 ml-0.5 bg-gray-300 dark:bg-dark-500;
8080
}
8181
}
8282

@@ -85,12 +85,12 @@
8585

8686
&:before {
8787
content: "";
88-
@apply absolute top-3 h-4 left-0 w-10 bg-white;
88+
@apply absolute top-3 h-4 left-0 w-10 bg-white dark:bg-dark-700;
8989
}
9090

9191
&:after {
9292
content: "or";
93-
@apply absolute top-3.5 left-0 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400;
93+
@apply absolute top-3.5 left-0 w-10 text-center leading-none uppercase text-0.5sm font-bold text-gray-400 dark:text-dark-400;
9494
}
9595
}
9696

0 commit comments

Comments
 (0)