@semantic-ui/component - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

package.json

 {
   "name": "@semantic-ui/component",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
@@ -16,7 +16,7 @@ "main": "src/index.js",
   "dependencies": {
-    "@semantic-ui/query": "^0.0.7",
-    "@semantic-ui/reactivity": "^0.0.7",
-    "@semantic-ui/templating": "^0.0.7",
-    "@semantic-ui/utils": "^0.0.7"
+    "@semantic-ui/query": "^0.0.8",
+    "@semantic-ui/reactivity": "^0.0.8",
+    "@semantic-ui/templating": "^0.0.8",
+    "@semantic-ui/utils": "^0.0.8"
   }
 }

src/create-component.js

@@ -93,7 +93,6 @@ import { unsafeCSS } from 'lit';
 
-      settings = proxyObject(() => this.getSettings({componentSpec, properties: webComponent.properties }));
-
       constructor() {
         super();
         this.css = css;
+        this.settings = this.createSettingsProxy({componentSpec, properties: webComponent.properties});
         this.setDefaultSettings(settings);
@@ -100,0 +99,0 @@ }

src/engines/lit/directives/reactive-conditional.js

@@ -41,2 +41,5 @@ import { nothing } from 'lit';
       }
+      else {
+        html = nothing;
+      }
       if(!html) {
@@ -43,0 +46,0 @@ html = nothing;

src/helpers/adjust-setting-from-attribute.js

@@ -34,2 +34,3 @@ import { get, each, inArray, isString } from '@semantic-ui/utils';
 export const adjustSettingFromAttribute = (el, attribute, attributeValue, componentSpec) => {
+
   const getSettingValue = (setting, attributeValue) => {
@@ -96,2 +97,5 @@ const value = tokenizeSpaces(attributeValue); // right arrow -> right-arrow
       }
+      if(attributeValue === null) {
+        removeSetting(attribute);
+      }
 
@@ -107,3 +111,2 @@ if(attributeValue !== undefined) {
       const setting = lookupSettingFromValue(attribute);
-
       // when a value is unset it is passed null in this case a boolean attribute was removed
@@ -116,5 +119,4 @@ if(attributeValue === null) {
       }
-
     }
   }
 };

src/web-component.js

@@ -181,8 +181,16 @@ import { LitElement } from 'lit';
         // this is an easy way to determine if this is a boolean or string attribute
-        const isContent = inArray(attribute, componentSpec.contentAttributes);
-        const sampleValue = isContent ? '' : attributeValues[0];
+        let sampleValue;
+        if(inArray(attribute, componentSpec.contentAttributes)) {
+          sampleValue = '';
+        }
+        else if(inArray(attribute, componentSpec.settings)) {
+          sampleValue = componentSpec.defaultSettings[attribute];
+        }
+        else {
+          sampleValue = attributeValues[0];
+        }
         properties[attribute] = WebComponentBase.getPropertySettings(sampleValue, attribute);
       });
+      const reservedWords = ['settings', 'true', 'false'];
       each(componentSpec.reverseAttributes, (attributeValues, attribute) => {
-        const reservedWords = ['settings'];
         if(!inArray(attribute, reservedWords)) {
@@ -226,3 +234,3 @@ properties[attribute] = { type: String, reflect: false };
         // we have to use an accessor if the name is reserved
-        noAccessor: !inArray(name, ['focus', 'disabled']),
+        //noAccessor: inArray(name, ['focus', 'disabled']),
         attribute: true,
@@ -232,3 +240,3 @@ // simplify the use case of setting setting="false"
           fromAttribute: (value, type) => {
-            if (inArray(value, ['false', '0', 'undefined'])) {
+            if (inArray(value, ['false', '0', 'null', 'undefined'])) {
               return false;
@@ -325,2 +333,32 @@ }
 
+  /* This may get more complex if we choose to support
+     reverse attribute lookups like setSetting('large', true);
+  */
+  setSetting(name, value) {
+    this[name] = value;
+  }
+
+
+  /* Create a proxy object which returns the current setting
+     we need this over a getter/setter because settings are
+     destructured in function arguments
+     i.e. onCreated({settings}) { }
+  */
+  createSettingsProxy({componentSpec, properties}) {
+    let component = this;
+    return new Proxy({}, {
+      get: (target, property) => {
+        const settings = component.getSettings({
+          componentSpec,
+          properties
+        });
+        return get(settings, property);
+      },
+      set: (target, property, value, receiver) => {
+        component.setSetting(property, value);
+        return true;
+      }
+    });
+  }
+
   /*
@@ -327,0 +365,0 @@ This returns a list of styling classes to pass through to

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

48828

increased by2.42%

Lines of code

1489

increased by2.83%

Dependency changes

• + Added@semantic-ui/query@0.0.8(transitive)

• + Added@semantic-ui/reactivity@0.0.8(transitive)

• - Removed@semantic-ui/query@0.0.7(transitive)

• - Removed@semantic-ui/reactivity@0.0.7(transitive)

• - Removed@semantic-ui/templating@0.0.7(transitive)

• - Removed@semantic-ui/utils@0.0.7(transitive)

• Updated@semantic-ui/query@^0.0.8

• Updated@semantic-ui/reactivity@^0.0.8

• Updated@semantic-ui/templating@^0.0.8

• Updated@semantic-ui/utils@^0.0.8