adata-ui 2.1.19 → 2.1.20

package/components/elements/calendar/ACalendar.vue

@@ -1,83 +1,83 @@
-<script lang="ts" setup>
-import { ref } from '#imports'
-
-defineOptions({
-  name: 'ACalendar'
-})
-
-interface Props {
-  locale?: 'ru' | 'en'
-  color: 'blue' | 'red' | 'yellow' | 'gray' | 'green'
-  type: 'single-date' | 'range-date'
-  mode: 'date' | 'time' | 'dateTime'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  locale: 'ru',
-  color: 'blue',
-  type: 'range-date',
-  mode: 'date'
-})
-
-const date = defineModel<Date>({
-  default: new Date()
-})
-
-const range = defineModel<{
-  value: {
-    start: Date
-    end: Date
-  }
-}>('range', {
-  default: {
-    start: new Date(),
-    end: new Date(new Date().setDate(new Date().getDate() + 14))
-  }
-})
-
-const popover = {
-  visibility: 'click',
-  placement: 'bottom-end',
-}
-</script>
-
-<template>
-  <div>
-    <client-only>
-      <VDatePicker
-        v-if="type === 'range-date'"
-        v-model.range="range"
-        :is-dark="{ selector: ':root', darkClass: 'dark' }"
-        :color="color"
-        :locale="locale"
-        :mode="mode"
-        title-position="left"
-        :popover="popover"
-      >
-        <template
-          v-if="$slots.default"
-          #default="value"
-        >
-          <slot v-bind="value" />
-        </template>
-      </VDatePicker>
-      <VDatePicker
-        v-else
-        v-model="date"
-        :is-dark="{ selector: ':root', darkClass: 'dark' }"
-        :color="color"
-        :locale="locale"
-        :mode="mode"
-        title-position="left"
-        :popover="popover"
-      >
-        <template
-          v-if="$slots.default"
-          #default="value"
-        >
-          <slot v-bind="value" />
-        </template>
-      </VDatePicker>
-    </client-only>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref } from '#imports'
+
+defineOptions({
+  name: 'ACalendar'
+})
+
+interface Props {
+  locale?: 'ru' | 'en'
+  color: 'blue' | 'red' | 'yellow' | 'gray' | 'green'
+  type: 'single-date' | 'range-date'
+  mode: 'date' | 'time' | 'dateTime'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'ru',
+  color: 'blue',
+  type: 'range-date',
+  mode: 'date'
+})
+
+const date = defineModel<Date>({
+  default: new Date()
+})
+
+const range = defineModel<{
+  value: {
+    start: Date
+    end: Date
+  }
+}>('range', {
+  default: {
+    start: new Date(),
+    end: new Date(new Date().setDate(new Date().getDate() + 14))
+  }
+})
+
+const popover = {
+  visibility: 'click',
+  placement: 'bottom-end',
+}
+</script>
+
+<template>
+  <div>
+    <client-only>
+      <VDatePicker
+        v-if="type === 'range-date'"
+        v-model.range="range"
+        :is-dark="{ selector: ':root', darkClass: 'dark' }"
+        :color="color"
+        :locale="locale"
+        :mode="mode"
+        title-position="left"
+        :popover="popover"
+      >
+        <template
+          v-if="$slots.default"
+          #default="value"
+        >
+          <slot v-bind="value" />
+        </template>
+      </VDatePicker>
+      <VDatePicker
+        v-else
+        v-model="date"
+        :is-dark="{ selector: ':root', darkClass: 'dark' }"
+        :color="color"
+        :locale="locale"
+        :mode="mode"
+        title-position="left"
+        :popover="popover"
+      >
+        <template
+          v-if="$slots.default"
+          #default="value"
+        >
+          <slot v-bind="value" />
+        </template>
+      </VDatePicker>
+    </client-only>
+  </div>
+</template>

package/components/elements/carousel/ACarousel.vue

