Skip to content

Commit c8c6313

Browse files
Michael.KryvoruchkoMichael.Kryvoruchko
Michael.Kryvoruchko
authored and
Michael.Kryvoruchko
committed
init
0 parents  commit c8c6313

39 files changed

+4411
-0
lines changed

‎.eslintrc.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
extends: [
3+
'@gitart/eslint-config-vue',
4+
],
5+
}

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎README.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Vue 3 + Typescript + Vite
2+
3+
This template should help get you started developing with Vue 3 and Typescript in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
8+
9+
### If Using `<script setup>`
10+
11+
[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
12+
13+
## Type Support For `.vue` Imports in TS
14+
15+
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:
16+
17+
### If Using Volar
18+
19+
Run `Volar: Switch TS Plugin on/off` from VSCode command palette.
20+
21+
### If Using Vetur
22+
23+
1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
24+
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
25+
3. Open `src/main.ts` in VSCode
26+
4. Open the VSCode command palette
27+
5. Search and run "Select TypeScript version" -> "Use workspace version"

‎assets/img/profile.jpg

10.2 KB
Loading

‎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>Demo | Vue Gitart Dialog</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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "gitart-vue-dialog-examples",
3+
"version": "0.0.2",
4+
"license": "MIT",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/gitart-group/vue-dialog.git"
8+
},
9+
"author": {
10+
"name": "Michael Gitart",
11+
"email": "[email protected]"
12+
},
13+
"scripts": {
14+
"dev": "vite",
15+
"build": "vue-tsc --noEmit && vite build",
16+
"lint": "eslint ."
17+
},
18+
"dependencies": {
19+
"@vueuse/core": "^7.6.1",
20+
"gitart-vue-dialog": "^1.2.0",
21+
"vue": "^3.2.30"
22+
},
23+
"devDependencies": {
24+
"@gitart/eslint-config-vue": "^0.0.11",
25+
"@vitejs/plugin-vue": "^2.2.0",
26+
"eslint": "^8.9.0",
27+
"sass": "^1.49.7",
28+
"typescript": "^4.5.5",
29+
"unplugin-auto-import": "^0.5.11",
30+
"vite": "^2.8.1",
31+
"vite-plugin-windicss": "^1.7.0",
32+
"vue-tsc": "^0.31.2",
33+
"windicss": "^3.4.3"
34+
}
35+
}

‎public/favicon.ico

15 KB
Binary file not shown.

‎public/favicon.png

25.4 KB
Loading

‎src/App.vue

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<div
3+
class="app"
4+
p="x-5 y-12"
5+
gradient="to-br from-purple-400 via-pink-500 to-red-500"
6+
>
7+
<div
8+
class="container"
9+
bg="white"
10+
p="t-8 b-4 x-6"
11+
m="x-auto"
12+
border="rounded"
13+
>
14+
<TheHeader m="b-4" />
15+
16+
<div p="y-3">
17+
<DialogLayout />
18+
</div>
19+
20+
<div p="y-3">
21+
<ProgrammaticalDialogLayout />
22+
</div>
23+
24+
<div p="y-3">
25+
<NestingDialogLayout />
26+
</div>
27+
28+
<div p="y-3">
29+
<ActivatorDialogLayout />
30+
</div>
31+
32+
<TheFooter m="t-4" />
33+
</div>
34+
</div>
35+
<GDialogRoot />
36+
</template>
37+
38+
<script lang="ts">
39+
import { GDialogRoot } from 'gitart-vue-dialog'
40+
41+
import TheHeader from '@/components/Interface/TheHeader.vue'
42+
import TheFooter from '@/components/Interface/TheFooter.vue'
43+
44+
import DialogLayout from '@/components/Layout/DialogLayout.vue'
45+
import ProgrammaticalDialogLayout from '@/components/Layout/ProgrammaticalDialogLayout.vue'
46+
import NestingDialogLayout from '@/components/Layout/NestingDialogLayout.vue'
47+
import ActivatorDialogLayout from '@/components/Layout/ActivatorDialogLayout.vue'
48+
49+
export default defineComponent({
50+
name: 'App',
51+
components: {
52+
GDialogRoot,
53+
TheHeader,
54+
TheFooter,
55+
DialogLayout,
56+
ProgrammaticalDialogLayout,
57+
NestingDialogLayout,
58+
ActivatorDialogLayout,
59+
},
60+
})
61+
</script>
62+
63+
<style lang="scss">
64+
:root {
65+
--g-dialog-content-bg: #f9fafb;
66+
--g-dialog-content-border-radius: 6px;
67+
--g-dialog-overlay-bg: rgba(33, 33, 33, 0.55);
68+
}
69+
70+
.app {
71+
min-height: 120vh;
72+
}
73+
</style>

