@namelivia/vue-components 0.1.7 → 0.1.8

package/dist/index.esm.js

@@ -283,7 +283,7 @@ staticRenderFns: [],
 };
 
 var MobileNavigationLinks = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"sm:hidden",attrs:{"id":"mobile-menu"}},[_c('div',{staticClass:"px-2 pt-2 pb-3 space-y-1"},_vm._l((_vm.links),function(link){return _c('mobile-navigation-link',{key:link.id,attrs:{"href":link.href,"text":link.text}})}),1)])},
+render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"enter-active-class":"transition-all","leave-active-class":"transition-all","enter-class":"opacity-0 scale-70","enter-to-class":"opacity-100 scale-100","leave-class":"opacity-100 scale-100","leave-to-class":"opacity-0 scale-70"}},[(_vm.open)?_c('div',{staticClass:"sm:hidden",attrs:{"id":"mobile-menu"}},[_c('div',{staticClass:"px-2 pt-2 pb-3 space-y-1"},_vm._l((_vm.links),function(link){return _c('mobile-navigation-link',{key:link.id,attrs:{"href":link.href,"text":link.text}})}),1)]):_vm._e()])},
 staticRenderFns: [],
   components: {
     MobileNavigationLink: MobileNavigationLink,
@@ -292,6 +292,10 @@ staticRenderFns: [],
     links: {
       type: Array,
     },
+    open: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 
@@ -352,13 +356,23 @@ staticRenderFns: [],
 };
 
 var MobileMenuButton = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{staticClass:"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",attrs:{"type":"button","aria-controls":"mobile-menu","aria-expanded":"false"}},[_c('span',{staticClass:"sr-only"},[_vm._v("Open main menu")]),_vm._v(" "),_c('svg',{staticClass:"block h-6 w-6",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor","aria-hidden":"true"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M4 6h16M4 12h16M4 18h16"}})]),_vm._v(" "),_c('svg',{staticClass:"hidden h-6 w-6",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor","aria-hidden":"true"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M6 18L18 6M6 6l12 12"}})])])},
+render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{staticClass:"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",attrs:{"type":"button"},on:{"click":_vm.onClick}},[_c('svg',{staticClass:"block h-6 w-6",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M4 6h16M4 12h16M4 18h16"}})])])},
 staticRenderFns: [],
-stub: 1
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+  },
+  methods: {
+    onClick(evt) {
+      this.$emit('click', evt);
+    }
+  }
 };
 
 var Navbar = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"bg-gray-800"},[_c('div',{staticClass:"max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"},[_c('div',{staticClass:"relative flex items-center justify-between h-16"},[_c('div',{staticClass:"absolute inset-y-0 left-0 flex items-center sm:hidden"},[_c('mobile-menu-button')],1),_vm._v(" "),_c('div',{staticClass:"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"},[_c('navbar-title'),_vm._v(" "),_c('navigation-links',{attrs:{"links":_vm.links}})],1),_vm._v(" "),_c('right-content',{attrs:{"locale":_vm.locale,"current-user-email":_vm.currentUserEmail}})],1)]),_vm._v(" "),_c('mobile-navigation-links',{attrs:{"links":_vm.links}})],1)},
+render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"bg-gray-800"},[_c('div',{staticClass:"max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"},[_c('div',{staticClass:"relative flex items-center justify-between h-16"},[_c('div',{staticClass:"absolute inset-y-0 left-0 flex items-center sm:hidden"},[_c('mobile-menu-button',{attrs:{"open":_vm.mobileMenuOpen},on:{"click":_vm.onMobileMenuClick}})],1),_vm._v(" "),_c('div',{staticClass:"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"},[_c('navbar-title'),_vm._v(" "),_c('navigation-links',{attrs:{"links":_vm.links}})],1),_vm._v(" "),_c('right-content',{attrs:{"locale":_vm.locale,"current-user-email":_vm.currentUserEmail}})],1)]),_vm._v(" "),_c('mobile-navigation-links',{attrs:{"links":_vm.links,"open":_vm.mobileMenuOpen}})],1)},
 staticRenderFns: [],
   components: {
     NavbarTitle: NavbarTitle,
@@ -367,6 +381,11 @@ staticRenderFns: [],
     RightContent: RightContent,
     MobileMenuButton: MobileMenuButton,
   },
+  data() {
+    return {
+      mobileMenuOpen: false,
+    }
+  },
   props: {
     links: {
       type: Array,
@@ -378,6 +397,11 @@ staticRenderFns: [],
       type: String,
     },
   },
