@milaboratories/uikit 2.3.13 → 2.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.3.13",
+  "version": "2.3.14",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -9,6 +9,7 @@
       "default": "./dist/index.js"
     },
     "./styles": "./dist/index.js",
+    "./styles/variables": "./src/assets/variables.scss",
     "./assets/mixins.scss": "./src/assets/mixins.scss",
     "./svg/icons/*": "./src/assets/icons/icon-assets-min/*",
     "./svg/images/*": "./src/assets/images/*"
@@ -23,8 +24,8 @@
     "@vueuse/core": "^13.3.0",
     "d3": "^7.9.0",
     "resize-observer-polyfill": "^1.5.1",
-    "@milaboratories/helpers": "^1.6.17",
-    "@platforma-sdk/model": "^1.40.1"
+    "@milaboratories/helpers": "^1.6.18",
+    "@platforma-sdk/model": "^1.40.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
@@ -34,8 +35,8 @@
     "vue-tsc": "^2.2.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/build-configs": "1.0.4",
     "@milaboratories/ts-configs": "1.0.4",
+    "@milaboratories/build-configs": "1.0.4",
     "@milaboratories/eslint-config": "^1.0.4"
   },
   "scripts": {

package/src/assets/variables.scss

@@ -31,6 +31,8 @@
   --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%);
+
+  --btn-accent-positive-500: #ECFBE5;
   //disable
   --dis-00: #ffffff;
   --dis-01: light-dark(#cfd1db, #3d3d42);
@@ -63,7 +65,8 @@
   --gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);
   --TT-gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);
   --gradient-light-lime: linear-gradient(180deg, #EBFFEB 0%, transparent 100%);
-
+  //box shadow
+  --shadow-l: 0px 8px 16px -4px rgba(15, 36, 77, 0.16), 0px 12px 32px -4px rgba(15, 36, 77, 0.16);
   // Layout
   --main-spacing: 24px;
   --gap-v: 24px;

package/src/components/PlBtnGhost/pl-btn-ghost.scss

@@ -14,13 +14,6 @@
     min-width: var(--btn-min-width);
   }
 
-  [data-theme="dark"] & {
-    &:hover {
-      --color-text: #87E087;
-    }
-    --mask-icon-bg-color: #fff;
-  }
-
   &:disabled {
     --color-text: var(--btn-disabled-bg);
     --icon-color: var(--dis-01);

package/src/components/PlConfirmDialog.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { PlBtnPrimary } from './PlBtnPrimary';
+import { PlBtnSecondary } from './PlBtnSecondary';
+import { PlDialogModal } from './PlDialogModal';
+
+const props = withDefaults(
+  defineProps<{
+    opened?: boolean;
+    title: string;
+    message: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+  }>(), {
+    opened: true,
+    onCancel: undefined,
+    onConfirm: undefined,
+  },
+);
+
+const emits = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+const handleConfirm = () => {
+  emits('confirm');
+  props.onConfirm?.();
+};
+
+const handleCancel = () => {
+  emits('cancel');
+  props.onCancel?.();
+};
+</script>
+
+<template>
+  <PlDialogModal v-model="props.opened" :closable="false" @click.stop>
+    <template #title>
+      {{ title }}
+    </template>
+    <template #default>
+      {{ message }}
+    </template>
+    <template #actions>
+      <PlBtnPrimary @click.stop="handleConfirm">
+        {{ props.confirmLabel }}
+      </PlBtnPrimary>
+      <PlBtnSecondary @click.stop="handleCancel">
+        {{ props.cancelLabel }}
+      </PlBtnSecondary>
+    </template>
+  </PlDialogModal>
+</template>

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -7,11 +7,15 @@ export default {
 <script lang="ts" setup>
 import { useEventListener } from '../../composition/useEventListener';
 import './pl-dialog-modal.scss';
-import { computed, ref, useSlots } from 'vue';
+import { computed, ref } from 'vue';
 import PlCloseModalBtn from '../../utils/PlCloseModalBtn.vue';
 import type { Size } from '../../types';
 
-const slots = useSlots();
+const slots = defineSlots<{
+  title: () => unknown;
+  default: () => unknown;
+  actions: () => unknown;
+}>();
 
 const emit = defineEmits(['update:modelValue']);
 

package/src/components/PlEditableTitle/PlEditableTitle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useTransformedModel } from '../../composition/useTransformedModel';
 import style from './pl-editable-title.module.scss';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 const model = defineModel<string>();
 
@@ -27,6 +27,10 @@ const props = withDefaults(
      * Min title length
      */
     minLength?: number;
+    /**
+     * If true, input will be focused on mount
+     */
+    autofocus?: boolean;
   }>(),
   {
     placeholder: 'Title',
@@ -58,6 +62,8 @@ const local = useTransformedModel(model, {
   },
 });
 
+const inputRef = ref<HTMLInputElement>();
+
 const computedStyle = computed(() => ({
   maxWidth: props.maxWidth ?? '80%',
 }));
@@ -67,7 +73,12 @@ const save = () => {
   local.reset();
 };
 
-const inputRef = ref<HTMLInputElement>();
+onMounted(() => {
+  if (props.autofocus) {
+    inputRef.value?.focus();
+  }
+});
+
 </script>
 
 <template>

package/src/components/PlElementList/PlElementList.vue

@@ -1,11 +1,11 @@
 <script generic="T extends unknown = unknown, K extends number | string = number | string" lang="ts" setup>
-import type { ShallowRef } from 'vue';
-import { computed, shallowRef, watch } from 'vue';
 import { isFunction, shallowHash } from '@milaboratories/helpers';
 import { useSortable } from '@vueuse/integrations/useSortable';
 import { type SortableEvent } from 'sortablejs';
-import { moveElements } from './utils.ts';
+import type { ShallowRef } from 'vue';
+import { computed, shallowRef, watch } from 'vue';
 import PlElementListItem from './PlElementListItem.vue';
+import { moveElements } from './utils.ts';
 
 const itemsRef = defineModel<T[]>('items', { required: true });
 
@@ -142,9 +142,17 @@ function createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefine
       }
     },
   });
