@indielayer/ui 1.3.0 → 1.4.0

package/src/components/modal/Modal.vue

@@ -3,18 +3,49 @@ const modalSize = ['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const
 const modalProps = {
   size: {
     type: String as PropType<ModalSize>,
-    default: 'md',
+    default: 'xl',
   },
   modelValue: Boolean,
   showClose: Boolean,
   backdrop: Boolean,
+  hasActions: {
+    type: Boolean,
+    default: true,
+  },
+  hasHeader: {
+    type: Boolean,
+    default: true,
+  },
+  title: String,
+  description: String,
+  label: String,
+  loading: Boolean,
+  loadingText: String,
+  fluid: Boolean,
+
+  // form props
+  isForm: Boolean,
+  formDisabled: Boolean,
+  formDescription: String,
+  formTitle: String,
+  formAutoValidate: {
+    type: Boolean,
+    default: true,
+  },
+  formErrors: {
+    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    default: () => ([]),
+  },
 }
 
 export type ModalSize = typeof modalSize[number]
 export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
 
-type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions'
-export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses> {}
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label'
+type InternaData = {
+  visible: boolean;
+}
+export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses, InternaData> {}
 
 export default {
   name: 'XModal',
@@ -25,21 +56,27 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { ref, watch, type PropType, type ExtractPublicPropTypes, computed, nextTick, onMounted } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useFocusTrap } from '../../composables/useFocusTrap'
 import { closeIcon } from '../../common/icons'
 
-import XScroll from '../../components/scroll/Scroll.vue'
-import XIcon from '../icon/Icon.vue'
+import XButton from '../button/Button.vue'
+import XScroll from '../scroll/Scroll.vue'
+import XForm, { type FormError } from '../form/Form.vue'
+import { useSlots } from 'vue'
 
 const props = defineProps(modalProps)
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'submit'])
 
 const value = ref(props.modelValue)
 const visible = ref(false)
 const modalRef = ref<HTMLElement | null>(null)
+const modalWrapperRef = ref<HTMLElement | null>(null)
+
+const { initFocusTrap, clearFocusTrap } = useFocusTrap()
 
 let stopClickOutside: undefined | (() => void) = undefined
 
@@ -56,21 +93,29 @@ watch(value, (val) => {
   }
 })
 
-watch(() => props.modelValue, (val) => {
+watch(() => props.modelValue, checkVisibiliy, { immediate: true })
+
+async function checkVisibiliy() {
+  const val = props.modelValue
+
   if (val) {
     value.value = val
 
-    setTimeout(() => {
-      visible.value = val
-    })
-  } else {
+    await nextTick()
+
     visible.value = val
 
-    setTimeout(() => {
-      value.value = val
-    }, 150)
+    await nextTick()
+
+    initFocusTrap(modalRef)
+    document.body.style.overflow = 'hidden'
+  } else {
+    visible.value = val
+    value.value = val
+    clearFocusTrap()
+    document.body.style.overflow = 'auto'
   }
-})
+}
 
 if (typeof window !== 'undefined') useEventListener(document, 'keydown', onKeyDown)
 
@@ -80,23 +125,27 @@ function onKeyDown(event: KeyboardEvent) {
 
 function close() {
   visible.value = false
-
   setTimeout(() => {
-    value.value = false
     emit('update:modelValue', false)
   }, 150)
 }
 
 function open() {
-  value.value = true
   emit('update:modelValue', true)
-
-  setTimeout(() => {
-    visible.value = true
-  })
+  visible.value = true
 }
 
-const { styles, classes, className } = useTheme('Modal', {}, props)
+const slots = useSlots()
+
+const hasPlaceholder = computed(() => {
+  if (slots['tertiary-action'] || slots['cancel-action']) return true
+
+  return false
+})
+
+const { styles, classes, className } = useTheme('Modal', {}, props, {
+  visible,
+})
 
 defineExpose({ open, close })
 </script>
@@ -105,6 +154,7 @@ defineExpose({ open, close })
   <teleport to="body">
     <div
       v-if="value"
+      ref="modalWrapperRef"
       :style="styles"
       :class="[
         className,
@@ -114,38 +164,32 @@ defineExpose({ open, close })
     >
       <div
         v-if="backdrop"
-        :class="[
-          classes.backdrop,
-          visible ? 'ease-out duration-200 opacity-30 dark:opacity-70' : 'ease-in duration-100 opacity-0',
-        ]"
+        :class="classes.backdrop"
       ></div>
 
       <div class="flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen">
