@cooperco/cooper-component-library 0.0.10 → 0.1.1

package/src/presets/aura/index.js

@@ -1,181 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,293 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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',
-			],
-		}),
-	},
-}