@v1nt1248/3nclient-lib 0.1.14 → 0.1.15

package/package.json

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

package/src/components/index.ts

@@ -67,6 +67,17 @@ import Ui3nProgressCircular from './ui3n-progress/ui3n-progress-circular.vue';
 import type { Ui3nProgressCircularProps, Ui3nProgressLinearProps } from './ui3n-progress/types';
 import Ui3nTooltip from './ui3n-tooltip/ui3n-tooltip.vue';
 import type { Ui3nTooltipEmits, Ui3nTooltipProps, Ui3nTooltipSlots, Ui3nTooltipPlacement } from './ui3n-tooltip/types';
+import Ui3nRadio from './ui3n-radio-group/ui3n-radio.vue';
+// import Ui3nRadioGroup from './ui3n-radio-group/ui3n-radio-group.vue';
+import type {
+  Ui3nRadioEmits,
+  Ui3nRadioProps,
+  Ui3nRadioSlots,
+  // Ui3nRadioGroupEmits,
+  Ui3nRadioGroupProps,
+  // Ui3nRadioGroupSlots,
+  Ui3nRadioValue,
+} from './ui3n-radio-group/types';
 
 export {
   Ui3nIcon,
@@ -157,4 +168,13 @@ export {
   Ui3nTooltipProps,
   Ui3nTooltipSlots,
   Ui3nTooltipPlacement,
+  Ui3nRadio,
+  // Ui3nRadioGroup,
+  Ui3nRadioValue,
+  Ui3nRadioEmits,
+  Ui3nRadioProps,
+  Ui3nRadioSlots,
+  // Ui3nRadioGroupEmits,
+  Ui3nRadioGroupProps,
+  // Ui3nRadioGroupSlots,
 };

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

@@ -1,48 +1,43 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance } from 'vue';
-  import type { Ui3nBreadcrumbEmits, Ui3nBreadcrumbProps, Ui3nBreadcrumbSlots } from './types';
+import { computed, getCurrentInstance } from 'vue';
+import type { Ui3nBreadcrumbEmits, Ui3nBreadcrumbProps, Ui3nBreadcrumbSlots } from './types';
 
-  const props = withDefaults(
-    defineProps<Ui3nBreadcrumbProps>(),
-    {
-      separator: undefined,
-      isActive: false,
-      disabled: false,
-    },
-  );
-  const emits = defineEmits<Ui3nBreadcrumbEmits>();
-  defineSlots<Ui3nBreadcrumbSlots>();
+const props = withDefaults(defineProps<Ui3nBreadcrumbProps>(), {
+  separator: undefined,
+  isActive: false,
+  disabled: false,
+});
+const emits = defineEmits<Ui3nBreadcrumbEmits>();
+defineSlots<Ui3nBreadcrumbSlots>();
 
-  const separatorValue = computed(() => {
-    if (props.separator) {
-      return props.separator
-    }
+const separatorValue = computed(() => {
+  if (props.separator) {
+    return props.separator;
+  }
 
-    const instance = getCurrentInstance()
-    return instance?.parent?.props.separator || '/'
-  });
+  const instance = getCurrentInstance();
+  return instance?.parent?.props.separator || '/';
+});
 
-  const parentDisabled = computed(() => {
-    const instance = getCurrentInstance()
-    return instance?.parent?.props.disabled || false
-  });
+const parentDisabled = computed(() => {
+  const instance = getCurrentInstance();
+  return instance?.parent?.props.disabled || false;
+});
 
-  const onClick = (ev: Event) => {
-    emits('click', ev)
-  }
+const onClick = (ev: Event) => {
+  emits('click', ev);
+};
 </script>
 
 <template>
   <div
-    :class="[
-      $style.breadcrumb,
-      isActive && $style.active,
-      (disabled || parentDisabled) && $style.disabled,
-    ]"
+    :class="[$style.breadcrumb, isActive && $style.active, (disabled || parentDisabled) && $style.disabled]"
     v-on="isActive && !(disabled || parentDisabled) ? { click: onClick } : {}"
   >
     <slot />
-    <div v-if="isActive" :class="$style.separator"
+    <div
+      v-if="isActive"
+      :class="$style.separator"
     >
       <slot name="separator">
         <span>{{ separatorValue }}</span>

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

@@ -22,6 +22,16 @@ const checkboxEl = ref<HTMLDivElement | null>(null);
 const val = ref<Ui3nCheckboxValue>(props.uncheckedValue || false);
 const uncertain = ref(false);
 
