gypsy-crm-frontend-vu/components/cwg-currency-select.vue

<template>
  <u-action-sheet v-model:show="show" class="sheet">
    <view class="currency-mask">
      <view v-if="showSearch" class="search">
        <u-input v-model="inputValueDoc" class="form-input" type="text" :placeholder="placeholder" :clearable="true"
          autocomplete="off">
          <template #left-icon><cwg-icon name="cwg-search" :size="23" color="" />
          </template>
        </u-input>
      </view>
      <scroll-view class="currency-select" scroll-y="true">
        <view v-for="item in filteredOptions" :key="item.value" class="currency-item" @click="select(item)">
          <image :src="imageSrc(item.value)" alt="" srcset="" />
          {{ item.value }}
          <view class="text"> {{ item.text }} </view>
        </view>
      </scroll-view>
    </view>
  </u-action-sheet>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useI18n } from "vue-i18n";
const props = defineProps<{
  modelValue: boolean;
  showSearch: boolean;
  placeholder: string;
  options: Array<{ text: string; value: string }>;
}>();
const emit = defineEmits(["update:modelValue", "select"]);
const { t } = useI18n();
const inputValueDoc = ref("");
const show = ref(props.modelValue);

const filteredOptions = computed(() => {
  if (!inputValueDoc.value) return props.options;
  const keyword = inputValueDoc.value.toLowerCase();
  return props.options.filter(
    (item) =>
      item.text.toLowerCase().includes(keyword) ||
      item.value.toLowerCase().includes(keyword)
  );
});
function imageSrc(currency: string) {
  const code = (currency || "").toString().toUpperCase();
  return `/static/images/currency/${code}.png`;
}

watch(
  () => props.modelValue,
  (val) => (show.value = val)
);
watch(show, (val) => emit("update:modelValue", val));

function select(item: { text: string; value: string }) {
  emit("select", item);
  show.value = false;
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.currency-mask {
  padding: px2rpx(44) px2rpx(31) 0 px2rpx(31);
}

.search {
  color: #8e8a8a;
  font-family: Roboto;
  font-size: px2rpx(31);
  font-style: normal;
  font-weight: 400;
  line-height: px2rpx(44);
  letter-spacing: px2rpx(0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: px2rpx(82);

  :deep(.form-input) {
    padding: px2rpx(12) px2rpx(31) !important;
    border-radius: 30px;
    border: 1px solid #beb6b6;

    &::after {
      border: 0;

    }
  }

  :deep(.u-input__left-icon) {
    display: flex;
    align-items: center;
  }
}

.currency-select {
  height: calc(80vh - px2rpx(98));
  overflow-y: auto;
  padding: 0 0 px2rpx(22) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.currency-item {
  display: flex;
  padding: px2rpx(24) 0;
  align-items: center;
  gap: px2rpx(8);
  align-self: stretch;
  border-radius: 10px;
  color: #0e0f0c;
  font-size: px2rpx(31);
  font-style: normal;
  font-weight: 400;
  line-height: px2rpx(44);
  letter-spacing: -px2rpx(0.8);

  .text {
    color: #454745;
    font-family: Inter;
    font-size: px2rpx(14);
    font-style: normal;
    font-weight: 400;
    line-height: px2rpx(22);
    letter-spacing: px2rpx(0.14);
  }

  image {
    display: flex;
    width: px2rpx(48);
    height: px2rpx(48);
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 100px;
    border: 1px solid rgba(14, 15, 12, 0.12);
  }
}
</style>