-        <div
+        <component
+          :is="isForm ? XForm : 'div'"
           ref="modalRef"
-          :class="[
-            classes.modal,
-            visible ?
-              'ease-out duration-200 opacity-100 translate-y-0 sm:scale-100'
-              : 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-          ]"
+          :disabled="formDisabled"
+          :auto-validate="formAutoValidate"
+          :title="formTitle"
+          :description="formDescription"
+          :errors="formErrors"
+          :class="classes.modal"
+          auto-focus
+          :has-footer="false"
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
+          @submit="$emit('submit')"
         >
-          <div
-            v-if="showClose"
-            :class="[
-              classes.closeIcon,
-              $slots.image ? 'bg-gray-900 text-white' : 'bg-gray-500 text-gray-800 dark:text-gray-300'
-            ]"
-            @click="close"
-          >
-            <x-icon :icon="closeIcon"/>
-          </div>
           <slot name="image"></slot>
-          <div v-if="$slots.header" :class="classes.header">
-            <slot name="header"></slot>
+          <div v-if="hasHeader" :class="classes.header">
+            <slot name="header">
+              <div v-if="label" :class="classes.label">{{ label }}</div>
+              <div v-if="title" :class="classes.title">{{ title }}</div>
+            </slot>
           </div>
           <x-scroll
             v-if="$slots.default"
@@ -153,13 +197,29 @@ defineExpose({ open, close })
             vertical
           >
             <div :class="classes.content">
+              <div v-if="description" :class="classes.description">{{ description }}</div>
               <slot></slot>
             </div>
           </x-scroll>
-          <div v-if="$slots.actions" :class="classes.actions">
-            <slot name="actions"></slot>
+          <x-button
+            v-if="showClose"
+            ghost
+            size="lg"
+            tabindex="-1"
+            :icon="closeIcon"
+            :class="classes.closeIcon"
+            @click="close"
+          />
+          <div v-if="hasActions" :class="classes.actions">
+            <slot name="actions">
+              <slot name="cancel-action"></slot>
+              <div v-if="hasPlaceholder"></div>
+              <slot name="tertiary-action"></slot>
+              <slot name="secondary-action"></slot>
+              <slot name="primary-action"></slot>
+            </slot>
           </div>
-        </div>
+        </component>
       </div>
     </div>
   </teleport>

package/src/components/modal/theme/Modal.base.theme.ts

