pug to html
This commit is contained in:
Matteo Pagliazzi
@@ -1,8 +1,18 @@
|
||||
<template lang="pug">
|
||||
.form-check
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="isChecked", :id="id")
|
||||
label.custom-control-label(v-once, :for="id") {{ text }}
|
||||
<template>
|
||||
<div class="form-check">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input
|
||||
:id="id"
|
||||
v-model="isChecked"
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
><label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="id"
|
||||
>{{ text }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template lang="pug">
|
||||
span.badge.badge-pill.badge-item.badge-count(
|
||||
v-if="show && count > 0",
|
||||
) {{ count }}
|
||||
<template>
|
||||
<span
|
||||
v-if="show && count > 0"
|
||||
class="badge badge-pill badge-item badge-count"
|
||||
>{{ count }}</span>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -2,12 +2,25 @@
|
||||
A simplified dropdown component that doesn't rely on buttons as toggles like bootstrap-vue
|
||||
-->
|
||||
|
||||
<template lang="pug">
|
||||
.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", @keypress.enter.space.stop.prevent="toggleDropdown()", role="button", tabindex="0", :class="{open: isOpen}", :aria-pressed="isPressed")
|
||||
.habitica-menu-dropdown-toggle
|
||||
slot(name="dropdown-toggle")
|
||||
.dropdown-menu(:class="{'dropdown-menu-right': right}")
|
||||
slot(name="dropdown-content")
|
||||
<template>
|
||||
<div
|
||||
class="habitica-menu-dropdown dropdown"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:class="{open: isOpen}"
|
||||
:aria-pressed="isPressed"
|
||||
@click="toggleDropdown()"
|
||||
@keypress.enter.space.stop.prevent="toggleDropdown()"
|
||||
>
|
||||
<div class="habitica-menu-dropdown-toggle">
|
||||
<slot name="dropdown-toggle"></slot>
|
||||
</div><div
|
||||
class="dropdown-menu"
|
||||
:class="{'dropdown-menu-right': right}"
|
||||
>
|
||||
<slot name="dropdown-content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,15 +1,36 @@
|
||||
<template lang="pug">
|
||||
.drawer-container
|
||||
.drawer-title(@click="toggle()")
|
||||
| {{title}}
|
||||
.drawer-toggle-icon.svg-icon.icon-10(v-html="isOpen ? icons.minimize : icons.expand", :class="{ closed: !isOpen }")
|
||||
transition(name="slide-up", @afterLeave="adjustPagePadding", @afterEnter="adjustPagePadding")
|
||||
.drawer-content(v-show="isOpen")
|
||||
slot(name="drawer-header")
|
||||
.drawer-slider
|
||||
slot(name="drawer-slider")
|
||||
div.message(v-if="errorMessage != null")
|
||||
.content {{ errorMessage }}
|
||||
<template>
|
||||
<div class="drawer-container">
|
||||
<div
|
||||
class="drawer-title"
|
||||
@click="toggle()"
|
||||
>
|
||||
{{ title }}<div
|
||||
class="drawer-toggle-icon svg-icon icon-10"
|
||||
:class="{ closed: !isOpen }"
|
||||
v-html="isOpen ? icons.minimize : icons.expand"
|
||||
></div>
|
||||
</div><transition
|
||||
name="slide-up"
|
||||
@afterLeave="adjustPagePadding"
|
||||
@afterEnter="adjustPagePadding"
|
||||
>
|
||||
<div
|
||||
v-show="isOpen"
|
||||
class="drawer-content"
|
||||
>
|
||||
<slot name="drawer-header"></slot><div class="drawer-slider">
|
||||
<slot name="drawer-slider"></slot><div
|
||||
v-if="errorMessage != null"
|
||||
class="message"
|
||||
>
|
||||
<div class="content">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,15 +1,21 @@
|
||||
<template lang="pug">
|
||||
.header-tabs
|
||||
ul.drawer-tab-container
|
||||
li.drawer-tab(v-for="(tab, index) in tabs")
|
||||
a.drawer-tab-text(
|
||||
@click="changeTab(index)",
|
||||
:class="{'drawer-tab-text-active': selectedTabPosition === index}",
|
||||
:title="tab.label"
|
||||
) {{ tab.label }}
|
||||
|
||||
aside.help-item
|
||||
slot(name="right-item")
|
||||
<template>
|
||||
<div class="header-tabs">
|
||||
<ul class="drawer-tab-container">
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
class="drawer-tab"
|
||||
>
|
||||
<a
|
||||
class="drawer-tab-text"
|
||||
:class="{'drawer-tab-text-active': selectedTabPosition === index}"
|
||||
:title="tab.label"
|
||||
@click="changeTab(index)"
|
||||
>{{ tab.label }}</a>
|
||||
</li>
|
||||
</ul><aside class="help-item">
|
||||
<slot name="right-item"></slot>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,31 +1,42 @@
|
||||
<template lang="pug">
|
||||
div.slider-root
|
||||
div.slider-button-area.left-button(
|
||||
v-if="scrollButtonsVisible()",
|
||||
<template>
|
||||
<div class="slider-root">
|
||||
<div
|
||||
v-if="scrollButtonsVisible()"
|
||||
class="slider-button-area left-button"
|
||||
@mousedown.left="shiftRight"
|
||||
)
|
||||
a.slider-button
|
||||
.svg-icon(v-html="icons.previous")
|
||||
div.slider-button-area.right-button(
|
||||
v-if="scrollButtonsVisible()",
|
||||
>
|
||||
<a class="slider-button"><div
|
||||
class="svg-icon"
|
||||
v-html="icons.previous"
|
||||
></div></a>
|
||||
</div><div
|
||||
v-if="scrollButtonsVisible()"
|
||||
class="slider-button-area right-button"
|
||||
@mousedown.left="shiftLeft"
|
||||
)
|
||||
a.slider-button
|
||||
.svg-icon(v-html="icons.next")
|
||||
|
||||
// 120 = width of the left/right buttons
|
||||
div.sliding-content(v-resize="500", @resized="currentWidth = $event.width - 120")
|
||||
.items.items-one-line
|
||||
template(v-for="item in showItems")
|
||||
div.vertical-divider(
|
||||
>
|
||||
<a class="slider-button"><div
|
||||
class="svg-icon"
|
||||
v-html="icons.next"
|
||||
></div></a>
|
||||
</div><!-- 120 = width of the left/right buttons--><div
|
||||
v-resize="500"
|
||||
class="sliding-content"
|
||||
@resized="currentWidth = $event.width - 120"
|
||||
>
|
||||
<div class="items items-one-line">
|
||||
<template v-for="item in showItems">
|
||||
<div
|
||||
v-if="shouldAddVerticalLine(item)"
|
||||
v-bind:style="dividerMargins"
|
||||
)
|
||||
|
||||
slot(
|
||||
name="item",
|
||||
:item="item",
|
||||
)
|
||||
class="vertical-divider"
|
||||
:style="dividerMargins"
|
||||
></div><slot
|
||||
name="item"
|
||||
:item="item"
|
||||
></slot>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
<template lang="pug">
|
||||
span
|
||||
span.dropdown-label {{ label }}
|
||||
b-dropdown(right=true)
|
||||
span(slot="text", :class="{'dropdown-icon-item': withIcon}")
|
||||
slot(name="item", :item="selectedItem")
|
||||
|
||||
b-dropdown-item(
|
||||
v-for="item in items",
|
||||
@click="selectItem(item)",
|
||||
:active="selectedItem.id === item.id",
|
||||
:key="item.id"
|
||||
)
|
||||
span(:class="{'dropdown-icon-item': withIcon}")
|
||||
slot(name="item", :item="item")
|
||||
<template>
|
||||
<span><span class="dropdown-label">{{ label }}</span><b-dropdown right="right"><span
|
||||
slot="text"
|
||||
:class="{'dropdown-icon-item': withIcon}"
|
||||
><slot
|
||||
name="item"
|
||||
:item="selectedItem"
|
||||
></slot></span><b-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:active="selectedItem.id === item.id"
|
||||
@click="selectItem(item)"
|
||||
><span :class="{'dropdown-icon-item': withIcon}"><slot
|
||||
name="item"
|
||||
:item="item"
|
||||
></slot></span></b-dropdown-item></b-dropdown></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,21 +1,31 @@
|
||||
<template lang="pug">
|
||||
.item-rows
|
||||
div.items(v-resize="500", @resized="setCurrentWidth($event)")
|
||||
template(v-for="item in itemsToShow(showAll)")
|
||||
slot(
|
||||
name="item",
|
||||
<template>
|
||||
<div class="item-rows">
|
||||
<div
|
||||
v-resize="500"
|
||||
class="items"
|
||||
@resized="setCurrentWidth($event)"
|
||||
>
|
||||
<template v-for="item in itemsToShow(showAll)">
|
||||
<slot
|
||||
name="item"
|
||||
:item="item"
|
||||
)
|
||||
|
||||
div(v-if="items.length === 0")
|
||||
p(v-once) {{ noItemsLabel }}
|
||||
|
||||
.btn.btn-flat.btn-show-more(
|
||||
@click="toggleItemsToShow()",
|
||||
></slot>
|
||||
</template>
|
||||
</div><div v-if="items.length === 0">
|
||||
<p v-once>
|
||||
{{ noItemsLabel }}
|
||||
</p>
|
||||
</div><div
|
||||
v-if="items.length > itemsPerRow"
|
||||
) {{ showAll ? $t('showLess') : $t('showMore') }}
|
||||
|
||||
div.fill-height(v-else)
|
||||
class="btn btn-flat btn-show-more"
|
||||
@click="toggleItemsToShow()"
|
||||
>
|
||||
{{ showAll ? $t('showLess') : $t('showMore') }}
|
||||
</div><div
|
||||
v-else
|
||||
class="fill-height"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
.clearfix
|
||||
h2.float-left.mb-3.filters-title {{ title }}
|
||||
|
||||
.filters.float-right
|
||||
slot(name="filters")
|
||||
|
||||
br
|
||||
|
||||
slot(name="content")
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="clearfix">
|
||||
<h2 class="float-left mb-3 filters-title">
|
||||
{{ title }}
|
||||
</h2><div class="filters float-right">
|
||||
<slot name="filters"></slot>
|
||||
</div>
|
||||
</div><br><slot name="content"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.standard-sidebar.d-none.d-sm-block(v-if="showSidebar")
|
||||
slot(name="sidebar")
|
||||
.standard-page
|
||||
slot(name="page")
|
||||
<template>
|
||||
<div class="row">
|
||||
<div
|
||||
v-if="showSidebar"
|
||||
class="standard-sidebar d-none d-sm-block"
|
||||
>
|
||||
<slot name="sidebar"></slot>
|
||||
</div><div class="standard-page">
|
||||
<slot name="page"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template lang="pug">
|
||||
span.badge.badge-pill.badge-item.badge-star(
|
||||
:class="{'item-selected-badge': selected === true}",
|
||||
@click.stop="click",
|
||||
v-if="show",
|
||||
) ★
|
||||
<template>
|
||||
<span
|
||||
v-if="show"
|
||||
class="badge badge-pill badge-item badge-star"
|
||||
:class="{'item-selected-badge': selected === true}"
|
||||
@click.stop="click"
|
||||
>★</span>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,10 +1,28 @@
|
||||
<template lang="pug">
|
||||
.progress-container(ref="container", :id="elementId", :class="{condensed}")
|
||||
.svg-icon(v-html="icon")
|
||||
.progress
|
||||
.progress-bar(:class="progressClass", :style="{width: `${percent(value, maxValue)}%`}")
|
||||
span.small-text {{value | statFloor}} / {{maxValue}}
|
||||
b-tooltip.myClass(:target="() => $refs.container", :container="elementId", :title="tooltip", triggers="hover", placement="bottom")
|
||||
<template>
|
||||
<div
|
||||
:id="elementId"
|
||||
ref="container"
|
||||
class="progress-container"
|
||||
:class="{condensed}"
|
||||
>
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icon"
|
||||
></div><div class="progress">
|
||||
<div
|
||||
class="progress-bar"
|
||||
:class="progressClass"
|
||||
:style="{width: `${percent(value, maxValue)}%`}"
|
||||
></div>
|
||||
</div><span class="small-text">{{ value | statFloor }} / {{ maxValue }}</span><b-tooltip
|
||||
class="myClass"
|
||||
:target="() => $refs.container"
|
||||
:container="elementId"
|
||||
:title="tooltip"
|
||||
triggers="hover"
|
||||
placement="bottom"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,25 +1,39 @@
|
||||
<template lang="pug">
|
||||
.popover-box
|
||||
.clearfix(:id="containerId")
|
||||
.float-left.toggle-switch-description(v-if="label", :class="hoverText ? 'hasPopOver' : ''") {{ label }}
|
||||
.toggle-switch.float-left
|
||||
input.toggle-switch-checkbox(
|
||||
type='checkbox', :id="toggleId",
|
||||
@change="handleChange",
|
||||
:checked="isChecked",
|
||||
:value="value",
|
||||
)
|
||||
label.toggle-switch-label(:for="toggleId")
|
||||
span.toggle-switch-inner
|
||||
span.toggle-switch-switch
|
||||
|
||||
b-popover(
|
||||
v-if="hoverText"
|
||||
:target="containerId"
|
||||
triggers="hover",
|
||||
placement="top"
|
||||
)
|
||||
.popover-content-text {{ hoverText }}
|
||||
<template>
|
||||
<div class="popover-box">
|
||||
<div
|
||||
:id="containerId"
|
||||
class="clearfix"
|
||||
>
|
||||
<div
|
||||
v-if="label"
|
||||
class="float-left toggle-switch-description"
|
||||
:class="hoverText ? 'hasPopOver' : ''"
|
||||
>
|
||||
{{ label }}
|
||||
</div><div class="toggle-switch float-left">
|
||||
<input
|
||||
:id="toggleId"
|
||||
class="toggle-switch-checkbox"
|
||||
type="checkbox"
|
||||
:checked="isChecked"
|
||||
:value="value"
|
||||
@change="handleChange"
|
||||
><label
|
||||
class="toggle-switch-label"
|
||||
:for="toggleId"
|
||||
><span class="toggle-switch-inner"></span><span class="toggle-switch-switch"></span></label>
|
||||
</div>
|
||||
</div><b-popover
|
||||
v-if="hoverText"
|
||||
:target="containerId"
|
||||
triggers="hover"
|
||||
placement="top"
|
||||
>
|
||||
<div class="popover-content-text">
|
||||
{{ hoverText }}
|
||||
</div>
|
||||
</b-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user