@milaboratories/uikit 1.2.3

package/src/assets/typography.scss

@@ -0,0 +1,164 @@
+.text-h1 {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 64px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 72px;
+  letter-spacing: -1.28px;
+}
+
+.text-h2 {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 48px;
+  letter-spacing: -0.8px;
+}
+
+.text-h3 {
+  color: var(--txt-01);
+  font-feature-settings:
+    'clig' off,
+    'liga' off;
+  font-family: RoadRadio;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 40px;
+}
+
+.text-subtitle-m {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: -0.56px;
+}
+
+.text-subtitle-s {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: -0.2px;
+}
+
+.text-m {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.text-m-btn {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.text-m-link {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  text-decoration-line: underline;
+}
+
+.text-s {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.text-s-btn {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.text-s-link {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  text-decoration-line: underline;
+}
+
+.text-mono-m {
+  color: var(--txt-01);
+  font-feature-settings:
+    'ss17' on,
+    'ss15' on,
+    'ss11' on;
+  font-family: 'Spline Sans Mono';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.text-mono-s {
+  color: var(--txt-01);
+  font-feature-settings:
+    'ss17' on,
+    'ss15' on,
+    'ss11' on;
+  font-family: 'Spline Sans Mono';
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.text-caps13 {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 14px;
+  letter-spacing: 0.52px;
+  text-transform: uppercase;
+}
+
+.text-caps11 {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 12px;
+  letter-spacing: 0.44px;
+  text-transform: uppercase;
+}
+
+.text-description {
+  color: var(--txt-01);
+  font-family: var(--font-family-base);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+}

package/src/assets/ui.scss

@@ -0,0 +1,20 @@
+@use './base';
+@use './fonts';
+@use './common';
+@use './utils';
+@use './animations';
+@use './icons';
+@use './masks';
+@use './slider';
+@use './theme-switcher';
+@use './progress-bar';
+@use './scroll';
+@use './dropdown-list-item';
+@use './typography';
+@use './dropdown-tab-item';
+@use './input-range';
+@use './sortable';
+@use './layout';
+@use './icons/icons-set';
+@use './css-utils';
+@use './file-base-input';

package/src/assets/utils.scss

@@ -0,0 +1,185 @@
+@import "./mixins";
+
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.inner-border {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+}
+
+.double-contour {
+  position: absolute;
+  top: calc(var(--contour-offset) * -1);
+  left: calc(var(--contour-offset) * -1);
+  right: calc(var(--contour-offset) * -1);
+  bottom: calc(var(--contour-offset) * -1);
+  pointer-events: none;
+
+  --offset-left-x: calc(var(--label-offset-left-x) + var(--contour-offset));
+
+  clip-path:
+    polygon(0 0,
+      var(--offset-left-x) 0,
+      var(--offset-left-x) 12px,
+      var(--label-offset-right-x) 12px,
+      var(--label-offset-right-x) 0,
+      100% 0,
+      100% 100%,
+      0 100%,
+      0 0);
+
+  >div {
+    position: absolute;
+    top: var(--contour-offset);
+    left: var(--contour-offset);
+    right: var(--contour-offset);
+    bottom: var(--contour-offset);
+  }
+}
+
+a.btn-link {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: var(--font-size-main);
+  line-height: 20px;
+  color: var(--color-main-dark);
+  text-decoration: none;
+  user-select: none;
+
+  .circle {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border: 1px solid var(--color-main-dark);
+    border-radius: 50%;
+    margin-right: 12px;
+  }
+
+  &:hover {
+    background: transparent;
+
+    .circle {
+      background: var(--color-hover-bg);
+    }
+  }
+}
+
+.flip-theme {
+  &__dark {
+    display: none;
+  }
+}
+
+[data-theme="dark"] .flip-theme {
+  &__light {
+    display: none;
+  }
+
+  &__dark {
+    display: block;
+  }
+}
+
+
+.info {
+  display: block;
+  margin: 0 4px;
+  @include icon(url('./images/16_info.svg'), 16px);
+
+  [data-theme="dark"] & {
+    @include icon(url('./images/16_info-dark.svg'), 16px);
+  }
+}
+
+.checkmark {
+  @include icon(url('./images/16_checkmark.svg'), 16px);
+
+  [data-theme="dark"] & {
+    @include icon(url('./images/16_checkmark-dark.svg'), 16px);
+  }
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+@for $i from 1 through 48 {
+  .p-#{$i} {
+    padding: #{$i}px;
+  }
+
+  .pt-#{$i} {
+    padding-top: #{$i}px;
+  }
+
+  .pl-#{$i} {
+    padding-left: #{$i}px;
+  }
+
+  .pr-#{$i} {
+    padding-right: #{$i}px;
+  }
+
+  .pb-#{$i} {
+    padding-bottom: #{$i}px;
+  }
+
+  .m-#{$i} {
+    margin: #{$i}px;
+  }
+
+  .mt-#{$i} {
+    margin-top: #{$i}px;
+  }
+
+  .ml-#{$i} {
+    margin-left: #{$i}px;
+  }
+
+  .mr-#{$i} {
+    margin-right: #{$i}px;
+  }
+
+  .mb-#{$i} {
+    margin-bottom: #{$i}px;
+  }
+
+  .gap-#{$i} {
+    gap: #{$i}px;
+  }
+}

