@indielayer/ui 1.3.0 → 1.5.0

package/src/components/label/Label.vue

@@ -10,6 +10,7 @@ const labelProps = {
     type: String,
     default: 'label',
   },
+  tooltip: String,
 }
 
 export type LabelProps = ExtractPublicPropTypes<typeof labelProps>
@@ -29,6 +30,7 @@ export default {
 import type { ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useCommon } from '../../composables/useCommon'
+import XToggleTip from '../tooltip/ToggleTip.vue'
 
 const props = defineProps(labelProps)
 
@@ -47,7 +49,8 @@ const { styles, classes, className } = useTheme('Label', {}, props)
       :title="label"
       :class="classes.label"
     >
-      {{ label }}
+      <span>{{ label }}</span>
+      <x-toggle-tip v-if="tooltip" :content="tooltip"/>
     </component>
     <slot></slot>
   </component>

package/src/components/label/theme/Label.base.theme.ts

@@ -12,7 +12,7 @@ const theme: LabelTheme = {
     },
 
     label: ({ props }) => {
-      const classes = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
+      const classes = 'flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1'
 
       if (props.size === 'xs') return classes + ' text-xs'
       else if (props.size === 'sm') return classes + ' text-sm'

package/src/components/label/theme/Label.carbon.theme.ts

@@ -1,12 +1,17 @@
 import type { LabelTheme } from '../Label.vue'
 
-import BaseTheme from './Label.base.theme'
-
 const theme: LabelTheme = {
   classes: {
-    wrapper: BaseTheme.classes?.wrapper,
+    wrapper: ({ props }) => {
+      const classes  = ['block relative align-bottom focus:outline-none']
+
+      if (props.isInsideForm) classes.push('mb-8')
+      if (props.block) classes.push('w-full')
+
+      return classes
+    },
 
-    label: 'text-xs text-gray-500 dark:text-gray-200 mb-2',
+    label: 'text-xs text-secondary-500 dark:text-secondary-200 mb-2',
   },
 }
 

package/src/components/link/Link.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 const linkProps = {
-  ...useColors.props(),
+  ...useColors.props('secondary'),
   tag: {
     type: String,
     default: 'a',

package/src/components/link/theme/Link.carbon.theme.ts

@@ -1,7 +1,28 @@
 import type { LinkTheme } from '../Link.vue'
 
-import BaseTheme from './Link.base.theme'
+const theme: LinkTheme = {
+  classes: {
+    wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex text-sm',
+  },
 
-const theme: LinkTheme = BaseTheme
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color || 'gray')
+
+    return css.variables({
+      text: props.color ? color[600] : '',
+      hover: {
+        text: !props.shadow ? color[700] : '',
+      },
+      shadow: color[100],
+      dark: {
+        text: props.color ? color[400] : '',
+        hover: {
+          text: color[300],
+        },
+        shadow: color[900],
+      },
+    })
+  },
+}
 
 export default theme

package/src/components/loader/theme/Loader.base.theme.ts

@@ -4,7 +4,7 @@ const theme: LoaderTheme = {
   classes: {
     wrapper: 'inline-flex items-center justify-center',
     iconSuccess: 'text-green-500',
-    iconError: 'text-red-500',
+    iconError: 'text-error-500',
     label: 'mx-2 text-sm',
   },
 }

package/src/components/loader/theme/Loader.carbon.theme.ts

@@ -4,8 +4,8 @@ const theme: LoaderTheme = {
   classes: {
     wrapper: 'inline-flex items-center justify-center',
     iconSuccess: 'text-green-500',
-    iconError: 'text-red-500',
-    label: 'mx-1 text-sm',
+    iconError: 'text-error-500',
+    label: 'mx-2 text-sm',
   },
 }
 

package/src/components/menu/Menu.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 const menuProps = {
   ...useCommon.props(),
-  ...useColors.props('primary'),
+  ...useColors.props('secondary'),
   items: Array as PropType<MenuArrayItem[]>,
   collapsible: {
     type: Boolean,
@@ -65,12 +65,12 @@ import { useColors } from '../../composables/useColors'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XMenuItem from './MenuItem.vue'
-import XCollapse from '../../components/collapse/Collapse.vue'
+import XAccordionItem from '../../components/accordion/AccordionItem.vue'
 import XDivider from '../../components/divider/Divider.vue'
 
 const props = defineProps(menuProps)
 
-defineEmits(['expand'])
+defineEmits(['expand', 'item-click'])
 
 const { styles, classes, className } = useTheme('Menu', {}, props)
 </script>
@@ -87,7 +87,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
   >
     <template v-for="(item, index) in items" :key="index">
       <template v-if="item.items">
-        <x-collapse
+        <x-accordion-item
           v-if="item.collapsible !== false"
           :icon="item.collapseIcon || collapseIcon"
           :expanded="item.expanded || expanded"
@@ -104,12 +104,12 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :filled="item.filled || filled"
               :size="item.size || size"
               :disabled="disabled || item.disabled"
-              class="pr-10 font-medium"
+              class="font-medium"
             />
           </template>
           <template #content="{ expand }">
             <x-menu
-              class="border-l ml-4 border-gray-100 dark:border-gray-700"
+              class="border-l ml-4 border-secondary-100 dark:border-secondary-700"
               :class="{ 'pl-1': filled }"
               :items="item.items"
               :color="item.color || color"
@@ -121,9 +121,10 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :rounded="rounded"
               :filled="filled"
               @expand="expand(false)"
+              @item-click="$emit('item-click')"
             />
           </template>
-        </x-collapse>
+        </x-accordion-item>
         <template v-else>
           <x-menu-item
             :item="item"
@@ -134,9 +135,10 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
             :disabled="disabled || item.disabled"
             class="font-medium"
             inactive
+            @click="$emit('item-click')"
           />
           <x-menu
-            class="x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700"
+            class="x-menu-inner space-y-1 ml-4 border-l border-secondary-100 dark:border-secondary-700"
             :class="{ 'pl-1': filled }"
             :items="item.items"
             :color="item.color || color"
@@ -162,6 +164,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
           :size="item.size || size"
           :disabled="disabled || item.disabled"
           :class="{ 'my-2': item.divider }"
+          @click="$emit('item-click')"
           @active="$emit('expand')"
         />
       </template>

package/src/components/menu/MenuItem.vue

@@ -128,7 +128,7 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
     ref="elRef"
     v-bind="computedProps.attrs"
     :to="computedProps.to"
-    :href="computedProps.href"
+    :href="computedProps.href || computedProps.to || ''"
     :target="computedProps.target"
     :color="computedProps.color"
     :style="styles"

package/src/components/menu/theme/MenuItem.base.theme.ts

@@ -3,21 +3,17 @@ import type { MenuItemTheme } from '../MenuItem.vue'
 const theme: MenuItemTheme = {
   classes: {
     wrapper: ({ props, data }) => {
-      const classes: any[] = ['relative !flex items-center whitespace-nowrap px-3']
+      const classes = ['relative !flex items-center whitespace-nowrap px-3']
 
-      classes.push({
-        'font-medium': data.isActive,
-        'cursor-pointer': !props.disabled,
+      if (!props.disabled) classes.push('cursor-pointer')
+      if (data.isActive) classes.push('font-medium')
+      if (props.rounded) classes.push('rounded')
 
-        // size
-        'py-1 text-xs': props.size === 'xs',
-        'py-2 text-sm': props.size === 'sm',
-        'py-1.5': !props.size || !['xs', 'sm', 'lg', 'xl'].includes(props.size),
-        'py-3': props.size === 'lg',
-        'py-4 text-lg': props.size === 'xl',
-
-        'rounded': props.rounded,
-      })
+      if (props.size === 'xs') classes.push('py-1 text-xs')
+      else if (props.size === 'sm') classes.push('py-1.5 text-sm')
+      else if (props.size === 'lg') classes.push('py-3')
+      else if (props.size === 'xl') classes.push('py-4 text-lg')
+      else classes.push('py-1.5')
 
       return classes
     },
@@ -25,29 +21,29 @@ const theme: MenuItemTheme = {
 
   styles: ({ colors, props, css, data }) => {
     const color = colors.getPalette(props.color || 'gray')
-    const gray = colors.getPalette('gray')
+    const secondary = colors.getPalette('secondary')
 
     if (props.disabled) return css.variables({
-      text: gray[300],
+      text: secondary[300],
       dark: {
-        text: gray[600],
+        text: secondary[600],
       },
     })
 
     if (props.filled) {
       if (data.isActive) {
         return css.variables({
-          bg: props.selected ? color[100] : color[50],
-          text: color[500],
+          bg: props.selected ? color[100] : color[200],
+          text: color[800],
           hover: {
-            bg: props.selected ? color[100] : color[50],
-            text: color[500],
+            bg: props.selected ? color[200] : color[200],
+            text: color[800],
           },
           dark: {
-            bg: props.selected ? color[800] : color[700],
+            bg: props.selected ? color[700] : color[700],
             text: color[100],
             hover: {
-              bg: props.selected ? color[800] : color[700],
+              bg: props.selected ? color[700] : color[700],
               text: color[100],
             },
           },
@@ -55,18 +51,18 @@ const theme: MenuItemTheme = {
       }
 
       return css.variables({
-        bg: props.selected ? gray[50] : 'transparent',
-        text: gray[800],
+        bg: props.selected ? secondary[100] : 'transparent',
+        text: secondary[800],
         hover: {
-          bg: gray[50],
-          text: gray[900],
+          bg: secondary[100],
+          text: secondary[900],
         },
         dark: {
-          bg: props.selected ? gray[800] : 'transparent',
-          text: gray[200],
+          bg: props.selected ? secondary[800] : 'transparent',
+          text: secondary[200],
           hover: {
-            bg: gray[800],
-            text: gray[100],
+            bg: secondary[600],
+            text: secondary[100],
           },
         },
       })
@@ -90,16 +86,16 @@ const theme: MenuItemTheme = {
     }
 
     return css.variables({
-      text: gray[800],
+      text: secondary[800],
       hover: {
-        text: gray[900],
-        border: gray[300],
+        text: secondary[900],
+        border: secondary[300],
       },
       dark: {
-        text: gray[300],
+        text: secondary[300],
         hover: {
-          text: gray[200],
-          border: gray[800],
+          text: secondary[200],
+          border: secondary[800],
         },
       },
     })

package/src/components/modal/Modal.vue

@@ -3,18 +3,50 @@ 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: () => ([]),
+  },
+  persistent: Boolean,
 }
 
 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 +57,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
 
@@ -51,52 +89,68 @@ watch(value, (val) => {
 
   if (val) {
     setTimeout(() => {
-      stopClickOutside = onClickOutside(modalRef, close)
+      stopClickOutside = onClickOutside(modalRef, clickOutsideCallback)
     })
   }
 })
 
-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)
 
 function onKeyDown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && value.value) close()
+  if (event.key === 'Escape' && value.value && !props.persistent) close()
+}
+
+function clickOutsideCallback() {
+  if (!props.persistent) close()
 }
 
 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 +159,7 @@ defineExpose({ open, close })
   <teleport to="body">
     <div
       v-if="value"
+      ref="modalWrapperRef"
       :style="styles"
       :class="[
         className,
@@ -114,38 +169,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 +202,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="sm"
+            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,46 @@ 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-secondary-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-secondary-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: ({ props, slots }) => {
+      const classes = ['flex gap-4 bg-secondary-50 dark:bg-secondary-800 p-4 justify-end']
+
+      return classes
+    },
+
+    label: 'text-xs text-secondary-500 mb-1',
+
+    title: 'text-xl font-semibold',
 
-    actions: 'bg-slate-50 dark:bg-gray-800 p-4',
+    description: 'text-sm mb-8',
   },
 }