sync with latest changes

ui/src/components/base/Field.svelte

@@ -1,5 +1,6 @@
 <script>
     import { onMount } from "svelte";
+    import { slide } from "svelte/transition";
     import { errors, removeError } from "@/stores/errors";
     import CommonHelper from "@/utils/CommonHelper";
 
@@ -38,7 +39,7 @@
     <slot {uniqueId} />
 
     {#each fieldErrors as error}
-        <div class="help-block help-block-error">
+        <div class="help-block help-block-error" transition:slide|local={{ duration: 150 }}>
             {#if typeof error === "object"}
                 <pre>{error?.message || error?.code || defaultError}</pre>
             {:else}

ui/src/components/base/FilterAutocompleteInput.svelte

@@ -256,6 +256,7 @@
         result.push("@request.method");
         result.push("@request.query.");
         result.push("@request.data.");
+        result.push("@request.headers.");
         result.push("@request.auth.id");
         result.push("@request.auth.collectionId");
         result.push("@request.auth.collectionName");

ui/src/components/collections/CollectionRulesTab.svelte

@@ -45,7 +45,7 @@
                         The request fields could be accessed with the special <em>@request</em> filter:
                     </p>
                     <div class="inline-flex flex-gap-5">
-                        <code>@request.method</code>
+                        <code>@request.headers.*</code>
                         <code>@request.query.*</code>
                         <code>@request.data.*</code>
                         <code>@request.auth.*</code>
@@ -77,22 +77,22 @@
 
 <RuleField label="List/Search rule" formKey="listRule" {collection} bind:rule={collection.listRule} />
 
-<hr class="m-t-sm m-b-sm" />
+<hr />
 <RuleField label="View rule" formKey="viewRule" {collection} bind:rule={collection.viewRule} />
 
 {#if !collection?.isView}
-    <hr class="m-t-sm m-b-sm" />
+    <hr />
     <RuleField label="Create rule" formKey="createRule" {collection} bind:rule={collection.createRule} />
 
-    <hr class="m-t-sm m-b-sm" />
+    <hr />
     <RuleField label="Update rule" formKey="updateRule" {collection} bind:rule={collection.updateRule} />
 
-    <hr class="m-t-sm m-b-sm" />
+    <hr />
     <RuleField label="Delete rule" formKey="deleteRule" {collection} bind:rule={collection.deleteRule} />
 {/if}
 
 {#if collection?.isAuth}
-    <hr class="m-t-sm m-b-sm" />
+    <hr />
     <RuleField
         label="Manage rule"
         formKey="options.manageRule"

ui/src/components/collections/RuleField.svelte

@@ -53,7 +53,7 @@
     </div>
 {:else}
     <Field
-        class="form-field rule-field m-0 {required ? 'requied' : ''} {isAdminOnly ? 'disabled' : ''}"
+        class="form-field rule-field {required ? 'requied' : ''} {isAdminOnly ? 'disabled' : ''}"
         name={formKey}
         let:uniqueId
     >
@@ -93,20 +93,11 @@
             bind:value={rule}
             baseCollection={collection}
             disabled={isAdminOnly}
+            placeholder={!isAdminOnly ? "Leave empty to grant everyone access..." : ""}
         />
 
         <div class="help-block">
-            <slot {isAdminOnly}>
-                <p>
-                    {#if isAdminOnly}
-                        Only admins will be able to perform this action (
-                        <button type="button" class="link-primary" on:click={unlock}>unlock to change</button>
-                        ).
-                    {:else}
-                        Leave empty to grant everyone access.
-                    {/if}
-                </p>
-            </slot>
+            <slot {isAdminOnly} />
         </div>
     </Field>
 {/if}
@@ -126,4 +117,7 @@
         border-bottom-right-radius: 0;
         background: rgba(53, 71, 104, 0.09);
     }
+    :global(.rule-field .code-editor .cm-placeholder) {
+        font-family: var(--baseFontFamily);
+    }
 </style>

ui/src/scss/_alert.scss

@@ -34,7 +34,7 @@
         color: var(--txtHintColor);
     }
     .close {
-        $size: 30px;
+        $size: 28px;
         display: inline-flex;
         margin-right: -5px;
         width: $size;

ui/src/scss/_flatpickr.scss

@@ -21,7 +21,9 @@
   input, select {
     box-shadow: none;
     min-height: 0;
-    height: var(--inputHeight);
+    height: var(--smBtnHeight);
+    padding-top: 3px;
+    padding-bottom: 3px;
     background: none;
     border-radius: var(--baseRadius);
     border: 1px solid var(--baseAlt1Color);
@@ -143,13 +145,16 @@
 }
 .flatpickr-months {
   display: flex;
-  margin: 0 0 4px;
+  align-items: center;
+  padding: 5px 0;
 }
 .flatpickr-months .flatpickr-month {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: transparent;
   color: var(--txtPrimaryColor);
   fill: var(--txtPrimaryColor);
-  height: 34px;
   line-height: 1;
   text-align: center;
   position: relative;
@@ -164,12 +169,12 @@
 }
 .flatpickr-months .flatpickr-prev-month,
 .flatpickr-months .flatpickr-next-month {
+  display: flex;
+  align-items: center;
   text-decoration: none;
   cursor: pointer;
-  position: absolute;
-  top: 0;
   height: 34px;
-  padding: 10px;
+  padding: 5px 12px;
   z-index: 3;
   color: var(--txtPrimaryColor);
   fill: var(--txtPrimaryColor);
@@ -210,6 +215,7 @@
 .numInputWrapper {
   position: relative;
   height: auto;
+  border-radius: var(--baseRadius);
 }
 .numInputWrapper input,
 .numInputWrapper span {
@@ -276,7 +282,7 @@
   fill: rgba(0,0,0,0.5);
 }
 .numInputWrapper:hover {
-  background: var(--baseAlt2Color);
+  background: var(--baseAlt1Color);
 }
 .numInputWrapper:hover span {
   opacity: 1;
@@ -284,12 +290,11 @@
 .flatpickr-current-month {
   line-height: inherit;
   color: inherit;
-  position: absolute;
-  width: 75%;
-  left: 12.5%;
+  width: 85%;
   padding: 1px 0;
   line-height: 1;
   display: flex;
+  gap: 10px;
   align-items: center;
   justify-content: center;
   text-align: center;
@@ -303,14 +308,13 @@
   padding: 0;
 }
 .flatpickr-current-month span.cur-month:hover {
-  background: var(--baseAlt2Color);
+  background: var(--baseAlt1Color);
 }
 .flatpickr-current-month .numInputWrapper {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 63px;
-  margin: 0 5px;
+  width: 62px;
 }
 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
   border-bottom-color: var(--txtPrimaryColor);
@@ -362,7 +366,7 @@
   outline: none;
 }
 .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
-  background: var(--baseAlt2Color);
+  background: var(--baseAlt1Color);
 }
 .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
   background-color: transparent;