@ayu-sh-kr/dota-ui 0.0.1

package/src/components/button/button.css

@@ -0,0 +1,96 @@
+.buttonFill{
+    letter-spacing: 0.15rem;
+    transition: all 0.3s;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.buttonFill::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    z-index: -2;
+}
+
+.buttonFill::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    transition: all 0.3s;
+    border-radius: inherit;
+    z-index: -1;
+}
+
+.buttonFill:hover {
+    color: #fff;
+}
+
+.buttonFill:hover::before {
+    width: 100%;
+}
+
+/*--- Button Fill END ---*/
+
+.btn {
+    width: 180px;
+    height: 60px;
+    cursor: pointer;
+    background: transparent;
+    border: 1px solid #91C9FF;
+    outline: none;
+    transition: 1s ease-in-out;
+}
+
+svg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    fill: none;
+    stroke: #fff;
+    stroke-dasharray: 150 480;
+    stroke-dashoffset: 150;
+    transition: 1s ease-in-out;
+}
+
+.btn:hover {
+    transition: 1s ease-in-out;
+    background: #9b5bdc;
+}
+
+.btn:hover svg {
+    stroke-dashoffset: -480;
+}
+
+.btn span {
+    color: white;
+    font-size: 18px;
+    font-weight: 100;
+}
+.center {
+    width: 180px;
+    height: 60px;
+    position: absolute;
+    background: blueviolet;
+}
+
+span.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 600ms linear;
+    background-color: rgba(255, 255, 255, 0.7);
+}
+@keyframes ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}

package/src/components/card/card.component.ts

@@ -0,0 +1,145 @@
+import {BaseElement, Component, Property, String} from "@ayu-sh-kr/dota-core/dist";
+
+
+
+@Component({
+    selector: 'dota-card',
+    shadow: false
+})
+export class CardComponent extends BaseElement {
+
+    content!: string;
+
+    @Property({name: 'className', type: String})
+    className!: string
+
+    constructor() {
+        super();
+        this.content = this.innerHTML;
+    }
+
+    render(): string {
+        return `
+            <div class="${this.className}">
+                ${this.content}
+            </div>
+        `;
+    }
+
+}
+
+@Component({
+    selector: 'card-title',
+    shadow: true
+})
+export class CardTitleComponent extends BaseElement {
+
+    @Property({name: 'title', type: String})
+    title!: string;
+
+    @Property({name: 'className', type: String})
+    className!: string;
+
+    constructor() {
+        super();
+    }
+
+    template = (title: string) => {
+
+        let content;
+
+        content = title || this.innerHTML;
+
+        return `
+        <h1 class="text-3xl font-bold ${this.className ?? ''}">
+                    ${content}
+        </h1>
+        `;
+    }
+
+    render() {
+        return this.template(this.title);
+    }
+}
+
+@Component({
+    selector: 'card-header',
+    shadow: false
+})
+export class CardHeaderComponent extends BaseElement {
+
+    @Property({name: '', type: String})
+    header!: string;
+
+    constructor() {
+        super();
+    }
+
+    template = (header: string) => {
+        let content = header || this.innerHTML;
+
+        return `
+            <header class="py-4 text-4xl font-bold">${content}</header>
+        `
+    }
+
+    render(): string {
+        return this.template(this.header)
+    }
+}
+
+@Component({
+    selector: 'card-description',
+    shadow: false
+})
+export class CardDescriptionComponent extends BaseElement {
+
+    @Property({name: 'description', type: String})
+    description!: string;
+
+    @Property({name: 'className', type: String})
+    className!: string;
+
+    constructor() {
+        super();
+    }
+
+
+    template = (description: string) => {
+        let content = description || this.innerHTML;
+
+        return `
+            <p class="text-lg font-medium ${this.className}">${content}</p>
+        `
+    }
+
+    render(): string {
+        return this.template(this.description)
+    }
+}
+
+@Component({
+    selector: 'card-footer',
+    shadow: false
+})
+export class CardFooterComponent extends BaseElement {
+
+    content!: string
+
+    @Property({name: 'className', type: String})
+    className!: string;
+
+    constructor() {
+        super();
+        this.content = this.innerHTML;
+    }
+
+    render(): string {
+        return `
+            <footer class="flex items-center gap-4 justify-center ${this.className}">
+                ${this.content}
+            </footer>
+        `;
+    }
+
+}

package/src/components/chip/chip.component.ts

