@politicalwatch/tipi-uikit 1.9.3 → 1.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@politicalwatch/tipi-uikit",
-  "version": "1.9.3",
+  "version": "1.9.5",
   "main": "src/components/index.js",
   "scripts": {
     "dev": "vite",

package/src/components/CSVDownload/CSVDownload.vue

@@ -58,9 +58,10 @@
 </template>
 
 <script setup>
+import { toRefs } from 'vue';
 import JsonExcel from 'vue-json-excel3';
 
-const { initiatives } = defineProps({
+const props = defineProps({
   initiatives: {
     type: Array,
     default: function () {
@@ -95,6 +96,7 @@ const { initiatives } = defineProps({
     default: 'c-button--compact',
   },
 });
+const { initiatives, csvItems, canDownloadCSV, csvFields, label, buttonClass } = toRefs(props);
 
 const emit = defineEmits(['loadCSVItems']);
 

package/src/components/Charts/WordsCloud/d3.wordscloud.vue

@@ -9,7 +9,7 @@ export default {
     this.chart = new d3wordscloud(
       this.$refs.chart,
       JSON.parse(JSON.stringify(this.datum)),
-      this.config,
+      this.config
     );
   },
 };

package/src/components/Charts/d3.chart.vue

@@ -9,71 +9,77 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onBeforeUnmount } from 'vue';
 import { saveSvgAsPng } from 'save-svg-as-png';
 
-export default {
-  name: 'D3Chart',
-  data() {
-    return {
-      chart: {},
-    };
+const chart = ref(null);
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  datum: {
+    type: Array,
+    required: true,
+    default: () => [],
   },
-  props: {
-    config: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
-    datum: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    source: {
-      type: String,
-      default: '',
-    },
-    height: {
-      type: Number,
-      default: 300,
-    },
-    download: {
-      type: String,
-    },
+  title: {
+    type: String,
+    default: '',
   },
-  methods: {
-    downloadSVG() {
-      const node = this.$refs.chart.getElementsByClassName('chart')[0];
-      saveSvgAsPng(node, 'chart.png', {
-        backgroundColor: '#FFF',
-      });
-    },
+  source: {
+    type: String,
+    default: '',
   },
-  watch: {
-    config: {
-      handler(val) {
-        this.chart.updateConfig(val);
-      },
-      deep: true,
-    },
-    datum(vals) {
-      this.chart.updateData([...vals]);
-    },
-    height(val) {
-      setTimeout(() => {
-        this.chart.resizeChart();
-      }, 10);
-    },
+  height: {
+    type: Number,
+    default: 300,
   },
-  beforeDestroy() {
-    this.chart.destroyChart();
+  download: {
+    type: String,
   },
+});
+
+const { config, datum, title, source, height, download } = toRefs(props);
+
+const downloadSVG = () => {
+  const node = chart.value.getElementsByClassName('chart')[0];
+  saveSvgAsPng(node, 'chart.png', {
+    backgroundColor: '#FFF',
+  });
 };
+
+watch(
+  () => config.value,
+  (val) => {
+    chart.value.updateConfig(val);
+  },
+  { deep: true }
+);
+
+watch(
+  () => datum.value,
+  (vals) => {
+    chart.value.updateData([...vals]);
+  },
+  { deep: true }
+);
+
+watch(
+  () => height.value,
+  (val) => {
+    setTimeout(() => {
+      chart.value.resizeChart();
+    }, 10);
+  }
+);
+
+onBeforeUnmount(() => {
+  chart.value.destroyChart();
+});
 </script>
 
 <style lang="scss">

package/src/components/CongressLink/CongressLink.vue

@@ -9,9 +9,11 @@
 </template>
 
 <script setup>
+import { toRefs } from 'vue';
 import TipiIcon from '../Icon/Icon.vue';
 
-const { url } = defineProps({
+const props = defineProps({
   url: { type: String },
 });
+const { url } = toRefs(props);
 </script>

package/src/components/Deputy/Deputy.vue

@@ -53,17 +53,18 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, toRefs } from 'vue';
 
 import TipiIcon from '../Icon/Icon.vue';
-import PartyLogo from '../PartyLogo/PartyLogo.vue';
 import PartyLogoIcon from '../PartyLogo/PartyLogoIcon.vue';
 
-const { deputy, parliamentaryGroup } = defineProps({
+const props = defineProps({
   deputy: Object,
   parliamentaryGroup: Object,
 });
 
+const { deputy, parliamentaryGroup } = toRefs(props);
+
 const isCollapsed = ref(true);
 
 const getCollapsedClass = () => {
@@ -83,7 +84,7 @@ const collapse = () => {
 };
 
 const addBirthdayClass = () => {
-  const date = new Date(deputy.birthdate);
+  const date = new Date(deputy.value.birthdate);
   const today = new Date();
   if (date.getDate() == today.getDate() && date.getMonth() == today.getMonth()) {
     return 'c-deputy__birthday';
@@ -91,14 +92,14 @@ const addBirthdayClass = () => {
 };
 
 const getAge = () => {
-  const date = new Date(deputy.birthdate);
+  const date = new Date(deputy.value.birthdate);
   const today = new Date();
   const age = today.getFullYear() - date.getFullYear();
   return age;
 };
 
 const getConstituency = () => {
-  return deputy.constituency;
+  return deputy.value.constituency;
 };
 </script>
 

package/src/components/Header/Header.vue

@@ -7,9 +7,13 @@
   </header>
 </template>
 
-<script>
-export default {
-  name: 'TipiHeader',
-  props: ['title', 'subtitle'],
-};
+<script setup>
+import { toRefs } from 'vue';
+
+const props = defineProps({
+  title: String,
+  subtitle: String,
+});
+
+const { title, subtitle } = toRefs(props);
 </script>

package/src/components/InitiativeCard/InitiativeCard.vue

@@ -52,34 +52,38 @@
 </template>
 
 <script setup>
+import { toRefs } from 'vue';
+
 import TipiIcon from '../Icon/Icon.vue';
 import TipiTopicPill from '../TopicPill/TopicPill.vue';
 import TipiInitiativeMeta from '../InitiativeMeta/InitiativeMeta.vue';
 
-const { initiative, topicsStyles, extendedLayout, metaDeputies, metaGroupsOthers, metaColors } =
-  defineProps({
-    initiative: Object,
-    topicsStyles: Object,
-    extendedLayout: Boolean,
-    metaDeputies: String,
-    metaGroupsOthers: String,
-    metaColors: { type: Object, default: undefined },
-  });
+const props = defineProps({
+  initiative: Object,
+  topicsStyles: Object,
+  extendedLayout: Boolean,
+  metaDeputies: String,
+  metaGroupsOthers: String,
+  metaColors: { type: Object, default: undefined },
+});
+
+const { initiative, extendedLayout, metaDeputies, metaGroupsOthers, metaColors } = toRefs(props);
+const { topicsStyles } = props;
 
-const getAuthors = (initiative) => {
-  return initiative.authors.length ? initiative.authors.join('<br/>') : '';
+const getAuthors = () => {
+  return initiative.value.authors.length ? initiative.value.authors.join('<br/>') : '';
 };
 
-const getTopics = (initiative) => {
-  return initiative['tagged'].reduce((topics, tagged) => {
+const getTopics = () => {
+  return initiative.value['tagged'].reduce((topics, tagged) => {
     return topics.concat(tagged['topics']);
   }, []);
 };
 
-const getDeputies = (initiative) => {
-  if (initiative.deputies.length == 0) return '';
+const getDeputies = () => {
+  if (initiative.value.deputies.length == 0) return '';
   let regex_id = /\[.*\]/;
-  return initiative.deputies
+  return initiative.value.deputies
     .map((d) => {
       var has_id = regex_id.exec(d);
       if (!has_id) return d;

package/src/components/InitiativeMeta/InitiativeMeta.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="c-initiative-meta">
-    <div
-      :class="`c-initiative-meta__status c-initiative-meta__status--${getColorByStatus(
-        initiative.status
-      )}`"
-    >
+    <div :class="`c-initiative-meta__status c-initiative-meta__status--${getColorByStatus()}`">
       <strong>
-        <tipi-icon :icon="getIcon(initiative)"></tipi-icon>
-        {{ getStateMessage(initiative) }}
+        <tipi-icon :icon="getIcon()"></tipi-icon>
+        {{ getStateMessage() }}
       </strong>
     </div>
   </div>
 </template>
 
 <script setup>
+import { toRefs } from 'vue';
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
 import { es } from 'date-fns/locale/es';
+
 import TipiIcon from '../Icon/Icon.vue';
 
-const { initiative, metaColors } = defineProps({
+const props = defineProps({
   initiative: Object,
   metaColors: {
     type: Object,
@@ -46,34 +44,36 @@ const { initiative, metaColors } = defineProps({
   },
 });
 
-const getColorByStatus = (status) => {
-  for (let color in metaColors) {
-    if (metaColors[color].indexOf(status) != -1) return color;
+const { initiative, metaColors } = toRefs(props);
+
+const getColorByStatus = () => {
+  for (let color in metaColors.value) {
+    if (metaColors.value[color].indexOf(initiative.value.status) != -1) return color;
   }
   return 'neutral';
 };
 
-const getIcon = (initiative) => {
-  const color = getColorByStatus(initiative['status']);
+const getIcon = () => {
+  const color = getColorByStatus();
   const map = { completed: 'success', neutral: 'clock', error: 'denied' };
   return map[color];
 };
 
-const getStateMessage = (initiative) => {
-  if (initiative['status'] == 'Desconocida') {
-    return `${initiative['status']}`;
+const getStateMessage = () => {
+  if (initiative.value['status'] == 'Desconocida') {
+    return `${initiative.value['status']}`;
   }
 
-  const color = getColorByStatus(initiative['status']);
-  let date = initiative['updated'];
+  const color = getColorByStatus();
+  let date = initiative.value['updated'];
   if (color == 'neutral') {
-    date = initiative['created'];
+    date = initiative.value['created'];
   }
 
   const formattedDate = formatDistanceToNow(new Date(date), {
     locale: es,
     addSuffix: true,
   }).replace('alrededor de ', '');
-  return `${initiative['status']} ${formattedDate}`;
+  return `${initiative.value['status']} ${formattedDate}`;
 };
 </script>

package/src/components/Message/Message.vue

@@ -8,9 +8,11 @@
 </template>
 
 <script setup>
+import { toRefs } from 'vue';
+
 import TipiIcon from '../Icon/Icon.vue';
 
-const { type, icon } = defineProps({
+const props = defineProps({
   type: {
     type: String,
     default: 'success',
@@ -20,4 +22,6 @@ const { type, icon } = defineProps({
   },
   icon: Boolean,
 });
+
+const { type, icon } = toRefs(props);
 </script>

package/src/components/Navbar/Navbar.vue

@@ -75,11 +75,11 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 
 import Icon from '../Icon/Icon.vue';
 
-const { links, disclaimerLink, preImage, logo } = defineProps({
+const props = defineProps({
   links: Array,
   disclaimerLink: {
     type: Object,
@@ -91,6 +91,8 @@ const { links, disclaimerLink, preImage, logo } = defineProps({
   logo: String,
 });
 
+const { links, disclaimerLink, preImage, logo } = toRefs(props);
+
 const closedMessage = ref(false);
 const menuVisible = ref(false);
 

package/src/components/Neuron/Neuron.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script setup>
-import { onMounted, watch } from 'vue';
+import { toRefs, onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { select } from 'd3-selection';
 import { easeBackOut } from 'd3-ease';
 import { transition } from 'd3-transition';
 
-const { initiative, topics, styles } = defineProps({
+const props = defineProps({
   initiative: Object,
   topics: Array,
   styles: {
@@ -19,6 +20,9 @@ const { initiative, topics, styles } = defineProps({
   },
 });
 
+const { initiative, topics, styles } = toRefs(props);
+const route = useRoute();
+
 const loadVizz = (topics, initiative, styles, color = { center: '#222' }) => {
   //Mapping ranges
   function map(x, in_min, in_max, out_min, out_max) {
@@ -186,15 +190,12 @@ const loadVizz = (topics, initiative, styles, color = { center: '#222' }) => {
 };
 
 onMounted(() => {
-  loadVizz(topics, initiative, styles);
+  loadVizz(topics.value, initiative.value, styles.value);
 });
 
-watch(
-  () => [topics, initiative],
-  ([topics, initiative, styles]) => {
-    loadVizz(topics, initiative, styles);
-  }
-);
+watch(route, () => {
+  loadVizz(topics.value, initiative.value, styles.value);
+});
 </script>
 
 <style lang="scss">

package/src/components/PartyLogo/PartyLogo.vue

@@ -7,7 +7,7 @@
 <script setup>
 import { ref, toRefs, watchEffect } from 'vue';
 const props = defineProps({
-  party: String,
+  party: { type: String },
 });
 const { party } = toRefs(props);
 

package/src/components/PartyLogo/PartyLogoIcon.vue

@@ -7,13 +7,15 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { toRefs, computed } from 'vue';
 import InlineSvg from 'vue-inline-svg';
 
-const { party } = defineProps({
-  party: String,
+const props = defineProps({
+  party: { type: String },
 });
 
+const { party } = toRefs(props);
+
 const parties = {
   Cs: {
     name: 'Ciudadanos',
@@ -185,8 +187,8 @@ const parties = {
 const svg = computed(() => {
   let svg = '';
   try {
-    if (party in parties) {
-      svg = `../../assets/party_logos/icon/${parties[party].logo}.svg`;
+    if (party.value in parties) {
+      svg = `../../assets/party_logos/icon/${parties[party.value].logo}.svg`;
     } else {
       svg = '../../assets/svg/icon-error.svg';
     }
@@ -197,7 +199,7 @@ const svg = computed(() => {
 });
 
 const getBackground = computed(() => {
-  const bg = parties[party]?.color ? parties[party].color : '#f4f6f8';
+  const bg = parties[party.value]?.color ? parties[party.value].color : '#f4f6f8';
   if (bg.length == 7) {
     return 'background-color:' + bg;
   }
@@ -205,7 +207,7 @@ const getBackground = computed(() => {
 });
 
 const getName = computed(() => {
-  return parties[party]?.name ? parties[party].name : '';
+  return parties[party.value]?.name ? parties[party.value].name : '';
 });
 </script>
 

package/src/components/Results/Results.vue

@@ -1,17 +1,14 @@
 <template>
   <div>
     <tipi-loader
-      v-if="this.loadingResults"
+      v-if="loadingResults"
       title="Cargando resultados"
       subtitle="Puede llevar algun tiempo"
     />
-    <section
-      class="o-masonry o-grid"
-      v-if="this.initiatives && this.initiatives.length && !this.loadingResults"
-    >
+    <section class="o-masonry o-grid" v-if="initiatives && initiatives.length && !loadingResults">
       <div
         class="o-grid__col u-12 u-4@sm o-masonry__item"
-        v-for="(initiative, index) in this.initiatives"
+        v-for="(initiative, index) in initiatives"
         :key="index"
       >
         <tipi-initiative-card
@@ -35,22 +32,13 @@
 </template>
 
 <script setup>
-import { computed, onMounted, watch } from 'vue';
+import { toRefs, computed, onMounted, watch } from 'vue';
 
 import TipiInitiativeCard from '../InitiativeCard/InitiativeCard.vue';
 import TipiLoader from '../Loader/Loader.vue';
 import Masonry from 'masonry-layout';
 
-const {
-  loadingResults,
-  initiatives,
-  queryMeta,
-  layout,
-  topicsStyles,
-  metaDeputies,
-  metaGroupsOthers,
-  metaColors,
-} = defineProps({
+const props = defineProps({
   loadingResults: Boolean,
   initiatives: {
     type: Array,
@@ -66,18 +54,29 @@ const {
   metaColors: { type: Object, default: undefined },
 });
 
+const {
+  loadingResults,
+  initiatives,
+  queryMeta,
+  layout,
+  metaDeputies,
+  metaGroupsOthers,
+  metaColors,
+} = toRefs(props);
+const { topicsStyles } = props;
+
 const isMoreResults = computed(() => {
-  return !loadingResults && queryMeta?.page < queryMeta?.pages;
+  return !loadingResults.value && queryMeta.value?.page < queryMeta.value?.pages;
 });
 
 const nextResultsLabel = computed(() => {
-  let nextResult = queryMeta?.page * queryMeta?.per_page + 1;
-  let lastResult = nextResult + queryMeta?.per_page - 1;
+  let nextResult = queryMeta.value?.page * queryMeta.value?.per_page + 1;
+  let lastResult = nextResult + queryMeta.value?.per_page - 1;
   return `(${nextResult}-${lastResult})`;
 });
 
 const extendedLayout = computed(() => {
-  return layout != 'tiny';
+  return layout.value != 'tiny';
 });
 
 const loadMore = () => {
@@ -106,7 +105,7 @@ onMounted(() => {
 });
 
 watch(initiatives, () => {
-  if (initiatives && initiatives.length && !loadingResults) {
+  if (initiatives.value && initiatives.value.length && !loadingResults.value) {
     setupMasonry();
   }
 });

package/src/components/Splash/Splash.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 
-const { closeClass, closeText } = defineProps({
+const props = defineProps({
   closeClass: {
     type: String,
     default: 'c-button c-button--primary',
@@ -26,6 +26,7 @@ const { closeClass, closeText } = defineProps({
     default: 'Comenzar',
   },
 });
+const { closeClass, closeText } = toRefs(props);
 
 const closedMessage = ref(false);