imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Issue #80: Done.

Browse Source
This commit is contained in:
chiayin
2023-09-25 18:26:30 +08:00
parent 453219f569
commit 349e565696
2 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
View File

@@ -4,7 +4,7 @@
<div class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
<p class="h2 pl-2 border-b mb-3">Activity list</p>
<div class="h-[calc(100%_-_56px)]">
<Draggable ref="tableA" :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" @end="onEnd" @add="onMove" class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar">
<Draggable :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" @end="onEnd" @add="onMove" class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar">
<template #item="{ element, index }">
<div :class="listSequence.includes(element) ? 'border-primary text-primary' : ''" class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)">
<span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
@@ -23,7 +23,7 @@
<!-- Have Data -->
<div class="m-auto w-full h-[calc(100%_-_56px)]">
<div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence">
<draggable ref="tableB" class="h-full" :group="{name: 'activity', pull: true, put: true }" :list="listSequence" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
<draggable class="h-full" :group="{name: 'activity', pull: true, put: true }" :list="listSequence" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
<template #item="{ element, index }">
<div>
<div class="w-full p-2 border rounded bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">

33
src/components/durationjs.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class=" relative">
<div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect">
<div class="relative">
<div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect" id="timeButton">
<div v-if="totalSeconds === 0" class="text-center">
<p>0s</p>
<p>0</p>
</div>
<div v-else class="flex justify-center items-center gap-1">
<p>{{ days }}d</p>
@@ -11,7 +11,8 @@
<p>{{ seconds }}s</p>
</div>
</div>
<div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect">
<!-- v-closable="onClose" -->
<div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="onClose">
<div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
<input
type="text"
@@ -127,6 +128,9 @@ export default {
},
},
methods: {
onClose () {
this.openTimeSelect = false;
},
/**
* get focus element
* @param {event} event
@@ -327,6 +331,27 @@ export default {
mounted() {
this.inputTypes = this.display.split('');
},
directives: {
'closable': {
mounted(el, {value}) {
let handleOutsideClick = function(e) {
let target = e.target;
while (target && target.id !== 'timeButton') {
target = target.parentElement;
};
const isClickOutside = target?.id !== 'timeButton' && !el.contains(e.target)
if (isClickOutside) value();
e.stopPropagation();
}
document.addEventListener('click', handleOutsideClick);
return () => {
document.removeEventListener('click', handleOutsideClick);
};
},
}
},
};
</script>
<style scoped>