@indielayer/ui 1.0.9 → 1.1.0

package/src/components/menu/Menu.vue

@@ -1,23 +1,8 @@
 <script lang="ts">
-export default { name: 'XMenu' }
-</script>
-
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
-
-import XMenuItem from './MenuItem.vue'
-import XCollapse from '../../components/collapse/Collapse.vue'
-import XDivider from '../../components/divider/Divider.vue'
-
-import theme from './Menu.theme'
-
-const props = defineProps({
+const menuProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
-  items: Array as PropType<Array<any>>,
+  items: Array as PropType<MenuArrayItem[]>,
   collapsible: {
     type: Boolean,
     default: true,
@@ -33,7 +18,56 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-})
+}
+
+export type MenuArrayItem = {
+  collapsible?: boolean;
+  collapseIcon?: string;
+  expanded?: boolean;
+  divider?: boolean;
+  items?: MenuArrayItem[];
+  value?: string | number;
+  to?: string | object;
+  href?: string;
+  target?: string;
+  exact?: boolean;
+  color?: string;
+  size?: Size;
+  label?: string;
+  icon?: string;
+  iconRight?: string;
+  loading?: boolean;
+  rounded?: boolean;
+  filled?: boolean;
+  disabled?: boolean;
+  active?: boolean;
+  attrs?: Record<string, unknown>;
+  onClick?: (e: MouseEvent) => void;
+}
+
+export type MenuProps = ExtractPublicPropTypes<typeof menuProps>
+
+export default {
+  name: 'XMenu',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useCommon, type Size } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useTheme } from '../../composables/theme'
+
+import XMenuItem from './MenuItem.vue'
+import XCollapse from '../../components/collapse/Collapse.vue'
+import XDivider from '../../components/divider/Divider.vue'
+
+import theme from './Menu.theme'
+
+const props = defineProps(menuProps)
 
 const emit = defineEmits(['expand'])
 
@@ -57,16 +91,17 @@ const { styles, classes, className } = useTheme('menu', theme, props)
           :icon="item.collapseIcon || collapseIcon"
           :expanded="item.expanded || expanded"
           :disabled="disabled || item.disabled"
+          :show-icon="!!(item.collapseIcon || collapseIcon)"
           class="x-menu-inner space-y-1"
           @expand="$emit('expand')"
         >
           <template #default="{ }">
             <x-menu-item
               :item="item"
+              :rounded="rounded"
               :color="item.color || color"
+              :filled="item.filled || filled"
               :size="item.size || size"
-              :rounded="rounded"
-              :filled="filled"
               :disabled="disabled || item.disabled"
               class="pr-10 font-medium"
             />
@@ -93,6 +128,7 @@ const { styles, classes, className } = useTheme('menu', theme, props)
             :item="item"
             :rounded="rounded"
             :color="item.color || color"
+            :filled="item.filled || filled"
             :size="item.size || size"
             :disabled="disabled || item.disabled"
             class="font-medium"
@@ -118,12 +154,12 @@ const { styles, classes, className } = useTheme('menu', theme, props)
         <x-divider v-if="item.divider"/>
         <x-menu-item
           v-else
+          :item="item"
+          :rounded="rounded"
           :color="item.color || color"
+          :filled="item.filled || filled"
           :size="item.size || size"
-          :item="item"
           :disabled="disabled || item.disabled"
-          :filled="filled"
-          :rounded="rounded"
           :class="{ 'my-2': item.divider }"
           @active="$emit('expand')"
         />

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

