@indielayer/ui 1.0.10 → 1.1.0

package/src/components/input/Input.theme.ts

@@ -1,10 +1,19 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { InputProps } from './Input.vue'
 
-export default {
+type InternalClasses = 'wrapper' | 'label' | 'input' | 'icon'
+type InternalExtraData = { errorInternal: any; }
+
+interface InternalTheme extends ThemeComponent<InputProps, InternalClasses, InternalExtraData> {}
+export interface InputTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<InputProps, InternalClasses, InternalExtraData>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'inline-block align-bottom text-left',
 
-    label: ({ props }: ThemeParams) => {
+    label: ({ props }) => {
       const classes = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
 
       if (props.size === 'xs') return classes + ' text-xs'
@@ -12,10 +21,10 @@ export default {
       else if (props.size === 'lg') return classes + ' text-lg'
       else if (props.size === 'xl') return classes + ' text-xl'
 
-      return classes // + ' text-sm'
+      return classes
     },
 
-    input: ({ props, data }: ThemeParams) => {
+    input: ({ props, data }) => {
       const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
 
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
@@ -36,9 +45,11 @@ export default {
     icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
   },
 
-  styles: ({ colors, props, css }: ThemeParams) => {
+  styles: ({ colors, props, css }) => {
     const color = colors.getPalette(props.color)
 
     return css.get('border', color[400])
   },
 }
+
+export default theme

package/src/components/input/Input.vue

@@ -1,22 +1,5 @@
 <script lang="ts">
-export default { name: 'XInput' }
-</script>
-
-<script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useInputtable } from '../../composables/inputtable'
-import { useInteractive } from '../../composables/interactive'
-import { eyeIcon, eyeVisibleIcon } from '../../common/icons'
-
-import XIcon from '../icon/Icon.vue'
-import XInputError from '../helpers/InputError'
-
-import theme from './Input.theme'
-
-const props = defineProps({
+const inputProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   ...useInteractive.props(),
@@ -28,7 +11,7 @@ const props = defineProps({
   helper: String,
   label: String,
   dir: {
-    type: String,
+    type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr',
   },
   icon: String,
@@ -44,13 +27,41 @@ const props = defineProps({
     default: 'text',
   },
   block: Boolean,
-})
+}
+
+export type InputProps = ExtractPublicPropTypes<typeof inputProps>
+
+export default {
+  name: 'XInput',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, type PropType, type ExtractPublicPropTypes, watch } from 'vue'
+import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/colors'
+import { useCommon } from '../../composables/common'
+import { useInputtable } from '../../composables/inputtable'
+import { useInteractive } from '../../composables/interactive'
+import { eyeIcon, eyeVisibleIcon } from '../../common/icons'
+
+import XIcon from '../icon/Icon.vue'
+import XInputError from '../helpers/InputError'
+
+import theme from './Input.theme'
+
+const props = defineProps(inputProps)
 
 const emit = defineEmits(useInputtable.emits())
 
 const elRef = ref<HTMLInputElement | null>(null)
 const currentType = ref(props.type)
 
+watch(() => props.type, (newValue) => { currentType.value = newValue })
+
 function onChange(e: Event) {
   if (!e.target) return
 

package/src/components/input/index.ts

@@ -0,0 +1,3 @@
+export { default as XInput } from './Input.vue'
+export type { InputProps } from './Input.vue'
+export type { InputTheme } from './Input.theme'

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

@@ -1,11 +1,19 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { LinkProps } from './Link.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<LinkProps, InternalClasses> {}
+export interface LinkTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<LinkProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex',
   },
 
-  styles: ({ colors, props, css }: ThemeParams) => {
+  styles: ({ colors, props, css }) => {
     const color = colors.getPalette(props.color || 'gray')
 
     return css.variables({
@@ -24,3 +32,5 @@ export default {
     })
   },
 }
+
+export default theme

package/src/components/link/Link.vue

@@ -1,8 +1,23 @@
 <script lang="ts">
+const linkProps = {
+  ...useColors.props(),
+  tag: {
+    type: String,
+    default: 'a',
+  },
+  to: [String, Object],
+  shadow: Boolean,
+  external: Boolean,
+  underline: Boolean,
+}
+
+export type LinkProps = ExtractPublicPropTypes<typeof linkProps>
+
 export default { name: 'XLink' }
 </script>
 
 <script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
 import { useColors } from '../../composables/colors'
 import { useTheme } from '../../composables/theme'
 import { externalIcon } from '../../common/icons'
@@ -11,17 +26,7 @@ import XIcon from '../icon/Icon.vue'
 
 import theme from './Link.theme'
 
-const props = defineProps({
-  ...useColors.props(),
-  tag: {
-    type: String,
-    default: 'a',
-  },
-  to: [String, Object],
-  shadow: Boolean,
-  external: Boolean,
-  underline: Boolean,
-})
+const props = defineProps(linkProps)
 
 const { styles, classes, className } = useTheme('link', theme, props)
 </script>

package/src/components/link/index.ts

@@ -0,0 +1,3 @@
+export { default as XLink } from './Link.vue'
+export type { LinkProps } from './Link.vue'
+export type { LinkTheme } from './Link.theme'

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

@@ -1,7 +1,17 @@
-import type { ThemeParams } from '../../composables/theme'
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
+import type { MenuProps } from './Menu.vue'
 
-export default {
+type InternalClasses = 'wrapper'
+
+interface InternalTheme extends ThemeComponent<MenuProps, InternalClasses> {}
+export interface MenuTheme extends Omit<InternalTheme, 'classes'> {
+  classes?: Partial<ThemeClasses<MenuProps, InternalClasses>>;
+}
+
+const theme: InternalTheme = {
   classes: {
     wrapper: '',
   },
 }
+
+export default theme

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,7 +12,6 @@ const props = defineProps({
     default: () => {},
   },
   onClick: Function,
-  inactive: Boolean,
   value: [Number, String],
   to: String,
   exact: Boolean,
@@ -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,34 +138,33 @@ 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);
 

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