From 6409c47e13483911f704bb8336da2d61b2af4742 Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Mon, 27 Mar 2023 13:45:53 +0300
Subject: [PATCH] feat: Reimplement SourceLink and Ellipsis components from
 Elements (#869)

---
 components/app/Ellipsis.vue    | 66 ++++++++++++++++++++++++++++++++++
 components/docs/SourceLink.vue | 21 +++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 components/app/Ellipsis.vue
 create mode 100644 components/docs/SourceLink.vue

diff --git a/components/app/Ellipsis.vue b/components/app/Ellipsis.vue
new file mode 100644
index 000000000..87f462930
--- /dev/null
+++ b/components/app/Ellipsis.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  width: {
+    type: String,
+    default: '10rem'
+  },
+  height: {
+    type: String,
+    default: '10rem'
+  },
+  zIndex: {
+    type: String,
+    default: '10'
+  },
+  top: {
+    type: String,
+    default: '0'
+  },
+  left: {
+    type: String,
+    default: 'auto'
+  },
+  right: {
+    type: String,
+    default: 'auto'
+  },
+  blur: {
+    type: String,
+    default: '50px'
+  },
+  colors: {
+    type: Array as PropType<string[]>,
+    default: () => ['rgba(0, 71, 225, 0.22)', 'rgba(26, 214, 255, 0.22)', 'rgba(0, 220, 130, 0.22)']
+  }
+})
+</script>
+
+<template>
+  <div class="ellipsis">
+    <div class="ellipsis-item" />
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.ellipsis': {
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: (props) => props.top,
+    insetInlineStart: (props) => props.left,
+    insetInlineEnd: (props) => props.right,
+    zIndex: (props) => props.zIndex,
+    width: '-webkit-fill-available',
+    maxWidth: (props) => props.width,
+    height: (props) => props.height,
+    filter: (props) => `blur(${props.blur})`,
+    '.ellipsis-item': {
+      width: '100%',
+      height: '100%',
+      background: (props) => `linear-gradient(97.62deg, ${props?.colors?.[0]} 2.27%, ${props?.colors?.[1]} 50.88%, ${props?.colors?.[2]} 98.48%)`,
+    }
+  }
+})
+</style>
diff --git a/components/docs/SourceLink.vue b/components/docs/SourceLink.vue
new file mode 100644
index 000000000..7e803e06b
--- /dev/null
+++ b/components/docs/SourceLink.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps({
+  source: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <ProseP>
+    <!--
+    <GithubLink v-slot="data" :source="source" :edit="false">
+      <NuxtLink :href="data?.url" target="_blank" rel="noopener" class="hover:text-primary-500 flex items-center gap-1 text-sm font-semibold">
+        <Icon name="fa-brands:github" class="mr-1 h-5 w-5" />
+        <span>Show Source</span>
+      </NuxtLink>
+    </GithubLink>
+    -->
+  </ProseP>
+</template>