@finema/core 1.4.34 → 1.4.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -63
- package/dist/module.d.mts +4 -4
- package/dist/module.d.ts +4 -4
- package/dist/module.json +1 -1
- package/dist/module.mjs +7 -4
- package/dist/runtime/components/Alert.vue +49 -49
- package/dist/runtime/components/Avatar.vue +27 -27
- package/dist/runtime/components/Badge.vue +54 -54
- package/dist/runtime/components/Breadcrumb.vue +45 -45
- package/dist/runtime/components/Button/Group.vue +37 -37
- package/dist/runtime/components/Button/index.vue +77 -77
- package/dist/runtime/components/Card.vue +38 -38
- package/dist/runtime/components/Core.vue +13 -13
- package/dist/runtime/components/Dialog/index.vue +108 -108
- package/dist/runtime/components/Dropdown/index.vue +71 -71
- package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
- package/dist/runtime/components/Form/Fields.vue +147 -136
- package/dist/runtime/components/Form/InputCheckbox/index.vue +21 -21
- package/dist/runtime/components/Form/InputDateTime/index.vue +51 -51
- package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
- package/dist/runtime/components/Form/InputSelect/index.vue +37 -37
- package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
- package/dist/runtime/components/Form/InputText/index.vue +27 -27
- package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
- package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
- package/dist/runtime/components/Form/InputUploadDropzone/index.vue +170 -0
- package/dist/runtime/components/Form/InputUploadDropzone/types.d.ts +11 -0
- package/dist/runtime/components/Form/InputUploadDropzone/types.mjs +0 -0
- package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +36 -36
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +160 -152
- package/dist/runtime/components/Form/index.vue +6 -6
- package/dist/runtime/components/Form/types.d.ts +4 -2
- package/dist/runtime/components/Form/types.mjs +1 -0
- package/dist/runtime/components/Icon.vue +23 -23
- package/dist/runtime/components/Image.vue +36 -36
- package/dist/runtime/components/Loader.vue +14 -14
- package/dist/runtime/components/Modal/index.vue +146 -146
- package/dist/runtime/components/SimplePagination.vue +96 -96
- package/dist/runtime/components/Slideover/index.vue +110 -110
- package/dist/runtime/components/Table/Base.vue +132 -132
- package/dist/runtime/components/Table/ColumnDate.vue +16 -16
- package/dist/runtime/components/Table/ColumnDateTime.vue +30 -30
- package/dist/runtime/components/Table/ColumnImage.vue +13 -13
- package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
- package/dist/runtime/components/Table/Simple.vue +57 -57
- package/dist/runtime/components/Table/index.vue +52 -52
- package/dist/runtime/components/Tabs/index.vue +65 -65
- package/dist/runtime/lib/Requester.d.ts +2 -0
- package/dist/runtime/lib/Requester.mjs +3 -0
- package/dist/runtime/plugin.mjs +4 -2
- package/dist/runtime/types/config.d.ts +1 -1
- package/dist/runtime/types/utils.d.ts +29 -29
- package/dist/runtime/ui.config/breadcrumb.mjs +1 -1
- package/dist/runtime/ui.config/button.mjs +1 -1
- package/dist/runtime/ui.config/index.d.ts +1 -0
- package/dist/runtime/ui.config/index.mjs +1 -0
- package/dist/runtime/ui.config/uploadFileDropzone.d.ts +31 -0
- package/dist/runtime/ui.config/uploadFileDropzone.mjs +31 -0
- package/dist/runtime/ui.css +32 -32
- package/package.json +86 -86
package/README.md
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
# @finema/core Nuxt Module
|
|
2
|
-
|
|
3
|
-
[✨ Release Notes](/CHANGELOG.md)
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- UI components
|
|
8
|
-
- Useful composables
|
|
9
|
-
- Security
|
|
10
|
-
|
|
11
|
-
## Remark
|
|
12
|
-
- Temporary use resolutions for vue 3.3.13 instead of ^3.4.0 due to [this issue](https://github.com/nuxt/ui/issues/1171) and planned to be fixed in the next vue 3.5 version.
|
|
13
|
-
|
|
14
|
-
## Quick Setup
|
|
15
|
-
|
|
16
|
-
1. Add `@finema/core` dependency to your project
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
# Using pnpm
|
|
20
|
-
pnpm add -D @finema/core
|
|
21
|
-
|
|
22
|
-
# Using yarn
|
|
23
|
-
yarn add --dev @finema/core
|
|
24
|
-
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
1. Add `@finema/core` to the `modules` section of `nuxt.config.ts`
|
|
28
|
-
|
|
29
|
-
```js
|
|
30
|
-
export default defineNuxtConfig({
|
|
31
|
-
modules: [
|
|
32
|
-
'@finema/core'
|
|
33
|
-
]
|
|
34
|
-
})
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
That's it! You can now use @finema/core in your Nuxt app ✨
|
|
38
|
-
|
|
39
|
-
## Development
|
|
40
|
-
|
|
41
|
-
```bash
|
|
42
|
-
# Install dependencies
|
|
43
|
-
pnpm install
|
|
44
|
-
|
|
45
|
-
# Generate type stubs
|
|
46
|
-
pnpm dev:prepare
|
|
47
|
-
|
|
48
|
-
# Develop with the playground
|
|
49
|
-
pnpm dev
|
|
50
|
-
|
|
51
|
-
# Build the playground
|
|
52
|
-
pnpm dev:build
|
|
53
|
-
|
|
54
|
-
# Run ESLint
|
|
55
|
-
pnpm lint
|
|
56
|
-
|
|
57
|
-
# Run Vitest
|
|
58
|
-
pnpm test
|
|
59
|
-
pnpm test:watch
|
|
60
|
-
|
|
61
|
-
# Release new version
|
|
62
|
-
pnpm release
|
|
63
|
-
```
|
|
1
|
+
# @finema/core Nuxt Module
|
|
2
|
+
|
|
3
|
+
[✨ Release Notes](/CHANGELOG.md)
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- UI components
|
|
8
|
+
- Useful composables
|
|
9
|
+
- Security
|
|
10
|
+
|
|
11
|
+
## Remark
|
|
12
|
+
- Temporary use resolutions for vue 3.3.13 instead of ^3.4.0 due to [this issue](https://github.com/nuxt/ui/issues/1171) and planned to be fixed in the next vue 3.5 version.
|
|
13
|
+
|
|
14
|
+
## Quick Setup
|
|
15
|
+
|
|
16
|
+
1. Add `@finema/core` dependency to your project
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
# Using pnpm
|
|
20
|
+
pnpm add -D @finema/core
|
|
21
|
+
|
|
22
|
+
# Using yarn
|
|
23
|
+
yarn add --dev @finema/core
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
1. Add `@finema/core` to the `modules` section of `nuxt.config.ts`
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
export default defineNuxtConfig({
|
|
31
|
+
modules: [
|
|
32
|
+
'@finema/core'
|
|
33
|
+
]
|
|
34
|
+
})
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
That's it! You can now use @finema/core in your Nuxt app ✨
|
|
38
|
+
|
|
39
|
+
## Development
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
# Install dependencies
|
|
43
|
+
pnpm install
|
|
44
|
+
|
|
45
|
+
# Generate type stubs
|
|
46
|
+
pnpm dev:prepare
|
|
47
|
+
|
|
48
|
+
# Develop with the playground
|
|
49
|
+
pnpm dev
|
|
50
|
+
|
|
51
|
+
# Build the playground
|
|
52
|
+
pnpm dev:build
|
|
53
|
+
|
|
54
|
+
# Run ESLint
|
|
55
|
+
pnpm lint
|
|
56
|
+
|
|
57
|
+
# Run Vitest
|
|
58
|
+
pnpm test
|
|
59
|
+
pnpm test:watch
|
|
60
|
+
|
|
61
|
+
# Release new version
|
|
62
|
+
pnpm release
|
|
63
|
+
```
|
package/dist/module.d.mts
CHANGED
|
@@ -15,10 +15,10 @@ declare namespace config {
|
|
|
15
15
|
export { config_core as core };
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
type Strategy = 'merge' | 'override'
|
|
19
|
-
|
|
20
|
-
type DeepPartial<T> = Partial<{
|
|
21
|
-
[P in keyof T]: DeepPartial<T[P]> | Record<string, string>
|
|
18
|
+
type Strategy = 'merge' | 'override'
|
|
19
|
+
|
|
20
|
+
type DeepPartial<T> = Partial<{
|
|
21
|
+
[P in keyof T]: DeepPartial<T[P]> | Record<string, string>
|
|
22
22
|
}>
|
|
23
23
|
|
|
24
24
|
interface ModuleOptions {
|
package/dist/module.d.ts
CHANGED
|
@@ -15,10 +15,10 @@ declare namespace config {
|
|
|
15
15
|
export { config_core as core };
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
type Strategy = 'merge' | 'override'
|
|
19
|
-
|
|
20
|
-
type DeepPartial<T> = Partial<{
|
|
21
|
-
[P in keyof T]: DeepPartial<T[P]> | Record<string, string>
|
|
18
|
+
type Strategy = 'merge' | 'override'
|
|
19
|
+
|
|
20
|
+
type DeepPartial<T> = Partial<{
|
|
21
|
+
[P in keyof T]: DeepPartial<T[P]> | Record<string, string>
|
|
22
22
|
}>
|
|
23
23
|
|
|
24
24
|
interface ModuleOptions {
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
|
|
|
2
2
|
import 'lodash-es';
|
|
3
3
|
|
|
4
4
|
const name = "@finema/core";
|
|
5
|
-
const version = "1.4.
|
|
5
|
+
const version = "1.4.36";
|
|
6
6
|
|
|
7
7
|
const colors = {
|
|
8
8
|
black: "#20243E",
|
|
@@ -179,7 +179,7 @@ const button = {
|
|
|
179
179
|
size: "md",
|
|
180
180
|
variant: "solid",
|
|
181
181
|
color: "primary",
|
|
182
|
-
loadingIcon: "i-
|
|
182
|
+
loadingIcon: "i-svg-spinners:180-ring"
|
|
183
183
|
}
|
|
184
184
|
};
|
|
185
185
|
|
|
@@ -242,7 +242,7 @@ const nuxtSecurityOptions = {
|
|
|
242
242
|
xXSSProtection: "1; mode=block",
|
|
243
243
|
crossOriginEmbedderPolicy: "unsafe-none",
|
|
244
244
|
contentSecurityPolicy: {
|
|
245
|
-
"img-src": ["*", "'self'", "data:", "https"],
|
|
245
|
+
"img-src": ["*", "'self'", "data:", "https", "blob:"],
|
|
246
246
|
"script-src": [
|
|
247
247
|
"'self'",
|
|
248
248
|
"'unsafe-inline'",
|
|
@@ -366,7 +366,10 @@ const module = defineNuxtModule({
|
|
|
366
366
|
select,
|
|
367
367
|
selectMenu,
|
|
368
368
|
textarea,
|
|
369
|
-
toggle
|
|
369
|
+
toggle,
|
|
370
|
+
icons: {
|
|
371
|
+
dynamic: true
|
|
372
|
+
}
|
|
370
373
|
},
|
|
371
374
|
nuxt.options.appConfig.ui
|
|
372
375
|
);
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UAlert v-bind="$props">
|
|
3
|
-
<template #title><slot name="title" :title="title" /></template>
|
|
4
|
-
<template #description><slot name="description" :description="description" /></template>
|
|
5
|
-
</UAlert>
|
|
6
|
-
</template>
|
|
7
|
-
<script lang="ts" setup>
|
|
8
|
-
import { type PropType } from 'vue'
|
|
9
|
-
import { type AlertColor, type AlertVariant, type Avatar, type Button } from '#ui/types'
|
|
10
|
-
import type { Strategy } from '#core/types/utils'
|
|
11
|
-
import { type alert } from '#ui/ui.config'
|
|
12
|
-
|
|
13
|
-
defineProps({
|
|
14
|
-
title: {
|
|
15
|
-
type: String,
|
|
16
|
-
required: true,
|
|
17
|
-
},
|
|
18
|
-
description: {
|
|
19
|
-
type: String,
|
|
20
|
-
default: null,
|
|
21
|
-
},
|
|
22
|
-
icon: {
|
|
23
|
-
type: String,
|
|
24
|
-
},
|
|
25
|
-
avatar: {
|
|
26
|
-
type: Object as PropType<Avatar>,
|
|
27
|
-
default: null,
|
|
28
|
-
},
|
|
29
|
-
closeButton: {
|
|
30
|
-
type: Object as PropType<Button>,
|
|
31
|
-
},
|
|
32
|
-
actions: {
|
|
33
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
34
|
-
type: Array as PropType<Array<Button & { click?: Function }>>,
|
|
35
|
-
},
|
|
36
|
-
color: {
|
|
37
|
-
type: String as PropType<AlertColor>,
|
|
38
|
-
},
|
|
39
|
-
variant: {
|
|
40
|
-
type: String as PropType<AlertVariant>,
|
|
41
|
-
},
|
|
42
|
-
class: {
|
|
43
|
-
type: [String, Object, Array] as PropType<any>,
|
|
44
|
-
},
|
|
45
|
-
ui: {
|
|
46
|
-
type: Object as PropType<Partial<typeof alert> & { strategy?: Strategy }>,
|
|
47
|
-
},
|
|
48
|
-
})
|
|
49
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UAlert v-bind="$props">
|
|
3
|
+
<template #title><slot name="title" :title="title" /></template>
|
|
4
|
+
<template #description><slot name="description" :description="description" /></template>
|
|
5
|
+
</UAlert>
|
|
6
|
+
</template>
|
|
7
|
+
<script lang="ts" setup>
|
|
8
|
+
import { type PropType } from 'vue'
|
|
9
|
+
import { type AlertColor, type AlertVariant, type Avatar, type Button } from '#ui/types'
|
|
10
|
+
import type { Strategy } from '#core/types/utils'
|
|
11
|
+
import { type alert } from '#ui/ui.config'
|
|
12
|
+
|
|
13
|
+
defineProps({
|
|
14
|
+
title: {
|
|
15
|
+
type: String,
|
|
16
|
+
required: true,
|
|
17
|
+
},
|
|
18
|
+
description: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: null,
|
|
21
|
+
},
|
|
22
|
+
icon: {
|
|
23
|
+
type: String,
|
|
24
|
+
},
|
|
25
|
+
avatar: {
|
|
26
|
+
type: Object as PropType<Avatar>,
|
|
27
|
+
default: null,
|
|
28
|
+
},
|
|
29
|
+
closeButton: {
|
|
30
|
+
type: Object as PropType<Button>,
|
|
31
|
+
},
|
|
32
|
+
actions: {
|
|
33
|
+
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
34
|
+
type: Array as PropType<Array<Button & { click?: Function }>>,
|
|
35
|
+
},
|
|
36
|
+
color: {
|
|
37
|
+
type: String as PropType<AlertColor>,
|
|
38
|
+
},
|
|
39
|
+
variant: {
|
|
40
|
+
type: String as PropType<AlertVariant>,
|
|
41
|
+
},
|
|
42
|
+
class: {
|
|
43
|
+
type: [String, Object, Array] as PropType<any>,
|
|
44
|
+
},
|
|
45
|
+
ui: {
|
|
46
|
+
type: Object as PropType<Partial<typeof alert> & { strategy?: Strategy }>,
|
|
47
|
+
},
|
|
48
|
+
})
|
|
49
|
+
</script>
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UAvatar v-bind="$attrs" :src="src" :alt="alt" :size="size" />
|
|
3
|
-
</template>
|
|
4
|
-
|
|
5
|
-
<script lang="ts" setup>
|
|
6
|
-
import { type PropType } from '#imports'
|
|
7
|
-
import { type AvatarSize } from '#ui/types'
|
|
8
|
-
|
|
9
|
-
defineOptions({
|
|
10
|
-
inheritAttrs: true,
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
defineProps({
|
|
14
|
-
src: {
|
|
15
|
-
type: String,
|
|
16
|
-
required: true,
|
|
17
|
-
},
|
|
18
|
-
alt: {
|
|
19
|
-
type: String,
|
|
20
|
-
required: true,
|
|
21
|
-
},
|
|
22
|
-
size: {
|
|
23
|
-
type: String as PropType<AvatarSize>,
|
|
24
|
-
default: 'sm',
|
|
25
|
-
},
|
|
26
|
-
})
|
|
27
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UAvatar v-bind="$attrs" :src="src" :alt="alt" :size="size" />
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script lang="ts" setup>
|
|
6
|
+
import { type PropType } from '#imports'
|
|
7
|
+
import { type AvatarSize } from '#ui/types'
|
|
8
|
+
|
|
9
|
+
defineOptions({
|
|
10
|
+
inheritAttrs: true,
|
|
11
|
+
})
|
|
12
|
+
|
|
13
|
+
defineProps({
|
|
14
|
+
src: {
|
|
15
|
+
type: String,
|
|
16
|
+
required: true,
|
|
17
|
+
},
|
|
18
|
+
alt: {
|
|
19
|
+
type: String,
|
|
20
|
+
required: true,
|
|
21
|
+
},
|
|
22
|
+
size: {
|
|
23
|
+
type: String as PropType<AvatarSize>,
|
|
24
|
+
default: 'sm',
|
|
25
|
+
},
|
|
26
|
+
})
|
|
27
|
+
</script>
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UBadge
|
|
3
|
-
v-bind="attrs"
|
|
4
|
-
:class="$props.class"
|
|
5
|
-
:label="label"
|
|
6
|
-
:size="size"
|
|
7
|
-
:color="color"
|
|
8
|
-
:variant="variant"
|
|
9
|
-
:ui="ui"
|
|
10
|
-
>
|
|
11
|
-
<slot />
|
|
12
|
-
</UBadge>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<script setup lang="ts">
|
|
16
|
-
import { useUiConfig, type PropType, useUI, toRef } from '#imports'
|
|
17
|
-
import { type BadgeSize, type BadgeColor, type BadgeVariant } from '#ui/types'
|
|
18
|
-
import { badge } from '#core/ui.config'
|
|
19
|
-
import type { Strategy } from '#core/types/utils'
|
|
20
|
-
|
|
21
|
-
const config = useUiConfig<typeof badge>(badge, 'badge')
|
|
22
|
-
|
|
23
|
-
const props = defineProps({
|
|
24
|
-
size: {
|
|
25
|
-
type: String as PropType<BadgeSize>,
|
|
26
|
-
default: () => badge.default.size,
|
|
27
|
-
validator(value: string) {
|
|
28
|
-
return Object.keys(badge.size).includes(value)
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
color: {
|
|
32
|
-
type: String as PropType<BadgeColor>,
|
|
33
|
-
default: () => badge.default.color,
|
|
34
|
-
},
|
|
35
|
-
variant: {
|
|
36
|
-
type: String as PropType<BadgeVariant>,
|
|
37
|
-
default: () => badge.default.variant,
|
|
38
|
-
},
|
|
39
|
-
label: {
|
|
40
|
-
type: [String, Number],
|
|
41
|
-
default: null,
|
|
42
|
-
},
|
|
43
|
-
class: {
|
|
44
|
-
type: [String, Object, Array] as PropType<any>,
|
|
45
|
-
default: () => '',
|
|
46
|
-
},
|
|
47
|
-
ui: {
|
|
48
|
-
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
49
|
-
default: () => ({}),
|
|
50
|
-
},
|
|
51
|
-
})
|
|
52
|
-
|
|
53
|
-
const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
54
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UBadge
|
|
3
|
+
v-bind="attrs"
|
|
4
|
+
:class="$props.class"
|
|
5
|
+
:label="label"
|
|
6
|
+
:size="size"
|
|
7
|
+
:color="color"
|
|
8
|
+
:variant="variant"
|
|
9
|
+
:ui="ui"
|
|
10
|
+
>
|
|
11
|
+
<slot />
|
|
12
|
+
</UBadge>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script setup lang="ts">
|
|
16
|
+
import { useUiConfig, type PropType, useUI, toRef } from '#imports'
|
|
17
|
+
import { type BadgeSize, type BadgeColor, type BadgeVariant } from '#ui/types'
|
|
18
|
+
import { badge } from '#core/ui.config'
|
|
19
|
+
import type { Strategy } from '#core/types/utils'
|
|
20
|
+
|
|
21
|
+
const config = useUiConfig<typeof badge>(badge, 'badge')
|
|
22
|
+
|
|
23
|
+
const props = defineProps({
|
|
24
|
+
size: {
|
|
25
|
+
type: String as PropType<BadgeSize>,
|
|
26
|
+
default: () => badge.default.size,
|
|
27
|
+
validator(value: string) {
|
|
28
|
+
return Object.keys(badge.size).includes(value)
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
color: {
|
|
32
|
+
type: String as PropType<BadgeColor>,
|
|
33
|
+
default: () => badge.default.color,
|
|
34
|
+
},
|
|
35
|
+
variant: {
|
|
36
|
+
type: String as PropType<BadgeVariant>,
|
|
37
|
+
default: () => badge.default.variant,
|
|
38
|
+
},
|
|
39
|
+
label: {
|
|
40
|
+
type: [String, Number],
|
|
41
|
+
default: null,
|
|
42
|
+
},
|
|
43
|
+
class: {
|
|
44
|
+
type: [String, Object, Array] as PropType<any>,
|
|
45
|
+
default: () => '',
|
|
46
|
+
},
|
|
47
|
+
ui: {
|
|
48
|
+
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
49
|
+
default: () => ({}),
|
|
50
|
+
},
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
54
|
+
</script>
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UBreadcrumb v-bind="attrs" :class="$props.class" :links="links" :divider="divider" :ui="ui">
|
|
3
|
-
<template #default="{ link, isActive, index }">
|
|
4
|
-
<slot name="default" :link="link" :is-active="isActive" :index="index" />
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<template #icon="{ link, index, isActive }">
|
|
8
|
-
<slot name="icon" :link="link" :is-active="isActive" :index="index" />
|
|
9
|
-
</template>
|
|
10
|
-
|
|
11
|
-
<template #divider>
|
|
12
|
-
<slot name="divider" />
|
|
13
|
-
</template>
|
|
14
|
-
</UBreadcrumb>
|
|
15
|
-
</template>
|
|
16
|
-
|
|
17
|
-
<script setup lang="ts">
|
|
18
|
-
import { useUiConfig, type PropType, useUI, toRef } from '#imports'
|
|
19
|
-
import { type BreadcrumbLink } from '#ui/types'
|
|
20
|
-
import type { Strategy } from '#core/types/utils'
|
|
21
|
-
import { breadcrumb } from '#core/ui.config'
|
|
22
|
-
|
|
23
|
-
const config = useUiConfig<typeof breadcrumb>(breadcrumb, 'breadcrumb')
|
|
24
|
-
|
|
25
|
-
const props = defineProps({
|
|
26
|
-
links: {
|
|
27
|
-
type: Array as PropType<BreadcrumbLink[]>,
|
|
28
|
-
default: () => [],
|
|
29
|
-
},
|
|
30
|
-
divider: {
|
|
31
|
-
type: String,
|
|
32
|
-
default: () => breadcrumb.default.divider,
|
|
33
|
-
},
|
|
34
|
-
class: {
|
|
35
|
-
type: [String, Object, Array] as PropType<any>,
|
|
36
|
-
default: () => '',
|
|
37
|
-
},
|
|
38
|
-
ui: {
|
|
39
|
-
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
40
|
-
default: () => ({}),
|
|
41
|
-
},
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
45
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UBreadcrumb v-bind="attrs" :class="$props.class" :links="links" :divider="divider" :ui="ui">
|
|
3
|
+
<template #default="{ link, isActive, index }">
|
|
4
|
+
<slot name="default" :link="link" :is-active="isActive" :index="index" />
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<template #icon="{ link, index, isActive }">
|
|
8
|
+
<slot name="icon" :link="link" :is-active="isActive" :index="index" />
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<template #divider>
|
|
12
|
+
<slot name="divider" />
|
|
13
|
+
</template>
|
|
14
|
+
</UBreadcrumb>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup lang="ts">
|
|
18
|
+
import { useUiConfig, type PropType, useUI, toRef } from '#imports'
|
|
19
|
+
import { type BreadcrumbLink } from '#ui/types'
|
|
20
|
+
import type { Strategy } from '#core/types/utils'
|
|
21
|
+
import { breadcrumb } from '#core/ui.config'
|
|
22
|
+
|
|
23
|
+
const config = useUiConfig<typeof breadcrumb>(breadcrumb, 'breadcrumb')
|
|
24
|
+
|
|
25
|
+
const props = defineProps({
|
|
26
|
+
links: {
|
|
27
|
+
type: Array as PropType<BreadcrumbLink[]>,
|
|
28
|
+
default: () => [],
|
|
29
|
+
},
|
|
30
|
+
divider: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: () => breadcrumb.default.divider,
|
|
33
|
+
},
|
|
34
|
+
class: {
|
|
35
|
+
type: [String, Object, Array] as PropType<any>,
|
|
36
|
+
default: () => '',
|
|
37
|
+
},
|
|
38
|
+
ui: {
|
|
39
|
+
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
40
|
+
default: () => ({}),
|
|
41
|
+
},
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
45
|
+
</script>
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UButtonGroup v-bind="$props">
|
|
3
|
-
<slot />
|
|
4
|
-
</UButtonGroup>
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<script lang="ts" setup>
|
|
8
|
-
import { type PropType } from '#imports'
|
|
9
|
-
import { type ButtonSize } from '#ui/types/button'
|
|
10
|
-
import { type Strategy } from '#core/types/utils'
|
|
11
|
-
import { type buttonGroup, button } from '#ui/ui.config'
|
|
12
|
-
|
|
13
|
-
defineProps({
|
|
14
|
-
size: {
|
|
15
|
-
type: String as PropType<ButtonSize>,
|
|
16
|
-
default: () => button.default.size,
|
|
17
|
-
validator(value: string) {
|
|
18
|
-
return Object.keys(button.size).includes(value)
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
orientation: {
|
|
22
|
-
type: String as PropType<'horizontal' | 'vertical'>,
|
|
23
|
-
default: 'horizontal',
|
|
24
|
-
validator(value: string) {
|
|
25
|
-
return ['horizontal', 'vertical'].includes(value)
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
class: {
|
|
29
|
-
type: [String, Object, Array] as PropType<any>,
|
|
30
|
-
default: undefined,
|
|
31
|
-
},
|
|
32
|
-
ui: {
|
|
33
|
-
type: Object as PropType<Partial<typeof buttonGroup> & { strategy?: Strategy }>,
|
|
34
|
-
default: undefined,
|
|
35
|
-
},
|
|
36
|
-
})
|
|
37
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UButtonGroup v-bind="$props">
|
|
3
|
+
<slot />
|
|
4
|
+
</UButtonGroup>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script lang="ts" setup>
|
|
8
|
+
import { type PropType } from '#imports'
|
|
9
|
+
import { type ButtonSize } from '#ui/types/button'
|
|
10
|
+
import { type Strategy } from '#core/types/utils'
|
|
11
|
+
import { type buttonGroup, button } from '#ui/ui.config'
|
|
12
|
+
|
|
13
|
+
defineProps({
|
|
14
|
+
size: {
|
|
15
|
+
type: String as PropType<ButtonSize>,
|
|
16
|
+
default: () => button.default.size,
|
|
17
|
+
validator(value: string) {
|
|
18
|
+
return Object.keys(button.size).includes(value)
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
orientation: {
|
|
22
|
+
type: String as PropType<'horizontal' | 'vertical'>,
|
|
23
|
+
default: 'horizontal',
|
|
24
|
+
validator(value: string) {
|
|
25
|
+
return ['horizontal', 'vertical'].includes(value)
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
class: {
|
|
29
|
+
type: [String, Object, Array] as PropType<any>,
|
|
30
|
+
default: undefined,
|
|
31
|
+
},
|
|
32
|
+
ui: {
|
|
33
|
+
type: Object as PropType<Partial<typeof buttonGroup> & { strategy?: Strategy }>,
|
|
34
|
+
default: undefined,
|
|
35
|
+
},
|
|
36
|
+
})
|
|
37
|
+
</script>
|