@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/src/components/badge/Badge.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+
+export default defineComponent({
+  name: 'XBadge',
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    position: {
+      type: String as PropType<'top' | 'bottom'>,
+      default: 'top',
+    },
+    align: {
+      type: String as PropType<'left' | 'right'>,
+      default: 'right',
+    },
+    animated: Boolean,
+    outlined: Boolean,
+    icon: String,
+    show: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props, { slots }) {
+    const css = useCSS('badge')
+    const colors = useColors()
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color)
+
+      return css.get('bg', color[500])
+    })
+
+    const positionClasses = computed(() => {
+      const classes = []
+
+      if (props.position === 'top') classes.push('top-0')
+      if (props.position === 'bottom') classes.push('bottom-0')
+      if (props.align === 'left') classes.push('left-0')
+      if (props.align === 'right') classes.push('right-0')
+      if (slots.content) classes.push('-m-[7.5%]')
+      else if (props.outlined) {
+        classes.push('-m-[5%]')
+      } else {
+        classes.push('-m-[3.5%]')
+      }
+
+      return classes
+    })
+
+    return {
+      styles,
+      positionClasses,
+    }
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="inline-block"
+    :style="styles"
+  >
+    <div class="relative inline-block">
+      <slot></slot>
+      <div
+        v-if="show"
+        class="absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]"
+        :class="[
+          positionClasses,
+          {
+            'border-2 border-gray-50 dark:border-gray-900': outlined,
+          }
+        ]"
+      >
+        <div
+          v-if="animated"
+          class="animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
+        ></div>
+        <div
+          class="text-xs text-white overflow-hidden"
+          :class="[
+            $slots.content ? 'flex items-center justify-center min-w-[1.25rem] h-5 px-0.5' : {
+              'p-1': size === 'xs',
+              'p-[0.312rem]': size === 'sm',
+              'p-1.5': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
+              'p-2': size === 'lg',
+              'p-2.5': size === 'xl',
+            }
+          ]"
+        >
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </div>
+  </component>
+</template>

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+
+export type BreadcrumbItem = {
+  label: string,
+  to?: string | object,
+  href?: string,
+  color?: string,
+  icon?: string,
+  shadow?: boolean,
+  underline?: boolean
+}
+
+export default defineComponent({
+  name: 'XBreadcrumbs',
+
+  props: {
+    items: Array as PropType<Array<BreadcrumbItem>>,
+    icon: String,
+    color: String,
+    shadow: Boolean,
+    underline: Boolean,
+  },
+
+  setup(props) {
+    const arrowIcon = '<path d="M13 7l5 5m0 0l-5 5m5-5H6" />'
+    const lastItem = computed(() => props.items && props.items.length > 0 ? props.items[props.items.length - 1] : undefined)
+
+    return {
+      arrowIcon,
+      lastItem,
+    }
+  },
+})
+</script>
+
+<template>
+  <nav v-if="items && items.length > 0" aria-label="Breadcrumb">
+    <ul class="flex items-center flex-wrap">
+      <li v-for="(item, index) in items?.slice(0,-1)" :key="index" class="flex items-center">
+        <x-link
+          :to="item.to"
+          :href="item.href"
+          :color="item.color || color"
+          :shadow="item.shadow || shadow"
+          :underline="item.underline|| underline"
+          class="flex items-center"
+        >
+          <x-icon v-if="item.icon" :icon="item.icon" class="mr-1.5"/>
+          {{ item.label }}
+        </x-link>
+        <x-icon :icon="icon || arrowIcon" class="text-gray-400 mx-1.5 shrink-0" size="sm" />
+      </li>
+      <li v-if="lastItem" class="font-semibold">
+        <x-icon v-if="lastItem.icon" :icon="lastItem.icon" class="mr-1"/>
+        {{ lastItem.label }}
+      </li>
+    </ul>
+  </nav>
+</template>