@milaboratories/uikit 2.2.13 → 2.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.13",
+  "version": "2.2.14",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -33,7 +33,7 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@milaboratories/helpers": "^1.6.7",
-    "@platforma-sdk/model": "^1.13.2"
+    "@platforma-sdk/model": "^1.13.5"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlEditableTitle/PlEditableTitle.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { useTransformedModel } from '@/composition/useTransformedModel';
+import style from './pl-editable-title.module.scss';
+import { computed, ref } from 'vue';
+
+const model = defineModel<string>();
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Standard input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Any css `width` value (px, %), default is 80%
+     */
+    maxWidth?: string;
+    /**
+     * Fixed non-editable prefix
+     */
+    prefix?: string;
+    /**
+     * Max title length (default is 1000)
+     */
+    maxLength?: number;
+    /**
+     * Min title length
+     */
+    minLength?: number;
+  }>(),
+  {
+    placeholder: 'Title',
+    maxWidth: '80%',
+    prefix: undefined,
+    maxLength: 1000,
+    minLength: undefined,
+  },
+);
+
+const local = useTransformedModel(model, {
+  update() {
+    return false;
+  },
+  parse: (v): string => {
+    if (typeof v !== 'string') {
+      throw Error('value should be a string');
+    }
+
+    if (props.maxLength && v.length > props.maxLength) {
+      throw Error(`Max title length is ${props.maxLength} characters`);
+    }
+
+    if (props.minLength && v.length < props.minLength) {
+      throw Error(`Min title length is ${props.minLength} characters`);
+    }
+
+    return v.trim();
+  },
+});
+
+const computedStyle = computed(() => ({
+  maxWidth: props.maxWidth ?? '80%',
+}));
+
+const save = () => {
+  model.value = local.value && !local.error ? local.value : model.value;
+  local.reset();
+};
+
+const inputRef = ref<HTMLInputElement>();
+</script>
+
+<template>
+  <div class="pl-editable-title" :class="style.component" :style="computedStyle">
+    <div :class="style.container" @click="() => inputRef?.focus()">
+      <span v-if="prefix">{{ prefix.trim() }}&nbsp;</span>
+      <input
+        ref="inputRef"
+        v-model="local.value"
+        :placeholder="placeholder"
+        @focusout="save"
+        @keydown.escape="local.reset"
+        @keydown.enter="(ev) => (ev.target as HTMLInputElement)?.blur()"
+      />
+    </div>
+    <div v-if="local.error" :class="style.error">{{ local.error }}</div>
+  </div>
+</template>

package/src/components/PlEditableTitle/index.ts

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

package/src/components/PlEditableTitle/pl-editable-title.module.scss

@@ -0,0 +1,77 @@
+@import "@/assets/mixins.scss";
+
+.component {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  --mask-icon-bg-color: transparent;
+  --mask-size: 24px;
+
+  &:hover {
+    --mask-icon-bg-color: var(--ic-02);  
+  }
+
+  &:focus-within:not(&:hover) {
+    --mask-icon-bg-color: transparent;  
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    gap: 0;
+    align-items: center;
+    margin-right: calc(var(--mask-size));
+
+    span {
+      font-size: 28px;
+      font-weight: 500;
+      line-height: 32px;
+      letter-spacing: -0.56px;
+      white-space: nowrap;
+    }
+
+    input {
+      outline: none;
+      border: none;
+      text-overflow: ellipsis;
+      cursor: text;
+      field-sizing: content;
+      font-size: 28px;
+      font-weight: 500;
+      line-height: 32px;
+      letter-spacing: -0.56px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+      padding-right: 4px;
+      margin: 0;
+      font-family: var(--font-family-base);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      &::placeholder {
+        color: var(--txt-mask);
+      }
+    }
+
+    &::before {
+      content: '';
+      @include mask-var(url(@icons/icon-assets-min/24_edit.svg));
+      position: absolute;
+      right: calc((var(--mask-size)) * -1);
+      bottom: 6px;
+      background-color: var(--mask-icon-bg-color);
+      cursor: pointer;
+    }
+  }
+
+  .error {
+    position: absolute;
+    bottom: -4px;
+    transform: translateY(100%);
+    white-space: nowrap;
+    @include field-error();
+  }
+}

