itube-specs 0.0.195

package/components/ui/f-dropdown.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+      ref="dropdownRef"
+      class="f-dropdown"
+      :style="`--max-height: ${getMaxHeight}`"
+      :class="[
+          {'--top': top},
+          {'--right': right},
+          {'--center': center},
+          {'--open': open},
+          {'--separate': separateLastChild},
+      ]"
+      @mouseleave="mouseHandler(false)"
+      @mouseover="mouseHandler(true)"
+  >
+    <div
+        class="f-dropdown__trigger"
+        @click="openDropdown"
+    >
+      <slot name="trigger"></slot>
+    </div>
+    <transition name="f-dropdown" mode="out-in">
+      <dialog
+          v-if="useVIf ? open && $slots.items : true"
+          :style="!useVIf ? { display: (open && $slots.items) ? '' : 'none' } : {}"
+          ref="menuRef"
+          class="f-dropdown__menu"
+          :class="{'--open': open}"
+          @click="close"
+      >
+        <button
+            class="f-dropdown__sheet-close _to-sm"
+            type="button"
+            @click="close"
+        ></button>
+        <button
+            class="f-dropdown__crest _to-sm"
+            type="button"
+            @click="close"
+        >
+          <FIcon name="close" size="16"/>
+        </button>
+        <slot name="header"></slot>
+        <div class="f-dropdown__menu-items" v-if="$slots.items">
+          <slot name="items" v-bind="'f-dropdown__item'"></slot>
+        </div>
+      </dialog>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+// На компоненте обязательно вызывать пропсы слота и вешать слот пропс (className) на непосредственных детей
+
+import { onClickOutside } from '@vueuse/core';
+import { scrollLock, isMobile } from '../../runtime';
+import type { CssBreakpoints } from '../../types';
+
+const dropdownRef = ref()
+const menuRef = ref()
+
+const props = withDefaults(defineProps<{
+  top?: boolean;
+  right?: boolean;
+  center?: boolean;
+  separateLastChild?: boolean; // deprecated, вешать на нужный child класс модификатор --separate
+  maxHeight?: string | number;
+  openByClick?: boolean;
+  useVIf?: boolean;
+}>(), {
+  useVIf: false
+});
+
+const open = ref(false)
+
+const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+
+function close() {
+  open.value = false
+
+  if (isMobile(breakpoints).value) {
+    nextTick(() => {
+      menuRef.value?.close?.()
+      scrollLock().unlockScroll()
+    })
+  }
+}
+
+function openDropdown() {
+  if (props.openByClick) {
+    open.value = !open.value
+  }
+  if (isMobile(breakpoints).value) {
+    open.value = !open.value
+
+    nextTick(() => {
+      if (menuRef.value?.showModal) {
+        menuRef.value.showModal()
+        scrollLock().lockScroll()
+      }
+    })
+  }
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    onClickOutside(dropdownRef, () => {
+      close()
+    })
+  }
+}, { immediate: true })
+
+function mouseHandler(event: boolean) {
+  if (!isMobile(breakpoints).value && !props.openByClick) {
+    open.value = event
+  }
+}
+
+const getMaxHeight = computed(() => {
+  return props.maxHeight ? `${props.maxHeight}px` : 'none'
+})
+</script>

package/components/ui/f-icon.vue

@@ -0,0 +1,19 @@
+<template>
+  <Icon
+      class="f-icon"
+      :name="`${prefix}:${name}`"
+      :size="size"
+  />
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+      prefix?: string
+      name: string
+      size?: string
+    }>(), {
+      size: '20',
+      prefix: 'custom'
+    }
+)
+</script>

package/components/ui/f-img.vue

@@ -0,0 +1,46 @@
+<template>
+  <NuxtImg
+      v-if="!isStaticImg"
+      v-bind="{
+      ...$attrs,
+      fetchpriority: priority ? 'high' : undefined
+    }"
+      :src="src"
+      :width="width"
+      :height="height"
+      :sizes="sizes"
+      :alt="alt"
+      :loading="loading"
+      :fit="fit"
+  />
+  <img
+      v-else
+      v-bind="$attrs"
+      :src="src"
+      :loading="loading"
+      :width="width"
+      :height="height"
+      :sizes="sizes"
+      :alt="alt"
+      :fetchpriority="priority ? 'high' : 'auto'"
+  >
+</template>
+
+<script setup lang="ts">
+// https://image.nuxt.com/usage/nuxt-img
+const props = withDefaults(defineProps<{
+  src: string | Blob,
+  width: string | number,
+  height: string | number,
+  sizes: string,
+  alt?: string,
+  loading?: 'lazy' | 'eager',
+  fit?: 'cover' | 'contain' | 'fill' | 'inside' | 'outside',
+  priority?: boolean,
+}>(), {
+  loading: 'lazy',
+  fit: 'cover',
+})
+
+const isStaticImg = computed(() => String(props.src).startsWith('/img'));
+</script>

