@milaboratories/uikit 2.2.1 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -18,7 +18,7 @@
     "./*": "./*"
   },
   "dependencies": {
-    "vue": "^3.5.12"
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",
@@ -27,8 +27,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "tsc-alias": "^1.8.10",
-    "vitest": "^2.1.4",
-    "vite": "^5.4.10",
+    "vitest": "^2.1.5",
+    "vite": "^5.4.11",
     "vue-tsc": "^2.1.6",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",

package/src/components/PlLogView/pl-log-view.scss

@@ -9,8 +9,8 @@
   --border-color-log-view: var(--border-color-div-grey);
 
   height: 100%;
-  max-height: 100%;
-  max-width: 100%;
+  max-height: calc(100% - var(--contour-offset));
+  max-width: calc(100% - var(--contour-offset));
   border-radius: 6px;
   background: var(--log-background);
   display: flex;

package/src/components/PlTabs/PlTabs.vue

@@ -0,0 +1,65 @@
+<script lang="ts">
+/**
+ * A component for selecting one value from a list of options
+ */
+export default {
+  name: 'PlTabs',
+};
+</script>
+
+<script lang="ts" setup generic="M extends string">
+import style from './pl-tabs.module.scss';
+import type { TabOption } from './types';
+import Tab from './Tab.vue';
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the model value is updated.
+   */
+  (e: 'update:modelValue', value: M): void;
+}>();
+
+const emitModel = (v: M) => emit('update:modelValue', v);
+
+defineProps<{
+  /**
+   * The current selected tab value.
+   */
+  modelValue?: M;
+  /**
+   * List of available options for the component
+   */
+  options: Readonly<TabOption<M>[]>;
+  /**
+   * If `true`, the component is disabled and cannot be interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the `active` line appears on the top of element.
+   */
+  topLine?: boolean;
+  /**
+   * Maximum tab width (css value), can be overridden for each option
+   */
+  maxTabWidth?: string;
+}>();
+</script>
+
+<template>
+  <div :class="[style.component, { [style.disabled]: disabled, [style.topLine]: topLine }]">
+    <Tab
+      v-for="(opt, i) in options"
+      :key="i"
+      :tabindex="modelValue === opt.value || disabled || opt.disabled ? undefined : 0"
+      :option="opt"
+      :class="[{ [style.active]: modelValue === opt.value, [style.disabled]: opt.disabled }, style.tab]"
+      :style="{ '--pl-tabs-item-max-width': opt.maxWidth ?? maxTabWidth }"
+      @keydown.enter="emitModel(opt.value)"
+      @click="emitModel(opt.value)"
+    >
+      <slot :name="opt.value" :option="opt">
+        <span>{{ opt.label }}</span>
+      </slot>
+    </Tab>
+  </div>
+</template>

package/src/components/PlTabs/Tab.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { onMounted, unref, ref, reactive } from 'vue';
+import { PlTooltip } from '../PlTooltip';
+import type { TabOption } from './types';
+
+const rootRef = ref<{ $el: HTMLElement }>();
+
+defineProps<{
+  option: TabOption;
+}>();
+
+const data = reactive({
+  isOverflown: false,
+});
+
+onMounted(() => {
+  const root = unref(rootRef);
+
+  if (!root) {
+    return;
+  }
+
+  const el = root.$el.querySelector('span') as HTMLElement | null;
+
+  if (!el) {
+    return;
+  }
+
+  requestAnimationFrame(() => {
+    if (el.offsetWidth < el.scrollWidth) {
+      data.isOverflown = true;
+    }
+    console.log('el.offsetWidth, el.scrollWidth', el.offsetWidth, el.scrollWidth);
+  });
+});
+</script>
+
+<template>
+  <PlTooltip
+    ref="rootRef"
+    element="div"
+    position="top"
+    :hide="!data.isOverflown"
+    :close-delay="300"
+    :data-is-overflown="data.isOverflown ? 'true' : 'false'"
+  >
+    <slot />
+    <template #tooltip>
+      {{ option.label }}
+    </template>
+  </PlTooltip>
+</template>

package/src/components/PlTabs/index.ts

@@ -0,0 +1 @@
+export { default as PlTabs } from './PlTabs.vue';

package/src/components/PlTabs/pl-tabs.module.scss

@@ -0,0 +1,90 @@
+@import "@/assets/mixins";
+
+.component {
+  --pl-tabs-height: 40px;
+  --pl-tabs-item-border-color: var(--border-color-div-grey); 
+  --pl-tabs-item-border-width: 0 0 2px 0;
+  --pl-tabs-item-text-color: var(--txt-03);
+  --pl-tabs-item-max-width: 400px;
+  --pl-tabs-cursor: pointer;
+
+  position: relative;
+  min-height: var(--pl-tabs-height);
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+
+  .tab {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 12px;
+    padding: 10px 12px;
+    cursor: var(--pl-tabs-cursor);
+    outline: none;
+    position: relative;
+
+    &.disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    > span {
+      color: var(--pl-tabs-item-text-color);
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 14px; /* 107.692% */
+      letter-spacing: 0.52px;
+      text-transform: uppercase;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: var(--pl-tabs-item-max-width);
+      min-width: 60px;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      border: solid var(--pl-tabs-item-border-color);
+      border-width: var(--pl-tabs-item-border-width);
+    }
+
+    &:hover:not(.active) {
+      --pl-tabs-item-border-color: var(--border-color-focus);
+      --pl-tabs-item-text-color: var(--txt-01);
+    }
+
+    &:focus-visible {
+      --pl-tabs-item-border-color: var(--border-color-focus);
+      --pl-tabs-item-border-width: 2px;
+      --pl-tabs-item-text-color: var(--txt-01);
+    }
+
+    &.active {
+      --pl-tabs-item-border-color: var(--border-color-focus);
+      --pl-tabs-item-text-color: var(--txt-01);
+    }
+  }
+
+  &.topLine {
+    --pl-tabs-item-border-width: 2px 0 0 0;
+  }
+
+  &.disabled {
+    --pl-tabs-cursor: not-allowed;
+    cursor: not-allowed;
+    * {
+      pointer-events: none;
+    }
+  }
+}

package/src/components/PlTabs/types.ts

@@ -0,0 +1,12 @@
+export type TabOption<T extends string = string> = {
+  label: string;
+  value: T;
+  /**
+   * Each option can be disabled
+   */
+  disabled?: boolean;
+  /**
+   * Maximum tab width (css value)
+   */
+  maxWidth?: string;
+};

package/src/index.ts

@@ -42,6 +42,7 @@ export * from './components/PlDialogModal';
 export * from './components/PlSlideModal';
 export * from './components/PlToggleSwitch';
 export * from './components/PlLogView';
+export * from './components/PlTabs';
 
 export * from './components/PlFileDialog';
 export * from './components/PlFileInput';