@timus-networks/theme 1.0.23 → 1.0.25

package/components-ts/ThemeAvatar.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Sizes</h1>
+      <p class="p-md-c my-6">
+        Avatarlar, resimler, ikonlar veya alfanumerik karakterleri destekler. Avatar'ın şeklini ve boyutunu ayarlamak için `shape` ve `size`
+        özelliklerini kullanabilirsiniz. Ayrıca avatarın resim kaynağını belirlemek için `src` özelliğini kullanabilirsiniz. Şekil tipleri
+        <b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'xlarge', 'large', 'medium', 'small', 'xsmall'</b> şeklindedir. Veya boyutu manuel
+        olarak `size` özelliğini kullanarak belirleyebilirsiniz, örneğin <b>size='50'</b>.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
+        <el-avatar :size="50">SK</el-avatar>
+        <el-avatar :size="size" v-for="size in sizeList" :key="size + ''">SK</el-avatar>
+        <el-divider direction="vertical" content-position="center"></el-divider>
+        <el-avatar shape="square" :size="50" :src="url"></el-avatar>
+        <el-avatar shape="square" :size="size" :src="url" v-for="size in sizeList" :key="size"></el-avatar>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-avatar :size="50"&gt;SK&lt;/el-avatar&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Types</h1>
+      <p class="p-md-c my-6">Resimler, ikonlar veya alfanumerik karakterleri destekler</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
+        <el-avatar icon="isax-add-circle"></el-avatar>
+        <el-avatar icon="isax-add-circle" size="xlarge"></el-avatar>
+        <el-avatar :src="url"></el-avatar>
+        <el-avatar>SK</el-avatar>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-avatar icon="isax-add-circle" size="xlarge"&gt;&lt;/el-avatar&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusCascader',
+  data() {
+    return {
+      url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
+      sizeList: ['xlarge', 'large', 'medium', 'small', 'xsmall'],
+    };
+  },
+});
+</script>

package/components-ts/ThemeBadge.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Temel Kullanım</h1>
+      <p class="p-md-c my-6">
+        Butonlar ve simgeler üzerinde sayı veya durum işareti. Yeni mesajların miktarını görüntüler. Miktar, `Number` veya `String` kabul eden `value`
+        ile tanımlanır.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-badge :value="12"> <el-button size="small">Yorumlar</el-button> </el-badge>
+        <el-badge :value="randomNumber()" :type="item" v-for="(item, key) in colors" :key="key">
+          <el-button size="small" :class="randomButtonType()" :type="randomColor()">{{ item }}</el-button>
+        </el-badge>
+        <el-dropdown trigger="click">
+          <span class="el-dropdown-link"> Beni Tıkla<i class="el-icon-caret-bottom el-icon--right"></i> </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item class="clearfix">
+              Yorumlar
+              <el-badge class="mark" :value="12" />
+            </el-dropdown-item>
+            <el-dropdown-item class="clearfix">
+              Yanıtlar
+              <el-badge class="mark" :value="3" />
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-badge :value="12"&gt; &lt;el-button size="small"&gt;Comments&lt;/el-button&gt; &lt;/el-badge&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Max Değer</h1>
+      <p class="p-md-c my-6">
+        Maksimum değer, bir Sayı (Number) olan max özelliği ile belirlenir. Unutmayın ki, bu özellik yalnızca value özelliği de bir Sayı (Number)
+        olduğunda çalışır.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-badge :value="200" :max="99" class="item">
+          <el-button size="small">Yorumlar</el-button>
+        </el-badge>
+        <el-badge :value="100" :max="10" class="item">
+          <el-button size="small">Yanıtlar</el-button>
+        </el-badge>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-badge :value="12"&gt; &lt;el-button size="small"&gt;Yorumlar&lt;/el-button&gt; &lt;/el-badge&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusCascader',
+  data() {
+    return {
+      colors: ['primary', 'secondary', 'gray', 'info', 'success', 'warning', 'danger'],
+    };
+  },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+  },
+  methods: {
+    randomNumber() {
+      return Math.round(Math.random() * 1000);
+    },
+    randomColor() {
+      return this.colors[Math.round(Math.random() * 7)];
+    },
+    randomButtonType() {
+      const type = ['outline'];
+      return type[Math.round(Math.random() * 2)];
+    },
+  },
+});
+</script>

