adata-ui 0.3.99 → 2.0.0

package/components/elements/select/ASelectMobile.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import SelectList from "#adata-ui/components/elements/select/ui/select-list.vue";
+import SelectButton from "#adata-ui/components/elements/select/ui/select-button.vue";
+import AInput from '~/components/forms/input/standard/AInputStandard.vue'
+import AButton from "#adata-ui/components/elements/button/AButton.vue";
+
+
+defineOptions({
+  name: 'ASelectMobile'
+})
+type Option = {
+  id: string | number
+  name: string
+}
+
+type Props = {
+  label: string
+  required?: boolean
+  options: Option[]
+  keyToSelect?: keyof Option
+  clearable?: boolean
+  disabled?: boolean
+  // error?: string | string[]
+  // startIcon?: object
+  searchable?: boolean
+  simpleSearch?: boolean
+  searchLabel?: string
+  searchKey?: keyof Option
+  multiple?: boolean
+  name: string
+  title: string
+  showCount: boolean
+  buttonClass?: string
+}
+
+type Emits = {
+  (e: 'onChange', option?: Option[]): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  keyToSelect: 'id',
+  clearable: true,
+  searchLabel: 'Поиск...',
+  searchKey: 'name',
+  multiple: false,
+  showCount: true,
+  buttonClass: 'border-deepblue-50 bg-deepblue-50 dark:border-gray-900 dark:bg-gray-200/5'
+})
+
+const emits = defineEmits<Emits>()
+const searchValue = defineModel<string>('search', {default: ''})
+const wrapper = ref<HTMLDivElement | null>(null)
+const isOpen = defineModel<T | null | any>('open', {
+  default: false
+})
+const selectedData = ref<any[]>([])
+const formatData = (data: Option[], key: keyof Option) => {
+  if (!data) return undefined;
+  return data.map(el => key ? el[key] : el);
+};
+
+const formattedSelect = computed(() => {
+  if (props.multiple) {
+    return formatData(selectedData.value, props.keyToSelect);
+  } else {
+    const selected = selectedData.value[0];
+    return selected ? selected[props.keyToSelect] : null;
+  }
+});
+const modelValue = defineModel<(any[])>();
+
+//set default data
+if (modelValue.value || modelValue.value?.length) {
+  if (props.multiple) {
+    selectedData.value = props.options.filter(el => {
+      return modelValue.value.includes(el[props.keyToSelect]);
+    });
+  } else {
+    const selectedItem = props.options.find(el => {
+      return el[props.keyToSelect] == modelValue.value;
+    });
+    if (selectedItem) {
+      selectedData.value = [selectedItem];
+    }
+  }
+} else {
+  selectedData.value = []
+}
+
+watch(
+  () => selectedData,
+  () => {
+    modelValue.value = formattedSelect.value
+    emits("onChange", modelValue.value)
+  },
+  {deep: true, immediate: true}
+)
+const reset = () => {
+  selectedData.value = []
+}
+defineExpose({
+  reset
+})
+</script>
+
+<template>
+  <a-slideover
+    v-model="isOpen"
+    :name="name"
+    position="bottom"
+    size="auto"
+  >
+    <template #header>
+      <div class="pt-4 px-2 flex flex-col justify-between gap-3">
+        <div class="flex items-center" :class="{'justify-center':!showCount, 'justify-between': showCount}">
+          <h4 class="heading-04">
+            {{title}}
+          </h4>
+          <p v-if="showCount" class="text-xs text-blue-500">
+            Выбрано: {{ selectedData?.length }}
+          </p>
+        </div>
+        <a-input
+          v-if="searchable"
+          v-model="searchValue"
+          :label="searchLabel"
+          size="sm"
+        />
+      </div>
+    </template>
+    <div class="flex flex-col justify-between ">
+      <div
+        class="mt-1 w-full h-full bg-white p-2 border rounded-md dark:bg-gray-900 overflow-y-auto"
+      >
+        <slot
+          name="options"
+          :options="options"
+        >
+          <ul class="h-[280px]">
+            <select-list
+              v-model:selected="selectedData"
+              v-model:search-value="searchValue"
+              :multiple="multiple"
+              :options="options"
+              :search-by="searchKey"
+              :simple-search="simpleSearch"
+            />
+          </ul>
+        </slot>
+      </div>
+      <div class="flex gap-2 p-4 justify-self-end w-full">
+        <slot name="buttons">
+          <a-button
+            class="w-full"
+            view="outline"
+            variant="gray"
+            @click="reset"
+          >
+            Сбросить
+          </a-button>
+          <a-button
+            class="w-full"
+            @click="isOpen = false"
+          >
+            Выбрать
+          </a-button>
+        </slot>
+      </div>
+    </div>
+
+  </a-slideover>
+  <div
+    ref="wrapper"
+    class="relative w-full rounded-md text-sm"
+  >
+    <a-select-row
+      v-model:selected-items="selectedData"
+      v-model:is-open="isOpen"
+      :clearable="clearable"
+      :disabled="disabled"
+      multiple
+      :label="label"
+      :btn-class="buttonClass"
+    />
+  </div>
+</template>

