v1.4.3: Improved blog post creation

timyboy12345 · Nov 26, 2023 · b6abee6 · b6abee6 · hop-deploy · Nov 26, 2023
1 parent 6cdfd2d
commit b6abee6
Show file tree

Hide file tree

Showing 10 changed files with 331 additions and 62 deletions.
diff --git a/components/form/CustomInput.vue b/components/form/CustomInput.vue
@@ -1,15 +1,12 @@
 <template>
   <div class="flex flex-col">
     <label class="text-gray-600 text-sm mb-1" :for="id">{{ label }}</label>
-    <input
-      :id="id"
-      v-model="internalValue"
-      :type="type"
-      class="border border-gray-300 rounded focus:outline-none focus:shadow-outline focus:border-indigo-300"
-      :name="id"
-      :placeholder="placeholder"
-      @keypress.enter="$emit('keypress', $event)"
-    />
+
+    <slot name="input"></slot>
+
+    <div class="text-sm text-gray-400 flex flex-col py-2 -mt-2">
+      <slot name="bottom"></slot>
+    </div>
 
     <div v-if="description" class="text-gray-600 text-sm">
       {{ description }}
@@ -33,31 +30,6 @@ export default {
       type: String,
       default: null,
     },
-    placeholder: {
-      required: false,
-      type: String,
-      default: null,
-    },
-    type: {
-      required: false,
-      type: String,
-      default: 'text',
-    },
-    value: {
-      required: false,
-      type: [String, Number],
-      default: null,
-    },
-  },
-  computed: {
-    internalValue: {
-      get() {
-        return this.value
-      },
-      set(value) {
-        this.$emit('input', value)
-      },
-    },
   },
 }
 </script>
diff --git a/components/form/CustomSelectInput.vue b/components/form/CustomSelectInput.vue
@@ -0,0 +1,74 @@
+<template>
+  <CustomInput :id="id" :label="label" :description="description" class="flex flex-col">
+    <template #input>
+      <select
+        :id="id"
+        v-model="internalValue"
+        class="border border-gray-300 rounded focus:outline-none focus:shadow-outline focus:border-indigo-300"
+        :name="id"
+        :placeholder="placeholder"
+        :disabled="typeof options === undefined"
+      >
+        <option value="" :disabled="required">Maak een keuze</option>
+        <option v-for="option of options" :key="option.value" :value="option.value">
+          {{ option.text }}
+        </option>
+      </select>
+    </template>
+  </CustomInput>
+</template>
+
+<script>
+import CustomInput from '~/components/form/CustomInput.vue'
+
+export default {
+  components: { CustomInput },
+  props: {
+    id: {
+      required: true,
+      type: String,
+    },
+    label: {
+      required: true,
+      type: String,
+    },
+    description: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    placeholder: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    options: {
+      required: false,
+      default() {
+        return []
+      },
+      type: Array,
+    },
+    value: {
+      required: false,
+      type: [String, Number],
+      default: null,
+    },
+    required: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      },
+    },
+  },
+}
+</script>
diff --git a/components/form/CustomTextInput.vue b/components/form/CustomTextInput.vue
@@ -0,0 +1,98 @@
+<template>
+  <CustomInput :id="id" :label="label" :description="description" class="flex flex-col">
+    <template #input>
+      <input
+        :id="id"
+        v-model="internalValue"
+        :type="type"
+        class="border border-gray-300 rounded focus:outline-none focus:shadow-outline focus:border-indigo-300"
+        :name="id"
+        :placeholder="placeholder"
+        @keypress.enter="$emit('keypress', $event)"
+      />
+    </template>
+
+    <template v-if="minLength || maxLength" #bottom>
+      {{ charLengthMessage }}
+    </template>
+  </CustomInput>
+</template>
+
+<script>
+import CustomInput from '~/components/form/CustomInput.vue'
+
+export default {
+  components: { CustomInput },
+  props: {
+    id: {
+      required: true,
+      type: String,
+    },
+    label: {
+      required: true,
+      type: String,
+    },
+    description: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    placeholder: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    type: {
+      required: false,
+      type: String,
+      default: 'text',
+      validator(value) {
+        // The value must match one of these strings
+        return ['text', 'number', 'email', 'password'].includes(value)
+      },
+    },
+    value: {
+      required: false,
+      type: [String, Number],
+      default: null,
+    },
+    minLength: {
+      required: false,
+      type: Number,
+      default: null,
+    },
+    maxLength: {
+      required: false,
+      type: Number,
+      default: null,
+    },
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      },
+    },
+    charLengthMessage() {
+      let m = `Karakters: ${this.value.length}, `
+
+      if (this.minLength) {
+        m += `Min: ${this.minLength}`
+      }
+
+      if (this.minLength) {
+        m += ` / `
+      }
+
+      if (this.minLength) {
+        m += `Max: ${this.maxLength}`
+      }
+
+      return m
+    },
+  },
+}
+</script>
diff --git a/components/form/CustomUrlInput.vue b/components/form/CustomUrlInput.vue
@@ -0,0 +1,63 @@
+<template>
+  <CustomInput :id="id" :label="label" :description="description" class="flex flex-col">
+    <template #input>
+      <input
+        :id="id"
+        v-model="internalValue"
+        type="text"
+        class="border border-gray-300 rounded focus:outline-none focus:shadow-outline focus:border-indigo-300"
+        :name="id"
+        :placeholder="placeholder"
+      />
+    </template>
+  </CustomInput>
+</template>
+
+<script>
+import CustomInput from '~/components/form/CustomInput.vue'
+
+export default {
+  components: { CustomInput },
+  props: {
+    id: {
+      required: true,
+      type: String,
+    },
+    label: {
+      required: true,
+      type: String,
+    },
+    description: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    placeholder: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    value: {
+      required: false,
+      type: [String, Number],
+      default: null,
+    },
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        const slug = value
+          .toLowerCase()
+          .replace(/[^\w\s-]/g, '')
+          .replace(/[\s_-]+/g, '-')
+          .replace(/^-+|-+$/g, '')
+
+        this.$emit('input', slug)
+      },
+    },
+  },
+}
+</script>
diff --git a/components/popups/AddCheckinPopup.vue b/components/popups/AddCheckinPopup.vue
@@ -2,15 +2,15 @@
   <div class="absolute shadow w-full bottom-0 left-0 z-10">
     <div class="bg-white rounded shadow m-4 p-4 rounded gap-y-4 flex flex-col">
       <div v-if="!saving" class="flex flex-col gap-y-4">
