@v1nt1248/3nclient-lib 0.1.26 → 0.1.27

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { computed, onMounted, useCssModule } from 'vue';
 import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
 import Ui3nButton from '../ui3n-button/ui3n-button.vue';
 import type { Ui3nNotificationProps } from './types';
@@ -43,6 +43,19 @@ const stylesByTypes = {
   },
 };
 
+const $css = useCssModule();
+
+const mainCssClasses = computed(() => {
+  const val = [$css.ui3nNotification, $css[`${props.type}Type`], $css[`${props.position}Position`]];
+  props.withIcon && val.push($css.withIcon);
+
+  return val;
+});
+
+function closeNotification() {
+  props.onClose();
+}
+
 onMounted(() => {
   if (props.duration > 500) {
     setTimeout(() => {
@@ -50,29 +63,25 @@ onMounted(() => {
     }, props.duration);
   }
 });
-
-const closeNotification = () => {
-  props.onClose();
-};
 </script>
 
 <template>
   <div
     :id="id"
-    :class="[$style.notification, $style[`${type}Type`], $style[`${position}Position`], withIcon && $style.withIcon]"
+    :class="mainCssClasses"
   >
-    <div v-if="withIcon" :class="$style.icon">
+    <div v-if="withIcon" :class="$style.ui3nNotificationIcon">
       <ui3n-icon
-        :icon="stylesByTypes[type].icon"
+        :icon="stylesByTypes[type!].icon"
         width="16"
         height="16"
-        :rotate="stylesByTypes[type].iconRotate"
-        :color="stylesByTypes[type].iconColor"
+        :rotate="stylesByTypes[type!].iconRotate"
+        :color="stylesByTypes[type!].iconColor"
       />
     </div>
 
 
-    <div :class="$style.content">
+    <div :class="$style.ui3nNotificationContent">
       {{ content }}
     </div>
 
@@ -82,7 +91,7 @@ const closeNotification = () => {
       size="small"
       color="transparent"
       icon="round-close"
-      :icon-color="stylesByTypes[type].color"
+      :icon-color="stylesByTypes[type!].color"
       :class="$style.closeBtn"
       @click="closeNotification"
     />
@@ -90,7 +99,7 @@ const closeNotification = () => {
 </template>
 
 <style lang="scss" module>
-.notification {
+.ui3nNotification {
   --ui3n-notification-width: 380px;
 
   display: flex;
@@ -110,7 +119,7 @@ const closeNotification = () => {
   justify-content: flex-start;
 }
 
-.icon {
+.ui3nNotificationIcon {
   position: relative;
   min-width: var(--spacing-l);
   width: var(--spacing-l);
@@ -122,7 +131,7 @@ const closeNotification = () => {
   align-items: center;
 }
 
-.content {
+.ui3nNotificationContent {
   position: relative;
   flex-grow: 2;
   font-size: var(--font-12);
@@ -140,11 +149,11 @@ const closeNotification = () => {
 .infoType {
   background-color: var(--info-fill-default);
 
-  .icon {
+  .ui3nNotificationIcon {
     background-color: var(--info-content-default);
   }
 
-  .content {
+  .ui3nNotificationContent {
     color: var(--info-content-default);
   }
 }
@@ -152,11 +161,11 @@ const closeNotification = () => {
 .successType {
   background-color: var(--success-fill-default);
 
-  .icon {
+  .ui3nNotificationIcon {
     background-color: var(--success-content-default);
   }
 
-  .content {
+  .ui3nNotificationContent {
     color: var(--success-content-default);
   }
 }
@@ -164,11 +173,11 @@ const closeNotification = () => {
 .warningType {
   background-color: var(--warning-fill-default);
 
-  .icon {
+  .ui3nNotificationIcon {
     background-color: var(--warning-content-default);
   }
 
-  .content {
+  .ui3nNotificationContent {
     color: var(--warning-content-default);
   }
 }
@@ -176,11 +185,11 @@ const closeNotification = () => {
 .errorType {
   background-color: var(--error-fill-default);
 
-  .icon {
+  .ui3nNotificationIcon {
     background-color: var(--error-content-default);
   }
 
-  .content {
+  .ui3nNotificationContent {
     color: var(--error-content-default);
   }
 }

package/src/components/ui3n-progress/ui3n-progress-circular.vue

@@ -80,7 +80,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="element" :class="[$style.progress, indeterminate && $style.indeterminate]">
+  <div ref="element" :class="[$style.ui3nProgressCircular, indeterminate && $style.indeterminate]">
     <svg :height="innerSize" :width="innerSize" :class="$style.pie" xmlns="http://www.w3.org/2000/svg">
       <circle :class="$style.background" :r="circleRadius" cx="50%" cy="50%" />
       <circle :class="$style.chart" :r="circleRadius" cx="50%" cy="50%" :stroke-dasharray="strokeDasharray" />
@@ -96,7 +96,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" module>
-.progress {
+.ui3nProgressCircular {
   --ui3n-progress-circular-size: v-bind(cssSize);
   --ui3n-progress-circular-width: v-bind(cssWidth);
   --ui3n-progress-circular-font-size: v-bind(fontSize);

package/src/components/ui3n-progress/ui3n-progress-linear.vue

@@ -27,7 +27,7 @@ const displayValue = computed(() => props.indeterminate
 </script>
 
 <template>
-  <div :class="[$style.progress, indeterminate && $style.indeterminate]">
+  <div :class="[$style.ui3nProgressLinear, indeterminate && $style.indeterminate]">
     <div
       v-if="isValueShown && innerHeight < thresholdHeight"
       :class="[$style.text, $style.above]"
@@ -49,7 +49,7 @@ const displayValue = computed(() => props.indeterminate
 </template>
 
 <style lang="scss" module>
-.progress {
+.ui3nProgressLinear {
   --ui3n-progress-linear-height: v-bind(cssHeight);
   --ui3n-progress-linear-bg: v-bind(bgColor);
   --ui3n-progress-linear-color: v-bind(color);

package/src/components/ui3n-radio-group/types.ts

@@ -24,7 +24,7 @@ export interface Ui3nRadioSlots {
 
 export interface Ui3nRadioGroupProps {
   name: string;
-  modelValue?: Ui3nRadioValue;
+  modelValue: Ui3nRadioValue;
   direction?: 'horizontal' | 'vertical';
   disabled?: boolean;
 }

package/src/components/ui3n-radio-group/ui3n-radio-group.vue

@@ -8,7 +8,6 @@ import type {
 } from './types';
 
 const props = withDefaults(defineProps<Ui3nRadioGroupProps>(), {
-  modelValue: false,
   direction: 'vertical',
   disabled: false,
 });
@@ -41,7 +40,7 @@ watch(
 <template>
   <div
     :class="[
-      $style.radioGroup,
+      $style.ui3nRadioGroup,
       direction === 'horizontal' && $style.horizontal,
     ]"
   >
@@ -50,17 +49,17 @@ watch(
 </template>
 
 <style lang="scss" module>
-.radioGroup {
+.ui3nRadioGroup {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: 4px;
+  gap: var(--spacing-xs);
 
   &.horizontal {
     flex-direction: row;
-    column-gap: 8px;
+    column-gap: var(--spacing-s);
   }
 }
 </style>

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -66,7 +66,7 @@ function change() {
     emits('change', val.value);
     emits('update:modelValue', val.value);
   }
-};
+}
 
 onBeforeMount(() => {
   if (
@@ -125,7 +125,7 @@ watch(
   <div
     ref="radioEl"
     :class="[
-      $style.radio,
+      $style.ui3nRadio,
       disabled && $style.disabled,
       !slots.default && $style.noLabel,
     ]"
@@ -180,7 +180,7 @@ watch(
 <style lang="scss" module>
 @import "../../assets/styles/mixins";
 
-.radio {
+.ui3nRadio {
   --ui3n-radio-size: 16px;
   --ui3n-radio-color: var(--color-icon-control-accent-default);
   --ui3n-radio-text-size: 12px;

package/src/components/ui3n-step-line-bar/ui3n-step-line-bar.vue

@@ -10,7 +10,7 @@ withDefaults(
 </script>
 
 <template>
-  <div :class="$style.stepLineBar">
+  <div :class="$style.ui3nStepLineBar">
     <div :class="$style.label">
       {{ label }}
     </div>
@@ -22,7 +22,7 @@ withDefaults(
 </template>
 
 <style lang="scss" module>
-.stepLineBar {
+.ui3nStepLineBar {
   --ui3n-step-line-bar-steps: v-bind(steps);
 
   position: relative;

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

@@ -42,7 +42,7 @@ function change() {
 <template>
   <div
     ref="switchEl"
-    :class="[$style.switch, val && $style.checked, !slots.default && $style.noLabel, disabled && $style.disabled]"
+    :class="[$style.ui3nSwitch, val && $style.checked, !slots.default && $style.noLabel, disabled && $style.disabled]"
   >
     <Transition>
       <div :class="$style.body" @click="change">
@@ -57,7 +57,7 @@ function change() {
 </template>
 
 <style lang="scss" module>
-.switch {
+.ui3nSwitch {
   --ui3n-switch-size: 16px;
   --ui3n-switch-color: var(--color-icon-control-accent-default);
   --ui3n-switch-off-color: var(--color-bg-table-cell-pressed);

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

@@ -36,7 +36,7 @@ const eventsHandlers = {
 </script>
 
 <template>
-  <div ref="tableEl" :class="$style.table">
+  <div ref="tableEl" :class="$style.ui3nTable">
     <div :class="[$style.header, showGroupActionsRow && $style.withGroupActions]">
       <!-- group actions -->
       <div v-if="showGroupActionsRow" :class="$style.groupActions">
@@ -161,7 +161,7 @@ const eventsHandlers = {
 <style lang="scss" module>
 @import "../../assets/styles/mixins.scss";
 
-.table {
+.ui3nTable {
   --ui3n-table-columns-width: auto;
   --ui3n-table-base-head-height: 36px;
   --ui3n-table-group-actions-height: 48px;

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

@@ -75,7 +75,7 @@ const onClick = (ev: MouseEvent) => {
 <template>
   <div
     ref="tabs"
-    :class="[$style.tabs, itemDirection === 'vertical' && $style.vertical]"
+    :class="[$style.ui3nTabs, itemDirection === 'vertical' && $style.vertical]"
     v-on="children ? { click: onClick } : {}"
   >
     <slot />
@@ -85,7 +85,7 @@ const onClick = (ev: MouseEvent) => {
 <style lang="scss" module>
 @import "../../assets/styles/mixins";
 
-.tabs {
+.ui3nTabs {
   --ui3n-tabs-height: 48px;
 
   position: relative;

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

@@ -94,7 +94,7 @@ function onEscapeKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <div :class="[$style.text, disabled && $style.disabled, isFocused && $style.focused]">
+  <div :class="[$style.ui3nText, disabled && $style.disabled, isFocused && $style.focused]">
     <label v-if="label" :class="$style.label">
       {{ label }}
     </label>
@@ -120,7 +120,7 @@ function onEscapeKeydown(event: KeyboardEvent) {
 </template>
 
 <style lang="scss" module>
-.text {
+.ui3nText {
   position: relative;
   width: 100%;
   border-radius: var(--spacing-xs);

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

@@ -93,7 +93,7 @@ watch(isPositioned, val => {
 </script>
 
 <template>
-  <div :class="$style.tooltip">
+  <div :class="$style.ui3nTooltip">
     <div
       ref="referenceEl"
       :class="$style.reference"
@@ -126,7 +126,7 @@ watch(isPositioned, val => {
 </template>
 
 <style lang="scss" module>
-.tooltip {
+.ui3nTooltip {
   --ui3n-tooltip-bg-color: v-bind(color);
   --ui3n-tooltip-text-color: v-bind(textColor);
 

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

@@ -45,7 +45,7 @@ onMounted(() => {
 <template>
   <div
     ref="wrapElement"
-    :class="$style.virtualScroll"
+    :class="$style.ui3nVirtualScroll"
     @scroll="onScroll"
   >
     <div
@@ -74,7 +74,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" module>
-.virtualScroll {
+.ui3nVirtualScroll {
   position: relative;
   width: 100%;
   height: 100%;