@v1nt1248/3nclient-lib 0.1.25 → 0.1.27

package/dist/variables.css

@@ -8,6 +8,8 @@
   --spacing-xxl: 48px;
   --white-0: #fff;
   --white-inf: rgba(255, 255, 255, 0);
+  --black-0: #000;
+  --black-inf: rgba(0, 0, 0, 0);
   --red-0: #feeeed;
   --red-5: #fcd9d6;
   --red-10: #fbc3bf;
@@ -146,6 +148,21 @@
   --s-default-outline-focused: var(--grey-50);
   --s-default-outline-pressed: var(--grey-15);
   --s-default-outline-disabled: var(--grey-10);
+  --t-default-fill-default: var(--grey-90);
+  --t-default-fill-hover: var(--grey-80);
+  --t-default-fill-focused: var(--grey-100);
+  --t-default-fill-pressed: var(--grey-100);
+  --t-default-fill-disabled: var(--grey-60);
+  --t-default-content-default: var(--grey-0);
+  --t-default-content-hover: var(--grey-5);
+  --t-default-content-focused: var(--grey-0);
+  --t-default-content-pressed: var(--grey-30);
+  --t-default-content-disabled: var(--grey-20);
+  --t-default-outline-default: var(--grey-0);
+  --t-default-outline-hover: var(--grey-5);
+  --t-default-outline-focused: var(--grey-0);
+  --t-default-outline-pressed: var(--grey-30);
+  --t-default-outline-disabled: var(--grey-20);
   --accent-fill-default: var(--blue-50);
   --accent-fill-hover: var(--blue-60);
   --accent-fill-focused: var(--blue-50);
@@ -290,6 +307,21 @@
   --s-default-outline-focused: var(--blue-50);
   --s-default-outline-pressed: var(--blue-80);
   --s-default-outline-disabled: var(--blue-85);
+  --t-default-fill-default: var(--grey-0);
+  --t-default-fill-hover: var(--grey-5);
+  --t-default-fill-focused: var(--grey-0);
+  --t-default-fill-pressed: var(--grey-30);
+  --t-default-fill-disabled: var(--grey-0);
+  --t-default-content-default: var(--grey-90);
+  --t-default-content-hover: var(--grey-80);
+  --t-default-content-focused: var(--grey-90);
+  --t-default-content-pressed: var(--grey-60);
+  --t-default-content-disabled: var(--grey-30);
+  --t-default-outline-default: var(--grey-90);
+  --t-default-outline-hover: var(--grey-80);
+  --t-default-outline-focused: var(--grey-90);
+  --t-default-outline-pressed: var(--grey-60);
+  --t-default-outline-disabled: var(--grey-30);
   --accent-fill-default: var(--blue-50);
   --accent-fill-hover: var(--blue-60);
   --accent-fill-focused: var(--blue-50);
@@ -422,6 +454,11 @@
   --color-bg-block-tritery-focused: var(--default-content-focused);
   --color-bg-block-tritery-pressed: var(--default-content-pressed);
   --color-bg-block-tritery-disabled: var(--default-content-disabled);
+  --color-bg-block-darkery-default: var(--t-default-fill-default);
+  --color-bg-block-darkery-hover: var(--t-default-fill-hover);
+  --color-bg-block-darkery-focused: var(--t-default-fill-focused);
+  --color-bg-block-darkery-pressed: var(--t-default-fill-pressed);
+  --color-bg-block-darkery-disabled: var(--t-default-fill-disabled);
   --color-bg-control-accent-default: var(--accent-fill-default);
   --color-bg-control-accent-hover: var(--accent-fill-hover);
   --color-bg-control-accent-focused: var(--accent-fill-focused);
@@ -547,6 +584,11 @@
   --color-text-block-secondary-focused: var(--default-hint-focused);
   --color-text-block-secondary-pressed: var(--default-hint-pressed);
   --color-text-block-secondary-disabled: var(--default-hint-disabled);
+  --color-text-block-darkery-default: var(--t-default-content-default);
+  --color-text-block-darkery-hover: var(--t-default-content-hover);
+  --color-text-block-darkery-focused: var(--t-default-content-focused);
+  --color-text-block-darkery-pressed: var(--t-default-content-pressed);
+  --color-text-block-darkery-disabled: var(--t-default-content-disabled);
   --color-text-block-warning-default: var(--warning-content-default);
   --color-text-block-warning-hover: var(--warning-content-hover);
   --color-text-block-warning-focused: var(--warning-content-focused);

