@personizely/ui 0.0.42

package/src/composables/delegated-props.ts

@@ -0,0 +1,6 @@
+import { type MaybeRefOrGetter, computed } from 'vue'
+import omit from 'lodash/omit'
+
+export function useDelegatedProps<T extends Record<string, any>> (props: MaybeRefOrGetter<T>, exclude: Array<string> = []) {
+  return computed(() => omit(props, exclude))
+}

package/src/composables/emits-as-props.ts

@@ -0,0 +1,17 @@
+import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
+
+export function useEmitAsProps<Name extends string> (emit: (name: Name, ...args: any[]) => void, exclude: Array<string> = []) {
+  const vm = getCurrentInstance()
+
+  const events = vm?.type.emits as Name[]
+  const result: Record<string, any> = {}
+
+  if (!events?.length) {
+    console.warn(`No emitted event found. Please check component: ${vm?.type.__name}`)
+  }
+
+  events?.filter(ev => !exclude.includes(ev)).forEach((ev) => {
+    result[toHandlerKey(camelize(ev))] = (...arg: any) => emit(ev, ...arg)
+  })
+  return result
+}

package/src/composables/forward-props-emits.ts

@@ -0,0 +1,11 @@
+import { type MaybeRefOrGetter, computed, toRef } from 'vue'
+import { useForwardProps } from 'reka-ui'
+
+export function useForwardPropsEmits<T extends Record<string, any>> (props: MaybeRefOrGetter<T>, emitProps: T) {
+  const parsedProps = toRef(useForwardProps(props))
+
+  return computed(() => ({
+    ...parsedProps.value,
+    ...emitProps
+  }))
+}

package/src/directives/autofocus.ts

