@@ -26,6 +64,76 @@ export default {
type: String,
required: true,
},
+ showInstructions: {
+ type: Boolean,
+ default: false,
+ },
+ },
+
+ data() {
+ return {
+ handle: this.tab.handle,
+ display: this.tab.display,
+ instructions: this.tab.instructions,
+ editing: false,
+ handleSyncedWithDisplay: false,
+ }
+ },
+
+ created() {
+ // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
+ // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
+ if (!this.handle || this.handle == 'new_tab' || this.handle == 'new_set_group') {
+ this.handleSyncedWithDisplay = true;
+ }
+ },
+
+ computed: {
+
+ isActive() {
+ return this.currentTab === this.tab._id;
+ },
+
+ },
+
+ methods: {
+
+ edit() {
+ this.editing = true;
+ setTimeout(() => this.$refs.title.focus(), 100); // better as an @opened event on the modal
+ },
+
+ editConfirmed() {
+ this.$emit('updated', {
+ ...this.tab,
+ handle: this.handle,
+ display: this.display,
+ });
+ this.editing = false;
+ },
+
+ editCancelled() {
+ this.editing = false;
+ this.handle = this.tab.handle;
+ this.display = this.tab.display;
+ },
+
+ fieldUpdated(handle, value) {
+ if (handle === 'display' && this.handleSyncedWithDisplay) {
+ this.handle = this.$slugify(value, '_');
+ }
+
+ if (handle === 'handle') {
+ this.handleSyncedWithDisplay = false;
+ }
+
+ this[handle] = value;
+ },
+
+ remove() {
+ this.$emit('removed');
+ }
+
}
}
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index 8c785d0e375..ab35b1c5b4b 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -1,23 +1,8 @@
-
-
-