Skip to content

Commit 34e695b

Browse files
jesseleitejasonvarga
jesseleite
and
jasonvarga
authored
[6.x] Fleshing out command palette actions (#12140)
Co-authored-by: Jason Varga <jason@pixelfear.com>
1 parent 31f5ddf commit 34e695b

33 files changed

Lines changed: 728 additions & 91 deletions

File tree

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
<script setup>
2-
import { ref } from 'vue';
2+
import { ref, onMounted } from 'vue';
33
import { Badge, DropdownItem, Listing } from '@/components/ui';
44
55
const props = defineProps(['initialRows', 'initialColumns']);
66
const rows = ref(props.initialRows);
77
const columns = ref(props.initialColumns);
8+
9+
onMounted(() => {
10+
props.initialRows.forEach(addon => {
11+
Statamic.$commandPalette.add({
12+
category: Statamic.$commandPalette.category.Actions,
13+
text: [__('Browse the Marketplace'), addon.name],
14+
icon: 'external-link',
15+
url: addon.marketplace_url,
16+
openNewTab: true,
17+
});
18+
});
19+
});
820
</script>
921

1022
<template>

‎resources/js/components/assets/Browser/Browser.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,8 @@ export default {
398398
399399
mounted() {
400400
this.mode = this.getPreference('mode') || 'table';
401+
402+
this.addToCommandPalette();
401403
},
402404
403405
watch: {
@@ -683,6 +685,72 @@ export default {
683685
uploadsUpdated(uploads) {
684686
this.uploads = uploads;
685687
},
688+
689+
addToCommandPalette() {
690+
Statamic.$commandPalette.add({
691+
when: () => this.canCreateContainers,
692+
category: Statamic.$commandPalette.category.Actions,
693+
text: __('Upload'),
694+
icon: 'upload',
695+
action: () => this.openFileBrowser(),
696+
prioritize: true,
697+
});
698+
699+
Statamic.$commandPalette.add({
700+
when: () => this.canCreateContainers,
701+
category: Statamic.$commandPalette.category.Actions,
702+
text: __('Create Folder'),
703+
icon: 'folder-add',
704+
action: () => this.startCreatingFolder(),
705+
});
706+
707+
Statamic.$commandPalette.add({
708+
category: Statamic.$commandPalette.category.Actions,
709+
text: __('Toggle Grid Layout'),
710+
icon: 'layout-grid',
711+
when: () => this.mode === 'table',
712+
action: () => this.mode = 'grid',
713+
});
714+
715+
Statamic.$commandPalette.add({
716+
category: Statamic.$commandPalette.category.Actions,
717+
text: __('Toggle List Layout'),
718+
icon: 'layout-list',
719+
when: () => this.mode === 'grid',
720+
action: () => this.mode = 'table',
721+
});
722+
723+
Statamic.$commandPalette.add({
724+
when: () => this.canCreateContainers,
725+
category: Statamic.$commandPalette.category.Actions,
726+
text: __('Create Container'),
727+
icon: 'container-add',
728+
url: this.createContainerUrl,
729+
});
730+
731+
Statamic.$commandPalette.add({
732+
when: () => this.container.can_edit,
733+
category: Statamic.$commandPalette.category.Actions,
734+
text: __('Configure Container'),
735+
icon: 'cog',
736+
url: this.container.edit_url,
737+
});
738+
739+
Statamic.$commandPalette.add({
740+
category: Statamic.$commandPalette.category.Actions,
741+
text: __('Edit Blueprint'),
742+
icon: 'blueprint-edit',
743+
url: this.container.blueprint_url,
744+
});
745+
746+
Statamic.$commandPalette.add({
747+
when: () => this.container.can_delete,
748+
category: Statamic.$commandPalette.category.Actions,
749+
text: __('Delete Container'),
750+
icon: 'trash',
751+
action: () => this.$refs.deleter.confirm(),
752+
});
753+
}
686754
},
687755
};
688756
</script>

‎resources/js/components/blueprints/Builder.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,16 @@
33
<ui-header :title="__('Edit Blueprint')" icon="blueprints">
44
<template #actions>
55
<slot name="actions"></slot>
6-
<ui-button type="submit" variant="primary" @click.prevent="save" v-text="__('Save')" />
6+
<ui-command-palette-item
7+
:category="$commandPalette.category.Actions"
8+
:text="__('Save')"
9+
icon="save"
10+
:action="save"
11+
prioritize
12+
v-slot="{ text, action }"
13+
>
14+
<ui-button type="submit" variant="primary" @click.prevent="action" v-text="text" />
15+
</ui-command-palette-item>
716
</template>
817
</ui-header>
918

‎resources/js/components/blueprints/Fields.vue‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,12 @@
2525
</div>
2626

2727
<div class="blueprint-section-field-actions flex gap-2">
28-
<LinkFields :exclude-fieldset="excludeFieldset" @linked="$emit('field-linked', $event)" />
29-
<ui-button icon="add-circle" :text="__('Create Field')" @click="isSelectingNewFieldtype = true" />
28+
<LinkFields
29+
:exclude-fieldset="excludeFieldset"
30+
:with-command-palette="withCommandPalette"
31+
@linked="$emit('field-linked', $event)"
32+
/>
33+
<ui-button icon="add-circle" :text="__('Create Field')" @click="createField" />
3034
</div>
3135

3236
<stack
@@ -86,6 +90,7 @@ export default {
8690
editingField: {},
8791
suggestableConditionFields: Array,
8892
excludeFieldset: String,
93+
withCommandPalette: Boolean,
8994
},
9095
9196
inject: {
@@ -99,6 +104,12 @@ export default {
99104
};
100105
},
101106
107+
mounted() {
108+
if (this.withCommandPalette) {
109+
this.addToCommandPalette();
110+
}
111+
},
112+
102113
methods: {
103114
fieldComponent(field) {
104115
return field.type === 'import' ? 'ImportField' : 'RegularField';
@@ -121,6 +132,10 @@ export default {
121132
this.$nextTick(() => (this.pendingCreatedField = pending));
122133
},
123134
135+
createField() {
136+
this.isSelectingNewFieldtype = true;
137+
},
138+
124139
fieldCreated(created) {
125140
let handle = created.handle;
126141
delete created.handle;
@@ -154,6 +169,19 @@ export default {
154169
155170
this.$nextTick(() => (this.pendingCreatedField = pending));
156171
},
172+
173+
addToCommandPalette() {
174+
if (!this.withCommandPalette) {
175+
return;
176+
}
177+
178+
Statamic.$commandPalette.add({
179+
category: Statamic.$commandPalette.category.Actions,
180+
text: __('Create Field'),
181+
icon: 'add-circle',
182+
action: this.createField,
183+
});
184+
},
157185
},
158186
};
159187
</script>

‎resources/js/components/blueprints/LinkFields.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export default {
105105
106106
props: {
107107
excludeFieldset: String,
108+
withCommandPalette: Boolean,
108109
},
109110
110111
data() {
@@ -140,6 +141,12 @@ export default {
140141
};
141142
},
142143
144+
mounted() {
145+
if (this.withCommandPalette) {
146+
this.addToCommandPalette();
147+
}
148+
},
149+
143150
methods: {
144151
linkField() {
145152
const [fieldsetHandle, fieldHandle] = this.reference.split('.');
@@ -175,6 +182,19 @@ export default {
175182
this.fieldset = null;
176183
this.importPrefix = null;
177184
},
185+
186+
addToCommandPalette() {
187+
if (!this.withCommandPalette) {
188+
return;
189+
}
190+
191+
Statamic.$commandPalette.add({
192+
category: Statamic.$commandPalette.category.Actions,
193+
text: __('Link Existing'),
194+
icon: 'link',
195+
action: () => this.open = true,
196+
});
197+
},
178198
},
179199
};
180200
</script>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,13 +267,15 @@ export default {
267267
Statamic.$commandPalette.add({
268268
category: Statamic.$commandPalette.category.Actions,
269269
text: __('Toggle Grid Layout'),
270+
icon: 'layout-grid',
270271
when: () => this.mode === 'table',
271272
action: () => this.mode = 'grid',
272273
});
273274
274275
Statamic.$commandPalette.add({
275276
category: Statamic.$commandPalette.category.Actions,
276277
text: __('Toggle List Layout'),
278+
icon: 'layout-list',
277279
when: () => this.mode === 'grid',
278280
action: () => this.mode = 'table',
279281
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,7 @@ export default {
407407
url: this.scaffoldUrl,
408408
});
409409
410-
this.$refs.actions.preparedActions.forEach(action => Statamic.$commandPalette.add({
410+
this.$refs.actions?.preparedActions.forEach(action => Statamic.$commandPalette.add({
411411
category: Statamic.$commandPalette.category.Actions,
412412
text: [__('Collection'), action.title],
413413
icon: action.icon,

‎resources/js/components/command-palette/CommandPalette.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ import { Icon, Subheading } from '@/components/ui';
1414
1515
let open = ref(false);
1616
let query = ref('');
17+
let serverCategories = Statamic.$config.get('commandPaletteCategories');
1718
let serverPreloadedItems = Statamic.$config.get('commandPalettePreloadedItems');
18-
let serverItemsLoaded = ref(false);
1919
let serverItems = ref(setServerLoadingItems());
20+
let serverItemsLoaded = ref(false);
2021
let searchResults = ref([]);
2122
let selected = ref(null);
2223
let recentItems = ref(getRecentItems());
@@ -73,8 +74,6 @@ const results = computed(() => {
7374
};
7475
});
7576
76-
let serverCategories = Statamic.$config.get('commandPaletteCategories');
77-
7877
let categoryOrder = query.value
7978
? uniq(filtered.map(item => item.category))
8079
: serverCategories;

‎resources/js/components/entries/PublishForm.vue‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
</template>
88

99
<ItemActions
10+
ref="actions"
1011
v-if="!isCreating && hasItemActions"
1112
:item="values.id"
1213
:url="itemActionUrl"
@@ -799,6 +800,31 @@ export default {
799800
this.itemActions = response.data.itemActions;
800801
}
801802
},
803+
804+
addToCommandPalette() {
805+
Statamic.$commandPalette.add({
806+
category: Statamic.$commandPalette.category.Actions,
807+
text: this.saveText,
808+
icon: 'save',
809+
action: () => this.save(),
810+
prioritize: true,
811+
});
812+
813+
Statamic.$commandPalette.add({
814+
category: Statamic.$commandPalette.category.Actions,
815+
text: __('Edit Blueprint'),
816+
icon: 'blueprint-edit',
817+
when: () => this.canEditBlueprint,
818+
url: this.actions.editBlueprint,
819+
});
820+
821+
this.$refs.actions?.preparedActions.forEach(action => Statamic.$commandPalette.add({
822+
category: Statamic.$commandPalette.category.Actions,
823+
text: action.title,
824+
icon: action.icon,
825+
action: action.run,
826+
}));
827+
},
802828
},
803829
804830
mounted() {
@@ -818,6 +844,8 @@ export default {
818844
if (typeof this.autosaveInterval === 'number') {
819845
this.setAutosaveInterval();
820846
}
847+
848+
this.addToCommandPalette();
821849
},
822850
823851
created() {
@@ -831,15 +859,12 @@ export default {
831859
container = computed(() => this.$refs.container);
832860
},
833861
834-
unmounted() {
835-
clearTimeout(this.trackDirtyStateTimeout);
836-
},
837-
838862
beforeUnmount() {
839863
if (this.autosaveIntervalInstance) clearInterval(this.autosaveIntervalInstance);
840864
},
841865
842866
unmounted() {
867+
clearTimeout(this.trackDirtyStateTimeout);
843868
this.saveKeyBinding.destroy();
844869
this.quickSaveKeyBinding.destroy();
845870
},

‎resources/js/components/fieldsets/EditForm.vue‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
<template>
22
<div>
33
<Header :title="__('Edit Fieldset')" icon="fieldsets">
4-
<Button type="submit" variant="primary" @click.prevent="save" v-text="__('Save')" />
4+
<ui-command-palette-item
5+
:category="$commandPalette.category.Actions"
6+
:text="__('Save')"
7+
icon="save"
8+
:action="save"
9+
prioritize
10+
v-slot="{ text, url, icon, action }"
11+
>
12+
<Button type="submit" variant="primary" @click.prevent="action" v-text="text" />
13+
</ui-command-palette-item>
514
</Header>
615

716
<ui-panel :heading="__('Settings')">
@@ -18,6 +27,7 @@
1827
:editing-field="editingField"
1928
:exclude-fieldset="fieldset.handle"
2029
:suggestable-condition-fields="suggestableConditionFields(this)"
30+
with-command-palette
2131
@field-created="fieldCreated"
2232
@field-updated="fieldUpdated"
2333
@field-linked="fieldLinked"

0 commit comments

Comments
 (0)