@indielayer/ui 1.0.0-alpha.9 → 1.0.0

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

@@ -0,0 +1,107 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props, data }: ThemeParams) => {
+      const classes: any[] = ['relative !flex items-center whitespace-nowrap px-3']
+
+      classes.push({
+        'font-medium': data.isActive,
+        'cursor-pointer': !props.disabled && !props.inactive,
+
+        // 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,
+      })
+
+      return classes
+    },
+  },
+
+  styles: ({ colors, props, css, data }: ThemeParams) => {
+    const color = colors.getPalette(props.color || 'gray')
+    const gray = colors.getPalette('gray')
+
+    if (props.disabled) return css.variables({
+      text: gray[300],
+      dark: {
+        text: gray[600],
+      },
+    })
+
+    if (props.filled) {
+      if (data.isActive) {
+        return css.variables({
+          bg: props.selected ? color[100] : color[50],
+          text: color[500],
+          hover: {
+            bg: props.selected ? color[100] : color[50],
+            text: color[500],
+          },
+          dark: {
+            bg: props.selected ? color[800] : color[700],
+            text: color[100],
+            hover: {
+              bg: props.selected ? color[800] : color[700],
+              text: color[100],
+            },
+          },
+        })
+      }
+
+      return css.variables({
+        bg: props.selected ? gray[50] : 'transparent',
+        text: gray[800],
+        hover: {
+          bg: gray[50],
+          text: gray[900],
+        },
+        dark: {
+          bg: props.selected ? gray[800] : 'transparent',
+          text: gray[200],
+          hover: {
+            bg: gray[800],
+            text: gray[100],
+          },
+        },
+      })
+    }
+
+    if (data.isActive) {
+      return css.variables({
+        text: color[500],
+        hover: {
+          text: color[500],
+          border: color[500],
+        },
+        dark: {
+          text: color[500],
+          hover: {
+            text: color[500],
+            border: color[500],
+          },
+        },
+      })
+    }
+
+    return css.variables({
+      text: gray[800],
+      hover: {
+        text: gray[900],
+        border: gray[300],
+      },
+      dark: {
+        text: gray[300],
+        hover: {
+          text: gray[200],
+          border: gray[800],
+        },
+      },
+    })
+  },
+}

package/src/components/menu/MenuItem.vue

@@ -1,201 +1,110 @@
 <script lang="ts">
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+export default { name: 'XMenuItem' }
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
-import { useCSS } from '../../composables/css'
 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'
 
-export default defineComponent({
-  name: 'XMenuItem',
+import theme from './MenuItem.theme'
 
-  components: {
-    XSpinner,
-    XLink,
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  item: {
+    type: Object,
+    default: () => {},
   },
-
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('primary'),
-    item: {
-      type: Object,
-      default: () => {},
-    },
-    active: Boolean,
-    onClick: Function,
-    inactive: Boolean,
-    value: [Number,String],
-    to: String,
-    exact: Boolean,
-    href: String,
-    target: String,
-    label: String,
-    icon: String,
-    iconRight: String,
-    loading: Boolean,
-    rounded: {
-      type: Boolean,
-      default: true,
-    },
-    filled: {
-      type: Boolean,
-      default: true,
-    },
-    selected: Boolean,
-    disabled: Boolean,
+  active: Boolean,
+  onClick: Function,
+  inactive: Boolean,
+  value: [Number,String],
+  to: String,
+  exact: Boolean,
+  href: String,
+  target: String,
+  label: String,
+  icon: String,
+  iconRight: String,
+  loading: Boolean,
+  rounded: {
+    type: Boolean,
+    default: true,
   },
+  filled: {
+    type: Boolean,
+    default: true,
+  },
+  selected: Boolean,
+  disabled: Boolean,
+})
 
-  emits: ['active', 'click'],
-
-  setup(props, { emit }) {
-    const elRef = ref()
-    const isActive = ref(false)
-
-    const filled = computed(() => props.filled || props.item?.filled)
-    const cItem = computed(() => ({
-      ...props,
-      ...props.item,
-    }))
-
-    const htmlTag = cItem.value.to || cItem.value.href ? 'x-link' : 'div'
-
-    onMounted(() => {
-      if (!elRef.value) return
+const emit = defineEmits(['active', 'click'])
 
-      check()
+const elRef = ref()
+const isActive = ref(false)
 
-      if (htmlTag === 'x-link') useMutationObserver(elRef.value.$el, check, {
-        attributes: true,
-        attributeFilter: ['class'],
-      })
-    })
+const cItem = computed(() => ({
+  ...props,
+  ...props.item,
+}))
 
-    function onItemClick(e: Event) {
-      if (cItem.value.disabled) {
-        e.stopPropagation()
-        e.preventDefault()
+const htmlTag = computed(() => cItem.value.to || cItem.value.href ? XLink : 'div')
 
-        return
-      }
+onMounted(() => {
+  if (!elRef.value) return
 
-      cItem.value.onClick && cItem.value.onClick(e)
-      emit('click', e)
-    }
+  check()
 
-    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')
-
-        isActive.value = active
-      } else {
-        isActive.value = cItem.value.active
-      }
-    }
+  if (htmlTag.value === XLink) useMutationObserver(elRef.value.$el, check, {
+    attributes: true,
+    attributeFilter: ['class'],
+  })
+})
 
