@tagplus/components 4.7.12 → 5.1.0

package/src/components/AutosuggestTest.vue

@@ -0,0 +1,56 @@
+<template>
+  <tp-autosuggest
+    :id="_id"
+    :model-value="modelValue"
+    :placeholder="$t($options.placeholder)"
+    :label-key="$options.labelKey"
+    :remote-method="remoteMethod"
+    :suggestions="list"
+    :loading="loading"
+    :load-on-create="isLoadOnCreate"
+    :disabled="_disabled"
+    :allow-create="true"
+    :multiple="false"
+    @update:model-value="autosuggestMixin_input"
+    @handleOptionClick="autosuggestMixin_handleCreate"
+    @change="autosuggestMixin_handleChange"
+  />
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import AutosuggestsMixin from '@/components/autosuggestMixin'
+
+export default defineComponent({
+  name: 'AutosuggestTest',
+  valueKey: 'id',
+  labelKey: 'name',
+  placeholder: 'common.placeholder',
+
+  mixins: [AutosuggestsMixin],
+
+  data () {
+    return {
+      uri: 'https://jsonplaceholder.typicode.com/users',
+      loading: false
+    }
+  },
+
+  methods: {
+    remoteMethod (query) {
+      this.loading = true
+      this.axios
+        .get(`${this.uri}?q=${query}`)
+        .then(res => {
+          this.list = res.data
+          this.loading = false
+        })
+        .catch(err => {
+          console.log(err)
+          this.loading = false
+          this.list = []
+        })
+    }
+  }
+})
+</script>

package/src/components/CardExemplo.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-container class="component-sample">
+    <el-header>
+      {{ title }}
+    </el-header>
+    <el-main>
+      <el-scrollbar>
+        <el-row class="scrollbar-flex-content" justify="center">
+          <slot name="default" />
+        </el-row>
+      </el-scrollbar>
+    </el-main>
+    <slot name="codeSamples" />
+  </el-container>
+</template>
+
+<script>
+export default {
+  name:'CardExemplo',
+
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.component-sample {
+  margin: 0px auto;
+  margin-bottom: 16px;
+  max-width: 700px;
+  border: 1px #ccc solid;
+  border-radius: 10px;
+  padding: 8px;
+  background-color: #919191;
+
+  header.el-header {
+    font-size: 17px;
+    font-weight: bold;
+    color: #fff;
+    border-bottom: 1px solid $--border-color-lighter;
+    text-align: center;
+    height: auto;
+  }
+}
+</style>

package/src/components/CodeSample.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="code-sample">
+    <el-row class="code-sample-description">
+      <span v-html="description" />
+    </el-row>
+    <el-row class="code-sample-code">
+      <pre>
+        <slot>
+          {{ formattedCode }}
+        </slot>
+      </pre>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { onMounted, ref, watch } from 'vue'
+export default {
+  name: 'CodeSample',
+  props: {
+    description: {
+      type: String,
+      default: ''
+    },
+    code: {
+      required: false
+    },
+    /**
+     * Se vai observar as alterações na variável code
+     */
+    reactive: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup (props) {
+    let formattedCode = ref('')
+    const handler = (newValue, oldValue) => {
+      const code = props.code ?? 'undefined'
+      formattedCode.value = '\n' + JSON.stringify(code, undefined, 2).trim()
+    }
+
+    if (props.reactive){
+      watch(() => props.code, handler)
+    }
+
+    onMounted(handler)
+    return {
+      formattedCode
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-sample{
+  background-color: #eee;
+  border-radius: 8px;
+}
+.code-sample-description {
+  font-size: 14px;
+  padding: 8px;
+}
+.code-sample-code {
+  pre {
+    display: inline-flex;
+    width: 100%;
+    margin: 0;
+    font-family: monospace;
+    background-color: #444;
+    color: #eee;
+    padding: 10px 10px 0 10px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+</style>

package/src/components/Inline/Inline.vue

@@ -1,12 +1,6 @@
 <template>
-  <div
-    :id="`${_id}-wrapper`"
-    class="tp-inline"
-  >
-    <span
-      v-if="hideInput || readonly"
-      data-tid="inline-span"
-    >
+  <div :id="`${_id}-wrapper`" class="tp-inline">
+    <span v-if="hideInput || readonly" data-tid="inline-span">
       <a
         :id="`${_id}-toggle`"
         tabindex="0"
@@ -14,37 +8,37 @@
         @keypress.enter="toggleInput"
       >
         <span data-tid="inline-value">{{ value }}</span>
-        <small
-          v-if="!readonly"
-          class="el-icon-edit"
-        />
+        <small v-if="!readonly" class="el-icon-edit" />
       </a>
     </span>
     <el-input
       v-else
       :id="`${_id}-input`"
       ref="inlineInput"
-      :value="value"
+      :model-value="value"
       data-tid="inline-input"
       @input="input"
       @blur="blur"
-      @keypress.enter.native="toggleInput"
+      @keypress.enter="toggleInput"
     >
-      <el-button
-        :id="`${_id}-btn`"
-        slot="append"
-        icon="el-icon-check"
-        data-tid="inline-button"
-        @click="toggleInput"
-      >
-        {{ buttonText }}
-      </el-button>
+      <template #append>
+        <el-button
+          :id="`${_id}-btn`"
+          :icon="ElIconCheck"
+          data-tid="inline-button"
+          @click="toggleInput"
+        >
+          {{ buttonText }}
+        </el-button>
+      </template>
     </el-input>
   </div>
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+import { Check as ElIconCheck } from '@element-plus/icons-vue'
+export default defineComponent({
   name: 'TpInline',
   props: {
     id: {
@@ -73,23 +67,21 @@ export default {
       default: 'Ok'
     }
   },
-
+  emits: ['input', 'change', 'blur'],
   data () {
     return {
-      hideInput: true
+      hideInput: true,
+      ElIconCheck
     }
   },
-
   computed: {
     _id () {
       return this.id || this.$options.name
     }
   },
-
   mounted () {
     this.hideInput = this.inputHidden
   },
-
   methods: {
     toggleInput () {
       const status = !this.hideInput
@@ -114,9 +106,8 @@ export default {
     blur (event) {
       this.$emit('blur', event)
     }
-
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -127,13 +118,14 @@ export default {
     border-color: $--color-primary;
     color: $--color-white;
     height: 100%;
-    border-radius: 0px
+    border-radius: 0;
   }
 
   > span {
     display: inline-block;
     padding: 12px 0;
   }
+
   a {
     cursor: pointer;
     display: inline-block;