Skip to content

Commit d9919fd

Browse files
atomjoyatomjoy
authored
Vue components
1 parent cf18077 commit d9919fd

File tree

17 files changed

+1229
-0
lines changed

17 files changed

+1229
-0
lines changed

‎vue/resources/js/components/utils/ChangeColor/ChangeColor.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup>
2+
let props = defineProps({
3+
color: { type: String, default: '#0099ff' },
4+
text: { type: String, default: 'Colored Text' },
5+
size: { type: String, default: '25px' },
6+
})
7+
</script>
8+
9+
<template>
10+
<span class="colored-text">{{ text }}</span>
11+
</template>
12+
13+
<style scoped>
14+
.wrapp{
15+
--color: v-bind(props.color);
16+
}
17+
18+
.colored-text {
19+
margin-right: 20px;
20+
color: v-bind('props.color');
21+
font-size: v-bind('props.size');
22+
}
23+
</style>

‎vue/resources/js/components/utils/ChangeDescription/ChangeDescription.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template></template>
2+
<script setup>
3+
import { watch, onMounted } from 'vue'
4+
import { useI18n } from 'vue-i18n'
5+
6+
const { t, locale } = useI18n({ useScope: 'global' })
7+
8+
const props = defineProps({
9+
description: {
10+
type: String,
11+
default: 'error404.description', // Translation key from lang_en.json
12+
},
13+
})
14+
15+
const description = props.description
16+
const el = document.querySelector('head meta[name="description"]')
17+
18+
onMounted(() => {
19+
el.setAttribute('content', t(description))
20+
})
21+
22+
watch(
23+
() => locale.value,
24+
(lang) => {
25+
el.setAttribute('content', t(description))
26+
}
27+
)
28+
</script>
29+
30+
<!--
31+
// Required in main.js createI18n(options)
32+
allowComposition: true,
33+
globalInjection: true,
34+
legacy: false,
35+
-->

‎vue/resources/js/components/utils/ChangeLocale/ChangeLocale.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div class="change-locale">
3+
<select v-model="locale" class="locale-select">
4+
<option v-for="lang in availableLocales" :key="`locale-${lang}`" :value="lang">
5+
{{ t(lang) }}
6+
</option>
7+
</select>
8+
</div>
9+
</template>
10+
11+
<script setup>
12+
import axios from 'axios'
13+
import { useI18n } from 'vue-i18n'
14+
import { watch, onMounted } from 'vue'
15+
16+
const { t, locale, availableLocales } = useI18n({ useScope: 'global' })
17+
18+
const props = defineProps({
19+
locale_url: { default: '/web/api/locale/' },
20+
})
21+
22+
onMounted(() => {
23+
console.log('Change locale', locale.value, availableLocales)
24+
})
25+
26+
watch(
27+
() => locale.value,
28+
(lang) => {
29+
changeLocale(lang)
30+
}
31+
)
32+
33+
async function changeLocale(locale) {
34+
if (props.locale_url) {
35+
try {
36+
await axios.get(props.locale_url + locale)
37+
} catch (err) {
38+
console.log('Change locale error', err)
39+
}
40+
}
41+
}
42+
</script>
43+
44+
<style scoped>
45+
.change-locale {
46+
float: right;
47+
width: auto;
48+
height: 44px;
49+
margin: 5px;
50+
background: var(--bg-primary);
51+
border-radius: var(--border-radius);
52+
border: 0px solid var(--divider-primary);
53+
}
54+
.change-locale .locale-select {
55+
box-sizing: border-box;
56+
min-width: 60px;
57+
height: 42px;
58+
float: left;
59+
border: 0px;
60+
cursor: pointer;
61+
text-align: center;
62+
padding-left: 5px;
63+
font-size: 14px;
64+
background: var(--bg-primary);
65+
border-radius: var(--border-radius);
66+
}
67+
.change-locale .locale-select option,
68+
.change-locale .locale-select > * {
69+
background: var(--bg-primary);
70+
color: var(--text-primary);
71+
}
72+
.change-locale .locale-select:focus {
73+
border: none;
74+
box-shadow: none;
75+
}
76+
</style>
77+
78+
<!--
79+
import { createI18n } from 'vue-i18n'
80+
81+
const lang = {
82+
// Allow compositions api (required)
83+
allowComposition: true,
84+
globalInjection: true,
85+
legacy: false,
86+
87+
// Locales
88+
locale: 'en',
89+
fallbackLocale: 'en',
90+
availableLocales: ['en', 'pl'],
91+
messages: {
92+
en: { en: "English", pl: "Polish" },
93+
pl: { en: "Angielski", pl: "Polski" },
94+
},
95+
}
96+
97+
const i18n = createI18n(lang)
98+
app.use(i18n)
99+
-->