-    watch(() => isActive.value, (val) => {
-      if (val) emit('active')
-    })
+function onItemClick(e: Event) {
+  if (cItem.value.disabled) {
+    e.stopPropagation()
+    e.preventDefault()
 
-    watch(() => cItem.value.active, (val) => {
-      isActive.value = val
-    })
+    return
+  }
 
-    const css = useCSS()
-    const colors = useColors()
-    const cssVariables = computed(() => {
-      const color = colors.getPalette(cItem.value.color || 'gray')
-      const gray = colors.getPalette('gray')
+  cItem.value.onClick && cItem.value.onClick(e)
+  emit('click', e)
+}
 
-      if (cItem.value.disabled) return css.variables({
-        text: gray[300],
-        dark: {
-          text: gray[600],
-        },
-      })
+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 (filled.value) {
-        if (isActive.value) {
-          return css.variables({
-            bg: props.selected ? color[100] : color[50],
-            text: color[500],
-            hover: {
-              bg: props.selected ? color[100] : color[50],
-              text: color[500],
-            },
-            dark: {
-              bg: props.selected ? color[800] : color[700],
-              text: color[100],
-              hover: {
-                bg: props.selected ? color[800] : color[700],
-                text: color[100],
-              },
-            },
-          })
-        }
+    isActive.value = active
+  } else {
+    isActive.value = cItem.value.active
+  }
+}
 
-        return css.variables({
-          bg: props.selected ? gray[50] : 'transparent',
-          text: gray[800],
-          hover: {
-            bg: gray[50],
-            text: gray[900],
-          },
-          dark: {
-            bg: props.selected ? gray[800] : 'transparent',
-            text: gray[200],
-            hover: {
-              bg: gray[800],
-              text: gray[100],
-            },
-          },
-        })
-      }
+watch(() => isActive.value, (val) => {
+  if (val) emit('active')
+})
 
-      if (isActive.value) {
-        return css.variables({
-          text: color[500],
-          hover: {
-            text: color[500],
-            border: color[500],
-          },
-          dark: {
-            text: color[500],
-            hover: {
-              text: color[500],
-              border: color[500],
-            },
-          },
-        })
-      }
+watch(() => cItem.value.active, (val) => {
+  isActive.value = val
+})
 
-      return css.variables({
-        text: gray[800],
-        hover: {
-          text: gray[900],
-          border: gray[300],
-        },
-        dark: {
-          text: gray[300],
-          hover: {
-            text: gray[200],
-            border: gray[800],
-          },
-        },
-      })
-    })
+const computedProps = computed(() => ({
+  ...cItem.value,
+  filled: props.filled || props.item?.filled,
+}))
 
