svelte-dialog/src/Alert.html

Vanilla JS dialog services and components made with Svelte.

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

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

const DEFAULTS = Object.assign({}, Dialog.DEFAULTS, {
  initialFocus: false
})
const FIRES = Dialog.FIRES
Object.freeze(DEFAULTS)

export default {
  setup (Alert) {
    Object.assign(Alert, { DEFAULTS, FIRES })
  },

  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.get('initialFocus') ? this.refs.ok : false })
  },

  methods: {
    open () {
      this.refs.dialog.open()
    },
    close () {
      this.refs.dialog.close()
    }
  }
}
</script>