Skip to content

Commit 6f6f5a7

Browse files
synwsynw
committed
Various improvements
1 parent 11ae30c commit 6f6f5a7

File tree

10 files changed

+182
-97
lines changed

10 files changed

+182
-97
lines changed

‎package.json‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,62 @@
11
{
22
"name": "vuepython",
3-
"version": "0.0.12",
3+
"version": "0.0.13",
44
"description": "Edit and run Python code in Vuejs",
55
"repository": "https://github.com/synw/vuepython",
66
"scripts": {
77
"compile": "vite build",
88
"emit": "vue-tsc --declaration --emitDeclarationOnly",
9-
"css": "npx tailwindcss -o ./src/assets/twstyle.css --minify",
10-
"cpcss": "cp ./src/assets/twstyle.css ./dist",
9+
"css": "npx tailwindcss -i ./dist/style.css -o ./dist/twstyle.css --minify",
10+
"cpcss": "rm -f ./dist/style.css && mv ./dist/twstyle.css ./dist/style.css && rm -f ./dist/twstyle.css",
1111
"build": "run-s compile emit css cpcss"
1212
},
1313
"dependencies": {
1414
"@nanostores/vue": "^0.6.0",
1515
"@vueuse/core": "^9.1.1",
1616
"highlight.js": "^11.6.0",
17-
"usepython": "^0.0.8",
18-
"vuecodit": "^0.0.5"
17+
"usepython": "^0.0.9",
18+
"vuecodit": "^0.0.10"
1919
},
2020
"peerDependencies": {
2121
"vue": "^3.2.31"
2222
},
2323
"devDependencies": {
2424
"@types/highlight.js": "^10.1.0",
25-
"@types/node": "^16.10.2",
26-
"@vitejs/plugin-vue": "^2.3.1",
27-
"@vue/compiler-sfc": "^3.2.37",
28-
"autoprefixer": "^10.4.8",
2925
"npm-run-all": "^4.1.5",
30-
"postcss": "^8.4.16",
31-
"rollup-plugin-typescript2": "^0.31.2",
26+
"vue": "^3.2.31",
27+
"vue-tsc": "^0.40.5",
28+
"@types/node": "^18.13.0",
29+
"@vitejs/plugin-vue": "^4.0.0",
30+
"@vue/compiler-sfc": "^3.2.31",
31+
"autoprefixer": "^10.4.4",
32+
"path": "^0.12.7",
33+
"postcss": "^8.4.12",
3234
"sass": "^1.50.0",
33-
"tailwindcss": "^3.1.8",
35+
"tailwindcss": "^3.0.23",
36+
"tailwindcss-semantic-colors": "^0.2.0",
37+
"@snowind/plugin": "0.4.0",
38+
"@tailwindcss/forms": "^0.5.0",
39+
"@tailwindcss/typography": "^0.5.9",
40+
"tslib": "^2.3.1",
3441
"typescript": "^4.6.3",
35-
"vite": "^2.9.1",
36-
"vue": "^3.2.31",
37-
"vue-tsc": "^0.40.5"
42+
"vite": "^4.0.4"
3843
},
3944
"files": [
4045
"dist"
4146
],
4247
"style": "./dist/style.css",
4348
"main": "./dist/vuepython.umd.js",
44-
"module": "./dist/vuepython.es.js",
49+
"module": "./dist/vuepython.mjs",
4550
"types": "./dist/main.d.ts",
4651
"exports": {
4752
".": {
48-
"import": "./dist/vuepython.es.js"
53+
"import": "./dist/vuepython.mjs"
4954
},
50-
"./style.css": "./dist/style.css",
51-
"./twstyle.css": "./dist/twstyle.css"
55+
"./style.css": "./dist/style.css"
5256
},
5357
"publishConfig": {
5458
"access": "public",
5559
"registry": "https://registry.npmjs.org/"
5660
},
5761
"license": "MIT"
58-
}
62+
}

