@v1nt1248/3nclient-lib 0.0.41 → 0.1.0

package/src/components/ui3n-checkbox.vue

@@ -1,146 +1,158 @@
 <script lang="ts" setup>
-  import { computed, onMounted, watch, onBeforeMount, ref, useSlots } from 'vue'
-  import Ui3nIcon from './ui3n-icon.vue'
-
-  type Ui3nCheckboxValue = boolean | string | number;
-  
-  export interface Ui3nCheckboxProps {
-    modelValue: Ui3nCheckboxValue;
-    checkedValue?: Ui3nCheckboxValue;
-    uncheckedValue?: Ui3nCheckboxValue;
-    size?: number|string;
-    color?: string;
-    indeterminate?: boolean;
-    disabled?: boolean;
+import { computed, onMounted, watch, onBeforeMount, ref, useSlots } from 'vue';
+
+type Ui3nCheckboxValue = boolean | string | number;
+
+export interface Ui3nCheckboxProps {
+  modelValue: Ui3nCheckboxValue;
+  checkedValue?: Ui3nCheckboxValue;
+  uncheckedValue?: Ui3nCheckboxValue;
+  size?: number | string;
+  color?: string;
+  indeterminate?: boolean;
+  disabled?: boolean;
+}
+
+export interface Ui3nCheckboxEmits {
+  (ev: 'change', value: Ui3nCheckboxValue): void;
+  (ev: 'update:modelValue', value: Ui3nCheckboxValue): void;
+}
+
+export interface Ui3nCheckboxSlots {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: () => any;
+}
+
+const props = withDefaults(
+  defineProps<Ui3nCheckboxProps>(),
+  {
+    modelValue: false,
+    checkedValue: true,
+    uncheckedValue: false,
+    size: '16',
+    color: 'var(--color-icon-control-accent-default)',
+    indeterminate: false,
+    disabled: false,
+  },
+);
+const emits = defineEmits<Ui3nCheckboxEmits>();
+defineSlots<Ui3nCheckboxSlots>();
+
+const slots = useSlots();
+const checkboxEl = ref<HTMLDivElement | null>(null);
+const val = ref<Ui3nCheckboxValue>(props.uncheckedValue || false);
+const uncertain = ref(false);
+
+onBeforeMount(() => {
+  const checkedValueType = typeof props.checkedValue;
+  const uncheckedValueType = typeof props.uncheckedValue;
+  const valueType = typeof props.modelValue;
+  if (
+    checkedValueType !== uncheckedValueType
+    || checkedValueType !== valueType
+    || uncheckedValueType !== valueType
+  ) {
+    throw Error('[Ui3nCheckbox] types of "value", "checkedValue" and "uncheckedValue" are different');
   }
+});
 
-  export interface Ui3nCheckboxEmits {
-    (ev: 'change', value: Ui3nCheckboxValue): void;
-    (ev: 'update:modelValue', value: Ui3nCheckboxValue): void;
+onMounted(() => {
+  if (checkboxEl.value) {
+    checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${props.size}px`);
   }
-
-  export interface Ui3nCheckboxSlots {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    default: () => any;
-  }
-
-  const iconMap = {
-    checked: 'check-box-checked',
-    unchecked: 'check-box',
-    indeterminate: 'check-box-inderterminate',
-  }
-
-  const props = withDefaults(
-    defineProps<Ui3nCheckboxProps>(),
-    {
-      modelValue: false,
-      checkedValue: true,
-      uncheckedValue: false,
-      size: '16',
-      color: '#0090ec',
-      indeterminate: false,
-      disabled: false,
-    },
-  )
-  const emits = defineEmits<Ui3nCheckboxEmits>()
-  defineSlots<Ui3nCheckboxSlots>()
-
-  const slots = useSlots()
-
-  const checkboxEl = ref<HTMLDivElement|null>(null)
-  const val = ref<Ui3nCheckboxValue>(props.uncheckedValue || false)
-  const uncertain = ref(false)
-
-  onBeforeMount(() => {
-    const checkedValueType = typeof props.checkedValue
-    const uncheckedValueType = typeof props.uncheckedValue
-    const valueType = typeof props.modelValue
-    if (
-      checkedValueType !== uncheckedValueType
-      || checkedValueType !== valueType
-      || uncheckedValueType !== valueType
-    ) {
-      throw Error('[Ui3nCheckbox] types of "value", "checkedValue" and "unchecktdValue" are different')
-    }
-  })
-
-  onMounted(() => {
+});
+
+watch(
+  () => props.modelValue,
+  newValue => val.value = newValue,
+  { immediate: true },
+);
+
+watch(
+  () => props.indeterminate,
+  newValue => uncertain.value = newValue,
+  { immediate: true },
+);
+
+watch(
+  () => props.size,
+  newValue => {
     if (checkboxEl.value) {
-      checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${props.size}px`)
-    }
-  })
-
-  watch(
-    () => props.modelValue,
-    newValue => val.value = newValue,
-    { immediate: true },
-  )
-
-  watch(
-    () => props.indeterminate,
-    newValue => uncertain.value = newValue,
-    {  immediate: true},
-  )
-
-  watch(
-    () => props.size,
-    newValue => {
-      if (checkboxEl.value) {
-        checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${newValue}px`)
-      }
-    },
-  )
-
-  const checkBoxValue = computed(() => {
-    if (uncertain.value) {
-      return 'indeterminate'
+      checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${newValue}px`);
     }
+  },
+);
 