@@ -0,0 +1,7 @@
+export default {
+  mounted (el: HTMLElement, { value }: { value: boolean }) {
+    if (value) {
+      requestAnimationFrame(() => el.focus())
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,159 @@
+import '@/assets/index.css'
+import type { App, Component } from 'vue'
+
+import { Accordion, AccordionItem } from '@/components/ui/accordion'
+import { Alert } from '@/components/ui/alert'
+import { Avatar } from '@/components/ui/avatar'
+import { AlertDialog, AlertDialogProvider, useAlertDialog } from '@/components/ui/alert-dialog'
+import { Autocomplete } from '@/components/ui/autocomplete'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { CheckboxGroup } from '@/components/ui/checkbox-group'
+import { Color, ColorPicker, Gradient, Checkboard } from '@/components/ui/color-picker'
+import { Combobox } from '@/components/ui/combobox'
+import { DatePicker } from '@/components/ui/date-picker'
+import { DateRangePicker } from '@/components/ui/date-range-picker'
+import { Dialog } from '@/components/ui/dialog'
+import { Drawer } from '@/components/ui/drawer'
+import { DropdownMenu, DropdownCheckboxGroupMenu, DropdownRadioGroupMenu, type MenuItem } from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import { FileUploadButton } from '@/components/ui/file-upload-button'
+import { Icon } from '@/components/ui/icon'
+import { Form, FormField } from '@/components/ui/form'
+import { Pagination } from '@/components/ui/pagination'
+import { Popover } from '@/components/ui/popover'
+import { Progress, ProgressIndicator } from '@/components/ui/progress'
+import { ProgressCircular } from '@/components/ui/progress-circular'
+import { RadioGroup } from '@/components/ui/radio-group'
+import { Select } from '@/components/ui/select'
+import { Slider } from '@/components/ui/slider'
+import { Switch } from '@/components/ui/switch'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
+import { Textarea } from '@/components/ui/textarea'
+import { Toaster, ToastAction, useToast } from '@/components/ui/toast'
+import { Toggle } from '@/components/ui/toggle'
+import { ToggleGroup } from '@/components/ui/toggle-group'
+import { Tooltip, TooltipProvider } from '@/components/ui/tooltip'
+import { type Options, setOptions } from './options-provider'
+import { type Option } from '@/utils/options'
+
+const components: { [key:string]: Component } = {
+  Accordion,
+  AccordionItem,
+  Alert,
+  Avatar,
+  AlertDialogProvider,
+  AlertDialog,
+  Autocomplete,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  CheckboxGroup,
+  Color,
+  ColorPicker,
+  Gradient,
+  Checkboard,
+  Combobox,
+  DatePicker,
+  DateRangePicker,
+  Dialog,
+  Drawer,
+  DropdownMenu,
+  DropdownCheckboxGroupMenu,
+  DropdownRadioGroupMenu,
+  Input,
+  Icon,
+  Form,
+  FormField,
+  FileUploadButton,
+  Pagination,
+  Popover,
+  Progress,
+  ProgressIndicator,
+  ProgressCircular,
+  RadioGroup,
+  Select,
+  Slider,
+  Switch,
+  Tabs,
+  TabsContent,
+  Textarea,
+  Toaster,
+  Toggle,
+  ToggleGroup,
+  TooltipProvider,
+  Tooltip
+}
+
+export function install (app: App, options: Options = {}) {
+  setOptions(options)
+
+  Object.keys(components).forEach((key) => {
+    const Component = components[key]
+    app.component(`Ui${key}`, Component)
+  })
+}
+
+export default {
+  install
+}
+
+export {
+  components,
+  useAlertDialog,
+  useToast,
+  Accordion,
+  AccordionItem,
+  Alert,
+  Avatar,
+  AlertDialog,
+  AlertDialogProvider,
+  Autocomplete,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  CheckboxGroup,
+  Color,
+  ColorPicker,
+  Combobox,
+  DatePicker,
+  DateRangePicker,
+  Dialog,
+  Drawer,
+  DropdownMenu,
+  DropdownCheckboxGroupMenu,
+  DropdownRadioGroupMenu,
+  Input,
+  Icon,
+  FileUploadButton,
+  Form,
+  FormField,
+  Pagination,
+  Popover,
+  Progress,
+  ProgressIndicator,
+  ProgressCircular,
+  RadioGroup,
+  Select,
+  Slider,
+  Switch,
+  Tabs,
+  TabsContent,
+  Textarea,
+  Toaster,
+  ToastAction,
+  Toggle,
+  ToggleGroup,
+  Tooltip,
+  TooltipProvider
+}
+
+export type {
+  Option,
+  Options,
+  MenuItem
+}

package/src/options-provider.ts

@@ -0,0 +1,19 @@
+type Options = { portalTo?: string | HTMLElement }
+
+const options: Options = {
+  portalTo: 'body'
+}
+
+const setOptions = (payload: Partial<Options>) => {
+  Object.assign(options, payload)
+}
+
+const getOptions = () => {
+  return options
+}
+
+export {
+  type Options,
+  setOptions,
+  getOptions
+}

package/src/utils/gradient.ts

@@ -0,0 +1,158 @@
+import chroma, { type InterpolationMode } from 'chroma-js'
+
+
+export type Point = { left: number, color: string }
+type Gradient = {
+  points: Point[],
+  angle: number,
+  type: string,
+  precision?: number,
+  interpolation?: InterpolationMode
+  xAxis?: string
+  yAxis?: string
+  shape?: string
+}
+
+const extractType = (definition: string) => {
+  const match = /(linear|radial|conic)/gm.exec(definition)
+  return (match && match[0]) || 'linear'
+}
+
+const extractAngle = (definition: string) => {
+  const match = /((?<angle>\d+)deg)/gis.exec(definition)
+
+  return (match && Number(match.groups!.angle)) || 0
+}
+
+const extractShape = (definition: string, type: string) => {
+  if (type !== 'radial') return 'circle'
+
+  const shape = /(ellipse|circle)/gm.exec(definition)
+  return (shape && shape[0]) || 'circle'
+}
+
+const extractAxis = (definition: string, type: string) => {
+  if (type === 'linear') return { xAxis: '50%', yAxis: '50%' }
+
+  const match = /at\s(\d+%)\s(\d+%),/gis.exec(definition)
+  return match
+    ? { xAxis: match[1], yAxis: match[2] }
+    : { xAxis: '50%', yAxis: '50%' }
+}
+
+const extractColors = (gradient: string) => {
+  const rgba = gradient.match(/(rgba?\(\s?\d+,\s+?\d+,\s+?\d+(,\s+?\d+\.?\d*)?\)\s\d+%)/gm)
+  const hsla = gradient.match(/(hsla?\(\s?\d+,\s+?\d+%,\s+?\d+%(,\s+?\d+\.?\d*)?\)\s\d+%)/gm)
+  const hex = gradient.match(/(#[a-fA-F\d+]{3,6}\s\d+%|#([A-Fa-f0-9]{4}){1,2}\s\d+%)/gm)
+
+  if (!rgba && !hex && !hsla) {
+    console.error('Extract error ', gradient, 'colors [', rgba, '], hex [', hex, '], hsla [', hsla, ']')
+    return []
+  }
+
+  return [...rgba || [], ...hex || [], ...hsla || []]
+    .reduce((buffer: Array<{ left: number, color: string }>, entry) => {
+      const regexp = entry.startsWith('#')
+        ? /(?<color>#[a-fA-F\d+]{3,6}|#([A-Fa-f0-9]{4}){1,2})\s(?<left>\d+)%/i
+        : /(?<color>rgba?\(\s?\d+,\s+?\d+,\s+?\d+(,\s+?\d+\.?\d*)?\)|hsla?\(\s?\d+,\s+?\d+%,\s+?\d+%(,\s+?\d+\.?\d*)?\))\s(?<left>\d+)%/i
+
+      const extracted = regexp.exec(entry)
+      if (extracted) {
+        const { color, left } = extracted.groups as { color: string, left: string }
+        if (color && left) {
+          buffer.push({
+            left: Number(left),
+            color
+          })
+        }
+      }
+      return buffer
+    }, [])
+}
+
+const sortPoints = (points: Point[]) => {
+  return [...points].sort((a, b) => a.left - b.left)
+}
+
+const spread = (arr: string[], from: number, to: number) => {
+  const result = []
+  for (let i = 0; i <= arr.length - 1; i++) {
+    result.push({
+      left: Math.floor(from + ((to - from) / (arr.length - 1) * i)),
+      color: arr[i]
+    })
+  }
+
+  return result
+}
+
+export const preparePoints = (points: Point[], interpolation: InterpolationMode, precision: number) => {
+  const result = []
+  points = sortPoints(points)
+  for (let i = 0; i <= points.length - 2; i++) {
+    const scale = spread(chroma
+      .scale([points[i].color, points[i + 1].color])
+      .mode(interpolation)
+      .colors(precision + 2), points[i].left, points[i + 1].left)
+
+    if (i !== 0) {
+      scale.splice(0, 1)
+    }
+
+    result.push(...scale)
+  }
+
+  return result
+}
+
+const toColor = (point: Point) => {
+  return `${point.color} ${point.left}%`
+}
+
+const toLinearGradient = (properties: Gradient) => {
+  const { angle = 0, points = [], interpolation = 'hsl', precision = 0 } = properties
+  return `linear-gradient(${angle}deg, ${preparePoints(points, interpolation, precision).map(point => toColor(point)).join(', ')})`
+}
+
+const toRadialGradient = (properties: Gradient) => {
+  const { shape = 'circle', xAxis = '50%', yAxis = '50%', points = [], interpolation = 'hsl', precision = 0 } = properties
+  return `radial-gradient(${shape} at ${xAxis} ${yAxis}, ${preparePoints(points, interpolation, precision).map(point => toColor(point)).join(', ')})`
+}
+
+const toConicGradient = (properties: Gradient) => {
+  const { angle = '0deg', xAxis = '50%', yAxis = '50%', points = [], interpolation = 'hsl', precision = 0 } = properties
+  return `conic-gradient(from ${angle}deg at ${xAxis} ${yAxis}, ${preparePoints(points, interpolation, precision).map(point => toColor(point)).join(', ')})`
+}
+
+export const parseGradient = (gradient: string) => {
+  const type = extractType(gradient)
+  const axis = extractAxis(gradient, type)
+
+  return {
+    ...axis,
+    angle: extractAngle(gradient),
+    shape: extractShape(gradient, type),
+    points: extractColors(gradient),
+    type
+  }
+}
+
+export const parse = (declaration: string) => {
+  const url = declaration.match(/url\("?(.*?)"?\)/m)
+  const image = url
+    ? url[1].trim()
+    : null
+
+  const gradient = declaration.replace(/,?(\s+)?url\(.*\)/gm, '')
+
+  return { image, gradient }
+}
+
+export const compile = ({ points, interpolation = 'hsl', precision = 0, type = 'linear', angle = 90 }: Gradient) => {
+  switch (type) {
+    case 'linear': return toLinearGradient({ points, interpolation, precision, type, angle })
+    case 'radial': return toRadialGradient({ points, interpolation, precision, type, angle })
+    case 'conic': return toConicGradient({ points, interpolation, precision, type, angle })
+    default: return ''
+  }
+}

package/src/utils/options.ts

@@ -0,0 +1,40 @@
+interface CustomOption {
+  [key:string]: any
+}
+
+interface Option extends CustomOption {
+  label: string
+  value: string | number | boolean | Record<string, any>
+  id?: any
+  help?: string
+  disabled?: boolean
+}
+
+interface Keys {
+  id: string
+  label: string
+  help: string
+  value: string
+  disabled: string
+}
+
+export function prepareOptions (options: (Option | CustomOption | string)[] | { [p: string]: string }, keys: Keys): (CustomOption | Option)[] {
+  if (Array.isArray(options)) {
+    return options.map(option => typeof option !== 'object'
+      ? { [keys.label]: option, [keys.value]: option }
+      : option)
+  }
+
+  if (typeof options === 'object') {
+    return Object.keys(options).map((value) => {
+      return {
+        label: options[value],
+        value
+      }
+    })
+  }
+
+  return []
+}
+
+export type { Option, Keys, CustomOption }

package/src/utils/tailwind.ts

@@ -0,0 +1,14 @@
+import { clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': ['text-2xs']
+    }
+  }
+})
+
+export function cn (...inputs: unknown[]) {
+  return twMerge(clsx(inputs))
+}