<template>
  <VCodeBlock
      :code="import_code"
      highlightjs
      label="Import"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
  <props-details-table :props-data="props_data"/>
  <label class="form-label">Example</label>
  <AppLoader icon-color="green" icon-font-size="15px" :icon-position-x="45" :icon-position-y="58">
    $
  </AppLoader>
  <VCodeBlock
      :code="demo_code"
      highlightjs
      label="Demo"
      lang="javascript"
      tabs="true"
      theme="hybrid"
  />
</template>

<script>
import AppLoader from "@/components/AppLoader.vue";
import VCodeBlock from '@wdns/vue-code-block';
import PropsDetailsTable from "./PropsDetailsTable.vue";

export default {
  name: "TestAppLoader",
  components: {AppLoader, VCodeBlock, PropsDetailsTable},
  data() {
    return {
      import_code: 'import AppLoader from \"@appsbd/vue3-appsbd-libs\"',
      props_data: [
        {
          name: 'msg',
          type: 'String',
          default_val: 'Loading ...',
          details: 'Loading message text.'
        },
        {
          name: 'no-drop-shadow',
          type: 'Boolean',
          default_val: 'false',
          details: 'Drop shadow option.'
        },
        {
          name: 'icon-font-size',
          type: 'String',
          default_val: '20px',
          details: 'Loader icon font size.'
        },
        {
          name: 'icon-color',
          type: 'String',
          default_val: '#ef4032',
          details: 'Loader icon color.'
        },
        {
          name: 'icon-position-x',
          type: 'Number',
          default_val: '40',
          details: 'Loader icon x-axis position.'
        },
        {
          name: 'icon-position-y',
          type: 'Number',
          default_val: '40',
          details: 'Loader icon y-axis position.'
        },
      ],
      demo_code: "  <AppLoader icon-color=\"green\" icon-font-size=\"15px\" :icon-position-x=\"45\" :icon-position-y=\"58\">\n" +
          "    $\n" +
          "  </AppLoader>"
    }
  }
}
</script>

<style scoped lang="scss">

</style>