Feat: add vue-js example

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": {

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>

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;
+}

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'

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: {