activist/src/views/StickerBuilderView.vue

<script setup lang="ts">
import {computed, ref} from 'vue';

import Button from 'primevue/button';
import Card from 'primevue/card';
import ColorPicker from 'primevue/colorpicker';
import { Form } from '@primevue/forms';
import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';
import InputText from 'primevue/inputtext';
import RadioButton from 'primevue/radiobutton';
import Select from 'primevue/select';
import ToggleSwitch from 'primevue/toggleswitch';

import IconLayout1Vue from '@/components/layouts/IconLayout1.vue';
import IconLayout2Vue from '@/components/layouts/IconLayout2.vue';
import IconLayout3Vue from '@/components/layouts/IconLayout3.vue';
import IconLayout4Vue from '@/components/layouts/IconLayout4.vue';
import Sticker from '@/components/Sticker.vue';


const checked = ref(true);
const selectedCountry = ref(null);
const countries = ref([
  { name: 'Afghanistan', code: 'AF' },
  { name: 'Åland Islands', code: 'AX' },
  { name: 'Albania', code: 'AL' },
  { name: 'Algeria', code: 'DZ' },
  { name: 'American Samoa', code: 'AS' },
  { name: 'AndorrA', code: 'AD' },
  { name: 'Angola', code: 'AO' },
  { name: 'Anguilla', code: 'AI' },
  { name: 'Antarctica', code: 'AQ' },
  { name: 'Antigua and Barbuda', code: 'AG' },
  { name: 'Argentina', code: 'AR' },
  { name: 'Armenia', code: 'AM' },
  { name: 'Aruba', code: 'AW' },
  { name: 'Australia', code: 'AU' },
  { name: 'Austria', code: 'AT' },
  { name: 'Azerbaijan', code: 'AZ' },
  { name: 'Bahamas', code: 'BS' }
]);
const initialValues = {};
const resolver = () => {
  return {};
};

const layout = defineModel<string>('layout');
layout.value = 'layout1';
const message1 = defineModel<string>('message1');
message1.value = "I SUPPORT M4A";
const message2 = defineModel<string>('message2');
message2.value = "m2";
const message3 = defineModel<string>('message3');
message3.value = "m3";
const message4 = defineModel<string>('message4');
message4.value = "";
const color = defineModel<string>('background-color');
color.value = '000088';

const color2 = computed(() => {
  return '#' + color.value;
})

function onFormSubmit() {
  return {};
}
</script>

<template>
  <div id="StickerPage">
    <h1>Sticker</h1>
<!--    <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
    <div id="StickerWrapper" class="sticky top-0 z-10">
      <Sticker
        id="Sticker1"
        v-bind:layout v-bind:color="color2"
        v-bind:message1 v-bind:message2
        v-bind:message3 v-bind:message4
      />
<!--      <p>8-inch sticker</p>-->
<!--      <Sticker-->
<!--        id="Sticker2"-->
<!--        v-bind:layout v-bind:color="color2"-->
<!--        v-bind:message1 v-bind:message2-->
<!--        v-bind:message3 v-bind:message4-->
<!--      />-->
    </div>
    <Card>
      <template #content>
        <Form v-slot="$form"
              v-bind:initialValues
              v-bind:resolver="resolver"
              @submit="onFormSubmit">
          <div class="bg-surface-50 dark:bg-surface-950 px-3 py-5 md:px-12 lg:px-5">
            <div class="grid grid-cols-12 gap-4">
              <div class="col-span-12">
                <label for="nickname2">Layout {{layout}}</label>
                <div class="flex flex-wrap gap-4">
                  <div class="flex items-center gap-2">
                    <RadioButton v-model="layout" inputId="layout1" name="layout" value="layout1" />
                    <label for="layout1"><IconLayout1Vue /></label>
                  </div>
                  <div class="flex items-center gap-2">
                    <RadioButton v-model="layout" inputId="layout2" name="layout" value="layout2" />
                    <label for="layout2"><IconLayout2Vue /></label>
                  </div>
                  <div class="flex items-center gap-2">
                    <RadioButton v-model="layout" inputId="layout3" name="layout" value="layout3" />
                    <label for="layout3"><IconLayout3Vue /></label>
                  </div>
                  <div class="flex items-center gap-2">
                    <RadioButton v-model="layout" inputId="layout4" name="layout" value="layout4" />
                    <label for="layout4"><IconLayout4Vue /></label>
                  </div>
                </div>
              </div>

              <div class="divider" />

              <div class="col-span-12 md:col-span-6">
                <label for="message1">Message 1</label>
                <InputText class="w-full" id="message1" name="message1" type="text" v-model="message1" fluid />
              </div>
              <div class="col-span-12 md:col-span-6">
                <label for="message2">Message 2</label>
                <InputText class="w-full" id="message2" name="message2" type="text" v-model="message2" fluid />
              </div>

              <div class="col-span-12 md:col-span-6">
                <label for="message1">Message 3</label>
                <InputText class="w-full" id="message3" name="message3" type="text" v-model="message3" fluid />
              </div>
              <div class="col-span-12 md:col-span-6">
                <label for="message4">Message 4</label>
                <InputText class="w-full" id="message4" name="message4" type="text" v-model="message4" fluid />
              </div>

              <div class="divider" />

              <div class="col-span-12 md:col-span-6">
                <label for="email2">Background Color {{color}}</label>
                <ColorPicker v-model="color" />
              </div>
              <div class="col-span-12 md:col-span-6">
                <label for="country2">Country</label>
                <Select id="country2" v-model="selectedCountry" :options="countries" option-label="name" :filter="true" filter-by="name" :show-clear="true" placeholder="Select a Country" class="w-full">
                  <template #option="slotProps">
                    <div class="flex items-center">
                      <div>[flag]</div>
                      <div>{{ slotProps.option.name }}</div>
                    </div>
                  </template>
                </Select>
              </div>

              <div class="divider" />

              <div class="col-span-12 md:col-span-6">
                <label for="city2">City</label>
                <InputText id="city2" type="text" class="w-full" />
              </div>
              <div class="col-span-12 md:col-span-6">
                <label for="state2">State</label>
                <InputText id="state2" type="text" class="w-full" />
              </div>

              <div class="divider" />

              <div class="col-span-12">
                <label for="nickname2">My note about this sticker</label>
                <InputText id="nickname2" type="text" class="w-full" placeholder="First one I made" />
              </div>

              <div class="divider" />

              <div class="col-span-12">
                <label for="website2">Website</label>
                <InputGroup>
                  <InputGroupAddon>URL</InputGroupAddon>
                  <InputText id="website2" placeholder="https://" />
                </InputGroup>
              </div>

              <div class="divider" />

              <div class="col-span-12">
                <label for="privacy2">Privacy</label>
                <div class="flex items-center">
                  <ToggleSwitch id="privacy2" v-model="checked" />
                  <span class="ml-2">Share my data with contacts</span>
                </div>
              </div>

              <div class="divider" />

              <div class="col-span-12">
                <Button label="Save Changes" class="w-auto mt-4" />
              </div>
            </div>
          </div>
        </Form>
      </template>
    </Card>
  </div>
</template>

<style scoped lang="scss">
label {
  @apply font-medium text-surface-900 dark:text-surface-0 mb-1 block;
}
.divider {
  @apply border-surface border-t opacity-50 mb-4 col-span-12;
}
#StickerPage {
  display: flex;
  flex-direction: column;
  > * {
    margin-bottom: 1em;
  }
}
#StickerWrapper {
  background-color: #CCC;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 10px;
  #Sticker1 {
    width: 300px;
  }
  #Sticker2 {
    width: 400px;
  }
}
</style>