commit
2038f9f3fe
@ -0,0 +1,17 @@
|
|||||||
|
@mixin unfocused-style {
|
||||||
|
@content;
|
||||||
|
|
||||||
|
&:focus:not(:focus-visible):not(:hover) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin focused-style {
|
||||||
|
&:hover, &:focus {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,67 @@
|
|||||||
|
import { get, set } from 'lodash'
|
||||||
|
import ModifiedIndicator from './modified_indicator.vue'
|
||||||
|
import Select from 'src/components/select/select.vue'
|
||||||
|
|
||||||
|
export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
|
||||||
|
export const defaultHorizontalUnits = ['px', 'rem', 'vw']
|
||||||
|
export const defaultVerticalUnits = ['px', 'rem', 'vh']
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ModifiedIndicator,
|
||||||
|
Select
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
path: String,
|
||||||
|
disabled: Boolean,
|
||||||
|
min: Number,
|
||||||
|
units: {
|
||||||
|
type: [String],
|
||||||
|
default: () => allCssUnits
|
||||||
|
},
|
||||||
|
expert: [Number, String]
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
pathDefault () {
|
||||||
|
const [firstSegment, ...rest] = this.path.split('.')
|
||||||
|
return [firstSegment + 'DefaultValue', ...rest].join('.')
|
||||||
|
},
|
||||||
|
stateUnit () {
|
||||||
|
return (this.state || '').replace(/\d+/, '')
|
||||||
|
},
|
||||||
|
stateValue () {
|
||||||
|
return (this.state || '').replace(/\D+/, '')
|
||||||
|
},
|
||||||
|
state () {
|
||||||
|
const value = get(this.$parent, this.path)
|
||||||
|
if (value === undefined) {
|
||||||
|
return this.defaultState
|
||||||
|
} else {
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultState () {
|
||||||
|
return get(this.$parent, this.pathDefault)
|
||||||
|
},
|
||||||
|
isChanged () {
|
||||||
|
return this.state !== this.defaultState
|
||||||
|
},
|
||||||
|
matchesExpertLevel () {
|
||||||
|
return (this.expert || 0) <= this.$parent.expertLevel
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
update (e) {
|
||||||
|
set(this.$parent, this.path, e)
|
||||||
|
},
|
||||||
|
reset () {
|
||||||
|
set(this.$parent, this.path, this.defaultState)
|
||||||
|
},
|
||||||
|
updateValue (e) {
|
||||||
|
set(this.$parent, this.path, parseInt(e.target.value) + this.stateUnit)
|
||||||
|
},
|
||||||
|
updateUnit (e) {
|
||||||
|
set(this.$parent, this.path, this.stateValue + e.target.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<span
|
||||||
|
v-if="matchesExpertLevel"
|
||||||
|
class="SizeSetting"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
:for="path"
|
||||||
|
class="size-label"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
:id="path"
|
||||||
|
class="number-input"
|
||||||
|
type="number"
|
||||||
|
step="1"
|
||||||
|
:disabled="disabled"
|
||||||
|
:min="min || 0"
|
||||||
|
:value="stateValue"
|
||||||
|
@change="updateValue"
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
:id="path"
|
||||||
|
:model-value="stateUnit"
|
||||||
|
:disabled="disabled"
|
||||||
|
class="css-unit-input"
|
||||||
|
@change="updateUnit"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="option in units"
|
||||||
|
:key="option"
|
||||||
|
:value="option"
|
||||||
|
>
|
||||||
|
{{ option }}
|
||||||
|
</option>
|
||||||
|
</Select>
|
||||||
|
{{ ' ' }}
|
||||||
|
<ModifiedIndicator
|
||||||
|
:changed="isChanged"
|
||||||
|
:onclick="reset"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./size_setting.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.css-unit-input, .css-unit-input select {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
width: 4em !important;
|
||||||
|
max-width: 4em !important;
|
||||||
|
min-width: 4em !important;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue