frappe-ui 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -50,6 +50,7 @@
     "@tiptap/starter-kit": "^2.0.3",
     "@tiptap/suggestion": "^2.0.3",
     "@tiptap/vue-3": "^2.0.3",
+    "@vueuse/core": "^10.4.1",
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
     "showdown": "^2.1.0",

package/src/components/Badge.vue

@@ -9,7 +9,7 @@
     >
       <slot name="prefix"></slot>
     </div>
-    <slot>{{ props.label }}</slot>
+    <slot>{{ props.label?.toString() }}</slot>
     <div
       :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.suffix"
@@ -22,11 +22,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+interface Label {
+  toString(): string
+}
+
 interface BadgeProps {
   theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
   size?: 'sm' | 'md' | 'lg'
   variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
-  label?: string
+  label?: Label | string | number
 }
 
 const props = withDefaults(defineProps<BadgeProps>(), {

package/src/components/Breadcrumbs.story.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { logEvent } from 'histoire/client'
+import Breadcrumbs from './Breadcrumbs.vue'
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant title="With route option">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            route: { name: 'Home' },
+          },
+          {
+            label: 'Views',
+            route: '/components',
+          },
+          {
+            label: 'List',
+            route: '/components/breadcrumbs',
+          },
+        ]"
+      />
+    </Variant>
+    <Variant title="With onClick option">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+          {
+            label: 'Views',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+          {
+            label: 'Kanban',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+        ]"
+      />
+    </Variant>
+
+    <Variant title="With prefix slot">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            icon: '🏡',
+            route: { name: 'Home' },
+          },
+          {
+            label: 'Views',
+            icon: '🏞️',
+            route: '/components',
+          },
+          {
+            label: 'List',
+            icon: '📃',
+            route: '/components/breadcrumbs',
+          },
+        ]"
+      >
+        <template #prefix="{ item }">
+          <span class="mr-1">
+            {{ item.icon }}
+          </span>
+        </template>
+      </Breadcrumbs>
+    </Variant>
+  </Story>
+</template>

package/src/components/Breadcrumbs.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="flex min-w-0 items-center">
+    <template v-if="dropdownItems.length">
+      <Dropdown class="h-7" :options="dropdownItems">
+        <Button variant="ghost">
+          <template #icon>
+            <svg
+              class="w-4 text-gray-600"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="1" />
+              <circle cx="19" cy="12" r="1" />
+              <circle cx="5" cy="12" r="1" />
+            </svg>
+          </template>
+        </Button>
+      </Dropdown>
+      <span class="ml-1 mr-0.5 text-base text-gray-500" aria-hidden="true">
+        /
+      </span>
+    </template>
+    <div
+      class="flex min-w-0 items-center overflow-hidden text-ellipsis whitespace-nowrap"
+    >
+      <template v-for="(item, i) in crumbs" :key="item.label">
+        <component
+          :is="item.route ? 'router-link' : 'button'"
+          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400"
+          :class="[
+            i == crumbs.length - 1
+              ? 'text-gray-900'
+              : 'text-gray-600 hover:text-gray-700',
+          ]"
+          v-bind="item.route ? { to: item.route } : { onClick: item.onClick }"
+        >
+          <slot name="prefix" :item="item" />
+          <span>
+            {{ item.label }}
+          </span>
+        </component>
+        <span
+          v-if="i != crumbs.length - 1"
+          class="mx-0.5 text-base text-gray-500"
+          aria-hidden="true"
+        >
+          /
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { computed } from 'vue'
+import { RouterLinkProps, useRouter } from 'vue-router'
+import Dropdown from '../components/Dropdown.vue'
+import Button from '../components/Button.vue'
+
+interface BreadcrumbItem {
+  label: string
+  route?: RouterLinkProps['to']
+  onClick?: () => void
+  [key: string]: any
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[]
+}
+
+const props = defineProps<BreadcrumbsProps>()
+
+const router = useRouter()
+const { width } = useWindowSize()
+
+const items = computed(() => {
+  return (props.items || []).filter(Boolean)
+})
+
+const dropdownItems = computed(() => {
+  if (width.value > 640) return []
+
+  let allExceptLastTwo = items.value.slice(0, -2)
+  return allExceptLastTwo.map((item) => {
+    let onClick = item.onClick ? item.onClick : () => router.push(item.route)
+    return {
+      ...item,
+      icon: null,
+      label: item.label,
+      onClick,
+    }
+  })
+})
+
+const crumbs = computed(() => {
+  if (width.value > 640) return items.value
+
+  let lastTwo = items.value.slice(-2)
+  return lastTwo
+})
+</script>

