@meistrari/tela-build 1.0.0

package/components/tela/complex-table/styles/table-shared.css

@@ -0,0 +1,170 @@
+/* Sticky positioning */
+.sticky {
+    position: sticky !important;
+}
+
+/* Main table container */
+.main-table-container {
+    overflow: auto;
+    position: relative;
+}
+
+.main-table-container table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+/* Scrollbar track styles */
+.main-table-container::-webkit-scrollbar-track {
+    border-radius: 10px;
+}
+
+.has-index::-webkit-scrollbar-track {
+    margin-left: -48px;
+}
+
+.has-select::-webkit-scrollbar-track {
+    margin-left: -32px;
+}
+
+.has-index-and-select::-webkit-scrollbar-track {
+    margin-left: -85px;
+    background-color: transparent;
+}
+
+/* Scrollbar container */
+.main-table-container::-webkit-scrollbar {
+    width: 8px;
+    height: 16px;
+    background-color: white;
+    box-shadow: 0 -0.5px 0 0 rgba(225, 227, 228, 1);
+    border-radius: 0px 0px 8px 0px;
+}
+
+/* Hide scrollbar when needed */
+.main-table-container.hide-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.main-table-container.hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+/* Scrollbar thumb */
+.main-table-container::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    height: 6px;
+    box-shadow: inset 0px 0px 0px 4px white;
+    background: transparent;
+    position: relative;
+    clip-path: inset(0 0 0 0);
+    
+    background-color: transparent;
+    background-image: linear-gradient(to right, #EBECED, #EBECED);
+    background-clip: content-box;
+    background-origin: border-box;
+    background-size: calc(100% - 8px) calc(100% - 8px);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.main-table-container::-webkit-scrollbar-thumb:hover {
+    background-image: linear-gradient(to right, #C2C4C6, #C2C4C6);
+}
+
+.has-scroll::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border: none;
+}
+
+/* Vertical scrollbar */
+.main-table-container::-webkit-scrollbar:vertical {
+    width: 0px;
+    height: 0px;
+}
+
+.main-table-container::-webkit-scrollbar-button:vertical {
+    width: 0px;
+    height: 0px;
+}
+
+/* Horizontal scrollbar buttons */
+.main-table-container::-webkit-scrollbar-button:horizontal {
+    width: 19px;
+    display: block;
+    background-color: white;
+}
+
+.main-table-container::-webkit-scrollbar-button:horizontal:start {
+    display: none;
+}
+
+.main-table-container::-webkit-scrollbar-button:horizontal:increment {
+    background-color: white;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.64941 5.39795L1.89941 9.14795C1.79374 9.25362 1.65042 9.31299 1.50098 9.31299C1.35153 9.31299 1.20821 9.25362 1.10254 9.14795C0.996866 9.04228 0.9375 8.89895 0.9375 8.74951C0.9375 8.60007 0.996866 8.45675 1.10254 8.35107L4.45457 4.99998L1.10348 1.64795C1.05115 1.59562 1.00965 1.53351 0.981329 1.46514C0.953012 1.39678 0.938437 1.32351 0.938437 1.24951C0.938437 1.17551 0.953012 1.10224 0.981329 1.03388C1.00965 0.965514 1.05115 0.903397 1.10348 0.851073C1.1558 0.79875 1.21792 0.757245 1.28628 0.728927C1.35464 0.70061 1.42792 0.686035 1.50191 0.686035C1.57591 0.686035 1.64918 0.70061 1.71755 0.728927C1.78591 0.757245 1.84803 0.79875 1.90035 0.851073L5.65035 4.60107C5.70273 4.65339 5.74427 4.71554 5.77258 4.78394C5.80089 4.85235 5.81541 4.92567 5.81533 4.99971C5.81524 5.07374 5.80054 5.14703 5.77207 5.21537C5.7436 5.2837 5.70192 5.34575 5.64941 5.39795Z' fill='%23C2C4C6'/%3E%3C/svg%3E");
+    pointer-events: none;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 6px 10px;
+    border-radius: 0px 0px 8px 0px;
+    outline: 0.5px solid #E1E3E4;
+    background-color: #FAFAFB;
+}
+
+.main-table-container::-webkit-scrollbar-button:horizontal:decrement {
+    background-color: white;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.89982 8.35205C5.00549 8.45772 5.06486 8.60104 5.06486 8.75049C5.06486 8.89993 5.00549 9.04325 4.89982 9.14892C4.79415 9.2546 4.65082 9.31396 4.50138 9.31396C4.35194 9.31396 4.20862 9.2546 4.10294 9.14892L0.352943 5.39892C0.300503 5.34667 0.258895 5.28457 0.230505 5.2162C0.202114 5.14782 0.1875 5.07452 0.1875 5.00049C0.1875 4.92645 0.202114 4.85315 0.230505 4.78478C0.258895 4.7164 0.300503 4.65431 0.352943 4.60205L4.10294 0.85205C4.20862 0.746378 4.35194 0.687012 4.50138 0.687012C4.65082 0.687012 4.79415 0.746378 4.89982 0.85205C5.00549 0.957722 5.06486 1.10104 5.06486 1.25049C5.06486 1.39993 5.00549 1.54325 4.89982 1.64892L1.54872 5.00002L4.89982 8.35205Z' fill='%23C2C4C6'/%3E%3C/svg%3E");
+    pointer-events: none;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 6px 10px;
+    outline: 0.5px solid #E1E3E4;
+    background-color: #FAFAFB;
+}
+
+/* Active scrollbar buttons */
+.has-scroll::-webkit-scrollbar-button:horizontal:increment {
+    background-color: white;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.64941 5.39795L1.89941 9.14795C1.79374 9.25362 1.65042 9.31299 1.50098 9.31299C1.35153 9.31299 1.20821 9.25362 1.10254 9.14795C0.996866 9.04228 0.9375 8.89895 0.9375 8.74951C0.9375 8.60007 0.996866 8.45675 1.10254 8.35107L4.45457 4.99998L1.10348 1.64795C1.05115 1.59562 1.00965 1.53351 0.981329 1.46514C0.953012 1.39678 0.938437 1.32351 0.938437 1.24951C0.938437 1.17551 0.953012 1.10224 0.981329 1.03388C1.00965 0.965514 1.05115 0.903397 1.10348 0.851073C1.1558 0.79875 1.21792 0.757245 1.28628 0.728927C1.35464 0.70061 1.42792 0.686035 1.50191 0.686035C1.57591 0.686035 1.64918 0.70061 1.71755 0.728927C1.78591 0.757245 1.84803 0.79875 1.90035 0.851073L5.65035 4.60107C5.70273 4.65339 5.74427 4.71554 5.77258 4.78394C5.80089 4.85235 5.81541 4.92567 5.81533 4.99971C5.81524 5.07374 5.80054 5.14703 5.77207 5.21537C5.7436 5.2837 5.70192 5.34575 5.64941 5.39795Z' fill='%234E535A'/%3E%3C/svg%3E");
+    pointer-events: auto;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 6px 10px;
+    outline: 0.5px solid #E1E3E4;
+}
+
+.has-scroll::-webkit-scrollbar-button:horizontal:increment:hover {
+    background-color: #F5F6F6;
+    cursor: pointer;
+}
+
+.has-scroll::-webkit-scrollbar-button:horizontal:decrement {
+    background-color: white;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.89982 8.35205C5.00549 8.45772 5.06486 8.60104 5.06486 8.75049C5.06486 8.89993 5.00549 9.04325 4.89982 9.14892C4.79415 9.2546 4.65082 9.31396 4.50138 9.31396C4.35194 9.31396 4.20862 9.2546 4.10294 9.14892L0.352943 5.39892C0.300503 5.34667 0.258895 5.28457 0.230505 5.2162C0.202114 5.14782 0.1875 5.07452 0.1875 5.00049C0.1875 4.92645 0.202114 4.85315 0.230505 4.78478C0.258895 4.7164 0.300503 4.65431 0.352943 4.60205L4.10294 0.85205C4.20862 0.746378 4.35194 0.687012 4.50138 0.687012C4.65082 0.687012 4.79415 0.746378 4.89982 0.85205C5.00549 0.957722 5.06486 1.10104 5.06486 1.25049C5.06486 1.39993 5.00549 1.54325 4.89982 1.64892L1.54872 5.00002L4.89982 8.35205Z' fill='%234E535A'/%3E%3C/svg%3E");
+    pointer-events: auto;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 6px 10px;
+    outline: 0.5px solid #E1E3E4;
+}
+
+.has-scroll::-webkit-scrollbar-button:horizontal:decrement:hover {
+    background-color: #F5F6F6;
+    cursor: pointer;
+}
+
+/* Shadow effect */
+.shadow {
+    box-shadow: -8px 4px 16px 0px rgba(13, 45, 72, 0.02), -12px 16px 80px 0px rgba(13, 45, 72, 0.04);
+    backdrop-filter: blur(2px);
+}
+
+/* Empty state positioning */
+.empty-state-centered {
+    position: absolute;
+    left: 50vw;
+    top: 50%;
+    transform: translate(-72.5%, 25%);
+    z-index: 10;
+}

package/components/tela/complex-table/types.ts

@@ -0,0 +1,63 @@
+export type Column = {
+    key?: string
+    title: string
+    isDefault?: boolean
+    icon?: {
+        name: string
+        size?: string
+        style?: string
+    }
+    color?: string
+    style?: string
+    class?: string
+}
+
+export type Row = {
+    id?: string
+    index?: number
+    status: string
+    name: string
+    errorMessage?: string
+    data: Record<string, unknown>
+    isLoading?: boolean
+    isNew?: boolean
+    icons?: {
+        key: string
+        type?: string
+        name: string
+        size?: string
+        style?: string
+    }[]
+    color?: string
+    style?: string
+}
+
+export const HoverMechanismTypes = {
+    Row: 'row',
+    Cell: 'cell',
+} as const
+export type HoverMechanism = (typeof HoverMechanismTypes)[keyof typeof HoverMechanismTypes]
+
+export type ComplexTableType = {
+    columns: Column[]
+    rows: Row[]
+    rowTitlePath: string
+    rowIndexPath: string
+    allowSelect?: boolean
+    allowRowIndex?: boolean
+    loading?: boolean
+    maxHeight?: number
+    hoverMechanism?: HoverMechanism
+    disableRowClick?: (row: Row) => boolean
+    selectedRows?: string[]
+    columnsClass?: string
+    rowClass?: (row: Row) => string
+    rowIndexClass?: string
+    headerClass?: string
+    hideScrollbar?: boolean
+    hideError?: boolean
+    useVirtualization?: boolean
+    virtualizedOverscan?: number
+    virtualizedRowHeight?: number
+    virtualizedInitialBatchSize?: number
+}

package/components/tela/complex-table/utils.ts

@@ -0,0 +1,35 @@
+import type { Column } from './types'
+
+export function readRowPath(row: Record<string, unknown>, path: string) {
+    const paths = path.split('.')
+    let value = row as any
+    for (const piece of paths) {
+        if (value && typeof value === 'object') {
+            value = value[piece]
+        }
+        else {
+            return ''
+        }
+    }
+    return value
+}
+
+export function getRowTitle(row: Record<string, unknown>, rowTitlePath: string) {
+    return readRowPath(row, rowTitlePath)
+}
+
+export function hasContent(row: Record<string, unknown>, column: Column) {
+    if (typeof row.data !== 'object') {
+        return false
+    }
+    const data = row.data as Record<string, unknown>
+    return data[column.title] !== undefined
+}
+
+export function hasError(row: Record<string, unknown>) {
+    return row.status === 'failed'
+}
+
+export function isLoading(row: Record<string, unknown>, loading: boolean) {
+    return row.status === 'loading' || row.isLoading || loading
+}

package/components/tela/confirm-button/confirm-button.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { ButtonProps as TelaButtonProps } from '../button/button.vue'
+
+type ButtonState = 'normal' | 'confirming' | 'success' | 'error' | 'loading'
+
+export type ButtonProps = {
+    size?: TelaButtonProps['size']
+    variant?: TelaButtonProps['variant']
+    icon?: string
+    loading?: boolean
+    leading?: boolean
+    disabled?: boolean
+    to?: string
+    target?: '_blank' | null
+    confirmMessage?: string
+    successMessage?: string
+    errorMessage?: string
+}
+
+const props = defineProps<ButtonProps>()
+const emit = defineEmits<{
+    (e: 'confirm'): void
+    (e: 'success'): void
+    (e: 'error'): void
+}>()
+
+const state = ref<ButtonState>('normal')
+const timeoutId = ref<ReturnType<typeof setTimeout>>()
+
+const buttonProps = computed(() => ({
+    size: props.size,
+    variant: (state.value === 'success' && 'success')
+        || (state.value === 'error' && 'danger')
+        || props.variant,
+    icon: props.icon,
+    loading: state.value === 'loading',
+    leading: props.leading,
+    disabled: props.disabled || state.value === 'loading',
+    to: props.to,
+    target: props.target,
+}))
+
+async function onClick() {
+    if (state.value === 'normal') {
+        state.value = 'confirming'
+
+        // Reset to normal after 3s if no action taken
+        timeoutId.value = setTimeout(() => {
+            if (state.value === 'confirming')
+                state.value = 'normal'
+        }, 10000)
+    }
+}
+
+async function onConfirm() {
+    clearTimeout(timeoutId.value)
+    emit('confirm')
+    state.value = 'loading'
+
+    try {
+        state.value = 'success'
+        emit('success')
+        setTimeout(() => {
+            state.value = 'normal'
+        }, 2000)
+    }
+    catch {
+        state.value = 'error'
+        emit('error')
+
+        setTimeout(() => {
+            state.value = 'normal'
+        }, 2000)
+    }
+}
+
+function onCancel() {
+    clearTimeout(timeoutId.value)
+    state.value = 'normal'
+}
+</script>
+
+<template>
+    <TelaButton
+        v-bind="{ ...buttonProps, icon: undefined }"
+        class="transition-all duration-200 ease-in-out"
+        @click="onClick"
+    >
+        <TelaIconSpinner v-if="state === 'loading'" animate-spin />
+        <template v-else-if="state === 'confirming'">
+            {{ props.confirmMessage }}
+            <button
+                class="hover:text-positive"
+                @click.stop="onConfirm"
+            >
+                <div i-ph-check-bold text-14px />
+            </button>
+            <button
+                class="hover:text-red-500"
+                @click.stop="onCancel"
+            >
+                <div i-ph-x-bold text-14px />
+            </button>
+        </template>
+
+        <template v-else-if="state === 'success'">
+            <div i-ph-check-bold text-14px />
+            {{ props.successMessage }}
+        </template>
+
+        <template v-else-if="state === 'error'">
+            <div i-ph-x-bold text-14px />
+            {{ props.errorMessage }}
+        </template>
+
+        <template v-else>
+            <slot v-if="$slots.leading" name="leading" />
+            <div v-else-if="icon && leading" :class="icon" text-10px />
+            <slot />
+            <slot v-if="$slots.trailing" name="trailing" />
+            <div v-else-if="icon && !leading" :class="icon" text-10px />
+        </template>
+    </TelaButton>
+</template>
+
+<style scoped>
+.grow-enter-active,
+.grow-leave-active {
+    transition: all 1s ease-in-out;
+}
+
+.grow-enter-from,
+.grow-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+</style>

package/components/tela/confirmation-modal/confirmation-modal.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { DialogClose } from 'radix-vue'
+import TelaModal from '../modal/modal.vue'
+import TelaButton from '../button/button.vue'
+
+const props = defineProps<{
+    title: string
+    compact?: boolean
+    variant?: 'primary' | 'danger'
+    confirmButtonText?: string
+    cancelButtonText?: string
+    loading?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'confirm'): void
+    (e: 'cancel'): void
+}>()
+
+const open = defineModel<boolean>('open')
+
+function handleCloseClick() {
+    emit('cancel')
+    open.value = false
+}
+
+const confirmButtonVariant = computed(() => {
+    return props.variant === 'danger' ? 'danger' : 'primary'
+})
+</script>
+
+<template>
+    <TelaModal
+        v-model:model-value="open"
+        :compact="props.compact ?? true"
+        hide-dividers
+        @close="emit('cancel')"
+    >
+        <template #actions>
+            <DialogClose as-child>
+                <TelaIconButton
+                    absolute
+                    top-8px
+                    right-8px
+                    icon="i-ph-x"
+                    size="md"
+                    color="secondary"
+                    outline-none
+                    @click="handleCloseClick"
+                />
+            </DialogClose>
+        </template>
+        <div flex="~ col" w-400px>
+            <h6 body-20-semibold text-gray-900>
+                {{ props.title }}
+            </h6>
+            <div body-16-regular text-gray-700 mt-8px>
+                <slot />
+            </div>
+        </div>
+        <template #footer>
+            <div flex="~" gap-8px w-full justify-between>
+                <TelaButton :disabled="props.loading" size="lg" variant="secondary" @click="emit('cancel')">
+                    {{ props.cancelButtonText ?? 'Cancel' }}
+                </TelaButton>
+                <TelaButton :loading="props.loading" size="lg" :variant="confirmButtonVariant" @click="emit('confirm')">
+                    {{ props.confirmButtonText ?? 'Confirm' }}
+                </TelaButton>
+            </div>
+        </template>
+    </TelaModal>
+</template>

