@accurasoft/homepage-component

Install

npm i @accurasoft/homepage-component

---

Component List

Component	Description
CenteringEffect	Upon appearing on the screen, exhibits a centering effect, aligning itself to the middle of the screen. Implemented for both desktop and mobile versions.
FadeAnimation	Applies a fade-in effect upon appearing on the screen. Once triggered, it won't reappear until a page refresh.
HeaderModalButton	Upon button press, a zoom-in effect occurs, expanding the circle to fill the entire screen. You can fill the inside of the modal. <slot name="inside-modal" /> Close button implemented.
ListDeco	Creates aesthetically pleasing list items (li) by automatically numbering strings or elements in an array. Implemented for both desktop and mobile versions.
SlidePlayPause	Carousel component with forward and backward navigation buttons, Pause and play. Adjustable interval timing. Touch event control. Implemented for both desktop and mobile versions. Add slide effect
SlideControl	Control Carousel. Forward and backward navigation buttons. Pause and play. Adjustable interval timing.
SlideScroll	Carousel component with range-slider controlled. Touch event control is available. Implemented for both desktop and mobile versions.
TextShow	Text rotation and appearance effect. Adjustable interval timing.
TextTyping	Text typing effect. Adjustable interval timing.

---

Usage

CenteringEffect

import CenteringEffect from "@accurasoft/homepage-component";

const List = [
  {
    title: "Title1",
    details:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. \nNam at nulla placerat, eleifend ipsum tincidunt, dapibus ante.",
  },
  {
    title: "Title2",
    details:
      "Proin vestibulum augue sit amet nunc scelerisque tincidunt.\nInteger sagittis eros id consectetur vestibulum.",
  },
  {
    title: "Title3",
    details:
      "Pellentesque fringilla lorem venenatis, scelerisque dolor vel, tempus ipsum.\nInteger sagittis nibh quis mauris facilisis, in egestas sapien viverra.",
  },
  {
    title: "Title4",
    details:
      "Mauris pretium sem non ligula malesuada mattis nec quis magna.\nCurabitur nec est sed risus sollicitudin tempus at ut purus.",
  },
];

<CenteringEffect :list="List" title="TITLE">
  <template #default="{ item }">
    <div>
      <p class="text-4xl font-bold">
        {{ item.title }}
      </p>
      <p class="service-details whitespace-pre-wrap">
        {{ item.details }}
      </p>
    </div>
  </template>
</CenteringEffect>

props

interface CenterringListType {
  title: string;
  description?: string;
  details: string;
}

const props = defineProps({
  list: {
    type: Array<CenterringListType>,
    requred: true,
    validator: (value) => {
      if (!Array.isArray(value) || value.length !== 4) {
        console.error("list props : 4가지 항목 Array");
        return false;
      }
      return true;
    },
    default() {
      return [];
    },
  },
  title: {
    type: String,
    requred: false,
    default: "title",
  },
});

---

FadeAnimation

import { FadeAnimation } from "@accurasoft/homepage-component";

<FadeAnimation :transition-duration-ms="800" :transition-delay-ms="200">
  <p>
    Hello
  </p>
</FadeAnimation>

props

const props = defineProps({
  transitionDurationMs: {
    type: Number,
    default: 700,
    required: false,
  },
  transitionDelayMs: {
    type: Number,
    default: 300,
    required: false,
  },
});

---

HeaderHamburgerButton

import { HeaderHamburgerButton } from "@accurasoft/homepage-component";

<HeaderHamburgerButton>
  <template #inside-modal>
    <p class="text-3xl text-center text-white">
      inside slot
    </p>
  </template>
</HeaderHamburgerButton>

---

ListDeco

import { ListDeco } from "@accurasoft/homepage-component";

const mokList = [
  { contents: "동해물과 백두산이 마르고 닳도록" },
  { contents: "하느님이 보우하사 우리나라 만세" },
  { contents: "무궁화 삼천리 화려강산" },
  { contents: "대한사람 대한으로 길이 보전하세" },
];

<ListDeco :list="mokList" />

