Skip to content

Commit 43e4f82

Browse files
duncanmccleanduncanmcclean
committed
Convert components to the composition API
1 parent da6f563 commit 43e4f82

4 files changed

Lines changed: 118 additions & 158 deletions

File tree

‎resources/js/components/inputs/relationship/Item.vue‎

Lines changed: 49 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,65 @@
1-
<template>
2-
<div class="mb-1.5 last:mb-0">
3-
<StatamicRelatedItem v-bind="$props" @removed="removed" />
4-
5-
<ConfirmationModal
6-
v-if="showDeletionConfirmationModel"
7-
:title="__('Unlink')"
8-
:body-text="__('Unlinking this model will result in it being deleted. Are you sure you want to do this?')"
9-
:button-text="__('Delete')"
10-
:danger="true"
11-
@confirm="
12-
showDeletionConfirmationModel = false;
13-
$emit('removed');
14-
"
15-
@cancel="showDeletionConfirmationModel = false"
16-
/>
17-
</div>
18-
</template>
19-
20-
<script>
1+
<script setup>
212
/**
223
* Sometimes unlinking a related model will result in it being deleted.
234
* Before doing that, we want to show a confirmation modal to the user.
245
*/
256
267
import ConfirmationModal from '@statamic/components/modals/ConfirmationModal.vue';
278
import StatamicRelatedItem from '@statamic/components/inputs/relationship/Item.vue';
9+
import { inject, ref, computed, getCurrentInstance } from 'vue'
10+
11+
const store = inject('store');
12+
const instance = getCurrentInstance();
2813
29-
export default {
30-
components: {
31-
ConfirmationModal,
32-
StatamicRelatedItem,
33-
},
14+
const emit = defineEmits(['removed']);
3415
35-
inject: ['store'],
16+
const props = defineProps({
17+
item: Object,
18+
config: Object,
19+
statusIcon: Boolean,
20+
editable: Boolean,
21+
sortable: Boolean,
22+
readOnly: Boolean,
23+
formComponent: String,
24+
formComponentProps: Object,
25+
formStackSize: String,
26+
});
3627
37-
props: {
38-
item: Object,
39-
config: Object,
40-
statusIcon: Boolean,
41-
editable: Boolean,
42-
sortable: Boolean,
43-
readOnly: Boolean,
44-
formComponent: String,
45-
formComponentProps: Object,
46-
formStackSize: String,
47-
},
28+
const showDeletionConfirmationModel = ref(false);
4829
49-
data() {
50-
return {
51-
showDeletionConfirmationModel: false,
52-
};
53-
},
30+
const unlinkBehavior = computed(() => {
31+
const storeKey = instance.parent.parent.props.fieldPathKeys?.join('.') || instance.parent.parent.props.handle;
5432
55-
computed: {
56-
unlinkBehavior() {
57-
let fieldtypeMeta = data_get(this.store.meta, this.$parent.$parent.fieldPathKeys.join('.'));
33+
return data_get(store.meta, storeKey)?.unlinkBehavior;
34+
});
5835
59-
return fieldtypeMeta.unlinkBehavior;
60-
},
61-
},
36+
function removed() {
37+
if (unlinkBehavior.value === 'delete') {
38+
showDeletionConfirmationModel.value = true;
39+
return;
40+
}
6241
63-
methods: {
64-
removed() {
65-
if (this.unlinkBehavior === 'delete') {
66-
this.showDeletionConfirmationModel = true;
67-
return;
68-
}
42+
emit('removed');
43+
}
6944
70-
this.$emit('removed');
71-
},
72-
},
73-
};
45+
function confirmDeletion() {
46+
showDeletionConfirmationModel.value = false;
47+
emit('removed');
48+
}
7449
</script>
50+
51+
<template>
52+
<div class="mb-1.5 last:mb-0">
53+
<StatamicRelatedItem v-bind="$props" @removed="removed" />
54+
55+
<ConfirmationModal
56+
v-if="showDeletionConfirmationModel"
57+
:title="__('Unlink')"
58+
:body-text="__('Unlinking this model will result in it being deleted. Are you sure you want to do this?')"
59+
:button-text="__('Delete')"
60+
:danger="true"
61+
@confirm="confirmDeletion"
62+
@cancel="showDeletionConfirmationModel = false"
63+
/>
64+
</div>
65+
</template>

‎resources/js/components/resources/BaseCreateForm.vue‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
<script setup>
2+
const props = defineProps({
3+
actions: Object,
4+
resource: Object,
5+
resourceHasRoutes: Boolean,
6+
createLabel: String,
7+
blueprint: Object,
8+
values: Object,
9+
meta: Object,
10+
canManagePublishState: Boolean,
11+
createAnotherUrl: String,
12+
listingUrl: String,
13+
});
14+
15+
function saved(response) {
16+
window.location = response.data.data.edit_url + '?created=true';
17+
}
18+
</script>
19+
120
<template>
221
<runway-publish-form
322
:is-creating="true"
@@ -16,26 +35,3 @@
1635
@saved="saved"
1736
></runway-publish-form>
1837
</template>
19-
20-
<script>
21-
export default {
22-
props: {
23-
actions: Object,
24-
resource: Object,
25-
resourceHasRoutes: Boolean,
26-
createLabel: String,
27-
blueprint: Object,
28-
values: Object,
29-
meta: Object,
30-
canManagePublishState: Boolean,
31-
createAnotherUrl: String,
32-
listingUrl: String,
33-
},
34-
35-
methods: {
36-
saved(response) {
37-
window.location = response.data.data.edit_url + '?created=true';
38-
},
39-
},
40-
};
41-
</script>

