@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/label/Label.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+const labelProps = {
+  ...useCommon.props(),
+  label: String,
+  disabled: Boolean,
+  required: Boolean,
+  block: Boolean,
+  isInsideForm: Boolean,
+  tag: {
+    type: String,
+    default: 'label',
+  },
+}
+
+export type LabelProps = ExtractPublicPropTypes<typeof labelProps>
+
+type InternalClasses = 'wrapper' | 'label'
+export interface LabelTheme extends ThemeComponent<LabelProps, InternalClasses> {}
+
+export default {
+  name: 'XLabel',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+
+const props = defineProps(labelProps)
+
+const { styles, classes, className } = useTheme('Label', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="[className, classes.wrapper]"
+  >
+    <component
+      :is="tag === 'fieldset' ? 'legend' : 'p'"
+      v-if="label"
+      :title="label"
+      :class="classes.label"
+    >
+      {{ label }}
+    </component>
+    <slot></slot>
+  </component>
+</template>

package/src/components/label/__tests__/Label.spec.ts

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

package/src/components/label/index.ts

@@ -0,0 +1,2 @@
+export { default as XLabel } from './Label.vue'
+export type { LabelProps, LabelTheme } from './Label.vue'

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

@@ -0,0 +1,27 @@
+import type { LabelTheme } from '../Label.vue'
+
+const theme: LabelTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes  = ['block relative align-bottom focus:outline-none']
+
+      if (props.isInsideForm) classes.push('mb-3')
+      if (props.block) classes.push('w-full')
+
+      return classes
+    },
+
+    label: ({ props }) => {
+      const classes = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
+
+      if (props.size === 'xs') return classes + ' text-xs'
+      else if (props.size === 'sm') return classes + ' text-sm'
+      else if (props.size === 'lg') return classes + ' text-lg'
+      else if (props.size === 'xl') return classes + ' text-xl'
+
+      return classes
+    },
+  },
+}
+
+export default theme

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

@@ -0,0 +1,20 @@
+import type { LabelTheme } from '../Label.vue'
+
+import BaseTheme from './Label.base.theme'
+
+const theme: LabelTheme = {
+  classes: {
+    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',
+  },
+}
+
+export default theme

package/src/components/link/Link.vue

@@ -0,0 +1,94 @@
+<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>
+
+type InternalClasses = 'wrapper'
+export interface LinkTheme extends ThemeComponent<LinkProps, InternalClasses> {}
+
+export default { name: 'XLink' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { externalIcon } from '../../common/icons'
+
+import XIcon from '../icon/Icon.vue'
+
+const props = defineProps(linkProps)
+
+const { styles, classes, className } = useTheme('Link', {}, props)
+</script>
+
+<template>
+  <component
+    :is="to ? (tag !== 'a' ? tag : 'router-link') : tag"
+    :to="to"
+    :style="styles"
+    :class="[
+      className,
+      $style['link'],
+      classes.wrapper,
+      [shadow ? $style['link--shadow'] : ''],
+      { 'underline': underline },
+    ]"
+  >
+    <span
+      v-if="external"
+      class="inline-flex items-center"
+    >
+      <slot></slot>
+      <x-icon :icon="externalIcon" />
+    </span>
+    <template v-else>
+      <slot></slot>
+    </template>
+  </component>
+</template>
+
+<style lang="postcss" module scoped>
+  .link {
+    color: var(--x-link-text);
+
+    &:hover {
+      color: var(--x-link-text-hover, var(--x-link-text));
+    }
+
+    &--shadow {
+      box-shadow: inset 0 -0.315em 0 0 var(--x-link-shadow);
+
+      &:hover {
+        box-shadow: inset 0 -1.325em 0 0 var(--x-link-shadow);
+      }
+    }
+
+    :global(.dark) &,
+    &:global(.dark) {
+      color: var(--x-link-dark-text);
+
+      &:hover {
+        color: var(--x-link-dark-text-hover, var(--x-link-dark-text));
+      }
+
+      &--shadow {
+        box-shadow: inset 0 -0.315em 0 0 var(--x-link-dark-shadow);
+
+        &:hover {
+          box-shadow: inset 0 -1.325em 0 0 var(--x-link-dark-shadow);
+        }
+      }
+    }
+  }
+</style>

package/src/components/link/__tests__/Link.spec.ts

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

package/src/components/link/index.ts

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

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

