@milaboratories/uikit 1.2.3

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@milaboratories/uikit",
+  "version": "1.2.3",
+  "type": "module",
+  "main": "dist/pl-uikit.umd.js",
+  "module": "dist/pl-uikit.js",
+  "types": "dist/src/index.d.ts",
+  "styles": "dist/style.css",
+  "exports": {
+    ".": {
+      "style": "./styles/main.css",
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/pl-uikit.js"
+    },
+    "./styles": {
+      "default": "./dist/style.css"
+    },
+    "./*": "./*"
+  },
+  "dependencies": {
+    "vue": "^3.4.35"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^24.1.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "tsc-alias": "^1.8.10",
+    "vitest": "^2.1.1",
+    "vite": "^5.4.7",
+    "vue-tsc": "^2.0.6",
+    "yarpm": "^1.2.0",
+    "@milaboratories/helpers": "^1.6.1",
+    "@platforma-sdk/model": "^1.2.24"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && yarpm run build:types",
+    "test:unit": "vitest run",
+    "test": "vitest run",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly -p ./tsconfig.lib.json && tsc-alias -p tsconfig.lib.json",
+    "tsc": "tsc",
+    "watch": "vite build --watch",
+    "type-check": "vue-tsc --project ./tsconfig.lib.json",
+    "preview": "vite preview",
+    "parse-icons-folder": "node scripts/parse-icons.js",
+    "minify-icons": "svgo -f src/assets/icons/icon-assets -o src/assets/icons/icon-assets-min",
+    "generate-icons": "yarpm run parse-icons-folder && yarpm run minify-icons",
+    "lint": "eslint . --ext js,ts,vue",
+    "check": "yarpm type-check && yarpm test && yarpm lint"
+  }
+}

package/scripts/parse-icons.js

@@ -0,0 +1,50 @@
+import * as fp from 'fs/promises';
+import * as path from 'path';
+
+const iconsFolder = './src/assets/icons/icon-assets';
+
+async function normalizeIconNames() {
+  for await (const dirent of await fp.readdir(iconsFolder, { withFileTypes: true })) {
+    const parts = dirent.name.split('_');
+    if (parts.length > 2) {
+      const newName = parts[0] + '_' + parts.slice(1).join('-');
+      await fp.rename(path.resolve(dirent.parentPath, dirent.name), path.resolve(dirent.parentPath, newName));
+    }
+  }
+}
+
+async function generateSCSS() {
+  const dict = {};
+
+  for await (const dirent of await fp.readdir(iconsFolder, { withFileTypes: true })) {
+    const parts = dirent.name.split('_');
+
+    if (parts.length !== 2) {
+      throw Error('Invalid icon: ' + JSON.stringify(dirent));
+    }
+
+    const [size, icon] = parts;
+
+    dict[size] = dict[size] ?? [];
+
+    dict[size].push(icon);
+  }
+
+  for (const [size, lst] of Object.entries(dict)) {
+    const json = {};
+
+    const lines = lst.map((name) => {
+      const icon = name.split('.')[0];
+      json[icon] = name;
+      return `  ${icon}: '${name}'`; // keep extension
+    });
+
+    await fp.writeFile(`./src/assets/icons/icons-${size}-generated.scss`, `$icons${size}: (\n${lines.join(',\n')}\n)`);
+    await fp.writeFile(`./src/assets/icons/icons-${size}-generated.json`, JSON.stringify(json, null, 2));
+  }
+}
+
+(async () => {
+  await normalizeIconNames();
+  await generateSCSS();
+})().catch(console.error);

package/src/__tests__/compositions/useValidation.spec.ts