@@ -1,159 +1,159 @@
-<template>
-  <div
-    :class="ui.wrapper"
-    v-bind="attrs"
-  >
-    <div
-      ref="carouselRef"
-      :class="ui.container"
-      class="no-scrollbar"
-    >
-      <div
-        v-for="(item, index) in items"
-        :key="index"
-        :class="ui.item"
-        :role="indicators ? 'tabpanel' : null"
-      >
-        <slot
-          :item="item"
-          :index="index"
-        />
-      </div>
-    </div>
-
-    <div
-      v-if="arrows"
-      :class="ui.arrows.wrapper"
-    >
-      <slot
-        name="prev"
-        :on-click="onClickPrev"
-        :disabled="isFirst"
-      />
-
-      <slot
-        name="next"
-        :on-click="onClickNext"
-        :disabled="isLast"
-      />
-    </div>
-
-    <div
-      v-if="indicators"
-      role="tablist"
-      :class="ui.indicators.wrapper"
-    >
-      <template
-        v-for="page in pages"
-        :key="page"
-      >
-        <slot
-          name="indicator"
-          :on-click="onClick"
-          :active="page === currentPage"
-          :page="page"
-        >
-          <button
-            type="button"
-            role="tab"
-            :aria-selected="page === currentPage"
-            :class="[
-              ui.indicators.base,
-              page === currentPage ? ui.indicators.active : ui.indicators.inactive
-            ]"
-            :aria-label="`set slide ${page}`"
-            @click="onClick(page)"
-          />
-        </slot>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" generic="T">
-import {useScroll, useResizeObserver, useElementSize} from '@vueuse/core'
-import {useCarouselScroll} from "#adata-ui/composables/useCarouselScroll";
-import {ui as defaultUi} from './config.ui';
-import {computed, ref, toRefs} from "vue";
-import type {Ui} from "#adata-ui/components/elements/carousel/types";
-import {mergeConfig} from "#adata-ui/components/utils";
-
-defineOptions({
-  inheritAttrs: false
-})
-const attrs = useAttrs()
-
-
-interface Props {
-  items: T[]
-  indicators?: boolean
-  arrows?: boolean
-  defaultUi?: Ui
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  indicators: false,
-  arrows: false,
-  defaultUi: () => {
-  }
-})
-const ui = computed(() =>mergeConfig<Ui>(defaultUi, props.defaultUi))
-const carouselRef = ref<HTMLElement>()
-const itemWidth = ref(0)
-
-const {x, arrivedState} = useScroll(carouselRef, {behavior: 'smooth'})
-const {width: carouselWidth} = useElementSize(carouselRef)
-
-const {left: isFirst, right: isLast} = toRefs(arrivedState)
-
-useCarouselScroll(carouselRef)
-
-useResizeObserver(carouselRef, (entries) => {
-  const [entry] = entries
-
-  itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
-})
-
-const currentPage = computed(() => Math.round(x.value / itemWidth.value) + 1)
-
-const pages = computed(() => {
-  if (!itemWidth.value) {
-    return 0
-  }
-
-  return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1
-})
-
-function onClickNext() {
-  x.value += itemWidth.value
-}
-
-function onClickPrev() {
-  x.value -= itemWidth.value
-}
-
-function onClick(page: number) {
-  x.value = (page - 1) * itemWidth.value
-}
-
-defineExpose({
-  pages,
-  page: currentPage,
-  prev: onClickPrev,
-  next: onClickNext,
-  select: onClick
-})
-</script>
-
-<style scoped>
-/* Hide scrollbar for Chrome, Safari and Opera */
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-</style>
+<template>
+  <div
+    :class="ui.wrapper"
+    v-bind="attrs"
+  >
+    <div
+      ref="carouselRef"
+      :class="ui.container"
+      class="no-scrollbar"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        :class="ui.item"
+        :role="indicators ? 'tabpanel' : null"
+      >
+        <slot
+          :item="item"
+          :index="index"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="arrows"
+      :class="ui.arrows.wrapper"
+    >
+      <slot
+        name="prev"
+        :on-click="onClickPrev"
+        :disabled="isFirst"
+      />
+
+      <slot
+        name="next"
+        :on-click="onClickNext"
+        :disabled="isLast"
+      />
+    </div>
+
+    <div
+      v-if="indicators"
+      role="tablist"
+      :class="ui.indicators.wrapper"
+    >
+      <template
+        v-for="page in pages"
+        :key="page"
+      >
+        <slot
+          name="indicator"
+          :on-click="onClick"
+          :active="page === currentPage"
+          :page="page"
+        >
+          <button
+            type="button"
+            role="tab"
+            :aria-selected="page === currentPage"
+            :class="[
+              ui.indicators.base,
+              page === currentPage ? ui.indicators.active : ui.indicators.inactive
+            ]"
+            :aria-label="`set slide ${page}`"
+            @click="onClick(page)"
+          />
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import {useScroll, useResizeObserver, useElementSize} from '@vueuse/core'
+import {useCarouselScroll} from "#adata-ui/composables/useCarouselScroll";
+import {ui as defaultUi} from './config.ui';
+import {computed, ref, toRefs} from "vue";
+import type {Ui} from "#adata-ui/components/elements/carousel/types";
+import {mergeConfig} from "#adata-ui/components/utils";
+
+defineOptions({
+  inheritAttrs: false
+})
+const attrs = useAttrs()
+
+
+interface Props {
+  items: T[]
+  indicators?: boolean
+  arrows?: boolean
+  defaultUi?: Ui
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  indicators: false,
+  arrows: false,
+  defaultUi: () => {
+  }
+})
+const ui = computed(() =>mergeConfig<Ui>(defaultUi, props.defaultUi))
+const carouselRef = ref<HTMLElement>()
+const itemWidth = ref(0)
+
+const {x, arrivedState} = useScroll(carouselRef, {behavior: 'smooth'})
+const {width: carouselWidth} = useElementSize(carouselRef)
+
+const {left: isFirst, right: isLast} = toRefs(arrivedState)
+
+useCarouselScroll(carouselRef)
+
+useResizeObserver(carouselRef, (entries) => {
+  const [entry] = entries
+
+  itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
+})
+
+const currentPage = computed(() => Math.round(x.value / itemWidth.value) + 1)
+
+const pages = computed(() => {
+  if (!itemWidth.value) {
+    return 0
+  }
+
+  return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1
+})
+
+function onClickNext() {
+  x.value += itemWidth.value
+}
+
+function onClickPrev() {
+  x.value -= itemWidth.value
+}
+
+function onClick(page: number) {
+  x.value = (page - 1) * itemWidth.value
+}
+
+defineExpose({
+  pages,
+  page: currentPage,
+  prev: onClickPrev,
+  next: onClickNext,
+  select: onClick
+})
+</script>
+
+<style scoped>
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+</style>

