digitaltolk-ui

Vue 3 + Vite UI Library

This component library is built using the Naive-UI framework, serving as a comprehensive UI toolkit tailored for Digitaltolk applications.

Quickstart

Install this library with peer dependencies:

npm i digitaltolk-ui

Then, import and use individual components:

<template>
	<base-radio label="Confirm" :value="true" />
</template>

<script setup>
import {
	BaseAutoComplete,
	BaseButton,
	BaseCheckbox,
	BaseDatePicker,
	BaseForm,
	BaseFormItem,
	BaseFormItemGi,
	BaseIcons,
	BasePagination,
	BaseRadio,
	BaseSelect,
	BaseSwitch,
	BaseTextField,
	BaseTimePicker,
	BaseTooltip,
	BaseUpload,
	BaseModalDialog,
} from "digitaltolk-ui";
import "digitaltolk-ui/dist/style.css";
</script>

You can also setup Theme colors.

import { configureTheme } from "digitaltolk-ui";

configureTheme({
	colors: {
		primaryColor: "#d63968",
		primaryTextColor: "#fff",
		primaryTextOutlineColor: "#231f20",
		primaryColorHover: "color-hover",
		primaryColorPressed: "color-pressed",
		primaryColorLoading: "color-loading",

		secondaryColor: "#231f20",
		secondaryTextColor: "#231f20",
		secondaryTextOutlineColor: "#231f20",
		secondaryColorHover: "your-color",
		secondaryColorLoading: "your-color",

		disabledColor: "#ced0de",
		defaultColor: "#d9d9d9",

		darkGray: "#231f20",
		lightGray: "#626272",
		lighterGray: "#a0a0a0",
		lightestGray: "#eaeaea",
		nextLightestGray: "#f6f6f6",
	},
});

Notes

Our theming system supports the following color formats:

1. HEX Color Codes Example: #ff5733, #FFF
2. RGB and RGBA RGB Example: rgb(255, 87, 51) RGBA Example: rgba(255, 87, 51, 0.5) (where the last number is the alpha channel for opacity)
3. HSL and HSLA HSL Example: hsl(9, 100%, 60%) HSLA Example: hsla(9, 100%, 60%, 0.5)

Docs

• Naive-UI Component Library documentation