package/src/composition/useTransformedModel.ts

@@ -0,0 +1,80 @@
+import type { Ref, UnwrapNestedRefs } from 'vue';
+import { reactive, computed, ref } from 'vue';
+
+/**
+ * Creates a reactive local model with optional transformation and validation logic.
+ *
+ * @template T The type of the model's value.
+ *
+ * @param model - A `Ref` representing the underlying value.
+ * @param options - Optional configuration for validation and parsing.
+ * @param options.update - A function that takes the transformed value and returns `true` if it should be applied to the model, or `false` to keep it in a cached state.
+ * @param options.parse - A function that takes the input value and returns a transformed value of type `T`. If omitted, the value is used as-is.
+ *
+ * @returns A reactive object with the following properties:
+ * - `value`: A computed property for getting and setting the model value.
+ * - `error`: A `Ref<string | undefined>` containing the last error message, if any.
+ * - `reset`: A method to clear the cached value and error state.
+ *
+ * ### Example
+ * ```ts
+ * import { ref } from 'vue';
+ * import { useTransformedModel } from './useTransformedModel';
+ *
+ * const model = ref<number>(42);
+ *
+ * const transformedModel = useTransformedModel(model, {
+ *   parse: (value) => {
+ *     const parsed = Number(value);
+ *     if (!Number.isFinite(parsed)) throw new Error('Invalid number');
+ *     return parsed;
+ *   },
+ *   update: (value) => value >= 0, // Only allow non-negative numbers
+ * });
+ */
+
+export function useTransformedModel<T>(model: Ref<T>, options: { update?: (v: T) => boolean; parse?: (v: unknown) => T }) {
+  const cached = ref<T | undefined>();
+  const error = ref<string>();
+
+  const { parse, update } = options;
+
+  const reset = () => {
+    cached.value = undefined;
+    error.value = undefined;
+  };
+
+  const value = computed<T>({
+    get() {
+      if (cached.value !== undefined) {
+        return cached.value;
+      }
+
+      return model.value;
+    },
+    set(value) {
+      reset();
+
+      try {
+        const newValue = parse ? parse(value) : value;
+
+        const shouldUpdate = update ? update(newValue) : true;
+
+        if (shouldUpdate) {
+          model.value = newValue;
+        } else {
+          cached.value = newValue;
+        }
+      } catch (err) {
+        cached.value = value;
+        error.value = err instanceof Error ? err.message : String(err);
+      }
+    },
+  });
+
+  return reactive({
+    value,
+    error,
+    reset,
+  }) as UnwrapNestedRefs<{ value: T; error?: string; reset: () => void }>;
+}

package/src/index.ts

@@ -26,6 +26,7 @@ export * from './components/PlBtnSecondary';
 export * from './components/PlBtnGhost';
 export * from './components/PlBtnLink';
 export * from './components/PlBtnGroup';
+export * from './components/PlEditableTitle';
 export * from './components/PlTextField';
 export * from './components/PlTextArea';
 export * from './components/PlDropdown';

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -19,7 +19,7 @@ defineProps<{
 <template>
   <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__default"><slot name="title" /></div>
       <div class="pl-block-page__title__append">
         <slot name="append" />
       </div>

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

@@ -21,13 +21,17 @@
     gap: 12px;
     padding: 20px 24px;
 
-    h1 {
+    &__default {
       margin: 0;
       color: var(--txt-01);
       font-size: 28px;
       font-weight: 500;
       line-height: 32px;
       letter-spacing: -0.56px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12px;
     }
 
     &__append {

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { ImportFileHandle, Platforma, StorageHandle, Ref as ModelRef } from '@platforma-sdk/model';
+import type { ImportFileHandle, Platforma, StorageHandle, PlRef as ModelRef } from '@platforma-sdk/model';
 import type { Ref, ComputedRef } from 'vue';
 import { maskIcons16 } from './generated/icons-16';
 import { maskIcons24 } from './generated/icons-24';