package/components-ts/ThemeCascader.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Basic usage</h1>
+      <p class="p-lg my-6">There are two ways to expand child option items.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-cascader v-model="value" :options="options" @change="handleChange" clearable></el-cascader>
+        <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-cascader v-model="value" :options="options" @change="handleChange"&gt;&lt;/el-cascader&gt;</code>
+        </p>
+      </div>
+    </section>
+    <section>
+      <h1>Multiple Selection</h1>
+      <p class="p-lg my-6">
+        Set `props.multiple = true` to use multiple selection. When using multiple selection, all selected tags will display by default, You can set
+        `collapse-tags = true` to fold selected tags.
+      </p>
+      <div class="flex gap-4">
+        <el-cascader :options="options" :props="props" clearable></el-cascader>
+        <el-cascader :options="options" :props="props" collapse-tags clearable></el-cascader>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-cascader v-model="value" :options="options" @change="handleChange"&gt;&lt;/el-cascader&gt;</code>
+        </p>
+      </div>
+    </section>
+    <section>
+      <h1>Select any level of options</h1>
+      <p class="p-lg my-6">
+        In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked
+        eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
+      </p>
+      <div class="flex gap-4">
+        <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
+        <el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" clearable></el-cascader>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-cascader v-model="value" :options="options" @change="handleChange"&gt;&lt;/el-cascader&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusCascader',
+  data() {
+    return {
+      props: { multiple: true },
+      value: [],
+      options: [
+        {
+          value: 'guide',
+          label: 'Guide',
+          disabled: true,
+          children: [
+            {
+              value: 'disciplines',
+              label: 'Disciplines',
+              children: [
+                {
+                  value: 'consistency',
+                  label: 'Consistency',
+                },
+                {
+                  value: 'feedback',
+                  label: 'Feedback',
+                },
+                {
+                  value: 'efficiency',
+                  label: 'Efficiency',
+                },
+                {
+                  value: 'controllability',
+                  label: 'Controllability',
+                },
+              ],
+            },
+            {
+              value: 'navigation',
+              label: 'Navigation',
+              children: [
+                {
+                  value: 'side nav',
+                  label: 'Side Navigation',
+                },
+                {
+                  value: 'top nav',
+                  label: 'Top Navigation',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: 'component',
+          label: 'Component',
+          children: [
+            {
+              value: 'basic',
+              label: 'Basic',
+              children: [
+                {
+                  value: 'layout',
+                  label: 'Layout',
+                },
+                {
+                  value: 'color',
+                  label: 'Color',
+                },
+                {
+                  value: 'typography',
+                  label: 'Typography',
+                },
+                {
+                  value: 'icon',
+                  label: 'Icon',
+                },
+                {
+                  value: 'button',
+                  label: 'Button',
+                },
+              ],
+            },
+            {
+              value: 'form',
+              label: 'Form',
+              children: [
+                {
+                  value: 'radio',
+                  label: 'Radio',
+                },
+                {
+                  value: 'checkbox',
+                  label: 'Checkbox',
+                },
+                {
+                  value: 'input',
+                  label: 'Input',
+                },
+                {
+                  value: 'input-number',
+                  label: 'InputNumber',
+                },
+                {
+                  value: 'select',
+                  label: 'Select',
+                },
+                {
+                  value: 'cascader',
+                  label: 'Cascader',
+                },
+                {
+                  value: 'switch',
+                  label: 'Switch',
+                },
+                {
+                  value: 'slider',
+                  label: 'Slider',
+                },
+                {
+                  value: 'time-picker',
+                  label: 'TimePicker',
+                },
+                {
+                  value: 'date-picker',
+                  label: 'DatePicker',
+                },
+                {
+                  value: 'datetime-picker',
+                  label: 'DateTimePicker',
+                },
+                {
+                  value: 'upload',
+                  label: 'Upload',
+                },
+                {
+                  value: 'rate',
+                  label: 'Rate',
+                },
+                {
+                  value: 'form',
+                  label: 'Form',
+                },
+              ],
+            },
+            {
+              value: 'data',
+              label: 'Data',
+              children: [
+                {
+                  value: 'table',
+                  label: 'Table',
+                },
+                {
+                  value: 'tag',
+                  label: 'Tag',
+                },
+                {
+                  value: 'progress',
+                  label: 'Progress',
+                },
+                {
+                  value: 'tree',
+                  label: 'Tree',
+                },
+                {
+                  value: 'pagination',
+                  label: 'Pagination',
+                },
+                {
+                  value: 'badge',
+                  label: 'Badge',
+                },
+              ],
+            },
+            {
+              value: 'notice',
+              label: 'Notice',
+              children: [
+                {
+                  value: 'alert',
+                  label: 'Alert',
+                },
+                {
+                  value: 'loading',
+                  label: 'Loading',
+                },
+                {
+                  value: 'message',
+                  label: 'Message',
+                },
+                {
+                  value: 'message-box',
+                  label: 'MessageBox',
+                },
+                {
+                  value: 'notification',
+                  label: 'Notification',
+                },
+              ],
+            },
+            {
+              value: 'navigation',
+              label: 'Navigation',
+              children: [
+                {
+                  value: 'menu',
+                  label: 'NavMenu',
+                },
+                {
+                  value: 'tabs',
+                  label: 'Tabs',
+                },
+                {
+                  value: 'breadcrumb',
+                  label: 'Breadcrumb',
+                },
+                {
+                  value: 'dropdown',
+                  label: 'Dropdown',
+                },
+                {
+                  value: 'steps',
+                  label: 'Steps',
+                },
+              ],
+            },
+            {
+              value: 'others',
+              label: 'Others',
+              children: [
+                {
+                  value: 'dialog',
+                  label: 'Dialog',
+                },
+                {
+                  value: 'tooltip',
+                  label: 'Tooltip',
+                },
+                {
+                  value: 'popover',
+                  label: 'Popover',
+                },
+                {
+                  value: 'card',
+                  label: 'Card',
+                },
+                {
+                  value: 'carousel',
+                  label: 'Carousel',
+                },
+                {
+                  value: 'collapse',
+                  label: 'Collapse',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: 'resource',
+          label: 'Resource',
+          children: [
+            {
+              value: 'axure',
+              label: 'Axure Components',
+            },
+            {
+              value: 'sketch',
+              label: 'Sketch Templates',
+            },
+            {
+              value: 'docs',
+              label: 'Design Documentation',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+  },
+});
+</script>