cdruc vue

CheckoutForm.vue #

<template>
    <form class="my-20 mx-auto max-w-2xl">
        <h3 class="mb-2 mt-6 text-lg font-medium">Personal info</h3>
        <div class="grid grid-cols-2 gap-6 mb-6">
            <label class="block text-sm font-medium text-gray-700">
                First name
                <input 
                       class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500" 
                       type="text"
                       v-model="form.firstName"
                       placeholder="First name"
                />
            </label>

            <label class="block text-sm font-medium text-gray-700">
                Last name
                <input 
                       class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500" 
                       type="text"
                       v-model="form.lastName"
                       placeholder="Last name"
                />
            </label>

            <label class="block text-sm font-medium text-gray-700">
                E-mail
                <input 
                       class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500" 
                       type="email"
                       v-model="form.email"
                       placeholder="E-mail address"
                />
            </label>
        </div>
        
        <AddressFieldGroup
            label="Delivery address"
            v-model:street="form.deliveryAddress.street"
            v-model:streetNumber="form.deliveryAddress.streetNumber"
            v-model:postcode="form.deliveryAddress.postcode"
            v-model:city="form.deliveryAddress.city"
        />
        
        <AddressFieldGroup
            label="Billing address"
            v-model:street="form.billingAddress.street"
            v-model:streetNumber="form.billingAddress.streetNumber"
            v-model:postcode="form.billingAddress.postcode"
            v-model:city="form.billingAddress.city"
        />

    </form>
</template>

<script>
import {ref} from 'vue';
import AddressFieldGroup from './AddressFieldGroup.vue';

export default {
    components: {AddressFieldGroup},
    setup() {
        const form = ref({
            firstName: '321321',
            lastName: '321321',
            email: '321321',
            deliveryAddress: {
                street: '321321',
                streetNumber: '321',
                postcode: '321',
                city: '321',
            },
            billingAddress: {
                street: '',
                streetNumber: '',
                postcode: '',
                city: '',
            },
        });

        return {
            form,
        };
    },
};
</script>

cdruc vue

CopyToClipBoard.vue #

<script>
export default {
  data() {
    return {
      status: 'idle',
    };
  },
  methods: {
    copy(text) {
      // create textarea
      const el = document.createElement('textarea');
      
      // assign value
      el.value = text;
      
      // style textarea
      el.style.position = 'absolute';
      el.style.left = '-90000px';
      document.body.appendChild(el);

      // select its contents
      el.select();
      
      // execute copy
      document.execCommand("copy");
      
      // remove textarea
      document.body.removeChild(el);

      this.status = "copied";
      setTimeout(() => this.status = "idle", 1000);
    },
  },
  render() {
    return this.$slots.default({
      status: this.status,
      copy: this.copy
    });
  }
};
</script>