Merge branch 'dev' of https://git.willaspace.com/WillaEngine-Project/WillaEngine into dev
aliqasemi
4 years ago
commit
4ea4a9aeb0
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot :filter="filter"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let cancelId;
|
||||
|
||||
export default {
|
||||
name: "AutoCompleteWrapper",
|
||||
props: {
|
||||
callback: {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
filter(e) {
|
||||
clearTimeout(cancelId);
|
||||
if (
|
||||
e.target.value &&
|
||||
e.target.value.length > 1 &&
|
||||
e.code !== "Tab" &&
|
||||
e.code !== "Enter"
|
||||
) {
|
||||
cancelId = setTimeout(() => {
|
||||
this.$emit('filter', e.target.value);
|
||||
this.callback(e.target.value);
|
||||
}, 400);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,53 +1,70 @@
|
||||
<template>
|
||||
<prism-editor class="my-editor LTR height-300 " v-model="code" :highlight="highlighter" line-numbers></prism-editor>
|
||||
<prism-editor
|
||||
class="my-editor LTR height-300"
|
||||
v-model="code"
|
||||
:highlight="highlighter"
|
||||
line-numbers
|
||||
></prism-editor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Prism Editor
|
||||
import { PrismEditor } from 'vue-prism-editor';
|
||||
import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
|
||||
// import Prism Editor
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from 'prismjs/components/prism-core';
|
||||
import 'prismjs/components/prism-clike';
|
||||
import 'prismjs/components/prism-javascript';
|
||||
import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/components/prism-css";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data: () => ({ code: 'console.log("Hello World")' }),
|
||||
methods: {
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); // languages.<insert language> to return html with markup
|
||||
},
|
||||
},
|
||||
};
|
||||
export default {
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
props: ["value", "language"],
|
||||
data: () => ({}),
|
||||
methods: {
|
||||
highlighter(code) {
|
||||
return highlight(code, languages[this.language]); // languages.<insert language> to return html with markup
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
code: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(e) {
|
||||
this.$emit("input", e);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.height-300 {
|
||||
height: 300px;
|
||||
}
|
||||
/* required class */
|
||||
.my-editor {
|
||||
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
|
||||
background: #f5f2f0;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-left: 10px solid #dcdcdc;
|
||||
color: #5a6268;
|
||||
border-radius: 5px;
|
||||
.height-300 {
|
||||
height: 300px;
|
||||
}
|
||||
/* required class */
|
||||
.my-editor {
|
||||
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
|
||||
background: #f5f2f0;
|
||||
border: 1px solid #dcdcdc;
|
||||
border-left: 10px solid #dcdcdc;
|
||||
color: #5a6268;
|
||||
border-radius: 5px;
|
||||
|
||||
/* you must provide font-family font-size line-height. Example: */
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
/* you must provide font-family font-size line-height. Example: */
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional class for removing the outline */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
/* optional class for removing the outline */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<v-tooltip
|
||||
:top="top"
|
||||
:bottom="bottom"
|
||||
:left="left"
|
||||
:right="right"
|
||||
:color="tooltipColor"
|
||||
:transition="transition"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
slot="activator"
|
||||
fab
|
||||
:color="buttonColor"
|
||||
:dark="dark"
|
||||
:light="light"
|
||||
v-on="on"
|
||||
@click="$emit('click')"
|
||||
:small="small"
|
||||
:large="large"
|
||||
:x-large="xLarge"
|
||||
:x-small="xSmall"
|
||||
>
|
||||
<v-icon dark>{{ icon }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>{{ text }}</span>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tooltipButton",
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: "WMi-user",
|
||||
},
|
||||
buttonColor: {
|
||||
type: String,
|
||||
default: "black",
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: "متن پیش فرض",
|
||||
},
|
||||
tooltipColor: {
|
||||
type: String,
|
||||
default: "black",
|
||||
},
|
||||
top: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
return !this.bottom && !this.left && !this.right ? true : false;
|
||||
},
|
||||
},
|
||||
bottom: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
left: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
right: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
transition: {
|
||||
type: String,
|
||||
default: "fade-transition",
|
||||
},
|
||||
dark: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
return !this.light ? true : false;
|
||||
},
|
||||
},
|
||||
light: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
return !this.large && !this.xSmall && !this.xLarge ? true : false;
|
||||
},
|
||||
},
|
||||
large: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
xSmall: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
xLarge: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,9 +1,9 @@
|
||||
import moment from "jalali-moment";
|
||||
|
||||
const convertToJalali = function (date = null, format = "jYYYY/jMM/jDD", defaultDate = 'مشخص نشده است.' ) {
|
||||
return date ? moment(date).format(format) : defaultDate ;
|
||||
return date ? moment(date).locale('fa').format(format) : defaultDate ;
|
||||
};
|
||||
const convertNowToJalali = function (date = null, format = "jYYYY/jMM/jDD" ) {
|
||||
return date ? moment(date).format(format) : moment(new Date()).format(format) ;
|
||||
return date ? moment(date).locale('fa').format(format) : moment(new Date()).locale('fa').format(format) ;
|
||||
};
|
||||
export { convertToJalali, convertNowToJalali };
|
||||
|
||||
Loading…
Reference in new issue