‎vue/resources/js/components/utils/ChangeTheme/ChangeTheme.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script setup>
2+
import { useThemeStore } from './stores/change-theme.js'
3+
import { onMounted } from 'vue'
4+
5+
let theme = useThemeStore()
6+
7+
onMounted(() => {
8+
theme.update()
9+
})
10+
</script>
11+
12+
<template>
13+
<div @click="theme.toggle()" :class="{ 'change-theme': true }" :title="$t('Theme light')">
14+
<div class="theme-icon theme-dark" v-if="theme.getColor == 'dark'">
15+
<svg viewBox="0 0 24 24" class="theme-switch-sun">
16+
<path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path>
17+
<path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path>
18+
<path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path>
19+
<path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path>
20+
<path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path>
21+
<path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path>
22+
<path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
23+
<path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path>
24+
<path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path>
25+
</svg>
26+
</div>
27+
<div class="theme-icon theme-light" v-if="theme.getColor != 'dark'" :title="$t('Theme dark')">
28+
<svg viewBox="0 0 24 24" class="theme-switch-moon">
29+
<path
30+
d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"
31+
stroke-width="2"
32+
stroke-linecap="round"
33+
stroke-linejoin="round" />
34+
</svg>
35+
</div>
36+
</div>
37+
</template>
38+
39+
<style scoped>
40+
.change-theme {
41+
box-sizing: border-box;
42+
float: right;
43+
margin: 5px;
44+
width: 44px;
45+
height: 44px;
46+
cursor: pointer;
47+
background: var(--bg-primary);
48+
border-radius: var(--border-radius);
49+
}
50+
.change-theme .theme-icon {
51+
box-sizing: border-box;
52+
position: relative;
53+
float: left;
54+
width: 42px;
55+
height: 42px;
56+
background: var(--bg-primary);
57+
border-radius: var(--border-radius);
58+
transition: all 1s;
59+
border: 1px solid transparent;
60+
}
61+
.change-theme .theme-icon svg {
62+
position: absolute;
63+
top: 10px;
64+
left: 10px;
65+
width: 20px;
66+
height: 20px;
67+
fill: var(--text-primary);
68+
}
69+
</style>

‎vue/resources/js/components/utils/ChangeTheme/stores/change-theme.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { ref, computed } from 'vue'
2+
import { defineStore } from 'pinia'
3+
4+
export const useThemeStore = defineStore('theme', () => {
5+
const color = ref('light')
6+
7+
const getColor = computed(() => color.value)
8+
9+
function toggle() {
10+
color.value = color.value == 'light' ? 'dark' : 'light'
11+
update()
12+
}
13+
14+
function update() {
15+
document.querySelector('body').setAttribute('color-scheme', color.value)
16+
}
17+
18+
return { color, getColor, toggle, update }
19+
})

‎vue/resources/js/components/utils/ChangeTitle/ChangeTitle.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template></template>
2+
<script setup>
3+
import { useI18n } from 'vue-i18n'
4+
import { watch, onMounted } from 'vue'
5+
6+
const { t, locale } = useI18n({ useScope: 'global' })
7+
8+
const props = defineProps({
9+
title: {
10+
type: String,
11+
default: 'error404.title',
12+
},
13+
})
14+
15+
onMounted(() => {
16+
document.title = t(props.title)
17+
})
18+
19+
watch(
20+
() => locale.value,
21+
(lang) => {
22+
document.title = t(props.title)
23+
}
24+
)
25+
</script>
26+
27+
<!--
28+
// Require in main.js createI18n(options)
29+
allowComposition: true,
30+
globalInjection: true,
31+
legacy: false,
32+
-->