package/components/tela/copy-button.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { UseClipboard } from '@vueuse/components'
+
+const props = defineProps({
+    content: {
+        type: String,
+        required: true,
+    },
+    size: {
+        type: String as () => 'sm' | 'md' | 'lg',
+        default: 'md',
+        required: false,
+    },
+})
+
+const statusToast = useStatusToast()
+
+const showConfirmationIcon = ref(false)
+
+const sizeStyles = computed(() => ({
+    sm: 'h-20px w-20px',
+    md: 'h-24px w-24px',
+    lg: 'h-32px w-32px',
+} as Record<typeof props.size, string>)[props.size])
+
+function onClick(copyFn: (content: string) => void) {
+    showConfirmationIcon.value = true
+
+    copyFn(props.content)
+
+    statusToast.update({
+        text: 'Copied to clipboard',
+        icon: 'i-ph-check',
+    })
+
+    setTimeout(() => {
+        showConfirmationIcon.value = false
+    }, 1500)
+}
+</script>
+
+<template>
+    <div>
+        <UseClipboard v-slot="{ copy }">
+            <slot :copy="() => onClick(copy)">
+                <button
+                    hover:bg="#EBEFF199"
+                    relative
+                    rounded-full
+                    flex="~ " justify-center
+                    class="group"
+                    :class="[
+                        showConfirmationIcon && 'bg-#D0F9ED !hover:bg-#D0F9ED',
+                        sizeStyles,
+                    ]"
+                    @click="onClick(copy)"
+                >
+                    <Transition name="appear">
+                        <TelaIcon
+                            v-if="!showConfirmationIcon"
+                            absolute
+                            class="top-1/2 translate-y--1/2"
+                            :size="size"
+                            name="i-ph-copy"
+                            color="#031E22"
+                            op-80
+                            group-hover:op-100
+                        />
+                    </Transition>
+                    <Transition name="appear">
+                        <TelaIcon
+                            v-if="showConfirmationIcon"
+                            absolute
+                            class="top-1/2 translate-y--1/2"
+                            :size="size"
+                            name="i-ph-check"
+                            color="#327558"
+                            op-80
+                            group-hover:op-100
+                        />
+                    </Transition>
+                </button>
+            </slot>
+        </UseClipboard>
+    </div>
+</template>