skateui - npm Package Compare versions

Comparing version 0.1.129 to 0.1.130

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-bc67c0ec.js');
+const index = require('./index-d29398d6.js');
 
@@ -8,0 +8,0 @@ /*

dist/cjs/skateui.cjs.js

 'use strict';
 
-const index = require('./index-bc67c0ec.js');
+const index = require('./index-d29398d6.js');
 
@@ -5,0 +5,0 @@ /*

dist/cjs/sui-button_8.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-bc67c0ec.js');
+const index = require('./index-d29398d6.js');
 
@@ -524,6 +524,6 @@ const eventList = [
     this.closestLabel = null;
+    this.span = null;
     this.value = undefined;
     this.checked = undefined;
     this.el = (() => {
-      var _a, _b;
       // add input element manually because shadow dom input is not recognized by forms
@@ -538,21 +538,2 @@ let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing
       this.isChecker = inputType === 'checkbox' || inputType === 'radio';
-      // if class has reusable previous element
-      const previousInput = (_a = this.host.getElementsByTagName('input')) === null || _a === void 0 ? void 0 : _a[0];
-      if (previousInput && previousInput.hasAttribute('slot')) {
-        // if element already exists, return
-        // element can already exist when working on hot reloads
-        // setup new slot name
-        previousInput.setAttribute('slot', this.slotName);
-        // button input use additional span to display text
-        const previousSpan = (_b = this.host.getElementsByTagName('span')) === null || _b === void 0 ? void 0 : _b[0];
-        if (previousSpan) {
-          if (previousSpan.hasAttribute('slot') && previousSpan.getAttribute('slot') === 'value' && this.isButton) {
-            previousSpan.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
-          }
-          else {
-            previousSpan.remove();
-          }
-        }
-        return previousInput;
-      }
       // create new element
@@ -584,6 +565,6 @@ const input = document.createElement('input');
         // add button text
-        let span = document.createElement('span');
-        span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
-        span.setAttribute('slot', 'value');
-        this.host.prepend(span);
+        this.span = document.createElement('span');
+        this.span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
+        this.span.setAttribute('slot', 'value');
+        this.host.prepend(this.span);
       }
@@ -667,2 +648,10 @@ else if (this.isChecker) {
   }
+  componentDidRender() {
+    if (this.span && this.span.parentElement === null) {
+      this.host.prepend(this.span);
+    }
+    if (this.el && this.el.parentElement === null) {
+      this.host.prepend(this.el);
+    }
+  }
   componentDidLoad() {
@@ -669,0 +658,0 @@ dummyHandler.bind(this)({

dist/collection/components/sui-input/sui-input.js

@@ -25,6 +25,6 @@ import { Host, h } from '@stencil/core'; //Method,
     this.closestLabel = null;
+    this.span = null;
     this.value = undefined;
     this.checked = undefined;
     this.el = (() => {
-      var _a, _b;
       // add input element manually because shadow dom input is not recognized by forms
@@ -39,21 +39,2 @@ let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing
       this.isChecker = inputType === 'checkbox' || inputType === 'radio';
-      // if class has reusable previous element
-      const previousInput = (_a = this.host.getElementsByTagName('input')) === null || _a === void 0 ? void 0 : _a[0];
-      if (previousInput && previousInput.hasAttribute('slot')) {
-        // if element already exists, return
-        // element can already exist when working on hot reloads
-        // setup new slot name
-        previousInput.setAttribute('slot', this.slotName);
-        // button input use additional span to display text
-        const previousSpan = (_b = this.host.getElementsByTagName('span')) === null || _b === void 0 ? void 0 : _b[0];
-        if (previousSpan) {
-          if (previousSpan.hasAttribute('slot') && previousSpan.getAttribute('slot') === 'value' && this.isButton) {
-            previousSpan.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
-          }
-          else {
-            previousSpan.remove();
-          }
-        }
-        return previousInput;
-      }
       // create new element
@@ -85,6 +66,6 @@ const input = document.createElement('input');
         // add button text
-        let span = document.createElement('span');
-        span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
-        span.setAttribute('slot', 'value');
-        this.host.prepend(span);
+        this.span = document.createElement('span');
+        this.span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
+        this.span.setAttribute('slot', 'value');
+        this.host.prepend(this.span);
       }
@@ -168,2 +149,10 @@ else if (this.isChecker) {
   }
+  componentDidRender() {
+    if (this.span && this.span.parentElement === null) {
+      this.host.prepend(this.span);
+    }
+    if (this.el && this.el.parentElement === null) {
+      this.host.prepend(this.el);
+    }
+  }
   componentDidLoad() {
@@ -287,3 +276,3 @@ dummyHandler.bind(this)({
         },
-        "defaultValue": "(() => {\n    // add input element manually because shadow dom input is not recognized by forms\n    let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing\n\n    let value = this.value !== null && this.value !== undefined ? this.value.toString() : null;\n    if (!inputType || !this.availableTypes.includes(inputType)) {\n      this.host.setAttribute('type', 'text');\n      inputType = 'text';\n    }\n\n    this.isButton = inputType === 'reset' || inputType === 'submit';\n    this.isChecker = inputType === 'checkbox' || inputType === 'radio';\n\n    // if class has reusable previous element\n    const previousInput = this.host.getElementsByTagName('input')?.[0];\n    if (previousInput && previousInput.hasAttribute('slot')) {\n      // if element already exists, return\n      // element can already exist when working on hot reloads\n\n      // setup new slot name\n      previousInput.setAttribute('slot', this.slotName);\n\n      // button input use additional span to display text\n      const previousSpan = this.host.getElementsByTagName('span')?.[0];\n      if (previousSpan) {\n        if (previousSpan.hasAttribute('slot') && previousSpan.getAttribute('slot') === 'value' && this.isButton) {\n          previousSpan.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');\n        }\n        else {\n          previousSpan.remove();\n        }\n      }\n      return previousInput;\n    }\n\n    // create new element\n    const input = document.createElement('input');\n    if (value) {\n      input.setAttribute('value', value);\n    }\n\n    // setup new slot name\n    // slot name is to prevent users adding custom elements\n    input.setAttribute('slot', this.slotName);\n\n    if (!this.availableTypes.includes(inputType)) {\n      // type not available (yet)\n      this.host.prepend(input);\n      return input;\n    }\n\n    // add eventlistener manually if type is checkbox | radio | reset | submit\n    if (this.isButton) {\n      // hidden\n      input.setAttribute('hidden', '');\n\n      // tab index is on host\n      if (!this.host.hasAttribute('disabled')) {\n        this.host.setAttribute('tabindex', '0');\n      }\n\n      this.host.addEventListener('click', e => {\n        e.stopPropagation();\n        input.click();\n      });\n\n      // add button text\n      let span = document.createElement('span');\n      span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');\n      span.setAttribute('slot', 'value');\n      this.host.prepend(span);\n    }\n\n    else if (this.isChecker) {\n      // hidden\n      input.setAttribute('hidden', '');\n\n      if (this.checked || typeof this.checked === 'string') {\n        input.setAttribute('checked', '');\n      }\n\n      if (input.checked) {\n        this.host.setAttribute('checked', '');\n      }\n\n      // tab index is on host\n      if (!this.host.hasAttribute('disabled')) {\n        this.host.setAttribute('tabindex', '0');\n      }\n\n      this.host.addEventListener('click', e => {\n        if (this.closestLabel && e.isTrusted) {\n          e.stopPropagation();\n        }\n        else {\n          input.click();\n        }\n      });\n\n      input.addEventListener('change', e => {\n        // keep track of checked, update dom\n        if ((e.target as HTMLInputElement).checked) {\n          this.host.setAttribute('checked', '');\n        }\n        else {\n          this.host.removeAttribute('checked');\n        }\n\n        if (inputType === 'radio') {\n          // triggers only on checked, since radio button can't uncheck from user input\n          let radios = document.getElementsByName((e.target as HTMLInputElement).name);\n          for (let i = 0; i < radios.length; i++) {\n            if (\n              (radios[i] instanceof HTMLInputElement) &&\n              radios[i].getAttribute('type') === 'radio' &&\n              radios[i] !== e.target\n            ) {\n              radios[i].parentElement.removeAttribute('checked');\n            }\n          }\n        }\n      });\n    }\n\n    else {\n      // tab index is on input element\n      for (const [key, value] of Object.entries({\n        // set important styles\n        // these value should not be editable\n        'box-sizing': 'border-box',\n        'display': 'block',\n        'font-size': 'inherit',\n        'line-height': '1.2'\n      })) {\n        input.style.setProperty(key, value, 'important');\n      }\n    }\n\n    this.host.prepend(input);\n    return input;\n  })()"
+        "defaultValue": "(() => {\n    // add input element manually because shadow dom input is not recognized by forms\n    let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing\n\n    let value = this.value !== null && this.value !== undefined ? this.value.toString() : null;\n    if (!inputType || !this.availableTypes.includes(inputType)) {\n      this.host.setAttribute('type', 'text');\n      inputType = 'text';\n    }\n\n    this.isButton = inputType === 'reset' || inputType === 'submit';\n    this.isChecker = inputType === 'checkbox' || inputType === 'radio';\n\n    // create new element\n    const input = document.createElement('input');\n    if (value) {\n      input.setAttribute('value', value);\n    }\n\n    // setup new slot name\n    // slot name is to prevent users adding custom elements\n    input.setAttribute('slot', this.slotName);\n\n    if (!this.availableTypes.includes(inputType)) {\n      // type not available (yet)\n      this.host.prepend(input);\n      return input;\n    }\n\n    // add eventlistener manually if type is checkbox | radio | reset | submit\n    if (this.isButton) {\n      // hidden\n      input.setAttribute('hidden', '');\n\n      // tab index is on host\n      if (!this.host.hasAttribute('disabled')) {\n        this.host.setAttribute('tabindex', '0');\n      }\n\n      this.host.addEventListener('click', e => {\n        e.stopPropagation();\n        input.click();\n      });\n\n      // add button text\n      this.span = document.createElement('span');\n      this.span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');\n      this.span.setAttribute('slot', 'value');\n      this.host.prepend(this.span);\n    }\n\n    else if (this.isChecker) {\n      // hidden\n      input.setAttribute('hidden', '');\n\n      if (this.checked || typeof this.checked === 'string') {\n        input.setAttribute('checked', '');\n      }\n\n      if (input.checked) {\n        this.host.setAttribute('checked', '');\n      }\n\n      // tab index is on host\n      if (!this.host.hasAttribute('disabled')) {\n        this.host.setAttribute('tabindex', '0');\n      }\n\n      this.host.addEventListener('click', e => {\n        if (this.closestLabel && e.isTrusted) {\n          e.stopPropagation();\n        }\n        else {\n          input.click();\n        }\n      });\n\n      input.addEventListener('change', e => {\n        // keep track of checked, update dom\n        if ((e.target as HTMLInputElement).checked) {\n          this.host.setAttribute('checked', '');\n        }\n        else {\n          this.host.removeAttribute('checked');\n        }\n\n        if (inputType === 'radio') {\n          // triggers only on checked, since radio button can't uncheck from user input\n          let radios = document.getElementsByName((e.target as HTMLInputElement).name);\n          for (let i = 0; i < radios.length; i++) {\n            if (\n              (radios[i] instanceof HTMLInputElement) &&\n              radios[i].getAttribute('type') === 'radio' &&\n              radios[i] !== e.target\n            ) {\n              radios[i].parentElement.removeAttribute('checked');\n            }\n          }\n        }\n      });\n    }\n\n    else {\n      // tab index is on input element\n      for (const [key, value] of Object.entries({\n        // set important styles\n        // these value should not be editable\n        'box-sizing': 'border-box',\n        'display': 'block',\n        'font-size': 'inherit',\n        'line-height': '1.2'\n      })) {\n        input.style.setProperty(key, value, 'important');\n      }\n    }\n\n    this.host.prepend(input);\n    return input;\n  })()"
       }
@@ -290,0 +279,0 @@ };

dist/esm/loader.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-4e2c2395.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-eb26634b.js';
 
@@ -3,0 +3,0 @@ /*

dist/esm/skateui.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-4e2c2395.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-eb26634b.js';
 
@@ -3,0 +3,0 @@ /*

dist/esm/sui-button_8.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-4e2c2395.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb26634b.js';
 
@@ -519,6 +519,6 @@ const eventList = [
     this.closestLabel = null;
+    this.span = null;
     this.value = undefined;
     this.checked = undefined;
     this.el = (() => {
-      var _a, _b;
       // add input element manually because shadow dom input is not recognized by forms
@@ -533,21 +533,2 @@ let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing
       this.isChecker = inputType === 'checkbox' || inputType === 'radio';
-      // if class has reusable previous element
-      const previousInput = (_a = this.host.getElementsByTagName('input')) === null || _a === void 0 ? void 0 : _a[0];
-      if (previousInput && previousInput.hasAttribute('slot')) {
-        // if element already exists, return
-        // element can already exist when working on hot reloads
-        // setup new slot name
-        previousInput.setAttribute('slot', this.slotName);
-        // button input use additional span to display text
-        const previousSpan = (_b = this.host.getElementsByTagName('span')) === null || _b === void 0 ? void 0 : _b[0];
-        if (previousSpan) {
-          if (previousSpan.hasAttribute('slot') && previousSpan.getAttribute('slot') === 'value' && this.isButton) {
-            previousSpan.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
-          }
-          else {
-            previousSpan.remove();
-          }
-        }
-        return previousInput;
-      }
       // create new element
@@ -579,6 +560,6 @@ const input = document.createElement('input');
         // add button text
-        let span = document.createElement('span');
-        span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
-        span.setAttribute('slot', 'value');
-        this.host.prepend(span);
+        this.span = document.createElement('span');
+        this.span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
+        this.span.setAttribute('slot', 'value');
+        this.host.prepend(this.span);
       }
@@ -662,2 +643,10 @@ else if (this.isChecker) {
   }
+  componentDidRender() {
+    if (this.span && this.span.parentElement === null) {
+      this.host.prepend(this.span);
+    }
+    if (this.el && this.el.parentElement === null) {
+      this.host.prepend(this.el);
+    }
+  }
   componentDidLoad() {
@@ -664,0 +653,0 @@ dummyHandler.bind(this)({

dist/skateui/skateui.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as i}from"./p-92ec6d6b.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i([["p-aa5f7db8",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{minSize:[1026,"min-size"],maxSize:[1026,"max-size"]}],[1,"sui-input",{value:[1032],checked:[1032],el:[16]}],[1,"sui-nav",{autoHide:[2,"auto-hide"]}],[1,"sui-overlay",{position:[1],transitionTime:[1,"transition-time"],close:[64],open:[64]}],[1,"sui-select",{value:[8],el:[16],leftPadding:[32],rightPadding:[32],topPadding:[32],valueDisplay:[32]}],[1,"sui-textarea",{value:[1025],el:[16],textValue:[32]}],[1,"sui-tooltip",{classNames:[32],tipBackgroundColor:[32]},[[1,"mouseenter","setPosition"]]]]]],e)));
+import{p as e,b as i}from"./p-ca4ef40d.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i([["p-b6bed396",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{minSize:[1026,"min-size"],maxSize:[1026,"max-size"]}],[1,"sui-input",{value:[1032],checked:[1032],el:[16]}],[1,"sui-nav",{autoHide:[2,"auto-hide"]}],[1,"sui-overlay",{position:[1],transitionTime:[1,"transition-time"],close:[64],open:[64]}],[1,"sui-select",{value:[8],el:[16],leftPadding:[32],rightPadding:[32],topPadding:[32],valueDisplay:[32]}],[1,"sui-textarea",{value:[1025],el:[16],textValue:[32]}],[1,"sui-tooltip",{classNames:[32],tipBackgroundColor:[32]},[[1,"mouseenter","setPosition"]]]]]],e)));

dist/types/components/sui-input/sui-input.d.ts

@@ -13,3 +13,5 @@ export declare class SuiInput {
   closestLabel: any;
+  span: HTMLSpanElement;
   el: HTMLInputElement;
+  componentDidRender(): void;
   componentDidLoad(): void;
@@ -16,0 +18,0 @@ disconnectedCallback(): void;

package.json

 {
   "name": "skateui",
-  "version": "0.1.129",
+  "version": "0.1.130",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

522652

decreased by-0.58%

Lines of code

10135

decreased by-0.27%

No dependency changes