package/components/elements/select/ui/select-button.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import AChips from '~/components/elements/chips/AChips.vue'
+import {isEqual} from "lodash-es";
+
+type Item = {
+  id: number | string
+  name: string
+}
+
+interface Props {
+  multiple?: boolean
+  clearable?: boolean
+  disabled?: boolean
+  label: string
+}
+
+const items = defineModel<Item[]>('selectedItems')
+type Emits = {
+  (e: 'delete', item: Item): void
+}
+
+
+const props = withDefaults(defineProps<Props>(), {
+  clearable: true,
+  disabled: false,
+  label: 'select'
+})
+const emits = defineEmits<Emits>()
+const disabledStyles =
+  'disabled:pointer-events-none disabled:bg-deepblue-50 disabled:text-deepblue-200'
+const isOpen = defineModel<boolean>('isOpen')
+
+
+const buttonElement = ref()
+const countOfVisibleItems = computed(() => {
+  if (!items.value?.length) return undefined
+  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120)
+  if (maxCountOfVisibleItems > items.value.length) return items.value.length
+  else return maxCountOfVisibleItems
+})
+const visibleItems = computed(() => {
+  if (!items.value.length && !countOfVisibleItems) return undefined
+  return items.value.slice(0, countOfVisibleItems.value)
+})
+const countOfUnvisibleItems = computed(() => {
+  if (!items.value?.length && !countOfVisibleItems.value) return undefined
+  return items.value.length - countOfVisibleItems.value
+})
+const deleteItem = (item: Item) => {
+  emits('delete', item)
+  items.value = items.value?.filter(el => !isEqual(el, item))
+}
+const onClear = () => {
+  items.value = []
+}
+
+
+</script>
+
+<template>
+  <div>
+    <!--    <pre>{{ items }} items</pre>-->
+    <button
+      ref="buttonElement"
+      class="hover:border-blue focus-visible:outline-blue relative flex justify-between w-full items-center gap-2 rounded-md border border-solid border-deepblue-50 bg-deepblue-50 px-4 py-1.5 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-900 dark:hover:border-blue-700 dark:bg-[#E3E5E80D]"
+      :class="[disabledStyles]"
+      :disabled="disabled"
+      @click="isOpen = !isOpen"
+    >
+      <div>
+        <div
+          v-if="visibleItems && visibleItems.length"
+          class="flex gap-2"
+        >
+          <a-chips
+            v-for="item in visibleItems"
+            :key="item.id"
+            class="max-w-[100px]"
+            @click.stop="deleteItem( item)"
+          >
+            {{ item.name }}
+            <button class="rounded-full bg-deepblue-100 dark:bg-gray-200/10">
+              <a-icon-x-mark class="size-3 dark:text-gray-300" />
+            </button>
+          </a-chips>
+          <a-chips v-if="countOfUnvisibleItems">
+            + {{ countOfUnvisibleItems }}
+          </a-chips>
+        </div>
+        <div v-else>
+          {{ label }}
+        </div>
+      </div>
+      <button
+        v-if="visibleItems && countOfVisibleItems"
+        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10"
+        @click.stop="onClear"
+      >
+        <a-icon-x-mark class="!m-0 text-base dark:text-gray-300" />
+      </button>
+      <a-icon-chevron-up
+        class="!m-0 transition-all "
+        :class="{'rotate-180': isOpen}"
+        style="color: #9da3ac"
+      />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/select/ui/select-list.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import AInput from '~/components/forms/input/standard/AInputStandard.vue'
+
+import {isEqual} from 'lodash-es'
+
+
+defineOptions({
+  name: 'SelectList'
+})
+type Option = {
+  id: string | number
+  name: string
+}
+
+interface Props {
+  searchable?: boolean
+  simpleSearch?: boolean
+  searchLabel?: string
+  searchBy?: keyof Option
+  multiple?: boolean
+  options: Option[]
+}
+
+type Emits = {
+  (e: 'select', data: Option[]): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  searchable: false,
+  multiple: true,
+  searchLabel: 'Поиск...',
+  searchBy: 'name'
+})
+const emits = defineEmits<Emits>()
+const selected = defineModel<Option[]>('selected')
+const searchValue = defineModel<string>('searchValue', {default: ''})
+
+const setData = (option: Option) => {
+  const index = selected.value.findIndex((selectedOption) => selectedOption.id === option.id);
+
+  if (index === -1) {
+    // Добавить данные, если они не существуют в массиве selected
+    if (props.multiple) {
+      selected.value.push(option);
+    } else {
+      selected.value = [option];
+    }
+  } else {
+    // Удалить данные, если они уже существуют в массиве selected
+    selected.value.splice(index, 1);
+  }
+  emits('select', selected.value)
+};
+const isSelected = (option: Option) => {
+  return selected.value.some((selectedOption) => isEqual(selectedOption, option));
+};
+const formattedOptions = computed(() => {
+  if (!props.options) return []
+  if (props.simpleSearch) {
+    return props.options.filter(el => el[props.searchBy].toString().includes(searchValue.value))
+  }
+  return props.options
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 justify-items-start">
+    <div
+      v-if="searchable"
+      class="p-1"
+    >
+      <a-input
+        v-model="searchValue"
+        :label="searchLabel"
+        size="sm"
+        color="gray"
+        clearable
+      />
+    </div>
+    <template
+      v-for="option in formattedOptions"
+      :key="option.id"
+    >
+      <button
+        class="flex w-full items-center justify-between px-4 py-1.5 text-start hover:bg-deepblue-50 dark:bg-[#E3E5E80D] bg-white"
+        @click="setData(option)"
+      >
+        {{ option.name }}
+        <span v-if="isSelected(option)">
+          <a-icon-check style="color: #0070eb"/>
+        </span>
+      </button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/show-more/AShowMore.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  loading: boolean
+}>(), {
+  loading: false,
+})
+
+const emit = defineEmits<{ (e: 'click'): void }>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <hr class="h-[0.5px] w-full bg-gray-500/50">
+    <a-button
+      :loading="loading"
+      :disabled="loading"
+      class="flex items-center gap-2"
+      size="md"
+      variant="gray"
+      @click="emit('click')"
+    >
+      <slot>
+        <span>{{ t('actions.showMore') }}</span>
+        <a-icon-chevron-down />
+      </slot>
+    </a-button>
+    <hr class="h-[0.5px] w-full bg-gray-500/50">
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/skeleton/ASkeleton.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'ASkeleton'
+})
+type Variant = 'circle' | 'square'
+
+interface Props {
+  width?: string
+  height: string
+  variant?: Variant
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'square',
+  width: '100%'
+})
+
+const styles = computed(() => {
+  const style = {
+    '--skeleton-height': props.height,
+    '--skeleton-width': props.width,
+    '--skeleton-radius': props.variant === 'square' ? '4px' : '50%'
+  }
+  return style
+})
+</script>
+
+<template>
+  <div
+    class="skeleton-loader animate-pulse bg-gray-300 dark:bg-gray-800"
+    :style="styles"
+  />
+</template>
+
+<style scoped>
+.skeleton-loader {
+  width: var(--skeleton-width);
+  height: var(--skeleton-height);
+  border-radius: var(--skeleton-radius);
+}
+
+</style>

