Skip to content

Instantly share code, notes, and snippets.

@ujackson

ujackson/GeneralModal.vue

Forked from blackfyre/GeneralModal.vue
Created July 24, 2020 14:25
Show Gist options
  • Save ujackson/1ef6a4b87fedb6855baf2fca2170f08f to your computer and use it in GitHub Desktop.
Save ujackson/1ef6a4b87fedb6855baf2fca2170f08f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @blackfyre blackfyre revised this gist Nov 13, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions GeneralModal.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -8,8 +8,8 @@
    >
    <slot :uppercaseMode="uppercaseMode" :mode="mode">
    <div class="p-8">
    <heading :level="2" class="mb-6">{{ __(uppercaseMode+' Resource') }}</heading>
    <p class="text-80 leading-normal">{{__('Are you sure you want to '+mode+' the selected resources?')}}</p>
    <heading :level="2" class="mb-6">{{ __('General Modal') }}</heading>
    <p class="text-80 leading-normal">{{__('General modal contents')}}</p>
    </div>
    </slot>

  2. @blackfyre blackfyre revised this gist Nov 13, 2018. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion Tool.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,6 @@
    }
    },
    components: {
    Totals,
    GeneralModal
    },
  3. @blackfyre blackfyre created this gist Nov 13, 2018.
    50 changes: 50 additions & 0 deletions GeneralModal.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    <template>
    <modal @modal-close="handleClose">
    <form
    @submit.prevent="handleConfirm"
    slot-scope="props"
    class="bg-white rounded-lg shadow-lg overflow-hidden"
    style="width: 460px"
    >
    <slot :uppercaseMode="uppercaseMode" :mode="mode">
    <div class="p-8">
    <heading :level="2" class="mb-6">{{ __(uppercaseMode+' Resource') }}</heading>
    <p class="text-80 leading-normal">{{__('Are you sure you want to '+mode+' the selected resources?')}}</p>
    </div>
    </slot>

    <div class="bg-30 px-6 py-3 flex">
    <div class="ml-auto">
    <button type="button" data-testid="cancel-button" dusk="cancel-general-button" @click.prevent="handleClose" class="btn text-80 font-normal h-9 px-3 mr-3 btn-link">{{__('Cancel')}}</button>
    <button id="confirm-delete-button" ref="confirmButton" data-testid="confirm-button" type="submit" class="btn btn-default btn-danger">{{ __(uppercaseMode) }}</button>
    </div>
    </div>
    </form>
    </modal>
    </template>

    <script>
    export default {
    name: "GeneralModal",
    methods: {
    handleClose() {
    this.$emit('close')
    },
    handleConfirm() {
    this.$emit('confirm')
    },
    },
    /**
    * Mount the component.
    */
    mounted() {
    this.$refs.confirmButton.focus()
    },
    }
    </script>

    <style scoped>
    </style>
    46 changes: 46 additions & 0 deletions Tool.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <template>
    <div>
    <button @click="openModal">{{__('Open Modal')}}</button>

    <portal to="modals">
    <transition name="fade">
    <general-modal
    v-if="modalOpen"
    @confirm="confirmModal"
    @close="closeModal"
    />
    </transition>
    </portal>
    </div>
    </template>

    <script>
    import GeneralModal from './parts/modals/GeneralModal.vue';
    export default {
    props: ["resourceName", "resourceId", "field"],
    data() {
    return {
    modalOpen: false
    }
    },
    components: {
    Totals,
    GeneralModal
    },
    mounted() {
    },
    methods: {
    openModal() {
    this.modalOpen = true;
    },
    confirmModal() {
    this.modalOpen = false;
    },
    closeModal() {
    this.modalOpen = false;
    }
    }
    };
    </script>