@v1nt1248/3nclient-lib 0.1.22 → 0.1.24

package/dist/variables.css

@@ -202,7 +202,7 @@
   --warning-content-disabled: var(--orange-30);
   --warning-outline-default: var(--orange-5);
   --warning-outline-hover: var(--orange-10);
-  --warning-outline-focused: var(--orange-50);
+  --warning-outline-focused: var(--orange-70);
   --warning-outline-pressed: var(--orange-10);
   --warning-outline-disabled: var(--orange-5);
   --success-fill-default: var(--emerald-5);
@@ -217,7 +217,7 @@
   --success-content-disabled: var(--emerald-30);
   --success-outline-default: var(--emerald-5);
   --success-outline-hover: var(--emerald-10);
-  --success-outline-focused: var(--emerald-50);
+  --success-outline-focused: var(--emerald-70);
   --success-outline-pressed: var(--emerald-10);
   --success-outline-disabled: var(--emerald-5);
   --error-fill-default: var(--red-5);
@@ -232,7 +232,7 @@
   --error-content-disabled: var(--red-30);
   --error-outline-default: var(--red-5);
   --error-outline-hover: var(--red-10);
-  --error-outline-focused: var(--red-50);
+  --error-outline-focused: var(--red-70);
   --error-outline-pressed: var(--red-10);
   --error-outline-disabled: var(--red-5);
   --info-fill-default: var(--blue-5);
@@ -346,7 +346,7 @@
   --warning-content-disabled: var(--orange-30);
   --warning-outline-default: var(--orange-5);
   --warning-outline-hover: var(--orange-10);
-  --warning-outline-focused: var(--orange-50);
+  --warning-outline-focused: var(--orange-70);
   --warning-outline-pressed: var(--orange-10);
   --warning-outline-disabled: var(--orange-5);
   --success-fill-default: var(--emerald-5);
@@ -361,7 +361,7 @@
   --success-content-disabled: var(--emerald-30);
   --success-outline-default: var(--emerald-5);
   --success-outline-hover: var(--emerald-10);
-  --success-outline-focused: var(--emerald-50);
+  --success-outline-focused: var(--emerald-70);
   --success-outline-pressed: var(--emerald-10);
   --success-outline-disabled: var(--emerald-5);
   --error-fill-default: var(--red-5);
@@ -376,7 +376,7 @@
   --error-content-disabled: var(--red-30);
   --error-outline-default: var(--red-5);
   --error-outline-hover: var(--red-10);
-  --error-outline-focused: var(--red-50);
+  --error-outline-focused: var(--red-70);
   --error-outline-pressed: var(--red-10);
   --error-outline-disabled: var(--red-5);
   --info-fill-default: var(--blue-5);
@@ -568,6 +568,9 @@
   --color-text-chat-bubble-other-sub: var(--default-hint-default);
   --color-text-chat-bubble-other-sub-selected: var(--accent-content-default);
   --color-text-chat-bubble-other-sub-quote: var(--default-hint-default);
+  --color-border-button-primary-focused: var(--accent-outline-focused);
+  --color-border-button-secondary-focused: var(--s-accent-outline-focused);
+  --color-border-button-tritery-focused: var(--s-default-outline-focused);
   --color-border-block-primary-default: var(--default-outline-default);
   --color-border-block-primary-hover: var(--default-outline-hover);
   --color-border-block-primary-focused: var(--default-outline-focused);