+  methods: {
+    onMobileMenuClick() {
+      this.mobileMenuOpen = !this.mobileMenuOpen;
+    },
+  }
 };
 
 export { Card, CardBody, CardGrid, CardImage, CheckBoxInput, DangerButton, ImageInput, Loading, Navbar, NumberInput, RegularButton, ResetButton, SecondaryButton, SectionTitle, Selector, SubmitButton, TextInput };

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/SectionTitle.vue","../src/Loading.vue","../src/ResetButton.vue","../src/SubmitButton.vue","../src/RegularButton.vue","../src/SecondaryButton.vue","../src/DangerButton.vue","../src/Card.vue","../src/CardImage.vue","../src/CardBody.vue","../src/Selector.vue","../src/TextInput.vue","../src/CheckBoxInput.vue","../src/NumberInput.vue","../src/ImageInput.vue","../src/CardGrid.vue","../src/MobileNavigationLink.vue","../src/MobileNavigationLinks.vue","../src/NavigationLink.vue","../src/NavigationLinks.vue","../src/NavbarTitle.vue","../src/RightContent.vue","../src/MobileMenuButton.vue","../src/Navbar.vue"],"sourcesContent":["<template>\n  <h1 class=\"text-center text-6xl leading-relaxed\"> {{text}} </h1>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n<div>\n  <h1 class=\"text-center.text-1xl.leading-relaxed\"> Loading... </h1>\n  <div class=\"flex items-center justify-center space-x-2 animate-bounce\">\n    <div class=\"w-8 h-8 bg-blue-400 rounded-full\" />\n    <div class=\"w-8 h-8 bg-green-400 rounded-full\" />\n    <div class=\"w-8 h-8 bg-red-400 rounded-full\" />\n  </div>\n</div>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button type=\"reset\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button type=\"submit\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <div class=\"max-w-sm rounded overflow-hidden shadow-lg\">\n    <slot></slot>\n  </div>\n</template>\n","<template>\n  <img class=\"w-full\" :src=\"src\" :alt=\"alt\" ref=\"image\"/>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    src: String,\n    alt: String,\n  },\n  data: function () {\n    return {\n      imageWidth: 0,\n    }\n  },\n  methods: {\n    calculateWidth() {\n      return this.$refs.image.clientWidth\n    },\n  },\n  mounted: function () {\n    this.$emit('width', this.calculateWidth())\n  },\n}\n</script>\n","<template>\n  <div class=\"px-6 py-4\">\n    <div class=\"font-bold text-xl mb-2\">{{ title }}</div>\n    <p class=\"text-gray-700 text-base\">\n      <slot></slot>\n    </p>\n  </div>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    title: String,\n  },\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <div class=\"relative\">\n      <select\n        :id=\"id\"\n        v-model=\"selected\"\n        class=\"block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\n        @change=\"onChange\"\n      >\n        <option\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          :value=\"option.value\"\n          :disabled=\"option.disabled\"\n        >\n          {{ option.text }}\n        </option>\n      </select>\n      <div\n        class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\"\n      >\n        <svg\n          class=\"fill-current h-4 w-4\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path\n            d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    options: {\n      type: Array,\n    },\n  },\n  data() {\n    return {\n      selected: '',\n    }\n  },\n  methods: {\n    onChange() {\n      this.$emit('selected', this.selected)\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"text\"\n      @input=\"onInput\"\n      type=\"text\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    text: {\n      type: String,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <input\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :value=\"checked\"\n      @input=\"onInput\"\n      type=\"checkbox\"\n      unchecked-value=\"false\"\n    />\n      <label class=\"block text-gray-700 text-sm font-bold\" :for=\"id\">\n        {{ label }}\n      </label>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    checked: {\n      type: Boolean,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"amount\"\n      :min=\"min\"\n      :step=\"step\"\n      @input=\"onInput\"\n      type=\"number\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    amount: {\n      type: Number,\n    },\n    min: {\n      type: String,\n    },\n    step: {\n      type: String,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"file\"\n      :drop-placeholder=\"dropPlaceholder\"\n      @input=\"onInput\"\n      type=\"file\"\n      accept=\"image/*\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    dropPlaceholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    file: {\n      type: Object,\n    }\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.files[0])\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"flex flex-wrap\">\n    <slot></slot>\n  </div>\n</template>\n","<template>\n  <a :href=\"href\" :class=\"linkClass\" aria-current=\"page\">\n    {{ text }}\n  </a>\n</template>\n<script>\nexport default {\n  props: {\n    text: {\n      type: String,\n    },\n    href: {\n      type: String,\n    },\n    current: {\n      type: Boolean,\n    },\n  },\n  computed: {\n    linkClass: function () {\n      if (this.current) {\n        return 'bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium'\n      }\n      return 'text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium'\n    },\n  },\n}\n</script>\n","<template>\n  <div id=\"mobile-menu\" class=\"sm:hidden\">\n    <div class=\"px-2 pt-2 pb-3 space-y-1\">\n      <mobile-navigation-link\n        v-for=\"link in links\"\n        :key=\"link.id\"\n        :href=\"link.href\"\n        :text=\"link.text\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport MobileNavigationLink from './MobileNavigationLink.vue'\n\nexport default {\n  components: {\n    MobileNavigationLink: MobileNavigationLink,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n  },\n}\n</script>\n","<template>\n  <a :href=\"href\" :class=\"linkClass\" aria-current=\"page\">\n    {{ text }}\n  </a>\n</template>\n<script>\nexport default {\n  props: {\n    text: {\n      type: String,\n    },\n    href: {\n      type: String,\n    },\n    current: {\n      type: Boolean,\n    },\n  },\n  computed: {\n    linkClass: function () {\n      if (this.current) {\n        return 'bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium'\n      }\n      return 'text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium'\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"hidden sm:block sm:ml-6\">\n    <div class=\"flex space-x-4\">\n      <navigation-link\n        v-for=\"link in links\"\n        :key=\"link.id\"\n        :href=\"link.href\"\n        :text=\"link.text\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport NavigationLink from './NavigationLink.vue'\n\nexport default {\n  components: {\n    NavigationLink: NavigationLink,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"flex-shrink-0 flex items-center\">\n    <img\n      class=\"block lg:hidden h-8 w-auto\"\n      src=\"https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg\"\n      alt=\"Workflow\"\n    />\n    <img\n      class=\"hidden lg:block h-8 w-auto\"\n      src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\"\n      alt=\"Workflow\"\n    />\n  </div>\n</template>\n","<template>\n  <div\n    class=\"absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0\"\n  >\n    <span class=\"bg-gray-800 p-1 text-gray-400\"> {{ $i18n.locale }}</span>\n    <span class=\"bg-gray-800 p-1 text-gray-400\"> {{ currentUserEmail }} </span>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    locale: {\n      type: String,\n    },\n    currentUserEmail: {\n      type: String,\n    },\n  },\n}\n</script>\n","<template>\n  <button\n    type=\"button\"\n    class=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\"\n    aria-controls=\"mobile-menu\"\n    aria-expanded=\"false\"\n  >\n    <span class=\"sr-only\">Open main menu</span>\n    <!--\n  Icon when menu is closed.\n\n  Heroicon name: outline/menu\n\n  Menu open: \"hidden\", Menu closed: \"block\"\n-->\n    <svg\n      class=\"block h-6 w-6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M4 6h16M4 12h16M4 18h16\"\n      />\n    </svg>\n    <!--\n  Icon when menu is open.\n\n  Heroicon name: outline/x\n\n  Menu open: \"block\", Menu closed: \"hidden\"\n-->\n    <svg\n      class=\"hidden h-6 w-6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M6 18L18 6M6 6l12 12\"\n      />\n    </svg>\n  </button>\n</template>\n","<template>\n  <nav class=\"bg-gray-800\">\n    <div class=\"max-w-7xl mx-auto px-2 sm:px-6 lg:px-8\">\n      <div class=\"relative flex items-center justify-between h-16\">\n        <div class=\"absolute inset-y-0 left-0 flex items-center sm:hidden\">\n          <mobile-menu-button />\n        </div>\n        <div\n          class=\"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start\"\n        >\n          <navbar-title />\n          <navigation-links :links=\"links\" />\n        </div>\n        <right-content\n          :locale=\"locale\"\n          :current-user-email=\"currentUserEmail\"\n        />\n      </div>\n    </div>\n    <mobile-navigation-links :links=\"links\" />\n  </nav>\n</template>\n<script>\nimport MobileNavigationLinks from './MobileNavigationLinks.vue'\nimport NavigationLinks from './NavigationLinks.vue'\nimport NavbarTitle from './NavbarTitle.vue'\nimport RightContent from './RightContent.vue'\nimport MobileMenuButton from './MobileMenuButton.vue'\n\nexport default {\n  components: {\n    NavbarTitle: NavbarTitle,\n    NavigationLinks: NavigationLinks,\n    MobileNavigationLinks: MobileNavigationLinks,\n    RightContent: RightContent,\n    MobileMenuButton: MobileMenuButton,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n    locale: {\n      type: String,\n    },\n    currentUserEmail: {\n      type: String,\n    },\n  },\n}\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/SectionTitle.vue","../src/Loading.vue","../src/ResetButton.vue","../src/SubmitButton.vue","../src/RegularButton.vue","../src/SecondaryButton.vue","../src/DangerButton.vue","../src/Card.vue","../src/CardImage.vue","../src/CardBody.vue","../src/Selector.vue","../src/TextInput.vue","../src/CheckBoxInput.vue","../src/NumberInput.vue","../src/ImageInput.vue","../src/CardGrid.vue","../src/MobileNavigationLink.vue","../src/MobileNavigationLinks.vue","../src/NavigationLink.vue","../src/NavigationLinks.vue","../src/NavbarTitle.vue","../src/RightContent.vue","../src/MobileMenuButton.vue","../src/Navbar.vue"],"sourcesContent":["<template>\n  <h1 class=\"text-center text-6xl leading-relaxed\"> {{text}} </h1>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n<div>\n  <h1 class=\"text-center.text-1xl.leading-relaxed\"> Loading... </h1>\n  <div class=\"flex items-center justify-center space-x-2 animate-bounce\">\n    <div class=\"w-8 h-8 bg-blue-400 rounded-full\" />\n    <div class=\"w-8 h-8 bg-green-400 rounded-full\" />\n    <div class=\"w-8 h-8 bg-red-400 rounded-full\" />\n  </div>\n</div>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button type=\"reset\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button type=\"submit\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <div class=\"max-w-sm rounded overflow-hidden shadow-lg\">\n    <slot></slot>\n  </div>\n</template>\n","<template>\n  <img class=\"w-full\" :src=\"src\" :alt=\"alt\" ref=\"image\"/>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    src: String,\n    alt: String,\n  },\n  data: function () {\n    return {\n      imageWidth: 0,\n    }\n  },\n  methods: {\n    calculateWidth() {\n      return this.$refs.image.clientWidth\n    },\n  },\n  mounted: function () {\n    this.$emit('width', this.calculateWidth())\n  },\n}\n</script>\n","<template>\n  <div class=\"px-6 py-4\">\n    <div class=\"font-bold text-xl mb-2\">{{ title }}</div>\n    <p class=\"text-gray-700 text-base\">\n      <slot></slot>\n    </p>\n  </div>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    title: String,\n  },\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <div class=\"relative\">\n      <select\n        :id=\"id\"\n        v-model=\"selected\"\n        class=\"block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\n        @change=\"onChange\"\n      >\n        <option\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          :value=\"option.value\"\n          :disabled=\"option.disabled\"\n        >\n          {{ option.text }}\n        </option>\n      </select>\n      <div\n        class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\"\n      >\n        <svg\n          class=\"fill-current h-4 w-4\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path\n            d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    options: {\n      type: Array,\n    },\n  },\n  data() {\n    return {\n      selected: '',\n    }\n  },\n  methods: {\n    onChange() {\n      this.$emit('selected', this.selected)\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"text\"\n      @input=\"onInput\"\n      type=\"text\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    text: {\n      type: String,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <input\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :value=\"checked\"\n      @input=\"onInput\"\n      type=\"checkbox\"\n      unchecked-value=\"false\"\n    />\n      <label class=\"block text-gray-700 text-sm font-bold\" :for=\"id\">\n        {{ label }}\n      </label>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    checked: {\n      type: Boolean,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"amount\"\n      :min=\"min\"\n      :step=\"step\"\n      @input=\"onInput\"\n      type=\"number\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    amount: {\n      type: Number,\n    },\n    min: {\n      type: String,\n    },\n    step: {\n      type: String,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"file\"\n      :drop-placeholder=\"dropPlaceholder\"\n      @input=\"onInput\"\n      type=\"file\"\n      accept=\"image/*\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    dropPlaceholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    file: {\n      type: Object,\n    }\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.files[0])\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"flex flex-wrap\">\n    <slot></slot>\n  </div>\n</template>\n","<template>\n  <a :href=\"href\" :class=\"linkClass\" aria-current=\"page\">\n    {{ text }}\n  </a>\n</template>\n<script>\nexport default {\n  props: {\n    text: {\n      type: String,\n    },\n    href: {\n      type: String,\n    },\n    current: {\n      type: Boolean,\n    },\n  },\n  computed: {\n    linkClass: function () {\n      if (this.current) {\n        return 'bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium'\n      }\n      return 'text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium'\n    },\n  },\n}\n</script>\n","<template>\n  <transition\n    enter-active-class=\"transition-all\"\n    leave-active-class=\"transition-all\"\n    enter-class=\"opacity-0 scale-70\"\n    enter-to-class=\"opacity-100 scale-100\"\n    leave-class=\"opacity-100 scale-100\"\n    leave-to-class=\"opacity-0 scale-70\"\n  >\n    <div id=\"mobile-menu\" class=\"sm:hidden\" v-if=\"open\">\n      <div class=\"px-2 pt-2 pb-3 space-y-1\">\n        <mobile-navigation-link\n          v-for=\"link in links\"\n          :key=\"link.id\"\n          :href=\"link.href\"\n          :text=\"link.text\"\n        />\n      </div>\n    </div>\n  </transition>\n</template>\n<script>\nimport MobileNavigationLink from './MobileNavigationLink.vue'\n\nexport default {\n  components: {\n    MobileNavigationLink: MobileNavigationLink,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n    open: {\n      type: Boolean,\n      default: false,\n    },\n  },\n}\n</script>\n","<template>\n  <a :href=\"href\" :class=\"linkClass\" aria-current=\"page\">\n    {{ text }}\n  </a>\n</template>\n<script>\nexport default {\n  props: {\n    text: {\n      type: String,\n    },\n    href: {\n      type: String,\n    },\n    current: {\n      type: Boolean,\n    },\n  },\n  computed: {\n    linkClass: function () {\n      if (this.current) {\n        return 'bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium'\n      }\n      return 'text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium'\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"hidden sm:block sm:ml-6\">\n    <div class=\"flex space-x-4\">\n      <navigation-link\n        v-for=\"link in links\"\n        :key=\"link.id\"\n        :href=\"link.href\"\n        :text=\"link.text\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport NavigationLink from './NavigationLink.vue'\n\nexport default {\n  components: {\n    NavigationLink: NavigationLink,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"flex-shrink-0 flex items-center\">\n    <img\n      class=\"block lg:hidden h-8 w-auto\"\n      src=\"https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg\"\n      alt=\"Workflow\"\n    />\n    <img\n      class=\"hidden lg:block h-8 w-auto\"\n      src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\"\n      alt=\"Workflow\"\n    />\n  </div>\n</template>\n","<template>\n  <div\n    class=\"absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0\"\n  >\n    <span class=\"bg-gray-800 p-1 text-gray-400\"> {{ $i18n.locale }}</span>\n    <span class=\"bg-gray-800 p-1 text-gray-400\"> {{ currentUserEmail }} </span>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    locale: {\n      type: String,\n    },\n    currentUserEmail: {\n      type: String,\n    },\n  },\n}\n</script>\n","<template>\n  <button\n    type=\"button\"\n    class=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\"\n    v-on:click=\"onClick\"\n  >\n    <svg\n      class=\"block h-6 w-6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M4 6h16M4 12h16M4 18h16\"\n      />\n    </svg>\n  </button>\n</template>\n<script lang=\"js\">\nexport default {\n  props: {\n    open: {\n      type: Boolean,\n      default: false\n    },\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <nav class=\"bg-gray-800\">\n    <div class=\"max-w-7xl mx-auto px-2 sm:px-6 lg:px-8\">\n      <div class=\"relative flex items-center justify-between h-16\">\n        <div class=\"absolute inset-y-0 left-0 flex items-center sm:hidden\">\n          <mobile-menu-button @click=\"onMobileMenuClick\" :open=\"mobileMenuOpen\"/>\n        </div>\n        <div\n          class=\"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start\"\n        >\n          <navbar-title />\n          <navigation-links :links=\"links\"/>\n        </div>\n        <right-content\n          :locale=\"locale\"\n          :current-user-email=\"currentUserEmail\"\n        />\n      </div>\n    </div>\n    <mobile-navigation-links :links=\"links\" :open=\"mobileMenuOpen\" />\n  </nav>\n</template>\n<script>\nimport MobileNavigationLinks from './MobileNavigationLinks.vue'\nimport NavigationLinks from './NavigationLinks.vue'\nimport NavbarTitle from './NavbarTitle.vue'\nimport RightContent from './RightContent.vue'\nimport MobileMenuButton from './MobileMenuButton.vue'\n\nexport default {\n  components: {\n    NavbarTitle: NavbarTitle,\n    NavigationLinks: NavigationLinks,\n    MobileNavigationLinks: MobileNavigationLinks,\n    RightContent: RightContent,\n    MobileMenuButton: MobileMenuButton,\n  },\n  data() {\n    return {\n      mobileMenuOpen: false,\n    }\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n    locale: {\n      type: String,\n    },\n    currentUserEmail: {\n      type: String,\n    },\n  },\n  methods: {\n    onMobileMenuClick() {\n      this.mobileMenuOpen = !this.mobileMenuOpen\n    },\n  }\n}\n</script>\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -287,7 +287,7 @@ staticRenderFns: [],
 };
 
 var MobileNavigationLinks = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"sm:hidden",attrs:{"id":"mobile-menu"}},[_c('div',{staticClass:"px-2 pt-2 pb-3 space-y-1"},_vm._l((_vm.links),function(link){return _c('mobile-navigation-link',{key:link.id,attrs:{"href":link.href,"text":link.text}})}),1)])},
