Skip to content

Commit ab4dc2a

Browse files
sadeghbaratisadeghbarati
committed
refactor!: update module
1 parent db65ee6 commit ab4dc2a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2244
-1550
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ dist-ssr
1717
.vscode/*
1818
!.vscode/extensions.json
1919
.idea
20+
temp
2021
.DS_Store
2122
*.suo
2223
*.ntvs*

‎README.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,11 @@ pnpm add vue-command-palette
7777
Then you can import the `Command` [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) in your project.
7878

7979
```vue
80+
<script lang="ts" setup>
81+
import { ref } from 'vue'
82+
import { Command } from 'vue-command-palette'
83+
</script>
84+
8085
<template>
8186
<Command theme="custom">
8287
<Command.Input placeholder="Type a command or search..." />
@@ -95,11 +100,6 @@ Then you can import the `Command` [Compound Component](https://kentcdodds.com/bl
95100
</Command>
96101
</template>
97102
98-
<script lang="ts" setup>
99-
import { ref } from 'vue'
100-
import { Command } from 'vue-command-palette'
101-
</script>
102-
103103
<style>
104104
// import your custom css
105105
@import '~/assets/css/custom.css';
@@ -109,6 +109,13 @@ import { Command } from 'vue-command-palette'
109109
or in a dialog:
110110

111111
```vue
112+
<script lang="ts" setup>
113+
import { ref } from 'vue'
114+
import { Command } from 'vue-command-palette'
115+
116+
const visible = ref(false)
117+
</script>
118+
112119
<template>
113120
<Command.Dialog :visible="visible" theme="custom">
114121
<template #header>
@@ -131,13 +138,6 @@ or in a dialog:
131138
</Command.Dialog>
132139
</template>
133140
134-
<script lang="ts" setup>
135-
import { ref } from 'vue'
136-
import { Command } from 'vue-command-palette'
137-
138-
const visible = ref(false)
139-
</script>
140-
141141
<style>
142142
// import your custom css
143143
@import '~/assets/css/custom.css';

‎api-extractor.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3+
"mainEntryPointFilePath": "<projectFolder>/temp/index.d.ts",
4+
"bundledPackages": [],
5+
"compiler": {
6+
"tsconfigFilePath": "<projectFolder>/tsconfig.build.json"
7+
},
8+
"apiReport": {
9+
"enabled": false
10+
},
11+
"docModel": {
12+
"enabled": false
13+
},
14+
"dtsRollup": {
15+
"enabled": true,
16+
"untrimmedFilePath": "<projectFolder>/lib/<unscopedPackageName>.d.ts"
17+
},
18+
"tsdocMetadata": {
19+
"enabled": false
20+
},
21+
"messages": {
22+
"extractorMessageReporting": {
23+
"ae-forgotten-export": {
24+
"logLevel": "none"
25+
},
26+
"ae-missing-release-tag": {
27+
"logLevel": "none"
28+
}
29+
}
30+
}
31+
}

‎components.d.ts

-4
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ export {}
77

88
declare module 'vue' {
99
export interface GlobalComponents {
10-
'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
11-
'Carbon:logoGithub': typeof import('~icons/carbon/logo-github')['default']
12-
'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
1310
CmdkPlaceholder: typeof import('./src/components/common/CmdkPlaceholder.vue')['default']
1411
FigmaIcon: typeof import('./src/components/icons/FigmaIcon.vue')['default']
1512
Home: typeof import('./src/components/command/raycast/Home.vue')['default']
@@ -24,7 +21,6 @@ declare module 'vue' {
2421
LinearRemoveLabelIcon: typeof import('./src/components/icons/LinearRemoveLabelIcon.vue')['default']
2522
LinearSetDueDateIcon: typeof import('./src/components/icons/LinearSetDueDateIcon.vue')['default']
2623
Logo: typeof import('./src/components/icons/Logo.vue')['default']
27-
'Mdi:heart': typeof import('~icons/mdi/heart')['default']
2824
MoonIcon: typeof import('./src/components/icons/MoonIcon.vue')['default']
2925
Projects: typeof import('./src/components/command/vercel/Projects.vue')['default']
3026
Raycast: typeof import('./src/components/command/raycast/Raycast.vue')['default']

‎package.json

+36-35
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,54 @@
11
{
22
"name": "vue-command-palette",
3-
"version": "0.2.3",
43
"type": "module",
4+
"version": "0.2.3",
55
"author": "xiaoluoboding <[email protected]>",
6-
"scripts": {
7-
"dev": "vite",
8-
"build:docs": "vite build --mode docs",
9-
"build:lib": "vue-tsc --noEmit && vite build --mode lib",
10-
"preview": "vite preview",
11-
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
12-
},
6+
"homepage": "https://github.com/xiaoluoboding/vue-command-palette",
137
"repository": {
148
"type": "git",
159
"url": "git+https://github.com/xiaoluoboding/vue-command-palette.git"
1610
},
17-
"homepage": "https://github.com/xiaoluoboding/vue-command-palette",
18-
"files": [
19-
"lib"
20-
],
21-
"main": "./lib/vue-command-palette.umd.cjs",
22-
"module": "./lib/vue-command-palette.js",
2311
"exports": {
2412
".": {
13+
"types": "./lib/index.d.ts",
2514
"import": "./lib/vue-command-palette.js",
26-
"require": "./lib/vue-command-palette.umd.cjs",
27-
"types": "./lib/index.d.ts"
15+
"require": "./lib/vue-command-palette.cjs"
2816
}
2917
},
18+
"main": "./lib/vue-command-palette.cjs",
19+
"module": "./lib/vue-command-palette.js",
3020
"types": "./lib/index.d.ts",
21+
"files": [
22+
"lib"
23+
],
24+
"scripts": {
25+
"dev": "vite",
26+
"build:docs": "vite build --mode docs",
27+
"build:lib": "vite build --mode lib && pnpm run build:types",
28+
"build:types": "vue-tsc -p tsconfig.build.json && api-extractor run",
29+
"preview": "vite preview",
30+
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
31+
},
3132
"dependencies": {
32-
"fuse.js": "^6.6.2",
33-
"mitt": "^3.0.0",
34-
"nanoid": "^4.0.0"
33+
"fuse.js": "^7.0.0",
34+
"nanoid": "^5.0.6"
3535
},
3636
"devDependencies": {
37-
"@iconify/json": "^2.2.104",
38-
"@types/node": "^18.7.14",
39-
"@unocss/reset": "^0.55.2",
40-
"@vitejs/plugin-vue": "^4.3.2",
41-
"@vueuse/core": "^9.1.1",
42-
"highlight.js": "^11.6.0",
43-
"sass": "^1.54.8",
44-
"typescript": "^4.6.4",
45-
"unocss": "^0.55.2",
46-
"unplugin-icons": "^0.16.5",
47-
"unplugin-vue-components": "^0.25.1",
48-
"vite": "^4.4.9",
49-
"vite-plugin-dts": "^3.5.2",
50-
"vue": "^3.3.4",
51-
"vue-tsc": "^1.8.8"
37+
"@iconify/json": "^2.2.189",
38+
"@microsoft/api-extractor": "^7.42.3",
39+
"@types/node": "^20.11.24",
40+
"@unocss/reset": "^0.58.5",
41+
"@vitejs/plugin-vue": "^5.0.4",
42+
"@vue/tsconfig": "^0.5.1",
43+
"@vueuse/core": "^10.9.0",
44+
"highlight.js": "^11.9.0",
45+
"sass": "^1.71.1",
46+
"typescript": "^5.3.3",
47+
"unocss": "^0.58.5",
48+
"unplugin-icons": "^0.18.5",
49+
"unplugin-vue-components": "^0.26.0",
50+
"vite": "^5.1.5",
51+
"vue": "^3.4.21",
52+
"vue-tsc": "^2.0.5"
5253
}
53-
}
54+
}

‎packages/CommandDialog.vue

+37-38
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,61 @@
1-
<template>
2-
<Teleport to="body" ref="dialogRef">
3-
<Transition name="command-dialog" appear>
4-
<Command :theme="theme" v-if="visible">
5-
<div command-dialog>
6-
<div command-dialog-mask>
7-
<div command-dialog-wrapper>
8-
<div command-dialog-header>
9-
<slot name="header" />
10-
</div>
11-
<div command-dialog-body>
12-
<slot name="body" />
13-
</div>
14-
<div command-dialog-footer v-if="$slots.footer">
15-
<slot name="footer" />
16-
</div>
17-
</div>
18-
</div>
19-
</div>
20-
</Command>
21-
</Transition>
22-
</Teleport>
23-
</template>
24-
25-
<script lang="ts">
26-
import { defineComponent } from 'vue'
27-
28-
export default defineComponent({
29-
name: 'Command.Dialog'
30-
})
31-
</script>
32-
331
<script lang="ts" setup>
34-
import { onBeforeUnmount, ref } from 'vue'
2+
import { onBeforeUnmount, ref, watch } from 'vue'
353
import { whenever } from '@vueuse/core'
364
375
import Command from './CommandRoot.vue'
386
import { useCommandState } from './useCommandState'
397
import { useCommandEvent } from './useCommandEvent'
408
import type { ItemInfo } from './types'
419
10+
defineOptions({
11+
name: 'Command.Dialog',
12+
})
13+
4214
const props = defineProps<{
4315
visible: boolean
4416
theme: string
4517
}>()
4618
4719
const emit = defineEmits<{
48-
(e: 'select-item', item: ItemInfo): void
20+
(e: 'selectItem', item: ItemInfo): void
4921
}>()
5022
5123
const { resetStore } = useCommandState()
52-
const { emitter } = useCommandEvent()
24+
const { itemInfo } = useCommandEvent()
5325
const dialogRef = ref<HTMLDivElement>()
5426
55-
emitter.on('selectItem', (item) => {
56-
emit('select-item', item)
57-
})
27+
watch(
28+
() => itemInfo.value,
29+
(item) => {
30+
emit('selectItem', item!)
31+
},
32+
)
5833
5934
whenever(() => props.visible, resetStore)
6035
6136
onBeforeUnmount(resetStore)
6237
</script>
38+
39+
<template>
40+
<Teleport ref="dialogRef" to="body">
41+
<Transition name="command-dialog" appear>
42+
<Command v-if="visible" :theme="theme">
43+
<div command-dialog>
44+
<div command-dialog-mask>
45+
<div command-dialog-wrapper>
46+
<div command-dialog-header>
47+
<slot name="header" />
48+
</div>
49+
<div command-dialog-body>
50+
<slot name="body" />
51+
</div>
52+
<div v-if="$slots.footer" command-dialog-footer>
53+
<slot name="footer" />
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</Command>
59+
</Transition>
60+
</Teleport>
61+
</template>

‎packages/CommandGroup.vue

+25-30
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,39 @@
1+
<script lang="ts" setup>
2+
import { computed } from 'vue'
3+
import { nanoid } from 'nanoid'
4+
5+
import { useCommandState } from './useCommandState'
6+
import type { CommandGroupProps } from './types';
7+
8+
defineOptions({
9+
name: 'Command.Group',
10+
})
11+
12+
defineProps<CommandGroupProps>()
13+
14+
const groupId = computed(() => `command-group-${nanoid()}`)
15+
16+
const { filtered, isSearching } = useCommandState()
17+
18+
const isRender = computed(() =>
19+
!isSearching.value ? true : filtered.value.groups.has(groupId.value),
20+
)
21+
</script>
22+
123
<template>
224
<div
3-
command-group=""
4-
role="presentation"
525
v-show="isRender"
626
:key="groupId"
27+
command-group=""
28+
role="presentation"
729
:command-group-key="groupId"
830
:data-value="heading"
931
>
10-
<div command-group-heading="" v-if="heading">
32+
<div v-if="heading" command-group-heading="">
1133
{{ heading }}
1234
</div>
1335
<div command-group-items="" role="group">
1436
<slot />
1537
</div>
1638
</div>
1739
</template>
18-
19-
<script lang="ts">
20-
import { defineComponent } from 'vue'
21-
22-
export default defineComponent({
23-
name: 'Command.Group'
24-
})
25-
</script>
26-
27-
<script lang="ts" setup>
28-
import { computed } from 'vue'
29-
import { nanoid } from 'nanoid'
30-
31-
import { useCommandState } from './useCommandState'
32-
33-
const groupId = computed(() => `command-group-${nanoid()}`)
34-
35-
defineProps<{
36-
heading: string
37-
}>()
38-
39-
const { filtered, isSearching } = useCommandState()
40-
41-
const isRender = computed(() =>
42-
!isSearching.value ? true : filtered.value.groups.has(groupId.value)
43-
)
44-
</script>

0 commit comments

Comments
 (0)