import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import "@shoelace-style/shoelace/dist/shoelace/shoelace.css";
import { defineCustomElements, setAssetPath } from "@shoelace-style/shoelace";
import { VNode } from "vue/types/umd";
import { DirectiveBinding } from "vue/types/options";

setAssetPath(`${window.location.origin}/${process.env.VUE_APP_ASSET_PATH}/`);
defineCustomElements();

interface SlInput extends HTMLElement {
  value: string;
}

Vue.directive("sl-model", {
  inserted: (element: Element, binding: DirectiveBinding, vnode) => {
    element.addEventListener("slInput", event => {
      const val = (event?.srcElement as SlInput | undefined)?.value;
      if (val) {
        (vnode as any).context[binding.expression] = val;
      }
    });
  }
});

Vue.config.ignoredElements = [/^sl-/];
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");