Repositorio del curso CCOM4030 el semestre B91 del proyecto Artesanías con el Instituto de Cultura

components-page.js 1.9KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import {PreviewComponent} from './preview-component';
  2. import {PlatformSelect} from './platform-select';
  3. import {ThemeSelect} from './theme-select';
  4. export const ComponentsPage = {
  5. props: ['components', 'categories', 'query'],
  6. template: `
  7. <div class="pv-content">
  8. <platform-select :platform="query.platform" />
  9. <h2 class="pv-content__header">Components</h2>
  10. <theme-select :theme="query.theme" :query="query" />
  11. <div class="pv-components">
  12. <css-component v-for="component in filterComponents" :component="component" :key="component.id" />
  13. </div>
  14. </div>
  15. `,
  16. data: () => ({
  17. themes: window.themes
  18. }),
  19. components: {
  20. 'css-component': PreviewComponent,
  21. 'platform-select': PlatformSelect,
  22. 'theme-select': ThemeSelect
  23. },
  24. computed: {
  25. filterComponents() {
  26. const components = this.components;
  27. if (this.query.platform === 'android') {
  28. return components.filter(function(component) {
  29. return component.name.match(/Material/);
  30. });
  31. } else if (this.query.platform === 'ios') {
  32. return components.filter(function(component) {
  33. return !component.name.match(/Material/);
  34. });
  35. }
  36. return components;
  37. }
  38. },
  39. methods: {
  40. download(event) {
  41. const theme = this.$refs.themeSelect.value;
  42. if (!theme) {
  43. window.open('/onsen-css-components.css');
  44. } else {
  45. window.open(`${theme}.css`);
  46. }
  47. event.preventDefault();
  48. },
  49. changeTheme(event) {
  50. const theme = event.target.value;
  51. const suffix = this.query.platform ? `platform=${this.query.platform}` : '';
  52. if (theme === 'onsen-css-components') {
  53. if (suffix === '') {
  54. page.show('/');
  55. } else {
  56. page.show(`?${suffix}`);
  57. }
  58. } else {
  59. page.show(`?theme=${theme}${suffix === '' ? '' : `&${suffix}`}`);
  60. }
  61. }
  62. }
  63. };