@aotearoan/neon 22.1.2 → 22.2.0

package/dist/src/neon.d.ts

@@ -125,6 +125,7 @@ export { NeonDateUtils } from './common/utils/NeonDateUtils';
 export { NeonDebounceUtils } from './common/utils/NeonDebounceUtils';
 export { NeonDropdownPlacementUtils } from './common/utils/NeonDropdownPlacementUtils';
 export { NeonEventBus } from './common/utils/NeonEventBus';
+export { fileToDataURL } from './common/utils/NeonFileUtils';
 export { NeonIconRegistry } from './common/utils/NeonIconRegistry';
 export { NeonJazziconUtils } from './common/utils/NeonJazziconUtils';
 export { NeonModeUtils } from './common/utils/NeonModeUtils';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "22.1.2",
+  "version": "22.2.0",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_badge.scss

@@ -2,6 +2,8 @@
 
 @mixin badge {
   .neon-badge {
+    position: relative;
+
     &--with-icon,
     &--with-label {
       @each $color in palettes.$neon-functional-colors {
@@ -29,10 +31,85 @@
       }
     }
 
+    &--editable {
+      .neon-badge__upload {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        .neon-button-group {
+          width: 100%;
+          height: 100%;
+        }
+
+        .neon-button {
+          width: 100%;
+          height: 100%;
+
+          &--circular {
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .neon-badge__clear {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+
+      &.neon-badge--xxl {
+        .neon-button {
+          svg {
+            width: 50%;
+            height: 50%;
+          }
+        }
+      }
+
+      @each $color in palettes.$neon-functional-colors {
+        &.neon-badge--#{$color}:not(.neon-badge--disabled) {
+          .neon-badge__upload {
+            .neon-button {
+              background: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-badge-editable-button));
+              transition: background-color ease-in-out var(--neon-animation-speed-slow);
+
+              &:focus,
+              &:hover {
+                background: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-badge-editable-button-hover));
+              }
+            }
+          }
+        }
+      }
+
+      &:not(.neon-badge--disabled) {
+        &.neon-badge--with-icon,
+        &.neon-badge--with-label {
+          .neon-badge__label,
+          .neon-badge__icon {
+            opacity: var(--neon-opacity-badge-editable-content);
+          }
+        }
+      }
+    }
+
     &--disabled {
       color: var(--neon-color-disabled-text);
       background: var(--neon-color-disabled-background);
       cursor: not-allowed;
+
+      &.neon-badge--editable {
+        .neon-button {
+          background: rgba(var(--neon-rgb-disabled-background), 0.75);
+
+          svg {
+            display: none;
+          }
+        }
+      }
     }
 
     $neon-badge-sizes: (s, m, l, xl, xxl);

package/src/sass/includes/_dependencies.scss

@@ -11,7 +11,7 @@
           NeonIcon,
           NeonLink],
           NeonAnchor: [],
-          NeonBadge: [NeonIcon],
+          NeonBadge: [NeonIcon, NeonFile, NeonButton, NeonInput, NeonList, NeonExpansionIndicator, NeonIcon, NeonLink],
           NeonButton: [NeonExpansionIndicator,
           NeonIcon,
           NeonLink],

package/src/sass/variables.scss

@@ -327,6 +327,9 @@
   --neon-size-l-badge: var(--neon-size-l);
   --neon-size-xl-badge: var(--neon-size-xl);
   --neon-size-xxl-badge: var(--neon-size-xxl);
+  --neon-opacity-badge-editable-button: 0.33;
+  --neon-opacity-badge-editable-button-hover: 0.66;
+  --neon-opacity-badge-editable-content: 0.33;
 
   /* color input */
   --neon-border-radius-input-color: 50%;