@onereach/ui-components 4.11.0-beta.2941.0 → 4.11.0

package/src/components/or-carousel/OrCarousel.stories.ts

@@ -1,103 +0,0 @@
-import { Story } from '@storybook/vue';
-import OrCarousel from './OrCarousel.vue';
-import OrCarouselItem from './or-carousel-item/OrCarouselItem.vue';
-import { Direction, EVENTS, KeyBoard, Type } from './constants';
-import { HandlerFunction } from '@storybook/addon-actions/dist/ts3.9/models';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/OrCarousel',
-  component: OrCarousel,
-  argTypes: {
-    direction: {
-      control: {
-        type: 'select',
-        options: Object.values(Direction) as string[],
-        default: Direction.ltr,
-      },
-    },
-    keyboard: {
-      control: {
-        type: 'select',
-        options: Object.values(KeyBoard) as string[],
-        default: KeyBoard.global,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-        options: Object.values(Type) as string[],
-        default: Type.slide,
-      },
-    },
-  },
-};
-
-const Template: Story = (_args, { argTypes }) => {
-  return {
-    props: Object.keys(argTypes),
-    components: {
-      OrCarousel,
-      OrCarouselItem,
-    },
-    data() {
-      return {
-        items: Array(7).fill('https://via.placeholder.com/350'),
-        preparedEvents: EVENTS.reduce<Record<string, HandlerFunction>>(
-          (acc, e) => ({
-            ...acc,
-            [e]: action(e),
-          }),
-          {}
-        ),
-      };
-    },
-    template: `
-    <div style="padding: 40px">
-      <or-carousel v-bind="$props" v-on="preparedEvents">
-        <or-carousel-item :key="item" v-for="item in items">
-           <img class="inline" :src='item'>
-        </or-carousel-item>
-      </or-carousel>
-    </div>
-  `,
-  };
-};
-
-export const OrCarouselDefault = Template.bind({});
-OrCarouselDefault.args = {};
-
-export const OrCarouselNoControl = Template.bind({});
-OrCarouselNoControl.args = {
-  arrows: false,
-  pagination: false,
-};
-export const OrCarouselLoop = Template.bind({});
-OrCarouselLoop.args = {
-  type: Type.loop,
-};
-export const OrCarouselSpeed = Template.bind({});
-OrCarouselSpeed.args = {
-  speed: 1000,
-};
-export const OrCarouselSlidesPerPage = Template.bind({});
-OrCarouselSlidesPerPage.args = {
-  perPage: 3,
-};
-export const OrCarouselSlidesPerMove = Template.bind({});
-OrCarouselSlidesPerMove.args = {
-  perPage: 3,
-  perMove: 3,
-};
-export const OrCarouselSlidesAutoPlay = Template.bind({});
-OrCarouselSlidesAutoPlay.args = {
-  autoplay: true,
-  interval: 1000,
-  type: 'loop',
-};
-
-export const OrCarouselSlidesVerticalSlider = Template.bind({});
-OrCarouselSlidesVerticalSlider.args = {
-  direction: Direction.ttb,
-  height: 400,
-};

package/src/components/or-carousel/OrCarousel.vue

