Merge branch 'forms-2' into form-fields

Author: duncanmcclean

resources/css/components/field-connectors.css

@@ -0,0 +1,102 @@
+/* GROUP FIELD CONNECTORS
+=================================================== */
+/* Notes...
+
+    Links fields to the right setting panel
+
+*/
+@supports (animation-timeline: auto) and (anchor-name: --my-anchor) {
+    :root {
+        --global-header-height: 3.5rem;
+    }
+
+    /* GROUP FIELD CONNECTORS / DEFINE ANCHORS
+    =================================================== */
+    [data-editing-field] {
+        anchor-name: --editing-field;
+    }
+    [data-field-settings] {
+        anchor-name: --field-settings;
+    }
+
+    /* GROUP FIELD CONNECTORS / DEFINE TIMELINE SCOPES
+    =================================================== */
+    #main-content {
+        scroll-timeline-name: --cp-main-scroll;
+        timeline-scope: --editing-field-scroll;
+    }
+    [data-editing-field] {
+        view-timeline-name: --editing-field-scroll;
+    }
+
+    /* GROUP FIELD CONNECTORS / DEFINE ANIMATIONS
+    =================================================== */
+    @keyframes move-mask-upwards {
+        to {
+            top: var(--global-header-height);
+            height: 7.5rem;
+        }
+    }
+    @keyframes clip-upwards {
+        0% {
+            opacity: 0;
+            /* Hide */
+            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+        }
+        1%, 100% {
+            opacity: 1;
+        }
+        100% {
+            height: 8rem;
+            /* Release */
+            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
+        }
+    }
+
+    /* GROUP FIELD CONNECTORS / INITIAL CONNECTOR
+    =================================================== */
+    .field-to-panel-connector-initial {
+        position: absolute;
+        top: anchor(--field-settings center);
+        right: anchor(--field-settings left);
+        bottom: anchor(--editing-field center);
+        width: 2.75rem;
+        border-inline-start: 1px dashed var(--color-blue-400);
+        &::before {
+            --width: 1.5rem;
+            content: '';
+            background: white;
+            position: fixed;
+            top: calc(var(--global-header-height) + 1rem);
+            height: 6rem;
+            width: var(--width);
+            translate: calc(0% - var(--width) / 2);
+            /* Move the mask up to continue hiding the line now that we've moved past the padding of the container */
+            animation: move-mask-upwards auto linear both;
+            animation-timeline: --cp-main-scroll;
+            animation-range: 0rem 2rem;
+        }
+    }
+
+    /* GROUP FIELD CONNECTORS / INITIAL CONNECTOR
+    =================================================== */
+    /* This connector points downwards and is visible once you scroll _past_ the field */
+    .field-to-panel-connector-scroll-past {
+        position: absolute;
+        /* border: 3px solid blue!important; */
+        top: anchor(--field-settings center);
+        right: anchor(--field-settings left);
+        bottom: anchor(--editing-field center);
+        width: 2.75rem;
+        &::before {
+            content: '';
+            border-inline-start: 1px dashed var(--color-blue-400);
+            position: fixed;
+            transform: translateY(-8rem);
+            height: 8rem;
+            animation: clip-upwards auto linear both;
+            animation-timeline: --editing-field-scroll;
+            animation-range: exit-crossing -38% exit-crossing 80%;
+        }
+    }
+}

resources/css/core/layout.css

@@ -421,6 +421,7 @@ main.nav-closed {
     .right-panel-popover__close-button {
         right: max(18rem, 33.33%);
         border-start-end-radius: 0;
+        border-start-start-radius: 0;
         border-end-end-radius: 0;
     }
 }
