{"version":3,"file":"js/home.1b53fc5f.js","mappings":"qNAAO,SAASA,IACZ,SAASC,EAAiBC,EAAcC,GACpC,MAAMC,EAAQ,GAad,OAXAC,OAAOC,KAAKH,GAAiBI,SAASC,IAClC,GAAIA,IAAUN,EAAc,CACxB,MAAMO,EAAYN,EAAgBK,GAClCH,OAAOC,KAAKG,GAAWF,SAASG,IAC5BN,EAAMO,KAAK,CACPD,SACAE,KAAMH,EAAUC,IAClB,GAEV,KAEGN,CACX,CAEA,MAAO,CAAEH,kBACb,CCnBO,MAAMY,EAAW,KACXC,EAAW,WACXC,EAAgB,eAEhBC,EAAY,YACZC,EAAiB,kBACjBC,EAAW,KACXC,EAAe,SACfC,EAAY,MAKZC,EAAS,CAClB,CAAEC,MAAO,UAAWC,KAAM,WAC1B,CAAED,MAAO,YAAaC,KAAM,aAC5B,CAAED,MAAO,cAAeC,KAAM,eAC9B,CAAED,MAAO,oBAAqBC,KAAM,sB,2EC4BxC,MAAMC,GAAQC,EAAAA,EAAAA,MAGRC,GAAWC,EAAAA,EAAAA,KAAS,IAAMH,EAAMI,QAAQC,cACxCjB,GAAOkB,EAAAA,EAAAA,IAAI,KACjBC,EAAAA,EAAAA,IAAMnB,GAAMoB,MAAOC,EAAUC,KACrBA,IAAaD,IACbT,EAAMW,SAAS,iBAAkBF,GAChB,KAAbC,IACA1B,EAAMc,MAAQ,SACRE,EAAMW,SAAS,mBAAoBF,GAGzCG,EAAK,gBAEb,IAIJ,MAAMC,GAAYC,EAAAA,EAAAA,KAAIjB,GAASb,GAAUA,EAAMc,QACzCd,GAAQsB,EAAAA,EAAAA,IAAI,I,OAClBC,EAAAA,EAAAA,IAAMvB,GAAOwB,MAAOC,EAAUC,KAC1B,GAAIA,IAAaD,EAAU,OACjBT,EAAMW,SAAS,kBAAmBF,GACxC,MAAM/B,EAAesB,EAAMI,QAAQW,gBAC7BC,EAAqBhB,EAAMI,QAAQY,oBAEnC,gBAAEvC,GAAoBD,IACtByC,EAAUxC,EAAgBC,EAAcsC,SACxChB,EAAMW,SAAS,oBAAqBM,GAG1CL,EAAK,cACT,K,w5BC3EJ,MAAMM,EAAc,EAEpB,Q,uIC4BMC,EAAeA,KACjBP,EAAK,eAAe,E,u2BC5BxB,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,Q,8ICqEMxB,GAAOkB,EAAAA,EAAAA,IAAI,IACXc,EAAQ,CACVC,GAAMA,GAAKA,EAAEC,QAAU,IAAO,iCAG5BC,EAAaA,KACfX,EAAK,aAAa,EAIhBY,GAASlB,EAAAA,EAAAA,KAAI,GACbmB,EAAcA,KAChBD,EAAO1B,OAAQ,CAAI,EAEjB4B,EAAcA,KAChBF,EAAO1B,OAAQ,EACf6B,GAAgB,EAGdC,GAAoBzB,EAAAA,EAAAA,KAAS,IACH,wBAArB0B,EAAMC,aAGXC,GAAazB,EAAAA,EAAAA,KAAI,GACjB0B,GAAyB7B,EAAAA,EAAAA,KAAS,IAC7B0B,EAAMI,gBAAiC,KAAf7C,EAAKU,QAElCoC,GAA0B/B,EAAAA,EAAAA,KAAS,IACf,KAAff,EAAKU,OAAgB0B,EAAO1B,MAC7B,gBACA,kBAIJqC,GAAY7B,EAAAA,EAAAA,KAAI,GAChBqB,EAAiBA,KACdC,EAAkB9B,QACnBqC,EAAUrC,OAAS0B,EAAO1B,OAAwB,KAAfV,EAAKU,OAAgBV,EAAKU,MAAMsC,OAAOC,gBAAkBR,EAAMC,YAEtGC,EAAWjC,OAAQ,CAAI,EAErBwC,GAA2BnC,EAAAA,EAAAA,KAAS,IAC/B0B,EAAMI,iBAAmBT,EAAO1B,OAAwB,KAAfV,EAAKU,QAAqC,IAArBiC,EAAWjC,QAE9EyC,GAA4BpC,EAAAA,EAAAA,KAAS,IACnCmC,EAAyBxC,QAAU0B,EAAO1B,MACtC8B,EAAkB9B,MACX,uBAEJqC,EAAUrC,MAAQ,iBAAmB,eAErC,kBAGT0C,GAAoBrC,EAAAA,EAAAA,KAAS,IAC3BmC,EAAyBxC,QAAU0B,EAAO1B,MACtC8B,EAAkB9B,MACX,oBAEJqC,EAAUrC,MAAQ,uBAAyB,yBAE3C,uBAGT2C,GAAuBtC,EAAAA,EAAAA,KAAS,IAC9BmC,EAAyBxC,QAAU0B,EAAO1B,MACtC8B,EAAkB9B,MACX,qDAEJqC,EAAUrC,MAAQ,yBAA2B,mBAE7C,K,4qDC9If,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,Q,4GC6BMyB,GAAajB,EAAAA,EAAAA,KAAI,GACjBoC,EAAeA,KACjBnB,EAAWzB,OAASyB,EAAWzB,KAAK,EAGlCE,GAAQC,EAAAA,EAAAA,MACR6B,GAAa3B,EAAAA,EAAAA,KAAS,IAAMH,EAAMI,QAAQuC,mCAAmCd,EAAM3C,U,gjBCrCzF,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,Q,sFCkCM,OAAE0D,IAAWC,EAAAA,EAAAA,MACbC,GAAoB3C,EAAAA,EAAAA,KAAS,IAAMyC,EAAO9C,MAAQR,EAAWC,IAC7DwD,GAAmB5C,EAAAA,EAAAA,KAAS,IAAMyC,EAAO9C,MAAQN,EAAYC,I,6mBCtCnE,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,Q,mFCgCMC,EAAW,WACXC,EAAe,SACfC,EAAY,M,ohBCpClB,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,Q,gCC0BA,MAAMoD,EAAe,MACfhD,GAAQC,EAAAA,EAAAA,MACRgC,GAAiB9B,EAAAA,EAAAA,KAAS,IAAMH,EAAMI,QAAQ6C,oB,+vBCjCpD,MAAM,EAAc,EAEpB,Q,iUCCA,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,Q,kLCgCMC,GAAS/C,EAAAA,EAAAA,KAAS,IACb0B,EAAMsB,YAAY7B,OACnBO,EAAMsB,YAAY,GAAG/D,KACrB,KAEJgE,GAASjD,EAAAA,EAAAA,KAAS,IACb0B,EAAMsB,YAAY7B,OACnBO,EAAMsB,YAAY,GAAG/D,KACrB,KAEJiE,GAAUlD,EAAAA,EAAAA,KAAS,IACd0B,EAAMsB,YAAY7B,OACnBO,EAAMsB,YAAY,GAAG/D,KACrB,KAEJkE,GAASnD,EAAAA,EAAAA,KAAS,IACb0B,EAAMsB,YAAY7B,OACnBO,EAAMsB,YAAY,GAAG/D,KACrB,KAEJmE,GAAapD,EAAAA,EAAAA,KAAS,IACjB0B,EAAMsB,YAAY7B,OACnBO,EAAMsB,YAAY,GAAG/D,KACrB,KAEJoE,GAAUrD,EAAAA,EAAAA,KAAS,IACd0B,EAAMsB,YAAY7B,OACnBO,EAAMsB,YAAY,GAAG/D,KACrB,K,y8BC9DV,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,Q,sKCmBMqE,EAAkB,WAClBC,EAAgB,SAiBhBC,GAAmBxD,EAAAA,EAAAA,KAAS,IACvB0B,EAAM+B,SAAStC,OAChBO,EAAM+B,SAAS,GAAGxE,KAClB,KAEJyE,GAAiB1D,EAAAA,EAAAA,KAAS,IACrB0B,EAAM+B,SAAStC,OAChBO,EAAM+B,SAAS,GAAGxE,KAClB,K,yjBC/CV,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,QCRO,MAAM0E,GAAkB,CAC3B,wBACA,gBACA,iBACA,yBAGSC,GAAkB,CAC3B,wBACA,iBACA,kBACA,kBAGSC,GAAkB,CAC3B,wBACA,iBACA,gBACA,wBAGSC,GAAU,EACVC,GAAU,E,mCCiCvB,MAAMlE,GAAQC,EAAAA,EAAAA,MAERkE,GAAiB7D,EAAAA,EAAAA,IAAI,IACrB8D,GAAc9D,EAAAA,EAAAA,IAAI,IAClB+D,GAAqB/D,EAAAA,EAAAA,IAAI,IACzBgE,GAA2BhE,EAAAA,EAAAA,IAAI,KAE/B,gBAAE7B,GAAoBD,IAEtBY,GAAOe,EAAAA,EAAAA,KAAS,IAAMH,EAAMI,QAAQmE,iBACpCvD,GAAqBb,EAAAA,EAAAA,KAAS,IAAMH,EAAMI,QAAQY,qBAElDwD,EAAU3E,EAAO,GAAGE,KACpB0E,EAAY5E,EAAO,GAAGE,KACtB2E,EAAc7E,EAAO,GAAGE,KACxB4E,EAAoB9E,EAAO,GAAGE,KAE9B6E,EAAyBA,KAC3BT,EAAerE,MAAQrB,EAAgBoB,EAAO,GAAGC,MAAOkB,EAAmBlB,OAC3EsE,EAAYtE,MAAQrB,EAAgBoB,EAAO,GAAGC,MAAOkB,EAAmBlB,OACxEuE,EAAmBvE,MAAQrB,EAAgBoB,EAAO,GAAGC,MAAOkB,EAAmBlB,OAC/EwE,EAAyBxE,MAAQrB,EAAgBoB,EAAO,GAAGC,MAAOkB,EAAmBlB,MAAM,EAIzF+E,EAASA,IAAOC,KAAKC,MAAMD,KAAKD,UAAYZ,GAAUC,GAAU,IAAMA,GACtEc,GAAe7E,EAAAA,EAAAA,KAAS,KAC1B,MAAM8E,EAAmBJ,IACnBK,EAAW,CACbpB,GACAC,GACAC,IAEJ,OAAOkB,EAASD,EAAiB,I,OAGrCE,EAAAA,EAAAA,KAAU3E,gBACAR,EAAMW,SAAS,iBAAkBvB,EAAKU,OAC5C8E,GAAwB,KAG5BrE,EAAAA,EAAAA,IAAMnB,GAAMoB,gBACFR,EAAMW,SAAS,iBAAkBvB,EAAKU,OAC5C8E,GAAwB,I,0oCC5F5B,MAAM,IAA2B,OAAgB,GAAQ,CAAC,CAAC,YAAY,qBAEvE,U,gGCgBMQ,EAAc,CAAC,uBAAwB,UAAW,UAAW,QAAS,UACtEC,EAAeC,IACjB,MAAMC,GAASD,EAAY,GAAK,EAChC,OAAOF,EAAYG,EAAM,EAGvBC,EAAaD,GAAU1D,EAAM4D,MAAQ5D,EAAM4D,MAAQJ,EAAYE,G,qRC3BrE,MAAM,GAAc,GAEpB,U,uCC0BA,MAAMvF,GAAQC,EAAAA,EAAAA,MACRyF,GAAUpF,EAAAA,EAAAA,KAAI,GACdqF,GAAerF,EAAAA,EAAAA,IAAI,IACnBsF,GAAWtF,EAAAA,EAAAA,IAAI,IAGflB,GAAOe,EAAAA,EAAAA,KAAS,IAAMH,EAAMI,QAAQmE,iBAGpCsB,GAA6B1F,EAAAA,EAAAA,KAAS,IAAMH,EAAMI,QAAQyF,6BAG1DC,GAAyB3F,EAAAA,EAAAA,KAAS,IAAMH,EAAMI,QAAQ0F,yBAGtDC,EAAU,CAAC,QAAS,MAAO,SAAU,OACrCC,EAAeV,IACjB,MAAMC,GAASD,EAAY,GAAK,EAChC,OAAOS,EAAQR,EAAM,EAEnBU,EAAgB,CAAC,uBAAwB,UAAW,UAAW,SAC/DC,EAAoBZ,IACtB,MAAMC,GAASD,EAAY,GAAK,EAChC,OAAOW,EAAcV,EAAM,EAGzBY,EAAyBA,KAC3BP,EAAS9F,MAAQgG,EAAuBhG,MACxC6F,EAAa7F,MAAQ+F,EAA2B/F,MAChD4F,EAAQ5F,OAAQ,CAAK,E,OAGzBqF,EAAAA,EAAAA,KAAU3E,gBACAR,EAAMW,SAAS,iBAAkBvB,EAAKU,OAC5CqG,GAAwB,KAG5B5F,EAAAA,EAAAA,IAAMnB,GAAMoB,gBACFR,EAAMW,SAAS,iBAAkBvB,EAAKU,OAC5CqG,GAAwB,I,+0BChE5B,MAAM,IAA2B,OAAgB,GAAQ,CAAC,CAAC,YAAY,qBAEvE,U,2BCuCA,MAAMnG,GAAQC,EAAAA,EAAAA,OACR,KAAEmG,IAASvD,EAAAA,EAAAA,MAGXwD,GAAqB/F,EAAAA,EAAAA,IAAI,GACzBgG,EAAkBA,KACpBD,EAAmBvG,OAAS,CAAC,EAI3ByG,GAAMjG,EAAAA,EAAAA,IAAI,IACVkG,GAAgBlG,EAAAA,EAAAA,IAAI,YACpBmG,GAAWtG,EAAAA,EAAAA,KAAS,KACtB,OAAQiG,EAAKtG,OACb,IAAK,KAAM,OAAO,EAClB,IAAK,KAAM,OAAO,EAClB,IAAK,KAAM,OAAO,EAClB,IAAK,KAAM,OAAO,EAClB,IAAK,KAAM,OAAO,EAClB,IAAK,MAAO,OAAO,EACnB,QAAS,OAAO,EACf,IAEC4G,EAAmBA,KACK,IAAnBD,EAAS3G,MAAiB,WAAa,a,OAElDqF,EAAAA,EAAAA,KAAU,KACNnF,EAAMW,SAAS,eACf6F,EAAc1G,MAAQ4G,GAAkB,KAG5CnG,EAAAA,EAAAA,IAAMkG,GAAU,KACZD,EAAc1G,MAAQ4G,GAAkB,I,myCCzE5C,MAAM,IAA2B,OAAgB,GAAQ,CAAC,CAAC,YAAY,qBAEvE,S","sources":["webpack://dutch-it-up/./src/composables/verbs.js","webpack://dutch-it-up/./src/constants/index.js","webpack://dutch-it-up/./src/components/verbs/VerbForm.vue","webpack://dutch-it-up/./src/components/verbs/VerbForm.vue?3880","webpack://dutch-it-up/./src/components/verbs/base/RowAnswer.vue","webpack://dutch-it-up/./src/components/verbs/base/RowAnswer.vue?64b8","webpack://dutch-it-up/./src/components/verbs/base/RowAnswerForm.vue","webpack://dutch-it-up/./src/components/verbs/base/RowAnswerForm.vue?9427","webpack://dutch-it-up/./src/components/verbs/base/RowAnswerFull.vue","webpack://dutch-it-up/./src/components/verbs/base/RowAnswerFull.vue?1a00","webpack://dutch-it-up/./src/components/verbs/practice/VerbAnswerSingularForm.vue","webpack://dutch-it-up/./src/components/verbs/practice/VerbAnswerSingularForm.vue?1f39","webpack://dutch-it-up/./src/components/verbs/practice/VerbAnswerPluralForm.vue","webpack://dutch-it-up/./src/components/verbs/practice/VerbAnswerPluralForm.vue?4516","webpack://dutch-it-up/./src/components/verbs/practice/VerbAnswer.vue","webpack://dutch-it-up/./src/components/verbs/practice/VerbAnswer.vue?7dec","webpack://dutch-it-up/./src/components/verbs/base/VerbItem.vue","webpack://dutch-it-up/./src/components/verbs/show/VerbCardPresent.vue","webpack://dutch-it-up/./src/components/verbs/show/VerbCardPresent.vue?63d1","webpack://dutch-it-up/./src/components/verbs/show/VerbCardPast.vue","webpack://dutch-it-up/./src/components/verbs/show/VerbCardPast.vue?4e1f","webpack://dutch-it-up/./src/constants/colors.js","webpack://dutch-it-up/./src/components/verbs/show/VerbCard.vue","webpack://dutch-it-up/./src/components/verbs/show/VerbCard.vue?3b2f","webpack://dutch-it-up/./src/components/verbs/base/VerbChip.vue","webpack://dutch-it-up/./src/components/verbs/base/VerbChip.vue?b90f","webpack://dutch-it-up/./src/components/verbs/VerbCardExamples.vue","webpack://dutch-it-up/./src/components/verbs/VerbCardExamples.vue?8a8e","webpack://dutch-it-up/./src/views/Home.vue","webpack://dutch-it-up/./src/views/Home.vue?9051"],"sourcesContent":["export function useVerb () {\n    function verbConjugation (currentTense, currentVerbData) {\n        const verbs = [];\n\n        Object.keys(currentVerbData).forEach((tense) => {\n            if (tense === currentTense) {\n                const fullTense = currentVerbData[tense];\n                Object.keys(fullTense).forEach((person) => {\n                    verbs.push({\n                        person,\n                        verb: fullTense[person]\n                    });\n                });\n            }\n        });\n        return verbs;\n    }\n\n    return { verbConjugation };\n}\n","export const IK_LABEL = \"Ik\";\nexport const JE_LABEL = \"Jij / Je\";\nexport const JE_LABEL_FULL = \"Jij / Je / U\";\nexport const U_LABEL = \"U\";\nexport const HET_LABEL = \"Hij / Zij\";\nexport const HET_LABEL_FULL = \"Hij / Zij / Het\";\nexport const WE_LABEL = \"We\";\nexport const JULLIE_LABEL = \"Jullie\";\nexport const ZIJ_LABEL = \"Zij\";\n\nexport const SINGULAR_PERSON = `${IK_LABEL} / Je / ${HET_LABEL}`;\nexport const PLURAL_PERSON = `${WE_LABEL} / ${JULLIE_LABEL} / ${ZIJ_LABEL}`;\n\nexport const TENSES = [\n    { value: \"presens\", text: \"Presens\" },\n    { value: \"perfectum\", text: \"Perfectum\" },\n    { value: \"imperfectum\", text: \"Imperfectum\" },\n    { value: \"plusquamperfectum\", text: \"Plusquamperfectum\" }\n];\n","<template>\n  <v-container class=\"my-0 py-0\">\n    <v-form\n      id=\"select-verb-form\"\n      ref=\"form\"\n      lazy-validation\n      class=\"my-0 py-0\"\n    >\n      <v-row class=\"my-0 py-0\">\n        <v-col\n          cols=\"12\"\n          md=\"6\"\n        >\n          <v-select\n            v-if=\"verbList\"\n            v-model=\"verb\"\n            :items=\"verbList\"\n            label=\"Selecteer een werkwoord\"\n            clearable\n          />\n        </v-col>\n        <v-col\n          cols=\"12\"\n          md=\"6\"\n        >\n          <v-select\n            v-model=\"tense\"\n            :items=\"tenseList\"\n            label=\"Selecteer een werkwoord vorm\"\n            clearable\n          />\n        </v-col>\n      </v-row>\n    </v-form>\n  </v-container>\n</template>\n\n<script setup>\nimport { ref, computed, watch, defineEmits } from \"vue\";\nimport { useStore } from \"vuex\";\nimport { useVerb } from \"@/composables/verbs\";\nimport { TENSES } from \"@/constants/index\";\nimport { map } from \"lodash\";\n\nconst emit = defineEmits([\"forceUpdate\"]);\nconst store = useStore();\n\n// verb management\nconst verbList = computed(() => store.getters.getVerbList);\nconst verb = ref(\"\");\nwatch(verb, async (newValue, oldValue) => {\n    if (oldValue !== newValue) {\n        store.dispatch(\"setCurrentVerb\", newValue);\n        if (oldValue !== \"\") {\n            tense.value = \"\";\n            await store.dispatch(\"resetCurrentVerb\", newValue);\n\n            // if the verb changes, force update of the components to refresh\n            emit(\"forceUpdate\");\n        }\n    }\n});\n\n// verb tense management\nconst tenseList = map(TENSES, (tense) => tense.value);\nconst tense = ref(\"\");\nwatch(tense, async (newValue, oldValue) => {\n    if (oldValue !== newValue) {\n        await store.dispatch(\"setCurrentTense\", newValue);\n        const currentTense = store.getters.getCurrentTense;\n        const getCurrentVerbData = store.getters.getCurrentVerbData;\n\n        const { verbConjugation } = useVerb();\n        const results = verbConjugation(currentTense, getCurrentVerbData);\n        await store.dispatch(\"setCurrentAnswers\", results);\n\n        // if the tense changes, force update of the components to refresh\n        emit(\"forceUpdate\");\n    }\n});\n</script>\n","import script from \"./VerbForm.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbForm.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","<template>\n    <v-row style=\"height: 4rem\">\n        <v-col cols=\"3\">\n            <v-label class=\"pl-1\">{{ props.personText }}</v-label>\n        </v-col>\n        <v-col cols=\"6\">\n            <v-label class=\"pl-1\">{{ props.verbText }}</v-label>\n        </v-col>\n        <v-col cols=\"3\">\n            <v-tooltip text=\"Got it! Now send me back to the question.\">\n                <template v-slot:activator=\"{ props }\">\n                    <v-icon\n                        size=\"large\"\n                        class=\"pr-2\"\n                        v-bind=\"props\"\n                        color=\"grey-darken-2\"\n                        @click.prevent=\"showQuestion\"\n                    >\n                        mdi-eye-off-outline\n                    </v-icon>\n                </template>\n            </v-tooltip>\n        </v-col>\n    </v-row>\n</template>\n\n<script setup>\nimport { defineProps, defineEmits } from \"vue\";\nconst props = defineProps({\n    personText: String,\n    verbText: String\n});\nconst emit = defineEmits([\"showQuestion\"]);\nconst showQuestion = () => {\n    emit(\"showQuestion\");\n};\n</script>\n\n<style scoped lang=\"scss\">\n.v-label {\n    font-size: 1rem !important;\n}\n</style>\n","import script from \"./RowAnswer.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./RowAnswer.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./RowAnswer.vue?vue&type=style&index=0&id=a692e110&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-a692e110\"]])\n\nexport default __exports__","<template>\n    <v-row style=\"height: 3.5rem\">\n        <v-col cols=\"3\">\n            <v-label class=\"pl-1\">{{ props.personText }}</v-label>\n        </v-col>\n        <v-col cols=\"6\">\n            <v-text-field\n                v-model=\"verb\"\n                label=\"\"\n                :counter=\"30\"\n                :rules=\"rules\"\n                variant=\"outlined\"\n                density=\"compact\"\n                :disabled=\"!props.enablePractice\"\n                @input=\"startTyping\"\n                @blur=\"answerReady\"\n            />\n        </v-col>\n        <v-col cols=\"3\">\n            <!-- show correct answer icon -->\n            <v-tooltip text=\"Show me the correct answer\">\n                <template v-slot:activator=\"{ props }\">\n                    <v-icon\n                        size=\"large\"\n                        class=\"pr-2\"\n                        v-bind=\"props\"\n                        @click.prevent=\"showAnswer\"\n                    >\n                        mdi-eye-outline\n                    </v-icon>\n                </template>\n            </v-tooltip>\n            <!-- show control answer icon -->\n            <v-tooltip text=\"Validate my answer\">\n                <template v-slot:activator=\"{ props }\">\n                    <v-icon\n                        v-if=\"showValidateAnswerIcon\"\n                        size=\"large\"\n                        :color=\"validateAnswerIconColor\"\n                        class=\"pr-2\"\n                        :disabled=\"props.enablePractice\"\n                        v-bind=\"props\"\n                        @click.prevent=\"validateAnswer\"\n                    >\n                        mdi-account-check\n                    </v-icon>\n                </template>\n            </v-tooltip>\n            <!-- show answer's result icon -->\n            <v-tooltip :text=\"controlAnswerTooltip\">\n                <template v-slot:activator=\"{ props }\">\n                    <v-icon\n                        v-if=\"showControlledAnswerIcon\"\n                        size=\"large\"\n                        :color=\"controlledAnswerIconColor\"\n                        class=\"pr-2\"\n                        :disabled=\"props.enablePractice\"\n                        v-bind=\"props\"\n                        @click.prevent=\"validateAnswer\"\n                    >\n                        {{ correctAnswerIcon  }}\n                    </v-icon>\n                </template>\n            </v-tooltip>\n        </v-col>\n    </v-row>\n</template>\n\n<script setup>\nimport { ref, computed, defineProps, defineEmits } from \"vue\";\n\nconst props = defineProps({\n    personText: String,\n    verbAnswer: String,\n    enablePractice: Boolean\n});\n\nconst verb = ref(\"\");\nconst rules = [\n    v => (v && v.length <= 30) || \"The verb must be less than 30\"\n];\nconst emit = defineEmits([\"showAnswer\"]);\nconst showAnswer = () => {\n    emit(\"showAnswer\");\n};\n\n// input events\nconst typing = ref(false);\nconst startTyping = () => {\n    typing.value = true;\n};\nconst answerReady = () => {\n    typing.value = false;\n    validateAnswer();\n};\n\nconst noAnswerAvailable = computed(() => {\n    return props.verbAnswer === \"no answer available\";\n});\n// control the check icon\nconst controlled = ref(false);\nconst showValidateAnswerIcon = computed(() => {\n    return props.enablePractice && verb.value !== \"\";\n});\nconst validateAnswerIconColor = computed(() => {\n    return verb.value !== \"\" && typing.value\n        ? \"grey-darken-1\"\n        : \"lime-darken-2\";\n});\n\n// validate the answer\nconst isCorrect = ref(false);\nconst validateAnswer = () => {\n    if (!noAnswerAvailable.value) {\n        isCorrect.value = !typing.value && verb.value !== \"\" && verb.value.trim().toLowerCase() === props.verbAnswer;\n    }\n    controlled.value = true;\n};\nconst showControlledAnswerIcon = computed(() => {\n    return props.enablePractice && !typing.value && verb.value !== \"\" && controlled.value === true;\n});\nconst controlledAnswerIconColor = computed(() => {\n    if (showControlledAnswerIcon.value && !typing.value) {\n        if (noAnswerAvailable.value) {\n            return \"deep-orange-darken-4\";\n        }\n        return isCorrect.value ? \"green-darken-2\" : \"red-darken-4\";\n    } else {\n        return \"grey-darken-2\";\n    }\n});\nconst correctAnswerIcon = computed(() => {\n    if (showControlledAnswerIcon.value && !typing.value) {\n        if (noAnswerAvailable.value) {\n            return \"mdi-alert-octagon\";\n        }\n        return isCorrect.value ? \"mdi-thumb-up-outline\" : \"mdi-thumb-down-outline\";\n    } else {\n        return \"mdi-thumbs-up-down\";\n    }\n});\nconst controlAnswerTooltip = computed(() => {\n    if (showControlledAnswerIcon.value && !typing.value) {\n        if (noAnswerAvailable.value) {\n            return \"Sorry! There is no answer available for that verb.\";\n        }\n        return isCorrect.value ? \"Nice! You've got this!\" : \"Ouch! Try again.\";\n    } else {\n        return \"\";\n    }\n});\n</script>\n\n<style scoped lang=\"scss\">\n.v-label {\n    font-size: 1rem !important;\n}\n</style>\n","import script from \"./RowAnswerForm.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./RowAnswerForm.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./RowAnswerForm.vue?vue&type=style&index=0&id=69160d6a&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-69160d6a\"]])\n\nexport default __exports__","<template>\n    <v-container fluid>\n        <v-form\n            ref=\"form\"\n            lazy-validation\n            width=\"100%\"\n        >\n            <row-answer\n                v-if=\"showAnswer\"\n                :person-text=\"props.personText\"\n                :verbText=\"verbAnswer\"\n                @showQuestion=\"toggleAnswer\"\n            />\n            <row-answer-form\n                v-else\n                :person-text=\"props.personText\"\n                :verbAnswer=\"verbAnswer\"\n                :enablePractice=\"props.enablePractice\"\n                @showAnswer=\"toggleAnswer\"\n            />\n    </v-form>\n</v-container>\n\n</template>\n\n<script setup>\nimport { ref, computed, defineProps } from \"vue\";\nimport RowAnswer from \"../base/RowAnswer.vue\";\nimport RowAnswerForm from \"../base/RowAnswerForm.vue\";\nimport { useStore } from \"vuex\";\n\nconst props = defineProps({\n    enablePractice: Boolean,\n    personText: String,\n    person: String\n});\n\nconst showAnswer = ref(false);\nconst toggleAnswer = () => {\n    showAnswer.value = !showAnswer.value;\n};\n\nconst store = useStore();\nconst verbAnswer = computed(() => store.getters.getCurrentAnswersPerTensePerPerson(props.person));\n</script>\n\n<style scoped lang=\"scss\">\n.v-label {\n    font-size: 1rem !important;\n}\n</style>\n","import script from \"./RowAnswerFull.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./RowAnswerFull.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./RowAnswerFull.vue?vue&type=style&index=0&id=e114c61c&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-e114c61c\"]])\n\nexport default __exports__","<template>\n    <v-container fluid>\n        <v-form\n            ref=\"form\"\n            lazy-validation\n            width=\"100%\"\n            id=\"verb-answers-form\"\n        >\n            <!-- Ik information -->\n            <row-answer-full\n                :enablePractice=\"props.enablePractice\"\n                :personText=\"IK_LABEL\"\n                person=\"ik\"\n            />\n\n            <!-- Je / Jij / U information -->\n            <row-answer-full\n                :enablePractice=\"props.enablePractice\"\n                :personText=\"secondPersonLabel\"\n                person=\"je\"\n            />\n\n            <!-- Zij / Hij / Het information -->\n            <row-answer-full\n                :enablePractice=\"props.enablePractice\"\n                :personText=\"thirdPersonLabel\"\n                person=\"het\"\n            />\n    </v-form>\n</v-container>\n\n</template>\n\n<script setup>\nimport { defineProps, computed } from \"vue\";\nimport { useDisplay } from \"vuetify\";\nimport RowAnswerFull from \"./../base/RowAnswerFull.vue\";\nimport { IK_LABEL, JE_LABEL, JE_LABEL_FULL, HET_LABEL, HET_LABEL_FULL } from \"@/constants/index\";\n\nconst props = defineProps({\n    enablePractice: Boolean\n});\nconst { mobile } = useDisplay();\nconst secondPersonLabel = computed(() => mobile.value ? JE_LABEL : JE_LABEL_FULL);\nconst thirdPersonLabel = computed(() => mobile.value ? HET_LABEL : HET_LABEL_FULL);\n</script>\n\n<style scoped lang=\"scss\">\n.v-label {\n    font-size: 1rem !important;\n}\n</style>\n","import script from \"./VerbAnswerSingularForm.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbAnswerSingularForm.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VerbAnswerSingularForm.vue?vue&type=style&index=0&id=6cd5075d&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-6cd5075d\"]])\n\nexport default __exports__","<template>\n    <v-container fluid>\n        <v-form\n            ref=\"form\"\n            lazy-validation\n            width=\"100%\"\n        >\n            <!-- We information -->\n            <row-answer-full\n                :enablePractice=\"props.enablePractice\"\n                :personText=\"WE_LABEL\"\n                person=\"we\"\n            />\n\n            <!-- Je information -->\n            <row-answer-full\n                :enablePractice=\"props.enablePractice\"\n                :personText=\"JULLIE_LABEL\"\n                person=\"jullie\"\n            />\n\n            <!-- Zij information -->\n            <row-answer-full\n                :enablePractice=\"props.enablePractice\"\n                :personText=\"ZIJ_LABEL\"\n                person=\"ze\"\n            />\n    </v-form>\n</v-container>\n\n</template>\n\n<script setup>\nimport { defineProps } from \"vue\";\nimport RowAnswerFull from \"./../base/RowAnswerFull.vue\";\n\nconst props = defineProps({\n    enablePractice: Boolean\n});\n\nconst WE_LABEL = \"We / Wij\";\nconst JULLIE_LABEL = \"Jullie\";\nconst ZIJ_LABEL = \"Zij\";\n</script>\n\n<style scoped lang=\"scss\">\n.v-label {\n    font-size: 1rem !important;\n}\n</style>\n","import script from \"./VerbAnswerPluralForm.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbAnswerPluralForm.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VerbAnswerPluralForm.vue?vue&type=style&index=0&id=71d369b6&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-71d369b6\"]])\n\nexport default __exports__","<template>\n    <v-container class=\"py-0\">\n        <v-row>\n            <v-col cols=\"12\" xl=\"6\" lg=\"6\" md=\"6\" sm=\"12\" xs=\"12\">\n                <v-sheet\n                    class=\"d-flex\"\n                    color=\"teal-lighten-3\"\n                    :height=\"SHEET_HEIGHT\"\n                    rounded=\"xl\"\n                >\n                    <verb-answer-singular-form :enablePractice=\"enablePractice\" />\n                </v-sheet>\n            </v-col>\n\n            <v-col cols=\"12\" xl=\"6\" lg=\"6\" md=\"6\" sm=\"12\" xs=\"12\">\n                <v-sheet\n                    class=\"d-flex\"\n                    color=\"red-lighten-3\"\n                    :height=\"SHEET_HEIGHT\"\n                    rounded=\"xl\"\n                >\n                    <verb-answer-plural-form :enablePractice=\"enablePractice\" />\n                </v-sheet>\n            </v-col>\n        </v-row>\n    </v-container>\n</template>\n\n<script setup>\nimport { computed } from \"vue\";\nimport { useStore } from \"vuex\";\nimport VerbAnswerSingularForm from \"./VerbAnswerSingularForm.vue\";\nimport VerbAnswerPluralForm from \"./VerbAnswerPluralForm.vue\";\n\nconst SHEET_HEIGHT = \"250\";\nconst store = useStore();\nconst enablePractice = computed(() => store.getters.getEnablePractice);\n</script>\n","import script from \"./VerbAnswer.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbAnswer.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import script from \"./VerbItem.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbItem.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VerbItem.vue?vue&type=style&index=0&id=3e7ce1ee&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-3e7ce1ee\"]])\n\nexport default __exports__","<template>\n    <v-sheet\n        class=\"d-flex ma-3\"\n        :color=\"color\"\n        height=\"280\"\n        rounded=\"xl\"\n    >\n        <v-container>\n            <v-label class=\"mb-2\" style=\"height: 1.5rem\"><h4>{{ props.tense }}</h4></v-label>\n\n            <verb-item :personText=\"IK_LABEL\" :personVerb=\"ikVerb\" />\n            <verb-item :personText=\"JE_LABEL\" :personVerb=\"jeVerb\" />\n            <verb-item :personText=\"HET_LABEL\" :personVerb=\"hetVerb\" />\n            <verb-item :personText=\"WE_LABEL\" :personVerb=\"weVerb\" />\n            <verb-item :personText=\"JULLIE_LABEL\" :personVerb=\"jullieVerb\" />\n            <verb-item :personText=\"ZIJ_LABEL\" :personVerb=\"zijVerb\" />\n        </v-container>\n    </v-sheet>\n</template>\n\n<script setup>\nimport { computed, defineProps } from \"vue\";\nimport VerbItem from \"@/components/verbs/base/VerbItem.vue\";\nimport { IK_LABEL, JE_LABEL, HET_LABEL, WE_LABEL, JULLIE_LABEL, ZIJ_LABEL } from \"@/constants/index\";\n\nconst props = defineProps({\n    presentData: {\n        type: Array,\n        default: () => []\n    },\n    tense: {\n        type: String,\n        default: \"Presens\"\n    },\n    color: {\n        type: String,\n        default: \"teal-lighten-3\"\n    }\n});\n\nconst ikVerb = computed(() => {\n    return props.presentData.length\n        ? props.presentData[0].verb\n        : \"\";\n});\nconst jeVerb = computed(() => {\n    return props.presentData.length\n        ? props.presentData[1].verb\n        : \"\";\n});\nconst hetVerb = computed(() => {\n    return props.presentData.length\n        ? props.presentData[2].verb\n        : \"\";\n});\nconst weVerb = computed(() => {\n    return props.presentData.length\n        ? props.presentData[4].verb\n        : \"\";\n});\nconst jullieVerb = computed(() => {\n    return props.presentData.length\n        ? props.presentData[5].verb\n        : \"\";\n});\nconst zijVerb = computed(() => {\n    return props.presentData.length\n        ? props.presentData[6].verb\n        : \"\";\n});\n</script>\n\n<style scoped lang=\"scss\">\n.v-text-field.centered-input .v-label {\n  left: 50% !important;\n  transform: translateX(-50%);\n  &.v-label--active {\n    transform: translateY(-18px) scale(.75) translateX(-50%);\n  }\n}\n</style>\n","import script from \"./VerbCardPresent.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbCardPresent.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VerbCardPresent.vue?vue&type=style&index=0&id=081e72ee&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-081e72ee\"]])\n\nexport default __exports__","<template>\n    <v-sheet\n        class=\"d-flex ma-3\"\n        :color=\"props.color\"\n        height=\"130\"\n        rounded=\"xl\"\n    >\n        <v-container>\n            <v-label class=\"mb-2\" style=\"height: 1.5rem\"><h4>{{ props.tense }}</h4></v-label>\n            <verb-item\n                :personText=\"SINGULAR_PERSON\"\n                :personVerb=\"singularPastVerb\"\n                class=\"mb-2\"\n            />\n            <verb-item\n                :personText=\"PLURAL_PERSON\"\n                :personVerb=\"pluralPastVerb\"\n                class=\"mb-2\"\n            />\n        </v-container>\n    </v-sheet>\n</template>\n\n<script setup>\nimport { computed, defineProps } from \"vue\";\nimport VerbItem from \"@/components/verbs/base/VerbItem.vue\";\n\nconst SINGULAR_PERSON = \"Singular\";\nconst PLURAL_PERSON = \"Plural\";\n\nconst props = defineProps({\n    pastData: {\n        type: Array,\n        default: () => []\n    },\n    tense: {\n        type: String,\n        default: \"\"\n    },\n    color: {\n        type: String,\n        default: \"amber-lighten-2\"\n    }\n});\n\nconst singularPastVerb = computed(() => {\n    return props.pastData.length\n        ? props.pastData[0].verb\n        : \"\";\n});\nconst pluralPastVerb = computed(() => {\n    return props.pastData.length\n        ? props.pastData[4].verb\n        : \"\";\n});\n</script>\n\n<style scoped lang=\"scss\">\n.v-text-field.centered-input .v-label {\n  left: 50% !important;\n  transform: translateX(-50%);\n  &.v-label--active {\n    transform: translateY(-18px) scale(.75) translateX(-50%);\n  }\n}\n</style>\n","import script from \"./VerbCardPast.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbCardPast.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VerbCardPast.vue?vue&type=style&index=0&id=19948936&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-19948936\"]])\n\nexport default __exports__","export const COLOR_PALETTE_1 = [\n    \"deep-orange-lighten-3\",\n    \"blue-accent-1\",\n    \"teal-lighten-3\",\n    \"deep-purple-lighten-4\"\n];\n\nexport const COLOR_PALETTE_2 = [\n    \"deep-purple-lighten-3\",\n    \"lime-lighten-2\",\n    \"brown-lighten-3\",\n    \"teal-lighten-1\"\n];\n\nexport const COLOR_PALETTE_3 = [\n    \"deep-orange-lighten-3\",\n    \"green-accent-2\",\n    \"cyan-accent-3\",\n    \"deep-purple-accent-1\"\n];\n\nexport const MAXIMUM = 2;\nexport const MINIMUM = 0;\n","<template>\n    <v-container>\n        <v-card width=\"100%\">\n            <v-row>\n                <v-col cols=\"12\" xl=\"4\" lg=\"4\" md=\"6\" sm=\"6\" xs=\"12\">\n                    <verb-card-present\n                        v-if=\"presentResults\"\n                        :color=\"colorPalette[0]\"\n                        :tense=\"PRESENT\"\n                        :presentData=\"presentResults\"\n                    />\n                </v-col>\n\n                <v-col cols=\"12\" xl=\"4\" lg=\"4\" md=\"6\" sm=\"6\" xs=\"12\">\n                    <verb-card-present\n                        v-if=\"pastResults\"\n                        :color=\"colorPalette[1]\"\n                        :tense=\"PERFECTUM\"\n                        :presentData=\"pastResults\"\n                    />\n                </v-col>\n                <v-col cols=\"12\" xl=\"4\" lg=\"4\" md=\"6\" sm=\"6\" xs=\"12\">\n                    <verb-card-past\n                        v-if=\"imperfectumResults\"\n                        :tense=\"IMPERFECTUM\"\n                        :color=\"colorPalette[2]\"\n                        :pastData=\"imperfectumResults\"\n                    />\n                    <verb-card-past\n                        v-if=\"plusquamperfectumResults\"\n                        :color=\"colorPalette[3]\"\n                        :tense=\"PLUSQUAMPERFECTUM\"\n                        :pastData=\"plusquamperfectumResults\"\n                    />\n                </v-col>\n            </v-row>\n        </v-card>\n    </v-container>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onMounted } from \"vue\";\nimport { useStore } from \"vuex\";\nimport VerbCardPresent from \"../show/VerbCardPresent.vue\";\nimport VerbCardPast from \"../show/VerbCardPast.vue\";\nimport { useVerb } from \"@/composables/verbs\";\nimport { TENSES } from \"@/constants/index\";\nimport {\n    MAXIMUM,\n    MINIMUM,\n    COLOR_PALETTE_1,\n    COLOR_PALETTE_2,\n    COLOR_PALETTE_3\n} from \"@/constants/colors\";\n\nconst store = useStore();\n\nconst presentResults = ref([]);\nconst pastResults = ref([]);\nconst imperfectumResults = ref([]);\nconst plusquamperfectumResults = ref([]);\n\nconst { verbConjugation } = useVerb();\n\nconst verb = computed(() => store.getters.getCurrentVerb);\nconst getCurrentVerbData = computed(() => store.getters.getCurrentVerbData);\n\nconst PRESENT = TENSES[0].text;\nconst PERFECTUM = TENSES[1].text;\nconst IMPERFECTUM = TENSES[2].text;\nconst PLUSQUAMPERFECTUM = TENSES[3].text;\n\nconst getVerbResultsPerTense = () => {\n    presentResults.value = verbConjugation(TENSES[0].value, getCurrentVerbData.value);\n    pastResults.value = verbConjugation(TENSES[1].value, getCurrentVerbData.value);\n    imperfectumResults.value = verbConjugation(TENSES[2].value, getCurrentVerbData.value);\n    plusquamperfectumResults.value = verbConjugation(TENSES[3].value, getCurrentVerbData.value);\n};\n\n// color palette\nconst random = () => (Math.floor(Math.random() * (MAXIMUM - MINIMUM + 1)) + MINIMUM);\nconst colorPalette = computed(() => {\n    const randomColorIndex = random();\n    const palettes = [\n        COLOR_PALETTE_1,\n        COLOR_PALETTE_2,\n        COLOR_PALETTE_3\n    ];\n    return palettes[randomColorIndex];\n});\n\nonMounted(async () => {\n    await store.dispatch(\"setCurrentVerb\", verb.value);\n    getVerbResultsPerTense();\n});\n\nwatch(verb, async () => {\n    await store.dispatch(\"setCurrentVerb\", verb.value);\n    getVerbResultsPerTense();\n});\n</script>\n\n<style scoped lang=\"scss\">\n.form-title{\n    font-family: \"Lobster Two\" !important;\n    font-size: 1.2rem;\n    line-height: 1.2rem !important;\n}\n\n.v-text-field.centered-input .v-label {\n  left: 50% !important;\n  transform: translateX(-50%);\n  &.v-label--active {\n    transform: translateY(-18px) scale(.75) translateX(-50%);\n  }\n}\n</style>\n","import script from \"./VerbCard.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbCard.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VerbCard.vue?vue&type=style&index=0&id=eaf143d8&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-eaf143d8\"]])\n\nexport default __exports__","<template>\n    <!-- <v-card width=\"100%\" v-if=\"props.verbs.length\"> -->\n        <v-chip\n            v-for=\"(item, index) in props.verbs\" :key=\"index\"\n            class=\"ma-2\"\n            :color=\"colorChip(index)\"\n            text-color=\"white\"\n            elevation=\"2\"\n        >\n            {{ item }}\n        </v-chip>\n    <!-- </v-card> -->\n</template>\n\n<script setup>\nimport { defineProps } from \"vue\";\nconst props = defineProps({\n    verbs: {\n        type: Array,\n        default: () => []\n    },\n    color: String\n});\n\nconst CHIP_COLORS = [\"deep-purple accent-4\", \"success\", \"warning\", \"error\", \"indigo\"];\nconst randomColor = (itemIndex) => {\n    const index = (itemIndex + 1) % 5;\n    return CHIP_COLORS[index];\n};\n\nconst colorChip = (index) => props.color ? props.color : randomColor(index);\n</script>\n","import script from \"./VerbChip.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbChip.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","<template>\n    <v-container>\n        <v-form\n            ref=\"form\"\n            lazy-validation\n        >\n            <v-row>\n                <v-col>\n                    <verb-chip v-if=\"!loading\" :verbs=\"translations\" />\n                </v-col>\n            </v-row>\n        </v-form>\n        <v-card width=\"100%\" v-if=\"!loading\">\n            <v-alert\n                v-for=\"(example, index) in examples\" :key=\"index\"\n                :border=\"borderAlert(index)\"\n                :border-color=\"borderAlertColor(index)\"\n                elevation=\"2\"\n                class=\"ma-4 example-container\"\n            >\n                {{ example }}\n            </v-alert>\n        </v-card>\n    </v-container>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onMounted } from \"vue\";\nimport VerbChip from \"@/components/verbs/base/VerbChip.vue\";\nimport { useStore } from \"vuex\";\n\nconst store = useStore();\nconst loading = ref(true);\nconst translations = ref([]);\nconst examples = ref([]);\n\n// verb\nconst verb = computed(() => store.getters.getCurrentVerb);\n\n// translations\nconst getCurrentVerbTranslations = computed(() => store.getters.getCurrentVerbTranslations);\n\n// examples\nconst getCurrentVerbExamples = computed(() => store.getters.getCurrentVerbExamples);\n\n// colors\nconst BORDERS = [\"start\", \"top\", \"bottom\", \"end\"];\nconst borderAlert = (itemIndex) => {\n    const index = (itemIndex + 1) % 4;\n    return BORDERS[index];\n};\nconst BORDER_COLORS = [\"deep-purple accent-4\", \"success\", \"warning\", \"error\"];\nconst borderAlertColor = (itemIndex) => {\n    const index = (itemIndex + 1) % 4;\n    return BORDER_COLORS[index];\n};\n\nconst getVerbResultsExamples = () => {\n    examples.value = getCurrentVerbExamples.value;\n    translations.value = getCurrentVerbTranslations.value;\n    loading.value = false;\n};\n\nonMounted(async () => {\n    await store.dispatch(\"setCurrentVerb\", verb.value);\n    getVerbResultsExamples();\n});\n\nwatch(verb, async () => {\n    await store.dispatch(\"setCurrentVerb\", verb.value);\n    getVerbResultsExamples();\n});\n</script>\n\n<style scoped lang=\"scss\">\n.form-title{\n    font-family: \"Lobster Two\" !important;\n    font-size: 1.2rem;\n    line-height: 1.2rem !important;\n}\n\n.v-text-field.centered-input .v-label {\n  left: 50% !important;\n  transform: translateX(-50%);\n  &.v-label--active {\n    transform: translateY(-18px) scale(.75) translateX(-50%);\n  }\n}\n\n.example-container {\n    font-size: 1.1rem;\n}\n</style>\n","import script from \"./VerbCardExamples.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VerbCardExamples.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VerbCardExamples.vue?vue&type=style&index=0&id=4203c740&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-4203c740\"]])\n\nexport default __exports__","<template>\n    <v-container class=\"py-1\">\n        <v-card width=\"100%\">\n            <verb-form id=\"practice-verb\" @forceUpdate=\"reRenderAnswers\" />\n\n            <v-tabs\n                v-model=\"tab\"\n                bg-color=\"transparent\"\n                grow\n                :direction=\"tabsDirection\"\n            >\n                <v-tab value=\"practice\">Oefening met werkwoorden</v-tab>\n                <v-tab value=\"learn\">Werkwoorden leren</v-tab>\n                <v-tab value=\"examples\">Voorbeelden</v-tab>\n            </v-tabs>\n\n            <v-card-text class=\"px-0\">\n                <v-window v-model=\"tab\">\n                    <!-- Practice form -->\n                    <v-window-item value=\"practice\">\n                        <verb-answers :key=\"answerComponentKey\" />\n                    </v-window-item>\n\n                    <!-- Learning tiles (with the answers) -->\n                    <v-window-item value=\"learn\">\n                        <verb-card id=\"learn-verb\" />\n                    </v-window-item>\n\n                    <!-- Verb examples (full sentences) -->\n                    <v-window-item value=\"examples\">\n                        <verb-card-examples id=\"examples-verb\" />\n                    </v-window-item>\n                </v-window>\n            </v-card-text>\n        </v-card>\n    </v-container>\n</template>\n\n<script setup>\nimport { ref, onMounted, computed, watch } from \"vue\";\nimport { useStore } from \"vuex\";\nimport { useDisplay } from \"vuetify\";\nimport VerbForm from \"@/components/verbs/VerbForm.vue\";\nimport VerbAnswers from \"@/components/verbs/practice/VerbAnswer.vue\";\nimport VerbCard from \"@/components/verbs/show/VerbCard.vue\";\nimport VerbCardExamples from \"@/components/verbs/VerbCardExamples.vue\";\n\nconst store = useStore();\nconst { name } = useDisplay();\n\n// answers\nconst answerComponentKey = ref(0);\nconst reRenderAnswers = () => {\n    answerComponentKey.value += 1;\n};\n\n// tabs\nconst tab = ref(\"\");\nconst tabsDirection = ref(\"vertical\");\nconst isMobile = computed(() => {\n    switch (name.value) {\n    case \"xs\": return true;\n    case \"sm\": return true;\n    case \"md\": return false;\n    case \"lg\": return false;\n    case \"xl\": return false;\n    case \"xxl\": return false;\n    default: return false;\n    };\n});\nconst getTabsDirection = () => {\n    return isMobile.value === true ? \"vertical\" : \"horizontal\";\n};\nonMounted(() => {\n    store.dispatch(\"setVerbList\");\n    tabsDirection.value = getTabsDirection();\n});\n\nwatch(isMobile, () => {\n    tabsDirection.value = getTabsDirection();\n});\n</script>\n\n<style scoped lang=\"scss\">\n.v-btn  {\n    font-family: \"Lobster Two\" !important;\n    font-size: 1.2rem;\n    line-height: 1.2rem !important;\n    text-transform: none;\n}\n</style>\n","import script from \"./Home.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Home.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./Home.vue?vue&type=style&index=0&id=08ac820e&scoped=true&lang=scss\"\n\nimport exportComponent from \"/Users/diana/Documents/diana/projects/dutch-it-up/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-08ac820e\"]])\n\nexport default __exports__"],"names":["useVerb","verbConjugation","currentTense","currentVerbData","verbs","Object","keys","forEach","tense","fullTense","person","push","verb","IK_LABEL","JE_LABEL","JE_LABEL_FULL","HET_LABEL","HET_LABEL_FULL","WE_LABEL","JULLIE_LABEL","ZIJ_LABEL","TENSES","value","text","store","useStore","verbList","computed","getters","getVerbList","ref","watch","async","newValue","oldValue","dispatch","emit","tenseList","map","getCurrentTense","getCurrentVerbData","results","__exports__","showQuestion","rules","v","length","showAnswer","typing","startTyping","answerReady","validateAnswer","noAnswerAvailable","props","verbAnswer","controlled","showValidateAnswerIcon","enablePractice","validateAnswerIconColor","isCorrect","trim","toLowerCase","showControlledAnswerIcon","controlledAnswerIconColor","correctAnswerIcon","controlAnswerTooltip","toggleAnswer","getCurrentAnswersPerTensePerPerson","mobile","useDisplay","secondPersonLabel","thirdPersonLabel","SHEET_HEIGHT","getEnablePractice","ikVerb","presentData","jeVerb","hetVerb","weVerb","jullieVerb","zijVerb","SINGULAR_PERSON","PLURAL_PERSON","singularPastVerb","pastData","pluralPastVerb","COLOR_PALETTE_1","COLOR_PALETTE_2","COLOR_PALETTE_3","MAXIMUM","MINIMUM","presentResults","pastResults","imperfectumResults","plusquamperfectumResults","getCurrentVerb","PRESENT","PERFECTUM","IMPERFECTUM","PLUSQUAMPERFECTUM","getVerbResultsPerTense","random","Math","floor","colorPalette","randomColorIndex","palettes","onMounted","CHIP_COLORS","randomColor","itemIndex","index","colorChip","color","loading","translations","examples","getCurrentVerbTranslations","getCurrentVerbExamples","BORDERS","borderAlert","BORDER_COLORS","borderAlertColor","getVerbResultsExamples","name","answerComponentKey","reRenderAnswers","tab","tabsDirection","isMobile","getTabsDirection"],"sourceRoot":""}