ropav 0.7.0 → 0.8.0
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/dist/components/badge/badge-auto-label.d.ts +2 -14
- package/dist/components/badge/badge-auto-label.js +3 -16
- package/dist/components/badge/badge.types.d.ts +4 -4
- package/dist/components/chip/chip-auto-label.d.ts +3 -19
- package/dist/components/chip/chip-auto-label.js +4 -21
- package/dist/components/chip/chip.types.d.ts +2 -2
- package/dist/components/icons/icon-overlay-arrow.js +1 -1
- package/dist/components/meter/meter.types.d.ts +2 -0
- package/dist/components/progress-bar/progress-bar.types.d.ts +2 -0
- package/dist/components/progress-circle/progress-circle.types.d.ts +2 -0
- package/dist/composables/use-color-field.js +1 -1
- package/dist/ropav.min.css +2 -0
- package/dist/utils/auto-label.d.ts +24 -0
- package/dist/utils/auto-label.js +48 -0
- package/dist/utils/block.js +11 -1
- package/dist/version.js +1 -1
- package/package.json +6 -3
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { Component } from "vue";
|
|
2
|
+
/**
|
|
3
|
+
* A component that renders its children, wrapping them in `Label` when they are only text - the
|
|
4
|
+
* equivalent of React's `typeof children === "string" || typeof children === "number"`.
|
|
5
|
+
*
|
|
6
|
+
* Written as a factory rather than an SFC because only a hand-written `setup` gets to hold the
|
|
7
|
+
* children; an SFC's `<slot />` is inserted before there is anywhere to intervene. That costs it
|
|
8
|
+
* the dual compilation a `.vue` file gets, so both branches are spelled out here and picked once,
|
|
9
|
+
* on whether this bundle has a Vapor runtime at all.
|
|
10
|
+
*
|
|
11
|
+
* **Vapor.** The slot has already rendered by the time it returns its block, so inspecting that
|
|
12
|
+
* block preserves its effects and lets the exact same text nodes move into the label. It is
|
|
13
|
+
* called once and the very block it returns is what gets inserted, so nothing renders twice and
|
|
14
|
+
* no effect is registered and thrown away - the actual hazard with slots in Vapor, rather than
|
|
15
|
+
* reading them at all. A slot forwarded from a VDOM host is the exception: it is filled only on
|
|
16
|
+
* insertion, so there is nothing to inspect and bare text goes unwrapped.
|
|
17
|
+
*
|
|
18
|
+
* **Server.** Renders the children and leaves them alone. A server cannot tell whether the
|
|
19
|
+
* browser will hydrate this as Vapor or as VDOM, and wrapping guesses at one of them; passing
|
|
20
|
+
* through matches a VDOM caller exactly, and matches a Vapor caller for every form in which the
|
|
21
|
+
* label is written out - which is every documented one. The case it gives up is a Vapor caller
|
|
22
|
+
* handing it bare text, and that is where a server-side wrap would have to come back.
|
|
23
|
+
*/
|
|
24
|
+
export declare const createAutoLabel: (Label: Component, name: string) => Component;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { flattenBlock, isTextOnlyBlock } from "./block.js";
|
|
2
|
+
import * as Vue from "vue";
|
|
3
|
+
//#region src/utils/auto-label.ts
|
|
4
|
+
/**
|
|
5
|
+
* The namespace import is load-bearing and must not be rewritten to a named one.
|
|
6
|
+
*
|
|
7
|
+
* `createComponent` and `defineVaporComponent` come from the Vapor runtime, which only the
|
|
8
|
+
* esm-bundler build re-exports. A bundler externalising `vue` for SSR resolves the node entry,
|
|
9
|
+
* and a named import of a binding it does not have is a link-time `SyntaxError` - thrown before
|
|
10
|
+
* any guard could run, so no `import.meta.env.SSR` branch can reach it. A namespace read yields
|
|
11
|
+
* `undefined` instead, which is what lets the two branches below be chosen at module scope.
|
|
12
|
+
*/
|
|
13
|
+
var { createComponent: createComponent$1, defineComponent, defineVaporComponent: defineVaporComponent$1 } = Vue;
|
|
14
|
+
/**
|
|
15
|
+
* A component that renders its children, wrapping them in `Label` when they are only text - the
|
|
16
|
+
* equivalent of React's `typeof children === "string" || typeof children === "number"`.
|
|
17
|
+
*
|
|
18
|
+
* Written as a factory rather than an SFC because only a hand-written `setup` gets to hold the
|
|
19
|
+
* children; an SFC's `<slot />` is inserted before there is anywhere to intervene. That costs it
|
|
20
|
+
* the dual compilation a `.vue` file gets, so both branches are spelled out here and picked once,
|
|
21
|
+
* on whether this bundle has a Vapor runtime at all.
|
|
22
|
+
*
|
|
23
|
+
* **Vapor.** The slot has already rendered by the time it returns its block, so inspecting that
|
|
24
|
+
* block preserves its effects and lets the exact same text nodes move into the label. It is
|
|
25
|
+
* called once and the very block it returns is what gets inserted, so nothing renders twice and
|
|
26
|
+
* no effect is registered and thrown away - the actual hazard with slots in Vapor, rather than
|
|
27
|
+
* reading them at all. A slot forwarded from a VDOM host is the exception: it is filled only on
|
|
28
|
+
* insertion, so there is nothing to inspect and bare text goes unwrapped.
|
|
29
|
+
*
|
|
30
|
+
* **Server.** Renders the children and leaves them alone. A server cannot tell whether the
|
|
31
|
+
* browser will hydrate this as Vapor or as VDOM, and wrapping guesses at one of them; passing
|
|
32
|
+
* through matches a VDOM caller exactly, and matches a Vapor caller for every form in which the
|
|
33
|
+
* label is written out - which is every documented one. The case it gives up is a Vapor caller
|
|
34
|
+
* handing it bare text, and that is where a server-side wrap would have to come back.
|
|
35
|
+
*/
|
|
36
|
+
var createAutoLabel = (Label, name) => defineVaporComponent$1 ? defineVaporComponent$1((_props, { slots }) => {
|
|
37
|
+
const block = slots["default"]?.();
|
|
38
|
+
if (block === void 0 || !isTextOnlyBlock(flattenBlock(block))) return block ?? [];
|
|
39
|
+
return createComponent$1(Label, null, { default: () => block });
|
|
40
|
+
}, { name }) : defineComponent({
|
|
41
|
+
name,
|
|
42
|
+
setup: (_props, { slots }) => () => {
|
|
43
|
+
const vnodes = slots["default"]?.();
|
|
44
|
+
return vnodes !== void 0 && vnodes.length === 1 ? vnodes[0] : vnodes;
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
//#endregion
|
|
48
|
+
export { createAutoLabel };
|
package/dist/utils/block.js
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as Vue from "vue";
|
|
2
2
|
//#region src/utils/block.ts
|
|
3
3
|
/**
|
|
4
|
+
* The namespace import is load-bearing and must not be rewritten to a named one.
|
|
5
|
+
*
|
|
6
|
+
* `isFragment` and `isVaporComponent` come from the Vapor runtime, which only the esm-bundler
|
|
7
|
+
* build re-exports. A bundler externalising `vue` for SSR resolves the node entry, and a named
|
|
8
|
+
* import of a binding it does not have is a link-time `SyntaxError` — thrown before any guard
|
|
9
|
+
* could run. A namespace read simply yields `undefined`, which is all this file needs: every
|
|
10
|
+
* function below is reached from a Vapor render, and a server has none.
|
|
11
|
+
*/
|
|
12
|
+
var { isFragment, isVaporComponent } = Vue;
|
|
13
|
+
/**
|
|
4
14
|
* The DOM nodes a Vapor block resolves to, in document order.
|
|
5
15
|
*
|
|
6
16
|
* A slot function hands back a block rather than a node: a single node for one child, an
|
package/dist/version.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ropav",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "🚀 Beautiful and modern Vue UI library built with Vapor Mode and Tailwind CSS 4.0.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -27,7 +27,9 @@
|
|
|
27
27
|
"dist"
|
|
28
28
|
],
|
|
29
29
|
"type": "module",
|
|
30
|
-
"sideEffects":
|
|
30
|
+
"sideEffects": [
|
|
31
|
+
"*.css"
|
|
32
|
+
],
|
|
31
33
|
"main": "./dist/index.js",
|
|
32
34
|
"module": "./dist/index.js",
|
|
33
35
|
"types": "./dist/index.d.ts",
|
|
@@ -45,6 +47,7 @@
|
|
|
45
47
|
"style": "./dist/styles-no-preflight.css",
|
|
46
48
|
"default": "./dist/styles-no-preflight.css"
|
|
47
49
|
},
|
|
50
|
+
"./styles/bundled.css": "./dist/ropav.min.css",
|
|
48
51
|
"./accordion": {
|
|
49
52
|
"import": "./dist/components/accordion/index.js",
|
|
50
53
|
"types": "./dist/components/accordion/index.d.ts"
|
|
@@ -413,7 +416,7 @@
|
|
|
413
416
|
"@internationalized/date": "3.12.4",
|
|
414
417
|
"@internationalized/number": "3.6.8",
|
|
415
418
|
"@internationalized/string": "3.2.10",
|
|
416
|
-
"@ropav/styles": "0.
|
|
419
|
+
"@ropav/styles": "0.8.0"
|
|
417
420
|
},
|
|
418
421
|
"peerDependencies": {
|
|
419
422
|
"tailwindcss": ">=4.0.0",
|