+render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"enter-active-class":"transition-all","leave-active-class":"transition-all","enter-class":"opacity-0 scale-70","enter-to-class":"opacity-100 scale-100","leave-class":"opacity-100 scale-100","leave-to-class":"opacity-0 scale-70"}},[(_vm.open)?_c('div',{staticClass:"sm:hidden",attrs:{"id":"mobile-menu"}},[_c('div',{staticClass:"px-2 pt-2 pb-3 space-y-1"},_vm._l((_vm.links),function(link){return _c('mobile-navigation-link',{key:link.id,attrs:{"href":link.href,"text":link.text}})}),1)]):_vm._e()])},
 staticRenderFns: [],
   components: {
     MobileNavigationLink: MobileNavigationLink,
@@ -296,6 +296,10 @@ staticRenderFns: [],
     links: {
       type: Array,
     },
+    open: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 
@@ -356,13 +360,23 @@ staticRenderFns: [],
 };
 
 var MobileMenuButton = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{staticClass:"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",attrs:{"type":"button","aria-controls":"mobile-menu","aria-expanded":"false"}},[_c('span',{staticClass:"sr-only"},[_vm._v("Open main menu")]),_vm._v(" "),_c('svg',{staticClass:"block h-6 w-6",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor","aria-hidden":"true"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M4 6h16M4 12h16M4 18h16"}})]),_vm._v(" "),_c('svg',{staticClass:"hidden h-6 w-6",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor","aria-hidden":"true"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M6 18L18 6M6 6l12 12"}})])])},
