opui-css 5.4.2 → 5.4.3

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 (328) hide show
  1. package/CHANGELOG.md +373 -367
  2. package/LICENSE +21 -21
  3. package/MIGRATING.md +138 -138
  4. package/README.md +87 -87
  5. package/astro/index.ts +46 -46
  6. package/components/AGENTS.md +247 -247
  7. package/components/Accordion/Accordion.astro +48 -48
  8. package/components/Accordion/Accordion.vue +38 -38
  9. package/components/Accordion/types.astro.ts +4 -4
  10. package/components/Accordion/types.d.vue.ts +15 -15
  11. package/components/Accordion/types.solid.ts +6 -6
  12. package/components/Accordion/types.svelte.ts +7 -7
  13. package/components/Accordion/types.ts +10 -10
  14. package/components/Anchor/Anchor.astro +49 -49
  15. package/components/Anchor/Anchor.vue +41 -41
  16. package/components/Anchor/types.astro.ts +4 -4
  17. package/components/Anchor/types.d.vue.ts +10 -10
  18. package/components/Anchor/types.solid.ts +6 -6
  19. package/components/Anchor/types.svelte.ts +7 -7
  20. package/components/Anchor/types.ts +9 -9
  21. package/components/Avatar/Avatar.astro +29 -29
  22. package/components/Avatar/Avatar.vue +24 -24
  23. package/components/Avatar/types.astro.ts +10 -10
  24. package/components/Avatar/types.d.vue.ts +12 -12
  25. package/components/Avatar/types.solid.ts +11 -11
  26. package/components/Avatar/types.svelte.ts +12 -12
  27. package/components/Avatar/types.ts +29 -29
  28. package/components/Badge/Badge.astro +51 -51
  29. package/components/Badge/Badge.vue +40 -40
  30. package/components/Badge/types.astro.ts +4 -4
  31. package/components/Badge/types.d.vue.ts +10 -10
  32. package/components/Badge/types.solid.ts +4 -4
  33. package/components/Badge/types.svelte.ts +4 -4
  34. package/components/Badge/types.ts +12 -12
  35. package/components/Button/Button.astro +36 -36
  36. package/components/Button/Button.vue +27 -27
  37. package/components/Button/types.astro.ts +6 -6
  38. package/components/Button/types.d.vue.ts +10 -10
  39. package/components/Button/types.solid.ts +8 -8
  40. package/components/Button/types.svelte.ts +6 -6
  41. package/components/Button/types.ts +16 -16
  42. package/components/ButtonGroup/ButtonGroup.astro +29 -29
  43. package/components/ButtonGroup/ButtonGroup.vue +22 -22
  44. package/components/ButtonGroup/types.astro.ts +4 -4
  45. package/components/ButtonGroup/types.d.vue.ts +10 -10
  46. package/components/ButtonGroup/types.solid.ts +4 -4
  47. package/components/ButtonGroup/types.svelte.ts +4 -4
  48. package/components/ButtonGroup/types.ts +7 -7
  49. package/components/Callout/Callout.astro +76 -76
  50. package/components/Callout/Callout.vue +63 -63
  51. package/components/Callout/types.astro.ts +4 -4
  52. package/components/Callout/types.d.vue.ts +10 -10
  53. package/components/Callout/types.solid.ts +6 -6
  54. package/components/Callout/types.svelte.ts +7 -7
  55. package/components/Callout/types.ts +10 -10
  56. package/components/Card/Card.astro +34 -34
  57. package/components/Card/Card.vue +28 -28
  58. package/components/Card/types.astro.ts +4 -4
  59. package/components/Card/types.d.vue.ts +10 -10
  60. package/components/Card/types.solid.ts +6 -6
  61. package/components/Card/types.svelte.ts +7 -7
  62. package/components/Card/types.ts +11 -11
  63. package/components/Checkbox/Checkbox.astro +46 -46
  64. package/components/Checkbox/Checkbox.vue +43 -43
  65. package/components/Checkbox/CheckboxInput.astro +16 -16
  66. package/components/Checkbox/CheckboxInput.vue +32 -32
  67. package/components/Checkbox/types.astro.ts +8 -8
  68. package/components/Checkbox/types.d.vue.ts +11 -11
  69. package/components/Checkbox/types.solid.ts +9 -9
  70. package/components/Checkbox/types.svelte.ts +12 -12
  71. package/components/Checkbox/types.ts +16 -16
  72. package/components/Chip/Chip.astro +31 -31
  73. package/components/Chip/Chip.vue +37 -37
  74. package/components/Chip/types.astro.ts +9 -9
  75. package/components/Chip/types.d.vue.ts +10 -10
  76. package/components/Chip/types.solid.ts +10 -10
  77. package/components/Chip/types.svelte.ts +14 -14
  78. package/components/Chip/types.ts +13 -13
  79. package/components/ClassicSelect/ClassicSelect.astro +60 -60
  80. package/components/ClassicSelect/ClassicSelect.vue +54 -54
  81. package/components/ClassicSelect/types.d.vue.ts +10 -10
  82. package/components/ClassicSelect/types.ts +15 -15
  83. package/components/DescriptionList/Description.astro +9 -9
  84. package/components/DescriptionList/Description.vue +12 -12
  85. package/components/DescriptionList/DescriptionList.astro +18 -18
  86. package/components/DescriptionList/DescriptionList.vue +23 -23
  87. package/components/DescriptionList/Item.astro +9 -9
  88. package/components/DescriptionList/Item.vue +12 -12
  89. package/components/DescriptionList/Term.astro +9 -9
  90. package/components/DescriptionList/Term.vue +12 -12
  91. package/components/DescriptionList/index.ts +12 -12
  92. package/components/DescriptionList/types.astro.ts +10 -10
  93. package/components/DescriptionList/types.d.vue.ts +10 -10
  94. package/components/DescriptionList/types.solid.ts +4 -4
  95. package/components/DescriptionList/types.svelte.ts +4 -4
  96. package/components/DescriptionList/types.ts +3 -3
  97. package/components/Dialog/Dialog.astro +38 -38
  98. package/components/Dialog/Dialog.vue +35 -35
  99. package/components/Dialog/types.astro.ts +4 -4
  100. package/components/Dialog/types.d.vue.ts +10 -10
  101. package/components/Dialog/types.solid.ts +8 -8
  102. package/components/Dialog/types.svelte.ts +7 -7
  103. package/components/Dialog/types.ts +10 -10
  104. package/components/Divider/Divider.astro +12 -12
  105. package/components/Divider/Divider.vue +12 -12
  106. package/components/Divider/types.astro.ts +4 -4
  107. package/components/Divider/types.d.vue.ts +6 -6
  108. package/components/Divider/types.solid.ts +4 -4
  109. package/components/Divider/types.svelte.ts +4 -4
  110. package/components/Divider/types.ts +3 -3
  111. package/components/Drawer/Drawer.astro +47 -47
  112. package/components/Drawer/Drawer.vue +46 -46
  113. package/components/Drawer/DrawerFooter.astro +11 -11
  114. package/components/Drawer/DrawerFooter.vue +16 -16
  115. package/components/Drawer/DrawerHeader.astro +27 -27
  116. package/components/Drawer/DrawerHeader.vue +36 -36
  117. package/components/Drawer/types.astro.ts +8 -8
  118. package/components/Drawer/types.d.vue.ts +31 -31
  119. package/components/Drawer/types.solid.ts +12 -12
  120. package/components/Drawer/types.svelte.ts +15 -15
  121. package/components/Drawer/types.ts +20 -20
  122. package/components/FieldDescription/FieldDescription.astro +9 -9
  123. package/components/FieldDescription/FieldDescription.vue +12 -12
  124. package/components/FieldDescription/types.astro.ts +4 -4
  125. package/components/FieldDescription/types.d.vue.ts +10 -10
  126. package/components/FieldDescription/types.solid.ts +5 -5
  127. package/components/FieldDescription/types.svelte.ts +4 -4
  128. package/components/FieldDescription/types.ts +1 -1
  129. package/components/FieldGroup/FieldGroup.astro +24 -24
  130. package/components/FieldGroup/FieldGroup.vue +25 -25
  131. package/components/FieldGroup/types.astro.ts +4 -4
  132. package/components/FieldGroup/types.d.vue.ts +12 -12
  133. package/components/FieldGroup/types.solid.ts +5 -5
  134. package/components/FieldGroup/types.svelte.ts +4 -4
  135. package/components/FieldGroup/types.ts +4 -4
  136. package/components/FieldLegend/FieldLegend.astro +11 -11
  137. package/components/FieldLegend/FieldLegend.vue +18 -18
  138. package/components/FieldLegend/types.astro.ts +6 -6
  139. package/components/FieldLegend/types.d.vue.ts +11 -11
  140. package/components/FieldLegend/types.solid.ts +5 -5
  141. package/components/FieldLegend/types.svelte.ts +6 -6
  142. package/components/FieldLegend/types.ts +1 -1
  143. package/components/FieldSet/FieldSet.astro +11 -11
  144. package/components/FieldSet/FieldSet.vue +18 -18
  145. package/components/FieldSet/types.astro.ts +6 -6
  146. package/components/FieldSet/types.d.vue.ts +11 -11
  147. package/components/FieldSet/types.solid.ts +5 -5
  148. package/components/FieldSet/types.svelte.ts +8 -8
  149. package/components/FieldSet/types.ts +5 -5
  150. package/components/Form/Form.astro +10 -10
  151. package/components/Form/Form.vue +14 -14
  152. package/components/Form/types.astro.ts +6 -6
  153. package/components/Form/types.d.vue.ts +11 -11
  154. package/components/Form/types.solid.ts +5 -5
  155. package/components/Form/types.svelte.ts +7 -7
  156. package/components/Form/types.ts +1 -1
  157. package/components/IconButton/IconButton.astro +24 -24
  158. package/components/IconButton/IconButton.vue +24 -24
  159. package/components/IconButton/types.astro.ts +6 -6
  160. package/components/IconButton/types.d.vue.ts +10 -10
  161. package/components/IconButton/types.solid.ts +8 -8
  162. package/components/IconButton/types.svelte.ts +6 -6
  163. package/components/IconButton/types.ts +16 -16
  164. package/components/List/List.astro +29 -29
  165. package/components/List/List.vue +28 -28
  166. package/components/List/types.astro.ts +4 -4
  167. package/components/List/types.d.vue.ts +10 -10
  168. package/components/List/types.solid.ts +4 -4
  169. package/components/List/types.svelte.ts +4 -4
  170. package/components/List/types.ts +7 -7
  171. package/components/ListItem/ListItem.astro +108 -108
  172. package/components/ListItem/ListItem.vue +98 -98
  173. package/components/ListItem/types.astro.ts +10 -10
  174. package/components/ListItem/types.d.vue.ts +10 -10
  175. package/components/ListItem/types.solid.ts +12 -12
  176. package/components/ListItem/types.svelte.ts +14 -14
  177. package/components/ListItem/types.ts +32 -32
  178. package/components/Progress/Progress.astro +31 -31
  179. package/components/Progress/Progress.vue +34 -34
  180. package/components/Progress/types.astro.ts +4 -4
  181. package/components/Progress/types.d.vue.ts +10 -10
  182. package/components/Progress/types.solid.ts +4 -4
  183. package/components/Progress/types.svelte.ts +4 -4
  184. package/components/Progress/types.ts +10 -10
  185. package/components/Radio/Radio.astro +44 -44
  186. package/components/Radio/Radio.vue +41 -41
  187. package/components/Radio/RadioInput.astro +7 -7
  188. package/components/Radio/RadioInput.vue +14 -14
  189. package/components/Radio/types.astro.ts +6 -6
  190. package/components/Radio/types.d.vue.ts +11 -11
  191. package/components/Radio/types.solid.ts +9 -9
  192. package/components/Radio/types.svelte.ts +12 -12
  193. package/components/Radio/types.ts +12 -12
  194. package/components/Range/Range.astro +128 -128
  195. package/components/Range/Range.vue +85 -85
  196. package/components/Range/types.ts +25 -25
  197. package/components/Select/Select.astro +108 -108
  198. package/components/Select/Select.vue +85 -85
  199. package/components/Switch/Switch.astro +76 -76
  200. package/components/Switch/Switch.vue +63 -63
  201. package/components/Switch/SwitchInput.astro +7 -7
  202. package/components/Switch/SwitchInput.vue +14 -14
  203. package/components/Switch/types.astro.ts +5 -5
  204. package/components/Switch/types.d.vue.ts +13 -13
  205. package/components/Switch/types.solid.ts +9 -9
  206. package/components/Switch/types.svelte.ts +9 -9
  207. package/components/Switch/types.ts +16 -16
  208. package/components/Table/Body.astro +11 -11
  209. package/components/Table/Body.vue +5 -5
  210. package/components/Table/Cell.astro +11 -11
  211. package/components/Table/Cell.vue +5 -5
  212. package/components/Table/Column.astro +12 -12
  213. package/components/Table/Column.vue +19 -19
  214. package/components/Table/ColumnGroup.astro +11 -11
  215. package/components/Table/ColumnGroup.vue +5 -5
  216. package/components/Table/Head.astro +11 -11
  217. package/components/Table/Head.vue +5 -5
  218. package/components/Table/HeaderCell.astro +11 -11
  219. package/components/Table/HeaderCell.vue +5 -5
  220. package/components/Table/Row.astro +11 -11
  221. package/components/Table/Row.vue +5 -5
  222. package/components/Table/Table.astro +14 -14
  223. package/components/Table/Table.vue +19 -19
  224. package/components/Table/index.ts +20 -20
  225. package/components/Table/types.astro.ts +16 -16
  226. package/components/Table/types.d.vue.ts +10 -10
  227. package/components/Table/types.solid.ts +8 -8
  228. package/components/Table/types.svelte.ts +11 -11
  229. package/components/Table/types.ts +9 -9
  230. package/components/Tabs/Tabs.astro +24 -24
  231. package/components/Tabs/Tabs.vue +20 -20
  232. package/components/Tabs/TabsItem.astro +40 -40
  233. package/components/Tabs/TabsItem.vue +39 -39
  234. package/components/Tabs/TabsPanel.astro +16 -16
  235. package/components/Tabs/TabsPanel.vue +31 -31
  236. package/components/Tabs/TabsTab.astro +15 -15
  237. package/components/Tabs/TabsTab.vue +24 -24
  238. package/components/Tabs/index.ts +14 -14
  239. package/components/Tabs/types.astro.ts +11 -11
  240. package/components/Tabs/types.d.vue.ts +31 -31
  241. package/components/Tabs/types.solid.ts +12 -12
  242. package/components/Tabs/types.svelte.ts +10 -10
  243. package/components/Tabs/types.ts +19 -19
  244. package/components/TextField/TextField.astro +124 -124
  245. package/components/TextField/TextField.vue +74 -74
  246. package/components/TextField/types.astro.ts +17 -17
  247. package/components/Textarea/Textarea.astro +118 -118
  248. package/components/Textarea/Textarea.vue +64 -64
  249. package/components/Textarea/types.astro.ts +10 -10
  250. package/components/Textarea/types.d.vue.ts +19 -19
  251. package/components/Textarea/types.solid.ts +6 -6
  252. package/components/Textarea/types.svelte.ts +21 -21
  253. package/components/Textarea/types.ts +33 -33
  254. package/components/Toast/Toast.astro +42 -42
  255. package/components/Toast/Toast.vue +48 -48
  256. package/components/ToggleButton/ToggleButton.astro +43 -43
  257. package/components/ToggleButton/ToggleButton.vue +41 -41
  258. package/components/ToggleButton/types.astro.ts +4 -4
  259. package/components/ToggleButton/types.d.vue.ts +10 -10
  260. package/components/ToggleButton/types.solid.ts +7 -7
  261. package/components/ToggleButton/types.svelte.ts +7 -7
  262. package/components/ToggleButton/types.ts +10 -10
  263. package/components/ToggleGroup/ToggleGroup.astro +42 -42
  264. package/components/ToggleGroup/ToggleGroup.vue +36 -36
  265. package/components/ToggleGroup/types.astro.ts +4 -4
  266. package/components/ToggleGroup/types.d.vue.ts +15 -15
  267. package/components/ToggleGroup/types.solid.ts +4 -4
  268. package/components/ToggleGroup/types.svelte.ts +9 -9
  269. package/components/ToggleGroup/types.ts +15 -15
  270. package/components/Tooltip/Tooltip.astro +23 -23
  271. package/components/Tooltip/Tooltip.vue +22 -22
  272. package/components/Tooltip/types.astro.ts +4 -4
  273. package/components/Tooltip/types.d.vue.ts +10 -10
  274. package/components/Tooltip/types.solid.ts +6 -6
  275. package/components/Tooltip/types.svelte.ts +7 -7
  276. package/components/Tooltip/types.ts +11 -11
  277. package/core/normalize.css +214 -214
  278. package/core/palette.css +314 -314
  279. package/core/utils.css +68 -68
  280. package/css/components/accordion.css +173 -173
  281. package/css/components/anchor.css +27 -27
  282. package/css/components/avatar.css +65 -65
  283. package/css/components/badge.css +107 -107
  284. package/css/components/button-group.css +179 -179
  285. package/css/components/button.css +212 -212
  286. package/css/components/callout.css +112 -112
  287. package/css/components/card.css +116 -116
  288. package/css/components/checkbox.css +211 -211
  289. package/css/components/chip.css +92 -92
  290. package/css/components/description-list.css +81 -81
  291. package/css/components/dialog.css +64 -64
  292. package/css/components/divider.css +20 -20
  293. package/css/components/drawer.css +170 -170
  294. package/css/components/form.css +146 -146
  295. package/css/components/icon-button.css +139 -139
  296. package/css/components/link.css +21 -21
  297. package/css/components/list.css +343 -343
  298. package/css/components/progress.css +99 -99
  299. package/css/components/radio.css +170 -170
  300. package/css/components/range.css +320 -320
  301. package/css/components/select.css +170 -170
  302. package/css/components/spinner.css +38 -38
  303. package/css/components/switch.css +270 -270
  304. package/css/components/table.css +173 -173
  305. package/css/components/tabs.css +84 -84
  306. package/css/components/text-field.css +449 -449
  307. package/css/components/text-input.css +68 -68
  308. package/css/components/textarea.css +26 -26
  309. package/css/components/toast.css +157 -157
  310. package/css/components/toggle-button.css +91 -91
  311. package/css/components/toggle-group.css +56 -56
  312. package/css/components/tooltip.css +68 -68
  313. package/css/components/typography.css +580 -580
  314. package/css/components.css +41 -41
  315. package/css/imports.css +17 -17
  316. package/css/js/checkbox.js +21 -21
  317. package/css/js/toast.js +94 -94
  318. package/css/theme.css +124 -124
  319. package/dist/op.css +4 -4
  320. package/dist/op.css.map +1 -1
  321. package/dist/opui.components.css +5140 -5140
  322. package/dist/opui.components.css.map +1 -1
  323. package/dist/opui.css +5907 -5907
  324. package/dist/opui.css.map +1 -1
  325. package/env.d.ts +14 -14
  326. package/open-props.css +6 -6
  327. package/package.json +90 -90
  328. package/vue/index.ts +54 -54
