@v1nt1248/3nclient-lib 0.0.25 → 0.0.26

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Library for 3NWeb clients",
   "private": false,
   "type": "module",
@@ -47,16 +47,16 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.4.4",
-    "@storybook/addon-docs": "^7.4.4",
-    "@storybook/addon-essentials": "^7.4.4",
-    "@storybook/addon-interactions": "^7.4.4",
-    "@storybook/addon-links": "^7.4.4",
-    "@storybook/blocks": "^7.4.4",
-    "@storybook/builder-vite": "^7.4.4",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-docs": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/builder-vite": "^7.5.1",
     "@storybook/testing-library": "^0.2.1",
-    "@storybook/vue3": "^7.4.4",
-    "@storybook/vue3-vite": "^7.4.4",
+    "@storybook/vue3": "^7.5.1",
+    "@storybook/vue3-vite": "^7.5.1",
     "@types/lodash": "^4.14.197",
     "@types/node": "^20.5.6",
     "@types/sanitize-html": "^2.9.0",
@@ -86,7 +86,7 @@
     "stylelint-rscss": "^0.4.0",
     "stylelint-scss": "^5.1.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.5",
+    "vite": "^4.5.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.5.3",
     "vue": "^3.3.4",

package/src/components/index.ts

@@ -10,6 +10,8 @@ import Ui3nInput from './ui3n-input.vue'
 import type { Ui3nInputProps, Ui3nInputEmits } from './ui3n-input.vue'
 import Ui3nText from './ui3n-text.vue'
 import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text.vue'
+import Ui3mCheckbox from './ui3n-checkbox.vue'
+import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots } from './ui3n-checkbox.vue'
 import Ui3nNotification from './ui3n-notification.vue'
 import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue'
 import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue'
@@ -43,6 +45,10 @@ export {
   Ui3nText,
   Ui3nTextProps,
   Ui3nTextEmits,
+  Ui3mCheckbox,
+  Ui3nCheckboxProps,
+  Ui3nCheckboxEmits,
+  Ui3nCheckboxSlots,
   Ui3nNotification,
   Ui3nTableSortIcon,
   Ui3nTableSortIconProps,

package/src/components/ui3n-button.vue

@@ -110,8 +110,6 @@
     line-height: var(--ui3n-button-text-height);
     font-weight: 600;
     color: var(--ui3n-button-text-color);
-    background-position: center;
-    transition: background 0.5s ease-in-out;
 
     &--round {
       --ui3n-button-padding-vert: 6px;
@@ -125,13 +123,7 @@
     }
 
     &:not([disabled]) {
-      cursor: pointer;
-
       &:hover {
-        background:
-          var(--ui3n-button-background)
-          radial-gradient(circle, transparent 1%, var(--ui3n-button-background) 1%)
-          center/15000%;
         box-shadow: 0 0 4px var(--shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 
         .ui3n-button {
@@ -141,13 +133,6 @@
           }
         }
       }
-
-      &:active {
-        opacity: 1;
-        background-color: var(--black-30, #b3b3b3);
-        background-size: 100%;
-        transition: background 0s;
-      }
     }
 
     &__icon {
@@ -168,5 +153,7 @@
     &[disabled] {
       opacity: 0.7;
     }
+
+    @include ripple(var(--ui3n-button-background));
   }
 </style>

package/src/components/ui3n-checkbox.vue

@@ -0,0 +1,191 @@
+<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;
+  }
+
+  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 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(() => {
+    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'
+    }
+
+    return val.value === props.checkedValue
+      ? 'checked'
+      : 'unchecked'
+  } )
+
+  const change = () => {
+    val.value = checkBoxValue.value !== 'unchecked'
+      ? props.uncheckedValue
+      : props.checkedValue
+
+    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,
+      },
+    ]"
+  >
+    <div
+      class="ui3n-checkbox__wrapper"
+      @click="change"
+    >
+      <ui3n-icon
+        class="ui3n-checkbox__icon"
+        :icon="iconMap[checkBoxValue]"
+        :width="props.size"
+        :height="props.size"
+        :color="props.color"
+      />
+    </div>
+
+    <div
+      class="ui3n-checkbox__label"
+      @click="change"
+    >
+      <slot />
+    </div>
+  </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;
+    }
+
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+</style>