package/components/elements/carousel/config.ui.ts

@@ -1,15 +1,15 @@
-export const ui = {
-  wrapper: 'relative',
-  container: 'relative w-full flex overflow-x-auto snap-x snap-mandatory scroll-smooth',
-  item: 'flex flex-none snap-center',
-  arrows: {
-    wrapper: 'flex items-center justify-between',
-  },
-  indicators: {
-    wrapper: 'absolute z-10 flex items-center justify-center gap-3 bottom-4 inset-x-0',
-    base: 'rounded-full h-3 w-3',
-    active: 'bg-primary-500 dark:bg-primary-400 bg-blue-700',
-    inactive: 'bg-gray-200 dark:bg-gray-800 mix-blend-overlay',
-  },
-}
-export default {ui}
+export const ui = {
+  wrapper: 'relative',
+  container: 'relative w-full flex overflow-x-auto snap-x snap-mandatory scroll-smooth',
+  item: 'flex flex-none snap-center',
+  arrows: {
+    wrapper: 'flex items-center justify-between',
+  },
+  indicators: {
+    wrapper: 'absolute z-10 flex items-center justify-center gap-3 bottom-4 inset-x-0',
+    base: 'rounded-full h-3 w-3',
+    active: 'bg-primary-500 dark:bg-primary-400 bg-blue-700',
+    inactive: 'bg-gray-200 dark:bg-gray-800 mix-blend-overlay',
+  },
+}
+export default {ui}

package/components/elements/carousel/types.ts

@@ -1,18 +1,18 @@
-export interface Ui {
-  wrapper:    string;
-  container:  string;
-  item:       string;
-  arrows:     Arrows;
-  indicators: Indicators;
-}
-
-export interface Arrows {
-  wrapper: string;
-}
-
-export interface Indicators {
-  wrapper:  string;
-  base:     string;
-  active:   string;
-  inactive: string;
-}
+export interface Ui {
+  wrapper:    string;
+  container:  string;
+  item:       string;
+  arrows:     Arrows;
+  indicators: Indicators;
+}
+
+export interface Arrows {
+  wrapper: string;
+}
+
+export interface Indicators {
+  wrapper:  string;
+  base:     string;
+  active:   string;
+  inactive: string;
+}