@v1nt1248/3nclient-lib 0.0.5 → 0.0.7

package/src/components/ui3n-table.vue

@@ -0,0 +1,318 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue'
+  import { Icon } from '@iconify/vue'
+  import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue'
+
+  const props = defineProps<{
+    items: ListingEntryTypeExtended[];
+    textIfEmpty?: string;
+  }>()
+  const emit = defineEmits<{
+    (ev: 'go', name: string): void;
+    (ev: 'action', value: { action: EntityAction, entity: ListingEntryTypeExtended }): void;
+  }>()
+
+  const sortField = ref<SortField>('name')
+  const sortDirection = ref<'asc'|'desc'>('asc')
+
+  const sortByName = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
+    if (sortDirection.value === 'desc') {
+      return itemA.name < itemB.name ? 1 : -1
+    }
+    return itemA.name > itemB.name ? 1 : -1
+  }
+  const sortByType = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
+    if (sortDirection.value === 'desc') {
+      return itemA.type! < itemB.type! ? 1 : -1
+    }
+    return itemA.type! > itemB.type! ? 1 : -1
+  }
+  const sortByCreatedAt = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
+    const tsA = itemA.ctime!.getTime()
+    const tsB = itemB.ctime!.getTime()
+    return sortDirection.value === 'asc' ? tsA - tsB : tsB - tsA
+  }
+  const sortByChangedAt = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
+    const tsA = itemA.mtime!.getTime()
+    const tsB = itemB.mtime!.getTime()
+    return sortDirection.value === 'asc' ? tsA - tsB : tsB - tsA
+  }
+
+  const placeholder = computed(() => props.textIfEmpty || 'Empty')
+  const sortMap = {
+    name: sortByName,
+    type: sortByType,
+    createdAt: sortByCreatedAt,
+    changedAt: sortByChangedAt,
+  }
+  const sortedItems =computed(() => [...props.items].sort(sortMap[sortField.value]))
+  const changeSort = (field: SortField) => {
+    if (field !== sortField.value) {
+      sortField.value = field
+      sortDirection.value = 'asc'
+    } else {
+      sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+    }
+  }
+
+  const getTimeAsString = (date: Date) => {
+    return date
+      ? `${`${date.getDate()}`.padStart(2, '0')}/${`${date.getMonth() + 1}`.padStart(2, '0')}/${date.getFullYear()} ${`${date.getHours()}`.padStart(2, '0')}:${`${date.getMinutes()}`.padStart(2, '0')}`
+      : ''
+  }
+
+  const handleClick = (ev: MouseEvent) => {
+    ev.preventDefault()
+    const { target } = ev
+    const { id, classList } = target as Element
+    if (classList.contains('ui3n-table__item') && id) {
+      return props.items.find(i => i.id === id)
+    }
+    return undefined
+  }
+  const onClick = (ev: MouseEvent) => {
+    handleClick(ev)
+    const entity = handleClick(ev)
+    if (entity && entity.isFolder && entity.fullPath) {
+      emit('go', entity.fullPath)
+    }
+  }
+  const onRightClick = (ev: MouseEvent) => {
+    handleClick(ev)
+    const entity = handleClick(ev)
+    if (entity) {
+      emit( 'action', { action: 'open-menu', entity })
+    }
+  }
+
+  const handleActions = (ev: MouseEvent, action: EntityAction, entity: ListingEntryTypeExtended) => {
+    ev.preventDefault()
+    ev.stopImmediatePropagation()
+    emit('action', { action, entity })
+  }
+</script>
+
+<template>
+  <div class="ui3n-table">
+    <div class="ui3n-table__header">
+      <div
+        class="ui3n-table__header-cell ui3n-table__header-cell--sortable ui3n-table__name"
+        @click="changeSort('name')"
+      >
+        <span class="ui3n-table__header-text">Name</span>
+        <ui3n-table-sort-icon
+          v-if="sortField === 'name'"
+          :value="sortDirection"
+          :size="18"
+        />
+      </div>
+      <div
+        class="ui3n-table__header-cell ui3n-table__header-cell--sortable ui3n-table__type"
+        @click="changeSort('type')"
+      >
+        <span class="ui3n-table__header-text">Type</span>
+        <ui3n-table-sort-icon
+          v-if="sortField === 'type'"
+          :value="sortDirection"
+          :size="18"
+        />
+      </div>
+
+      <div
+        class="ui3n-table__header-cell ui3n-table__header-cell--sortable ui3n-table__changedAt"
+        @click="changeSort('changedAt')"
+      >
+        <span class="ui3n-table__header-text">Changed At</span>
+        <ui3n-table-sort-icon
+          v-if="sortField === 'changedAt'"
+          :value="sortDirection"
+          :size="18"
+        />
+      </div>
+    </div>
+
+    <div class="ui3n-table__content">
+      <div
+        v-for="item in sortedItems"
+        :id="item.id"
+        :key="item.id"
+        class="ui3n-table__item"
+        @click="onClick"
+        @click.right="onRightClick"
+      >
+        <icon
+          :icon="item.isFolder ? 'folder' : 'subject'"
+          :width="16"
+          :height="16"
+          class="ui3n-table__item-icon"
+        />
+        <div class="ui3n-table__item-cell ui3n-table__name">
+          {{ item.name }}
+        </div>
+        <div class="ui3n-table__item-cell ui3n-table__type">
+          {{ item.ext || '' }}
+        </div>
+        <div class="ui3n-table__item-cell ui3n-table__changedAt">
+          {{ getTimeAsString(item.mtime!) }}
+        </div>
+
+        <icon
+          v-if="item.isFolder"
+          icon="bookmark"
+          :width="12"
+          :height="12"
+          class="ui3n-table__item-bookmark"
+          @click="handleActions($event, 'add:favorites', item)"
+        />
+
+        <icon
+          icon="baseline-edit"
+          :width="12"
+          :height="12"
+          class="ui3n-table__item-rename"
+          @click="handleActions($event, 'rename', item)"
+        />
+      </div>
+
+      <div
+        v-if="!sortedItems.length"
+        class="ui3n-table__empty"
+      >
+        {{ placeholder }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixins";
+
+  .ui3n-table {
+    --table-header-height: 36px;
+    --table-row-height: 28px;
+
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    &__header {
+      position: sticky;
+      top: 0;
+      display: flex;
+      width: 100%;
+      height: var(--table-header-height);
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0 calc(var(--base-size) * 2);
+      background-color: var(--gray-50);
+
+      &-cell {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: var(--font-13);
+        line-height: var(--font-18);
+        font-weight: 500;
+        color: var(--black-90);
+
+        &--sortable {
+          cursor: pointer;
+        }
+      }
+
+      &-text {
+        display: block;
+        position: relative;
+        @include text-overflow-ellipsis(100%)
+      }
+    }
+
+    &__item {
+      display: flex;
+      width: 100%;
+      height: var(--table-row-height);
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0 calc(var(--base-size) * 2) 0 calc(var(--base-size) * 5);
+      cursor: pointer;
+      border-bottom: 1px solid var(--gray-50);
+
+      &-bookmark,
+      &-rename {
+        display: none;
+        position: absolute;
+        z-index: 1;
+        color: var(--black-30);
+      }
+
+      &-bookmark {
+        left: 2px;
+      }
+
+      &-rename {
+        right: calc(var(--base-size) * 13 + 24px);
+      }
+
+      &-icon {
+        position: absolute;
+        left: calc(var(--base-size) * 2);
+        color: var(--black-30);
+        pointer-events: none;
+      }
+
+      &-cell {
+        position: relative;
+        font-weight: 400;
+        pointer-events: none;
+      }
+
+      &:hover {
+        background-color: var(--blue-main-30);
+
+        .ui3n-table__item-bookmark,
+        .ui3n-table__item-rename {
+          display: block;
+        }
+
+        .ui3n-table__item-icon {
+          color: var(--blue-main);
+        }
+      }
+    }
+
+    &__name {
+      flex: 1 0;
+
+      &.ui3n-table__item-cell {
+        font-size: var(--font-12);
+      }
+    }
+
+    &__type {
+      width: calc(var(--base-size) * 7);
+      text-align: center;
+
+      &.ui3n-table__item-cell {
+        font-size: var(--font-10);
+      }
+    }
+
+    &__changedAt {
+      width: calc(var(--base-size) * 13);
+
+      &.ui3n-table__item-cell {
+        font-size: var(--font-11);
+      }
+    }
+
+    &__empty {
+      font-size: var(--font-20);
+      font-style: italic;
+      color: var(--black-30);
+      text-align: center;
+      padding-top: calc(var(--base-size) * 10);
+    }
+  }
+</style>

package/src/components/ui3n-text.vue

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { computed, onMounted, ref, watch } from 'vue'
+  import { patchTextareaMaxRowsSupport } from '../helpers/textarea-max-rows'
+
+  const props = defineProps<{
+    text: string;
+    rows?: number;
+    maxRows?: number;
+    label?: string;
+    placeholder?: string;
+    rules?: Array<(v: string) => any>;
+    disabled?: boolean;
+  }>()
+  const emit = defineEmits<{
+    (ev: 'init', value: HTMLTextAreaElement): void;
+    (ev: 'input', value: string): void;
+    (ev: 'focus', value: Event): void;
+    (ev: 'blur', value: Event): void;
+    (ev: 'update:text', value: string): void;
+    (ev: 'update:valid', value: boolean): void;
+  }>()
+
+  const textareaElement = ref<HTMLTextAreaElement | null>(null)
+  const isFocused = ref(false)
+  const errorMessage = ref('')
+
+  const componentProps = computed(() => {
+    const { rows = 6, maxRows = 6, label = '', placeholder = '', disabled = false } = props
+    return { rows, maxRows, label, placeholder, disabled }
+  })
+
+  const isValid = computed(() => {
+    if (!props.text) {
+      return true
+    }
+
+    return !errorMessage.value
+  })
+
+  onMounted(() => {
+    if (textareaElement.value) {
+      patchTextareaMaxRowsSupport(textareaElement.value!)
+      emit('init', textareaElement.value!)
+    }
+  })
+
+  watch(
+    () => isValid.value,
+    val => emit('update:valid', val),
+    { immediate: true },
+  )
+
+  const validate = (text: string) => {
+    errorMessage.value = ''
+    if (props.rules && props.rules.length) {
+      for (const validateFunction of props.rules) {
+        if (typeof validateFunction === 'function') {
+          const res = validateFunction(text)
+          if (typeof res === 'string') {
+            errorMessage.value += res
+          }
+        }
+      }
+    }
+  }
+
+  const onFocus = (event: Event) => {
+    isFocused.value = true
+    emit('focus', event)
+  }
+
+  const onBlur = (event: Event) => {
+    isFocused.value = false
+    emit('blur', event)
+  }
+
+  const onInput = (ev: Event) => {
+    const value = (ev.target as HTMLInputElement).value
+    validate(value)
+    emit('update:text', value)
+    emit('input', value)
+  }
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui3n-text',
+      { 'ui3n-text--disabled': props.disabled, 'ui3n-text--focused': isFocused },
+    ]"
+  >
+    <label
+      v-if="componentProps.label"
+      class="ui3n-text__label"
+    >
+      {{ componentProps.label }}
+    </label>
+    <div class="ui3n-text__body">
+      <textarea
+        ref="textareaElement"
+        :value="props.text"
+        :placeholder="componentProps.placeholder"
+        :readonly="componentProps.disabled"
+        :rows="componentProps.rows"
+        :max-rows="componentProps.maxRows"
+        :disabled="componentProps.disabled"
+        class="ui3n-text__content"
+        v-bind="$attrs"
+        @input="onInput"
+        @focusin="onFocus"
+        @focusout="onBlur"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-text {
+    position: relative;
+    width: 100%;
+
+    &__label {
+      display: block;
+      width: 100%;
+      font-size: var(--font-12, 12px);
+      font-weight: 600;
+      color: var(--black-90, #212121);
+      margin-bottom: calc(var(--base-size, 8px) / 2);
+    }
+
+    &__body {
+      position: relative;
+      width: 100%;
+      padding: var(--base-size, 8px) 0;
+      background-color: var(--gray-50, #f2f2f2);
+      border-radius: 4px;
+    }
+
+    &__content {
+      resize: none;
+      display: block;
+      box-sizing: border-box;
+      position: relative;
+      width: 100%;
+      border-radius: 4px;
+      background-color: var(--gray-50, #f2f2f2);
+      padding: 0 var(--base-size, 8px);
+      font-family: OpenSans, sans-serif;
+      font-size: var(--font-13, 13px);
+      font-weight: 400;
+      line-height: var(--font-16, 16px);
+      color: var(--black-90, #212121);
+      border: none;
+
+      &::placeholder {
+        font-size: var(--font-13, 13px);
+        font-weight: 300;
+        font-style: italic;
+        color: var(--gray-90, #212121);
+      }
+    }
+
+    &--disabled {
+      pointer-events: none;
+      user-select: none;
+      opacity: 0.5;
+    }
+
+    &--focused {
+      .ui3n-text {
+        &__body, &__content {
+          background-color: var(--blue-main-20, #d8edfd);
+          outline: none;
+          border: none;
+        }
+      }
+    }
+  }
+</style>
+../tools/textarea-max-rows

package/dist/components/ui3n-drop-files.vue.d.ts

@@ -1,33 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    title: {
-        type: import("vue").PropType<string>;
-    };
-    text: {
-        type: import("vue").PropType<string>;
-    };
-    additionalText: {
-        type: import("vue").PropType<string>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (fileList: FileList) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: import("vue").PropType<string>;
-    };
-    text: {
-        type: import("vue").PropType<string>;
-    };
-    additionalText: {
-        type: import("vue").PropType<string>;
-    };
-}>> & {
-    onSelect?: ((fileList: FileList) => any) | undefined;
-}, {}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/ui3n-emoji.vue.d.ts

@@ -1,28 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    emoji: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    size: {
-        type: import("vue").PropType<string | number>;
-    };
-    readonly: {
-        type: import("vue").PropType<boolean>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (value: Event) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    emoji: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    size: {
-        type: import("vue").PropType<string | number>;
-    };
-    readonly: {
-        type: import("vue").PropType<boolean>;
-    };
-}>> & {
-    onClick?: ((value: Event) => any) | undefined;
-}, {}, {}>;
-export default _default;

package/dist/components/ui3n-input.vue.d.ts

@@ -1,76 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    value: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    label: {
-        type: import("vue").PropType<string>;
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-    };
-    clearable: {
-        type: import("vue").PropType<boolean>;
-    };
-    autofocus: {
-        type: import("vue").PropType<boolean>;
-    };
-    rules: {
-        type: import("vue").PropType<((v: string) => any)[]>;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    input: (value: string) => void;
-    focus: (value: Event) => void;
-    blur: (value: Event) => void;
-    clear: (value: string) => void;
-    change: (value: string) => void;
-    "update:value": (value: string) => void;
-    "update:valid": (value: boolean) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    label: {
-        type: import("vue").PropType<string>;
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-    };
-    clearable: {
-        type: import("vue").PropType<boolean>;
-    };
-    autofocus: {
-        type: import("vue").PropType<boolean>;
-    };
-    rules: {
-        type: import("vue").PropType<((v: string) => any)[]>;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-    };
-}>> & {
-    onFocus?: ((value: Event) => any) | undefined;
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: string) => any) | undefined;
-    onInput?: ((value: string) => any) | undefined;
-    onClear?: ((value: string) => any) | undefined;
-    "onUpdate:value"?: ((value: string) => any) | undefined;
-    "onUpdate:valid"?: ((value: boolean) => any) | undefined;
-}, {}, {}>;
-export default _default;

package/dist/components/ui3n-notification.vue.d.ts

@@ -1,72 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    id: {
-        type: import("vue").PropType<string>;
-    };
-    type: {
-        type: import("vue").PropType<"success" | "warning" | "info" | "error">;
-    };
-    content: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-    };
-    iconSize: {
-        type: import("vue").PropType<string | number>;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-    };
-    position: {
-        type: import("vue").PropType<"left" | "center" | "right">;
-    };
-    duration: {
-        type: import("vue").PropType<number>;
-    };
-    teleport: {
-        type: import("vue").PropType<string>;
-    };
-    onOpen: {
-        type: import("vue").PropType<() => void>;
-    };
-    onClose: {
-        type: import("vue").PropType<() => void>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: import("vue").PropType<string>;
-    };
-    type: {
-        type: import("vue").PropType<"success" | "warning" | "info" | "error">;
-    };
-    content: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-    };
-    iconSize: {
-        type: import("vue").PropType<string | number>;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-    };
-    position: {
-        type: import("vue").PropType<"left" | "center" | "right">;
-    };
-    duration: {
-        type: import("vue").PropType<number>;
-    };
-    teleport: {
-        type: import("vue").PropType<string>;
-    };
-    onOpen: {
-        type: import("vue").PropType<() => void>;
-    };
-    onClose: {
-        type: import("vue").PropType<() => void>;
-    };
-}>>, {}, {}>;
-export default _default;