-        <CustomInput
+        <CustomTextInput
           id="dateTime"
           v-model="dateTime"
           :description="$t('checkins.dateTimeDescription')"
           type="datetime-local"
           label="Datum en tijd"
           placeholder="Wanneer ben je er in geweest?"
         />
-        <CustomInput
+        <CustomTextInput
           id="wait"
           v-model="waitTime"
           :description="$t('checkins.waitTimeDescription')"
@@ -35,12 +35,12 @@
 </template>
 
 <script>
-import CustomInput from '@/components/form/CustomInput'
+import CustomTextInput from '@/components/form/CustomTextInput'
 import LoadingSpinner from '@/components/LoadingSpinner'
 
 export default {
   name: 'AddCheckinPopup',
-  components: { LoadingSpinner, CustomInput },
+  components: { LoadingSpinner, CustomTextInput },
   data() {
     return {
       saving: false,

diff --git a/components/popups/EditCheckinPopup.vue b/components/popups/EditCheckinPopup.vue
@@ -2,15 +2,15 @@
   <div class="absolute shadow w-full bottom-0 left-0 z-10">
     <div class="bg-white rounded shadow m-4 p-4 rounded gap-y-4 flex flex-col">
       <div v-if="!saving" class="flex flex-col gap-y-4">
-        <CustomInput
+        <CustomTextInput
           id="dateTime"
           v-model="dateTime"
           :description="$t('checkins.dateTimeDescription')"
           type="datetime-local"
           label="Datum en tijd"
           placeholder="Wanneer ben je er in geweest?"
         />
-        <CustomInput
+        <CustomTextInput
           id="wait"
           v-model="waitTime"
           :description="$t('checkins.waitTimeDescription')"
@@ -39,12 +39,12 @@
 </template>
 
 <script>
-import CustomInput from '@/components/form/CustomInput'
 import LoadingSpinner from '@/components/LoadingSpinner'
+import CustomTextInput from '@/components/form/CustomTextInput.vue'
 
 export default {
   name: 'EditCheckinPopup',
-  components: { LoadingSpinner, CustomInput },
+  components: { CustomTextInput, LoadingSpinner },
   props: {
     checkin: { type: Object, required: true },
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "themeparks-nuxtjs",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "private": false,
   "repository": {
     "url": "https://github.com/timyboy12345/Themeparks-NuxtJS"