mixtape/zero.Backoffice.UI/app/modules/pageModules/overlays/select.vue

<template>
  <div class="ui-modules-select">
    <h2 class="ui-headline">Add module</h2>
    <div v-if="!loading">
      <div class="ui-modules-select-items">
        <button type="button" v-for="item in types" class="ui-modules-select-item" @click="onSelect(item)">
          <div class="ui-modules-select-item-top">
            <ui-icon class="ui-modules-select-item-icon" :symbol="item.icon" :size="22" />
          </div>
          <span class="ui-modules-select-item-text">
            <ui-localize :value="item.name" class="-headline" />
            <span v-if="item.description" class="-desc" v-localize="item.description"></span>
          </span>
        </button>
      </div>
      <ui-message type="error" v-if="!types.length" text="@modules.noneavailable" />
      <div class="app-confirm-buttons">
        <ui-button type="light" label="@ui.close" @click="config.close"></ui-button>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    props: {
      config: Object
    },
    data: () => ({
      model: {
        name: null,
        parentId: null,
        pageTypeAlias: null
      },
      loading: false,
      item: {},
      disabled: false,
      types: []
    }),
    created()
    {
      this.types = this.config.model.types;
      this.model.parentId = this.config.model.parent ? this.config.model.parent.id : null;
    },
    methods: {
      onSelect(item)
      {
        //this.config.close();
        this.config.confirm(item);
        //this.$router.push({
        //  name: 'ui-modules-select',
        //  params: { type: item.alias, parent: this.model.parentId }
        //});
      },
    }
  }
</script>

<style lang="scss">
  .app-overlay[data-alias="modules-select"]
  {
    width: 100% !important;
    max-width: min(1080px, calc(100vw - 40px));
    max-height: min(750px, calc(100vh - 40px));
  }

  .ui-modules-select
  {
    text-align: left;

    .ui-message
    {
      margin: 0;
    }
  }

  .ui-modules-select-parent
  {
    margin: 30px 0 -10px 0;
    border-radius: var(--radius);
    /*border: 1px solid var(--color-line-light);*/
    background: var(--color-box-nested);
    line-height: 1.4;
    color: var(--color-text-dim);
    padding: 14px 16px;
    font-size: var(--font-size);

    strong
    {
      color: var(--color-text);
    }
  }

  .ui-modules-select-items
  {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: var(--padding-m);
    margin: 0 -16px;
    padding: 0 16px;
    margin-top: var(--padding);
    max-height: 550px;
    overflow-y: auto;
  }

  .ui-modules-select-item
  {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: stretch;
    position: relative;
    color: var(--color-text);
    /*&:hover, &:focus
    {
      background: var(--color-tree-selected);
    }*/
    &:hover .ui-modules-select-item-top
    {
      border: 1px solid var(--color-bg-shade-5);
      background: var(--color-bg-shade-1);
      outline: none;
    }
  }

  .ui-modules-select-item-top
  {
    background: var(--color-bg-shade-2);
    height: 100px;
    border-radius: var(--radius);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-line);
  }

  .ui-modules-select-item-text
  {
    display: flex;
    flex-direction: column;

    .-desc
    {
      color: var(--color-text-dim);
      margin-top: 3px;
      font-size: var(--font-size-s);
      line-height: 1.4;
    }

    .-headline
    {
      color: var(--color-text);
      font-weight: 700;
    }
  }

  .ui-modules-select-item-icon
  {
    position: relative;
    font-size: var(--size-xl);
    color: var(--color-text);
  }
</style>