-  watch([() => props.disableDragging, toggler], ([disabled, on]) => disabled || !on ? sortable.stop() : sortable.start(), {
-    immediate: true,
-  });
+  watch(
+    [elRef, () => props.disableDragging, toggler],
+    ([elRef, disabled, on]) => {
+      if (!elRef || disabled || !on) {
+        sortable.stop();
+      } else {
+        sortable.start();
+      }
+    },
+    { immediate: true },
+  );
 
   return sortable;
 }

package/src/components/PlElementList/PlElementListItem.vue

@@ -37,6 +37,7 @@ const emit = defineEmits<{
     :class="[$style.root, {
       [$style.active]: props.isActive,
       [$style.pinned]: props.isPinned,
+      [$style.opened]: props.isExpanded,
       [$style.disabled]: props.isToggled,
     }]"
   >
@@ -125,6 +126,11 @@ const emit = defineEmits<{
 
   &:hover {
     --border-color: var(--border-color-focus);
+    --head-background: var(--gradient-light-lime);
+  }
+
+  &.opened {
+    --head-background: var(--gradient-light-lime);
   }
 
   &.disabled {
@@ -152,10 +158,6 @@ const emit = defineEmits<{
   min-height: 40px;
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   background: var(--head-background);
-
-  &:hover, &.opened {
-    --head-background: var(--gradient-light-lime);
-  }
 }
 
 .contentChevron {

package/src/components/PlElementList/utils.ts

@@ -2,6 +2,8 @@ export const moveElements = <T>(array: T[], from: number, to: number): T[] => {
   if (to >= 0 && to < array.length) {
     const element = array.splice(from, 1)[0];
     array.splice(to, 0, element);
+  } else {
+    console.warn(`Invalid move operation: from ${from} to ${to} in array of length ${array.length}`);
   }
 
   return array;

package/src/components/PlSidebar/PlSidebarGroup.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const slots = defineSlots<{
+  [K in `item-${number}`]: () => unknown;
+}>();
+</script>
+
+<template>
+  <div :class="$style.root">
+    <template v-for="name in Object.keys(slots) as `item-${number}`[]" :key="name" >
+      <div :class="$style.item">
+        <slot :name="name" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../../assets/variables.scss';
+
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+
+.item {
+  width: 1000%;
+  height: 100%;
+  border-right: 1px solid var(--border-color-div-grey);
+
+  &:last-child {
+    border-right: none;
+  }
+}
+</style>

package/src/components/PlSidebar/PlSidebarItem.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const slots = defineSlots<{
+  'header'?: () => unknown;
+  'header-content'?: () => unknown;
+  'body'?: () => unknown;
+  'body-content'?: () => unknown;
+  'footer'?: () => unknown;
+  'footer-content'?: () => unknown;
+}>();
+</script>
+
+<template>
+  <div :class="$style.root">
+    <slot name="header">
+      <div v-if="slots['header-content']" :class="$style.header">
+        <slot name="header-content" />
+      </div>
+    </slot>
+    <slot name="body">
+      <div v-if="slots['body-content']" :class="$style.body">
+        <slot name="body-content" />
+      </div>
+    </slot>
+    <slot name="footer">
+      <div v-if="slots['footer-content']" :class="$style.footer">
+        <slot name="footer-content" />
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../../assets/variables.scss';
+
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.close {
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 8px;
+}
+.header {
+  padding: 24px;
+}
+.body {
+  flex-grow: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+.footer {
+  padding: 24px;
+  border-top: 1px solid var(--border-color-div-grey);
+}
+</style>

package/src/components/PlSidebar/index.ts

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

package/src/components/PlSlideModal/PlPureSlideModal.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+export default {
+  name: 'PlPureSlideModal',
+  inheritAttrs: false,
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-slide-modal.scss';
+import { ref, useAttrs } from 'vue';
+import TransitionSlidePanel from '../TransitionSlidePanel.vue';
+import { useClickOutside, useEventListener } from '../../index';
+import type { Props } from './props';
+import { defaultProps } from './props';
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+const modal = ref();
+const attrs = useAttrs();
+const props = withDefaults(
+  defineProps<Props>(),
+  defaultProps,
+);
+
+useClickOutside(modal, () => {
+  if (props.modelValue && props.closeOnOutsideClick) {
+    emit('update:modelValue', false);
+  }
+});
+
+useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
+  if (evt.key === 'Escape') {
+    emit('update:modelValue', false);
+  }
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <TransitionSlidePanel>
+      <div
+        v-if="props.modelValue"
+        ref="modal"
+        class="pl-slide-modal"
+        :style="{ width: props.width }"
+        v-bind="attrs"
+        @keyup.esc="emit('update:modelValue', false)"
+      >
+        <div class="close-dialog-btn" @click="emit('update:modelValue', false)" />
+        <slot />
+      </div>
+    </TransitionSlidePanel>
+    <div v-if="props.modelValue && props.shadow" class="pl-slide-modal__shadow" @keyup.esc="emit('update:modelValue', false)" />
+  </Teleport>
+</template>

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -7,86 +7,42 @@ export default {
 
 <script lang="ts" setup>
 import './pl-slide-modal.scss';
-import { ref, useAttrs, useSlots } from 'vue';
-import TransitionSlidePanel from '../TransitionSlidePanel.vue';
-import { useClickOutside, useEventListener } from '../../index';
-
-const slots = useSlots(); // title & actions
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
-}>();
+import { useAttrs, useSlots } from 'vue';
+import PlPureSlideModal from './PlPureSlideModal.vue';
+import type { Props } from './props';
+import { defaultProps } from './props';
 
+const slots = useSlots();
+const attrs = useAttrs();
 const props = withDefaults(
-  defineProps<{
-    /**
-     * Determines whether the modal is open
-     */
-    modelValue: boolean;
-    /**
-     * Css `width` value (px, %, em etc)
-     */
-    width?: string;
-    /**
-     * If `true`, then show shadow (default value `false`)
-     */
-    shadow?: boolean;
-    /**
-     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
-     */
-    closeOnOutsideClick?: boolean;
-  }>(),
-  {
-    modelValue: false,
-    width: '368px',
-    shadow: false,
-    closeOnOutsideClick: true,
-  },
+  defineProps<Props>(),
+  defaultProps,
 );
 
-const modal = ref();
-
-const $attrs = useAttrs();
-
-useClickOutside(modal, () => {
-  if (props.modelValue && props.closeOnOutsideClick) {
-    emit('update:modelValue', false);
-  }
-});
-
-useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
-  if (evt.key === 'Escape') {
-    emit('update:modelValue', false);
-  }
-});
 </script>
 
 <template>
-  <Teleport to="body">
-    <TransitionSlidePanel>
-      <div
-        v-if="modelValue"
-        ref="modal"
-        :style="{ width }"
-        v-bind="$attrs"
-        class="pl-slide-modal"
-        :class="{ 'has-title': slots.title, 'has-actions': slots.actions }"
-        @keyup.esc="emit('update:modelValue', false)"
-      >
-        <div class="close-dialog-btn" @click="emit('update:modelValue', false)" />
-        <div v-if="slots.title" class="pl-slide-modal__title">
-          <span class="pl-slide-modal__title-content">
-            <slot name="title" />
-          </span>
-        </div>
-        <div class="pl-slide-modal__content">
-          <slot />
-        </div>
-        <div v-if="slots.actions" class="pl-slide-modal__actions">
-          <slot name="actions" />
-        </div>
-      </div>
-    </TransitionSlidePanel>
-    <div v-if="modelValue && shadow" class="pl-slide-modal__shadow" @keyup.esc="emit('update:modelValue', false)" />
-  </Teleport>
+  <PlPureSlideModal
+    v-bind="{...props, ...attrs}"
+    :class="[$style.root, { 'has-title': slots.title, 'has-actions': slots.actions }]"
+  >
+    <div v-if="slots.title" class="pl-slide-modal__title">
+      <span class="pl-slide-modal__title-content">
+        <slot name="title" />
+      </span>
+    </div>
+    <div class="pl-slide-modal__content">
+      <slot />
+    </div>
+    <div v-if="slots.actions" class="pl-slide-modal__actions">
+      <slot name="actions" />
+    </div>
+  </PlPureSlideModal>
 </template>
+
+<style lang="css" module>
+.root {
+  --padding-top: 24px;
+  --padding-bottom: 24px;
+}
+</style>

package/src/components/PlSlideModal/index.ts

@@ -1 +1,2 @@
+export { default as PlPureSlideModal } from './PlPureSlideModal.vue';
 export { default as PlSlideModal } from './PlSlideModal.vue';

package/src/components/PlSlideModal/pl-slide-modal.scss

@@ -1,15 +1,15 @@
 @use "../../assets/mixins.scss" as *;
 
 .pl-slide-modal {
-  --padding-top: 24px;
-  --padding-bottom: 24px;
+  --padding-top: 0;
+  --padding-bottom: 0;
   position: absolute;
   top: var(--title-bar-height);
   right: 0;
   bottom: 0;
   z-index: var(--z-slide-dialog);
-  display: grid;
-  grid-template-rows: auto 1fr auto;
+  display: flex;
+  flex-direction: column;
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
 
@@ -29,6 +29,7 @@
 
   .close-dialog-btn {
     position: absolute;
+    z-index: 1;
     top: 12px;
     right: 12px;
     cursor: pointer;

package/src/components/PlSlideModal/props.ts

@@ -0,0 +1,25 @@
+export type Props = {
+  /**
+     * Determines whether the modal is open
+     */
+  modelValue: boolean;
+  /**
+     * Css `width` value (px, %, em etc)
+     */
+  width?: string;
+  /**
+     * If `true`, then show shadow (default value `false`)
+     */
+  shadow?: boolean;
+  /**
+     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
+     */
+  closeOnOutsideClick?: boolean;
+};
+
+export const defaultProps: Props = {
+  modelValue: false,
+  width: '368px',
+  shadow: false,
+  closeOnOutsideClick: true,
+};

package/src/composition/useConfirm.ts

@@ -0,0 +1,35 @@
+import { h, render } from 'vue';
+import PlConfirmDialog from '../components/PlConfirmDialog.vue';
+
+export type ConfirmProps = {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+};
+
+export function useConfirm(props: ConfirmProps) {
+  return () => {
+    return new Promise<boolean>((resolve) => {
+      const vnode = h(PlConfirmDialog, {
+        opened: true,
+        title: props.title,
+        message: props.message,
+        confirmLabel: props.confirmLabel ?? 'Confirm',
+        cancelLabel: props.cancelLabel ?? 'Cancel',
+        onConfirm: () => finish(true),
+        onCancel: () => finish(false),
+      });
+
+      const mountPoint = document.createElement('div');
+      document.body.appendChild(mountPoint);
+      render(vnode, mountPoint);
+
+      function finish(result: boolean) {
+        resolve(result);
+        render(null, mountPoint);
+        mountPoint.remove();
+      }
+    });
+  };
+}