@numueg/theme-sdk 0.4.0 → 0.5.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.
- package/dist/index.cjs +128 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +94 -1
- package/dist/index.d.ts +94 -1
- package/dist/index.mjs +125 -16
- package/dist/index.mjs.map +1 -1
- package/dist/validation.cjs +1 -1
- package/dist/validation.mjs +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -9,7 +9,7 @@ var MAX_BLOCK_DEPTH = 5;
|
|
|
9
9
|
|
|
10
10
|
// src/validation/index.ts
|
|
11
11
|
var THEME_CONTRACT_VERSION = 1;
|
|
12
|
-
var SDK_VERSION = "0.
|
|
12
|
+
var SDK_VERSION = "0.5.1" ;
|
|
13
13
|
var REQUIRED_TEMPLATES = [
|
|
14
14
|
"home",
|
|
15
15
|
"product",
|
|
@@ -709,7 +709,7 @@ function useOrder(id) {
|
|
|
709
709
|
const [tick, setTick] = react.useState(0);
|
|
710
710
|
react.useEffect(() => {
|
|
711
711
|
if (typeof window === "undefined") return;
|
|
712
|
-
if (!
|
|
712
|
+
if (!id) {
|
|
713
713
|
setOrder(null);
|
|
714
714
|
setError(null);
|
|
715
715
|
setLoading(false);
|
|
@@ -720,14 +720,15 @@ function useOrder(id) {
|
|
|
720
720
|
setError(null);
|
|
721
721
|
void (async () => {
|
|
722
722
|
try {
|
|
723
|
-
const
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
723
|
+
const trackUrl = `/api/storefront/track/${encodeURIComponent(id)}`;
|
|
724
|
+
let res = customer ? await fetch(`/api/customer/me/orders/${encodeURIComponent(id)}`, {
|
|
725
|
+
method: "GET",
|
|
726
|
+
credentials: "include",
|
|
727
|
+
cache: "no-store"
|
|
728
|
+
}) : await fetch(trackUrl, { cache: "no-store" });
|
|
729
|
+
if (!res.ok && customer) {
|
|
730
|
+
res = await fetch(trackUrl, { cache: "no-store" });
|
|
731
|
+
}
|
|
731
732
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
732
733
|
const body = unwrap(await res.json());
|
|
733
734
|
if (cancelled) return;
|
|
@@ -2330,6 +2331,64 @@ function NuMuProvider({
|
|
|
2330
2331
|
function ProductProvider({ product, children }) {
|
|
2331
2332
|
return /* @__PURE__ */ jsxRuntime.jsx(ProductContext.Provider, { value: product, children });
|
|
2332
2333
|
}
|
|
2334
|
+
function CollectionProvider({ collection, children }) {
|
|
2335
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CollectionContext.Provider, { value: collection, children });
|
|
2336
|
+
}
|
|
2337
|
+
|
|
2338
|
+
// src/utils/logoStyle.ts
|
|
2339
|
+
var LOGO_SHAPE_OPTIONS = [
|
|
2340
|
+
{ value: "none", label: "Original", label_ar: "\u0627\u0644\u0623\u0635\u0644\u064A" },
|
|
2341
|
+
{ value: "square", label: "Square", label_ar: "\u0645\u0631\u0628\u0639" },
|
|
2342
|
+
{ value: "rounded", label: "Rounded square", label_ar: "\u0645\u0631\u0628\u0639 \u0628\u0632\u0648\u0627\u064A\u0627 \u062F\u0627\u0626\u0631\u064A\u0629" },
|
|
2343
|
+
{ value: "circle", label: "Circle", label_ar: "\u062F\u0627\u0626\u0631\u0629" },
|
|
2344
|
+
{ value: "triangle", label: "Triangle", label_ar: "\u0645\u062B\u0644\u062B" }
|
|
2345
|
+
];
|
|
2346
|
+
var LOGO_SIZE_OPTIONS = [
|
|
2347
|
+
{ value: "small", label: "Small", label_ar: "\u0635\u063A\u064A\u0631" },
|
|
2348
|
+
{ value: "medium", label: "Medium", label_ar: "\u0645\u062A\u0648\u0633\u0637" },
|
|
2349
|
+
{ value: "large", label: "Large", label_ar: "\u0643\u0628\u064A\u0631" }
|
|
2350
|
+
];
|
|
2351
|
+
var SHAPED_PX = {
|
|
2352
|
+
small: { plain: 32, rounded: 48 },
|
|
2353
|
+
medium: { plain: 40, rounded: 64 },
|
|
2354
|
+
large: { plain: 56, rounded: 80 }
|
|
2355
|
+
};
|
|
2356
|
+
function normalizeSize(size) {
|
|
2357
|
+
return size === "large" || size === "medium" ? size : "small";
|
|
2358
|
+
}
|
|
2359
|
+
function logoImgStyle(shape, size) {
|
|
2360
|
+
if (!shape || shape === "none") return void 0;
|
|
2361
|
+
const s = normalizeSize(size);
|
|
2362
|
+
const isRound = shape === "circle" || shape === "rounded";
|
|
2363
|
+
const px = isRound ? SHAPED_PX[s].rounded : SHAPED_PX[s].plain;
|
|
2364
|
+
const base = {
|
|
2365
|
+
height: px,
|
|
2366
|
+
width: px,
|
|
2367
|
+
objectFit: "cover",
|
|
2368
|
+
flex: "0 0 auto"
|
|
2369
|
+
};
|
|
2370
|
+
switch (shape) {
|
|
2371
|
+
case "circle":
|
|
2372
|
+
return { ...base, borderRadius: "9999px" };
|
|
2373
|
+
case "rounded":
|
|
2374
|
+
return { ...base, borderRadius: "0.5rem" };
|
|
2375
|
+
case "triangle":
|
|
2376
|
+
return { ...base, clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)" };
|
|
2377
|
+
case "square":
|
|
2378
|
+
default:
|
|
2379
|
+
return base;
|
|
2380
|
+
}
|
|
2381
|
+
}
|
|
2382
|
+
function logoStyleTokens(shape, size) {
|
|
2383
|
+
const style = logoImgStyle(shape, size);
|
|
2384
|
+
if (!style) return {};
|
|
2385
|
+
const box = `${style.height}px`;
|
|
2386
|
+
return {
|
|
2387
|
+
"--theme-logo-box": box,
|
|
2388
|
+
"--theme-logo-radius": typeof style.borderRadius === "string" ? style.borderRadius : "0",
|
|
2389
|
+
"--theme-logo-clip": typeof style.clipPath === "string" ? style.clipPath : "none"
|
|
2390
|
+
};
|
|
2391
|
+
}
|
|
2333
2392
|
|
|
2334
2393
|
// src/utils/styleTokens.ts
|
|
2335
2394
|
var COLOR_ROLE_ALIASES = {
|
|
@@ -2470,6 +2529,12 @@ function computeGlobalStyleTokens(globalSettings) {
|
|
|
2470
2529
|
pushHref(FONT_REGISTRY[value]?.href);
|
|
2471
2530
|
}
|
|
2472
2531
|
}
|
|
2532
|
+
const gs = globalSettings;
|
|
2533
|
+
const logoTokens = logoStyleTokens(
|
|
2534
|
+
typeof gs.logo_shape === "string" ? gs.logo_shape : void 0,
|
|
2535
|
+
typeof gs.logo_size === "string" ? gs.logo_size : void 0
|
|
2536
|
+
);
|
|
2537
|
+
for (const [k, v] of Object.entries(logoTokens)) cssVars[k] = v;
|
|
2473
2538
|
return { cssVars, fontHrefs };
|
|
2474
2539
|
}
|
|
2475
2540
|
function applyGlobalStyleTokens(globalSettings, el) {
|
|
@@ -2512,6 +2577,16 @@ function pickDemo(ctx, themeSettings) {
|
|
|
2512
2577
|
const t = themeSettings.templates;
|
|
2513
2578
|
return !t || Object.keys(t).length === 0;
|
|
2514
2579
|
}
|
|
2580
|
+
function wrapEntityProviders(app, pageData) {
|
|
2581
|
+
let inner = app;
|
|
2582
|
+
if (pageData.collection) {
|
|
2583
|
+
inner = /* @__PURE__ */ jsxRuntime.jsx(CollectionProvider, { collection: pageData.collection, children: inner });
|
|
2584
|
+
}
|
|
2585
|
+
if (pageData.product) {
|
|
2586
|
+
inner = /* @__PURE__ */ jsxRuntime.jsx(ProductProvider, { product: pageData.product, children: inner });
|
|
2587
|
+
}
|
|
2588
|
+
return inner;
|
|
2589
|
+
}
|
|
2515
2590
|
var ThemeMountBridge = react.forwardRef(function ThemeMountBridge2({ ctx, mountEl, renderApp }, ref) {
|
|
2516
2591
|
const [themeSettings, setThemeSettings] = react.useState(
|
|
2517
2592
|
ctx.themeSettings
|
|
@@ -2552,7 +2627,7 @@ var ThemeMountBridge = react.forwardRef(function ThemeMountBridge2({ ctx, mountE
|
|
|
2552
2627
|
initialProducts: pageData.products,
|
|
2553
2628
|
initialCollections: pageData.collections,
|
|
2554
2629
|
currentTemplate: template,
|
|
2555
|
-
children:
|
|
2630
|
+
children: wrapEntityProviders(app, pageData)
|
|
2556
2631
|
}
|
|
2557
2632
|
);
|
|
2558
2633
|
});
|
|
@@ -2588,9 +2663,6 @@ function defineThemeEntry(renderApp) {
|
|
|
2588
2663
|
createApp: (ctx) => buildThemeElement(ctx, null, renderApp)
|
|
2589
2664
|
};
|
|
2590
2665
|
}
|
|
2591
|
-
function CollectionProvider({ collection, children }) {
|
|
2592
|
-
return /* @__PURE__ */ jsxRuntime.jsx(CollectionContext.Provider, { value: collection, children });
|
|
2593
|
-
}
|
|
2594
2666
|
function Money({
|
|
2595
2667
|
amount,
|
|
2596
2668
|
currency,
|
|
@@ -2741,6 +2813,43 @@ function Image({
|
|
|
2741
2813
|
}
|
|
2742
2814
|
);
|
|
2743
2815
|
}
|
|
2816
|
+
var str = (v) => typeof v === "string" ? v : "";
|
|
2817
|
+
var NONE_HEIGHT = { small: 28, medium: 36, large: 48 };
|
|
2818
|
+
function Logo({
|
|
2819
|
+
src,
|
|
2820
|
+
alt,
|
|
2821
|
+
shape,
|
|
2822
|
+
size,
|
|
2823
|
+
className,
|
|
2824
|
+
style,
|
|
2825
|
+
fallback
|
|
2826
|
+
}) {
|
|
2827
|
+
const settings = useThemeSettings();
|
|
2828
|
+
const shop = useShop();
|
|
2829
|
+
const g = settings?.global_settings ?? {};
|
|
2830
|
+
const url = str(src) || str(g.logo_url) || shop?.logo_url || "";
|
|
2831
|
+
const resolvedShape = shape || str(g.logo_shape) || "none";
|
|
2832
|
+
const resolvedSize = size || str(g.logo_size) || "small";
|
|
2833
|
+
const altText = alt || str(g.brand_name) || shop?.name || "";
|
|
2834
|
+
if (!url) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback ?? null });
|
|
2835
|
+
const shaped = resolvedShape !== "none";
|
|
2836
|
+
const imgStyle = shaped ? { ...logoImgStyle(resolvedShape, resolvedSize), ...style } : {
|
|
2837
|
+
height: NONE_HEIGHT[resolvedSize] ?? NONE_HEIGHT.small,
|
|
2838
|
+
width: "auto",
|
|
2839
|
+
objectFit: "contain",
|
|
2840
|
+
...style
|
|
2841
|
+
};
|
|
2842
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2843
|
+
"img",
|
|
2844
|
+
{
|
|
2845
|
+
src: url,
|
|
2846
|
+
alt: altText,
|
|
2847
|
+
className,
|
|
2848
|
+
style: imgStyle,
|
|
2849
|
+
loading: "eager"
|
|
2850
|
+
}
|
|
2851
|
+
);
|
|
2852
|
+
}
|
|
2744
2853
|
var ABSOLUTE_URL = /^[a-z]+:|^\/\//i;
|
|
2745
2854
|
function Link({ to, children, ...rest }) {
|
|
2746
2855
|
const shop = useShop();
|
|
@@ -3968,9 +4077,12 @@ exports.IconMap = IconMap;
|
|
|
3968
4077
|
exports.Image = Image;
|
|
3969
4078
|
exports.KNOWN_SETTING_TYPES = KNOWN_SETTING_TYPES;
|
|
3970
4079
|
exports.KNOWN_TEMPLATES = KNOWN_TEMPLATES;
|
|
4080
|
+
exports.LOGO_SHAPE_OPTIONS = LOGO_SHAPE_OPTIONS;
|
|
4081
|
+
exports.LOGO_SIZE_OPTIONS = LOGO_SIZE_OPTIONS;
|
|
3971
4082
|
exports.Link = Link;
|
|
3972
4083
|
exports.LocaleSwitcher = LocaleSwitcher;
|
|
3973
4084
|
exports.LocalizationContext = LocalizationContext;
|
|
4085
|
+
exports.Logo = Logo;
|
|
3974
4086
|
exports.MAX_BLOCK_DEPTH = MAX_BLOCK_DEPTH;
|
|
3975
4087
|
exports.Money = Money;
|
|
3976
4088
|
exports.NavigationContext = NavigationContext;
|
|
@@ -4012,6 +4124,8 @@ exports.isDefinedBlock = isDefinedBlock;
|
|
|
4012
4124
|
exports.isDefinedSection = isDefinedSection;
|
|
4013
4125
|
exports.isDynamicSource = isDynamicSource;
|
|
4014
4126
|
exports.isSdkAvailable = isSdkAvailable;
|
|
4127
|
+
exports.logoImgStyle = logoImgStyle;
|
|
4128
|
+
exports.logoStyleTokens = logoStyleTokens;
|
|
4015
4129
|
exports.mergeResults = mergeResults;
|
|
4016
4130
|
exports.mountTheme = mountTheme;
|
|
4017
4131
|
exports.pickTranslations = pickTranslations;
|