Skip to content

Commit

Permalink
feat(add search componment): add search componment
Browse files Browse the repository at this point in the history 
add search componment
  • Loading branch information
@zxc0254
zxc0254 committed Jan 17, 2021
1 parent 9679319 commit 006e37b
Show file tree
Hide file tree
Showing 25 changed files with 1,431 additions and 3,860 deletions.
345 changes: 222 additions & 123 deletions .storybook/main.js
View file
Expand Up @@ -3,135 +3,234 @@ const tailwindConfig = require('../tailwind.config.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const purgecss = require('@fullhuman/postcss-purgecss')({

// Specify the paths to all of the template files in your project
content: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
// etc.
],
// Specify the paths to all of the template files in your project
content: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
// etc.
],

// This is the function used to extract class names from your templates
defaultExtractor: content => {
// Capture as liberally as possible, including things like `h-(screen-1.5)`
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
// This is the function used to extract class names from your templates
defaultExtractor: content => {
// Capture as liberally as possible, including things like `h-(screen-1.5)`
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

// Capture classes within other delimiters like .block(class="w-1/2") in Pug
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
// Capture classes within other delimiters like .block(class="w-1/2") in Pug
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

return broadMatches.concat(innerMatches)
}
return broadMatches.concat(innerMatches)
}
})

module.exports = {
webpackFinal: async (config, {configType}) => {
const entry = config.entry;
delete config.entry;
config.entry = {};
config.entry.index = entry;
config.output.filename = '[name].js';
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', {
loader: "css-loader",
options: {
importLoaders: 1,
modules: false,
},
}, 'sass-loader'],
// include: path.resolve(__dirname, '../'),
});
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.css$/,
use: process.env.NODE_ENV === 'prod' ? [
{
loader: MiniCssExtractPlugin.loader
}, {
loader: "css-loader",
options: {
importLoaders: 1,
modules: false,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: (loader) => {
return {
ident: 'postcss',
plugins: [
['postcss-import', {root: loader.resourcePath}],
'postcss-preset-env',
['tailwindcss', {config: './tailwind.config.js'}],
['cssnano', {
preset: 'default',
}],
// ...process.env.NODE_ENV === 'production'
// ? [purgecss]
// : []
]
}
}
}
},
] : [
{
loader: "postcss-loader",
options: {
postcssOptions: (loader) => {
return {
ident: 'postcss',
plugins: [
['postcss-import', {root: loader.resourcePath}],
'postcss-preset-env',
['tailwindcss', {config: './tailwind.config.js'}],
['cssnano', {
preset: 'default',
}],
// ...process.env.NODE_ENV === 'production'
// ? [purgecss]
// : []
]
}
}
}
},
],
include: path.resolve(__dirname, '../'),
});
webpackFinal: async (config, {configType}) => {
const entry = config.entry;
delete config.entry;
config.entry = {};
config.entry.index = entry;
config.output.filename = '[name].js';
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

config.node = {
fs: 'empty'
};
process.env.NODE_ENV === 'prod' && config.plugins.push(
new MiniCssExtractPlugin({
filename: '[name].css'
})
);
// Return the altered config
return config;
},
stories: ['../src/*.stories.(js|mdx)'],
addons: [
{
name: '@storybook/addon-docs',
options: {
vueDocgenOptions: {
alias: {
'@': path.resolve(__dirname, '../src'),
},
},
},
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', {
loader: "css-loader",
options: {
importLoaders: 1,
modules: false,
},
}, {
loader: "postcss-loader",
options: {
postcssOptions: (loader) => {
return {
ident: 'postcss',
plugins: [
['postcss-import', {root: loader.resourcePath}],
'postcss-preset-env',
['tailwindcss', {config: './tailwind.config.js'}],
['cssnano', {
preset: 'default',
}],
['postcss-preset-env', {
stage: 1
}]
// ...process.env.NODE_ENV === 'production'
// ? [purgecss]
// : []
]
}
}
}
},
'sass-loader'
],
// include: path.resolve(__dirname, '../'),
});
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.css$/,
use: process.env.NODE_ENV === 'prod' ? [
{
loader: MiniCssExtractPlugin.loader
}, {
loader: "css-loader",
options: {
importLoaders: 1,
modules: false,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: (loader) => {
return {
ident: 'postcss',
plugins: [
['postcss-import', {root: loader.resourcePath}],
'postcss-preset-env',
['tailwindcss', {config: './tailwind.config.js'}],
['cssnano', {
preset: 'default',
}],
['postcss-preset-env', {
stage: 1
}]
// ...process.env.NODE_ENV === 'production'
// ? [purgecss]
// : []
]
}
}
}
},
] : [
{
loader: "postcss-loader",
options: {
postcssOptions: (loader) => {
return {
ident: 'postcss',
plugins: [
['postcss-import', {root: loader.resourcePath}],
'postcss-preset-env',
['tailwindcss', {config: './tailwind.config.js'}],
['cssnano', {
preset: 'default',
}],
['postcss-preset-env', {
stage: 1
}]
// ...process.env.NODE_ENV === 'production'
// ? [purgecss]
// : []
]
}
}
}
},
],
include: path.resolve(__dirname, '../'),
});
config.module.rules.push({
test: /\.postcss$/,
use: process.env.NODE_ENV === 'prod' ? [
'style-loader',
{
loader: MiniCssExtractPlugin.loader
}, {
loader: "css-loader",
options: {
importLoaders: 1,
modules: false,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: (loader) => {
return {
ident: 'postcss',
plugins: [
['postcss-import', {root: loader.resourcePath}],
'postcss-preset-env',
['tailwindcss', {config: './tailwind.config.js'}],
['cssnano', {
preset: 'default',
}],
['postcss-preset-env', {
stage: 1
}]
// ...process.env.NODE_ENV === 'production'
// ? [purgecss]
// : []
]
}
}
}
},
] : [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
postcssOptions: (loader) => {
return {
ident: 'postcss',
plugins: [
['postcss-import', {root: loader.resourcePath}],
'postcss-preset-env',
['tailwindcss', {config: './tailwind.config.js'}],
['cssnano', {
preset: 'default',
}],
['postcss-preset-env', {
stage: 1
}]
// ...process.env.NODE_ENV === 'production'
// ? [purgecss]
// : []
]
}
}
}
},
],
include: path.resolve(__dirname, '../'),
});

