mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-25 09:13:05 +08:00
Fix multiple css issues on Item card [SCI-9653] (#6608)
This commit is contained in:
parent
5878ed0c7c
commit
2e3ae5cc5c
18 changed files with 165 additions and 132 deletions
|
@ -187,7 +187,7 @@
|
|||
|
||||
<!-- NAVIGATION -->
|
||||
<div v-if="isShowing" ref="navigationRef" id="navigation"
|
||||
class="flex item-end gap-x-4 min-w-[130px] min-h-[130px] h-fit sticky top-0 right-[24px] ">
|
||||
class="flex item-end gap-x-4 min-w-[130px] min-h-[130px] h-fit sticky top-0 right-[4px] ">
|
||||
<scroll-spy :itemsToCreate="[
|
||||
{ id: 'highlight-item-1', textId: 'text-item-1', labelAlias: 'information_label', label: 'information-label', sectionId: 'information-section' },
|
||||
{ id: 'highlight-item-2', textId: 'text-item-2', labelAlias: 'custom_columns_label', label: 'custom-columns-label', sectionId: 'custom-columns-section' },
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
<div v-if="dateType === 'date'">
|
||||
<div v-if="isEditing || values?.datetime" ref="edit">
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event)"
|
||||
:selectorId="`DatePicker${colId}`"
|
||||
:dateOnly="true"
|
||||
|
@ -16,7 +17,7 @@
|
|||
:standAlone="true"
|
||||
/>
|
||||
</div>
|
||||
<div v-else ref="view" >
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
|
||||
{{ i18n.t(`repositories.item_card.repository_date_value.${canEdit ? 'placeholder' : 'no_date'}`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -24,6 +25,7 @@
|
|||
<div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex align-center">
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'start_time')"
|
||||
:selectorId="`DatePickerStart${colId}`"
|
||||
:dateOnly="true"
|
||||
|
@ -35,6 +37,7 @@
|
|||
<span class="mr-3">-</span>
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'end_time')"
|
||||
:selectorId="`DatePickerEnd${colId}`"
|
||||
:dateOnly="true"
|
||||
|
@ -44,13 +47,14 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else ref="view" >
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
|
||||
{{ i18n.t(`repositories.item_card.repository_date_range_value.${canEdit ? 'placeholder' : 'no_date_range'}`) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dateType === 'dateTime'">
|
||||
<div v-if="isEditing || values?.datetime" ref="edit" class="w-full">
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime"
|
||||
:selectorId="`DatePicker${colId}`"
|
||||
:defaultValue="dateValue(values?.datetime)"
|
||||
|
@ -59,7 +63,7 @@
|
|||
timeClassName="w-11"
|
||||
/>
|
||||
</div>
|
||||
<div v-else ref="view" >
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
|
||||
{{ i18n.t(`repositories.item_card.repository_date_time_value.${canEdit ? 'placeholder' : 'no_date_time'}`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -67,6 +71,7 @@
|
|||
<div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'start_time')"
|
||||
:selectorId="`DatePickerStart${colId}`"
|
||||
:defaultValue="dateValue(timeFrom?.datetime)"
|
||||
|
@ -80,6 +85,7 @@
|
|||
<span class="mx-1">-</span>
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'end_time')"
|
||||
:selectorId="`DatePickerEnd${colId}`"
|
||||
:defaultValue="dateValue(timeTo?.datetime)"
|
||||
|
@ -91,13 +97,14 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else ref="view" >
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
|
||||
{{ i18n.t(`repositories.item_card.repository_date_time_range_value.${canEdit ? 'placeholder' : 'no_date_time_range'}`) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="dateType === 'time'">
|
||||
<div v-if="isEditing || values?.datetime" ref="edit">
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime"
|
||||
:selectorId="`DatePicker${colId}`"
|
||||
:timeOnly="true"
|
||||
|
@ -106,7 +113,7 @@
|
|||
timeClassName="w-11"
|
||||
/>
|
||||
</div>
|
||||
<div v-else ref="view">
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
|
||||
{{ i18n.t(`repositories.item_card.repository_time_value.${ canEdit ? 'placeholder' : 'no_time'}`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -114,6 +121,7 @@
|
|||
<div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'start_time')"
|
||||
:selectorId="`DatePickerStart${colId}`"
|
||||
:timeOnly="true"
|
||||
|
@ -125,6 +133,7 @@
|
|||
<span class="mx-1">-</span>
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'end_time')"
|
||||
:selectorId="`DatePickerEnd${colId}`"
|
||||
:timeOnly="true"
|
||||
|
@ -134,7 +143,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else ref="view">
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
|
||||
{{ i18n.t(`repositories.item_card.repository_time_range_value.${canEdit ? 'placeholder' : 'no_time_range'}`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -191,7 +200,7 @@
|
|||
},
|
||||
computed: {
|
||||
editableClassName() {
|
||||
const className = 'border-solid border-[1px] p-2 sci-cursor-edit'
|
||||
const className = 'border-solid border-[1px] py-2 px-3 sci-cursor-edit'
|
||||
if (this.canEdit && this.errorMessage) return `${className} border-sn-delete-red`;
|
||||
if (this.canEdit && this.isEditing) return `${className} border-sn-science-blue`;
|
||||
if (this.canEdit) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;
|
||||
|
|
|
@ -35,7 +35,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!error" class="flex flex-row items-center text-sn-grey font-inter text-sm font-normal leading-5 justify-between">
|
||||
<div v-else-if="!error" class="flex flex-row items-center font-inter text-sm font-normal leading-5 justify-between"
|
||||
:class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
|
||||
{{ i18n.t(`repositories.item_card.repository_asset_value.${canEdit ? 'placeholder' : 'no_asset'}`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
</div>
|
||||
<div v-if="checklistItems.length > 0">
|
||||
<checklist-select
|
||||
v-if="permissions?.can_manage && !inArchivedRepositoryRow"
|
||||
v-if="canEdit"
|
||||
@change="changeSelected"
|
||||
@update="update"
|
||||
:initialSelectedValues="colVal?.map(item => item.value)"
|
||||
|
@ -15,6 +15,8 @@
|
|||
:options="checklistItems"
|
||||
:placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
|
||||
:no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
|
||||
className="h-[38px] !pl-3"
|
||||
optionsClassName="max-h-[300px]"
|
||||
></checklist-select>
|
||||
<div v-else
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-[370px] overflow-x-auto flex flex-wrap gap-1">
|
||||
|
@ -52,9 +54,8 @@ export default {
|
|||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Array,
|
||||
permissions: null,
|
||||
optionsPath: String,
|
||||
inArchivedRepositoryRow: Boolean,
|
||||
canEdit: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
@ -17,6 +17,8 @@
|
|||
:placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
|
||||
:no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
|
||||
:searchPlaceholder="i18n.t('repositories.item_card.dropdown_placeholder')"
|
||||
className="h-[38px] !pl-3"
|
||||
optionsClassName="max-h-[300px]"
|
||||
></select-search>
|
||||
<div v-else-if="text"
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5"
|
||||
|
|
|
@ -13,9 +13,9 @@
|
|||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="canEdit">
|
||||
<div v-if="canEdit" class="w-full">
|
||||
<text-area :initialValue="(colVal)?.toLocaleString('fullwide', {useGrouping:false}) || ''"
|
||||
:noContentPlaceholder="noContentPlaceholder"
|
||||
:noContentPlaceholder="i18n.t('repositories.item_card.repository_number_value.placeholder')"
|
||||
:placeholder="i18n.t('repositories.item_card.repository_number_value.placeholder')"
|
||||
:decimals="decimals"
|
||||
:isNumber="true"
|
||||
|
@ -23,7 +23,8 @@
|
|||
:expandable="expandable"
|
||||
:collapsed="collapsed"
|
||||
@toggleExpandableState="toggleExpandableState"
|
||||
@update="update" />
|
||||
@update="update"
|
||||
className="px-3"/>
|
||||
</div>
|
||||
<div v-else-if="colVal"
|
||||
ref="numberRef"
|
||||
|
@ -64,18 +65,12 @@ export default {
|
|||
colName: String,
|
||||
colVal: Number,
|
||||
permissions: null,
|
||||
inArchivedRepositoryRow: Boolean,
|
||||
canEdit: { type: Boolean, defaul: false}
|
||||
},
|
||||
created() {
|
||||
// constants
|
||||
this.noContentPlaceholder = this.i18n.t("repositories.item_card.repository_number_value.no_number");
|
||||
this.decimals = Number(document.getElementById(`${this.colId}`).dataset['metadataDecimals']) || 0;
|
||||
},
|
||||
computed: {
|
||||
canEdit() {
|
||||
return this.permissions?.can_manage && !this.inArchivedRepositoryRow;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse() {
|
||||
if (!this.expandable) return;
|
||||
|
|
|
@ -17,6 +17,8 @@
|
|||
:placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
|
||||
:no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
|
||||
:searchPlaceholder="i18n.t('repositories.item_card.dropdown_placeholder')"
|
||||
className="h-[38px] !pl-3"
|
||||
optionsClassName="max-h-[300px]"
|
||||
></select-search>
|
||||
<div v-else-if="status && icon"
|
||||
class="flex flex-row items-center text-sn-dark-grey font-inter text-sm font-normal leading-5 gap-1.5">
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
<div v-if="values?.stock_formatted" :data-manage-stock-url="values?.stock_url" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 stock-value">
|
||||
{{ values.stock_formatted }}
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5 stock-value">
|
||||
<div v-else class="font-inter text-sm font-normal leading-5" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
|
||||
{{ i18n.t(`repositories.item_card.repository_stock_value.${canEdit ? 'placeholder' : 'no_stock'}`) }}
|
||||
</div>
|
||||
<span class="absolute right-2 reminder" :class="{ 'top-1.5': canEdit, 'top-0': !canEdit, hidden: !values?.reminder }">
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<div v-if="canEdit">
|
||||
<text-area :initialValue="colVal?.edit"
|
||||
:noContentPlaceholder="noContentPlaceholder"
|
||||
:noContentPlaceholder="i18n.t('repositories.item_card.repository_text_value.placeholder')"
|
||||
:placeholder="i18n.t('repositories.item_card.repository_text_value.placeholder')"
|
||||
:unEditableRef="`textRef`"
|
||||
:smartAnnotation="true"
|
||||
|
@ -24,7 +24,8 @@
|
|||
:expandable="expandable"
|
||||
:collapsed="collapsed"
|
||||
@toggleExpandableState="toggleExpandableState"
|
||||
@update="update" />
|
||||
@update="update"
|
||||
className="px-3" />
|
||||
</div>
|
||||
<div v-else-if="colVal?.edit"
|
||||
ref="textRef"
|
||||
|
@ -65,18 +66,12 @@ export default {
|
|||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object,
|
||||
permissions: null,
|
||||
inArchivedRepositoryRow: Boolean,
|
||||
canEdit: { type: Boolean, default: false }
|
||||
},
|
||||
created() {
|
||||
// constants
|
||||
this.noContentPlaceholder = this.i18n.t("repositories.item_card.repository_text_value.no_text");
|
||||
},
|
||||
computed: {
|
||||
canEdit() {
|
||||
return this.permissions?.can_manage && !this.inArchivedRepositoryRow;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse() {
|
||||
if (!this.expandable) return;
|
||||
|
|
|
@ -2,23 +2,26 @@
|
|||
<textarea v-if="editing"
|
||||
ref="textareaRef"
|
||||
class="leading-5 inline-block outline-none border-solid font-normal border-[1px] box-content
|
||||
overflow-x-hidden overflow-y-auto resize-none rounded px-4 py-2 w-[calc(100%-2rem)]
|
||||
overflow-x-hidden overflow-y-auto resize-none rounded py-2 w-[calc(100%-1.5rem)]
|
||||
border-sn-science-blue"
|
||||
:class="{
|
||||
'max-h-[4rem]': collapsed,
|
||||
'max-h-[40rem]': !collapsed
|
||||
'max-h-[40rem]': !collapsed,
|
||||
[className]: true
|
||||
}"
|
||||
:placeholder="placeholder"
|
||||
v-model="value"
|
||||
@keydown="handleKeydown"
|
||||
@blur="handleBlur" />
|
||||
@blur="handleBlur"></textarea>
|
||||
<div v-else
|
||||
:ref="unEditableRef"
|
||||
class="grid box-content sci-cursor-edit font-normal border-solid px-4 py-2 border-sn-light-grey rounded
|
||||
leading-5 border outline-none hover:border-sn-sleepy-grey overflow-y-auto whitespace-pre-line
|
||||
w-[calc(100%-2rem)]"
|
||||
class="grid box-content sci-cursor-edit font-normal border-solid py-2 border-sn-light-grey rounded
|
||||
leading-5 border outline-none hover:border-sn-sleepy-grey overflow-y-auto whitespace-pre-line"
|
||||
:class="{ 'max-h-[4rem]': collapsed,
|
||||
'max-h-[40rem]': !collapsed, }"
|
||||
'max-h-[40rem]': !collapsed,
|
||||
[className]: true,
|
||||
'text-sn-dark-grey': value, 'text-sn-grey': !value
|
||||
}"
|
||||
@click="enableEdit">
|
||||
<span v-if="smartAnnotation"
|
||||
v-html="sa_value || noContentPlaceholder"
|
||||
|
@ -47,6 +50,7 @@ export default {
|
|||
unEditableRef: { type: String, required: true },
|
||||
smartAnnotation: { type: Boolean, default: false },
|
||||
sa_value: { type: String },
|
||||
className: { type: String, default: false }
|
||||
},
|
||||
mounted() {
|
||||
this.value = this.initialValue;
|
||||
|
|
|
@ -1,35 +1,31 @@
|
|||
<template>
|
||||
<div class="w-full relative" ref="container" v-click-outside="{ handler: 'close', exclude: [] }">
|
||||
<div class="w-full relative" ref="container" v-click-outside="{ handler: 'close', exclude: ['optionsContainer'] }">
|
||||
<button ref="focusElement"
|
||||
class="btn flex justify-between items-center w-full outline-none border-[1px] bg-white rounded p-2 pl-4
|
||||
class="btn flex justify-between items-center w-full outline-none border-[1px] bg-white rounded p-2
|
||||
font-inter text-sm font-normal leading-5"
|
||||
:class="{
|
||||
'sci-cursor-edit': !isOpen && withEditCursor,
|
||||
'border-sn-light-grey hover:border-sn-sleepy-grey': !isOpen,
|
||||
'border-sn-science-blue': isOpen
|
||||
'border-sn-science-blue': isOpen,
|
||||
'text-sn-grey': !valueLabel,
|
||||
[className]: true
|
||||
}"
|
||||
:disabled="disabled"
|
||||
@click="toggle">
|
||||
<span>{{ valueLabel }}</span>
|
||||
<span>{{ valueLabel || this.placeholder || this.i18n.t('general.select') }}</span>
|
||||
<i class="sn-icon" :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen}"></i>
|
||||
</button>
|
||||
<perfect-scrollbar ref="optionsContainer"
|
||||
:style="optionPositionStyle"
|
||||
class="relative scroll-container p-2.5 pt-0 z-10 bg-white rounded border-[1px] border-sn-light-grey shadow-flyout-shadow max-h-[25rem]"
|
||||
:class="{
|
||||
'block': isOpen,
|
||||
'hidden': !isOpen
|
||||
}">
|
||||
<div v-if="withButtons" class="sticky z-10 top-0 bg-white">
|
||||
<div class="pb-1 pt-2.5 rounded flex gap-1 justify-start items-center">
|
||||
<div class="btn btn-light !text-xs active:bg-sn-super-light-blue"
|
||||
<div :style="optionPositionStyle" class="py-2.5 z-10 bg-white rounded border-[1px] border-sn-light-grey shadow-sn-menu-sm" :class="{ 'hidden': !isOpen }">
|
||||
<div v-if="withButtons" class="px-2.5">
|
||||
<div class="flex gap-2 pl-2 pb-2.5 justify-start items-center w-[calc(100%-10px)]">
|
||||
<div class="btn btn-light !text-xs h-[30px] px-0 active:bg-sn-super-light-blue"
|
||||
@click="selectedValues = []"
|
||||
:class="{
|
||||
'disabled cursor-default': !selectedValues.length,
|
||||
'cursor-pointer': selectedValues.length
|
||||
}"
|
||||
>{{ i18n.t('general.clear') }}</div>
|
||||
<div class="btn btn-light !text-xs active:bg-sn-super-light-blue"
|
||||
<div class="btn btn-light !text-xs h-[30px] px-0 active:bg-sn-super-light-blue"
|
||||
@click="selectedValues = options.map(option => option.id)"
|
||||
:class="{
|
||||
'disabled cursor-default': options.length === selectedValues.length,
|
||||
|
@ -38,15 +34,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<perfect-scrollbar ref="optionsContainer"
|
||||
class="relative scroll-container px-2.5 pt-0"
|
||||
:class="{
|
||||
'block': isOpen,
|
||||
[optionsClassName]: true
|
||||
}">
|
||||
<div v-if="options.length" class="flex flex-col gap-[1px]">
|
||||
<div v-for="option in options"
|
||||
:key="option.id"
|
||||
class="p-3 rounded hover:bg-sn-super-light-grey cursor-pointer flex gap-1 justify-start">
|
||||
class="px-3 py-2 rounded hover:bg-sn-super-light-grey cursor-pointer flex gap-1 justify-start items-center">
|
||||
<div class="sci-checkbox-container">
|
||||
<input v-model="selectedValues" :value="option.id" :id="option.id" type="checkbox" class="sci-checkbox project-card-selector mr-1">
|
||||
<input v-model="selectedValues" :value="option.id" :id="option.id" type="checkbox" class="sci-checkbox project-card-selector">
|
||||
<label :for="option.id" class="sci-checkbox-label"></label>
|
||||
</div>
|
||||
<span class="text-ellipsis overflow-hidden max-h-[4rem]">{{ option.label }}</span>
|
||||
<span class="text-ellipsis overflow-hidden max-h-[4rem] ml-1">{{ option.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
|
@ -58,10 +60,12 @@
|
|||
</template>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerfectScrollbar from 'vue2-perfect-scrollbar';
|
||||
import outsideClick from '../../packs/vue/directives/outside_click';
|
||||
|
||||
export default {
|
||||
name: 'ChecklistSelect',
|
||||
|
@ -73,7 +77,12 @@
|
|||
options: { type: Array, default: () => [] },
|
||||
placeholder: { type: String },
|
||||
noOptionsPlaceholder: { type: String },
|
||||
disabled: { type: Boolean, default: false }
|
||||
disabled: { type: Boolean, default: false },
|
||||
className: { type: String, default: '' },
|
||||
optionsClassName: { type: String, default: '' }
|
||||
},
|
||||
directives: {
|
||||
'click-outside': outsideClick
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -87,9 +96,7 @@
|
|||
},
|
||||
computed: {
|
||||
valueLabel() {
|
||||
if (!this.selectedValues.length) {
|
||||
return (this.placeholder || this.i18n.t('general.select'));
|
||||
}
|
||||
if (!this.selectedValues.length) return
|
||||
|
||||
return `${this.selectedValues.length} ${this.i18n.t('general.selected')}`;
|
||||
}
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
class='inline-block m-0 p-0 w-full border-none shadow-none outline-none'
|
||||
:id="this.selectorId"
|
||||
:placeholder="placeholder || 'dd/mm/yyyy'"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -31,7 +32,8 @@
|
|||
useCurrent: { type: Boolean, default: true },
|
||||
defaultValue: { type: Date, default: null },
|
||||
standAlone: { type: Boolean, default: false, required: false },
|
||||
className: { type: String, default: '' }
|
||||
className: { type: String, default: '' },
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
mounted() {
|
||||
$("#" + this.selectorId).datetimepicker(
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
:defaultValue="defaultValue"
|
||||
:standAlone="standAlone"
|
||||
:className="dateClassName"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<TimePicker v-if="!dateOnly"
|
||||
@change="updateTime"
|
||||
|
@ -15,6 +16,7 @@
|
|||
:defaultValue="getTime(defaultValue)"
|
||||
:standAlone="standAlone"
|
||||
:className="timeClassName"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -33,7 +35,8 @@
|
|||
placeholder: { type: String },
|
||||
standAlone: { type: Boolean, default: false, required: false },
|
||||
dateClassName: { type: String, default: '' },
|
||||
timeClassName: { type: String, default: '' }
|
||||
timeClassName: { type: String, default: '' },
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
<input type="text"
|
||||
v-if="singleLine"
|
||||
ref="input"
|
||||
class="inline-block leading-5 outline-none pl-0 py-1 border-0 border-solid border-y w-full border-t-transparent"
|
||||
class="inline-block leading-5 outline-none pl-0 border-0 border-solid border-y w-full border-t-transparent"
|
||||
:class="{
|
||||
'py-1': !singleLine,
|
||||
'inline-edit-placeholder text-sn-grey caret-black': isBlank,
|
||||
'border-b-sn-delete-red': error,
|
||||
'border-b-sn-science-blue': !error,
|
||||
|
@ -33,8 +34,8 @@
|
|||
<div
|
||||
v-else
|
||||
ref="view"
|
||||
class="grid sci-cursor-edit leading-5 border-0 py-1 outline-none border-solid border-y border-transparent"
|
||||
:class="{ 'text-sn-grey font-normal': isBlank, 'whitespace-pre-line': !singleLine }"
|
||||
class="grid sci-cursor-edit leading-5 border-0 outline-none border-solid border-y border-transparent"
|
||||
:class="{ 'text-sn-grey font-normal': isBlank, 'whitespace-pre-line py-1': !singleLine }"
|
||||
@click="enableEdit($event)"
|
||||
>
|
||||
<span :class="{'truncate': singleLine }" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>
|
||||
|
|
|
@ -17,11 +17,8 @@
|
|||
</button>
|
||||
<i class="sn-icon" :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen}"></i>
|
||||
</slot>
|
||||
<perfect-scrollbar ref="optionsContainer"
|
||||
:style="optionPositionStyle"
|
||||
class="sn-select__options scroll-container p-2.5 pt-0 block"
|
||||
>
|
||||
<div v-if="withClearButton" class="sticky z-10 top-0 pt-2.5 bg-white">
|
||||
<div :style="optionPositionStyle" class="py-2.5 bg-white z-10 shadow-sn-menu-sm" :class="{ 'hidden': !isOpen }">
|
||||
<div v-if="withClearButton" class="px-2 pb-2.5">
|
||||
<div @mousedown.prevent.stop="setValue(null)"
|
||||
class="btn btn-light !text-xs active:bg-sn-super-light-blue"
|
||||
:class="{
|
||||
|
@ -31,12 +28,17 @@
|
|||
{{ i18n.t('general.clear') }}
|
||||
</div>
|
||||
</div>
|
||||
<perfect-scrollbar ref="optionsContainer"
|
||||
class="sn-select__options !relative !top-0 !left-[-1px] !shadow-none scroll-container px-2.5 pt-0 block"
|
||||
:class="{ [optionsClassName]: true }"
|
||||
>
|
||||
|
||||
<div v-if="options.length" class="flex flex-col gap-[1px]">
|
||||
<div
|
||||
v-for="option in options"
|
||||
:key="option[0]"
|
||||
@mousedown.prevent.stop="setValue(option[0])"
|
||||
class="sn-select__option p-3 rounded"
|
||||
class="sn-select__option p-3 rounded shadow-none"
|
||||
:title="option[1]"
|
||||
:class="{
|
||||
'select__option-placeholder': option[2],
|
||||
|
@ -55,6 +57,7 @@
|
|||
</template>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PerfectScrollbar from 'vue2-perfect-scrollbar';
|
||||
|
@ -71,6 +74,7 @@
|
|||
placeholder: { type: String },
|
||||
noOptionsPlaceholder: { type: String },
|
||||
className: { type: String, default: '' },
|
||||
optionsClassName: { type: String, default: '' },
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
directives: {
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<Select
|
||||
class="sn-select--search"
|
||||
class="sn-select sn-select--search"
|
||||
:className="className"
|
||||
:optionsClassName="optionsClassName"
|
||||
:withEditCursor="withEditCursor"
|
||||
:withClearButton="withClearButton"
|
||||
:value="value"
|
||||
|
@ -34,7 +36,9 @@
|
|||
searchPlaceholder: { type: String },
|
||||
noOptionsPlaceholder: { type: String },
|
||||
disabled: { type: Boolean },
|
||||
isLoading: { type: Boolean, default: false }
|
||||
isLoading: { type: Boolean, default: false },
|
||||
className: { type: String, default: '' },
|
||||
optionsClassName: { type: String, default: '' }
|
||||
},
|
||||
components: { Select },
|
||||
data() {
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
:id="this.selectorId"
|
||||
type="text"
|
||||
data-mask-type="time"
|
||||
:disabled="disabled"
|
||||
v-model="value"
|
||||
placeholder="HH:mm"
|
||||
/>
|
||||
|
@ -28,7 +29,8 @@
|
|||
selectorId: { type: String, required: true },
|
||||
defaultValue: { type: String, required: false },
|
||||
standAlone: { type: Boolean, default: true, required: false },
|
||||
className: { type: String, default: '', required: false }
|
||||
className: { type: String, default: '', required: false },
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
@ -60,6 +60,7 @@ module.exports = {
|
|||
},
|
||||
boxShadow: {
|
||||
'flyout-shadow': '0px 1px 4px rgba(35, 31, 32, 0.15)',
|
||||
'sn-menu-sm': '0px 16px 32px 0px rgba(16, 24, 40, 0.07)',
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
sharp: 'cubic-bezier(.4, 0, .6, 1)',
|
||||
|
|
Loading…
Reference in a new issue