@300codes/design-system 1.2.10 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "type": "module",
   "files": [
     "src/components",

package/src/components/FlatIconButton/FlatIconButton.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { ButtonHTMLAttributes } from 'vue';
 import type { IconSize } from '../../types/icon';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
 
 export interface FlatIconButtonProps {
   iconName: string;
+  type?: ButtonHTMLAttributes['type'],
   iconPath?: string;
   iconSize?: IconSize;
   label: string;
@@ -11,6 +13,7 @@ export interface FlatIconButtonProps {
 }
 
 withDefaults(defineProps<FlatIconButtonProps>(), {
+  type: 'button',
   iconPath: '/icons',
   iconSize: 'sm',
   disabled: false,
@@ -23,7 +26,7 @@ const emit = defineEmits<{
 
 <template>
   <button
-    type="button"
+    :type="type"
     :class="['flatIconButton inline-flex items-center justify-center', disabled ? 'cursor-not-allowed' : 'cursor-pointer']"
     :aria-label="label"
     :disabled="disabled"

package/src/components/SearchInput/SearchInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, nextTick } from 'vue';
 import TextInput from '../TextInput/TextInput.vue';
+import FlatIconButton from '../FlatIconButton/FlatIconButton.vue';
 
 export interface SearchInputProps {
   name: string;
@@ -11,13 +12,11 @@ export interface SearchInputProps {
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
   iconPath?: string;
-  clearAriaLabel?: string;
 }
 
 withDefaults(defineProps<SearchInputProps>(), {
   size: 'md',
   iconPath: '/icons',
-  clearAriaLabel: 'Clear search',
   id: undefined,
   placeholder: undefined,
   autocomplete: undefined,
@@ -34,44 +33,50 @@ const model = defineModel<string>({ required: true });
 
 const textInputRef = ref<{ el: HTMLInputElement | undefined }>();
 
-async function handleClickIcon(side: 'left' | 'right') {
-  if (side === 'right') {
-    model.value = '';
-    emit('clear');
-    await nextTick();
-    textInputRef.value?.el?.focus();
-  } else {
-    emit('enter');
-  }
+async function clearSearch() {
+  model.value = '';
+  emit('clear');
+  await nextTick();
+  textInputRef.value?.el?.focus();
 }
 </script>
 
 <template>
-  <div
-    class="searchInput"
+  <TextInput
+    :id="id"
+    ref="textInputRef"
+    v-model="model"
+    :name="name"
+    :placeholder="placeholder"
+    :autocomplete="autocomplete"
+    :required="required"
+    :disabled="disabled"
+    :size="size"
+    :icon-right="{ name: 'search', iconPath: iconPath, size: 'md', type: 'submit' }"
     role="search"
+    :class="['searchInput', { 'searchInput--typing': model.length }]"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+    @enter="emit('enter')"
+    @click-icon="emit('enter')"
   >
-    <TextInput
-      :id="id"
-      ref="textInputRef"
-      v-model="model"
-      :name="name"
-      :placeholder="placeholder"
-      :autocomplete="autocomplete"
-      :required="required"
-      :disabled="disabled"
-      :size="size"
-      :icon-left="{ name: 'search', iconPath: iconPath, size: 'md' }"
-      :icon-right="model ? { name: 'close-circle', iconPath: iconPath, size: 'md', ariaLabel: clearAriaLabel } : undefined"
-      @focus="emit('focus', $event)"
-      @blur="emit('blur', $event)"
-      @enter="emit('enter')"
-      @click-icon="handleClickIcon"
-    />
-  </div>
+    <template #after>
+      <FlatIconButton
+        v-if="model.length"
+        icon-size="md"
+        icon-name="close-circle"
+        :icon-path="iconPath"
+        label="Wyczyść pole wyszukiwania"
+        class="absolute top-1/2 -translate-y-1/2 right-12"
+        @click="clearSearch"
+      />
+    </template>
+  </TextInput>
 </template>
 
 <style scoped>
+@reference "tailwindcss";
+
 .searchInput {
   --input-bg: var(--searchInput-bg, #f3f5f7);
   --input-border-color: var(--searchInput-border, #b0babf);
@@ -80,4 +85,8 @@ async function handleClickIcon(side: 'left' | 'right') {
   --input-radius: var(--searchInput-radius, 3rem);
   --input-radius-mobile: var(--searchInput-radius, 3rem);
 }
+
+.searchInput--typing :deep(.textInput__field) {
+  @apply pr-18;
+}
 </style>

package/src/components/TextInput/TextInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, type Ref } from 'vue';
+import { ButtonHTMLAttributes, computed, ref, type Ref } from 'vue';
 import type { IconSize } from '../../types/icon';
 import FlatIconButton from '../FlatIconButton/FlatIconButton.vue';
 
@@ -8,6 +8,7 @@ export type FilterType = 'number' | 'number-dash' | 'alpha' | 'alpha-space';
 
 export interface TextInputIcon {
   name: string;
+  type?: ButtonHTMLAttributes['type'];
   iconPath?: string;
   size?: IconSize;
   ariaLabel?: string;
@@ -122,27 +123,31 @@ defineExpose<{ el: Ref<HTMLInputElement | undefined> }>({ el });
       @focus="onFocus"
       @input="onInput"
       @keyup.enter="emit('enter')"
-    >
+    />
 
     <FlatIconButton
       v-if="iconLeft"
+      :type="iconLeft.type"
       :icon-name="iconLeft.name"
       :icon-path="iconLeft.iconPath"
       :icon-size="iconLeft.size"
       :label="iconLeft.ariaLabel || iconLeft.name"
-      :class="['absolute top-1/2 -translate-y-1/2 left-3', iconLeft.class]"
+      :class="['absolute top-1/2 -translate-y-1/2 left-4', iconLeft.class]"
       @click="emit('clickIcon', 'left')"
     />
 
     <FlatIconButton
       v-if="iconRight"
+      :type="iconRight.type"
       :icon-name="iconRight.name"
       :icon-path="iconRight.iconPath"
       :icon-size="iconRight.size"
       :label="iconRight.ariaLabel || iconRight.name"
-      :class="['absolute top-1/2 -translate-y-1/2 right-3', iconRight.class]"
+      :class="['absolute top-1/2 -translate-y-1/2 right-4', iconRight.class]"
       @click="emit('clickIcon', 'right')"
     />
+
+    <slot name="after" />
   </div>
 </template>