{"version":3,"sources":["webpack:///./src/components/highlighters/CodeHighlighter.vue","webpack:///./src/components/highlighters/CodeHighlighter.vue?bb79","webpack:///./src/components/highlighters/CodeHighlighter.vue?97eb","webpack:///./src/views/documentation/get-started/Internationalization.vue","webpack:///./src/views/documentation/get-started/Internationalization.vue?5231","webpack:///./src/views/documentation/get-started/Internationalization.vue?56b4","webpack:///./src/core/helpers/breadcrumb.ts"],"names":["class","data-bs-toggle","title","data-bs-original-title","lang","style","getHeightInPixesls","name","props","String","fieldHeight","Number","setup","height","init","value","highlightAll","components","render","id","href","CodeHighlighter","setCurrentPageBreadcrumbs","pageTitle","breadcrumbs","dispatch","SET_BREADCRUMB_ACTION","pageBreadcrumbPath"],"mappings":"2IACOA,MAAM,Q,GACJA,MAAM,a,EACT,gCAOS,UANPA,MAAM,qBACNC,iBAAe,UACfC,MAAM,GACNC,yBAAuB,aACxB,UAED,G,GACKH,MAAM,kB,+BAI0B,gB,+BACpB,c,wDAfrB,gCAmBM,MAnBN,EAmBM,CAlBJ,gCAiBM,MAjBN,EAiBM,CAhBJ,EAQA,gCAOM,MAPN,EAOM,CANJ,gCAKa,OAJVA,MAAK,wCAAc,EAAAI,MACnBC,MAAK,oCAAY,EAAAC,sB,CACnB,gCAEM,QAFCN,MAAK,wCAAc,EAAAI,O,GACzB,wBAAa,oB,qDCXR,+BAAgB,CAC7BG,KAAM,kBACNC,MAAO,CACLJ,KAAMK,OACNC,YAAaC,QAEfC,MAAK,SAACJ,GACJ,IAAMK,EAAS,iBAAIL,EAAME,aAEjBI,EAAS,iBAAkB,KAE7BR,EAAqB,uBAAS,WAClC,OAAOO,EAAOE,MAAQ,QAQxB,OALA,wBAAU,WACR,IAAMC,eACNF,OAGK,CACLR,mBAAkB,IAGtBW,WAAY,KC1Bd,EAAOC,OAASA,EAED,U,oECHRlB,MAAM,Q,GAEJA,MAAM,8D,4hBA2BJA,MAAM,S,EAET,gCAMK,MALHA,MAAM,wBACNmB,GAAG,0C,CAEH,gCAAsD,KAAnDC,KAAK,4C,6BAA8C,8C,MAMpDpB,MAAM,Q,+BACJ,2J,4DAKA,8R,GA2BHA,MAAM,S,EAET,gCAGK,MAHDA,MAAM,wBAAwBmB,GAAG,mC,CACnC,gCAA+C,KAA5CC,KAAK,qC,6BAAuC,sC,KAMjD,gCAGM,OAHDpB,MAAM,QAAO,iFAGlB,G,GAEIA,MAAM,Q,+BACJ,Y,EACK,gCAAoB,YAAd,WAAO,G,+BAAO,mB,EAAe,gCAAqB,YAAf,YAAQ,G,4DAGtD,wC,+BAIA,8C,+BAQA,8D,EASN,gCAGM,OAHDA,MAAM,QAAM,C,6BAAC,sEAEhB,gCAAoD,YAA9C,6C,MAOLA,MAAM,S,EAET,gCAMK,MALHA,MAAM,wBACNmB,GAAG,sC,CAEH,gCAAkD,KAA/CC,KAAK,wC,6BAA0C,0C,MAMhDpB,MAAM,Q,+BACJ,mF,+BASA,iI,EAUN,gCAGM,OAHDA,MAAM,QAAM,C,6BAAC,yCAEhB,gCAAsC,YAAhC,6B,6BAAgC,Q,oHA7J9C,gCAmKM,MAnKN,EAmKM,CAjKJ,gCAgKM,MAhKN,EAgKM,CA9JJ,EAyBA,gCAyCM,MAzCN,EAyCM,CAvCJ,EAUA,gCA2BK,KA3BL,EA2BK,CA1BH,gCAyBK,W,EArBH,yBAoBoB,GApBHI,KAAK,cAAY,C,6BAAC,IAoBjC,C,gBAQR,gCA6CM,MA7CN,EA6CM,CA3CJ,EAOA,EAKA,gCAwBK,KAxBL,EAwBK,CAvBH,gCAMK,W,EALI,E,EAAmC,EAE1C,yBAEoB,GAFHA,KAAK,cAAY,C,6BAAC,IAEjC,C,YAGJ,gCAMK,W,EAHH,yBAEoB,GAFHA,KAAK,cAAY,C,6BAAC,IAEjC,C,0DADA,2BAAyB,K,QAI7B,gCAMK,W,EAHH,yBAEoB,GAFHA,KAAK,cAAY,C,6BAAC,IAEjC,C,0DADA,6BAA2B,K,UAKjC,IASF,gCAqCM,MArCN,EAqCM,CAnCJ,EAUA,gCAkBK,KAlBL,EAkBK,CAjBH,gCAOK,W,EAHH,yBAEoB,GAFHA,KAAK,cAAY,C,6BAAC,IAEjC,C,0DADA,4BAA0B,K,QAI9B,gCAOK,W,EAHH,yBAEoB,GAFHA,KAAK,cAAY,C,6BAAC,IAEjC,C,0DADA,wBAA0B,K,UAKhC,Q,4BCxJO,+BAAgB,CAC7BG,KAAM,uBACNU,WAAY,CACVI,gBAAe,QAEjBT,MAAK,WACH,wBAAU,WACR,eAA0B,uBAAwB,CAAC,0BCTzD,EAAOM,OAASA,EAED,gB,kCCLf,8DAQaI,EAA4B,SACvCC,EACAC,GAEA,OAAMC,SAAS,OAAQC,sBAAuB,CAC5CxB,MAAOqB,EACPI,mBAAoBH","file":"js/chunk-5df98376.a4d08c9e.js","sourcesContent":["<template>\n  <div class=\"py-5\">\n    <div class=\"highlight\">\n      <button\n        class=\"highlight-copy btn\"\n        data-bs-toggle=\"tooltip\"\n        title=\"\"\n        data-bs-original-title=\"Copy code\"\n      >\n        copy\n      </button>\n      <div class=\"highlight-code\">\n        <pre\n          :class=\"`language-${lang}`\"\n          :style=\"{ height: getHeightInPixesls }\"\n        ><code :class=\"`language-${lang}`\">\n          <slot></slot>\n        </code></pre>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted } from \"vue\";\nimport { useCopyClipboard } from \"@/core/helpers/documentation\";\nimport Prism from \"prismjs\";\n\nexport default defineComponent({\n  name: \"CodeHighlighter\",\n  props: {\n    lang: String,\n    fieldHeight: Number,\n  },\n  setup(props) {\n    const height = ref(props.fieldHeight);\n\n    const { init } = useCopyClipboard();\n\n    const getHeightInPixesls = computed(() => {\n      return height.value + \"px\";\n    });\n\n    onMounted(() => {\n      Prism.highlightAll();\n      init();\n    });\n\n    return {\n      getHeightInPixesls,\n    };\n  },\n  components: {},\n});\n</script>\n","\nimport { defineComponent, computed, ref, onMounted } from \"vue\";\nimport { useCopyClipboard } from \"@/core/helpers/documentation\";\nimport Prism from \"prismjs\";\n\nexport default defineComponent({\n  name: \"CodeHighlighter\",\n  props: {\n    lang: String,\n    fieldHeight: Number,\n  },\n  setup(props) {\n    const height = ref(props.fieldHeight);\n\n    const { init } = useCopyClipboard();\n\n    const getHeightInPixesls = computed(() => {\n      return height.value + \"px\";\n    });\n\n    onMounted(() => {\n      Prism.highlightAll();\n      init();\n    });\n\n    return {\n      getHeightInPixesls,\n    };\n  },\n  components: {},\n});\n","import { render } from \"./CodeHighlighter.vue?vue&type=template&id=04d89187\"\nimport script from \"./CodeHighlighter.vue?vue&type=script&lang=ts\"\nexport * from \"./CodeHighlighter.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script","<template>\n  <!--begin::Card-->\n  <div class=\"card\">\n    <!--begin::Card Body-->\n    <div class=\"card-body fs-6 py-15 px-10 py-lg-15 px-lg-15 text-gray-700\">\n      <!--begin::Section-->\n      <div class=\"pb-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-5\" id=\"overview\">\n          <a href=\"#overview\"></a>\n          Overview\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"pt-4\">\n          The internationalization (i18n) library for Vue is\n          <code>vue-i18n</code> and defined in\n          <code>src/core/plugins/i18n.ts</code>. Vue I18n is\n          internationalization plugin of Vue.js. It easily integrates some\n          localization features to your Vue.js Application. For more detailed\n          check\n          <a href=\"https://kazupon.github.io/vue-i18n/\"\n            >vue-i18n official documentation</a\n          >.\n        </div>\n        <!--end::Block-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"pb-10\">\n        <!--begin::Heading-->\n        <h1\n          class=\"anchor fw-bolder mb-5\"\n          id=\"add_new_language_with_translation_keys\"\n        >\n          <a href=\"#add_new_language_with_translation_keys\"></a>\n          Add new language with translation keys\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <ol class=\"pt-4\">\n          <li>\n            To add new language support we should add new object into the\n            messages object there key will be language code and value object\n            with translation keys.\n            <CodeHighlighter lang=\"javascript\">{{\n              `\n          const messages = {\n  en: {\n    dashboard: \"Dashboard\"\n  },\n  es: {\n    dashboard: \"Tablero\",\n  },\n  de: {\n    dashboard: \"Instrumententafel\",\n  },\n  ja: {\n    dashboard: \"ダッシュボード\",\n  },\n  + fr: {\n  +   dashboard: \"Générateur de mise\",\n  + }\n};\n        `\n            }}</CodeHighlighter>\n          </li>\n        </ol>\n        <!--end::Block-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"pb-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-5\" id=\"switching_languages_dynamically\">\n          <a href=\"#switching_languages_dynamically\"></a>\n          Switching language dynamically\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"pt-4\">\n          To change theme language dynamically we can use i18n.locale.value\n          property.\n        </div>\n\n        <ol class=\"pt-4\">\n          <li>\n            Import <code>useI18n</code> function form <code>vue-i18n</code>\n\n            <CodeHighlighter lang=\"javascript\">{{\n              `import { useI18n } from \"vue-i18n\";`\n            }}</CodeHighlighter>\n          </li>\n\n          <li>\n            Get i18n instance using useI18n function\n\n            <CodeHighlighter lang=\"javascript\">{{\n              `const i18n = useI18n();`\n            }}</CodeHighlighter>\n          </li>\n\n          <li>\n            Set i18n.locale.value property and set required language\n\n            <CodeHighlighter lang=\"javascript\">{{\n              `i18n.locale.value = \"fr\";`\n            }}</CodeHighlighter>\n          </li>\n        </ol>\n\n        <div class=\"pt-4\">\n          You can check ready language switching functionality inside file\n          <code>src/layout/header/partials/UserMenu.vue</code>\n        </div>\n        <!--end::Block-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"pb-10\">\n        <!--begin::Heading-->\n        <h1\n          class=\"anchor fw-bolder mb-5\"\n          id=\"translation_usage_inside_component\"\n        >\n          <a href=\"#translation_usage_inside_component\"></a>\n          Translation usage inside component\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <ol class=\"pt-4\">\n          <li>\n            Get t from the useI18n function which we have imported in a previous\n            section.\n\n            <CodeHighlighter lang=\"javascript\">{{\n              `const { t } = useI18n();`\n            }}</CodeHighlighter>\n          </li>\n\n          <li>\n            Use t function inside template section, t function receives a\n            translation key as a parameter and returns translation value.\n\n            <CodeHighlighter lang=\"javascript\">{{\n              `\\{\\{ t(\"dashboard\") \\}\\}`\n            }}</CodeHighlighter>\n          </li>\n        </ol>\n\n        <div class=\"pt-4\">\n          Check examples of usage inside file\n          <code>src/layout/aside/Menu.vue</code>.\n        </div>\n        <!--end::Block-->\n      </div>\n      <!--end::Section-->\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted } from \"vue\";\nimport { setCurrentPageBreadcrumbs } from \"@/core/helpers/breadcrumb\";\nimport CodeHighlighter from \"@/components/highlighters/CodeHighlighter.vue\";\n\nexport default defineComponent({\n  name: \"internationalization\",\n  components: {\n    CodeHighlighter,\n  },\n  setup() {\n    onMounted(() => {\n      setCurrentPageBreadcrumbs(\"Internationalization\", [\"Getting Started\"]);\n    });\n  },\n});\n</script>\n","\nimport { defineComponent, onMounted } from \"vue\";\nimport { setCurrentPageBreadcrumbs } from \"@/core/helpers/breadcrumb\";\nimport CodeHighlighter from \"@/components/highlighters/CodeHighlighter.vue\";\n\nexport default defineComponent({\n  name: \"internationalization\",\n  components: {\n    CodeHighlighter,\n  },\n  setup() {\n    onMounted(() => {\n      setCurrentPageBreadcrumbs(\"Internationalization\", [\"Getting Started\"]);\n    });\n  },\n});\n","import { render } from \"./Internationalization.vue?vue&type=template&id=31d76a02\"\nimport script from \"./Internationalization.vue?vue&type=script&lang=ts\"\nexport * from \"./Internationalization.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script","import store from \"@/store\";\nimport { Actions } from \"@/store/enums/StoreEnums\";\n\n/**\n * Sets current page breadcrumbs\n * @param {string} pageTitle Current page title\n * @param {Array<string>} breadcrumbs Current page breadcrumbs\n */\nexport const setCurrentPageBreadcrumbs = (\n  pageTitle: string,\n  breadcrumbs: Array<string>\n): void => {\n  store.dispatch(Actions.SET_BREADCRUMB_ACTION, {\n    title: pageTitle,\n    pageBreadcrumbPath: breadcrumbs,\n  });\n};\n\n/**\n * Sets current page breadcrumbs\n * @param {string} title Current page title name\n */\nexport const setCurrentPageTitle = (title: string): void => {\n  store.dispatch(Actions.SET_BREADCRUMB_ACTION, {\n    title: title,\n  });\n};\n"],"sourceRoot":""}