@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/components/toggle/Toggle.vue

@@ -1,78 +1,66 @@
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
-import { useCSS } from '../../composables/css'
+export default { name: 'XToggle' }
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useTheme } from '../../composables/theme'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
 import { useInputtable } from '../../composables/inputtable'
 import { useInteractive } from '../../composables/interactive'
 
 import XSpinner from '../../components/spinner/Spinner.vue'
+import XInputError from '../helpers/InputError'
 
-export default defineComponent({
-  name: 'XToggle',
-
-  components: {
-    XSpinner,
-  },
-
-  validators: {
-    ...useCommon.validators(),
-  },
+import theme from './Toggle.theme'
 
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('primary'),
-    ...useInteractive.props(),
-    ...useInputtable.props(),
-    id: String,
-    label: String,
-    glow: Boolean,
-  },
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  id: String,
+  label: String,
+  helper: String,
+  glow: Boolean,
+})
 
-  emits: useInputtable.emits(false),
+const emit = defineEmits(useInputtable.emits(false))
 
-  setup(props, { emit }) {
-    const elRef = ref<HTMLElement>()
-    const checked = computed({
-      get(): boolean {
-        return !!props.modelValue
-      },
-      set(val: boolean) {
-        emit('update:modelValue', val)
-      },
-    })
+const elRef = ref<HTMLElement | null>(null)
 
-    const css = useCSS()
-    const colors = useColors()
+const checked = computed({
+  get(): boolean {
+    return !!props.modelValue
+  },
+  set(val: boolean) {
+    emit('update:modelValue', val)
+  },
+})
 
-    const styles = computed(() => {
-      const color = colors.getPalette(props.color)
+const { focus, blur } = useInteractive(elRef)
 
-      return css.variables({
-        bg: color[500],
-        dark: {
-          bg: color[600],
-        },
-      })
-    })
+const {
+  errorInternal,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false })
 
-    const interactive = useInteractive(elRef)
+const { styles, classes, className } = useTheme('toggle', theme, props)
 
-    return {
-      ...interactive,
-      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
-      elRef,
-      checked,
-      styles,
-    }
-  },
-})
+defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
   <label
     class="inline-block"
-    :class="[!disabled ? 'cursor-pointer' : 'cursor-not-allowed']"
+    :class="[
+      className,
+      classes.wrapper,
+      disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+    ]"
   >
     <div class="flex items-center">
       <div
@@ -82,20 +70,10 @@ export default defineComponent({
           [`shadow-lg shadow-${color}-500/50`]: glow && modelValue,
           'bg-gray-300 dark:bg-gray-500': !disabled && !checked && !loading,
           'bg-gray-100 dark:bg-gray-700': disabled || loading,
-          'bg-[color:var(--x-bg)]': !disabled && checked,
+          'bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]': !disabled && checked,
         }"
       >
-        <div
-          class="relative shrink-0"
-          :class="[
-            {
-              'w-6': size === 'sm' || size === 'xs',
-              'w-8': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
-              'w-10': size === 'lg',
-              'w-12': size === 'xl',
-            }
-          ]"
-        >
+        <div :class="classes.buttonWrapper">
           <input
             :id="id"
             ref="elRef"
