rails_design 0.0.1

data/app/assets/javascripts/stimulus_phone/weui-dialog.js

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['dialog']
+
+  connect() {
+    console.debug('connected:', this.identifier)
+  }
+
+  close() {
+    let ele = this.element
+    ele.style.display = 'none'
+    ele.style.opacity = 0
+    ele.style.transition = 'opacity 2s'
+    this.dialogTarget.classList.remove('weui-half-screen-dialog_show')
+  }
+
+  show() {
+    let ele = this.element
+    ele.style.display = 'block'
+    ele.style.opacity = 1
+  }
+
+}

data/app/assets/javascripts/stimulus_phone/weui-picker.js

@@ -0,0 +1,54 @@
+import { Controller } from '@hotwired/stimulus'
+import weui from 'weui.js'
+
+export default class extends Controller {
+  static values = {
+    id: String,
+    url: String
+  }
+
+  connect() {
+    console.debug('connected:', this.identifier)
+  }
+
+  // focus->weui-picker#getData
+  getData(event) {
+    document.activeElement.blur()  // disable input
+    let ele = event.currentTarget
+
+    fetch(this.urlValue, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json'
+      }
+    }).then(response => {
+      return response.json()
+    }).then(body => {
+      this.picker(body, ele)
+    })
+  }
+
+  picker(data, ele) {
+    weui.picker(data.values, {
+      id: data.default.join('_'),
+      title: '多列选择器',
+      defaultValue: data.default,
+      depth: 3,
+      onChange: result => {
+        console.log('changed', result)
+      },
+      onConfirm: result => {
+        let val = result[result.length - 1]
+        let names = result.map(item => {
+          return item.label
+        })
+        console.debug('Val', val)
+        document.getElementById(this.idValue).value = val.value
+        ele.value = names.join(' ')
+      },
+      onClose: () => {
+      }
+    })
+  }
+
+}

data/app/assets/javascripts/stimulus_phone/wxpay.js

@@ -0,0 +1,29 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    params: Object
+  }
+  static targets = ['load']
+
+  connect() {
+    console.debug('connected:', this.identifier)
+    this.chooseWXPay()
+  }
+
+  chooseWXPay() {
+    wx.ready(() => {
+      wx.chooseWXPay({
+        ...this.paramsValue,
+        success: (res) => {
+          console.log(res)
+          this.loadTarget.style.removeProperty('display')
+        },
+        error: (e) => {
+          alert(e)
+        }
+      })
+    })
+  }
+
+}

data/app/assets/stylesheets/app.scss

@@ -0,0 +1,3 @@
+@import 'ext_bulma';
+@import 'ext_choices';
+@import 'ui_tooltip';

data/app/assets/stylesheets/ext_bulma/base/_all.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+@import 'choices';
+@import 'global';
+@import 'main';

data/app/assets/stylesheets/ext_bulma/base/_choices.scss

@@ -0,0 +1,3 @@
+.choices {
+  width: 100%;
+}

data/app/assets/stylesheets/ext_bulma/base/_global.scss

@@ -0,0 +1,19 @@
+del {
+  color: red;
+}
+
+@include touch {
+  html {
+    overflow-y: auto;
+  }
+}
+
+iframe {
+  &.as-top {
+    width: 100%;
+    height: 100%;
+    border: none;
+    position: fixed;
+    top: 0
+  }
+}

data/app/assets/stylesheets/ext_bulma/base/_main.scss

