@milaboratories/uikit 2.2.9 → 2.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.9",
+  "version": "2.2.11",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -32,8 +32,8 @@
     "vue-tsc": "^2.1.6",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/helpers": "^1.6.6",
-    "@platforma-sdk/model": "^1.10.12"
+    "@platforma-sdk/model": "^1.10.12",
+    "@milaboratories/helpers": "^1.6.7"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/animations.scss

@@ -58,3 +58,24 @@
     transform: translateX(200%);
   }
 }
+
+.expand-panel {
+  &-enter-active {
+    transition: all 3s ease-out;
+    transition-property: height, opacity, padding, margin;
+    overflow: hidden;
+  }
+
+  &-leave-active {
+    transition: all 3s ease-in-out;
+    transition-property: height, opacity, padding, margin;
+    overflow: hidden;
+  }
+
+  &-enter-from, &-leave-to {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+  }
+}

package/src/assets/base.scss

@@ -72,6 +72,8 @@
   --divider-color: var(--txt-01); // @TODO
 
   --pl-dropdown-options-bg: #fff;
+
+  --mask-icon-bg-color: #000;
 }
 
 [data-theme='dark'] {

package/src/assets/icons/icons-set.scss

@@ -34,7 +34,7 @@
 
 .mask-16 {
   --mask-size: 16px;
-  background-color: black;
+  background-color: var(--mask-icon-bg-color);
 
   @each $name, $path in $icons16 {
     &.mask-#{$name} {
@@ -45,7 +45,7 @@
 
 .mask-24 {
   --mask-size: 24px;
-  background-color: black;
+  background-color: var(--mask-icon-bg-color);
 
   @each $name, $path in $icons24 {
     &.mask-#{$name} {

package/src/components/PlAccordion/ExpandTransition.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+const onStart = (el: Element) => {
+  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');
+  el.classList.add('expand-collapse-fix');
+};
+
+const onAfter = (el: Element) => {
+  (el as HTMLElement).style.removeProperty('--component-height');
+  el.classList.remove('expand-collapse-fix');
+};
+</script>
+
+<template>
+  <Transition name="expand-collapse" @enter="onStart" @leave="onStart" @after-enter="onAfter" @after-leave="onAfter">
+    <slot></slot>
+  </Transition>
+</template>
+
+<style>
+.expand-collapse-fix {
+  overflow: hidden;
+}
+
+.expand-collapse-enter-active,
+.expand-collapse-leave-active {
+  transition:
+    height 0.2s ease-in-out,
+    opacity 0.2s ease-in-out;
+  height: var(--component-height);
+}
+
+.expand-collapse-enter-from,
+.expand-collapse-leave-to {
+  opacity: 0.5;
+  height: 0;
+}
+</style>

package/src/components/PlAccordion/PlAccordion.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { provide, toRef } from 'vue';
+
+const model = defineModel<string>();
+
+const props = defineProps<{
+  /**
+   * Allow multiple accordion sections to be opened at the same time
+   */
+  multiple?: boolean;
+}>();
+
+provide('pl-accordion-model', model);
+provide('pl-accordion-props', toRef(props));
+</script>
+
+<template>
+  <slot name="header" />
+  <slot />
+</template>

package/src/components/PlAccordion/PlAccordionSection.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { uniqueId } from '@milaboratories/helpers';
+import { PlMaskIcon16 } from '../PlMaskIcon16';
+import { PlSectionSeparator } from '../PlSectionSeparator';
+import ExpandTransition from './ExpandTransition.vue';
+import type { Ref } from 'vue';
+import { computed, inject } from 'vue';
+
+const $m = inject<Ref<string>>('pl-accordion-model');
+
+const $p = inject<
+  Ref<{
+    multiple?: boolean;
+  }>
+>('pl-accordion-props');
+
+const model = defineModel<boolean>();
+
+const id = uniqueId();
+
+const isMulti = computed(() => !$p || $p.value.multiple);
+
+const open = computed({
+  get() {
+    if (isMulti.value) {
+      return model.value;
+    }
+
+    return $m ? $m.value === id : model.value;
+  },
+  set(on) {
+    if (isMulti.value) {
+      model.value = on;
+    } else if ($m) {
+      $m.value = $m.value === id ? '' : id;
+    }
+  },
+});
+
+defineProps<{
+  /**
+   * The label text (optional)
+   */
+  label?: string;
+  /**
+   * If `true`, remove top padding
+   */
+  compact?: boolean;
+}>();
+</script>
+
+<template>
+  <PlSectionSeparator :class="$style.separator" :compact="compact" @click="open = !open">
+    <PlMaskIcon16 name="chevron-right" :class="[{ [$style.down]: open }, $style.chevron]" />
+    {{ label }}
+  </PlSectionSeparator>
+  <ExpandTransition>
+    <div v-if="open" :class="$style.content">
+      <slot />
+    </div>
+  </ExpandTransition>
+</template>
+
+<style module>
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: inherit;
+  will-change: height, opacity;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  margin-top: -8px;
+  padding-top: 8px;
+}
+
+.separator:hover {
+  --pl-separator-txt-color: var(--txt-01);
+  --mask-icon-bg-color: var(--ic-01);
+}
+
+.chevron {
+  transition-duration: 50ms;
+}
+
+.down {
+  transform: rotate(90deg);
+}
+</style>

package/src/components/PlAccordion/index.ts

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

package/src/components/PlBtnGroup/PlBtnGroup.vue

@@ -42,6 +42,10 @@ const props = defineProps<{
    * If `true`, the component is disabled and cannot be interacted with.
    */
   disabled?: boolean;
+  /**
+   * If `true`, the height of the component is 32px
+   */
+  compact?: boolean;
   /**
    * A helper text displayed below the component when there are no errors (optional).
    */
@@ -61,7 +65,7 @@ const normalizedOptions = computed(() =>
 </script>
 
 <template>
-  <div class="pl-btn-group" :class="{ disabled }">
+  <div class="pl-btn-group" :class="{ disabled, compact }">
     <label v-if="label">
       <span>{{ label }}</span>
       <PlTooltip v-if="slots.tooltip" class="info" position="top">

package/src/components/PlBtnGroup/pl-btn-group.scss

@@ -107,6 +107,10 @@
     }
   }
 
+  &.compact {
+    --pl-btn-group-height: 32px; 
+  }
+
   &.disabled {
     --color-border-default: var(--color-dis-01);
     --btn-switcher-bg: var(--color-dis-01);

package/src/components/PlSectionSeparator/PlSectionSeparator.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+defineProps<{
+  /**
+   * If `true`, remove top padding
+   */
+  compact?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="pl-section-separator" :class="{ [$style.compact]: compact }">
+    <div :class="$style.content"><slot /></div>
+  </div>
+</template>
+
+<style module>
+:global(.pl-section-separator) {
+  --pl-separator-padding: 20px 0 4px 0;
+  --pl-separator-txt-color: var(--txt-03);
+  --pl-separador-divider-color: var(--border-color-div-grey);
+  --mask-icon-bg-color: var(--ic-02);
+  display: flex;
+  flex-direction: column;
+  padding: var(--pl-separator-padding);
+}
+
+:global(.pl-section-separator):first-child {
+  --pl-separator-padding: 4px 0 4px 0;
+}
+
+.compact {
+  --pl-separator-padding: 0 0 4px 0;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--pl-separator-txt-color);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 14px;
+  min-height: 16px;
+  letter-spacing: 0.52px;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+.content::after {
+  flex: 1;
+  content: '';
+  height: 1px;
+  background-color: var(--pl-separador-divider-color);
+  margin-left: 4px;
+}
+</style>

package/src/components/PlSectionSeparator/index.ts

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

package/src/components/PlTextField/PlTextField.vue

@@ -205,7 +205,7 @@ useLabelNotch(rootRef);
         @focusout="onFocusOut"
       />
       <div class="pl-text-field__append">
-        <PlIcon16 v-if="canShowClearable" name="delete-clear" @click="clear" />
+        <PlIcon16 v-if="canShowClearable" class="pl-text-field__clearable" name="delete-clear" @click="clear" />
         <PlIcon24 v-if="type === 'password'" :name="passwordIcon" style="cursor: pointer" @click="togglePasswordVisibility" />
         <slot name="append" />
       </div>

package/src/components/PlTextField/pl-text-field.scss

@@ -10,6 +10,7 @@
   --label-offset-left-x: 8px;
   --label-offset-right-x: 8px;
   --prefix-color: var(--color-placeholder);
+  --show-clearable: none;
 
   width: 100%;
   min-width: 160px;
@@ -87,6 +88,10 @@
     }
   }
 
+  &__clearable {
+    display: var(--show-clearable) !important;
+  }
+
   &__helper {
     @include field-helper();
   }
@@ -97,6 +102,11 @@
 
   &:hover {
     --contour-color: var(--control-hover-color);
+    --show-clearable: inline-block;
+  }
+
+  &:focus-within {
+    --show-clearable: inline-block;
   }
 
   &:focus-within:not(.error) {

package/src/index.ts

@@ -44,6 +44,8 @@ export * from './components/PlSlideModal';
 export * from './components/PlToggleSwitch';
 export * from './components/PlLogView';
 export * from './components/PlTabs';
+export * from './components/PlSectionSeparator';
+export * from './components/PlAccordion';
 
 export * from './components/PlFileDialog';
 export * from './components/PlFileInput';

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -10,10 +10,14 @@ import { useSlots } from 'vue';
 import './pl-block-page.scss';
 
 const slots = useSlots();
+
+defineProps<{
+  noBodyGutters?: boolean;
+}>();
 </script>
 
 <template>
-  <div class="pl-layout-component pl-block-page">
+  <div class="pl-layout-component pl-block-page" :class="{ noBodyGutters }">
     <div v-if="slots.title" class="pl-block-page__title">
       <h1><slot name="title" /></h1>
       <div class="pl-block-page__title__append">

package/src/layout/PlBlockPage/pl-block-page.scss

@@ -1,6 +1,8 @@
 @import "@/assets/mixins";
 
 .pl-block-page {
+  --pl-block-page-body-padding: var(--main-spacing, 24px);
+
   padding: var(--container-spacing);
   background-color: var(--bg-elevated-01);
   height: 100%;
@@ -8,6 +10,10 @@
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
 
+  &.noBodyGutters {
+    --pl-block-page-body-padding: 0;
+  }
+
   &__title {
     height: 80px;
     display: flex;
@@ -37,7 +43,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--gap-v);
-    padding: var(--main-spacing, 24px);
+    padding: var(--pl-block-page-body-padding);
     @include scrollbar(true, true);
   }
 }

package/src/layout/PlRow/PlRow.vue

@@ -11,6 +11,7 @@ import './pl-row.scss';
 defineProps<{
   wrap?: boolean;
   alignCenter?: boolean;
+  noGap?: boolean;
 }>();
 </script>
 

package/src/layout/PlRow/pl-row.scss

@@ -3,6 +3,10 @@
   flex-direction: row;
   gap: var(--gap-h);
 
+  &.noGap {
+    gap: 0;
+  }
+
   &.wrap {
     flex-wrap: wrap;
   }