feat: add <select> tag to FormField.vue

+ change form CSS styles
+ change <Button> style
+ add more fields to each example
+ toggling slide buttons after animation

Author: igorMSoares

docs/.vitepress/components/AnimationForm.vue

@@ -30,49 +30,77 @@
   });
   const formRefFn = () => form;
 
-  const firstRow = [
+  const allFields = [
     { label: 'duration' },
     { label: 'delay' },
     { label: 'staggerDelay' },
     { label: 'blur' },
-    { label: 'maintainSpace', type: 'checkbox' },
-    { label: 'transfOrigin' },
-  ];
-  const secondRow = [
     { label: 'easing' },
+    { label: 'maintainSpace', type: 'checkbox' },
     {
       label: 'dimensionsTransition',
       type: 'checkbox',
     },
+    {
+      label: 'transfOrigin',
+      tagName: 'select',
+      selectOptions: [
+        { text: 'center', selected: true },
+        { text: 'top' },
+        { text: 'bottom', selected: true },
+      ],
+    },
     { label: 'overflowHidden', type: 'checkbox' },
-    { label: 'iteration' },
-    { label: 'direction' },
-  ];
-  const rowsList = [
-    firstRow.filter(field => fieldsList?.indexOf(field.label) !== -1),
-    secondRow.filter(field => fieldsList?.indexOf(field.label) !== -1),
+    {
+      label: 'iteration',
+      tagName: 'select',
+      selectOptions: [
+        { text: '1', selected: true },
+        { text: '2' },
+        { text: '3' },
+        { text: '4' },
+        { text: '5' },
+        { text: 'infinite' },
+      ],
+    },
+    {
+      label: 'direction',
+      tagName: 'select',
+      selectOptions: [
+        { text: 'normal', selected: true },
+        { text: 'reverse' },
+        { text: 'alternate' },
+        { text: 'alternate-reverse' },
+      ],
+    },
   ];
 
+  const customFields = allFields.filter(
+    field => fieldsList?.indexOf(field.label) !== -1
+  );
+
   defineEmits(['resetAnimation']);
 </script>
 
 <template>
   <Container class="form--container">
     <div class="column">
-      <div v-for="row in rowsList" class="row">
+      <div class="row">
         <FormField
-          v-for="field in row"
+          v-for="field in customFields"
           :form="formRefFn"
           :label="field.label"
           :type="field.type"
+          :tag-name="field.tagName"
+          :select-options="field.selectOptions ?? []"
           @change-field="opts => $emit('resetAnimation', opts)"
         />
       </div>
     </div>
   </Container>
 </template>
 
-<style>
+<style scoped>
   .column {
     display: flex;
     flex-direction: column;
@@ -81,6 +109,7 @@
 
   .row {
     display: flex;
+    justify-content: center;
     align-items: flex-end;
     flex-wrap: wrap;
     gap: 1rem;

docs/.vitepress/components/Button.vue

@@ -18,18 +18,15 @@
 <style scoped>
   button {
     font-weight: 500;
-    border: 2px solid var(--vp-c-divider);
+    border: 2px solid var(--vp-c-gray-dark-1);
     padding: 0.25em 1em;
     border-radius: 0.5rem;
     background-color: var(--vp-c-bg-soft);
   }
 
-  button:hover {
-    border-color: var(--vp-c-brand);
-  }
-
   button:active,
-  button:focus {
+  button:focus,
+  button:hover {
     border-color: var(--vp-c-brand);
     color: var(--vp-c-brand);
   }

docs/.vitepress/components/FormField.vue

@@ -5,13 +5,19 @@
 
   const props = defineProps({
     form: Function,
-    initial: Object,
     className: Function,
     label: String,
     type: String,
     eventName: String,
+    tagName: String,
+    selectOptions: Array,
   });
-  const { label = '', type = 'text', initial } = props;
+  const {
+    label = '',
+    type = 'text',
+    tagName = 'input',
+    selectOptions = [],
+  } = props;
   const form = typeof props.form === 'function' ? props.form() : ref({});
 
   function toKebabCase(label) {
@@ -32,40 +38,78 @@
   >
     {{ label }}:
     <input
+      v-if="tagName === 'input'"
       v-model="form[label]"
       @change="$emit('changeField', form)"
       :type="type"
       :id="toKebabCase(label)"
       :name="toKebabCase(label)"
       :disabled="label === 'dimensionsTransition' ? form.maintainSpace : false"
     />
+    <select
+      v-if="tagName === 'select'"
+      v-model="form[label]"
+      @change="$emit('changeField', form)"
+      :id="toKebabCase(label)"
+      :name="toKebabCase(label)"
+    >
+      <option
+        v-for="option in selectOptions"
+        :selected="option.selected ?? false"
+      >
+        {{ option.text }}
+      </option>
+    </select>
   </label>
 </template>
 
 <style scoped>
   input {
-    border: 1px solid var(--vp-badge-info-border);
     margin: 0;
-    width: 3rem;
+    width: 4rem;
   }
 
   #easing {
-    width: 15rem;
+    width: 15.5rem;
   }
 
   #transf-origin {
     width: 5rem;
   }
 
   input[type='checkbox'] {
+    inset-inline: 2px solid var(--vp-c-green-darker);
     width: 1.5rem;
   }
 
   input[type='checkbox']:disabled {
-    border-color: var(--docsearch-muted-color);
+    border-color: var(--docsearch-hit-color);
   }
 
   .disabled {
     color: var(--vp-c-divider);
   }
+
+  select,
+  input {
+    appearance: listbox;
+    -webkit-appearance: listbox;
+    text-align: center;
+    border: 1px solid var(--vp-c-gray-dark-1);
+    border-radius: 4px;
+    padding: 0.2em 0.6em;
+    margin-top: 10px;
+    background-color: var(--vp-c-bg);
+    transition: background-color 0.5s;
+    touch-action: manipulation;
+  }
+
+  input:focus,
+  select:focus {
+    border: 1px solid var(--vp-c-green-lighter);
+  }
+
+  select option {
+    text-align: left;
+  }
 </style>

docs/examples/examples.json

@@ -3,28 +3,32 @@
     "btnList": [
       {
         "text": [
-          "Slide Up"
+          "Slide Up",
+          "Slide from Top"
         ],
         "class": "slide-up--btn",
         "targetSelector": ".example__slide"
       },
       {
         "text": [
-          "Slide Down"
+          "Slide Down",
+          "Slide from Bottom"
         ],
         "class": "slide-down--btn",
         "targetSelector": ".example__slide"
       },
       {
         "text": [
-          "Slide Left"
+          "Slide Left",
+          "Slide from Left"
         ],
         "class": "slide-left--btn",
         "targetSelector": ".example__slide"
       },
       {
         "text": [
-          "Slide Right"
+          "Slide Right",
+          "Slide from Right"
         ],
         "class": "slide-right--btn",
         "targetSelector": ".example__slide"

docs/examples/index.md

@@ -11,30 +11,47 @@ aside: false
   import jsCssAnimations from '../../js-css-animations/js-css-animations.js';
   import '../../js-css-animations/js-animations.css';
 
+  function toggleBtnTitle(btnList, idx) {
+    const btnSelector = btnList[idx].class;
+    const btn = document.querySelector(`.${btnSelector}`)
+    const btnText = btnList[idx].text;
+
+    btn.innerText = btn.innerText === btnText[0] ? btnText[1] : btnText[0];
+  }
+
   function slideAnimations() {
+    const toggleSlideBtns = () => {
+        toggleBtnTitle(examples.slide.btnList, 0);
+        toggleBtnTitle(examples.slide.btnList, 1);
+        toggleBtnTitle(examples.slide.btnList, 2);
+        toggleBtnTitle(examples.slide.btnList, 3);
+    }
     jsCssAnimations.init.slideUp({
       trigger: `.${ examples.slide.btnList[0].class }`,
+      complete: () => {
+        toggleSlideBtns();
+      },
     });
     jsCssAnimations.init.slideDown({
       trigger: `.${ examples.slide.btnList[1].class }`,
+      complete: () => {
+        toggleSlideBtns();
+      },
     });
     jsCssAnimations.init.slideLeft({
       trigger: `.${ examples.slide.btnList[2].class }`,
+      complete: () => {
+        toggleSlideBtns();
+      },
     });
     jsCssAnimations.init.slideRight({
       trigger: `.${ examples.slide.btnList[3].class }`,
+      complete: () => {
+        toggleSlideBtns();
+      },
     });
   }
 
-  function toggleBtnTitle(btnList, idx) {
-    const btnSelector = btnList[idx].class;
-    const btn = document.querySelector(`.${btnSelector}`)
-    const btnText = btnList[idx].text;
-
-    btn.innerText = btn.innerText === btnText[0] ? btnText[1] : btnText[0];
-
-  }
-
   const fadeOpts = {
       keepSpace: true,
       complete: () => {
@@ -62,22 +79,24 @@ aside: false
         const triggerSelector = `.${btn.class}`;
         jsCssAnimations.end(triggerSelector);
 
-        const default_value = {
+        const defaultValue = {
           duration: '800ms',
           delay: '0ms',
           staggerDelay: '0ms',
           timingFunction: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+          blur: '0.5px'
         }
 
         const easingRegEx = /^(ease(-in|-out|-in-out)?|linear|cubic-bezier\((0|1|0.\d+), -?[\d\.]+, (0|1|0.\d+), -?[\d\.]+\)|step\((100|[0-9][0-9]|[0-9]),\s?(jump-start|jump-end|jump-none|jump-both|start|end)\)|step\(step-(start|end)\))$/;
 
         if (opts.maintainSpace) opts.dimensionsTransition = false;
+        if (!opts.blur.match(/^(\d+|\d+\.\d+)(px|rem|em)$/)) opts.blur = defaultValue.blur;
         if (!opts.easing || !opts.easing.match(easingRegEx))
-          opts.easing = default_value.timingFunction;
+          opts.easing = defaultValue.timingFunction;
         ['duration', 'delay', 'staggerDelay'].forEach(prop => {
           if (opts[prop].match(/^\d+$/)) opts[prop] = `${opts[prop]}ms`;
           else if (!opts[prop].match(/^(\d+ms|\d+s)$/)) {
-            opts[prop] = default_value[prop];
+            opts[prop] = defaultValue[prop];
           }
         });
 
@@ -105,7 +124,7 @@ aside: false
 :content-list="examples.slide.contentList"
 :anim-opts="{}"
 @reset-animation="(opts) => {resetAnimation('slide', opts);}"
-:fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'overflowHidden', 'iteration']">
+:fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'overflowHidden']">
 
 ```js{4}
 jsCssAnimations.init.slideUp({