@v1nt1248/3nclient-lib 0.1.21 → 0.1.23

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.21",
+  "version": "0.1.23",
   "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/ui3n-input.vue

@@ -38,7 +38,10 @@ onMounted(() => {
 
 watch(
   () => props.modelValue,
-  val => text.value = val,
+  val => {
+    text.value = val;
+    validate(text.value);
+  },
   { immediate: true },
 );
 
@@ -48,40 +51,42 @@ watch(
   { immediate: true },
 );
 
-const onFocus = (event: Event) => {
+function onFocus(event: Event) {
   isFocused.value = true;
   emits('focus', event);
-};
+}
 
-const onBlur = (event: Event) => {
-  isFocused.value = false;
-  emits('blur', event);
-};
+function onBlur(event: Event) {
+  setTimeout(() => {
+    isFocused.value = false;
+    emits('blur', event);
+  }, 100);
+}
 
-const onChange = (event: Event) => {
+function onChange(event: Event) {
   const value = (event.target as HTMLInputElement).value;
   validate(value);
   emits('change', value);
-};
+}
 
-const onInput = (ev: Event) => {
+function onInput(ev: Event) {
   const value = (ev.target as HTMLInputElement).value;
   text.value = value;
   validate(value);
   emits('update:modelValue', value);
   emits('input', value);
-};
+}
 
-const clearValue = () => {
+function clearValue() {
   text.value = '';
   validate('');
   emits('update:modelValue', '');
   emits('input', '');
   emits('change', '');
   emits('clear');
-};
+}
 
-const validate = (text: string) => {
+function validate(text: string) {
   errorMessage.value = '';
   if (props.rules && props.rules.length) {
     for (const validateFunction of props.rules) {
@@ -93,7 +98,7 @@ const validate = (text: string) => {
       }
     }
   }
-};
+}
 </script>
 
 <template>
@@ -135,6 +140,15 @@ const validate = (text: string) => {
       :class="[$style.icon, disabled && $style.iconDisabled]"
     />
 
+    <ui3n-icon
+      v-if="displayStateMode === 'success' && displayStateWithIcon && !isFocused"
+      icon="round-check-circle-outline"
+      :width="16"
+      :height="16"
+      color="var(--success-content-default)"
+      :class="$style.successIcon"
+    />
+
     <ui3n-button
       v-if="clearable && !!text && !(displayStateMode === 'success' && displayStateWithIcon && !isFocused)"
       type="icon"
@@ -147,20 +161,11 @@ const validate = (text: string) => {
       @click="clearValue"
     />
 
-    <ui3n-icon
-      v-if="displayStateMode === 'success' && displayStateWithIcon && !isFocused"
-      icon="round-check-circle-outline"
-      :width="16"
-      :height="16"
-      color="var(--success-content-default)"
-      :class="$style.successIcon"
-    />
-
     <div
       v-if="errorMessage || displayStateMessage"
       :class="[
         $style.fieldMessage,
-        errorMessage || (displayStateMode === 'error' && !!displayStateMessage) && $style.errorMessage,
+        (errorMessage || (displayStateMode === 'error' && !!displayStateMessage)) && $style.errorMessage,
         displayStateMode === 'success' && displayStateMessage && $style.successMessage,
       ]"
     >
@@ -260,7 +265,7 @@ const validate = (text: string) => {
   position: absolute;
   right: 0;
   top: calc((var(--ui3n-input-height) - 24px) / 2);
-  z-index: 1;
+  z-index: 2;
 }
 
 .fieldMessage {
@@ -319,8 +324,14 @@ const validate = (text: string) => {
     top: calc((var(--ui3n-input-height) - 16px) / 2 + 20px);
   }
 
+  .successIcon {
+    bottom: auto;
+    top: calc((var(--ui3n-input-height) - 16px) / 2 + 20px);
+  }
+
   .clearBtn {
     top: calc((var(--ui3n-input-height) - 24px) / 2 + 20px);
+    z-index: 1;
   }
 }
 </style>