V4 compatability baseline

package.json

@@ -1,46 +1,42 @@
 {
-    "private": true,
-    "scripts": {
-        "test:unit": "vue-cli-service test:unit",
-        "dev": "mix",
-        "development": "mix",
-        "hot": "mix watch --hot",
-        "prod": "mix --production",
-        "production": "mix --production",
-        "test": "jest",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000"
-    },
-    "dependencies": {
-        "@simonwep/pickr": "^1.8.1",
-        "axios": "^0.21.4",
-        "js-laravel-validation": "^1.3.1",
-        "uuid": "^8.3.2",
-        "vue-eva-icons": "^1.1.1",
-        "vue-gpickr": "^0.2.7",
-        "vue-simple-accordion": "^0.1.0",
-        "vuedraggable": "^2.24.3",
-        "vuex": "^3.6.2"
-    },
-    "devDependencies": {
-        "@vue/test-utils": "^1.2.1",
-        "babel-core": "^7.0.0-bridge.0",
-        "babel-jest": "^27.0.2",
-        "cross-env": "^7.0",
-        "jest": "^27.0.4",
-        "jsdom": "^16.6.0",
-        "jsdom-global": "^3.0.2",
-        "laravel-mix": "^6.0",
-        "postcss": "^8.1",
-        "postcss-import": "^14.0.2",
-        "postcss-preset-env": "^7.0.0",
-        "resolve-url-loader": "^4.0.0",
-        "sass": "^1.43.4",
-        "sass-loader": "^12.1.0",
-        "tailwindcss": "^3.0.19",
-        "vue": "^2.6.12",
-        "vue-jest": "^4.0.1",
-        "vue-loader": "^15.9.7",
-        "vue-template-compiler": "^2.6.12"
-    }
-}
+  "private": true,
+  "scripts": {
+    "test:unit": "vue-cli-service test:unit",
+    "dev": "mix",
+    "development": "mix",
+    "hot": "mix watch --hot",
+    "prod": "mix --production",
+    "production": "mix --production",
+    "test": "jest",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000"
+  },
+  "dependencies": {
+    "@simonwep/pickr": "^1.8.1",
+    "axios": "^0.21.4",
+    "js-laravel-validation": "^1.3.1",
+    "uuid": "^8.3.2",
+    "vue-eva-icons": "^1.1.1",
+    "vue-gpickr": "^0.2.7",
+    "vue-simple-accordion": "^0.1.0",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^1.2.1",
+    "babel-core": "^7.0.0-bridge.0",
+    "cross-env": "^7.0",
+    "laravel-mix": "^6.0",
+    "postcss": "^8.1",
+    "postcss-import": "^14.0.2",
+    "postcss-preset-env": "^7.0.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass": "^1.43.4",
+    "sass-loader": "^12.1.0",
+    "tailwindcss": "^3.3.0",
+    "vue": "^2.6.12",
+    "vue-jest": "^4.0.1",
+    "vue-loader": "^15.9.7",
+    "vue-template-compiler": "^2.6.12"
+  }
+}

resources/js/buildamic.js

@@ -6,9 +6,11 @@ import BreakpointSwitcher from './components/shared/settings/BreakpointSwitcher.
 import { buildamicStore } from './store'
 
 Statamic.booting(() => {
-    Statamic.$store.registerModule('buildamicStore', buildamicStore)
-    Statamic.$components.register('vue-tabs', VueTabs)
-    Statamic.$components.register('vue-tab', VueTab)
-    Statamic.$components.register('breakpoint-switcher', BreakpointSwitcher)
-    Statamic.$components.register('buildamic-fieldtype', Buildamic);
+  Statamic.$store.registerModule('buildamicStore', buildamicStore)
+  Statamic.$components.register('vue-tabs', VueTabs)
+  Statamic.$components.register('vue-tab', VueTab)
+  Statamic.$components.register('breakpoint-switcher', BreakpointSwitcher)
+  Statamic.$components.register('buildamic-fieldtype', Buildamic);
+
+  // Statamic.use(vfmPlugin)
 });

resources/js/components/ModuleSelector.vue

@@ -33,7 +33,7 @@
           <div class="fieldtype-selector">
             <div class="fieldtype-list">
               <div
