Skip to content

Commit c0ee4b1

Browse files
author
tsv2013
committed
Implemented basic example
1 parent 6185dc8 commit c0ee4b1

27 files changed

+400
-121
lines changed

‎.eslintrc.cjs

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* eslint-env node */
2+
require('@rushstack/eslint-patch/modern-module-resolution')
3+
4+
module.exports = {
5+
root: true,
6+
'extends': [
7+
'plugin:vue/vue3-essential',
8+
'eslint:recommended',
9+
'@vue/eslint-config-typescript'
10+
],
11+
parserOptions: {
12+
ecmaVersion: 'latest'
13+
},
14+
rules: {
15+
'vue/multi-word-component-names': 'off',
16+
}
17+
}

‎.gitignore

+19-121
Original file line numberDiff line numberDiff line change
@@ -4,127 +4,25 @@ logs
44
npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
7+
pnpm-debug.log*
78
lerna-debug.log*
8-
.pnpm-debug.log*
99

10-
# Diagnostic reports (https://nodejs.org/api/report.html)
11-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12-
13-
# Runtime data
14-
pids
15-
*.pid
16-
*.seed
17-
*.pid.lock
18-
19-
# Directory for instrumented libs generated by jscoverage/JSCover
20-
lib-cov
21-
22-
# Coverage directory used by tools like istanbul
23-
coverage
24-
*.lcov
25-
26-
# nyc test coverage
27-
.nyc_output
28-
29-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30-
.grunt
31-
32-
# Bower dependency directory (https://bower.io/)
33-
bower_components
34-
35-
# node-waf configuration
36-
.lock-wscript
37-
38-
# Compiled binary addons (https://nodejs.org/api/addons.html)
39-
build/Release
40-
41-
# Dependency directories
42-
node_modules/
43-
jspm_packages/
44-
45-
# Snowpack dependency directory (https://snowpack.dev/)
46-
web_modules/
47-
48-
# TypeScript cache
49-
*.tsbuildinfo
50-
51-
# Optional npm cache directory
52-
.npm
53-
54-
# Optional eslint cache
55-
.eslintcache
56-
57-
# Optional stylelint cache
58-
.stylelintcache
59-
60-
# Microbundle cache
61-
.rpt2_cache/
62-
.rts2_cache_cjs/
63-
.rts2_cache_es/
64-
.rts2_cache_umd/
65-
66-
# Optional REPL history
67-
.node_repl_history
68-
69-
# Output of 'npm pack'
70-
*.tgz
71-
72-
# Yarn Integrity file
73-
.yarn-integrity
74-
75-
# dotenv environment variable files
76-
.env
77-
.env.development.local
78-
.env.test.local
79-
.env.production.local
80-
.env.local
81-
82-
# parcel-bundler cache (https://parceljs.org/)
83-
.cache
84-
.parcel-cache
85-
86-
# Next.js build output
87-
.next
88-
out
89-
90-
# Nuxt.js build / generate output
91-
.nuxt
10+
node_modules
11+
.DS_Store
9212
dist
93-
94-
# Gatsby files
95-
.cache/
96-
# Comment in the public line in if your project uses Gatsby and not Next.js
97-
# https://nextjs.org/blog/next-9-1#public-directory-support
98-
# public
99-
100-
# vuepress build output
101-
.vuepress/dist
102-
103-
# vuepress v2.x temp and cache directory
104-
.temp
105-
.cache
106-
107-
# Docusaurus cache and generated files
108-
.docusaurus
109-
110-
# Serverless directories
111-
.serverless/
112-
113-
# FuseBox cache
114-
.fusebox/
115-
116-
# DynamoDB Local files
117-
.dynamodb/
118-
119-
# TernJS port file
120-
.tern-port
121-
122-
# Stores VSCode versions used for testing VSCode extensions
123-
.vscode-test
124-
125-
# yarn v2
126-
.yarn/cache
127-
.yarn/unplugged
128-
.yarn/build-state.yml
129-
.yarn/install-state.gz
130-
.pnp.*
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?

‎.vscode/extensions.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"recommendations": [
3+
"Vue.volar",
4+
"Vue.vscode-typescript-vue-plugin",
5+
"dbaeumer.vscode-eslint"
6+
]
7+
}

