@flux-ui/components 3.0.0-next.21 → 3.0.0-next.23

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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@flux-ui/components",
3
3
  "description": "A set of opiniated UI components.",
4
- "version": "3.0.0-next.21",
4
+ "version": "3.0.0-next.23",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "funding": "https://github.com/sponsors/basmilius",
@@ -51,26 +51,26 @@
51
51
  "typings": "./dist/index.d.ts",
52
52
  "sideEffects": false,
53
53
  "dependencies": {
54
- "@basmilius/utils": "^2.13.0",
55
- "@flux-ui/internals": "3.0.0-next.21",
56
- "@flux-ui/types": "3.0.0-next.21",
54
+ "@basmilius/utils": "^2.16.0",
55
+ "@flux-ui/internals": "3.0.0-next.23",
56
+ "@flux-ui/types": "3.0.0-next.23",
57
57
  "@fortawesome/fontawesome-common-types": "^7.1.0",
58
58
  "clsx": "^2.1.1",
59
59
  "imask": "^7.6.1",
60
60
  "lodash-es": "^4.17.21",
61
61
  "luxon": "^3.7.2",
62
- "vue": "^3.5.23"
62
+ "vue": "^3.5.25"
63
63
  },
64
64
  "devDependencies": {
65
- "@basmilius/vite-preset": "^2.13.0",
65
+ "@basmilius/vite-preset": "^2.16.0",
66
66
  "@types/lodash-es": "^4.17.12",
67
67
  "@types/luxon": "^3.7.1",
68
- "@types/node": "^24.10.0",
69
- "@vitejs/plugin-vue": "^6.0.1",
68
+ "@types/node": "^24.10.2",
69
+ "@vitejs/plugin-vue": "^6.0.2",
70
70
  "pinia": "^3.0.4",
71
- "sass-embedded": "^1.93.3",
71
+ "sass-embedded": "^1.95.1",
72
72
  "typescript": "^5.9.3",
73
- "vite": "^7.2.1",
74
- "vue-tsc": "^3.1.3"
73
+ "vite": "^8.0.0-beta.1",
74
+ "vue-tsc": "^3.1.8"
75
75
  }
76
76
  }
@@ -19,7 +19,7 @@
19
19
  <div :class="$styleDatePicker.datePickerMonths">
20
20
  <template
21
21
  v-for="month of months"
22
- :key="month">
22
+ :key="month.label">
23
23
  <FluxSecondaryButton
24
24
  :label="month.label"
25
25
  tabindex="-1"
@@ -57,8 +57,8 @@
57
57
  </template>
58
58
 
59
59
  <template
60
- v-for="date of dates"
61
- :key="date">
60
+ v-for="(date, index) of dates"
61
+ :key="index">
62
62
  <button
63
63
  :class="clsx(
64
64
  $style.datePickerDate,
@@ -89,7 +89,7 @@
89
89
  :class="$style.datePickerMonths">
90
90
  <template
91
91
  v-for="month of months"
92
- :key="month">
92
+ :key="month.label">
93
93
  <FluxSecondaryButton
94
94
  :disabled="!isWithinBoundary(month.date, 'month')"
95
95
  :label="month.label"
@@ -30,7 +30,7 @@
30
30
  <img
31
31
  :class="$style.menuItemImage"
32
32
  :src="imageSrc"
33
- alt=""/>
33
+ :alt="imageAlt ?? ''"/>
34
34
  </template>
35
35
 
36
36
  <template
@@ -74,6 +74,7 @@
74
74
  readonly command?: string;
75
75
  readonly commandIcon?: FluxIconName;
76
76
  readonly commandLoading?: boolean;
77
+ readonly imageAlt?: string;
77
78
  readonly imageSrc?: string;
78
79
  readonly isActive?: boolean;
79
80
  readonly isDestructive?: boolean;
@@ -154,6 +154,10 @@
154
154
  py = y - popupHeight - margin;
155
155
  }
156
156
  }
157
+
158
+ if (py < 0 || py + popupHeight > innerHeight) {
159
+ py = innerHeight / 2 - popupHeight / 2;
160
+ }
157
161
  break;
158
162
  }
159
163
 
@@ -21,6 +21,8 @@
21
21
  :command="selected[0].command"
22
22
  :command-icon="selected[0].commandIcon"
23
23
  :icon-leading="selected[0].icon"
24
+ :image-alt="selected[0].imageAlt"
25
+ :image-src="selected[0].imageSrc"
24
26
  :label="selected[0].label"
25
27
  tabindex="-1"/>
26
28
  </template>
@@ -97,6 +99,8 @@
97
99
  :command="subItem.command"
98
100
  :command-icon="subItem.commandIcon"
99
101
  :icon-leading="subItem.icon"
102
+ :image-alt="subItem.imageAlt"
103
+ :image-src="subItem.imageSrc"
100
104
  :is-active="!!selected.find(so => so.value === subItem.value)"
101
105
  :is-highlighted="highlightedId === subItem.value"
102
106
  :label="subItem.label"
@@ -112,6 +116,8 @@
112
116
  :command="item.command"
113
117
  :command-icon="item.commandIcon"
114
118
  :icon-leading="item.icon"
119
+ :image-alt="item.imageAlt"
120
+ :image-src="item.imageSrc"
115
121
  :is-active="!!selected.find(so => so.value === item.value)"
116
122
  :is-highlighted="highlightedId === item.value"
117
123
  :label="item.label"
@@ -17,19 +17,31 @@ $-breakpoints: (
17
17
  @error 'Breakpoint "#{$breakpoint}" not found in "#{$names}".';
18
18
  }
19
19
 
20
- @return if($n < list.length($names), list.nth($names, $n + 1), null);
20
+ @if $n < list.length($names) {
21
+ @return list.nth($names, $n + 1);
22
+ }
23
+
24
+ @return null;
21
25
  }
22
26
 
23
27
  @function -maxWidth($breakpoint) {
24
28
  $next: -next($breakpoint);
25
29
 
26
- @return if($next, -minWidth($next) - .02, null);
30
+ @if $next {
31
+ @return -minWidth($next) - .02;
32
+ }
33
+
34
+ @return null;
27
35
  }
28
36
 
29
37
  @function -minWidth($breakpoint) {
30
38
  $min: map.get($-breakpoints, $breakpoint);
31
39
 
32
- @return if($min != 0, $min, null);
40
+ @if $min != 0 {
41
+ @return $min;
42
+ }
43
+
44
+ @return null;
33
45
  }
34
46
 
35
47
  @mixin breakpoint-between($lower, $upper) {