‎src/auto-imports.d.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// Generated by 'unplugin-auto-import'
2+
// We suggest you to commit this file into source control
3+
declare global {
4+
const computed: typeof import('vue')['computed']
5+
const createApp: typeof import('vue')['createApp']
6+
const customRef: typeof import('vue')['customRef']
7+
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
8+
const defineComponent: typeof import('vue')['defineComponent']
9+
const effectScope: typeof import('vue')['effectScope']
10+
const EffectScope: typeof import('vue')['EffectScope']
11+
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
12+
const getCurrentScope: typeof import('vue')['getCurrentScope']
13+
const h: typeof import('vue')['h']
14+
const inject: typeof import('vue')['inject']
15+
const isReadonly: typeof import('vue')['isReadonly']
16+
const isRef: typeof import('vue')['isRef']
17+
const markRaw: typeof import('vue')['markRaw']
18+
const nextTick: typeof import('vue')['nextTick']
19+
const onActivated: typeof import('vue')['onActivated']
20+
const onBeforeMount: typeof import('vue')['onBeforeMount']
21+
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
22+
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
23+
const onDeactivated: typeof import('vue')['onDeactivated']
24+
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
25+
const onMounted: typeof import('vue')['onMounted']
26+
const onRenderTracked: typeof import('vue')['onRenderTracked']
27+
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
28+
const onScopeDispose: typeof import('vue')['onScopeDispose']
29+
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
30+
const onUnmounted: typeof import('vue')['onUnmounted']
31+
const onUpdated: typeof import('vue')['onUpdated']
32+
const provide: typeof import('vue')['provide']
33+
const reactive: typeof import('vue')['reactive']
34+
const readonly: typeof import('vue')['readonly']
35+
const ref: typeof import('vue')['ref']
36+
const resolveComponent: typeof import('vue')['resolveComponent']
37+
const shallowReactive: typeof import('vue')['shallowReactive']
38+
const shallowReadonly: typeof import('vue')['shallowReadonly']
39+
const shallowRef: typeof import('vue')['shallowRef']
40+
const toRaw: typeof import('vue')['toRaw']
41+
const toRef: typeof import('vue')['toRef']
42+
const toRefs: typeof import('vue')['toRefs']
43+
const triggerRef: typeof import('vue')['triggerRef']
44+
const unref: typeof import('vue')['unref']
45+
const useAttrs: typeof import('vue')['useAttrs']
46+
const useCssModule: typeof import('vue')['useCssModule']
47+
const useCssVars: typeof import('vue')['useCssVars']
48+
const useSlots: typeof import('vue')['useSlots']
49+
const watch: typeof import('vue')['watch']
50+
const watchEffect: typeof import('vue')['watchEffect']
51+
}
52+
export {}

‎src/components/Dialog/DialogStateWrapper.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div>
3+
<slot :model="model" :input="onInput" />
4+
5+
<Btn @click="onInput(true)">
6+
{{ label }}
7+
</Btn>
8+
</div>
9+
</template>
10+
11+
<script lang="ts">
12+
import Btn from '@/components/UI/Btn/Btn.vue'
13+
14+
export default defineComponent({
15+
name: 'DialogStateWrapper',
16+
components: {
17+
Btn,
18+
},
19+
20+
props: {
21+
label: {
22+
type: String,
23+
required: true,
24+
},
25+
},
26+
27+
setup() {
28+
const model = ref(false)
29+
30+
const onInput = (value: boolean): void => {
31+
model.value = value
32+
}
33+
34+
return {
35+
model,
36+
onInput,
37+
}
38+
},
39+
})
40+
</script>

‎src/components/Dialog/DialogToolbar.vue

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div
3+
class="flex"
4+
justify="between"
5+
items="center"
6+
p="y-3 x-5"
7+
:shadow="shadow ? 'lg' : ''"
8+
>
9+
<slot />
10+
11+
<div
12+
class="flex transition"
13+
cursor="pointer"
14+
h="8"
15+
w="8"
16+
justify="center"
17+
items="center"
18+
text="red-500"
19+
border="rounded-full"
20+
bg="gray-200 hover:gray-300"
21+
p="a-2"
22+
m="l-auto"
23+
24+
@click="onClose"
25+
>
26+
X
27+
</div>
28+
</div>
29+
</template>
30+
31+
<script lang="ts">
32+
export default defineComponent({
33+
name: 'DialogToolbar',
34+
35+
props: {
36+
shadow: {
37+
type: Boolean,
38+
default: true,
39+
},
40+
},
41+
42+
emits: ['close'],
43+
44+
setup(_, { emit }) {
45+
const onClose = () => {
46+
emit('close')
47+
}
48+
49+
return {
50+
onClose,
51+
}
52+
},
53+
})
54+
</script>

‎src/components/Dialogs/BaseDialog/BaseDialog.vue

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<GDialog
3+
v-model="value"
4+
:max-width="400"
5+
:depressed="depressed"
6+
>
7+
<h4 class="mb-3">
8+
Base component
9+
</h4>
10+
11+
<BooleanSwitch
12+
v-model="depressed"
13+
label="depressed (without box-shadow)"
14+
/>
15+
</GDialog>
16+
</template>
17+
18+
<script lang="ts">
19+
import { useVModel } from '@vueuse/core'
20+
import { GDialog } from 'gitart-vue-dialog'
21+
22+
import BooleanSwitch from '@/components/PropControls/BooleanSwitch/BooleanSwitch.vue'
23+
24+
export interface IBaseDialogProps {
25+
modelValue: boolean
26+
lorem: boolean
27+
}
28+
29+
export default defineComponent({
30+
name: 'BaseDialog',
31+
components: {
32+
GDialog,
33+
BooleanSwitch,
34+
},
35+
36+
props: {
37+
modelValue: {
38+
type: Boolean,
39+
default: false,
40+
},
41+
42+
lorem: {
43+
type: Boolean,
44+
required: true,
45+
},
46+
},
47+
48+
emits: {
49+
'update:modelValue': (val: boolean) => true,
50+
},
51+
52+
setup(props: IBaseDialogProps, { emit }) {
53+
const depressed = ref(false)
54+
const value = useVModel(props, 'modelValue', emit)
55+
56+
return {
57+
depressed,
58+
value,
59+
}
60+
},
61+
})
62+
</script>

0 commit comments

Comments
 (0)