* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip
This commit is contained in:
syuilo
2020-07-11 10:13:11 +09:00
committed by GitHub
parent 5b28d7bf90
commit cf3fc97202
56 changed files with 2695 additions and 907 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader }">
<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable }" v-size="[{ max: 500 }]">
<header v-if="showHeader">
<div class="title"><slot name="header"></slot></div>
<slot name="func"></slot>
@@ -47,6 +47,11 @@ export default Vue.extend({
required: false,
default: true
},
scrollable: {
type: Boolean,
required: false,
default: false
},
},
data() {
return {
@@ -107,10 +112,19 @@ export default Vue.extend({
box-shadow: none !important;
}
&.scrollable {
display: flex;
flex-direction: column;
> div {
overflow: auto;
}
}
> header {
position: relative;
box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
z-index: 1;
z-index: 2;
background: var(--panelHeaderBg);
color: var(--panelHeaderFg);
@@ -118,10 +132,6 @@ export default Vue.extend({
margin: 0;
padding: 12px 16px;
@media (max-width: 500px) {
padding: 8px 10px;
}
> [data-icon] {
margin-right: 6px;
}
@@ -141,5 +151,21 @@ export default Vue.extend({
height: 100%;
}
}
&.max-width_500px {
> header {
> .title {
padding: 8px 10px;
}
}
}
}
._forceContainerFull_ .ukygtjoj {
> header {
> .title {
padding: 12px 16px !important;
}
}
}
</style>

View File

@@ -20,6 +20,7 @@
:pattern="pattern"
:autocomplete="autocomplete"
:spellcheck="spellcheck"
:step="step"
@focus="focused = true"
@blur="focused = false"
@keydown="$emit('keydown', $event)"
@@ -36,6 +37,7 @@
:pattern="pattern"
:autocomplete="autocomplete"
:spellcheck="spellcheck"
:step="step"
@focus="focused = true"
@blur="focused = false"
@keydown="$emit('keydown', $event)"
@@ -114,6 +116,9 @@ export default Vue.extend({
spellcheck: {
required: false
},
step: {
required: false
},
debounce: {
required: false
},
@@ -164,7 +169,7 @@ export default Vue.extend({
},
v(v) {
if (this.type === 'number') {
this.$emit('input', parseInt(v, 10));
this.$emit('input', parseFloat(v));
} else {
this.$emit('input', v);
}
@@ -297,7 +302,7 @@ export default Vue.extend({
pointer-events: none;
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 0.3s;
font-size: 16px;
font-size: 1em;
line-height: 32px;
color: var(--inputLabel);
pointer-events: none;
@@ -312,7 +317,7 @@ export default Vue.extend({
top: -17px;
left: 0 !important;
pointer-events: none;
font-size: 16px;
font-size: 1em;
line-height: 32px;
color: var(--inputLabel);
pointer-events: none;
@@ -343,7 +348,7 @@ export default Vue.extend({
padding: 0;
font: inherit;
font-weight: normal;
font-size: 16px;
font-size: 1em;
line-height: $height;
color: var(--inputText);
background: transparent;
@@ -364,7 +369,7 @@ export default Vue.extend({
position: absolute;
z-index: 1;
top: 0;
font-size: 16px;
font-size: 1em;
line-height: 32px;
color: var(--inputLabel);
pointer-events: none;

View File

@@ -135,7 +135,7 @@ export default Vue.extend({
pointer-events: none;
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 0.3s;
font-size: 16px;
font-size: 1em;
line-height: 32px;
pointer-events: none;
//will-change transform
@@ -150,7 +150,7 @@ export default Vue.extend({
padding: 0;
font: inherit;
font-weight: normal;
font-size: 16px;
font-size: 1em;
height: 32px;
background: none;
border: none;
@@ -170,7 +170,7 @@ export default Vue.extend({
display: block;
align-self: center;
justify-self: center;
font-size: 16px;
font-size: 1em;
line-height: 32px;
color: rgba(#000, 0.54);
pointer-events: none;

View File

@@ -5,7 +5,7 @@
role="switch"
:aria-checked="checked"
:aria-disabled="disabled"
@click="toggle"
@click.prevent="toggle"
>
<input
type="checkbox"

View File

@@ -133,7 +133,7 @@ export default Vue.extend({
pointer-events: none;
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 0.3s;
font-size: 16px;
font-size: 1em;
line-height: 32px;
pointer-events: none;
//will-change transform
@@ -151,7 +151,7 @@ export default Vue.extend({
box-sizing: border-box;
font: inherit;
font-weight: normal;
font-size: 16px;
font-size: 1em;
background: transparent;
border: none;
border-radius: 0;