@@ -0,0 +1,44 @@
+import {BaseElement, Component, Property, String} from "@ayu-sh-kr/dota-core/dist";
+import type {ChipColor, ChipPosition} from "@dota/components/chip/chip.config.ts";
+import {ChipStyle} from "@dota/components/chip/chip.config.ts";
+
+@Component({
+    selector: 'dota-chip',
+    shadow: false
+})
+class ChipComponent extends BaseElement{
+
+    @Property({name: 'text', type: String})
+    text!: string;
+
+    @Property({name: 'position', type: String})
+    position!: ChipPosition;
+
+    @Property({name: 'color', type: String})
+    color!: ChipColor
+
+    content!: string
+
+    constructor() {
+        super();
+        this.content = this.innerHTML;
+    }
+
+    render(): string {
+        return `
+            <div class="${ChipStyle.base.parent}">
+                <span class="
+                            ${ChipStyle.base.chip} ${ChipStyle.position[this.position] ?? ChipStyle.position["top-right"]} 
+                            ${ChipStyle.color[this.color] ?? ChipStyle.color.yellow} text-[10px]  
+                            ${this.text ? 'size-4': 'size-2'}">
+                    ${this.text ?? ''}
+                </span>
+                ${this.content}
+            </div>
+        `;
+    }
+
+}
+
+export {ChipComponent, ChipStyle, type ChipColor, type ChipPosition}
+

package/src/components/chip/chip.config.ts

@@ -0,0 +1,33 @@
+export const ChipStyle = {
+    base: {
+        parent: 'relative inline-flex items-center justify-center flex-shrink-0',
+        chip: 'absolute rounded-full text-center text-white flex item-center justify-center'
+    },
+
+    position: {
+        'top-left': 'top-0 left-0 -translate-y-1/2 -translate-x-1/2',
+        'top-right': 'top-0 right-0 -translate-y-1/2 translate-x-1/2',
+        'bottom-right': 'bottom-0 right-0 translate-y-1/2 translate-x-1/2',
+        'bottom-left': 'bottom-0 left-0 translate-y-1/2 -translate-x-1/2',
+    },
+
+    color: {
+        red: 'bg-red-500 dark:bg-red-400',
+        yellow: 'bg-yellow-500 dark:bg-yellow-400',
+        rose: 'bg-rose-500 dark:bg-rose-400',
+        emerald: 'bg-emerald-500 dark:bg-emerald-400',
+        green: 'bg-green-500 dark:bg-green-400',
+        blue: 'bg-blue-500 dark:bg-blue-400',
+        cyan: 'bg-cyan-500 dark:bg-cyan-400',
+        teal: 'bg-teal-500 dark:bg-teal-400',
+        gray: 'bg-gray-500 dark:bg-gray-400',
+        orange: 'bg-orange-500 dark:bg-orange-400',
+        sky: 'bg-sky-500 dark:bg-sky-400',
+        purple: 'bg-purple-500 dark:bg-purple-400',
+        violet: 'bg-violet-500 dark:bg-violet-400',
+        pink: 'bg-pink-500 dark:bg-pink-400'
+    }
+}
+
+export type ChipPosition = keyof typeof ChipStyle.position;
+export type ChipColor = keyof typeof ChipStyle.color

package/src/components/icon/icons.component.ts

@@ -0,0 +1,83 @@
+import {BaseElement, Component, HTML, Property, AfterInit, String} from "@ayu-sh-kr/dota-core/dist";
+import type {IconSize, IconVariant, IconColor} from "@dota/components/icon/icons.config.ts";
+import {IconStyle} from "@dota/components/icon/icons.config.ts";
+
+@Component({
+    selector: 'dota-icon',
+    shadow: false
+})
+class IconsComponent extends BaseElement {
+
+    @Property({name: 'name', type: String})
+    name!: string;
+
+    @Property({name: 'classname', type: String})
+    className!: string;
+
+    @Property({name: 'size', type: String})
+    size!: IconSize;
+
+    @Property({name: 'color', type: String})
+    color!: IconColor
+
+    @Property({name: 'variant', type: String})
+    variant!: IconVariant
+
+    constructor() {
+        super();
+    }
+
+
+    @AfterInit()
+    afterViewInit() {
+        this.getSvg().then();
+    }
+
+    async getSvg() {
+        let url = `https://api.iconify.design/${this.name}.svg?color=%23888888`;
+        const response = await fetch(url);
+        if(response.status === 200){
+            let text = await response.text();
+            if(text !== '404' ){
+                this.innerHTML = text;
+
+                const svg = this.querySelector('svg');
+
+                if(svg) {
+                    svg.setAttribute('class', IconStyle.size[this.size] || IconStyle.size.sm)
+                    IconStyle.base.split(" ")
+                        .forEach(value => svg.classList.add(value))
+
+                    if(this.color) {
+                        const iconColor = this.variant ? IconStyle.color[this.color][this.variant] : IconStyle.color[this.color].solid
+
+                        iconColor.split(" ")
+                            .forEach(value => svg.classList.add(value))
+                    }
+
+                }
+
+                const svgPath = this.querySelector('svg path');
+
+                if(svgPath) {
+                    svgPath.setAttribute('fill', 'currentColor')
+                }
+            }
+        }
+        else {
+            console.warn('Invalid Icon Name')
+            this.innerHTML = '';
+        }
+    }
+
+    render(): string {
+        return HTML`
+            <div id="svg" class="flex items-center justify-center">
+                
+            </div> 
+        `;
+    }
+}
+
+export {IconsComponent, IconStyle}
+export type {IconVariant, IconColor, IconSize}