@@ -443,3 +444,4 @@ main.nav-closed {
 body > .draggable-mirror {
     z-index: var(--z-index-draggable);
 }
+

resources/css/cp.css

@@ -17,6 +17,7 @@
 @import './components/index-fields.css';
 @import './components/notifications.css';
 @import './components/page-tree.css';
+@import './components/field-connectors.css';
 @import './components/pagination.css';
 @import './components/popover.css';
 @import './components/preview.css';

resources/js/components/ui/Label.vue

@@ -18,7 +18,7 @@ const props = defineProps({
 
 <template>
     <label
-        class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
+        class="flex justify-between mb-1.5 @max-md:mb-1 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
         data-ui-label
         :for="for"
     >

resources/js/components/ui/Tabs/List.vue

@@ -7,7 +7,7 @@ const hasTabIndicatorComponent = hasComponent('TabsIndicator');
 
 <template>
     <TabsList
-        class="relative flex shrink-0 mx-2 lg:mx-0 space-x-2 lg:space-x-4 border-b border-gray-200 text-sm text-gray-500 
+        class="relative flex shrink-0 mx-2 lg:mx-0 space-x-2 @container/@lg:space-x-4 border-b border-gray-200 text-sm text-gray-500 
         dark:border-gray-700
         [.live-preview_&]:px-1 [.live-preview_&]:py-2 [.live-preview_&]:mb-3"
         data-ui-tabs-list

resources/js/pages/forms/Fields.vue

@@ -1,11 +1,12 @@
 <script setup>
 import Layout from '@/pages/layout/Layout.vue';
+import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from './Layout.vue';
 import { Button, Card, Checkbox, CheckboxGroup, Field, Header, Heading, Icon, Input, Panel, PanelHeader, Radio, RadioGroup, Select, StatusIndicator, Switch, Textarea, Tabs, TabList, TabTrigger, TabContent } from '@ui';
 import LayoutPanel from '@/pages/layout/LayoutPanel.vue';
 import { computed, ref } from 'vue';
 
-defineOptions({ layout: [Layout, FormsLayout] });
+defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
 
 const props = defineProps({
     form: Object,
@@ -21,6 +22,10 @@ const favoriteAlbum = ref(null);
 const secondFavoriteAlbum = ref(null);
 const emailNotifications = ref([]);
 const wantsFreeDrinkVoucher = ref(false);
+const settingsLabel = ref(__('Which album was your favorite?'));
+const settingsHelpText = ref('');
+const settingsPlaceholder = ref('');
+const settingsCharacterLimit = ref(null);
 const heardAboutOptions = [
     { label: __('Instagram'), value: 'instagram' },
     { label: __('Friend referral'), value: 'referral' },
@@ -43,6 +48,7 @@ const notificationOptions = [
 </script>
 
 <template>
+
     <Teleport to="#form-layout-actions">
         <Button variant="primary" :aria-label="__('Save')">
             <Icon name="save" class="sm:hidden" />
@@ -52,7 +58,7 @@ const notificationOptions = [
 
     <Button
         class="
-            min-[1000px]:hidden sticky top-3 mt-3 z-[var(--z-index-above)]
+            min-[1000px]:hidden sticky top-3 mt-3 z-(--z-index-above)
             sm:-translate-x-3 md:-translate-x-9 col-start-1 row-start-1
         "
         popovertarget="popover-left-panel"
@@ -367,7 +373,9 @@ const notificationOptions = [
         </div>
     </LayoutPanel>
 
+
     <div class="col-span-full row-start-1 max-[1000px]:pt-14">
+
         <Header class="mx-auto max-w-5xl">
             <template #title>
                 <StatusIndicator status="published" />
@@ -392,9 +400,11 @@ const notificationOptions = [
                         />
                     </Field>
 
+                    <div data-editing-field>
                     <Field :label="__('What do you like most about our band?')" required>
                         <Textarea v-model="favoriteThing" :rows="4" resize="vertical" />
                     </Field>
+                    </div>
 
                     <Field :label="__('How long have you been a fan?')" :instructions="__('If you don\'t remember, just give your best estimate.')">
                         <Input v-model="fanLength" />
@@ -447,7 +457,7 @@ const notificationOptions = [
 
     <Button
         class="
-        min-[1000px]:hidden sticky top-3 mt-3 z-[var(--z-index-above)]
+        min-[1000px]:hidden sticky top-3 mt-3 z-(--z-index-above)
         sm:translate-x-3 md:translate-x-9 mb-5 col-start-3 row-start-1"
         popovertarget="popover-right-panel"
         :text="__('Settings')"
@@ -463,7 +473,7 @@ const notificationOptions = [
                     <button class="right-panel-popover__close-button" title="Close" popovertarget="popover-right-panel">
                         <svg height="100pt" aria-hidden="true" viewBox="0 0 100 100" width="100pt" xmlns="http://www.w3.org/2000/svg"><path d="m91.668 13.676-5.3398-5.3398-36.328 36.324-36.328-36.324-5.3398 5.3398 36.328 36.324-36.328 36.324 5.3398 5.3398 36.328-36.324 36.328 36.324 5.3398-5.3398-36.328-36.324z"/></svg>
                     </button>
-                    <div class="@container py-6 px-4">
+                    <div class="@container py-6 px-2.5">
                         <Tabs v-model:modelValue="activeSettingsTab" :unmount-on-hide="false">
                             <TabList class="inline-flex flex-wrap [&_button]:w-auto! mb-4 mx-0!">
                                 <TabTrigger name="settings" :text="__('Settings')" />
@@ -472,7 +482,28 @@ const notificationOptions = [
                             </TabList>
 
                             <TabContent name="settings">
-                                <p class="text-sm text-gray-700 dark:text-gray-200">{{ __('Settings') }}</p>
+                                <div class="space-y-6 pt-8">
+                                    <div class="flex items-center gap-2.5">
+                                        <Icon name="fieldtype-radio" class="size-4 text-gray-500 dark:text-gray-300" />
+                                        <h3 class="text-xl font-medium antialiased">{{ __('Multi Choice') }}</h3>
+                                    </div>
+
+                                    <Field :label="__('Label')">
+                                        <Input v-model="settingsLabel" />
+                                    </Field>
+
+                                    <Field :label="__('Help Text')" :instructions="__('Additional field instructions like this.')">
+                                        <Textarea v-model="settingsHelpText" :rows="2" resize="vertical" />
+                                    </Field>
+
+                                    <Field :label="__('Placeholder')">
+                                        <Input v-model="settingsPlaceholder" />
+                                    </Field>
+
+                                    <Field :label="__('Character Limit')" :instructions="__('Set the recommended maximum number of enterable characters.')">
+                                        <Input v-model="settingsCharacterLimit" type="number" />
+                                    </Field>
+                                </div>
                             </TabContent>
                             <TabContent name="logic">
                                 <p class="text-sm text-gray-700 dark:text-gray-200">{{ __('Logic') }}</p>
@@ -484,8 +515,9 @@ const notificationOptions = [
                     </div>
                 </div>
             </div>
+
             <!-- This is the desktop nav - the content is repeated from the right panel -->
-            <div class="@container relative py-6 px-4 max-[1000px]:hidden">
+            <div class="@container relative py-6 px-2.5 max-[1000px]:hidden">
                 <Tabs v-model:modelValue="activeSettingsTab" :unmount-on-hide="false">
                     <TabList class="inline-flex flex-wrap [&_button]:w-auto! mb-4 mx-0!">
                         <TabTrigger name="settings" :text="__('Settings')" />
@@ -494,7 +526,64 @@ const notificationOptions = [
                     </TabList>
 
                     <TabContent name="settings">
-                        <p class="text-sm text-gray-700 dark:text-gray-200">{{ __('Settings') }}</p>
+                        <div class="space-y-6 pt-8">
+                            <div data-field-settings class="flex items-center gap-2.5">
+                                <Icon name="fieldtype-radio" class="size-4 text-gray-500 dark:text-gray-300" />
+                                <h3 class="text-xl font-medium antialiased">{{ __('Multi Choice') }}</h3>
+                            </div>
+
+                            <Field :label="__('Label')">
+                                <Input v-model="settingsLabel" />
+                            </Field>
+
+                            <Field :label="__('Help Text')" :instructions="__('Additional field instructions like this.')">
+                                <Textarea v-model="settingsHelpText" :rows="2" resize="vertical" />
+                            </Field>
+
+                            <Field :label="__('Placeholder')">
+                                <Input v-model="settingsPlaceholder" />
+                            </Field>
+
+                            <Field :label="__('Character Limit')" :instructions="__('Set the recommended maximum number of enterable characters.')">
+                                <Input v-model="settingsCharacterLimit" type="number" />
+                            </Field>
+
+                            <Field :label="__('Help Text')" :instructions="__('Additional field instructions like this.')">
+                                <Textarea v-model="settingsHelpText" :rows="2" resize="vertical" />
+                            </Field>
+
+                            <Field :label="__('Placeholder')">
+                                <Input v-model="settingsPlaceholder" />
+                            </Field>
+
+                            <Field :label="__('Character Limit')" :instructions="__('Set the recommended maximum number of enterable characters.')">
+                                <Input v-model="settingsCharacterLimit" type="number" />
+                            </Field>
+
+                            <Field :label="__('Help Text')" :instructions="__('Additional field instructions like this.')">
+                                <Textarea v-model="settingsHelpText" :rows="2" resize="vertical" />
+                            </Field>
+
+                            <Field :label="__('Placeholder')">
+                                <Input v-model="settingsPlaceholder" />
+                            </Field>
+
+                            <Field :label="__('Character Limit')" :instructions="__('Set the recommended maximum number of enterable characters.')">
+                                <Input v-model="settingsCharacterLimit" type="number" />
+                            </Field>
+
+                            <Field :label="__('Help Text')" :instructions="__('Additional field instructions like this.')">
+                                <Textarea v-model="settingsHelpText" :rows="2" resize="vertical" />
+                            </Field>
+
+                            <Field :label="__('Placeholder')">
+                                <Input v-model="settingsPlaceholder" />
+                            </Field>
+
+                            <Field :label="__('Character Limit')" :instructions="__('Set the recommended maximum number of enterable characters.')">
+                                <Input v-model="settingsCharacterLimit" type="number" />
+                            </Field>
+                        </div>
                     </TabContent>
                     <TabContent name="logic">
                         <p class="text-sm text-gray-700 dark:text-gray-200">{{ __('Logic') }}</p>