@v1nt1248/3nclient-lib 0.1.59 → 0.1.61

package/dist/variables.css

@@ -12,11 +12,13 @@
   --white-8: rgba(250, 250, 250, 0.08);
   --white-12: rgba(250, 250, 250, 0.12);
   --white-24: rgba(250, 250, 250, 0.24);
+  --white-48: rgba(250, 250, 250, 0.48);
   --black-inf: rgba(0, 0, 0, 0);
   --black-4: rgba(0, 0, 0, 0.04);
   --black-8: rgba(0, 0, 0, 0.08);
   --black-12: rgba(0, 0, 0, 0.12);
   --black-24: rgba(0, 0, 0, 0.24);
+  --black-48: rgba(0, 0, 0, 0.48);
   --black-100: #000;
   --red-0: #feeeed;
   --red-5: #fcd9d6;
@@ -119,6 +121,10 @@
 }
 
 .default-theme {
+  --ripple: var(--white-48);
+  --shadow-key-1: var(--black-12);
+  --shadow-key-2: var(--black-8);
+  --shadow-key-3: var(--black-4);
   --shadow-close: var(--black-4);
   --shadow-far: var(--black-8);
   --global-default: var(--grey-5);
@@ -281,6 +287,10 @@
 }
 
 .dark-theme {
+  --ripple: var(--black-48);
+  --shadow-key-1: var(--white-12);
+  --shadow-key-2: var(--white-8);
+  --shadow-key-3: var(--white-4);
   --shadow-close: var(--black-12);
   --shadow-far: var(--black-24);
   --global-default: var(--blue-95);
@@ -750,10 +760,6 @@
 }
 
 html {
-  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
-  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
-  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
-
   overflow: hidden;
   font-family: Manrope, sans-serif;
 }
@@ -771,17 +777,17 @@ div {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: var(--grey-30);
+  background-color: var(--s-default-outline-focused);
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 2px;
   height: 50px;
-  background-color: var(--grey-70);
+  background-color: var(--default-fill-pressed);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--grey-90);
+  background-color: var(--t-default-fill-default);
 }
 
 ::-webkit-resizer {
@@ -815,7 +821,7 @@ div {
 
 .ui3n-ripple {
   --ui3n-ripple-duration: 400ms;
-  --ui3n-ripple-bg-color: rgba(255, 255, 255, 0.7);
+  --ui3n-ripple-bg-color: var(--ripple);
 
   position: absolute;
   border-radius: 50%;
@@ -836,8 +842,8 @@ div {
   font-weight: 400;
   word-wrap: break-word;
   white-space: break-spaces;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
-  0 1px 1px 0 rgba(0, 0, 0, 0.14),
-  0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 1px -1px var(--shadow-key-1),
+  0 1px 1px 0 var(--shadow-key-2),
+  0 1px 3px 0 var(--shadow-key-3);
   z-index: 1000;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -102,7 +102,7 @@
     "vue": "3.5.13",
     "vue-tsc": "2.2.0"
   },
-  "packageManager": "pnpm@9.15.3",
+  "packageManager": "pnpm@10.2.1",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

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

@@ -35,6 +35,7 @@ export interface Ui3nEditableProps {
 
 export interface Ui3nEditableEmits {
   (event: 'update:modelValue', value: Nullable<string>): void;
+  (event: 'toggle:editMode', value: boolean): void;
   (event: 'done'): void;
   (event: 'cancel'): void;
   (event: 'focusin', value: FocusEvent): void;

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

@@ -117,6 +117,13 @@
       }
     },
   );
+
+  watch(
+    () => inEdit.value,
+    val => {
+      emits('toggle:editMode', val);
+    },
+  );
 </script>
 
 <template>

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

@@ -43,12 +43,12 @@ defineSlots<Ui3nListSlots<T>>();
 <style lang="scss" module>
 .ui3nList {
   --ui3n-list-item-height: 28px;
-  --ui3n-list-bg-color: transparent;
+  --ui3n-list-bg-color: var(--color-bg-block-primary-default);
 
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: transparent;
+  background-color: var(--ui3n-list-bg-color);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

package/src/components/ui3n-virtual-scroll/ui3n-virtual-scroll.vue

@@ -79,6 +79,7 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  background-color: var(--color-bg-block-primary-default);
 }
 
 .viewport {