use dialog instead, rather than creating route

natserract · Nov 4, 2024 · d2ceaf7 · d2ceaf7
1 parent 1903495
commit d2ceaf7
Show file tree

Hide file tree

Showing 15 changed files with 265 additions and 33 deletions.
diff --git a/examples/embeddable/index.html b/examples/embeddable/index.html
@@ -7,8 +7,11 @@
 
 </head>
 <body>
-<search-input>
-</search-input>
+<social-wall>
+  <social-wall-tags></social-wall-tags>
+  <social-wall-search></social-wall-search>
+  <social-wall-results></social-wall-results>
+</social-wall>
 </body>
-<script src="./dist/web-components/assets/index.98b420ff.js"></script>
+<script src="./dist/web-components/assets/index.edabc603.js"></script>
 </html>
diff --git a/packages/components/components.d.ts b/packages/components/components.d.ts
@@ -5,11 +5,13 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    ComponentsSearchSearchInput: typeof import('./src/components/search/SearchInput.vue')['default']
+    App: typeof import('./src/App.vue')['default']
     ComponentsSocialWallSocialWall: typeof import('./src/components/social-wall/SocialWall.vue')['default']
-    ComponentsSocialWallSocialWallContainer: typeof import('./src/components/social-wall/SocialWallContainer.vue')['default']
-    ComponentsSocialWallSocialWallHeader: typeof import('./src/components/social-wall/SocialWallHeader.vue')['default']
+    ComponentsSocialWallSocialWallDetail: typeof import('./src/components/social-wall/SocialWallDetail.vue')['default']
+    ComponentsSocialWallSocialWallDialog: typeof import('./src/components/social-wall/SocialWallDialog.vue')['default']
+    ComponentsSocialWallSocialWallResultItem: typeof import('./src/components/social-wall/SocialWallResultItem.vue')['default']
     ComponentsSocialWallSocialWallResults: typeof import('./src/components/social-wall/SocialWallResults.vue')['default']
+    ComponentsSocialWallSocialWallRouter: typeof import('./src/components/social-wall/SocialWallRouter.vue')['default']
     ComponentsSocialWallSocialWallSearch: typeof import('./src/components/social-wall/SocialWallSearch.vue')['default']
     ComponentsSocialWallSocialWallTags: typeof import('./src/components/social-wall/SocialWallTags.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

diff --git a/packages/components/index.html b/packages/components/index.html
@@ -8,18 +8,18 @@
 </head>
 
 <body>
-    <social-wall>
-      <div class="flex">
-        <div class="w-1/5 bg-red w-full">
-          <social-wall-tags></social-wall-tags>
-        </div>
+ <social-wall>
+    <div class="flex">
+      <div class="w-1/5 bg-red">
+        <social-wall-tags></social-wall-tags>
+      </div>
 
-        <div class="w-4/5">
-          <social-wall-search></social-wall-search>
+      <div class="w-4/5">
+        <social-wall-search></social-wall-search>
         <social-wall-results></social-wall-results>
-        </div>
       </div>
-    </social-wall>
+    </div>
+  </social-wall>
 </body>
 
 <script type="module" src="/src/index.ts"></script>

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -42,6 +42,7 @@
     "vue": "3.2.36"
   },
   "devDependencies": {
+    "@types": "link:@types",
     "@vitejs/plugin-vue": "^2.3.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.16.0",
@@ -50,6 +51,7 @@
     "typescript": "^4.7.2",
     "unplugin-vue-components": "^0.19.6",
     "unplugin-vue-define-options": "^1.5.2",
+    "v-lazy-image": "^2.1.1",
     "vite": "^2.9.9",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.3.0",

diff --git a/packages/components/src/components/search/SearchInput.vue b/packages/components/src/components/search/SearchInput.vue
diff --git a/packages/components/src/components/social-wall/SocialWall.vue b/packages/components/src/components/social-wall/SocialWall.vue
@@ -1,9 +1,11 @@
 <template>
-  <div>
+  <div id="social-wall">
     <slot />
   </div>
 </template>
 
+<script setup lang="ts"></script>
+
 <style>
 @import url('@/style.css');
 </style>
diff --git a/packages/components/src/components/social-wall/SocialWallDialog.vue b/packages/components/src/components/social-wall/SocialWallDialog.vue
@@ -0,0 +1,47 @@
+<template>
+  <teleport to="body">
+    <div v-if="isOpen" class="modal-overlay">
+      <div class="modal-content">
+        <slot></slot>
+        <button @click="close">Close</button>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:isOpen'])
+
+function close() {
+  emit('update:isOpen', false)
+}
+</script>
+
+<style>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+}
+</style>
diff --git a/packages/components/src/components/social-wall/SocialWallResults.vue b/packages/components/src/components/social-wall/SocialWallResults.vue
@@ -1,3 +1,85 @@
 <template>