-    return val.value === props.checkedValue
-      ? 'checked'
-      : 'unchecked'
-  } )
+const checkBoxValue = computed(() => {
+  if (uncertain.value) {
+    return 'indeterminate';
+  }
 
-  const change = () => {
-    val.value = checkBoxValue.value !== 'unchecked'
-      ? props.uncheckedValue
-      : props.checkedValue
+  return val.value === props.checkedValue
+    ? 'checked'
+    : 'unchecked';
+});
 
-    if (uncertain.value) {
-      uncertain.value = false
-    }
+const change = () => {
+  val.value = checkBoxValue.value !== 'unchecked'
+    ? props.uncheckedValue
+    : props.checkedValue;
 
-    emits('change', val.value)
-    emits('update:modelValue', val.value)
+  if (uncertain.value) {
+    uncertain.value = false;
   }
+
+  emits('change', val.value);
+  emits('update:modelValue', val.value);
+};
 </script>
 
 <template>
   <div
     ref="checkboxEl"
-    :class="[
-      'ui3n-checkbox',
-      {
-        'ui3n-checkbox--disabled': props.disabled,
-        'ui3n-checkbox--with-label': slots.default,
-      },
-    ]"
+    :class="[$style.checkbox, disabled && $style.disabled, !slots.default && $style.noLabel]"
   >
     <div
-      class="ui3n-checkbox__wrapper"
+      :class="[$style.body, checkBoxValue === 'unchecked' ? $style.unfilled : $style.filled]"
       @click="change"
     >
-      <ui3n-icon
-        class="ui3n-checkbox__icon"
-        :icon="iconMap[checkBoxValue]"
-        :width="props.size"
-        :height="props.size"
-        :color="props.color"
-      />
+      <svg
+        v-if="checkBoxValue === 'checked'"
+        :width="Number(size) - 4"
+        :height="Number(size) - 4"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        :class="$style.icon"
+      >
+        <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"
+          />
+        </g>
+      </svg>
+
+      <svg
+        v-if="checkBoxValue === 'indeterminate'"
+        :width="Number(size) - 4"
+        :height="Number(size) - 4"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        :class="$style.icon"
+      >
+        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+        <g id="SVGRepo_iconCarrier">
+          <path d="M7 12L17 12" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+        </g>
+      </svg>
     </div>
 
     <div
-      class="ui3n-checkbox__label"
+      :class="$style.label"
       @click="change"
     >
       <slot />
