OpenTiny Vue 3.11.0 released: adding 4 new components such as rich text and ColorPicker, ushering in an explosion of contributors!

Hello, my name is Kagol.

I am very happy to announce to you that on October 24, 2023, OpenTiny Vue released v3.11.0.

Every time a major version of OpenTiny is released, it will bring you some practical new features. On 8.14, we released version v3.10.0, which added 4 new components. The component Demo supports switching between Options and Composition api.

OpenTiny Vue 3.10.0 version released: Component Demo supports Composition writing method, and 4 new components are added

This version 3.11.0 mainly adds the following new components:

  • RichTextEditor rich text editor component – by Caesar-ch
  • ColorPicker color picker component – by GaoNeng-wWw
  • CalendarView calendar view component – by kagol
  • Divider dividing line component – by vaebe

A total of 23 contributors participated in the development of this version, 14 of which are new contributors. New friends are welcome

Here are the new contributors:

  • @jack-zishan made their first contribution in #392
  • @LinboLen made their first contribution in #478
  • @vaebe made their first contribution in #471
  • @allenli178 made their first contribution in #488
  • @Binks123 made their first contribution in #500
  • @yoyo201626 made their first contribution in #513
  • @wkif made their first contribution in #512
  • @chenguang1994 made their first contribution in #518
  • @Zuowendong made their first contribution in #503
  • @gweesin made their first contribution in #554
  • @shonen7 made their first contribution in #567
  • @xlearns made their first contribution in #574
  • @ianxinnew made their first contribution in #617
  • @Xppp0217 made their first contribution in #610

Thanks also to our old friends for their hard work on OpenTiny!

Special thanks to pe-3/Caesar-ch/GaoNeng-wWw/vaebe/Binks123.

You can update @opentiny/[email protected] to experience it!

RichTextEditor rich text editor

This component was contributed by Caesar-ch classmate

Although the rich text editor is not a high-frequency component, it is almost one of the necessary components in specific fields, such as demand management, content editing, article creation, etc.

In order to meet the needs of these businesses, we launched the RichTextEditor rich text component. It is currently only the first version and only includes the following basic functions:

  • Bold, italics, underline, strikethrough
  • Quote
  • Inline code, code block
  • Ordered list, unordered list, task list
  • superscript, subscript
  • Undo, redo
  • Align left, right, center
  • Paragraph, H1-H6 title
  • Font size, line spacing
  • Highlight, text color, background color
  • clear format
  • Hyperlink
  • upload image
  • Insert/edit table

The follow-up will continue to be enriched, and friends are welcome to participate in the co-construction.

It’s very simple to use:

<template>
  <tiny-rich-text-editor></tiny-rich-text-editor>
</template>

