@indielayer/ui 0.2.3 → 1.0.0-alpha.2

package/src/composables/colors-utils.ts

@@ -0,0 +1,378 @@
+import type { Tone, ColorLibrary, ColorPalette } from './colors'
+
+const isHex = (hex: string) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(hex)
+const isRGB = (rgb: string) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(rgb)
+const isRGBA = (rgba: string) => /^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.test(rgba)
+const parseRGB = (rgb: string) => rgb.match(/(?<=\().+?(?=\))/g)?.[0].split(',')
+const hexToRGB = (hex: string) => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
+  .substring(1).match(/.{2}/g)
+  ?.map((x) => parseInt(x, 16))
+
+export const setOpacity = (color: string, opacity: number) => {
+  const [r, g, b] = (isHex(color) ? hexToRGB(color) : parseRGB(color)) ?? [0,0,0]
+
+  return 'rgba' + '(' + r + ',' + g + ',' + b + ',' + opacity + ')'
+}
+
+export const isValidColor = (color: string) => isHex(color) || isRGB(color) || isRGBA(color)
+
+export const colorShade = (color: string, percentage: number) => {
+  const lighten = percentage < 0
+  const base = lighten ? 1 + percentage : 1 - percentage
+  const shade = lighten ? 0 : percentage * 255 ** 2
+  const calcPrimary = (p: string | number) => Math.round((base * Math.floor(Number(p)) ** 2 + shade) ** 0.5)
+
+  const [r, g, b, a] = (isHex(color) ? hexToRGB(color) : parseRGB(color)) ?? [0,0,0]
+  const red = calcPrimary(r)
+  const green = calcPrimary(g)
+  const blue = calcPrimary(b)
+
+  return 'rgb' + (a ? 'a(' : '(') + red + ',' + green + ',' + blue + (a ? ',' + a : ')')
+}
+
+export const shades: Tone[] = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
+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')
+
+  document.body.appendChild(e)
+
+  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')
+    })
+
+    customColors[color] = c
+  })
+
+  e.remove()
+
+  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',
+])
+
+export const tailwindColors: ColorLibrary = Object.freeze({
+  slate: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+  },
+  gray: {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    300: '#d1d5db',
+    400: '#9ca3af',
+    500: '#6b7280',
+    600: '#4b5563',
+    700: '#374151',
+    800: '#1f2937',
+    900: '#111827',
+  },
+  zinc: {
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+  },
+  neutral: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+  },
+  stone: {
+    50: '#fafaf9',
+    100: '#f5f5f4',
+    200: '#e7e5e4',
+    300: '#d6d3d1',
+    400: '#a8a29e',
+    500: '#78716c',
+    600: '#57534e',
+    700: '#44403c',
+    800: '#292524',
+    900: '#1c1917',
+  },
+  red: {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+  },
+  orange: {
+    50: '#fff7ed',
+    100: '#ffedd5',
+    200: '#fed7aa',
+    300: '#fdba74',
+    400: '#fb923c',
+    500: '#f97316',
+    600: '#ea580c',
+    700: '#c2410c',
+    800: '#9a3412',
+    900: '#7c2d12',
+  },
+  amber: {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    200: '#fde68a',
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+    800: '#92400e',
+    900: '#78350f',
+  },
+  yellow: {
+    50: '#fefce8',
+    100: '#fef9c3',
+    200: '#fef08a',
+    300: '#fde047',
+    400: '#facc15',
+    500: '#eab308',
+    600: '#ca8a04',
+    700: '#a16207',
+    800: '#854d0e',
+    900: '#713f12',
+  },
+  lime: {
+    50: '#f7fee7',
+    100: '#ecfccb',
+    200: '#d9f99d',
+    300: '#bef264',
+    400: '#a3e635',
+    500: '#84cc16',
+    600: '#65a30d',
+    700: '#4d7c0f',
+    800: '#3f6212',
+    900: '#365314',
+  },
+  green: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+  },
+  emerald: {
+    50: '#ecfdf5',
+    100: '#d1fae5',
+    200: '#a7f3d0',
+    300: '#6ee7b7',
+    400: '#34d399',
+    500: '#10b981',
+    600: '#059669',
+    700: '#047857',
+    800: '#065f46',
+    900: '#064e3b',
+  },
+  teal: {
+    50: '#f0fdfa',
+    100: '#ccfbf1',
+    200: '#99f6e4',
+    300: '#5eead4',
+    400: '#2dd4bf',
+    500: '#14b8a6',
+    600: '#0d9488',
+    700: '#0f766e',
+    800: '#115e59',
+    900: '#134e4a',
+  },
+  cyan: {
+    50: '#ecfeff',
+    100: '#cffafe',
+    200: '#a5f3fc',
+    300: '#67e8f9',
+    400: '#22d3ee',
+    500: '#06b6d4',
+    600: '#0891b2',
+    700: '#0e7490',
+    800: '#155e75',
+    900: '#164e63',
+  },
+  sky: {
+    50: '#f0f9ff',
+    100: '#e0f2fe',
+    200: '#bae6fd',
+    300: '#7dd3fc',
+    400: '#38bdf8',
+    500: '#0ea5e9',
+    600: '#0284c7',
+    700: '#0369a1',
+    800: '#075985',
+    900: '#0c4a6e',
+  },
+  blue: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+  },
+  indigo: {
+    50: '#eef2ff',
+    100: '#e0e7ff',
+    200: '#c7d2fe',
+    300: '#a5b4fc',
+    400: '#818cf8',
+    500: '#6366f1',
+    600: '#4f46e5',
+    700: '#4338ca',
+    800: '#3730a3',
+    900: '#312e81',
+  },
+  violet: {
+    50: '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    300: '#c4b5fd',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    800: '#5b21b6',
+    900: '#4c1d95',
+  },
+  purple: {
+    50: '#faf5ff',
+    100: '#f3e8ff',
+    200: '#e9d5ff',
+    300: '#d8b4fe',
+    400: '#c084fc',
+    500: '#a855f7',
+    600: '#9333ea',
+    700: '#7e22ce',
+    800: '#6b21a8',
+    900: '#581c87',
+  },
+  fuchsia: {
+    50: '#fdf4ff',
+    100: '#fae8ff',
+    200: '#f5d0fe',
+    300: '#f0abfc',
+    400: '#e879f9',
+    500: '#d946ef',
+    600: '#c026d3',
+    700: '#a21caf',
+    800: '#86198f',
+    900: '#701a75',
+  },
+  pink: {
+    50: '#fdf2f8',
+    100: '#fce7f3',
+    200: '#fbcfe8',
+    300: '#f9a8d4',
+    400: '#f472b6',
+    500: '#ec4899',
+    600: '#db2777',
+    700: '#be185d',
+    800: '#9d174d',
+    900: '#831843',
+  },
+  rose: {
+    50: '#fff1f2',
+    100: '#ffe4e6',
+    200: '#fecdd3',
+    300: '#fda4af',
+    400: '#fb7185',
+    500: '#f43f5e',
+    600: '#e11d48',
+    700: '#be123c',
+    800: '#9f1239',
+    900: '#881337',
+  },
+})

