Fix fomantic

front/scripts/fix-fomantic-css.sh

@@ -8,3 +8,5 @@ echo 'Removing google font…'
 sed -i '/@import url(/d' node_modules/fomantic-ui-css/components/site.css
 echo "Replacing hardcoded values by CSS vars…"
 scripts/fix-fomantic-css.py node_modules/fomantic-ui-css node_modules/fomantic-ui-css/tweaked
+echo 'Fixing jQuery import…'
+sed -i '1s/^/import jQuery from "jquery"\n/' `find node_modules/fomantic-ui-css/ -name '*.js'`

front/src/components/channels/UploadModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Modal from '~/components/semantic/Modal.vue'
+import SemanticModal from '~/components/semantic/Modal.vue'
 import ChannelUploadForm from '~/components/channels/UploadForm.vue'
 import { humanSize } from '~/utils/filters'
 import { useRouter } from 'vue-router'
@@ -49,7 +49,7 @@ const isLoading = ref(false)
 </script>
 
 <template>
-  <modal
+  <semantic-modal
     v-model:show="$store.state.channels.showUploadModal"
     class="small"
   >
@@ -182,5 +182,5 @@ const isLoading = ref(false)
         </translate>
       </button>
     </div>
-  </modal>
+  </semantic-modal>
 </template>

front/src/components/common/DangerousButton.vue

@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import SemanticModal from '~/components/semantic/Modal.vue'
+import { ref } from 'vue'
+
+interface Props {
+  action?: () => void
+  disabled?: boolean
+  // TODO (wvffle): Find correct type
+  confirmColor?: 'danger'
+}
+
+// TODO (wvffle): MOVE ALL defineEmits ABOVE defineProps
+const emit = defineEmits()
+
+const props = withDefaults(defineProps<Props>(), {
+  action: () => {},
+  disabled: false,
+  confirmColor: 'danger'
+})
+
+const showModal = ref(false)
+
+const confirm = () => {
+  showModal.value = false
+  emit('confirm')
+  props.action?.()
+}
+</script>
+
 <template>
   <button
     :class="[{disabled: disabled}]"
@@ -6,7 +35,7 @@
   >
     <slot />
 
-    <modal
+    <semantic-modal
       v-model:show="showModal"
       class="small"
     >
@@ -29,7 +58,7 @@
           </translate>
         </button>
         <button
-          :class="['ui', 'confirm', confirmButtonColor, 'button']"
+          :class="['ui', 'confirm', confirmColor, 'button']"
           @click="confirm"
         >
           <slot name="modal-confirm">
@@ -39,42 +68,6 @@
           </slot>
         </button>
       </div>
-    </modal>
+    </semantic-modal>
   </button>
 </template>
-<script>
-import Modal from '~/components/semantic/Modal.vue'
-
-export default {
-  components: {
-    Modal
-  },
-  props: {
-    action: { type: Function, required: false, default: () => {} },
-    disabled: { type: Boolean, default: false },
-    confirmColor: { type: String, default: 'danger', required: false }
-  },
-  data () {
-    return {
-      showModal: false
-    }
-  },
-  computed: {
-    confirmButtonColor () {
-      if (this.confirmColor) {
-        return this.confirmColor
-      }
-      return this.color
-    }
-  },
-  methods: {
-    confirm () {
-      this.showModal = false
-      this.$emit('confirm')
-      if (this.action) {
-        this.action()
-      }
-    }
-  }
-}
-</script>

front/src/utils/fomantic.ts

@@ -1,20 +1,16 @@
 /// <reference types="semantic-ui" />
 
 import $ from 'jquery'
-import { nextTick } from 'vue'
-import { useCurrentElement } from '@vueuse/core'
+import { tryOnMounted, useCurrentElement } from '@vueuse/core'
 
-const el = useCurrentElement()
 
 export const getDropdown = (selector = '.ui.dropdown'): JQuery => {
+  const el = useCurrentElement()
   return $(el.value).find(selector)
 }
 
-export const setupDropdown = async (selector: string | HTMLElement = '.ui.dropdown') => {
-  if (typeof selector === 'string') {
-    await nextTick()
-  }
-
+export const setupDropdown = (selector: string | HTMLElement = '.ui.dropdown') => tryOnMounted(() => {
+  const el = useCurrentElement()
   const $dropdown = typeof selector === 'string' 
     ? $(el.value).find(selector)
     : $(selector)
@@ -29,6 +25,4 @@ export const setupDropdown = async (selector: string | HTMLElement = '.ui.dropdo
       $dropdown.dropdown('hide')
     }
   })
-
-  return $dropdown
-}
+}, false)

front/vite.config.ts

@@ -45,15 +45,7 @@ export default defineConfig(() => ({
         navigateFallback: 'index.html',
         webManifestUrl: '/front/manifest.json'
       }
-    }),
-    {
-      name: 'fix-fomantic-ui-css',
-      transform (src, id) {
-        if (id.includes('fomantic-ui-css') && id.endsWith('.min.js')) {
-          return `import jQuery from 'jquery';${src}`
-        }
-      }
-    }
+    })
   ],
   server: { port, hmr },
   resolve: {