@@ -0,0 +1,15 @@
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex-grow: 1;
+}
+
+.as-vertical-middle {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

data/app/assets/stylesheets/ext_bulma/components/_all.scss

@@ -0,0 +1,10 @@
+@charset "utf-8";
+
+@import 'box';
+@import 'breadcrumb';
+@import 'card';
+@import 'level';
+@import 'media';
+@import 'menu';
+@import 'pagination';
+@import 'panel';

data/app/assets/stylesheets/ext_bulma/components/_box.scss

@@ -0,0 +1,15 @@
+.as-tooltip {
+  position: absolute;
+  bottom: 100%;
+  min-width: max-content;
+  z-index: 1;
+  .as-tooltip-arrow {
+    width: 0;
+    height: 0;
+    position: relative;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-top: 7px solid #000;
+    box-shadow: 1px 1px;
+  }
+}

data/app/assets/stylesheets/ext_bulma/components/_breadcrumb.scss

@@ -0,0 +1,17 @@
+.breadcrumb {
+  border-bottom: solid 1px rgba(34, 36, 38, .1);
+  padding-bottom: .5em;
+
+  &:not(:last-child) {
+    margin-bottom: 0.75em;
+  }
+
+  li {
+    &.is-active::before {
+      padding-right: 0.75em;
+    }
+    &:empty + li::before {
+      display: none;
+    }
+  }
+}

data/app/assets/stylesheets/ext_bulma/components/_card.scss

@@ -0,0 +1,12 @@
+.cards {
+  display: grid;
+  grid-template-columns: repeat(4, 25%);
+
+  .card {
+    margin: 1rem;
+  }
+
+  .card + .card {
+    margin-top: 1rem;
+  }
+}

data/app/assets/stylesheets/ext_bulma/components/_level.scss

@@ -0,0 +1,8 @@
+.level {
+  &.is-underline {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    margin-bottom: 0;
+    border-bottom: solid #eee 1px;
+  }
+}

data/app/assets/stylesheets/ext_bulma/components/_media.scss

@@ -0,0 +1,14 @@
+.media {
+  &.is-middle {
+    align-items: center;
+  }
+}
+
+@include mobile {
+  .media {
+    flex-direction: column;
+    .media-content {
+      margin-top: 2rem;
+    }
+  }
+}

data/app/assets/stylesheets/ext_bulma/components/_menu.scss

@@ -0,0 +1,76 @@
+.ex-accordion {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  color: grey;
+  .menu-label {
+    order: 1;
+    font-size: 1em;
+    display: block;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 1em 1.5em;
+    .dropdown {
+      float: right;
+      line-height: 1.5;
+    }
+    .dropdown:before {
+      content: '\f0d9';
+    }
+  }
+  .menu-list {
+    order: 2;
+    display: none;
+    padding-top: .5em;
+    padding-left: 1.5em;
+    a {
+      font-size: .9em;
+    }
+    a.is-active,
+    a:hover {
+      background-color: initial;
+      font-weight: bold;
+    }
+    &:empty + .menu-label {
+      display: none;
+    }
+  }
+  &.is-active {
+    .menu-label {
+      border-bottom: none;
+      padding-bottom: 0;
+      .dropdown:before {
+        content: '\f0d7';
+      }
+    }
+    .menu-list {
+      display: block;
+      border-bottom: solid 1px rgba(34, 36, 38, .1);
+    }
+  }
+}
+
+.menu {
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+    &.is-#{$name} {
+      background-color: $color;
+      .menu-label {
+        border-bottom: solid 1px $color;
+        color: $color-invert;
+      }
+      .menu-list {
+        a {
+          color: $color-invert;
+        }
+        &:hover {
+          color: $color-invert;
+        }
+        &.is-active {
+          color: $color-invert;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/ext_bulma/components/_pagination.scss

@@ -0,0 +1,9 @@
+@include mobile {
+  .pagination {
+    margin: 0;
+  }
+  .pagination-previous,
+  .pagination-next {
+    flex-grow: 0
+  }
+}

data/app/assets/stylesheets/ext_bulma/components/_panel.scss

@@ -0,0 +1,5 @@
+.panel-block.is-flex-direction-column {
+  .control + .control {
+    padding-top: 1em;
+  }
+}

data/app/assets/stylesheets/ext_bulma/elements/_all.scss

@@ -0,0 +1,7 @@
+@charset "utf-8";
+
+@import 'button';
+@import 'fa';
+@import 'image';
+@import 'table';
+@import 'title';

data/app/assets/stylesheets/ext_bulma/elements/_button.scss

@@ -0,0 +1,14 @@
+.button {
+  &.as-corner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-radius: 0;
+    border-width: 0;
+    z-index: 1;
+  }
+  &.is-borderless {
+    border-width: 0;
+    background: transparent;
+  }
+}

data/app/assets/stylesheets/ext_bulma/elements/_fa.scss

@@ -0,0 +1,4 @@
+.fas + span,
+.fas + a {
+  padding-left: .25em;
+}

data/app/assets/stylesheets/ext_bulma/elements/_image.scss

@@ -0,0 +1,38 @@
+.images {
+  .image + .image {
+    margin-left: 1em;
+  }
+}
+
+.image {
+  &.is-border {
+    border: solid 1px red;
+  }
+
+  &.is-flex-item {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+figure.is-flex {
+  display: flex;
+  flex-flow: column;
+  margin: auto;
+}
+
+figure.image {
+  background-color: white;
+  opacity: 1;
+
+  figcaption {
+    background-color: #666;
+    color: #fff;
+    padding: 3px;
+    text-align: center;
+  }
+  img, video {
+    height: inherit;
+    object-fit: contain;
+  }
+}

data/app/assets/stylesheets/ext_bulma/elements/_table.scss

@@ -0,0 +1,52 @@
+.table {
+  &.is-border {
+    border: solid 1px $border;
+  }
+
+  thead th, td {
+    border-bottom-width: 1px;
+  }
+  tfoot td, th {
+    border-top-width: 1px;
+  }
+
+  tbody + tbody {
+    tr:first-child td,
+    tr:last-child th {
+      border-top-width: 1px;
+    }
+  }
+
+  th, td {
+    vertical-align: middle;
+  }
+
+  &.as-show {
+    td:first-child {
+      width: 33%;
+    }
+    tbody td:first-child::after {
+      content: ':';
+      padding-left: .25em;
+      color: #888;
+    }
+  }
+}
+
+table.as-search {
+  th, td {
+    padding: 0 .5em .75em 0;
+    vertical-align: middle;
+  }
+  th {
+    text-align: right;
+    white-space: nowrap;
+  }
+  th::after {
+    content: ':';
+    color: #888;
+  }
+  td {
+    width: 100%;
+  }
+}