@featherds/radio - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

dist/app.es.js

@@ -29,2 +29,8 @@ var __defProp = Object.defineProperty;
 var FeatherRadio_vue_vue_type_style_index_0_scoped_true_lang = ".feather-radio[data-v-4c4910a8]:focus {\n  outline: 0;\n}\n.feather-radio .ripple[data-v-4c4910a8] {\n  background-color: var(--feather-state-color-on-surface);\n  opacity: var(--feather-state-opacity-pressed-on-surface);\n}\n.feather-radio.selected[data-v-4c4910a8],\n.feather-radio .selected[data-v-4c4910a8] {\n  background: linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-selected-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-selected-on-surface))), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));\n}\n.feather-radio.hover[data-v-4c4910a8]:hover, .feather-radio:hover .hover[data-v-4c4910a8] {\n  background: linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-hover-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-hover-on-surface))), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));\n}\n.feather-radio.hover:hover.selected[data-v-4c4910a8], .feather-radio:hover .hover.selected[data-v-4c4910a8] {\n  background: linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-selected-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-selected-on-surface))), linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-hover-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-hover-on-surface))), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));\n}\n.feather-radio:focus.focus[data-v-4c4910a8], .feather-radio:focus .focus[data-v-4c4910a8] {\n  background: linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-focus-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-focus-on-surface))), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));\n}\n.feather-radio:focus.focus.selected[data-v-4c4910a8], .feather-radio:focus .focus.selected[data-v-4c4910a8] {\n  background: linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-selected-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-selected-on-surface))), linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-focus-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-focus-on-surface))), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));\n}\n.feather-radio:hover:focus .focus.hover[data-v-4c4910a8], .feather-radio:hover:focus.focus.hover[data-v-4c4910a8] {\n  background: linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-hover-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-hover-on-surface))), linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-focus-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-focus-on-surface))), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));\n}\n.feather-radio:hover:focus .focus.hover.selected[data-v-4c4910a8], .feather-radio:hover:focus.focus.hover.selected[data-v-4c4910a8] {\n  background: linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-selected-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-selected-on-surface))), linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-hover-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-hover-on-surface))), linear-gradient(rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-focus-on-surface)), rgba(var(--feather-state-color-on-surface-r), var(--feather-state-color-on-surface-g), var(--feather-state-color-on-surface-b), var(--feather-state-opacity-focus-on-surface))), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));\n}\n.layout-container[data-v-4c4910a8] {\n  display: inline-block;\n  line-height: 0;\n}\n.feather-radio[data-v-4c4910a8] {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  margin-left: -8px;\n}\n.feather-radio .radio[data-v-4c4910a8] {\n  height: 36px;\n  width: 36px;\n  display: inline-block;\n  padding: 8px;\n  border-radius: 100%;\n}\n.feather-radio .icon[data-v-4c4910a8] {\n  height: 20px;\n  width: 20px;\n  border: 2px solid var(--feather-secondary-text-on-surface);\n  background-color: transparent;\n  border-radius: 100%;\n  position: relative;\n}\n.feather-radio .dot[data-v-4c4910a8] {\n  position: absolute;\n  height: 16px;\n  width: 16px;\n  fill: var(--feather-primary);\n  border-radius: 100%;\n  opacity: 0;\n  transform: scale(0);\n}\n.feather-radio .label[data-v-4c4910a8] {\n  font-family: var(--feather-font-family);\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  letter-spacing: 0.01786em;\n  font-weight: var(--feather-font-normal);\n  color: var(--feather-primary-text-on-surface);\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: var(--feather-primary-text-on-surface);\n  min-width: 24px;\n  padding-right: 12px;\n  padding-left: 4px;\n}\n.feather-radio:hover[aria-disabled=true][data-v-4c4910a8] {\n  cursor: default;\n}\n.feather-radio[aria-checked=true] .icon[data-v-4c4910a8] {\n  border-color: var(--feather-primary);\n}\n.feather-radio[aria-checked=true] .dot[data-v-4c4910a8] {\n  transition: all 280ms ease-in-out;\n  opacity: 1;\n  transform: scale(1);\n}\n.feather-radio[aria-disabled=true].selected[data-v-4c4910a8],\n.feather-radio[aria-disabled=true] .selected[data-v-4c4910a8] {\n  background: rgba(0, 0, 0, 0);\n}\n.feather-radio[aria-disabled=true].hover[data-v-4c4910a8]:hover, .feather-radio[aria-disabled=true]:hover .hover[data-v-4c4910a8] {\n  background: rgba(0, 0, 0, 0);\n}\n.feather-radio[aria-disabled=true].hover:hover.selected[data-v-4c4910a8], .feather-radio[aria-disabled=true]:hover .hover.selected[data-v-4c4910a8] {\n  background: rgba(0, 0, 0, 0);\n}\n.feather-radio[aria-disabled=true]:focus.focus[data-v-4c4910a8], .feather-radio[aria-disabled=true]:focus .focus[data-v-4c4910a8] {\n  background: rgba(0, 0, 0, 0);\n}\n.feather-radio[aria-disabled=true]:focus.focus.selected[data-v-4c4910a8], .feather-radio[aria-disabled=true]:focus .focus.selected[data-v-4c4910a8] {\n  background: rgba(0, 0, 0, 0);\n}\n.feather-radio[aria-disabled=true]:hover:focus .focus.hover[data-v-4c4910a8], .feather-radio[aria-disabled=true]:hover:focus.focus.hover[data-v-4c4910a8] {\n  background: rgba(0, 0, 0, 0);\n}\n.feather-radio[aria-disabled=true]:hover:focus .focus.hover.selected[data-v-4c4910a8], .feather-radio[aria-disabled=true]:hover:focus.focus.hover.selected[data-v-4c4910a8] {\n  background: rgba(0, 0, 0, 0);\n}\n.feather-radio[aria-disabled=true] .icon[data-v-4c4910a8] {\n  border-color: var(--feather-disabled-text-on-surface);\n}\n.feather-radio[aria-disabled=true] .label[data-v-4c4910a8] {\n  color: var(--feather-disabled-text-on-surface);\n}\n.feather-radio[aria-disabled=true] .dot[data-v-4c4910a8] {\n  fill: var(--feather-disabled-text-on-surface);\n}";
