@milaboratories/uikit 2.2.65 → 2.2.67

package/src/components/PlAutocomplete/pl-autocomplete.scss

@@ -0,0 +1,277 @@
+@use "@/assets/mixins" as *;
+
+.pl-autocomplete__options {
+  --option-hover-bg: var(--btn-sec-hover-grey);
+
+  z-index: var(--z-dropdown-options);
+  border: 1px solid var(--border-color-div-grey);
+  position: absolute;
+  background-color: var(--pl-dropdown-options-bg);
+  border-radius: 6px;
+  max-height: 244px;
+  box-shadow: 0px 4px 12px -2px rgba(15, 36, 77, 0.08), 0px 6px 24px -2px rgba(15, 36, 77, 0.08);
+
+  @include scrollbar;
+
+  .nothing-found {
+    padding: 0 10px;
+    height: var(--control-height);
+    line-height: var(--control-height);
+    background-color: #fff;
+    opacity: 0.5;
+    font-style: italic;
+  }
+
+  .option {
+    position: relative;
+    padding: 0 30px 0 10px;
+    height: var(--control-height);
+    line-height: var(--control-height);
+    cursor: pointer;
+    user-select: none;
+
+    .checkmark {
+      position: absolute;
+      display: none;
+      right: 10px;
+      @include abs-center-y();
+    }
+
+    >span {
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
+      text-overflow: ellipsis;
+    }
+
+    &.selected {
+      background-color: var(--color-active-select);
+
+      .checkmark {
+        display: block;
+      }
+    }
+
+    &.active:not(.selected) {
+      background-color: var(--option-hover-bg);
+    }
+
+    &:hover {
+      background-color: var(--option-hover-bg);
+    }
+  }
+}
+
+.pl-autocomplete {
+  $root: &;
+
+  --contour-color: var(--txt-01);
+  --contour-border-width: 1px;
+
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --label-color: var(--txt-01);
+
+  position: relative;
+  outline: none;
+  min-height: var(--control-height);
+  border-radius: 6px;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weigh-base);
+
+  &__envelope {
+    font-family: var(--control-font-family);
+    min-width: 160px;
+  }
+
+  label {
+    @include outlined-control-label();
+  }
+
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 6px;
+    min-height: var(--control-height);
+    color: var(--txt-01);
+  }
+
+  &__contour {
+    border-radius: var(--border-radius-control);
+    border: var(--contour-border-width) solid var(--contour-color);
+    box-shadow: var(--contour-box-shadow);
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  &__field {
+    position: relative;
+    border-radius: 6px;
+    overflow: hidden;
+    background: transparent;
+    padding-left: 11px;
+
+    min-height: var(--control-height);
+    line-height: var(--control-height);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+
+    .input-value {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 60px 0 11px; // @TODO padding-right based on controls width
+      pointer-events: none;
+      line-height: 20px;
+      color: var(--txt-01);
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+      cursor: inherit;
+    }
+
+    input {
+      min-height: calc(var(--control-height) - 2px);
+      line-height: 20px;
+      font-family: inherit;
+      font-size: inherit;
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: calc(100% - 40px);
+      color: var(--txt-01);
+      caret-color: var(--border-color-focus);
+
+      &:focus {
+        outline: none;
+      }
+
+      &:placeholder-shown {
+        text-overflow: ellipsis;
+      }
+
+      &::placeholder {
+        color: var(--color-placeholder);
+      }
+    }
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: var(--control-height);
+    gap: 6px;
+
+    margin-left: auto;
+
+    .icon-delete-clear {
+      cursor: pointer;
+    }
+
+    .mask-16,
+    .mask-24 {
+      background-color: var(--control-mask-fill);
+      cursor: pointer;
+    }
+
+    .mask-loading {
+      animation: spin 2.5s linear infinite;
+      background-color: #07AD3E;
+    }
+  }
+
+  &__arrow-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: var(--control-height);
+    padding-right: 11px;
+  }
+  .arrow-icon {
+    cursor: pointer;
+
+    // Default "arrow" icon (16x16) 
+    &.arrow-icon-default {
+      transition: transform .2s;
+      background-color: var(--control-mask-fill);
+      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
+    }
+  }
+
+  &.open,
+  &:focus-within {
+    z-index: 1;
+    --label-color: var(--txt-focus);
+  }
+
+  &.open {
+    #{$root}__container {
+      z-index: 1000;
+    }
+
+    #{$root}__field {
+      border-radius: 6px 6px 0 0;
+    }
+
+    .arrow-icon {
+      &.arrow-icon-default {
+        background-color: var(--control-mask-fill);
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  &:hover {
+    --contour-color: var(--control-hover-color);
+  }
+
+  &:focus-within:not(.error) {
+    --label-color: var(--txt-focus);
+    --contour-color: var(--border-color-focus);
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
+  }
+
+  &:focus-within.error {
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
+  }
+
+  &.error {
+    --contour-color: var(--txt-error);
+    --label-color: var(--txt-error);
+  }
+
+  &.disabled {
+    --contour-color: var(--color-dis-01);
+    --control-mask-fill: var(--color-dis-01);
+    --label-color: var(--color-dis-01);
+    cursor: not-allowed;
+    pointer-events: none;
+    user-select: none;
+
+    .input-value {
+      color: var(--dis-01);
+    }
+  }
+}

package/src/components/PlDropdown/PlDropdown.vue

@@ -223,7 +223,12 @@ const clear = () => emit('update:modelValue', undefined);
 
 const setFocusOnInput = () => input.value?.focus();
 
-const toggleOpen = () => (data.open = !data.open);
+const toggleOpen = () => {
+  data.open = !data.open;
+  if (!data.open) {
+    data.search = '';
+  }
+};
 
 const onInputFocus = () => (data.open = true);
 
@@ -298,7 +303,7 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="pl-dropdown__envelope">
+  <div class="pl-dropdown__envelope" @click="setFocusOnInput">
     <div
       ref="rootRef"
       :tabindex="tabindex"
@@ -321,7 +326,7 @@ watchPostEffect(() => {
             @focus="onInputFocus"
           />
 
-          <div v-if="!data.open" class="input-value" @click="setFocusOnInput">
+          <div v-if="!data.open" class="input-value">
             <LongText> {{ textValue }} </LongText>
           </div>
 
@@ -329,9 +334,11 @@ watchPostEffect(() => {
             <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
             <PlIcon16 v-if="clearable && hasValue" name="delete-clear" @click.stop="clear" />
             <slot name="append" />
-            <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" @click.stop="toggleOpen" />
-            <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" @click.stop="toggleOpen" />
-            <div v-else class="arrow-icon arrow-icon-default" @click.stop="toggleOpen" />
+            <div class="pl-dropdown__arrow-wrapper" @click.stop="toggleOpen">
+              <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" />
+              <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" />
+              <div v-else class="arrow-icon arrow-icon-default" />
+            </div>
           </div>
         </div>
         <label v-if="label">

package/src/components/PlDropdown/pl-dropdown.scss

@@ -113,7 +113,7 @@
     border-radius: 6px;
     overflow: hidden;
     background: transparent;
-    padding: 0 11px;
+    padding-left: 11px;
 
     min-height: var(--control-height);
     line-height: var(--control-height);
@@ -199,11 +199,19 @@
     }
   }
 
+  &__arrow-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: var(--control-height);
+    padding-right: 11px;
+  }
+
   .arrow-icon {
     cursor: pointer;
 
     // Default "arrow" icon (16x16) 
     &.arrow-icon-default {
+      transition: transform .2s;
       background-color: var(--control-mask-fill);
       @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
     }
@@ -225,8 +233,10 @@
     }
 
     .arrow-icon {
-      background-color: var(--control-mask-fill);
-      @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
+      &.arrow-icon-default {
+        background-color: var(--control-mask-fill);
+        transform: rotate(-180deg);
+      }
     }
   }
 

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -164,7 +164,12 @@ const unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) =
 
 const setFocusOnInput = () => input.value?.focus();
 
