文件操作 - AppCheckbox.vue

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

编辑文件内容

interface Props {
  value?: string;
  disabled?: boolean;
  required?: boolean;
  errorText?: string;
}

defineProps<Props>();

const model = defineModel();
</script>

<template>
  <div
    class="form-block form-block-checkbox"
    :class="{ disabled: disabled }"
  >
    <label class="input-block checkbox">
      <input
        class="checkbox-input"
        type="checkbox"
        :value="value"
        v-model="model"
        :disabled="disabled"
        :required="required"
      />
      <i class="checkbox-icon">
        <AppIcon name="checkbox"></AppIcon>
      </i>
      <span class="checkbox-body">
        <slot></slot>
      </span>
    </label>
    <div
      v-if="required || errorText"
      class="input-error"
    >
      {{ errorText || $t('app.input.error') }}
    </div>
  </div>
</template>

.checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  font-weight: 500;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  &:has(.checkbox-input:focus) {
    .checkbox-icon {
      &:before {
        border-color: @borderA;
      }
    }
  }
  &:has(.checkbox-input:checked) {
    .checkbox-icon {
      svg {
        opacity: 1;
      }
      &:before {
        border-color: @borderA;
      }
    }
  }
}

.checkbox-input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 6;
}

.checkbox-icon {
  flex: none;
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  svg {
    opacity: 0;
    transition: opacity 0.4s;
    position: relative;
    z-index: 1;
    color: @link;
    --size: 16px;
  }
  &:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    border: solid 1px @border;
    left: calc(50% - 9px);
    top: calc(50% - 9px);
    transition: border-color 0.4s;
    background-color: @white;
  }
}

.checkbox-body {
  align-self: center;
  line-height: 1.25;
  :deep(a) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }
}
</style>

文件操作 - AppCheckbox.vue

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

编辑文件内容

修改文件时间

删除文件