package/components/ui/f-input.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+      class="f-input"
+      :class="[
+          {'f-input--filled': isFilled || isAutoFilled},
+          {'f-input--focused': isFocused},
+          {'f-input--disabled': disabled},
+          {'f-input--error': error},
+          {'f-input--textarea': isTextArea},
+          {'f-input--icon': isPassword || icon},
+          `f-input--${size}`,
+      ]"
+  >
+    <label
+        v-if="isTextArea"
+        class="f-input__label f-input__label--external"
+        :for="name"
+    >
+      {{ label }}
+    </label>
+    <div class="f-input__wrapper">
+      <textarea
+        v-if="isTextArea"
+        class="f-input__input"
+        rows="3"
+        :value="modelValue"
+        :name="name"
+        :id="name"
+        :tabindex="disabled ? '-1' : '0'"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        spellcheck="false"
+        @keyup.enter="(event) => emit('enter', event)"
+        v-bind="$attrs"
+      ></textarea>
+      <input
+          v-else
+          class="f-input__input"
+          :id="name"
+          :name="name"
+          :type="showText ? 'text' : type"
+          :inputmode="inputmode"
+          :value="normalizedValue"
+          :autocomplete="autocomplete"
+          :autofocus="autofocus"
+          :tabindex="disabled ? '-1' : '0'"
+          autocapitalize="off"
+          @input="onInput"
+          @focus="onFocus"
+          :placeholder="label"
+          @blur="onBlur"
+          spellcheck="false"
+          @keyup.enter="(event) => emit('enter', event)"
+          v-bind="$attrs"
+      />
+      <span
+          v-if="!isTextArea && isFilled"
+          class="f-input__label">
+        {{ label }}
+      </span>
+      <button
+          v-if="isPassword || icon"
+          type="button"
+          class="f-input__button"
+          @click="onButtonInputClick"
+      >
+        <FIcon
+            :name="isPassword ? 'show' : icon || ''"
+            class="f-input__button-icon"
+            size="24"
+        />
+      </button>
+    </div>
+<!--    <p-->
+<!--        v-if="error"-->
+<!--        class="f-input__error"-->
+<!--    >-->
+<!--      <FIcon-->
+<!--          name="danger"-->
+<!--          size="16"-->
+<!--      />-->
+<!--      {{ error }}-->
+<!--    </p>-->
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InputTypes } from '../../types';
+
+const props = withDefaults(defineProps<{
+  modelValue: string | number | undefined
+  type?: InputTypes
+  inputmode?: 'text' | 'numeric' | 'email'
+  error?: boolean
+  success?: string | boolean
+  size?: 'm' | 's'
+  autofocus?: boolean
+  disabled?: boolean
+  autocomplete?: string
+  name?: string
+  label?: string
+  icon?: string
+}>(), {
+  type: 'text',
+  inputmode: 'text',
+  size: 'm'
+})
+
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: string): void
+  (eventName: 'focus', event: FocusEvent): void
+  (eventName: 'blur', event: FocusEvent): void
+  (eventName: 'enter', event: KeyboardEvent): void
+  (eventName: 'update:error', value: boolean): void
+}>()
+
+const showText = ref(false)
+
+const isTextArea = computed(() => props.type === 'textarea')
+
+const isFilled = computed(() => {
+  return props.modelValue && String(props.modelValue).length > 0
+})
+
+const isFocused = ref(false)
+const isAutoFilled = ref(false)
+const isPassword = computed(() => props.type === 'password')
+
+function onFocus(event: FocusEvent) {
+  isFocused.value = true
+  isAutoFilled.value = false
+  emit('focus', event)
+}
+
+function onBlur(event: FocusEvent) {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+function onInput(event: Event) {
+  emit('update:modelValue', event.target?.value);
+  if (props.error) {
+    emit('update:error', false);
+  }
+}
+
+function onButtonInputClick() {
+  if (props.type === 'password') {
+    showText.value = !showText.value
+  }
+}
+
+const isDate = computed(() => props.type === 'date');
+
+const normalizedValue = computed(() => {
+  if (isDate.value && props.modelValue === '1970-01-01') {
+    return ''
+  }
+  return props.modelValue;
+})
+</script>

package/components/ui/f-label.vue

@@ -0,0 +1,20 @@
+<template>
+<span
+    class="f-label"
+    :class="`--${theme}`"
+    :data-text="text"
+>
+  <slot></slot>
+</span>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+      theme?: 'default' | 'primary' | 'primary-gradient' | 'yellow' | 'green' | 'white' | 'black' | 'backdrop' | 'secondary' | 'success' | 'blur' | 'grey'
+      text: string | number
+    }>(), {
+      theme: 'default'
+    }
+)
+</script>