package/src/composables/colors.ts

@@ -0,0 +1,82 @@
+import { inject } from 'vue'
+import { injectColorsKey } from './keys'
+import { isValidColor, tailwindColors, colorShade, setOpacity } from './colors-utils'
+
+export type Tone = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
+
+export interface ColorPalette {
+  50: string
+  100: string
+  200: string
+  300: string
+  400: string
+  500: string
+  600: string
+  700: string
+  800: string
+  900: string
+}
+
+export type ColorLibrary = Record<string, ColorPalette>
+
+const colorCache: ColorLibrary = {}
+
+const defaultColors = {
+  primary: tailwindColors.sky,
+  secondary: tailwindColors.slate,
+  success: tailwindColors.green,
+  warning: tailwindColors.yellow,
+  error: tailwindColors.red,
+}
+
+export const useColors = () => {
+  const customColors = inject(injectColorsKey) || defaultColors
+  // if (Object.keys(customColors).length === 0) customColors = calculateColors()
+
+  const getTailwindColor = (color: string) => tailwindColors[color]
+
+  const getColorOpacity = (color: string, opacity: number) => setOpacity(color, opacity)
+
+  const getPalette = (color: string): ColorPalette => {
+    const twColor = getTailwindColor(color)
+
+    if (twColor) return twColor
+    if (colorCache[color]) return colorCache[color]
+    if (customColors[color]) return customColors[color]
+
+    if (!isValidColor(color)) {
+      console.warn(`Invalid color: ${color}`)
+
+      return getTailwindColor('gray')
+    }
+
+    const palette = {
+      50: colorShade(color, 0.9),
+      100: colorShade(color, 0.8),
+      200: colorShade(color, 0.6),
+      300: colorShade(color, 0.4),
+      400: colorShade(color, 0.1),
+      500: color,
+      600: colorShade(color, -0.1),
+      700: colorShade(color, -0.25),
+      800: colorShade(color, -0.58),
+      900: colorShade(color, -0.7),
+    }
+
+    colorCache[color] = palette
+
+    return palette
+  }
+
+  return {
+    getPalette,
+    getColorOpacity,
+  }
+}
+
+useColors.props = (defaultColor?: string) => ({
+  color: {
+    type: String,
+    default: defaultColor,
+  },
+} as const)

