WIP

public/index.html

@@ -16,6 +16,8 @@
       </strong>
     </noscript>
     <div id="app"></div>
+    <div id="stamp-picker"></div>
+    <div id="message-menu-popup"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/components/Main/MainView/MainViewSidebar/ContentEditor.vue

@@ -1,11 +1,14 @@
 <template>
   <div :class="$style.container">
     <div v-if="isEditing">
-      <textarea-autosize
-        :value="value"
-        :class="$style.editor"
-        @input="onInput"
-      />
+      <div :class="$style.editor">textarea</div>
+      <!--
+        <textarea-autosize
+          :value="value"
+          :class="$style.editor"
+          @input="onInput"
+        />
+      -->
       <div
         v-if="maxlength"
         :class="$style.count"

src/components/Main/MainView/MessageInput/MessageInputTextArea.vue

@@ -1,21 +1,24 @@
 <template>
-  <textarea-autosize
-    ref="textareaAutosizeRef"
-    :class="$style.container"
-    :value="text"
-    :readonly="isPosting"
-    placeholder="メッセージを送信"
-    rows="1"
-    :max-height="160"
-    @input="onInput"
-    @compositionupdate.native="onCompositionUpdate"
-    @before-input.native="onBeforeInput"
-    @keydown.native="onKeyDown"
-    @keyup.native="onKeyUp"
-    @focus.native="onFocus"
-    @blur.native="onBlur"
-    @paste.native="onPaste"
-  />
+  <div>textarea</div>
+  <!--
+    <textarea-autosize
+      ref="textareaAutosizeRef"
+      :class="$style.container"
+      :value="text"
+      :readonly="isPosting"
+      placeholder="メッセージを送信"
+      rows="1"
+      :max-height="160"
+      @input="onInput"
+      @compositionupdate.native="onCompositionUpdate"
+      @before-input.native="onBeforeInput"
+      @keydown.native="onKeyDown"
+      @keyup.native="onKeyUp"
+      @focus.native="onFocus"
+      @blur.native="onBlur"
+      @paste.native="onPaste"
+    />
+  -->
 </template>
 
 <script lang="ts">

src/components/UI/Slider.vue

@@ -1,26 +1,29 @@
 <template>
-  <vue-slider
-    :value="value"
-    @change="onChange"
-    :min="min"
-    :max="max"
-    :disabled="disabled"
-    :tooltip="tooltip"
-    :tooltip-formatter="tooltipFormatter"
-    :dot-size="12"
-  />
+  <div>slider</div>
+  <!--
+    <vue-slider
+      :value="value"
+      @change="onChange"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      :tooltip="tooltip"
+      :tooltip-formatter="tooltipFormatter"
+      :dot-size="12"
+    />
+  -->
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import VueSlider from 'vue-slider-component'
-import { TooltipFormatter } from 'vue-slider-component/typings/typings'
+// import VueSlider from 'vue-slider-component'
+// import { TooltipFormatter } from 'vue-slider-component/typings/typings'
 
 export default defineComponent({
   name: 'Slider',
-  components: {
-    VueSlider
-  },
+  // components: {
+  //   VueSlider
+  // },
   props: {
     value: {
       type: [Number, String] as PropType<number | string>,
@@ -38,7 +41,7 @@ export default defineComponent({
       type: Number,
       default: 100
     },
-    tooltipFormatter: [String, Function] as PropType<TooltipFormatter>,
+    tooltipFormatter: [String, Function], // as PropType<TooltipFormatter>,
     tooltip: {
       type: String as PropType<
         'none' | 'always' | 'hover' | 'focus' | 'active'

src/main.ts

@@ -4,7 +4,7 @@ import router from './router'
 import store from './store'
 import boolAttr from './bool-attr'
 import vClickOutside from 'v-click-outside'
-import VueTextareaAutosize from 'vue-textarea-autosize'
+// import VueTextareaAutosize from 'vue-textarea-autosize'
 import { setupGlobalFuncs } from './markdown-bridge'
 import { loadResizeObserver } from './resizeObserver'
 
@@ -21,7 +21,7 @@ import('katex/dist/katex.css')
 
   app.use(boolAttr)
   app.use(vClickOutside)
-  app.use(VueTextareaAutosize)
+  //app.use(VueTextareaAutosize)
 
   app.mount('#app')
 

src/store/ui/stampPicker/mutations.ts

@@ -21,7 +21,7 @@ export const mutations = defineMutations<S>()({
     state.selectHandler = (_: SelectedStampData) => {}
   },
   clearTeleportTargetName(state) {
-    state.teleportTargetName = ''
+    state.teleportTargetName = 'stamp-picker'
   },
   clearCurrentStampPaletteId(state) {
     state.currentStampSet = {

src/store/ui/stampPicker/state.ts

@@ -30,7 +30,7 @@ export interface S {
 }
 
 export const state: S = {
-  teleportTargetName: '', // TODO validにする
+  teleportTargetName: 'stamp-picker',
   selectHandler: defaultSelectHandler,
   currentStampSet: {
     type: 'history',

src/styles/global.scss

@@ -20,3 +20,8 @@ body {
 img {
   image-orientation: from-image;
 }
+
+#stamp-picker,
+#message-menu-popup {
+  display: none;
+}

src/views/Main.vue

@@ -37,7 +37,6 @@
     <stamp-picker-container />
     <message-tools-menu-container />
     <toast-container />
-    <div :id="teleportTargetName" />
   </div>
   <div v-else></div>
 </template>