package/components/ui/f-link.vue

@@ -0,0 +1,33 @@
+<!--Если в кнопке иконка, обязательно ее вставлять не в дефолтный слот-->
+<template>
+  <NuxtLink
+      class="f-button"
+      :class="[
+        `--${theme}`,
+        `--${size}`,
+        {'--wide': wide},
+        {'--active': active},
+        {'--disabled': disabled},
+      ]"
+      exact-active-class="--exact-active"
+      v-bind="$attrs"
+  >
+    <slot></slot>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    theme?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'tab',
+    size?: 'm' | 's',
+    wide?: boolean,
+    active?: boolean,
+    disabled?: boolean,
+  }>(),
+  {
+    theme: 'primary',
+    size: 'm',
+  }
+)
+</script>

package/components/ui/f-model-tag.vue

@@ -0,0 +1,28 @@
+<template>
+<NuxtLink
+    class="f-model-tag"
+    :to="generateLink(`/models/${convertString().toSlug(card.title)}`)"
+>
+  <FImg
+      class="f-model-tag__img"
+      sizes="20px sm:24px"
+      :src="card.primaryImageUrl || placeholder"
+      width="20"
+      height="20"
+      :alt="card.title"
+  />
+  {{ card.title }}
+</NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { IModelTag } from '../../types';
+import { convertString } from '../../runtime';
+
+defineProps<{
+  card: IModelTag
+  placeholder: string
+}>()
+
+const { generateLink } = useGenerateLink();
+</script>

package/components/ui/f-notification.vue

@@ -0,0 +1,77 @@
+<template>
+  <dialog
+      ref="notification"
+      class="f-notification"
+      :class="{'--popup': popup}"
+      @click="closeByBackdropClick"
+      @cancel="close"
+  >
+    <div class="f-notification__wrapper">
+      <header class="f-notification__header">
+        <p
+            v-if="$slots.title"
+            class="f-notification__title"
+        >
+          <slot name="title"></slot>
+        </p>
+        <button
+            class="f-notification__close"
+            type="button"
+            title="close"
+            aria-label="close"
+            @click="close"
+        >
+          <FIcon class="f-notification__close-icon" name="close" size="16"/>
+        </button>
+      </header>
+      <div class="f-notification__content">
+        <slot></slot>
+      </div>
+      <div
+          v-if="$slots.footer"
+          class="f-notification__footer"
+      >
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { onBackdropClick, scrollLock } from '../../runtime';
+
+const notification = ref()
+
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: boolean): void
+  (eventName: 'close'): void
+}>()
+
+const props = defineProps<{
+  modelValue: boolean
+  popup?: boolean
+}>()
+
+onMounted(() => {
+  if (props.popup) {
+    scrollLock().lockScroll()
+    notification.value.showModal()
+  } else {
+    notification.value.show()
+  }
+})
+
+onBeforeUnmount(() => {
+  scrollLock().unlockScroll()
+})
+
+function close() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+
+function closeByBackdropClick(event: Event) {
+  const target = event.target as HTMLDialogElement
+  onBackdropClick(target, close)
+}
+</script>

package/components/ui/f-popup.vue