package/src/assets/variables.scss

@@ -0,0 +1,133 @@
+:root {
+  --txt-00: #ffffff;
+  --txt-01: #110529;
+  --txt-02: #231842;
+  --txt-03: #9d9eae;
+  --txt-mask: #cfd1db;
+  --txt-focus: #07ad3e;
+  --txt-error: #f1222f;
+  --txt-link: #5f31cc;
+  //icon
+  --ic-00: #ffffff;
+  --ic-01: #110529;
+  --ic-02: #cfd1db;
+  --ic-accent: #07ad3e;
+  //border
+  --border-color-default: #110529;
+  --border-color-hover: #231842;
+  --border-color-focus: #49cc49;
+  --border-color-error: #ff5c5c;
+  --border-color-div-grey: #e1e3eb;
+  --border-color-div-bw: #ffffff;
+  //button
+  --btn-accent-default: #845cff;
+  --btn-accent-hover: #9470ff;
+  --btn-accent-press: #6f4dd6;
+  --btn-primary-default: #110529;
+  --btn-primary-hover: #231842;
+  --btn-primary-press: #080214;
+  --btn-sec-hover-white: rgba(255, 255, 255, 0.5);
+  --btn-sec-hover-grey: rgba(155, 171, 204, 0.16);
+  --btn-sec-press-grey: rgba(155, 171, 204, 0.24);
+  --btn-active-select: rgba(99, 224, 36, 0.24);
+  --btn-switcher: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);
+  //disable
+  --dis-00: #ffffff;
+  --dis-01: #cfd1db;
+  //background
+  --bg-base-dark: #110529;
+  --bg-base-light: #f7f8fa;
+  --bg-elevated-01: #ffffff;
+  --bg-elevated-02: #e1e3eb;
+  //filled
+  --filled-V-BG: #d0f0c0;
+  --filled-D-BG: #ffcecc;
+  --filled-N-BG: #faf5aa;
+  --filled-J-BG: #dedbff;
+  //notifications
+  --notification-neutral: linear-gradient(90deg, #d6d9ff 0%, #fff 100%);
+  --notification-success: linear-gradient(90deg, #c9f0b6 0%, #fff 100%);
+  --notification-warning: linear-gradient(90deg, #fee0a3 0%, #fff 100%);
+  --notification-error: linear-gradient(90deg, #ffb8b8 0%, #fff 100%);
+  //gradient
+  --gradient-blue-green: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-green-lime: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);
+  --gradient-blue-violet: linear-gradient(180deg, #adb8ff 0%, #d6e9ff 100%);
+  --gradient-blue-clear: linear-gradient(180deg, #85beff 0%, #cef 100%);
+  --gradient-orange: linear-gradient(180deg, #ffb766 0%, #ffeaa3 100%);
+  --gradient-mint: linear-gradient(180deg, #7dd1d1 0%, #c8fae9 100%);
+  --gradient-lime: linear-gradient(180deg, #bfe062 0%, #e4ffad 100%);
+  --gradient-rose: linear-gradient(0deg, #ffddd6 0%, #ff99c9 100%);
+  --gradient-red: linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);
+  --gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);
+  --TT-gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);
+
+  // Layout
+  --main-spacing: 24px;
+  --gap-v: 24px;
+  --gap-h: 12px;
+}
+
+[data-theme='dark'] {
+  --txt-00: #ffffff;
+  --txt-01: #FFFFFF;
+  --txt-02: #adaeb8;
+  --txt-03: #60616b;
+  --txt-mask: #3D3D42;
+  --txt-focus: #87e087;
+  --txt-error: #ff5c5c;
+  --txt-link: #9470ff;
+  //icon
+  --ic-00: #ffffff;
+  --ic-01: #FFFFFF;
+  --ic-02: #60616b;
+  --ic-accent: #87e087;
+  //border
+  --border-color-default: #60616b;
+  --border-color-hover: #adaeb8;
+  --border-color-focus: #49cc49;
+  --border-color-error: #ff5c5c;
+  --border-color-div-grey: #232329;
+  --border-color-div-bw: #000000;
+  //button
+  --btn-accent-default: #5f31cc;
+  --btn-accent-hover: #5f31cc;
+  --btn-accent-press: #5f31cc;
+  --btn-primary-default: #5f31cc;
+  --btn-primary-hover: #6d3ddb;
+  --btn-primary-press: #5328b8;
+  --btn-sec-hover-white: rgba(131, 131, 163, 0.16);
+  --btn-sec-hover-grey: rgba(131, 131, 163, 0.16);
+  --btn-sec-press-grey: rgba(131, 131, 163, 0.24);
+  --btn-active-select: rgba(99, 224, 36, 0.24);
+  --btn-switcher: #5e5e70;
+  //disable
+  --dis-00: #65656b;
+  --dis-01: #3D3D42;
+  //background
+  --bg-base-dark: #0d0d0f;
+  --bg-base-light: #0d0d0f;
+  --bg-elevated-01: #1b1b1f;
+  --bg-elevated-02: #2d2d33;
+  //filled
+  --filled-V-BG: rgba(66, 184, 66, 0.4);
+  --filled-D-BG: rgba(229, 83, 229, 0.4);
+  --filled-N-BG: rgba(83, 82, 102, 0.4);
+  --filled-J-BG: rgba(132, 92, 255, 0.4);
+  //notifications
+  --notification-neutral: linear-gradient(90deg, #4d4d8f 0%, #292933 100%);
+  --notification-success: linear-gradient(90deg, #305c3e 0%, #292933 100%);
+  --notification-warning: linear-gradient(90deg, #754f2d 0%, #292933 100%);
+  --notification-error: linear-gradient(90deg, #8f3343 0%, #292933 100%);
+  //gradient
+  --gradient-blue-green: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-green-lime: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-blue-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-blue-clear: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-orange: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-mint: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-lime: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-rose: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-red: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+  --gradient-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
+}

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.07" height="36" aria-hidden="true" class="iconify iconify--logos" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0z"/></svg>

package/src/base/BtnBase.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script lang="ts" setup>
+import type { MaskIconName16, Size } from '@/types';
+import { computed, ref } from 'vue';
+import MaskIcon16 from '@/components/MaskIcon16.vue';
+import { useRipple } from '@/composition/useRipple';
+
+const props = defineProps<{
+  loading?: boolean;
+  small?: boolean;
+  large?: boolean;
+  size?: Size;
+  round?: boolean;
+  icon?: MaskIconName16;
+  reverse?: boolean;
+  justifyCenter?: boolean;
+}>();
+
+const btn = ref();
+
+const small = computed(() => props.small || props.size === 'small');
+const large = computed(() => props.large || props.size === 'large');
+
+useRipple(btn);
+</script>
+
+<template>
+  <button
+    ref="btn"
+    tabindex="0"
+    :class="{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }"
+    v-bind="{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }"
+  >
+    <span v-if="!round">
+      <slot />
+    </span>
+    <MaskIcon16 v-if="loading" name="loading" :size="size" />
+    <MaskIcon16 v-else-if="icon" :name="icon" :size="size" />
+  </button>
+</template>

package/src/components/ContextProvider.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { type InjectionKey, computed, provide } from 'vue';
+
+const props = defineProps<{
+  context: object;
+  contextKey: InjectionKey<unknown>;
+}>();
+
+provide<unknown>(
+  props.contextKey,
+  computed(() => props.context),
+);
+</script>
+
+<template>
+  <slot />
+</template>

package/src/components/DataTable/AddColumnBtn.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="add-column-btn">
+    <div />
+  </div>
+</template>

package/src/components/DataTable/BaseCellComponent.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { call } from '@milaboratories/helpers';
+import type { ValueType } from './types';
+import { computed, reactive, ref, unref } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  modelValue: unknown;
+  valueType: ValueType | undefined;
+  editable?: boolean;
+}>();
+
+const data = reactive({
+  edit: false as boolean,
+});
+
+const valueTypeRef = computed(() => props.valueType);
+
+const onInput = (ev: Event) => {
+  let inputValue = (ev.target as HTMLInputElement)?.value;
+
+  const valueType = unref(valueTypeRef);
+
+  // @todo temp, replace to parse functions
+  const value = call(() => {
+    if (valueType === 'integer') {
+      return parseInt(inputValue, 10);
+    }
+
+    if (valueType === 'float') {
+      return Number(inputValue);
+    }
+
+    return inputValue;
+  });
+
+  emit('update:modelValue', value);
+
+  data.edit = false;
+};
+
+const baseRef = ref<HTMLElement>();
+
+const onClick = (ev: MouseEvent) => {
+  if (!ev.metaKey && props.editable) {
+    data.edit = true;
+    requestAnimationFrame(() => {
+      baseRef.value?.querySelector('input')?.focus();
+    });
+  }
+};
+</script>
+
+<template>
+  <div ref="baseRef" class="base-cell" :class="{ 'base-cell__edit': data.edit }" @click="onClick">
+    <input v-if="data.edit" :value="modelValue" @focusout="data.edit = false" @change="onInput" />
+    <div v-else>{{ modelValue }}</div>
+  </div>
+</template>

package/src/components/DataTable/ColumnCaret.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { ColumnSpecSettings } from './types';
+import { injectState } from './keys';
+
+const state = injectState();
+
+const props = defineProps<{
+  column: ColumnSpecSettings;
+}>();
+
+const selected = computed(() => state.data.selectedColumns.has(props.column.id));
+</script>
+
+<template>
+  <div class="column-caret" :class="{ selected, frozen: column.frozen }" />
+</template>

package/src/components/DataTable/ColumnsCommandMenu.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { injectState } from './keys';
+
+const state = injectState();
+
+const selectedColumns = computed(() => state.getSelectedColumns());
+
+const isVisible = computed(() => selectedColumns.value.length > 0);
+
+const ops = computed(() => state.settings?.value.onSelectedColumns ?? []);
+
+const actions = computed(() =>
+  ops.value.map((op) => ({
+    label: op.label,
+    cb: () => {
+      op.cb(selectedColumns.value);
+      state.data.selectedColumns.clear();
+    },
+  })),
+);
+</script>
+
+<template>
+  <div v-if="isVisible" class="command-menu">
+    <span v-if="selectedColumns.length">selected columns {{ selectedColumns.length }}</span>
+    <hr />
+    <span v-for="(action, i) in actions" :key="i" class="command" @click.stop="action.cb">{{ action.label }}</span>
+  </div>
+</template>