props

export interface ListListType {
  contents: string;
}

const props = defineProps<{
  list: ListListType[] | string[];
}>();

---

SlidePlayPause

import { SlidePlayPause } from "@accurasoft/homepage-component";

const index = ref(0);

const exemple = [
  { title: "title1111111111", contents: "1111111111111111111111111111111111" },
  { title: "title2222222222", contents: "2222222222222222222222222222222222" },
  { title: "title3333333333", contents: "3333333333333333333333333333333333" },
];

<SlidePlayPause
  v-model:slideIndex="index"
  :interval-ms="2000"
  :list-length="exemple.length"
  height="10rem"
>
  <template #slideContents>
    <div
      v-for="(item, i) in exemple"
      :key="i"
      :class="{ active: CurrentSlideIndex === i }"
      class="rounded-2xl border-[0.063rem] xl:min-h-[14rem] max-w-full w-full p-8 relative flex justify-center" // If the element is larger than the viewport, add [relative flex justify-center]
    >
      <div class="absolute"> // If the element is larger than the viewport, add [absolute]
        <h2 class="text-3xl">
          {{ item.title }}
        </h2>
        <p class="">
          {{ item.contents }}
        </p>
      </div>
    </div>
  </template>
</SlidePlayPause>

props

const props = defineProps({
  listLength: {
    type: Number,
    default: 3,
    required: true,
  },
  intervalMs: {
    type: Number,
    default: 2000,
    required: false,
  },
  height: {
    // :style="{ height: `${props.height}` }"
    type: String,
    default: "18rem",
    required: false,
  },
});

const slideIndex = defineModel<number>("slideIndex", { default: 0 });

---

SlideControl

import { SlideControl } from "@accurasoft/homepage-component";

const index = ref(0);

const exemple = [
  { title: "title1111111111", contents: "1111111111111111111111111111111111" },
  { title: "title2222222222", contents: "2222222222222222222222222222222222" },
  { title: "title3333333333", contents: "3333333333333333333333333333333333" },
];

<h2>
  {{ exemple[index]?.title }}
</h2>
<p>
  {{ exemple[index]?.contents }}
</p>

<SlideControl
  v-model:count="index"
  :list-length="exemple.length"
  :interval-ms="1000"
/>

props

const props = defineProps({
  listLength: {
    type: Number,
    required: true,
  },
  intervalMs: {
    type: Number,
    default: 2000,
    required: false,
  },
});

const slideIndex = defineModel<number>("slideIndex", { default: 0 });

---

SlideScroll

import { SlideScroll } from "@accurasoft/homepage-component";

const history = [
  {
    key: 2021,
    contents: [
      "111111",
      "22222222",
      "33333333",
      "444444444",
      "555555555",
      "666666666",
    ],
  },
  {
    key: 2020,
    contents: ["111111", "22222222", "33333333", "444444444", "555555555"],
  },
  { key: 2019, contents: ["111111", "22222222", "33333333", "444444444"] },
  { key: 2018, contents: ["111111", "22222222", "33333333", "444444444"] },
  { key: 2017, contents: ["111111", "22222222", "33333333"] },
  { key: 2016, contents: ["111111", "22222222", "33333333"] },
];

<SlideScroll :list="history" />

props

const props = defineProps({
  listLength: {
    type: Number,
    default: 3,
    required: true,
  },
  intervalMs: {
    type: Number,
    default: 2000,
    required: false,
  },
  height: {
    type: String,
    default: "18rem",
    required: false,
  },
});

---

TextShow

import { TextShow } from "@accurasoft/homepage-component";

<TextShow text="HELLO WORLD" :interval-ms="300" class="text-2xl" />

props

const props = defineProps<{
  text: string;
  intervalMs?: number; // default: 200
}>();

---

TextTyping

import { TextTyping } from "@accurasoft/homepage-component";

<TextTyping text="HELLO WORLD" :interval-ms="300" class="text-2xl" />

props

const props = defineProps<{
  text: string;
  intervalMs?: number; // default: 100
}>();