mirror of
https://github.com/frappe/books.git
synced 2024-11-08 14:50:56 +00:00
fix: format using prettier
This commit is contained in:
pu-raihan
parent
3f9b90241a
commit
f15b1cfe13
@ -14,7 +14,8 @@
|
||||
h-full
|
||||
items-center
|
||||
justify-center
|
||||
text-white dark:text-gray-900
|
||||
text-white
|
||||
dark:text-gray-900
|
||||
w-full
|
||||
text-base
|
||||
uppercase
|
||||
|
||||
@ -1,69 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg
|
||||
ref="chartSvg"
|
||||
:viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg ref="chartSvg" :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- x Grid Lines -->
|
||||
<path
|
||||
v-if="drawXGrid"
|
||||
:d="xGrid"
|
||||
:stroke="gridColor"
|
||||
:stroke-width="gridThickness"
|
||||
stroke-linecap="round"
|
||||
fill="transparent"
|
||||
/>
|
||||
<path v-if="drawXGrid" :d="xGrid" :stroke="gridColor" :stroke-width="gridThickness" stroke-linecap="round"
|
||||
fill="transparent" />
|
||||
|
||||
<!-- zero line -->
|
||||
<path
|
||||
v-if="drawZeroLine"
|
||||
:d="zLine"
|
||||
:stroke="zeroLineColor"
|
||||
:stroke-width="gridThickness"
|
||||
stroke-linecap="round"
|
||||
fill="transparent"
|
||||
/>
|
||||
<path v-if="drawZeroLine" :d="zLine" :stroke="zeroLineColor" :stroke-width="gridThickness" stroke-linecap="round"
|
||||
fill="transparent" />
|
||||
|
||||
<!-- Axis -->
|
||||
<path
|
||||
v-if="drawAxis"
|
||||
:d="axis"
|
||||
:stroke-width="axisThickness"
|
||||
:stroke="axisColor"
|
||||
fill="transparent"
|
||||
/>
|
||||
<path v-if="drawAxis" :d="axis" :stroke-width="axisThickness" :stroke="axisColor" fill="transparent" />
|
||||
|
||||
<!-- x Labels -->
|
||||
<template v-if="xLabels.length > 0">
|
||||
<text
|
||||
v-for="(i, j) in count"
|
||||
:key="j + '-xlabels'"
|
||||
:style="fontStyle"
|
||||
:y="
|
||||
viewBoxHeight -
|
||||
axisPadding +
|
||||
yLabelOffset +
|
||||
fontStyle.fontSize / 2 -
|
||||
bottom
|
||||
"
|
||||
:x="xs[i - 1]"
|
||||
text-anchor="middle"
|
||||
>
|
||||
<text v-for="(i, j) in count" :key="j + '-xlabels'" :style="fontStyle" :y="viewBoxHeight -
|
||||
axisPadding +
|
||||
yLabelOffset +
|
||||
fontStyle.fontSize / 2 -
|
||||
bottom
|
||||
" :x="xs[i - 1]" text-anchor="middle">
|
||||
{{ j % skipXLabel === 0 ? formatX(xLabels[i - 1] || '') : '' }}
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<!-- y Labels -->
|
||||
<template v-if="yLabelDivisions > 0">
|
||||
<text
|
||||
v-for="(i, j) in yLabelDivisions + 1"
|
||||
:key="j + '-ylabels'"
|
||||
:style="fontStyle"
|
||||
:y="yScalerLocation(i - 1)"
|
||||
:x="axisPadding - xLabelOffset + left"
|
||||
text-anchor="end"
|
||||
>
|
||||
<text v-for="(i, j) in yLabelDivisions + 1" :key="j + '-ylabels'" :style="fontStyle" :y="yScalerLocation(i - 1)"
|
||||
:x="axisPadding - xLabelOffset + left" text-anchor="end">
|
||||
{{ yScalerValue(i - 1) }}
|
||||
</text>
|
||||
</template>
|
||||
@ -73,54 +37,21 @@
|
||||
<rect x="0" y="0" :width="viewBoxWidth" :height="z" />
|
||||
</clipPath>
|
||||
<clipPath id="negative-rect-clip">
|
||||
<rect
|
||||
x="0"
|
||||
:y="z"
|
||||
:width="viewBoxWidth"
|
||||
:height="viewBoxHeight - z"
|
||||
/>
|
||||
<rect x="0" :y="z" :width="viewBoxWidth" :height="viewBoxHeight - z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<rect
|
||||
v-for="(rec, i) in positiveRects"
|
||||
:key="i + 'prec'"
|
||||
:rx="radius"
|
||||
:ry="radius"
|
||||
:x="rec.x"
|
||||
:y="rec.y"
|
||||
:width="width"
|
||||
:height="rec.height"
|
||||
:fill="rec.color"
|
||||
clip-path="url(#positive-rect-clip)"
|
||||
@mouseenter="() => create(rec.xi, rec.yi)"
|
||||
@mousemove="update"
|
||||
@mouseleave="destroy"
|
||||
/>
|
||||
<rect v-for="(rec, i) in positiveRects" :key="i + 'prec'" :rx="radius" :ry="radius" :x="rec.x" :y="rec.y"
|
||||
:width="width" :height="rec.height" :fill="rec.color" clip-path="url(#positive-rect-clip)"
|
||||
@mouseenter="() => create(rec.xi, rec.yi)" @mousemove="update" @mouseleave="destroy" />
|
||||
|
||||
<rect
|
||||
v-for="(rec, i) in negativeRects"
|
||||
:key="i + 'nrec'"
|
||||
:rx="radius"
|
||||
:ry="radius"
|
||||
:x="rec.x"
|
||||
:y="rec.y"
|
||||
:width="width"
|
||||
:height="rec.height"
|
||||
:fill="rec.color"
|
||||
clip-path="url(#negative-rect-clip)"
|
||||
@mouseenter="() => create(rec.xi, rec.yi)"
|
||||
@mousemove="update"
|
||||
@mouseleave="destroy"
|
||||
/>
|
||||
<rect v-for="(rec, i) in negativeRects" :key="i + 'nrec'" :rx="radius" :ry="radius" :x="rec.x" :y="rec.y"
|
||||
:width="width" :height="rec.height" :fill="rec.color" clip-path="url(#negative-rect-clip)"
|
||||
@mouseenter="() => create(rec.xi, rec.yi)" @mousemove="update" @mouseleave="destroy" />
|
||||
</svg>
|
||||
<Tooltip
|
||||
ref="tooltip"
|
||||
:offset="15"
|
||||
placement="top"
|
||||
<Tooltip ref="tooltip" :offset="15" placement="top"
|
||||
class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 border-s-4"
|
||||
:style="{ borderColor: activeColor }"
|
||||
>
|
||||
:style="{ borderColor: activeColor }">
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<p>
|
||||
{{ xi > -1 ? formatX(xLabels[xi]) : '' }}
|
||||
@ -196,7 +127,7 @@ export default {
|
||||
this.padding +
|
||||
this.left +
|
||||
(i * (this.viewBoxWidth - this.left - 2 * this.padding)) /
|
||||
(this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
|
||||
(this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
|
||||
);
|
||||
},
|
||||
z() {
|
||||
@ -215,9 +146,8 @@ export default {
|
||||
return Math.max(...this.points.flat());
|
||||
},
|
||||
axis() {
|
||||
return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${
|
||||
this.viewBoxHeight - this.axisPadding - this.bottom
|
||||
} H ${this.viewBoxWidth - this.axisPadding}`;
|
||||
return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${this.viewBoxHeight - this.axisPadding - this.bottom
|
||||
} H ${this.viewBoxWidth - this.axisPadding}`;
|
||||
},
|
||||
padding() {
|
||||
return this.axisPadding + this.pointsPadding;
|
||||
@ -305,7 +235,7 @@ export default {
|
||||
return (
|
||||
((this.yLabelDivisions - i) *
|
||||
(this.viewBoxHeight - this.padding * 2 - this.bottom)) /
|
||||
this.yLabelDivisions +
|
||||
this.yLabelDivisions +
|
||||
this.padding
|
||||
);
|
||||
},
|
||||
|
||||
@ -1,60 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg
|
||||
ref="chartSvg"
|
||||
:viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@mousemove="update"
|
||||
>
|
||||
<svg ref="chartSvg" :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`" xmlns="http://www.w3.org/2000/svg"
|
||||
@mousemove="update">
|
||||
<!-- x Grid Lines -->
|
||||
<path
|
||||
v-if="drawXGrid"
|
||||
:d="xGrid"
|
||||
:stroke="gridColor"
|
||||
:stroke-width="gridThickness"
|
||||
stroke-linecap="round"
|
||||
fill="transparent"
|
||||
/>
|
||||
<path v-if="drawXGrid" :d="xGrid" :stroke="gridColor" :stroke-width="gridThickness" stroke-linecap="round"
|
||||
fill="transparent" />
|
||||
|
||||
<!-- Axis -->
|
||||
<path
|
||||
v-if="drawAxis"
|
||||
:d="axis"
|
||||
:stroke-width="axisThickness"
|
||||
:stroke="axisColor"
|
||||
fill="transparent"
|
||||
/>
|
||||
<path v-if="drawAxis" :d="axis" :stroke-width="axisThickness" :stroke="axisColor" fill="transparent" />
|
||||
|
||||
<!-- x Labels -->
|
||||
<template v-if="drawLabels && xLabels.length > 0">
|
||||
<text
|
||||
v-for="(i, j) in count"
|
||||
:key="j + '-xlabels'"
|
||||
:style="fontStyle"
|
||||
:y="
|
||||
viewBoxHeight -
|
||||
axisPadding +
|
||||
yLabelOffset +
|
||||
fontStyle.fontSize / 2 -
|
||||
bottom
|
||||
"
|
||||
:x="xs[i - 1]"
|
||||
text-anchor="middle"
|
||||
>
|
||||
<text v-for="(i, j) in count" :key="j + '-xlabels'" :style="fontStyle" :y="viewBoxHeight -
|
||||
axisPadding +
|
||||
yLabelOffset +
|
||||
fontStyle.fontSize / 2 -
|
||||
bottom
|
||||
" :x="xs[i - 1]" text-anchor="middle">
|
||||
{{ formatX(xLabels[i - 1] || '') }}
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<!-- y Labels -->
|
||||
<template v-if="drawLabels && yLabelDivisions > 0">
|
||||
<text
|
||||
v-for="(i, j) in yLabelDivisions + 1"
|
||||
:key="j + '-ylabels'"
|
||||
:style="fontStyle"
|
||||
:y="yScalerLocation(i - 1)"
|
||||
:x="axisPadding - xLabelOffset + left"
|
||||
text-anchor="end"
|
||||
>
|
||||
<text v-for="(i, j) in yLabelDivisions + 1" :key="j + '-ylabels'" :style="fontStyle" :y="yScalerLocation(i - 1)"
|
||||
:x="axisPadding - xLabelOffset + left" text-anchor="end">
|
||||
{{ yScalerValue(i - 1) }}
|
||||
</text>
|
||||
</template>
|
||||
@ -68,58 +38,28 @@
|
||||
</linearGradient>
|
||||
|
||||
<mask v-for="(i, j) in num" :id="'rect-mask-' + i" :key="j + '-mask'">
|
||||
<rect
|
||||
x="0"
|
||||
:y="gradY(j)"
|
||||
:height="viewBoxHeight - gradY(j)"
|
||||
width="100%"
|
||||
fill="url('#grad')"
|
||||
/>
|
||||
<rect x="0" :y="gradY(j)" :height="viewBoxHeight - gradY(j)" width="100%" fill="url('#grad')" />
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<g v-for="(i, j) in num" :key="j + '-gpath'">
|
||||
<!-- Gradient Paths -->
|
||||
<path
|
||||
stroke-linejoin="round"
|
||||
:d="getGradLine(i - 1)"
|
||||
:stroke-width="thickness"
|
||||
stroke-linecap="round"
|
||||
:fill="colors[i - 1] || getRandomColor()"
|
||||
:mask="`url('#rect-mask-${i}')`"
|
||||
/>
|
||||
<path stroke-linejoin="round" :d="getGradLine(i - 1)" :stroke-width="thickness" stroke-linecap="round"
|
||||
:fill="colors[i - 1] || getRandomColor()" :mask="`url('#rect-mask-${i}')`" />
|
||||
|
||||
<!-- Lines -->
|
||||
<path
|
||||
stroke-linejoin="round"
|
||||
:d="getLine(i - 1)"
|
||||
:stroke="colors[i - 1] || getRandomColor()"
|
||||
:stroke-width="thickness"
|
||||
stroke-linecap="round"
|
||||
fill="transparent"
|
||||
/>
|
||||
<path stroke-linejoin="round" :d="getLine(i - 1)" :stroke="colors[i - 1] || getRandomColor()"
|
||||
:stroke-width="thickness" stroke-linecap="round" fill="transparent" />
|
||||
</g>
|
||||
|
||||
<!-- Tooltip Reference -->
|
||||
<circle
|
||||
v-if="xi > -1 && yi > -1"
|
||||
r="12"
|
||||
:cx="cx"
|
||||
:cy="cy"
|
||||
:fill="colors[yi]"
|
||||
style="
|
||||
<circle v-if="xi > -1 && yi > -1" r="12" :cx="cx" :cy="cy" :fill="colors[yi]" style="
|
||||
filter: brightness(115%) drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
|
||||
"
|
||||
/>
|
||||
" />
|
||||
</svg>
|
||||
<Tooltip
|
||||
v-if="showTooltip"
|
||||
ref="tooltip"
|
||||
:offset="15"
|
||||
placement="top"
|
||||
<Tooltip v-if="showTooltip" ref="tooltip" :offset="15" placement="top"
|
||||
class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 border-s-4"
|
||||
:style="{ borderColor: colors[yi] }"
|
||||
>
|
||||
:style="{ borderColor: colors[yi] }">
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<p>
|
||||
{{ xi > -1 ? formatX(xLabels[xi]) : '' }}
|
||||
@ -193,7 +133,7 @@ export default {
|
||||
this.padding +
|
||||
this.left +
|
||||
(i * (this.viewBoxWidth - this.left - 2 * this.padding)) /
|
||||
(this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
|
||||
(this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
|
||||
);
|
||||
},
|
||||
ys() {
|
||||
@ -204,7 +144,7 @@ export default {
|
||||
(p) =>
|
||||
this.padding +
|
||||
(1 - (p - min) / (max - min)) *
|
||||
(this.viewBoxHeight - 2 * this.padding - this.bottom)
|
||||
(this.viewBoxHeight - 2 * this.padding - this.bottom)
|
||||
)
|
||||
);
|
||||
},
|
||||
@ -218,9 +158,8 @@ export default {
|
||||
return Math.max(...this.points.flat());
|
||||
},
|
||||
axis() {
|
||||
return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${
|
||||
this.viewBoxHeight - this.axisPadding - this.bottom
|
||||
} H ${this.viewBoxWidth - this.axisPadding}`;
|
||||
return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${this.viewBoxHeight - this.axisPadding - this.bottom
|
||||
} H ${this.viewBoxWidth - this.axisPadding}`;
|
||||
},
|
||||
padding() {
|
||||
return this.axisPadding + this.pointsPadding;
|
||||
@ -261,7 +200,7 @@ export default {
|
||||
return (
|
||||
((this.yLabelDivisions - i) *
|
||||
(this.viewBoxHeight - this.padding * 2 - this.bottom)) /
|
||||
this.yLabelDivisions +
|
||||
this.yLabelDivisions +
|
||||
this.padding
|
||||
);
|
||||
},
|
||||
|
||||
@ -1,48 +1,26 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative bg-white dark:bg-gray-900 border dark:border-gray-800 flex-center overflow-hidden group"
|
||||
:class="{
|
||||
rounded: size === 'form',
|
||||
'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
|
||||
'w-12 h-12 rounded-full': size === 'small',
|
||||
}"
|
||||
:title="df?.label"
|
||||
:style="imageSizeStyle"
|
||||
>
|
||||
<div class="relative bg-white dark:bg-gray-900 border dark:border-gray-800 flex-center overflow-hidden group" :class="{
|
||||
rounded: size === 'form',
|
||||
'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
|
||||
'w-12 h-12 rounded-full': size === 'small',
|
||||
}" :title="df?.label" :style="imageSizeStyle">
|
||||
<img v-if="value" :src="value" />
|
||||
<div v-else :class="[!isReadOnly ? 'group-hover:opacity-90' : '']">
|
||||
<div
|
||||
v-if="letterPlaceholder"
|
||||
class="flex h-full items-center justify-center text-gray-400 dark:text-gray-600 font-semibold w-full text-4xl select-none"
|
||||
>
|
||||
<div v-if="letterPlaceholder"
|
||||
class="flex h-full items-center justify-center text-gray-400 dark:text-gray-600 font-semibold w-full text-4xl select-none">
|
||||
{{ letterPlaceholder }}
|
||||
</div>
|
||||
<svg
|
||||
v-else
|
||||
class="w-6 h-6 text-gray-300 dark:text-gray-600"
|
||||
viewBox="0 0 24 21"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg v-else class="w-6 h-6 text-gray-300 dark:text-gray-600" viewBox="0 0 24 21"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M21 3h-4l-2-3H9L7 3H3a3 3 0 00-3 3v12a3 3 0 003 3h18a3 3 0 003-3V6a3 3 0 00-3-3zm-9 14a5 5 0 110-10 5 5 0 010 10z"
|
||||
fill="currentColor"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
fill="currentColor" fill-rule="nonzero" />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="hidden w-full h-full absolute justify-center items-end"
|
||||
:class="[!isReadOnly ? 'group-hover:flex' : '']"
|
||||
style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)"
|
||||
>
|
||||
<button
|
||||
class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1"
|
||||
@click="handleClick"
|
||||
>
|
||||
<FeatherIcon
|
||||
:name="shouldClear ? 'x' : 'upload'"
|
||||
class="w-4 h-4 text-gray-600 dark:text-gray-400"
|
||||
/>
|
||||
<div class="hidden w-full h-full absolute justify-center items-end" :class="[!isReadOnly ? 'group-hover:flex' : '']"
|
||||
style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)">
|
||||
<button class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1" @click="handleClick">
|
||||
<FeatherIcon :name="shouldClear ? 'x' : 'upload'" class="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -34,7 +34,20 @@
|
||||
class="flex items-center justify-between text-base gap-2"
|
||||
>
|
||||
<div
|
||||
class="cursor-pointer w-4 h-4 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 rounded-md group"
|
||||
class="
|
||||
cursor-pointer
|
||||
w-4
|
||||
h-4
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
text-gray-600
|
||||
dark:text-gray-400
|
||||
hover:text-gray-800
|
||||
dark:hover:text-gray-300
|
||||
rounded-md
|
||||
group
|
||||
"
|
||||
>
|
||||
<span class="hidden group-hover:inline-block">
|
||||
<feather-icon
|
||||
@ -99,7 +112,19 @@
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="text-base border-t dark:border-gray-800 p-2 flex items-center text-gray-600 dark:text-gray-500 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-875"
|
||||
class="
|
||||
text-base
|
||||
border-t
|
||||
dark:border-gray-800
|
||||
p-2
|
||||
flex
|
||||
items-center
|
||||
text-gray-600
|
||||
dark:text-gray-500
|
||||
cursor-pointer
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-875
|
||||
"
|
||||
@click="addNewFilter"
|
||||
>
|
||||
<feather-icon name="plus" class="w-4 h-4" />
|
||||
@ -133,7 +158,7 @@ const conditions = [
|
||||
{ label: t`Is Not Empty`, value: 'is not null' },
|
||||
] as const;
|
||||
|
||||
type Condition = (typeof conditions)[number]['value'];
|
||||
type Condition = typeof conditions[number]['value'];
|
||||
|
||||
type Filter = {
|
||||
fieldname: string;
|
||||
|
||||
@ -6,7 +6,16 @@
|
||||
@click="$emit('closemodal')"
|
||||
>
|
||||
<div
|
||||
class="bg-white dark:bg-gray-850 rounded-lg shadow-2xl border dark:border-gray-800 overflow-hidden inner"
|
||||
class="
|
||||
bg-white
|
||||
dark:bg-gray-850
|
||||
rounded-lg
|
||||
shadow-2xl
|
||||
border
|
||||
dark:border-gray-800
|
||||
overflow-hidden
|
||||
inner
|
||||
"
|
||||
v-bind="$attrs"
|
||||
@click.stop
|
||||
>
|
||||
|
||||
@ -1,29 +1,18 @@
|
||||
<template>
|
||||
<div
|
||||
class="px-4 flex justify-between items-center h-row-largest flex-shrink-0 dark:bg-gray-875"
|
||||
:class="[
|
||||
border ? 'border-b dark:border-gray-800' : '',
|
||||
platform !== 'Windows' ? 'window-drag' : '',
|
||||
]"
|
||||
>
|
||||
<div class="px-4 flex justify-between items-center h-row-largest flex-shrink-0 dark:bg-gray-875" :class="[
|
||||
border ? 'border-b dark:border-gray-800' : '',
|
||||
platform !== 'Windows' ? 'window-drag' : '',
|
||||
]">
|
||||
<Transition name="spacer">
|
||||
<div
|
||||
v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'"
|
||||
class="h-full"
|
||||
:class="spacerClass"
|
||||
/>
|
||||
<div v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'" class="h-full"
|
||||
:class="spacerClass" />
|
||||
</Transition>
|
||||
|
||||
<div
|
||||
class="flex items-center window-no-drag gap-4 me-auto"
|
||||
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
|
||||
>
|
||||
<div class="flex items-center window-no-drag gap-4 me-auto"
|
||||
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''">
|
||||
<!-- Nav Group -->
|
||||
<PageHeaderNavGroup />
|
||||
<h1
|
||||
v-if="title"
|
||||
class="text-xl font-semibold select-none whitespace-nowrap dark:text-white"
|
||||
>
|
||||
<h1 v-if="title" class="text-xl font-semibold select-none whitespace-nowrap dark:text-white">
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
@ -34,10 +23,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Right (regular) Slot -->
|
||||
<div
|
||||
class="flex items-stretch window-no-drag gap-2 ms-auto"
|
||||
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
|
||||
>
|
||||
<div class="flex items-stretch window-no-drag gap-2 ms-auto"
|
||||
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,11 @@
|
||||
<!-- Back Button -->
|
||||
<a
|
||||
ref="backlink"
|
||||
class="nav-link border-l border-r border-white dark:border-gray-850 dark:bg-gray-900"
|
||||
class="
|
||||
nav-link
|
||||
border-l border-r border-white
|
||||
dark:border-gray-850 dark:bg-gray-900
|
||||
"
|
||||
:class="
|
||||
historyState.back
|
||||
? 'text-gray-700 dark:text-gray-300 cursor-pointer'
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div
|
||||
class="grid grid-cols-3 text-gray-800 dark:text-gray-100 text-sm select-none items-center"
|
||||
class="
|
||||
grid grid-cols-3
|
||||
text-gray-800
|
||||
dark:text-gray-100
|
||||
text-sm
|
||||
select-none
|
||||
items-center
|
||||
"
|
||||
style="height: 50px"
|
||||
>
|
||||
<!-- Length Display -->
|
||||
@ -25,7 +32,14 @@
|
||||
<div class="flex gap-1 bg-gray-100 dark:bg-gray-890 rounded">
|
||||
<input
|
||||
type="number"
|
||||
class="w-7 text-end outline-none bg-transparent focus:text-gray-900 dark:focus:text-gray-25"
|
||||
class="
|
||||
w-7
|
||||
text-end
|
||||
outline-none
|
||||
bg-transparent
|
||||
focus:text-gray-900
|
||||
dark:focus:text-gray-25
|
||||
"
|
||||
:value="pageNo"
|
||||
min="1"
|
||||
:max="maxPages"
|
||||
@ -52,7 +66,13 @@
|
||||
<!-- Count Selector -->
|
||||
<div
|
||||
v-if="filteredCounts.length"
|
||||
class="border border-gray-100 dark:border-gray-800 rounded flex justify-self-end"
|
||||
class="
|
||||
border border-gray-100
|
||||
dark:border-gray-800
|
||||
rounded
|
||||
flex
|
||||
justify-self-end
|
||||
"
|
||||
>
|
||||
<template v-for="c in filteredCounts" :key="c + '-count'">
|
||||
<button
|
||||
|
||||
@ -12,7 +12,17 @@
|
||||
v-show="isOpen"
|
||||
ref="popover"
|
||||
:class="popoverClass"
|
||||
class="bg-white dark:bg-gray-850 rounded-md border dark:border-gray-875 shadow-lg popover-container relative z-10"
|
||||
class="
|
||||
bg-white
|
||||
dark:bg-gray-850
|
||||
rounded-md
|
||||
border
|
||||
dark:border-gray-875
|
||||
shadow-lg
|
||||
popover-container
|
||||
relative
|
||||
z-10
|
||||
"
|
||||
:style="{ 'transition-delay': `${isOpen ? entryDelay : exitDelay}ms` }"
|
||||
>
|
||||
<slot name="content" :toggle-popover="togglePopover"></slot>
|
||||
|
||||
@ -9,7 +9,20 @@
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="text-sm flex focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 focus:text-gray-800 dark:focus:text-gray-100 items-center py-1 rounded-md leading-relaxed cursor-pointer"
|
||||
class="
|
||||
text-sm
|
||||
flex
|
||||
focus:outline-none
|
||||
hover:text-gray-800
|
||||
dark:hover:text-gray-100
|
||||
focus:text-gray-800
|
||||
dark:focus:text-gray-100
|
||||
items-center
|
||||
py-1
|
||||
rounded-md
|
||||
leading-relaxed
|
||||
cursor-pointer
|
||||
"
|
||||
:class="
|
||||
!value
|
||||
? 'text-gray-600 dark:text-gray-500'
|
||||
|
||||
@ -7,7 +7,16 @@
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="w-full w-form shadow-lg rounded-lg border dark:border-gray-800 relative bg-white dark:bg-gray-875"
|
||||
class="
|
||||
w-full w-form
|
||||
shadow-lg
|
||||
rounded-lg
|
||||
border
|
||||
dark:border-gray-800
|
||||
relative
|
||||
bg-white
|
||||
dark:bg-gray-875
|
||||
"
|
||||
style="height: 700px"
|
||||
>
|
||||
<!-- Welcome to Frappe Books -->
|
||||
@ -22,17 +31,24 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr class="dark:border-gray-800"/>
|
||||
<hr class="dark:border-gray-800" />
|
||||
|
||||
<!-- New File (Blue Icon) -->
|
||||
<div
|
||||
data-testid="create-new-file"
|
||||
class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
|
||||
:class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
|
||||
:class="
|
||||
creatingDemo
|
||||
? ''
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'
|
||||
"
|
||||
@click="newDatabase"
|
||||
>
|
||||
<div class="w-8 h-8 rounded-full bg-blue-500 relative flex-center">
|
||||
<feather-icon name="plus" class="text-white dark:text-gray-900 w-5 h-5" />
|
||||
<feather-icon
|
||||
name="plus"
|
||||
class="text-white dark:text-gray-900 w-5 h-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -48,11 +64,28 @@
|
||||
<!-- Existing File (Green Icon) -->
|
||||
<div
|
||||
class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
|
||||
:class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
|
||||
:class="
|
||||
creatingDemo
|
||||
? ''
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'
|
||||
"
|
||||
@click="existingDatabase"
|
||||
>
|
||||
<div class="w-8 h-8 rounded-full bg-green-500 dark:bg-green-600 relative flex-center">
|
||||
<feather-icon name="upload" class="w-4 h-4 text-white dark:text-gray-900" />
|
||||
<div
|
||||
class="
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-green-500
|
||||
dark:bg-green-600
|
||||
relative
|
||||
flex-center
|
||||
"
|
||||
>
|
||||
<feather-icon
|
||||
name="upload"
|
||||
class="w-4 h-4 text-white dark:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium dark:text-gray-200">
|
||||
@ -68,10 +101,24 @@
|
||||
<div
|
||||
v-if="!files?.length"
|
||||
class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
|
||||
:class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
|
||||
:class="
|
||||
creatingDemo
|
||||
? ''
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'
|
||||
"
|
||||
@click="createDemo"
|
||||
>
|
||||
<div class="w-8 h-8 rounded-full bg-pink-500 dark:bg-pink-600 relative flex-center">
|
||||
<div
|
||||
class="
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-pink-500
|
||||
dark:bg-pink-600
|
||||
relative
|
||||
flex-center
|
||||
"
|
||||
>
|
||||
<feather-icon name="monitor" class="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
@ -83,7 +130,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark:border-gray-800"/>
|
||||
<hr class="dark:border-gray-800" />
|
||||
|
||||
<!-- File List -->
|
||||
<div class="overflow-y-auto" style="max-height: 340px">
|
||||
@ -91,7 +138,11 @@
|
||||
v-for="(file, i) in files"
|
||||
:key="file.dbPath"
|
||||
class="h-row-largest px-4 flex gap-4 items-center"
|
||||
:class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
|
||||
:class="
|
||||
creatingDemo
|
||||
? ''
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'
|
||||
"
|
||||
:title="t`${file.companyName} stored at ${file.dbPath}`"
|
||||
@click="selectFile(file)"
|
||||
>
|
||||
@ -103,7 +154,8 @@
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
bg-gray-200 dark:bg-gray-800
|
||||
bg-gray-200
|
||||
dark:bg-gray-800
|
||||
text-gray-500
|
||||
font-semibold
|
||||
flex-shrink-0
|
||||
@ -117,13 +169,20 @@
|
||||
<h2 class="font-medium dark:text-gray-200">
|
||||
{{ file.companyName }}
|
||||
</h2>
|
||||
<p class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
|
||||
<p
|
||||
class="
|
||||
whitespace-nowrap
|
||||
text-sm text-gray-600
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ formatDate(file.modified) }}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
class="
|
||||
text-sm text-gray-600 dark:text-gray-400
|
||||
text-sm text-gray-600
|
||||
dark:text-gray-400
|
||||
overflow-x-auto
|
||||
no-scrollbar
|
||||
whitespace-nowrap
|
||||
@ -136,12 +195,15 @@
|
||||
class="
|
||||
ms-auto
|
||||
p-2
|
||||
hover:bg-red-200 dark:hover:bg-red-900 dark:hover:bg-opacity-40
|
||||
hover:bg-red-200
|
||||
dark:hover:bg-red-900 dark:hover:bg-opacity-40
|
||||
rounded-full
|
||||
w-8
|
||||
h-8
|
||||
text-gray-600 dark:text-gray-400
|
||||
hover:text-red-400 dark:hover:text-red-200
|
||||
text-gray-600
|
||||
dark:text-gray-400
|
||||
hover:text-red-400
|
||||
dark:hover:text-red-200
|
||||
"
|
||||
@click.stop="() => deleteDb(i)"
|
||||
>
|
||||
@ -149,7 +211,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr v-if="files?.length" class="dark:border-gray-800"/>
|
||||
<hr v-if="files?.length" class="dark:border-gray-800" />
|
||||
|
||||
<!-- Language Selector -->
|
||||
<div
|
||||
@ -160,7 +222,8 @@
|
||||
items-center
|
||||
absolute
|
||||
p-4
|
||||
text-gray-900 dark:text-gray-100
|
||||
text-gray-900
|
||||
dark:text-gray-100
|
||||
"
|
||||
style="top: 100%; transform: translateY(-100%)"
|
||||
>
|
||||
@ -169,8 +232,10 @@
|
||||
v-if="files?.length"
|
||||
class="
|
||||
text-sm
|
||||
bg-gray-100 dark:bg-gray-890
|
||||
hover:bg-gray-200 dark:hover:bg-gray-900
|
||||
bg-gray-100
|
||||
dark:bg-gray-890
|
||||
hover:bg-gray-200
|
||||
dark:hover:bg-gray-900
|
||||
rounded
|
||||
px-4
|
||||
py-1.5
|
||||
@ -205,14 +270,18 @@
|
||||
creating the dummy instance.
|
||||
</p>
|
||||
<div class="flex my-12 justify-center items-baseline gap-4 text-base">
|
||||
<label for="basecount" class="text-gray-600 dark:text-gray-400">Base Count</label>
|
||||
<label for="basecount" class="text-gray-600 dark:text-gray-400"
|
||||
>Base Count</label
|
||||
>
|
||||
<input
|
||||
v-model="baseCount"
|
||||
type="number"
|
||||
name="basecount"
|
||||
class="
|
||||
bg-gray-100 dark:bg-gray-875
|
||||
focus:bg-gray-200 dark:focus:bg-gray-890
|
||||
bg-gray-100
|
||||
dark:bg-gray-875
|
||||
focus:bg-gray-200
|
||||
dark:focus:bg-gray-890
|
||||
rounded-md
|
||||
px-2
|
||||
py-1
|
||||
|
||||
@ -16,7 +16,14 @@
|
||||
<div
|
||||
v-for="(column, i) in columns"
|
||||
:key="column.label"
|
||||
class="overflow-x-auto no-scrollbar whitespace-nowrap h-row items-center flex"
|
||||
class="
|
||||
overflow-x-auto
|
||||
no-scrollbar
|
||||
whitespace-nowrap
|
||||
h-row
|
||||
items-center
|
||||
flex
|
||||
"
|
||||
:class="{
|
||||
'ms-auto': isNumeric(column.fieldtype),
|
||||
'pe-4': i === columns.length - 1,
|
||||
@ -31,7 +38,11 @@
|
||||
<!-- Data Rows -->
|
||||
<div
|
||||
v-if="dataSlice.length !== 0"
|
||||
class="overflow-y-auto dark:dark-scroll custom-scroll custom-scroll-thumb1"
|
||||
class="
|
||||
overflow-y-auto
|
||||
dark:dark-scroll
|
||||
custom-scroll custom-scroll-thumb1
|
||||
"
|
||||
>
|
||||
<div v-for="(row, i) in dataSlice" :key="(row.name as string)">
|
||||
<!-- Row Content -->
|
||||
@ -41,7 +52,13 @@
|
||||
</p>
|
||||
<Row
|
||||
gap="1rem"
|
||||
class="cursor-pointer text-gray-900 dark:text-gray-300 flex-1 h-row-mid"
|
||||
class="
|
||||
cursor-pointer
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
flex-1
|
||||
h-row-mid
|
||||
"
|
||||
:column-count="columns.length"
|
||||
@click="$emit('openDoc', row.name)"
|
||||
>
|
||||
|
||||
@ -40,11 +40,15 @@ export function getColorClass(
|
||||
value = 300,
|
||||
darkvalue = 600
|
||||
) {
|
||||
return `${type}-${getValidColor(color)}-${value} dark:${type}-${getValidColor(color)}-${darkvalue}`;
|
||||
return `${type}-${getValidColor(color)}-${value} dark:${type}-${getValidColor(
|
||||
color
|
||||
)}-${darkvalue}`;
|
||||
}
|
||||
|
||||
export function getTextColorClass(color: string) {
|
||||
return `text-${getValidColor(color)}-700 dark:text-${getValidColor(color)}-200`;
|
||||
return `text-${getValidColor(color)}-700 dark:text-${getValidColor(
|
||||
color
|
||||
)}-200`;
|
||||
}
|
||||
|
||||
export function getBgTextColorClass(color: string) {
|
||||
|
||||
@ -15,7 +15,7 @@ export function setDarkMode(): void {
|
||||
let darkMode = fyo.config.get('darkMode');
|
||||
|
||||
/* Fetching system theme */
|
||||
if (darkMode === undefined){
|
||||
if (darkMode === undefined) {
|
||||
darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
fyo.config.set('darkMode', darkMode);
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@ module.exports = {
|
||||
'dark',
|
||||
],
|
||||
display: ['group-hover'],
|
||||
borderWidth:['last'],
|
||||
borderWidth: ['last'],
|
||||
fontWeight: ['dark'],
|
||||
},
|
||||
plugins: [require('tailwindcss-rtl')],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user