@cooperco/cooper-component-library 0.0.10

package/src/presets/aura/index.js

@@ -0,0 +1,181 @@
+import global from './global.js'
+import autocomplete from './autocomplete/index.js'
+import calendar from './calendar/index.js'
+import cascadeselect from './cascadeselect/index.js'
+import checkbox from './checkbox/index.js'
+import chips from './chips/index.js'
+import colorpicker from './colorpicker/index.js'
+import dropdown from './dropdown/index.js'
+import floatlabel from './floatlabel/index.js'
+import iconfield from './iconfield/index.js'
+import inputgroup from './inputgroup/index.js'
+import inputotp from './inputotp/index.js'
+import inputgroupaddon from './inputgroupaddon/index.js'
+import inputmask from './inputmask/index.js'
+import inputnumber from './inputnumber/index.js'
+import inputswitch from './inputswitch/index.js'
+import inputtext from './inputtext/index.js'
+import knob from './knob/index.js'
+import listbox from './listbox/index.js'
+import multiselect from './multiselect/index.js'
+import password from './password/index.js'
+import radiobutton from './radiobutton/index.js'
+import rating from './rating/index.js'
+import selectbutton from './selectbutton/index.js'
+import slider from './slider/index.js'
+import textarea from './textarea/index.js'
+import togglebutton from './togglebutton/index.js'
+import treeselect from './treeselect/index.js'
+import tristatecheckbox from './tristatecheckbox/index.js'
+import button from './button/index.js'
+import speeddial from './speeddial/index.js'
+import splitbutton from './splitbutton/index.js'
+import datatable from './datatable/index.js'
+import dataview from './dataview/index.js'
+import orderlist from './orderlist/index.js'
+import organizationchart from './organizationchart/index.js'
+import paginator from './paginator/index.js'
+import picklist from './picklist/index.js'
+import tree from './tree/index.js'
+import treetable from './treetable/index.js'
+import timeline from './timeline/index.js'
+import accordion from './accordion/index.js'
+import card from './card/index.js'
+import deferred from './deferred/index.js'
+import divider from './divider/index.js'
+import fieldset from './fieldset/index.js'
+import panel from './panel/index.js'
+import scrollpanel from './scrollpanel/index.js'
+import splitter from './splitter/index.js'
+import stepper from './stepper/index.js'
+import tabview from './tabview/index.js'
+import toolbar from './toolbar/index.js'
+import confirmpopup from './confirmpopup/index.js'
+import dialog from './dialog/index.js'
+import overlaypanel from './overlaypanel/index.js'
+import sidebar from './sidebar/index.js'
+import tooltip from './tooltip/index.js'
+import fileupload from './fileupload/index.js'
+import breadcrumb from './breadcrumb/index.js'
+import contextmenu from './contextmenu/index.js'
+import dock from './dock/index.js'
+import menu from './menu/index.js'
+import menubar from './menubar/index.js'
+import megamenu from './megamenu/index.js'
+import panelmenu from './panelmenu/index.js'
+import steps from './steps/index.js'
+import tabmenu from './tabmenu/index.js'
+import tieredmenu from './tieredmenu/index.js'
+import message from './message/index.js'
+import inlinemessage from './inlinemessage/index.js'
+import toast from './toast/index.js'
+import carousel from './carousel/index.js'
+import galleria from './galleria/index.js'
+import image from './image/index.js'
+import avatar from './avatar/index.js'
+import badge from './badge/index.js'
+import badgedirective from './badgedirective/index.js'
+import blockui from './blockui/index.js'
+import chip from './chip/index.js'
+import inplace from './inplace/index.js'
+import metergroup from './metergroup/index.js'
+import scrolltop from './scrolltop/index.js'
+import skeleton from './skeleton/index.js'
+import progressbar from './progressbar/index.js'
+import progressspinner from './progressspinner/index.js'
+import ripple from './ripple/index.js'
+import tag from './tag/index.js'
+import terminal from './terminal/index.js'
+
+export default {
+	global,
+	directives: {
+		tooltip,
+		badgedirective,
+		ripple,
+	},
+	autocomplete,
+	calendar,
+	cascadeselect,
+	checkbox,
+	chips,
+	colorpicker,
+	dropdown,
+	floatlabel,
+	iconfield,
+	inputgroup,
+	inputotp,
+	inputgroupaddon,
+	inputmask,
+	inputnumber,
+	inputswitch,
+	inputtext,
+	knob,
+	listbox,
+	multiselect,
+	password,
+	radiobutton,
+	rating,
+	selectbutton,
+	slider,
+	textarea,
+	togglebutton,
+	treeselect,
+	tristatecheckbox,
+	button,
+	speeddial,
+	splitbutton,
+	datatable,
+	dataview,
+	orderlist,
+	organizationchart,
+	paginator,
+	picklist,
+	tree,
+	treetable,
+	timeline,
+	accordion,
+	card,
+	deferred,
+	divider,
+	fieldset,
+	panel,
+	scrollpanel,
+	splitter,
+	stepper,
+	tabview,
+	toolbar,
+	confirmpopup,
+	dialog,
+	overlaypanel,
+	sidebar,
+	fileupload,
+	breadcrumb,
+	contextmenu,
+	dock,
+	menu,
+	menubar,
+	megamenu,
+	panelmenu,
+	steps,
+	tabmenu,
+	tieredmenu,
+	message,
+	inlinemessage,
+	toast,
+	carousel,
+	galleria,
+	image,
+	avatar,
+	badge,
+	blockui,
+	chip,
+	inplace,
+	metergroup,
+	scrolltop,
+	skeleton,
+	progressbar,
+	progressspinner,
+	tag,
+	terminal,
+}