‎resources/js/components/resources/Listing.vue‎

Lines changed: 26 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1+
<script setup>
2+
import { StatusIndicator, DropdownItem, Listing } from '@statamic/ui';
3+
import { ref } from 'vue';
4+
5+
const props = defineProps({
6+
resource: String,
7+
actionUrl: String,
8+
columns: Array,
9+
filters: Array,
10+
titleColumn: String,
11+
hasPublishStates: Boolean,
12+
});
13+
14+
const preferencesPrefix = ref(`runway.${props.resource}`);
15+
const requestUrl = ref(cp_url(`runway/${props.resource}/listing-api`));
16+
const items = ref(null);
17+
const page = ref(null);
18+
const perPage = ref(null);
19+
20+
function requestComplete({ items: newItems, parameters }) {
21+
items.value = newItems;
22+
page.value = parameters.page;
23+
perPage.value = parameters.perPage;
24+
}
25+
</script>
26+
127
<template>
228
<Listing
329
ref="listing"
@@ -31,42 +57,3 @@
3157
</template>
3258
</Listing>
3359
</template>
34-
35-
<script>
36-
import { StatusIndicator, DropdownItem, Listing } from '@statamic/ui';
37-
38-
export default {
39-
components: {
40-
StatusIndicator,
41-
Listing,
42-
DropdownItem,
43-
},
44-
45-
props: {
46-
resource: String,
47-
actionUrl: String,
48-
columns: Array,
49-
filters: Array,
50-
titleColumn: String,
51-
hasPublishStates: Boolean,
52-
},
53-
54-
data() {
55-
return {
56-
preferencesPrefix: `runway.${this.resource}`,
57-
requestUrl: cp_url(`runway/${this.resource}/listing-api`),
58-
items: null,
59-
page: null,
60-
perPage: null,
61-
};
62-
},
63-
64-
methods: {
65-
requestComplete({ items, parameters, activeFilters }) {
66-
this.items = items;
67-
this.page = parameters.page;
68-
this.perPage = parameters.perPage;
69-
},
70-
},
71-
};
72-
</script>

‎resources/js/components/resources/View.vue‎

Lines changed: 24 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,27 @@
1+
<script setup>
2+
import ItemActions from '@statamic/components/actions/ItemActions.vue';
3+
import { Header, Dropdown, DropdownMenu, DropdownLabel, DropdownItem, DropdownSeparator, Button } from '@statamic/ui';
4+
import RunwayListing from './Listing.vue';
5+
6+
const props = defineProps({
7+
icon: { type: String, required: true },
8+
title: { type: String, required: true },
9+
handle: { type: String, required: true },
10+
canCreate: { type: Boolean, required: true },
11+
createUrl: { type: String, required: true },
12+
createLabel: { type: String, required: true },
13+
columns: { type: Array, required: true },
14+
filters: { type: Array, required: true },
15+
actions: { type: Array, required: true },
16+
actionUrl: { type: String, required: true },
17+
modelsActionUrl: { type: String, required: true },
18+
blueprintUrl: { type: String, required: true },
19+
canEditBlueprint: { type: Boolean, required: true },
20+
hasPublishStates: { type: Boolean, required: true },
21+
titleColumn: { type: String, required: true },
22+
});
23+
</script>
24+
125
<template>
226
<div>
327
<Header :title="__(title)" :icon>
@@ -44,41 +68,3 @@
4468
/>
4569
</div>
4670
</template>
47-
48-
<script>
49-
import ItemActions from '@statamic/components/actions/ItemActions.vue';
50-
import { Header, Dropdown, DropdownMenu, DropdownLabel, DropdownItem, DropdownSeparator, Button } from '@statamic/ui';
51-
import RunwayListing from './Listing.vue';
52-
53-
export default {
54-
components: {
55-
ItemActions,
56-
Header,
57-
Dropdown,
58-
DropdownMenu,
59-
DropdownLabel,
60-
DropdownItem,
61-
DropdownSeparator,
62-
Button,
63-
RunwayListing,
64-
},
65-
66-
props: {
67-
icon: { type: String, required: true },
68-
title: { type: String, required: true },
69-
handle: { type: String, required: true },
70-
canCreate: { type: Boolean, required: true },
71-
createUrl: { type: String, required: true },
72-
createLabel: { type: String, required: true },
73-
columns: { type: Array, required: true },
74-
filters: { type: Array, required: true },
75-
actions: { type: Array, required: true },
76-
actionUrl: { type: String, required: true },
77-
modelsActionUrl: { type: String, required: true },
78-
blueprintUrl: { type: String, required: true },
79-
canEditBlueprint: { type: Boolean, required: true },
80-
hasPublishStates: { type: Boolean, required: true },
81-
titleColumn: { type: String, required: true },
82-
},
83-
};
84-
</script>

0 commit comments

Comments
 (0)