@@ -1,204 +0,0 @@
-<template>
-  <div class="or-carousel">
-    <div
-      ref="slider"
-      class="or-carousel__slides splide"
-    >
-      <div
-        v-if="arrows"
-        class="splide__arrows"
-      >
-        <button class="splide__arrow splide__arrow--prev">
-          <slot name="btnPrev">
-            <or-icon icon="keyboard_arrow_left" />
-          </slot>
-        </button>
-        <button class="splide__arrow splide__arrow--next">
-          <slot name="btnNext">
-            <or-icon icon="keyboard_arrow_right" />
-          </slot>
-        </button>
-      </div>
-      <div class="or-carousel__track-container">
-        <div class="or-carousel__track splide__track">
-          <ul class="or-carousel__items splide__list">
-            <slot />
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Splide, ResponsiveOptions } from '@splidejs/splide';
-import '@splidejs/splide/dist/css/splide.min.css';
-import { OrIcon } from '../or-icon';
-import { defineComponent, PropType, ref } from 'vue-demi';
-import { Direction, EVENTS, KeyBoard, Type } from './constants';
-
-export default defineComponent({
-  name: 'OrCarousel',
-  components: {
-    OrIcon,
-  },
-  props: {
-    type: {
-      type: String as PropType<Type>,
-      default: 'slide',
-    },
-    perPage: {
-      type: Number,
-      default: 1,
-    },
-    rewind: {
-      type: Boolean,
-      default: false,
-    },
-    speed: {
-      type: Number,
-      default: 400,
-    },
-    width: {
-      type: [Number, String],
-      default: 0,
-    },
-    height: {
-      type: [Number, String],
-      default: 0,
-    },
-    fixedWidth: {
-      type: Number,
-      default: 0,
-    },
-    heightRatio: {
-      type: Number,
-      default: 0,
-    },
-    perMove: {
-      type: Number,
-      default: 0,
-    },
-    start: {
-      type: Number,
-      default: 0,
-    },
-    focus: {
-      type: [Number, String],
-      default: 'center',
-    },
-    trimSpace: {
-      type: Boolean,
-      default: true,
-    },
-    keyboard: {
-      type: String as PropType<KeyBoard>,
-      default: 'global',
-    },
-    gap: {
-      type: [Number, String],
-      default: 10,
-    },
-    easing: {
-      type: String,
-      default: 'cubic-bezier(.42,.65,.27,.99)',
-    },
-    autoplay: {
-      type: Boolean,
-      default: false,
-    },
-    interval: {
-      type: Number,
-      default: 5000,
-    },
-    pauseOnHover: {
-      type: Boolean,
-      default: true,
-    },
-    pauseOnFocus: {
-      type: Boolean,
-      default: true,
-    },
-    drag: {
-      type: Boolean,
-      default: true,
-    },
-    flickThreshold: {
-      type: Number,
-      default: 0.6,
-    },
-    flickPower: {
-      type: Number,
-      default: 600,
-    },
-    flickMaxPages: {
-      type: Number,
-      default: 1,
-    },
-    direction: {
-      type: String as PropType<Direction>,
-      default: 'ltr',
-    },
-    updateOnMove: {
-      type: Boolean,
-      default: false,
-    },
-    breakpoints: {
-      type: Object as PropType<Record<string | number, ResponsiveOptions>>,
-      default: () => ({}),
-    },
-    classes: {
-      type: Object as PropType<Record<string, string>>,
-      default: () => ({}),
-    },
-    pagination: {
-      type: Boolean,
-      default: true,
-    },
-    arrows: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: EVENTS,
-
-  setup() {
-    const carousel = ref<Splide | null>(null);
-    return { carousel };
-  },
-
-  updated() {
-    this.carousel?.refresh();
-  },
-  beforeDestroy() {
-    this.carousel?.destroy();
-  },
-  mounted() {
-    this.carousel = new Splide(this.$refs.slider as HTMLElement, { ...(this.$props as any) });
-    this.initEventsEmitting();
-    this.carousel.mount();
-  },
-  methods: {
-    initEventsEmitting() {
-      EVENTS.forEach((e) => this.carousel?.on(e, (...args: any[]) => this.$emit(e, args)));
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.or-carousel {
-  &__track-container {
-    position: relative;
-  }
-  .splide__arrow:focus-visible {
-    outline: none;
-  }
-  line-height: 1;
-  text-align: center;
-
-  ::v-deep .splide__pagination__page {
-    background: #64b2da;
-  }
-}
-</style>

package/src/components/or-carousel/constants.ts

@@ -1,49 +0,0 @@
-export enum Direction {
-  ltr= 'ltr',
-  rtl= 'rtl',
-  ttb= 'ttb'
-}
-export enum Type {
-  slide = 'slide',
-  loop = 'loop',
-  fade = 'fade'
-}
-
-export enum KeyBoard{
-  global= 'global',
-  focused = 'focused'
-}
-export const EVENTS = [
-  'mounted',
-  'ready',
-  'click',
-  'move',
-  'moved',
-  'active',
-  'inactive',
-  'visible',
-  'hidden',
-  'refresh',
-  'updated',
-  'resize',
-  'resized',
-  'drag',
-  'dragging',
-  'dragged',
-  'scroll',
-  'scrolled',
-  'destroy',
-  'arrows:mounted',
-  'arrows:updated',
-  'pagination:mounted',
-  'pagination:updated',
-  'navigation:mounted',
-  'autoplay:play',
-  'autoplay:playing',
-  'autoplay:pause',
-  'lazyload:loaded',
-  /** @internal */
-  'shifted',
-  'slide:keydown',
-  'media',
-];

package/src/components/or-carousel/index.ts

@@ -1,2 +0,0 @@
-export { default as OrCarousel } from './OrCarousel.vue';
-export { default as OrCarouselItem } from './or-carousel-item/OrCarouselItem.vue';

package/src/components/or-carousel/or-carousel-item/OrCarouselItem.vue

@@ -1,12 +0,0 @@
-<template>
-  <li class="splide__slide">
-    <slot />
-  </li>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue-demi';
-export default defineComponent({
-  name: 'OrCarouselItem',
-});
-</script>

package/src/components/or-carousel/or-carousel-item/index.ts

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

package/src/components/or-hint/OrHint.stories.bundled.ts

@@ -1,28 +0,0 @@
-import { OrHint } from '@onereach/ui-components';
-import { Story } from '@storybook/vue';
-
-export default {
-  title: 'Components/OrHint (bundled)',
-
-  component: OrHint,
-};
-
-const Template: Story = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    OrHint: () => import(/* webpackIgnore: true */ '@onereach/ui-components').then(m => m.OrHint),
-  },
-
-  template: `
-    <or-hint v-bind="$props">
-      Password has to be at least 6 characters long and must contain
-      at least more than one digit. (Slot)
-    </or-hint>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = { hint: 'Password has to be at least 6 characters long and must contain at least more than one digit.' };
-
-export const Slot = Template.bind({});

package/dist/bundled/v3/{OrToastContainer.vue_vue_type_script_lang-d1a074fe.js → OrToastContainer.vue_vue_type_script_lang-7d44207e.js}

@@ -5,9 +5,9 @@ import script$2 from './components/OrToastV3/OrToast.js';
 import { P as PositionsX, a as PositionsY, T as TransitionType } from './props-7be029c7.js';
 import { ToastContainer, ToastContainerPositions } from './components/OrToastV3/styles.js';
 import './components/OrTeleportV3/OrTeleport.js';
-import { useElevation } from './hooks/useElevation.js';
 import { s as script$1 } from './OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
 import { u as useToggle } from './index-f4d8e24c.js';
+import { useElevation } from './hooks/useElevation.js';
 
 var script = defineComponent({
   name: 'OrToastContainer',