@@ -110,35 +88,27 @@ export default defineComponent({
             :value="modelValue"
           />
           <div
-            class="rounded-full shadow transform transition duration-300 flex-shrink-0"
             :class="[
+              classes.button,
               {
-                'h-3 w-3': size === 'sm' || size === 'xs',
-                'h-4 w-4': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
-                'h-5 w-5': size === 'lg',
-                'h-6 w-6': size === 'xl',
                 'translate-x-full': checked,
-                'bg-gray-shadow-md': !disabled
+                'shadow': !disabled
               },
-              [disabled ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-800']
+              disabled ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-800'
             ]"
           ></div>
         </div>
       </div>
       <span
         v-if="label"
-        class="pl-2 font-medium text-gray-800 dark:text-gray-200"
-        :class="{
-          'text-xs': size === 'xs',
-          'text-sm': size === 'sm',
-          'text-lg': size === 'lg',
-          'text-xl': size === 'xl',
-        }"
+        class="ml-2"
+        :class="classes.label"
         v-text="label"
       >
       </span>
       <x-spinner v-if="loading" :size="size" class="ml-1" />
     </div>
-    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+
+    <x-input-error :error="errorInternal" :helper="helper"/>
   </label>
 </template>

package/src/components/toggle/__tests__/Toggle.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Toggle from '../Toggle.vue'
+
+describe('Toggle', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Toggle)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/tooltip/Tooltip.theme.ts

@@ -0,0 +1,51 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: '',
+
+    label: ({ props }: ThemeParams) => {
+      const c = 'font-medium text-gray-800 dark:text-gray-200'
+
+      if (props.size === 'xs') return c + ' text-xs'
+      else if (props.size === 'sm') return c + ' text-sm'
+      else if (props.size === 'lg') return c + ' text-lg'
+      else if (props.size === 'xl') return c + ' text-xl'
+
+      return c + ' text-sm'
+    },
+
+    buttonWrapper: ({ props }: ThemeParams) => {
+      let c = 'relative shrink-0'
+
+      if (props.size === 'sm' || props.size === 'xs') c += ' w-6'
+      else if (props.size === 'lg') c += ' w-10'
+      else if (props.size === 'xl') c += ' w-12'
+      else c += ' w-8'
+
+      return c
+    },
+
+    button: ({ props }: ThemeParams) => {
+      let c = 'rounded-full shadow transform transition duration-300 shrink-0'
+
+      if (props.size === 'sm' || props.size === 'xs') c += ' h-3 w-3'
+      else if (props.size === 'lg') c += ' h-5 w-5'
+      else if (props.size === 'xl') c += ' h-6 w-6'
+      else c += ' h-4 w-4'
+
+      return c
+    },
+  },
+
+  styles: ({ colors, props, css }: ThemeParams) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[500],
+      dark: {
+        bg: color[600],
+      },
+    })
+  },
+}

package/src/components/tooltip/Tooltip.vue

@@ -1,26 +1,21 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+export default { name: 'XTooltip' }
+</script>
 
+<script setup lang="ts">
 import XPopover from '../../components/popover/Popover.vue'
 import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
-
-export default defineComponent({
-  name: 'XTooltip',
-
-  components: {
-    XPopover,
-    XPopoverContainer,
-  },
-})
 </script>
 
 <template>
-  <x-popover hover class="dark">
+  <x-popover hover>
     <slot></slot>
     <template #content>
-      <x-popover-container class="p-2 text-white text-sm">
-        <slot name="tooltip"></slot>
-      </x-popover-container>
+      <div class="dark">
+        <x-popover-container class="p-2 text-white text-sm w-max max-w-xs">
+          <slot name="tooltip"></slot>
+        </x-popover-container>
+      </div>
     </template>
   </x-popover>
 </template>

package/src/components/tooltip/__tests__/Tooltip.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Tooltip from '../Tooltip.vue'
+
+describe('Tooltip', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Tooltip)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/composables/colors-utils.ts