<script lang="ts" setup>
import {<!-- --> RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
</script>

The following is the rendering:

RichTextEditor.png

The toolbar can be configured via custom-toolbar:

<template>
  <tiny-rich-text-editor :customToolBar="customToolBar"></tiny-rich-text-editor>
</template>

<script setup lang="jsx">
import {<!-- --> ref } from 'vue'
import {<!-- --> RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'

const customToolBar = ref(['bold', 'italic'])
</script>

The effect is as follows:

2.png

More functions are waiting for you to experience!

ColorPicker color picker

The ColorPicker color picker component is used in applications and interfaces to let users select colors. It is an interactive element, usually consisting of a color spectrum, hue circle and color value input box, through which the user can select the desired color. The main function of ColorPicker is to enable users to precisely select specific colors for use in various elements of the application.

This component was contributed by GaoNeng, who also wrote an article summarizing the entire development process of the ColorPicker component.

GaoNeng: How do I contribute new components to OpenTiny?

ColorPicker is very simple to use:

<template>
  <tiny-color-picker v-model="color" />
</template>

<script setup lang="ts">
import {<!-- --> ref } from 'vue'
import {<!-- --> ColorPicker as TinyColorPicker } from '@opentiny/vue'
const color = ref('#66ccff')
</script>

The effect is as follows:

3color-picker.png

This component is very powerful and in addition to selecting colors in the color palette, it also supports:

  • Transparency adjustment
  • Predefined colors
  • color history
  • Color selection panel used alone

More functions are waiting for you to experience!

Transparency adjustment:

Transparency.png

Predefined colors:

Predefined colors.png

Color history:

Color History.png

Color panel used alone:

Color panel used alone.png

CalendarView calendar view

Everyone knows the DatePicker date picker. This component selects a date through a date table. The enlarged version of the date table is the calendar table. Let’s take a look at the comparison chart.

DatePicker date table:

datepicker.png

CalendarView calendar table:

calendar-view.png

Welcome to experience!

Divider dividing line

This component was contributed by classmate vaebe

The dividing line is relatively simple and currently mainly supports:

  • Horizontal and vertical dividing lines
  • Add dividing line copywriting and adjust copywriting position
  • Custom divider style

The effect is as follows:

divider.png

Welcome to experience!

About OpenTiny

OpenTiny is an enterprise-level Web front-end development solution that provides a cross-end and cross-frame UI component library, adapts to multiple terminals such as PC/mobile terminals, supports Vue2/Vue3/Angular multi-technology stacks, and has a flexible and scalable low-code engine. , including theme configuration system/middle and backend templates/CLI command line and other rich efficiency improvement tools, which can help developers develop web applications efficiently.

OpenTiny.png

Core highlights:

  1. Cross-end and cross-framework: Using the Renderless component design architecture, a set of codes supports both Vue2/Vue3, PC/Mobile side, and supports function-level logic customization and full template replacement, providing flexibility Good, strong secondary development capabilities.
  2. Rich components: There are 100+ components on the PC side and 30+ components on the mobile side, including high-frequency components Table, Tree, Select, etc., with built-in virtual scrolling to ensure a smooth experience in big data scenarios. In addition to the industry In addition to common components, we also provide some unique features, such as: Split panel splitter, IpAddress IP address input box, Calendar calendar, Crop image cropping, etc.
  3. Low-code engine: TinyEngine low-code engine enables developers to customize the low-code platform. It is the base of the low-code platform and provides basic capabilities such as visual page building. It can be combined online or secondary developed by downloading the source code to customize your own low-code platform in real time. Suitable for low-code platform development in multiple scenarios, such as: resource orchestration, server-side rendering, model driver, mobile terminal, large screen terminal, page layout, etc.
  4. Configurable component: The component supports both template and configuration methods, and is suitable for low-code platforms. Currently, the team has integrated OpenTiny into the internal low-code platform and has made a lot of optimizations for the low-code platform.
  5. Complete surrounding ecosystem: Provides TinyNG component library based on Angular + TypeScript, provides TinyPro mid- and back-end templates containing 10+ practical functions and 20+ typical pages, and provides TinyCLI engineering tools covering the entire front-end development process , providing a powerful online theme configuration platform TinyTheme

Welcome to the OpenTiny open source community.

Add WeChat assistant: opentiny-official and join in the co-construction!

OpenTiny official website: https://opentiny.design/

Vue component library: https://opentiny.design/tiny-vue

Low-code engine: https://opentiny.design/tiny-engine

Angular component library: https://opentiny.design/tiny-ng

OpenTiny code repository: https://github.com/opentiny/ (Stars welcome?)

Recommended articles from previous issues

  • OpenTiny Vue supports Vue2.7!
  • Boy, it’s time to upgrade to Vue3!
  • ?GaoNeng: How do I contribute new components to OpenTiny?
  • ?xiaoy: But because of love, I am willing to face all difficulties, and the OpenTiny community has added a front-end programmer contributor.
  • ?Contributor recruitment: Front-end Vuer, please keep this “Vue Component Unit Testing” guide to give yourself more security
  • OpenTiny front-end component library is officially open source! Facing the future, born for developers
  • From self-research to open source TinyVue component library
  • A OpenTiny, Vue2 and Vue3 are supported!
  • How to start my first open source contribution (if you have not participated in open source contribution before, please read this article)