@milaboratories/uikit 2.2.17 → 2.2.18

package/src/components/PlSearchField/PlSearchField.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { PlIcon16 } from '../PlIcon16';
+import { PlIcon24 } from '../PlIcon24';
+import { computed, ref } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  modelValue?: string;
+  clearable?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+}>();
+
+const root = ref<HTMLInputElement | undefined>(undefined);
+const input = ref<HTMLInputElement | undefined>();
+
+const value = computed({
+  get() {
+    return props.modelValue ?? '';
+  },
+  set(v) {
+    emit('update:modelValue', v);
+  },
+});
+
+const nonEmpty = computed(() => !!props.modelValue);
+
+const clear = () => emit('update:modelValue', '');
+</script>
+
+<template>
+  <div ref="root" class="pl-search-field" :class="[$style.component]">
+    <PlIcon24 name="search" />
+    <input ref="input" v-model="value" :disabled="disabled" type="text" :placeholder="placeholder || 'Find...'" spellcheck="false" />
+    <PlIcon16 v-if="clearable && nonEmpty" :class="$style.clear" name="delete-clear" @click.stop="clear" />
+  </div>
+</template>
+
+<style lang="scss" module>
+.component {
+  --pl-search-field-border-bottom-color: var(--txt-01);
+  --pl-search-field-bg: transparent;
+  --pl-search-field-caret-color: auto;
+  --pl-search-field-clear-display: none;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--control-height) - 2px);
+  line-height: calc(var(--control-height) - 2px);
+  background-color: var(--pl-search-field-bg);
+  padding: 0 0 0 0;
+  border-bottom: 2px solid var(--pl-search-field-border-bottom-color);
+
+  input {
+    margin-left: 8px;
+    height: 20px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    caret-color: var(--txt-focus);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    caret-color: var(--pl-search-field-caret-color);
+  }
+
+  &:focus-within {
+    --pl-search-field-border-bottom-color: var(--txt-focus);
+    --pl-search-field-caret-color: var(--border-color-focus);
+    --pl-search-field-clear-display: block;
+  }
+
+  &:hover {
+    --pl-search-field-clear-display: block;
+  }
+
+  .clear {
+    cursor: pointer;
+    margin-left: auto;
+    display: var(--pl-search-field-clear-display);
+  }
+}
+</style>

package/src/components/PlSearchField/index.ts

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

package/src/components/PlTabs/Tab.vue

@@ -30,7 +30,6 @@ onMounted(() => {
     if (el.offsetWidth < el.scrollWidth) {
       data.isOverflown = true;
     }
-    console.log('el.offsetWidth, el.scrollWidth', el.offsetWidth, el.scrollWidth);
   });
 });
 </script>

package/src/index.ts

@@ -28,6 +28,7 @@ export * from './components/PlBtnLink';
 export * from './components/PlBtnGroup';
 export * from './components/PlEditableTitle';
 export * from './components/PlTextField';
+export * from './components/PlSearchField';
 export * from './components/PlTextArea';
 export * from './components/PlDropdown';
 export * from './components/PlDropdownRef';

package/src/types.ts

@@ -74,7 +74,7 @@ export type MaskIconName24 = (typeof maskIcons24)[number];
 export type SliderMode = 'input' | 'text';
 
 export type ImportedFiles = {
-  storageHandle: StorageHandle;
+  storageHandle?: StorageHandle;
   files: ImportFileHandle[];
 };
 

package/src/components/PlFileDialog/pl-file-dialog.scss

@@ -1,172 +0,0 @@
-@import "@/assets/mixins";
-
-.file-dialog {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  overflow: auto;
-  
-  &__search {
-    padding-top: 6px;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    margin: 0 24px;
-  }
-
-  .ls-container {
-    display: flex;
-    flex-direction: column;
-    border-top: 1px solid var(--border-color-div-grey);
-  }
-  
-  .ls-head {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    height: 40px;
-    font-size: 11px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 12px;
-    letter-spacing: 0.44px;
-    border-bottom: 1px solid var(--border-color-div-grey);
-    background-color: var(--bg-base-light);
-    padding: 0 24px;
-    &__selected {
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: 0.44px;
-      text-transform: uppercase;
-    }
-    > div {
-      cursor: pointer;
-    }
-  
-    &__breadcrumbs {
-      color: var(--txt-01);
-      font-size: 14px;
-      font-weight: 600;
-  
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 2px;
-  
-      > div {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-  
-      i {
-        display: inline-block;
-      }
-    }
-  }
-
-  .ls-error {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    align-items: center;
-    background-color: var(--bg-base-light);
-    height: 366px;
-    &__cat {
-      margin-top: 40px;
-      width: 240px;
-      height: 200px;
-      background: url('@/assets/images/no-data-cat.svg');
-    }
-    &__message {
-      color: var(--txt-mask);
-      text-align: center;
-      font-size: 28px;
-      line-height: 28px;
-      font-weight: 500;
-      letter-spacing: -0.56px;
-      overflow: hidden;
-    }
-  }
-
-  .ls-empty {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    align-items: center;
-    background-color: var(--bg-base-light);
-    height: 366px;
-    &__cat {
-      margin-top: 40px;
-      width: 400px;
-      height: 200px;
-      background: url('@/assets/images/empty-cat.svg');
-    }
-    &__message {
-      color: var(--txt-mask);
-      text-align: center;
-      font-size: 28px;
-      font-weight: 500;
-      letter-spacing: -0.56px;
-    }
-  }
-  
-  .ls-body {
-    padding: 12px;
-    height: 366px;
-    overflow: auto;
-    user-select: none;
-    display: flex;
-    flex-direction: column;
-    @include scrollbar(true);
-    > div {
-      font-family: var(--font-family-monospace);
-      color: var(--txt-01);
-      font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
-      font-size: 14px;
-      font-weight: 400;
-      display: flex;
-      align-items: center;
-      min-height: 24px;
-      gap: 12px;
-      padding: 0 12px;
-      > span {
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-      > i {
-        min-width: 16px;
-      }
-      i.isFile {
-        display: inline-block;
-        background-color: #CFD1DB;
-      }
-      &.isDir {
-        cursor: pointer;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      &.canBeSelected {
-        color: var(--txt-01);
-        &.selected {
-          background-color: var(--btn-active-select);
-        }
-      }
-    }
-  }
-  
-  .ls-loader {
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    height: 366px;
-    transform: scale(4);
-    .loader-icon {
-      animation: spin 4s linear infinite;
-      background-color: #ccc;
-      margin: auto;
-    }
-  }
-}