0.1.0 • Published 3 years ago

cms-lib-test v0.1.0

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

CMS-VUE-LIB

Установка

$ git clone https://github.com/marketing-technologies/cms-vue-lib.git
$ cd cms-vue-lib
$ npm i
$ npm run build

Инициализация

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue minesweeper</title>
    <link rel="stylesheet" href="public/font/bootstrap-icons.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="dist/cms-lib-test.css" />
  </head>
  <body>
    <div id="app">
      <button
        @click="reviewModalVisibly = true"
        type="button"
        class="btn btn-success"
      >
        Оставить отзыв
      </button>
      <button
        @click="recordModalVisibly = true"
        type="button"
        class="btn btn-primary"
      >
        Записаться
      </button>
      <button
        @click="questionModalVisibly = true"
        type="button"
        class="btn btn-success"
      >
        Задать вопрос
      </button>
      <review-dialog v-model="reviewModalVisibly"></review-dialog>
      <record-dialog v-model="recordModalVisibly"></record-dialog>
      <question-dialog v-model="questionModalVisibly"></question-dialog>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="dist/cms-lib-test.umd.min.js"></script>
    <script>
      var app = new Vue({
        data() {
          return {
            recordModalVisibly: false,
            questionModalVisibly: false,
            reviewModalVisibly: false,
          };
        },
      });
      app.$mount("#app");
    </script>
  </body>
</html>

ПРИМЕЧАНИЕ В ДОКУМЕНТЕ НЕЛЬЗЯ ВЫЗВАТЬ КОМПОНЕНТЫ ОДИНАРНЫМИ ТЕГАМИ ИСПОЛЬЗУЙТЕ ДВОЙНЫЕ

  <review-dialog v-model="reviewModalVisibly"/>  <!--НЕЛЬЗЯ ТАК ДЕЛАТЬ--->
  <record-dialog v-model="recordModalVisibly"/>  <!--НЕЛЬЗЯ ТАК ДЕЛАТЬ--->
  <question-dialog v-model="questionModalVisibly"/>  <!--НЕЛЬЗЯ ТАК ДЕЛАТЬ--->

  <!------------------------------------------------------------------------>

  <review-dialog v-model="reviewModalVisibly"></review-dialog>   <!-- НУЖНО ТАК ДЕЛАТЬ ---> 
  <record-dialog v-model="recordModalVisibly"></record-dialog>   <!-- НУЖНО ТАК ДЕЛАТЬ --->
  <question-dialog v-model="questionModalVisibly"></question-dialog>   <!-- НУЖНО ТАК ДЕЛАТЬ --->

уже имеются предконфигурированные компоненты uniclinic.pro

  • question-dialog --- Модальное окно для вопроса
  • record-dialog --- Модальное окно для записи
  • review-dialog --- Модальное окно для отзыва

Props(основные)

 
  title:"", //- заголовок 
  subTitle:"", //- Под заголовок 
  modalSize:"", //- размер(стандарты bootstrap)
  navigation: Boolean //- Включить или выключить навигацию(смотрите ниже - поле section)
  sections:[
    ....
    {
      //- настройка поле section
    },
    {
      //- настройка поле section
    },
    {
      //- настройка поле section
    },
    .....
  ]

Props - sections

Другими словами это массив из обьетов описываюший страницы модального окна на пример

{
  "navigation": {
    // - Если хотите использовать этот пункт вам нужно включить section.navigation (смотрите выше)
    // - Если поле navigation: false; то може этот пункт не указать он всё ровно не отабразится)) 
    "className": "my-custom-class", //- Класс для div которое обарачивет icon и caption у него ещё есть класс col
    "icon": {
      // - Можете использовать любой иконочный шрифт которое вам нужно
      "active": "bi bi-pencil",
      "disabled": "bi bi-bootstrap-fill",
      "done": "bi bi-check-circle",
    },
    "caption": "Пункт Данные",
  },
  "className": "",  //- класс страницы
  "fields":[
    {
      //- КОНФИГУРАЦИИ РЕДАКТРОРА (пункт section.field)
    },
    {
      //- КОНФИГУРАЦИИ РЕДАКТРОРА (пункт section.field)
    },
    {
      //- КОНФИГУРАЦИИ РЕДАКТРОРА (пункт section.field)
    }

  ], 
  "actions":{
    "className": "actions", //-класс для div кторое содержит в себе всех кнопок
    "prevBtn":{  
        // - настройки кнопоки
    },
    "nextBtn":{
        // - настройки кнопоки
    },
    "buttons": [
        .....
        {
            // - настройки кнопоки
        },
        {
            // - настройки кнопоки
        },
        {
            // - настройки кнопоки
        },
        ....
    ],
  }, //-Обьект описываюший кнопки 
}