@@ -0,0 +1,136 @@
+<template>
+<dialog
+    ref="popupRef"
+    class="f-popup"
+    :class="[
+        {'--sheet': sheet},
+        {'--transparent-backdrop': transparentBackdrop},
+        {'--aside': $slots.aside}
+    ]"
+    @click="closeByBackdropClick"
+    @cancel="close"
+>
+  <div class="f-popup__wrapper">
+    <div
+        v-if="sheet"
+        class="f-popup__sheet"
+    >
+      <button
+          class="f-popup__sheet-handler"
+          type="button"
+          @click="close"
+      ></button>
+    </div>
+
+    <aside
+        v-if="$slots.aside && !isMobile(breakpoints).value"
+        class="f-popup__aside"
+    >
+      <slot name="aside"></slot>
+    </aside>
+
+    <header
+        class="f-popup__header"
+    >
+      <button
+          v-if="back"
+          class="f-popup__back"
+          type="button"
+          @click="$emit('back')"
+      >
+        <FIcon name="angle-left" size="24" />
+      </button>
+      <div
+          v-if="$slots.title"
+          class="f-popup__title"
+      >
+        <slot name="title"></slot>
+      </div>
+      <button
+          class="f-popup__close"
+          type="button"
+          @click="close"
+      >
+        <FIcon name="close" size="24" />
+      </button>
+    </header>
+    <div
+        v-if="$slots.fixedContent"
+        class="f-popup__subheader"
+    >
+      <slot name="fixedContent"></slot>
+    </div>
+    <div
+        v-if="$slots.default"
+        class="f-popup__content"
+    >
+      <slot></slot>
+    </div>
+    <div
+        v-if="$slots.footer"
+        class="f-popup__footer"
+    >
+      <slot name="footer"></slot>
+    </div>
+  </div>
+
+  <transition mode="out-in">
+    <FSnackbar
+        v-if="snackbarText && isSnackBarInPopup"
+    />
+  </transition>
+</dialog>
+</template>
+
+<script setup lang="ts">
+import { onBackdropClick, scrollLock, isMobile } from '../../runtime';
+import type { CssBreakpoints } from '../../types';
+
+const {resetSnackbar} = useSnackbar();
+
+const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const popupRef = ref()
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: boolean): void
+  (eventName: 'back'): void
+  (eventName: 'close'): void
+}>()
+
+const props = defineProps<{
+  modelValue: boolean
+  back?: boolean
+  transparentBackdrop?: boolean
+  sheet?: boolean
+  title?: string
+  notModal?: boolean
+}>()
+
+onMounted(() => {
+  isSnackBarInPopup.value = true;
+  resetSnackbar();
+  setTimeout(() => scrollLock().lockScroll(), 100);
+  if (props.notModal) {
+    popupRef.value.show();
+  } else {
+    popupRef.value.showModal();
+  }
+  popupRef.value.focus({ preventScroll: true })
+})
+
+onBeforeUnmount(() => {
+  isSnackBarInPopup.value = false;
+  scrollLock().unlockScroll();
+})
+
+function close() {
+  emit('close');
+  emit('update:modelValue', false);
+}
+
+function closeByBackdropClick(event: Event) {
+  const target = event.target as HTMLDialogElement;
+  onBackdropClick(target, close);
+}
+
+const { snackbarText, isSnackBarInPopup } = useSnackbar();
+</script>

package/components/ui/f-radio.vue

@@ -0,0 +1,56 @@
+<template>
+  <label
+      class="f-radio"
+      :class="[
+          {'f-radio--disabled': disabled},
+          {'f-radio--error': error},
+      ]"
+  >
+    <input
+        class="f-radio__input _visually-hidden"
+        type="radio"
+        :name="name"
+        :checked="isChecked"
+        :value="value"
+        @change="onChange"
+        v-bind="$attrs"
+    >
+    <span class="f-radio__check" />
+    <span class="f-radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <span
+        v-if="$slots.description"
+        class="f-radio__description"
+    >
+      <slot name="description"></slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+const properties = defineProps<{
+  name?: string
+  label?: string
+  modelValue: string | number | boolean
+  value: string | number | boolean
+  disabled?: boolean
+  error?: boolean
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: string | number | boolean): void
+  (eventName: 'update:error', value: boolean): void
+}>()
+
+function onChange() {
+  emit('update:modelValue', properties.value)
+  if (properties.error) {
+    emit('update:error', false)
+  }
+}
+
+const isChecked = computed(() => properties.modelValue === properties.value)
+</script>
+
+