package/src/composables/common.ts

@@ -0,0 +1,20 @@
+import type { PropType } from 'vue'
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
+
+export const useCommon = () => {}
+
+const validators = Object.freeze({
+  size: ['xs', 'sm', 'md', 'lg', 'xl'],
+})
+
+useCommon.props = () => ({
+  size: {
+    type: String as PropType<Size>,
+    validator: (value: string) => validators.size.includes(value),
+  },
+} as const)
+
+useCommon.validators = () => ({
+  ...validators,
+})

package/src/composables/css.ts

@@ -0,0 +1,45 @@
+const themes = ['dark']
+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) => {
+
+  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}` : ''}`
+
+  const variables = (object: Record<string, string | object>, theme?: string, modifier?: string) => {
+    let styles: Record<string, string> = {}
+
+    for (const key in object) {
+      const keyValue = object[key]
+
+      if (!keyValue) break
+
+      if (isTheme(key)) {
+        styles = {
+          ...styles,
+          ...variables(<any>keyValue, key, modifier),
+        }
+      } else if (isModifier(key)) {
+        styles = {
+          ...styles,
+          ...variables(<any>keyValue, theme, key),
+        }
+      } else {
+        styles[variable(key, theme, modifier)] = <string>keyValue
+      }
+    }
+
+    return styles
+  }
+
+  return {
+    get,
+    variable,
+    variables,
+  }
+}

package/src/composables/index.ts

@@ -0,0 +1,7 @@
+export * from './keys'
+export * from './common'
+export * from './colors'
+export * from './css'
+export * from './inputtable'
+export * from './interactive'
+export * from './notification'

package/src/composables/{inputtable.js → inputtable.ts}

@@ -1,59 +1,14 @@
+import type { Ref, PropType } from 'vue'
 import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
