@code-hike/mini-frame - npm Package Compare versions

Comparing version 0.0.0-133ab88 to 0.0.0-1f0ad83

dist/index.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 var React = require('react');
-var utils = require('@code-hike/utils');
+var classer = require('@code-hike/classer');
 
@@ -51,30 +51,33 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var c = utils.classNamesWithPrefix("ch-frame");
 function MiniFrame(_a) {
-    var title = _a.title, children = _a.children, titleBar = _a.titleBar, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.zoom, zoom = _c === void 0 ? 1 : _c, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
-    var bar = titleBar || (React__default['default'].createElement(DefaultTitleBar, { title: title, classes: classes }));
-    return (React__default['default'].createElement("div", __assign({}, props),
-        React__default['default'].createElement("div", { className: c("", classes) },
-            React__default['default'].createElement("div", { className: c("-title-bar", classes) }, bar),
-            React__default['default'].createElement("div", { className: c("-content", classes) },
-                React__default['default'].createElement("div", { className: c("-zoom", classes), style: {
-                        "--ch-frame-zoom": zoom,
-                    } }, children)))));
+    var title = _a.title, children = _a.children, titleBar = _a.titleBar, classes = _a.classes, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
+    var c = classer.useClasser("ch-frame", classes);
+    var bar = titleBar || React__default['default'].createElement(DefaultTitleBar, { title: title });
+    var zoomStyle = {
+        "--ch-frame-zoom": zoom,
+    };
+    return (React__default['default'].createElement(classer.ClasserProvider, { classes: classes },
+        React__default['default'].createElement("div", __assign({}, props),
+            React__default['default'].createElement("div", { className: c("") },
+                React__default['default'].createElement("div", { className: c("title-bar") }, bar),
+                React__default['default'].createElement("div", { className: c("content") },
+                    React__default['default'].createElement("div", { className: c("zoom"), style: zoomStyle }, children))))));
 }
 function DefaultTitleBar(_a) {
-    var title = _a.title, classes = _a.classes;
+    var title = _a.title;
+    var c = classer.useClasser("ch-frame");
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement("div", { className: c("-left-bar", classes) },
-            React__default['default'].createElement(FrameButtons, { classes: classes })),
-        React__default['default'].createElement("div", { className: c("-middle-bar", classes) }, title),
-        React__default['default'].createElement("div", { className: c("-right-bar", classes) })));
+        React__default['default'].createElement("div", { className: c("left-bar") },
+            React__default['default'].createElement(FrameButtons, null)),
+        React__default['default'].createElement("div", { className: c("middle-bar") }, title),
+        React__default['default'].createElement("div", { className: c("right-bar") })));
 }