-  <div class="bg-red p-10">Results</div>
+  <div class="max-w-md mx-auto overflow-y-auto h-screen">
+    <div v-for="(video, index) in videos" :key="index" class="bg-white rounded-lg shadow-md overflow-hidden" @click="openModal(video)">
+      <v-lazy-image
+        :src="video.thumbnail"
+        src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
+        :alt="video.title"
+        class="w-full h-48 object-cover"
+      />
+      <div class="p-4">
+        <h2 class="text-lg font-semibold">{{ video.title }}</h2>
+        <p class="text-gray-600 text-sm">{{ video.description }}</p>
+      </div>
+    </div>
+  </div>
+
+  <SocialWallDialog :is-open="isModalOpen" @update:isOpen="isModalOpen = $event" />
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import VLazyImage from 'v-lazy-image'
+import SocialWallDialog from '@components/social-wall/SocialWallDialog.vue'
+
+const open = ref(false)
+const isModalOpen = ref(false)
+
+function openModal(video: any) {
+  console.log('video', video)
+  isModalOpen.value = true
+}
+
+// Sample data for videos
+const videos = [
+  {
+    title: 'Vue.js Basics',
+    description: 'Learn the basics of Vue.js in this introductory video.',
+    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
+  },
+  {
+    title: 'Advanced Vue Techniques',
+    description: 'Explore advanced techniques in Vue.js development.',
+    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
+  },
+  {
+    title: 'Building a Vue App',
+    description: 'Step-by-step guide to building a Vue.js application.',
+    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
+  },
+  {
+    title: 'State Management with Vuex',
+    description: 'Manage state in your Vue.js apps using Vuex.',
+    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
+  },
+  {
+    title: 'Vue Router for Navigation',
+    description: 'Implement navigation in your Vue.js apps with Vue Router.',
+    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
+  },
+  {
+    title: 'Deploying Vue Apps',
+    description: 'Learn how to deploy your Vue.js applications.',
+    thumbnail: 'https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg',
+  },
+]
+
+const items = ref(
+  videos.map((v, idx) => ({
+    ...v,
+    id: idx,
+  }))
+)
+</script>
+
+<style>
+@import url('@/style.css');
+
+.v-lazy-image {
+  filter: blur(10px);
+  transition: filter 0.7s;
+}
+.v-lazy-image-loaded {
+  filter: blur(0);
+}
+</style>
diff --git a/packages/components/src/components/social-wall/SocialWallSearch.vue b/packages/components/src/components/social-wall/SocialWallSearch.vue
@@ -1,3 +1,55 @@
 <template>