‎src/MainCss.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
</template>
3+
4+
<style lang="sass">
5+
.code-editor
6+
@apply overflow-x-auto overflow-y-hidden
7+
.pycode-block:not(.raw)
8+
.code-editor
9+
@apply p-2 bg-gray-100 dark:bg-black dark:text-neutral-200 rounded-md max-w-[100ch] xl:min-w-[100ch] border border-gray-200 dark:border-neutral-800
10+
.code-exec-btn
11+
@apply mt-2
12+
.code-output
13+
@apply pl-8 pt-2
14+
&.filled
15+
@apply px-2
16+
.btn.neuro
17+
@apply rounded-lg block-background shadow-[-2px_-2px_10px_rgba(255,255,255,1),3px_3px_10px_rgba(0,0,0,0.2)] active:shadow-[inset_-2px_-2px_5px_rgba(255,255,255,0.7),inset_3px_3px_5px_rgba(0,0,0,0.1)]
18+
@apply dark:shadow-[-2px_-2px_10px_rgba(155,155,155,0.3),3px_3px_10px_rgba(10,10,10,1)]
19+
.notebook:not(:first-child)
20+
@apply space-y-2
21+
.notebook
22+
& .cell-num
23+
@apply text-slate-400
24+
</style>

‎src/PyCodeBlock.vue‎

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<div>
3-
<div class="code-editor">
3+
<div class="overflow-y-hidden code-editor">
44
<code-editor :code="parsedCode" @keyup.ctrl.enter="runTheCode()" lang="python" @edit="updateCode($event)"
55
:hljs="hljs"></code-editor>
66
</div>
77
<div v-if="controls == true">
8-
<button class="border code-exec-btn btn neuro" :class="(canRun && !isExecuting) ? 'cursor-pointer' : 'cursor-wait'"
9-
@click="runTheCode()">
8+
<button class="border code-exec-btn btn neuro focus:ring-0"
9+
:class="(canRun && !isExecuting) ? 'cursor-pointer' : 'cursor-wait'" @click="runTheCode()">
1010
<template v-if="!canRun">
1111
<app-icon name="play" class="inline-block text-xl txt-lighter"></app-icon>
1212
</template>
@@ -15,20 +15,28 @@
1515
<app-icon name="play" class="inline-block text-xl txt-success"></app-icon>
1616
</template>
1717
<template v-else>
18-
<app-icon name="python" class="inline-block text-xl txt-danger"></app-icon>
18+
<template v-if="log.id == id">
19+
<app-icon name="python" class="inline-block text-xl txt-danger"></app-icon>
20+
</template>
21+
<template v-else>
22+
<app-icon name="play" class="inline-block text-xl txt-lighter"></app-icon>
23+
</template>
1924
</template>
2025
</template>
2126
&nbsp;Execute
2227
</button>
28+
<!-- button class="ml-2 cursor-pointer neuro btn" v-if="namespace && controlsClear" @click="clear()">Clear</button -->
2329
</div>
24-
<div class="flex flex-col code-output">
25-
<div v-if="stdout == true && outputHtml">
30+
<div class="flex flex-col code-output" :class="bottomMargin">
31+
<div v-if="stdout == true && log.stdOut.length > 0">
2632
<pre v-for="row in log.stdOut" v-html="row"></pre>
2733
</div>
28-
<div v-if="stderr == true">
34+
<div v-if="stderr == true && log.stdErr.length > 0">
2935
<pre v-for="row in log.stdErr" v-html="row"></pre>
3036
</div>
31-
<div v-if="exception == true && log.exception" v-html="log.exception"></div>
37+
<div v-if="exception == true && log.exception">
38+
<pre v-html="log.exception"></pre>
39+
</div>
3240
<div v-if="output == true && outputHtml" v-html="outputHtml"></div>
3341
</div>
3442
</div>
@@ -59,10 +67,18 @@ const props = defineProps({
5967
type: String,
6068
required: true,
6169
},
70+
namespace: {
71+
type: String,
72+
default: null,
73+
},
6274
controls: {
6375
type: Boolean,
6476
default: true,
6577
},
78+
/*controlsClear: {
79+
type: Boolean,
80+
default: false,
81+
},*/
6682
output: {
6783
type: Boolean,
6884
default: true,
@@ -106,7 +122,7 @@ async function runTheCode() {
106122
if (!canRun) {
107123
return
108124
}
109-
const { results, error } = await props.py.run(parsedCode.value, props.id);
125+
const { results, error } = await props.py.run(parsedCode.value, props.namespace, props.id);
110126
if (results) {
111127
//console.log("RES TYPE", typeof results, results);
112128
let res = "";
@@ -128,6 +144,11 @@ async function runTheCode() {
128144
}
129145
};
130146
147+
function clear() {
148+
props.py.clear(props.namespace);
149+
outputHtml.value = "";
150+
}
151+
131152
const canRun = computed<Boolean>(() => {
132153
//return isReady.value == true && isExecuting.value == false
133154
return isReady.value == true
@@ -142,19 +163,17 @@ const unbindLog = props.py.log.listen((val) => {
142163
}
143164
});
144165
166+
const bottomMargin = computed<string>(() => {
167+
let m = "";
168+
if (outputHtml || (outputHtml || log.stdOut.length > 0 || log.stdErr.length > 0)) {
169+
m = "filled"
170+
}
171+
return m
172+
})
173+
145174
onBeforeUnmount(() => unbindLog())
146175
watchEffect(() => {
147176
parsedCode.value = props.code
148177
outputHtml.value = "";
149178
})
150179
</script>
151-
152-
<style lang="sass" scoped>
153-
.code-exec-btn
154-
@apply mt-2
155-
.code-output
156-
@apply pl-8 space-y-2
157-
.btn.neuro
158-
@apply rounded-lg block-background shadow-[-2px_-2px_10px_rgba(255,255,255,1),3px_3px_10px_rgba(0,0,0,0.2)] active:shadow-[inset_-2px_-2px_5px_rgba(255,255,255,0.7),inset_3px_3px_5px_rgba(0,0,0,0.1)]
159-
@apply dark:shadow-[-2px_-2px_10px_rgba(155,155,155,0.3),3px_3px_10px_rgba(10,10,10,1)]
160-
</style>

‎src/PyNotebook.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div class="container mx-auto">
3+
<div class="w-full p-3">
4+
<div class="flex justify-end">
5+
<button class="btn" @click="addCell()">Add cell</button>
6+
</div>
7+
<div class="flex flex-col w-full notebook">
8+
<div :id="child.cellId" v-for="(child, i) in children" :key="child.id" class="flex flex-row w-full cell"
9+
:class="cellNums ? '' : ''">
10+
<div v-if="cellNums" class="mr-5 cell-num">
11+
[{{ i + 1 }}] :
12+
</div>
13+
<div class="flex-grow">
14+
<py-code-block :id="child.id" :py="py" :code="child.code" :controls="false" :namespace="namespace">
15+
</py-code-block>
16+
</div>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script setup lang="ts">
24+
import { onBeforeMount, reactive } from 'vue';
25+
import { usePython } from "usepython";
26+
import PyCodeBlock from "@/../../src/PyCodeBlock.vue";
27+
import "highlight.js/styles/stackoverflow-light.css"
28+
29+
const props = defineProps({
30+
namespace: {
31+
type: String,
32+
required: true
33+
},
34+
py: {
35+
type: Object as typeof usePython,
36+
required: true
37+
},
38+
cells: {
39+
type: Object as () => Array<string>
40+
},
41+
cellNums: {
42+
type: Boolean,
43+
default: true
44+
}
45+
});
46+
47+
const children = reactive<Array<Record<string, string>>>([])
48+
49+
function addCell(cellCode = "", cellId?: string) {
50+
const cid = cellId ?? (+ new Date());
51+
const id = `${props.namespace}-cell-` + cid;
52+
children.push({ id: id, code: cellCode })
53+
}
54+
55+
onBeforeMount(() => {
56+
if (props.cells) {
57+
props.cells.forEach((cell, i) => {
58+
addCell(cell, `${i}`)
59+
})
60+
}
61+
})
62+
</script>

‎src/assets/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/assets/st.css‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎src/assets/twstyle.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/main.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import PyCodeBlock from "./PyCodeBlock.vue";
22
import PyStatus from "./PyStatus.vue";
3+
import MainCss from "./MainCss.vue";
34

45
export {
56
PyCodeBlock,
67
PyStatus,
8+
MainCss
79
}

‎tailwind.config.js‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,31 @@
11
module.exports = {
22
content: [
3-
'./src/*.vue'
4-
]
3+
'./src/**/*.{js,jsx,ts,tsx,vue}',
4+
],
5+
darkMode: 'class',
6+
plugins: [
7+
require('@tailwindcss/forms'),
8+
require('@snowind/plugin'),
9+
require('tailwindcss-semantic-colors'),
10+
require('@tailwindcss/typography')
11+
],
12+
theme: {
13+
extend: {
14+
maxWidth: {
15+
'prose': '100ch',
16+
},
17+
typography: ({ theme }) => ({
18+
DEFAULT: {
19+
css: {
20+
'code::before': {
21+
content: 'normal',
22+
},
23+
'code::after': {
24+
content: 'normal',
25+
},
26+
},
27+
},
28+
}),
29+
}
30+
}
531
}

0 commit comments

Comments
 (0)