-                class="p-1"
+                class="p-3"
                 v-for="(field, key) in fieldDefaults.fields"
                 :key="key"
               >
@@ -63,7 +63,7 @@
                 </a>
               </div>
               <div
-                class="p-1"
+                class="p-3"
                 v-for="(field, key) in fieldDefaults.sets"
                 :key="key"
               >

resources/js/components/columns/GridColumn.vue

@@ -3,19 +3,19 @@
     class="
       buildamic-column
       border-2 border-dashed
-      p-2
-      gap-2
+      p-6
+      gap-3
       flex flex-col
       items-center
     "
     :class="[columnClass, { 'justify-center': !fields.length }]"
   >
     <vue-draggable
-      v-if="fields.length"
+
       :list="fields"
       :group="{ name: 'columns' }"
       ghost-class="ghost"
-      class="w-full flex flex-col gap-2 items-center"
+      class="w-full flex flex-col gap-3 items-center"
     >
       <template v-for="(field, index) in fields">
         <field-display

resources/js/components/fields/FieldDisplay.vue

@@ -5,7 +5,7 @@
       border border-t-4 border-grey-70
       rounded
       w-full
-      p-1
+      p-3
       text-center
       relative
     "

resources/js/components/fields/FieldSettings.vue

@@ -3,13 +3,19 @@
     <admin-label :field="field" />
     <vue-tabs :id="field.uuid">
       <vue-tab name="Content" selected="selected">
-        <single-field :field="field" :fieldDefaults="fieldDefaults" />
+        <div class="publish-fields @container w-full">
+          <single-field :field="field" :fieldDefaults="fieldDefaults" />
+        </div>
       </vue-tab>
       <vue-tab name="Design">
-        <design-tab :field="field" :fieldDefaults="fieldDefaults" />
+        <div class="publish-fields @container w-full">
+          <design-tab :field="field" :fieldDefaults="fieldDefaults" />
+        </div>
       </vue-tab>
       <vue-tab name="Options">
-        <options-tab :field="field" />
+        <div class="publish-fields @container w-full">
+          <options-tab :field="field" />
+        </div>
       </vue-tab>
     </vue-tabs>
   </div>

resources/js/components/fields/SingleField.vue

@@ -3,21 +3,21 @@
     :handle="fieldData.config.statamic_settings.handle"
     :field="field"
     :defaults="fieldDefaults"
-    class="buildamic-field"
+    class="buildamic-field w-full"
     :class="[`${getType}-fieldtype`]"
   >
-    <element-container>
-      <publish-field
-        :config="getConfig"
-        :value="fieldData.value"
-        :meta="getMeta"
-        :handle="fieldData.config.statamic_settings.handle"
-        @input="updateField({ obj: field, path: 'value', val: $event })"
-        @meta-updated="
-          updateMeta({ obj: field, path: 'computed.meta', val: $event })
-        "
-      />
-    </element-container>
+      <element-container>
+        <publish-field
+          :config="getConfig"
+          :value="fieldData.value"
+          :meta="getMeta"
+          :handle="fieldData.config.statamic_settings.handle"
+          @input="updateField({ obj: field, path: 'value', val: $event })"
+          @meta-updated="
+            updateMeta({ obj: field, path: 'computed.meta', val: $event })
+          "
+        />
+      </element-container>
     <error-display />
   </field-base>
 </template>

resources/js/components/fieldtypes/Buildamic.vue

@@ -5,7 +5,7 @@
       handle=".sortable-handle"
       :group="{ name: 'sections' }"
       ghost-class="ghost"
-      class="flex flex-col gap-2"
+      class="flex flex-col gap-3"
     >
       <component
         :is="`grid-${section.type}`"

resources/js/components/rows/ColumnSelector.vue

@@ -1,19 +1,7 @@
 <template>