package/src/components/icon/icons.config.ts

@@ -0,0 +1,24 @@
+import {UIConfig} from "@dota/app.config.ts";
+
+export const IconStyle = {
+    shadow: 'shadow-sm',
+    base: 'overflow-hidden rounded-md focus:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 relative font-medium',
+    color: {
+      ...UIConfig.color
+    },
+
+    size: {
+        sm: 'p-0.5 size-4',
+        md: 'p-0.5 size-6',
+        lg: 'p-1 size-8',
+        xl: 'p-1 size-10',
+        '2xl': 'p-1.5 size-12',
+        '3xl': 'p-1.5 size-14'
+    }
+}
+
+type IconSize = keyof typeof IconStyle.size;
+type IconColor = keyof typeof IconStyle.color;
+type IconVariant = keyof ColorVariants
+
+export type {IconSize, IconVariant, IconColor}

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export * from "@dota/components/modal/modal.component.ts";
+export * from "@dota/components/card/card.component.ts";
+export * from "@dota/components/badge/badge.component.ts";
+export * from "@dota/components/utils/scaffold.component.ts";
+export * from "@dota/components/icon/icons.component.ts";
+export * from "@dota/components/accordian/accordion.component.ts";
+export * from "@dota/components/chip/chip.component.ts";
+export * from "@dota/components/avatar/avatar.component.ts";
+export * from "@dota/components/button/button.component.ts";
+export * from "@dota/components/popover/popover.component.ts";
+export * from "@dota/components/placeholder/placeholder.component.ts";

package/src/components/modal/modal.component.ts

@@ -0,0 +1,67 @@
+import './modal.css';
+import {BaseElement, BindEvent, Component, EventEmitter, Property, Emitter, String} from "@ayu-sh-kr/dota-core/dist";
+import type {ModalDirection, ModalDuration, ModalRounded} from "@dota/components/modal/modal.config.ts";
+import {ModalStyle} from "@dota/components/modal/modal.config.ts";
+
+
+@Component({
+    selector: 'dota-modal',
+    shadow: false
+})
+class ModalComponent extends BaseElement {
+
+    @Property({name: 'open', type: String})
+    isOpen!: boolean;
+
+    content!: string;
+
+    @Property({name: 'className', type: String})
+    className!: string
+
+    @Property({name: 'rounded', type: String})
+    rounded!: ModalRounded
+
+    @Property({name: 'duration', type: String})
+    duration!: ModalDuration
+
+    @Property({name: 'direction', type: String})
+    direction!: ModalDirection
+
+    @Emitter()
+    modalChange!: EventEmitter<boolean>
+
+    constructor() {
+        super();
+        this.content = this.innerHTML;
+    }
+
+    @BindEvent({event: 'click', id: '#close'})
+    handleClose() {
+        this.isOpen = false;
+
+        this.modalChange.emit(false, this);
+    }
+
+    template = (open: boolean) => {
+        return `
+            <div style="
+            --start-x: ${ModalStyle.direction[`${this.direction ?? 'up'}`].startX};
+            --end-x: ${ModalStyle.direction[`${this.direction ?? 'up'}`].endX};
+            --start-y: ${ModalStyle.direction[`${this.direction ?? 'up'}`].startY};
+            --end-y: ${ModalStyle.direction[`${this.direction ?? 'up'}`].endY};
+            --animation-duration: ${ModalStyle.duration[`${this.duration ?? '1300'}`]};
+            " id="model" class="${open ? 'modelOpen' : 'modelClose'}  ${ModalStyle.base} ${ModalStyle.rounded[`${this.rounded ?? 'none'}`]}">
+                <button type="button" id="close" class="absolute right-4 top-3">X</button>
+               ${this.content}
+            </div>
+        `
+    }
+
+    render() {
+        return this.template(this.isOpen);
+    }
+
+}
+
+export {ModalComponent, ModalStyle as ModalConfig}
+

