@indielayer/ui 1.2.0 → 1.3.0

package/src/components/breadcrumbs/Breadcrumbs.theme.ts

@@ -1,19 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { BreadcrumbsProps } from './Breadcrumbs.vue'
-
-type InternalClasses = 'wrapper' | 'item' | 'lastItem'
-
-interface InternalTheme extends ThemeComponent<BreadcrumbsProps, InternalClasses> {}
-export interface BreadcrumbsTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<BreadcrumbsProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'flex items-center flex-wrap',
-    item: 'flex items-center',
-    lastItem: 'font-semibold',
-  },
-}
-
-export default theme

package/src/components/button/ButtonGroup.theme.ts

@@ -1,18 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ButtonGroupProps } from './ButtonGroup.vue'
-
-type InternalClasses = 'wrapper'
-type InternalExtraData = { isButtonGroupGroup: boolean; }
-
-interface InternalTheme extends ThemeComponent<ButtonGroupProps, InternalClasses, InternalExtraData> {}
-export interface ButtonGroupTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ButtonGroupProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-flex align-middle relative -space-x-[1px]',
-  },
-}
-
-export default theme

package/src/components/card/Card.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { CardProps } from './Card.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<CardProps, InternalClasses> {}
-export interface CardTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<CardProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props }) => `rounded bg-white dark:bg-gray-800${props.flat ? '' : ' shadow'}`,
-  },
-}
-
-export default theme

package/src/components/collapse/Collapse.theme.ts

@@ -1,21 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { CollapseProps } from './Collapse.vue'
-
-type InternalClasses = 'wrapper' | 'icon' | 'content'
-
-interface InternalTheme extends ThemeComponent<CollapseProps, InternalClasses> {}
-export interface CollapseTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<CollapseProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props }) => `relative flex items-center ${props.icon ?  'flex-row-reverse' : ''} ${props.disabled ? '' : 'cursor-pointer'}`,
-
-    icon: 'absolute top-1/2 transform -translate-y-1/2 right-3',
-
-    content: 'transition-[height] duration-150 overflow-y-hidden',
-  },
-}
-
-export default theme

package/src/components/container/Container.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ContainerProps } from './Container.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<ContainerProps, InternalClasses> {}
-export interface ContainerTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ContainerProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
-  },
-}
-
-export default theme

package/src/components/divider/Divider.theme.ts

@@ -1,21 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { DividerProps } from './Divider.vue'
-
-type InternalClasses = 'wrapper' | 'label' | 'line'
-
-interface InternalTheme extends ThemeComponent<DividerProps, InternalClasses> {}
-export interface DividerTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<DividerProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
-
-    label: 'font-medium text-sm text-gray-600 dark:text-gray-300',
-
-    line: 'bg-gray-200 dark:bg-slate-700 flex-grow',
-  },
-}
-
-export default theme

package/src/components/drawer/Drawer.theme.ts

@@ -1,19 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { DrawerProps } from './Drawer.vue'
-
-type InternalClasses = 'wrapper' | 'backdrop'
-
-interface InternalTheme extends ThemeComponent<DrawerProps, InternalClasses> {}
-export interface DrawerTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<DrawerProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
-
-    backdrop: 'duration-150 ease-in-out',
-  },
-}
-
-export default theme

package/src/components/form/Form.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { FormProps } from './Form.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<FormProps, InternalClasses> {}
-export interface FormTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<FormProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: '',
-  },
-}
-
-export default theme

package/src/components/helpers/InputError.tsx

@@ -1,14 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'InputError',
-  props: {
-    error: String,
-    helper: String,
-  },
-  setup(props) {
-    return () => props.error
-      ? <p class="text-sm text-red-500 dark:text-red-400 mt-1">{props.error}</p>
-      : props.helper ? <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{props.helper}</p> : ''
-  },
-})

package/src/components/image/Image.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ImageProps } from './Image.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<ImageProps, InternalClasses> {}
-export interface ImageTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ImageProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: '',
-  },
-}
-
-export default theme

package/src/components/menu/Menu.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { MenuProps } from './Menu.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<MenuProps, InternalClasses> {}
-export interface MenuTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<MenuProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: '',
-  },
-}
-
-export default theme

package/src/components/notifications/Notifications.theme.ts

@@ -1,21 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { NotificationsProps } from './Notifications.vue'
-
-type InternalClasses = 'wrapper' | 'list' | 'item'
-
-interface InternalTheme extends ThemeComponent<NotificationsProps, InternalClasses> {}
-export interface NotificationsTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<NotificationsProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen',
-
-    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
-
-    item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100',
-  },
-}
-
-export default theme

package/src/components/popover/Popover.theme.ts

@@ -1,19 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { PopoverProps } from './Popover.vue'
-
-type InternalClasses = 'wrapper' | 'content'
-
-interface InternalTheme extends ThemeComponent<PopoverProps, InternalClasses> {}
-export interface PopoverTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<PopoverProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-block relative',
-
-    content: 'max-w-xs',
-  },
-}
-
-export default theme

package/src/components/popover/PopoverContainer.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { PopoverContainerProps } from './PopoverContainer.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<PopoverContainerProps, InternalClasses> {}
-export interface PopoverContainerTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<PopoverContainerProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800',
-  },
-}
-
-export default theme

package/src/components/scroll/Scroll.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ScrollProps } from './Scroll.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<ScrollProps, InternalClasses> {}
-export interface ScrollTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ScrollProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: '',
-  },
-}
-
-export default theme

package/src/components/select/Select.theme.ts