config.node = {
fs: 'empty'
};
process.env.NODE_ENV === 'prod' && config.plugins.push(
new MiniCssExtractPlugin({
filename: '[name].css'
})
);
// Return the altered config
return config;
},
'@storybook/addon-storysource',
'@storybook/addon-actions/register',
'@storybook/addon-viewport/register',
'@storybook/addon-knobs',
'@storybook/addon-a11y',
'@storybook/addon-links'
],
stories: ['../src/*.stories.(js|mdx)'],
addons: [
{
name: '@storybook/addon-docs',
options: {
vueDocgenOptions: {
alias: {
'@': path.resolve(__dirname, '../src'),
},
},
},
},
'@storybook/addon-storysource',
'@storybook/addon-actions/register',
'@storybook/addon-viewport/register',
'@storybook/addon-knobs',
'@storybook/addon-a11y',
'@storybook/addon-links'
],
};
9 changes: 6 additions & 3 deletions .storybook/preview.js
View file
Expand Up @@ -2,13 +2,16 @@ import {configure, addParameters, addDecorator} from '@storybook/vue';
import Vue from 'vue';
import '../src/assets/fonts/font.css';
import '../src/assets/style.css';
import HButton from '../src/components/HButton.vue';
import HRow from '../src/components/HRow.vue';
import HCol from '../src/components/HCol.vue';
import 'animate.css'
import HButton from '../src/components/HButton';
import HRow from '../src/components/HRow';
import HCol from '../src/components/HCol';
import HSearch from '../src/components/HSearch';

Vue.component('h-button', HButton);
Vue.component('h-row', HRow);
Vue.component('h-col',HCol);
Vue.component('h-search',HSearch);

addParameters({
docs: {
Expand Down
4 changes: 2 additions & 2 deletions .storybook/yourTheme.js
View file
Expand Up @@ -7,8 +7,8 @@ export default create({
// colorSecondary: 'deepskyblue',
//
// // UI
appBg: 'white',
appContentBg: 'rgba(221,221,221,0.16)',
// appBg: 'white',
// appContentBg: 'rgba(221,221,221,0.16)',
// appBorderColor: 'grey',
// appBorderRadius: 4,
//
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
@@ -1,4 +1,4 @@
![avatar](./public/logo.png)
![avatar](./public/huanet.jpg)
# HUI

An enterprise-class UI design language and Vue UI library.
Expand Down

0 comments on commit 006e37b

Please sign in to comment.