@7pmlabs/design-system 2.0.2 → 2.0.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.
package/dist/design-system25.js
CHANGED
|
@@ -7,7 +7,7 @@ var f = [
|
|
|
7
7
|
"aria-label",
|
|
8
8
|
"aria-labelledby",
|
|
9
9
|
"innerHTML"
|
|
10
|
-
], p =
|
|
10
|
+
], p = /* @__PURE__ */ o({
|
|
11
11
|
__name: "BIcon",
|
|
12
12
|
props: {
|
|
13
13
|
icon: {},
|
|
@@ -30,36 +30,36 @@ var f = [
|
|
|
30
30
|
},
|
|
31
31
|
setup(t) {
|
|
32
32
|
u((e) => ({
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
v980e8a80: o.value.width,
|
|
34
|
+
v9d60b926: o.value.height,
|
|
35
|
+
fcd42934: o.value.transform,
|
|
36
|
+
v3752e149: o.value.fill
|
|
37
37
|
}));
|
|
38
|
-
let n = i(() => ({
|
|
38
|
+
let n = "/_design-system/icons".replace(/\/{2,}/g, "/"), o = i(() => ({
|
|
39
39
|
width: t.width || `${r[t.size]}rem`,
|
|
40
40
|
height: t.height || `${r[t.size]}rem`,
|
|
41
41
|
transform: `rotate(${t.rotate}deg)`,
|
|
42
42
|
fill: ["currentColor", ...Object.values(e)].includes(t.color) ? void 0 : t.color
|
|
43
|
-
})),
|
|
44
|
-
return d(() => [t.icon,
|
|
45
|
-
let e = `${
|
|
46
|
-
if (
|
|
47
|
-
h.value =
|
|
43
|
+
})), p = i(() => t.brand ? "brands" : t.variant), m = Object.freeze({ __BICON_STATIC_ICONS_PLACEHOLDER__: "" }), h = l("");
|
|
44
|
+
return d(() => [t.icon, p.value], async () => {
|
|
45
|
+
let e = `${p.value}/${t.icon}`, r = m[e];
|
|
46
|
+
if (r !== void 0) {
|
|
47
|
+
h.value = r;
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
50
|
h.value = "";
|
|
51
|
-
let
|
|
51
|
+
let i = `${n}/${e}.svg`;
|
|
52
52
|
try {
|
|
53
|
-
let e = await fetch(
|
|
53
|
+
let e = await fetch(i);
|
|
54
54
|
if (!e.ok) {
|
|
55
|
-
console.warn(`[BIcon] Could not load icon '${t.icon}' from '${
|
|
55
|
+
console.warn(`[BIcon] Could not load icon '${t.icon}' from '${i}' (HTTP ${e.status})`);
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
58
|
h.value = await e.text();
|
|
59
59
|
} catch {
|
|
60
|
-
console.warn(`[BIcon] Could not load icon '${t.icon}' from '${
|
|
60
|
+
console.warn(`[BIcon] Could not load icon '${t.icon}' from '${i}'`);
|
|
61
61
|
}
|
|
62
|
-
}, { immediate: !0 }), (e,
|
|
62
|
+
}, { immediate: !0 }), (e, n) => (c(), a("span", {
|
|
63
63
|
class: s(["b-icon", [{
|
|
64
64
|
"b:fill-current": t.color === "currentColor",
|
|
65
65
|
"b:fill-primary": t.color === "primary",
|
|
@@ -68,7 +68,7 @@ var f = [
|
|
|
68
68
|
"b:fill-failure": t.color === "failure",
|
|
69
69
|
"b:fill-warning": t.color === "warning",
|
|
70
70
|
"b:fill-info": t.color === "info",
|
|
71
|
-
"b-icon--color": !!
|
|
71
|
+
"b-icon--color": !!o.value.fill
|
|
72
72
|
}]]),
|
|
73
73
|
"aria-hidden": !!t.decorative || void 0,
|
|
74
74
|
"aria-label": t.ariaLabel,
|
|
@@ -78,6 +78,6 @@ var f = [
|
|
|
78
78
|
}
|
|
79
79
|
});
|
|
80
80
|
//#endregion
|
|
81
|
-
export {
|
|
81
|
+
export { p as default };
|
|
82
82
|
|
|
83
83
|
//# sourceMappingURL=design-system25.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system25.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n icon,\n variant = BIconVariant.Regular,\n size = BIconSize.Medium,\n decorative = true,\n rotate = 0,\n brand = false,\n color = 'currentColor',\n width,\n height,\n} = defineProps<{\n /**\n * Icon name, should match the file name in the assets/icons folder\n * @example 'check', 'cross', 'arrow-right'\n */\n icon: `${BIconName}` | `${BIconBrandName}`;\n /**\n * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n * @default 'regular'\n */\n variant?: `${BIconVariant}`;\n /**\n * Predefined icon sizes\n * @default 'medium'\n */\n size?: `${BIconSize}`;\n /**\n * Custom color for the icon, can be a CSS color value or a theme color\n * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n */\n color?: string | 'currentColor' | `${BCommonColor}`;\n /**\n * Custom width\n * @example '2rem', '24px', '1.5em'\n */\n width?: string;\n /**\n * Custom height\n * @example '2rem', '24px', '1.5em'\n */\n height?: string;\n /**\n * Whether icon is decorative (sets aria-hidden)\n * @default true\n */\n decorative?: boolean;\n /**\n * Accessible label for meaningful icons\n */\n ariaLabel?: string;\n /**\n * ID of element that labels this icon\n */\n ariaLabelledby?: string;\n /**\n * Icon rotation in degrees\n * @default 0\n */\n rotate?: number;\n /**\n * Whether the icon is a brand icon\n */\n brand?: boolean;\n}>();\n\nconst ICONS_BASE_URL =
|
|
1
|
+
{"version":3,"file":"design-system25.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n icon,\n variant = BIconVariant.Regular,\n size = BIconSize.Medium,\n decorative = true,\n rotate = 0,\n brand = false,\n color = 'currentColor',\n width,\n height,\n} = defineProps<{\n /**\n * Icon name, should match the file name in the assets/icons folder\n * @example 'check', 'cross', 'arrow-right'\n */\n icon: `${BIconName}` | `${BIconBrandName}`;\n /**\n * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n * @default 'regular'\n */\n variant?: `${BIconVariant}`;\n /**\n * Predefined icon sizes\n * @default 'medium'\n */\n size?: `${BIconSize}`;\n /**\n * Custom color for the icon, can be a CSS color value or a theme color\n * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n */\n color?: string | 'currentColor' | `${BCommonColor}`;\n /**\n * Custom width\n * @example '2rem', '24px', '1.5em'\n */\n width?: string;\n /**\n * Custom height\n * @example '2rem', '24px', '1.5em'\n */\n height?: string;\n /**\n * Whether icon is decorative (sets aria-hidden)\n * @default true\n */\n decorative?: boolean;\n /**\n * Accessible label for meaningful icons\n */\n ariaLabel?: string;\n /**\n * ID of element that labels this icon\n */\n ariaLabelledby?: string;\n /**\n * Icon rotation in degrees\n * @default 0\n */\n rotate?: number;\n /**\n * Whether the icon is a brand icon\n */\n brand?: boolean;\n}>();\n\n// Resolved at build time by the consuming bundler. For lib-mode publishes this\n// bakes to '/' (default Vite base), preserving the historical `/_design-system/icons`\n// URL. For consumers that build from source with a non-root base (e.g. Storybook\n// deployed under a project subpath), the base is honored automatically.\nconst ICONS_BASE_URL = `${import.meta.env.BASE_URL}_design-system/icons`.replace(\n /\\/{2,}/g,\n '/',\n);\n\nconst svgStyle = computed(() => ({\n width: width || `${BIconSizeMap[size]}rem`,\n height: height || `${BIconSizeMap[size]}rem`,\n transform: `rotate(${rotate}deg)`,\n fill: ['currentColor', ...Object.values(BCommonColor)].includes(color) ? undefined : color,\n}));\n\nconst iconFolder = computed(() => (brand ? 'brands' : variant));\n\n/**\n * Map of `<variant>/<icon-name>` → raw SVG markup.\n *\n * In the published library this object literal is an inert sentinel — the\n * `__BICON_STATIC_ICONS_PLACEHOLDER__` key is never read at runtime. When the\n * `@7pmlabs/design-system/vite` plugin is in the consumer's pipeline, its\n * `transform` hook replaces this exact literal in the bundled BIcon module\n * with the AST-scanned set of statically-used icons, so they render in the\n * first frame without a network roundtrip.\n *\n * Consumers without the plugin keep the inert object and fall back to the\n * runtime fetch below — the build succeeds either way.\n */\nconst STATIC_ICONS: Readonly<Record<string, string>> = Object.freeze({\n __BICON_STATIC_ICONS_PLACEHOLDER__: '',\n});\n\nconst svgMarkup = ref<string>('');\n\nconst loadIcon = async () => {\n const key = `${iconFolder.value}/${icon}`;\n const inlined = STATIC_ICONS[key];\n if (inlined !== undefined) {\n svgMarkup.value = inlined;\n return;\n }\n svgMarkup.value = '';\n const url = `${ICONS_BASE_URL}/${key}.svg`;\n try {\n const res = await fetch(url);\n if (!res.ok) {\n console.warn(`[BIcon] Could not load icon '${icon}' from '${url}' (HTTP ${res.status})`);\n return;\n }\n svgMarkup.value = await res.text();\n } catch {\n console.warn(`[BIcon] Could not load icon '${icon}' from '${url}'`);\n }\n};\n\nwatch(() => [icon, iconFolder.value], loadIcon, { immediate: true });\n</script>\n\n<template>\n <!-- v-html renders the raw SVG markup inline so fill/color CSS works normally -->\n <span\n class=\"b-icon\"\n :class=\"[\n {\n 'b:fill-current': color === 'currentColor',\n 'b:fill-primary': color === 'primary',\n 'b:fill-secondary': color === 'secondary',\n 'b:fill-success': color === 'success',\n 'b:fill-failure': color === 'failure',\n 'b:fill-warning': color === 'warning',\n 'b:fill-info': color === 'info',\n 'b-icon--color': !!svgStyle.fill,\n },\n ]\"\n :aria-hidden=\"!!decorative || undefined\"\n :aria-label=\"ariaLabel\"\n :aria-labelledby=\"ariaLabelledby\"\n v-html=\"svgMarkup\"\n />\n</template>\n\n<style scoped>\n.b-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: v-bind('svgStyle.width');\n height: v-bind('svgStyle.height');\n transform: v-bind('svgStyle.transform');\n}\n\n/* Size the inner <svg> element to fill the wrapper span */\n.b-icon :deep(svg) {\n width: 100%;\n height: 100%;\n}\n\n.b-icon--color :deep(svg) {\n fill: v-bind('svgStyle.fill');\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAM,IAAiB,wBAAkD,QACvE,WACA,IACD,EAEK,IAAW,SAAgB;GAC/B,OAAO,EAAA,SAAS,GAAG,EAAa,EAAA,MAAM;GACtC,QAAQ,EAAA,UAAU,GAAG,EAAa,EAAA,MAAM;GACxC,WAAW,UAAU,EAAA,OAAO;GAC5B,MAAM,CAAC,gBAAgB,GAAG,OAAO,OAAO,EAAa,CAAC,CAAC,SAAS,EAAA,MAAM,GAAG,KAAA,IAAY,EAAA;GACtF,EAAE,EAEG,IAAa,QAAgB,EAAA,QAAQ,WAAW,EAAA,QAAS,EAezD,IAAiD,OAAO,OAAO,EACnE,oCAAoC,IACrC,CAAC,EAEI,IAAY,EAAY,GAAG;SAuBjC,QAAY,CAAC,EAAA,MAAM,EAAW,MAAM,EArBnB,YAAY;GAC3B,IAAM,IAAM,GAAG,EAAW,MAAM,GAAG,EAAA,QAC7B,IAAU,EAAa;AAC7B,OAAI,MAAY,KAAA,GAAW;AACzB,MAAU,QAAQ;AAClB;;AAEF,KAAU,QAAQ;GAClB,IAAM,IAAM,GAAG,EAAe,GAAG,EAAI;AACrC,OAAI;IACF,IAAM,IAAM,MAAM,MAAM,EAAI;AAC5B,QAAI,CAAC,EAAI,IAAI;AACX,aAAQ,KAAK,gCAAgC,EAAA,KAAK,UAAU,EAAI,UAAU,EAAI,OAAO,GAAG;AACxF;;AAEF,MAAU,QAAQ,MAAM,EAAI,MAAM;WAC5B;AACN,YAAQ,KAAK,gCAAgC,EAAA,KAAK,UAAU,EAAI,GAAG;;KAIvB,EAAE,WAAW,IAAM,CAAC,kBAKlE,EAkBE,QAAA;GAjBA,OAAK,EAAA,CAAC,UAAQ,CAAA;sBAC8B,EAAA,UAAK;sBAA+C,EAAA,UAAK;wBAA4C,EAAA,UAAK;sBAA4C,EAAA,UAAK;sBAA0C,EAAA,UAAK;sBAA0C,EAAA,UAAK;mBAAuC,EAAA,UAAK;uBAAwC,EAAA,MAAS;;GAYjY,eAAW,CAAA,CAAI,EAAA,cAAc,KAAA;GAC7B,cAAY,EAAA;GACZ,mBAAiB,EAAA;GAClB,WAAQ,EAAA"}
|
package/dist/design-system27.js
CHANGED
|
@@ -2,7 +2,7 @@ import e from "./design-system14.js";
|
|
|
2
2
|
import t from "./design-system25.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/components/BIcon/BIcon.vue
|
|
5
|
-
var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-
|
|
5
|
+
var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-adf55fbd"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { n as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system27.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n icon,\n variant = BIconVariant.Regular,\n size = BIconSize.Medium,\n decorative = true,\n rotate = 0,\n brand = false,\n color = 'currentColor',\n width,\n height,\n} = defineProps<{\n /**\n * Icon name, should match the file name in the assets/icons folder\n * @example 'check', 'cross', 'arrow-right'\n */\n icon: `${BIconName}` | `${BIconBrandName}`;\n /**\n * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n * @default 'regular'\n */\n variant?: `${BIconVariant}`;\n /**\n * Predefined icon sizes\n * @default 'medium'\n */\n size?: `${BIconSize}`;\n /**\n * Custom color for the icon, can be a CSS color value or a theme color\n * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n */\n color?: string | 'currentColor' | `${BCommonColor}`;\n /**\n * Custom width\n * @example '2rem', '24px', '1.5em'\n */\n width?: string;\n /**\n * Custom height\n * @example '2rem', '24px', '1.5em'\n */\n height?: string;\n /**\n * Whether icon is decorative (sets aria-hidden)\n * @default true\n */\n decorative?: boolean;\n /**\n * Accessible label for meaningful icons\n */\n ariaLabel?: string;\n /**\n * ID of element that labels this icon\n */\n ariaLabelledby?: string;\n /**\n * Icon rotation in degrees\n * @default 0\n */\n rotate?: number;\n /**\n * Whether the icon is a brand icon\n */\n brand?: boolean;\n}>();\n\nconst ICONS_BASE_URL =
|
|
1
|
+
{"version":3,"file":"design-system27.js","names":[],"sources":["../src/components/BIcon/BIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIconBrandName, BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { BIconSizeMap } from '@/constants';\nimport { BCommonColor, BIconSize, BIconVariant } from '@/types';\nimport { computed, ref, watch } from 'vue';\n\nconst {\n icon,\n variant = BIconVariant.Regular,\n size = BIconSize.Medium,\n decorative = true,\n rotate = 0,\n brand = false,\n color = 'currentColor',\n width,\n height,\n} = defineProps<{\n /**\n * Icon name, should match the file name in the assets/icons folder\n * @example 'check', 'cross', 'arrow-right'\n */\n icon: `${BIconName}` | `${BIconBrandName}`;\n /**\n * Predefined icon variant, such as 'regular', 'solid', 'light', etc.\n * @default 'regular'\n */\n variant?: `${BIconVariant}`;\n /**\n * Predefined icon sizes\n * @default 'medium'\n */\n size?: `${BIconSize}`;\n /**\n * Custom color for the icon, can be a CSS color value or a theme color\n * @example 'currentColor', 'primary', 'secondary', '#808080', 'rgb(128, 128, 128)', 'hsl(0, 0%, 50%)'\n */\n color?: string | 'currentColor' | `${BCommonColor}`;\n /**\n * Custom width\n * @example '2rem', '24px', '1.5em'\n */\n width?: string;\n /**\n * Custom height\n * @example '2rem', '24px', '1.5em'\n */\n height?: string;\n /**\n * Whether icon is decorative (sets aria-hidden)\n * @default true\n */\n decorative?: boolean;\n /**\n * Accessible label for meaningful icons\n */\n ariaLabel?: string;\n /**\n * ID of element that labels this icon\n */\n ariaLabelledby?: string;\n /**\n * Icon rotation in degrees\n * @default 0\n */\n rotate?: number;\n /**\n * Whether the icon is a brand icon\n */\n brand?: boolean;\n}>();\n\n// Resolved at build time by the consuming bundler. For lib-mode publishes this\n// bakes to '/' (default Vite base), preserving the historical `/_design-system/icons`\n// URL. For consumers that build from source with a non-root base (e.g. Storybook\n// deployed under a project subpath), the base is honored automatically.\nconst ICONS_BASE_URL = `${import.meta.env.BASE_URL}_design-system/icons`.replace(\n /\\/{2,}/g,\n '/',\n);\n\nconst svgStyle = computed(() => ({\n width: width || `${BIconSizeMap[size]}rem`,\n height: height || `${BIconSizeMap[size]}rem`,\n transform: `rotate(${rotate}deg)`,\n fill: ['currentColor', ...Object.values(BCommonColor)].includes(color) ? undefined : color,\n}));\n\nconst iconFolder = computed(() => (brand ? 'brands' : variant));\n\n/**\n * Map of `<variant>/<icon-name>` → raw SVG markup.\n *\n * In the published library this object literal is an inert sentinel — the\n * `__BICON_STATIC_ICONS_PLACEHOLDER__` key is never read at runtime. When the\n * `@7pmlabs/design-system/vite` plugin is in the consumer's pipeline, its\n * `transform` hook replaces this exact literal in the bundled BIcon module\n * with the AST-scanned set of statically-used icons, so they render in the\n * first frame without a network roundtrip.\n *\n * Consumers without the plugin keep the inert object and fall back to the\n * runtime fetch below — the build succeeds either way.\n */\nconst STATIC_ICONS: Readonly<Record<string, string>> = Object.freeze({\n __BICON_STATIC_ICONS_PLACEHOLDER__: '',\n});\n\nconst svgMarkup = ref<string>('');\n\nconst loadIcon = async () => {\n const key = `${iconFolder.value}/${icon}`;\n const inlined = STATIC_ICONS[key];\n if (inlined !== undefined) {\n svgMarkup.value = inlined;\n return;\n }\n svgMarkup.value = '';\n const url = `${ICONS_BASE_URL}/${key}.svg`;\n try {\n const res = await fetch(url);\n if (!res.ok) {\n console.warn(`[BIcon] Could not load icon '${icon}' from '${url}' (HTTP ${res.status})`);\n return;\n }\n svgMarkup.value = await res.text();\n } catch {\n console.warn(`[BIcon] Could not load icon '${icon}' from '${url}'`);\n }\n};\n\nwatch(() => [icon, iconFolder.value], loadIcon, { immediate: true });\n</script>\n\n<template>\n <!-- v-html renders the raw SVG markup inline so fill/color CSS works normally -->\n <span\n class=\"b-icon\"\n :class=\"[\n {\n 'b:fill-current': color === 'currentColor',\n 'b:fill-primary': color === 'primary',\n 'b:fill-secondary': color === 'secondary',\n 'b:fill-success': color === 'success',\n 'b:fill-failure': color === 'failure',\n 'b:fill-warning': color === 'warning',\n 'b:fill-info': color === 'info',\n 'b-icon--color': !!svgStyle.fill,\n },\n ]\"\n :aria-hidden=\"!!decorative || undefined\"\n :aria-label=\"ariaLabel\"\n :aria-labelledby=\"ariaLabelledby\"\n v-html=\"svgMarkup\"\n />\n</template>\n\n<style scoped>\n.b-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: v-bind('svgStyle.width');\n height: v-bind('svgStyle.height');\n transform: v-bind('svgStyle.transform');\n}\n\n/* Size the inner <svg> element to fill the wrapper span */\n.b-icon :deep(svg) {\n width: 100%;\n height: 100%;\n}\n\n.b-icon--color :deep(svg) {\n fill: v-bind('svgStyle.fill');\n}\n</style>\n"],"mappings":""}
|