文件操作 - AppSelect.vue

文件: /var/www/OLD/components/AppSelect.vue

编辑文件内容

interface Props {
  title?: string;
  placeholder?: string;
  required?: boolean;
  errorText?: string;
  options?: string[];
  isSmall?: boolean;
  multiple?: boolean;
}

const props = defineProps<Props>();

const { resetInvalid } = useForm();

const model = defineModel<string | string[]>();
const formBlock = ref<HTMLElement | null>(null);
const isOpen = ref(false);

const closeAll = () => {
  isOpen.value = false;
};

const toggleSelect = ($event: Event) => {
  resetInvalid($event.currentTarget as HTMLElement);
  isOpen.value = !isOpen.value;
};

onClickOutside(formBlock, closeAll);
</script>

<template>
  <div
    class="form-block form-block-select"
    ref="formBlock"
    :class="{ small: isSmall, active: isOpen }"
  >
    <div
      v-if="title"
      class="form-block-title"
    >
      {{ title }}
    </div>
    <div
      class="select"
      :class="{ selected: model?.length }"
    >
      <input
        type="hidden"
        :required="required"
        v-model="model"
      />
      <button
        type="button"
        @click="toggleSelect"
        class="select-toggle"
        :class="{ input: !isSmall }"
      >
        <span class="select-title">{{
          (Array.isArray(model) ? model.join(', ') : model) || placeholder
        }}</span>
        <AppIcon
          class="select-icon"
          name="chevron-down"
        />
      </button>
      <div
        v-if="options && isOpen"
        class="select-list"
      >
        <button
          type="button"
          v-for="(item, index) in options"
          :key="index"
          class="option"
          @click="setValue(item)"
          :class="{
            active: Array.isArray(model)
              ? model.includes(item)
              : item === model,
          }"
        >
          {{ item }}
        </button>
      </div>
    </div>
    <div
      v-if="required || errorText"
      class="input-error"
    >
      {{ errorText || $t('app.input.error') }}
    </div>
  </div>
</template>

.select {
  position: relative;
  line-height: 1.33;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  &.selected {
    .select-toggle {
      color: #2d2d2d;
      border-style: solid;
      border-color: @borderA;
    }
  }
}

.select-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
}

.select-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-icon {
  color: #a6a6a6;
  transition: transform 0.4s;
}

.select-list {
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  min-width: 100%;
  padding: 8px 0;
  z-index: 66;
  border-radius: 8px;
  border: solid 1px @border;
  background-color: @white;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 304px;
  overflow: hidden auto;
}

.option {
  padding: 8px 20px;
  color: #2d2d2d;
  transition: color 0.4s;
  font-size: 15px;
  min-height: 36px;
  display: flex;
  align-items: center;
  &:hover {
    color: @text;
  }
  &.active {
    color: @link;
  }
}
</style>

文件操作 - AppSelect.vue

文件: /var/www/OLD/components/AppSelect.vue

编辑文件内容

修改文件时间

删除文件