New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@featherds/chips
Advanced tools
@featherds/chips - npm Package Compare versions
Comparing version 0.2.4 to 0.2.5
@@ -31,2 +31,8 @@ var __defProp = Object.defineProperty; | ||
| var Chip_vue_vue_type_style_index_0_scoped_true_lang = '.chip[data-v-3454cba5] {\n margin: 0;\n margin-right: 8px;\n margin-bottom: 8px;\n height: 32px;\n list-style: none;\n display: inline-flex;\n align-items: center;\n background-color: var(--feather-border-light-on-surface);\n border-radius: 16px;\n border: 1px solid transparent;\n min-width: 0;\n max-width: 288px;\n padding: 0 4px;\n}\n.chip .ripple[data-v-3454cba5] {\n background-color: var(--feather-state-color-on-neutral);\n opacity: var(--feather-state-opacity-pressed-on-neutral);\n}\n.chip.selected[data-v-3454cba5],\n.chip .selected[data-v-3454cba5] {\n background: linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-selected-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-selected-on-neutral))), linear-gradient(var(--feather-border-light-on-surface), var(--feather-border-light-on-surface));\n}\n.chip.hover[data-v-3454cba5]:hover, .chip:hover .hover[data-v-3454cba5] {\n background: linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-hover-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-hover-on-neutral))), linear-gradient(var(--feather-border-light-on-surface), var(--feather-border-light-on-surface));\n}\n.chip.hover:hover.selected[data-v-3454cba5], .chip:hover .hover.selected[data-v-3454cba5] {\n background: linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-selected-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-selected-on-neutral))), linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-hover-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-hover-on-neutral))), linear-gradient(var(--feather-border-light-on-surface), var(--feather-border-light-on-surface));\n}\n.chip:focus.focus[data-v-3454cba5], .chip:focus .focus[data-v-3454cba5], .chip.focused.focus[data-v-3454cba5], .chip.focused .focus[data-v-3454cba5] {\n background: linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-focus-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-focus-on-neutral))), linear-gradient(var(--feather-border-light-on-surface), var(--feather-border-light-on-surface));\n}\n.chip:focus.focus.selected[data-v-3454cba5], .chip:focus .focus.selected[data-v-3454cba5], .chip.focused.focus.selected[data-v-3454cba5], .chip.focused .focus.selected[data-v-3454cba5] {\n background: linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-selected-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-selected-on-neutral))), linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-focus-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-focus-on-neutral))), linear-gradient(var(--feather-border-light-on-surface), var(--feather-border-light-on-surface));\n}\n.chip:hover:focus .focus.hover[data-v-3454cba5], .chip:hover:focus.focus.hover[data-v-3454cba5], .chip:hover.focused .focus.hover[data-v-3454cba5], .chip:hover.focused.focus.hover[data-v-3454cba5] {\n background: linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-hover-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-hover-on-neutral))), linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-focus-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-focus-on-neutral))), linear-gradient(var(--feather-border-light-on-surface), var(--feather-border-light-on-surface));\n}\n.chip:hover:focus .focus.hover.selected[data-v-3454cba5], .chip:hover:focus.focus.hover.selected[data-v-3454cba5], .chip:hover.focused .focus.hover.selected[data-v-3454cba5], .chip:hover.focused.focus.hover.selected[data-v-3454cba5] {\n background: linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-selected-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-selected-on-neutral))), linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-hover-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-hover-on-neutral))), linear-gradient(rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-focus-on-neutral)), rgba(var(--feather-state-color-on-neutral-r), var(--feather-state-color-on-neutral-g), var(--feather-state-color-on-neutral-b), var(--feather-state-opacity-focus-on-neutral))), linear-gradient(var(--feather-border-light-on-surface), var(--feather-border-light-on-surface));\n}\n.chip[data-v-3454cba5]:focus {\n outline: none;\n}\n.chip.hover[data-v-3454cba5] {\n cursor: pointer;\n}\n.chip.hover[data-v-3454cba5] .ripple {\n display: block;\n}\n.chip[data-v-3454cba5] .ripple {\n display: none;\n}\n.chip[data-v-3454cba5] > span[role="gridcell"]:not(.chip-delete) {\n display: flex;\n flex: 1;\n min-width: 0;\n}\n.chip[data-v-3454cba5] > span[role="gridcell"]:not(.chip-delete) .chip-label-button {\n min-width: 0;\n}\n.chip.focused[data-v-3454cba5]:not(.disabled) {\n border: 1px solid var(--feather-border-on-surface);\n outline: 0;\n}\n.chip.focused[data-v-3454cba5]:not(.disabled) .label {\n color: var(--feather-primary-text-on-surface);\n}\n.chip.disabled[data-v-3454cba5] {\n color: var(--feather-disabled-text-on-surface);\n background-color: var(--feather-border-light-on-surface);\n cursor: default;\n}\n.chip.disabled.selected[data-v-3454cba5],\n.chip.disabled .selected[data-v-3454cba5] {\n background: var(--feather-border-light-on-surface);\n}\n.chip.disabled.hover[data-v-3454cba5]:hover, .chip.disabled:hover .hover[data-v-3454cba5] {\n background: var(--feather-border-light-on-surface);\n}\n.chip.disabled.hover:hover.selected[data-v-3454cba5], .chip.disabled:hover .hover.selected[data-v-3454cba5] {\n background: var(--feather-border-light-on-surface);\n}\n.chip.disabled:focus.focus[data-v-3454cba5], .chip.disabled:focus .focus[data-v-3454cba5] {\n background: var(--feather-border-light-on-surface);\n}\n.chip.disabled:focus.focus.selected[data-v-3454cba5], .chip.disabled:focus .focus.selected[data-v-3454cba5] {\n background: var(--feather-border-light-on-surface);\n}\n.chip.disabled:hover:focus .focus.hover[data-v-3454cba5], .chip.disabled:hover:focus.focus.hover[data-v-3454cba5] {\n background: var(--feather-border-light-on-surface);\n}\n.chip.disabled:hover:focus .focus.hover.selected[data-v-3454cba5], .chip.disabled:hover:focus.focus.hover.selected[data-v-3454cba5] {\n background: var(--feather-border-light-on-surface);\n}\n.chip.disabled .label[data-v-3454cba5] {\n color: var(--feather-disabled-text-on-surface);\n cursor: default;\n}\n.chip.disabled .label[data-v-3454cba5]:hover {\n color: var(--feather-disabled-text-on-surface);\n}\n.chip.disabled[data-v-3454cba5] .ripple {\n display: none;\n}\n.chip.disabled[data-v-3454cba5] .chip-icon > .feather-icon {\n color: var(--feather-disabled-text-on-surface);\n}\n.chip.condensed[data-v-3454cba5] {\n height: 26px;\n padding: 0;\n}'; | ||
| var _export_sfc = (sfc, props) => { | ||
| for (const [key, val] of props) { | ||
| sfc[key] = val; | ||
| } | ||
| return sfc; | ||
| }; | ||
| const _sfc_main$8 = { | ||
@@ -89,4 +95,3 @@ props: { | ||
| } | ||
| _sfc_main$8.render = _sfc_render$7; | ||
| _sfc_main$8.__scopeId = "data-v-3454cba5"; | ||
| var Chip = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7], ["__scopeId", "data-v-3454cba5"]]); | ||
| var DeleteIcon_vue_vue_type_style_index_0_scoped_true_lang = ".chip-delete[data-v-6c60e4e0] {\n display: inline-flex;\n align-items: center;\n pointer-events: auto;\n position: relative;\n width: 22px;\n height: 18px;\n z-index: 1;\n flex-shrink: 0;\n}\n.chip-delete .delete-icon[data-v-6c60e4e0] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n font-size: 18px;\n height: 18px;\n margin-right: 4px;\n color: var(--feather-secondary-text-on-surface);\n cursor: pointer;\n}\n.chip-delete .delete-icon[data-v-6c60e4e0]:hover {\n color: var(--feather-primary-text-on-surface);\n}\n.chip-delete .delete-icon[data-v-6c60e4e0]:focus {\n outline: 0;\n}"; | ||
@@ -147,4 +152,3 @@ const _sfc_main$7 = { | ||
| } | ||
| _sfc_main$7.render = _sfc_render$6; | ||
| _sfc_main$7.__scopeId = "data-v-6c60e4e0"; | ||
| var DeleteIcon = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6], ["__scopeId", "data-v-6c60e4e0"]]); | ||
| var Label_vue_vue_type_style_index_0_scoped_true_lang = ".label[data-v-5fe439b1] {\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-secondary-text-on-surface);\n margin-right: 12px;\n margin-left: 12px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n -webkit-user-select: none;\n user-select: none;\n}"; | ||
@@ -184,4 +188,3 @@ const _sfc_main$6 = { | ||
| } | ||
| _sfc_main$6.render = _sfc_render$5; | ||
| _sfc_main$6.__scopeId = "data-v-5fe439b1"; | ||
| var Label = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5], ["__scopeId", "data-v-5fe439b1"]]); | ||
| var PreIcon_vue_vue_type_style_index_0_scoped_true_lang = ".chip-icon[data-v-6ef70725] {\n height: 24px;\n width: 24px;\n border-radius: 100%;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n background-color: var(--feather-border-on-surface);\n}\n.chip-icon[data-v-6ef70725] .feather-icon {\n font-size: 18px;\n height: 18px;\n color: var(--feather-secondary-text-on-surface);\n}"; | ||
@@ -200,4 +203,3 @@ const _sfc_main$5 = {}; | ||
| } | ||
| _sfc_main$5.render = _sfc_render$4; | ||
| _sfc_main$5.__scopeId = "data-v-6ef70725"; | ||
| var PreIcon = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4], ["__scopeId", "data-v-6ef70725"]]); | ||
| var GridChip_vue_vue_type_style_index_0_scoped_true_lang = "[role=gridcell][data-v-4cf8b170] {\n height: 100%;\n}\n.chip-label-button[data-v-4cf8b170] {\n height: 100%;\n display: inline-flex;\n align-items: center;\n}\n.chip-label-button[data-v-4cf8b170]:focus {\n outline: 0;\n}"; | ||
@@ -266,6 +268,6 @@ const LABELS = { | ||
| components: { | ||
| Chip: _sfc_main$8, | ||
| DeleteIcon: _sfc_main$7, | ||
| Label: _sfc_main$6, | ||
| PreIcon: _sfc_main$5 | ||
| Chip, | ||
| DeleteIcon, | ||
| Label, | ||
| PreIcon | ||
| } | ||
@@ -320,4 +322,3 @@ }; | ||
| } | ||
| _sfc_main$4.render = _sfc_render$3; | ||
| _sfc_main$4.__scopeId = "data-v-4cf8b170"; | ||
| var GridChip = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$3], ["__scopeId", "data-v-4cf8b170"]]); | ||
| var ReadonlyChip_vue_vue_type_style_index_0_scoped_true_lang = "[role=gridcell][data-v-461384ea] {\n height: 100%;\n display: inline-flex;\n align-items: center;\n}"; | ||
@@ -342,5 +343,5 @@ const _sfc_main$3 = { | ||
| components: { | ||
| Chip: _sfc_main$8, | ||
| Label: _sfc_main$6, | ||
| PreIcon: _sfc_main$5 | ||
| Chip, | ||
| Label, | ||
| PreIcon | ||
| } | ||
@@ -383,4 +384,3 @@ }; | ||
| } | ||
| _sfc_main$3.render = _sfc_render$2; | ||
| _sfc_main$3.__scopeId = "data-v-461384ea"; | ||
| var ReadonlyChip = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2], ["__scopeId", "data-v-461384ea"]]); | ||
| var RadioChip_vue_vue_type_style_index_0_scoped_true_lang = "[role=radio][data-v-364d0741] {\n cursor: pointer;\n}"; | ||
@@ -444,5 +444,5 @@ const _sfc_main$2 = { | ||
| components: { | ||
| Chip: _sfc_main$8, | ||
| Label: _sfc_main$6, | ||
| PreIcon: _sfc_main$5 | ||
| Chip, | ||
| Label, | ||
| PreIcon | ||
| } | ||
@@ -485,4 +485,3 @@ }; | ||
| } | ||
| _sfc_main$2.render = _sfc_render$1; | ||
| _sfc_main$2.__scopeId = "data-v-364d0741"; | ||
| var RadioChip = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1], ["__scopeId", "data-v-364d0741"]]); | ||
| const _sfc_main$1 = { | ||
@@ -514,8 +513,8 @@ props: { | ||
| if (this.format === "grid") { | ||
| return renderChip(_sfc_main$4); | ||
| return renderChip(GridChip); | ||
| } | ||
| if (this.format === "radio") { | ||
| return renderChip(_sfc_main$2); | ||
| return renderChip(RadioChip); | ||
| } | ||
| return renderChip(_sfc_main$3); | ||
| return renderChip(ReadonlyChip); | ||
| } | ||
@@ -587,4 +586,3 @@ }; | ||
| } | ||
| _sfc_main.render = _sfc_render; | ||
| _sfc_main.__scopeId = "data-v-f5d5306a"; | ||
| export { _sfc_main$8 as BaseChip, _sfc_main$6 as BaseChipLabel, _sfc_main$5 as BaseChipPreIcon, _sfc_main$1 as FeatherChip, _sfc_main as FeatherChipList }; | ||
| var FeatherChipList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f5d5306a"]]); | ||
| export { Chip as BaseChip, Label as BaseChipLabel, PreIcon as BaseChipPreIcon, _sfc_main$1 as FeatherChip, FeatherChipList }; |
| { | ||
| "name": "@featherds/chips", | ||
| "version": "0.2.4", | ||
| "version": "0.2.5", | ||
| "publishConfig": { | ||
@@ -12,7 +12,7 @@ "access": "public" | ||
| "dependencies": { | ||
| "@featherds/composables": "^0.2.4", | ||
| "@featherds/icon": "^0.2.4", | ||
| "@featherds/radio": "^0.2.4", | ||
| "@featherds/ripple": "^0.2.4", | ||
| "@featherds/styles": "^0.2.4", | ||
| "@featherds/composables": "^0.2.5", | ||
| "@featherds/icon": "^0.2.5", | ||
| "@featherds/radio": "^0.2.5", | ||
| "@featherds/ripple": "^0.2.5", | ||
| "@featherds/styles": "^0.2.5", | ||
| "vue": "^3.1.0-0" | ||
@@ -25,3 +25,3 @@ }, | ||
| "types": "./src/index.d.ts", | ||
| "gitHead": "14a6e4fa352587dafe9f5e533d289439b8c3ca74" | ||
| "gitHead": "8178471231a961203ce2380b3435eda2e1e9eb39" | ||
| } |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.28%
102287
Worsened metrics
- Lines of code
- decreased by-0.15%
1352
Dependency changes
Updated@featherds/icon@^0.2.5
Updated@featherds/radio@^0.2.5
Updated@featherds/ripple@^0.2.5
Updated@featherds/styles@^0.2.5