@@ -1,13 +1,23 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { Ref } from 'vue'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { MenuItemProps } from './MenuItem.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+type InternalExtraData = { isActive: Ref<boolean>; }
+
+interface InternalTheme extends ThemeComponent<MenuItemProps, InternalClasses, InternalExtraData> {}
+export interface MenuItemTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<MenuItemProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
-    wrapper: ({ props, data }: ThemeParams) => {
+    wrapper: ({ props, data }) => {
       const classes: any[] = ['relative !flex items-center whitespace-nowrap px-3']
 
       classes.push({
         'font-medium': data.isActive,
-        'cursor-pointer': !props.disabled && !props.inactive,
+        'cursor-pointer': !props.disabled,
 
         // size
         'py-1 text-xs': props.size === 'xs',
@@ -23,7 +33,7 @@ export default {
     },
   },
 
-  styles: ({ colors, props, css, data }: ThemeParams) => {
+  styles: ({ colors, props, css, data }) => {
     const color = colors.getPalette(props.color || 'gray')
     const gray = colors.getPalette('gray')
 
@@ -105,3 +115,5 @@ export default {
     })
   },
 }
+
+export default theme

package/src/components/menu/MenuItem.vue

@@ -1,25 +1,9 @@
 <script lang="ts">
-export default { name: 'XMenuItem' }
-</script>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
-import { useMutationObserver } from '@vueuse/core'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
-
-import XIcon from '../../components/icon/Icon.vue'
-import XSpinner from '../../components/spinner/Spinner.vue'
-import XLink from '../../components/link/Link.vue'
-
-import theme from './MenuItem.theme'
-
-const props = defineProps({
+const menuItemProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   item: {
-    type: Object,
+    type: Object as PropType<MenuArrayItem>,
     default: () => {},
   },
   active: Boolean,
@@ -28,8 +12,7 @@ const props = defineProps({
     default: () => {},
   },
   onClick: Function,
-  inactive: Boolean,
-  value: [Number,String],
+  value: [Number, String],
   to: String,
   exact: Boolean,
   href: String,
@@ -48,50 +31,80 @@ const props = defineProps({
   },
   selected: Boolean,
   disabled: Boolean,
-})
+}
+
+export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>
+
+export default {
+  name: 'XMenuItem',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, type ExtractPublicPropTypes, type PropType } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
+import { useColors } from '../../composables/colors'
+import { useCommon } from '../../composables/common'
+import { useTheme } from '../../composables/theme'
+
+import XIcon from '../../components/icon/Icon.vue'
+import XSpinner from '../../components/spinner/Spinner.vue'
+
+import theme from './MenuItem.theme'
+import type { MenuArrayItem } from './Menu.vue'
+
+const props = defineProps(menuItemProps)
 
 const emit = defineEmits(['active', 'click'])
 
 const elRef = ref()
 const isActive = ref(false)
 
-const cItem = computed(() => ({
+const computedProps = computed(() => ({
   ...props,
   ...props.item,
-}))
+} as MenuItemProps))
 
-const htmlTag = computed(() => cItem.value.to || cItem.value.href ? XLink : 'div')
+const htmlTag = computed(() => {
+  if (computedProps.value.to) return 'router-link'
+  if (computedProps.value.href) return 'a'
+
+  return 'div'
+})
 
 onMounted(() => {
   if (!elRef.value) return
 
   check()
 
-  if (htmlTag.value === XLink) useMutationObserver(elRef.value.$el, check, {
+  if (htmlTag.value === 'router-link') useMutationObserver(elRef.value.$el, check, {
     attributes: true,
     attributeFilter: ['class'],
   })
 })
 
 function onItemClick(e: Event) {
-  if (cItem.value.disabled) {
+  if (computedProps.value.disabled) {
     e.stopPropagation()
     e.preventDefault()
 
     return
   }
 
-  cItem.value.onClick && cItem.value.onClick(e)
+  computedProps.value.onClick && computedProps.value.onClick(e)
   emit('click', e)
 }
 
 function check() {
-  if (elRef.value && elRef.value.$el && (cItem.value.href || cItem.value.to)) {
-    const active = elRef.value.$el.classList.contains(cItem.value.exact ? 'router-link-exact-active' : 'router-link-active') || false
+  if (elRef.value && elRef.value.$el && (computedProps.value.href || computedProps.value.to)) {
+    const active = elRef.value.$el.classList.contains(computedProps.value.exact ? 'router-link-exact-active' : 'router-link-active') || false
 
     isActive.value = active
   } else {
-    isActive.value = cItem.value.active
+    isActive.value = !!computedProps.value.active
   }
 }
 
@@ -99,15 +112,10 @@ watch(() => isActive.value, (val) => {
   if (val) emit('active')
 })
 
-watch(() => cItem.value.active, (val) => {
-  isActive.value = val
+watch(() => computedProps.value.active, (val) => {
+  isActive.value = !!val
 })
 
-const computedProps = computed(() => ({
-  ...cItem.value,
-  filled: props.filled || props.item?.filled,
-}))
-
 const { styles, classes, className } = useTheme('menu-item', theme, computedProps, { isActive })
 </script>
 
@@ -115,10 +123,11 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
   <component
     :is="htmlTag"
     ref="elRef"
-    v-bind="cItem.attrs"
-    :to="cItem.to"
-    :target="cItem.target"
-    :color="cItem.color"
+    v-bind="computedProps.attrs"
+    :to="computedProps.to"
+    :href="computedProps.href"
+    :target="computedProps.target"
+    :color="computedProps.color"
     :style="styles"
     :class="[
       className,
@@ -129,38 +138,38 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
         'flex items-center': $slots.prefix || $slots.suffix
       }
     ]"
-    :title="cItem.label"
-    :alt="cItem.label"
+    :title="computedProps.label"
+    :alt="computedProps.label"
     @click="onItemClick"
   >
     <span v-if="$slots.prefix" class="mr-2 shrink-0">
       <slot name="prefix"></slot>
     </span>
-    <x-icon v-else-if="cItem.icon" :size="cItem.size" :icon="cItem.icon" class="mr-2"/>
+    <x-icon v-else-if="computedProps.icon" :size="computedProps.size" :icon="computedProps.icon" class="mr-2"/>
 
     <span class="flex-1 truncate">
-      <slot>{{ cItem.label }}</slot>
+      <slot>{{ computedProps.label }}</slot>
     </span>
 
     <span class="ml-1 shrink-0">
-      <x-spinner v-if="cItem.loading" :size="cItem.size" />
+      <x-spinner v-if="computedProps.loading" :size="computedProps.size" />
       <template v-else>
         <span v-if="$slots.suffix">
           <slot name="suffix"></slot>
         </span>
-        <x-icon v-else-if="cItem.iconRight" :size="cItem.size" :icon="cItem.iconRight"/>
+        <x-icon v-else-if="computedProps.iconRight" :size="computedProps.size" :icon="computedProps.iconRight"/>
       </template>
     </span>
   </component>
 </template>
 
 <style lang="postcss" module scoped>
-  .menu-item, .menu-item.x-link {
+  .menu-item {
     color: var(--x-menu-item-text);
     background-color: var(--x-menu-item-bg);
 
-    &:before {
-      content: '';
+    &::before {
+      content: "";
       position: absolute;
       left: -1px;
       height: 100%;
@@ -173,9 +182,11 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
       background-color: var(--x-menu-item-bg-hover, var(--x-menu-item-bg));
     }
 
-    :global(.dark) &, &:global(.dark) {
+    :global(.dark) &,
+    &:global(.dark) {
       color: var(--x-menu-item-dark-text);
       background: var(--x-menu-item-dark-bg);
+
       &:hover {
         color: var(--x-menu-item-dark-text-hover, var(--x-menu-item-dark-text));
         background-color: var(--x-menu-item-dark-bg-hover, var(--x-menu-item-dark-bg));
@@ -184,8 +195,10 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
   }
 
   :global(.x-menu-inner) {
+    /* stylelint-disable-next-line no-descending-specificity */
     .menu-item {
-      &:hover:before, &--active:before {
+      &:hover::before,
+      &--active::before {
         background-color: var(--x-menu-item-border-hover);
       }
     }

package/src/components/menu/index.ts

@@ -0,0 +1,7 @@
+export { default as XMenu } from './Menu.vue'
+export type { MenuProps, MenuArrayItem } from './Menu.vue'
+export type { MenuTheme } from './Menu.theme'
+
+export { default as XMenuItem } from './MenuItem.vue'
+export type { MenuItemProps } from './MenuItem.vue'
+export type { MenuItemTheme } from './MenuItem.theme'

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

@@ -1,12 +1,20 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { ModalProps } from './Modal.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions'
+
+interface InternalTheme extends ThemeComponent<ModalProps, InternalClasses> {}
+export interface ModalTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<ModalProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
 
     backdrop: 'fixed inset-0 bg-gray-500 dark:bg-black transition-opacity',
 
-    modal: ({ props }: ThemeParams) => {
+    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 (props.size === 'xs') c += ' sm:max-w-xs'
@@ -27,3 +35,5 @@ export default {
     actions: 'bg-slate-50 dark:bg-gray-800 p-4',
   },
 }
+
+export default theme

package/src/components/modal/Modal.vue

@@ -1,9 +1,28 @@
 <script lang="ts">
-export default { name: 'XModal' }
+const modalSize = ['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const
+const modalProps = {
+  size: {
+    type: String as PropType<ModalSize>,
+    default: 'md',
+  },
+  modelValue: Boolean,
+  showClose: Boolean,
+  backdrop: Boolean,
+}
+
+export type ModalSize = typeof modalSize[number]
+export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
+
+export default {
+  name: 'XModal',
+  validators: {
+    size: modalSize,
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type PropType } from 'vue'
+import { ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import { useTheme } from '../../composables/theme'
 import { closeIcon } from '../../common/icons'
@@ -13,15 +32,7 @@ import theme from './Modal.theme'
 import XScroll from '../../components/scroll/Scroll.vue'
 import XIcon from '../icon/Icon.vue'
 
-const props = defineProps({
-  size: {
-    type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>,
-    default: 'md',
-  },
-  modelValue: Boolean,
-  showClose: Boolean,
-  backdrop: Boolean,
-})
+const props = defineProps(modalProps)
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -29,7 +40,7 @@ const value = ref(props.modelValue)
 const visible = ref(false)
 const modalRef = ref<HTMLElement | null>(null)
 
-let stopClickOutside: undefined | (()=> void) = undefined
+let stopClickOutside: undefined | (() => void) = undefined
 
 watch(value, (val) => {
   if (stopClickOutside) {

package/src/components/modal/index.ts

@@ -0,0 +1,3 @@
+export { default as XModal } from './Modal.vue'
+export type { ModalProps, ModalSize } from './Modal.vue'
+export type { ModalTheme } from './Modal.theme'

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

@@ -1,6 +1,14 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { NotificationsProps } from './Notifications.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'list' | 'item'
+
+interface InternalTheme extends ThemeComponent<NotificationsProps, InternalClasses> {}
+export interface NotificationsTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<NotificationsProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen',
 
@@ -9,3 +17,5 @@ export default {
     item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100',
   },
 }
+
+export default theme

package/src/components/notifications/Notifications.vue

@@ -1,7 +1,56 @@
 <script lang="ts">
+const notificationsProps = {
+  ...useColors.props('primary'),
+  align: {
+    type: String as PropType<NotificationsAlign>,
+    default: 'right',
+    validator: (value: string) => validators.align.includes(value as NotificationsAlign),
+  },
+  position: {
+    type: String as PropType<NotificationsPosition>,
+    default: 'bottom',
+    validator: (value: string) => validators.position.includes(value as NotificationsPosition),
+  },
+  timeout: {
+    type: Number,
+    default: 3500,
+  },
+  removable: {
+    type: Boolean,
+    default: true,
+  },
+  injectKey: {
+    type: [Symbol, String],
+    default: injectNotificationKey,
+  },
+}
+
 const validators = {
-  align: ['left','right'],
-  position: ['bottom','top'],
+  align: ['left', 'right'] as const,
+  position: ['bottom', 'top'] as const,
+}
+
+export type NotificationsProps = ExtractPublicPropTypes<typeof notificationsProps>
+
+export type NotificationsAlign = typeof validators.align[number]
+export type NotificationsPosition = typeof validators.position[number]
+export type NotificationsAction = {
+  onClick: () => void;
+  label: string;
+  color?: string;
+}
+export type NotificationEvent = {
+  id?: number;
+  icon?: string;
+  action?: NotificationsAction;
+  iconColor?: string;
+  title?: string;
+  style?: string;
+  message?: string;
+  timeout?: number;
+  removable?: boolean;
+  align?: NotificationsAlign;
+  position?: NotificationsPosition;
 }
 
 export default {
@@ -11,7 +60,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, provide, watch, type PropType } from 'vue'
+import { ref, provide, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { injectNotificationKey } from '../../composables/keys'
 import { useColors } from '../../composables/colors'
 import { useCSS } from '../../composables/css'
@@ -23,52 +72,7 @@ import XSpacer from '../spacer/Spacer'
 
 import theme from './Notifications.theme'
 
-export type NotificationAlign = 'left' | 'right'
-export type NotificationPosition = 'bottom' | 'top'
-export type NotificationAction = {
-  onClick: ()=> void,
-  label: string,
-  color?: string
-}
-export type NotificationEvent = {
-  id?: number,
-  icon?: string,
-  action?: NotificationAction,
-  iconColor?: string,
-  title?: string,
-  style?: string,
-  message?: string,
-  timeout?: number,
-  removable?: boolean,
-  align?: NotificationAlign,
-  position?: NotificationPosition
-}
-
-const props = defineProps({
-  ...useColors.props('primary'),
-  align: {
-    type: String as PropType<NotificationAlign>,
-    default: 'right',
-    validator: (value: string) => validators.align.includes(value),
-  },
-  position: {
-    type: String as PropType<NotificationPosition>,
-    default: 'bottom',
-    validator: (value: string) => validators.position.includes(value),
-  },
-  timeout: {
-    type: Number,
-    default: 3500,
-  },
-  removable: {
-    type: Boolean,
-    default: true,
-  },
-  injectKey: {
-    type: [Symbol, String],
-    default: injectNotificationKey,
-  },
-})
+const props = defineProps(notificationsProps)
 
 const internalAlign = ref(props.align)
 const internalPosition = ref(props.position)

package/src/components/notifications/index.ts

@@ -0,0 +1,9 @@
+export { default as XNotifications } from './Notifications.vue'
+export type {
+  NotificationsProps,
+  NotificationEvent,
+  NotificationsAction,
+  NotificationsAlign,
+  NotificationsPosition,
+} from './Notifications.vue'
+export type { NotificationsTheme } from './Notifications.theme'