@@ -0,0 +1,67 @@
+import { useValidation } from '@/utils/useValidation';
+import { describe } from 'node:test';
+import { expect, test } from 'vitest';
+import { ref } from 'vue';
+
+describe('Test useValidation', () => {
+  test('Empty rules', () => {
+    const model = ref('12345');
+    const rules: ((v: string) => boolean | string)[] = [];
+
+    const validationData = useValidation(model, rules);
+
+    expect(validationData.value).to.have.property('isValid');
+    expect(validationData.value.isValid).to.equal(true);
+  });
+
+  test('Check correct', () => {
+    const model = ref('12345');
+    const rules: ((v: string) => boolean | string)[] = [(v: string) => v.length === 5 || 'Length must be 5'];
+
+    const validationData = useValidation(model, rules);
+
+    expect(validationData.value).to.have.property('isValid');
+    expect(validationData.value.isValid).to.equal(true);
+
+    expect(validationData.value).to.have.property('errors');
+    expect(validationData.value.errors.length).to.equal(0);
+  });
+
+  test('Check errors', () => {
+    const model = ref('12345');
+    const rules: ((v: string) => boolean | string)[] = [
+      (v: string) => v.length > 5 || 'Length must be 5',
+      (v: string) => v.length > 5 || 'Length must be 5 second message',
+    ];
+
+    const validationData = useValidation(model, rules);
+
+    expect(validationData.value).to.have.property('isValid');
+    expect(validationData.value.isValid).to.equal(false);
+
+    expect(validationData.value.errors).toEqual(['Length must be 5', 'Length must be 5 second message']);
+  });
+
+  test('Check value changes', () => {
+    const model = ref('12345');
+    const rules: ((v: string) => boolean | string)[] = [(v: string) => v.length === 5 || 'Length must be 5!!!'];
+
+    const validationData = useValidation(model, rules);
+
+    expect(validationData.value).to.have.property('isValid');
+    expect(validationData.value.isValid).to.equal(true);
+
+    model.value = '098';
+    expect(validationData.value.isValid).to.equal(false);
+    expect(validationData.value.errors).toEqual(['Length must be 5!!!']);
+  });
+
+  test('should return multiple error messages', () => {
+    const value = ref('no');
+    const rules = [(v: string) => v.length > 3 || 'Must be longer than 3 characters', (v: string) => v.includes('@') || 'Must include "@" symbol'];
+    const validation = useValidation(value, rules);
+
+    expect(validation.value.isValid).toBe(false);
+    expect(validation.value.errors).toEqual(['Must be longer than 3 characters', 'Must include "@" symbol']);
+  });
+});

package/src/__tests__/setup.ts

@@ -0,0 +1,2 @@
+import ResizeObserver from 'resize-observer-polyfill';
+global.ResizeObserver = ResizeObserver;

package/src/assets/animations.scss