package/package.json

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

package/src/components/ui3n-badge/ui3n-badge-simple.vue

@@ -39,11 +39,11 @@ function getElementSize() {
 <template>
   <div
     ref="element"
-    :class="[$style.badgeSimple, dot && $style.dot]"
+    :class="[$style.ui3nBadgeSimple, dot && $style.ui3nBadgeDot]"
   >
     <span
       v-if="!dot"
-      :class="$style.text"
+      :class="$style.ui3nBadgeText"
     >
       {{ value }}
     </span>
@@ -51,7 +51,7 @@ function getElementSize() {
 </template>
 
 <style lang="scss" module>
-.badgeSimple {
+.ui3nBadgeSimple {
   --ui3n-badge-size: 20px;
 
   position: relative;
@@ -59,7 +59,7 @@ function getElementSize() {
   background-color: v-bind(color);
   outline: 1px var(--white-0) solid;
 
-  &:not(.dot) {
+  &:not(.ui3nBadgeDot) {
     min-height: var(--ui3n-badge-size);
     height: var(--ui3n-badge-size);
     width: max-content;
@@ -68,7 +68,7 @@ function getElementSize() {
   }
 }
 
-.dot {
+.ui3nBadgeDot {
   min-width: var(--spacing-s);
   width: var(--spacing-s);
   max-width: var(--spacing-s);
@@ -78,7 +78,7 @@ function getElementSize() {
   border-radius: 50%;
 }
 
-.text {
+.ui3nBadgeText {
   display: block;
   color: v-bind(textColor);
   font-size: var(--font-12);

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

@@ -37,9 +37,9 @@ const style = computed(() => {
   <!-- eslint-disable vue/no-multiple-template-root -->
   <div
     v-if="hasDefaultSlot"
-    :class="$style.badge"
+    :class="$style.ui3nBadge"
   >
-    <div :class="$style.wrapper">
+    <div :class="$style.ui3nBadgeWrapper">
       <slot />
 
       <ui3n-badge-simple
@@ -48,7 +48,7 @@ const style = computed(() => {
         :color="color"
         :text-color="textColor"
         :style="style"
-        :class="$style.content"
+        :class="$style.ui3nBadgeContent"
         @change:size="badgeElementSize = $event"
       />
     </div>
@@ -64,18 +64,18 @@ const style = computed(() => {
 </template>
 
 <style lang="scss" module>
-.badge {
+.ui3nBadge {
   --ui3n-badge-size: 20px;
 
   position: relative;
 }
 
-.wrapper {
+.ui3nBadgeWrapper {
   position: relative;
   width: max-content;
 }
 
-.content {
+.ui3nBadgeContent {
   position: absolute;
   z-index: 5;
 }

package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, getCurrentInstance } from 'vue';
+import { computed, getCurrentInstance, useCssModule } from 'vue';
 import type { Ui3nBreadcrumbEmits, Ui3nBreadcrumbProps, Ui3nBreadcrumbSlots } from './types';
 
 const props = withDefaults(defineProps<Ui3nBreadcrumbProps>(), {
@@ -10,6 +10,8 @@ const props = withDefaults(defineProps<Ui3nBreadcrumbProps>(), {
 const emits = defineEmits<Ui3nBreadcrumbEmits>();
 defineSlots<Ui3nBreadcrumbSlots>();
 
+const $css = useCssModule();
+
 const separatorValue = computed(() => {
   if (props.separator) {
     return props.separator;
@@ -24,6 +26,14 @@ const parentDisabled = computed(() => {
   return instance?.parent?.props.disabled || false;
 });
 
+const cssClasses = computed(() => {
+  const val = [$css.ui3nBreadcrumb];
+  props.isActive && val.push($css.ui3nBreadcrumbActive);
+  (props.disabled || parentDisabled.value) && val.push($css.ui3nBreadcrumbDisabled);
+
+  return val;
+});
+
 const onClick = (ev: Event) => {
   emits('click', ev);
 };
@@ -31,13 +41,13 @@ const onClick = (ev: Event) => {
 
 <template>
   <div
-    :class="[$style.breadcrumb, isActive && $style.active, (disabled || parentDisabled) && $style.disabled]"
+    :class="cssClasses"
     v-on="isActive && !(disabled || parentDisabled) ? { click: onClick } : {}"
   >
     <slot />
     <div
       v-if="isActive"
-      :class="$style.separator"
+      :class="$style.ui3nBreadcrumbSeparator"
     >
       <slot name="separator">
         <span>{{ separatorValue }}</span>
@@ -47,7 +57,7 @@ const onClick = (ev: Event) => {
 </template>
 
 <style lang="scss" module>
-.breadcrumb {
+.ui3nBreadcrumb {
   --ui3n-breadcrumb-font-size: var(--spacing-m);
   --ui3n-breadcrumb-color-default: var(--color-text-block-primary-default);
   --ui3n-breadcrumb-color-selected: var(--color-text-block-accent-default);
@@ -63,7 +73,7 @@ const onClick = (ev: Event) => {
   margin: 0 var(--spacing-s);
 }
 
-.active {
+.ui3nBreadcrumbActive {
   font-size: var(--ui3n-breadcrumb-font-size);
   line-height: 1.25;
   color: var(--ui3n-breadcrumb-color-default);
@@ -72,13 +82,13 @@ const onClick = (ev: Event) => {
     cursor: pointer;
     color: var(--ui3n-breadcrumb-color-selected);
 
-    .separator {
+    .ui3nBreadcrumbSeparator {
       color: var(--ui3n-breadcrumb-color-default);
     }
   }
 }
 
-.disabled {
+.ui3nBreadcrumbDisabled {
   cursor: default;
   pointer-events: none;
 }

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

@@ -11,13 +11,13 @@ withDefaults(
 </script>
 
 <template>
-  <div :class="$style.breadcrumbs">
+  <div :class="$style.ui3nBreadcrumbs">
     <slot/>
   </div>
 </template>
 
 <style lang="scss" module>
-.breadcrumbs {
+.ui3nBreadcrumbs {
   position: relative;
   display: flex;
   flex-wrap: wrap;

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch, useCssModule } from 'vue';
 import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
 import Ui3nRipple from '../..//directives/ui3n-ripple';
 import type { Ui3nButtonEmits, Ui3nButtonProps, Ui3nButtonEventName } from './types';
@@ -17,9 +17,21 @@ const props = withDefaults(
 );
 const emits = defineEmits<Ui3nButtonEmits>();
 
+const $css = useCssModule();
+
 const buttonEl = ref<HTMLButtonElement | null>(null);
 
-async function handleButtonEvent(eventName: Ui3nButtonEventName, value?: Event ) {
+const mainCssClasses = computed(() => {
+  const val = [$css.ui3nButton, $css[props.size], $css[props.type]];
+
+  props.block && props.type !== 'icon' && val.push($css.block);
+  props.icon && val.push($css[`withIcon-${props.iconPosition}`]);
+  props.elevation && val.push($css.elevation);
+
+  return val;
+});
+
+async function handleButtonEvent(eventName: Ui3nButtonEventName, value?: Event) {
   if (['init', 'enter'].includes(eventName)) {
     // @ts-ignore
     emits(eventName, buttonEl.value);
@@ -39,20 +51,30 @@ watch(
 
     (props.type === 'custom' || props.type === 'icon')
     && color !== prevColor
-    && buttonEl.value.style.setProperty('--ui3n-button-bg-color-custom', color ?? 'var(--color-bg-button-primary-default)');
+    && buttonEl.value.style.setProperty(
+      '--ui3n-button-bg-color-custom',
+      color ?? 'var(--color-bg-button-primary-default)',
+    );
 
     props.type === 'custom'
     && textColor !== prevTextColor
-    && buttonEl.value.style.setProperty('--ui3n-button-text-color-custom', textColor ?? 'var(--color-text-button-primary-default');
+    && buttonEl.value.style.setProperty(
+      '--ui3n-button-text-color-custom',
+      textColor ?? 'var(--color-text-button-primary-default',
+    );
   },
 );
 
 onMounted(() => {
   if (!buttonEl.value) return;
 
-  (props.type === 'custom' || props.type === 'icon') && props.color && buttonEl.value.style.setProperty('--ui3n-button-bg-color-custom', props.color);
+  (props.type === 'custom' || props.type === 'icon')
+  && props.color
+  && buttonEl.value.style.setProperty('--ui3n-button-bg-color-custom', props.color);
 
-  props.type === 'custom' && props.textColor && buttonEl.value.style.setProperty('--ui3n-button-text-color-custom', props.textColor);
+  props.type === 'custom'
+  && props.textColor
+  && buttonEl.value.style.setProperty('--ui3n-button-text-color-custom', props.textColor);
 
   handleButtonEvent('init');
 });
@@ -62,14 +84,7 @@ onMounted(() => {
   <button
     ref="buttonEl"
     v-ui3n-ripple
-    :class="[
-      $style.button,
-      $style[size!],
-      $style[type!],
-      block && type !== 'icon' && $style.block,
-      icon && $style[`withIcon-${iconPosition}`],
-      elevation && $style.elevation,
-    ]"
+    :class="mainCssClasses"
     type="button"
     :disabled="disabled"
     @click="handleButtonEvent('click', $event)"
@@ -95,7 +110,7 @@ onMounted(() => {
 <style lang="scss" module>
 @import "../../assets/styles/mixins";
 
-.button {
+.ui3nButton {
   --ui3n-button-padding: var(--spacing-m);
   --ui3n-button-text-size: var(--font-12);
   --ui3n-button-text-color-custom: var(--color-text-button-primary-default);

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, watch, onBeforeMount, ref, useSlots } from 'vue';
+import { computed, onMounted, watch, onBeforeMount, ref, useCssModule, useSlots } from 'vue';
 import type { Ui3nCheckboxEmits, Ui3nCheckboxProps, Ui3nCheckboxSlots, Ui3nCheckboxValue } from './types';
 
 const props = withDefaults(
@@ -18,6 +18,8 @@ const emits = defineEmits<Ui3nCheckboxEmits>();
 defineSlots<Ui3nCheckboxSlots>();
 
 const slots = useSlots();
+const $css = useCssModule();
+
 const checkboxEl = ref<HTMLDivElement | null>(null);
 const val = ref<Ui3nCheckboxValue>(props.uncheckedValue || false);
 const uncertain = ref(false);
@@ -32,6 +34,23 @@ const checkBoxValue = computed(() => {
     : 'unchecked';
 });
 
+const mainCssClasses = computed(() => {
+  const val = [$css.ui3nCheckbox];
+
+  props.disabled && val.push($css.disabled);
+  !slots.default && val.push($css.noLabel);
+
+  return val;
+});
+
+const bodyCssClasses = computed(() => {
+  const val = [$css.ui3nCheckboxBody];
+
+  checkBoxValue.value === 'unchecked' ? val.push($css.unfilled) : val.push($css.filled);
+
+  return val;
+});
+
 onBeforeMount(() => {
   const checkedValueType = typeof props.checkedValue;
   const uncheckedValueType = typeof props.uncheckedValue;
@@ -99,10 +118,10 @@ function change() {
 <template>
   <div
     ref="checkboxEl"
-    :class="[$style.checkbox, disabled && $style.disabled, !slots.default && $style.noLabel]"
+    :class="mainCssClasses"
   >
     <div
-      :class="[$style.body, checkBoxValue === 'unchecked' ? $style.unfilled : $style.filled]"
+      :class="bodyCssClasses"
       @click="change"
     >
       <svg
@@ -112,7 +131,7 @@ function change() {
         viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        :class="$style.icon"
+        :class="$style.ui3nCheckboxIcon"
       >
         <g id="SVGRepo_bgCarrier" stroke-width="0" />
         <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
@@ -128,7 +147,7 @@ function change() {
         viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        :class="$style.icon"
+        :class="$style.ui3nCheckboxIcon"
       >
         <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
         <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
@@ -139,7 +158,7 @@ function change() {
     </div>
 
     <div
-      :class="$style.label"
+      :class="$style.ui3nCheckboxLabel"
       @click="change"
     >
       <slot />
@@ -150,7 +169,7 @@ function change() {
 <style lang="scss" module>
 @import "../../assets/styles/mixins";
 
-.checkbox {
+.ui3nCheckbox {
   --ui3n-checkbox-size: 16px;
   --ui3n-checkbox-color: var(--color-icon-control-accent-default);
   --ui3n-checkbox-text-size: 12px;
@@ -169,7 +188,7 @@ function change() {
   gap: 0;
 }
 
-.body {
+.ui3nCheckboxBody {
   position: relative;
   display: flex;
   width: var(--ui3n-checkbox-size);
@@ -201,12 +220,12 @@ function change() {
   }
 }
 
-.icon {
+.ui3nCheckboxIcon {
   min-height: calc(var(--ui3n-checkbox-size) - 4px);
   min-width: calc(var(--ui3n-checkbox-size) - 4px);
 }
 
-.label {
+.ui3nCheckboxLabel {
   font-size: var(--ui3n-checkbox-text-size);
   font-weight: var(--ui3n-checkbox-text-weight);
   color: var(--ui3n-checkbox-text-color);

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue';
+import { computed, useCssModule, useSlots } from 'vue';
 import Ui3nButton from '../ui3n-button/ui3n-button.vue';
 import type { Ui3nChipEmits, Ui3nChipProps, Ui3nChipSlots } from './types';
 
@@ -21,6 +21,7 @@ const emits = defineEmits<Ui3nChipEmits>();
 defineSlots<Ui3nChipSlots>();
 
 const slots = useSlots();
+const $css = useCssModule();
 
 const height = computed(() => `${props.height}px`);
 const iconHeight = computed(() => props.height ? Number(props.height) - 2 : Number(props.height));
@@ -30,23 +31,26 @@ const bgColor = computed(() => props.color);
 const textSize = computed(() => `${props.textSize}px`);
 const textColor = computed(() => props.textColor);
 const hasLeftSlot = computed(() => !!slots.left);
+
+const mainCssClasses = computed(() => {
+  const val = [$css.ui3nChip];
+
+  props.round && val.push($css.round);
+  props.plain && val.push($css.plain);
+  props.closeable && val.push($css.closeable);
+  hasLeftSlot.value && val.push($css.withIcon);
+
+  return val;
+});
 </script>
 
 <template>
-  <div
-    :class="[
-      $style.chip,
-      round && $style.round,
-      plain && $style.plain,
-      closeable && $style.closable,
-      hasLeftSlot && $style.withIcon,
-    ]"
-  >
-    <div :class="$style.icon">
+  <div :class="mainCssClasses">
+    <div :class="$style.ui3nChipIcon">
       <slot name="left" :size="iconHeight" :color="props.textColor" />
     </div>
 
-    <div :class="$style.body">
+    <div :class="$style.ui3nChipBody">
       <slot />
     </div>
 
@@ -66,7 +70,7 @@ const hasLeftSlot = computed(() => !!slots.left);
 <style lang="scss" module>
 @import "../../assets/styles/mixins";
 
-.chip {
+.ui3nChip {
   position: relative;
   display: flex;
   height: v-bind('height');
@@ -96,7 +100,7 @@ const hasLeftSlot = computed(() => !!slots.left);
   }
 }
 
-.body {
+.ui3nChipBody {
   font-size: v-bind('textSize');
   line-height: 1;
   font-weight: 400;
@@ -111,7 +115,7 @@ const hasLeftSlot = computed(() => !!slots.left);
 }
 
 .withIcon {
-  .icon {
+  .ui3nChipIcon {
     display: flex;
     flex-grow: 0;
     flex-shrink: 0;

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

@@ -53,19 +53,19 @@ onMounted(() => {
   }
 });
 
-const selectData = (value: any) => {
+function selectData(value: any) {
   data.value = value;
   if (!dialogProps.value.confirmButton && !dialogProps.value.cancelButton && props.dialogProps?.onConfirm) {
     props.dialogProps?.onConfirm(data.value);
     closeDialog();
   }
-};
+}
 
-const validate = (value: boolean) => {
+function validate(value: boolean) {
   isValid.value = value;
-};
+}
 
-const closeDialog = (arg?: { ev?: Event; withAction?: boolean }) => {
+function closeDialog(arg?: { ev?: Event; withAction?: boolean }) {
   const { ev, withAction = true } = arg || {};
   if (ev) {
     ev.stopImmediatePropagation();
@@ -76,9 +76,9 @@ const closeDialog = (arg?: { ev?: Event; withAction?: boolean }) => {
   if (withAction) {
     emits('close');
   }
-};
+}
 
-const startEmit = (event: Ui3nDialogEvent) => {
+function startEmit(event: Ui3nDialogEvent) {
   if (event === 'click-overlay') {
     emits(event);
     closeDialog();
@@ -101,13 +101,13 @@ const startEmit = (event: Ui3nDialogEvent) => {
     // @ts-ignore
     emits(event);
   }
-};
+}
 
-const handleEvent = (event: Event, eventName: Ui3nDialogEvent) => {
+function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
   event.stopImmediatePropagation();
   event.preventDefault();
   startEmit(eventName);
-};
+}
 </script>
 
 <template>