package/src/components/modal/modal.config.ts

@@ -0,0 +1,69 @@
+
+export const ModalStyle = {
+
+    base: "bg-white border border-gray-200 fixed left-1/2 top-1/2 space-y-4 shadow-md p-6 min-w-[320px] z-[999]",
+
+    duration: {
+        "0" : "0s",
+        "100": "100ms",
+        "150": "150ms",
+        "200": "200ms",
+        "300": "300ms",
+        "500": "500ms",
+        "700": "700ms",
+        "1000": "1000ms",
+        "1200": "1200ms",
+        "1300": "1300ms",
+        "2000": "2000ms"
+    },
+
+    rounded: {
+        'none': '',
+        'sm': 'rounded-sm',
+        'md': 'rounded-md',
+        'lg': 'rounded-lg',
+        'xl': 'rounded-xl',
+        '2xl': 'rounded-2xl',
+        '3xl': 'rounded-3xl',
+        'full': 'rounded-full'
+    },
+
+    direction: {
+        up: {
+            startX: '-50%',
+            endX: '-50%',
+            startY: '-200%',
+            endY: '-50%'
+        },
+
+        down: {
+            startX: '-50%',
+            endX: '-50%',
+            startY: '200%',
+            endY: '-50%'
+        },
+
+        left: {
+            startX: '-180%',
+            endX: '-50%',
+            startY: '-50%',
+            endY: '-50%'
+        },
+
+        right: {
+            startX: '140%',
+            endX: '-50%',
+            startY: '-50%',
+            endY: '-50%'
+        }
+    }
+
+}
+
+type ModalRounded = keyof typeof ModalStyle.rounded
+
+type ModalDuration = keyof typeof ModalStyle.duration
+
+type ModalDirection = keyof typeof ModalStyle.direction
+
+export type {ModalRounded, ModalDuration, ModalDirection}

package/src/components/modal/modal.css

@@ -0,0 +1,50 @@
+:root {
+    --start-opacity: 0;
+    --end-opacity: 1;
+    --start-x: -50%;
+    --start-y: -150%;
+    --end-x: -50%;
+    --end-y: -50%;
+    --animation-duration: 0.5s;
+    --animation-delay: 0.5s;
+    --animation-ease-open: ease-out;
+    --animation-ease-close: ease-in;
+}
+
+@keyframes modal-open {
+    0% {
+        display: none;
+        opacity: var(--start-opacity);
+        transform: translate(var(--start-x), var(--start-y));
+    }
+
+    100% {
+        opacity: var(--end-opacity);
+        transform: translate(var(--end-x), var(--end-y));
+    }
+}
+
+@keyframes modal-close {
+    0% {
+        opacity: var(--end-opacity);
+        transform: translate(var(--end-x), var(--end-y));
+    }
+
+    100% {
+        display: none;
+        opacity: var(--start-opacity);
+        transform: translate(var(--start-x), var(--start-y));
+    }
+}
+
+
+.modelOpen {
+    animation-timing-function:  cubic-bezier(0.215, 0.610, 0.355, 1);
+    animation: modal-open var(--animation-duration) forwards;
+}
+
+.modelClose {
+    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+    animation: modal-close var(--animation-duration)  forwards;
+    /*    todo : have to delete element on close */
+}

package/src/components/placeholder/placeholder.component.ts

@@ -0,0 +1,25 @@
+import "./placeholder.css"
+import {BaseElement, Component, Property, String} from "@ayu-sh-kr/dota-core/dist";
+
+@Component({
+    selector: 'dota-placeholder',
+    shadow: false
+})
+export class PlaceholderComponent extends BaseElement {
+
+    @Property({name: 'classname', type: String})
+    className!: string
+
+
+    constructor() {
+        super();
+    }
+
+    render(): string {
+        return `
+            <div class="bg-slate-400 flex justify-center items-center p-1 rounded-lg overflow-hidden ${this.className}">
+                <div class="placeholder w-full h-full bg-slate-300 rounded-lg"></div>
+            </div>
+        `
+    }
+}

package/src/components/placeholder/placeholder.css

@@ -0,0 +1,3 @@
+.placeholder {
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
+}