Про GraphQL на клиенте

Всегда удивляет то, что практически никто не говорит про одну из крутейших фишек графа - Subscriptions (подписки). "Попробовав раз - ем и сейчас!", как говорится.

Ну и вопрос, "зачем граф, когда есть рест?" отпадет сразу, как только попробуешь граф в более-менее сложной системе.

Пишем компонент — таблицу, не совсем обычным способом

Поживем — увидим.
Но я уверен, что кода будет меньше, как минимум из-за разного подхода к рендеру таблиц.
А функционал я хочу реализовать один-в-один как у Element. Чтобы сравнение было адекватное.

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

Ну правильно, для каждой ситуации — свое решение.
Но главное преимущества подхода, который используется здесь — позволяет убрать дублирование кода. Вот нужно вам одно и тоже окно на нескольких страницах, вы будете его вставлять на каждую, и само окно станет привязано к данным страницам. Более того, если нужно будет сделать изменения в этом окне, нужно будет лазить по всем местам, где оно используется и делать изменения. А так мы скинули все наши компоненты с окнами в одно место, например в папку modals и все. Одно окно с дефолтными настройками — используем где хотим, и когда надо, через опции заменяем его дефолтные настройки.
Мне например так намного удобнее. И добавить родительский метод, который примет данные, для меня более очевиден. Так как компонент в окне по сути — это отдельная сущность, и изменять данные родителя напрямую, не есть хорошо.

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

Для этого и есть коллбек onClose. Вызываем из формы наше окно с выбором чего-то там, передавая в опциях нужные параметры родительской модели. И в опциях передаем коллбек onClose, в который мы будем при закрытии окна методом this.$modals.close(data) передавать нужный ответ (data) и его уже использовать в родительской модели.

Код для наглядности

// запускаем из формы окно
this.$modals.open({
  component: ModalForm // компонент, отображаемый в окне, где происходит выбор чего-то,
  props: {
    params1, // родительские данные, которые будут использоваться в окне
    params2,
    ...
  },
  onClose(data) { // data мы будем передавать при закрытии окна 
    // здесь мы уже в родительской области видимости, и используем data как нам нужно
    ...
    return false // если здесь мы вернем false, то окно не закроется. Например при каком-то условии, по значениям из data
  }
})

// а в окне, например, при клике по кнопке 'Сохранить' вызываем 
this.$modals.close(data)
// тем самым запуская закрытие окна, но прежде чем окно закроется, запускается коллбек onClose, если он есть в опциях окна, c переданными в него данными

Как-то так, если я правильно понял суть проблемы.

Пишем компонент — таблицу, не совсем обычным способом

Спасибо!
Да, думаю поэтапно накатывать, попутно описывая все это действо здесь. Авось пригодится кому )

Пишем компонент — таблицу, не совсем обычным способом

Я не хотел нивелировать возможности их таблицы. Мне вообще их сборник компонентов по нраву был всегда. И внешне симпатично и функционала, хоть отбавляй. Но использовал я их компоненты довольно таки долго и в процессе использования приходили мысли о том, что мне не нравится и как сделать лучше. По крайней мере постараться сделать. Идеала ведь нет. Но стремиться хочется. А уж получится или нет, как карта ляжет )
P.S. ну и если серьезно, все равно не вижу ничего экстраординарного в реализации функций их таблицы.
Взять хотя бы упомянутые вами «фиксед колонки(справа и слева), фиксед хидер из самого сложнореализуемого» — у них таблица строится не из одного html элемента table, а из нескольких. Одна для хидера, другая для body и т.д. Отсюда и возможности фиксинга. Обычный финт ушами ) Ну и дальше можно расписать по каждой примочке. Я сам изначально подсел на Element, в том числе из-за их таблиц. Уж очень удобно. Но теперь хочется большего )

Пишем компонент — таблицу, не совсем обычным способом

По правде говоря, не вижу я сложного функционала в их таблице. Обычная сортировка, фильтрация. Остальные примочки тоже ничего особенного. И на то, что над этим компонентом-таблицей, возможно работает целая команда, намекает как раз количество используемого кода. Можно будет поговорить об этом, когда доделаю свой вариант.

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

