Basic functionality
This commit is contained in:
@@ -1,67 +1,153 @@
|
||||
<template>
|
||||
|
||||
<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
|
||||
<div class="container flex flex-wrap justify-between items-center mx-auto">
|
||||
<a href="#" class="flex">
|
||||
<svg class="mr-3 h-10" viewBox="0 0 52 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.87695 53H28.7791C41.5357 53 51.877 42.7025 51.877 30H24.9748C12.2182 30 1.87695 40.2975 1.87695 53Z" fill="#76A9FA"/><path d="M0.000409561 32.1646L0.000409561 66.4111C12.8618 66.4111 23.2881 55.9849 23.2881 43.1235L23.2881 8.87689C10.9966 8.98066 1.39567 19.5573 0.000409561 32.1646Z" fill="#A4CAFE"/><path d="M50.877 5H23.9748C11.2182 5 0.876953 15.2975 0.876953 28H27.7791C40.5357 28 50.877 17.7025 50.877 5Z" fill="#1C64F2"/></svg>
|
||||
<span class="self-center text-lg font-semibold whitespace-nowrap dark:text-white">Slovník</span>
|
||||
</a>
|
||||
<div class="flex md:order-2">
|
||||
<button data-collapse-toggle="mobile-menu-2" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Preklad</button>
|
||||
<button data-collapse-toggle="mobile-menu-4" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-4" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
|
||||
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="mobile-menu-4">
|
||||
<div class="pt-2 px-2 relative mx-auto text-gray-600">
|
||||
<input class="w-full border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
|
||||
type="search" name="search" placeholder="Výraz">
|
||||
<button type="submit" class="absolute right-0 top-0 mt-5 mr-4">
|
||||
<svg class="text-gray-600 h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
|
||||
viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve"
|
||||
width="512px" height="512px">
|
||||
<nav
|
||||
class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800"
|
||||
>
|
||||
<div class="container flex flex-wrap justify-between items-center mx-auto">
|
||||
<a href="#" class="flex">
|
||||
<svg
|
||||
class="mr-3 h-10"
|
||||
viewBox="0 0 52 72"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.87695 53H28.7791C41.5357 53 51.877 42.7025 51.877 30H24.9748C12.2182 30 1.87695 40.2975 1.87695 53Z"
|
||||
fill="#76A9FA"
|
||||
/>
|
||||
<path
|
||||
d="M0.000409561 32.1646L0.000409561 66.4111C12.8618 66.4111 23.2881 55.9849 23.2881 43.1235L23.2881 8.87689C10.9966 8.98066 1.39567 19.5573 0.000409561 32.1646Z"
|
||||
fill="#A4CAFE"
|
||||
/>
|
||||
<path
|
||||
d="M50.877 5H23.9748C11.2182 5 0.876953 15.2975 0.876953 28H27.7791C40.5357 28 50.877 17.7025 50.877 5Z"
|
||||
fill="#1C64F2"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="self-center text-lg font-semibold whitespace-nowrap dark:text-white"
|
||||
>Slovník</span
|
||||
>
|
||||
</a>
|
||||
<div class="flex md:order-2">
|
||||
<button
|
||||
data-collapse-toggle="mobile-menu-2"
|
||||
type="button"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Preklad
|
||||
</button>
|
||||
<button
|
||||
data-collapse-toggle="mobile-menu-4"
|
||||
type="button"
|
||||
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
aria-controls="mobile-menu-4"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z" />
|
||||
fill-rule="evenodd"
|
||||
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
class="hidden w-6 h-6"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="px-2 flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
||||
<vue-tabz
|
||||
:data="['Jednoduchý', 'Výslovnosť', 'Písmená' ]"
|
||||
@clickedTab="tabsHandler"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class=" lg:flex lg:flex-row bg-green-100 sm:flex-none">
|
||||
<div id="mobile-menu-2" class="bg-yellow-100 md:text-lg flex flex-col w-full px-4 border-b lg:border-r lg:h-fit lg:w-64 ">
|
||||
<left-dict :data="trData"></left-dict>
|
||||
<div
|
||||
class="hidden justify-between items-center w-full md:flex md:w-auto md:order-1"
|
||||
id="mobile-menu-4"
|
||||
>
|
||||
<div class="pt-2 px-2 relative mx-auto text-gray-600">
|
||||
<input
|
||||
class="w-full border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
|
||||
ref="searchstr"
|
||||
v-on:keyup.enter="search_dict"
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Výraz"
|
||||
/>
|
||||
<button type="submit" class="absolute right-0 top-0 mt-5 mr-4" v-on:click="search_dict">
|
||||
<svg
|
||||
class="text-gray-600 h-4 w-4 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
id="Capa_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 56.966 56.966"
|
||||
style="enable-background: new 0 0 56.966 56.966"
|
||||
xml:space="preserve"
|
||||
width="512px"
|
||||
height="512px"
|
||||
>
|
||||
<path
|
||||
d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
class="px-2 flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium"
|
||||
>
|
||||
<vue-tabz
|
||||
:data="['Jednoduchý', 'Výslovnosť', 'Písmená']"
|
||||
@clickedTab="tabsHandler"
|
||||
></vue-tabz>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="lg:flex lg:flex-row bg-green-100 sm:flex-none">
|
||||
<div
|
||||
id="mobile-menu-2"
|
||||
class="bg-yellow-100 md:text-lg flex flex-col w-full px-4 border-b lg:border-r lg:h-fit lg:w-64"
|
||||
>
|
||||
<left-dict :data="trData" @switch-trans="switchTrans"></left-dict>
|
||||
</div>
|
||||
<div class="flex flex-col w-full px-4">
|
||||
<translation-content
|
||||
:data="termsData"
|
||||
:type="currentIndex"
|
||||
:translation="currentTrans"
|
||||
>
|
||||
</translation-content>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" flex flex-col w-full px-4" >
|
||||
<translation-content :data="termsData" :type="currentIndex"> </translation-content>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import vueTabz from './components/vue-tabz.vue'
|
||||
import logoUrl from './assets/logo.png'
|
||||
import trData from './components/Translations'
|
||||
import termsData from './components/Terms'
|
||||
// import trData from './components/Translations'
|
||||
//import termsData from './components/Terms'
|
||||
import LeftDict from './components/LeftDict.vue'
|
||||
import SearchForm from './components/SearchForm.vue'
|
||||
import TranslationContent from './components/Translation.vue'
|
||||
import Translation from './components/Translation.vue'
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
console.log(trData);
|
||||
console.log(logoUrl);
|
||||
//console.log(trData)
|
||||
console.log(logoUrl)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@@ -72,17 +158,60 @@ export default {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
currentTab: '',
|
||||
};
|
||||
currentTrans: 1,
|
||||
termsData: null,
|
||||
trData: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
fetch('/api/v1/translations/', {
|
||||
headers: { 'Content-type': 'application/json' },
|
||||
}).then(res=>res.json()).then((response) => {
|
||||
this.trData = response;
|
||||
}).catch( (error) => {
|
||||
this.trData = error;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
tabsHandler(data) {
|
||||
this.currentIndex = data.index;
|
||||
this.currentTab = data.tab;
|
||||
console.log(data.index);
|
||||
console.log(data.tab);
|
||||
this.currentIndex = data.index
|
||||
this.currentTab = data.tab
|
||||
console.log(data.index)
|
||||
console.log(data.tab)
|
||||
},
|
||||
search_dict() {
|
||||
console.log(this.$refs.searchstr.value)
|
||||
console.log('SEARCH')
|
||||
var that = this
|
||||
axios
|
||||
.get('/api/v1/terms/', {
|
||||
params: {
|
||||
string: this.$refs.searchstr.value,
|
||||
translation: this.currentTrans,
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
// handle success
|
||||
that.termsData = response.data
|
||||
console.log(response)
|
||||
})
|
||||
.catch(function (error) {
|
||||
// handle error
|
||||
console.log(error)
|
||||
})
|
||||
.then(function () {
|
||||
console.log('EXEC')
|
||||
// always executed
|
||||
})
|
||||
},
|
||||
switchTrans(i) {
|
||||
if (this.currentTrans != i) {
|
||||
this.currentTrans = i
|
||||
this.search_dict()
|
||||
console.log('TRANS switch = ', i)
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
|
||||
@@ -5,16 +5,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<ul class="flex flex-col py-4">
|
||||
<li v-for="(t, i) in data.translations" :key="i">
|
||||
<a href="#" class="flex flex-row items-center h-12 transform hover:translate-x-2 transition-transform ease-in duration-200 text-gray-500 hover:text-gray-800">
|
||||
<span class="inline-flex items-center justify-center h-12 w-12 text-lg text-gray-400"><i class="bx bx-home"></i></span>
|
||||
<span class="text-sm font-medium">{{ t.lang }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="flex flex-col py-4">
|
||||
<li
|
||||
v-for="(t, i) in data.translations"
|
||||
:key="i"
|
||||
@click="this.$emit('switch-trans', i)"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="flex flex-row items-center h-12 transform hover:translate-x-2 transition-transform ease-in duration-200 text-gray-500 hover:text-gray-800"
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-12 w-12 text-lg text-gray-400"
|
||||
><i class="bx bx-home"></i
|
||||
></span>
|
||||
<span class="text-sm font-medium">{{ t.lang }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
@@ -1,31 +1,47 @@
|
||||
<script>
|
||||
export default {
|
||||
props: ['data']
|
||||
props: ['data'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-xs">
|
||||
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
|
||||
Slovo
|
||||
</label>
|
||||
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="term" type="text" placeholder="slovo">
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
|
||||
Slovnik
|
||||
</label>
|
||||
<input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline">
|
||||
</div>
|
||||
<div class="mt-7">
|
||||
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
|
||||
Hľadaj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w-full max-w-xs">
|
||||
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="block text-gray-700 text-sm font-bold mb-2"
|
||||
for="username"
|
||||
>
|
||||
Slovo
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="term"
|
||||
type="text"
|
||||
placeholder="slovo"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
class="block text-gray-700 text-sm font-bold mb-2"
|
||||
for="password"
|
||||
>
|
||||
Slovnik
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-7">
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
||||
type="button"
|
||||
>
|
||||
Hľadaj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,310 +1,624 @@
|
||||
<script>
|
||||
|
||||
import VueSound from './VueSound.vue';
|
||||
import VueSound from './VueSound.vue'
|
||||
|
||||
export default {
|
||||
props: ['data', 'type'],
|
||||
components: { VueSound, },
|
||||
props: ['data', 'type', 'translation'],
|
||||
components: { VueSound },
|
||||
computed: {
|
||||
termsDataDict: function() {
|
||||
let data = this.data.terms;
|
||||
let ret = Object({});
|
||||
for(let i = 0; i < data.length; i++) {
|
||||
if (!Array.isArray(ret[data[i].string1])) ret[data[i].string1] = [];
|
||||
ret[data[i].string1].push(data[i]);
|
||||
termsDataDict: function () {
|
||||
let data = this.data.terms
|
||||
let ret = Object({})
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (!Array.isArray(ret[data[i].string1])) ret[data[i].string1] = []
|
||||
ret[data[i].string1].push(data[i])
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
return ret
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div v-if="type == 0" class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8">
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div
|
||||
v-if="type == 0 && data != null"
|
||||
class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8"
|
||||
>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block py-2 min-w-full sm:px-6 lg:px-8">
|
||||
<div class="overflow-hidden shadow-md sm:rounded-lg flex justify-center">
|
||||
<table class="min-w-fit">
|
||||
<thead class="bg-gray-100 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
|
||||
Výraz
|
||||
</th>
|
||||
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
|
||||
Preklad
|
||||
</th>
|
||||
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
|
||||
Člen
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(t, i) in data.terms" :key="i"
|
||||
class="border-b odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700 dark:border-gray-600">
|
||||
<td class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{{ t.string1 }}
|
||||
</td>
|
||||
<td class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
|
||||
{{ t.string2 }}
|
||||
</td>
|
||||
<td class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
|
||||
{{ t.member }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="overflow-hidden shadow-md sm:rounded-lg flex justify-center"
|
||||
>
|
||||
<table class="min-w-fit">
|
||||
<thead class="bg-gray-100 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
|
||||
>
|
||||
Výraz
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
|
||||
>
|
||||
Preklad
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
|
||||
>
|
||||
Člen
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(t, i) in data.terms"
|
||||
:key="i"
|
||||
class="border-b odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700 dark:border-gray-600"
|
||||
>
|
||||
<td
|
||||
class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
{{ t.string1 }}
|
||||
</td>
|
||||
<td
|
||||
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
|
||||
>
|
||||
{{ t.string2 }}
|
||||
</td>
|
||||
<td
|
||||
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
|
||||
>
|
||||
{{ t.member }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="type == 1" class=" flex flex-col items-center justify-center mt-4">
|
||||
|
||||
<div class="bg-gray-100 dark:bg-gray-700 py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400 md:w-1/2 border-b dark:border-slate-600 shadow-sm overflow-hidden">
|
||||
<div class="text-lg grid place-items-center">
|
||||
Preklad
|
||||
<div v-if="type == 1 && data != null" class="flex flex-col items-center justify-center mt-4">
|
||||
<div
|
||||
class="bg-gray-100 dark:bg-gray-700 py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400 md:w-1/2 border-b dark:border-slate-600 shadow-sm overflow-hidden"
|
||||
>
|
||||
<div class="text-lg grid place-items-center">Preklad</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:w-1/2 sm:w-fit justify-center align-middle">
|
||||
<div class="overflow-hidden shadow-md sm:rounded-lg mx-auto">
|
||||
<div v-for="(t, i) in termsDataDict" :key="i" class="border-b odd:bg-white even:bg-gray-50 p-2">
|
||||
<span class="text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white">{{ i }} </span>
|
||||
<span v-if="t[0].pronunciations" class="mx-2">
|
||||
|
||||
<span class="mx-1 text-sm font-bold"
|
||||
v-bind:class="{ 'text-green-800': i == 0, 'text-blue-800': i == 1, 'text-red-800': i == 3 }"
|
||||
v-for="(p,i) in t[0].pronunciations" :key="i">[{{ p.ipa }}]
|
||||
<div class="md:w-1/2 sm:w-fit justify-center align-middle">
|
||||
<div class="overflow-hidden shadow-md sm:rounded-lg mx-auto">
|
||||
<div
|
||||
v-for="(t, i) in termsDataDict"
|
||||
:key="i"
|
||||
class="border-b odd:bg-white even:bg-gray-50 p-2"
|
||||
>
|
||||
<span
|
||||
class="text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>{{ i }}
|
||||
</span>
|
||||
<span v-if="t[0].pronunciations" class="mx-2">
|
||||
<span
|
||||
class="mx-1 text-sm font-bold"
|
||||
v-bind:class="{
|
||||
'text-green-800': i == 0,
|
||||
'text-blue-800': i == 1,
|
||||
'text-red-800': i == 3,
|
||||
}"
|
||||
v-for="(p, i) in t[0].pronunciations"
|
||||
:key="i"
|
||||
>[{{ p.ipa }}]
|
||||
<vue-sound :src="p.filename"></vue-sound>
|
||||
</span>
|
||||
</span>
|
||||
<div class="px-10">
|
||||
<span v-for="(tt, n) in t" :key="n" class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ tt.string2 }}<span v-if="n != t.length-1">, </span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div class="px-10">
|
||||
<span
|
||||
v-for="(tt, n) in t"
|
||||
:key="n"
|
||||
class="text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ tt.string2 }}<span v-if="n != t.length - 1">, </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="type == 2" class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8 mx-auto">
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block py-2 mihttps://stackoverflow.com/questions/6169522/no-module-named-zlibn-w-full sm:px-6 lg:px-8">
|
||||
<div class="overflow-hidden shadow-md sm:rounded-lg flex justify-center">
|
||||
<table class="shadow-lg bg-white border-collapse">
|
||||
<thead class="bg-gray-100 dark:bg-gray-700">
|
||||
<div
|
||||
v-if="type == 2"
|
||||
class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8 mx-auto"
|
||||
>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div
|
||||
class="inline-block py-2 mihttps://stackoverflow.com/questions/6169522/no-module-named-zlibn-w-full sm:px-6 lg:px-8"
|
||||
>
|
||||
<div
|
||||
class="overflow-hidden shadow-md sm:rounded-lg flex justify-center"
|
||||
>
|
||||
<table class="shadow-lg bg-white border-collapse">
|
||||
<thead class="bg-gray-100 dark:bg-gray-700">
|
||||
<tr class="bg-gray-100 dark:bg-gray-700">
|
||||
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">písmeno</th>
|
||||
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">PSP</th>
|
||||
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">alt.</th>
|
||||
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">IPA</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
|
||||
>
|
||||
písmeno
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
|
||||
>
|
||||
PSP
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
|
||||
>
|
||||
alt.
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
|
||||
>
|
||||
IPA
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/B" title="B">B</a> b</td>
|
||||
<td class="border px-8 py-2">bé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/b/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/B" title="B">B</a> b
|
||||
</td>
|
||||
<td class="border px-8 py-2">bé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/b/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/C" title="C">C</a> c</td>
|
||||
<td class="border px-8 py-2">cé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t͡s/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/C" title="C">C</a> c
|
||||
</td>
|
||||
<td class="border px-8 py-2">cé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/t͡s/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C4%8C" title="Č">Č</a> č</td>
|
||||
<td class="border px-8 py-2">čé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t͡ʃ/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C4%8C" title="Č">Č</a> č
|
||||
</td>
|
||||
<td class="border px-8 py-2">čé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/t͡ʃ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/D" title="D">D</a> d</td>
|
||||
<td class="border px-8 py-2">dé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/D" title="D">D</a> d
|
||||
</td>
|
||||
<td class="border px-8 py-2">dé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/d/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C4%8E" title="Ď">Ď</a> ď</td>
|
||||
<td class="border px-8 py-2">ďé</td>
|
||||
<td class="border px-8 py-2">mäkké dé</td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɟ/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C4%8E" title="Ď">Ď</a> ď
|
||||
</td>
|
||||
<td class="border px-8 py-2">ďé</td>
|
||||
<td class="border px-8 py-2">mäkké dé</td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/ɟ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2">DZ dz</td>
|
||||
<td class="border px-8 py-2">dzé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d͡z/</span></td>
|
||||
<td class="border px-8 py-2">DZ dz</td>
|
||||
<td class="border px-8 py-2">dzé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/d͡z/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2">DŽ dž</td>
|
||||
<td class="border px-8 py-2">džé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d͡ʒ/</span></td>
|
||||
<td class="border px-8 py-2">DŽ dž</td>
|
||||
<td class="border px-8 py-2">džé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/d͡ʒ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/F" title="F">F</a> f</td>
|
||||
<td class="border px-8 py-2">ef</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/f/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/F" title="F">F</a> f
|
||||
</td>
|
||||
<td class="border px-8 py-2">ef</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/f/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/G" title="G">G</a> g</td>
|
||||
<td class="border px-8 py-2">gé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɡ/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/G" title="G">G</a> g
|
||||
</td>
|
||||
<td class="border px-8 py-2">gé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/ɡ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/H" title="H">H</a> h</td>
|
||||
<td class="border px-8 py-2">há</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɦ/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/H" title="H">H</a> h
|
||||
</td>
|
||||
<td class="border px-8 py-2">há</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/ɦ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/CH" class="mw-disambig" title="CH">CH</a> ch</td>
|
||||
<td class="border px-8 py-2">chá</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/x/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/CH" class="mw-disambig" title="CH">CH</a> ch
|
||||
</td>
|
||||
<td class="border px-8 py-2">chá</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/x/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/J" title="J">J</a> j</td>
|
||||
<td class="border px-8 py-2">jé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/j/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/J" title="J">J</a> j
|
||||
</td>
|
||||
<td class="border px-8 py-2">jé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/j/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/K" title="K">K</a> k</td>
|
||||
<td class="border px-8 py-2">ká</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/k/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/K" title="K">K</a> k
|
||||
</td>
|
||||
<td class="border px-8 py-2">ká</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/k/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/L" title="L">L</a> l</td>
|
||||
<td class="border px-8 py-2">el</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/l/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/L" title="L">L</a> l
|
||||
</td>
|
||||
<td class="border px-8 py-2">el</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/l/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C4%B9" title="Ĺ">Ĺ</a> ĺ</td>
|
||||
<td class="border px-8 py-2">dlhé el</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/lː/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C4%B9" title="Ĺ">Ĺ</a> ĺ
|
||||
</td>
|
||||
<td class="border px-8 py-2">dlhé el</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/lː/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C4%BD" title="Ľ">Ľ</a> ľ</td>
|
||||
<td class="border px-8 py-2">eľ</td>
|
||||
<td class="border px-8 py-2">mäkké el</td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʎ/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C4%BD" title="Ľ">Ľ</a> ľ
|
||||
</td>
|
||||
<td class="border px-8 py-2">eľ</td>
|
||||
<td class="border px-8 py-2">mäkké el</td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/ʎ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/M" title="M">M</a> m</td>
|
||||
<td class="border px-8 py-2">em</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/m/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/M" title="M">M</a> m
|
||||
</td>
|
||||
<td class="border px-8 py-2">em</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/m/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/N" title="N">N</a> n</td>
|
||||
<td class="border px-8 py-2">en</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/n/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/N" title="N">N</a> n
|
||||
</td>
|
||||
<td class="border px-8 py-2">en</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/n/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C5%87" title="Ň">Ň</a> ň</td>
|
||||
<td class="border px-8 py-2">eň</td>
|
||||
<td class="border px-8 py-2">mäkké en</td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɲ/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C5%87" title="Ň">Ň</a> ň
|
||||
</td>
|
||||
<td class="border px-8 py-2">eň</td>
|
||||
<td class="border px-8 py-2">mäkké en</td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/ɲ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/P" title="P">P</a> p</td>
|
||||
<td class="border px-8 py-2">pé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/p/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/P" title="P">P</a> p
|
||||
</td>
|
||||
<td class="border px-8 py-2">pé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/p/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/Q" title="Q">Q</a> q</td>
|
||||
<td class="border px-8 py-2">kvé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/kv/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/Q" title="Q">Q</a> q
|
||||
</td>
|
||||
<td class="border px-8 py-2">kvé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/kv/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/R" title="R">R</a> r</td>
|
||||
<td class="border px-8 py-2">er</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/r/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/R" title="R">R</a> r
|
||||
</td>
|
||||
<td class="border px-8 py-2">er</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/r/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C5%94" title="Ŕ">Ŕ</a> ŕ</td>
|
||||
<td class="border px-8 py-2">dlhé er</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/rː/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C5%94" title="Ŕ">Ŕ</a> ŕ
|
||||
</td>
|
||||
<td class="border px-8 py-2">dlhé er</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/rː/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/S" title="S">S</a> s</td>
|
||||
<td class="border px-8 py-2">es</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/s/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/S" title="S">S</a> s
|
||||
</td>
|
||||
<td class="border px-8 py-2">es</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/s/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C5%A0" title="Š">Š</a> š</td>
|
||||
<td class="border px-8 py-2">eš</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʃ/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C5%A0" title="Š">Š</a> š
|
||||
</td>
|
||||
<td class="border px-8 py-2">eš</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/ʃ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/T" title="T">T</a> t</td>
|
||||
<td class="border px-8 py-2">té</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/T" title="T">T</a> t
|
||||
</td>
|
||||
<td class="border px-8 py-2">té</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/t/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C5%A4" title="Ť">Ť</a> ť</td>
|
||||
<td class="border px-8 py-2">ťé</td>
|
||||
<td class="border px-8 py-2">mäkké té</td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/c/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C5%A4" title="Ť">Ť</a> ť
|
||||
</td>
|
||||
<td class="border px-8 py-2">ťé</td>
|
||||
<td class="border px-8 py-2">mäkké té</td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/c/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/V" title="V">V</a> v</td>
|
||||
<td class="border px-8 py-2">vé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/v/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/V" title="V">V</a> v
|
||||
</td>
|
||||
<td class="border px-8 py-2">vé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/v/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/W" title="W">W</a> w</td>
|
||||
<td class="border px-8 py-2">dvojité vé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/v/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/W" title="W">W</a> w
|
||||
</td>
|
||||
<td class="border px-8 py-2">dvojité vé</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/v/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/X" title="X">X</a> x</td>
|
||||
<td class="border px-8 py-2">iks</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ks/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/X" title="X">X</a> x
|
||||
</td>
|
||||
<td class="border px-8 py-2">iks</td>
|
||||
<td class="border px-8 py-2"> </td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/ks/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/Z" title="Z">Z</a> z</td>
|
||||
<td class="border px-8 py-2">zé</td>
|
||||
<td class="border px-8 py-2">zet</td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/z/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/Z" title="Z">Z</a> z
|
||||
</td>
|
||||
<td class="border px-8 py-2">zé</td>
|
||||
<td class="border px-8 py-2">zet</td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/z/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border px-8 py-2"><a href="/wiki/%C5%BD" title="Ž">Ž</a> ž</td>
|
||||
<td class="border px-8 py-2">žé</td>
|
||||
<td class="border px-8 py-2">žet</td>
|
||||
<td class="border px-8 py-2"><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʒ/</span></td>
|
||||
<td class="border px-8 py-2">
|
||||
<a href="/wiki/%C5%BD" title="Ž">Ž</a> ž
|
||||
</td>
|
||||
<td class="border px-8 py-2">žé</td>
|
||||
<td class="border px-8 py-2">žet</td>
|
||||
<td class="border px-8 py-2">
|
||||
<span
|
||||
title="Zápis v Medzinárodnej fonetickej abecede (IPA)"
|
||||
class="IPA"
|
||||
>/ʒ/</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,134 +1,134 @@
|
||||
export default {
|
||||
translations: {
|
||||
"1": {
|
||||
"slug": "anglicko-slovensky",
|
||||
"lang": "Anglicko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"2": {
|
||||
"slug": "slovensko-anglicky",
|
||||
"lang": "Slovensko-Anglický",
|
||||
"t": {}
|
||||
},
|
||||
"3": {
|
||||
"slug": "holandsko-cesky",
|
||||
"lang": "Holandsko-Český",
|
||||
"t": {}
|
||||
},
|
||||
"4": {
|
||||
"slug": "cesko-holandsky",
|
||||
"lang": "Česko-Holandský",
|
||||
"t": {}
|
||||
},
|
||||
"5": {
|
||||
"slug": "francuzsko-slovensky",
|
||||
"lang": "Francúzsko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"6": {
|
||||
"slug": "slovensko-francuzsky",
|
||||
"lang": "Slovensko-Francúzsky",
|
||||
"t": {}
|
||||
},
|
||||
"7": {
|
||||
"slug": "nemecko-slovensky",
|
||||
"lang": "Nemecko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"8": {
|
||||
"slug": "slovensko-nemecky",
|
||||
"lang": "Slovensko-Nemecký",
|
||||
"t": {}
|
||||
},
|
||||
"9": {
|
||||
"slug": "taliansko-slovensky",
|
||||
"lang": "Taliansko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"10": {
|
||||
"slug": "slovensko-taliansky",
|
||||
"lang": "Slovensko-Taliansky",
|
||||
"t": {}
|
||||
},
|
||||
"11": {
|
||||
"slug": "latinsko-cesky",
|
||||
"lang": "Latinsko-Český",
|
||||
"t": {}
|
||||
},
|
||||
"12": {
|
||||
"slug": "cesko-latinsky",
|
||||
"lang": "Česko-Latinský",
|
||||
"t": {}
|
||||
},
|
||||
"13": {
|
||||
"slug": "madarsko-slovensky",
|
||||
"lang": "Maďarsko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"14": {
|
||||
"slug": "slovensko-madarsky",
|
||||
"lang": "Slovensko-Maďarský",
|
||||
"t": {}
|
||||
},
|
||||
"15": {
|
||||
"slug": "polsko-cesky",
|
||||
"lang": "Poľsko-Český",
|
||||
"t": {}
|
||||
},
|
||||
"16": {
|
||||
"slug": "cesko-polsky",
|
||||
"lang": "Česko-Poľský",
|
||||
"t": {}
|
||||
},
|
||||
"17": {
|
||||
"slug": "portugalsko-cesky",
|
||||
"lang": "Portugalsko-Český",
|
||||
"t": {}
|
||||
},
|
||||
"18": {
|
||||
"slug": "cesko-portugalsky",
|
||||
"lang": "Česko-Portugalský",
|
||||
"t": {}
|
||||
},
|
||||
"19": {
|
||||
"slug": "rusko-slovensky",
|
||||
"lang": "Rusko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"20": {
|
||||
"slug": "slovensko-rusky",
|
||||
"lang": "Slovensko-Ruský",
|
||||
"t": {}
|
||||
},
|
||||
"21": {
|
||||
"slug": "slovensko-slovensky",
|
||||
"lang": "Slovensko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"22": {
|
||||
"slug": "slovensko-slovensky",
|
||||
"lang": "Slovensko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"23": {
|
||||
"slug": "spanielsko-slovensky",
|
||||
"lang": "Španielsko-Slovenský",
|
||||
"t": {}
|
||||
},
|
||||
"24": {
|
||||
"slug": "slovensko-spanielsky",
|
||||
"lang": "Slovensko-Španielsky",
|
||||
"t": {}
|
||||
},
|
||||
"25": {
|
||||
"slug": "svedsko-cesky",
|
||||
"lang": "Švédsko-Český",
|
||||
"t": {}
|
||||
},
|
||||
"26": {
|
||||
"slug": "cesko-svedsky",
|
||||
"lang": "Česko-Švédsky",
|
||||
"t": {}
|
||||
}
|
||||
},
|
||||
}
|
||||
translations: {
|
||||
1: {
|
||||
slug: 'anglicko-slovensky',
|
||||
lang: 'Anglicko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
2: {
|
||||
slug: 'slovensko-anglicky',
|
||||
lang: 'Slovensko-Anglický',
|
||||
t: {},
|
||||
},
|
||||
3: {
|
||||
slug: 'holandsko-cesky',
|
||||
lang: 'Holandsko-Český',
|
||||
t: {},
|
||||
},
|
||||
4: {
|
||||
slug: 'cesko-holandsky',
|
||||
lang: 'Česko-Holandský',
|
||||
t: {},
|
||||
},
|
||||
5: {
|
||||
slug: 'francuzsko-slovensky',
|
||||
lang: 'Francúzsko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
6: {
|
||||
slug: 'slovensko-francuzsky',
|
||||
lang: 'Slovensko-Francúzsky',
|
||||
t: {},
|
||||
},
|
||||
7: {
|
||||
slug: 'nemecko-slovensky',
|
||||
lang: 'Nemecko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
8: {
|
||||
slug: 'slovensko-nemecky',
|
||||
lang: 'Slovensko-Nemecký',
|
||||
t: {},
|
||||
},
|
||||
9: {
|
||||
slug: 'taliansko-slovensky',
|
||||
lang: 'Taliansko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
10: {
|
||||
slug: 'slovensko-taliansky',
|
||||
lang: 'Slovensko-Taliansky',
|
||||
t: {},
|
||||
},
|
||||
11: {
|
||||
slug: 'latinsko-cesky',
|
||||
lang: 'Latinsko-Český',
|
||||
t: {},
|
||||
},
|
||||
12: {
|
||||
slug: 'cesko-latinsky',
|
||||
lang: 'Česko-Latinský',
|
||||
t: {},
|
||||
},
|
||||
13: {
|
||||
slug: 'madarsko-slovensky',
|
||||
lang: 'Maďarsko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
14: {
|
||||
slug: 'slovensko-madarsky',
|
||||
lang: 'Slovensko-Maďarský',
|
||||
t: {},
|
||||
},
|
||||
15: {
|
||||
slug: 'polsko-cesky',
|
||||
lang: 'Poľsko-Český',
|
||||
t: {},
|
||||
},
|
||||
16: {
|
||||
slug: 'cesko-polsky',
|
||||
lang: 'Česko-Poľský',
|
||||
t: {},
|
||||
},
|
||||
17: {
|
||||
slug: 'portugalsko-cesky',
|
||||
lang: 'Portugalsko-Český',
|
||||
t: {},
|
||||
},
|
||||
18: {
|
||||
slug: 'cesko-portugalsky',
|
||||
lang: 'Česko-Portugalský',
|
||||
t: {},
|
||||
},
|
||||
19: {
|
||||
slug: 'rusko-slovensky',
|
||||
lang: 'Rusko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
20: {
|
||||
slug: 'slovensko-rusky',
|
||||
lang: 'Slovensko-Ruský',
|
||||
t: {},
|
||||
},
|
||||
21: {
|
||||
slug: 'slovensko-slovensky',
|
||||
lang: 'Slovensko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
22: {
|
||||
slug: 'slovensko-slovensky',
|
||||
lang: 'Slovensko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
23: {
|
||||
slug: 'spanielsko-slovensky',
|
||||
lang: 'Španielsko-Slovenský',
|
||||
t: {},
|
||||
},
|
||||
24: {
|
||||
slug: 'slovensko-spanielsky',
|
||||
lang: 'Slovensko-Španielsky',
|
||||
t: {},
|
||||
},
|
||||
25: {
|
||||
slug: 'svedsko-cesky',
|
||||
lang: 'Švédsko-Český',
|
||||
t: {},
|
||||
},
|
||||
26: {
|
||||
slug: 'cesko-svedsky',
|
||||
lang: 'Česko-Švédsky',
|
||||
t: {},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
props: ['src', 'icon'],
|
||||
methods: {
|
||||
playSound: function(src) {
|
||||
console.log('/assets/media/' + src);
|
||||
var audioElement = document.createElement('audio');
|
||||
audioElement.setAttribute('src', '/assets/media/' + src);
|
||||
audioElement.play();
|
||||
}
|
||||
playSound: function (src) {
|
||||
console.log('/assets/media/' + src)
|
||||
var audioElement = document.createElement('audio')
|
||||
audioElement.setAttribute('src', '/assets/media/' + src)
|
||||
audioElement.play()
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span @click="playSound(src)" ><i class="fa ml-1 fa-play-circle"></i></span>
|
||||
</template>
|
||||
<span @click="playSound(src)" ><fa icon="play-circle" /></span>
|
||||
</template>
|
||||
|
||||
@@ -1,21 +1,30 @@
|
||||
<template>
|
||||
<li v-for="(tabData, i) in data"
|
||||
:key="tabData"
|
||||
@click="changeIndex(i)"
|
||||
>
|
||||
<a v-if="currentIndex === i" href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"> {{ tabData }} </a>
|
||||
<a v-else href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"> {{ tabData }} </a>
|
||||
</li>
|
||||
<li v-for="(tabData, i) in data" :key="tabData" @click="changeIndex(i)">
|
||||
<a
|
||||
v-if="currentIndex === i"
|
||||
href="#"
|
||||
class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
|
||||
>
|
||||
{{ tabData }}
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
href="#"
|
||||
class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
{{ tabData }}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'vue-tabz',
|
||||
emits: ["clickedTab"],
|
||||
emits: ['clickedTab'],
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
};
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
@@ -24,19 +33,19 @@ export default {
|
||||
},
|
||||
mainColor: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: '',
|
||||
},
|
||||
maxWidth: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
cssVars() {
|
||||
return {
|
||||
"--main-color": `#${this.mainColor.replace('#', '')}`,
|
||||
"--max-width": `${parseInt(this.maxWidth, 10)}px`,
|
||||
};
|
||||
'--main-color': `#${this.mainColor.replace('#', '')}`,
|
||||
'--max-width': `${parseInt(this.maxWidth, 10)}px`,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
@@ -47,12 +56,12 @@ export default {
|
||||
* @return void
|
||||
*/
|
||||
changeIndex(index) {
|
||||
this.currentIndex = index;
|
||||
this.$emit("clickedTab", {
|
||||
this.currentIndex = index
|
||||
this.$emit('clickedTab', {
|
||||
index,
|
||||
tab: this.data[index],
|
||||
});
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
@@ -4,19 +4,14 @@ import './index.css'
|
||||
// import { Application, Controller } from '@hotwired/stimulus'
|
||||
// import "@hotwired/turbo"
|
||||
import 'flowbite';
|
||||
import '@fortawesome/fontawesome-free/js/all.js';
|
||||
// import '@fortawesome/fontawesome-free/js/all.js';
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faPlayCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
library.add(faPlayCircle);
|
||||
|
||||
|
||||
// const LibStimulus = new Application(document.documentElement)
|
||||
|
||||
// LibStimulus.start()
|
||||
|
||||
// LibStimulus.register('body', class extends Controller {
|
||||
// connect() {
|
||||
// console.log('Hello stimulus')
|
||||
// }
|
||||
// })
|
||||
|
||||
createApp(App).mount('#app')
|
||||
createApp(App)
|
||||
.component("fa", FontAwesomeIcon)
|
||||
.mount("#app");
|
||||
|
||||
|
||||
Reference in New Issue
Block a user