🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
@logicspark/web-components
Advanced tools
@logicspark/web-components - npm Package Compare versions
+1
-0
@@ -13,2 +13,3 @@ <!DOCTYPE html> | ||
| <h1>Vite + Vue 3 + Typescript + Web Component</h1> | ||
| <ls-header></ls-header> | ||
| <ls-footer></ls-footer> | ||
@@ -15,0 +16,0 @@ <script type="module" src="/src/main.ce.ts"></script> |
+1
-1
| { | ||
| "name": "@logicspark/web-components", | ||
| "private": false, | ||
| "version": "0.0.1-rc.0", | ||
| "version": "0.0.1-rc.1", | ||
| "type": "module", | ||
@@ -6,0 +6,0 @@ "scripts": { |
+1
-18
@@ -1,18 +0,1 @@ | ||
| # Vue 3 + TypeScript + Vite | ||
| This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | ||
| ## Recommended IDE Setup | ||
| - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). | ||
| ## Type Support For `.vue` Imports in TS | ||
| TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. | ||
| If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: | ||
| 1. Disable the built-in TypeScript Extension | ||
| 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette | ||
| 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` | ||
| 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. | ||
| Just another library |
@@ -11,3 +11,16 @@ <script setup lang="ts"> | ||
| <div class="flex items-center justify-center md:mb-0 mb-3"> | ||
| <span class="i-logicspark:white-logo h-[30px] mr-3"></span> | ||
| <svg | ||
| width="16" | ||
| height="30" | ||
| viewBox="0 0 16 30" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| id="ls-white-logo" | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M15.6905 13.8995C15.6905 14.1259 15.6452 14.3527 15.5595 14.554V14.559H15.5545V14.5641C15.4789 14.7506 15.3683 14.9269 15.2372 15.073C15.2271 15.0827 15.222 15.0879 15.217 15.0979L15.1163 15.1989C15.1114 15.1989 15.1114 15.2039 15.1062 15.2086L14.9049 15.4051L14.0336 16.2765L7.20931 23.1005V23.1057L1.17086 29.1392C1.16076 29.1493 1.14551 29.1643 1.13563 29.1746C1.12037 29.1845 1.10534 29.1946 1.0903 29.1998C1.07505 29.2099 1.06001 29.2146 1.03982 29.22C1.02478 29.2249 1.00953 29.2301 0.989333 29.2348C0.969354 29.2399 0.954102 29.2449 0.934123 29.2449C0.924027 29.2449 0.908774 29.2399 0.893737 29.2399C0.88364 29.2399 0.873543 29.2399 0.863447 29.2348C0.853565 29.2348 0.843468 29.2348 0.833372 29.2301C0.828216 29.2301 0.823275 29.2301 0.818334 29.2249C0.813178 29.2249 0.808237 29.22 0.803082 29.22C0.798141 29.2146 0.788044 29.2146 0.782888 29.2099C0.777947 29.2099 0.773006 29.2047 0.767851 29.2047C0.757754 29.1998 0.742716 29.1946 0.73262 29.1845C0.727679 29.1796 0.717582 29.1746 0.712426 29.1695C0.697389 29.1643 0.687292 29.1493 0.677195 29.1392C0.661943 29.1242 0.64712 29.1089 0.636809 29.0939C0.631868 29.0889 0.631868 29.0889 0.631868 29.084C0.621771 29.0687 0.611675 29.0488 0.601578 29.0335V29.0286C0.591481 29.0084 0.581385 28.9882 0.581385 28.9628C0.576444 28.9527 0.576444 28.948 0.576444 28.9379C0.571503 28.9229 0.571503 28.9076 0.571503 28.8924V22.2747C0.571503 22.2496 0.571503 22.2296 0.576444 22.2094C0.58654 22.0984 0.631868 21.9978 0.697389 21.9173C0.712426 21.902 0.722523 21.887 0.737776 21.872L5.6381 16.9714L7.19427 15.4202C7.19921 15.4152 7.19921 15.4103 7.20437 15.4051C7.22435 15.3901 7.2396 15.3749 7.25464 15.36C7.40072 15.1938 7.49137 14.977 7.49137 14.7454C7.49137 14.5993 7.45614 14.4584 7.39556 14.3375C7.25958 14.0657 6.99277 13.8741 6.68063 13.8389H2.2787C1.74981 13.8236 1.26645 13.577 0.944005 13.1942C0.924027 13.1691 0.903834 13.1388 0.88364 13.1138C0.873544 13.0984 0.863447 13.0836 0.858506 13.0683C0.838313 13.0382 0.818334 13.0129 0.803082 12.9877C0.798141 12.9826 0.798141 12.9727 0.792985 12.9678C0.788044 12.9624 0.788044 12.9577 0.782888 12.9525C0.773006 12.9325 0.767851 12.9222 0.757754 12.902C0.747657 12.8921 0.742716 12.8769 0.737776 12.8619C0.73262 12.8567 0.727679 12.8518 0.727679 12.8466C0.722523 12.8365 0.717582 12.8217 0.712426 12.8066C0.707485 12.8015 0.707485 12.7963 0.70233 12.7865C0.697389 12.7663 0.687292 12.7461 0.682136 12.7259C0.667099 12.6956 0.661943 12.6705 0.652061 12.6404C0.61683 12.5396 0.596637 12.4337 0.58654 12.3229C0.581385 12.2977 0.581385 12.2726 0.576444 12.2475V12.1416C0.576444 11.7035 0.737775 11.3005 1.01468 10.9985L2.32918 9.68892L11.2233 0.795047C11.4297 0.618677 11.7522 0.749504 11.7672 1.01653C11.7721 1.02663 11.7773 1.04145 11.7721 1.05692V7.8103C11.7721 7.95638 11.7167 8.09752 11.611 8.20342L9.18353 10.6307C9.04755 10.792 8.96205 11.0036 8.96205 11.2301C8.96205 11.5424 9.12317 11.8193 9.36484 11.9856C9.36484 11.9856 9.41533 12.0206 9.45056 12.0359C9.4656 12.046 9.49588 12.061 9.51586 12.0662C9.55109 12.0812 9.58138 12.0913 9.61167 12.1014C9.62671 12.1065 9.64196 12.1115 9.64196 12.1115C9.66194 12.1166 9.67719 12.1166 9.69739 12.1216V12.1267C9.72746 12.1317 9.7526 12.1366 9.77795 12.1366L9.80802 12.1416H9.85335H9.85851H13.9328C13.9932 12.1416 14.0486 12.1416 14.104 12.1517C14.1444 12.1568 14.1846 12.1617 14.225 12.1667C14.3056 12.177 14.381 12.197 14.4514 12.2172C14.663 12.2827 14.8594 12.3886 15.0256 12.5244C15.0508 12.5443 15.071 12.5645 15.0912 12.5798C15.1163 12.6 15.1414 12.6202 15.1616 12.6453C15.1767 12.6655 15.1969 12.6857 15.217 12.7057C15.2271 12.7106 15.2271 12.7158 15.2321 12.7207C15.5193 13.0279 15.6905 13.441 15.6905 13.8995Z" | ||
| fill="white" /> | ||
| </svg> | ||
| | ||
| <span>Logic Spark Co., Ltd.</span> | ||
@@ -18,3 +31,28 @@ </div> | ||
| <div class="flex items-center justify-center"> | ||
| <span class="i-clarity-envelope-line mr-3"></span> | ||
| <svg | ||
| width="20" | ||
| height="20" | ||
| viewBox="0 0 20 20" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg"> | ||
| <g id="envalop-mail"> | ||
| <path | ||
| id="envalop-mail-vector" | ||
| d="M15.8333 4.16772H4.16667C3.24619 4.16772 2.5 4.91392 2.5 5.83439V14.1677C2.5 15.0882 3.24619 15.8344 4.16667 15.8344H15.8333C16.7538 15.8344 17.5 15.0882 17.5 14.1677V5.83439C17.5 4.91392 16.7538 4.16772 15.8333 4.16772Z" | ||
| stroke="white" | ||
| stroke-opacity="0.9" | ||
| stroke-width="1.5" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" /> | ||
| <path | ||
| id="envalop-mail-vector-2" | ||
| d="M2.5 5.83423L10 10.8342L17.5 5.83423" | ||
| stroke="white" | ||
| stroke-opacity="0.9" | ||
| stroke-width="1.5" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" /> | ||
| </g> | ||
| </svg> | ||
| | ||
| <a href="mailto:info@logicspark.com">info@logicspark.com</a> | ||
@@ -32,6 +70,10 @@ </div> | ||
| <style> | ||
| footer { | ||
| footer, | ||
| footer a { | ||
| background-color: #002383; | ||
| color: white; | ||
| } | ||
| footer a { | ||
| text-decoration: unset; | ||
| } | ||
| footer .container { | ||
@@ -38,0 +80,0 @@ width: 100%; |
+2
-0
@@ -14,1 +14,3 @@ import { defineCustomElement } from "vue"; | ||
| } | ||
| register(); |
No alert changes
Improved metrics
- Total package byte prevSize
12798
35.04%- Lines of code
149
0.68%Worsened metrics
- Number of lines in readme file
2
-89.47%No dependency changes