summaryrefslogtreecommitdiffstats
path: root/src/components/Properties
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Properties')
-rw-r--r--src/components/Properties/PropertyActions.vue4
-rw-r--r--src/components/Properties/PropertyDateTime.vue35
-rw-r--r--src/components/Properties/PropertyGroups.vue20
-rw-r--r--src/components/Properties/PropertyMultipleText.vue51
-rw-r--r--src/components/Properties/PropertySelect.vue17
-rw-r--r--src/components/Properties/PropertyText.vue47
6 files changed, 124 insertions, 50 deletions
diff --git a/src/components/Properties/PropertyActions.vue b/src/components/Properties/PropertyActions.vue
index bbf908ed..19ce5f02 100644
--- a/src/components/Properties/PropertyActions.vue
+++ b/src/components/Properties/PropertyActions.vue
@@ -25,7 +25,9 @@
<ActionButton icon="icon-delete" @click="deleteProperty">
{{ t('contacts', 'Delete') }}
</ActionButton>
- <actions :is="action" v-for="(action, index) in actions" :key="index"
+ <actions :is="action"
+ v-for="(action, index) in actions"
+ :key="index"
:component="propertyComponent" />
</Actions>
</template>
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index 6c909adf..8e49bb56 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -23,15 +23,23 @@
<template>
<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
<!-- title if first element -->
- <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+ <PropertyTitle v-if="isFirstProperty && propModel.icon"
+ :icon="propModel.icon"
+ :readable-name="propModel.readableName"
:info="propModel.info" />
<div class="property__row">
<!-- type selector -->
- <multiselect v-if="propModel.options" v-model="localType"
- :options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
- :disabled="isReadOnly" class="property__label" track-by="id"
- label="name" @input="updateType" />
+ <multiselect v-if="propModel.options"
+ v-model="localType"
+ :options="options"
+ :searchable="false"
+ :placeholder="t('contacts', 'Select type')"
+ :disabled="isReadOnly"
+ class="property__label"
+ track-by="id"
+ label="name"
+ @input="updateType" />
<!-- if we do not support any type on our model but one is set anyway -->
<div v-else-if="selectType" class="property__label">
@@ -44,10 +52,17 @@
</div>
<!-- Real input where the picker shows -->
- <DatetimePicker :value="vcardTimeLocalValue.toJSDate()" :minute-step="10" :lang="lang"
- :clearable="false" :first-day-of-week="firstDay" :type="inputType"
- :readonly="isReadOnly" :format="dateFormat" class="property__value"
- confirm @confirm="debounceUpdateValue" />
+ <DatetimePicker :value="vcardTimeLocalValue.toJSDate()"
+ :minute-step="10"
+ :lang="lang"
+ :clearable="false"
+ :first-day-of-week="firstDay"
+ :type="inputType"
+ :readonly="isReadOnly"
+ :format="dateFormat"
+ class="property__value"
+ confirm
+ @confirm="debounceUpdateValue" />
<!-- props actions -->
<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
@@ -62,7 +77,7 @@ import { DatetimePicker } from 'nextcloud-vue'
import { getLocale } from 'nextcloud-l10n'
import { VCardTime } from 'ical.js'
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
import PropertyTitle from './PropertyTitle'
import PropertyActions from './PropertyActions'
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index c6e6c419..41964ef5 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -30,11 +30,19 @@
</div>
<!-- multiselect taggable groups with a limit to 3 groups shown -->
- <multiselect v-model="localValue" :options="groups" :placeholder="t('contacts', 'Add contact in group')"
- :multiple="true" :taggable="true" :close-on-select="false"
- :readonly="isReadOnly" :tag-width="60"
- tag-placeholder="create" class="property__value"
- @input="updateValue" @tag="validateGroup" @select="addContactToGroup"
+ <multiselect v-model="localValue"
+ :options="groups"
+ :placeholder="t('contacts', 'Add contact in group')"
+ :multiple="true"
+ :taggable="true"
+ :close-on-select="false"
+ :readonly="isReadOnly"
+ :tag-width="60"
+ tag-placeholder="create"
+ class="property__value"
+ @input="updateValue"
+ @tag="validateGroup"
+ @select="addContactToGroup"
@remove="removeContactToGroup">
<!-- show how many groups are hidden and add tooltip -->
<span slot="limit" v-tooltip.auto="formatGroupsTitle" class="multiselect__limit">
@@ -50,7 +58,7 @@
<script>
import debounce from 'debounce'
-import Contact from 'Models/contact'
+import Contact from '../../models/contact'
export default {
name: 'PropertyGroups',
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 84753871..6579fb12 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -23,16 +23,25 @@
<template>
<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
<!-- title if first element -->
- <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+ <PropertyTitle v-if="isFirstProperty && propModel.icon"
+ :icon="propModel.icon"
+ :readable-name="propModel.readableName"
:info="propModel.info" />
<div class="property__row">
<!-- type selector -->
- <multiselect v-if="propModel.options" v-model="localType"
- :options="options" :placeholder="t('contacts', 'Select type')"
- :taggable="true" tag-placeholder="create" :disabled="isReadOnly"
- class="property__label" track-by="id" label="name"
- @tag="createLabel" @input="updateType" />
+ <multiselect v-if="propModel.options"
+ v-model="localType"
+ :options="options"
+ :placeholder="t('contacts', 'Select type')"
+ :taggable="true"
+ tag-placeholder="create"
+ :disabled="isReadOnly"
+ class="property__label"
+ track-by="id"
+ label="name"
+ @tag="createLabel"
+ @input="updateType" />
<!-- if we do not support any type on our model but one is set anyway -->
<div v-else-if="selectType" class="property__label">
@@ -46,12 +55,17 @@
</div>
<!-- show the first input if not a structured value -->
- <input v-if="!property.isStructuredValue" v-model.trim="localValue[0]" :readonly="isReadOnly"
- class="property__value" type="text" @input="updateValue">
+ <input v-if="!property.isStructuredValue"
+ v-model.trim="localValue[0]"
+ :readonly="isReadOnly"
+ class="property__value"
+ type="text"
+ @input="updateValue">
<!-- props actions -->
<PropertyActions class="property__actions--floating"
- :actions="actions" :property-component="this"
+ :actions="actions"
+ :property-component="this"
@delete="deleteProperty" />
</div>
@@ -61,25 +75,32 @@
<div class="property__label">
{{ propModel.readableValues[index] }}
</div>
- <input v-model.trim="localValue[index]" :readonly="isReadOnly" class="property__value"
- type="text" @input="updateValue">
+ <input v-model.trim="localValue[index]"
+ :readonly="isReadOnly"
+ class="property__value"
+ type="text"
+ @input="updateValue">
</div>
</template>
<!-- no order enforced: just iterate on all the values -->
<template v-else>
- <div v-for="(value, index) in filteredValue" :key="index"
+ <div v-for="(value, index) in filteredValue"
+ :key="index"
class="property__row">
<div class="property__label" />
- <input v-model.trim="filteredValue[index]" :readonly="isReadOnly" class="property__value"
- type="text" @input="updateValue">
+ <input v-model.trim="filteredValue[index]"
+ :readonly="isReadOnly"
+ class="property__value"
+ type="text"
+ @input="updateValue">
</div>
</template>
</div>
</template>
<script>
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
import PropertyTitle from './PropertyTitle'
import PropertyActions from './PropertyActions'
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 4b5893d3..0f54d507 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -23,7 +23,9 @@
<template>
<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
<!-- title if first element -->
- <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+ <PropertyTitle v-if="isFirstProperty && propModel.icon"
+ :icon="propModel.icon"
+ :readable-name="propModel.readableName"
:info="propModel.info" />
<div class="property__row">
@@ -37,9 +39,14 @@
{{ propModel.readableName }}
</div>
- <multiselect v-model="matchedOptions" :options="propModel.options" :placeholder="t('contacts', 'Select option')"
- :disabled="isSingleOption || isReadOnly" class="property__value" track-by="id"
- label="name" @input="updateValue" />
+ <multiselect v-model="matchedOptions"
+ :options="propModel.options"
+ :placeholder="t('contacts', 'Select option')"
+ :disabled="isSingleOption || isReadOnly"
+ class="property__value"
+ track-by="id"
+ label="name"
+ @input="updateValue" />
<!-- props actions -->
<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
@@ -48,7 +55,7 @@
</template>
<script>
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
import PropertyTitle from './PropertyTitle'
import PropertyActions from './PropertyActions'
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 05ec9861..3089da96 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -23,16 +23,25 @@
<template>
<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
<!-- title if first element -->
- <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+ <PropertyTitle v-if="isFirstProperty && propModel.icon"
+ :icon="propModel.icon"
+ :readable-name="propModel.readableName"
:info="propModel.info" />
<div class="property__row">
<!-- type selector -->
- <multiselect v-if="propModel.options" v-model="localType"
- :options="options" :placeholder="t('contacts', 'Select type')"
- :taggable="true" tag-placeholder="create" :disabled="isReadOnly"
- class="property__label" track-by="id" label="name"
- @tag="createLabel" @input="updateType" />
+ <multiselect v-if="propModel.options"
+ v-model="localType"
+ :options="options"
+ :placeholder="t('contacts', 'Select type')"
+ :taggable="true"
+ tag-placeholder="create"
+ :disabled="isReadOnly"
+ class="property__label"
+ track-by="id"
+ label="name"
+ @tag="createLabel"
+ @input="updateType" />
<!-- if we do not support any type on our model but one is set anyway -->
<div v-else-if="selectType" class="property__label">
@@ -45,18 +54,30 @@
</div>
<!-- textarea for note -->
- <textarea v-if="propName === 'note'" id="textarea" ref="textarea"
- v-model.trim="localValue" :type="type" :readonly="isReadOnly"
+ <textarea v-if="propName === 'note'"
+ id="textarea"
+ ref="textarea"
+ v-model.trim="localValue"
+ :type="type"
+ :readonly="isReadOnly"
class="property__value"
- @input="updateValueNoDebounce" @mousemove="resizeGrid" @keypress="resizeGrid" />
+ @input="updateValueNoDebounce"
+ @mousemove="resizeGrid"
+ @keypress="resizeGrid" />
<!-- OR default to input -->
- <input v-else v-model.trim="localValue" :type="type"
- :readonly="isReadOnly" :class="{'property__value--with-ext': haveExtHandler}" class="property__value"
+ <input v-else
+ v-model.trim="localValue"
+ :type="type"
+ :readonly="isReadOnly"
+ :class="{'property__value--with-ext': haveExtHandler}"
+ class="property__value"
@input="updateValue">
<!-- external link -->
- <a v-if="haveExtHandler" :href="externalHandler" class="property__ext icon-external"
+ <a v-if="haveExtHandler"
+ :href="externalHandler"
+ class="property__ext icon-external"
target="_blank" />
<!-- props actions -->
@@ -67,7 +88,7 @@
<script>
import debounce from 'debounce'
-import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyMixin from '../../mixins/PropertyMixin'
import PropertyTitle from './PropertyTitle'
import PropertyActions from './PropertyActions'
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-06 11:13:02 +0000