@@ -148,44 +160,73 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  @import "../assets/styles/mixins";
-
-  .ui3n-checkbox {
-    --ui3n-checkbox-size: 16px;
-    --ui3n-checkbox-text-size: 12px;
-    --ui3n-checkbox-text-color: var(--black-90, #212121);
-    --ui3n-checkbox-text-weight: 500;
-
-    position: relative;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-
-    &__wrapper {
-      position: relative;
-      display: flex;
-      width: calc(var(--ui3n-checkbox-size) * 1.5);
-      height: calc(var(--ui3n-checkbox-size) * 1.5);
-      justify-content: center;
-      align-items: center;
-      border-radius: 50%;
-      cursor: pointer;
-
-      @include ripple(transparent);
-    }
-
-    &__label {
-      font-size: var(--ui3n-checkbox-text-size);
-      font-weight: var(--ui3n-checkbox-text-weight);
-      color: var(--ui3n-checkbox-text-color);
-      user-select: none;
-      cursor: pointer;
-    }
+<style lang="scss" module>
+@import "../assets/styles/mixins";
+
+.checkbox {
+  --ui3n-checkbox-size: 16px;
+  --ui3n-checkbox-color: var(--color-icon-control-accent-default);
+  --ui3n-checkbox-text-size: 12px;
+  --ui3n-checkbox-text-color: var(--color-text-control-primary-default);
+  --ui3n-checkbox-text-weight: 500;
+
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: var(--spacing-vl);
+  gap: var(--spacing-s);
+}
+
+.noLabel {
+  gap: 0;
+}
+
+.body {
+  position: relative;
+  display: flex;
+  width: var(--ui3n-checkbox-size);
+  height: var(--ui3n-checkbox-size);
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(var(--ui3n-checkbox-size) / 10);
+  border: calc(var(--ui3n-checkbox-size) / 10) solid var(--ui3n-checkbox-color);
+  cursor: pointer;
+}
+
+.filled {
+  background-color: var(--ui3n-checkbox-color);
+
+  &:hover {
+    border-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
+    background-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
+    @include ripple(hsl(from var(--ui3n-checkbox-color) h s calc(l - 10)));
+  }
+}
 
-    &--disabled {
-      pointer-events: none;
-      opacity: 0.5;
-    }
+.unfilled {
+  &:hover {
+    border-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
+    background-color: hsl(from transparent h s calc(l - 10));
+    @include ripple(hsl(from transparent h s calc(l - 10)));
   }
+}
+
+.icon {
+  min-height: calc(var(--ui3n-checkbox-size) - 4px);
+  min-width: calc(var(--ui3n-checkbox-size) - 4px);
+}
+
+.label {
+  font-size: var(--ui3n-checkbox-text-size);
+  font-weight: var(--ui3n-checkbox-text-weight);
+  color: var(--ui3n-checkbox-text-color);
+  user-select: none;
+  cursor: pointer;
+}
+
+.disabled {
+  opacity: 0.7;
+  pointer-events: none;
+}
 </style>

package/src/components/ui3n-chip.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-  import { computed, useSlots } from 'vue'
-  import Ui3nButton from './ui3n-button.vue'
+  import { computed, useSlots } from 'vue';
+  import Ui3nButton from './ui3n-button.vue';
 
   /* eslint-disable @typescript-eslint/no-explicit-any */
   export interface Ui3nChipProps {
@@ -29,128 +29,126 @@
       plain: false,
       round: true,
       closeable: false,
-      color: '#f2f2f2',
+      color: 'var(--color-bg-control-secondary-default)',
       textSize: 10,
-      textColor: '#212121',
+      textColor: 'var(--color-text-control-primary-default)',
     },
-  )
-  const emits = defineEmits<Ui3nChipEmits>()
-  defineSlots<Ui3nChipSlots>()
-
-  const slots = useSlots()
-
-  const height = computed(() => `${props.height}px`)
-  const iconHeight = computed(() => props.height ? Number(props.height) - 2 : Number(props.height))
-  const padding = computed(() => `${Math.round(Number(props.height) / 3)}px`)
-  const maxWidth = computed(() => `${props.maxWidth}px`)
-  const bgColor = computed(() => props.color)
-  const textSize = computed(() => `${props.textSize}px`)
-  const textColor = computed(() => props.textColor)
-  const hasLeftSlot = computed(() => !!slots.left)
+  );
+
+  const emits = defineEmits<Ui3nChipEmits>();
+  defineSlots<Ui3nChipSlots>();
+
+  const slots = useSlots();
+
+  const height = computed(() => `${props.height}px`);
+  const iconHeight = computed(() => props.height ? Number(props.height) - 2 : Number(props.height));
+  const padding = computed(() => `${Math.round(Number(props.height) / 3)}px`);
+  const maxWidth = computed(() => `${props.maxWidth}px`);
+  const bgColor = computed(() => props.color);
+  const textSize = computed(() => `${props.textSize}px`);
+  const textColor = computed(() => props.textColor);
+  const hasLeftSlot = computed(() => !!slots.left);
 </script>
 
 <template>
   <div
     :class="[