-  <vue-modal
-    :name="name"
-    :scrollable="true"
-    :draggable="true"
-    :clickToClose="true"
-    :height="'auto'"
-    v-cloak
-  >
-    <eva-icon
-      @click="$modals.close(name)"
-      name="close-circle"
-      class="text-grey-80 cursor-pointer inset-y-0 m-2 absolute right-0"
-    ></eva-icon>
-    <div class="p-6 bg-grey-40 text-grey-80">
-      <span class="block text-2xl text-grey-80 mb-4"
+
+    <div class="p-6 bg-gray-400 text-gray-800">
+      <span class="block text-2xl text-gray-800 mb-4"
         >Choose column layout:</span
       >
       <ul class="list-unstyled relative flex flex-wrap">
@@ -30,7 +18,7 @@
           :key="layout"
         >
           <div
-            class="mb-2 w-full buildamic-row bg-grey-60 rounded p-1"
+            class="mb-2 w-full buildamic-row bg-gray-600 rounded p-3"
             :style="colCount(i)"
           >
             <div
@@ -39,13 +27,12 @@
               :key="name + index"
               :class="colClass"
             >
-              <div class="bg-grey-30 h-12"></div>
+              <div class="bg-gray-300 h-12"></div>
             </div>
           </div>
         </li>
       </ul>
     </div>
-  </vue-modal>
 </template>
 
 <script>
@@ -139,8 +126,6 @@ export default {
         }
       });
 
-      this.$modals.close(this.name);
-
       // Send this off to vuex for mutatin'
       // this.changeColumnLayout({
       //     id: this.component.id,

resources/js/components/rows/GridRow.vue

@@ -16,7 +16,7 @@
     <div
       class="sortable-handle bg-green-200 absolute top-0 left-0 h-full"
     ></div>
-    <div class="buildamic-row p-2 w-full gap-2" :style="colCount">
+    <div class="buildamic-row p-6 pt-10 w-full gap-3" :style="colCount">
       <button
         class="py-1 px-1 border border-dashed"
         style="grid-column: 1 / -1"
@@ -46,11 +46,14 @@
       :index="rowIndex"
       :customSettings="customSettings"
     />
-
-    <column-selector
-      :row="row"
-      :name="row.uuid + '-column-layouts'"
-    ></column-selector>
+    <stack name="column-selector-stack" v-if="columnStackOpen" :beforeClose="handleClose">
+      <div class="buildamic-settings-stack h-full p-4 bg-white overflow-auto">
+        <column-selector
+          :row="row"
+          :name="row.uuid + '-column-layouts'"
+        ></column-selector>
+      </div>
+    </stack>
   </div>
 </template>
 
@@ -75,6 +78,7 @@ export default {
   data() {
     return {
       columns: this.row.value ?? [],
+      columnStackOpen: false,
       rowID: this.row.uuid,
       columnsTotal:
         this.row.config.buildamic_settings?.attributes?.column_count_total ||
@@ -83,7 +87,7 @@ export default {
         columns: {
           icon: "grid",
           title: "Column Selector",
-          action: () => this.openModal(),
+          action: () => this.openStack(),
           order: 30,
         },
       },
@@ -116,9 +120,12 @@ export default {
     },
   },
   methods: {
-    openModal() {
-      this.$modals.open(`${this.row.uuid}-column-layouts`);
+    openStack() {
+      this.columnStackOpen = !this.columnStackOpen;
     },
+    handleClose() {
+      this.columnStackOpen = false;
+    }
   },
 };
 </script>

resources/js/components/sections/GridGlobalSection.vue

@@ -2,7 +2,7 @@
   <div
     class="
       buildamic-section
-      p-2
+      p-6
       pl-1
       border border-t-4
       rounded
@@ -22,7 +22,7 @@
 
     <element-container>
       <publish-field
-        class="border p-2"
+        class="border p-6"
         :config="config"
         :meta="getMeta"
         :value="section.value || []"

resources/js/components/sections/GridSection.vue

@@ -4,8 +4,8 @@
       buildamic-section
       transition-all
       duration-200
-      p-2
-      pb-4
+      p-6
+      pb-10
       border border-t-4
       rounded
       border-blue-500
@@ -21,7 +21,7 @@
       :group="{ name: 'rows' }"
       handle=".sortable-handle"
       ghost-class="ghost"
-      class="section-draggable flex flex-grow flex-col gap-2 group"
+      class="section-draggable w-full flex flex-grow flex-col gap-3 group"
     >
       <template v-if="rows.length">
         <grid-row