From 8809b52070928120c75f3651e8af898bcb3f305b Mon Sep 17 00:00:00 2001
From: y-solb <ysolb99@gmail.com>
Date: Sat, 30 Dec 2023 18:55:27 +0900
Subject: [PATCH] Feat: add vue-js example

---
 examples/vue-js/package-lock.json   | 11 +++++
 examples/vue-js/package.json        |  1 +
 examples/vue-js/src/App.vue         | 71 +++++++++++++----------------
 examples/vue-js/src/assets/base.css | 12 +++++
 examples/vue-js/src/main.js         |  2 +
 examples/vue-js/vite.config.js      |  9 +++-
 6 files changed, 65 insertions(+), 41 deletions(-)

diff --git a/examples/vue-js/package-lock.json b/examples/vue-js/package-lock.json
index 520f5d2..8f0d6e7 100644
--- a/examples/vue-js/package-lock.json
+++ b/examples/vue-js/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vue-js",
       "version": "0.0.0",
       "dependencies": {
+        "@solb/bottom-sheet": "^1.0.0",
         "vue": "^3.3.11"
       },
       "devDependencies": {
@@ -724,6 +725,11 @@
       "integrity": "sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==",
       "dev": true
     },
+    "node_modules/@solb/bottom-sheet": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@solb/bottom-sheet/-/bottom-sheet-1.0.0.tgz",
+      "integrity": "sha512-9bHQOHNn+QDh8SVyX+99AKOpIYBm21uu8uSkZgddAxVOfeaDs4cB1ZSwqI7lkGg7c49+uLuJ/hq4AH9orqGpmA=="
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -2680,6 +2686,11 @@
       "integrity": "sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==",
       "dev": true
     },
+    "@solb/bottom-sheet": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@solb/bottom-sheet/-/bottom-sheet-1.0.0.tgz",
+      "integrity": "sha512-9bHQOHNn+QDh8SVyX+99AKOpIYBm21uu8uSkZgddAxVOfeaDs4cB1ZSwqI7lkGg7c49+uLuJ/hq4AH9orqGpmA=="
+    },
     "@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
diff --git a/examples/vue-js/package.json b/examples/vue-js/package.json
index ccb5730..d28b26b 100644
--- a/examples/vue-js/package.json
+++ b/examples/vue-js/package.json
@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@solb/bottom-sheet": "^1.0.0",
     "vue": "^3.3.11"
   },
   "devDependencies": {
diff --git a/examples/vue-js/src/App.vue b/examples/vue-js/src/App.vue
index 633a5df..dc8ba59 100644
--- a/examples/vue-js/src/App.vue
+++ b/examples/vue-js/src/App.vue
@@ -1,47 +1,38 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
-</template>
-
-<style scoped>
-header {
-  line-height: 1.5;
+const openSheet = () => {
+  document.getElementById('testBottomSheet').openSheet()
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+const openFullSheet = () => {
+  document.getElementById('testBottomSheet').openFullSheet()
 }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+const closeSheet = () => {
+  document.getElementById('testBottomSheet').closeSheet()
+}
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+const fullSheet = () => {
+  document.getElementById('testBottomSheet').fullSheet()
 }
-</style>
+</script>
+
+<template>
+  <button @click="openSheet">openSheet</button>
+
+  <button @click="openFullSheet">openFullSheet</button>
+  <bottom-sheet id="testBottomSheet" title="Title is Lorem ipsum">
+    <main className="_example">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <div>
+        <button type="button" @click="closeSheet">closeSheet</button>
+        <button type="button" @click="fullSheet">fullSheet</button>
+      </div>
+    </main>
+  </bottom-sheet>
+</template>
diff --git a/examples/vue-js/src/assets/base.css b/examples/vue-js/src/assets/base.css
index 8816868..7a83be2 100644
--- a/examples/vue-js/src/assets/base.css
+++ b/examples/vue-js/src/assets/base.css
@@ -84,3 +84,15 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+button {
+  background-color: #999;
+  border: none;
+  border-radius: 12px;
+  color: white;
+  padding: 10px;
+  text-align: center;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  margin: 10px;
+}
diff --git a/examples/vue-js/src/main.js b/examples/vue-js/src/main.js
index 0ac3a5f..f682e7b 100644
--- a/examples/vue-js/src/main.js
+++ b/examples/vue-js/src/main.js
@@ -1,4 +1,6 @@
 import './assets/main.css'
+import '@solb/bottom-sheet'
+import '@solb/bottom-sheet/style/style.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
diff --git a/examples/vue-js/vite.config.js b/examples/vue-js/vite.config.js
index 5c45e1d..3e550fd 100644
--- a/examples/vue-js/vite.config.js
+++ b/examples/vue-js/vite.config.js
@@ -6,7 +6,14 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          // 하이픈을 포함하는 모든 태그를 사용자 정의 요소로 처리합니다.
+          isCustomElement: (tag) => tag.includes('-')
+        }
+      }
+    })
   ],
   resolve: {
     alias: {