-const toggleModel = () => (data.open = !data.open);
+const toggleModel = () => {
+  data.open = !data.open;
+  if (!data.open) {
+    data.search = '';
+  }
+};
 
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
@@ -232,7 +237,7 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="pl-dropdown-multi__envelope">
+  <div class="pl-dropdown-multi__envelope" @click="setFocusOnInput">
     <div
       ref="rootRef"
       :tabindex="tabindex"
@@ -254,15 +259,18 @@ watchPostEffect(() => {
             autocomplete="chrome-off"
             @focus="data.open = true"
           />
-          <div v-if="!data.open" class="chips-container" @click="setFocusOnInput">
+          <div v-if="!data.open" class="chips-container">
             <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @click.stop="data.open = true" @close="unselectOption(opt.value)">
               {{ opt.label || opt.value }}
             </PlChip>
           </div>
-          <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
-          <div v-if="!isLoadingOptions" class="arrow" @click.stop="toggleModel" />
-          <div class="pl-dropdown-multi__append">
+
+          <div class="pl-dropdown-multi__controls">
+            <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
             <slot name="append" />
+            <div class="pl-dropdown-multi__arrow-wrapper" @click.stop="toggleModel">
+              <div class="arrow-icon arrow-icon-default" />
+            </div>
           </div>
         </div>
         <label v-if="label">

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -129,7 +129,7 @@
     border-radius: 6px;
     overflow: hidden;
     background: transparent;
-    padding: 0 11px;
+    padding-left: 11px;
 
     min-height: var(--control-height);
     line-height: 20px;
@@ -146,7 +146,7 @@
       bottom: 0;
       right: 30px;
       overflow: hidden;
-      padding: 0 11px;
+      padding: 0 60px 0 11px;
       line-height: 20px;
       color: var(--contour-color);
       display: flex;
@@ -186,43 +186,57 @@
     }
   }
 