Кнопки

  • prevBtn и nextBtn нужны для перехода на перде следующюю секци ЕСЛИ У ВАС ТОЛЬКО ОДНА СЕКЦИЯ ТО НЕ НУЖНО их ПОДКЛЮЧАТЬ
  • prevBtn и nextBtn у них есть поле action туда вы можете передать функцию которая вам нужна. Если вам нужен просто переход на след. или пред. секцию то можете action не указать
  • buttons Это массив из кнопок
  • у всех кнопок одинаковый модель данных т.е.

пример оформление одной кнопки

{
   "className": "", //- класс для кнопки (bootstrap)
   "caption":"",//- Текст кнопки
   "action": () => this.someFunction() //- фунция должен описываться внутри поля methods
}

Section.fields (конфигурация редактора)

{
  "editor": "input-editor", //- нужно написать editor (смотрите ниже)
  "value": "",
  "className": "col-md-12",
  "props": {
    // - нужно казать соответсвии с editor 
  },
  "validation": {
    // - можете указать только нужные вам поля. НО У УКАЗАННОГО ПОЛЯ ОБЬЯЗАТЕЛЬНО ДОЛЖЕН БЫТЬ 2 ПОЛЯ ))
    "required": {
      "value": true,
      "text": "Поле должно быть обязательным",
    },
    "regular": {
      "value": /^([а-яё]+|[a-z]+)$/i,
      "text": "Введите корректное имя",
    },
    "min": {
      "value": 3,
      "text": "Поле должно содержать не менее 3 символов",
    },
    "max": {
      "value": 10,
      "text": "Поле должно содержать не менее 10 символов",
    },
  },
},

editors

input-editor

используется тег input props должен быть следуюшим

{
  "label": "",
  "placeholder":"",
  "type":"", //-<input :type="type"/> ЗМЕЧАНИЕ можно указать text, number, email а для дугих есть свои редакторы
  "className": "", //- здесь вы можете использовать сеточную систему bootstrap т.е. col-md-4 col-sm-6 ..
}

text-editor

поле использует тег textarea props должен быть следуюшим

{
  "label": "",
  "placeholder":"",
  "className": "", //- здесь вы можете использовать сеточную систему bootstrap т.е. col-md-4 col-sm-6 ..
}

boolean-editor

поле использует тег input checkbox props должен быть следуюшим

{
  "label": "",
  "link":{
    // - Это поле вы можете указать если вам понадбиться добавить туда ссылку на пример для политики конфедициальности
    // - Ссылка подставиться полсе label
    "text":"",
    "href":"" 
  },
  "className": "", //- здесь вы можете использовать сеточную систему bootstrap т.е. col-md-4 col-sm-6 ..
}

telephone-editor

поле использует тег input c маской ввода телефонного номера props должен быть следуюшим

{
  "label": "",
  "placeholder":"",
  "className": "", //- здесь вы можете использовать сеточную систему bootstrap т.е. col-md-4 col-sm-6 ..
}

select-editor

поле использует компонент v-select props должен быть следуюшим

{
  "label": "",
  "placeholder": "",
  "type": "text-field", //ПОЛЕ ОБЯЗАТЕЛЬНО нужно указать тип option
  "apiAdress":"", //ПОЛЕ ОБЯЗАТЕЛЬНО url api от куда должны взяться данные
  "selectValue": "", //ПОЛЕ ОБЯЗАТЕЛЬНО поле из выбранного обьекта в массиве которое должен вернуть редактор
  "selectLabel":"" ,//ПОЛЕ ОБЯЗАТЕЛЬНО поле из выбранного обьекта в массиве котрое должен отображаться как выбранный элемент
  "optionValue": {
    //ПОЛЕ ОБЯЗАТЕЛЬНО нужно настроить с соответсвии с type (смотрите ниже)
  }
}

типы options

  • text-image-field --- option с картинкой и текстом optionValue нужно настроить след. образом
{
  "img":"" //имя поля в котором содержится url картинки для отображение в option
  "title":"" //имя поля в котором содержится заголовок для отображение о option
}
  • text-field --- option с текстом optionValue нужно настроить след. образом
{
  "title":"" //имя поля в котором содержится заголовок для отображение о option
}

rating-editor

поле использует кастомный компонент для оцеки по 5 бальной шкале props должен быть следуюшим

{
  "label": "",
}
core-jsvuevue-select
0.1.0

3 years ago