@@ -744,3 +747,21 @@ div {
 .fade-leave-active {
   opacity: 0;
 }
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.ui3n-ripple {
+  --ui3n-ripple-duration: 400ms;
+  --ui3n-ripple-bg-color: rgba(255, 255, 255, 0.7);
+  
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple var(--ui3n-ripple-duration) linear;
+  background-color: var(--ui3n-ripple-bg-color);
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/ui3n-button/types.ts

@@ -15,6 +15,9 @@ export interface Ui3nButtonProps {
 export interface Ui3nButtonEmits {
   (ev: 'init', value: HTMLButtonElement): void;
   (ev: 'click', value: Event): void;
+  (ev: 'enter', value: HTMLButtonElement): void;
   (ev: 'focus', value: Event): void;
   (ev: 'blur', value: Event): void;
 }
+
+export type Ui3nButtonEventName = 'init' | 'click' | 'enter' | 'focus' | 'blur';

package/src/components/ui3n-button/ui3n-button.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
 import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
-import type { Ui3nButtonEmits, Ui3nButtonProps } from './types';
+import Ui3nRipple from '../..//directives/ui3n-ripple';
+import type { Ui3nButtonEmits, Ui3nButtonProps, Ui3nButtonEventName } from './types';
+
+const vUi3nRipple = Ui3nRipple;
 
 const props = withDefaults(
   defineProps<Ui3nButtonProps>(),
@@ -16,6 +19,16 @@ const emits = defineEmits<Ui3nButtonEmits>();
 
 const buttonEl = ref<HTMLButtonElement | null>(null);
 
+async function handleButtonEvent(eventName: Ui3nButtonEventName, value?: Event ) {
+  if (['init', 'enter'].includes(eventName)) {
+    // @ts-ignore
+    emits(eventName, buttonEl.value);
+  } else {
+    // @ts-ignore
+    emits(eventName, value!);
+  }
+}
+
 watch(
   [() => props.color, () => props.textColor],
   (newValue: [string | undefined, string | undefined], prevValue: [string | undefined, string | undefined]) => {
@@ -41,26 +54,28 @@ onMounted(() => {
 
   props.type === 'custom' && props.textColor && buttonEl.value.style.setProperty('--ui3n-button-text-color-custom', props.textColor);
 
-  emits('init', buttonEl.value);
+  handleButtonEvent('init');
 });
 </script>
 
 <template>
   <button
     ref="buttonEl"
+    v-ui3n-ripple
     :class="[
       $style.button,
-      $style[size],
-      $style[type],
+      $style[size!],
+      $style[type!],
       block && type !== 'icon' && $style.block,
       icon && $style[`withIcon-${iconPosition}`],
       elevation && $style.elevation,
     ]"
     type="button"
     :disabled="disabled"
-    @click="emits('click', $event)"
-    @focusin="emits('focus', $event)"
-    @focusout="emits('blur', $event)"
+    @click="handleButtonEvent('click', $event)"
+    @focusin="handleButtonEvent('focus', $event)"
+    @focusout="handleButtonEvent('blur', $event)"
+    @keydown.enter="handleButtonEvent('enter')"
   >
     <ui3n-icon
       v-if="icon"
@@ -86,6 +101,8 @@ onMounted(() => {
   --ui3n-button-text-color-custom: var(--color-text-button-primary-default);
   --ui3n-button-bg-color-custom: var(--color-bg-button-primary-default);
 
+  position: relative;
+  width: max-content;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -97,6 +114,11 @@ onMounted(() => {
   font-weight: 600;
   line-height: calc(var(--ui3n-button-text-size) * 1.25);
   user-select: none;
+  overflow: hidden;
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
 }
 
 .regular {
@@ -136,7 +158,10 @@ onMounted(() => {
   &:hover {
     background: var(--color-bg-button-primary-hover);
     color: var(--color-text-button-primary-hover);
-    @include ripple(var(--color-bg-button-primary-hover));
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-border-button-primary-focused);
   }
 
   &[disabled] {
@@ -153,7 +178,10 @@ onMounted(() => {
   &:hover {
     background: var(--color-bg-button-secondary-hover);
     color: var(--color-text-button-secondary-hover);
-    @include ripple(var(--color-bg-button-secondary-hover));
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-border-button-secondary-focused);
   }
 
   &[disabled] {
@@ -175,6 +203,10 @@ onMounted(() => {
     cursor: pointer;
   }
 
+  &:focus {
+    outline: 1px solid var(--color-border-button-secondary-focused);
+  }
+
   &[disabled] {
     background: transparent;
     color: var(--color-text-button-secondary-disabled);
@@ -203,7 +235,10 @@ onMounted(() => {
 
   &:hover {
     background: var(--ui3n-button-icon-bg-color);
-    @include ripple(var(--ui3n-button-icon-bg-color));
+  }
+
+  &:focus {
+    outline: 1px solid hsl(from var(--ui3n-button-icon-bg-color) h s calc(l - 10));
   }
 
   &[disabled] {
@@ -220,7 +255,10 @@ onMounted(() => {
 
   &:hover {
     background: var(--ui3n-button-custom-bg-color);
-    @include ripple(var(--ui3n-button-custom-bg-color));
+  }
+
+  &:focus {
+    outline: 1px solid hsl(from var(--ui3n-button-custom-bg-color) h s calc(l - 10));
   }
 
   &[disabled] {

package/src/components/ui3n-input/types.ts

@@ -15,12 +15,20 @@ export interface Ui3nInputProps {
 }
 
 export interface Ui3nInputEmits {
-  (ev: 'init', value: HTMLInputElement): void;
-  (ev: 'input', value: string): void;
-  (ev: 'focus', value: Event): void;
-  (ev: 'blur', value: Event): void;
-  (ev: 'clear'): void;
-  (ev: 'change', value: string): void;
-  (ev: 'update:modelValue', value: string): void;
-  (ev: 'update:valid', value: boolean): void;
+  (event: 'init', value: HTMLInputElement): void;
+  (event: 'input', value: string): void;
+  (event: 'focus', value: Event): void;
+  (event: 'blur', value: Event): void;
+  (event: 'clear'): void;
+  (event: 'change', value: string): void;
+  (event: 'enter', value: {
+    value: string;
+    altKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    metaKey: boolean;
+  }): void;
+  (event: 'escape', value: Event): void;
+  (event: 'update:modelValue', value: string): void;
+  (event: 'update:valid', value: boolean): void;
 }

package/src/components/ui3n-input/ui3n-input.vue

@@ -77,6 +77,21 @@ function onInput(ev: Event) {
   emits('input', value);
 }
 
+function onEnterKeydown(event: KeyboardEvent) {
+  const { altKey, ctrlKey, metaKey, shiftKey, target } = event;
+  const value = (target as HTMLInputElement).value;
+  validate(value);
+  emits('update:modelValue', value);
+  emits('enter', { value , altKey, ctrlKey, metaKey, shiftKey });
+}
+
+function onEscapeKeydown(event: KeyboardEvent) {
+  const value = (event.target as HTMLInputElement).value;
+  validate(value);
+  emits('update:modelValue', value);
+  emits('escape', event);
+}
+
 function clearValue() {
   text.value = '';
   validate('');
@@ -127,6 +142,8 @@ function validate(text: string) {
       :disabled="disabled"
       :class="$style.field"
       @input="onInput"
+      @keydown.enter="onEnterKeydown"
+      @keydown.escape="onEscapeKeydown"
       @focusin="onFocus"
       @focusout="onBlur"
       @change="onChange"

package/src/components/ui3n-text/types.ts

@@ -9,10 +9,19 @@ export interface Ui3nTextProps {
 }
 
 export interface Ui3nTextEmits {
-  (ev: 'init', value: HTMLTextAreaElement): void;
-  (ev: 'input', value: string): void;
-  (ev: 'focus', value: Event): void;
-  (ev: 'blur', value: Event): void;
-  (ev: 'update:text', value: string): void;
-  (ev: 'update:valid', value: boolean): void;
+  (event: 'init', value: HTMLTextAreaElement): void;
+  (event: 'input', value: string): void;
+  (event: 'change', value: string): void;
+  (event: 'enter', value: {
+    value: string;
+    altKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    metaKey: boolean;
+  }): void;
+  (event: 'escape', value: Event): void;
+  (event: 'focus', value: Event): void;
+  (event: 'blur', value: Event): void;
+  (event: 'update:text', value: string): void;
+  (event: 'update:valid', value: boolean): void;
 }

package/src/components/ui3n-text/ui3n-text.vue

@@ -40,7 +40,7 @@ watch(
   { immediate: true },
 );
 
-const validate = (text: string) => {
+function validate(text: string) {
   errorMessage.value = '';
   if (props.rules && props.rules.length) {
     for (const validateFunction of props.rules) {
@@ -52,24 +52,45 @@ const validate = (text: string) => {
       }
     }
   }
-};
+}
 
-const onFocus = (event: Event) => {
+function onFocus(event: Event) {
   isFocused.value = true;
   emit('focus', event);
-};
+}
 
-const onBlur = (event: Event) => {
+function onBlur(event: Event) {
   isFocused.value = false;
+  const value = (event.target as HTMLInputElement).value;
+  validate(value);
   emit('blur', event);
-};
+  emit('change', value);
+  emit('update:text', value);
+}
 
-const onInput = (ev: Event) => {
-  const value = (ev.target as HTMLInputElement).value;
+function onInput(event: Event) {
+  console.log('onInput!');
+  const value = (event.target as HTMLInputElement).value;
   validate(value);
   emit('update:text', value);
   emit('input', value);
-};
+}
+
+function onEnterKeydown(event: KeyboardEvent) {
+  console.log('onEnterKeydown: ', event);
+  const { altKey, ctrlKey, shiftKey, metaKey, target } = event;
+  const value = (target as HTMLInputElement).value;
+  validate(value);
+  emit('update:text', value);
+  emit('enter', { value , altKey, ctrlKey, shiftKey, metaKey });
+}
+
+function onEscapeKeydown(event: KeyboardEvent) {
+  const value = (event.target as HTMLInputElement).value;
+  validate(value);
+  emit('update:text', value);
+  emit('escape', event);
+}
 </script>
 
 <template>
@@ -89,6 +110,8 @@ const onInput = (ev: Event) => {
         :disabled="disabled"
         v-bind="$attrs"
         @input="onInput"
+        @keydown.enter="onEnterKeydown"
+        @keydown.escape="onEscapeKeydown"
         @focusin="onFocus"
         @focusout="onBlur"
       />