-  &__helper {
-    @include field-helper();
-  }
-
-  &__error {
-    @include field-error();
-  }
-
-  &__append {
-    padding-right: 24px;
+  &__controls {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
+    margin-left: auto;
 
-    .icon {
+    .mask-16,
+    .mask-24 {
+      background-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
-    .mask {
+    .mask-loading {
+      animation: spin 2.5s linear infinite;
+      background-color: #07AD3E;
+    }
+  }
+
+  &__arrow-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: var(--control-height);
+    padding-right: 11px;
+  }
+
+  .arrow-icon {
+    cursor: pointer;
+
+    // Default "arrow" icon (16x16) 
+    &.arrow-icon-default {
+      transition: transform .2s;
       background-color: var(--control-mask-fill);
-      cursor: pointer;
+      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
     }
   }
 
-  .arrow {
-    position: absolute;
-    @include abs-center-y;
-    right: 12px;
-    background-color: var(--control-mask-fill);
-    @include mask(url("@/assets/images/16_chevron-down.svg"), 16px);
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
   }
 
   &.open {
-    .arrow {
-      background-color: var(--control-mask-fill);
-      @include mask(url(@/assets/images/16_up.svg), 16px);
+    .arrow-icon {
+      &.arrow-icon-default {
+        background-color: var(--control-mask-fill);
+        transform: rotate(-180deg);
+      }
     }
   }
 

package/src/composition/useWatchFetch.ts

@@ -0,0 +1,68 @@
+import type { WatchSource, WatchOptions } from 'vue';
+import { reactive, watch, ref, computed } from 'vue';
+import { exclusiveRequest } from '@milaboratories/helpers';
+
+export type FetchResult<V, E = unknown> = {
+  loading: boolean;
+  value: V | undefined;
+  error: E;
+};
+
+// TODO Should we keep the old value while fetching the new value?
+
+/**
+ * Watch any reactive source and perform an asynchronous operation
+ *
+ * @example
+ * ```ts
+ * const v = useWatchFetch(
+ *   watchSource,
+ *   async (sourceValue) => {
+ *     return await fetchDataFromApi(sourceValue);
+ *   }
+ * );
+ *
+ * // Usage in a template
+ * <template>
+ *   <div v-if="v.loading">Loading...</div>
+ *   <div v-else-if="v.error">Error: {{ v.error.message }}</div>
+ *   <div v-else>Data: {{ v.value }}</div>
+ * </template>
+ * ```
+ */
+export function useWatchFetch<S, V>(watchSource: WatchSource<S>, doFetch: (s: S) => Promise<V>, watchOptions?: WatchOptions): FetchResult<V> {
+  const loadingRef = ref(0);
+
+  const data = reactive({
+    loading: computed(() => loadingRef.value > 0),
+    loadingRef,
+    value: undefined as V,
+    error: undefined,
+  }) as FetchResult<V>;
+
+  const exclusive = exclusiveRequest(doFetch);
+
+  watch(
+    watchSource,
+    async (s) => {
+      data.error = undefined;
+      loadingRef.value++;
+      exclusive(s)
+        .then((res) => {
+          if (res.ok) {
+            data.value = res.value;
+          }
+        })
+        .catch((err) => {
+          data.value = undefined;
+          data.error = err;
+        })
+        .finally(() => {
+          loadingRef.value--;
+        });
+    },
+    Object.assign({ immediate: true, deep: true }, watchOptions ?? {}),
+  );
+
+  return data;
+}

package/src/index.ts

@@ -53,6 +53,7 @@ export * from './components/PlStatusTag';
 export * from './components/PlLoaderCircular';
 export * from './components/PlSplash';
 export * from './components/PlProgressCell';
+export * from './components/PlAutocomplete';
 
 export * from './components/PlFileDialog';
 export * from './components/PlFileInput';
@@ -96,6 +97,7 @@ export { useFormState } from './composition/useFormState';
 export { useQuery } from './composition/useQuery.ts';
 export { useDraggable } from './composition/useDraggable';
 export { useComponentProp } from './composition/useComponentProp';
+export * from './composition/useWatchFetch';
 
 /**
  * Utils/Partials