package/src/presets/aura/inlinemessage/index.js

@@ -0,0 +1,46 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			'inline-flex items-center justify-center align-top gap-2',
+			'p-3 m-0 rounded-md border',
+			{
+				'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
+				'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
+				'bg-surface-100/70 dark:bg-surface-500/20':
+					props.severity == 'secondary',
+				'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
+				'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
+				'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast',
+			},
+			{
+				'border-blue-200 dark:border-blue-500/20': props.severity == 'info',
+				'border-green-200 dark:border-green-500/20':
+					props.severity == 'success',
+				'border-surface-200 dark:border-surface-500/20':
+					props.severity == 'secondary',
+				'border-orange-200 dark:border-orange-500/20': props.severity == 'warn',
+				'border-red-200 dark:border-red-500/20': props.severity == 'error',
+				'border-surface-950 dark:border-surface-0':
+					props.severity == 'contrast',
+			},
+			{
+				'text-blue-700 dark:text-blue-300': props.severity == 'info',
+				'text-green-700 dark:text-green-300': props.severity == 'success',
+				'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
+				'text-orange-700 dark:text-orange-300': props.severity == 'warn',
+				'text-red-700 dark:text-red-300': props.severity == 'error',
+				'text-surface-0 dark:text-surface-950': props.severity == 'contrast',
+			},
+		],
+	}),
+	icon: {
+		class: 'text-base',
+	},
+	text: {
+		class: [
+			// Font and Text
+			'text-base leading-none',
+			'font-medium',
+		],
+	},
+}

package/src/presets/aura/inplace/index.js

@@ -0,0 +1,27 @@
+export default {
+	display: {
+		class: [
+			// Display
+			'inline',
+
+			// Spacing
+			'px-3 py-2',
+
+			// Shape
+			'rounded-md',
+
+			// Colors
+			'text-surface-700 dark:text-white/80',
+
+			// States
+			'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-800 dark:hover:text-white/80',
+
+			// Transitions
+			'transition',
+			'duration-200',
+
+			// Misc
+			'cursor-pointer',
+		],
+	},
+}

package/src/presets/aura/inputgroup/index.js

@@ -0,0 +1,5 @@
+export default {
+	root: {
+		class: ['flex items-stretch', 'w-full'],
+	},
+}

package/src/presets/aura/inputgroupaddon/index.js

@@ -0,0 +1,28 @@
+export default {
+	root: {
+		class: [
+			// Flex
+			'flex items-center justify-center',
+
+			// Shape
+			'first:rounded-l-md',
+			'last:rounded-r-md',
+			'border-y',
+
+			'last:border-r',
+			'border-l',
+			'border-r-0',
+
+			// Space
+			'p-2',
+
+			// Size
+			'min-w-[2.5rem]',
+
+			// Color
+			'bg-transparent dark:bg-surface-900',
+			'text-surface-800 dark:text-white/80',
+			'border-surface-300 dark:border-surface-700',
+		],
+	},
+}

package/src/presets/aura/inputmask/index.js

