All files / components CollectionForm.vue

0% Statements 0/2
100% Branches 0/0
0% Functions 0/1
0% Lines 0/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115                                                                                                                                                                                                                                     
<template>
  <q-form class="q-gutter-md q-my-lg project-form">
    <div class="row">
      <div class="col-3">Collection name*</div>
      <div class="col-9">
        <q-input
          dense
          outlined
          v-model="title"
          requiteal
          placeholder="A descriptive name for your project"
        />
      </div>
    </div>
    <div class="row">
      <div class="col-3">Description*</div>
      <div class="col-9">
        <q-editor min-height="10rem" v-model="description"/>
      </div>
    </div>
    <div class="row">
      <div class="col-3">Tags</div>
      <div class="col-9">
        <div class="flex">
          <!-- <q-chip color="grey-1" icon-right="fas fa-times-circle">Some tag</q-chip>
            <q-btn dense flat>
              <q-icon name="fas fa-plus" size="10px" class="q-mr-sm"/>new tag
            </q-btn>
          <q-input outlined dense v-model="tag" class="q-ml-sm"/>-->
          <vue-tags-input v-model="tag" :tags="tags" @tags-changed="newTags => tags = newTags"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-3">Category</div>
      <div class="col-9">
        <q-select
          outlined
          dense
          style="max-width: 300px"
          v-model="category"
          :options="categories"
          requiteal
        />
      </div>
    </div>
 
    <div class="row">
      <div class="col-3">Collection thumbnail</div>
      <div class="col-9">
        <q-uploader
          square
          auto-upload
          hide-upload-btn
          url="http://localhost:4444/upload"
          label="Upload a square thumbnail for your collection"
          color="grey-4"
          accept=".jpg, image/*"
          style="max-width: 300px; min-height: 300px"
        />
        <div class="text-caption">minimum size 1024x1024px, 1 Mb, jpeg or png format</div>
      </div>
    </div>
 
    <div class="row q-py-lg">
      <div class="col-12">
        <q-separator/>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <q-btn color="grey" to="/account/collections">Back</q-btn>
      </div>
      <div class="col text-right">
        <q-btn color="grey-4" text-color="white" type="submit">Create collection</q-btn>
      </div>
    </div>
  </q-form>
</template>
 
<script>
import VueTagsInput from "@johmun/vue-tags-input";
 
export default {
  components: {
    VueTagsInput
  },
  // name: 'PageName',
  data() {
    return {
      title: "",
      description: "",
      tag: "",
      tags: ["Some Tag"],
      category: "Category",
      categories: [{ label: "Category", value: "category_slug" }],
      license: "MIT",
      licenses: [
        { label: "MIT", value: "mit" },
        { label: "Creative Commons CC-BY-NC", value: "cc-by-nc" }
      ]
    };
  }
};
</script>
 
<style>
.project-form {
  max-width: 800px;
}
.ti-tag {
  background-color: #ffcc00;
}
</style>