-      'ui3n-chip',
-      {
-        'ui3n-chip--round': props.round,
-        'ui3n-chip--plain': props.plain,
-        'ui3n-chip--closeble': props.closeable,
-        'ui3n-chip--with-icon': hasLeftSlot,
-      },
+      $style.chip,
+      round && $style.round,
+      plain && $style.plain,
+      closeable && $style.closable,
+      hasLeftSlot && $style.withIcon,
     ]"
   >
-    <div class="ui3n-chip__icon">
-      <slot
-        name="left"
-        :size="iconHeight"
-        :color="props.textColor"
-      />
+    <div :class="$style.icon">
+      <slot name="left" :size="iconHeight" :color="props.textColor" />
     </div>
-    
-    <div class="ui3n-chip__body">
+
+    <div :class="$style.body">
       <slot />
     </div>
-    
+
     <ui3n-button
-      v-if="props.closeable"
-      class="ui3n-chip__close"
-      round
+      v-if="closeable"
+      :class="$style.closeBtn"
+      type="icon"
+      size="small"
       color="transparent"
       icon="close"
-      icon-size="12"
-      icon-color="#212121"
+      icon-color="var(--color-icon-control-primary-default)"
       @click="emits('close')"
     />
   </div>
 </template>
 
-<style lang="scss" scoped>
-  @import "../assets/styles/mixins";
-
-  .ui3n-chip {
-    position: relative;
-    display: flex;
-    height: v-bind('height');
-    padding: 0 v-bind('padding');
-    width: max-content;
-    max-width: v-bind('maxWidth');
-    background-color: v-bind('bgColor');
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-
-    &__body {
-      font-size: v-bind('textSize');
-      line-height: 1;
-      font-weight: 400;
-      color: v-bind('textColor');
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &__close {
-      margin-left: var(--half-size, 4px);
-    }
-
-    &--with-icon {
-      .ui3n-chip__icon {
-        display: flex;
-        margin-right: 5px;
-      }
-    }
-
-    &--round {
-      border-radius: calc(v-bind('height') / 2);
+<style lang="scss" module>
+@import "../assets/styles/mixins";
+
+.chip {
+  position: relative;
+  display: flex;
+  height: v-bind('height');
+  padding: 0 v-bind('padding');
+  width: max-content;
+  max-width: v-bind('maxWidth');
+  background-color: v-bind('bgColor');
+  justify-content: flex-start;
+  align-items: center;
+
+  &.closeable:not(.withIcon) {
+    .body {
+      max-width: calc(100% - 24px);
     }
+  }
 
-    &--closeble {
-      min-width: 24px;
-      padding-right: 0;
+  &.withIcon:not(.closeable) {
+    .body {
+      max-width: calc(100% - v-bind(height) - 4px);
     }
+  }
 
-    &--plain {
-      border: 1px solid v-bind('textColor');
+  &.closable.withIcon {
+    .body {
+      max-width: calc(100% - v-bind(height) - 28px);
     }
+  }
+}
+
+.body {
+  font-size: v-bind('textSize');
+  line-height: 1;
+  font-weight: 400;
+  color: v-bind('textColor');
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.closeBtn {
+  margin-left: var(--spacing-xs);
+}
+
+.withIcon {
+  .icon {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: var(--spacing-xs);
+  }
+}
 
-    &.ui3n-chip--closable:not(.ui3n-chip--with-icon) {
-      .ui3n-chip__body {
-        max-width: calc(100% - 24px);
-      }
-    }
+.round {
+  border-radius: calc(v-bind('height') / 2);
+}
 
-    &.ui3n-chip--with-icon:not(.ui3n-chip--closable) {
-      .ui3n-chip__body {
-        max-width: calc(100% - v-bind(height) - 5px);
-      }
-    }
+.closeable {
+  min-width: var(--spacing-ml);
+  padding-right: 0;
+}
 
-    &.ui3n-chip--closable.ui3n-chip--with-icon {
-      .ui3n-chip__body {
-        max-width: calc(100% - v-bind(height) - 29px);
-      }
-    }
-  }
+.plain {
+  border: 1px solid v-bind('textColor');
+}
 </style>