@flux-ui/components 3.1.3 → 3.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.1.3",
+    "version": "3.1.4",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -57,8 +57,8 @@
     "dependencies": {
         "@basmilius/common": "^3.43.0",
         "@basmilius/utils": "^3.43.0",
-        "@flux-ui/internals": "3.1.3",
-        "@flux-ui/types": "3.1.3",
+        "@flux-ui/internals": "3.1.4",
+        "@flux-ui/types": "3.1.4",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

package/src/component/FluxButton.vue

@@ -3,6 +3,7 @@
         :component-type="type"
         :class="clsx(
             cssClass,
+            isActive && cssClassActive,
             isFilled && $style.isFilled,
             size === 'small' && $style.isSmall,
             size === 'medium' && $style.isMedium,
@@ -11,6 +12,7 @@
         )"
         :type="isSubmit ? 'submit' : 'button'"
         :aria-disabled="disabled ? true : undefined"
+        :aria-pressed="isActive && type === 'button' ? true : undefined"
         :disabled="disabled ? true : undefined"
         :tabindex="disabled ? -1 : tabindex"
         :href="href"
@@ -82,6 +84,7 @@
         type = 'button'
     } = defineProps<FluxButtonProps & {
         readonly cssClass: string;
+        readonly cssClassActive?: string;
         readonly cssClassIcon: string;
         readonly cssClassLabel: string;
     }>();

package/src/component/FluxDestructiveButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.destructiveButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.destructiveButtonIcon"
         :css-class-label="$style.destructiveButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxFlyout.vue

@@ -16,8 +16,7 @@
         <dialog
             ref="dialog"
             :class="$style.flyoutDialog"
-            @click="onDialogBackdropClick"
-            @keydown.prevent.esc="close">
+            @click="onDialogBackdropClick">
             <FluxPane
                 v-if="isOpen"
                 ref="pane"
@@ -46,6 +45,12 @@
     import { FluxFlyoutInjectionKey } from '~flux/components/data';
     import FluxPane from './FluxPane.vue';
     import $style from '~flux/components/css/component/Flyout.module.scss';
+    import { useHotKey } from '@basmilius/common';
+
+    const emit = defineEmits<{
+        close: [];
+        open: [];
+    }>();
 
     const {
         direction = 'vertical',
@@ -93,6 +98,11 @@
     !isSSR && useEventListener(ref(window), 'resize', () => unref(isOpen) && reposition());
     useFocusTrap(paneRef);
 
+    useHotKey('esc', () => close(), {
+        enabled: isOpen,
+        target: dialogRef
+    });
+
     let closeAnimationEndListener: ((evt: AnimationEvent) => void) | null = null;
     let openAnimationEndListener: ((evt: AnimationEvent) => void) | null = null;
 
@@ -233,11 +243,13 @@
 
         if (isOpen && !dialog.open) {
             dialog.showModal();
+            emit('open');
 
             window.addEventListener('scroll', reposition, {passive: true});
             onCleanup(() => window.removeEventListener('scroll', reposition));
         } else if (!isOpen && dialog.open) {
             dialog.close();
+            emit('close');
         }
     });
 
@@ -250,6 +262,7 @@
     defineExpose({
         close,
         open,
-        toggle
+        toggle,
+        isOpen
     });
 </script>

package/src/component/FluxPrimaryButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.primaryButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.primaryButtonIcon"
         :css-class-label="$style.primaryButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxPrimaryLinkButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.primaryLinkButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.primaryLinkButtonIcon"
         :css-class-label="$style.primaryLinkButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxPublishButton.vue

@@ -1,12 +1,13 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :class="clsx(
             !isDone && !isLoading && $style.isIdle,
             isDone && $style.isDone,
             isLoading && $style.isLoading
         )"
         :css-class="$style.publishButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.publishButtonIcon"
         :css-class-label="$style.publishButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxSecondaryButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.secondaryButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.secondaryButtonIcon"
         :css-class-label="$style.secondaryButtonLabel"
         @click="$emit('click', $event)"

package/src/component/FluxSecondaryLinkButton.vue

@@ -1,7 +1,8 @@
 <template>
     <FluxButton
-        :="{type, disabled, iconLeading, iconTrailing, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
+        :="{type, disabled, iconLeading, iconTrailing, isActive, isFilled, isLoading, isSubmit, label, size, tabindex, href, rel, target, to}"
         :css-class="$style.secondaryLinkButton"
+        :css-class-active="$style.isActive"
         :css-class-icon="$style.secondaryLinkButtonIcon"
         :css-class-label="$style.secondaryLinkButtonLabel"
         @click="$emit('click', $event)"

package/src/css/mixin/button-active.scss

@@ -1,6 +1,8 @@
 @mixin button-active($background) {
-    &:active {
+    &:active,
+    &.isActive {
         background: $background;
+        box-shadow: none;
         scale: .9875;
     }
 }