-    return {
-      elRef,
-      cItem,
-      htmlTag,
-      isActive,
-      cssVariables,
-      onItemClick,
-    }
-  },
-})
+const { styles, classes, className } = useTheme('menu-item', theme, computedProps, { isActive })
 </script>
 
 <template>
@@ -203,28 +112,17 @@ export default defineComponent({
     :is="htmlTag"
     ref="elRef"
     :to="cItem.to"
-    :href="cItem.href"
     :target="cItem.target"
     :color="cItem.color"
-    class="relative !flex items-center whitespace-nowrap px-3 mt-1"
-    :style="cssVariables"
+    :style="styles"
     :class="[
+      className,
       $style['menu-item'],
       [isActive ? $style['menu-item--active'] : ''],
+      classes.wrapper,
       {
-        'font-medium': isActive,
-        'flex items-center': $slots.prefix || $slots.suffix,
-        'cursor-pointer': !cItem.disabled && !inactive,
-
-        // size
-        'py-1 text-xs': cItem.size === 'xs',
-        'py-2 text-sm': cItem.size === 'sm',
-        'py-1.5': !cItem.size || !['xs', 'sm', 'lg', 'xl'].includes(cItem.size),
-        'py-3': cItem.size === 'lg',
-        'py-4 text-lg': cItem.size === 'xl',
-
-        'rounded my-[1px]': rounded
-      },
+        'flex items-center': $slots.prefix || $slots.suffix
+      }
     ]"
     :title="cItem.label"
     :alt="cItem.label"
@@ -233,7 +131,7 @@ export default defineComponent({
     <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 shrink-0"/>
+    <x-icon v-else-if="cItem.icon" :size="cItem.size" :icon="cItem.icon" class="mr-2"/>
 
     <span class="flex-1 truncate">
       <slot>{{ cItem.label }}</slot>
@@ -252,9 +150,9 @@ export default defineComponent({
 </template>
 
 <style lang="postcss" module scoped>
-  .menu-item {
-    color: var(--x-text);
-    background-color: var(--x-bg);
+  .menu-item, .menu-item.x-link {
+    color: var(--x-menu-item-text);
+    background-color: var(--x-menu-item-bg);
 
     &:before {
       content: '';
@@ -266,16 +164,16 @@ export default defineComponent({
     }
 
     &:hover {
-      color: var(--x-text-hover, var(--x-text));
-      background-color: var(--x-bg-hover, var(--x-bg));
+      color: var(--x-menu-item-text-hover, var(--x-menu-item-text));
+      background-color: var(--x-menu-item-bg-hover, var(--x-menu-item-bg));
     }
 
-    :global(.dark) & {
-      color: var(--x-dark-text);
-      background: var(--x-dark-bg);
+    :global(.dark) &, &:global(.dark) {
+      color: var(--x-menu-item-dark-text);
+      background: var(--x-menu-item-dark-bg);
       &:hover {
-        color: var(--x-dark-text-hover, var(--x-dark-text));
-        background-color: var(--x-dark-bg-hover, var(--x-dark-bg));
+        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));
       }
     }
   }
@@ -283,7 +181,7 @@ export default defineComponent({
   :global(.x-menu-inner) {
     .menu-item {
       &:hover:before, &--active:before {
-        background-color: var(--x-border-hover);
+        background-color: var(--x-menu-item-border-hover);
       }
     }
   }

package/src/components/menu/__tests__/Menu.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Menu from '../Menu.vue'
+
+describe('Menu', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Menu)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/menu/__tests__/MenuItem.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MenuItem from '../MenuItem.vue'
+
+describe('MenuItem', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(MenuItem)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,29 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  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) => {
+      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'
+      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 c
+    },
+
+    closeIcon: 'flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer',
+
+    header: 'text-lg font-semibold px-6 py-4 border-b',
+
+    content: 'px-6 py-4',
+
+    actions: 'bg-slate-50 dark:bg-gray-800 p-4',
+  },
+}