@una-ui/nuxt 0.24.0-beta.1 → 0.25.0-beta.1

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.
Files changed (6) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +1 -1
  3. package/dist/runtime/components/elements/AvatarGroup.vue +1 -1
  4. package/dist/runtime/components/forms/Switch.vue +54 -97
  5. package/dist/runtime/types/switch.d.ts +45 -37
  6. package/package.json +9 -9
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@una-ui/nuxt",
3
3
  "configKey": "una",
4
- "version": "0.24.0-beta.1",
4
+ "version": "0.25.0-beta.1",
5
5
  "compatibility": {
6
6
  "nuxt": ">=3.0.0"
7
7
  },
package/dist/module.mjs CHANGED
@@ -7,7 +7,7 @@ import 'unocss';
7
7
  import 'unocss-preset-animations';
8
8
 
9
9
  const name = "@una-ui/nuxt";
10
- const version = "0.24.0-beta.1";
10
+ const version = "0.25.0-beta.1";
11
11
 
12
12
  const module = defineNuxtModule({
13
13
  meta: {
package/dist/runtime/components/elements/AvatarGroup.vue CHANGED
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<NAvatarGroupProps>(), {
14
14
  <template>
15
15
  <div
16
16
  avatar-group
17
- v-bind="$attrs"
17
+ v-bind="{ ...$attrs, size }"
18
18
  :class="una?.avatarGroup"
19
19
  >
20
20
  <NAvatarGroupDefaultSlot
package/dist/runtime/components/forms/Switch.vue CHANGED
@@ -1,117 +1,74 @@
1
1
  <script setup lang="ts">
2
2
  import type { NSwitchProps } from '../../types'
3
- import { Switch } from '@headlessui/vue'
4
- import { useVModel } from '@vueuse/core'
5
- import { computed } from 'vue'
3
+ import {
4
+ SwitchRoot,
5
+ type SwitchRootEmits,
6
+ SwitchThumb,
7
+ useForwardPropsEmits,
8
+ } from 'radix-vue'
9
+ import { cn } from '../../utils'
6
10
  import NIcon from '../elements/Icon.vue'
7
11
 
8
- defineOptions({
9
- inheritAttrs: false,
12
+ const props = withDefaults(defineProps<NSwitchProps>(), {
13
+ size: 'md',
14
+ switchChecked: 'primary',
15
+ switchUnchecked: 'gray',
10
16
  })
11
17
 
12
- const props = defineProps<NSwitchProps>()
18
+ const emit = defineEmits<SwitchRootEmits>()
13
19
 
14
- const emit = defineEmits<{ (...args: any): void }>()
15
-
16
- const on = useVModel(props, 'modelValue', emit, { passive: true })
17
-
18
- const _switch = computed(() => props.switch)
19
-
20
- const outsetClassVariants = computed(() => {
21
- const switchWrapper = {
22
- false: 'switch-inset',
23
- true: 'switch-outset',
24
- }
25
-
26
- const switchTrack = {
27
- false: 'switch-track-inset',
28
- true: 'switch-track-outset',
29
- }
30
-
31
- const switchThumb = {
32
- false: 'left-0.125em',
33
- true: 'left-0 border-base border',
34
- }
35
-
36
- return {
37
- switchWrapper: switchWrapper[!props.outset ? 'false' : 'true'],
38
- switchTrack: switchTrack[!props.outset ? 'false' : 'true'],
39
- switchThumb: switchThumb[!props.outset ? 'false' : 'true'],
40
- }
41
- })
42
-
43
- const onClassVariants = computed(() => {
44
- const switchTrack = {
45
- true: `${props.una?.switchTrackOn ?? ''} switch-track-on`,
46
- false: `${props.una?.switchTrackOff ?? ''} switch-track-off`,
47
- }
48
-
49
- const switchThumb = {
50
- true: `${props.una?.switchThumbOn ?? ''} switch-thumb-on`,
51
- false: `${props.una?.switchThumbOff ?? ''} switch-thumb-off`,
52
- }
53
-
54
- const switchIcon = {
55
- true: `${props.onIcon ?? ''} switch-icon-on`,
56
- false: `${props.offIcon ?? ''} switch-icon-off`,
57
- }
58
-
59
- return {
60
- switchTrack: switchTrack[on.value ? 'true' : 'false'],
61
- switchThumb: switchThumb[on.value ? 'true' : 'false'],
62
- switchIcon: switchIcon[on.value ? 'true' : 'false'],
63
- }
64
- })
20
+ const forwarded = useForwardPropsEmits(props, emit)
65
21
  </script>
66
22
 
67
23
  <template>
68
- <Switch
69
- v-model="on"
70
- class="switch"
71
- :class="[
72
- { 'switch-disabled': disabled || loading },
73
- outsetClassVariants?.switchWrapper,
74
- ]"
75
- :switch="_switch"
76
- v-bind="$attrs"
77
- :disabled="disabled"
24
+ <SwitchRoot
25
+ v-slot="{ checked }"
26
+ v-bind="forwarded"
27
+ :class="cn(
28
+ 'peer switch',
29
+ una?.switch,
30
+ checked
31
+ ? una?.switchChecked
32
+ : una?.switchUnchecked,
33
+ )"
34
+ :disabled="disabled || loading"
35
+ :switch-unchecked
36
+ :switch-checked
37
+ :size
78
38
  >
79
- <span class="sr-only">Track</span>
80
- <span
81
- aria-hidden="true"
82
- switch="track"
83
- :class="[
84
- una?.switchTrack,
85
- onClassVariants?.switchTrack,
86
- outsetClassVariants?.switchTrack,
87
- ]"
88
- />
89
-
90
- <span class="sr-only">Thumb</span>
91
- <span
92
- aria-hidden="true"
93
- switch="thumb"
94
- :class="[
39
+ <SwitchThumb
40
+ :class="cn(
41
+ 'switch-thumb',
95
42
  una?.switchThumb,
96
- onClassVariants?.switchThumb,
97
- outsetClassVariants?.switchThumb,
98
- ]"
43
+ checked
44
+ ? 'switch-thumb-checked'
45
+ : 'switch-thumb-unchecked',
46
+ checked
47
+ ? una?.switchThumbChecked
48
+ : una?.switchThumbUnchecked,
49
+ )"
99
50
  >
100
- <span class="sr-only">Icon</span>
101
- <slot v-if="!loading" name="icon" :on="on">
51
+ <slot v-if="!loading" name="icon" :checked>
102
52
  <NIcon
103
- switch="icon-base"
104
- :name="onClassVariants?.switchIcon"
105
- :class="una?.switchIconBase"
53
+ :name="(checked ? checkedIcon : uncheckedIcon) || icon"
54
+ :class="cn(
55
+ 'switch-icon',
56
+ una?.switchIcon,
57
+ checked
58
+ ? ['switch-icon-checked', una?.switchIconChecked]
59
+ : ['switch-icon-unchecked', una?.switchIconUnchecked],
60
+ )"
106
61
  />