@@ -0,0 +1,28 @@
+import type { LinkTheme } from '../Link.vue'
+
+const theme: LinkTheme = {
+  classes: {
+    wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex',
+  },
+
+  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/link/theme/Link.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { LinkTheme } from '../Link.vue'
+
+import BaseTheme from './Link.base.theme'
+
+const theme: LinkTheme = BaseTheme
+
+export default theme

package/src/components/loader/Loader.vue

@@ -0,0 +1,59 @@
+<script lang="ts">
+const loaderProps = {
+  ...useCommon.props(),
+  status: {
+    type: String as PropType<LoaderStatus>,
+    default: 'active',
+  },
+  icon: String,
+  label: String,
+}
+
+export type LoaderStatus = 'active' | 'success' | 'error'
+export type LoaderProps = ExtractPublicPropTypes<typeof loaderProps>
+
+type InternalClasses = 'wrapper' | 'iconSuccess' | 'iconError' | 'label'
+export interface LoaderTheme extends ThemeComponent<LoaderProps, InternalClasses> {}
+
+export default {
+  name: 'XLoader',
+  validators: {
+    ...useCommon.validators(),
+    status: ['active', 'success', 'error'],
+  },
+}
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XIcon from '../../components/icon/Icon.vue'
+import XSpinner from '../../components/spinner/Spinner.vue'
+
+import { successIcon, errorIcon } from '../../common/icons'
+
+const props = defineProps(loaderProps)
+
+const { styles, classes, className } = useTheme('Loader', {}, props)
+</script>
+
+<template>
+  <div :class="[className, classes.wrapper]" :style="styles">
+    <x-spinner v-if="status === 'active'" :size="size" :icon="icon"/>
+    <x-icon
+      v-else-if="status === 'success'"
+      :class="classes.iconSuccess"
+      :size="size"
+      :icon="successIcon"
+    />
+    <x-icon
+      v-else-if="status === 'error'"
+      :class="classes.iconError"
+      :size="size"
+      :icon="errorIcon"
+    />
+    <span v-if="label" :class="classes.label">{{ label }}</span>
+  </div>
+</template>

package/src/components/loader/__tests__/Loader.spec.ts

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

package/src/components/loader/index.ts

@@ -0,0 +1,2 @@
+export { default as XLoader } from './Loader.vue'
+export type { LoaderProps, LoaderTheme } from './Loader.vue'

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

@@ -0,0 +1,12 @@
+import type { LoaderTheme } from '../Loader.vue'
+
+const theme: LoaderTheme = {
+  classes: {
+    wrapper: 'inline-flex items-center justify-center',
+    iconSuccess: 'text-green-500',
+    iconError: 'text-red-500',
+    label: 'mx-2 text-sm',
+  },
+}
+
+export default theme

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

@@ -0,0 +1,12 @@
+import type { LoaderTheme } from '../Loader.vue'
+
+const theme: LoaderTheme = {
+  classes: {
+    wrapper: 'inline-flex items-center justify-center',
+    iconSuccess: 'text-green-500',
+    iconError: 'text-red-500',
+    label: 'mx-2 text-sm',
+  },
+}
+
+export default theme

package/src/components/menu/Menu.vue

@@ -0,0 +1,173 @@
+<script lang="ts">
+const menuProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  items: Array as PropType<MenuArrayItem[]>,
+  collapsible: {
+    type: Boolean,
+    default: true,
+  },
+  collapseIcon: String,
+  expanded: Boolean,
+  disabled: Boolean,
+  rounded: {
+    type: Boolean,
+    default: true,
+  },
+  filled: {
+    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>
+
+type InternalClasses = 'wrapper'
+export interface MenuTheme extends ThemeComponent<MenuProps, InternalClasses> {}
+
+export default {
+  name: 'XMenu',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useCommon, type Size } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XMenuItem from './MenuItem.vue'
+import XAccordionItem from '../../components/accordion/AccordionItem.vue'
+import XDivider from '../../components/divider/Divider.vue'
+
+const props = defineProps(menuProps)
+
+defineEmits(['expand', 'item-click'])
+
+const { styles, classes, className } = useTheme('Menu', {}, props)
+</script>
+
+<template>
+  <div
+    v-if="items"
+    :style="styles"
+    :class="[
+      'space-y-1',
+      className,
+      classes.wrapper
+    ]"
+  >
+    <template v-for="(item, index) in items" :key="index">
+      <template v-if="item.items">
+        <x-accordion-item
+          v-if="item.collapsible !== false"
+          :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"
+              :disabled="disabled || item.disabled"
+              class="pr-10 font-medium"
+            />
+          </template>
+          <template #content="{ expand }">
+            <x-menu
+              class="border-l ml-4 border-gray-100 dark:border-gray-700"
+              :class="{ 'pl-1': filled }"
+              :items="item.items"
+              :color="item.color || color"
+              :size="item.size || size"
+              :collapsible="collapsible"
+              :collapse-icon="item.collapseIcon || collapseIcon"
+              :expanded="item.expanded || expanded"
+              :disabled="disabled || item.disabled"
+              :rounded="rounded"
+              :filled="filled"
+              @expand="expand(false)"
+              @item-click="$emit('item-click')"
+            />
+          </template>
+        </x-accordion-item>
+        <template v-else>
+          <x-menu-item
+            :item="item"
+            :rounded="rounded"
+            :color="item.color || color"
+            :filled="item.filled || filled"
+            :size="item.size || size"
+            :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="{ 'pl-1': filled }"
+            :items="item.items"
+            :color="item.color || color"
+            :size="item.size || size"
+            :collapsible="collapsible"
+            :collapse-icon="item.collapseIcon || collapseIcon"
+            :expanded="item.expanded || expanded"
+            :disabled="disabled || item.disabled"
+            :rounded="rounded"
+            :filled="filled"
+            @expand="$emit('expand')"
+          />
+        </template>
+      </template>
+      <template v-else>
+        <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"
+          :disabled="disabled || item.disabled"
+          :class="{ 'my-2': item.divider }"
+          @click="$emit('item-click')"
+          @active="$emit('expand')"
+        />
+      </template>
+    </template>
+  </div>
+</template>