-  <div class="bg-red p-10">Search</div>
+  <div class="relative w-full max-w-md mx-auto">
+    <input
+      v-model="query"
+      type="text"
+      class="w-full p-2 border border-gray-300 rounded"
+      placeholder="Search..."
+      @input="onInput"
+      @focus="showSuggestions = true"
+      @blur="hideSuggestions"
+    />
+    <ul v-if="showSuggestions && filteredSuggestions.length" class="absolute z-10 w-full bg-white border border-gray-300 rounded shadow-lg">
+      <li v-for="(suggestion, index) in filteredSuggestions" :key="index" class="p-2 hover:bg-gray-100 cursor-pointer" @mousedown.prevent="selectSuggestion(suggestion)">
+        {{ suggestion }}
+      </li>
+    </ul>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { RouterView } from 'vue-router'
+
+const query = ref('')
+const showSuggestions = ref(false)
+
+const suggestions = ref<string[]>(['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape', 'Honeydew'])
+
+const filteredSuggestions = computed(() => {
+  if (!query.value) {
+    return []
+  }
+  const lowerCaseQuery = query.value.toLowerCase()
+  return suggestions.value.filter((suggestion) => suggestion.toLowerCase().includes(lowerCaseQuery))
+})
+
+const onInput = () => {
+  showSuggestions.value = true
+}
+
+const hideSuggestions = () => {
+  setTimeout(() => {
+    showSuggestions.value = false
+  }, 100)
+}
+
+const selectSuggestion = (suggestion: string) => {
+  query.value = suggestion
+  showSuggestions.value = false
+}
+</script>
+
+<style>
+@import url('@/style.css');
+</style>
diff --git a/packages/components/src/components/social-wall/SocialWallTags.vue b/packages/components/src/components/social-wall/SocialWallTags.vue
@@ -1,4 +1,38 @@
 <template>
-  <div class="bg-blue p-10">Tags</div>
+  <div class="w-full max-w-md mx-auto">
+    <div class="flex flex-wrap items-center">
+      <button
+        v-for="(tag, index) in tags"
+        :key="index"
+        :class="['m-1 px-3 py-1 rounded-full text-sm font-medium', selectedTags.includes(tag) ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800 hover:bg-gray-300']"
+        @click="toggleTag(tag)"
+      >
+        {{ tag }}
+      </button>
+    </div>
+  </div>
 </template>
-<script setup lang="ts"></script>
+
+<script setup lang="ts">
+import { createApp, h, ref } from 'vue'
+
+// Sample data for tags
+const tags = ref<string[]>(['JavaScript', 'Vue.js', 'React', 'Angular', 'TypeScript', 'Node.js', 'CSS', 'HTML'])
+
+// Reactive state to track selected tags
+const selectedTags = ref<string[]>([])
+
+// Method to toggle tag selection
+const toggleTag = (tag: string) => {
+  const index = selectedTags.value.indexOf(tag)
+  if (index === -1) {
+    selectedTags.value.push(tag)
+  } else {
+    selectedTags.value.splice(index, 1)
+  }
+}
+</script>
+
+<style>
+@import url('@/style.css');
+</style>
diff --git a/packages/components/src/env.d.ts b/packages/components/src/env.d.ts
@@ -4,3 +4,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module 'v-lazy-image'
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -1,5 +1,5 @@
 import './style.css'
-import { defineCustomElement } from 'vue'
+import { createApp, defineCustomElement } from 'vue'
 
 // Components
 import SocialWall from '@/components/social-wall/SocialWall.vue'

diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },

diff --git a/packages/components/vite.config.wc.js b/packages/components/vite.config.wc.js
@@ -5,7 +5,7 @@ import Components from 'unplugin-vue-components/vite'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import DefineOptions from 'unplugin-vue-define-options/vite'
-
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
@@ -25,6 +25,7 @@ export default defineConfig({
       },
       customElement: true,
     }),
+    cssInjectedByJsPlugin(),
     Components({
       dirs: ['src'],
       extensions: ['vue'],
@@ -34,7 +35,11 @@ export default defineConfig({
       exclude: [/node_modules/, /\.git/],
       resolvers: [],
     }),
-    dts(),
+    dts({
+      tsconfigPath: 'tsconfig.build.json',
+      cleanVueFileName: true,
+      exclude: ['src/test/**', 'src/**/story/**', 'src/**/*.story.vue'],
+    }),
     DefineOptions(),
   ],
   build: {