@indielayer/ui 1.2.0 → 1.4.0

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/table/TableHead.tsx

@@ -1,14 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'XTableHead',
-  setup(props, { slots }) {
-    return () => (
-      <thead class="align-bottom">
-        <tr class="text-sm text-gray-600 dark:text-gray-400 border-b">
-          {slots.default?.()}
-        </tr>
-      </thead>
-    )
-  },
-})

package/src/components/tag/Tag.theme.ts

@@ -1,42 +0,0 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TagProps } from './Tag.vue'
-
-type InternalClasses = 'wrapper' | 'loadingWrapper'
-
-interface InternalTheme extends ThemeComponent<TagProps, InternalClasses> {}
-export interface TagTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TagProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
-  classes: {
-    wrapper: ({ props, data }) => {
-      let c = 'inline-flex items-center leading-none max-w-full'
-
-      if (props.size === 'xs') c += ' px-2 py-1 text-xs'
-      else if (props.size === 'sm') c += ' px-2 py-1 text-sm'
-      else if (props.size === 'lg') c += ' px-4 py-3 text-lg'
-      else if (props.size === 'xl') c += ' px-6 py-6 text-xl'
-      else c += ' px-3 py-2'
-
-      return c
-    },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
-  },
-
-  styles: ({ colors, props, css }) => {
-    const color = colors.getPalette(props.color)
-
-    return css.variables({
-      bg: color[100],
-      text: color[800],
-      border: color[800],
-      dark: {
-        text: props.outlined ? color[200] : color[800],
-      },
-    })
-  },
-}
-
-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