feat(vue): Breadcrumbs components

konstaui · Apr 28, 2022 · 802aec1 · 802aec1
1 parent 3f682dc
commit 802aec1
Show file tree

Hide file tree

Showing 9 changed files with 349 additions and 49 deletions.
diff --git a/kitchen-sink/react/pages/Breadcrumbs.jsx b/kitchen-sink/react/pages/Breadcrumbs.jsx
@@ -13,18 +13,9 @@ import {
   Popover,
   List,
   ListItem,
-  Icon,
   Link,
 } from 'konsta/react';
 
-import {
-  HouseFill,
-  SquareListFill,
-  DevicePhonePortrait,
-} from 'framework7-icons/react';
-
-import { MdHome, MdList, MdSmartphone } from 'react-icons/md';
-
 export default function BreadcrumbsPage() {
   const isPreview = document.location.href.includes('examplePreview');
 
@@ -125,46 +116,6 @@ export default function BreadcrumbsPage() {
           />
         </List>
       </Popover>
-
-      <BlockTitle>With Icons</BlockTitle>
-      <Block strong>
-        <Breadcrumbs>
-          <BreadcrumbsItem>
-            <Link colors={{ text: 'text-inherit' }}>
-              <Icon
-                className="text-[24px]"
-                ios={<HouseFill />}
-                material={<MdHome />}
-              />
-              <span>Home</span>
-            </Link>
-          </BreadcrumbsItem>
-          <BreadcrumbsSeparator />
-          <BreadcrumbsItem>
-            <Link colors={{ text: 'text-inherit' }}>
-              <Icon
-                className="text-[24px]"
-                ios={<SquareListFill />}
-                material={<MdList />}
-              />
-              <span>Catalog</span>
-            </Link>
-          </BreadcrumbsItem>
-          <BreadcrumbsSeparator />
-          <BreadcrumbsItem>
-            <Link colors={{ text: 'text-inherit' }}>
-              <Icon
-                className="text-[24px]"
-                ios={<DevicePhonePortrait />}
-                material={<MdSmartphone />}
-              />
-              <span>Phones</span>
-            </Link>
-          </BreadcrumbsItem>
-          <BreadcrumbsSeparator />
-          <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
-        </Breadcrumbs>
-      </Block>
     </Page>
   );
 }