package/components/elements/star-rating/AStarRating.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import Star from "./ui/Star.vue";
+import type {StarMoveEvent} from "./types";
+import AAlert from "#adata-ui/components/elements/alert/AAlert.vue";
+
+const modelValue = defineModel<number>(0)
+
+interface Props {
+  max?: number;
+  readonly?: boolean;
+  increment?: number;
+  roundStartRating?: boolean;
+  starSize?: number;
+  activeOnClick?: boolean;
+  fixedPoints?: number | null;
+  gap?: number;
+  ratingPlacement?: 'left' | 'right';
+  fontSize?: number;
+  error?: string | boolean;
+  errorSize?: 'sm' | 'lg';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  max: 5,
+  increment: 1,
+  readonly: false,
+  roundStartRating: true,
+  starSize: 16,
+  activeOnClick: false,
+  fixedPoints: null,
+  gap: 4,
+  ratingPlacement: 'left',
+  fontSize: 14,
+  error: false,
+  errorSize: 'lg'
+})
+
+const fillLevel = ref<number[]>([])
+const currentRating = ref<number>(modelValue.value)
+const selectedRating = ref<number>(modelValue.value)
+const ratingSelected = ref<boolean>(false)
+
+const gapStyle = computed(() => {
+  return {
+    gap: `${props.gap}px`
+  }
+})
+const roundedRating = computed(() => {
+  const inv = 1.0 / props.increment
+  return Math.min(props.max, Math.ceil(currentRating.value * inv) / inv)
+})
+const shouldRound = computed(() => ratingSelected.value || props.roundStartRating)
+
+
+watch(modelValue, (e)=>{
+  currentRating.value = e
+  selectedRating.value = e
+  createStars()
+})
+
+const resetRating = () => {
+  if (!props.readonly) {
+    currentRating.value = selectedRating.value
+    modelValue.value = selectedRating.value
+    createStars(shouldRound.value)
+  }
+}
+
+const createStars = (round: boolean = true, applyFill: boolean = true) => {
+  currentRating.value = (round) ? roundedRating.value : currentRating.value
+
+  for (let i = 0; i < props.max; i++) {
+    let level = 0
+    if (i < currentRating.value) {
+      level = (currentRating.value - i > 1) ? 100 : (currentRating.value - i) * 100
+    }
+    if (applyFill) {
+      fillLevel.value[i] = Math.round(level)
+    }
+  }
+}
+
+const setRating = (event: StarMoveEvent, persist: boolean) => {
+  if (!props.readonly) {
+    const position = event.position / 100
+    currentRating.value = ((event.id + position) - 1).toFixed(2)
+    currentRating.value = (currentRating.value > props.max) ? props.max : currentRating.value
+    modelValue.value = roundedRating.value
+    if (persist) {
+      createStars(true, true)
+      selectedRating.value = (currentRating.value === selectedRating.value) ? 0 : currentRating.value
+      modelValue.value = selectedRating.value
+      ratingSelected.value = true
+
+    } else {
+      createStars(true, !props.activeOnClick)
+    }
+  }
+}
+
+createStars(shouldRound.value)
+</script>
+
+<template>
+  <div>
+    <div class="w-full flex items-center gap-2">
+      <span
+        v-if="ratingPlacement === 'left'"
+        class="text-gray-600 dark:text-gray-300 mt-px"
+        :style="{fontSize: `${fontSize}px`}"
+      >
+        {{ modelValue }}
+      </span>
+      <div
+        :class="{'pointer-events-none': readonly}"
+        class="flex items-center"
+        :style="gapStyle"
+        @mouseleave="resetRating"
+      >
+        <star
+          v-for="n in max"
+          :key="n"
+          :fill="fillLevel[n-1]"
+          :size="starSize"
+          :star-id="n"
+          @star-selected="setRating($event, true)"
+        />
+      </div>
+      <span
+        v-if="ratingPlacement === 'right'"
+        class="text-sm text-gray-600 dark:text-gray-300 mt-px"
+      >
+        {{ modelValue }}
+      </span>
+    </div>
+    <Transition name="slide-in">
+      <div
+        v-if="error && typeof error === 'string'"
+        class="mt-1"
+      >
+        <a-alert
+          :color="'red'"
+          :size="errorSize"
+          :icon-type="'triangle'"
+        >
+          <template #default>
+            <span
+              v-for="(err, index) in error.split(', ')"
+              :key="index"
+            >{{ err }}<br></span>
+          </template>
+        </a-alert>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-in-enter-active {
+  z-index: 0;
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: transform 0.5s;
+}
+
+.slide-in-enter-to {
+  z-index: auto;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-in-leave-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-in-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+</style>

package/components/elements/star-rating/types.ts

@@ -0,0 +1,8 @@
+export type SelectEvent = {
+    position: number;
+    id: number;
+}
+
+export type StarMoveEvent = SelectEvent & {
+    event: MouseEvent;
+}