remove legacy ui-dropdown-list
This commit is contained in:
@@ -119,7 +119,7 @@
|
||||
align-items: center;
|
||||
font-size: var(--font-size);
|
||||
padding: 0 16px;
|
||||
height: 46px;
|
||||
height: 42px;
|
||||
color: var(--color-fg);
|
||||
border-radius: var(--radius);
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -1,203 +0,0 @@
|
||||
<template>
|
||||
<div class="ui-dropdown-list" :class="{ 'is-multiline': multiline }">
|
||||
<template v-for="item in value">
|
||||
<button v-if="!item.type || item.type === 'button'" :disabled="item.disabled" type="button" @click="clicked(item)"
|
||||
class="ui-dropdown-list-item" :class="{ 'has-icon': item.icon, 'is-active': item.active || item.isActive }">
|
||||
<i v-if="item.icon" class="ui-dropdown-list-item-icon" :class="item.icon" :style="{ color: item.color ? item.color : null }"></i>
|
||||
{{item.name | localize}}
|
||||
<i v-if="item.active || item.isActive" class="ui-dropdown-list-item-selected fth-check"></i>
|
||||
<i v-if="item.loading" class="ui-dropdown-list-item-progress"></i>
|
||||
</button>
|
||||
<hr class="ui-dropdown-list-separator" v-if="item.type === 'separator'">
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { warn } from 'zero/services/debug';
|
||||
|
||||
export default {
|
||||
name: 'uiDropdownList',
|
||||
|
||||
props: {
|
||||
multiline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: []
|
||||
},
|
||||
action: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
dropdown: null
|
||||
}),
|
||||
|
||||
mounted ()
|
||||
{
|
||||
// find parent dropdown so we can pass it on item click
|
||||
let current = this;
|
||||
do
|
||||
{
|
||||
if (current.$options.name === 'uiDropdown')
|
||||
{
|
||||
this.dropdown = current;
|
||||
break;
|
||||
}
|
||||
}
|
||||
while (current = current.$parent);
|
||||
|
||||
if (false && !this.dropdown)
|
||||
{
|
||||
warn('ui-dropdown-list: Could not find parent <ui-dropdown />');
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
clicked(item)
|
||||
{
|
||||
var instance = this;
|
||||
|
||||
if (!item.loading && !item.disabled)
|
||||
{
|
||||
let baseObj = typeof item.action === 'function' ? item : this;
|
||||
baseObj.action(item, {
|
||||
dropdown: this.dropdown,
|
||||
hide()
|
||||
{
|
||||
if (this.dropdown)
|
||||
{
|
||||
this.dropdown.hide();
|
||||
}
|
||||
instance.$emit('hide');
|
||||
},
|
||||
loading(isLoading)
|
||||
{
|
||||
instance.$set(item, 'loading', isLoading);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.ui-dropdown-list
|
||||
{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
button.ui-dropdown-list-item
|
||||
{
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-gap: 6px;
|
||||
align-items: center;
|
||||
font-size: var(--font-size);
|
||||
padding: 0 16px;
|
||||
height: 46px;
|
||||
color: var(--color-fg-dim);
|
||||
border-radius: var(--radius);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 300px;
|
||||
|
||||
&.has-icon
|
||||
{
|
||||
grid-template-columns: 30px 1fr auto;
|
||||
}
|
||||
|
||||
.is-multiline &
|
||||
{
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover, &.is-active, &:focus
|
||||
{
|
||||
background: var(--color-highlight);
|
||||
color: var(--color-fg);
|
||||
//font-weight: 700;
|
||||
|
||||
.ui-dropdown-list-item-icon
|
||||
{
|
||||
color: var(--color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active
|
||||
{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&[disabled]
|
||||
{
|
||||
color: var(--color-fg-light);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
||||
.ui-dropdown-list-item-icon
|
||||
{
|
||||
color: var(--color-fg-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dropdown-list-item-icon
|
||||
{
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
color: var(--color-fg-dim);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.ui-dropdown-list-separator
|
||||
{
|
||||
border-bottom-color: var(--color-highlight);
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.ui-dropdown-list-item-progress
|
||||
{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: 2;
|
||||
border-radius: 40px;
|
||||
border: 2px solid transparent;
|
||||
border-left-color: var(--color-fg);
|
||||
opacity: 1;
|
||||
will-change: transform;
|
||||
animation: rotating .5s linear infinite;
|
||||
transition: opacity .25s ease;
|
||||
}
|
||||
|
||||
@keyframes rotating
|
||||
{
|
||||
from
|
||||
{
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0)
|
||||
}
|
||||
to
|
||||
{
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
<template v-slot:button>
|
||||
<ui-button type="white" :label="selectedText" caret="down" />
|
||||
</template>
|
||||
<ui-dropdown-list v-model="selectActions" />
|
||||
<slot name="actions"></slot>
|
||||
</ui-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,10 +32,6 @@
|
||||
selection: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
selectActions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="countries">
|
||||
<ui-header-bar title="@country.list" :back-button="true">
|
||||
<ui-table-filter v-model="tableConfig" :selection="selection" :select-actions="selectActions" />
|
||||
<ui-table-filter v-model="tableConfig" :selection="selection">
|
||||
<template v-slot:actions>
|
||||
<ui-dropdown-button label="Delete" icon="fth-trash" />
|
||||
</template>
|
||||
</ui-table-filter>
|
||||
<ui-add-button :route="createRoute" />
|
||||
</ui-header-bar>
|
||||
<div class="ui-blank-box">
|
||||
@@ -20,21 +24,16 @@
|
||||
data: () => ({
|
||||
createRoute: baseRoute + '-create',
|
||||
tableConfig: {},
|
||||
selection: [],
|
||||
selectActions: []
|
||||
selection: []
|
||||
}),
|
||||
|
||||
created()
|
||||
{
|
||||
this.selectActions.push({
|
||||
name: 'Delete',
|
||||
icon: 'fth-trash'
|
||||
});
|
||||
|
||||
this.tableConfig = {
|
||||
labelPrefix: '@country.fields.',
|
||||
allowOrder: false,
|
||||
search: null,
|
||||
selectable: true,
|
||||
columns: {
|
||||
flag: {
|
||||
label: '',
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<template v-slot:button>
|
||||
<ui-button type="white" label="@ui.actions" caret="down" />
|
||||
</template>
|
||||
<ui-dropdown-list v-model="actions" />
|
||||
<ui-dropdown-separator />
|
||||
</ui-dropdown>
|
||||
<ui-button :submit="true" label="@ui.save" :state="form.state" v-if="!disabled" />
|
||||
</ui-header-bar>
|
||||
@@ -27,7 +27,6 @@
|
||||
data: () => ({
|
||||
disabled: false,
|
||||
renderer: {},
|
||||
actions: [],
|
||||
model: null,
|
||||
fullModel: null
|
||||
}),
|
||||
@@ -43,15 +42,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
created()
|
||||
{
|
||||
this.actions.push({
|
||||
name: 'Delete',
|
||||
icon: 'fth-trash',
|
||||
action: this.onDelete
|
||||
});
|
||||
},
|
||||
|
||||
beforeRouteLeave(to, from, next)
|
||||
{
|
||||
this.$refs.form.beforeRouteLeave(to, from, next);
|
||||
|
||||
Reference in New Issue
Block a user