@@ -1,68 +0,0 @@
-import type { Ref } from 'vue'
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { SelectProps } from './Select.vue'
-
-type InternalClasses = 'wrapper' | 'label' | 'box' | 'content' | 'iconWrapper' | 'icon'
-type InternalExtraData = {
-  errorInternal: Ref<boolean>;
-}
-
-interface InternalTheme extends ThemeComponent<SelectProps, InternalClasses, InternalExtraData> {}
-export interface SelectTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<SelectProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-block align-bottom text-left focus:outline-none',
-
-    label: ({ props }) => {
-      let c = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
-
-      if (props.size === 'xs') c += ' text-xs'
-      else if (props.size === 'sm') c += ' text-sm'
-      else if (props.size === 'lg') c += ' text-lg'
-      else if (props.size === 'xl') c += ' text-xl'
-
-      return c
-    },
-
-    box: ({ props, data }) => {
-      let c = 'w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm'
-
-      if (!data.errorInternal && !props.disabled) c += ' hover:border-gray-400 dark:hover:border-gray-500'
-
-      if (props.size === 'xs') c += ' px-2 py-1 text-xs'
-      else if (props.size === 'sm') c += ' px-2 py-2 text-sm'
-      else if (props.size === 'lg') c += ' px-4 py-3 text-lg'
-      else if (props.size === 'xl') c += ' px-5 py-4 text-xl'
-      else c += ' px-3 py-2'
-
-      c += props.disabled
-        ? ' bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
-        : ' bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200'
-
-      return c
-    },
-
-    content: 'py-1 max-h-72 overflow-scroll',
-
-    iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
-
-    icon: ({ props }) => {
-      if (props.size === 'sm' || props.size === 'xs') return 'h-3 w-3'
-      else if (props.size === 'lg') return 'h-6 w-6'
-      else if (props.size === 'xl') return 'h-7 w-7'
-
-      return 'h-5 w-5'
-    },
-  },
-
-  styles: ({ props, colors, css }) => {
-    const color = colors.getPalette('primary')
-
-    return css.get('border', color[500])
-  },
-}
-
-export default theme

package/src/components/skeleton/Skeleton.theme.ts

@@ -1,17 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { SkeletonProps } from './Skeleton.vue'
-
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<SkeletonProps, InternalClasses> {}
-export interface SkeletonTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<SkeletonProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md',
-  },
-}
-
-export default theme

package/src/components/slider/Slider.theme.ts

@@ -1,40 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { SliderProps } from './Slider.vue'
-
-type InternalClasses = 'wrapper' | 'label' | 'drag'
-
-interface InternalTheme extends ThemeComponent<SliderProps, InternalClasses> {}
-export interface SliderTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<SliderProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-block align-bottom text-left focus:outline-none',
-
-    label: ({ props }) => {
-      let c = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
-
-      if (props.size === 'xs') c += ' text-xs'
-      else if (props.size === 'sm') c += ' text-sm'
-      else if (props.size === 'lg') c += ' text-lg'
-      else if (props.size === 'xl') c += ' text-xl'
-
-      return c
-    },
-
-    drag: 'w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm',
-  },
-
-  styles: ({ props, colors, css }) => {
-    const primary = colors.getPalette('primary')
-    const color = colors.getPalette(props.color)
-
-    return css.variables({
-      bg: color[500],
-      border: primary[500],
-    })
-  },
-}
-
-export default theme

package/src/components/tab/Tab.theme.ts

@@ -1,34 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TabProps } from './Tab.vue'
-import type { TabGroupInjection } from './TabGroup.vue'
-
-type InternalClasses = 'wrapper' | 'label' | 'icon'
-type InternalExtraData = Pick<TabGroupInjection, 'state'>['state']
-
-interface InternalTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {}
-export interface TabTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TabProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props, data }) => {
-      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
-
-      if (data.variant === 'block') c.push('px-8')
-
-      if (props.size === 'xs') c.push('text-xs')
-      else if (props.size === 'sm') c.push('text-sm')
-      else if (props.size === 'lg') c.push('text-lg')
-      else if (props.size === 'xl') c.push('text-xl')
-
-      return c
-    },
-
-    label: '',
-
-    icon: 'mr-1.5',
-  },
-}
-
-export default theme

package/src/components/table/Table.theme.ts

@@ -1,29 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TableProps } from './Table.vue'
-
-type InternalClasses = 'wrapper' | 'loadingWrapper'
-
-interface InternalTheme extends ThemeComponent<TableProps, InternalClasses> {}
-export interface TableTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TableProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props, data }) => {
-      const c = ['w-full relative']
-
-      if (props.scrollable) c.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table')
-
-      if (props.stickyHeader) c.push('relative')
-
-      if (props.fixed) c.push('table-fixed')
-
-      return c
-    },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
-  },
-}
-
-export default theme

package/src/components/textarea/Textarea.theme.ts

@@ -1,50 +0,0 @@
-import type { Ref } from 'vue'
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TextareaProps } from './Textarea.vue'
-
-type InternalClasses = 'wrapper' | 'label' | 'input'
-type InternalExtraData = {
-  errorInternal: Ref<boolean>;
-}
-
-interface InternalTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {}
-export interface TextareaTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TextareaProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-block align-bottom text-left',
-
-    label: ({ props }) => {
-      const classes = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
-
-      if (props.size === 'xs') return classes + ' text-xs'
-      else if (props.size === 'sm') return classes + ' text-sm'
-      else if (props.size === 'lg') return classes + ' text-lg'
-      else if (props.size === 'xl') return classes + ' text-xl'
-
-      return classes //+ ' text-sm'
-    },
-
-    input: ({ props, data }) => {
-      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
-
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
-
-      if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
-      else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
-      else if (props.size === 'lg') classes.push('px-4 py-3 text-lg')
-      else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
-      else classes.push('px-3 py-2')
-
-      classes.push(props.disabled
-        ? 'bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
-        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
-
-      return classes
-    },
-  },
-}
-
-export default theme