@@ -0,0 +1,47 @@
+export default {
+	root: ({ context, props, parent }) => ({
+		class: [
+			// Font
+			'leading-none',
+
+			// Spacing
+			'm-0 py-2 px-3',
+
+			// Colors
+			'text-surface-800 dark:text-white/80',
+			'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+			{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+
+			'border',
+			{ 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+			// Invalid State
+			'invalid:focus:ring-red-200',
+			'invalid:hover:border-red-500',
+			{ 'border-red-500 dark:border-red-400': props.invalid },
+
+			// States
+			{
+				'hover:border-surface-400 dark:hover:border-surface-600':
+					!context.disabled && !props.invalid,
+				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10':
+					!context.disabled,
+				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+					context.disabled,
+			},
+
+			// Filled State *for FloatLabel
+			{
+				filled:
+					parent.instance?.$name == 'FloatLabel' &&
+					props.modelValue !== null &&
+					props.modelValue?.length !== 0,
+			},
+
+			// Misc
+			'rounded-md',
+			'appearance-none',
+			'transition-colors duration-200',
+		],
+	}),
+}

package/src/presets/aura/inputnumber/index.js

@@ -0,0 +1,293 @@
+export default {
+	root: ({ props, parent }) => ({
+		class: [
+			// Flex
+			'inline-flex',
+			'relative',
+			{ 'flex-col': props.showButtons && props.buttonLayout == 'vertical' },
+			{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+			// Shape
+			{
+				'first:rounded-l-md rounded-none last:rounded-r-md':
+					parent.instance.$name == 'InputGroup' && !props.showButtons,
+			},
+			{
+				'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-700':
+					parent.instance.$name == 'InputGroup' && !props.showButtons,
+			},
+			{
+				'first:ml-0 -ml-px':
+					parent.instance.$name == 'InputGroup' && !props.showButtons,
+			},
+
+			//Sizing
+			{ '!w-16': props.showButtons && props.buttonLayout == 'vertical' },
+		],
+	}),
+	input: {
+		root: ({ parent, context }) => ({
+			class: [
+				// Font
+				'leading-none',
+
+				// Display
+				'flex flex-auto',
+
+				//Text
+				{
+					'text-center':
+						parent.props.showButtons && parent.props.buttonLayout == 'vertical',
+				},
+
+				// Spacing
+				'py-2 px-3',
+				'm-0',
+
+				// Shape
+				'rounded-md',
+				{
+					'rounded-l-none rounded-r-none':
+						parent.props.showButtons &&
+						parent.props.buttonLayout == 'horizontal',
+				},
+				{
+					'rounded-none':
+						parent.props.showButtons && parent.props.buttonLayout == 'vertical',
+				},
+
+				{
+					'border-0':
+						parent.instance.$parentInstance?.$name == 'InputGroup' &&
+						!parent.props.showButtons,
+				},
+
+				// Colors
+				'text-surface-800 dark:text-white/80',
+				'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+				{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+				'border',
+				{ 'border-surface-300 dark:border-surface-700': !parent.props.invalid },
+
+				// Invalid State
+				'invalid:focus:ring-red-200',
+				'invalid:hover:border-red-500',
+				{ 'border-red-500 dark:border-red-400': parent.props.invalid },
+
+				// States
+				{ 'hover:border-primary': !parent.props.invalid },
+				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+				{
+					'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+						context.disabled,
+				},
+
+				// Filled State *for FloatLabel
+				{
+					filled:
+						parent.instance?.$parentInstance?.$name == 'FloatLabel' &&
+						parent.state.d_modelValue !== null,
+				},
+
+				//Position
+				{
+					'order-2':
+						parent.props.buttonLayout == 'horizontal' ||
+						parent.props.buttonLayout == 'vertical',
+				},
+			],
+		}),
+	},
+	buttongroup: ({ props }) => ({
+		class: [
+			// Flex
+			'flex',
+			'flex-col',
+			{
+				'absolute top-px right-px h-[calc(100%-2px)] z-20':
+					props.showButtons && props.buttonLayout == 'stacked',
+			},
+		],
+	}),
+
+	incrementbutton: {
+		root: ({ parent }) => ({
+			class: [
+				// Display
+				'flex flex-auto',
+
+				// Alignment
+				'items-center',
+				'justify-center',
+				'text-center align-bottom',
+
+				//Position
+				'relative',
+				{
+					'order-3':
+						parent.props.showButtons &&
+						parent.props.buttonLayout == 'horizontal',
+				},
+				{
+					'order-1':
+						parent.props.showButtons && parent.props.buttonLayout == 'vertical',
+				},
+
+				//Color
+				'text-surface-800 dark:text-surface-0',
+				'bg-transparent',
+				{
+					'dark:bg-surface-900':
+						parent.props.showButtons && parent.props.buttonLayout !== 'stacked',
+				},
+				'border border-surface-300 dark:border-surface-700',
+				{
+					'border-0':
+						parent.props.showButtons && parent.props.buttonLayout == 'stacked',
+				},
+				{
+					'border-l-0':
+						parent.props.showButtons &&
+						parent.props.buttonLayout !== 'stacked' &&
+						parent.props.buttonLayout == 'horizontal',
+				},
+				{
+					'border-b-0':
+						parent.props.showButtons &&
+						parent.props.buttonLayout !== 'stacked' &&
+						parent.props.buttonLayout == 'vertical',
+				},
+
+				// Sizing
+				'w-[3rem]',
+				{
+					'px-4 py-3':
+						parent.props.showButtons && parent.props.buttonLayout !== 'stacked',
+				},
+				{
+					'p-0':
+						parent.props.showButtons && parent.props.buttonLayout == 'stacked',
+				},
+				{
+					'w-full':
+						parent.props.showButtons && parent.props.buttonLayout == 'vertical',
+				},
+
+				// Shape
+				'rounded-md',
+				{
+					'rounded-md':
+						parent.props.showButtons && parent.props.buttonLayout == 'stacked',
+				},
+				{
+					'rounded-bl-none rounded-tl-none':
+						parent.props.showButtons &&
+						parent.props.buttonLayout == 'horizontal',
+				},
+				{
+					'rounded-bl-none rounded-br-none':
+						parent.props.showButtons && parent.props.buttonLayout == 'vertical',
+				},
+
+				//States
+				'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+
+				//Misc
+				'cursor-pointer overflow-hidden select-none',
+			],
+		}),
+		label: {
+			class: 'h-0 w-0',
+		},
+	},
+	decrementbutton: {
+		root: ({ parent }) => ({
+			class: [
+				// Display
+				'flex flex-auto',
+
+				// Alignment
+				'items-center',
+				'justify-center',
+				'text-center align-bottom',
+
+				//Position
+				'relative',
+				{
+					'order-1':
+						parent.props.showButtons &&
+						parent.props.buttonLayout == 'horizontal',
+				},
+				{
+					'order-3':
+						parent.props.showButtons && parent.props.buttonLayout == 'vertical',
+				},
+
+				//Color
+				'text-surface-800 dark:text-surface-0',
+				'bg-transparent',
+				{
+					'dark:bg-surface-900':
+						parent.props.showButtons && parent.props.buttonLayout !== 'stacked',
+				},
+				'border border-surface-300 dark:border-surface-700',
+				{
+					'border-0':
+						parent.props.showButtons && parent.props.buttonLayout == 'stacked',
+				},
+				{
+					'border-r-0':
+						parent.props.showButtons &&
+						parent.props.buttonLayout !== 'stacked' &&
+						parent.props.buttonLayout == 'horizontal',
+				},
+				{
+					'border-t-0':
+						parent.props.showButtons &&
+						parent.props.buttonLayout !== 'stacked' &&
+						parent.props.buttonLayout == 'vertical',
+				},
+
+				// Sizing
+				'w-[3rem]',
+				{
+					'px-4 py-3':
+						parent.props.showButtons && parent.props.buttonLayout !== 'stacked',
+				},
+				{
+					'p-0':
+						parent.props.showButtons && parent.props.buttonLayout == 'stacked',
+				},
+				{
+					'w-full':
+						parent.props.showButtons && parent.props.buttonLayout == 'vertical',
+				},
+
+				// Shape
+				'rounded-md',
+				{
+					'rounded-tr-none rounded-tl-none rounded-bl-none':
+						parent.props.showButtons && parent.props.buttonLayout == 'stacked',
+				},
+				{
+					'rounded-tr-none rounded-br-none ':
+						parent.props.showButtons &&
+						parent.props.buttonLayout == 'horizontal',
+				},
+				{
+					'rounded-tr-none rounded-tl-none ':
+						parent.props.showButtons && parent.props.buttonLayout == 'vertical',
+				},
+
+				//States
+				'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+
+				//Misc
+				'cursor-pointer overflow-hidden select-none',
+			],
+		}),
+		label: {
+			class: 'h-0 w-0',
+		},
+	},
+}

package/src/presets/aura/inputotp/index.js

@@ -0,0 +1,69 @@
+export default {
+	root: {
+		class: [
+			// Alignment
+			'flex items-center',
+			'gap-2',
+		],
+	},
+	input: {
+		root: ({ props, context, parent }) => ({
+			class: [
+				// Font
+				'leading-none',
+
+				// Flex & Alignment
+				{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+				'text-center',
+
+				// Spacing
+				'm-0',
+				'py-2 px-3',
+
+				// Size
+				'w-10',
+
+				// Shape
+				{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
+				{
+					'first:rounded-l-md rounded-none last:rounded-r-md':
+						parent.instance.$name == 'InputGroup',
+				},
+				{
+					'border-0 border-y border-l last:border-r':
+						parent.instance.$name == 'InputGroup',
+				},
+				{
+					'first:ml-0 ml-[-1px]':
+						parent.instance.$name == 'InputGroup' && !props.showButtons,
+				},
+
+				// Colors
+				'text-surface-800 dark:text-white/80',
+				'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+				{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+				'border',
+				{ 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+				// Invalid State
+				'invalid:focus:ring-red-200',
+				'invalid:hover:border-red-500',
+				{ 'border-red-500 dark:border-red-400': props.invalid },
+
+				// States
+				{
+					'hover:border-surface-400 dark:hover:border-surface-600':
+						!context.disabled && !props.invalid,
+					'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10':
+						!context.disabled,
+					'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+						context.disabled,
+				},
+
+				// Misc
+				'appearance-none',
+				'transition-colors duration-200',
+			],
+		}),
+	},
+}