@matrixage/picpic
Version:
A awesome image bed by github pages and github actions.
121 lines • 7.54 kB
HTML
<template id="folder_select">
<transition name="fade">
<div
id="folder_select_wrap"
class="folder_select_wrap flex justify_end align_center fixed w_100vw h_100vh top_0 z_index_1000"
@click="onToggleFolder"
v-if="visible_folder_select"
>
<div
class="folder_select relative"
@click.stop=""
>
<button
class="btn_close border_box flex justify_center align_center absolute"
@click.stop="onToggleFolder"
>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
>
<path
d='M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z' />
</svg>
</button>
<div class="head w_100 border_box flex justify_between align_center">
<div class="left flex align_center">
<div class="options flex align_center">
<button
:class="['btn_icon_wrap border_box flex justify_center align_center transition_normal',folder_prev?'':'disabled']"
@click="onPrevFolder"
>
<svg
class="icon icon_back"
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width="20"
height="20"
>
<path
fill='none'
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='48'
d='M244 400L100 256l144-144M120 256h292'
/>
</svg>
</button>
</div>
<span class="title">{{current_folder.name}}</span>
<div
:class="['switch relative flex align_center border_box',current_folder.name===folder_use?'on justify_end':'off']"
@click="toggleFolderUse"
>
<div class="dot absolute transition_normal"></div>
<span
class="status flex align_center justify_start"
v-if="current_folder.name!==folder_use"
>off</span>
<span
class="status flex align_center justify_end"
v-else
>on</span>
</div>
</div>
</div>
<div class="content_wrap w_100 border_box">
<div class="content w_100 border_box flex flex_wrap align_start">
<button
class="content_item folder_item flex flex_column"
v-for="(item,index) in current_folder.children"
:key="index"
v-if="item.type==='directory'"
>
<i
class="icon_folder relative"
:data-name="item.name"
@click.capture="onFolder"
>
<span
class="children absolute"
:data-name="item.name"
>{{item.children.length}} files</span>
<span
class="size absolute"
:data-name="item.name"
>{{item.size}}</span>
</i>
<span class="name line_clamp_2">{{item.name}}</span>
</button>
<button
class="content_item image_item flex flex_column"
v-for="(item,index) in current_folder.children"
:key="index"
data-type="path"
:data-path="item.path"
@click="onImgItem"
v-if="item.type==='file'"
>
<div
class="img_item"
data-type="path"
:data-path="item.path"
:style="item.path | getStyles"
></div>
<span
class="name line_clamp_2"
data-type="path"
:data-path="item.path"
>{{item.name.split('.')[0]}}</span>
</button>
</div>
</div>
<div class="nav_info_wrap w_100 border_box flex flex_wrap justify_between align_center">
<span class="nav_info line_clamp_1">{{select_folder.join(' > ')}}</span>
<span class="folder_use">using: {{folder_use}}</span>
</div>
</div>
</div>
</transition>
</template>