107
62
  </slot>
108
- <slot v-else name="loading-icon" :on="on">
63
+ <slot v-else name="loading-icon" :checked>
109
64
  <NIcon
110
- switch="loading"
111
- :class="una?.switchLoading"
112
- :name="una?.switchloadingicon ?? 'switch-loading-icon'"
65
+ :class="cn(
66
+ 'switch-icon switch-loading-icon',
67
+ una?.switchLoading,
68
+ )"
69
+ :name="una?.switchLoadingIconName || 'switch-loading-icon-name'"
113
70
  />
114
71
  </slot>
115
- </span>
116
- </Switch>
72
+ </SwitchThumb>
73
+ </SwitchRoot>
117
74
  </template>
package/dist/runtime/types/switch.d.ts CHANGED
@@ -1,69 +1,77 @@
1
- export interface NSwitchProps {
1
+ import type { SwitchRootProps } from 'radix-vue';
2
+ import type { HTMLAttributes } from 'vue';
3
+ export interface NSwitchProps extends SwitchRootProps {
2
4
  /**
3
- * Value of the switch.
5
+ * Add a loading indicator to the switch.
6
+ * This will also disable the switch.
4
7
  *
5
- * @default null
8
+ * @default false
6
9
  */
7
- modelValue?: boolean;
10
+ loading?: boolean;
8
11
  /**
9
- * Disable the switch from being clicked.
12
+ * Allows you to display an icon. Equivalent of setting both `onIcon` and `offIcon`.
10
13
  *
11
- * @default false
14
+ * @example
15
+ * icon="i-heroicons-question-20-solid"
12
16
  */
13
- disabled?: boolean;
17
+ icon?: HTMLAttributes['class'];
14
18
  /**
15
- * Add a loading indicator to the switch.
16
- * This will also disable the switch.
19
+ * Allows you to display an icon when the switch is on.
20
+ * Accepts icon name and utility classes
17
21
  *
18
- * @default false
22
+ * @example
23
+ * on-icon="i-heroicons-check-20-solid text-white"
19
24
  */
20
- loading?: boolean;
25
+ checkedIcon?: HTMLAttributes['class'];
21
26
  /**
22
- * Display the slider thumb outside of the track.
27
+ * Allows you to display an icon when the switch is off.
28
+ * Accepts icon name and utility classes
23
29
  *
24
- * @default false
30
+ * @example
31
+ * off-icon="i-heroicons-x-mark-20-solid text-white"
25
32
  */
26
- outset?: boolean;
33
+ uncheckedIcon?: HTMLAttributes['class'];
27
34
  /**
28
- * Allows you to add `UnaUI` switch preset properties,
29
- * Think of it as a shortcut for adding options or variants to the preset if available.
35
+ * Allows you to change the size of the input.
36
+ *
37
+ * @default md
30
38
  *
31
39
  * @example
32
- * switch="xl green focus"
40
+ * size="sm" | size="2cm" | size="2rem" | size="2px"
33
41
  */
34
- switch?: string;
42
+ size?: HTMLAttributes['class'];
35
43
  /**
36
- * Allows you to display an icon when the switch is on.
37
- * Accepts icon name and utility classes
44
+ * Allows you to add `UnaUI` switch preset properties,
45
+ * Think of it as a shortcut for adding options or variants to the preset if available.
38
46
  *
39
47
  * @example
40
- * icon="i-heroicons-check-20-solid text-white"
48
+ * switch-checked="green"
41
49
  */
42
- onIcon?: string;
50
+ switchChecked?: HTMLAttributes['class'];
43
51
  /**
44
- * Allows you to display an icon when the switch is off.
45
- * Accepts icon name and utility classes
52
+ * Allows you to add `UnaUI` switch preset properties,
53
+ * Think of it as a shortcut for adding options or variants to the preset if available.
46
54
  *
47
55
  * @example
48
- * icon="i-heroicons-x-mark-20-solid text-white"
56
+ * switch-unchecked="gray"
49
57
  */
50
- offIcon?: string;
58
+ switchUnchecked?: HTMLAttributes['class'];
51
59
  /**
52
60
  * `UnaUI` preset configuration
53
61
  *
54
62
  * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/switch.ts
55
63
  */
56
64
  una?: {
57
- switchThumb?: string;
58
- switchThumbOn?: string;
59
- switchThumbOff?: string;
60
- switchTrack?: string;
61
- switchTrackOn?: string;
62
- switchTrackOff?: string;
63
- switchIconBase?: string;
64
- switchIconOn?: string;
65
- switchIconOff?: string;
66
- switchLoading?: string;
67
- switchloadingicon?: string;
65
+ switch?: HTMLAttributes['class'];
66
+ switchChecked?: HTMLAttributes['class'];
67
+ switchUnchecked?: HTMLAttributes['class'];
68
+ switchThumb?: HTMLAttributes['class'];
69
+ switchThumbChecked?: HTMLAttributes['class'];
70
+ switchThumbUnchecked?: HTMLAttributes['class'];
71
+ switchIcon?: HTMLAttributes['class'];
72
+ switchIconChecked?: HTMLAttributes['class'];
73
+ switchIconUnchecked?: HTMLAttributes['class'];
74
+ switchLoading?: HTMLAttributes['class'];
75
+ switchLoadingIconName?: HTMLAttributes['class'];
68
76
  };
69
77
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@una-ui/nuxt",
3
3
  "type": "module",
4
- "version": "0.24.0-beta.1",
4
+ "version": "0.25.0-beta.1",
5
5
  "description": "Nuxt module for @una-ui",
6
6
  "author": "Phojie Rengel <phojrengel@gmail.com>",
7
7
  "license": "MIT",
@@ -30,14 +30,14 @@
30
30
  "@iconify-json/heroicons": "^1.2.0",
31
31
  "@iconify-json/lucide": "^1.2.6",
32
32
  "@iconify-json/radix-icons": "^1.2.0",
33
- "@iconify-json/tabler": "^1.2.3",
33
+ "@iconify-json/tabler": "^1.2.4",
34
34
  "@nuxt/kit": "^3.13.2",
35
35
  "@nuxtjs/color-mode": "^3.5.1",
36
36
  "@tanstack/vue-table": "^8.20.5",
37
- "@unocss/core": "^0.62.4",
38
- "@unocss/nuxt": "^0.62.4",
39
- "@unocss/preset-attributify": "^0.62.4",
40
- "@unocss/preset-icons": "^0.62.4",
37
+ "@unocss/core": "^0.63.1",
38
+ "@unocss/nuxt": "^0.63.1",
39
+ "@unocss/preset-attributify": "^0.63.1",
40
+ "@unocss/preset-icons": "^0.63.1",
41
41
  "@vueuse/core": "^11.1.0",
42
42
  "@vueuse/integrations": "^11.1.0",
43
43
  "@vueuse/nuxt": "^11.1.0",
@@ -46,10 +46,10 @@
46
46
  "radix-vue": "^1.9.6",
47
47
  "tailwind-merge": "^2.5.2",
48
48
  "typescript": "^5.6.2",
49
- "unocss": "^0.62.4",
49
+ "unocss": "^0.63.1",
50
50
  "unocss-preset-animations": "^1.1.0",
51
- "@una-ui/preset": "^0.24.0-beta.1",
52
- "@una-ui/extractor-vue-script": "^0.24.0-beta.1"
51
+ "@una-ui/extractor-vue-script": "^0.25.0-beta.1",
52
+ "@una-ui/preset": "^0.25.0-beta.1"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@nuxt/module-builder": "^0.8.4",