@timus-networks/theme 1.0.184 → 2.0.16

package/components-ts/ThemeCascader.vue

@@ -1,390 +0,0 @@
-<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" clearable @change="handleChange" />
-        <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange" />
-      </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>
-      <h3>Cascader Container</h3>
-      <p class="p-lg-c my-6">
-        Cascader container contains two different component in it inside. Left one is Cascader and right one is Select dropdown.
-      </p>
-      <div class="el-cascader-container">
-        <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
-        <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
-        <el-select v-model="value" placeholder="Select" multiple>
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-        <el-input v-show="false" />
-        <el-select v-model="value" placeholder="Select" class="grow">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-        <el-button class="isax-add-circle grow-0">Add</el-button>
-      </div>
-    </section>
-
-    <section>
-      <h3>Cascader Container Another Sample</h3>
-      <p class="p-lg-c my-6">
-        Cascader container contains two different component in it inside. Left one is Cascader and right one is Select dropdown.
-      </p>
-      <div data-testid="pages-settings-configuration-productivity-index-luugpbuhne" class="el-cascader-container w-full">
-        <el-select v-model="value" placeholder="Select" multiple>
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
-        <el-select v-model="value" placeholder="Select" multiple>
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
-        <el-select v-model="value" placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
-        <el-select v-model="value" placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-        <el-select v-model="value" placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-        <el-input />
-        <el-select v-model="value" placeholder="Select" multiple>
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
-        <el-button class="isax-add-circle icon-xs"> Add </el-button>
-      </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 :options="options" :props="props" collapse-tags clearable />
-      </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 :options="options" :props="{ multiple: true, checkStrictly: true }" clearable />
-      </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 { defineComponent } from 'vue';
-
-export default defineComponent({
-  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>

package/components-ts/ThemeCheckbox.vue

@@ -1,202 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <h1>Checkbox</h1>
-
-    <section>
-      <h2>Basic Usage</h2>
-      <p class="p-lg-c my-6">Checkbox, iki durum arasında geçiş yapmak için kullanılır. Checkbox için devre dışı bırakılmış durum da mevcuttur.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-checkbox v-model="checked">Option</el-checkbox>
-        <el-checkbox :value="true" disabled>selected & disabled</el-checkbox>
-        <el-checkbox :value="false" disabled>unselected & disabled</el-checkbox>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          <code> &lt;el-checkbox :value="true" disabled&gt;Seçili & Devre Dışı&lt;/el-checkbox&gt; </code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h2>Checkbox group</h2>
-      <p class="p-lg-c my-6">
-        Checkbox grubu, birden fazla seçeneği bir arada sunarak kullanıcının birden çok seçim yapmasına olanak tanır. Bu grup içerisindeki
-        seçeneklerden bazıları devre dışı bırakılabilir veya önceden seçilmiş ve devre dışı bırakılmış olabilir.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-checkbox-group v-model="checkList" class="mb-6">
-          <el-checkbox label="Option A" />
-          <el-checkbox label="Option B" />
-          <el-checkbox label="Option C" />
-          <el-checkbox label="disabled" disabled />
-          <el-checkbox label="selected and disabled" disabled />
-        </el-checkbox-group>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          <code>
-            &lt;el-checkbox-group v-model="checkList"&gt; &lt;el-checkbox label="Seçenek A"&gt;&lt;/el-checkbox&gt; &lt;el-checkbox label="Seçenek
-            B"&gt;&lt;/el-checkbox&gt; &lt;/el-checkbox-group&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h2>Colors</h2>
-      <p class="p-lg-c my-6">
-        Renk seçenekleri ekledim. `class="primary"` şeklinde kullanılabilir. `'default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger',
-        'info', 'warning'` diğer renk seçenekleri olarak kullanılabilir.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-checkbox
-          v-for="(color, index) of colors"
-          :key="index"
-          v-model="checkAll"
-          :class="color"
-          :indeterminate="isIndeterminate"
-          @change="handleCheckAllChange"
-        >
-          Check all
-        </el-checkbox>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          <code>
-            &lt;el-checkbox v-model="checkAll" class="danger" :indeterminate="isIndeterminate" @change="handleCheckAllChange"&gt;Check
-            all&lt;/el-checkbox&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h2>Indeterminate</h2>
-      <p class="p-lg-c my-6">
-        Belirsiz durum (indeterminate) checkbox, tüm seçeneklerin seçili olup olmadığını belirsiz bırakır. Bu durum, özellikle kullanıcının bir grup
-        içerisindeki tüm seçenekleri aynı anda kontrol etmesini sağlamak için kullanışlıdır.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>
-        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-          <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
-        </el-checkbox-group>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          <code>
-            &lt;el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"&gt;Check all&lt;/el-checkbox&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <div>
-        <el-checkbox-group v-model="checkboxGroup1">
-          <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
-        </el-checkbox-group>
-      </div>
-      <div style="margin-top: 20px">
-        <el-checkbox-group v-model="checkboxGroup2" size="medium">
-          <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
-        </el-checkbox-group>
-      </div>
-      <div style="margin-top: 20px">
-        <el-checkbox-group v-model="checkboxGroup3" size="small">
-          <el-checkbox-button v-for="city in cities" :key="city" :label="city" :disabled="city === 'Beijing'">{{ city }}</el-checkbox-button>
-        </el-checkbox-group>
-      </div>
-      <div style="margin-top: 20px">
-        <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
-          <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
-        </el-checkbox-group>
-      </div>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
-
-export default defineComponent({
-  data() {
-    return {
-      colors: ['default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger', 'info', 'warning'],
-      checked: true,
-      checkboxGroup1: ['Shanghai'],
-      checkboxGroup2: ['Shanghai'],
-      checkboxGroup3: ['Shanghai'],
-      checkboxGroup4: ['Beijing'],
-      cities: cityOptions,
-      checkList: ['selected and disabled', 'Option A'],
-      checkAll: false,
-      checkedCities: ['Shanghai', 'Beijing'],
-      isIndeterminate: true,
-      time: '',
-      sizeForm: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: '',
-      },
-      loading: false,
-
-      form: {
-        email: '',
-        password: '',
-        remember: false,
-        token: null,
-        correlation_id: null,
-        action: null,
-        platform: 'manager',
-        version: '1.0.10',
-      },
-      rules: {
-        email: [
-          {
-            validator: 'validateEmail',
-            trigger: 'submit',
-            message: this.$t('messages.please_provide_valid_email'),
-          },
-        ],
-        password: [
-          {
-            required: true,
-            trigger: 'submit',
-            message: this.$t('messages.please_fill', {
-              field: this.$t('login.password'),
-            }),
-          },
-        ],
-      },
-    };
-  },
-  methods: {
-    handleCheckAllChange(val: string) {
-      this.checkedCities = val ? cityOptions : [];
-      this.isIndeterminate = false;
-    },
-    handleCheckedCitiesChange(value: string[]) {
-      const checkedCount = value.length;
-
-      this.checkAll = checkedCount === this.cities.length;
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-    },
-    showAgreementDialog(type: string) {
-      console.log('agreement: ', type);
-    },
-    submit() {
-      this.$emit('submit', this.form);
-    },
-    onSubmit() {
-      console.log('submit!');
-    },
-  },
-});
-</script>

package/components-ts/ThemeCollapse.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Basic</h1>
-      <p class="p-lg my-6">
-        Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
-      </p>
-      <el-collapse v-model="activeNames" @change="handleChange">
-        <el-collapse-item title="Consistency" name="1">
-          <div>
-            Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used
-            to;
-          </div>
-          <div>
-            Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
-          </div>
-        </el-collapse-item>
-        <el-collapse-item title="Feedback" name="2">
-          <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
-          <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
-        </el-collapse-item>
-        <el-collapse-item title="Efficiency" name="3">
-          <div>Simplify the process: keep operating process simple and intuitive;</div>
-          <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
-          <div>
-            Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
-          </div>
-        </el-collapse-item>
-        <el-collapse-item title="Controllability" name="4">
-          <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
-          <div>
-            Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusButtonSample',
-  data() {
-    return {
-      activeNames: ['1'],
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-  methods: {
-    handleChange(val) {
-      console.log(val);
-    },
-  },
-});
-</script>