‎vue/resources/js/components/utils/CodeHighlight/CodeHighlight.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!-- CodeHighlight.vue -->
2+
<script setup>
3+
import { ref } from 'vue'
4+
5+
import 'highlight.js/styles/default.css'
6+
// Light set normal
7+
// import 'highlight.js/styles/github.min.css'
8+
// import 'highlight.js/styles/grayscale.min.css'
9+
// import 'highlight.js/styles/isbl-editor-light.min.css'
10+
// import 'highlight.js/styles/ascetic.min.css'
11+
// import 'highlight.js/styles/mono-blue.min.css'
12+
13+
// Custom light
14+
import './css/light/mozilla-light.css'
15+
16+
// Dark set from current dir css
17+
import './css/dark/mozilla-dark.css'
18+
// import './css/dark/hybrid-dark.css'
19+
// import './css/dark/an-old-hope-dark.css'
20+
// import './css/dark/atom-one-dark.css'
21+
// import './css/dark/atom-one-resonable-dark.css'
22+
// import './css/dark/srcery-dark.css'
23+
// import './css/dark/kimbie-dark.css'
24+
25+
import hljs from 'highlight.js/lib/common'
26+
import hljsVuePlugin from '@highlightjs/vue-plugin'
27+
28+
const props = defineProps({
29+
code: { default: '<?php echo "Insert code here...";' },
30+
language: { type: String, default: 'php' },
31+
theme: { type: String, default: '' },
32+
filename: { type: String, default: '' },
33+
})
34+
35+
const highlightjs = hljsVuePlugin.component
36+
37+
const theme = ref(props.theme)
38+
39+
function toggleTheme() {
40+
theme.value == '' ? (theme.value = 'dark-theme') : (theme.value = '')
41+
}
42+
43+
function debugCode(code, language = 'php') {
44+
hljs.getLanguage(language)
45+
const result = hljs.highlight(props.code, { language: language })
46+
console.log(result)
47+
}
48+
</script>
49+
50+
<template>
51+
<div class="hljs-code-topbar">
52+
<span class="hljs-code-filename"><i class="fa-regular fa-file-code"></i> {{ props.filename }}</span>
53+
<button v-if="theme == ''" class="hljs-code-toggle-theme" @click="toggleTheme"><i class="fa-solid fa-toggle-off"></i></button>
54+
<button v-else class="hljs-code-toggle-theme" @click="toggleTheme"><i class="fa-solid fa-toggle-on"></i></button>
55+
</div>
56+
<highlightjs :class="theme" :code="props.code" :language="props.language" />
57+
</template>
58+
59+
<style>
60+
@import url('./css/code.css');
61+
</style>

‎vue/resources/js/components/utils/CodeHighlight/CodeHighlightMini.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!-- CodeHighlight.vue -->
2+
<script setup>
3+
import 'highlight.js/styles/default.css'
4+
import 'highlight.js/styles/github.min.css'
5+
import hljs from 'highlight.js/lib/common'
6+
import hljsVuePlugin from '@highlightjs/vue-plugin'
7+
8+
const props = defineProps({
9+
code: { default: '<?php echo "Insert code here...";' },
10+
language: { type: String, default: 'php' },
11+
})
12+
13+
const highlightjs = hljsVuePlugin.component
14+
15+
function debugCode(code, language = 'php') {
16+
hljs.getLanguage(language)
17+
const result = hljs.highlight(props.code, { language: language })
18+
console.log(result)
19+
}
20+
</script>
21+
22+
<template>
23+
<highlightjs :code="props.code" :language="props.language" />
24+
</template>
25+
26+
<style>
27+
@import url('./css/code.css');
28+
</style>

0 commit comments

Comments
 (0)