@saasmakers/ui 0.1.60 → 0.1.62

package/app/components/fields/FieldTextarea.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { FieldTextarea } from '../../types/fields'
+
+const props = withDefaults(defineProps<FieldTextarea>(), {
+  autofocus: false,
+  background: 'gray',
+  border: true,
+  description: '',
+  disabled: false,
+  fullWidth: true,
+  hideError: false,
+  label: '',
+  labelIcon: undefined,
+  loading: false,
+  modelValue: '',
+  padding: true,
+  placeholder: '',
+  required: false,
+  resize: false,
+  rows: 3,
+  size: 'base',
+  validation: undefined,
+})
+
+const emit = defineEmits<{
+  'blur': [event: FocusEvent, value: string]
+  'click': [event: MouseEvent, value: string]
+  'update:modelValue': [value: string]
+}>()
+
+const textarea = ref<HTMLTextAreaElement>()
+const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
+
+const { isDesktopBrowser } = useDevice()
+
+const value = computed({
+  get() {
+    return `${props.modelValue}`
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+onMounted(() => {
+  if (props.autofocus && textarea.value && isDesktopBrowser.value) {
+    textarea.value.focus()
+  }
+})
+
+function onFieldBlur(event: FocusEvent) {
+  const value = textarea.value?.value || ''
+
+  emit('blur', event, value)
+}
+
+function onFieldClick(event: MouseEvent) {
+  const value = textarea.value?.value || ''
+
+  emit('click', event, value)
+}
+
+function onFieldInput() {
+  const value = textarea.value?.value || ''
+
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col"
+    :class="{ 'w-full': fullWidth }"
+  >
+    <FieldLabel
+      v-if="label"
+      :disabled="disabled"
+      :for-field="uuid"
+      has-margin-bottom
+      :icon="labelIcon"
+      :label="label"
+      :required="required"
+      :size="size"
+    />
+
+    <textarea
+      :id="uuid"
+      ref="textarea"
+      v-model="value"
+      class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight uppercase outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400 focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100"
+      :class="{
+        'p-2.5': padding,
+        'p-0': !padding,
+        'resize-none': !resize,
+
+        'bg-gray-100 dark:bg-gray-900': background === 'gray',
+        'bg-white dark:bg-gray-900': background === 'white',
+
+        'border shadow-sm border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-400 dark:focus:border-gray-600': border,
+        'border-0': !border,
+
+        'text-xs': size === 'xs',
+        'text-sm': size === 'sm',
+        'text-base': size === 'base',
+        'text-lg': size === 'lg',
+      }"
+      data-enable-grammarly="false"
+      :placeholder="placeholder"
+      :rows="rows"
+      spellcheck="false"
+      @blur="onFieldBlur"
+      @click="onFieldClick"
+      @input="onFieldInput"
+    />
+
+    <FieldMessage
+      :description="description"
+      :hide-error="hideError"
+      :size="size"
+      :validation="validation"
+    />
+  </div>
+</template>

package/app/components/fields/FieldTime.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { FieldTime } from '../../types/fields'
+
+const props = withDefaults(defineProps<FieldTime>(), {
+  background: 'gray',
+  description: '',
+  disabled: false,
+  hideError: true,
+  icon: undefined,
+  id: undefined,
+  label: '',
+  labelIcon: undefined,
+  modelValue: '',
+  name: undefined,
+  required: false,
+  size: 'base',
+  validation: undefined,
+})
+
+const emit = defineEmits<{
+  'blur': [event: FocusEvent, value: string, name?: string]
+  'update:modelValue': [value: string, name?: string]
+}>()
+
+const root = ref<HTMLDivElement>()
+const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
+
+function onFieldBlur(event: FocusEvent) {
+  emit('blur', event, props.modelValue, props.name)
+}
+
+function onFieldInput() {
+  const value = root.value?.querySelector('input')?.value || ''
+
+  emit('update:modelValue', value, props.name)
+}
+</script>
+
+<template>
+  <div ref="root">
+    <FieldLabel
+      v-if="label"
+      :disabled="disabled"
+      :for-field="uuid"
+      has-margin-bottom
+      :icon="labelIcon"
+      :label="label"
+      :required="required"
+      :size="size"
+    />
+
+    <div class="item-center h-[42px] flex overflow-hidden border border-gray-200 rounded-lg pl-3 pr-2 dark:border-gray-800 focus-within:border-gray-400 hover:border-gray-300 dark:focus-within:border-gray-600 dark:hover:border-gray-700">
+      <input
+        :id="`${id}`"
+        class="text-sm outline-none"
+        :class="{
+          'bg-gray-100 dark:bg-gray-900': background === 'gray',
+          'bg-white dark:bg-gray-900': background === 'white',
+        }"
+        type="time"
+        @blur="onFieldBlur"
+        @input="onFieldInput"
+      >
+    </div>
+
+    <FieldMessage
+      :description="description"
+      :hide-error="hideError"
+      :size="size"
+      :validation="validation"
+    />
+  </div>
+</template>

package/app/composables/useDevice.ts

@@ -0,0 +1,11 @@
+export default function useDevice() {
+  const isDesktopBrowser = computed(() => {
+    if (typeof navigator === 'undefined') {
+      return true
+    }
+
+    return !navigator.userAgentData?.mobile
+  })
+
+  return { isDesktopBrowser }
+}

package/app/composables/useUtils.ts

@@ -1,5 +1,12 @@
 import numbroLib from 'numbro'
 
+export function normalizeText(text: string) {
+  return text
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036F]/g, '')
+}
+
 export function numbro(number: '∞' | number | undefined, format?: string) {
   if (!number && number !== 0) {
     return ''

package/app/types/fields.d.ts

@@ -0,0 +1,179 @@
+export type FieldBackground = 'gray' | 'white'
+
+export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
+
+export type FieldStatus = 'default' | 'error' | 'info' | 'success' | 'warning'
+
+export interface FieldCheckbox {
+  description?: BaseTextText
+  disabled?: boolean
+  fullWidth?: boolean
+  hideError?: boolean
+  label?: BaseTextText
+  labelIcon?: BaseIconValue
+  lineThrough?: boolean
+  loading?: boolean
+  modelValue?: boolean
+  required?: boolean
+  size?: FieldSize
+  truncate?: boolean
+  uppercase?: boolean
+  validation?: VuelidateValidation
+}
+
+export interface FieldDays {
+  modelValue?: number[]
+}
+
+export interface FieldEmojis {
+  modelValue?: string
+}
+
+export interface FieldInput {
+  alignment?: FieldInputAlignment
+  autocomplete?: boolean
+  autofocus?: boolean
+  background?: FieldBackground
+  border?: FieldInputBorder
+  description?: BaseTextText
+  disabled?: boolean
+  fullWidth?: boolean
+  hideError?: boolean
+  label?: BaseTextText
+  labelIcon?: BaseIconValue
+  lineThrough?: boolean
+  loading?: boolean
+  lowercaseOnly?: boolean
+  max?: number
+  min?: number
+  modelValue?: number | string
+  placeholder?: string
+  required?: boolean
+  size?: FieldSize
+  type?: FieldInputType
+  uppercase?: boolean
+  validation?: VuelidateValidation
+}
+
+export type FieldInputAlignment = 'center' | 'left' | 'right'
+
+export type FieldInputBorder = 'bottom' | 'full' | 'none'
+
+export type FieldInputType = 'currency' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week'
+
+export interface FieldLabel {
+  disabled?: boolean
+  forField?: string
+  hasMarginBottom?: boolean
+  hasMarginLeft?: boolean
+  icon?: BaseIconValue
+  label: BaseTextText
+  lineThrough?: boolean
+  loading?: boolean
+  required?: boolean
+  size?: FieldSize
+  truncate?: boolean
+}
+
+export interface FieldMessage {
+  description?: BaseTextText
+  hideError?: boolean
+  size?: FieldSize
+  validation?: VuelidateValidation
+}
+
+export interface FieldSelect {
+  border?: FieldSelectBorder
+  caret?: boolean
+  columns?: FieldSelectColumn[]
+  description?: BaseTextText
+  direction?: FieldSelectDirection
+  disabled?: boolean
+  hideError?: boolean
+  label?: BaseTextText
+  labelIcon?: BaseIconValue
+  maxHeight?: FieldSelectMaxHeight
+  modelValue?: number | string
+  openOnHover?: boolean
+  options?: FieldSelectOption[]
+  padding?: boolean
+  placeholder?: string
+  required?: boolean
+  size?: FieldSize
+  validation?: VuelidateValidation
+}
+
+export interface FieldSelectColumn {
+  options: FieldSelectOption[]
+  title?: string
+}
+
+export interface FieldSelectOption {
+  icon?: BaseIconValue
+  text: string
+  value: number | string
+}
+
+export type FieldSelectBorder = 'bottom' | 'full' | 'none'
+
+export type FieldSelectDirection = 'bottom' | 'top'
+
+export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
+
+export interface FieldTabs {
+  minimizeOnMobile?: boolean
+  modelValue?: Array<number | string> | number | string
+  multiple?: boolean
+  size?: FieldSize
+  tabs: FieldTabsTab[]
+  theme?: FieldTabsTheme
+}
+
+export interface FieldTabsTab {
+  activeColor?: BaseColor
+  icon?: BaseIconValue
+  label: string
+  to?: RouteLocationNamedI18n
+  value: number | string
+}
+
+export type FieldTabsAction = 'added' | 'removed'
+
+export type FieldTabsTheme = 'border' | 'rounded'
+
+export interface FieldTextarea {
+  autofocus?: boolean
+  background?: FieldBackground
+  border?: boolean
+  description?: BaseTextText
+  disabled?: boolean
+  fullWidth?: boolean
+  hideError?: boolean
+  label?: BaseTextText
+  labelIcon?: BaseIconValue
+  loading?: boolean
+  modelValue?: string
+  padding?: boolean
+  placeholder?: string
+  required?: boolean
+  resize?: boolean
+  rows?: number
+  size?: FieldSize
+  validation?: VuelidateValidation
+}
+
+export interface FieldTime {
+  background?: FieldBackground
+  description?: BaseTextText
+  disabled?: boolean
+  hideError?: boolean
+  icon?: BaseIconValue
+  id: number | string
+  label?: BaseTextText
+  labelIcon?: BaseIconValue
+  modelValue?: string
+  name?: string
+  required?: boolean
+  size?: FieldSize
+  validation?: VuelidateValidation
+}

package/app/types/global.d.ts

@@ -1,4 +1,5 @@
 import type * as Bases from './bases'
+import type * as Fields from './fields'
 
 declare global {
   // Libraries
@@ -7,23 +8,26 @@ declare global {
   type ChartistOptions = import('chartist').Options
   type ChartistPieChartData = import('chartist').PieChartData
   type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
+  type VuelidateValidation = import('@vuelidate/core').BaseValidation
 
   // Bases
+  type BaseBackground = Bases.BaseBackground
+  type BaseColor = Bases.BaseColor
+  type BaseSize = Bases.BaseSize
+  type BaseStatus = Bases.BaseStatus
   type BaseAlert = Bases.BaseAlert
   type BaseAvatar = Bases.BaseAvatar
-  type BaseBackground = Bases.BaseBackground
-  type BaseBordered = Bases.BaseBordered
   type BaseBorderedColor = Bases.BaseBorderedColor
   type BaseButton = Bases.BaseButton
   type BaseButtonRounded = Bases.BaseButtonRounded
   type BaseButtonSize = Bases.BaseButtonSize
   type BaseButtonType = Bases.BaseButtonType
+  type BaseBordered = Bases.BaseBordered
   type BaseCharacter = Bases.BaseCharacter
   type BaseCharacterCharacter = Bases.BaseCharacterCharacter
   type BaseCharacterSize = Bases.BaseCharacterSize
   type BaseChart = Bases.BaseChart
   type BaseChartType = Bases.BaseChartType
-  type BaseColor = Bases.BaseColor
   type BaseDivider = Bases.BaseDivider
   type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
   type BaseDividerSize = Bases.BaseDividerSize
@@ -44,17 +48,54 @@ declare global {
   type BaseParagraph = Bases.BaseParagraph
   type BaseParagraphAlignment = Bases.BaseParagraphAlignment
   type BaseParagraphSize = Bases.BaseParagraphSize
+  type BasePower = Bases.BasePower
+  type BasePowerPower = Bases.BasePowerPower
+  type BasePowerSize = Bases.BasePowerSize
   type BaseQuote = Bases.BaseQuote
   type BaseQuoteBackground = Bases.BaseQuoteBackground
   type BaseQuoteSize = Bases.BaseQuoteSize
-  type BaseSize = Bases.BaseSize
   type BaseSpinner = Bases.BaseSpinner
-  type BaseStatus = Bases.BaseStatus
+  type BaseTag = Bases.BaseTag
+  type BaseTagSize = Bases.BaseTagSize
+  type BaseTags = Bases.BaseTags
   type BaseText = Bases.BaseText
   type BaseTextText = Bases.BaseTextText
   type BaseToast = Bases.BaseToast
-  type BaseToasts = Bases.BaseToasts
-  type BaseToastsAlignment = Bases.BaseToastsAlignment
+
+  // Fields
+  type FieldBackground = Fields.FieldBackground
+  type FieldSize = Fields.FieldSize
+  type FieldStatus = Fields.FieldStatus
+  type FieldCheckbox = Fields.FieldCheckbox
+  type FieldDays = Fields.FieldDays
+  type FieldEmojis = Fields.FieldEmojis
+  type FieldInput = Fields.FieldInput
+  type FieldInputAlignment = Fields.FieldInputAlignment
+  type FieldInputBorder = Fields.FieldInputBorder
+  type FieldInputType = Fields.FieldInputType
+  type FieldLabel = Fields.FieldLabel
+  type FieldMessage = Fields.FieldMessage
+  type FieldSelect = Fields.FieldSelect
+  type FieldSelectColumn = Fields.FieldSelectColumn
+  type FieldSelectOption = Fields.FieldSelectOption
+  type FieldSelectBorder = Fields.FieldSelectBorder
+  type FieldSelectDirection = Fields.FieldSelectDirection
+  type FieldSelectMaxHeight = Fields.FieldSelectMaxHeight
+  type FieldTabs = Fields.FieldTabs
+  type FieldTabsTab = Fields.FieldTabsTab
+  type FieldTabsAction = Fields.FieldTabsAction
+  type FieldTabsTheme = Fields.FieldTabsTheme
+  type FieldTextarea = Fields.FieldTextarea
+  type FieldTime = Fields.FieldTime
+
+  // Navigator
+  interface Navigator {
+    userAgentData?: {
+      brands?: Array<{ brand: string, version: string }>
+      mobile?: boolean
+      platform?: string
+    }
+  }
 }
 
 export * from './bases'

package/nuxt.config.ts

@@ -21,6 +21,10 @@ export default defineNuxtConfig({
       path: 'components/bases',
       pathPrefix: false,
     },
+    {
+      path: 'components/fields',
+      pathPrefix: false,
+    },
     {
       path: 'components/layout',
       pathPrefix: false,
@@ -35,14 +39,15 @@ export default defineNuxtConfig({
   ],
 
   modules: [
+    '@nuxt/icon',
     '@nuxtjs/color-mode',
     '@nuxtjs/i18n',
-    '@nuxt/icon',
-    '@pinia/nuxt',
-    '@unocss/nuxt',
     '@nuxtjs/plausible',
     '@nuxtjs/robots',
     '@nuxtjs/sitemap',
+    '@pinia/nuxt',
+    '@unocss/nuxt',
+    '@vueuse/nuxt',
     'floating-vue/nuxt',
     'motion-v/nuxt',
   ],
@@ -75,7 +80,6 @@ export default defineNuxtConfig({
   plausible: {
     apiHost: 'https://plausible.saasmakers.dev',
     autoOutboundTracking: true,
-    domain: 'resilience.club',
     ignoreSubDomains: true,
     proxy: true,
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.60",
+  "version": "0.1.62",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -39,8 +39,14 @@
     "@nuxtjs/robots": "5.5.6",
     "@nuxtjs/sitemap": "7.4.7",
     "@pinia/nuxt": "0.11.2",
+    "@saasmakers/shared": "workspace:*",
     "@unocss/nuxt": "66.5.4",
     "@unocss/reset": "66.5.10",
+    "@vuelidate/core": "2.0.3",
+    "@vuelidate/validators": "2.0.4",
+    "@vueuse/components": "14.0.0",
+    "@vueuse/core": "14.1.0",
+    "@vueuse/nuxt": "14.0.0",
     "chartist": "1.5.0",
     "floating-vue": "5.2.2",
     "lottie-web": "5.13.0",