+var _export_sfc = (sfc, props) => {
+  for (const [key, val] of props) {
+    sfc[key] = val;
+  }
+  return sfc;
+};
 const _sfc_main$1 = {
@@ -136,4 +142,3 @@ props: {
 }
-_sfc_main$1.render = _sfc_render$1;
-_sfc_main$1.__scopeId = "data-v-4c4910a8";
+var FeatherRadio = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-4c4910a8"]]);
 var FeatherRadioGroup_vue_vue_type_style_index_0_scoped_true_lang = ".group-label[data-v-52544096] {\n  font-family: var(--feather-header-font-family);\n  color: var(--feather-primary-text-on-surface);\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: var(--feather-font-bold);\n  letter-spacing: 0.00714286em;\n  display: block;\n  color: var(--feather-primary-text-on-surface);\n  min-width: 24px;\n}\n.feather-radio-group-container[data-v-52544096] {\n  padding-top: 12px;\n  padding-bottom: 12px;\n  line-height: 0;\n}\n.feather-radio-group-container[data-v-52544096] .layout-container {\n  margin-right: 48px;\n}\n.feather-radio-group-container[data-v-52544096] .layout-container:last-of-type {\n  margin-right: 0;\n}\n.feather-radio-group-container.vertical[data-v-52544096] .layout-container {\n  display: block;\n  margin-bottom: 16px;\n  margin-right: 0;\n}\n.feather-radio-group-container label[data-v-52544096] {\n  margin-bottom: 16px;\n}\n.feather-radio-group-container .feather-input-sub-text[data-v-52544096] {\n  padding: 16px 0 0 0;\n}";
@@ -213,4 +218,3 @@ const _sfc_main = {
 }
-_sfc_main.render = _sfc_render;
-_sfc_main.__scopeId = "data-v-52544096";
-export { _sfc_main$1 as FeatherRadio, _sfc_main as FeatherRadioGroup };
+var FeatherRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-52544096"]]);
+export { FeatherRadio, FeatherRadioGroup };

package.json

 {
   "name": "@featherds/radio",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "publishConfig": {
@@ -12,6 +12,6 @@ "access": "public"
   "dependencies": {
-    "@featherds/composables": "^0.2.4",
-    "@featherds/input-helper": "^0.2.4",
-    "@featherds/ripple": "^0.2.4",
-    "@featherds/styles": "^0.2.4",
+    "@featherds/composables": "^0.2.5",
+    "@featherds/input-helper": "^0.2.5",
+    "@featherds/ripple": "^0.2.5",
+    "@featherds/styles": "^0.2.5",
     "vue": "^3.1.0-0"
@@ -24,3 +24,3 @@ },
   "types": "./src/index.d.ts",
-  "gitHead": "14a6e4fa352587dafe9f5e533d289439b8c3ca74"
+  "gitHead": "8178471231a961203ce2380b3435eda2e1e9eb39"
 }

src/components/FeatherRadioGroup/FeatherRadioGroup.spec.js

@@ -68,2 +68,17 @@ import { mount } from "@vue/test-utils";
 
+  it("should select non null or undefined falsey value", async () => {
+    const slots = {
+      default: [getRadio(0, false), getRadio(1, false)],
+    };
+    const wrapper = getWrapper({
+      slots,
+      propsData: { modelValue: 0 },
+    });
+    await nextTick();
+    await nextTick();
+    expect(
+      wrapper.findAll("[role='radio']")[0].attributes("aria-checked")
+    ).toBe("true");
+  });
+
   it("should set first property on first radio if none match the value", async () => {
@@ -70,0 +85,0 @@ const slots = {

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

64278

increased by0.91%

Lines of code

840

increased by2.19%

Dependency changes

• Updated@featherds/composables@^0.2.5

• Updated@featherds/input-helper@^0.2.5

• Updated@featherds/ripple@^0.2.5

• Updated@featherds/styles@^0.2.5