‎README.md

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# example
2+
3+
This template should help get you started developing with Vue 3 in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
8+
9+
## Type Support for `.vue` Imports in TS
10+
11+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12+
13+
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14+
15+
1. Disable the built-in TypeScript Extension
16+
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17+
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18+
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
19+
20+
## Customize configuration
21+
22+
See [Vite Configuration Reference](https://vitejs.dev/config/).
23+
24+
## Project Setup
25+
26+
```sh
27+
npm install
28+
```
29+
30+
### Compile and Hot-Reload for Development
31+
32+
```sh
33+
npm run dev
34+
```
35+
36+
### Type-Check, Compile and Minify for Production
37+
38+
```sh
39+
npm run build
40+
```
41+
42+
### Lint with [ESLint](https://eslint.org/)
43+
44+
```sh
45+
npm run lint
46+
```

‎azure-pipelines.yml

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Node.js
2+
# Build a general Node.js project with npm.
3+
# Add steps that analyze code, save build artifacts, deploy, and more:
4+
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
5+
6+
trigger:
7+
- master
8+
9+
pool:
10+
vmImage: ubuntu-latest
11+
12+
steps:
13+
- task: NodeTool@0
14+
inputs:
15+
versionSpec: "14.x"
16+
displayName: 'Install Node.js'
17+
18+
- script: |
19+
export NODE_OPTIONS="--max-old-space-size=8192"
20+
npm install
21+
npm run build
22+
displayName: 'npm install and build'
23+
24+
- script: |
25+
npm run test
26+
displayName: 'run unit tests'

‎env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="/favicon.ico">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎package.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "SurveyJS Vue3 Quickstart Boilerplate",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite --force",
7+
"build": "run-p type-check build-only",
8+
"preview": "vite preview --host 0.0.0.0 --port 8080",
9+
"build-only": "vite build",
10+
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
11+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
12+
},
13+
"dependencies": {
14+
"bootstrap": "^3.3.7",
15+
"survey-core": "latest",
16+
"survey-creator-core": "latest",
17+
"survey-creator-vue": "latest",
18+
"survey-vue3-ui": "latest",
19+
"surveyjs-widgets": "latest",
20+
"vue": "^3.3.4",
21+
"vue-router": "^4.2.5"
22+
},
23+
"devDependencies": {
24+
"@rushstack/eslint-patch": "^1.3.3",
25+
"@tsconfig/node18": "^18.2.2",
26+
"@types/node": "^18.18.5",
27+
"@vitejs/plugin-vue": "^4.4.0",
28+
"@vue/eslint-config-typescript": "^12.0.0",
29+
"@vue/tsconfig": "^0.4.0",
30+
"eslint": "^8.49.0",
31+
"eslint-plugin-vue": "^9.17.0",
32+
"npm-run-all2": "^6.1.1",
33+
"typescript": "~5.0.4",
34+
"vite": "^4.4.11",
35+
"vue-tsc": "^1.8.19"
36+
}
37+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎src/App.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang="ts">
2+
import Example from "./components/Example.vue";
3+
import RouterPage from "./components/test/RoutePage.vue";
4+
const isTest = !!(window as any)["%hammerhead%"];
5+
</script>
6+
<template>
7+
<Example v-if="!isTest"></Example>
8+
<RouterPage v-if="isTest"></RouterPage>
9+
</template>

‎src/components/Example.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts" setup>
2+
import { SurveyCreatorModel } from 'survey-creator-core';
3+
const creator = new SurveyCreatorModel({});
4+
</script>
5+
<template>
6+
<div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh">
7+
<SurveyCreatorComponent :model="creator"></SurveyCreatorComponent>
8+
</div>
9+
</template>

‎src/components/test/ByPage.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<Common :options="{ showLogicTab: true, showTranslationTab: true, pageEditMode: 'bypage' }" :use-slk="true"></Common>
3+
</template>
4+
<script lang="ts" setup>
5+
import Common from './Common.vue';
6+
</script>

‎src/components/test/Common.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div style="position: fixed; top: 0; bottom: 0; right: 0; left: 0;" id="survey-creator">
3+
<SurveyCreatorComponent :model="creator"></SurveyCreatorComponent>
4+
</div>
5+
</template>
6+
<script lang="ts" setup>
7+
import { slk } from "survey-core";
8+
import { CreatorBase, type ICreatorOptions } from "survey-creator-core";
9+
import "survey-core/survey.i18n";
10+
import "survey-creator-core/survey-creator-core.i18n";
11+
const props = defineProps<{options: ICreatorOptions, useSlk: boolean}>()
12+
if (props.useSlk) {
13+
slk("YjA3ZGFkZTMtNjU5NS00YTYxLTkzZmEtYWJiOThjMWVhNjk3OzE9MjAzNC0xMC0xNiwyPTIwMzQtMTAtMTYsND0yMDM0LTEwLTE2");
14+
}
15+
const creator = new CreatorBase(props.options);
16+
(window as any).creator = creator;
17+
</script>

‎src/components/test/CustomWidget.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<Common :options="{ showLogicTab: true, showTranslationTab: true }" :use-slk="true"></Common>
3+
</template>
4+
<script lang="ts" setup>
5+
import Common from "./Common.vue";
6+
import { StylesManager } from "survey-core";
7+
import * as widgets from "surveyjs-widgets";
8+
import * as SurveyCore from "survey-core";
9+
import ("icheck");
10+
StylesManager.applyTheme("default");
11+
widgets.sortablejs(SurveyCore);
12+
</script>

‎src/components/test/Default.vue

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
<template>
3+
<Common :options="{ showLogicTab: true, showTranslationTab: true }" :use-slk="true"></Common>
4+
</template>
5+
<script lang="ts" setup>
6+
import Common from './Common.vue';
7+
</script>

‎src/components/test/DropdownCollapse.vue

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
<template>
3+
<Common :options="{ maxVisibleChoices: 5 }" :use-slk="false"></Common>
4+
</template>
5+
<script lang="ts" setup>
6+
import Common from './Common.vue';
7+
</script>

‎src/components/test/Localization.vue

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<Common :options="{ showLogicTab: true, showTranslationTab: true }" :use-slk = true></Common>
3+
</template>
4+
<script lang="ts" setup>
5+
import { localization } from 'survey-creator-core';
6+
import Common from './Common.vue';
7+
const loc = localization.getLocale("de");
8+
loc.ed.logic = "Miner Logik";
9+
localization.currentLocale = "de";
10+
</script>

0 commit comments

Comments
 (0)