@@ -34,81 +34,81 @@ export const shades: Tone[] = ['50', '100', '200', '300', '400', '500', '600', '
 export const indielayerColors = ['primary', 'secondary', 'success', 'warning', 'error']
 
 // calculate custom colors
-export function calculateColors(): ColorLibrary {
-  const cc = computedColors
-  const customColors: ColorLibrary = {}
-  const e = document.createElement('div')
+// export function calculateColors(): ColorLibrary {
+//   const cc = computedColors
+//   const customColors: ColorLibrary = {}
+//   const e = document.createElement('div')
 
-  document.body.appendChild(e)
+//   document.body.appendChild(e)
 
-  indielayerColors.forEach((color) => {
-    const c: ColorPalette = { ...tailwindColors.gray }
+//   indielayerColors.forEach((color) => {
+//     const c: ColorPalette = { ...tailwindColors.gray }
 
-    shades.forEach((shade) => {
-      e.className = `bg-${color}-${shade}`
-      c[shade] = window.getComputedStyle(e ,null).getPropertyValue('background-color')
-    })
+//     shades.forEach((shade) => {
+//       e.className = `bg-${color}-${shade}`
+//       c[shade] = window.getComputedStyle(e ,null).getPropertyValue('background-color')
+//     })
 
-    customColors[color] = c
-  })
+//     customColors[color] = c
+//   })
 
-  e.remove()
+//   e.remove()
 
-  return customColors
-}
+//   return customColors
+// }
 
-const computedColors = Object.freeze([
-  'bg-primary-50',
-  'bg-primary-100',
-  'bg-primary-200',
-  'bg-primary-300',
-  'bg-primary-400',
-  'bg-primary-500',
-  'bg-primary-600',
-  'bg-primary-700',
-  'bg-primary-800',
-  'bg-primary-900',
-  'bg-secondary-50',
-  'bg-secondary-100',
-  'bg-secondary-200',
-  'bg-secondary-300',
-  'bg-secondary-400',
-  'bg-secondary-500',
-  'bg-secondary-600',
-  'bg-secondary-700',
-  'bg-secondary-800',
-  'bg-secondary-900',
-  'bg-error-50',
-  'bg-error-100',
-  'bg-error-200',
-  'bg-error-300',
-  'bg-error-400',
-  'bg-error-500',
-  'bg-error-600',
-  'bg-error-700',
-  'bg-error-800',
-  'bg-error-900',
-  'bg-warning-50',
-  'bg-warning-100',
-  'bg-warning-200',
-  'bg-warning-300',
-  'bg-warning-400',
-  'bg-warning-500',
-  'bg-warning-600',
-  'bg-warning-700',
-  'bg-warning-800',
-  'bg-warning-900',
-  'bg-success-50',
-  'bg-success-100',
-  'bg-success-200',
-  'bg-success-300',
-  'bg-success-400',
-  'bg-success-500',
-  'bg-success-600',
-  'bg-success-700',
-  'bg-success-800',
-  'bg-success-900',
-])
+// const computedColors = Object.freeze([
+//   'bg-primary-50',
+//   'bg-primary-100',
+//   'bg-primary-200',
+//   'bg-primary-300',
+//   'bg-primary-400',
+//   'bg-primary-500',
+//   'bg-primary-600',
+//   'bg-primary-700',
+//   'bg-primary-800',
+//   'bg-primary-900',
+//   'bg-secondary-50',
+//   'bg-secondary-100',
+//   'bg-secondary-200',
+//   'bg-secondary-300',
+//   'bg-secondary-400',
+//   'bg-secondary-500',
+//   'bg-secondary-600',
+//   'bg-secondary-700',
+//   'bg-secondary-800',
+//   'bg-secondary-900',
+//   'bg-error-50',
+//   'bg-error-100',
+//   'bg-error-200',
+//   'bg-error-300',
+//   'bg-error-400',
+//   'bg-error-500',
+//   'bg-error-600',
+//   'bg-error-700',
+//   'bg-error-800',
+//   'bg-error-900',
+//   'bg-warning-50',
+//   'bg-warning-100',
+//   'bg-warning-200',
+//   'bg-warning-300',
+//   'bg-warning-400',
+//   'bg-warning-500',
+//   'bg-warning-600',
+//   'bg-warning-700',
+//   'bg-warning-800',
+//   'bg-warning-900',
+//   'bg-success-50',
+//   'bg-success-100',
+//   'bg-success-200',
+//   'bg-success-300',
+//   'bg-success-400',
+//   'bg-success-500',
+//   'bg-success-600',
+//   'bg-success-700',
+//   'bg-success-800',
+//   'bg-success-900',
+// ])
 
 export const tailwindColors: ColorLibrary = Object.freeze({
   slate: {

package/src/composables/colors.ts

@@ -1,5 +1,6 @@
-import { inject } from 'vue'
-import { injectColorsKey } from './keys'
+import * as R from 'ramda'
+import { computed, inject, unref } from 'vue'
+import { injectThemeKey } from './keys'
 import { isValidColor, tailwindColors, colorShade, setOpacity } from './colors-utils'
 
 export type Tone = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
@@ -19,6 +20,15 @@ export interface ColorPalette {
 
 export type ColorLibrary = Record<string, ColorPalette>
 
+export interface ColorsProps {
+  color?: string
+}
+
+export interface ColorComposition {
+  getPalette: (color: string)=> ColorPalette
+  getColorOpacity: (color: string, opacity: number)=> string
+}
+
 const colorCache: ColorLibrary = {}
 
 const defaultColors = {
@@ -29,20 +39,22 @@ const defaultColors = {
   error: tailwindColors.red,
 }
 
-export const useColors = () => {
-  const customColors = inject(injectColorsKey) || defaultColors
-  // if (Object.keys(customColors).length === 0) customColors = calculateColors()
+export const useColors = (): ColorComposition => {
+  const globalTheme = inject(injectThemeKey,  {})
+  const customColors = computed(() => R.mergeRight(defaultColors, unref(globalTheme).colors))
 
   const getTailwindColor = (color: string) => tailwindColors[color]
 
   const getColorOpacity = (color: string, opacity: number) => setOpacity(color, opacity)
 
   const getPalette = (color: string): ColorPalette => {
+    if (!color) return getTailwindColor('gray')
+
     const twColor = getTailwindColor(color)
 
     if (twColor) return twColor
     if (colorCache[color]) return colorCache[color]
-    if (customColors[color]) return customColors[color]
+    if (customColors.value[color]) return customColors.value[color]
 
     if (!isValidColor(color)) {
       console.warn(`Invalid color: ${color}`)

package/src/composables/common.ts

@@ -11,6 +11,7 @@ const validators = Object.freeze({
 useCommon.props = () => ({
   size: {
     type: String as PropType<Size>,
+    default: 'md',
     validator: (value: string) => validators.size.includes(value),
   },
 } as const)

package/src/composables/css.ts

@@ -4,12 +4,17 @@ const modifiers = ['hover', 'active', 'focus', 'visited']
 const isTheme = (theme: string) => themes.includes(theme)
 const isModifier = (modifier: string) => modifiers.includes(modifier)
 
-export const useCSS = (namespace?: string) => {
+export interface CSSComposition {
+  get: (name: string, value: string, theme?: string, modifier?: string)=> string
+  variable: (name: string, theme?: string, modifier?: string)=> string
+  variables: (object: Record<string, string | object>, theme?: string, modifier?: string)=> Record<string, string>
+}
 
+export const useCSS = (namespace?: string): CSSComposition => {
   const get = (name: string, value: string, theme?: string, modifier?: string) => `${variable(name,theme,modifier)}: ${value}`
 
   const variable = (name: string, theme?: string, modifier?: string) =>
-    `--x${theme ? `-${theme}` : ''}${namespace ? `-${namespace}` : ''}-${name}${modifier ? `-${modifier}` : ''}`
+    `--x${namespace ? `-${namespace}` : ''}${theme ? `-${theme}` : ''}-${name}${modifier ? `-${modifier}` : ''}`
 
   const variables = (object: Record<string, string | object>, theme?: string, modifier?: string) => {
     let styles: Record<string, string> = {}

package/src/composables/index.ts

@@ -4,4 +4,4 @@ export * from './colors'
 export * from './css'
 export * from './inputtable'
 export * from './interactive'
-export * from './notification'
+export * from './notifications'

package/src/composables/inputtable.ts

@@ -112,7 +112,7 @@ useInputtable.emits = (withListeners = true): string[] => {
 }
 
 useInputtable.props = () => ({
-  modelValue: [String, Number, Boolean, Object, Array] as PropType<[string, number, boolean, object, []]>,
+  modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
   name: String,
   readonly: Boolean,
   required: Boolean,

package/src/composables/interactive.ts

@@ -1,12 +1,16 @@
 import type { Ref } from 'vue'
 
+export interface InteractiveProps {
+  disabled?: boolean
+  loading?: boolean
+}
+
 export const useInteractive = (
-  el: Ref<HTMLElement | undefined>,
+  el: Ref<HTMLElement | null>,
 ) => {
   return {
-    focus: () => {
-      el.value?.focus?.()
-    },
+    focus: () => el.value?.focus?.(),
+    blur: () => el.value?.blur?.(),
   }
 }
 

package/src/composables/keys.ts

@@ -2,6 +2,7 @@ import type { InjectionKey } from 'vue'
 
 export const injectTabKey = Symbol() as InjectionKey<any>
 export const injectFormKey = Symbol() as InjectionKey<any>
+export const injectThemeKey = Symbol() as InjectionKey<any>
 export const injectIconsKey = Symbol() as InjectionKey<any>
 export const injectColorsKey = Symbol() as InjectionKey<any>
 export const injectButtonGroupKey = Symbol() as InjectionKey<any>

package/src/composables/notifications.ts

@@ -0,0 +1,10 @@
+import { inject } from 'vue'
+import { injectNotificationKey } from './keys'
+
+export const useNotifications = (key?: symbol | string) => {
+  const notifications = inject(key || injectNotificationKey)
+
+  if (!notifications) console.warn('useNotifications must have a parent wrapped with Notifications component')
+
+  return notifications
+}