@finema/core 1.4.220 → 1.4.221
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 +60 -60
- package/dist/module.json +1 -1
- package/dist/module.mjs +2 -1
- package/dist/runtime/components/Alert.vue +48 -48
- package/dist/runtime/components/Avatar.vue +27 -27
- package/dist/runtime/components/Badge.vue +11 -11
- package/dist/runtime/components/Breadcrumb.vue +44 -44
- package/dist/runtime/components/Button/Group.vue +37 -37
- package/dist/runtime/components/Button/index.vue +75 -75
- package/dist/runtime/components/Card.vue +38 -38
- package/dist/runtime/components/Core.vue +45 -45
- package/dist/runtime/components/Dialog/index.vue +110 -110
- package/dist/runtime/components/Dropdown/index.vue +70 -70
- package/dist/runtime/components/Empty.vue +18 -18
- package/dist/runtime/components/FlexDeck/Base.vue +159 -159
- package/dist/runtime/components/FlexDeck/index.vue +68 -68
- package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
- package/dist/runtime/components/Form/Fields.vue +230 -230
- package/dist/runtime/components/Form/InputCheckbox/index.vue +28 -28
- package/dist/runtime/components/Form/InputDateTime/index.vue +68 -68
- package/dist/runtime/components/Form/InputDateTimeRange/index.vue +91 -91
- package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
- package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
- package/dist/runtime/components/Form/InputSelect/index.vue +55 -55
- package/dist/runtime/components/Form/InputSelectMultiple/index.vue +54 -54
- package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
- package/dist/runtime/components/Form/InputTags/index.vue +141 -141
- package/dist/runtime/components/Form/InputText/index.vue +68 -68
- package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
- package/dist/runtime/components/Form/InputToggle/index.vue +27 -27
- package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
- package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +362 -362
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemUpload.vue +241 -241
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +110 -110
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +171 -171
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemUpload.vue +161 -161
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -64
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +178 -178
- package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -151
- package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -219
- package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue +55 -55
- package/dist/runtime/components/Form/InputWYSIWYG/index.vue +228 -228
- package/dist/runtime/components/Form/index.vue +6 -6
- package/dist/runtime/components/Icon.vue +23 -23
- package/dist/runtime/components/Image.vue +36 -36
- package/dist/runtime/components/Loader.vue +27 -27
- package/dist/runtime/components/Log.vue +22 -22
- package/dist/runtime/components/LogItem.vue +41 -41
- package/dist/runtime/components/Modal/index.vue +146 -146
- package/dist/runtime/components/OTPInput.vue +127 -127
- package/dist/runtime/components/QRCode.vue +22 -22
- package/dist/runtime/components/SimplePagination.vue +96 -96
- package/dist/runtime/components/Slideover/index.vue +110 -110
- package/dist/runtime/components/Table/Base.vue +161 -161
- package/dist/runtime/components/Table/ColumnDate.vue +16 -16
- package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
- package/dist/runtime/components/Table/ColumnImage.vue +15 -15
- package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
- package/dist/runtime/components/Table/ColumnText.vue +29 -29
- package/dist/runtime/components/Table/Simple.vue +70 -70
- package/dist/runtime/components/Table/index.vue +65 -65
- package/dist/runtime/components/Tabs/index.vue +64 -64
- package/dist/runtime/components/TeleportSafe.vue +40 -40
- package/package.json +100 -100
package/README.md
CHANGED
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
# @finema/core Nuxt Module
|
|
2
|
-
|
|
3
|
-
[✨ Release Notes](/CHANGELOG.md)
|
|
4
|
-
|
|
5
|
-
## Starter template
|
|
6
|
-
https://gitlab.finema.co/finema/nuxt3-template-with-uikit
|
|
7
|
-
|
|
8
|
-
## Remark
|
|
9
|
-
- 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.
|
|
10
|
-
|
|
11
|
-
## Quick Setup
|
|
12
|
-
|
|
13
|
-
1. Add `@finema/core` dependency to your project
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
# Using pnpm
|
|
17
|
-
pnpm add -D @finema/core
|
|
18
|
-
|
|
19
|
-
# Using yarn
|
|
20
|
-
yarn add --dev @finema/core
|
|
21
|
-
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
1. Add `@finema/core` to the `modules` section of `nuxt.config.ts`
|
|
25
|
-
|
|
26
|
-
```js
|
|
27
|
-
export default defineNuxtConfig({
|
|
28
|
-
modules: [
|
|
29
|
-
'@finema/core'
|
|
30
|
-
]
|
|
31
|
-
})
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
That's it! You can now use @finema/core in your Nuxt app ✨
|
|
35
|
-
|
|
36
|
-
## Development
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
# Install dependencies
|
|
40
|
-
pnpm install
|
|
41
|
-
|
|
42
|
-
# Generate type stubs
|
|
43
|
-
pnpm dev:prepare
|
|
44
|
-
|
|
45
|
-
# Develop with the playground
|
|
46
|
-
pnpm dev
|
|
47
|
-
|
|
48
|
-
# Build the playground
|
|
49
|
-
pnpm dev:build
|
|
50
|
-
|
|
51
|
-
# Run ESLint
|
|
52
|
-
pnpm lint
|
|
53
|
-
|
|
54
|
-
# Run Vitest
|
|
55
|
-
pnpm test
|
|
56
|
-
pnpm test:watch
|
|
57
|
-
|
|
58
|
-
# Release new version
|
|
59
|
-
pnpm release
|
|
60
|
-
```
|
|
1
|
+
# @finema/core Nuxt Module
|
|
2
|
+
|
|
3
|
+
[✨ Release Notes](/CHANGELOG.md)
|
|
4
|
+
|
|
5
|
+
## Starter template
|
|
6
|
+
https://gitlab.finema.co/finema/nuxt3-template-with-uikit
|
|
7
|
+
|
|
8
|
+
## Remark
|
|
9
|
+
- 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.
|
|
10
|
+
|
|
11
|
+
## Quick Setup
|
|
12
|
+
|
|
13
|
+
1. Add `@finema/core` dependency to your project
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# Using pnpm
|
|
17
|
+
pnpm add -D @finema/core
|
|
18
|
+
|
|
19
|
+
# Using yarn
|
|
20
|
+
yarn add --dev @finema/core
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
1. Add `@finema/core` to the `modules` section of `nuxt.config.ts`
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
export default defineNuxtConfig({
|
|
28
|
+
modules: [
|
|
29
|
+
'@finema/core'
|
|
30
|
+
]
|
|
31
|
+
})
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
That's it! You can now use @finema/core in your Nuxt app ✨
|
|
35
|
+
|
|
36
|
+
## Development
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
# Install dependencies
|
|
40
|
+
pnpm install
|
|
41
|
+
|
|
42
|
+
# Generate type stubs
|
|
43
|
+
pnpm dev:prepare
|
|
44
|
+
|
|
45
|
+
# Develop with the playground
|
|
46
|
+
pnpm dev
|
|
47
|
+
|
|
48
|
+
# Build the playground
|
|
49
|
+
pnpm dev:build
|
|
50
|
+
|
|
51
|
+
# Run ESLint
|
|
52
|
+
pnpm lint
|
|
53
|
+
|
|
54
|
+
# Run Vitest
|
|
55
|
+
pnpm test
|
|
56
|
+
pnpm test:watch
|
|
57
|
+
|
|
58
|
+
# Release new version
|
|
59
|
+
pnpm release
|
|
60
|
+
```
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
|
|
|
2
2
|
import { defu } from 'defu';
|
|
3
3
|
|
|
4
4
|
const name = "@finema/core";
|
|
5
|
-
const version = "1.4.
|
|
5
|
+
const version = "1.4.221";
|
|
6
6
|
|
|
7
7
|
const colorModeOptions = {
|
|
8
8
|
preference: "light"
|
|
@@ -83,6 +83,7 @@ const nuxtAppOptions = {
|
|
|
83
83
|
crossorigin: ""
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
+
hid: "favicon",
|
|
86
87
|
rel: "icon",
|
|
87
88
|
type: "image/x-icon",
|
|
88
89
|
href: "/favicon.ico"
|
|
@@ -1,48 +1,48 @@
|
|
|
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 alert } from '#ui/ui.config'
|
|
10
|
-
import type { AlertColor, AlertVariant, Avatar, Button, Strategy } from '#ui/types'
|
|
11
|
-
|
|
12
|
-
defineProps({
|
|
13
|
-
title: {
|
|
14
|
-
type: String,
|
|
15
|
-
required: true,
|
|
16
|
-
},
|
|
17
|
-
description: {
|
|
18
|
-
type: String,
|
|
19
|
-
default: null,
|
|
20
|
-
},
|
|
21
|
-
icon: {
|
|
22
|
-
type: String,
|
|
23
|
-
},
|
|
24
|
-
avatar: {
|
|
25
|
-
type: Object as PropType<Avatar>,
|
|
26
|
-
default: null,
|
|
27
|
-
},
|
|
28
|
-
closeButton: {
|
|
29
|
-
type: Object as PropType<Button>,
|
|
30
|
-
},
|
|
31
|
-
actions: {
|
|
32
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
33
|
-
type: Array as PropType<Array<Button & { click?: Function }>>,
|
|
34
|
-
},
|
|
35
|
-
color: {
|
|
36
|
-
type: String as PropType<AlertColor>,
|
|
37
|
-
},
|
|
38
|
-
variant: {
|
|
39
|
-
type: String as PropType<AlertVariant>,
|
|
40
|
-
},
|
|
41
|
-
class: {
|
|
42
|
-
type: [String, Object, Array] as PropType<any>,
|
|
43
|
-
},
|
|
44
|
-
ui: {
|
|
45
|
-
type: Object as PropType<Partial<typeof alert> & { strategy?: Strategy }>,
|
|
46
|
-
},
|
|
47
|
-
})
|
|
48
|
-
</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 alert } from '#ui/ui.config'
|
|
10
|
+
import type { AlertColor, AlertVariant, Avatar, Button, Strategy } from '#ui/types'
|
|
11
|
+
|
|
12
|
+
defineProps({
|
|
13
|
+
title: {
|
|
14
|
+
type: String,
|
|
15
|
+
required: true,
|
|
16
|
+
},
|
|
17
|
+
description: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: null,
|
|
20
|
+
},
|
|
21
|
+
icon: {
|
|
22
|
+
type: String,
|
|
23
|
+
},
|
|
24
|
+
avatar: {
|
|
25
|
+
type: Object as PropType<Avatar>,
|
|
26
|
+
default: null,
|
|
27
|
+
},
|
|
28
|
+
closeButton: {
|
|
29
|
+
type: Object as PropType<Button>,
|
|
30
|
+
},
|
|
31
|
+
actions: {
|
|
32
|
+
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
33
|
+
type: Array as PropType<Array<Button & { click?: Function }>>,
|
|
34
|
+
},
|
|
35
|
+
color: {
|
|
36
|
+
type: String as PropType<AlertColor>,
|
|
37
|
+
},
|
|
38
|
+
variant: {
|
|
39
|
+
type: String as PropType<AlertVariant>,
|
|
40
|
+
},
|
|
41
|
+
class: {
|
|
42
|
+
type: [String, Object, Array] as PropType<any>,
|
|
43
|
+
},
|
|
44
|
+
ui: {
|
|
45
|
+
type: Object as PropType<Partial<typeof alert> & { strategy?: Strategy }>,
|
|
46
|
+
},
|
|
47
|
+
})
|
|
48
|
+
</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 { AvatarSize } from '#ui/types'
|
|
7
|
-
import type { PropType } from 'vue'
|
|
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 { AvatarSize } from '#ui/types'
|
|
7
|
+
import type { PropType } from 'vue'
|
|
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,11 +1,11 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UBadge v-bind="$props">
|
|
3
|
-
<slot />
|
|
4
|
-
</UBadge>
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<script setup lang="ts">
|
|
8
|
-
import type { Badge } from '#ui/types/badge'
|
|
9
|
-
|
|
10
|
-
defineProps<Badge>()
|
|
11
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UBadge v-bind="$props">
|
|
3
|
+
<slot />
|
|
4
|
+
</UBadge>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script setup lang="ts">
|
|
8
|
+
import type { Badge } from '#ui/types/badge'
|
|
9
|
+
|
|
10
|
+
defineProps<Badge>()
|
|
11
|
+
</script>
|
|
@@ -1,44 +1,44 @@
|
|
|
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 { breadcrumb } from '#core/ui.config'
|
|
20
|
-
import type { BreadcrumbLink, Strategy } from '#ui/types'
|
|
21
|
-
|
|
22
|
-
const config = useUiConfig<typeof breadcrumb>(breadcrumb, 'breadcrumb')
|
|
23
|
-
|
|
24
|
-
const props = defineProps({
|
|
25
|
-
links: {
|
|
26
|
-
type: Array as PropType<BreadcrumbLink[]>,
|
|
27
|
-
default: () => [],
|
|
28
|
-
},
|
|
29
|
-
divider: {
|
|
30
|
-
type: String,
|
|
31
|
-
default: () => breadcrumb.default.divider,
|
|
32
|
-
},
|
|
33
|
-
class: {
|
|
34
|
-
type: [String, Object, Array] as PropType<any>,
|
|
35
|
-
default: () => '',
|
|
36
|
-
},
|
|
37
|
-
ui: {
|
|
38
|
-
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
39
|
-
default: () => ({}),
|
|
40
|
-
},
|
|
41
|
-
})
|
|
42
|
-
|
|
43
|
-
const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
44
|
-
</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 { breadcrumb } from '#core/ui.config'
|
|
20
|
+
import type { BreadcrumbLink, Strategy } from '#ui/types'
|
|
21
|
+
|
|
22
|
+
const config = useUiConfig<typeof breadcrumb>(breadcrumb, 'breadcrumb')
|
|
23
|
+
|
|
24
|
+
const props = defineProps({
|
|
25
|
+
links: {
|
|
26
|
+
type: Array as PropType<BreadcrumbLink[]>,
|
|
27
|
+
default: () => [],
|
|
28
|
+
},
|
|
29
|
+
divider: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: () => breadcrumb.default.divider,
|
|
32
|
+
},
|
|
33
|
+
class: {
|
|
34
|
+
type: [String, Object, Array] as PropType<any>,
|
|
35
|
+
default: () => '',
|
|
36
|
+
},
|
|
37
|
+
ui: {
|
|
38
|
+
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
39
|
+
default: () => ({}),
|
|
40
|
+
},
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
44
|
+
</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 'vue'
|
|
9
|
-
import type { ButtonSize } from '#ui/types/button'
|
|
10
|
-
import { button, type buttonGroup } from '#ui/ui.config'
|
|
11
|
-
import type { Strategy } from '#ui/types'
|
|
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 'vue'
|
|
9
|
+
import type { ButtonSize } from '#ui/types/button'
|
|
10
|
+
import { button, type buttonGroup } from '#ui/ui.config'
|
|
11
|
+
import type { Strategy } from '#ui/types'
|
|
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,75 +1,75 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UButton v-bind="$props">
|
|
3
|
-
<template #leading><slot name="leading" :disabled="disabled" :loading="loading" /></template>
|
|
4
|
-
<slot />
|
|
5
|
-
<template #trailing><slot name="trailing" :disabled="disabled" :loading="loading" /></template>
|
|
6
|
-
</UButton>
|
|
7
|
-
</template>
|
|
8
|
-
|
|
9
|
-
<script lang="ts" setup>
|
|
10
|
-
import { type button } from '#ui/ui.config'
|
|
11
|
-
import { UButton } from '#components'
|
|
12
|
-
import type { ButtonColor, ButtonSize, ButtonVariant } from '#ui/types/button'
|
|
13
|
-
import type { PropType } from 'vue'
|
|
14
|
-
|
|
15
|
-
defineProps({
|
|
16
|
-
label: {
|
|
17
|
-
type: String,
|
|
18
|
-
},
|
|
19
|
-
type: {
|
|
20
|
-
type: String as PropType<'button' | 'submit' | 'reset'>,
|
|
21
|
-
},
|
|
22
|
-
block: {
|
|
23
|
-
type: Boolean,
|
|
24
|
-
},
|
|
25
|
-
loading: {
|
|
26
|
-
type: Boolean,
|
|
27
|
-
},
|
|
28
|
-
disabled: {
|
|
29
|
-
type: Boolean,
|
|
30
|
-
},
|
|
31
|
-
padded: {
|
|
32
|
-
type: Boolean,
|
|
33
|
-
default: true,
|
|
34
|
-
},
|
|
35
|
-
size: {
|
|
36
|
-
type: String as PropType<ButtonSize>,
|
|
37
|
-
},
|
|
38
|
-
color: {
|
|
39
|
-
type: String as PropType<ButtonColor>,
|
|
40
|
-
},
|
|
41
|
-
variant: {
|
|
42
|
-
type: String as PropType<ButtonVariant>,
|
|
43
|
-
},
|
|
44
|
-
loadingIcon: {
|
|
45
|
-
type: String,
|
|
46
|
-
},
|
|
47
|
-
icon: {
|
|
48
|
-
type: String,
|
|
49
|
-
},
|
|
50
|
-
leadingIcon: {
|
|
51
|
-
type: String,
|
|
52
|
-
},
|
|
53
|
-
trailingIcon: {
|
|
54
|
-
type: String,
|
|
55
|
-
},
|
|
56
|
-
trailing: {
|
|
57
|
-
type: Boolean,
|
|
58
|
-
},
|
|
59
|
-
leading: {
|
|
60
|
-
type: Boolean,
|
|
61
|
-
},
|
|
62
|
-
square: {
|
|
63
|
-
type: Boolean,
|
|
64
|
-
},
|
|
65
|
-
truncate: {
|
|
66
|
-
type: Boolean,
|
|
67
|
-
},
|
|
68
|
-
class: {
|
|
69
|
-
type: [String, Array, Object] as PropType<any>,
|
|
70
|
-
},
|
|
71
|
-
ui: {
|
|
72
|
-
type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
|
|
73
|
-
},
|
|
74
|
-
})
|
|
75
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UButton v-bind="$props">
|
|
3
|
+
<template #leading><slot name="leading" :disabled="disabled" :loading="loading" /></template>
|
|
4
|
+
<slot />
|
|
5
|
+
<template #trailing><slot name="trailing" :disabled="disabled" :loading="loading" /></template>
|
|
6
|
+
</UButton>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script lang="ts" setup>
|
|
10
|
+
import { type button } from '#ui/ui.config'
|
|
11
|
+
import { UButton } from '#components'
|
|
12
|
+
import type { ButtonColor, ButtonSize, ButtonVariant } from '#ui/types/button'
|
|
13
|
+
import type { PropType } from 'vue'
|
|
14
|
+
|
|
15
|
+
defineProps({
|
|
16
|
+
label: {
|
|
17
|
+
type: String,
|
|
18
|
+
},
|
|
19
|
+
type: {
|
|
20
|
+
type: String as PropType<'button' | 'submit' | 'reset'>,
|
|
21
|
+
},
|
|
22
|
+
block: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
},
|
|
25
|
+
loading: {
|
|
26
|
+
type: Boolean,
|
|
27
|
+
},
|
|
28
|
+
disabled: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
},
|
|
31
|
+
padded: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
default: true,
|
|
34
|
+
},
|
|
35
|
+
size: {
|
|
36
|
+
type: String as PropType<ButtonSize>,
|
|
37
|
+
},
|
|
38
|
+
color: {
|
|
39
|
+
type: String as PropType<ButtonColor>,
|
|
40
|
+
},
|
|
41
|
+
variant: {
|
|
42
|
+
type: String as PropType<ButtonVariant>,
|
|
43
|
+
},
|
|
44
|
+
loadingIcon: {
|
|
45
|
+
type: String,
|
|
46
|
+
},
|
|
47
|
+
icon: {
|
|
48
|
+
type: String,
|
|
49
|
+
},
|
|
50
|
+
leadingIcon: {
|
|
51
|
+
type: String,
|
|
52
|
+
},
|
|
53
|
+
trailingIcon: {
|
|
54
|
+
type: String,
|
|
55
|
+
},
|
|
56
|
+
trailing: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
},
|
|
59
|
+
leading: {
|
|
60
|
+
type: Boolean,
|
|
61
|
+
},
|
|
62
|
+
square: {
|
|
63
|
+
type: Boolean,
|
|
64
|
+
},
|
|
65
|
+
truncate: {
|
|
66
|
+
type: Boolean,
|
|
67
|
+
},
|
|
68
|
+
class: {
|
|
69
|
+
type: [String, Array, Object] as PropType<any>,
|
|
70
|
+
},
|
|
71
|
+
ui: {
|
|
72
|
+
type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
|
|
73
|
+
},
|
|
74
|
+
})
|
|
75
|
+
</script>
|