Reorganise component folder structure

resources/js/components/Listing/DataListFilters.vue → resources/js/components/data-list/Filters.vue

@@ -1,17 +1,25 @@
 <template>
+
+    <!--
+        This component is *mostly* the same as the one in Statamic Core, however with one difference:
+        it swaps out the 'fields' string with 'runway-fields' to avoid breaking the Fields filter on Entry Listing Tables.
+
+        See https://github.com/statamic-rad-pack/runway/pull/292 for more info.
+    -->
+
     <div class="shadow-inner bg-gray-300 dark:bg-dark-600">
         <div class="flex items-center flex-wrap px-3 border-b dark:border-dark-900 pt-2">
 
             <!-- Field filter (requires custom selection UI) -->
             <popover v-if="fieldFilter" placement="bottom-start" @closed="fieldFilterClosed">
                 <template slot="trigger">
-                    <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
+                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2" @click="resetFilterPopover">
                         {{ fieldFilter.title }}
                         <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover }">
-                    <div class="flex flex-col text-left min-w-[18rem]">
+                    <div class="flex flex-col rtl:text-right ltr:text-left min-w-[18rem]">
                         <div class="filter-fields text-sm">
                             <field-filter
                                 ref="fieldFilter"
@@ -30,7 +38,7 @@
             <!-- Standard pinned filters -->
             <popover v-if="pinnedFilters.length" v-for="filter in pinnedFilters" :key="filter.handle" placement="bottom-start" :stop-propagation="false">
                 <template slot="trigger">
-                    <button class="filter-badge filter-badge-control mr-2 mb-2">
+                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2">
                         {{ filter.title }}
                         <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
@@ -51,7 +59,7 @@
             <!-- Standard unpinned filters -->
             <popover v-if="unpinnedFilters.length" placement="bottom-start" :stop-propagation="false">
                 <template slot="trigger">
-                    <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
+                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2" @click="resetFilterPopover">
                         {{ __('Filter') }}
                         <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
@@ -85,11 +93,11 @@
             </popover>
 
             <!-- Active filter badges -->
-            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
+            <div class="filter-badge rtl:ml-2 ltr:mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
                 <span>{{ badge }}</span>
                 <button @click="removeFieldFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
-            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in standardBadges">
+            <div class="filter-badge rtl:ml-2 ltr:mr-2 mb-2" v-for="(badge, handle) in standardBadges">
                 <span>{{ badge }}</span>
                 <button @click="removeStandardFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
@@ -208,7 +216,7 @@ export default {
         },
 
         savingPresetHandle() {
-            return this.$slugify(this.savingPresetName, '_');
+            return snake_case(this.savingPresetName);
         },
 
         isUpdatingPreset() {
@@ -255,15 +263,15 @@ export default {
 
             delete fields[handle];
 
-            this.$emit('changed', {handle: 'runway-fields', values: fields});
+            this.$emit('changed', { handle: 'runway-fields', values: fields });
         },
 
         removeStandardFilter(handle) {
-            this.$emit('changed', {handle: handle, values: null});
+            this.$emit('changed', { handle: handle, values: null });
         },
 
         save() {
-            if (! this.canSave || ! this.preferencesPayload) return;
+            if (!this.canSave || !this.preferencesPayload) return;
 
             this.saving = true;
 

resources/js/components/Listing/RunwayListing.vue → resources/js/components/resources/Listing.vue

@@ -143,7 +143,7 @@
 
 <script>
 import Listing from '../../../../vendor/statamic/cms/resources/js/components/Listing.vue'
-import DataListFilters from './DataListFilters.vue'
+import DataListFilters from '../data-list/Filters.vue'
 
 export default {
     mixins: [Listing],

resources/js/components/ResourceView.vue → resources/js/components/resources/View.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import RunwayListing from './Listing/RunwayListing.vue'
+import RunwayListing from './Listing.vue'
 
 export default {
     components: {

resources/js/cp.js

@@ -1,7 +1,5 @@
-import PublishForm from './components/Publish/PublishForm.vue'
-import ResourceView from './components/ResourceView.vue'
-import HasManyFieldtypeIndex from '../../vendor/statamic/cms/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue'
+import PublishForm from './components/resources/PublishForm.vue'
+import ResourceView from './components/resources/View.vue'
 
 Statamic.$components.register('runway-publish-form', PublishForm)
 Statamic.$components.register('resource-view', ResourceView)
-Statamic.$components.register('has_many-fieldtype-index', HasManyFieldtypeIndex)

src/Fieldtypes/HasManyFieldtype.php

@@ -10,6 +10,8 @@
 
 class HasManyFieldtype extends BaseFieldtype
 {
+    protected $indexComponent = 'relationship';
+
     protected function configFieldItems(): array
     {
         $config = [