@wg-npm/survey-response 0.5.161 → 0.5.165

package/dist/survey-response.esm.js

@@ -1,10 +1,10 @@
 import Vue from 'vue';
 import _ from 'lodash';
-import { Row, Icon, FormItem, CheckboxGroup, Checkbox, Col, Input, RadioGroup, Radio, Tooltip, Card, Slider, InputNumber, Form } from 'view-design';
-import { showInput, formatTitle, translate } from '@wg-npm/survey-core';
+import { Row, Input, Icon, FormItem, CheckboxGroup, Checkbox, Col, RadioGroup, Radio, Tooltip, Card, Slider, InputNumber, Form } from 'view-design';
+import { CUSTOM_INPUT_REG, formatTitle, translate } from '@wg-npm/survey-core';
 import deepmerge from 'deepmerge';
 
-var script$h = Vue.extend({
+var script$i = Vue.extend({
     name: "empty-question",
     components: {
         Row,
@@ -142,42 +142,42 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$h = script$h;
+const __vue_script__$i = script$i;
 var __vue_render__$h = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"fill-width mb20 no-data"},[_c('Row',[_c('img',{staticClass:"empty_box-copy",attrs:{"src":__$_require_images_empty_box_copy_svg__}})]),_vm._v(" "),_c('Row',[_c('span',{staticClass:"no-data-span"},[_vm._v(_vm._s(_vm.$t("survey_response.question.noQuestion")))])])],1)};
 var __vue_staticRenderFns__$h = [];
 
   /* style */
-  const __vue_inject_styles__$h = function (inject) {
+  const __vue_inject_styles__$i = function (inject) {
     if (!inject) return
     inject("data-v-9b95ccca_0", { source: ".fill-width[data-v-9b95ccca]{width:100%;text-align:center}.no-data span[data-v-9b95ccca]{text-align:center;color:rgba(0,0,0,.65)}.no-data .no-data-span[data-v-9b95ccca]{font-size:24px}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$h = "data-v-9b95ccca";
+  const __vue_scope_id__$i = "data-v-9b95ccca";
   /* module identifier */
-  const __vue_module_identifier__$h = undefined;
+  const __vue_module_identifier__$i = undefined;
   /* functional template */
-  const __vue_is_functional_template__$h = false;
+  const __vue_is_functional_template__$i = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$h = /*#__PURE__*/normalizeComponent(
+  const __vue_component__$i = /*#__PURE__*/normalizeComponent(
     { render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
-    __vue_inject_styles__$h,
-    __vue_script__$h,
-    __vue_scope_id__$h,
-    __vue_is_functional_template__$h,
-    __vue_module_identifier__$h,
+    __vue_inject_styles__$i,
+    __vue_script__$i,
+    __vue_scope_id__$i,
+    __vue_is_functional_template__$i,
+    __vue_module_identifier__$i,
     false,
     createInjector,
     undefined,
     undefined
   );
 
-  var EmptyQuestion = __vue_component__$h;
+  var EmptyQuestion = __vue_component__$i;
 
 var OptionLayoutMixin = Vue.extend({
     props: {
@@ -202,6 +202,84 @@ var OptionLayoutMixin = Vue.extend({
     },
 });
 
+var script$h = Vue.component("question-title-dynamic", {
+    components: { Input },
+    props: {
+        splitedTitles: {
+            type: Array,
+            required: true,
+        },
+        customFilledTitle: {
+            type: Array,
+            required: false,
+        },
+    },
+    render(createElement) {
+        let childArr = [];
+        const self = this;
+        console.log(typeof Input);
+        _.forEach(this.splitedTitles, (title, index) => {
+            if (CUSTOM_INPUT_REG.test(title)) {
+                let corespondTitle = _.find(self.customFilledTitle, (title) => {
+                    return title.index === index;
+                });
+                childArr.push(createElement(Input, {
+                    domProps: {
+                        value: corespondTitle.title
+                    },
+                    on: {
+                        input: function (value) {
+                            corespondTitle.title = value;
+                        }
+                    }
+                }));
+            }
+            else {
+                childArr.push(title);
+            }
+        });
+        return createElement("div", { class: "content pl-sm" }, childArr);
+    }
+});
+
+/* script */
+const __vue_script__$h = script$h;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__$h = function (inject) {
+    if (!inject) return
+    inject("data-v-000dd3ab_0", { source: "[data-v-000dd3ab] .ivu-input-wrapper{width:auto}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$h = "data-v-000dd3ab";
+  /* module identifier */
+  const __vue_module_identifier__$h = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$h = undefined;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$h = /*#__PURE__*/normalizeComponent(
+    {},
+    __vue_inject_styles__$h,
+    __vue_script__$h,
+    __vue_scope_id__$h,
+    __vue_is_functional_template__$h,
+    __vue_module_identifier__$h,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+  var QuestionTitleDynamic = __vue_component__$h;
+
 var QuestionMixin = Vue.extend({
     props: {
         index: Number,
@@ -224,25 +302,25 @@ var QuestionMixin = Vue.extend({
 
 var script$g = Vue.extend({
     name: "question-title",
+    components: { Icon, QuestionTitleDynamic },
     mixins: [OptionLayoutMixin, QuestionMixin],
-    components: { Icon },
     inject: ["$rootComponent"],
     props: {
         index: {
             type: Number,
-            default: 0
+            default: 0,
         },
         question: {
             type: Object,
-            required: true
+            required: true,
         },
         language: {
-            type: String
+            type: String,
         },
         customQuestion: {
             type: Object,
-            required: false
-        }
+            required: false,
+        },
     },
     computed: {
         customFilledTitle() {
@@ -253,26 +331,20 @@ var script$g = Vue.extend({
         },
         isSingleSelection() {
             return this.question.type == "SINGLE_SELECTION";
-        }
+        },
     },
     methods: {
-        getShowInput(index, formatTitle) {
-            return showInput(index, formatTitle);
-        },
         getTitle(question) {
             return formatTitle(question, this.$rootComponent.currentLanguage);
-        }
-    }
+        },
+    },
 });
 
 /* script */
 const __vue_script__$g = script$g;
 
 /* template */
-var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"question-title",style:({'display':(_vm.isMobile()?'inline-block':'')})},[(_vm.question.type !== 'text_title')?_c('span',{staticClass:"pr-sm",style:({'display':(_vm.isMobile()?'inline-block':'')})},[(_vm.question.options.required)?_c('label',{staticClass:"require-label"},[_vm._v("*")]):_vm._e(),_vm._v(" "),(_vm.question.header.number)?_c('label',{staticClass:"number"},[_vm._v(_vm._s(_vm.question.header.number)+".")]):_vm._e()]):_vm._e(),_vm._v(" "),_vm._l((_vm.getTitle(_vm.question)),function(title,index){return _c('div',{key:index,staticClass:"flex",style:({'display':(_vm.isMobile()?'inline-block':'')})},[(title !== '')?_c('span',{staticClass:"content"},[_vm._v(_vm._s(title))]):_vm._e(),_vm._v(" "),_vm._l((_vm.customFilledTitle),function(customTitle){return _c('div',{key:index + customTitle.index},[(title === '' && index === customTitle.index)?_c('span',{staticClass:"content"},[_vm._v(_vm._s(customTitle.title))]):_c('div',[(
-            _vm.getShowInput(index, _vm.getTitle(_vm.question)) &&
-            index === customTitle.index
-          )?_c('span',{staticClass:"content"},[_vm._v(_vm._s(customTitle.title))]):_vm._e()])])})],2)}),_vm._v(" "),(_vm.haveStar)?_c('span',{staticClass:"options-explain",style:({'display':(_vm.isMobile()?'block':'')})},[(_vm.isSingleSelection)?_c('span',[_vm._v("\n      ("+_vm._s(_vm.t(
+var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"question-title"},[(_vm.question.type !== 'text_title')?_c('span',{staticClass:"pr-sm"},[(_vm.question.options.required)?_c('label',{staticClass:"require-label"},[_vm._v("*")]):_vm._e(),_vm._v(" "),(_vm.question.header.number)?_c('label',{staticClass:"number"},[_vm._v(_vm._s(_vm.question.header.number)+".")]):_vm._e()]):_vm._e(),_vm._v(" "),(_vm.question)?_c('question-title-dynamic',{attrs:{"splitedTitles":_vm.getTitle(_vm.question),"customFilledTitle":_vm.customFilledTitle}}):_vm._e(),_vm._v(" "),(_vm.haveStar)?_c('span',{staticClass:"options-explain",style:({'display':(_vm.isMobile()?'block':'')})},[(_vm.isSingleSelection)?_c('span',[_vm._v("\n      ("+_vm._s(_vm.t(
           "survey_creator.question.star_single",
           _vm.$rootComponent.currentLanguage
         ))+"\n      "),_c('span',[_c('Icon',{attrs:{"type":"md-star","color":"orange","size":16}})],1),_vm._v(")\n    ")]):_c('span',[_vm._v("\n      (\n      "+_vm._s(_vm.t(
@@ -284,17 +356,17 @@ var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _
         ))+"\n      "+_vm._s(_vm.question.options.starMinCount)+"\n      "+_vm._s(_vm.t(
           "survey_creator.question.star_multi_suffix",
           _vm.$rootComponent.currentLanguage
-        ))+"\n      )\n    ")],1)]):_vm._e()],2)};
+        ))+"\n      )\n    ")],1)]):_vm._e()],1)};
 var __vue_staticRenderFns__$g = [];
 
   /* style */
   const __vue_inject_styles__$g = function (inject) {
     if (!inject) return
-    inject("data-v-67dae2e1_0", { source: ".flex[data-v-67dae2e1]{display:flex;align-items:center;white-space:nowrap}.pr-sm[data-v-67dae2e1]{padding-right:4px}", map: undefined, media: undefined });
+    inject("data-v-4b2b8b7e_0", { source: ".flex[data-v-4b2b8b7e]{display:flex;align-items:center;white-space:nowrap}.pr-sm[data-v-4b2b8b7e]{padding-right:4px}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$g = "data-v-67dae2e1";
+  const __vue_scope_id__$g = "data-v-4b2b8b7e";
   /* module identifier */
   const __vue_module_identifier__$g = undefined;
   /* functional template */
@@ -1133,113 +1205,96 @@ var __vue_staticRenderFns__$9 = [];
 
   var Star = __vue_component__$9;
 
-class ExprEvaluationQuestion {
-  questions;
-  scope;
-  questionMap;
-
-  constructor(questions, scope) {
-    this.questions = questions;
-    this.scope = _.sortBy(scope);
-
-    this.questionMap = this.buildQuestionMap();
-  }
-
-  calculateNumbers() {
-    const checkedQuestions = this.checkedQuestion();
-    const checkedNumberElements = new Array();
-    this.recurs(checkedQuestions, checkedNumberElements);
-
-    return checkedNumberElements;
-  }
-
-  buildQuestionMap() {
-    const questionMap = {};
-    _.forEach(this.questions, (question) => {
-      questionMap[question.id] = question;
-      if (question.type == "MATRIX") {
-        _.forEach(_.get(question, "subQuestions", []), (subQuestion) => {
-          questionMap[subQuestion.id] = subQuestion;
-        });
-      }
-    });
-    return questionMap;
-  }
-
-  checkedQuestion() {
-    const questions = new Array();
-    _.forEach(this.questions, (question) => {
-      if (_.get(question, "type") == "MATRIX") {
-        const markedQuestions = new Array();
-        _.forEach(_.get(question, "subQuestions", []), (subQuestion) => {
-          if (_.includes(this.scope, subQuestion.id)) {
-            const newSubQuestion = _.cloneDeep(subQuestion);
-            _.set(newSubQuestion, "type", "MATRIX");
-            _.set(newSubQuestion, "parentId", _.get(question, "id"));
-            markedQuestions.push(newSubQuestion);
-          }
-        });
-        if (!_.isEmpty(markedQuestions)) {
-          questions.push(markedQuestions);
-        }
-      } else if (_.includes(this.scope, question.id)) {
-        questions.push(question);
-      }
-    });
-    return questions;
-  }
-
-  recurs(elements, numbers) {
-    for (let i = 0; i < elements.length; i++) {
-      const element = elements[i];
-      if (_.isArray(element)) {
-        numbers.push(new Array());
-        this.recurs(element, numbers[numbers.length - 1]);
-      } else {
-        const temp = new Array();
-        temp.push(this.getFullNumber(element));
-        if (i == elements.length - 1) {
-          numbers.push(temp);
-          continue;
-        }
-        for (let j = i + 1; ; j++) {
-          if (
-            j == elements.length ||
-            !this.isContinuous(elements[j - 1], elements[j])
-          ) {
-            numbers.push(temp);
-            i = j - 1;
-            break;
-          }
-          if (_.size(temp) > 1) {
-            temp.pop();
-          }
-          temp.push(this.getFullNumber(elements[j]));
-        }
-      }
-    }
-  }
-
-  isContinuous(front, hind) {
-    return (
-      !_.isArray(hind) && this.getNumber(hind) - this.getNumber(front) == 1
-    );
-  }
-
-  getFullNumber(question) {
-    if (question.type == "MATRIX") {
-      return (
-        this.questionMap[question.parentId].header.number +
-        "." +
-        this.getNumber(question)
-      );
-    }
-    return this.getNumber(question).toString();
-  }
-
-  getNumber(question) {
-    return question.type == "MATRIX" ? question.number : question.header.number;
-  }
+class ExprEvaluationQuestion {
+    constructor(questions, scope) {
+        this.questions = questions;
+        this.scope = _.sortBy(scope);
+        this.questionMap = this.buildQuestionMap();
+    }
+    calculateNumbers() {
+        const checkedQuestions = this.checkedQuestion();
+        const checkedNumberElements = new Array();
+        this.recurs(checkedQuestions, checkedNumberElements);
+        return checkedNumberElements;
+    }
+    buildQuestionMap() {
+        const questionMap = {};
+        _.forEach(this.questions, (question) => {
+            questionMap[question.id] = question;
+            if (question.type == "MATRIX") {
+                _.forEach(_.get(question, "subQuestions", []), (subQuestion) => {
+                    questionMap[subQuestion.id] = subQuestion;
+                });
+            }
+        });
+        return questionMap;
+    }
+    checkedQuestion() {
+        const questions = new Array();
+        _.forEach(this.questions, (question) => {
+            if (_.get(question, "type") == "MATRIX") {
+                const markedQuestions = new Array();
+                _.forEach(_.get(question, "subQuestions", []), (subQuestion) => {
+                    if (_.includes(this.scope, subQuestion.id)) {
+                        const newSubQuestion = _.cloneDeep(subQuestion);
+                        _.set(newSubQuestion, "type", "MATRIX");
+                        _.set(newSubQuestion, "parentId", _.get(question, "id"));
+                        markedQuestions.push(newSubQuestion);
+                    }
+                });
+                if (!_.isEmpty(markedQuestions)) {
+                    questions.push(markedQuestions);
+                }
+            }
+            else if (_.includes(this.scope, question.id)) {
+                questions.push(question);
+            }
+        });
+        return questions;
+    }
+    recurs(elements, numbers) {
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            if (_.isArray(element)) {
+                numbers.push(new Array());
+                this.recurs(element, numbers[numbers.length - 1]);
+            }
+            else {
+                const temp = new Array();
+                temp.push(this.getFullNumber(element));
+                if (i == elements.length - 1) {
+                    numbers.push(temp);
+                    continue;
+                }
+                for (let j = i + 1;; j++) {
+                    if (j == elements.length ||
+                        !this.isContinuous(elements[j - 1], elements[j])) {
+                        numbers.push(temp);
+                        i = j - 1;
+                        break;
+                    }
+                    if (_.size(temp) > 1) {
+                        temp.pop();
+                    }
+                    temp.push(this.getFullNumber(elements[j]));
+                }
+            }
+        }
+    }
+    isContinuous(front, hind) {
+        return (!_.isArray(hind) && this.getNumber(hind) - this.getNumber(front) == 1);
+    }
+    getFullNumber(question) {
+        if (question.type == "MATRIX") {
+            return (this.questionMap[question.parentId].header.number +
+                "." +
+                this.getNumber(question));
+        }
+        return this.getNumber(question).toString();
+    }
+    getNumber(question) {
+        return question.type == "MATRIX" ? question.number : question.header.number;
+    }
 }
 
 const SPLIT_LENGTH = 50;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wg-npm/survey-response",
-  "version": "0.5.161",
+  "version": "0.5.165",
   "description": "",
   "license": "MIT",
   "scripts": {
@@ -12,8 +12,8 @@
     "lint-fix": "eslint \"**/*.ts\"  \"**/*.vue\" --fix --no-error-on-unmatched-pattern"
   },
   "peerDependencies": {
-    "@wg-npm/survey-core": "0.5.161",
-    "@wg-npm/survey-service-api": "0.5.161",
+    "@wg-npm/survey-core": "0.5.165",
+    "@wg-npm/survey-service-api": "0.5.165",
     "axios": "^0.19.2",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.15",
@@ -34,8 +34,8 @@
     "@typescript-eslint/parser": "^3.6.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@wg-npm/survey-core": "0.5.161",
-    "@wg-npm/survey-service-api": "0.5.161",
+    "@wg-npm/survey-core": "0.5.165",
+    "@wg-npm/survey-service-api": "0.5.165",
     "acorn": "^7.3.1",
     "axios": "^0.19.2",
     "babelrc-rollup": "^3.0.0",

package/src/components/question/question-title-dynamic.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+import Vue, { CreateElement } from "vue";
+import { Input } from "view-design";
+import _ from "lodash";
+import { CUSTOM_INPUT_REG } from "@wg-npm/survey-core";
+import {Component} from "vue/types/options";
+
+export default Vue.component("question-title-dynamic", {
+  components: { Input },
+  props: {
+    splitedTitles: {
+      type: Array,
+      required: true,
+    },
+    customFilledTitle: {
+      type: Array,
+      required: false,
+    },
+  },
+  render(createElement: CreateElement) {
+
+    let childArr: Array<any> = [];
+    const self = this;
+
+    console.log(typeof Input);
+
+    _.forEach(this.splitedTitles, (title: string, index: number) => {
+
+      if(CUSTOM_INPUT_REG.test(title)) {
+        let corespondTitle = _.find(self.customFilledTitle, (title) => {
+          return title.index === index;
+        });
+        childArr.push(createElement(Input as Component, {
+          domProps: {
+            value: corespondTitle.title
+          },
+          on: {
+            input: function (value) {
+              corespondTitle.title = value;
+            }
+          }
+        }));
+      } else {
+        childArr.push(title);
+      }
+    });
+    return createElement("div", { class: "content pl-sm"}, childArr);
+  }
+});
+</script>
+
+<style scoped lang="less">
+/deep/ .ivu-input-wrapper {
+  width: auto;
+}
+</style>

package/src/components/question/question-title.vue

@@ -1,37 +1,12 @@
 <template>
-  <div class="question-title" :style="{'display':(isMobile()?'inline-block':'')}">
-    <span v-if="question.type !== 'text_title'" class="pr-sm" :style="{'display':(isMobile()?'inline-block':'')}">
+  <div class="question-title">
+    <span v-if="question.type !== 'text_title'" class="pr-sm">
       <label v-if="question.options.required" class="require-label">*</label>
       <label v-if="question.header.number" class="number"
-      >{{ question.header.number }}.</label
+        >{{ question.header.number }}.</label
       >
     </span>
-
-    <div class="flex" v-for="(title, index) in getTitle(question)" :key="index" :style="{'display':(isMobile()?'inline-block':'')}">
-      <span v-if="title !== ''" class="content">{{ title }}</span>
-      <div
-        v-for="customTitle in customFilledTitle"
-        :key="index + customTitle.index"
-      >
-        <span
-          class="content"
-          v-if="title === '' && index === customTitle.index"
-        >{{ customTitle.title }}</span
-        >
-
-        <div v-else>
-          <span
-            class="content"
-            v-if="
-              getShowInput(index, getTitle(question)) &&
-              index === customTitle.index
-            "
-          >{{ customTitle.title }}</span
-          >
-        </div>
-      </div>
-    </div>
-
+    <question-title-dynamic v-if="question" :splitedTitles="getTitle(question)" :customFilledTitle="customFilledTitle"></question-title-dynamic>
     <span class="options-explain" v-if="haveStar" :style="{'display':(isMobile()?'block':'')}">
       <span v-if="isSingleSelection">
         ({{
@@ -70,69 +45,64 @@
   </div>
 </template>
 <script lang="ts">
-  import Vue from "vue";
-  import OptionLayoutMixin from "../../mixins/option-layout-mixin";
-  import { Icon } from "view-design";
-  import {
-    BaseQuestionModel,
-    formatTitle,
-    QuestionType,
-    showInput
-  } from "@wg-npm/survey-core";
-  import QuestionMixin from "../../mixins/question-mixin";
+import Vue from "vue";
+import { Icon } from "view-design";
+import {
+  formatTitle,
+  QuestionType,
+} from "@wg-npm/survey-core";
+import OptionLayoutMixin from "../../mixins/option-layout-mixin";
+import QuestionTitleDynamic from "./question-title-dynamic.vue";
+import QuestionMixin from "../../mixins/question-mixin";
 
-  export default Vue.extend({
-    name: "question-title",
-    mixins: [OptionLayoutMixin, QuestionMixin],
-    components: { Icon },
-    inject: ["$rootComponent"],
-    props: {
-      index: {
-        type: Number,
-        default: 0
-      },
-      question: {
-        type: Object,
-        required: true
-      },
-      language: {
-        type: String
-      },
-      customQuestion: {
-        type: Object,
-        required: false
-      }
+export default Vue.extend({
+  name: "question-title",
+  components: { Icon, QuestionTitleDynamic },
+  mixins: [OptionLayoutMixin, QuestionMixin],
+  inject: ["$rootComponent"],
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+    question: {
+      type: Object,
+      required: true,
+    },
+    language: {
+      type: String,
     },
-    computed: {
-      customFilledTitle() {
-        return this.customQuestion?.filledTitle;
-      },
-      haveStar() {
-        return this.question?.options?.starEnabled ?? false;
-      },
-      isSingleSelection() {
-        return this.question.type == QuestionType.SINGLE_SELECTION;
-      }
+    customQuestion: {
+      type: Object,
+      required: false,
     },
-    methods: {
-      getShowInput(index, formatTitle) {
-        return showInput(index, formatTitle);
-      },
-      getTitle(question) {
-        return formatTitle(question, this.$rootComponent.currentLanguage);
-      }
-    }
-  });
+  },
+  computed: {
+    customFilledTitle() {
+      return this.customQuestion?.filledTitle;
+    },
+    haveStar() {
+      return this.question?.options?.starEnabled ?? false;
+    },
+    isSingleSelection() {
+      return this.question.type == QuestionType.SINGLE_SELECTION;
+    },
+  },
+  methods: {
+    getTitle(question) {
+      return formatTitle(question, this.$rootComponent.currentLanguage);
+    },
+  },
+});
 </script>
 
 <style lang="less" scoped>
-  .flex {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-  }
-
-  .pr-sm {
-    padding-right: 4px;
-  }
+.flex {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.pr-sm {
+  padding-right: 4px;
+}
 </style>