mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 12:39:35 +01:00
Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7f9d69183c | ||
|
|
23e5f4c501 | ||
|
|
24998e3ac5 | ||
|
|
bebf18a89a | ||
|
|
1b56b50d4d | ||
|
|
3337559b89 | ||
|
|
d33a23ebc0 | ||
|
|
28586c35a5 | ||
|
|
e521e1ac24 | ||
|
|
8ea3223071 | ||
|
|
4cbe983f61 | ||
|
|
e42969f003 | ||
|
|
c93e37a0eb | ||
|
|
9e20f96b65 |
19
CHANGELOG.md
19
CHANGELOG.md
@@ -2,6 +2,25 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
### [0.1.5](https://github.com/nuxtlabs/ui/compare/v0.1.4...v0.1.5) (2022-11-08)
|
||||
|
||||
### [0.1.4](https://github.com/nuxtlabs/ui/compare/v0.1.3...v0.1.4) (2022-11-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** support `RouteLocationRaw` type for `to` ([#112](https://github.com/nuxtlabs/ui/issues/112)) ([1b56b50](https://github.com/nuxtlabs/ui/commit/1b56b50d4d54a5cb9e5febacdf42867988ae6c5d))
|
||||
|
||||
### [0.1.3](https://github.com/nuxtlabs/ui/compare/v0.1.2...v0.1.3) (2022-11-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **docs:** component input string field ([e521e1a](https://github.com/nuxtlabs/ui/commit/e521e1ac2421dc331652f1ea4ac2b0b2959dc069))
|
||||
* **types:** add missing field in command palette type ([#111](https://github.com/nuxtlabs/ui/issues/111)) ([28586c3](https://github.com/nuxtlabs/ui/commit/28586c35a558d9e925094f86e07acdb928d54ad7))
|
||||
|
||||
### [0.1.2](https://github.com/nuxtlabs/ui/compare/v0.1.1...v0.1.2) (2022-10-27)
|
||||
|
||||
### [0.1.1](https://github.com/nuxtlabs/ui/compare/v0.1.0...v0.1.1) (2022-10-26)
|
||||
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
size="sm"
|
||||
/>
|
||||
<UInput
|
||||
v-else-if="prop.type === 'String' && typeof prop.value === 'string'"
|
||||
v-else-if="prop.type === 'String'"
|
||||
v-model="prop.value"
|
||||
:name="prop.key"
|
||||
size="sm"
|
||||
|
||||
@@ -154,8 +154,8 @@
|
||||
Tooltip:
|
||||
</div>
|
||||
|
||||
<UTooltip text="Hello tooltip!">
|
||||
<UIcon name="heroicons-outline:information-circle" class="w-6 h-6 text-black cursor-pointer" />
|
||||
<UTooltip text="Hello tooltip!" :shortcuts="['⌘', 'G']">
|
||||
<UIcon name="heroicons-outline:information-circle" class="w-6 h-6 u-text-gray-900 cursor-pointer" />
|
||||
</UTooltip>
|
||||
</div>
|
||||
|
||||
|
||||
14
package.json
14
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nuxthq/ui",
|
||||
"version": "0.1.1",
|
||||
"version": "0.1.5",
|
||||
"repository": "https://github.com/nuxtlabs/ui",
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
@@ -24,28 +24,28 @@
|
||||
"release": "yarn lint && standard-version && git push --follow-tags"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.7.3",
|
||||
"@headlessui/vue": "^1.7.4",
|
||||
"@iconify/vue": "^4.0.0",
|
||||
"@nuxt/kit": "^3.0.0-rc.12",
|
||||
"@nuxt/kit": "^3.0.0-rc.13",
|
||||
"@nuxtjs/color-mode": "^3.1.8",
|
||||
"@nuxtjs/tailwindcss": "^6.1.1",
|
||||
"@nuxtjs/tailwindcss": "^6.1.3",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/line-clamp": "^0.4.2",
|
||||
"@tailwindcss/typography": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.8",
|
||||
"@vueuse/core": "^9.4.0",
|
||||
"@vueuse/integrations": "^9.4.0",
|
||||
"defu": "^6.1.0",
|
||||
"fuse.js": "^6.6.2",
|
||||
"lodash-es": "^4.17.21",
|
||||
"tailwindcss": "^3.2.1"
|
||||
"tailwindcss": "^3.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/module-builder": "^0.2.0",
|
||||
"@nuxtjs/eslint-config-typescript": "^11.0.0",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"eslint": "^8.26.0",
|
||||
"eslint": "^8.27.0",
|
||||
"nuxt": "^3.0.0-rc.9",
|
||||
"standard-version": "^9.5.0",
|
||||
"vue-tsc": "^1.0.9"
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, useSlots } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import type { RouteLocationNormalized } from 'vue-router'
|
||||
import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router'
|
||||
import NuxtLink from '#app/components/nuxt-link'
|
||||
import Icon from '../elements/Icon.vue'
|
||||
import { classNames } from '../../utils'
|
||||
@@ -81,7 +81,7 @@ const props = defineProps({
|
||||
default: false
|
||||
},
|
||||
to: {
|
||||
type: [String, Object] as PropType<string | RouteLocationNormalized>,
|
||||
type: [String, Object] as PropType<string | RouteLocationNormalized | RouteLocationRaw>,
|
||||
default: null
|
||||
},
|
||||
target: {
|
||||
|
||||
@@ -110,6 +110,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoclear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@@ -166,7 +170,7 @@ const groups = computed(() => map(groupBy(results.value, command => command.item
|
||||
return {
|
||||
...props.groups.find(group => group.key === key),
|
||||
commands: commands.slice(0, options.value.resultLimit)
|
||||
}
|
||||
} as Group
|
||||
}))
|
||||
|
||||
// Methods
|
||||
@@ -183,7 +187,7 @@ function onSelect (option: Command | Command[]) {
|
||||
emit('update:modelValue', option, { query: query.value })
|
||||
|
||||
// Clear input after selection
|
||||
if (!props.multiple) {
|
||||
if (props.autoclear) {
|
||||
setTimeout(() => {
|
||||
query.value = ''
|
||||
}, 0)
|
||||
|
||||
@@ -9,7 +9,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, toRef } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { computed, toRef } from 'vue'
|
||||
import { defu } from 'defu'
|
||||
import { usePopper } from '../../composables/usePopper'
|
||||
import type { PopperOptions } from '../../types'
|
||||
|
||||
@@ -6,10 +6,17 @@
|
||||
|
||||
<div v-if="open" ref="container" :class="[containerClass, widthClass]">
|
||||
<transition appear v-bind="transitionClass">
|
||||
<div :class="baseClass">
|
||||
<div :class="[baseClass, backgroundClass, roundedClass, shadowClass, ringClass]">
|
||||
<slot name="text">
|
||||
{{ text }}
|
||||
<span class="truncate">{{ text }}</span>
|
||||
</slot>
|
||||
|
||||
<span v-if="shortcuts?.length" class="inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1">
|
||||
<span class="mr-1 u-text-gray-700">·</span>
|
||||
<kbd v-for="shortcut of shortcuts" :key="shortcut" class="flex items-center justify-center font-sans px-1 h-4 min-w-[16px] text-[10px] u-bg-gray-100 rounded u-text-gray-900">
|
||||
{{ shortcut }}
|
||||
</kbd>
|
||||
</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
@@ -29,6 +36,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
shortcuts: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => []
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: () => $ui.tooltip.wrapper
|
||||
@@ -41,6 +52,22 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: () => $ui.tooltip.width
|
||||
},
|
||||
backgroundClass: {
|
||||
type: String,
|
||||
default: () => $ui.tooltip.background
|
||||
},
|
||||
shadowClass: {
|
||||
type: String,
|
||||
default: () => $ui.tooltip.shadow
|
||||
},
|
||||
ringClass: {
|
||||
type: String,
|
||||
default: () => $ui.tooltip.ring
|
||||
},
|
||||
roundedClass: {
|
||||
type: String,
|
||||
default: () => $ui.tooltip.rounded
|
||||
},
|
||||
baseClass: {
|
||||
type: String,
|
||||
default: () => $ui.tooltip.base
|
||||
|
||||
@@ -342,7 +342,7 @@ export default (variantColors: string[]) => {
|
||||
wrapper: 'relative inline-flex text-left',
|
||||
container: 'z-20',
|
||||
width: 'w-48',
|
||||
base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg',
|
||||
base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg focus:outline-none',
|
||||
group: 'py-1',
|
||||
item: {
|
||||
base: 'group flex items-center gap-3 px-4 py-2 text-sm w-full',
|
||||
@@ -487,7 +487,11 @@ export default (variantColors: string[]) => {
|
||||
wrapper: 'relative inline-flex',
|
||||
container: 'z-20',
|
||||
width: 'max-w-xs',
|
||||
base: 'invisible w-auto h-6 px-2 py-1 space-x-1 truncate rounded shadow lg:visible u-bg-gray-800 truncate u-text-gray-50 text-xs',
|
||||
background: 'u-bg-white',
|
||||
shadow: 'shadow',
|
||||
rounded: 'rounded',
|
||||
ring: 'ring-1 u-ring-gray-200',
|
||||
base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal',
|
||||
transition: {
|
||||
enterActiveClass: 'transition ease-out duration-200',
|
||||
enterFromClass: 'opacity-0 translate-y-1',
|
||||
|
||||
2
src/runtime/types/command-palette.d.ts
vendored
2
src/runtime/types/command-palette.d.ts
vendored
@@ -14,6 +14,7 @@ export interface Command {
|
||||
group?: string
|
||||
score?: number
|
||||
matches?: (FuseSortFunctionMatch | FuseSortFunctionMatchList)[]
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export interface Group {
|
||||
@@ -22,4 +23,5 @@ export interface Group {
|
||||
inactive?: string
|
||||
commands: Command[]
|
||||
options?: Partial<UseFuseOptions<Command>>
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user