@zap-wunschlachen/wl-shared-components 1.0.24 → 1.0.26

package/src/components/Select/Select.vue

@@ -1,304 +1,315 @@
-<template>
-  <v-combobox
-    ref="inputRef"
-    class="wl-select"
-    :class="{
-      'border-on-hover': borderOnHover
-    }"
-    rounded="lg"
-    :density="density"
-    :variant="props.variant"
-    :label="label"
-    :chips="chips"
-    :append-icon="appendIcon"
-    :append-inner-icon="appendInnerIcon"
-    :prepend-icon="prependIcon"
-    :prepend-inner-icon="prependInnerIcon"
-    :menu-icon="menuIcon"
-    :clear-icon="clearIcon"
-    :closable-chips="closableChips"
-    :multiple="multiple"
-    :hide-details="true"
-    :clearable="clearable"
-    :items="items"
-    :disabled="disabled"
-    :error="error"
-    :item-title="'title'"
-    :item-value="'value'"
-    :return-object="returnObject"
-    v-model="internalValue"
-    @click:append="onClickAppend"
-    @click:append-inner="onClickAppendInner"
-    @click:clear="onClickClear"
-    @click:prepend="onClickPrepend"
-    @click:prepend-inner="onClickPrependInner"
-    @update:search="onUpdateSearch"
-    data-testid="root"
-  >
-    <template v-slot:menu>
-      <slot name="menu"></slot>
-    </template>
-
-    <template v-if="$slots['prepend']" #prepend>
-      <slot name="prepend"></slot>
-    </template>
-
-    <template v-if="$slots['prepend-inner']" #prepend-inner>
-      <slot name="prepend-inner"></slot>
-    </template>
-
-    <template v-if="$slots['append']" #append>
-      <slot name="append"></slot>
-    </template>
-
-    <template v-if="$slots['append-inner']" #append-inner>
-      <slot name="append-inner"></slot>
-    </template>
-  </v-combobox>
-</template>
-
-<script setup>
-import './Select.css';
-import { ref, watch, nextTick } from 'vue';
-import { defineProps, defineEmits } from 'vue';
-
-// Define component props with default values and descriptions
-const props = defineProps({
-  /**
-   * Disables the select input when true, making it non-interactive.
-   * Default is false.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-    /**
-   * Changes the select input state, when true, put it into error state.
-   * Default is false.
-   */
-  error: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Allows clearing the selected value when true.
-   * Default is true.
-   */
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * The label displayed above the select input.
-   * Default is 'Label'.
-   */
-  label: {
-    type: String,
-    default: 'Label',
-  },
-
-  /**
-   * Enables the display of selected items as chips when true.
-   * Default is false.
-   */
-  chips: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Icon to append to the select field.
-   */
-  appendIcon: {
-    type: String,
-  },
-
-  /**
-   * Inner icon to append inside the select field.
-   */
-  appendInnerIcon: {
-    type: String,
-  },
-
-  /**
-   * Icon to prepend to the select field.
-   */
-  prependIcon: {
-    type: String,
-  },
-
-  /**
-   * Inner icon to prepend inside the select field.
-   */
-  prependInnerIcon: {
-    type: String,
-  },
-
-  /**
-   * The icon for the menu toggle.
-   * Default is an empty string (no icon).
-   */
-  menuIcon: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * The icon to use for the clear button.
-   * Default is 'x-mark'.
-   */
-  clearIcon: {
-    type: String,
-    default: 'x-mark',
-  },
-
-  /**
-   * Enables closing chips when true.
-   * Default is false.
-   */
-  closableChips: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Allows multiple selections when true.
-   * Default is false.
-   */
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * The items available for selection.
-   * Default is an empty array.
-   */
-  items: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * The selected value (can be a string, array, or object).
-   */
-  modelValue: {
-    type: [String, Array, Object],
-    default: undefined,
-  },
-
-  /**
-   * The density of the select input.
-   * Controls spacing and size. Default is 'compact'.
-   */
-  density: {
-    type: String,
-    default: 'compact',
-  },
-
-  /**
-   * When true, the selected item is returned as an object.
-   * Default is true.
-   */
-  returnObject: {
-    type: Boolean,
-    default: true,
-  },
-
-  /**
-   * The property name of the item to display as the title.
-   */
-  itemTitle: {
-    type: String,
-    default: undefined,
-  },
-
-  /**
-   * The property name of the item to use as the value.
-   */
-  itemValue: {
-    type: String,
-    default: undefined,
-  },
-
-  variant: {
-    type: String,
-    default: 'outlined',
-  },
-
-  borderOnHover: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// Define events that can be emitted by the component
-const emits = defineEmits([
-  'update:modelValue', // Emit when the model value is updated
-  'click:append', // Emit when the append icon is clicked
-  'click:appendInner', // Emit when the append inner icon is clicked
-  'click:clear', // Emit when the clear button is clicked
-  'click:prepend', // Emit when the prepend icon is clicked
-  'click:prependInner', // Emit when the prepend inner icon is clicked
-  'update:search', // Emit search updates for filtering items
-]);
-
-// Define a reactive reference for internal value based on the modelValue prop
-const internalValue = ref(props.modelValue);
-
-// Watch for changes in modelValue prop and update internalValue accordingly
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    internalValue.value = newValue;
-  },
-);
-
-// Watch for changes in internalValue and emit updated modelValue to parent
-watch(internalValue, (newValue) => {
-  emits('update:modelValue', newValue);
-});
-
-// Emit click events for various icon and button interactions
-const onClickAppend = (event) => emits('click:append', event);
-const onClickAppendInner = (event) => emits('click:appendInner', event);
-const onClickClear = (event) => emits('click:clear', event);
-const onClickPrepend = (event) => emits('click:prepend', event);
-const onClickPrependInner = (event) => emits('click:prependInner', event);
-
-// Emit search updates for filtering or searching items
-const onUpdateSearch = (searchValue) => emits('update:search', searchValue);
-
-const inputRef = ref(null)
-
-const getNativeInput = () => {
-  return inputRef.value?.$el?.querySelector('input');
-}
-
-const blur = () => {
- nextTick(() => {
-    getNativeInput()?.blur();
-  });
-};
-
-const select = () => {
-  nextTick(() => {
-    getNativeInput()?.select();
-  });
-};
-
-const focus = () => {
-  nextTick(() => {
-    getNativeInput()?.focus();
-  });
-};
-
-defineExpose({
-  blur,
-  select,
-  focus
-});
-</script>
+<template>
+  <v-combobox
+    ref="inputRef"
+    class="wl-select"
+    :class="{
+      'border-on-hover': borderOnHover
+    }"
+    rounded="lg"
+    :density="density"
+    :variant="props.variant"
+    :label="label"
+    :chips="chips"
+    :append-icon="appendIcon"
+    :append-inner-icon="appendInnerIcon"
+    :prepend-icon="prependIcon"
+    :prepend-inner-icon="prependInnerIcon"
+    :menu-icon="menuIcon"
+    :clear-icon="clearIcon"
+    :closable-chips="closableChips"
+    :multiple="multiple"
+    :hide-details="true"
+    :clearable="clearable"
+    :items="items"
+    :disabled="disabled"
+    :error="error"
+    :item-title="'title'"
+    :item-value="'value'"
+    :return-object="returnObject"
+    :placeholder="placeholder"
+    :persistent-placeholder="persistentPlaceholder"
+    v-model="internalValue"
+    @click:append="onClickAppend"
+    @click:append-inner="onClickAppendInner"
+    @click:clear="onClickClear"
+    @click:prepend="onClickPrepend"
+    @click:prepend-inner="onClickPrependInner"
+    @update:search="onUpdateSearch"
+    data-testid="root"
+  >
+    <template v-slot:menu>
+      <slot name="menu"></slot>
+    </template>
+
+    <template v-if="$slots['prepend']" #prepend>
+      <slot name="prepend"></slot>
+    </template>
+
+    <template v-if="$slots['prepend-inner']" #prepend-inner>
+      <slot name="prepend-inner"></slot>
+    </template>
+
+    <template v-if="$slots['append']" #append>
+      <slot name="append"></slot>
+    </template>
+
+    <template v-if="$slots['append-inner']" #append-inner>
+      <slot name="append-inner"></slot>
+    </template>
+  </v-combobox>
+</template>
+
+<script setup>
+import './Select.css';
+import { ref, watch, nextTick } from 'vue';
+import { defineProps, defineEmits } from 'vue';
+
+// Define component props with default values and descriptions
+const props = defineProps({
+  /**
+   * Disables the select input when true, making it non-interactive.
+   * Default is false.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+    /**
+   * Changes the select input state, when true, put it into error state.
+   * Default is false.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Allows clearing the selected value when true.
+   * Default is true.
+   */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The label displayed above the select input.
+   * Default is 'Label'.
+   */
+  label: {
+    type: String,
+    default: 'Label',
+  },
+
+  /**
+   * Enables the display of selected items as chips when true.
+   * Default is false.
+   */
+  chips: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Icon to append to the select field.
+   */
+  appendIcon: {
+    type: String,
+  },
+
+  /**
+   * Inner icon to append inside the select field.
+   */
+  appendInnerIcon: {
+    type: String,
+  },
+
+  /**
+   * Icon to prepend to the select field.
+   */
+  prependIcon: {
+    type: String,
+  },
+
+  /**
+   * Inner icon to prepend inside the select field.
+   */
+  prependInnerIcon: {
+    type: String,
+  },
+
+  /**
+   * The icon for the menu toggle.
+   * Default is an empty string (no icon).
+   */
+  menuIcon: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * The icon to use for the clear button.
+   * Default is 'x-mark'.
+   */
+  clearIcon: {
+    type: String,
+    default: 'x-mark',
+  },
+
+  /**
+   * Enables closing chips when true.
+   * Default is false.
+   */
+  closableChips: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Allows multiple selections when true.
+   * Default is false.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The items available for selection.
+   * Default is an empty array.
+   */
+  items: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * The selected value (can be a string, array, or object).
+   */
+  modelValue: {
+    type: [String, Array, Object],
+    default: undefined,
+  },
+
+  /**
+   * The density of the select input.
+   * Controls spacing and size. Default is 'compact'.
+   */
+  density: {
+    type: String,
+    default: 'compact',
+  },
+
+  /**
+   * When true, the selected item is returned as an object.
+   * Default is true.
+   */
+  returnObject: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * The property name of the item to display as the title.
+   */
+  itemTitle: {
+    type: String,
+    default: undefined,
+  },
+
+  /**
+   * The property name of the item to use as the value.
+   */
+  itemValue: {
+    type: String,
+    default: undefined,
+  },
+
+  variant: {
+    type: String,
+    default: 'outlined',
+  },
+
+  borderOnHover: {
+    type: Boolean,
+    default: false
+  },
+
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  persistentPlaceholder:{
+    type: Boolean,
+    default: false
+  }
+});
+
+// Define events that can be emitted by the component
+const emits = defineEmits([
+  'update:modelValue', // Emit when the model value is updated
+  'click:append', // Emit when the append icon is clicked
+  'click:appendInner', // Emit when the append inner icon is clicked
+  'click:clear', // Emit when the clear button is clicked
+  'click:prepend', // Emit when the prepend icon is clicked
+  'click:prependInner', // Emit when the prepend inner icon is clicked
+  'update:search', // Emit search updates for filtering items
+]);
+
+// Define a reactive reference for internal value based on the modelValue prop
+const internalValue = ref(props.modelValue);
+
+// Watch for changes in modelValue prop and update internalValue accordingly
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalValue.value = newValue;
+  },
+);
+
+// Watch for changes in internalValue and emit updated modelValue to parent
+watch(internalValue, (newValue) => {
+  emits('update:modelValue', newValue);
+});
+
+// Emit click events for various icon and button interactions
+const onClickAppend = (event) => emits('click:append', event);
+const onClickAppendInner = (event) => emits('click:appendInner', event);
+const onClickClear = (event) => emits('click:clear', event);
+const onClickPrepend = (event) => emits('click:prepend', event);
+const onClickPrependInner = (event) => emits('click:prependInner', event);
+
+// Emit search updates for filtering or searching items
+const onUpdateSearch = (searchValue) => emits('update:search', searchValue);
+
+const inputRef = ref(null)
+
+const getNativeInput = () => {
+  return inputRef.value?.$el?.querySelector('input');
+}
+
+const blur = () => {
+ nextTick(() => {
+    getNativeInput()?.blur();
+  });
+};
+
+const select = () => {
+  nextTick(() => {
+    getNativeInput()?.select();
+  });
+};
+
+const focus = () => {
+  nextTick(() => {
+    getNativeInput()?.focus();
+  });
+};
+
+defineExpose({
+  blur,
+  select,
+  focus
+});
+</script>

package/src/components/TextArea/TextArea.css

@@ -1,3 +1,3 @@
-.v-icon {
-  opacity: 1 !important;
-}
+.v-icon {
+  opacity: 1 !important;
+}