diff --git a/kitchen-sink/vue/pages/Breadcrumbs.vue b/kitchen-sink/vue/pages/Breadcrumbs.vue
@@ -0,0 +1,149 @@
+<template>
+  <k-page>
+    <k-navbar title="Breadcrumbs">
+      <template v-if="!isPreview" #left>
+        <k-navbar-back-link @click="() => history.back()" />
+      </template>
+    </k-navbar>
+
+    <k-block strong>
+      <p>
+        Breadcrumbs allow users to keep track and maintain awareness of their
+        locations within the app or website. They should be used for large sites
+        and apps with hierarchically arranged pages.
+      </p>
+    </k-block>
+
+    <k-block-title>Basic</k-block-title>
+    <k-block strong>
+      <k-breadcrumbs>
+        <k-breadcrumbs-item>
+          <k-link :colors="{ text: 'text-inherit' }">Home</k-link>
+        </k-breadcrumbs-item>
+        <k-breadcrumbs-separator />
+        <k-breadcrumbs-item>
+          <k-link :colors="{ text: 'text-inherit' }">Catalog</k-link>
+        </k-breadcrumbs-item>
+        <k-breadcrumbs-separator />
+        <k-breadcrumbs-item active>Phones</k-breadcrumbs-item>
+      </k-breadcrumbs>
+    </k-block>
+
+    <k-block-title>Scrollable</k-block-title>
+    <k-block-header
+      >Breadcrumbs will be scrollable if they don't fit the
+      screen</k-block-header
+    >
+    <k-block strong>
+      <k-breadcrumbs>
+        <k-breadcrumbs-item>
+          <k-link :colors="{ text: 'text-inherit' }">Home</k-link>
+        </k-breadcrumbs-item>
+        <k-breadcrumbs-separator />
+        <k-breadcrumbs-item>
+          <k-link :colors="{ text: 'text-inherit' }">Catalog</k-link>
+        </k-breadcrumbs-item>
+        <k-breadcrumbs-separator />
+        <k-breadcrumbs-item>
+          <k-link :colors="{ text: 'text-inherit' }">Phones</k-link>
+        </k-breadcrumbs-item>
+        <k-breadcrumbs-separator />
+        <k-breadcrumbs-item>
+          <k-link :colors="{ text: 'text-inherit' }">Apple</k-link>
+        </k-breadcrumbs-item>
+        <k-breadcrumbs-separator />
+        <k-breadcrumbs-item active>iPhone 12</k-breadcrumbs-item>
+      </k-breadcrumbs>
+    </k-block>
+
+    <k-block-title>Collapsed</k-block-title>
+    <k-block strong>
+      <k-breadcrumbs>
+        <k-breadcrumbs-item>
+          <k-link :colors="{ text: 'text-inherit' }">Home</k-link>
+        </k-breadcrumbs-item>
+        <k-breadcrumbs-separator />
+        <k-breadcrumbs-collapsed
+          ref="popoverTargetRef"
+          @click="() => (popoverOpened = true)"
+        />
+
+        <k-breadcrumbs-separator />
+        <k-breadcrumbs-item active>iPhone 12</k-breadcrumbs-item>
+      </k-breadcrumbs>
+    </k-block>
+    <k-popover
+      :opened="popoverOpened"
+      :target="popoverTargetRef"
+      style="width: 120px"
+      @backdropclick="() => (popoverOpened = false)"
+    >
+      <k-list nested :hairlines="false" :colors="{ bg: 'bg-transparent' }">
+        <k-list-item
+          link
+          title="Catalog"
+          @click="() => (popoverOpened = false)"
+        />
+        <k-list-item
+          link
+          title="Phones"
+          @click="() => (popoverOpened = false)"
+        />
+        <k-list-item
+          link
+          title="Apple"
+          @click="() => (popoverOpened = false)"
+        />
+      </k-list>
+    </k-popover>
+  </k-page>
+</template>
+<script>
+  import { ref } from 'vue';
+  import {
+    kPage,
+    kNavbar,
+    kNavbarBackLink,
+    kLink,
+    kBlock,
+    kBlockTitle,
+    kBlockHeader,
+    kBreadcrumbs,
+    kBreadcrumbsItem,
+    kBreadcrumbsSeparator,
+    kBreadcrumbsCollapsed,
+    kPopover,
+    kList,
+    kListItem,
+  } from 'konsta/vue';
+
+  export default {
+    name: 'BreadcrumbsPage',
+    components: {
+      kPage,
+      kNavbar,
+      kNavbarBackLink,
+      kLink,
+      kBlock,
+      kBlockTitle,
+      kBlockHeader,
+      kBreadcrumbs,
+      kBreadcrumbsItem,
+      kBreadcrumbsSeparator,
+      kBreadcrumbsCollapsed,
+      kPopover,
+      kList,
+      kListItem,
+    },
+    setup() {
+      const popoverOpened = ref(false);
+      const popoverTargetRef = ref(null);
+      return {
+        isPreview: document.location.href.includes('examplePreview'),
+        history: window.history,
+        popoverOpened,
+        popoverTargetRef,
+      };
+    },
+  };
+</script>
diff --git a/kitchen-sink/vue/routes.js b/kitchen-sink/vue/routes.js
@@ -1,5 +1,6 @@
 import Home from './pages/Home.vue';
 import Badge from './pages/Badge.vue';
+import Breadcrumbs from './pages/Breadcrumbs.vue';
 import Buttons from './pages/Buttons.vue';
 import Cards from './pages/Cards.vue';
 import Checkbox from './pages/Checkbox.vue';