+render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{staticClass:"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",attrs:{"type":"button"},on:{"click":_vm.onClick}},[_c('svg',{staticClass:"block h-6 w-6",attrs:{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor"}},[_c('path',{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2","d":"M4 6h16M4 12h16M4 18h16"}})])])},
 staticRenderFns: [],
-stub: 1
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+  },
+  methods: {
+    onClick(evt) {
+      this.$emit('click', evt);
+    }
+  }
 };
 
 var Navbar = {
-render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"bg-gray-800"},[_c('div',{staticClass:"max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"},[_c('div',{staticClass:"relative flex items-center justify-between h-16"},[_c('div',{staticClass:"absolute inset-y-0 left-0 flex items-center sm:hidden"},[_c('mobile-menu-button')],1),_vm._v(" "),_c('div',{staticClass:"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"},[_c('navbar-title'),_vm._v(" "),_c('navigation-links',{attrs:{"links":_vm.links}})],1),_vm._v(" "),_c('right-content',{attrs:{"locale":_vm.locale,"current-user-email":_vm.currentUserEmail}})],1)]),_vm._v(" "),_c('mobile-navigation-links',{attrs:{"links":_vm.links}})],1)},
+render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"bg-gray-800"},[_c('div',{staticClass:"max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"},[_c('div',{staticClass:"relative flex items-center justify-between h-16"},[_c('div',{staticClass:"absolute inset-y-0 left-0 flex items-center sm:hidden"},[_c('mobile-menu-button',{attrs:{"open":_vm.mobileMenuOpen},on:{"click":_vm.onMobileMenuClick}})],1),_vm._v(" "),_c('div',{staticClass:"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"},[_c('navbar-title'),_vm._v(" "),_c('navigation-links',{attrs:{"links":_vm.links}})],1),_vm._v(" "),_c('right-content',{attrs:{"locale":_vm.locale,"current-user-email":_vm.currentUserEmail}})],1)]),_vm._v(" "),_c('mobile-navigation-links',{attrs:{"links":_vm.links,"open":_vm.mobileMenuOpen}})],1)},
 staticRenderFns: [],
   components: {
     NavbarTitle: NavbarTitle,
@@ -371,6 +385,11 @@ staticRenderFns: [],
     RightContent: RightContent,
     MobileMenuButton: MobileMenuButton,
   },
