WIP Добавила модалку

2023-05-04 17:53:43 +03:00
parent 8e28adde77
commit 0390e96eb4
8 changed files with 523 additions and 73 deletions
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -0,0 +1,145 @@
+<template lang="pug">
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
+    q-input(
+      v-model="value",
+      :name="name",
+      :class="{'circle': circle, 'font-input': true}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
+      :borderless="borderless",
+      :placeholder="placeholder",
+      :outlined="outlined",
+      :dense="dense",
+      :readonly="readonly",
+      :disable="disabled",
+      :filled="filled",
+      :bg-color="filled || standout ? '' : 'white'",
+      :rules="rule",
+      :lazy-rules="lazyRule",
+      :item-aligned="itemAligned",
+      :no-error-icon="noErrorIcon",
+      :maxlength="maxLength",
+      :autogrow="autogrow",
+      :square="square",
+      :standout="standout"
+      :accept="accept",
+      :debounce="debounce",
+      hide-bottom-space
+    )
+      template(v-slot:append)
+        q-icon(
+          name="app:calendar",
+          class="cursor-pointer",
+          size="16px"
+        )
+          q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
+            q-date(v-model="value", mask="YYYY-MM-DD")
+              .flex.items-center.justify-end
+                q-btn(
+                  v-close-popup,
+                  label="Закрыть",
+                  color="primary",
+                  flat,
+                  no-caps
+                )
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+
+export default {
+  name: "BaseInputDate",
+  components: { BaseInputContainer },
+  props: {
+    circle: Boolean,
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: "",
+    },
+    resize: {
+      type: String,
+      default: "none",
+    },
+    debounce: [String, Number],
+    width: Number,
+    maxLength: Number,
+    textColor: String,
+    borderColor: String,
+    rule: Array,
+    lazyRule: [Boolean, String],
+    noErrorIcon: Boolean,
+    itemAligned: Boolean,
+    modelValue: Date,
+    placeholder: String,
+    disabled: Boolean,
+    label: String,
+    readonly: Boolean,
+    iconLeft: Boolean,
+    name: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+          ? this.modelValue
+              ?.toISOString()
+              .split("T")[0]
+              .split("-")
+              .reverse()
+              .join(".")
+          : null;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value ? new Date(value) : null);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.font-input
+  font-feature-settings: 'pnum' on, 'lnum' on
+
+.circle
+  width: 100%
+  height: 100%
+  border-radius: 50%
+  z-index: 5
+  opacity: 0
+  cursor: pointer
+</style>
+<style lang="sass">
+.q-field--standout.q-field--readonly .q-field__control:before
+  border: none !important
+.q-field--standout .q-field__control
+  background: var(--bg-light-grey) !important
+</style>