-import {
-  withValidator as withInteractiveValidator,
-  withProps as withInteractiveProps,
-  useInteractive,
-} from './interactive'
-
-const validator = {
-  ...withInteractiveValidator(),
-}
-
-export const withProps = () => ({
-  ...withInteractiveProps(),
-  name: {
-    type: String,
-    default: null,
-  },
-  modelValue: {
-    type: [String, Number, Boolean, Function, Object, Array],
-    default: null,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  validateOnInput: {
-    type: Boolean,
-    default: true,
-  },
-  error: {
-    type: String,
-    default: '',
-  },
-  rules: {
-    type: Array,
-    default: () => [],
-  },
-})
-
-export const withValidator = () => validator
+import { injectFormKey } from './keys'
 
-export const withEmits = (useListeners = true) => {
-  const emits = ['update:modelValue']
-
-  if (!useListeners) return emits
-
-  return emits.concat(['blur', 'focus', 'input', 'change'])
+export interface XFormInputMethods {
+  focus: ()=> void,
+  validate: (val: any)=> boolean,
+  setError: (val: string)=> void
 }
 
-export const useInputtable = (props, { attrs, emit, useListeners = true } = {}) => {
-  const interactive = useInteractive()
-
+export const useInputtable = (props: any, { focus, emit, withListeners = true }: { focus: ()=> void, emit: any, withListeners?: boolean }) => {
   const isFirstValidation = ref(true)
   const errorInternal = ref(props.error)
 
@@ -63,9 +18,10 @@ export const useInputtable = (props, { attrs, emit, useListeners = true } = {})
   watch(() => props.error, (val) => { errorInternal.value = val })
   watch(() => props.name, (val) => { if (val) nameInternal.value = val })
 
-  const form = inject('form', {
-    registerInput: () => {},
-    unregisterInput: () => {},
+  const form = inject(injectFormKey, {
+    registerInput: (inputName: string, methods: XFormInputMethods) => {},
+    unregisterInput: (inputName: string) => {},
+    isInsideForm: false,
   })
 
   const reset = () => {
@@ -74,11 +30,11 @@ export const useInputtable = (props, { attrs, emit, useListeners = true } = {})
     emit('update:modelValue', '')
   }
 
-  const setError = (val) => {
+  const setError = (val: string) => {
     errorInternal.value = val
   }
 
-  const validate = (val) => {
+  const validate = (val: any): boolean => {
     val = val || props.modelValue
 
     isFirstValidation.value = false
@@ -118,21 +74,20 @@ export const useInputtable = (props, { attrs, emit, useListeners = true } = {})
     return true
   }
 
-  const inputListeners = useListeners ? computed(() => {
+  const inputListeners = withListeners ? computed(() => {
     return {
-      attrs,
-      blur: (event) => emit('blur', event),
-      focus: (event) => emit('focus', event),
-      input: (event) => {
-        if (props.validateOnInput && !isFirstValidation.value) validate(event.target.value)
-        emit('update:modelValue', event.target.value)
+      blur: (event: Event) => emit('blur', event),
+      focus: (event: Event) => emit('focus', event),
+      input: (event: Event) => {
+        if (props.validateOnInput && !isFirstValidation.value) validate((event.target as HTMLInputElement).value)
+        emit('update:modelValue', (event.target as HTMLInputElement).value)
       },
-      change: (event) => emit('change', event),
+      change: (event: Event) => emit('change', event),
     }
-  }) : ref({})
+  }) : {}
 
   onMounted(() => {
-    form.registerInput(nameInternal.value, { focus: interactive.focus, validate, setError })
+    form.registerInput(nameInternal.value, focus, validate, setError)
   })
 
   onUnmounted(() => {
@@ -140,18 +95,34 @@ export const useInputtable = (props, { attrs, emit, useListeners = true } = {})
   })
 
   return {
-    ...interactive,
-
-    // data
     isFirstValidation,
     errorInternal,
-
-    // computed
+    isInsideForm: form.isInsideForm,
     inputListeners,
-
-    // methods
     reset,
     validate,
     setError,
   }
 }
+
+useInputtable.emits = (withListeners = true): string[] => {
+  return withListeners ?
+    ['update:modelValue', 'blur', 'focus', 'input', 'change'] :
+    ['update:modelValue']
+}
+
+useInputtable.props = () => ({
+  modelValue: [String, Number, Boolean, Object, Array] as PropType<[string, number, boolean, object, []]>,
+  name: String,
+  readonly: Boolean,
+  required: Boolean,
+  validateOnInput: {
+    type: Boolean,
+    default: true,
+  },
+  error: String,
+  rules: {
+    type: Array,
+    default: () => [],
+  },
+} as const)