+  data() {
+    return {
+      mobileMenuOpen: false,
+    }
+  },
   props: {
     links: {
       type: Array,
@@ -382,6 +401,11 @@ staticRenderFns: [],
       type: String,
     },
   },
+  methods: {
+    onMobileMenuClick() {
+      this.mobileMenuOpen = !this.mobileMenuOpen;
+    },
+  }
 };
 
 exports.Card = Card;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/SectionTitle.vue","../src/Loading.vue","../src/ResetButton.vue","../src/SubmitButton.vue","../src/RegularButton.vue","../src/SecondaryButton.vue","../src/DangerButton.vue","../src/Card.vue","../src/CardImage.vue","../src/CardBody.vue","../src/Selector.vue","../src/TextInput.vue","../src/CheckBoxInput.vue","../src/NumberInput.vue","../src/ImageInput.vue","../src/CardGrid.vue","../src/MobileNavigationLink.vue","../src/MobileNavigationLinks.vue","../src/NavigationLink.vue","../src/NavigationLinks.vue","../src/NavbarTitle.vue","../src/RightContent.vue","../src/MobileMenuButton.vue","../src/Navbar.vue"],"sourcesContent":["<template>\n  <h1 class=\"text-center text-6xl leading-relaxed\"> {{text}} </h1>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n<div>\n  <h1 class=\"text-center.text-1xl.leading-relaxed\"> Loading... </h1>\n  <div class=\"flex items-center justify-center space-x-2 animate-bounce\">\n    <div class=\"w-8 h-8 bg-blue-400 rounded-full\" />\n    <div class=\"w-8 h-8 bg-green-400 rounded-full\" />\n    <div class=\"w-8 h-8 bg-red-400 rounded-full\" />\n  </div>\n</div>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button type=\"reset\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button type=\"submit\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <div class=\"max-w-sm rounded overflow-hidden shadow-lg\">\n    <slot></slot>\n  </div>\n</template>\n","<template>\n  <img class=\"w-full\" :src=\"src\" :alt=\"alt\" ref=\"image\"/>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    src: String,\n    alt: String,\n  },\n  data: function () {\n    return {\n      imageWidth: 0,\n    }\n  },\n  methods: {\n    calculateWidth() {\n      return this.$refs.image.clientWidth\n    },\n  },\n  mounted: function () {\n    this.$emit('width', this.calculateWidth())\n  },\n}\n</script>\n","<template>\n  <div class=\"px-6 py-4\">\n    <div class=\"font-bold text-xl mb-2\">{{ title }}</div>\n    <p class=\"text-gray-700 text-base\">\n      <slot></slot>\n    </p>\n  </div>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    title: String,\n  },\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <div class=\"relative\">\n      <select\n        :id=\"id\"\n        v-model=\"selected\"\n        class=\"block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\n        @change=\"onChange\"\n      >\n        <option\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          :value=\"option.value\"\n          :disabled=\"option.disabled\"\n        >\n          {{ option.text }}\n        </option>\n      </select>\n      <div\n        class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\"\n      >\n        <svg\n          class=\"fill-current h-4 w-4\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path\n            d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    options: {\n      type: Array,\n    },\n  },\n  data() {\n    return {\n      selected: '',\n    }\n  },\n  methods: {\n    onChange() {\n      this.$emit('selected', this.selected)\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"text\"\n      @input=\"onInput\"\n      type=\"text\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    text: {\n      type: String,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <input\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :value=\"checked\"\n      @input=\"onInput\"\n      type=\"checkbox\"\n      unchecked-value=\"false\"\n    />\n      <label class=\"block text-gray-700 text-sm font-bold\" :for=\"id\">\n        {{ label }}\n      </label>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    checked: {\n      type: Boolean,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"amount\"\n      :min=\"min\"\n      :step=\"step\"\n      @input=\"onInput\"\n      type=\"number\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    amount: {\n      type: Number,\n    },\n    min: {\n      type: String,\n    },\n    step: {\n      type: String,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"file\"\n      :drop-placeholder=\"dropPlaceholder\"\n      @input=\"onInput\"\n      type=\"file\"\n      accept=\"image/*\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    dropPlaceholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    file: {\n      type: Object,\n    }\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.files[0])\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"flex flex-wrap\">\n    <slot></slot>\n  </div>\n</template>\n","<template>\n  <a :href=\"href\" :class=\"linkClass\" aria-current=\"page\">\n    {{ text }}\n  </a>\n</template>\n<script>\nexport default {\n  props: {\n    text: {\n      type: String,\n    },\n    href: {\n      type: String,\n    },\n    current: {\n      type: Boolean,\n    },\n  },\n  computed: {\n    linkClass: function () {\n      if (this.current) {\n        return 'bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium'\n      }\n      return 'text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium'\n    },\n  },\n}\n</script>\n","<template>\n  <div id=\"mobile-menu\" class=\"sm:hidden\">\n    <div class=\"px-2 pt-2 pb-3 space-y-1\">\n      <mobile-navigation-link\n        v-for=\"link in links\"\n        :key=\"link.id\"\n        :href=\"link.href\"\n        :text=\"link.text\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport MobileNavigationLink from './MobileNavigationLink.vue'\n\nexport default {\n  components: {\n    MobileNavigationLink: MobileNavigationLink,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n  },\n}\n</script>\n","<template>\n  <a :href=\"href\" :class=\"linkClass\" aria-current=\"page\">\n    {{ text }}\n  </a>\n</template>\n<script>\nexport default {\n  props: {\n    text: {\n      type: String,\n    },\n    href: {\n      type: String,\n    },\n    current: {\n      type: Boolean,\n    },\n  },\n  computed: {\n    linkClass: function () {\n      if (this.current) {\n        return 'bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium'\n      }\n      return 'text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium'\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"hidden sm:block sm:ml-6\">\n    <div class=\"flex space-x-4\">\n      <navigation-link\n        v-for=\"link in links\"\n        :key=\"link.id\"\n        :href=\"link.href\"\n        :text=\"link.text\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport NavigationLink from './NavigationLink.vue'\n\nexport default {\n  components: {\n    NavigationLink: NavigationLink,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"flex-shrink-0 flex items-center\">\n    <img\n      class=\"block lg:hidden h-8 w-auto\"\n      src=\"https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg\"\n      alt=\"Workflow\"\n    />\n    <img\n      class=\"hidden lg:block h-8 w-auto\"\n      src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\"\n      alt=\"Workflow\"\n    />\n  </div>\n</template>\n","<template>\n  <div\n    class=\"absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0\"\n  >\n    <span class=\"bg-gray-800 p-1 text-gray-400\"> {{ $i18n.locale }}</span>\n    <span class=\"bg-gray-800 p-1 text-gray-400\"> {{ currentUserEmail }} </span>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    locale: {\n      type: String,\n    },\n    currentUserEmail: {\n      type: String,\n    },\n  },\n}\n</script>\n","<template>\n  <button\n    type=\"button\"\n    class=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\"\n    aria-controls=\"mobile-menu\"\n    aria-expanded=\"false\"\n  >\n    <span class=\"sr-only\">Open main menu</span>\n    <!--\n  Icon when menu is closed.\n\n  Heroicon name: outline/menu\n\n  Menu open: \"hidden\", Menu closed: \"block\"\n-->\n    <svg\n      class=\"block h-6 w-6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M4 6h16M4 12h16M4 18h16\"\n      />\n    </svg>\n    <!--\n  Icon when menu is open.\n\n  Heroicon name: outline/x\n\n  Menu open: \"block\", Menu closed: \"hidden\"\n-->\n    <svg\n      class=\"hidden h-6 w-6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M6 18L18 6M6 6l12 12\"\n      />\n    </svg>\n  </button>\n</template>\n","<template>\n  <nav class=\"bg-gray-800\">\n    <div class=\"max-w-7xl mx-auto px-2 sm:px-6 lg:px-8\">\n      <div class=\"relative flex items-center justify-between h-16\">\n        <div class=\"absolute inset-y-0 left-0 flex items-center sm:hidden\">\n          <mobile-menu-button />\n        </div>\n        <div\n          class=\"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start\"\n        >\n          <navbar-title />\n          <navigation-links :links=\"links\" />\n        </div>\n        <right-content\n          :locale=\"locale\"\n          :current-user-email=\"currentUserEmail\"\n        />\n      </div>\n    </div>\n    <mobile-navigation-links :links=\"links\" />\n  </nav>\n</template>\n<script>\nimport MobileNavigationLinks from './MobileNavigationLinks.vue'\nimport NavigationLinks from './NavigationLinks.vue'\nimport NavbarTitle from './NavbarTitle.vue'\nimport RightContent from './RightContent.vue'\nimport MobileMenuButton from './MobileMenuButton.vue'\n\nexport default {\n  components: {\n    NavbarTitle: NavbarTitle,\n    NavigationLinks: NavigationLinks,\n    MobileNavigationLinks: MobileNavigationLinks,\n    RightContent: RightContent,\n    MobileMenuButton: MobileMenuButton,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n    locale: {\n      type: String,\n    },\n    currentUserEmail: {\n      type: String,\n    },\n  },\n}\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/SectionTitle.vue","../src/Loading.vue","../src/ResetButton.vue","../src/SubmitButton.vue","../src/RegularButton.vue","../src/SecondaryButton.vue","../src/DangerButton.vue","../src/Card.vue","../src/CardImage.vue","../src/CardBody.vue","../src/Selector.vue","../src/TextInput.vue","../src/CheckBoxInput.vue","../src/NumberInput.vue","../src/ImageInput.vue","../src/CardGrid.vue","../src/MobileNavigationLink.vue","../src/MobileNavigationLinks.vue","../src/NavigationLink.vue","../src/NavigationLinks.vue","../src/NavbarTitle.vue","../src/RightContent.vue","../src/MobileMenuButton.vue","../src/Navbar.vue"],"sourcesContent":["<template>\n  <h1 class=\"text-center text-6xl leading-relaxed\"> {{text}} </h1>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n<div>\n  <h1 class=\"text-center.text-1xl.leading-relaxed\"> Loading... </h1>\n  <div class=\"flex items-center justify-center space-x-2 animate-bounce\">\n    <div class=\"w-8 h-8 bg-blue-400 rounded-full\" />\n    <div class=\"w-8 h-8 bg-green-400 rounded-full\" />\n    <div class=\"w-8 h-8 bg-red-400 rounded-full\" />\n  </div>\n</div>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button type=\"reset\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button type=\"submit\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <button v-on:click=\"onClick\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded\"> {{text}} </button>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    text: String,\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <div class=\"max-w-sm rounded overflow-hidden shadow-lg\">\n    <slot></slot>\n  </div>\n</template>\n","<template>\n  <img class=\"w-full\" :src=\"src\" :alt=\"alt\" ref=\"image\"/>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    src: String,\n    alt: String,\n  },\n  data: function () {\n    return {\n      imageWidth: 0,\n    }\n  },\n  methods: {\n    calculateWidth() {\n      return this.$refs.image.clientWidth\n    },\n  },\n  mounted: function () {\n    this.$emit('width', this.calculateWidth())\n  },\n}\n</script>\n","<template>\n  <div class=\"px-6 py-4\">\n    <div class=\"font-bold text-xl mb-2\">{{ title }}</div>\n    <p class=\"text-gray-700 text-base\">\n      <slot></slot>\n    </p>\n  </div>\n</template>\n\n<script lang=\"js\">\nexport default {\n  props: {\n    title: String,\n  },\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <div class=\"relative\">\n      <select\n        :id=\"id\"\n        v-model=\"selected\"\n        class=\"block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\n        @change=\"onChange\"\n      >\n        <option\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          :value=\"option.value\"\n          :disabled=\"option.disabled\"\n        >\n          {{ option.text }}\n        </option>\n      </select>\n      <div\n        class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\"\n      >\n        <svg\n          class=\"fill-current h-4 w-4\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path\n            d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    options: {\n      type: Array,\n    },\n  },\n  data() {\n    return {\n      selected: '',\n    }\n  },\n  methods: {\n    onChange() {\n      this.$emit('selected', this.selected)\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"text\"\n      @input=\"onInput\"\n      type=\"text\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    text: {\n      type: String,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <input\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :value=\"checked\"\n      @input=\"onInput\"\n      type=\"checkbox\"\n      unchecked-value=\"false\"\n    />\n      <label class=\"block text-gray-700 text-sm font-bold\" :for=\"id\">\n        {{ label }}\n      </label>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    checked: {\n      type: Boolean,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"amount\"\n      :min=\"min\"\n      :step=\"step\"\n      @input=\"onInput\"\n      type=\"number\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    amount: {\n      type: Number,\n    },\n    min: {\n      type: String,\n    },\n    step: {\n      type: String,\n    },\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.value)\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"mb-4\">\n    <label class=\"block text-gray-700 text-sm font-bold mb-2\" :for=\"id\">\n      {{ label }}\n    </label>\n    <input\n      class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\n      :id=\"id\"\n      :name=\"id\"\n      :required=\"required\"\n      :placeholder=\"placeholder\"\n      :value=\"file\"\n      :drop-placeholder=\"dropPlaceholder\"\n      @input=\"onInput\"\n      type=\"file\"\n      accept=\"image/*\"\n    />\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    id: {\n      type: String,\n    },\n    required: {\n      type: Boolean,\n    },\n    placeholder: {\n      type: String,\n    },\n    dropPlaceholder: {\n      type: String,\n    },\n    label: {\n      type: String,\n    },\n    file: {\n      type: Object,\n    }\n  },\n  methods: {\n    onInput(event) {\n      this.$emit('update', event.target.files[0])\n    },\n  },\n\n}\n</script>\n","<template>\n  <div class=\"flex flex-wrap\">\n    <slot></slot>\n  </div>\n</template>\n","<template>\n  <a :href=\"href\" :class=\"linkClass\" aria-current=\"page\">\n    {{ text }}\n  </a>\n</template>\n<script>\nexport default {\n  props: {\n    text: {\n      type: String,\n    },\n    href: {\n      type: String,\n    },\n    current: {\n      type: Boolean,\n    },\n  },\n  computed: {\n    linkClass: function () {\n      if (this.current) {\n        return 'bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium'\n      }\n      return 'text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium'\n    },\n  },\n}\n</script>\n","<template>\n  <transition\n    enter-active-class=\"transition-all\"\n    leave-active-class=\"transition-all\"\n    enter-class=\"opacity-0 scale-70\"\n    enter-to-class=\"opacity-100 scale-100\"\n    leave-class=\"opacity-100 scale-100\"\n    leave-to-class=\"opacity-0 scale-70\"\n  >\n    <div id=\"mobile-menu\" class=\"sm:hidden\" v-if=\"open\">\n      <div class=\"px-2 pt-2 pb-3 space-y-1\">\n        <mobile-navigation-link\n          v-for=\"link in links\"\n          :key=\"link.id\"\n          :href=\"link.href\"\n          :text=\"link.text\"\n        />\n      </div>\n    </div>\n  </transition>\n</template>\n<script>\nimport MobileNavigationLink from './MobileNavigationLink.vue'\n\nexport default {\n  components: {\n    MobileNavigationLink: MobileNavigationLink,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n    open: {\n      type: Boolean,\n      default: false,\n    },\n  },\n}\n</script>\n","<template>\n  <a :href=\"href\" :class=\"linkClass\" aria-current=\"page\">\n    {{ text }}\n  </a>\n</template>\n<script>\nexport default {\n  props: {\n    text: {\n      type: String,\n    },\n    href: {\n      type: String,\n    },\n    current: {\n      type: Boolean,\n    },\n  },\n  computed: {\n    linkClass: function () {\n      if (this.current) {\n        return 'bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium'\n      }\n      return 'text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium'\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"hidden sm:block sm:ml-6\">\n    <div class=\"flex space-x-4\">\n      <navigation-link\n        v-for=\"link in links\"\n        :key=\"link.id\"\n        :href=\"link.href\"\n        :text=\"link.text\"\n      />\n    </div>\n  </div>\n</template>\n<script>\nimport NavigationLink from './NavigationLink.vue'\n\nexport default {\n  components: {\n    NavigationLink: NavigationLink,\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n  },\n}\n</script>\n","<template>\n  <div class=\"flex-shrink-0 flex items-center\">\n    <img\n      class=\"block lg:hidden h-8 w-auto\"\n      src=\"https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg\"\n      alt=\"Workflow\"\n    />\n    <img\n      class=\"hidden lg:block h-8 w-auto\"\n      src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\"\n      alt=\"Workflow\"\n    />\n  </div>\n</template>\n","<template>\n  <div\n    class=\"absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0\"\n  >\n    <span class=\"bg-gray-800 p-1 text-gray-400\"> {{ $i18n.locale }}</span>\n    <span class=\"bg-gray-800 p-1 text-gray-400\"> {{ currentUserEmail }} </span>\n  </div>\n</template>\n<script>\nexport default {\n  props: {\n    locale: {\n      type: String,\n    },\n    currentUserEmail: {\n      type: String,\n    },\n  },\n}\n</script>\n","<template>\n  <button\n    type=\"button\"\n    class=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\"\n    v-on:click=\"onClick\"\n  >\n    <svg\n      class=\"block h-6 w-6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M4 6h16M4 12h16M4 18h16\"\n      />\n    </svg>\n  </button>\n</template>\n<script lang=\"js\">\nexport default {\n  props: {\n    open: {\n      type: Boolean,\n      default: false\n    },\n  },\n  methods: {\n    onClick(evt) {\n      this.$emit('click', evt)\n    }\n  }\n}\n</script>\n","<template>\n  <nav class=\"bg-gray-800\">\n    <div class=\"max-w-7xl mx-auto px-2 sm:px-6 lg:px-8\">\n      <div class=\"relative flex items-center justify-between h-16\">\n        <div class=\"absolute inset-y-0 left-0 flex items-center sm:hidden\">\n          <mobile-menu-button @click=\"onMobileMenuClick\" :open=\"mobileMenuOpen\"/>\n        </div>\n        <div\n          class=\"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start\"\n        >\n          <navbar-title />\n          <navigation-links :links=\"links\"/>\n        </div>\n        <right-content\n          :locale=\"locale\"\n          :current-user-email=\"currentUserEmail\"\n        />\n      </div>\n    </div>\n    <mobile-navigation-links :links=\"links\" :open=\"mobileMenuOpen\" />\n  </nav>\n</template>\n<script>\nimport MobileNavigationLinks from './MobileNavigationLinks.vue'\nimport NavigationLinks from './NavigationLinks.vue'\nimport NavbarTitle from './NavbarTitle.vue'\nimport RightContent from './RightContent.vue'\nimport MobileMenuButton from './MobileMenuButton.vue'\n\nexport default {\n  components: {\n    NavbarTitle: NavbarTitle,\n    NavigationLinks: NavigationLinks,\n    MobileNavigationLinks: MobileNavigationLinks,\n    RightContent: RightContent,\n    MobileMenuButton: MobileMenuButton,\n  },\n  data() {\n    return {\n      mobileMenuOpen: false,\n    }\n  },\n  props: {\n    links: {\n      type: Array,\n    },\n    locale: {\n      type: String,\n    },\n    currentUserEmail: {\n      type: String,\n    },\n  },\n  methods: {\n    onMobileMenuClick() {\n      this.mobileMenuOpen = !this.mobileMenuOpen\n    },\n  }\n}\n</script>\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namelivia/vue-components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "scripts": {

package/src/MobileMenuButton.vue

@@ -2,24 +2,14 @@
   <button
     type="button"
     class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-    aria-controls="mobile-menu"
-    aria-expanded="false"
+    v-on:click="onClick"
   >
-    <span class="sr-only">Open main menu</span>
-    <!--
-  Icon when menu is closed.
-
-  Heroicon name: outline/menu
-
-  Menu open: "hidden", Menu closed: "block"
--->
     <svg
       class="block h-6 w-6"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
-      aria-hidden="true"
     >
       <path
         stroke-linecap="round"
@@ -28,27 +18,20 @@
         d="M4 6h16M4 12h16M4 18h16"
       />
     </svg>
-    <!--
-  Icon when menu is open.
-
-  Heroicon name: outline/x
-
-  Menu open: "block", Menu closed: "hidden"
--->
-    <svg
-      class="hidden h-6 w-6"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M6 18L18 6M6 6l12 12"
-      />
-    </svg>
   </button>
 </template>
+<script lang="js">
+export default {
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+  },
+  methods: {
+    onClick(evt) {
+      this.$emit('click', evt)
+    }
+  }
+}
+</script>