package/src/components/Tabs.story.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { h, reactive } from 'vue'
+import Tabs from './Tabs.vue'
+import FeatherIcon from './FeatherIcon.vue'
+const state = reactive({
+  index: 0,
+  tabs_without_icon: [
+    {
+      label: 'Github',
+      content:
+        'Github is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.',
+    },
+    {
+      label: 'Twitter',
+      content:
+        'Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets".',
+    },
+    {
+      label: 'Linkedin',
+      content:
+        'LinkedIn is an American business and employment-oriented online service that operates via websites and mobile apps.',
+    },
+  ],
+  tabs_with_icon: [
+    {
+      label: 'Github',
+      content:
+        'Github is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.',
+      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'github' }),
+    },
+    {
+      label: 'Twitter',
+      content:
+        'Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets".',
+      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'twitter' }),
+    },
+    {
+      label: 'Linkedin',
+      content:
+        'LinkedIn is an American business and employment-oriented online service that operates via websites and mobile apps.',
+      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'linkedin' }),
+    },
+  ],
+})
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: '80%' }">
+    <Variant title="Without Icon">
+      <Tabs
+        v-slot="{ tab }"
+        v-model="state.index"
+        :tabs="state.tabs_without_icon"
+      >
+        <div class="p-5">
+          {{ tab.content }}
+        </div>
+      </Tabs>
+    </Variant>
+    <Variant title="With Icon">
+      <Tabs v-slot="{ tab }" v-model="state.index" :tabs="state.tabs_with_icon">
+        <div class="p-5">
+          {{ tab.content }}
+        </div>
+      </Tabs>
+    </Variant>
+
+    <template #controls>
+      <HstNumber v-model="state.index" title="Tab Index" />
+    </template>
+  </Story>
+</template>

package/src/components/Tabs.vue

@@ -0,0 +1,97 @@
+<template>
+  <TabGroup
+    as="div"
+    class="flex flex-1 flex-col"
+    :defaultIndex="changedIndex"
+    :selectedIndex="changedIndex"
+    @change="(idx) => (changedIndex = idx)"
+  >
+    <TabList class="relative flex items-center gap-6 border-b pl-5">
+      <Tab
+        ref="tabRef"
+        as="template"
+        v-for="(tab, i) in tabs"
+        :key="i"
+        v-slot="{ selected }"
+        class="focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
+      >
+        <slot name="tab" v-bind="{ tab, selected }">
+          <button
+            class="-mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+            :class="{ 'text-gray-900': selected }"
+          >
+            <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+            {{ tab.label }}
+          </button>
+        </slot>
+      </Tab>
+      <div
+        ref="indicator"
+        class="absolute -bottom-px h-px bg-gray-900"
+        :style="{ left: `${indicatorLeftValue}px` }"
+      />
+    </TabList>
+    <TabPanels class="flex flex-1 overflow-hidden">
+      <TabPanel
+        class="flex flex-1 flex-col overflow-y-auto focus:outline-none"
+        v-for="(tab, i) in tabs"
+        :key="i"
+      >
+        <slot v-bind="{ tab }" />
+      </TabPanel>
+    </TabPanels>
+  </TabGroup>
+</template>
+
+<script setup>
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
+import { TransitionPresets, useTransition } from '@vueuse/core'
+import { ref, watch, computed, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  tabs: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const changedIndex = computed({
+  get: () => props.modelValue,
+  set: (index) => emit('update:modelValue', index),
+})
+
+const tabRef = ref([])
+const indicator = ref(null)
+const tabsLength = ref(props.tabs?.length)
+
+let indicatorLeft = ref(0)
+
+const indicatorLeftValue = useTransition(indicatorLeft, {
+  duration: 250,
+  ease: TransitionPresets.easeOutCubic,
+})
+
+function moveIndicator(index) {
+  if (index >= tabsLength.value) {
+    index = tabsLength.value - 1
+  }
+  const selectedTab = tabRef.value[index].el
+  indicator.value.style.width = `${selectedTab.offsetWidth}px`
+  indicatorLeft.value = selectedTab.offsetLeft
+}
+
+watch(changedIndex, (index) => {
+  if (index >= tabsLength.value) {
+    changedIndex.value = tabsLength.value - 1
+  }
+  nextTick(() => moveIndicator(index))
+})
+
+onMounted(() => moveIndicator(changedIndex.value))
+</script>

package/src/index.js

@@ -3,6 +3,7 @@ export { default as Alert } from './components/Alert.vue'
 export { default as Autocomplete } from './components/Autocomplete.vue'
 export { default as Avatar } from './components/Avatar.vue'
 export { default as Badge } from './components/Badge.vue'
+export { default as Breadcrumbs } from './components/Breadcrumbs.vue'
 export { default as Button } from './components/Button.vue'
 export { default as Card } from './components/Card.vue'
 export { default as Checkbox } from './components/Checkbox.vue'
@@ -27,6 +28,7 @@ export { default as Select } from './components/Select.vue'
 export { default as Spinner } from './components/Spinner.vue'
 export { default as Switch } from './components/Switch.vue'
 export { default as TabButtons } from './components/TabButtons.vue'
+export { default as Tabs } from './components/Tabs.vue'
 export { default as TextInput } from './components/TextInput.vue'
 export { default as Textarea } from './components/Textarea.vue'
 export {