msc-code-viewer - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

mjs/common-css.js

@@ -24,2 +24,3 @@ export const _wccss = `
 .aspect-ratio .content{position:absolute;top:0;left:0;right:0;bottom:0;}
+.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .line-clampin{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, 2);-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}
@@ -29,4 +30,23 @@ .overscrolling{-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:scroll;overscroll-behavior:contain;}
 .absolute-center{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}
+.flex-center{display:flex;justify-content:center;align-items:center;}
+.force-radius{overflow:hidden;transform:translate3d(0, 0, 0);border-radius:var(--r, 8px);}
 
 :host{all:initial;font-family:system-ui,sans-serif;text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:16px;-webkit-tap-highlight-color:transparent;}
+:host {
+  /**
+   * safe area variables for iX design
+   */
+  --safe-area-left: 0px;
+  --safe-area-right: 0px;
+  --safe-area-top: 0px;
+  --safe-area-bottom: 0px;
+}
+@supports (bottom: env(safe-area-inset-top)) {
+  :host {
+    --safe-area-left: env(safe-area-inset-left);
+    --safe-area-right: env(safe-area-inset-right);
+    --safe-area-top: env(safe-area-inset-top);
+    --safe-area-bottom: env(safe-area-inset-bottom);
+  }
+}
 `;

mjs/wc-msc-code-viewer.js

@@ -7,3 +7,4 @@ import { _wcl } from './common-lib.js';
 const custumEvents = {
-  mutate: 'msc-code-viewer-mutate'
+  mutate: 'msc-code-viewer-mutate',
+  copy: 'msc-code-viewer-copy'
 };
@@ -408,2 +409,5 @@
       await navigator.clipboard.writeText(this.value);
+      this._fireEvent(custumEvents.copy, {
+        value: this.value
+      });
     } catch (err) {
@@ -410,0 +414,0 @@ console.error('Failed to copy: ', err);

package.json

 {
   "name": "msc-code-viewer",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "As a web developer, show some demo code is a very common stuff. There are so many syntax highlighting libraries for the Web. highlight.js is one of the popular library. It is easy to use and there are so many themes for it. To make it more suitable for me, I wrap highlight.js and GitHub light / dark themes as a web component and named it <msc-code-viewer />. With <msc-code-viewer /> syntax highlighting is a piece of cake. It will switch light / dark mode as user preference. Of course「COPY」feature has already built-in.",
@@ -5,0 +5,0 @@ "main": "index.html",

README.md

@@ -86,5 +86,6 @@ # msc-code-viewer
 | ----------- | ----------- |
-| msc-code-viewer-mutate | Fired when <msc-code-viewer-mutate /> mutated. |
+| msc-code-viewer-mutate | Fired when <msc-code-viewer /> mutated. Developers could get data througn `event.detatil`. |
+| msc-code-viewer-copy | Fired when <msc-code-viewer /> copy button pressed. Developers could get data througn `event.detatil`. |
 
 ## Reference
 - [&lt;msc-code-viewer /&gt;](https://blog.lalacube.com/mei/webComponent_msc-code-viewer.html)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

158972

increased by0.6%

Lines of code

2468

increased by0.98%

Number of lines in readme file

91

increased by1.11%

No dependency changes