-function FrameButtons(_a) {
-    var _b = _a.classes, classes = _b === void 0 ? {} : _b;
-    return (React__default['default'].createElement("div", { className: c("-buttons", classes) },
-        React__default['default'].createElement("div", { className: c(["-button", "-button-left"], classes) }),
-        React__default['default'].createElement("div", { className: c("-button-space", classes) }),
-        React__default['default'].createElement("div", { className: c(["-button", "-button-middle"], classes) }),
-        React__default['default'].createElement("div", { className: c("-button-space", classes) }),
-        React__default['default'].createElement("div", { className: c(["-button", "-button-right"], classes) })));
+function FrameButtons() {
+    var c = classer.useClasser("ch-frame");
+    return (React__default['default'].createElement("div", { className: c("buttons") },
+        React__default['default'].createElement("div", { className: c("button", "button-left") }),
+        React__default['default'].createElement("div", { className: c("button-space") }),
+        React__default['default'].createElement("div", { className: c("button", "button-middle") }),
+        React__default['default'].createElement("div", { className: c("button-space") }),
+        React__default['default'].createElement("div", { className: c("button", "button-right") })));
 }
@@ -81,0 +84,0 @@

dist/index.esm.js

 import React from 'react';
-import { classNamesWithPrefix } from '@code-hike/utils';
+import { useClasser, ClasserProvider } from '@code-hike/classer';
 
@@ -42,32 +42,35 @@ /*! *****************************************************************************
 
-var c = classNamesWithPrefix("ch-frame");
 function MiniFrame(_a) {
-    var title = _a.title, children = _a.children, titleBar = _a.titleBar, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.zoom, zoom = _c === void 0 ? 1 : _c, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
-    var bar = titleBar || (React.createElement(DefaultTitleBar, { title: title, classes: classes }));
-    return (React.createElement("div", __assign({}, props),
-        React.createElement("div", { className: c("", classes) },
-            React.createElement("div", { className: c("-title-bar", classes) }, bar),
-            React.createElement("div", { className: c("-content", classes) },
-                React.createElement("div", { className: c("-zoom", classes), style: {
-                        "--ch-frame-zoom": zoom,
-                    } }, children)))));
+    var title = _a.title, children = _a.children, titleBar = _a.titleBar, classes = _a.classes, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
+    var c = useClasser("ch-frame", classes);
+    var bar = titleBar || React.createElement(DefaultTitleBar, { title: title });
+    var zoomStyle = {
+        "--ch-frame-zoom": zoom,
+    };
+    return (React.createElement(ClasserProvider, { classes: classes },
+        React.createElement("div", __assign({}, props),
+            React.createElement("div", { className: c("") },
+                React.createElement("div", { className: c("title-bar") }, bar),
+                React.createElement("div", { className: c("content") },
+                    React.createElement("div", { className: c("zoom"), style: zoomStyle }, children))))));
 }
 function DefaultTitleBar(_a) {
-    var title = _a.title, classes = _a.classes;
+    var title = _a.title;
+    var c = useClasser("ch-frame");
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: c("-left-bar", classes) },
-            React.createElement(FrameButtons, { classes: classes })),
-        React.createElement("div", { className: c("-middle-bar", classes) }, title),
-        React.createElement("div", { className: c("-right-bar", classes) })));
+        React.createElement("div", { className: c("left-bar") },
+            React.createElement(FrameButtons, null)),
+        React.createElement("div", { className: c("middle-bar") }, title),
+        React.createElement("div", { className: c("right-bar") })));
 }
-function FrameButtons(_a) {
-    var _b = _a.classes, classes = _b === void 0 ? {} : _b;
-    return (React.createElement("div", { className: c("-buttons", classes) },
-        React.createElement("div", { className: c(["-button", "-button-left"], classes) }),
-        React.createElement("div", { className: c("-button-space", classes) }),
-        React.createElement("div", { className: c(["-button", "-button-middle"], classes) }),
-        React.createElement("div", { className: c("-button-space", classes) }),
-        React.createElement("div", { className: c(["-button", "-button-right"], classes) })));
+function FrameButtons() {
+    var c = useClasser("ch-frame");
+    return (React.createElement("div", { className: c("buttons") },
+        React.createElement("div", { className: c("button", "button-left") }),
+        React.createElement("div", { className: c("button-space") }),
+        React.createElement("div", { className: c("button", "button-middle") }),
+        React.createElement("div", { className: c("button-space") }),
+        React.createElement("div", { className: c("button", "button-right") })));
 }
 
 export { FrameButtons, MiniFrame };

dist/index.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ch = {}, global.React, global.utils));
-}(this, (function (exports, React, utils) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/classer')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/classer'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ch = {}, global.React, global.classer));
+}(this, (function (exports, React, classer) { 'use strict';
 
@@ -49,30 +49,33 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var c = utils.classNamesWithPrefix("ch-frame");
     function MiniFrame(_a) {
-        var title = _a.title, children = _a.children, titleBar = _a.titleBar, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.zoom, zoom = _c === void 0 ? 1 : _c, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
-        var bar = titleBar || (React__default['default'].createElement(DefaultTitleBar, { title: title, classes: classes }));
-        return (React__default['default'].createElement("div", __assign({}, props),
-            React__default['default'].createElement("div", { className: c("", classes) },
-                React__default['default'].createElement("div", { className: c("-title-bar", classes) }, bar),
-                React__default['default'].createElement("div", { className: c("-content", classes) },
-                    React__default['default'].createElement("div", { className: c("-zoom", classes), style: {
-                            "--ch-frame-zoom": zoom,
-                        } }, children)))));
+        var title = _a.title, children = _a.children, titleBar = _a.titleBar, classes = _a.classes, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
+        var c = classer.useClasser("ch-frame", classes);
+        var bar = titleBar || React__default['default'].createElement(DefaultTitleBar, { title: title });
+        var zoomStyle = {
+            "--ch-frame-zoom": zoom,
+        };
+        return (React__default['default'].createElement(classer.ClasserProvider, { classes: classes },
+            React__default['default'].createElement("div", __assign({}, props),
+                React__default['default'].createElement("div", { className: c("") },
+                    React__default['default'].createElement("div", { className: c("title-bar") }, bar),
+                    React__default['default'].createElement("div", { className: c("content") },
+                        React__default['default'].createElement("div", { className: c("zoom"), style: zoomStyle }, children))))));
     }
     function DefaultTitleBar(_a) {
-        var title = _a.title, classes = _a.classes;
+        var title = _a.title;
+        var c = classer.useClasser("ch-frame");
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement("div", { className: c("-left-bar", classes) },
-                React__default['default'].createElement(FrameButtons, { classes: classes })),
-            React__default['default'].createElement("div", { className: c("-middle-bar", classes) }, title),
-            React__default['default'].createElement("div", { className: c("-right-bar", classes) })));
+            React__default['default'].createElement("div", { className: c("left-bar") },
+                React__default['default'].createElement(FrameButtons, null)),
+            React__default['default'].createElement("div", { className: c("middle-bar") }, title),
+            React__default['default'].createElement("div", { className: c("right-bar") })));
     }
-    function FrameButtons(_a) {
-        var _b = _a.classes, classes = _b === void 0 ? {} : _b;
-        return (React__default['default'].createElement("div", { className: c("-buttons", classes) },
-            React__default['default'].createElement("div", { className: c(["-button", "-button-left"], classes) }),
-            React__default['default'].createElement("div", { className: c("-button-space", classes) }),
-            React__default['default'].createElement("div", { className: c(["-button", "-button-middle"], classes) }),
-            React__default['default'].createElement("div", { className: c("-button-space", classes) }),
-            React__default['default'].createElement("div", { className: c(["-button", "-button-right"], classes) })));
+    function FrameButtons() {
+        var c = classer.useClasser("ch-frame");
+        return (React__default['default'].createElement("div", { className: c("buttons") },
+            React__default['default'].createElement("div", { className: c("button", "button-left") }),
+            React__default['default'].createElement("div", { className: c("button-space") }),
+            React__default['default'].createElement("div", { className: c("button", "button-middle") }),
+            React__default['default'].createElement("div", { className: c("button-space") }),
+            React__default['default'].createElement("div", { className: c("button", "button-right") })));
     }
@@ -79,0 +82,0 @@

dist/mini-frame.d.ts

 import React from "react";
-import { Classes } from "@code-hike/utils";
+import { Classes } from "@code-hike/classer";
 declare type MiniFrameProps = {
@@ -10,5 +10,3 @@ title?: string;
 export declare function MiniFrame({ title, children, titleBar, classes, zoom, ...props }: MiniFrameProps): JSX.Element;
-export declare function FrameButtons({ classes, }: {
-    classes: Classes | undefined;
-}): JSX.Element;
+export declare function FrameButtons(): JSX.Element;
 export {};

package.json

 {
   "name": "@code-hike/mini-frame",
-  "version": "0.0.0-133ab88",
+  "version": "0.0.0-1f0ad83",
   "main": "dist/index.js",
@@ -35,4 +35,4 @@ "typings": "dist/index.d.ts",
   "dependencies": {
-    "@code-hike/utils": "0.0.0-133ab88"
+    "@code-hike/classer": "0.0.0-1f0ad83"
   }
 }

No alert changes

Improved metrics

Lines of code

231

increased by3.13%

Worsened metrics

Total package byte prevSize

17722

decreased by-1.69%

Dependency changes

• + Added@code-hike/classer@0.0.0-1f0ad83

• + Added@code-hike/classer@0.0.0-1f0ad83(transitive)

• - Removed@code-hike/utils@0.0.0-133ab88

• - Removed@code-hike/utils@0.0.0-133ab88(transitive)