package/src/MobileNavigationLinks.vue

@@ -1,14 +1,23 @@
 <template>
-  <div id="mobile-menu" class="sm:hidden">
-    <div class="px-2 pt-2 pb-3 space-y-1">
-      <mobile-navigation-link
-        v-for="link in links"
-        :key="link.id"
-        :href="link.href"
-        :text="link.text"
-      />
+  <transition
+    enter-active-class="transition-all"
+    leave-active-class="transition-all"
+    enter-class="opacity-0 scale-70"
+    enter-to-class="opacity-100 scale-100"
+    leave-class="opacity-100 scale-100"
+    leave-to-class="opacity-0 scale-70"
+  >
+    <div id="mobile-menu" class="sm:hidden" v-if="open">
+      <div class="px-2 pt-2 pb-3 space-y-1">
+        <mobile-navigation-link
+          v-for="link in links"
+          :key="link.id"
+          :href="link.href"
+          :text="link.text"
+        />
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 <script>
 import MobileNavigationLink from './MobileNavigationLink.vue'
@@ -21,6 +30,10 @@ export default {
     links: {
       type: Array,
     },
+    open: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>

package/src/Navbar.vue

@@ -3,13 +3,13 @@
     <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
       <div class="relative flex items-center justify-between h-16">
         <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
-          <mobile-menu-button />
+          <mobile-menu-button @click="onMobileMenuClick" :open="mobileMenuOpen"/>
         </div>
         <div
           class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"
         >
           <navbar-title />
-          <navigation-links :links="links" />
+          <navigation-links :links="links"/>
         </div>
         <right-content
           :locale="locale"
@@ -17,7 +17,7 @@
         />
       </div>
     </div>
-    <mobile-navigation-links :links="links" />
+    <mobile-navigation-links :links="links" :open="mobileMenuOpen" />
   </nav>
 </template>
 <script>
@@ -35,6 +35,11 @@ export default {
     RightContent: RightContent,
     MobileMenuButton: MobileMenuButton,
   },
+  data() {
+    return {
+      mobileMenuOpen: false,
+    }
+  },
   props: {
     links: {
       type: Array,
@@ -46,5 +51,10 @@ export default {
       type: String,
     },
   },
+  methods: {
+    onMobileMenuClick() {
+      this.mobileMenuOpen = !this.mobileMenuOpen
+    },
+  }
 }
 </script>