@milaboratories/uikit 2.0.8 → 2.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "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",
-    "@platforma-sdk/model": "^1.7.20",
-    "@milaboratories/helpers": "^1.6.6"
+    "@milaboratories/helpers": "^1.6.6",
+    "@platforma-sdk/model": "^1.7.20"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlLogView/PlLogView.vue

@@ -14,6 +14,8 @@ import './pl-log-view.scss';
 import { okOptional, tapIf } from '@milaboratories/helpers';
 import type { AnyLogHandle, Platforma, ValueOrErrors } from '@platforma-sdk/model';
 import { useLogHandle } from './useLogHandle';
+import { useLabelNotch } from '@/utils/useLabelNotch';
+import DoubleContour from '@/utils/DoubleContour.vue';
 
 const getOutputError = <T,>(o?: ValueOrErrors<T>) => {
   if (o && o.ok === false) {
@@ -50,6 +52,10 @@ const props = defineProps<{
    * @TODO
    */
   mockPlatforma?: Platforma;
+  /**
+   * The label to display above the texarea.
+   */
+  label?: string;
 }>();
 
 const logState = useLogHandle(props);
@@ -58,10 +64,14 @@ const isAnchored = ref<boolean>(true);
 
 const contentRef = ref<HTMLElement>();
 
+const root = ref<HTMLInputElement>();
+
 const computedError = computed(() => logState.value?.error ?? props.error ?? getOutputError(props.output));
 
 const computedValue = computed(() => logState.value?.lines ?? props.value ?? okOptional(props.output));
 
+useLabelNotch(root);
+
 const onClickCopy = () => {
   if (computedValue.value && typeof computedValue.value === 'string') {
     navigator.clipboard.writeText(computedValue.value);
@@ -93,7 +103,9 @@ const onContentScroll = (ev: Event) => {
 </script>
 
 <template>
-  <div class="pl-log-view" :class="{ 'has-error': computedError }">
+  <div ref="root" class="pl-log-view" :class="{ 'has-error': computedError }">
+    <label v-if="label"> {{ label }} </label>
+    <DoubleContour class="pl-log-view__contour" />
     <PlMaskIcon24 title="Copy content" class="pl-log-view__copy" name="clipboard" @click="onClickCopy" />
     <div v-if="computedError" class="pl-log-view__error">{{ computedError }}</div>
     <div v-else ref="contentRef" class="pl-log-view__content" @scroll="onContentScroll">{{ computedValue }}</div>

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

@@ -2,18 +2,44 @@
 
 .pl-log-view {
   --log-background: var(--bg-base-light);
+  --contour-color: var(--txt-01);
+  --contour-border-width: 1px;
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --border-color-log-view: var(--border-color-div-grey);
+
   height: 100%;
   max-height: 100%;
   max-width: 100%;
   border-radius: 6px;
-  border: 1px solid var(--border-color-div-grey);
   background: var(--log-background);
   display: flex;
   position: relative;
   min-height: 44px;
+  padding-right: 40px;
+
+  &__contour {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--border-radius-control);
+    border-width: var(--contour-border-width);
+    border-color: var(--border-color-log-view);
+    border-style: solid;
+    box-shadow: none;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  label {
+    @include outlined-control-label();
+  }
 
   &.has-error {
-    --log-background: var(--notification-error);
+    --log-background: linear-gradient(90deg, #FFEBEB 0%, #FFFFFF 100%);
+    --border-color-log-view: var(--border-color-error);
   }
 
   &__copy {
@@ -22,6 +48,7 @@
     right: 12px;
     background-color: var(--ic-02);
     cursor: pointer;
+
     &:hover {
       background-color: var(--txt-01);
     }

package/src/components/PlTextField/PlTextField.vue

@@ -12,6 +12,8 @@ import { PlTooltip } from '@/components/PlTooltip';
 import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
 import { useValidation } from '@/utils/useValidation';
+import { PlIcon16 } from '../PlIcon16';
+import { PlIcon24 } from '../PlIcon24';
 
 const slots = useSlots();
 
@@ -99,7 +101,7 @@ const fieldType = computed(() => {
   }
 });
 
-const passwordIcon = computed(() => (showPassword.value ? 'icon-view-off' : 'icon-view-on'));
+const passwordIcon = computed(() => (showPassword.value ? 'view-on' : 'view-off'));
 
 const clear = () => {
   if (props.clearable) {
@@ -136,16 +138,16 @@ const canShowClearable = computed(() => props.clearable && nonEmpty.value && pro
 
 useLabelNotch(rootRef);
 
-function togglePassword() {
+function togglePasswordVisibility() {
   showPassword.value = !showPassword.value;
 }
 </script>
 
 <template>
-  <div class="ui-text-field__envelope">
+  <div class="pl-text-field__envelope">
     <div
       ref="rootRef"
-      class="ui-text-field"
+      class="pl-text-field"
       :class="{
         error: hasErrors,
         disabled,
@@ -162,20 +164,20 @@ function togglePassword() {
           </template>
         </PlTooltip>
       </label>
-      <div v-if="prefix" class="ui-text-field__prefix">
+      <div v-if="prefix" class="pl-text-field__prefix">
         {{ prefix }}
       </div>
       <input ref="inputRef" v-model="valueRef" :disabled="disabled" :placeholder="placeholder || '...'" :type="fieldType" spellcheck="false" />
-      <div class="ui-text-field__append">
-        <div v-if="canShowClearable" class="icon icon--clear" @click="clear" />
-        <div v-if="type === 'password'" :class="passwordIcon" class="icon-24 uc-pointer" @click="togglePassword" />
+      <div class="pl-text-field__append">
+        <PlIcon16 v-if="canShowClearable" name="delete-clear" @click="clear" />
+        <PlIcon24 v-if="type === 'password'" :name="passwordIcon" style="cursor: pointer" @click="togglePasswordVisibility" />
         <slot name="append" />
       </div>
-      <DoubleContour class="ui-text-field__contour" />
+      <DoubleContour class="pl-text-field__contour" />
     </div>
-    <div v-if="hasErrors" class="ui-text-field__error">
+    <div v-if="hasErrors" class="pl-text-field__error">
       {{ displayErrors.join(' ') }}
     </div>
-    <div v-else-if="helper" class="ui-text-field__helper">{{ helper }}</div>
+    <div v-else-if="helper" class="pl-text-field__helper">{{ helper }}</div>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 @import "@/assets/mixins";
 
-.ui-text-field {
+.pl-text-field {
   $root: &;
 
   --contour-color: var(--txt-01);
@@ -78,10 +78,10 @@
     flex-direction: row;
     align-items: center;
     gap: 4px;
-    .icon {
+    .icon-16 {
       cursor: pointer;
     }
-    .mask {
+    .mask-16 {
       background-color: var(--control-mask-fill);
       cursor: pointer;
     }