@@ -0,0 +1,60 @@
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+@keyframes shake {
+
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
+.shake {
+  &-enter-active {
+    animation: shake .5s cubic-bezier(.36, .07, .19, .97) both;
+  }
+}
+
+.slide-panel {
+  &-enter-active {
+    transition: transform .3s ease-out;
+  }
+
+  &-leave-active {
+    transition: transform .3s ease-in-out;
+  }
+
+  &-enter-from {
+    transform: translateX(200%);
+  }
+
+  &-leave-to {
+    transform: translateX(200%);
+  }
+}

package/src/assets/base-btn.scss

@@ -0,0 +1,126 @@
+@mixin base-btn {
+  --font-size: 14px;
+  --border-radius: 6px;
+  --button-height: 40px;
+  --focus-shadow: 0 0 0 0 transparent;
+  --btn-disabled-bg: var(--color-dis-01);
+  --color-text: var(--txt-00);
+  --shape-shadow: 0 0 0 0 transparent;
+  --append-shadow: 0 0 0 0 transparent;
+  --drop-shadow: 0 0 0 0 transparent;
+  --active-shadow: 0 0 0 0 transparent;
+  --main-padding: 0 12px;
+
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  white-space: nowrap;
+  gap: 8px;
+  padding: var(--main-padding);
+  color: var(--color-text);
+
+  font-weight: 600;
+  font-size: var(--font-size);
+  font-family: var(--font-family-base);
+  line-height: 16px;
+
+  height: var(--button-height);
+  min-height: var(--button-height);
+  border-radius: var(--border-radius);
+
+  outline: none;
+  user-select: none;
+
+  transition: box-shadow 0.05s ease-in-out;
+
+  box-shadow: var(--focus-shadow), var(--append-shadow), var(--shape-shadow),
+    var(--active-shadow), var(--drop-shadow);
+
+  // @todo
+  &.justifyCenter {
+    justify-content: center;
+  }
+
+  &.round {
+    border-radius: 50%;
+    width: var(--button-height);
+    padding: 0;
+    justify-content: center;
+  }
+
+  &.small {
+    --button-height: 32px;
+    --main-padding: 0 8px;
+  }
+
+  &.medium {
+    --main-padding: 0 16px;
+  }
+
+  &.large {
+    --button-height: 56px;
+    --border-radius: 8px;
+    --font-size: 16px;
+    --main-padding: 0 18px;
+    .mask {
+      --mask-size: 24px;
+    }
+  }
+
+  &:disabled {
+    --color-text: var(--color-dis-00);
+    * {
+      color: var(--color-text);
+    }
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:not([disabled]).hover {
+    background: var(--color-btn-hover);
+  }
+
+  &:not([disabled]):hover {
+    background: var(--color-btn-hover);
+  }
+
+  &:focus-visible {
+    --focus-shadow: inset 0 0 0 2px var(--border-color-focus);
+  }
+
+  .mask {
+    background-color: var(--color-text);
+  }
+
+  .mask-16 {
+    background-color: var(--color-text);
+  }
+
+  .icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+  }
+
+  &.loading {
+    box-shadow: none !important;
+
+    .mask-loading {
+      display: block;
+      animation: spin 4s linear infinite;
+    }
+  }
+
+  &.reverse {
+    flex-direction: row-reverse;
+  }
+
+  > span {
+    display: inline-flex;
+  }
+}

package/src/assets/base.scss

@@ -0,0 +1,166 @@
+@use './variables.scss';
+
+:root {
+  --main-dark-color: #110529;
+
+  --color-div-grey: #e1e3eb;
+  --color-div-bw: #ffffff;
+  --color-div-black: #e8ecf2;
+  --border-color-focus-shadow: rgba(73, 204, 73, 0.24);
+  --color-error-shadow: #ff5c5c33;
+  --color-dis-00: #fff;
+  --color-dis-01: #cfd1db;
+  --color-accent-default: #845cff;
+  --color-accent-hover: #9470ff;
+  --color-sec-hover-white: rgba(255, 255, 255, 0.5);
+  --color-sec-hover-grey: rgba(155, 171, 204, 0.16);
+  --color-ic-link: #5f31cc;
+
+  --color-active-select: rgba(99, 224, 36, 0.24);
+  --color-border-default: #110529;
+  --color-text: var(--txt-01); // @todo
+  --color-primary-default: #110529;
+  --color-primary-hover: #20163d;
+  --color-placeholder: var(--txt-mask);
+  --color-ic-00: #ffffff;
+  --color-ic-01: #110529;
+  --color-ic-02: #cfd1db;
+
+  --bg-base-dark: #110529;
+  --bg-base-light: #f7f8fa;
+  --bg-elevated-01: #fff;
+  --bg-elevated-02: #e1e3eb;
+  --bg-notification-error: linear-gradient(90deg, #ffcecc 0%, #ffffff 100%);
+
+  --border-radius-control: 6px;
+
+  --font-family-base: 'Manrope', sans-serif;
+  --font-family-monospace: 'Spline Sans Mono', monospace;
+
+  --font-size-base: 14px;
+  --font-weigh-base: 500;
+
+  --control-height: 40px;
+  --control-hover-color: #363452;
+  --control-font-family: var(--font-family-base);
+  --control-mask-fill: var(--color-ic-01);
+
+  --contour-offset: 4px;
+
+  --btn-shape-shadow: inset 0px -3px 0px rgba(36, 34, 61, 0.12), inset 0px 3px 0px rgba(255, 255, 255, 0.4);
+  --btn-group-shape-shadow: inset 0px -3px 0px rgba(36, 34, 61, 0.12), inset 0px 3px 0px rgba(255, 255, 255, 0.4);
+  --btn-sec-hover-grey: rgba(155, 171, 204, 0.16);
+
+  --btn-switcher-bg: linear-gradient(180deg, #a1e69c 0%, #d0f5b0 100%);
+  --btn-switcher-option-color: var(--txt-01);
+  --btn-switcher-active-option-color: var(--txt-01);
+  --btn-switcher-active-option-border: 1px solid var(--color-border-default);
+
+  --chip-bg: var(--btn-sec-hover-grey);
+  --chip-close-ic-color: #cfd1db;
+  --chip-close-ic-hover-color: #110529;
+
+  --tooltip-link-color: hsla(160, 100%, 37%, 1);
+  --tooltip-bg: #24223d;
+
+  --theme-switcher-icon-color: var(--txt-01);
+
+  --shadow-m: 0px 6px 24px -2px rgba(15, 36, 77, 0.08), 0px 4px 12px -2px rgba(15, 36, 77, 0.08);
+
+  --title-bar-height: 0px; // @TODO
+
+  --divider-color: var(--txt-01); // @TODO
+}
+
+[data-theme='dark'] {
+  --color-div-grey: #232329;
+  --color-div-bw: #000000;
+  --color-div-black: #000000;
+  --border-color-focus-shadow: rgba(73, 204, 73, 0.24);
+  --color-error-shadow: rgba(250, 90, 101, 0.24);
+  --color-dis-00: #65656b;
+  --color-dis-01: #38383d;
+  --color-accent-default: #5f31cc;
+  --color-accent-hover: #5f31cc;
+  --color-sec-hover-white: rgba(131, 131, 163, 0.16);
+  --color-sec-hover-grey: rgba(131, 131, 163, 0.16);
+  --color-ic-link: #87e087;
+  --color-active-select: rgba(99, 224, 36, 0.24);
+  --color-border-default: #60616b;
+  --color-primary-default: #5f31cc;
+  --color-primary-hover: #6d3ddb;
+  --color-text: var(--txt-01);
+  --color-placeholder: var(--txt-mask);
+  --color-ic-00: #ffffff;
+  --color-ic-01: #dfe0e5;
+  --color-ic-02: #60616b;
+
+  --bg-base-dark: #0d0d0f;
+  --bg-base-light: #0d0d0f;
+  --bg-elevated-01: #1b1b1f;
+  --bg-elevated-02: #2d2d33;
+  --bg-notification-error: linear-gradient(90deg, #8f3343 0%, #292933 100%);
+
+  --border-radius-control: 6px;
+  --control-hover-color: #adaeb8;
+  --control-mask-fill: var(--color-ic-01);
+
+  --btn-shape-shadow: none;
+  --btn-group-shape-shadow: inset 0px -3px 0px rgba(13, 13, 15, 0.24), inset 0px 3px 0px rgba(255, 255, 255, 0.12);
+  --btn-sec-hover-grey: var(--color-sec-hover-white);
+
+  --btn-switcher-bg: #5e5e70;
+  --btn-switcher-option-color: var(--txt-03);
+  --btn-switcher-active-option-color: var(--txt-00);
+  --btn-switcher-active-option-border: 0px;
+
+  --chip-bg: var(--btn-sec-hover-grey);
+  --chip-close-ic-color: var(--color-ic-02);
+  --chip-close-ic-hover-color: var(--border-color-focus);
+
+  --theme-switcher-icon-color: var(--txt-01);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--main-dark-color);
+  box-sizing: border-box;
+  position: relative;
+  background-size: cover;
+  overflow: hidden;
+}
+
+body {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: var(--font-family-base);
+}
+
+/// @TODO
+.space-keeper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.base-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}

package/src/assets/common.scss

@@ -0,0 +1,79 @@
+.uc-pointer {
+  cursor: pointer;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.d-flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-justify-center {
+    justify-content: center;
+}
+
+.flex-items-start {
+    align-items: flex-start;
+}
+
+.flex-self-start {
+    align-self: flex-start;
+}
+
+.flex-align-center {
+    align-items: center;
+}
+
+.flex-grow {
+    flex-grow: 1;
+}
+
+.ui-focused-border {
+    --contour-color: var(--txt-01);
+    --label-color: var(--txt-01);
+    --contour-border-width: 1px;
+    --contour-box-shadow: none;
+    --label-offset-left-x: 8px;
+    --label-offset-right-x: 8px;
+    --prefix-color: var(--color-placeholder);
+
+    &.error {
+        --contour-color: var(--txt-error);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+        border-radius: var(--border-radius-control);
+        border-width: var(--contour-border-width);
+        border-color: var(--contour-color);
+        border-style: solid;
+        box-shadow: var(--contour-box-shadow);
+    }
+
+    &:focus-within:not(.error) {
+        --label-color: var(--txt-focus);
+        --contour-color: var(--border-color-focus);
+        --contour-border-width: 2px;
+        --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
+    }
+
+    &:focus-within.error {
+        --contour-border-width: 2px;
+        --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
+    }
+}