@@ -1,4 +1,4 @@
1
- import type * as Base from "./types"
2
- import type { HTMLAttributes } from "astro/types"
3
-
4
- export type Props = Base.Props & Omit<HTMLAttributes<"input">, "size" | "type">
1
+ import type * as Base from "./types"
2
+ import type { HTMLAttributes } from "astro/types"
3
+
4
+ export type Props = Base.Props & Omit<HTMLAttributes<"input">, "size" | "type">
@@ -1,10 +1,10 @@
1
- import type { HTMLAttributes, Slot } from "vue"
2
- import type { Props as BaseProps } from "./types"
3
-
4
- export type Props = BaseProps & {
5
- class?: HTMLAttributes["class"]
6
- }
7
-
8
- export type Slots = {
9
- default?: Slot
10
- }
1
+ import type { HTMLAttributes, Slot } from "vue"
2
+ import type { Props as BaseProps } from "./types"
3
+
4
+ export type Props = BaseProps & {
5
+ class?: HTMLAttributes["class"]
6
+ }
7
+
8
+ export type Slots = {
9
+ default?: Slot
10
+ }
@@ -1,7 +1,7 @@
1
- import type * as Base from "./types"
2
- import type { JSX } from "solid-js"
3
-
4
- export type Props = Base.Props &
5
- Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
6
- type?: "checkbox" | "radio"
7
- }
1
+ import type * as Base from "./types"
2
+ import type { JSX } from "solid-js"
3
+
4
+ export type Props = Base.Props &
5
+ Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
6
+ type?: "checkbox" | "radio"
7
+ }
@@ -1,7 +1,7 @@
1
- import type { Snippet } from "svelte"
2
- import type * as Base from "./types"
3
- import type { SvelteHTMLElements } from "svelte/elements"
4
-
5
- export type Props = Base.Props &
6
- Base.Slots<Snippet> &
7
- Omit<SvelteHTMLElements["input"], "size" | "type">
1
+ import type { Snippet } from "svelte"
2
+ import type * as Base from "./types"
3
+ import type { SvelteHTMLElements } from "svelte/elements"
4
+
5
+ export type Props = Base.Props &
6
+ Base.Slots<Snippet> &
7
+ Omit<SvelteHTMLElements["input"], "size" | "type">
@@ -1,10 +1,10 @@
1
- export type Props = {
2
- label?: string
3
- pressed?: boolean
4
- size?: "small" | "x-small"
5
- type?: "checkbox" | "radio"
6
- }
7
-
8
- export type Slots<S> = {
9
- children?: S
10
- }
1
+ export type Props = {
2
+ label?: string
3
+ pressed?: boolean
4
+ size?: "small" | "x-small"
5
+ type?: "checkbox" | "radio"
6
+ }
7
+
8
+ export type Slots<S> = {
9
+ children?: S
10
+ }
@@ -1,42 +1,42 @@
1
- ---
2
- import type { Props } from "./types.astro"
3
-
4
- export const title = "Toggle Group"
5
-
6
- const {
7
- class: className,
8
- name,
9
- orientation,
10
- selection = "multiple",
11
- size = "default",
12
- ...rest
13
- } = Astro.props
14
-
15
- const { $id } = Astro.locals
16
- const groupName = name || $id("toggle-group")
17
- const inputType = selection === "single" ? "radio" : "checkbox"
18
-
19
- const originalName = Astro.locals.currentToggleGroupName
20
- const originalType = Astro.locals.currentToggleGroupType
21
-
22
- Astro.locals.currentToggleGroupName = groupName
23
- Astro.locals.currentToggleGroupType = inputType
24
-
25
- const html = await Astro.slots.render("default")
26
-
27
- Astro.locals.currentToggleGroupName = originalName
28
- Astro.locals.currentToggleGroupType = originalType
29
- ---
30
-
31
- <div
32
- class:list={[
33
- "ui-toggle-group",
34
- size !== "default" && size && `ui-${size}`,
35
- orientation && `ui-${orientation}`,
36
- className,
37
- ]}
38
- role={selection === "single" ? "radiogroup" : "group"}
39
- {...rest}
40
- >
41
- <Fragment set:html={html} />
42
- </div>
1
+ ---
2
+ import type { Props } from "./types.astro"
3
+
4
+ export const title = "Toggle Group"
5
+
6
+ const {
7
+ class: className,
8
+ name,
9
+ orientation,
10
+ selection = "multiple",
11
+ size = "default",
12
+ ...rest
13
+ } = Astro.props
14
+
15
+ const { $id } = Astro.locals
16
+ const groupName = name || $id("toggle-group")
17
+ const inputType = selection === "single" ? "radio" : "checkbox"
18
+
19
+ const originalName = Astro.locals.currentToggleGroupName
20
+ const originalType = Astro.locals.currentToggleGroupType
21
+
22
+ Astro.locals.currentToggleGroupName = groupName
23
+ Astro.locals.currentToggleGroupType = inputType
24
+
25
+ const html = await Astro.slots.render("default")
26
+
27
+ Astro.locals.currentToggleGroupName = originalName
28
+ Astro.locals.currentToggleGroupType = originalType
29
+ ---
30
+
31
+ <div
32
+ class:list={[
33
+ "ui-toggle-group",
34
+ size !== "default" && size && `ui-${size}`,
35
+ orientation && `ui-${orientation}`,
36
+ className,
37
+ ]}
38
+ role={selection === "single" ? "radiogroup" : "group"}
39
+ {...rest}
40
+ >
41
+ <Fragment set:html={html} />
42
+ </div>
@@ -1,36 +1,36 @@
1
- <script setup lang="ts">
2
- import { provide, useId } from "vue"
3
- import { ToggleGroupKey, type Props, type Slots } from "./types.d.vue"
4
-
5
- const {
6
- name,
7
- orientation,
8
- selection = "multiple",
9
- size = "default",
10
- } = defineProps<Props>()
11
- defineSlots<Slots>()
12
-
13
- defineOptions({
14
- inheritAttrs: false,
15
- })
16
-
17
- const groupName = name || useId()
18
- const inputType = selection === "single" ? "radio" : "checkbox"
19
-
20
- provide(ToggleGroupKey, { name: groupName, type: inputType })
21
- </script>
22
-
23
- <template>
24
- <div
25
- :class="[
26
- 'ui-toggle-group',
27
- size !== 'default' && size && `ui-${size}`,
28
- orientation && `ui-${orientation}`,
29
- $props.class,
30
- ]"
31
- :role="selection === 'single' ? 'radiogroup' : 'group'"
32
- v-bind="$attrs"
33
- >
34
- <slot></slot>
35
- </div>
36
- </template>
1
+ <script setup lang="ts">
2
+ import { provide, useId } from "vue"
3
+ import { ToggleGroupKey, type Props, type Slots } from "./types.d.vue"
4
+
5
+ const {
6
+ name,
7
+ orientation,
8
+ selection = "multiple",
9
+ size = "default",
10
+ } = defineProps<Props>()
11
+ defineSlots<Slots>()
12
+
13
+ defineOptions({
14
+ inheritAttrs: false,
15
+ })
16
+
17
+ const groupName = name || useId()
18
+ const inputType = selection === "single" ? "radio" : "checkbox"
19
+
20
+ provide(ToggleGroupKey, { name: groupName, type: inputType })
21
+ </script>
22
+
23
+ <template>
24
+ <div
25
+ :class="[
26
+ 'ui-toggle-group',
27
+ size !== 'default' && size && `ui-${size}`,
28
+ orientation && `ui-${orientation}`,
29
+ $props.class,
30
+ ]"
31
+ :role="selection === 'single' ? 'radiogroup' : 'group'"
32
+ v-bind="$attrs"
33
+ >
34
+ <slot></slot>
35
+ </div>
36
+ </template>
@@ -1,4 +1,4 @@
1
- import type * as Base from "./types"
2
- import type { HTMLAttributes } from "astro/types"
3
-
4
- export type Props = Base.Props & Omit<HTMLAttributes<"div">, "size">
1
+ import type * as Base from "./types"
2
+ import type { HTMLAttributes } from "astro/types"
3
+
4
+ export type Props = Base.Props & Omit<HTMLAttributes<"div">, "size">
@@ -1,15 +1,15 @@
1
- import type { HTMLAttributes, InjectionKey, Slot } from "vue"
2
- import type { Props as BaseProps } from "./types"
3
-
4
- export type Props = BaseProps & {
5
- class?: HTMLAttributes["class"]
6
- }
7
-
8
- export type Slots = {
9
- default?: Slot
10
- }
11
-
12
- export const ToggleGroupKey = Symbol() as InjectionKey<{
13
- name: string
14
- type: "radio" | "checkbox"
15
- }>
1
+ import type { HTMLAttributes, InjectionKey, Slot } from "vue"
2
+ import type { Props as BaseProps } from "./types"
3
+
4
+ export type Props = BaseProps & {
5
+ class?: HTMLAttributes["class"]
6
+ }
7
+
8
+ export type Slots = {
9
+ default?: Slot
10
+ }
11
+
12
+ export const ToggleGroupKey = Symbol() as InjectionKey<{
13
+ name: string
14
+ type: "radio" | "checkbox"
15
+ }>
@@ -1,4 +1,4 @@
1
- import type * as Base from "./types"
2
- import type { JSX } from "solid-js"
3
-
4
- export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>
1
+ import type * as Base from "./types"
2
+ import type { JSX } from "solid-js"
3
+
4
+ export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>
@@ -1,9 +1,9 @@
1
- import type { Snippet } from "svelte"
2
- import type * as Base from "./types"
3
- import type { SvelteHTMLElements } from "svelte/elements"
4
-
5
- export type Props = Base.Props &
6
- Base.Slots<Snippet> &
7
- Omit<SvelteHTMLElements["div"], "size">
8
-
9
- export type { ToggleContext } from "./types"
1
+ import type { Snippet } from "svelte"
2
+ import type * as Base from "./types"
3
+ import type { SvelteHTMLElements } from "svelte/elements"
4
+
5
+ export type Props = Base.Props &
6
+ Base.Slots<Snippet> &
7
+ Omit<SvelteHTMLElements["div"], "size">
8
+
9
+ export type { ToggleContext } from "./types"
@@ -1,15 +1,15 @@
1
- export type Props = {
2
- name?: string
3
- orientation?: "vertical"
4
- selection?: "single" | "multiple"
5
- size?: "default" | "small" | "x-small"
6
- }
7
-
8
- export type Slots<S> = {
9
- children: S
10
- }
11
-
12
- export type ToggleContext = {
13
- groupName: string
14
- inputType: "radio" | "checkbox"
15
- }
1
+ export type Props = {
2
+ name?: string
3
+ orientation?: "vertical"
4
+ selection?: "single" | "multiple"
5
+ size?: "default" | "small" | "x-small"
6
+ }
7
+
8
+ export type Slots<S> = {
9
+ children: S
10
+ }
11
+
12
+ export type ToggleContext = {
13
+ groupName: string
14
+ inputType: "radio" | "checkbox"
15
+ }
@@ -1,23 +1,23 @@
1
- ---
2
- import type { Props } from "./types.astro"
3
-
4
- import Anchor from "../Anchor/Anchor.astro"
5
-
6
- export const title = "Tooltip"
7
-
8
- const { alignment, arrow, class: className, id, label, ...rest } = Astro.props
9
- ---
10
-
11
- <Anchor
12
- alignment={alignment}
13
- class:list={["ui-tooltip", { "ui-with-arrow": arrow }, className]}
14
- id={id}
15
- trigger="hover"
16
- {...rest}
17
- >
18
- <slot />
19
- <Fragment slot="anchored">
20
- {label}
21
- <slot name="content" />
22
- </Fragment>
23
- </Anchor>
1
+ ---
2
+ import type { Props } from "./types.astro"
3
+
4
+ import Anchor from "../Anchor/Anchor.astro"
5
+
6
+ export const title = "Tooltip"
7
+
8
+ const { alignment, arrow, class: className, id, label, ...rest } = Astro.props
9
+ ---
10
+
11
+ <Anchor
12
+ alignment={alignment}
13
+ class:list={["ui-tooltip", { "ui-with-arrow": arrow }, className]}
14
+ id={id}
15
+ trigger="hover"
16
+ {...rest}
17
+ >
18
+ <slot />
19
+ <Fragment slot="anchored">
20
+ {label}
21
+ <slot name="content" />
22
+ </Fragment>
23
+ </Anchor>
@@ -1,22 +1,22 @@
1
- <script setup lang="ts">
2
- import Anchor from "../Anchor/Anchor.vue"
3
- import type { Props, Slots } from "./types.d.vue"
4
-
5
- const { alignment, arrow, id, label } = defineProps<Props>()
6
- defineSlots<Slots>()
7
- </script>
8
-
9
- <template>
10
- <Anchor
11
- :alignment="alignment"
12
- :class="['ui-tooltip', { 'ui-with-arrow': arrow }, $props.class]"
13
- :id="id"
14
- trigger="hover"
15
- >
16
- <slot></slot>
17
- <template #anchored>
18
- {{ label }}
19
- <slot name="content"></slot>
20
- </template>
21
- </Anchor>
22
- </template>
1
+ <script setup lang="ts">
2
+ import Anchor from "../Anchor/Anchor.vue"
3
+ import type { Props, Slots } from "./types.d.vue"
4
+
5
+ const { alignment, arrow, id, label } = defineProps<Props>()
6
+ defineSlots<Slots>()
7
+ </script>
8
+
9
+ <template>
10
+ <Anchor
11
+ :alignment="alignment"
12
+ :class="['ui-tooltip', { 'ui-with-arrow': arrow }, $props.class]"
13
+ :id="id"
14
+ trigger="hover"
15
+ >
16
+ <slot></slot>
17
+ <template #anchored>
18
+ {{ label }}
19
+ <slot name="content"></slot>
20
+ </template>
21
+ </Anchor>
22
+ </template>
@@ -1,4 +1,4 @@
1
- import type * as Base from "./types"
2
- import type { HTMLAttributes } from "astro/types"
3
-
4
- export type Props = Base.Props & HTMLAttributes<"span">
1
+ import type * as Base from "./types"
2
+ import type { HTMLAttributes } from "astro/types"
3
+
4
+ export type Props = Base.Props & HTMLAttributes<"span">
@@ -1,10 +1,10 @@
1
- import type { HTMLAttributes, Slot } from "vue"
2
- import type { Props as BaseProps, Slots as BaseSlots } from "./types"
3
-
4
- export type Props = BaseProps & {
5
- class?: HTMLAttributes["class"]
6
- }
7
-
8
- export type Slots = BaseSlots<Slot> & {
9
- default?: Slot
10
- }
1
+ import type { HTMLAttributes, Slot } from "vue"
2
+ import type { Props as BaseProps, Slots as BaseSlots } from "./types"
3
+
4
+ export type Props = BaseProps & {
5
+ class?: HTMLAttributes["class"]
6
+ }
7
+
8
+ export type Slots = BaseSlots<Slot> & {
9
+ default?: Slot
10
+ }
@@ -1,6 +1,6 @@
1
- import type * as Base from "./types"
2
- import type { JSX } from "solid-js"
3
-
4
- export type Props = Base.Props &
5
- Partial<Base.Slots<JSX.Element>> &
6
- JSX.HTMLAttributes<HTMLSpanElement>
1
+ import type * as Base from "./types"
2
+ import type { JSX } from "solid-js"
3
+
4
+ export type Props = Base.Props &
5
+ Partial<Base.Slots<JSX.Element>> &
6
+ JSX.HTMLAttributes<HTMLSpanElement>
@@ -1,7 +1,7 @@
1
- import type * as Base from "./types"
2
- import type { SvelteHTMLElements } from "svelte/elements"
3
- import type { Snippet } from "svelte"
4
-
5
- type Snippets = Base.Slots<Snippet>
6
-
7
- export type Props = Base.Props & Snippets & SvelteHTMLElements["span"]
1
+ import type * as Base from "./types"
2
+ import type { SvelteHTMLElements } from "svelte/elements"
3
+ import type { Snippet } from "svelte"
4
+
5
+ type Snippets = Base.Slots<Snippet>
6
+
7
+ export type Props = Base.Props & Snippets & SvelteHTMLElements["span"]
@@ -1,11 +1,11 @@
1
- export type Props = {
2
- [key: string]: any
3
- alignment?: string
4
- arrow?: boolean
5
- id?: string
6
- label?: string
7
- }
8
-
9
- export type Slots<S> = {
10
- content?: S
11
- }
1
+ export type Props = {
2
+ [key: string]: any
3
+ alignment?: string
4
+ arrow?: boolean
5
+ id?: string
6
+ label?: string
7
+ }
8
+
9
+ export type Slots<S> = {
10
+ content?: S
11
+ }