Так любой компонент мы и сейчас можем вывести в окне.
А по поводу страницы с модалкой со своим url. Может создавать нужный роут в момент открытия окна? В реальном времени. У vue-router вроде есть возможность динамического добавления. Надо только подумать, как после закрытия окна удалять этот роут. Покопаться в исходниках роутера надо. И так каждый раз. Думаю на производительность приложения сильно этот момент не повлияет.
А для этих динамически добавляемых/удаляемых роутов сделать шаблонную страницу, где будем выводить окно. По сути окна то у нас не привязаны к страницам сейчас. Их обертка висит в корневом шаблоне приложения. Страница-пустышка нужна для роута. Роут нужен для правильной обработки адресной строки в браузере. Как то так, на первый взгляд.

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

Да, интересно. Я правда пока не садился подумать над этой проблемой. Но возможно без костылей здесь не обойтись. Обязательно напишу, когда решу этот момент.

Пишем компонент — таблицу, не совсем обычным способом

Как накручу соответствующий функционал, тогда и будет видно, производительней получится или нет, чем у таблицы Element. Для меня это своего рода вызов. И вообще надо стараться все упрощать. Так жить легче. Я упростил только лишь сам рендер ячеек. У Element этот рендер очень заморочистый и реализован в большом количестве кода. И я не вижу в этом особого смысла. Может им так удобнее. Не знаю, в чем причина.
Если вы не видели исходники, посмотрите. А до уровня функциональности их таблицы я на днях доведу свой компонент, тогда и можно будет сравнить.

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

На досуге буду думать над этой проблемой. Решение всегда можно найти, если хорошо поискать :)

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

Согласен с вами. И спасибо за подсказку. Уже все поправил и перезалил.

Вот добавленное в коде

modal-wrapper.js

mounted() {
// подписываемся на событие keydown
    if (typeof document !== 'undefined') {
      document.body.addEventListener('keydown', this.handleTabKey)
    }
}
 destroyed() {
// отписываемся
    if (typeof document !== 'undefined') {
      document.body.removeEventListener('keydown', this.handleTabKey)
    }
},
methods: {
   handleTabKey(e) {
       if (e.keyCode === 9 && this.modals.length) {
         e.preventDefault() // если есть окна, глушим Tab/Shift-Tab
       }
    }
// пока полностью отключаю Tab. Надо подумать, как лучше его глушить только вне активного окна. 
}

и modal.js

mounted() {
    if(this.$el.focus) {
      this.$el.focus() // фокус переводим на окно, при монтировании
    }
},
render(h) {
...
   return h('div', { 
      style,
      attrs: { tabindex: -1}, // цепляем tabindex
      class: ['vu-modal__cmp', {
...
},

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

Да, внутри Vue, не менее интересен, чем снаружи. Рекомендую его всячески ковырять и испытывать на прочность при случае. Откроете много интересных возможностей, о которых не напишут в документации. Впрочем — это применимо для любого инструмента.
Лично для меня, изучать его — одно удовольствие. В данный момент времени — Vue — для меня идеал из себе подобных.
Хотя я постоянно мониторю эту сферу, ведь мир JS так изменчив :)
Писать однозначно буду. И немало.

Ох уж эти модальные окна или почему я полюбил render-функции в VueJs

Понравиться всем невозможно.
Да и нет такой цели. Цель в другом — делиться знаниями с людьми. И конкретно в этой статье речь о Vue. О случаях необычных и нестандартных, по крайне мере для новичка. А верстка здесь дело 10-е.
Но я буду рад, если вы опишите эти недостатки в реализации. Да и по верстке не помешает. Думаю и другим будет интересно.

Создание модального компонента с помощью Vue.js

Да. Это вообще самый простой способ. Да и распространенный в общем. Сейчас дописываю статью-туториал (свой), тоже про создание компонента модального окна, но с наворотами. Завтра выложу ее здесь.

Создание модального компонента с помощью Vue.js

Прошел по всей статье — сделал человечный перевод.

Создание модального компонента с помощью Vue.js

Всем вечер добрый! Я заранее извиняюсь. Вчера только зарегистрировался здесь и сидел смотрел что и как с публикациями. В общем это статья — тупо перевод. Я и ссылку не вставил на оригинал. В общем, просто хотел проверить, как быстро проходят модерацию новые статьи. Оказалось, что быстро. Я вообще расчитывал, что такая не пройдет, но хотя бы увижу срок проверки. Надеюсь, что меня за это не забанят. Даже если ее удалят — я не огорчусь, потому что завтра я скину свою первую статью. Личную. Чужих больше не будет. Буду писать по тематике JS, Vue.js, Webpack, Node.js и т.п. Есть много о чем рассказать. Поэтому сильно не огорчайтесь на меня — исправлюсь!