@@ -4,27 +4,43 @@ const theme: ModalTheme = {
   classes: {
     wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
 
-    backdrop: 'fixed inset-0 bg-gray-500 dark:bg-black transition-opacity',
+    backdrop: ({ data }) => {
+      const classes = ['fixed inset-0 bg-gray-500 dark:bg-black transition-opacity']
 
-    modal: ({ props }) => {
-      let c = 'relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full'
+      if (data.visible) classes.push('ease-out duration-200 opacity-30 dark:opacity-70')
+      else classes.push('ease-in duration-100 opacity-0')
 
-      if (props.size === 'xs') c += ' sm:max-w-xs'
-      else if (props.size === 'sm') c += ' sm:max-w-sm'
-      else if (props.size === 'lg') c += ' sm:max-w-xl'
-      else if (props.size === 'xl') c += ' sm:max-w-3xl'
-      else c += ' sm:max-w-lg'
+      return classes
+    },
+
+    modal: ({ props, data }) => {
+      const classes = ['relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-100 translate-y-0 sm:scale-100')
+      else classes.push('ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')
+
+      if (props.size === 'xs') classes.push('sm:max-w-xs')
+      else if (props.size === 'sm') classes.push('sm:max-w-sm')
+      else if (props.size === 'lg') classes.push('sm:max-w-xl')
+      else if (props.size === 'xl') classes.push('sm:max-w-3xl')
+      else classes.push('sm:max-w-lg')
 
-      return c
+      return classes
     },
 
-    closeIcon: 'flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer',
+    closeIcon: '!absolute top-2 z-10 right-2',
 
-    header: 'text-lg font-semibold px-6 py-4 border-b',
+    header: 'text-lg pl-6 py-4 border-b pr-12',
 
     content: 'px-6 py-4',
 
-    actions: 'bg-slate-50 dark:bg-gray-800 p-4',
+    actions: 'bg-slate-50 dark:bg-gray-800 p-4 grid grid-flow-col gap-4',
+
+    label: 'text-xs text-gray-500 mb-1',
+
+    title: 'text-xl font-semibold mb-4',
+
+    description: 'text-sm',
   },
 }
 

package/src/components/modal/theme/Modal.carbon.theme.ts

@@ -1,7 +1,60 @@
 import type { ModalTheme } from '../Modal.vue'
 
-import BaseTheme from './Modal.base.theme'
+const theme: ModalTheme = {
+  classes: {
+    wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
 
-const theme: ModalTheme = BaseTheme
+    backdrop: ({ data }) => {
+      const classes = ['fixed inset-0 bg-gray-500 dark:bg-black transition-opacity']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-70 dark:opacity-70')
+      else classes.push('ease-in duration-100 opacity-0')
+
+      return classes
+    },
+
+    modal: ({ props, data }) => {
+      const classes = ['relative flex flex-col z-10 bg-gray-200 dark:bg-gray-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-100 translate-y-0 sm:scale-100')
+      else classes.push('ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')
+
+      if (props.size === 'xs') classes.push('sm:max-w-xs')
+      else if (props.size === 'sm') classes.push('sm:max-w-sm')
+      else if (props.size === 'lg') classes.push('sm:max-w-xl')
+      else if (props.size === 'xl') classes.push('sm:max-w-3xl')
+      else classes.push('sm:max-w-lg')
+
+      return classes
+    },
+
+    closeIcon: '!absolute top-0 z-10 right-0',
+
+    header: 'text-lg pl-4 pt-4 pr-12',
+
+    content: ({ props }) => {
+      const classes = ['pb-8']
+
+      if (!props.fluid) classes.push('px-4')
+
+      return classes
+    },
+
+    actions: ({ props, slots }) => {
+      const classes = ['grid grid-flow-col gap-[1px]']
+
+      if (slots['tertiary-action'] || slots['cancel-action']) classes.push('grid-cols-4')
+      else classes.push('grid-cols-2')
+
+      return classes
+    },
+
+    label: 'text-xs text-gray-500 mb-1',
+
+    title: 'text-xl mb-4',
+
+    description: 'text-sm mb-4',
+  },
+}
 
 export default theme

package/src/components/notifications/Notifications.vue

@@ -286,25 +286,25 @@ defineExpose({ log, info, success, warn, warning: warn, error })
             viewBox="0 0 20 20"
           />
           <div class="flex items-center flex-wrap">
-            <span v-if="notification.title" class="font-semibold mr-2">{{ notification.title }}</span>
+            <span v-if="notification.title" class="font-medium mr-2">{{ notification.title }}</span>
             <span>{{ notification.message }}</span>
           </div>
           <x-spacer/>
-          <div
+          <button
             v-if="notification.action"
             class="
                 ml-3
-                font-semibold
+                font-medium
                 cursor-pointer
                 text-[color:var(--x-notification-action)]
                 hover:text-[color:var(--x-notification-action-hover)]
                 dark:text-[color:var(--x-notification-dark-action)]
                 dark:hover:text-[color:var(--x-notification-dark-action-hover)]
               "
-            @click="notification.action.onClick"
+            @click="() => { notification.action?.onClick(); remove(notification); }"
           >
             {{ notification.action.label }}
-          </div>
+          </button>
           <x-icon
             v-if="notification.removable"
             :icon="closeIcon"

package/src/components/notifications/theme/Notifications.base.theme.ts

@@ -2,7 +2,7 @@ import type { NotificationsTheme } from '../Notifications.vue'
 
 const theme: NotificationsTheme = {
   classes: {
-    wrapper: 'fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen',
+    wrapper: 'fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen',
 
     list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
 

package/src/components/notifications/theme/Notifications.carbon.theme.ts

@@ -1,7 +1,17 @@
 import type { NotificationsTheme } from '../Notifications.vue'
 
-import BaseTheme from './Notifications.base.theme'
+const theme: NotificationsTheme = {
+  classes: {
+    wrapper: 'fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen',
 
-const theme: NotificationsTheme = BaseTheme
+    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
+
+    item: () => {
+      const classes = ['w-full flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border-l-2 border-[color:var(--x-notification-icon)]']
+
+      return classes
+    },
+  },
+}
 
 export default theme

package/src/components/radio/Radio.vue

@@ -4,16 +4,14 @@ const radioProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  value: [String, Number, Boolean, Function, Object, Array],
-  label: String,
-  helper: String,
+  value: [String, Number],
   glow: Boolean,
 }
 
 export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
 
 type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content'
-type InternalExtraData = { selected: Ref<boolean>; }
+type InternalExtraData = { selected: Ref<boolean>; isInsideForm: boolean; isInsideFormGroup: boolean; }
 export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {}
 
 export default {
@@ -25,7 +23,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, type ExtractPublicPropTypes, type Ref } from 'vue'
+import { computed, ref, type ExtractPublicPropTypes, type Ref, unref } from 'vue'
 import { useCommon } from '../../composables/useCommon'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useColors } from '../../composables/useColors'
@@ -41,25 +39,49 @@ const emit = defineEmits(useInputtable.emits(false))
 
 const elRef = ref<HTMLElement | null>(null)
 
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  hideFooterInternal,
+  isInsideForm,
+  isInsideFormGroup,
+  isFirstValidation,
+  formGroup,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
 const selected = computed({
   get() {
+    const formGroupValue = unref(formGroup.value)
+
+    if (isInsideFormGroup) return formGroupValue === props.value
+
     return props.value === props.modelValue
   },
   set() {
     emit('update:modelValue', props.value)
+    formGroup.setValue(props.value as any)
   },
 })
 
-const { focus, blur } = useInteractive(elRef)
+function select() {
+  emit('update:modelValue', props.value)
+  formGroup.setValue(props.value as any)
+}
 
-const {
-  errorInternal,
-  reset,
-  validate,
-  setError,
-} = useInputtable(props, { focus, emit, withListeners: false })
+const listeners = {
+  input: () => {
+    if (isInsideFormGroup) return
+    setTimeout(() => {
+      if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+    }, 0)
+  },
+}
 
-const { styles, classes, className } = useTheme('Radio', {}, props, { selected })
+const { styles, classes, className } = useTheme('Radio', {}, props, { selected, isInsideForm, isInsideFormGroup })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -75,19 +97,21 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
-    @keypress.prevent.stop.space="$emit('update:modelValue', value)"
+    @keypress.prevent.stop.space="select"
   >
     <div
       class="flex items-center"
       :class="{ 'cursor-not-allowed': disabled }"
     >
       <input
+        :id="id"
         v-model="selected"
         :name="name"
         :required="required"
         :disabled="disabled || loading"
         type="radio"
         class="invisible absolute"
+        v-on="listeners"
       />
       <div
         :class="[
@@ -125,7 +149,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>
 

package/src/components/radio/theme/Radio.base.theme.ts

@@ -2,7 +2,13 @@ import type { RadioTheme } from '../Radio.vue'
 
 const theme: RadioTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer focus:outline-none group']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
+
+      return classes
+    },
 
     circle: ({ props }) => {
       let c = 'rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline'

package/src/components/radio/theme/Radio.carbon.theme.ts

@@ -2,16 +2,22 @@ import type { RadioTheme } from  '../Radio.vue'
 
 const theme: RadioTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer focus:outline-none group']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
+
+      return classes
+    },
 
     circle: ({ props }) => {
-      let c = 'rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline'
+      const classes = ['rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline']
 
-      if (props.size === 'xs' || props.size === 'sm') c += ' h-4 w-4'
-      if (props.size === 'xl') c += ' h-6 w-6'
-      else c += ' h-5 w-5'
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
+      else if (props.size === 'xl') classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
 
-      return c
+      return classes
     },
 
     circleIcon: ({ props, data }) => {
@@ -84,7 +90,7 @@ const theme: RadioTheme = {
       } else {
         vars.push(css.variables({
           bg: '#fff',
-          border: props.glow ? color[300] : gray[300],
+          border: props.glow ? color[300] : gray[900],
           dark: {
             bg: gray[900],
             border: props.glow ? color[300] : gray[300],