+const checkBoxValue = computed(() => {
+  if (uncertain.value) {
+    return 'indeterminate';
+  }
+
+  return val.value === props.checkedValue
+    ? 'checked'
+    : 'unchecked';
+});
+
 onBeforeMount(() => {
   const checkedValueType = typeof props.checkedValue;
   const uncheckedValueType = typeof props.uncheckedValue;
@@ -38,6 +48,7 @@ onBeforeMount(() => {
 onMounted(() => {
   if (checkboxEl.value) {
     checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${props.size}px`);
+    checkboxEl.value.style.setProperty('--ui3n-checkbox-color', props.color);
   }
 });
 
@@ -62,17 +73,16 @@ watch(
   },
 );
 
-const checkBoxValue = computed(() => {
-  if (uncertain.value) {
-    return 'indeterminate';
-  }
-
-  return val.value === props.checkedValue
-    ? 'checked'
-    : 'unchecked';
-});
+watch(
+  () => props.color,
+  newValue => {
+    if (checkboxEl.value) {
+      checkboxEl.value.style.setProperty('--ui3n-checkbox-color', newValue);
+    }
+  },
+);
 
-const change = () => {
+function change() {
   val.value = checkBoxValue.value !== 'unchecked'
     ? props.uncheckedValue
     : props.checkedValue;
@@ -83,7 +93,7 @@ const change = () => {
 
   emits('change', val.value);
   emits('update:modelValue', val.value);
-};
+}
 </script>
 
 <template>
@@ -107,9 +117,7 @@ const change = () => {
         <g id="SVGRepo_bgCarrier" stroke-width="0" />
         <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
         <g id="SVGRepo_iconCarrier">
-          <path d="M20.0001 7L9.0001 18L4 13" stroke="#fff" stroke-width="3" stroke-linecap="round"
-                stroke-linejoin="round"
-          />
+          <path d="M20.0001 7L9.0001 18L4 13" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
         </g>
       </svg>
 
@@ -165,7 +173,9 @@ const change = () => {
   position: relative;
   display: flex;
   width: var(--ui3n-checkbox-size);
+  min-width: var(--ui3n-checkbox-size);
   height: var(--ui3n-checkbox-size);
+  min-height: var(--ui3n-checkbox-size);
   justify-content: center;
   align-items: center;
   border-radius: calc(var(--ui3n-checkbox-size) / 10);

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

@@ -0,0 +1,38 @@
+import { VNode } from 'vue';
+
+export type Ui3nRadioValue = boolean | string | number;
+
+export interface Ui3nRadioProps {
+  modelValue?: Ui3nRadioValue;
+  checkedValue?: Ui3nRadioValue;
+  uncheckedValue?: Ui3nRadioValue;
+  size?: number | string;
+  color?: string;
+  disabled?: boolean;
+}
+
+export interface Ui3nRadioEmits {
+  (ev: 'change', value: Ui3nRadioValue): void;
+  (ev: 'update:modelValue', value: Ui3nRadioValue): void;
+}
+
+export interface Ui3nRadioSlots {
+  checkedIcon: () => VNode;
+  uncheckedIcon: () => VNode;
+  default: () => VNode;
+}
+
+export interface Ui3nRadioGroupProps {
+  modelValue?: Ui3nRadioValue;
+  direction?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+}
+// 
+// export interface Ui3nRadioGroupEmits {
+//   (ev: 'change', value: Ui3nRadioValue): void;
+//   (ev: 'update:modelValue', value: Ui3nRadioValue): void;
+// }
+// 
+// export interface Ui3nRadioGroupSlots {
+//   default: () => VNode;
+// }

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

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { onMounted, ref, SetupContext, useSlots } from 'vue';
+// import { isEmpty } from 'lodash';
+import type {
+  // Ui3nRadioGroupEmits,
+  Ui3nRadioGroupProps,
+  // Ui3nRadioGroupSlots,
+  // Ui3nRadioValue,
+} from './types';
+
+const props = withDefaults(
+  defineProps<Ui3nRadioGroupProps>(),
+  {
+    modelValue: false,
+    direction: 'horizontal',
+    disabled: false,
+  },
+);
+
+const slots: SetupContext['slots'] = useSlots();
+const contentSlot = ref();
+const children = ref([]);
+
+function onClick(ev: MouseEvent) {
+  console.log('EV: ', ev);
+}
+
+onMounted(() => {
+  // @ts-ignore
+  children.value = slots.default();
+  console.log('CH: ', children.value);
+});
+</script>
+
+<template>
+  <div
+    ref="contentSlot"
+    :class="$style.radioGroup"
+    v-on="disabled ? {} : { click: onClick }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" module>
+.radioGroup {
+  position: relative;
+  display: flex;
+  width: max-content;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-s);
+}
+</style>

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

@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeMount,
+  onMounted,
+  ref,
+  useSlots,
+  watch,
+} from 'vue';
+import type {
+  Ui3nRadioEmits,
+  Ui3nRadioProps,
+  Ui3nRadioSlots,
+  Ui3nRadioValue,
+} from './types';
+
+const props = withDefaults(
+  defineProps<Ui3nRadioProps>(),
+  {
+    modelValue: false,
+    checkedValue: true,
+    uncheckedValue: false,
+    size: '16',
+    color: 'var(--color-icon-control-accent-default)',
+    disabled: false,
+  },
+);
+const emits = defineEmits<Ui3nRadioEmits>();
+defineSlots<Ui3nRadioSlots>();
+
+const slots = useSlots();
+const radioEl = ref<HTMLDivElement | null>(null);
+const val = ref<Ui3nRadioValue>(props.uncheckedValue || false);
+const instance = getCurrentInstance();
+
+const radioValue = computed(() => {
+  return val.value === props.checkedValue
+    ? 'checked'
+    : 'unchecked';
+});
+
+onBeforeMount(() => {
+  if (
+    (slots.checkedIcon && !slots.uncheckedIcon) ||
+    (!slots.checkedIcon && slots.uncheckedIcon)
+  ) {
+    throw Error('[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values ​​defined.');
+  }
+
+  if (instance?.parent?.type.__name !== 'ui3n-radio-group') {
+    const checkedValueType = typeof props.checkedValue;
+    const uncheckedValueType = typeof props.uncheckedValue;
+    const valueType = typeof props.modelValue;
+    if (
+      checkedValueType !== uncheckedValueType
+      || checkedValueType !== valueType
+      || uncheckedValueType !== valueType
+    ) {
+      throw Error('[Ui3nRadio] types of "value", "checkedValue" and "uncheckedValue" are different');
+    }
+  } else {
+    const groupModelValue = instance?.parent.props.modelValue;
+    if (groupModelValue === props.checkedValue) {
+      val.value = groupModelValue as Ui3nRadioValue;
+    }
+  }
+});
+
+onMounted(() => {
+  if (radioEl.value) {
+    radioEl.value.style.setProperty('--ui3n-radio-size', `${props.size}px`);
+    radioEl.value.style.setProperty('--ui3n-radio-color', props.color);
+  }
+});
+
+watch(
+  () => props.modelValue,
+  newValue => val.value = newValue,
+  { immediate: true },
+);
+
+watch(
+  () => props.size,
+  newValue => {
+    if (radioEl.value) {
+      radioEl.value.style.setProperty('--ui3n-radio-size', `${newValue}px`);
+    }
+  },
+);
+
+watch(
+  () => props.color,
+  newValue => {
+    if (radioEl.value) {
+      radioEl.value.style.setProperty('--ui3n-radio-color', newValue);
+    }
+  },
+);
+
+
+function change() {
+  val.value = radioValue.value !== 'unchecked'
+    ? props.uncheckedValue
+    : props.checkedValue;
+
+  emits('change', val.value);
+  emits('update:modelValue', val.value);
+};
+
+defineExpose({ change, radioEl });
+</script>
+
+<template>
+  <div
+    ref="radioEl"
+    :class="[
+      $style.radio,
+      disabled && $style.disabled,
+      !slots.default && $style.noLabel,
+    ]"
+  >
+    <div
+      :class="$style.body"
+      @click="change"
+    >
+      <slot
+        v-if="radioValue === 'checked'
+        "name="checkedIcon"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          :width="Number(size) - 4"
+          :height="Number(size) - 4"
+          viewBox="0 0 24 24"
+          :class="$style.icon"
+        >
+          <path
+            fill="currentColor"
+            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5m0-5C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
+          />
+        </svg>
+      </slot>
+
+      <slot
+        v-else
+        name="uncheckedIcon"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          :width="Number(size) - 4"
+          :height="Number(size) - 4"
+          viewBox="0 0 24 24"
+          :class="$style.icon"
+        >
+          <path
+            fill="currentColor"
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
+          />
+        </svg>
+      </slot>
+    </div>
+
+    <div :class="$style.label">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+@import "../../assets/styles/mixins";
+
+.radio {
+  --ui3n-radio-size: 16px;
+  --ui3n-radio-color: var(--color-icon-control-accent-default);
+  --ui3n-radio-text-size: 12px;
+  --ui3n-radio-text-color: var(--color-text-control-primary-default);
+  --ui3n-radio-text-weight: 500;
+
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: var(--spacing-vl);
+  gap: var(--spacing-s);
+
+  &.disabled {
+    --ui3n-radio-color: var(--color-icon-control-primary-disabled) !important;
+    pointer-events: none;
+    cursor: default;
+
+    .label {
+      opacity: 0.7;
+    }
+  }
+}
+
+.noLabel {
+  gap: 0;
+}
+
+.body {
+  position: relative;
+  display: flex;
+  width: var(--ui3n-radio-size);
+  min-width: var(--ui3n-radio-size);
+  height: var(--ui3n-radio-size);
+  min-height: var(--ui3n-radio-size);
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+
+  &:hover {
+    cursor: pointer;
+    background-color: hsl(from transparent h s calc(l - 10));
+    @include ripple(hsl(from transparent h s calc(l - 10)));
+  }
+}
+
+.label {
+  font-size: var(--ui3n-radio-text-size);
+  font-weight: var(--ui3n-radio-text-weight);
+  color: var(--ui3n-radio-text-color);
+  user-select: none;
+}
+
+.icon {
+  color: var(--ui3n-radio-color);
+  min-height: calc(var(--ui3n-radion-size) - 2px);
+  min-width: calc(var(--ui3n-checkbox-size) - 2px);
+  cursor: pointer;
+}
+</style>