svelte-dialog/src/Confirm.html

Vanilla JS dialog services and components made with Svelte.

<Dialog ref:dialog>
  <div slot="actions">
    <button
      ref:deny
      class="dialog-action deny"
      on:click="deny()"
      on:mouseenter="this.focus()"
      on:mouseleave="this.blur()"
    >{{ denyText }}</button>
    <button
      ref:confirm
      class="dialog-action confirm"
      on:click="confirm()"
      on:mouseenter="this.focus()"
      on:mouseleave="this.blur()"
    >{{ confirmText }}</button>
  </div>
</Dialog>

<script>
import Dialog from './Dialog.html'
import { forwardDataFrom, forwardEventsFrom, enableDataDefaults } from './lib/svelte-utils'

const DEFAULTS = Object.assign({}, Dialog.DEFAULTS, {
  heading: 'Are you sure?',
  description: 'Confirm if you wish to proceed.',
  denyText: 'Cancel',
  confirmText: 'Confirm',
  defaultAction: false
})
const ACTIONS = { confirm: 'confirm', deny: 'deny' }
const FIRES = Dialog.FIRES
;[ DEFAULTS, ACTIONS ].forEach(Object.freeze)

export default {
  setup (Confirm) {
    Object.assign(Confirm, { DEFAULTS, ACTIONS })
  },

  components: { Dialog },

  data () {
    return Object.assign({}, DEFAULTS)
  },

  oncreate () {
    forwardDataFrom(this, this.refs.dialog, Dialog.DEFAULTS)
    forwardEventsFrom(this.refs.dialog, this, Dialog.FIRES)
    enableDataDefaults(this, DEFAULTS)

    this.set({ initialFocusElement: this.refs[this.get('defaultAction')] })
  },

  methods: {
    open () {
      this.refs.dialog.open()
    },
    deny () {
      this.refs.dialog.dismiss({ confirmed: false })
    },
    confirm () {
      this.refs.dialog.close({ confirmed: true })
    }
  }
}
</script>