@@ -30,6 +31,7 @@ import Toolbar from './pages/Toolbar.vue';
 const routes = [
   Home,
   Badge,
+  Breadcrumbs,
   Buttons,
   Cards,
   Checkbox,

diff --git a/src/shared/calc-popover-position.js b/src/shared/calc-popover-position.js
@@ -14,6 +14,8 @@ export const calcPopoverPosition = ({
     targetEl = targetEl.value;
   } else if (targetEl.el) {
     targetEl = targetEl.el;
+  } else if (targetEl.$el) {
+    targetEl = targetEl.$el;
   }
 
   if (typeof targetEl === 'string') {

diff --git a/src/vue/components/Breadcrumbs.vue b/src/vue/components/Breadcrumbs.vue
@@ -0,0 +1,41 @@
+<template>
+  <component :is="component" :class="c.base">
+    <slot />
+  </component>
+</template>
+<script>
+  import { BreadcrumbsClasses } from '../../shared/classes/BreadcrumbsClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+
+  export default {
+    name: 'k-breadcrumbs',
+    props: {
+      component: {
+        type: String,
+        default: 'span',
+      },
+      ios: {
+        type: Boolean,
+        default: undefined,
+      },
+      material: {
+        type: Boolean,
+        default: undefined,
+      },
+      fontSizeIos: {
+        type: String,
+        default: 'text-[17px]',
+      },
+      fontSizeMaterial: {
+        type: String,
+        default: 'text-[16px]',
+      },
+    },
+    setup(props) {
+      const c = useThemeClasses(props, () => BreadcrumbsClasses(props));
+      return {
+        c,
+      };
+    },
+  };
+</script>
diff --git a/src/vue/components/BreadcrumbsCollapsed.vue b/src/vue/components/BreadcrumbsCollapsed.vue
@@ -0,0 +1,52 @@
+<template>
+  <component :is="component" :class="c.base">
+    <span :class="c.dot" />
+    <span :class="c.dot" />
+    <span :class="c.dot" />
+    <slot />
+  </component>
+</template>
+<script>
+  import { computed } from 'vue';
+  import { BreadcrumbsCollapsedClasses } from '../../shared/classes/BreadcrumbsCollapsedClasses.js';
+  import { cls } from '../../shared/cls.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+
+  export default {
+    name: 'k-breadcrumbs-collapsed',
+    props: {
+      component: {
+        type: String,
+        default: 'span',
+      },
+      ios: {
+        type: Boolean,
+        default: undefined,
+      },
+      material: {
+        type: Boolean,
+        default: undefined,
+      },
+      colors: {
+        type: Object,
+      },
+    },
+    setup(props) {
+      const colors = computed(() => ({
+        bg: cls(
+          'bg-black bg-opacity-15',
+          useDarkClasses('dark:bg-white dark:bg-opacity-15')
+        ),
+        dotBg: cls('bg-black', useDarkClasses('dark:bg-white')),
+        ...props.colors,
+      }));
+      const c = useThemeClasses(props, () =>
+        BreadcrumbsCollapsedClasses(props, colors.value)
+      );
+      return {
+        c,
+      };
+    },
+  };
+</script>
diff --git a/src/vue/components/BreadcrumbsItem.vue b/src/vue/components/BreadcrumbsItem.vue
@@ -0,0 +1,53 @@
+<template>
+  <component :is="component" :class="c.base">
+    <slot />
+  </component>
+</template>
+<script>
+  import { computed } from 'vue';
+  import { BreadcrumbsItemClasses } from '../../shared/classes/BreadcrumbsItemClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { cls } from '../../shared/cls.js';
+
+  export default {
+    name: 'k-breadcrumbs-item',
+    props: {
+      component: {
+        type: String,
+        default: 'span',
+      },
+      ios: {
+        type: Boolean,
+        default: undefined,
+      },
+      material: {
+        type: Boolean,
+        default: undefined,
+      },
+      colors: {
+        type: Object,
+      },
+      active: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const colors = computed(() => ({
+        text: cls(
+          'text-black text-opacity-55',
+          useDarkClasses('dark:text-white dark:text-opacity-55')
+        ),
+        textActive: cls('text-black', useDarkClasses('dark:text-white')),
+        ...props.colors,
+      }));
+      const c = useThemeClasses(props, () =>
+        BreadcrumbsItemClasses(props, colors.value)
+      );
+      return {
+        c,
+      };
+    },
+  };
+</script>